From 03fbaa3ebea4cd30ad798a4ec5c27dbb2c2daf86 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 16 三月 2021 18:31:59 +0800
Subject: [PATCH] echart里程标
---
src/pages/shuohuangMonitorAnalyze/components/taskManage.vue | 162 ++++++++---
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 53 +++
src/pages/shuohuangMonitorAnalyze/components/charts/datasetForVideo.vue | 325 +++++++++++++++++++++++
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 54 ++-
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 213 +++++++++++---
src/api/shuohuang.ts | 10
6 files changed, 685 insertions(+), 132 deletions(-)
diff --git a/src/api/shuohuang.ts b/src/api/shuohuang.ts
index bb13c83..f6c96a6 100644
--- a/src/api/shuohuang.ts
+++ b/src/api/shuohuang.ts
@@ -36,6 +36,12 @@
method: 'get',
params: query
})
+ export const getCarVideos = (query: any) =>
+ request({
+ url: '/data/api-c/lkg/getCarVideos',
+ method: 'get',
+ params: query
+ })
export const getLabelMap = () =>
request({
url: '/data/api-c/lkg/getCode',
@@ -89,9 +95,9 @@
method: 'get',
params: query
})
-export const getVideoListByTrainNumber = (query: any) =>
+export const getVideoListBySearch = (query: any) =>
request({
- url: '/data/api-c/lkg/getlstB',
+ url: '/data/api-c/lkg/getlstBySearch',
method: 'get',
params: query
})
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/datasetForVideo.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/datasetForVideo.vue
new file mode 100644
index 0000000..8a8983b
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/datasetForVideo.vue
@@ -0,0 +1,325 @@
+<template>
+ <div class="irregular-dataset">
+ <div ref="multiBar" style="width: 100%;height: 300px;"></div>
+ </div>
+</template>
+
+<script>
+export default {
+ data () {
+ return {
+ options: {},
+ }
+ },
+ mounted () {
+ this.options = this.mockData();
+ this.initMultiBar();
+ },
+ methods: {
+ mockData () {
+
+ var dimension = ['楦ｇ瑳', '浜烘暟鍙樺寲', '杩囧垎鐩�', '杩涚珯', '鍑虹珯', '杩囦俊鍙锋満'];
+ var categoryCount = 7;
+ var xAxisData = [];
+ var customData = [];
+ var legendData = [];
+ var dataList = [];
+
+ var arr=[]
+ for (let index = 20; index <=40; index++) {
+ arr.push(index+'')
+ }
+ const tooltipFormater = param=>{
+ // debugger
+ let speedStr ="閫熷害锛�"+param[0].value + " km/h"
+ let distanceStr = "鍏噷鏍囷細" + param[0].axisValue + " km"
+
+ let htmlStr = '<div>'+distanceStr+'</div>'+'<div>'+speedStr+'</div>'
+
+ return htmlStr
+ }
+ return {
+ title: {
+ text: '閫熷害涓庝簨浠剁粺璁�',
+ textStyle: {
+ fontSize: 14
+ }
+ },
+ color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+ grid: {
+ top: 50,
+ left: 30,
+ right: 20,
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter:tooltipFormater,
+ },
+ legend: {
+ data: dimension,
+ left: 'right',
+ },
+ dataZoom: [{
+ type: 'slider',
+ start: 30,
+ end: 70
+ }, {
+ type: 'inside',
+ start: 30,
+ end: 70
+ }],
+ xAxis: {
+ type:"category",
+ data: arr
+ },
+ yAxis: [{
+ type: 'value',
+ // name: '閫熷害',
+ min: 0,
+ max: 75,
+ interval: 15,
+ // axisLabel: {
+ // formatter: '{value} km/h'
+ // }
+ }],
+ series: [{
+ type: 'line',
+ name: '閫熷害',
+ color: 'aqua',
+
+ itemStyle: {
+ borderWidth: 2
+ },
+ data:[50,51,50,51,50,51,52,52,52,53,54,55,56,57,58,59,60,61,62,62,62,62,62]
+ // z: 1
+ },
+ {
+ name: '楦ｇ瑳',
+ type: 'bar',
+ label:{
+ show:true,
+ position:"outside",
+ formatter: (params)=>{
+ // debugger
+ if (params.data==0) {
+ return ''
+ }
+ return params.seriesName
+ }
+ },
+ data: [0,0,0,75,0,0,0,0,0,0,0,0,0,0,75,0,0,0,0,0,0,0,0],
+ barWidth: 1,
+ },
+ {
+ name: '浜烘暟鍙樺寲',
+ type: 'bar',
+ label:{
+ show:true,
+ position:"outside",
+ formatter: (params)=>{
+ // debugger
+ if (params.data==0) {
+ return ''
+ }
+ return params.seriesName
+ }
+ },
+ data: [0,0,0,0,0,0,0,0,75,0,0,0,0,0,0,0,0,0,75,0,0,0,0],
+ barWidth: 1,
+ },
+ {
+ name: '杩囧垎鐩�',
+ type: 'bar',
+ label:{
+ show:true,
+ position:"outside",
+ formatter: (params)=>{
+ // debugger
+ if (params.data==0) {
+ return ''
+ }
+ return params.seriesName
+ }
+ },
+ data: [0,75,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,75,0,0,0,0],
+ barWidth: 1,
+ },
+ {
+ name: '杩涚珯',
+ type: 'bar',
+ label:{
+ show:true,
+ position:"outside",
+ formatter: (params)=>{
+ // debugger
+ if (params.data==0) {
+ return ''
+ }
+ return params.seriesName
+ }
+ },
+ data: [0,0,75,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,75,0],
+ barWidth: 1,
+ },
+ {
+ name: '鍑虹珯',
+ type: 'bar',
+ label:{
+ show:true,
+ position:"outside",
+ formatter: (params)=>{
+ // debugger
+ if (params.data==0) {
+ return ''
+ }
+ return params.seriesName
+ }
+ },
+ data: [0,0,0,0,0,85,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+ barWidth: 1,
+ },
+ {
+ name: '杩囦俊鍙锋満',
+ type: 'bar',
+ label:{
+ show:true,
+ position:"outside",
+ formatter: (params)=>{
+ // debugger
+ if (params.data==0) {
+ return ''
+ }
+ return params.seriesName
+ }
+ },
+ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,75,0,0,0,,0,0,0,0],
+ barWidth: 1,
+ },
+ ]
+
+ }
+ },
+ // renderItem (params, api) {
+ // var xValue = api.value(0);
+ // var currentSeriesIndices = api.currentSeriesIndices();
+ // var barLayout = api.barLayout({
+ // barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
+ // });
+
+ // var points = [];
+ // for (var i = 0; i < currentSeriesIndices.length; i++) {
+ // var seriesIndex = currentSeriesIndices[i];
+ // if (seriesIndex !== params.seriesIndex) {
+ // var point = api.coord([xValue, api.value(seriesIndex)]);
+ // point[0] += barLayout[i - 1].offsetCenter;
+ // point[1] -= 20;
+ // points.push(point);
+ // }
+ // }
+ // var style = api.style({
+ // color: '#975fe4',
+ // //stroke: api.visual('color'),
+ // stroke: 'aqua',
+ // fill: null
+ // });
+
+ // return {
+ // type: 'polyline',
+ // shape: {
+ // points: points
+ // },
+
+ // style: style
+ // };
+ // },
+ initMultiBar () {
+ this.$nextTick(() => {
+ let dom = this.$echarts.init(this.$refs['multiBar']);
+ dom.setOption(this.options);
+ })
+ }
+ }
+}
+
+/**
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999'
+ }
+ }
+ },
+ toolbox: {
+ feature: {
+ dataView: {show: true, readOnly: false},
+ magicType: {show: true, type: ['line', 'bar']},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ legend: {
+ data: ['钂稿彂閲�', '闄嶆按閲�', '骞冲潎娓╁害']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisPointer: {
+ type: 'shadow'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '姘撮噺',
+ min: 0,
+ max: 250,
+ interval: 50,
+ axisLabel: {
+ // formatter: '{value} ml'
+ }
+ },
+ {
+ type: 'value',
+ name: '娓╁害',
+ min: 0,
+ max: 25,
+ interval: 5,
+ axisLabel: {
+ formatter: '{value} 掳C'
+ }
+ }
+ ],
+ series: [
+ {
+ name: '钂稿彂閲�',
+ type: 'bar',
+ data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+ },
+ {
+ name: '闄嶆按閲�',
+ type: 'bar',
+ data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+ },
+ {
+ name: '骞冲潎娓╁害',
+ type: 'line',
+ yAxisIndex: 1,
+ data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+ }
+ ]
+};
+
+
+
+
+
+ */
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 10723b3..d528eb6 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -100,7 +100,8 @@
</el-card>
</div>
<div class="part">
- <div class="header-width-tab">
+ <div class="part-top">
+ <div class="header-width-tab">
<el-tabs class="tab-menu" v-model="actHiddanderTab" @tab-click="initTabContent">
<el-tab-pane label="闅愭偅浜嬩欢缁熻" name="hidDanderStatistic"></el-tab-pane>
<el-tab-pane label="闅愭偅浜嬩欢瓒嬪娍" name="hidDanderTrend"></el-tab-pane>
@@ -168,6 +169,7 @@
</div>
</div>
</div>
+ </div>
</div>
<div class="statics flex-box">
<div class="lt">
@@ -239,12 +241,13 @@
<el-radio-button label="hc">浼氳溅</el-radio-button>
<el-radio-button label="lsmx">涓存椂鎱㈣</el-radio-button>
</el-radio-group>
+
<Pie :options="optionsOfIrregularEventPie" style="padding-top:20px;"></Pie>
</div>
</div>
</div>
</div>
- <div class="part">
+ <div class="part-bottom" >
<div class="tab-swiper">
<swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
</div>
@@ -1110,7 +1113,13 @@
</script>
<style lang="scss">
+
.guide-index {
+ background-color: #f0f2f5;
+ .tab-menu {
+ background-color: #fff;
+ height: 60px;
+ }
.el-progress-bar__outer {
border-radius: 2px;
}
@@ -1163,10 +1172,14 @@
}
}
.tab-content {
+ // padding: 18px 12px;
padding: 20px;
+
.card-view {
display: flex;
- margin-right: -20px;
+ margin-right: -20px;
+
+ // margin-left: -2px;
.el-card {
flex: 1;
margin-right: 20px;
@@ -1223,21 +1236,37 @@
}
}
.part {
- padding: 20px 0;
+ padding:20px 0;
margin-bottom: 20px;
+ .part-top{
+ background-color: #fff;
+ }
+ .part-bottom{
+ background-color: #fff;
+ // padding: 0 30px 30px 30px;
+ padding: 0 0 25px 0;
+
+ .tab-detail{
+ margin: 0 25px;
+ }
+ }
.header-width-tab {
display: flex;
justify-content: space-between;
+ margin-bottom: 12px;
+
.rt {
display: flex;
padding-top: 20px;
+ margin-right: 25px;
+
}
}
.statics {
display: flex;
- padding: 0 10px;
+ // padding: 0 10px;
min-height: 400px;
- margin-bottom: 30px;
+ margin-bottom: 20px;
.statics-header {
height: 50px;
display: flex;
@@ -1278,10 +1307,15 @@
.lt {
text-align: left;
flex: 1;
- padding-right: 40px;
+ padding: 3px 15px 15px 18px;
+ background-color: #fff;
+ margin-right: 18px;
+
}
.rt {
text-align: left;
+ background-color: #fff;
+ padding: 3px 15px 15px 18px;
width: 400px;
.header {
display: flex;
@@ -1339,12 +1373,11 @@
.gt {
flex: 1;
width: auto;
- //padding: 0 20px;
}
}
.tab-swiper {
- width: calc(100vw - 340px);
- margin-bottom: 20px;
+ width: calc(100vw - 367px);
+ margin: 0 0 20px 20px;
}
}
.general-view {
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index eb74ebd..4892811 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -257,10 +257,15 @@
:total="tableTotal"
></el-pagination>
</div>
- <el-dialog
+
+
+
+ <el-dialog
class="dialog-video"
:visible="videoDialogVisible"
@close="videoDialogVisible = false"
+ :modal="false"
+ destroy-on-close="true"
>
<div slot="title" class="title">
<div class="center">
@@ -283,6 +288,7 @@
</el-dialog>
</div>
</div>
+
</template>
<script>
@@ -302,7 +308,7 @@
name: "SearchMain",
components: {
VideoAnalyze,
- EventVideos
+ EventVideos,
},
data () {
return {
@@ -375,18 +381,18 @@
IsOperate: "",
showType: "menu",
tableData: [
- {
- name: "SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4",
- size: "17.66M",
- updateTime: "2020-11-04 15:41",
- createTime: "2020-11-04 15:41",
- },
- {
- name: "SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091700.mp4",
- size: "17.76M",
- updateTime: "2020-11-04 15:41",
- createTime: "2020-11-07 17:41",
- },
+ // {
+ // name: "SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4",
+ // size: "17.66M",
+ // updateTime: "2020-11-04 15:41",
+ // createTime: "2020-11-04 15:41",
+ // },
+ // {
+ // name: "SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091700.mp4",
+ // size: "17.76M",
+ // updateTime: "2020-11-04 15:41",
+ // createTime: "2020-11-07 17:41",
+ // },
],
tabData: [
{
@@ -1014,15 +1020,21 @@
}
}
.dialog-video {
- z-index: 2096 !important;
+ // z-index: 2020 !important;
.el-dialog {
width: 1180px;
- height: 918px;
+ height: 901px;
}
.el-dialog__body {
background: #f5f5f5;
padding: 0;
}
+ .el-dialog__header {
+ padding: 3px;
+ .el-dialog__headerbtn {
+ top: 6px;
+ }
+ }
.title-partment {
font-size: 14px;
font-weight: 500;
@@ -1039,7 +1051,7 @@
}
}
.title {
- font-size: 18px;
+ font-size: 15px;
}
}
.dialog-event {
@@ -1055,4 +1067,12 @@
}
}
}
+ .window-view {
+ width: 100%;
+ height: auto;
+ // height: 100%;
+ // min-height: 684px;
+ overflow: auto;
+ z-index: 2000;
+ }
</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index 3973f07..cb0a759 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -7,7 +7,7 @@
</div>
<div class="body">
<div class="flex-box">
- <div>
+ <!-- <div>
<el-date-picker
v-model="videoSearchTime"
type="datetimerange"
@@ -18,28 +18,49 @@
end-placeholder="缁撴潫鏃ユ湡"
align="right"
></el-date-picker>
+ </div> -->
+ <div>
+ <el-input
+ class="keyword-input"
+ v-model="keyword1"
+ placeholder="璇疯緭鍏ユ満杞﹀彿"
+ size="small"
+ style="margin: 0 10px;"
+ clearable="true"
+ ></el-input>
</div>
<div>
<el-input
class="keyword-input"
- v-model="videoListSearchWord"
- placeholder="璇疯緭鍏ユ満杞﹀彿锛屽涓敤','鍒嗛殧"
- size="mini"
+ v-model="keyword2"
+ placeholder="璇疯緭鍏ヨ溅娆�"
+ size="small"
style="margin: 0 10px;"
+ clearable="true"
></el-input>
</div>
- <div></div>
+ <div>
+ <el-input
+ class="keyword-input"
+ v-model="keyword3"
+ placeholder="璇疯緭鍏ュ徃鏈哄鍚�"
+ size="small"
+ style="margin: 0 10px;"
+ clearable="true"
+ ></el-input>
+ </div>
<el-button
type="primary"
@click="renderVideoTable"
- size="mini"
+ size="small"
style="margin-right:10px;"
>鎼滅储</el-button>
<!-- <el-checkbox v-model="isShowUndistributedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox> -->
+ <el-checkbox v-model="notAssignedOnly">浠呮樉绀烘湭鍒嗛厤</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"
@@ -59,9 +80,9 @@
<span style="padding-left: 10px;">{{video.VideoName}}</span>
</div>
</el-collapse-item>
- </el-collapse>
+ </el-collapse> -->
</el-checkbox-group>
- <el-pagination
+ <!-- <el-pagination
@size-change="handleTrainNoSizeChange"
@current-change="handleTrainNoCurChange"
:current-page.sync="trainNoCurPage"
@@ -69,22 +90,24 @@
:page-sizes="trainNoPageSizes"
layout="total,sizes, prev, pager, next"
:total="trainNoTotal"
- ></el-pagination>
+ ></el-pagination> -->
</div>
</div>
</div>
<div class="top-right partment">
<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>
<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>
</div>
@@ -187,13 +210,14 @@
</template>
<script>
-import { getOrganizeTree, getMemberByOrg, getVideoListByTrainNumber, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
+import { getOrganizeTree, getMemberByOrg, getVideoListBySearch, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
export default {
data () {
return {
+ isAllCheck:false,
taskType: '1',
keyWordOfTask: '',
- videoSearchTime: [],
+ // videoSearchTime: [],
pickerOptions: {
shortcuts: [{
text: '浠婂ぉ',
@@ -228,11 +252,13 @@
isShowUndistributedOnly: false,
trainNoList: [],
trainNochecked: [],
- trainNoCurPage: 1,
- trainNoPageSize: 8,
- trainNoPageSizes: [5, 8, 12],
+ // trainNoCurPage: 1,
+ // trainNoPageSize: 8,
+ // trainNoPageSizes: [5, 8, 12],
trainNoTotal: 0,
- videoListSearchWord: '',
+ keyword1: '',
+ keyword2: '',
+ keyword3: '',
actCollapseName: '',
checkedOrg: {},
orgTreeDialogVisible: false,
@@ -241,6 +267,9 @@
memberChecked: [],
taskTableData: [],
taskVideoChecked: [],
+ notAssignedOnly: false,
+ isIndeterminate:false,
+ inputName:""
}
},
mounted () {
@@ -249,11 +278,35 @@
},
watch: {
taskType (n, o) {
- // debugger
this.renderTaskTable();
}
},
methods: {
+ searchName(val){
+ console.log(this.personList ,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) {
cancelMission({ UniqeID: row.LKGList[0].UniqeID }).then(res => {
if (res.success) {
@@ -286,35 +339,34 @@
_this.taskTableData = res.data
})
},
- handleTrainNoSizeChange (size) {
- this.trainNoPageSize = size;
- this.renderVideoTable();
- },
+ // handleTrainNoSizeChange (size) {
+ // this.trainNoPageSize = size;
+ // this.renderVideoTable();
+ // },
handleTrainNoCurChange () {
this.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
+ CarNumber: this.keyword1,
+ TrainNumber: this.keyword2,
+ DriverName: this.keyword3,
+ // PageIndex: this.trainNoCurPage,
+ // PageSize: this.trainNoPageSize,
+ notAssignedOnly: this.notAssignedOnly,
};
- 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);
- }
+ 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 = arr;
+ _this.trainNoList = res;
_this.trainNoTotal = res.total;
});
},
@@ -336,9 +388,9 @@
},
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) {
@@ -393,9 +445,9 @@
})
},
- selOrg () {
- this.orgTreeDialogVisible = true;
- },
+ // selOrg () {
+ // this.orgTreeDialogVisible = true;
+ // },
}
}
</script>
@@ -464,7 +516,20 @@
width: 360px;
height: 465px;
// overflow-y:auto;
-
+ .header{
+ .el-input{
+ line-height: 41px;
+ width: 185px;
+ font-size: 14px;
+ }
+ .el-checkbox{
+ float: left;
+ padding-left: 20px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 14px;
+ }
+ }
.checked-org {
flex: 1;
text-align: left;
@@ -476,7 +541,8 @@
padding-top: 14px;
.el-checkbox-group{
- height: 316px;
+ height: 330px;
+
margin-bottom: 8px;
overflow: auto;
}
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 8a8f6ef..191953e 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -2,6 +2,16 @@
<div class="video-analyze-content">
<div class="content-top">
<div class="grid-check">
+
+ <el-dropdown trigger="click" :popper-append-to-body="false" @command="handleCommand" v-show="showLocChoise">
+ <span class="el-dropdown-link">
+ {{curCamera}}<i class="el-icon-arrow-down el-icon--right"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item v-for="(item,index) in popDownArr" :key="index" :command="item">{{item.Camera}}</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+
<span
:class="
guid === 1
@@ -30,19 +40,17 @@
<div class="video-area">
<div class="info-list block">
<p class="title-partment">鐩稿叧瑙嗛</p>
- <!-- <div class="video-name" v-for="video in videoDetails.videoList" :key="video.id">
- <i class="el-icon-film"></i>
- <span>{{video.name}}</span>
- </div>-->
- <div
+ <div class="v-name-block">
+ <div
class="video-name"
:class="{ current: curVideo.ID == video.ID }"
@click="checkVideo(video, index)"
- v-for="(video, index) in relativeVideos"
+ v-for="(video, index) in curRoomVideos"
:key="video.ID"
>
<i class="el-icon-film"></i>
- <span>{{ video.Camera }}</span>
+ <span>{{ video.VideoDate }}</span>
+ </div>
</div>
</div>
<div class="players" ref="playerWrap">
@@ -71,16 +79,20 @@
v-for="(item, index) in videoWrapArr"
:key="index"
@click="checkCurVideo(index)"
+ style="position: relative;"
>
<template v-if="index <= videoArrs.length - 1">
<div
- :class="{ currentPlayer: curVideo.ID == videoArrs[index].ID }"
+ :class="{ currentPlayer: curVideo.ID == videoArrs[index].ID,videoZone:true }"
+ @mouseover="overShowLoc(index)"
>
+ <!-- @mouseover="" -->
<!-- {{videoArrs[index].ID}} -->
<!-- <img
:src="videoArrs[index].VideoCover"
style="width:100px"
/>-->
+ <div class="pos-desc" style="position: absolute;top: 5px;left: 10px;color: #fff;z-index: 1;height: fit-content;background-color: black;">{{videoArrs[index].Camera}}</div>
<ali-player
:source="videoArrs[index].VideoPath"
:markers="videoArrs[index].marks"
@@ -90,28 +102,19 @@
</template>
</div>
</template>
-
- <!-- <div
- class="video-item"
- :class="{'active':item.ID==curVideo.ID}"
- :ref="`gridVideoItem_${index}`"
- v-for="(item,index) in videoWrapArr"
- :key="index"
- >
- </div>-->
</div>
</div>
</div>
<div class="content-bottom">
- <div class="bot-left block">
- <p class="title-partment">蹇�熸爣娉�</p>
- <div class="flex-box" style="height: 28px">
+ <div class="bot-left ">
+ <!-- <p class="title-partment">蹇�熸爣娉�</p> -->
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane label="蹇�熸爣娉�" name="first"> <div class="flex-box" style="height: 28px">
<label style="padding-right: 10px">闅愭偅闂:</label>
<el-radio-group v-model="isUnusual">
<el-radio :label="0">鏃犲紓甯�</el-radio>
<el-radio :label="1">鏈夊紓甯�</el-radio>
</el-radio-group>
-
<el-button
icon="el-icon-plus"
size="mini"
@@ -122,8 +125,8 @@
>
</div>
<div class="flex-box fixed-height-box">
- <label>鏍囨敞淇℃伅:</label>
- <div class="mark-list">
+ <label v-if="!showTable">鏍囨敞淇℃伅:</label>
+ <div class="mark-list" v-if="!showTable">
<div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
<div class="time">
<span
@@ -139,7 +142,17 @@
</div>
</div>
</div>
- </div>
+ </div></el-tab-pane>
+ <!-- <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-tabs>
+
</div>
<div class="bot-right block">
<p class="title-partment">瑙嗛璇︽儏</p>
@@ -157,8 +170,8 @@
<span>{{ videoDetails.VideoDate }}</span>
</div>
<div>
- <label>鍙告満|鍓徃鏈�:</label>
- <span>{{ videoDetails.Driver1 }}|{{ videoDetails.Driver2 }}</span>
+ <label>鍙告満 | 鍓徃鏈�:</label>
+ <span>{{ videoDetails.Driver1 }} | {{ videoDetails.Driver2 }}</span>
</div>
</div>
</div>
@@ -169,14 +182,16 @@
:visible="labelDialogVisible"
@close="labelDialogVisible = false"
:append-to-body="false"
+ :modal="false"
+
>
- <div class="label-radio">
+ <!-- <div class="label-radio">
<p class="label">閫夋嫨灏嗚鏍囨敞鐨勮棰�:</p>
<el-radio-group v-model="isCheckAllVideo">
<el-radio :label="1">鏍囨敞鍦ㄥ叏閮ㄤ綅缃殑瑙嗛娈�</el-radio>
<el-radio :label="0">浠呮爣娉ㄩ�変腑鐨勮棰戞</el-radio>
</el-radio-group>
- </div>
+ </div> -->
<div class="label-check">
<p class="label">闅愭偅闂:</p>
<el-checkbox-group v-model="labelCheckedList">
@@ -204,16 +219,19 @@
updateVideoAnalyze,
getlst,
getRelatedVideoInfo,
+ getCarVideos,
getLabelMap,
delLabel,
editLabel,
} from "@/api/shuohuang";
+import DatasetChart from './charts/datasetForVideo';
import AliPlayer from "./aliPlayer/index";
export default {
name: "VideoAnalyze",
components: {
AliPlayer,
+ DatasetChart,
},
props: {
videoDetails: {
@@ -231,12 +249,19 @@
isUnusual: "",
videoArrs: [],
relativeVideos: [],
+ allCurVideos:[],
labelCheckedList: [],
videoWrapArr: [],
labelOptions: [],
selectedLabelId: "",
setLabelTime: 0,
isCheckAllVideo: 1,
+ curRoomVideos:[],
+ popDownArr:[],
+ curCamera:"",
+ showTable:false,
+ showLocChoise:true,
+ activeName:"first",
};
},
watch: {
@@ -252,18 +277,37 @@
},
videoDetails: {
handler(newVal, oldVal) {
- this.getVideos(newVal);
+ this.getCurVideos(newVal);
},
deep: true,
},
},
mounted() {
- console.log("analyze mount");
this.renderLabelOpts();
this.setGuid(1);
- this.getVideos(this.videoDetails);
+ this.getCurVideos(this.videoDetails);
+ this.getRelatedVideos(this.videoDetails)
},
methods: {
+ handleClick(instance){
+ if (instance.name=="second") {
+ this.showTable=true
+ }else{
+ this.showTable=false
+ }
+ },
+ handleCommand(cmd){
+ this.curCamera = cmd.Camera
+ this.curRoomVideos = this.allCurVideos.filter(item=>{
+ return item.Camera == cmd.Camera
+ })
+ this.curVideo= this.curRoomVideos.find(item=>{
+ return item.UniqeID == this.curVideo.UniqeID
+ })
+ this.$nextTick(() => {
+ _this.$refs[`player_${_this.curVideo.ID}`][0].init();
+ });
+ },
zeroize(val) {
return val < 10 ? "0" + val : val;
},
@@ -273,21 +317,39 @@
this.refreshCurVideoLabel(this.curVideo);
}
},
- getVideos(video) {
+ getCurVideos(v){
let _this = this;
- getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
- console.log(res);
- res.data.forEach((element) => {
- element.marks = _this.mergeMarks(element);
- console.log(element.marks);
- });
- _this.curVideo = res.data.find((item) => item.ID == video.ID);
- //_this.curVideo = res.data[0];
- _this.videoArrs = res.data;
- _this.relativeVideos = res.data;
- this.$nextTick(() => {
+ getCarVideos({
+ TrainNumber:v.TrainNumber,
+ CarNumber:v.CarNumber,
+ Driver1:v.Driver1,
+ }).then(res=>{
+ res.data.forEach(item=>{
+ item.marks = _this.mergeMarks(item)
+ })
+ _this.curVideo=res.data.find((item) => item.ID == v.ID)
+ // debugger
+ _this.videoArrs = res.data.filter(item=> v.UniqeID== item.UniqeID);
+ _this.allCurVideos = res.data;
+ _this.curRoomVideos = _this.allCurVideos.filter(item=>{
+ return item.Camera == "鍙告満瀹�"
+ })
+ this.$nextTick(() => {
_this.$refs[`player_${_this.curVideo.ID}`][0].init();
});
+ })
+ },
+ getRelatedVideos(video) {
+ let _this = this;
+ getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
+ let arr = []
+ let map = {}
+ res.data.forEach(item=>{
+ this.popDownArr.push(item)
+ })
+ if (this.popDownArr.length) {
+ this.curCamera=this.popDownArr[0].Camera
+ }
});
},
renderLabelOpts() {
@@ -308,8 +370,11 @@
});
},
checkVideo(video, index) {
+ // debugger
this.refreshCurVideoLabel(video);
this.curVideo = video;
+ this.videoArrs = this.allCurVideos.filter(item=> video.UniqeID== item.UniqeID);
+
this.$nextTick(() => {
this.$refs[`player_${this.curVideo.ID}`][0].init();
});
@@ -318,6 +383,11 @@
setGuid(guid) {
let _this = this;
this.guid = guid;
+ if (guid==1) {
+ this.showLocChoise=true
+ }else{
+ this.showLocChoise=false
+ }
// for(var i = 0; i < Math.pow(guid,2); i++){
// if(i>this.videoArrs.length-1){
// this.videoWrapArr[i] = this.videoArrs[i]
@@ -342,9 +412,9 @@
submitLabelChecked() {
let _this = this;
let tempArr = [];
- if (this.isCheckAllVideo == 1) {
+ // if (this.isCheckAllVideo == 1) {
tempArr = this.videoArrs.map((video) => video.ID);
- }
+ // }
let desc = this.labelCheckedList.map((lableId) => {
for (let label of this.labelOptions) {
if (label.ID == lableId) {
@@ -355,9 +425,7 @@
let query = {
ID: this.selectedLabelId,
- ParentID: this.isCheckAllVideo
- ? tempArr.join(",")
- : this.curVideo.ID + "",
+ ParentID: tempArr.join(","),
ParentUniqID: this.curVideo.UniqeID + "",
Time: Math.round(this.setLabelTime) + "",
Codes: this.labelCheckedList.join(","),
@@ -443,15 +511,30 @@
<style lang="scss" >
.video-analyze-content {
margin: 0;
- padding: 15px;
+ padding: 6px 15px 15px 15px;
+
text-align: left;
.content-top {
margin-bottom: 10px;
.grid-check {
text-align: right;
- margin-bottom: 6px;
+ margin-bottom: 3px;
+ position: relative;
+ .el-dropdown{
+ position: absolute;
+ top: -4px;
+ left: 200px;
+ }
+ .el-dropdown-link {
+ cursor: pointer;
+ color: #409EFF;
+ }
+ .el-icon-arrow-down {
+ font-size: 12px;
+ }
span {
- font-size: 20px;
+ font-size: 17px;
+
color: #cacaca;
padding-left: 12px;
cursor: pointer;
@@ -463,8 +546,14 @@
.video-area {
display: flex;
.info-list {
- width: 160px;
+ width: 180px;
+
margin-right: 10px;
+ .v-name-block{
+ height: 484px;
+
+ overflow: auto;
+ }
.video-name {
cursor: pointer;
color: #777;
@@ -478,14 +567,16 @@
}
}
.players {
- width: 960px;
- height: 540px;
+ width: 940px;
+
+ height: 530px;
display: flex;
flex-wrap: wrap;
.video-item {
background: black;
border: 1px solid #fff;
box-sizing: border-box;
+
& > div {
height: 100%;
& > div {
@@ -508,6 +599,14 @@
display: flex;
.bot-left {
flex: 1;
+ padding: 0px 15px 8px 15px;
+ background: #fff;
+ border-radius: 3px;
+ .el-tabs__header {
+ padding: 0;
+ position: relative;
+ margin: 0 0 10px;
+}
.flex-box {
align-items: baseline;
label {
@@ -537,6 +636,10 @@
height: 200px;
overflow-y: auto;
}
+ .fixed-height-box2 {
+ height: 228px;
+ overflow-y: auto;
+ }
}
.bot-right {
width: 210px;
@@ -551,7 +654,7 @@
.label-dialog {
.el-dialog {
width: 700px !important;
- height: 670px !important;
+ height: 558px !important;
.el-dialog__header {
height: 20px;
}
--
Gitblit v1.8.0