renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source 
1.银川大屏新增急救数据模块
This commit is contained in:
weixin
2024-10-23 15:20:57 +08:00
parent 27beb42eb0
commit 09f4ddc2d7
5 changed files with 314 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/body-d-left/bodyLeftHooks.ts
+67
View File
@@ -463,6 +463,73 @@ export function barOption(xData, ydata, theme) {
};
}
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 数组
src/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue
+1
View File
@@ -54,6 +54,7 @@
padding: 10px 20px;
.trends-title-con {
margin-bottom: 5px;
display: flex;
align-items: center;
}
src/views/yinChuan/componetns/emergencyData/emergencyData.vue
+228
View File
@@ -0,0 +1,228 @@
<template>
<div>
<public-title title="急救数据" themeType="dark">
<template #right>
<span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>
</template>
</public-title>
<div class="inner">
<div class="type-time">
<span
v-for="(item, index) in typeTime"
:key="index"
:class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
@click="handleSelect(index, item.value)"
>{{ item.name }}</span
>
</div>
<div class="server-container">
<a-spin :spinning="spinning" class="spin"></a-spin>
<div class="RadarCharts" ref="chartsRef"></div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import PublicTitle from '/@/components/publicTitle.vue';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
import { useSession } from '/@/hooks/autoRefresh/caching.ts';
import { onMounted, ref, watch } from 'vue';
import { getOptions, useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { ambulanceStatApi } from '/@/views/yinChuan/yinChuan.api.ts';
import * as echarts from 'echarts';
const { themeType } = useTheme();
const props = defineProps({
refreshState: {
type: Boolean,
},
setting: {
type: Object,
},
theme: {
type: String,
},
});
const typeTime = ref([
{
name: '本年',
value: '2',
},
{
name: '本月',
value: '1',
},
{
name: '本周',
value: '0',
},
]);
const emergencyTypeList = ref([
{
type: '1',
name: '濒危',
color: '#5087ec',
value: 0,
},
{
type: '2',
name: '危重',
color: '#68bbc4',
value: 0,
},
{
type: '3',
name: '急症',
color: '#58a55c',
value: 0,
},
{
type: '4',
name: '非急症',
color: '#f2bd42',
value: 0,
},
{
type: '5',
name: '死亡',
color: '#ee752f',
value: 0,
},
]);
const selectIndex = ref(0);
const selectVal = ref('2'); //本年
const { setSpin, spinning } = useSpin();
onMounted(() => {
getList();
});
const { setSession, getSession } = useSession();
const chartsRef = ref();
async function getList() {
try {
emergencyTypeList.value = [
{
type: '1',
name: '濒危',
color: '#5087ec',
value: 0,
},
{
type: '2',
name: '危重',
color: '#68bbc4',
value: 0,
},
{
type: '3',
name: '急症',
color: '#58a55c',
value: 0,
},
{
type: '4',
name: '非急症',
color: '#f2bd42',
value: 0,
},
{
type: '5',
name: '死亡',
color: '#ee752f',
value: 0,
},
];
const { result, success } = await ambulanceStatApi({ type: selectVal.value });
if (success) {
result &&
result.map((item: any) => {
emergencyTypeList.value.forEach((it: any) => {
if (item.type == it.type) {
it['value'] = item.count || 0;
}
});
});
let data: any[] = [];
let colors: any[] = [];
let totalTimes = 0;
emergencyTypeList.value.map((item: any) => {
data.push({
name: item.name,
value: item.value,
});
colors.push(item.colors);
totalTimes += item.value || 0;
});
const option = getOptions(data, colors, totalTimes);
const myChart = echarts.init(chartsRef.value);
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
}
} catch (e) {
console.log(e);
} finally {
setSpin(false);
}
}
function handleSelect(index: number, value: string) {
setSpin(true);
selectIndex.value = index;
selectVal.value = value;
getList();
}
const emit = defineEmits(['emergencyDataList']);
function viewDetail() {
emit('emergencyDataList');
}
watch(
() => props.refreshState,
() => {
getList();
}
);
</script>
<style scoped lang="less">
.inner {
height: calc(100% - 40px);
}
.right-text {
font-weight: 100;
cursor: pointer;
margin-right: 3px;
font-size: 18px;
}
.server-container {
margin-top: 15px;
width: 96%;
height: calc(100% - 40px);
display: flex;
flex-wrap: wrap;
align-content: space-around;
position: relative;
.spin {
position: absolute;
left: 50%;
top: 50%;
}
.RadarCharts {
width: 100%;
height: 100%;
}
}
</style>
src/views/yinChuan/yinChuan.api.ts
+4
View File
@@ -4,6 +4,8 @@ export enum Api {
phoneList = '/health-emergency/emergency/tblUserHelp/phoneList',
getWorkDaily = '/health-emergency/emergency/ycLargeScreen/medicalCenter',
getTeamHealth = '/health-emergency/emergency/ycLargeScreen/userHealthCenter',
ambulanceStat = '/health-emergency/emergency/ycLargeScreen/ambulanceStat',
ambulancePage = '/health-emergency/emergency/ycLargeScreen/ambulancePage',
}
// 呼入电话、受理电话
@@ -12,3 +14,5 @@ export const getPhoneList = (params: any) => get(Api.phoneList, params);
export const getWorkDaily = (params: any) => get(Api.getWorkDaily, params);
//员工队伍健康状况
export const getTeamHealth = (params: any) => get(Api.getTeamHealth, params);
export const ambulanceStatApi = (params: any) => get(Api.ambulanceStat, params);
export const ambulancePageApi = (params: any) => get(Api.ambulancePage, params);
src/views/yinChuan/yinChuan.vue
+14 -2
View File
@@ -23,6 +23,7 @@
/>
<!--一线医疗点每日工作动态-->
<DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
<EmergencyData @emergencyDataList="emergencyDataList" class="emergency-data" />
</div>
<div class="body-d-middle">
<china-map
@@ -49,6 +50,7 @@
<YunZuoXiDialog ref="yunZuoXiDialogRef" :record="yunZuoXiData" @confirmHelp="confirmHelp" />
<PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
<TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
<emergency-data-dialog ref="emergencyDataDialog" />
</div>
</template>
<script lang="ts" setup>
@@ -64,6 +66,7 @@
import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
import TerminalAlarmDialog from '/@/views/yinChuan/componetns/TerminalAlarmDialog/TerminalAlarmDialog.vue';
import EmergencyData from '/@/views/yinChuan/componetns/emergencyData/emergencyData.vue';
import { useTopTime } from '/@/utils/utils.ts';
import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
import { useRefresh } from '/@/hooks/autoRefresh';
@@ -74,6 +77,7 @@
import { useUserStore } from '/@/store/modules/user.ts';
import { Map } from '/@/assets/mapUtils/map.ts';
import LoginOutButton from '/@/views/components/loginOutButton.vue';
import EmergencyDataDialog from '/@/views/yinChuan/componetns/emergencyData/components/emergencyDataDialog.vue';
const title = ref('银川片应急就医服务中心');
const phone = '(0951-6805199)';
@@ -110,6 +114,11 @@
}, 1000);
}
const emergencyDataDialog = ref();
function emergencyDataList() {
emergencyDataDialog.value.openDialog();
}
function getTime() {
const { timeLeft, timeRight } = useTopTime();
dayTimeO.value = timeLeft;
@@ -430,11 +439,14 @@
.yichuan-body-left {
.service-details {
height: 33%;
height: calc(100% / 3);
}
.daily-work-trends {
height: 67%;
height: calc(100% / 3);
}
.emergency-data {
height: calc(100% / 3);
}
}