From d4d3662a4455e50e5a62861c0c37309fe0e9d1c1 Mon Sep 17 00:00:00 2001 From: SunTao <328867980@qq.com> Date: Tue, 19 Nov 2024 14:18:57 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=A4=A7=E5=B1=8F=E6=89=93?= =?UTF-8?q?=E7=82=B9=E9=80=BB=E8=BE=91=E4=BF=AE=E6=94=B9=EF=BC=8C=E7=97=85?= =?UTF-8?q?=E5=AE=B3=E6=97=A5=E5=BF=97=E6=96=B0=E5=A2=9E=E6=97=B6=E9=97=B4?= =?UTF-8?q?=E9=80=89=E6=8B=A9=EF=BC=8C=E6=96=B0=E5=A2=9E=E9=A2=84=E8=AD=A6?= =?UTF-8?q?=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/xj/screen/road-screen.js | 10 +-- src/assets/screen/road/ancillary-bottom-8.png | Bin 0 -> 5173 bytes src/layout/components/Navbar.vue | 21 ++++- .../big-screen/components/img-dialog.vue | 4 +- .../disease-components/traffic-log.vue | 68 ++++++++++++--- .../disease-components/traffic-statistic.vue | 17 +--- src/views/big-screen/index.vue | 82 ++++++++++++++---- .../inspection-vehicles.vue | 12 +-- .../road-components/ancillary-facilities.vue | 23 ++--- .../road-components/manage-maintain.vue | 10 ++- 10 files changed, 166 insertions(+), 81 deletions(-) create mode 100644 src/assets/screen/road/ancillary-bottom-8.png diff --git a/src/api/xj/screen/road-screen.js b/src/api/xj/screen/road-screen.js index 8c397c6..c37cfc7 100644 --- a/src/api/xj/screen/road-screen.js +++ b/src/api/xj/screen/road-screen.js @@ -11,7 +11,7 @@ import request from "@/utils/request"; // 路面状况排名接口 export function roadRankStatistics(query) { return request({ - url: "/bigscreen/getRoadStatistics", + url: "/bigscreen/v2/getRoadStatistics", method: "get", params: query, }); @@ -21,7 +21,7 @@ export function roadRankStatistics(query) { // 附属设施分布接口 export function ancillaryList(query) { return request({ - url: "/bigscreen/getEquipmentScale", + url: "/bigscreen/v2/getEquipmentScale", method: "get", params: query, }); @@ -30,7 +30,7 @@ export function ancillaryList(query) { // 附属设施分布累计路产数 export function ancillaryCount(query) { return request({ - url: "/bigscreen/getEquipmentCount", + url: "/bigscreen/v2/getEquipmentCount", method: "get", params: query, }); @@ -40,7 +40,7 @@ export function ancillaryCount(query) { // 附属设施异常统计接口 export function anomalyList(query) { return request({ - url: "/bigscreen/getEquipmentAnomalyLog", + url: "/bigscreen/v2/getEquipmentAnomalyLog", method: "get", params: query, }); @@ -49,7 +49,7 @@ export function anomalyList(query) { // 路产统计信息接口 export function roadStatisticList(query) { return request({ - url: "/bigscreen/getEquipmentStatistics", + url: "/bigscreen/v2/getEquipmentStatistics", method: "get", params: query, }); diff --git a/src/assets/screen/road/ancillary-bottom-8.png b/src/assets/screen/road/ancillary-bottom-8.png new file mode 100644 index 0000000000000000000000000000000000000000..88ed544234255afc8c7bfe1f5c65c72397261da1 GIT binary patch literal 5173 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 +
@@ -95,8 +96,8 @@ export default { }, methods: { /* 点击跳转大屏页面 */ - goBigScreen(){ - this.$router.push("/screen") + goBigScreen() { + this.$router.push("/screen"); }, toggleSideBar() { this.$store.dispatch("app/toggleSideBar"); @@ -163,7 +164,7 @@ export default { outline: none; } - .menu-return { + .header-news { height: 100%; margin-right: 0.5rem; @@ -171,7 +172,19 @@ export default { cursor: pointer; font-size: 1.4rem; line-height: 3.1rem; - font-weight: bold; + font-weight: 400; + } + } + + .menu-return { + height: 100%; + margin-right: 1rem; + + i { + cursor: pointer; + font-size: 1.4rem; + line-height: 3.1rem; + font-weight: 400; } } diff --git a/src/views/big-screen/components/img-dialog.vue b/src/views/big-screen/components/img-dialog.vue index 2a7a77d..61d4edc 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-14 16:44:42 + * @LastEditTime: 2024-11-19 13:56:22 * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue * @Description: 大屏查看图片弹窗 --> @@ -68,7 +68,7 @@ diff --git a/src/views/big-screen/disease-components/traffic-log.vue b/src/views/big-screen/disease-components/traffic-log.vue index 2b4649b..cb1195f 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-11-14 13:12:32 + * @LastEditTime: 2024-11-19 13:52:47 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue * @Description: 病害巡检-病害日志 --> @@ -37,25 +37,38 @@ - - - + --> + + + + @@ -232,21 +232,6 @@ export default { // 鼠标悬浮具体数据显示 show: false, position: "center", - formatter: (params) => { - return `{a|${params.percent.toFixed()}%}\n{b|${params.name}}`; - }, - rich: { - a: { - fontFamily: "DouYu", - fontSize: 28, - color: "rgba(255, 183, 89, 0.8)", - }, - b: { - fontFamily: "DinBm", - fontSize: 12, - color: "#ffffff", - }, - }, }, emphasis: { label: { diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index 3c7daf1..0549ecf 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-11-18 11:18:49 + * @LastEditTime: 2024-11-19 14:16:56 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -20,6 +20,7 @@ >
+
{{ dataTime }}
{{ weekTime }} @@ -114,7 +115,11 @@ v-model="mapCareSelect" popper-class="screen-index-cascader" :options="dieaseOptions" - :props="{checkStrictly:true, emitPath: true, children: 'subTypes' }" + :props="{ + checkStrictly: true, + emitPath: true, + children: 'subTypes', + }" @change="getMapCare" clearable > @@ -212,6 +217,19 @@ class="rect-overlay" :style="getScreenRectStyle(rect)" >
+
+ 采集时间: + {{ screenImage.createTime }} 起始桩号： + {{ screenImage.stakeStart || "暂无数据" }} 终止桩号： + {{ screenImage.stakeEnd || "暂无数据" }} + {{ `${this.elementDiv === "RoadScreen" ? "路产" : "病害"}类型：` }} + {{ screenImage.iconTypeName || "暂无数据" }} + + 病害面积：{{ screenImage.targetArea }}平方米 病害长度：{{ + screenImage.targetLen + }}米 + +
@@ -702,13 +720,11 @@ export default { classType: value ? value[0] : "", type: value ? (value.length > 1 ? value[1] : "") : "", }; - comppanyImg(data).then( - ({ code, data }) => { - if (code === 200) { - this.mapCareList = data; - } + comppanyImg(data).then(({ code, data }) => { + if (code === 200) { + this.mapCareList = data; } - ); + }); }, /* 点击病害日志详情打开弹窗进行地图打点 */ @@ -716,6 +732,9 @@ export default { this.imgTitle = "查看"; this.imageItem = item; this.imgVisible = true; + // 地图右上角多选按钮显示 + this.getIconType(); + this.showIconList = true; // 地图打点\改变地图层级 this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); @@ -798,11 +817,7 @@ export default { const point = new Point(element.geometry); const feature = new Feature({ geometry: point, - data: { - iconType: element.iconType, - imageUrl: element.imageUrl, - rect: element.rect, - }, + data: element, // 自己设置一个标识 type: "icon", }); @@ -969,8 +984,17 @@ export default { changeIconType(value) { if (this.bottomTipClick !== value) { this.bottomTipClick = value; - this.getIconType(); - this.getCenterPiont(); + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + map.removeLayer(this.clusters); + this.clusters = null; + // map.getView().setZoom(10); + // map.getView().setCenter([123.30297096718999, 41.87942945541742]); + }); + // 地图右上角多选按钮隐藏 + this.showIconList = false; + // this.getIconType(); + // this.getCenterPiont(); } }, @@ -1182,16 +1206,22 @@ export default { class: "one", }, ]; + // 地图右上角多选按钮隐藏 + this.showIconList = false; + // 图层恢复 + this.mapZoom = ""; this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); + map.removeLayer(this.clusters); + this.clusters = null; map.getView().setZoom(10); map.getView().setCenter([123.30297096718999, 41.87942945541742]); }); // 地图右上角多选按钮显示 - this.getIconType(); - this.showIconList = true; + // this.getIconType(); + // this.showIconList = true; // 进行地图打点 - this.getCenterPiont(); + // this.getCenterPiont(); this.getLinePoint(); } } @@ -1496,6 +1526,12 @@ export default { align-items: flex-end; } + .header-news { + cursor: pointer; + font-size: 1.5rem; + color:red; + } + .header-data { font-size: 1.8rem; } @@ -1637,6 +1673,7 @@ export default { width: 100%; height: 80%; display: flex; + flex-direction: column; align-items: center; justify-content: center; overflow: hidden; @@ -1655,6 +1692,15 @@ export default { } } +// 图片信息 +.rect-image { + width: 80%; + position: absolute; + top: 0; + color: #ffffff; + background-color: rgba(0, 0, 0, 0.5); +} + // 大屏下拉框样式 ::v-deep .el-select { width: 6.5rem; diff --git a/src/views/big-screen/overview-components/inspection-vehicles.vue b/src/views/big-screen/overview-components/inspection-vehicles.vue index 2972cbd..5940b97 100644 --- a/src/views/big-screen/overview-components/inspection-vehicles.vue +++ b/src/views/big-screen/overview-components/inspection-vehicles.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-11-08 09:40:18 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-11-15 15:29:10 + * @LastEditTime: 2024-11-19 13:32:51 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue * @Description: 总览大屏-巡检车辆 --> @@ -40,7 +40,7 @@ header-row-class-name="headerRow" row-class-name="bodayRow" style="width: 100%; background: none" - height="285" + height="85%" > @@ -65,13 +65,9 @@ 车辆状态: {{ scope.row.status }} -
- 网络连接: - -
设备状态: - + {{ scope.row.status }}
@@ -128,7 +128,7 @@ export default { .ancillary-bottom-0 { background-image: url("../../../assets/screen/road/ancillary-bottom-0.png"); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 100%; background-position: 50%; span { @@ -139,7 +139,7 @@ export default { .ancillary-bottom-1 { background-image: url("../../../assets/screen/road/ancillary-bottom-1.png"); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 100%; background-position: 50%; span { @@ -150,7 +150,7 @@ export default { .ancillary-bottom-2 { background-image: url("../../../assets/screen/road/ancillary-bottom-2.png"); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 100%; background-position: 50%; span { @@ -161,7 +161,7 @@ export default { .ancillary-bottom-3 { background-image: url("../../../assets/screen/road/ancillary-bottom-3.png"); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 100%; background-position: 50%; span { @@ -172,7 +172,7 @@ export default { .ancillary-bottom-4 { background-image: url("../../../assets/screen/road/ancillary-bottom-4.png"); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 100%; background-position: 50%; span { @@ -181,20 +181,21 @@ export default { } .ancillary-bottom-5 { - background-image: url("../../../assets/screen/road/ancillary-bottom-5.png"); + background-image: url("../../../assets/screen/road/ancillary-bottom-8.png"); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 100%; background-position: 50%; span { - color: #3f84e3; + // color: #3f84e3; + color: #08afa3; } } .ancillary-bottom-6 { background-image: url("../../../assets/screen/road/ancillary-bottom-6.png"); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 100%; background-position: 50%; span { @@ -205,7 +206,7 @@ export default { .ancillary-bottom-7 { background-image: url("../../../assets/screen/road/ancillary-bottom-7.png"); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 100%; background-position: 50%; span { diff --git a/src/views/big-screen/road-components/manage-maintain.vue b/src/views/big-screen/road-components/manage-maintain.vue index ee34551..340d2cd 100644 --- a/src/views/big-screen/road-components/manage-maintain.vue +++ b/src/views/big-screen/road-components/manage-maintain.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-18 15:15:04 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-10-18 15:47:15 + * @LastEditTime: 2024-11-19 09:54:43 * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\manage-maintain.vue * @Description: 道路资产大屏-管养道路统计 --> @@ -60,9 +60,11 @@ export default { width: 47%; height: 100%; padding-left: 3rem; - line-height: 5rem; + // line-height: 5rem; display: flex; justify-content: center; + align-items: center; + padding-bottom: 1.5rem; font-size: 1rem; color: #aac6c7; @@ -78,7 +80,7 @@ export default { background-image: url("../../../assets/screen/road/maintain-left.png"); background-repeat: no-repeat; background-position: 100%; - background-size: 100% 65%; + background-size: 100%; span { background: linear-gradient( @@ -95,7 +97,7 @@ export default { background-image: url("../../../assets/screen/road/maintain-right.png"); background-repeat: no-repeat; background-position: 100%; - background-size: 100% 65%; + background-size: 100%; span { background: linear-gradient(