@ -0,0 +1,51 @@ |
|||
<template> |
|||
<div class="Card3"> |
|||
<Title :title="title"> |
|||
<template #prefix> |
|||
<slot name="title-prefix" /> |
|||
</template> |
|||
<template #suffix> |
|||
<slot name="title-suffix" /> |
|||
</template> |
|||
</Title> |
|||
<div class="content"> |
|||
<slot /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Title from "@screen/components/Title/index.vue"; |
|||
|
|||
export default { |
|||
name: "Card", |
|||
components: { |
|||
Title, |
|||
}, |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.Card3 { |
|||
width: 100%; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(6, 66, 88, 0) 0%, |
|||
rgba(6, 66, 88, 0.4) 93% |
|||
); |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
min-height: 0px; |
|||
.content { |
|||
padding: 9px; |
|||
flex: 1; |
|||
min-height: 0px; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 380 B |
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<img :src="require('./chartDl.png')" class="iconDl" @click="$emit('export')" /> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: "ChartExport", |
|||
props: { |
|||
|
|||
}, |
|||
components: { |
|||
}, |
|||
provide() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
methods: { |
|||
//点击事件回调 |
|||
exportClick() { |
|||
// let type = para.type; |
|||
console.log(111) |
|||
}, |
|||
|
|||
}, |
|||
mounted() { |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.iconDl{ |
|||
margin-left: 10px; |
|||
cursor: pointer; |
|||
z-index: 2049; |
|||
width: 18px; |
|||
height: 18px; |
|||
padding: 3px; |
|||
} |
|||
.iconDl:hover{ |
|||
border: 2px solid #55d2b5; |
|||
border-radius: 50%; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,218 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="交通流预警" style="z-index: 2050;" width="655px" top="100px" right="640px"> |
|||
<div class="title">{{ title }}</div> |
|||
<div class="DialogWarning"> |
|||
<div class="actions"> |
|||
<div :class="actIndex===0?'act':''" @click="bindTag(0)">收费站车流量预测</div> |
|||
<div :class="actIndex===1?'act':''" @click="bindTag(1)">全路段车流量预测</div> |
|||
</div> |
|||
<div class="chartsPanel"> |
|||
<div v-if="showChart" class="tag1">{{actIndex===0?'入口':'济南'}}</div> |
|||
<div v-if="showChart" class="tag2">{{actIndex===0?'出口':'菏泽'}}</div> |
|||
<div class="feeTChart" id="feeTChart"></div> |
|||
</div> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import * as echarts from "echarts"; |
|||
import OptionsFee from "./chartsFee"; |
|||
import request from '@/utils/request' |
|||
|
|||
|
|||
// 广播发布 |
|||
export default { |
|||
name: "DialogWarning", |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
actIndex:0, |
|||
title:'交通流预警', |
|||
showChart: false |
|||
}; |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
watch: { |
|||
modelVisible: { |
|||
immediate: true, |
|||
handler(bool) { |
|||
if (!bool) return; |
|||
}, |
|||
}, |
|||
}, |
|||
methods: { |
|||
bind(id,remark){ |
|||
this.title = remark |
|||
request({ |
|||
url: `/business/dcNoStakeWarningTable/${id}`, |
|||
method: "get" |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return; |
|||
this.source = JSON.parse(result.data.otherConfig) |
|||
this.drawChart(); |
|||
}) |
|||
}, |
|||
bindTag(idx){ |
|||
this.actIndex=idx; |
|||
this.drawChart(); |
|||
}, |
|||
drawChart(){ |
|||
const v = this.source |
|||
let info = { |
|||
name: 'facilityName', |
|||
val:'trafficVolume', |
|||
s1: 4, |
|||
s2: 5 |
|||
} |
|||
if(this.actIndex === 1){ |
|||
info = { |
|||
name: 'name', |
|||
val:'volume', |
|||
s1: 1, |
|||
s2: 3 |
|||
} |
|||
} |
|||
//bindfee |
|||
this.feeTChart = echarts.init(document.getElementById("feeTChart")); |
|||
const xname = []; |
|||
const legend = []; |
|||
const s1Data = []; |
|||
const s2Data = []; |
|||
let isFirst = true; |
|||
for(let i in v[info.s1]){ |
|||
// X轴 |
|||
xname.push(i) |
|||
// 上行数据 |
|||
for(let j = 0; j < v[info.s1][i].length; j++){ |
|||
const tmp = v[info.s1][i][j]; |
|||
if(isFirst){ |
|||
legend.push(tmp[info.name]) |
|||
s1Data.push([tmp[info.val]]) |
|||
s2Data.push([]) |
|||
} else { |
|||
s1Data[j].push(tmp[info.val]) |
|||
} |
|||
} |
|||
isFirst = false; |
|||
} |
|||
for(let i in v[info.s2]){ |
|||
for(let j = 0; j < v[info.s2][i].length; j++){ |
|||
const tmp = v[info.s2][i][j]; |
|||
s2Data[j].push(tmp[info.val]) |
|||
} |
|||
} |
|||
console.log(s2Data,'---------') |
|||
OptionsFee.legend.data = legend; |
|||
OptionsFee.xAxis[0].data =xname; |
|||
OptionsFee.xAxis[1].data =xname; |
|||
const series = []; |
|||
for(let i =0 ; i < legend.length;i++){ |
|||
series.push({ |
|||
name: legend[i], |
|||
type: "line", |
|||
data: s1Data[i], |
|||
}) |
|||
series.push({ |
|||
name: legend[i], |
|||
type: "line", |
|||
data: s2Data[i], |
|||
xAxisIndex: 1, |
|||
yAxisIndex: 1, |
|||
}) |
|||
} |
|||
OptionsFee.series = series; |
|||
this.feeTChart.setOption(OptionsFee); |
|||
this.showChart = true; |
|||
|
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.DialogWarning { |
|||
width: 600px; |
|||
height: 300px; |
|||
overflow: hidden; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.actions{ |
|||
display: flex; |
|||
margin: 10px 0px; |
|||
.act{ |
|||
background:linear-gradient(to bottom, #996c1e, #e1ae53) !important; |
|||
} |
|||
div{ |
|||
font-size: 14px; |
|||
padding: 4px 10px; |
|||
background:linear-gradient(to bottom, #315266, #5288a9) ; |
|||
margin-right: 10px; |
|||
border-radius: 2px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
.title{ |
|||
background-color: #21445a; |
|||
font-size: 14px; |
|||
padding: 4px 6px; |
|||
} |
|||
.chartsPanel{ |
|||
width: 100%; |
|||
height: 400px; |
|||
|
|||
|
|||
.tag1 { |
|||
position: absolute; |
|||
margin-top: 56px; |
|||
margin-left: 50px; |
|||
font-size: 12px; |
|||
span{ |
|||
color: #8be8fe; |
|||
font-weight: bold; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.tag2 { |
|||
position: absolute; |
|||
font-size: 12px; |
|||
margin-top: 240px; |
|||
margin-left: 550px; |
|||
span{ |
|||
color: #8be8fe; |
|||
font-weight: bold; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
.feeTChart { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,133 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: (params) => { |
|||
let name = params[0].axisValue + (params[0].axisIndex === 0?' 入口':' 出口') ; |
|||
for(let i =0; i < params.length; i++){ |
|||
if(i%2===0){ |
|||
name+='<br />' |
|||
} else{ |
|||
name+='<span style="margin-left:10px;"></span>' |
|||
} |
|||
name += `${params[i].marker}${params[i].seriesName}: <span style="font-weight:bold;"> ${params[i].value} 辆</span>` |
|||
|
|||
} |
|||
return name; |
|||
} |
|||
}, |
|||
axisPointer: { |
|||
link: [ |
|||
{ |
|||
yAxisIndex: "all", |
|||
}, |
|||
], |
|||
}, |
|||
legend: { |
|||
top: 0, |
|||
right: 0, |
|||
icon:'rect', |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
itemHeight: 5, |
|||
itemWidth: 10, |
|||
data: [], |
|||
}, |
|||
grid: [ |
|||
{ |
|||
left: 40, |
|||
right: 10, |
|||
top: '25%', |
|||
height: "35%", |
|||
}, |
|||
{ |
|||
left: 40, |
|||
right: 10, |
|||
top: "60%", |
|||
height: "35%", |
|||
}, |
|||
], |
|||
xAxis: [ |
|||
{ |
|||
type: "category", |
|||
data: [], |
|||
axisLabel: { |
|||
color: "#ffffff", |
|||
show: false |
|||
}, |
|||
z: 10, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
onZero: true, |
|||
axisLine: { show: false }, |
|||
gridIndex: 1, |
|||
type: "category", |
|||
z: 10, |
|||
data: [], |
|||
position: "top", |
|||
axisLabel: { |
|||
color: "#fff", |
|||
margin: -20, |
|||
formatter: function (params) { |
|||
return `${params}`; |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
name: "车流量", |
|||
type: "value", |
|||
axisLabel: { |
|||
color: "#FFF", |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#00D1FF", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
gridIndex: 1, |
|||
name: "", |
|||
type: "value", |
|||
inverse: true, |
|||
axisLabel: { |
|||
color: "#FFF", |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#00D1FF", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "本期车流量", |
|||
type: "line", |
|||
data: [], |
|||
} |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
After Width: | Height: | Size: 480 B |
|
After Width: | Height: | Size: 443 B |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 957 B |
|
After Width: | Height: | Size: 885 B |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 565 B |
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 565 B |
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 565 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 863 B After Width: | Height: | Size: 855 B |
|
Before Width: | Height: | Size: 863 B After Width: | Height: | Size: 855 B |
|
Before Width: | Height: | Size: 863 B After Width: | Height: | Size: 855 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 5.0 KiB |