|
|
@ -1,125 +1,224 @@ |
|
|
<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 |
|
|
|
|
|
class="keep-ratio" |
|
|
|
|
|
@selectItem="selectProgress" |
|
|
|
|
|
:dataList="dataList" |
|
|
|
|
|
:selectIndex="selectIndex" |
|
|
|
|
|
/> |
|
|
<div class="searchPanel"> |
|
|
<div class="searchPanel"> |
|
|
<RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction" type="button" /> |
|
|
<RadioGroup |
|
|
<el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择"> |
|
|
:options="[ |
|
|
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
{ key: '1', label: '菏泽' }, |
|
|
|
|
|
{ key: '3', label: '济南' }, |
|
|
|
|
|
]" |
|
|
|
|
|
v-model="direction" |
|
|
|
|
|
type="button" |
|
|
|
|
|
/> |
|
|
|
|
|
<el-select |
|
|
|
|
|
v-model="type" |
|
|
|
|
|
size="mini" |
|
|
|
|
|
class="selectRoad" |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
> |
|
|
|
|
|
<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' ? 'date' : type == 'month' ? 'month' : type == 'year' ? 'year' : ''" placeholder="请选择" |
|
|
size="mini" |
|
|
:clearable="false" /> |
|
|
v-if="type != 'quarter'" |
|
|
|
|
|
class="selectRoad" |
|
|
<el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button> |
|
|
v-model="dateTime" |
|
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button> |
|
|
style="width: 140px" |
|
|
|
|
|
:type=" |
|
|
|
|
|
type == 'date' |
|
|
|
|
|
? 'date' |
|
|
|
|
|
: type == 'month' |
|
|
|
|
|
? 'month' |
|
|
|
|
|
: type == 'year' |
|
|
|
|
|
? '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> |
|
|
|
|
|
|
|
|
<div class="body"> |
|
|
<div class="body"> |
|
|
<div> |
|
|
<div> |
|
|
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle> |
|
|
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle> |
|
|
<Empty v-show="!chart1List || chart1List.length <= 0" text="暂无数据..."></Empty> |
|
|
<Empty |
|
|
<div v-show="chart1List || chart1List.length > 0" id="chart1" class="btnChart" /> |
|
|
v-show="!chart1List || chart1List.length <= 0" |
|
|
|
|
|
text="暂无数据..." |
|
|
|
|
|
></Empty> |
|
|
|
|
|
<div |
|
|
|
|
|
v-show="chart1List || chart1List.length > 0" |
|
|
|
|
|
id="chart1" |
|
|
|
|
|
class="btnChart" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div> |
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
<Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..."></Empty> |
|
|
<Empty |
|
|
<div 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 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> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import WgtTitle from "../../../widgets/title"; |
|
|
import WgtTitle from '../../../widgets/title' |
|
|
import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue"; |
|
|
import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue'; |
|
|
import ProgressBar from "./progressBar"; |
|
|
import ProgressBar from './progressBar'; |
|
|
|
|
|
import * as echarts from "echarts"; |
|
|
import * as echarts from "echarts"; |
|
|
import chart1 from "./assets/charts"; |
|
|
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 { getWarningTrend, getWarningSectionType, getSectionMarkNumber, getRoadSectionList } from '../../../../../../../api/event/perceiveEvent'; |
|
|
import { |
|
|
|
|
|
getWarningTrend, |
|
|
|
|
|
getWarningSectionType, |
|
|
|
|
|
getSectionMarkNumber, |
|
|
|
|
|
getRoadSectionList, |
|
|
|
|
|
} from "../../../../../../../api/event/perceiveEvent"; |
|
|
|
|
|
|
|
|
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => { |
|
|
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => { |
|
|
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
|
|
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
|
|
ctx.beginPath(); |
|
|
ctx.beginPath(); |
|
|
ctx.fillStyle = gr; |
|
|
ctx.fillStyle = gr; |
|
|
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
|
|
ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2); |
|
|
ctx.lineTo(width - radius + x, y); |
|
|
ctx.lineTo(width - radius + x, y); |
|
|
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); |
|
|
ctx.arc( |
|
|
|
|
|
width - radius + x, |
|
|
|
|
|
radius + y, |
|
|
|
|
|
radius, |
|
|
|
|
|
(Math.PI * 3) / 2, |
|
|
|
|
|
Math.PI * 2 |
|
|
|
|
|
); |
|
|
ctx.lineTo(width + x, height + y - radius); |
|
|
ctx.lineTo(width + x, height + y - radius); |
|
|
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); |
|
|
ctx.arc( |
|
|
|
|
|
width - radius + x, |
|
|
|
|
|
height - radius + y, |
|
|
|
|
|
radius, |
|
|
|
|
|
0, |
|
|
|
|
|
(Math.PI * 1) / 2 |
|
|
|
|
|
); |
|
|
ctx.lineTo(radius + x, height + y); |
|
|
ctx.lineTo(radius + x, height + y); |
|
|
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); |
|
|
ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI); |
|
|
ctx.closePath(); |
|
|
ctx.closePath(); |
|
|
//ctx.stroke(); |
|
|
//ctx.stroke(); |
|
|
ctx.fill() |
|
|
ctx.fill(); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'EventQuery', |
|
|
name: "EventQuery", |
|
|
components: { |
|
|
components: { |
|
|
WgtTitle, |
|
|
WgtTitle, |
|
|
ProgressBar, |
|
|
ProgressBar, |
|
|
ElQuarterPicker, |
|
|
ElQuarterPicker, |
|
|
RadioGroup |
|
|
RadioGroup, |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
typeOptions: [ |
|
|
typeOptions: [ |
|
|
{ |
|
|
{ |
|
|
value: 'year', |
|
|
value: "year", |
|
|
label: '年' |
|
|
label: "年", |
|
|
}, { |
|
|
|
|
|
value: 'month', |
|
|
|
|
|
label: '月' |
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
value: 'date', |
|
|
value: "month", |
|
|
label: '日' |
|
|
label: "月", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
value: 'quarter', |
|
|
value: "date", |
|
|
label: '季' |
|
|
label: "日", |
|
|
}], |
|
|
}, |
|
|
quarter: '1', |
|
|
{ |
|
|
|
|
|
value: "quarter", |
|
|
|
|
|
label: "季", |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
quarter: "1", |
|
|
quarterOptions: [ |
|
|
quarterOptions: [ |
|
|
{ |
|
|
{ |
|
|
label: "第一季度", |
|
|
label: "第一季度", |
|
|
value: "1" |
|
|
value: "1", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: "第二季度", |
|
|
label: "第二季度", |
|
|
value: "2" |
|
|
value: "2", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: "第三季度", |
|
|
label: "第三季度", |
|
|
value: "3" |
|
|
value: "3", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: "第四季度", |
|
|
label: "第四季度", |
|
|
value: "4" |
|
|
value: "4", |
|
|
} |
|
|
}, |
|
|
], |
|
|
], |
|
|
dateTime: "2024", |
|
|
dateTime: "2024", |
|
|
direction: '1', |
|
|
direction: "1", |
|
|
dataList: [], |
|
|
dataList: [], |
|
|
selectIndex: 3, |
|
|
selectIndex: 3, |
|
|
selectId: 3, |
|
|
selectId: 3, |
|
|
@ -128,36 +227,70 @@ export default { |
|
|
chart2List: [], |
|
|
chart2List: [], |
|
|
chart3List: [], |
|
|
chart3List: [], |
|
|
list: [ |
|
|
list: [ |
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
{ |
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
name: "大学城-长清", |
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
direction: "济南方向", |
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
state: "正常", |
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
speed: "108.14km/h", |
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' } |
|
|
follow: "161", |
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
{ |
|
|
|
|
|
name: "大学城-长清", |
|
|
|
|
|
direction: "济南方向", |
|
|
|
|
|
state: "正常", |
|
|
|
|
|
speed: "108.14km/h", |
|
|
|
|
|
follow: "161", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: "大学城-长清", |
|
|
|
|
|
direction: "济南方向", |
|
|
|
|
|
state: "正常", |
|
|
|
|
|
speed: "108.14km/h", |
|
|
|
|
|
follow: "161", |
|
|
}, |
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: "大学城-长清", |
|
|
|
|
|
direction: "济南方向", |
|
|
|
|
|
state: "正常", |
|
|
|
|
|
speed: "108.14km/h", |
|
|
|
|
|
follow: "161", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: "大学城-长清", |
|
|
|
|
|
direction: "济南方向", |
|
|
|
|
|
state: "正常", |
|
|
|
|
|
speed: "108.14km/h", |
|
|
|
|
|
follow: "161", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: "大学城-长清", |
|
|
|
|
|
direction: "济南方向", |
|
|
|
|
|
state: "正常", |
|
|
|
|
|
speed: "108.14km/h", |
|
|
|
|
|
follow: "161", |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
created() {}, |
|
|
methods: { |
|
|
methods: { |
|
|
selectProgress(item, index,) { |
|
|
selectProgress(item, index) { |
|
|
this.selectIndex = index |
|
|
this.selectIndex = index; |
|
|
this.selectId = item.id; |
|
|
this.selectId = item.id; |
|
|
this.searchQuery() |
|
|
this.searchQuery(); |
|
|
}, |
|
|
}, |
|
|
onReset() { |
|
|
onReset() { |
|
|
this.direction = '1'; |
|
|
this.direction = "1"; |
|
|
this.type = "year"; |
|
|
this.type = "year"; |
|
|
this.dateTime = '2024'; |
|
|
this.dateTime = "2024"; |
|
|
this.selectId = this.dataList[0].id; |
|
|
this.selectId = this.dataList[0].id; |
|
|
this.selectIndex = 1 |
|
|
this.selectIndex = 1; |
|
|
}, |
|
|
}, |
|
|
searchQuery() { |
|
|
searchQuery() { |
|
|
let startTime = ""; |
|
|
let startTime = ""; |
|
|
let qType = this.type == 'date' ? 'day' : this.type; |
|
|
let qType = this.type == "date" ? "day" : this.type; |
|
|
if (this.type == "quarter") { |
|
|
if (this.type == "quarter") { |
|
|
console.log('dateTime', this.quarter) |
|
|
console.log("dateTime", this.quarter); |
|
|
// let year = moment().year(); |
|
|
// let year = moment().year(); |
|
|
// if (this.quarter == 1) { |
|
|
// if (this.quarter == 1) { |
|
|
// startTime = `${year}-01-01 00:00:00` |
|
|
// startTime = `${year}-01-01 00:00:00` |
|
|
@ -169,30 +302,31 @@ export default { |
|
|
// startTime = `${year}-10-01 00:00:00` |
|
|
// startTime = `${year}-10-01 00:00:00` |
|
|
// } |
|
|
// } |
|
|
} else { |
|
|
} else { |
|
|
startTime = moment(this.dateTime).format('YYYY-MM-DD HH:mm:ss') |
|
|
startTime = moment(this.dateTime).format("YYYY-MM-DD HH:mm:ss"); |
|
|
} |
|
|
} |
|
|
console.log("startTime", startTime) |
|
|
console.log("startTime", startTime); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//感知事件趋势 |
|
|
//感知事件趋势 |
|
|
getWarningTrend({ |
|
|
getWarningTrend({ |
|
|
"type": qType, |
|
|
type: qType, |
|
|
"sectionId": this.selectId, |
|
|
sectionId: this.selectId, |
|
|
"createTime": startTime, |
|
|
createTime: startTime, |
|
|
"direction": this.direction, |
|
|
direction: this.direction, |
|
|
"quarter": this.quarter |
|
|
quarter: this.quarter, |
|
|
}).then(res => { |
|
|
}).then((res) => { |
|
|
if (res.code == 200) { |
|
|
if (res.code == 200) { |
|
|
this.chart1List = res.data |
|
|
this.chart1List = res.data; |
|
|
let data = res.data; |
|
|
let data = res.data; |
|
|
chart1.series[0].data = []; |
|
|
chart1.series[0].data = []; |
|
|
chart1.xAxis.data = []; |
|
|
chart1.xAxis.data = []; |
|
|
if (data.length > 0) { |
|
|
if (data.length > 0) { |
|
|
const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev)); |
|
|
const maxObject = data.reduce((prev, current) => |
|
|
|
|
|
current.number > prev.number ? current : prev |
|
|
|
|
|
); |
|
|
let xData = []; |
|
|
let xData = []; |
|
|
let numbers = []; |
|
|
let numbers = []; |
|
|
|
|
|
|
|
|
data.forEach(it => { |
|
|
data.forEach((it) => { |
|
|
if (this.type == "year") { |
|
|
if (this.type == "year") { |
|
|
xData.push(it.month + "月"); |
|
|
xData.push(it.month + "月"); |
|
|
} |
|
|
} |
|
|
@ -203,42 +337,45 @@ export default { |
|
|
xData.push(it.time.split(" ")[1] + "时"); |
|
|
xData.push(it.time.split(" ")[1] + "时"); |
|
|
} |
|
|
} |
|
|
if (this.type == "quarter") { |
|
|
if (this.type == "quarter") { |
|
|
xData.push(it.month + '月'); |
|
|
xData.push(it.month + "月"); |
|
|
} |
|
|
} |
|
|
if (it.number == maxObject.number) { |
|
|
if (it.number == maxObject.number) { |
|
|
numbers.push({ |
|
|
numbers.push({ |
|
|
value: it.number, |
|
|
value: it.number, |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
color: { |
|
|
color: { |
|
|
type: 'linear', |
|
|
type: "linear", |
|
|
x: 0, |
|
|
x: 0, |
|
|
y: 0, |
|
|
y: 0, |
|
|
x2: 0, |
|
|
x2: 0, |
|
|
y2: 1, |
|
|
y2: 1, |
|
|
colorStops: [{ |
|
|
colorStops: [ |
|
|
offset: 0, color: '#FFB904' // 0% 处的颜色 |
|
|
{ |
|
|
}, { |
|
|
offset: 0, |
|
|
offset: 1, color: '#FF6969' // 100% 处的颜色 |
|
|
color: "#FFB904", // 0% 处的颜色 |
|
|
}], |
|
|
}, |
|
|
global: false // 缺省为 false |
|
|
{ |
|
|
|
|
|
offset: 1, |
|
|
|
|
|
color: "#FF6969", // 100% 处的颜色 |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
global: false, // 缺省为 false |
|
|
|
|
|
}, |
|
|
|
|
|
borderRadius: 6, |
|
|
}, |
|
|
}, |
|
|
borderRadius: 6 |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
}); |
|
|
} else { |
|
|
} else { |
|
|
numbers.push({ |
|
|
numbers.push({ |
|
|
value: it.number, |
|
|
value: it.number, |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
borderRadius: 6 |
|
|
borderRadius: 6, |
|
|
} |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
}); |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
chart1.xAxis.data = xData; |
|
|
chart1.xAxis.data = xData; |
|
|
chart1.series[0].data = numbers; |
|
|
chart1.series[0].data = numbers; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
this.myChart1.setOption(chart1); |
|
|
this.myChart1.setOption(chart1); |
|
|
@ -246,17 +383,17 @@ export default { |
|
|
|
|
|
|
|
|
//类型占比 |
|
|
//类型占比 |
|
|
getWarningSectionType({ |
|
|
getWarningSectionType({ |
|
|
"type": qType, |
|
|
type: qType, |
|
|
"sectionId": this.selectId, |
|
|
sectionId: this.selectId, |
|
|
"createTime": startTime, |
|
|
createTime: startTime, |
|
|
"direction": this.direction, |
|
|
direction: this.direction, |
|
|
"quarter": this.quarter |
|
|
quarter: this.quarter, |
|
|
}).then(res => { |
|
|
}).then((res) => { |
|
|
chart2.series[0].data = []; |
|
|
chart2.series[0].data = []; |
|
|
if (res.code == 200) { |
|
|
if (res.code == 200) { |
|
|
let types = []; |
|
|
let types = []; |
|
|
let numbers = []; |
|
|
let numbers = []; |
|
|
this.chart2List = res.data |
|
|
this.chart2List = res.data; |
|
|
let data = res.data.warningTypeList; |
|
|
let data = res.data.warningTypeList; |
|
|
let total = res.data.total; |
|
|
let total = res.data.total; |
|
|
|
|
|
|
|
|
@ -291,13 +428,13 @@ export default { |
|
|
|
|
|
|
|
|
numbers.push({ |
|
|
numbers.push({ |
|
|
name: types[types.length - 1], |
|
|
name: types[types.length - 1], |
|
|
value: it.number |
|
|
value: it.number, |
|
|
|
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}) |
|
|
|
|
|
chart2.legend.data = types; |
|
|
chart2.legend.data = types; |
|
|
chart2.legend.formatter = function (name) { |
|
|
chart2.legend.formatter = function (name) { |
|
|
let total = 0 |
|
|
let total = 0; |
|
|
let target |
|
|
let target; |
|
|
for (let i = 0; i < numbers.length; i++) { |
|
|
for (let i = 0; i < numbers.length; i++) { |
|
|
total += numbers[i].value; |
|
|
total += numbers[i].value; |
|
|
if (types[i] == name) { |
|
|
if (types[i] == name) { |
|
|
@ -305,11 +442,11 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
var arr = [ |
|
|
var arr = [ |
|
|
'{a|' + name + '}', |
|
|
"{a|" + name + "}", |
|
|
'{b|' + ((target / total) * 100).toFixed(2) + '%} ', |
|
|
"{b|" + ((target / total) * 100).toFixed(2) + "%} ", |
|
|
"{c|" + target + "件}", |
|
|
"{c|" + target + "起}", |
|
|
] |
|
|
]; |
|
|
return arr.join(' ') |
|
|
return arr.join(" "); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
chart2.title.text = `{zb|${total}}`; |
|
|
chart2.title.text = `{zb|${total}}`; |
|
|
@ -335,23 +472,26 @@ export default { |
|
|
// }) |
|
|
// }) |
|
|
} |
|
|
} |
|
|
this.myChart2.setOption(chart2); |
|
|
this.myChart2.setOption(chart2); |
|
|
|
|
|
}); |
|
|
}) |
|
|
|
|
|
//路段范围内桩号分布 |
|
|
//路段范围内桩号分布 |
|
|
getSectionMarkNumber({ |
|
|
getSectionMarkNumber({ |
|
|
"type": qType, |
|
|
type: qType, |
|
|
"sectionId": this.selectId, |
|
|
sectionId: this.selectId, |
|
|
"createTime": startTime, |
|
|
createTime: startTime, |
|
|
"direction": this.direction, |
|
|
direction: this.direction, |
|
|
"quarter": this.quarter |
|
|
quarter: this.quarter, |
|
|
}).then(res => { |
|
|
}).then((res) => { |
|
|
chart3.series[0].data = []; |
|
|
chart3.series[0].data = []; |
|
|
chart3.series[1].data = []; |
|
|
chart3.series[1].data = []; |
|
|
chart3.xAxis.data = []; |
|
|
chart3.xAxis.data = []; |
|
|
if (res.code == 200 && res.data.length > 0) { |
|
|
if (res.code == 200 && res.data.length > 0) { |
|
|
this.chart3List = res.data |
|
|
this.chart3List = res.data; |
|
|
let data = res.data; |
|
|
let data = res.data; |
|
|
const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev)); |
|
|
const maxObject = data |
|
|
|
|
|
.filter((it) => it.sectionNumber > 0) |
|
|
|
|
|
.reduce((prev, current) => |
|
|
|
|
|
current.sectionNumber > prev.sectionNumber ? current : prev |
|
|
|
|
|
); |
|
|
let zhs = []; |
|
|
let zhs = []; |
|
|
let values1 = []; |
|
|
let values1 = []; |
|
|
let values2 = []; |
|
|
let values2 = []; |
|
|
@ -366,32 +506,36 @@ export default { |
|
|
value: it.sectionNumber, |
|
|
value: it.sectionNumber, |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
color: { |
|
|
color: { |
|
|
type: 'linear', |
|
|
type: "linear", |
|
|
x: 0, |
|
|
x: 0, |
|
|
y: 0, |
|
|
y: 0, |
|
|
x2: 0, |
|
|
x2: 0, |
|
|
y2: 1, |
|
|
y2: 1, |
|
|
colorStops: [{ |
|
|
colorStops: [ |
|
|
offset: 0, color: '#01D5BC' // 0% 处的颜色 |
|
|
{ |
|
|
}, { |
|
|
offset: 0, |
|
|
offset: 1, color: '#003B4E' // 100% 处的颜色 |
|
|
color: "#01D5BC", // 0% 处的颜色 |
|
|
}], |
|
|
|
|
|
global: false // 缺省为 false |
|
|
|
|
|
}, |
|
|
}, |
|
|
borderRadius: 6 |
|
|
{ |
|
|
|
|
|
offset: 1, |
|
|
|
|
|
color: "#003B4E", // 100% 处的颜色 |
|
|
}, |
|
|
}, |
|
|
}) |
|
|
], |
|
|
|
|
|
global: false, // 缺省为 false |
|
|
|
|
|
}, |
|
|
|
|
|
borderRadius: 6, |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
} else { |
|
|
} else { |
|
|
values1.push({ |
|
|
values1.push({ |
|
|
value: it.sectionNumber, |
|
|
value: it.sectionNumber, |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
borderRadius: 6 |
|
|
borderRadius: 6, |
|
|
}, |
|
|
}, |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
|
|
|
|
|
|
chart3.xAxis.data = zhs; |
|
|
chart3.xAxis.data = zhs; |
|
|
chart3.series[0].data = values1; |
|
|
chart3.series[0].data = values1; |
|
|
@ -399,7 +543,7 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.myChart3.setOption(chart3); |
|
|
this.myChart3.setOption(chart3); |
|
|
}) |
|
|
}); |
|
|
// if (this.type == "day") |
|
|
// if (this.type == "day") |
|
|
// this.type = "date"; |
|
|
// this.type = "date"; |
|
|
}, |
|
|
}, |
|
|
@ -407,19 +551,18 @@ export default { |
|
|
mounted() { |
|
|
mounted() { |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
|
|
|
getRoadSectionList().then((res) => { |
|
|
getRoadSectionList().then(res => { |
|
|
|
|
|
console.log(res); |
|
|
console.log(res); |
|
|
if (res.code == 200) { |
|
|
if (res.code == 200) { |
|
|
let rows = res.rows; |
|
|
let rows = res.rows; |
|
|
this.dataList = []; |
|
|
this.dataList = []; |
|
|
rows.forEach(it => { |
|
|
rows.forEach((it) => { |
|
|
this.dataList.push({ |
|
|
this.dataList.push({ |
|
|
title: it.sectionName.split("-")[0], |
|
|
title: it.sectionName.split("-")[0], |
|
|
id: it.id, |
|
|
id: it.id, |
|
|
}); |
|
|
}); |
|
|
}) |
|
|
}); |
|
|
console.log("dataList", this.dataList) |
|
|
console.log("dataList", this.dataList); |
|
|
// if (rows.length > 0) { |
|
|
// if (rows.length > 0) { |
|
|
// let lastRoad = rows[rows.length - 1].sectionName.split("-")[1]; |
|
|
// let lastRoad = rows[rows.length - 1].sectionName.split("-")[1]; |
|
|
// this.dataList.push({ |
|
|
// this.dataList.push({ |
|
|
@ -427,21 +570,17 @@ export default { |
|
|
// id: rows[rows.length - 1].id, |
|
|
// id: rows[rows.length - 1].id, |
|
|
// }); |
|
|
// }); |
|
|
// } |
|
|
// } |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
this.searchQuery(); |
|
|
this.searchQuery(); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
var myChart1 = echarts.init(document.getElementById("chart1")); |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
var myChart1 = echarts.init(document.getElementById('chart1')); |
|
|
|
|
|
myChart1.setOption(chart1); |
|
|
myChart1.setOption(chart1); |
|
|
var myChart2 = echarts.init(document.getElementById('chart2')); |
|
|
var myChart2 = echarts.init(document.getElementById("chart2")); |
|
|
myChart2.setOption(chart2); |
|
|
myChart2.setOption(chart2); |
|
|
var myChart3 = echarts.init(document.getElementById('chart3')); |
|
|
var myChart3 = echarts.init(document.getElementById("chart3")); |
|
|
myChart3.setOption(chart3); |
|
|
myChart3.setOption(chart3); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.myChart1 = myChart1; |
|
|
this.myChart1 = myChart1; |
|
|
this.myChart2 = myChart2; |
|
|
this.myChart2 = myChart2; |
|
|
this.myChart3 = myChart3; |
|
|
this.myChart3 = myChart3; |
|
|
@ -449,11 +588,11 @@ export default { |
|
|
const domMap = document.getElementById("chart2"); |
|
|
const domMap = document.getElementById("chart2"); |
|
|
let parentDiv = domMap.firstChild; |
|
|
let parentDiv = domMap.firstChild; |
|
|
// 创建canvas |
|
|
// 创建canvas |
|
|
let canvas = document.createElement('canvas'); |
|
|
let canvas = document.createElement("canvas"); |
|
|
canvas.width = parentDiv.offsetWidth; |
|
|
canvas.width = parentDiv.offsetWidth; |
|
|
canvas.height = parentDiv.offsetHeight; |
|
|
canvas.height = parentDiv.offsetHeight; |
|
|
parentDiv.appendChild(canvas); |
|
|
parentDiv.appendChild(canvas); |
|
|
const context = canvas.getContext('2d'); |
|
|
const context = canvas.getContext("2d"); |
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
|
|
|
|
|
|
// 填充渐变颜色 |
|
|
// 填充渐变颜色 |
|
|
@ -510,15 +649,13 @@ export default { |
|
|
// 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, 416, 208, 140, 24, 12, gr); |
|
|
// drawRoundRect(context, 416, 208, 140, 24, 12, gr); |
|
|
|
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
<style lang="scss" scoped> |
|
|
.congestion { |
|
|
.congestion { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -532,9 +669,18 @@ export default { |
|
|
> div { |
|
|
> div { |
|
|
width: 33%; |
|
|
width: 33%; |
|
|
height: 470px; |
|
|
height: 470px; |
|
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|
|
background: linear-gradient( |
|
|
|
|
|
180deg, |
|
|
|
|
|
rgba(6, 66, 88, 0.2) 0%, |
|
|
|
|
|
#064258 100% |
|
|
|
|
|
); |
|
|
border: 1px solid; |
|
|
border: 1px solid; |
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
border-image: linear-gradient( |
|
|
|
|
|
360deg, |
|
|
|
|
|
rgba(55, 231, 255, 0.3), |
|
|
|
|
|
rgba(55, 231, 255, 0) |
|
|
|
|
|
) |
|
|
|
|
|
1 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:nth-child(1) { |
|
|
:nth-child(1) { |
|
|
@ -555,7 +701,6 @@ export default { |
|
|
width: 90%; |
|
|
width: 90%; |
|
|
margin: 95px auto 0; |
|
|
margin: 95px auto 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.board { |
|
|
.board { |
|
|
@ -607,7 +752,7 @@ export default { |
|
|
|
|
|
|
|
|
.selectRoad { |
|
|
.selectRoad { |
|
|
width: 100px; |
|
|
width: 100px; |
|
|
border: 1px solid #00B3CC; |
|
|
border: 1px solid #00b3cc; |
|
|
|
|
|
|
|
|
::v-deep { |
|
|
::v-deep { |
|
|
.el-input__inner { |
|
|
.el-input__inner { |
|
|
@ -619,7 +764,7 @@ export default { |
|
|
|
|
|
|
|
|
.selectRoad-medium { |
|
|
.selectRoad-medium { |
|
|
width: 120px; |
|
|
width: 120px; |
|
|
border: 1px solid #00B3CC; |
|
|
border: 1px solid #00b3cc; |
|
|
|
|
|
|
|
|
::v-deep { |
|
|
::v-deep { |
|
|
.el-input__inner { |
|
|
.el-input__inner { |
|
|
@ -630,19 +775,17 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btnSearch { |
|
|
.btnSearch { |
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
margin-left: 10px; |
|
|
margin-left: 10px; |
|
|
border-color: transparent; |
|
|
border-color: transparent; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btnReset { |
|
|
.btnReset { |
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
; |
|
|
|
|
|
border-color: transparent; |
|
|
border-color: transparent; |
|
|
color: white; |
|
|
color: white; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -653,13 +796,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 |
|
|
color: #fff |
|
|
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; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
zhangzhang
1 year ago