From 8d94a4a0a987f586a9f7f8826ebb76c19387f207 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 26 三月 2021 17:19:40 +0800
Subject: [PATCH] 人员任务分配
---
vue.config.js | 1
src/pages/shuohuangMonitorAnalyze/components/taskManage.vue | 495 ++++++++++++++++++++++++--------------------
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 157 ++++++++------
src/api/shuohuang.ts | 2
4 files changed, 359 insertions(+), 296 deletions(-)
diff --git a/src/api/shuohuang.ts b/src/api/shuohuang.ts
index f6c96a6..592f571 100644
--- a/src/api/shuohuang.ts
+++ b/src/api/shuohuang.ts
@@ -109,7 +109,7 @@
})
export const getTaskList = (query: any) =>
request({
- url: '/data/api-c/lkg/getlstB',
+ url: '/data/api-c/lkg/getTaskList',
method: 'get',
params: query
})
diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index df42df8..1d93278 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -25,8 +25,8 @@
v-model="keyword1"
placeholder="璇疯緭鍏ユ満杞﹀彿"
size="small"
- style="margin: 0 10px;"
- clearable="true"
+ style="margin: 0 10px"
+ clearable
></el-input>
</div>
<div>
@@ -35,8 +35,8 @@
v-model="keyword2"
placeholder="璇疯緭鍏ヨ溅娆�"
size="small"
- style="margin: 0 10px;"
- clearable="true"
+ style="margin: 0 10px"
+ clearable
></el-input>
</div>
<div>
@@ -45,39 +45,41 @@
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>
+ 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="vkey"
- v-for="(v,vkey,i) in videoPackageList"
+ v-for="(v, vkey, i) in videoPackageList"
:key="i"
>
<template slot="title">
<div>
<el-checkbox
- :label="i"
- style="padding-right:10px;"
+ :label="vkey"
+ style="padding-right: 10px"
></el-checkbox>
- <span>{{vkey}}({{v.length}})</span>
+ <span>{{ vkey }}({{ v.length }})</span>
</div>
</template>
<div class="video-detail" v-for="video in v" :key="video.ID">
- <i class="el-icon-film" style="margin-left: 20px;"></i>
- <span style="padding-left: 10px;">{{video.VideoName}}</span>
+ <i class="el-icon-film" style="margin-left: 20px"></i>
+ <span style="padding-left: 10px">{{
+ video.VideoName
+ }}</span>
</div>
</el-collapse-item>
</el-collapse>
@@ -96,9 +98,19 @@
</div>
<div class="top-right partment">
<div class="header">
- <el-checkbox v-model="isAllCheck" :indeterminate="isIndeterminate" @change="handleCheckAllChange"></el-checkbox>
+ <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>
+ <el-input
+ size="small"
+ @input="searchName"
+ v-model="inputName"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ clearable
+ ></el-input>
</div>
<div class="body">
<!-- <div class="flex-box">
@@ -107,9 +119,12 @@
<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
@@ -117,7 +132,8 @@
type="primary"
@click="toAddAssignList"
size="small"
- >鍔犲叆寰呭垎閰嶅垪琛�</el-button>
+ >鍔犲叆寰呭垎閰嶅垪琛�</el-button
+ >
</div>
</div>
</div>
@@ -127,18 +143,24 @@
<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>
@@ -148,31 +170,54 @@
type="primary"
size="small"
@click="distributeTask"
- v-if="taskType==1&&taskVideoChecked.length"
- >鍒嗛厤浠诲姟</el-button>
+ v-if="taskType == 1"
+ >鍒嗛厤浠诲姟</el-button
+ >
</div>
<el-table
class="thbg"
:data="taskTableData"
+ v-if="taskTableData"
ref="elTable"
@selection-change="taskTableSelection"
v-loading
>
- <el-table-column v-if="taskType==1" type="selection" width="55"></el-table-column>
- <el-table-column prop="LocomotiveNumber" label="鏈鸿溅鍙�"></el-table-column>
+ <el-table-column
+ 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.LKGList.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"
+ >鍙栨秷鍒嗛厤</span
+ >
+ <span
+ @click="cancelDistribute(scope.row)"
+ v-show="taskType == 2"
+ >鍙栨秷鎸囨淳</span
+ >
<!-- <span @click="toggleCollapse(scope.row)">鏌ョ湅/闅愯棌杞︽</span> -->
</div>
</template>
@@ -183,13 +228,15 @@
class="video-item"
v-for="video in scope.row.LKGList"
:key="video.ID"
- >{{video.VideoName}}</div>
+ >
+ {{ video.VideoName }}
+ </div>
</template>
</el-table-column>
</el-table>
</div>
</div>
- <el-dialog :visible="orgTreeDialogVisible">
+ <!-- <el-dialog :visible="orgTreeDialogVisible">
<div>
<el-tree
:data="organizeData"
@@ -201,124 +248,109 @@
: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,
+} 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,
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: [],
+ taskTableData: null,
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) {
+ console.log(this.personList, 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.LKGList.map((x) => x.ID);
+ cancelMission({ LkgIDs: arr }).then((res) => {
if (res.success) {
this.$notify({
- type: 'success',
- message: res.msg
+ type: "success",
+ message: res.msg,
});
this.refreshAll();
}
- })
+ });
},
- 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,121 +358,131 @@
this.renderVideoTable();
this.renderTaskTable();
},
- taskTableSelection (val) {
- this.taskVideoChecked = val
+ taskTableSelection(val) {
+ let arr = val.map((item) => item.LKGList.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 => {
- _this.videoPackageList = res.data
+ }).then((res) => {
+ _this.videoPackageList = res.data;
_this.trainNoTotal = res.total;
});
},
- toAddAssignList () {
+ toAddAssignList() {
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({
+ UserID: this.memberChecked,
+ LkgIDs: 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 () {
+ // 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() {
+ // 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;
- 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({
+ LkgIDs: this.taskVideoChecked,
+ }).then((res) => {
_this.renderTaskTable();
- })
+ });
},
-
// selOrg () {
// this.orgTreeDialogVisible = true;
// },
- }
-}
+ },
+};
</script>
<style lang="scss">
@@ -457,11 +499,12 @@
height: 40px;
.title {
float: left;
- padding-left: 20px;
height: 40px;
+ padding-left: 10px;
+
line-height: 40px;
font-size: 14px;
- font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
}
.header-right {
float: right;
@@ -491,7 +534,7 @@
text-align: left;
.el-checkbox-group {
margin-bottom: 20px;
- .el-checkbox__label{
+ .el-checkbox__label {
display: none;
}
.video-detail {
@@ -507,18 +550,18 @@
width: 360px;
height: 465px;
// overflow-y:auto;
- .header{
- .el-input{
- line-height: 41px;
- width: 185px;
- font-size: 14px;
+ .header {
+ .el-input {
+ line-height: 41px;
+ width: 185px;
+ font-size: 14px;
}
- .el-checkbox{
+ .el-checkbox {
float: left;
padding-left: 20px;
height: 40px;
line-height: 40px;
- font-size: 14px;
+ font-size: 14px;
}
}
.checked-org {
@@ -531,16 +574,16 @@
.person-list {
padding-top: 14px;
- .el-checkbox-group{
+ .el-checkbox-group {
height: 330px;
- margin-bottom: 8px;
- overflow: auto;
+ margin-bottom: 8px;
+ overflow: auto;
}
.person {
text-align: left;
margin-bottom: 10px;
-
+
padding-bottom: 6px;
border-bottom: 1px solid #eee;
}
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index de1e4f0..37885b5 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -119,17 +119,13 @@
</div>
</template>
<div class="player-control">
- <!-- <div class="progress-bar"></div> -->
- <!--
-
- -->
<div class="progress-bar">
<el-tooltip
placement="top"
v-for="(item, index) in eventMarks"
:key="index"
>
- <div slot="content">
+ <div slot="content">
{{ getTimeStr(item.offset) }}<br />{{ item.text }}
</div>
<div
@@ -140,19 +136,51 @@
@click="dotJump(item.offset)"
></div>
</el-tooltip>
- <!-- :marks="marks" -->
+ <el-tooltip
+ placement="top"
+ v-for="(item, index) in labelMarks"
+ :key="index"
+ >
+ <div slot="content">
+ {{ getTimeStr(item.offset) }}<br />{{ item.text }}
+ </div>
+ <div
+ class="label-dot"
+ :style="{
+ left: (item.offset/maxSecond)*100 + '%',
+ }"
+ @click="dotJump(item.offset)"
+ ></div>
+ </el-tooltip>
+
+ <el-tooltip placement="top" :offset="440-hoverOffset"
+ :hide-after="0" :visible-arrow="false"
+ >
+ <div slot="content" >{{hoverTime}}</div>
<el-slider
v-model="curTime"
:format-tooltip="formatTooltip"
:max="maxSecond"
+ @mousemove.native="triggerHover"
@change="progressChange"
@input="inTimeChange"
></el-slider>
+</el-tooltip>
+
</div>
<div class="control-zone">
<span class="time">{{ curPlayTime }} / {{ maxVideoTime }}</span>
- <div class="play-btn" @click="playAll" v-if="showPlayBtn"></div>
- <div class="stop-btn" @click="pauseAll" v-else></div>
+
+
+ <div class="play-btn" @click="playAll" v-if="showPlayBtn">
+
+ <span class="icon iconfont"></span>
+
+ </div>
+ <div class="stop-btn" @click="pauseAll" v-else>
+
+ <span class="icon iconfont"></span>
+ </div>
</div>
</div>
</div>
@@ -205,7 +233,7 @@
<!-- <div class="flex-box fixed-height-box2"></div> -->
<dataset-chart style="width: 100%" v-if="showTable"></dataset-chart>
- <el-tab-pane label="閲岀▼鏍�" name="second"> </el-tab-pane>
+ <el-tab-pane label="鍏噷鏍�" name="second"> </el-tab-pane>
</el-tabs>
</div>
<div class="bot-right block">
@@ -318,16 +346,15 @@
curTime: 0,
showPlayBtn: true,
eventMarks: [],
- marks: {
- 45: {},
- 373: {},
- },
+ marks: {},
labelMarks: [],
maxDuration: 0,
maxVideoTime: "",
curPlayTime: "00:00",
maxSecond: 0,
isStop: false,
+ hoverTime:"",
+ hoverOffset:0,
};
},
watch: {
@@ -355,6 +382,10 @@
this.getRelatedVideos(this.videoDetails);
},
methods: {
+ triggerHover(e){
+ this.hoverOffset=e.offsetX
+ this.hoverTime=this.getTimeStr((e.offsetX/880)*this.maxSecond)
+ },
getPlayStatus(e) {
console.log(e, 1111);
},
@@ -500,42 +531,15 @@
item.marks = _this.mergeMarks(item);
});
_this.curVideo = res.data.find((item) => item.ID == v.ID);
- console.log(_this.curVideo);
- let map = {},
- map2 = {};
- let arr1 = [],
- arr2 = [];
- _this.curVideo.marks.forEach((item) => {
+ _this.curVideo.marks.forEach(item=>{
if (item.type == 0) {
- map[item.offset] = {
- style: {
- color: "white",
- },
- label: item.text,
- };
+ _this.eventMarks.push(item)
} else {
- map[+item.offset] = {
- style: {
- color: "yellow",
- },
- label: item.text,
- };
+ _this.labelMarks.push(item)
}
- });
- // _this.eventMarks = map
- _this.labelMarks = map2;
-
- // videoInfo.EventLst.forEach((item) => {
- // map[item.SecondsInVideo] = {
- // style:{
- // color: 'black'
- // },
- // label: item.Event + (item.Desc == "" ? "" : ": " + item.Desc)
- // }
- // });
-
- if (this.guid == 1) {
- this.maxVideoTime = this.curVideo.VideoTime;
+ })
+ if (_this.guid == 1) {
+ _this.maxVideoTime = _this.curVideo.VideoTime;
}
_this.videoArrs = res.data.filter((item) => v.UniqeID == item.UniqeID);
_this.allCurVideos = res.data;
@@ -543,12 +547,12 @@
return item.Camera == "鍙告満瀹�";
});
- this.$nextTick(() => {
+ _this.$nextTick(() => {
_this.$refs[`player_${_this.curVideo.ID}`][0].init();
- let arr = this.maxVideoTime.split(":");
+ let arr = _this.maxVideoTime.split(":");
let min = +arr[0],
sec = +arr[1];
- this.maxSecond = min * 60 + sec;
+ _this.maxSecond = min * 60 + sec;
});
});
},
@@ -651,12 +655,6 @@
_this.curVideo.LableLst.push(label);
}
});
- // getRelatedVideoInfo({ UniqeID: _this.videoDetails.UniqeID }).then(res => {
- // res.data.forEach(d => {
- // let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
- // someVideo.LableLst = d.LableLst
- // })
- // })
this.$message.success("娣诲姞鎴愬姛");
// 鏍囨敞
@@ -701,16 +699,14 @@
text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
type: 0,
};
- this.eventMarks.push(obj);
return obj;
});
const labMarks = videoInfo.LableLst.map((lable) => {
let obj = {
- offset: lable.Time,
+ offset: +lable.Time,
text: lable.Desc,
type: 1,
};
- this.labelMarks.push(obj);
return obj;
});
return eMarks.concat(labMarks);
@@ -818,6 +814,9 @@
float: left;
}
}
+ // .prism-controlbar{
+ // display: none;
+ // }
.currentPlayer {
border: 2px solid aqua;
height: 100%;
@@ -828,24 +827,41 @@
}
}
.player-control {
- background-color: black;
+ background-color: #fff;
height: 75px;
width: 100%;
.progress-bar {
margin: 0px 30px;
position: relative;
.self-dot {
- top: 16px;
+ // top: 16px;
position: absolute;
height: 6px;
- width: 3px;
+ width: 6px;
z-index: 1;
background-color: lightcoral;
- border-radius: 60%;
+ // border-radius: 30%;
// pointer-events: none;
cursor: pointer;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
+ }
+ .label-dot{
+ // top: 16px;
+ position: absolute;
+ height: 6px;
+ width: 6px;
+ z-index: 1;
+ background-color: yellowgreen;
+ cursor: pointer;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ }
+ .el-slider{
+ margin: 16px 0;
+ .el-slider__runway{
+ margin: 0;
+ }
}
.el-slider__button {
width: 12px;
@@ -859,24 +875,27 @@
.time {
float: left;
margin-left: 23px;
- color: #fff;
+ // color: #fff;
}
.play-btn {
width: 24px;
height: 24px;
cursor: pointer;
- background: url(/apps/shuohuangMonitorAnalyze/img/bigplay.png)
- no-repeat;
- background-size: contain;
+ // background: url(/apps/shuohuangMonitorAnalyze/img/smallplay.png)
+
margin: 0 auto;
+ .iconfont{
+ font-size: 25px;
+ }
}
.stop-btn {
width: 24px;
height: 24px;
cursor: pointer;
- background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
- no-repeat;
- background-size: contain;
+ // background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
+ .iconfont{
+ font-size: 25px;
+ }
margin: 0 auto;
}
}
diff --git a/vue.config.js b/vue.config.js
index 8e6eadc..1de3ec5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -119,3 +119,4 @@
}
}
}
+// http://111.205.161.131:40143/
\ No newline at end of file
--
Gitblit v1.8.0