diff --git a/src/api/xj/screen/disease-screen.js b/src/api/xj/screen/disease-screen.js index 95f9306..00f2851 100644 --- a/src/api/xj/screen/disease-screen.js +++ b/src/api/xj/screen/disease-screen.js @@ -11,49 +11,90 @@ export function roadRankList(query) { // 病害趋势柱状图接口 export function roadTrends(query) { - return request({ - url: "/bigscreen/getHistoryDefect", - method: "get", - params: query, - }); - } + return request({ + url: "/bigscreen/getHistoryDefect", + method: "get", + params: query, + }); +} +// v1 // 今日巡查数据 - export function roadToday(query) { - return request({ - url: "/bigscreen/getInspectionInfo", - method: "get", - params: query, - }); - } +// export function roadToday(query) { +// return request({ +// url: "/bigscreen/getInspectionInfo", +// method: "get", +// params: query, +// }); +// } +export function roadToday(query) { + return request({ + 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) { - return request({ - url: "/bigscreen/pciRanking", - method: "get", - params: 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", - method: "get", - params: query, - }); - } + return request({ + url: "/bigscreen/v2/roadStatus", + method: "get", + params: query, + }); +} // 数据栏内右上角下拉框 export function getDropList(query) { - return request({ - url: "/bigscreen/getDropdownList", - method: "get", - params: query, - }); - } + return request({ + url: "/bigscreen/getDropdownList", + 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, + }); +} diff --git a/src/api/xj/screen/index.js b/src/api/xj/screen/index.js index 8a7c4f8..60c6cef 100644 --- a/src/api/xj/screen/index.js +++ b/src/api/xj/screen/index.js @@ -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, }); diff --git a/src/api/xj/screen/traffic-screen.js b/src/api/xj/screen/traffic-screen.js index 77af00b..6e91c40 100644 --- a/src/api/xj/screen/traffic-screen.js +++ b/src/api/xj/screen/traffic-screen.js @@ -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, }); @@ -29,19 +61,37 @@ export function statisticData(query) { // 交安事件排名接口 export function rankCount(query) { - return request({ - url: "/bigscreen/getEventCountRanking", - method: "get", - params: query, - }); - } - + return request({ + url: "/bigscreen/getEventCountRanking", + method: "get", + params: query, + }); +} // 交安突发事件 -export function emergencyData(query) { - return request({ - url: "/bigscreen/getEmergencyEvent", - method: "get", - params: query, - }); - } \ No newline at end of file +// export function emergencyData(query) { +// return request({ +// url: "/bigscreen/getEmergencyEvent", +// method: "get", +// params: query, +// }); +// } + +// 病害日志列表 +export function emergencyData(data) { + return request({ + url: "/bigscreen/v2/getCurrentDefectListPage", + method: "post", + data, + }); +} + + +// 病害日志-病害类型下拉 +export function DefectType(query) { + return request({ + url: "/bigscreen/v2/getAllDefectType", + method: "get", + params: query, + }); +} \ No newline at end of file diff --git a/src/assets/screen/disease/patrol-order.png b/src/assets/screen/disease/patrol-order.png new file mode 100644 index 0000000..e8946e1 Binary files /dev/null and b/src/assets/screen/disease/patrol-order.png differ diff --git a/src/assets/screen/index/bg-top.png b/src/assets/screen/index/bg-top.png index cde6487..a517bbb 100644 Binary files a/src/assets/screen/index/bg-top.png and b/src/assets/screen/index/bg-top.png differ diff --git a/src/assets/screen/index/btn-cancel.png b/src/assets/screen/index/btn-cancel.png new file mode 100644 index 0000000..fa29942 Binary files /dev/null and b/src/assets/screen/index/btn-cancel.png differ diff --git a/src/assets/screen/index/btn-submit.png b/src/assets/screen/index/btn-submit.png new file mode 100644 index 0000000..921072d Binary files /dev/null and b/src/assets/screen/index/btn-submit.png differ diff --git a/src/assets/screen/index/button-disease-click.png b/src/assets/screen/index/button-disease-click.png index c232da7..064a108 100644 Binary files a/src/assets/screen/index/button-disease-click.png and b/src/assets/screen/index/button-disease-click.png differ diff --git a/src/assets/screen/index/button-disease.png b/src/assets/screen/index/button-disease.png index 0844233..807cdb1 100644 Binary files a/src/assets/screen/index/button-disease.png and b/src/assets/screen/index/button-disease.png differ diff --git a/src/assets/screen/index/button-overview-click.png b/src/assets/screen/index/button-overview-click.png new file mode 100644 index 0000000..70ae6a9 Binary files /dev/null and b/src/assets/screen/index/button-overview-click.png differ diff --git a/src/assets/screen/index/button-overview.png b/src/assets/screen/index/button-overview.png new file mode 100644 index 0000000..8e49409 Binary files /dev/null and b/src/assets/screen/index/button-overview.png differ diff --git a/src/assets/screen/index/button-road-click.png b/src/assets/screen/index/button-road-click.png index b039699..d329df4 100644 Binary files a/src/assets/screen/index/button-road-click.png and b/src/assets/screen/index/button-road-click.png differ diff --git a/src/assets/screen/index/button-road.png b/src/assets/screen/index/button-road.png index 340fb78..6e10a18 100644 Binary files a/src/assets/screen/index/button-road.png and b/src/assets/screen/index/button-road.png differ diff --git a/src/assets/screen/index/disease-current-echart.png b/src/assets/screen/index/disease-current-echart.png new file mode 100644 index 0000000..fe7345e Binary files /dev/null and b/src/assets/screen/index/disease-current-echart.png differ diff --git a/src/assets/screen/index/inspection-div-car.png b/src/assets/screen/index/inspection-div-car.png new file mode 100644 index 0000000..830dcfe Binary files /dev/null and b/src/assets/screen/index/inspection-div-car.png differ diff --git a/src/assets/screen/index/inspection-div-online.png b/src/assets/screen/index/inspection-div-online.png new file mode 100644 index 0000000..4fc3af8 Binary files /dev/null and b/src/assets/screen/index/inspection-div-online.png differ diff --git a/src/assets/screen/index/map-legend.png b/src/assets/screen/index/map-legend.png index 29addf7..f20be3e 100644 Binary files a/src/assets/screen/index/map-legend.png and b/src/assets/screen/index/map-legend.png differ diff --git a/src/views/big-screen/components/img-dialog.vue b/src/views/big-screen/components/img-dialog.vue index b8d9190..a162b14 100644 --- a/src/views/big-screen/components/img-dialog.vue +++ b/src/views/big-screen/components/img-dialog.vue @@ -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 @@
- - 目标维度 - 空间维度 - +
+ 目标维度 +
+
+ 空间维度 +
搜索 - 重置 @@ -101,25 +111,39 @@
+
+
+ 目标详情>> +
+
+
+
+ 采集时间: + {{ new Date(item.createdTime).toLocaleString() }} 起始桩号: + {{ item.stakeStart || "暂无数据" }} 终止桩号: + {{ item.stakeEnd || "暂无数据" }} + 病害类型: + {{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米 + 病害长度{{ item.length }}米 +
+
Main Image -
-
- 采集时间: - {{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号: - {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号: - {{ rectsItem.stakeEnd || "暂无数据" }} - 路产状态: {{ filterState(rectsItem.state) }} -
@@ -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,31 +380,63 @@ export default { this.updateRects(); }); }, + + /* 点击下方小列表 */ showThumbnailImage(index) { this.selectedThumbnail = index; this.updateRects(); }, + + /* 使图片展示在父级容器可视区域 */ scrollToCurrentImage() { - const sidebarImages = this.$refs.sidebar.querySelectorAll("img"); - const currentImageElement = sidebarImages[this.currentIndex]; - if (currentImageElement) { - currentImageElement.scrollIntoView({ - behavior: "smooth", - block: "center", - }); + if (this.$refs.sidebar) { + const sidebarImages = this.$refs.sidebar.querySelectorAll("img"); + const currentImageElement = sidebarImages[this.currentIndex]; + if (currentImageElement) { + currentImageElement.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + } } }, + /* 滚动触发事件 */ handleScroll() { - if (this.currentIndex === this.defectData.length - 1) { + // 滚动高度+容器高度 滚动区域高度 + 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.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]; + this.rectItem = this.defectData[this.currentIndex]?.items[ + this.selectedThumbnail + ].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; + } +} diff --git a/src/views/big-screen/disease-components/traffic-log.vue b/src/views/big-screen/disease-components/traffic-log.vue index 75b0163..0633df3 100644 --- a/src/views/big-screen/disease-components/traffic-log.vue +++ b/src/views/big-screen/disease-components/traffic-log.vue @@ -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: 病害巡检-病害日志 --> @@ -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; +} \ No newline at end of file diff --git a/src/views/big-screen/disease-components/traffic-statistic.vue b/src/views/big-screen/disease-components/traffic-statistic.vue index c5ad5b7..20167f9 100644 --- a/src/views/big-screen/disease-components/traffic-statistic.vue +++ b/src/views/big-screen/disease-components/traffic-statistic.vue @@ -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: 病害巡检大屏-病害统计 -->