fix：大屏首页逻辑增加
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-29 15:12:20
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-05 11:47:03
|
||||
* @LastEditTime: 2024-11-15 11:37:11
|
||||
* @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
|
||||
* @Description: 首页-日常巡查
|
||||
-->
|
||||
@@ -14,13 +14,19 @@
|
||||
<div class="left">
|
||||
<div class="left-div">
|
||||
<div class="name">巡查里程</div>
|
||||
<div class="value"><span>15.16</span>km</div>
|
||||
<div class="value">
|
||||
<span>{{ formatNumber(mileage) }}</span
|
||||
>km
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-div">
|
||||
<div class="name">覆盖道路数</div>
|
||||
<div class="value"><span>352</span>条</div>
|
||||
<div class="value">
|
||||
<span>{{ roadNum }}</span
|
||||
>条
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-chart" ref="rateChart"></div>
|
||||
<!-- <div class="left-chart" ref="rateChart"></div> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<div ref="trendChart"></div>
|
||||
@@ -31,106 +37,62 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTaskToday } from "@/api/xj/index/index";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "DailyIndex",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 巡查里程
|
||||
mileage: 0,
|
||||
// 覆盖道路数
|
||||
roadNum: 0,
|
||||
// 病害趋势echart数据
|
||||
diseaseChart: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getData() {
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
this.drawTrendChart();
|
||||
this.drawDistributionChart();
|
||||
});
|
||||
},
|
||||
/* 绘制覆盖率饼图 */
|
||||
drawLeftChart() {
|
||||
if (this.$refs.rateChart) {
|
||||
const chart = echarts.init(this.$refs.rateChart);
|
||||
const current = 45;
|
||||
chart.setOption({
|
||||
// color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "80%",
|
||||
x: "center",
|
||||
y: "52%",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#444",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "覆盖率",
|
||||
x: "center",
|
||||
y: "10%",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
center: ["50%", "60%"],
|
||||
radius: ["40%", "58%"],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: "category",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [80],
|
||||
name: "",
|
||||
type: "bar",
|
||||
roundCap: true,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "#BDD5F4",
|
||||
},
|
||||
coordinateSystem: "polar",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#005DCF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00CCFF",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
/* 处理数据 */
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取数据 */
|
||||
getData() {
|
||||
getTaskToday().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mileage = data.xclc;
|
||||
this.roadNum = data.fgdlts;
|
||||
this.diseaseChart = data.xclcbhqs;
|
||||
this.$nextTick(() => {
|
||||
// this.drawLeftChart();
|
||||
this.drawTrendChart();
|
||||
this.drawDistributionChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制病害趋势柱状图 */
|
||||
drawTrendChart() {
|
||||
const xData = this.diseaseChart.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.diseaseChart.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
if (this.$refs.trendChart) {
|
||||
const chart = echarts.init(this.$refs.trendChart);
|
||||
chart.setOption({
|
||||
@@ -162,7 +124,7 @@ export default {
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴刻度
|
||||
},
|
||||
@@ -217,23 +179,69 @@ export default {
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
name: "累计病害",
|
||||
data: [400, 600, 1400, 1700],
|
||||
data: yData,
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
symbolSize: 5,
|
||||
name: "巡查里程",
|
||||
smooth: 1,
|
||||
data: [10, 40, 50, 90],
|
||||
data: [10, 40, 50, 90, 10, 20, 23, 54, 65, 86, 54, 48, 95],
|
||||
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: 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();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制病害分布柱状图 */
|
||||
drawDistributionChart() {
|
||||
const xData = [
|
||||
@@ -359,6 +367,87 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制覆盖率饼图 */
|
||||
drawLeftChart() {
|
||||
if (this.$refs.rateChart) {
|
||||
const chart = echarts.init(this.$refs.rateChart);
|
||||
const current = 45;
|
||||
chart.setOption({
|
||||
// color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "80%",
|
||||
x: "center",
|
||||
y: "52%",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#444",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "覆盖率",
|
||||
x: "center",
|
||||
y: "10%",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
center: ["50%", "60%"],
|
||||
radius: ["40%", "58%"],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: "category",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [80],
|
||||
name: "",
|
||||
type: "bar",
|
||||
roundCap: true,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "#BDD5F4",
|
||||
},
|
||||
coordinateSystem: "polar",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#005DCF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00CCFF",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -394,7 +483,8 @@ export default {
|
||||
background-size: 100%;
|
||||
|
||||
.left-div {
|
||||
height: 27.5%;
|
||||
// height: 27.5%;
|
||||
height: 50%;
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 1rem;
|
||||
display: flex;
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
<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="date" label="路线名称" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="PCI" > </el-table-column>
|
||||
<el-table-column prop="pci" label="PCI等级" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" label="路线名称"> </el-table-column>
|
||||
<el-table-column prop="name" label="路面病害数"> </el-table-column>
|
||||
<el-table-column prop="pci" label="交安病害数"> </el-table-column>
|
||||
<el-table-column prop="name" label="桥隧病害数"> </el-table-column>
|
||||
<el-table-column prop="name" label="绿化病害数" > </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="traffic-chart" ref="trafficChart"></div>
|
||||
@@ -100,7 +100,18 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月"],
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
],
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴刻度
|
||||
|
||||
Reference in New Issue
Block a user