fix：大屏首页逻辑增加

src/api/xj/index/index.js

@@ -0,0 +1,28 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-15 11:05:34
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-15 11:18:36
+ * @FilePath: \znxjxt-ui\src\api\xj\index\index.js
+ * @Description: 内部首页接口
+ */
+
+import request from "@/utils/request";
+
+// 获取首页最顶端数据
+export function getTotalCount(query) {
+  return request({
+    url: "/xj/home/getTotalCount",
+    method: "get",
+    params: query,
+  });
+}
+
+// 获取日常巡查数据
+export function getTaskToday(query) {
+  return request({
+    url: "/xj/home/getTaskToday",
+    method: "get",
+    params: query,
+  });
+}

src/api/xj/screen/disease-screen.js

@@ -98,3 +98,24 @@ export function getCarList(query) {
     params: query,
   });
 }
+
+
+// 获取设备直播的url地址
+export function getVideoUrl(params) {
+  return request({
+    url: "/bigscreen/v2/getAiotVideoUrl",
+    method: "get",
+    params,
+  });
+}
+
+// 关闭设备的上传视频流
+export function closeVideoUrl(params) {
+  return request({
+    url: "/bigscreen/v2/colseAiotVideo",
+    method: "get",
+    params,
+  });
+}
+
+

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-14 09:16:02
+ * @LastEditTime: 2024-11-15 14:57: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
+ * @Description: 大屏首页接口 
  */
 import request from "@/utils/request";
 

src/views/big-screen/overview-components/components/inspection-follow.vue

@@ -0,0 +1,127 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-15 13:14:03
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-15 14:06:48
+ * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
+ * @Description: 总览大屏-巡检车辆-跟车弹窗
+-->
+
+<template>
+  <div class="inspection-content">
+    <fssm-map ref="carMap" :baseMap="'img_c'"></fssm-map>
+  </div>
+</template>
+
+<script>
+// websocket
+import {
+  connectWebsocket,
+  closeWebsocket,
+  sendMsg,
+} from "@/plugins/websocket.js";
+import { getToken } from "@/utils/auth.js";
+import logo from "@/assets/xc.png";
+import FssmMap from "@/components/map/fssm-map.vue";
+import { Point } from "ol/geom";
+import { Feature } from "ol";
+import { Style, Icon } from "ol/style";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+
+export default {
+  name: "InspectionFollow",
+  components: {
+    FssmMap,
+  },
+  data() {
+    return {};
+  },
+  created() {
+    this.initWebSocket();
+  },
+  methods: {
+    /* 初始化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("断开重连");
+            this.drawPoint();
+        }
+      );
+    },
+
+    /* 发送消息 */
+    sendMsg() {
+      sendMsg(5555); //value是发送的值
+      // this.value = "";
+    },
+
+    /* 绘制地图车点位 */
+    drawPoint() {
+      const features = [];
+      // 修改坐标样式
+      const point = new Point([123.30297096718999,41.87942945541742]);
+      const feature = new Feature({
+        geometry: point,
+        data: {
+          iconType: "1",
+        //   imageUrl: element.imageUrl,
+        //   rect: element.rect,
+        },
+        // 自己设置一个标识
+        type: "icon",
+      });
+      // 可以给点位设置样式
+      feature.setStyle([
+        new Style({
+          image: new Icon({
+            crossOrigin: "anonymous",
+            src: logo,
+            // 图标缩放比例
+            scale: 0.05,
+          }),
+        }),
+      ]);
+      features.push(feature);
+      //设置地图的数据源
+      const pointSource = new VectorSource({
+        features,
+      });
+      let markLayerPoints = new VectorLayer({
+        source: pointSource,
+        properties: {
+          type: "point",
+        },
+      });
+      this.$nextTick(() => {
+        const map = this.$refs.carMap.instance.get("map");
+        map.addLayer(markLayerPoints);
+      });
+    },
+    beforeDestroy() {
+      closeWebsocket();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.inspection-content {
+  width: 100%;
+  height: 45rem;
+
+  ::v-deep .baseLayerClass {
+    filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
+      brightness(80%) saturate(550%);
+  }
+}
+</style>

src/views/big-screen/overview-components/components/inspection-view.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-15 14:23:21
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-15 15:06:55
+ * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
+ * @Description: 总览大屏-巡检车辆-视频查看弹窗
+-->
+
+<template>
+  <div class="view-content"></div>
+</template>
+
+<script>
+import { getVideoUrl } from "@/api/xj/screen/disease-screen";
+export default {
+  name: "InspectionView",
+  props: {
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // 视频播放地址
+      vedioUrl: "",
+    };
+  },
+  created() {
+    this.getVideo();
+  },
+  methods: {
+    /* 获取视频url地址 */
+    getVideo() {
+      console.log(this.dialogItem);
+      getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
+        if (code === 200) {
+            
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.view-content {
+  width: 100%;
+  height: 40rem;
+}
+</style>

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-14 15:54:12
+ * @LastEditTime: 2024-11-15 15:29:10
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
  * @Description: 总览大屏-巡检车辆
 -->
@@ -85,7 +85,6 @@
             </el-popover>
 
             <el-button
-              disabled
               size="mini"
               type="text"
               @click="followCar(scope.row)"
@@ -93,7 +92,6 @@
               >跟车
             </el-button>
             <el-button
-              disabled
               size="mini"
               type="text"
               @click="videoDelete(scope.row)"
@@ -118,13 +116,48 @@
         </el-pagination>
       </div> -->
     </div>
+    <!-- 跟车弹窗 -->
+    <el-dialog
+      :title="followTitle"
+      :visible.sync="showCarVisible"
+      width="85rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="followCancel"
+    >
+      <inspection-follow v-if="followTitle === '跟车详情'"></inspection-follow>
+    </el-dialog>
+
+    <!-- 视频弹窗 -->
+    <el-dialog
+      :title="viewTitle"
+      :visible.sync="showViewVisible"
+      width="60rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="viewCancel"
+    >
+      <inspection-view
+        v-if="viewTitle === '视频查看'"
+        :dialogItem="dialogItem"
+      ></inspection-view>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCarList } from "@/api/xj/screen/disease-screen";
+import { getCarList, closeVideoUrl } from "@/api/xj/screen/disease-screen";
+import InspectionFollow from "./components/inspection-follow.vue";
+import InspectionView from "./components/inspection-view.vue";
+import { closeWebsocket } from "@/plugins/websocket.js";
 export default {
   name: "InspectionVehicles",
+  components: {
+    InspectionFollow,
+    InspectionView,
+  },
   data() {
     return {
       // 车辆总数
@@ -142,6 +175,16 @@ export default {
       // },
       // 分页总数
       tableTotal: 0,
+      // 传弹窗数据
+      dialogItem: {},
+      // 跟车弹窗显隐控制
+      showCarVisible: false,
+      // 跟车弹窗标题
+      followTitle: "",
+      // 视频弹窗显隐控制
+      showViewVisible: false,
+      // 视频弹窗标题
+      viewTitle: "",
     };
   },
   created() {
@@ -164,16 +207,44 @@ export default {
     detailDefect(val) {},
 
     /* 表格跟车事件 */
-    followCar(val) {},
+    followCar(val) {
+      this.followTitle = "跟车详情";
+      this.showCarVisible = true;
+    },
 
     /* 表格视频事件 */
-    videoDelete(val) {},
+    videoDelete(val) {
+      this.dialogItem = val;
+      this.viewTitle = "视频查看";
+      this.showViewVisible = true;
+    },
 
     /* 页码修改事件 */
     // handleCurrentChange(arg) {
     //   this.pagination.page = arg;
     //   this.getTableData();
     // },
+
+    /* 关闭跟车弹窗事件 */
+    followCancel() {
+      this.followTitle = "";
+      this.showCarVisible = false;
+      this.dialogItem = {};
+      closeWebsocket();
+    },
+
+    /* 关闭视频弹窗事件 */
+    viewCancel() {
+      this.viewTitle = "";
+      this.showViewVisible = false;
+      closeVideoUrl({ id: this.dialogItem.clientId })
+        .then(({ code, data }) => {
+          if (code === 200) {
+            console.log(data);
+            this.dialogItem = {};
+          }
+        })
+    },
   },
 };
 </script>
@@ -313,6 +384,22 @@ export default {
     background: transparent;
   }
 }
+
+/* 修改弹窗样式 */
+::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>
 <style lang="scss">
 /* 弹出层样式 */

src/views/index-components/daily-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:12:20
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 11:47:03
+ * @LastEditTime: 2024-11-15 11:37:11
  * @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
  * @Description: 首页-日常巡查
 -->
@@ -14,13 +14,19 @@
       <div class="left">
         <div class="left-div">
           <div class="name">巡查里程</div>
-          <div class="value"><span>15.16</span>km</div>
+          <div class="value">
+            <span>{{ formatNumber(mileage) }}</span
+            >km
+          </div>
         </div>
         <div class="left-div">
           <div class="name">覆盖道路数</div>
-          <div class="value"><span>352</span>条</div>
+          <div class="value">
+            <span>{{ roadNum }}</span
+            >条
           </div>
-        <div class="left-chart" ref="rateChart"></div>
+        </div>
+        <!-- <div class="left-chart" ref="rateChart"></div> -->
       </div>
       <div class="right">
         <div ref="trendChart"></div>
@@ -31,106 +37,62 @@
 </template>
 
 <script>
+import { getTaskToday } from "@/api/xj/index/index";
 import * as echarts from "echarts";
 export default {
   name: "DailyIndex",
   data() {
-    return {};
+    return {
+      // 巡查里程
+      mileage: 0,
+      // 覆盖道路数
+      roadNum: 0,
+      // 病害趋势echart数据
+      diseaseChart: [],
+    };
   },
   created() {
     this.getData();
   },
   methods: {
+    /* 处理数据 */
+    formatNumber(num) {
+      if (num >= 100000000) {
+        // 超过1亿显示 x.xx亿
+        return (num / 100000000).toFixed(2) + "亿";
+      } else if (num >= 10000) {
+        // 超过1万显示 x.xx万
+        return (num / 10000).toFixed(2) + "万";
+      } else {
+        // 小于1万直接返回原数字
+        return num;
+      }
+    },
+
     /* 获取数据 */
     getData() {
+      getTaskToday().then(({ code, data }) => {
+        if (code === 200) {
+          this.mileage = data.xclc;
+          this.roadNum = data.fgdlts;
+          this.diseaseChart = data.xclcbhqs;
           this.$nextTick(() => {
-        this.drawLeftChart();
+            // this.drawLeftChart();
             this.drawTrendChart();
             this.drawDistributionChart();
           });
-    },
-    /* 绘制覆盖率饼图 */
-    drawLeftChart() {
-      if (this.$refs.rateChart) {
-        const chart = echarts.init(this.$refs.rateChart);
-        const current = 45;
-        chart.setOption({
-          // color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
-          title: [
-            // 中心比例
-            {
-              text: "80%",
-              x: "center",
-              y: "52%",
-              textStyle: {
-                fontSize: 20,
-                color: "#444",
-                fontWeight: "bold",
-              },
-            },
-            {
-              text: "覆盖率",
-              x: "center",
-              y: "10%",
-              textStyle: {
-                fontSize: 14,
-              },
-            },
-          ],
-          polar: {
-            center: ["50%", "60%"],
-            radius: ["40%", "58%"],
-          },
-          angleAxis: {
-            max: 100,
-            show: false,
-          },
-          radiusAxis: {
-            type: "category",
-            show: true,
-            axisLabel: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-          },
-          series: [
-            {
-              data: [80],
-              name: "",
-              type: "bar",
-              roundCap: true,
-              showBackground: true,
-              backgroundStyle: {
-                color: "#BDD5F4",
-              },
-              coordinateSystem: "polar",
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                  {
-                    offset: 0,
-                    color: "#005DCF",
-                  },
-                  {
-                    offset: 1,
-                    color: "#00CCFF",
-                  },
-                ]),
-              },
-            },
-          ],
-        });
-        window.addEventListener("resize", () => {
-          chart.resize();
-        });
         }
+      });
     },
+
     /* 绘制病害趋势柱状图 */
     drawTrendChart() {
+      const xData = this.diseaseChart.map((item) => {
+        return item.label;
+      });
+      const yData = this.diseaseChart.map((item) => {
+        return item.value;
+      });
       if (this.$refs.trendChart) {
         const chart = echarts.init(this.$refs.trendChart);
         chart.setOption({
@@ -162,7 +124,7 @@ export default {
           xAxis: [
             {
               type: "category",
-              data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
+              data: xData,
               axisTick: {
                 show: false, //隐藏X轴刻度
               },
@@ -217,23 +179,69 @@ export default {
               type: "bar",
               barWidth: 10,
               name: "累计病害",
-              data: [400, 600, 1400, 1700],
+              data: yData,
             },
             {
               type: "line",
               symbolSize: 5,
               name: "巡查里程",
               smooth: 1,
-              data: [10, 40, 50, 90],
+              data: [10, 40, 50, 90, 10, 20, 23, 54, 65, 86, 54, 48, 95],
               yAxisIndex: 1,
             },
           ],
+          dataZoom: [
+            {
+              // 设置滚动条的隐藏与显示
+              show: false,
+              // 设置滚动条类型
+              type: "slider",
+              // 设置背景颜色
+              backgroundColor: "rgba(225,225,225,0.2)",
+              // 设置选中范围的填充颜色
+              fillerColor: "#ccc",
+              // 设置边框颜色
+              borderColor: "rgba(225,225,225,0.2)",
+              // 是否显示detail，即拖拽时候显示详细数值信息
+              showDetail: false,
+              // 数据窗口范围的起始数值
+              startValue: 0,
+              // 数据窗口范围的结束数值（一页显示多少条数据）
+              endValue: 6,
+              // empty：当前数据窗口外的数据，被设置为空。
+              // 即不会影响其他轴的数据范围
+              filterMode: "empty",
+              // 设置滚动条宽度，相对于盒子宽度
+              width: "80%",
+              // 设置滚动条高度
+              height: 5,
+              // 设置滚动条显示位置
+              left: "center",
+              // 是否锁定选择区域（或叫做数据窗口）的大小
+              zoomLoxk: true,
+              // 控制手柄的尺寸
+              handleSize: 10,
+              // dataZoom-slider组件离容器下侧的距离
+              bottom: 0,
+            },
+            {
+              // 没有下面这块的话，只能拖动滚动条，
+              // 鼠标滚轮在区域内不能控制外部滚动条
+              type: "inside",
+              // 滚轮是否触发缩放
+              zoomOnMouseWheel: false,
+              // 鼠标滚轮触发滚动
+              moveOnMouseMove: true,
+              moveOnMouseWheel: true,
+            },
+          ],
         });
         window.addEventListener("resize", () => {
           chart.resize();
         });
       }
     },
+
     /* 绘制病害分布柱状图 */
     drawDistributionChart() {
       const xData = [
@@ -359,6 +367,87 @@ export default {
         });
       }
     },
+
+    /* 绘制覆盖率饼图 */
+    drawLeftChart() {
+      if (this.$refs.rateChart) {
+        const chart = echarts.init(this.$refs.rateChart);
+        const current = 45;
+        chart.setOption({
+          // color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
+          title: [
+            // 中心比例
+            {
+              text: "80%",
+              x: "center",
+              y: "52%",
+              textStyle: {
+                fontSize: 20,
+                color: "#444",
+                fontWeight: "bold",
+              },
+            },
+            {
+              text: "覆盖率",
+              x: "center",
+              y: "10%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          polar: {
+            center: ["50%", "60%"],
+            radius: ["40%", "58%"],
+          },
+          angleAxis: {
+            max: 100,
+            show: false,
+          },
+          radiusAxis: {
+            type: "category",
+            show: true,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              data: [80],
+              name: "",
+              type: "bar",
+              roundCap: true,
+              showBackground: true,
+              backgroundStyle: {
+                color: "#BDD5F4",
+              },
+              coordinateSystem: "polar",
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
   },
 };
 </script>
@@ -394,7 +483,8 @@ export default {
       background-size: 100%;
 
       .left-div {
-        height: 27.5%;
+        // height: 27.5%;
+        height: 50%;
         width: calc(100% - 2rem);
         margin: 0 1rem;
         display: flex;

src/views/index-components/traffic-index.vue

@@ -13,11 +13,11 @@
     <div class="traffic-table">
       <el-table :data="trafficTableData" style="width: 100%" height="180">
         <el-table-column type="index" label="序号"></el-table-column>
-        <el-table-column prop="date" label="路线名称" >
+        <el-table-column prop="date" label="路线名称"> </el-table-column>
-        </el-table-column>
+        <el-table-column prop="name" label="路面病害数"> </el-table-column>
-        <el-table-column prop="name" label="PCI" > </el-table-column>
+        <el-table-column prop="pci" label="交安病害数"> </el-table-column>
-        <el-table-column prop="pci" label="PCI等级" >
+        <el-table-column prop="name" label="桥隧病害数"> </el-table-column>
-        </el-table-column>
+        <el-table-column prop="name" label="绿化病害数" > </el-table-column>
       </el-table>
     </div>
     <div class="traffic-chart" ref="trafficChart"></div>
@@ -100,7 +100,18 @@ export default {
           },
           xAxis: [
             {
-              data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月"],
+              data: [
+                "1月",
+                "2月",
+                "3月",
+                "4月",
+                "5月",
+                "6月",
+                "7月",
+                "8月",
+                "9月",
+                "10月",
+              ],
               type: "category",
               axisTick: {
                 show: false, //隐藏X轴刻度

src/views/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-08 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-06 10:50:32
+ * @LastEditTime: 2024-11-15 11:16:08
  * @FilePath: \znxjxt-ui\src\views\index.vue
  * @Description: 系统首页
 -->
@@ -48,6 +48,7 @@ import DailyIndex from "./index-components/daily-index.vue";
 import DiseaseIndex from "./index-components/disease-index.vue";
 import RoadIndex from "./index-components/road-index.vue";
 import TrafficIndex from "./index-components/traffic-index.vue";
+import { getTotalCount } from "@/api/xj/index/index";
 export default {
   name: "Index",
   components: {
@@ -69,12 +70,16 @@ export default {
   methods: {
     /* 获取顶栏数据 */
     getTopData() {
+      getTotalCount().then(({ code, data }) => {
+        if (code === 200) {
           this.topList = [
-        { name: "巡查总里程", value: 54, unit: "个" },
+            { name: "路面病害总数", value: data.road, unit: "个" },
-        { name: "现存病害总数", value: 54, unit: "个" },
+            { name: "交安事件病害总数 ", value: data.event, unit: "个" },
-        { name: "公路资产总数", value: 54, unit: "个" },
+            { name: "桥隧病害总数", value: data.bridge, unit: "个" },
-        { name: "交安事件总数", value: 54, unit: "个" },
+            { name: "绿化病害总数", value: data.green, unit: "个" },
           ];
+        }
+      });
     },
   },
 };