From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复

---
 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue |  741 +++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 466 insertions(+), 275 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index 85c3076..4d32c28 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -1,155 +1,199 @@
 <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 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>
+              <el-input
+                class="keyword-input"
+                v-model="keyword1"
+                placeholder="璇疯緭鍏ユ満杞﹀彿"
+                size="small"
+                style="margin: 0 10px"
+                clearable
+              ></el-input>
             </div>
             <div>
               <el-input
                 class="keyword-input"
-                v-model="videoListSearchWord"
-                placeholder="璇疯緭鍏ユ満杞﹀彿锛屽涓敤','鍒嗛殧"
-                size="mini"
-                style="margin: 0 10px;"
+                v-model="keyword2"
+                placeholder="璇疯緭鍏ヨ溅娆�"
+                size="small"
+                style="margin: 0 10px"
+                clearable
               ></el-input>
             </div>
-            <div></div>
+            <div>
+              <el-input
+                class="keyword-input"
+                v-model="keyword3"
+                placeholder="璇疯緭鍏ュ徃鏈哄鍚�"
+                size="small"
+                style="margin: 0 10px"
+                clearable
+              ></el-input>
+            </div>
             <el-button
               type="primary"
               @click="renderVideoTable"
-              size="mini"
-              style="margin-right:10px;"
-            >鎼滅储</el-button>
-            <!-- <el-checkbox v-model="isShowUndistributedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox> -->
-          </div>
+              size="small"
+              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-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-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" style="max-height: 500px; overflow-y:auto;">
+      <div class="top-right">
         <div class="header">
-          <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="mini"
+            @input="searchName"
+            v-model="inputName"
+            placeholder="鎸変汉鍚嶆悳绱�"
+            clearable
+          ></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>
+                <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>
@@ -158,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"
@@ -178,94 +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, getVideoListByTrainNumber, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
+import {
+  getOrganizeTree,
+  getMemberByOrg,
+  getVideoListBySearch,
+  addToAssignList,
+  getTaskList,
+  distributeTask,
+  cancelMission,
+  cancelAssign,
+} from "@/api/shuohuang";
 export default {
-  data () {
+  data() {
     return {
-      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,
-      videoListSearchWord: '',
-      actCollapseName: '',
-      checkedOrg: {},
-      orgTreeDialogVisible: false,
-      organizeData: [],
+      keyword1: "",
+      keyword2: "",
+      keyword3: "",
+      actCollapseName: "",
       personList: [],
       memberChecked: [],
       taskTableData: [],
       taskVideoChecked: [],
-    }
+      notAssignedOnly: false,
+      isIndeterminate: false,
+      inputName: "",
+    };
   },
-  mounted () {
-    this.getOrganizeTreeData();
+  mounted() {
+    // this.getOrganizeTreeData();
     this.refreshAll();
   },
-  watch: {
-    taskType (n, o) {
-      // debugger
-      this.renderTaskTable();
-    }
-  },
   methods: {
-    cancelDistribute (row) {
-      cancelMission({ UniqeID: row.LKGList[0].UniqeID }).then(res => {
+    reRenderWhenClear(val) {
+      if (val.trim() == "") {
+        this.renderTaskTable();
+      }
+    },
+    searchName(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) {
+      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 = [];
@@ -273,135 +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 = {
-        KeyWord: this.videoListSearchWord,
-        StartDate: this.videoSearchTime[0],
-        EndDate: this.videoSearchTime[1],
-        PageIndex: this.trainNoCurPage,
-        PageSize: this.trainNoPageSize,
-        Status: 0,
-        IsNeed: 0
-      };
-      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);
-        }
-        debugger
-        _this.trainNoList = arr;
+      getVideoListBySearch({
+        CarNumber: this.keyword1,
+        TrainNumber: this.keyword2,
+        DriverName: this.keyword3,
+        notAssignedOnly: this.notAssignedOnly,
+      }).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({ DeptID: this.checkedOrg.id || '' }).then(res => {
+      getMemberByOrg({}).then((res) => {
         _this.personList = res.data;
-        _this.orgTreeDialogVisible = false;
-      })
+        // _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;
@@ -411,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 {
@@ -438,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 {
@@ -459,9 +535,55 @@
           }
         }
       }
+      .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;
+      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: 40px;
+          width: 185px;
+          font-size: 14px;
+        }
+        .el-checkbox {
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+        }
+      }
+      .el-button {
+        padding: 9px 22px;
+        font-size: 13px;
+        border-radius: 3px;
+      }
       .checked-org {
         flex: 1;
         text-align: left;
@@ -470,12 +592,22 @@
         }
       }
       .person-list {
-        padding-top: 14px;
+        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;
+          }
         }
       }
     }
@@ -484,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;
       }
     }
   }

--
Gitblit v1.8.0