hyj change shuohuang

heyujie

2021-11-03 a827dbadd7dcc86067cb71d36a62abbf3418a91f

 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue

@@ -1,24 +1,10 @@
<template>
  <div class="tab-task-manage">
    <div class="top">
      <div class="top-left partment">
        <div class="header">
          <div class="title">视频列表</div>
        </div>
      <div class="top-left">
        <div class="header">视频列表</div>
        <div class="body">
          <div class="flex-box">
            <!-- <div>
              <el-date-picker
                v-model="videoSearchTime"
                type="datetimerange"
                size="mini"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              ></el-date-picker>
            </div> -->
          <!-- <div class="flex-box">
            <div>
              <el-input
                class="keyword-input"
@@ -56,8 +42,10 @@
              style="margin-right: 10px"
              >搜索</el-button
            >
            <el-checkbox v-model="notAssignedOnly" @change="renderVideoTable">仅显示未分配</el-checkbox>
          </div>
            <el-checkbox v-model="notAssignedOnly" @change="renderVideoTable"
              >仅显示未分配</el-checkbox
            >
          </div> -->
          <div class="video-list">
            <el-checkbox-group v-model="trainNochecked">
              <el-collapse v-model="actCollapseName">
@@ -66,6 +54,7 @@
                  v-for="(v, vkey, i) in videoPackageList"
                  :key="i"
                >
                  <!-- :style="i%2==1?{background:'#F4F6F9 !important'}:{}" -->
                  <template slot="title">
                    <div>
                      <el-checkbox
@@ -84,31 +73,24 @@
                </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="top-right">
        <div class="header">
          <el-checkbox
            v-model="isAllCheck"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          ></el-checkbox>
          <div class="title">人员列表</div>
          <div class="title">
            <el-checkbox
              v-model="isAllCheck"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
            ></el-checkbox>
            <span class="text">人员列表</span>
          </div>
          <el-input
            size="small"
            size="mini"
            @input="searchName"
            v-model="inputName"
            placeholder="请输入内容"
            placeholder="按人名搜索"
            clearable
          ></el-input>
        </div>
@@ -127,23 +109,23 @@
                <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>
          <el-button type="primary" @click="toAddAssignList" size="small"
            >加入待分配列表</el-button
          >
        </div>
      </div>
    </div>
    <div class="devide"></div>
    <div class="bot">
    <!-- <div class="devide"></div> -->
    <div class="bot-box">
      <div class="header">
        <div class="title">任务列表</div>
        <div class="header-right flex-box">
          <el-radio-group v-model="taskType" size="mini" @change="renderTaskTable">
          <el-radio-group
            v-model="taskType"
            size="mini"
            @change="renderTaskTable"
          >
            <el-radio-button label="1">待分配</el-radio-button>
            <el-radio-button label="2">已分配</el-radio-button>
          </el-radio-group>
@@ -165,15 +147,6 @@
        </div>
      </div>
      <div class="table-area">
        <div class="actions">
          <el-button
            type="primary"
            size="small"
            @click="distributeTask"
            v-if="taskType == 1"
            >分配任务</el-button
          >
        </div>
        <el-table
          class="thbg"
          :data="taskTableData"
@@ -181,6 +154,7 @@
          ref="elTable"
          @selection-change="taskTableSelection"
          v-loading
          :header-cell-style="{ background: '#7786BC', color: '#fff' }"
        >
          <el-table-column
            v-if="taskType == 1"
@@ -211,11 +185,13 @@
                <span
                  @click="cancelDistribute(scope.row)"
                  v-show="taskType == 1"
                  style="color: #eb3131"
                  >取消分配</span
                >
                <span
                  @click="cancelAssign(scope.row)"
                  v-show="taskType == 2"
                  style="color: #eb3131"
                  >取消指派</span
                >
                <!-- <span @click="toggleCollapse(scope.row)">查看/隐藏车次</span> -->
@@ -234,6 +210,15 @@
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="actions">
        <el-button
          type="primary"
          size="small"
          @click="distributeTask"
          v-if="taskType == 1"
          >分配任务</el-button
        >
      </div>
    </div>
    <!-- <el-dialog :visible="orgTreeDialogVisible">
@@ -268,7 +253,8 @@
  addToAssignList,
  getTaskList,
  distributeTask,
  cancelMission,cancelAssign,
  cancelMission,
  cancelAssign,
} from "@/api/shuohuang";
export default {
  data() {
@@ -298,9 +284,9 @@
    this.refreshAll();
  },
  methods: {
    reRenderWhenClear(val){
    reRenderWhenClear(val) {
      if (val.trim() == "") {
        this.renderTaskTable()
        this.renderTaskTable();
      }
    },
    searchName(val) {
@@ -329,7 +315,7 @@
        checkedCount > 0 && checkedCount < this.personList.length;
    },
    cancelDistribute(row) {
      let arr = row.VideoList.map(x => x.ID);
      let arr = row.VideoList.map((x) => x.ID);
      cancelMission({ VideoIDs: arr }).then((res) => {
        if (res.success) {
          this.$notify({
@@ -341,7 +327,7 @@
      });
    },
    cancelAssign(row) {
      let arr = row.VideoList.map(x => x.ID);
      let arr = row.VideoList.map((x) => x.ID);
      cancelAssign({ VideoIDs: arr }).then((res) => {
        if (res.success) {
          this.$notify({
@@ -353,7 +339,7 @@
      });
    },
    searchKeyword() {
      const val = this.keyWordOfTask
      const val = this.keyWordOfTask;
      this.taskTableData = this.taskTableData.filter((item) => {
        const b1 = item.DistributionUser.indexOf(val) > -1;
        const b2 = item.HandlingUsers.indexOf(val) > -1;
@@ -394,6 +380,10 @@
      });
    },
    toAddAssignList() {
      if (this.memberChecked.length == 0 || this.trainNochecked.length == 0) {
        this.$message.warning("请先选择视频和处理人");
        return;
      }
      let _this = this;
      let total = this.trainNochecked.length;
      let people = this.memberChecked.length;
@@ -443,7 +433,7 @@
      let _this = this;
      distributeTask({
        VideoIDs: this.taskVideoChecked,
        distributerID: ""
        distributerID: "",
      }).then((res) => {
        _this.renderTaskTable();
      });
@@ -454,6 +444,8 @@

<style lang="scss">
.tab-task-manage {
  padding: 0 30px;

  .partment {
    border: 1px solid #e8e8e8;
    border-radius: 3px;
@@ -463,22 +455,12 @@
    }
  }
  .header {
    height: 40px;
    .title {
      float: left;
      height: 40px;
      padding-left: 10px;

      line-height: 40px;
      font-size: 14px;
      font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
    }
    .header-right {
      float: right;
    }
  }
  .body {
    padding: 14px 20px 20px;
    // padding: 14px 20px 20px;
  }
  .flex-box {
    align-items: center;
@@ -491,16 +473,49 @@
  }
  .top {
    display: flex;
    padding: 20px;
    margin-bottom: 10px;
    margin-bottom: 20px;
    .top-left {
      flex: 1;
      margin-right: 10px;
      .video-list {
        margin-top: 14px;
      background: #ffffff;
      box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
      border-radius: 10px;
      margin-right: 20px;
      min-width: 946px;
      .header {
        background-color: #7786bc;
        border-top-right-radius: inherit;
        height: 50px;
        border-top-left-radius: inherit;
        padding-left: 25px;
        line-height: 50px;
        font-size: 14px;
        color: #ffffff;
        font-family: Microsoft YaHei;
        text-align: left;
        height: 420px;
    overflow: auto;
      }
      .video-list {
        text-align: left;
        height: 452px;

        overflow: auto;
        .el-collapse:nth-child(odd) {
          background: #f4f6f9;
        }
        .el-collapse-item__header {
          display: flex;
          align-items: center;
          height: 40px;
          line-height: 40px;

          color: #425277;
          cursor: pointer;
          border-bottom: 1px solid #e6ebf5;
          font-size: 13px;
          font-weight: 500;
          transition: border-bottom-color 0.3s;
          outline: none;
          padding-left: 28px;
        }
        //
        .el-checkbox-group {
          margin-bottom: 20px;
          .el-checkbox__label {
@@ -516,22 +531,41 @@
      }
    }
    .top-right {
      width: 360px;
      height: 465px;
      // overflow-y:auto;
      width: 100%;
      background: #ffffff;
      box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
      border-radius: 10px;

      .header {
        height: 50px;
        background: #7786bc;
        border-radius: 10px 10px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
        .title {
          color: #fff;
          .text {
            margin-left: 10px;
            font-size: 14px;
          }
        }
        .el-input {
          line-height: 41px;
          line-height: 40px;
          width: 185px;
          font-size: 14px;
        }
        .el-checkbox {
          float: left;
          padding-left: 20px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
      }
      .el-button {
        padding: 9px 22px;
        font-size: 13px;
        border-radius: 3px;
      }
      .checked-org {
        flex: 1;
@@ -541,20 +575,22 @@
        }
      }
      .person-list {
        padding-top: 14px;

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

          margin-bottom: 8px;
          overflow: auto;
        }
        .person {
          text-align: left;
          margin-bottom: 10px;

          padding-bottom: 6px;
          height: 40px;
          border-bottom: 1px solid #eee;
          display: flex;
          align-items: center;
          padding: 0 25px;
          // color: #425277;
          .el-checkbox__label {
            color: #425277;
          }
        }
      }
    }
@@ -563,11 +599,63 @@
    height: 10px;
    background: #f5f5f5;
  }
  .bot {
    padding: 20px;
  .bot-box {
    height: 450px;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
    opacity: 1;
    border-radius: 10px;
    box-sizing: border-box;
    .header {
      display: flex;
      height: 60px;
      justify-content: space-between;
      align-items: center;
      padding: 0 25px;
      .title {
        color: #757fa2;
        font-size: 14px;
      }
      .el-input-group__append,
      .el-input-group__prepend {
        background-color: #2d52d7;
        color: #fff;
        vertical-align: middle;
        display: table-cell;
        position: relative;
        border: 1px solid #2d52d7;
        border-radius: 4px;
        padding: 0 10px;
        width: 1px;
        white-space: nowrap;
        font-size: 17px;
      }
    }
    .table-area {
      .actions {
        text-align: left;
      display: flex;
      margin: 0 auto;
      padding: 0 25px;
      box-sizing: border-box;
      .el-table.thbg {
        border-radius: 10px 10px 0 0;
      }
      .thbg {
        th {
          height: 40px;
          line-height: 40px;
        }
        .el-table__header th {
          padding: 0;
          height: 50px;
        }
      }
    }
    .actions {
      .el-button--small {
        padding: 9px 38px;
        font-size: 13px;
        border-radius: 3px;
        margin-top: 20px;
      }
    }
  }