echart里程标

heyujie

2021-03-16 03fbaa3ebea4cd30ad798a4ec5c27dbb2c2daf86

 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue

@@ -7,7 +7,7 @@
        </div>
        <div class="body">
          <div class="flex-box">
            <div>
            <!-- <div>
              <el-date-picker
                v-model="videoSearchTime"
                type="datetimerange"
@@ -18,28 +18,49 @@
                end-placeholder="结束日期"
                align="right"
              ></el-date-picker>
            </div> -->
            <div>
              <el-input
                class="keyword-input"
                v-model="keyword1"
                placeholder="请输入机车号"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
              ></el-input>
            </div>
            <div>
              <el-input
                class="keyword-input"
                v-model="videoListSearchWord"
                placeholder="请输入机车号，多个用','分隔"
                size="mini"
                v-model="keyword2"
                placeholder="请输入车次"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
              ></el-input>
            </div>
            <div></div>
            <div>
              <el-input
                class="keyword-input"
                v-model="keyword3"
                placeholder="请输入司机姓名"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
              ></el-input>
            </div>
            <el-button
              type="primary"
              @click="renderVideoTable"
              size="mini"
              size="small"
              style="margin-right:10px;"
            >搜索</el-button>
            <!-- <el-checkbox v-model="isShowUndistributedOnly">仅显示未分配</el-checkbox> -->
            <el-checkbox v-model="notAssignedOnly">仅显示未分配</el-checkbox>
          </div>
          <div class="video-list">
            <el-checkbox-group v-model="trainNochecked">
              <el-collapse v-model="actCollapseName">
              <!-- <el-collapse v-model="actCollapseName">
                <el-collapse-item
                  :name="trainNo.no"
                  v-for="trainNo in trainNoList"
@@ -59,9 +80,9 @@
                    <span style="padding-left: 10px;">{{video.VideoName}}</span>
                  </div>
                </el-collapse-item>
              </el-collapse>
              </el-collapse> -->
            </el-checkbox-group>
            <el-pagination
            <!-- <el-pagination
              @size-change="handleTrainNoSizeChange"
              @current-change="handleTrainNoCurChange"
              :current-page.sync="trainNoCurPage"
@@ -69,22 +90,24 @@
              :page-sizes="trainNoPageSizes"
              layout="total,sizes, prev, pager, next"
              :total="trainNoTotal"
            ></el-pagination>
            ></el-pagination> -->
          </div>
        </div>
      </div>
      <div class="top-right partment">
        <div class="header">
         <el-checkbox v-model="isAllCheck" :indeterminate="isIndeterminate"  @change="handleCheckAllChange"></el-checkbox>
          <div class="title">人员列表</div>
          <el-input size="small" @input="searchName" v-model="inputName" placeholder="请输入内容" clearable="true"></el-input>
        </div>
        <div class="body">
          <div class="flex-box">
          <!-- <div class="flex-box">
            <label>部门:</label>
            <span class="checked-org" :class="{'null':!checkedOrg.id}">{{checkedOrg.label||'全部'}}</span>
            <el-button type="primary" size="mini" @click="selOrg">选择部门</el-button>
          </div>
          </div> -->
          <div class="person-list">
            <el-checkbox-group v-model="memberChecked" :max="1">
            <el-checkbox-group v-model="memberChecked" @change="handleCheckedCitiesChange">
              <div class="person" v-for="person in personList" :key="person.ID">
                <el-checkbox :label="person.ID">{{person.Name}}</el-checkbox>
              </div>
@@ -187,13 +210,14 @@
</template>

<script>
import { getOrganizeTree, getMemberByOrg, getVideoListByTrainNumber, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
import { getOrganizeTree, getMemberByOrg, getVideoListBySearch, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
export default {
  data () {
    return {
      isAllCheck:false,
      taskType: '1',
      keyWordOfTask: '',
      videoSearchTime: [],
      // videoSearchTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
@@ -228,11 +252,13 @@
      isShowUndistributedOnly: false,
      trainNoList: [],
      trainNochecked: [],
      trainNoCurPage: 1,
      trainNoPageSize: 8,
      trainNoPageSizes: [5, 8, 12],
      // trainNoCurPage: 1,
      // trainNoPageSize: 8,
      // trainNoPageSizes: [5, 8, 12],
      trainNoTotal: 0,
      videoListSearchWord: '',
      keyword1: '',
      keyword2: '',
      keyword3: '',
      actCollapseName: '',
      checkedOrg: {},
      orgTreeDialogVisible: false,
@@ -241,6 +267,9 @@
      memberChecked: [],
      taskTableData: [],
      taskVideoChecked: [],
      notAssignedOnly: false,
      isIndeterminate:false,
      inputName:""
    }
  },
  mounted () {
@@ -249,11 +278,35 @@
  },
  watch: {
    taskType (n, o) {
      // debugger
      this.renderTaskTable();
    }
  },
  methods: {
    searchName(val){
      console.log(this.personList ,val);
      if (val=="") {
        this.searchMemberByOrg()
      }
      if (val.trim()=="") {
        return 
      }
      this.personList = this.personList.filter(item=>{
        return item.Name.indexOf(val)>-1
      })
    },
    handleCheckAllChange(val) {
      let arr =[]
      this.personList.forEach(item=>{
        arr.push(item.ID)
      })
        this.memberChecked = val ? arr : [];
        this.isIndeterminate = false;
      },
       handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.isAllCheck = checkedCount === this.personList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.personList.length;
      },
    cancelDistribute (row) {
      cancelMission({ UniqeID: row.LKGList[0].UniqeID }).then(res => {
        if (res.success) {
@@ -286,35 +339,34 @@
        _this.taskTableData = res.data
      })
    },
    handleTrainNoSizeChange (size) {
      this.trainNoPageSize = size;
      this.renderVideoTable();
    },
    // handleTrainNoSizeChange (size) {
    //   this.trainNoPageSize = size;
    //   this.renderVideoTable();
    // },
    handleTrainNoCurChange () {
      this.renderVideoTable();
    },
    renderVideoTable () {
      let _this = this;
      let params = {
        KeyWord: this.videoListSearchWord,
        StartDate: this.videoSearchTime[0],
        EndDate: this.videoSearchTime[1],
        PageIndex: this.trainNoCurPage,
        PageSize: this.trainNoPageSize,
        Status: 0,
        IsNeed: 0
        CarNumber: this.keyword1,
        TrainNumber: this.keyword2,
        DriverName: this.keyword3,
        // PageIndex: this.trainNoCurPage,
        // PageSize: this.trainNoPageSize,
        notAssignedOnly: this.notAssignedOnly,
      };
      getVideoListByTrainNumber(params).then(res => {
        let arr = [];
        for (var key in res.data) {
          let obj = {};
          obj['no'] = key;
          obj['videos'] = res.data[key];
          obj.checked = false;
          arr.push(obj);
        }
      getVideoListBySearch(params).then(res => {
        // let arr = [];
        // for (var key in res.data) {
        //   let obj = {};
        //   obj['no'] = key;
        //   obj['videos'] = res.data[key];
        //   obj.checked = false;
        //   arr.push(obj);
        // }
        // debugger
        _this.trainNoList = arr;
        _this.trainNoList = res;
        _this.trainNoTotal = res.total;
      });
    },
@@ -336,9 +388,9 @@
    },
    searchMemberByOrg () {
      let _this = this;
      getMemberByOrg({ DeptID: this.checkedOrg.id || '' }).then(res => {
      getMemberByOrg({}).then(res => {
        _this.personList = res.data;
        _this.orgTreeDialogVisible = false;
        // _this.orgTreeDialogVisible = false;
      })
    },
    deepNodeChildren (node) {
@@ -393,9 +445,9 @@
      })
    },

    selOrg () {
      this.orgTreeDialogVisible = true;
    },
    // selOrg () {
    //   this.orgTreeDialogVisible = true;
    // },
  }
}
</script>
@@ -464,7 +516,20 @@
      width: 360px;
      height: 465px;
      // overflow-y:auto;

      .header{
        .el-input{
              line-height: 41px;
            width: 185px;
            font-size: 14px;
        }
        .el-checkbox{
          float: left;
          padding-left: 20px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;  
        }
      }
      .checked-org {
        flex: 1;
        text-align: left;
@@ -476,7 +541,8 @@
        padding-top: 14px;

        .el-checkbox-group{
                height: 316px;
          height: 330px;

        margin-bottom: 8px;
        overflow: auto;
        }