feat: 接口联调开发

src/api/obj/data.js

@@ -8,6 +8,12 @@ export function listData(query) {
         params: query
     })
 }
+export function getDataList(objId) {
+    return request({
+        url: '/obj/data/list/' + objId,
+        method: 'get'
+    })
+}
 
 // 查询业务对象数据接口详细
 export function getData(dataId) {

src/api/obj/metrics.js

@@ -42,3 +42,10 @@ export function delMetrics(objMetricsId) {
         method: 'delete'
     })
 }
+
+export function metricsHistory(objMetricsId){
+    return request({
+        url: '/obj/metrics/history/' + objMetricsId,
+        method: 'get'
+    })
+}

src/api/obj/obj.js

@@ -59,3 +59,20 @@ export function delObjTpl(objId,tplId) {
         method: 'get'
     })
 }
+
+
+// 选择指标
+export function selectMetrics(objId) {
+    return request({
+        url: '/obj/obj/metrics/select/' + objId,
+        method: 'get'
+    })
+}
+
+export function addMetrics(objId,query) {
+    return request({
+        url: '/obj/obj/metrics/add/' + objId,
+        method: 'get',
+        params:query
+    })
+}

src/views/alarm/record/index.vue

@@ -1,76 +1,49 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="告警对象" prop="objId">
-        <el-input
-          v-model="queryParams.objId"
-          placeholder="请输入告警对象"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="告警指标" prop="objMetricsId">
-        <el-input
-          v-model="queryParams.objMetricsId"
-          placeholder="请输入告警指标"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="告警级别" prop="alarmLevel">
-        <el-input
-          v-model="queryParams.alarmLevel"
-          placeholder="请输入告警级别"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="告警值" prop="alarmValue">
-        <el-input
-          v-model="queryParams.alarmValue"
-          placeholder="请输入告警值"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="告警时间" style="width: 308px">
-        <el-date-picker
-          v-model="daterangeAlarmTime"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </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="更新时间" 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">
+          <el-form-item label="" prop="objId" style="margin-right:10px">
+            <el-input
+                v-model="queryParams.objId"
+                placeholder="请输入告警对象"
+                clearable
+                @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="" prop="objMetricsId" style="margin-right:10px">
+            <el-input
+                v-model="queryParams.objMetricsId"
+                placeholder="请输入告警指标"
+                clearable
+                @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="" prop="alarmLevel" style="margin-right:10px">
+            <el-input
+                v-model="queryParams.alarmLevel"
+                placeholder="请输入告警级别"
+                clearable
+                @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="" style="width: 308px">
+            <el-date-picker
+                v-model="daterangeAlarmTime"
+                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-col>
+      <el-col :span="6" style="text-align: right">
         <el-button
           type="primary"
           plain
@@ -79,52 +52,20 @@
           v-hasPermi="['alarm:record:add']"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['alarm:record:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['alarm:record:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['alarm:record:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="告警ID" align="center" prop="alarmId" />
-      <el-table-column label="告警对象" align="center" prop="objId" />
+    <el-table v-loading="loading" border :data="recordList">
+      <el-table-column label="告警ID" align="center" prop="alarmId"  width="80"/>
+      <el-table-column label="告警对象" align="left" prop="objId" />
       <el-table-column label="告警指标" align="center" prop="objMetricsId" />
-      <el-table-column label="告警类型" align="center" prop="alarmType" />
       <el-table-column label="告警级别" align="center" prop="alarmLevel" />
       <el-table-column label="告警值" align="center" prop="alarmValue" />
-      <el-table-column label="告警时间" align="center" prop="alarmTime" width="180">
+      <el-table-column label="告警时间" align="left" prop="alarmTime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <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="180">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['alarm:record:edit']">修改</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['alarm:record:remove']">删除</el-button>

src/views/obj/obj/component/addComponent.vue

@@ -37,7 +37,8 @@ const stepContent = [
 
 const nextStep = (step:number) => {
   if (active.value === stepArray.length - 1) {
-    console.log("done")
+    emit("handleDone")
+    active.value = 0
   } else {
     active.value += step
   }
@@ -54,7 +55,7 @@ const queryObjData=(res)=>{
 }
 
 const reset=()=>{
-  active.value=2
+  active.value=0
   nextTick(()=>{
     comRef.value.resetForm()
   })

src/views/obj/obj/component/echartsInfo.vue

@@ -0,0 +1,82 @@
+<template>
+<!--  <el-row :gutter="20">-->
+<!--    <el-col :span="24">-->
+<!--      <el-date-picker-->
+<!--          v-model="dateTime"-->
+<!--          type="datetimerange"-->
+<!--          start-placeholder="开始时间"-->
+<!--          end-placeholder="结束时间"-->
+<!--          format="YYYY-MM-DD"-->
+<!--          date-format="YYYY/MM/DD"-->
+<!--          time-format="A hh:mm:ss"-->
+<!--      />-->
+<!--      <el-button type="primary" icon="Search" @click="getList">搜索</el-button>-->
+<!--    </el-col>-->
+<!--  </el-row>-->
+  <div ref="commandstats" style="height: 420px" />
+</template>
+<script setup lang="ts">
+import {nextTick, watchEffect} from "vue";
+import {metricsHistory} from "@/api/obj/metrics"
+import {parseTime} from "@/utils/ruoyi"
+import * as echarts from 'echarts';
+const { proxy } = getCurrentInstance();
+const dateTime=ref([])
+
+const commandstats = ref(null);
+const objMetricsId = ref(null);
+
+const props = defineProps(['objMetricsId'])
+watchEffect(()=>{
+  objMetricsId.value = props.objMetricsId
+  nextTick(()=>{
+    getList()
+  })
+})
+
+function initDateTime(){
+    const today = new Date();
+    const halfMonthAgo = new Date();
+    halfMonthAgo.setDate(today.getDate() - 15);
+    dateTime.value = [halfMonthAgo, today];
+}
+
+function getList() {
+  proxy.$modal.loading("正在加载缓存监控数据，请稍候！");
+  metricsHistory(objMetricsId.value).then(res=>{
+    proxy.$modal.closeLoading();
+    const times = res.data.times.map(t=>parseTime(t,'{y}/{m}/{d} {h}:{mi}'))
+    const commandstatsIntance = echarts.init(commandstats.value);
+    commandstatsIntance.setOption({
+      grid:{
+        left: '1%',
+        right: '1%',
+        bottom: '1%',
+        top: '1%',
+        containLabel: true
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      xAxis: {
+        type: 'category',
+        data: times
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          data: res.data.values,
+          type: 'line'
+        }
+      ]
+    });
+    window.addEventListener("resize", () => {
+      commandstatsIntance.resize();
+    });
+  })
+}
+
+
+</script>

src/views/obj/obj/component/metricsList.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-table :data="listData" border size="small" style="margin:10px 0">
+    <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="scope.row.metricsTypes && 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">
+        <el-input v-model="scope.row.alarmLow" size="small" v-if="edit"/>
+        <span v-else>{{ scope.row.alarmLow }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="告警-中" align="left" width="80">
+      <template #default="scope">
+        <el-input v-model="scope.row.alarmMid" size="small" v-if="edit"/>
+        <span v-else>{{scope.row.alarmMid}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="告警-高" align="left" width="80">
+      <template #default="scope">
+        <el-input v-model="scope.row.alarmHigh" size="small" v-if="edit" />
+        <span v-else>{{scope.row.alarmHigh}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
+      <template #default="scope">
+        <slot name="operation" :row="scope.row" />
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script setup lang="ts">
+const props = defineProps(['listData','edit'])
+</script>
+<style scoped lang="scss">
+</style>

src/views/obj/obj/component/runMetricsInfo.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="0">
+    <el-form-item label="" prop="metricsName">
+      <el-input
+          v-model="queryParams.metricsName"
+          placeholder="请输入指标名称"
+          clearable
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
+    </el-form-item>
+  </el-form>
+
+  <el-table v-loading="loading" border :data="metricsList">
+    <el-table-column label="ID" align="center" prop="objMetricsId" width="80"/>
+    <el-table-column label="指标分类" align="left" width="120">
+      <template #default="scope">
+            <span v-for="(item,i) in scope.row.metricsDef.metricsTypes" :key="`${scope.$index}_${item}`">
+              {{ item.typeName }}<span v-if="scope.row.metricsTypes && 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" />
+    <el-table-column label="告警规则" align="left" prop="alarmRule" />
+    <el-table-column label="创建时间" align="left" 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" class-name="small-padding fixed-width" width="100">
+      <template #default="scope">
+        <el-button link type="primary" icon="DataLine" @click="metricsEcharts(scope.row)">指标趋势</el-button>
+      </template>
+    </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="趋势指标" v-model="openDialog" :width="1000" append-to-body >
+    <echarts-info :objMetricsId="objMetricsId" />
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { listMetrics } from "@/api/obj/metrics";
+import {ref, watchEffect} from "vue";
+import echartsInfo from "./echartsInfo.vue"
+const { proxy } = getCurrentInstance();
+const props = defineProps(['rowId'])
+const loading = ref(true);
+const metricsList = ref([]);
+const total = ref(0);
+const openDialog = ref(false)
+const objMetricsId = ref(null)
+const queryParams = reactive({
+  objId: props.rowId,
+  pageNum: 1,
+  pageSize: 10,
+  metricsName:""
+});
+watchEffect(()=>{
+  queryParams.objId = props.rowId
+  getList()
+})
+
+/** 查询业务对象指标列表 */
+function getList() {
+  loading.value = true;
+  listMetrics(queryParams).then(response => {
+    metricsList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+function metricsEcharts(row){
+  openDialog.value = true
+  objMetricsId.value = row.objMetricsId
+}
+
+</script>
+<style scoped lang="scss">
+</style>

src/views/obj/obj/component/step3.vue

@@ -1,7 +1,80 @@
 <template>
-  step3
+  <el-button type="primary" @click="handleSelect">选择指标</el-button>
+  <metrics-list :listData="listData" :edit="true">
+    <template #operation="scope">
+      <el-button link type="primary" icon="Edit" @click="handleUpdateMetrics(scope.row)">保存</el-button>
+      <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+    </template>
+  </metrics-list>
+  <el-dialog title="选择指标" v-model="openDialog" :width="1000" append-to-body style="top:20vh">
+    <metrics-list :listData="addMetricsList" :edit="false">
+      <template #operation="scope">
+        <el-button link type="primary" icon="Delete" @click="handleAddMetrics(scope.row)">添加</el-button>
+      </template>
+    </metrics-list>
+  </el-dialog>
 </template>
 <script setup lang="ts">
+import {onMounted, ref} from "vue";
+import metricsList from "./metricsList.vue"
+const {proxy,emit} = getCurrentInstance()
+const props = defineProps(['rowId'])
+import {selectMetrics,addMetrics} from "@/api/obj/obj"
+import {listMetrics,delMetrics,updateMetrics} from '@/api/obj/metrics'
+const listData=ref([])
+const openDialog=ref(false)
+const addMetricsList=ref([])
+onMounted(()=>{
+  queryList()
+})
+
+
+const queryList=()=>{
+  listMetrics({objId:props.rowId,tplId:-1}).then(res=>{
+    listData.value = res.rows
+  })
+}
+
+const handleAddMetrics = row =>{
+  addMetrics(props.rowId,{metricsIds:row.metricsId}).then(()=>{
+    handleSelect()
+    queryList()
+  })
+}
+
+const handleSelect=()=>{
+  openDialog.value = true
+  selectMetrics(props.rowId).then(res=>{
+    addMetricsList.value = res.rows.map(p=>{
+      return {
+        ...p,
+        metricsDef:p
+      }
+    })
+  })
+}
+
+const handleDelete=(row:any)=>{
+  if(row.objMetricsId){
+    delMetrics(row.objMetricsId).then(res=>{
+      proxy.$modal.msgSuccess(res.msg);
+      queryList()
+    })
+  }
+}
+
+const handleUpdateMetrics=(row)=>{
+  updateMetrics(row).then((res)=>{
+    proxy.$modal.msgSuccess(res.msg);
+  })
+}
+
+const submitForm=()=>{
+  emit("nextStep", 1)
+}
+
+defineExpose({submitForm})
+
 </script>
 <style scoped lang="scss">
 </style>

src/views/obj/obj/component/step4.vue

@@ -1,7 +1,60 @@
 <template>
-  step4
+  <el-table :data="addressData" border style="width: 100%">
+    <el-table-column label="指标类型" width="180">
+      <template #default="scope">
+        {{metrics_category.find(item=>item.value==scope.row.metricsType).label}}
+      </template>
+    </el-table-column>
+    <el-table-column label="数据地址">
+      <template #default="scope">
+        <el-input v-model="scope.row.apiAddr" />
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="180">
+      <template #default="scope">
+        <el-button link type="primary" icon="CircleCheck" @click="handleSave(scope.row)">保存</el-button>
+        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 <script setup lang="ts">
+import {getDataList,updateData,delData} from "@/api/obj/data"
+import {onMounted, ref} from "vue";
+const {proxy,emit} = getCurrentInstance()
+const {metrics_category} = proxy.useDict('metrics_category');
+const props = defineProps(['rowId'])
+const addressData = ref([])
+
+onMounted(()=>{
+  dataList()
+})
+
+const handleDelete=(row)=>{
+  delData(row.dataId).then(res=>{
+    proxy.$modal.msgSuccess(res.msg)
+    dataList()
+  })
+}
+
+const handleSave=(row)=>{
+  updateData(row).then(res=>{
+    proxy.$modal.msgSuccess(res.msg)
+  })
+}
+
+const dataList = () => {
+  getDataList(props.rowId).then(res => {
+    addressData.value =  res.rows
+  })
+}
+
+const submitForm=()=>{
+  emit("nextStep", "done")
+}
+
+defineExpose({submitForm})
+
 </script>
 <style scoped lang="scss">
 </style>

src/views/obj/obj/index.vue

@@ -60,7 +60,7 @@
           <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="Position" @click="handleRunSearch(scope.row)">运行指标查询</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['obj:obj:remove']">
             删除
           </el-button>
@@ -77,8 +77,9 @@
     />
 
     <!-- 添加或修改业务对象对话框 -->
-    <el-dialog :title="title" v-model="open" :width="addDialogType? 1000 : 600" append-to-body>
-      <add-component ref="addRef" :rowId.sync="rowId" v-if="open" @changeRowId="v=>rowId=v"/>
+    <el-dialog :title="title" v-model="open" :width="addDialogType? 1000 : 1200" append-to-body>
+      <add-component ref="addRef" :rowId.sync="rowId" v-if="open && addDialogType" @changeRowId="v => rowId = v" @handleDone="open = false"/>
+      <run-metrics-info v-else :rowId.sync="rowId"/>
       <template #footer v-if="false">
         <div class="dialog-footer" v-show="addDialogType">
           <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -92,6 +93,7 @@
 <script setup name="Obj">
 import {addObj, delObj, listObj, updateObj} from "@/api/obj/obj";
 import addComponent from "./component/addComponent.vue"
+import runMetricsInfo from "./component/runMetricsInfo.vue"
 
 const {proxy} = getCurrentInstance();
 const {biz_type} = proxy.useDict('biz_type');
@@ -110,6 +112,7 @@ const addDialogType = ref(true)
 const addRef=ref(null)
 
 const rowId = ref(null)
+const dialogComponent = ref(null)
 
 const data = reactive({
   queryParams: {
@@ -130,6 +133,8 @@ const data = reactive({
 
 const {queryParams, form, rules} = toRefs(data);
 
+
+
 /** 查询业务对象列表 */
 function getList() {
   loading.value = true;
@@ -145,10 +150,12 @@ function getList() {
   });
 }
 
-function handleRunSearch() {
+function handleRunSearch(row) {
+  rowId.value = row.objId || ids.value
   open.value = true;
   title.value = "运行指标查询";
   addDialogType.value = false
+
 }
 
 // 取消按钮
@@ -178,7 +185,7 @@ function handleSelectionChange(selection) {
 
 /** 新增按钮操作 */
 function handleAdd(vTitle) {
-  // reset();
+  addDialogType.value = true
   rowId.value = null;
   open.value = true;
   title.value = vTitle || "添加业务对象";