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); }