update

1.新需求2025.9.19新需求：去掉"健康监测"副屏, 修改后健康终端报警点击查看详情弹出告警记录分页列表; 去掉【体检人数统计】【体检数据】【健康打卡数据】，增加【心血管监测】模块功能，【心血管监测】功能将原心血管监测大屏上的内容整理并移动到急救服务平台大屏中; 员工求助时，地图中推荐两个医院、两个健康小屋、两个AED坐标信息，并按距离排序，体现距离远近顺序; 地图中油田医院、健康小屋等各个图例，显示总数信息; 救护车坐标信息维护，并在大屏上标记; 右上角"增加【救助信息】板块, 当出现应急弹窗后或从今日应急选中应急事件 , 该板块需展示应急事件的相关信息(开发中);
2025-09-24 20:53:28 +08:00
parent a97d9c64aa
commit c7abcf1f67
29 changed files with 1783 additions and 175 deletions
@@ -0,0 +1,120 @@
+<template>
+    <div class="left-pie" style="height: 100%">
+        <div class="inner" ref="healthChart"></div>
+        <div class="count">
+            <div class="t">总人数</div>
+            <div class="v" style="text-align: center">{{ userCount }}</div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { circleRing } from '/src/views/indexSun/threeLeftNewItem/pieCharts.ts';
+    import { nextTick, onMounted, ref, watch } from 'vue';
+    import * as echarts from 'echarts';
+
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+        data: {
+            type: Array,
+            default: () => [],
+        },
+        color: {
+            type: Array,
+            default: () => [],
+        },
+        tips: {
+            type: String,
+            default: () => '',
+        },
+        userCount: {
+            type: Number,
+        },
+        themeType: {
+            type: String,
+            default: () => '',
+        },
+    });
+    const healthChart = ref<HTMLElement>();
+    onMounted(() => {
+        init();
+    });
+
+    watch(
+        () => props.data,
+        () => {
+            init();
+        },
+        {
+            deep: true,
+        }
+    );
+
+    async function init() {
+        initChart(props.data, props.userCount, props.color);
+    }
+
+    function initChart(chartData, total, color) {
+        nextTick(() => {
+            let myChart = echarts.init(healthChart.value);
+            let options = circleRing(chartData, total, color);
+            myChart.setOption(options);
+            window.addEventListener('resize', () => {
+                myChart.resize();
+            });
+        });
+    }
+</script>
+<style scoped lang="less">
+    .inner {
+        width: 100%;
+        margin: 0 auto;
+        height: 100%;
+    }
+
+    .inner::after {
+        //content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 20px;
+        height: 20px;
+        background-color: #051a2b;
+    }
+
+    .left-pie {
+        position: relative;
+        padding-bottom: 0 !important;
+    }
+
+    .count {
+        position: absolute;
+        //left: 41%;
+        //top: 30%;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-size: 22px;
+        font-weight: bold;
+        z-index: 1;
+        pointer-events: none;
+
+        > div {
+            width: 80px;
+            text-align: center;
+            z-index: 0;
+        }
+
+        .t {
+            font-size: 14px;
+            font-weight: normal;
+        }
+    }
+</style>