feat : 隧道管理新增/修改框添加新字段输入框

.drone.yml

@@ -16,7 +16,7 @@ steps:
       - export NODE_MODULES_PATH=`pwd`/node_modules
       # - npm config set registry https://registry.npm.taobao.org
       - set NODE_OPTIONS=--openssl-legacy-provider
-      - npm install
+#      - npm install
       - npm run build
       - echo $NODE_MODULES_PATH
       - cp -r dist /app/build/$DRONE_REPO_NAME

src/assets/styles/index.scss

@@ -409,7 +409,7 @@ body,
     right: 119px;
     display: flex;
 
-    .choose-time {
+    .choose-day {
       margin-right: 40px;
 
       .el-date-editor {

src/components/chooseDay/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="choose-time">
+  <div class="choose-day">
     <el-date-picker
         v-model="selectButton"
         type="date"
@@ -7,7 +7,7 @@
         size="large"
         value-format="YYYY-MM-DD"
         @change="dataSelect"
-        popper-class="choose-time-popper"
+        popper-class="choose-day-popper"
         :disabled-date="disabledDate"
     />
   </div>
@@ -41,7 +41,7 @@ defineExpose({
   border: 2px solid #0F82AF !important;
 }
 
-.choose-time-popper {
+.choose-day-popper {
   margin-left: 0 !important;
   width: auto !important;
 

src/components/chooseMonth/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="choose-time">
+  <div class="choose-day">
     <el-date-picker
         v-model="selectButton"
         type="month"
         placeholder="选择月"
         @change="dataSelect"
         value-format="YYYY-MM-DD"
-        popper-class="choose-time-popper"
+        popper-class="choose-day-popper"
         :disabled-date="disabledDate"
     />
   </div>

src/components/content/airInfo/AirInfo.vue

@@ -33,7 +33,7 @@
           <div style="width: 1px;"></div>
         </div>
         <div class="time-select">
-          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
@@ -53,7 +53,7 @@ import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
-import ChooseTime from "@/components/chooseTime/index.vue"
+import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 
 let myEcharts = reactive({});

src/components/content/badGasInfo/BadGasInfo.vue

@@ -34,7 +34,7 @@
           <div style="width: 1px"></div>
         </div>
         <div class="time-select">
-          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef"  @select="daySelect"/>
+          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef"  @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
@@ -54,7 +54,7 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
 import * as echarts from "echarts";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
 import {getBadGasEchartsInfo} from "@/api/largeScreen";
-import ChooseTime from "@/components/chooseTime/index.vue"
+import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 
 const props = defineProps({

src/components/content/fanInfo/FanInfo.vue

@@ -97,7 +97,7 @@
           <div style="width: 1px;"></div>
         </div>
         <div class="time-select">
-          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
@@ -116,7 +116,7 @@
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
-import ChooseTime from "@/components/chooseTime/index.vue"
+import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import {
   editFrequency,

src/components/content/windPressure/WindPressureList.vue

@@ -23,7 +23,7 @@
           <div style="width: 1px;"></div>
         </div>
         <div class="time-select">
-          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
@@ -43,7 +43,7 @@ import WindPressureItem from "./childComps/WindPressureItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
-import ChooseTime from "@/components/chooseTime/index.vue"
+import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 
 const props = defineProps({

src/views/edit/edit.vue

@@ -28,6 +28,25 @@
         <el-form-item label="施工长度">
           <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
         </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间" prop="upTime">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率"/>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间" prop="dropTime">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率"/>
+          </el-form-item>
+        </div>
         <el-form-item label="是否默认">
           <el-radio-group v-model="form.isDefault">
             <el-radio :label="true">是</el-radio>
@@ -61,6 +80,11 @@ const form = ref({
   tunnelName: "",
   serialNumber: "",
   totalLength: "",
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
   isDefault: false,
   remarks: "",
 });
@@ -86,35 +110,47 @@ const handleGoTunnelMgr = () => {
 const getTunnelInfo = () => {
   initSceneData(tunnelId).then((res) => {
     modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
-    if(modelEquipmentList.value===null){
+    if (modelEquipmentList.value === null) {
-      modelEquipmentList.value=[]
+      modelEquipmentList.value = []
     }
     const data = {
       tunnelId: tunnelId,
-      tunnelName: form.value.tunnelName,
+      ...form.value,
-      tunnelAlias: form.value.tunnelAlias,
-      serialNumber: form.value.serialNumber,
-      remarks: form.value.remarks,
-      constructionLength: form.value.constructionLength,
       tunnelLength: form.value.totalLength,
-      isDefault: form.value.isDefault,
       modelEquipmentList: modelEquipmentList.value,
     };
-     editTunnel(data).then((res) => {
+    editTunnel(data).then((res) => {
-       if (res?.code === 1000) {
+      if (res?.code === 1000) {
-         ElMessage.success(res.msg);
+        ElMessage.success(res.msg);
-         router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+        router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
-       } else {
+      } else {
-         ElMessage.error(res.msg);
+        ElMessage.error(res.msg);
-       }
+      }
-     });
+    });
   })
 }
-const handleSave =  () => {
+const handleSave = () => {
   getTunnelInfo()
 };
 </script>
 <style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
 #main {
   position: relative;
   height: 100%;
@@ -188,7 +224,7 @@ const handleSave =  () => {
     position: absolute;
     top: 250px;
     left: 80px;
-    width: 830px;
+    width: 950px;
     //height: 500px;
     background-image: url(@/assets/images/transducer/bg.png);
     padding: 20px 30px;

src/views/tunnel-manage/index.vue

@@ -102,6 +102,25 @@
         <el-form-item label="施工长度" prop="constructionLength">
           <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
         </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间" prop="upTime">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率"/>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间" prop="dropTime">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率"/>
+          </el-form-item>
+        </div>
         <el-form-item label="是否默认">
           <el-radio-group v-model="form.isDefault">
             <el-radio :label="true">是</el-radio>
@@ -156,7 +175,12 @@ const formRules = ref({
     {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
   ],
   totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
-  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}]
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+  referenceFrequency: [{required: true, message: '请输入基准频率', trigger: ['blur', 'change']}],
+  upTime: [{required: true, message: '请选择升频时间', trigger: ['blur', 'change']}],
+  upFrequency: [{required: true, message: '请输入升频率', trigger: ['blur', 'change']}],
+  dropTime: [{required: true, message: '请选择降频时间', trigger: ['blur', 'change']}],
+  dropFrequency: [{required: true, message: '请输入降频率', trigger: ['blur', 'change']}]
 })
 const clickModel = ref(1)
 const showFirst = ref(true)
@@ -235,6 +259,11 @@ const form = ref({
   tunnelAlias: '',
   serialNumber: '',
   totalLength: '',
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
   remarks: '',
   isDefault: false
 });
@@ -305,6 +334,7 @@ const handleCurrentChange = (val) => {
   getList()
 }
 const handleSubmit = (instance) => {
+  console.log('form.value', form.value)
   if (!instance) return
   instance.validate(async (valid) => {
     if (!valid) return
@@ -373,6 +403,11 @@ const restFrom = () => {
     tunnelAlias: '',
     serialNumber: '',
     totalLength: '',
+    referenceFrequency: '',
+    upTime: '',
+    upFrequency: '',
+    dropTime: '',
+    dropFrequency: '',
     remarks: '',
     isDefault: false
   }
@@ -381,6 +416,10 @@ const handleAdd = () => {
   restFrom()
   title.value = '新增隧道'
   isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
 }
 const getImageUrl = (name) => {
   return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
@@ -433,6 +472,23 @@ const handleMoreDelete = () => {
   font-size: 35px;
 }
 
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
 .site-name {
   position: absolute;
   left: 250px;
@@ -521,7 +577,7 @@ const handleMoreDelete = () => {
   border-radius: 20px;
   padding: 30px 40px;
   box-sizing: border-box;
-  margin: 458px auto 0 auto;
+  //margin: 458px auto 0 auto;
 
   .el-dialog__header {
     padding: 0;