feat: 指标管理开发

src/views/business/appManage/component/addAppManage.vue

@@ -1,70 +0,0 @@
-<template>
-  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="100" label-suffix=":"
-      class="demo-ruleForm" :size="formSize" status-icon >
-    <el-form-item label="应用名称" prop="name">
-      <el-input v-model="ruleForm.name" placeholder="请输入应用名称"/>
-    </el-form-item>
-    <el-form-item label="应用编码" prop="code">
-      <el-input v-model="ruleForm.code" placeholder="请输入应用编码"/>
-    </el-form-item>
-    <el-form-item label="应用地址" prop="address">
-      <el-input v-model="ruleForm.address" placeholder="请输入应用地址"/>
-    </el-form-item>
-    <el-form-item label="端口" prop="port">
-      <el-input v-model="ruleForm.port" placeholder="请输入端口"/>
-    </el-form-item>
-    <el-form-item label="备注">
-      <el-input v-model="ruleForm.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入备注" maxlength="300" show-word-limit/>
-    </el-form-item>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-import {reactive, ref} from 'vue'
-import type {ComponentSize, FormInstance, FormRules} from 'element-plus'
-
-interface RuleForm {
-  name: string
-  code: string
-  address: string
-  port: number
-  remark: string
-}
-
-const formSize = ref<ComponentSize>('default')
-const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive<RuleForm>({
-  name: '',
-  code: '',
-  address: '',
-  port: null,
-  remark: '',
-})
-
-const rules = reactive<FormRules<RuleForm>>({
-  name: [
-    {required: true, message: '应用名称不能为空', trigger: 'change'},
-    {min: 2, max: 6, message: '字符长度在 2 到 6 个字符', trigger: 'change'},
-  ],
-  code: {required: true, message: '应用编码不能为空', trigger: 'change',},
-  address: {required: true, message: '应用地址不能为空', trigger: 'change',},
-  port: {required: true, message: '端口不能为空', trigger: 'change',}
-})
-
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-}
-
-</script>

src/views/business/appManage/index.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="app-container model-container">
-    <search :addText="addText" @handle="handleSearch">
-      <el-input v-model="params.name" style="width: 240px;margin-right: 10px" placeholder="请输入应用程序名称"/>
-      <template #afterBtn>
-        <el-button icon="Download">下载Agent</el-button>
-      </template>
-    </search>
-    <div class="table-content">
-      <el-table
-          ref="multipleTableRef"
-          :data="tableData"
-          border
-          style="width: 100%"
-      >
-        <el-table-column type="index" width="55" align="center" label="#"/>
-        <el-table-column label="Date" width="120">
-          <template #default="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column property="name" label="Name" width="120"/>
-        <el-table-column property="address" label="Address"/>
-        <el-table-column label="edit" width="120">
-          <template #default="scope">
-            <el-button link type="primary">编辑</el-button>
-            <el-button link type="info">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <pagination :total="total" :size="params.size" @size-change="sizeChange"/>
-  </div>
-
-  <el-dialog
-      v-model="dialogVisible"
-      :title="title"
-      width="600"
-      top="30vh"
-  >
-    <add-app-manage />
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">
-          提交
-        </el-button>
-        <el-button @click="dialogVisible = false">取消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-</template>
-<script setup lang="ts">
-import search from "../../component/search.vue"
-import pagination from "../../component/pagination.vue"
-import addAppManage from "./component/addAppManage.vue"
-import {reactive, ref} from "vue";
-import {ElTable} from "element-plus"
-
-const title = ref<string>('添加应用程序')
-const dialogVisible = ref<boolean>(false)
-const total = ref<number>(100)
-const params = reactive({
-  name: '',
-  page: 1,
-  size: 10,
-  type: 0
-})
-
-
-const addText = "添加"
-
-const handleSearch = (event) => {
-  switch (event) {
-    case "add":
-      dialogVisible.value = true
-      title.value = "添加应用程序"
-      break;
-  }
-}
-
-interface User {
-  date: string
-  name: string
-  address: string
-}
-
-const sizeChange = (event) => {
-
-}
-
-const multipleTableRef = ref<InstanceType<typeof ElTable>>()
-const tableData: User[] = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-08',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-]
-
-</script>
-<style lang="scss">
-@import "../../model/css/css.scss";
-</style>

src/views/business/componentManage/index.vue

@@ -1,131 +0,0 @@
-<template>
-  <div class="app-container model-container">
-    <search :addText="addText" @handle="handleSearch">
-      <el-input v-model="params.name" style="width: 240px;margin-right: 10px" placeholder="请输入对象/组件名称"/>
-    </search>
-    <div class="table-content">
-      <el-table
-          ref="multipleTableRef"
-          :data="tableData"
-          border
-          style="width: 100%"
-      >
-        <el-table-column type="index" width="55" align="center" label="#"/>
-        <el-table-column label="Date" width="120">
-          <template #default="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column property="name" label="Name" width="120"/>
-        <el-table-column property="address" label="Address"/>
-        <el-table-column label="edit" width="220">
-          <template #default="scope">
-            <el-button link type="primary">编辑</el-button>
-            <el-button link type="primary">运行指标查询</el-button>
-            <el-button link type="info">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <pagination :total="total" :size="params.size" @size-change="sizeChange"/>
-  </div>
-
-  <el-dialog
-      v-model="dialogVisible"
-      :title="title"
-      width="1000"
-      top="30vh"
-  >
-    <add-component/>
-    <template #footer v-if="isFooter">
-      <div class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">
-          提交
-        </el-button>
-        <el-button @click="dialogVisible = false">取消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-</template>
-<script setup lang="ts">
-import search from "../../component/search.vue"
-import pagination from "../../component/pagination.vue"
-import addComponent from "./component/addComponent.vue"
-import {reactive, ref} from "vue";
-import {ElTable} from "element-plus"
-
-const title = ref<string>('新建对象')
-const dialogVisible = ref<boolean>(true)
-const isFooter = ref(false)
-const total = ref<number>(100)
-const params = reactive({
-  name: '',
-  page: 1,
-  size: 10,
-  type: 0
-})
-
-const addText = "新建对象"
-
-const handleSearch = (event) => {
-  switch (event) {
-    case "add":
-      dialogVisible.value = true
-      title.value = "新建对象"
-      isFooter.value = false
-      break;
-  }
-}
-
-interface User {
-  date: string
-  name: string
-  address: string
-}
-
-const sizeChange = (event) => {
-
-}
-
-const multipleTableRef = ref<InstanceType<typeof ElTable>>()
-const tableData: User[] = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-08',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-]
-
-</script>
-<style lang="scss">
-@import "../../model/css/css.scss";
-</style>

src/views/model/css/css.scss

@@ -1,12 +0,0 @@
-@import "@/assets/styles/common.scss";
-.model-container {
-  .top-search{
-    @include flexBetween();
-  }
-  .table-content{
-    margin:10px 0;
-  }
-}
-.footer-center{
-  text-align: center;
-}

src/views/model/definition/component/addDefinition.vue

@@ -1,103 +0,0 @@
-<template>
-  <el-form
-      ref="ruleFormRef"
-      style="max-width: 600px"
-      :model="ruleForm"
-      :rules="rules"
-      label-width="110px"
-      class="demo-ruleForm"
-      :size="formSize"
-      status-icon
-      label-suffix=":"
-  >
-    <el-form-item label="指标名称" prop="name">
-      <el-input v-model="ruleForm.name" placeholder="请输入指标名称"/>
-    </el-form-item>
-    <el-form-item label="指标类型" prop="type">
-      <el-select v-model="ruleForm.type" placeholder="请选择">
-        <el-option :label="item" :value="item" v-for="(item,index) in locationOptions" :key="index"/>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="指标编码" prop="code">
-      <el-input v-model="ruleForm.code" placeholder="请输入指标编码"/>
-    </el-form-item>
-    <el-form-item label="指标分类" prop="index">
-      <el-radio-group v-model="ruleForm.index">
-        <el-radio-button label="CPU指标" value="CPU指标"/>
-        <el-radio-button label="内存指标" value="内存指标"/>
-        <el-radio-button label="磁盘指标" value="磁盘指标"/>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="数据获取公式">
-      <el-input v-model="ruleForm.formula" type="textarea" placeholder="请输入数据获取公式"
-                :autosize="{ minRows: 4, maxRows: 8 }"/>
-    </el-form-item>
-    <el-form-item label="告警-低">
-      <el-input v-model="ruleForm.alarmLow" placeholder="请输入告警-低"/>
-    </el-form-item>
-    <el-form-item label="告警-中">
-      <el-input v-model="ruleForm.alarmMid" placeholder="请输入告警-中"/>
-    </el-form-item>
-    <el-form-item label="告警-高">
-      <el-input v-model="ruleForm.alarmHigh" placeholder="请输入告警-高"/>
-    </el-form-item>
-  </el-form>
-</template>
-<script setup lang="ts">
-import {reactive, ref} from 'vue'
-import type {ComponentSize, FormInstance, FormRules} from 'element-plus'
-
-interface RuleForm {
-  name: string
-  type: string,
-  code: string,
-  index: string,
-  formula: string,
-  alarmLow: string,
-  alarmMid: string,
-  alarmHigh: string
-}
-
-const formSize = ref<ComponentSize>('default')
-const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive<RuleForm>({
-  name: '',
-  type: '',
-  code: '',
-  index: '',
-  formula: '',
-  alarmLow: '',
-  alarmMid: '',
-  alarmHigh: ''
-})
-
-const locationOptions = ['pinpoint', 'node_exporter', 'mysql_exporter']
-const rules = reactive<FormRules<RuleForm>>({
-  name: [
-    {required: true, message: '指标名称不能为空', trigger: 'blur'},
-    {min: 2, max: 6, message: '长度不能小于2且大于6', trigger: 'blur'},
-  ],
-  type: {required: true, message: '请选择指标类型', trigger: 'change'},
-  code: {required: true, message: '指标编码不能为空', trigger: 'blur'},
-  index: {required: true, message: '请选择指标分类', trigger: 'change'},
-})
-
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-}
-
-</script>
-<style scoped lang="scss">
-</style>

src/views/model/definition/index.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="app-container model-container">
-    <search :addText="addText" @handle="handleSearch">
-      <el-input v-model="params.name" style="width: 240px;margin-right: 10px" placeholder="请输入指标名称"/>
-      <el-select v-model="params.type" style="margin-right: 10px">
-        <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value"/>
-      </el-select>
-    </search>
-    <div class="table-content">
-      <el-table
-          ref="multipleTableRef"
-          :data="tableData"
-          border
-          style="width: 100%"
-      >
-        <el-table-column type="index" width="55" align="center" label="#"/>
-        <el-table-column label="Date" width="120">
-          <template #default="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column property="name" label="Name" width="120"/>
-        <el-table-column property="address" label="Address"/>
-        <el-table-column label="edit" width="120">
-          <template #default="scope">
-            <el-button link type="primary">编辑</el-button>
-            <el-button link type="info">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <pagination :total="total" :size="params.size" @size-change="sizeChange"/>
-  </div>
-
-  <el-dialog
-      v-model="dialogVisible"
-      :title="title"
-      width="600"
-      top="30vh"
-  >
-    <add-definition />
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">
-          提交
-        </el-button>
-        <el-button @click="dialogVisible = false">取消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-</template>
-<script setup lang="ts">
-import search from "../../component/search.vue"
-import pagination from "../../component/pagination.vue"
-import addDefinition from "./component/addDefinition.vue"
-import {reactive, ref} from "vue";
-import {ElTable} from "element-plus"
-
-const title = ref<string>('添加指标')
-const dialogVisible = ref<boolean>(false)
-const total = ref<number>(100)
-const params = reactive({
-  name: '',
-  page: 1,
-  size: 10,
-  type: 0
-})
-
-const typeOption = [
-  {name: "全部", value: 0},
-  {name: "CPU指标", value: 1},
-  {name: "内存指标", value: 2},
-  {name: "磁盘指标", value: 3}
-]
-
-const addText = "新建指标"
-
-const handleSearch = (event) => {
-  switch (event) {
-    case "add":
-      dialogVisible.value = true
-      title.value = "新建指标定义"
-      break;
-  }
-}
-
-interface User {
-  date: string
-  name: string
-  address: string
-}
-
-const sizeChange = (event) => {
-
-}
-
-const multipleTableRef = ref<InstanceType<typeof ElTable>>()
-const tableData: User[] = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-08',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-]
-
-</script>
-<style lang="scss">
-@import "../css/css.scss";
-</style>

src/views/model/template/component/addTemplate.vue

@@ -1,46 +0,0 @@
-<template>
-  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" status-icon label-width="100px" label-suffix=":">
-    <el-form-item label="模板名称" prop="name">
-      <el-input v-model="ruleForm.name" placeholder="请输入模板名称"/>
-    </el-form-item>
-  </el-form>
-</template>
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import type {  FormInstance, FormRules } from 'element-plus'
-
-interface RuleForm {
-  name: string
-}
-
-const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive<RuleForm>({
-  name: '',
-})
-
-const rules = reactive<FormRules<RuleForm>>({
-  name: [
-    { required: true, message: '模板名称不能为空', trigger: 'blur' },
-    { min: 2, max: 6, message: '长度在2位和6位之间', trigger: 'blur' },
-  ],
-})
-
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-}
-
-</script>
-<style scoped lang="scss">
-</style>

src/views/model/template/component/normManage.vue

@@ -1,59 +0,0 @@
-<template>
-  <el-row :gutter="10">
-    <el-col :span="24">
-      <el-select v-model="type" filterable placeholder="请选择指标类型" style="width: 150px;margin-right:10px;">
-        <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value" />
-      </el-select>
-      <el-select v-model="name" filterable remote reserve-keyword placeholder="请输入指标名称"
-          :remote-method="remoteMethod" :loading="loading" style="width: 200px;margin-right:10px;"
-      >
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-      </el-select>
-      <el-button type="primary">添加</el-button>
-    </el-col>
-    <el-col :span="24" style="margin-top:10px">
-      <el-table :data="tableData" style="width: 100%" border>
-        <el-table-column prop="name" label="分类ID" />
-        <el-table-column prop="value" label="指标分类" />
-        <el-table-column prop="time" label="指标名称" />
-        <el-table-column prop="status" label="指标编码" />
-        <el-table-column prop="status" label="告警-低" />
-        <el-table-column prop="status" label="告警-中" />
-        <el-table-column prop="status" label="告警-高" />
-        <el-table-column prop="status" label="操作">
-          <template #default="scope">
-            <el-button type="text" size="small">编辑</el-button>
-            <el-button type="text" size="small">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-col>
-  </el-row>
-</template>
-<script setup lang="ts">
-import {ref} from "vue";
-
-const typeOption = [
-  {name: "CPU指标", value: 1},
-  {name: "内存指标", value: 2},
-  {name: "磁盘指标", value: 3}
-]
-interface Option {
-  label: string,
-  value: string
-}
-const tableData=ref([])
-const type = ref(1)
-const name = ref('')
-const loading = ref(false)
-const options = ref<Option[]>([])
-
-const remoteMethod = () => {
-  if (name) {
-    loading.value = true
-  }
-}
-
-</script>
-<style scoped lang="scss">
-</style>

src/views/model/template/index.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="app-container model-container">
-    <search :addText="addText" @handle="handleSearch">
-      <el-input v-model="params.name" style="width: 240px;margin-right: 10px" placeholder="请输入模版名称"/>
-      <el-select v-model="params.type" style="margin-right: 10px">
-        <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value"/>
-      </el-select>
-    </search>
-    <div class="table-content">
-      <el-table
-          ref="multipleTableRef"
-          :data="tableData"
-          border
-          style="width: 100%"
-      >
-        <el-table-column type="index" width="55" align="center" label="#"/>
-        <el-table-column label="Date" width="120">
-          <template #default="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column property="name" label="Name" width="120"/>
-        <el-table-column property="address" label="Address"/>
-        <el-table-column label="edit" width="180">
-          <template #default="scope">
-            <el-button link type="primary" @click="handleSearch('edit',{...scope.row})">编辑</el-button>
-            <el-button link type="primary" @click="handleSearch('norm',{...scope.row})">指标管理</el-button>
-            <el-button link type="info">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <pagination :total="total" :size="params.size" @size-change="sizeChange"/>
-  </div>
-
-  <el-dialog
-      v-model="dialogVisible"
-      :title="title"
-      :width="width"
-      top="30vh"
-  >
-    <component :is="isComponent"/>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">
-          提交
-        </el-button>
-        <el-button @click="dialogVisible = false">取消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-</template>
-<script setup lang="ts">
-import search from "../../component/search.vue"
-import pagination from "../../component/pagination.vue"
-import addTemplate from "./component/addTemplate.vue"
-import normManage from "./component/normManage.vue"
-import {reactive, ref} from "vue";
-import {ElTable} from "element-plus"
-
-const isComponent = ref(normManage)
-const title = ref<string>('添加指标')
-const dialogVisible = ref<boolean>(true)
-const total = ref<number>(100)
-const params = reactive({
-  name: '',
-  page: 1,
-  size: 10,
-  type: 0
-})
-
-const typeOption = [
-  {name: "全部", value: 0},
-  {name: "CPU指标", value: 1},
-  {name: "内存指标", value: 2},
-  {name: "磁盘指标", value: 3}
-]
-
-const addText = "新建模版"
-const width = ref<string>('600')
-
-const handleSearch = (event, data) => {
-  dialogVisible.value = true
-  switch (event) {
-    case "add":
-    case "edit":
-      title.value = `${event === "add" ? "新建" : "编辑"}指标模版`
-      isComponent.value = addTemplate
-      width.value = '600'
-      break
-    case "norm":
-      title.value = "指标管理"
-      isComponent.value = normManage
-      width.value = '80vw'
-      break
-  }
-}
-
-interface User {
-  date: string
-  name: string
-  address: string
-}
-
-const sizeChange = (event) => {
-
-}
-
-const multipleTableRef = ref<InstanceType<typeof ElTable>>()
-const tableData: User[] = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-08',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-]
-
-</script>
-<style lang="scss">
-@import "../css/css.scss";
-</style>

src/views/model/type/index.vue

@@ -1,127 +0,0 @@
-<template>
-  <div class="app-container model-container">
-    <search :addText="addText" @handle="handleSearch">
-      <el-input v-model="params.name" style="width: 240px;margin-right: 10px" placeholder="请输入分类名称"/>
-    </search>
-    <div class="table-content">
-      <el-table
-          ref="multipleTableRef"
-          :data="tableData"
-          border
-          style="width: 100%"
-      >
-        <el-table-column type="index" width="55" align="center" label="#"/>
-        <el-table-column label="Date" width="120">
-          <template #default="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column property="name" label="Name" width="120"/>
-        <el-table-column property="address" label="Address"/>
-        <el-table-column label="edit" width="120">
-          <template #default="scope">
-            <el-button link type="primary">编辑</el-button>
-            <el-button link type="info">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <pagination :total="total" :size="params.size" @size-change="sizeChange"/>
-  </div>
-
-  <el-dialog
-      v-model="dialogVisible"
-      :title="title"
-      width="600"
-      top="30vh"
-  >
-    <span>This is a message</span>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">
-          提交
-        </el-button>
-        <el-button @click="dialogVisible = false">取消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-</template>
-<script setup lang="ts">
-import search from "../../component/search.vue"
-import pagination from "../../component/pagination.vue"
-import {reactive, ref} from "vue"
-import {ElTable} from 'element-plus'
-
-const dialogVisible = ref<boolean>(false)
-const title = ref<string>('添加指标')
-
-const total = ref<number>(100)
-const addText = "新建分类"
-const params = reactive({
-  name: '',
-  page: 1,
-  size: 10
-})
-
-interface User {
-  date: string
-  name: string
-  address: string
-}
-
-const sizeChange = (val) => {
-  console.log(val)
-}
-
-const multipleTableRef = ref<InstanceType<typeof ElTable>>()
-const tableData: User[] = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-08',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-]
-
-const handleSearch = (event) => {
-  console.log(event)
-  switch (event) {
-    case "add":
-      dialogVisible.value = true
-      title.value = "添加指标"
-      break;
-  }
-}
-
-</script>
-<style lang="scss">
-@import "../css/css.scss";
-</style>

src/views/business/componentManage/component/addComponent.vue → src/views/obj/obj/component/addComponent.vue

@@ -8,6 +8,7 @@
     <component :is="stepArray[active]"/>
   </div>
   <div class="step-row">
+    <el-button type="primary" @click="active--" v-if="active > 0">上一步</el-button>
     <el-button type="primary" @click="nextStep">{{ stepArray.length - 1 === active ? '完成' : '下一步' }}</el-button>
   </div>
 </template>
@@ -35,11 +36,9 @@ const nextStep = () => {
     active.value++
   }
 }
-
-
 </script>
 <style scoped lang="scss">
-@import "@/assets/styles/common.scss";
+@import "@/assets/styles/common";
 
 .step-row {
   @include flexCenter;

src/views/obj/obj/index.vue

@@ -2,33 +2,33 @@
   <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="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 :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
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['obj:obj:add']"
-        >新增</el-button>
+            type="primary"
+            plain
+            icon="Plus"
+            @click="handleAdd"
+            v-hasPermi="['obj:obj:add']"
+        >新增
+        </el-button>
       </el-col>
     </el-row>
 
@@ -42,7 +42,7 @@
       </el-table-column>
       <el-table-column label="对象地址" align="left" width="200">
         <template #default="scope">
-          {{scope.row.objAddr}}:{{scope.row.objPort}}
+          {{ scope.row.objAddr }}:{{ scope.row.objPort }}
         </template>
       </el-table-column>
       <el-table-column label="更新时间" align="left" prop="updateTime" width="180">
@@ -50,55 +50,61 @@
           <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" prop="remark"/>
       <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>
+          <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" @click="handleRunSearch(scope.row)">运行指标查询</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['obj:obj:remove']">
+            删除
+          </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"
+        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="objRef" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" :width="addDialogType? 600 : 1000" append-to-body>
+      <el-form ref="objRef" :model="form" :rules="rules" label-width="80px" v-if="addDialogType">
         <el-form-item label="业务类型" prop="objType">
           <el-select v-model="form.objType" placeholder="请选择业务类型">
             <el-option
-              v-for="dict in biz_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
+                v-for="dict in biz_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
             ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="应用ID" prop="appId">
-          <el-input v-model="form.appId" placeholder="请输入应用ID" />
+          <el-input v-model="form.appId" placeholder="请输入应用ID"/>
         </el-form-item>
         <el-form-item label="对象名称" prop="objName">
-          <el-input v-model="form.objName" placeholder="请输入对象名称" />
+          <el-input v-model="form.objName" placeholder="请输入对象名称"/>
         </el-form-item>
         <el-form-item label="IP地址" prop="objAddr">
-          <el-input v-model="form.objAddr" placeholder="请输入IP地址" />
+          <el-input v-model="form.objAddr" placeholder="请输入IP地址"/>
         </el-form-item>
         <el-form-item label="端口" prop="objPort">
-          <el-input v-model="form.objPort" placeholder="请输入端口" />
+          <el-input v-model="form.objPort" 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>
+      <add-component v-else/>
       <template #footer>
-        <div class="dialog-footer">
+        <div class="dialog-footer" v-show="addDialogType">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
@@ -108,10 +114,11 @@
 </template>
 
 <script setup name="Obj">
-    import { listObj, getObj, delObj, addObj, updateObj } from "@/api/obj/obj";
+import {addObj, delObj, getObj, listObj, updateObj} from "@/api/obj/obj";
+import addComponent from "./component/addComponent.vue"
 
-    const { proxy } = getCurrentInstance();
-const { biz_type } = proxy.useDict('biz_type');
+const {proxy} = getCurrentInstance();
+const {biz_type} = proxy.useDict('biz_type');
 
 const objList = ref([]);
 const open = ref(false);
@@ -123,6 +130,8 @@ const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const daterangeUpdateTime = ref([]);
+const addDialogType = ref(true)
+
 
 const data = reactive({
   form: {},
@@ -142,21 +151,21 @@ const data = reactive({
   },
   rules: {
     objType: [
-      { required: true, message: "业务类型不能为空", trigger: "change" }
+      {required: true, message: "业务类型不能为空", trigger: "change"}
     ],
     objName: [
-      { required: true, message: "对象名称不能为空", trigger: "blur" }
+      {required: true, message: "对象名称不能为空", trigger: "blur"}
     ],
     objAddr: [
-      { required: true, message: "IP地址不能为空", trigger: "blur" }
+      {required: true, message: "IP地址不能为空", trigger: "blur"}
     ],
     objPort: [
-      { required: true, message: "端口不能为空", trigger: "blur" }
+      {required: true, message: "端口不能为空", trigger: "blur"}
     ],
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const {queryParams, form, rules} = toRefs(data);
 
 /** 查询业务对象列表 */
 function getList() {
@@ -173,6 +182,12 @@ function getList() {
   });
 }
 
+function handleRunSearch(row) {
+  open.value = true;
+  title.value = "运行指标查询";
+  addDialogType.value = false
+}
+
 // 取消按钮
 function cancel() {
   open.value = false;
@@ -195,6 +210,7 @@ function reset() {
     remark: null
   };
   proxy.resetForm("objRef");
+  addDialogType.value = true
 }
 
 /** 搜索按钮操作 */
@@ -259,12 +275,13 @@ function submitForm() {
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _objIds = row.objId || ids.value;
-  proxy.$modal.confirm('是否确认删除业务对象编号为"' + _objIds + '"的数据项？').then(function() {
+  proxy.$modal.confirm('是否确认删除业务对象编号为"' + _objIds + '"的数据项？').then(function () {
     return delObj(_objIds);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+  }).catch(() => {
+  });
 }
 
 /** 导出按钮操作 */