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

2024-02-29 23:26:32 +08:00
parent d11401fd12
commit b2a31c28de
10 changed files with 127 additions and 35 deletions
--- a/.drone.yml
+++ b/.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
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -409,7 +409,7 @@ body,
    right: 119px;
    display: flex;

-    .choose-time {
+    .choose-day {
      margin-right: 40px;

      .el-date-editor {
--- a/src/components/chooseTime/index.vue
+++ b/src/components/chooseTime/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;

--- a/src/components/chooseMonth/index.vue
+++ b/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>
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/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({});
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/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({
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/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,
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/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({
--- a/src/views/edit/edit.vue
+++ b/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){
-      modelEquipmentList.value=[]
+    if (modelEquipmentList.value === null) {
+      modelEquipmentList.value = []
    }
    const data = {
      tunnelId: tunnelId,
-      tunnelName: form.value.tunnelName,
-      tunnelAlias: form.value.tunnelAlias,
-      serialNumber: form.value.serialNumber,
-      remarks: form.value.remarks,
-      constructionLength: form.value.constructionLength,
+      ...form.value,
      tunnelLength: form.value.totalLength,
-      isDefault: form.value.isDefault,
      modelEquipmentList: modelEquipmentList.value,
    };
-     editTunnel(data).then((res) => {
-       if (res?.code === 1000) {
-         ElMessage.success(res.msg);
-         router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
-       } else {
-         ElMessage.error(res.msg);
-       }
-     });
+    editTunnel(data).then((res) => {
+      if (res?.code === 1000) {
+        ElMessage.success(res.msg);
+        router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+      } else {
+        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;
--- a/src/views/tunnel-manage/index.vue
+++ b/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;