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