问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue

@@ -1,32 +1,18 @@
<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"
                v-model="keyword1"
                placeholder="请输入机车号"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <div>
@@ -35,8 +21,8 @@
                v-model="keyword2"
                placeholder="请输入车次"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <div>
@@ -45,60 +31,68 @@
                v-model="keyword3"
                placeholder="请输入司机姓名"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <el-button
              type="primary"
              @click="renderVideoTable"
              size="small"
              style="margin-right:10px;"
            >搜索</el-button>
            <!-- <el-checkbox v-model="isShowUndistributedOnly">仅显示未分配</el-checkbox> -->
            <el-checkbox v-model="notAssignedOnly">仅显示未分配</el-checkbox>
          </div>
              style="margin-right: 10px"
              >搜索</el-button
            >
            <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">
              <el-collapse v-model="actCollapseName">
                <el-collapse-item
                  :name="trainNo.no"
                  v-for="trainNo in trainNoList"
                  :key="trainNo.id"
                  :name="vkey"
                  v-for="(v, vkey, i) in videoPackageList"
                  :key="i"
                >
                  <!-- :style="i%2==1?{background:'#F4F6F9 !important'}:{}" -->
                  <template slot="title">
                    <div>
                      <el-checkbox
                        :label="trainNo.videos[0]['UniqeID']"
                        style="padding-right:10px;"
                        :label="vkey"
                        style="padding-right: 10px"
                      ></el-checkbox>
                      <span>{{trainNo.no}}({{trainNo.videos.length}})</span>
                      <span>{{ vkey }}({{ v.length }})</span>
                    </div>
                  </template>
                  <div class="video-detail" 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.VideoName}}</span>
                  <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>
                </el-collapse-item>
              </el-collapse> -->
              </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>
          <el-input size="small" @input="searchName" v-model="inputName" placeholder="请输入内容" clearable="true"></el-input>
          <div class="title">
            <el-checkbox
              v-model="isAllCheck"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
            ></el-checkbox>
            <span class="text">人员列表</span>
          </div>
          <el-input
            size="mini"
            @input="searchName"
            v-model="inputName"
            placeholder="按人名搜索"
            clearable
          ></el-input>
        </div>
        <div class="body">
          <!-- <div class="flex-box">
@@ -107,72 +101,99 @@
            <el-button type="primary" size="mini" @click="selOrg">选择部门</el-button>
          </div> -->
          <div class="person-list">
            <el-checkbox-group v-model="memberChecked" @change="handleCheckedCitiesChange">
            <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>
                <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">
          <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>
          <el-input
            class="keyword-input"
            placeholder="请输入"
            placeholder="搜索关键字"
            v-model="keyWordOfTask"
            size="mini"
            style="margin-left: 10px;"
            style="margin-left: 10px"
            @input="reRenderWhenClear"
            clearable
          >
            <el-button slot="append" icon="el-icon-search" @click="renderTaskTable"></el-button>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchKeyword"
            ></el-button>
          </el-input>
        </div>
      </div>
      <div class="table-area">
        <div class="actions">
          <el-button
            type="primary"
            size="small"
            @click="distributeTask"
            v-if="taskType==1&&taskVideoChecked.length"
          >分配任务</el-button>
        </div>
        <el-table
          class="thbg"
          :data="taskTableData"
          v-if="taskTableData"
          ref="elTable"
          @selection-change="taskTableSelection"
          v-loading
          :header-cell-style="{ background: '#7786BC', color: '#fff' }"
        >
          <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
            v-if="taskType == 1"
            type="selection"
            width="55"
          ></el-table-column>
          <el-table-column prop="Title" label="机车号"></el-table-column>
          <el-table-column label="视频数量">
            <template slot-scope="scope">
              <div>{{scope.row.LKGList.length}}</div>
              <div>{{ scope.row.VideoList.length }}</div>
            </template>
          </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
            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)" v-show="taskType==1">取消分配</span>
                <span @click="cancelDistribute(scope.row)" v-show="taskType==2">取消指派</span>
                <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> -->
              </div>
            </template>
@@ -181,15 +202,26 @@
            <template slot-scope="scope">
              <div
                class="video-item"
                v-for="video in scope.row.LKGList"
                v-for="video in scope.row.VideoList"
                :key="video.ID"
              >{{video.VideoName}}</div>
              >
                {{ video.VideoName }}
              </div>
            </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">
    <!-- <el-dialog :visible="orgTreeDialogVisible">
      <div>
        <el-tree
          :data="organizeData"
@@ -201,124 +233,121 @@
          :highlight-current="true"
        ></el-tree>
        <div slot="footer" class="btns">
          <el-button size="small" @click="orgTreeDialogVisible=false">取消</el-button>
          <el-button size="small" type="primary" @click="searchMemberByOrg">确定</el-button>
          <el-button size="small" @click="orgTreeDialogVisible = false"
            >取消</el-button
          >
          <el-button size="small" type="primary" @click="searchMemberByOrg"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
    </el-dialog> -->
  </div>
</template>

<script>
import { getOrganizeTree, getMemberByOrg, getVideoListBySearch, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
import {
  getOrganizeTree,
  getMemberByOrg,
  getVideoListBySearch,
  addToAssignList,
  getTaskList,
  distributeTask,
  cancelMission,
  cancelAssign,
} from "@/api/shuohuang";
export default {
  data () {
  data() {
    return {
      isAllCheck:false,
      taskType: '1',
      keyWordOfTask: '',
      // videoSearchTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            start.setHours(0, 0, 0);
            end.setTime(end.getTime() - 3600 * 1000 * 24);
            end.setHours(23, 59, 59);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            //start.setHours(0,0,0);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      isAllCheck: false,
      taskType: "1",
      keyWordOfTask: "",
      isShowUndistributedOnly: false,
      trainNoList: [],
      videoPackageList: {},
      trainNochecked: [],
      // trainNoCurPage: 1,
      // trainNoPageSize: 8,
      // trainNoPageSizes: [5, 8, 12],
      trainNoTotal: 0,
      keyword1: '',
      keyword2: '',
      keyword3: '',
      actCollapseName: '',
      checkedOrg: {},
      orgTreeDialogVisible: false,
      organizeData: [],
      keyword1: "",
      keyword2: "",
      keyword3: "",
      actCollapseName: "",
      personList: [],
      memberChecked: [],
      taskTableData: [],
      taskVideoChecked: [],
      notAssignedOnly: false,
      isIndeterminate:false,
      inputName:""
    }
      isIndeterminate: false,
      inputName: "",
    };
  },
  mounted () {
    this.getOrganizeTreeData();
  mounted() {
    // this.getOrganizeTreeData();
    this.refreshAll();
  },
  watch: {
    taskType (n, o) {
      this.renderTaskTable();
    }
  },
  methods: {
    searchName(val){
      console.log(this.personList ,val);
      if (val=="") {
        this.searchMemberByOrg()
    reRenderWhenClear(val) {
      if (val.trim() == "") {
        this.renderTaskTable();
      }
      if (val.trim()=="") {
        return 
    },
    searchName(val) {
      if (val == "") {
        this.searchMemberByOrg();
      }
      this.personList = this.personList.filter(item=>{
        return item.Name.indexOf(val)>-1
      })
      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 => {
      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) {
      let arr = row.VideoList.map((x) => x.ID);
      cancelMission({ VideoIDs: arr }).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
            type: "success",
            message: res.msg,
          });
          this.refreshAll();
        }
      })
      });
    },
    refreshAll () {
    cancelAssign(row) {
      let arr = row.VideoList.map((x) => x.ID);
      cancelAssign({ VideoIDs: arr }).then((res) => {
        if (res.success) {
          this.$notify({
            type: "success",
            message: res.msg,
          });
          this.refreshAll();
        }
      });
    },
    searchKeyword() {
      const val = this.keyWordOfTask;
      this.taskTableData = this.taskTableData.filter((item) => {
        const b1 = item.DistributionUser.indexOf(val) > -1;
        const b2 = item.HandlingUsers.indexOf(val) > -1;
        const b3 = item.Title.indexOf(val) > -1;
        return b1 || b2 || b3;
      });
    },
    refreshAll() {
      this.trainNochecked = [];
      this.checkedOrg = {};
      this.memberChecked = [];
@@ -326,134 +355,105 @@
      this.renderVideoTable();
      this.renderTaskTable();
    },
    taskTableSelection (val) {
      this.taskVideoChecked = val
    taskTableSelection(val) {
      let arr = val.map((item) => item.VideoList.map((x) => x.ID));
      this.taskVideoChecked = arr;
    },
    renderTaskTable () {
    renderTaskTable() {
      let _this = this;
      let params = {
        IsPackage: 0,
        Status: this.taskType
      };
      getTaskList(params).then(res => {
        _this.taskTableData = res.data
      })
      getTaskList({
        Status: this.taskType,
      }).then((res) => {
        _this.taskTableData = res.data;
      });
    },
    // handleTrainNoSizeChange (size) {
    //   this.trainNoPageSize = size;
    //   this.renderVideoTable();
    // },
    handleTrainNoCurChange () {
      this.renderVideoTable();
    },
    renderVideoTable () {
    renderVideoTable() {
      let _this = this;
      let params = {
      getVideoListBySearch({
        CarNumber: this.keyword1,
        TrainNumber: this.keyword2,
        DriverName: this.keyword3,
        // PageIndex: this.trainNoCurPage,
        // PageSize: this.trainNoPageSize,
        notAssignedOnly: this.notAssignedOnly,
      };
      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 = res;
      }).then((res) => {
        _this.videoPackageList = res.data;
        _this.trainNoTotal = res.total;
      });
    },
    toAddAssignList () {
    toAddAssignList() {
      if (this.memberChecked.length == 0 || this.trainNochecked.length == 0) {
        this.$message.warning("请先选择视频和处理人");
        return;
      }
      let _this = this;
      let params = {
        UserID: this.memberChecked[0],
        UniqeID: this.trainNochecked.join(',')
      };
      addToAssignList(params).then(res => {
      let total = this.trainNochecked.length;
      let people = this.memberChecked.length;
      let least = (total / people) | 0;
      let left = total % people;

      let checkedTrain = [...this.trainNochecked];
      let pickList = [];
      for (let i = 0; i < people; i++) {
        pickList[i] = [];
        if (i < left) {
          for (let j = 0; j < least + 1; j++) {
            pickList[i].push(...this.videoPackageList[checkedTrain[0]]);
            checkedTrain.shift();
          }
        } else {
          for (let j = 0; j < least; j++) {
            pickList[i].push(...this.videoPackageList[checkedTrain[0]]);
            checkedTrain.shift();
          }
        }
      }
      let arr = pickList.map((a) => {
        return a.map((item) => item.ID);
      });
      addToAssignList({
        HandlerUserID: this.memberChecked,
        VideoIDs: arr,
      }).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
            type: "success",
            message: res.msg,
          });
          _this.refreshAll();
        }
      })
      });
    },
    searchMemberByOrg () {
    searchMemberByOrg() {
      let _this = this;
      getMemberByOrg({}).then(res => {
      getMemberByOrg({}).then((res) => {
        _this.personList = res.data;
        // _this.orgTreeDialogVisible = false;
      })
      });
    },
    deepNodeChildren (node) {
      if (node.ChildDept && node.ChildDept.length > 0) {
        return node.ChildDept.map(child => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
          childObj.Status = child.Status;
          if (child.ChildDept) {
            childObj.children = this.deepNodeChildren(child)
          }
          if (child.UserLst) {
            childObj.children = this.deepNodeChildren(child)
          }
          return childObj;
        });
      } else if (node.UserLst && node.UserLst.length > 0) {
        return node.UserLst.map(child => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
          childObj.Status = child.Status;
          return childObj;
        });
      }
    },
    checkOrgNode (a, b, c) {
      this.checkedOrg = a
    },
    getOrganizeTreeData () {
    distributeTask() {
      let _this = this;
      getOrganizeTree().then(res => {
        _this.organizeData = res.data.map(item => {
          let obj = {};
          obj.id = item.ID;
          obj.label = item.Name;
          obj.Status = item.Status;
          obj.children = _this.deepNodeChildren(item);
          return obj
        })
      })
    },
    distributeTask () {
      let _this = this;
      let arr = this.taskVideoChecked.map(train => train['LKGList'][0]['UniqeID'])
      let params = {
        UniqeID: arr.join(',')
      }
      distributeTask(params).then(res => {
      distributeTask({
        VideoIDs: this.taskVideoChecked,
        distributerID: "",
      }).then((res) => {
        _this.renderTaskTable();
      })
      });
    },

    // selOrg () {
    //   this.orgTreeDialogVisible = true;
    // },
  }
}
  },
};
</script>

<style lang="scss">
.tab-task-manage {
  // padding: 0 30px;
  .el-collapse-item__content {
    padding: 10px 32px;
  }
  button span {
    color: #fff;
  }
  button i {
    color: #fff;
  }
  .partment {
    border: 1px solid #e8e8e8;
    border-radius: 3px;
@@ -463,22 +463,11 @@
    }
  }
  .header {
    height: 40px;
    .title {
      float: left;
      padding-left: 20px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
    }
    .header-right {
      float: right;
    }
  }
  .body {
    padding: 14px 20px 20px;
  }

  .flex-box {
    align-items: center;
    & > label {
@@ -490,17 +479,52 @@
  }
  .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;
      }
      .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{
          .el-checkbox__label {
            display: none;
          }
          .video-detail {
@@ -511,24 +535,54 @@
          }
        }
      }
      .video-list::-webkit-scrollbar {
        width: 8px;
      }
      .video-list::-webkit-scrollbar-thumb {
        border-radius: 5px;
        // box-shadow: 0px 3px 6px rgba(23, 37, 233, 0.43);
        background-color: #eaecf8;
      }
      .video-list::-webkit-scrollbar-track {
        background-color: #cad5e6;
      }
    }
    .top-right {
      width: 360px;
      height: 465px;
      // overflow-y:auto;
      .header{
        .el-input{
              line-height: 41px;
            width: 185px;
      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-checkbox{
          float: left;
          padding-left: 20px;
        .el-input {
          line-height: 40px;
          width: 185px;
          font-size: 14px;
        }
        .el-checkbox {
          height: 40px;
          line-height: 40px;
          font-size: 14px;  
          font-size: 14px;
        }
      }
      .el-button {
        padding: 9px 22px;
        font-size: 13px;
        border-radius: 3px;
      }
      .checked-org {
        flex: 1;
@@ -538,20 +592,22 @@
        }
      }
      .person-list {
        padding-top: 14px;

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

        margin-bottom: 8px;
        overflow: auto;
        height: 370px;
        .el-checkbox-group {
          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;
          }
        }
      }
    }
@@ -560,11 +616,70 @@
    height: 10px;
    background: #f5f5f5;
  }
  .bot {
    padding: 20px;
  .bot-box {
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
    opacity: 1;
    border-radius: 10px;
    box-sizing: border-box;
    padding-bottom: 30px;

    .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;
        }
        .el-table__expanded-cell {
          padding-left: 65px;
        }
        th.el-table__cell > .cell {
          color: #fff;
        }
      }
    }
    .actions {
      .el-button--small {
        padding: 9px 38px;
        font-size: 13px;
        border-radius: 3px;
        margin-top: 20px;
      }
    }
  }