|
|
@ -1,35 +1,87 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="congestion"> |
|
|
<div class="congestion"> |
|
|
<div class="board"> |
|
|
<div class="board"> |
|
|
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" |
|
|
<ProgressBar |
|
|
:reset="reset" /> |
|
|
class="keep-ratio" |
|
|
|
|
|
@selectItem="selectProgress" |
|
|
|
|
|
:dataList="dataList" |
|
|
|
|
|
:selectIndex="selectIndex" |
|
|
|
|
|
:reset="reset" |
|
|
|
|
|
/> |
|
|
<div class="searchPanel"> |
|
|
<div class="searchPanel"> |
|
|
<RadioGroup :options="[ |
|
|
<RadioGroup |
|
|
{ key: '1', label: '菏泽' }, |
|
|
:options="[ |
|
|
{ key: '3', label: '济南' }, |
|
|
{ key: '1', label: '菏泽' }, |
|
|
]" v-model="direction" type="button" /> |
|
|
{ key: '3', label: '济南' }, |
|
|
<el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择" @change="changeType"> |
|
|
]" |
|
|
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
v-model="direction" |
|
|
|
|
|
type="button" |
|
|
|
|
|
/> |
|
|
|
|
|
<el-select |
|
|
|
|
|
v-model="type" |
|
|
|
|
|
size="mini" |
|
|
|
|
|
class="selectRoad" |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
@change="changeType" |
|
|
|
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in typeOptions" |
|
|
|
|
|
:key="item.value" |
|
|
|
|
|
:label="item.label" |
|
|
|
|
|
:value="item.value" |
|
|
|
|
|
> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
<el-select v-model="quarter" size="medium" v-if="type == 'quarter'" class="selectRoad-medium" placeholder="请选择"> |
|
|
<el-select |
|
|
<el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value" |
|
|
v-model="quarter" |
|
|
style="width: 140px"> |
|
|
size="medium" |
|
|
|
|
|
v-if="type == 'quarter'" |
|
|
|
|
|
class="selectRoad-medium" |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in quarterOptions" |
|
|
|
|
|
:key="item.value" |
|
|
|
|
|
:label="item.label" |
|
|
|
|
|
:value="item.value" |
|
|
|
|
|
style="width: 140px" |
|
|
|
|
|
> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
<el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width: 140px" |
|
|
<el-date-picker |
|
|
:type="type == 'date' |
|
|
size="mini" |
|
|
? 'date' |
|
|
v-if="type != 'quarter'" |
|
|
: type == 'month' |
|
|
class="selectRoad" |
|
|
? 'month' |
|
|
v-model="dateTime" |
|
|
: type == 'year' |
|
|
style="width: 140px" |
|
|
? 'year' |
|
|
:type=" |
|
|
: '' |
|
|
type == 'date' |
|
|
" placeholder="请选择" :clearable="false" /> |
|
|
? 'date' |
|
|
|
|
|
: type == 'month' |
|
|
<el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" |
|
|
? 'month' |
|
|
icon="el-icon-search">查询</el-button> |
|
|
: type == 'year' |
|
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button> |
|
|
? 'year' |
|
|
|
|
|
: '' |
|
|
|
|
|
" |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
:clearable="false" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<el-button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
size="mini" |
|
|
|
|
|
class="btnSearch" |
|
|
|
|
|
@click="searchQuery" |
|
|
|
|
|
icon="el-icon-search" |
|
|
|
|
|
>查询</el-button |
|
|
|
|
|
> |
|
|
|
|
|
<el-button |
|
|
|
|
|
class="btnReset" |
|
|
|
|
|
size="mini" |
|
|
|
|
|
icon="el-icon-refresh-left" |
|
|
|
|
|
@click="onReset" |
|
|
|
|
|
>重置</el-button |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
@ -43,14 +95,28 @@ |
|
|
|
|
|
|
|
|
<div> |
|
|
<div> |
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
<Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..."></Empty> |
|
|
<Empty |
|
|
<div v-show="chart2List || chart2List.length > 0" id="chart2" class="btnChart" /> |
|
|
v-show="!chart2List || chart2List.length <= 0" |
|
|
|
|
|
text="暂无数据..." |
|
|
|
|
|
></Empty> |
|
|
|
|
|
<div |
|
|
|
|
|
v-show="chart2List || chart2List.length > 0" |
|
|
|
|
|
id="chart2" |
|
|
|
|
|
class="btnChart" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div> |
|
|
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle> |
|
|
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle> |
|
|
<Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..."></Empty> |
|
|
<Empty |
|
|
<div v-show="chart3List || chart3List.length > 0" id="chart3" class="btnChart" /> |
|
|
v-show="!chart3List || chart3List.length <= 0" |
|
|
|
|
|
text="暂无数据..." |
|
|
|
|
|
></Empty> |
|
|
|
|
|
<div |
|
|
|
|
|
v-show="chart3List || chart3List.length > 0" |
|
|
|
|
|
id="chart3" |
|
|
|
|
|
class="btnChart" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -65,7 +131,7 @@ import chart1 from "./assets/charts"; |
|
|
import chart2 from "./assets/charts2"; |
|
|
import chart2 from "./assets/charts2"; |
|
|
import chart3 from "./assets/charts3"; |
|
|
import chart3 from "./assets/charts3"; |
|
|
import ElQuarterPicker from "./ElQuarterPicker"; |
|
|
import ElQuarterPicker from "./ElQuarterPicker"; |
|
|
import moment from 'moment'; |
|
|
import moment from "moment"; |
|
|
import { |
|
|
import { |
|
|
getWarningTrend, |
|
|
getWarningTrend, |
|
|
getWarningSectionType, |
|
|
getWarningSectionType, |
|
|
@ -204,7 +270,7 @@ export default { |
|
|
], |
|
|
], |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
created() { }, |
|
|
created() {}, |
|
|
methods: { |
|
|
methods: { |
|
|
selectProgress(item, index) { |
|
|
selectProgress(item, index) { |
|
|
this.selectIndex = index; |
|
|
this.selectIndex = index; |
|
|
@ -255,18 +321,19 @@ export default { |
|
|
chart1.series[0].data = []; |
|
|
chart1.series[0].data = []; |
|
|
chart1.xAxis.data = []; |
|
|
chart1.xAxis.data = []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//月份的单独处理 |
|
|
//月份的单独处理 |
|
|
if (this.type == "month") { |
|
|
if (this.type == "month") { |
|
|
let daysInMonth = moment(this.dateTime, "YYYY-MM").daysInMonth(); |
|
|
let daysInMonth = moment(this.dateTime, "YYYY-MM").daysInMonth(); |
|
|
let sData = {}; |
|
|
let sData = {}; |
|
|
data.forEach(it => sData[parseInt(it.day.slice(-2))] = it.number) |
|
|
data.forEach( |
|
|
let pData = [] |
|
|
(it) => (sData[parseInt(it.day.slice(-2))] = it.number) |
|
|
|
|
|
); |
|
|
|
|
|
let pData = []; |
|
|
for (let index = 1; index <= daysInMonth; index++) { |
|
|
for (let index = 1; index <= daysInMonth; index++) { |
|
|
pData.push({ |
|
|
pData.push({ |
|
|
day: index, |
|
|
day: index, |
|
|
number: sData[index] || 0 |
|
|
number: sData[index] || 0, |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
data = pData; |
|
|
data = pData; |
|
|
} |
|
|
} |
|
|
@ -278,15 +345,15 @@ export default { |
|
|
3: [7, 8, 9], |
|
|
3: [7, 8, 9], |
|
|
4: [10, 11, 12], |
|
|
4: [10, 11, 12], |
|
|
}; |
|
|
}; |
|
|
let sData = {} |
|
|
let sData = {}; |
|
|
data.forEach(it => sData[it.month] = it.number); |
|
|
data.forEach((it) => (sData[it.month] = it.number)); |
|
|
let pData = [] |
|
|
let pData = []; |
|
|
for (let index = 0; index < 3; index++) { |
|
|
for (let index = 0; index < 3; index++) { |
|
|
let month = quarterMap[this.quarter][index]; |
|
|
let month = quarterMap[this.quarter][index]; |
|
|
pData.push({ |
|
|
pData.push({ |
|
|
month: month, |
|
|
month: month, |
|
|
number: sData[month] || 0 |
|
|
number: sData[month] || 0, |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
data = pData; |
|
|
data = pData; |
|
|
} |
|
|
} |
|
|
@ -515,10 +582,10 @@ export default { |
|
|
// this.type = "date"; |
|
|
// this.type = "date"; |
|
|
}, |
|
|
}, |
|
|
changeType() { |
|
|
changeType() { |
|
|
if (this.type == 'date') { |
|
|
if (this.type == "date") { |
|
|
this.dateTime = moment(new Date()).format("YYYY-MM-DD") |
|
|
this.dateTime = moment(new Date()).format("YYYY-MM-DD"); |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
@ -569,28 +636,28 @@ export default { |
|
|
|
|
|
|
|
|
// 填充渐变颜色 |
|
|
// 填充渐变颜色 |
|
|
// 颜色断点 |
|
|
// 颜色断点 |
|
|
// var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
// drawRoundRect(context, 267, 57, 140, 24, 12, gr) |
|
|
drawRoundRect(context, 357, 98, 140, 24, 12, gr); |
|
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
// // 颜色断点 |
|
|
// var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
// drawRoundRect(context, 267, 108, 140, 24, 12, gr) |
|
|
drawRoundRect(context, 357, 130, 140, 24, 12, gr); |
|
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
// // 颜色断点 |
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
// drawRoundRect(context, 267, 157, 140, 24, 12, gr) |
|
|
drawRoundRect(context, 357, 162, 140, 24, 12, gr); |
|
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
// // 颜色断点 |
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
// drawRoundRect(context, 267, 208, 140, 24, 12, gr) |
|
|
drawRoundRect(context, 357, 194, 140, 24, 12, gr); |
|
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
// // 颜色断点 |
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
@ -638,16 +705,21 @@ export default { |
|
|
justify-content: space-evenly; |
|
|
justify-content: space-evenly; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
|
|
|
|
|
|
>div { |
|
|
> div { |
|
|
width: 33%; |
|
|
width: 33%; |
|
|
height: 470px; |
|
|
height: 470px; |
|
|
background: linear-gradient(180deg, |
|
|
background: linear-gradient( |
|
|
rgba(6, 66, 88, 0.2) 0%, |
|
|
180deg, |
|
|
#064258 100%); |
|
|
rgba(6, 66, 88, 0.2) 0%, |
|
|
|
|
|
#064258 100% |
|
|
|
|
|
); |
|
|
border: 1px solid; |
|
|
border: 1px solid; |
|
|
border-image: linear-gradient(360deg, |
|
|
border-image: linear-gradient( |
|
|
|
|
|
360deg, |
|
|
rgba(55, 231, 255, 0.3), |
|
|
rgba(55, 231, 255, 0.3), |
|
|
rgba(55, 231, 255, 0)) 1 1; |
|
|
rgba(55, 231, 255, 0) |
|
|
|
|
|
) |
|
|
|
|
|
1 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:nth-child(1) { |
|
|
:nth-child(1) { |
|
|
@ -763,12 +835,54 @@ export default { |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
<style lang="scss"> |
|
|
div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today span, |
|
|
div.el-popover:has(> .el-date-picker) |
|
|
div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell, |
|
|
div |
|
|
div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span, |
|
|
.el-picker-panel__body |
|
|
div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell, |
|
|
.el-picker-panel__content |
|
|
div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span, |
|
|
table |
|
|
div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell { |
|
|
tr |
|
|
|
|
|
td.today |
|
|
|
|
|
span, |
|
|
|
|
|
div.el-popover:has(> .el-date-picker) |
|
|
|
|
|
div |
|
|
|
|
|
.el-picker-panel__body |
|
|
|
|
|
.el-picker-panel__content |
|
|
|
|
|
table |
|
|
|
|
|
tr |
|
|
|
|
|
td.today |
|
|
|
|
|
.cell, |
|
|
|
|
|
div.el-picker-panel.el-date-picker.el-popper |
|
|
|
|
|
div |
|
|
|
|
|
.el-picker-panel__body |
|
|
|
|
|
.el-picker-panel__content |
|
|
|
|
|
table |
|
|
|
|
|
tr |
|
|
|
|
|
td.today |
|
|
|
|
|
span, |
|
|
|
|
|
div.el-picker-panel.el-date-picker.el-popper |
|
|
|
|
|
div |
|
|
|
|
|
.el-picker-panel__body |
|
|
|
|
|
.el-picker-panel__content |
|
|
|
|
|
table |
|
|
|
|
|
tr |
|
|
|
|
|
td.today |
|
|
|
|
|
.cell, |
|
|
|
|
|
div.el-picker-panel.el-date-range-picker.el-popper |
|
|
|
|
|
div |
|
|
|
|
|
.el-picker-panel__body |
|
|
|
|
|
.el-picker-panel__content |
|
|
|
|
|
table |
|
|
|
|
|
tr |
|
|
|
|
|
td.today |
|
|
|
|
|
span, |
|
|
|
|
|
div.el-picker-panel.el-date-range-picker.el-popper |
|
|
|
|
|
div |
|
|
|
|
|
.el-picker-panel__body |
|
|
|
|
|
.el-picker-panel__content |
|
|
|
|
|
table |
|
|
|
|
|
tr |
|
|
|
|
|
td.today |
|
|
|
|
|
.cell { |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
