fix：预警设置页面

src/api/xj/warnSetup.js

@@ -0,0 +1,20 @@
+/*
+ * @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 09:26:24
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-05 13:54:44
+ * @FilePath: \znxjxt-ui\src\api\xj\disease.js
+ * @Description: 巡检信息-预警设置
+ */
+import request from "@/utils/request";
+
+// 查询列表病害类型
+export function getDefectList(params) {
+  return request({
+    // 病害类型下拉
+    // url: "/metadata/defectType",
+    url: "/bigscreen/v2/getDefectTypesDrowDown",
+    method: "get",
+    params,
+  });
+}

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

@@ -74,9 +74,9 @@
             <i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
           </el-tooltip> -->
         </el-form-item>
-        <el-form-item class="form-item" label="时间筛选" prop="dataTime">
+        <el-form-item class="form-item" label="时间筛选" prop="dateTime">
           <el-date-picker
-            v-model="dataTime"
+            v-model="dateTime"
             type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
@@ -207,7 +207,7 @@ export default {
         state: "",
       },
       // 时间选择筛选
-      dataTime: [],
+      dateTime: [],
       // 传接口的查询条件
       searchForm: {},
       // 路线名称下拉数据
@@ -333,6 +333,8 @@ export default {
           this.$modal.msgWarning("请按照格式填写公里桩进行修改");
         }
       } else {
+        console.log(this.dateTime,'ssssssss');
+        
         this.pagination.page = 1;
         const data = {
           ...this.trafficForm,
@@ -364,7 +366,7 @@ export default {
         // 病害状态
         state: "",
       };
-      this.dataTime = [];
+      this.dateTime = [];
       this.getData();
     },
 

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

@@ -93,6 +93,15 @@ export default {
         "#4C83FF",
         "#FC5976",
         "#5B40B6",
+        "#18F7FF",
+        "#FFEA68",
+        "#AE74F3",
+        "#6FC36F",
+        "#FF8F5F",
+        "#6FC36F",
+        "#4C83FF",
+        "#FC5976",
+        "#5B40B6",
       ],
       // echart数据
       dataList: [],

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

@@ -133,7 +133,7 @@ export default {
         },
         series: [
           {
-            name: "护栏缺损",
+            name: "护栏损坏",
             type: "line",
             smooth: true,
             areaStyle: {

src/views/xj/inspection-warn/warning-setup/components/add-setup.vue

@@ -0,0 +1,159 @@
+
+
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-01-08 11:56:02
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-01-08 13:52:47
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\components\add-setup.vue
+ * @Description: 预警中心-预警设置-新增/编辑组件
+-->
+<template>
+  <div class="add-setup">
+    <el-form
+      class="addForm"
+      ref="warningSetupForm"
+      :model="warningSetupForm"
+      :rules="rules"
+      label-width="7rem"
+    >
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="病害类型" prop="defectType">
+            <el-cascader
+              placeholder="请选择病害类型"
+              v-model="warningSetupForm.defectType"
+              :options="tableDefect"
+              :props="{
+                checkStrictly: false,
+                emitPath: false,
+                children: 'subTypes',
+              }"
+              style="width: 100%"
+              clearable
+            ></el-cascader>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="预警病害长度" prop="targetLen">
+            <el-input-number
+              v-model="warningSetupForm.targetLen"
+              :min="0"
+              placeholder="请输入预警病害长度"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="预警病害面积" prop="targetArea">
+            <el-input-number
+              v-model="warningSetupForm.targetArea"
+              :min="0"
+              placeholder="请输入预警病害面积"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import m from "diagram-js/lib/core";
+
+export default {
+  name: "AddSetup",
+  props: {
+    // 病害类型
+    tableDefect: {
+      type: Array,
+      default: () => [],
+    },
+    // 接收父组件传过来的数据
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {},
+  data() {
+    return {
+      // 预警设置表单
+      warningSetupForm: {
+        // 病害类型
+        defectType: "",
+        // 预警病害长度
+        targetLen: null,
+        // 预警病害面积
+        targetArea: null,
+      },
+      // 表单验证规则
+      rules: {
+        defectType: [
+          { required: true, message: "请选择病害类型", trigger: "change" },
+        ],
+        targetLen: [
+          { required: true, message: "请输入预警病害长度", trigger: "blur" },
+        ],
+        targetArea: [
+          { required: true, message: "请输入预警病害面积", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  watch: {
+    dialogItem: {
+      handler(newVal) {
+        if (Object.keys(newVal).length > 0) {
+          console.log(newVal, "sddd");
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    /**
+     * @description: 点击确定事件
+     * @return {*}
+     */
+    submitForm() {
+      this.$refs.warningSetupForm.validate((valid) => {
+        if (valid) {
+          console.log(this.warningSetupForm);
+        }
+      });
+    },
+
+    /**
+     * @description: 点击取消事件
+     * @return {*}
+     */
+    cancel() {
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add-setup {
+  width: 100%;
+  height: 100%;
+}
+
+/* 页脚 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/views/xj/inspection-warn/warning-setup/index.vue

@@ -0,0 +1,367 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-01-08 11:56:02
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-01-08 13:52:47
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\index.vue
+ * @Description: 预警中心-预警设置
+-->
+<template>
+  <div class="content">
+    <el-form
+      :model="setupForm"
+      ref="setupForm"
+      size="small"
+      :inline="true"
+      label-width="5rem"
+    >
+      <el-form-item label="病害类型" prop="paramsDefectType">
+        <el-cascader
+          v-model="paramsDefectType"
+          :options="tableDefect"
+          :props="{
+            checkStrictly: true,
+            emitPath: true,
+            children: 'subTypes',
+          }"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+
+      <el-form-item label="病害长度" prop="lengthRange">
+        <el-input-number
+          v-model="setupForm.minLen"
+          controls-position="right"
+          placeholder="最小长度"
+          :min="0"
+        ></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number
+          v-model="setupForm.maxLen"
+          controls-position="right"
+          placeholder="最大长度"
+          :min="0"
+        ></el-input-number>
+      </el-form-item>
+
+      <el-form-item label="病害面积" prop="areaRange">
+        <el-input-number
+          v-model="setupForm.minArea"
+          controls-position="right"
+          placeholder="最小面积"
+          :min="0"
+        ></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number
+          v-model="setupForm.maxArea"
+          controls-position="right"
+          placeholder="最大面积"
+          :min="0"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:defect:add']"
+          >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete(null)"
+          v-hasPermi="['system:defect:remove']"
+          >删除
+        </el-button>
+      </el-col>
+    </el-row>
+    <!-- 表格 -->
+    <el-table
+      ref="setupTable"
+      :data="setupList"
+      v-loading="loading"
+      @selection-change="handleSelectionChange"
+      style="width: 100%"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号"> </el-table-column>
+      <el-table-column
+        width="200"
+        label="时间"
+        align="center"
+        prop="segmentName"
+      >
+        <template slot-scope="scope">
+          <span class="table-index">asd</span>
+          {{ scope.row.segmentName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="消息内容" align="center" prop="stakeStart" />
+      <el-table-column label="车牌号" align="center" prop="stakeEnd" />
+      <el-table-column label="设备id" align="center" prop="stakeEnd" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:defect:edit']"
+            >编辑
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:defect:remove']"
+            >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination
+        background
+        :current-page.sync="pagination.page"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size.sync="pagination.size"
+        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableTotal"
+      >
+      </el-pagination>
+    </div>
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog
+      title="新增预警设置"
+      :visible.sync="addVisible"
+      width="40rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="addCancel"
+    >
+      <add-setup
+        v-if="addVisible"
+        :tableDefect="tableDefect"
+        :dialogItem="dialogItem"
+        @cancel="addCancel"
+      ></add-setup>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getDefectList } from "@/api/xj/warnSetup";
+import AddSetup from "./components/add-setup.vue";
+export default {
+  name: "WarningSetup",
+  components: {
+    AddSetup,
+  },
+  data() {
+    return {
+      // 预警设置表单
+      setupForm: {},
+      // 病害类型绑定
+      paramsDefectType: [],
+      // 病害类型下拉
+      tableDefect: [],
+      // 预警设置列表
+      setupList: [],
+      // 预警设置列表总数
+      tableTotal: 0,
+      // 列表加载状态
+      loading: false,
+      // 分页
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 列表已选数组
+      checkIds: [],
+      // 非多个禁用
+      multiple: true,
+      // 新增弹窗是否显示
+      addVisible: false,
+      //   传弹窗数据
+      dialogItem: {},
+    };
+  },
+  created() {
+    this.getTableDefect();
+    this.getTableData();
+  },
+  methods: {
+    /**
+     * @description: 获取列表病害类型对应数据
+     * @param {*} val
+     * @return {*}
+     */
+    getTableDefect() {
+      getDefectList().then(({ code, data }) => {
+        if (code === 200) {
+          this.tableDefect = data;
+        }
+      });
+    },
+
+    /**
+     * @description: 获取预警设置列表数据
+     * @param {*}
+     * @return {*}
+     */
+    getTableData() {
+      this.setupList = [{ stakeStart: "assssssssasd" }];
+    },
+
+    /**
+     * @description: 点击查询事件
+     * @param {*}
+     * @return {*}
+     */
+    handleQuery() {},
+
+    /**
+     * @description: 点击重置事件
+     * @param {*}
+     * @return {*}
+     */
+    resetQuery() {},
+
+    /**
+     * @description: 列表选择改变事件
+     * @param {*}
+     * @return {*}
+     */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+      this.multiple = !selection.length;
+    },
+
+    /**
+     * @description: 点击新增事件
+     * @param {*}
+     * @return {*}
+     */
+    handleAdd() {
+      this.addVisible = true;
+      this.dialogItem = {};
+    },
+
+    /**
+     * @description: 点击删除事件
+     * @param {*} row
+     * @return {*}
+     */
+    handleDelete(row) {
+      const checkIds = row ? [row.id] : this.checkIds;
+      if (!checkIds.length) {
+        this.$modal.msgWarning("请选择要删除的记录");
+        return;
+      }
+      this.$modal
+        .confirm(`是否确认删除选中的${checkIds.length}条记录？`)
+        .then(() => {
+          //   return deleteRoad(checkIds);
+        })
+        .then(() => {
+          this.getRoadList();
+          this.$refs.defectTable.clearSelection();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+
+    /**
+     * @description: 点击编辑事件
+     * @param {*} row
+     * @return {*}
+     */
+    handleUpdate(row) {
+      this.dialogItem = row;
+      this.addVisible = true;
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getTableData();
+    },
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getTableData();
+    },
+
+    /**
+     * @description: 新增弹窗取消事件
+     * @param {*}
+     * @return {*}
+     */
+    addCancel() {
+      this.addVisible = false;
+      this.dialogItem = {};
+      this.getTableData();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.content {
+  width: 100%;
+  height: calc(100vh - 5.4rem);
+  padding: 1rem;
+}
+
+.mb8 {
+  margin-bottom: 0.5rem;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+</style>

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

@@ -468,7 +468,11 @@ export default {
     this.getTaskSelectList();
   },
   methods: {
-    /* 获取道路名称下拉数据 */
+    /**
+     * @description: 获取道路名称下拉数据
+     * @param {*}
+     * @return {*}
+     */
     getSegmentList() {
       getSegment().then(({ code, data }) => {
         if (code === 200) {
@@ -476,8 +480,12 @@ export default {
         }
       });
     },
-
+    
-    /* 获取路产类型下拉数据 */
+    /**
+     * @description: 获取路产类型下拉数据
+     * @param {*}
+     * @return {*}
+     */
     getRoadTypeList() {
       getRoadType().then(({ code, data }) => {
         if (code === 200) {
@@ -486,7 +494,11 @@ export default {
       });
     },
 
-    /* 路产状态下拉数据 */
+    /**
+     * @description: 获取路产状态下拉数据
+     * @param {*}
+     * @return {*}
+     */
     getDefectStatusList() {
       getDefectStatus().then(({ data, code }) => {
         if (code === 200) {
@@ -495,7 +507,11 @@ export default {
       });
     },
 
-    /* 获取巡检任务下拉数据 */
+    /**
+     * @description: 获取巡检任务下拉数据
+     * @param {*}
+     * @return {*}
+     */
     getTaskSelectList() {
       getTaskList().then(({ data, code }) => {
         if (code === 200) {
@@ -504,7 +520,11 @@ export default {
       });
     },
 
-    /* 点击搜索事件 */
+    /**
+     * @description: 点击搜索事件
+     * @param {*}
+     * @return {*}
+     */
     handleQuery() {
       const phonereg = /^K\d{4}\+\d{3}$/;
       if (this.queryParams.stakeStart) {
@@ -530,7 +550,11 @@ export default {
       }
     },
 
-    /* 点击重置事件 */
+    /**
+     * @description: 点击重置事件
+     * @param {*}
+     * @return {*}
+     */
     resetQuery() {
       this.searchForm = {};
       this.queryParams = {
@@ -548,7 +572,11 @@ export default {
       this.getRoadList();
     },
 
-    /* 获取列表数据 */
+    /**
+     * @description: 获取列表数据
+     * @param {*}
+     * @return {*}
+     */
     getRoadList() {
       const params = {
         ...this.pagination,
@@ -564,7 +592,11 @@ export default {
       });
     },
 
-    /* 过滤列表路产类型 */
+    /**
+     * @description: 过滤列表路产类型
+     * @param {*} value
+     * @return {*}
+     */
     filterDefect(value) {
       let a = null;
       [a] = this.roadType.filter((item) => {
@@ -575,7 +607,11 @@ export default {
       }
     },
 
-    /* 过滤路产状态 */
+    /**
+     * @description: 过滤路产状态
+     * @param {*} value
+     * @return {*}
+     */
     filterState(value) {
       let a = null;
       [a] = this.defectStatus.filter((item) => {
@@ -586,7 +622,11 @@ export default {
       }
     },
 
-    /* 点击新增事件 */
+    /**
+     * @description: 点击新增事件
+     * @param {*}
+     * @return {*}
+     */
     handleAdd() {
       this.addVisible = true;
       this.addTitle = "添加路产";
@@ -595,7 +635,11 @@ export default {
       };
     },
 
-    /* 点击删除事件 */
+    /**
+     * @description: 点击删除事件
+     * @param {*} row
+     * @return {*}
+     */
     handleDelete(row) {
       const checkIds = row ? [row.id] : this.checkIds;
       if (!checkIds.length) {
@@ -615,10 +659,18 @@ export default {
         .catch(() => {});
     },
 
-    /* 点击导出事件 */
+    /**
+     * @description: 点击导出事件
+     * @param {*}
+     * @return {*}
+     */
     handleExport() {},
 
-    /* 批量确认事件 */
+    /**
+     * @description: 批量确认事件
+     * @param {*}
+     * @return {*}
+     */
     handleUpdateBatch() {
       if (this.checkIds.length > 0) {
         changeRoad(this.checkIds).then(({ code, data }) => {
@@ -633,14 +685,22 @@ export default {
       }
     },
 
-    /* 列表选择改变事件 */
+    /**
+     * @description: 列表选择改变事件
+     * @param {*} selection
+     * @return {*}
+     */
     handleSelectionChange(selection) {
       this.checkIds = selection.map((item) => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
 
-    /* 列表-点击修改事件 */
+    /**
+     * @description: 列表-点击修改事件
+     * @param {*} item
+     * @return {*}
+     */
     handleUpdate(item) {
       this.addVisible = true;
       this.addTitle = "修改路产";
@@ -650,7 +710,11 @@ export default {
       };
     },
 
-    /* 列表-点击查看事件 */
+    /**
+     * @description: 列表-点击查看事件
+     * @param {*} item
+     * @return {*}
+     */
     viewDefect(item) {
       this.viewVisible = true;
       this.dialogItem = {
@@ -659,19 +723,31 @@ export default {
       };
     },
 
-    /* 切换分页 */
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
     handleCurrentChange(arg) {
       this.pagination.page = arg;
       this.getRoadList();
     },
 
-    /* 切换每条/页 */
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
     handleSizeChange(arg) {
       this.pagination.size = arg;
       this.getRoadList();
     },
 
-    /* 关闭新增/编辑弹窗 */
+    /**
+     * @description: 关闭新增/编辑弹窗
+     * @param {*}
+     * @return {*}
+     */
     addCancel() {
       this.addVisible = false;
       this.dialogItem = { title: "添加路产" };
@@ -679,19 +755,31 @@ export default {
       this.getRoadList();
     },
 
-    /* 关闭查看弹窗 */
+    /**
+     * @description: 关闭查看弹窗
+     * @param {*}
+     * @return {*}
+     */
     viewCancel() {
       this.viewVisible = false;
       this.dialogItem = { title: "添加路产" };
     },
 
-    /* 打开查看图片弹窗 */
+    /**
+     * @description: 打开查看图片弹窗
+     * @param {*} item
+     * @return {*}
+     */
     showScreenImg(item) {
       this.currentImageItem = item;
       this.showImageDialog = true;
     },
 
-    /* 图片位置信息获取 */
+    /**
+     * @description: 图片位置信息获取
+     * @param {*}
+     * @return {*}
+     */
     updateRects() {
       this.rects = [];
       this.rectsItem = {};
@@ -708,7 +796,11 @@ export default {
       // this.rectsItem = this.defectData[this.currentIndex];
     },
 
-    /* 图片红框位置 */
+    /**
+     * @description: 图片红框位置
+     * @param {*} { left, top, width, height }
+     * @return {*}
+     */
     getRectStyle({ left, top, width, height }) {
       const image = this.$refs.mainImage;
       const container = this.$refs.imageContainer;
@@ -735,7 +827,11 @@ export default {
       };
     },
 
-    /* 关闭查看图片弹窗 */
+    /**
+     * @description: 关闭查看图片弹窗
+     * @param {*}
+     * @return {*}
+     */
     imgCancel() {
       this.showImageDialog = false;
       this.currentImageItem = {};