服务监控 table 插槽

src/components/tableTemp/index.vue

@@ -1,21 +1,77 @@
-import { default } from '../../../../CABaggageData2.0/src/components/BackButton/index.vue';
+import { default } from
+'../../../../CABaggageData2.0/src/components/BackButton/index.vue';
 <template>
   <el-table
     v-el-table-infinite-scroll="load"
-    :row-key="props.tableProperty.rowKey ? props.tableProperty.rowKey : tablePropertyDefault.rowKey"
+    :row-key="
+      props.tableProperty.rowKey
+        ? props.tableProperty.rowKey
+        : tablePropertyDefault.rowKey
+    "
     :row-style="rowStyle"
     :data="props.tableData"
-    :height=" props.tableProperty.height ? props.tableProperty.height : tablePropertyDefault.height"
-    :max-height=" props.tableProperty.maxHeight ? props.tableProperty.maxHeight : tablePropertyDefault.maxHeight"
-    :stripe="props.tableProperty.stripe ? props.tableProperty.stripe : tablePropertyDefault.stripe"
-    :border="props.tableProperty.border ? props.tableProperty.border : tablePropertyDefault.border"
-    :highlight-current-row="props.tableProperty.highlightCurrentRow ? props.tableProperty.highlightCurrentRow : tablePropertyDefault.highlightCurrentRow"
-    :header-cell-class-name=" props.tableProperty.headerRowClassName ? props.tableProperty.headerRowClassName : tablePropertyDefault.headerRowClassName"
-    :tooltip-effect="props.tableProperty.tooltipEffect ? props.tableProperty.tooltipEffect : tablePropertyDefault.tooltipEffect"
-    :show-summary="props.tableProperty.showSummary ? props.tableProperty.showSummary : tablePropertyDefault.showSummary"
+    :height="
+      props.tableProperty.height
+        ? props.tableProperty.height
+        : tablePropertyDefault.height
+    "
+    :max-height="
+      props.tableProperty.maxHeight
+        ? props.tableProperty.maxHeight
+        : tablePropertyDefault.maxHeight
+    "
+    :stripe="
+      props.tableProperty.stripe
+        ? props.tableProperty.stripe
+        : tablePropertyDefault.stripe
+    "
+    :border="
+      props.tableProperty.border
+        ? props.tableProperty.border
+        : tablePropertyDefault.border
+    "
+    :highlight-current-row="
+      props.tableProperty.highlightCurrentRow
+        ? props.tableProperty.highlightCurrentRow
+        : tablePropertyDefault.highlightCurrentRow
+    "
+    :header-cell-class-name="
+      props.tableProperty.headerRowClassName
+        ? props.tableProperty.headerRowClassName
+        : tablePropertyDefault.headerRowClassName
+    "
+    :tooltip-effect="
+      props.tableProperty.tooltipEffect
+        ? props.tableProperty.tooltipEffect
+        : tablePropertyDefault.tooltipEffect
+    "
+    :show-summary="
+      props.tableProperty.showSummary
+        ? props.tableProperty.showSummary
+        : tablePropertyDefault.showSummary
+    "
     :row-class-name="tableRowClassName"
     :cell-class-name="cellClassName"
   >
+    <el-table-column v-if="isStatus" width="55">
+      <template #default="scope">
+        <div class="tableStatus">
+          <div
+            v-if="props.tableData[scope.$index].nodeState == '运行'"
+            class="status0"
+          >
+            <span class="icon"></span>
+          </div>
+          <div
+            v-else-if="props.tableData[scope.$index].nodeState == '停止'"
+            class="status1"
+          >
+            <span class="icon"></span>
+          </div>
+          <div v-else class="status2"><span class="icon"></span></div>
+        </div>
+      </template>
+    </el-table-column>
     <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
     <el-table-column
       class="infinite-list-item"
@@ -24,15 +80,25 @@ import { default } from '../../../../CABaggageData2.0/src/components/BackButton/
       :label="items.label"
       :prop="items.key"
       :width="props.tableColumnProperty.width"
-      :sortable="items.sortable ? items.sortable : props.tableColumnProperty.sortable"
+      :sortable="
+        items.sortable ? items.sortable : props.tableColumnProperty.sortable
+      "
       :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip"
       :align="items.align ? items.align : props.tableColumnProperty.align"
-      :header-align="items.headerAlign ? items.headerAlign : props.tableColumnProperty.headerAlign"
+      :header-align="
+        items.headerAlign
+          ? items.headerAlign
+          : props.tableColumnProperty.headerAlign
+      "
       :label-class-name="items.lableClass ? items.lableClass : ''"
     >
       <template #default="scope">
         <!-- 枚举值则为 items.key+'-enum' -->
-        {{ scope.row[items.key+'-enum'] ? scope.row[items.key+'-enum']:scope.row[items.key]}}
+        {{
+          scope.row[items.key + "-enum"]
+            ? scope.row[items.key + "-enum"]
+            : scope.row[items.key]
+        }}
       </template>
     </el-table-column>
     <el-table-column
@@ -123,14 +189,19 @@ const props = defineProps({
     default: [],
   },
   //操作栏宽度
-  BtnGroupWidth:{
-    type:String,
-    default:""
-  }
+  BtnGroupWidth: {
+    type: String,
+    default: "",
+  },
+  //自定义表头
+  isStatus: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 //向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
-const emit = defineEmits(["btnClick", "load","cellClass"]);
+const emit = defineEmits(["btnClick", "load", "cellClass"]);
 
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
 const handleClick = (index: number, row: Object, param: number) => {
@@ -156,9 +227,9 @@ const tableRowClassName = (row: Object, rowIndex: number) => {
 };
 
 //给某一格加class
-const cellClass=ref("")
+const cellClass = ref("");
 const cellClassName = (row: Object) => {
-  emit("cellClass",row)
+  emit("cellClass", row);
   return cellClass.value;
 };
 //滚动分页加载
@@ -167,9 +238,8 @@ const load = () => {
 };
 
 defineExpose({
-  cellClass
-})
-
+  cellClass,
+});
 </script>
 
 <style scoped lang="scss">
@@ -222,7 +292,41 @@ defineExpose({
   color: #ffffff;
   border: none;
 }
-::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
-  background-color: #F0F3F7;;
+::v-deep.el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background-color: #f0f3f7;
+}
+.tableStatus {
+  font-size: 14px;
+  .icon {
+    width: 14px;
+    height: 14px;
+    background: #2d67e3;
+    border-radius: 2px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    top: -2px;
+  }
+  .status0 {
+    position: relative;
+    top: 5px;
+  }
+  .status1 {
+    position: relative;
+    top: 5px;
+    .icon {
+      background-color: #afb4bf;
+    }
+  }
+  .status2 {
+    position: relative;
+    top: 5px;
+    .icon {
+      background-color: #eb2f3b;
+    }
+  }
 }
 </style>

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

@@ -49,6 +49,13 @@ const HomeRoutes = {
       component: () =>
         import("@/views/systemSettings/serviceManagement/index.vue"),
     },
+    {
+      path: "/systemSettings/serviceMonitor",
+      name: "ServiceMonitor",
+      meta: { title: "服务监控", elSvgIcon: "Fold", icon: "table" },
+      component: () =>
+        import("@/views/systemSettings/serviceManagement/serviceMonitor.vue"),
+    },
     {
       path: "/systemSettings/queryTemplate",
       name: "QueryTemplate",

src/styles/index.scss

@@ -132,7 +132,10 @@
   display: flex;
   justify-content: space-between;
 }
-
+.flex-act {
+  display: flex;
+  align-items: center;
+}
 .flex-end {
   display: flex;
   justify-content: flex-end;
@@ -159,3 +162,9 @@
 .app-containers {
   height: calc(100vh - 180px);
 }
+.r12 {
+  margin-right: 12px;
+}
+.r16 {
+  margin-right: 16px;
+}

src/views/systemSettings/serviceManagement/index.vue

@@ -36,7 +36,66 @@
       :msgTitle="msgTitle"
       @resetForm="resetForm"
     >
-      <div class="diacont"></div>
+      <div class="diacont">
+        <div class="interfaceLog_head flex">
+          <div class="interfaceLog_head_time flex-act">
+            <div class="header_name">当前服务：Kafka原始报文</div>
+          </div>
+          <div class="interfaceLog_head_btn flex">
+            <div class="interfaceLog_head_time_start r12">
+              <el-date-picker
+                v-model="timeStart"
+                size="default"
+                type="datetime"
+                placeholder="选择开始日期时间"
+              >
+              </el-date-picker>
+            </div>
+            <div class="interfaceLog_head_time_end r16">
+              <el-date-picker
+                v-model="timeEnd"
+                size="default"
+                type="datetime"
+                placeholder="选择结束日期时间"
+              >
+              </el-date-picker>
+            </div>
+            <Search
+              @getSearchData="getSearchData"
+              :isTitle="false"
+              @clearSearchData="clearSearchData"
+            />
+          </div>
+        </div>
+        <div class="interfaceLog_content">
+          <el-row :gutter="24">
+            <el-col :span="19">
+              <DataTable
+                :tableHeader="state.list"
+                :tableData="tableData"
+                :tableProperty="{ rowKey: 'ID' }"
+              />
+            </el-col>
+            <el-col :span="5">
+              <div class="interfaceLog_content_progress">
+                <el-timeline>
+                  <el-timeline-item
+                    v-for="(item, index) in preDatas"
+                    :key="index"
+                  >
+                    <div class="list">
+                      <div class="list_status"></div>
+                      <div class="list_title">{{ item.title }}</div>
+                      <div class="list_code">{{ item.code }}</div>
+                      <div class="list_time">{{ item.time }}</div>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
     </Dialog>
   </div>
 </template>
@@ -99,6 +158,64 @@ const mysqlImg = "image://" + reactive(img7);
 
 //存储节点-错误
 const mysqlImgError = getAssetsFile("mysql_red.png");
+
+const timeStart = ref<String>("");
+const timeEnd = ref<String>("");
+const preDatas = ref<Array>([]);
+//列表
+const tableData = ref([
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+]);
+//表头
+const state = reactive({
+  list: [
+    { label: "用户", key: "name" },
+    { label: "发生时间", key: "china" },
+    { label: "发生位置", key: "englin" },
+    { label: "成败代码", key: "two" },
+    { label: "成败详情", key: "three" },
+  ],
+  listLoading: true,
+});
+for (let i = 0; i < 10; i++) {
+  const element = {
+    action: "采集",
+    dataNumber: "000120220307201211011201",
+    sourceDataNumber: "BSM",
+    time: "2022-03-07 20:00:12",
+    result: i % 2 == 0 ? true : false,
+    details: "数据格式不正确",
+  };
+  const obj = {
+    title: "更新 Github 模板",
+    code: "989665554",
+    time: "2022-4-26 15:48:55",
+    id: i,
+  };
+  tableData.value.push(element);
+  preDatas.value.push(obj);
+}
+preDatas.value.splice(5, 10);
 const nodeDataList = ref([
   {
     name: "首都机场BHS",
@@ -659,14 +776,12 @@ const resizeHandler = () => {
   myChart.resize();
 };
 onMounted(() => {
-  console.log(defaultImg);
   options.series[0].data = nodeDataList;
   options.series[0].links = datas;
   options.series = options.series.concat(getCoordDataList());
   myChart.value = echarts.init(chartDom.value);
   myChart.value.setOption(options, true);
   window.addEventListener("resize", resizeHandler);
-  console.log(defaultImg);
 });
 //新增
 const addJournalForm = () => {
@@ -694,6 +809,11 @@ const resetForm = () => {
 .integration__cont__map__cont {
   width: 100%;
   height: 100%;
+  .header_name {
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+  }
   .integration__cont {
     background: #ffffff;
     border-radius: 4px;
@@ -726,4 +846,9 @@ const resetForm = () => {
     }
   }
 }
+.interfaceLog_content {
+  margin-top: 24px;
+  // height: 452px;
+  // overflow: hidden;
+}
 </style>

src/views/systemSettings/serviceManagement/serviceMonitor.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="airportInfo scroll-y">
+    <div class="wrap">
+      <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">服务管理</div>
+            <div class="status0"><span class="icon"></span>启动</div>
+            <div class="status2"><span class="icon"></span>异常</div>
+            <div class="status1"><span class="icon"></span>停止</div>
+          </div>
+        </template></Minheader
+      >
+      <div class="app-containers">
+        <DataTable
+          :is-Status="true"
+          :tableHeader="state.list"
+          :tableData="tableData"
+          :tableBtnGroup="tableBtnGroup"
+          :tableProperty="{ rowKey: 'ID' }"
+          @btnClick="btnClick"
+        />
+      </div>
+      <Dialog
+        :flag="flag"
+        :type="type"
+        :msgTitle="msgTitle"
+        @resetForm="resetForm"
+        @delRest="delRest"
+      >
+        <div class="diacont">
+          <el-form :model="tableForm">
+            <el-row :gutter="24">
+              <el-col>
+                <el-form-item label="航司名称" size="default">
+                  <el-input
+                    v-model="tableForm.name"
+                    placeholder="请输入航司名称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="中文简称" size="default">
+                  <el-input
+                    v-model="tableForm.china"
+                    placeholder="请输入中文简称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="英文简称" size="default">
+                  <el-input
+                    v-model="tableForm.englin"
+                    placeholder="请输入英文简称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="航司二字码" size="default">
+                  <el-input
+                    v-model="tableForm.two"
+                    placeholder="请输入航司二字码"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="航司三字码" size="default">
+                  <el-input
+                    v-model="tableForm.three"
+                    placeholder="请输入航司三字码"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="备注" size="default">
+                  <el-input
+                    type="textarea"
+                    v-model="tableForm.text"
+                    placeholder="请输入备注"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import DataTable from "@/components/tableTemp/index.vue";
+import Minheader from "@/components/minheader/index.vue";
+import Dialog from "@/components/dialog/index.vue";
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("新增服务管理"); //弹窗标题
+const tableColsCopys = reactive<Object>({}); //弹窗
+const tableForm = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+}); //弹窗内容
+//列表
+const tableData = ref([
+  {
+    nodeState: "运行",
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+  {
+    nodeState: "运行",
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+  {
+    nodeState: "运行",
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+]);
+//表头
+const state = reactive({
+  list: [
+    { label: "名称", key: "name" },
+    { label: "中文简称", key: "china" },
+    { label: "英文简称", key: "englin" },
+    { label: "航司二字码", key: "two" },
+    { label: "航司三字码", key: "three" },
+    { label: "备注", key: "text" },
+  ],
+  listLoading: true,
+});
+const tableBtnGroup = ref([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]);
+//新增
+const addForm = () => {
+  msgTitle.value = "新增服务管理";
+  flag.value = true;
+  type.value = "";
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+  tableForm.name = "";
+  tableForm.china = "";
+  tableForm.englin = "";
+  tableForm.two = "";
+  tableForm.three = "";
+  tableForm.text = "";
+};
+//编辑
+// const editDialog = (data) => {
+//   msgTitle.value = "编辑航司信息维护";
+//   flag.value = true;
+//   type.value = "";
+//   tableForm.name = data.name;
+//   tableForm.china = data.china;
+//   tableForm.englin = data.englin;
+//   tableForm.two = data.two;
+//   tableForm.three = data.three;
+//   tableForm.text = data.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) {
+  }
+};
+//删除
+const eleDialog = () => {
+  msgTitle.value = "删除服务管理";
+  flag.value = true;
+  type.value = "del";
+};
+//删除
+const delRest = () => {
+  flag.value = false;
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-form-item__label {
+  width: 100px;
+}
+.app-containers {
+  height: calc(100vh - 180px);
+}
+
+.icon {
+  width: 14px;
+  height: 14px;
+  background: #2d67e3;
+  border-radius: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+  position: relative;
+  top: -2px;
+}
+.status0,
+.status2 {
+  margin-right: 28px;
+  position: relative;
+  top: 5px;
+}
+.status1 {
+  position: relative;
+  top: 5px;
+  .icon {
+    background-color: #afb4bf;
+  }
+}
+.status2 {
+  .icon {
+    background-color: #eb2f3b;
+  }
+}
+</style>