feat: 前端页面开发

src/views/ms/def/index.vue

@@ -1,76 +1,28 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="指标名称" prop="metricsName">
-        <el-input
-            v-model="queryParams.metricsName"
-            placeholder="请输入指标名称"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="指标编码" prop="metricsCode">
-        <el-input
-            v-model="queryParams.metricsCode"
-            placeholder="请输入指标编码"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="指标类型" prop="metricsType">
-        <el-select v-model="queryParams.metricsType" placeholder="请选择指标类型" clearable>
-          <el-option
-              v-for="dict in metrics_category"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建人" prop="createBy">
-        <el-input
-            v-model="queryParams.createBy"
-            placeholder="请输入创建人"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" style="width: 308px">
-        <el-date-picker
-            v-model="daterangeCreateTime"
-            value-format="YYYY-MM-DD"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item label="更新人" prop="updateBy">
-        <el-input
-            v-model="queryParams.updateBy"
-            placeholder="请输入更新人"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="更新时间" style="width: 308px">
-        <el-date-picker
-            v-model="daterangeUpdateTime"
-            value-format="YYYY-MM-DD"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <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="metricsName" style="margin-right:10px">
+            <el-input
+                v-model="queryParams.metricsName"
+                placeholder="请输入指标名称"
+                clearable
+                @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-option :label="item.typeName" :value="item.typeId" v-for="item in typeListData" :key="item.typeId"/>
+            </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>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="6" style="text-align: right">
         <el-button
             type="primary"
             plain
@@ -80,66 +32,24 @@
         >新增
         </el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="Edit"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['metrics:def:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="Delete"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['metrics:def:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="Download"
-            @click="handleExport"
-            v-hasPermi="['metrics:def:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
-    <el-table v-loading="loading" :data="defList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="指标ID" align="center" prop="metricsId"/>
-      <el-table-column label="指标名称" align="center" prop="metricsName"/>
-      <el-table-column label="指标编码" align="center" prop="metricsCode"/>
-      <el-table-column label="指标公式" align="center" prop="metricsExp"/>
-      <el-table-column label="指标类型" align="center" prop="metricsType">
+    <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="metricsType" width="150">
         <template #default="scope">
           <dict-tag :options="metrics_category" :value="scope.row.metricsType"/>
         </template>
       </el-table-column>
-      <el-table-column label="创建人" align="center" prop="createBy"/>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="更新人" align="center" prop="updateBy"/>
+      <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="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="center" prop="remark"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <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']">
             修改
@@ -160,17 +70,8 @@
     />
 
     <!-- 添加或修改指标定义对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="defRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="指标名称" prop="metricsName">
-          <el-input v-model="form.metricsName" placeholder="请输入指标名称"/>
-        </el-form-item>
-        <el-form-item label="指标编码" prop="metricsCode">
-          <el-input v-model="form.metricsCode" placeholder="请输入指标编码"/>
-        </el-form-item>
-        <el-form-item label="指标公式" prop="metricsExp">
-          <el-input v-model="form.metricsExp" type="textarea" placeholder="请输入内容"/>
-        </el-form-item>
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
+      <el-form ref="defRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="指标类型" prop="metricsType">
           <el-select v-model="form.metricsType" placeholder="请选择指标类型">
             <el-option
@@ -181,8 +82,22 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="指标名称" prop="metricsName">
+          <el-input v-model="form.metricsName" placeholder="请输入指标名称"/>
+        </el-form-item>
+        <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>
+        <el-form-item label="指标获取公式" prop="metricsExp">
+          <el-input v-model="form.metricsExp" type="textarea" placeholder="请输入内容"/>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
+          <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>
@@ -197,6 +112,8 @@
 
 <script setup name="Def">
 import {addDef, delDef, getDef, listDef, updateDef} from "@/api/metrics/def";
+import { listType } from "@/api/metrics/type";
+import {onMounted} from "vue";
 
 const {proxy} = getCurrentInstance();
 const {metrics_category} = proxy.useDict('metrics_category');
@@ -213,6 +130,8 @@ const title = ref("");
 const daterangeCreateTime = ref([]);
 const daterangeUpdateTime = ref([]);
 
+const typeListData = ref([])
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -225,7 +144,8 @@ const data = reactive({
     createTime: null,
     updateBy: null,
     updateTime: null,
-    remark: null
+    remark: null,
+    metricsClass:null,
   },
   rules: {
     metricsName: [
@@ -240,6 +160,9 @@ const data = reactive({
     metricsType: [
       {required: true, message: "指标类型不能为空", trigger: "change"}
     ],
+    metricsClass:[
+      {required: true, message: "指标分类不能为空", trigger: "change"}
+    ]
   }
 });
 
@@ -270,6 +193,12 @@ function cancel() {
   reset();
 }
 
+onMounted(()=>{
+    listType({pageNum: 1,pageSize: 20}).then(res => {
+      typeListData.value = res.rows;
+    });
+})
+
 // 表单重置
 function reset() {
   form.value = {
@@ -301,18 +230,12 @@ function resetQuery() {
   handleQuery();
 }
 
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.metricsId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
   open.value = true;
   title.value = "添加指标定义";
+
 }
 
 /** 修改按钮操作 */
@@ -359,12 +282,5 @@ function handleDelete(row) {
   });
 }
 
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('metrics/def/export', {
-    ...queryParams.value
-  }, `def_${new Date().getTime()}.xlsx`)
-}
-
 getList();
 </script>

src/views/ms/detail/index.vue

@@ -1,46 +1,19 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="模板ID" prop="tplId">
-        <el-input
-            v-model="queryParams.tplId"
-            placeholder="请输入模板ID"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="指标ID" prop="metricsId">
-        <el-input
-            v-model="queryParams.metricsId"
-            placeholder="请输入指标ID"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="指标编码" prop="metricsCode">
-        <el-input
-            v-model="queryParams.metricsCode"
-            placeholder="请输入指标编码"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="告警规则" prop="alarmRule">
-        <el-input
-            v-model="queryParams.alarmRule"
-            placeholder="请输入告警规则"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <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
@@ -49,46 +22,12 @@
             v-hasPermi="['metrics:detail:add']"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="Edit"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['metrics:detail:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="Delete"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['metrics:detail:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="Download"
-            @click="handleExport"
-            v-hasPermi="['metrics:detail:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="detailList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="明细ID" align="center" prop="tplDetailId" />
-      <el-table-column label="模板ID" align="center" prop="tplId" />
-      <el-table-column label="指标ID" align="center" prop="metricsId" />
-      <el-table-column label="指标编码" align="center" prop="metricsCode" />
-      <el-table-column label="告警规则" align="center" prop="alarmRule" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+    <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" />
+      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="180">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['metrics:detail:edit']">修改</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['metrics:detail:remove']">删除</el-button>
@@ -96,23 +35,9 @@
       </el-table-column>
     </el-table>
 
-    <pagination
-        v-show="total>0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-    />
-
     <!-- 添加或修改模板指标明细对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="detailRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="模板ID" prop="tplId">
-          <el-input v-model="form.tplId" placeholder="请输入模板ID" />
-        </el-form-item>
-        <el-form-item label="指标ID" prop="metricsId">
-          <el-input v-model="form.metricsId" placeholder="请输入指标ID" />
-        </el-form-item>
+    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+      <el-form ref="detailRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="指标编码" prop="metricsCode">
           <el-input v-model="form.metricsCode" placeholder="请输入指标编码" />
         </el-form-item>
@@ -120,7 +45,7 @@
           <el-input v-model="form.alarmRule" placeholder="请输入告警规则" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <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>
@@ -152,11 +77,7 @@ const data = reactive({
   form: {},
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
-    tplId: null,
-    metricsId: null,
-    metricsCode: null,
-    alarmRule: null,
+    pageSize: 50,
   },
   rules: {
     alarmRule: [
@@ -202,22 +123,10 @@ function reset() {
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  queryParams.value.pageNum = 1;
+  // queryParams.value.pageNum = 1;
   getList();
 }
 
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.tplDetailId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
 
 /** 新增按钮操作 */
 function handleAdd() {
@@ -269,12 +178,6 @@ function handleDelete(row) {
   }).catch(() => {});
 }
 
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('metrics/detail/export', {
-    ...queryParams.value
-  }, `detail_${new Date().getTime()}.xlsx`)
-}
 
 getList();
 </script>

src/views/ms/mstpl/index.vue

@@ -1,22 +1,23 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="模板名称" prop="tplName">
-        <el-input
-            v-model="queryParams.tplName"
-            placeholder="请输入模板名称"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <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="tplName" style="margin-right:10px">
+            <el-input
+                v-model="queryParams.tplName"
+                placeholder="请输入模板名称"
+                clearable
+                @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="6" style="text-align: right">
         <el-button
             type="primary"
             plain
@@ -26,63 +27,22 @@
         >新增
         </el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="Edit"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['metrics:tpl:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="Delete"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['metrics:tpl:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="Download"
-            @click="handleExport"
-            v-hasPermi="['metrics:tpl:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
-    <el-table v-loading="loading" :data="tplList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="模板ID" align="center" prop="tplId"/>
-      <el-table-column label="模板名称" align="center" prop="tplName"/>
-      <el-table-column label="创建人" align="center" prop="createBy"/>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="更新人" align="center" prop="updateBy"/>
+    <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">
         <template #default="scope">
           <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['metrics:tpl:edit']">
             修改
           </el-button>
+          <el-button link type="primary" icon="Position" v-hasPermi="['metrics:detail:list']" @click="handleDetail(scope.row)">指标管理</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                      v-hasPermi="['metrics:tpl:remove']">删除
           </el-button>
@@ -99,18 +59,19 @@
     />
 
     <!-- 添加或修改指标模板对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="tplRef" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" :width="dialogType === 'add' ? 500 : 1200" append-to-body>
+      <el-form ref="tplRef" :model="form" :rules="rules" label-width="80px" v-if="dialogType === 'add'">
         <el-form-item label="模板名称" prop="tplName">
           <el-input v-model="form.tplName" placeholder="请输入模板名称"/>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
+          <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 />
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitForm" v-if="dialogType === 'add'">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -120,6 +81,7 @@
 
 <script setup name="Tpl">
 import {addTpl, delTpl, getTpl, listTpl, updateTpl} from "@/api/metrics/tpl";
+import detailRow from "../detail/index.vue"
 
 const {proxy} = getCurrentInstance();
 
@@ -135,6 +97,8 @@ const title = ref("");
 const daterangeCreateTime = ref([]);
 const daterangeUpdateTime = ref([]);
 
+const dialogType = ref("add")
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -206,18 +170,18 @@ function resetQuery() {
   handleQuery();
 }
 
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.tplId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
   open.value = true;
   title.value = "添加指标模板";
+  dialogType.value = "add"
+}
+
+function handleDetail(row){
+  open.value = true;
+  title.value = "指标管理";
+  dialogType.value = "details"
 }
 
 /** 修改按钮操作 */
@@ -264,12 +228,5 @@ function handleDelete(row) {
   });
 }
 
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('metrics/tpl/export', {
-    ...queryParams.value
-  }, `tpl_${new Date().getTime()}.xlsx`)
-}
-
 getList();
 </script>

src/views/ms/type/index.vue

@@ -1,11 +1,9 @@
 <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">
-          <el-form-item label="" prop="typeName">
+        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0" @submit.native.prevent>
+          <el-form-item label="" prop="typeName" style="margin-right:10px">
             <el-input
                 v-model="queryParams.typeName"
                 placeholder="请输入分类名称"
@@ -30,23 +28,11 @@
       </el-col>
     </el-row>
 
-    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="分类ID" align="center" prop="typeId" />
-      <el-table-column label="分类名称" align="center" prop="typeName" />
-      <el-table-column label="创建人" align="center" prop="createBy" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="更新人" align="center" prop="updateBy"/>
-      <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="center" class-name="small-padding fixed-width">
+    <el-table v-loading="loading" :data="typeList" border>
+      <el-table-column label="分类ID" align="center" prop="typeId" width="80"/>
+      <el-table-column label="分类名称" align="left" prop="typeName" />
+      <el-table-column label="备注" align="left" prop="remark" />
+      <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:type:edit']">修改</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['metrics:type:remove']">删除</el-button>
@@ -69,7 +55,7 @@
           <el-input v-model="form.typeName" placeholder="请输入分类名称" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <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>
@@ -169,13 +155,6 @@ function resetQuery() {
   handleQuery();
 }
 
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.typeId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
@@ -226,12 +205,6 @@ function handleDelete(row) {
   }).catch(() => {});
 }
 
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('metrics/type/export', {
-    ...queryParams.value
-  }, `type_${new Date().getTime()}.xlsx`)
-}
 
 getList();
 </script>

src/views/obj/app/index.vue

@@ -1,82 +1,23 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="应用名称" prop="appName">
-        <el-input
-          v-model="queryParams.appName"
-          placeholder="请输入应用名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="应用编码" prop="appCode">
-        <el-input
-          v-model="queryParams.appCode"
-          placeholder="请输入应用编码"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="IP地址" prop="appAddr">
-        <el-input
-          v-model="queryParams.appAddr"
-          placeholder="请输入IP地址"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="端口号" prop="appPort">
-        <el-input
-          v-model="queryParams.appPort"
-          placeholder="请输入端口号"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建人" prop="createBy">
-        <el-input
-          v-model="queryParams.createBy"
-          placeholder="请输入创建人"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" style="width: 308px">
-        <el-date-picker
-          v-model="daterangeCreateTime"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item label="更新人" prop="updateBy">
-        <el-input
-          v-model="queryParams.updateBy"
-          placeholder="请输入更新人"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="更新时间" style="width: 308px">
-        <el-date-picker
-          v-model="daterangeUpdateTime"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <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="appName" style="margin-right:10px">
+            <el-input
+                v-model="queryParams.appName"
+                placeholder="请输入应用名称"
+                clearable
+                @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="6" style="text-align: right">
         <el-button
           type="primary"
           plain
@@ -84,60 +25,26 @@
           @click="handleAdd"
           v-hasPermi="['obj:app:add']"
         >新增</el-button>
+        <el-button type="info" plain icon="Download">下载agent</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['obj:app:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['obj:app:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['obj:app:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="appList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="应用ID" align="center" prop="appId" />
-      <el-table-column label="应用名称" align="center" prop="appName" />
-      <el-table-column label="应用编码" align="center" prop="appCode" />
-      <el-table-column label="IP地址" align="center" prop="appAddr" />
-      <el-table-column label="端口号" align="center" prop="appPort" />
-      <el-table-column label="创建人" align="center" prop="createBy" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+    <el-table v-loading="loading" :data="appList" border>
+      <el-table-column label="应用ID" align="center" prop="appId" width="80" />
+      <el-table-column label="应用名称" align="left" prop="appName" />
+      <el-table-column label="应用编码" align="left" prop="appCode" />
+      <el-table-column label="IP地址" align="left" width="200">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
+            {{scope.row.appAddr}}:{{scope.row.appPort}}
         </template>
       </el-table-column>
-      <el-table-column label="更新人" align="center" prop="updateBy" />
       <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="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="备注" align="left" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['obj:app:edit']">修改</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['obj:app:remove']">删除</el-button>
@@ -169,7 +76,7 @@
           <el-input v-model="form.appPort" placeholder="请输入端口号" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" show-word-limit :maxlength="300" :autosize="{maxRows: 6, minRows: 4}"/>
         </el-form-item>
       </el-form>
       <template #footer>

src/views/obj/obj/index.vue

@@ -1,90 +1,27 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="业务类型" prop="objType">
-        <el-select v-model="queryParams.objType" placeholder="请选择业务类型" clearable>
-          <el-option
-            v-for="dict in biz_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="应用ID" prop="appId">
-        <el-input
-          v-model="queryParams.appId"
-          placeholder="请输入应用ID"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="对象名称" prop="objName">
-        <el-input
-          v-model="queryParams.objName"
-          placeholder="请输入对象名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="IP地址" prop="objAddr">
-        <el-input
-          v-model="queryParams.objAddr"
-          placeholder="请输入IP地址"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="端口" prop="objPort">
-        <el-input
-          v-model="queryParams.objPort"
-          placeholder="请输入端口"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建人" prop="createBy">
-        <el-input
-          v-model="queryParams.createBy"
-          placeholder="请输入创建人"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker clearable
-          v-model="queryParams.createTime"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="请选择创建时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="更新人" prop="updateBy">
-        <el-input
-          v-model="queryParams.updateBy"
-          placeholder="请输入更新人"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="更新时间" style="width: 308px">
-        <el-date-picker
-          v-model="daterangeUpdateTime"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+
+
+
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <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="objName" style="margin-right:10px">
+              <el-input
+                  v-model="queryParams.objName"
+                  placeholder="请输入对象名称"
+                  clearable
+                  @keyup.enter="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="6" style="text-align: right">
         <el-button
           type="primary"
           plain
@@ -93,66 +30,31 @@
           v-hasPermi="['obj:obj:add']"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['obj:obj:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['obj:obj:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['obj:obj:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="objList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="对象ID" align="center" prop="objId" />
-      <el-table-column label="业务类型" align="center" prop="objType">
+    <el-table v-loading="loading" :data="objList" border>
+      <el-table-column label="对象ID" align="center" prop="objId" width="80"/>
+      <el-table-column label="对象名称" align="left" prop="objName"/>
+      <el-table-column label="业务类型" align="left" prop="objType" width="180">
         <template #default="scope">
           <dict-tag :options="biz_type" :value="scope.row.objType"/>
         </template>
       </el-table-column>
-      <el-table-column label="应用ID" align="center" prop="appId" />
-      <el-table-column label="对象名称" align="center" prop="objName" />
-      <el-table-column label="IP地址" align="center" prop="objAddr" />
-      <el-table-column label="端口" align="center" prop="objPort" />
-      <el-table-column label="创建人" align="center" prop="createBy" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column label="对象地址" align="left" width="200">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
+          {{scope.row.objAddr}}:{{scope.row.objPort}}
         </template>
       </el-table-column>
-      <el-table-column label="更新人" align="center" prop="updateBy" />
-      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
+      <el-table-column label="更新时间" align="left" 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="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['obj:obj:edit']">修改</el-button>
+          <el-button link type="primary" icon="Position">运行指标查询</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['obj:obj:remove']">删除</el-button>
         </template>
       </el-table-column>