From 35c5625e1bcf23fc3018bad7b05a8aa66b9274b7 Mon Sep 17 00:00:00 2001
From: wx <645899409@qq.com>
Date: Mon, 21 Apr 2025 10:24:47 +0800
Subject: [PATCH] =?UTF-8?q?update=201.=E6=B7=BB=E5=8A=A0=E5=BA=86=E9=98=B3?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/chart-icon-active.png       | Bin 0 -> 1178 bytes
 src/assets/images/chart-icon.png              | Bin 0 -> 1183 bytes
 src/assets/images/list-icon-active.png        | Bin 0 -> 1262 bytes
 src/assets/images/list-icon.png               | Bin 0 -> 1311 bytes
 src/components/dialog/Dialog.vue              |  46 +++-
 src/views/centralScreen/centralScreen.api.ts  |  12 +
 src/views/centralScreen/centralScreenD.vue    |   1 +
 .../centralScreen/centralScreenYinChuan.vue   |   1 +
 .../components/centralScreenDHook.ts          |  67 +++++
 .../components/serviceDetails.vue             |   6 +
 .../components/terminalAlarmDialog.vue        | 232 +++++++++++++++++-
 src/views/components/employeeDialog.vue       |   5 +
 12 files changed, 346 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/images/chart-icon-active.png
 create mode 100644 src/assets/images/chart-icon.png
 create mode 100644 src/assets/images/list-icon-active.png
 create mode 100644 src/assets/images/list-icon.png
 create mode 100644 src/views/centralScreen/components/centralScreenDHook.ts

diff --git a/src/assets/images/chart-icon-active.png b/src/assets/images/chart-icon-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..05ffda14c74cab6825ec3befc4b821bb67c2edcd
GIT binary patch
literal 1178
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1SIoCSFHz9k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+nAI{vB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!ovP&e7Yz(~Q|QqSBX
z$=uA?BGpVs!N|bKRNufz-_TIk$k@uz1c(%%KnZAJQA(Oskc%7CIv~$hDWjyMz)D}g
zyu4hm+*mKaC|%#s($W%ShLMpjP=#)BWnM{Qg>GK4GRy>*)Z*l#%z~24{5%DaiHS-1
zr6smXK*vISky`*aHm?{OQou0NuShJ=H`Fr#`3k1c*B8Ii++4Wo;*y|LgnO|XTpUta
zkg6Y)TAW{6lnji!G-Z%g1y;^Qsfi`|MIrh5Ik12X$jC3rFV4s>P%tvnGgZ(C&&*57
zFE7>vYw-28^2{qPNz6-5^>ndS0ve&0nVDkcWNu+%XzXfa=xAnUXy|6(WM*dK;$m*#
zWNu>M;%aCN)9aF-T$-DjR|3<Ug3xP>Q!gkv<Q4#Jc1bPDEK5ysE6UGR0Q=c06SrFo
zaGD3zn}XXdhB)==10ACeidm$Xh6w?a4~Pj*x<C#*@u%hiQ+yFHY5zE}WeNiWBbTR(
zV@SoVq(A@v+cTRo2s2MTU|`n4+JEP}y!{&6#q;;q@TPQkbIIS{IH!AZvyAxO%HNDh
zTmpM){(gJAo8Q^I$EZvCT-+YE6ps#0{kb=t_c=;$f8T5{&!)QY?K9a-&qA$=xA*tg
zhjiDiS>````=6_?w>xZGI4^9$cJ7&MbNAQm-I}i!qHb)w$#KciTj%HRfAGe>{{JOA
zSwkbELpNn)-mF=pA(x(-n3kUI%)(`CeD1)z{FOVZ9-C>TcXmp=$S^Q8EWILnckh1=
zjYS&z+KPHwYFaU|Q}{S@lxuTE+!dxz;EfHIx2y7668|J+snqG>4bmx3BzVp*WocZp
n<HgRu*&C%zqOK&dGBC0+B*@2?yGV7*fl3QcS3j3^P6<r_Ws{5i

literal 0
HcmV?d00001

diff --git a/src/assets/images/chart-icon.png b/src/assets/images/chart-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ce2facd090d54238864c5124f6f0aa769a4bb97
GIT binary patch
literal 1183
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1SIoCSFHz9k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+nAI{vB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!ovP&e7Yz(~Q|QqSBX
z$=uA?BGpVs!N|bKRNufz-_TIk$k@uz1c(%%KnZAJQA(Oskc%7CIv~$hDWjyMz)D}g
zyu4hm+*mKaC|%#s($W%ShLMpjP=#)BWnM{Qg>GK4GRy>*)Z*l#%z~24{5%DaiHS-1
zr6smXK*vISky`*aHm?{OQou0NuShJ=H`Fr#`3k1c*B8Ii++4Wo;*y|LgnO|XTpUta
zkg6Y)TAW{6lnji!G-Z%g1y;^Qsfi`|MIrh5Ik12X$jC3rFV4s>P%tvnGgZ(C&&*57
zFE7>vYw-28^2{qPNz6-5^>ndS0ve&0nVDkcWNu+%Xzb!@=xAnUXy|6(WM*dK;$m*#
zWNu;r6g7tFb;(aI%}vcKf$2>_=yk)X7nB@w3xGDeq!wkCrKY$Q<>xAZ{cM$q)h*_(
zmIfxyIL(9VO~L9GuwECOdi8;h(FesWQcS~yfXN5MgeP4f2cGy-^MEP72$;0_z6O71
zU|{6;ba4!+xRuo7qnoyXYeAQzgYyiD6)bG?9d#<6%!rJrJtVYqM`h!i_xJbZMOuD8
zKmY!d9UaY+g_F1h7$V=ynd5BUvu18>%TX0a#ZO;PH_E;~VeaAQDSPO_vxmYWVt;=<
z6%O5V%wy||<4I=9i<iyQWEVG|@b}x*&+X;;6EY`kSkba?rf$pM|M%@vnmxKr)zVsy
z_W1aG@pZ5N|L^Db@A8{Y*em?_&3=xxiZ?xBzReD2hX|fIoA>Rh{`=_v|NrTI?;buC
zXX>i?_d{;Rj=GxPRUfY;RwO(&>4^83GJ87zl)j3eIWd1HENxH{GWw*E_wT=a`kIrP
zD-RZHI(~Tj`gyTBUxInY<4uu=*R(A0a%B=oV3>72=KET^DjiUf;pyt<vd$@?2>|A?
BqG<pC

literal 0
HcmV?d00001

diff --git a/src/assets/images/list-icon-active.png b/src/assets/images/list-icon-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3776eb13ffb3af91538ce5a1f2611fa8de86db9
GIT binary patch
literal 1262
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1SIoCSFHz9k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+nAI{vB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!ovP&e7Yz(~Q|QqSBX
z$=uA?BGpVs!N|bKRNufz-_TIk$k@uz1c(%%KnZAJQA(Oskc%7CIv~$hDWjyMz)D}g
zyu4hm+*mKaC|%#s($W%ShLMpjP=#)BWnM{Qg>GK4GRy>*)Z*l#%z~24{5%DaiHS-1
zr6smXK*vISky`*aHm?{OQou0NuShJ=H`Fr#`3k1c*B8Ii++4Wo;*y|LgnO|XTpUta
zkg6Y)TAW{6lnji!G-Z%g1y;^Qsfi`|MIrh5Ik12X$jC3rFV4s>P%tvnGgZ(C&&*57
zFE7>vYw-28^2{qPNz6-5^>ndS0ve&0nVDkcWNz+iX<*`L=xAnUXy|6(WM*dK;$m*#
zWNu>M;%aCN)9aF-T$-DjR|3<Ug3#-PQ!gkv<Q4#Jc1bPDEK5ysE6UGR0Q=c06SrF|
zaGD3zn}XXdmN@n510ACeidm$Xh6w?a4~Pj*x<C#*@u%hiQ+yFHX}|Yt(q&*^jPrDH
z45_%4^ymM7duCGxVdkj^49q%MX9~}ZD*A9EGfwWE>1Xv9Su1Vpf8H|Id3$wsc|_^0
z=$U%+?>66cbqH>F@?1aOf6h*hl$bq5%+oasj^5y9+QoWEK;!}YB&Q~(ia$)@Jd8aj
zUcR_=b+-EXIHp-bFWw$H!?P**_B?0*`FoFKP1w0{-n?yAWz8$ZZpho!?J9dcZvw;q
zwpB_lPYx<CXpT$1x^n3<l>_J7@4AY;6YQU7!)_$z`?_G`_C0m4=S6#by1)Pb1}PPF
z<;tYzTyGkA4Ouzf+1D_s0FCN8Es}CHf+uLg<TisTqE8!^EZW1Pa$+OXjwGG9-(P;7
z-a5OywUs4g>XV1p>?-?Iug#E<+<Il|&x*<nnd~V`ltr4ICUZ6ZWIn|Av6xwE)};7u
z_0;<|J9(=U4*ORAf2cg?2<wBcjS?(pE(omF@%hro!z}At7?>Et<|q<uzoES_kXs;u
YVbhP<F(PZVl0hYqr>mdKI;Vst07SXDaR2}S

literal 0
HcmV?d00001

diff --git a/src/assets/images/list-icon.png b/src/assets/images/list-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..98dc7d4e203d5c2175d5bdba2de62178056b5eab
GIT binary patch
literal 1311
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1SIoCSFHz9k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+nAI{vB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!ovP&e7Yz(~Q|QqSBX
z$=uA?BGpVs!N|bKRNufz-_TIk$k@uz1c(%%KnZAJQA(Oskc%7CIv~$hDWjyMz)D}g
zyu4hm+*mKaC|%#s($W%ShLMpjP=#)BWnM{Qg>GK4GRy>*)Z*l#%z~24{5%DaiHS-1
zr6smXK*vISky`*aHm?{OQou0NuShJ=H`Fr#`3k1c*B8Ii++4Wo;*y|LgnO|XTpUta
zkg6Y)TAW{6lnji!G-Z%g1y;^Qsfi`|MIrh5Ik12X$jC3rFV4s>P%tvnGgZ(C&&*57
zFE7>vYw-28^2{qPNz6-5^>ndS0ve&0nVDkcWNz+iX<%Yz=xAnUXy|6(WM*dK;$m*#
zWNu>M;%aCN)9aF-T$-DjR|3<Ug3xP@Q!gkv<Q4#Jc1bPDEK5ysE6UGR0Q=c06SrGT
zaGD3zn}XXdra1NL10ACeidm$Xh6w?a4~Pj*x<C#*@u%hiQ+yFHX$z>fi83%S_ItWG
zhE&{2>haM{TfnuT%hADkhQtaMw)u`aCuH2uCvZx(-rryM_U^7%e`imRxwGdT<3*X6
zI}xS(Dn2Fr|F-o;EQ<-N$EHmiJ3UV@NIETgw8N)S`&gd91zmw-=jY#deA55E;tx}J
z&(ZAP+tvw9oxnKj(}#1V3g5qWFLy7?fAr|#;j9a<#r+GUzPvl@t>7e9`R9R|W#idn
z=M)uGxV~IG{ykqoX-^H)oI86WO6w}V|GIu&{swOmf6v2*PuY$5-o^ZXbJ3PjQLul3
zg`1n(8n)V>e+oZ$S>9llPU5<u*rcF0pFuBpf@regi_gpX1&%H6fA4Uo|NZ~}|NBoX
z>`2myyS=rpvth%F{`dFoY8fQIeEfS`SNr*+j;;UY@9jI5d0~CLeY|ablbC>mOVJw6
z&W^*E1&;)8;#yU4Nw6r&(eT7cYn~bQ3UAoAuV>`lTKM(w<W1Lg=JeQZc(`oC=Hey~
zK0cc|U}z)>7&tqxsbcl}mmk0X$G^AQdd&)58>@MDMldwJkKdmYVU_GLeL~1e4+bV4
YhHX-7I3{P>DT0bDPgg&ebxsLQ02W@_BLDyZ

literal 0
HcmV?d00001

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 4dcf2e0..04cda2b 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -1,16 +1,37 @@
 <template>
-    <a-modal
-        :class="['dialog', themeType]"
-        v-model:visible="props.openVis"
-        :title="props.title"
-        :width="props.width"
-        :maskClosable="true"
-        @cancel="handleCancel"
-        destroy-on-close
-    >
-        <slot name="container"></slot>
-        <template #footer></template>
-    </a-modal>
+    <template v-if="props.title">
+        <a-modal
+            :class="['dialog', themeType]"
+            v-model:visible="props.openVis"
+            :title="props.title"
+            :width="props.width"
+            :maskClosable="true"
+            @cancel="handleCancel"
+            destroy-on-close
+        >
+            <template #title>
+                <slot name="modalTitle"></slot>
+            </template>
+            <slot name="container"></slot>
+            <template #footer></template>
+        </a-modal>
+    </template>
+    <template v-else>
+        <a-modal
+            :class="['dialog', themeType]"
+            v-model:visible="props.openVis"
+            :width="props.width"
+            :maskClosable="true"
+            @cancel="handleCancel"
+            destroy-on-close
+        >
+            <template #title>
+                <slot name="modalTitle"></slot>
+            </template>
+            <slot name="container"></slot>
+            <template #footer></template>
+        </a-modal>
+    </template>
 </template>
 
 <script setup lang="ts">
@@ -26,6 +47,7 @@
         },
         title: {
             type: String,
+            default: () => '',
         },
     });
     const { themeType } = useTheme();
diff --git a/src/views/centralScreen/centralScreen.api.ts b/src/views/centralScreen/centralScreen.api.ts
index 9458936..6b0b63d 100644
--- a/src/views/centralScreen/centralScreen.api.ts
+++ b/src/views/centralScreen/centralScreen.api.ts
@@ -9,6 +9,8 @@ enum Api {
     medicalCenterNew = '/health-emergency/emergency/LargeScreenNew/medicalCenterNew',
     userHealthCenterNew = '/health-emergency/emergency/LargeScreenNew/userHealthCenterNew',
     getAllList = '/health-emergency/emergency/LargeScreenNew/getAllListNew',
+    monitorTotal = '/health-watch/api/watch/screen/monitor/stats/total',
+    monitorMonth = '/health-watch/api/watch/screen/monitor/stats/month',
 }
 
 /**
@@ -58,3 +60,13 @@ export const getMonitorList = (params: any) => {
  * @param params
  */
 export const getMapListApi = (params: any) => post(Api.getAllList, params);
+/**
+ * @description 获取健康终端日周月统计数据
+ * @param params
+ */
+export const monitorTotalApi = (params: any) => get(Api.monitorTotal, params);
+/**
+ * @description 获取健康终端echart数据
+ * @param params
+ */
+export const monitorMonthApi = (params: any) => get(Api.monitorMonth, params);
diff --git a/src/views/centralScreen/centralScreenD.vue b/src/views/centralScreen/centralScreenD.vue
index cbf1d1e..08945c4 100644
--- a/src/views/centralScreen/centralScreenD.vue
+++ b/src/views/centralScreen/centralScreenD.vue
@@ -62,6 +62,7 @@
         <TerminalAlarmDialog
             ref="terminalAlarmDialogRef"
             :setting="setting"
+            title=""
             :time-interval="{ startDate: dayjs().format('YYYY-MM-DD'), endDate: dayjs().format('YYYY-MM-DD') }"
         />
     </div>
diff --git a/src/views/centralScreen/centralScreenYinChuan.vue b/src/views/centralScreen/centralScreenYinChuan.vue
index 9af2190..dc3b9ce 100644
--- a/src/views/centralScreen/centralScreenYinChuan.vue
+++ b/src/views/centralScreen/centralScreenYinChuan.vue
@@ -19,6 +19,7 @@
                         theme="dark"
                         :refreshState="refreshState"
                         :setting="setting"
+                        :is-show="false"
                         class="service-details"
                         @handleClick="handlePhoneDialog"
                     />
diff --git a/src/views/centralScreen/components/centralScreenDHook.ts b/src/views/centralScreen/components/centralScreenDHook.ts
new file mode 100644
index 0000000..7c289c9
--- /dev/null
+++ b/src/views/centralScreen/components/centralScreenDHook.ts
@@ -0,0 +1,67 @@
+let dataX: any[] = [];
+let dataY: any[] = [];
+
+function setData(dX, dY) {
+    dataX = dX;
+    dataY = dY;
+}
+
+function getOption() {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            formatter: (params: any) => {
+                console.log(params);
+                let p = params[0];
+                return `${p?.name}月: ${p?.value}次`;
+            },
+        },
+        xAxis: {
+            type: 'category',
+            data: dataX,
+            axisLine: {
+                lineStyle: {
+                    color: '#0d2137',
+                },
+            },
+            axisTick: {
+                lineStyle: {
+                    color: 'transparent', // X轴刻度线的颜色
+                },
+            },
+            axisLabel: {
+                color: '#ffffff', // X轴标签文字的颜色
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: '#ffffff',
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#0d2137', // 设置Y轴分割线的颜色为红色
+                },
+            },
+        },
+        series: [
+            {
+                data: dataY,
+                type: 'bar',
+                barWidth: 10,
+                color: '#0a50a0',
+                splitLine: {
+                    lineStyle: {
+                        color: '#0d2137', // 设置Y轴分割线的颜色为红色
+                    },
+                },
+            },
+        ],
+    };
+}
+
+export function useE() {
+    return { setData, getOption };
+}
diff --git a/src/views/centralScreen/components/serviceDetails.vue b/src/views/centralScreen/components/serviceDetails.vue
index 69335c1..16bafdd 100644
--- a/src/views/centralScreen/components/serviceDetails.vue
+++ b/src/views/centralScreen/components/serviceDetails.vue
@@ -49,6 +49,10 @@
         theme: {
             type: String,
         },
+        isShow: {
+            type: Boolean,
+            default: () => true,
+        },
     });
     const emit = defineEmits(['handleClick']);
     const typeTime = ref(timeTab);
@@ -99,6 +103,8 @@
     }
 
     function handleClick(item) {
+        // 下面这行是为了检查的时候，不让点击查看最新受理电话功能，只针对银川大屏
+        // if (!props.isShow && item.key === 'alerdyreceive') return;
         emit('handleClick', item);
     }
 
diff --git a/src/views/centralScreen/components/terminalAlarmDialog.vue b/src/views/centralScreen/components/terminalAlarmDialog.vue
index 4cf5a34..2292b01 100644
--- a/src/views/centralScreen/components/terminalAlarmDialog.vue
+++ b/src/views/centralScreen/components/terminalAlarmDialog.vue
@@ -1,26 +1,78 @@
 <template>
-    <Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
+    <Dialog :openVis="visible" width="50%" :title="props.title" @close="closeDialog" :maskClosable="false">
+        <template #modalTitle>
+            <div class="modal-title-d">
+                健康终端报警列表
+                <div>
+                    <div @click="changeChoose(0)" :class="[chooseType === 0 ? 'select-d' : 'no-select-d']">
+                        <img :src="chooseType === 0 ? listSPng : listPng" alt="" /> 列表
+                    </div>
+                    <div @click="changeChoose(1)" :class="[chooseType === 1 ? 'select-d' : 'no-select-d']">
+                        <img :src="chooseType === 1 ? chartSPng : chartPng" alt="" /> 图表
+                    </div>
+                </div>
+            </div>
+        </template>
         <template #container>
-            <BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
-                <template #address="{ record, column, index }">
-                    <span v-if="record['address']">{{ record?.address }}</span>
-                    <span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
-                </template>
-            </BasicTable>
+            <template v-if="chooseType === 0">
+                <BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
+                    <template #address="{ record, column, index }">
+                        <span v-if="record['address']">{{ record?.address }}</span>
+                        <span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
+                    </template>
+                </BasicTable>
+            </template>
+            <template v-else>
+                <div style="padding: 0 10px">
+                    <div class="chart-top">
+                        <div>
+                            <div>{{ dayInfo?.dayCount || 0 }}次</div>
+                            <div>日累计</div>
+                        </div>
+                        <div>
+                            <div>{{ dayInfo?.weekCount || 0 }}次</div>
+                            <div>周累计</div>
+                        </div>
+                        <div>
+                            <div>{{ dayInfo?.monthCount || 0 }}次</div>
+                            <div>月累计</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="time-d">
+                    <left-outlined @click="changeMonth(0)" class="left-or-right" />
+                    <span style="user-select: none; margin: 0 10px">{{ dayjs(nowTime).format('YYYY年M月') }}</span>
+                    <right-outlined @click="changeMonth(1)" class="left-or-right" />
+                </div>
+                <div ref="chartRef" style="height: 50vh"></div>
+            </template>
         </template>
     </Dialog>
 </template>
 <script setup lang="ts">
-    import { computed, ref, watch, h } from 'vue';
+    import { computed, ref, watch, h, nextTick } from 'vue';
+    import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
     import Dialog from '/@/components/dialog/Dialog.vue';
     import { useDialog } from '/@/views/components/dialogHooks.ts';
     import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { getMonitorList } from '/@/views/centralScreen/centralScreen.api.ts';
+    import { getMonitorList, monitorMonthApi, monitorTotalApi } from '/@/views/centralScreen/centralScreen.api.ts';
     import { useUserStore } from '/@/store/modules/user.ts';
+    import listSPng from '/@/assets/images/list-icon-active.png';
+    import listPng from '/@/assets/images/list-icon.png';
+    import chartSPng from '/@/assets/images/chart-icon-active.png';
+    import chartPng from '/@/assets/images/chart-icon.png';
+    import * as echarts from 'echarts';
+    import { useE } from '/@/views/centralScreen/components/centralScreenDHook.ts';
+    import dayjs from 'dayjs';
+
+    const { setData, getOption } = useE();
 
     const props = defineProps({
         record: Object,
-        title: String,
+        title: {
+            type: String,
+            default: () => '健康终端报警列表',
+        },
         useForm: Boolean,
         labelCol: Object,
         wrapperCol: Object,
@@ -32,6 +84,13 @@
         },
     });
 
+    const dayInfo = ref<any>({});
+    const dataX = ref<any[]>([]);
+    const dataY = ref<any[]>([]);
+
+    const chooseType = ref(0);
+    const nowTime = ref<any>(dayjs().format('YYYY-M'));
+
     const columns = [
         {
             title: '姓名',
@@ -63,6 +122,11 @@
             dataIndex: 'warnTime',
             key: 'warnTime',
         },
+        {
+            title: '上报时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+        },
         {
             title: '发生地点',
             dataIndex: 'address',
@@ -78,13 +142,14 @@
         },
     ];
     const userStore = useUserStore();
+    const chartRef = ref();
 
-    console.log(props.timeInterval);
     const formState = computed(() => ({
         dataType: props.setting.dataType,
         // orgCode: props.setting?.orgCode,
         orgCodeList: userStore.getCenterInfo?.serviceScope,
     }));
+
     // const formState = ref({
     //     dataType: props.setting?.dataType,
     //     // orgCode: props.setting?.orgCode,
@@ -96,12 +161,155 @@
     // watch(props, (v, o) => {
     //     registerTable.value?.getRecords();
     // });
+
+    function changeChoose(type: any) {
+        if (type === chooseType.value) return;
+        chooseType.value = type;
+        if (chooseType.value === 1) {
+            nowTime.value = dayjs().format('YYYY-M');
+            // nextTick(() => {
+            //     getEcharts();
+            // });
+            getDayAndMonthAndYear();
+            getEchart();
+        }
+    }
+
+    function getDayAndMonthAndYear() {
+        monitorTotalApi({ orgCodeList: userStore.getCenterInfo?.serviceScope })
+            .then((res: any) => {
+                if (res.code === 200) {
+                    dayInfo.value = res?.result;
+                }
+            })
+            .catch((e) => {
+                console.log(e);
+            });
+    }
+    function getEchart() {
+        const y = dayjs(nowTime.value).format('YYYY');
+        const m = dayjs(nowTime.value).format('M');
+        monitorMonthApi({ orgCodeList: userStore.getCenterInfo?.serviceScope, year: y, month: m })
+            .then((res: any) => {
+                if (res.code === 200) {
+                    let d1: any[] = [];
+                    let d2: any[] = [];
+                    res?.result &&
+                        res?.result.map((item: any) => {
+                            d1.push(item?.day);
+                            d2.push(parseInt(item?.count || 0));
+                        });
+                    dataX.value = d1;
+                    dataY.value = d2;
+                }
+            })
+            .catch((e) => {
+                console.log(e);
+            })
+            .finally(() => {
+                getEcharts();
+            });
+    }
+
+    function changeMonth(type: any) {
+        if (type === 0) {
+            nowTime.value = dayjs(nowTime.value).subtract(1, 'month');
+        } else {
+            if (dayjs().diff(nowTime.value, 'month') !== 0) {
+                nowTime.value = dayjs(nowTime.value).add(1, 'month');
+            } else {
+                return;
+            }
+        }
+        getEchart();
+    }
+
+    function getEcharts() {
+        const c = echarts.init(chartRef.value);
+        setData(dataX.value, dataY.value);
+        c.setOption(getOption());
+        window.addEventListener('resize', () => {
+            c.resize();
+        });
+    }
+
+    function openDialogBefore() {
+        chooseType.value = 0;
+        nowTime.value = dayjs().format('YYYY-M');
+        openDialog();
+    }
+
     defineExpose({
-        openDialog,
+        openDialog: openDialogBefore,
     });
 </script>
 <style scoped lang="less">
     .table-container {
         margin: 0 10px;
     }
+
+    .modal-title-d {
+        width: calc(100% - 52px);
+        display: flex;
+        justify-content: space-between;
+
+        > div {
+            display: flex;
+
+            > div {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                font-weight: normal;
+                font-size: 14px;
+
+                &:nth-child(1) {
+                    margin-right: 30px;
+                }
+            }
+        }
+
+        img {
+            height: 80%;
+            margin-right: 8px;
+        }
+
+        .no-select-d {
+            color: #576371;
+        }
+
+        .select-d {
+            color: #ffffff;
+        }
+    }
+
+    .chart-top {
+        display: flex;
+        justify-content: space-around;
+        padding: 30px 0;
+        border-bottom: 1px solid #0d2238;
+        text-align: center;
+
+        > div {
+            > div {
+                &:nth-child(1) {
+                    font-size: 32px;
+                    font-weight: bold;
+                }
+                &:nth-child(2) {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+
+    .time-d {
+        padding: 30px 0 0;
+        text-align: center;
+        font-size: 16px;
+    }
+
+    .left-or-right {
+        cursor: pointer;
+    }
 </style>
diff --git a/src/views/components/employeeDialog.vue b/src/views/components/employeeDialog.vue
index 84e6edb..3a4cbf8 100644
--- a/src/views/components/employeeDialog.vue
+++ b/src/views/components/employeeDialog.vue
@@ -22,6 +22,10 @@
                 </div>
                 <div class="con-item">
                     <span>发生时间：</span>
+                    <span>{{ userInfo?.createDate }}</span>
+                </div>
+                <div class="con-item">
+                    <span>上报时间：</span>
                     <span>{{ userInfo?.warnTime }}</span>
                 </div>
                 <div class="con-item">
@@ -46,6 +50,7 @@
     watch(
         () => props.record,
         (nVal) => {
+            console.log('健康报警');
             userInfo.value = nVal;
         }
     );