<template>
<div class="workPreview" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.7)">
<headers>
<el-button
type="primary"
slot="OutBtn"
id="save"
size="mini"
style="position: absolute;right:8px;height:30px"
@click="download"
>导出</el-button>
</headers>
<div class="content">
<div class="searchStyle">
<span v-if="roleObj.roleNo=='00070301'">科室:</span>
<div
style="display:flex;position: relative;padding-left:4px;width: 18%;max-width: 150px;"
v-if="roleObj.roleNo=='00070301'"
>
<select-index
:testedWardSelectData="testedWardSelectData"
@searchSelectDept="searchSelectDept"
:popoverwidth='"150"'
:showData="showArr"
:selectType="true"
/>
</div>
<span style="minWidth:30px;">日期:</span>
<el-date-picker
style="width: 18%;max-width: 150px;"
v-model="searchParameters.timeStr"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
:clearable='false'
:editable="false"
@change="gettimeStr()"
></el-date-picker>
<span>至</span>
<el-date-picker
style="width: 18%;max-width: 150px;"
v-model="searchParameters.timeEnd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
:clearable='false'
:editable="false"
@change="gettimeEnd()"
></el-date-picker>
</div>
<div class="registers">
<div class="tableStyle">
<div class="contentcont">
<!-- <div id="myChart2" class="myChart2" style="wdith:100%;" v-if="echartArr.length!=0"
:style="{minWidth: '100%',width:myChartWrapW,background:'#fff','border-radius': '8px',}"
></div> -->
<div
style="width:100%;display:flex;justify-content:space-between;margin-top:4px;"
>
<div style="width:100%;overflow-x:scroll" >
<div
id="myChart2"
class="myChart2"
:style="{minWidth: '100%',width:myChartWrapW,background:'#fff','border-radius': '8px',}"
></div>
<div :style="{minWidth: '100%',width:myChartWrapW,'margin-top': '18px',}" v-if="echartArr.length!=0">
<el-table
:data="echartArr"
:row-style="{height:38+'px',color:'#000000'}"
:header-cell-style="{height:38+'px',padding:0+'px',color:'#000000',fontWeight:'500'}"
:cell-style="{padding:0+'px'}"
height= 'calc(100vh - 540px)'
>
<el-table-column prop="levelName" label="层级" align="center" min-width="70"></el-table-column>
<el-table-column v-for="(item,index) in tabledata.levelProportionVoList" :key="index" align="center" :label="item.dateNow">
<el-table-column label="人数" align="center" min-width="50" :prop="'numberSum'+index"></el-table-column>
<el-table-column label="占比" align="center" min-width="50" :prop="'proportion'+index"></el-table-column>
</el-table-column>
</el-table>
</div>
<div v-else style="transform: scale(0.5);position: relative;width: 100%; height: 100%;">
<No-data/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import NoData from "@/views/components/component/noData/index.vue";
import headers from "@/views/handerView/statisticalanalysis/components/headers.vue";
import selectIndex from "@/views/components/component/testedWardSelect/selectIndex.vue";
import {
// getNightShiftNumberDetail,
// statisticAnalysisgetNightShiftNumber,
statisticAnalysisgetShiftComparison,
personalFilesselectDictDeptList,
exportShiftComparison
} from "@/api/handleView/statisticalanalysis";
import {
dictDatadictType
} from "@/api/handleView/dict";
import py from "@/utils/lbdz";
import { output } from "@/utils/lbdz";
import { CanvasDrawImage } from "@/views/handerView/statisticalanalysis/js/index.js";
export default {
name: "trialrecord",
components: {
headers,
NoData,
selectIndex
},
data() {
return {
roleObj:JSON.parse(sessionStorage.getItem('roleObj')),
requestHttpFlag: false,
fullscreenLoading:true,
searchParameters:{
preparerDepartCode:"",
timeStr: "",
timeEnd: "",
},
myChartWrapW:"",
echartArr: [
// { name: "大学本科", value: "1", id: "collegeRegularSum" },
// { name: "大学专科", value: "2", id: "collegeJuniorSum" },
// { name: "研究生", value: "3", id: "postgraduateSum" },
// { name: "中等职业", value: "4", id: "secondaryVocationalSum" },
// { name: "中等专科", value: "5", id: "secondarySpecialtySum" }
],
tabledata:[],
seriesarr:[],
testedWardSelectData: {},
showArr: {},
};
},
created() {
setTimeout(() => {
this.fullscreenLoading = false
}, 1000);
},
mounted() {
this.getTestedWardlistTwo()
// this.getauditRecordList()
this.fun_date()
},
methods: {
fun_date(){
var date1 = new Date()
var month1 = ""
if((date1.getMonth()+1)<10){
month1 = "0"+(date1.getMonth()+1)
}else{
month1 = ""+(date1.getMonth()+1)
}
var time2=date1.getFullYear()+"-"+month1+"-"+date1.getDate();//time1表示当前时间
var date2 = new Date(date1);
date2.setDate(date1.getDate()-6);
var month2 = ""
if((date1.getMonth()+1)<10){
month2 = "0"+(date2.getMonth()+1)
}else{
month2 = ""+(date2.getMonth()+1)
}
var time1 = date2.getFullYear()+"-"+month2+"-"+date2.getDate();
console.log(time1,time2,"===============")
this.searchParameters.timeStr=time1 //
this.searchParameters.timeEnd=time2 //
// return time2;
setTimeout(() => {
this.getauditRecordList();
}, 500);
},
inputHandleChange() {
this.debounce(() => {
this.searchParameters.pageNum = 1;
this.getauditRecordList();
}, 500)();
},
handleChange() {
// this.searchParameters.pageNum = 1;
this.getauditRecordList();
},
gettimeStr(){
var data1 = Date.parse(this.searchParameters.timeStr.replace(/-/g, "/"));
var data2 = Date.parse(this.searchParameters.timeEnd.replace(/-/g, "/"));
var datadiff = data2 - data1;
if(datadiff<0){
this.$message({
message: '开始时间不能大于结束时间!',
type: 'warning'
});
this.searchParameters.timeStr=""
return;
}
var time = 30 * 24 * 60 * 60 * 1000;
if (this.searchParameters.timeStr.length > 0 && this.searchParameters.timeEnd.length > 0) {
if (datadiff > time) {
this.$message({
message: '前后时间间隔不能大于30天',
type: 'warning'
});
this.searchParameters.timeStr=""
}else{
this.handleChange()
}
}
},
gettimeEnd(){
var data1 = Date.parse(this.searchParameters.timeStr.replace(/-/g, "/"));
var data2 = Date.parse(this.searchParameters.timeEnd.replace(/-/g, "/"));
var datadiff = data2 - data1;
if(datadiff<0){
this.$message({
message: '结束时间不能小于开始时间!',
type: 'warning'
});
this.searchParameters.timeEnd=""
return;
}
var time = 30 * 24 * 60 * 60 * 1000;
console.log(this.searchParameters.timeStr.length)
console.log(this.searchParameters.timeEnd.length)
if (this.searchParameters.timeStr.length > 0 && this.searchParameters.timeEnd.length > 0) {
if (datadiff > time) {
this.$message({
message: '前后时间间隔不能大于30天',
type: 'warning'
});
this.searchParameters.timeEnd=""
}else{
this.handleChange()
}
}
},
async download() {
if (this.antiFlag) {
return;
}
this.antiFlag = true;
let dirUrl = await CanvasDrawImage();
console.log(dirUrl,"===================")
let obj = {
url:dirUrl.value
}
exportShiftComparison(obj)
.then(response => {
if (response) {
output(this.$route.query.name, response);
this.$message.success("导出成功");
} else {
this.$message.error("导出失败");
}
this.antiFlag = false;
})
.catch(() => {
this.$message.error("导出失败");
this.antiFlag = false;
});
},
// 查询 二级受检病区下拉框数据 列表
getTestedWardlistTwo() {
// this.testedWardSelectData = [{"id":null,"deptCode":"-1","deptName":"全部","pym":null,"parentCode":null,"parentName":null,"levelCode":null,"deptKey":{"firstLetter":null,"deptList":null,"firstLetterList":["G","H","K","M","N","S","X","Z"],"deptKeyList":[{"firstLetter":"G","deptList":[{"id":"22","deptCode":"352","deptName":"ICU","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"24","deptCode":"0006","deptName":"骨科三","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"18","deptCode":"432","deptName":"骨科二","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"17","deptCode":"32","deptName":"骨科一","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"H","deptList":[{"id":"16","deptCode":"1233","deptName":"呼吸内科","pym":"H","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"K","deptList":[{"id":"19","deptCode":"55","deptName":"康复科","pym":"K","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"M","deptList":[{"id":"8","deptCode":"1101001","deptName":"妇产科二","pym":"M","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"N","deptList":[{"id":"21","deptCode":"123","deptName":"NICU","pym":"N","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"S","deptList":[{"id":"23","deptCode":"5223","deptName":"神经内科一","pym":"S","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"15","deptCode":"1222","deptName":"肾内科","pym":"S","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"X","deptList":[{"id":"25","deptCode":"0007","deptName":"心血管内科一","pym":"X","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"26","deptCode":"0008","deptName":"心血管内科二","pym":"X","parentCode":"100","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"Z","deptList":[{"id":"20","deptCode":"534","deptName":"重症科","pym":"Z","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null}],"type":null}},{"id":"5555","deptCode":"5555","deptName":"内科系","pym":"N","parentCode":"6666","parentName":null,"levelCode":"03","deptKey":{"firstLetter":null,"deptList":null,"firstLetterList":["G","H","K","M","N","S","X","Z"],"deptKeyList":[{"firstLetter":"G","deptList":[{"id":"22","deptCode":"352","deptName":"ICU","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"24","deptCode":"0006","deptName":"骨科三","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"18","deptCode":"432","deptName":"骨科二","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"17","deptCode":"32","deptName":"骨科一","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"H","deptList":[{"id":"16","deptCode":"1233","deptName":"呼吸内科","pym":"H","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"K","deptList":[{"id":"19","deptCode":"55","deptName":"康复科","pym":"K","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"M","deptList":[{"id":"8","deptCode":"1101001","deptName":"妇产科二","pym":"M","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"N","deptList":[{"id":"21","deptCode":"123","deptName":"NICU","pym":"N","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"S","deptList":[{"id":"23","deptCode":"5223","deptName":"神经内科一","pym":"S","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"15","deptCode":"1222","deptName":"肾内科","pym":"S","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"X","deptList":[{"id":"25","deptCode":"0007","deptName":"心血管内科一","pym":"X","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"Z","deptList":[{"id":"20","deptCode":"534","deptName":"重症科","pym":"Z","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null}],"type":null}},{"id":"975103281070080000","deptCode":"100","deptName":"重症科系","pym":"Z","parentCode":"6666","parentName":null,"levelCode":"03","deptKey":{"firstLetter":null,"deptList":null,"firstLetterList":["X"],"deptKeyList":[{"firstLetter":"X","deptList":[{"id":"26","deptCode":"0008","deptName":"心血管内科二","pym":"X","parentCode":"100","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null}],"type":null}}] ;
personalFilesselectDictDeptList().then(response => {
if (response.code == "200") {
// this.testedWardSelectData = response.data.deptList;
// console.log(response, "response===================");
// return;
let deptObj = {};
response.data.deptList.forEach((item, index) => {
if (item.deptCode == "-1") {
deptObj = item.deptKey;
item.deptKey.deptKeyList.forEach((node, next) => {
node.deptList.forEach(three => {
three.pymTwo = py.chineseToPinYin(three.deptName);
});
});
}
});
this.testedWardSelectData = deptObj;
}
});
},
searchSelectDept(params) {
console.log(params,"===========")
this.searchParameters.preparerDepartCode = params.selectDeptCode;
this.getauditRecordList();
},
//人员列表
getauditRecordList() {
// if (this.requestHttpFlag) {
// return;
// }
// this.requestHttpFlag = true;
var params = {
preparerDepartCode: this.searchParameters.preparerDepartCode, //
timeStr: this.searchParameters.timeStr, //
timeEnd: this.searchParameters.timeEnd, //
};
statisticAnalysisgetShiftComparison(params)
.then(response => {
if (response.code == "200") {
this.echartArr=[]
this.tabledata = response.data;
var personarr=[]
this.seriesarr=[]
this.tabledata.levelList.forEach(element => {
var params={
name:element,
type:'bar',
// stack: "总量",
// barWidth : 30,//柱图宽度
// barGap: '-45%',
barWidth: 20,
barGap:1, //柱子之间间距
data:[],
// data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4],
}
this.seriesarr.push(params)
});
// console.log(this.seriesarr,"===========this.seriesarr")
this.tabledata.levelProportionVoList.forEach((element,index) => {
// console.log(element,"===========element===index")
personarr=[]
element.levelProportionDetailVoList.forEach((item,itemindex)=> {
this.seriesarr[itemindex].data.push(item.numberSum)
this.tabledata.levelProportionVoList[0].levelProportionDetailVoList[itemindex]["numberSum" + index] = item.numberSum
this.tabledata.levelProportionVoList[0].levelProportionDetailVoList[itemindex]["proportion" + index] = item.proportion
});
});
// console.log(this.seriesarr,"====================seriesarr")
// console.log(this.tabledata.levelProportionVoList[0].levelProportionDetailVoList,"====================this.tabledata.levelProportionVoList[0].levelProportionDetailVoList")
if(this.tabledata.levelProportionVoList.length>0 && this.tabledata.levelProportionVoList[0].levelProportionDetailVoList){
this.echartArr=this.tabledata.levelProportionVoList[0].levelProportionDetailVoList
}
console.log(this.echartArr,"====================tabledata")
if(this.tabledata.levelProportionVoList.length!=0){
this.myChartWrapW = (this.tabledata.levelProportionVoList.length + 1) * 260 + 'px';
}else{
this.myChartWrapW = '100px'
}
console.log(this.myChartWrapW,"==============this.myChartWrapW")
this.$nextTick(()=>{
var myChart = this.$echarts.init(document.getElementById('myChart2'));
myChart.dispose();
this.distribution2();
})
}
})
.catch(err => {
setTimeout(() => {
// this.requestHttpFlag = false;
}, 500);
});
},
distribution2() {
let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
// let option = {
// tooltip : {
// trigger: 'axis'
// },
// legend: {
// // data:['人数','占比%'],
// bottom: "bottom"
// },
// calculable : true,
// xAxis : [
// {
// type : 'category',
// // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
// data :this.tabledata.dateList
// }
// ],
// yAxis : [
// {
// type : 'value',
// minInterval:1,
// }
// ],
// series :this.seriesarr
// // series : [
// // {
// // name:'人数',
// // type:'bar',
// // data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
// // // data :this.tabledata.countList
// // },
// // {
// // name:'占比%',
// // type:'bar',
// // // data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
// // data :this.tabledata.proportionList
// // }
// // ]
// };
let option = {
// backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
// data: ['引镇入库数', '引镇出库数', '航天入库数','航天出库数'],
align: 'right',
top:'15',
right: 10,
// textStyle: {
// color: "#fff"
// },
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
// bottom: "bottom"
},
grid: {
left: '10',
right: '10',
bottom: '5%',
containLabel: true
},
xAxis: [{
type: 'category',
data:this.tabledata.dateList,
axisLine: {
show: true,
lineStyle: {
// color: "#fff",
width: 1,
type: "solid"
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
// textStyle: {
// color: "#fff",
// }
},
}],
yAxis: [{
type: 'value',
minInterval:1,
axisLabel: {
fontSize:'10',
// formatter: '{value} %'
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
// color: "#fff",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
type:'dashed',
color: "#666666",
}
}
}],
// dataZoom: [ //给x轴设置滚动条
// {
// start: 0, //默认为0
// end: 100 - 1500 / 31, //默认为100
// type: 'slider',
// show: true,
// xAxisIndex: [0],
// handleSize: 10, //滑动条的 左右2个滑动条的大小
// height: 6, //组件高度
// left: 50, //左边的距离
// right: 40, //右边的距离
// bottom: 0, //右边的距离
// handleColor: '#ddd', //h滑动图标的颜色
// // handleStyle: {
// // borderColor: "#cacaca",
// // borderWidth: "1",
// // shadowBlur: 2,
// // background: "#ddd",
// // shadowColor: "#ddd",
// // },
// // fillerColor: '#808080',
// // backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色
// showDataShadow: false, //是否显示数据阴影 默认auto
// showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// // handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
// // filterMode: 'filter',
// },
// //下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 100 - 1500 / 31, //默认为100
// },
// // {
// // start: 0, //默认为0
// // end: 100 - 1500 / 31, //默认为100
// // type: 'slider',
// // show: true,
// // xAxisIndex: [0],
// // handleSize: 10, //滑动条的 左右2个滑动条的大小
// // height: 3, //组件高度
// // left: 50, //左边的距离
// // right: 40, //右边的距离
// // bottom: 0, //右边的距离
// // borderColor: 'rgba(0,0,0,0)',
// // textStyle: {
// // color: '#05D5FF',
// // },
// // showDataShadow: false, //是否显示数据阴影 默认auto
// // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// // },
// ],
series :this.seriesarr
};
myChart2.setOption(option);
},
}
};
</script>
<style scoped lang="scss">
.content{
padding: 4px;
}
.searchStyle {
flex: 1;
padding: 4px;
// margin-top: 4px;
display: flex;
align-items: center;
background: #fff;
span {
font-size: 14px;
margin: 0 5px;
}
::v-deep {
.el-input__inner {
height: 32px;
line-height: 32px;
}
}
}
.registers {
width: 100%;
background: #fff;
font-size: 14px;
border-bottom: none;
box-sizing: border-box;
margin-top: 4px;
height: calc(100vh - 95px);
padding: 4px;
.tableStyle {
width: 100%;
height: 100%;
// border: 1px solid;
.contentcont{
height: calc(100vh - 95px);
}
}
}
.myChart2{
// height: calc(100vh - 390px);
height: 400px;
// border: 1px solid;
}
::v-deep {
/**
改变边框颜色
*/
// .el-table {
// border-bottom: 1px solid #d0d0d0;
// // border-right: 1px solid #d0d0d0;
// margin: 0 auto;
// }
// .el-table th {
// border: 1px solid #d0d0d0 !important;
// border-right: none !important;
// border-bottom: none !important;
// }
// .el-table td {
// border: 1px solid #d0d0d0;
// border-right: none !important;
// border-bottom: none !important;
// }
}
</style>