From 1b2a8b4530835bea8e9037d8189ed98e29e8718d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8B=AC=E6=A0=91=E7=9A=84=E9=A3=8E?= <2167228784@qq.com>
Date: Tue, 23 Apr 2024 16:03:04 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=87=8D=E6=96=B0=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=E7=A1=AE=E4=BF=9D=E6=9C=80=E6=96=B0=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  33 +-
 package.json                                  |   1 +
 src/App.vue                                   |   4 +-
 src/views/Layout/index.vue                    |   1 +
 src/views/home/index.vue                      |   3 +-
 src/views/map/components/MapContainer.vue     |   1 +
 .../components/mapSearchCopy.vue              | 151 ++++++
 .../videoMonitor/components/videoDialog.vue   | 430 ++++++++++++++++++
 .../videoMonitor/components/videoTree.vue     | 430 ++++++++++++++++++
 9 files changed, 1035 insertions(+), 19 deletions(-)
 create mode 100644 src/views/sensingDevice/components/mapSearchCopy.vue
 create mode 100644 src/views/videoMonitor/components/videoDialog.vue
 create mode 100644 src/views/videoMonitor/components/videoTree.vue

diff --git a/package-lock.json b/package-lock.json
index 51f4489..90eccc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "element-ui": "^2.15.14",
         "js-cookie": "^3.0.5",
         "json-loader": "^0.5.7",
+        "postcss": "^8.4.38",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
@@ -8868,13 +8869,13 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -10317,9 +10318,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -18980,13 +18981,13 @@
       }
     },
     "postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "requires": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       }
     },
     "postcss-calc": {
@@ -20063,9 +20064,9 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
     "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
     },
     "source-map-support": {
       "version": "0.5.21",
diff --git a/package.json b/package.json
index 42ba6c3..072f198 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "element-ui": "^2.15.14",
     "js-cookie": "^3.0.5",
     "json-loader": "^0.5.7",
+    "postcss": "^8.4.38",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
diff --git a/src/App.vue b/src/App.vue
index 791b9e7..b3b43ec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,8 +8,8 @@
 
 <script>
 export default {
-  name: "App",
-};
+  name: 'App'
+}
 </script>
 
 <style lang="scss">
diff --git a/src/views/Layout/index.vue b/src/views/Layout/index.vue
index 3903648..7999ae4 100644
--- a/src/views/Layout/index.vue
+++ b/src/views/Layout/index.vue
@@ -9,6 +9,7 @@
         {{ timeArr.week }}
         <el-avatar class="avatar" size="large"></el-avatar>
         <span class="user"> {{ userName }} </span>
+        <span class="user"> {{ userName }} </span>
       </span>
     </header>
     <div class="layout-main">
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 091d8ca..af05309 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -77,7 +77,8 @@ export default {
   //     line-height: 6vh;
   //   }
   // }
-
+  .div {
+  }
   .under_btn {
     position: absolute;
     bottom: 5vh;
diff --git a/src/views/map/components/MapContainer.vue b/src/views/map/components/MapContainer.vue
index bdcf56c..98aad8b 100644
--- a/src/views/map/components/MapContainer.vue
+++ b/src/views/map/components/MapContainer.vue
@@ -2,6 +2,7 @@
   <div id="map">
     <MapCheck></MapCheck>
     <div class="scroll">
+      <div class="scroll-item"></div>
       <MapScroll v-for="item in 3" :key="item"></MapScroll>
     </div>
   </div>
diff --git a/src/views/sensingDevice/components/mapSearchCopy.vue b/src/views/sensingDevice/components/mapSearchCopy.vue
new file mode 100644
index 0000000..8d4667e
--- /dev/null
+++ b/src/views/sensingDevice/components/mapSearchCopy.vue
@@ -0,0 +1,151 @@
+<!-- 感知设备搜索及复选图层 -->
+<template>
+  <div class="search_check">
+    <!-- 右侧区域搜索框 -->
+    <div class="search">
+      <input placeholder="请输入摄像头名称" class="search_input" />
+      <button class="search_button">
+        <i class="el-icon-search"></i>
+      </button>
+    </div>
+    <!-- 沿海视频切换框 -->
+    <div class="check">
+      <div class="check_coverage">
+        <div class="check_title">图层</div>
+      </div>
+      <div class="check_coveragebottom">
+        <el-checkbox class="checkbox" size="mini">全选</el-checkbox>
+        <el-checkbox size="mini" class="checkbox">
+          <div class="check_label">
+            <div class="check_label_text">沿海视频</div>
+            <div class="check_label_count">(446)</div>
+          </div>
+        </el-checkbox>
+        <el-checkbox size="mini" class="checkbox">
+          <div class="check_label">
+            <div class="check_label_text">非沿海视频</div>
+            <div class="check_label_count">(779)</div>
+          </div>
+        </el-checkbox>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapSearch',
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss">
+.search_check {
+  width: 16vw;
+  height: 27vh;
+  // position: absolute;
+  // right: 23vw;
+  position: relative;
+  // background: #02274e;
+  z-index: 2;
+
+  .search {
+    display: flex;
+    justify-content: start;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: #fff;
+
+    .search_input {
+      margin: 0;
+      padding: 0;
+      width: 14vw;
+      border: 1px solid #00f5ff;
+      background-color: #02274e;
+      color: #ecf4f9;
+      outline: none;
+    }
+
+    .search_input::placeholder {
+      position: relative;
+      left: 1vw;
+      font-size: 0.8rem;
+      font-family: '苹方-简';
+      color: #ecf4f9;
+    }
+
+    .search_button {
+      width: 2.5vw;
+      height: 4vh;
+      border: 0;
+      background-color: #03d6df;
+      outline: none;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #02c7ce;
+      }
+
+      .el-icon-search {
+        color: #fff;
+      }
+    }
+  }
+
+  .check {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    width: 13vw;
+    height: 18vh;
+    position: absolute;
+    top: 7vh;
+    right: 0;
+    background-image: url('@/assets/picture/bg_info.png');
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+
+    .check_coverage {
+      height: 3vh;
+    }
+
+    .check_title {
+      margin-left: 1vw;
+      color: #ecf4f9;
+      font-size: 0.8rem;
+      line-height: 3vh;
+      font-family: '苹方-简 中黑体';
+    }
+
+    .check_coveragebottom {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      height: 15vh;
+
+      .el-checkbox {
+        margin-left: 1vw;
+        color: #ecf4f9;
+
+        .el-checkbox__label {
+          font-size: 0.8rem;
+          font-family: '苹方-简 中黑体';
+        }
+
+        .check_label {
+          display: flex;
+          justify-content: space-between;
+          width: 10vw;
+
+          .check_label_count {
+            width: 3vw;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/videoMonitor/components/videoDialog.vue b/src/views/videoMonitor/components/videoDialog.vue
new file mode 100644
index 0000000..7495a14
--- /dev/null
+++ b/src/views/videoMonitor/components/videoDialog.vue
@@ -0,0 +1,430 @@
+<!-- 封装监控视频组件 -->
+<template>
+  <div class="live">
+    <!-- 弹窗整体 -->
+    <div class="live_card">
+      <div class="live_card_header">
+        <div class="live_card_title">射阳县合德镇解放西路42号（枪机）</div>
+        <!-- 关闭弹窗 -->
+        <div class="delete" @click="handleClose"></div>
+        <!-- <div class="live_card_icon" @click="handleClose">
+          <i class="el-icon-close"></i>
+        </div> -->
+      </div>
+      <div class="live_card_body">
+        <div class="live_card_body_left">
+          <div class="live_card_body_left_top">
+            <h3>重点人员信息</h3>
+          </div>
+          <div class="live_card_body_left_bottom">
+            <!-- 设备名称信息 -->
+            <div class="live_card_body_left_bottom_div">
+              <div class="item">
+                设备名称：
+                <div class="bottom_div_color">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备Ip:
+                <div class="bottom_div_color2">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                监控类型:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                国际编码:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备方位:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备品牌:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备经度:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备维度:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+            </div>
+            <!-- 视频按钮 -->
+            <div class="live_card_body_left_bottom_button">
+              <el-button class="button_left">
+                <span class="icon_left"></span>
+                <span class="add">视频回放</span>
+              </el-button>
+              <el-button class="button_right">
+                <div class="icon_left1"></div>
+                视频回放
+              </el-button>
+            </div>
+            <!-- 开始时间 -->
+            <div class="live_card_body_left_bottom_starttime">
+              <div class="time_icon"></div>
+              <span>开始时间:</span>
+              <span>
+                <el-date-picker
+                  placeholder="请选择日期与时间"
+                  prefix-icon="prefix-icon-class"
+                  type="datetime"
+                ></el-date-picker>
+              </span>
+            </div>
+            <!-- 结束时间 -->
+            <div class="live_card_body_left_bottom_endtime">
+              <div class="time_icon1"></div>
+              <span>结束时间:</span>
+              <span>
+                <el-date-picker
+                  placeholder="请选择日期与时间"
+                  prefix-icon="prefix-icon-class"
+                  type="datetime"
+                >
+                </el-date-picker>
+              </span>
+            </div>
+          </div>
+        </div>
+        <!-- 视频 -->
+        <div class="live_card_body_right">
+          <!-- <LivePlayer></LivePlayer> -->
+          <div class="video_button">
+            <div class="video_buton_style">
+              <div class="video_icon video_icon1"></div>
+              <div class="video_icon video_icon2"></div>
+              <div class="video_icon video_icon3"></div>
+              <div class="video_icon video_icon4"></div>
+              <div class="video_icon video_icon5"></div>
+              <div class="video_icon video_icon6"></div>
+              <div class="video_icon video_icon7"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import LivePlayer from '@liveqing/liveplayer'
+export default {
+  name: 'MapPlayer',
+  // components: { LivePlayer },
+  props: {
+    videoUrl: {
+      type: String
+    },
+    deviceName: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      play: true
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('updateClose')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+.live {
+  position: absolute;
+  top: 55%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  background: url(../../../assets/icon-hza/bg_6.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  .live_card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 83vw;
+    height: 75vh;
+    .live_card_header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 83vw;
+      height: 6vh;
+      color: #bfe7f9;
+      .delete {
+        width: 2vw;
+        height: 3vh;
+        background-color: #fff;
+        opacity: 0;
+      }
+
+      .live_card_title,
+      .live_card_icon {
+        margin-left: 5px;
+        font-size: 1.5rem;
+      }
+      .live_card_icon {
+        margin-right: 5px;
+        color: #14b9d2;
+        margin-right: 1vw;
+        &:hover {
+          color: #006d7e;
+        }
+      }
+      .live_card_title {
+        margin-left: 3vw;
+      }
+    }
+
+    .live_card_body {
+      display: flex;
+      align-items: center;
+      width: 83vw;
+      height: 76vh;
+
+      .live_card_body_left {
+        overflow: hidden;
+        width: 22vw;
+        height: 65vh;
+        margin-left: 3vw;
+        background-image: url(../../../assets/icon-hza/bg_left.png);
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        .live_card_body_left_top {
+          width: 100%;
+          height: 4vh;
+          background-image: url(../../../assets/icon-hza/bg_title.png);
+          background-size: 100% auto;
+          background-repeat: no-repeat;
+          display: flex;
+          align-items: center;
+          padding-left: 1vw;
+          color: #bfe7f9;
+        }
+        .live_card_body_left_bottom {
+          width: 100%;
+          height: 61;
+          .live_card_body_left_bottom_div {
+            width: 18vw;
+            height: 30vh;
+            margin-left: 1vw;
+            margin-top: 1vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            .item {
+              display: flex;
+              font-size: 1rem;
+              color: #ecf4f9;
+              letter-spacing: 0.1rem;
+            }
+            .bottom_div_color {
+              color: #00f5ff;
+              margin-left: 0.7vh;
+            }
+            .bottom_div_color1 {
+              color: #edf1f7;
+              margin-left: 1.7vh;
+            }
+            .bottom_div_color2 {
+              color: #edf1f7;
+              margin-left: 3vh;
+            }
+          }
+          .live_card_body_left_bottom_button {
+            height: 4vh;
+            width: 18vw;
+
+            margin-left: 1vw;
+            margin-top: 2vh;
+            display: flex;
+            .button_left {
+              background-color: #063d6c;
+              width: 9vw;
+              height: 4vh;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+              border-radius: 0%;
+              border-color: #063d6c;
+              &:hover {
+                background-color: #005ea1;
+              }
+              .icon_left {
+                width: 1vw;
+                height: 2vh;
+                background: url('../../../assets/icon-hza/24gf-playCircle.png');
+                background-size: 100% auto;
+                background-repeat: no-repeat;
+                display: inline-block;
+                margin-right: 0.5vw;
+              }
+            }
+            .button_right {
+              background-color: #063d6c;
+              width: 9vw;
+              height: 4vh;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+              border-radius: 0%;
+              border-color: #063d6c;
+              &:hover {
+                background-color: #005ea1;
+              }
+              .icon_left1 {
+                width: 1vw;
+                height: 2vh;
+                background: url(../../../assets/icon-hza/bg_105.png);
+                display: inline-block;
+                margin-right: 0.5vw;
+                background-size: 100% auto;
+                background-repeat: no-repeat;
+              }
+            }
+          }
+          .live_card_body_left_bottom_starttime {
+            width: 18vw;
+            height: 4vh;
+            margin-top: 4vh;
+            margin-left: 1vw;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: #ecf4f9;
+            position: relative;
+            .el-input--suffix .el-input__inner {
+              background-color: transparent;
+              width: 15vw;
+            }
+            .el-input--prefix .el-input__inner {
+              border-color: #00539f;
+              border-radius: 0%;
+            }
+            .time_icon {
+              width: 1vw;
+              height: 2vh;
+              background-image: url(../../../assets/icon-hza/bg_50.png);
+              position: absolute;
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+              right: 0.4vw;
+            }
+          }
+          .live_card_body_left_bottom_endtime {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 18vw;
+            height: 4vh;
+            margin-left: 1vw;
+            margin-top: 4vh;
+            color: #fff;
+            position: relative;
+            .el-input--suffix .el-input__inner {
+              background-color: transparent;
+              width: 15vw;
+            }
+            .el-input--prefix .el-input__inner {
+              border-color: #00539f;
+              border-radius: 0%;
+            }
+            .prefix-icon-class {
+              display: none;
+            }
+            .time_icon1 {
+              width: 1vw;
+              height: 2vh;
+              background-image: url(../../../assets/icon-hza/bg_50.png);
+              position: absolute;
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+              right: 0.4vw;
+              top: 0.4vh;
+            }
+          }
+        }
+      }
+      .live_card_body_right {
+        margin-left: 3vw;
+        width: 52vw;
+        height: 65vh;
+        background-image: url(../../../assets/picture/bg_right.png);
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        .video_button {
+          width: 52vw;
+          height: 5vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .video_buton_style {
+            width: 13vw;
+            height: 3.5vh;
+            display: flex;
+            justify-content: space-around;
+
+            .video_icon {
+              width: 1vw;
+              height: 2vh;
+              margin-top: 1vh;
+            }
+            .video_icon1 {
+              background-image: url(../../../assets/picture/icon_but／reset\(1\).png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon2 {
+              background-image: url(../../../assets/icon-hza/bg_68.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon3 {
+              background-image: url(../../../assets/icon-hza/bg_70.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon4 {
+              background-image: url(../../../assets/icon-hza/bg_60.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+              width: 2vw;
+              height: 4vh;
+              margin-top: 0;
+            }
+            .video_icon5 {
+              background-image: url(../../../assets/icon-hza/bg_74.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon6 {
+              background-image: url(../../../assets/icon-hza/bg_71.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon7 {
+              background-image: url(../../../assets/picture/icon_but／reset.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/videoMonitor/components/videoTree.vue b/src/views/videoMonitor/components/videoTree.vue
new file mode 100644
index 0000000..7495a14
--- /dev/null
+++ b/src/views/videoMonitor/components/videoTree.vue
@@ -0,0 +1,430 @@
+<!-- 封装监控视频组件 -->
+<template>
+  <div class="live">
+    <!-- 弹窗整体 -->
+    <div class="live_card">
+      <div class="live_card_header">
+        <div class="live_card_title">射阳县合德镇解放西路42号（枪机）</div>
+        <!-- 关闭弹窗 -->
+        <div class="delete" @click="handleClose"></div>
+        <!-- <div class="live_card_icon" @click="handleClose">
+          <i class="el-icon-close"></i>
+        </div> -->
+      </div>
+      <div class="live_card_body">
+        <div class="live_card_body_left">
+          <div class="live_card_body_left_top">
+            <h3>重点人员信息</h3>
+          </div>
+          <div class="live_card_body_left_bottom">
+            <!-- 设备名称信息 -->
+            <div class="live_card_body_left_bottom_div">
+              <div class="item">
+                设备名称：
+                <div class="bottom_div_color">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备Ip:
+                <div class="bottom_div_color2">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                监控类型:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                国际编码:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备方位:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备品牌:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备经度:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+              <div class="item">
+                设备维度:
+                <div class="bottom_div_color1">阿德飒飒打撒</div>
+              </div>
+            </div>
+            <!-- 视频按钮 -->
+            <div class="live_card_body_left_bottom_button">
+              <el-button class="button_left">
+                <span class="icon_left"></span>
+                <span class="add">视频回放</span>
+              </el-button>
+              <el-button class="button_right">
+                <div class="icon_left1"></div>
+                视频回放
+              </el-button>
+            </div>
+            <!-- 开始时间 -->
+            <div class="live_card_body_left_bottom_starttime">
+              <div class="time_icon"></div>
+              <span>开始时间:</span>
+              <span>
+                <el-date-picker
+                  placeholder="请选择日期与时间"
+                  prefix-icon="prefix-icon-class"
+                  type="datetime"
+                ></el-date-picker>
+              </span>
+            </div>
+            <!-- 结束时间 -->
+            <div class="live_card_body_left_bottom_endtime">
+              <div class="time_icon1"></div>
+              <span>结束时间:</span>
+              <span>
+                <el-date-picker
+                  placeholder="请选择日期与时间"
+                  prefix-icon="prefix-icon-class"
+                  type="datetime"
+                >
+                </el-date-picker>
+              </span>
+            </div>
+          </div>
+        </div>
+        <!-- 视频 -->
+        <div class="live_card_body_right">
+          <!-- <LivePlayer></LivePlayer> -->
+          <div class="video_button">
+            <div class="video_buton_style">
+              <div class="video_icon video_icon1"></div>
+              <div class="video_icon video_icon2"></div>
+              <div class="video_icon video_icon3"></div>
+              <div class="video_icon video_icon4"></div>
+              <div class="video_icon video_icon5"></div>
+              <div class="video_icon video_icon6"></div>
+              <div class="video_icon video_icon7"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import LivePlayer from '@liveqing/liveplayer'
+export default {
+  name: 'MapPlayer',
+  // components: { LivePlayer },
+  props: {
+    videoUrl: {
+      type: String
+    },
+    deviceName: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      play: true
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('updateClose')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+.live {
+  position: absolute;
+  top: 55%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  background: url(../../../assets/icon-hza/bg_6.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  .live_card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 83vw;
+    height: 75vh;
+    .live_card_header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 83vw;
+      height: 6vh;
+      color: #bfe7f9;
+      .delete {
+        width: 2vw;
+        height: 3vh;
+        background-color: #fff;
+        opacity: 0;
+      }
+
+      .live_card_title,
+      .live_card_icon {
+        margin-left: 5px;
+        font-size: 1.5rem;
+      }
+      .live_card_icon {
+        margin-right: 5px;
+        color: #14b9d2;
+        margin-right: 1vw;
+        &:hover {
+          color: #006d7e;
+        }
+      }
+      .live_card_title {
+        margin-left: 3vw;
+      }
+    }
+
+    .live_card_body {
+      display: flex;
+      align-items: center;
+      width: 83vw;
+      height: 76vh;
+
+      .live_card_body_left {
+        overflow: hidden;
+        width: 22vw;
+        height: 65vh;
+        margin-left: 3vw;
+        background-image: url(../../../assets/icon-hza/bg_left.png);
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        .live_card_body_left_top {
+          width: 100%;
+          height: 4vh;
+          background-image: url(../../../assets/icon-hza/bg_title.png);
+          background-size: 100% auto;
+          background-repeat: no-repeat;
+          display: flex;
+          align-items: center;
+          padding-left: 1vw;
+          color: #bfe7f9;
+        }
+        .live_card_body_left_bottom {
+          width: 100%;
+          height: 61;
+          .live_card_body_left_bottom_div {
+            width: 18vw;
+            height: 30vh;
+            margin-left: 1vw;
+            margin-top: 1vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            .item {
+              display: flex;
+              font-size: 1rem;
+              color: #ecf4f9;
+              letter-spacing: 0.1rem;
+            }
+            .bottom_div_color {
+              color: #00f5ff;
+              margin-left: 0.7vh;
+            }
+            .bottom_div_color1 {
+              color: #edf1f7;
+              margin-left: 1.7vh;
+            }
+            .bottom_div_color2 {
+              color: #edf1f7;
+              margin-left: 3vh;
+            }
+          }
+          .live_card_body_left_bottom_button {
+            height: 4vh;
+            width: 18vw;
+
+            margin-left: 1vw;
+            margin-top: 2vh;
+            display: flex;
+            .button_left {
+              background-color: #063d6c;
+              width: 9vw;
+              height: 4vh;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+              border-radius: 0%;
+              border-color: #063d6c;
+              &:hover {
+                background-color: #005ea1;
+              }
+              .icon_left {
+                width: 1vw;
+                height: 2vh;
+                background: url('../../../assets/icon-hza/24gf-playCircle.png');
+                background-size: 100% auto;
+                background-repeat: no-repeat;
+                display: inline-block;
+                margin-right: 0.5vw;
+              }
+            }
+            .button_right {
+              background-color: #063d6c;
+              width: 9vw;
+              height: 4vh;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+              border-radius: 0%;
+              border-color: #063d6c;
+              &:hover {
+                background-color: #005ea1;
+              }
+              .icon_left1 {
+                width: 1vw;
+                height: 2vh;
+                background: url(../../../assets/icon-hza/bg_105.png);
+                display: inline-block;
+                margin-right: 0.5vw;
+                background-size: 100% auto;
+                background-repeat: no-repeat;
+              }
+            }
+          }
+          .live_card_body_left_bottom_starttime {
+            width: 18vw;
+            height: 4vh;
+            margin-top: 4vh;
+            margin-left: 1vw;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: #ecf4f9;
+            position: relative;
+            .el-input--suffix .el-input__inner {
+              background-color: transparent;
+              width: 15vw;
+            }
+            .el-input--prefix .el-input__inner {
+              border-color: #00539f;
+              border-radius: 0%;
+            }
+            .time_icon {
+              width: 1vw;
+              height: 2vh;
+              background-image: url(../../../assets/icon-hza/bg_50.png);
+              position: absolute;
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+              right: 0.4vw;
+            }
+          }
+          .live_card_body_left_bottom_endtime {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 18vw;
+            height: 4vh;
+            margin-left: 1vw;
+            margin-top: 4vh;
+            color: #fff;
+            position: relative;
+            .el-input--suffix .el-input__inner {
+              background-color: transparent;
+              width: 15vw;
+            }
+            .el-input--prefix .el-input__inner {
+              border-color: #00539f;
+              border-radius: 0%;
+            }
+            .prefix-icon-class {
+              display: none;
+            }
+            .time_icon1 {
+              width: 1vw;
+              height: 2vh;
+              background-image: url(../../../assets/icon-hza/bg_50.png);
+              position: absolute;
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+              right: 0.4vw;
+              top: 0.4vh;
+            }
+          }
+        }
+      }
+      .live_card_body_right {
+        margin-left: 3vw;
+        width: 52vw;
+        height: 65vh;
+        background-image: url(../../../assets/picture/bg_right.png);
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        .video_button {
+          width: 52vw;
+          height: 5vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .video_buton_style {
+            width: 13vw;
+            height: 3.5vh;
+            display: flex;
+            justify-content: space-around;
+
+            .video_icon {
+              width: 1vw;
+              height: 2vh;
+              margin-top: 1vh;
+            }
+            .video_icon1 {
+              background-image: url(../../../assets/picture/icon_but／reset\(1\).png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon2 {
+              background-image: url(../../../assets/icon-hza/bg_68.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon3 {
+              background-image: url(../../../assets/icon-hza/bg_70.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon4 {
+              background-image: url(../../../assets/icon-hza/bg_60.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+              width: 2vw;
+              height: 4vh;
+              margin-top: 0;
+            }
+            .video_icon5 {
+              background-image: url(../../../assets/icon-hza/bg_74.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon6 {
+              background-image: url(../../../assets/icon-hza/bg_71.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+            .video_icon7 {
+              background-image: url(../../../assets/picture/icon_but／reset.png);
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>