|
|
@@ -8,18 +8,40 @@ const echarts = require('echarts');
|
|
|
const {post,setCookie,delCookie} = require('../js/utils.js');
|
|
|
|
|
|
$(function(){
|
|
|
- var mySwiper = new Swiper('.swiper-container',{
|
|
|
- // autoplay : 500,//可选选项，自动滑动
|
|
|
- loop : true,//可选选项，开启循环
|
|
|
- slidesPerView : 3,
|
|
|
- })
|
|
|
- initConsole()
|
|
|
- barChart()
|
|
|
- barChartPay()
|
|
|
- emptyCircle()
|
|
|
+// var mySwiper = new Swiper('.swiper-container',{
|
|
|
+// // autoplay : 500,//可选选项，自动滑动
|
|
|
+// loop : true,//可选选项，开启循环
|
|
|
+// slidesPerView : 3,
|
|
|
+// })
|
|
|
+ initConsole()//质控列表
|
|
|
+ getBarData()//图标数据获取
|
|
|
+ dateChange()
|
|
|
})
|
|
|
+//所有数据切换日期筛选
|
|
|
+function dateChange(){
|
|
|
+ $(".monthYear .mon").click(function(){
|
|
|
+ $(this).css({
|
|
|
+ backgroundColor:'#5A8EEE',
|
|
|
+ color:'#fff'
|
|
|
+ }).siblings().css({
|
|
|
+ color:'#5A8EEE',
|
|
|
+ backgroundColor:'#fff'
|
|
|
+ })
|
|
|
+ getBarData(1)
|
|
|
+ })
|
|
|
+ $(".monthYear .year").click(function(){
|
|
|
+ $(this).css({
|
|
|
+ backgroundColor:'#5A8EEE',
|
|
|
+ color:'#fff'
|
|
|
+ }).siblings().css({
|
|
|
+ color:'#5A8EEE',
|
|
|
+ backgroundColor:'#fff'
|
|
|
+ })
|
|
|
+ getBarData(2)
|
|
|
+ })
|
|
|
+}
|
|
|
//控制台数
|
|
|
-function initConsole(){
|
|
|
+function initConsole(result){
|
|
|
let url = {
|
|
|
'本月病历数':require("../images/icon6.png"),
|
|
|
'本月不合格病历-机器':require("../images/icon7.png"),
|
|
|
@@ -27,45 +49,84 @@ function initConsole(){
|
|
|
'本月甲级病历-机器':require("../images/icon8.png"),
|
|
|
'本月乙级病历-机器':require("../images/icon9.png")
|
|
|
}
|
|
|
+ let dom = ''
|
|
|
+ for(let i in result){
|
|
|
+ if(i.indexOf("人工")==-1){
|
|
|
+ dom += `
|
|
|
+ <li class="partLi">
|
|
|
+ <div class="partIn">
|
|
|
+ <p class="top">${i.split("-")[0]}</p>
|
|
|
+ <p class="btm clearfix">
|
|
|
+ <img src="${url[i]}" alt="">
|
|
|
+ <span>${result[i]}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $(".partAll").html(dom)
|
|
|
+}
|
|
|
+//获取图表数据
|
|
|
+function getBarData(type){
|
|
|
post('/console/mrStatistics',{
|
|
|
- // "endDate": "string",
|
|
|
- // "hospitalId": "string",
|
|
|
- // "limitCount": 0,
|
|
|
- // "startDate": "string",
|
|
|
- "type": 1//1月2年
|
|
|
+ "type": type||1//1月2年
|
|
|
+ }).then((res)=>{
|
|
|
+ let data = res.data;
|
|
|
+ if(data.code == 0){
|
|
|
+ let result = data.data
|
|
|
+ initConsole(result)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ post('/console/averageStatistics',{//柱状数据
|
|
|
+ type:type||1
|
|
|
+ }).then((res)=>{
|
|
|
+ let data = res.data;
|
|
|
+ if(data.code == 0){
|
|
|
+ let result1 = data.data['平均住院费用']
|
|
|
+ let result2 = data.data['平均住院日']
|
|
|
+ let dataX1=[],dataY1=[],dataX2=[],dataY2=[];
|
|
|
+ for(let i = 0;i < result1.length;i++){
|
|
|
+ dataX1.push(result1[i].deptName)
|
|
|
+ dataY1.push(result1[i].averageValue)
|
|
|
+ }
|
|
|
+ for(let i = 0;i < result2.length;i++){
|
|
|
+ dataX2.push(result2[i].deptName)
|
|
|
+ dataY2.push(result2[i].averageValue)
|
|
|
+ }
|
|
|
+ barChartPay(dataX1,dataY1)
|
|
|
+ barChart(dataX2,dataY2)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ post('/console/resultStatistics',{//饼图数据
|
|
|
+ type:type||1
|
|
|
}).then((res)=>{
|
|
|
let data = res.data;
|
|
|
if(data.code == 0){
|
|
|
- let result = data.data
|
|
|
- for(let i in result){
|
|
|
- let dom = ''
|
|
|
- if(i.indexOf("人工")==-1){
|
|
|
- dom = `
|
|
|
- <li class="partLi">
|
|
|
- <div class="partIn">
|
|
|
- <p class="top">${i.split("-")[0]}</p>
|
|
|
- <p class="btm clearfix">
|
|
|
- <img src="${url[i]}" alt="">
|
|
|
- <span>${result[i]}</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- `
|
|
|
+ let result1 = data.data['缺陷排行列表']
|
|
|
+ let result2 = data.data['各科室缺陷占比']
|
|
|
+ for(let i = 0;i < result2.length;i++){
|
|
|
+ result2[i].value = result2[i].num
|
|
|
}
|
|
|
- $(".partAll").append(dom)
|
|
|
- }
|
|
|
+ queList(result1)
|
|
|
+ emptyCircle(result2)
|
|
|
+ panDetail(result2)
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
}
|
|
|
-//柱状图
|
|
|
-function barChart(){
|
|
|
- var myChart = echarts.init(document.getElementById('barChart'));
|
|
|
+//柱状图住院费用
|
|
|
+function barChartPay(dataX,dataY){
|
|
|
+ var myCharts = echarts.init(document.getElementById('barChartPay'));
|
|
|
+ $(window).resize(function(){
|
|
|
+ myCharts.resize()
|
|
|
+ });
|
|
|
option = {
|
|
|
color: ['#3398DB'],
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ type: 'line' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
@@ -77,18 +138,18 @@ function barChart(){
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ data: dataX,
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
axisLabel: {//x轴刻度
|
|
|
textStyle: {
|
|
|
- color: 'blue'
|
|
|
+ color: '#333'
|
|
|
}
|
|
|
},
|
|
|
axisLine: {//x轴
|
|
|
lineStyle:{
|
|
|
- color:'red'
|
|
|
+ color:'#AAAAAA'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -104,21 +165,21 @@ function barChart(){
|
|
|
},
|
|
|
axisLabel: {//y轴刻度
|
|
|
textStyle: {
|
|
|
- color: 'red'
|
|
|
+ color: '#333333'
|
|
|
}
|
|
|
},
|
|
|
splitLine:{//分割线
|
|
|
lineStyle:{
|
|
|
- color:'red'
|
|
|
+ color:'#EFF3FC'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
],
|
|
|
title:[{
|
|
|
- text: '医院运行指标',
|
|
|
- top: 20,
|
|
|
- left: 20,
|
|
|
+ text: '平均住院费用',
|
|
|
+ top: 15,
|
|
|
+ left: 10,
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
color:'#666666',
|
|
|
@@ -127,25 +188,27 @@ function barChart(){
|
|
|
}],
|
|
|
series: [
|
|
|
{
|
|
|
- name: '直接访问',
|
|
|
+ name: '平均住院费用',
|
|
|
type: 'bar',
|
|
|
- barWidth: '30%',
|
|
|
- data: [10, 52, 200, 334, 390, 330, 220]
|
|
|
+ barWidth: '6%',
|
|
|
+ data: dataY
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
- myChart.setOption(option);
|
|
|
-
|
|
|
+ myCharts.setOption(option);
|
|
|
}
|
|
|
-//柱状图
|
|
|
-function barChartPay(){
|
|
|
- var myChart = echarts.init(document.getElementById('barChartPay'));
|
|
|
+//柱状图住院日期
|
|
|
+function barChart(dataX,dataY){
|
|
|
+ var myChart = echarts.init(document.getElementById('barChart'));
|
|
|
+ $(window).resize(function(){
|
|
|
+ myChart.resize()
|
|
|
+ });
|
|
|
option = {
|
|
|
color: ['#3398DB'],
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ type: 'line' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
@@ -157,18 +220,18 @@ function barChartPay(){
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ data: dataX,
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
axisLabel: {//x轴刻度
|
|
|
textStyle: {
|
|
|
- color: 'blue'
|
|
|
+ color: '#333'
|
|
|
}
|
|
|
},
|
|
|
axisLine: {//x轴
|
|
|
lineStyle:{
|
|
|
- color:'red'
|
|
|
+ color:'#AAAAAA'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -184,21 +247,21 @@ function barChartPay(){
|
|
|
},
|
|
|
axisLabel: {//y轴刻度
|
|
|
textStyle: {
|
|
|
- color: 'red'
|
|
|
+ color: '#333333'
|
|
|
}
|
|
|
},
|
|
|
splitLine:{//分割线
|
|
|
lineStyle:{
|
|
|
- color:'red'
|
|
|
+ color:'#EFF3FC'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
],
|
|
|
title:[{
|
|
|
- text: '医院运行指标',
|
|
|
- top: 20,
|
|
|
- left: 20,
|
|
|
+ text: '平均住院日',
|
|
|
+ top: 15,
|
|
|
+ left: 10,
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
color:'#666666',
|
|
|
@@ -207,10 +270,10 @@ function barChartPay(){
|
|
|
}],
|
|
|
series: [
|
|
|
{
|
|
|
- name: '直接访问',
|
|
|
+ name: '平均住院日',
|
|
|
type: 'bar',
|
|
|
- barWidth: '30%',
|
|
|
- data: [10, 52, 200, 334, 390, 330, 220]
|
|
|
+ barWidth: '6%',
|
|
|
+ data: dataY
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -218,70 +281,129 @@ function barChartPay(){
|
|
|
|
|
|
}
|
|
|
//空心饼图
|
|
|
-function emptyCircle(){
|
|
|
+function emptyCircle(data){
|
|
|
+ if(!data||data.length == 0)return
|
|
|
var myChart = echarts.init(document.getElementById('emptyCircle'));
|
|
|
+ let bgColor = '#fff';
|
|
|
+ let title = '总量';
|
|
|
+ let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
|
|
|
+ let echartData = data;
|
|
|
+ let total = 0;
|
|
|
+ for(let i = 0;i < echartData.length;i++){
|
|
|
+ total += echartData[i].num
|
|
|
+ }
|
|
|
option = {
|
|
|
- color:['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'],
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
- },
|
|
|
- // legend: {
|
|
|
- // orient: 'vertical',
|
|
|
- // left: 10,
|
|
|
- // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
|
|
- // },
|
|
|
+ backgroundColor: bgColor,
|
|
|
+ color: color,
|
|
|
title: [{
|
|
|
- text: '总病\n例数',
|
|
|
- subtext:"1000",
|
|
|
+ text: '{val|' + total + '}\n{name|' + title + '}',
|
|
|
top: 'center',
|
|
|
left: 'center',
|
|
|
textStyle: {
|
|
|
-
|
|
|
- },
|
|
|
- subtextStyle:{
|
|
|
- color:'red',
|
|
|
- fontSize:'14px'
|
|
|
+ rich: {
|
|
|
+ val: {
|
|
|
+ fontSize: 24,
|
|
|
+ color: '#333',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ padding: [10, 0]
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: '#777',
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '访问来源',
|
|
|
- type: 'pie',
|
|
|
- radius: ['50%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- borderColor: '#fff',
|
|
|
- borderWidth: 2
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['70%', '90%'],
|
|
|
+ data: echartData,
|
|
|
+ hoverAnimation: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: bgColor,
|
|
|
+ borderWidth: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ length: 20,
|
|
|
+ length2: 120,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e6e6e6'
|
|
|
}
|
|
|
- },
|
|
|
- labelLine:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- emphasis: {//圆盘中心
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- fontSize: '30',
|
|
|
- fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show:false,
|
|
|
+ formatter: params => {
|
|
|
+ return params.name == 'A类'?params.name:''
|
|
|
},
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- data: [
|
|
|
- {value: 335, name: '直接访问'},
|
|
|
- {value: 310, name: '邮件营销'},
|
|
|
- {value: 234, name: '联盟广告'},
|
|
|
- {value: 135, name: '视频广告'},
|
|
|
- {value: 1548, name: '搜索引擎'}
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ padding: [0 , -100, 25, -100],
|
|
|
+ rich: {
|
|
|
+ icon: {
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ fontSize: 14,
|
|
|
+ padding: [0, 10, 0, 4],
|
|
|
+ color: '#666666'
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ fontSize: 18,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: '#333333'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
+//缺陷列表渲染
|
|
|
+function queList(data){
|
|
|
+ let strAll = '',tmp = `
|
|
|
+ <tr class="thead">
|
|
|
+ <td class="td01">排名</td>
|
|
|
+ <td class="td02">缺陷名称</td>
|
|
|
+ <td class="td03">数量</td>
|
|
|
+ <td class="td04">占比</td>
|
|
|
+ </tr>`
|
|
|
+ for(let i = 0;i < data.length;i++){
|
|
|
+ strAll += `
|
|
|
+ <tr>
|
|
|
+ <td style="text-align:center;"><i style="background:${i < 3?'#bea571':'#eff3fc'};color:${i < 3?'#fff':'#999'};">${i+1}</i></td>
|
|
|
+ <td>${data[i].name}</td>
|
|
|
+ <td>${data[i].num}</td>
|
|
|
+ <td>${data[i].percentStr}</td>
|
|
|
+ </tr>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ $(".qtable").html(tmp+strAll)
|
|
|
+}
|
|
|
+//饼图列表注释渲染
|
|
|
+function panDetail(data){
|
|
|
+ let strAll = '';
|
|
|
+ for(let i = 0;i < data.length;i++){
|
|
|
+ strAll += `
|
|
|
+ <tr class="explainLi">
|
|
|
+ <td class="deptName"><i class="tip"></i>${data[i].name}</td>
|
|
|
+ <td class="deptNum">${data[i].num}</td>
|
|
|
+ <td class="percent">(${data[i].percentStr})</td>
|
|
|
+ </tr>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ $(".explainPan table").html(strAll)
|
|
|
+ $(".explainPan").css({
|
|
|
+ marginTop:-($(".explainPan").height()/2-20)+'px'
|
|
|
+ })
|
|
|
+}
|
luolei