treee, 修复tab切换时树的选中状态.添加区域

zhangzengfei

2021-02-04 0175cda6150656bc74b34c6f6c71edd1e1fc653c

 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">
@@ -117,14 +117,14 @@
      <div class="header-bar clearfix">
        <div class="left">
          <div>
            <el-select v-model="watch" size="mini">
              <el-option value label="全部"></el-option>
              <el-option value="1" label="未关注"></el-option>
              <el-option value="2" label="已关注"></el-option>
            <el-select v-model="IsFollow" size="mini" @change="filterSearchData">
              <el-option value='' label="全部"></el-option>
              <el-option :value="false" label="未关注"></el-option>
              <el-option :value="true" label="已关注"></el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="settle" size="mini">
            <el-select v-model="settle" size="mini" >
              <el-option value label="全部"></el-option>
              <el-option value="1" label="未处理"></el-option>
              <el-option value="2" label="已处理"></el-option>
@@ -144,33 +144,33 @@
      </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>
                  <div class="flex-box">
                    <label>车号:</label>
                    <span>{{data.no}}</span>
                    <span>{{data.CarNumber}}</span>
                  </div>
                  <div>
                  <div class="flex-box">
                    <label>车次:</label>
                    <span>{{data.frequency}}</span>
                    <span>{{data.TrainNumber}}</span>
                  </div>
                  <div>
                  <div class="flex-box">
                    <label>时间:</label>
                    <span>{{data.time}}</span>
                    <span>{{data.VideoDate}}</span>
                  </div>
                  <div>
                  <div class="flex-box">
                    <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">
                    <span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span>
                  <div class="abnormal" v-if="data.LableLst&&data.LableLst.length">
                    <span v-for="(label,index) in data.LableLst" :key="index">{{label.Desc}}</span>
                  </div>
                  <div v-else>
                    <span>无异常</span>
@@ -180,55 +180,55 @@
                  <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>
            <template slot-scope="scope">
              <div class="operation">
                <i class="el-icon-star-off" style="font-size: 18px;"></i>
                <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i>
              </div>
            </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"
        :visible="videoDialogVisible"
        @close="videoDialogVisible=false"
        :append-to-body="false"
      >
        <div slot="title" class="title">
          <div class="center">
@@ -236,115 +236,31 @@
            <span>播放视频</span>
          </div>
        </div>
        <div class="content">
          <div class="content-top">
            <div class="grid-check">
              <span
                :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
                @click="setGuid(1)"
              ></span>
              <span
                :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
                @click="setGuid(2)"
              ></span>
              <span
                :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
                @click="setGuid(3)"
              ></span>
            </div>
            <div class="video-area">
              <div class="info-list block">
                <p class="title-partment">相关视频</p>
                <!-- <div class="video-name" v-for="video in videoDetails.videoList" :key="video.id">
                  <i class="el-icon-film"></i>
                  <span>{{video.name}}</span>
                </div>-->
                <div class="video-name">
                  <i class="el-icon-film"></i>
                  <span>驾驶室</span>
                </div>
                <div class="video-name">
                  <i class="el-icon-film"></i>
                  <span>机房</span>
                </div>
              </div>
              <div class="players">
                <div class="video-item" 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;">
                <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-button
                  icon="el-icon-plus"
                  size="mini"
                  v-show="hiddenDanger==2"
                  type="primary"
                  @click="addLabel(videoDetails)"
                >添加标注</el-button>
              </div>
            </div>
            <div class="bot-right block">
              <p class="title-partment">视频详情</p>
              <div class="base-info">
                <div>
                  <label>车号:</label>
                  <span>{{videoDetails.no}}</span>
                </div>
                <div>
                  <label>车次:</label>
                  <span>{{videoDetails.frequency}}</span>
                </div>
                <div>
                  <label>时间:</label>
                  <span>{{videoDetails.time}}</span>
                </div>
                <div>
                  <label>司机|副司机:</label>
                  <span>{{videoDetails.driver}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        class="label-dialog"
        :visible="labelDialogVisible"
        @close="labelDialogVisible=false"
        :append-to-body="false"
      >
        <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-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>
        </div>
        <video-analyze :videoDetails="selectedVideo" />
      </el-dialog>
    </div>
  </div>
</template>

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

export default {
  name: "SearchMain",
  components: {
    VideoAnalyze
  },
  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")],
      IsFollow: '',
      searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).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,88 +307,111 @@
      checkedConfigs: [],
      optionalConfigs: [],
      highLevelConfigs: [],
      showAdvance: true,
      fixedOneLineHeight: 40,
      watch: '',
      settle: '',
      showType: 'menu',
      tableData: [
        { 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 }
      ],

      ], 
      videoDialogVisible: false,
      videoDetails: {},
      guid: 1,
      videoWrapArr: [],
      hiddenDanger: 1,
      labelDialogVisible: false,
      labelOptions: [{ id: 'whh', name: '未呼唤、呼唤不标准' }, { id: 'jsbz', name: '精神不振、运行中睡觉' }, { id: 'xxsj', name: '学习司机未应答' }, { id: 'myhb', name: '没有后部瞭望、不按规定做防溜措施' }],
      labelCheckedList: [],
      selectedVideo: {}
    }
  },
  watch: {
    checkedConfigs: {
      handler (n, o) {
        this.filterSearchData()
      },
      deep: true
    }
  },
  mounted () {
    // let mockConfigs = [
    //   { id: 'jch', isHighLevel: false, title: '机车号', data: [{ name: '全部', id: '' }, { name: 'K24', id: 'k24' }, { name: 'G172', id: 'g172' }, { name: 'K254', id: 'k254' }, { name: 'K264', id: 'k264' }, { name: 'G132', id: 'g132' }, { name: 'K257', id: 'k257' }, { name: 'K269', id: 'k269' }, { name: 'G176', id: 'g176' }, { name: 'G137', id: 'g137' }, { name: 'K297', id: 'k297' }, { name: 'K209', id: 'k209' }, { name: 'G777', id: 'g777' }, { name: 'G337', id: 'g337' }, { name: 'K277', id: 'k277' }, { name: 'K299', id: 'k299' }, { name: 'G866', id: 'g866' }, { name: 'K877', id: 'k877' }, { name: 'K699', id: 'k699' }, { name: 'G906', id: 'g906' }, { name: 'L677', id: 'l677' }, { name: 'M987', id: 'm987' }] },
    //   { id: 'cc', isHighLevel: false, title: '车次', data: [{ name: '全部', id: '' }, { name: 'SS344', id: 'SS344' }, { name: 'SS345', id: 'SS345' }, { name: 'SS765', id: 'SS765' }, { name: 'SS776', id: 'SS776' }, { name: 'SS676', id: 'SS676' }, { name: 'SS876', id: 'SS876' }, { name: 'SS779', id: 'k779' }, { name: 'SS976', id: 'SS976' },] },
    //   { id: 'sj', isHighLevel: true, title: '司机', data: [{ name: '张三', id: 'zs' }, { name: '李斯', id: "ls" }, { name: '李斯特', id: "lst" }] },
    //   { id: 'lk', isHighLevel: true, title: '路况', data: [{ name: '标示牌', id: 'bsp' }, { name: '信号机', id: "xhj" }, { name: '弯道', id: "wd" }] }
    // ];

    // mockConfigs.forEach(config => {
    //   this.$set(config, 'isShow', true);
    //   config.data.forEach(item => {
    //     this.$set(item, 'isChecked', false);
    //   })
    //   if (config.isHighLevel) {
    //     this.highLevelConfigs.push(config);
    //   } else {
    //     this.$set(config, 'isMultCheck', false);
    //     this.$set(config, 'showMore', false);
    //     this.optionalConfigs.push(config);
    //   }
    // })
    // this.$nextTick(() => {
    //   this.optionalConfigs.forEach(config => {
    //     if (this.$refs[`options${config.id}`][0].scrollHeight > this.fixedOneLineHeight) {
    //       config.showMore = true;
    //       this.$set(config, 'isShowMore', false);
    //     } else {
    //       config.showMore = false;
    //     }
    //   });
    //   console.log(this.optionalConfigs);
    // });
    this.init();
  },
  methods: {
    handleSizeChange(){

    handleTabSizeChange (size) {
      this.tabPageSize = size;
      this.filterSearchData()
    },
    handleCurrentChange(){

    handleTableSizeChange (size) {
      this.tablePageSize = size;
      this.filterSearchData()
    },
    handleCurrentChange () {
      this.filterSearchData()
    },
    //二级查询
    filterSearchData () {
      let _this = this;
      let isFollow = '';
      if(this.IsFollow === ''){
        isFollow = ''
      }else if(!!this.IsFollow){
        isFollow = '1'
      }else{
        isFollow = '0'
      }
      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',
        IsFollow: isFollow
      };
      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',
        IsFollow: this.IsFollow
      };
      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 +420,6 @@
            let obj = {};
            obj.name = key;
            obj.id = config.Node[key]
            // item.id = item;
            // item.name = k;
            return obj
          });
          config.id = config.ID;
@@ -509,29 +446,30 @@
          });
          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 => {
        //二级查询
      });
    },
    submitLabelChecked () {

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

    },
    setGuid (guid) {
      this.videoWrapArr = Math.pow(guid, 2);

    },
    checkVideo (data) {
      this.videoDialogVisible = true;
      this.videoDetails = data;
    checkVideoDetail (data) {
      let _this = this;
      _this.selectedVideo = data;
      _this.videoDialogVisible = true;

    },
    checkFollow () {
@@ -539,12 +477,26 @@
    },
    checkType (type) {
      this.showType = type;
      this.init();
      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 +506,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)
      // })

    },

@@ -597,6 +551,9 @@
<style lang="scss">
.search-for-video-analyze {
  padding: 20px 30px;
  .flex-box{
    display: flex;
  }
  .filter-area {
    .input-area {
      display: flex;
@@ -705,12 +662,12 @@
            padding: 0px 12px;
            border: 1px solid #ccc;
            &:hover {
              color: #6486e7;
              border-color: #6486e7;
              color: #7695ec;
              border-color: #7695ec;
            }
            &.checked {
              color: #3d68e1;
              border-color: #3d68e1;
              color: #409eff;
              border-color: #409eff;
            }
          }
        }
@@ -760,12 +717,15 @@
            padding: 2px 5px;
            cursor: pointer;
            border: 1px solid #eee;
            background-color: #ecf0fc;
            border-radius: 3px;
            color: #777;
            &.menu {
              margin-right: 10px;
            }
            &.current {
              border-color: #3d68e1;
              border-color: #409eff;
              background-color: #fff;
            }
          }
        }
@@ -782,10 +742,12 @@
        text-align: left;
        border: 1px solid #dedede;
        border-radius: 5px;
        height: 350px;
        .video-wrap {
          background: aliceblue;
          border-radius: 3px;
          video {
          img {
            width: 100%;
            border-radius: 3px;
          }
        }
@@ -823,8 +785,9 @@
          font-size: 20px;
          right: 10px;
          bottom: 10px;
          color: #ccc;
          .follow {
            color: #3d68e1;
            color: #409eff;
          }
        }
      }
@@ -840,8 +803,10 @@
      }
    }
    .dialog-video {
      z-index: 2096 !important;
      .el-dialog {
        width: 1180px;
        height: 918px;
      }
      .el-dialog__body {
        background: #f5f5f5;
@@ -849,6 +814,7 @@
      }
      .title-partment {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        line-height: 18px;
        margin-bottom: 8px;
@@ -857,85 +823,12 @@
        background: #fff;
        padding: 10px;
        border-radius: 3px;
        .flex-box > label {
          color: #777;
        }
      }
      .title {
        font-size: 18px;
      }
      .content {
        padding: 15px;
        text-align: left;
        .content-top {
          margin-bottom: 10px;
          .grid-check {
            text-align: right;
            margin-bottom: 6px;
            span {
              font-size: 20px;
              color: #cacaca;
              padding-left: 12px;
              cursor: pointer;
            }
          }
          .video-area {
            display: flex;
            .info-list {
              width: 160px;
              margin-right: 10px;
              .video-name {
                color: #666;
                margin-bottom: 10px;
                &.current {
                  color: #3d68e1;
                }
                i {
                  padding-right: 4px;
                }
              }
            }
            .players {
              width: 960px;
              height: 540px;
              display: flex;
              .video-item {
                flex: 1;
                background: black;
                border: 1px solid #fff;
              }
            }
          }
        }
        .content-bottom {
          display: flex;
          .bot-left {
            flex: 1;
          }
          .bot-right {
            width: 210px;
            margin-left: 10px;
            label {
              color: #999;
              padding-right: 8px;
            }
          }
        }
      }
    }
    .label-dialog {
      .el-dialog {
        width: 700px;
        .label-check {
          min-height: 400px;
          margin-bottom: 20px;
          .el-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            > label {
              width: 50%;
              text-align: left;
              margin: 0;
            }
          }
        }
      }
    }
  }