朔黄事件标签弹窗调试；视频检索页筛选区字号颜色统一

hanbaoshan

2021-02-26 7e0e0b4445d3c03cc42005246fa879a4dc8e7e6d

朔黄事件标签弹窗调试；视频检索页筛选区字号颜色统一

 src/api/shuohuang.ts

@@ -149,4 +149,9 @@
  url:'/data/api-c/slot/getlst',
  method: 'get',
  params: query
})
export const getEventVideo = (query:any) => request({
  url:'/data/api-c/lkg/getEventClip',
  method: 'get',
  params: query
})

 src/components/giantTree/index.vue

@@ -83,8 +83,6 @@
          { min: 2, max: 10, message: "长度在2到10个字", trigger: "change" }
        ]
      },
      evt: {},
      treeId: '',
    };
  },
  created() {
@@ -105,6 +103,7 @@
  methods: {
    handleCreated: function (ztreeObj) {
      this.ztreeObj = ztreeObj;
      debugger
      // console.log("handleCreated")
      // onCreated 中操作ztreeObj对象展开第一个节点
      // ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
@@ -245,12 +244,8 @@
      this.showDialog = true;
    },
    itemClick(evt, treeId, treeNode) {
      debugger
      //let itemClickArgs = {evt,treeId};
      this.evt = evt;
      this.treeId = treeId;
      console.log(evt,treeId)
      // sessionStorage.setItem('itemClickArgs',JSON.stringify(itemClickArgs))

      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;


 src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue

@@ -1,17 +1,27 @@
<template>
  <div class="event-video-content">
    <div class="video-player">
      <video src></video>
      <video :src="curVideo.ClipPath" controls></video>
    </div>
    <div class="more-videos">
      <div class="top">
        <div class="title">更多视频</div>
        <div class="total">共<span class="num">{{total}}</span>条</div>
        <div class="total">
          共
          <span class="num">{{eventVideoArr.length}}</span>
          条
        </div>
      </div>
      <div class="gallery">
        <div class="video-item" v-for="item in 11" :key="item">
          <img src alt />
          <div class="time"></div>
        <div
          class="video-item"
          :class="{'act':item.ID == curVideo.ID}"
          v-for="item in eventVideoArr"
          :key="item.ID"
          @click="checkVideo(item)"
        >
          <img :src="item.Cover" alt />
          <div class="time">{{item.EventTime}}</div>
        </div>
      </div>
    </div>
@@ -21,14 +31,33 @@
<script>
export default {
  props: {
    eventDetail: {
      type: Object,
      default: {}
    },
    eventVideoArr: {
      type: Array,
      default: () => { return [] }
    }
  },
  data(){
  data () {
    return {
      curVideo: {},
    }
  },
  watch: {
    eventVideoArr (n, o) {
      if (n.length) {
        this.curVideo = n[0]
      }
    }
  },
  mounted () {
    //this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
    //this.curVideo = this.eventVideoArr[0];
    this.$nextTick(() => {
      this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
    })
  },
  methods: {
    checkVideo (data) {
      this.curVideo = data;
    }
  }
}
@@ -36,47 +65,54 @@

<style lang="scss">
.event-video-content {
  padding: 14px;
  .video-player{
  padding: 10px 14px;
  .video-player {
    background: #fff;
    margin-bottom: 14px;
    video{
    video {
      margin: 20px auto;
      width: 576px;
      height: 324px;
      background: aquamarine;
    }
  }
  .more-videos{
  .more-videos {
    background: #fff;
    .top{
    .top {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      .total{
        .num{
      .total {
        .num {
          padding: 0 2px;
          color: #0096fa;
        }
      }
    }
    .gallery{
    .gallery {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px 10px;
      max-height: 300px;
      height: 300px;
      overflow-y: auto;
      // &:after{
      //   content: "";
      //   flex: auto;
      // }
      .video-item{
      .video-item {
        width: 200px;
        height: 112.5px;
        //height: 112.5px;
        margin: 10px 40px;
        background: rgb(200, 223, 251);
        //background: rgb(200, 223, 251);
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 3px;
        &.act {
          border-color: #0096fa;
        }
        img {
          width: 100%;
        }
      }
    }
  }

 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -275,9 +275,9 @@
      >
        <div class="title" slot="title">
          <i class="el-icon-connection"></i>
          <span>shoubi视频</span>
          <span>{{curEvName}}视频</span>
        </div>
        <event-videos :eventDetail="curEventDetail"></event-videos>
        <event-videos :eventVideoArr="eventVideoArr"></event-videos>
      </el-dialog>
    </div>
  </div>
@@ -292,6 +292,7 @@
  getLabelMap,
  delLabel,
  editLabel,
  getEventVideo
} from "@/api/shuohuang";
import VideoAnalyze from "./videoAnalyze";
import EventVideos from "./eventVideos";
@@ -414,7 +415,8 @@
      labelDialogVisible: false,
      selectedVideo: {},
      eventDialogVisible: false,
      curEventDetail: {}
      curEvName: '',
      eventVideoArr: []
    };
  },
  watch: {
@@ -432,6 +434,11 @@
    checkEventVideo (label) {
      this.eventDialogVisible = true;
      this.curEventDetail = label;
      let _this = this;
      getEventVideo({Event:label.Event,LkgID:label.ParentID}).then(res=>{
        _this.eventVideoArr = res.data;
        _this.curEvName = label.Event;
      })
    },
    handleTabSizeChange (size) {
      this.tabPageSize = size;
@@ -528,7 +535,6 @@
        } else {
          _this.tabTotal = res.total;
          _this.tabData = res.data;
          // debugger
          _this.tabData = _this.tabData.map(function (item) {
            const set = new Set()
            item.LableLst.forEach(function (label) {
@@ -827,6 +833,8 @@
            height: 40px;
            line-height: 40px;
            border: none;
            color: #2c3e50;
            font-size: 12px;
          }
          .el-menu--popup {
            display: flex;
@@ -838,6 +846,7 @@
          }
          .highlevel-option {
            font-size: 12px;
            color: #2c3e50;
            &:hover {
              color: #6486e7;
            }
@@ -907,7 +916,6 @@
        position: relative;
        text-align: left;
        background: #fff;
        border: 1px solid #dedede;
        border-radius: 5px;
        height: 360px;
        margin-bottom: 10px;

 vue.config.js

@@ -87,7 +87,7 @@
      //   }
      // },
      "/api-c": {
        target: 'http://192.168.20.10:8004',
        target: 'http://192.168.20.113:8004',
        changeOrigin: true
      },
      "/api-v": {