调整报警弹框

hookehuyr
Commit b7e8805a405baabe286ea1a2e2cf01806ecbfa4b b7e8805a 1 parent fc46f6b8
Showing 3 changed files with 70 additions and 45 deletions
src/common/max.js
src/components/InfoWindowWarn.vue
src/views/index.vue
--- a/src/common/max.js
View file @b7e8805
+++ b/src/common/max.js
View file @b7e8805
 /*
  * @Date: 2023-06-30 16:48:58
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-30 17:09:30
+ * @LastEditTime: 2023-07-04 17:26:20
  * @FilePath: /map-demo/src/common/max.js
  * @Description: 文件描述
  */
@@ -477,12 +477,18 @@ const testInfo = [
         icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
         details: [
           {
-            name: '',
+            name: '预警演示',
-            note: '',
+            code: 'Y0218',
-            url: '',
+            note: '烟感异常',
+            status: '异常',
+            datetime: '2021-12-22 16:39:42',
+            cctv_url: '', // 监控链接
+            case_url: '1', // 预案链接
+            notice_url: '1', // 通知链接
+            handle_url: '1', // 处理链接
           },
         ],
-        window_type: 'lite',
+        window_type: 'warn',
       },
     ],
   },
--- a/src/components/InfoWindowWarn.vue
View file @b7e8805
+++ b/src/components/InfoWindowWarn.vue
View file @b7e8805
@@ -4,7 +4,7 @@
       <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
         <div class="hideScrollBar info-window-title">
           <div class="checked item">
-            <span>{{ info.name }}</span>
+            <span>{{ warn_info.name }}</span>
           </div>
           <div style="width: 66.66%; text-align: right; margin-bottom: 0.75rem; display: inline-block; color: #888; font-size: 0.9rem;">
             <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B8@2x.png" size="1.25rem"
@@ -13,12 +13,12 @@
         </div>
         <div>
           <div style="width: 80%; float: left; color: #888; line-height: 1.75;">
-            <div>编号: Y0218</div>
+            <div>编号: {{ warn_info.code }}</div>
-            <div>状态: 异常</div>
+            <div>状态: {{ warn_info.status }}</div>
             <div>
-              <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%97%B6%E9%97%B4@2x.png" size="1.5rem"
+              <!-- <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%97%B6%E9%97%B4@2x.png" size="1.5rem"
-              color="#FFF" style="vertical-align: sub;" />
+              color="#FFF" style="vertical-align: sub;" /> -->
-              2021-12-22 16:39:42
+              {{ warn_info.datetime }}
             </div>
           </div>
           <div class="info-control">
@@ -26,26 +26,27 @@
               <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
                 color="#FFF" style="margin-top: 0.5rem;" />
             </div>
-            <div>监控</div>
+            <div @click="goTo(warn_info.cctv_url)">监控</div>
           </div>
         </div>
       </div>
-      <div class="van-hairline--top" style="margin: 1rem 0;">
+      <div class="van-hairline--top" style="margin-top: 1rem; display: flex; justify-content: space-around;">
-        <div @click="goTo()" style="width: 33.33%; float: left; text-align: center; margin-top: 1rem;"
+        <div v-if="warn_info.case_url" @click="goTo(warn_info.case_url)" style="text-align: center; margin-top: 1rem;">
-          class="van-hairline--right">
+          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E6%A1%88@2x.png" size="1.25rem" color="#FFF"
-          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E6%A1%88@2x.png" size="1.5rem" color="#FFF"
             style="vertical-align: bottom;" />&nbsp;
-          <span style="color: #AB8F57; font-size: 1.1rem;">预案</span>
+          <span style="color: #AB8F57; font-size: 1rem;">预案</span>
         </div>
-        <div style="width: 33.33%; float: left; text-align: center; margin-top: 1rem;" class="van-hairline--right">
+        <div v-if="warn_span1" style="text-align: center; margin-top: 1rem;" class="van-hairline--right"></div>
-          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.5rem" color="#FFF"
+        <div v-if="warn_info.notice_url" @click="goTo(warn_info.notice_url)" style="text-align: center; margin-top: 1rem;">
+          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.25rem" color="#FFF"
             style="vertical-align: bottom;" />&nbsp;
-          <span style="color: #AB8F57; font-size: 1.1rem;">通知</span>
+          <span style="color: #AB8F57; font-size: 1rem;">通知</span>
         </div>
-        <div style="width: 33.33%; float: left; text-align: center; margin-top: 1rem;">
+        <div v-if="warn_span2" style="text-align: center; margin-top: 1rem;" class="van-hairline--right"></div>
-          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.5rem" color="#FFF"
+        <div v-if="warn_info.handle_url" @click="goTo(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;">
+          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.25rem" color="#FFF"
             style="vertical-align: bottom;" />&nbsp;
-          <span style="color: #AB8F57; font-size: 1.1rem;">处理</span>
+          <span style="color: #AB8F57; font-size: 1rem;">处理</span>
         </div>
       </div>
     </div>
@@ -90,25 +91,38 @@ export default {
   },
   mounted() {
   },
+  computed: {
+    warn_span1 () {
+      const raw = [this.warn_info.case_url, this.warn_info.notice_url, this.warn_info.handle_url]
+      const count = raw.filter(item => item)
+      return count.length > 1 ;
+    },
+    warn_span2 () {
+      const raw = [this.warn_info.case_url, this.warn_info.notice_url, this.warn_info.handle_url]
+      const count = raw.filter(item => item)
+      return count.length > 2;
+    },
+  },
   watch: {
     rect(val) {
       this.widow_info = val;
     },
     infoWindow(val) {
       if (val) {
-        // 加载录音
+        this.warn_info = this.info.details[0]
-        this.audio.src = this.info?.details[this.isActive]['audio'];
+        // // 加载录音
-        let play_status = this.audio.play() // 播放
+        // this.audio.src = this.info?.details[this.isActive]['audio'];
-        if (play_status) {
+        // let play_status = this.audio.play() // 播放
-          play_status.then(() => {
+        // if (play_status) {
-            // 音频的播放需要耗时
+        //   play_status.then(() => {
-            this.audio.pause();
+        //     // 音频的播放需要耗时
-            this.play_time = this.getAudioTime(this.audio.duration)
+        //     this.audio.pause();
-          }).catch((e) => {
+        //     this.play_time = this.getAudioTime(this.audio.duration)
-            // 失败
+        //   }).catch((e) => {
-            console.log('Operation is too fast, audio play fails')
+        //     // 失败
-          })
+        //     console.log('Operation is too fast, audio play fails')
-        }
+        //   })
+        // }
       }
     }
   },
@@ -125,6 +139,7 @@ export default {
       play_time: '00:00',
       isActive: 0,
       nav_scroll: false,
+      warn_info: {}
     }
   },
   methods: {
@@ -164,12 +179,12 @@ export default {
       // 滚动状态
       this.nav_scroll = false;
     },
-    showDetail() {
+    // showDetail() {
-      this.show_popup = true;
+    //   this.show_popup = true;
-      this.popup_title = '三宝楼';
+    //   this.popup_title = '三宝楼';
-      this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
+    //   this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
-      this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
+    //   this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
-    },
+    // },
     play() {
       this.voice_play(this.info.details[this.isActive]['audio'], 0)
     },
@@ -209,7 +224,7 @@ export default {
       this.is_play = false;
     },
     goTo(url) {
-      location.href = this.info.details[this.isActive].url;
+      location.href = url;
     },
     handleTitle(index) {
       this.isActive = index;
--- a/src/views/index.vue
View file @b7e8805
+++ b/src/views/index.vue
View file @b7e8805
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-04 15:09:26
+ * @LastEditTime: 2023-07-04 16:47:51
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 地图主体页面
 -->
@@ -226,6 +226,7 @@ export default {
     }
   },
   mounted() {
+    // console.log(this.$route.query);
     this.navBarList = map_max; // 底部导航条
     this.navKey = map_max[0]['key']; // 默认选中 第一个 key
     this.navList = map_max.filter(item => item.key === this.navKey)[0]['entity_info']; // 返回默认选中项的实体信息
@@ -350,8 +351,10 @@ export default {
           // 不同弹框类型
           if (entity_info[i].window_type === 'normal') {
             this.positionMarker(entity_info[i])
-          } else {
+          } else if(entity_info[i].window_type === 'lite') {
             this.positionLiteMarker(entity_info[i])
+          } else if (entity_info[i].window_type === 'warn') {
+            this.positionWarnMarker(entity_info[i])
           }
         })
         // marker合集
@@ -750,6 +753,7 @@ export default {
       });
     },
     positionWarnMarker(item) {
+      console.log(item);
       // 点击后创建自定义信息窗口
       this.setInfoWindowsWarn(item)
       // 把地图中心点设置为当前点击的标记点