feat : 隧道模拟

.env.development

@@ -3,5 +3,5 @@
 VITE_BASE_URL='/api'
 # VITE_BASE_URL='http://192.168.101.7:8000'
 
-#VITE_BASE_WSURL='ws://web-tunnel.feashow.com/api'
+#VITE_BASE_WSURL='ws://tunnel.feashow.com/api'
 VITE_BASE_WSURL='/websocket'

.env.production

@@ -4,5 +4,5 @@ VITE_TITLE='fateverse'
 
 VITE_BASE_URL='/api'
 
-#VITE_BASE_WSURL='ws://web-tunnel.feashow.com/api'
+#VITE_BASE_WSURL='ws://tunnel.feashow.com/api'
 VITE_BASE_WSURL='/websocket'

src/components/deviceManage/index.vue

@@ -0,0 +1,830 @@
+<template>
+  <div class="device-content">
+    <div class="device-box">
+      <div class="box-left">
+        <el-menu
+            default-active="1"
+            @select="handleChangeMenu"
+        >
+          <el-menu-item index="1">
+            <span>风机</span>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <span>风压</span>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <span>其他传感器</span>
+          </el-menu-item>
+          <!--            <el-menu-item index="4">-->
+          <!--              <span>分流器</span>-->
+          <!--            </el-menu-item>-->
+        </el-menu>
+      </div>
+      <div class="box-right" v-if="changeIndex==1">
+        <div class="device-title">
+          <span>风机设备管理</span>
+          <div class="collection-frequency">
+            <span>采集频率</span>
+            <el-input type="number" v-model="fanFrequency">
+              <template #suffix>
+                <span>秒/次</span>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <div class="device-table">
+          <el-table stripe
+                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                    table-layout="auto"
+                    :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                    :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
+            <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+            <el-table-column prop="ratedPower" label="额定功率" align="center">
+              <template #default="scope">
+                <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
+            <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
+              <template #default="scope">
+                <el-input placeholder="A电流" v-model="scope.row.acurrentValue"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
+            <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
+              <template #default="scope">
+                <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
+            <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
+              <template #default="scope">
+                <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="serialNumber" label="序列号" align="center">
+              <template #default="scope">
+                <!--                  {{scope.row.serialNumberOption.filter(item => item.value == scope.row.serialNumber).map(item => item.label)[0]}}?-->
+                <!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
+                <!--                               clearable class="serialNumber">-->
+                <!--                    <el-option-->
+                <!--                        v-for="item in scope.row.serialNumberOption"-->
+                <!--                        :key="item.value"-->
+                <!--                        :label="item.label"-->
+                <!--                        :value="item.value"-->
+                <!--                    />-->
+                <!--                  </el-select>-->
+              </template>
+            </el-table-column>
+            <el-table-column prop="state" label="状态" align="center" width="200">
+              <template #default="scope">
+                <div class="switch">
+                  <div
+                      :class="{ active: scope.row.state }"
+                      @click="scope.row.state = 1; "
+                  >
+                    启用
+                  </div>
+                  <div
+                      :class="{ active: ! scope.row.state }"
+                      @click=" scope.row.state = 0; "
+                  >
+                    停用
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="btns">
+          <div class="cancel-btn" @click="emit('cancel')">
+            取消
+          </div>
+          <div class="sure-btn" @click="editEquip">
+            开始模拟
+          </div>
+        </div>
+      </div>
+      <div class="box-right" v-if="changeIndex==2">
+        <div class="device-title">
+          <span>风压设备管理</span>
+          <div class="collection-frequency">
+            <span>采集频率</span>
+            <el-input type="number" v-model="windFrequency">
+              <template #suffix>
+                <span>秒/次</span>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <div class="device-table">
+          <el-table stripe table-layout="auto"
+                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                    :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                    :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
+            <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+            <el-table-column prop="offset" label="偏移量" align="center"/>
+            <el-table-column prop="unit" label="单位" align="center">
+              <template #default="scope">
+                <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="alarmValue" label="阈值" align="center">
+              <template #default="scope">
+                <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="miniRange" label="最小范围" align="center">
+              <template #default="scope">
+                <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="maxRange" label="最大范围" align="center">
+              <template #default="scope">
+                <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+              <template #default="scope">
+                <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
+                           clearable class="serialNumber" @clear="clearWinDataSelectedOption"
+                           @change="changeWindDataSerialNumber($event,scope.row.serialNumberOption)">
+                  <el-option
+                      v-for="item in scope.row.serialNumberOption"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                      :disabled="serialNumberOptionDisabled(item)"
+                      :title="serialNumberOptionDisabled(item)?'该序列号已选择!':''"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="state" label="状态" align="center" width="200">
+              <template #default="scope">
+                <div class="switch wind-switch">
+                  <div
+                      :class="{ active: scope.row.state }"
+                      @click=" scope.row.state = 1; "
+                  >
+                    启用
+                  </div>
+                  <div
+                      :class="{ active: ! scope.row.state }"
+                      @click=" scope.row.state =  0; "
+                  >
+                    停用
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="btns">
+          <div class="cancel-btn" @click="emit('cancel')">
+            取消
+          </div>
+          <div class="sure-btn" @click="editEquip">
+            开始模拟
+          </div>
+        </div>
+      </div>
+      <div class="box-right" v-if="changeIndex==3">
+        <div class="device-title">
+          <span>其他传感器设备管理</span>
+          <div class="collection-frequency">
+            <span>采集频率</span>
+            <el-input type="number" v-model="otherFrequency">
+              <template #suffix>
+                <span>秒/次</span>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <div class="device-table">
+          <el-table stripe table-layout="auto"
+                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                    :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                    :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
+            <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+            <el-table-column prop="offset" label="偏移量" align="center"/>
+            <el-table-column prop="unit" label="单位" align="center">
+              <template #default="scope">
+                <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="alarmValue" label="阈值" align="center">
+              <template #default="scope">
+                <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="miniRange" label="最小范围" align="center">
+              <template #default="scope">
+                <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="maxRange" label="最大范围" align="center">
+              <template #default="scope">
+                <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+              <template #default="scope">
+                <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
+                           clearable class="serialNumber">
+                  <el-option
+                      v-for="item in otherSensorSerialNumberOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="state" label="状态" align="center" width="200">
+              <template #default="scope">
+                <div class="switch wind-switch">
+                  <div
+                      :class="{ active: scope.row.state }"
+                      @click=" scope.row.state = 1; "
+                  >
+                    启用
+                  </div>
+                  <div
+                      :class="{ active: ! scope.row.state }"
+                      @click=" scope.row.state =  0; "
+                  >
+                    停用
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="btns">
+          <div class="cancel-btn" @click="emit('cancel')">
+            取消
+          </div>
+          <div class="sure-btn" @click="editEquip">
+            开始模拟
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage} from "element-plus";
+import {
+  getEquipmentList,
+  editEquipment,
+  getTunnelDetail,
+  getOtherSensorSerialNumberOptions,
+  getWindPressureSerialNumberOptions
+} from "@/api/tunnelManage";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'
+import {defineEmits} from "vue";
+
+const router = useRouter()
+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 fanFrequency = ref(0)
+const windFrequency = ref(0)
+const otherFrequency = ref(0)
+const changeIndex = ref(1)
+const fanData = ref([])
+const winData = ref([])
+const windPressureDataSerialNumberOptions = ref([])
+const otherSensorSerialNumberOptions = ref([])
+const otherData = ref([])
+const winDataSelectedOption = ref([])
+const fenLiuData = ref([])
+const siteId = ref(0)
+const emit = defineEmits([
+  "cancel"
+]);
+const getWindPressureOptions = async () => {
+  let {data, code, msg} = await getWindPressureSerialNumberOptions(tunnelId)
+  if (code === 1000) {
+    // windPressureDataSerialNumberOptions.value= data
+    return data
+  } else {
+    ElMessage.error(msg)
+  }
+}
+
+const getOtherSensorOptions = async () => {
+  let {data, code, msg} = await getOtherSensorSerialNumberOptions(tunnelId)
+  if (code === 1000) {
+    otherSensorSerialNumberOptions.value = data
+  } else {
+    ElMessage.error(msg)
+  }
+}
+getOtherSensorOptions()
+const clearWinDataSelectedOption = () => {
+  winDataSelectedOption.value = []
+}
+const changeWindDataSerialNumber = (value, options) => {
+  // console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
+  options?.forEach(item => {
+    if (item.value == value) {
+      // console.info("🚀 ~method:item.label -----", item.label)
+      if (item.label.indexOf('PLC') >= 0) {
+        winDataSelectedOption.value = []
+      } else {
+        winDataSelectedOption.value.push(value)
+      }
+    }
+  })
+}
+const serialNumberOptionDisabled = (item) => {
+  return winDataSelectedOption.value.indexOf(item.value) >= 0;
+}
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    unit: item.unit,
+    alarmValue: item.alarmValue,
+    serialNumber: item.serialNumber,
+    miniRange: parseInt(item.miniRange),
+    maxRange: parseInt(item.maxRange),
+    state: item.state,
+  }
+}
+const editEquip = debounce(() => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '修改中...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  let newFrequency = [{
+    acquisitionPeriod: fanFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'frequency'
+  }, {
+    acquisitionPeriod: windFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'windPressure'
+  }, {
+    acquisitionPeriod: otherFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'sensor'
+  }]
+  let newFan = []
+  let newWind = []
+  let newSensor = []
+  fanData.value.forEach(item => {
+    let obj = {
+      equipmentId: item.equipmentId,
+      ratedPower: parseInt(item.ratedPower),
+      acurrentValue: parseInt(item.acurrentValue),
+      bcurrentValue: parseInt(item.bcurrentValue),
+      ccurrentValue: parseInt(item.ccurrentValue),
+      serialNumber: item.serialNumber,
+      state: parseInt(item.state)
+    }
+    newFan.push(obj)
+  })
+  winData.value.forEach(item => {
+    newWind.push(changeData(item))
+  })
+  otherData.value.forEach(item => {
+    newSensor.push(changeData(item))
+  })
+  const basicData = {
+    tunnelId: tunnelId,
+    acquisitionList: newFrequency,
+    frequencyChangerList: newFan,
+    windPressureSensorList: newWind,
+    sensorList: newSensor,
+    // shuntList: editFenLiuData.value,
+  }
+  // console.info("🚀 ~ file:index method: line:478 -----",basicData)
+  editEquipment(basicData).then(res => {
+    if (res.code === 1000) {
+      loading.close()
+      ElMessage.success('修改成功')
+      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
+    } else {
+      ElMessage.error(res.msg)
+      loading.close()
+
+    }
+  })
+}, 100)
+
+const handleChangeMenu = (e) => {
+  changeIndex.value = e
+}
+
+const getList = async () => {
+  const windPressureOption = await getWindPressureOptions()
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  await getEquipmentList(tunnelId).then(res => {
+    if (res.code === 1000) {
+      fanData.value = res.data.frequencyChangerList
+      res.data.windPressureSensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      winData.value = res.data.windPressureSensorList
+      winData.value?.forEach(item => {
+        for (const equipmentId in windPressureOption) {
+          if (item.equipmentId == equipmentId) {
+            item.serialNumberOption = windPressureOption[equipmentId]
+          }
+        }
+      })
+      res.data.sensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      otherData.value = res.data.sensorList
+      res.data.acquisitionList.map(item => {
+        item.acquisitionPeriod = item.acquisitionPeriod / 1000
+        if (item.typeKey === 'frequency') {
+          fanFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'windPressure') {
+          windFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'sensor') {
+          otherFrequency.value = item.acquisitionPeriod
+        }
+      })
+    }
+    loading.close()
+  })
+}
+const getTunnel = () => {
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      siteId.value = res.data.siteId
+    }
+  });
+}
+getTunnel()
+getList()
+</script>
+<style lang="scss">
+.serialNumber {
+  .el-input {
+    width: 570px !important;
+  }
+
+  .el-select__suffix {
+    .el-icon {
+      width: 3em !important;
+      height: 3em !important;
+      color: #fff !important;
+
+      svg {
+        width: 3em !important;
+        height: 3em !important;
+      }
+    }
+  }
+
+  .el-input__suffix-inner {
+    .el-icon {
+      width: 3em !important;
+      height: 3em !important;
+      color: #fff !important;
+
+      svg {
+        width: 3em !important;
+        height: 3em !important;
+      }
+    }
+  }
+}
+
+.el-select.serialNumber {
+  width: 580px !important;
+  border-radius: 6px !important;
+  border: 1px solid #05FEFF !important;
+  background-color: transparent !important;
+
+  .el-select__wrapper {
+    height: 54px !important;
+    color: #FFFFFF !important;
+    font-size: 40px !important;
+    //height: auto!important;
+    line-height: normal !important;
+    border-radius: 6px !important;
+    border: 1px solid #05FEFF !important;
+    background-color: transparent !important;
+  }
+
+  .el-select__placeholder {
+    height: 54px;
+    line-height: 54px;
+    color: #FFFFFF;
+  }
+}
+
+
+.serialNumber-select.el-popper {
+  background: #064B66 !important;
+  border: 2px solid #05FEFF !important;
+
+  .el-select-dropdown {
+    min-width: 130px !important;
+  }
+
+  .el-select-dropdown__item.is-hovering {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-dropdown__item {
+    color: #FFFFFF;
+    border-bottom: 1px solid #05FEFF;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .el-select-dropdown__item.is-selected {
+    color: #F7B500 !important;
+  }
+
+  .el-select-dropdown__item.selected {
+    background-color: transparent !important;
+    color: #F7B500;
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: transparent !important;
+    color: #F7B500;
+  }
+
+  .el-select-dropdown__item.is-disabled {
+    background-color: transparent !important;
+    color: #fff !important;
+  }
+}
+</style>
+<style scoped lang="scss">
+
+.box-top {
+  display: flex;
+  justify-content: flex-start;
+
+  .tunnel-name {
+    margin-left: 120px;
+    height: 61px;
+    font-size: 46px;
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: 61px;
+  }
+
+  .back-tunnel {
+    cursor: pointer;
+    margin: 0 0 0 70px;
+    display: flex;
+    align-items: center;
+    width: 178px;
+    height: 70px;
+    line-height: 70px;
+    border-radius: 11px;
+    border: 2px solid #08B7B8;
+    font-size: 38px;
+    color: #FFFFFF;
+
+    .back-icon {
+      margin-right: 20px;
+      margin-left: 23px;
+      width: 33px;
+      height: 33px;
+      background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+    }
+  }
+}
+
+.device-content {
+  display: flex;
+  justify-content: center;
+  padding-top: 300px;
+
+  .device-box {
+    z-index: 9999;
+    display: flex;
+    width: 3500px;
+    height: 1600px;
+    background: #064B66;
+    border-radius: 20px;
+    border: 2px solid #05FEFF;
+    box-sizing: border-box;
+
+    .box-left {
+      padding-left: 24px;
+      width: 300px;
+      height: 1596px;
+      background: #0D5A7A;
+      border-radius: 20px 0px 0px 20px;
+
+      :deep(.el-menu) {
+        border-right: none;
+        margin-top: 261px;
+        background-color: #0D5A7A;
+
+        .el-menu-item.is-active {
+          background-image: url(../../assets/images/device/sdgl_xz.png);
+        }
+
+        .el-menu-item {
+          color: #fff;
+          height: 90px;
+          font-size: 40px;
+
+          &:hover {
+            background-color: #0D5A7A;
+          }
+
+          &:first-child {
+            letter-spacing: 120px;
+          }
+
+          &:nth-child(2) {
+            letter-spacing: 120px;
+          }
+
+          //&:nth-child(4) {
+          //  letter-spacing: 40px;
+          //}
+        }
+      }
+    }
+
+    .box-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      .device-title {
+        margin-top: 60px;
+        line-height: 61px;
+        color: #FFFFFF;
+        display: flex;
+        justify-content: center;
+
+        > span:first-child {
+          font-size: 46px;
+          font-weight: bold;
+        }
+
+        .collection-frequency {
+          height: 60px;
+          display: flex;
+          align-items: center;
+          position: absolute;
+          right: 102px;
+
+          > span:first-child {
+            font-size: 38px !important;
+            white-space: pre;
+            margin-right: 15px;
+          }
+
+          :deep(.el-input__wrapper) {
+            width: 166px;
+            height: 56px;
+            background-color: transparent;
+            box-shadow: none;
+            border-radius: 6px;
+            border: 1px solid #05FEFF;
+            transform: none;
+            transition: none;
+
+            .el-input__inner {
+              height: 54px;
+              font-size: 30px;
+              color: #FFFFFF;
+            }
+
+            .el-input__suffix-inner {
+              font-size: 30px;
+              color: #08B7B8;
+              line-height: 40px;
+            }
+          }
+        }
+      }
+    }
+
+    .btns {
+      width: 100%;
+      margin: 0 auto;
+      position: absolute;
+      bottom: 70px;
+    }
+
+    .device-table {
+      margin-top: 50px;
+      margin-left: 50px;
+      margin-right: 50px;
+
+      .active {
+        color: #FFFFFF;
+        background: #0f7da9;
+      }
+
+      .wind-switch {
+        //margin-left: 26px;
+      }
+
+      .switch {
+        margin-top: 22px;
+
+        display: flex;
+        width: 200px;
+        height: 50px;
+        border-radius: 6px;
+        border: 1px solid #05FEFF;
+        overflow: hidden;
+        color: #51A2B3;
+        line-height: 40px;
+        font-size: 36px;
+
+        & > div {
+          flex: 1;
+          text-align: center;
+          cursor: pointer;
+        }
+      }
+
+      :deep(.el-table--fit) {
+        //width: 1780px !important;
+        width: auto;
+      }
+
+      :deep(.cell) {
+        height: 80px;
+        line-height: 80px;
+        color: #fff;
+        font-size: 38px;
+      }
+
+      :deep(.el-table tr) {
+        background-color: #1C5971;
+      }
+
+      :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
+        background-color: #1C5971;
+      }
+
+      :deep(.el-table__row--striped) {
+        background-color: #13849C !important;
+      }
+
+      :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+        background-color: #13849C !important;
+      }
+
+      :deep(.el-table__cell) {
+        .el-input {
+          width: 180px;
+          height: 53px;
+        }
+
+        .el-input__wrapper {
+          border-radius: 6px;
+          border: 1px solid #05FEFF;
+          background-color: transparent;
+
+          .el-input__inner {
+            color: #FFFFFF;
+            font-size: 40px;
+            height: auto;
+            line-height: normal;
+          }
+        }
+      }
+
+      :deep(.el-table__inner-wrapper::before) {
+        display: none;
+      }
+    }
+  }
+}
+</style>

src/components/manageBtn/index.vue

@@ -51,10 +51,11 @@ const btnList = ref([
   //   icon: 'sp_icon_xtgl.png',
   //   name: '系统管理'
   // },
-  // {
+  {
-  //   icon: 'sp_icon_mngl.png',
+    route: '/simulate',
-  //   name: '模拟仿真'
+    icon: 'sp_icon_mngl.png',
-  // },
+    name: '模拟仿真'
+  },
 ])
 const newList=ref([])
 const selectButton = ref(props.modelValue);

src/store/modelSceneStore.js

@@ -44,7 +44,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
       return new Promise((resolve, reject) => {
         initSceneData(tunnelId)
           .then((res) => {
-            console.info("🚀 ~method:initSceneData -----", res)
+            // console.info("🚀 ~method:initSceneData -----", res)
             serialNumber.value=res.data.serialNumber
             serialNumberPrefix.value=res.data.serialNumberPrefix
             tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList

src/views/debug/index.vue

@@ -76,7 +76,7 @@ const handleSend = () => {
 const initWebSocket = () => {
   // let wsUrl = `ws://192.168.31.176:9000/websocket/debug/${token}/${serialNumber.value}`
   // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
-  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
+  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
   console.log(wsUrl)
   socket = new WebSocket(wsUrl)
   //连接发生错误的回调方法

src/views/tunnel-simulate/index.vue

@@ -2,48 +2,44 @@
   <div id="main">
     <div class="box-top">
       <!--            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
-      <tunnel-title v-if="showTunnelTitle" />
+      <tunnel-title v-if="showTunnelTitle"/>
       <div class="top-length">
         <span>隧道总长度: {{ tunnelLength }}米</span>
         <span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
-          >开始模拟</span
+        >开始模拟</span>
-        >
+        <span class="all-btn" @click="endSimulate" v-else>结束模拟</span>
-        <div v-else>
-          <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
-          <span class="all-btn" @click="endSimulate">结束模拟</span>
-        </div>
         <!--        <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
       </div>
       <div class="top-right" v-if="isPreview">
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
           <el-dropdown
-            trigger="click"
+              trigger="click"
-            @command="handleChangeSite"
+              @command="handleChangeSite"
-            popper-class="dropdown-style"
+              popper-class="dropdown-style"
           >
             <div class="toggle"></div>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item
-                  v-for="item in siteList"
+                    v-for="item in siteList"
-                  :key="item.value"
+                    :key="item.value"
-                  :command="item"
+                    :command="item"
-                  >{{ item.label }}
+                >{{ item.label }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
           <el-icon
-            size="50"
+              size="50"
-            color="#0BE9FA"
+              color="#0BE9FA"
-            style="margin-left: 50px; cursor: pointer"
+              style="margin-left: 50px; cursor: pointer"
-            @click="
+              @click="
               isVisited = true;
               getAlarmList();
             "
           >
-            <Bell />
+            <Bell/>
           </el-icon>
         </div>
         <div class="current-user">
@@ -53,40 +49,40 @@
         </div>
       </div>
     </div>
-
+<device-manage v-if="showDevice" @cancel="cancelDeviceManage"/>
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <preview-scene
-      id="tunnel-box"
+        id="tunnel-box"
-      :isedit="false"
+        :isedit="false"
-      :tunnelId="tunnelId"
+        :tunnelId="tunnelId"
-      :key="tunnelId"
+        :key="tunnelId"
-      :tunnelLen="tunnelLen"
+        :tunnelLen="tunnelLen"
-      :largeScreen="largeScreen"
+        :largeScreen="largeScreen"
-      :fanList="socketData.leftData"
+        :fanList="socketData.leftData"
     ></preview-scene>
     <div class="left" v-if="isPreview">
       <el-drawer
-        v-model="drawerLeft"
+          v-model="drawerLeft"
-        direction="ltr"
+          direction="ltr"
-        modal-class="modal-box"
+          modal-class="modal-box"
-        :modal="false"
+          :modal="false"
-        :show-close="false"
+          :show-close="false"
-        :close-on-click-modal="false"
+          :close-on-click-modal="false"
-        :close-on-press-escape="false"
+          :close-on-press-escape="false"
       >
         <fan-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.leftData"
+            :list="socketData.leftData"
-          :fan-data="largeScreenData"
+            :fan-data="largeScreenData"
-          :transducer-data="largeScreenData"
+            :transducer-data="largeScreenData"
-          :loading="showFanLoading"
+            :loading="showFanLoading"
-          :tunnel-id="tunnelId"
+            :tunnel-id="tunnelId"
         />
         <used-ele
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.leftData"
+            :list="socketData.leftData"
-          :loading="showUsedLoading"
+            :loading="showUsedLoading"
-          :ele-data="largeScreenData"
+            :ele-data="largeScreenData"
         />
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
@@ -94,32 +90,32 @@
     </div>
     <div class="right" v-if="isPreview">
       <el-drawer
-        v-model="drawerRight"
+          v-model="drawerRight"
-        direction="rtl"
+          direction="rtl"
-        modal-class="modal-box"
+          modal-class="modal-box"
-        :modal="false"
+          :modal="false"
-        :show-close="false"
+          :show-close="false"
-        :close-on-click-modal="false"
+          :close-on-click-modal="false"
-        :close-on-press-escape="false"
+          :close-on-press-escape="false"
       >
         <wind-pressure-list
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.windPressure"
+            :list="socketData.windPressure"
-          :win-data="largeScreenData"
+            :win-data="largeScreenData"
-          :loading="showWindLoading"
+            :loading="showWindLoading"
         />
         <air-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :windSpeed="socketData.windSpeed"
+            :windSpeed="socketData.windSpeed"
-          :air-data="largeScreenData"
+            :air-data="largeScreenData"
         />
         <bad-gas-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :bad-gas-data="largeScreenData"
+            :bad-gas-data="largeScreenData"
-          :tunnelId="tunnelId"
+            :tunnelId="tunnelId"
-          :loading="showBadLoading"
+            :loading="showBadLoading"
         />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -128,12 +124,12 @@
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
       <el-carousel
-        height="150px"
+          height="150px"
-        type="card"
+          type="card"
-        ref="tunnelBtn"
+          ref="tunnelBtn"
-        :autoplay="false"
+          :autoplay="false"
-        :initial-index="initialIndex"
+          :initial-index="initialIndex"
-        @change="changeTunnel"
+          @change="changeTunnel"
       >
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
@@ -146,10 +142,10 @@
   </div>
   <div class="alarm-dialog alarm-tunnel">
     <el-dialog
-      :close-on-click-modal="false"
+        :close-on-click-modal="false"
-      v-model="isDetailVisited"
+        v-model="isDetailVisited"
-      title="报警信息详情"
+        title="报警信息详情"
-      width="1500px"
+        width="1500px"
     >
       <div class="detail">
         <div>报警时间：</div>
@@ -163,33 +159,33 @@
   </div>
   <div class="alarm-tunnel">
     <el-dialog
-      :close-on-click-modal="false"
+        :close-on-click-modal="false"
-      v-model="isVisited"
+        v-model="isVisited"
-      title="报警信息"
+        title="报警信息"
-      width="2175px"
+        width="2175px"
-      :modal="false"
+        :modal="false"
     >
       <div class="left-top-icon"></div>
       <div class="right-top-icon"></div>
       <el-form
-        :model="queryParams"
+          :model="queryParams"
-        inline
+          inline
-        class="query-form"
+          class="query-form"
-        ref="queryForm"
+          ref="queryForm"
-        @submit.prevent="getAlarmList"
+          @submit.prevent="getAlarmList"
-        v-if="roleKey !== 'administrator'"
+          v-if="roleKey !== 'administrator'"
       >
         <el-form-item label="查阅状态" prop="lookupStatus">
           <el-select
-            v-model="queryParams.lookupStatus"
+              v-model="queryParams.lookupStatus"
-            placeholder="请选择查阅状态"
+              placeholder="请选择查阅状态"
-            :fit-input-width="true"
+              :fit-input-width="true"
-            :teleported="false"
+              :teleported="false"
-            clearable
+              clearable
-            filterable
+              filterable
           >
-            <el-option label="已读" :value="true" />
+            <el-option label="已读" :value="true"/>
-            <el-option label="未读" :value="false" />
+            <el-option label="未读" :value="false"/>
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -198,87 +194,87 @@
         </el-form-item>
       </el-form>
       <div
-        class="device-table"
+          class="device-table"
-        :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
+          :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
       >
         <el-table
-          stripe
+            stripe
-          v-loading="loading"
+            v-loading="loading"
-          :empty-text="tableEmptyText"
+            :empty-text="tableEmptyText"
-          style="background-color: #011c29; --el-table-border-color: none"
+            style="background-color: #011c29; --el-table-border-color: none"
-          :header-cell-style="{
+            :header-cell-style="{
             backgroundColor: '#064B66',
             color: '#fff',
             fontSize: '40px',
             borderBottom: 'none',
           }"
-          :data="alarmList"
+            :data="alarmList"
         >
           <el-table-column
-            prop="tunnelName"
+              prop="tunnelName"
-            label="隧道名称"
+              label="隧道名称"
-            align="center"
+              align="center"
-            width="400px"
+              width="400px"
           />
           <el-table-column
-            prop="alarmContent"
+              prop="alarmContent"
-            label="告警信息"
+              label="告警信息"
-            align="center"
+              align="center"
           />
           <el-table-column
-            prop="alarmTime"
+              prop="alarmTime"
-            label="告警时间"
+              label="告警时间"
-            align="center"
+              align="center"
-            width="480px"
+              width="480px"
           />
           <el-table-column
-            prop="lookupStatus"
+              prop="lookupStatus"
-            label="查阅状态"
+              label="查阅状态"
-            align="center"
+              align="center"
-            width="200px"
+              width="200px"
-            v-if="roleKey !== 'administrator'"
+              v-if="roleKey !== 'administrator'"
           >
             <template #default="scope">
               <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
-                >{{ scope.row.lookupStatus ? "已读" : "未读" }}
+              >{{ scope.row.lookupStatus ? "已读" : "未读" }}
               </el-tag>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" width="300px">
             <template #default="scope">
               <el-button
-                type="primary"
+                  type="primary"
-                size="mini"
+                  size="mini"
-                style="font-weight: bold"
+                  style="font-weight: bold"
-                @click="handleView(scope.row)"
+                  @click="handleView(scope.row)"
-                link
+                  link
-                >详情
+              >详情
               </el-button>
               <el-button
-                type="danger"
+                  type="danger"
-                size="mini"
+                  size="mini"
-                v-if="roleKey !== 'administrator'"
+                  v-if="roleKey !== 'administrator'"
-                @click="handleDelete(scope.row)"
+                  @click="handleDelete(scope.row)"
-                link
+                  link
-                >删除
+              >删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
         <div
-          class="pagination"
+            class="pagination"
-          :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
+            :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
         >
           <el-pagination
-            background
+              background
-            v-model:current-page="pageInfo.pageNum"
+              v-model:current-page="pageInfo.pageNum"
-            v-model:page-size="pageInfo.pageSize"
+              v-model:page-size="pageInfo.pageSize"
-            :total="total"
+              :total="total"
-            prev-text="上一页"
+              prev-text="上一页"
-            next-text="下一页"
+              next-text="下一页"
-            layout="prev, pager, next"
+              layout="prev, pager, next"
-            @current-change="handleCurrentChange"
+              @current-change="handleCurrentChange"
-            :hide-on-single-page="true"
+              :hide-on-single-page="true"
           />
         </div>
       </div>
@@ -297,9 +293,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
-import { dateFormat } from "@/utils/date.js";
+import {dateFormat} from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
+import {getToken} from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
+import {useAuthStore} from "@/store/userstore.js";
 import {
   getLargeScreen,
   getLargeScreenInfo,
@@ -309,11 +305,11 @@ import {
   getAlarmDetail,
   updateAlarmState,
 } from "@/api/largeScreen";
-import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
-import { getUserInfo } from "@/api/login";
+import {getUserInfo} from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
+import {initSceneData} from "@/api/tunnelScene";
-import { getTunnelList } from "@/api/tunnelManage";
+import {getTunnelList} from "@/api/tunnelManage";
-import { debounce } from "lodash";
+import {debounce} from "lodash";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -324,6 +320,7 @@ const selectIndex = ref(-1);
 const isVisited = ref(false);
 const isDetailVisited = ref(false);
 const showFan = ref(false);
+const showDevice = ref(false);
 const drawerLeft = ref(true);
 const showTunnelTitle = ref(true);
 const isPreview = ref(true);
@@ -378,6 +375,7 @@ const btnList = ref([
   //   name: '系统管理'
   // },
   // {
+  //   route: '/simulate',
   //   icon: 'sp_icon_mngl.png',
   //   name: '模拟仿真'
   // },
@@ -417,6 +415,11 @@ onMounted(() => {
 });
 const startSimulate = () => {
   isStartSimulate.value = false;
+  showDevice.value = true;
+};
+const cancelDeviceManage = () => {
+  isStartSimulate.value = true;
+  showDevice.value = false;
 };
 const endSimulate = () => {
   isStartSimulate.value = true;
@@ -570,13 +573,13 @@ const getScreenInfo = (id) => {
           // })
           res.data.sensorList.forEach((item) => {
             if (
-              item.equipmentType === "dust" ||
+                item.equipmentType === "dust" ||
-              item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonDioxide" ||
-              item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "carbonMonoxide" ||
-              item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "hydrogenSulfide" ||
-              item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurDioxide" ||
-              item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
-              item.equipmentType === "nitrogenDioxide"
+                item.equipmentType === "nitrogenDioxide"
             ) {
               showBadLoading.value = 0;
             } else {
@@ -672,7 +675,7 @@ const manageSelect = (index) => {
   } else if (index === "隧道管理") {
     if (currentSiteId.value && currentUserId.value) {
       router.push(
-        "/tunnel/" +
+          "/tunnel/" +
           localStorage.getItem("currentSiteId") +
           "/byHome/" +
           currentUserId.value
@@ -733,7 +736,7 @@ const nextBtn = () => {
 
 const initWebSocket = () => {
   // let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
-  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
   // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
   // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
   socket = new WebSocket(wsUrl);
@@ -843,6 +846,7 @@ const initWebSocket = () => {
   text-align: center;
   margin-left: 40px;
   font-size: 38px;
+
   &:hover {
     color: #f7b500;
   }

src/views/tunnel/index.vue

@@ -336,10 +336,11 @@ const btnList = ref([
   //   icon: 'sp_icon_xtgl.png',
   //   name: '系统管理'
   // },
-  // {
+  {
-  //   icon: 'sp_icon_mngl.png',
+    route: '/simulate',
-  //   name: '模拟仿真'
+    icon: 'sp_icon_mngl.png',
-  // },
+    name: '模拟仿真'
+  },
 ]);
 const serialNumber = ref("");
 const roleKey = ref("");
@@ -466,6 +467,7 @@ const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
     if (res?.code === 1000) {
       let routeArr = [];
+      res.data.routeList.push('/simulate')
       res.data.routeList.forEach((item) => {
         for (let btn of btnList.value) {
           if (item === btn.route) {
@@ -620,12 +622,12 @@ const changeTunnel = (e) => {
     showFan.value = true;
   });
 };
-const manageSelect = (index) => {
+const manageSelect = (name) => {
-  if (index === "站点管理") {
+  if (name === "站点管理") {
     if (currentUserId.value) {
       router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
     }
-  } else if (index === "隧道管理") {
+  } else if (name === "隧道管理") {
     if (currentSiteId.value && currentUserId.value) {
       router.push(
         "/tunnel/" +
@@ -634,10 +636,14 @@ const manageSelect = (index) => {
           currentUserId.value
       );
     }
-  } else if (index === "用户管理") {
+  } else if (name === "用户管理") {
     if (currentSiteId.value) {
       router.push("/user/" + localStorage.getItem("currentSiteId"));
     }
+  } else if (name === "模拟仿真") {
+    if (tunnelId.value) {
+      router.push("/simulate/" + tunnelId.value);
+    }
   }
   if(socket){
     socket.close()
@@ -689,7 +695,7 @@ const nextBtn = () => {
 
 const initWebSocket = () => {
   // let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
-  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
   // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
   // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
   socket = new WebSocket(wsUrl);