告警总览页面开发

src/router/index.js

@@ -2,15 +2,17 @@ import { createWebHistory, createRouter } from 'vue-router'
 
 import Dashboard from '../views/dashboard/index.vue'
 import DustOverview from '../views/dustOverview/index.vue'
-import AboutView from '../views/AboutView.vue'
+import AboutView from '../views/AboutView/AboutView.vue'
 import CollectorList from '../views/collectorList/collectorList.vue'
 import User from '../views/user.vue'
 import Layout from '../layout/index.vue'
 import Login from '../views/login/index.vue'
 import equipmentManagement from '../views/equipmentManagement/index.vue'
+import suspendManagement from '../views/equipmentManagement/suspendManagement/suspendManagement.vue'
 import dustMonitoring from '../views/dustMonitoring/index.vue'
 import bagMonitoring from '../views/dustMonitoring/bag-monitoring.vue'
 
+
 import myAgency from '@/views/closeManage/myAgency.vue';
 import myDone from '@/views/closeManage/myDone.vue';
 const routes = [
@@ -30,8 +32,19 @@ const routes = [
           },
           {
             path: '/device-management',
-            component: equipmentManagement,
             meta: { title: '设备管理' },
+            children: [
+              {
+                path: '/management/device-management',
+                component: equipmentManagement,
+                meta: { title: '设备管理' },
+              },
+              {
+                path: '/management/suspend-management',
+                component: suspendManagement,
+                meta: { title: '挂起设备管理' },
+              },
+            ]
           },
           {
             path: '/monitor',

src/views/AboutView.vue

-<template>
-    <div>about</div>
-</template>
\ No newline at end of file

src/views/AboutView/AboutView.vue

+<template>
+  <div class="page-container collectorList">
+    <div class="content-box">
+      <div class="search">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="事件名称">
+            <el-input
+              v-model="formInline.eventName"
+              placeholder="请输入事件名称"
+              style="width: 200px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="发生位置">
+            <el-input
+              v-model="formInline.position"
+              placeholder="请输入发生位置"
+              style="width: 200px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="除尘器名称">
+            <el-input
+              v-model="formInline.deviceName"
+              placeholder="请输入除尘器名称"
+              style="width: 200px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="设备类型">
+            <el-select v-model="formInline.type" style="width: 200px">
+              <el-option
+                v-for="i in dustList.list"
+                :key="i"
+                :label="`${i.deviceName}`"
+                :value="i.deviceNo"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="告警时间">
+            <el-date-picker
+              v-model="formInline.date"
+              type="datetimerange"
+              range-separator="~"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :teleported="false"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="default" class="default-btn" @click="onSubmit"
+              >重置</el-button
+            >
+            <el-button type="primary" class="search-btn" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button
+              type="success"
+              style="width: 140px"
+              class="add-btn"
+              @click="openRound()"
+              >挂起设备</el-button
+            >
+          </el-form-item>
+          <br />
+          <el-form-item>
+            <el-radio-group v-model="formInline.warnType">
+              <el-radio value="1">挂起期间告警</el-radio>
+              <el-radio value="2">非挂起期间告警</el-radio>
+              <el-radio value="3">全部告警</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="table-box">
+        <common-table
+          :data="tableData.list"
+          :columns="tableColumns"
+          :default-page-size="10"
+          @pagination-change="handlePaginationChange"
+          :pagination-texts="{
+            total: '共',
+            sizeChange: '条/页',
+            prev: '前一页',
+            next: '后一页',
+            jumper: '跳至',
+          }"
+        >
+          <template #index="{ $index }">
+            {{ getIndex($index) }}
+          </template>
+          <!-- <template #deviceName="{ row }">
+            <span class="health-score" @dblclick="openDialog(row.deviceName)">{{
+              row.deviceName
+            }}</span>
+          </template> -->
+          <!-- <template #operation="{ row }">
+            <span class="view-btn" @click="handleView(row)">详情</span>
+            <span class="edit-btn" @click="handleEdit(row)">编辑</span>
+          </template> -->
+        </common-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, computed, reactive } from "vue";
+import CommonTable from "@/components/commonTable/index.vue";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+const formInline = ref({
+  eventName: "",
+  deviceName: "",
+  position: "",
+  type: "",
+  date: "",
+  warnType: "3",
+});
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+const tableColumns = ref([
+  {
+    prop: "index",
+    label: "序号",
+    width: "5%",
+  },
+  {
+    prop: "deviceName",
+    label: "事件名称",
+    width: "9%",
+  },
+  {
+    prop: "compart",
+    label: "发生位置",
+    width: "9%",
+  },
+  {
+    prop: "position",
+    label: "设备类型",
+    width: "9%",
+  },
+  {
+    prop: "changeDateRemind",
+    label: "告警指标",
+    width: "9%",
+  },
+  {
+    prop: "changeDate",
+    label: "监测值",
+    width: "9%",
+  },
+  {
+    prop: "changePeo",
+    label: "告警时间",
+    width: "9%",
+  },
+  {
+    prop: "ownerdeviceName",
+    label: "是否挂起期间告警",
+    width: "9%",
+  },
+  {
+    prop: "lastAlarmTime",
+    label: "操作",
+    width: "10%",
+  },
+]);
+
+const tableData = reactive({
+  list: [
+    {
+      deviceName: "1#除尘器",
+      compart: "1234567890",
+      position: "转炉",
+      changeDateRemind: "xx",
+      changeDate: "xx",
+      changePeo: "xx",
+      ownerdeviceName: "xx",
+      lastAlarmTime: "xx",
+      changeRound: "xx",
+    },
+  ],
+});
+
+const dustList = reactive({
+  list: [],
+});
+const getDustList = () => {
+  dustList.list = [
+    {
+      deviceName: "1#除尘器",
+      deviceNo: "11111",
+    },
+    {
+      deviceName: "2#除尘器",
+      deviceNo: "22222",
+    },
+    {
+      deviceName: "3#除尘器",
+      deviceNo: "333333",
+    },
+  ];
+};
+getDustList();
+
+const getIndex = (index) => {
+  return (currentPage.value - 1) * pageSize.value + index + 1;
+};
+
+const handlePaginationChange = (pagination) => {
+  currentPage.value = pagination.currentPage;
+  pageSize.value = pagination.pageSize;
+  console.log("分页变化", pagination);
+};
+
+const onSubmit = () => {
+  console.log("submit!", formInline.value);
+};
+
+const openRound = () => {
+  router.push({ path: "/management/suspend-management" });
+};
+
+onMounted(async () => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.collectorList {
+  width: 100%;
+  height: calc(100% - 14px);
+  box-sizing: border-box;
+  :deep(.el-input--small) {
+    width: 100%;
+  }
+  .content-box {
+    margin-top: 24px;
+    .search {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .table-box {
+      width: 100%;
+      height: calc(100vh - 400px);
+    }
+  }
+
+  .default-btn {
+    width: 85px;
+  }
+  .search-btn {
+    width: 85px;
+    background: #2182a0;
+    border: 1px solid #2182a0;
+  }
+  .add-btn {
+    width: 85px;
+  }
+
+  .health-score {
+    color: #027ffc;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+  }
+
+  .status-matrix {
+    width: fit-content;
+    display: flex;
+    padding: 10px;
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+    .matrix-row {
+      display: flex;
+      gap: 6px;
+      justify-content: flex-start;
+    }
+
+    .status-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      &:hover {
+        cursor: pointer;
+        transform: scale(1.2);
+      }
+    }
+
+    .status-normal {
+      background-color: #67c23a; // 绿色
+    }
+
+    .status-warning {
+      background-color: #e6a23c; // 橙色
+    }
+
+    .status-error {
+      background-color: #f56c6c; // 红色
+    }
+  }
+
+  .view-btn {
+    margin-right: 8px;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 20px;
+  }
+
+  .distribution-table {
+    margin-top: 20px;
+    border-top: 1px solid #ebeef5;
+    padding-top: 20px;
+  }
+
+  .table-title {
+    font-size: 14px;
+    color: #2182a0;
+    margin-bottom: 16px;
+    font-weight: 500;
+  }
+
+  :deep(.el-input-number.el-input-number--small) {
+    width: 130px;
+  }
+  :deep(.distribution-table .el-table--border .el-table__cell) {
+    border-right: 1px solid #ebeef5 !important;
+  }
+
+  .valve-setting {
+    .setting-row {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      margin-bottom: 20px;
+
+      .input-group {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        span {
+          white-space: nowrap;
+          color: #606266;
+        }
+      }
+    }
+  }
+
+  .valve-distribution-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: #f5f7fa;
+    border-radius: 4px;
+
+    .valve-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .valve-cell {
+      width: 41px;
+      background: white;
+      padding: 4px;
+      border-radius: 4px;
+      text-align: center;
+      border: 1px solid #dcdfe6;
+
+      .cell-index {
+        font-size: 12px;
+        color: #909399;
+        margin-bottom: 8px;
+      }
+
+      .cell-value {
+        :deep(.el-input-number) {
+          width: 100px;
+        }
+      }
+    }
+  }
+
+  .readonly-value {
+    font-size: 14px;
+    color: #606266;
+    line-height: 32px;
+    padding: 0 12px;
+  }
+
+  .distribution-warning {
+    display: inline-block;
+    font-size: 13px;
+    margin-left: 12px;
+    padding: 2px 8px;
+    border-radius: 4px;
+
+    &.warning-more {
+      color: #e6a23c;
+      background-color: #fdf6ec;
+    }
+
+    &.warning-less {
+      color: #f56c6c;
+      background-color: #fef0f0;
+    }
+  }
+}
+</style>

src/views/collectorList/collectorList.vue

@@ -7,7 +7,7 @@
             <el-input
               v-model="formInline.deviceName"
               placeholder="请输入仓室名称"
-              style="width: 200px"
+              style="width: 180px"
               clearable
             />
           </el-form-item>
@@ -15,7 +15,7 @@
             <el-input
               v-model="formInline.deviceName"
               placeholder="请输入除尘器名称"
-              style="width: 200px"
+              style="width: 180px"
               clearable
             />
           </el-form-item>
@@ -36,7 +36,11 @@
             <el-button type="primary" class="search-btn" @click="onSubmit"
               >查询</el-button
             >
-            <el-button type="success" class="add-btn" @click="openDialog()"
+            <el-button
+              type="success"
+              style="width: 140px"
+              class="add-btn"
+              @click="openDialog()"
               >更换周期分析</el-button
             >
           </el-form-item>

src/views/equipmentManagement/suspendManagement/suspendManagement.vue

+<template>
+  <div class="page-container collectorList">
+    <div class="content-box">
+      <div class="search">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="项目名称">
+            <el-select v-model="formInline.name" style="width: 200px">
+              <el-option
+                v-for="i in nameList.list"
+                :key="i"
+                :label="`${i.label}`"
+                :value="i.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备类别">
+            <el-select v-model="formInline.type" style="width: 200px">
+              <el-option
+                v-for="i in typeList.list"
+                :key="i"
+                :label="`${i.label}`"
+                :value="i.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="原因分类">
+            <el-select v-model="formInline.reason" style="width: 200px">
+              <el-option
+                v-for="i in reasonList.list"
+                :key="i"
+                :label="`${i.label}`"
+                :value="i.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="default" class="default-btn" @click="onSubmit"
+              >重置</el-button
+            >
+            <el-button type="primary" class="search-btn" @click="onSubmit"
+              >查询</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="table-box">
+        <common-table
+          :data="tableData.list"
+          :columns="tableColumns"
+          :default-page-size="10"
+          @pagination-change="handlePaginationChange"
+          :pagination-texts="{
+            total: '共',
+            sizeChange: '条/页',
+            prev: '前一页',
+            next: '后一页',
+            jumper: '跳至',
+          }"
+        >
+          <template #index="{ $index }">
+            {{ getIndex($index) }}
+          </template>
+          <template #deviceName="{ row }">
+            <span class="health-score" @dblclick="openDialog(row.deviceName)">{{
+              row.deviceName
+            }}</span>
+          </template>
+          <!-- <template #operation="{ row }">
+            <span class="view-btn" @click="handleView(row)">详情</span>
+            <span class="edit-btn" @click="handleEdit(row)">编辑</span>
+          </template> -->
+        </common-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, computed, reactive } from "vue";
+import CommonTable from "@/components/commonTable/index.vue";
+
+const formInline = ref({
+  eventName: "",
+  deviceName: "",
+  position: "",
+  type: "",
+  date: "",
+  warnType: "3",
+});
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+const tableColumns = ref([
+  {
+    prop: "index",
+    label: "序号",
+    width: "5%",
+  },
+  {
+    prop: "deviceName",
+    label: "项目名称",
+    width: "7%",
+  },
+  {
+    prop: "compart",
+    label: "设备编号",
+    width: "7%",
+  },
+  {
+    prop: "position",
+    label: "设备类型",
+    width: "7%",
+  },
+  {
+    prop: "changeDateRemind",
+    label: "设备名称",
+    width: "7%",
+  },
+  {
+    prop: "changeDate",
+    label: "设备信号编号",
+    width: "7%",
+  },
+  {
+    prop: "changePeo",
+    label: "设备所在位置",
+    width: "7%",
+  },
+  {
+    prop: "ownerdeviceName",
+    label: "挂起开始时间",
+    width: "7%",
+  },
+  {
+    prop: "ownerdeviceName",
+    label: "结束时间",
+    width: "7%",
+  },
+  {
+    prop: "ownerdeviceName",
+    label: "原因分类",
+    width: "7%",
+  },
+  {
+    prop: "ownerdeviceName",
+    label: "原因描述",
+    width: "7%",
+  },
+  {
+    prop: "ownerdeviceName",
+    label: "创建时间",
+    width: "7%",
+  },
+  {
+    prop: "ownerdeviceName",
+    label: "创建人",
+    width: "7%",
+  },
+  {
+    prop: "lastAlarmTime",
+    label: "操作",
+    width: "8%",
+  },
+]);
+
+const tableData = reactive({
+  list: [
+    {
+      deviceName: "1#除尘器",
+      compart: "1234567890",
+      position: "转炉",
+      changeDateRemind: "xx",
+      changeDate: "xx",
+      changePeo: "xx",
+      ownerdeviceName: "xx",
+      lastAlarmTime: "xx",
+      changeRound: "xx",
+    },
+  ],
+});
+
+const nameList = reactive({
+  list: [],
+});
+const getNameList = () => {
+  nameList.list = [
+    {
+      label: "1#除尘器",
+      value: "11111",
+    },
+    {
+      label: "2#除尘器",
+      value: "22222",
+    },
+    {
+      label: "3#除尘器",
+      value: "333333",
+    },
+  ];
+};
+
+const typeList = reactive({
+  list: [],
+});
+const getTypeList = () => {
+  typeList.list = [
+    {
+      label: "1#除尘器",
+      value: "11111",
+    },
+    {
+      label: "2#除尘器",
+      value: "22222",
+    },
+    {
+      label: "3#除尘器",
+      value: "333333",
+    },
+  ];
+};
+
+const reasonList = reactive({
+  list: [],
+});
+const getReasonList = () => {
+  reasonList.list = [
+    {
+      label: "1#除尘器",
+      value: "11111",
+    },
+    {
+      label: "2#除尘器",
+      value: "22222",
+    },
+    {
+      label: "3#除尘器",
+      value: "333333",
+    },
+  ];
+};
+
+const getIndex = (index) => {
+  return (currentPage.value - 1) * pageSize.value + index + 1;
+};
+
+const handlePaginationChange = (pagination) => {
+  currentPage.value = pagination.currentPage;
+  pageSize.value = pagination.pageSize;
+  console.log("分页变化", pagination);
+};
+
+const onSubmit = () => {
+  console.log("submit!", formInline.value);
+};
+
+onMounted(async () => {
+  getNameList();
+  getTypeList();
+  getReasonList();
+});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.collectorList {
+  width: 100%;
+  height: calc(100% - 14px);
+  box-sizing: border-box;
+  :deep(.el-input--small) {
+    width: 100%;
+  }
+  .content-box {
+    margin-top: 24px;
+    .search {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .table-box {
+      width: 100%;
+      height: calc(100vh - 400px);
+    }
+  }
+
+  .default-btn {
+    width: 85px;
+  }
+  .search-btn {
+    width: 85px;
+    background: #2182a0;
+    border: 1px solid #2182a0;
+  }
+  .add-btn {
+    width: 85px;
+  }
+
+  .health-score {
+    color: #027ffc;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+  }
+
+  .status-matrix {
+    width: fit-content;
+    display: flex;
+    padding: 10px;
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+    .matrix-row {
+      display: flex;
+      gap: 6px;
+      justify-content: flex-start;
+    }
+
+    .status-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      &:hover {
+        cursor: pointer;
+        transform: scale(1.2);
+      }
+    }
+
+    .status-normal {
+      background-color: #67c23a; // 绿色
+    }
+
+    .status-warning {
+      background-color: #e6a23c; // 橙色
+    }
+
+    .status-error {
+      background-color: #f56c6c; // 红色
+    }
+  }
+
+  .view-btn {
+    margin-right: 8px;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 20px;
+  }
+
+  .distribution-table {
+    margin-top: 20px;
+    border-top: 1px solid #ebeef5;
+    padding-top: 20px;
+  }
+
+  .table-title {
+    font-size: 14px;
+    color: #2182a0;
+    margin-bottom: 16px;
+    font-weight: 500;
+  }
+
+  :deep(.el-input-number.el-input-number--small) {
+    width: 130px;
+  }
+  :deep(.distribution-table .el-table--border .el-table__cell) {
+    border-right: 1px solid #ebeef5 !important;
+  }
+
+  .valve-setting {
+    .setting-row {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      margin-bottom: 20px;
+
+      .input-group {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        span {
+          white-space: nowrap;
+          color: #606266;
+        }
+      }
+    }
+  }
+
+  .valve-distribution-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: #f5f7fa;
+    border-radius: 4px;
+
+    .valve-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .valve-cell {
+      width: 41px;
+      background: white;
+      padding: 4px;
+      border-radius: 4px;
+      text-align: center;
+      border: 1px solid #dcdfe6;
+
+      .cell-index {
+        font-size: 12px;
+        color: #909399;
+        margin-bottom: 8px;
+      }
+
+      .cell-value {
+        :deep(.el-input-number) {
+          width: 100px;
+        }
+      }
+    }
+  }
+
+  .readonly-value {
+    font-size: 14px;
+    color: #606266;
+    line-height: 32px;
+    padding: 0 12px;
+  }
+
+  .distribution-warning {
+    display: inline-block;
+    font-size: 13px;
+    margin-left: 12px;
+    padding: 2px 8px;
+    border-radius: 4px;
+
+    &.warning-more {
+      color: #e6a23c;
+      background-color: #fdf6ec;
+    }
+
+    &.warning-less {
+      color: #f56c6c;
+      background-color: #fef0f0;
+    }
+  }
+}
+</style>