fix：修改病害类型下拉为级联

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
-    <theme-picker/>
+    <theme-picker />
   </div>
 </template>
 <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=c691040443c68cda625755c5c3e2acc3" type="text/javascript">
@@ -12,15 +12,19 @@ import ThemePicker from "@/components/ThemePicker";
 
 export default {
   name: "App",
-  components: {ThemePicker},
+  components: { ThemePicker },
   metaInfo() {
     return {
-      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
+      title:
-      titleTemplate: title => {
+        this.$store.state.settings.dynamicTitle &&
-        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+        this.$store.state.settings.title,
-      }
+      titleTemplate: (title) => {
-    }
+        return title
-  }
+          ? `${title} - ${process.env.VUE_APP_TITLE}`
+          : process.env.VUE_APP_TITLE;
+      },
+    };
+  },
 };
 </script>
 <style scoped>
@@ -28,3 +32,13 @@ export default {
   display: none;
 }
 </style>
+
+<style lang="scss">
+input[aria-hidden="true"] {
+  display: none !important;
+}
+
+.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
+  box-shadow: none;
+}
+</style>

src/api/xj/confirmation.js

@@ -11,7 +11,8 @@ import request from "@/utils/request";
 // 查询列表病害类型
 export function getDefectList(params) {
   return request({
-    url: "/metadata/defectType",
+    // url: "/metadata/defectType",
+    url: "/bigscreen/v2/getDefectTypesDrowDown",
     method: "get",
     params,
   });

src/api/xj/disease.js

@@ -71,7 +71,9 @@ export function getSegment() {
 // 查询列表病害类型
 export function getDefectList(params) {
   return request({
-    url: "/metadata/defectType",
+    // 病害类型下拉
+    // url: "/metadata/defectType",
+    url: "/bigscreen/v2/getDefectTypesDrowDown",
     method: "get",
     params,
   });

src/api/xj/index/index.js

@@ -64,6 +64,14 @@ export function getRoadCondition(query) {
   });
 }
 
+// 获取路况评定常数统计数据
+export function getRoadConditionLog(query) {
+  return request({
+    url: "/xj/home/getRoadConditionAssessmentLog",
+    method: "get",
+    params: query,
+  });
+}
 
 // 获取数据栏右上角选择数据接口
 export function selectTypeList(query) {
@@ -73,3 +81,12 @@ export function selectTypeList(query) {
     params: query,
   });
 }
+
+// 获取病害类型分布与总数
+export function getTotalList(query) {
+  return request({
+    url: "/xj/home/getTotal",
+    method: "get",
+    params: query,
+  });
+}

src/api/xj/scope.js

@@ -1,18 +1,18 @@
 import request from "@/utils/request";
 
 // 查询作业范围列表
-export function getScopeList(query) {
+export function getScopeList(params) {
   return request({
-    url: "/api/v2/segment/list",
+    url: "/api/fence/list",
-    method: "post",
+    method: "get",
-    data: query,
+    params,
   });
 }
 
 // 删除作业范围
 export function deleteScope(query) {
   return request({
-    url: "/api/v2/segment/delete",
+    url: "/api/fence/delete",
     method: "delete",
     data: query,
   });
@@ -21,7 +21,7 @@ export function deleteScope(query) {
 //  新增作业范围
 export function addScope(query) {
   return request({
-    url: "/api/v2/segment/add",
+    url: "/api/fence/add",
     method: "post",
     data: query,
   });
@@ -30,7 +30,7 @@ export function addScope(query) {
 // 修改作业范围
 export function updateScope(query) {
   return request({
-    url: "/api/v2/segment/update",
+    url: "/api/fence/update",
     method: "put",
     data: query,
   });

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

@@ -12,7 +12,7 @@ export function roadRankList(query) {
 // 病害趋势柱状图接口
 export function roadTrends(query) {
   return request({
-    url: "/bigscreen/getHistoryDefect",
+    url: "/bigscreen/v2/getHistoryDefect",
     method: "get",
     params: query,
   });
@@ -121,7 +121,7 @@ export function getVideoUrl(params) {
 // 关闭设备的上传视频流
 export function closeVideoUrl(params) {
   return request({
-    url: "/bigscreen/v2/colseAiotVideo",
+    url: "/bigscreen/v2/closeAiotVideo",
     method: "get",
     params,
   });

src/api/xj/screen/index.js

@@ -72,6 +72,15 @@ export function defeaseList(data) {
   });
 }
 
+// 获取病害筛选病害日志路线下拉数据
+export function getDefectDropDown(params) {
+  return request({
+    url: "/xj/route/listDropDown",
+    method: "get",
+    params,
+  });
+}
+
 //   获取病害筛选弹窗路段下拉数据
 // export function getSegment(data) {
 //   return request({

src/api/xj/surface.js

@@ -17,15 +17,24 @@ export function getSegment() {
   });
 }
 
-// 病害类型下拉数据
+// 病害类型级联下拉数据
 export function getDefectList(params) {
     return request({
-      url: "/bigscreen/v2/getAllDefectType",
+      // url: "/bigscreen/v2/getAllDefectType",
+      url: "/bigscreen/v2/getDefectTypesDrowDown",
       method: "get",
       params,
     });
   }
 
+// 获取病害类型下拉数据
+export function getDefectSelectList(params) {
+  return request({
+    url: "/bigscreen/v2/getAllDefectType",
+    method: "get",
+    params,
+  });
+}
 
 // 获取病害详细数据接口
 export function getCompareList(params) {

src/views/big-screen/disease-components/traffic-log.vue

@@ -18,11 +18,28 @@
         label-position="left"
         label-width="5rem"
       >
-        <el-form-item class="form-item" label="道路名称" prop="segmentId">
+        <el-form-item class="form-item" label="路线名称" prop="routeId">
+          <el-select
+            v-model="trafficForm.routeId"
+            :popper-append-to-body="false"
+            placeholder="请选择路线"
+            filterable
+            clearable
+            @change="chengeLine"
+          >
+            <el-option
+              v-for="item in lineList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="form-item" label="路段名称" prop="segmentId">
           <el-select
             v-model="trafficForm.segmentId"
             :popper-append-to-body="false"
-            placeholder="请选择道路名称"
+            placeholder="请选择路段"
             filterable
             clearable
           >
@@ -163,7 +180,7 @@
 
 <script>
 import { emergencyData, DefectType } from "@/api/xj/screen/traffic-screen";
-import { getSegment } from "@/api/xj/screen/index";
+import { getSegment, getDefectDropDown } from "@/api/xj/screen/index";
 export default {
   name: "TrafficLog",
   props: {
@@ -177,7 +194,9 @@ export default {
     return {
       // 查询表单绑定
       trafficForm: {
-        // 道路名称
+        // 路线名称
+        routeId: "",
+        // 路段名称
         segmentId: "",
         // 公里桩
         stakeStart: "",
@@ -191,7 +210,9 @@ export default {
       dataTime: [],
       // 传接口的查询条件
       searchForm: {},
-      // 道路名称下拉数据
+      // 路线名称下拉数据
+      lineList: [],
+      // 路段名称下拉数据
       segmentList: [],
       // 病害类型下拉数据
       eventType: [],
@@ -222,20 +243,54 @@ export default {
   },
   created() {
     this.getData();
-    this.getSegmentList();
+    this.getLineList();
     this.getAllDefectType();
   },
   methods: {
-    /* 获取路段下拉数据 */
+    /**
-    getSegmentList() {
+     * @description: 获取路线下拉数据
-      getSegment().then(({ code, data }) => {
+     * @param {*}
+     * @return {*}
+     */
+    getLineList() {
+      getDefectDropDown().then(({ code, data }) => {
+        if (code === 200) {
+          this.lineList = data;
+        }
+      });
+    },
+
+    /**
+     * @description: 路线名称下拉框改变事件
+     * @param {*}
+     * @return {*}
+     */
+    chengeLine(val) {
+      if (val) {
+        this.getSegmentList(val);
+      } else {
+        this.segmentList = [];
+      }
+    },
+
+    /**
+     * @description: 获取路段下拉数据
+     * @param {*}
+     * @return {*}
+     */
+    getSegmentList(val) {
+      getSegment({ routeId: val }).then(({ code, data }) => {
         if (code === 200) {
           this.segmentList = data;
         }
       });
     },
 
-    /* 获取病害类型下拉数据 */
+    /**
+     * @description: 获取病害类型下拉数据
+     * @param {*}
+     * @return {*}
+     */
     getAllDefectType() {
       DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
         if (code === 200) {
@@ -244,13 +299,22 @@ export default {
       });
     },
 
-    /* 点击搜索事件 */
+    /**
+     * @description: 点击搜索事件
+     * @param {*}
+     * @return {*}
+     */
     handleQuery() {
       const phonereg = /^K\d{4}\+\d{3}$/;
       if (this.trafficForm.stakeStart) {
         if (phonereg.test(this.trafficForm.stakeStart)) {
           this.pagination.page = 1;
-          this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
+          const data = {
+            ...this.trafficForm,
+            startTime: this.dateTime ? this.dateTime[0] : "",
+            endTime: this.dateTime ? this.dateTime[1] : "",
+          };
+          this.searchForm = JSON.parse(JSON.stringify(data));
           this.getData();
         } else {
           this.$modal.msgWarning("请按照格式填写公里桩进行修改");
@@ -258,23 +322,39 @@ export default {
       } else if (this.trafficForm.stakeEnd) {
         if (phonereg.test(this.trafficForm.stakeEnd)) {
           this.pagination.page = 1;
-          this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
+          const data = {
+            ...this.trafficForm,
+            startTime: this.dateTime ? this.dateTime[0] : "",
+            endTime: this.dateTime ? this.dateTime[1] : "",
+          };
+          this.searchForm = JSON.parse(JSON.stringify(data));
           this.getData();
         } else {
           this.$modal.msgWarning("请按照格式填写公里桩进行修改");
         }
       } else {
         this.pagination.page = 1;
-        this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
+        const data = {
+          ...this.trafficForm,
+          startTime: this.dateTime ? this.dateTime[0] : "",
+          endTime: this.dateTime ? this.dateTime[1] : "",
+        };
+        this.searchForm = JSON.parse(JSON.stringify(data));
         this.getData();
       }
     },
 
-    /* 点击重置事件 */
+    /**
+     * @description: 点击重置事件
+     * @param {*}
+     * @return {*}
+     */
     resetQuery() {
       this.searchForm = {};
       this.trafficForm = {
-        // 道路名称
+        // 路线名称
+        routeId: "",
+        // 路段名称
         segmentId: "",
         // 公里桩
         stakeStart: "",
@@ -284,10 +364,15 @@ export default {
         // 病害状态
         state: "",
       };
+      this.dataTime = [];
       this.getData();
     },
 
-    /* 获取事件列表数据 */
+    /**
+     * @description: 获取事件列表数据
+     * @param {*}
+     * @return {*}
+     */
     getData() {
       const data = {
         classType: this.bottomTipClick,
@@ -302,7 +387,11 @@ export default {
       });
     },
 
-    /* 点击表格详情事件 */
+    /**
+     * @description: 点击表格详情事件
+     * @param {*} item
+     * @return {*}
+     */
     detailDefect(item) {
       this.$emit("imagePoint", {
         snapshotId: item.snapshotId,
@@ -311,7 +400,11 @@ export default {
       });
     },
 
-    /* 页码修改事件 */
+    /**
+     * @description: 页码修改事件
+     * @param {*} age
+     * @return {*}
+     */
     handleCurrentChange(age) {
       this.pagination.page = age;
       this.getData();
@@ -327,7 +420,7 @@ export default {
 
   .traffic-form {
     width: calc(100% - 0.5rem);
-    height: 16rem;
+    height: 19rem;
     padding: 0.5rem;
 
     .form-item {
@@ -445,7 +538,7 @@ export default {
 
   ::v-deep .traffic-table {
     width: 100%;
-    height: 57%;
+    height: 50%;
     padding: 0.5rem 0;
     overflow: hidden;
 

src/views/big-screen/index.vue

@@ -1711,14 +1711,6 @@ export default {
   }
 }
 
-input[aria-hidden="true"] {
-  display: none !important;
-}
-
-.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
-  box-shadow: none;
-}
-
 // 大屏消息弹出框样式
 .screen-message-popover {
   background-color: rgba(0, 0, 0, 0.8);

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

@@ -42,19 +42,13 @@ export default {
         return item.date;
       });
       const yData1 = this.echartList.map((item) => {
-        return item.A1000;
+        return item.hulan;
       });
-      // const yData2 = this.echartList.map((item) => {
+      const yData2 = this.echartList.map((item) => {
-      //   return item.A2001;
+        return item.kengcao;
-      // });
-      // const yData3 = this.echartList.map((item) => {
-      //   return item.A2000;
-      // });
-      const yData4 = this.echartList.map((item) => {
-        return item.A0;
       });
-      const yData5 = this.echartList.map((item) => {
+      const yData3 = this.echartList.map((item) => {
-        return item.A1;
+        return item.sanluowu;
       });
       const chart = echarts.init(this.$refs.trendsChart);
       chart.setOption({
@@ -139,7 +133,7 @@ export default {
         },
         series: [
           {
-            name: "坑槽",
+            name: "护栏缺损",
             type: "line",
             smooth: true,
             areaStyle: {
@@ -167,66 +161,8 @@ export default {
             },
             data: yData1,
           },
-          // {
-          //   name: "块状修补(沥青)",
-          //   type: "line",
-          //   smooth: true,
-          //   areaStyle: {
-          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //       {
-          //         offset: 0,
-          //         color: "#08B4A6",
-          //       },
-          //       {
-          //         offset: 1,
-          //         color: "rgba(8,180,166,0)",
-          //       },
-          //     ]),
-          //   },
-          //   lineStyle: {
-          //     width: 1,
-          //     color: "#08B4A6",
-          //   },
-          //   // 设置节点样式
-          //   showSymbol: false,
-          //   symbol: "circle", // 可以选择 circle, diamond, pin 等
-          //   symbolSize: 10, // 节点大小
-          //   itemStyle: {
-          //     color: "#08B4A6",
-          //   },
-          //   data: yData2,
-          // },
-          // {
-          //   name: "条状修补(沥青)",
-          //   type: "line",
-          //   smooth: true,
-          //   areaStyle: {
-          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //       {
-          //         offset: 0,
-          //         color: "#146fd7",
-          //       },
-          //       {
-          //         offset: 1,
-          //         color: "rgba(20, 111, 215,0)",
-          //       },
-          //     ]),
-          //   },
-          //   lineStyle: {
-          //     width: 1,
-          //     color: "#146fd7",
-          //   },
-          //   // 设置节点样式
-          //   showSymbol: false,
-          //   symbol: "circle", // 可以选择 circle, diamond, pin 等
-          //   symbolSize: 10, // 节点大小
-          //   itemStyle: {
-          //     color: "#146fd7",
-          //   },
-          //   data: yData3,
-          // },
           {
-            name: "横向裂缝",
+            name: "坑槽",
             type: "line",
             smooth: true,
             areaStyle: {
@@ -252,10 +188,10 @@ export default {
             itemStyle: {
               color: "#08B4A6",
             },
-            data: yData4,
+            data: yData2,
           },
           {
-            name: "纵向裂缝",
+            name: "散落物",
             type: "line",
             smooth: true,
             areaStyle: {
@@ -281,7 +217,7 @@ export default {
             itemStyle: {
               color: "#994EFF",
             },
-            data: yData5,
+            data: yData3,
           },
         ],
         dataZoom: [

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

@@ -30,7 +30,7 @@
             slot="append"
             icon="el-icon-search"
             clearable
-            @click="getTableData"
+            @click="getTableDataByCar"
           ></el-button
         ></template>
       </el-input>
@@ -193,7 +193,11 @@ export default {
     this.getTableData();
   },
   methods: {
-    /* 获取表格数据 */
+    /**
+     * @description: 获取表格数据
+     * @param {*} val
+     * @return {*}
+     */
     getTableData() {
       this.timer = setInterval(() => {
         getCarList({ no: this.tableInput }).then(({ code, data }) => {
@@ -206,38 +210,58 @@ export default {
         });
       }, 5000);
       getCarList({ no: this.tableInput }).then(({ code, data }) => {
-          if (code === 200) {
+        if (code === 200) {
-            this.carNum = data.total;
+          this.carNum = data.total;
-            this.tableTotal = data.total;
+          this.tableTotal = data.total;
-            this.onlineNum = data.online;
+          this.onlineNum = data.online;
-            this.inspectionTableData = data.rows;
+          this.inspectionTableData = data.rows;
-          }
+        }
-        });
+      });
     },
 
-    /* 表格详情事件 */
+    /**
+     * @description: 根据车牌号获取表格数据
+     * @param {*}
+     * @return {*}
+     */
+    getTableDataByCar() {
+      clearInterval(this.timer);
+      this.getTableData();
+    },
+
+    /**
+     * @description: 表格详情事件
+     * @param {*} val
+     * @return {*}
+     */
     detailDefect(val) {},
 
-    /* 表格跟车事件 */
+    /**
+     * @description: 表格跟车事件
+     * @param {*} val
+     * @return {*}
+     */
     followCar(val) {
       this.followTitle = "跟车详情";
       this.showCarVisible = true;
     },
 
-    /* 表格视频事件 */
+    /**
+     * @description: 表格视频事件
+     * @param {*} val
+     * @return {*}
+     */
     videoDelete(val) {
       this.dialogItem = val;
       this.viewTitle = "视频查看";
       this.showViewVisible = true;
     },
 
-    /* 页码修改事件 */
+    /**
-    // handleCurrentChange(arg) {
+     * @description: 关闭跟车弹窗事件
-    //   this.pagination.page = arg;
+     * @param {*}
-    //   this.getTableData();
+     * @return {*}
-    // },
+     */
-
-    /* 关闭跟车弹窗事件 */
     followCancel() {
       this.followTitle = "";
       this.showCarVisible = false;
@@ -245,7 +269,11 @@ export default {
       closeWebsocket();
     },
 
-    /* 关闭视频弹窗事件 */
+    /**
+     * @description: 关闭视频弹窗事件
+     * @param {*}
+     * @return {*}
+     */
     viewCancel() {
       this.viewTitle = "";
       this.showViewVisible = false;

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

@@ -14,11 +14,17 @@
       <div class="left">
         <div>
           <div class="name">病害识别总数</div>
-          <div class="value"><span>57875</span>个</div>
+          <div class="value">
+            <span>{{ total }}</span
+            >个
+          </div>
         </div>
         <div>
           <div class="name">新增病害数</div>
-          <div class="value"><span>57875</span>个</div>
+          <div class="value">
+            <span>{{ newTotal }}</span
+            >个
+          </div>
         </div>
       </div>
       <div class="right">
@@ -53,7 +59,7 @@
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
 import * as echarts from "echarts";
 // 接口
-import { getDefectLog } from "@/api/xj/index/index";
+import { getDefectLog, getTotalList } from "@/api/xj/index/index";
 export default {
   name: "DiseaseIndex",
   components: {
@@ -65,6 +71,10 @@ export default {
       diseaseType: "",
       // 下拉框数据
       diseaseOptions: [],
+      // 病害总数
+      total: 0,
+      // 新增病害数
+      newTotal: 0,
       // 新增病害统计数据
       statisticsData: [],
       // 病害类型颜色盘
@@ -79,6 +89,21 @@ export default {
         "#62CFFF",
         "#6A9BFF",
         "#B38EFF",
+        "#3678FF",
+        "#F8A74E",
+        "#04DAD7",
+        "#00D669",
+        "#8448FF",
+        "#F6D566",
+        "#00B1FF",
+        "#62CFFF",
+        "#6A9BFF",
+        "#B38EFF",
+        "#3678FF",
+        "#F8A74E",
+        "#04DAD7",
+        "#00D669",
+        "#8448FF",
       ],
       // 病害类型分布数据
       distributionList: [],
@@ -86,53 +111,57 @@ export default {
   },
   created() {
     this.getChartData();
+    this.getBottomData();
   },
   methods: {
-    /* 获取echart图数据 */
+    /**
+     * @description: 获取上部分echart图数据
+     * @param {*} val
+     * @return {*}
+     */
     getChartData() {
       getDefectLog().then(({ code, data }) => {
         if (code === 200) {
           this.statisticsData = data;
           this.$nextTick(() => {
             this.drawStatisticsChart();
+            // this.drawDistributionChart();
+          });
+        }
+      });
+    },
+
+    /**
+     * @description: 获取底部echart图数据
+     * @param {*}
+     * @return {*}
+     */
+    getBottomData() {
+      getTotalList().then(({ code, data }) => {
+        if (code === 200) {
+          this.total = data.total;
+          this.newTotal = data.today;
+          let all = 0;
+          this.distributionList = data.data.map((item) => {
+            all += item.value;
+            return {
+              value: item.value,
+              name: item.label,
+              rate: `${((item.value / data.total) * 100).toFixed(0)}%`,
+            };
+          });
+          this.$nextTick(() => {
             this.drawDistributionChart();
           });
         }
       });
-      this.distributionList = [
-        {
-          value: 15461,
-          name: "纵向裂缝",
-          rate: "10%",
-        },
-        {
-          value: 1,
-          name: "块状裂缝",
-          rate: "10%",
-        },
-        {
-          value: 6546,
-          name: "龟裂",
-          rate: "10%",
-        },
-        {
-          value: 2718,
-          name: "坑槽",
-          rate: "10%",
-        },
-        {
-          value: 1704,
-          name: "车辙",
-          rate: "10%",
-        },
-        {
-          value: 1,
-          name: "沉陷",
-          rate: "10%",
-        },
-      ];
     },
-    /* 绘制新增病害统计echart图 */
+
+    /**
+     * @description: 绘制新增病害统计echart图
+     * @param {*}
+     * @return {*}
+     */
     drawStatisticsChart() {
       if (this.$refs.statisticsChart) {
         const xData = this.statisticsData.map((item) => {
@@ -265,7 +294,12 @@ export default {
         });
       }
     },
-    /* 绘制病害类型分布图 */
+
+    /**
+     * @description: 绘制病害类型分布图
+     * @param {*}
+     * @return {*}
+     */
     drawDistributionChart() {
       if (this.$refs.distributionChart) {
         const chart = echarts.init(this.$refs.distributionChart);
@@ -445,7 +479,7 @@ export default {
         .distribution-legnd {
           width: 70%;
           height: 100%;
-          padding: 2.6rem 2rem 2rem 2rem;
+          padding: 2.5rem 0;
 
           .scroll-box {
             display: flex;

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

@@ -87,6 +87,9 @@ export default {
           return item.label;
         });
         const y1Data = this.roadChartData.map((item) => {
+          return item.total;
+        });
+        const y2Data = this.roadChartData.map((item) => {
           return item.value;
         });
         const chart = echarts.init(this.$refs.roadChart);
@@ -174,7 +177,7 @@ export default {
                 borderRadius: [3, 3, 0, 0],
                 color: "#38C8D8",
               },
-              data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
+              data: y2Data,
             },
           ],
           dataZoom: [

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

@@ -33,7 +33,7 @@
         </el-table-column>
         <el-table-column prop="bridgePerKm" label="桥隧病害数(个/km)">
         </el-table-column>
-        <el-table-column prop="greenPerKm" label="绿化病害数(个/km)">
+        <el-table-column prop="greenPerKm" label="绿化问题数(个/km)">
         </el-table-column>
       </el-table>
     </div>
@@ -44,7 +44,11 @@
 <script>
 import * as echarts from "echarts";
 // 接口
-import { getRoadCondition, selectTypeList } from "@/api/xj/index/index";
+import {
+  getRoadCondition,
+  getRoadConditionLog,
+  selectTypeList,
+} from "@/api/xj/index/index";
 export default {
   name: "TrafficIndex",
   data() {
@@ -55,14 +59,21 @@ export default {
       itemSelect: "",
       // 路况表格数据
       trafficTableData: [],
+      // echart数据
+      trafficEchartData: [],
     };
   },
   created() {
     this.getTableData();
     this.getSelect();
+    this.getLogData();
   },
   methods: {
-    /* 获取数据栏右上角选项数据 */
+    /**
+     * @description: 获取数据栏右上角选项数据
+     * @param {*}
+     * @return {*}
+     */
     getSelect() {
       selectTypeList().then(({ code, data }) => {
         if (code === 200) {
@@ -71,16 +82,24 @@ export default {
       });
     },
 
-    /* 右上角单选改变事件 */
+    /**
-    changeRadio(){
+     * @description: 右上角单选改变事件
-      this.getTableData()
+     * @param {*}
+     * @return {*}
+     */
+    changeRadio() {
+      this.getTableData();
+      this.getLogData();
     },
 
-    /* 获取表格数据 */
+    /**
+     * @description: 获取表格数据
+     * @param {*}
+     * @return {*}
+     */
     getTableData() {
       getRoadCondition({ type: this.itemSelect }).then(({ code, data }) => {
         if (code === 200) {
-          console.log(data, "ggg");
           this.trafficTableData = data;
           this.$nextTick(() => {
             this.drawTrafficChart();
@@ -88,19 +107,48 @@ export default {
         }
       });
     },
-    /* 绘制柱状图 */
+
+    /**
+     * @description: 获取echart数据
+     * @param {*}
+     * @return {*}
+     */
+    getLogData() {
+      getRoadConditionLog({ type: this.itemSelect }).then(({ code, data }) => {
+        if (code === 200) {
+          this.trafficEchartData = data;
+          this.$nextTick(() => {
+            this.drawTrafficChart();
+          });
+        }
+      });
+    },
+
+    /**
+     * @description: 绘制柱状图
+     * @param {*}
+     * @return {*}
+     */
     drawTrafficChart() {
       if (this.$refs.trafficChart) {
+        const xData = this.trafficEchartData.map((item) => {
+          return item.name;
+        });
+        const y1Data = this.trafficEchartData.map((item) => {
+          return item.road;
+        });
+        const y2Data = this.trafficEchartData.map((item) => {
+          return item.event;
+        });
+        const y3Data = this.trafficEchartData.map((item) => {
+          return item.bridge;
+        });
+        const y4Data = this.trafficEchartData.map((item) => {
+          return item.green;
+        });
         const chart = echarts.init(this.$refs.trafficChart);
         chart.setOption({
-          color: ["#388BD8", "#04DAD7"],
+          color: ["#388BD8", "#04DAD7", "#F8A74E", "#8448FF"],
-          dataZoom: [
-            {
-              type: "inside",
-              start: 0,
-              end: 100,
-            },
-          ],
           title: [
             // 中心比例
             {
@@ -128,18 +176,7 @@ export default {
           },
           xAxis: [
             {
-              data: [
+              data: xData,
-                "1月",
-                "2月",
-                "3月",
-                "4月",
-                "5月",
-                "6月",
-                "7月",
-                "8月",
-                "9月",
-                "10月",
-              ],
               type: "category",
               axisTick: {
                 show: false, //隐藏X轴刻度
@@ -175,7 +212,7 @@ export default {
           ],
           series: [
             {
-              name: "病害修补数量",
+              name: "路面病害数",
               type: "line",
               showSymbol: false,
               smooth: true,
@@ -191,10 +228,10 @@ export default {
                   },
                 ]),
               },
-              data: [400, 600, 1400, 1700, 400, 600, 400, 600, 1400, 1700],
+              data: y1Data,
             },
             {
-              name: "病害数量",
+              name: "交安病害数",
               type: "line",
               showSymbol: false,
               smooth: true,
@@ -210,7 +247,90 @@ export default {
                   },
                 ]),
               },
-              data: [40, 500, 1500, 700, 40, 500, 40, 500, 1500, 700],
+              data: y3Data,
+            },
+            {
+              name: "桥隧病害数",
+              type: "line",
+              showSymbol: false,
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#F8A74E",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
+              },
+              data: y4Data,
+            },
+            {
+              name: "绿化问题数",
+              type: "line",
+              showSymbol: false,
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#8448FF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
+              },
+              data: y2Data,
+            },
+          ],
+          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/xj/inspection/confirmation-management/components/image-dialog.vue

@@ -47,19 +47,16 @@
               </el-select>
             </el-form-item>
             <el-form-item label-width="3rem" label="类型">
-              <el-select
+              <el-cascader
                 v-model="imgForm.defectType"
-                placeholder="请选择路段名称"
+                :options="tableDefect"
-                :style="{ width: '8rem' }"
+                :props="{
+                  checkStrictly: false,
+                  emitPath: false,
+                  children: 'subTypes',
+                }"
                 clearable
-              >
+              ></el-cascader>
-                <el-option
-                  v-for="item in defectTypeList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
             </el-form-item>
             <el-form-item label="公里桩">
               <el-input
@@ -159,10 +156,14 @@ import {
   mergeDefect,
   listDefect,
 } from "@/api/xj/confirmation";
-import { getItemTypes } from "@/api/xj/screen/index";
 export default {
   name: "ImageDialog",
-  props: {},
+  props: {
+    tableDefect: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
       // 左侧图片数据
@@ -179,8 +180,6 @@ export default {
       },
       // 路段下拉数据
       roadTypeList: [],
-      // 病害类型下拉数据
-      defectTypeList: [],
       // 病害状态下拉选项
       defectStatus: [],
       // 分页绑定
@@ -211,7 +210,6 @@ export default {
   },
   created() {
     this.getSegmentList();
-    this.getDefectType();
     this.getDefectStatusList();
   },
   mounted() {
@@ -230,15 +228,6 @@ export default {
       });
     },
 
-    /* 获取病害类型下拉数据 */
-    getDefectType() {
-      getItemTypes({ type: "defect" }).then(({ code, data }) => {
-        if (code === 200) {
-          this.defectTypeList = data;
-        }
-      });
-    },
-
     /* 查询病害状态下拉数据 */
     getDefectStatusList() {
       getDefectStatus().then(({ data, code }) => {
@@ -261,15 +250,13 @@ export default {
 
     /* 获取左侧图片列表 */
     getList() {
-      console.log(11);
-      
       this.loading = true;
       const data = {
         ...this.imgForm,
         ...this.params,
       };
       listDefect(data)
-        .then(({ code,rows }) => {
+        .then(({ code, rows }) => {
           if (code === 200) {
             this.defectData = rows;
             this.loading = false;
@@ -414,7 +401,7 @@ export default {
       // 滚动高度+容器高度  滚动区域高度
       const sidebar = this.$refs.sidebar;
       if (
-        sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 18 &&
+        sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 15 &&
         !this.loading
       ) {
         this.loadMoreImages();
@@ -449,6 +436,7 @@ export default {
     /* 键盘事件 */
     handleKeydown(event) {
       if (event.key === "ArrowUp") {
+        event.preventDefault();
         if (this.currentIndex > 0) {
           this.currentIndex--;
           this.selectedThumbnail = 0; // Reset when changing main images via keyboard
@@ -456,6 +444,7 @@ export default {
           this.updateRects();
         }
       } else if (event.key === "ArrowDown") {
+        event.preventDefault();
         if (this.currentIndex <= this.defectData.length - 1) {
           this.currentIndex === this.defectData.length - 1
             ? this.currentIndex

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

@@ -42,19 +42,17 @@
           clearable
         />
       </el-form-item>
-      <el-form-item label="病害类型" prop="defectType">
+      <el-form-item label="病害类型" prop="paramsDefectType">
-        <el-select
+        <el-cascader
-          v-model="queryParams.defectType"
+          v-model="paramsDefectType"
-          placeholder="请选择病害类型"
+          :options="tableDefect"
+          :props="{
+            checkStrictly: true,
+            emitPath: true,
+            children: 'subTypes',
+          }"
           clearable
-        >
+        ></el-cascader>
-          <el-option
-            v-for="item in tableDefect"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
       </el-form-item>
       <el-form-item label="病害状态" prop="state">
         <el-select
@@ -224,10 +222,7 @@
           <span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="病害类型" align="center" prop="defectType">
+      <el-table-column label="病害类型" align="center" prop="defectTypeName">
-        <template slot-scope="scope">
-          <span>{{ filterDefect(scope.row.defectType) }}</span>
-        </template>
       </el-table-column>
       <el-table-column label="病害状态" align="center" prop="state">
         <template slot-scope="scope">
@@ -315,7 +310,10 @@
       destroy-on-close
       @close="checkCancel"
     >
-      <image-dialog></image-dialog>
+      <image-dialog
+        v-if="showCheckImg"
+        :tableDefect="tableDefect"
+      ></image-dialog>
     </el-dialog>
   </div>
 </template>
@@ -337,6 +335,7 @@ export default {
       // 搜索表单参数
       queryParams: {
         segmentName: "",
+        classType: "",
         defectType: "",
         state: "",
         inspectDirection: "",
@@ -352,6 +351,8 @@ export default {
       },
       // 查询接收表单参数
       searchForm: {},
+      // 病害类型绑定
+      paramsDefectType: [],
       // 采集时间绑定
       dateTime: [],
       // 列表病害状态数据
@@ -420,17 +421,6 @@ export default {
       });
     },
 
-    /* 过滤列表病害类型 */
-    filterDefect(value) {
-      let a = null;
-      [a] = this.tableDefect.filter((item) => {
-        return item.value === value;
-      });
-      if (a) {
-        return a.label;
-      }
-    },
-
     /* 过滤列表病害状态 */
     filterState(value) {
       let a = null;
@@ -469,6 +459,14 @@ export default {
       const phonereg = /^K\d{4}\+\d{3}$/;
       if (this.queryParams.stakeStart) {
         if (phonereg.test(this.queryParams.stakeStart)) {
+          this.queryParams.classType = this.paramsDefectType
+            ? this.paramsDefectType[0]
+            : "";
+          this.queryParams.defectType = this.paramsDefectType
+            ? this.paramsDefectType.length > 1
+              ? this.paramsDefectType[1]
+              : ""
+            : "";
           this.pagination.page = 1;
           this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
           this.getTableList();
@@ -477,6 +475,14 @@ export default {
         }
       } else if (this.queryParams.stakeEnd) {
         if (phonereg.test(this.queryParams.stakeEnd)) {
+          this.queryParams.classType = this.paramsDefectType
+            ? this.paramsDefectType[0]
+            : "";
+          this.queryParams.defectType = this.paramsDefectType
+            ? this.paramsDefectType.length > 1
+              ? this.paramsDefectType[1]
+              : ""
+            : "";
           this.pagination.page = 1;
           this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
           this.getTableList();
@@ -484,6 +490,14 @@ export default {
           this.$modal.msgWarning("请按照格式填写公里桩进行修改");
         }
       } else {
+        this.queryParams.classType = this.paramsDefectType
+          ? this.paramsDefectType[0]
+          : "";
+        this.queryParams.defectType = this.paramsDefectType
+          ? this.paramsDefectType.length > 1
+            ? this.paramsDefectType[1]
+            : ""
+          : "";
         this.pagination.page = 1;
         this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
         this.getTableList();
@@ -507,6 +521,7 @@ export default {
         id: "",
         snapshotId: "",
       };
+      this.paramsDefectType = [];
       this.searchForm = {};
       this.dateTime = [];
       this.getTableList();

src/views/xj/inspection/disease-management/components/merge-dialog.vue

@@ -50,18 +50,16 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="病害类型" prop="defectType">
-              <el-select
+              <el-cascader
-                v-model="mergeForm.defectType"
+                v-model="paramsDefectType"
-                placeholder="请选择病害类型"
+                :options="tableDefect"
+                :props="{
+                  checkStrictly: true,
+                  emitPath: true,
+                  children: 'subTypes',
+                }"
                 clearable
-              >
+              ></el-cascader>
-                <el-option
-                  v-for="item in tableDefect"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
             </el-form-item>
           </el-col>
         </el-row>
@@ -145,10 +143,7 @@
             <span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="病害类型" align="center" prop="defectType">
+        <el-table-column label="病害类型" align="center" prop="defectTypeName">
-          <template slot-scope="scope">
-            <span>{{ filterDefect(scope.row.defectType) }}</span>
-          </template>
         </el-table-column>
         <el-table-column label="病害状态" align="center" prop="state">
           <template slot-scope="scope">
@@ -263,6 +258,7 @@ export default {
         // 道路名称绑定
         segmentName: "",
         // 病害类型绑定
+        classType: "",
         defectType: "",
         // 公里桩绑定
         stakeStart: "",
@@ -274,6 +270,8 @@ export default {
       },
       // 查询表单绑定
       searchForm: {},
+      // 病害类型绑定
+      paramsDefectType: [],
       // 采集时间绑定
       dateTime: [],
       // 列表数据绑定
@@ -327,7 +325,16 @@ export default {
 
     /* 搜索事件 */
     handleQuery() {
-      this.searchForm = JSON.parse(JSON.stringify(this.mergeForm));
+      const data = {
+        ...this.mergeForm,
+        classType: this.paramsDefectType ? this.paramsDefectType[0] : "",
+        defectType: this.paramsDefectType
+          ? this.paramsDefectType.length > 1
+            ? this.paramsDefectType[1]
+            : ""
+          : "",
+      };
+      this.searchForm = JSON.parse(JSON.stringify(data));
       this.getList();
     },
 
@@ -339,6 +346,8 @@ export default {
         segmentName: "",
         // 病害类型绑定
         defectType: "",
+        classType: "",
+        type: "",
         // 公里桩绑定
         stakeStart: "",
         stakeEnd: "",

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

@@ -42,19 +42,17 @@
           clearable
         />
       </el-form-item>
-      <el-form-item label="病害类型" prop="defectType">
+      <el-form-item label="病害类型" prop="paramsDefectType">
-        <el-select
+        <el-cascader
-          v-model="queryParams.defectType"
+          v-model="paramsDefectType"
-          placeholder="请选择病害类型"
+          :options="tableDefect"
+          :props="{
+            checkStrictly: true,
+            emitPath: true,
+            children: 'subTypes',
+          }"
           clearable
-        >
+        ></el-cascader>
-          <el-option
-            v-for="item in tableDefect"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
       </el-form-item>
       <el-form-item label="病害状态" prop="state">
         <el-select
@@ -259,10 +257,7 @@
           <span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="病害类型" align="center" prop="defectType">
+      <el-table-column label="病害类型" align="center" prop="defectTypeName">
-        <template slot-scope="scope">
-          <span>{{ filterDefect(scope.row.defectType) }}</span>
-        </template>
       </el-table-column>
       <el-table-column label="病害状态" align="center" prop="state">
         <template slot-scope="scope">
@@ -395,18 +390,16 @@
             </el-col>
             <el-col :span="12" v-if="dialogTitle === '添加缺陷'">
               <el-form-item label="病害类型" prop="defectType">
-                <el-select
+                <el-cascader
                   v-model="form.defectType"
-                  placeholder="请选择病害类型"
+                  :options="tableDefect"
+                  :props="{
+                    checkStrictly: false,
+                    emitPath: false,
+                    children: 'subTypes',
+                  }"
                   clearable
-                >
+                ></el-cascader>
-                  <el-option
-                    v-for="item in tableDefect"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
               </el-form-item>
             </el-col>
           </el-row>
@@ -580,7 +573,7 @@
                 </p>
                 <p>路段名称：{{ viewForm.segmentName }}</p>
                 <!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
-                <p>病害类型：{{ filterDefect(viewForm.defectType) }}</p>
+                <p>病害类型：{{ viewForm.defectTypeName }}</p>
                 <p>病害长度：{{ viewForm.targetLen }} 米</p>
                 <p>病害id：{{ viewForm.id }}</p>
                 <p>快照id：{{ viewForm.snapshotId }}</p>
@@ -720,6 +713,7 @@ export default {
         size: 10,
         segmentName: "",
         defectType: "",
+        classType: "",
         taskId: "",
         state: "",
         inspectDirection: "",
@@ -733,7 +727,10 @@ export default {
         id: "",
         snapshotId: "",
       },
+      // 日期范围
       dateTime: [],
+      // 病害类型级联下拉绑定
+      paramsDefectType: [],
       // 新增/编辑表单参数
       form: {
         id: null,
@@ -875,21 +872,6 @@ export default {
       });
     },
 
-    /**
-     * @description: 过滤列表病害类型
-     * @param {*} value
-     * @return {*}
-     */
-    filterDefect(value) {
-      let a = null;
-      [a] = this.tableDefect.filter((item) => {
-        return item.value === value;
-      });
-      if (a) {
-        return a.label;
-      }
-    },
-
     /**
      * @description: 过滤列表病害状态
      * @param {*} value
@@ -1017,7 +999,8 @@ export default {
         page: 1,
         size: 10,
         segmentName: "",
-        defectType: [],
+        defectType: "",
+        classType: "",
         taskId: "",
         state: "",
         inspectDirection: "",
@@ -1031,6 +1014,7 @@ export default {
         id: "",
         snapshotId: "",
       };
+      this.paramsDefectType = [];
       this.dateTime = [];
       this.getList();
     },
@@ -1044,6 +1028,14 @@ export default {
       const phonereg = /^K\d{4}\+\d{3}$/;
       if (this.queryParams.stakeStart) {
         if (phonereg.test(this.queryParams.stakeStart)) {
+          this.queryParams.classType = this.paramsDefectType
+            ? this.paramsDefectType[0]
+            : "";
+          this.queryParams.defectType = this.paramsDefectType
+            ? this.paramsDefectType.length > 1
+              ? this.paramsDefectType[1]
+              : ""
+            : "";
           this.queryParams.page = 1;
           this.getList();
         } else {
@@ -1051,12 +1043,28 @@ export default {
         }
       } else if (this.queryParams.stakeEnd) {
         if (phonereg.test(this.queryParams.stakeEnd)) {
+          this.queryParams.classType = this.paramsDefectType
+            ? this.paramsDefectType[0]
+            : "";
+          this.queryParams.defectType = this.paramsDefectType
+            ? this.paramsDefectType.length > 1
+              ? this.paramsDefectType[1]
+              : ""
+            : "";
           this.queryParams.page = 1;
           this.getList();
         } else {
           this.$modal.msgWarning("请按照格式填写公里桩进行修改");
         }
       } else {
+        this.queryParams.classType = this.paramsDefectType
+          ? this.paramsDefectType[0]
+          : "";
+        this.queryParams.defectType = this.paramsDefectType
+          ? this.paramsDefectType.length > 1
+            ? this.paramsDefectType[1]
+            : ""
+          : "";
         this.queryParams.page = 1;
         this.getList();
       }
@@ -1410,6 +1418,7 @@ export default {
     changeView(val) {
       getDetailsBySnapShotId(val).then(({ code, data }) => {
         if (code === 200) {
+          this.viewForm = data;
           console.log(data, "查看弹窗选择改变触发事件");
         }
       });

src/views/xj/inspection/surface-management/components/surface-map.vue

@@ -98,7 +98,7 @@ export default {
             image: new Icon({
               crossOrigin: "anonymous",
               src: require(`@/assets/screen/index/${
-                this.mapLogeList[element.defectType]
+                this.mapLogeList[element.iconType]
               }.png`),
               // size: [40, 40],
               scale: 0.5, // 图标缩放比例
@@ -186,6 +186,7 @@ export default {
             },
             //坐标轴刻度标签
             axisLabel: {
+              interval: 0,
               show: true,
               color: "#616367",
             },

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

@@ -41,19 +41,18 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="病害类型">
+        <el-form-item label="病害类型"
-          <el-select
-            v-model="surfaceForm.defectType"
-            placeholder="请选择病害类型"
-            clearable
           >
-            <el-option
+          <el-cascader
-              v-for="item in defectTypeList"
+            v-model="surfaceForm.defectType"
-              :key="item.value"
+            :options="defectTypeList"
-              :label="item.label"
+            :props="{
-              :value="item.value"
+              checkStrictly: false,
-            />
+              emitPath: false,
-          </el-select>
+              children: 'subTypes',
+            }"
+            clearable
+          ></el-cascader>
         </el-form-item>
         <el-form-item label="">
           <el-button
@@ -133,7 +132,12 @@
 </template>
 
 <script>
-import { getSegment, getDefectList, getCompareList } from "@/api/xj/surface";
+import {
+  getSegment,
+  getDefectList,
+  getDefectSelectList,
+  getCompareList,
+} from "@/api/xj/surface";
 import SurfaceMap from "./components/surface-map.vue";
 export default {
   name: "Surface",
@@ -181,6 +185,7 @@ export default {
   created() {
     this.getSegmentList();
     this.getDefectTypeList();
+    this.getDefectTypeSelect();
   },
   mounted() {},
   methods: {
@@ -193,11 +198,19 @@ export default {
       });
     },
 
-    /* 获取病害类型下拉数据 */
+    /* 获取病害类型级联下拉数据 */
     getDefectTypeList() {
       getDefectList().then(({ code, data }) => {
         if (code === 200) {
           this.defectTypeList = data;
+        }
+      });
+    },
+
+    /* 获取病害类型下拉数据 */
+    getDefectTypeSelect() {
+      getDefectSelectList().then(({ code, data }) => {
+        if (code === 200) {
           data.forEach((item) => {
             this.mapLogeList[item.value] = item.label;
           });
@@ -252,10 +265,7 @@ export default {
       this.dialogImgLeft = item.data;
       if (Object.keys(this.surfaceListRight).length > 0) {
         const rightImg = this.surfaceListRight.data.filter((it) => {
-          if (it.snapshotId === item.data.snapshotId) {
+          return it.snapshotId === item.data.snapshotId && it;
-            return it;
-          }
-          return [];
         });
         this.dialogImgRight = rightImg[0];
       }
@@ -267,10 +277,7 @@ export default {
       this.dialogImgRight = item.data;
       if (Object.keys(this.surfaceListLeft).length > 0) {
         const leftImg = this.surfaceListLeft.data.filter((it) => {
-          if (it.snapshotId === item.data.snapshotId) {
+          return it.snapshotId === item.data.snapshotId && it;
-            return it;
-          }
-          return [];
         });
         this.dialogImgLeft = leftImg[0];
       }

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

@@ -203,6 +203,7 @@ export default {
       getScopeList(params).then(({ code, data }) => {
         if (code === 200) {
           this.sectionList = data.rows;
+          this.tableTotal = data.total;
         }
       });
     },

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

@@ -4,7 +4,7 @@
  * @LastEditors: SunTao 328867980@qq.com
  * @LastEditTime: 2024-10-17 11:24:08
  * @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\components\terminal-add.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: 路线管理-终端管理新增弹窗
 -->
 <template>
   <div class="add-content">
@@ -36,8 +36,8 @@
           </el-col>
         </el-row>
         <el-row :gutter="24">
-          <el-col :span="12">
+          <!-- <el-col :span="12">
-            <el-form-item label="作业范围" prop="areas">
+            <el-form-item label="作业范围" >
               <el-select
                 v-model="dialogForm.areas"
                 placeholder="请选择作业范围"
@@ -52,8 +52,8 @@
                 ></el-option>
               </el-select>
             </el-form-item>
-          </el-col>
+          </el-col> -->
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="备注" prop="remark">
               <el-input
                 type="textarea"
@@ -66,7 +66,7 @@
         </el-row>
       </el-form>
     </div>
-    <div class="bottom-map">
+    <!-- <div class="bottom-map">
       <fssm-map
         @endEoordinate="geteoordinate"
         :editCoordinates="editCoordinates"
@@ -74,7 +74,7 @@
         :showZoom="false"
         :showDraw="false"
       ></fssm-map>
-    </div>
+    </div> -->
     <div class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>

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

@@ -120,6 +120,7 @@
       @close="addCancel"
     >
       <terminal-add
+        v-if="addVisible"
         :dialogItem="dialogItem"
         @addCancel="addCancel"
       ></terminal-add>
@@ -171,12 +172,21 @@ export default {
     this.getTableList();
   },
   methods: {
-    /* 点击搜索事件 */
+    /**
+     * @description: 点击搜索事件
+     * @param {*} val
+     * @return {*}
+     */
     handleQuery() {
       this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
       this.getTableList();
     },
-    /* 点击重置事件 */
+    
+    /**
+     * @description: 点击重置事件
+     * @param {*} val
+     * @return {*}
+     */
     resetQuery() {
       this.sectionForm = {
         // segmentCode: "",
@@ -185,7 +195,12 @@ export default {
       this.searchForm = {};
       this.getTableList();
     },
-    /* 获取列表数据 */
+
+    /**
+     * @description: 获取列表数据
+     * @param {*} val
+     * @return {*}
+     */
     getTableList() {
       const params = {
         ...this.searchForm,
@@ -197,7 +212,12 @@ export default {
         }
       });
     },
-    /* 点击新增 */
+
+    /**
+     * @description: 点击新增
+     * @param {*} val
+     * @return {*}
+     */
     handleAdd() {
       this.addTitle = "新增设备";
       this.dialogItem = {
@@ -205,15 +225,30 @@ export default {
       };
       this.addVisible = true;
     },
-    /* 列表选择改变事件 */
+
+    /**
+     * @description: 列表选择改变事件
+     * @param {*} selection
+     * @return {*}
+     */
     handleSelectionChange(selection) {
       this.checkIds = selection.map((item) => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
-    /* 列表查看事件 */
+
+    /**
+     * @description: 列表查看事件
+     * @param {*} val
+     * @return {*}
+     */
     viewTable() {},
-    /* 列表修改事件 */
+
+    /**
+     * @description: 列表修改事件
+     * @param {*} val
+     * @return {*}
+     */
     editTable() {
       this.addTitle = "修改设备";
       this.dialogItem = {
@@ -221,7 +256,12 @@ export default {
       };
       this.addVisible = true;
     },
-    /* 列表删除/批量删除事件 */
+
+    /**
+     * @description: 列表删除/批量删除事件
+     * @param {*} row
+     * @return {*}
+     */
     deleteTable(row) {
       const checkIds = row ? [row.id] : this.checkIds;
       if (!checkIds.length) {
@@ -240,17 +280,32 @@ export default {
         })
         .catch(() => {});
     },
-    /* 切换分页 */
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
     handleCurrentChange(arg) {
       this.pagination.page = arg;
       this.getTableList();
     },
-    /* 切换每条/页 */
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
     handleSizeChange(arg) {
       this.pagination.size = arg;
       this.getTableList();
     },
-    /* 关闭弹窗事件 */
+
+    /**
+     * @description: 关闭弹窗事件
+     * @param {*} val
+     * @return {*}
+     */
     addCancel() {
       this.addTitle = "";
       this.dialogItem = {};