Skip to content

M
md-vue-chc
Commit 96eab0e6 authored by xieshoubao's avatar xieshoubao 💂
Browse files
Options

代码提交

parent 540d96d8
Hide whitespace changes
Inline Side-by-side
Showing with 2158 additions and 1 deletion
src/api/hospital.js
View file @ 96eab0e6
...@@ -45,3 +45,33 @@ export function updatePreInfo(params) { ...@@ -45,3 +45,33 @@ export function updatePreInfo(params) {
data: params data: params
}) })
} }
export function constructionStatistics(params){
return request({
url: '/api/team/report/constructionStatistics',
method: 'POST',
data: params
})
}
export function businessTeamStatistics(params){
return request({
url: '/api/team/report/businessTeamStatistics',
method: 'POST',
data: params
})
}
export function businessOperationStatistics(params){
return request({
url: '/api/team/report/businessOperationStatistics',
method: 'POST',
data: params
})
}
export function queryHospitalList(params,str){
var name=str?str:'';
return request({
url:`/api/team/hospital/queryHospitalList?name=${name}`,
method: 'GET',
data: params
})
}
\ No newline at end of file
src/page/InHosFirstAid/index.vue 0 → 100644
View file @ 96eab0e6
<template>
<div class="main-page">
<div class="main-page-header">
<p class="title">院内急救信息</p>
<el-form :inline="true" :model="searchForm" ref="searchForm" size="small">
<el-form-item prop="hospitalCode" label="选择医院">
<el-select v-model="searchForm.hospitalCode" placeholder="请选择医院名称">
<el-option v-for="item in hospitalList" :key="item.code" :label="item.Name" :value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="rangeDate" label="上传时间">
<el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" v-model="searchForm.rangeDate" prefix-icon="el-icon-date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<div class="btns">
<el-button type="primary" size="small" @click="search">查询</el-button>
<el-button size="small" @click="$refs.FileInputEl.click()">导入EXCEL</el-button>
</div>
</el-form>
<div style="display:none;">
<input type="file" ref="FileInputEl" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
</div>
</div>
<div class="main-page-body">
<div class="mainContent InHosFirstAid">
<div class="bt tab-btn">
<el-button :class="{active:activeTab=='1'}" @click="changeTab(`1`)">胸痛中心</el-button>
<el-button :class="{active:activeTab=='2'}" @click="changeTab(`2`)">卒中中心</el-button>
</div>
<div class="table-cont">
<table-mixin :pageSize="pageSize" :pageNum="pageNum" :total="total" :pagination="pagination" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange">
<el-table style="width:100%" border v-loading="tableData.loading" :data="tableData.body" @sort-change="handleSortChange">
<div slot="empty" class="noData"></div>
<el-table-column v-for="(item,index) in tableData.head" :prop="item.key" :label="item.name" align="left" :formatter="item.formatter" :sortable="item.sortable" :fixed="item.fixed" :key="item.key+'_'+index" :min-width="item.width"></el-table-column>
</el-table>
</table-mixin>
</div>
</div>
</div>
</div>
</template>
<script>
import { tableDataMixin } from '@/common/js/mixin';
import { queryIntegrationList,queryHospitalList } from '@/api/hospital';
import { mapGetters } from 'vuex';
export default {
name: 'InHosFirstAid',
mixins: [tableDataMixin],
data() {
var d=new Date();var yar=d.getFullYear(),month=d.getMonth()+1,day=d.getDate();month=(month<10)?('0'+month):(month);day=(day<10)?('0'+day):(day);
let oDate=[`${yar}-01-01`,`${yar}-${month}-${day}`];
return {
activeTab:'2',
hospitalList:[],
searchForm: {
hospitalCode:'',
rangeDate:oDate
},
patientTypeList: [],
tableData: {
loading: false,
head:[],
body: [],
option: [],
condition: []
}
}
},
computed:{
...mapGetters(['userInfo'])
},
created(){
var that=this;
that.ChangeSetTableHead();
let code=that.userInfo.hospitalCode;
let Name=that.userInfo.hospitalName;
var HosLis=[{code:code,Name:Name}];
that.searchForm.hospitalCode=code;
queryHospitalList({}).then((res)=>{
if(res.msg==201){
var hospitalList=(Array.isArray(res.respData)?(res.respData):[]).map(function(item){
return Object.freeze({ code:item.hospitalCode, Name:item.hospitalName });
});
let flag=hospitalList.some(function(c){return c.code==code;});
if(!flag){
that.hospitalList=Object.freeze((HosLis).concat(hospitalList))
}else{
that.hospitalList=Object.freeze(hospitalList);
}
}else{
that.$message.error(res.content)
}
})
},
mounted() {
},
methods: {
ChangeSetTableHead(){
var that=this;
var kys1=[{name:"门诊ID",key:"certificateNo"},{name:"姓名",key:"name"},{name:"性别",key:"gender"},{name:"年龄",key:"age"},{name:"电话",key:"phoneNo"},{name:"住院ID",key:"inPatientId"},{name:"发病时间",key:"attackTime"},{name:"初步诊断",key:"firstDiagnosis"},{name:"诊断时间",key:"diagnosisTime"},{name:"来院方式",key:"toHospitalWay"},{name:"到达医院大门时间",key:"toHospitalTime"},{name:"首次医疗接触时间",key:"firstContactTime"},{name:"首诊医师接诊时间",key:"firstDoctorContactTime"},{name:"转出医院名称",key:"transferOutHospitalName"},{name:"转出医院入门时间",key:"transOutIntoTime"},{name:"转出医院出门时间",key:"transOutLeaveTime"},{name:"心电图采集时间",key:"ecgCollectTime"},{name:"心电图诊断时间",key:"ecgDiagTime"},{name:"肌钙蛋白抽血时间",key:"bloodDrawingTime"},{name:"肌钙蛋白报告时间",key:"bloodReportTime"},{name:"肌钙蛋白检测值",key:"checkValue"},{name:"请会诊时间",key:"consulationTime"},{name:"会诊到达时间",key:"consulationArriveTime"},{name:"抗血小板治疗药物",key:"antiplateMedical"},{name:"抗血小板给药时间",key:"antiplateTime"},{name:"抗凝给药时间",key:"anticoaTime"},{name:"再灌注措施",key:"refersionMessure"},{name:"开始知情同意",key:"startInformedConsent"},{name:"签署知情同意",key:"signInformedConsent"},{name:"启动导管室时间",key:"startCatherRoomTime"},{name:"激活导管室时间",key:"activeCatherRoomTime"},{name:"导丝通过时间",key:"guideWirePassTime"},{name:"溶栓开始时间",key:"startThrombolysisTime"},{name:"溶栓结束时间",key:"endThrombolysisTime"},{name:"出院诊断",key:"dischargeDiagnosis"}];
var kys2=[{name:"序号",key:"idx"},{name:"住院号",key:"hospitalId"},{name:"病患姓名",key:"name"},{name:"性别",key:"gender"},{name:"年龄",key:"age"},{name:"初步诊断",key:"firstDiagnosis"},{name:"诊断时间",key:"diagnosisTime"},{name:"治疗类型",key:"treatmentType"},{name:"住院时间",key:"inHospitalTime"},{name:"入院途径",key:"admissionRoute"},{name:"是否在院卒中",key:"isInHospitalStroke"},{name:"来院方式",key:"toHospitalWay"},{name:"发病时间",key:"attackTime"},{name:"患者到院时间",key:"toHospitalTime"},{name:"患者到达急诊科时间",key:"arrivedEmergencyTime"},{name:"申请会诊时间",key:"consulationTime"},{name:"卒中团队到达急诊科时间",key:"stokeArrivedEmergencyTime"},{name:"患者离开急诊科时间",key:"leaveEmergencyTime"},{name:"患者到达CT时间",key:"arriveCtTime"},{name:"患者到达MRI时间",key:"arriveMrTime"},{name:"获得CT结果时间",key:"getCtTime"},{name:"获得MRI结果时间",key:"getMriTime"},{name:"抽血开始时间(院内首次)",key:"firstBloodTime"},{name:"血液样本送达检验科时间",key:"sampleDeliverLabTime"},{name:"获得血常规时间",key:"bloodRoutineTime"},{name:"获取凝血常规时间",key:"coagulationRoutineTime"},{name:"获取肾功能结果时间",key:"renalFunctionTime"},{name:"获取电解质结果时间",key:"electrolyteTime"},{name:"开始溶栓知情同意",key:"startInformedConsent"},{name:"签署知情同意时间",key:"signInformedConsent"},{name:"首剂给药时间",key:"firstMedicalTime"},{name:"开始穿刺时间",key:"startPunctureTime"},{name:"穿刺成功时间",key:"successPunctureTime"},{name:"血管再通时间",key:"recanalizationTime"},{name:"出院时间",key:"dischargeTime"},{name:"急诊科耗时",key:"emergencyCostTime"},{name:"发病时长",key:"durationOfOnset"},{name:"患者入院-抽血开始时间耗时",key:"admissionDrawingTime"},{name:"抽血开始时间-血液送达检验科耗时",key:"drawingLabTime"},{name:"血液样本送达检验科-血常规结果时间（≤10分钟）",key:"labGetRoutineTime"},{name:"DNT时长",key:"dntOfTime"},{name:"DIT时长",key:"ditOfTime"},{name:"DTP时长",key:"dipOfTime"},{name:"DRT时长",key:"drtOfTime"},{name:"急诊接诊医生",key:"emergencyDoctor"},{name:"急诊接诊护士",key:"emergencyNurse"},{name:"溶栓医生",key:"thrombolysisDoctor"},{name:"介入医生",key:"interventionalDoctor"}];
var tableHead=that.activeTab==1?kys1:kys2;
var head=tableHead.map(function(oc,index){
oc.fixed=!!(index<2);
oc.sortable=false;
oc.width=null;
if(oc.name.indexOf('姓名')!=-1){
oc.width='150';
};
if(oc.name=='门诊ID'){
oc.width='100';
}
if(oc.name=='年龄'){
oc.width='80';
}
if(oc.name=="性别"){
oc.width='80';
oc.formatter=((row, column, cellValue, index)=>{ return cellValue === 1 ? '男' : cellValue === 2 ? '女' : '' });
}
if(oc.name.indexOf('时间')!=-1){
oc.width='180';
};
return Object.freeze(oc);
});
// console.log(head)
that.tableData.head=Object.freeze(head);
},
changeTab(num){
this.activeTab=num;
this.search();
},
getTableData() {
this.tableData.loading = true;
this.ChangeSetTableHead();
const params = {
patientType: this.searchForm.patientType,
pageNo: this.pageNum,
pageSize: this.pageSize
}
queryIntegrationList(params).then((res) => {
if (res.msg == 201) {
this.dealTableResponse(res)
} else {
this.$message.error(res.content)
}
})
},
logTypeFormatter(row, column, cellValue, index) {
const logType = this.logTypeList.find(i => i.val === cellValue)
return logType ? logType.name : ''
},
goDetail(type, row) {
const query = {
type: type
}
if (type === 'update' || type === 'detail') {
query.patientType = row.patientType
query.associationId = row.associationId
}
const routerData = this.$router.resolve({
path: '/business/hospital/detail',
query: query
})
window.open(routerData.href, '_blank')
}
}
};
</script>
<style lang="scss" scoped>
.InHosFirstAid{
.tab-btn{
font-size:0;
button.el-button{
position: relative;
font-size:14px;
border-radius:0;
margin-left:0;
margin-right:0;
&.active{
border-color:#FFF;
color:#3B88D9;
&:before{
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color:#3B88D9;
margin-right: 8px;
border-radius:50%;
}
}
}
}
.table-cont{
padding:20px;
}
}
</style>
\ No newline at end of file
src/page/collStatis/index.vue 0 → 100644
View file @ 96eab0e6
<template>
<div class="main-page">
<div class="collStatis">
<el-row>
<el-col :span="12">
<div class="padding-right12">
<div class="panel">
<div class="p-title">
<span>当日急救患者</span>
</div>
<el-row>
<el-col :span="12" class="cont-center">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v1.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">胸痛中心</div>
<div class="num-desc"><span>{{dayPatients.chestCount}}</span>个</div>
</div>
</div>
</el-col>
<el-col :span="12" class="cont-center">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v2.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">卒中中心</div>
<div class="num-desc"><span>{{dayPatients.strokeCount}}</span>个</div>
</div>
</div>
</el-col>
<el-col :span="12" class="cont-center">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v3.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">创伤中心</div>
<div class="num-desc"><span>{{dayPatients.traumaCount}}</span>个</div>
</div>
</div>
</el-col>
<el-col :span="12" class="cont-center">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v4.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">烧伤中心</div>
<div class="num-desc"><span>{{dayPatients.burnCount}}</span>个</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="padding-left12">
<div class="panel">
<div class="p-title">
<span>累计急救患者</span>
</div>
<el-row>
<el-col :span="12" class="cont-center">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v1.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">胸痛中心</div>
<div class="num-desc"><span>{{cumulativePatients.chestCount}}</span>个</div>
</div>
</div>
</el-col>
<el-col :span="12" class="cont-center">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v2.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">卒中中心</div>
<div class="num-desc"><span>{{cumulativePatients.strokeCount}}</span>个</div>
</div>
</div>
</el-col>
<el-col :span="12" class="cont-center">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v3.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">创伤中心</div>
<div class="num-desc"><span>{{cumulativePatients.traumaCount}}</span>个</div>
</div>
</div>
</el-col>
<el-col :span="12" class="cont-center">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v1.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">烧伤中心</div>
<div class="num-desc"><span>{{cumulativePatients.burnCount}}</span>个</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
<div class="margin-top24">
<div class="panel">
<div class="p-title">
<span>区域院前急救统计</span>
<div class="right-Box">
<el-button type="text" @click="ChangeDateCharts(1)">近三个月</el-button>
<div class="vh">|</div>
<el-button type="text" @click="ChangeDateCharts(2)">近一年</el-button>
</div>
</div>
<div>
<div class="bar-cover-charts" ref="BarEl"></div>
<div class="scroll_Box" ref="BarScBox" @scroll="SCOllBoxFn(`BarData`,`BarEl`,`BarScBox`,`BarScLine`,`persw`)">
<div ref="BarScLine"></div>
</div>
</div>
</div>
</div>
<el-row class="margin-top24">
<el-col :span="12">
<div class="padding-right12">
<div class="panel">
<div class="p-title">
<span>院前急救转运平均时间</span>
</div>
<div>
<div class="c50_charts" ref="c50Bar"></div>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="padding-left12">
<div class="panel">
<div class="p-title">
<span>病种类别统计</span>
</div>
<div>
<div class="c50_charts" ref="c50Pie"></div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import {businessTeamStatistics} from '@/api/hospital.js';
export default{
data(){
return{
/*
"burnCount": 2, //烧伤数量
"chestCount": 21, //胸痛数量
"strokeCount": 2, //卒中数量
"traumaCount": 1 //创伤数量
*/
cumulativePatients:{ //累计急救患者
chestCount:'',
strokeCount:'',
traumaCount:'',
burnCount:''
},
dayPatients:{
chestCount:'',
strokeCount:'',
traumaCount:'',
burnCount:''
},
activePanel:'v1',
BarDatav1:{
Namelis:[
// "a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15","a16","a17","a18","a19","a20","a21","a22","a23","a24","a25","a26","a27","a28","a29","a30","a31","a32","a33","a34","a35","a36","a37","a38","a39","a40","a41","a42","a43","a44","a45","a46","a47","a48","a49","a50","a51","a52","a53","a54","a55","a56","a57","a58","a59","a60","a61","a62","a63","a64","a65","a66","a67","a68","a69","a70","a71","a72","a73","a74","a75","a76","a77","a78","a79","a80","a81","a82","a83","a84","a85","a86","a87","a88","a89","a90","a91","a92","a93","a94","a95","a96","a97","a98","a99"
],
Arr:[
// [50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
// [16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
// [94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97],
// [39,50,46,32,19,24,41,55,1,85,80,14,37,90,37,19,70,29,81,44,34,26,48,9,35,47,41,5,68,88,65,86,7,11,24,89,31,90,13,80,10,67,26,40,53,10,42,51,96,43,72,64,74,85,28,44,65,86,25,27,29,79,65,70,81,98,69,80,31,34,80,50,42,18,57,1,91,36,41,23,83,53,67,40,47,43,36,48,11,51,54,57,25,36,58,89,22,95,97,91],
]
},
BarDatav2:{ Namelis:[],Arr:[] },
ViewLen:{
persw:null,
}
}
},
mounted(){
this.getv1Data();
this.getv2Data();
this.$nextTick(()=>{
// this.barChartsInit();
this.drawc50Bar();
this.drawc50Pie();
});
},
methods:{
gv(value,dValue){ return (value)?value:dValue },
getv1Data(){
var that=this;
businessTeamStatistics({}).then((res)=>{
if (res.msg == 201) {
that.fillServeData(res.respData);
} else {
that.$message.error(res.content)
}
})
},
getv2Data(){
var that=this;
var d=new Date();var yar=d.getFullYear(),moth=d.getMonth()+1,dey=d.getDate();moth=(moth<10)?('0'+moth):moth;dey=(dey<10)?('0'+dey):dey;
var params={ startTime:`${yar-1}-${moth}-${dey}`, endTime:`${yar}-${moth}-${dey}` };
businessTeamStatistics(params).then((res)=>{
if (res.msg == 201) {
var areaPreTotal=that.gv(res.respData.areaPreTotal,[]);
var kys=['chestTotal','strokeTotal','traumaTotal','burnTotal'];
var result=areaPreTotal.reduce(function(prv,cur,i,arr){
prv.Names.push(cur.areaStr);
kys.forEach((ky,j)=>{ prv.arr[j].push(cur[ky]||0) })
return prv;
},{Names:[],arr:[[],[],[],[]]});
that.BarDatav2.Namelis=Object.freeze(result.Names);
that.BarDatav2.Arr=Object.freeze(result.arr.map(Object.freeze));
} else {
that.$message.error(res.content)
}
})
},
fillServeData(respData){
var that=this;
var p1=that.gv(respData.cumulativePatients,{});
var p2=that.gv(respData.dayPatients,{});
that.cumulativePatients={
chestCount:that.gv(p1.chestCount,'0'),
strokeCount:that.gv(p1.strokeCount,'0'),
traumaCount:that.gv(p1.traumaCount,'0'),
burnCount:that.gv(p1.burnCount,'0'),
}
that.dayPatients={
chestCount:that.gv(p2.chestCount,'0'),
strokeCount:that.gv(p2.strokeCount,'0'),
traumaCount:that.gv(p2.traumaCount,'0'),
burnCount:that.gv(p2.burnCount,'0'),
};
var kys=['chestTotal','strokeTotal','traumaTotal','burnTotal'];
var areaPreTotal=that.gv(respData.areaPreTotal,[]);
var result=areaPreTotal.reduce(function(prv,cur,i,arr){
prv.Names.push(cur.areaStr);
kys.forEach((ky,j)=>{ prv.arr[j].push(cur[ky]||0) })
return prv;
},{Names:[],arr:[[],[],[],[]]});
that.BarDatav1.Namelis=Object.freeze(result.Names);
that.BarDatav1.Arr=Object.freeze(result.arr.map(Object.freeze));
that.barChartsInit();
var preTransferTimeTotal=that.gv(respData.preTransferTimeTotal,{});
var kys=['chestTransferTime','strokeTransferTime','traumaTransferTime','burnTransferTime'];
that.drawc50Bar(kys.map(function(ky){ return that.gv(preTransferTimeTotal[ky],0) }))
var piekys=[`chestCount`,`strokeCount`,`traumaCount`,`burnCount`];
var Names=[`胸痛`,`卒中`,`创伤`,`烧伤`];
that.drawc50Pie(piekys.map(function(ky,i){return{value:that.gv(p1[ky],0),name:Names[i]}}));
},
barChartsInit(){
var that=this;
var Oc={datakey:'BarData',dom:'BarEl',scBox:'BarScBox',scline:'BarScLine',vlen:'persw'};
var drData=that[(Oc.datakey+that.activePanel)];
var Namelis=drData.Namelis;
if(Namelis.length=='0'){ return; }
var Arr=drData.Arr;
var Wh=(that.$refs[(Oc.scBox)]).offsetWidth;
var ViLen=Math.ceil((Wh-150)/200);
var Rlen=(ViLen>=Namelis.length)?(Namelis.length):ViLen;
// Rlen=(Rlen>=6)?6:Rlen;
//console.log('当前屏幕尺寸下页面显示柱状图个数：'+Rlen);
(that.$refs[(Oc.scline)]).style.width=(Namelis.length*100/Rlen)+"%";
(that.ViewLen)[(Oc.vlen)]=Rlen;
var Nkli=Namelis.slice(0,Rlen);
var Dar=Arr.map(function(C){ return C.slice(0,Rlen);});
that.drawBarEchart(Oc.dom,Nkli,Dar);
},
SCOllBoxFn(datakey,dom,scrollBox,scrollLine,vlen){
// data,dom,scrollBox,scrollLine /*分别对应，数据，渲染dom元素，滚动盒子，滚动条*/
var that=this;
var sclLeft=(that.$refs[scrollBox]).scrollLeft;
var drData=that[datakey+that.activePanel];
var Namelis=drData.Namelis;
var ViewLen=(that.ViewLen)[vlen];
var Arr=drData.Arr;
var MaxSts=Namelis.length-ViewLen;
var Wh=(that.$refs[scrollBox]).offsetWidth;
var Cwh=(that.$refs[scrollLine]).offsetWidth;
var CBrw=(Cwh-Wh)/(MaxSts);
var I=Math.floor(sclLeft/CBrw);
var NeLis=Namelis.slice(I,I+ViewLen);
var ArLs=Arr.map(function(G){return G.slice(I,I+ViewLen);});
// //console.log(NeLis,ArLs);
that.drawBarEchart(dom,NeLis,ArLs);
},
drawBarEchart(dom,NameLis,arr){
var that=this;
let myChart = that.getCtx(dom)
var option ={
grid:{
left:40, // 默认10%，给24就挺合适的。
top:60, // 默认60
right:10, // 默认10%
bottom:35, // 默认60
},
legend: {
// orient: 'vertical',
right: '8',
top: '2',
// 设置图例形状
itemWidth:12, // 设置宽度
itemHeight:12, // 设置高度
textStyle:{
color:"#000",
fontSize: 14,
},
},
xAxis: {
type: 'category',
axisTick: { show:false },/*影藏坐标轴刻度*/
// data: ['张三丰', '刘天宇', '王自大', '孙乾坤', '李自傲', '周天启', '冯天成','任天雨']
data:NameLis
},
yAxis: {
type: 'value',
minInterval:1,
axisTick: { show:false }
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
show: false
},
backgroundColor:'#FFF',
boxShadow:'0 2px 12px 0 rgba(0,0,0,0.1)',
textStyle:{
color:'#444'
},
formatter: function(params){
var st='';var sg=0;var reslt;
for(let s=0;s<params.length;s++){
let itm=params[s];
sg+=itm.value;
st+=`<div style='line-height:25px;'>
<div style='float:left;padding-right:15px;'>
<span style='display:inline-block;width:10px;height:10px;margin-right:5px;background-color:${itm.color};'></span>
<span>${itm.seriesName}</span>
</div>
<div style='float:right;color:#000;font-weight:bold;'>${itm.value}</div><br>
</div>`;
}
reslt=`<div style='line-height:30px;'>
<div>${((params[0])["axisValue"])}</div>
</div>`;
reslt+=st;
return `<div style="padding:0 10px 0 10px;">${reslt}</div>`;
}
},
series: [
{
name:"胸痛",
// data: [100, 200, 150, 80, 70, 110, 130,45],
data:arr[0],
// stack:'sum',
type: 'bar',
barGap:0.05,
barMaxWidth:30,
barMinWidth:10,
itemStyle:{
normal:{
color:'#3683B8'
}
},
},
{
name:"卒中",
// data: [80, 200, 150, 80, 70, 110, 130,45],
data:arr[1],
// stack:'sum',
type: 'bar',
barGap:0.05,
barMaxWidth:30,
barMinWidth:10,
itemStyle:{
normal:{
color:'#4294EA'
}
},
},
{
name:"创伤",
// data: [70, 200, 150, 80, 70, 110, 130,45],
data:arr[2],
// stack:'sum',
type: 'bar',
barGap:0.05,
barMaxWidth:30,
barMinWidth:10,
itemStyle:{
normal:{
color:'#8DCA86'
}
},
},
{
name:"烧伤",
// data: [90, 200, 150, 80, 70, 110, 130,45],
data:arr[3],
// stack:'sum',
type: 'bar',
barGap:0.05,
barMaxWidth:30,
barMinWidth:10,
itemStyle:{
normal:{
color:'#E8AC63'
}
}
}
]
};
//console.log(option)
myChart.setOption(option);
},
drawc50Bar(data){
var that=this;
let myChart = that.getCtx('c50Bar')
var opts={
grid:{
left:40, // 默认10%，给24就挺合适的。
top:40, // 默认60
right:10, // 默认10%
bottom:25, // 默认60
},
xAxis: {
data: ['胸痛中心', '卒中中心', '创伤中心', '烧伤中心'],
axisTick:{
show:false
}
},
yAxis: {
type: 'value'
},
series: [
{
label: {
show: true,
position: 'top'
},
barWidth:60,
// data: [120, 200, 150, 80],
data:data,
color:'#4495E6',
type: 'bar'
}
]
};
myChart.setOption(opts);
},
drawc50Pie(data){
var that=this;
var myChart=that.getCtx('c50Pie')
// var data=[
// {value: 100, name: '胸痛'},
// {value: 50, name: '卒中'},
// {value: 160, name: '创伤'},
// {value: 80, name: '烧伤'}
// ]
var opts={
legend: {
orient: 'vertical',
x: '15',
y: 'center',
// 设置图例形状
itemWidth:12, // 设置宽度
itemHeight:12, // 设置高度
itemGap:25,
textStyle:{
color:"#000",
fontSize: 14,
paddingLeft:5,
},
},
series: [
{
// name: '访问来源',
type: 'pie',
radius: ['38%', '53%'],
center: ["50%", "50%"],
avoidLabelOverlap: false,
hoverAnimation: true,
label:{
formatter:function(params){
return `${params.name}中心：${params.percent}% {txt2|${params.value}}`
},
rich:{
txt2:{
fontWeight:'bold'
}
},
textStyle:{
color:'rgba(68, 68, 68, 0.8)'
}
},
color:['#3683B8', '#4294EA','#8DCA86', '#E8AC63'],
emphasis: { /*强调样式*/
label: {
show: true
}
},
labelLine: {
show: true
},
data:data,
}
]
};
myChart.setOption(opts);
},
ChangeDateCharts(num){this.activePanel=(num==1)?'v1':'v2';this.barChartsInit();},
getCtx(refName){ return echarts.init((this.$refs)[refName]); }
}
}
</script>
<style lang="scss" scoped>
.collStatis{
.padding-left12{
padding-left:12px;
}
.padding-right12{
padding-right:12px;
};
.margin-top24{
margin-top:24px;
}
.panel{
background-color:#FFF;
padding: 24px 32px;
.p-title{
>span{
font-size:20px;
padding: 0px 10px;
color:rgba(0, 0, 0, 0.87);
}
.right-Box{
float:right;
padding-right: 10px;
.vh{
display: inline-block;
padding-left: 10px;
padding-right: 10px;
}
button{
padding-top:1px;
padding-bottom:1px;
}
}
}
.cont-center{
text-align:center;
}
.lis{
display:inline-flex;
min-width:calc( 25% - 20px );
margin-right:15px;
padding: 20px 1px 20px;
&:last-child{
margin-right:0;
}
.icon{
width:55px;
display:block;
padding-top: 6px;
img{
display:block;
width:100%;
}
}
.txt{
padding:1px 10px;
.type-desc{
padding:4px;
}
.num-desc{
padding: 1px 5px;
span{
font-size:24px;
font-weight:bold;
}
}
}
}
.bar-cover-charts{
height:350px;
}
.scroll_Box{
width:100%;
overflow-x:auto;
overflow-y:hidden;
}
.scroll_Box>div{
width:100%;
height: 1px;
}
.c50_charts{
height:260px;
}
}
}
</style>
src/page/overview/index.vue 0 → 100644
View file @ 96eab0e6
<template>
<div class="main-page">
<div class="page-overview">
<div class="divHeight">
<div class="w50">
<div class="type-lis-cont">
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v1.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">胸痛中心</div>
<div class="num-desc"><span>{{chestTotal}}</span>个</div>
</div>
</div>
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v2.png" alt="" />
</div>
<div class="txt">
<div class="type-desc">胸痛中心</div>
<div class="num-desc"><span>{{strokeTotal}}</span>个</div>
</div>
</div>
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v3.png" alt="">
</div>
<div class="txt">
<div class="type-desc">胸痛中心</div>
<div class="num-desc"><span>{{traumaTotal}}</span>个</div>
</div>
</div>
<div class="lis">
<div class="icon">
<img src="@/assets/icon_img/v4.png" alt="">
</div>
<div class="txt">
<div class="type-desc">胸痛中心</div>
<div class="num-desc"><span>{{burnTotal}}</span>个</div>
</div>
</div>
</div>
<div class="map-cont">
<div class="overview-map" ref="MapChart"></div>
</div>
</div>
<div class="w50">
<div class="div-charts">
<div class="charts-title"> 2021年武汉市各中心授牌数量({{p1itemTotal}}) <span>{{descTxt}}<i :class="[addOrReduce==1?`el-icon-top`:`el-icon-bottom`,`bold`]"></i></span></div>
<div class="charts-cont" ref="pie01"></div>
</div>
<div class="div-charts">
<div class="charts-title"> 2021年武汉市各中心授牌数量({{p2itemTotal}})</div>
<div class="charts-cont" ref="pie02"></div>
</div>
</div>
</div>
</div>
<div class="page-overview" style="margin-top:20px;">
<div class="bar-cont">
<div class="charts-title">武汉市各区域胸痛卒中创伤烧伤认证授牌统计</div>
<div>
<div class="bar-Div" ref="BarEl"></div>
<div class="scroll_Box" ref="BarScBox" @scroll="SCOllBoxFn(`BarData`,`BarEl`,`BarScBox`,`BarScLine`,`persw`)">
<div ref="BarScLine"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import wuhan from '@/assets/map/wuhan.json';
import {constructionStatistics} from '@/api/hospital';
export default{
name: 'overviewIndex',
data() {
return {
chestTotal:'',
strokeTotal:'',
traumaTotal:'',
burnTotal:'',
p1itemTotal:null,
p2itemTotal:null,
addOrReduce:'1',
addPercent:'',
descTxt:'',
areaCenters:[
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"蔡甸区","areaCenters":[]},
{"chestTotal":1,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":1,"areaName":"江岸区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"江夏区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"武昌区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"汉南区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"新洲区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"江汉区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"东西湖区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"洪山区","areaCenters":[]},
{"chestTotal":1,"strokeTotal":1,"burnTotal":1,"traumaTotal":1,"itemTotal":1,"areaName":"青山区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"汉阳区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"黄陂区","areaCenters":[]},
{"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"硚口区","areaCenters":[]}
],
BarData:{
Namelis:[
"a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15","a16","a17","a18","a19","a20","a21","a22","a23","a24","a25","a26","a27","a28","a29","a30","a31","a32","a33","a34","a35","a36","a37","a38","a39","a40","a41","a42","a43","a44","a45","a46","a47","a48","a49","a50","a51","a52","a53","a54","a55","a56","a57","a58","a59","a60","a61","a62","a63","a64","a65","a66","a67","a68","a69","a70","a71","a72","a73","a74","a75","a76","a77","a78","a79","a80","a81","a82","a83","a84","a85","a86","a87","a88","a89","a90","a91","a92","a93","a94","a95","a96","a97","a98","a99"
],
Arr:[
[50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
[16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
[94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97],
[39,50,46,32,19,24,41,55,1,85,80,14,37,90,37,19,70,29,81,44,34,26,48,9,35,47,41,5,68,88,65,86,7,11,24,89,31,90,13,80,10,67,26,40,53,10,42,51,96,43,72,64,74,85,28,44,65,86,25,27,29,79,65,70,81,98,69,80,31,34,80,50,42,18,57,1,91,36,41,23,83,53,67,40,47,43,36,48,11,51,54,57,25,36,58,89,22,95,97,91],
]
},
ViewLen:{
persw:null,
}
}
},
mounted() {
var that=this;
that.$nextTick(()=>{
echarts.registerMap('wuhan', wuhan)
// that.drawChar();
// that.drawPie();
// that.drawBar();
that.getServeData();
});
},
methods:{
getServeData(){
var that=this;
constructionStatistics({}).then((res)=>{
if (res.msg == 201) {
that.fillServeData(res.respData);
} else {
this.$message.error(res.content)
}
})
},
gv(value,dValue){ return (value)?value:dValue },
fillServeData(respData){
var that=this;
var centerSummary=that.gv(respData.centerSummary,{});
that.chestTotal=that.gv(centerSummary.chestTotal,'');
that.strokeTotal=that.gv(centerSummary.strokeTotal,'');
that.traumaTotal=that.gv(centerSummary.traumaTotal,'');
that.burnTotal=that.gv(centerSummary.burnTotal,'');
that.addOrReduce=respData.addOrReduce;
that.addPercent=respData.addPercent;
that.descTxt=`同比${that.addOrReduce==1?'增长':'减少'}${that.addPercent}%`;
var kys=['chestTotal','strokeTotal','traumaTotal','burnTotal'];
var Names=['胸痛','卒中','创伤','烧伤'];
var refNames=['pie01','pie02'];
var gks=['p1itemTotal','p2itemTotal'];
// that.drawPie('pie01',[])
that.gv(respData.twoYearsData,[]).forEach(function(pie,i){
that[gks[i]]=pie.itemTotal;
that.drawPie(refNames[i],kys.map(function(ky,j){ return { value:pie[ky], name:Names[j] } }))
});
var areaCenters=that.gv(centerSummary.areaCenters,[]);
that.drawChar(areaCenters);
var result=areaCenters.reduce(function(prv,cur,i,arr){
prv.Names.push(cur.areaName);
kys.forEach((ky,j)=>{ prv.arr[j].push(cur[ky]) })
return prv;
},{Names:[],arr:[[],[],[],[]]});
console.log(result);
that.BarData.Namelis=Object.freeze(result.Names);
that.BarData.Arr=Object.freeze(result.arr.map(Object.freeze));
that.drawBar();
},
drawChar(areaCenters){
var that=this;
var myChart=that.getCtx('MapChart')
const list = areaCenters.map((item, index) => {
return Object.assign(item,{name: item.areaName},{value: item.itemTotal});
});
let option = {
tooltip: {
trigger: 'item',
formatter:function(p){
const params=p.data;
const htmlStr=`<style type="text/css">
.tip111 .name {
padding:2px 5px 15px;
font-size:16px;
font-weight: bold;
color: #000000;
width:180px;
}
.tip111 .b {
height:140px;
}
.tip111 .l,
.tip111 .r {
float: left;
height: 100%;
}
.tip111 .l {
box-sizing: border-box;
border-right:1px solid rgba(0, 0, 0, 0.38);
padding-top:6px;
text-align: center;
width:68px;
}
.tip111 .l .p1 {
font-size:14px;
color: rgba(0, 0, 0, 0.6);
}
.tip111 .l .p2 {
font-size:30px;
color: #000000;
margin-top: 16px;
}
.tip111 .r {
width: 60%;
}
.tip111 .r li {
padding:6px 1px 6px;
font-size:14px;
color: #000000;
line-height:1.5;
}
.tip111 .r li i {
display: inline-block;
width: 10px;
height: 10px;
vertical-align: middle;
border: 1px solid #ffffff;
margin: auto 4px auto 8px;
border-radius: 50%;
}
.tip111 .r li i.xt {
background: #ff3178;
}
.tip111 .r li i.cz {
background: #316aff;
}
.tip111 .r li i.css {
background: #ff8931;
}
.tip111 .r li i.ss {
background: #ff5600;
}
.tip111 .r li span:nth-child(2) {
display: inline-block;
width:40px;
}
.tip111 .r li .num {
font-weight: bold;
}
</style>
<div class="tip111">
<p class="name">${params.name}</p>
<div class="b">
<div class="l">
<p class="p1">项目总数</p>
<p class="p2">${params.itemTotal}</p>
</div>
<ul class="r">
<li>
<i class="xt"></i>
<span>胸痛</span>
<span class="num">${params.chestTotal}</span>
</li>
<li>
<i class="cz"></i>
<span>卒中</span>
<span class="num">${params.strokeTotal}</span>
</li>
<li>
<i class="css"></i>
<span>创伤</span>
<span class="num">${params.traumaTotal}</span>
</li>
<li>
<i class="ss"></i>
<span>烧伤</span>
<span class="num">${params.burnTotal}</span>
</li>
</ul>
</div>
</div>`;
return htmlStr;
}
},
series: [
{
name: '武汉市地图',
type: 'map',
selectedMode: 'single',
mapType: 'wuhan', // 自定义扩展图表类型
// label: {
// show: true
// },
zoom:1.2,
emphasis: {
label: {
show: false
},
itemStyle: {
areaColor: '#00FFFC',
backgroundColor: '#00FFFC',
},
},
select: {
label: {
show: false
},
itemStyle: {
areaColor: '#F1B770',
backgroundColor: '#00FFFC',
},
},
itemStyle: {
borderWidth: 2,
borderColor: '#000D4A'
},
top:50,
bottom:50,
data: list
}
]
};
myChart.setOption(option);
},
drawPie(refName,data){
var that=this;
var myChart=that.getCtx(refName);
var opts={
legend: {
orient: 'vertical',
x: '15',
y: 'center',
// 设置图例形状
itemWidth:12, // 设置宽度
itemHeight:12, // 设置高度
itemGap:25,
textStyle:{
color:"#000",
fontSize: 14,
paddingLeft:5,
},
},
series: [
{
type: 'pie',
radius: ['38%', '53%'],
center: ["50%", "50%"],
avoidLabelOverlap: false,
hoverAnimation: true,
label:{
formatter:function(params){
return `${params.name}中心：${params.percent}% {txt2|${params.value}}`
},
rich:{
txt2:{
fontWeight:'bold'
}
},
textStyle:{
color:'rgba(68, 68, 68, 0.8)'
}
},
color:['#3683B8', '#4294EA','#8DCA86', '#E8AC63'],
emphasis: { /*强调样式*/
label: {
show: true
}
},
labelLine: {
show: true
},
data:data,
}
]
};
myChart.setOption(opts);
},
drawBar(){
var that=this;
var Oc={datakey:'BarData',dom:'BarEl',scBox:'BarScBox',scline:'BarScLine',vlen:'persw'};
var drData=that[(Oc.datakey)];
var Namelis=drData.Namelis;
if(Namelis.length=='0'){ return; }
var Arr=drData.Arr;
var Wh=(that.$refs[(Oc.scBox)]).offsetWidth;
var ViLen=Math.ceil((Wh-150)/200);
var Rlen=(ViLen>=Namelis.length)?(Namelis.length):ViLen;
// Rlen=(Rlen>=6)?6:Rlen;
//console.log('当前屏幕尺寸下页面显示柱状图个数：'+Rlen);
(that.$refs[(Oc.scline)]).style.width=(Namelis.length*100/Rlen)+"%";
(that.ViewLen)[(Oc.vlen)]=Rlen;
var Nkli=Namelis.slice(0,Rlen);
var Dar=Arr.map(function(C){ return C.slice(0,Rlen);});
that.drawBarEchart(Oc.dom,Nkli,Dar);
},
SCOllBoxFn(datakey,dom,scrollBox,scrollLine,vlen){
// data,dom,scrollBox,scrollLine /*分别对应，数据，渲染dom元素，滚动盒子，滚动条*/
var that=this;
var sclLeft=(that.$refs[scrollBox]).scrollLeft;
var drData=that[datakey];
var Namelis=drData.Namelis;
var ViewLen=(that.ViewLen)[vlen];
var Arr=drData.Arr;
var MaxSts=Namelis.length-ViewLen;
var Wh=(that.$refs[scrollBox]).offsetWidth;
var Cwh=(that.$refs[scrollLine]).offsetWidth;
var CBrw=(Cwh-Wh)/(MaxSts);
var I=Math.floor(sclLeft/CBrw);
var NeLis=Namelis.slice(I,I+ViewLen);
var ArLs=Arr.map(function(G){return G.slice(I,I+ViewLen);});
// //console.log(NeLis,ArLs);
that.drawBarEchart(dom,NeLis,ArLs);
},
drawBarEchart(dom,NameLis,arr){
var that=this;
let myChart = that.getCtx(dom)
var option ={
grid:{
left:50, // 默认10%，给24就挺合适的。
top:60, // 默认60
right:50, // 默认10%
bottom:35, // 默认60
},
legend: {
// orient: 'vertical',
right: '55',
top: '2',
// 设置图例形状
itemWidth:12, // 设置宽度
itemHeight:12, // 设置高度
textStyle:{
color:"#000",
fontSize: 14,
},
},
xAxis: {
type: 'category',
axisTick: { show:false },/*影藏坐标轴刻度*/
// data: ['张三丰', '刘天宇', '王自大', '孙乾坤', '李自傲', '周天启', '冯天成','任天雨']
data:NameLis
},
yAxis: {
type: 'value',
minInterval:1,
axisTick: { show:false }
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
show: false
},
backgroundColor:'#FFF',
boxShadow:'0 2px 12px 0 rgba(0,0,0,0.1)',
textStyle:{
color:'#444'
},
formatter: function(params){
var st='';var sg=0;var reslt;
for(let s=0;s<params.length;s++){
let itm=params[s];
sg+=itm.value;
st+=`<div style='line-height:25px;'>
<div style='float:left;padding-right:15px;'>
<span style='display:inline-block;width:10px;height:10px;margin-right:5px;background-color:${itm.color};'></span>
<span>${itm.seriesName}</span>
</div>
<div style='float:right;color:#000;font-weight:bold;'>${itm.value}</div><br>
</div>`;
}
reslt=`<div style='line-height:30px;'>
<div>${((params[0])["axisValue"])}</div>
</div>`;
reslt+=st;
return `<div style="padding:0 10px 0 10px;">${reslt}</div>`;
}
},
series: [
{
name:"胸痛",
// data: [100, 200, 150, 80, 70, 110, 130,45],
data:arr[0],
// stack:'sum',
type: 'bar',
barGap:0.05,
barWidth:20,
itemStyle:{
normal:{
color:'#3683B8'
}
},
},
{
name:"卒中",
// data: [80, 200, 150, 80, 70, 110, 130,45],
data:arr[1],
// stack:'sum',
type: 'bar',
barGap:0.05,
barWidth:20,
itemStyle:{
normal:{
color:'#4294EA'
}
},
},
{
name:"创伤",
// data: [70, 200, 150, 80, 70, 110, 130,45],
data:arr[2],
// stack:'sum',
type: 'bar',
barGap:0.05,
barWidth:20,
itemStyle:{
normal:{
color:'#8DCA86'
}
},
},
{
name:"烧伤",
// data: [90, 200, 150, 80, 70, 110, 130,45],
data:arr[3],
// stack:'sum',
type: 'bar',
barGap:0.4,
barWidth:20,
itemStyle:{
normal:{
color:'#E8AC63'
}
}
}
]
};
//console.log(option)
myChart.setOption(option);
},
getCtx(refName){ return echarts.init((this.$refs)[refName]); }
}
};
</script>
<style lang="scss" scoped>
.page-overview{
padding: 24px 32px 24px;
background-color:#FFF;
.divHeight{
height:650px;
font-size:0;
.w50{
position: relative;
width: 50%;
height: 100%;
font-size: 14px;
display: inline-block;
vertical-align:middle;
font-size:14px;
}
.type-lis-cont{
display:block;
text-align: center;
.lis{
display:inline-flex;
min-width:calc( 25% - 20px );
margin-right:15px;
&:last-child{
margin-right:0;
}
.icon{
width:55px;
display:block;
padding-top: 6px;
img{
display:block;
width:100%;
}
}
.txt{
padding:1px 10px;
.type-desc{
padding:4px;
}
.num-desc{
padding: 1px 5px;
span{
font-size:24px;
font-weight:bold;
}
}
}
}
}
.map-cont{
height:550px;
padding:15px 1px 15px;
.overview-map {
position: relative;
display:block;
height:calc( 100% - 30px);
}
}
.div-charts{
height:50%;
.charts-title{
font-size:20px;
padding:0 15px 15px;
color:rgba(0,0,0,0.87);
font-weight:bold;
span{
font-size:16px;
color:#3CBF2D;
.bold{
font-weight:bold;
}
}
}
.charts-cont{
height: calc( 100% - 45px);
}
}
}
.bar-cont{
.charts-title{
font-size:20px;
padding:0 15px 15px;
color:rgba(0,0,0,0.87);
font-weight:bold;
span{
font-size:16px;
color:#3CBF2D;
}
}
.bar-Div{
height:500px;
}
.scroll_Box{
width:100%;
overflow-x:auto;
overflow-y:hidden;
}
.scroll_Box>div{
width:100%;
height: 1px;
}
}
}
</style>
\ No newline at end of file
src/page/runStatis/index.vue 0 → 100644
View file @ 96eab0e6
<template>
<div class="main-page">
<div class="tab-btn">
<el-button :class="{active:activeTab=='1'}" @click="changeTab(`1`)">胸痛中心</el-button>
<el-button :class="{active:activeTab=='2'}" @click="changeTab(`2`)">卒中中心</el-button>
</div>
<div class="page-runStatis">
<el-form :inline="true" :model="searchForm" ref="searchForm" size="small">
<el-form-item prop="searchDate" label="查询日期">
<el-date-picker v-model="searchForm.searchDate" type="year" placeholder="请选择日期"></el-date-picker>
</el-form-item>
<el-form-item prop="hospitalCode" label="选择医院">
<el-select v-model="searchForm.hospitalCode" placeholder="请输入医院名称" filterable remote reserve-keyword :remote-method="debounceFn(getHospitalLis,200)" :loading="loading">
<el-option v-for="item in hospitalList" :key="item.code" :label="item.Name" :value="item.code"></el-option>
</el-select>
</el-form-item>
<div class="btns">
<el-button type="primary" size="small" @click="searchFormSub">查询</el-button>
<el-button size="small" @click="resetForm('searchForm')">重置</el-button>
</div>
</el-form>
<div class="panel-Box padding_bottom45">
<div class="charts-box">
<div class="charts" ref="lineBar"></div>
</div>
</div>
<div class="panel-Box">
<div class="charts-box">
<div class="charts" ref="vhBar"></div>
<div class="scroll_box" ref="BarScBox" @scroll="SCOllBoxFn(`BarData`,`vhBar`,`BarScBox`,`BarScLine`,`persw`)">
<div class="scroll_line" ref="BarScLine"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import {businessOperationStatistics,queryHospitalList} from '@/api/hospital.js';
export default{
name:"runStatis",
data(){
let searchDate=`${(new Date()).getFullYear()}`;
return{
activeTab:'1',
loading:false,
searchForm: {
searchDate:searchDate,
hospitalCode: ''
},
hospitalList:[],
lineBar:{
nameLis:[],
Arr:[]
},
BarData:{
Namelis:[
// "a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15","a16","a17","a18","a19","a20","a21","a22","a23","a24","a25","a26","a27","a28","a29","a30","a31","a32","a33","a34","a35","a36","a37","a38","a39","a40","a41","a42","a43","a44","a45","a46","a47","a48","a49","a50","a51","a52","a53","a54","a55","a56","a57","a58","a59","a60","a61","a62","a63","a64","a65","a66","a67","a68","a69","a70","a71","a72","a73","a74","a75","a76","a77","a78","a79","a80","a81","a82","a83","a84","a85","a86","a87","a88","a89","a90","a91","a92","a93","a94","a95","a96","a97","a98","a99"
],
Arr:[
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[]
// [50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
// [16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
// [94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97],
// [39,50,46,32,19,24,41,55,1,85,80,14,37,90,37,19,70,29,81,44,34,26,48,9,35,47,41,5,68,88,65,86,7,11,24,89,31,90,13,80,10,67,26,40,53,10,42,51,96,43,72,64,74,85,28,44,65,86,25,27,29,79,65,70,81,98,69,80,31,34,80,50,42,18,57,1,91,36,41,23,83,53,67,40,47,43,36,48,11,51,54,57,25,36,58,89,22,95,97,91]
// ,
// [50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
// [16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
// [94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97],
// [39,50,46,32,19,24,41,55,1,85,80,14,37,90,37,19,70,29,81,44,34,26,48,9,35,47,41,5,68,88,65,86,7,11,24,89,31,90,13,80,10,67,26,40,53,10,42,51,96,43,72,64,74,85,28,44,65,86,25,27,29,79,65,70,81,98,69,80,31,34,80,50,42,18,57,1,91,36,41,23,83,53,67,40,47,43,36,48,11,51,54,57,25,36,58,89,22,95,97,91]
// ,
// [50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
// [16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
// [94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97]
]
},
ViewLen:{
},
ISmounted:false,
ISDataComplate:false,
}
},
created(){
var that=this;
that.getServeData();
that.getHospitalLis();
},
mounted(){
this.$nextTick(()=>{
this.ISmounted=true;
if(this.ISDataComplate){
that.drawLineBar(this.lineBar.nameLis,this.lineBar.Arr);
that.drawBar();
}else{
console.log("dom挂载完成,但数据没准备好");
}
});
},
methods:{
gv(value,dValue){ return (value)?value:dValue },
debounceFn(fn,delay){
let timer = null
return function(args) {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn(args),delay)
}
},
getHospitalLis(str){
var that=this;
if(!str){return ;}
var rstr=str.replace(/(^\s*)|(\s*$)/g,"");
if(!rstr){return ;}
that.loading=true;
queryHospitalList({},str).then((res)=>{
if(res.msg==201){
that.hospitalList=Object.freeze((Array.isArray(res.respData)?(res.respData):[]).map(function(item){
return Object.freeze({ code:item.hospitalCode, Name:item.hospitalName });
}))
}else{
that.$message.error(res.content)
}
that.loading=false;
})
},
changeTab(num){
this.activeTab=num;
this.$refs.BarScBox.scrollLeft=0;
this.searchFormSub();
},
getServeData(){
var that=this;
var params={type:that.activeTab,year:that.searchForm.searchDate,hospitalCode:that.searchForm.hospitalCode}
businessOperationStatistics(params).then(res=>{
if(res.msg==201){
that.fillServeData(res.respData);
}else{ that.$message.error(res.content); };
})
},
fillServeData(respData){
var that=this;
var result=that.gv(respData.hospitalVoList,[]).reduce(function(prv,cur,index,arr){
prv.nameLis.push(cue.hospitalName);
prv.dataLis.push(cue.systemCount);
return prv;
},{nameLis:[],dataLis:[]});
that.lineBar.nameLis=Object.freeze(result.nameLis);
that.lineBar.Arr=Object.freeze(result.dataLis);
if(that.ISmounted){
that.drawLineBar(result.nameLis,result.dataLis);
}else{
console.log("数据准备好了,但dom没挂在完成")
}
var VoLis=(that.activeTab==1)?(that.gv(respData.chestVoList,[])):(that.gv(respData.strokeVoList,[]))
var kys=(that.activeTab==1)?([`thrombolysisCount`,`operationCount`,`conservativeCount`,`monthTotal`]):([`diagnoseCount`,`sTEMICount`,`nSTEMICount`,`uACount`,`aorticCount`,`pulmonaryCount`,`unAcsCount`,`otherAcsCount`,`giveUpCount`,`otherCount`,`monthTotal`])
var oAr=kys.map(function(){return [];});
var result=VoLis.reduce(function(prv,cur,index,arr){
prv.NameLis.push(cur.month);
kys.forEach(function(ky,j){
(prv.arr)[j].push(cur[ky]);
})
return prv;
},{NameLis:[],arr:oAr})
that.BarData.Namelis=Object.freeze(result.NameLis);
that.BarData.Arr=Object.freeze(result.arr.map(Object.freeze))
if(that.ISmounted){
that.drawBar();
}
that.ISDataComplate=true;
},
searchFormSub(){
this.$refs.BarScBox.scrollLeft=0;
this.getServeData();
},
resetForm(formName){ this.$refs[formName].resetFields(); },
drawLineBar(NameLis,dataLis){
var that=this;
var charts=that.getCtx(`lineBar`);
var title=that.activeTab==1?'胸痛中心上报病历数':'卒中中心上报病历数';
var opts={
title:{
left:0,
top:8,
text:title,
textStyle:{
fontSize:'20px',
fontWeight:'bold'
}
},
grid:{
left:150,
top:64,
right:50,
bottom:20,
},
xAxis: {
max: 'dataMax'
},
yAxis: {
type: 'category',
// data: ['武汉市第一人民医院', '武汉市第二人民医院', '武汉市第三人民医院', '武汉市第四人民医院', '武汉市第五人民医院','武汉市第六人民医院','G','H','I','J'],
data:NameLis,
inverse: true,
axisTick:{
show:false
},
animationDuration: 300,
animationDurationUpdate: 300,
max:9 // only the largest 3 bars will be displayed
},
series: [
{
realtimeSort: true,
name: 'X',
type: 'bar',
barWidth:20,
// data: [100,200,190,210,250,500,100,200,190,210],
data:dataLis,
label: {
show:true,
position: 'right',
valueAnimation: true
}
}
],
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: 'linear',
animationEasingUpdate: 'linear'
};
charts.setOption(opts);
},
drawBar(){
var that=this;
var Oc={datakey:'BarData',dom:'vhBar',scBox:'BarScBox',scline:'BarScLine',vlen:'persw'};
var drData=that[(Oc.datakey)];
var Namelis=drData.Namelis;
if(Namelis.length=='0'){ return; }
var Arr=drData.Arr;
var Wh=(that.$refs[(Oc.scBox)]).offsetWidth;
var barW=(that.activeTab==1)?300:120;
var ViLen=Math.ceil((Wh-150)/barW);
var Rlen=(ViLen>=Namelis.length)?(Namelis.length):ViLen;
// Rlen=(Rlen>=6)?6:Rlen;
//console.log('当前屏幕尺寸下页面显示柱状图个数：'+Rlen);
(that.$refs[(Oc.scline)]).style.width=(Namelis.length*100/Rlen)+"%";
(that.ViewLen)[(Oc.vlen)]=Rlen;
var Nkli=Namelis.slice(0,Rlen);
var Dar=Arr.map(function(C){ return C.slice(0,Rlen);});
that.drawBarEchart(Oc.dom,Nkli,Dar,true);
},
SCOllBoxFn(datakey,dom,scrollBox,scrollLine,vlen){
// data,dom,scrollBox,scrollLine /*分别对应，数据，渲染dom元素，滚动盒子，滚动条*/
var that=this;
var sclLeft=(that.$refs[scrollBox]).scrollLeft;
var drData=that[datakey];
var Namelis=drData.Namelis;
var ViewLen=(that.ViewLen)[vlen];
var Arr=drData.Arr;
var MaxSts=Namelis.length-ViewLen;
var Wh=(that.$refs[scrollBox]).offsetWidth;
var Cwh=(that.$refs[scrollLine]).offsetWidth;
var CBrw=(Cwh-Wh)/(MaxSts);
var I=Math.floor(sclLeft/CBrw);
var NeLis=Namelis.slice(I,I+ViewLen);
var ArLs=Arr.map(function(G){return G.slice(I,I+ViewLen);});
// //console.log(NeLis,ArLs);
that.drawBarEchart(dom,NeLis,ArLs);
},
getTipFtter(){
if(this.activeTab==1){
return function(params){
var series=([]).concat(params);series.unshift(series.pop());
var st=``;
for(var s=0,j=6;s<6;s++,j++){
var ltem=series[s];
var rtem=series[j];
st+=`<div class="row">`;
st+=`<div class="c50">
<div class="desc">
<span class="c ${s===0?'total':''}" style="background-color:${ltem.color}"></span>
<span>${ltem.seriesName}</span>
</div>
<div class="v">${ltem.value}</div><br>
</div>`;
if(rtem){
st+=`<div class="c50">
<div class="desc">
<span class="c" style="background-color:${rtem.color}"></span>
<span>${rtem.seriesName}</span>
</div>
<div class="v">${rtem.value}</div><br>
</div>`
}
st+=`</div>`;
}
var resStr=`<style type="text/css">
.box1648092821403{
padding:1px 1px 1px 10px;
min-width: 330px;
max-width: 400px;
}
.box1648092821403 .title{
padding:8px 1px;
}
.box1648092821403 .row{
display:block;
padding:1px 1px;
}
.box1648092821403 .row::after {
content: '';
display: block;
width: 100%;
overflow:hidden;
}
.box1648092821403 .row .c50{
line-height:32px;
}
.box1648092821403 .row .c50:first-child{
padding-right:10px;
float:left;
}
.box1648092821403 .row .c50:last-child{
padding-left:10px;
float:right;
}
.box1648092821403 .row .c50 .desc{
float:left;
padding-right:15px;
}
.box1648092821403 .row .c50 .desc .c{
display:inline-block;width:10px;height:10px;margin-right:5px;
}
.box1648092821403 .row .c50 .desc .c.total{
width:10px;
height: 2px;
vertical-align: middle;
}
.box1648092821403 .row .c50 .v{
float:right;
color:#000;
font-weight:bold;
min-width: 45px;
}
.box1648092821403 .row .c50:first-child .desc{
min-width:95px;
}
.box1648092821403 .row .c50:last-child .desc{
min-width: 155px;
}
.box1648092821403 .row:last-child .c50{
padding-left: 0;
float: left;
}
.box1648092821403 .row:last-child .c50 .desc{
min-width:95px;
}
</style>
<div class="box1648092821403">
<div class="title">${((params[0])["axisValue"])}</div>
${st}
</div>`;
return resStr;
}
}else{
return function(params){
var st='';var sg=0;var reslt;
for(let s=0;s<params.length;s++){
let itm=params[s];
sg+=itm.value;
st+=`<div style='line-height:25px;'>
<div style='float:left;padding-right:15px;'>
<span style='display:inline-block;width:10px;height:10px;margin-right:5px;background-color:${itm.color};'></span>
<span>${itm.seriesName}</span>
</div>
<div style='float:right;color:#000;font-weight:bold;'>${itm.value}</div><br>
</div>`;
}
reslt=`<div style='line-height:30px;'>
<div>${((params[0])["axisValue"])}</div>
</div>`;
reslt+=st;
return `<div style="padding:0 10px 0 10px;">${reslt}</div>`;
}
}
},
getOpts(NameLis,arr){
var that=this;
var title=that.activeTab==1?'胸痛病患数量趋势统计':'卒中病患数量趋势统计';
var colors=(that.activeTab==1)?([`#EA8E97`,`#E8AC63`,`#8AD7AF`,`#48959A`,`#8DCA86`,`#7094F2`,`#80B2F1`,`#4294EA`,`#4371BE`,`#3683B8`,`#1F71FF`]):([`#E8AC63`,`#8DCA86`,`#4294EA`,`#1F71FF`]);
var itemLis=(that.activeTab==1)?([`诊断中`,`STEMI`,`NSTEMI`,`UA`,`主动脉夹层`,`肺动脉栓塞`,`非ACS心源性胸痛`,`其他心源性胸痛`,`放弃治疗,病因未明`,`其他`,`总量`]):([`溶栓`,`手术`,`保守治疗`,`总量`]);
var result=itemLis.reduce(function(prv,cur,index,orgarr){
var citem={name:cur,data:arr[index]};
let flag=index===(orgarr.length-1);
if(flag){
prv.leg2.push(cur);
citem.type="line";
citem.showSymbol=true;
citem.symbolSize=6;
}else{
prv.leg1.push(cur);
citem.type="bar";
citem.barGap=0.1;
citem.barWidth=20;
}
prv.series.push(citem);
return prv;
},{leg1:[],leg2:[],series:[]});
// console.log(result);
return{
grid:{
left:40, // 默认10%，给24就挺合适的。
top:60, // 默认60
right:50, // 默认10%
bottom:35, // 默认60
},
title:{
text:title,
textStyle:{
fontSize:'20px',
fontWeight:'bold'
}
},
legend:[
{
top:40,
right:100,
itemWidth:12, // 设置宽度
itemHeight:12, // 设置高度
itemGap:25,
textStyle:{
color:"#000",
fontSize: 14,
paddingLeft:5,
},
data:result.leg1
},{
top:40,
right:20,
data:result.leg2
}
],
xAxis: {
type: 'category',
axisTick: { show:false },/*影藏坐标轴刻度*/
// data: ['张三丰', '刘天宇', '王自大', '孙乾坤', '李自傲', '周天启', '冯天成','任天雨']
data:NameLis
},
yAxis: {
type: 'value',
minInterval:1,
axisTick: { show:false }
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
show: false
},
backgroundColor:'#FFF',
boxShadow:'0 2px 12px 0 rgba(0,0,0,0.1)',
textStyle:{
color:'#444'
},
formatter:that.getTipFtter()
},
color:colors,
series:result.series
};
},
drawBarEchart(dom,NameLis,arr,isClear){
var that=this;
var charts=that.getCtx(dom);
if(isClear){ charts.clear(); }
charts.setOption(that.getOpts(NameLis,arr));
},
getCtx(refName){ return echarts.init((this.$refs)[refName]); }
}
}
</script>
<style lang="scss">
.main-page{
.tab-btn{
font-size:0;
button.el-button{
position: relative;
font-size:14px;
border-radius:0;
margin-left:0;
margin-right:0;
&.active{
border-color:#FFF;
color:#3B88D9;
&:before{
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color:#3B88D9;
margin-right: 8px;
border-radius:50%;
}
}
}
}
.page-runStatis{
padding: 24px 32px 24px;
background-color:#FFF;
.el-form{
.el-form-item{
margin-right:50px;
.el-input{
width:200px;
}
}
.btns{
float:right;
}
}
.panel-Box{
padding-top:20px;
padding-bottom: 10px;
.title{
font-size:20px;
font-weight:bold;
color:rgba(0, 0, 0, 0.87);
}
.charts-box{
.charts{
height:358px;
}
.scroll_box{
width:100%;
overflow-x:auto;
overflow-y:hidden;
.scroll_line{
height:1px;;
}
}
}
}
.padding_bottom45{
padding-bottom:45px;
}
}
}
</style>
src/store/actions.js
View file @ 96eab0e6
...@@ -43,7 +43,77 @@ export const LoginByToken = function({ ...@@ -43,7 +43,77 @@ export const LoginByToken = function({
}, },
token, token,
userDto userDto
} = res.respData } = res.respData;
// debugger;
// console.log(parentMenuList[4].secondMenuList[0]);
// parentMenuList[4].secondMenuList.splice(1,0,
// {
// isAvailable: null,
// isCheck: 1,
// isDelete: 0,
// keyName: "overview",
// menuId: 13,
// menuName: "建设概览",
// menuType: 2,
// parentMenuId: 18,
// roleId: 1,
// secondMenuList: null,
// sortId: 2,
// url: "/business/overview"
// },
// {
// isAvailable: null,
// isCheck: 1,
// isDelete: 0,
// keyName: "collStatis",
// menuId: 19,
// menuName: "业务协同统计",
// menuType: 2,
// parentMenuId: 18,
// roleId: 1,
// secondMenuList: null,
// sortId: 3,
// url: "/business/collStatis"
// },
// {
// isAvailable: null,
// isCheck: 1,
// isDelete: 0,
// keyName: "runStatis",
// menuId: 24,
// menuName: "业务运行统计",
// menuType: 2,
// parentMenuId: 18,
// roleId: 1,
// secondMenuList: null,
// sortId: 4,
// url: "/business/runStatis"
// }
// )
// debugger;
/*
parentMenuList[4].secondMenuList.splice(1,0,{
isAvailable: null,
isCheck: 1,
isDelete: 0,
keyName: "InHosFirstAid",
menuId:19,
menuName: "院内急救信息",
menuType: 2,
parentMenuId: 18,
roleId: 1,
secondMenuList: null,
sortId: 2,
url: "/business/inhosfirstaid"
})
parentMenuList.forEach(function(item,index){
console.log(index+" menuId:"+item.menuId+" menuType:"+item.menuType+" parentMenuId:"+item.parentMenuId+" sortId:"+item.sortId);
(Array.isArray(item.secondMenuList)?(item.secondMenuList):[]).forEach(function(lik,i){
console.log(" "+index+'-'+i+"menuId:"+lik.menuId+" menuType:"+lik.menuType+" parentMenuId:"+lik.parentMenuId+" sortId:"+lik.sortId)
})
})
*/
if (res.msg === 201 && parentMenuList && parentMenuList.length > 0) { if (res.msg === 201 && parentMenuList && parentMenuList.length > 0) {
await commit(types.SET_MENUMAP, Cache.setMenuMap(parentMenuList)) await commit(types.SET_MENUMAP, Cache.setMenuMap(parentMenuList))
await commit(types.SET_USERINFO, Cache.setUserInfo(userDto)) await commit(types.SET_USERINFO, Cache.setUserInfo(userDto))
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment