设备管理

src/views/equipmentManagement/components/paramsSetings.vue

+<template>
+  <div class="container" v-if="dialogVisible">
+    <h1 class="title">sensor设置信息</h1>
+
+    <div class="grid-container">
+      <!-- 左侧参数设置 -->
+      <div class="setting-group">
+        <div class="setting-row" v-for="item in leftInfoEnum" :key="item.label">
+          <span class="label">{{ item.label }}</span>
+          <el-input
+            v-if="item.type === 'input'"
+            v-model="item.value"
+          ></el-input>
+          <el-select
+            v-model="item.value"
+            v-if="item.type === 'select'"
+          ></el-select>
+        </div>
+      </div>
+
+      <!-- 右侧参数设置 -->
+      <div class="setting-group">
+        <div
+          class="setting-row"
+          v-for="item in rightInfoEnum"
+          :key="item.label"
+        >
+          <span class="label">{{ item.label }}</span>
+          <el-input
+            v-if="item.type === 'input'"
+            v-model="item.value"
+          ></el-input>
+        </div>
+      </div>
+    </div>
+
+    <!-- 复选框区域 -->
+    <div class="checkbox-group">
+      <label class="custom-checkbox">
+        <input type="checkbox" /> 在线反吹
+      </label>
+      <label class="custom-checkbox">
+        <input type="checkbox" checked /> 快/慢
+      </label>
+      <label class="custom-checkbox">
+        <input type="checkbox" checked /> DO1报警
+      </label>
+      <label class="custom-checkbox"> <input type="checkbox" /> DI3有效 </label>
+    </div>
+
+    <!-- 仓室顺序 -->
+    <h4>仓室顺序</h4>
+    <textarea class="text-area" name="" id="">
+1，2，3，4，5，6，7，8，9，10，11，12</textarea
+    >
+
+    <!-- 复选框区域 -->
+    <div class="checkbox-group mgr10">
+      <label class="custom-checkbox">
+        <input type="checkbox" checked /> DI接入Y/N
+      </label>
+      <label class="custom-checkbox">
+        <input type="checkbox" checked /> 显示预警
+      </label>
+      <div class="setting-row">
+        <span class="device-label">关联设备</span>
+        <el-select v-model="value" placeholder="请选择"></el-select>
+      </div>
+    </div>
+
+    <!-- 复选框区域 -->
+    <div class="checkbox-group mgr10">
+      <div class="select-input">
+        <label class="custom-checkbox">
+          <input type="checkbox" checked /> 脉冲阀设备Y/N 通信IP
+        </label>
+        <div style="margin-left: 10px">
+          <el-input></el-input>
+        </div>
+      </div>
+      <div>
+        <label class="custom-checkbox">
+          <input type="checkbox" /> 室内脉冲轮流喷吹
+        </label>
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="button-group">
+      <button class="btn btn-confirm" @click="confirmFun">确认</button>
+      <button class="btn btn-cancel" @click="cancelFun">取消</button>
+    </div>
+  </div>
+  <div class="mask" v-if="dialogVisible" @click="cancelFun"></div>
+</template>
+<script setup>
+import { ref, reactive, computed, defineEmits } from "vue";
+const props = defineProps({
+  dialogVisible: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["close"]);
+
+const infoObj = reactive({
+  props1: "", // 点位名称
+  props2: "", // 仓室数量
+  props3: "", // 地址
+  props4: "", // 脉冲阀故障阈值
+  props5: "", // 斜率
+  props6: "", // 脉冲阀数量
+  props7: "", // 截距
+  props8: "", // 反吹间隔时间
+  props9: "", // 延时时间
+  props10: "", // 群聚值
+  props11: "", // 积分时间
+  props12: "", // 通信口
+  props13: "", // 泄露阈值
+  props14: "", // 故障阈值
+  props15: "", // 谷值判定%
+  props16: "", // 阀数量
+  props17: "", // 提升阀故障
+  props18: "", // 在线反吹
+  props19: "", // 块/慢
+  props20: "", // DO1报警
+  props21: "", // DI3有效
+  props22: "", // 仓室顺位
+  props23: "", // DI接入Y/N
+  props24: "", // 显示预警
+  props25: "", // 关联设备
+  props26: "", // 脉冲阀设备Y/N通信IP
+  props27: "", // 室内卖出轮流喷吹
+});
+const infoEnum = reactive([
+  {
+    label: "点位名称",
+    value: infoObj.props1,
+    type: "input",
+  },
+  {
+    label: "仓室数量",
+    value: infoObj.props2,
+    type: "input",
+  },
+  {
+    label: "地址",
+    value: infoObj.props3,
+    type: "input",
+  },
+  {
+    label: "脉冲阀故障阈值",
+    value: infoObj.props4,
+    type: "input",
+  },
+  {
+    label: "截距",
+    value: infoObj.props5,
+    type: "input",
+  },
+  {
+    label: "反吹间隔时间",
+    value: infoObj.props6,
+    type: "input",
+  },
+  {
+    label: "基线阈值",
+    value: infoObj.props7,
+    type: "input",
+  },
+  {
+    label: "延时时间",
+    value: infoObj.props8,
+    type: "input",
+  },
+  {
+    label: "群聚值",
+    value: infoObj.props9,
+    type: "input",
+  },
+  {
+    label: "积分时间",
+    value: infoObj.props10,
+    type: "input",
+  },
+  {
+    label: "通信口",
+    value: infoObj.props11,
+    type: "select",
+  },
+  {
+    label: "泄露阈值",
+    value: infoObj.props12,
+    type: "input",
+  },
+  {
+    label: "泄露阈值",
+    value: infoObj.props12,
+    type: "input",
+  },
+  {
+    label: "故障阈值",
+    value: infoObj.props13,
+    type: "input",
+  },
+  {
+    label: "谷值判定(%)",
+    value: infoObj.props14,
+    type: "input",
+  },
+  {
+    label: "阀数量",
+    value: infoObj.props15,
+    type: "input",
+  },
+  {
+    label: "提升阀故障",
+    value: infoObj.props16,
+    type: "input",
+  },
+  {
+    label: "提升阀延迟时间",
+    value: infoObj.props17,
+    type: "input",
+  },
+]);
+const leftInfoEnum = computed(() => {
+  let result = [];
+  for (let i = 0; i < infoEnum.length; i++) {
+    if (i % 2 === 0) {
+      result.push(infoEnum[i]);
+    }
+  }
+  return result;
+});
+const rightInfoEnum = computed(() => {
+  let result = [];
+  for (let i = 0; i < infoEnum.length; i++) {
+    if (i % 2 !== 0) {
+      result.push(infoEnum[i]);
+    }
+  }
+  return result;
+});
+const confirmFun = () => {
+  emit("close", false);
+};
+const cancelFun = () => {
+  emit("close", false);
+};
+</script>
+<style scoped lang="scss">
+* {
+  box-sizing: border-box;
+  font-family: "Segoe UI", system-ui, sans-serif;
+}
+
+body {
+  background: #f8fafc;
+  padding: 2rem;
+  min-height: 100vh;
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+
+.container {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 650px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  padding: 0.8rem 1.2rem 1.2rem;
+  z-index: 100;
+}
+
+.title {
+  color: #3b82f6;
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid #e2e8f0;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.setting-group {
+  padding: 0.5rem 1rem;
+  background: #f8fafc;
+  border-radius: 8px;
+}
+
+.setting-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0.5rem 0;
+  padding: 0.4rem 0.4rem 0.4rem 0.4rem;
+  background: white;
+  border-radius: 6px;
+  height: 35px;
+}
+.layout_1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.label {
+  color: #64748b;
+  font-weight: 500;
+  font-size: 15px;
+  min-width: 130px;
+}
+
+.value {
+  color: #1e293b;
+  font-weight: 500;
+  font-size: 15px;
+  width: 120px;
+  height: 26px;
+  padding: 4px 6px;
+  box-sizing: border-box;
+  border: 1px solid #dae1e9;
+  border-radius: 6px;
+}
+.tcp-box {
+  min-width: 80px;
+  width: 80px;
+}
+.tcp-value {
+  width: 135px;
+}
+
+.device-label {
+  color: #1e293b;
+  font-weight: 500;
+  width: 100px;
+  text-align: center;
+}
+
+.device-value {
+  color: #1e293b;
+  font-weight: 500;
+  font-size: 15px;
+  width: 60px;
+  height: 26px;
+  padding: 4px 6px;
+  box-sizing: border-box;
+  border: 1px solid #dae1e9;
+  border-radius: 6px;
+  margin-left: 10px;
+}
+.height28 {
+  height: 28px;
+}
+
+.ip-box {
+  width: 140px;
+  height: 28px;
+  margin-left: 20px;
+}
+
+.checkbox-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin: 0.8rem 0;
+}
+.mgr10 {
+  margin: 0 0 0.1rem;
+}
+.select-input {
+  display: flex;
+  align-items: center;
+}
+
+.select-device {
+  display: flex;
+  align-items: center;
+}
+
+.text-area {
+  width: 100%;
+  height: 64px;
+  padding: 0.5rem;
+  border: 1px solid #dae1e9;
+  border-radius: 6px;
+  resize: none;
+  font-size: 15px;
+  color: #1e293b;
+  margin: 0.5rem 0;
+}
+
+.custom-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #3b82f6;
+}
+
+.chamber-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  max-height: 120px;
+  overflow-y: auto;
+  padding: 0.5rem;
+  background: white;
+  border-radius: 6px;
+}
+
+.chamber-item {
+  padding: 4px 12px;
+  background: #e2e8f0;
+  border-radius: 20px;
+  font-size: 0.9rem;
+}
+
+.button-group {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1.2rem;
+}
+.arrow {
+  background: #fff
+    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray"><path d="M7 10l5 5 5-5z"/></svg>')
+    no-repeat right 0px center;
+}
+
+.btn {
+  padding: 0.6rem 1.2rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.btn-confirm {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-cancel {
+  background: #e2e8f0;
+  color: #64748b;
+}
+
+.highlight {
+  color: #ef4444;
+  font-weight: 700;
+}
+</style>
\ No newline at end of file

src/views/equipmentManagement/index.vue

@@ -46,17 +46,24 @@
       </el-form>
     </div>
     <div class="table-box">
-      <el-table :data="tableData" style="width: 100%" border>
-        <el-table-column prop="date" label="Date" width="180" />
-        <el-table-column prop="name" label="Name" width="180" />
-        <el-table-column prop="address" label="Address" />
+      <el-table :data="tableData" style="width: 100%" border >
+        <el-table-column prop="date" label="Date" width="180" align="center"/>
+        <el-table-column prop="name" label="Name" width="180" align="center"/>
+        <el-table-column prop="address" label="Address" align="center"/>
+        <el-table-column label="操作" align="center">
+          <template #default>
+            <el-button link type="primary" size="small" @click="setParams">参数设置</el-button>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <div class="page-box"></div>
+    <setParamsDialog v-model:dialogVisible="dialogVisible" @close="closeDialog"></setParamsDialog>
   </div>
 </template>
 <script setup>
-import { reactive } from "vue";
+import { ref, reactive } from "vue";
+import setParamsDialog from "./components/paramsSetings.vue";
 import '@/css/elementUiSelf.css'
 
 const formInline = reactive({
@@ -90,6 +97,13 @@ const tableData = [
     address: "No. 189, Grove St, Los Angeles",
   },
 ];
+const dialogVisible = ref(false);
+const setParams = () => {
+  dialogVisible.value = true;
+}
+const closeDialog = (val) => {
+  dialogVisible.value = val;
+}
 </script>
 
 <style lang="scss" scoped>