559 lines
13 KiB
TypeScript
559 lines
13 KiB
TypeScript
import { ref, unref } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import { emptyChart } from '/@/utils/utils.ts';
|
|
|
|
//服务详情数据弹窗参数
|
|
export enum ServerDetailType {
|
|
gross = '0', //最新呼入电话
|
|
alerdyreceive = '1', //最新受理电话
|
|
jqqz = '2', //突发重大伤病应急
|
|
dbjy = '3', //重大伤病应急就医
|
|
}
|
|
|
|
export function useStatistics() {
|
|
const statistics = ref([
|
|
{
|
|
name: '最新呼入电话',
|
|
value: '',
|
|
key: 'gross',
|
|
},
|
|
{
|
|
name: '最新受理电话',
|
|
value: '',
|
|
key: 'alerdyreceive',
|
|
},
|
|
{
|
|
name: '突发重大伤病应急',
|
|
value: '',
|
|
key: 'jqqz',
|
|
},
|
|
{
|
|
name: '重大伤病应急就医',
|
|
value: '',
|
|
key: 'dbjy',
|
|
},
|
|
]);
|
|
|
|
function getStatistics() {
|
|
return unref(statistics);
|
|
}
|
|
|
|
function setStatistics(data = {}) {
|
|
statistics.value.forEach((item) => {
|
|
const { key } = item;
|
|
item.value = data[key];
|
|
});
|
|
}
|
|
|
|
return {
|
|
statistics,
|
|
getStatistics,
|
|
setStatistics,
|
|
};
|
|
}
|
|
|
|
export const timeTab = [
|
|
// {
|
|
// name: '全部',
|
|
// value: '1',
|
|
// },
|
|
{
|
|
name: '本年',
|
|
value: '2',
|
|
},
|
|
{
|
|
name: '本月',
|
|
value: '3',
|
|
},
|
|
{
|
|
name: '本周',
|
|
value: '4',
|
|
},
|
|
];
|
|
export const sexType = [
|
|
{
|
|
name: '全部',
|
|
value: '0',
|
|
},
|
|
{
|
|
name: '男',
|
|
value: '2',
|
|
},
|
|
{
|
|
name: '女',
|
|
value: '1',
|
|
},
|
|
];
|
|
|
|
export const timeTabNew = [
|
|
{
|
|
name: '本周',
|
|
value: '2',
|
|
},
|
|
{
|
|
name: '本月',
|
|
value: '3',
|
|
},
|
|
{
|
|
name: '本年',
|
|
value: '4',
|
|
},
|
|
];
|
|
|
|
export function useSpin() {
|
|
const spinning = ref(true);
|
|
|
|
function setSpin(flag: boolean) {
|
|
spinning.value = flag;
|
|
}
|
|
|
|
return {
|
|
spinning,
|
|
setSpin,
|
|
};
|
|
}
|
|
|
|
export const hospitalList = [
|
|
// {
|
|
// name: '泾河医院',
|
|
// key: 'zhigong',
|
|
// value: 0,
|
|
// },
|
|
// {
|
|
// name: '兴隆医院',
|
|
// key: 'tangdu',
|
|
// value: 0,
|
|
// },
|
|
// {
|
|
// name: '宁夏宝石花医院',
|
|
// key: 'yangehu',
|
|
// value: 0,
|
|
// },
|
|
// {
|
|
// name: '延安市人民医院',
|
|
// key: 'yananshi',
|
|
// value: 0,
|
|
// },
|
|
// {
|
|
// name: '西京医院',
|
|
// key: 'xijing',
|
|
// value: 0,
|
|
// },
|
|
// {
|
|
// name: '庆阳医院',
|
|
// key: 'changan',
|
|
// value: 0,
|
|
// },
|
|
];
|
|
|
|
export function useHospitalList() {
|
|
const radarList = ref(hospitalList);
|
|
|
|
function getRadarList() {
|
|
return unref(radarList);
|
|
}
|
|
|
|
function setRadarList(res) {
|
|
radarList.value = res;
|
|
// radarList.value.forEach((item) => {
|
|
// const { key } = item;
|
|
// item.value = res[key] || 0;
|
|
// });
|
|
}
|
|
|
|
return {
|
|
radarList,
|
|
getRadarList,
|
|
setRadarList,
|
|
};
|
|
}
|
|
|
|
const radarChartsTheme = {
|
|
dark: {
|
|
radarName: {
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
splitLine: {
|
|
color: '#597589',
|
|
},
|
|
axisName: {
|
|
color: '#ffffff',
|
|
},
|
|
areaStyle: {
|
|
color: '#05D5FF',
|
|
},
|
|
lineStyle: {
|
|
color: '#05D5FF',
|
|
},
|
|
itemStyle: {
|
|
color: '#05D5FF',
|
|
},
|
|
},
|
|
light: {
|
|
radarName: {
|
|
textStyle: {
|
|
color: '#607DDB',
|
|
},
|
|
},
|
|
splitLine: {
|
|
color: '#b5c2ef',
|
|
},
|
|
axisName: {
|
|
color: '#607DDB',
|
|
},
|
|
areaStyle: {
|
|
color: '#a0b6fd',
|
|
},
|
|
lineStyle: {
|
|
color: '#607DDB',
|
|
},
|
|
itemStyle: {
|
|
color: '#607DDB',
|
|
},
|
|
},
|
|
};
|
|
/**
|
|
* @Description:体检医院雷达图
|
|
* @date 2023/6/27
|
|
* @param indicator:名称及最大值
|
|
* @param countList:数据项
|
|
*/
|
|
export const radarCharts = ({ indicator, countList, theme }) => {
|
|
if (!countList?.length) {
|
|
return emptyChart();
|
|
}
|
|
const { radarName, splitLine, axisName, areaStyle, lineStyle, itemStyle } = radarChartsTheme[theme] || radarChartsTheme.dark;
|
|
return {
|
|
noDataLoadingOption: {
|
|
text: '暂无数据',
|
|
effect: 'whirling',
|
|
effectOption: {
|
|
period: 3,
|
|
radius: 10,
|
|
frame: 3,
|
|
},
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
grid: {
|
|
top: '1%',
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '1%',
|
|
containLabel: true,
|
|
},
|
|
radar: {
|
|
name: {
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
},
|
|
...radarName,
|
|
},
|
|
shape: 'polygon',
|
|
center: ['50%', '50%'],
|
|
radius: '65%',
|
|
//坐标系起始角度，也就是第一个指示器轴的角度。
|
|
startAngle: 360,
|
|
scale: true,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#597589',
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#597589', // 设置网格的颜色
|
|
...splitLine,
|
|
},
|
|
},
|
|
indicator: indicator,
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
axisName: {
|
|
formatter: function (params) {
|
|
let dataIndex = indicator.findIndex((item) => item.name === params);
|
|
return `${params}\n${countList[dataIndex]}`;
|
|
},
|
|
color: '#ffffff',
|
|
...axisName,
|
|
},
|
|
},
|
|
polar: {
|
|
center: ['50%', '50%'], // 默认全局居中
|
|
radius: '0%',
|
|
},
|
|
angleAxis: {
|
|
min: 0,
|
|
interval: 5,
|
|
clockwise: false,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
radiusAxis: {
|
|
min: 0,
|
|
interval: 20,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '本年度健康体检',
|
|
type: 'radar',
|
|
symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
|
|
symbolSize: 10, // 拐点的大小
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#05D5FF',
|
|
...itemStyle,
|
|
},
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: '#05D5FF',
|
|
opacity: 0.5,
|
|
...areaStyle,
|
|
},
|
|
},
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#05D5FF',
|
|
...lineStyle,
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: countList,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
};
|
|
const barTheme = {
|
|
dark: {
|
|
tooltip: {
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
backgroundColor: 'rgba(50,50,50,0.7)',
|
|
borderColor: '#1b7ef2',
|
|
},
|
|
xAxisLabel: {
|
|
color: '#FFFFFF',
|
|
},
|
|
itemStyle: [
|
|
{ offset: 0, color: '#008CFF' },
|
|
{ offset: 1, color: '#33CBFE' },
|
|
],
|
|
},
|
|
light: {
|
|
tooltip: {
|
|
textStyle: {
|
|
color: '#768ddb',
|
|
},
|
|
backgroundColor: '#d5dcf8',
|
|
borderColor: '#1b7ef2',
|
|
},
|
|
xAxisLabel: {
|
|
color: '#607DDB',
|
|
},
|
|
itemStyle: [
|
|
{ offset: 0, color: '#607DDB' },
|
|
{ offset: 1, color: '#768ddb' },
|
|
],
|
|
},
|
|
};
|
|
|
|
export function barOption(xData, ydata, theme) {
|
|
const { tooltip, xAxisLabel, itemStyle } = barTheme[theme] || barTheme.dark;
|
|
|
|
function maxCount() {
|
|
if (ydata.length) {
|
|
return Math.max(...ydata) < 5 ? 5 : null;
|
|
} else {
|
|
return 5;
|
|
}
|
|
}
|
|
|
|
return {
|
|
grid: {
|
|
top: '18%',
|
|
left: '8%',
|
|
right: '4%',
|
|
bottom: '15%',
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis', // 触发类型为坐标轴
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
backgroundColor: 'rgba(50,50,50,0.7)',
|
|
borderColor: '#1b7ef2',
|
|
...tooltip,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData,
|
|
axisLabel: {
|
|
color: '#FFFFFF',
|
|
fontSize: 14,
|
|
...xAxisLabel,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#8798d1',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: '次数',
|
|
nameTextStyle: {
|
|
color: '#fff',
|
|
padding: [0, 0, 0, -15],
|
|
...xAxisLabel,
|
|
},
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#FFFFFF',
|
|
fontSize: 14,
|
|
...xAxisLabel,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#a2add2',
|
|
},
|
|
},
|
|
min: 0,
|
|
max: maxCount(),
|
|
},
|
|
series: [
|
|
{
|
|
data: ydata,
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, itemStyle),
|
|
borderRadius: 12,
|
|
},
|
|
barMaxWidth: '10',
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#33CBFE',
|
|
fontWeight: 'normal',
|
|
...xAxisLabel,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
export function getOptions(data: any[] = [], colors: any[] = [], totalTimes: number = 0) {
|
|
return {
|
|
title: [
|
|
{
|
|
text: totalTimes + '人',
|
|
left: 'center',
|
|
top: '35%',
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
fontStyle: 'normal',
|
|
fontWeight: '400', // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
|
|
fontFamily: 'Source Han Sans CN',
|
|
fontSize: 20,
|
|
height: '22%',
|
|
},
|
|
},
|
|
{
|
|
subtext: '急救总次数',
|
|
subtextStyle: {
|
|
color: '#ffffff',
|
|
fontStyle: 'normal',
|
|
fontWeight: '500',
|
|
fontFamily: 'Source Han Sans CN',
|
|
fontSize: 24,
|
|
},
|
|
left: 'center',
|
|
top: '48%',
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
label: {
|
|
formatter: '{b} {c}',
|
|
// fontSize: 18
|
|
},
|
|
legend: {
|
|
top: '0%',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
},
|
|
},
|
|
colors: colors,
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['60%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 1,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
},
|
|
center: ['50%', '55%'],
|
|
// emphasis: {
|
|
// label: {
|
|
// show: true,
|
|
// fontSize: 40,
|
|
// fontWeight: 'bold',
|
|
// },
|
|
// },
|
|
data: data,
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
/**
|
|
* @desc 值是否不为零
|
|
* @param list 数组
|
|
* @param key 元素属性
|
|
*/
|
|
export function allValueEmpty(key: string, list: any[]) {
|
|
if (!Array.isArray(list)) {
|
|
return false;
|
|
}
|
|
return list.every((item: any) => item?.[key] != 0);
|
|
}
|