Merge remote-tracking branch 'origin/dev-security' into dev-security

security-protection-platform/package.json

@@ -61,8 +61,7 @@
    "stylelint-order": "^0.7.0",
    "stylelint-scss": "^2.1.0",
    "vue-loader": "^14.2.3",
    "vue-template-compiler": "^2.2.1",
    "vuedraggable": "2.19"
    "vue-template-compiler": "^2.2.1"
  },
  "dependencies": {
    "aid-elements-desktop": "latest",
@@ -75,6 +74,10 @@
    "vuex": "^2.3.1",
    "vuex-router-sync": "^4.1.2",
    "js-cookie": "",
    "element-ui": "2.14.1"
    "element-ui": "2.14.1",
    "vuedraggable": "2.19",
    "video.js": "7.10.2",
    "videojs-playlist": "4.3.1",
    "echarts": "^4.9.0"
  }
}

security-protection-platform/src/api/dashboard/index.js

@@ -0,0 +1,25 @@
import http from '@/http'
const { $default } = http
const api = {
  // 出勤(饼状图)
  queryAttendanceChart () {
    return $default.get('/sp/homePage/queryAttendanceChart', {}).then(resp => {
      return resp.data
    })
  },
  // 报警(柱状图)
  queryAlarmAnalysisChart () {
    return $default.get('/sp/homePage/queryAlarmAnalysisChart', {}).then(resp => {
      return resp.data
    })
  },
  // 报警(TOP4)
  queryAlarmAnalysisTopList () {
    return $default.get('/sp/homePage/queryAlarmAnalysisTopList', {}).then(resp => {
      return resp.data
    })
  }
}
export default api

security-protection-platform/src/api/system/index.js

@@ -157,14 +157,18 @@ const api = {
      return $default.delete(`/sp/monitorSceneTerminal/deleteMonitorSceneTerminalRelByRelId?monitorSceneTerminalRelId=${data.monitorSceneTerminalRelId}`)
    }
  },
  moveTerminalRelIndex(data) {
    return $default.put('/sp/monitorSceneTerminal/moveMonitorSceneTerminalRelIndex', data)
  moveTerminalRelIndex(params) {
    params = keysMapping(params, mappingMonitor, false)
    return $default.put('/sp/monitorSceneTerminal/moveMonitorSceneTerminalRelIndex', {params})
  },
  getOneMonitorScene(monitorSceneId) {
    return $default.get(`/sp/monitorSceneManagement/queryOneMonitorScene?monitorSceneId=${monitorSceneId}`)
  },
  getqueryMonitorSceneLayoutList() {
    return $default.get(`/sp/monitorSceneManagement/queryMonitorSceneLayoutList`)
  },
  getDepartments() {
    return $default.get('/sp/workEmployee/queryAllOrganize')
  }
}

security-protection-platform/src/api/videoSurveillance/index.js

@@ -1,14 +1,18 @@
import http from '@/http'
const { $http } = http
const { $http, $default } = http
const api = {
  // 获取风场大门表格数据
  getVideoSurveillanceData(params) {
  getVideoSurveillanceData (params) {
    return $http.get('/videoSurveillance/getVideoSurveillanceData', params)
  },
  // 获取识别记录数据
  getDistinguishData(params) {
  getDistinguishData (params) {
    return $http.get('/videoSurveillance/getDistinguishData', params)
  },
  // 视频回放
  getVideoPlayBack (id) {
    return $default.get(`/sp/uploadFile/getFileUrl?fileName=${id}`).catch((err) => { return err })
  }
}
export default api

security-protection-platform/src/components/VideoPlayer/index.vue

@@ -0,0 +1,128 @@
<template>
  <div>
    <video ref="player" class="video-js vjs-default-skin vjs-big-play-centered"></video>
  </div>
</template>
<script>
import videojs from 'video.js'
window.videojs = videojs
require('videojs-playlist')
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')
const defaultPlayerOptions = {
  controls: true,
  autoplay: false,
  muted: false,
  language: 'zh-CN',
  fluid: true,
  // liveui: true,
  controlBar: {
    children: [
      {name: 'playToggle'}, // 播放按钮
      {name: 'currentTimeDisplay'}, // 当前已播放时间
      {name: 'progressControl'}, // 播放进度条
      {name: 'durationDisplay'}, // 总时间
      { // 倍数播放
        name: 'playbackRateMenuButton',
        playbackRates: [0.5, 1, 1.5, 2, 2.5]
      },
      {
        name: 'volumePanel', // 音量控制
        inline: false // 不使用水平方式
      },
      {name: 'FullscreenToggle'} // 全屏
    ]
  }
}
export default {
  name: 'VideoPlayer',
  props: {
    sources: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default() { return {} }
    },
    autoadvance: {
      type: Number,
      default: null
    }
  },
  data() {
    const playerOptions = Object.assign({}, defaultPlayerOptions, this.options)
    return {
      player: null,
      playerOptions
    }
  },
  computed: {
    playlist() {
      return this.sources
    }
  },
  watch: {
    playlist: {
      handler(list) {
        if (!this.player) return
        this.player.playlist(list)
        if (list.length > 0) {
          this.player.playlist.autoadvance(this.autoadvance)
          // this.player.playlist.first();
        }
        this.$emit('playlistchange', list)
      },
      immediate: true
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    init() {
      const player = videojs(this.$refs.player, this.playerOptions)
      this.player = player
      this.player.on('playlistitem', (...args) => {
        this.$emit('playlistitem', ...args)
      })
      this.$emit('player-inited', player)
    }
  }
}
</script>
<style lang="scss">
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}
.vjs-slider-vertical .vjs-volume-level:before {
  top: -.4em;
  left: -.4em;
}
.video-js {
  .vjs-play-progress:before {
    top: -.5em;
    transform-origin: center;
  }
  .vjs-progress-control:hover {
      .vjs-play-progress:before {
        transform: translateY(0.17em);
      }
    }
}
</style>

security-protection-platform/src/modules/dashboard/index.vue

@@ -1,13 +1,488 @@
<template>
  <div>首页</div>
  <div class="index">
    <div :style="`background-image: url(${imgBg})`" class="top" >
      <img src="@/assets/images/brand.png" class="top-logo">
    </div>
    <div>
      <div class="time"><span style="color: #00d8f3;font-size: 21px;">{{ nowDate | dateFormat }}</span></div>
      <div class="goto"><t-icon icon="arrow-right-outline"></t-icon>进入系统</div>
    </div>
    <div class="body">
      <div class="body-left">
        <div :style="`height:260px`" class="body-left-item">
          <div :style="`background-image: url(${titleImgBg})`" class="title">
            <span class="title-span">出勤统计</span>
          </div>
          <div id="doughnut" style="height: 100%"></div>
        </div>
        <div :style="`height:260px;margin-top: 24px;`" class="body-left-item">
          <div :style="`background-image: url(${titleImgBg})`" class="title">
            <span class="title-span">告警分析</span>
          </div>
          <div id="bar" style="height: 100%"></div>
        </div>
        <div :style="`height:220px;margin-top: 24px;`" class="body-left-item">
          <div :style="`background-image: url(${titleImgBg})`" class="title">
            <span class="title-span">近24h告警</span>
          </div>
          <div class="top4">
            <t-row :gutter="2" align="center" class="top4-row">
              <t-col span="6">
                <div :style="`background-image: url(${polygon})`" class="polygon">1</div>
                &nbsp;&nbsp;{{ topData[0].name }}</t-col>
              <t-col span="2" offset="4">{{ topData[0].value }}个</t-col>
            </t-row>
            <t-row :gutter="2" align="center" class="top4-row">
              <t-col span="6">
                <div :style="`background-image: url(${polygon})`" class="polygon">2</div>
                &nbsp;&nbsp;{{ topData[1].name }}</t-col>
              <t-col span="2" offset="4">{{ topData[1].value }}个</t-col>
            </t-row>
            <t-row :gutter="2" align="center" class="top4-row">
              <t-col span="6">
                <div :style="`background-image: url(${polygon})`" class="polygon">3</div>
                &nbsp;&nbsp;{{ topData[2].name }}</t-col>
              <t-col span="2" offset="4">{{ topData[2].value }}个</t-col>
            </t-row>
            <t-row :gutter="2" align="center" class="top4-row">
              <t-col span="6">
                <div :style="`background-image: url(${polygon})`" class="polygon">4</div>
                &nbsp;&nbsp;{{ topData[3].name }}</t-col>
              <t-col span="2" offset="4">{{ topData[3].value }}个</t-col>
            </t-row>
          </div>
        </div>
      </div>
      <div class="body-center">
        <div :style="`background-image: url(${titleImgBg})`" class="title" style="width: 370px;">
          <span class="title-span">重点区域监控</span>
        </div>
        <img src="@/assets/images/indexT1.png" style="width: 730px;height: 730px;padding-left: 20px;padding-top: 10px;">
      </div>
      <div class="body-right">
        <div :style="`background-image: url(${titleImgBg})`" class="title" style="width: 330px;">
          <span class="title-span">人员进出识别</span>
        </div>
        <img src="@/assets/images/indexT2.png" style="width: 325px;height: 730px;padding-left: 15px;padding-top: 10px;">
      </div>
    </div>
  </div>
</template>
<script>
import imgBg from '@/assets/images/indexTop.png'
import titleImgBg from '@/assets/images/indexTitle.png'
import polygon from '@/assets/images/polygon.png'
import echarts from 'echarts'
import dasapi from '@/api/dashboard'
export default {
  filters: {
    dateFormat(value) {
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      month >= 10 ? month : '0' + month
      var day = value.getDate() >= 10 ? value.getDate() : '0' + value.getDate()
      var hours =
          value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
      var minutes =
          value.getMinutes() >= 10
            ? value.getMinutes()
            : '0' + value.getMinutes()
      var seconds =
          value.getSeconds() >= 10
            ? value.getSeconds()
            : '0' + value.getSeconds()
      return (
        year +
          '年' +
          month +
          '月' +
          day +
          '日 ' +
          hours +
          ':' +
          minutes +
          ':' +
          seconds
      )
    }
  },
  components: {},
  data() {
    return {
      nowDate: new Date(),
      imgBg: imgBg,
      titleImgBg: titleImgBg,
      polygon: polygon,
      attendanceData: [],
      population: 0,
      alarmDataX: [],
      alarmDataY: [],
      topData: [
        {name: '未戴安全帽', value: 0},
        {name: '人员聚集', value: 0},
        {name: '吸烟', value: 0},
        {name: '摔倒', value: 0}]
    }
  },
  computed: {
  },
  mounted () {
    setInterval(() => { // 当前时间
      this.nowDate = new Date()
    }, 1000)
    this.initAttendance()
    this.initAlarm()
    this.init24Top()
  },
  methods: {
    initAttendance() {
      debugger
      this.attendanceData = dasapi.queryAttendanceChart().then(res => {
        debugger
        this.population = res.data.totalSize
        res.data.dataList.forEach(e => {
          if (e.name === '在岗') {
            e.itemStyle = { color: '#00A7F4' }
          }
          if (e.name === '请假') {
            e.itemStyle = { color: '#FFCE00' }
          }
          if (e.name === '缺勤') {
            e.itemStyle = { color: '#FF3F00' }
          }
        })
        this.attendanceData = res.data.dataList
        this.initAttendanceData()
      })
    },
    initAlarm() {
      debugger
      this.population = dasapi.queryAlarmAnalysisChart().then(res => {
        debugger
        res.data.forEach(e => {
          this.alarmDataX.push(e.name)
          this.alarmDataY.push(e.value)
        })
        this.initAlarmData()
      })
    },
    init24Top() {
      debugger
      this.topData = dasapi.queryAlarmAnalysisTopList().then(res => {
        debugger
        this.topData = res.data
      })
    },
    initAttendanceData() {
      var dom = document.getElementById('doughnut')
      var myChart = echarts.init(dom)
      var option = null
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人 ({d}%)'
        },
        legend: {
          bottom: '20%',
          left: 'center',
          data: this.attendanceData,
          formatter: this.legendFormatter,
          textStyle: {
            color: '#fff'
          }
        },
        graphic: [ // 为环形图中间添加文字
          {
            type: 'text',
            left: 'center',
            top: '38%',
            style: {
              text: this.population + '人',
              textAlign: 'center',
              fill: '#ffffff',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            type: 'pie',
            radius: ['25%', '40%'],
            center: ['50%', '40%'],
            name: '出勤统计',
            label: {
              normal: {
                formatter: '{d}%  '
              }
            },
            data: this.attendanceData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      if (option && typeof option === 'object') {
        myChart.setOption(option, true)
      }
    },
    legendFormatter(data) {
      var legend
      this.attendanceData.forEach(e => {
        if (data === e.name) {
          legend = e.value
        }
      })
      return data + ': ' + legend + '人'
    },
    initAlarmData() {
      var dom = document.getElementById('bar')
      var myChart = echarts.init(dom)
      var option = null
      var gridWidth = 320 // 可以根据canvas的宽度和grid的right,left,width进行计算
      var fontsize = 12 // 字体大小
      var wordNum = parseInt((gridWidth / this.alarmDataX.length) / fontsize);
      var flag = 0
      this.alarmDataX.forEach(value => {
        var strs = value.split('')
        var str = ''
        for (var i = 0, s; s = strs[i++];) {
          str += s
          if (!(i % wordNum)) {
            flag = -20
          }
        }
      })
      option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '4%',
          right: '7%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.alarmDataX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: flag,
              textStyle: {
                fontSize: 12,
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 13,
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '40%',
            data: this.alarmDataY,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#00FEFF'},
                    {offset: 1, color: '#0C7EFC'}
                  ]
                ),
                label: {
                  show: true, // 是否展示
                  position: 'top', // 在上方显示
                  formatter: function(name) {
                    return name.value + '人'
                  },
                  textStyle: {
                    fontSize: 14,
                    color: '#fff'
                  }
                }
              }
            }
          }
        ]
      }
      if (option && typeof option === 'object') {
        myChart.setOption(option, true)
      }
    }
  }
}
</script>
<style lang="scss">
.index{
  width: 1500px;
  height: 880px;
  background-color: #011d40;
  .time{
    width: 500px;
    height: 28px;
    padding-left: 48px;
    margin-top: -14px;
  }
  .goto{
    display:block;
    float:right;
    margin-top: -30px;
    width: 122px;
    height: 40px;
    border-radius: 5px;
    background-color: #011d40; /* 浏览器不支持的时候显示 */
    box-shadow: 0 0 30px -10px #009bf3 inset;
    margin-right: 10px;
    align-items: center;
    text-align: center;
    padding-top: 6px;
    color:#00d8f3;
    font-size: 18px;
  }
  .top{
    -moz-background-size:100% 100%;
    background-size:100% 100%;
    display: flex;
    align-items: center;
    text-align: center;
    height: 45.1px;
    width: 1500px;
    overflow: hidden;
    position: relative;
    .top-logo{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      height: 24px;
      width: 400px;
      vertical-align: middle
    }
  }
  .body{
    display: flex;
    width: 1500px;
    padding-top: 5px;
    justify-content: space-around;
    .body-left{
      width: 340px;
      height: 788px;
      .body-left-item{
        width: 340px;
        border-radius: 5px;
        background-color: #011d40; /* 浏览器不支持的时候显示 */
        box-shadow: 0 0 30px -10px #009bf3 inset;
        .top4{
          padding-left: 15px;
          padding-right: 15px;
          color: #00d8f3;
          font-size: 15px;
          font-family: "Microsoft YaHei";
          height: 100%;
          .top4-row{
            border: 0 none;
            border-bottom: 2px dotted #00466b;
            height: 20%;
            .col-6{
              display: flex;
              .polygon{
                -moz-background-size:100% 100%;
                background-size:100% 100%;
                align-items: center;
                text-align: center;
                height: 100%;
                width: 16%;
              }
            }
          }
        }
      }
    }
    .body-center{
      width: 750px;
      height: 788px;
      border-radius: 5px;
      background-color: #011d40; /* 浏览器不支持的时候显示 */
      box-shadow: 0 0 30px -10px #009bf3 inset;
    }
    .body-right{
      width: 340px;
      height: 788px;
      border-radius: 5px;
      background-color: #011d40; /* 浏览器不支持的时候显示 */
      box-shadow: 0 0 30px -10px #009bf3 inset;
    }
  }
  .title{
    -moz-background-size:100% 100%;
    background-size:100% 100%;
    align-items: center;
    text-align: center;
    height: 28px;
    width: 340px;
    margin: 0 auto;
    .title-span{
      height: 28px;
      align-items: center;
      text-align: center;
      font-size: 14px;
      color: #00d8f3;
      margin: auto;
    }
  }
  .titleWide{
    -moz-background-size:100% 100%;
    background-size:100% 100%;
    align-items: center;
    text-align: center;
    height: 28px;
    width: 350px;
    margin: 0 auto;
    .title-span{
      height: 28px;
      align-items: center;
      text-align: center;
      font-size: 14px;
      color: #00d8f3;
      margin: auto;
    }
  }
}
</style>

security-protection-platform/src/modules/system/monitor/HomePageSettings/AreaMonitor.vue

@@ -162,7 +162,11 @@ export default {
        sysapi
          .modifyTerminalRel(target)
          .then((resp) => {
            this.$Message.success('修改成功')
            if (resp.data.success === false) {
              this.$Message.danger(resp.data.fail.message)
            } else {
              this.$Message.success('修改成功')
            }
          }).catch((error) => {
            console.log(error)
            this.$Message.danger('修改失败')
@@ -172,7 +176,11 @@ export default {
      } else {
        sysapi.createTerminalRel(data)
          .then((resp) => {
            this.$Message.success('增添成功')
            if (resp.data.success === false) {
              this.$Message.danger(resp.data.fail.message)
            } else {
              this.$Message.success('增添成功')
            }
          })
          .catch((error) => {
            console.log(error)
@@ -183,8 +191,21 @@ export default {
      }
    },
    datadragEnd(evt) {
      console.log('拖动前的索引 :' + this.areaMonitorList[evt.oldIndex].title)
      console.log('拖动后的索引 :' + this.areaMonitorList[evt.newIndex].title)
      if (evt.oldIndex !== evt.newIndex) {
        let params = {
          monitorSceneTerminalRelId: this.areaMonitorList[evt.oldIndex].monitorSceneTerminalRelId, // 场景与终端关联ID
          monitorSceneId: this.monitorScene.monitorSceneId, // 场景ID
          resourceToolId: this.areaMonitorList[evt.oldIndex].resourceToolId, // 终端ID
          resourceToolIndex: this.areaMonitorList[evt.newIndex].resourceToolIndex // 移动位置序号
        }
        sysapi.moveTerminalRelIndex(params).then((resp) => {})
          .catch((error) => {
            console.log(error)
            this.$Message.danger('修改位置失败')
          }).finally(() => {
            this.geTerminalRel()
          })
      }
    }
  }
}

security-protection-platform/src/modules/system/monitor/HomePageSettings/Card.vue

@@ -5,7 +5,7 @@
        <img :style="{ height: gridHeight, width: gridWidth }" :src="data.pictureUrl" alt="" />
      </div>
      <div class="opt">
        <t-button shape="round" icon="arrow-expand-all-outline" style="margin: 0px 0px 0px 0px">移动</t-button>
        <div class="move">拖拽移动</div>
        <t-button shape="round" icon="swap-outline" style="margin: 0px 2px 0px 2px" @click="handleEdit">替换</t-button>
        <t-button shape="round" icon="delete" @click="handleDelete">删除</t-button>
        <div v-show="showConfirm" class="popover">
@@ -76,6 +76,9 @@ export default {
        this.$emit('nameChange', this.data)
      }
    },
    handleDelete() {
      this.showConfirm = true
    },
    handleConfirmDelete() {
      // 把事件抛出去，保持控件的干净
      this.$emit('deleted', this.data)
@@ -83,9 +86,6 @@ export default {
    handleEdit() {
      this.$emit('edit', this.data)
    },
    handleDelete() {
      this.showConfirm = true
    },
    handleCancelDelete() {
      this.showConfirm = false
    }
@@ -108,7 +108,12 @@ export default {
      display: flex;
      justify-content: center;
      align-items: center;
    .move{
      color: rgb(255, 255, 255);
      position: absolute;
      top: 12px;
      text-align: center;
    }
      &::before {
        content: "";
        display: block;
@@ -117,7 +122,7 @@ export default {
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-color: #00000038;
        border-radius: 4px;
        opacity: 0.8;
      }

security-protection-platform/src/modules/system/monitor/HomePageSettings/UpdateName.vue

@@ -1,5 +1,5 @@
<template>
  <div class="div-base">
  <div class="update-name">
    <div v-if="text_tatus == 0" @mouseover="mouseOver">
      {{ name }}
    </div>
@@ -65,11 +65,12 @@ export default {
</script>
<style lang="scss">
.div-base {
  margin: 5px 10px 0px 10px;
.update-name {
  font-size: 14px;
  padding: 0 5px;
  .iconChange {
    margin: -5px 0px 0px 0px;
    height: 24px;
    height: 20px;
    float: right;
  }
}

security-protection-platform/src/modules/system/monitor/VideoMonitor/ShiftSceneDialog.vue

@@ -4,6 +4,7 @@
    :title="title"
    :mask-closable="false"
    :ok="handleSubmit"
    :cancel="handlecancel"
    width="500px"
    height="300px"
  >
@@ -12,7 +13,7 @@
        <t-col style="text-align: center" span="3">场景名称：</t-col>
        <t-col span="9">
          <t-input
            v-model="data.sceneName"
            v-model="form.monitorSceneName"
            placeholder="请输入..."
            style="width: 250px"
          >
@@ -24,17 +25,18 @@
        >布&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;局：</t-col
        >
        <t-col span="9">
          <t-radio-group v-model="data.displayType" type="button">
            <t-radio value="1" label="1X1"></t-radio>
            <t-radio value="2" label="2X2"></t-radio>
            <t-radio value="3" label="3X3"></t-radio>
          <t-radio value="4" label="4X4"></t-radio> </t-radio-group
        ></t-col>
          <t-radio-group v-model="form.monitorViewLayout" type="button">
            <t-radio v-for="layout in SceneLayoutList" :key="layout.layoutCode"
                     :value="layout.layoutCode" :label="layout.layoutName"></t-radio>
          </t-radio-group>
        </t-col>
      </t-row>
      <t-row>
        <t-col span="3"></t-col>
        <t-col span="9"
        ><t-button
          v-if="form.monitorSceneId != null "
          ghost
          color="info"
          icon="delete-outline"
@@ -87,6 +89,7 @@ export default {
    return {
      visibled: false,
      form: {},
      SceneLayoutList: [],
      searchValue: null,
      loadingSubmit: false,
      showConfirm: false,
@@ -95,7 +98,7 @@ export default {
  },
  computed: {
    title() {
      return this.data.id == null ? '新增场景' : '编辑场景'
      return this.data.monitorSceneId == null ? '新增场景' : '编辑场景'
    }
  },
  watch: {
@@ -105,72 +108,34 @@ export default {
      this.visibled = true
    }
  },
  mounted() {
    this.getLayoutList()
  },
  methods: {
    getCameras() {
      sysapi.getCameras().then((resp) => {
        this.cameraList = resp.data || []
    getLayoutList() {
      sysapi.getqueryMonitorSceneLayoutList().then((resp) => {
        this.SceneLayoutList = resp.data.data || []
      })
    },
    groupClick(item) {
      // 选中更换摄像头
      if (this.form.title == null) {
        this.form.title = item.title
      }
      this.form.cameraId = item.cameraId
      this.form.imgsrc = item.imgsrc
    },
    handleDelete() {
      this.showConfirm = true
    },
    // 保存
    handleSubmit() {
      this.loadingSubmit = true
      sysapi
        .submitSchedule(this.form)
        .then(
          (resp) => {
            if (resp.data.areaMonitorId == null) {
              this.form.areaMonitorId = resp.data.areaMonitorId
            }
            this.$emit('submit', this.form)
            this.visibled = false
            this.$Message.success('提交成功')
          },
          (err) => {
            console.log(err)
            this.$Message.danger('提交失败')
          }
        )
        .finally(() => {
          this.loadingSubmit = false
        })
    },
    onChange(page) {
      this.page = page
      this.getAreaMonitors()
      this.$emit('submit', this.form)
    },
    handleCancelDelete() {
      this.showConfirm = false
    },
    // 删除场景
    handleConfirmDelete() {
      // this.loadingDelete = true;
      this.$emit('deleted', this.data)
      //   sysapi
      //     .deleteSchedule(this.data.scheduleId)
      //     .then(
      //       (resp) => {
      //         console.log(resp);
      //         this.$emit("deleted", this.data);
      //       },
      //       (err) => {
      //         console.log(err);
      //         this.$Message.danger("删除失败，请稍后再试！", 3);
      //       }
      //     )
      //     .finally(() => {
      //       this.loadingDelete = false;
      //       this.showConfirm = false;
      //     });
      this.showConfirm = false
      this.visibled = false
      this.$emit('deleted', this.form)
    },
    handlecancel() {
    // 有问题
    // this.$forceUpdate()
    }
  }
}

security-protection-platform/src/modules/system/monitor/VideoMonitor/index.vue

@@ -5,76 +5,98 @@
        <t-col>
          <div style="float: left">
            <span>风场： </span>
            <t-select v-model="currentWindPlaceValue" style="width: 200px; height: 32px">
              <t-option value="1">风场1</t-option>
              <t-option value="2">风场2</t-option>
            <t-select
              v-model="currentWindPlaceValue"
              style="width: 200px; height: 32px"
              @change="WindPlaceChenged"
            >
              <t-option
                v-for="item in departmentList"
                :key="item.code"
                :value="item.code"
              >{{ item.name }}</t-option
              >
            </t-select>
          </div>
        </t-col>
        <t-col>
          <div style="float: right">
            <t-button-group>
              <t-button :class="['base', btnIsClicked ? 'active' : '']" @click="btnOnClick('areaMonitor')">
                <span>大门</span>
                <div v-if="dialogSceneData.id == '1'" style="float: right; width: 14px; height: 14px" @click="handleSceneEdit('123')">
                  <t-icon icon="edit" shape="circle" class="ico"></t-icon>
                </div>
              </t-button>
              <t-button :class="['base', btnIsClicked ? 'active' : '']" @click="btnOnClick('areaMonitor')">
                <span>值班室</span>
                <div v-if="dialogSceneData.id == '456'" style="float: right; width: 14px; height: 14px" @click="handleSceneEdit('456')">
                  <t-icon icon="edit" shape="circle" class="ico"></t-icon>
        <t-col span="8">
          <div>
            <t-button-group style="float: right">
              <t-button
                v-for="item in monitorSceneList"
                :key="item.monitorSceneId"
                :class="[
                  'base',
                  item.monitorSceneId == currenScene.monitorSceneId
                    ? 'active'
                    : '',
                ]"
                style="
                  display: inline-block;
                  -moz-appearance: button;
                  -webkit-appearance: button;
                  appearance: button;
                "
                @click="handleSceneOnClick(item)"
              >
                <div>
                  {{ item.monitorSceneName }}
                  <div class="div_edit" @click.stop="handleSceneEdit(item)">
                    <t-icon
                      v-if="item.monitorSceneId == currenScene.monitorSceneId"
                      icon="edit"
                      shape="circle"
                      class="ico"
                    ></t-icon>
                  </div>
                </div>
              </t-button>
              <t-button
                style="48px"
                icon="plus-outline"
                @click="btnAddClick()"
              ></t-button>
            </t-button-group>
            <t-button style="width: 48px" @click="btnAddClick()">＋</t-button>
          </div>
        </t-col>
      </t-row>
      <t-row>
        <t-col style="margin-top:10px;">
          <t-button color="info" icon="plus-circle" @click="handleCreate">新增监控</t-button>
        <t-col style="margin-top: 10px">
          <t-button color="info" icon="plus-circle" @click="handleCreate"
          >新增监控</t-button
          >
        </t-col>
      </t-row>
      <!--header-->
    </div>
    <div style="min-height: 280px; height: auto !important">
      <draggable-grid v-model="areaMonitorList" :show-page="true" key-word="areaMonitorId" @update="datadragEnd">
        <!-- <template v-slot:prepend="{scope}">
          <create-card key="create-card" :style="{ width: scope.width + 'px', height: scope.height + 'px' }"/>
        </template> -->
        <template v-slot="{scope}">
      <draggable-grid
        v-model="areaMonitorList"
        :show-page="true"
        :grid="currenScene.monitorViewLayout!=null?currenScene.monitorViewLayout.split('X'):[4,1]"
        key-word="monitorSceneTerminalRelId"
        @update="datadragEnd"
      >
        <template v-slot="{ scope }">
          <view-card
            :data="scope.data"
            :width="scope.width + 'px'"
            :height="scope.height + 'px'"
            :monitor-scene-type-name="currenScene.monitorSceneTypeName"
            @nameChange="handleCameraSubmit"
            @edit="handleEdit"
            @deleted="handleDeleted"
          />
        </template>
      </draggable-grid>
      <!-- <draggable v-model="areaMonitorList" @update="datadragEnd"> -->
      <!-- <transition-group>
          <div v-for="(viewArray,index) in viewDataList" :key="index">
            <div style="text-align: right;">
              <span style="width:300px">第{{ index+1 }}/{{ viewDataList.length }}页</span>
            </div>
            <draggable v-model="viewDataList[index]" v-bind="dragOptions" @update="datadragEnd">
              <camera-card
                v-for="item in viewArray"
                :key="item.areaMonitorId"
                :data="item"
                :item-width="itemWidth"
                @edit="handleEdit"
                @deleted="handleDeleted"
              />
            </draggable>
          </div>
        </transition-group> -->
      <!-- </draggable> -->
      <shift-scene-dialog :data="dialogSceneData" @submit="handleCameraSubmit" />
      <shift-camera-dialog :data="dialogData" @submit="handleCameraSubmit" />
      <shift-scene-dialog
        :data="dialogSceneData"
        @submit="handlesceneSubmit"
        @deleted="handlesceneDelete"
      />
      <shift-camera-dialog :data="dialogData" :monitor-scene-type-name="currenScene.monitorSceneTypeName"
                           :monitor-scene-type-id="currenScene.monitorSceneType"
                           @submit="handleCameraSubmit"/>
    </div>
  </div>
</template>
@@ -87,6 +109,7 @@ import ShiftCameraDialog from '../HomePageSettings/ShiftCameraDialog'
import DraggableGrid from '../components/DraggableGrid'
import ViewCard from '../components/ViewCard'
import CreateCard from '../components/CreateCard'
import sysapi from '@/api/system'
export default {
  components: {
@@ -106,76 +129,40 @@ export default {
  },
  data() {
    return {
      // 选中的组织机构ID
      currentWindPlaceValue: '2',
      currentitem: {},
      currenScene: {},
      btnIsClicked: true,
      //
      dialogSceneData: {},
      dialogData: {},
      currentType: 3,
      currentType: 4,
      itemWidth: null,
      sceneList: [{
        sceneName: '大门',
        id: '1',
        parentId: '1',
        displayType: '4'
      },
      {
        sceneName: '值班室',
        id: '2',
        parentId: '1',
        displayType: '3'
      }
      departmentList: [],
      monitorSceneList: [
        {
          sceneName: '大门',
          id: '1',
          parentId: '1',
          displayType: '4'
        },
        {
          sceneName: '值班室',
          id: '2',
          parentId: '1',
          displayType: '3'
        }
      ],
      areaMonitorList: [{
        title: '摄像头001',
        cameraId: '001',
        areaMonitorId: '001',
        sceneId: '1',
        sortOrder: 0,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头002',
        cameraId: '002',
        areaMonitorId: '002',
        sortOrder: 1,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头003',
        cameraId: '003',
        areaMonitorId: '003',
        sortOrder: 2,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头004',
        cameraId: '004',
        areaMonitorId: '004',
        sortOrder: 3,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头005',
        cameraId: '005',
        areaMonitorId: '005',
        sortOrder: 4,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头006',
        cameraId: '006',
        areaMonitorId: '006',
        sortOrder: 5,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头007',
        cameraId: '007',
        areaMonitorId: '007',
        sortOrder: 6,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      }
      areaMonitorList: [
        {
          title: '摄像头001',
          cameraId: '001',
          areaMonitorId: '001',
          sceneId: '1',
          sortOrder: 0,
          imgsrc:
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        }
      ]
    }
  },
@@ -189,8 +176,11 @@ export default {
    viewDataList: function () {
      let tempDataList = []
      for (
        let i = 0; i < Math.ceil(this.areaMonitorList.length / this.currentType); i++
      ) { // this.currentType需要*this.currentType，测试减少一个组的数据
        let i = 0;
        i < Math.ceil(this.areaMonitorList.length / this.currentType);
        i++
      ) {
        // this.currentType需要*this.currentType，测试减少一个组的数据
        tempDataList[i] = this.areaMonitorList.slice(
          i * this.currentType,
          (i + 1) * this.currentType
@@ -202,52 +192,205 @@ export default {
  mounted() {
    let dom = this.$refs.box
    this.itemWidth = dom.clientWidth / this.currentType - 25
    this.getDepartments()
  },
  methods: {
    handleSceneEdit(item) {
      alert(item)
      event.stopPropagation()
    //  获取组织
    getDepartments() {
      sysapi.getDepartments().then((resp) => {
        this.departmentList = resp.data.data || []
        if (this.departmentList.length > 0) {
          this.currentWindPlaceValue = this.departmentList[0].code
          this.getMonitorScene(this.currentWindPlaceValue)
        }
      })
    },
    // 获取监控场景
    getMonitorScene(orgId) {
      sysapi.getMonitorScene(orgId).then((resp) => {
        this.monitorSceneList = resp.data.data || []
        if (this.monitorSceneList.length > 0) {
          this.currenScene = this.monitorSceneList[0]
          this.geTerminalRel(this.currenScene)
        }
      })
    },
    // 场景ID查询该场景下所有监控终端列表
    geTerminalRel(monitorScene) {
      sysapi.getTerminalRel(monitorScene.monitorSceneId).then((resp) => {
        this.areaMonitorList = resp.data.data || []
      })
    },
    WindPlaceChenged(cloneValue) {
      this.getMonitorScene(cloneValue)
    },
    handleSceneOnClick(item) {
      if (this.currenScene !== item) {
        this.currenScene = item
        this.geTerminalRel(this.currenScene)
      }
    },
    btnOnClick(item) {
      this.dialogSceneData = item
    // 场景
    handleSceneEdit(item) {
      this.dialogSceneData = this.currenScene
      // event.stopPropagation()
    },
    btnAddClick() {
      this.dialogSceneData = {
        sceneName: null,
        id: null,
        parentId: this.currentWindPlaceValue,
        displayType: null
        monitorSceneId: null, // 场景ID(新增时为空，修改时必填)
        monitorSceneName: null, // 场景名称(必填)
        organizationId: this.currentWindPlaceValue, // 组织标识(必填)
        monitorViewLayout: '1X1', // 布局CODE(必填)
        monitorSceneCode: '' // 场景CODE(暂时为空)
      }
    },
    handlesceneDelete(item) {
      sysapi.deleteMonitorScene(item)
        .then((resp) => {
          this.$Message.danger('删除成功')
        }).catch((error) => {
          console.log(error)
          this.$Message.danger('删除失败')
        }).finally(() => {
          this.getMonitorScene(this.currentWindPlaceValue)
        })
    },
    handlesceneSubmit(data) {
      if (data.monitorSceneId != null) {
        const target = this.monitorSceneList.find(
          (item) =>
            item.monitorSceneId ===
          data.monitorSceneId
        )
        Object.assign(target, data)
        sysapi
          .modifyMonitorScene(target)
          .then((resp) => {
            if (resp.data.success === false) {
              this.$Message.danger(resp.data.fail.message)
            } else {
              this.$Message.success('修改成功')
            }
          }).catch((error) => {
            console.log(error)
            this.$Message.danger('修改失败')
          }).finally(() => {
            this.getMonitorScene(this.currentWindPlaceValue)
          })
      } else {
        sysapi.createMonitorScene(data)
          .then((resp) => {
            if (resp.data.success === false) {
              this.$Message.danger(resp.data.fail.message)
            } else {
              this.$Message.success('增添成功')
            }
          })
          .catch((error) => {
            console.log(error)
            this.$Message.danger('增添失败')
          }).finally(() => {
            this.getMonitorScene(this.currentWindPlaceValue)
          })
      }
    },
    // 监控
    handleEdit(item) {
      this.dialogData = Object.assign({}, item)
      console.log(item.title)
    },
    handleCreate() {
      this.dialogData = {
        title: null,
        cameraId: null,
        areaMonitorId: null,
        sortOrder: 5,
        imgsrc: null
        customProperties: {},
        validDate: null,
        expireDate: null,
        dataStatus: '1',
        createDate: '2020-12-01 23:48:51',
        createOpId: null,
        createOrgId: null,
        doneCode: null,
        doneDate: '2020-12-01 23:48:51',
        opId: null,
        orgId: null,
        mgmtDistrict: null,
        mgmtCounty: null,
        regionId: null,
        tenantCode: null,
        monitorSceneTerminalRelId: null, // 场景与监控终端关联ID
        monitorSceneId: this.currenScene.monitorSceneId, // 场景ID
        resourceToolId: null, // 监控终端ID
        resourceToolName: null, // 监控终端名称
        pictureUrl: null, // 监控终端图片URL
        videoUrl: null, // 监控终端视频URL
        place: null, // 监控终端位置
        resourceToolIndex: null, // 监控终端在场景中的序号
        effectType: 'OUT'
      }
    },
    handleDeleted(index) {
      this.areaMonitorList.splice(index, 1)
    handleDeleted(data) {
      sysapi.deleteTerminalRel(data)
        .then((resp) => {
        }).catch((error) => {
          console.log(error)
          this.$Message.danger('删除失败')
        }).finally(() => {
          this.geTerminalRel(this.currenScene)
        })
    },
    datadragEnd(evt) {
      console.log(evt)
      console.log('拖动前的索引 :' + this.areaMonitorList[evt.oldIndex].title)
      console.log('拖动后的索引 :' + this.areaMonitorList[evt.newIndex].title)
      if (evt.oldIndex !== evt.newIndex) {
        let params = {
          monitorSceneTerminalRelId: this.areaMonitorList[evt.oldIndex].monitorSceneTerminalRelId, // 场景与终端关联ID
          monitorSceneId: this.currenScene.monitorSceneId, // 场景ID
          resourceToolId: this.areaMonitorList[evt.oldIndex].resourceToolId, // 终端ID
          resourceToolIndex: this.areaMonitorList[evt.newIndex].resourceToolIndex // 移动位置序号
        }
        sysapi.moveTerminalRelIndex(params).then((resp) => {})
          .catch((error) => {
            console.log(error)
            this.$Message.danger('修改位置失败')
          }).finally(() => {
            this.geTerminalRel(this.currenScene)
          })
      }
    },
    handleCameraSubmit(data) {
      if (this.dialogData.areaMonitorId != null) {
      if (data.monitorSceneTerminalRelId != null) {
        const target = this.areaMonitorList.find(
          (item) => item.areaMonitorId === this.dialogData.areaMonitorId
          (item) =>
            item.monitorSceneTerminalRelId ===
          data.monitorSceneTerminalRelId
        )
        Object.assign(target, data)
        sysapi
          .modifyTerminalRel(target)
          .then((resp) => {
            if (resp.data.success === false) {
              this.$Message.danger(resp.data.fail.message)
            } else {
              this.$Message.success('修改成功')
            }
          }).catch((error) => {
            console.log(error)
            this.$Message.danger('修改失败')
          }).finally(() => {
            this.geTerminalRel(this.currenScene)
          })
      } else {
        this.areaMonitorList.unshift(data)
        sysapi.createTerminalRel(data)
          .then((resp) => {
            if (resp.data.success === false) {
              this.$Message.danger(resp.data.fail.message)
            } else {
              this.$Message.success('增添成功')
            }
          })
          .catch((error) => {
            console.log(error)
            this.$Message.danger('增添失败')
          }).finally(() => {
            this.geTerminalRel(this.currenScene)
          })
      }
    }
  }
@@ -255,15 +398,23 @@ export default {
</script>
<style lang="scss">
.div_edit {
  float: right;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0.4833px;
  right: 1.8px;
  z-index: 100;
  .ico {
    width: 14px;
    height: 14px;
    line-height: 14px !important;
    margin: 2px;
  }
  .table-pager {
    justify-content: flex-end;
    float: right;
  }
}
.table-pager {
  justify-content: flex-end;
  float: right;
}
</style>

security-protection-platform/src/modules/system/monitor/components/ViewCard/UpdateName.vue

@@ -11,7 +11,7 @@
    </div>
    <div v-else @mouseleave="mouseLeave">
      <t-input
        v-model="name"
        v-model="cname"
        size="sm"
        icon="check-outline"
        icon-placement="right"
@@ -30,11 +30,14 @@ export default {
  },
  data() {
    return {
      text_tatus: 0
      text_tatus: 0,
      cname: null
    }
  },
  watch: {},
  mounted() {},
  mounted() {
    this.cname = this.name
  },
  methods: {
    // 移入
    mouseOver() {
@@ -42,6 +45,9 @@ export default {
    },
    // 移出
    mouseLeave() {
      if (this.text_tatus === 2) {
        this.$emit('nameSubmit', this.cname)
      }
      this.text_tatus = 0
    },
    // 修改
@@ -51,7 +57,7 @@ export default {
    // 提交
    iconSubmit() {
      this.text_tatus = 1
      this.$emit('nameSubmit', this.name)
      this.$emit('nameSubmit', this.cname)
    }
  }
}

security-protection-platform/src/modules/system/monitor/components/ViewCard/index.vue

@@ -1,14 +1,14 @@
<template>
  <div :class="{ active: showConfirm, lock: loadingDelete }" :style="{ width, height }" class="masonry__item div-block">
    <div class="card card-has-shadowed card-main">
      <div :style="`backgroundImage:url(${data.imgsrc})`" class="card-bg" />
      <div :style="`backgroundImage:url(${data.pictureUrl})`" class="card-bg" />
      <div class="opt">
        <t-button shape="round" icon="arrow-expand-all-outline" style="margin: 0px 0px 0px 0px">移动</t-button>
        <div class="move">拖拽移动</div>
        <t-button shape="round" icon="swap-outline" style="margin: 0px 2px 0px 2px" @click="handleEdit">替换</t-button>
        <t-button shape="round" icon="delete" @click="handleDelete">删除</t-button>
        <div v-show="showConfirm" class="popover">
          <t-icon color="warning" icon="alert-circle" style="vertical-align: middle" />
          你确定删除该监控吗？
          你确定删除该{{ monitorSceneTypeName }}吗？
          <div class="btn-block">
            <t-button :loading="loadingDelete" size="sm" color="primary" @click="handleConfirmDelete">确定</t-button>
            <t-button size="sm" color="secondary" style="margin-right: 8px" @click="handleCancelDelete">取消</t-button>
@@ -17,7 +17,7 @@
      </div>
    </div>
    <div class="card card-has-shadowed card-title">
      <update-name :name="data.title" @nameSubmit="nameChange" />
      <update-name :name="name" @nameSubmit="handleChangeName" />
    </div>
  </div>
</template>
@@ -48,13 +48,21 @@ export default {
      loadingDelete: false
    }
  },
  computed: {
    name: function () {
      return this.data.resourceToolName
    }
  },
  mounted() {
  },
  methods: {
    nameChange: function (name) {
    handleChangeName: function (name) {
      // 修改名称
      alert(name)
      if (this.data.resourceToolName !== name) {
        this.data.resourceToolName = name
        this.$emit('nameChange', this.data)
      }
    },
    handleDelete() {
      this.showConfirm = true
@@ -64,25 +72,8 @@ export default {
      this.showConfirm = false
    },
    handleConfirmDelete() {
      // this.loadingDelete = true;
      // 把事件抛出去，保持控件的干净
      this.$emit('deleted', this.data)
      //   sysapi
      //     .deleteSchedule(this.data.scheduleId)
      //     .then(
      //       (resp) => {
      //         console.log(resp);
      //         this.$emit("deleted", this.data);
      //       },
      //       (err) => {
      //         console.log(err);
      //         this.$Message.danger("删除失败，请稍后再试！", 3);
      //       }
      //     )
      //     .finally(() => {
      //       this.loadingDelete = false;
      //       this.showConfirm = false;
      //     });
    },
    handleEdit() {
      this.$emit('edit', this.data)
@@ -123,7 +114,12 @@ export default {
      display: flex;
      justify-content: center;
      align-items: center;
      .move{
        color: rgb(255, 255, 255);
        position: absolute;
        top: 12px;
        text-align: center;
      }
      &::before {
        content: "";
        display: block;
@@ -132,11 +128,10 @@ export default {
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-color: #00000038;
        border-radius: 4px;
        opacity: 0.8;
      }
      &::after {
        content: "";
        display: none;

security-protection-platform/src/modules/videoSurveillance/components/ReplayDialog/index.vue

@@ -0,0 +1,173 @@
<template>
  <t-modal :visibled.sync="visible" :header-visibled="false" :footer-visibled="false" :no-padding="true" width="100%">
    <div class="replayer">
      <div class="replayer-list">
        <t-tabs v-model="currentTab" mode="scrollY" orientation="vertical" width="150px" @change="handleTabChange">
          <t-tab-panel v-for="item in list" :key="item.fileId" :label="item.fileName" :panel-id="item.fileId" />
        </t-tabs>
      </div>
      <div class="replayer-video">
        <t-loading v-model="loadVideo">
          <span class="text-md text-info">获取视频资源...</span>
        </t-loading>
        <video-player
          :sources="videoList"
          :autoadvance="0"
          :style="{opacity: loadVideo ? 0: 1}"
          @player-inited="handlePlayerInited"
          @playlistitem="handlePlayerCurrentChange"
        />
      </div>
    </div>
  </t-modal>
</template>
<script>
import VideoPlayer from '@/components/VideoPlayer'
export default {
  components: { VideoPlayer },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    visibled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentTab: null,
      loadVideo: false,
      videoList: [],
      $player: null
    }
  },
  computed: {
    visible: {
      get() { return this.visibled },
      set(val) {
        if (!val) this.$player.pause()
        this.$emit('update:visibled', val)
      }
    }
  },
  watch: {
    list: {
      handler(val) {
        console.warn(`list Change`)
        this.resetVideoList()
        if (val.length > 0) {
          this.currentTab = val[0].fileId
          // 手动触发第一个tab点击事件
          this.handleTabChange(null, 0)
        }
      },
      immediate: true
    }
  },
  methods: {
    handlePlayerInited(player) {
      this.$player = player
      window.player = this
    },
    async handleTabChange(name, index) {
      this.$player.pause()
      await this.preloadOriVideoUrl(index)
      this.play(index)
    },
    handlePlayerCurrentChange(e, item) {
      const { index, fileId } = item
      this.currentTab = fileId
      this.preloadOriVideoUrl(index)
    },
    resetVideoList() {
      const videoList = this.list.map((item, index) => {
        const { fileId, fileType } = item
        return {
          index,
          fileId,
          fileType,
          loaded: false
        }
      })
      this.videoList = videoList
    },
    play(index) {
      console.log(`播放:index=${index}`)
      // 调用额外的currentItem方法以避免currentItem在首次不生效
      // https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md
      this.$player.playlist.currentItem()
      this.$player.playlist.currentItem(index)
      this.$player.play()
    },
    /**
     *  从index开始预载videoList的视频地址
     *  此方法将在获取index对应的地址后就立即返回
     */
    preloadOriVideoUrl(index = 0, maxLength = 5) {
      return new Promise((resolve, reject) => {
        for (let i = index; i in this.videoList && i - index < maxLength; i++) {
          console.log(`预载地址:index=${i}`)
          const item = this.videoList[i]
          const task = item.loaded
            ? Promise.resolve()
            : this.getOriVideoUrl(item.fileId).then(resp => {
              console.log(`预载完成,更新播放源:index=${i}`)
              item.loaded = true
              item.sources = [{
                src: resp.url,
                type: item.fileType
              }]
            })
          if (i === index) {
            this.loadVideo = !item.loaded
            task.then(() => {
              resolve()
            }).finally(() => {
              this.loadVideo = false
            })
          }
        }
      })
    },
    /*
     * 获取真实视频地址
     */
    getOriVideoUrl(fileId) {
      console.log(`请求地址:${fileId}`)
      // fake
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const x = Math.random()
          const url = x > 0.5
            ? 'http://10.19.90.34:19000/tool-image/tool-image_7d359725fac4464fb248284caf321993.mp4'
            : 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4'
          resolve({
            url
          })
        }, 1000)
      })
    }
  }
}
</script>
<style lang="scss">
.replayer {
  display: flex;
  &-list {
    margin-right: 20px;
    // width: 200px;
  }
  &-video {
    position: relative;
    flex: auto;
  }
}
</style>

security-protection-platform/src/modules/videoSurveillance/index.vue

@@ -12,28 +12,38 @@
    </div>
    <div class="page-bottom">
      <div v-for="(item,index) in videoList" :key="index">
        <t-card :class="index%3===0?'card-video-first':'card-video'">
        <t-card class="card-video">
          <img :src="item.url" class="card-image">
          <div slot="foot" class="bottom">
            <span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
            <div style="margin-left:auto">
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)"><t-icon size="16" icon="image-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn"><t-icon size="16" icon="piechart-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn"><t-icon size="16" icon="arrow-expand-all-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)">
                <t-icon size="16" icon="image-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)">
                <t-icon size="16" icon="piechart-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn">
                <t-icon size="16" icon="arrow-expand-all-outline"></t-icon>
              </t-button>
            </div>
          </div>
        </t-card>
      </div>
    </div>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" />
  </div>
</template>
<script>
import sysapi from '@/api/videoSurveillance'
import commonapi from '@/api/common'
import ReplayDialog from './components/ReplayDialog'
export default {
  components: { ReplayDialog },
  filters: {
    handleText(value) {
    handleText (value) {
      if (!value) return ''
      if (value.length > 13) {
        return value.slice(0, 13) + '...'
@@ -41,7 +51,7 @@ export default {
      return value
    }
  },
  data() {
  data () {
    return {
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
@@ -56,22 +66,66 @@ export default {
      gateFieldData: 101101,
      videoList: [],
      totalList: [],
      roomList: []
      roomList: [],
      showReplayDialog: false,
      replayList: []
    }
  },
  mounted() {
  mounted () {
    this.getWindFiledList() // 获取风场列表
    this.getVideoSurveillanceData() // 获取视频监控界面数据
  },
  methods: {
    async tabClick(id) {
    async handleReview (id) {
      // const res = await sysapi.getVideoPlayBack(id)
      // console.log(res)
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:56',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:57',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:58',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:59',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 17:00',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'video/mp4'
      }]
      this.replayList = [{
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
        }]
      }, {
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
        }]
      }]
      this.showReplayDialog = true
    },
    async tabClick (id) {
      this.paramsObj.page = 0
      this.videoList = []
      this.tabId = id
      this.videoCurrent = 1
      this.getVideoSurveillanceData()
    },
    getWindFiledList() {
    getWindFiledList () {
      commonapi.getDepartments().then(resp => {
        this.organizationList = []
        console.log(resp)
@@ -87,13 +141,13 @@ export default {
      })
    },
    // 获得风场大门数据
    getVideoSurveillanceData(isWind) {
    getVideoSurveillanceData (isWind) {
      if (isWind) {
        this.videoList = []
      }
      if (this.videoList.length <= 10) {
        this.paramsObj.page = this.videoCurrent
        sysapi.getVideoSurveillanceData({params: this.paramsObj}).then(res => {
        sysapi.getVideoSurveillanceData({ params: this.paramsObj }).then(res => {
          this.departments = res.data.departments
          this.videoTotal = this.departments[this.tabId - 1].total
          res.data.data.forEach((element, index) => {
@@ -114,11 +168,11 @@ export default {
      }
    },
    // 进入识别记录界面
    goDistinguishRecord(id) {
      this.$router.push({path: '/videoSurveillance/distinguishRecord', query: {videoId: id}})
    goDistinguishRecord (id) {
      this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
    },
    // 风场大门分页
    onChangeGate(val) {
    onChangeGate (val) {
      this.videoList = []
      this.videoCurrent = val
      this.getVideoSurveillanceData()
@@ -127,81 +181,77 @@ export default {
}
</script>
<style lang="scss" scoped>
.page-main{
    padding:30px 24px 24px 24px;
    .top-btn{
        float: right;
    }
    .page-bottom{
        display: flex;
.page-main {
  padding: 30px 24px 24px 24px;
  .top-btn {
    float: right;
  }
  .page-bottom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-left: -24px;
    .card-video-first,
    .card-video {
      width: 354px;
      height: 240px;
      margin-top: 20px;
      .card-image {
        width: 100%;
        flex-wrap: wrap;
        .card-video-first, .card-video{
          width:397px;
          height:245px;
          margin-top: 20px;
            .card-image{
                width: 100%;
                height: 100%;
            }
            .bottom{
                padding: 0 12px;
                display: flex;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.5);
                height: 40px;
                color: #fff;
                font-size: 14px;
                .bottom-btn{
                    color: #fff;
                    border: none;
                    padding:0 !important;
                    &:hover{
                        color: #0089d4;
                    }
                }
            }
        }
        .card-video-first{
          .card-footer{
             padding: 0px !important;
             background: none;
             width: 100%;
             position: absolute;
             border-top: none;
             bottom: 0px;
             }
            .card-block{
              padding:0 !important;
            }
        }
        .card-video{
          .card-footer{
             padding: 0px 0 0 24px !important;
             background: none;
             width: 100%;
             position: absolute;
             border-top: none;
             bottom: 0px;
             }
            .card-block, .card-video-block{
              margin-left: 24px;
              padding:0 !important;
            }
        height: 100%;
      }
      .bottom {
        padding: 0 12px;
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        height: 40px;
        color: #fff;
        font-size: 14px;
        .bottom-btn {
          color: #fff;
          border: none;
          padding: 0 !important;
          &:hover {
            color: #0089d4;
          }
        }
      }
    }
    .card-video {
      .card-footer {
        padding: 0px 0 0 24px !important;
        background: none;
        width: 100%;
        position: absolute;
        border-top: none;
        bottom: 0px;
      }
      .card-block,
      .card-video-block {
        margin-left: 24px;
        padding: 0 !important;
      }
    }
    .pager{
  }
  .pager {
    margin-right: auto;
    margin: 21px 0px 24px 0;
    float: right;
  }
.btn-primary, .radio-group-button .form-radio:checked, .radio-group-button .form-radio[checked]{
  .btn-primary,
  .radio-group-button .form-radio:checked,
  .radio-group-button .form-radio[checked] {
    color: #0089d4;
    background-color: #fff;
    border: 1px solid #0089d4;
}
.btn-secondary, .radio-group-button .form-radio, .checkbox-group--button .form-checkbox .form-checkbox__inner, .btn-dashed-secondary, .btn-outline-secondary{
  }
  .btn-secondary,
  .radio-group-button .form-radio,
  .checkbox-group--button .form-checkbox .form-checkbox__inner,
  .btn-dashed-secondary,
  .btn-outline-secondary {
    background: none;
}
  }
}
</style>

security-protection-platform/src/styles/index.scss

@@ -25,6 +25,7 @@ html {
*,
*:before,
*:after {
  font-family: inherit;
  box-sizing: inherit;
}