积水点echarts图
This commit is contained in:
gaoyuanwei
parent
1cd04c95fc
commit
3aa1284cfb
|
|
@ -8,7 +8,6 @@ export function selectWaterPoint(params) {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
export function selectWaterCamera(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectWaterCamera',
|
||||
|
|
@ -65,3 +64,35 @@ export function selectWaterPoliceList(params) {
|
|||
params
|
||||
})
|
||||
}
|
||||
// 根据积水点查询该点存在积水情况的日期
|
||||
export function selectWaterPondingDate(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectWaterPondingDate',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 查询当天的积水点深度情况
|
||||
export function selectWaterPondingInDay(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectWaterPondingInDay',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 查询积水点当月内每天最深深度
|
||||
export function selectWaterPondingInMonth(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectWaterPondingInMonth',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 查询积水点当月内每天积水时长
|
||||
export function selectWaterPondingHoursInMonth(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectWaterPondingHoursInMonth',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="allNum">总数：{{allNum}}个</div>
|
||||
<div class="filter-btn-box">
|
||||
<div class="filter-btn-processStateSelect">
|
||||
<div class="processStateSelect-btn"
|
||||
|
|
@ -62,7 +63,7 @@
|
|||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
|
||||
import { selectWaterPoint,selectWaterCamera,selectReportOrigin, selectWaterPoliceList } from '@/api/waterPoints'
|
||||
import { selectWaterPoint, selectWaterCamera, selectReportOrigin, selectWaterPoliceList } from '@/api/waterPoints'
|
||||
import StatisticalAnalysis from './StatisticalAnalysis.vue'
|
||||
import bus from '@/views/layout/bus'
|
||||
import {
|
||||
|
|
@ -75,33 +76,33 @@ export default {
|
|||
return {
|
||||
tabsButton: [
|
||||
{
|
||||
title:'全部',
|
||||
id:'all'
|
||||
title: '全部',
|
||||
id: 'all'
|
||||
},
|
||||
{
|
||||
title:'水务局',
|
||||
id:'auditorReport'
|
||||
title: '水务局',
|
||||
id: 'auditorReport'
|
||||
},
|
||||
{
|
||||
title:'城管局',
|
||||
id:'case'
|
||||
title: '交警',
|
||||
id: 'trafficPolice'
|
||||
},
|
||||
{
|
||||
title:'智能算法识别',
|
||||
id:'video'
|
||||
title: '群众上报',
|
||||
id: 'commonReport'
|
||||
},
|
||||
{
|
||||
title:'水务集团',
|
||||
id:'null'
|
||||
title: '智能算法识别',
|
||||
id: 'video'
|
||||
},
|
||||
{
|
||||
title:'群众上报',
|
||||
id:'commonReport'
|
||||
},
|
||||
{
|
||||
title:'交警',
|
||||
id:'trafficPolice'
|
||||
},
|
||||
title: '城管局',
|
||||
id: 'case'
|
||||
}
|
||||
// {
|
||||
// title:'水务集团',
|
||||
// id:'null'
|
||||
// },
|
||||
],
|
||||
tabsActiveName: '全部',
|
||||
statisticalAnalysisIsShow: false,
|
||||
|
|
@ -124,10 +125,12 @@ export default {
|
|||
// topType: '物联感知',
|
||||
// type: '影响车辆(>30cm)',
|
||||
// text: '液位：12cm'
|
||||
// },
|
||||
// },
|
||||
],
|
||||
listAll:[],
|
||||
policeList: []
|
||||
listAll: [],
|
||||
policeList: [],
|
||||
// 单项总数
|
||||
allNum: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -137,8 +140,8 @@ export default {
|
|||
const currentDate = new Date()
|
||||
currentDate.setTime(currentDate.getTime())
|
||||
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000)
|
||||
const yMonth = currentDate.getMonth() > 8 ? currentDate.getMonth() + 1: '0' + (currentDate.getMonth()+1)
|
||||
const yDate = currentDate.getDate() > 9 ? currentDate.getDate(): '0' + currentDate.getDate()
|
||||
const yMonth = currentDate.getMonth() > 8 ? currentDate.getMonth() + 1 : '0' + (currentDate.getMonth() + 1)
|
||||
const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
|
||||
this.preTime =
|
||||
currentDate.getFullYear() +
|
||||
'-' +
|
||||
|
|
@ -154,13 +157,14 @@ export default {
|
|||
// this.selectRaise()
|
||||
// this.selectNoiceEvent()
|
||||
|
||||
selectWaterPoint().then( (res) => {
|
||||
selectWaterPoint().then((res) => {
|
||||
selectWaterPoliceList().then((policeRes) => {
|
||||
this.policeList = policeRes.data.data || []
|
||||
let dataAll = [...res.data.data, ...policeRes.data.data]
|
||||
this.policeList = policeRes.data.data || []
|
||||
const dataAll = [...res.data.data, ...policeRes.data.data]
|
||||
this.list = dataAll
|
||||
this.listAll = dataAll
|
||||
bus.$emit('waterPoint',dataAll)
|
||||
this.allNum = this.list.length
|
||||
bus.$emit('waterPoint', dataAll)
|
||||
})
|
||||
// this.list = res.data.data
|
||||
// this.listAll = res.data.data
|
||||
|
|
@ -173,9 +177,9 @@ export default {
|
|||
// })
|
||||
},
|
||||
methods: {
|
||||
getDesc(item) {
|
||||
let deepth = item.waterPointDepth ? parseFloat(item.waterPointDepth) * 100 : 0
|
||||
switch(item.pointLevel) {
|
||||
getDesc (item) {
|
||||
const deepth = item.waterPointDepth ? (parseFloat(item.waterPointDepth) * 100).toFixed(0) : 0
|
||||
switch (item.pointLevel) {
|
||||
case 'traffic':
|
||||
return `影响车辆(${deepth}cm)`
|
||||
break
|
||||
|
|
@ -190,76 +194,80 @@ export default {
|
|||
selectType (item) {
|
||||
if (this.filterButton.typeActive.indexOf(item) > -1) {
|
||||
this.filterButton.typeActive.splice(this.filterButton.typeActive.indexOf(item), 1)
|
||||
if(this.filterButton.typeActive.length == 0){
|
||||
if (this.filterButton.typeActive.length == 0) {
|
||||
this.list = []
|
||||
} else{
|
||||
switch(item){
|
||||
} else {
|
||||
switch (item) {
|
||||
case '影响车辆(>30cm)':
|
||||
this.list = this.list.filter( v => v.pointLevel != 'traffic')
|
||||
break;
|
||||
this.list = this.list.filter(v => v.pointLevel != 'traffic')
|
||||
break
|
||||
case '影响行人(<30cm)':
|
||||
this.list = this.list.filter( v => v.pointLevel != 'pedestrian')
|
||||
break;
|
||||
this.list = this.list.filter(v => v.pointLevel != 'pedestrian')
|
||||
break
|
||||
case '无积水(<10cm)':
|
||||
this.list = this.list.filter( v => v.pointLevel != 'non')
|
||||
break;
|
||||
this.list = this.list.filter(v => v.pointLevel != 'non')
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.filterButton.typeActive.push(item)
|
||||
if(this.filterButton.typeActive.length == 3){
|
||||
if (this.filterButton.typeActive.length == 3) {
|
||||
this.list = this.listAll
|
||||
} else {
|
||||
switch(item){
|
||||
switch (item) {
|
||||
case '影响车辆(>30cm)':
|
||||
this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'traffic'))
|
||||
break;
|
||||
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'traffic'))
|
||||
break
|
||||
case '影响行人(<30cm)':
|
||||
this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'pedestrian'))
|
||||
break;
|
||||
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian'))
|
||||
break
|
||||
case '无积水(<10cm)':
|
||||
this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'non'))
|
||||
break;
|
||||
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non'))
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
bus.$emit('waterPoint',this.list)
|
||||
bus.$emit('waterPoint', this.list)
|
||||
this.$parent.eventCheckList = this.filterButton.typeActive
|
||||
},
|
||||
tabHandleClick (item) {
|
||||
this.allNum = 0
|
||||
this.tabsActiveName = item.title
|
||||
this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
|
||||
|
||||
if (item.title == '全部') {
|
||||
selectWaterPoint().then( (res) => {
|
||||
selectWaterPoint().then((res) => {
|
||||
selectWaterPoliceList().then((policeRes) => {
|
||||
let dataAll = [...res.data.data, ...policeRes.data.data]
|
||||
const dataAll = [...res.data.data, ...policeRes.data.data]
|
||||
this.list = dataAll
|
||||
// this.listAll = dataAll
|
||||
bus.$emit('waterPoint',dataAll)
|
||||
bus.$emit('waterPoint', dataAll)
|
||||
this.allNum = this.list.length
|
||||
})
|
||||
})
|
||||
} else if(item.title == '交警') {
|
||||
} else if (item.title == '交警') {
|
||||
this.list = this.policeList
|
||||
bus.$emit('waterPoint',this.list)
|
||||
} else if(item.id == 'auditorReport') {
|
||||
this.allNum = this.list.length
|
||||
bus.$emit('waterPoint', this.list)
|
||||
} else if (item.id == 'auditorReport') {
|
||||
this.list = []
|
||||
this.listAll.forEach(tempItem => {
|
||||
if(tempItem.reportOrigin === 'auditorReport') {
|
||||
if (tempItem.reportOrigin === 'auditorReport') {
|
||||
this.list.push(tempItem)
|
||||
}
|
||||
})
|
||||
bus.$emit('waterPoint',this.list)
|
||||
this.allNum = this.list.length
|
||||
bus.$emit('waterPoint', this.list)
|
||||
} else {
|
||||
selectReportOrigin({reportOrigin:item.id}).then( (res) => {
|
||||
|
||||
selectReportOrigin({ reportOrigin: item.id }).then((res) => {
|
||||
this.list = res.data.data
|
||||
bus.$emit('waterPoint',res.data.data)
|
||||
this.allNum = this.list.length
|
||||
bus.$emit('waterPoint', res.data.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
reportOrigin(reportOrigin){
|
||||
reportOrigin (reportOrigin) {
|
||||
switch (reportOrigin) {
|
||||
case 'auditorReport':
|
||||
return '水务集团上报'
|
||||
|
|
@ -272,7 +280,6 @@ export default {
|
|||
default:
|
||||
return '未知'
|
||||
}
|
||||
|
||||
},
|
||||
openStatisticalAnalysis () {
|
||||
this.statisticalAnalysisIsShow = true
|
||||
|
|
@ -347,8 +354,8 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
openDialog(item) {
|
||||
bus.$emit("openWaterPointDialog", item);
|
||||
openDialog (item) {
|
||||
bus.$emit('openWaterPointDialog', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -494,7 +501,10 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.allNum {
|
||||
color: #ffffff;
|
||||
margin: 12px 0px 0 12px;
|
||||
}
|
||||
.filter-btn-box {
|
||||
margin-top: 16px;
|
||||
.filter-btn-typeSelect {
|
||||
|
|
@ -535,17 +545,17 @@ export default {
|
|||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn:nth-child(1){
|
||||
.processStateSelect-btn:nth-child(1) {
|
||||
.select-circle {
|
||||
border: 1px solid #f74b3f;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn:nth-child(2){
|
||||
.processStateSelect-btn:nth-child(2) {
|
||||
.select-circle {
|
||||
border: 1px solid #ffae2b;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn:nth-child(3){
|
||||
.processStateSelect-btn:nth-child(3) {
|
||||
.select-circle {
|
||||
border: 1px solid #31d779;
|
||||
}
|
||||
|
|
@ -565,17 +575,17 @@ export default {
|
|||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn-active:nth-child(1){
|
||||
.processStateSelect-btn-active:nth-child(1) {
|
||||
.select-circle::after {
|
||||
background: #f74b3f;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn-active:nth-child(2){
|
||||
.processStateSelect-btn-active:nth-child(2) {
|
||||
.select-circle::after {
|
||||
background: #ffae2b;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn-active:nth-child(3){
|
||||
.processStateSelect-btn-active:nth-child(3) {
|
||||
.select-circle::after {
|
||||
background: #31d779;
|
||||
}
|
||||
|
|
@ -691,7 +701,7 @@ export default {
|
|||
.box3 {
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
height: 620px;
|
||||
height: 600px;
|
||||
overflow-y: scroll;
|
||||
cursor: pointer;
|
||||
.item {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,445 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<h1>历史水位趋势图</h1>
|
||||
<div style="padding: 0.1rem 0">
|
||||
<el-radio-group v-model="radio" @change="radioChange">
|
||||
<el-radio label="day">积水历史查询</el-radio>
|
||||
<el-radio label="month">历史积水高点趋势</el-radio>
|
||||
<el-radio label="monthTime">历史积水时长</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div>
|
||||
请选择日期：
|
||||
<el-cascader
|
||||
v-if="radio === 'day'"
|
||||
placeholder="请选择日期"
|
||||
:options="dateYearBtns"
|
||||
v-model="dateYearData"
|
||||
popper-class="pc-sel-area-cascader"
|
||||
filterable></el-cascader>
|
||||
<el-cascader
|
||||
v-if="radio === 'month'"
|
||||
placeholder="请选择日期"
|
||||
:options="dateMonthBtns"
|
||||
v-model="dateMonthData"
|
||||
popper-class="pc-sel-area-cascader"
|
||||
filterable></el-cascader>
|
||||
<el-cascader
|
||||
v-if="radio === 'monthTime'"
|
||||
placeholder="请选择日期"
|
||||
:options="dateMonthBtns"
|
||||
v-model="dateMonthTimeData"
|
||||
popper-class="pc-sel-area-cascader"
|
||||
filterable></el-cascader>
|
||||
</div>
|
||||
<div v-if="radio === 'day'">
|
||||
<div id="water-points-curve"></div>
|
||||
</div>
|
||||
<div v-else-if="radio === 'month'">
|
||||
<div id="water-points-columnar"></div>
|
||||
</div>
|
||||
<div v-else-if="radio === 'monthTime'">
|
||||
<div id="water-points-time"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { selectWaterPondingDate, selectWaterPondingInMonth, selectWaterPondingInDay, selectWaterPondingHoursInMonth } from '@/api/waterPoints'
|
||||
import { months } from 'moment'
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
radio: 'day',
|
||||
// 时间容器
|
||||
dateList: [],
|
||||
// 联级折线选项
|
||||
dateYearBtns: [],
|
||||
// 联级柱状选项
|
||||
dateMonthBtns: [],
|
||||
// 折线图
|
||||
depthDayX: [],
|
||||
depthDayY: [],
|
||||
// 柱状图
|
||||
depthMonthX: [],
|
||||
depthMonthY: [],
|
||||
// 时间柱状图
|
||||
depthMonthTimeY: [],
|
||||
depthMonthTimeX: [],
|
||||
// 联级选择
|
||||
dateYearData: [],
|
||||
dateMonthData: [],
|
||||
dateMonthTimeData: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dateYearData (val) {
|
||||
console.log(this.dateYearData, val, 'aaaaa')
|
||||
this.depthDayX = []
|
||||
this.depthDayY = []
|
||||
selectWaterPondingInDay({ water_point_id: this.feature.data.waterPointId, year: String(this.dateYearData[0]), month: String(this.dateYearData[1]), day: String(this.dateYearData[2]) }).then((res) => {
|
||||
console.log(res.data.data, 'res')
|
||||
res.data.data.map(val => {
|
||||
this.depthDayX.push(val.hour + ':' + val.minute)
|
||||
this.depthDayY.push(Number(val.depth) * 100)
|
||||
})
|
||||
console.log(this.depthDayX, this.depthDayY, ' this.depthDayX')
|
||||
this.initEventTypeCharts()
|
||||
})
|
||||
},
|
||||
dateMonthData (val) {
|
||||
console.log(this.dateMonthData, val, 'aaaaa')
|
||||
this.depthMonthX = []
|
||||
this.depthMonthY = []
|
||||
selectWaterPondingInMonth({ water_point_id: this.feature.data.waterPointId, year: String(this.dateMonthData[0]), month: String(this.dateMonthData[1]) }).then((res) => {
|
||||
console.log(res.data.data, 'res')
|
||||
res.data.data.map(val => {
|
||||
this.depthMonthY.push(Number(val.depth) * 100)
|
||||
this.depthMonthX.push(val.year + '/' + val.month + '/' + val.day)
|
||||
})
|
||||
console.log(this.depthMonthX, this.depthMonthY, ' this.depthDayX')
|
||||
this.initEventTypeCharts2()
|
||||
})
|
||||
},
|
||||
dateMonthTimeData (val) {
|
||||
console.log(this.dateMonthTimeData, val, 'aaaaa')
|
||||
this.depthMonthTimeX = []
|
||||
this.depthMonthTimeY = []
|
||||
selectWaterPondingHoursInMonth({ water_point_id: this.feature.data.waterPointId, year: String(this.dateMonthTimeData[0]), month: String(this.dateMonthTimeData[1]) }).then((res) => {
|
||||
console.log(res.data.data, 'res')
|
||||
res.data.data.map(val => {
|
||||
this.depthMonthTimeY.push(Number(val.hours))
|
||||
this.depthMonthTimeX.push(val.year + '/' + val.month + '/' + val.day)
|
||||
})
|
||||
console.log(this.depthMonthX, this.depthMonthY, ' this.depthDayX')
|
||||
this.initEventTypeCharts3()
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
radioChange (value) {
|
||||
switch (value) {
|
||||
case 'day':
|
||||
this.initEventTypeCharts()
|
||||
break
|
||||
case 'month':
|
||||
this.initEventTypeCharts2()
|
||||
break
|
||||
case 'monthTime':
|
||||
this.initEventTypeCharts3()
|
||||
break
|
||||
}
|
||||
},
|
||||
dataChange () {
|
||||
console.log(this.feature.data.waterPointId, 'feature')
|
||||
selectWaterPondingDate({ water_point_id: this.feature.data.waterPointId }).then((res) => {
|
||||
this.dateList = res.data.data
|
||||
this.dateList.map(val => {
|
||||
console.log('111111111111111111111', this.dateYearBtns, val)
|
||||
let flag1 = false
|
||||
let index1 = -1
|
||||
this.dateYearBtns.map((v, index) => {
|
||||
if (v.label == val.year) {
|
||||
flag1 = true
|
||||
index1 = index
|
||||
}
|
||||
})
|
||||
if (!flag1) {
|
||||
this.dateYearBtns.push({ label: val.year, value: val.year, children: [{ label: val.month, value: val.month, children: [{ label: val.day, value: val.day }] }] })
|
||||
} else {
|
||||
let flag2 = false
|
||||
let index2 = -1
|
||||
console.log('11111111111', this.dateYearBtns[index1], index1)
|
||||
this.dateYearBtns[index1].children.map((item, i) => {
|
||||
if (item.label == val.month) {
|
||||
flag2 = true
|
||||
index2 = i
|
||||
}
|
||||
})
|
||||
if (!flag2) {
|
||||
this.dateYearBtns[index1].children.push({ label: val.month, value: val.month, children: [{ label: val.day, value: val.day }] })
|
||||
} else {
|
||||
this.dateYearBtns[index1].children[index2].children.push({ label: val.day, value: val.day })
|
||||
}
|
||||
}
|
||||
})
|
||||
this.dateList.map(val => {
|
||||
let flag1 = false
|
||||
let index1 = -1
|
||||
this.dateMonthBtns.map((v, index) => {
|
||||
if (v.label == val.year) {
|
||||
flag1 = true
|
||||
index1 = index
|
||||
}
|
||||
})
|
||||
if (!flag1) {
|
||||
this.dateMonthBtns.push({ label: val.year, value: val.year, children: [{ label: val.month, value: val.month }] })
|
||||
} else {
|
||||
let flag2 = false
|
||||
let index2 = -1
|
||||
console.log('2222222', this.dateMonthBtns[index1], index1)
|
||||
this.dateMonthBtns[index1].children.map((item, i) => {
|
||||
if (item.label == val.month) {
|
||||
flag2 = true
|
||||
index2 = i
|
||||
}
|
||||
})
|
||||
if (!flag2) {
|
||||
this.dateMonthBtns[index1].children.push({ label: val.month, value: val.month })
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('33333333', this.dateMonthBtns)
|
||||
console.log(this.dateList[0], ' this.dateMonthBtns')
|
||||
this.dateYearData.push(this.dateList[0].year, this.dateList[0].month, this.dateList[0].day)
|
||||
this.dateMonthData.push(this.dateList[0].year, this.dateList[0].month)
|
||||
this.dateMonthTimeData.push(this.dateList[0].year, this.dateList[0].month)
|
||||
console.log(this.dateYearData, 'this.dateMonthBtns')
|
||||
})
|
||||
},
|
||||
// 折线图
|
||||
initEventTypeCharts () {
|
||||
const option = {
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.depthDayX,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255,1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位：cm',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255,1)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 去掉折线图中的横线
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '深度',
|
||||
data: this.depthDayY,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#1ffefd'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#1ffefd' // 拐点边框颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const eventType = echarts.init(
|
||||
document.getElementById('water-points-curve')
|
||||
)
|
||||
eventType.setOption(option)
|
||||
},
|
||||
// 柱状图
|
||||
initEventTypeCharts2 () {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.depthMonthX,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位：cm',
|
||||
splitLine: {
|
||||
show: false // 去掉折线图中的横线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '深度',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: this.depthMonthY,
|
||||
itemStyle: {
|
||||
color: '#1ffefd'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
const eventType = echarts.init(
|
||||
document.getElementById('water-points-columnar')
|
||||
)
|
||||
eventType.setOption(option)
|
||||
},
|
||||
// 时长柱状图
|
||||
initEventTypeCharts3 () {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.depthMonthTimeX,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位：h',
|
||||
splitLine: {
|
||||
show: false // 去掉折线图中的横线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '时长',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: this.depthMonthTimeY,
|
||||
itemStyle: {
|
||||
color: '#1ffefd'
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
const eventType = echarts.init(
|
||||
document.getElementById('water-points-time')
|
||||
)
|
||||
eventType.setOption(option)
|
||||
}
|
||||
},
|
||||
created () {},
|
||||
mounted () {
|
||||
this.dataChange()
|
||||
console.log(this.dateYearBtns[0], 'aaaaaaa')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
::v-deep .el-dropdown {
|
||||
color: #ffffff;
|
||||
}
|
||||
#water-points-curve,
|
||||
#water-points-columnar {
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
}
|
||||
::v-deep .el-radio {
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-radio__input.is-checked .el-radio__inner {
|
||||
border-color: #1ffefd;
|
||||
background: #1ffefd;
|
||||
}
|
||||
::v-deep .el-radio.is-checked {
|
||||
.el-radio__label {
|
||||
color: #1ffefd !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
border: none;
|
||||
background-color: rgba(24, 51, 76, 0.95);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.pc-sel-area-cascader {
|
||||
border: 1px solid #1ffefd !important;
|
||||
.el-cascader-node.in-active-path,
|
||||
.el-cascader-node.is-active,
|
||||
.el-cascader-node.is-selectable.in-checked-path {
|
||||
color: #1ffefd;
|
||||
}
|
||||
.el-cascader-node:hover {
|
||||
// 设置鼠标滑过时文字颜色
|
||||
color: #1ffefd;
|
||||
}
|
||||
.el-cascader-menu {
|
||||
background: rgba(24, 51, 76, 0.95) !important;
|
||||
border-right: 1px solid #1ffefd;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-cascader-node:not(.is-disabled):focus,
|
||||
.el-cascader-node:not(.is-disabled):hover {
|
||||
background: rgba(24, 51, 76, 0.95);
|
||||
}
|
||||
.el-popper[x-placement^="bottom"] .popper__arrow::after {
|
||||
border-bottom-color: rgba(24, 51, 76, 0.95) !important;
|
||||
}
|
||||
.el-popper[x-placement^="bottom"] .popper__arrow {
|
||||
border-bottom-color: rgba(24, 51, 76, 0.95) !important;
|
||||
}
|
||||
.popper__arrow {
|
||||
border-bottom-color: #1ffefd !important;
|
||||
}
|
||||
.popper__arrow::after {
|
||||
border-bottom-color: #1ffefd !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="site-content">
|
||||
<div class="site-content-right">
|
||||
<div
|
||||
class="images"
|
||||
class="images"
|
||||
v-viewer="{movable: false}"
|
||||
style="
|
||||
width: 280px;
|
||||
|
|
@ -71,40 +71,46 @@
|
|||
<div class="btn-area">
|
||||
<button class="button" @click="analyse(feature)">线索分析</button>
|
||||
</div>
|
||||
<WaterHistory v-if="feature.data.reportOrigin!='police'" :feature='feature' />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bus from "@/views/layout/bus";
|
||||
import bus from '@/views/layout/bus'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import { directive as viewer } from "v-viewer"
|
||||
import { directive as viewer } from 'v-viewer'
|
||||
// import * as echarts from 'echarts'
|
||||
// import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
||||
import { selectCameraByName } from '@/api/waterPoints'
|
||||
import WaterHistory from './WaterHistory.vue'
|
||||
export default {
|
||||
name: "",
|
||||
name: '',
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
|
||||
if(res.data.data){
|
||||
this.feature.data.channelCode = res.data.data[0].channelCode
|
||||
this.feature.data.channelName = res.data.data[0].channelName
|
||||
this.feature.data.ssqy = res.data.data[0].ssqy
|
||||
this.feature.data.videoCapture = res.data.data[0].videoCapture
|
||||
console.log(this.feature);
|
||||
this.cameraData.push({
|
||||
cameraName: this.feature.data.channelName,
|
||||
channelCode: this.feature.data.channelCode
|
||||
})
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
components: {
|
||||
WaterHistory
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.feature, 'feature')
|
||||
selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
|
||||
if (res.data.data) {
|
||||
this.feature.data.channelCode = res.data.data[0].channelCode
|
||||
this.feature.data.channelName = res.data.data[0].channelName
|
||||
this.feature.data.ssqy = res.data.data[0].ssqy
|
||||
this.feature.data.videoCapture = res.data.data[0].videoCapture
|
||||
console.log(this.feature)
|
||||
this.cameraData.push({
|
||||
cameraName: this.feature.data.channelName,
|
||||
channelCode: this.feature.data.channelCode
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
// console.log(res)
|
||||
// })
|
||||
|
|
@ -112,33 +118,33 @@ export default {
|
|||
// console.log(res)
|
||||
// })
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
filterButton:{
|
||||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
filterButton: {
|
||||
typeSelect: ['近7天', '近30天'],
|
||||
typeSelectActive: '近7天'
|
||||
},
|
||||
cameraData: []
|
||||
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// particularsClick(data){
|
||||
// console.log(data)
|
||||
// bus.$emit("mainClick", data);
|
||||
// },
|
||||
getLevel(data) {
|
||||
if(data.reportOrigin === 'police') {
|
||||
getLevel (data) {
|
||||
if (data.reportOrigin === 'police') {
|
||||
return '暂无'
|
||||
} else if(data.pointLevel=='traffic') {
|
||||
} else if (data.pointLevel == 'traffic') {
|
||||
return '影响车辆(>30cm)'
|
||||
} else if(data.pointLevel=='pedestrian') {
|
||||
} else if (data.pointLevel == 'pedestrian') {
|
||||
return '影响行人(<30cm)'
|
||||
} else {
|
||||
return '无积水(<10cm)'
|
||||
}
|
||||
},
|
||||
typeSelect(item) {
|
||||
typeSelect (item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
},
|
||||
|
||||
|
|
@ -147,121 +153,126 @@ export default {
|
|||
viewer.show()
|
||||
},
|
||||
// 线索分析
|
||||
analyse(data) {
|
||||
bus.$emit('waterPointAnalysis',data)
|
||||
analyse (data) {
|
||||
bus.$emit('waterPointAnalysis', data)
|
||||
},
|
||||
openVideo(row){
|
||||
openVideo (row) {
|
||||
console.log(row)
|
||||
bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
|
||||
},
|
||||
bus.$emit('openCurrentVideoWaterPoint', row.channelCode)
|
||||
}
|
||||
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
};
|
||||
debug: true
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .leaflet-popup {
|
||||
// width: auto !important;
|
||||
// }
|
||||
.water-point-pop {
|
||||
.leaflet-popup-content-wrapper {
|
||||
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
|
||||
background: rgba(24,51,76,.95);
|
||||
border: 1px solid rgba(50,227,235,.95);
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
width: 634px !important;
|
||||
height: 420px;
|
||||
padding: 12px 16px;
|
||||
.pop-box {
|
||||
.water-point-pop {
|
||||
.leaflet-popup-content-wrapper {
|
||||
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: 0.4);
|
||||
background: rgba(24, 51, 76, 0.95);
|
||||
border: 1px solid rgba(50, 227, 235, 0.95);
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
width: 634px !important;
|
||||
// height: 420px;
|
||||
padding: 12px 16px;
|
||||
.pop-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.title-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba($color: #1fa2fe, $alpha: 1) 0,
|
||||
rgba($color: #1fa2fe, $alpha: 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.title-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
opacity: .4;
|
||||
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
||||
.title {
|
||||
color: #1ffefd;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
margin-left: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0494ff;
|
||||
color: #1ffefd;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
color: #1ffefd;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
margin-left: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0494ff;
|
||||
color: #1ffefd;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
.site-address {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png)
|
||||
no-repeat left center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.site-content {
|
||||
.site-content-right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// width: 280px;
|
||||
.images {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.video-table {
|
||||
margin-top: 20px;
|
||||
width: 300px;
|
||||
h4 {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.site-address {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.site-content {
|
||||
|
||||
.site-content-right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// width: 280px;
|
||||
.images {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.video-table {
|
||||
margin-top: 20px;
|
||||
width: 300px;
|
||||
h4 {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table{
|
||||
margin-top: 8px;
|
||||
border: 1px solid #325d94;
|
||||
.el-table__body-wrapper{
|
||||
height: 90px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
.el-table {
|
||||
margin-top: 8px;
|
||||
border: 1px solid #325d94;
|
||||
.el-table__body-wrapper {
|
||||
height: 90px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
th,td {
|
||||
border-right: 1px solid #325d94;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
display: none;
|
||||
th,
|
||||
td {
|
||||
border-right: 1px solid #325d94;
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.leaflet-popup-close-button {
|
||||
color: #3afefc !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-close-button {
|
||||
color: #3afefc !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang='scss' scoped>
|
||||
.particulars {
|
||||
|
|
|
|||
Loading…
Reference in New Issue