调整目录结构使其能够被引用

packages/device/IntelligentSecurity/AppISManage.vue

@@ -0,0 +1,519 @@
+<template>
+  <section class="AppISManage">
+    <device-slider :permissions="permissions" :show.sync="slider" :instance="instance" :dict="dict" @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-select>
+        <div class="headerBar-item" @click="playbackUrls = [], isShowBar = !isShowBar" :class="[isShowBar ? '' : 'cancel-xt']">
+          <img src="https://cdn.cunwuyun.cn/slw2.0/images/xt.png">
+          <span>{{ isShowBar ? '视频协同' : '取消协同' }}</span>
+        </div>
+      </div>
+      <div class="videoList">
+        <div class="videoBox" 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 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)" @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-form-item>
+      </el-form>
+    </ai-dialog>
+    <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" :instance="instance" ref="BindArea" @change="handleSubmit(selected)" />
+  </section>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  import DeviceSlider from './components/deviceSlider'
+  import LocateDialog from './components/locateDialog'
+  import AiMonitor from './components/AiSlwVideo'
+  import Synergy from './components/Synergy'
+
+  export default {
+    name: 'AppISManage',
+    components: { LocateDialog, DeviceSlider, AiMonitor, Synergy },
+    label: '监控实况',
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+    },
+    computed: {
+      splitOps() {
+        return [
+          { label: '单分屏', value: 1, per: '100%' },
+          { label: '四分屏', value: 4, per: '49.2%' }
+        ]
+      },
+      currentSplitStyle() {
+        let per =
+          this.splitOps.find((e) => e.value == this.splitScreen)?.per || '100%'
+        return { width: per, height: per }
+      },
+      ...mapState(['user']),
+
+      ids() {
+        if (!this.monitors.length) return ''
+
+        return this.monitors.map((v) => v.id).join(',')
+      },
+    },
+
+    data() {
+      return {
+        slider: true,
+        fullscreen: false,
+        splitScreen: 1,
+        monitors: [],
+        dialog: false,
+        locate: false,
+        isLoading: false,
+        isShowBar: true,
+        selected: {
+          areaId: '',
+        },
+        videoUrl: '',
+        playbackUrls: [],
+        latlng: null,
+        disabledLevel: 0,
+        rules: {
+          name: [{ required: true, message: '请填写 设备名称' }],
+        },
+      }
+    },
+
+    watch: {
+      slider() {
+        this.$refs.AiMonitor &&
+          this.$refs.AiMonitor.forEach((e) => {
+            e.reset()
+          })
+
+        this.$refs.Synergy && this.$refs.Synergy.init()
+      },
+    },
+
+    created() {
+      this.selected.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length - 1
+    },
+
+    methods: {
+      handleFullscreen() {
+        this.fullscreen = !this.fullscreen
+        this.$fullscreen(this.fullscreen)
+      },
+      handleSelectMonitor(monitor) {
+        if (monitor.type !== '1') return
+
+        let { id } = monitor,
+          index = this.monitors.findIndex((e) => e.id == id)
+        if (index > -1) {
+          this.$message.error('该监控视频已存在')
+        } else if (
+          this.monitors.length >= this.splitScreen &&
+          this.splitScreen > 1
+        ) {
+          this.$message.error('可分屏监控已满,请先取消其他的监控')
+        } else {
+          this.showMonitor(monitor)
+        }
+      },
+
+      onCheckChange(e) {
+        this.monitors.forEach((item, index) => {
+          if (e.indexOf(item.index) === -1) {
+            this.monitors.splice(index, 1)
+          }
+        })
+      },
+
+      onChange(e) {
+        if (e === 1 && this.monitors.length) {
+          this.monitors = [this.monitors[0]]
+        }
+
+        this.$refs.AiMonitor &&
+          this.$refs.AiMonitor.forEach((e) => {
+            e.reset()
+          })
+      },
+
+      onReplay(e) {
+        this.isLoading = true
+        this.instance
+          .post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
+            params: {
+              ids: this.ids,
+              startTime: e.startTime,
+              endTime: e.endTime,
+              nvrCodes: this.ids,
+            },
+          })
+          .then((res) => {
+            if (res.code == 0) {
+              if (res.data && res.data.length) {
+                this.playbackUrls = res.data
+                this.isLoading = false
+              }
+            }
+          })
+          .catch(() => {
+            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
+
+        if (deviceId) {
+          this.isLoading = true
+          this.instance.post('/app/appzyvideoequipment/getWebSdkUrl', null, {
+            params: { deviceId },
+          }).then((res) => {
+            if (res?.data) {
+              this.videoUrl = res.data
+              let data = {
+                url: res.data,
+                isShowPlayBtn: false,
+              }
+              if (refresh) {
+                monitor.url = data.url
+              } else if (this.splitScreen == 1) {
+                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 })
+                }
+              }
+            }
+
+            this.isLoading = false
+          }).catch(() => {
+            this.isLoading = false
+          })
+        }
+      },
+      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">
+              {index > 0 ? <span>{index}</span> : ''}
+              <i class={['iconfont', 'iconshipinjiankong', show]} />
+              <div>{node.label}</div>
+            </div>
+          )
+        } else
+          return (
+            <div class="flexRow">
+              <div>{node.label}</div>
+              {data.id != 'no_area' ? (
+                <div class="sta">
+                  <p>{data.online || 0}</p>/{data.sum || 0}
+                </div>
+              ) : (
+                <div />
+              )}
+            </div>
+          )
+      },
+      handleSliderOption(e) {
+        this.selected = {
+          command: e.type,
+          ...e.node,
+        }
+        this.selected.areaId = e.node.areaId || this.user.info.areaId
+        if (e.type == 'edit') {
+          //修改名称
+          this.dialog = true
+        } else if (e.type == 'area') {
+          //绑定areaId
+          this.$refs.BindArea?.chooseArea()
+        } else if (e.type == 'locate') {
+          //地图标绘
+          this.latlng =
+            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', {
+            ...row,
+          })
+          .then((res) => {
+            if (res?.code == 0) {
+              this.$message.success('提交成功!')
+              this.dialog = false
+              this.$refs.DeviceSlider?.getDevices()
+            }
+          })
+      },
+      handleLocate(row, locate) {
+        if (locate) {
+          let { lat, lng } = locate.location
+          this.handleSubmit({ ...row, lat, lng }).then(() => {
+            this.locate = false
+          })
+        }
+      },
+    },
+    beforeDestroy() {
+      this.monitors = []
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppISManage {
+    display: flex;
+    background: #202330;
+    height: 100%;
+
+    .monitorPane {
+      flex: 1;
+      min-width: 0;
+      padding: 20px 20px 20px 4px;
+      display: flex;
+      flex-direction: column;
+
+      ::v-deep .headerBar {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-bottom: 24px;
+
+        .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;
+        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>