fix：websocket接入，大屏修改部分

package.json

@@ -68,6 +68,7 @@
     "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
+    "websocket": "^1.0.35",
     "xcrud": "^0.4.19"
   },
   "devDependencies": {

src/api/xj/screen/index.js

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-24 15:03:28
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-06 13:25:37
+ * @LastEditTime: 2024-11-14 09:16:02
  * @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -17,10 +17,18 @@ export function selectTypeList(query) {
   });
 }
 
+// v1
 // 获取地图打点数据接口
+// export function mapPointList(query) {
+//   return request({
+//     url: "/bigscreen/getMapPoint",
+//     method: "get",
+//     params: query,
+//   });
+// }
 export function mapPointList(query) {
   return request({
-    url: "/bigscreen/getMapPoint",
+    url: "/bigscreen/v2/getMapPoint",
     method: "get",
     params: query,
   });
@@ -79,12 +87,21 @@ export function getSegment(data) {
   });
 }
 
-// 根据选择的按钮类型查下级选项框
+// 病害筛选根据点击的详情查图片详情
-export function getItemTypes(params) {
+export function getMediaIndex(data){
   return request({
-    url: "/metadata/getItemTypes",
+    url: "/bigscreen/v2/getTableIndex",
+    method: "post",
+    data,
+  });
+}
+
+// 根据选择的按钮类型查下级选项框
+export function getItemTypes(query) {
+  return request({
+    url: "/bigscreen/v2/getAllDefectType",
     method: "get",
-    params,
+    params: query,
   });
 }
 

src/api/xj/surface.js

@@ -20,7 +20,7 @@ export function getSegment() {
 // 病害类型下拉数据
 export function getDefectList(params) {
     return request({
-      url: "/metadata/defectType",
+      url: "/bigscreen/v2/getAllDefectType",
       method: "get",
       params,
     });

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-11-06 16:42:42
+ * @LastEditTime: 2024-11-14 16:58:34
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -150,6 +150,7 @@ export default {
       deep: true,
       immediate: true,
     },
+
     /* 监听传过来的底图类型 */
     baseMap: {
       handler(val) {
@@ -211,7 +212,7 @@ export default {
           minZoom: 7,
           maxZoom: 18,
         }),
-        layers: [ tianditu_img_c, tianditu_cva_c],
+        layers: [tianditu_img_c, tianditu_cva_c],
       });
       // 图层点击事件
       map.on("singleclick", (e) => {

src/plugins/websocket.js

@@ -0,0 +1,229 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-13 17:13:54
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-13 17:14:13
+ * @FilePath: \znxjxt-ui\src\plugins\websocket.js
+ * @Description: websocket传输
+ */
+
+// websocket实例
+let wsObj = null;
+// ws连接地址
+let wsUrl = null;
+// let userId = null;
+// 是否执行重连 true/不执行 ； false/执行
+let lockReconnect = false;
+// 重连定时器
+let wsCreateHandler = null;
+// 连接成功，执行回调函数
+let messageCallback = null;
+// 连接失败，执行回调函数
+let errorCallback = null;
+// 发送给后台的数据
+let sendDatas = {};
+ 
+/**
+ * 发起websocket请求函数
+ * @param {string} url ws连接地址
+ * @param {Object} agentData 传给后台的参数
+ * @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
+ * @param {function} errCallback ws连接错误的回调函数
+ */
+export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
+  wsUrl = url;
+  createWebSoket();
+  messageCallback = successCallback;
+  errorCallback = errCallback;
+  sendDatas = agentData;
+};
+ 
+// 手动关闭websocket （这里手动关闭会执行onclose事件）
+export const closeWebsocket = () => {
+  if (wsObj) {
+    writeToScreen("手动关闭websocket");
+    wsObj.close(); // 关闭websocket
+    // wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
+    // 关闭重连
+    lockReconnect = true;
+    wsCreateHandler && clearTimeout(wsCreateHandler);
+    // 关闭心跳检查
+    heartCheck.stop();
+  }
+};
+ 
+//向服务器端发送消息
+export const sendMsg = value => {
+  wsObj.send(JSON.stringify(value));
+};
+ 
+// 创建ws函数
+const createWebSoket = () => {
+  //判断浏览器是否支持websocket
+  if (typeof WebSocket === "undefined") {
+    writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
+    return false;
+  }
+ 
+  // const host = window.location.host; //获取端口
+  // userId = GetQueryString("userId");
+  // wsUrl = "ws://" + host + "/websoket" + userId;
+ 
+  try {
+    wsObj = new WebSocket(wsUrl);
+    initWsEventHandle();
+  } catch (e) {
+    writeToScreen("连接异常，开始重连");
+    reconnect();
+  }
+};
+ 
+ 
+const initWsEventHandle = () => {
+  try {
+    // 连接成功
+    wsObj.onopen = event => {
+    //   heartCheck.start(); //开启心跳
+      onWsOpen(event); //客户端与服务器端通信
+    };
+ 
+    // 监听服务器端返回的信息
+    wsObj.onmessage = event => {
+      onWsMessage(event); //接收数据，抛出
+    //   heartCheck.reset(); //重置心跳
+    };
+ 
+    wsObj.onclose = event => {
+      writeToScreen("onclose执行关闭事件");
+      onWsClose(event); //关闭事件
+    };
+ 
+    wsObj.onerror = event => {
+      writeToScreen("onerror执行error事件，开始重连");
+      onWsError(event); //error事件
+      reconnect(); //重连
+    };
+  } catch (err) {
+    writeToScreen("绑定事件没有成功，开始重连");
+    reconnect();
+  }
+};
+ 
+//open事件 WebSocket连接成功时触发
+const onWsOpen = event => {
+  //  客户端与服务器端通信
+  // wsObj.send('我发送消息给服务端');
+  // 添加状态判断，当为OPEN时，发送消息
+  if (wsObj.readyState === wsObj.OPEN) {
+    // wsObj.OPEN = 1
+    // 发给后端的数据需要字符串化
+    wsObj.send(JSON.stringify(sendDatas));
+  }
+  if (wsObj.readyState === wsObj.CLOSED) {
+    // wsObj.CLOSED = 3
+    writeToScreen("wsObj.readyState=3, ws连接异常，开始重连");
+    reconnect();
+    errorCallback(event);
+  }
+};
+ 
+//message事件  接收到WebSocket服务器发送的消息时触发
+const onWsMessage = event => {
+  const jsonStr = event.data;
+  // writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
+  messageCallback(jsonStr);
+};
+ 
+//close事件 WebSocket连接关闭时触发
+const onWsClose = event => {
+  writeToScreen("DISCONNECT");
+  // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
+  // e.code !== 1000  表示非正常关闭。
+  console.log("onclose event: ", event);
+  if (event && event.code !== 1000) {
+    writeToScreen("非正常关闭");
+    errorCallback(event);
+    // 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
+    reconnect();
+  }
+};
+ 
+//error事件 WebSocket连接出错时触发
+const onWsError = event => {
+  writeToScreen("onWsError: ", event.data);
+  errorCallback(event);//抛出错误
+};
+ 
+//封装console.log()
+const writeToScreen = massage => {
+  console.log(massage);
+};
+ 
+// 重连函数
+const reconnect = () => {
+  if (lockReconnect) {
+    return;
+  }
+  writeToScreen("3秒后重连");
+  lockReconnect = true;
+  // 没连接上会一直重连，设置延迟避免请求过多
+  wsCreateHandler && clearTimeout(wsCreateHandler);
+  wsCreateHandler = setTimeout(() => {
+    writeToScreen("重连..." + wsUrl);
+    createWebSoket();
+    lockReconnect = false;
+    writeToScreen("重连完成");
+  }, 5000);
+};
+ 
+// 从浏览器地址中获取对应参数
+const GetQueryString = name => {
+  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+  // 获取url中 ? 符后的字符串并正则匹配
+  let r = window.location.search.substr(1).match(reg);
+  let context = "";
+  r && (context = r[2]);
+  reg = null;
+  r = null;
+  return context;
+};
+ 
+// 心跳检查（看看websocket是否还在正常连接中）
+let heartCheck = {
+  timeout: 15 * 1000,
+  timeoutObj: null,
+  serverTimeoutObj: null,
+  // 重启
+  reset() {
+    clearTimeout(this.timeoutObj);
+    clearTimeout(this.serverTimeoutObj);
+    this.start();
+  },
+  // 停止
+  stop() {
+    clearTimeout(this.timeoutObj);
+    clearTimeout(this.serverTimeoutObj);
+  },
+  // 开启定时器
+  start() {
+    this.timeoutObj && clearTimeout(this.timeoutObj);
+    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+    // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
+    this.timeoutObj = setTimeout(() => {
+      writeToScreen("心跳检查，发送ping到后台");
+      try {
+        const datas = { content: "心跳检测" };
+        wsObj.send(JSON.stringify(datas));
+      } catch (err) {
+        writeToScreen("发送ping异常,重连");
+        reconnect();
+      }
+      // console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
+      // 内嵌定时器
+      this.serverTimeoutObj = setTimeout(() => {
+        writeToScreen("没有收到后台的数据，重新连接");
+        reconnect();
+      }, this.timeout);
+    }, this.timeout);
+  },
+};

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-13 13:31:49
+ * @LastEditTime: 2024-11-14 16:44:42
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -53,6 +53,7 @@
               v-model="imgForm.segmentId"
               placeholder="请选择路段名称"
               :popper-append-to-body="false"
+              filterable
               clearable
             >
               <el-option
@@ -84,18 +85,32 @@
             <el-input
               v-model="imgForm.stakeStart"
               placeholder="起始公里桩"
-              style="width: 8rem"
+              style="width: 6rem"
               clearable
             />
             <span style="margin: 0 5px">-</span>
             <el-input
               v-model="imgForm.stakeEnd"
               placeholder="终止公里桩"
-              style="width: 8rem"
+              style="width: 6rem"
               clearable
             />
           </el-form-item>
-
+          <el-form-item class="form-item" label="病害状态" prop="state">
+            <el-select
+              v-model="imgForm.state"
+              :popper-append-to-body="false"
+              placeholder="请选择病害状态"
+              clearable
+            >
+              <el-option
+                v-for="item in defectStatus"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
           <el-button
             type="primary"
             class="btn-submit"
@@ -162,10 +177,24 @@
 </template>
 
 <script>
-import { getDefectStatus } from "@/api/xj/disease";
+import {
-import { defeaseList, getSegment, getItemTypes } from "@/api/xj/screen/index";
+  defeaseList,
+  getSegment,
+  getItemTypes,
+  getMediaIndex,
+} from "@/api/xj/screen/index";
 export default {
   name: "ImgDialog",
+  props: {
+    bottomTipClick: {
+      type: String,
+      default: "",
+    },
+    imageItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data() {
     return {
       // 维度选择
@@ -179,11 +208,13 @@ export default {
       // 当前选择的index
       currentIndex: 0,
       // 下方点击的index绑定
-      selectedThumbnail: null,
+      selectedThumbnail: 0,
       // 加载状态
       loading: false,
       // 表单绑定
       imgForm: {
+        // 点击详情传的id
+        id: null,
         // 路段名称
         segmentId: "",
         // 病害类型
@@ -192,31 +223,37 @@ export default {
         stakeStart: "",
         // 终止公里桩
         stakeEnd: "",
+        // 病害状态
+        state: "",
       },
       // 路段下拉数据
       roadTypeList: [],
       // 病害类型下拉数据
       defectTypeList: [],
+      // 病害状态下拉数据
+      defectStatus: [
+        { label: "已修复", value: "2" },
+        { label: "未修复", value: "1" },
+      ],
       // 分页绑定
       params: {
         page: 1,
         size: 10,
       },
+      pageTip: 1,
       // 图片病害位置红框信息
       rectItem: [],
-      colorList: ["#FF0000", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
+      colorList: ["#FFFFFF", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
-      // 病害状态下拉选项
-      defectStatus: [],
     };
   },
   computed: {
     // 当前展示的图片url
     currentImage() {
-      if (this.defectData.length > 0) {
+      if (
-        // this.rectItem =
+        this.defectData.length > 0 &&
-        //   this.defectData[this.currentIndex]?.items[
+        this.defectData.length > this.currentIndex
-        //     this.selectedThumbnail
+      ) {
-        //   ]?.children;
+        // this.showImage(this.currentIndex);
         return this.defectData[this.currentIndex].items[this.selectedThumbnail]
           .img;
       }
@@ -226,34 +263,25 @@ export default {
       return this.defectData[this.currentIndex]?.items || [];
     },
   },
+  watch: {
+    imageItem: {
+      handler() {
+        this.getMediaBySnapshotid();
+      },
+      deep: true,
+      immediate: true,
+    },
+    bottomTipClick: {
+      handler() {
+        this.getDefectType();
+      },
+    },
+  },
   created() {
-    this.getList();
-    this.showImage(0);
     this.getSegmentList();
-    this.getDefectStatusList();
     this.getDefectType();
   },
   methods: {
-    /* 查询病害状态下拉数据 */
-    getDefectStatusList() {
-      getDefectStatus().then(({ data, code }) => {
-        if (code === 200) {
-          this.defectStatus = data;
-        }
-      });
-    },
-
-    /* 过滤列表病害状态 */
-    filterState(value) {
-      let a = null;
-      [a] = this.defectStatus.filter((item) => {
-        return item.value === value;
-      });
-      if (a) {
-        return a.label;
-      }
-    },
-
     /* 获取路段下拉数据 */
     getSegmentList() {
       getSegment().then(({ code, data }) => {
@@ -265,10 +293,29 @@ export default {
 
     /* 获取病害类型下拉数据 */
     getDefectType() {
-      getItemTypes({ type: "defect" }).then(({ code, data }) => {
+      getItemTypes({ classType: this.bottomTipClick }).then(
+        ({ code, data }) => {
           if (code === 200) {
             this.defectTypeList = data;
           }
+        }
+      );
+    },
+
+    /* 根据传回来的快照id查图片详细数据 */
+    getMediaBySnapshotid() {
+      getMediaIndex({
+        classType: this.bottomTipClick,
+        id: this.imageItem.snapshotId,
+      }).then(({ code, data }) => {
+        if (code === 200) {
+          this.currentIndex = data.index;
+          this.pageTip = data.page;
+          this.params.page = data.page;
+          this.params.size = data.size;
+          this.imgForm.segmentId = data.segmentId.toString();
+          this.getList();
+        }
       });
     },
 
@@ -290,23 +337,55 @@ export default {
       }
     },
 
-    /* 获取图片列表/点击搜索事件 */
+    /* 向下获取图片列表 */
     getList() {
       this.loading = true;
       const data = {
+        classType: this.bottomTipClick,
         ...this.imgForm,
         ...this.params,
       };
       defeaseList(data)
-        .then((response) => {
+        .then(({ code, data }) => {
-          this.aimList.push(...response.data.aim);
+          if (code === 200) {
-          this.ariaList.push(...response.data.aria);
+            this.aimList.push(...data.aim);
+            this.ariaList.push(...data.aria);
             if (this.labelCheck === "aria") {
               this.defectData = this.ariaList;
             } else {
               this.defectData = this.aimList;
             }
             this.loading = false;
+          }
+        })
+        .finally(() => {
+          // this.showImage(this.currentIndex);
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    /* 向上获取列表数据 */
+    getListTop() {
+      this.loading = true;
+      const data = {
+        classType: this.bottomTipClick,
+        ...this.imgForm,
+        ...this.params,
+      };
+      defeaseList(data)
+        .then(({ code, data }) => {
+          if (code === 200) {
+            this.aimList.unshift(...data.aim);
+            this.ariaList.unshift(...data.aria);
+            if (this.labelCheck === "aria") {
+              this.defectData = this.ariaList;
+            } else {
+              this.defectData = this.aimList;
+            }
+            this.loading = false;
+          }
         })
         .catch(() => {
           this.loading = false;
@@ -319,6 +398,8 @@ export default {
       if (this.imgForm.stakeStart) {
         if (stakeReg.test(this.imgForm.stakeStart)) {
           this.defectData = [];
+          this.ariaList = [];
+          this.aimList = [];
           this.params = {
             page: 1,
             size: 10,
@@ -331,6 +412,8 @@ export default {
       } else if (this.imgForm.stakeEnd) {
         if (stakeReg.test(this.imgForm.stakeEnd)) {
           this.defectData = [];
+          this.ariaList = [];
+          this.aimList = [];
           this.params = {
             page: 1,
             size: 10,
@@ -342,6 +425,8 @@ export default {
         }
       } else {
         this.defectData = [];
+        this.ariaList = [];
+        this.aimList = [];
         this.params = {
           page: 1,
           size: 10,
@@ -354,11 +439,14 @@ export default {
     /* 重置事件 */
     resetQuery() {
       this.defectData = [];
+      this.ariaList = [];
+      this.aimList = [];
       this.imgForm = {
         segmentId: "",
         defectType: "",
         stakeStart: "",
         stakeEnd: "",
+        state: "",
       };
       this.params = {
         page: 1,
@@ -370,9 +458,9 @@ export default {
 
     /* 左侧点击图片事件 */
     showImage(index) {
-      if (this.currentIndex === this.defectData.length - 1) {
+      // if (this.currentIndex === this.defectData.length - 1) {
-        this.loadMoreImages();
+      //   this.loadMoreBottomImages();
-      }
+      // }
       this.currentIndex = index;
       this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
       this.scrollToCurrentImage();
@@ -402,27 +490,41 @@ export default {
     },
 
     /* 滚动触发事件 */
-    handleScroll() {
+    handleScroll(e) {
-      // 滚动高度+容器高度  滚动区域高度
       const sidebar = this.$refs.sidebar;
+      // 滚动到顶加载数据
+      if (e.target.scrollTop < 1 && this.pageTip > 1 && !this.loading) {
+        this.loadMoreTopImages();
+      }
+      
+      // 滚动到底加载数据
+      // 滚动高度+容器高度  滚动区域高度
       if (
         sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 &&
         !this.loading
       ) {
-        this.loadMoreImages();
+        this.loadMoreBottomImages();
       }
       // if (this.currentIndex === this.defectData.length - 1) {
-      //   this.loadMoreImages();
+      //   this.loadMoreBottomImages();
       // }
     },
 
-    /* 加载更多图片方法 */
+    /* 向下加载更多图片方法 */
-    loadMoreImages() {
+    loadMoreBottomImages() {
       this.params.page += 1;
       this.getList();
     },
 
-    /* 点击目标详情事件 */
+    /* 向上加载更多图片 */
+    loadMoreTopImages() {
+      this.pageTip -= 1;
+      this.params.page -= 1;
+      this.currentIndex += this.params.size;
+      this.getListTop();
+    },
+
+    /* 点击目标详情/空间维度事件 */
     clickImage(item) {
       if (this.labelCheck === "aim") {
         this.labelCheck = "aria";
@@ -457,7 +559,7 @@ export default {
           this.scrollToCurrentImage();
           this.updateRects();
         } else {
-          this.loadMoreImages();
+          this.loadMoreBottomImages();
         }
       }
     },
@@ -618,7 +720,7 @@ export default {
     }
 
     .el-select {
-      width: 10rem;
+      width: 8rem;
 
       .el-input--small .el-input__inner {
         color: #ffffff;
@@ -674,6 +776,7 @@ export default {
 
   .image-info {
     width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
   }
 }
 
@@ -694,6 +797,7 @@ export default {
 
   > div {
     cursor: pointer;
+    white-space: nowrap;
     position: absolute;
     top: -1.2rem;
   }
@@ -703,7 +807,7 @@ export default {
 .rect-image {
   width: 80%;
   position: absolute;
-  bottom: 0;
+  top: 0;
 }
 
 .image-viewer {

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-13 15:09:42
+ * @LastEditTime: 2024-11-14 13:12:32
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
  * @Description: 病害巡检-病害日志
 -->
@@ -151,10 +151,8 @@
 <script>
 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",
-  components: { vueSeamlessScroll },
   props: {
     // 病害巡检中4种类型点击绑定
     bottomTipClick: {
@@ -187,17 +185,6 @@ export default {
         { label: "已修复", value: "2" },
         { label: "未修复", value: "1" },
       ],
-      // 轮播配置
-      defaultOption: {
-        step: 0.2, // 数值越大速度滚动越快
-        limitMoveNum: 1,
-        hoverStop: true, // 是否开启鼠标悬停stop
-        direction: 1, // 0向下 1向上 2向左 3向右
-        openWatch: true, // 开启数据实时监控刷新dom
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
-        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
-      },
       // 事件列表
       emergencyList: [],
       // 分页数据绑定
@@ -274,11 +261,26 @@ export default {
       };
       emergencyData(data).then(({ code, data }) => {
         if (code === 200) {
-          this.tableTotal = data.length;
+          this.emergencyList = data.rows;
-          this.emergencyList = data;
+          this.tableTotal = data.total;
         }
       });
     },
+
+    /* 点击表格详情事件 */
+    detailDefect(item) {
+      this.$emit("imagePoint", {
+        snapshotId: item.snapshotId,
+        segmentId: item.segmentId,
+        tablePoint: [item.coordinates[0], item.coordinates[1]],
+      });
+    },
+
+    /* 页码修改事件 */
+    handleCurrentChange(age) {
+      this.pagination.page = age;
+      this.getData();
+    },
   },
 };
 </script>

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-13 14:11:57
+ * @LastEditTime: 2024-11-14 17:26:53
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -73,6 +73,7 @@
               :select="item.select"
               :is="item.component"
               :bottomTipClick="bottomTipClick"
+              @imagePoint="getimagePoint"
             ></component
           ></template>
           <template slot="operation" v-if="item.selectIsShow">
@@ -89,7 +90,7 @@
       </div>
       <div class="road-content">
         <!-- 地图右上角多选框切换坐标类型 -->
-        <!-- <div class="road-checkBox">
+        <div class="road-checkBox" v-if="showIconList">
           <fssm-scroll class="road-scroll">
             <el-checkbox-group v-model="iconType" @change="handleChecked">
               <el-checkbox
@@ -100,7 +101,7 @@
               >
             </el-checkbox-group>
           </fssm-scroll>
-        </div> -->
+        </div>
         <!-- 地图图例 -->
         <div class="map-legend"></div>
         <!-- 图片背景 -->
@@ -141,10 +142,10 @@
           ref="roadMap"
           :showChange="true"
           :controlStyle="{ top: '10%', left: '26%' }"
-          @map-moveend="mapMoveend"
-          @map-zoom="getZoom"
           @feature-select="featureSelect"
+          @map-zoom="getZoom"
         ></fssm-map>
+        <!-- @map-moveend="mapMoveend" -->
       </div>
     </div>
     <div class="screen-footer">
@@ -176,7 +177,7 @@
         ></div>
       </div>
     </div>
-    <!-- 图片弹窗 -->
+    <!-- 详情图片弹窗 -->
     <el-dialog
       :title="imgTitle"
       :visible.sync="imgVisible"
@@ -186,7 +187,11 @@
       destroy-on-close
       @close="imgCancel"
     >
-      <img-dialog></img-dialog>
+      <img-dialog
+        v-if="imgTitle === '查看'"
+        :imageItem="imageItem"
+        :bottomTipClick="bottomTipClick"
+      ></img-dialog>
     </el-dialog>
 
     <!-- 查看点位图片弹窗 -->
@@ -218,6 +223,14 @@
 </template>
 
 <script>
+// websocket
+import {
+  connectWebsocket,
+  closeWebsocket,
+  sendMsg,
+} from "@/plugins/websocket.js";
+// 登陆人信息
+import { getToken } from "@/utils/auth.js";
 // 地图
 import FssmMap from "@/components/map/fssm-map.vue";
 import { Feature } from "ol";
@@ -253,7 +266,6 @@ import {
   getItemTypes,
   getRoadListTypes,
 } from "@/api/xj/screen/index";
-import { DefectType } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "BigScreen",
   components: {
@@ -336,27 +348,33 @@ export default {
       ],
       // 图片背景下打点坐标数据
       mapCareList: [],
-      // 切换地图图标类别按钮
+
-      changeMapBtn: [
-        { name: "路面", click: "1" },
-        { name: "交安", click: "2" },
-        { name: "道桥", click: "3" },
-        { name: "绿化", click: "4" },
-      ],
       // 具体icon类别
       iconTypeList: [],
       // icon类别绑定
       iconType: [],
+      // 地图右上角多选显隐控制
+      showIconList: false,
+
       // 图片背景下病害类型下拉选择绑定
       mapCareSelect: "",
       // 图片背景下病害类型下拉选择数据
       dieaseTypeList: [],
       // 路段下拉绑定
       roadList: [],
-      // 路段选择绑定
+      // 地图打点-路段绑定
       roadSelect: "",
+
       // 图标类别切换标识
       bottomTipClick: "1",
+      // 切换地图图标类别按钮
+      changeMapBtn: [
+        { name: "路面", click: "1" },
+        { name: "交安", click: "2" },
+        { name: "桥隧", click: "3" },
+        { name: "绿化", click: "4" },
+      ],
+
       // 中间展示的动态组件绑定
       elementDiv: "OverviewScreen",
       // 下方三个按钮数据
@@ -365,6 +383,7 @@ export default {
         { name: "病害巡检", component: "DiseaseScreen" },
         { name: "道路资产", component: "RoadScreen" },
       ],
+
       // 中心点集合(全部)
       centerPiont: [],
       // 中心点集合（当前）
@@ -379,15 +398,19 @@ export default {
       clusters: null,
       // 线段图层
       markLayerLines: null,
+
       // 图片弹窗标题
       imgTitle: "查看",
       // 图片弹窗显隐控制
       imgVisible: false,
-      // 查看点位图片数据
+      // 传图片弹窗数据
+      imageItem: {},
+
+      // 查看大图点位图片数据
       screenImage: {},
-      // 查看点位图片弹窗显隐控制
+      // 查看大图点位图片弹窗显隐控制
       showImageDialog: false,
-      // 查看点位图片弹窗红框数据
+      // 查看大图点位图片弹窗红框数据
       screenRects: [],
     };
   },
@@ -397,6 +420,7 @@ export default {
     this.getMapCare();
     this.getRoadList();
     this.getDieaseTypeList();
+    // this.initWebSocket();
   },
   methods: {
     /* 获取当前时间 */
@@ -452,7 +476,7 @@ export default {
 
     /* 获取图片背景左上角病害类型下拉 */
     getDieaseTypeList() {
-      DefectType().then(({ code, data }) => {
+      getItemTypes().then(({ code, data }) => {
         if (code === 200) {
           this.dieaseTypeList = data;
         }
@@ -468,13 +492,25 @@ export default {
       });
     },
 
-    /* 点击病害筛查 */
+    /* 点击病害日志详情打开弹窗进行地图打点 */
-    clickImg() {
+    getimagePoint(item) {
+      this.imgTitle = "查看";
+      this.imageItem = item;
       this.imgVisible = true;
+      // 地图打点\改变地图层级
+      this.$nextTick(() => {
+        const map = this.$refs.roadMap.instance.get("map");
+        map.getView().setCenter(item.tablePoint);
+        map.getView().setZoom(16);
+      });
+      this.roadSelect = item.segmentId;
+      this.getCenterPiont();
     },
 
     /* 关闭图片查看弹窗 */
     imgCancel() {
+      this.imgTitle = "";
+      this.imageItem = {};
       this.imgVisible = false;
     },
 
@@ -507,7 +543,8 @@ export default {
         });
       }
       mapPointList({
-        type: this.bottomTipClick,
+        type: this.elementDiv,
+        classType: this.bottomTipClick,
         segmentId: this.roadSelect,
       }).then(({ code, data }) => {
         if (code === 200) {
@@ -564,8 +601,8 @@ export default {
         features.push(feature);
       });
       const clusterSource = new Cluster({
-        distance: this.mapZoom > 15 ? 0 : 130,
+        distance: this.mapZoom > 15 ? 0 : 100,
-        minDistance: this.mapZoom > 15 ? 0 : 130,
+        minDistance: this.mapZoom > 15 ? 0 : 100,
         source: new VectorSource({
           features,
         }),
@@ -636,12 +673,14 @@ export default {
 
     /* 获取地图线段点位信息 */
     getLinePoint() {
-      mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => {
+      if (!this.markLayerLines) {
+        mapPciList().then(({ code, data }) => {
           if (code === 200) {
             this.lineString = data;
             this.drawLine();
           }
         });
+      }
     },
 
     /* 绘制地图线段 */
@@ -696,13 +735,16 @@ export default {
     changeIconType(value) {
       if (this.bottomTipClick !== value) {
         this.bottomTipClick = value;
+        this.getIconType();
+        this.getCenterPiont();
       }
     },
 
     /* 获取icon多选数据 */
-    getIconType(value) {
+    getIconType() {
+      const type = this.elementDiv === "RoadScreen" ? "" : this.bottomTipClick;
       this.mapLogeList = {};
-      getItemTypes({ type: value }).then(({ code, data }) => {
+      getItemTypes({ classType: type }).then(({ code, data }) => {
         if (code === 200) {
           this.iconTypeList = data;
           this.iconType = data.map((item) => {
@@ -717,33 +759,39 @@ export default {
 
     /* 传回来的地图图层 */
     getZoom(zoom) {
-      if (zoom === "11" && this.mapZoom !== zoom) {
       this.mapZoom = zoom;
-        this.$nextTick(() => {
+      // if (zoom === "11" && this.mapZoom !== zoom) {
-          const map = this.$refs.roadMap.instance.get("map");
+      //   this.mapZoom = zoom;
-          map.removeLayer(this.markLayerLines);
+      //   this.$nextTick(() => {
-          this.markLayerLines = null;
+      //     const map = this.$refs.roadMap.instance.get("map");
-        });
+      //     map.removeLayer(this.markLayerLines);
-        this.getLinePoint();
+      //     this.markLayerLines = null;
-      } else if (zoom === "10" && this.mapZoom !== zoom) {
+      //   });
-        this.mapZoom = zoom;
+      //   this.getLinePoint();
-        this.$nextTick(() => {
+      // } else if (zoom === "10" && this.mapZoom !== zoom) {
-          const map = this.$refs.roadMap.instance.get("map");
+      //   this.mapZoom = zoom;
-          map.removeLayer(this.markLayerLines);
+      //   this.$nextTick(() => {
-          this.markLayerLines = null;
+      //     const map = this.$refs.roadMap.instance.get("map");
-        });
+      //     map.removeLayer(this.markLayerLines);
-        this.getLinePoint();
+      //     this.markLayerLines = null;
+      //   });
+      //   this.getLinePoint();
+      // }
+      if (this.clusters && zoom * 1 > 15) {
+        this.clusters.getSource().setDistance(0);
+      } else if (this.clusters && zoom * 1 <= 15) {
+        this.clusters.getSource().setDistance(100);
       }
     },
 
     /* 地图缩放完成事件 */
-    mapMoveend(zoom) {
+    // mapMoveend(zoom) {
-      if (this.clusters && zoom * 1 > 15) {
+    //   if (this.clusters && zoom * 1 > 15) {
-        this.clusters.getSource().setDistance(0);
+    //     this.clusters.getSource().setDistance(0);
-      } else if (this.clusters && zoom * 1 <= 15) {
+    //   } else if (this.clusters && zoom * 1 <= 15) {
-        this.clusters.getSource().setDistance(130);
+    //     this.clusters.getSource().setDistance(100);
-      }
+    //   }
-    },
+    // },
 
     /* 地图选中feature事件 */
     featureSelect(e) {
@@ -782,7 +830,10 @@ export default {
     changeElement(item) {
       if (this.elementDiv !== item) {
         this.elementDiv = item.component;
+        this.roadSelect = "";
         if (item.component === "OverviewScreen") {
+          /* 清空线段图层 */
+          this.markLayerLines = null;
           this.leftModuleList = [
             {
               width: "100%",
@@ -828,6 +879,10 @@ export default {
               class: "twe",
             },
           ];
+          // 地图右上角多选按钮隐藏
+          this.showIconList = false;
+          // 图层恢复
+          this.mapZoom="";
         } else if (item.component === "RoadScreen") {
           this.leftModuleList = [
             {
@@ -867,6 +922,17 @@ export default {
               class: "twe",
             },
           ];
+          this.$nextTick(() => {
+            const map = this.$refs.roadMap.instance.get("map");
+            map.getView().setZoom(10);
+            map.getView().setCenter([123.30297096718999, 41.87942945541742]);
+          });
+          // 地图右上角多选按钮显示
+          this.getIconType();
+          this.showIconList = true;
+          // 进行地图打点
+          this.getCenterPiont();
+          this.getLinePoint();
         } else if (item.component === "DiseaseScreen") {
           this.leftModuleList = [
             {
@@ -906,6 +972,17 @@ export default {
               class: "one",
             },
           ];
+          this.$nextTick(() => {
+            const map = this.$refs.roadMap.instance.get("map");
+            map.getView().setZoom(10);
+            map.getView().setCenter([123.30297096718999, 41.87942945541742]);
+          });
+          // 地图右上角多选按钮显示
+          this.getIconType();
+          this.showIconList = true;
+          // 进行地图打点
+          this.getCenterPiont();
+          this.getLinePoint();
         }
       }
     },
@@ -957,9 +1034,33 @@ export default {
         boxSizing: "border-box",
       };
     },
+
+    /* 初始化websocket */
+    initWebSocket() {
+      const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
+      const data = { type: "carLocation", status: true };
+      connectWebsocket(
+        url,
+        data,
+        (res) => {
+          // console.log("onWsMessage接收到服务器的数据: ", res);
+          console.log(JSON.parse(res));
+        },
+        (err) => {
+          console.log("断开重连");
+        }
+      );
+    },
+
+    /* 发送消息 */
+    sendMsg() {
+      sendMsg(5555); //value是发送的值
+      // this.value = "";
+    },
   },
   beforeDestroy() {
     clearInterval(this.timeFlag);
+    closeWebsocket();
   },
 };
 </script>

src/views/big-screen/overview-components/disease-trends.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:16:30
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-24 17:09:27
+ * @LastEditTime: 2024-11-14 15:49:52
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
  * @Description: 总览大屏-病害趋势
 -->
@@ -44,12 +44,12 @@ export default {
       const yData1 = this.echartList.map((item) => {
         return item.A1000;
       });
-      const yData2 = this.echartList.map((item) => {
+      // const yData2 = this.echartList.map((item) => {
-        return item.A2001;
+      //   return item.A2001;
-      });
+      // });
-      const yData3 = this.echartList.map((item) => {
+      // const yData3 = this.echartList.map((item) => {
-        return item.A2000;
+      //   return item.A2000;
-      });
+      // });
       const yData4 = this.echartList.map((item) => {
         return item.A0;
       });
@@ -167,8 +167,66 @@ export default {
             },
             data: yData1,
           },
+          // {
+          //   name: "块状修补(沥青)",
+          //   type: "line",
+          //   smooth: true,
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0,
+          //         color: "#08B4A6",
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: "rgba(8,180,166,0)",
+          //       },
+          //     ]),
+          //   },
+          //   lineStyle: {
+          //     width: 1,
+          //     color: "#08B4A6",
+          //   },
+          //   // 设置节点样式
+          //   showSymbol: false,
+          //   symbol: "circle", // 可以选择 circle, diamond, pin 等
+          //   symbolSize: 10, // 节点大小
+          //   itemStyle: {
+          //     color: "#08B4A6",
+          //   },
+          //   data: yData2,
+          // },
+          // {
+          //   name: "条状修补(沥青)",
+          //   type: "line",
+          //   smooth: true,
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0,
+          //         color: "#146fd7",
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: "rgba(20, 111, 215,0)",
+          //       },
+          //     ]),
+          //   },
+          //   lineStyle: {
+          //     width: 1,
+          //     color: "#146fd7",
+          //   },
+          //   // 设置节点样式
+          //   showSymbol: false,
+          //   symbol: "circle", // 可以选择 circle, diamond, pin 等
+          //   symbolSize: 10, // 节点大小
+          //   itemStyle: {
+          //     color: "#146fd7",
+          //   },
+          //   data: yData3,
+          // },
           {
-            name: "块状修补(沥青)",
+            name: "横向裂缝",
             type: "line",
             smooth: true,
             areaStyle: {
@@ -194,64 +252,6 @@ export default {
             itemStyle: {
               color: "#08B4A6",
             },
-            data: yData2,
-          },
-          {
-            name: "条状修补(沥青)",
-            type: "line",
-            smooth: true,
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "#146fd7",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(20, 111, 215,0)",
-                },
-              ]),
-            },
-            lineStyle: {
-              width: 1,
-              color: "#146fd7",
-            },
-            // 设置节点样式
-            showSymbol: false,
-            symbol: "circle", // 可以选择 circle, diamond, pin 等
-            symbolSize: 10, // 节点大小
-            itemStyle: {
-              color: "#146fd7",
-            },
-            data: yData3,
-          },
-          {
-            name: "横向裂缝",
-            type: "line",
-            smooth: true,
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "#994EFF",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(153,78,255,0)",
-                },
-              ]),
-            },
-            lineStyle: {
-              width: 1,
-              color: "#994EFF",
-            },
-            // 设置节点样式
-            showSymbol: false,
-            symbol: "circle", // 可以选择 circle, diamond, pin 等
-            symbolSize: 10, // 节点大小
-            itemStyle: {
-              color: "#994EFF",
-            },
             data: yData4,
           },
           {

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-13 13:23:21
+ * @LastEditTime: 2024-11-14 15:54:12
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
  * @Description: 总览大屏-巡检车辆
 -->
@@ -29,6 +29,7 @@
           ><el-button
             slot="append"
             icon="el-icon-search"
+            clearable
             @click="getTableData"
           ></el-button
         ></template>
@@ -42,7 +43,7 @@
         height="285"
       >
         <el-table-column prop="plateNo" label="车牌号码"> </el-table-column>
-        <el-table-column prop="serverStatus" label="状态"> </el-table-column>
+        <el-table-column prop="status" label="状态"> </el-table-column>
         <el-table-column prop="pci" label="操作">
           <template slot-scope="scope">
             <el-popover
@@ -57,19 +58,19 @@
                   <span class="value">{{ scope.row.plateNo }}</span>
                 </div>
                 <div>
-                  <span class="name">设备编号</span>
+                  <span class="name">设备编号:</span>
                   <span class="value">{{ scope.row.appid }}</span>
                 </div>
                 <div>
-                  <span class="name">车辆状态</span>
+                  <span class="name">车辆状态:</span>
+                  <span class="value">{{ scope.row.status }}</span>
+                </div>
+                <div>
+                  <span class="name">网络连接:</span>
                   <span class="value"></span>
                 </div>
                 <div>
-                  <span class="name">网络连接</span>
+                  <span class="name">设备状态:</span>
-                  <span class="value"></span>
-                </div>
-                <div>
-                  <span class="name">设备状态</span>
                   <span class="value"></span>
                 </div>
               </div>
@@ -149,7 +150,7 @@ export default {
   methods: {
     /* 获取表格数据 */
     getTableData() {
-      getCarList().then(({ code, data }) => {
+      getCarList({ no: this.tableInput }).then(({ code, data }) => {
         if (code === 200) {
           this.carNum = data.total;
           this.tableTotal = data.total;

src/views/big-screen/overview-components/patrol-order.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:25:29
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-13 14:01:48
+ * @LastEditTime: 2024-11-14 16:16:56
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
  * @Description: 总览大屏-巡查里程
 -->
@@ -11,20 +11,47 @@
   <div class="content">
     <div class="patrol-div">
       <div class="value">
-        <span>{{ formatNumber(patrolObject.len) }}</span
+        <span @click="showDetail">{{ formatNumber(patrolObject.len) }}</span
         >km
       </div>
     </div>
     <div class="patrol-div">
       <div class="value">
-        <span>{{ formatTime(patrolObject.time) }}</span
+        <span @click="showDetail">{{ formatTime(patrolObject.time) }}</span
         >h
       </div>
     </div>
+    <!-- 巡查里程弹窗 -->
+    <el-dialog
+      title="巡查里程总览"
+      :visible.sync="showDialogVisible"
+      width="50rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="screenCancel"
+    >
+      <div class="patrol-content">
+        <el-select
+          :popper-append-to-body="false"
+          v-model="companySelect"
+          placeholder="请选择分公司"
+        >
+          <el-option
+            v-for="item in companyList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <div ref="patrolChart" class="dialog-div"></div>
+      </div>
+    </el-dialog>
   </div>
 </template>
   
   <script>
+import * as echarts from "echarts";
 import { getMileage } from "@/api/xj/screen/disease-screen";
 export default {
   name: "PatrolOrder",
@@ -32,6 +59,12 @@ export default {
     return {
       // 累计里程数据
       patrolObject: {},
+      // 弹窗显隐控制
+      showDialogVisible: false,
+      // 公司选择绑定
+      companySelect: "",
+      // 公司下拉绑定
+      companyList: [],
     };
   },
   created() {
@@ -62,7 +95,7 @@ export default {
     },
 
     /* 累计时长修改 */
-    formatTime(num){
+    formatTime(num) {
       if (num >= 100000000) {
         // 超过1亿显示 x.xx亿
         return (num / 100000000).toFixed(2) + "亿";
@@ -73,7 +106,161 @@ export default {
         // 小于1万直接返回原数字
         return num;
       }
+    },
+
+    /* 打开弹窗方法 */
+    showDetail() {
+      this.showDialogVisible = true;
+      this.getChartData();
+    },
+
+    /* 请求弹窗数据 */
+    getChartData() {
+      this.$nextTick(() => {
+        this.drawChart();
+      });
+    },
+
+    /* 绘制echart图 */
+    drawChart() {
+      if (this.$refs.patrolChart) {
+        const chart = echarts.init(this.$refs.patrolChart);
+        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: "0%",
+            bottom: "10%",
+            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: ["dsds", "4ds", "5454", "sff"],
+          },
+          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: [10, 25, 23, 58],
+            },
+            {
+              barWidth: 10,
+              name: "巡查时长",
+              type: "bar",
+              data: [10, 25, 23, 58],
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+
+    /* 弹窗关闭 */
+    screenCancel() {
+      this.showDialogVisible = false;
+    },
   },
 };
 </script>
@@ -101,11 +288,84 @@ export default {
 
     .value {
       span {
+        cursor: pointer;
         font-family: "DouYu";
         font-size: 1.4rem;
       }
     }
   }
 }
+
+// 弹窗内容样式
+.patrol-content {
+  height: 30rem;
+  padding: 0 2rem;
+
+  ::v-deep .el-select {
+    width: 12rem;
+
+    .el-input .el-select__caret {
+      line-height: 1.5rem;
+    }
+
+    .el-input--medium .el-input__inner {
+      height: 1.5rem;
+      background-color: transparent;
+      color: #89c5e8;
+      border-color: #6991cd;
+    }
+
+    .el-select-dropdown {
+      background-color: #102649;
+      border-color: #08204f;
+      .el-scrollbar {
+        .el-select-dropdown__wrap {
+          .el-scrollbar__view {
+            .el-select-dropdown__item {
+              color: #aaabb8;
+            }
+
+            .el-select-dropdown__item:hover {
+              background-color: #2b4c7e;
+            }
+
+            .el-select-dropdown__item.selected {
+              background-color: #2b4c7e;
+            }
+
+            .el-select-dropdown__item.hover {
+              background-color: #2b4c7e;
+            }
+          }
+
+          .el-select-dropdown__list {
+            background-color: #102649;
+          }
+        }
+      }
+    }
+  }
+
+  .dialog-div {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* 修改弹窗样式 */
+::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>
   

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-11-13 13:38:46
+ * @LastEditTime: 2024-11-14 15:48:21
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
  * @Description: 总览大屏-今日巡查
 -->
@@ -10,10 +10,10 @@
 <template>
   <div class="content">
     <div class="today-left">
-      <span>{{ today }}</span>
+      <span @click="showDialog('1')">{{ today }}</span>
     </div>
     <div class="today-right">
-      <div class="right-sum" @click="showDialog">
+      <div class="right-sum" @click="showDialog('2')">
         <span>{{ all }}</span
         >个
       </div>
@@ -33,9 +33,41 @@
       @close="screenCancel"
     >
       <div class="today-content">
+        <div class="today-select">
+          <div>
+            <el-select
+              :popper-append-to-body="false"
+              v-model="roadSelect"
+              placeholder="请选择路段"
+            >
+              <el-option
+                v-for="item in roadList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          <div>
+            <el-select
+              :popper-append-to-body="false"
+              v-model="companySelect"
+              placeholder="请选择分公司"
+            >
+              <el-option
+                v-for="item in companyList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+        </div>
+        <div class="today-bottom">
           <div ref="leftChart" class="dialog-div"></div>
           <div ref="rightChart" class="dialog-div"></div>
         </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -53,10 +85,20 @@ export default {
       all: "0",
       // 增长率
       scale: "0",
+      // 新增/当前总数区分
+      clickTip: "",
       // 弹窗显隐控制
       showDialogVisible: false,
+      // 左侧路段选择绑定
+      roadSelect: "",
+      // 左侧路段下拉数据
+      roadList: [],
       // 左侧图表数据
       leftChartData: [],
+      // 右侧公司选择绑定
+      companySelect: "",
+      // 右侧公司选择下拉
+      companyList: [],
       // 右侧图表数据
       rightChartData: [],
     };
@@ -77,7 +119,8 @@ export default {
     },
 
     /* 点击打开弹窗 */
-    showDialog() {
+    showDialog(item) {
+      this.clickTip = item;
       this.getChartData();
       this.showDialogVisible = true;
     },
@@ -241,7 +284,7 @@ export default {
             },
             {
               barWidth: 10,
-              name: "道桥",
+              name: "桥隧",
               type: "bar",
               data: y2Data,
             },
@@ -389,7 +432,7 @@ export default {
             },
             {
               barWidth: 10,
-              name: "道桥",
+              name: "桥隧",
               type: "bar",
               data: y2Data,
             },
@@ -409,6 +452,7 @@ export default {
 
     /* 关闭 弹窗事件 */
     screenCancel() {
+      this.clickTip = "";
       this.showDialogVisible = false;
     },
   },
@@ -435,6 +479,7 @@ export default {
     background-position: 100% 60%;
 
     span {
+      cursor: pointer;
       font-size: 2rem;
       font-weight: 800;
       font-family: "DouYu";
@@ -520,12 +565,75 @@ export default {
 .today-content {
   height: 30rem;
   display: flex;
+  flex-direction: column;
+
+  .today-select {
+    width: 100%;
+    // height: 10%;
+    display: flex;
+
+    > div {
+      width: 50%;
+      padding: 0 2rem;
+
+      ::v-deep .el-select {
+        width: 12rem;
+
+        .el-input .el-select__caret {
+          line-height: 1.5rem;
+        }
+
+        .el-input--medium .el-input__inner {
+          height: 1.5rem;
+          background-color: transparent;
+          color: #89c5e8;
+          border-color: #6991cd;
+        }
+
+        .el-select-dropdown {
+          background-color: #102649;
+          border-color: #08204f;
+          .el-scrollbar {
+            .el-select-dropdown__wrap {
+              .el-scrollbar__view {
+                .el-select-dropdown__item {
+                  color: #aaabb8;
+                }
+
+                .el-select-dropdown__item:hover {
+                  background-color: #2b4c7e;
+                }
+
+                .el-select-dropdown__item.selected {
+                  background-color: #2b4c7e;
+                }
+
+                .el-select-dropdown__item.hover {
+                  background-color: #2b4c7e;
+                }
+              }
+
+              .el-select-dropdown__list {
+                background-color: #102649;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .today-bottom {
+    width: 100%;
+    height: 100%;
+    display: flex;
 
     .dialog-div {
       width: 50%;
-    height: 100%;
+      height: 90%;
       margin: 0 1rem;
     }
+  }
 }
 
 /* 修改弹窗样式 */

src/views/xj/inspection/confirmation-management/components/image-dialog.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-01 17:25:06
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-04 16:29:02
+ * @LastEditTime: 2024-11-14 15:00:35
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\image-dialog.vue
  * @Description: 病害确认-影像模式弹窗
 -->
@@ -157,8 +157,9 @@ import {
   getSegment,
   getDefectStatus,
   mergeDefect,
+  listDefect,
 } from "@/api/xj/confirmation";
-import { defeaseList, getItemTypes } from "@/api/xj/screen/index";
+import { getItemTypes } from "@/api/xj/screen/index";
 export default {
   name: "ImageDialog",
   props: {},
@@ -260,15 +261,19 @@ export default {
 
     /* 获取左侧图片列表 */
     getList() {
+      console.log(11);
+      
       this.loading = true;
       const data = {
         ...this.imgForm,
         ...this.params,
       };
-      defeaseList(data)
+      listDefect(data)
-        .then((response) => {
+        .then(({ code,rows }) => {
-          this.defectData = response.data;
+          if (code === 200) {
+            this.defectData = rows;
             this.loading = false;
+          }
         })
         .catch(() => {
           this.loading = false;

src/views/xj/inspection/surface-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 13:59:51
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-07 16:46:43
+ * @LastEditTime: 2024-11-14 15:26:15
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\index.vue
  * @Description: 巡检管理-路面病害对比
 -->
@@ -267,6 +267,7 @@ export default {
           return it.snapshotId === item.data.snapshotId;
         });
         this.dialogImgLeft = leftImg[0];
+        
       }
       this.viewVisible = true;
     },