分析检索/人员管理接口联调

hanbaoshan

2021-01-13 e6758ef29bd686e894b4679edf1bd88436b84148

 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -18,7 +18,7 @@
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
        <el-button size="small" type="primary" @click="dataSearch">搜索</el-button>
        <el-button size="small" type="primary" @click="init">搜索</el-button>
      </div>
      <div class="checked-config">
        <span style="margin-top:3px;">已选条件:</span>
@@ -51,7 +51,7 @@
      </div>
      <div class="optional-config">
        <div class="config" v-for="(config,index) in optionalConfigs" :key="index">
          <template v-show="config.isShow">
          <template v-if="config.isShow">
            <div class="title">{{config.title}}</div>
            <div class="options-wrap">
              <div
@@ -89,7 +89,7 @@
            </div>
          </template>
        </div>
        <div class="config">
        <div class="config" v-if="showAdvance">
          <div class="title">高级选项</div>
          <div>
            <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -144,32 +144,32 @@
      </div>
      <div class="content" v-show="showType=='menu'">
        <el-row :gutter="20">
          <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in menuList" :key="data.id">
          <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in tabData" :key="data.id">
            <div class="card">
              <div class="video-wrap" @click="checkVideo(data)">
                <video src></video>
              <div class="video-wrap" @click="checkVideoDetail(data)">
                <img :src="CLIP+data.VideoCover" alt />
              </div>
              <div class="video-info">
                <div class="base-info">
                  <div>
                    <label>车号:</label>
                    <span>{{data.no}}</span>
                    <span>{{data.CarNumber}}</span>
                  </div>
                  <div>
                    <label>车次:</label>
                    <span>{{data.frequency}}</span>
                    <span>{{data.TrainNumber}}</span>
                  </div>
                  <div>
                    <label>时间:</label>
                    <span>{{data.time}}</span>
                    <span>{{data.VideoDate}}</span>
                  </div>
                  <div>
                    <label>司机|副司机:</label>
                    <span>{{data.driver}}</span>
                    <span>{{data.Driver1}}|{{data.Driver2}}</span>
                  </div>
                </div>
                <div class="mark-info">
                  <div class="abnormal" v-if="data.markType==1">
                  <div class="abnormal" v-if="data.IsUnusual==='1'">
                    <span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span>
                  </div>
                  <div v-else>
@@ -180,32 +180,33 @@
                  <div class="tag" v-for="(tag,index) in data.tags" :key="index">{{tag}}</div>
                </div>
              </div>
              <div class="star">
                <i :class="[data.follow?'follow':'','el-icon-star-off']"></i>
              <div class="star" @click="toggleFollow(data)">
                <i :class="[data.IsFollow?'follow':'','el-icon-star-off']"></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @size-change="handleTabSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="curTabPage"
          :page-sizes="pageSizes"
          :page-size="tabPageSize"
          layout="total, prev, pager, next"
          :total="tabTotal">
        </el-pagination>
          layout="total,sizes, prev, pager, next"
          :total="tabTotal"
        ></el-pagination>
      </div>
      <div class="content" v-show="showType=='list'">
        <el-table :data="tableData" fit ref="elTable">
          <el-table-column label="名称" prop="name" sortable width="500">
          <el-table-column label="名称" prop="VideoName" sortable width="500">
            <template slot-scope="scope">
              <div style="cursor:pointer;">{{scope.row.name}}</div>
              <div style="cursor:pointer;">{{scope.row.VideoName}}</div>
            </template>
          </el-table-column>
          <el-table-column label="大小" prop="size" sortable></el-table-column>
          <el-table-column label="修改日期" prop="updateTime" sortable></el-table-column>
          <el-table-column label="创建日期" prop="createTime" sortable></el-table-column>
          <el-table-column label="大小" prop="VideoSize" sortable></el-table-column>
          <el-table-column label="修改日期" prop="UpdatedAt" sortable></el-table-column>
          <el-table-column label="创建日期" prop="CreatedAt" sortable></el-table-column>
          <el-table-column label="操作">
            <template>
              <div class="operation">
@@ -214,15 +215,15 @@
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="tableListTotal"></el-pagination> -->
        <el-pagination
          @size-change="handleSizeChange"
          @size-change="handleTableSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="curTablePage"
          :page-size="tablePageSize"
          layout="total, prev, pager, next"
          :total="tableTotal">
        </el-pagination>
          :page-sizes="pageSizes"
          layout="total,sizes, prev, pager, next"
          :total="tableTotal"
        ></el-pagination>
      </div>
      <el-dialog
        class="dialog-video"
@@ -259,34 +260,82 @@
                  <i class="el-icon-film"></i>
                  <span>{{video.name}}</span>
                </div>-->
                <div class="video-name">
                <div
                  class="video-name"
                  :class="{'current':curVideo.ID==video.ID}"
                  @click="checkVideo(video,index)"
                  v-for="(video,index) in videoDetails.relativeVideos"
                  :key="video.ID"
                >
                  <i class="el-icon-film"></i>
                  <span>驾驶室</span>
                </div>
                <div class="video-name">
                  <i class="el-icon-film"></i>
                  <span>机房</span>
                  <span>{{video.Event}}</span>
                </div>
              </div>
              <div class="players">
                <div class="video-item" v-for="(item,index) in videoWrapArr" :key="index"></div>
              <div class="players" ref="playerWrap">
                <div
                  class="video-item"
                  :ref="`gridVideoItem_${index}`"
                  v-for="(item,index) in videoWrapArr"
                  :key="index"
                  
                >
                  <template v-if="index<=videoArrs.length-1">
                    <div :class="{'currentPlayer':curVideo.ID==videoArrs[index].ID}">
                      {{videoArrs[index].ID}}
                      <img
                        :src="CLIP+videoArrs[index].VideoCover"
                        style="width:100px"
                      />
                    </div>
                  </template>
                </div>
                <!-- <div
                  class="video-item"
                  :class="{'active':item.ID==curVideo.ID}"
                  :ref="`gridVideoItem_${index}`"
                  v-for="(item,index) in videoWrapArr"
                  :key="index"
                >
                  
                </div>-->
              </div>
            </div>
          </div>
          <div class="content-bottom">
            <div class="bot-left block">
              <p class="title-partment">快速标注</p>
              <div style="height:28px;">
              <div class="flex-box" style="height:28px;">
                <label style="padding-right:10px;">隐患问题:</label>
                <el-radio v-model="hiddenDanger" :label="1">无异常</el-radio>
                <el-radio v-model="hiddenDanger" :label="2">有异常</el-radio>
                <el-radio v-model="curVideo.IsUnusual" label="0">无异常</el-radio>
                <el-radio v-model="curVideo.IsUnusual" label="1">有异常</el-radio>
                <el-button
                  icon="el-icon-plus"
                  size="mini"
                  v-show="hiddenDanger==2"
                  v-show="curVideo.IsUnusual==1"
                  type="primary"
                  @click="addLabel(videoDetails)"
                  @click="addLabel(curVideo)"
                >添加标注</el-button>
              </div>
              <div class="flex-box">
                <label>标注信息:</label>
                <div class="mark-list">
                  <div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
                    <div class="time" v-if="mark.length">
                      <span>{{mark[0].Time}}</span>
                      <i class="el-icon-edit" @click="editCurLabel(mark)"></i>
                      <i
                        class="el-icon-delete"
                        @click="removeCurLabel(mark[0].ParentID,mark[0].Time)"
                      ></i>
                    </div>
                    <div class="label-content">
                      <span
                        v-for="content in mark"
                        :key="content.ID"
                      >{{findLabelNameById(content.CodeID)}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bot-right block">
@@ -294,19 +343,19 @@
              <div class="base-info">
                <div>
                  <label>车号:</label>
                  <span>{{videoDetails.no}}</span>
                  <span>{{videoDetails.CarNumber}}</span>
                </div>
                <div>
                  <label>车次:</label>
                  <span>{{videoDetails.frequency}}</span>
                  <span>{{videoDetails.TrainNumber}}</span>
                </div>
                <div>
                  <label>时间:</label>
                  <span>{{videoDetails.time}}</span>
                  <span>{{videoDetails.VideoDate}}</span>
                </div>
                <div>
                  <label>司机|副司机:</label>
                  <span>{{videoDetails.driver}}</span>
                  <span>{{videoDetails.Driver1}}|{{videoDetails.Driver2}}</span>
                </div>
              </div>
            </div>
@@ -321,13 +370,12 @@
      >
        <div class="label-check">
          <el-checkbox-group v-model="labelCheckedList">
            <el-checkbox v-for="item in labelOptions" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
            <el-checkbox v-for="item in labelOptions" :key="item.ID" :label="item.ID">{{item.Name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btns">
          <el-button @click="delLabelChecked" size="small">删除</el-button>
          <el-button @click="cancelLabelChecked" size="small">取消</el-button>
          <el-button @click="submitLabelChecked(videoDetails)" size="small" type="primary">确定</el-button>
          <el-button @click="submitLabelChecked()" size="small" type="primary">确定</el-button>
        </div>
      </el-dialog>
    </div>
@@ -335,16 +383,18 @@
</template>

<script>
import { getlstInit } from '@/api/shuohuang';
import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';

export default {
  data () {
    return {
      CLIP: 'http://192.168.20.113/',
      keyword: '',
      searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 3).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
      curTabPage: 1,
      curTablePage: 1,
      tabPageSize: 8,
      pageSizes: [2, 8, 12, 24],
      tabTotal: 0,
      tablePageSize: 8,
      tableTotal: 0,
@@ -391,6 +441,7 @@
      checkedConfigs: [],
      optionalConfigs: [],
      highLevelConfigs: [],
      showAdvance: true,
      fixedOneLineHeight: 40,
      watch: '',
      settle: '',
@@ -399,7 +450,7 @@
        { name: 'SS4B115_06_B节二端司机室_20201115_091500.mp4', size: '17.66M', updateTime: '2020-11-04 15:41', createTime: '2020-11-04 15:41' },
        { name: 'SS4B115_06_B节二端司机室_20201115_091700.mp4', size: '17.76M', updateTime: '2020-11-04 15:41', createTime: '2020-11-07 17:41' }
      ],
      menuList: [
      tabData: [
        { id: 'ss1', no: 'SS4B115', frequency: '8084', time: '2020-09-21 20:45:08', driver: '张三', marks: ['未呼唤、呼唤不标准', '学习司机未应答'], markType: 1, tags: ['进出站', '司机离岗'], follow: true },
        { id: 'ss2', no: 'SS4B115', frequency: '8084', time: '2020-09-21 20:45:08', driver: '张三', marks: [], markType: 0, tags: ['进出站', '司机离岗'], follow: false }
      ],
@@ -407,11 +458,34 @@
      videoDialogVisible: false,
      videoDetails: {},
      guid: 1,
      curVideo: {},
      videoArrs: [],
      videoWrapArr: [],
      hiddenDanger: 1,
      labelDialogVisible: false,
      labelOptions: [{ id: 'whh', name: '未呼唤、呼唤不标准' }, { id: 'jsbz', name: '精神不振、运行中睡觉' }, { id: 'xxsj', name: '学习司机未应答' }, { id: 'myhb', name: '没有后部瞭望、不按规定做防溜措施' }],
      labelCheckedList: [],
    }
  },
  watch: {
    checkedConfigs: {
      handler (n, o) {
        // let filterQuerys = [];
        // n.forEach(config => {
        //   let checkedOpts = config.data.filter(option => option.isChecked);
        //   if (checkedOpts.length) {
        //     var linkOpts = checkedOpts.map(opt => opt.name);
        //     linkOpts = linkOpts.join(',');
        //     let obj = {};
        //     obj[config.NameEn] = linkOpts;
        //     filterQuerys.push(obj);
        //   }
        // })
        // console.log(filterQuerys)

        this.filterSearchData()
      },
      deep: true
    }
  },
  mounted () {
@@ -447,32 +521,106 @@
    //   console.log(this.optionalConfigs);
    // });
    this.init();
    this.renderLabelOpts();
  },
  methods: {
    handleSizeChange(){

    editCurLabel (mark) {
      let arr = [];
      mark.forEach(label => {
        arr.push(label.CodeID)
      });
      this.labelCheckedList = arr;
      this.labelDialogVisible = true;
    },
    handleCurrentChange(){

    removeCurLabel (ParentID, Time) {
      delLabel({ ParentID, Time }).then(res => {
        
      })
    },
    renderLabelOpts () {
      let _this = this;
      getLabelMap().then(res => {
        _this.labelOptions = res.data
      })
    },
    findLabelNameById (id) {
      debugger
      let label = this.labelOptions.find(label => label.ID == id);
      return label.Name;
    },
    checkVideo (video,index) {
      this.curVideo = video;
      debugger
      if(index>0&&this.guid==1){
        this.videoWrapArr
      }
    },
    handleTabSizeChange (size) {
      debugger
      this.tabPageSize = size;
      this.filterSearchData()
    },
    handleTableSizeChange (size) {
      this.tablePageSize = size;
      this.filterSearchData()
    },
    handleCurrentChange () {
      this.filterSearchData()
    },
    //二级查询
    filterSearchData () {
      let _this = this;
      let query = {
        KeyWord: this.keyword,
        StartDate: this.searchTime[0],
        EndDate: this.searchTime[1],
        PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
        PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
        IsDetail: this.showType == 'list'
      };
      let filterQuerys = [];
      this.checkedConfigs.forEach(config => {
        let checkedOpts = config.data.filter(option => option.isChecked);
        if (checkedOpts.length) {
          var linkOpts = checkedOpts.map(opt => opt.name);
          linkOpts = linkOpts.join(',');
          let obj = {};
          obj[config.NameEn] = linkOpts;
          filterQuerys.push(obj);
        }
      })
      Object.assign(query, ...filterQuerys);

      getlst(query).then(res => {
        if (_this.showType == 'list') {
          _this.tableTotal = res.total;
          _this.tableData = res.data;
        } else {
          _this.tabTotal = res.total;
          _this.tabData = res.data;
        }
      })
    },
    //一级查询
    init () {
      let _this = this;
      let query = {
        KeyWord: this.keyword,
        StartDate: this.searchTime[0],
        EndDate: this.searchTime[1],
        PageIndex: this.showType=='list'?this.curTablePage:this.showType=='list',
        PageSize: this.showType=='list'?this.tablePageSize:this.tabPageSize,
        IsDetail: this.showType=='list'
        PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
        PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
        IsDetail: this.showType == 'list'
      };
      this.optionalConfigs = [];
      this.highLevelConfigs = [];
      getlstInit(query).then(res => {
        debugger
        if(_this.showType=='list'){
        if (_this.showType == 'list') {
          _this.tableTotal = res.total;
        }else{
          _this.tableData = res.data;
        } else {
          _this.tabTotal = res.total;
          _this.tabData = res.data;
        }

        res.filterlst.forEach(config => {
@@ -481,8 +629,6 @@
            let obj = {};
            obj.name = key;
            obj.id = config.Node[key]
            // item.id = item;
            // item.name = k;
            return obj
          });
          config.id = config.ID;
@@ -509,42 +655,111 @@
          });
          console.log(this.optionalConfigs);
        });

      })
    },
    delLabelChecked () {

    toggleFollow (data) {
      data.IsFollow = !data.IsFollow;
      this.updataVideo(data);
      if (data.IsFollow) {
        this.$notify({
          type: 'success',
          message: '已添加关注!'
        });
      }
    },
    cancelLabelChecked () {
    updataVideo (data) {
      let _this = this;
      updateVideoAnalyze(data).then(res => {
        //二级查询
      });
    },

    cancelLabelChecked () {
      this.labelDialogVisible = false;
    },
    submitLabelChecked () {
      console.log(this.labelCheckedList)
      debugger
      //this.curVideo
      //this.curVideo.HotPoint[0].Time
      editLabel({ ParentID: this.curVideo.ID + '', Time: this.curVideo.HotPoint[0].Time, CodeID: this.labelCheckedList.join(',') }).then(res => {
        debugger

      })

    },
    addLabel (videoDetails) {
      debugger
    addLabel (video) {
      this.labelDialogVisible = true;

    },
    setGuid (guid) {
      let _this = this;
      // for(var i = 0; i < Math.pow(guid,2); i++){
      //   if(i>this.videoArrs.length-1){
      //       this.videoWrapArr[i] = this.videoArrs[i]
      //     }else{
      //       this.videoWrapArr[i] = {}
      //     }
      // }
      this.videoWrapArr = Math.pow(guid, 2);

    },
    checkVideo (data) {
      this.videoDialogVisible = true;
      this.videoDetails = data;
      this.$nextTick(() => {
        for (var i = 0; i < Math.pow(guid, 2); i++) {
          this.$refs[`gridVideoItem_${i}`][0].style.width = this.$refs['playerWrap'].offsetWidth / guid + 'px';
          this.$refs[`gridVideoItem_${i}`][0].style.height = this.$refs['playerWrap'].offsetHeight / guid + 'px';

        }
      })

    },
    checkVideoDetail (data) {
      this.videoDetails = data;
      let _this = this;
      getRelatedVideoInfo({ UniqeID: data.UniqeID }).then(res => {
        _this.videoDetails.relativeVideos = res.data;
        _this.curVideo = res.data[0];
        _this.videoArrs = res.data;
        // _this.videoWrapArr.push(res.data[0]);
        _this.setGuid(1)
        _this.videoDialogVisible = true;
      })
    },
    checkFollow () {

    },
    checkType (type) {
      this.showType = type;
      this.init();
      // let filterQuerys = [];
      // this.checkedConfigs.forEach(config => {
      //   let checkedOpts = config.data.filter(option => option.isChecked);
      //   if (checkedOpts.length) {
      //     var linkOpts = checkedOpts.map(opt => opt.name);
      //     linkOpts = linkOpts.join(',');
      //     let obj = {};
      //     obj[config.NameEn] = linkOpts;
      //     filterQuerys.push(obj);
      //   }
      // })
      this.filterSearchData()
    },
    clearCheckedConfigs () {
      this.checkedConfigs.forEach(config => {
        config.isShow = true;
        config.data.forEach(d => {
          d.isChecked = false
        });
      });
      this.checkedConfigs = [];
      this.showAdvance = true;
    },
    removeCheckedConfig (config) {
      config.isShow = true;
      if (config.IsAdvanced) {
        this.showAdvance = true;
      }
      config.data.forEach(d => {
        d.isChecked = false;
      });
      let index = this.checkedConfigs.findIndex(one => one.id == config.id);
      this.checkedConfigs.splice(index, 1);
    },
@@ -554,12 +769,14 @@
      }
      this.checkedConfigs.push(config);

      //config.isShow = false;

      // this.dataSearch();
      this.$nextTick(() => {
        config.isShow = false;
      })
      config.isShow = false;
      config.isMultCheck = false;
      if (config.IsAdvanced) {
        this.showAdvance = false;
      }
      // this.$nextTick(() => {
      //   this.$set(config, 'isShow', false)
      // })

    },

@@ -785,7 +1002,8 @@
        .video-wrap {
          background: aliceblue;
          border-radius: 3px;
          video {
          img {
            width: 100%;
            border-radius: 3px;
          }
        }
@@ -882,6 +1100,7 @@
              width: 160px;
              margin-right: 10px;
              .video-name {
                cursor: pointer;
                color: #666;
                margin-bottom: 10px;
                &.current {
@@ -896,10 +1115,14 @@
              width: 960px;
              height: 540px;
              display: flex;
              flex-wrap: wrap;
              .video-item {
                flex: 1;
                background: black;
                border: 1px solid #fff;
                box-sizing: border-box;
                .currentPlayer {
                  border: 2px solid aqua;
                }
              }
            }
          }
@@ -908,6 +1131,28 @@
          display: flex;
          .bot-left {
            flex: 1;
            .flex-box {
              align-items: baseline;
              label {
                padding-right: 10px;
              }
              .mark-list {
                .time {
                  cursor: pointer;
                  font-size: 15px;
                  font-weight: bold;
                  color: #409eff;
                  i[class^='el-icon'] {
                    padding: 3px;
                  }
                }
                .label-content {
                  font-size: 13px;
                  padding: 4px 0;
                  color: #888;
                }
              }
            }
          }
          .bot-right {
            width: 210px;