fix：联调接口，差交安事件

src/api/xj/map.js

@@ -0,0 +1,153 @@
+// 02转84坐标
+export function gcj02ToWgs84([lng, lat]) {
+  const a = 6378245.0;
+  const ee = 0.00669342162296594323;
+  const pi = Math.PI;
+
+  if (outOfChina02(lng, lat)) {
+    return [lng, lat];
+  } else {
+    let dlat = transformLat02(lng - 105.0, lat - 35.0);
+    let dlng = transformLng02(lng - 105.0, lat - 35.0);
+    const radLat = (lat / 180.0) * pi;
+    let magic = Math.sin(radLat);
+    magic = 1 - ee * magic * magic;
+    const sqrtMagic = Math.sqrt(magic);
+    dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * pi);
+    dlng = (dlng * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * pi);
+    const mgLat = lat + dlat;
+    const mgLng = lng + dlng;
+    return [lng * 2 - mgLng, lat * 2 - mgLat];
+  }
+}
+
+function outOfChina02(lng, lat) {
+  return lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271;
+}
+
+// 经纬度转换
+function transformLat02(lng, lat) {
+  let ret =
+    -100.0 +
+    2.0 * lng +
+    3.0 * lat +
+    0.2 * lat * lat +
+    0.1 * lng * lat +
+    0.2 * Math.sqrt(Math.abs(lng));
+  ret +=
+    ((20.0 * Math.sin(6.0 * lng * Math.PI) +
+      20.0 * Math.sin(2.0 * lng * Math.PI)) *
+      2.0) /
+    3.0;
+  ret +=
+    ((20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin((lat / 3.0) * Math.PI)) *
+      2.0) /
+    3.0;
+  ret +=
+    ((160.0 * Math.sin((lat / 12.0) * Math.PI) +
+      320 * Math.sin((lat * Math.PI) / 30.0)) *
+      2.0) /
+    3.0;
+  return ret;
+}
+
+function transformLng02(lng, lat) {
+  let ret =
+    300.0 +
+    lng +
+    2.0 * lat +
+    0.1 * lng * lng +
+    0.1 * lng * lat +
+    0.1 * Math.sqrt(Math.abs(lng));
+  ret +=
+    ((20.0 * Math.sin(6.0 * lng * Math.PI) +
+      20.0 * Math.sin(2.0 * lng * Math.PI)) *
+      2.0) /
+    3.0;
+  ret +=
+    ((20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin((lng / 3.0) * Math.PI)) *
+      2.0) /
+    3.0;
+  ret +=
+    ((150.0 * Math.sin((lng / 12.0) * Math.PI) +
+      300.0 * Math.sin((lng / 30.0) * Math.PI)) *
+      2.0) /
+    3.0;
+  return ret;
+}
+
+// 84转02坐标
+export function wgs84ToGcj02([lng, lat]) {
+  if (outOfChina84(lng, lat)) {
+    return { lng, lat };
+  }
+  let dlat = transformLat84(lng - 105.0, lat - 35.0);
+  let dlng = transformLng84(lng - 105.0, lat - 35.0);
+  const radLat = (lat / 180.0) * Math.PI;
+  let magic = Math.sin(radLat);
+  magic = 1 - 0.00669342162296594323 * magic * magic;
+  const sqrtMagic = Math.sqrt(magic);
+  dlat =
+    (dlat * 180.0) /
+    (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtMagic)) *
+      Math.PI);
+  dlng =
+    (dlng * 180.0) / ((6378245.0 / sqrtMagic) * Math.cos(radLat) * Math.PI);
+  const gcjLng = lng + dlng;
+  const gcjLat = lat + dlat;
+  return [gcjLng, gcjLat];
+}
+
+// 判断是否在中国境内
+function outOfChina84(lng, lat) {
+  return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
+}
+
+// 转换公式所需的常量
+function transformLat84(x, y) {
+  let ret =
+    -100.0 +
+    2.0 * x +
+    3.0 * y +
+    0.2 * y * y +
+    0.1 * x * y +
+    0.2 * Math.sqrt(Math.abs(x));
+  ret +=
+    ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) *
+      2.0) /
+    3.0;
+  ret +=
+    ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) *
+      2.0) /
+    3.0;
+  ret +=
+    ((160.0 * Math.sin((y / 12.0) * Math.PI) +
+      320 * Math.sin((y * Math.PI) / 30.0)) *
+      2.0) /
+    3.0;
+  return ret;
+}
+
+function transformLng84(x, y) {
+  let ret =
+    300.0 +
+    x +
+    2.0 * y +
+    0.1 * x * x +
+    0.1 * x * y +
+    0.1 * Math.sqrt(Math.abs(x));
+  ret +=
+    ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) *
+      2.0) /
+    3.0;
+  ret +=
+    ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) *
+      2.0) /
+    3.0;
+  ret +=
+    ((150.0 * Math.sin((x / 12.0) * Math.PI) +
+      300.0 * Math.sin((x / 30.0) * Math.PI)) *
+      2.0) /
+    3.0;
+  return ret;
+}

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

@@ -0,0 +1,59 @@
+import request from "@/utils/request";
+
+// 路面状况排名接口
+export function roadRankList(query) {
+  return request({
+    url: "/bigscreen/getDefectCountRanking",
+    method: "get",
+    params: query,
+  });
+}
+
+// 病害趋势柱状图接口
+export function roadTrends(query) {
+    return request({
+      url: "/bigscreen/getHistoryDefect",
+      method: "get",
+      params: query,
+    });
+  }
+
+//   今日巡查数据
+  export function roadToday(query) {
+    return request({
+      url: "/bigscreen/getInspectionInfo",
+      method: "get",
+      params: query,
+    });
+  }
+
+
+  //   pci排名数据
+  export function roadPic(query) {
+    return request({
+      url: "/bigscreen/pciRanking",
+      method: "get",
+      params: query,
+    });
+  }
+
+
+//   病害趋势3维饼图
+export function roadCurrent(query) {
+    return request({
+      url: "/bigscreen/roadStatus",
+      method: "get",
+      params: query,
+    });
+  }
+
+//   数据栏内右上角下拉框
+export function getDropList(query) {
+    return request({
+      url: "/bigscreen/getDropdownList",
+      method: "get",
+      params: query,
+    });
+  }
+
+

src/api/xj/screen/index.js

@@ -0,0 +1,12 @@
+import request from "@/utils/request";
+
+// 获取数据栏右上角选择数据接口
+export function selectTypeList(query) {
+    return request({
+      url: "/bigscreen/getSwitch",
+      method: "get",
+      params: query,
+    });
+  }
+
+

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

@@ -0,0 +1,56 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-25 14:44:22
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-25 16:25:39
+ * @FilePath: \znxjxt-ui\src\api\xj\screen\road-screen.js
+ * @Description: 道路资产大屏接口
+ */
+import request from "@/utils/request";
+
+// 路面状况排名接口
+export function roadRankStatistics(query) {
+    return request({
+      url: "/bigscreen/getRoadStatistics",
+      method: "get",
+      params: query,
+    });
+  }
+
+
+//   附属设施分布接口
+export function ancillaryList(query) {
+    return request({
+      url: "/bigscreen/getEquipmentScale",
+      method: "get",
+      params: query,
+    });
+  }
+
+//   附属设施分布累计路产数
+export function ancillaryCount(query) {
+    return request({
+      url: "/bigscreen/getEquipmentCount",
+      method: "get",
+      params: query,
+    });
+  }
+
+
+// 附属设施异常统计接口
+export function anomalyList(query) {
+    return request({
+      url: "/bigscreen/getEquipmentAnomalyLog",
+      method: "get",
+      params: query,
+    });
+  }
+
+//  路产统计信息接口
+export function roadStatisticList(query) {
+    return request({
+      url: "/bigscreen/getEquipmentStatistics",
+      method: "get",
+      params: query,
+    });
+  }

src/api/xj/section.js

@@ -9,6 +9,14 @@ export function getSectionList(query) {
   });
 }
 
+// 查询路线下拉列表
+export function getSegmentList() {
+  return request({
+    url: "/xj/route/listDropDown",
+    method: "get",
+  });
+}
+
 //  新增路段
 export function addSection(query) {
   return request({

src/api/xj/task.js

@@ -2,9 +2,9 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:04:12
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-14 10:27:49
+ * @LastEditTime: 2024-10-25 13:55:51
  * @FilePath: \znxjxt-ui\src\api\xj\task.js
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: 巡检任务管理接口
  */
 import request from "@/utils/request";
 
@@ -17,6 +17,15 @@ export function getTaskTable(params) {
   });
 }
 
+// 任务id模糊查询接口
+export function getTaskIdList(params) {
+  return request({
+    url: "/xj/xjtask/taskDropDown",
+    method: "get",
+    params,
+  });
+}
+
 // 巡检路段下拉数据
 export function getSegment() {
   return request({

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-10-23 15:33:10
+ * @LastEditTime: 2024-10-24 17:17:45
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -164,6 +164,7 @@ export default {
     /* 初始化openlayer地图 */
     initMap() {
       const tianditu_vec_c = new TileLayer({
+        className: "baseLayerClass",
         title: "矢量底图",
         id: "vec_c",
         source: new XYZ({
@@ -173,6 +174,7 @@ export default {
         visible: true,
       });
       const tianditu_cva_c = new TileLayer({
+        className: "baseLayerClass",
         title: "矢量地图",
         id: "cva_c",
         source: new XYZ({

src/views/big-screen/disease-components/disease-current.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:19:56
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-23 14:32:47
+ * @LastEditTime: 2024-10-24 16:37:52
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
  * @Description: 病害巡检-病害三维饼图
 -->
@@ -31,8 +31,8 @@
         :key="`chart-${index}`"
       >
         <div class="index" :style="{ backgroundColor: colorList[index] }"></div>
-        <div class="name">{{ item.name }}</div>
+        <div class="name">{{ item.typeName }}</div>
-        <div class="rate">{{ item.value }}</div>
+        <div class="rate">{{ item.rate }}%</div>
         <div class="value">{{ item.value }}</div>
       </div>
     </div>
@@ -42,35 +42,21 @@
   <script>
 import * as echarts from "echarts";
 import "echarts-gl";
+import { roadCurrent, getDropList } from "@/api/xj/screen/disease-screen";
 export default {
   name: "DiseaseCurrent",
+  props: {
+    select: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       // 下拉框绑定
-      itemSelect: "1",
+      itemSelect: "",
       // 下拉框数据
-      currentList: [
+      currentList: [],
-        {
-          label: "分公司",
-          value: "1",
-        },
-        {
-          label: "分公司2",
-          value: "2",
-        },
-        {
-          label: "分公3",
-          value: "3",
-        },
-        {
-          label: "分公司4",
-          value: "4",
-        },
-        {
-          label: "分公司5",
-          value: "5",
-        },
-      ],
       // 配置项数据
       options: {},
       // 颜色盘
@@ -89,25 +75,58 @@ export default {
       dataList: [],
     };
   },
+  watch: {
+    select: {
+      handler(val) {
+        if (val) {
+          this.getCurrentList();
+          this.getChartList();
+        }
+      },
+      immediate: true,
+    },
+    itemSelect: {
+      handler() {
+        this.getChartList();
+      },
+    },
+  },
   created() {
     this.getChartList();
   },
   methods: {
+    /* 获取右上角下拉框数据 */
+    getCurrentList() {
+      getDropList({ type: this.select }).then(({ data, code }) => {
+        if (code === 200) {
+          this.currentList = data;
+        }
+      });
+    },
     /* 获取echart数据 */
     getChartList() {
-      this.dataList = [
+      const data = {
-        { value: 500, name: "1111" },
+        type: this.select,
-        { value: 600, name: "456" },
+        itemName: this.itemSelect,
-        { value: 400, name: "撒大大大" },
+      };
-        { value: 550, name: "的风格" },
+      roadCurrent(data).then(({ code, data }) => {
-        { value: 200, name: "规范化" },
+        if (code === 200) {
-        { value: 900, name: "规划" },
+          let allSum = 0;
-        { value: 100, name: "回家" },
+          data?.forEach((element) => {
-      ];
+            allSum += element.value;
+          });
+          this.dataList = data.map((item) => {
+            return {
+              ...item,
+              rate: ((item.value / allSum) * 100).toFixed(1),
+            };
+          });
+        }
         this.$nextTick(() => {
           //获取echart图所需的options
           this.drawChart();
         });
+      });
     },
     /* 绘制echart图 */
     drawChart() {
@@ -131,7 +150,7 @@ export default {
             formatter: (params) => {
               return `${params.marker}${params.seriesName}：${
                 data[params.seriesIndex].value
-              }张`;
+              }`;
             },
           },
           labelLine: {
@@ -152,28 +171,6 @@ export default {
             min: -1,
             max: 1,
           },
-          // title: [
-          //   {
-          //     x: "center",
-          //     top: "20%",
-          //     text: 50,
-          //     textStyle: {
-          //       color: "#fff",
-          //       fontSize: 42,
-          //       fontWeight: "bold",
-          //     },
-          //   },
-          //   {
-          //     x: "center",
-          //     top: "50%",
-          //     text: "还款总额",
-          //     textStyle: {
-          //       color: "#fff",
-          //       fontSize: 12,
-          //       fontWeight: 400,
-          //     },
-          //   },
-          // ],
           grid3D: {
             show: false,
             width: "250%",
@@ -195,7 +192,9 @@ export default {
           //最上方的series
           series: this.getPie3D(this.dataList, 0.8),
         });
-        window.addEventListener("resize", chart.resize());
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
       }
     },
     /* 绘制3d饼图配置项 */
@@ -216,9 +215,9 @@ export default {
 
         const seriesItem = {
           name:
-            typeof pieData[i].name === "undefined"
+            typeof pieData[i].typeName === "undefined"
               ? `series${i}`
-              : pieData[i].name,
+              : pieData[i].typeName,
           type: "surface",
           parametric: true,
           wireframe: {
@@ -251,12 +250,13 @@ export default {
           false,
           false,
           k,
-          series[i].pieData.value / 100
+          // 设置饼图高度
+          series[i].pieData.value / 1000
         );
 
         startValue = endValue;
 
-        legendData.push(series[i].name);
+        legendData.push(series[i].typeName);
       }
       return series;
     },
@@ -355,6 +355,7 @@ export default {
 .content {
   width: 100%;
   height: 100%;
+  overflow: hidden;
   position: relative;
 
   .content-select {
@@ -429,14 +430,14 @@ export default {
       }
 
       .name {
-        width: 3.5rem;
+        width: 4.5rem;
         padding-left: 0.3rem;
         color: #aac6c7;
         font-size: 0.7rem;
       }
 
       .rate {
-        width: 1.5rem;
+        width: 2rem;
         color: #808c9f;
         font-size: 0.65rem;
       }

src/views/big-screen/disease-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-18 11:32:35
+ * @LastEditTime: 2024-10-24 17:09:27
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
  * @Description: 病害巡检-病害趋势
 -->
@@ -12,10 +12,14 @@
   
   <script>
 import * as echarts from "echarts";
+import { roadTrends } from "@/api/xj/screen/disease-screen";
 export default {
   name: "DiseaseTrends",
   data() {
-    return {};
+    return {
+      // echart数据
+      echartList: [],
+    };
   },
   created() {
     this.geteEhartList();
@@ -23,12 +27,35 @@ export default {
   methods: {
     /* 获取折线图数据 */
     geteEhartList() {
+      roadTrends().then(({ data, code }) => {
+        if (code === 200) {
+          this.echartList = data;
           this.$nextTick(() => {
             this.drawChart();
           });
+        }
+      });
     },
     /* 绘制折线图 */
     drawChart() {
+      const xData = this.echartList.map((item) => {
+        return item.date;
+      });
+      const yData1 = this.echartList.map((item) => {
+        return item.A1000;
+      });
+      const yData2 = this.echartList.map((item) => {
+        return item.A2001;
+      });
+      const yData3 = this.echartList.map((item) => {
+        return item.A2000;
+      });
+      const yData4 = this.echartList.map((item) => {
+        return item.A0;
+      });
+      const yData5 = this.echartList.map((item) => {
+        return item.A1;
+      });
       const chart = echarts.init(this.$refs.trendsChart);
       chart.setOption({
         //你的代码
@@ -49,8 +76,8 @@ export default {
           },
         },
         grid: {
-          top: "15%",
+          top: "25%",
-          left: 0,
+          left: "0%",
           right: "10%",
           bottom: "10%",
           containLabel: true,
@@ -85,6 +112,7 @@ export default {
             fontSize: 12,
           },
           boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
+          data: xData,
         },
         yAxis: {
           type: "value",
@@ -111,7 +139,7 @@ export default {
         },
         series: [
           {
-            name: "龟裂",
+            name: "坑槽",
             type: "line",
             smooth: true,
             areaStyle: {
@@ -137,10 +165,10 @@ export default {
             itemStyle: {
               color: "#FFC100", // 节点颜色
             },
-            data: [15, 29, 32, 5, 14, 42],
+            data: yData1,
           },
           {
-            name: "车辙",
+            name: "块状修补(沥青)",
             type: "line",
             smooth: true,
             areaStyle: {
@@ -166,10 +194,10 @@ export default {
             itemStyle: {
               color: "#08B4A6",
             },
-            data: [30, 35, 32, 35, 18, 72],
+            data: yData2,
           },
           {
-            name: "坑槽",
+            name: "条状修补(沥青)",
             type: "line",
             smooth: true,
             areaStyle: {
@@ -195,7 +223,7 @@ export default {
             itemStyle: {
               color: "#146fd7",
             },
-            data: [20, 25, 12, 25, 8, 62],
+            data: yData3,
           },
           {
             name: "横向裂缝",
@@ -224,7 +252,81 @@ export default {
             itemStyle: {
               color: "#994EFF",
             },
-            data: [40, 45, 32, 45, 38, 82],
+            data: yData4,
+          },
+          {
+            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: yData5,
+          },
+        ],
+        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,
           },
         ],
       });

src/views/big-screen/disease-components/pic-rank.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:31:31
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 14:22:33
+ * @LastEditTime: 2024-10-24 15:35:02
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\pic-rank.vue
  * @Description: 病害巡检-pic排名
 -->
@@ -13,6 +13,7 @@
       class="vue-scroll"
       :class-option="defaultOption"
       :data="picList"
+      v-if="picList.length > 4"
     >
       <div
         class="pic-div"
@@ -22,24 +23,48 @@
         <div class="pic-top">
           <div class="pic-top-name">
             <a>{{ index + 1 }}</a
-            >{{ item.name }}
+            >{{ item.roadName }}
           </div>
           <div class="pic-top-value">
-            <span>{{ item.value }}</span>
+            <span>{{ item.pci }}</span>
           </div>
         </div>
         <div class="pic-bottom">
           <div
-            :style="{ width: `${(item.value / 300) * 100}%` }"
+            :style="{ width: `${item.pci}%` }"
             :class="`pic-bottom-${index}`"
           ></div>
         </div>
       </div>
     </vue-seamless-scroll>
+    <template v-else>
+      <div
+        class="pic-div"
+        v-for="(item, index) in picList"
+        :key="`pic-${index}`"
+      >
+        <div class="pic-top">
+          <div class="pic-top-name">
+            <a>{{ index + 1 }}</a
+            >{{ item.roadName }}
+          </div>
+          <div class="pic-top-value">
+            <span>{{ item.pci }}</span>
+          </div>
+        </div>
+        <div class="pic-bottom">
+          <div
+            :style="{ width: `${item.pci}%` }"
+            :class="`pic-bottom-${index}`"
+          ></div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
   
   <script>
+import { roadPic } from "@/api/xj/screen/disease-screen";
 import vueSeamlessScroll from "vue-seamless-scroll";
 export default {
   name: "PicRank",
@@ -58,15 +83,22 @@ export default {
         waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
       },
       // 排名数据
-      picList: [
+      picList: [],
-        { name: "沈阳绕城高速（G1501）", value: 95 },
-        { name: "沈阳绕城高速（G1501）", value: 75 },
-        { name: "沈阳绕城高速（G1501）", value: 70 },
-        { name: "沈阳绕城高速（G1501）", value: 65 },
-        { name: "沈阳绕城高速（G1501）", value: 55 },
-      ],
     };
   },
+  created() {
+    this.getPicData();
+  },
+  methods: {
+    /* 获取数据 */
+    getPicData() {
+      roadPic().then(({ data, code }) => {
+        if (code === 200) {
+          this.picList = data;
+        }
+      });
+    },
+  },
 };
 </script>
   

src/views/big-screen/disease-components/road-rank.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:33:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 15:05:44
+ * @LastEditTime: 2024-10-25 16:19:23
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\road-rank.vue
  * @Description: 病害巡检-路面状况排名
 -->
@@ -13,6 +13,7 @@
       class="vue-scroll"
       :class-option="defaultOption"
       :data="roadList"
+      v-if="roadList.length > 4"
     >
       <div
         class="road-div"
@@ -22,19 +23,66 @@
         <div class="index" :class="`road-index-${index}`">TOP</div>
         <div class="name">{{ item.name }}</div>
         <div class="value">病害数：{{ item.value }}</div>
-        <div :class="`rate-${item.tip}`" class="rate">
+        <div
-          环比：<span>{{ item.rate }}</span>
+          :class="`rate-${
+            item.huanbi > 0 ? 'up' : item.huanbi === 0 ? '' : 'down'
+          }`"
+          class="rate"
+        >
+          环比：<span>{{ item.huanbi }}</span>
+        </div>
+        <div
+          :class="`rate-${
+            item.tongbi > 0 ? 'up' : item.tongbi === 0 ? '' : 'down'
+          }`"
+          class="rate"
+        >
+          同比：<span>{{ item.tongbi }}</span>
         </div>
       </div>
     </vue-seamless-scroll>
+    <template v-else>
+      <div
+        class="road-div"
+        v-for="(item, index) in roadList"
+        :key="`road-${index}`"
+      >
+        <div class="index" :class="`road-index-${index}`">TOP</div>
+        <div class="name">{{ item.name }}</div>
+        <div class="value">病害数：{{ item.value }}</div>
+        <div
+          :class="`rate-${
+            item.huanbi > 0 ? 'up' : item.huanbi === 0 ? '' : 'down'
+          }`"
+          class="rate"
+        >
+          环比：<span>{{ item.huanbi }}</span>
+        </div>
+        <div
+          :class="`rate-${
+            item.tongbi > 0 ? 'up' : item.tongbi === 0 ? '' : 'down'
+          }`"
+          class="rate"
+        >
+          同比：<span>{{ item.tongbi }}</span>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
   
   <script>
 import vueSeamlessScroll from "vue-seamless-scroll";
+import { roadRankList } from "@/api/xj/screen/disease-screen";
 export default {
   name: "RoadRank",
   components: { vueSeamlessScroll },
+  props: {
+    select: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       // 轮播配置
@@ -49,15 +97,34 @@ export default {
         waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
       },
       // 路面状况排名数据
-      roadList: [
+      roadList: [],
-        { name: "G10152", value: 523, rate: 0.23, tip: "up" },
-        { name: "G10152", value: 523, rate: 0.23, tip: "up" },
-        { name: "G10152", value: 523, rate: 0.23, tip: "down" },
-        { name: "G10152", value: 523, rate: 0.23, tip: "down" },
-        { name: "G10152", value: 523, rate: 0.23, tip: "up" },
-      ],
     };
   },
+  watch: {
+    select: {
+      handler() {
+        this.getRoadList();
+      },
+      immediate: true,
+    },
+  },
+  created() {},
+  methods: {
+    /* 获取路面状况排名数据 */
+    getRoadList() {
+      roadRankList({ type: this.select }).then(({ data, code }) => {
+        if (code === 200) {
+          this.roadList = data.map((item) => {
+            return {
+              ...item,
+              tongbi: item.tongbi.slice(0, 3),
+              huanbi: item.huanbi.slice(0, 3),
+            };
+          });
+        }
+      });
+    },
+  },
 };
 </script>
   
@@ -70,9 +137,8 @@ export default {
   overflow: hidden;
 
   .road-div {
-    height: 2rem;
+    min-height: 2rem;
     width: 100%;
-    padding: 0 1.5rem;
     display: flex;
 
     > div {

src/views/big-screen/disease-components/today-inspection.vue

@@ -2,26 +2,57 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 09:42:49
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-22 09:30:05
+ * @LastEditTime: 2024-10-24 14:10:06
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
  * @Description: 病害巡检-今日巡查
 -->
 
 <template>
   <div class="content">
-    <div class="today-left"><span>86</span></div>
+    <div class="today-left">
+      <span>{{ today }}</span>
+    </div>
     <div class="today-right">
-      <div class="right-sum"><span>261</span>个</div>
+      <div class="right-sum">
-      <div class="right-rate"><span> 37 </span>%</div>
+        <span>{{ all }}</span
+        >个
+      </div>
+      <div class="right-rate">
+        <span> {{ scale }}</span
+        >%
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { roadToday } from "@/api/xj/screen/disease-screen";
 export default {
   name: "TodayInspection",
   data() {
-    return {};
+    return {
+      // 新增病害总数
+      today: "0",
+      // 病害总数
+      all: "0",
+      // 增长率
+      scale: "0",
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    /* 获取数据 */
+    getData() {
+      roadToday().then(({ data, code }) => {
+        if (code === 200) {
+          this.today = data.today;
+          this.all = data.all;
+          this.scale = (data.scale * 1).toFixed(2);
+        }
+      });
+    },
   },
 };
 </script>
@@ -117,7 +148,7 @@ export default {
         background: linear-gradient(
           to bottom,
           #ffffff,
-          #E9BC5C
+          #e9bc5c
         ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
         background-clip: text; /*将设置的背景颜色限制在文字中*/
         -webkit-text-fill-color: transparent; /*给文字设置成透明*/

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-10-23 16:12:45
+ * @LastEditTime: 2024-10-25 16:40:29
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -16,7 +16,6 @@
           height="45"
           frameborder="0"
           allowtransparency="true"
-          @load="loadFrame"
           src="https://i.tianqi.com?c=code&id=12&icon=1&color=%2389C5E8&py=shenyang&num=1&site=12"
         ></iframe>
       </div>
@@ -46,8 +45,12 @@
           ></template>
           <template slot="operation" v-if="item.selectIsShow">
             <el-radio-group class="screen-checkBox" v-model="item.select">
-              <el-radio-button label="1">公司</el-radio-button>
+              <el-radio-button
-              <el-radio-button label="2">线路</el-radio-button>
+                v-for="(item, index) in selectTypeArr"
+                :label="item.value"
+                :key="`left-screen-${index}`"
+                >{{ item.label }}</el-radio-button
+              >
             </el-radio-group>
           </template>
         </module-block>
@@ -61,11 +64,17 @@
           :title="item.title"
           :class="item.class"
         >
-          <template><component :is="item.component"></component></template>
+          <template
+            ><component :select="item.select" :is="item.component"></component
+          ></template>
           <template slot="operation" v-if="item.selectIsShow">
             <el-radio-group class="screen-checkBox" v-model="item.select">
-              <el-radio-button label="1">公司</el-radio-button>
+              <el-radio-button
-              <el-radio-button label="2">线路</el-radio-button>
+                v-for="(item, index) in selectTypeArr"
+                :label="item.value"
+                :key="`right-screen-${index}`"
+                >{{ item.label }}</el-radio-button
+              >
             </el-radio-group>
           </template>
         </module-block>
@@ -98,6 +107,10 @@
         <!-- 图片背景 -->
         <div class="disease-content" v-if="showImgBk">
           <div class="disease-title" @click="changeMap(false)"></div>
+          <div class="map-legend"></div>
+          <div class="map-care">
+            <div class="map-care-div"></div>
+          </div>
         </div>
         <!-- 地图 -->
         <fssm-map
@@ -180,6 +193,8 @@ import TrafficRank from "./traffic-components/traffic-rank.vue";
 import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
 import ImgDialog from "./components/img-dialog.vue";
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
+// 接口
+import { selectTypeList } from "@/api/xj/screen/index";
 export default {
   name: "BigScreen",
   components: {
@@ -213,6 +228,8 @@ export default {
       weekTime: "",
       // 年
       yearTime: "",
+      // 数据栏右上角选择框
+      selectTypeArr: [],
       // 左侧切换模块
       leftModuleList: [
         {
@@ -237,7 +254,7 @@ export default {
           title: "病害趋势",
           component: DiseaseCurrent,
           selectIsShow: true,
-          select: "1",
+          select: "",
           class: "twe",
         },
       ],
@@ -265,7 +282,7 @@ export default {
           title: "路面状况排名",
           component: RoadRank,
           selectIsShow: true,
-          select: "1",
+          select: "",
           class: "twe",
         },
       ],
@@ -276,7 +293,7 @@ export default {
         { name: "巡查车", click: "1" },
         { name: "病害", click: "2" },
         { name: "路产", click: "3" },
-        { name: "PCL", click: "4" },
+        { name: "事件", click: "4" },
       ],
       /* 具体icon类别 */
       iconTypeList: [],
@@ -310,12 +327,9 @@ export default {
   },
   created() {
     this.setTime();
+    this.getSelect();
   },
   methods: {
-    /* iframe加载完成回调方法 */
-    loadFrame() {
-      const iframe = document.getElementById("iframeId");
-    },
     /* 获取当前时间 */
     setTime() {
       this.timeFlag = setInterval(() => {
@@ -348,6 +362,14 @@ export default {
         this.dataTime = `${hours}:${minutes}:${seconds}`;
       }, 1000);
     },
+    /* 获取数据栏右上角选项数据 */
+    getSelect() {
+      selectTypeList().then(({ code, data }) => {
+        if (code === 200) {
+          this.selectTypeArr = data;
+        }
+      });
+    },
     /* 点击病害筛查 */
     clickImg() {
       this.imgVisible = true;
@@ -632,7 +654,7 @@ export default {
               title: "病害趋势",
               component: DiseaseCurrent,
               selectIsShow: true,
-              select: "1",
+              select: "",
               class: "twe",
             },
           ];
@@ -659,7 +681,7 @@ export default {
               title: "路面状况排名",
               component: RoadRank,
               selectIsShow: true,
-              select: "1",
+              select: "",
               class: "twe",
             },
           ];
@@ -689,7 +711,7 @@ export default {
               title: "附属设施异常统计",
               component: AnomalyFacilities,
               selectIsShow: true,
-              select: "1",
+              select: "",
               class: "one",
             },
             {
@@ -698,7 +720,7 @@ export default {
               title: "路产统计",
               component: RoadStatistic,
               selectIsShow: true,
-              select: "1",
+              select: "",
               class: "twe",
             },
           ];
@@ -717,7 +739,7 @@ export default {
               height: "14rem",
               title: "交安事件趋势",
               component: TrafficTrend,
-              selectIsShow: false,
+              selectIsShow: true,
               class: "twe",
             },
             {
@@ -726,7 +748,7 @@ export default {
               title: "交安事件统计",
               component: TrafficStatistic,
               selectIsShow: true,
-              select: "1",
+              select: "",
               class: "twe",
             },
           ];
@@ -737,7 +759,7 @@ export default {
               title: "交安事件排名",
               component: TrafficRank,
               selectIsShow: true,
-              select: "1",
+              select: "",
               class: "one",
             },
             {
@@ -853,8 +875,8 @@ export default {
       flex-direction: column;
       align-items: center;
       position: absolute;
-      left: 29rem;
+      left: 27%;
-      top: 6rem;
+      top: 10%;
 
       .road-div {
         width: 100%;
@@ -924,9 +946,6 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
-        // position: absolute;
-        // left: 30rem;
-        // top: 12rem;
         font-size: 0.8rem;
         color: #ffffff;
         background-color: #395569;
@@ -945,8 +964,8 @@ export default {
       width: 8rem;
       height: 10rem;
       position: absolute;
-      right: 28rem;
+      right: 26%;
-      top: 6rem;
+      top: 10%;
       padding: 0.4rem;
       border-radius: 0.4rem;
       border: 1px solid #193dae;
@@ -971,6 +990,7 @@ export default {
       background-size: 100% 100%;
       position: relative;
 
+      // 标题
       .disease-title {
         width: 20rem;
         height: 2.8rem;
@@ -982,9 +1002,29 @@ export default {
         background-repeat: no-repeat;
         background-size: 100%;
       }
+
+      // 图例
+      .map-legend {
+        height: 9rem;
+        width: 2rem;
+        position: absolute;
+        top: 13%;
+        left: 26%;
+        background-color: #1cb6ff;
+        z-index: 1;
       }
 
-    ::v-deep .ol-layer:nth-child(1) {
+      // 打点部分
+      .map-care {
+        width: 48%;
+        height: 73%;
+        position: absolute;
+        left: 26%;
+        top: 13%;
+      }
+    }
+
+    ::v-deep .baseLayerClass {
       filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
         brightness(80%) saturate(550%);
     }
@@ -1071,7 +1111,7 @@ export default {
 
     .change-map-div {
       cursor: pointer;
-      margin: 0 1.2rem;
+      margin: 0 2rem;
     }
 
     .change-map-click {

src/views/big-screen/road-components/ancillary-facilities.vue

@@ -2,24 +2,24 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:18:03
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-22 09:05:30
+ * @LastEditTime: 2024-10-25 16:27:10
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
  * @Description: 道路资产大屏-附属设施分布
 -->
 
 <template>
   <div class="content">
-    <div class="ancillary-top"><span>21465</span></div>
+    <div class="ancillary-top"><span>{{sum}}</span></div>
     <div class="ancillary-bottom">
       <div
         :class="`ancillary-bottom-${index}`"
         v-for="(item, index) in ancillaryList"
         :key="`ancillary-${index}`"
       >
-        <div>{{ item.name }}</div>
+        <div>{{ item.label }}</div>
         <div>
           <span>{{ item.value }}</span
-          ><a>{{ item.unit }}</a>
+          ><a>个</a>
         </div>
       </div>
     </div>
@@ -27,24 +27,40 @@
 </template>
   
   <script>
+import { ancillaryList, ancillaryCount } from "@/api/xj/screen/road-screen";
 export default {
   name: "AncillaryFacilities",
   data() {
     return {
+      // 附属设施总数
+      sum: 0,
       // 附属设施分布数据
-      ancillaryList: [
+      ancillaryList: [],
-        { name: "里程桩", value: 123, unit: "个" },
-        { name: "禁令标志", value: 123, unit: "个" },
-        { name: "指示标志", value: 123, unit: "个" },
-        { name: "警告标志", value: 123, unit: "个" },
-        { name: "指路标志", value: 123, unit: "个" },
-        { name: "辅助标志", value: 123, unit: "个" },
-        { name: "球机", value: 123, unit: "个" },
-        { name: "枪机", value: 123, unit: "个" },
-      ],
     };
   },
-  methods: {},
+  created() {
+    this.getAncillaryList();
+    this.getSum();
+  },
+  methods: {
+    /* 获取附属设施分总数 */
+    getSum() {
+      ancillaryCount().then(({ code, data }) => {
+        if (code === 200) {
+          this.sum = data.count;
+        }
+      });
+    },
+
+    /* 获取附属设施分布数据 */
+    getAncillaryList() {
+      ancillaryList().then(({ code, data }) => {
+        if (code === 200) {
+          this.ancillaryList = data;
+        }
+      });
+    },
+  },
 };
 </script>
   

src/views/big-screen/road-components/anomaly-facilities.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:21:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-21 16:03:14
+ * @LastEditTime: 2024-10-25 15:37:00
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
  * @Description: 附属设施异常统计
 -->
@@ -29,49 +29,137 @@
   
   <script>
 import * as echarts from "echarts";
+import { getDropList } from "@/api/xj/screen/disease-screen";
+import { anomalyList } from "@/api/xj/screen/road-screen";
 export default {
   name: "AnomalyFacilities",
+  props: {
+    select: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       // 下拉框绑定
-      itemSelect: "1",
+      itemSelect: "",
       // 下拉框数据
-      currentList: [
+      currentList: [],
-        {
+      // echart图数据
-          label: "分公司",
+      anomalyData: [],
-          value: "1",
-        },
-        {
-          label: "分公司2",
-          value: "2",
-        },
-        {
-          label: "分公3",
-          value: "3",
-        },
-        {
-          label: "分公司4",
-          value: "4",
-        },
-        {
-          label: "分公司5",
-          value: "5",
-        },
-      ],
     };
   },
+  watch: {
+    select: {
+      handler(val) {
+        if (val) {
+          this.getCurrentList();
+          this.getChartData();
+        }
+      },
+      immediate: true,
+    },
+    itemSelect: {
+      handler() {
+        this.getChartData();
+      },
+    },
+  },
   created() {
     this.getChartData();
   },
   methods: {
+    /* 获取右上角下拉框数据 */
+    getCurrentList() {
+      getDropList({ type: this.select }).then(({ data, code }) => {
+        if (code === 200) {
+          this.currentList = data;
+        }
+      });
+    },
     /* 获取柱状图数据 */
     getChartData() {
+      const data = {
+        id: this.itemSelect,
+        type: this.select,
+      };
+      anomalyList(data).then(({ code, data }) => {
+        if (code === 200) {
+          // this.anomalyData = data;
+          this.anomalyData = [
+            { label: "sss", value: 52 },
+            { label: "sss", value: 52 },
+            { label: "sss", value: 52 },
+            { label: "sss", value: 52 },
+            { label: "sss", value: 52 },
+            { label: "sss", value: 52 },
+            { label: "sss", value: 52 },
+            { label: "sss", value: 52 },
+          ];
           this.$nextTick(() => {
             this.drawChart();
           });
+        }
+      });
     },
     /* 绘制echart */
     drawChart() {
+      const xData = this.anomalyData.map((item) => {
+        return item.label;
+      });
+      const yData = this.anomalyData.map((item, index) => {
+        if (index % 2 == 0) {
+          return {
+            ...item,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: "linear",
+                global: false,
+                colorStops: [
+                  {
+                    //第一节下面
+                    offset: 0,
+                    color: "#033E43",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00FFEA",
+                  },
+                ],
+              },
+            },
+          };
+        } else {
+          return {
+            ...item,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: "linear",
+                global: false,
+                colorStops: [
+                  {
+                    //第一节下面
+                    offset: 0,
+                    color: "#034299",
+                  },
+                  {
+                    offset: 1,
+                    color: "#35F0FF",
+                  },
+                ],
+              },
+            },
+          };
+        }
+      });
       const chart = echarts.init(this.$refs.anomalyChart);
       chart.setOption({
         // backgroundColor: "#041139",
@@ -95,12 +183,10 @@ export default {
         },
         xAxis: [
           {
-            data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
+            data: xData,
             axisLabel: {
-              textStyle: {
               color: "#808C9F",
               fontSize: 12,
-              },
               interval: 0,
             },
             axisLine: {
@@ -138,12 +224,10 @@ export default {
             },
             axisLabel: {
               show: true,
-              textStyle: {
               color: "#808C9F",
               fontSize: 12,
             },
           },
-          },
         ],
         series: [
           // 柱体
@@ -169,176 +253,7 @@ export default {
               color: "#fff",
               fontSize: 14,
             },
-            data: [
+            data: yData,
-              {
-                value: 15,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#034299",
-                      },
-                      {
-                        offset: 1,
-                        color: "#35F0FF",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 25,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#033E43",
-                      },
-                      {
-                        offset: 1,
-                        color: "#00FFEA",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 35,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#034299",
-                      },
-                      {
-                        offset: 1,
-                        color: "#35F0FF",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 45,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#033E43",
-                      },
-                      {
-                        offset: 1,
-                        color: "#00FFEA",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 55,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#034299",
-                      },
-                      {
-                        offset: 1,
-                        color: "#35F0FF",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 65,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#033E43",
-                      },
-                      {
-                        offset: 1,
-                        color: "#00FFEA",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 75,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#034299",
-                      },
-                      {
-                        offset: 1,
-                        color: "#35F0FF",
-                      },
-                    ],
-                  },
-                },
-              },
-            ],
           },
         ],
       });

src/views/big-screen/road-components/manage-maintain.vue

@@ -9,18 +9,42 @@
 
 <template>
   <div class="content">
-    <div class="maintain-left"><span>286</span>km</div>
+    <div class="maintain-left">
-    <div class="maintain-right"><span>86</span>条</div>
+      <span>{{ mileage }}</span
+      >km
+    </div>
+    <div class="maintain-right">
+      <span>{{ count }}</span
+      >条
+    </div>
   </div>
 </template>
 
 <script>
+import { roadRankStatistics } from "@/api/xj/screen/road-screen";
 export default {
   name: "ManageMaintain",
   data() {
-    return {};
+    return {
+      // 道路总里程
+      mileage: "0",
+      // 道路总数
+      count: "0",
+    };
+  },
+  created() {
+    this.getRoadList();
+  },
+  methods: {
+    getRoadList() {
+      roadRankStatistics().then(({ code, data }) => {
+        if (code === 200) {
+          this.mileage = data.mileage;
+          this.count = data.count;
+        }
+      });
+    },
   },
-  methods: {},
 };
 </script>
 

src/views/big-screen/road-components/road-statistic.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:22:31
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-22 09:13:22
+ * @LastEditTime: 2024-10-25 16:11:56
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\road-statistic.vue
  * @Description: 道路资产大屏-路产统计
 -->
@@ -17,7 +17,7 @@
       <div class="road-top">
         <div class="road-top-name">
           <a>{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</a
-          >{{ item.name }}
+          >{{ item.label }}
         </div>
         <div class="road-top-value">
           <span>{{ item.value }}</span
@@ -27,40 +27,57 @@
       <div class="road-bottom">
         <div
           class="road-bottom-div"
-          :style="{ width: `${item.value * 10}%` }"
+          :style="{ width: `${item.rate * 100}%` }"
           :class="`bottom-${index}`"
-        >
-          <div
-            v-for="(it, ind) in item.value"
-            :key="`info-${ind}`"
-            class="road-info"
         ></div>
       </div>
     </div>
   </div>
-  </div>
 </template>
   
   <script>
+import { roadStatisticList } from "@/api/xj/screen/road-screen";
 export default {
   name: "RoadStatistic",
+  props: {
+    select: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
-      roadList: [
+      roadList: [],
-        { name: "G10152", value: 7 },
-        { name: "G10152", value: 6 },
-        { name: "G10152", value: 5 },
-        { name: "G10152", value: 5 },
-        { name: "G10152", value: 1 },
-        { name: "G10152", value: 5 },
-        { name: "G10152", value: 3 },
-        { name: "G10152", value: 8 },
-        { name: "G10152", value: 3 },
-        { name: "G10152", value: 6 },
-      ],
     };
   },
-  methods: {},
+  watch: {
+    select: {
+      handler() {
+        this.getRoadList();
+      },
+      immediate: true,
+    },
+  },
+  created() {},
+  methods: {
+    /* 获取路产统计信息 */
+    getRoadList() {
+      roadStatisticList({ type: this.select }).then(({ code, data }) => {
+        if (code === 200) {
+          let sum = 0;
+          data.forEach((element) => {
+            sum += element.value;
+          });
+          this.roadList = data.map((item) => {
+            return {
+              ...item,
+              rate: item.value / sum,
+            };
+          });
+        }
+      });
+    },
+  },
 };
 </script>
   
@@ -146,13 +163,6 @@ export default {
         width: 100%;
         height: 100%;
         display: flex;
-
-        .road-info {
-          height: 100%;
-          width: 40px;
-          border-left: 2px black solid;
-          margin: 0 0.1rem;
-        }
       }
 
       .bottom-0 {

src/views/big-screen/road-screen.vue

@@ -1,372 +0,0 @@
-<!--
- * @Author: SunTao 328867980@qq.com
- * @Date: 2024-10-17 16:23:48
- * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-23 11:26:47
- * @FilePath: \znxjxt-ui\src\views\big-screen\road-screen.vue
- * @Description: 大屏-其他切换
--->
-
-<template>
-  <div class="road-content">
-    <!-- 下拉框 -->
-    <div class="road-select" @click="clickImg">
-      <span>病害筛查</span>
-    </div>
-    <div class="disease-content" v-if="showImgBk">
-      <div class="disease-title" @click="changeMap"></div>
-    </div>
-    <fssm-map
-      v-if="!showImgBk"
-      ref="roadMap"
-      @feature-select="FeatureSelect"
-    ></fssm-map>
-    <!-- 图片弹窗 -->
-    <el-dialog
-      :title="imgTitle"
-      :visible.sync="imgVisible"
-      width="80rem"
-      append-to-body
-      :close-on-click-modal="false"
-      destroy-on-close
-      @close="imgCancel"
-    >
-      <img-dialog></img-dialog>
-    </el-dialog>
-  </div>
-</template>
-  
-  <script>
-import FssmMap from "@/components/map/fssm-map.vue";
-import { Feature } from "ol";
-import { Point } from "ol/geom";
-import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
-import logo from "@/assets/xc.png";
-import VectorSource from "ol/source/Vector";
-import VectorLayer from "ol/layer/Vector";
-import * as geomExports from "ol/geom";
-import Cluster from "ol/source/Cluster";
-import ImgDialog from "./components/img-dialog.vue";
-export default {
-  name: "RoadScreen",
-  components: { FssmMap, ImgDialog },
-  props: {},
-  watch: {},
-  data() {
-    return {
-      // 是否显示图片背景
-      showImgBk: true,
-      // 中心点集合
-      centerPiont: [],
-      // 线段点集合
-      lineString: [],
-      // 图片弹窗标题
-      imgTitle: "查看",
-      // 图片弹窗显隐控制
-      imgVisible: false,
-    };
-  },
-  mounted() {},
-  methods: {
-    /* 点击病害筛查事件 */
-    clickImg() {
-      this.imgVisible = true;
-    },
-    /* 点击图片点位信息 */
-    changeMap() {
-      this.showImgBk = false;
-      this.getCenterPiont();
-      this.getLinePoint();
-    },
-    /* 获取地图点位信息 */
-    getCenterPiont() {
-      this.centerPiont = [
-        [123.30297096718999, 41.87942945541742],
-        [123.08770760049077, 41.99409925522211],
-        [123.6210023341045, 41.94237193236056],
-      ];
-      this.drawPoint();
-    },
-    /* 绘制地图点位 */
-    drawPoint() {
-      const features = [];
-      this.centerPiont.forEach((element) => {
-        // 修改坐标样式
-        const point = new Point(element);
-        const feature = new Feature({
-          geometry: point,
-          data: { data: "123", type: "icon" },
-          // 自己设置一个标识
-          type: "icon",
-        });
-        // 可以给点位设置样式
-        // feature.setStyle([
-        //   new Style({
-        //     image: new Icon({
-        //       crossOrigin: "anonymous",
-        //       src: logo,
-        //       // 图标缩放比例
-        //       scale: 0.05,
-        //     }),
-        //   }),
-        // ]);
-        features.push(feature);
-      });
-      const clusterSource = new Cluster({
-        distance: 200,
-        minDistance: 20,
-        source: new VectorSource({
-          features,
-        }),
-      });
-      const clusters = new VectorLayer({
-        source: clusterSource,
-        name: "clusterLayer",
-        zIndex: 10,
-        style: function clusterStyle(feature) {
-          const count = feature.get("features").length;
-          return new Style({
-            image: new Icon({
-              crossOrigin: "anonymous",
-              src: logo,
-              // 图标缩放比例
-              scale: 0.05,
-              // 0.3为30度
-              rotation: 0.3,
-            }),
-            text: new Text({
-              textAlign: "center", //位置
-              textBaseline: "middle",
-              font: "normal 14px 微软雅黑",
-              offsetY: 15,
-              fill: new Fill({
-                color: "#ffffff",
-              }),
-              text: count > 1 ? count.toString() : "",
-            }),
-          });
-        },
-      });
-      this.$nextTick(() => {
-        const map = this.$refs.roadMap.instance.get("map");
-        map.addLayer(clusters);
-      });
-    },
-    /* 选中地图图标/线段事件 */
-    FeatureSelect(e) {
-      const map = this.$refs.roadMap.instance.get("map");
-      let selectedFeatures = e.selected;
-      if (selectedFeatures.length > 0) {
-        let feature = selectedFeatures[0];
-        let features = feature.get("features");
-        // 点击线段事件
-        if (feature.getProperties().type === "line") {
-          console.log(feature, "线段参数");
-        } else {
-          if (features.length === 1) {
-            // 单个点位
-            // 执行之前的业务逻辑
-            // 获取点击的图层信息
-            const selectFeature = feature.getProperties().features[0];
-            console.log(selectFeature, "点位");
-            // 获取点位数据
-            console.log(selectFeature.get("data"));
-          } else {
-            // 聚合点
-            // 放大地图层级
-            map.getView().animate({
-              center: feature.getGeometry().getCoordinates(),
-              zoom: map.getView().getZoom() + 1,
-            });
-          }
-        }
-      }
-    },
-    /* 获取地图线段点位信息 */
-    getLinePoint() {
-      this.lineString = [
-        [
-          [123.32282646995006, 41.97498761493642],
-          [123.35200891450947, 41.973156567233836],
-          [123.37958916875502, 41.97956525514763],
-          [123.39286432222431, 42.0021101177337],
-          [123.40184182160729, 42.02952420024438],
-          [123.4845914544503, 42.03583748930991],
-        ],
-        [
-          [122.5518798295274, 42.19039770874923],
-          [123.7871925821671, 42.236903621119346],
-        ],
-      ];
-      this.drawLine();
-    },
-    /* 绘制地图线段 */
-    drawLine() {
-      const features = [];
-      this.lineString.forEach((element) => {
-        const line = new Feature({
-          geometry: new geomExports.LineString(element),
-          type: "line",
-        });
-        line.setStyle([
-          new Style({
-            // 填充色
-            fill: new Fill({
-              color: "red",
-            }),
-            // 边线颜色
-            stroke: new Stroke({
-              color: "blue",
-              width: 5,
-            }),
-            // 形状
-            image: new Circle({
-              radius: 17,
-              fill: new Fill({
-                color: "#ffffff",
-              }),
-            }),
-          }),
-        ]);
-        features.push(line);
-      });
-      const lineSource = new VectorSource({
-        features,
-      });
-      let markLayerLines = new VectorLayer({
-        source: lineSource,
-        properties: {
-          type: "line",
-        },
-      });
-      this.$nextTick(() => {
-        const map = this.$refs.roadMap.instance.get("map");
-        map.addLayer(markLayerLines);
-      });
-    },
-    /* 清空地图图层的方法 */
-    clearMapPoint() {
-      this.$nextTick(() => {
-        this.$refs.roadMap.clearMapFeature();
-      });
-    },
-    /* 关闭图片查看弹窗 */
-    imgCancel() {
-      this.imgVisible = false;
-    },
-  },
-};
-</script>
-  
-  <style lang="scss" scoped>
-.road-content {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  // 病害筛查按钮样式
-  .road-select {
-    cursor: pointer;
-    width: 4rem;
-    height: 5rem;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    position: absolute;
-    left: 30rem;
-    top: 6rem;
-    color: #8deeff;
-    background-image: url("../../assets/screen/road/road-select.png");
-    background-repeat: no-repeat;
-    background-size: 80%;
-    background-position: 50% 0;
-    z-index: 1;
-
-    span {
-      font-size: 0.8rem;
-    }
-
-    ::v-deep .el-select {
-      width: 8rem;
-
-      .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: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;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // 图片背景样式
-  .disease-content {
-    width: 100%;
-    height: 100%;
-    background-image: url("../../assets/screen/index/map-liaoning.jpg");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-
-    .disease-title {
-      width: 20rem;
-      height: 2.8rem;
-      position: absolute;
-      // top: 5rem;
-      left: 50%;
-      transform: translate(-50%, 5rem);
-      background-image: url("../../assets/screen/index/disease-title.png");
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-  }
-}
-
-::v-deep .ol-layer:nth-child(1) {
-  filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
-    brightness(80%) saturate(550%);
-}
-
-/* 修改弹窗样式 */
-::v-deep .el-dialog__header {
-  background-color: #113463;
-
-  span,
-  i {
-    color: #ffffff;
-  }
-}
-
-::v-deep .el-dialog__body {
-  background-color: #113463;
-}
-</style>

src/views/big-screen/traffic-components/traffic-trend.vue

@@ -97,10 +97,8 @@ export default {
           {
             data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
             axisLabel: {
-              textStyle: {
               color: "#808C9F",
               fontSize: 12,
-              },
               interval: 0,
             },
             axisLine: {
@@ -138,12 +136,10 @@ export default {
             },
             axisLabel: {
               show: true,
-              textStyle: {
               color: "#808C9F",
               fontSize: 12,
             },
           },
-          },
         ],
         series: [
           // 柱体

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

@@ -2,7 +2,7 @@
  * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Date: 2024-10-08 10:58:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-12 15:22:08
+ * @LastEditTime: 2024-10-25 11:29:20
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
  * @Description: 巡检信息管理-病害管理
 -->
@@ -40,7 +40,6 @@
           format="yyyy-MM-dd"
           value-format="yyyy-MM-dd"
           clearable
-          @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="病害类型" prop="defectType">
@@ -178,7 +177,7 @@
           icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
-          @click="handleDelete"
+          @click="handleDelete('')"
           v-hasPermi="['system:defect:remove']"
           >删除
         </el-button>
@@ -194,18 +193,18 @@
           >导出
         </el-button>
       </el-col> -->
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="success"
           plain
           icon="el-icon-edit-outline"
           size="mini"
-          :disabled="single"
+          :disabled="multiple"
           @click="handleUpdateBatch"
           v-hasPermi="['system:defect:edit']"
           >批量确认
         </el-button>
-      </el-col>
+      </el-col> -->
     </el-row>
 
     <!-- 数据表格 -->
@@ -248,7 +247,11 @@
       <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
       <el-table-column label="病害图片" align="center" prop="media">
         <template slot-scope="scope">
-          <img style="height: 3rem" :src="scope.row.media[0].img" />
+          <el-image
+            style="height: 3rem"
+            :src="scope.row.media[0].img"
+            :preview-src-list="[scope.row.media[0].img]"
+          />
         </template>
       </el-table-column>
       <el-table-column label="病害长度" align="center" prop="targetLen" />
@@ -354,7 +357,7 @@
           </el-col>
         </el-row>
         <el-row :gutter="24">
-          <el-col :span="12">
+          <el-col :span="12" v-if="dialogTitle != '添加缺陷'">
             <el-form-item label="校验状态" prop="dataStatus">
               <el-select
                 v-model="form.dataStatus"
@@ -370,7 +373,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="dialogTitle === '添加缺陷' ? 24 : 12">
             <el-form-item label="病害状态" prop="state">
               <el-select
                 v-model="form.state"
@@ -537,6 +540,7 @@ import {
   changeDefectStatus,
 } from "@/api/xj/disease";
 import { getToken } from "@/utils/auth";
+import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
 
 export default {
   name: "Defect",
@@ -597,8 +601,6 @@ export default {
         inspectDirection: "",
         media: [],
       },
-      // 上传图片数组
-      fileList: [],
       // 上传参数设置
       upload: {
         // 是否禁用上传
@@ -826,7 +828,9 @@ export default {
         inspectDirection: "",
         media: [],
       };
+      if (this.$refs.addForm) {
         this.$refs["addForm"].resetFields();
+      }
       // this.resetFormData();
     },
     /* 重置表单方法 */
@@ -894,21 +898,27 @@ export default {
     handleUpdate(row) {
       this.dialogVisible = true;
       this.dialogTitle = "修改缺陷";
-      this.centerPoint = [
+      this.centerPoint = gcj02ToWgs84([
         row.geometry.coordinates[0],
         row.geometry.coordinates[1],
-      ];
+      ]);
       this.$nextTick(() => {
         this.initMap("addMap");
         const e = {
           lnglat: {
-            lat: row.geometry.coordinates[1],
+            lng: gcj02ToWgs84([
-            lng: row.geometry.coordinates[0],
+              row.geometry.coordinates[0],
+              row.geometry.coordinates[1],
+            ])[0],
+            lat: gcj02ToWgs84([
+              row.geometry.coordinates[0],
+              row.geometry.coordinates[1],
+            ])[1],
           },
         };
         this.onMapClick(e);
       });
-      this.form = row;
+      this.form = { ...row, dataStatus: row.dataStatus.toString() };
       this.upload.fileList = row.media.map((item) => {
         return {
           ...item,
@@ -940,9 +950,9 @@ export default {
     },
     /* 文件上传成功处理 */
     handleFileSuccess(response, file, fileList) {
-      this.fileList = fileList.map((item) => {
+      this.upload.fileList = fileList.map((item) => {
         if (item.response) {
-          return { img: item.response.url };
+          return { ...item, img: item.response.url };
         }
         return item;
       });
@@ -958,16 +968,22 @@ export default {
             return false;
           }
           // 验证文件上传列表
-          if (this.fileList.length < 1) {
+          if (this.upload.fileList.length < 1) {
             this.$modal.msgWarning("请上传图片");
             return false;
           }
           const data = {
             ...this.form,
-            media: this.fileList,
+            media: this.upload.fileList.map((item) => {
+              return { ...item, img: item.img };
+            }),
             geometry: {
               type: "Point",
-              coordinates: [this.markers[0].lng, this.markers[0].lat],
+              coordinates: wgs84ToGcj02([
+                this.markers[0].lng,
+                this.markers[0].lat,
+              ]),
+              id: this.form?.geometry?.id,
             },
           };
           if (this.form.id) {
@@ -1053,11 +1069,27 @@ export default {
       this.openViewDialog = true;
       this.viewForm = defect;
       this.$nextTick(() => {
+        this.centerPoint = [
+          gcj02ToWgs84([
+            defect.geometry.coordinates[0],
+            defect.geometry.coordinates[1],
+          ])[0],
+          gcj02ToWgs84([
+            defect.geometry.coordinates[0],
+            defect.geometry.coordinates[1],
+          ])[1],
+        ];
         this.initMap("viewMap");
         const e = {
           lnglat: {
-            lat: defect.geometry.coordinates[1],
+            lng: gcj02ToWgs84([
-            lng: defect.geometry.coordinates[0],
+              defect.geometry.coordinates[0],
+              defect.geometry.coordinates[1],
+            ])[0],
+            lat: gcj02ToWgs84([
+              defect.geometry.coordinates[0],
+              defect.geometry.coordinates[1],
+            ])[1],
           },
         };
         this.onMapClick(e);
@@ -1095,6 +1127,7 @@ export default {
     },
     /* 关闭查看对话框 */
     closeDialog() {
+      this.centerPoint = [123.30297096718999, 41.87942945541742];
       this.openViewDialog = false;
     },
   },

src/views/xj/inspection/road-management/components/road-add.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-11 16:52:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-12 14:13:23
+ * @LastEditTime: 2024-10-25 11:17:56
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-add.vue
  * @Description: 路产管理-新增/编辑弹窗
 -->
@@ -156,15 +156,10 @@
 <script>
 import { addRoad, uploadRoad } from "@/api/xj/road";
 import { getToken } from "@/utils/auth";
+import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
 
 export default {
   name: "RoadAdd",
-  //   props: [
-  //     "dialogItem",
-  //     "segmentList",
-  //     "defectStatus",
-  //     "roadType",
-  //   ],
   props: {
     dialogItem: {
       type: Object,
@@ -283,8 +278,14 @@ export default {
           this.$nextTick(() => {
             const e = {
               lnglat: {
-                lat: val.geometry.coordinates[1],
+                lng: gcj02ToWgs84([
-                lng: val.geometry.coordinates[0],
+                  val.geometry.coordinates[0],
+                  val.geometry.coordinates[1],
+                ])[0],
+                lat: gcj02ToWgs84([
+                  val.geometry.coordinates[0],
+                  val.geometry.coordinates[1],
+                ])[1],
               },
             };
             this.onMapClick(e);
@@ -339,7 +340,11 @@ export default {
             }),
             geometry: {
               type: "Point",
-              coordinates: [this.markers[0].lng, this.markers[0].lat],
+              coordinates: wgs84ToGcj02([
+                this.markers[0].lng,
+                this.markers[0].lat,
+              ]),
+              id: this.roadForm?.geometry?.id,
             },
           };
           if (this.roadForm.id) {

src/views/xj/inspection/road-management/components/road-view.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-12 13:11:05
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-14 09:11:45
+ * @LastEditTime: 2024-10-25 11:24:51
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-view.vue
  * @Description: 交安事件-查看弹窗
 -->
@@ -43,6 +43,7 @@
 </template>
 
 <script>
+import { gcj02ToWgs84 } from "@/api/xj/map";
 export default {
   name: "RoadView",
   props: {
@@ -68,25 +69,44 @@ export default {
   watch: {
     dialogItem: {
       handler(val) {
+        if (val.title === "查看路产") {
           this.viewForm = JSON.parse(JSON.stringify(val));
           this.$nextTick(() => {
+            this.centerPoint = [
+              gcj02ToWgs84([
+                val.geometry.coordinates[0],
+                val.geometry.coordinates[1],
+              ])[0],
+              gcj02ToWgs84([
+                val.geometry.coordinates[0],
+                val.geometry.coordinates[1],
+              ])[1],
+            ];
+            this.initMap("viewMap");
             const e = {
               lnglat: {
-              lat: val.geometry.coordinates[1],
+                lng: gcj02ToWgs84([
-              lng: val.geometry.coordinates[0],
+                  val.geometry.coordinates[0],
+                  val.geometry.coordinates[1],
+                ])[0],
+                lat: gcj02ToWgs84([
+                  val.geometry.coordinates[0],
+                  val.geometry.coordinates[1],
+                ])[1],
               },
             };
             this.onMapClick(e);
             // 移除点击事件
             this.map.removeEventListener("click", this.onMapClick);
           });
+        }
       },
       immediate: true,
       deep: true,
     },
   },
   mounted() {
-    this.initMap("viewMap");
+    // this.initMap("viewMap");
   },
   methods: {
     /* 过滤列表路产类型 */
@@ -108,7 +128,6 @@ export default {
       // if (this.map) {
       //   this.map.remove(); // 如果已经有地图实例，先移除再重新加载
       // }
-
       // 初始化天地图
       this.map = new T.Map(ele);
       this.map.centerAndZoom(

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-11 15:14:16
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-12 16:08:23
+ * @LastEditTime: 2024-10-25 09:28:22
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\index.vue
  * @Description: 巡检信息-路产管理
 -->
@@ -187,18 +187,18 @@
           >导出
         </el-button>
       </el-col> -->
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="success"
           plain
           icon="el-icon-edit-outline"
           size="mini"
-          :disabled="single"
+          :disabled="multiple"
           @click="handleUpdateBatch"
           v-hasPermi="['system:defect:edit']"
           >批量确认
         </el-button>
-      </el-col>
+      </el-col> -->
     </el-row>
     <!-- 列表 -->
     <el-table
@@ -240,7 +240,11 @@
       <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
       <el-table-column label="路产图片" align="center" prop="media">
         <template slot-scope="scope">
-          <img style="height: 3rem" :src="scope.row.media[0].img" />
+          <el-image
+            style="height: 3rem"
+            :src="scope.row.media[0].img"
+            :preview-src-list="[scope.row.media[0].img]"
+          />
         </template>
       </el-table-column>
       <el-table-column label="巡检任务" align="center" prop="stakeEnd" />
@@ -532,7 +536,7 @@ export default {
     /* 点击新增事件 */
     handleAdd() {
       this.addVisible = true;
-      this.addTitle = "修改路产";
+      this.addTitle = "添加路产";
       this.dialogItem = {
         title: "添加路产",
       };
@@ -608,14 +612,14 @@ export default {
     /* 关闭新增/编辑弹窗 */
     addCancel() {
       this.addVisible = false;
-      this.dialogItem = {};
+      this.dialogItem = { title: "添加路产" };
       this.addTitle = "";
       this.getRoadList();
     },
     /* 关闭查看弹窗 */
     viewCancel() {
       this.viewVisible = false;
-      this.dialogItem = {};
+      this.dialogItem = { title: "添加路产" };
     },
   },
 };

src/views/xj/inspection/task-management/components/task-view.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:36:09
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-14 11:10:42
+ * @LastEditTime: 2024-10-25 14:25:31
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-view.vue
  * @Description: 巡检任务-查看路径
 -->
@@ -16,7 +16,9 @@
         @feature-dblclick="mapDbclick"
       ></fssm-map>
     </div>
-    <div class="footer"></div>
+    <div class="footer">
+      <el-slider v-model="timeTip" :show-tooltip="false"></el-slider>
+    </div>
   </div>
 </template>
 
@@ -33,7 +35,10 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      // 进度条位置绑定值
+      timeTip: 26,
+    };
   },
   mounted() {},
   methods: {

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 09:48:43
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-14 10:54:23
+ * @LastEditTime: 2024-10-25 13:59:25
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
  * @Description: 巡检管理-巡检任务
 -->
@@ -17,31 +17,24 @@
       :inline="true"
       label-width="100px"
     >
-      <el-form-item label="任务id" prop="id">
+      <el-form-item label="任务id" prop="taskId">
         <el-autocomplete
-          v-model="queryParams.id"
+          v-model="queryParams.taskId"
           :fetch-suggestions="querySearchAsync"
           placeholder="请输入任务id"
           @select="handleSelect"
         ></el-autocomplete>
       </el-form-item>
-      <el-form-item label="车牌号码" prop="carName">
+      <el-form-item label="车牌号码" prop="plateNo">
-        <el-select
+        <el-input
-          v-model="queryParams.carName"
+          v-model="queryParams.plateNo"
-          placeholder="请选择车牌号码"
+          placeholder="请输入车牌号码"
-          clearable
+          clearable=""
-        >
+        ></el-input>
-          <el-option
-            v-for="item in carNameList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
       </el-form-item>
-      <el-form-item label="巡检路段" prop="segmentName">
+      <el-form-item label="巡检路段" prop="segmentId">
         <el-select
-          v-model="queryParams.segmentName"
+          v-model="queryParams.segmentId"
           placeholder="请选择巡检路段"
           clearable
         >
@@ -87,7 +80,7 @@
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="巡检路段" align="center" prop="segmentName" />
-      <el-table-column label="巡检路段编码" align="center" prop="segmentId">
+      <el-table-column label="巡检路段编码" align="center" prop="segmentCode">
       </el-table-column>
       <el-table-column label="巡检开始时间" align="center" prop="startTime">
         <template slot-scope="scope">
@@ -100,10 +93,9 @@
       </el-table-column>
       <el-table-column label="巡检起点" align="center" prop="stakeStart" />
       <el-table-column label="巡检终点" align="center" prop="stakeEnd" />
-      <el-table-column label="车牌号码" align="center" prop="media">
+      <el-table-column label="车牌号码" align="center" prop="plateNo">
       </el-table-column>
-      <el-table-column label="任务id" align="center" prop="id" />
+      <el-table-column label="任务id" align="center" prop="extId" />
-
       <el-table-column
         label="操作"
         align="center"
@@ -151,7 +143,12 @@
       
 <script>
 import TaskView from "./components/task-view.vue";
-import { getTaskTable, getSegment, getRoadType } from "@/api/xj/task";
+import {
+  getTaskTable,
+  getSegment,
+  getRoadType,
+  getTaskIdList,
+} from "@/api/xj/task";
 
 export default {
   components: { TaskView },
@@ -160,11 +157,11 @@ export default {
       // 查询表单
       queryParams: {
         // 任务id
-        id: "",
+        taskId: "",
         // 车牌号码
-        carName: "",
+        plateNo: "",
         // 巡检路段
-        segmentName: "",
+        segmentId: "",
       },
       // 巡检时间
       dateTime: [],
@@ -172,8 +169,6 @@ export default {
       searchForm: {},
       // 巡检路段下拉
       segmentList: [],
-      // 车牌号码下拉
-      carNameList: [],
       // 路产类型下拉
       roadType: [],
       // 列表数据绑定
@@ -206,7 +201,20 @@ export default {
   },
   methods: {
     /* 任务id远程搜索 结果 */
-    querySearchAsync(item, cb) {},
+    querySearchAsync(item, cb) {
+      getTaskIdList({ name: item }).then(({ data, code }) => {
+        if (code === 200) {
+          let list = [];
+          data.map((item) => {
+            list.push({
+              value: item.label,
+              id: item.value,
+            });
+          });
+          cb(list);
+        }
+      });
+    },
     /* 任务id选择事件 */
     handleSelect() {},
     /* 获取巡检路段下拉数据 */
@@ -227,44 +235,17 @@ export default {
     },
     /* 点击搜索事件 */
     handleQuery() {
-      const phonereg = /^K\d{4}\+\d{3}$/;
-      if (this.queryParams.stakeStart) {
-        if (phonereg.test(this.queryParams.stakeStart)) {
       this.pagination.page = 1;
       this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
       this.getTaskList();
-        } else {
-          this.$modal.msgWarning("请按照格式填写公里桩进行修改");
-        }
-      } else if (this.queryParams.stakeEnd) {
-        if (phonereg.test(this.queryParams.stakeEnd)) {
-          this.pagination.page = 1;
-
-          this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
-          this.getTaskList();
-        } else {
-          this.$modal.msgWarning("请按照格式填写公里桩进行修改");
-        }
-      } else {
-        this.pagination.page = 1;
-
-        this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
-        this.getTaskList();
-      }
     },
     /* 点击重置事件 */
     resetQuery() {
       this.searchForm = {};
       this.queryParams = {
-        segmentName: "",
+        taskId: "",
-        defectType: "",
+        plateNo: "",
-        dataStatus: "",
+        segmentId: "",
-        inspectDirection: "",
-        defectType3: "",
-        stakeStart: "",
-        stakeEnd: "",
-        state: "",
-        id: "",
       };
       this.dateTime = [];
       this.getTaskList();
@@ -286,7 +267,7 @@ export default {
     },
     /* 列表选择改变事件 */
     handleSelectionChange(selection) {
-      this.checkIds = selection.map((item) => item.id);
+      this.checkIds = selection.map((item) => item.taskId);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },

src/views/xj/inspection/traffic-management/components/event-add.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-11 16:52:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-12 17:15:38
+ * @LastEditTime: 2024-10-25 11:57:40
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-add.vue
  * @Description: 交安事件-新增/编辑弹窗
 -->
@@ -183,6 +183,7 @@
 <script>
 import { addEvent, uploadEvent } from "@/api/xj/traffic";
 import { getToken } from "@/utils/auth";
+import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
 
 export default {
   name: "EventAdd",
@@ -220,7 +221,7 @@ export default {
         equipmentType: "",
         stakeStart: "",
         stakeEnd: "",
-        equipmentId:""
+        equipmentId: "",
       },
       // 校验状态下拉数据
       states: [
@@ -321,8 +322,14 @@ export default {
           this.$nextTick(() => {
             const e = {
               lnglat: {
-                lat: val.geometry.coordinates[1],
+                lng: gcj02ToWgs84([
-                lng: val.geometry.coordinates[0],
+                  val.geometry.coordinates[0],
+                  val.geometry.coordinates[1],
+                ])[0],
+                lat: gcj02ToWgs84([
+                  val.geometry.coordinates[0],
+                  val.geometry.coordinates[1],
+                ])[1],
               },
             };
             this.onMapClick(e);
@@ -377,7 +384,11 @@ export default {
             }),
             geometry: {
               type: "Point",
-              coordinates: [this.markers[0].lng, this.markers[0].lat],
+              coordinates: wgs84ToGcj02([
+                this.markers[0].lng,
+                this.markers[0].lat,
+              ]),
+              id: this.roadForm?.geometry?.id,
             },
           };
           if (this.roadForm.id) {

src/views/xj/inspection/traffic-management/components/event-view.vue

@@ -1,3 +1,12 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-12 15:49:46
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-25 11:44:59
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\components\event-view.vue
+ * @Description: 交安事件-查看弹窗
+-->
+
 <template>
   <div class="view-content">
     <div>
@@ -10,7 +19,6 @@
           <!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
           <p>事件类型：{{ filterDefect(viewForm.defectType) }}</p>
         </div>
-
         <!-- 右侧图片展示 -->
         <div style="width: 27rem; padding: 10px">
           <el-carousel class="view-carousel" height="15rem">
@@ -34,6 +42,7 @@
 </template>
 
 <script>
+import { gcj02ToWgs84 } from "@/api/xj/map";
 export default {
   name: "EventView",
   props: {
@@ -59,25 +68,46 @@ export default {
   watch: {
     dialogItem: {
       handler(val) {
+        console.log(val, "dddd");
+
+        if (val.title === "查看事件") {
           this.viewForm = JSON.parse(JSON.stringify(val));
           this.$nextTick(() => {
+            this.centerPoint = [
+              gcj02ToWgs84([
+                val.geometry.coordinates[0],
+                val.geometry.coordinates[1],
+              ])[0],
+              gcj02ToWgs84([
+                val.geometry.coordinates[0],
+                val.geometry.coordinates[1],
+              ])[1],
+            ];
+            this.initMap("viewMap");
             const e = {
               lnglat: {
-              lat: val.geometry.coordinates[1],
+                lng: gcj02ToWgs84([
-              lng: val.geometry.coordinates[0],
+                  val.geometry.coordinates[0],
+                  val.geometry.coordinates[1],
+                ])[0],
+                lat: gcj02ToWgs84([
+                  val.geometry.coordinates[0],
+                  val.geometry.coordinates[1],
+                ])[1],
               },
             };
             this.onMapClick(e);
             // 移除点击事件
             this.map.removeEventListener("click", this.onMapClick);
           });
+        }
       },
       immediate: true,
       deep: true,
     },
   },
   mounted() {
-    this.initMap("viewMap");
+    // this.initMap("viewMap");
   },
   methods: {
     /* 过滤列表事件类型 */

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-12 14:52:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-23 10:24:00
+ * @LastEditTime: 2024-10-25 13:02:28
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\index.vue
  * @Description: 巡检管理-交安事件
 -->
@@ -187,7 +187,7 @@
             >导出
           </el-button>
         </el-col> -->
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="success"
           plain
@@ -198,7 +198,7 @@
           v-hasPermi="['system:defect:edit']"
           >批量确认
         </el-button>
-      </el-col>
+      </el-col> -->
     </el-row>
     <!-- 列表 -->
     <el-table
@@ -225,30 +225,18 @@
           <span>{{ filterState(scope.row.state) }}</span>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="校验状态" align="center" prop="dataStatus">
-        <template slot-scope="scope">
-          <span>{{
-            scope.row.dataStatus
-              ? scope.row.dataStatus === 1
-                ? "未校验"
-                : "已校验"
-              : ""
-          }}</span>
-        </template>
-      </el-table-column> -->
       <el-table-column label="开始桩号" align="center" prop="stakeStart" />
       <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
       <el-table-column label="事件图片" align="center" prop="media">
         <template slot-scope="scope">
-          <img style="height: 3rem" :src="scope.row.media[0].img" />
+          <el-image
+            style="height: 3rem"
+            :src="scope.row.media[0].img"
+            :preview-src-list="[scope.row.media[0].img]"
+          />
         </template>
       </el-table-column>
       <el-table-column label="巡检任务" align="center" prop="stakeEnd" />
-      <!-- <el-table-column label="校验状态" align="center" prop="datastatus">
-          <template slot-scope="scope">
-            <span>{{ scope.row.datastatus === "1" ? "未校验" : "已校验" }}</span>
-          </template>
-        </el-table-column> -->
       <el-table-column label="道路方向" align="center" prop="inspectDirection">
         <template slot-scope="scope">
           <span>{{
@@ -545,7 +533,7 @@ export default {
     /* 点击新增事件 */
     handleAdd() {
       this.addVisible = true;
-      this.addTitle = "修改事件";
+      this.addTitle = "添加事件";
       this.dialogItem = {
         title: "添加事件",
       };
@@ -621,14 +609,14 @@ export default {
     /* 关闭新增/编辑弹窗 */
     addCancel() {
       this.addVisible = false;
-      this.dialogItem = {};
+      this.dialogItem = { title: "添加事件" };
       this.addTitle = "";
       this.getRoadList();
     },
     /* 关闭查看弹窗 */
     viewCancel() {
       this.viewVisible = false;
-      this.dialogItem = {};
+      this.dialogItem = { title: "添加事件" };
     },
   },
 };

src/views/xj/parameter/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-09 13:11:56
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-22 16:38:50
+ * @LastEditTime: 2024-10-24 09:16:47
  * @FilePath: \znxjxt-ui\src\views\xj\parameter\index.vue
  * @Description: 系统工具-系统参数
 -->
@@ -141,7 +141,6 @@ export default {
     /* 地图打点 */
     drawPoint(value) {
       const features = [];
-
       const point = new Point(value); // 修改坐标格式
       const feature = new Feature({
         geometry: point,

src/views/xj/route/route-section/components/section-add.vue

@@ -155,7 +155,7 @@
                   clearable
                 >
                   <el-option
-                    v-for="item in dict.type.bas_road_type"
+                    v-for="item in routeList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
@@ -207,6 +207,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    routeList: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -273,8 +277,6 @@ export default {
       },
       // 养护单位下拉数据
       deptOptions: [],
-      // 路线下拉
-      routeList: [],
       // 上一点位
       previousPoint: null,
       // 保存所有添加的连线

src/views/xj/route/route-section/index.vue

@@ -144,6 +144,7 @@
     >
       <section-add
         :dialogItem="dialogItem"
+        :routeList="routeList"
         @addCancel="addCancel"
       ></section-add>
     </el-dialog>
@@ -151,7 +152,11 @@
 </template>
 
 <script>
-import { getSectionList, deleteSection } from "@/api/xj/section";
+import {
+  getSectionList,
+  deleteSection,
+  getSegmentList,
+} from "@/api/xj/section";
 import SectionAdd from "./components/section-add.vue";
 
 export default {
@@ -187,13 +192,24 @@ export default {
       addVisible: false,
       // 传弹窗数据
       dialogItem: {},
+      // 路线下拉数据
+      routeList: [],
     };
   },
   mounted() {},
   created() {
     this.getTableList();
+    this.getRoadList();
   },
   methods: {
+    /* 获取路线下拉数据 */
+    getRoadList() {
+      getSegmentList().then(({ code, data }) => {
+        if (code === 200) {
+          this.routeList = data;
+        }
+      });
+    },
     /* 点击搜索事件 */
     handleQuery() {
       this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));