qingzhengli
1 year ago
22 changed files with 1305 additions and 245 deletions
@ -0,0 +1,679 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<div class="board"> |
|||
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" /> |
|||
<div class="searchPanel"> |
|||
<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> |
|||
</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-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 class="body"> |
|||
<div> |
|||
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle> |
|||
<div id="chart1" class="btnChart" /> |
|||
</div> |
|||
|
|||
<div> |
|||
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|||
<div id="chart2" class="btnChart" /> |
|||
</div> |
|||
|
|||
<div> |
|||
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle> |
|||
<div id="chart3" class="btnChart" /> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
import ProgressBar from './progressBar'; |
|||
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 { getWarningTrend, getWarningSectionType, getSectionMarkNumber, getRoadSectionList } from '../../../../../../../api/event/perceiveEvent'; |
|||
|
|||
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.lineTo(width - radius + x, y); |
|||
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.lineTo(radius + x, height + y); |
|||
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); |
|||
ctx.closePath(); |
|||
//ctx.stroke(); |
|||
ctx.fill() |
|||
} |
|||
|
|||
export default { |
|||
name: 'EventQuery', |
|||
components: { |
|||
WgtTitle, |
|||
ProgressBar, |
|||
ElQuarterPicker |
|||
}, |
|||
data() { |
|||
return { |
|||
yearOptions: [ |
|||
{ |
|||
value: 'year', |
|||
label: '年度' |
|||
}, { |
|||
value: 'month', |
|||
label: '月' |
|||
}, |
|||
{ |
|||
value: 'date', |
|||
label: '日' |
|||
}, |
|||
{ |
|||
value: 'quarter', |
|||
label: '季' |
|||
},], |
|||
areaOptions: [{ |
|||
value: '1', |
|||
label: '济南方向' |
|||
}, { |
|||
value: '2', |
|||
label: '菏泽方向' |
|||
}], |
|||
dateTime: "2024", |
|||
area: '1', |
|||
dataList: [], |
|||
quarter: "", |
|||
selectIndex: 3, |
|||
selectId: 3, |
|||
year: "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() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectProgress(item, index,) { |
|||
console.log("))))))))))))", item.id, item, index) |
|||
this.selectIndex = index |
|||
this.selectId = item.id; |
|||
this.searchQuery() |
|||
}, |
|||
onReset() { |
|||
this.area = '1'; |
|||
this.year = "year"; |
|||
this.dateTime = '2024'; |
|||
this.selectId = 0; |
|||
}, |
|||
searchQuery() { |
|||
let dateTime = this.dateTime; |
|||
if (dateTime == "") { |
|||
this.$message.error('没有选日期参数！'); |
|||
return |
|||
} |
|||
var quarter = 0; |
|||
if (this.year == "year") { |
|||
dateTime = new Date(dateTime); |
|||
dateTime = dateTime.getFullYear() + "-01-01 00:00:00"; |
|||
console.log(dateTime); |
|||
} |
|||
if (this.year == "month") { |
|||
dateTime = new Date(dateTime); |
|||
let m = dateTime.getMonth() + 1; |
|||
m = m < 10 ? "0" + m : m; |
|||
dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00"; |
|||
console.log(dateTime); |
|||
} |
|||
if (this.year == "quarter") { |
|||
console.log(dateTime); |
|||
dateTime = new Date(dateTime); |
|||
let m = dateTime.getMonth() + 1; |
|||
if (m == 1) m = 1; |
|||
if (m == 2) m = 4; |
|||
if (m == 3) m = 7; |
|||
if (m == 4) m = 10; |
|||
|
|||
quarter = m; |
|||
m = m < 10 ? "0" + m : m; |
|||
dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00"; |
|||
console.log(dateTime); |
|||
} |
|||
|
|||
if (this.year == "date") { |
|||
this.year = "day"; |
|||
dateTime = new Date(dateTime); |
|||
let m = dateTime.getMonth() + 1; |
|||
m = m < 10 ? "0" + m : m; |
|||
let d = dateTime.getDate(); |
|||
d = d < 10 ? "0" + d : d; |
|||
dateTime = dateTime.getFullYear() + "-" + m + "-" + d + " 00:00:00"; |
|||
} |
|||
|
|||
//感知事件趋势 |
|||
getWarningTrend({ |
|||
"type": this.year, |
|||
"sectionId": this.selectId, |
|||
"createTime": dateTime, |
|||
"direction": this.area, |
|||
}).then(res => { |
|||
if (res.code == 200) { |
|||
let data = res.data; |
|||
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 => { |
|||
if (this.year == "year") { |
|||
xData.push(it.month + "月"); |
|||
} |
|||
if (this.year == "month") { |
|||
xData.push(it.day.split("-")[2] + "日"); |
|||
} |
|||
if (this.year == "day") { |
|||
xData.push(it.time.split(" ")[1] + "小时"); |
|||
} |
|||
if (this.year == "quarter") { |
|||
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 = xData; |
|||
chart1.series[0].data = numbers; |
|||
|
|||
} |
|||
} |
|||
this.myChart1.setOption(chart1); |
|||
}); |
|||
|
|||
//类型占比 |
|||
getWarningSectionType({ |
|||
"type": this.year, |
|||
"sectionId": this.selectId, |
|||
"createTime": dateTime, |
|||
"direction": this.area, |
|||
}).then(res => { |
|||
chart2.series[0].data = []; |
|||
if (res.code == 200) { |
|||
let types = []; |
|||
let numbers = []; |
|||
|
|||
let data = res.data.warningTypeList; |
|||
let total = res.data.total; |
|||
|
|||
data.forEach((it) => { |
|||
if (it.warningType == 1) { |
|||
types.push("交通拥堵"); |
|||
} |
|||
if (it.warningType == 2) { |
|||
types.push("行人"); |
|||
} |
|||
if (it.warningType == 3) { |
|||
types.push("非机动车"); |
|||
} |
|||
if (it.warningType == 4) { |
|||
types.push("停车"); |
|||
} |
|||
if (it.warningType == 5) { |
|||
types.push("倒车/逆行"); |
|||
} |
|||
if (it.warningType == 6) { |
|||
types.push("烟火"); |
|||
} |
|||
if (it.warningType == 7) { |
|||
types.push("撒落物"); |
|||
} |
|||
if (it.warningType == 8) { |
|||
types.push("异常天气"); |
|||
} |
|||
if (it.warningType == 9) { |
|||
types.push("护栏碰撞"); |
|||
} |
|||
|
|||
numbers.push({ |
|||
name: types[types.length - 1], |
|||
value: it.number |
|||
}); |
|||
}) |
|||
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) { |
|||
target = numbers[i].value; |
|||
} |
|||
} |
|||
var arr = [ |
|||
'{a|' + name + '}', |
|||
'{b|' + ((target / total) * 100).toFixed(2) + '%}', |
|||
] |
|||
return arr.join(' ') |
|||
}; |
|||
|
|||
chart2.title.text = `{zb|${total}}`; |
|||
chart2.title.subtext = "类型分析"; |
|||
|
|||
chart2.series[0].data = numbers; |
|||
// 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形 |
|||
this.myChart2.on('mouseover', (params) => { |
|||
if (params.componentType == 'graphic') { |
|||
return |
|||
} |
|||
// console.log(params); |
|||
chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`; |
|||
chart2.title.subtext = params.data.name; |
|||
this.myChart2.setOption(chart2); |
|||
}) |
|||
|
|||
// 用户鼠标移出时，重新开始自动切换 |
|||
this.myChart2.on('mouseout', (params) => { |
|||
chart2.title.text = `{zb|${total}}`; |
|||
chart2.title.subtext = "类型分析"; |
|||
this.myChart2.setOption(chart2); |
|||
}) |
|||
} |
|||
this.myChart2.setOption(chart2); |
|||
|
|||
}) |
|||
//路段范围内桩号分布 |
|||
getSectionMarkNumber({ |
|||
"type": this.year, |
|||
"sectionId": this.selectId, |
|||
"createTime": dateTime, |
|||
"direction": this.area, |
|||
}).then(res => { |
|||
chart3.series[0].data = []; |
|||
chart3.series[1].data = []; |
|||
if (res.code == 200) { |
|||
let data = res.data; |
|||
if (this.year != "quarter") { |
|||
const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev)); |
|||
let zhs = []; |
|||
let values1 = []; |
|||
let values2 = []; |
|||
|
|||
data.forEach((it) => { |
|||
if (it.sectionNumber > 0) { |
|||
values2.push(it.sectionNumber); |
|||
zhs.push(it.stakeMarkId); |
|||
|
|||
if (maxObject && maxObject.sectionNumber == it.sectionNumber) { |
|||
values1.push({ |
|||
value: it.sectionNumber, |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#01D5BC' // 0% 处的颜色 |
|||
}, { |
|||
offset: 1, color: '#003B4E' // 100% 处的颜色 |
|||
}], |
|||
global: false // 缺省为 false |
|||
}, |
|||
borderRadius: 6 |
|||
}, |
|||
}) |
|||
} else { |
|||
values1.push({ |
|||
value: it.sectionNumber, |
|||
itemStyle: { |
|||
borderRadius: 6 |
|||
}, |
|||
}) |
|||
} |
|||
|
|||
} |
|||
}) |
|||
|
|||
chart3.xAxis.data = zhs; |
|||
chart3.series[0].data = values1; |
|||
chart3.series[1].data = values2; |
|||
} else { |
|||
let zhs = []; |
|||
let values = []; |
|||
data.forEach((dt, i) => { |
|||
dt.forEach((it) => { |
|||
if (it.number > 0) { |
|||
if (quarter == 1 && it.QUARTER == "第一季度") { |
|||
values[i] = it.number; |
|||
zhs[i] = it.stakeMark; |
|||
} |
|||
if (quarter == 4 && it.QUARTER == "第二季度") { |
|||
values[i] = it.number; |
|||
zhs[i] = it.stakeMark; |
|||
} |
|||
if (quarter == 7 && it.QUARTER == "第三季度") { |
|||
values[i] = it.number; |
|||
zhs[i] = it.stakeMark; |
|||
} |
|||
if (quarter == 10 && it.QUARTER == "第四季度") { |
|||
values[i] = it.number; |
|||
zhs[i] = it.stakeMark; |
|||
} |
|||
} |
|||
|
|||
}) |
|||
}) |
|||
chart3.xAxis.data = zhs; |
|||
chart3.series[0].data = values; |
|||
chart3.series[1].data = values; |
|||
} |
|||
} |
|||
|
|||
this.myChart3.setOption(chart3); |
|||
}) |
|||
if (this.year == "day") |
|||
this.year = "date"; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
getRoadSectionList().then(res => { |
|||
console.log(res); |
|||
if (res.code == 200) { |
|||
let rows = res.rows; |
|||
this.dataList = []; |
|||
rows.forEach(it => { |
|||
this.dataList.push({ |
|||
title: it.sectionName.split("-")[0], |
|||
id: it.id, |
|||
}); |
|||
}) |
|||
console.log("dataList", this.dataList) |
|||
// 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(); |
|||
|
|||
|
|||
}) |
|||
|
|||
var myChart1 = echarts.init(document.getElementById('chart1')); |
|||
myChart1.setOption(chart1); |
|||
var myChart2 = echarts.init(document.getElementById('chart2')); |
|||
myChart2.setOption(chart2); |
|||
var myChart3 = echarts.init(document.getElementById('chart3')); |
|||
myChart3.setOption(chart3); |
|||
|
|||
|
|||
this.myChart1 = myChart1; |
|||
this.myChart2 = myChart2; |
|||
this.myChart3 = myChart3; |
|||
|
|||
const domMap = document.getElementById("chart2"); |
|||
let parentDiv = domMap.firstChild; |
|||
// 创建canvas |
|||
let canvas = document.createElement('canvas'); |
|||
canvas.width = parentDiv.offsetWidth; |
|||
canvas.height = parentDiv.offsetHeight; |
|||
parentDiv.appendChild(canvas); |
|||
const context = canvas.getContext('2d'); |
|||
context.lineWidth = 1; // 设置线段宽度 |
|||
|
|||
// 填充渐变颜色 |
|||
// 颜色断点 |
|||
// 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); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
position: relative; |
|||
|
|||
.body { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-evenly; |
|||
font-size: 14px; |
|||
|
|||
>div { |
|||
width: 33%; |
|||
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%; |
|||
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; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
|
|||
|
|||
.searchPanel { |
|||
display: flex; |
|||
|
|||
align-items: center; |
|||
height: 40px; |
|||
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; |
|||
border-width: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.inputJl { |
|||
margin-left: 5px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.selectRoad { |
|||
width: 100px; |
|||
border: 1px solid #00B3CC; |
|||
|
|||
::v-deep { |
|||
.el-input__inner { |
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btnSearch { |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
margin-left: 10px; |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.btnReset { |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
; |
|||
border-color: transparent; |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.charts { |
|||
height: 100px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
<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-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> |
|||
|
|||
@ -0,0 +1,205 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<div :style="{ width: dataList.length * 300 }"> |
|||
|
|||
<div :class="selectIndex == index ? |
|||
(selectLine < 1 ? 'item action Abefore' : 'item action Aafter') : |
|||
(selectIndex + selectLine == index ? |
|||
(selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')" |
|||
v-for="(item, index) in dataList" :key="index"> |
|||
|
|||
<i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i> |
|||
<i class="before" @click="selectItem(index, +1, item)"></i> |
|||
<span></span> |
|||
<div>{{ item.title }}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'ProgressBar', |
|||
components: { |
|||
}, |
|||
props: { |
|||
dataList: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
selectIndex: { |
|||
type: Number, |
|||
default: 1 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// selectIndex: 0, |
|||
selectLine: -1, |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index, num, item) { |
|||
this.selectIndex = index; |
|||
this.selectLine = num; |
|||
if (item) |
|||
this.$emit("selectItem", item, index); |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
height: 35px; |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
|
|||
>div { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 35px; |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
|
|||
>.item .after { |
|||
position: absolute; |
|||
display: inline-flex; |
|||
left: 0px; |
|||
top: -5px; |
|||
width: 45px !important; |
|||
height: 35px !important; |
|||
background-color: transparent; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
>.item .after::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
left: 0px; |
|||
top: 8px; |
|||
width: 45px !important; |
|||
height: 3px !important; |
|||
background-color: #C7C7C7; |
|||
} |
|||
|
|||
>.item .before { |
|||
position: absolute; |
|||
display: inline-flex; |
|||
right: 0px; |
|||
top: -5px; |
|||
width: 45px; |
|||
height: 35px; |
|||
background-color: transparent; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
>.item .before::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
left: 0px; |
|||
top: 8px; |
|||
width: 45px !important; |
|||
height: 3px !important; |
|||
background-color: #C7C7C7; |
|||
} |
|||
|
|||
.item.action .after::after { |
|||
background-color: #72FDC9; |
|||
} |
|||
|
|||
.item.action.Aafter .after::after { |
|||
background-color: #C7C7C7 !important; |
|||
} |
|||
|
|||
>.item.action.Aafter .before::after { |
|||
background-color: #72FDC9; |
|||
} |
|||
|
|||
>.item.action.Abefore .after::after { |
|||
background-color: #72FDC9; |
|||
} |
|||
|
|||
>.bef::before { |
|||
background-color: #72FDC9 !important; |
|||
} |
|||
|
|||
>.aft::after { |
|||
background-color: #72FDC9 !important; |
|||
} |
|||
|
|||
>.item.action span { |
|||
background-color: #72FDC9; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
>.item.action span::after { |
|||
border-color: #72FDC9; |
|||
} |
|||
|
|||
>.action div { |
|||
color: #72FDC9 !important; |
|||
} |
|||
|
|||
|
|||
>.item { |
|||
position: relative; |
|||
width: 113px; |
|||
height: 35px; |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
justify-items: center; |
|||
|
|||
|
|||
>span { |
|||
position: absolute; |
|||
display: inline-flex; |
|||
width: 9px; |
|||
height: 9px; |
|||
background: #C7C7C7; |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
left: 53px; |
|||
} |
|||
|
|||
>div { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
align-items: center; |
|||
justify-content: center; |
|||
top: 5px; |
|||
margin-top: 10px; |
|||
color: #C7C7C7; |
|||
} |
|||
|
|||
>span::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
width: 15px; |
|||
height: 15px; |
|||
border: 1px solid #C7C7C7; |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
top: -3.5px; |
|||
left: -3px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue