服务监控编辑

src/components/minheader/index.vue

@@ -20,6 +20,15 @@
         <Search @clear="clear" @search="search" />
         <!-- <el-button type="danger" size="default" class="br L12">搜索</el-button> -->
       </template>
+      <template v-if="isSlot">
+        <el-button
+          type="danger"
+          size="default"
+          class="br L12"
+          @click="addJournal()"
+          >1个插槽</el-button
+        >
+      </template>
       <template v-if="isJournal">
         <el-button
           size="default"
@@ -95,6 +104,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  //是否显示插槽
+  isSlot: {
+    type: Boolean,
+    default: false,
+  },
 });
 //搜索内容
 const input = ref("");

src/views/systemSettings/serviceManagement/serviceMonitorEdit.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="airportInfo">
     <div class="wrap_id">
-      <Minheader :is-Journal="true" :is-statuser="true">
+      <Minheader :is-Journal="true" :is-statuser="true" :is-Slot="true">
         <template #header>
           <div class="status flex-wrap">
             <div class="manageTitle">当前服务ID：101</div>
+            <div class="typecond">{{ typeK }}</div>
           </div>
         </template></Minheader
       >
@@ -81,7 +82,7 @@
               </el-date-picker>
             </el-form-item>
           </div>
-          <div class="outersurface pd30">
+          <div class="outersurface">
             <el-form-item label="前序输出编号" size="default">
               <el-input
                 v-model="tableForm.three"
@@ -92,15 +93,256 @@
         </el-form>
       </div>
     </div>
-    <div class="wrap_config"></div>
-    <div class="wrap_rece"></div>
-    <div class="wrap_out"></div>
+    <div class="wrap_config">
+      <Minheader :is-statuser="true">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">主动采集配置</div>
+          </div>
+        </template></Minheader
+      >
+      <div class="diacont">
+        <el-form :model="tableForms" class="w100 fw">
+          <div class="outersurface pd30">
+            <el-form-item label="数据源" size="default">
+              <el-select
+                style="width: 100%"
+                v-model="tableForms.name"
+                class="input-shadow"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择数据源"
+              >
+                <el-option
+                  v-for="item in tableOptionser"
+                  :key="item.v ? item.v : item.planDepartureApt"
+                  :label="item.k ? item.k : item.planDepartureApt"
+                  :value="item.v ? item.v : item.planDepartureApt"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="outersurfaces">
+            <el-form-item label="详细位置" size="default">
+              <el-input
+                v-model="tableForms.china"
+                placeholder="请输入详细位置"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="计划启动时间" size="default">
+              <el-date-picker
+                v-model="tableForm.time"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="计划停止时间" size="default">
+              <el-date-picker
+                v-model="tableForm.time1"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="错误重试" size="default">
+              <el-input
+                v-model="tableForms.englin"
+                placeholder="请输入错误重试次数"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="循环次数" size="default">
+              <el-input v-model="tableForms.two" placeholder="请输入循环次数" />
+            </el-form-item>
+          </div>
+          <div class="outersurface">
+            <el-form-item label="循环频率" size="default">
+              <el-input
+                v-model="tableForms.three"
+                placeholder="请输入错误重试次数"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="wrap_rece">
+      <Minheader :is-statuser="true">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">统一接收</div>
+          </div>
+        </template></Minheader
+      >
+      <div class="diacont">
+        <el-form :model="tableFormer" class="w100 fw">
+          <div class="outersurface50 pd30">
+            <el-form-item label="生命周期编号" size="default">
+              <el-input
+                v-model="tableFormer.name"
+                placeholder="请输入生命周期编号"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface50 pd30"></div>
+          <div class="outersurface50 pd30">
+            <el-form-item label="生命周期编号" size="default">
+              <el-input
+                type="textarea"
+                v-model="tableFormer.china"
+                placeholder="请输入生命周期编号"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface50">
+            <el-form-item label="生命周期编号" size="default">
+              <el-input
+                type="textarea"
+                v-model="tableFormer.china"
+                placeholder="请输入生命周期编号"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="wrap_out">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <Minheader :is-statuser="true" :is-auth="true">
+            <template #header>
+              <div class="status flex-wrap">
+                <div class="manageTitle">输出</div>
+              </div>
+            </template></Minheader
+          >
+          <div class="app-containers">
+            <DataTable
+              :tableHeader="state.list"
+              :tableData="tableData"
+              :tableBtnGroup="tableBtnGroup"
+              :tableProperty="{ rowKey: 'ID' }"
+              @btnClick="btnClick"
+            />
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <Minheader :is-statuser="true">
+            <template #header>
+              <div class="status flex-wrap">
+                <div class="manageTitle">日志记录</div>
+              </div>
+            </template></Minheader
+          >
+          <div class="diacont">
+            <el-form :model="recordForme" class="w100 fw">
+              <div class="outersurface50 pd30">
+                <el-form-item label="日志存储数据源" size="default">
+                  <el-select
+                    style="width: 100%"
+                    v-model="recordForme.name"
+                    class="input-shadow"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="请选择数据源"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </div>
+              <div class="outersurface50 pd30">
+                <el-form-item label="详细位置" size="default">
+                  <el-input
+                    v-model="recordForme.china"
+                    placeholder="请输入详细位置"
+                  />
+                </el-form-item>
+              </div>
+              <div class="outersurface100 pd30">
+                <el-form-item label="日志输出条件" size="default">
+                  <el-input
+                    :autosize="{ minRows: 5, maxRows: 5 }"
+                    type="textarea"
+                    v-model="recordForme.englin"
+                    placeholder="请输入日志输出条件"
+                  />
+                </el-form-item>
+              </div>
+            </el-form>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Minheader from "@/components/minheader/index.vue";
+import DataTable from "@/components/tableTemp/index.vue";
 const tableOptionser = ref<Array>([]); //下拉
+const typeK = ref<String>("进行中"); //状态
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("新增"); //弹窗标题
+const tableData = ref([
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+  },
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+  },
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+  },
+]);
+//表头
+const state = reactive({
+  list: [
+    { label: "输出数据源", key: "name" },
+    { label: "详细位置", key: "china" },
+    { label: "数据结构", key: "englin" },
+    { label: "输出条件", key: "two" },
+  ],
+  listLoading: true,
+});
+const tableBtnGroup = ref([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]);
 const tableForm = reactive({
   name: "",
   china: "",
@@ -111,6 +353,55 @@ const tableForm = reactive({
   three: "",
   text: "",
 }); //服务id
+const tableForms = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //主动采集配置
+const tableFormer = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //统一接收
+const recordForme = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //日志记录
+//编辑-删除
+const btnClick = (row, index, param) => {
+  if (param === 2) {
+    msgTitle.value = "编辑";
+    flag.value = true;
+    type.value = "";
+    tableForm.name = index.name;
+    tableForm.china = index.china;
+    tableForm.englin = index.englin;
+    tableForm.two = index.two;
+    tableForm.three = index.three;
+    tableForm.text = index.text;
+  } else if (param === 3) {
+    msgTitle.value = "删除";
+    flag.value = true;
+    type.value = "del";
+  } else if (param === 4) {
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -130,6 +421,7 @@ const tableForm = reactive({
     box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     margin-bottom: 16px;
+    padding: 24px;
   }
   .wrap_rece {
     height: 192px;
@@ -137,16 +429,30 @@ const tableForm = reactive({
     box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     margin-bottom: 16px;
+    padding: 24px;
   }
   .wrap_out {
     height: 250px;
     background: #ffffff;
     box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
+    padding: 24px;
+    ::v-deep .el-form-item__label {
+      width: 110px;
+    }
   }
   .outersurface {
     width: 20%;
   }
+  .outersurfaces {
+    width: 80%;
+  }
+  .outersurface50 {
+    width: 50%;
+  }
+  .outersurface100 {
+    width: 100%;
+  }
   .diacont {
     width: 100%;
     .w100 {
@@ -161,7 +467,19 @@ const tableForm = reactive({
     }
   }
 }
+.typecond {
+  font-size: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #53b074;
+}
+.app-containers {
+  height: 170px;
+}
 ::v-deep .el-form-item__content {
   display: flex;
 }
+::v-deep .el-form-item__label {
+  width: 100px;
+}
 </style>