update

package.json

@@ -13,6 +13,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
+    "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "path": "^0.12.7",
     "prettier": "^3.1.0",

src/assets/mapUtils/commonFun.ts

@@ -1,4 +1,5 @@
 import { mapIcon1, mapIcon2, mapIcon3, mapIcon4 } from '/@/components/chinaMap/chinaHooks.ts';
+import { watchIcon } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
 
 /**
  * @desc 创建icon
@@ -33,6 +34,9 @@ export function typeToIcon(type: string) {
     if (type == '4') {
         return createIcon({ icon: mapIcon3, iconSize, imageSize });
     }
+    if (type == '6') {
+        return createIcon({ icon: watchIcon, iconSize: [21, 44], imageSize: [21, 44] });
+    }
 }
 
 /**

src/assets/mapUtils/map.ts

@@ -2,6 +2,7 @@ import china from '/@/assets/lngLat/china.ts';
 import chinaInner from '/@/assets/lngLat/chinaInner.ts';
 import { createCircle, createIcon, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
 import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts';
+import { isFunction } from '/@/utils/is.ts';
 
 export const defaultOption = {
     center: [106.3, 37.87], //地图中心点
@@ -87,7 +88,7 @@ export const Map = {
      * @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
      * @param result
      */
-    createOverlay(result) {
+    createOverlay(result, { extOption = {}, content }, callback) {
         this.removeOverlayGroup();
         this.overlayGroup = new AMap.OverlayGroup();
         for (let i = 0; i < result.length; i++) {
@@ -104,10 +105,12 @@ export const Map = {
                 icon: startIcon, //启用点击事件 如果需要点击事件，必须开启
                 clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
                 extData: result[i],
+                label: {
+                    content: isFunction(content) && content(result[i]),
+                },
+                ...extOption,
             });
             // 可以调用setExtData（）设置自定义属性
-            //startMarker.setExtData('222')
-
             //将组 挂载到地图上
             this.overlayGroup.setMap(this.map);
             //将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
@@ -115,10 +118,10 @@ export const Map = {
         }
 
         this.overlayGroup.on('click', function (e) {
-            //e.target触发事件的点对象
-            console.log(e.target);
             //拿到点中携带的数据
-            console.log(e.target.getExtData());
+            // console.log(e.target.getExtData());
+            if (!isFunction(callback)) return;
+            callback(e.target.getExtData());
         });
     },
     clearOverlay() {

src/components/secondaryScreen/secondMap/components/footerDialog.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="modal-content">
+        <div class="empty-png"></div>
+        <div class="modal-header">
+            <button type="button" aria-label="Close" class="modal-close">X</button>
+            <div class="modal-title" id="vcDialogTitle0">健康报警员工信息</div>
+        </div>
+        <div class="modal-body">
+            <div class="info-left">
+                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+            </div>
+            <div class="info-right">
+                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts"></script>
+
+<style scoped lang="less">
+    .modal-content {
+        position: relative;
+        //background-clip: padding-box;
+        border: 0;
+        border-radius: 2px;
+
+        .empty-png {
+            width: 100%;
+            height: 16px;
+            background: url('../../../../assets/images/bg.png') no-repeat;
+            background-position-y: -500px;
+        }
+
+        .modal-close {
+            position: absolute;
+            top: 10px;
+            right: 6px;
+            z-index: 10;
+            padding: 0;
+            color: #999999;
+            font-weight: 700;
+            background: transparent;
+            border: 0;
+            outline: 0;
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+
+        .modal-header {
+            color: rgba(0, 0, 0, 0.85);
+            background: #283545;
+            border-radius: 2px 2px 0 0;
+            position: relative;
+
+            .modal-title {
+                margin: 0;
+                color: rgba(0, 0, 0, 0.85);
+                font-weight: 500;
+                font-size: 16px;
+                line-height: 22px;
+                word-wrap: break-word;
+                position: relative;
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: 40px;
+                background: url('../../../../assets/images/dialog.png') no-repeat;
+                background-size: 100% 100%;
+                color: #ffffff !important;
+                padding-left: 2%;
+            }
+        }
+
+        .modal-body {
+            min-height: 150px;
+            font-size: 14px;
+            line-height: 1.5715;
+            word-wrap: break-word;
+            color: #ffffff;
+            background-color: #00152b;
+            border: 1px solid #129bff;
+            padding: 2% 0 2% 5%;
+            display: flex;
+
+            div {
+                flex: 1;
+                line-height: 28px;
+
+                .info-label {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+</style>

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -2,29 +2,109 @@
     <div class="center-map">
         <div class="china-map-box">
             <div class="form-container">
+                <button @click="test">点击</button>
                 <slot name="rightForm"></slot>
             </div>
-            <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px; height: 100%">
                 <div id="mapContainer" class="mapContainer"></div>
             </div>
             <div v-show="false" id="container"></div>
             <div v-show="false" id="panel"></div>
+            <div class="footer-data" v-show="true">
+                <div class="empty-png"></div>
+                <div class="col-item" v-for="item in footerList">
+                    <div class="col-text">{{ item?.name }}</div>
+                    <div class="col-value">{{ item?.value }}</div>
+                </div>
+            </div>
+            <div class="footer-dialog-con" v-show="false" :class="show ? 'slide-top' : 'slide-bottom'">
+                <FooterDialog></FooterDialog>
+            </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, watch } from 'vue';
     import { message } from 'ant-design-vue';
     import { Map } from '/@/assets/mapUtils/map';
+    import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
+    import { useFooterTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    import { footerApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
+    import { getToday } from '/@/utils/utils.ts';
+
+    const show = ref(false);
+
+    function test() {
+        show.value = !show.value;
+    }
+
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
 
     async function getMapData(type, params = {}) {}
 
+    const markerList = [
+        {
+            lon: 109.42,
+            lat: 33.9,
+            type: '6',
+            name: '第一采油厂',
+        },
+        {
+            lon: 106.59,
+            lat: 34.93,
+            type: '6',
+            name: '第二采油厂',
+        },
+        {
+            lon: 109.42,
+            lat: 31.9,
+            type: '6',
+            name: '第三采油厂',
+        },
+    ];
     onMounted(() => {
-        initMap();
+        init();
+        getFooterTable();
     });
 
-    function initMap() {
+    function init() {
         Map.initMap({ el: 'mapContainer' });
+        Map.createOverlay(
+            markerList,
+            {
+                content: function (val) {
+                    return `<div style="color: red;
+                                width: 21px;
+                                height: 44px;
+                                position: absolute;
+                                left: -20px;
+                                top: -20px;" title="${val.name}">
+                            </div>`;
+                },
+            },
+            (val) => {
+                console.log('info', val);
+            }
+        );
+    }
+
+    const { footerList, setFooterList } = useFooterTable();
+    watch(props, () => {
+        getFooterTable();
+    });
+
+    async function getFooterTable() {
+        const params = {
+            orgCode: 'A01A01' || props.orgCode,
+            // dataDate: getToday(),
+        };
+        const { code, result } = await footerApi(params);
+        if (code == 200) {
+            setFooterList(result.records[0]);
+        }
     }
 </script>
 <style lang="less" scoped>
@@ -44,16 +124,88 @@
 
         .form-container {
             position: absolute;
-            //right: 9px;
             right: 0;
             top: 17px;
             z-index: 1;
         }
 
         .mapContainer {
-            flex: 1;
+            height: 100%;
-            height: calc(100% + 22px);
             margin: 10px 0;
         }
+
+        .footer-data {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            z-index: 999;
+
+            .empty-png {
+                position: absolute;
+                top: -16px;
+                left: 0;
+                width: 100%;
+                height: 16px;
+                background: url('../../../assets/images/bg.png') no-repeat;
+                background-position-y: -500px;
+            }
+
+            .col-item {
+                flex: 1;
+                color: #ffffff;
+                text-align: center;
+
+                .col-text {
+                    height: 40px;
+                    line-height: 40px;
+                    background: rgba(35, 132, 221);
+                }
+
+                .col-value {
+                    height: 40px;
+                    line-height: 40px;
+                    background-color: #00152b;
+                }
+            }
+        }
+
+        --moveUp: 50px;
+        --moveDown: -50px;
+
+        .footer-dialog-con {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: var(--moveDown);
+            z-index: 999;
+        }
+
+        .slide-top {
+            animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+        }
+
+        @keyframes slide-top {
+            0% {
+                transform: translateY(0);
+            }
+            100% {
+                transform: translateY(var(--moveDown));
+            }
+        }
+
+        .slide-bottom {
+            animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+        }
+
+        @keyframes slide-bottom {
+            0% {
+                transform: translateY(var(--moveDown));
+            }
+            100% {
+                transform: translateY(var(--moveUp));
+            }
+        }
     }
 </style>

src/components/secondaryScreen/secondMap/secondMapApi.ts

@@ -1,11 +1,7 @@
 import { get } from '/@/api/request.ts';
 
 export enum Api {
-    allList = '/health-emergency/emergency/tblAmbulanceGps/getAllList',
+    footerStatistic = '/health-watch/watch/deptStatisticData/list',
-    getAmbulanceList = '/health-emergency/emergency/tblAmbulanceGps/getAmbulanceList',
 }
 
-// 获取所有资源
+export const footerApi = (params) => get(Api.footerStatistic, params);
-export const getAllList = (params) => get(Api.allList, params);
-//获取救护车GPS信息
-export const getAmbulanceList = (params) => get(Api.getAmbulanceList, params);

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -12,30 +12,29 @@
 //         type: TabType.yiLiaoDian,
 //     },
 // ];
-
+import {cloneDeep} from 'lodash-es';
-import {onMounted, ref} from "vue";
+import {nextTick, onMounted, ref} from "vue";
 import {allSecondaryDeparts} from "/@/components/secondaryScreen/commonApi";
 
-export function useDepart({selectOption = [],}) {
+export const watchIcon = new URL('/@/assets/img/watch.png', import.meta.url).href;
+
+export function useDepart() {
     const orgCode = ref();
     const option = ref([]);
     const fieldNames = {label: 'departName', value: 'orgCode',}
     onMounted(() => {
-        if (selectOption && Array.isArray(selectOption) && selectOption.length > 0) {
+        getOptionData();
-            setOption(selectOption);
-        } else {
-            getOptionData();
-        }
     });
 
-    function setOption(option) {
+    function setOption(data) {
-        option.value = selectOption || option;
+        option.value = data;
+        orgCode.value = data[0]?.orgCode
     }
 
     async function getOptionData() {
         const {result, code} = await allSecondaryDeparts();
         if (code == 200) {
-            option.value = result;
+            setOption(result)
         }
     }
 
@@ -68,3 +67,60 @@ export function useTimeType(t) {
         timeRangeOption
     }
 }
+
+export function useFooterTable() {
+    const footerList = ref([
+        {
+            name: '单位名称',
+            value: '',
+            key: 'orgName'
+        },
+        {
+            name: '单位人数',
+            value: '',
+            key: 'userCount'
+        },
+        {
+            name: '入库设备数量',
+            value: '',
+            key: 'deviceNum'
+        },
+        {
+            name: '佩戴手表人数',
+            value: '',
+            key: 'allotDeviceNum'
+        },
+        {
+            name: '近一周活跃人数',
+            value: '',
+            key: 'sevenDayNum'
+        },
+        {
+            name: '近一月活跃人数',
+            value: '',
+            key: 'a'
+        },
+        {
+            name: '近一年活跃人数',
+            value: '',
+            key: 'b'
+        }
+    ])
+
+    function setFooterList(res: any) {
+
+        const arrList = cloneDeep(footerList.value)
+        if (res) {
+            arrList.forEach(item => {
+                item.value = res[item.key] || ''
+            })
+        }
+        footerList.value = arrList
+
+    }
+
+    return {
+        footerList,
+        setFooterList
+    }
+}

src/utils/is.ts

@@ -0,0 +1,12 @@
+const objectToString = Object.prototype.toString;
+const toTypeString = (value: any) => objectToString.call(value);
+
+export const { isArray } = Array;
+export const isMap = (val: any) => toTypeString(val) === '[object Map]';
+export const isSet = (val: any) => toTypeString(val) === '[object Set]';
+export const isDate = (val: any) => val instanceof Date;
+export const isFunction = (val: any) => typeof val === 'function';
+export const isString = (val: any) => typeof val === 'string';
+export const isSymbol = (val: any) => typeof val === 'symbol';
+export const isObject = (val: null) => val !== null && typeof val === 'object';
+export const isPromise = (val: any) => isObject(val) && isFunction(val.then) && isFunction(val.catch);

src/utils/utils.ts

@@ -23,3 +23,7 @@ export function useTopTime() {
         timeRight,
     };
 }
+
+export function getToday() {
+    return dayjs().format('YYYY-MM-DD');
+}

src/views/indexSon.vue

@@ -14,17 +14,19 @@
     </div>
     <div class="body-d">
       <div class="body-d-left">
-        <PieCharts/>
+          <template v-for="(item, index) in dataList" :key="`list${index}`">
+              <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
+          </template>
       </div>
       <div class="body-d-middle">
-        <SecondMap>
+        <SecondMap :orgCode="orgCode" :type="type">
           <template #rightForm>
             <a-select
                 placeholder="选择单位"
                 v-model:value="orgCode"
                 class="type-select"
                 :options="option"
-                :fieldNames="fieldNames"
+                :field-names="fieldNames"
             ></a-select>
             <a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
                       :options="timeRangeOption"></a-select>
@@ -166,25 +168,24 @@ const {type, timeRangeOption} = useTimeType('week');
     }
   }
 
-  .body-d-left {
+        .body-d-left {
-    > :nth-child(n) {
+            > :nth-child(n) {
-      width: 100%;
+                width: 100%;
-      height: calc(100% / 4);
+                height: calc(100% / 4);
-      padding: 10px;
+                padding: 10px;
+            }
+        }
+
+        .body-d-middle {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .type-select {
+            width: 140px;
+            margin-right: 10px;
+        }
     }
-  }
-
-  .body-d-middle {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .type-select {
-    width: 120px;
-    color: #008cff;
-    margin-right: 10px;
-  }
-}
 
 .bottom-d {
   height: 40px;