fix:总览修改,病害修改,
This commit is contained in:
parent
b029559c73
commit
912137cf0c
@ -16,36 +16,61 @@ export function roadTrends(query) {
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// v1
|
||||
// 今日巡查数据
|
||||
export function roadToday(query) {
|
||||
// export function roadToday(query) {
|
||||
// return request({
|
||||
// url: "/bigscreen/getInspectionInfo",
|
||||
// method: "get",
|
||||
// params: query,
|
||||
// });
|
||||
// }
|
||||
export function roadToday(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getInspectionInfo",
|
||||
url: "/bigscreen/v2/getInspectionInfo",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 今日巡查弹窗
|
||||
export function roadTodayDetail(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getInspectionDetailInfo",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// pci排名数据
|
||||
export function roadPic(query) {
|
||||
// pci排名数据
|
||||
export function roadPic(query) {
|
||||
return request({
|
||||
url: "/bigscreen/pciRanking",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// v2
|
||||
// // 病害趋势3维饼图
|
||||
// export function roadCurrent(query) {
|
||||
// return request({
|
||||
// url: "/bigscreen/roadStatus",
|
||||
// method: "get",
|
||||
// params: query,
|
||||
// });
|
||||
// }
|
||||
|
||||
// 病害趋势3维饼图
|
||||
export function roadCurrent(query) {
|
||||
return request({
|
||||
url: "/bigscreen/roadStatus",
|
||||
url: "/bigscreen/v2/roadStatus",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 数据栏内右上角下拉框
|
||||
export function getDropList(query) {
|
||||
@ -54,6 +79,22 @@ export function getDropList(query) {
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 获取巡查里程数据
|
||||
export function getMileage(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getTaskInfo",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取巡检车辆数据
|
||||
export function getCarList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getCarList",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
@ -43,19 +43,37 @@ export function comppanyImg() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// v1
|
||||
// 获取病害筛选弹窗列表数据
|
||||
// export function defeaseList(data) {
|
||||
// return request({
|
||||
// url: "/bigscreen/getCurrentDefectPage",
|
||||
// method: "post",
|
||||
// data,
|
||||
// });
|
||||
// }
|
||||
|
||||
// 获取病害筛选弹窗列表数据
|
||||
export function defeaseList(data) {
|
||||
return request({
|
||||
url: "/bigscreen/getCurrentDefectPage",
|
||||
url: "/bigscreen/v2/getCurrentDefectPage",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取病害筛选弹窗路段下拉数据
|
||||
// export function getSegment(data) {
|
||||
// return request({
|
||||
// url: "/bigscreen/selectIdList",
|
||||
// method: "post",
|
||||
// data,
|
||||
// });
|
||||
// }
|
||||
export function getSegment(data) {
|
||||
return request({
|
||||
url: "/bigscreen/selectIdList",
|
||||
url: "/bigscreen/v2/selectIdList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
|
||||
@ -1,27 +1,59 @@
|
||||
/*
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-28 11:33:51
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 14:18:33
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\screen\traffic-screen.js
|
||||
* @Description: 大屏病害巡检接口
|
||||
*/
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 交安事件接口
|
||||
export function safetyData(query) {
|
||||
// export function safetyData(query) {
|
||||
// return request({
|
||||
// url: "/bigscreen/getEventInfo",
|
||||
// method: "get",
|
||||
// params: query,
|
||||
// });
|
||||
// }
|
||||
// 今日巡查数据
|
||||
export function roadToday(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEventInfo",
|
||||
url: "/bigscreen/v2/getInspectionInfo",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 今日巡查弹窗
|
||||
export function roadTodayDetail(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getInspectionDetailInfo",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 交安事件趋势接口
|
||||
export function eventLog(query) {
|
||||
export function defectLog(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEventLog",
|
||||
url: "/bigscreen/v2/getDefectLog",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 交安事件统计接口
|
||||
export function statisticData(query) {
|
||||
// export function statisticData(query) {
|
||||
// return request({
|
||||
// url: "/bigscreen/eventStatus",
|
||||
// method: "get",
|
||||
// params: query,
|
||||
// });
|
||||
// }
|
||||
export function roadCurrent(query) {
|
||||
return request({
|
||||
url: "/bigscreen/eventStatus",
|
||||
url: "/bigscreen/v2/roadStatus",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
@ -34,14 +66,32 @@ export function rankCount(query) {
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 交安突发事件
|
||||
export function emergencyData(query) {
|
||||
// export function emergencyData(query) {
|
||||
// return request({
|
||||
// url: "/bigscreen/getEmergencyEvent",
|
||||
// method: "get",
|
||||
// params: query,
|
||||
// });
|
||||
// }
|
||||
|
||||
// 病害日志列表
|
||||
export function emergencyData(data) {
|
||||
return request({
|
||||
url: "/bigscreen/getEmergencyEvent",
|
||||
url: "/bigscreen/v2/getCurrentDefectListPage",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 病害日志-病害类型下拉
|
||||
export function DefectType(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getAllDefectType",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
}
|
||||
BIN
src/assets/screen/disease/patrol-order.png
Normal file
BIN
src/assets/screen/disease/patrol-order.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 162 KiB |
BIN
src/assets/screen/index/btn-cancel.png
Normal file
BIN
src/assets/screen/index/btn-cancel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/screen/index/btn-submit.png
Normal file
BIN
src/assets/screen/index/btn-submit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1019 B |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 11 KiB |
BIN
src/assets/screen/index/button-overview-click.png
Normal file
BIN
src/assets/screen/index/button-overview-click.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/screen/index/button-overview.png
Normal file
BIN
src/assets/screen/index/button-overview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
BIN
src/assets/screen/index/disease-current-echart.png
Normal file
BIN
src/assets/screen/index/disease-current-echart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
src/assets/screen/index/inspection-div-car.png
Normal file
BIN
src/assets/screen/index/inspection-div-car.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/screen/index/inspection-div-online.png
Normal file
BIN
src/assets/screen/index/inspection-div-online.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.8 KiB |
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-22 15:30:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-11 14:37:32
|
||||
* @LastEditTime: 2024-11-13 13:31:49
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||
* @Description: 大屏查看图片弹窗
|
||||
-->
|
||||
@ -11,16 +11,26 @@
|
||||
<div class="app">
|
||||
<div class="left-list">
|
||||
<div class="img-top">
|
||||
<el-radio-group v-model="labelCheck" size="small">
|
||||
<el-radio-button label="left">目标维度</el-radio-button>
|
||||
<el-radio-button label="right">空间维度</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div
|
||||
class="img-top-div"
|
||||
:class="labelCheck === 'aim' ? 'img-top-div-click' : ''"
|
||||
@click.stop="changeImgType('aim')"
|
||||
>
|
||||
目标维度
|
||||
</div>
|
||||
<div
|
||||
class="img-top-div"
|
||||
:class="labelCheck === 'aria' ? 'img-top-div-click' : ''"
|
||||
@click.stop="changeImgType('aria')"
|
||||
>
|
||||
空间维度
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar" ref="sidebar" @scroll="handleScroll">
|
||||
<img
|
||||
v-for="(item, index) in defectData"
|
||||
:key="item.id"
|
||||
:src="item.media[0].img"
|
||||
:key="`${item.id}-${index}`"
|
||||
:src="item.url"
|
||||
:alt="'Image ' + (index + 1)"
|
||||
@click="showImage(index)"
|
||||
:class="{ selected: currentIndex === index }"
|
||||
@ -88,12 +98,12 @@
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
class="btn-submit"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
<el-button class="btn-cancel" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form>
|
||||
@ -101,25 +111,39 @@
|
||||
<!-- 图片展示 -->
|
||||
<div class="image-viewer">
|
||||
<div class="image-container" ref="imageContainer">
|
||||
<div
|
||||
class="rect-overlay"
|
||||
v-for="(item, index) in rectItem"
|
||||
:key="`rect-overlay-${index}`"
|
||||
:style="getRectStyle(item.rectPosition, index)"
|
||||
@click="clickImage(item)"
|
||||
>
|
||||
<div :style="{ color: colorList[index] }" class="rect-overlay-text">
|
||||
目标详情>>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rect-image">
|
||||
<div
|
||||
class="image-info"
|
||||
v-for="(item, index) in rectItem"
|
||||
:key="`image-info-${index}`"
|
||||
:style="{ color: colorList[index] }"
|
||||
>
|
||||
采集时间:
|
||||
{{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
|
||||
{{ item.stakeStart || "暂无数据" }} 终止桩号:
|
||||
{{ item.stakeEnd || "暂无数据" }}
|
||||
病害类型:
|
||||
{{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
|
||||
病害长度{{ item.length }}米
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
:src="currentImage"
|
||||
alt="Main Image"
|
||||
ref="mainImage"
|
||||
@load="updateRects"
|
||||
/>
|
||||
<div
|
||||
class="rect-overlay"
|
||||
v-for="(rect, index) in rects"
|
||||
:key="index"
|
||||
:style="getRectStyle(rect)"
|
||||
></div>
|
||||
<div class="image-info">
|
||||
采集时间:
|
||||
{{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号:
|
||||
{{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
|
||||
{{ rectsItem.stakeEnd || "暂无数据" }}
|
||||
路产状态: {{ filterState(rectsItem.state) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小图展示 -->
|
||||
@ -145,13 +169,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
// 维度选择
|
||||
labelCheck: "left",
|
||||
|
||||
labelCheck: "aim",
|
||||
// 目标维度事件
|
||||
aimList: [],
|
||||
// 空间维度数据
|
||||
ariaList: [],
|
||||
// 左侧图片数据
|
||||
defectData: [],
|
||||
// 当前选择的index
|
||||
currentIndex: 0,
|
||||
// 点击的index绑定
|
||||
// 下方点击的index绑定
|
||||
selectedThumbnail: null,
|
||||
// 加载状态
|
||||
loading: false,
|
||||
@ -175,29 +202,36 @@ export default {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
// 图片病害位置信息
|
||||
rects: [],
|
||||
// 图片下方数据
|
||||
rectsItem: {},
|
||||
// 图片病害位置红框信息
|
||||
rectItem: [],
|
||||
colorList: ["#FF0000", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
|
||||
// 病害状态下拉选项
|
||||
defectStatus: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 当前展示的图片url
|
||||
currentImage() {
|
||||
const thumbnails = this.currentThumbnails;
|
||||
return (
|
||||
thumbnails[this.selectedThumbnail]?.img || thumbnails[0]?.img || ""
|
||||
);
|
||||
if (this.defectData.length > 0) {
|
||||
// this.rectItem =
|
||||
// this.defectData[this.currentIndex]?.items[
|
||||
// this.selectedThumbnail
|
||||
// ]?.children;
|
||||
return this.defectData[this.currentIndex].items[this.selectedThumbnail]
|
||||
.img;
|
||||
}
|
||||
},
|
||||
// 下方小列表数据
|
||||
currentThumbnails() {
|
||||
return this.defectData[this.currentIndex]?.media || [];
|
||||
return this.defectData[this.currentIndex]?.items || [];
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// this.getSegmentList();
|
||||
// this.getDefectStatusList();
|
||||
// this.getDefectType();
|
||||
this.getList();
|
||||
this.showImage(0);
|
||||
this.getSegmentList();
|
||||
this.getDefectStatusList();
|
||||
this.getDefectType();
|
||||
},
|
||||
methods: {
|
||||
/* 查询病害状态下拉数据 */
|
||||
@ -208,6 +242,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 过滤列表病害状态 */
|
||||
filterState(value) {
|
||||
let a = null;
|
||||
@ -218,6 +253,7 @@ export default {
|
||||
return a.label;
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取路段下拉数据 */
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
@ -226,6 +262,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取病害类型下拉数据 */
|
||||
getDefectType() {
|
||||
getItemTypes({ type: "defect" }).then(({ code, data }) => {
|
||||
@ -234,6 +271,25 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 切换维度事件 */
|
||||
changeImgType(type) {
|
||||
if (this.labelCheck != type) {
|
||||
this.labelCheck = type;
|
||||
if (type === "aria") {
|
||||
this.defectData = this.ariaList;
|
||||
if (this.currentIndex > this.ariaList.length - 1) {
|
||||
this.showImage(this.ariaList.length - 1);
|
||||
}
|
||||
} else {
|
||||
this.defectData = this.aimList;
|
||||
if (this.currentIndex < this.aimList.length - 1) {
|
||||
this.showImage(this.currentIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取图片列表/点击搜索事件 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
@ -243,13 +299,20 @@ export default {
|
||||
};
|
||||
defeaseList(data)
|
||||
.then((response) => {
|
||||
this.defectData.push(...response.data);
|
||||
this.aimList.push(...response.data.aim);
|
||||
this.ariaList.push(...response.data.aria);
|
||||
if (this.labelCheck === "aria") {
|
||||
this.defectData = this.ariaList;
|
||||
} else {
|
||||
this.defectData = this.aimList;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击搜索事件 */
|
||||
handleQuery() {
|
||||
const stakeReg = /^K\d{4}\+\d{3}$/;
|
||||
@ -287,6 +350,7 @@ export default {
|
||||
this.showImage(0);
|
||||
}
|
||||
},
|
||||
|
||||
/* 重置事件 */
|
||||
resetQuery() {
|
||||
this.defectData = [];
|
||||
@ -303,8 +367,12 @@ export default {
|
||||
this.getList();
|
||||
this.showImage(0);
|
||||
},
|
||||
|
||||
/* 左侧点击图片事件 */
|
||||
showImage(index) {
|
||||
if (this.currentIndex === this.defectData.length - 1) {
|
||||
this.loadMoreImages();
|
||||
}
|
||||
this.currentIndex = index;
|
||||
this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
|
||||
this.scrollToCurrentImage();
|
||||
@ -312,11 +380,16 @@ export default {
|
||||
this.updateRects();
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击下方小列表 */
|
||||
showThumbnailImage(index) {
|
||||
this.selectedThumbnail = index;
|
||||
this.updateRects();
|
||||
},
|
||||
|
||||
/* 使图片展示在父级容器可视区域 */
|
||||
scrollToCurrentImage() {
|
||||
if (this.$refs.sidebar) {
|
||||
const sidebarImages = this.$refs.sidebar.querySelectorAll("img");
|
||||
const currentImageElement = sidebarImages[this.currentIndex];
|
||||
if (currentImageElement) {
|
||||
@ -325,18 +398,45 @@ export default {
|
||||
block: "center",
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 滚动触发事件 */
|
||||
handleScroll() {
|
||||
if (this.currentIndex === this.defectData.length - 1) {
|
||||
this.loadMoreImages();
|
||||
}
|
||||
},
|
||||
|
||||
/* 滚动触发事件 */
|
||||
handleScroll() {
|
||||
// 滚动高度+容器高度 滚动区域高度
|
||||
const sidebar = this.$refs.sidebar;
|
||||
if (
|
||||
sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 &&
|
||||
!this.loading
|
||||
) {
|
||||
this.loadMoreImages();
|
||||
}
|
||||
// if (this.currentIndex === this.defectData.length - 1) {
|
||||
// this.loadMoreImages();
|
||||
// }
|
||||
},
|
||||
|
||||
/* 加载更多图片方法 */
|
||||
loadMoreImages() {
|
||||
this.params.page += 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/* 点击目标详情事件 */
|
||||
clickImage(item) {
|
||||
if (this.labelCheck === "aim") {
|
||||
this.labelCheck = "aria";
|
||||
this.defectData = this.ariaList;
|
||||
const index = this.ariaList.findIndex((it) => it.id === item.id) || 0;
|
||||
this.showImage(index);
|
||||
} else {
|
||||
this.labelCheck = "aim";
|
||||
this.defectData = this.aimList;
|
||||
const index = this.aimList.findIndex((it) => it.id === item.id) || 0;
|
||||
this.showImage(index);
|
||||
}
|
||||
},
|
||||
|
||||
/* 键盘事件 */
|
||||
handleKeydown(event) {
|
||||
if (event.key === "ArrowUp") {
|
||||
@ -349,7 +449,7 @@ export default {
|
||||
}
|
||||
} else if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
if (this.currentIndex <= this.defectData.length - 1) {
|
||||
if (this.currentIndex < this.defectData.length - 1) {
|
||||
this.currentIndex === this.defectData.length - 1
|
||||
? this.currentIndex
|
||||
: this.currentIndex++;
|
||||
@ -361,31 +461,24 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* 图片位置信息获取 */
|
||||
updateRects() {
|
||||
this.rects = [];
|
||||
this.rectsItem = {};
|
||||
this.rectItem = [];
|
||||
if (this.defectData.length > 0) {
|
||||
const image = this.$refs.mainImage;
|
||||
const rects =
|
||||
this.defectData[this.currentIndex]?.media[
|
||||
this.rectItem = this.defectData[this.currentIndex]?.items[
|
||||
this.selectedThumbnail
|
||||
]?.rect
|
||||
?.split(",")
|
||||
.map(Number) || [];
|
||||
this.rects = [
|
||||
{
|
||||
left: rects[0],
|
||||
top: rects[1],
|
||||
width: rects[2],
|
||||
height: rects[3],
|
||||
},
|
||||
];
|
||||
this.rectsItem = this.defectData[this.currentIndex];
|
||||
].children.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rectPosition: item.rect?.split(",").map(Number),
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 图片红框位置 */
|
||||
getRectStyle({ left, top, width, height }) {
|
||||
getRectStyle([left, top, width, height], index) {
|
||||
const image = this.$refs.mainImage;
|
||||
const container = this.$refs.imageContainer;
|
||||
if (!image || !container) return {};
|
||||
@ -408,12 +501,11 @@ export default {
|
||||
height: `${height * scale}px`,
|
||||
border: "2px solid #FF0000",
|
||||
boxSizing: "border-box",
|
||||
border: `2px solid ${this.colorList[index]}`,
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
this.showImage(0);
|
||||
window.addEventListener("keydown", this.handleKeydown);
|
||||
window.addEventListener("resize", this.updateRects);
|
||||
},
|
||||
@ -443,13 +535,20 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: #467198;
|
||||
.img-top-div {
|
||||
cursor: pointer;
|
||||
width: 30%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #00aaff;
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__inner{
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
.img-top-div-click {
|
||||
background-color: rgb(69, 91, 140);
|
||||
}
|
||||
}
|
||||
|
||||
@ -568,15 +667,13 @@ export default {
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.image-info {
|
||||
position: absolute;
|
||||
color: red;
|
||||
bottom: 0;
|
||||
left: 10%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -586,10 +683,27 @@ export default {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
// 画框样式
|
||||
.rect-overlay {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 2px solid red;
|
||||
// pointer-events: none;
|
||||
// border: 2px solid red;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> div {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片信息
|
||||
.rect-image {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
@ -623,4 +737,33 @@ export default {
|
||||
.thumbnail-row img.selected {
|
||||
border: 3px solid #00aaff;
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
.btn-submit {
|
||||
background-color: transparent;
|
||||
background-image: url("~@/assets/screen/index/btn-submit.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
|
||||
&:active {
|
||||
color: #0d9ee2;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: transparent;
|
||||
background-image: url("~@/assets/screen/index/btn-cancel.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
|
||||
&:active {
|
||||
color: #0d9ee2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 11:56:02
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-08 14:53:32
|
||||
* @LastEditTime: 2024-11-13 15:09:42
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
|
||||
* @Description: 病害巡检-交安事件日志
|
||||
* @Description: 病害巡检-病害日志
|
||||
-->
|
||||
<template>
|
||||
<div class="content">
|
||||
@ -18,11 +18,12 @@
|
||||
label-position="left"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-form-item class="form-item" label="道路名称" prop="segmentName">
|
||||
<el-form-item class="form-item" label="道路名称" prop="segmentId">
|
||||
<el-select
|
||||
v-model="trafficForm.segmentName"
|
||||
v-model="trafficForm.segmentId"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择道路名称"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
@ -33,17 +34,6 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="上下行" prop="inspectDirection">
|
||||
<el-select
|
||||
v-model="trafficForm.inspectDirection"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option label="上行" value="0" />
|
||||
<el-option label="下行" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="公里桩" prop="stakeRange">
|
||||
<el-input
|
||||
v-model="trafficForm.stakeStart"
|
||||
@ -67,11 +57,11 @@
|
||||
<i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="事件类型" prop="equipmentType">
|
||||
<el-form-item class="form-item" label="病害类型" prop="defectType">
|
||||
<el-select
|
||||
v-model="trafficForm.equipmentType"
|
||||
v-model="trafficForm.defectType"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择事件类型"
|
||||
placeholder="请选择病害类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
@ -82,11 +72,11 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="事件状态" prop="state">
|
||||
<el-form-item class="form-item" label="病害状态" prop="state">
|
||||
<el-select
|
||||
v-model="trafficForm.state"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择事件状态"
|
||||
placeholder="请选择病害状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
@ -100,46 +90,67 @@
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="form-btn">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
<el-button class="btn-submit" size="mini" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
<el-button class="btn-cancel" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="traffic-title">
|
||||
<div class="emergency-type">事件类型</div>
|
||||
<div class="emergency-name">段路名称</div>
|
||||
<div class="emergency-status">事件状态</div>
|
||||
<div class="emergency-operation">操作</div>
|
||||
</div>
|
||||
<div class="traffic-table">
|
||||
<vue-seamless-scroll
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
<el-table
|
||||
:data="emergencyList"
|
||||
header-row-class-name="headerRow"
|
||||
row-class-name="bodayRow"
|
||||
style="width: 100%; background: none"
|
||||
height="375"
|
||||
>
|
||||
<div
|
||||
class="emergency-bottom-div"
|
||||
v-for="(item, index) in emergencyList"
|
||||
:key="`emergency-${index}`"
|
||||
<el-table-column prop="defectType" label="病害类型"> </el-table-column>
|
||||
<el-table-column
|
||||
prop="segmentName"
|
||||
width="180"
|
||||
:show-overflow-tooltip="true"
|
||||
label="路段名称"
|
||||
>
|
||||
<div class="emergency-type">{{ item.type }}</div>
|
||||
<div class="emergency-name">{{ item.segmentName }}</div>
|
||||
<div class="emergency-status"><a></a>{{ item.status }}</div>
|
||||
<div class="emergency-operation">操作</div>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="病害状态">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.state === "2" ? "未修复" : "已修复" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="pci" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
slot="reference"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="detailDefect(scope.row)"
|
||||
>详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-part">
|
||||
<el-pagination
|
||||
background
|
||||
:pager-count="5"
|
||||
:current-page.sync="pagination.page"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size.sync="pagination.size"
|
||||
layout="prev, pager, next"
|
||||
:total="tableTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { emergencyData } from "@/api/xj/screen/traffic-screen";
|
||||
import { emergencyData, DefectType } from "@/api/xj/screen/traffic-screen";
|
||||
import { getSegment } from "@/api/xj/screen/index";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
name: "TrafficLog",
|
||||
@ -156,23 +167,26 @@ export default {
|
||||
// 查询表单绑定
|
||||
trafficForm: {
|
||||
// 道路名称
|
||||
segmentName: "",
|
||||
// 上下行
|
||||
inspectDirection: "",
|
||||
segmentId: "",
|
||||
// 公里桩
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
// 事件类型
|
||||
equipmentType: "",
|
||||
// 事件状态
|
||||
// 病害类型
|
||||
defectType: "",
|
||||
// 病害状态
|
||||
state: "",
|
||||
},
|
||||
// 传接口的查询条件
|
||||
searchForm: {},
|
||||
// 道路名称下拉数据
|
||||
segmentList: [],
|
||||
// 事件类型下拉数据
|
||||
// 病害类型下拉数据
|
||||
eventType: [],
|
||||
// 事件状态下拉数据
|
||||
defectStatus: [],
|
||||
// 病害状态下拉数据
|
||||
defectStatus: [
|
||||
{ label: "已修复", value: "2" },
|
||||
{ label: "未修复", value: "1" },
|
||||
],
|
||||
// 轮播配置
|
||||
defaultOption: {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
@ -186,22 +200,81 @@ export default {
|
||||
},
|
||||
// 事件列表
|
||||
emergencyList: [],
|
||||
// 分页数据绑定
|
||||
pagination: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
// 分页总数
|
||||
tableTotal: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
bottomTipClick: {
|
||||
handler() {
|
||||
this.trafficForm.defectType = "";
|
||||
this.getAllDefectType();
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getSegmentList();
|
||||
this.getAllDefectType();
|
||||
},
|
||||
methods: {
|
||||
/* 获取路段下拉数据 */
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.segmentList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取病害类型下拉数据 */
|
||||
getAllDefectType() {
|
||||
DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.eventType = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击搜索事件 */
|
||||
handleQuery() {},
|
||||
handleQuery() {
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
|
||||
this.getData();
|
||||
},
|
||||
|
||||
/* 点击重置事件 */
|
||||
resetQuery() {},
|
||||
resetQuery() {
|
||||
this.searchForm = {};
|
||||
this.trafficForm = {
|
||||
// 道路名称
|
||||
segmentId: "",
|
||||
// 公里桩
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
// 病害类型
|
||||
defectType: "",
|
||||
// 病害状态
|
||||
state: "",
|
||||
};
|
||||
this.getData();
|
||||
},
|
||||
|
||||
/* 获取事件列表数据 */
|
||||
getData() {
|
||||
emergencyData().then(({ code, data }) => {
|
||||
const data = {
|
||||
classType: this.bottomTipClick,
|
||||
...this.searchForm,
|
||||
...this.pagination,
|
||||
};
|
||||
emergencyData(data).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.tableTotal = data.length;
|
||||
this.emergencyList = data;
|
||||
}
|
||||
});
|
||||
@ -217,7 +290,7 @@ export default {
|
||||
|
||||
.traffic-form {
|
||||
width: calc(100% - 0.5rem);
|
||||
height: 38%;
|
||||
height: 30%;
|
||||
padding: 0.5rem;
|
||||
|
||||
.form-item {
|
||||
@ -262,6 +335,10 @@ export default {
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item {
|
||||
color: #aaabb8;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
@ -300,7 +377,7 @@ export default {
|
||||
color: #e6fcfe;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 0.5rem;
|
||||
background-image: url("../../../assets/screen/traffic/emergency-top.png");
|
||||
background-image: url("~@/assets/screen/traffic/emergency-top.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 90%;
|
||||
background-position: 50% 100%;
|
||||
@ -322,55 +399,108 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-table {
|
||||
::v-deep .traffic-table {
|
||||
width: 100%;
|
||||
height: 51%;
|
||||
height: 66%;
|
||||
padding: 0.5rem 0;
|
||||
overflow: hidden;
|
||||
|
||||
.emergency-bottom-div {
|
||||
height: 2rem;
|
||||
font-size: 0.8rem;
|
||||
// 表格最下方border
|
||||
.el-table::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// 隐藏滚动条
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
/*width: 0;宽度为0隐藏*/
|
||||
width: 0;
|
||||
}
|
||||
|
||||
// 表头行
|
||||
.headerRow {
|
||||
background: url("~@/assets/screen/traffic/emergency-top.png") no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
th {
|
||||
color: #ffffff;
|
||||
background: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格行
|
||||
.bodayRow {
|
||||
color: #ffffff;
|
||||
background: none;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background: #113463;
|
||||
}
|
||||
|
||||
// 表格内下划线
|
||||
td {
|
||||
// border-color: transparent;
|
||||
border-bottom: 1px dashed rgb(115, 115, 116);
|
||||
}
|
||||
|
||||
// 去除鼠标移动高亮
|
||||
&:hover > td {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination-part {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: rgba(17, 52, 99, 0.3);
|
||||
}
|
||||
|
||||
> div {
|
||||
margin: 0 0.3rem;
|
||||
line-height: 2rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #808c9f;
|
||||
}
|
||||
|
||||
.emergency-type {
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
.emergency-name {
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
.emergency-status {
|
||||
width: 27%;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
background-color: #f7da15;
|
||||
border-radius: 0.25rem;
|
||||
::v-deep .el-pagination {
|
||||
color: #ffffff;
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
background-color: #6481aa;
|
||||
}
|
||||
}
|
||||
|
||||
.emergency-operation {
|
||||
width: 10%;
|
||||
color: #0d9ee2;
|
||||
::v-deep .el-pager li {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
.btn-submit {
|
||||
background-color: transparent;
|
||||
background-image: url("~@/assets/screen/index/btn-submit.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
|
||||
&:active {
|
||||
color: #0d9ee2;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: transparent;
|
||||
background-image: url("~@/assets/screen/index/btn-cancel.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
|
||||
&:active {
|
||||
color: #0d9ee2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 09:59:32
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-28 11:42:15
|
||||
* @LastEditTime: 2024-11-13 13:39:33
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
|
||||
* @Description: 病害巡检大屏-交安事件
|
||||
* @Description: 病害巡检大屏-今日巡查
|
||||
-->
|
||||
|
||||
<template>
|
||||
@ -13,7 +13,7 @@
|
||||
<span>{{ today }}</span>
|
||||
</div>
|
||||
<div class="traffic-right">
|
||||
<div class="right-sum">
|
||||
<div class="right-sum" @click="showDialog">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
@ -21,11 +21,28 @@
|
||||
<span> {{ scale }} </span>%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 病害巡检弹窗 -->
|
||||
<el-dialog
|
||||
title="当前病害查看"
|
||||
:visible.sync="showDialogVisible"
|
||||
width="75rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="screenCancel"
|
||||
>
|
||||
<div class="today-content">
|
||||
<div ref="leftChart" class="dialog-div"></div>
|
||||
<div ref="rightChart" class="dialog-div"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { safetyData } from "@/api/xj/screen/traffic-screen";
|
||||
import * as echarts from "echarts";
|
||||
import { roadToday, roadTodayDetail } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficSafety",
|
||||
props: {
|
||||
@ -37,17 +54,34 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 新增病害数
|
||||
today: 0,
|
||||
// 病害总数
|
||||
all: 0,
|
||||
// 病害增长率
|
||||
scale: 0,
|
||||
// 弹窗显隐控制
|
||||
showDialogVisible: false,
|
||||
// 左侧图表数据
|
||||
leftChartData: [],
|
||||
// 右侧图表数据
|
||||
rightChartData: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
bottomTipClick: {
|
||||
handler() {
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getData() {
|
||||
safetyData().then(({ code, data }) => {
|
||||
roadToday({ classType: this.bottomTipClick }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.today = data.today;
|
||||
this.all = data.all;
|
||||
@ -55,6 +89,352 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击打开弹窗 */
|
||||
showDialog() {
|
||||
this.getChartData();
|
||||
this.showDialogVisible = true;
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
getChartData() {
|
||||
roadTodayDetail({ classType: this.bottomTipClick }).then(
|
||||
({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.leftChartData = data[0];
|
||||
this.rightChartData = data[1];
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
this.drawRightChart();
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/* 绘制左侧echart图 */
|
||||
drawLeftChart() {
|
||||
const xData = this.leftChartData.map((item) => {
|
||||
return item.name;
|
||||
});
|
||||
const y1Data = this.leftChartData.map((item) => {
|
||||
return item.road;
|
||||
});
|
||||
const y2Data = this.leftChartData.map((item) => {
|
||||
return item.bridge;
|
||||
});
|
||||
const y3Data = this.leftChartData.map((item) => {
|
||||
return item.event;
|
||||
});
|
||||
const y4Data = this.leftChartData.map((item) => {
|
||||
return item.green;
|
||||
});
|
||||
if (this.$refs.leftChart) {
|
||||
const chart = echarts.init(this.$refs.leftChart);
|
||||
chart.setOption({
|
||||
color: [
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#8DF2FF" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#82B3FD" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#8087FF" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#532EFF" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#FFB3B3" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#F7DA15" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#FCC105" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
],
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
show: true,
|
||||
confine: false,
|
||||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
left: "right",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#fff",
|
||||
formatter: (params) => {
|
||||
if (params.length > 4) {
|
||||
return `${params.slice(0, 4)}...`;
|
||||
}
|
||||
return params;
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
},
|
||||
},
|
||||
name: "单位：个",
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "路面",
|
||||
type: "bar",
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "交安",
|
||||
type: "bar",
|
||||
data: y3Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "道桥",
|
||||
type: "bar",
|
||||
data: y2Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "绿化",
|
||||
type: "bar",
|
||||
data: y4Data,
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制右侧echart图 */
|
||||
drawRightChart() {
|
||||
const xData = this.rightChartData.map((item) => {
|
||||
return item.name;
|
||||
});
|
||||
const y1Data = this.rightChartData.map((item) => {
|
||||
return item.road;
|
||||
});
|
||||
const y2Data = this.rightChartData.map((item) => {
|
||||
return item.bridge;
|
||||
});
|
||||
const y3Data = this.rightChartData.map((item) => {
|
||||
return item.event;
|
||||
});
|
||||
const y4Data = this.rightChartData.map((item) => {
|
||||
return item.green;
|
||||
});
|
||||
if (this.$refs.rightChart) {
|
||||
const chart = echarts.init(this.$refs.rightChart);
|
||||
chart.setOption({
|
||||
color: [
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#8DF2FF" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#82B3FD" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#8087FF" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#532EFF" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#FFB3B3" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#F7DA15" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#FCC105" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
],
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
show: true,
|
||||
confine: false,
|
||||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
left: "right",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
},
|
||||
},
|
||||
name: "单位：个",
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "路面",
|
||||
type: "bar",
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "交安",
|
||||
type: "bar",
|
||||
data: y3Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "道桥",
|
||||
type: "bar",
|
||||
data: y2Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "绿化",
|
||||
type: "bar",
|
||||
data: y4Data,
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 关闭 弹窗事件 */
|
||||
screenCancel() {
|
||||
this.showDialogVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -74,7 +454,8 @@ export default {
|
||||
justify-content: center;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 2rem;
|
||||
background-image: url("../../../assets/screen/traffic/traffic-left.png");
|
||||
// background-image: url("../../../assets/screen/traffic/traffic-left.png");
|
||||
background-image: url("~@/assets/screen/disease/today-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85%;
|
||||
background-position: 100% 60%;
|
||||
@ -101,13 +482,15 @@ export default {
|
||||
color: #ffffff;
|
||||
|
||||
.right-sum {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/traffic/right-sum.png");
|
||||
// background-image: url("../../../assets/screen/traffic/right-sum.png");
|
||||
background-image: url("~@/assets/screen/disease/right-sum.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
@ -136,7 +519,8 @@ export default {
|
||||
justify-content: center;
|
||||
padding-left: 1rem;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/traffic/right-rate.png");
|
||||
// background-image: url("../../../assets/screen/traffic/right-rate.png");
|
||||
background-image: url("~@/assets/screen/disease/right-rate.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
@ -158,4 +542,32 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗内容样式
|
||||
.today-content {
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
|
||||
.dialog-div {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px;
|
||||
background-color: #113463;
|
||||
|
||||
span,
|
||||
i {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
background-color: #113463;
|
||||
}
|
||||
</style>
|
||||
@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:06:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-11 10:08:56
|
||||
* @LastEditTime: 2024-11-13 13:57:00
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
|
||||
* @Description: 病害巡检大屏-交安事件统计
|
||||
* @Description: 病害巡检大屏-病害统计
|
||||
-->
|
||||
<template>
|
||||
<div class="content">
|
||||
@ -41,7 +41,7 @@
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { statisticData } from "@/api/xj/screen/traffic-screen";
|
||||
import { roadCurrent } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficStatistic",
|
||||
props: {
|
||||
@ -96,6 +96,11 @@ export default {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
bottomTipClick: {
|
||||
handler() {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
@ -109,13 +114,15 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取echart图数据 */
|
||||
getChartData() {
|
||||
const data = {
|
||||
itemName: this.itemSelect,
|
||||
type: this.select,
|
||||
classType: this.bottomTipClick,
|
||||
};
|
||||
statisticData(data).then(({ data, code }) => {
|
||||
roadCurrent(data).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.sum = 0;
|
||||
data.forEach((element) => {
|
||||
@ -133,6 +140,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制echart图 */
|
||||
drawChart() {
|
||||
if (this.echart) {
|
||||
@ -153,7 +161,7 @@ export default {
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "交安事件总数",
|
||||
text: "病害总数",
|
||||
left: "center",
|
||||
top: "50%",
|
||||
textStyle: {
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:03:08
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-11 10:08:41
|
||||
* @LastEditTime: 2024-11-13 13:54:26
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
|
||||
* @Description: 病害巡检大屏-交安事件趋势
|
||||
* @Description: 病害巡检大屏-病害趋势
|
||||
-->
|
||||
|
||||
<template>
|
||||
@ -29,7 +29,7 @@
|
||||
|
||||
<script>
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { eventLog } from "@/api/xj/screen/traffic-screen";
|
||||
import { defectLog } from "@/api/xj/screen/traffic-screen";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "TrafficTrend",
|
||||
@ -72,6 +72,11 @@ export default {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
bottomTipClick: {
|
||||
handler() {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
@ -90,8 +95,9 @@ export default {
|
||||
const data = {
|
||||
id: this.itemSelect,
|
||||
type: this.select,
|
||||
classType: this.bottomTipClick,
|
||||
};
|
||||
eventLog(data).then(({ data, code }) => {
|
||||
defectLog(data).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.echartData = data;
|
||||
this.$nextTick(() => {
|
||||
@ -319,8 +325,6 @@ export default {
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.traffic-echart {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-11 10:58:06
|
||||
* @LastEditTime: 2024-11-13 14:11:57
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -253,6 +253,7 @@ import {
|
||||
getItemTypes,
|
||||
getRoadListTypes,
|
||||
} from "@/api/xj/screen/index";
|
||||
import { DefectType } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
@ -307,7 +308,7 @@ export default {
|
||||
{
|
||||
width: "100%",
|
||||
height: "29%",
|
||||
title: "病害趋势",
|
||||
title: "病害统计",
|
||||
component: DiseaseCurrent,
|
||||
selectIsShow: true,
|
||||
select: "",
|
||||
@ -318,7 +319,7 @@ export default {
|
||||
rightModuleList: [
|
||||
{
|
||||
width: "100%",
|
||||
height: "23%",
|
||||
height: "18%",
|
||||
title: "巡查里程",
|
||||
component: PatrolOrder,
|
||||
selectIsShow: false,
|
||||
@ -326,7 +327,7 @@ export default {
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "60%",
|
||||
height: "65%",
|
||||
title: "巡检车辆",
|
||||
component: InspectionVehicles,
|
||||
selectIsShow: false,
|
||||
@ -338,9 +339,9 @@ export default {
|
||||
// 切换地图图标类别按钮
|
||||
changeMapBtn: [
|
||||
{ name: "路面", click: "1" },
|
||||
{ name: "道桥", click: "defect" },
|
||||
{ name: "交安", click: "equipment" },
|
||||
{ name: "绿化", click: "event" },
|
||||
{ name: "交安", click: "2" },
|
||||
{ name: "道桥", click: "3" },
|
||||
{ name: "绿化", click: "4" },
|
||||
],
|
||||
// 具体icon类别
|
||||
iconTypeList: [],
|
||||
@ -361,8 +362,8 @@ export default {
|
||||
// 下方三个按钮数据
|
||||
elementList: [
|
||||
{ name: "总览", component: "OverviewScreen" },
|
||||
{ name: "道路资产", component: "RoadScreen" },
|
||||
{ name: "病害巡检", component: "DiseaseScreen" },
|
||||
{ name: "道路资产", component: "RoadScreen" },
|
||||
],
|
||||
// 中心点集合(全部)
|
||||
centerPiont: [],
|
||||
@ -381,7 +382,7 @@ export default {
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: true,
|
||||
imgVisible: false,
|
||||
// 查看点位图片数据
|
||||
screenImage: {},
|
||||
// 查看点位图片弹窗显隐控制
|
||||
@ -451,12 +452,16 @@ export default {
|
||||
|
||||
/* 获取图片背景左上角病害类型下拉 */
|
||||
getDieaseTypeList() {
|
||||
this.dieaseTypeList = [];
|
||||
DefectType().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.dieaseTypeList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取图片背景下坐标数据 */
|
||||
getMapCare() {
|
||||
comppanyImg().then(({ code, data }) => {
|
||||
comppanyImg({ type: this.mapCareSelect }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mapCareList = data;
|
||||
}
|
||||
@ -798,7 +803,7 @@ export default {
|
||||
{
|
||||
width: "100%",
|
||||
height: "29%",
|
||||
title: "病害趋势",
|
||||
title: "病害统计",
|
||||
component: DiseaseCurrent,
|
||||
selectIsShow: true,
|
||||
select: "",
|
||||
@ -808,7 +813,7 @@ export default {
|
||||
this.rightModuleList = [
|
||||
{
|
||||
width: "100%",
|
||||
height: "25%",
|
||||
height: "18%",
|
||||
title: "巡查里程",
|
||||
component: PatrolOrder,
|
||||
selectIsShow: false,
|
||||
@ -816,7 +821,7 @@ export default {
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "60%",
|
||||
height: "65%",
|
||||
title: "巡检车辆",
|
||||
component: InspectionVehicles,
|
||||
selectIsShow: false,
|
||||
@ -867,7 +872,7 @@ export default {
|
||||
{
|
||||
width: "100%",
|
||||
height: "27%",
|
||||
title: "交安事件",
|
||||
title: "今日巡查",
|
||||
component: TrafficSafety,
|
||||
selectIsShow: false,
|
||||
class: "one",
|
||||
@ -875,7 +880,7 @@ export default {
|
||||
{
|
||||
width: "100%",
|
||||
height: "27%",
|
||||
title: "交安事件趋势",
|
||||
title: "病害趋势",
|
||||
component: TrafficTrend,
|
||||
selectIsShow: true,
|
||||
class: "twe",
|
||||
@ -883,7 +888,7 @@ export default {
|
||||
{
|
||||
width: "100%",
|
||||
height: "33%",
|
||||
title: "交安事件统计",
|
||||
title: "病害统计",
|
||||
component: TrafficStatistic,
|
||||
selectIsShow: true,
|
||||
select: "",
|
||||
@ -894,9 +899,9 @@ export default {
|
||||
{
|
||||
width: "100%",
|
||||
height: "85%",
|
||||
title: "交安事件日志",
|
||||
title: "病害日志",
|
||||
component: TrafficLog,
|
||||
selectIsShow: true,
|
||||
selectIsShow: false,
|
||||
select: "",
|
||||
class: "one",
|
||||
},
|
||||
@ -1086,7 +1091,7 @@ export default {
|
||||
left: 28%;
|
||||
top: 10%;
|
||||
position: absolute;
|
||||
color:#ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
// 打点部分
|
||||
@ -1254,45 +1259,46 @@ export default {
|
||||
|
||||
// 未点击样式
|
||||
.change-vue-OverviewScreen {
|
||||
background-image: url("../../assets//screen/index/button-disease.png");
|
||||
background-image: url("../../assets//screen/index/button-overview.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 97% 65%;
|
||||
background-position: 100% 15%;
|
||||
background-size: 95% 60%;
|
||||
background-position: 75% 15%;
|
||||
}
|
||||
|
||||
.change-vue-click-OverviewScreen {
|
||||
background-image: url("../../assets//screen/index/button-overview-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95% 60%;
|
||||
background-position: 75% 15%;
|
||||
}
|
||||
|
||||
.change-vue-DiseaseScreen {
|
||||
background-image: url("../../assets//screen/index/button-disease.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 99% 60%;
|
||||
background-position: 50% 13%;
|
||||
}
|
||||
|
||||
.change-vue-click-DiseaseScreen {
|
||||
background-image: url("../../assets//screen/index/button-disease-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 98% 65%;
|
||||
background-position: 100% 15%;
|
||||
background-size: 99% 60%;
|
||||
background-position: 50% 13%;
|
||||
}
|
||||
|
||||
.change-vue-RoadScreen {
|
||||
background-image: url("../../assets//screen/index/button-road.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 98% 60%;
|
||||
background-position: 70% 15%;
|
||||
background-size: 93% 60%;
|
||||
background-position: 15% 15%;
|
||||
}
|
||||
.change-vue-click-RoadScreen {
|
||||
background-image: url("../../assets//screen/index/button-road-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 98% 60%;
|
||||
background-position: 70% 15%;
|
||||
}
|
||||
|
||||
.change-vue-DiseaseScreen {
|
||||
background-image: url("../../assets//screen/index/button-traffic.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95% 60%;
|
||||
background-size: 93% 60%;
|
||||
background-position: 15% 15%;
|
||||
}
|
||||
|
||||
.change-vue-click-DiseaseScreen {
|
||||
background-image: url("../../assets//screen/index/button-traffic-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95% 60%;
|
||||
background-position: 15% 15%;
|
||||
}
|
||||
// .change-vue-click {
|
||||
// color: red;
|
||||
// }
|
||||
@ -1333,7 +1339,7 @@ export default {
|
||||
|
||||
.rect-overlay {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
// pointer-events: none;
|
||||
border: 2px solid red;
|
||||
}
|
||||
}
|
||||
@ -1359,6 +1365,10 @@ export default {
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item {
|
||||
color: #aaabb8;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-11 10:07:23
|
||||
* @LastEditTime: 2024-11-12 16:18:03
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
|
||||
* @Description: 总览大屏-病害三维饼图
|
||||
-->
|
||||
@ -10,6 +10,14 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="content-select">
|
||||
<el-button
|
||||
type="info"
|
||||
size="mini"
|
||||
round
|
||||
v-if="clickType !== ''"
|
||||
@click="changeEchart()"
|
||||
>返回</el-button
|
||||
>
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="itemSelect"
|
||||
@ -25,16 +33,27 @@
|
||||
</div>
|
||||
<div class="echart" ref="currentChart"></div>
|
||||
<div class="food-legend">
|
||||
<fssm-scroll
|
||||
:style="{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="legend-div"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="`chart-${index}`"
|
||||
@click="clickType === '' ? changeEchart(item) : ''"
|
||||
>
|
||||
<div class="index" :style="{ backgroundColor: colorList[index] }"></div>
|
||||
<div class="name">{{ item.typeName }}</div>
|
||||
<div
|
||||
class="index"
|
||||
:style="{ backgroundColor: colorList[index] }"
|
||||
></div>
|
||||
<div class="name" :title="item.typeName">{{ item.typeName }}</div>
|
||||
<div class="rate">{{ item.rate }}%</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</div>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -43,8 +62,12 @@
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
import { roadCurrent, getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
export default {
|
||||
name: "DiseaseCurrent",
|
||||
components: {
|
||||
FssmScroll,
|
||||
},
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
@ -75,6 +98,8 @@ export default {
|
||||
dataList: [],
|
||||
// echart实例
|
||||
chart: "",
|
||||
// echart图例点击标识
|
||||
clickType: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -106,11 +131,13 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取echart数据 */
|
||||
getChartList() {
|
||||
const data = {
|
||||
type: this.select,
|
||||
itemName: this.itemSelect,
|
||||
classType: this.clickType,
|
||||
};
|
||||
roadCurrent(data).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -121,7 +148,7 @@ export default {
|
||||
this.dataList = data.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rate: ((item.value / allSum) * 100).toFixed(1),
|
||||
rate: allSum ? ((item.value / allSum) * 100).toFixed(1) : 0,
|
||||
};
|
||||
});
|
||||
}
|
||||
@ -131,6 +158,18 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击图例触发事件 */
|
||||
changeEchart(item) {
|
||||
if (item) {
|
||||
this.clickType = item.id;
|
||||
this.getChartList();
|
||||
} else {
|
||||
this.clickType = "";
|
||||
this.getChartList();
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制echart图 */
|
||||
drawChart() {
|
||||
const data = this.dataList;
|
||||
@ -183,13 +222,13 @@ export default {
|
||||
height: "250%",
|
||||
// boxWidth: 100,
|
||||
boxHeight: 2,
|
||||
top: "-75%",
|
||||
top: "-83%",
|
||||
left: "-75%",
|
||||
viewControl: {
|
||||
// 是否自动旋转
|
||||
autoRotate: true,
|
||||
// 调节角度
|
||||
alpha: 25,
|
||||
alpha: 20,
|
||||
rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
|
||||
zoomSensitivity: 0, //设置缩放灵敏度，为0无法缩放
|
||||
panSensitivity: 0, //设置平移灵敏度，0无法平移
|
||||
@ -203,6 +242,7 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制3d饼图配置项 */
|
||||
getPie3D(pieData, internalDiameterRatio) {
|
||||
const series = [];
|
||||
@ -266,6 +306,7 @@ export default {
|
||||
}
|
||||
return series;
|
||||
},
|
||||
|
||||
/* 配置项参数 */
|
||||
getParametricEquation(
|
||||
startRatio,
|
||||
@ -365,20 +406,36 @@ export default {
|
||||
position: relative;
|
||||
|
||||
.content-select {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
.el-button {
|
||||
height: 1.5rem;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.echart {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
height: 60%;
|
||||
z-index: 0;
|
||||
background-image: url("../../../assets/screen/index/disease-current-echart.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80%;
|
||||
background-position: 50% 0;
|
||||
}
|
||||
|
||||
.food-legend {
|
||||
height: 30%;
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -388,6 +445,7 @@ export default {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.index {
|
||||
width: 0.5rem;
|
||||
@ -399,6 +457,9 @@ export default {
|
||||
padding-left: 0.3rem;
|
||||
color: #aac6c7;
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rate {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 09:40:18
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-08 11:59:06
|
||||
* @LastEditTime: 2024-11-13 13:23:21
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
|
||||
* @Description: 总览大屏-巡检车辆
|
||||
-->
|
||||
@ -10,31 +10,81 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="inspection-top">
|
||||
<div class="top-div">
|
||||
<span>车辆总数</span>
|
||||
<div>{{ carNum }}<span>辆</span></div>
|
||||
<div class="top-div inspection-div-car">
|
||||
<div>
|
||||
<span>{{ carNum }}</span
|
||||
>辆
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-div inspection-div-online">
|
||||
<div>
|
||||
<span>{{ onlineNum }}</span
|
||||
>辆
|
||||
</div>
|
||||
<div class="top-div">
|
||||
<span>在线车辆数</span>
|
||||
<div>{{ onlineNum }}<span>辆</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspection-bottom">
|
||||
<el-input placeholder="请输入车牌号" v-model="tableInput">
|
||||
<template slot="append"
|
||||
><el-button slot="append" icon="el-icon-search"></el-button
|
||||
><el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
@click="getTableData"
|
||||
></el-button
|
||||
></template>
|
||||
</el-input>
|
||||
<!-- 列表 -->
|
||||
<el-table :data="inspectionTableData" style="width: 100%" height="210">
|
||||
<el-table-column prop="date" label="车牌号码"> </el-table-column>
|
||||
<el-table-column prop="name" label="状态"> </el-table-column>
|
||||
<el-table
|
||||
:data="inspectionTableData"
|
||||
header-row-class-name="headerRow"
|
||||
row-class-name="bodayRow"
|
||||
style="width: 100%; background: none"
|
||||
height="285"
|
||||
>
|
||||
<el-table-column prop="plateNo" label="车牌号码"> </el-table-column>
|
||||
<el-table-column prop="serverStatus" label="状态"> </el-table-column>
|
||||
<el-table-column prop="pci" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="detailDefect(scope.row)"
|
||||
<el-popover
|
||||
popper-class="scope-popover"
|
||||
placement="left"
|
||||
width="auto"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="table-detail">
|
||||
<div>
|
||||
<span class="name">车牌号码:</span>
|
||||
<span class="value">{{ scope.row.plateNo }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">设备编号</span>
|
||||
<span class="value">{{ scope.row.appid }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">车辆状态</span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">网络连接</span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">设备状态</span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
slot="reference"
|
||||
size="mini"
|
||||
type="text"
|
||||
style="margin-right: 0.6rem"
|
||||
@click="detailDefect(scope.row)"
|
||||
>详情
|
||||
</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button
|
||||
disabled
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="followCar(scope.row)"
|
||||
@ -42,6 +92,7 @@
|
||||
>跟车
|
||||
</el-button>
|
||||
<el-button
|
||||
disabled
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="videoDelete(scope.row)"
|
||||
@ -52,7 +103,7 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-part">
|
||||
<!-- <div class="pagination-part">
|
||||
<el-pagination
|
||||
background
|
||||
:pager-count="5"
|
||||
@ -64,31 +115,32 @@
|
||||
:total="tableTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCarList } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "InspectionVehicles",
|
||||
data() {
|
||||
return {
|
||||
// 车辆总数
|
||||
carNum: 11,
|
||||
carNum: 0,
|
||||
// 在线车辆数
|
||||
onlineNum: 60,
|
||||
onlineNum: 0,
|
||||
// 车牌号输入绑定
|
||||
tableInput: "",
|
||||
// 下方列表数据
|
||||
inspectionTableData: [],
|
||||
// 分页数据绑定
|
||||
pagination: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
// pagination: {
|
||||
// page: 1,
|
||||
// size: 10,
|
||||
// },
|
||||
// 分页总数
|
||||
tableTotal: 100,
|
||||
tableTotal: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -97,38 +149,14 @@ export default {
|
||||
methods: {
|
||||
/* 获取表格数据 */
|
||||
getTableData() {
|
||||
this.inspectionTableData = [
|
||||
{
|
||||
date: "S225",
|
||||
name: "99.52",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G107",
|
||||
name: "98.6",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G105",
|
||||
name: "100",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "S225",
|
||||
name: "99.52",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G107",
|
||||
name: "98.6",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G105",
|
||||
name: "100",
|
||||
pci: "优",
|
||||
},
|
||||
];
|
||||
getCarList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.carNum = data.total;
|
||||
this.tableTotal = data.total;
|
||||
this.onlineNum = data.online;
|
||||
this.inspectionTableData = data.rows;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 表格详情事件 */
|
||||
@ -141,10 +169,10 @@ export default {
|
||||
videoDelete(val) {},
|
||||
|
||||
/* 页码修改事件 */
|
||||
handleCurrentChange(arg) {
|
||||
this.pagination.page = arg;
|
||||
this.getTableData();
|
||||
},
|
||||
// handleCurrentChange(arg) {
|
||||
// this.pagination.page = arg;
|
||||
// this.getTableData();
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -157,7 +185,7 @@ export default {
|
||||
|
||||
.inspection-top {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
height: 20%;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
@ -165,32 +193,49 @@ export default {
|
||||
.top-div {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
padding-bottom: 2rem;
|
||||
line-height: 6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
border:1px solid red;
|
||||
font-size: 0.6rem;
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
font-family: "DouYu";
|
||||
}
|
||||
}
|
||||
|
||||
.inspection-bottom {
|
||||
.inspection-div-car {
|
||||
background-image: url("~@/assets/screen/index/inspection-div-car.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.inspection-div-online {
|
||||
background-image: url("~@/assets/screen/index/inspection-div-online.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .inspection-bottom {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
height: 80%;
|
||||
padding: 1rem 0.5rem;
|
||||
|
||||
::v-deep .el-input {
|
||||
.el-input {
|
||||
margin-bottom: 0.5rem;
|
||||
.el-input__inner {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
border-color: rgb(69, 109, 211);
|
||||
border-color: rgb(69, 109, 211, 0.5);
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border-color: rgb(69, 109, 211);
|
||||
border-color: rgb(69, 109, 211, 0.5);
|
||||
|
||||
&:hover {
|
||||
background-color: #3c5a8a;
|
||||
@ -198,27 +243,52 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
th {
|
||||
color: #ffffff;
|
||||
background-color: #214175;
|
||||
// 表格最下方border
|
||||
.el-table::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
tr {
|
||||
color: #ffffff;
|
||||
background-color: #16395a;
|
||||
// 隐藏滚动条
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
/*width: 0;宽度为0隐藏*/
|
||||
width: 0;
|
||||
}
|
||||
|
||||
// 表头行
|
||||
.headerRow {
|
||||
background: url("~@/assets/screen/traffic/emergency-top.png") no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
th {
|
||||
color: #ffffff;
|
||||
background: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格行
|
||||
.bodayRow {
|
||||
color: #ffffff;
|
||||
background: none;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background: #113463;
|
||||
}
|
||||
|
||||
// 表格内下划线
|
||||
td {
|
||||
// border-color: transparent;
|
||||
border-bottom: 1px dashed rgb(115, 115, 116);
|
||||
}
|
||||
|
||||
// 去除鼠标移动高亮
|
||||
&:hover > td {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
border-color: rgb(82, 141, 229);
|
||||
.el-table__cell {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
border-color: rgb(0, 102, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -243,3 +313,11 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 弹出层样式 */
|
||||
.scope-popover {
|
||||
color: #ffffff;
|
||||
background-color: #000000;
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-08 09:33:25
|
||||
* @LastEditTime: 2024-11-13 14:01:48
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
|
||||
* @Description: 总览大屏-巡查里程
|
||||
-->
|
||||
@ -10,28 +10,71 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="patrol-div">
|
||||
<div class="value"><span>{{ patrolObject.mileage }}</span>km</div>
|
||||
<div class="name">累计里程</div>
|
||||
<div class="value">
|
||||
<span>{{ formatNumber(patrolObject.len) }}</span
|
||||
>km
|
||||
</div>
|
||||
</div>
|
||||
<div class="patrol-div">
|
||||
<div class="value"><span>{{ patrolObject.time }}</span>h</div>
|
||||
<div class="name">累计时长</div>
|
||||
<div class="value">
|
||||
<span>{{ formatTime(patrolObject.time) }}</span
|
||||
>h
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMileage } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "PatrolOrder",
|
||||
data() {
|
||||
return {
|
||||
// 累计里程数据
|
||||
patrolObject: {
|
||||
mileage: 365,
|
||||
time: 12,
|
||||
},
|
||||
patrolObject: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取巡查里程数据 */
|
||||
getData() {
|
||||
getMileage().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.patrolObject = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 累计里程修改 */
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
/* 累计时长修改 */
|
||||
formatTime(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;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -40,23 +83,26 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
background: url("~@/assets/screen/disease/patrol-order.png") no-repeat;
|
||||
background-size: 90%;
|
||||
background-position: 50%;
|
||||
|
||||
.patrol-div{
|
||||
width: 40%;
|
||||
.patrol-div {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding-left: 5rem;
|
||||
padding-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
|
||||
.value{
|
||||
|
||||
span{
|
||||
.value {
|
||||
span {
|
||||
font-family: "DouYu";
|
||||
font-size: 1.8rem;
|
||||
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-11 09:45:51
|
||||
* @LastEditTime: 2024-11-13 13:38:46
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
|
||||
* @Description: 总览大屏-今日巡查
|
||||
-->
|
||||
@ -12,8 +12,8 @@
|
||||
<div class="today-left">
|
||||
<span>{{ today }}</span>
|
||||
</div>
|
||||
<div class="today-right" @click="showDialog">
|
||||
<div class="right-sum">
|
||||
<div class="today-right">
|
||||
<div class="right-sum" @click="showDialog">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { roadToday } from "@/api/xj/screen/disease-screen";
|
||||
import { roadToday, roadTodayDetail } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "TodayInspection",
|
||||
data() {
|
||||
@ -78,22 +78,41 @@ export default {
|
||||
|
||||
/* 点击打开弹窗 */
|
||||
showDialog() {
|
||||
this.getChartData();
|
||||
this.showDialogVisible = true;
|
||||
this.getChartData()
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
getChartData() {
|
||||
this.leftChartData = [];
|
||||
this.rightChartData = [];
|
||||
roadTodayDetail().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.leftChartData = data[0];
|
||||
this.rightChartData = data[1];
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
this.drawRightChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制左侧echart图 */
|
||||
drawLeftChart() {
|
||||
const xData = this.leftChartData.map((item) => {
|
||||
return item.name;
|
||||
});
|
||||
const y1Data = this.leftChartData.map((item) => {
|
||||
return item.road;
|
||||
});
|
||||
const y2Data = this.leftChartData.map((item) => {
|
||||
return item.bridge;
|
||||
});
|
||||
const y3Data = this.leftChartData.map((item) => {
|
||||
return item.event;
|
||||
});
|
||||
const y4Data = this.leftChartData.map((item) => {
|
||||
return item.green;
|
||||
});
|
||||
if (this.$refs.leftChart) {
|
||||
const chart = echarts.init(this.$refs.leftChart);
|
||||
chart.setOption({
|
||||
@ -131,12 +150,31 @@ export default {
|
||||
{ offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#F7DA15" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#FCC105" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
],
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
trigger: "axis",
|
||||
show: true,
|
||||
confine: false,
|
||||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
@ -147,7 +185,6 @@ export default {
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
left: "right",
|
||||
data: ["分类A", "分类B", "分类C"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
@ -156,9 +193,15 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["类别1", "类别2", "类别3"],
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#fff",
|
||||
formatter: (params) => {
|
||||
if (params.length > 4) {
|
||||
return `${params.slice(0, 4)}...`;
|
||||
}
|
||||
return params;
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
@ -166,6 +209,7 @@ export default {
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
@ -185,21 +229,27 @@ export default {
|
||||
series: [
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类A",
|
||||
name: "路面",
|
||||
type: "bar",
|
||||
data: [120, 200, 150],
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类B",
|
||||
name: "交安",
|
||||
type: "bar",
|
||||
data: [220, 182, 191],
|
||||
data: y3Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类C",
|
||||
name: "道桥",
|
||||
type: "bar",
|
||||
data: [150, 232, 201],
|
||||
data: y2Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "绿化",
|
||||
type: "bar",
|
||||
data: y4Data,
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -211,6 +261,21 @@ export default {
|
||||
|
||||
/* 绘制右侧echart图 */
|
||||
drawRightChart() {
|
||||
const xData = this.rightChartData.map((item) => {
|
||||
return item.name;
|
||||
});
|
||||
const y1Data = this.rightChartData.map((item) => {
|
||||
return item.road;
|
||||
});
|
||||
const y2Data = this.rightChartData.map((item) => {
|
||||
return item.bridge;
|
||||
});
|
||||
const y3Data = this.rightChartData.map((item) => {
|
||||
return item.event;
|
||||
});
|
||||
const y4Data = this.rightChartData.map((item) => {
|
||||
return item.green;
|
||||
});
|
||||
if (this.$refs.rightChart) {
|
||||
const chart = echarts.init(this.$refs.rightChart);
|
||||
chart.setOption({
|
||||
@ -248,12 +313,23 @@ export default {
|
||||
{ offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#F7DA15" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#FCC105" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
],
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
@ -264,7 +340,6 @@ export default {
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
left: "right",
|
||||
data: ["分类A", "分类B", "分类C"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
@ -273,7 +348,6 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["类别1", "类别2", "类别3"],
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
@ -283,6 +357,7 @@ export default {
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
@ -302,21 +377,27 @@ export default {
|
||||
series: [
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类A",
|
||||
name: "路面",
|
||||
type: "bar",
|
||||
data: [120, 200, 150],
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类B",
|
||||
name: "交安",
|
||||
type: "bar",
|
||||
data: [220, 182, 191],
|
||||
data: y3Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类C",
|
||||
name: "道桥",
|
||||
type: "bar",
|
||||
data: [150, 232, 201],
|
||||
data: y2Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "绿化",
|
||||
type: "bar",
|
||||
data: y4Data,
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -348,7 +429,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 1.5rem;
|
||||
background-image: url("../../../assets/screen/disease/today-left.png");
|
||||
background-image: url("~@/assets/screen/disease/today-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85%;
|
||||
background-position: 100% 60%;
|
||||
@ -384,7 +465,7 @@ export default {
|
||||
padding-left: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/right-sum.png");
|
||||
background-image: url("~@/assets/screen/disease/right-sum.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
@ -412,7 +493,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/right-rate.png");
|
||||
background-image: url("~@/assets/screen/disease/right-rate.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user