[FE]首页人脸识别 视频监控布局

ebc-middle-platform/src/assets/locals/zh-CN.json

      "hello": "您好",
      "welcome": "欢迎登录",
      "system": "系统",
      "demo": "系统名称",
      "demo": "人员定位与搜救",
      "username": "用户名",
      "account": "账户名",
      "password": "密码",

ebc-middle-platform/src/components/loginer.vue

            this.$test
              .post(services.login.FIND_MENUS, {userCode: data.RESULT.CODE})
              .then((data) => {
                localStorage.setItem('menus',  JSON.stringify(data))
                var map = new Map()
                data.RESULT.forEach(e => {
                  if (e.ROOT_MENU){
                    map.set(e.ROOT_MENU[0].NAME,e.ROOT_MENU[0].ID)
                  }
                  map.set(e.NAME,e.ID)
                  if (e.menu_list) {
                    e.menu_list.forEach( m => {
                      map.set(m.NAME,m.ID)
                    })
                  }
                })
                debugger
                localStorage.setItem('menus',  JSON.stringify(map))
                store.dispatch(`permission/${GENERATE_ROUTES}`, roles)
                this.$router.push({ name: this.homeName })
              })
            this.$router.push({ name: this.homeName })
          }).catch((e) => {
            this.loging = false
            this.$Message.danger(e)

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

    return $default.get('/sp/homePage/queryAlarmAnalysisTopList', {}).then(resp => {
      return resp.data
    })
  },
  // 进出识别
  queryHomeLastInAndOutRecord (data) {
    return $default.get('/sp/inAndOutRecord/queryHomeLastInAndOutRecord?monitorSceneId=3', data)
  }
  // 直播流
  // queryMonitorSceneTerminalRel () {

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

          <span class="title-span">人员进出识别</span>
        </div>
        <div v-for="(item,index) in distinguishData" :style="`background-image: url(${border})`" class="distinguish">
          <div class="distinguish-title"> {{ item.name }} </div>
          <div class="distinguish-title"> {{ item.monitorSceneName }} </div>
          <div class="distinguish-row">
            <div class="similarity">
              <p style="opacity: 1;font-size: 12px">70%</p>
              <p class="p">{{ item.simi }}</p>
            </div>
            <img src="@/assets/images/indexT1.png" class="distinguish-col">
            <img src="@/assets/images/indexT1.png" class="distinguish-col">
            <img :src="item.newImg" alt="" class="distinguish-col">
            <img :src="item.headerImage" class="distinguish-col">
            <div style="width: 40%;margin-top: 4%;height: 79%;">
              <div class="distinguish-col-row">王小明(00220)</div>
              <div class="distinguish-col-row">已佩戴口罩</div>
              <div class="distinguish-col-row">2021.01.05 12:11:00</div>
              <div class="distinguish-col-row">{{ item.employeeName }}({{ item.employeeCode }})</div>
              <div class="distinguish-col-row">{{ item.taskExecuteTime }}</div>
            </div>
          </div>
        </div>
<script>
import imgBg from '@/assets/images/indexTop.png'
import avatar from '@/assets/images/avatar.png'
import titleImgBg from '@/assets/images/indexTitle.png'
import polygon from '@/assets/images/polygon.png'
import border from '@/assets/images/border.png'
        sources: [{
          withCredentials: false,
          type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'http://10.19.90.34:1080/live/1.m3u8' // url地址
          src: 'http://10.19.90.34:1080/live/01.m3u8' // url地址
        }],
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
      videoOptionsList: [],
      imgBg: imgBg,
      titleImgBg: titleImgBg,
      avatar: avatar,
      polygon: polygon,
      border: border,
      attendanceData: [],
      alarmDataY: [],
      topData: [],
      topData1: [],
      distinguishData: [{name: '1风场', url: '@/assets/images/indexT1.png', url2: '@/assets/images/indexT1.png'},
        {name: '2风场', url: '@/assets/images/indexT1.png', url2: '@/assets/images/indexT1.png'},
        {name: '3风场', url: '@/assets/images/indexT1.png', url2: '@/assets/images/indexT1.png'},
        {name: '2风场', url: '@/assets/images/indexT1.png', url2: '@/assets/images/indexT1.png'}]
      distinguishData: []
    }
  },
  computed: {
    setInterval(() => { // 当前时间
      this.nowDate = new Date()
    }, 1000)
    this.initRecognition()
    this.initAttendance()
    this.initAlarm()
    this.init24Top()
    setInterval(() => { // 识别记录
      this.initRecognition()
    }, 10000)
  },
  methods: {
    initVideo() {
        }
      })
    },
    initRecognition() {
      dasapi.queryHomeLastInAndOutRecord({monitorSceneId: 3}).then(res => {
        var data = res.data.data
        if (data.length > 4){
          data = data.slice(0,4)
        }
        data.forEach(e => {
          e.simi = e.simi.split('.')[0] + '%'
          e.newImg = e.idenPictureUrl
          var loadTimer;
          var imgObject = new Image();
          imgObject.setAttribute('crossOrigin', 'anonymous');
          imgObject.src = e.idenPictureUrl;
          imgObject.onLoad = onImgLoaded();
          function onImgLoaded() {
            if (loadTimer != null) clearTimeout(loadTimer);
            if (!imgObject.complete) {
              loadTimer = setTimeout(function() {
                onImgLoaded();
              }, 3);
            } else {
              e.newImg = getImagePortion(imgObject, e.face_box[2] - e.face_box[0], e.face_box[3] - e.face_box[1], e.face_box[0], e.face_box[1]);
            }
          }
          function getImagePortion(imgObj, newWidth, newHeight, startX, startY){
            var tnCanvas = document.createElement('canvas');
            var tnCanvasContext = tnCanvas.getContext('2d');
            tnCanvas.width = newWidth; tnCanvas.height = newHeight;
            var bufferCanvas = document.createElement('canvas');
            var bufferContext = bufferCanvas.getContext('2d');
            bufferCanvas.width = imgObj.width;
            bufferCanvas.height = imgObj.height;
            bufferContext.drawImage(imgObj, 0, 0);
            tnCanvasContext.drawImage(bufferCanvas, startX,startY,newWidth, newHeight,0,0,newWidth,newHeight);
            return tnCanvas.toDataURL();
          }
        })
        this.distinguishData = data
      })
    },
    initAttendanceData() {
      var dom = document.getElementById('doughnut')
      var myChart = echarts.init(dom)
            opacity: 0.5;
            border-radius: 50%;
            padding-top: 1%;
            filter:alpha(opacity=50); /*支持IE */
            -moz-opacity:0.5; /*支持FF */
            //opacity:0.5;
            .p{
              position:relative;
              color: #00d8f3;
              font-size: 10px
            }
          }
          .distinguish-col{
            width: 27%;
          }
          .distinguish-col-row{
            padding-left: 5%;
            height: 30%;
            padding-top: 5%;
            height: 40%;
            width: 130%;
            color: white;
            font-size: 14px;

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

        <t-option v-for="(item,index) in organizationList" :key="index" :value="item.id">{{ item.name }}</t-option>
      </t-select>
    </div>
    <div class="page-bottom">
      <div v-for="(item,index) in videoList" :key="index" :value="item.resourceToolId" style="width:400px;margin:24px 0px 0 24px;">
    <div class="page-bottom grid-demo">
      <t-col v-for="(item,index) in videoList" :span="viewLayoutSpan" :key="index" :value="item.resourceToolId" style="margin-top:24px">
        <video-player
          :ref="'video'+index"
          :options="videoOptions[index]"
          :playsinline="false"
          :events="events"
          class="vjs-custom-skin videoPlayer"
          @dblclick="handlefullscreenchange"
            :ref="'video'+index"
            :options="videoOptions[index]"
            :playsinline="false"
            :events="events"
            class="vjs-custom-skin videoPlayer"
            @dblclick="handlefullscreenchange"
        ></video-player>
      </t-col>
      <!-- <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video> -->
      </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>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 1, 4, 9, 16 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" @get-list="queryMonitorVideoLog" />
  </div>
</template>
  },
  data () {
    return {
      viewLayoutSpan: 3,
      events: ['fullscreenchange'],
      videoOptions: [],
      videoCurrent: 1, // 大门分页数据
        if (element.id === this.gateFieldData) {
          sysapi.getMonitorScene(this.organizationList[index].id).then((resp) => {
            this.sceneList = resp.data.data || []
            if (resp.data.data[0].monitorViewLayout === '1X1') {
              this.viewLayoutSpan = 10
              this.videoPageSize = 1
            } else if (resp.data.data[0].monitorViewLayout === '2X2') {
              this.viewLayoutSpan = 6
              this.videoPageSize = 4
            } else if (resp.data.data[0].monitorViewLayout === '3X3') {
              this.viewLayoutSpan = 4
              this.videoPageSize = 9
            } else if (resp.data.data[0].monitorViewLayout === '4X4') {
              this.viewLayoutSpan = 3
              this.videoPageSize = 16
            }
            this.tabClick(this.sceneList[0].monitorSceneId)
          })
        }