|
|
|
@ -1,58 +1,50 @@ |
|
|
|
<template> |
|
|
|
<div class='congestion'> |
|
|
|
<WgtTitle :title="'感知事件查询'" ></WgtTitle> |
|
|
|
<div class="board"> |
|
|
|
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="7" /> |
|
|
|
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectId" /> |
|
|
|
<div class="searchPanel"> |
|
|
|
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in areaOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择" default-first-option> |
|
|
|
<el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in yearOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
<el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-date-picker |
|
|
|
size="mini" |
|
|
|
v-if="year != 'quarter'" |
|
|
|
class="selectRoad" |
|
|
|
v-model="dateTime" |
|
|
|
style="width:140px;" |
|
|
|
:type="year" |
|
|
|
placeholder="请选择" |
|
|
|
/> |
|
|
|
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime" aria-placeholder="请选季度" /> |
|
|
|
<el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;" |
|
|
|
:type="year" placeholder="请选择" /> |
|
|
|
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime" |
|
|
|
aria-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" >重置</el-button> |
|
|
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="body" > |
|
|
|
<div id="chart1" class="keep-ratio" > |
|
|
|
|
|
|
|
<div class="body"> |
|
|
|
<div> |
|
|
|
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle> |
|
|
|
<div id="chart1" class="btnChart" /> |
|
|
|
</div> |
|
|
|
<div id="chart2" class="keep-ratio" > |
|
|
|
|
|
|
|
<div> |
|
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
|
<div id="chart2" class="btnChart" /> |
|
|
|
</div> |
|
|
|
<div id="chart3" class="keep-ratio" > |
|
|
|
|
|
|
|
<div> |
|
|
|
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle> |
|
|
|
<div id="chart3" class="btnChart" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
import WgtTitle from '../../../widgets/title' |
|
|
|
import ProgressBar from './progressBar.vue'; |
|
|
|
import ProgressBar from './progressBar'; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import chart1 from "./assets/charts"; |
|
|
|
import chart2 from "./assets/charts2"; |
|
|
|
@ -88,7 +80,7 @@ |
|
|
|
yearOptions: [ |
|
|
|
{ |
|
|
|
value: 'year', |
|
|
|
label: '年' |
|
|
|
label: '年度' |
|
|
|
}, { |
|
|
|
value: 'month', |
|
|
|
label: '月' |
|
|
|
@ -102,14 +94,14 @@ |
|
|
|
label: '季' |
|
|
|
},], |
|
|
|
areaOptions: [{ |
|
|
|
value: '0531', |
|
|
|
label: '济南' |
|
|
|
value: '1', |
|
|
|
label: '济南方向' |
|
|
|
}, { |
|
|
|
value: '菏泽', |
|
|
|
label: '菏泽' |
|
|
|
value: '2', |
|
|
|
label: '菏泽方向' |
|
|
|
}], |
|
|
|
dateTime:"", |
|
|
|
area: '0531', |
|
|
|
dateTime: "2024", |
|
|
|
area: '1', |
|
|
|
dataList: [ |
|
|
|
{ |
|
|
|
title: "殷家林枢纽" |
|
|
|
@ -161,7 +153,7 @@ |
|
|
|
} |
|
|
|
], |
|
|
|
quarter: "", |
|
|
|
selectId:1, |
|
|
|
selectId: 3, |
|
|
|
year: "year", |
|
|
|
list: [ |
|
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
|
@ -173,7 +165,6 @@ |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
@ -181,6 +172,12 @@ |
|
|
|
selectProgress(item) { |
|
|
|
this.selectId = item.id; |
|
|
|
}, |
|
|
|
onReset() { |
|
|
|
this.area = '1'; |
|
|
|
this.year = "year"; |
|
|
|
this.dateTime = '2024'; |
|
|
|
this.selectId = 1; |
|
|
|
}, |
|
|
|
searchQuery() { |
|
|
|
let dateTime = this.dateTime; |
|
|
|
if (dateTime == "") { |
|
|
|
@ -230,57 +227,65 @@ |
|
|
|
"type": this.year, |
|
|
|
"sectionId": this.selectId, |
|
|
|
"createTime": dateTime, |
|
|
|
"direction":1, |
|
|
|
"direction": this.area, |
|
|
|
}).then(res => { |
|
|
|
console.log(res); |
|
|
|
chart1.series[0].data = []; |
|
|
|
if (res.code == 200) { |
|
|
|
let data = res.data; |
|
|
|
if ( this.year == "year" ) { |
|
|
|
let years = []; |
|
|
|
chart1.series[0].data = []; |
|
|
|
if (data.length > 0) { |
|
|
|
const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev)); |
|
|
|
let xData = []; |
|
|
|
let numbers = []; |
|
|
|
|
|
|
|
data.forEach(it => { |
|
|
|
years.push(it.month+"月"); |
|
|
|
numbers.push(it.number); |
|
|
|
}) |
|
|
|
chart1.xAxis.data = years; |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
if (this.year == "year") { |
|
|
|
xData.push(it.month + "月"); |
|
|
|
} |
|
|
|
|
|
|
|
if (this.year == "month") { |
|
|
|
let months = []; |
|
|
|
let numbers = []; |
|
|
|
data.forEach(it=>{ |
|
|
|
months.push(it.day.split("-")[2]+"日"); |
|
|
|
numbers.push(it.number); |
|
|
|
}) |
|
|
|
chart1.xAxis.data = months; |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
xData.push(it.day.split("-")[2] + "日"); |
|
|
|
} |
|
|
|
|
|
|
|
if (this.year == "day") { |
|
|
|
let times = []; |
|
|
|
let numbers = []; |
|
|
|
data.forEach(it=>{ |
|
|
|
times.push(it.time.split(" ")[1]+"小时"); |
|
|
|
numbers.push(it.number); |
|
|
|
}) |
|
|
|
chart1.xAxis.data = times; |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
xData.push(it.time.split(" ")[1] + "小时"); |
|
|
|
} |
|
|
|
|
|
|
|
if (this.year == "quarter") { |
|
|
|
let months = []; |
|
|
|
let numbers = []; |
|
|
|
data.forEach(it=>{ |
|
|
|
months.push(it.MONTH+"月"); |
|
|
|
numbers.push(it.number); |
|
|
|
xData.push(it.QUARTER); |
|
|
|
} |
|
|
|
if (it.number == maxObject.number) { |
|
|
|
numbers.push({ |
|
|
|
value: it.number, |
|
|
|
itemStyle: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1, |
|
|
|
colorStops: [{ |
|
|
|
offset: 0, color: '#FFB904' // 0% 处的颜色 |
|
|
|
}, { |
|
|
|
offset: 1, color: '#FF6969' // 100% 处的颜色 |
|
|
|
}], |
|
|
|
global: false // 缺省为 false |
|
|
|
}, |
|
|
|
borderRadius: 6 |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
numbers.push({ |
|
|
|
value: it.number, |
|
|
|
itemStyle: { |
|
|
|
borderRadius: 6 |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
chart1.xAxis.data = months; |
|
|
|
|
|
|
|
chart1.xAxis.data = xData; |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.myChart1.setOption(chart1); |
|
|
|
}); |
|
|
|
|
|
|
|
@ -289,29 +294,19 @@ |
|
|
|
"type": this.year, |
|
|
|
"sectionId": this.selectId, |
|
|
|
"createTime": dateTime, |
|
|
|
"direction":1, |
|
|
|
"direction": this.area, |
|
|
|
}).then(res => { |
|
|
|
console.log(res); |
|
|
|
|
|
|
|
chart2.series[0].data = []; |
|
|
|
if (res.code == 200) { |
|
|
|
let types = []; |
|
|
|
let numbers = []; |
|
|
|
const gapData = { |
|
|
|
name: "", |
|
|
|
value: 0.5, |
|
|
|
itemStyle: { |
|
|
|
color: "transparent", |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
let data = res.data.warningTypeList; |
|
|
|
let total = res.data.total; |
|
|
|
|
|
|
|
data.forEach((it) => { |
|
|
|
// 1-交通拥堵 2-行人 3-非机动车 4-停车5-倒车/逆行 6-烟火7-撒落物8-异常天气 9-护栏碰撞 |
|
|
|
if (it.warningType == 1) { |
|
|
|
types.push("交通拥堵"); |
|
|
|
|
|
|
|
} |
|
|
|
if (it.warningType == 2) { |
|
|
|
types.push("行人"); |
|
|
|
@ -342,16 +337,14 @@ |
|
|
|
name: types[types.length - 1], |
|
|
|
value: it.number |
|
|
|
}); |
|
|
|
numbers.push(gapData); |
|
|
|
}) |
|
|
|
console.log(types); |
|
|
|
chart2.legend.data = types; |
|
|
|
chart2.legend.formatter = function (name) { |
|
|
|
let total = 0 |
|
|
|
let target |
|
|
|
for (let i = 0; i < numbers.length; i++) { |
|
|
|
total += numbers[i].value; |
|
|
|
if (types[i] === name) { |
|
|
|
if (types[i] == name) { |
|
|
|
target = numbers[i].value; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -389,9 +382,8 @@ |
|
|
|
"type": this.year, |
|
|
|
"sectionId": this.selectId, |
|
|
|
"createTime": dateTime, |
|
|
|
"direction":1, |
|
|
|
"direction": this.area, |
|
|
|
}).then(res => { |
|
|
|
console.log(res); |
|
|
|
chart3.series[0].data = []; |
|
|
|
chart3.series[1].data = []; |
|
|
|
if (res.code == 200) { |
|
|
|
@ -400,9 +392,10 @@ |
|
|
|
let zhs = []; |
|
|
|
let values = []; |
|
|
|
data.forEach((it) => { |
|
|
|
console.log(it); |
|
|
|
if (it.sectionNumber > 0) { |
|
|
|
values.push(it.sectionNumber); |
|
|
|
zhs.push(it.stakeMarkId); |
|
|
|
} |
|
|
|
}) |
|
|
|
chart3.xAxis.data = zhs; |
|
|
|
chart3.series[0].data = values; |
|
|
|
@ -412,7 +405,7 @@ |
|
|
|
let values = []; |
|
|
|
data.forEach((dt, i) => { |
|
|
|
dt.forEach((it) => { |
|
|
|
console.log(it); |
|
|
|
if (it.number > 0) { |
|
|
|
if (quarter == 1 && it.QUARTER == "第一季度") { |
|
|
|
values[i] = it.number; |
|
|
|
zhs[i] = it.stakeMark; |
|
|
|
@ -429,6 +422,8 @@ |
|
|
|
values[i] = it.number; |
|
|
|
zhs[i] = it.stakeMark; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
chart3.xAxis.data = zhs; |
|
|
|
@ -459,8 +454,17 @@ |
|
|
|
|
|
|
|
}); |
|
|
|
}) |
|
|
|
if (rows.length > 0) { |
|
|
|
let lastRoad = rows[rows.length - 1].sectionName.split("-")[1]; |
|
|
|
this.dataList.push({ |
|
|
|
title: lastRoad, |
|
|
|
id: rows[rows.length - 1].id, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
this.searchQuery(); |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
@ -484,49 +488,65 @@ |
|
|
|
canvas.height = parentDiv.offsetHeight; |
|
|
|
parentDiv.appendChild(canvas); |
|
|
|
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)'); |
|
|
|
|
|
|
|
|
|
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
|
|
|
|
|
// 绘制圆角矩形 |
|
|
|
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) |
|
|
|
|
|
|
|
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) |
|
|
|
|
|
|
|
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)'); |
|
|
|
|
|
|
|
// 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)'); |
|
|
|
// drawRoundRect(context, 267, 57, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// 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)'); |
|
|
|
// drawRoundRect(context, 267, 108, 140, 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, 267, 157, 140, 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, 267, 208, 140, 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, 267, 258, 140, 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)'); |
|
|
|
// drawRoundRect(context, 416, 57, 140, 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, 416, 108, 140, 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, 416, 157, 140, 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, 416, 208, 140, 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) |
|
|
|
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) |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
@ -535,33 +555,54 @@ |
|
|
|
<style lang='scss' scoped> |
|
|
|
.congestion { |
|
|
|
width: 100%; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.body { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
height: 320px; |
|
|
|
width:100%; |
|
|
|
justify-content: space-evenly; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
>div { |
|
|
|
display: inline-flex; |
|
|
|
height:100%; |
|
|
|
width: 33%; |
|
|
|
margin-right:px; |
|
|
|
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, rgba(19, 39, 47, 0.9725490196) 93%); |
|
|
|
padding: 10px; |
|
|
|
height: 470px; |
|
|
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|
|
|
border: 1px solid; |
|
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(1) { |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(2) { |
|
|
|
margin-left: 6px; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(3) { |
|
|
|
margin-left: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.btnChart { |
|
|
|
height: 330px; |
|
|
|
width: 90%; |
|
|
|
margin: 95px auto 0; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.board { |
|
|
|
height: 100px; |
|
|
|
width: 100%; |
|
|
|
padding:10px 20px; |
|
|
|
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
|
|
|
position: absolute; |
|
|
|
top: 30px; |
|
|
|
padding: 18px 20px; |
|
|
|
// background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|
|
|
border-radius: 5px 5px 5px 5px; |
|
|
|
opacity: 1; |
|
|
|
border: 1px solid; |
|
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
// border: 1px solid; |
|
|
|
// border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
@ -576,12 +617,15 @@ |
|
|
|
width: 100%; |
|
|
|
font-size: 14px; |
|
|
|
margin-top: 10px; |
|
|
|
|
|
|
|
div { |
|
|
|
white-space: nowrap; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.inputZh { |
|
|
|
width: 47px; |
|
|
|
|
|
|
|
::v-deep { |
|
|
|
.el-input__inner { |
|
|
|
background-color: #064258 !important; |
|
|
|
@ -589,13 +633,16 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.inputJl { |
|
|
|
margin-left: 5px; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.selectRoad { |
|
|
|
width:89px; |
|
|
|
width: 100px; |
|
|
|
border: 1px solid #00B3CC; |
|
|
|
|
|
|
|
::v-deep { |
|
|
|
.el-input__inner { |
|
|
|
background-color: #064258 !important; |
|
|
|
@ -603,13 +650,16 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btnSearch { |
|
|
|
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; |
|
|
|
} |
|
|
|
@ -617,10 +667,10 @@ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.charts { |
|
|
|
height: 100px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
zhoule
1 year ago