Merge branch 'lukeyan' of http://8.136.197.230:3000/sheyang/MaindataPGIS into lukeyan

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "sheyang-minedata",
+  "name": "sheyang_coastal_system",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "sheyang-minedata",
+      "name": "sheyang_coastal_system",
       "version": "0.1.0",
       "dependencies": {
         "@liveqing/liveplayer": "^2.6.9",
@@ -7367,7 +7367,7 @@
     },
     "node_modules/js-cookie": {
       "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
       "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
       "engines": {
         "node": ">=14"
@@ -17742,7 +17742,7 @@
     },
     "js-cookie": {
       "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
       "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
     },
     "js-message": {

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "sheyang-minedata",
+  "name": "sheyang_coastal_system",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

src/assets/main.scss

@@ -4,32 +4,7 @@ html,body {
   box-sizing: border-box;
   font-size: 12px;
 }
-// * 房屋地址相关样式
+// * 隐藏地图logo
-.house{
+a.minemap-ctrl-logo {
-  display: flex;
+  display: none;
-  flex-direction: column;
-  justify-content: space-around;
-  width: 15vw;
-  height: 30vh;
-  font-size: 1rem;
-  color: #fff;
-
-  .house-item {
-    padding: 5px;
-    display: flex;
-    flex: 1;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .state-a{
-    border-radius: 5px 5px 0 0;
-    background-color: rgb(240, 156, 156);
-  }
-  .state-b{
-    background-color: rgb(250, 114, 3);
-  }
-  .state-c{
-    border-radius: 0 0 5px 5px;
-    background-color: rgb(0, 119, 255);
-  }
 }

src/components/MapScroll.vue

@@ -12,7 +12,7 @@
         v-for="(item, index) in groupItems"
         :key="index"
       >
-        <div class="carousel_box" v-for="group in item" :key="group.name">
+        <div class="carousel_box" v-for="(group, index) in item" :key="index">
           <div class="carousel_box_left">
             <div class="carousel_box_left_picture"></div>
             <div class="carousel_box_left_text">人员追踪</div>
@@ -48,7 +48,7 @@
 
 <script>
 export default {
-  neme: 'MapScrool',
+  name: 'MapScroll',
   props: {
     // * index 传递过来的数据
     item: {
@@ -99,10 +99,10 @@ export default {
         display: flex;
         justify-content: space-around;
         height: 11vh;
-        background-image: url('../assets/picture/bg_people_nor.png');
+        background-image: url('@/assets/picture/bg_people_nor.png');
 
         &:hover {
-          background-image: url('../assets/picture/bg_people_hover.png');
+          background-image: url('@/assets/picture/bg_people_hover.png');
         }
 
         .carousel_box_left {
@@ -120,7 +120,7 @@ export default {
           .carousel_box_left_text {
             color: #ecf4f9;
             text-align: center;
-            font-size: 0.1vw;
+            font-size: 0.8rem;
             font-weight: normal;
             font-family: PingFangSC, PingFang SC;
             background-color: #005ea1;
@@ -140,19 +140,21 @@ export default {
           justify-content: space-between;
           align-items: center;
           width: 18vw;
-          font-size: 0.1vw;
+          font-size: 0.8rem;
           position: relative;
 
           .carousel_box_right_label {
             width: 4vw;
             color: rgba($color: #ecf4f9, $alpha: 0.6);
-            font-size: PingFangSC, PingFang SC;
+            font-family: PingFangSC, PingFang SC;
+            font-size: 0.8rem;
           }
 
           .carousel_box_right_name {
             width: 14vw;
             color: #edf1f7;
-            font-size: PingFangSC, PingFang SC;
+            font-family: PingFangSC, PingFang SC;
+            font-size: 0.8rem;
           }
 
           .people_status {
@@ -162,10 +164,10 @@ export default {
             border-radius: 2px 0 2px 2px;
             color: #061122;
             text-align: center;
-            font-size: PingFangSC, PingFang SC;
+            font-family: PingFangSC, PingFang SC;
+            font-size: 0.8rem;
             font-weight: 400;
             line-height: 2vh;
-            font-size: 0.1vw;
             position: absolute;
             top: 0;
             right: 0;

src/router/index.js

@@ -24,17 +24,17 @@ const routes = [
         path: 'coastalMap',
         name: 'coastalMap',
         component: () => import('@/views/coastalMap/index.vue')
+      },
+      {
+        path: 'videoMonitor',
+        name: 'videoMonitor',
+        component: () => import('@/views/videoMonitor/index.vue')
+      },
+      {
+        path: 'sensingDevice',
+        name: 'sensingDevice',
+        component: () => import('@/views/sensingDevice/index.vue')
       }
-      // {
-      //   path: 'videoMonitor',
-      //   name: 'videoMonitor',
-      //   component: () => import('@/views/videoMonitor/index.vue')
-      // },
-      // {
-      //   path: 'sensingDevice',
-      //   name: 'sensingDevice',
-      //   component: () => import('@/views/sensingDevice/index.vue')
-      // }
     ]
   }
 ]

src/views/coastalMap/components/EchartsPolicesStatue.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="police"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'EchartsPolicesStatus',
+  mounted() {
+    this.police_echarts()
+  },
+  methods: {
+    police_echarts() {
+      var chartDom = document.getElementById('police')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '30%',
+          right: '3%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        yAxis: {
+          type: 'category'
+          // data: ['Brazil', 'Indonesia', 'USA']
+        },
+        series: [
+          {
+            type: 'bar',
+            data: [18203, 23489, 29034]
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#police {
+  width: 15vw;
+  height: 10vh;
+}
+</style>

src/views/coastalMap/components/keyInformantion.vue

@@ -0,0 +1,837 @@
+<template>
+  <div class="live_all">
+    <!-- 弹窗整体 -->
+    <div class="live_card">
+      <div class="live_card_header">重点人员信息</div>
+      <div class="card_close" @click="cardClose"></div>
+      <div class="live_card_body">
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+        <!--  -->
+        <div class="box">
+          <!-- 图片 -->
+          <div class="card_picture">
+            <!-- 照片 -->
+            <div class="image"></div>
+            <!-- 查看轨迹 -->
+            <div class="card_picture_look">
+              <span>查看轨迹</span>
+            </div>
+          </div>
+          <!-- 图片右边的个人介绍 -->
+          <div class="card_picture_right">
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <div class="info">
+              <div class="info_icon"></div>
+              <p class="text">张三asdasdaasdadasdasdsda</p>
+            </div>
+
+            <div class="info">
+              <div class="info_icon"></div>
+              <p>张三</p>
+            </div>
+            <!-- 涉毒人员 -->
+            <div class="card_picture_right_cate">
+              <span>涉毒人员</span>
+            </div>
+          </div>
+
+          <!-- 户籍 -->
+          <div class="card_huji"><span>户籍</span></div>
+          <!-- 现住 -->
+          <div class="card_xianzhu"><span>现住</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'keyInformantion',
+  components: {},
+  props: {},
+  data() {
+    return {
+      play: true
+    }
+  },
+  methods: {
+    cardClose() {
+      this.$emit('cardClose')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+.live_all {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  background: url(../../../assets/icon-hza/bg_6.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  .card_close {
+    width: 1vw;
+    height: 1.3vh;
+    position: absolute;
+    top: 0;
+    right: 1.1vw;
+  }
+  .card_close:hover {
+    background-color: #67fcff;
+    opacity: 0.5;
+  }
+  .live_card {
+    width: 90vw;
+    height: 75vh;
+    position: relative;
+
+    .live_card_header {
+      margin-left: 1vw;
+      margin-top: 2vh;
+      font-size: 1vw;
+      color: #fff;
+    }
+    .live_card_body {
+      margin-top: 3vh;
+      width: 87vw;
+      height: 50vh;
+
+      margin-left: 3vh;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      gap: 1vw;
+      .box {
+        width: 16vw;
+        height: 15vh;
+        background-image: url(../../../assets/icon-hza/bg_right.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        display: flex;
+        position: relative;
+        padding-left: 1vh;
+        border: 1px solid #176ba1;
+
+        .card_huji {
+          height: 2vh;
+          position: absolute;
+          right: 0.6vw;
+          top: 7.3vh;
+          color: #ffc426;
+        }
+        .card_xianzhu {
+          height: 2vh;
+
+          position: absolute;
+          right: 0.6vw;
+          top: 9.8vh;
+          color: #009cfe;
+        }
+        .card_picture {
+          width: 4vw;
+          height: 14vh;
+          background-color: #fff;
+          position: relative;
+          margin-top: 0.5vh;
+          .card_picture_look {
+            width: 4vw;
+            height: 2.5vh;
+            background-image: url(../../../assets/icon-hza/bg_44.png);
+            background-size: 100% auto;
+            position: absolute;
+            bottom: 0vh;
+            align-items: center;
+            justify-content: center;
+            display: flex;
+            color: #fff;
+          }
+          .image {
+            width: 4vw;
+            height: 12.5vh;
+            background-color: pink;
+          }
+        }
+        .card_picture_right {
+          width: 9.5vw;
+          height: 14vh;
+          margin-left: 1vh;
+          margin-top: 0.5vh;
+          .info {
+            margin-bottom: 0.3vh;
+            display: flex;
+            color: #fff;
+            .info_icon {
+              width: 1vw;
+              height: 2vh;
+              background-color: #fff;
+              margin-right: 0.5vw;
+            }
+            .text {
+              width: 7vw;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+          .card_picture_right_cate {
+            height: 2.5vh;
+            width: 4vw;
+            background-color: #009cfe;
+            align-items: center;
+            justify-content: center;
+            display: flex;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/coastalMap/components/keyPerson.vue

@@ -120,10 +120,12 @@
   </div>
 </template>
 <script>
-import * as echarts from "echarts";
+import * as echarts from 'echarts'
-import EleResize from "@/utils/esresize";
+import EleResize from '@/utils/esresize'
+import PersonScroll from './keypersonScroll.vue'
 export default {
-  name: "KeyPerson",
+  name: 'KeyPerson',
+  components: { PersonScroll },
   data() {
     return {
       title_text: "重点人员",
@@ -229,44 +231,44 @@ export default {
   },
   methods: {
     init_charts() {
-      let charts = document.getElementById("charts");
+      let charts = document.getElementById('charts')
-      let resize_div = document.getElementById("charts");
+      let resize_div = document.getElementById('charts')
-      let myChart = echarts.init(charts);
+      let myChart = echarts.init(charts)
       // echarts表自适应
       EleResize.on(resize_div, () => {
-        myChart.resize();
+        myChart.resize()
-      });
+      })
       let option = {
         tooltip: {
-          trigger: "item",
+          trigger: 'item',
-          confine: true,
+          confine: true
         },
         // legend: {
         //   orient: "vertical",
         //   left: "left",
         // },
-        color: ["#A357FF", "#009CFE", "#00F5FF", "#FFC426", "#FF6200"],
+        color: ['#A357FF', '#009CFE', '#00F5FF', '#FFC426', '#FF6200'],
         series: [
           {
-            name: "重点人员",
+            name: '重点人员',
-            type: "pie",
+            type: 'pie',
-            radius: ["50%", "90%"],
+            radius: ['50%', '90%'],
             data: [
-              { value: 80048, name: "涉恐人员" },
+              { value: 80048, name: '涉恐人员' },
-              { value: 70135, name: "涉毒人员" },
+              { value: 70135, name: '涉毒人员' },
-              { value: 20180, name: "精神病人" },
+              { value: 20180, name: '精神病人' },
-              { value: 31484, name: "在逃人员" },
+              { value: 31484, name: '在逃人员' },
-              { value: 11484, name: "涉稳人员" },
+              { value: 11484, name: '涉稳人员' }
             ],
             label: {
               normal: {
-                show: false,
+                show: false
-              },
+              }
             },
             labelLine: {
               normal: {
-                show: false,
+                show: false
-              },
+              }
             },
             emphasis: {
               itemStyle: {
@@ -299,7 +301,7 @@ export default {
   .key_title {
     width: 20vw;
     height: 3.5vh;
-    background: url("~@/assets/coastalMap/box_title_back.png") no-repeat;
+    background: url('~@/assets/coastalMap/box_title_back.png') no-repeat;
     background-size: 100% 100%;
     .title_text {
       width: 20vw;
@@ -316,7 +318,7 @@ export default {
   .key_box {
     width: 20vw;
     height: 68vh;
-    background: url("~@/assets/coastalMap/box_back02.png") no-repeat;
+    background: url('~@/assets/coastalMap/box_back02.png') no-repeat;
     background-size: 100% 100%;
     .echart_body {
       width: 20vw;
@@ -335,7 +337,7 @@ export default {
         .all_person_num {
           width: 8vw;
           height: 4vh;
-          background: url("~@/assets/coastalMap/keyPerson/key_all_back.png")
+          background: url('~@/assets/coastalMap/keyPerson/key_all_back.png')
             no-repeat;
           background-size: 100% 100%;
           display: flex;

src/views/coastalMap/components/keypersonScroll.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="key_person">
+    <el-carousel
+      direction="vertical"
+      :autoplay="true"
+      :interval="4000"
+      indicator-position="none"
+      class="key_person_group"
+    >
+      <el-carousel-item
+        class="key_person_item"
+        v-for="(item, index) in groupItems"
+        :key="index"
+      >
+        <div class="key_person_box" v-for="(group, index) in item" :key="index">
+          <div class="key_person_box_left">
+            <div class="key_person_box_left_picture"></div>
+            <div class="key_person_box_left_text">人员追踪</div>
+          </div>
+          <div class="key_person_box_right">
+            <div class="key_person_box_right_label">
+              <div class="label_item">人员姓名 :</div>
+              <div class="label_item">证件号码 :</div>
+              <div class="label_item">抓拍时间 :</div>
+              <div class="label_item">滞留时间 :</div>
+              <div class="label_item">抓拍地点 :</div>
+            </div>
+            <div class="key_person_box_right_name">
+              <div class="name_item">张三</div>
+              <div class="name_item">321287197606038965</div>
+              <div class="name_item">2023-11-15 14:20:16</div>
+              <div class="name_item">4个小时</div>
+              <div class="name_item">江苏省射阳县海河镇革新村二组113号</div>
+            </div>
+            <!-- 人员状态 -->
+            <div
+              class="people_status"
+              :style="{ backgroundColor: group.color }"
+            >
+              {{ group.status }}
+            </div>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PersonScroll',
+  props: {
+    // * index 传递过来的数据
+    item: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      items: [
+        { name: 'Box 1', status: '涉稳人员', color: '#ffc426' },
+        { name: 'Box 1', status: '列管人员', color: '#00f5ff' },
+        { name: 'Box 1', status: '涉恐人员', color: '#a357ff' },
+        { name: 'Box 1', status: '涉稳人员', color: '#ffc426' },
+        { name: 'Box 1', status: '列管人员', color: '#00f5ff' },
+        { name: 'Box 1', status: '涉恐人员', color: '#a357ff' }
+      ]
+    }
+  },
+  mounted() {},
+  methods: {},
+  computed: {
+    groupItems() {
+      // * 声明空数组
+      let groups = []
+      // * 循环时 items 的每一项 +3
+      for (let i = 0; i < this.items.length; i += 3) {
+        groups.push(this.items.slice(i, i + 3))
+      }
+      console.log(groups)
+      return groups
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.key_person {
+  width: 20vw;
+  height: 38vh;
+
+  .key_person_group {
+    margin: 0;
+    height: 36vh;
+
+    .key_person_item {
+      .key_person_box {
+        margin-top: 1vh;
+        display: flex;
+        justify-content: space-around;
+        height: 11vh;
+        background-image: url('@/assets/picture/bg_people_nor.png');
+
+        &:hover {
+          background-image: url('@/assets/picture/bg_people_hover.png');
+        }
+
+        .key_person_box_left {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          width: 4vw;
+
+          .key_person_box_left_picture {
+            flex: 1;
+            height: 8vh;
+            background-color: #fcbebe;
+          }
+
+          .key_person_box_left_text {
+            color: #ecf4f9;
+            text-align: center;
+            font-size: 0.8rem;
+            font-weight: normal;
+            font-family: PingFangSC, PingFang SC;
+            background-color: #005ea1;
+            box-shadow: inset 0 0 9 0 #00a2ff;
+            border: 1px solid;
+            border-image: linear-gradient(
+                360deg,
+                rgba(62, 215, 255, 1),
+                rgba(0, 204, 255, 1)
+              )
+              1 1;
+          }
+        }
+
+        .key_person_box_right {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 16vw;
+          font-size: 0.8rem;
+          position: relative;
+
+          .key_person_box_right_label {
+            width: 4vw;
+            color: rgba($color: #ecf4f9, $alpha: 0.6);
+            font-family: PingFangSC, PingFang SC;
+            font-size: 0.8rem;
+          }
+
+          .key_person_box_right_name {
+            width: 12vw;
+            color: #edf1f7;
+            font-family: PingFangSC, PingFang SC;
+            font-size: 0.8rem;
+          }
+
+          .people_status {
+            width: 3.5vw;
+            height: 2vh;
+            background-color: #ffc426;
+            border-radius: 2px 0 2px 2px;
+            color: #061122;
+            text-align: center;
+            font-family: PingFangSC, PingFang SC;
+            font-size: 0.8rem;
+            font-weight: 400;
+            line-height: 2vh;
+            position: absolute;
+            top: 0;
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/coastalMap/components/mapBody.vue

@@ -5,7 +5,9 @@
 export default {
   name: 'MapBody',
   data() {
-    return {}
+    return {
+      mapContainer: null
+    }
   },
   mounted() {
     this.init_map()

src/views/coastalMap/components/policeScroll.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="carousel" ref="carousel">
+    <el-carousel
+      direction="vertical"
+      :autoplay="true"
+      :interval="4000"
+      indicator-position="none"
+      class="carousel_group"
+    >
+      <el-carousel-item
+        class="carousel_item"
+        v-for="(item, index) in groupItems"
+        :key="index"
+      >
+        <div class="carousel_box" v-for="(group, index) in item" :key="index">
+          <div class="carousel_box_left">
+            <div class="label_item">警情类型 :</div>
+            <div class="label_item">接警单位 :</div>
+            <div class="label_item">事发地址 :</div>
+            <div class="label_item">现住地址 :</div>
+          </div>
+          <div class="carousel_box_right">
+            <div class="name_item" style="color: #00f5ff">机动车与机动车</div>
+            <div class="name_item">射阳公安局</div>
+            <div class="name_item">建湖县明星路与冠华路交界北边</div>
+            <div class="name_item">江苏省射阳县海河镇革新村二组113号</div>
+            <!-- 统计时间 -->
+            <div class="count_time">2023-11-30 14:00:00</div>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PoliceScroll',
+  props: {
+    // * index 传递过来的数据
+    item: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      items: [
+        { name: 'Box 1', status: '涉稳人员', color: '#ffc426' },
+        { name: 'Box 1', status: '列管人员', color: '#00f5ff' },
+        { name: 'Box 1', status: '涉恐人员', color: '#a357ff' },
+        { name: 'Box 1', status: '涉稳人员', color: '#ffc426' },
+        { name: 'Box 1', status: '列管人员', color: '#00f5ff' },
+        { name: 'Box 1', status: '涉恐人员', color: '#a357ff' }
+      ]
+    }
+  },
+  mounted() {},
+  methods: {},
+  computed: {
+    groupItems() {
+      // * 声明空数组
+      let groups = []
+      // * 循环时 items 的每一项 +3
+      for (let i = 0; i < this.items.length; i += 2) {
+        groups.push(this.items.slice(i, i + 2))
+      }
+      console.log(groups)
+      return groups
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.carousel {
+  width: 18vw;
+  height: 28vh;
+
+  .carousel_group {
+    margin: 0;
+    height: 26vh;
+
+    .carousel_item {
+      .carousel_box {
+        margin-top: 1vh;
+        display: flex;
+        justify-content: space-around;
+        height: 11vh;
+        background-image: url('@/assets/picture/bg_people_nor.png');
+
+        &:hover {
+          background-image: url('@/assets/picture/bg_people_hover.png');
+        }
+
+        .carousel_box_left {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          width: 4vw;
+          color: #ecf4f9;
+          text-align: center;
+          font-size: 0.8rem;
+          font-weight: normal;
+          font-family: PingFangSC, PingFang SC;
+        }
+
+        .carousel_box_right {
+          display: flex;
+          flex-direction: column;
+          align-items: start;
+          justify-content: space-around;
+          width: 14vw;
+          color: #edf1f7;
+          font-size: 0.8rem;
+          font-weight: normal;
+          font-family: PingFangSC, PingFang SC;
+          position: relative;
+
+          .count_time {
+            display: flex;
+            justify-content: end;
+            width: 10vw;
+            height: 2vh;
+            color: #ecf4f9;
+            font-family: PingFangSC, PingFang SC;
+            line-height: 2vh;
+            font-size: 0.8rem;
+            position: absolute;
+            top: 0.125rem;
+            right: 0.125rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/coastalMap/components/policeSpread.vue

@@ -1,13 +1,36 @@
 <!-- 警力分布 -->
 <template>
-  <div class="police"></div>
+  <div class="police">
+    <div class="police_title">
+      <div class="police_title_text">警力分布</div>
+    </div>
+    <div class="police_body">
+      <div
+        class="police_body_box"
+        v-for="(item, index) in policeData"
+        :key="index"
+      >
+        <div class="police_body_box_title">{{ item.text }}</div>
+        <div class="police_body_box_num" :style="{ color: item.color }">
+          2,362
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'PoliceSpread',
   data() {
-    return {}
+    return {
+      // * 警力分布假数据
+      policeData: [
+        { color: '#00f5ff', text: '派出所' },
+        { color: '#ffc426', text: '警务室' },
+        { color: '#00f5ff', text: '执法警员' }
+      ]
+    }
   }
 }
 </script>
@@ -16,6 +39,61 @@ export default {
 .police {
   width: 18vw;
   height: 18vh;
-  background-color: #fcc9c9;
+
+  .police_title {
+    height: 4vh;
+    background-image: url('@/assets/picture/bg_small_title.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .police_title_text {
+      margin-left: 2vw;
+      font-size: 1vw;
+      color: #edf1f7;
+      line-height: 4vh;
+      text-shadow: 0 0 10px #0b4672;
+    }
+  }
+
+  .police_body {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 15vh;
+    background-image: url('@/assets/picture/bg_right.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .police_body_box {
+      width: 5vw;
+      height: 10vh;
+      background-image: url('@/assets/picture/bg_police_nor.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+
+      &:hover {
+        background-image: url('@/assets/picture/bg_police_hover.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .police_body_box_title {
+        height: 3vh;
+        text-align: center;
+        font-size: 1vw;
+        color: #edf1f7;
+        line-height: 2.7vh;
+      }
+
+      .police_body_box_num {
+        font-size: 1vw;
+        font-family: D-DIN, D-DIN;
+        font-weight: bold;
+        color: #00f5ff;
+        text-align: center;
+        line-height: 7vh;
+      }
+    }
+  }
 }
 </style>

src/views/coastalMap/components/policeStatu.vue

@@ -1,22 +0,0 @@
-<!-- 警情统计 -->
-<template>
-  <div class="police_status"></div>
-</template>
-
-<script>
-export default {
-  name: 'PoliceStatus',
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style lang="scss">
-.police_status {
-  margin-top: 2vh;
-  width: 18vw;
-  height: 41vh;
-  background-color: #fa71ff;
-}
-</style>

src/views/coastalMap/components/policeStatus.vue

@@ -0,0 +1,68 @@
+<!-- 警情统计 -->
+<template>
+  <div class="police_status">
+    <div class="police_status_header">
+      <div class="police_status_text">警情统计</div>
+    </div>
+    <div class="police_status_body">
+      <div class="police_status_body_charts"></div>
+      <div class="police_status_body_scroll">
+        <PoliceScroll></PoliceScroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PoliceScroll from './policeScroll.vue'
+export default {
+  name: 'PoliceStatus',
+  components: { PoliceScroll },
+  data() {
+    return
+  },
+  mounted() {},
+  methods: {},
+  computed: {}
+}
+</script>
+
+<style lang="scss">
+.police_status {
+  margin-top: 2vh;
+  width: 18vw;
+  height: 47vh;
+  // background-color: #fff;
+
+  .police_status_header {
+    height: 4vh;
+    background-image: url('@/assets/picture/bg_small_title.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .police_status_text {
+      margin-left: 2vw;
+      font-size: 1vw;
+      color: #edf1f7;
+      line-height: 4vh;
+      text-shadow: 0 0 10px #0b4672;
+    }
+  }
+
+  .police_status_body {
+    height: 43vh;
+    background-image: url('@/assets/picture/bg_5.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .police_status_body_charts {
+      height: 15vh;
+      // background-color: #fb3f3f;
+    }
+
+    .police_status_body_scroll {
+      height: 28vh;
+    }
+  }
+}
+</style>

src/views/coastalMap/components/resource.vue

@@ -47,7 +47,7 @@ export default {
   },
   created() {
     // this.add()
-    this.get_person()
+    // this.get_person()
   },
   methods: {
     // async add() {
@@ -112,7 +112,7 @@ export default {
         color: aliceblue;
         text-align: right;
         line-height: 4vh;
-        font-size: 14px;
+        font-size: 0.8rem;
         font-weight: 500;
       }
       .box_item_value {
@@ -121,7 +121,7 @@ export default {
         text-align: center;
         line-height: 4vh;
         color: #00f5ff;
-        font-size: 14px;
+        font-size: 0.8rem;
         font-weight: 800;
       }
     }

src/views/coastalMap/components/seaElement.vue

@@ -1,13 +1,51 @@
 <!-- 涉海要素 -->
 <template>
-  <div class="sea"></div>
+  <div class="sea">
+    <div class="sea_title">
+      <div class="sea_title_text">涉海要素</div>
+    </div>
+    <div class="sea_body">
+      <div
+        class="sea_body_box"
+        v-for="item in back"
+        :key="item.num"
+        :style="{ backgroundImage: `url(${item.backImg}) ` }"
+      >
+        <div class="sea_body_box_num">{{ item.num }}</div>
+        <div class="sea_body_box_title">{{ item.text }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'SeaElement',
   data() {
-    return {}
+    return {
+      back: [
+        {
+          backImg: require('@/assets/picture/bg_sea_1.png'),
+          text: '港口',
+          num: '34'
+        },
+        {
+          backImg: require('@/assets/picture/bg_sea_2.png'),
+          text: '码头',
+          num: '2,362'
+        },
+        {
+          backImg: require('@/assets/picture/bg_sea_3.png'),
+          text: '船只',
+          num: '2,362'
+        },
+        {
+          backImg: require('@/assets/picture/bg_sea_4.png'),
+          text: '船员',
+          num: '34'
+        }
+      ]
+    }
   }
 }
 </script>
@@ -16,7 +54,57 @@ export default {
 .sea {
   margin-top: 2vh;
   width: 18vw;
-  height: 26vh;
+  height: 20vh;
-  background-color: #00a854;
+
+  .sea_title {
+    height: 4vh;
+    background-image: url('@/assets/picture/bg_small_title.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .sea_title_text {
+      margin-left: 2vw;
+      color: #edf1f7;
+      font-size: 1vw;
+      line-height: 4vh;
+      text-shadow: 0 0 10px #0b4672;
+    }
+  }
+
+  .sea_body {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+    height: 16vh;
+    background-image: url('@/assets/picture/bg_5.png');
+
+    .sea_body_box {
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      align-items: center;
+      width: 7vw;
+      height: 6vh;
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+
+      .sea_body_box_num {
+        margin-left: 1vw;
+        color: #00f5ff;
+        font-size: 1vw;
+        font-family: D-DIN;
+        font-weight: bold;
+      }
+
+      .sea_body_box_title {
+        margin-left: 1vw;
+        color: #fff;
+        font-family: PingFangSC;
+        font-weight: 500;
+        font-size: 1vw;
+      }
+    }
+  }
 }
 </style>

src/views/coastalMap/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="system_body">
     <!-- 地图区域 -->
-    <!-- <MapBody ref="mapBody"></MapBody> -->
+    <MapBody ref="mapBody"></MapBody>
     <!-- 头部区域 -->
     <div class="system_title">
       <!-- 占位 -->
@@ -33,56 +33,69 @@
     </div>
     <!-- 四类打点 -->
     <div class="point_list">
-      <div class="point_list_item">
+      <div class="point_list_item" v-for="(item, index) in back" :key="index">
         <div class="point_icon">
-          <el-button class="icon_body" size="mini"></el-button>
+          <div
-          <div class="point_icon_text">实有房屋</div>
+            class="icon_body"
-        </div>
+            :style="{ backgroundImage: `url(${item.backImg})` }"
-      </div>
+          ></div>
-      <div class="point_list_item">
-        <div class="point_icon">
-          <el-button class="icon_body" size="mini"></el-button>
-          <div class="point_icon_text">实有单位</div>
-        </div>
-      </div>
-      <div class="point_list_item">
-        <div class="point_icon">
-          <el-button class="icon_body" size="mini"></el-button>
-          <div class="point_icon_text">警力分布</div>
-        </div>
-      </div>
-      <div class="point_list_item">
-        <div class="point_icon">
-          <el-button class="icon_body" size="mini"></el-button>
-          <div class="point_icon_text">重点警情</div>
         </div>
+        <div class="point_icon_text">{{ item.text }}</div>
       </div>
     </div>
+    <!-- 弹窗组件 -->
+    <KeyInformantion v-if="play" @cardClose="onCardClose"></KeyInformantion>
+    <div v-else></div>
+    <!-- 自定义遮罩层 -->
+    <div class="overlay" v-if="play"></div>
+    <div v-else></div>
   </div>
 </template>
 <script>
 // import { login, getDeviceListAPI } from '@/api/facility'
 // import { setToken } from '@/utils/token'
 // import { setDeviceLatlng } from '@/utils/latlng'
-// import MapBody from './components/mapBody'
+import MapBody from './components/mapBody'
 import Resource from './components/resource' // * 资源概况
 import KeyPerson from './components/keyPerson' // * 重点人员
 import PoliceSpread from './components/policeSpread.vue' // * 警力分布
 import SeaElement from './components/seaElement.vue' // * 涉海要素
-import PoliceStatus from './components/policeStatu.vue' // * 警情统计
+import PoliceStatus from './components/policeStatus.vue' // * 警情统计
+import KeyInformantion from './components/keyInformantion.vue' //弹窗组件
 export default {
   name: 'CoastalMap',
   components: {
-    // MapBody,
+    MapBody,
     Resource,
     KeyPerson,
     PoliceSpread,
     SeaElement,
-    PoliceStatus
+    PoliceStatus,
+    KeyInformantion
   },
   data() {
     return {
-      title_text: '射阳沿海治安防控综合平台'
+      title_text: '射阳沿海治安防控综合平台',
+      play: true,
+      // * 打点背景图数组
+      back: [
+        {
+          backImg: require('@/assets/picture/icon_point_green.png'),
+          text: '实有房屋'
+        },
+        {
+          backImg: require('@/assets/picture/icon_point_blue.png'),
+          text: '实有单位'
+        },
+        {
+          backImg: require('@/assets/picture/icon_point_yellow.png'),
+          text: '警力分布'
+        },
+        {
+          backImg: require('@/assets/picture/icon_point_red.png'),
+          text: '重点警情'
+        }
+      ]
       // // * 监控设备所需分页
       // params: {
       //   start: 0,
@@ -97,6 +110,10 @@ export default {
     // this.getActionsData()
   },
   methods: {
+    onCardClose() {
+      console.log('关闭弹窗')
+      this.play = !this.play
+    }
     // * 获取海康平台的 token
     // async onLogin() {
     //   const res = await login()
@@ -131,6 +148,7 @@ export default {
     width: 100vw;
     height: 14vh;
     position: absolute;
+    top: 0;
     background: url('~@/assets/homepage/title_back.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
@@ -151,6 +169,7 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
+
         .police_icon {
           width: 2.7vw;
           height: 5.4vh;
@@ -162,7 +181,7 @@ export default {
         color: aliceblue;
         text-align: center;
         line-height: 7vh;
-        font-size: 36px;
+        font-size: 2.25rem;
         font-weight: 700;
       }
     }
@@ -178,7 +197,7 @@ export default {
           height: 3.5vh;
           text-align: center;
           color: #37fdc7;
-          font-size: 24px;
+          font-size: 1.5rem;
           font-weight: 600;
         }
       }
@@ -199,42 +218,46 @@ export default {
     right: 1vw;
     width: 18vw;
     height: 89vh;
-    background: #ad337f;
+    // background: #ad337f;
   }
   .point_list {
     position: absolute;
     top: 10vh;
     right: 20vw;
-    width: 4vw;
+    width: 5vw;
-    height: 28vh;
+    height: 25vw;
-    background: #ad337f;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
 
     .point_list_item {
-      width: 4vw;
+      width: 5vw;
-      height: 7vh;
+      height: 5vw;
       display: flex;
-      justify-content: center;
+      flex-direction: column;
+      justify-content: space-between;
       align-items: center;
 
       .point_icon {
-        width: 3.5vw;
+        width: 5vw;
-        height: 6vh;
+        height: 5vw;
-        background: #33a59f;
+        background-image: url('@/assets/picture/bg_point.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
         display: flex;
-        flex-direction: column;
+        justify-content: center;
+        align-items: center;
 
         .icon_body {
-          width: 1vw;
+          width: 2vw;
-          height: 4vh;
+          height: 3vw;
-          margin: auto;
+          background-size: 100% 100%;
-          background: rgba(0, 0, 0, 0);
+          background-repeat: no-repeat;
+        }
       }
-
       .point_icon_text {
-          width: 3.5vw;
+        width: 5vw;
-          height: 2vh;
+        height: 1vw;
         color: aliceblue;
         text-align: center;
         line-height: 2vh;
@@ -243,5 +266,4 @@ export default {
     }
   }
 }
-}
 </style>

src/views/map/components/MapContainer.vue

@@ -17,7 +17,7 @@ import {
 } from '@/utils/point'
 import { onShowLayer, onHideLayer, onLoadHideLayer } from '@/utils/controlLayer'
 import { getPerceptionDeviceAPI } from '@/api/address'
-import MapScroll from './MapScroll.vue'
+import MapScroll from '../../../components/MapScroll.vue'
 import MapCheck from './MapCheck.vue'
 import bus from '@/utils/bus'
 

src/views/map/components/MapScroll.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="carousel" ref="carousel">
-    <h4>重点警情</h4>
-    <el-carousel
-      height="250px"
-      direction="vertical"
-      :autoplay="true"
-      :interval="4000"
-      indicator-position="none"
-    >
-      <el-carousel-item
-        class="carousel-item"
-        v-for="(item, index) in groupItems"
-        :key="index"
-      >
-        <div
-          class="box"
-          v-for="group in item"
-          :key="group.color"
-          :style="{ backgroundColor: group.color }"
-        >
-          {{ group.name }}
-        </div>
-      </el-carousel-item>
-    </el-carousel>
-  </div>
-</template>
-
-<script>
-export default {
-  neme: 'MapScrool',
-  data() {
-    return {
-      items: [
-        { name: 'Box 1', color: 'red' },
-        { name: 'Box 1', color: 'blue' },
-        { name: 'Box 1', color: 'green' },
-        { name: 'Box 1', color: 'orange' },
-        { name: 'Box 1', color: 'yellow' },
-        { name: 'Box 1', color: 'pink' }
-      ]
-    }
-  },
-  mounted() {},
-  methods: {},
-  computed: {
-    groupItems() {
-      let groups = []
-      for (let i = 0; i < this.items.length; i += 2) {
-        groups.push(this.items.slice(i, i + 2))
-      }
-      console.log(groups)
-      return groups
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.carousel {
-  margin-bottom: 10px;
-  width: 20vw;
-  height: 25vh;
-
-  h4 {
-    margin: 10px 0 0 0;
-    padding: 0;
-    text-align: center;
-    color: #fff;
-  }
-
-  .box {
-    margin-top: 10px;
-    height: 100px;
-  }
-}
-</style>

src/views/sensingDevice/components/carEcharts.vue

@@ -0,0 +1,167 @@
+<template>
+  <div id="carmain"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'CarEcharts',
+  data() {
+    return {}
+  },
+  mounted() {
+    // * echarts 实例
+    const chartDom = document.getElementById('carmain')
+    const myChart = echarts.init(chartDom)
+    // * echarts 选项
+    let option
+    let app = {}
+    const categories = (function () {
+      let now = new Date()
+      let res = []
+      let len = 10
+      while (len--) {
+        res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
+        now = new Date(+now - 2000)
+      }
+      return res
+    })()
+    const categories2 = (function () {
+      let res = []
+      let len = 10
+      while (len--) {
+        res.push(10 - len - 1)
+      }
+      return res
+    })()
+    const data = (function () {
+      let res = []
+      let len = 10
+      while (len--) {
+        res.push(Math.round(Math.random() * 1000))
+      }
+      return res
+    })()
+    const data2 = (function () {
+      let res = []
+      let len = 0
+      while (len < 10) {
+        res.push(+(Math.random() * 10 + 5).toFixed(1))
+        len++
+      }
+      return res
+    })()
+    option = {
+      title: {
+        // text: 'Dynamic Data'
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#283b56'
+          }
+        }
+      },
+      legend: {},
+      toolbox: {
+        show: true,
+        feature: {
+          dataView: { readOnly: false },
+          restore: {},
+          saveAsImage: {}
+        }
+      },
+      dataZoom: {
+        show: false,
+        start: 0,
+        end: 100
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: true,
+          data: categories
+        },
+        {
+          type: 'category',
+          boundaryGap: true,
+          data: categories2
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          scale: true,
+          // name: 'Price',
+          // max: 30,
+          min: 0
+          // boundaryGap: [0.2, 0.2]
+        },
+        {
+          type: 'value',
+          scale: true,
+          // name: 'Order',
+          // max: 1200,
+          min: 0
+          // boundaryGap: [0.2, 0.2]
+        }
+      ],
+      series: [
+        {
+          // name: 'Dynamic Bar',
+          type: 'bar',
+          xAxisIndex: 1,
+          yAxisIndex: 1,
+          data: data
+        },
+        {
+          // name: 'Dynamic Line',
+          type: 'line',
+          data: data2
+        }
+      ]
+    }
+    app.count = 11
+    setInterval(function () {
+      let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')
+      data.shift()
+      data.push(Math.round(Math.random() * 1000))
+      data2.shift()
+      data2.push(+(Math.random() * 10 + 5).toFixed(1))
+      categories.shift()
+      categories.push(axisData)
+      categories2.shift()
+      categories2.push(app.count++)
+      myChart.setOption({
+        xAxis: [
+          {
+            data: categories
+          },
+          {
+            data: categories2
+          }
+        ],
+        series: [
+          {
+            data: data
+          },
+          {
+            data: data2
+          }
+        ]
+      })
+    }, 2100)
+
+    option && myChart.setOption(option)
+  }
+}
+</script>
+
+<style lang="scss">
+#carmain {
+  width: 17vw;
+  height: 30vh;
+}
+</style>

src/views/sensingDevice/components/carLarge.vue

@@ -4,13 +4,17 @@
     <div class="car_large_title">
       <div class="car_large_title_text">车流量</div>
     </div>
-    <div class="car_large_main">Echarts</div>
+    <div class="car_large_main">
+      <CarEcharts></CarEcharts>
+    </div>
   </div>
 </template>
 
 <script>
+import CarEcharts from './carEcharts.vue'
 export default {
   name: 'CarLarge',
+  components: { CarEcharts },
   data() {
     return {}
   }
@@ -32,7 +36,7 @@ export default {
 
     .car_large_title_text {
       margin-left: 2vw;
-      font-size: 0.1vw;
+      font-size: 0.8rem;
       font-family: 'PingFangSC';
       line-height: 4vh;
       color: #edf1f7;

src/views/sensingDevice/components/deviceLive.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="device_live">
+    <div class="device_main">
+      <div class="device_main_header">
+        <div class="device_main_header_title">
+          {{ title }}
+        </div>
+        <!-- 弹窗关闭按钮 -->
+        <div class="device_main_header_box" @click="handleClose"></div>
+      </div>
+      <div class="device_main_body">
+        <div class="live">
+          <LivePlayer aspect="fullscreen"></LivePlayer>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LivePlayer from '@liveqing/liveplayer'
+export default {
+  name: 'DeviceLive',
+  components: { LivePlayer },
+  data() {
+    return {
+      title: '射阳幸福大道明湖大桥西侧东向西2(标卡)'
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleClose() {
+      this.$emit('updateClose')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device_live {
+  width: 70vw;
+  height: 70vh;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+
+  .device_main {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    background: url('@/assets/picture/bg_popup__middle.png') no-repeat;
+    background-size: 100% 100%;
+
+    .device_main_header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 4.6vh;
+
+      .device_main_header_title {
+        margin-left: 1vw;
+        color: #bfe7f9;
+        font-size: 0.8rem;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        line-height: 4.6vh;
+        text-shadow: 0 0 3px rgba($color: #a7dbf3, $alpha: 0.66);
+      }
+
+      .device_main_header_box {
+        margin-right: 0.55vw;
+        width: 2.6vh;
+        height: 2.6vh;
+
+        &:hover {
+          border-radius: 3px;
+          border: 1px solid #09d7e9;
+        }
+      }
+    }
+
+    .device_main_body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 65.4vh;
+
+      .live {
+        .player-wrapper {
+          width: 66vw;
+          height: 60vh;
+          position: relative;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/sensingDevice/components/mancarStatistics.vue

@@ -31,7 +31,7 @@ export default {
 
     .mancar_title_text {
       margin-left: 2vw;
-      font-size: 0.1vw;
+      font-size: 0.8rem;
       font-family: 'PingFangSC';
       line-height: 4vh;
       color: #edf1f7;

src/views/sensingDevice/components/mapSearch.vue

@@ -65,7 +65,7 @@ export default {
     .search_input::placeholder {
       position: relative;
       left: 1vw;
-      font-size: 0.5vw;
+      font-size: 0.8rem;
       font-family: '苹方-简';
       color: #ecf4f9;
     }
@@ -124,7 +124,7 @@ export default {
         color: #ecf4f9;
 
         .el-checkbox__label {
-          font-size: 0.4vw;
+          font-size: 0.8rem;
           font-family: '苹方-简 中黑体';
         }
 

src/views/sensingDevice/components/peopleEcharts.vue

@@ -45,8 +45,8 @@ export default {
       xAxis: [
         {
           type: 'category',
-          boundaryGap: false,
+          boundaryGap: false
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         }
       ],
       yAxis: [

src/views/sensingDevice/components/peopleLarge.vue

@@ -36,7 +36,7 @@ export default {
 
     .people_large_title_text {
       margin-left: 2vw;
-      font-size: 0.1vw;
+      font-size: 0.8rem;
       font-family: 'PingFangSC';
       line-height: 4vh;
       color: #edf1f7;

src/views/sensingDevice/components/publicCatch.vue

@@ -35,16 +35,16 @@ export default {
 
   .capture_title {
     width: 24vw;
-    height: 4vh;
+    height: 4.5vh;
     background-image: url('@/assets/picture/bg_small_title.png');
     background-size: 100% auto;
     background-repeat: no-repeat;
 
     .capture_title_text {
-      margin-left: 2vw;
+      margin-left: 3vw;
-      font-size: 0.1vw;
+      font-size: 0.8rem;
-      font-family: 'PingFangSC';
+      font-family: PingFangSC, PingFang SC;
-      line-height: 4vh;
+      line-height: 4.5vh;
       color: #edf1f7;
     }
   }

src/views/sensingDevice/index.vue

@@ -2,6 +2,30 @@
   <div class="device">
     <!-- 地图组件 -->
     <MapDevice></MapDevice>
+    <!-- 设备弹窗 -->
+    <DeviceLive v-if="play" @updateClose="onUpdateClose"></DeviceLive>
+    <div v-else></div>
+    <!-- 自定义遮罩层 -->
+    <div class="overlay" v-if="play"></div>
+    <div v-else></div>
+    <!-- 头部区域 -->
+    <div class="system_title">
+      <!-- 占位 -->
+      <div class="blank"></div>
+      <div class="title_body">
+        <!-- 警徽 -->
+        <div class="title_icon">
+          <div class="police_icon"></div>
+        </div>
+        <!-- 项目名 -->
+        <div class="title_text">{{ title_text }}</div>
+      </div>
+      <div class="time_body">
+        <div class="box_all">
+          <div class="time_item"></div>
+        </div>
+      </div>
+    </div>
     <!-- 左侧区域 -->
     <div class="left">
       <ManCar></ManCar>
@@ -29,6 +53,7 @@ import ManCar from './components/mancarStatistics.vue' // * 人车统计
 import PeopleLarge from './components/peopleLarge.vue' // * 人流量
 import CarLarge from './components/carLarge.vue' // * 车流量
 import PublicCatch from './components/publicCatch.vue' // * 通用抓拍
+import DeviceLive from './components/deviceLive.vue' // * 感知设备弹窗
 export default {
   components: {
     MapDevice,
@@ -36,7 +61,8 @@ export default {
     ManCar,
     PeopleLarge,
     CarLarge,
-    PublicCatch
+    PublicCatch,
+    DeviceLive
   },
   data() {
     return {
@@ -44,23 +70,102 @@ export default {
       carouselData: [
         { id: 1, title: '人脸抓拍' },
         { id: 2, title: '车辆抓拍' }
-      ]
+      ],
+      title_text: '射阳沿海治安防控综合平台',
+      play: true
     }
   },
   created() {},
   mounted() {},
-  methods: {},
+  methods: {
+    onUpdateClose() {
+      this.play = !this.play
+    }
+  },
   computed: {}
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .device {
   width: 100vw;
   height: 100vh;
   position: relative;
   overflow: hidden;
 
+  // * 遮罩层样式
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba($color: #96c3ff, $alpha: 0.2);
+    display: block;
+    z-index: 1;
+  }
+
+  .system_title {
+    width: 100vw;
+    height: 14vh;
+    position: absolute;
+    top: 0;
+    background: url('@/assets/homepage/title_back.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    .blank {
+      width: 24vw;
+      height: 14vh;
+    }
+    .title_body {
+      height: 7vh;
+      display: flex;
+      z-index: 2;
+
+      .title_icon {
+        width: 3.5vw;
+        height: 7vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .police_icon {
+          width: 2.7vw;
+          height: 5.4vh;
+          background: url('@/assets/homepage/police.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      .title_text {
+        color: aliceblue;
+        text-align: center;
+        line-height: 7vh;
+        font-size: 2.25rem;
+        font-weight: 700;
+      }
+    }
+    .time_body {
+      width: 24vw;
+      height: 7vh;
+
+      .box_all {
+        width: 12vw;
+        height: 7vh;
+        // background: #ad337f;
+        .time_item {
+          width: 12vw;
+          height: 3.5vh;
+          text-align: center;
+          color: #37fdc7;
+          font-size: 1.5rem;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
   .left {
     position: absolute;
     top: 10vh;

src/views/videoMonitor/components/livePlayer.vue

@@ -266,7 +266,7 @@ export default {
               .icon_left {
                 width: 1vw;
                 height: 2vh;
-                background: url(../../../assets/picture/24gf-playCircle.png);
+                background: url('../../../assets/icon-hza/24gf-playCircle.png');
                 background-size: 100% auto;
                 background-repeat: no-repeat;
                 display: inline-block;