update 添加图标 完善地图功能

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

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