update 更换背景图 看板接口对接

src/components/body-d-left/bodyLeftHooks.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import * as echarts from 'echarts';
 
 export const timeTab = [
     {
@@ -18,6 +19,16 @@ export const timeTab = [
         value: '4',
     },
 ];
+export const sexType = [
+    {
+        name: '男',
+        value: '2',
+    },
+    {
+        name: '女',
+        value: '1',
+    },
+];
 
 export function useSpin() {
     const spinning = ref(true);
@@ -31,3 +42,109 @@ export function useSpin() {
         setSpin,
     };
 }
+
+export const hospitalList = [
+    {
+        title: '兴隆医院',
+        key: 'tangdu',
+    },
+    {
+        title: '泾河医院',
+        key: 'zhigong',
+    },
+    {
+        title: '宁夏宝石花医院',
+        key: 'yangehu',
+    },
+    {
+        title: '庆阳医院',
+        key: 'changan',
+    },
+    {
+        title: '延安市人民医院',
+        key: 'yananshi',
+    },
+    {
+        title: '西京医院',
+        key: 'xijing',
+    },
+];
+
+export function barOption(xData, ydata) {
+    function maxCount() {
+        if (ydata.length) {
+            return Math.max(...ydata) < 5 ? 5 : null;
+        } else {
+            return 5;
+        }
+    }
+
+    return {
+        grid: {
+            top: '18%',
+            left: '8%',
+            right: '8%',
+            bottom: '15%',
+        },
+        tooltip: {
+            show: true,
+            textStyle: {
+                color: '#fff',
+            },
+            backgroundColor: 'rgba(50,50,50,0.7)',
+            borderColor: '#1b7ef2',
+        },
+        xAxis: {
+            type: 'category',
+            data: xData,
+            axisLabel: {
+                color: '#FFFFFF',
+                fontSize: 14,
+            },
+            axisLine: {
+                color: '#bac9e1',
+            },
+        },
+        yAxis: {
+            name: '次数',
+            nameTextStyle: {
+                color: '#fff',
+                padding: [0, 0, 0, -15],
+            },
+            type: 'value',
+            axisLabel: {
+                color: '#FFFFFF',
+                fontSize: 14,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    type: 'dashed',
+                    color: 'rgba(217, 231, 255, 0.2)',
+                },
+            },
+            min: 0,
+            max: maxCount(),
+        },
+        series: [
+            {
+                data: ydata,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: '#008CFF' },
+                        { offset: 1, color: '#33CBFE' },
+                    ]),
+                },
+                barMaxWidth: '10',
+                label: {
+                    show: true,
+                    position: 'top',
+                    color: '#33CBFE',
+                    fontWeight: 'normal',
+                },
+            },
+        ],
+    };
+}

src/components/body-d-left/left.api.ts

@@ -1,8 +1,17 @@
-import { get } from '../../api/request';
+import { get } from '/@/api/request';
 
-enum Api {
+export enum Api {
+    departList = '/sys/sysDepart/allSecondaryDeparts',
     server = '/health-emergency/emergency/tblUserHelp/statistics',
+    getDetail = '/health-emergency/emergency/tblHealthData/getDetail',
+    complaint = '/health-emergency/emergency/tblHelpCenter/sicknessTypeStatistic',
 }
 
-export const list = (params) => get(Api.server, params);
+//获取全部部门
+export const getDepart = (params: any) => get(Api.departList, params);
+//服务详情数据
+export const list = (params: any) => get(Api.server, params);
 //主诉分类
+export const complaint = (params: any) => get(Api.complaint, params);
+//体检数据
+export const getDetail = (params: any) => get(Api.getDetail, params);

src/components/body-d-left/oneL.vue

@@ -32,13 +32,15 @@
     const selectIndex = ref(0);
     const selectVal = ref('1');
     const { setSpin, spinning } = useSpin();
+
     onMounted(() => {
         getList();
     });
 
     async function getList() {
+        setSpin(true);
         try {
-            const { code, result } = (await list({ condition: selectVal.value })) || [];
+            const { code, result } = (await list({ condition: selectVal.value })) || {};
             setSpin(!spinning.value);
             if (code != 200) {
                 return;

src/components/body-d-left/threeL.vue

@@ -5,103 +5,110 @@
             <div class="type-time">
                 <span
                     :class="selectIndex === index ? 'select' : 'unSelect'"
-                    v-for="(item, index) in typeTime"
+                    v-for="(item, index) in timeTab"
                     :key="index"
                     @click="handleSelect(index)"
                     >{{ item.name }}</span
                 >
             </div>
             <div class="physical-container">
-                <div class="physical-item">
+                <a-spin :spinning="spinning" class="spin"></a-spin>
-                    <span>10444人</span>
+                <div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">
-                    <span>兴隆圆医院</span>
+                    <div class="ct">
+                        <div class="value">{{ countData[item.key] || '' }}</div>
+                        <div class="label">{{ item.title }}</div>
                     </div>
-                <div class="physical-item">
-                    <span>144人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>344人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>144人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>144人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>144人</span>
-                    <span>延安</span>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-    import { ref } from 'vue';
+    import { onMounted, ref } from 'vue';
     import PublicTitle from '../publicTitle.vue';
-    const typeTime = ref([
+    import { getDetail } from '/@/components/body-d-left/left.api';
-        {
+    import { hospitalList, useSpin, timeTab } from '/@/components/body-d-left/bodyLeftHooks';
-            name: '全部',
+
-            value: 'all',
+    const { setSpin, spinning } = useSpin();
-        },
-        {
-            name: '本年',
-            value: 'year',
-        },
-        {
-            name: '本月',
-            value: 'month',
-        },
-        {
-            name: '本周',
-            value: 'week',
-        },
-    ]);
-    const physical = ref();
     const selectIndex = ref(0);
+
     function handleSelect(index: number) {
         selectIndex.value = index;
+        setSpin(true);
+        setTimeout(() => {
+            setSpin(false);
+        }, 1000);
+    }
+
+    onMounted(() => {
+        getList();
+    });
+
+    const countData = ref({});
+
+    async function getList() {
+        setSpin(true);
+        try {
+            const { code, result } = (await getDetail({})) || {};
+            setSpin(!spinning.value);
+            if (code != 200) {
+                return;
+            }
+            countData.value = result[0] || {};
+            console.log('result', result);
+        } catch {
+            setSpin(!spinning.value);
+        }
     }
 </script>
 <style scoped lang="less">
     .inner {
         height: calc(100% - 40px);
+
         .physical-container {
             width: 96%;
             height: 92%;
-            padding-top: 2%;
+            padding-top: 6%;
             display: flex;
             flex-wrap: wrap;
             align-content: space-around;
+            position: relative;
+
+            .spin {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+            }
+
             .physical-item {
                 width: 33%;
                 height: 46%;
                 color: #ffffff;
                 display: flex;
                 flex-direction: column;
-                span:nth-child(1) {
+
-                    font-size: 22px;
+                .ct {
+                    margin-top: -20px;
+                }
+
+                .value {
+                    font-size: 20px;
                     font-weight: bold;
                 }
-                span:nth-child(2) {
+
-                    font-size: 16px;
+                .label {
+                    font-size: 14px;
                 }
             }
-            .physical-item:nth-child(1),
+
-            .physical-item:nth-child(2),
+            .b1 {
-            .physical-item:nth-child(3) {
                 background: url('../../assets/images/physical-top.png') no-repeat;
-                background-size: 100% 100%;
+                background-size: 95% 95%;
             }
-            .physical-item:nth-child(4),
+
-            .physical-item:nth-child(5),
+            .b2 {
-            .physical-item:nth-child(6) {
                 background: url('../../assets/images/physical-bottom.png') no-repeat;
-                background-size: 100% 100%;
+                background-size: 95% 95%;
             }
         }
     }

src/components/body-d-left/twoL.vue

@@ -5,107 +5,112 @@
             <div class="title">
                 <div class="type-check">
                     <span
-                        :class="selectIndex === index ? 'select' : 'unSelect'"
+                        :class="sexIndex === index ? 'select' : 'unSelect'"
-                        v-for="(item, index) in typeTime"
+                        v-for="(item, index) in sexType"
                         :key="index"
                         @click="handleSelect(index)"
                         >{{ item.name }}</span
                     >
                 </div>
                 <div class="type-all">
-                    <a-select v-model:value="typesSelect" class="type-select">
+                    <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">
                         <a-select-option value="全部数据">全部数据</a-select-option>
-                        <a-select-option value="jack">Jack</a-select-option>
-                        <a-select-option value="lucy">Lucy</a-select-option>
                     </a-select>
                 </div>
             </div>
             <div class="line-chart" ref="chiefChart"></div>
+            <a-spin :spinning="spinning" class="spin"></a-spin>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-    import { ref, onMounted } from 'vue';
+    import { ref, onMounted, watch } from 'vue';
     import PublicTitle from '../publicTitle.vue';
     import * as echarts from 'echarts';
+    import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
+    import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
 
-    const typesSelect = ref('全部数据');
+    const { setSpin, spinning } = useSpin();
-    const typeTime = ref([
+
-        {
+    const sexIndex = ref(0);
-            name: '男',
-            value: 'man',
-        },
-        {
-            name: '女',
-            value: 'women',
-        },
-    ]);
-    const selectIndex = ref(0);
     const chiefChart = ref<HTMLElement>();
+
+    const selectOptions = ref([{ label: '全部数据', value: 'all' }]);
+    const selectValue = ref('all');
+
+    function handleSelect(index: number) {
+        sexIndex.value = index;
+    }
+
     onMounted(() => {
-        let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
+        init();
-        let ydata = [120, 200, 150, 80, 70, 110, 130];
-        initChart(xdata, ydata);
     });
 
+    function init() {
+        getDepartOption();
+        getList();
+    }
+
+    async function getDepartOption() {
+        const { code, result } = await getDepart({});
+        if (code == 200) {
+            const arr = result?.map((item) => ({ ...item, label: item?.departName, value: item?.orgCode }));
+            selectOptions.value = [{ label: '全部数据', value: 'all' }, ...arr];
+        }
+    }
+
+    async function getList() {
+        setSpin(true);
+        try {
+            const searchParams = {
+                sex: sexType[sexIndex.value].value,
+                depart: selectValue.value == 'all' ? '' : selectValue.value,
+            };
+            const { code, result } = (await complaint(searchParams)) || {};
+            setSpin(false);
+            if (code != 200) {
+                return;
+            }
+            if (Array.isArray(result) && result.length == 0) {
+                return EmptyChart();
+            }
+            const xData = result.map((item) => item.name);
+            const yData = result.map((item) => item.count);
+            initChart(xData, yData);
+        } catch {
+            setSpin(false);
+            EmptyChart();
+        }
+    }
+
+    watch([selectValue, sexIndex], () => {
+        getList();
+    });
+
+    function EmptyChart() {
+        initChart([], []);
+    }
+
     function initChart(xData, ydata) {
         let myChart = echarts.init(chiefChart.value);
-        let options = {
+        let options = barOption(xData, ydata);
-            grid: {
-                top: '10%',
-                left: '8%',
-                right: '8%',
-                bottom: '20%',
-            },
-            xAxis: {
-                type: 'category',
-                data: xData,
-                axisLabel: {
-                    color: '#FFFFFF',
-                    fontSize: 14,
-                },
-            },
-            yAxis: {
-                type: 'value',
-                axisLabel: {
-                    color: '#FFFFFF',
-                    fontSize: 14,
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        type: 'dashed',
-                        color: 'rgba(217, 231, 255, 0.2)',
-                    },
-                },
-            },
-            series: [
-                {
-                    data: ydata,
-                    type: 'bar',
-                    barWidth: '20%',
-                    itemStyle: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            { offset: 0, color: '#008CFF' },
-                            { offset: 1, color: '#33CBFE' },
-                        ]),
-                    },
-                },
-            ],
-        };
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();
         });
     }
-
-    function handleSelect(index) {
-        selectIndex.value = index;
-    }
 </script>
 <style scoped lang="less">
     .inner {
+        position: relative;
         height: calc(100% - 40px);
+
+        .spin {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+        }
+
         .title {
             width: 100%;
             display: flex;
@@ -148,15 +153,16 @@
             }
 
             .type-all {
-                width: 18%;
                 color: #ffffff;
+                margin-right: 10px;
 
                 .type-select {
-                    width: 94%;
+                    width: 120px;
                     color: #008cff;
                 }
             }
         }
+
         .line-chart {
             margin: 0 auto;
             width: 96%;
@@ -171,32 +177,40 @@
         border-left: 1px solid #1b7ef2;
         border-bottom: 1px solid #1b7ef2;
     }
+
     .ant-select-item {
         color: #1b7ef2 !important;
     }
+
     //框背景色
     .ant-select:not(.ant-select-customize-input) .ant-select-selector {
         color: #1b7ef2 !important;
         background-color: transparent !important;
         border: 1px solid #1b7ef2 !important;
     }
+
     .ant-select-item-option-selected {
         color: #ffffff !important;
     }
+
     // 选中字体颜色
     .ant-select-selection-item {
         color: #1b7ef2 !important;
     }
+
     .ant-select-item-option-active {
         background-color: transparent !important;
     }
+
     .ant-select-item-option-active:hover {
         background-color: #002e64 !important;
     }
+
     // 箭头颜色
     .ant-select-arrow {
         color: #1b7ef2 !important;
     }
+
     .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
         background-color: #002e64 !important;
     }

src/components/body-d-right/bodyRightHooks.ts

@@ -0,0 +1,96 @@
+import { computed, ref } from 'vue';
+// 列表字段
+export const columns = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        align: 'center',
+        key: 'name',
+    },
+    {
+        title: '单位信息',
+        dataIndex: 'age',
+        align: 'center',
+        key: 'age',
+    },
+    {
+        title: '联系电话',
+        dataIndex: 'address',
+        align: 'center',
+        key: 'address',
+    },
+    {
+        title: '联系电话',
+        dataIndex: 'address1',
+        align: 'center',
+        key: 'address1',
+    },
+    {
+        title: '异常事件',
+        dataIndex: 'address2',
+        align: 'center',
+        key: 'address2',
+    },
+    {
+        title: '异常值',
+        dataIndex: 'address2',
+        align: 'center',
+        key: 'address2',
+    },
+    {
+        title: '发生时间',
+        dataIndex: 'address2',
+        align: 'center',
+        key: 'address2',
+    },
+    {
+        title: '发生地点',
+        dataIndex: 'address2',
+        align: 'center',
+        key: 'address2',
+    },
+];
+
+//大病人数
+export function useHealth() {
+    const healthData = ref([
+        {
+            name: '高危人数',
+            value: '0',
+            type: '1',
+            type_dictText: '恶性肿瘤',
+        },
+        {
+            name: '中危人数',
+            value: '0',
+            type: '2',
+            type_dictText: '其他',
+        },
+        {
+            name: '可控人数',
+            value: '0',
+            type: '3',
+            type_dictText: '其他',
+        },
+    ]);
+    const getValue = computed(() => healthData.value.map((item) => item.value));
+    const getName = computed(() => healthData.value.map((item) => item.name));
+
+    function setHealth(data) {
+        data?.map((item1) => {
+            healthData.value.map((item2) => {
+                if (item1.type == item2.type) {
+                    item2.value = item1.count;
+                }
+            });
+        });
+    }
+
+    return {
+        healthData,
+        getValue,
+        getName,
+        setHealth,
+    };
+}
+

src/components/body-d-right/oneR.vue

@@ -2,13 +2,13 @@
     <div class="terminal-container">
         <public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
         <div class="inner">
-            <vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
+            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
-                <div class="item" v-for="(item, index) in policeLists" :key="index">
+                <div class="item" v-for="item in scrollList" :key="item.id">
-                    <span>{{ item.name }}</span>
+                    <span>{{ item?.realName }}</span>
-                    <span>{{ item.abnormal }}</span>
+                    <span>{{ item?.eventType_dictText }}</span>
                     <div class="time-icon">
-                        <span>{{ item.time }}</span>
+                        <span>{{ item?.warnTime }}</span>
-                        <span class="terminal-icon" @click="handlePolice"></span>
+                        <span class="terminal-icon" @click="handlePolice(item)"></span>
                     </div>
                 </div>
             </vue3-seamless-scroll>
@@ -53,42 +53,16 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref } from 'vue';
+    import { onMounted, ref } from 'vue';
-    import PublicTitle from '../publicTitle.vue';
+    import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
-    import Dialog from '../dialog/Dialog.vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import Dialog from '/@/components/dialog/Dialog.vue';
     import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-    const policeLists = ref([
+    import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
-        {
+
-            name: '陈天宇',
+    const classOption = {
-            abnormal: '压力异常(82)',
+        step: 0.3, // 速度
-            time: '2023-8-25',
+    };
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-    ]);
     const open = ref<boolean>(false);
     const openInfor = ref<boolean>(false);
     const userInfo = ref({
@@ -107,160 +81,41 @@
             age: 32,
             address: '西湖区湖底公园1号',
         },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
     ]);
 
-    const columns = ref([
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            align: 'center',
-            key: 'name',
-        },
-        {
-            title: '单位信息',
-            dataIndex: 'age',
-            align: 'center',
-            key: 'age',
-        },
-        {
-            title: '联系电话',
-            dataIndex: 'address',
-            align: 'center',
-            key: 'address',
-        },
-        {
-            title: '联系电话',
-            dataIndex: 'address1',
-            align: 'center',
-            key: 'address1',
-        },
-        {
-            title: '异常事件',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '异常值',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '发生时间',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '发生地点',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-    ]);
     function handleDialog() {
         open.value = true;
     }
+
     function handleClose() {
         open.value = false;
     }
+
     function handlePolice() {
         openInfor.value = true;
     }
+
     function handlePoliceClose() {
         openInfor.value = false;
     }
+
+    onMounted(() => {
+        getScrollList();
+    });
+
+    /**
+     * @desc 终端报警
+     * */
+    const scrollList = ref([]);
+
+    async function getScrollList() {
+        const { code, result } = await getMonitorList({});
+        if (code == 200) {
+            scrollList.value = result;
+        }
+
+        console.log('dd', result);
+    }
 </script>
 <style scoped lang="less">
     .inner {
@@ -268,23 +123,28 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
         .scroll {
             width: 90%;
             height: 88%;
             overflow: hidden;
+
             .item {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 padding: 3% 0;
+
                 span {
                     color: #ffffff;
                     font-size: 16px;
                 }
+
                 .time-icon {
                     display: flex;
                     align-items: center;
                 }
+
                 .terminal-icon {
                     margin-left: 20px;
                     display: inline-block;
@@ -297,23 +157,28 @@
             }
         }
     }
+
     .dialog-con {
         background-color: #00152b;
         border: 1px solid #129bff;
     }
+
     .police-con {
         color: #ffffff;
         background-color: #00152b;
         border: 1px solid #129bff;
         padding: 2% 0 2% 5%;
+
         .con-item {
             padding: 1.3% 0;
+
             span:nth-child(1) {
                 font-weight: bold;
                 display: inline-block;
                 width: 20%;
                 text-align: right;
             }
+
             span:nth-child(2) {
                 padding-left: 2%;
             }

src/components/body-d-right/right.api.ts

@@ -0,0 +1,12 @@
+import { get } from '/src/api/request';
+
+export enum Api {
+    getMonitorList = '/health-watch/watch/watchMonitorData/getMonitorList',
+    getHealthDataList = '/health-emergency/emergency/tblHealthData/getHealthDataList',
+}
+
+//健康终端报警
+
+export const getMonitorList = (params: any) => get(Api.getMonitorList, params);
+//长庆油田大病人数
+export const getHealthDataList = (params: any) => get(Api.getHealthDataList, params);

src/components/body-d-right/twoR.vue

@@ -5,36 +5,64 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref, onMounted } from 'vue';
+    import { ref, unref, onMounted } from 'vue';
     import * as echarts from 'echarts';
     import PublicTitle from '../publicTitle.vue';
+    import { getHealthDataList } from '/@/components/body-d-right/right.api';
+    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
 
+    const { setSpin, spinning } = useSpin();
     const healthChart = ref<HTMLElement>();
     onMounted(() => {
-        let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
+        // let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
-        let ydata = [120, 200, 150, 80, 70, 110, 130];
+        // let ydata = [120, 200, 150, 80, 70, 110, 130];
-        initChart(xdata, ydata);
+        // initChart(xdata, ydata);
+        init();
     });
-    function initChart(xData, ydata) {
+    const { healthData, getValue, getName, setHealth } = useHealth();
+
+    async function init() {
+        try {
+            const { code, result } = await getHealthDataList();
+            setSpin(true);
+            if (code != 200) {
+                return;
+            }
+            setHealth(result);
+            const yData = unref(getValue);
+            let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+            console.log('yData', yData);
+            initChart(unref(healthData), total);
+        } catch {}
+    }
+
+    function initChart(chartData, total = 0) {
         let myChart = echarts.init(healthChart.value);
         let options = {
             title: {
                 text: '总人数\n',
-                subtext: '1980',
+                subtext: total,
                 x: 'center',
                 y: 'center',
                 textStyle: {
-                    fontSize: 18,
+                    fontSize: 16,
                     color: '#ffffff',
                 },
                 subtextStyle: {
                     color: '#ffffff',
-                    fontSize: 28,
+                    fontSize: 22,
                 },
             },
             color: ['#0098FA', '#0CD9B5', '#3B72AD'],
             tooltip: {
                 trigger: 'item',
+                show: true,
+                textStyle: {
+                    color: '#fff',
+                },
+                backgroundColor: 'rgba(50,50,50,0.7)',
+                borderColor: '#1b7ef2',
             },
             legend: {
                 bottom: '0',
@@ -60,11 +88,7 @@
                     labelLine: {
                         show: false,
                     },
-                    data: [
+                    data: chartData,
-                        { value: 1048, name: '高危人数' },
-                        { value: 735, name: '中危人数' },
-                        { value: 580, name: '可控人数' },
-                    ],
                 },
             ],
         };

src/views/index.vue

@@ -4,8 +4,8 @@
             <div class="title-d-left">
                 {{ dayTimeO }}
             </div>
-            <div class="title-d-middle"> 应急就医服务中心 </div>
+            <div class="title-d-middle"> 应急就医服务中心</div>
-            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }} </div>
+            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
         </div>
         <div class="body-d">
             <div class="body-d-left">
@@ -35,8 +35,10 @@
     import ThreeR from '../components/body-d-right/threeR.vue';
     import ChinaMap from '../components/chinaMap/chinaMap.vue';
     import * as dayjs from 'dayjs';
+
     const dayTimeO = ref();
     const dayTimeT = ref();
+
     function init() {
         getTime();
         setInterval(() => {
@@ -47,7 +49,7 @@
     function getTime() {
         dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
         dayTimeT.value =
-            dayjs().diff(dayjs('2020-01-01'), 'day') +
+            dayjs().diff(dayjs('2018-10-01'), 'day') +
             '天' +
             getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
             '时' +
@@ -136,6 +138,7 @@
                 padding: 10px;
             }
         }
+
         .body-d-middle {
             display: flex;
             flex-direction: column;