育英项目以图搜图修改

heyujie

2021-03-24 c141197a5687dda0256cb8939f73aada040c9ba9

 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,57 +18,106 @@
                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="searchVideoList"
              size="mini"
              @click="renderVideoTable"
              size="small"
              style="margin-right:10px;"
            >搜索</el-button>
            <el-checkbox v-model="isShowUndistributedOnly">仅显示未分配</el-checkbox>
            <!-- <el-checkbox v-model="isShowUndistributedOnly">仅显示未分配</el-checkbox> -->
            <el-checkbox v-model="notAssignedOnly">仅显示未分配</el-checkbox>
          </div>
          <div class="video-list">
            <el-collapse v-model="actCollapseName">
              <el-collapse-item :name="trainNo.id" v-for="trainNo in trainNoList" :key="trainNo.id">
                <template slot="title">
                  <div>
                    <el-checkbox v-model="trainNo.checked" style="padding-right:10px;"></el-checkbox>
                    <span>{{trainNo.no}}({{trainNo.videos.length}})</span>
            <el-checkbox-group v-model="trainNochecked">
              <el-collapse v-model="actCollapseName">
                <el-collapse-item
                  :name="vkey"
                  v-for="(v,vkey,i) in videoPackageList"
                  :key="i"
                >
                  <template slot="title">
                    <div>
                      <el-checkbox
                        :label="i"
                        style="padding-right:10px;"
                      ></el-checkbox>
                      <span>{{vkey}}({{v.length}})</span>
                    </div>
                  </template>
                  <div class="video-detail" v-for="video in v" :key="video.ID">
                    <i class="el-icon-film" style="margin-left: 20px;"></i>
                    <span style="padding-left: 10px;">{{video.VideoName}}</span>
                  </div>
                </template>
                <div v-for="video in trainNo.videos" :key="video.id">
                  <i class="el-icon-film" style="margin-left: 20px;"></i>
                  <span style="padding-left: 10px;">{{video.name}}</span>
                </div>
              </el-collapse-item>
            </el-collapse>
                </el-collapse-item>
              </el-collapse>
            </el-checkbox-group>
            <!-- <el-pagination
              @size-change="handleTrainNoSizeChange"
              @current-change="handleTrainNoCurChange"
              :current-page.sync="trainNoCurPage"
              :page-size="trainNoPageSize"
              :page-sizes="trainNoPageSizes"
              layout="total,sizes, prev, pager, next"
              :total="trainNoTotal"
            ></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">
            <div class="person" v-for="person in personList" :key="person.id">
              <el-checkbox v-model="person.personChecked">{{person.name}}</el-checkbox>
            </div>
            <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>
            </el-checkbox-group>
            <el-button
              v-show="memberChecked.length && trainNochecked.length"
              type="primary"
              @click="toAddAssignList"
              size="small"
            >加入待分配列表</el-button>
          </div>
        </div>
      </div>
@@ -89,35 +138,52 @@
            size="mini"
            style="margin-left: 10px;"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchTask"></el-button>
            <el-button slot="append" icon="el-icon-search" @click="renderTaskTable"></el-button>
          </el-input>
        </div>
      </div>
      <div class="body table-area">
      <div class="table-area">
        <div class="actions">
          <el-button type="primary" size="small" @click="distributeTask">分配任务</el-button>
          <el-button
            type="primary"
            size="small"
            @click="distributeTask"
            v-if="taskType==1&&taskVideoChecked.length"
          >分配任务</el-button>
        </div>
        <el-table class="thbg" :data="taskTableData" ref="elTable">
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="video-item" v-for="video in props.videos" :key="video.id">{{video.name}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="trainNo" label="机车号"></el-table-column>
        <el-table
          class="thbg"
          :data="taskTableData"
          ref="elTable"
          @selection-change="taskTableSelection"
          v-loading
        >
          <el-table-column v-if="taskType==1" type="selection" width="55"></el-table-column>
          <el-table-column prop="LocomotiveNumber" label="机车号"></el-table-column>
          <el-table-column label="视频数量">
            <template slot-scope="scope">
              <div>{{scope.row.videos.length}}</div>
              <div>{{scope.row.LKGList.length}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="person" label="分配人"></el-table-column>
          <el-table-column prop="time" label="分配时间"></el-table-column>
          <el-table-column prop="handle" label="处理人"></el-table-column>
          <el-table-column prop="DistributionUser" label="分配人"></el-table-column>
          <el-table-column prop="DistributionDate" label="分配时间"></el-table-column>
          <el-table-column prop="HandlingUsers" label="处理人"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation">
                <span @click="cancelDistribute(scope.row)">取消分配/指派</span>
                <span @click="toggleCollapse(scope.row)">查看/隐藏车次</span>
                <span @click="cancelDistribute(scope.row)" v-show="taskType==1">取消分配</span>
                <span @click="cancelDistribute(scope.row)" v-show="taskType==2">取消指派</span>
                <!-- <span @click="toggleCollapse(scope.row)">查看/隐藏车次</span> -->
              </div>
            </template>
          </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div
                class="video-item"
                v-for="video in scope.row.LKGList"
                :key="video.ID"
              >{{video.VideoName}}</div>
            </template>
          </el-table-column>
        </el-table>
@@ -144,13 +210,14 @@
</template>

<script>
import { getOrganizeTree } 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: '今天',
@@ -183,30 +250,139 @@
        }]
      },
      isShowUndistributedOnly: false,
      trainNoList: [
        { no: 'SS4B115', id: 'SS4B115', videos: [{ id: 'SS4B115', name: 'SS4B115_06_B节二端司机室_20201115_091500.mp4' }, { id: 'SS4B116', name: 'SS4B116_06_B节二端司机室_20201115_091500.mp4' }] },
        { no: 'SS5B115', id: 'SS5B115', videos: [{ id: 'SS5B116', name: 'SS5B116_06_B节二端司机室_20201115_091500.mp4' }] }
      ],
      videoListSearchWord: '',
      videoPackageList: {},
      trainNochecked: [],
      // trainNoCurPage: 1,
      // trainNoPageSize: 8,
      // trainNoPageSizes: [5, 8, 12],
      trainNoTotal: 0,
      keyword1: '',
      keyword2: '',
      keyword3: '',
      actCollapseName: '',
      checkedOrg: {},
      orgTreeDialogVisible: false,
      organizeData: [],

      personList: [
        { name: '张三', id: 'zs' },
        { name: '李斯', id: 'ls' }
      ],
      personList: [],
      memberChecked: [],
      taskTableData: [],
      taskVideoChecked: [],
      notAssignedOnly: false,
      isIndeterminate:false,
      inputName:""
    }
  },
  mounted () {
    this.getOrganizeTreeData();
    this.refreshAll();
  },
  watch: {
    taskType (n, o) {
      this.renderTaskTable();
    }
  },
  methods: {
    searchMemberByOrg(){
      debugger
      
    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) {
          this.$notify({
            type: 'success',
            message: res.msg
          });
          this.refreshAll();
        }
      })
    },
    refreshAll () {
      this.trainNochecked = [];
      this.checkedOrg = {};
      this.memberChecked = [];
      this.searchMemberByOrg();
      this.renderVideoTable();
      this.renderTaskTable();
    },
    taskTableSelection (val) {
      this.taskVideoChecked = val
    },
    renderTaskTable () {
      let _this = this;
      let params = {
        IsPackage: 0,
        Status: this.taskType
      };
      getTaskList(params).then(res => {
        _this.taskTableData = res.data
      })
    },
    // handleTrainNoSizeChange (size) {
    //   this.trainNoPageSize = size;
    //   this.renderVideoTable();
    // },
    handleTrainNoCurChange () {
      this.renderVideoTable();
    },
    renderVideoTable () {
      let _this = this;
      let params = {
        CarNumber: this.keyword1,
        TrainNumber: this.keyword2,
        DriverName: this.keyword3,
        // PageIndex: this.trainNoCurPage,
        // PageSize: this.trainNoPageSize,
        notAssignedOnly: this.notAssignedOnly,
      };
      getVideoListBySearch(params).then(res => {
        _this.videoPackageList = res.data
        _this.trainNoTotal = res.total;
      });
    },
    toAddAssignList () {
      let _this = this;
      let params = {
        UserID: this.memberChecked[0],
        UniqeID: this.trainNochecked.join(',')
      };
      addToAssignList(params).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
          });
          _this.refreshAll();
        }
      })
    },
    searchMemberByOrg () {
      let _this = this;
      getMemberByOrg({}).then(res => {
        _this.personList = res.data;
        // _this.orgTreeDialogVisible = false;
      })
    },
    deepNodeChildren (node) {
      if (node.ChildDept && node.ChildDept.length > 0) {
@@ -250,17 +426,19 @@
      })
    },
    distributeTask () {

      let _this = this;
      let arr = this.taskVideoChecked.map(train => train['LKGList'][0]['UniqeID'])
      let params = {
        UniqeID: arr.join(',')
      }
      distributeTask(params).then(res => {
        _this.renderTaskTable();
      })
    },
    searchVideoList () {

    },
    selOrg () {
      this.orgTreeDialogVisible = true;
    },
    searchTask () {

    }
    // selOrg () {
    //   this.orgTreeDialogVisible = true;
    // },
  }
}
</script>
@@ -311,10 +489,38 @@
      .video-list {
        margin-top: 14px;
        text-align: left;
        .el-checkbox-group {
          margin-bottom: 20px;
          .el-checkbox__label{
            display: none;
          }
          .video-detail {
            i {
              //color: #409EFF;
            }
            color: #888;
          }
        }
      }
    }
    .top-right {
      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;
@@ -324,9 +530,17 @@
      }
      .person-list {
        padding-top: 14px;

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

        margin-bottom: 8px;
        overflow: auto;
        }
        .person {
          text-align: left;
          margin-bottom: 10px;
          
          padding-bottom: 6px;
          border-bottom: 1px solid #eee;
        }