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 0000000..88ed544 Binary files /dev/null and b/src/assets/screen/road/ancillary-bottom-8.png differ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 4003702..5bb23ee 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -19,6 +19,7 @@ +
@@ -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(