目录代码整合

packages/device/IntelligentSecurity/AppISDevice/AppISDevice.vue

@@ -0,0 +1,133 @@
+<template>
+  <section class="AppISDevice">
+    <ai-list>
+      <ai-title slot="title" title="安防设备管理" isShowBottomBorder/>
+      <template #content>
+        <ai-search-bar>
+          <template #right>
+            <el-input
+              prefix-icon="iconfont iconSearch"
+              v-model="search.title" placeholder="设备名、MAC号" clearable
+              @clear="page.current = 1,search.title = '', getTableData()"
+              v-throttle="() => {page.current = 1, getTableData()}" size="small"/>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
+                  :size.sync="page.size" @getList="getTableData">
+          <el-table-column label="操作" slot="options" align="center">
+            <el-row type="flex" slot-scope="{row}" align="middle" justify="center">
+              <ai-area v-model="row.areaId" :instance="instance" :inputClicker="false" customClicker
+                       @change="handleSubmit(row)">
+                <el-button type="text">绑定</el-button>
+              </ai-area>
+              <el-button type="text" @click="handleLocate(row)">标绘</el-button>
+              <div/>
+              <el-button type="text" @click="handleShow(row)">设置</el-button>
+            </el-row>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
+    <setting-dialog v-model="dialog" :ins="instance"/>
+  </section>
+</template>
+
+<script>
+import LocateDialog from "../components/locateDialog";
+import SettingDialog from "../components/settingDialog";
+
+export default {
+  name: "AppISDevice",
+  components: {SettingDialog, LocateDialog},
+  label: "安防设备管理",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  provide() {
+    return {
+      device: this
+    }
+  },
+  computed: {
+    colConfigs() {
+      return [
+        {type: 'selection'},
+        {label: "设备名", prop: "deviceName"},
+        {label: "上级归属", prop: "areaName"},
+        {label: "设备型号", prop: "devModel"},
+        {label: "MAC号", prop: "devMac"},
+        {label: "标绘状态", render: (h, {row}) => h('span', null, row?.lat ? '已绑定' : '待绑定')},
+        {slot: "options"}
+      ]
+    },
+    isDetail() {
+      return !!this.$route.query?.id
+    }
+  },
+  data() {
+    return {
+      search: {startTime: null, endTime: null, title: ""},
+      page: {current: 1, size: 10, total: 0},
+      tableData: [],
+      locate: false,
+      dialog: false,
+      detail: {}
+    }
+  },
+  created() {
+    this.dict.load("zyDeviceBindStatus")
+    if (this.isDetail) {
+      //TODO 待补充
+    } else this.getTableData()
+  },
+  methods: {
+    getTableData() {
+      this.instance.post("/app/appzyvideoequipment/getVideoList", null, {
+        params: {...this.search, ...this.page}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    handleSubmit(row) {
+      return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
+        ...row, id: row.deviceId
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message.success("提交成功!")
+          this.getTableData()
+        }
+      })
+    },
+    handleShow(row) {
+      this.dialog = true
+      this.detail = row
+    },
+    handleLocate(row, locate) {
+      if (locate) {
+        let {lat, lng} = locate.location
+        this.handleSubmit({...row, lat, lng}).then(() => {
+          this.locate = false
+          this.getTableData()
+        })
+      } else {
+        this.locate = true
+        this.detail = row
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppISDevice {
+  ::v-deep .AiSearchBar {
+    margin-bottom: 10px;
+  }
+}
+</style>

packages/device/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -0,0 +1,520 @@
+<template>
+  <section class="AppISManage">
+    <device-slider :permissions="permissions" :show.sync="slider" :ins="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%' },
+          { label: '九分屏', value: 9, per: '32%' },
+        ]
+      },
+      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>

packages/device/IntelligentSecurity/AppISMap/AppISMap.vue

@@ -0,0 +1,211 @@
+<template>
+  <section class="AppISMap">
+    <device-slider :show.sync="slider" :ins="instance" :dict="dict" @list="v=>list=v" @select="markerClickEvent"/>
+    <div id="amap"/>
+    <div ref="selectedInfoWin" class="selected">
+      <b>{{ selected.deviceName }}</b>
+      <div>{{ selected.lng }}，{{ selected.lat }}</div>
+      <div v-if="selected.address">{{ selected.address }}</div>
+      <div btn @click="handleShowMonitor">查看监控</div>
+    </div>
+    <el-dialog class="monitorDialog" :modal="false" :visible.sync="dialog" :title="selected.deviceName||'视频监控'"
+               width="640px" @closed="monitor=''">
+      <iframe v-if="monitor" :src="monitor" allow="autoplay *; microphone *; fullscreen *" allowfullscreen
+              allowtransparency allowusermedia frameBorder="no"/>
+    </el-dialog>
+  </section>
+</template>
+
+<script>
+import DeviceSlider from "../components/deviceSlider";
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+export default {
+  name: "AppISMap",
+  components: {DeviceSlider},
+  label: "监控地图",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  data() {
+    return {
+      slider: true,
+      AMap: null,
+      map: null,
+      selected: {},
+      list: [],
+      deviceToken: "",
+      dialog: false,
+      monitor: ""
+    }
+  },
+  watch: {
+    list: {
+      immediate: true,
+      handler(v) {
+        if (v.length > 0) {
+          this.renderDevicesOnMap()
+        }
+      }
+    }
+  },
+  methods: {
+    initMap() {
+      return new Promise(resolve => AMapLoader.load({
+        key: "b553334ba34f7ac3cd09df9bc8b539dc",
+        version: '2.0',
+        plugins: ['AMap.Marker', 'AMap.PlaceSearch'],
+      }).then(AMap => {
+        this.AMap = AMap
+        this.map = new this.AMap.Map('amap', {
+          zoom: 14,
+        })
+        resolve()
+      }))
+    },
+    renderDevicesOnMap() {
+      this.list?.map(e => {
+        if (this.AMap && e?.lat) {
+          e.marker = new this.AMap.Marker({
+            icon: this.$cdn + 'monitor/camera.png',
+            position: new this.AMap.LngLat(e.lng, e.lat)
+          }).on('click', () => this.markerClickEvent(e))
+          this.map.add(e.marker)
+        }
+      })
+    },
+    markerClickEvent(device) {
+      if (device?.marker) {
+        this.map?.setCenter(new this.AMap.LngLat(device.lng, device.lat))
+        device.marker.setIcon(this.$cdn + 'monitor/cameraSelected.png')
+        this.selected = device
+        let win = new this.AMap.InfoWindow({
+          isCustom: true,
+          autoMove: true,
+          closeWhenClickMap: true,
+          content: this.$refs.selectedInfoWin
+        }).on('close', () => {
+          device.marker.setIcon(this.$cdn + 'monitor/camera.png')
+          this.selected = {}
+        })
+        win.open(this.map, new this.AMap.LngLat(device.lng, device.lat))
+      }
+    },
+    getDeviceToken() {
+      this.instance.post("/app/appzyvideoequipment/getAppUserToken").then(res => {
+        if (res?.data) {
+          this.deviceToken = res.data
+        }
+      })
+    },
+    handleShowMonitor() {
+      this.dialog = true
+      this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+        params: {token: this.deviceToken, deviceId: this.selected.deviceId}
+      }).then(res => {
+        if (res?.data) {
+          let data = JSON.parse(res.data)
+          this.monitor = data.url
+        }
+      })
+    }
+  },
+  created() {
+    this.initMap().then(() => setTimeout(() => this.renderDevicesOnMap(), 1000))
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppISMap {
+  background: #202330;
+  position: relative;
+
+  .deviceSlider {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 66;
+  }
+
+  #amap {
+    width: 100%;
+    height: 100%;
+  }
+
+  .selected {
+    background: #fff;
+    min-width: 280px;
+    box-sizing: border-box;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    padding: 12px;
+    color: #999;
+    font-size: 12px;
+
+    b {
+      color: #333;
+      font-size: 16px;
+    }
+
+    & > * + * {
+      margin-top: 4px;
+    }
+
+    div[btn] {
+      cursor: pointer;
+      color: #89b;
+      font-size: 14px;
+    }
+
+  }
+
+  ::v-deep .monitorDialog {
+
+    .el-dialog__header {
+      font-size: 14px;
+      color: #FFF;
+      height: 40px;
+      padding: 0 16px;
+      background: linear-gradient(180deg, #313B5B 0%, #1B202F 100%);
+      display: flex;
+      align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+
+      span {
+        color: #fff;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .el-dialog__headerbtn {
+        position: relative;
+        top: unset;
+        right: unset;
+      }
+    }
+
+    .el-dialog__body {
+      padding: 0;
+      height: 360px;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  ::v-deep .amap-logo, ::v-deep .amap-copyright {
+    display: none !important;
+  }
+
+  ::v-deep .amap-marker-label {
+    border-color: transparent;
+    box-shadow: 1px 1px 0 0 rgba(#999, .2);
+  }
+}
+</style>

packages/device/IntelligentSecurity/components/AiSlwVideo.vue

@@ -0,0 +1,566 @@
+<template>
+  <div class="slw" :id="videoId" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)">
+    <div class="slw-title">
+      <h2>{{ name }}</h2>
+      <div class="slw-title__close" @click="removeMonitor">
+        <i class="el-icon-circle-close"></i>
+        <span>关闭视频</span>
+      </div>
+    </div>
+    <iframe v-if="isShow" :id="iframeId" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no" style="width: 100%; height: 100%;" :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
+    </iframe>
+    <div class="slw-bottom" v-if="isShowBar">
+      <Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
+      <div class="action-bar">
+        <div class="left">
+          <div class="left-btns">
+            <el-tooltip effect="dark" :content="isPause ? '播放' : '暂停'" placement="top">
+              <img :src="isPause ? 'https://cdn.cunwuyun.cn/slw2.0/images/play.png' : 'https://cdn.cunwuyun.cn/slw2.0/images/pause.png'" @click="changePlayStatus">
+            </el-tooltip>
+          </div>
+          <div class="volume" @mouseleave.stop="isShowVolume = false">
+            <img @mouseenter.stop="isShowVolume = true" src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
+            <div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
+              <el-slider input-size="mini" v-model="volume" vertical @change="onVolume" height="80px">
+              </el-slider>
+            </div>
+          </div>
+          <div class="play-status">
+            <div class="live">
+              <span class="label" v-if="isLiveing"></span>
+              <i v-if="isLiveing">直播中</i>
+              <em>{{ date }}</em>
+            </div>
+            <div v-if="!isLiveing" class="back-btn" @click="backLiveing">回到直播</div>
+          </div>
+        </div>
+        <div class="right">
+          <el-tooltip effect="dark" content="选择日期" placement="top">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
+          </el-tooltip>
+          <el-tooltip effect="dark" content="截屏" placement="top">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/screenshots.png" @click="screenshots">
+          </el-tooltip>
+          <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" placement="top">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/full-screen.png" @click="fullscreen">
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <ai-dialog 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 value-format="yyyy-MM-dd" v-model="form.date" type="date" :picker-options="pickerOptions" placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+  import Timeline from './Timeline'
+
+  export default {
+    props: ['name', 'isShowBar', 'instance', 'id', 'playbackUrls'],
+
+    name: 'slwVideo',
+
+    components: {
+      Timeline
+    },
+
+    data () {
+      return {
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          }
+        },
+        currIndex: 0,
+        isShowDate: false,
+        isShowPlayBtn: false,
+        isShow: true,
+        isShowVolume: false,
+        isLiveing: true,
+        form: {
+          date: ''
+        },
+        isLoading: false,
+        times: [],
+        date: '',
+        isPause: false,
+        width: '',
+        volume: 100,
+        videoId: `slwvideo-${new Date().getTime()}`,
+        iframeId: `video-${new Date().getTime()}`,
+        isFullscreen: false,
+        replayUrl: '',
+        liveingUrl: ''
+      }
+    },
+
+    computed: {
+      src () {
+        if (this.playbackUrls.length) {
+          const arr =  this.playbackUrls.filter(v => v.id === this.id)
+          return arr.length ? arr[0].playbackUrl : []
+        }
+
+        if (this.isLiveing) {
+          return this.liveingUrl
+        }
+
+        return this.replayUrl
+      }
+    },
+
+    watch: {
+      src: {
+        handler (val) {
+          if (val) {
+            this.isShow = false
+
+            this.$nextTick(() => {
+              this.isShow = true
+            })
+          }
+        }
+      }
+    },
+
+    mounted () {
+      this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+      this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+      this.$nextTick(() => {
+        this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
+
+        document.addEventListener('fullscreenchange', this.fullScreenChange)
+      })
+
+      this.getSlwPlaybackTime()
+
+      if (this.id) {
+        this.getLiveingUrl()
+      }
+    },
+
+    methods: {
+      destroyed () {
+        document.removeEventListener('fullscreenchange', this.fullScreenChange)
+      },
+
+      backLiveing () {
+        this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.getLiveingUrl()
+        this.getSlwPlaybackTime()
+      },
+
+      getLiveingUrl () {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${this.id}`).then(res => {
+          if (res.data) {
+            this.liveingUrl = res.data
+            this.isLiveing = true
+          }
+
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      onReplay (e) {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
+          params: {
+            ids: this.id,
+            startTime: `${this.form.date} ${e}`,
+            endTime: this.form.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:00:00`,
+            nvrCodes: ''
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              this.replayUrl = res.data[0].playbackUrl
+              this.isLiveing = false
+            }
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      getSlwPlaybackTime () {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
+          params: {
+            ids: this.id,
+            startTime: this.date + ' 00:00:00',
+            endTime: this.date + ' 23:59:59',
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              const times = res.data[0].times
+
+              this.times = times.map(item => {
+                const startTime = (item.startTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+                const endTime = (item.endTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+
+                return {
+                  startTime: Number(startTime.toFixed(0)),
+                  endTime: Number(endTime.toFixed(0))
+                }
+              }).sort((a, b) => {
+                return a.startTime - b.startTime
+              })
+            }
+
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      fullScreenChange () {
+        if (document.fullscreenElement) {
+          this.reset()
+        } else {
+          this.reset()
+        }
+      },
+      exitFullscreen () {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen()
+        } else if (document.msExitFullscreen) {
+          window.top.document.msExitFullscreen()
+        }
+      },
+
+      changePlayStatus () {
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
+        subPage.postMessage({
+          type: 'play',
+          value: this.isPause
+        }, '*')
+        
+        this.isPause = !this.isPause
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.date = this.form.date
+            this.isShowDate = false
+            this.getSlwPlaybackTime()
+          }
+        })
+      },
+
+      onVolume (e) {
+        const v = (e / 100).toFixed(1)
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
+        subPage.postMessage({
+          type: 'volume',
+          value: Number(v)
+        }, '*')
+      },
+
+      fullscreen () {
+        if (this.isFullscreen) {
+          this.exitFullscreen()
+        } else {
+          this.requestFullScreen(document.querySelector(`#${this.videoId}`))
+        }
+
+        this.isFullscreen = !this.isFullscreen
+        this.reset()
+      },
+
+      reset () {
+        setTimeout(() => {
+          this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
+          this.$nextTick(() => {
+            this.$refs.timeline && this.$refs.timeline.init()
+          })
+        }, 100)
+      },
+
+      screenshots () {
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
+        subPage.postMessage({
+          type: 'screenshot'
+        }, '*')
+      },
+
+      removeMonitor () {
+        this.$emit('close')
+      },
+
+      requestFullScreen (elem) {
+        if (elem.requestFullscreen) {
+          elem.requestFullscreen()
+        } else if (elem.mozRequestFullScreen) {
+          elem.mozRequestFullScreen()
+        } else if (elem.webkitRequestFullscreen) {
+          elem.webkitRequestFullscreen()
+        } else if (elem.msRequestFullscreen) {
+          elem = window.top.document.body
+          elem.msRequestFullscreen()
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slw {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    iframe {
+      border: none;
+    }
+
+    .slw-bottom {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      transition: all ease-in-out 0.5s;
+      transform: translateY(100%);
+    }
+
+    &:hover {
+      .slw-title {
+        transform: translateY(0%);
+      }
+      .slw-bottom {
+        transform: translateY(0%);
+      }
+    }
+
+    .slw-title {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: space-between;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 16px;
+      background: rgba(0, 0, 0, 0.8);
+      transition: all ease 0.5s;
+      transform: translateY(-100%);
+
+      h2 {
+        max-width: 70%;
+        font-size: 16px;
+        color: #fff;
+        font-weight: normal;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;  
+      }
+
+      .slw-title__close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 84px;
+        height: 32px;
+        background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
+        border-radius: 2px;
+        cursor: pointer;
+        font-size: 12px;
+        color: #fff;
+
+        &:hover {
+          opacity: 0.9;
+        }
+
+        span {
+          margin-left: 4px;
+        }
+
+        i {
+          position: relative;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .action-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 40px;
+      padding: 0 16px;
+      background: rgba(0, 0, 0, 0.8);
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .play-status {
+          display: flex;
+          align-items: center;
+          margin-left: 12px;
+
+          em {
+            margin-left: 12px;
+            font-style: normal;
+            color: #fff;
+            font-size: 12px;
+          }
+
+          .back-btn {
+            padding: 4px 10px;
+            border-radius: 6px;
+            color: #ddd;
+            font-size: 12px;
+            cursor: pointer;
+            background: #343747;
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+
+          .live {
+            display: flex;
+            align-items: center;
+            line-height: 1;
+            padding: 2px 5px;
+            color: rgba(0,255,0,.8);
+
+            i {
+              font-size: 12px;
+              font-style: normal;
+            }
+
+            .label {
+              width: 6px;
+              height: 6px;
+              margin-right: 12px;
+              background: rgba(0,255,0,.8);
+              border-radius: 50%;
+              position: relative;
+
+              &:after {
+                content: "";
+                width: 12px;
+                height: 12px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                -webkit-transform: translate(-50%,-50%);
+                transform: translate(-50%,-50%);
+                border-radius: 50%;
+                border: 4px solid rgba(0,255,0,.2);
+              }
+            }
+          }
+        }
+
+        .volume {
+          display: flex;
+          align-items: center;
+          position: relative;
+          height: 100%;
+
+          .volume-slider {
+            display: none;
+            position: absolute;
+            bottom: 15px;
+            left: 50%;
+            z-index: -1;
+            opacity: 0;
+            padding: 20px 0 10px;
+            background-color: rgba(0, 0,0,.8);
+            transform: translate(-50%, 0);
+            transition: all ease 0.3s;
+
+            &.active {
+              display: block;
+              z-index: 1;
+              opacity: 1;
+            }
+          }
+        }
+
+        img {
+          cursor: pointer;
+        }
+
+        .left-btns {
+          display: flex;
+          align-items: center;
+          margin-right: 10px;
+
+          span {
+            flex: 1;
+            height: 100%;
+            line-height: 24px;
+            background: #222838;
+            color: #c9c9c9;
+            font-size: 12px;
+            cursor: pointer;
+
+            &.active {
+              color: #fff;
+              background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
+            }
+          }
+        }
+      }
+
+      .right {
+        color: #c9c9c9;
+        font-size: 12px;
+
+        span {
+          margin-right: 32px;
+          cursor: pointer;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+
+        img {
+          margin-right: 16px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      & > div {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+</style>

packages/device/IntelligentSecurity/components/PlaybackTime.vue

@@ -0,0 +1,129 @@
+<template>
+  <div :class="wrapper" class="canvas" v-if="isInit">
+    <canvas
+      :id="id"
+      :style="{height: '10px'}"
+      v-if="canvasWidth"
+      :width="canvasWidth"
+      height="10">
+    </canvas>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['times', 'deviceId'],
+
+    data () {
+      return {
+        ctx: null,
+        canvasWidth: '',
+        canvasHeight: '',
+        isInit: false,
+        wrapper: `canvas-${new Date().getTime()}`,
+        id: `timeline-${new Date().getTime()}-${this.deviceId}`,
+        timer: null
+      }
+    },
+
+    watch: {
+      times: {
+        deep: true,
+        handler (v) {
+          if (v.length && this.ctx) {
+            this.init()
+          }
+        }
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    destroyed () {
+      clearInterval(this.timer)
+    },
+
+    methods: {
+      init () {
+        if (this.ctx) {
+          this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+        }
+        this.isInit = false
+        this.$nextTick(() => {
+          this.isInit = true
+          this.$nextTick(() => {
+            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
+            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight
+
+            this.$nextTick(() => {
+              const el = document.querySelector(`#${this.id}`)
+              this.ctx = el.getContext('2d')
+              this.ctx.width  = document.querySelector('.canvas').offsetWidth
+              this.ctx.height  = document.querySelector('.canvas').offsetHeight
+              this.renderPlayback()
+            })
+          })
+        })
+      },
+
+      countdown () {
+        this.timer = setInterval(() => {
+          if (this.isLiveing) {
+            this.initNowTime()
+          } else {
+            this.x = this.x + this.canvasWidth / (24 * 60 * 60)
+          }
+        }, 1000)
+      },
+
+      initNowTime () {
+        const date = new Date()
+        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()
+
+        this.x = this.canvasWidth / (24 * 60 * 60) * seconds
+      },
+
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.beginPath()
+        ctx.lineWidth = lineWidth
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.strokeStyle = lineColor
+        ctx.stroke()
+      },
+
+      renderPlayback () {
+        const ctx = this.ctx
+        const unit = this.canvasWidth / (24 * 60 * 60)
+        this.times.forEach(item => {
+          this.drawLine(ctx, {
+            beginX: item.startTime * unit,
+            beginY: 28,
+            endX: item.startTime * unit,
+            endY: 0,
+            lineColor: 'rgba(0, 156, 255, 1)',
+            lineWidth: item.endTime * unit - item.startTime * unit
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .canvas {
+    position: relative;
+    width: 100%;
+    height: 10px;
+
+    canvas {
+      width: 100%;
+      height: 10px;
+    }
+  }
+</style>

packages/device/IntelligentSecurity/components/Synergy.vue

@@ -0,0 +1,683 @@
+<template>
+  <div class="synergr" :id="videoId" v-if="isInit" @mouseleave="isHide = true" @mousemove.stop="onMousemove" @mouseup="onMouseUp">
+    <canvas 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 @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">
+          <!-- <div
+            class="volume"
+            @mouseleave.stop="isShowVolume = false">
+            <img 
+              @mouseenter.stop="isShowVolume = true"
+              src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
+            <div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
+              <el-slider
+                input-size="mini"
+                v-model="volume"
+                vertical
+                @change="onVolume"
+                height="80px">
+              </el-slider>
+            </div>
+          </div> -->
+          <div class="play-status">
+            <div class="live">
+              <span class="label" v-if="isLiveing"></span>
+              <i v-if="isLiveing">直播中</i>
+              <em>{{ date }}</em>
+            </div>
+            <div v-if="!isLiveing" class="back-btn" @click="backLiveing">回到直播</div>
+          </div>
+        </div>
+        <div class="right">
+          <el-tooltip effect="dark" content="选择日期" placement="top">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="playback">
+      <div class="synergr-more" @click="isShowTimeline = !isShowTimeline" :class="[isShowTimeline ? 'active' : '']">
+        <img :title="isShowTimeline ? '收起' : '展开'" src="https://cdn.cunwuyun.cn/slw2.0/images/arrow.png" />
+      </div>
+      <div class="playback-list" v-if="isShowTimeline">
+        <el-checkbox-group v-model="checked" @change="onCheckChange">
+          <div class="playback-item" v-for="(item, index) in times" :key="index">
+            <el-checkbox :label="item.id">
+              <span>通道{{ index + 1 }}</span>
+            </el-checkbox>
+            <PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" v-if="item.times.length" :deviceId="item.id" :times="item.times"></PlaybackTime>
+            <i :style="{left: (x - 17) + 'px'}"></i>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <ai-dialog 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 value-format="yyyy-MM-dd" v-model="form.date" type="date" :picker-options="pickerOptions" placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+  import PlaybackTime from './PlaybackTime'
+
+  export default {
+    props: ['ids', 'instance', 'isLoading'],
+
+    name: 'Synergy',
+
+    components: {
+      PlaybackTime
+    },
+
+    data () {
+      return {
+        canvasWidth: 0,
+        currIndex: 0,
+        checked: [],
+        isShowDate: false,
+        isShow: true,
+        isShowVolume: false,
+        isLiveing: true,
+        form: {
+          date: ''
+        },
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          }
+        },
+        times: [],
+        isShowTimeline: true,
+        checkList: [],
+        isInit: false,
+        left: 0,
+        date: '',
+        scale: 3,
+        width: '',
+        isHide: false,
+        x: 0,
+        time: '',
+        videoId: `synergr-${new Date().getTime()}`,
+        isFullscreen: false,
+        timer: null
+      }
+    },
+
+    watch: {
+      ids: {
+        handler (val) {
+          if (val) {
+            this.checked = this.ids.split(',')
+            this.getSlwPlaybackTime()
+          }
+        },
+        immediate: false,
+        deep: true
+      }
+    },
+
+    mounted () {
+      this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+      this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+
+      this.getSlwPlaybackTime()
+      this.checked = this.ids.split(',')
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    methods: {
+      onMousemove (e) {
+        const canvasInfo = document.querySelector(`#synergr-canvas`).getBoundingClientRect()
+        const seconds = 24 * 60 * 60
+        const x = e.clientX - canvasInfo.left + 100
+
+        if (x < 100 || x > this.canvasWidth + 100) {
+          this.isHide = true
+
+          return false
+        }
+
+        const unit = seconds / this.canvasWidth * (x - 100)
+        this.left = x
+        this.time = this.secTotime(unit)
+        this.isHide = false
+
+        if (!this.isChoose) return
+        this.x = e.clientX - canvasInfo.left + 100
+        this.ratioW = this.x / this.canvasWidth
+      },
+
+      onDragDown () {
+        this.isChoose = true
+      },
+
+      onCheckChange (e) {
+        this.$emit('checkChange', e)
+      },
+
+      backLiveing () {
+        this.$emit('backLiveing')
+        this.isLiveing = true
+        this.initNowTime()
+        this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.getSlwPlaybackTime()
+      },
+
+      onMouseUp () {
+        if (!this.isChoose) return
+
+        clearInterval(this.timer)
+        this.timer = null
+        this.isChoose = false
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * (this.x - 100))
+        this.$emit('replay', {
+          startTime: `${this.form.date} ${time}`,
+          endTime: this.form.date + ` ${Number(time.substr(0, 2)) + 6 > 9 ? Number(time.substr(0, 2)) + 6 : '0' + (Number(time.substr(0, 2)) + 6)}:59:59`
+        })
+
+        this.isLiveing = false
+      },
+
+      init () {
+        this.$nextTick(() => {
+          this.isInit = true
+          this.$nextTick(() => {
+            this.canvasWidth = document.querySelector(`#${this.videoId}`).offsetWidth - 116
+            this.canvasHeight = document.querySelector(`#${this.videoId}`).offsetHeight
+
+            this.$nextTick(() => {
+              const el = document.querySelector(`#synergr-canvas`)
+              this.ctx = el.getContext('2d')
+              this.ctx.width  = document.querySelector(`#${this.videoId}`).offsetWidth - 116
+              this.ctx.height  = document.querySelector(`#${this.videoId}`).offsetHeight
+
+              if (this.x > 0) {
+                this.x = this.canvasWidth * this.ratioW
+              } else {
+                this.initNowTime()
+              }
+
+              this.renderTimeLine()
+              this.countdown()
+            })
+          })
+        })
+      },
+
+      countdown () {
+        this.timer = setInterval(() => {
+          this.initNowTime()
+        }, 1000)
+      },
+
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.beginPath()
+        ctx.lineWidth = lineWidth
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.strokeStyle = lineColor
+        ctx.stroke()
+      },
+
+      onClick (e) {
+        const canvasInfo = document.querySelector(`#synergr-canvas`).getBoundingClientRect()
+        this.x = e.clientX - canvasInfo.left + 100
+        clearInterval(this.timer)
+        this.timer = null
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * (this.x - 100))
+        this.$emit('replay', {
+          startTime: `${this.form.date} ${time}`,
+          endTime: this.form.date + ` ${Number(time.substr(0, 2)) + 6 > 9 ? Number(time.substr(0, 2)) + 6 : '0' + (Number(time.substr(0, 2)) + 6)}:00:00`
+        })
+        this.isLiveing = false
+      },
+
+      renderTimeLine () {
+        const ctx = this.ctx
+        ctx.fillStyle = 'rgba(40, 43, 58, 1)'
+        ctx.fillRect(0, 0, this.canvasWidth, 28)
+        
+        ctx.fillStyle = '#fff'
+        ctx.font = '12px Arial'
+        const w = this.canvasWidth / 24 
+
+        for (let i = 0; i < 25; i ++) {
+          this.drawLine(ctx, {
+            beginX: i * w,
+            beginY: 28,
+            endX: i * w,
+            endY: (i % this.scale === 0 || i === 0) ? 22 : 24,
+            lineColor: (i % this.scale === 0 || i === 0) ? '#000' : '#000',
+            lineWidth: (i % this.scale === 0 || i === 0) ? 1 : 1
+          })
+
+          if ((i % this.scale === 0 || i === 0)) {
+            const text = (i < 10 ? '0' + i : i) + ': 00'
+              const textWidth = ctx.measureText(text).width
+            if (i === 24) {
+              ctx.fillText(text, i * w - textWidth, 21)
+            } else if (i === 0) {
+              ctx.fillText(text, 0, 21)
+            } else {
+              ctx.fillText(text, i * w - textWidth / 2, 21)
+            }
+          }
+        }
+      },
+
+      initNowTime () {
+        const date = new Date()
+        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()
+
+        this.x = seconds / (24 * 60 * 60) * this.canvasWidth + 100
+      },
+
+      secTotime (s) {
+        let second = parseInt(s)
+        let minute = 0
+        let hour = 0
+        if (second > 60) {
+          minute = parseInt(second / 60)
+          second = parseInt(second % 60)
+          if (minute > 60) {
+            hour = parseInt(minute / 60)
+            minute = parseInt(minute % 60)
+          }
+        }
+
+        hour = `${parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour)}`
+        minute = `${parseInt(minute) > 9 ? parseInt(minute) : '0' + parseInt(minute)}`
+        second = `${parseInt(second) > 9 ? parseInt(second) : '0' + parseInt(second)}`
+        return `${hour}:${minute}:${second}`
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.isShowDate = false
+            this.date = this.form.date
+            this.getSlwPlaybackTime()
+          }
+        })
+      },
+
+      getSlwPlaybackTime () {
+        this.$emit('update:isLoading', true)
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
+          params: {
+            ids: this.ids,
+            startTime: this.date + ' 00:00:00',
+            endTime: this.date + ' 23:59:59',
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              this.times = res.data.map(v => {
+                return {
+                  id: v.id,
+                  times: v.times.map(item => {
+                    const startTime = (item.startTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+                    const endTime = (item.endTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+
+                    return {
+                      startTime: Number(startTime.toFixed(0)),
+                      endTime: Number(endTime.toFixed(0))
+                    }
+                  }).sort((a, b) => {
+                    return a.startTime - b.startTime
+                  })
+                }
+              })
+            }
+
+            this.$emit('update:isLoading', false)
+          }
+        }).catch(() => {
+          this.$emit('update:isLoading', false)
+        })
+      },
+
+      onVolume (e) {
+        const v = (e / 100).toFixed(1)
+        const subPage = document.querySelector(`#${this.id}`).contentWindow
+        subPage.postMessage({
+          type: 'volume',
+          value: Number(v)
+        }, '*')
+      },
+
+      reset () {
+        setTimeout(() => {
+          this.init()
+        }, 60)
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .synergr {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    font-size: 0;
+    background: rgba(40, 43, 58, 1);
+
+    #synergr-canvas {
+      margin: 0 0 0 100px;
+    }
+
+    .playback {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      z-index: 1;
+      width: 100%;
+      padding-top: 6px;
+      text-align: center;
+      transform: translate(-50%, -100%);
+      background: #202330;
+
+      .synergr-more {
+        width: 80px;
+        height: 16px;
+        margin: 0 auto;
+        cursor: pointer;
+        background: url(https://cdn.cunwuyun.cn/slw2.0/images/more.png);
+        color: #fff;
+
+        img {
+          position: relative;
+          transition: all ease 0.5s;
+          transform: rotate(180deg);
+        }
+
+        &.active img {
+          transform: rotate(0);
+        }
+      }
+
+      .playback-list {
+        padding: 8px 16px;
+        background: rgba(22, 24, 33, 1);
+        font-size: 12px;
+        color: #FFFFFF;
+
+        .playback-item {
+          position: relative;
+          display: flex;
+          align-items: center;
+          width: 100%;
+          margin-bottom: 4px;
+
+          i {
+            position: absolute;
+            top: 50%;
+            z-index: 1;
+            width: 2px;
+            height: 12px;
+            background: #FFC916;
+            transform: translateY(-50%);
+          }
+
+          &:last-child {
+            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%;
+
+            .el-checkbox__label {
+              display: flex;
+              align-items: center;
+              flex: 1;
+
+              span {
+                width: 60px;
+                color: #fff;
+                text-align: left;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .time-scale {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      left: 0;
+      top: 28px;
+      z-index: 1;
+      user-select: none;
+      width: 12px;
+      height: 24px;
+
+      span {
+        width: 2px;
+        height: 24px;
+        background: rgba(255, 255, 255, 0.8);
+      }
+    }
+
+    .drag-img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      user-select: none;
+      cursor: e-resize;
+      -webkit-user-drag: none;
+      transform: translateX(-50%);
+    }
+
+    .time {
+      position: absolute;
+      bottom: 40px;
+      left: 0;
+      z-index: 1;
+      padding: 2px 4px;
+      font-size: 12px;
+      color: #fff;
+      background: rgba(0, 0, 0, 1);
+      transform: translate(-50%, 100%);
+    }
+
+    .slw-bottom {
+      width: 100%;
+      height: 40px;
+    }
+
+    &:hover {
+      .slw-title {
+        transform: translateY(0%);
+      }
+      .slw-bottom {
+        transform: translateY(0%);
+      }
+    }
+
+    .action-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 40px;
+      padding: 0 16px;
+      transition: all ease-in-out 0.5s;
+      background: rgba(46, 53, 75, 1);
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .play-status {
+          display: flex;
+          align-items: center;
+
+          em {
+            margin-left: 12px;
+            font-style: normal;
+            color: #fff;
+            font-size: 12px;
+          }
+
+          .back-btn {
+            padding: 4px 10px;
+            border-radius: 6px;
+            color: #ddd;
+            font-size: 12px;
+            cursor: pointer;
+            background: #343747;
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+
+          .live {
+            display: flex;
+            align-items: center;
+            line-height: 1;
+            padding: 2px 5px;
+            color: rgba(0,255,0,.8);
+
+            i {
+              font-size: 12px;
+              font-style: normal;
+            }
+
+            .label {
+              width: 6px;
+              height: 6px;
+              margin-right: 12px;
+              background: rgba(0,255,0,.8);
+              border-radius: 50%;
+              position: relative;
+
+              &:after {
+                content: "";
+                width: 12px;
+                height: 12px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                -webkit-transform: translate(-50%,-50%);
+                transform: translate(-50%,-50%);
+                border-radius: 50%;
+                border: 4px solid rgba(0,255,0,.2);
+              }
+            }
+          }
+        }
+
+        .volume {
+          display: flex;
+          align-items: center;
+          position: relative;
+          height: 100%;
+
+          .volume-slider {
+            display: none;
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            z-index: -1;
+            opacity: 0;
+            padding: 20px 0 10px;
+            background-color: rgba(0, 0,0,.8);
+            transform: translate(-50%, 0);
+            transition: all ease 0.3s;
+
+            &.active {
+              display: block;
+              z-index: 1;
+              opacity: 1;
+            }
+          }
+        }
+
+        img {
+          cursor: pointer;
+        }
+
+        .left-btns {
+          display: flex;
+          align-items: center;
+          margin-right: 10px;
+
+          span {
+            flex: 1;
+            height: 100%;
+            line-height: 24px;
+            background: #222838;
+            color: #c9c9c9;
+            font-size: 12px;
+            cursor: pointer;
+
+            &.active {
+              color: #fff;
+              background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
+            }
+          }
+        }
+      }
+
+      .right {
+        color: #c9c9c9;
+        font-size: 12px;
+
+        span {
+          margin-right: 32px;
+          cursor: pointer;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+
+        img {
+          margin-right: 16px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      & > div {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+</style>

packages/device/IntelligentSecurity/components/Timeline.vue

@@ -0,0 +1,293 @@
+<template>
+  <div :class="wrapper" class="canvas" @click="onClick" @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
+    <canvas :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 @mousedown="onDragDown" class="drag-img" :style="{left: x + 'px'}" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['isLiveing', 'times'],
+
+    data () {
+      return {
+        ctx: null,
+        canvasWidth: '',
+        canvasHeight: '',
+        scale: 4,
+        time: '',
+        left: 0,
+        x: 0,
+        ratioW: '',
+        isHide: true,
+        isInit: false,
+        isChoose: false,
+        wrapper: `canvas-${new Date().getTime()}`,
+        id: `timeline-${new Date().getTime()}`,
+        timer: null
+      }
+    },
+
+    watch: {
+      isLiveing () {
+        this.countdown()
+      },
+
+      times: {
+        deep: true,
+        handler (v) {
+          if (v.length && this.ctx) {
+            this.init()
+          }
+        }
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    destroyed () {
+      clearInterval(this.timer)
+    },
+
+    methods: {
+      onMousemove (e) {
+        const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
+        const seconds = 24 * 60 * 60
+
+        if (e.clientY - canvasInfo.top < 29) {
+          const x = e.clientX - canvasInfo.left
+          const unit = seconds / this.canvasWidth * x
+          this.left = x
+          this.time = this.secTotime(unit)
+          this.isHide = false
+
+          if (!this.isChoose) return
+          this.x = e.clientX - canvasInfo.left
+          this.ratioW = this.x / this.canvasWidth
+        } else {
+          this.isHide = true
+        }
+      },
+
+      onClick (e) {
+        const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
+
+        if (e.clientY - canvasInfo.top < 29) {
+          this.x = e.clientX - canvasInfo.left
+          clearInterval(this.timer)
+          this.timer = null
+          const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+
+          this.$emit('replay', time)
+        }
+      },
+
+      onDragDown () {
+        this.isChoose = true
+      },
+
+      onMouseUp () {
+        if (!this.isChoose) return
+
+        clearInterval(this.timer)
+        this.timer = null
+        this.isChoose = false
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        this.$emit('replay', time)
+      },
+
+      secTotime (s) {
+        let second = parseInt(s)
+        let minute = 0
+        let hour = 0
+        if (second > 60) {
+          minute = parseInt(second / 60)
+          second = parseInt(second % 60)
+          if (minute > 60) {
+            hour = parseInt(minute / 60)
+            minute = parseInt(minute % 60)
+          }
+        }
+
+        hour = `${parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour)}`
+        minute = `${parseInt(minute) > 9 ? parseInt(minute) : '0' + parseInt(minute)}`
+        second = `${parseInt(second) > 9 ? parseInt(second) : '0' + parseInt(second)}`
+        return `${hour}:${minute}:${second}`
+      },
+
+      init () {
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+          
+        this.ratioW = this.x / this.canvasWidth
+        this.$nextTick(() => {
+          this.isInit = true
+          this.$nextTick(() => {
+            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
+            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight
+
+            this.$nextTick(() => {
+              const el = document.querySelector(`#${this.id}`)
+              this.ctx = el.getContext('2d')
+              this.ctx.width  = document.querySelector('.canvas').offsetWidth
+              this.ctx.height  = document.querySelector('.canvas').offsetHeight
+
+              if (this.x > 0) {
+                this.x = this.ratioW * this.canvasWidth
+              } else {
+                this.initNowTime()
+              }
+
+              this.renderTimeLine()
+              this.renderPlayback()
+
+              this.countdown()
+            })
+          })
+        })
+      },
+
+      countdown () {
+        this.timer = setInterval(() => {
+          if (this.isLiveing) {
+            this.initNowTime()
+          } else {
+            this.x = this.x + this.canvasWidth / (24 * 60 * 60)
+          }
+        }, 1000)
+      },
+
+      initNowTime () {
+        const date = new Date()
+        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()
+
+        this.x = this.canvasWidth / (24 * 60 * 60) * seconds
+      },
+
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.lineWidth = lineWidth
+        ctx.strokeStyle = lineColor
+        ctx.beginPath()
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.closePath()
+        ctx.stroke()
+      },
+
+      renderPlayback () {
+        const ctx = this.ctx
+        const unit = this.canvasWidth / (24 * 60 * 60)
+        this.times.forEach(item => {
+          this.drawLine(ctx, {
+            beginX: item.startTime * unit,
+            beginY: 28,
+            endX: item.startTime * unit,
+            endY: 0,
+            lineColor: 'rgba(0, 156, 255, 1)',
+            lineWidth: item.endTime * unit - item.startTime * unit
+          })
+        })
+      },
+
+      renderTimeLine () {
+        const ctx = this.ctx
+        ctx.fillStyle = 'rgba(51, 60, 83, 0.8)'
+        ctx.fillRect(0, 0, this.canvasWidth, 28)
+        ctx.fillStyle = 'rgba(32, 40, 61, 0.8)'
+        ctx.fillRect(0, 28, this.canvasWidth, 24)
+
+        
+        ctx.fillStyle = '#fff'
+        ctx.font = '12px Arial'
+        const w = this.canvasWidth / 24 
+
+        for (let i = 1; i < 25; i ++) {
+          this.drawLine(ctx, {
+            beginX: i * w,
+            beginY: 28,
+            endX: i * w,
+            endY: i % this.scale === 0 ? 16 : 20,
+            lineColor: i % this.scale === 0 ? 'red' : '#000',
+            lineWidth: i % this.scale === 0 ? 1 : 1
+          })
+
+          if (i % this.scale === 0) {
+            const text = (i < 10 ? '0' + i : i) + ': 00'
+            const textWidth = ctx.measureText(text).width
+            if (i === 24) {
+              ctx.fillText(text, i * w - textWidth, 44)
+            } else {
+              ctx.fillText(text, i * w - textWidth / 2, 44)
+            }
+          }
+        }
+
+        if (!this.times.length) {
+        ctx.stroke()
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .canvas {
+    position: relative;
+    width: 100%;
+    height: 52px;
+
+    .drag-img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      user-select: none;
+      cursor: e-resize;
+      -webkit-user-drag: none;
+      // transform: translateX(-50%);
+    }
+
+    .time-scale {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      left: 0;
+      bottom: 0;
+      z-index: 1;
+      user-select: none;
+      width: 12px;
+      height: 24px;
+
+      span {
+        width: 2px;
+        height: 24px;
+        background: rgba(255, 255, 255, 0.8);
+      }
+    }
+
+    .time {
+      position: absolute;
+      bottom: 22px;
+      left: 0;
+      z-index: 1;
+      padding: 2px 4px;
+      font-size: 12px;
+      color: #fff;
+      background: rgba(0, 0, 0, 1);
+      transform: translate(-50%, 100%);
+    }
+  }
+</style>

packages/device/IntelligentSecurity/components/deviceSlider.vue

@@ -0,0 +1,319 @@
+<template>
+  <section class="deviceSlider">
+    <div class="mainPane" v-if="show">
+      <div flex overview>
+        <b>监控设备</b>
+        <div>
+          <div>设备总数：{{ overview.total }}</div>
+          <div flex>在线设备：<p v-text="overview.online"/></div>
+        </div>
+        <el-progress type="circle" :width="40" :percentage="overview.percent" color="#19D286" :stroke-width="4"/>
+      </div>
+      <div flex search>
+        <el-select v-model="search.bind" size="mini" placeholder="全部" clearable @change="onChange">
+          <el-option v-for="(op,i) in dict.getDict('deviceStatus')" :key="i" :value="op.dictValue"
+                     :label="op.dictName"/>
+        </el-select>
+        <el-input
+            v-model="search.name"
+            size="mini"
+            placeholder="设备名称"
+            v-throttle="handleTreeFilter"
+            prefix-icon="el-icon-search"
+            @clear="search.name = '', handleTreeFilter()" clearable/>
+      </div>
+      <div title>设备列表</div>
+      <div fill class="deviceList">
+        <el-tree ref="deviceTree" highlight-current :render-content="renderItem" :data="treeData" :props="propsConfig"
+                 @node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
+                 :filter-node-method="handleFilter"/>
+        <ul
+          v-if="isShowMenu && menuInfo.node.type==1 && permissions('video_config')"
+          class="el-dropdown-menu el-popper"
+          :style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
+          x-placement="top-end">
+          <li class="el-dropdown-menu__item" @click="handleTreeCommand('edit', menuInfo.node)">修改名称</li>
+          <li class="el-dropdown-menu__item" @click="handleTreeCommand('locate', menuInfo.node)">地图标绘</li>
+        </ul>
+      </div>
+    </div>
+    <div class="rightBtn" :class="{show}" @click="handleShow">
+      <i class="iconfont iconArrow_Right"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "deviceSlider",
+  props: {
+    show: Boolean,
+    ins: Function,
+    dict: Object,
+    permissions: Function,
+    renderItem: Function
+  },
+  computed: {
+    overview() {
+      let total = this.list?.length || 0,
+          online = this.list?.filter(e => e.deviceStatus == 1)?.length || 0
+      return {
+        total, online,
+        percent: Math.ceil(online / total * 100) || 0
+      }
+    },
+    propsConfig() {
+      return {
+        label: 'name',
+        children: 'children'
+      }
+    },
+    treeData() {
+      let {list, noArea, staData} = this
+      let meta = [staData?.reduce((t, e) => {
+        return t.type <= e.type ? t : e
+      }, {name: '读取中...'})]
+      meta.map(p => this.addChild(p, [...staData, ...list].map(s => ({
+        ...s,
+        parentId: s.areaId || s.parent_id
+      }))))
+      return [...meta, {
+        id: 'no_area',
+        name: '未知区划',
+        children: noArea
+      }]
+    }
+  },
+  data() {
+    return {
+      list: [],
+      noArea: [],
+      staData: [],
+      name: '',
+      isShowMenu: false,
+      search: {
+        bind: ''
+      },
+      menuInfo: {
+        x: '',
+        y: '',
+        node: {}
+      }
+    }
+  },
+  methods: {
+    handleShow() {
+      this.$emit('update:show', !this.show)
+    },
+
+    bindEvent() {
+      this.isShowMenu = false
+    },
+    getDevices() {
+      this.ins.post("/app/appzyvideoequipment/tree", null, {
+        params: {size: 999}
+      }).then(res => {
+        if (res?.data) {
+          this.staData = res.data.count
+          this.list = res.data.list
+          this.noArea = res.data.noArea
+          this.$emit('list', this.list)
+        }
+      })
+    },
+
+    handleTreeCommand(e, node) {
+      this.$emit('treeCommand', {
+        type: e,
+        node
+      })
+    },
+
+    nodeContextmenu(e, node) {
+      this.isShowMenu = true
+      let y = e.y + 6
+      if (y + 202 > document.body.clientHeight) {
+        y = y - 202
+      }
+      this.menuInfo = {
+        x: e.x + 16, y,
+        node
+      }
+    },
+    handleNodeClick(data) {
+      this.isShowMenu = false
+      this.$emit('select', data)
+    },
+    handleFilter(v, data) {
+      if (!v) {
+        return !this.search.bind ? true : data.deviceStatus === this.search.bind
+      }
+
+      return data?.name?.indexOf(v) > -1 && (!this.search.bind ? true : data.deviceStatus === this.search.bind)
+    },
+    handleTreeFilter() {
+      this.$refs.deviceTree?.filter(this.search.name)
+    },
+
+    onChange() {
+      this.$refs.deviceTree?.filter(this.search.name)
+    }
+  },
+  created() {
+    this.dict.load("deviceStatus")
+    this.getDevices()
+  },
+
+  mounted() {
+    document.querySelector('html').addEventListener('click', this.bindEvent)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.deviceSlider {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: #fff;
+  overflow: hidden;
+
+  div[flex] {
+    display: flex;
+    align-items: center;
+  }
+
+  .deviceList {
+    overflow: auto;
+
+    ::v-deep .el-tree {
+      width: -webkit-fit-content;
+      width: -moz-fit-content;
+      width: fit-content;
+      min-width: 100%;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      height: 15px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+      background: #535353;
+    }
+
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+      background: #fff;
+    }
+  }
+
+  div[fill] {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .mainPane {
+    width: 280px;
+    height: 100%;
+    background: #333C53;
+    display: flex;
+    flex-direction: column;
+    padding-top: 16px;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    b {
+      font-size: 18px;
+    }
+
+    div[overview], div[search] {
+      box-sizing: border-box;
+      font-size: 12px;
+      justify-content: space-between;
+      padding: 0 16px;
+      gap: 4px;
+      margin-bottom: 16px;
+
+      ::v-deep.el-input__inner {
+        color: #fff;
+      }
+    }
+
+    div[title] {
+      height: 28px;
+      background: #3E4A69;
+      padding: 0 16px;
+      line-height: 28px;
+    }
+
+    ::v-deep.deviceList {
+      padding: 0 8px;
+
+      .el-scrollbar {
+        height: 100%;
+
+        .el-scrollbar__wrap {
+          box-sizing: content-box;
+          padding-bottom: 17px;
+        }
+      }
+    }
+
+    ::v-deep .el-progress__text, p {
+      color: #19D286;
+    }
+
+    ::v-deep .el-input__inner {
+      background: #282F45;
+      border: none;
+    }
+
+    ::v-deep .el-tree {
+      background: transparent;
+      color: #fff;
+
+      .el-tree-node__content {
+        background: transparent!important;
+      }
+      
+      .el-tree-node__children .is-current .el-tree-node__content {
+        background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%)!important;
+      }
+
+      .el-tree-node__content:hover {
+        background: transparent;
+      }
+
+      .el-tree-node__content {
+        height: 32px;
+      }
+    }
+
+    ::v-deep .el-input__icon {
+      color: #89b;
+    }
+  }
+
+  .rightBtn {
+    width: 16px;
+    height: 80px;
+    background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .iconfont {
+      transition: transform 0.2s;
+    }
+
+
+    &.show > .iconfont {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>

packages/device/IntelligentSecurity/components/locateDialog.vue

@@ -0,0 +1,177 @@
+<template>
+  <section class="locateDialog">
+    <ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
+               @opened="$nextTick(()=>initMap())"
+               @onConfirm="handleConfirm">
+      <ai-t-map :map.sync="map" :lib.sync="TMap"/>
+      <div class="poi">
+        <el-autocomplete ref="poiInput" v-model="search" size="small" clearable :fetch-suggestions="handleSearch"
+                         placeholder="请输入地点" @select="handleSelect" :trigger-on-focus="false">
+          <template slot-scope="{item}">
+            <span style="direction: rtl" v-text="`${item.title}(${item.address})`"/>
+          </template>
+        </el-autocomplete>
+      </div>
+      <el-form class="selected" v-if="!!selected.location" id="result" size="mini" label-suffix="："
+               label-position="left">
+        <div class="header">
+          <i class="iconfont iconLocation"/>
+          <span v-html="[selected.location.lng, selected.location.lat].join(',')"/>
+        </div>
+        <el-form-item label="地点">{{ selected.name || "未知地名" }}</el-form-item>
+        <el-form-item label="类型" v-if="!!selected.type">{{ selected.type }}</el-form-item>
+        <el-form-item label="地址" v-if="!!selected.address">{{ selected.address }}</el-form-item>
+      </el-form>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "locateDialog",
+  model: {
+    prop: "visible",
+    event: "visible",
+  },
+  props: ['latlng', 'visible'],
+  data() {
+    return {
+      dialog: false,
+      search: "",
+      map: null,
+      selected: {},
+      TMap: null
+    }
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  watch: {
+    visible(v) {
+      this.dialog = v
+    }
+  },
+  methods: {
+    initMap(count = 0) {
+      let {map, TMap} = this
+      if (map) {
+        if (!!this.latlng?.lat) {
+          let position = new TMap.LatLng(this.latlng.lat, this.latlng.lng)
+          map.setCenter(position)
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position}]})
+        }
+        map.on('click', res => {
+          let {poi, latLng: location} = res, name = poi?.name || ""
+          this.selected.marker?.setMap(null)
+          this.selected = {location, name}
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
+        })
+      } else {
+        if (count < 5) {
+          count++
+          setTimeout(() => this.initMap(count), 500)
+        } else {
+          console.error("地图渲染失败")
+        }
+      }
+    },
+    handleSearch(keyword, cb) {
+      let {TMap} = this
+      if (keyword && TMap) {
+        let poi = new TMap.service.Search({pageSize: 10})
+        poi.searchRegion({
+          keyword, radius: 5000, cityName: this.user.info?.areaId?.substring(0, 6) || ""
+        }).then(res => {
+          if (res?.data?.length > 0) {
+            cb(res.data)
+          } else this.$message.error("未查到有效地点")
+        })
+      }
+    },
+    handleConfirm() {
+      if (this.selected?.location) {
+        this.$emit('confirm', this.selected)
+      } else {
+        this.$message.error('请先选择坐标位置')
+      }
+    },
+    handleSelect(res) {
+      let {map, TMap} = this
+      if (map) {
+        let {title: name, location} = res
+        this.selected.marker?.setMap(null)
+        this.selected = {location, name}
+        this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
+        map.setCenter(location)
+      }
+    }
+  },
+  created() {
+    this.dialog = this.visible
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.locateDialog {
+  .color-999 {
+    color: #999;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 0;
+    height: 480px;
+    position: relative;
+
+    .ai-dialog__content--wrapper {
+      padding: 0 !important;
+    }
+
+    .poi {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      display: flex;
+      height: 32px;
+      flex-direction: column;
+      z-index: 202203281016;
+      width: 400px;
+
+      div {
+        flex-shrink: 0;
+      }
+    }
+
+    .selected {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      background: #fff;
+      min-width: 200px;
+      box-sizing: border-box;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+      .header {
+        color: #fff;
+        background: #26f;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        height: 32px;
+        font-size: 14px;
+        gap: 4px;
+        padding: 0 8px;
+      }
+
+      .el-form-item {
+        padding: 0 8px;
+        margin: 0;
+      }
+    }
+  }
+}
+
+
+</style>

packages/device/IntelligentSecurity/components/settingDialog.vue

@@ -0,0 +1,91 @@
+<template>
+  <section class="settingDialog">
+    <ai-dialog :visible.sync="dialog" title="基础设置" @close="$emit('visible',false)">
+      <el-form ref="deviceForm" size="small" label-width="140px">
+        <el-form-item label="设备名称" class="full">
+          <el-input v-model="form.name" clearable placeholder="设备名称"/>
+        </el-form-item>
+        <el-form-item label="摄像头状态">
+          <el-radio v-model="form.status" label="开启"/>
+          <el-radio v-model="form.status" label="关闭"/>
+        </el-form-item>
+        <el-form-item label="高清视频">
+          <el-radio v-model="form.status" label="开启"/>
+          <el-radio v-model="form.status" label="关闭"/>
+        </el-form-item>
+        <el-form-item label="摄像头麦克风">
+          <el-radio v-model="form.status" label="开启"/>
+          <el-radio v-model="form.status" label="关闭"/>
+        </el-form-item>
+        <el-form-item label="状态指示灯">
+          <el-radio v-model="form.status" label="开启"/>
+          <el-radio v-model="form.status" label="关闭"/>
+        </el-form-item>
+        <el-form-item label="夜视">
+          <el-radio v-model="form.status" label="自动"/>
+          <el-radio v-model="form.status" label="开启"/>
+          <el-radio v-model="form.status" label="关闭"/>
+        </el-form-item>
+        <el-form-item label="旋转180°">
+          <el-radio v-model="form.status" label="开启"/>
+          <el-radio v-model="form.status" label="关闭"/>
+        </el-form-item>
+        <el-form-item label="WIFI网络" class="full">-</el-form-item>
+        <el-form-item label="MAC地址">(34:75:6b:c9:10)</el-form-item>
+        <el-form-item label="摄像头型号">C71</el-form-item>
+        <el-form-item label="固件">20.0326.251.2486</el-form-item>
+        <el-form-item label="嵌入式应用">2.3.37.8954</el-form-item>
+        <el-form-item label="IMEI">110003953100302</el-form-item>
+      </el-form>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "settingDialog",
+  model: {
+    prop: "visible",
+    event: "visible",
+  },
+  props: {
+    visible: Boolean,
+    detail: {default: () => ({})}
+  },
+  data() {
+    return {
+      dialog: false,
+      form: {}
+    }
+  },
+  watch: {
+    visible(v) {
+      this.dialog = v
+    }
+  },
+  created() {
+    this.form = JSON.parse(JSON.stringify(this.form))
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.settingDialog {
+  .el-form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  ::v-deep .el-form-item {
+    width: 50%;
+
+    .el-form-item__label {
+      padding-right: 40px;
+    }
+
+    &.full {
+      width: 100%;
+    }
+  }
+}
+</style>