|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div class='congestion'> |
|
|
|
<div class="congestion"> |
|
|
|
<WgtTitle :title="'交通指标分析'"></WgtTitle> |
|
|
|
<div class="board"> |
|
|
|
<!-- <div class="searchPanel"> |
|
|
|
@ -33,32 +33,88 @@ |
|
|
|
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> |
|
|
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" >重置</el-button> |
|
|
|
</div> --> |
|
|
|
<ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" /> |
|
|
|
<ProgressBar |
|
|
|
:dataList="dataList" |
|
|
|
class="keep-ratio progressbar" |
|
|
|
:selectIndex="7" |
|
|
|
/> |
|
|
|
<div class="body"> |
|
|
|
<div class="body-l"> |
|
|
|
<div class="searchPanel_1"> |
|
|
|
<!-- <el-from ref="form"> --> |
|
|
|
<RadioGroup :options="[{ 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"> |
|
|
|
<RadioGroup |
|
|
|
:options="[ |
|
|
|
{ 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-select> |
|
|
|
<el-select v-model="quarter" size="medium" v-if="type == '3'" class="selectRoad-medium" placeholder="请选择"> |
|
|
|
<el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
<el-select |
|
|
|
v-model="quarter" |
|
|
|
size="medium" |
|
|
|
v-if="type == '3'" |
|
|
|
class="selectRoad-medium" |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in quarterOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<!-- <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="type == '3'" v-model="dateTime" |
|
|
|
aria-placeholder="请选季度" /> --> |
|
|
|
<el-date-picker size="mini" v-if="type != '3'" class="selectRoad" v-model="dateTime" style="width:140px;" |
|
|
|
:type="type == 1 ? 'date' : type == 2 ? 'month' : type == 4 ? 'year' : ''" placeholder="请选择" /> |
|
|
|
|
|
|
|
|
|
|
|
<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="handleClear">重置</el-button> |
|
|
|
<el-date-picker |
|
|
|
size="mini" |
|
|
|
v-if="type != '3'" |
|
|
|
class="selectRoad" |
|
|
|
v-model="dateTime" |
|
|
|
style="width: 140px" |
|
|
|
:type=" |
|
|
|
type == 1 |
|
|
|
? 'date' |
|
|
|
: type == 2 |
|
|
|
? 'month' |
|
|
|
: type == 4 |
|
|
|
? 'year' |
|
|
|
: '' |
|
|
|
" |
|
|
|
placeholder="请选择" |
|
|
|
/> |
|
|
|
|
|
|
|
<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="handleClear" |
|
|
|
>重置</el-button |
|
|
|
> |
|
|
|
<!-- </el-from> --> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- <div class="searchPanel_1"> |
|
|
|
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择"> |
|
|
|
@ -85,50 +141,60 @@ |
|
|
|
<div id="chart2" class="keep-ratio"></div> |
|
|
|
</div> |
|
|
|
<div class="itemChart"> |
|
|
|
<div class="title">上月指标</div> |
|
|
|
<div class="title">本月指标</div> |
|
|
|
<div id="chart3" class="keep-ratio"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue'; |
|
|
|
import WgtTitle from '../../../../../widgets/title' |
|
|
|
import ProgressBar from './progressBar.vue'; |
|
|
|
import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue"; |
|
|
|
import WgtTitle from "../../../../../widgets/title"; |
|
|
|
import ProgressBar from "./progressBar.vue"; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import chart1 from "./assets/charts"; |
|
|
|
import chart2 from "./assets/charts2"; |
|
|
|
import chart3 from "./assets/charts3"; |
|
|
|
import ElQuarterPicker from './ElQuarterPicker' |
|
|
|
import ElQuarterPicker from "./ElQuarterPicker"; |
|
|
|
|
|
|
|
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => { |
|
|
|
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
|
|
|
ctx.beginPath(); |
|
|
|
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.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.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.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.stroke(); |
|
|
|
ctx.fill() |
|
|
|
} |
|
|
|
ctx.fill(); |
|
|
|
}; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'EventQuery', |
|
|
|
name: "EventQuery", |
|
|
|
components: { |
|
|
|
RadioGroup, |
|
|
|
WgtTitle, |
|
|
|
ProgressBar, |
|
|
|
ElQuarterPicker |
|
|
|
ElQuarterPicker, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -136,182 +202,210 @@ export default { |
|
|
|
type: "1", |
|
|
|
typeOptions: [ |
|
|
|
{ |
|
|
|
label: '年', |
|
|
|
value: '4' |
|
|
|
label: "年", |
|
|
|
value: "4", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '月', |
|
|
|
value: '2' |
|
|
|
label: "月", |
|
|
|
value: "2", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '日', |
|
|
|
value: '1' |
|
|
|
label: "日", |
|
|
|
value: "1", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '季', |
|
|
|
value: '3' |
|
|
|
} |
|
|
|
label: "季", |
|
|
|
value: "3", |
|
|
|
}, |
|
|
|
], |
|
|
|
quarter: '1', |
|
|
|
quarter: "1", |
|
|
|
quarterOptions: [ |
|
|
|
{ |
|
|
|
label: "第一季度", |
|
|
|
value: "1" |
|
|
|
value: "1", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "第二季度", |
|
|
|
value: "2" |
|
|
|
value: "2", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "第三季度", |
|
|
|
value: "3" |
|
|
|
value: "3", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "第四季度", |
|
|
|
value: "4" |
|
|
|
} |
|
|
|
value: "4", |
|
|
|
}, |
|
|
|
], |
|
|
|
dateTime: "2024-01-01 00:00:00", |
|
|
|
dataList: [ |
|
|
|
{ |
|
|
|
title: "殷家林枢纽" |
|
|
|
title: "殷家林枢纽", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "大学城立交" |
|
|
|
title: "大学城立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "长清立交" |
|
|
|
title: "长清立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "松竹枢纽" |
|
|
|
title: "松竹枢纽", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "孝里立交" |
|
|
|
title: "孝里立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "平阴立交" |
|
|
|
title: "平阴立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "孔村枢纽" |
|
|
|
title: "孔村枢纽", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "平阴南立交" |
|
|
|
title: "平阴南立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "魏雪枢纽" |
|
|
|
title: "魏雪枢纽", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "东平立交" |
|
|
|
title: "东平立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "东平湖枢纽" |
|
|
|
title: "东平湖枢纽", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "韩岗立交" |
|
|
|
title: "韩岗立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "梁山立交" |
|
|
|
title: "梁山立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "鄄郓枢纽" |
|
|
|
title: "鄄郓枢纽", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "嘉祥西立交" |
|
|
|
title: "嘉祥西立交", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "王官屯枢纽" |
|
|
|
} |
|
|
|
title: "王官屯枢纽", |
|
|
|
}, |
|
|
|
], |
|
|
|
quarter: "", |
|
|
|
year: "", |
|
|
|
list: [ |
|
|
|
{ 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' }, |
|
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', 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", |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "大学城-长清", |
|
|
|
direction: "济南方向", |
|
|
|
state: "正常", |
|
|
|
speed: "108.14km/h", |
|
|
|
follow: "161", |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
methods: {}, |
|
|
|
mounted() { |
|
|
|
setTimeout(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
var myChart1 = echarts.init(document.getElementById('chart1')); |
|
|
|
var myChart1 = echarts.init(document.getElementById("chart1")); |
|
|
|
myChart1.setOption(chart1); |
|
|
|
var myChart2 = echarts.init(document.getElementById('chart2')); |
|
|
|
var myChart2 = echarts.init(document.getElementById("chart2")); |
|
|
|
myChart2.setOption(chart2); |
|
|
|
var myChart3 = echarts.init(document.getElementById('chart3')); |
|
|
|
var myChart3 = echarts.init(document.getElementById("chart3")); |
|
|
|
myChart3.setOption(chart2); |
|
|
|
|
|
|
|
|
|
|
|
const domMap = document.getElementById("chart2"); |
|
|
|
let parentDiv = domMap.firstChild; |
|
|
|
// 创建canvas |
|
|
|
let canvas = document.createElement('canvas'); |
|
|
|
let canvas = document.createElement("canvas"); |
|
|
|
canvas.width = parentDiv.offsetWidth; |
|
|
|
canvas.height = parentDiv.offsetHeight; |
|
|
|
parentDiv.appendChild(canvas); |
|
|
|
const context = canvas.getContext('2d'); |
|
|
|
const context = canvas.getContext("2d"); |
|
|
|
|
|
|
|
// 填充渐变颜色 |
|
|
|
var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
|
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
|
|
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
|
|
|
|
|
// 绘制圆角矩形 |
|
|
|
drawRoundRect(context, 300, 78, 160, 24, 12, gr) |
|
|
|
drawRoundRect(context, 300, 78, 160, 24, 12, gr); |
|
|
|
|
|
|
|
var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
drawRoundRect(context, 300, 148, 160, 24, 12, gr) |
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
drawRoundRect(context, 300, 148, 160, 24, 12, gr); |
|
|
|
|
|
|
|
var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
drawRoundRect(context, 300, 218, 160, 24, 12, gr) |
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
drawRoundRect(context, 300, 218, 160, 24, 12, gr); |
|
|
|
|
|
|
|
var gr = context.createLinearGradient(400, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
|
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
|
|
|
|
drawRoundRect(context, 460, 78, 160, 24, 12, gr) |
|
|
|
drawRoundRect(context, 460, 78, 160, 24, 12, gr); |
|
|
|
var gr = context.createLinearGradient(350, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
drawRoundRect(context, 460, 148, 160, 24, 12, gr) |
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
drawRoundRect(context, 460, 148, 160, 24, 12, gr); |
|
|
|
var gr = context.createLinearGradient(300, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
drawRoundRect(context, 460, 218, 160, 24, 12, gr) |
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
drawRoundRect(context, 460, 218, 160, 24, 12, gr); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.progressbar { |
|
|
|
margin: 15px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.congestion { |
|
|
|
@ -325,9 +419,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 100%; |
|
|
|
@ -343,7 +435,7 @@ export default { |
|
|
|
.chartOrg { |
|
|
|
flex-direction: row !important; |
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: column; |
|
|
|
width: 50%; |
|
|
|
@ -351,15 +443,14 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.itemChart { |
|
|
|
|
|
|
|
>.title { |
|
|
|
> .title { |
|
|
|
display: inline-flex; |
|
|
|
width: 100%; |
|
|
|
height: 30px; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #30BFEC; |
|
|
|
color: #30bfec; |
|
|
|
} |
|
|
|
|
|
|
|
#chart2 { |
|
|
|
@ -413,7 +504,6 @@ export default { |
|
|
|
margin-bottom: 10px; |
|
|
|
z-index: 1000; |
|
|
|
|
|
|
|
|
|
|
|
div { |
|
|
|
white-space: nowrap; |
|
|
|
margin-right: 4px; |
|
|
|
@ -437,7 +527,7 @@ export default { |
|
|
|
|
|
|
|
.selectRoad { |
|
|
|
width: 89px; |
|
|
|
border: 1px solid #00B3CC; |
|
|
|
border: 1px solid #00b3cc; |
|
|
|
|
|
|
|
::v-deep { |
|
|
|
.el-input__inner { |
|
|
|
@ -448,19 +538,17 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.btnSearch { |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
|
margin-left: 10px; |
|
|
|
border-color: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
.btnReset { |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
|
; |
|
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
|
border-color: transparent; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -469,4 +557,3 @@ export default { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
刘朋
1 year ago