|
@@ -1,133 +1,197 @@
|
|
|
<template>
|
|
|
<div class="dashboard-editor-container">
|
|
|
<div class="mtitle">
|
|
|
- <span style="font-size: 19px">欢迎使用,{{ user.nickName }}</span>
|
|
|
- <iframe
|
|
|
- allowtransparency="true"
|
|
|
- frameborder="0"
|
|
|
- width="180"
|
|
|
- height="36"
|
|
|
- scrolling="no"
|
|
|
- style="padding-top: 10px"
|
|
|
- src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555<f=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"
|
|
|
- ></iframe>
|
|
|
+ <span style="font-size: 19px">欢迎使用岑溪人民医院随访系统</span>
|
|
|
+ <iframe allowtransparency="true" frameborder="0" width="180" height="36" scrolling="no" style="padding-top: 10px" src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555<f=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"></iframe>
|
|
|
</div>
|
|
|
-<!-- <panel-group :cdata="data.count" />
|
|
|
<div class="chart-wrapper">
|
|
|
- <div class="pop" style="width: 100%">
|
|
|
- <div class="out" style="margin: 0px; margin-top: 5px">
|
|
|
+ <!--个人形象-->
|
|
|
+ <div class="pop" style="width: 65%">
|
|
|
+ <div class="out">
|
|
|
<div class="int">
|
|
|
<div class="bos">
|
|
|
<div class="lab">
|
|
|
<div class="bsg"></div>
|
|
|
- <div class="tit">
|
|
|
- <span>本年每月捐款金额统计</span>
|
|
|
+ <div class="tit">个人形象</div>
|
|
|
+ </div>
|
|
|
+ <div class="cards">
|
|
|
+ <img :src="user.avatar" class="avatar" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="title">姓名:{{ user.nickName }}</div>
|
|
|
+ <div class="desc">角色:{{ user.roleName ? user.roleName : '无角色' }}</div>
|
|
|
+ <div class="desc">科室:{{ user.deptNameStr ? user.deptNameStr : '无科室' }}</div>
|
|
|
+ <el-button icon="el-icon-edit" type="primary" class="edit">
|
|
|
+ <router-link to="/user/profile">编辑我的形象</router-link>
|
|
|
+ </el-button>
|
|
|
+ <div class="ntc">只有医生才会在小程序上面展示个人形象</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--数据统计-->
|
|
|
+ <div class="out">
|
|
|
+ <div class="int">
|
|
|
+ <div class="bos">
|
|
|
+ <div class="lab">
|
|
|
+ <div class="bsg"></div>
|
|
|
+ <div class="tit">数据统计</div>
|
|
|
+ </div>
|
|
|
+ <div class="yr">
|
|
|
+ <div class="rout" style="padding-left: 0px">
|
|
|
+ <div class="rint" style="background-color: rgb(242 232 255)">
|
|
|
+ <div class="icon" style="color: #8642df"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt">患者数据</div>
|
|
|
+ <div class="rdesc">{{ data.count.visit || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yr">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="background-color: rgb(255 245 229)">
|
|
|
+ <div class="icon" style="color: #fab22e"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt">复诊提醒</div>
|
|
|
+ <div class="rdesc">{{ data.count.up || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="years">
|
|
|
- <div class="ctype">
|
|
|
- <div class="year" :class="{ active: currentType == index }" @click="currentType = index" v-for="(item, index) in types" :key="index">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="yr">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="background-color: rgb(237 246 254)">
|
|
|
+ <div class="icon" style="color: #489afd"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt">回访记录</div>
|
|
|
+ <div class="rdesc">{{ data.count.record || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yr">
|
|
|
+ <div class="rout" style="padding-right: 0px">
|
|
|
+ <div class="rint" style="background-color: rgb(255 242 245)">
|
|
|
+ <div class="icon" style="color: #fa5376"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt">知识库</div>
|
|
|
+ <div class="rdesc">{{ data.count.knowledge || 0 }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="year" :class="{ active: currentYear == index }" v-for="(item, index) in data.year" :key="index" @click="selectYear(index)">{{ item.year }}年</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <BarChart :chartData="chartData" :type="types[currentType].value"></BarChart>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="pop" style="width: 50%; margin-top: 10px">
|
|
|
- <div class="out" style="margin: 0px">
|
|
|
+ <!--快捷菜单-->
|
|
|
+ <div class="out">
|
|
|
<div class="int">
|
|
|
<div class="bos">
|
|
|
<div class="lab">
|
|
|
<div class="bsg"></div>
|
|
|
- <div class="tit">捐赠项目排名</div>
|
|
|
+ <div class="tit">快捷菜单</div>
|
|
|
+ </div>
|
|
|
+ <div class="yr" style="width: 20%" v-for="(item, index) in menu" :key="item.id" v-hasPermi="[item.hasPermi]">
|
|
|
+ <router-link :to="item.url">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="text-align: center; cursor: pointer">
|
|
|
+ <span class="icon" :style="{ float: 'none', color: item.color }" v-html="item.icon"></span>
|
|
|
+ <div class="ctt">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
</div>
|
|
|
- <el-table :data="rankingProject" border height="270">
|
|
|
- <el-table-column label="捐赠项目" align="left" prop="projectName" />
|
|
|
- <el-table-column label="累计捐赠次数" align="center" prop="nums" width="130" />
|
|
|
- <el-table-column label="累计捐赠(¥)" align="center" prop="money" width="150">
|
|
|
- <template slot-scope="scope">{{ scope.row.money.toFixed(2) || 0 }} 元</template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="pop" style="width: 50%; margin-top: 10px">
|
|
|
- <div class="out" style="margin: 0px; margin-left: 10px">
|
|
|
+ <!--手机预览-->
|
|
|
+ <div class="pop" style="width: 35%">
|
|
|
+ <div class="out">
|
|
|
<div class="int">
|
|
|
<div class="bos">
|
|
|
- <div class="lab">
|
|
|
- <div class="bsg"></div>
|
|
|
- <div class="tit">捐赠金额排名</div>
|
|
|
+ <div class="div-mc">
|
|
|
+ <div class="guise-mobile">
|
|
|
+ <div class="guise-mobile-show" ref="scrollbar">
|
|
|
+ <div class="js">
|
|
|
+ <div class="head"><img :src="user.avatar" /></div>
|
|
|
+ <div class="name">{{ user.nickName }}</div>
|
|
|
+ <div class="introduce" v-html="user.introduce" v-if="user.introduce"></div>
|
|
|
+ <el-empty v-else description="暂无个人介绍" :image-size="80" v-else></el-empty>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <el-table :data="rankingName" border height="270">
|
|
|
- <el-table-column label="捐赠者(单位/个人)" align="left" prop="projectName">
|
|
|
- <template slot-scope="scope">{{ scope.row.NAME || '匿名' }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="单笔捐赠(¥)" align="center" prop="money" width="150" />
|
|
|
- <el-table-column label="捐赠时间" align="center" prop="create_time" width="190" />
|
|
|
- </el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import PanelGroup from './dashboard/PanelGroup';
|
|
|
-import BarChart from './dashboard/BarChart';
|
|
|
import Vue from 'vue';
|
|
|
export default {
|
|
|
name: 'Index',
|
|
|
- components: {
|
|
|
- PanelGroup,
|
|
|
- BarChart
|
|
|
- },
|
|
|
+ components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
user: this.$store.state.user,
|
|
|
- currentYear: 0, //当前年份
|
|
|
- currentType: 0, //当前图表类型
|
|
|
- types: [
|
|
|
- { name: '柱状图', value: 'bar' },
|
|
|
- { name: '折线图', value: 'line' }
|
|
|
- ],
|
|
|
- data: { count: { total: 0 }, year: [] },
|
|
|
- chartData: [],
|
|
|
- rankingProject: [], //捐赠项目排名
|
|
|
- rankingName: [] //捐赠金额排名
|
|
|
+ data: { count: {} },
|
|
|
+ menu: [
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#607D8B',
|
|
|
+ name: '患者信息',
|
|
|
+ url: '/patient',
|
|
|
+ hasPermi: 'work:patient:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#1890ff',
|
|
|
+ name: '复诊提醒',
|
|
|
+ url: '/follow/up',
|
|
|
+ hasPermi: 'work:up:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#FF5722',
|
|
|
+ name: '回访记录',
|
|
|
+ url: '/follow/record',
|
|
|
+ hasPermi: 'work:record:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#4CAF50',
|
|
|
+ name: '回访模板',
|
|
|
+ url: '/follow/template',
|
|
|
+ hasPermi: 'work:template:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#3F51B5',
|
|
|
+ name: '知识库',
|
|
|
+ url: '/knowledge',
|
|
|
+ hasPermi: 'work:knowledge:list'
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ user() {
|
|
|
+ return this.$store.state.user;
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
- //this.getData();
|
|
|
- //this.getRanking();
|
|
|
+ this.getData();
|
|
|
},
|
|
|
methods: {
|
|
|
getData() {
|
|
|
this.ajax({ url: '/home/index' }).then((response) => {
|
|
|
this.data = response.data;
|
|
|
- this.currentYear = this.data.year.length - 1;
|
|
|
- this.getRecord();
|
|
|
- });
|
|
|
- },
|
|
|
- getRanking() {
|
|
|
- this.ajax({ url: '/home/ranking' }).then((response) => {
|
|
|
- this.rankingProject = response.data.rankingProject;
|
|
|
- this.rankingName = response.data.rankingName;
|
|
|
- });
|
|
|
- },
|
|
|
- getRecord() {
|
|
|
- this.ajax({ url: '/home/record', data: { year: this.data.year[this.currentYear].year } }).then((response) => {
|
|
|
- this.chartData = response.data;
|
|
|
});
|
|
|
- },
|
|
|
- selectYear(index) {
|
|
|
- this.currentYear = index;
|
|
|
- this.getRecord();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -141,19 +205,20 @@ export default {
|
|
|
margin-top: -15px;
|
|
|
}
|
|
|
.chart-wrapper {
|
|
|
- margin-top: 8px;
|
|
|
+ margin-top: -15px;
|
|
|
.pop {
|
|
|
float: left;
|
|
|
width: 33.33%;
|
|
|
overflow: hidden;
|
|
|
.out {
|
|
|
- margin: 10px;
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
|
|
+ margin: 16px 10px 10px 10px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 10px;
|
|
|
.int {
|
|
|
padding: 15px;
|
|
|
background: #fff;
|
|
|
overflow: hidden;
|
|
|
- border-radius: 5px;
|
|
|
+ border-radius: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -163,24 +228,42 @@ export default {
|
|
|
padding: 0px 10px 0px 10px;
|
|
|
width: 100%;
|
|
|
border: 0px;
|
|
|
- .years {
|
|
|
- float: right;
|
|
|
- margin-top: -30px;
|
|
|
- overflow: hidden;
|
|
|
- .ctype {
|
|
|
- float: left;
|
|
|
- margin-right: 30px;
|
|
|
- }
|
|
|
- .year {
|
|
|
- float: left;
|
|
|
- padding: 5px 10px;
|
|
|
- background-color: #f6f6f6;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 14px;
|
|
|
- color: #545555;
|
|
|
- &.active {
|
|
|
- background-color: rgb(64, 158, 255);
|
|
|
- color: white;
|
|
|
+ .yr {
|
|
|
+ float: left;
|
|
|
+ width: 25%;
|
|
|
+ .rout {
|
|
|
+ padding: 6px;
|
|
|
+ .rint {
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ .icon {
|
|
|
+ float: left;
|
|
|
+ font-size: 30px;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 10px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ .rcon {
|
|
|
+ float: left;
|
|
|
+ padding-left: 12px;
|
|
|
+ width: calc(100% - 55px);
|
|
|
+ .rtt {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .rdesc {
|
|
|
+ font-weight: bold;
|
|
|
+ padding-top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ctt {
|
|
|
+ color: #393939;
|
|
|
+ font-size: 15px;
|
|
|
+ padding-top: 19px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|