feat: 运行指管理接口联调

src/api/metrics/detail.js

@@ -42,3 +42,20 @@ export function delDetail(tplDetailId) {
         method: 'delete'
     })
 }
+
+//选择指标
+export function selectDetails(tplId) {
+    return request({
+        url: `/metrics/detail/select/${tplId}`,
+        method: 'get'
+    })
+}
+
+// 添加指标
+export function addDetailByTplId(tplId, data) {
+    return request({
+        url: `/metrics/detail/add/${tplId}`,
+        method: 'get',
+        params: data
+    })
+}

src/views/ms/def/index.vue

@@ -2,7 +2,8 @@
   <div class="app-container">
     <el-row :gutter="10" class="mb8">
       <el-col :span="18">
-        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0"  @submit.native.prevent>
+        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0"
+                 @submit.native.prevent>
           <el-form-item label="" prop="metricsName" style="margin-right:10px">
             <el-input
                 v-model="queryParams.metricsName"
@@ -11,11 +12,21 @@
                 @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="" prop="metricsClass" style="margin-right:10px">
-            <el-select v-model="queryParams.metricsClass" placeholder="请选择指标分类">
+          <el-form-item label="" prop="metricsTypes" style="margin-right:10px">
+            <el-select v-model="queryParams.category" clearable placeholder="请选择指标分类">
               <el-option :label="item.typeName" :value="item.typeId" v-for="item in typeListData" :key="item.typeId"/>
             </el-select>
           </el-form-item>
+          <el-form-item label="" prop="metricsType" style="margin-right:10px">
+            <el-select v-model="queryParams.metricsType" clearable placeholder="请选择指标类型">
+              <el-option
+                  v-for="dict in metrics_category"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -35,20 +46,27 @@
     </el-row>
     <el-table v-loading="loading" :data="defList" border>
       <el-table-column label="指标ID" align="center" prop="metricsId" width="80"/>
+      <el-table-column label="指标名称" align="left" prop="metricsName" width="260"/>
+      <el-table-column label="指标分类" align="left" width="200">
+        <template #default="scope">
+          <span v-for="(item,i) in scope.row.metricsTypes" :key="`${scope.$index}_${item}`">
+            {{ item.typeName }}<span v-if="i!==scope.row.metricsTypes.length-1">、</span>
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column label="指标类型" align="left" prop="metricsType" width="150">
         <template #default="scope">
           <dict-tag :options="metrics_category" :value="scope.row.metricsType"/>
         </template>
       </el-table-column>
-      <el-table-column label="指标名称" align="left" prop="metricsName" width="260"/>
-      <el-table-column label="指标编码" align="left" prop="metricsCode"  width="200"/>
+      <el-table-column label="指标编码" align="left" prop="metricsCode" width="200"/>
       <el-table-column label="指标获取公式" align="left" prop="metricsExp"/>
       <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="left" prop="remark"  width="200"/>
+      <el-table-column label="备注" align="left" prop="remark" width="200"/>
       <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="200">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['metrics:def:edit']">
@@ -88,16 +106,26 @@
         <el-form-item label="指标编码" prop="metricsCode">
           <el-input v-model="form.metricsCode" placeholder="请输入指标编码"/>
         </el-form-item>
-        <el-form-item label="指标分类" prop="metricsClass">
-          <el-radio-group v-model="form.metricsClass" >
-            <el-radio-button :label="item.typeName" :value="item.typeId" v-for="item in typeListData" :key="item.typeId"/>
-          </el-radio-group>
+        <el-form-item label="指标分类" prop="metricsTypes">
+          <el-checkbox-group v-model="form.metricsTypes">
+            <el-checkbox :label="item.typeName" v-for="item in typeListData" :key="item.typeId"/>
+          </el-checkbox-group>
         </el-form-item>
         <el-form-item label="指标获取公式" prop="metricsExp">
           <el-input v-model="form.metricsExp" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
+        <el-form-item label="告警-低" prop="alarmLow">
+          <el-input v-model="form.alarmLow" placeholder="请输入告警-低数值"/>
+        </el-form-item>
+        <el-form-item label="告警-中" prop="alarmMid">
+          <el-input v-model="form.alarmMid" placeholder="请输入告警-中数值"/>
+        </el-form-item>
+        <el-form-item label="告警-高" prop="alarmHigh">
+          <el-input v-model="form.alarmHigh" placeholder="请输入告警-高数值"/>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" show-word-limit maxlength="300" :autosize="{minRows: 4, maxRows: 6}" />
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" show-word-limit maxlength="300"
+                    :autosize="{minRows: 4, maxRows: 6}"/>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -112,7 +140,7 @@
 
 <script setup name="Def">
 import {addDef, delDef, getDef, listDef, updateDef} from "@/api/metrics/def";
-import { listType } from "@/api/metrics/type";
+import {listType} from "@/api/metrics/type";
 import {onMounted} from "vue";
 
 const {proxy} = getCurrentInstance();
@@ -145,7 +173,7 @@ const data = reactive({
     updateBy: null,
     updateTime: null,
     remark: null,
-    metricsClass:null,
+    category: null,
   },
   rules: {
     metricsName: [
@@ -160,7 +188,7 @@ const data = reactive({
     metricsType: [
       {required: true, message: "指标类型不能为空", trigger: "change"}
     ],
-    metricsClass:[
+    metricsTypes: [
       {required: true, message: "指标分类不能为空", trigger: "change"}
     ]
   }
@@ -168,6 +196,7 @@ const data = reactive({
 
 const {queryParams, form, rules} = toRefs(data);
 
+
 /** 查询指标定义列表 */
 function getList() {
   loading.value = true;
@@ -193,10 +222,10 @@ function cancel() {
   reset();
 }
 
-onMounted(()=>{
-    listType({pageNum: 1,pageSize: 20}).then(res => {
-      typeListData.value = res.rows;
-    });
+onMounted(() => {
+  listType({pageNum: 1, pageSize: 20}).then(res => {
+    typeListData.value = res.rows;
+  });
 })
 
 // 表单重置
@@ -211,7 +240,11 @@ function reset() {
     createTime: null,
     updateBy: null,
     updateTime: null,
-    remark: null
+    remark: null,
+    alarmHigh: null,
+    alarmLow: null,
+    alarmMid: null,
+    metricsTypes: []
   };
   proxy.resetForm("defRef");
 }
@@ -244,6 +277,7 @@ function handleUpdate(row) {
   const _metricsId = row.metricsId || ids.value
   getDef(_metricsId).then(response => {
     form.value = response.data;
+    form.value.metricsTypes = form.value.metricsTypes.map(p => p.typeName)
     open.value = true;
     title.value = "修改指标定义";
   });
@@ -253,14 +287,23 @@ function handleUpdate(row) {
 function submitForm() {
   proxy.$refs["defRef"].validate(valid => {
     if (valid) {
+      const pDate = {...form.value}
+      let metricsTypesIds = []
+      typeListData.value.forEach(item => {
+        if (pDate.metricsTypes.includes(item.typeName)) {
+          metricsTypesIds.push(item)
+        }
+      })
+      pDate.metricsTypes = metricsTypesIds
+
       if (form.value.metricsId != null) {
-        updateDef(form.value).then(response => {
+        updateDef(pDate).then(response => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         });
       } else {
-        addDef(form.value).then(response => {
+        addDef(pDate).then(response => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();

src/views/ms/detail/index.vue

@@ -1,29 +1,10 @@
 <template>
   <div class="app-container">
     <el-row :gutter="10" class="mb8">
-      <el-col :span="18">
-        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0" @submit.native.prevent>
-          <el-form-item label="" prop="metricsCode">
-            <el-input
-                v-model="queryParams.metricsCode"
-                placeholder="请输入指标编码"
-                clearable
-                @keyup.enter="handleQuery"
-            />
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col :span="6" style="text-align: right">
-        <el-button
-            type="primary"
-            plain
-            icon="Plus"
-            @click="handleAdd"
-            v-hasPermi="['metrics:detail:add']"
-        >新增</el-button>
+      <el-col :span="6">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['metrics:detail:add']">新增</el-button>
       </el-col>
     </el-row>
-
     <el-table v-loading="loading" :data="detailList" border>
       <el-table-column label="指标ID" align="center" prop="metricsId" width="80" />
       <el-table-column label="指标编码" align="left" prop="metricsCode" />

src/views/ms/mstpl/component/indicatorManger.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="24" class="mb8">
+      <el-button type="primary" plain @click="handleAdd">新增</el-button>
+    </el-col>
+    <el-col :span="24">
+      <el-table v-loading="loading" :data="listData" border size="small">
+        <el-table-column label="指标ID" align="center" prop="metricsId" width="80"/>
+        <el-table-column label="指标分类" align="left" width="160">
+          <template #default="scope">
+            <span v-for="(item,i) in scope.row.metricsDef.metricsTypes" :key="`${scope.$index}_${item}`">
+              {{ item.typeName }}<span v-if="i!==scope.row.metricsTypes.length-1">、</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="指标名称" align="left">
+          <template #default="scope">
+            {{ scope.row.metricsDef.metricsName }}
+          </template>
+        </el-table-column>
+        <el-table-column label="指标编码" align="left" prop="metricsCode" width="160"/>
+        <el-table-column label="告警-低" align="left" width="80">
+          <template #default="scope">
+            <span v-if="editRow.indexOf(scope.row.metricsId) === -1">
+              {{ scope.row.alarmLow }}
+            </span>
+            <el-input v-model="scope.row.alarmLow" v-else size="small"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="告警-中" align="left" width="80">
+          <template #default="scope">
+            <span v-if="editRow.indexOf(scope.row.metricsId) === -1">
+              {{ scope.row.alarmMid }}
+            </span>
+            <el-input v-model="scope.row.alarmMid" v-else size="small"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="告警-高" align="left" width="80">
+          <template #default="scope">
+            <span v-if="editRow.indexOf(scope.row.metricsId) === -1">
+              {{ scope.row.alarmHigh }}
+            </span>
+            <el-input v-model="scope.row.alarmHigh" v-else size="small"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
+          <template #default="scope">
+            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)"
+                       v-if="editRow.indexOf(scope.row.metricsId) === -1">修改
+            </el-button>
+            <el-button link type="primary" icon="Check" @click="handleUpdate(scope.row)" v-else>保存</el-button>
+            <el-popconfirm title="确定要删除吗?删除后无法恢复！" @confirm="handleDelete(scope.row)" width="260">
+              <template #reference>
+                <el-button link type="primary" icon="Delete">删除</el-button>
+              </template>
+            </el-popconfirm>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
+
+  <!-- 添加或修改指标模板对话框 -->
+  <el-dialog title="新增指标" v-model="open" width="1000" append-to-body>
+    <el-table :data="addListData" border size="small" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="指标ID" align="center" prop="metricsId" width="80"/>
+      <el-table-column label="指标分类" align="left" width="160">
+        <template #default="scope">
+            <span v-for="(item,i) in scope.row.metricsTypes" :key="`${scope.$index}_${item}`">
+              {{ item.typeName }}<span v-if="i!==scope.row.metricsTypes.length-1">、</span>
+            </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="指标名称" align="left" prop="metricsName"/>
+      <el-table-column label="指标编码" align="left" prop="metricsCode" width="160"/>
+      <el-table-column label="告警-低" align="left" width="80" prop="alarmLow"/>
+      <el-table-column label="告警-中" align="left" width="80" prop="alarmMid"/>
+      <el-table-column label="告警-高" align="left" width="80" prop="alarmHigh"/>
+    </el-table>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleAddMetrics">添 加</el-button>
+        <el-button @click="open = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+</template>
+<script setup lang="ts">
+import {addDetailByTplId, listDetail, selectDetails, updateDetail,delDetail} from "@/api/metrics/detail";
+
+const {proxy, emit} = getCurrentInstance();
+
+const listData = ref([]);
+const loading = ref(false);
+const editRow = ref([]);
+const rowTplId = ref(null)
+const open = ref(false);
+const addListData = ref([])
+const ids = ref([]);
+
+// 选择指标
+const getSelectDetails = (tplId: number) => {
+  loading.value = true;
+  editRow.value = [];
+  rowTplId.value = tplId;
+  listDetail({tplId}).then((response) => {
+    listData.value = response.rows
+  });
+  loading.value = false;
+}
+
+// 修改
+const handleEdit = ({metricsId}) => {
+  if (editRow.value.indexOf(metricsId) === -1) {
+    editRow.value.push(metricsId)
+  }
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.metricsId);
+}
+
+// 添加指标
+function handleAddMetrics() {
+  addDetailByTplId(rowTplId.value, {metricsIds: ids.value.join(",")}).then(res => {
+    proxy.$modal.msgSuccess("添加成功");
+    open.value = false
+    getSelectDetails(rowTplId.value)
+    emit("updateList")
+  })
+}
+
+
+// 删除
+const handleDelete = (row) => {
+  delDetail(row.tplDetailId).then(res => {
+    proxy.$modal.msgSuccess("删除成功");
+    getSelectDetails(rowTplId.value)
+    emit("updateList")
+  })
+}
+
+// 更新
+const handleUpdate = (row) => {
+  updateDetail({...row}).then(res => {
+    proxy.$modal.msgSuccess("修改成功");
+    editRow.value = editRow.value.filter(p => p !== row.metricsId)
+  })
+}
+
+// 新增
+const handleAdd = () => {
+  addListData.value = []
+  open.value = true
+  selectDetails(rowTplId.value).then(res => {
+    addListData.value = res.rows
+  })
+}
+defineExpose({
+  getSelectDetails
+})
+
+</script>
+<style scoped lang="scss">
+</style>

src/views/ms/mstpl/index.vue

@@ -30,14 +30,15 @@
     </el-row>
     <el-table v-loading="loading" :data="tplList" border>
       <el-table-column label="模板ID" align="center" prop="tplId" width="80"/>
-      <el-table-column label="模板名称" align="left" prop="tplName" width="300"/>
-      <el-table-column label="备注" align="left" prop="remark" />
-      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
+      <el-table-column label="模板名称" align="left" prop="tplName"/>
+      <el-table-column label="指标数量" align="left" prop="num" width="150"/>
+      <el-table-column label="备注" align="left" prop="remark" width="350"/>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260">
+      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="280">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['metrics:tpl:edit']">
             修改
@@ -68,7 +69,7 @@
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" show-word-limit maxlength="300" :autosize="{minRows: 4, maxRows: 6}" />
         </el-form-item>
       </el-form>
-      <detail-row v-else />
+      <indicator-manger v-else ref="uRef" @updateList="getList"/>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm" v-if="dialogType === 'add'">确 定</el-button>
@@ -81,10 +82,11 @@
 
 <script setup name="Tpl">
 import {addTpl, delTpl, getTpl, listTpl, updateTpl} from "@/api/metrics/tpl";
-import detailRow from "../detail/index.vue"
+import indicatorManger from "./component/indicatorManger.vue"
 
 const {proxy} = getCurrentInstance();
 
+const uRef = ref(null)
 const tplList = ref([]);
 const open = ref(false);
 const loading = ref(true);
@@ -182,6 +184,9 @@ function handleDetail(row){
   open.value = true;
   title.value = "指标管理";
   dialogType.value = "details"
+  nextTick(()=>{
+    uRef.value.getSelectDetails(row.tplId)
+  })
 }
 
 /** 修改按钮操作 */