积水点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"
|
||||
|
|
@ -83,25 +84,25 @@ export default {
|
|||
id: 'auditorReport'
|
||||
},
|
||||
{
|
||||
title:'城管局',
|
||||
id:'case'
|
||||
},
|
||||
{
|
||||
title:'智能算法识别',
|
||||
id:'video'
|
||||
},
|
||||
{
|
||||
title:'水务集团',
|
||||
id:'null'
|
||||
title: '交警',
|
||||
id: 'trafficPolice'
|
||||
},
|
||||
{
|
||||
title: '群众上报',
|
||||
id: 'commonReport'
|
||||
},
|
||||
{
|
||||
title:'交警',
|
||||
id:'trafficPolice'
|
||||
title: '智能算法识别',
|
||||
id: 'video'
|
||||
},
|
||||
{
|
||||
title: '城管局',
|
||||
id: 'case'
|
||||
}
|
||||
// {
|
||||
// title:'水务集团',
|
||||
// id:'null'
|
||||
// },
|
||||
],
|
||||
tabsActiveName: '全部',
|
||||
statisticalAnalysisIsShow: false,
|
||||
|
|
@ -127,7 +128,9 @@ export default {
|
|||
// },
|
||||
],
|
||||
listAll: [],
|
||||
policeList: []
|
||||
policeList: [],
|
||||
// 单项总数
|
||||
allNum: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -157,9 +160,10 @@ export default {
|
|||
selectWaterPoint().then((res) => {
|
||||
selectWaterPoliceList().then((policeRes) => {
|
||||
this.policeList = policeRes.data.data || []
|
||||
let dataAll = [...res.data.data, ...policeRes.data.data]
|
||||
const dataAll = [...res.data.data, ...policeRes.data.data]
|
||||
this.list = dataAll
|
||||
this.listAll = dataAll
|
||||
this.allNum = this.list.length
|
||||
bus.$emit('waterPoint', dataAll)
|
||||
})
|
||||
// this.list = res.data.data
|
||||
|
|
@ -174,7 +178,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getDesc (item) {
|
||||
let deepth = item.waterPointDepth ? parseFloat(item.waterPointDepth) * 100 : 0
|
||||
const deepth = item.waterPointDepth ? (parseFloat(item.waterPointDepth) * 100).toFixed(0) : 0
|
||||
switch (item.pointLevel) {
|
||||
case 'traffic':
|
||||
return `影响车辆(${deepth}cm)`
|
||||
|
|
@ -196,13 +200,13 @@ export default {
|
|||
switch (item) {
|
||||
case '影响车辆(>30cm)':
|
||||
this.list = this.list.filter(v => v.pointLevel != 'traffic')
|
||||
break;
|
||||
break
|
||||
case '影响行人(<30cm)':
|
||||
this.list = this.list.filter(v => v.pointLevel != 'pedestrian')
|
||||
break;
|
||||
break
|
||||
case '无积水(<10cm)':
|
||||
this.list = this.list.filter(v => v.pointLevel != 'non')
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
|
@ -213,13 +217,13 @@ export default {
|
|||
switch (item) {
|
||||
case '影响车辆(>30cm)':
|
||||
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'traffic'))
|
||||
break;
|
||||
break
|
||||
case '影响行人(<30cm)':
|
||||
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian'))
|
||||
break;
|
||||
break
|
||||
case '无积水(<10cm)':
|
||||
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non'))
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -228,20 +232,23 @@ export default {
|
|||
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) => {
|
||||
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)
|
||||
this.allNum = this.list.length
|
||||
})
|
||||
})
|
||||
} else if (item.title == '交警') {
|
||||
this.list = this.policeList
|
||||
this.allNum = this.list.length
|
||||
bus.$emit('waterPoint', this.list)
|
||||
} else if (item.id == 'auditorReport') {
|
||||
this.list = []
|
||||
|
|
@ -250,11 +257,12 @@ export default {
|
|||
this.list.push(tempItem)
|
||||
}
|
||||
})
|
||||
this.allNum = this.list.length
|
||||
bus.$emit('waterPoint', this.list)
|
||||
} else {
|
||||
selectReportOrigin({ reportOrigin: item.id }).then((res) => {
|
||||
|
||||
this.list = res.data.data
|
||||
this.allNum = this.list.length
|
||||
bus.$emit('waterPoint', res.data.data)
|
||||
})
|
||||
}
|
||||
|
|
@ -272,7 +280,6 @@ export default {
|
|||
default:
|
||||
return '未知'
|
||||
}
|
||||
|
||||
},
|
||||
openStatisticalAnalysis () {
|
||||
this.statisticalAnalysisIsShow = true
|
||||
|
|
@ -348,7 +355,7 @@ export default {
|
|||
},
|
||||
|
||||
openDialog (item) {
|
||||
bus.$emit("openWaterPointDialog", 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 {
|
||||
|
|
@ -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>
|
||||
|
|
@ -71,33 +71,39 @@
|
|||
<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 {};
|
||||
},
|
||||
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);
|
||||
console.log(this.feature)
|
||||
this.cameraData.push({
|
||||
cameraName: this.feature.data.channelName,
|
||||
channelCode: this.feature.data.channelCode
|
||||
|
|
@ -115,12 +121,12 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
filterButton: {
|
||||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
typeSelect: ['近7天', '近30天'],
|
||||
typeSelectActive: '近7天'
|
||||
},
|
||||
cameraData: []
|
||||
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// particularsClick(data){
|
||||
|
|
@ -153,14 +159,15 @@ export default {
|
|||
openVideo (row) {
|
||||
console.log(row)
|
||||
bus.$emit('openCurrentVideoWaterPoint', row.channelCode)
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
};
|
||||
debug: true
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .leaflet-popup {
|
||||
|
|
@ -168,13 +175,13 @@ export default {
|
|||
// }
|
||||
.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);
|
||||
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;
|
||||
// height: 420px;
|
||||
padding: 12px 16px;
|
||||
.pop-box {
|
||||
width: 100%;
|
||||
|
|
@ -186,8 +193,12 @@ export default {
|
|||
left: 0;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
opacity: .4;
|
||||
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
||||
opacity: 0.4;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba($color: #1fa2fe, $alpha: 1) 0,
|
||||
rgba($color: #1fa2fe, $alpha: 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -210,12 +221,12 @@ export default {
|
|||
.site-address {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
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;
|
||||
|
|
@ -243,7 +254,8 @@ export default {
|
|||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
th,td {
|
||||
th,
|
||||
td {
|
||||
border-right: 1px solid #325d94;
|
||||
}
|
||||
}
|
||||
|
|
@ -254,7 +266,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.leaflet-popup-close-button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue