src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -117,17 +117,17 @@
      <div class="header-bar clearfix">
        <div class="left">
          <div>
            <el-select v-model="watch" size="mini">
            <el-select v-model="IsFollow" size="mini" @change="filterSearchData">
              <el-option value label="全部"></el-option>
              <el-option value="1" label="未关注"></el-option>
              <el-option value="2" 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="IsOperate" size="mini" @change="filterSearchData">
              <el-option value label="全部"></el-option>
              <el-option value="1" label="未处理"></el-option>
              <el-option value="2" label="已处理"></el-option>
              <el-option value="0" label="未处理"></el-option>
              <el-option value="1" label="已处理"></el-option>
            </el-select>
          </div>
        </div>
@@ -187,6 +187,7 @@
          </el-col>
        </el-row>
        <el-pagination
          class="pagination-center"
          background
          @size-change="handleTabSizeChange"
          @current-change="handleCurrentChange"
@@ -216,6 +217,7 @@
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination-center"
          @size-change="handleTableSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="curTablePage"
@@ -236,7 +238,6 @@
            <span>播放视频</span>
          </div>
        </div>
        <video-analyze :videoDetails="selectedVideo" />
      </el-dialog>
    </div>
@@ -252,11 +253,13 @@
  components: {
    VideoAnalyze
  },
  data () {
  data() {
    return {
      CLIP: 'http://192.168.20.113/',
      CLIP: 'http://',
      keyword: '',
      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")],
      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")],
      searchTime: [new Date(2020,0,1,0,0,0),new Date(2020,11,31,23,59,59)],
      curTabPage: 1,
      curTablePage: 1,
      tabPageSize: 8,
@@ -268,7 +271,7 @@
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0);
@@ -276,7 +279,7 @@
          }
        }, {
          text: '昨天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
@@ -287,7 +290,7 @@
          }
        }, {
          text: '近三天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
@@ -295,7 +298,7 @@
          }
        }, {
          text: '近一周',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -309,8 +312,8 @@
      highLevelConfigs: [],
      showAdvance: true,
      fixedOneLineHeight: 40,
      watch: '',
      settle: '',
      IsOperate: '',
      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' },
@@ -320,7 +323,6 @@
        { 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,
      hiddenDanger: 1,
      labelDialogVisible: false,
@@ -329,38 +331,47 @@
  },
  watch: {
    checkedConfigs: {
      handler (n, o) {
      handler(n, o) {
        this.filterSearchData()
      },
      deep: true
    }
  },
  mounted () {
  mounted() {
    this.init();
  },
  methods: {
    handleTabSizeChange (size) {
      debugger
    handleTabSizeChange(size) {
      this.tabPageSize = size;
      this.filterSearchData()
    },
    handleTableSizeChange (size) {
    handleTableSizeChange(size) {
      this.tablePageSize = size;
      this.filterSearchData()
    },
    handleCurrentChange () {
    handleCurrentChange() {
      this.filterSearchData()
    },
    //二级查询
    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',
        PageIndex: this.showType == 'list' ? this.curTablePage : this.curTabPage,
        PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
        IsDetail: this.showType == 'list'
        IsDetail: this.showType == 'list',
        IsFollow: isFollow,
        IsOperate: this.IsOperate
      };
      let filterQuerys = [];
      this.checkedConfigs.forEach(config => {
@@ -386,7 +397,7 @@
      })
    },
    //一级查询
    init () {
    init() {
      let _this = this;
      let query = {
        KeyWord: this.keyword,
@@ -394,7 +405,9 @@
        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'
        IsDetail: this.showType == 'list',
        IsFollow: this.IsFollow,
        IsOperate: this.IsOperate,
      };
      this.optionalConfigs = [];
      this.highLevelConfigs = [];
@@ -415,6 +428,12 @@
            obj.id = config.Node[key]
            return obj
          });
          // config.data = config.Node.map((item) => {
          //   let obj = {};
          //   obj.name = item[0];
          //   obj.id = item[1];
          //   return obj;
          // });
          config.id = config.ID;
          config.title = config.NameZn;
          config.data.forEach(item => {
@@ -442,7 +461,7 @@
      })
    },
    toggleFollow (data) {
    toggleFollow(data) {
      data.IsFollow = !data.IsFollow;
      this.updataVideo(data);
      if (data.IsFollow) {
@@ -452,26 +471,27 @@
        });
      }
    },
    updataVideo (data) {
    updataVideo(data) {
      let _this = this;
      updateVideoAnalyze(data).then(res => {
        //二级查询
      });
    },
    checkVideoDetail (data) {
    checkVideoDetail(data) {
      let _this = this;
      _this.selectedVideo = data;
      _this.videoDialogVisible = true;
    },
    checkFollow () {
    },
    checkType (type) {
    checkFollow() {
    },
    checkType(type) {
      this.showType = type;
      this.filterSearchData()
    },
    clearCheckedConfigs () {
    clearCheckedConfigs() {
      this.checkedConfigs.forEach(config => {
        config.isShow = true;
        config.data.forEach(d => {
@@ -481,7 +501,7 @@
      this.checkedConfigs = [];
      this.showAdvance = true;
    },
    removeCheckedConfig (config) {
    removeCheckedConfig(config) {
      config.isShow = true;
      if (config.IsAdvanced) {
        this.showAdvance = true;
@@ -492,7 +512,7 @@
      let index = this.checkedConfigs.findIndex(one => one.id == config.id);
      this.checkedConfigs.splice(index, 1);
    },
    checkOption (config, option) {
    checkOption(config, option) {
      if (option) {
        option.isChecked = true;
      }
@@ -509,20 +529,20 @@
    },
    cancleMultCheck (config) {
    cancleMultCheck(config) {
      config.isMultCheck = false;
      config.data.forEach(opt => {
        opt.isChecked = false;
      });
    },
    handleSelect (key, keyPath) {
    handleSelect(key, keyPath) {
    },
    showMore (config) {
    showMore(config) {
      config.isShowMore = !config.isShowMore;
      this.$refs[`options${config.id}`][0].style.height = config.isShowMore ? this.$refs[`options${config.id}`][0].scrollHeight + 'px' : this.fixedOneLineHeight + 'px';
    },
    toggleMultCheck (config) {
    toggleMultCheck(config) {
      config.isMultCheck = !config.isMultCheck;
      this.optionalConfigs.forEach(conf => {
        if (conf.id == config.id) {
@@ -531,7 +551,7 @@
        conf.isMultCheck = false;
      })
    },
    dataSearch () {
    dataSearch() {
      console.log(this.checkedConfigs);
      this.$forceUpdate();
    },
@@ -543,6 +563,9 @@
<style lang="scss">
.search-for-video-analyze {
  padding: 20px 30px;
  .flex-box {
    display: flex;
  }
  .filter-area {
    .input-area {
      display: flex;
@@ -733,11 +756,20 @@
        border-radius: 5px;
        height: 350px;
        .video-wrap {
          background: aliceblue;
          border-radius: 3px;
          width: 100%;
          padding-top: 56.25%;
          height: 0;
          position: relative;
          img {
            position: absolute;
            top: 0;
            width: 100%;
            border-radius: 3px;
            height: 100%;
            object-fit: contain;
            // width: 100%;
            // max-height: 200px;
            // border-radius: 3px;
          }
        }
        .video-info {
@@ -790,6 +822,10 @@
          cursor: pointer;
        }
      }
      .pagination-center{
        text-align: center;
        margin: 10px auto;
      }
    }
    .dialog-video {
      z-index: 2096 !important;