添加机器维护

src/router/routes/routes-file-three.ts

@@ -160,31 +160,37 @@ const HomeRoutes = {
         import('@/views/BasicsData/equipmentMaintenance/index.vue'),
     },
     {
-      path: "/BasicsData/warningSet",
-      name: "WarningSet",
-      meta: { title: "预警告警维护", roles: ["alert_alarm_settings_page"] },
-      redirect: "/BasicsData/warningSet",
+      path: '/BasicsData/warningSet',
+      name: 'WarningSet',
+      meta: { title: '预警告警维护', roles: ['alert_alarm_settings_page'] },
+      redirect: '/BasicsData/warningSet',
       component: {
-        render: () => h(resolveComponent("router-view")),
+        render: () => h(resolveComponent('router-view')),
       },
       children: [
         {
-          path: "/BasicsData/warningSet",
-          name: "WarningSet",
+          path: '/BasicsData/warningSet',
+          name: 'WarningSet',
           hidden: true,
           component: () =>
-            import("@/views/systemSettings/warningSet/index.vue"),
+            import('@/views/systemSettings/warningSet/index.vue'),
         },
         {
-          path: "/BasicsData/warningEdit",
-          name: "WarningEdit",
+          path: '/BasicsData/warningEdit',
+          name: 'WarningEdit',
           hidden: true,
-          meta: { title: "预警告警维护编辑" },
+          meta: { title: '预警告警维护编辑' },
           component: () =>
-            import("@/views/systemSettings/warningEdit/index.vue"),
+            import('@/views/systemSettings/warningEdit/index.vue'),
         },
       ],
     },
+    // {
+    //   path: '/BasicsData/machine',
+    //   name: 'Machine',
+    //   meta: { title: '机器维护' },
+    //   component: () => import('@/views/BasicsData/machineCompany/index.vue'),
+    // },
   ],
 }
 

src/views/BasicsData/machineCompany/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="machineCompany scroll-y">
+    <div class="wrap">
+      <div class="manageTitle">机器维护</div>
+      <div class="machineCompany-body flex-wrap app-containers">
+        <div class="machineCompany-body-left">
+          <el-card class="listClass" style="height:100%">
+            <div class="title">机器列表</div>
+            <div class="seacrh">
+              <el-input size="default" v-model="input" clearable placeholder="请输入内容">
+                <template #prefix>
+                  <el-icon class="el-input__icon">
+                    <search />
+                  </el-icon>
+                </template>
+              </el-input>
+            </div>
+            <div class="boxs">
+              <div v-for="(item,index) in filterTableData" :key="index" class="boxs-list flex-wrap">
+                <div class="boxs-list-icon"></div>
+                <div class="boxs-list-name">{{ item.name }}</div>
+              </div>
+            </div>
+          </el-card>
+        </div>
+        <div class="machineCompany-body-right">
+          <el-card style="height:100%">
+            <div class="title">服务列表</div>
+            <DataTable :tableHeader="tableCols" :tableData="tableData" :tableBtnGroup="tableBtnGroup" :tableProperty="{ rowKey: 'ID' }" @btnClick="btnClick" />
+          </el-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import DataTable from "@/components/tableTemp/index.vue";
+import { Query, GeneralDataReception } from "@/api/webApi";
+import { ElMessage } from "element-plus";
+const input = ref<string>("");
+const listData = ref<any>([
+  {
+    name: "接收中小型数据",
+  },
+  {
+    name: "数据发送到中小型",
+  },
+  {
+    name: "解析机器",
+  },
+  {
+    name: "底座机器",
+  },
+]); //表头数据
+const tableCols = ref<any>([]); //表头数据
+//列表
+const tableData = ref<any>([]);
+const page = ref<number>(0); //分页参数
+const dataContent = ref<object>({});
+const serviceId = ref<any>("");
+const tableBtnGroup = ref<any>([
+  {
+    name: "启用",
+    className: "editBtn",
+    param: 2,
+    is: "model_editing_button",
+  },
+  {
+    name: "停用",
+    className: "delBtn",
+    param: 3,
+    is: "model_deletion_button",
+  },
+]);
+const filterTableData = computed(() =>
+  listData.value.filter(
+    (data) =>
+      !input.value ||
+      data.name.toLowerCase().includes(input.value.toLowerCase())
+  )
+);
+//获取表格数据
+const getQuery = async () => {
+  try {
+    const { code, returnData } = await Query({
+      id: DATACONTENT_ID.modelMainNodeId,
+      needPage: ++page.value,
+      dataContent: Object.values(dataContent.value),
+    });
+    if (code === "0") {
+      if (returnData.listValues.length === 0) {
+        page.value--;
+        noMore.value = true;
+      }
+      tableData.value.push(...returnData.listValues);
+      tableCols.value = returnData.columnSet;
+      tableCols.value.forEach((element) => {
+        element.label = element.columnLabel;
+        element.key = element.columnName;
+      });
+      serviceId.value = returnData.submitID;
+    } else {
+      page.value--;
+    }
+  } catch (error) {
+    page.value--;
+  }
+};
+//编辑-删除
+const btnClick = (row, index, param) => {
+  if (param === 2) {
+  } else if (param === 3) {
+  } else if (param === 4) {
+  }
+};
+onMounted(() => {
+  getQuery();
+});
+</script>
+
+<style lang="scss" scoped>
+.machineCompany {
+  &-body {
+    margin-top: 20px;
+    &-left {
+      width: 350px;
+      margin-right: 20px;
+      height: 100%;
+      ::v-deep .listClass {
+        .el-card__body {
+          height: 100%;
+        }
+      }
+      .title {
+        font-size: 20px;
+        font-weight: 600;
+        color: #303133;
+      }
+      .seacrh {
+        margin: 20px 0 30px 0;
+      }
+      .boxs {
+        height: calc(100% - 108px);
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+      .boxs-list {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 21px;
+        margin-bottom: 20px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+      .boxs-list-icon {
+        width: 14px;
+        height: 14px;
+        background-color: #999;
+        border-radius: 2px;
+        margin-right: 10px;
+        margin-top: 4px;
+      }
+    }
+    &-right {
+      width: calc(100% - 370px);
+      .title {
+        font-size: 20px;
+        font-weight: 600;
+        color: #303133;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+</style>