fix：日常监测报告页面，工单完善
This commit is contained in:
parent
669552cce1
commit
f4338599d9
@ -58,6 +58,8 @@ export default {
|
||||
roadNum: 0,
|
||||
// 病害趋势echart数据
|
||||
diseaseChart: [],
|
||||
// 道路分布echart数据
|
||||
roadChart: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -155,9 +155,7 @@ export default {
|
||||
if (code === 200) {
|
||||
this.total = data.total;
|
||||
this.newTotal = data.today;
|
||||
let all = 0;
|
||||
this.distributionList = data.data.map((item) => {
|
||||
all += item.value;
|
||||
return {
|
||||
value: item.value,
|
||||
name: item.label,
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
import * as echarts from "echarts";
|
||||
// 接口
|
||||
import { getEquipment, getEquipmentLog } from "@/api/xj/index/index";
|
||||
import fssmScroll from "../../components/scroll/fssm-scroll.vue";
|
||||
import fssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
export default {
|
||||
components: { fssmScroll },
|
||||
name: "RoadIndex",
|
||||
|
||||
@ -53,20 +53,6 @@
|
||||
clearable
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="病害状态" prop="state">
|
||||
<el-select
|
||||
v-model="noticeForm.state"
|
||||
placeholder="请选择病害状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectStatus"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="上下行" prop="inspectDirection">
|
||||
<el-select
|
||||
v-model="noticeForm.inspectDirection"
|
||||
@ -146,7 +132,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 导航栏 -->
|
||||
<el-tabs v-model="activeName" @tab-click="getList">
|
||||
<el-tabs v-model="activeName" @tab-click="resetQuery">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="`tabs-${index}`"
|
||||
@ -350,8 +336,6 @@ export default {
|
||||
noticeForm: {
|
||||
// 道路名称
|
||||
segmentName: "",
|
||||
// 病害状态
|
||||
state: "",
|
||||
// 上下行
|
||||
inspectDirection: "",
|
||||
// 公里桩
|
||||
@ -405,8 +389,6 @@ export default {
|
||||
segmentList: [],
|
||||
// 病害类型下拉级联
|
||||
tableDefect: [],
|
||||
// 病害状态
|
||||
defectStatus: [],
|
||||
// 导航栏选择绑定
|
||||
activeName: "已完成",
|
||||
// 导航栏列表
|
||||
@ -448,7 +430,6 @@ export default {
|
||||
this.getList();
|
||||
this.getSegmentList();
|
||||
this.getDefectData();
|
||||
this.getDefectStatusList();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
@ -476,15 +457,12 @@ export default {
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取病害状态下拉数据
|
||||
* @description: 切换导航栏
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getDefectStatusList() {
|
||||
getDefectStatus().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.defectStatus = data;
|
||||
}
|
||||
});
|
||||
changeTab() {
|
||||
this.resetQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
@ -495,7 +473,18 @@ export default {
|
||||
handleQuery() {
|
||||
this.$refs.noticeForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.noticeForm));
|
||||
const data = {
|
||||
...this.noticeForm,
|
||||
classType: this.paramsDefectType ? this.paramsDefectType[0] : "",
|
||||
defectType: this.paramsDefectType
|
||||
? this.paramsDefectType.length > 1
|
||||
? this.paramsDefectType[1]
|
||||
: ""
|
||||
: "",
|
||||
startTime: this.dateTime ? this.dateTime[0] : "",
|
||||
endTime: this.dateTime ? this.dateTime[1] : "",
|
||||
};
|
||||
this.searchForm = JSON.parse(JSON.stringify(data));
|
||||
this.pagination.page = 1;
|
||||
this.getList();
|
||||
}
|
||||
@ -508,11 +497,10 @@ export default {
|
||||
* @return {*}
|
||||
*/
|
||||
resetQuery() {
|
||||
this.$refs.noticeForm.resetFields();
|
||||
this.noticeForm = {
|
||||
// 道路名称
|
||||
segmentName: "",
|
||||
// 病害状态
|
||||
state: "",
|
||||
// 上下行
|
||||
inspectDirection: "",
|
||||
// 公里桩
|
||||
@ -525,6 +513,8 @@ export default {
|
||||
minArea: undefined,
|
||||
maxArea: undefined,
|
||||
};
|
||||
this.paramsDefectType = [];
|
||||
this.dateTime = [];
|
||||
this.searchForm = {};
|
||||
this.pagination.page = 1;
|
||||
this.getList();
|
||||
@ -540,8 +530,6 @@ export default {
|
||||
...this.searchForm,
|
||||
...this.pagination,
|
||||
maintenanceStatus: this.activeName,
|
||||
startTime: this.dateTime ? this.dateTime[0] : "",
|
||||
endTime: this.dateTime ? this.dateTime[1] : "",
|
||||
};
|
||||
getMaintenanceNoticeList(data)
|
||||
.then(({ code, rows, total }) => {
|
||||
|
||||
@ -0,0 +1,293 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-18 09:13:34
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-18 09:13:42
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\four-content.vue
|
||||
* @Description: 巡检报告-日常监测报告-路况评定
|
||||
-->
|
||||
<template>
|
||||
<div class="four-content">
|
||||
<div class="title">
|
||||
<span>路况评定</span>
|
||||
</div>
|
||||
<div class="traffic-chart" ref="trafficChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
// 接口
|
||||
import { getRoadConditionLog } from "@/api/xj/index/index";
|
||||
export default {
|
||||
name: "FourContent",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.getLogData();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 获取echart数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getLogData() {
|
||||
getRoadConditionLog().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>
|
||||
.four-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
|
||||
.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-chart {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,243 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-18 09:13:34
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-18 09:13:42
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\one-content.vue
|
||||
* @Description: 巡检报告-日常监测报告-今日巡查
|
||||
-->
|
||||
<template>
|
||||
<div class="one-content">
|
||||
<div class="title">
|
||||
<span>今日巡查</span>
|
||||
</div>
|
||||
<div class="day-echart" ref="dayChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTaskToday } from "@/api/xj/index/index";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "OneContent",
|
||||
data() {
|
||||
return {
|
||||
// 病害趋势echart数据
|
||||
diseaseChart: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 获取数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getData() {
|
||||
getTaskToday().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.diseaseChart = data.xclcbhqs;
|
||||
this.$nextTick(() => {
|
||||
this.drawTrendChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @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.dayChart) {
|
||||
const chart = echarts.init(this.$refs.dayChart);
|
||||
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",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#A2B0B8",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
// "formatter": "{value} T/h"
|
||||
// formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "value",
|
||||
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: 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>
|
||||
.one-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
|
||||
.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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.day-echart {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,234 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-18 09:13:34
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-18 09:13:42
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\three-content.vue
|
||||
* @Description: 巡检报告-日常监测报告-公路资产
|
||||
-->
|
||||
<template>
|
||||
<div class="three-content">
|
||||
<div class="title">
|
||||
<span>公路资产</span>
|
||||
</div>
|
||||
<div class="road-chart" ref="roadChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEquipmentLog } from "@/api/xj/index/index";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
components: { FssmScroll },
|
||||
name: "ThreeContent",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.getBottomData();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 获取底部echart数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getBottomData() {
|
||||
getEquipmentLog().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadChartData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawRoadChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 绘制echart图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawRoadChart() {
|
||||
if (this.$refs.roadChart) {
|
||||
const xData = this.roadChartData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const y1Data = this.roadChartData.map((item) => {
|
||||
return item.total;
|
||||
});
|
||||
const y2Data = this.roadChartData.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
const chart = echarts.init(this.$refs.roadChart);
|
||||
chart.setOption({
|
||||
color: ["#388BD8", "#04DAD7"],
|
||||
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",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#A2B0B8",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
// "formatter": "{value} T/h"
|
||||
// formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "路产总数",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: "#388BD8",
|
||||
},
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
name: "异常设施数量",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: "#38C8D8",
|
||||
},
|
||||
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>
|
||||
.three-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
|
||||
.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";
|
||||
}
|
||||
}
|
||||
|
||||
.road-chart {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,285 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-18 09:13:34
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-18 09:13:42
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\twe-content.vue
|
||||
* @Description: 巡检报告-日常监测报告-病害识别
|
||||
-->
|
||||
<template>
|
||||
<div class="twe-content">
|
||||
<div class="title">
|
||||
<span>病害识别</span>
|
||||
</div>
|
||||
<div class="disease-echart">
|
||||
<div class="disease-div" ref="diseaseChart"></div>
|
||||
<div class="disease-legnd">
|
||||
<fssm-scroll>
|
||||
<div
|
||||
class="legnd-div"
|
||||
v-for="(item, index) in distributionList"
|
||||
:key="`disease-${index}`"
|
||||
>
|
||||
<div class="name">
|
||||
<span
|
||||
class="index"
|
||||
:style="{ backgroundColor: distributionColor[index] }"
|
||||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="rate">{{ item.rate }}</div>
|
||||
</div>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTotalList } from "@/api/xj/index/index";
|
||||
import * as echarts from "echarts";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
export default {
|
||||
name: "TweContent",
|
||||
components: {
|
||||
FssmScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 病害类型颜色盘
|
||||
distributionColor: [
|
||||
"#3678FF",
|
||||
"#F8A74E",
|
||||
"#04DAD7",
|
||||
"#00D669",
|
||||
"#8448FF",
|
||||
"#F6D566",
|
||||
"#00B1FF",
|
||||
"#62CFFF",
|
||||
"#6A9BFF",
|
||||
"#B38EFF",
|
||||
"#3678FF",
|
||||
"#F8A74E",
|
||||
"#04DAD7",
|
||||
"#00D669",
|
||||
"#8448FF",
|
||||
"#F6D566",
|
||||
"#00B1FF",
|
||||
"#62CFFF",
|
||||
"#6A9BFF",
|
||||
"#B38EFF",
|
||||
"#3678FF",
|
||||
"#F8A74E",
|
||||
"#04DAD7",
|
||||
"#00D669",
|
||||
"#8448FF",
|
||||
],
|
||||
// 病害类型分布数据
|
||||
distributionList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getBottomData();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 获取数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getBottomData() {
|
||||
getTotalList({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.total = data.total;
|
||||
this.newTotal = data.today;
|
||||
this.distributionList = data.data.map((item) => {
|
||||
return {
|
||||
value: item.value,
|
||||
name: item.label,
|
||||
rate: `${((item.value / data.total) * 100).toFixed(0)}%`,
|
||||
};
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawDistributionChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 绘制病害类型分布图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawDistributionChart() {
|
||||
if (this.$refs.diseaseChart) {
|
||||
const chart = echarts.init(this.$refs.diseaseChart);
|
||||
chart.setOption({
|
||||
color: this.distributionColor,
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "新增病害类型分布",
|
||||
x: "1%",
|
||||
y: "1%",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
// hoverAnimation: true,
|
||||
minAngle: 1,
|
||||
padAngle: 4,
|
||||
hoverOffset: 0,
|
||||
startAngle: 0, //起始角度
|
||||
clockwise: false, //是否顺时针
|
||||
radius: ["55%", "70%"],
|
||||
center: ["50%", "56%"],
|
||||
avoidLabelOverlap: false,
|
||||
animationDuration: 3000,
|
||||
emphasis: {
|
||||
label: {
|
||||
formatter: ["{a|{c}}" + "\n" + "{b|{b}}"].join("\n"),
|
||||
show: true,
|
||||
fontSize: "30",
|
||||
fontWeight: "bold",
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 18,
|
||||
lineHeight: 18,
|
||||
color: "#000",
|
||||
},
|
||||
b: {
|
||||
color: "#000",
|
||||
fontSize: 16,
|
||||
lineHeight: 30,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
color: "rgba(13, 17, 29,0)",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: this.distributionList,
|
||||
zlevel: 30,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["35%", "55%"],
|
||||
center: ["50%", "56%"],
|
||||
// hoverAnimation: true,
|
||||
hoverOffset: 0,
|
||||
startAngle: 0, //起始角度
|
||||
clockwise: false, //是否顺时针
|
||||
padAngle: 4,
|
||||
minAngle: 1,
|
||||
animationDuration: 3000,
|
||||
emphasis: { scale: false },
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#E4EDFD",
|
||||
},
|
||||
data: this.distributionList,
|
||||
z: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.twe-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
|
||||
.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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disease-echart {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
|
||||
.disease-div {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.disease-legnd {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
padding: 2.5rem 0;
|
||||
|
||||
.scroll-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.legnd-div {
|
||||
width: 47%;
|
||||
height: 2rem;
|
||||
padding: 0 1rem;
|
||||
margin: 0.2rem 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f6f6fa;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.index {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,18 +7,86 @@
|
||||
* @Description: 巡检报告-日常监测报告
|
||||
-->
|
||||
<template>
|
||||
<div class="content">日常监测报告</div>
|
||||
<div class="content">
|
||||
<div class="export">
|
||||
<el-form
|
||||
:model="dailyForm"
|
||||
ref="dailyForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-form-item label="道路名称" prop="segmentName">
|
||||
<el-select
|
||||
v-model="dailyForm.segmentName"
|
||||
placeholder="请选择路段"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in segmentList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
> -->
|
||||
<el-button type="primary" @click="exportReport" size="mini"
|
||||
>导出报告</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="div-content">
|
||||
<one-content></one-content>
|
||||
</div>
|
||||
<div class="div-content">
|
||||
<twe-content></twe-content>
|
||||
</div>
|
||||
<div class="div-content">
|
||||
<three-content></three-content>
|
||||
</div>
|
||||
<div class="div-content">
|
||||
<four-content></four-content>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OneContent from "./components/one-content.vue";
|
||||
import TweContent from "./components/twe-content.vue";
|
||||
import ThreeContent from "./components/three-content.vue";
|
||||
import FourContent from "./components/four-content.vue";
|
||||
export default {
|
||||
name: "DailyMonitoring",
|
||||
components: {},
|
||||
components: { OneContent, TweContent, ThreeContent, FourContent },
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
dailyForm: {
|
||||
segmentName: "",
|
||||
},
|
||||
// 选择分公司下拉数据
|
||||
segmentList: [],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 导出报告
|
||||
* @return {*}
|
||||
*/
|
||||
exportReport() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -26,6 +94,22 @@ export default {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100vh - 5.4rem);
|
||||
padding: 1rem;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.export {
|
||||
height: 5%;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.div-content {
|
||||
width: 49.5%;
|
||||
height: 46%;
|
||||
background: url("~@/assets/index/road-content.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user