From b96dcf1cbe39c6f33089e0ff7c2940904f94937c Mon Sep 17 00:00:00 2001 From: SunTao <328867980@qq.com> Date: Mon, 23 Dec 2024 14:48:39 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E5=9B=BE=E4=BE=8B=EF=BC=8C=E5=9B=BE=E4=BE=8B=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E8=81=94=E8=B0=83=E6=8E=A5=E5=8F=A3=EF=BC=8C?= =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=9C=B0=E5=9B=BE=E7=BB=98=E7=BA=BF=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/xj/screen/index.js | 17 +- src/components/map/fssm-map.vue | 5 +- .../disease-components/traffic-log.vue | 37 +- src/views/big-screen/index.vue | 378 +++++++++--------- .../overview-components/disease-current.vue | 3 +- .../overview-components/disease-trends.vue | 1 - .../inspection-vehicles.vue | 1 - .../overview-components/patrol-order.vue | 1 - .../overview-components/today-inspection.vue | 3 +- .../warning-line/components/edit-line.vue | 33 +- .../xj/inspection-warn/warning-line/index.vue | 22 +- 11 files changed, 259 insertions(+), 242 deletions(-) diff --git a/src/api/xj/screen/index.js b/src/api/xj/screen/index.js index 6b39e47..3610f75 100644 --- a/src/api/xj/screen/index.js +++ b/src/api/xj/screen/index.js @@ -2,9 +2,9 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-24 15:03:28 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-11-18 10:09:30 + * @LastEditTime: 2024-12-23 09:33:37 * @FilePath: \znxjxt-ui\src\api\xj\screen\index.js - * @Description: 大屏首页接口 + * @Description: 大屏首页接口 */ import request from "@/utils/request"; @@ -35,9 +35,9 @@ export function mapPointList(query) { } // 获取地图绘制线段数据接口 -export function mapPciList(query) { +export function mapLineList(query) { return request({ - url: "/bigscreen/v2/mapPci", + url: "/roadline/getLine", method: "get", params: query, }); @@ -139,3 +139,12 @@ export function getNoticeList(params) { params, }); } + +//获取大屏工单信息 +export function getWorkOrderList(params) { + return request({ + url: "/bigscreen/v2/getMaintenanceCount", + method: "get", + params, + }); +} diff --git a/src/components/map/fssm-map.vue b/src/components/map/fssm-map.vue index ac52e88..bc1fe00 100644 --- a/src/components/map/fssm-map.vue +++ b/src/components/map/fssm-map.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-14 10:46:23 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-18 09:46:30 + * @LastEditTime: 2024-12-23 11:07:04 * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue * @Description: 公共地图 --> @@ -60,7 +60,6 @@ import { Draw, Modify, Select, Snap } from "ol/interaction"; import * as styleExports from "ol/style"; import { Polygon, LineString } from "ol/geom"; import Overlay from "ol/Overlay"; -import { throttle } from "lodash"; export default { name: "FssmMap", @@ -390,7 +389,7 @@ export default { // 获取弹窗数据 const popupData = feature.get("data"); // 获取弹窗内元素并赋值 - this.$refs.popupContent.innerHTML = `路段名称：${popupData}
起始桩号：${popupData}
终止桩号：${popupData}`; + this.$refs.popupContent.innerHTML = `路段名称：${popupData.name}
病害数：${popupData.count}个
起始桩号：${popupData.stakeStart}
终止桩号：${popupData.stakeEnd}`; dislogLay.setPosition(coordinate); } else { dislogLay.setPosition(undefined); diff --git a/src/views/big-screen/disease-components/traffic-log.vue b/src/views/big-screen/disease-components/traffic-log.vue index 017540a..c8cf0f8 100644 --- a/src/views/big-screen/disease-components/traffic-log.vue +++ b/src/views/big-screen/disease-components/traffic-log.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-11-08 11:56:02 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-10 13:15:08 + * @LastEditTime: 2024-12-23 13:23:20 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue * @Description: 病害巡检-病害日志 --> @@ -203,6 +203,11 @@ export default { type: String, default: "", }, + // 各个种类下详细的病害类型 + eventType:{ + type: Array, + default: ()=>[], + } }, data() { return { @@ -231,7 +236,7 @@ export default { // 路段名称下拉数据 segmentList: [], // 病害类型下拉数据 - eventType: [], + // eventType: [], // 病害状态下拉数据 defectStatus: [ { label: "已修复", value: "2" }, @@ -252,7 +257,7 @@ export default { bottomTipClick: { handler() { this.trafficForm.defectType = ""; - this.getAllDefectType(); + // this.getAllDefectType(); this.getData(); }, }, @@ -260,7 +265,7 @@ export default { mounted() { this.getData(); this.getLineList(); - this.getAllDefectType(); + // this.getAllDefectType(); this.getSegmentList(); }, methods: { @@ -300,18 +305,18 @@ export default { }); }, - /** - * @description: 获取病害类型下拉数据 - * @param {*} - * @return {*} - */ - getAllDefectType() { - DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => { - if (code === 200) { - this.eventType = data; - } - }); - }, + // /** + // * @description: 获取病害类型下拉数据 + // * @param {*} + // * @return {*} + // */ + // getAllDefectType() { + // DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => { + // if (code === 200) { + // this.eventType = data; + // } + // }); + // }, /** * @description: 点击搜索事件 diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index 462e069..6365978 100644 --- a/src/views/big-screen/index.vue +++ b/src/views/big-screen/index.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-17 11:34:00 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-20 14:31:34 + * @LastEditTime: 2024-12-23 14:29:26 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -138,6 +138,7 @@ :is="item.component" :bottomTipClick="bottomTipClick" :companyId="companyId" + :eventType="defectSelectList" @imagePoint="getimagePoint" > @@ -168,36 +169,8 @@ -
-
-
- 本周 -
-
- 本月 -
-
- 本年 -
-
+ +
件
{{ item.name }}
+
+
+ 本周 +
+
+ 本月 +
+
+ 本年 +
+
- ≥{{ mapLegendList.s5 }} - ≥{{ mapLegendList.s4 }} - ≥{{ mapLegendList.s3 }} - ≥{{ mapLegendList.s2 }} - ≥{{ mapLegendList.s1 }} + ≤{{ mapLegendList.s1 }} + ≤{{ mapLegendList.s2 }} + ≤{{ mapLegendList.s3 }} + ≤{{ mapLegendList.s4 }} + >{{ mapLegendList.s4 }}
-
- 病害类型筛选： + +
+ + + +
@@ -285,48 +295,16 @@
{{ screenMapPopoverName }}病害数：65431213个 + >{{ item.all }}个
每公里平均病害：65431213个 + >{{ item.per }}个
-
{{ item.name @@ -336,13 +314,18 @@ - + + @@ -472,12 +455,14 @@ import "animate.css"; import { selectTypeList, mapPointList, - mapPciList, + mapLineList, comppanyImg, getItemTypes, getDefectTypes, getNoticeList, + getWorkOrderList, } from "@/api/xj/screen/index"; +import { DefectType } from "@/api/xj/screen/traffic-screen"; export default { name: "BigScreen", components: { @@ -569,12 +554,12 @@ export default { ], // 顶端工单数据 workOrderList: [ - { name: "生成工单数", value: 562254 }, - { name: "未完成工单数", value: 562254 }, - { name: "已完成工单数", value: 562254 }, + { name: "生成工单数", value: 100 }, + { name: "未完成工单数", value: 100 }, + { name: "已完成工单数", value: 100 }, ], // 工单时间选择绑定 - workOrderType: 1, + workOrderType: "", // 图片背景下打点坐标数据 mapCareList: [], // 图例循环数据 @@ -602,6 +587,10 @@ export default { // 图标类别切换标识 bottomTipClick: "1", + // 对应病害类别细类 + defectSelectList: [], + // 对应病害类别系类绑定 + defectSelect: "", // 切换地图图标类别按钮 changeMapBtn: [ { name: "路面", click: "1" }, @@ -667,6 +656,8 @@ export default { this.getMapCare(); this.getDieaseTypeList(); this.getMessageList(); + this.changeOrder("week"); + this.getAllDefectType(); }, methods: { /** @@ -758,7 +749,7 @@ export default { }, /** - * @description: 获取图片背景左上角病害类型下拉 + * @description: 获取图片背景级联病害类型下拉 * @return {void} */ getDieaseTypeList() { @@ -770,14 +761,31 @@ export default { }, /** - * @description: 图片背景左上角病害类型下拉修改 + * @description: 图片背景级联病害类型下拉修改 * @return {void} */ changeMapCareSelect(value) { - const [node] = this.$refs.screenCascader.getCheckedNodes(); - this.screenMapPopoverName = node?.label; - this.getMapCare(value); - this.getLinePoint(); + this.changeOrder(this.workOrderType); + if (this.elementDiv === "OverviewScreen" && !this.showMap) { + const [node] = this.$refs.screenCascader.getCheckedNodes(); + this.screenMapPopoverName = node?.label; + this.getMapCare(value); + } else if (this.elementDiv != "OverviewScreen" || this.showMap) { + this.getLinePoint(); + } + }, + + /** + * @description: 获取病害类型select下拉数据 + * @param {*} + * @return {*} + */ + getAllDefectType() { + DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => { + if (code === 200) { + this.defectSelectList = data; + } + }); }, /** @@ -785,15 +793,21 @@ export default { * @return {void} */ changeOrder(val) { - if (this.workOrderType != val) { - this.workOrderType = val; - this.companyId; - this.workOrderList = [ - { name: "生成工单数", value: 54 }, - { name: "未完成工单数", value: 5254 }, - { name: "已完成工单数", value: 554 }, - ]; - } + this.workOrderType = val; + getWorkOrderList({ + companyId: this.companyId, + type: val, + classType: this.mapCareSelect.length > 0 ? this.mapCareSelect[0] : "", + defectType: this.mapCareSelect.length > 1 ? this.mapCareSelect[1] : "", + }).then(({ code, data }) => { + if (code === 200) { + this.workOrderList = [ + { name: "生成工单数", value: data.createdCount }, + { name: "未完成工单数", value: data.unFinishedCount }, + { name: "已完成工单数", value: data.finishedCount }, + ]; + } + }); }, /** @@ -807,14 +821,8 @@ export default { }; comppanyImg(data).then(({ code, data }) => { if (code === 200) { - this.mapLegendList = { - s1: "0", - s2: "20", - s3: "40", - s4: "60", - s5: "80", - }; - this.mapCareList = data; + this.mapLegendList = data.basLinetypeSetting; + this.mapCareList = data.company; } }); }, @@ -825,8 +833,10 @@ export default { */ showMapByCompany(val) { this.companyId = val.id; + this.overViewMapPoint = [val.lon * 1, val.lat * 1]; this.showMap = true; this.getLinePoint(); + this.changeOrder(this.workOrderType); }, /** @@ -1047,26 +1057,25 @@ export default { this.markLayerLines = null; }); } - mapPciList({ - companyId: this.companyId, - defectType: this.mapCareSelect, - }).then(({ code, data }) => { - // if (code === 200 && data) { - // this.lineString = data.filter((item) => item.coordinates !== null); - // this.drawLine(); - // } - if (code === 200) { - this.lineString = [ - [123.09835060586187, 41.95723497452143], - [122.96926125039312, 41.8459984022558], - [123.14366920937749, 41.8185325819433], - [123.10384376992437, 41.71141588272455], - [122.91982277383062, 41.67708360733393], - [123.10109718789312, 41.6207786756933], - [123.37300880898687, 41.63039171280268], - [123.31121071328374, 41.8240257460058], - [123.21782692422124, 41.98195421280268], - ]; + let data = {}; + if (this.elementDiv === "OverviewScreen") { + data = { + companyId: this.companyId, + classType: this.mapCareSelect.length > 0 ? this.mapCareSelect[0] : "", + defectType: + this.mapCareSelect.length > 1 ? this.mapCareSelect[1] : "", + }; + } else { + data = { + companyId: this.companyId, + classType: this.bottomTipClick, + defectType: this.defectSelect, + }; + } + mapLineList(data).then(({ code, data }) => { + if (code === 200 && data) { + this.mapLegendList = data.basLinetypeSetting; + this.lineString = data.lines; this.drawLine(); } }); @@ -1078,50 +1087,42 @@ export default { */ drawLine() { const features = []; - // this.lineString.forEach((element) => { - // console.log(element,'ddd'); - - // const lines = element?.coordinates?.split(";")?.map((it) => { - // return it.split(",").map(Number); - // }); - const line = new Feature({ - geometry: new geomExports.LineString(this.lineString), - data: "15112", - type: "line", - }); - line.setStyle([ - new Style({ - // 填充色 - fill: new Fill({ - color: "red", - }), - // 边线颜色 - stroke: new Stroke({ - // color: this.getLineColor(element.pci), - color: "red", - width: 5, - }), - // 形状 - image: new Circle({ - radius: 17, + this.lineString.forEach((element) => { + const lines = JSON.parse(element.line).map((it) => { + return [it.lon, it.lat]; + }); + const line = new Feature({ + geometry: new geomExports.LineString(lines), + data: { + name: element.segmentName, + count: element.defectCount, + stakeEnd: element.stakeEnd, + stakeStart: element.stakeStart, + }, + type: "line", + }); + line.setStyle([ + new Style({ + // 填充色 fill: new Fill({ - color: "#ffffff", + color: "red", + }), + // 边线颜色 + stroke: new Stroke({ + color: this.getLineColor(element.status), + width: 3, + }), + // 形状 + image: new Circle({ + radius: 17, + fill: new Fill({ + color: "#ffffff", + }), }), }), - // text: new Text({ - // text: "121454", - // color: "#ffffff", - // textAlign: "center", //位置 - // textBaseline: "middle", - // offsetY: 0, - // fill: new Fill({ - // color: "#ffffff", - // }), - // }), - }), - ]); - features.push(line); - // }); + ]); + features.push(line); + }); const lineSource = new VectorSource({ features, }); @@ -1150,16 +1151,16 @@ export default { * @return {string} */ getLineColor(value) { - if (value > 92) { + if (value === 1) { return "#0ABE67"; - } else if (92 >= value > 80) { - return "#03BDE7"; - } else if (80 >= value > 70) { - return "#E7CA03"; - } else if (70 >= value > 60) { + } else if (value === 2) { + return "#19C1E6"; + } else if (value === 3) { + return "#E5CA18"; + } else if (value === 4) { return "#D47F07"; } else { - return "#E64548"; + return "#E55557"; } }, @@ -1170,7 +1171,9 @@ export default { */ changeIconType(value) { if (this.bottomTipClick !== value) { + this.defectSelect = ""; this.bottomTipClick = value; + this.getAllDefectType(); this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); map.removeLayer(this.clusters); @@ -1181,7 +1184,7 @@ export default { // 地图右上角多选按钮隐藏 this.showIconList = false; // this.getIconType(); - // this.getCenterPiont(); + this.getLinePoint(); } }, @@ -1269,6 +1272,8 @@ export default { if (this.elementDiv !== item) { this.elementDiv = item.component; this.roadSelect = ""; + // 清除已经点击的公司 + this.companyId = null; if (item.component === "OverviewScreen") { /* 清空线段图层 */ this.markLayerLines = null; @@ -1698,19 +1703,24 @@ export default { // 筛选病害类型下拉 .map-image-select { position: absolute; - left: 28%; + top: 13%; + left: 26%; font-size: 0.9rem; position: absolute; color: #ffffff; font-family: "DouYu"; z-index: 1; + + .el-select { + width: 10rem; + } } // 返回图片背景下拉 .return-image { position: absolute; - left: 28%; - top: 14%; + left: 26%; + top: 9%; z-index: 1; } @@ -1718,7 +1728,7 @@ export default { .work-order { width: 35%; height: 12%; - left: 28%; + left: 34.5%; top: 10%; display: flex; position: absolute; diff --git a/src/views/big-screen/overview-components/disease-current.vue b/src/views/big-screen/overview-components/disease-current.vue index 347bb0e..3dbf712 100644 --- a/src/views/big-screen/overview-components/disease-current.vue +++ b/src/views/big-screen/overview-components/disease-current.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-18 10:19:56 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-20 10:50:40 + * @LastEditTime: 2024-12-23 09:59:12 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue * @Description: 总览大屏-病害三维饼图 --> @@ -153,7 +153,6 @@ export default { handler() { this.getChartList(); }, - immediate: true, }, }, mounted() { diff --git a/src/views/big-screen/overview-components/disease-trends.vue b/src/views/big-screen/overview-components/disease-trends.vue index ff4b317..ab4f71e 100644 --- a/src/views/big-screen/overview-components/disease-trends.vue +++ b/src/views/big-screen/overview-components/disease-trends.vue @@ -37,7 +37,6 @@ export default { handler() { this.geteEhartList(); }, - immediate: true, }, }, mounted() { diff --git a/src/views/big-screen/overview-components/inspection-vehicles.vue b/src/views/big-screen/overview-components/inspection-vehicles.vue index ac4f568..f7735e0 100644 --- a/src/views/big-screen/overview-components/inspection-vehicles.vue +++ b/src/views/big-screen/overview-components/inspection-vehicles.vue @@ -211,7 +211,6 @@ export default { handler() { this.getTableData(); }, - immediate: true, }, }, mounted() { diff --git a/src/views/big-screen/overview-components/patrol-order.vue b/src/views/big-screen/overview-components/patrol-order.vue index f165e42..d58deaa 100644 --- a/src/views/big-screen/overview-components/patrol-order.vue +++ b/src/views/big-screen/overview-components/patrol-order.vue @@ -96,7 +96,6 @@ export default { handler() { this.getData(); }, - immediate: true, }, }, mounted() { diff --git a/src/views/big-screen/overview-components/today-inspection.vue b/src/views/big-screen/overview-components/today-inspection.vue index 581d79c..6e21d9b 100644 --- a/src/views/big-screen/overview-components/today-inspection.vue +++ b/src/views/big-screen/overview-components/today-inspection.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-18 09:42:49 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-20 11:22:56 + * @LastEditTime: 2024-12-23 09:53:28 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue * @Description: 总览大屏-今日巡查 --> @@ -134,7 +134,6 @@ export default { handler() { this.getData(); }, - immediate: true, }, }, mounted() { diff --git a/src/views/xj/inspection-warn/warning-line/components/edit-line.vue b/src/views/xj/inspection-warn/warning-line/components/edit-line.vue index f948ff1..6cb27d6 100644 --- a/src/views/xj/inspection-warn/warning-line/components/edit-line.vue +++ b/src/views/xj/inspection-warn/warning-line/components/edit-line.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-12-17 13:35:37 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-18 11:42:13 + * @LastEditTime: 2024-12-23 10:59:39 * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\components\edit-line.vue * @Description: 图例设置-编辑弹窗 --> @@ -27,18 +27,18 @@ > - - - + + + - - + - - + - +
确 定 diff --git a/src/views/xj/inspection-warn/warning-line/index.vue b/src/views/xj/inspection-warn/warning-line/index.vue index 53e68e4..36a57fb 100644 --- a/src/views/xj/inspection-warn/warning-line/index.vue +++ b/src/views/xj/inspection-warn/warning-line/index.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-12-17 09:18:08 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-18 11:16:26 + * @LastEditTime: 2024-12-23 11:44:13 * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\index.vue * @Description: 预警中心-大屏图例设置 --> @@ -16,21 +16,21 @@ > - - + + - - + + - + - - - - - + + +