hyj change shuohuang

heyujie

2021-11-03 a827dbadd7dcc86067cb71d36a62abbf3418a91f

 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -2,13 +2,8 @@
  <div class="search-for-video-analyze">
    <div class="filter-area">
      <div class="input-area">
        <el-input
          class="search-input"
          size="small"
          v-model="keyword"
          placeholder="请输入司机、车次、机车号等关键词进行搜索"
        ></el-input>
        <el-date-picker
          style="width: 350px"
          v-model="searchTime"
          type="datetimerange"
          size="small"
@@ -18,10 +13,23 @@
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
        <el-button size="small" type="primary" @click="init">搜索</el-button>
        <el-input
          class="search-input"
          size="small"
          v-model="keyword"
          placeholder="请输入司机、车次、机车号等关键词"
          style="width: 315px"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            size="small"
            @click="init"
          ></el-button>
        </el-input>
      </div>
      <div class="checked-config">
        <span style="margin-top: 3px">已选条件:</span>
        <span style="margin-top: 3px; color: #425277">已筛选条件:</span>
        <span
          v-show="!checkedConfigs.length"
          class="tip"
@@ -61,7 +69,10 @@
          :key="index"
        >
          <template v-if="config.isShow">
            <div class="title">{{ config.title }}</div>
            <div class="title">
              <span class="icon iconfont">{{ getIcon(config.title) }}</span>
              <span>{{ config.title }}</span>
            </div>
            <div class="options-wrap">
              <div
                class="options"
@@ -78,6 +89,7 @@
                    <span>{{ option.name }}</span>
                  </div>
                  <div
                    class="option-name"
                    v-show="!config.isMultCheck"
                    @click="checkOption(config, option)"
                  >
@@ -86,14 +98,14 @@
                </div>
              </div>
              <div class="btns text-center" v-show="config.isMultCheck">
                <el-button size="mini" @click="cancleMultCheck(config)"
                  >取消</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="checkOption(config)"
                  >确定</el-button
                >
                <el-button size="mini" @click="cancleMultCheck(config)"
                  >取消</el-button
                >
              </div>
            </div>
@@ -103,12 +115,12 @@
                v-if="config.showMore"
                @click="showMore(config)"
              >
                <span>更多</span>&nbsp;
                <span>更多</span>
                <i
                  :class="
                    config.isShowMore
                      ? 'el-icon-arrow-up'
                      : 'el-icon-arrow-down'
                      ? 'el-icon-caret-top'
                      : 'el-icon-caret-bottom'
                  "
                ></i>
              </div>
@@ -123,7 +135,10 @@
          </template>
        </div>
        <div class="config" v-if="showAdvance">
          <div class="title">高级选项</div>
          <div class="title">
            <span class="icon iconfont">{{ "\ue793" }}</span>
            <span>高级选项</span>
          </div>
          <div>
            <el-menu
              class="el-menu-demo"
@@ -597,8 +612,8 @@
    //一级查询
    init() {
      if (this.checkedConfigs.length) {
        this.filterSearchData()
        return
        this.filterSearchData();
        return;
      }
      let _this = this;
      let query = {
@@ -745,6 +760,25 @@
        opt.isChecked = false;
      });
    },
    getIcon(name) {
      switch (name) {
        case "机车号":
          return "\ue796";
        case "车次":
          return "\ue795";
        case "区段/中间站":
          return "\ue797";
        case "重点地段":
          return "\ue78f";
        case "单位":
          return "\ue794";
        case "高级选项":
          return "\ue793";

        default:
          break;
      }
    },
    handleSelect(key, keyPath) {},
    showMore(config) {
      config.isShowMore = !config.isShowMore;
@@ -844,7 +878,9 @@
<style lang="scss">
.search-for-video-analyze {
  //出横向滚动条
  padding: 20px 40px;
  padding: 25px 33px;
  background-color: #fff;
  margin: 33px;
  .flex-box {
    display: flex;
  }
@@ -853,11 +889,34 @@
      display: flex;
      align-items: center;
      height: 50px;

      .el-range-editor--small .el-range-input {
        font-size: 13px;
        color: #7084b1;
      }
      .el-input__inner::placeholder {
        color: #c7d0e5;
      }
      .el-range-editor--small .el-range-separator {
        line-height: 25px;
        font-size: 13px;
        color: #7084b1;
      }
      .search-input {
        width: 408px;
      }
      .el-date-editor {
        margin: 0 20px;
        margin-right: 20px;
      }
      .el-input-group__append,
      .el-input-group__prepend {
        background-color: #2d52d7;
        color: #fff;
        border: 1px solid #2d52d7;
        padding: 0 16px;

        white-space: nowrap;
        font-size: 18px;
      }
    }
    .checked-config {
@@ -866,18 +925,18 @@
      margin-bottom: 10px;
      position: relative;
      .config-item {
        padding-left: 10px;
        margin: 0 0 5px 5px;
        background: #f3f3f3;
        border: 1px solid #ddd;
        padding-left: 8px;
        margin: 0 5px;
        background: #cfd5e3;
        .remove {
          cursor: pointer;
          padding: 5px 5px;
          margin-left: 5px;
          background: #e1e4ed;
        }
        &:hover {
          background: #fff;
          border-color: #3d68e1;
          outline: 1px solid #2d52d7;
          .remove {
            background: #3d68e1;
            color: #fff;
@@ -901,14 +960,19 @@
        display: flex;
        flex-wrap: no-wrap;
        cursor: pointer;
        border-bottom: 1px solid #ddd;
        border-bottom: 1px solid #d7dce8;

        .title {
          padding: 10px 20px;
          width: 100px;
          width: 110px;
          text-align: left;
          background: #f3f3f3;
          color: rgb(133, 133, 133);
          background: #ecf0fc;
          color: #2d52d7;
          font-weight: bold;
          font-size: 14px;
          .icon {
            font-size: 14px;
            margin-right: 10px;
          }
        }
        .options-wrap {
          flex: 1;
@@ -921,8 +985,15 @@
              padding: 10px 20px;
              height: 20px;
              line-height: 20px;
              &:hover {
                color: #6486e7;
              .option-name {
                padding: 0 8px;
                color: rgba(66, 82, 119, 1);
              }
              &:hover > .option-name {
                outline: 1px solid #a8b7ee;
                padding: 0 8px;
                background: #e2e7f9;
                color: #2d52d7;
              }
              .el-checkbox {
                padding-right: 6px;
@@ -930,7 +1001,15 @@
            }
          }
          .btns {
            margin: 20px 0;
            margin: 12px 0;
            .el-button--mini {
    padding: 6px
 17px
;
    font-size: 12px;
    border-radius: 4px
;
}
          }
        }
        .right-btns {
@@ -939,34 +1018,36 @@
          user-select: none;
          justify-content: flex-end;
          .more {
            margin-top: 6px;
            margin-top: 7px;
            padding: 0px 6px;
            border: 1px solid #ccc;

            margin-right: 10px;
            width: 44px;
            height: 26px;
            line-height: 26px;
            width: 46px;
            height: 25px;
            line-height: 25px;
            border-radius: 2px;
            background: #edeff2;
            &:hover {
              color: #6486e7;
            }
          }
          .multCheck {
            margin-top: 6px;
            margin-top: 7px;
            width: 44px;
            height: 26px;
            line-height: 26px;
            padding: 0px 6px;
            border: 1px solid #ccc;
            height: 23px;
            line-height: 23px;
            padding: 0px 12px;
            border: 1px solid #d7dce7;
            border-radius: 2px;
            &:hover {
              color: #7695ec;
              border-color: #7695ec;
            }
            &.checked {
              color: #409eff;
              border-color: #409eff;
            }
            color: #ee4e6e;
            // &:hover {
            //   color: #7695ec;
            //   border-color: #7695ec;
            // }
            // &.checked {
            //   color: #409eff;
            //   border-color: #409eff;
            // }
          }
        }
        .el-menu.el-menu--horizontal {