522 lines
14 KiB
Vue
522 lines
14 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2024-10-29 15:12:20
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2024-12-13 15:25:14
|
||
* @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
|
||
* @Description: 首页-日常巡查
|
||
-->
|
||
|
||
<template>
|
||
<div class="content">
|
||
<div class="title">
|
||
<span>日常巡查</span>
|
||
<el-radio-group v-model="checkCycle" size="mini" @change="getData">
|
||
<el-radio-button label="day">今日</el-radio-button>
|
||
<el-radio-button label="month">本月</el-radio-button>
|
||
<el-radio-button label="year">本年</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="daily-content">
|
||
<div class="left">
|
||
<div class="left-div">
|
||
<div class="name">巡查里程</div>
|
||
<div class="value">
|
||
<span>{{ formatNumber(mileage) }}</span
|
||
>km
|
||
</div>
|
||
</div>
|
||
<div class="left-div">
|
||
<div class="name">覆盖道路数</div>
|
||
<div class="value">
|
||
<span>{{ roadNum }}</span
|
||
>条
|
||
</div>
|
||
</div>
|
||
<!-- <div class="left-chart" ref="rateChart"></div> -->
|
||
</div>
|
||
<div class="right">
|
||
<div ref="trendChart"></div>
|
||
<div ref="distributionChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getTaskToday } from "@/api/xj/index/index";
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
name: "DailyIndex",
|
||
data() {
|
||
return {
|
||
// 巡查周期
|
||
checkCycle: "day",
|
||
// 巡查里程
|
||
mileage: 0,
|
||
// 覆盖道路数
|
||
roadNum: 0,
|
||
// 病害趋势echart数据
|
||
diseaseChart: [],
|
||
// 道路分布echart数据
|
||
roadChart: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description: 处理数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
formatNumber(num) {
|
||
if (num >= 100000000) {
|
||
// 超过1亿显示 x.xx亿
|
||
return (num / 100000000).toFixed(2) + "亿";
|
||
} else if (num >= 10000) {
|
||
// 超过1万显示 x.xx万
|
||
return (num / 10000).toFixed(2) + "万";
|
||
} else {
|
||
// 小于1万直接返回原数字
|
||
return num;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 获取数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getData() {
|
||
getTaskToday({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.mileage = data.xclc;
|
||
this.roadNum = data.fgdlts;
|
||
this.diseaseChart = data.xclcbhqs;
|
||
this.roadChart = data.dlxzbhfb;
|
||
this.$nextTick(() => {
|
||
this.drawTrendChart();
|
||
this.drawDistributionChart();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 绘制病害趋势柱状图
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
drawTrendChart() {
|
||
const xData = this.diseaseChart.map((item) => {
|
||
return item.label;
|
||
});
|
||
const y1Data = this.diseaseChart.map((item) => {
|
||
return item.value;
|
||
});
|
||
const y2Data = this.diseaseChart.map((item) => {
|
||
return item.long;
|
||
});
|
||
if (this.$refs.trendChart) {
|
||
const chart = echarts.init(this.$refs.trendChart);
|
||
chart.setOption({
|
||
color: ["#388BD8", "#FFC400"],
|
||
title: [
|
||
// 中心比例
|
||
{
|
||
text: "巡查里程-病害趋势",
|
||
x: "1%",
|
||
y: "1%",
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
right: "5%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
axisTick: {
|
||
show: false, //隐藏X轴刻度
|
||
},
|
||
axisLabel: { color: "#A2B0B8" },
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#3C6579",
|
||
width: 1,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "",
|
||
type: "value",
|
||
minInterval: 1,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#A2B0B8",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
// "formatter": "{value} T/h"
|
||
// formatter: "{value}",
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
name: "",
|
||
type: "value",
|
||
minInterval: 1,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#A2B0B8",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
// "formatter": "{value} T/W㎡"
|
||
// formatter: "{value}",
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
barWidth: 10,
|
||
name: "累计病害",
|
||
data: y1Data,
|
||
},
|
||
{
|
||
type: "line",
|
||
symbolSize: 5,
|
||
name: "巡查里程",
|
||
smooth: 1,
|
||
data: y2Data,
|
||
yAxisIndex: 1,
|
||
},
|
||
],
|
||
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: this.diseaseChart.length - 6,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: this.diseaseChart.length,
|
||
// 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();
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 绘制病害分布柱状图
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
drawDistributionChart() {
|
||
const xData = this.roadChart.map((item) => {
|
||
return item.label;
|
||
});
|
||
const yData = this.roadChart.map((item, index) => {
|
||
if (index % 2 == 0) {
|
||
return {
|
||
...item,
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderRadius: [3, 3, 0, 0],
|
||
color: "#388BD8",
|
||
},
|
||
};
|
||
}
|
||
return {
|
||
...item,
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderRadius: [3, 3, 0, 0],
|
||
color: "#38C8D8",
|
||
},
|
||
};
|
||
});
|
||
if (this.$refs.distributionChart) {
|
||
const chart = echarts.init(this.$refs.distributionChart);
|
||
chart.setOption({
|
||
title: [
|
||
// 中心比例
|
||
{
|
||
text: "道路新增病害分布",
|
||
x: "1%",
|
||
y: "1%",
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
],
|
||
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: {
|
||
interval: 0,
|
||
color: "#A2B0B8",
|
||
formatter: (params) => {
|
||
if (params.length > 5) {
|
||
return `${params.slice(0, 5)}...`;
|
||
}
|
||
return params;
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#3C6579",
|
||
width: 1,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
name: "",
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
color: "#9eaaba",
|
||
},
|
||
axisLine: { show: false },
|
||
splitLine: { show: true },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "新增病害数",
|
||
type: "bar",
|
||
barWidth: 20,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "rgba(105,160,231,0.1)",
|
||
},
|
||
data: yData,
|
||
},
|
||
],
|
||
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%;
|
||
font-size: 1.2rem;
|
||
|
||
span {
|
||
font-family: "DouYu";
|
||
}
|
||
}
|
||
|
||
.daily-content {
|
||
width: 100%;
|
||
height: 90%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 20%;
|
||
height: 100%;
|
||
background: url("../../assets/index/left-bkg.png") no-repeat;
|
||
background-size: 100%;
|
||
|
||
.left-div {
|
||
// height: 27.5%;
|
||
height: 50%;
|
||
width: calc(100% - 2rem);
|
||
margin: 0 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
&:nth-child(1) {
|
||
border-bottom: 1px #adc6e5 solid;
|
||
}
|
||
|
||
.name {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.value {
|
||
line-height: 2rem;
|
||
|
||
span {
|
||
margin-right: 0.3rem;
|
||
font-weight: 600;
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-chart {
|
||
height: 45%;
|
||
width: 100%;
|
||
text-align: center;
|
||
line-height: 3rem;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 78%;
|
||
height: 100%;
|
||
|
||
> div {
|
||
height: 50%;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|