邓洁: 接口及细节优化

src/api/largeScreen.js

@@ -42,3 +42,27 @@ export const getFanEchartsInfo = (equipmentId) => {
     method: 'get'
   })
 }
+//风机频率修改
+export const editFrequency = (data) => {
+  return request({
+    url: '/tunnel/large/screen/frequency',
+    method: 'put',
+    data
+  })
+}
+//风机运行模式切换
+export const editFrequencyModelSwitch = (data) => {
+  return request({
+    url: '/tunnel/large/screen/model/switch',
+    method: 'post',
+    data
+  })
+}
+//风机开关切换
+export const editFrequencyOperationSwitch = (data) => {
+  return request({
+    url: '/tunnel/large/screen/operation/switch',
+    method: 'post',
+    data
+  })
+}

src/components/content/airInfo/AirInfo.vue

@@ -238,8 +238,7 @@ const initChart = (type, values) => {
         let content = `
           <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
             <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
-            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">进风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
+            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
-            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">出风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
           </div>`;
         return content;
       },

src/components/content/fanInfo/FanInfo.vue

@@ -24,14 +24,14 @@
                   <div
                       id="auto"
                       :class="{ active: item.running }"
-                      @click="item.running = true"
+                      @click="item.running = true;editOperate(item)"
                   >
                     启动
                   </div>
                   <div
                       id="stop"
                       :class="{ active: !item.running }"
-                      @click="item.running = false"
+                      @click="item.running = false;editOperate(item)"
                   >
                     停止
                   </div>
@@ -39,20 +39,27 @@
               </div>
               <div class="power">
                 <div class="check-box">
-                  <el-radio-group v-model="item.autoMode">
+                  <el-radio-group v-model="item.autoMode" @change="changeModel(item)">
                     <el-radio :label="true">自动</el-radio>
                     <el-radio :label="false">手动</el-radio>
                   </el-radio-group>
                 </div>
                 <div class="edit-power">
-                  <span style="color: white">当前功率</span>
+                  <span style="color: white">给定频率</span>
-                  <span class="units"
+                  <!--                  <span class="units"-->
-                  ><input
+                  <!--                  ><input-->
-                      type="number"
+                  <!--                      type="number"-->
-                      min="0"
+                  <!--                      min="0"-->
-                      v-model="item.frequencySetting"
+                  <!--                      v-model="item.frequencySetting"-->
-                      :disabled="item.autoMode"
+                  <!--                      onchange="changeFrequency(item)"-->
-                  /></span>
+                  <!--                      :disabled="item.autoMode"-->
+                  <!--                  /></span>-->
+                  <el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
+                            @change="changeFrequency(item)">
+                    <template #suffix>
+                      <span>Hz</span>
+                    </template>
+                  </el-input>
                 </div>
               </div>
             </div>
@@ -108,10 +115,16 @@
 <script setup>
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
-import {getFanEchartsInfo} from "../../../api/largeScreen";
+import {
+  editFrequency,
+  editFrequencyModelSwitch,
+  editFrequencyOperationSwitch,
+  getFanEchartsInfo
+} from "../../../api/largeScreen";
 
 const props = defineProps({
   list: Array,
+  tunnelId: Number,
   fanData: Array,
   transducerData: Array,
   loading: Number,
@@ -145,6 +158,9 @@ let myEcharts = reactive({});
 watch(() => props.loading, (now) => {
   props.loading = now
 }, {deep: true});
+watch(() => props.tunnelId, (now) => {
+  props.tunnelId = now
+}, {deep: true});
 watch(() => props.transducerData, (now) => {
   getTransData(now.frequencyChangerList)
 }, {deep: true});
@@ -178,6 +194,47 @@ watch(() => props.list, (now) => {
   })
   handleOnMounted()
 }, {deep: true});
+const packageData = (item, type, flag) => {
+  let number = 0
+  if (item.equipmentType === "frequency1") {
+    number = 1
+  } else if (item.equipmentType === "frequency2") {
+    number = 2
+  }
+  if (flag) {
+    return {
+      number: number,
+      value: type,//浮点数
+      tunnelId: props.tunnelId,
+    }
+  } else {
+    return {
+      number: number,
+      state: type === true ? 0 : 1,
+      tunnelId: props.tunnelId,
+    }
+  }
+}
+//启动/停止
+const editOperate = (item) => {
+  const data = packageData(item, item.running)
+  editFrequencyOperationSwitch(data).then(res => {
+    console.log('修改风机启动', res)
+  })
+}
+const changeFrequency = (item) => {
+  console.log()
+  const data = packageData(item, item.frequencySetting, true)
+  editFrequency(data).then(res => {
+    console.log('修改风机频率', res)
+  })
+}
+const changeModel = (item) => {
+  const data = packageData(item, item.autoMode)
+  editFrequencyModelSwitch(data).then(res => {
+    console.log('修改自动模式', res)
+  })
+}
 const getFanInfo = (equipmentId) => {
   isVisited.value = true
   showLoading.value = true
@@ -242,11 +299,12 @@ const getBasicData = (data) => {
   data?.map(item => {
     tranObj = {
       equipmentId: item.equipmentId,
+      equipmentType: item.equipmentType,
       autoMode: item.autoMode,//自动模式
       breakdown: item.breakdown,//故障
       running: item.running,//启动,
-      frequencyFeedback: item.frequencyFeedback,//当前功率
+      frequencyFeedback: item.frequencyFeedback,
-      frequencySetting: item.frequencySetting//当前功率
+      frequencySetting: item.frequencySetting
     }
     tranArr.push(tranObj)
   })
@@ -795,34 +853,70 @@ input[type="number"] {
 
               .edit-power {
                 margin-top: 10px;
+                display: flex;
 
-                .units {
+                > span:first-child {
-                  position: relative;
+                  white-space: pre;
+                  margin-right: 14px;
                 }
-
+                //:deep(.is-disabled) {
-                .units::after {
+                //  .el-input__inner{
-                  content: "Hz";
+                //    color: #FFFFFF!important;
-                  position: absolute;
+                //  }
-                  right: 6px;
+                //}
-                  top: 50%;
+                :deep(.el-input__wrapper) {
-                  transform: translateY(-50%);
-                  font-size: 28px;
-                  color: #38cafb;
-                  line-height: 37px;
-                }
-
-                input {
                   width: 130px;
                   height: 44px;
-                  border: 2px solid #0f82af;
+                  background-color: transparent;
-                  background: transparent;
+                  box-shadow: none;
-                  margin-left: 14px;
+                  border: 1px solid #38CAFB;
-                  outline: none;
+                  transform: none;
-                  font-size: 28px;
+                  transition: none;
-                  font-weight: bold;
+                  margin-right: 10px;
-                  color: #38cafb;
+
-                  line-height: 37px;
+                  .el-input__inner {
+                    height: 44px;
+                    font-size: 30px;
+                    font-weight: bold;
+                    color: #38CAFB;
+                  }
+
+
+                  .el-input__suffix-inner {
+                    font-size: 30px;
+                    color: #38CAFB;
+                    line-height: 40px;
+                    font-weight: bold;
+                  }
                 }
+
+                //.units {
+                //  position: relative;
+                //}
+                //
+                //.units::after {
+                //  content: "Hz";
+                //  position: absolute;
+                //  right: 6px;
+                //  top: 50%;
+                //  transform: translateY(-50%);
+                //  font-size: 28px;
+                //  color: #38cafb;
+                //  line-height: 37px;
+                //}
+                //
+                //input {
+                //  width: 130px;
+                //  height: 44px;
+                //  border: 2px solid #0f82af;
+                //  background: transparent;
+                //  margin-left: 14px;
+                //  outline: none;
+                //  font-size: 28px;
+                //  font-weight: bold;
+                //  color: #38cafb;
+                //  line-height: 37px;
+                //}
               }
             }
           }

src/views/edit/edit.vue

@@ -16,6 +16,9 @@
         <el-form-item label="隧道名称">
           <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
+        <el-form-item label="隧道简称">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
         <el-form-item label="序列号">
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
@@ -52,7 +55,7 @@ const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
 const userId = reactive(router.currentRoute.value.params.userId);
 const type = reactive(router.currentRoute.value.params.type);
 const modelStore = useModelSceneStore();
-const constructionLength = ref(null)
+const constructionLength = ref(0)
 const modelEquipmentList = ref(null)
 const form = ref({
   tunnelName: "",
@@ -87,9 +90,16 @@ const getTunnelInfo = () => {
   initSceneData(tunnelId).then((res) => {
     constructionLength.value = res.data.constructionLength
     modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
+    if(constructionLength.value===null){
+      constructionLength.value=0
+    }
+    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: constructionLength.value,

src/views/tunnel-manage/index.vue

@@ -45,8 +45,8 @@
           </div>
           <div class="tunnel-right">
             <div>
-              <div class="fan-icon"></div>
+<!--              <div class="fan-icon"></div>-->
-              <span>风机异常</span>
+<!--              <span>风机异常</span>-->
             </div>
             <div class="icons-block">
               <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
@@ -70,6 +70,9 @@
         <el-form-item label="隧道名称" prop="tunnelName">
           <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
+        <el-form-item label="隧道简称" prop="tunnelAlias">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
         <el-form-item label="序列号" prop="serialNumber">
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
@@ -123,6 +126,7 @@ const validateNumber = (rule, value) => {
 }
 const formRules = ref({
   tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
   serialNumber: [
     {required: true, message: '请输入序列号', trigger: ['blur', 'change']},
     {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
@@ -190,6 +194,7 @@ const tunnelNameList = ref([])
 const siteName = ref(localStorage.getItem('site'))
 const form = ref({
   tunnelName: '',
+  tunnelAlias: '',
   serialNumber: '',
   totalLength: '',
   remarks: '',
@@ -297,6 +302,7 @@ const handleEditDevice = (tunnelId) => {
 const restFrom = () => {
   form.value = {
     tunnelName: '',
+    tunnelAlias: '',
     serialNumber: '',
     totalLength: '',
     remarks: '',
@@ -650,7 +656,7 @@ const handleMoreDelete = () => {
           }
 
           .icons-block {
-            margin-top: 30px;
+            margin-top: 50px;
             display: flex;
             flex-wrap: wrap;
 

src/views/tunnel/index.vue

@@ -5,7 +5,7 @@
       <div class="tunnel-title"></div>
       <!--      <manage-length class="tunnel-length"></manage-length>-->
       <div class="top-length">
-        <span>隧道总长度: {{ tunnelLength }}米</span>
+<!--        <span>隧道总长度: {{ tunnelLength }}米</span>-->
         <span>当前施工长度: {{ constructionLength }}米</span>
       </div>
       <div class="top-right">
@@ -39,7 +39,7 @@
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
         :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" :loading="showFanLoading" />
+          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/>
         <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
@@ -115,8 +115,6 @@ const routeList = ref([]);
 let socket = reactive("");
 let tunnelName = reactive("")
 
-
-
 const btnList = ref([
   {
     route: '/site',
@@ -143,7 +141,7 @@ const btnList = ref([
   //   name: '模拟仿真'
   // },
 ])
-const serialNumber = ref("SC00DY00GH00ELBT");
+const serialNumber = ref("");
 let token = getToken();
 let send = {
   type: "ping",
@@ -154,10 +152,11 @@ const socketData = reactive({
   windPressure: [],
   sensor: [],
 });
+let tunnelLen = computed(() => tunnelLength);
+
 onMounted(() => {
   if (previewId) {
     getScreenInfo(previewId)
-
   }
   getUser()
   getOtherInfo()
@@ -165,6 +164,7 @@ onMounted(() => {
     showFan.value = true;
   });
 });
+
 const getUser = () => {
   getUserInfo().then(res => {
     currentUser.value = res.data.user.userName
@@ -245,6 +245,8 @@ const getScreenInfo = (id) => {
     initSceneData(id).then((res) => {
       tunnelLength.value = res.data.tunnelLength
       constructionLength.value = res.data.constructionLength
+      serialNumber.value=res.data.serialNumber
+      initWebSocket();
     })
   }
 };
@@ -359,10 +361,6 @@ const initWebSocket = () => {
     socket.send(JSON.stringify(send));
   }, 30000);
 };
-initWebSocket();
-
-let tunnelLen = computed(() => tunnelLength);
-
 </script>
 <style lang="scss">
 .el-drawer__header {