Merge branch 'trp_dev' of http://git.feashow.cn/clay/tunnel-cloud-web

src/api/largeScreen.js

@@ -35,3 +35,10 @@ export const getBadGasEchartsInfo = (tunnelId) => {
     method: 'get'
   })
 }
+//电流监控数据
+export const getFanEchartsInfo = (equipmentId) => {
+  return request({
+    url: `/tunnel/large/screen/echarts/current/${equipmentId}`,
+    method: 'get'
+  })
+}

src/api/site.js

@@ -29,7 +29,7 @@ export const addSite = (data) => {
 }
 export const deleteSite = (siteIdList) => {
   return request({
-    url: `/tunnel/site/${siteIdList}`,
+    url: `/tunnel/site/delete/${siteIdList}`,
     method: 'delete'
   })
 }

src/api/tunnelManage.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request.js'
+
+export const getTunnelList = (params) => {
+  return request({
+    url: '/tunnel/tunnel/screen/list',
+    method: 'get',
+    params
+  })
+}
+export const getTunnelDetail = (tunnelId) => {
+  return request({
+    url: `/tunnel/tunnel/${tunnelId}`,
+    method: 'get'
+  })
+}
+export const addTunnel = (data) => {
+  return request({
+    url: '/tunnel/tunnel',
+    method: 'post',
+    data
+  })
+}
+export const deleteTunnel = (tunnelIdList) => {
+  return request({
+    url: `/tunnel/tunnel/${tunnelIdList}`,
+    method: 'delete'
+  })
+}
+//设备信息列表
+export const getEquipmentList = (tunnelId) => {
+  return request({
+    url: '/tunnel/equipment/equipments',
+    method: 'get',
+    params:{
+      tunnelId:tunnelId
+    }
+  })
+}
+export const editTunnel = (data) => {
+  return request({
+    url: '/tunnel/model/details',
+    method: 'put',
+    data
+  })
+}
+//设备管理-风机设备信息修改
+export const editFan = (data) => {
+  return request({
+    url: '/tunnel/equipment/frequency/equipments',
+    method: 'put',
+    data
+  })
+}
+export const editEquipment = (data) => {
+  return request({
+    url: '/tunnel/equipment/equipments',
+    method: 'put',
+    data
+  })
+}

src/api/tunnelScene.js

@@ -42,3 +42,12 @@ export const saveEquipment = (
     },
   });
 };
+
+// 保存模型(新增)
+export const apiSaveEquipment = (data) => {
+  return request({
+    url: "/tunnel/model/details",
+    method: "put",
+    data,
+  });
+};

src/assets/styles/index.scss

@@ -86,6 +86,23 @@ body,
     }
   }
 
+  .top-length {
+    z-index: 2;
+    position: absolute;
+    top: 190px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 50px;
+    //font-weight: bold;
+    color: #0BE9FA;
+
+    > span:last-child {
+      margin-left: 40px;
+    }
+
+  }
+
   .top-right {
     z-index: 2;
     position: absolute;
@@ -281,6 +298,11 @@ body,
       height: 1160px;
       //width: 1300px;
     }
+    #containerFan {
+      flex: 1;
+      height: 1160px;
+      //width: 1300px;
+    }
 
     #containerBad {
       flex: 1;
@@ -487,43 +509,53 @@ body,
   background: #072247 !important;
   border: 1px solid #0F82AF !important;
 }
+
 .el-popper {
   max-width: 200px !important;
   box-sizing: border-box;
 }
+
 .el-popper__arrow::before {
   display: none;
 }
-.el-select-dropdown{
+
-  width: 200px!important;
+.el-select-dropdown {
+  width: 200px !important;
 }
-.el-select-dropdown__item{
+
-  >span{
+.el-select-dropdown__item {
+  > span {
     color: #FFFFFF;
   }
 }
+
 .el-select .el-input .el-select__caret {
-  font-size: 35px!important;
+  font-size: 35px !important;
 }
-.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{
+
-  background-color: #064B66!important;
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-  width:198px!important;
+  background-color: #064B66 !important;
+  width: 198px !important;
 }
-.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
+
-  background-color: #064B66!important;
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
-  width:200px!important;
+  background-color: #064B66 !important;
+  width: 200px !important;
 }
-.el-select-tags-wrapper{
+
-  .el-tag{
+.el-select-tags-wrapper {
-    padding: 28px 20px!important;
+  .el-tag {
+    padding: 28px 20px !important;
     font-size: 35px;
-    .el-icon{
+
+    .el-icon {
       width: 40px;
       height: 40px;
-      font-size: 40px!important;
+      font-size: 40px !important;
     }
   }
 }
+
 .current-site {
   .el-select-dropdown {
     width: 200px !important;

src/components/content/fanInfo/FanInfo.vue

@@ -64,17 +64,38 @@
             </div>
           </div>
         </div>
-        <div class="current">
+        <div class="current" @click="handleOpenChart(item)">
-          <fan-info-item :wp="transducerData[index]"/>
+          <fan-info-item :wp="transducerData[index]" />
         </div>
       </div>
     </div>
+    <div class="digital-tunnel">
+      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="'电流监控数据'" width="2175px"
+                 :modal="false">
+        <div class="left-top-icon"></div>
+        <div class="right-top-icon"></div>
+        <div class="chat-dialog">
+          <div id="containerFan"></div>
+          <div style="width: 1px;"></div>
+        </div>
+<!--        <div class="time-select">-->
+<!--          <time-range-btn-->
+<!--              :buttonList="timeList"-->
+<!--              v-model="selectTimeButton"-->
+<!--              @select="timeSelect"-->
+<!--          />-->
+<!--        </div>-->
+        <div class="left-bottom-icon"></div>
+        <div class="right-bottom-icon"></div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script setup>
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
+import {getFanEchartsInfo} from "../../../api/largeScreen";
 
 const props = defineProps({
   list: Array,
@@ -89,6 +110,8 @@ const transducerData = ref([])
 const stateA = ref(false)
 const stateB = ref(false)
 const stateC = ref(false)
+const isVisited = ref(false)
+let myEcharts = reactive({});
 watch(() => props.transducerData, (now) => {
   getTransData(now.frequencyChangerList)
 }, {deep: true});
@@ -122,7 +145,19 @@ watch(() => props.list, (now) => {
   })
   handleOnMounted()
 }, {deep: true});
-
+const getFanInfo = (equipmentId) => {
+  getFanEchartsInfo(equipmentId).then(res => {
+    if (res?.code === 1000) {
+      isVisited.value = true
+      nextTick(() => {
+        initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC)
+      })
+    }
+  })
+}
+const handleOpenChart = (item) => {
+  getFanInfo(item.equipmentId)
+}
 const getTransData = (data) => {
   let tranObj = {}
   let tranArr = []
@@ -306,6 +341,128 @@ const getImageUrl = (name) => {
   let icon = getImage(name)
   return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
 }
+/**
+ * 初始化echarts实例方法
+ */
+const initChart = (type, valueA,valueB,valueC) => {
+  //3.初始化container容器
+  myEcharts = echarts.init(document.getElementById('containerFan'));
+  //5.传入数据
+  let option = {
+    //图例
+    legend: {
+      left: 0,
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 45
+      },
+      itemWidth: 30,
+      itemHeight: 30,
+      icon: "circle",
+    },
+    //离容器四侧的距离
+    grid: {
+      left: 0, // 左边距
+      right: 20, // 右边距
+      top: 80, // 顶边距
+      bottom: 0, // 底边距
+      containLabel: true,
+    },
+    //提示框组件
+    tooltip: {
+      show: true,
+      trigger: 'axis',
+      backgroundColor: "transparent", // 设置背景颜色为透明
+      borderColor: "transparent", // 设置边框颜色为透明
+      padding: 0, // 设置内边距为0
+      textStyle: {
+        fontSize: 40
+      },
+      formatter: function (params) {
+        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: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
+          </div>`;
+        return content;
+      },
+    },
+    toolbox: {
+      show: false,
+      right: 10,
+      feature: {
+        dataZoom: {
+          yAxisIndex: 'none'
+        }
+      }
+    },
+    dataZoom: [{
+      type: 'inside'
+    }],
+    //X轴
+    xAxis: {
+      type: 'category',
+      // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
+      data: type,
+      axisLabel: {
+        textStyle: {
+          fontSize: 45,
+          color: '#D6F1FA'
+        },
+      },
+    },
+    //Y轴
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        textStyle: {
+          fontSize: 45,
+          color: '#D6F1FA'
+        },
+      },
+    },
+    //配置项
+    series: [
+      {
+        // data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
+       name:'A相电流',
+        data: valueA,
+        type: 'line',
+        smooth: true,
+        symbolSize: 24,
+        lineStyle: {
+          width: 5
+        },
+      },
+      {
+        name:'B相电流',
+        data: valueB,
+        type: 'line',
+        smooth: true,
+        symbolSize: 24,
+        lineStyle: {
+          width: 5
+        },
+      },
+      {
+        name:'C相电流',
+        data: valueC,
+        type: 'line',
+        smooth: true,
+        symbolSize: 24,
+        lineStyle: {
+          width: 5
+        },
+      }
+    ]
+  }
+  myEcharts.setOption(option);
+  //图表大小自适应窗口大小变化
+  window.onresize = () => {
+    myEcharts.resize();
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -608,6 +765,7 @@ input[type="number"] {
         height: 37px;
         font-size: 28px;
         color: #FFFFFF;
+        cursor: pointer;
       }
 
     }

src/components/content/tunnelScene/TunnelScene.vue

@@ -3,17 +3,34 @@
     <div id="cvs" ref="content"></div>
     <dev-info ref="info" :devInfo="devInfo" />
     <!-- 这里的预览模式需要做成不能修改的模式 -->
-    <edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
+    <edit-dialog
-      :hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice"
+      ref="edit"
-      pointGap="500" />
+      @addEquipment="handleAddEqu"
-    <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
+      @removeEquipment="handleRemoveEqu"
+      @cancel="handleCancel"
+      :hasDev="hasDevice"
+      :pointNum="pointNum"
+      :tunnelId="params.tunnelId"
+      :position="targetP?.name"
+      :hasEquipment="hasDevice"
+      :pointGap="pointGap"
+      :form="params.form"
+    />
+    <el-dialog
+      v-model="centerDialogVisible"
+      width="30%"
+      destroy-on-close
+      center
+      :show-close="false"
+      style="
         margin: 20% auto;
         width: 569px;
         height: 330px;
         background: rgba(7, 35, 72, 0.79);
         border-radius: 20px;
         border: 2px solid #0f82af;
-      ">
+      "
+    >
       <p id="remove-title">是否确定删除该设备</p>
       <div class="btn">
         <button @click="centerDialogVisible = false">取消</button>
@@ -47,24 +64,36 @@ import {
 
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
-import { useModelSceneStore } from "@/store/modelSceneStore";
+import { deleteEquipment, initData } from "./request";
 
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
-const store = useModelSceneStore();
+let modelList = ref(null);
-
 let demo; //定义demo对象
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 
-const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 let isedit = ref(params.isedit);
+let tunnelId = reactive(params.tunnelId);
+
+watch(
+  () => params.tunnelLength,
+  (now) => {
+    params.tunnelLength = now;
+    console.log(params.tunnelLength);
+    pointGap = now / 20;
+  },
+  { deep: true }
+);
+
+let pointGap = reactive(params.tunnelLength);
 
 onMounted(handleMounted);
 // 挂载后回调
@@ -87,12 +116,7 @@ async function handleMounted() {
 
   //加载HDR背景图片
   demo.loadBackground(hdrLoader, backColorSet);
-  watch(
+
-    () => params.tunnelId,
-    async () => {
-      const text = await store.initData(params.tunnelId);
-    }
-  );
   // 初始化设备模型
   try {
     const map = new Map();
@@ -100,11 +124,12 @@ async function handleMounted() {
     map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
     demo.initDevicesModel(map);
     // 初始化
-    const equipmentList = await store.getEquipmentList();
+    modelList.value = await initData(params.tunnelId, params.form);
-    demo.editTunnelInit(equipmentList);
+    console.log("init", params.tunnelId);
+    demo.editTunnelInit(modelList.value);
   } catch (err) {
     ElMessage({
-      message: "场景加载异常！",
+      message: "场景初始化异常！",
       type: "warning",
     });
   }
@@ -118,7 +143,7 @@ function loadModel(path) {
       (obj) => {
         resolve(obj);
       },
-      (xhr) => { },
+      (xhr) => {},
       (err) => {
         reject(err);
       }
@@ -204,8 +229,7 @@ function handleRemoveEqu() {
 // 对话框确认删除
 function handleConfirmAddEqu() {
   console.log("target:", targetP.value.info);
-  store
+  deleteEquipment(targetP.value.info.equipmentId, pointGap)
-    .deleteEquipment(10000, params.tunnelId, targetP.value.info.equipmentId)
     .then((res) => {
       demo.removeEquipment(targetP.value);
       centerDialogVisible.value = false;
@@ -214,9 +238,9 @@ function handleConfirmAddEqu() {
         type: "success",
       });
     })
-    .catch((err) => {
+    .catch((res) => {
       ElMessage({
-        message: "请求异常！",
+        message: "删除失败！",
         type: "warning",
       });
     });

src/components/content/tunnelScene/editEquComp/editDialog.vue

@@ -48,9 +48,8 @@ import InputNum from "./childComps/InputNum.vue";
 import SelectInput from "./childComps/SelectInput.vue";
 import { getEquipmentType, getEquipment } from "@/api/tunnelScene";
 import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
-import { useModelSceneStore } from "@/store/modelSceneStore";
 import { ElMessage } from "element-plus";
-
+import { saveEquipment, initData } from "../request";
 const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
 const params = defineProps([
   "pointNum",
@@ -58,33 +57,60 @@ const params = defineProps([
   "tunnelId",
   "position",
   "hasEquipment",
+  "form",
 ]);
 
-// 当前风压
 let p = ref(57);
 const equipment = ref(null);
 const equipmentType = ref(null);
-const store = useModelSceneStore();
+
+let maxConstructionLength = ref(0);
 //计算锚点之间距离
 const pointDistance_str = computed(
   () =>
-    `${params.pointGap}米*${params.pointNum}=${
+    `${params.pointGap}米*${params.pointNum}=${(
       params.pointGap * params.pointNum
-    }米`
+    ).toFixed(2)}米`
+);
+
+watch(
+  () => params.form,
+  () => {
+    initData(params.tunnelId, params.form);
+  },
+  {
+    deep: true,
+  }
 );
 
 // 请求数据模型
 const equipmentSetting = reactive({
+  equipmentId: null,
+  equipmentName: "",
   equipmentType: "", //设备类型
-  chooseEquipment: null, //设备选择(设备名称)
+  position: "",
   threshold: "", //阈值
+  typeKey: null, //设备选择(设备名称)
 });
+function resetEquipmentSetting() {
+  equipmentSetting.equipmentId = null;
+  equipmentSetting.equipmentName = "";
+  equipmentSetting.equipmentType = "";
+  equipmentSetting.position = "";
+  equipmentSetting.threshold = "";
+  equipmentSetting.typeKey = null;
+  equipment.value.reset();
+  equipmentType.value.reset();
+}
+
 // 绑定选择的设备类型
 function handleTypeChange(optionItem) {
   equipmentSetting.equipmentType = optionItem.value;
 }
 function handleEquipmentChange(equipmentItem) {
-  equipmentSetting.chooseEquipment = equipmentItem;
+  equipmentSetting.equipmentName = equipmentItem.label;
+  equipmentSetting.equipmentId = equipmentItem.equipmentId;
+  equipmentSetting.typeKey = equipmentItem.value;
 }
 // 设备类型选项参数
 let options = reactive([{ label: "暂无数据", value: "" }]);
@@ -127,11 +153,7 @@ function handelInput(e) {
 
 // 处理取消事件
 function handleCancel() {
-  equipmentSetting.equipmentType = "";
+  resetEquipmentSetting();
-  equipmentSetting.chooseEquipment = null;
-  equipmentSetting.threshold = "";
-  equipment.value.reset();
-  equipmentType.value.reset();
   // 发射事件给tunnel父组件
   emit("cancel");
 }
@@ -150,35 +172,37 @@ function addEquipment() {
     });
     return;
   }
-  if (!equipmentSetting.equipmentType || !equipmentSetting.chooseEquipment) {
+  if (!equipmentSetting.equipmentType || !equipmentSetting.equipmentId) {
     ElMessage({
       message: "选项不能为空！",
       type: "warning",
     });
     return;
   }
-
   equipmentSetting.position = params.position;
   // 合法请求
-  store
+  saveEquipment(equipmentSetting, params.pointGap)
-    .saveSceneData(10000, 1, equipmentSetting)
     .then((res) => {
       emit("addEquipment", equipmentSetting);
-      equipmentSetting.chooseEquipment = null;
-      equipmentSetting.equipmentType = "";
-      equipmentSetting.threshold = "";
-      equipment.value.reset();
-      equipmentType.value.reset();
       ElMessage({
         message: "添加成功！",
         type: "success",
       });
+      resetEquipmentSetting();
     })
     .catch((err) => {
-      ElMessage({
+      if (err === 3000) {
-        message: "请求异常！",
+        ElMessage({
-        type: "warning",
+          message: "该设备已添加！",
-      });
+          type: "warning",
+        });
+        resetEquipmentSetting();
+      } else {
+        ElMessage({
+          message: "添加异常！",
+          type: "warning",
+        });
+      }
     });
 }
 </script>

src/components/content/tunnelScene/request/index.js

@@ -0,0 +1,145 @@
+import { apiSaveEquipment, initSceneData } from "@/api/tunnelScene";
+import { toRaw } from "vue";
+let modelEquipmentList = [];
+let originData = null;
+// 初始化当前隧道数据并保存在本地
+export const initData = (tunnelId, otherInfo) => {
+  return new Promise((resolve, reject) => {
+    initSceneData(tunnelId)
+      .then((res) => {
+        originData = toRaw(otherInfo);
+        if (res.data.tunnelThreeConfig) {
+          console.log("data", res.data);
+          modelEquipmentList = JSON.parse(res.data.tunnelThreeConfig);
+        }
+        console.log("test", modelEquipmentList, originData);
+        resolve(modelEquipmentList);
+      })
+      .catch((Error) => {
+        ElMessage.error("场景初始化异常！");
+        reject();
+      });
+  });
+};
+
+//保存数据并提交
+export const saveEquipment = (equipmentInfo, pointGap) => {
+  const {
+    constructionLength,
+    isDefault,
+    remarks,
+    serialNumber,
+    siteId,
+    totalLength,
+    tunnelId,
+    tunnelName,
+  } = originData;
+  let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
+  tempModelEquipmentList.push(toRaw(equipmentInfo));
+  return new Promise((resolve, reject) => {
+    console.log("equId", equipmentInfo.equipmentId);
+    hasEquipment(equipmentInfo.equipmentId)
+      ? reject(3000)
+      : apiSaveEquipment({
+          constructionLength: autoComputeConstructionLength(
+            tempModelEquipmentList,
+            pointGap
+          ),
+          isDefault,
+          modelEquipmentList: tempModelEquipmentList,
+          remarks,
+          serialNumber,
+          tunnelId,
+          tunnelLength: totalLength,
+          tunnelName,
+        })
+          .then((res) => {
+            if (res?.code === 1000) {
+              modelEquipmentList.push(toRaw(equipmentInfo)); //存入本地
+              resolve();
+            }
+            console.log("add", res);
+            reject(res);
+          })
+          .catch((err) => {
+            reject();
+          });
+  });
+};
+
+// 删除
+export const deleteEquipment = (equipmentId, pointGap) => {
+  let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
+  tempModelEquipmentList = tempModelEquipmentList.filter(
+    (item) => item.equipmentId != equipmentId
+  );
+  console.log(
+    "del",
+    modelEquipmentList,
+    tempModelEquipmentList,
+    "id",
+    equipmentId
+  );
+  const {
+    constructionLength,
+    isDefault,
+    remarks,
+    serialNumber,
+    siteId,
+    totalLength,
+    tunnelId,
+    tunnelName,
+  } = originData;
+  return new Promise((resolve, reject) => {
+    apiSaveEquipment({
+      constructionLength: autoComputeConstructionLength(
+        tempModelEquipmentList,
+        pointGap
+      ),
+      isDefault,
+      modelEquipmentList: tempModelEquipmentList,
+      remarks,
+      serialNumber,
+      tunnelId,
+      tunnelLength: totalLength,
+      tunnelName,
+    })
+      .then((res) => {
+        if (res?.code === 1000) {
+          modelEquipmentList = modelEquipmentList.filter(
+            (item) => item.equipmentId === equipmentId
+          );
+          resolve();
+        }
+        reject(res);
+      })
+      .catch((err) => {
+        reject();
+      });
+  });
+};
+
+function autoComputeConstructionLength(modelEquipmentList, pointGap) {
+  let maxLength = 0;
+  modelEquipmentList.forEach((item) => {
+    const length =
+      Number(
+        item.position.substring(
+          item.position.indexOf("_") + 1,
+          item.position.lastIndexOf("_")
+        ) - 1
+      ) * pointGap;
+    if (length > maxLength) {
+      maxLength = length;
+    }
+  });
+  return maxLength;
+}
+
+function hasEquipment(equipmentId) {
+  let result = false;
+  modelEquipmentList.forEach((item) => {
+    if (item.equipmentId === equipmentId) result = true;
+  });
+  return result;
+}

src/components/content/tunnelScene/sceneClass/editEquipment/index.js

@@ -12,10 +12,10 @@ function addEquipment(targetPoint, formInfo) {
   if (targetPoint.hasDevice) {
     return;
   }
-
+  console.log("info", formInfo);
   switch (formInfo.equipmentType) {
     case "frequency":
-      handleFanEqu.call(this, targetPoint, formInfo.chooseEquipment);
+      handleFanEqu.call(this, targetPoint, formInfo);
       break;
     // 还没有风压阀的模型，所以先用其他设备传感器实现
     // case "valve":
@@ -23,7 +23,7 @@ function addEquipment(targetPoint, formInfo) {
     //   break;
     case "windPressure":
     case "sensor":
-      handleOtherEqu.call(this, targetPoint, formInfo.chooseEquipment);
+      handleOtherEqu.call(this, targetPoint, formInfo);
       break;
     default:
       break;
@@ -37,9 +37,6 @@ function addEquipment(targetPoint, formInfo) {
 
 // }
 
-
-
-
 // 其他传感器
 function handleOtherEqu(targetPoint, equipmentInfo) {
   const equMesh = this.equMap.get("equ_sensors").clone();
@@ -47,8 +44,7 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   equMesh.position.copy(worldP);
 
   //设备添加标签
-  const tag = EquipmentTag(equipmentInfo.label);
+  const tag = EquipmentTag(equipmentInfo.equipmentName);
-  console.log(equipmentInfo);
   equMesh.getObjectByName("tag").material = tag;
   if (/tr$/.test(targetPoint.name)) {
     equMesh.rotation.z = -Math.PI / 2;
@@ -71,41 +67,40 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   targetPoint.scale.set(0.03, 0.06, 0.05);
   this.scene.add(equMesh);
   targetPoint.visible = false;
-  targetPoint.hasWall = true
+  // targetPoint.hasWall = true;
-  //处理风压阀的代码片段
+  // //处理风压阀的代码片段
-  let lineIndex = targetPoint.name.slice(7, 9)
+  // let lineIndex = targetPoint.name.slice(7, 9);
-  for (let line = Number(lineIndex); line <= 20; line++) {
+  // for (let line = Number(lineIndex); line <= 20; line++) {
-    if (line < 10) {
+  //   if (line < 10) {
-      let wall = 'wall_' + '0' + line
+  //     let wall = "wall_" + "0" + line;
-      this.scene.getObjectByName(wall).visible = true
+  //     this.scene.getObjectByName(wall).visible = true;
-      let point = 'point_' + '00' + line + '_tc'
+  //     let point = "point_" + "00" + line + "_tc";
-      console.log(this.scene.getObjectByName(point));
+  //     this.scene.getObjectByName(point).visible = false;
-      this.scene.getObjectByName(point).visible = false
+  //     this.scene.getObjectByName(point).layers.set(-2);
-      this.scene.getObjectByName(point).layers.set(-2)
+  //     if (this.scene.getObjectByName(point).hasDevice == true) {
-      if (this.scene.getObjectByName(point).hasDevice == true) {
+  //       let EquID = this.scene.getObjectByName(point).info.id;
-        let EquID = this.scene.getObjectByName(point).info.id
+  //       this.scene.getObjectById(EquID).visible = false;
-        this.scene.getObjectById(EquID).visible = false
+  //     }
-      }
+  //   } else if (line >= 10) {
-    } else if (line >= 10) {
+  //     let wall = "wall_" + line;
-      let wall = 'wall_' + line
+  //     this.scene.getObjectByName(wall).visible = true;
-      this.scene.getObjectByName(wall).visible = true
+  //     let point = "point_" + "0" + line + "_tc";
-      let point = 'point_' + '0' + line + '_tc'
+  //     this.scene.getObjectByName(point).visible = false;
-      this.scene.getObjectByName(point).visible = false
+  //     this.scene.getObjectByName(point).layers.set(-2);
-      this.scene.getObjectByName(point).layers.set(-2)
+  //     if (this.scene.getObjectByName(point).hasDevice == true) {
-      if (this.scene.getObjectByName(point).hasDevice == true) {
+  //       let EquID = this.scene.getObjectByName(point).info.id;
-        let EquID = this.scene.getObjectByName(point).info.id
+  //       this.scene.getObjectById(EquID).visible = false;
-        this.scene.getObjectById(EquID).visible = false
+  //     }
-      }
+  //   }
-    }
+  //   //处理21行的设备和附着点
-    //处理21行的设备和附着点
+  //   let point = "point_" + "0" + 21 + "_tc";
-    let point = 'point_' + '0' + 21 + '_tc'
+  //   this.scene.getObjectByName(point).visible = false;
-    this.scene.getObjectByName(point).visible = false
+  //   this.scene.getObjectByName(point).layers.set(-2);
-    this.scene.getObjectByName(point).layers.set(-2)
+  //   if (this.scene.getObjectByName(point).hasDevice == true) {
-    if (this.scene.getObjectByName(point).hasDevice == true) {
+  //     let EquID = this.scene.getObjectByName(point).info.id;
-      let EquID = this.scene.getObjectByName(point).info.id
+  //     this.scene.getObjectById(EquID).visible = false;
-      this.scene.getObjectById(EquID).visible = false
+  //   }
-    }
+  // }
-  }
   // this.scene.getObjectByName('wall_01').visible = true
   // console.log(this.scene);
   // 保存该设备模型id，后期直接从附附着点进行删除
@@ -117,7 +112,6 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   // 1.先取出当前点击添加设备锚点的行数
   // 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取)
   // 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中
-
 }
 
 // 风机
@@ -153,7 +147,6 @@ function handleFanEqu(
   fanSpin.onUpdate((obj) => {
     fanLeaf.rotation.z = obj.rotation;
   });
-
   this.fanSpinArray.push(fanSpin);
 }
 
@@ -162,39 +155,39 @@ function removeEquipment(targetPoint) {
   //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
   if (!targetPoint.hasDevice) return;
   if (targetPoint.hasWall == true) {
-    let lineIndex = targetPoint.name.slice(7, 9)
+    let lineIndex = targetPoint.name.slice(7, 9);
     for (let line = Number(lineIndex); line <= 20; line++) {
       if (line < 10) {
-        let wall = 'wall_' + '0' + line
+        let wall = "wall_" + "0" + line;
-        this.scene.getObjectByName(wall).visible = false
+        this.scene.getObjectByName(wall).visible = false;
-        let point = 'point_' + '00' + line + '_tc'
+        let point = "point_" + "00" + line + "_tc";
         console.log(this.scene.getObjectByName(point));
-        this.scene.getObjectByName(point).visible = true
+        this.scene.getObjectByName(point).visible = true;
-        this.scene.getObjectByName(point).layers.set(0)
+        this.scene.getObjectByName(point).layers.set(0);
         if (this.scene.getObjectByName(point).hasDevice == true) {
-          this.scene.getObjectByName(point).visible = false
+          this.scene.getObjectByName(point).visible = false;
-          let EquID = this.scene.getObjectByName(point).info.id
+          let EquID = this.scene.getObjectByName(point).info.id;
-          this.scene.getObjectById(EquID).visible = true
+          this.scene.getObjectById(EquID).visible = true;
         }
       } else if (line >= 10) {
-        let wall = 'wall_' + line
+        let wall = "wall_" + line;
-        this.scene.getObjectByName(wall).visible = false
+        this.scene.getObjectByName(wall).visible = false;
-        let point = 'point_' + '0' + line + '_tc'
+        let point = "point_" + "0" + line + "_tc";
-        this.scene.getObjectByName(point).visible = true
+        this.scene.getObjectByName(point).visible = true;
-        this.scene.getObjectByName(point).layers.set(0)
+        this.scene.getObjectByName(point).layers.set(0);
         if (this.scene.getObjectByName(point).hasDevice == true) {
-          this.scene.getObjectByName(point).visible = false
+          this.scene.getObjectByName(point).visible = false;
-          let EquID = this.scene.getObjectByName(point).info.id
+          let EquID = this.scene.getObjectByName(point).info.id;
-          this.scene.getObjectById(EquID).visible = true
+          this.scene.getObjectById(EquID).visible = true;
         }
       }
       //处理21行的设备和附着点
-      let point = 'point_' + '0' + 21 + '_tc'
+      let point = "point_" + "0" + 21 + "_tc";
-      this.scene.getObjectByName(point).visible = true
+      this.scene.getObjectByName(point).visible = true;
-      this.scene.getObjectByName(point).layers.set(0)
+      this.scene.getObjectByName(point).layers.set(0);
       if (this.scene.getObjectByName(point).hasDevice == true) {
-        let EquID = this.scene.getObjectByName(point).info.id
+        let EquID = this.scene.getObjectByName(point).info.id;
-        this.scene.getObjectById(EquID).visible = true
+        this.scene.getObjectById(EquID).visible = true;
       }
     }
   }

src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js

@@ -1,21 +1,6 @@
 export function editTunnelInit(equipmentList) {
   //初始化将墙壁隐藏起来
-  // for (let line = 1; line <= 20; line++) {
-  //   if (line < 10) {
-  //     let wall = 'wall_' + '0' + line
-  //     this.scene.getObjectByName(wall).visible = false
-  //   } else if (line >= 10) {
-  //     let wall = 'wall_' + line
-  //     this.scene.getObjectByName(wall).visible = false
-  //   }
-  // }
-
   equipmentList.forEach((item) => {
-    const formInfo = {
+    this.addEquipment(this.scene.getObjectByName(item.position), item);
-      equipmentType: item.equipmentType, //设备类型
-      chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
-      threshold: item.threshold,
-    };
-    this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
   });
 }

src/components/content/windPressure/WindPressureList.vue

@@ -2,11 +2,12 @@
   <div id="wind-pressure">
     <div class="name">风压</div>
     <div class="list">
-      <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1"
+      <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
-                          @click="handleOpenChart(item,index+1)"/>
+                          @click="handleOpenChart(item)"/>
     </div>
     <div class="digital-tunnel">
-      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'号风压监控数据'" width="2175px" :modal="false">
+      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'监控数据'" width="2175px"
+                 :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
         <div class="chat-dialog">
@@ -69,9 +70,9 @@ const getWindInfo = (equipmentId) => {
   })
 }
 
-const handleOpenChart = (item, index) => {
+const handleOpenChart = (item) => {
   getWindInfo(item.equipmentId)
-  windSort.value = index
+  windSort.value = item.equipmentName
 }
 const timeSelect = (index) => {
   console.log('选择时间', index)
@@ -89,6 +90,7 @@ const getScreenInfo = (now) => {
   now?.map(item => {
     windPressureObj = {
       equipmentId: item.equipmentId,
+      equipmentName: item.equipmentName,
       max: 120,
       value: item.value,
       point: item.valueThreshold,

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -2,7 +2,7 @@
   <div id="wind-pressure-item" :class="{ abnormal:isWaring }">
     <div class="label">
       <img src="../../../../assets/images/windPressure/icon.png" alt=""/>
-      <span>{{ index }}号风压</span>
+      <span>{{params.wp.equipmentName}}</span>
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
@@ -16,8 +16,7 @@
 
 <script setup>
 const params = defineProps({
-  wp: Object,
+  wp: Object
-  index: Number,
 });
 // const info = {
 //   windPId: 0, //编号

src/components/manageBtn/index.vue

@@ -46,11 +46,11 @@ const btnList = ref([
     icon: 'sp_icon_yhgl.png',
     name: '用户管理'
   },
-  {
+  // {
-    route: '/system',
+  //   route: '/system',
-    icon: 'sp_icon_xtgl.png',
+  //   icon: 'sp_icon_xtgl.png',
-    name: '系统管理'
+  //   name: '系统管理'
-  },
+  // },
   // {
   //   icon: 'sp_icon_mngl.png',
   //   name: '模拟仿真'

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 import NProgress from 'nprogress'//进度条
 import 'nprogress/nprogress.css'
 import { getToken } from '../utils/auth'
@@ -24,7 +24,7 @@ const routes = [
     },
   },
   {
-    path: '/edit',
+    path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
     name: 'tunneledit',
     component: () => import('@/views/edit/edit.vue'),
     meta: {
@@ -42,7 +42,7 @@ const routes = [
     }
   },
   {
-    path: '/site',
+    path: '/site/:userId(\\d+)',
     name: 'site',
     component: () => import('@/views/site/index.vue'),
     meta: {
@@ -60,7 +60,7 @@ const routes = [
     }
   },
   {
-    path: '/tunnel/:siteId(\\d+)',
+    path: '/tunnel/:siteId(\\d+)/:type/:userId(\\d+)',
     name: 'tunnel',
     component: () => import('@/views/tunnel-manage/index.vue'),
     meta: {
@@ -69,7 +69,7 @@ const routes = [
     }
   },
   {
-    path: '/device/:tunnelId(\\d+)',
+    path: '/device/:tunnelId(\\d+)/:type/:userId(\\d+)',
     name: 'device',
     component: () => import('@/views/device-manage/index.vue'),
     meta: {
@@ -80,7 +80,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 });
 router.beforeEach((to, form, next) => {

src/store/modelSceneStore.js

@@ -3,22 +3,22 @@ import { ref } from "vue";
 import { saveEquipment, initSceneData } from "../api/tunnelScene";
 import { ElMessage } from "element-plus";
 export const useModelSceneStore = defineStore("modelSceneData", () => {
-  let equipmentList = ref("[]");
+  let equipmentList = ref([]);
+  let allEditList = ref({});
   function initData(tunnelId = 1) {
     initSceneData(tunnelId)
       .then((res) => {
-        equipmentList.value = res.data.tunnelThreeConfig;
+        // equipmentList.value = res.data.tunnelThreeConfig;
+        console.log("初始化的数据");
       })
       .catch((Error) => {
         ElMessage.error("场景初始化异常！");
       });
   }
   //默认初始化1号隧道
-  function saveSceneData(constructionLength, tunnelId, modelData) {
+  function saveSceneData(data) {
-    const temp = JSON.parse(equipmentList.value);
+    equipmentList.value.push(data);
-    temp.push(modelData);
+
-    equipmentList.value = JSON.stringify(temp);
-    console.log("save:", equipmentList.value);
     return saveEquipment(constructionLength, tunnelId, equipmentList.value);
   }
   //   删除设备
@@ -38,12 +38,11 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
           resolve(JSON.parse(equipmentList.value));
         })
         .catch((Error) => {
-          ElMessage.error("场景初始化异常！");
+          // ElMessage.error("场景初始化异常！");
           reject();
         });
     });
   }
-
   return {
     equipmentList,
     initData,

src/views/device-manage/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="tunnel-bgc">
     <div class="box-top">
-      <div class="back-tunnel" @click="router.back(-1)">
+      <div class="back-tunnel" @click="handleGoTunnelMgr">
         <div class="back-icon"></div>
         <span>返回</span>
       </div>
       <div class="tunnel-name">
-        一号隧道
+        {{ tunnelName }}
       </div>
       <div class="tunnel-title"></div>
     </div>
@@ -26,9 +26,9 @@
             <el-menu-item index="3">
               <span>其他传感器</span>
             </el-menu-item>
-            <el-menu-item index="4">
+            <!--            <el-menu-item index="4">-->
-              <span>分流器</span>
+            <!--              <span>分流器</span>-->
-            </el-menu-item>
+            <!--            </el-menu-item>-->
           </el-menu>
         </div>
         <div class="box-right" v-if="changeIndex==1">
@@ -50,20 +50,23 @@
                       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="fanData">
-              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
-              <el-table-column prop="currentA" label="A电流" align="center">
+              <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
+              <el-table-column prop="avoltageValue" label="A电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入A电流" v-model="scope.row.currentA"></el-input>
+                  <el-input placeholder="A电流" v-model="scope.row.avoltageValue"></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="currentB" label="B电流" align="center">
+              <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
+              <el-table-column prop="bvoltageValue" label="B电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入B电流" v-model="scope.row.currentB"></el-input>
+                  <el-input placeholder="B电流" v-model="scope.row.bvoltageValue"></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="currentC" label="C电流" align="center">
+              <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
+              <el-table-column prop="cvoltageValue" label="C电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入C电流" v-model="scope.row.currentC"></el-input>
+                  <el-input placeholder="C电流" v-model="scope.row.cvoltageValue"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -71,15 +74,15 @@
                   <div class="switch">
                     <div
                         :class="{ active: scope.row.state }"
-                        @click=" scope.row.state = true"
+                        @click="scope.row.state = 1"
                     >
-                      启动
+                      启用
                     </div>
                     <div
                         :class="{ active: ! scope.row.state }"
-                        @click=" scope.row.state = false"
+                        @click=" scope.row.state = 0"
                     >
-                      停止
+                      停用
                     </div>
                   </div>
                 </template>
@@ -90,7 +93,7 @@
             <div class="cancel-btn">
               取消
             </div>
-            <div class="sure-btn"  @click="router.back(-1)">
+            <div class="sure-btn" @click="handleEditFan">
               确定
             </div>
           </div>
@@ -114,28 +117,32 @@
                       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="name" label="设备名称" align="center"/>
+              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
               <el-table-column prop="offset" label="偏移量" align="center"/>
-              <el-table-column prop="unit" label="单位" align="center"/>
+              <el-table-column prop="unit" label="单位" align="center">
-              <el-table-column prop="thresholdValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
+                  <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="state" label="状态" align="center">
                 <template #default="scope">
-                  <div class="switch">
+                  <div class="switch wind-switch">
                     <div
                         :class="{ active: scope.row.state }"
-                        @click=" scope.row.state = true"
+                        @click=" scope.row.state = 1;"
                     >
-                      启动
+                      启用
                     </div>
                     <div
                         :class="{ active: ! scope.row.state }"
-                        @click=" scope.row.state = false"
+                        @click=" scope.row.state =  0;"
                     >
-                      停止
+                      停用
                     </div>
                   </div>
                 </template>
@@ -146,7 +153,7 @@
             <div class="cancel-btn">
               取消
             </div>
-            <div class="sure-btn"  @click="router.back(-1)">
+            <div class="sure-btn" @click="handleEditFan">
               确定
             </div>
           </div>
@@ -170,32 +177,32 @@
                       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="name" label="设备名称" align="center"/>
+              <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>
+                  <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="thresholdValue" label="阈值" align="center">
+              <el-table-column prop="alarmValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
                 <template #default="scope">
-                  <div class="switch">
+                  <div class="switch wind-switch">
                     <div
                         :class="{ active: scope.row.state }"
-                        @click=" scope.row.state = true"
+                        @click=" scope.row.state = 1;"
                     >
-                      启动
+                      启用
                     </div>
                     <div
                         :class="{ active: ! scope.row.state }"
-                        @click=" scope.row.state = false"
+                        @click=" scope.row.state =  0;"
                     >
-                      停止
+                      停用
                     </div>
                   </div>
                 </template>
@@ -206,7 +213,7 @@
             <div class="cancel-btn" @click="isVisited=false">
               取消
             </div>
-            <div class="sure-btn" @click="router.back(-1)">
+            <div class="sure-btn" @click="handleEditFan">
               确定
             </div>
           </div>
@@ -234,7 +241,7 @@
               <el-table-column prop="offset" label="偏移量" align="center"/>
               <el-table-column prop="thresholdValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -244,13 +251,13 @@
                         :class="{ active: scope.row.state }"
                         @click=" scope.row.state = true"
                     >
-                      启动
+                      启用
                     </div>
                     <div
                         :class="{ active: ! scope.row.state }"
                         @click=" scope.row.state = false"
                     >
-                      停止
+                      停用
                     </div>
                   </div>
                 </template>
@@ -261,7 +268,7 @@
             <div class="cancel-btn" @click="isVisited=false">
               取消
             </div>
-            <div class="sure-btn" @click="router.back(-1)">
+            <div class="sure-btn" @click="handleEditFan">
               确定
             </div>
           </div>
@@ -272,195 +279,253 @@
 </template>
 
 <script setup>
+import {getEquipmentList, editFan} from "@/api/tunnelManage";
+import {ElMessage} from "element-plus";
+import {editEquipment, getTunnelDetail} from "@/api/tunnelManage";
+
 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 collectionFrequency = ref(0)
 const changeIndex = ref(1)
-const fanData = [
+const fanData = ref([
-  {
+  // {
-    name: '一号风机',
+  //   name: '一号风机',
-    currentA: '2342',
+  //   currentA: '2342',
-    currentB: '2342',
+  //   currentB: '2342',
-    currentC: '2342',
+  //   currentC: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '二号风机',
+  //   name: '二号风机',
-    currentA: '2342',
+  //   currentA: '2342',
-    currentB: '2342',
+  //   currentB: '2342',
-    currentC: '2342',
+  //   currentC: '2342',
-    state: true,
+  //   state: true,
-  },
+  // },
-  {
+  // {
-    name: '三号风机',
+  //   name: '三号风机',
-    currentA: '2342',
+  //   currentA: '2342',
-    currentB: '2342',
+  //   currentB: '2342',
-    currentC: '2342',
+  //   currentC: '2342',
-    state: false,
+  //   state: false,
-  }
+  // }
-]
+])
-const winData = [
+const winData = ref([
-  {
+  // {
-    name: '1号风压',
+  //   name: '1号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '2号风压',
+  //   name: '2号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '3号风压',
+  //   name: '3号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '4号风压',
+  //   name: '4号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '5号风压',
+  //   name: '5号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '6号风压',
+  //   name: '6号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '7号风压',
+  //   name: '7号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '8号风压',
+  //   name: '8号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '9号风压',
+  //   name: '9号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-  {
+  // {
-    name: '10号风压',
+  //   name: '10号风压',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'Pa',
+  //   unit: 'Pa',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  },
+  // },
-]
+])
-const otherData = [
+const otherData = ref([
-  {
+  // {
-    name: '风速',
+  //   name: '风速',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '氧      气',
+  //   name: '氧      气',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '温      度',
+  //   name: '温      度',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '湿      度',
+  //   name: '湿      度',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '粉 尘',
+  //   name: '粉 尘',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '二氧化碳',
+  //   name: '二氧化碳',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '一氧化碳',
+  //   name: '一氧化碳',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '二氧化氮',
+  //   name: '二氧化氮',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '一氧化氮',
+  //   name: '一氧化氮',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '二氧化硫',
+  //   name: '二氧化硫',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '硫 化 氢',
+  //   name: '硫 化 氢',
-    offset: '2342',
+  //   offset: '2342',
-    unit: 'm/s',
+  //   unit: 'm/s',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }
+  // }
-]
+])
-const fenliuData = [
+const fenliuData = ref([
-   {
+  // {
-    name: '1号分流器',
+  //   name: '1号分流器',
-    offset: '2342',
+  //   offset: '2342',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '2号分流器',
+  //   name: '2号分流器',
-    offset: '2342',
+  //   offset: '2342',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }, {
+  // }, {
-    name: '3号分流器',
+  //   name: '3号分流器',
-    offset: '2342',
+  //   offset: '2342',
-    thresholdValue: '2342',
+  //   thresholdValue: '2342',
-    state: false,
+  //   state: false,
-  }
+  // }
-]
+])
+const siteId = ref(0)
+const tunnelName = ref('')
+
+const handleEditFan = () => {
+  const data = [
+    ...otherData.value,
+    ...winData.value,
+    ...fanData.value,
+  ]
+  editFan(data).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success('修改成功')
+      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
+    }else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
 const handleChangeMenu = (e) => {
-  console.log('切换', e)
   changeIndex.value = e
 }
+const getList = () => {
+  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
+      res.data.sensorList.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      otherData.value = res.data.sensorList
+      res.data.acquisitionList.map(item => {
+        if (item.tunnelId == tunnelId) {
+          collectionFrequency.value = item.acquisitionPeriod
+        }
+      })
+    }
+  })
+}
+const getTunnel = () => {
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      siteId.value = res.data.siteId
+      tunnelName.value = res.data.tunnelName
+      console.log('设备详情', res.data)
+    }
+  });
+}
+getTunnel()
+const handleGoTunnelMgr = () => {
+  router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
+}
+getList()
 </script>
 
 <style scoped lang="scss">
@@ -552,9 +617,10 @@ const handleChangeMenu = (e) => {
             &:nth-child(2) {
               letter-spacing: 120px;
             }
-            &:last-child{
+
-              letter-spacing: 40px;
+            //&:nth-child(4) {
-            }
+            //  letter-spacing: 40px;
+            //}
           }
         }
       }
@@ -589,7 +655,7 @@ const handleChangeMenu = (e) => {
               position: relative;
 
               input {
-                width: 166px;
+                width: 220px;
                 height: 50px;
                 border: 1px solid #05FEFF;
                 background: transparent;
@@ -622,16 +688,20 @@ const handleChangeMenu = (e) => {
 
       .device-table {
         margin-top: 50px;
-        margin-left: 97px;
+        margin-left: 60px;
 
         .active {
           color: #FFFFFF;
           background: #0f7da9;
         }
 
+        .wind-switch {
+          margin-left: 65px;
+        }
+
         .switch {
           margin-top: 22px;
-          margin-left: 60px;
+
           display: flex;
           width: 200px;
           height: 50px;
@@ -650,7 +720,7 @@ const handleChangeMenu = (e) => {
         }
 
         :deep(.el-table--fit) {
-          width: 1700px !important;
+          width: 1780px !important;
         }
 
         :deep(.cell) {
@@ -669,11 +739,13 @@ const handleChangeMenu = (e) => {
         }
 
         :deep(.el-table__row--striped) {
-          background-color: #13849C!important;
+          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--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;

src/views/edit/edit.vue

@@ -1,264 +1,250 @@
 <template>
-    <div id="main">
+  <div id="main">
-        <div class="box-top">
+    <div class="box-top">
-            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
+      <div class="back-tunnel" @click="handleGoTunnelMgr">
-            <div class="tunnel-title"></div>
+        <div class="back-icon"></div>
-            <manage-length class="tunnel-length"></manage-length>
+        <span>返回</span>
-            <div class="top-right">
+      </div>
-                <div class="current-site">
+      <div class="tunnel-title"></div>
-                    当前站点：<span>{{ currentSite }}</span>
+      <div class="btn-right">
-                    <el-dropdown trigger="click" @command="handleCommand">
+        <div class="del-btn" @click="handleGotoDevice">设备管理</div>
-                        <div class="toggle"></div>
+        <div class="del-btn" @click="handleSave">保存</div>
-                        <template #dropdown>
+      </div>
-                            <el-dropdown-menu>
-                                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
-                                }}</el-dropdown-item>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
-                </div>
-                <div class="current-user">
-                    上午好：<span>{{ currentUser }}</span>
-                    <span>今天是：{{ currentDate }}</span>
-                    <div class="logout" @click="handleLogout"></div>
-                </div>
-            </div>
-        </div>
-        <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
-        <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" />
     </div>
+    <div class="edit-box">
+      <el-form :model="form" :label-position="right" label-width="188px">
+        <el-form-item label="隧道名称">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称" />
+        </el-form-item>
+        <el-form-item label="序列号">
+          <el-input v-model="form.serialNumber" placeholder="请输入序列号" />
+        </el-form-item>
+        <el-form-item label="隧道长度">
+          <el-input
+            type="number"
+            v-model="form.totalLength"
+            placeholder="请输入隧道长度"
+          />
+        </el-form-item>
+        <el-form-item label="是否默认">
+          <el-radio-group v-model="form.isDefault">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="隧道备注">
+          <el-input v-model="form.remarks" placeholder="请输入隧道备注" />
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
+    <tunnel-scene
+      id="tunnel-box"
+      :isedit="true"
+      :tunnelId="tunnelId"
+      :form="form"
+      ref="tunnelScene"
+      :tunnelLength="tunnelLength"
+    />
+  </div>
 </template>
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
-import ManageBtn from "@/components/manageBtn/index.vue";
+import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
-import ManageLength from "@/components/manageLength/index.vue";
+import { computed, provide } from "vue";
-import { dateFormat } from "@/utils/date.js";
+import { useModelSceneStore } from "@/store/modelSceneStore";
-import { getToken } from "@/utils/auth";
+import { ElMessage } from "element-plus";
-import { useAuthStore } from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
-import { ElMessageBox } from "element-plus";
-import { getUserInfo } from "@/api/login";
 
-const authStore = useAuthStore();
 const router = useRouter();
-const selectIndex = ref(-1);
+const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
-const showFan = ref(false);
+const userId = reactive(router.currentRoute.value.params.userId);
-const drawerLeft = ref(true);
+const type = reactive(router.currentRoute.value.params.type);
-const drawerRight = ref(true);
+const store = useModelSceneStore();
-const currentSite = ref("");
+const form = ref({
-const siteList = ref([])
+  tunnelName: "",
-const currentUser = ref("");
+  serialNumber: "",
-const currentDate = ref(dateFormat());
+  totalLength: "",
-const tunnelBtn = ref();
+  isDefault: false,
-const tunnelList = ref([]);
+  remarks: "",
-const tunnelId = ref(0);
-const routeList = ref([]);
-let socket = reactive("");
-const serialNumber = ref("SC00DY00GH00ELBT");
-let token = getToken();
-let send = {
-    type: "ping",
-};
-const largeScreenData = ref(null);
-const socketData = reactive({
-    leftData: [],
-    windPressure: [],
-    sensor: [],
 });
-
+const equipmentList = ref([]);
-onMounted(() => {
+onMounted(async () => {
-    nextTick(() => {
+  equipmentList.value = await store.getEquipmentList();
-        showFan.value = true;
-    });
-    getUser()
-    getOtherInfo()
-
 });
-
+const getTunnel = () => {
-const getUser = () => {
+  getTunnelDetail(tunnelId).then((res) => {
-    getUserInfo().then(res => {
+    if (res?.code === 1000) {
-        currentUser.value = res.data.user.userName
+      form.value = res.data;
-    })
-}
-const getOtherInfo = () => {
-    getLargeScreenInfo().then((res) => {
-        if (res?.code === 1000) {
-            routeList.value = res.data.routeList
-            currentSite.value = res.data.siteOption[0].label
-            siteList.value = res.data.siteOption
-            tunnelId.value = res.data.tunnelOption[0].value
-            getTunnel(res.data.siteOption[0].value)
-            getScreenInfo(tunnelId.value);
-        }
-    });
-};
-const getScreenInfo = async (id) => {
-    await getLargeScreen(id).then((res) => {
-        if (res?.code === 1000) {
-            largeScreenData.value = res.data;
-        }
-    });
-};
-//根据站点id获取隧道信息
-const getTunnel = (id) => {
-    getTunnelBySiteId(id).then((res) => {
-        if (res?.code === 1000) {
-            tunnelList.value = res.data
-            getScreenInfo(res.data[0].value)
-        }
-    });
-}
-const changeTunnel = (e) => {
-    tunnelId.value = e
-    let newObj = {}
-    tunnelList.value.forEach((item, index) => {
-        if (index === e) {
-            newObj = item
-        }
-    })
-    getScreenInfo(newObj.value)
-    nextTick(() => {
-        showFan.value = true;
-    });
-}
-const manageSelect = (index) => {
-    console.log("首页点击-", index);
-    if (index === 0) {
-        router.push("/site");
-    } else if (index === 1) {
-        router.push("/tunnel/1");
-    } else if (index === 2) {
-        router.push("/user");
     }
+  });
 };
-const handleCommand = (item) => {
+getTunnel();
-    console.log('commads', item)
+const tunnelLength = computed(() => form.value.totalLength);
-    currentSite.value = item.label
+const handleGotoDevice = () => {
-    getTunnel(item.value)
+  router.push("/device/" + tunnelId);
-}
-const closeLeft = () => {
-    drawerLeft.value = !drawerLeft.value;
 };
-const closeRight = () => {
+const handleGoTunnelMgr = () => {
-    drawerRight.value = !drawerRight.value;
+  router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
 };
-const handleLogout = () => {
+const handleSave = async () => {
-    ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
+  const data = {
-        confirmButtonText: '确定',
+    tunnelId: tunnelId,
-        cancelButtonText: '取消',
+    tunnelName: form.value.tunnelName,
-        type: 'warning'
+    serialNumber: form.value.serialNumber,
-    }).then(() => {
+    remarks: form.value.remarks,
-        authStore.userLogout();
+    // constructionLength:form.value.constructionLength,
-        router.push("/login");
+    constructionLength: 500,
-    })
+    tunnelLength: form.value.totalLength,
+    isDefault: form.value.isDefault,
+    modelEquipmentList: await store.getEquipmentList(),
+  };
+  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 previousBtn = () => {
-    tunnelBtn.value.prev();
-};
-const nextBtn = () => {
-    tunnelBtn.value.next();
-};
-
-const initWebSocket = () => {
-    // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
-    let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
-    console.log(wsUrl);
-    socket = new WebSocket(wsUrl);
-    //连接发生错误的回调方法
-    socket.onerror = function () {
-        console.log("ws连接发生错误");
-    };
-    //连接成功建立的回调方法
-    socket.onopen = function () {
-        console.log("ws连接成功");
-    };
-    //接收到消息的回调方法
-    socket.onmessage = function (event) {
-        console.log("服务器返回的信息: ", JSON.parse(event.data));
-        const type = JSON.parse(event.data).type;
-        const data = JSON.parse(event.data).data;
-        if (type === "equipment") {
-            data.forEach((item) => {
-                if (item.typeKey === "frequency") {
-                    socketData.leftData = data;
-                } else if (item.typeKey === "windPressure") {
-                    socketData.windPressure = data;
-                } else if (item.typeKey === "sensor") {
-                    socketData.sensor = data;
-                }
-            });
-        }
-    };
-    //连接关闭的回调方法
-    socket.onclose = function () {
-        console.log("ws连接关闭");
-        // initWebSocket()
-    };
-    setInterval(() => {
-        socket.send(JSON.stringify(send));
-    }, 30000);
-};
-const closeSocket = () => {
-    socket.close();
-};
-initWebSocket();
 </script>
-<style lang="scss">
-.el-dropdown__popper.el-popper {
-    background: transparent;
-    //border: none;
-    border: 1px solid #0E7DAA;
-    border-radius: 10px;
-}
-
-.is-light {
-    background: rgba(7, 35, 72, 0.9);
-}
-
-.el-popper {
-    padding: 20px;
-    margin-left: 50px;
-    width: 150px;
-    background: rgba(7, 35, 72, 0.9);
-
-    .el-scrollbar__wrap {
-        .el-dropdown__list {
-            .el-dropdown-menu {
-                background-color: rgba(7, 35, 72, 0.9);
-                border-radius: 10px;
-                padding: 5px;
-
-                .el-dropdown-menu__item {
-                    color: #FFFFFF;
-                    //border:none;
-                    padding: 5px;
-
-                    border-bottom: 1px solid #05FEFF;
-
-                    &:last-child {
-                        border-bottom: none;
-                    }
-                }
-
-                .el-dropdown-menu__item.hover,
-                .el-dropdown-menu__item:hover {
-                    background-color: transparent !important;
-                    color: #F7B500;
-                }
-            }
-        }
-    }
-}
-</style>
 <style lang="scss" scoped>
 #main {
-    height: 100%;
+  position: relative;
-    width: 100%;
+  height: 100%;
-    background-color: #072348;
+  width: 100%;
+  background-color: #072348;
 
-    #tunnel-box {
+  .box-top {
-        height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .back-tunnel {
+      z-index: 2;
+      position: absolute;
+      top: 100px;
+      //left: 80px;
+      cursor: pointer;
+      margin: 0 0 0 80px;
+      display: flex;
+      align-items: center;
+      width: 180px;
+      height: 80px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08b7b8;
+      font-size: 42px;
+      color: #ffffff;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 35px;
+        height: 35px;
+        background-image: url("@/assets/images/site/zdgl_icon_fh.png");
+      }
     }
+
+    .btn-right {
+      display: flex;
+      z-index: 2;
+      position: absolute;
+      top: 100px;
+      right: 80px;
+
+      .del-btn {
+        &:first-child {
+          width: 220px;
+          margin-right: 40px;
+        }
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        width: 180px;
+        height: 80px;
+        border-radius: 11px;
+        border: 2px solid #08b7b8;
+        color: #ffffff;
+        font-size: 42px;
+      }
+    }
+  }
+
+  #tunnel-box {
+    height: 100%;
+  }
+
+  .edit-box {
+    z-index: 2;
+    position: absolute;
+    top: 250px;
+    left: 80px;
+    width: 830px;
+    //height: 500px;
+    background-image: url(@/assets/images/transducer/bg.png);
+    padding: 20px 30px;
+    box-sizing: border-box;
+    :deep(.el-radio-group) {
+      margin-top: 10px;
+    }
+
+    :deep(.el-radio__label) {
+      color: #ffffff;
+      font-size: 38px;
+    }
+
+    :deep(.el-radio__inner) {
+      width: 40px;
+      height: 40px;
+      border-radius: 25px;
+      border: 4px solid #05feff;
+      background-color: transparent;
+    }
+
+    :deep(.el-radio__input.is-checked + .el-radio__label) {
+      color: #ffffff;
+    }
+
+    :deep(.el-radio__input.is-checked .el-radio__inner) {
+      background: #064b66;
+      border-color: #05feff !important;
+    }
+
+    :deep(.el-radio__inner::after) {
+      width: 18px;
+      height: 18px;
+      background: #05feff;
+    }
+
+    :deep(.el-form-item) {
+      margin-top: 40px;
+    }
+
+    :deep(.el-form-item__label) {
+      font-size: 38px;
+      color: #ffffff;
+      margin-right: 12px;
+      line-height: 50px;
+    }
+
+    :deep(.el-input) {
+      height: 75px;
+
+      .el-input__wrapper {
+        background-color: transparent;
+        border: 1px solid #08b7b8;
+
+        .el-input__inner {
+          height: auto;
+          color: #fff;
+          font-size: 38px;
+        }
+      }
+    }
+  }
 }
 </style>
-  

src/views/login/index.vue

@@ -47,6 +47,8 @@ const authStore = useAuthStore();
 const loginForm = reactive({
   username: "admin",
   password: "123456",
+  // username: "",
+  // password: "",
   code: "",
   uuid: "",
 });

src/views/site/index.vue

@@ -22,19 +22,20 @@
       <div class="site-box" v-for="item in siteList" :key="item.siteId">
         <div class="top">
           <span>站点名称：{{ item.siteName }}</span>
-          <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <span v-else>默认</span>
         </div>
         <div class="box-center">
           <div class="left-img"></div>
           <div class="right-tunnel">
-            <div>隧道数量：{{ item.tunnelList.length }}条
+            <div>隧道数量：{{ item.totalTunnel }}条
             </div>
             <div>
-              <div class="tunnel" v-if="item.info.tunnelName">
+              <div class="tunnel" v-if="item.info.tunnelName" @click="goToAddTunnel(item.siteId)">
                 <div>{{ item.info.tunnelName }}</div>
                 <div class="tunnel-icon"></div>
                 <div>施工长度{{ item.info.constructionLength }}米</div>
-                <div>实现长度{{ item.info.totalLength }}公里
+                <div>实现长度{{ item.info.totalLength }}米
                 </div>
               </div>
               <div class="tunnel-add" @click="goToAddTunnel(item.siteId)">
@@ -65,6 +66,12 @@
         <el-form-item label="站点名称">
           <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
         </el-form-item>
+        <el-form-item label="是否默认">
+          <el-radio-group v-model="form.isDefault">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="站点地址">
           <el-input v-model="form.address" placeholder="请输入站点地址"/>
         </el-form-item>
@@ -86,11 +93,11 @@
       </template>
     </el-dialog>
     <div class="pagination">
-      <span>首页</span>
+      <span @click="firstPage" v-if="showFirst">首页</span>
       <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                      :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
-                     @current-change="handleCurrentChange"/>
+                     @current-change="handleCurrentChange"  :hide-on-single-page="true"/>
-      <span>尾页</span>
+      <span @click="lastPage" v-if="showFirst">尾页</span>
     </div>
   </div>
 </template>
@@ -100,6 +107,7 @@ import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/s
 import {ElMessage, ElMessageBox} from "element-plus";
 
 const router = useRouter()
+const userId = reactive(router.currentRoute.value.params.userId)
 const siteList = ref([
   // {
   //   siteName: '松江站',
@@ -137,8 +145,8 @@ const info = ref({
   totalLength: 0
 })
 const title = ref('新增站点')
-const isClick = ref(false);
 const isVisited = ref(false);
+const showFirst = ref(true)
 const total = ref(10);
 const showAddIcon = ref(true)
 const pageInfo = reactive({
@@ -148,7 +156,8 @@ const pageInfo = reactive({
 const form = ref({
   address: '',
   siteName: '',
-  describe: ''
+  describe: '',
+  isDefault: false
 });
 const formRules = ref({
   siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
@@ -156,10 +165,12 @@ const formRules = ref({
 const formInstance = ref()
 const getList = () => {
   getSiteList({
+    userId:userId,
     ...pageInfo
   }).then((res) => {
     total.value = res.data.total;
     showAddIcon.value = total.value % 6!==0;
+    showFirst.value = total.value / pageInfo.pageSize > 1;
     res.data.rows.map(item => {
       if (item.tunnelList === null || item.tunnelList.length === 0) {
         item.info = info.value
@@ -170,7 +181,6 @@ const getList = () => {
     })
 
     siteList.value = res.data.rows;
-    console.log('res',siteList.value)
   });
 }
 getList()
@@ -192,15 +202,16 @@ const handleClickSite = (type) => {
   }
 }
 const goToAddTunnel = (siteId) => {
-  router.push('/tunnel/' + siteId)
+  router.push('/tunnel/' + siteId+'/s'+'/'+userId)
-  // router.push('/tunnel/1')
 }
+
 //重置from表单
 const restFrom = () => {
   form.value = {
     address: '',
     siteName: '',
-    describe: ''
+    describe: '',
+    isDefault: false
   }
 }
 const handleEdit = (item) => {
@@ -223,14 +234,24 @@ const handleSubmit = (instance) => {
   instance.validate(async (valid) => {
     if (!valid) return
     if (title.value === '编辑站点') {
-      editSite(form.value).then(() => {
+      editSite(form.value).then((res) => {
-        isVisited.value = false
+        if(res.code===1000){
-        getList()
+          isVisited.value = false
+          getList()
+          ElMessage.success(res.msg)
+        }else {
+          ElMessage.warning(res.msg)
+        }
       });
     } else {
-      addSite(form.value).then(() => {
+      addSite(form.value).then((res) => {
-        isVisited.value = false
+        if(res.code===1000){
-        getList()
+          isVisited.value = false
+          getList()
+          ElMessage.success(res.msg)
+        }else {
+          ElMessage.warning(res.msg)
+        }
       });
     }
   })
@@ -238,32 +259,63 @@ const handleSubmit = (instance) => {
 const handleChooseAll=()=>{
   siteList.value.map(item=>{
     item.checked=!item.checked
+    if(item.checked&&!item.isDefault){
+      siteIds.value.push(item.siteId)
+    }else if(!item.checked&&!item.isDefault){
+      siteIds.value.map((newItem, index) => {
+        if (newItem === item.siteId) {
+          siteIds.value.splice(index, 1)
+        }
+      })
+    }
   })
 }
 const handleMoreDelete = () => {
   if (siteIds.value.length === 0) {
     ElMessage.warning('请先选择站点进行删除')
   } else {
-    ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
+    let flag=false
-      confirmButtonText: '确定',
+    siteList.value.map(item=>{
-      cancelButtonText: '取消',
+      siteIds.value.map(siteItem=>{
-      type: 'warning',
+        if(item.siteId===siteItem){
-      customClass: 'delBox'
+          if(item.tunnelList.length!==0){
-    }).then(() => {
+            ElMessage.error('该站点下存在隧道，不能删除!')
-      deleteSite(siteIds.value).then(res => {
+            flag=false
-        if (res.code === 1000) {
+          }else {
-          ElMessage.success(res.msg)
+            flag=true
-          getList()
+          }
-          siteIds.value = []
-          siteNameList.value = []
-        } else {
-          ElMessage.error(res.msg)
         }
       })
     })
+    if(flag){
+      ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        customClass: 'delBox'
+      }).then(() => {
+        deleteSite(siteIds.value).then(res => {
+          if (res.code === 1000) {
+            ElMessage.success(res.msg)
+            getList()
+            siteIds.value = []
+            siteNameList.value = []
+          } else {
+            ElMessage.error(res.msg)
+          }
+        })
+      })
+    }
   }
 }
-
+const firstPage=()=>{
+  pageInfo.pageNum = 1
+  getList()
+}
+const lastPage=()=>{
+  pageInfo.pageNum = total.value/pageInfo.pageSize
+  getList()
+}
 //点击页码进行分页功能
 const handleCurrentChange = (val) => {
   pageInfo.pageNum = val
@@ -272,6 +324,37 @@ const handleCurrentChange = (val) => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-radio-group) {
+  margin-top: 10px;
+}
+
+:deep(.el-radio__label) {
+  color: #FFFFFF;
+  font-size: 38px;
+}
+
+:deep(.el-radio__inner) {
+  width: 40px;
+  height: 40px;
+  border-radius: 25px;
+  border: 4px solid #05FEFF;
+  background-color: transparent;
+}
+
+:deep(.el-radio__input.is-checked+.el-radio__label) {
+  color: #FFFFFF;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner ) {
+  background: #064B66;
+  border-color: #05FEFF !important;
+}
+
+:deep(.el-radio__inner::after) {
+  width: 18px;
+  height: 18px;
+  background: #05FEFF;
+}
 .clickColor {
   position: absolute;
   top: 7px;
@@ -407,7 +490,7 @@ const handleCurrentChange = (val) => {
     flex-wrap: wrap;
     padding-left: 100px;
     padding-right: 100px;
-    justify-content: space-between;
+    //justify-content: space-between;
     box-sizing: border-box;
     overflow: hidden;
 
@@ -431,7 +514,7 @@ const handleCurrentChange = (val) => {
 
     .site-box {
       margin-top: 122px;
-      //margin-right: 1%;
+      margin-right: 32px;
       padding: 40px 50px;
       width: 1250px;
       height: 750px;
@@ -451,12 +534,12 @@ const handleCurrentChange = (val) => {
         color: #FFFFFF;
         line-height: 42px;
 
-        > div:last-child {
+
-          cursor: pointer;
+        > span:last-child {
-          width: 40px;
+          padding:1px 8px;
-          height: 40px;
+          font-size: 32px;
           border: 2px solid #05FEFF;
-          border-radius: 25px;
+          border-radius:10px;
           position: relative;
         }
       }
@@ -487,6 +570,7 @@ const handleCurrentChange = (val) => {
             margin-top: 29px;
 
             .tunnel {
+              cursor: pointer;
               margin-right: 20px;
               width: 280px;
               height: 350px;
@@ -520,6 +604,7 @@ const handleCurrentChange = (val) => {
             }
 
             .tunnel-add {
+              cursor: pointer;
               width: 280px;
               height: 350px;
               background: #1891A3;

src/views/tunnel-manage/index.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="tunnel-bgc">
     <div class="box-top">
-      <div class="back-tunnel" @click="router.back(-1)">
+      <div class="back-tunnel" @click="handleGoSiteOrIndex">
         <div class="back-icon"></div>
         <span>返回</span>
       </div>
+      <div class="site-name">
+        {{ siteName }}
+      </div>
       <div class="tunnel-title"></div>
       <div class="all-del-btn">
         <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
@@ -19,22 +22,22 @@
       </div>
     </div>
     <div class="box-content">
-      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId"
+      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
-           @click="handleGoToEditTunnel(item.tunnelId)">
         <div class="top">
           <span>{{ item.tunnelName }}</span>
-          <span>施工长度500米 隧道长度10公里</span>
+          <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
-          <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <span v-else>默认</span>
         </div>
         <div class="box-center">
           <div>
             <div class="left-img"></div>
             <div>
-              <div class="edit-btn" @click.stop="handleEdit">
+              <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
                 <div class="edit-icon"></div>
                 <div>隧道编辑</div>
               </div>
-              <div class="edit-btn" @click.stop="handleEditDevice">
+              <div class="edit-btn" @click.stop="handleEditDevice(item.tunnelId)">
                 <div class="edit-icon-two"></div>
                 <div>设备管理</div>
               </div>
@@ -46,9 +49,9 @@
               <span>风机异常</span>
             </div>
             <div class="icons-block">
-              <div v-for="item in iconsList" :key="item.icon" class="icon-text">
+              <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
-                <div :style="{ backgroundImage: 'url(' +getImageUrl(item.icon)+')' }" class="icon"></div>
+                <div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
-                <span>{{ item.name }}：{{ item.num }}</span>
+                <span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
               </div>
             </div>
           </div>
@@ -63,15 +66,21 @@
       <div class="siteId">
         <span>{{ title }}</span>
       </div>
-      <el-form :model="form" :label-position="right" label-width="168px">
+      <el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
-        <el-form-item label="隧道名称">
+        <el-form-item label="隧道名称" required>
-          <el-input v-model="form.name" placeholder="请输入隧道名称"/>
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
-        <el-form-item label="序列号">
+        <el-form-item label="序列号" required>
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
-        <el-form-item label="隧道长度">
+        <el-form-item label="隧道长度" required>
-          <el-input type="number" v-model="form.tunnelLength" placeholder="请输入隧道长度"/>
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="是否默认">
+          <el-radio-group v-model="form.isDefault">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item label="隧道备注">
           <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
@@ -81,25 +90,38 @@
         <div class="cancel-btn" @click="isVisited=false">
           取消
         </div>
-        <div class="sure-btn">
+        <div class="sure-btn" @click="handleSubmit(formInstance)">
           确定
         </div>
       </div>
     </el-dialog>
     <div class="pagination">
-      <span>首页</span>
+      <span @click="firstPage" v-if="showFirst">首页</span>
-      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
+      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
-      <span>尾页</span>
+                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
+      <span @click="lastPage" v-if="showFirst">尾页</span>
     </div>
   </div>
 </template>
 
 <script setup>
 import {ElMessage, ElMessageBox} from "element-plus";
+import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
+import {onMounted} from "vue";
+import {getSiteDetail} from "@/api/site";
 
 const router = useRouter()
 const showAddIcon = ref(true)
 const siteId = reactive(router.currentRoute.value.params.siteId)
+const userId = reactive(router.currentRoute.value.params.userId)
+const type = reactive(router.currentRoute.value.params.type)
+const formRules = ref({
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
+  serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
+})
+const showFirst = ref(true)
+const formInstance = ref()
 const tunnelList = ref([
   {
     tunnelName: '一号隧道',
@@ -172,75 +194,173 @@ const iconsList = ref([
   {
     icon: 'sd_icon_fj.png',
     name: '风机',
-    num: 2
+    type: 'frequency',
+    num: 0
   },
   {
     icon: 'sd_icon_sd.png',
     name: '湿度',
-    num: '无'
+    type: 'humidness',
+    num: 0
   },
   {
     icon: 'sd_icon_fy.png',
     name: '风压',
-    num: 10
+    type: 'windPressure',
+    num: 0
   },
   {
     icon: 'sd_icon_yq.png',
     name: '氧气',
-    num: '无'
+    type: 'oxygen',
+    num: 0
   },
   {
     icon: 'sd_icon_fs.png',
     name: '风速',
-    num: 11
+    type: 'windSpeed',
+    num: 0
   },
   {
     icon: 'sd_icon_fc.png',
     name: '粉尘',
+    type: 'dust',
     num: 1
   },
   {
     icon: 'sd_icon_wd.png',
     name: '温度',
-    num: 11
+    type: 'temperature',
+    num: 0
   },
   {
     icon: 'sd_icon_qt.png',
     name: '有害气体',
-    num: '无'
+    type: 'harmfulGas',
+    num: 0
   },
 ])
 const title = ref('新增隧道')
 const isVisited = ref(false);
 const tunnelIds = ref([])
 const tunnelNameList = ref([])
+const siteName = ref('')
 const form = ref({
-  name: '',
+  tunnelName: '',
   serialNumber: '',
-  tunnelLength: '',
+  totalLength: '',
-  remarks: ''
+  remarks: '',
+  isDefault: false
 });
 const isEdit = ref(false)
-const bgImage = computed(() => (isEdit.value ? "zdgl_bj.png" : "sdgl_bjtq.png"));
+const pageInfo = reactive({
-
+  pageNum: 1,
+  pageSize: 12
+});
+const total = ref(10);
+onMounted(() => {
+  getSiteDetail(siteId).then((res) => {
+    siteName.value = res.data.siteName
+  });
+})
+const handleGoSiteOrIndex = () => {
+  if (type === 's') {
+    router.push('/site/'+userId)
+  } else if (type === 'i') {
+    router.push('/')
+  }
+}
+const getList = () => {
+  getTunnelList({
+    siteId: siteId,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      total.value = res.data.total
+      tunnelList.value = res.data.rows
+      showFirst.value = total.value / pageInfo.pageSize >= 1;
+    }
+  })
+}
+getList()
+const firstPage=()=>{
+  pageInfo.pageNum = 1
+  getList()
+}
+const lastPage=()=>{
+  pageInfo.pageNum = total.value/pageInfo.pageSize
+  getList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getList()
+}
+const handleSubmit = (instance) => {
+  // if (!instance) return
+  // console.log('instance',instance)
+  // instance.validate(async (valid) => {
+  //   console.log('valid',valid)
+  //   if (!valid) return
+  const data = {
+    siteId: siteId,
+    ...form.value
+  }
+  if (form.value.tunnelName && form.value.serialNumber && form.value.totalLength) {
+    addTunnel(data).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success('新增成功')
+        getList()
+        isVisited.value = false
+      }else {
+        ElMessage.warning(res.msg)
+      }
+    })
+  } else {
+    ElMessage.warning('请先完善信息再新增')
+  }
+  // })
+}
 const handleGoToEditTunnel = (tunnelId) => {
   isEdit.value = true
-  router.push('/edit')
+  if (type === 's') {
+    router.push('/edit/' + tunnelId + '/s/'+userId)
+  } else if (type === 'i') {
+    router.push('/edit/' + tunnelId + '/i/'+userId)
+  }
 }
 const handleChooseAll = () => {
   tunnelList.value.map(item => {
     item.checked = !item.checked
+    if(item.checked&&!item.isDefault){
+      tunnelIds.value.push(item.tunnelId)
+    }else if(!item.checked&&!item.isDefault){
+      tunnelIds.value.map((newItem, index) => {
+        if (newItem === item.tunnelId) {
+          tunnelIds.value.splice(index, 1)
+        }
+      })
+    }
   })
 }
-const handleEdit = () => {
+const handleEditDevice = (tunnelId) => {
-  title.value = '编辑隧道'
+  if (type === 's') {
-  isVisited.value = true
+    router.push('/device/' + tunnelId + '/s/'+userId)
+  } else if (type === 'i') {
+    router.push('/device/' + tunnelId + '/i/'+userId)
+  }
 }
-const handleEditDevice = () => {
+const restFrom = () => {
-  router.push('/device/' + 1)
+  form.value = {
+    tunnelName: '',
+    serialNumber: '',
+    totalLength: '',
+    remarks: '',
+    isDefault: false
+  }
 }
-
 const handleAdd = () => {
+  restFrom()
   title.value = '新增隧道'
   isVisited.value = true
 }
@@ -249,48 +369,92 @@ const getImageUrl = (name) => {
 }
 const handleClickSite = (type) => {
   if (type.checked) {
-    tunnelIds.value.push(type.siteId)
+    tunnelIds.value.push(type.tunnelId)
-    tunnelNameList.value.push(type.siteName)
+    tunnelNameList.value.push(type.tunnelName)
   } else {
-    // tunnelIds.value.map((item, index) => {
+    tunnelIds.value.map((item, index) => {
-    //   if (item === type.siteId) {
+      if (item === type.tunnelId) {
-    //     tunnelIds.value.splice(index, 1)
+        tunnelIds.value.splice(index, 1)
-    //   }
+      }
-    // })
+    })
-    // tunnelNameList.value.map((item, index) => {
+    tunnelNameList.value.map((item, index) => {
-    //   if (item === type.siteName) {
+      if (item === type.tunnelName) {
-    //     tunnelNameList.value.splice(index, 1)
+        tunnelNameList.value.splice(index, 1)
-    //   }
+      }
-    // })
+    })
   }
 }
 const handleMoreDelete = () => {
   if (tunnelIds.value.length === 0) {
     ElMessage.warning('请先选择隧道进行删除')
   } else {
-    ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
+      ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
-      confirmButtonText: '确定',
+        confirmButtonText: '确定',
-      cancelButtonText: '取消',
+        cancelButtonText: '取消',
-      type: 'warning',
+        type: 'warning',
-      customClass: 'delBox'
+        customClass: 'delBox'
-    }).then(() => {
+      }).then(() => {
-      // deleteSite(tunnelIds.value).then(res => {
+        deleteTunnel(tunnelIds.value).then(res => {
-      //   if (res.code === 1000) {
+          if (res.code === 1000) {
-      //     ElMessage.success(res.msg)
+            ElMessage.success(res.msg)
-      //     getList()
+            getList()
-      //     tunnelIds.value = []
+            tunnelIds.value = []
-      //     tunnelNameList.value = []
+            tunnelNameList.value = []
-      //   } else {
+          } else {
-      //     ElMessage.error(res.msg)
+            ElMessage.error(res.msg)
-      //   }
+          }
-      // })
+        })
-    })
+      })
   }
 }
 
 </script>
 
 <style scoped lang="scss">
+.site-name {
+  position: absolute;
+  left: 250px;
+  z-index: 2;
+  margin-left: 120px;
+  height: 61px;
+  font-size: 46px;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 61px;
+}
+
+:deep(.el-radio-group) {
+  margin-top: 10px;
+}
+
+:deep(.el-radio__label) {
+  color: #FFFFFF;
+  font-size: 38px;
+}
+
+:deep(.el-radio__inner) {
+  width: 40px;
+  height: 40px;
+  border-radius: 25px;
+  border: 4px solid #05FEFF;
+  background-color: transparent;
+}
+
+:deep(.el-radio__input.is-checked+.el-radio__label) {
+  color: #FFFFFF;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner ) {
+  background: #064B66;
+  border-color: #05FEFF !important;
+}
+
+:deep(.el-radio__inner::after) {
+  width: 18px;
+  height: 18px;
+  background: #05FEFF;
+}
+
 :deep(.el-dialog) {
   border: 2px solid #05FEFF;
   background: #0D6578;
@@ -408,7 +572,7 @@ const handleMoreDelete = () => {
     flex-wrap: wrap;
     padding-left: 67px;
     padding-right: 70px;
-    justify-content: space-between;
+    //justify-content: space-between;
     box-sizing: border-box;
     overflow: hidden;
 
@@ -431,7 +595,7 @@ const handleMoreDelete = () => {
     }
 
     .site-box {
-      cursor: pointer;
+      //cursor: pointer;
       margin-top: 50px;
       margin-right: 1.5%;
       padding: 40px 30px;
@@ -441,9 +605,9 @@ const handleMoreDelete = () => {
       //box-sizing: border-box;
       position: relative;
 
-      &:hover {
+      //&:hover {
-        background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
+      //  background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
-      }
+      //}
 
       &:nth-child(4n) {
         margin-right: 0;
@@ -462,23 +626,13 @@ const handleMoreDelete = () => {
           color: #5CE4F2;
         }
 
-        > div:last-child {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border: 2px solid #05FEFF;
-          border-radius: 25px;
-          position: relative;
 
-          .clickColor {
+        > span:last-child {
-            position: absolute;
+          padding:1px 8px;
-            top: 7px;
+          font-size: 32px;
-            left: 6.5px;
+          border: 2px solid #05FEFF;
-            width: 25px;
+          border-radius:10px;
-            height: 25px;
+          position: relative;
-            background-color: #05FEFF;
-            border-radius: 25px;
-          }
         }
       }
 

src/views/tunnel/index.vue

@@ -1,18 +1,24 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
       <div class="tunnel-title"></div>
-      <manage-length class="tunnel-length"></manage-length>
+      <!--      <manage-length class="tunnel-length"></manage-length>-->
+      <div class="top-length">
+        <span>隧道总长度: {{tunnelLength}}米</span>
+        <span>当前施工长度: {{constructionLength}}米</span>
+      </div>
       <div class="top-right">
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
-          <el-dropdown trigger="click" @command="handleCommand">
+          <el-dropdown trigger="click" @command="handleChangeSite">
             <div class="toggle"></div>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
+                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                }}</el-dropdown-item>
+                    item.label
+                  }}
+                </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -24,26 +30,26 @@
         </div>
       </div>
     </div>
-    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->\
+    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene>
     <div class="left">
       <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">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" />
+                  :transducer-data="largeScreenData"/>
         <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
+        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -63,22 +69,21 @@
 </template>
 
 <script setup>
-import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
 import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue"
 import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
-import TransducerList from "@/components/content/transducerList/TransducerList.vue";
 import UsedEle from "@/components/content/usedEle/UsedEle.vue";
 import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import ManageLength from "@/components/manageLength/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, getTunnelBySiteId} from "@/api/largeScreen";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
+import {ElMessageBox} from "element-plus";
-import { ElMessageBox } from "element-plus";
+import {getUserInfo} from "@/api/login";
-import { getUserInfo } from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
+import {getSiteDetail} from "../../api/site";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -90,10 +95,13 @@ const currentSiteId = ref(0);
 const currentSite = ref("");
 const siteList = ref([])
 const currentUser = ref("");
+const currentUserId = ref(0);
 const currentDate = ref(dateFormat());
 const tunnelBtn = ref();
 const tunnelList = ref([]);
 const tunnelId = ref(0);
+const tunnelLength = ref(0);
+const constructionLength = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
 const serialNumber = ref("SC00DY00GH00ELBT");
@@ -107,39 +115,47 @@ const socketData = reactive({
   windPressure: [],
   sensor: [],
 });
-
 onMounted(() => {
   nextTick(() => {
     showFan.value = true;
   });
   getUser()
   getOtherInfo()
-
 });
 const getUser = () => {
   getUserInfo().then(res => {
     currentUser.value = res.data.user.userName
+    currentUserId.value = res.data.user.userId
   })
 }
+const getDefaultSite=(siteId)=>{
+  // console.log('siteList.value',siteList.value)
+  // getSiteDetail(siteId).then((res) => {
+  //   console.log('res',res)
+  // });
+}
 const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
     if (res?.code === 1000) {
       routeList.value = res.data.routeList
-      currentSiteId.value = res.data.siteOption[0].value
-      currentSite.value = res.data.siteOption[0].label
       siteList.value = res.data.siteOption
-      tunnelId.value = res.data.tunnelOption[0].value
+      currentSiteId.value = res.data.siteOption[res.data.siteOption.length-1].value
-      getTunnel(res.data.siteOption[0].value)
+      currentSite.value = res.data.siteOption[res.data.siteOption.length-1].label
-      getScreenInfo(tunnelId.value);
+      getTunnel(res.data.siteOption[res.data.siteOption.length-1].value)
     }
   });
 };
-const getScreenInfo = async (id) => {
+const getScreenInfo = (id) => {
-  await getLargeScreen(id).then((res) => {
+  tunnelId.value=id
+  getLargeScreen(id).then((res) => {
     if (res?.code === 1000) {
       largeScreenData.value = res.data;
     }
   });
+  initSceneData(id).then((res) => {
+    tunnelLength.value=res.data.tunnelLength
+    constructionLength.value=res.data.constructionLength
+  })
 };
 //根据站点id获取隧道信息
 const getTunnel = (id) => {
@@ -151,7 +167,6 @@ const getTunnel = (id) => {
   });
 }
 const changeTunnel = (e) => {
-  tunnelId.value = e
   let newObj = {}
   tunnelList.value.forEach((item, index) => {
     if (index === e) {
@@ -159,22 +174,23 @@ const changeTunnel = (e) => {
     }
   })
   getScreenInfo(newObj.value)
-  nextTick(() => {
+  // nextTick(() => {
-    showFan.value = true;
+  //   showFan.value = true;
-  });
+  // });
 }
 const manageSelect = (index) => {
   console.log("首页点击-", index);
   if (index === 0) {
-    router.push("/site");
+    router.push("/site"+'/'+currentUserId.value);
   } else if (index === 1) {
-    router.push("/tunnel/"+tunnelId.value);
+    router.push("/tunnel/" + currentSiteId.value+'/i'+'/'+currentUserId.value);
   } else if (index === 2) {
-    router.push("/user/"+currentSiteId.value);
+    router.push("/user/" + currentSiteId.value);
   }
 };
-const handleCommand = (item) => {
+const handleChangeSite = (item) => {
   currentSite.value = item.label
+  currentSiteId.value = item.value
   getTunnel(item.value)
 }
 const closeLeft = () => {

src/views/user/index.vue

@@ -10,9 +10,9 @@
         <!--        <div class="all-btn" @click="handleAll">-->
         <!--          全选-->
         <!--        </div>-->
-        <div class="all-btn del-btn" @click="handleDelete">
+        <!--        <div class="all-btn del-btn" @click="handleDelete">-->
-          删除
+        <!--          删除-->
-        </div>
+        <!--        </div>-->
       </div>
     </div>
     <div class="user-content">
@@ -24,12 +24,18 @@
                   v-model="username"
                   clearable
                   placeholder="输入搜索内容"
+                  @clear="getInfo"
               />
             </div>
             <el-button type="primary" :icon="Search" style="margin-left: 20px" @click="getInfo">搜索</el-button>
           </div>
           <div>用户管理</div>
-          <div class="add-btn" @click="handleAddUser">添加用户</div>
+          <div class="all-del-btn">
+            <div class="add-btn" @click="handleAddUser">添加用户</div>
+            <div class="all-btn del-btn" @click="handleDelete">
+              删除
+            </div>
+          </div>
         </div>
         <div class="device-table">
           <el-table stripe ref="multipleTable" @select="handleSelect"
@@ -58,18 +64,22 @@
         <span>{{ title }}</span>
       </div>
       <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
-        <el-form-item label="输入用户名称">
+        <el-form-item label="当前站点">
-          <el-input v-model="form.userName" placeholder="请输入用户名称"/>
+          <div class="current-site">{{ currentSite }}<span>如果需要切换站点,请返回首屏切换</span></div>
         </el-form-item>
-        <el-form-item label="输入用户昵称">
+        <el-form-item label="输入账户">
-          <el-input v-model="form.nickName" placeholder="请输入用户昵称"/>
+          <el-input v-model="form.userName" placeholder="请输入账户"/>
+        </el-form-item>
+        <el-form-item label="输入密码" v-if="title==='添加用户'">
+          <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
+        </el-form-item>
+        <el-form-item label="输入昵称">
+          <el-input v-model="form.nickName" placeholder="请输入昵称"/>
         </el-form-item>
         <el-form-item label="输入电话号码">
           <el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
         </el-form-item>
-        <el-form-item label="输入密码" v-if="title==='添加用户'">
+
-          <el-input v-model="form.password" placeholder="请输入密码"/>
-        </el-form-item>
         <el-form-item label="选择身份">
           <el-radio-group v-model="form.roleId" @change="(val) => {
              console.log('vaaa',val)
@@ -109,11 +119,11 @@
       </template>
     </el-dialog>
     <div class="pagination">
-      <span>首页</span>
+      <span @click="firstPage" v-if="showFirst">首页</span>
       <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                      :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
-                     @current-change="handleCurrentChange"/>
+                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
-      <span>尾页</span>
+      <span @click="lastPage" v-if="showFirst">尾页</span>
     </div>
   </div>
 </template>
@@ -124,6 +134,7 @@ import {addUser, editUser, getUser, getRoleOption} from "@/api/user";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getTunnelOption} from "@/api/tunnel";
 import {deleteUser, getUserDetail} from "../../api/user";
+import {getSiteDetail} from "@/api/site";
 
 const router = useRouter()
 const title = ref('添加用户')
@@ -131,11 +142,13 @@ const siteId = reactive(router.currentRoute.value.params.siteId)
 const tunnelIndex = ref()
 const username = ref()
 const userIds = ref()
+const showFirst = ref(true)
+const currentSite = ref('')
 const formInstance = ref()
 const userData = ref([])
 const pageInfo = reactive({
   pageNum: 1,
-  pageSize: 6
+  pageSize: 10
 });
 const total = ref(10);
 const isVisited = ref(false);
@@ -161,10 +174,14 @@ const getTunnel = () => {
     }
   })
 }
+
 const handleAddUser = () => {
   reset()
   title.value = '添加用户'
   isVisited.value = true
+  getSiteDetail(siteId).then((res) => {
+    currentSite.value = res.data.siteName
+  });
 }
 const handleEditUser = (row) => {
   reset()
@@ -181,18 +198,23 @@ const handleAll = () => {
   multipleTable.value.toggleAllSelection()
 }
 const handleDelete = () => {
-  ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
+  console.log('userIds.value',userIds.value)
-    confirmButtonText: '确定',
+  if (userIds.value ===undefined) {
-    cancelButtonText: '取消',
+    ElMessage.warning('请先选择用户进行删除')
-    type: 'warning'
+  } else {
-  }).then(() => {
+    ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
-    deleteUser(userIds.value).then(res => {
+      confirmButtonText: '确定',
-      if (res.code === 1000) {
+      cancelButtonText: '取消',
-        ElMessage.success(res.msg)
+      type: 'warning'
-        getInfo()
+    }).then(() => {
-      }
+      deleteUser(userIds.value).then(res => {
+        if (res.code === 1000) {
+          ElMessage.success(res.msg)
+          getInfo()
+        }
+      })
     })
-  })
+  }
 }
 const reset = () => {
   form.value = {
@@ -215,16 +237,30 @@ getRoleOptionInfo()
 const getInfo = () => {
   getUser({
     siteId: siteId,
-    userName: username.value
+    userName: username.value,
+    ...pageInfo
   }).then(res => {
     if (res.code === 1000) {
-      console.log('res', res)
       userData.value = res.data.rows
       total.value = res.data.total
+      showFirst.value = total.value / pageInfo.pageSize >= 1;
     }
   })
 }
 getInfo()
+const firstPage = () => {
+  pageInfo.pageNum = 1
+  getInfo()
+}
+const lastPage = () => {
+  pageInfo.pageNum = total.value / pageInfo.pageSize
+  getInfo()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getInfo()
+}
 const handleSubmit = async (formInstance) => {
   if (!formInstance) return;
   formInstance.validate(async (valid) => {
@@ -239,6 +275,7 @@ const handleSubmit = async (formInstance) => {
         if (res.code === 1000) {
           getInfo()
           isVisited.value = false
+          ElMessage.success(res.msg)
         } else {
           ElMessage.warning(res.msg)
         }
@@ -248,6 +285,7 @@ const handleSubmit = async (formInstance) => {
         if (res.code === 1000) {
           getInfo()
           isVisited.value = false
+          ElMessage.success(res.msg)
         } else {
           ElMessage.warning(res.msg)
         }
@@ -270,6 +308,26 @@ const handleSelect = async (selection, row) => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-input .el-input__password) {
+  font-size: 60px;
+}
+
+:deep(.el-input__clear) {
+  font-size: 40px;
+}
+
+.current-site {
+  font-size: 41px;
+  color: #FFFFFF;
+  margin-top: 12px;
+
+  > span {
+    font-size: 38px !important;
+    color: darkgray !important;
+    margin-left: 20px;
+  }
+}
+
 :deep(.el-table__header-wrapper  .el-checkbox) {
   display: none
 }
@@ -357,31 +415,32 @@ const handleSelect = async (selection, row) => {
       }
     }
 
-    .all-del-btn {
-      display: flex;
 
-      .del-btn {
+  }
-        width: 168px;
-        height: 60px;
-        background: #08B7B8;
-        border-radius: 11px;
-      }
 
-      .all-btn {
+  .all-del-btn {
-        cursor: pointer;
+    display: flex;
-        padding-left: 53px;
-        width: 178px;
-        height: 70px;
-        line-height: 70px;
-        border-radius: 11px;
-        border: 2px solid #08B7B8;
-        color: #FFFFFF;
-        font-size: 38px;
 
-        &:last-child {
+    .del-btn {
-          margin-left: 40px;
+      width: 168px;
-          margin-right: 70px;
+      height: 60px;
-        }
+      background: #08B7B8;
+      border-radius: 11px;
+    }
+
+    .all-btn {
+      cursor: pointer;
+      padding-left: 53px;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      color: #FFFFFF;
+      font-size: 38px;
+
+      &:last-child {
+        margin-left: 40px;
       }
     }
   }
@@ -400,7 +459,7 @@ const handleSelect = async (selection, row) => {
       border-radius: 20px;
       border: 2px solid #05FEFF;
       box-sizing: border-box;
-      padding: 73px 98px;
+      padding: 73px 58px;
 
       .user-top {
         width: 100%;
@@ -419,14 +478,15 @@ const handleSelect = async (selection, row) => {
 
         .add-btn {
           cursor: pointer;
-          width: 170px;
+          width: 180px;
-          height: 60px;
+          height: 70px;
-          line-height: 60px;
+          line-height: 70px;
           background: #08B7B8;
           border-radius: 6px;
           color: #FFFFFF;
-          font-size: 35px;
+          font-size: 38px;
           padding-left: 19px;
+          //margin-left: 20px;
         }
 
         .search-box {
@@ -434,25 +494,25 @@ const handleSelect = async (selection, row) => {
 
           :deep(.el-button) {
             width: 140px;
-            height: 60px;
+            height: 70px;
             background: #08B7B8;
             border-radius: 6px;
             border: none;
-            font-size: 35px;
+            font-size: 38px;
             color: #FFFFFF;
           }
 
           :deep(.el-input__wrapper) {
-            width: 292px;
+            width: 300px;
-            height: 60px;
+            height: 70px;
             border-radius: 6px;
             border: 1px solid #05FEFF;
             background-color: transparent;
-            font-size: 35px;
+            font-size: 38px;
 
             .el-input__inner {
-              height: 60px;
+              height: 70px;
-              line-height: 60px;
+              line-height: 70px;
               color: #FFFFFF;
             }
           }
@@ -460,7 +520,7 @@ const handleSelect = async (selection, row) => {
       }
 
       :deep(.el-table--fit) {
-        width: 2000px !important;
+        width: 2110px !important;
       }
 
       :deep(.cell) {