update

1.添加庆阳大屏柱状图

src/components/dialog/Dialog.vue

@@ -1,16 +1,37 @@
 <template>
-    <a-modal
+    <template v-if="props.title">
-        :class="['dialog', themeType]"
+        <a-modal
-        v-model:visible="props.openVis"
+            :class="['dialog', themeType]"
-        :title="props.title"
+            v-model:visible="props.openVis"
-        :width="props.width"
+            :title="props.title"
-        :maskClosable="true"
+            :width="props.width"
-        @cancel="handleCancel"
+            :maskClosable="true"
-        destroy-on-close
+            @cancel="handleCancel"
-    >
+            destroy-on-close
-        <slot name="container"></slot>
+        >
-        <template #footer></template>
+            <template #title>
-    </a-modal>
+                <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();

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

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>

src/views/centralScreen/centralScreenYinChuan.vue

@@ -19,6 +19,7 @@
                         theme="dark"
                         :refreshState="refreshState"
                         :setting="setting"
+                        :is-show="false"
                         class="service-details"
                         @handleClick="handlePhoneDialog"
                     />

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

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

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 v-if="chooseType === 0">
-                <template #address="{ record, column, index }">
+                <BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
-                    <span v-if="record['address']">{{ record?.address }}</span>
+                    <template #address="{ record, column, index }">
-                    <span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
+                        <span v-if="record['address']">{{ record?.address }}</span>
-                </template>
+                        <span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
-            </BasicTable>
+                    </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>

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