update 添加图标完善地图功能

2023-12-07 18:44:15 +08:00
parent 123b681dc3
commit 622181ac96
14 changed files with 391 additions and 159 deletions
@@ -1,6 +1,44 @@
 import { ref } from 'vue';
 import * as echarts from 'echarts';

+export function useStatistics() {
+    const statistics = ref([
+        {
+            name: '最新呼入电话',
+            value: '',
+            key: 'gross',
+        },
+        {
+            name: '最新受理电话',
+            value: '',
+            key: 'alerdyreceive',
+        },
+        {
+            name: '突发重大伤病应急',
+            value: '',
+            key: 'jqqz',
+        },
+        {
+            name: '重大伤病应急就医',
+            value: '',
+            key: 'dbjy',
+        },
+    ]);
+
+    function setStatistics(data = {}) {
+        statistics.value.forEach((item) => {
+            const { key } = item;
+            item.value = data[key];
+        });
+        console.log('fffffff', statistics.value);
+    }
+
+    return {
+        statistics,
+        setStatistics,
+    };
+}
+
 export const timeTab = [
    {
        name: '全部',
@@ -12,9 +12,9 @@
                >
            </div>
            <div class="server-container">
-                <div v-for="(item, index) in dataLists" :key="index" class="server-item">
-                    <span>{{ item?.title }}</span>
-                    <span>{{ item?.gross }}</span>
+                <div v-for="(item, index) in statistics" :key="index" class="server-item">
+                    <span>{{ item?.name }}</span>
+                    <span>{{ item?.value }}</span>
                </div>
                <a-spin :spinning="spinning" class="spin"></a-spin>
            </div>
@@ -25,10 +25,10 @@
    import { onMounted, ref } from 'vue';
    import PublicTitle from '../publicTitle.vue';
    import { list } from './left.api';
-    import { timeTab, useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';

    const typeTime = ref(timeTab);
-    const dataLists = ref([]);
+    const { statistics, setStatistics } = useStatistics();
    const selectIndex = ref(0);
    const selectVal = ref('1');
    const { setSpin, spinning } = useSpin();
@@ -42,10 +42,10 @@
        try {
            const { code, result } = (await list({ condition: selectVal.value })) || {};
            setSpin(!spinning.value);
-            if (code != 200) {
+            if (code != 200 || !Array.isArray(result)) {
                return;
            }
-            dataLists.value = result?.map((item) => ({ ...item, title: '最新呼入电话' }));
+            setStatistics(result[0]);
        } catch {
            setSpin(!spinning.value);
        }
@@ -70,10 +70,6 @@
            overflow-y: auto;
            position: relative;

-            > :nth-child(1) {
-                padding-top: 0 !important;
-            }
-
            .spin {
                position: absolute;
                left: 50%;
@@ -100,7 +96,7 @@
                }
            }

-            .server-item:nth-child(2n) {
+            .server-item:nth-child(odd) {
                background-color: #0a0a0c;
            }
        }
@@ -4,11 +4,12 @@
        <div class="inner">
            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
                <div class="item" v-for="(item, i) in scrollList" :key="i">
-                    <span>{{ item?.realName }}</span>
-                    <span>{{ item?.eventType_dictText }}</span>
+                    <span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
+                    <span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
                    <div class="time-icon">
                        <span>{{ item?.warnTime }}</span>
                        <span class="terminal-icon" @click="handlePolice(item)"></span>
+                        <span class="position" @click="sendPosition(item)"></span>
                    </div>
                </div>
            </vue3-seamless-scroll>
@@ -25,23 +26,23 @@
                <div class="police-con">
                    <div class="con-item">
                        <span>姓名：</span>
-                        <span>{{ userInfo.name }}</span>
+                        <span>{{ userInfo?.realName }}</span>
                    </div>
                    <div class="con-item">
                        <span>二级单位：</span>
-                        <span>{{ userInfo.unit }}</span>
+                        <span>{{ userInfo?.orgName1 }}</span>
                    </div>
                    <div class="con-item">
                        <span>手机号码：</span>
-                        <span>{{ userInfo.iphone }}</span>
+                        <span>{{ userInfo?.phone }}</span>
                    </div>
                    <div class="con-item">
                        <span>异常事件：</span>
-                        <span>{{ userInfo.abnormal }}</span>
+                        <span>{{ userInfo?.eventType_dictText }}</span>
                    </div>
                    <div class="con-item">
                        <span>发生时间：</span>
-                        <span>{{ userInfo.time }}</span>
+                        <span>{{ userInfo?.warnTime }}</span>
                    </div>
                    <div class="con-item">
                        <span>发生地点：</span>
@@ -54,23 +55,24 @@
 </template>
 <script setup lang="ts">
    import { onMounted, ref } from 'vue';
+    import $bus from '/@/utils/bus.ts';
    import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
    import PublicTitle from '/@/components/publicTitle.vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
    import { getMonitorList } from '/@/components/body-d-right/right.api.ts';

-    const classOption = {
+    const classOption = ref({
        step: 0.3, // 速度
-    };
+    });
    const open = ref<boolean>(false);
    const openInfor = ref<boolean>(false);
    const userInfo = ref({
-        name: '王苗',
-        unit: '长庆油田',
-        iphone: '1897263745',
-        abnormal: '体温异常',
-        time: '2023-11-23 16:23',
+        realName: '',
+        orgName1: '',
+        phone: '',
+        eventType_dictText: '体温异常',
+        warnTime: '2023-11-23 16:23',
        address: '陕西省西安市',
    });

@@ -91,12 +93,22 @@
        open.value = false;
    }

-    function handlePolice() {
+    /**
+     * @desc open员工信息
+     */
+    function handlePolice(item) {
+        userInfo.value = item;
+        console.log('item', item);
        openInfor.value = true;
+        classOption.value.step = 0;
    }

+    /**
+     * @desc close员工信息
+     */
    function handlePoliceClose() {
        openInfor.value = false;
+        classOption.value.step = 0.3;
    }

    onMounted(() => {
@@ -109,13 +121,20 @@
    const scrollList = ref([]);

    async function getScrollList() {
-        const { code, result } = await getMonitorList({});
+        const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
        if (code == 200) {
-            scrollList.value = result;
+            scrollList.value = result.records;
        }

        console.log('dd', result);
    }
+
+    function sendPosition(item) {
+        let { lon, lat } = item;
+        if (lon && lat) {
+            $bus.emit('sendPosition', item);
+        }
+    }
 </script>
 <style scoped lang="less">
    .inner {
@@ -125,7 +144,7 @@
        justify-content: center;

        .scroll {
-            width: 90%;
+            width: 98%;
            height: 88%;
            overflow: hidden;

@@ -135,6 +154,14 @@
                justify-content: space-between;
                padding: 3% 0;

+                .fixed-width {
+                    display: inline-flex;
+                    width: 100px;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+
                span {
                    color: #ffffff;
                    font-size: 16px;
@@ -146,11 +173,21 @@
                }

                .terminal-icon {
-                    margin-left: 20px;
+                    margin-left: 15px;
                    display: inline-block;
                    width: 18px;
                    height: 18px;
-                    background: url('../../assets/images/terminal.png') no-repeat;
+                    background: url('/@/assets/images/terminal.png') no-repeat;
+                    background-size: 100% 100%;
+                    cursor: pointer;
+                }
+
+                .position {
+                    margin-left: 5px;
+                    display: inline-block;
+                    width: 20px;
+                    height: 20px;
+                    background: url('/@/assets/img/position.png') no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                }
@@ -7,6 +7,7 @@ export enum TabType {
    yiLiaoDian = '3', //医疗点
    jiuHuChe = '4', //救护车
    zhiShengJi = '5', //直升机
+    diFangYiYuan = '6', //地方医院
 }

 export const tabList = [
@@ -32,6 +33,7 @@ export const tabList = [
    },
    {
        name: '地方医院',
+        type: TabType.diFangYiYuan,
    },
    {
        name: '直升机',
@@ -44,6 +46,7 @@ export const tabList = [

 export const helicopter = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
 export const mapbg = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
+export const alarmIcon = new URL('/@/assets/img/alarm-icon.png', import.meta.url).href;

 // 直升机位置数据
 export const aircraft = [
@@ -77,6 +80,22 @@ export const aircraft = [
    },
 ];

+export function aircraftContent() {
+    return `
+    <div style="display: flex;justify-content: center;align-items: center;">
+        <div>
+            <div style="display: flex;justify-content: center;">
+                <div class="helicopter"></div>
+            </div>
+            <div style="z-index:999;background-color:#0A8B18;">
+                <h5 style="overflow: hidden;font-size:18px;color:#fff;white-space: nowrap;padding:0 4px;">
+                    4009-120-999
+                </h5>
+            </div>
+        </div>
+    </div>`;
+}
+
 export function mapApiSwitch(type, params: any) {
    const basicParams = {
        lat: 34, //纬度34
@@ -19,7 +19,7 @@
                        <a-button class="search-btn" @click="searchRoute">路线规划</a-button>
                    </a-form-item>
                </a-form>
-                <div class="line-container" v-show="showRoutePanel" v-click-outside="outClick">
+                <div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
                    <div v-show="routeList.length" class="has-data">
                        <div class="line-title"> {{ panelTitle }}</div>
                        <div class="line-content">
@@ -36,7 +36,9 @@
                    <div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
                </div>
            </div>
-            <div class="mapContainer" id="mapContainer"></div>
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+                <div id="mapContainer" class="mapContainer"></div>
+            </div>
            <div v-show="false" id="container"></div>
            <div v-show="false" id="panel"></div>
            <div class="map-legend">
@@ -44,9 +46,10 @@
                    <div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
                </div>
            </div>
+            <!--            <div class="level">地图层级：{{ level }}</div>-->
        </div>
        <div class="center-footer">
-            <div class="count-item">
+            <div class="count-item" @click="test">
                <div class="num">1054</div>
                <div class="text">累计受理</div>
            </div>
@@ -59,9 +62,16 @@
 </template>
 <script lang="ts" setup>
    import { onMounted, ref } from 'vue';
+    import $bus from '/@/utils/bus.ts';
+
    import { message } from 'ant-design-vue';
    import { Map } from '/@/assets/mapUtils/map';
-    import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch, TabType, aircraft } from '/@/components/chinaMap/chinaHooks';
+    import { aircraft, getKmStr, getTimeStr, legendList, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
+
+    function test() {
+        Map.clearActiveHospital();
+        console.log('清空了');
+    }

    const formState = ref({
        start: '西安北站',
@@ -74,27 +84,66 @@
        // if (i == currentIndex.value) {
        //     return;
        // }
-        currentIndex.value = i;
+
+        currentIndex.value = i; // 地方医院
+        if (TabType.diFangYiYuan == item.type) {
+            Map.clearActiveHospital();
+            Map.map.on('moveend', logMapinfo);
+            return;
+        } else {
+            Map.clearActiveHospital();
+            Map.map.off('moveend', logMapinfo);
+        }
+
        // 直升机
        if (TabType.zhiShengJi == item.type) {
            Map.createAircraft(aircraft);
            return;
        }
+
        getMapData(item.type, { type: item.type });
    }

-    async function getMapData(type, params = {}) {
-        const { code, result } = await mapApiSwitch(type, params);
-        if (code == 200 && Array.isArray(result) && result.length > 0) {
-            Map.createOverlay(result);
+    function logMapinfo() {
+        let zoom = Map.map.getZoom();
+        if (zoom > 6) {
+            Map.map.getCity(function (info) {
+                const { citycode } = info;
+                Map.createActiveHospital(citycode);
+            });
        }
-        console.log('--->data', result);
+    }
+
+    const level = ref(0);
+
+    function setLevel() {
+        //获取当前地图级别
+        level.value = Map.map.getZoom();
+    }
+
+    async function getMapData(type, params = {}) {
+        try {
+            const { code, result } = await mapApiSwitch(type, params);
+            if (code == 200 && Array.isArray(result) && result.length > 0) {
+                Map.createOverlay(result);
+            }
+        } catch (e) {
+            console.log('error------------------------------');
+            console.warn(e);
+        }
+        1;
+        // console.log('--->data', result);
    }

    onMounted(() => {
        console.log('reload');
        initMap();
        getMapData(tabList[0].type);
+        Map.map.on('moveend', setLevel);
+        Map.map.on('zoomend', setLevel);
+        $bus.on('sendPosition', ({ lon, lat }) => {
+            Map.createMarker({ lon, lat });
+        });
    });

    function initMap() {
@@ -221,7 +270,7 @@
            background: #002e64;
            border-radius: 6px;
            position: absolute;
-            top: 40px;
+            top: 36px;
            z-index: 999;
            transition: all 0.3s;

@@ -343,14 +392,15 @@

        .mapContainer {
            flex: 1;
+            height: calc(100% + 22px);
            margin: 10px 0;
            //border: 1px solid red;
        }

        .map-legend {
            position: absolute;
-            bottom: 20px;
-            left: 0;
+            bottom: 15px;
+            left: 10px;
            width: 200px;
            //border: 1px solid red;
            display: flex;
@@ -368,6 +418,14 @@
            }
        }

+        .level {
+            position: absolute;
+            top: 50px;
+            left: 400px;
+            font-size: 18px;
+            color: #fff;
+        }
+
        .center-footer {
            display: flex;
            justify-content: center;
@@ -7,6 +7,7 @@

 <script setup lang="ts">
    import { defineProps, defineEmits } from 'vue';
+
    const emit = defineEmits(['close']);
    const props = defineProps({
        width: {
@@ -19,6 +20,7 @@
            type: String,
        },
    });
+
    function handleCancel() {
        emit('close');
    }
@@ -31,32 +33,38 @@
            display: flex;
            align-items: center;
            width: 100%;
-            height: 56px;
+            height: 40px;
            background: url('../../assets/images/dialog.png') no-repeat;
            background-size: 100% 100%;
            color: #ffffff !important;
            padding-left: 2%;
        }
+
        .ant-modal-header {
            padding: 0 !important;
            padding-bottom: 0;
        }
+
        .ant-modal-header,
        .ant-modal-content {
            background-color: transparent !important;
        }
+
        .ant-modal-body {
            padding: 0 !important;
        }
+
        .ant-modal-close-x,
        .anticon {
            color: #999999 !important;
        }
+
        .ant-modal-footer {
            border-top: none !important;
        }
+
        .ant-modal-wrap {
            background-color: rgba(0, 0, 0, 0.6);
        }
    }
-</style>
+</style>