[FE]首页修改

security-protection-platform/package.json

@@ -78,6 +78,8 @@
    "vuedraggable": "2.19",
    "video.js": "7.10.2",
    "videojs-playlist": "4.3.1",
    "videojs-flash": "2.2.1",
    "vue-video-player": "5.0.2",
    "echarts": "^4.9.0"
  }
}

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

@@ -5,7 +5,7 @@
    </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 class="goto" @click="gotoSystem"><t-icon icon="arrow-right-outline"></t-icon>进入系统</div>
    </div>
    <div class="body">
      <div class="body-left">
@@ -57,7 +57,9 @@
        <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;">
        <video-player ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true"></video-player>
<!--        <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;">
@@ -75,6 +77,10 @@ import titleImgBg from '@/assets/images/indexTitle.png'
import polygon from '@/assets/images/polygon.png'
import echarts from 'echarts'
import dasapi from '@/api/dashboard'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {
  filters: {
@@ -108,10 +114,13 @@ export default {
      )
    }
  },
  components: {},
  components: {
    videoPlayer
  },
  data() {
    return {
      nowDate: new Date(),
      videoOptions: {},
      imgBg: imgBg,
      titleImgBg: titleImgBg,
      polygon: polygon,
@@ -120,15 +129,42 @@ export default {
      alarmDataX: [],
      alarmDataY: [],
      topData: [
        {name: '未戴安全帽', value: 0},
        {name: '人员聚集', value: 0},
        {name: '吸烟', value: 0},
        {name: '摔倒', value: 0}]
        {name: '未戴安全帽', value: ''},
        {name: '人员聚集', value: ''},
        {name: '吸烟', value: ''},
        {name: '摔倒', value: ''}],
      topData1: []
    }
  },
  computed: {
  },
  mounted () {
    this.videoOptions = {
      live: true,
      autoplay: true,
      fluid: true,
      notSupportedMessage: '暂时无法播放',
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
      },
      techOrder: ['flash'],
      flash: {
        hls: { withCredentials: false },
        swf: 'static/video-js.swf' // 引入静态文件swf
      },
      sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
        type: 'rtmp/mp4',
        src: 'rtmp://58.200.131.2:1935/livetv/hunantv' 
      }]
    }
    setInterval(() => { // 当前时间
      this.nowDate = new Date()
    }, 1000)
@@ -137,10 +173,12 @@ export default {
    this.init24Top()
  },
  methods: {
    gotoSystem() {
      this.$router.push({name:'videoSurveillance'})
    },
    initAttendance() {
      debugger
      this.attendanceData = dasapi.queryAttendanceChart().then(res => {
        debugger
        this.population = res.data.totalSize
        res.data.dataList.forEach(e => {
          if (e.name === '在岗') {
@@ -158,9 +196,7 @@ export default {
      })
    },
    initAlarm() {
      debugger
      this.population = dasapi.queryAlarmAnalysisChart().then(res => {
        debugger
        res.data.forEach(e => {
          this.alarmDataX.push(e.name)
          this.alarmDataY.push(e.value)
@@ -169,10 +205,11 @@ export default {
      })
    },
    init24Top() {
      debugger
      this.topData = dasapi.queryAlarmAnalysisTopList().then(res => {
        debugger
        this.topData = res.data
      this.topData1 = dasapi.queryAlarmAnalysisTopList().then(res => {
        this.topData1 = res.data
        if (res.data.length>3){
          this.topData = this.topData1
        }
      })
    },
    initAttendanceData() {
@@ -251,12 +288,14 @@ export default {
      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
        if (value){
          var strs = value.split('')
          var str = ''
          for (var i = 0, s; s = strs[i++];) {
            str += s
            if (!(i % wordNum)) {
              flag = -20
            }
          }
        }
      })