持续集成分支

library/apps/AppIntelligentSecurity/AppIntelligentSecurity.vue

@@ -0,0 +1,352 @@
+<template>
+  <section class="videoSurveillance">
+    <AiTopFixed>
+      <div class="area-content">
+        <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="getList" :name.sync="areaName" selectRoot>
+          <img src="./img/local-icon.png" alt="">
+          <span class="label" v-if="areaName">{{ areaName }}</span>
+          <span v-else>请选择</span>
+          <u-icon name="arrow-down" color="#666" size="24" />
+        </AiAreaPicker>
+      </div>
+    </AiTopFixed>
+    <div class="num-content">
+      <!-- <img src="./img/on-icon.png" alt="">在线 {{count.online || 0}}
+      <img src="./img/off-icon.png" alt="" class="mar-l40">离线 {{count.sum - count.online || 0}} -->
+      <div class="item">
+        <div id="echarts" style="width:100%;height:100%;"></div>
+        <img src="./img/monitor-icon.png" alt="" class="monitor-icon">
+      </div>
+      <div class="item">
+        <h3>{{ count.online || 0 }}</h3>
+        <p>在线</p>
+      </div>
+      <div class="item">
+        <h3>{{ count.sum - count.online || 0 }}</h3>
+        <p>离线</p>
+      </div>
+      <div class="item">
+        <h3>{{ onlineRateNum || 0 }}%</h3>
+        <p>在线率</p>
+      </div>
+    </div>
+    <div class="list-content">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)">
+        <img class="img" :src="item.indexUrl || coverImg" alt="" v-if="item.deviceStatus == 1">
+        <img class="img" src="./img/offline.png" alt="" v-else>
+        <p>{{ item.name }}</p>
+        <img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1">
+        <img class="icon" src="./img/not-play-icon.png" alt="" v-else>
+        <div class="item-bottom">设备{{ item.deviceStatus === '1' ? '在线' : '离线' }}</div>
+      </div>
+      <AiEmpty v-if="!list.length" />
+    </div>
+  </section>
+</template>
+<script>
+import echarts from 'echarts'
+import {mapState} from 'vuex'
+
+export default {
+  name: "AppIntelligentSecurity",
+  appName: "视频监控",
+  data() {
+    return {
+      nodes: [
+        {nodeName: "首页"}
+      ],
+      monitors: [],
+      coverImg: require('./img/cover-img.png'),
+      areaId: '',
+      areaName: '',
+      list: [],
+      count: {},
+      Echart: null,
+      onlineRate: '',
+      onlineRateNum: 0,
+      offlineRate: ''
+    }
+  },
+  computed: {...mapState(['user'])},
+  methods: {
+    getMonitors(nodeId, queryType = 0) {
+      this.monitors = []
+      this.$http.post("/app/appzyvideoequipment/getTree", {
+        nodeId, queryType
+      }).then(res => {
+        if (res?.data) {
+          this.monitors = JSON.parse(res.data)?.[queryType == 0 ? 'node' : 'device'] || []
+        }
+      })
+    },
+    getMore(row) {
+      this.nodes.push(row)
+      this.getMonitors(row.nodeId, row.hasChild == 1 ? 0 : 1)
+    },
+    isCurrent(index) {
+      return index == Math.max(this.nodes?.length - 1, 0)
+    },
+    gotoNode(node, index) {
+      this.nodes.splice(index + 1)
+      this.getMonitors(node.nodeId)
+    },
+    getList() {
+      this.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId || this.user.areaId}`).then(res => {
+        if (res?.data) {
+          this.list = res.data.list
+          this.count = res.data.count
+          this.onlineRate = (this.count.online / this.count.sum).toFixed(2)
+          this.onlineRateNum = parseInt(this.onlineRate * 100)
+          this.offlineRate = (1 - this.onlineRate).toFixed(2)
+          this.initEchart()
+        }
+      })
+    },
+    showMonitor(row) {
+      if (row.deviceStatus != 1) return
+      uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
+    },
+    initEchart() {
+      var option = {
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {value: this.onlineRate},
+              {value: this.offlineRate},
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              },
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  var colorList = ['#3192F4', '#ccc',];
+                  return colorList[params.dataIndex]
+                }
+              }
+            }
+          }
+        ]
+      };
+
+      option && this.Echart.setOption(option)
+    },
+  },
+  created() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+  },
+  onShow() {
+    document.title = '智慧安防'
+    this.getList()
+  },
+  mounted() {
+    this.Echart = echarts.init(document.getElementById('echarts'))
+  }
+}
+</script>
+<style lang="scss" scoped>
+.videoSurveillance {
+  ::v-deep .placeholder {
+    margin-bottom: 8px;
+  }
+
+  .header {
+    color: #666;
+
+    .current {
+      color: #4E8EEE;
+    }
+  }
+
+  .list {
+    padding-left: 32px;
+    background: #FFF;
+
+
+    .item {
+      position: relative;
+      width: 100%;
+      border-bottom: 1px solid #DDD;
+      padding: 0 32px 0 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      &.online {
+        .videoIcon {
+          filter: none;
+        }
+
+        .deviceStatus {
+          color: #4E8EEE;
+          background: #E7F1FD;
+        }
+      }
+
+      .videoIcon {
+        width: 48px;
+        height: 32px;
+        margin-right: 8px;
+        filter: grayscale(100%);
+      }
+
+      .area-name {
+        font-size: 34px;
+        font-weight: 500;
+        color: #333;
+        flex: 1;
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .deviceStatus {
+        margin-left: 8px;
+        height: 22px;
+        padding: 0 8px;
+        line-height: 22px;
+        font-size: 13px;
+        color: #666;
+        background: #E9E9E9;
+      }
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .area-content {
+    display: inline-block;
+    width: 100%;
+    line-height: 64px;
+
+    img {
+      width: 42px;
+      vertical-align: middle;
+      margin-right: 16px;
+    }
+
+    .u-icon {
+      margin-left: 6px;
+    }
+  }
+
+  .num-content {
+    width: calc(100% - 40px);
+    height: 164px;
+    background: #EEE;
+    border-radius: 16px;
+    margin: 32px 0 0 20px;
+    display: flex;
+
+    .item {
+      flex: 1;
+      text-align: center;
+      position: relative;
+
+      .monitor-icon {
+        width: 48px;
+        height: 48px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -24px;
+        margin-top: -24px;
+      }
+
+      h3 {
+        font-size: 44px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #333;
+        line-height: 60px;
+        margin-top: 32px;
+      }
+
+      p {
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 40px;
+      }
+    }
+  }
+
+  .list-content {
+    width: 100%;
+    padding: 38px 0 0 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .item {
+      display: inline-block;
+      width: calc(50% - 36px);
+      margin-right: 36px;
+      border-radius: 16px;
+      position: relative;
+      margin-bottom: 32px;
+      vertical-align: top;
+
+      .item-bottom {
+        position: absolute;
+        top: 218px;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        color: #fff;
+        font-size: 28px;
+        background: rgba(0, 0, 0, 0.6);
+        transform: translateY(-100%);
+        border-radius: 0 0 16px 16px;
+      }
+
+      .img {
+        width: 100%;
+        height: 218px;
+        margin-bottom: 8px;
+        border-radius: 16px;
+      }
+
+      p {
+        width: 100%;
+        font-size: 34px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 48px;
+        word-break: break-all;
+      }
+
+      .icon {
+        width: 40px;
+        height: 48px;
+        position: absolute;
+        top: 84px;
+        left: 158px;
+      }
+    }
+  }
+}
+</style>

library/apps/AppIntelligentSecurity/SlwVideo.vue

@@ -0,0 +1,420 @@
+<template>
+  <div class="slw">
+    <iframe v-if="isShow" :id="iframeId" style="width: 100%; height: 100%;" :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`"></iframe>
+    <div class="slw-bottom" :class="[isShowBar ? '' : 'active']" @click.stop="() =>{}">
+      <Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" ref="timeline" :style="{width: width}"></Timeline>
+      <div class="action-bar">
+        <div class="left">
+          <div class="left-btns">
+            <img :src="isPause ? 'https://cdn.cunwuyun.cn/slw2.0/images/play.png' : 'https://cdn.cunwuyun.cn/slw2.0/images/pause.png'" @click="changePlayStatus">
+          </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' : '']">
+            </div>
+          </div> -->
+          <div class="play-status">
+            <div class="live" v-if="isLiveing">
+              <span class="label"></span>
+              <i>直播中</i>
+              <em>{{ date }}</em>
+            </div>
+            <div v-else class="back-btn" @click="backLiveing">回到直播</div>
+          </div>
+        </div>
+        <div class="right" :style="{ right: right + 'px' }">
+          <!-- <picker mode="date" @change="onDateChange">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png">
+          </picker> -->
+          <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
+        </div>
+      </div>
+    </div>
+    <u-calendar v-model="isShowDate" @change="onDateChange" mode="date"></u-calendar>
+  </div>
+</template>
+
+<script>
+  import Timeline from './components/Timeline'
+  export default {
+    props: ['id'],
+
+    name: 'slwVideo',
+
+    components: {
+      Timeline
+    },
+
+    data () {
+      return {
+        isShow: true,
+        iframeId: `video-${new Date().getTime()}`,
+        liveingUrl: '',
+        replayUrl: '',
+        times: [],
+				params: {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false
+				},
+        isShowDate: false,
+        isPause: false,
+        isShowVolume: false,
+        isShowBar: true,
+        date: '',
+        right: 0,
+        isLiveing: true
+      }
+    },
+
+    watch: {
+      src: {
+        handler (val) {
+          if (val) {
+            this.isShow = false
+
+            this.$nextTick(() => {
+              this.isShow = true
+            })
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    computed: {
+      src () {
+        if (this.isLiveing) {
+          return this.liveingUrl
+        }
+
+        return this.replayUrl
+      }
+    },
+
+    mounted () {
+      if (uni.getSystemInfoSync().platform === 'ios') {
+        this.right = 20
+      }
+
+      this.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
+      this.getSlwPlaybackTime()
+      this.width = document.querySelector(`.slw`).offsetWidth + 'px'
+
+      if (this.id) {
+        this.getLiveingUrl()
+      }
+    },
+
+    methods: {
+      backLiveing () {
+        this.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
+        this.getLiveingUrl()
+        this.getSlwPlaybackTime()
+      },
+
+      onDateChange (e) {
+        this.date = `${e.result}`
+        this.getSlwPlaybackTime()
+      },
+
+      onReplay (e) {
+        this.isLoading = true
+        this.$http.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
+          params: {
+            ids: this.id,
+            startTime: `${this.date} ${e}`,
+            endTime: this.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(e => {
+          console.log(e)
+          this.isLoading = false
+        })
+      },
+
+      getLiveingUrl () {
+        this.isLoading = true
+        this.$http.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
+        })
+      },
+
+      getSlwPlaybackTime () {
+        this.$loading()
+        this.$http.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.replaceAll('-', '/') + ' 00:00:00').getTime()) / 1000
+                const endTime = (item.endTime - new Date(this.date.replaceAll('-', '/') + ' 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.$hideLoading()
+          }
+        }).catch(() => {
+          this.$hideLoading()
+        })
+      },
+
+      onVolume (e) {
+        const v = (e / 100).toFixed(1)
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
+        subPage.postMessage({
+          type: 'volume',
+          value: Number(v)
+        }, '*')
+      },
+
+      changePlayStatus () {
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
+        subPage.postMessage({
+          type: 'play',
+          value: this.isPause
+        }, '*')
+        
+        this.isPause = !this.isPause
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slw {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    ::v-deep .u-drawer {
+      transform: scale(0.8);
+      .u-calendar__content__item {
+        padding: 0;
+      }
+
+      .u-calendar__action {
+        padding: 14px 0;
+      }
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    iframe {
+      border: none;
+    }
+
+    .slw-bottom {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      transition: all ease-in-out 0.5s;
+
+      &.active {
+        transform: translateY(100%);
+      }
+
+      .action-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 60px;
+        padding: 0 30px;
+        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: 24px;
+            }
+
+            .back-btn {
+              padding: 4px 10px;
+              border-radius: 6px;
+              color: #ddd;
+              font-size: 24px;
+              cursor: pointer;
+              background: #343747;
+
+              &:hover {
+                opacity: 0.6;
+              }
+            }
+
+            .live {
+              display: flex;
+              align-items: center;
+              padding: 2px 5px;
+              color: rgba(0,255,0,.8);
+
+              i {
+                font-size: 24px;
+                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;
+            height: 40px;
+          }
+
+          .left-btns {
+            display: flex;
+            align-items: center;
+            margin-right: 10px;
+
+            span {
+              flex: 1;
+              height: 100%;
+              line-height: 24px;
+              background: #222838;
+              color: #c9c9c9;
+              font-size: 24px;
+              cursor: pointer;
+
+              &.active {
+                color: #fff;
+                background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
+              }
+            }
+          }
+        }
+
+        .right {
+          position: relative;
+          color: #c9c9c9;
+          font-size: 24px;
+
+          span {
+            margin-right: 32px;
+            cursor: pointer;
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+
+          img {
+            margin-right: 16px;
+            height: 40px;
+            cursor: pointer;
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+        }
+
+        & > div {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+</style>

library/apps/AppIntelligentSecurity/components/Timeline.vue

@@ -0,0 +1,270 @@
+<template>
+  <div :class="wrapper" class="canvas" v-if="isInit" style="height: 52px">
+    <canvas class="canvas" :id="id" :canvas-id="id" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" v-if="canvasWidth" :width="canvasWidth" @click.stop="onClick" :height="canvasHeight">
+    </canvas>
+    <em :style="{height: '24px', left: x + 'px'}"></em>
+    <img class="drag-img" :style="{ left: x + 'px'}" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['isLiveing', 'times'],
+
+    data () {
+      return {
+        x: 0,
+        id: `timeline-${new Date().getTime()}`,
+        ctx: null,
+        time: '',
+        left: 0,
+        timer: null,
+        scale: 4,
+        ratioW: '',
+        isHide: true,
+        isInit: false,
+        isChoose: false,
+        wrapper: `canvas-${new Date().getTime()}`,
+        canvasWidth: '',
+        canvasHeight: ''
+      }
+    },
+
+    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: {
+      touchmove (e) {
+        this.x = e.touches[0].clientY
+      },
+
+      touchstart (e) {
+
+      },
+
+      touchend (e) {
+        clearInterval(this.timer)
+        this.timer = null
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        this.$emit('replay', time)
+      },
+
+      onClick (e) {
+        this.x = e.target.y
+        clearInterval(this.timer)
+        this.timer = null
+        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 = uni.getSystemInfoSync().windowHeight
+            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight 
+            this.$nextTick(() => {
+              const el = document.querySelector(`#${this.id}`)
+              this.ctx = uni.createCanvasContext(`${this.id}`)
+
+              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.stroke()
+        ctx.closePath()
+      },
+
+      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
+          })
+        })
+        ctx.draw(true)
+      },
+
+      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)
+            }
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .canvas {
+    position: relative;
+    width: 100%;
+
+    & > em {
+      position: absolute;
+      bottom: 0;
+      z-index: 11;
+      width: 4px;
+      height: 24px;
+      background: #fff;
+      transform: translateX(-50%);
+    }
+
+    .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>

library/apps/AppIntelligentSecurity/monitorDetail.vue

@@ -0,0 +1,92 @@
+<template>
+  <section class="monitorDetail">
+    <div class="videoBox">
+      <SlwVideo :id="id" :style="style"></SlwVideo>
+    </div>
+  </section>
+</template>
+
+<script>
+import SlwVideo from './SlwVideo'
+export default {
+  name: "monitorDetail",
+  data() {
+    return {
+      style: {},
+      videoUrl: '',
+      monitor: {},
+      id: ''
+    }
+  },
+
+  components: {
+    SlwVideo
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.detectOrient()
+    })
+    document.title = '视频监控'
+  },
+
+  methods: {
+    getDetail(deviceId) {
+      deviceId && this.$http.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+        params: {deviceId}
+      }).then(res => {
+        if (res?.data) {
+          this.videoUrl = res.data
+        }
+      })
+    },
+
+    detectOrient() {
+      var width = document.querySelector('.monitorDetail').clientWidth
+      var height = document.querySelector('.monitorDetail').clientHeight
+      if (width >= height) { // 竖屏
+        this.style = {
+          width: '100%',
+          height: '100%',
+          transform: 'rotate(0eg)',
+          transformOrigin: `0 0`
+        }
+      } else {
+        this.style = {
+          width: height + 'px',
+          height: width + 'px',
+          transform: 'rotate(90deg)',
+          transformOrigin: `${width / 2}px ${width / 2}px`
+        }
+      }
+    }
+  },
+  onLoad(params) {
+    this.id = params.id
+    // this.getDetail(params.id)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.monitorDetail {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  color: #fff;
+
+  .videoBox {
+    width: 100vw;
+    height: 100vh;
+
+    iframe {
+
+    }
+  }
+}
+</style>