视频回放bug

packages/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -1,14 +1,12 @@
 <template>
   <section class="AppISManage">
-    <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict"
+    <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict" @treeCommand="handleSliderOption" @select="handleSelectMonitor" :render-item="renderTreeItem" ref="DeviceSlider" />
-                   @treeCommand="handleSliderOption" @select="handleSelectMonitor"
-                   :render-item="renderTreeItem" ref="DeviceSlider"/>
     <div class="monitorPane" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)">
       <div class="headerBar">
         <el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
           <!-- <i slot="prefix" class="iconfont iconjdq_led_Led1"/> -->
           <img slot="prefix" src="https://cdn.cunwuyun.cn/slw2.0/images/fp.png">
-          <el-option v-for="(op,i) in splitOps" :key="i" v-bind="op"/>
+          <el-option v-for="(op,i) in splitOps" :key="i" v-bind="op" />
         </el-select>
         <div class="headerBar-item" v-if="monitors.length > 1" @click="playbackUrls = [], isShowBar = !isShowBar" :class="[isShowBar ? '' : 'cancel-xt']">
           <img src="https://cdn.cunwuyun.cn/slw2.0/images/xt.png">
@@ -16,85 +14,62 @@
         </div>
       </div>
       <div class="videoList">
-        <div
+        <div class="videoBox" v-for="(m, i) in monitors" :key="m.id" :style="currentSplitStyle">
-          class="videoBox"
+          <AiMonitor :instance="instance" :deviceId="m.deviceId" :isShowBar="isShowBar" :id="m.id" :playbackUrls="playbackUrls" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor">
-          v-for="(m, i) in monitors"
-          :key="m.id"
-          :style="currentSplitStyle">
-          <AiMonitor
-            :instance="instance"
-            :deviceId="m.deviceId"
-            :isShowBar="isShowBar"
-            :id="m.id"
-            :playbackUrls="playbackUrls"
-            :name="m.name"
-            @close="removeMonitor(i)"
-            ref="AiMonitor">
           </AiMonitor>
         </div>
       </div>
-      <Synergy
+      <Synergy ref="Synergy" :ids="ids" :instance="instance" @replay="onReplay" :isLoading.sync="isLoading" @backLiveing="playbackUrls = []" @checkChange="onCheckChange" v-if="!isShowBar && monitors.length" style="width: 100%; height: 68px;">
-        ref="Synergy"
-        :ids="ids"
-        :instance="instance"
-        @replay="onReplay"
-        :isLoading.sync="isLoading"
-        @backLiveing="playbackUrls = []"
-        @checkChange="onCheckChange"
-        v-if="!isShowBar && monitors.length"
-        style="width: 100%; height: 68px;">
       </Synergy>
     </div>
-    <ai-dialog title="修改名称" :visible.sync="dialog" width="500px" @onConfirm="handleSubmit(selected)"
+    <ai-dialog title="修改名称" :visible.sync="dialog" width="500px" @onConfirm="handleSubmit(selected)" @closed="selected={}">
-               @closed="selected={}">
       <el-form ref="form" :model="selected" label-width="80px" size="small" :rules="rules">
         <el-form-item label="设备名称" prop="name">
-          <el-input v-model="selected.name" clearable/>
+          <el-input v-model="selected.name" clearable />
         </el-form-item>
       </el-form>
     </ai-dialog>
-    <locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)"/>
+    <locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)" />
-    <ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId"
+    <ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId" :instance="instance" ref="BindArea" @change="handleSubmit(selected)" />
-             :instance="instance" ref="BindArea"
-             @change="handleSubmit(selected)"/>
   </section>
 </template>
 
 <script>
-  import {mapState} from 'vuex'
+  import { mapState } from 'vuex'
-  import DeviceSlider from "../components/deviceSlider"
+  import DeviceSlider from '../components/deviceSlider'
-  import LocateDialog from "../components/locateDialog"
+  import LocateDialog from '../components/locateDialog'
-  import AiMonitor from "../components/AiSlwVideo"
+  import AiMonitor from '../components/AiSlwVideo'
-  import Synergy from "../components/Synergy"
+  import Synergy from '../components/Synergy'
 
   export default {
-    name: "AppISManage",
+    name: 'AppISManage',
-    components: {LocateDialog, DeviceSlider, AiMonitor, Synergy},
+    components: { LocateDialog, DeviceSlider, AiMonitor, Synergy },
-    label: "监控实况",
+    label: '监控实况',
     props: {
       instance: Function,
       dict: Object,
-      permissions: Function
+      permissions: Function,
     },
     computed: {
       splitOps() {
         return [
-          {label: "单分屏", value: 1, per: "100%"},
+          { label: '单分屏', value: 1, per: '100%' },
-          {label: "四分屏", value: 4, per: "49.2%"},
+          { label: '四分屏', value: 4, per: '49.2%' },
-          {label: "九分屏", value: 9, per: "32%"}
+          { label: '九分屏', value: 9, per: '32%' },
         ]
       },
       currentSplitStyle() {
-        let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
+        let per =
-        return {width: per, height: per}
+          this.splitOps.find((e) => e.value == this.splitScreen)?.per || '100%'
+        return { width: per, height: per }
       },
       ...mapState(['user']),
 
-      ids () {
+      ids() {
         if (!this.monitors.length) return ''
 
-        return this.monitors.map(v => v.id).join(',')
+        return this.monitors.map((v) => v.id).join(',')
-      }
+      },
     },
 
     data() {
@@ -108,26 +83,27 @@
         isLoading: false,
         isShowBar: true,
         selected: {
-          areaId: ''
+          areaId: '',
         },
         videoUrl: '',
         playbackUrls: [],
         latlng: null,
         disabledLevel: 0,
         rules: {
-          name: [{required: true, message: "请填写 设备名称"}]
+          name: [{ required: true, message: '请填写 设备名称' }],
-        }
+        },
       }
     },
 
     watch: {
-      slider () {
+      slider() {
-        this.$refs.AiMonitor && this.$refs.AiMonitor.forEach(e => {
+        this.$refs.AiMonitor &&
-          e.reset()
+          this.$refs.AiMonitor.forEach((e) => {
-        })
+            e.reset()
+          })
 
         this.$refs.Synergy && this.$refs.Synergy.init()
-      }
+      },
     },
 
     created() {
@@ -143,18 +119,21 @@
       handleSelectMonitor(monitor) {
         if (monitor.type !== '1') return
 
-        let {id} = monitor,
+        let { id } = monitor,
-            index = this.monitors.findIndex(e => e.id == id)
+          index = this.monitors.findIndex((e) => e.id == id)
         if (index > -1) {
           this.$message.error('该监控视频已存在')
-        } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
+        } else if (
-          this.$message.error("可分屏监控已满,请先取消其他的监控")
+          this.monitors.length >= this.splitScreen &&
+          this.splitScreen > 1
+        ) {
+          this.$message.error('可分屏监控已满,请先取消其他的监控')
         } else {
           this.showMonitor(monitor)
         }
       },
 
-      onCheckChange (e) {
+      onCheckChange(e) {
         this.monitors.forEach((item, index) => {
           if (e.indexOf(item.index) === -1) {
             this.monitors.splice(index, 1)
@@ -167,347 +146,370 @@
           this.monitors = [this.monitors[0]]
         }
 
-        this.$refs.AiMonitor && this.$refs.AiMonitor.forEach(e => {
+        this.$refs.AiMonitor &&
-          e.reset()
+          this.$refs.AiMonitor.forEach((e) => {
-        })
+            e.reset()
+          })
       },
 
-      onReplay (e) {
+      onReplay(e) {
         this.isLoading = true
-        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
+        this.instance
-          params: {
+          .post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
-            ids: this.ids,
+            params: {
-            startTime: e.startTime,
+              ids: this.ids,
-            endTime: e.endTime,
+              startTime: e.startTime,
-            nvrCodes: this.ids
+              endTime: e.endTime,
-          }
+              nvrCodes: this.ids,
-        }).then(res => {
+            },
-          if (res.code == 0) {
+          })
-            if (res.data && res.data.length) {
+          .then((res) => {
-              this.playbackUrls = res.data
+            if (res.code == 0) {
-              this.isLoading = false
+              if (res.data && res.data.length) {
+                this.playbackUrls = res.data
+                this.isLoading = false
+              }
             }
-          }
+          })
-        }).catch(() => {
+          .catch(() => {
-          this.isLoading = false
+            this.isLoading = false
-        })
+          })
       },
 
       removeMonitor(i) {
         this.monitors.splice(i, 1)
+
+        if (!this.monitors.length) {
+          this.isShowBar = true
+        }
       },
 
       showMonitor(monitor, refresh = false) {
-        let {id: deviceId} = monitor
+        let { id: deviceId } = monitor
-        deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+        deviceId &&
-          params: {deviceId}
+          this.instance
-        }).then(res => {
+            .post('/app/appzyvideoequipment/getWebSdkUrl', null, {
-          if (res?.data) {
+              params: { deviceId },
-            this.videoUrl = res.data
+            })
-            let data = {
+            .then((res) => {
-              url: res.data,
+              if (res?.data) {
-              isShowPlayBtn: false
+                this.videoUrl = res.data
-            }
+                let data = {
-            if (refresh) {
+                  url: res.data,
-              monitor.url = data.url
+                  isShowPlayBtn: false,
-            } else if (this.splitScreen == 1) {
+                }
-              this.monitors = [{...monitor, ...data}]
+                if (refresh) {
-            } else {
+                  monitor.url = data.url
-              if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
+                } else if (this.splitScreen == 1) {
-                this.monitors.push({...monitor, ...data})
+                  this.monitors = [{ ...monitor, ...data }]
+                } else {
+                  if (
+                    this.monitors.findIndex((e) => e.id == monitor.id) === -1 &&
+                    this.monitors.length <= this.splitScreen
+                  ) {
+                    this.monitors.push({ ...monitor, ...data })
+                  }
+                }
               }
-            }
+            })
-          }
-        })
       },
-      renderTreeItem: function (h, {node, data}) {
+      renderTreeItem: function (h, { node, data }) {
         let show = data.deviceStatus == 1 ? 'show' : ''
         const ids = this.ids.split(',')
         const index = ids.indexOf(data.id) + 1
         if (node.isLeaf) {
           return (
-              <div class="flexRow">
+            <div class="flexRow">
-                {index > 0 ? 
+              {index > 0 ? <span>{index}</span> : ''}
-                <span>{ index }</span>
+              <i class={['iconfont', 'iconshipinjiankong', show]} />
-                : ''
+              <div>{node.label}</div>
-                }
+            </div>
-                <i class={['iconfont', 'iconshipinjiankong', show]}/>
-                <div>{node.label}</div>
-              </div>
           )
-        } else return (
+        } else
+          return (
             <div class="flexRow">
               <div>{node.label}</div>
-              {data.id != 'no_area' ? <div class="sta">
+              {data.id != 'no_area' ? (
-                    <p>{data.online || 0}</p>/{data.sum || 0}
+                <div class="sta">
-                  </div>
+                  <p>{data.online || 0}</p>/{data.sum || 0}
-                  : <div/>}
+                </div>
+              ) : (
+                <div />
+              )}
             </div>
-        )
+          )
       },
       handleSliderOption(e) {
         this.selected = {
           command: e.type,
-          ...e.node
+          ...e.node,
         }
         this.selected.areaId = e.node.areaId || this.user.info.areaId
-        if (e.type == "edit") {//修改名称
+        if (e.type == 'edit') {
+          //修改名称
           this.dialog = true
-        } else if (e.type == "area") {//绑定areaId
+        } else if (e.type == 'area') {
+          //绑定areaId
           this.$refs.BindArea?.chooseArea()
-        } else if (e.type == "locate") {//地图标绘
+        } else if (e.type == 'locate') {
-          this.latlng = e.node.lat && e.node.lng ? {
+          //地图标绘
-            lat: e.node.lat,
+          this.latlng =
-            lng: e.node.lng
+            e.node.lat && e.node.lng
-          } : ''
+              ? {
+                  lat: e.node.lat,
+                  lng: e.node.lng,
+                }
+              : ''
           this.locate = true
         }
       },
       handleSubmit(row) {
         delete row.createTime
-        return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
+        return this.instance
-          ...row
+          .post('/app/appzyvideoequipment/addOrUpdate', {
-        }).then(res => {
+            ...row,
-          if (res?.code == 0) {
+          })
-            this.$message.success("提交成功!")
+          .then((res) => {
-            this.dialog = false
+            if (res?.code == 0) {
-            this.$refs.DeviceSlider?.getDevices()
+              this.$message.success('提交成功!')
-          }
+              this.dialog = false
-        })
+              this.$refs.DeviceSlider?.getDevices()
+            }
+          })
       },
       handleLocate(row, locate) {
         if (locate) {
-          let {lat, lng} = locate.location
+          let { lat, lng } = locate.location
-          this.handleSubmit({...row, lat, lng}).then(() => {
+          this.handleSubmit({ ...row, lat, lng }).then(() => {
             this.locate = false
           })
         }
-      }
+      },
     },
     beforeDestroy() {
       this.monitors = []
-    }
+    },
   }
 </script>
 
 <style lang="scss" scoped>
-.AppISManage {
+  .AppISManage {
-  display: flex;
-  background: #202330;
-  height: 100%;
-
-  .monitorPane {
-    flex: 1;
-    min-width: 0;
-    padding: 20px 20px 20px 4px;
     display: flex;
-    flex-direction: column;
+    background: #202330;
+    height: 100%;
 
-    ::v-deep .headerBar {
+    .monitorPane {
+      flex: 1;
+      min-width: 0;
+      padding: 20px 20px 20px 4px;
       display: flex;
-      align-items: center;
+      flex-direction: column;
-      justify-content: flex-end;
-      gap: 8px;
-      margin-bottom: 24px;
 
-      .headerBar-item {
+      ::v-deep .headerBar {
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-end;
-        width: 100px;
+        gap: 8px;
-        height: 40px;
+        margin-bottom: 24px;
-        background: #2C2F3E;
+
-        border-radius: 4px;
+        .headerBar-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100px;
+          height: 40px;
+          background: #2c2f3e;
+          border-radius: 4px;
+          color: #fff;
+          font-size: 12px;
+          cursor: pointer;
+
+          &.cancel-xt {
+            background: linear-gradient(90deg, #299fff 0%, #0c61ff 100%);
+          }
+
+          &:hover {
+            opacity: 0.7;
+          }
+
+          span {
+            margin-left: 6px;
+          }
+        }
+
+        .iconfont {
+          color: #fff;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          font-size: 20px;
+        }
+
+        .el-input__icon {
+          color: #fff;
+        }
+
+        .el-input--prefix .el-input__inner {
+          padding-left: 16px;
+        }
+
+        .el-input--suffix .el-input__inner {
+          padding-right: 16px;
+        }
+
+        .el-input__prefix {
+          top: 50%;
+          left: 10px;
+          height: auto;
+          transform: translateY(-50%);
+        }
+
+        .el-input {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          width: 100px;
+          height: 40px;
+          padding: 0 12px;
+          box-sizing: border-box;
+          background: #2c2f3e;
+        }
+
+        input {
+          text-align: center;
+        }
+
+        .el-input__inner,
+        .el-button {
+          color: #fff;
+          border: none;
+          background: transparent;
+
+          &:hover {
+            color: #26f;
+          }
+        }
+      }
+
+      .videoList {
+        display: flex;
+        justify-content: flex-start;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        gap: 8px;
+      }
+
+      .videoBox {
+        position: relative;
+        background: #000;
+        flex-shrink: 0;
+
+        & > span {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          z-index: 11;
+          width: 60%;
+          height: 38px;
+          line-height: 38px;
+          padding: 0 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #fff;
+          font-size: 16px;
+        }
+
+        .videoBox-close {
+          display: flex;
+          position: absolute;
+          align-items: center;
+          justify-content: center;
+          right: 8px;
+          top: 8px;
+          z-index: 11;
+          width: 84px;
+          height: 32px;
+          line-height: 1;
+          background: linear-gradient(180deg, #2e3447 0%, #151825 100%);
+          border-radius: 2px;
+          cursor: pointer;
+          font-size: 12px;
+          color: #fff;
+
+          &:hover {
+            opacity: 0.8;
+          }
+
+          span {
+            margin-left: 4px;
+          }
+
+          i {
+            position: relative;
+            font-size: 16px;
+          }
+        }
+
+        iframe {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    ::v-deep.el-tree-node__content:hover {
+      .menuBtn {
+        display: block;
+      }
+    }
+
+    ::v-deep .flexRow {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: #fff;
+
+      span {
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        text-align: center;
         color: #fff;
         font-size: 12px;
-        cursor: pointer;
+        border-radius: 1px;
-
+        background: #2266ff;
-        &.cancel-xt {
-          background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
-        }
-
-        &:hover {
-          opacity: 0.7;
-        }
-
-        span {
-          margin-left: 6px;
-        }
       }
 
       .iconfont {
-        color: #fff;
+        color: #89b;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        font-size: 20px;
-      }
 
-      .el-input__icon {
+        &.show {
-        color: #fff;
+          color: #19d286;
-      }
-
-      .el-input--prefix .el-input__inner {
-        padding-left: 16px;
-      }
-
-      .el-input--suffix .el-input__inner {
-        padding-right: 16px;
-      }
-
-      .el-input__prefix {
-        top: 50%;
-        left: 10px;
-        height: auto;
-        transform: translateY(-50%);
-      }
-
-      .el-input {
-        display: flex;
-        align-items: center;
-        font-size: 12px;
-        width: 100px;
-        height: 40px;
-        padding: 0 12px;
-        box-sizing: border-box;
-        background: #2C2F3E;
-      }
-
-      input {
-        text-align: center;
-      }
-
-      .el-input__inner, .el-button {
-        color: #fff;
-        border: none;
-        background: transparent;
-
-        &:hover {
-          color: #26f;
         }
       }
-    }
 
-    .videoList {
+      .sta {
-      display: flex;
+        display: flex;
-      justify-content: flex-start;
+        flex: 1;
-      align-content: flex-start;
+        min-width: 0;
-      flex-wrap: wrap;
-      flex: 1;
-      min-height: 0;
-      overflow: hidden;
-      gap: 8px;
-    }
 
-    .videoBox {
+        & > p {
-      position: relative;
+          color: #19d286;
-      background: #000;
+        }
-      flex-shrink: 0;
+      }
 
-      & > span {
+      .menuBtn {
+        display: none;
         position: absolute;
-        bottom: 0;
+        right: 4px;
-        left: 0;
-        z-index: 11;
-        width: 60%;
-        height: 38px;
-        line-height: 38px;
-        padding: 0 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: #fff;
-        font-size: 16px;
-      }
-
-      .videoBox-close {
-        display: flex;
-        position: absolute;
-        align-items: center;
-        justify-content: center;
-        right: 8px;
-        top: 8px;
-        z-index: 11;
-        width: 84px;
-        height: 32px;
-        line-height: 1;
-        background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
-        border-radius: 2px;
-        cursor: pointer;
-        font-size: 12px;
-        color: #fff;
-
-        &:hover {
-          opacity: 0.8;
-        }
-
-        span {
-          margin-left: 4px;
-        }
-
-        i {
-          position: relative;
-          font-size: 16px;
-        }
-      }
-
-      iframe {
-        width: 100%;
-        height: 100%;
       }
     }
   }
-
-  ::v-deep.el-tree-node__content:hover {
-    .menuBtn {
-      display: block;
-    }
-  }
-
-  ::v-deep .flexRow {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    color: #fff;
-
-    span {
-      width: 16px;
-      height: 16px;
-      line-height: 16px;
-      text-align: center;
-      color: #fff;
-      font-size: 12px;
-      border-radius: 1px;
-      background: #2266FF;
-    }
-
-    .iconfont {
-      color: #89b;
-
-      &.show {
-        color: #19D286;
-      }
-    }
-
-    .sta {
-      display: flex;
-      flex: 1;
-      min-width: 0;
-
-      & > p {
-        color: #19D286;
-      }
-    }
-
-    .menuBtn {
-      display: none;
-      position: absolute;
-      right: 4px;
-    }
-
-  }
-}
 </style>

packages/IntelligentSecurity/components/Synergy.vue

@@ -1,19 +1,9 @@
 <template>
   <div class="synergr" :id="videoId" v-if="isInit" @mouseleave="isHide = true" @mousemove.stop="onMousemove" @mouseup="onMouseUp">
-    <canvas
+    <canvas id="synergr-canvas" :style="{height: '28px'}" v-if="canvasWidth" @click="onClick" :width="canvasWidth" height="28">
-      id="synergr-canvas"
-      :style="{height: '28px'}"
-      v-if="canvasWidth"
-      @click="onClick"
-      :width="canvasWidth"
-      height="28">
     </canvas>
     <div class="time" v-show="!isHide && left > 100" :style="{left: (left) + 'px'}">{{ time }}</div>
-    <img
+    <img @mousedown="onDragDown" class="drag-img" :style="{left: (x) + 'px'}" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
-      @mousedown="onDragDown"
-      class="drag-img"
-      :style="{left: (x) + 'px'}"
-      src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
     <div class="slw-bottom">
       <div class="action-bar">
         <div class="left">
@@ -58,25 +48,16 @@
           <div class="playback-item" v-for="(item, index) in times" :key="index">
             <el-checkbox :label="item.id">
               <span>通道{{ index + 1 }}</span>
-              <PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" v-if="item.times.length" :deviceId="item.id" :times="item.times"></PlaybackTime>
             </el-checkbox>
+            <PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" v-if="item.times.length" :deviceId="item.id" :times="item.times"></PlaybackTime>
           </div>
         </el-checkbox-group>
       </div>
     </div>
-    <ai-dialog
+    <ai-dialog title="选择日期" :visible.sync="isShowDate" width="520px" @onConfirm="onConfirm">
-      title="选择日期"
-      :visible.sync="isShowDate"
-      width="520px"
-      @onConfirm="onConfirm">
       <el-form class="ai-form" ref="form" :model="form" label-width="80px" size="small">
         <el-form-item label="选择日期" prop="date" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
-          <el-date-picker
+          <el-date-picker value-format="yyyy-MM-dd" v-model="form.date" type="date" :picker-options="pickerOptions" placeholder="选择日期">
-            value-format="yyyy-MM-dd"
-            v-model="form.date"
-            type="date"
-            :picker-options="pickerOptions"
-            placeholder="选择日期">
           </el-date-picker>
         </el-form-item>
       </el-form>
@@ -430,6 +411,8 @@
         color: #FFFFFF;
 
         .playback-item {
+          display: flex;
+          align-items: center;
           width: 100%;
           margin-bottom: 4px;
 
@@ -437,23 +420,23 @@
             margin-bottom: 0;
           }
 
+          .playback-item__timeline {
+            flex: 1;
+            height: 12px;
+            line-height: 1;
+            border-radius: 6px;
+          }
+
           .el-checkbox {
             display: flex;
             align-items: center;
-            width: 100%;
+            // width: 100%;
 
             .el-checkbox__label {
               display: flex;
               align-items: center;
               flex: 1;
 
-              .playback-item__timeline {
-                flex: 1;
-                height: 12px;
-                line-height: 1;
-                border-radius: 6px;
-              }
-
               span {
                 width: 60px;
                 color: #fff;

packages/IntelligentSecurity/components/Timeline.vue

@@ -1,21 +1,12 @@
 <template>
-  <div :class="wrapper" class="canvas" @click="onClick"  @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
+  <div :class="wrapper" class="canvas" @click="onClick" @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
-    <canvas
+    <canvas :id="id" :style="{height: '52px'}" v-if="canvasWidth" :width="canvasWidth" height="52">
-      :id="id"
-      :style="{height: '52px'}"
-      v-if="canvasWidth"
-      :width="canvasWidth"
-      height="52">
     </canvas>
     <div class="time" v-show="!isHide" :style="{left: left + 'px'}">{{ time }}</div>
     <div class="time-scale" :style="{left: x + 'px'}">
       <span></span>
     </div>
-    <img
+    <img @mousedown="onDragDown" class="drag-img" :style="{left: x + 'px'}" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
-      @mousedown="onDragDown"
-      class="drag-img"
-      :style="{left: x + 'px'}"
-      src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
   </div>
 </template>