Skip to content

V
vue-composition-api
Commit ee93039e by wangshuangqing
Options

智能分组

parent 977c82d1
Showing with 850 additions and 875 deletions
src/router/index.js
...@@ -11,6 +11,7 @@ import store from "@/store"; ...@@ -11,6 +11,7 @@ import store from "@/store";
import { getItem, clear } from "@/utils/auth"; import { getItem, clear } from "@/utils/auth";
import outseeQualityControl from "@/views/outseeQualityControl.vue"; import outseeQualityControl from "@/views/outseeQualityControl.vue";
import outpatientDetails from "@/views/outpatientDetails.vue"; import outpatientDetails from "@/views/outpatientDetails.vue";
import outHistorygrouping from "@/views/outHistorygrouping.vue";
import login from "@/views/login.vue"; import login from "@/views/login.vue";
Vue.use(Router); Vue.use(Router);
...@@ -25,16 +26,26 @@ const router = new Router({ ...@@ -25,16 +26,26 @@ const router = new Router({
// name: "login", // name: "login",
// component: login, // component: login,
// }, // },
// 查看质控
{ {
path: "/outseeQualityControl", path: "/outseeQualityControl",
name: "outseeQualityControl", name: "outseeQualityControl",
component: outseeQualityControl, component: outseeQualityControl,
}, },
// 患者详情
{ {
path: "/outpatientDetails", path: "/outpatientDetails",
name: "outpatientDetails", name: "outpatientDetails",
component: outpatientDetails, component: outpatientDetails,
}, },
// 智能分组
{
path: "/outHistorygrouping",
name: "outHistorygrouping",
component: outHistorygrouping,
}
// { // {
// path: "/", // path: "/",
// name: "home", // name: "home",
......
src/utils/echarts.js
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { decimal } from '../utils/decimal.ts';
import { Split } from './split';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { reduce } from 'lodash';
function fontSize(res) {
let docEl = document.documentElement,
clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
/** /**
* @param echarts初始化 * @param echarts初始化
* @param option echarts配置的内容 * @param option echarts配置的内容
* @param panelId echarts内容块Id * @param panelId echarts内容块Id
*/ */
export function initEcharts(option: any, panelId: string) { export function initEcharts(option, panelId) {
let svChart; var svChart;
return nextTick(() => { return nextTick(() => {
svChart = echarts.getInstanceByDom(document.getElementById(panelId)); svChart = echarts.getInstanceByDom(document.getElementById(panelId));
if (svChart == null) { if (svChart == null) {
svChart = echarts.init(document.getElementById(panelId)); svChart = echarts.init(document.getElementById(panelId));
} }
document.getElementById(panelId)?.setAttribute('_echarts_instance_', ''); document.getElementById(panelId).setAttribute('_echarts_instance_', '');
svChart.clear(); svChart.clear();
svChart.setOption(option); svChart.setOption(option);
svChart.resize(); svChart.resize();
...@@ -37,345 +28,15 @@ export function initEcharts(option: any, panelId: string) { ...@@ -37,345 +28,15 @@ export function initEcharts(option: any, panelId: string) {
}); });
} }
//仪表图
export function drawMoveStatistics(num) {
const option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
itemStyle: {
color: '#ff7e00',
},
title: {
show: false,
},
detail: {
show: false,
},
//修改图表位置
center: ['50%', '90%'],
//修改图表大小
radius: '175%',
//外表盘样式
progress: {
show: true,
roundCap: false,
width: 30,
itemStyle: {
color: '#2cabe3',
},
},
//内表盘宽度
axisLine: {
roundCap: false,
lineStyle: {
width: 30,
color: [[1, '#16d0ff']],
},
},
//仪表盘指针
pointer: {
length: '100%',
width: 4, //指针宽度
offsetCenter: ['1%', '-1%'],
},
anchor: {
show: true,
showAbove: true,
size: 9,
itemStyle: {
borderWidth: 9,
borderColor: '#ff7e00',
},
},
//刻度标签
axisTick: {
show: false,
},
//刻度样式
splitLine: {
show: false,
},
//仪表盘轴线
axisLabel: {
show: false,
},
//控制表盘的值
data: [
{
value: num,
},
],
},
],
};
return option;
}
// 病案综合分析柱状图
export function comprebarChart(title: any, tdata: any, tcolor: any) {
const option = {
//提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
//提示框样式(直接在tooltip中写)
textStyle: {
fontSize: 10,
},
},
grid: {
left: '2%',
right: '2%',
bottom: '1%',
top: '10%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: true, //设置x轴两边的留白
data: title,
//刻度尺
axisTick: {
show: false, //刻度尺是否显示
alignWithLabel: true, //与标签对齐
},
//线条相关设置
axisLine: {
show: false,
lineStyle: {
color: 'hotpink',
},
},
//网格线
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
color: '#ededed', //网格线颜色
},
},
//坐标轴刻度标签(刻度值）相关设置
axisLabel: {
show: true, //是否显示刻度值
textStyle: {
//刻度值样式修改
color: '#878787',
fontSize: 12,
},
interval: 0,
rotate: 0, //倾斜的程度
},
},
],
yAxis: [
{
type: 'value',
min: 0,
// min 是最小的值
splitNumber: 5, //刻度间距
//线条相关设置
axisLine: {
show: false,
lineStyle: {
color: '#999',
},
},
//网格线
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
color: '#ededed', //网格线颜色
},
},
axisLabel: {
show: true, //是否显示刻度值
textStyle: {
//刻度值样式修改
color: '#878787',
fontSize: 12,
},
},
},
],
series: [
{
name: '异常数目',
type: 'bar',
barWidth: 80, //柱子宽度
emphasis: {
//强调(获取焦点时单独显示)
focus: 'series',
},
data: tdata,
label: {
show: true,
color: tcolor,
fontSize: 13,
align: 'center',
position: 'top',
},
},
],
};
return option;
}
// 病案综合分析百分比图
export function aginChart(title1, title2, maxdata: any, rdata: any, cdata: any, wp: any, np: any) {
const option = {
tooltip: {
trigger: 'item',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return `
<div style=" color:#0098d9; text-align: start;">${title2} </div>
<div style="text-align: start;">问题总数: ${maxdata} </div>
<div style="text-align: start;">问题数量：${cdata}</div>
<div style="text-align: start; ">占比:${decimal(np)}% </div>
`;
}
},
},
title: [
{
x: 'center',
top: '38%',
textStyle: {
fontSize: '16', //百分比的样式
color: '#fac85b',
fontFamily: 'Arial',
foontWeight: '600',
},
},
],
polar: {
radius: ['50%', '30%'],
center: ['50%', '50%'],
},
angleAxis: {
max: maxdata,
show: false,
},
radiusAxis: {
type: 'category',
show: false,
},
series: [
{
name: '',
type: 'bar',
barWidth: 15, //圆圈宽度
showBackground: true,
backgroundStyle: {
color: '#f3fafd', //留白颜色
},
data: [cdata], //百分比占比
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#0098d9', //填色颜色
},
]),
},
},
},
// 外圆
{
type: 'pie',
clockWise: true, //顺时加载
radius: ['75%', '65%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
tooltip: {
trigger: 'item',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return `
<div style="text-align: start;color:#339ca8; background: rgba(230, 230, 230, 0.36);">${title1} </div>
<div style="text-align: start; background: rgba(230, 230, 230, 0.36);">问题总数: ${maxdata} </div>
<div style="text-align: start;">问题数量：${rdata}</div>
<div style="text-align: start; ">占比: ${decimal(wp)}% </div>
`;
}
},
},
data: [
{ value: maxdata - rdata }, //留白
{ value: rdata }, //填充
],
itemStyle: {
normal: {
color: function (params) {
//自定义颜色
var colorList = ['#f3fafc', '#339ca8']; //全部--部分
return colorList[params.dataIndex];
},
},
},
},
],
};
return option;
}
//柱状图
export function barChart(title: any, xdata: any, serdata: any) {
const option = {
title: { text: title }, //图标中的表题
tooltip: {},
xAxis: {
data: xdata,
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: serdata,
},
],
};
return option;
}
//百分比图 智能分组 //百分比图 智能分组
export function categoryChart(data, tcolor) { export function categoryChart(data, tcolor) {
const option = { const option = {
title: [ title: [{
{
text: data + `%`, text: data + `%`,
x: 'center', x: 'center',
top: '38%', top: '38%',
...@@ -385,8 +46,7 @@ export function categoryChart(data, tcolor) { ...@@ -385,8 +46,7 @@ export function categoryChart(data, tcolor) {
fontFamily: 'Arial', fontFamily: 'Arial',
foontWeight: '600', foontWeight: '600',
}, },
}, }, ],
],
polar: { polar: {
radius: ['100%', '60%'], radius: ['100%', '60%'],
center: ['50%', '50%'], center: ['50%', '50%'],
...@@ -399,8 +59,7 @@ export function categoryChart(data, tcolor) { ...@@ -399,8 +59,7 @@ export function categoryChart(data, tcolor) {
type: 'category', type: 'category',
show: false, show: false,
}, },
series: [ series: [{
{
name: '', name: '',
type: 'bar', type: 'bar',
roundCap: true, roundCap: true,
...@@ -414,16 +73,13 @@ export function categoryChart(data, tcolor) { ...@@ -414,16 +73,13 @@ export function categoryChart(data, tcolor) {
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
{
offset: 0, offset: 0,
color: tcolor, //填色颜色 color: tcolor, //填色颜色
}, }, ]),
]),
}, },
}, },
}, }, ],
],
}; };
return option; return option;
...@@ -432,8 +88,7 @@ export function categoryChart(data, tcolor) { ...@@ -432,8 +88,7 @@ export function categoryChart(data, tcolor) {
//百分比图 病案入组 //百分比图 病案入组
export function categoryChart11(text, data, tcolor) { export function categoryChart11(text, data, tcolor) {
const option = { const option = {
title: [ title: [{
{
text: text, text: text,
x: 'center', x: 'center',
top: '52%', top: '52%',
...@@ -468,8 +123,7 @@ export function categoryChart11(text, data, tcolor) { ...@@ -468,8 +123,7 @@ export function categoryChart11(text, data, tcolor) {
type: 'category', type: 'category',
show: false, show: false,
}, },
series: [ series: [{
{
name: '', name: '',
type: 'bar', type: 'bar',
roundCap: true, roundCap: true,
...@@ -483,528 +137,14 @@ export function categoryChart11(text, data, tcolor) { ...@@ -483,528 +137,14 @@ export function categoryChart11(text, data, tcolor) {
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
{
offset: 0, offset: 0,
color: tcolor, //填色颜色 color: tcolor, //填色颜色
}, }, ]),
]),
}, },
}, },
}, }, ],
],
}; };
return option; return option;
} }
\ No newline at end of file
//散点图
export function scatterChart(dataCount: any, cmi: any) {
let ymax = 0;
let xmax = 0;
let yarr = [];
let xarr = [];
dataCount.map((item) => {
return yarr.push(Math.abs(item[1]));
});
ymax = Math.ceil(Math.max(...yarr)); //最大值 向上取整
dataCount.map((item) => {
return xarr.push(Math.abs(item[0]));
});
xmax = Math.max(...xarr); //最大值
// console.log(xmax);
if (xmax < cmi) {
// x轴最大值小于cmi, x轴最大值边界为 x轴最大值 向上取整
xmax = Math.ceil(cmi);
}
const option = {
toolbox: {
//缩放
show: true,
top: '-2%',
right: '2%',
showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
itemGap: 20, //工具栏 icon 每项之间的间隔
feature: {
// dataZoom: {
// },
dataView: {
//数据视图
show: false,
},
restore: {
//重置
show: false,
},
dataZoom: {
//数据缩放视图
show: true,
title:{
zoom:'区域缩放',
back:'区域还原'
},
},
saveAsImage: {
//保存图片
show: false,
},
},
},
tooltip: {
backgroundColor: '#ffff', //背景颜色
borderColor: '#fff',
padding: 0,
//设置文字左对齐,文字大小,文字颜色
textStyle: {
fontSize: fontSize(0.17),
align: 'left',
color: '#3D4D65',
},
formatter: (params) => {
const { marker, name, value, componentType } = params;
let color = '';
if (value[0] >= cmi && value[1] > 0) {
color = '#ff7e00';
} else if (value[0] < cmi && value[1] >= 0) {
// return '#d872a4 ';
color = 'red';
} else if (value[0] <= cmi && value[1] < 0) {
color = '#2cabe3';
} else if (value[0] > cmi && value[1] <= 0) {
color = '#23c768';
}
if (componentType === 'series') {
return `<div style="min-width:180px;background:#FFFFFF;box-shadow: 0px 12px 36px 0px rgba(38, 69, 90, 0.2); border-radius: 8px;
font-size:12px;
line-height:20px;
color: #3D4D65;">
<div style="padding-left: 5%;font-size:12px;line-height:25px; color:${color};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> ${
value[2]
} </div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">CMI: ${decimal(value[0])} </div>
<div style="padding-left: 5%;">指数偏离度：${decimal(value[1])}</div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);font-weight: bold;">目标偏离度：${decimal(value[11])}</div>
<div style="padding-left: 5%; ">总分值: ${decimal(value[3])} </div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">例数：${value[4]}</div>
<div style="padding-left: 5%;">标准单价：${value[5]}</div>
<div style="padding-left: 5%;background: rgba(230, 230, 230, 0.36); ">目标指数单价：${decimal(value[14])}</div>
<div style="padding-left: 5%; ">实际单价：${decimal(value[6])}</div>
<div style="padding-left: 5%;background: rgba(230, 230, 230, 0.36);">药占比：${decimal(value[7] * 100)}%</div>
<div style="padding-left: 5%;">目标药占比：${decimal(value[13] * 100)}%</div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">材料占比：${decimal(value[8] * 100)}%</div>
<div style="padding-left: 5%; ">目标材料占比：${decimal(value[15] * 100)}%</div>
</div>`;
}
},
},
grid: {
left: 30,
right: 30,
top: 21,
bottom: 20,
containLabel: true,
},
xAxis: {
splitLine: {
//x轴分割线
lineStyle: {
color: '#C1EBFE',
type: 'dashed', //虚线
},
},
axisLine: {
//x轴
lineStyle: {
color: '#0587C0',
width: 0,
},
},
splitNumber: 5,
// max: xmax,
max: decimal(xmax + cmi),
min: decimal(-xmax + cmi),
},
yAxis: {
splitLine: {
//y轴分割线
lineStyle: {
color: '#C1EBFE',
type: 'dashed', //虚线
},
},
axisLine: {
//y轴
lineStyle: {
color: '#0587C0',
width: 0,
},
},
splitNumber: 5,
max: ymax,
min: -ymax,
},
series: [
{
type: 'scatter',
data: dataCount,
label: {
show: true,
position: 'bottom',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return Split(value[2]);
}
},
fontSize: 12,
},
symbolSize: (params) => {
if (params[4] > 5000) {
return Math.ceil(params[4] / 1000 + 10);
} else {
return Math.ceil(params[4] / 100 + 10);
}
},
markLine: {
label: {
normal: {
formatter: function (params) {
if (params.dataIndex == 0) {
return `CMI`;
} else if (params.dataIndex == 1) {
return ` 偏离度`;
}
return params.value;
},
},
},
lineStyle: {
normal: {
type: 'solid',
},
},
data: [
{
silent: false, //鼠标悬停事件 true没有，false有
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: 'solid',
color: '#0587C0',
},
yAxis: 0,
},
{
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: 'solid',
color: '#0587C0',
},
xAxis: cmi,
},
],
},
itemStyle: {
// shadowBlur: 2,
// shadowColor: 'rgba(120, 36, 50, 0.5)',
// shadowOffsetY: 1,
color: function (params: any) {
const { marker, name, value, componentType } = params;
if (value[0] >= cmi && value[1] > 0) {
return '#ff7e00';
} else if (value[0] < cmi && value[1] >= 0) {
// return '#d872a4 ';
return 'red';
} else if (value[0] <= cmi && value[1] < 0) {
return '#2cabe3';
} else if (value[0] > cmi && value[1] <= 0) {
return '#23c768';
}
},
},
},
],
};
return option;
}
export function safetyChart(data1) {
let color = ['#2CE3D8', '#24C768', '#FF7E00', '#00A1E4', '#FFC107'];
data1.map((item, index) => {
data1.push({ value: 0, name: '', color: 'transparent' });
color.push('transparent');
});
const option = {
grid: {
containLabel: true,
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
legend: {
textStyle: {
color: '#464A53',
fontWeight: 'normal',
fontSize: fontSize(0.12),
},
icon: 'rect',
itemWidth: 5,
itemHeight: 15,
},
series: [
{
name: '医疗效率',
type: 'pie',
startAngle: 0,
radius: [30, 100],
center: ['50%', '20%'],
roseType: 'area',
avoidLabelOverlap: false,
itemStyle: {
color: function (params) {
return color[params.dataIndex];
},
},
label: {
show: true,
position: 'outside',
fontSize: fontSize(0.14),
formatter: function (params) {
return params.value;
},
// color: function (params) {
// return params.color;
// },
},
labelLine: {
// normal: {
length: 10,
length2: 20,
show: true,
lineStyle: {
width: 1,
},
// },
},
data: data1,
},
],
};
return option;
}
export function EfficiencyChart(data) {
const option = {
grid: {
left: 0,
right: 0,
top: 20,
bottom: 20,
containLabel: true,
},
tooltip: {
show: false,
// trigger: 'item',
// formatter: '{a} : {c} ({d}%)',
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#F4F4F4'],
type: 'solid',
},
},
axisLabel: {
show: false,
},
show: false,
},
yAxis: {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#F4F4F4'],
type: 'solid',
},
},
axisLabel: {
show: false,
},
show: false,
},
series: [
{
data: data,
type: 'bar',
},
],
barWidth: 30, //柱子宽度
};
return option;
}
export function serviceChart(color1, color2) {
const option = {
// tooltip: {
// show: true,
// trigger: 'axis',
// },
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
//网格线显示
splitLine: {
show: false,
},
//刻度显示
axisLabel: {
show: false,
},
show: false,
},
],
yAxis: [
{
type: 'value',
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
show: false,
},
],
series: [
{
name: '疾病入组数：888',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
// smooth: true,
lineStyle: {
// normal: {
color: color1, // 线条颜色
// },
},
itemStyle: {
color: color1,
borderColor: color1,
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
},
data: [0, 100, 104, 109, 125, 54, 60, 90, 100, 94, 180, 200],
},
{
name: '收治病种数量：888',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
// smooth: true,
lineStyle: {
// normal: {
// color: color2, // 线条颜色
// },
borderColor: color2,
},
itemStyle: {
color: color2,
borderColor: color2,
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
},
data: [0, 150, 160, 140, 200, 160, 180, 230, 190, 230, 245, 280],
},
],
};
return option;
}
export function pieOption(data) {
var radius = ['0%', '60%'];
// 饼图
const optionPie = {
tooltip: {
trigger: 'axis',
},
series: [
{
tooltip: {
trigger: 'item',
formatter: function (params) {
return '占比：' + params.percent.toFixed(2) + '%';
},
},
labelLine: {
normal: {
// show: false,
},
},
label: {
fontSize: fontSize(0.14),
color: '#54657e99',
},
type: 'pie',
radius: radius,
center: ['50%', '50%'],
data: data,
},
],
};
return optionPie;
}
src/views/outHistorygrouping.vue 0 → 100644
<!--
* @Author: wsq
* @Date: 2022-03-02 16:34:58
* @LastEditors: wsq
* @LastEditTime: 2022-04-24 17:05:48
* @Description:
-->
<template>
<!-- 智能分组 -->
<div class="outsetgrouping" id="setGroupingbox">
<div class="outsetgrouping_button">
<!-- <el-button class="outsetgrouping_button_GoBackbtn" size="mini" @click="goback">
<span class="iconfont icon-daochu"></span> <span class="s2">返回</span>
</el-button> -->
<el-button class="outsetgrouping_button_Submitbtn" size="mini" type="primary" @click="submit">
<span class="iconfont icon-ipr_tijiao "></span> <span class="s2" >提交</span>
</el-button>
</div>
<div class="outsetgrouping_top">
<div class="outsetgrouping_top_message">
<div class="outsetgrouping_top_message_left">
<span class="iconfont icon-xinrenzhinan"> </span>
<div class="outsetgrouping_top_message_left_t1">
住院号:<span>{{ casehisObj?.a48 }}</span>
</div>
</div>
<div class="outsetgrouping_top_message_centert">
<span class="iconfont icon-yinhangka"></span>
<div class="outsetgrouping_top_message_centert_t2">
住院次数:<span>{{ casehisObj?.a49 }}</span>
</div>
</div>
<div class="outsetgrouping_top_message_right">
<span class="iconfont icon-fufeiguanli"></span>
<div class="outsetgrouping_top_message_right_t3">
医疗付费方式:<span>{{ casehisObj?.a46C }}</span>
</div>
</div>
</div>
</div>
<div class="outsetgrouping_top2">
<div class="outsetgrouping_top2_message">
<div class="outsetgrouping_top2_message_left">
<span class="iconfont icon-iconset0254"> </span>
<div class="outsetgrouping_top2_message_left_t1">
当前入组编码:<span>{{ casehisObj?.drgs.code }}</span>
</div>
</div>
<div class="outsetgrouping_top2_message_centert">
<span class="iconfont icon-daoru"></span>
<div class="outsetgrouping_top2_message_centert_t2">
入组名称:<span>{{ casehisObj?.drgs.name }}</span>
</div>
</div>
<div class="outsetgrouping_top2_message_right">
<span class="iconfont icon-qianqian-"></span>
<div class="outsetgrouping_top2_message_right_t3">
医疗支付金额:<span>{{ casehisObj?.drgs.actualfee }}</span>
</div>
</div>
</div>
</div>
<div class="outsetgrouping_top3"></div>
<div class="outsetgrouping_title"><span class="outsetgrouping_title_span">智能疾病分组</span></div>
<div class="outsetgrouping_centent">
<div class="outsetgrouping_centent_totalnum" v-for="(item, index) in CorePercents" :key="index">
<div class="outsetgrouping_centent_totalnum_left">
<div class="outsetgrouping_centent_totalnum_left_radios">
<input type="radio" name="radios" :value="item.coreID" v-model="radio" />
</div>
<div class="outsetgrouping_centent_totalnum_left_text">
<div class="outsetgrouping_centent_totalnum_left_text_msg1">
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text1">
<span> 医保诊断名称:{{item.diagMapName}}</span>
<span> 诊断类型:{{item.diagOrder}}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text2">
<span>医保手术名称:{{item.opsMapName}}</span>
<span>手术类型:{{item.opsOrder}}</span>
</div>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2">
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text3">
<span>分组编码：{{ item.code }}</span>
<span>入组名称：{{ item.coreName }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text4">
<span>主诊断编码：{{ item.disCode }}</span
><span>主手术编码：{{ item.opsCode }}</span
><span>点数：{{ item.score }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text5">
<span>医保支付金额：{{ item.unitfee }}</span
><span>院内平均费用：{{ item.avgFee }}</span
><span>院内平均住院天数：{{ item.avgInHosDay }}</span>
</div>
</div>
</div>
</div>
<div class="outsetgrouping_centent_totalnum_right">
<div class="outsetgrouping_centent_totalnum_right_text1">
<span class="outsetgrouping_centent_totalnum_right_text1_span1"> 药占比:</span>
<div :id="`indexChart` + index" class="outsetgrouping_centent_totalnum_right_text1_echar1"></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text2">
<span class="outsetgrouping_centent_totalnum_right_text2_span2"> 耗材占比:</span>
<div :id="`indexCharttwo` + index" class="outsetgrouping_centent_totalnum_right_text2_echar2"></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text3">
<span class="outsetgrouping_centent_totalnum_right_text3_span3"> 检查占比:</span>
<div :id="`indexCharttree` + index" class="outsetgrouping_centent_totalnum_right_text3_echar3"></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text4">
<span class="outsetgrouping_centent_totalnum_right_text4_span4"> 检验占比:</span>
<div :id="`indexChartfore` + index" class="outsetgrouping_centent_totalnum_right_text4_echar4"></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text5">
<span class="outsetgrouping_centent_totalnum_right_text5_span5"> 其他占比:</span>
<div :id="`indexChartfile` + index" class="outsetgrouping_centent_totalnum_right_text5_echar5"></div>
</div>
</div>
</div>
<!-- 如果没有搜索时的样式 -->
<div v-show="nolistShow" class="outsetgrouping_centent_nodata">
<div class="outsetgrouping_centent_nodata_img">
<img src="../assets/img/nodata.png" alt="" />
</div>
<div class="outsetgrouping_centent_nodata_text">暂无数据</div>
</div>
</div>
<div class="outsetgrouping_pagination">
<el-pagination
layout="sizes,prev, pager, next,jumper"
:total="totalCount"
@size-change="sizeChange"
@current-change="currentChange"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[10, 30, 50]"
>
</el-pagination>
</div>
</div>
</template>
<script >
import http from '../utils/http';
import { reactive, toRefs, onMounted, nextTick, computed } from '@vue/composition-api';
import { decimal } from '../utils/decimal';
import { useRoute, useRouter } from '../utils/useVueRouter';
import { initEcharts, categoryChart} from '../utils/echarts';
export default {
name: 'outHistorygrouping',
setup() {
let state = reactive({
abc: '',
casehisObj: null,
searchForm: {
diagName: '',
opsName: '',
},
CorePercents: [],
totalCount: 0, //总条数
currentPage: 1, //当前页
pageSize: 10,
typesel: 1,
radio: '', //单选框选中值
drug: [],
nodataShow: true, //没有搜索时显示
nolistShow: false, //没有搜索数据的时候显示
groupList: [], //主诊断
groupArr: [],
groupList2: [], //主手术
groupArr2: [],
diagMapList: null, //医保诊断编码集合
opsMapList: null, //医保手术编码集合
});
//返回
const router=useRouter();
const goback=()=>{
router.go(-1)
}
const loadingOption1 = {
// 加载loading
fullscreen: true,
text: '正在加载...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)',
};
//获取基本数据
function getCaseHis(code) {
http
.post(`/medical/Get/casehisData?id=${code}`, {})
.then((data) => {
state.casehisObj = data;
console.log('data',data);
state.diagMapList = data.diagMapList;
state.opsMapList = data.opsMapList;
getlist();
})
.catch((error) => {
});
}
//获取列表数据
const getlist = () => {
http
.post(`/medical/get/GetCorePercents`,
{
PageNumber:state.currentPage,
Type:1,
pageSize:state.pageSize,
DiagMapList:state.diagMapList,
OpsMapList:state.opsMapList,
id:route.value.query.id
})
.then((data) => {
state.CorePercents = data.list;
state.totalCount = data.totalCount;
if (state.CorePercents.length == 0) {
state.nolistShow = true;
// state.nodataShow = false;
}
for (var i = 0; i < state.CorePercents.length; i++) {
initEcharts(categoryChart(state.CorePercents[i].drugPercent,'#2CABE3'), `indexChart${i}`);
initEcharts(categoryChart(state.CorePercents[i].materialsPercent,'#71D875'), `indexCharttwo${i}`);
initEcharts(categoryChart(state.CorePercents[i].inspectPercent,'#F35E77'), `indexCharttree${i}`);
initEcharts(categoryChart(state.CorePercents[i].testPercent,'#FFB321'), `indexChartfore${i}`);
initEcharts(categoryChart(state.CorePercents[i].otherPercent,'#C05EF3'), `indexChartfile${i}`);
}
})
.catch((error) => {
});
};
//提交
const submit = () => {
if(state.radio==''){
ElMessage.warning({
message: "请先选择要入组的病组",
type: 'warning',
});
}else{
http
.post(`/medical/Update/casehisById?PatientId=${route.value.query.id}`, [state.radio])
.then((data) => {
ElMessage.success({
message: `${data.message}`,
type: 'success',
});
getCaseHis(route.value.query.id)
})
.catch((error) => {});
}
};
/**
* 页码
*/
const currentChange = (val) => {
state.currentPage = val;
getlist();
};
const sizeChange = (val) => {
state.pageSize = val;
getlist();
};
var route = useRoute();
onMounted(() => {
getCaseHis(route.value.query.id);
if (state.searchForm.diagName.length > 0) {
getlist();
}
});
return {
...toRefs(state),
decimal,
getCaseHis,
currentChange,
sizeChange,
getlist,
submit,
goback
};
},
};
</script>
<style lang="scss" >
@import '../styles/mixin.scss';
// @import '../styles/media/media/outHistorygrouping.scss';
.outsetgrouping {
height: 100%;
background-color: white;
padding: 0px 20px 20px 20px;
overflow: hidden;
position: relative;
&_button{
display: flex;
justify-content: end;
margin-bottom: 10px;
&_GoBackbtn{
color:#2CABE3 ;
border: 1px solid #2CABE3;
}
&_Submitbtn{
background-color: #2CABE3;
color: #fff;
}
}
&_top {
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
&_message {
display: flex;
justify-content: space-between;
&_left {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
.iconfont {
color: #2cabe3;
padding-left: 29px;
font-size: 23px;
}
&_t1 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_centert {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
.iconfont {
color: #2cabe3;
padding-left: 29px;
font-size: 23px;
}
&_t2 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_right {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
.iconfont {
color: #2cabe3;
padding-left: 29px;
font-size: 23px;
}
&_t3 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
}
}
&_top2 {
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
&_message {
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 16px;
&_left {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
.iconfont {
color: #2cabe3;
padding-left: 29px;
font-size: 23px;
}
&_t1 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_centert {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
.iconfont {
color: #2cabe3;
padding-left: 29px;
font-size: 23px;
}
&_t2 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_right {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
.iconfont {
color: #2cabe3;
padding-left: 29px;
font-size: 23px;
}
&_t3 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
}
}
&_top3 {
height: 10px;
background-color: #f3fafd;
border-radius: 10px;
margin-bottom: 16px;
}
&_title {
height: 30px;
background-image: url(../assets/img/bbj.png);
background-size: 100% 100%;
color: white;
font-size: 12px;
display: flex;
align-items: center;
justify-content: start;
margin-bottom: 5px;
&_span {
padding-left: 10px;
}
}
&_centent {
background-color: #f1f5f8;
height:66%;
overflow-y: auto;
&_totalnum {
height: 282px;
background-color: #fff;
margin: 12px;
display: flex;
flex-direction: column;
align-items: center;
&_left {
flex: 1;
width: 100%;
height: 70%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
&_radios {
width: 3%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
}
&_text {
width: 97%;
height: 100%;
&_msg1{
height: 25%;
box-sizing: content-box;
border: 10px solid rgba(44, 171, 227, 0.08);
border-bottom: 5px solid rgba(44, 171, 227, 0.08);
border-top: 5px solid rgba(44, 171, 227, 0.08);
margin-bottom: 5px;
margin-top: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_text1 {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin:5px 5px;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text2 {
width: 100%;
height: 48%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 5px;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
}
&_msg2{
background-color: rgba(44, 171, 227, 0.08);
display: flex;
flex-direction: column;
height: 65%;
justify-content: center;
padding-top: 10px;
&_text3 {
// margin-bottom: 10px;
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
span {
display: block;
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text4 {
margin-bottom: 10px;
width: 100%;
height: 30%;
margin-top: 10px;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text5 {
margin-bottom: 10px;
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
}
}
}
&_right {
width:100%;
height: 30%;
display: flex;
justify-content: space-around;
&_text1{
width: 19%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 3%;
&_span1{
color: #2cabe3;
font-family: PingFang SC;
font-weight: 400;
}
&_echar1 {
width: 50%;
height: 88px;
margin-left: -30px;
}
}
&_text2{
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span2{
color: #71d875;
font-family: PingFang SC;
font-weight: 400;
}
&_echar2 {
width: 50%;
height: 88px;
margin-left: -30px;
}
}
&_text3{
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span3{
color: #f35e77;
font-family: PingFang SC;
font-weight: 400;
}
&_echar3 {
width: 50%;
height: 85px;
margin-left: -30px;
}
}
&_text4{
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span4{
color: #ffb321;
font-family: PingFang SC;
font-weight: 400;
}
&_echar4 {
width: 50%;
height: 88px;
margin-left: -30px;
}
}
&_text5{
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span5{
color: #c05ef3;
font-family: PingFang SC;
font-weight: 400;
}
&_echar5 {
width: 50%;
height: 88px;
margin-left: -30px;
}
}
}
}
// 没有数据
&_nodata {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
&_img {
img {
width: 115px;
height: 102px;
}
}
&_text {
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #abafb3;
}
}
}
&_pagination {
display: flex;
justify-content: end;
margin-top: 1%;
}
}
</style>
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