387 lines
10 KiB
Vue
387 lines
10 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2024-10-29 15:30:35
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2024-12-04 09:56:31
|
||
* @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
|
||
* @Description: 首页-路况评定
|
||
-->
|
||
|
||
<template>
|
||
<div class="content">
|
||
<div class="title">
|
||
<span>路况评定</span>
|
||
<div class="title-select">
|
||
<el-radio-group v-model="itemSelect" size="mini" @change="changeRadio">
|
||
<el-radio-button
|
||
v-for="(item, index) in selectTypeArr"
|
||
:label="item.value"
|
||
:key="`left-screen-${index}`"
|
||
>{{ item.label }}</el-radio-button
|
||
>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="traffic-table">
|
||
<el-table :data="trafficTableData" style="width: 100%" height="180">
|
||
<el-table-column type="index" label="序号"></el-table-column>
|
||
<el-table-column prop="name" show-overflow-tooltip label="名称">
|
||
</el-table-column>
|
||
<el-table-column prop="roadPerKm" label="路面病害数(个/km)">
|
||
</el-table-column>
|
||
<el-table-column prop="eventPerKm" label="交安病害数(个/km)">
|
||
</el-table-column>
|
||
<el-table-column prop="bridgePerKm" label="桥隧病害数(个/km)">
|
||
</el-table-column>
|
||
<el-table-column prop="greenPerKm" label="绿化问题数(个/km)">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="traffic-chart" ref="trafficChart"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
// 接口
|
||
import {
|
||
getRoadCondition,
|
||
getRoadConditionLog,
|
||
selectTypeList,
|
||
} from "@/api/xj/index/index";
|
||
export default {
|
||
name: "TrafficIndex",
|
||
data() {
|
||
return {
|
||
// 右上角单选择框
|
||
selectTypeArr: [],
|
||
// 右上角选择框绑定
|
||
itemSelect: "",
|
||
// 路况表格数据
|
||
trafficTableData: [],
|
||
// echart数据
|
||
trafficEchartData: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.getTableData();
|
||
this.getSelect();
|
||
this.getLogData();
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description: 获取数据栏右上角选项数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getSelect() {
|
||
selectTypeList().then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.selectTypeArr = data;
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 右上角单选改变事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeRadio() {
|
||
this.getTableData();
|
||
this.getLogData();
|
||
},
|
||
|
||
/**
|
||
* @description: 获取表格数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getTableData() {
|
||
getRoadCondition({ type: this.itemSelect }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.trafficTableData = data;
|
||
this.$nextTick(() => {
|
||
this.drawTrafficChart();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 获取echart数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getLogData() {
|
||
getRoadConditionLog({ type: this.itemSelect }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.trafficEchartData = data;
|
||
this.$nextTick(() => {
|
||
this.drawTrafficChart();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 绘制柱状图
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
drawTrafficChart() {
|
||
if (this.$refs.trafficChart) {
|
||
const xData = this.trafficEchartData.map((item) => {
|
||
return item.name;
|
||
});
|
||
const y1Data = this.trafficEchartData.map((item) => {
|
||
return item.road;
|
||
});
|
||
const y2Data = this.trafficEchartData.map((item) => {
|
||
return item.event;
|
||
});
|
||
const y3Data = this.trafficEchartData.map((item) => {
|
||
return item.bridge;
|
||
});
|
||
const y4Data = this.trafficEchartData.map((item) => {
|
||
return item.green;
|
||
});
|
||
const chart = echarts.init(this.$refs.trafficChart);
|
||
chart.setOption({
|
||
color: ["#388BD8", "#04DAD7", "#F8A74E", "#8448FF"],
|
||
title: [
|
||
// 中心比例
|
||
{
|
||
text: "病害趋势",
|
||
x: "1%",
|
||
y: "1%",
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
show: true,
|
||
right: "3%",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
padding: [5, 10, 5, 10],
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "7%",
|
||
right: "4%",
|
||
bottom: "12%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
data: xData,
|
||
type: "category",
|
||
axisTick: {
|
||
show: false, //隐藏X轴刻度
|
||
},
|
||
axisLabel: { color: "#A2B0B8" },
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#3C6579",
|
||
width: 1,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
boundaryGap: false,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
name: "",
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
color: "#9eaaba",
|
||
},
|
||
axisLine: { show: false },
|
||
splitLine: { show: true },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "路面病害数",
|
||
type: "line",
|
||
showSymbol: false,
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#388BD8",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffffff",
|
||
},
|
||
]),
|
||
},
|
||
data: y1Data,
|
||
},
|
||
{
|
||
name: "交安病害数",
|
||
type: "line",
|
||
showSymbol: false,
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#04DAD7",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffffff",
|
||
},
|
||
]),
|
||
},
|
||
data: y3Data,
|
||
},
|
||
{
|
||
name: "桥隧病害数",
|
||
type: "line",
|
||
showSymbol: false,
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#F8A74E",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffffff",
|
||
},
|
||
]),
|
||
},
|
||
data: y4Data,
|
||
},
|
||
{
|
||
name: "绿化问题数",
|
||
type: "line",
|
||
showSymbol: false,
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#8448FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffffff",
|
||
},
|
||
]),
|
||
},
|
||
data: y2Data,
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
// 设置滚动条的隐藏与显示
|
||
show: false,
|
||
// 设置滚动条类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "rgba(225,225,225,0.2)",
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "#ccc",
|
||
// 设置边框颜色
|
||
borderColor: "rgba(225,225,225,0.2)",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 6,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 设置滚动条宽度，相对于盒子宽度
|
||
width: "80%",
|
||
// 设置滚动条高度
|
||
height: 5,
|
||
// 设置滚动条显示位置
|
||
left: "center",
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 控制手柄的尺寸
|
||
handleSize: 10,
|
||
// dataZoom-slider组件离容器下侧的距离
|
||
bottom: 0,
|
||
},
|
||
{
|
||
// 没有下面这块的话，只能拖动滚动条，
|
||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||
type: "inside",
|
||
// 滚轮是否触发缩放
|
||
zoomOnMouseWheel: false,
|
||
// 鼠标滚轮触发滚动
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
});
|
||
window.addEventListener("resize", () => {
|
||
chart.resize();
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 1rem;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 10%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-left: 3rem;
|
||
background: url("../../assets/index/div-title.png") no-repeat;
|
||
background-size: 5%;
|
||
background-position: 0 30%;
|
||
|
||
> span {
|
||
font-family: "DouYu";
|
||
}
|
||
}
|
||
|
||
.traffic-table {
|
||
width: 100%;
|
||
height: 45%;
|
||
|
||
::v-deep .el-table tr {
|
||
background-color: #f6f7fa;
|
||
}
|
||
::v-deep .el-table .el-table__header-wrapper th,
|
||
.el-table .el-table__fixed-header-wrapper th {
|
||
background-color: #f6f7fa;
|
||
}
|
||
}
|
||
|
||
.traffic-chart {
|
||
width: 100%;
|
||
height: 45%;
|
||
}
|
||
}
|
||
</style>
|