任务详情

src/page/main/auto-maintenance/task-manage/detail/index.vue

@@ -3,9 +3,54 @@
     <bg-breadcrumb></bg-breadcrumb>
     <div class="main_container">
       <bg-form-gap title="基本信息"></bg-form-gap>
+      <bg-detail-table2 style="width: 1076px" :list="state.baseInfo">
+        <template #status>
+          <span> <i class="use"></i> 启用 </span>
+        </template>
+      </bg-detail-table2>
+
       <bg-form-gap title="执行脚本"></bg-form-gap>
+      <div style="height: 260px; margin-bottom: 20px; width: 1076px">
+        <bg-code-editor v-model="state.useText"></bg-code-editor>
+      </div>
+      <div class="file-box">
+        <bg-icon icon="#bg-ic-c-file-data"></bg-icon>&nbsp;&nbsp; 文件.yml
+        <el-button type="primary" @click="downloadFile(url)"
+          ><bg-icon icon="#bg-ic-to-bottom"></bg-icon>&nbsp;&nbsp;下载</el-button
+        >
+      </div>
+
       <bg-form-gap title="执行主机"></bg-form-gap>
+      <bg-table
+        class="pc-box input_table"
+        :headers="state.pcHeaders"
+        :rows="state.pcTableRows"
+        :border="true"
+        :isIndex="true">
+        <template v-slot:account="{ row }">
+          <span>
+            {{ row.account }}
+          </span>
+        </template>
+      </bg-table>
+
       <bg-form-gap title="任务历史"></bg-form-gap>
+      <bg-table style="width: 1076px" :headers="state.historyHeaders" :rows="state.historyTableRows" :stripe="true">
+        <template v-slot:state="{ row }">
+          <span>
+            {{ row.state }}
+          </span>
+        </template>
+      </bg-table>
+      <div style="width: 1076px" v-if="state.tableTotal > 10">
+        <bg-pagination
+          :page="state.filter.page"
+          :size="state.filter.size"
+          :total="state.tableTotal"
+          @change-page="changePage"
+          @change-size="changeSize">
+        </bg-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -17,12 +62,172 @@ import { ElMessage } from "element-plus";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 const router = useRouter();
 const route = useRoute();
-const state = reactive({ data: 1 });
-const { data } = toRefs(state);
+const state = reactive({
+  baseInfo: [
+    {
+      label: "预警规则名称",
+      value: "服务中断推送规则1",
+    },
+    {
+      label: "启用状态",
+      value: "启用",
+      childSlot: "status",
+    },
+    {
+      label: "预警对象",
+      value: "容器云",
+    },
+    {
+      label: "预警分类",
+      value: "容器集群",
+    },
+    {
+      label: "创建人",
+      value: "admin",
+    },
+    {
+      label: "创建时间",
+      value: "2023-08-19 23:22:22",
+    },
+    {
+      label: "更新时间",
+      value: "2023-08-19 23:22:22",
+    },
+    {
+      label: "预警指标",
+      value: "CPU使用率",
+    },
+  ],
+  useText: "",
+  historyHeaders: [
+    {
+      label: "状态",
+      prop: "state",
+    },
+    {
+      label: "执行说明",
+      prop: "desc",
+    },
+    {
+      label: "执行开始时间",
+      prop: "begin",
+    },
+    {
+      label: "执行耗时",
+      prop: "time",
+    },
+    {
+      label: "操作人",
+      prop: "person",
+    },
+  ],
+  historyTableRows: [],
+  filter: {
+    page: 1,
+    size: 10,
+  },
+  tableTotal: 0,
+  pcHeaders: [
+    {
+      label: "账号",
+      prop: "account",
+    },
+    {
+      label: "端口",
+      prop: "port",
+    },
+  ],
+  pcTableRows: [
+    {
+      account: "asasdd",
+      port: "8080",
+    },
+    {
+      account: "asasdd",
+      port: "8080",
+    },
+  ],
+});
+
+const downloadFile = () => {};
+
+const changePage = (page) => {
+  state.filter.page = page;
+  getTableRows();
+};
+const changeSize = (size) => {
+  state.filter.limit = size;
+  changePage(1);
+};
+
+const getTableRows = () => {};
 </script>
 
 <style lang="scss" scoped>
 .main_container {
   padding: 24px 32px;
+  display: block;
+}
+.use {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 50%;
+  background-color: #48ad97;
+}
+
+.file-box {
+  width: 1076px;
+  height: 48px;
+  line-height: 48px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #202531;
+  padding: 0 12px;
+  margin-bottom: 20px;
+  .bg-icon {
+    font-size: 24px;
+    vertical-align: middle;
+  }
+  .el-button {
+    float: right;
+    margin-top: 6px;
+    .bg-icon {
+      font-size: 10px;
+    }
+  }
+}
+
+.vue-ace-editor {
+  margin-top: 0;
+}
+
+.pc-box {
+  width: 1076px;
+  margin-bottom: 20px;
+}
+.input_table {
+  :deep() {
+    .el-table__header {
+      th {
+        background-color: #f5f6f9;
+        border-color: #dadee7;
+        border-top: 1px solid #dadee7 !important;
+        &:last-child {
+          border-right: 1px solid #dadee7;
+        }
+      }
+    }
+
+    .el-table__border-left-patch {
+      width: 0;
+    }
+
+    .el-table__inner-wrapper .el-table__row td:nth-of-type(1) {
+      border-left: 1px solid #dadee7;
+    }
+  }
 }
 </style>

yarn.lock

@@ -905,9 +905,9 @@ markdown-it@^13.0.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-mavon-editor@^3.0.0:
+mavon-editor@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmmirror.com/mavon-editor/-/mavon-editor-3.0.1.tgz"
+  resolved "https://registry.npmmirror.com/mavon-editor/-/mavon-editor-3.0.1.tgz#0c2660569ded5b29e59d0e429af61eb618783a90"
   integrity sha512-973cYCwv+AB+fcecsU6Ua6UXATxDMaY0Q7QzKQ/GmRW1sg+3DolZDnCGXth7XHDgrmqKTO57N42fVYujt0wfFw==
   dependencies:
     xss "^1.0.10"
@@ -1083,6 +1083,11 @@ ssr-window@^3.0.0-alpha.1:
   resolved "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz"
   integrity sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==
 
+string-format@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/string-format/-/string-format-2.0.0.tgz#f2df2e7097440d3b65de31b6d40d54c96eaffb9b"
+  integrity sha512-bbEs3scLeYNXLecRRuk6uJxdXUSj6le/8rNPHChIJTn2V79aXVTR1EH2OH5zLKKoz0V02fOUKZZcw01pLUShZA==
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
@@ -1161,6 +1166,11 @@ vue-demi@*:
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz"
   integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
+vue-demi@^0.14.5:
+  version "0.14.5"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
+  integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
+
 vue-i18n@^9.1.7:
   version "9.1.10"
   resolved "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.1.10.tgz"