<template>
|
<div style="background: #f3f3f4; z-index: 999">
|
<div style="display: flex; justify-content: center; padding-top: 20px">
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
<div style="clear: both">
|
<span style="display: flex; display: block">潜在捐献</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
background: #bcdd19;
|
margin-left: 30px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
<div style="clear: both">
|
<span style="display: flex; display: block">医学审核</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
margin-left: 30px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
<div style="clear: both">
|
<span style="display: flex; display: block">家属确认</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
margin-left: 30px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
<div style="clear: both">
|
<span style="display: flex; display: block">伦理审查</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
margin-left: 30px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
<div style="clear: both">
|
<span style="display: flex; display: block">器官分配</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
margin-left: 30px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
|
<div style="clear: both">
|
<span style="display: flex; display: block">获取见证</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
margin-left: 30px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
<div style="clear: both">
|
<span style="display: flex; display: block">捐献完成</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
margin-left: 30px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
<div style="clear: both">
|
<span style="display: flex; display: block">潜在捐献</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="
|
display: flex;
|
border-radius: 15px;
|
margin-left: 30px;
|
border: 1px solid black;
|
justify-content: center;
|
align-items: center;
|
width: 160px;
|
height: 60px;
|
"
|
>
|
<div style="clear: both">
|
<span style="display: flex; display: block">潜在捐献</span>
|
<span style="display: block; margin-top: 10px; text-align: center"
|
>数量</span
|
>
|
</div>
|
</div>
|
</div>
|
|
<div style="height: 150px"></div>
|
</div>
|
|
<!-- 医院 器官 -->
|
<div style="display: flex; clear: both; margin-left: 10px">
|
<div class="医院">
|
<el-table :data="hospitals" border style="width: 460px">
|
<el-table-column
|
align="center"
|
prop="hospitalname"
|
label="医院"
|
width="280px"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="donatenumber"
|
label="数量"
|
width="180px"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="器官" style="margin-left: 200px">
|
<!-- <div id="main" style="width: 1000px;height:400px;"></div> -->
|
<!-- <dv-border-box-2 :color="['#1b88a3', '#42f5f2']">
|
<div class="box-title" style="position: absolute; top: -8px">
|
<span><b>区域统计</b></span>
|
</div>
|
<div style="padding: 20px 20px 30px;"> -->
|
<div
|
class="c-table-title light"
|
style="
|
height: 50px;
|
line-height: 50px;
|
width: 600px;
|
border: 1px solid black;
|
"
|
>
|
器官统计
|
</div>
|
<BarChart
|
:cdata="organData"
|
:height="height - 230 + 'px'"
|
style="width: 600px; border: 1px solid black"
|
/>
|
<!-- </div> -->
|
<!-- </dv-border-box-2> -->
|
</div>
|
|
<div class="转化率" style="margin-left: 200px">
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第一转化率 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第二转化率 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第三转化率 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第四转化率 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第五转化率: 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第六转化率 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第七转化率 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第八转化率 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第九转化率 40%</span>
|
</div>
|
<div
|
style="
|
width: 160px;
|
height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
border: 1px solid black;
|
"
|
>
|
<span style="line-height: 60px">第十转化率 40%</span>
|
</div>
|
</div>
|
</div>
|
|
<br /><br /><br />
|
<div v-loading="tableLoading" style="padding-top: 12px; width: 600px">
|
<dv-border-box-6 :color="['#1b88a3']">
|
<div class="box-title" style="position: absolute; top: -8px">
|
<span><b>机构统计</b></span>
|
</div>
|
<div style="padding: 20px">
|
<el-row class="c-table-title">
|
<el-col :span="8" :class="isAll ? 'active' : ''">
|
<el-divider content-position="left"
|
><span>浙江省</span></el-divider
|
></el-col
|
>
|
<el-col :span="8" :class="isAll ? '' : 'active'"
|
><el-divider content-position="left">{{
|
isAll ? "" : currentArea.name
|
}}</el-divider></el-col
|
>
|
<el-col :span="8"><el-divider></el-divider></el-col>
|
</el-row>
|
<dv-scroll-board
|
:config="tableConfig"
|
style="width: 100%; border: 1px solid #142984"
|
:style="{ height: height - 45 + 'px' }"
|
/></div
|
></dv-border-box-6>
|
</div>
|
|
<div v-loading="isloading" style="padding: 10px">
|
<el-row class="c-home" :gutter="10">
|
<el-col :span="8">
|
<div style="padding-top: 12px">
|
<dv-border-box-12 :color="['#1b88a3']">
|
<div class="box-title" style="position: absolute; top: -8px">
|
<span><b>概况</b></span>
|
</div>
|
<div style="padding: 30px 20px 30px">
|
<div>捐献现状</div>
|
<el-row>
|
<el-col :span="12" class="box-num">
|
<div class="box-num-main">
|
<p>捐献中</p>
|
<span class="box-num-main-n">{{
|
allInfo.processOrgans
|
}}</span>
|
</div>
|
<div class="box-num-ex">
|
<span></span>
|
</div>
|
</el-col>
|
<el-col :span="12" class="box-num">
|
<div class="box-num-main">
|
<p>已完成</p>
|
<span class="box-num-main-n">{{
|
allInfo.finishedOrgans
|
}}</span>
|
</div>
|
<div class="box-num-ex">
|
<span></span>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</dv-border-box-12>
|
</div>
|
<div style="padding-top: 25px">
|
<dv-border-box-2 :color="['#1b88a3', '#42f5f2']">
|
<div class="box-title" style="position: absolute; top: -8px">
|
<span><b>区域统计</b></span>
|
</div>
|
<div style="padding: 20px 20px 30px">
|
<div
|
class="c-table-title light"
|
style="height: 50px; line-height: 50px"
|
>
|
器官统计
|
</div>
|
<BarChart :cdata="organData" :height="height - 230 + 'px'" />
|
</div>
|
</dv-border-box-2>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<dv-border-box-7 :color="['#fff']">
|
<dv-border-box-8>
|
<div style="padding: 40px 20px">
|
<MapChart
|
:cdata="cdata"
|
:height="height - 30 + 'px'"
|
@click="mapClick"
|
:chartType="chartType"
|
/></div></dv-border-box-8
|
></dv-border-box-7>
|
</el-col>
|
<el-col :span="8" v-loading="tableLoading" style="padding-top: 12px">
|
<dv-border-box-6 :color="['#1b88a3']">
|
<div class="box-title" style="position: absolute; top: -8px">
|
<span><b>机构统计</b></span>
|
</div>
|
<div style="padding: 20px">
|
<el-row class="c-table-title">
|
<el-col :span="8" :class="isAll ? 'active' : ''">
|
<el-divider content-position="left"
|
><span>浙江省</span></el-divider
|
></el-col
|
>
|
<el-col :span="8" :class="isAll ? '' : 'active'"
|
><el-divider content-position="left">{{
|
isAll ? "" : currentArea.name
|
}}</el-divider></el-col
|
>
|
<el-col :span="8"><el-divider></el-divider></el-col>
|
</el-row>
|
<dv-scroll-board
|
:config="tableConfig"
|
style="width: 100%; border: 1px solid #142984"
|
:style="{ height: height - 45 + 'px' }"
|
/></div
|
></dv-border-box-6>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script src="../../../echarts/echarts.js"></script>
|
|
<script>
|
// const echarts = require('echarts/lib/echarts');
|
// // require('echarts/lib/chart/bar');
|
// require('echarts/lib/chart/line');
|
// require('echarts/lib/component/tooltip');
|
// require('echarts/lib/component/markPoint');
|
// require('echarts/lib/component/title');
|
// require('echarts/lib/component/axisPointer');
|
import {
|
getNumberOfOrgan,
|
getOrgansOfHospital,
|
getAllOrganInfo,
|
} from "@/api/project/donateorgan";
|
import { listDonatebaseinfo } from "@/api/project/donatebaseinfo";
|
import MapChart from "../../home/components/MapChart";
|
import BarChart from "../../home/components/BarChart";
|
|
const DEF_TABLE_CONFIG = {
|
header: ["机构", "捐献数", "移植数"],
|
data: [],
|
headerBGC: "#092272",
|
oddRowBGC: "#070c29",
|
evenRowBGC: "#082243",
|
columnWidth: [200],
|
rowNum: 10,
|
};
|
|
export default {
|
name: "home",
|
props: {},
|
components: {
|
MapChart,
|
BarChart,
|
},
|
data() {
|
return {
|
hospitals: [
|
{
|
hospitalname: "杭州第一人民医院",
|
donatenumber: "123",
|
},
|
{
|
hospitalname: "杭州第二人民医院",
|
donatenumber: "221",
|
},
|
{
|
hospitalname: "杭州第三人民医院",
|
donatenumber: "222",
|
},
|
{
|
hospitalname: "杭州第四人民医院",
|
donatenumber: "80",
|
},
|
{
|
hospitalname: "杭州第五人民医院",
|
donatenumber: "343",
|
},
|
],
|
|
isloading: false,
|
tableLoading: false,
|
showTable: false,
|
currentArea: null,
|
tableList: [],
|
pageData: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
total: 0,
|
height: 350,
|
isAll: true,
|
chartType: "map",
|
tableConfig: { ...DEF_TABLE_CONFIG },
|
totalCount: 0,
|
allInfo: {
|
finishedOrgans: 0,
|
processOrgans: 4,
|
},
|
organData: [
|
{
|
key: "heart",
|
name: "心脏",
|
value: 0,
|
},
|
{
|
key: "leftLiver",
|
name: "左肝",
|
value: 0,
|
},
|
{
|
key: "rightLiver",
|
name: "右肝",
|
value: 0,
|
},
|
{
|
key: "leftRenal",
|
name: "左肾",
|
value: 0,
|
},
|
{
|
key: "rightRenal",
|
name: "右肾",
|
value: 0,
|
},
|
{
|
key: "leftLung",
|
name: "左肺",
|
value: 0,
|
},
|
{
|
key: "rightLung",
|
name: "右肺",
|
value: 0,
|
},
|
{
|
key: "leftEye",
|
name: "左眼膜",
|
value: 0,
|
},
|
{
|
key: "rightEye",
|
name: "右眼膜",
|
value: 0,
|
},
|
{
|
key: "body",
|
name: "遗体",
|
value: 0,
|
},
|
],
|
cdata: [
|
{
|
// 名字需要与 “common/map/zhejiang.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
|
name: "杭州市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "宁波市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "温州市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "嘉兴市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "湖州市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "绍兴市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "金华市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "衢州市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "舟山市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "台州市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
{
|
name: "丽水市",
|
value: 0,
|
elseData: {
|
value2: 0,
|
value3: 0,
|
},
|
},
|
],
|
};
|
},
|
created() {
|
this.height = window.innerHeight - 195;
|
},
|
mounted() {
|
this.getData();
|
//this.getList();
|
this.getAllInfo();
|
this.hostip();
|
},
|
methods: {
|
|
refresh() {
|
if (this.showTable) {
|
this.getList();
|
} else {
|
this.getData();
|
}
|
},
|
getData() {
|
this.isloading = true;
|
getNumberOfOrgan()
|
.then((response) => {
|
if (response.data) {
|
let list = response.data;
|
let resList = this.cdata.map((item, index) => {
|
let i = list.findIndex((li) => li.district == item.name);
|
if (i > -1) {
|
item.value = list[i].donateNumber ? list[i].donateNumber : 0;
|
item.elseData.value2 = list[i].acceptNumber
|
? list[i].acceptNumber
|
: 0;
|
item.elseData.value3 = list[i].numberOfHospitals
|
? list[i].numberOfHospitals
|
: 0;
|
} else {
|
item.value = 0;
|
item.elseData.value2 = 0;
|
item.elseData.value3 = 0;
|
}
|
return item;
|
});
|
this.cdata = resList;
|
}
|
})
|
.catch((erroe) => {
|
// let resList = this.cdata.map((item, index) => {
|
// item.value = this.getRanNum();
|
// item.elseData.value2 = this.getRanNum();
|
// return item;
|
// });
|
// this.cdata = resList;
|
})
|
.finally(() => {
|
this.isloading = false;
|
});
|
},
|
getList(searchArea) {
|
let searchData = {};
|
if (searchArea) {
|
searchData.cityName = searchArea;
|
this.isAll = false;
|
} else {
|
this.isAll = true;
|
}
|
this.tableLoading = true;
|
getOrgansOfHospital(searchData)
|
.then((response) => {
|
let newConfig = {
|
...DEF_TABLE_CONFIG,
|
};
|
let dataList = [];
|
if (response.data) {
|
dataList = response.data.map((item) => {
|
let li = [];
|
li.push(item.hospitalName);
|
li.push(item.donateNumber);
|
li.push(item.acceptNumber);
|
return li;
|
});
|
}
|
newConfig.data = dataList;
|
this.tableConfig = newConfig;
|
})
|
.finally(() => {
|
this.tableLoading = false;
|
});
|
},
|
|
getAllInfo() {
|
getAllOrganInfo()
|
.then((response) => {
|
if (response.data) {
|
this.allInfo = response.data;
|
let list = this.organData.map((item) => item);
|
for (let i = 0; i < list.length; i++) {
|
let k = list[i].key;
|
if (this.allInfo[k]) {
|
list.value = this.allInfo[k];
|
}
|
}
|
console.log('总器官',this.organData);
|
this.organData = list;
|
}
|
})
|
.catch((erroe) => {})
|
.finally(() => {});
|
},
|
async getTempList() {
|
let total = 0;
|
let pageIndex = 1;
|
let list = [];
|
|
try {
|
// do {
|
// let searchInfo = {
|
// pageNum: pageIndex,
|
// pageSize: 100,
|
// };
|
// let response = await listDonatebaseinfo(searchInfo);
|
// list.push(...response.rows);
|
// total = response.total;
|
// pageIndex++;
|
// this.totalCount = total;
|
// } while (list.length < total);
|
// let dataList = [];
|
// dataList = list.map((item) => {
|
// let li = [];
|
// li.push(item.registercityname);
|
// li.push(item.treatmenthospitalname);
|
// li.push(item.name);
|
// return li;
|
// });
|
// let newConfig = {
|
// ...DEF_TABLE_CONFIG,
|
// };
|
// newConfig.data = dataList;
|
// this.tableConfig = newConfig;
|
let searchInfo = {
|
pageNum: 1,
|
pageSize: 1,
|
};
|
let response = await listDonatebaseinfo(searchInfo);
|
this.totalCount = response.total;
|
} catch (error) {}
|
},
|
mapClick(data) {
|
this.currentArea = { ...data };
|
this.tableList = [];
|
this.total = 0;
|
this.pageData.pageNum = 1;
|
this.showTable = true;
|
this.getList(data.name);
|
},
|
getRanNum() {
|
return Math.round(Math.random() * 40);
|
},
|
},
|
computed: {
|
totalValue() {
|
let sum = 0;
|
for (let i = 0; i < this.cdata.length; i++) {
|
sum += this.cdata[i].value;
|
}
|
return sum;
|
},
|
totalValue2() {
|
let sum = 0;
|
for (let i = 0; i < this.cdata.length; i++) {
|
sum += this.cdata[i].elseData.value2;
|
}
|
return sum;
|
},
|
totalValue3() {
|
let sum = 0;
|
for (let i = 0; i < this.cdata.length; i++) {
|
sum += this.cdata[i].elseData.value3;
|
}
|
return sum;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.c-home {
|
.box-title {
|
width: 100%;
|
span {
|
display: block;
|
width: 130px;
|
height: 25px;
|
-webkit-transform: skew(20deg);
|
-moz-transform: skew(20deg);
|
-o-transform: skew(20deg);
|
background: #0a459f;
|
line-height: 25px;
|
align-self: center;
|
border: 1px transparent solid;
|
border-image: linear-gradient(#070a17, #7be6fc) 10 10;
|
border-image: linear-gradient(#070a17, #7be6fc) 10 10;
|
border-image: linear-gradient(#070a17, #7be6fc) 10 10;
|
margin: 0 auto;
|
}
|
b {
|
display: block;
|
color: #fff;
|
text-align: center;
|
transform: skewY(-20deg);
|
transform: skewX(-20deg);
|
}
|
}
|
.box-num {
|
position: relative;
|
.box-num-main {
|
text-align: right;
|
padding-right: 70px;
|
.box-num-main-n {
|
color: #409eff;
|
font-size: 25px;
|
}
|
}
|
.box-num-ex {
|
position: absolute;
|
bottom: 5px;
|
right: 10px;
|
width: 45px;
|
|
span {
|
color: #409eff;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
::v-deep .c-table-title {
|
.el-divider.el-divider--horizontal {
|
background-color: #95a1ec;
|
.el-divider__text.is-left {
|
color: #303133;
|
background: #fafafa;
|
}
|
}
|
.active {
|
.el-divider.el-divider--horizontal {
|
.el-divider__text.is-left {
|
color: #409eff;
|
}
|
}
|
}
|
}
|
</style>
|
