feat:集中告警增加趋势功能

3 weeks ago · 9fb490a1a2
9 changed files with 188 additions and 44 deletions
--- a/src/api/alert/warn/index.ts
+++ b/src/api/alert/warn/index.ts
@ -40,3 +40,14 @@ export function getWarn(id: number) {
 export function getAlarmLevelList() {
  return defHttp.get({ url: '/alert/warn/alarmlevel/list'})
 }
+
+export interface WarnTrendReqVO {
+  id?:string,
+  exaHistoryReqVO?: EXAHistoryReqVO
+}
+
+// 查询预警趋势
+export function getWarnTrend(params: WarnTrendReqVO) {
+  return defHttp.get({ url: '/alert/warn/alarm/trend', params })
+}
+
--- a/src/views/exa/HistoryLine.vue
+++ b/src/views/exa/HistoryLine.vue
@ -14,21 +14,24 @@ const props = defineProps({
  },
  height: {
    type: String,
-    default: propTypes.string.def('500px'),
+    default: '500px',
+  },
+  width: {
+    type: String,
+    default: '100%',
  },
  title: {
    type: String,
    default: '',
  },
  name: {
-    type: Array<string>,
-    default: [],
+    type: Array as PropType<string[]>,
+    default: () => [],
  },
  data: {
-    type: Array<Array<number>>,
-    default: () => [[]],
+    type: Array as PropType<number[][]>,
+    default: () => [],
  },
-  width: propTypes.string.def('100%'),
  // height: propTypes.string.def('70vh'),
 })
 const chartRef = ref<HTMLDivElement | null>(null)
@ -51,7 +54,7 @@ watch(
    const series = ref<any[]>([])
    const title = ref<any>({})

-    for (let i = 0; i < props.data.length; i++) {
+    for (let i = 0; i < props.data?.length; i++) {
      title.value = {
        left: 'left',
        text: props.title,
@ -70,11 +73,11 @@ watch(
        scale: true, // 开启自适应刻度
      })
      series.value.push({
-        name: props.name[i],
+        name: props.name?.[i] || '',
        type: 'line',
        smooth: true,
        showSymbol: false,
-        data: props.data[i],
+        data: props.data?.[i] || [],
        yAxisIndex: i,
      })
    }
@ -100,6 +103,9 @@ watch(
        position(pt) {
          return [pt[0], '10%']
        },
+        confine: true, // 添加此行，限制 tooltip 在图表容器内显示
+        backgroundColor: 'rgba(255, 255, 255, 0.5)', // ⭐ 透明度 0~1
+
      },
      title: title.value,
      toolbox: {
@ -130,15 +136,14 @@ watch(
                function convertToCSV(data) {
                  let csv = ''
                  // 添加列头
-                  const name = props.name.join(',')
+                  const name = props.name?.join(',') || ''
                  csv += `时间,${name}\n`
                  // 遍历数据并添加到CSV字符串中
-                  for (let i = 0; i < props.data[0].length; i++) {
+                  for (let i = 0; i < props.data?.[0]?.length || 0; i++) {
                    let data = ''
-                    for (let j = 0; j < props.data.length; j++)
-                      data += `,${props.data[j][i][1]}`
-
-                    csv += `${moment(props.data[0][i][0]).format('YYYY-MM-DD HH:mm:ss')}${data}\n`
+                    for (let j = 0; j < props.data?.length || 0; j++)
+                      data += `,${props.data?.[j]?.[i]?.[1] || ''}`
+                    csv += `${moment(props.data?.[0]?.[i]?.[0] || 0).format('YYYY-MM-DD HH:mm:ss')}${data}\n`
                    // props.data[i].map((item, index) => {
                    //   csv += 'x值' + ',' + 'y值' + '\n'
                    // })
@ -156,7 +161,6 @@ watch(
          length: 6,
          lineStyle: {
            type: 'dashed',
-            // ...
          },
        },
        // boundaryGap: false,
--- a/src/views/exa/history/index.vue
+++ b/src/views/exa/history/index.vue
@ -7,6 +7,9 @@ import HistoryLine from '../HistoryLine.vue'
 import PointModal from './PointModal.vue'
 import { getExaHistorys } from '@/api/alert/exa'
 import { useModal } from '@/components/Modal'
+import {useForm} from "@/components/Form";
+import {calcFormSchemas} from "@/views/run/calc/calc.data";
+

 interface FormState {
  publishTime: any[]
@ -35,6 +38,7 @@ const state = reactive<RowKeys>({
  selectedRowKeys: [],
 })
 onMounted(() => {
+  searchForm.publishTime = [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]
  getHistoryChart()
 })

@ -44,7 +48,6 @@ const legendName = ref<any[]>([])
 async function getHistoryChart() {
  state.selectedRowKeys = localStorage.getItem('pointInfo') ? JSON.parse(localStorage.getItem('pointInfo') || '') : []
  selectedData.value = localStorage.getItem('pointInfoList') ? JSON.parse(localStorage.getItem('pointInfoList') || '') : []
-  searchForm.publishTime = [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]

  const pointCodeList = selectedData.value.map(item => (item.itemName))
  loading.value = true
@ -53,7 +56,7 @@ async function getHistoryChart() {
    message.info('暂无测点')

  const pointCode = selectedData.value.map(item => (item.itemName)).join(',')
-  const pointDesc: any[] = selectedData.value.map(item => (item.descriptor))
+  const pointDesc: any[] = selectedData.value.map(item => (item.descriptor+'('+item.itemName+')'))

  const exaHistoryReqVO = {
    startTime: searchForm.publishTime[0],
@ -62,7 +65,7 @@ async function getHistoryChart() {
    interval: 100,
  }
  historyData.value = await getExaHistorys(exaHistoryReqVO)
-  legendName.value = pointDesc
+  legendName.value = pointDesc;
  loading.value = false
 }

--- a/src/views/run/calc/index.vue
+++ b/src/views/run/calc/index.vue
@ -145,28 +145,23 @@ async function handlebeforeCalc(record?: Recordable) {
 // 回算
 async function handleCalc(formData: any) {
  calcLoading.value = true
-  console.log('点击回算按钮数据::::', formData)
  // 循环调用后端的回算接口
  for (const record of formData.records) {
    updateTableDataRecord(record.mpId, {calcStatus:1})
-
    rowCalcLoading[record.mpId] = true
-    console.log('行内回算loading状态:', record.mpId, rowCalcLoading[record.mpId])
    try {
      // 调用后端的回算接口 - 行内回算
      formData.mpId = record.mpId
      // 调用后端的回算接口 - 行内回算
      console.log(formData)
      const res = await calcInstant(formData)
-      console.log('回算结果:', res)
-      console.log(record)
      res.calcStatus = 2
      // 更新实例列表
      updateTableDataRecord(record.mpId, res)
      createMessage.success(t('common.successText'))
    } catch (error) {
      updateTableDataRecord(record.mpId, {calcStatus:3})
-      createMessage.error(t('common.failText'))
+      createMessage.error(t('common.errorText'))
    } finally {
      rowCalcLoading[record.mpId] = false
    }
--- a/src/views/run/instant/detail.vue
+++ b/src/views/run/instant/detail.vue
@ -48,7 +48,11 @@ const [registerForm, { getFieldsValue, setProps }] = useForm({
    // data为时间组件在表单内的字段，startTime，endTime为转化后的开始时间于结束时间
    ['time', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss'],
  ],
-  actionColOptions: { span: 2 },
+  actionColOptions: {
+    span: 2,
+  style:{
+    marginLeft:'5px'
+  }},
 })

 const instantId = ref<any>(route.query.mpId) // 获取URL中的query参数
@ -111,8 +115,9 @@ function handleDetail(record) {
  router.push('/run/instant/detail')
 }

-function config(value) {
-  console.log(value)
+
+function handleFaultConfig(field) {
+  console.log(field)
 }
 </script>

@ -169,7 +174,7 @@ function config(value) {
      <BasicForm @register="registerForm" @submit="handleSubmitR">
        <!--  添加button的插槽  -->
        <template #configButton="{ field }">
-          <a-button style="margin-left:20px" @click="config">
+          <a-button @click="handleFaultConfig(field)">
            故障配置
          </a-button>
        </template>
--- a/src/views/run/instant/instant.data.ts
+++ b/src/views/run/instant/instant.data.ts
@ -269,6 +269,9 @@ export const instantForm: FormSchema[] = [
      onChange: (e: any) => {
        console.log(e)
      },
+      colProps: {
+        span: 8,
+      },
    },
  },
  {
@ -276,6 +279,7 @@ export const instantForm: FormSchema[] = [
    field: 'interval',
    component: 'Select',
    defaultValue: 300,
+    labelWidth:100,

    componentProps: {
      options: [{ value: 1, label: '1秒' }, { value: 10, label: '10秒' }, { value: 100, label: '100秒' }, { value: 300, label: '300秒' }],
@ -285,24 +289,17 @@ export const instantForm: FormSchema[] = [
      span: 3,
    },
  },
-  {
-    label: '',
-    field: '0',
-    component: 'Input',
-    slot: 'configButton',
-    colProps: {
-      span: 2,
-    },

-  },
  {
    label: '复盘',
    field: 'fp',
+    labelWidth:100,
    component: 'RadioGroup',
    defaultValue: 0,
-
+    colProps: {
+      span: 5,
+    },
    componentProps: {
-
      options: [
        {
          label: '是',
@ -317,6 +314,15 @@ export const instantForm: FormSchema[] = [
    required: true,

  },
+  {
+    label: '',
+    field: 'faultConfig',
+    component: 'Input',
+    slot: 'configButton',
+    colProps: {
+      span: 2,
+    }
+  }
 ]

 export const searchFormSchemaModel: FormSchema[] = [
--- a/src/views/warn/alarm/TrendModal.vue
+++ b/src/views/warn/alarm/TrendModal.vue
@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import moment from 'moment'
+
+import { Card } from 'ant-design-vue'
+import { formTrend } from './alarm.data'
+ import HistoryLine from '../../exa/HistoryLine.vue'
+
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { BasicForm, useForm } from '@/components/Form'
+
+import { getExaHistorys } from '@/api/alert/exa'
+import {WarnTrendReqVO, getWarnTrend, EXAHistoryReqVO} from "@/api/alert/warn";
+
+const props = defineProps<{
+  warnId: string,
+}>()
+
+const loading = ref(true)
+
+const [registerForm, { getFieldsValue }] = useForm({
+  labelWidth: 100,
+  // baseColProps: { span: 24 },
+  schemas: formTrend,
+  showResetButton: false,
+  layout: 'horizontal',
+  model: { time: [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')] },
+  fieldMapToTime: [
+    // data为时间组件在表单内的字段，startTime，endTime为转化后的开始时间于结束时间
+    ['time', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss'],
+  ],
+  actionColOptions: { span: 3 },
+})
+const trendData = ref([])
+const legendName = ref([])
+const title = ref('')
+const [registerHistoryModal, { setModalProps }] = useModalInner(async (data) => {
+  console.log(543)
+  setModalProps({ confirmLoading: false, showCancelBtn: false, showOkBtn: false })
+  handleSubmitR()
+})
+
+async function handleSubmitR() {
+  const serachFormData = getFieldsValue() as EXAHistoryReqVO
+
+
+  loading.value = true
+//拿到表单值
+  const params:WarnTrendReqVO={
+    id:props.warnId,
+    exaHistoryReqVO:serachFormData
+  }
+
+ const result = await getWarnTrend(params)
+  console.log(result)
+  trendData.value=result.valueList;
+  legendName.value=result.tagList;
+  title.value=result.gzpName;
+  loading.value = false
+}
+</script>
+
+<template>
+  <BasicModal :min-height="300" v-bind="$attrs" :title="title" width="60%" @register="registerHistoryModal">
+    <BasicForm @register="registerForm" @submit="handleSubmitR" />
+    <Card :loading="loading">
+      <HistoryLine :data="trendData" :name="legendName" height="40vh" />
+    </Card>
+  </BasicModal>
+</template>
--- a/src/views/warn/alarm/alarm.data.ts
+++ b/src/views/warn/alarm/alarm.data.ts
@ -4,6 +4,7 @@ import {h, ref} from "vue";
 import {systemSelectParams} from "@/api/alert/model/model/optionsModel";
 import {FileItem, UploadResultStatus} from "@/components/Upload/src/typing";
 import {Progress} from "ant-design-vue";
+import moment from "moment/moment";
 const optionList = await optionListApi()

 const systemOptions = ref<any>([])
@ -189,3 +190,42 @@ export const columns: BasicColumn[] = [
    width: 100,
  }
 ]
+
+
+export const formTrend: FormSchema[] = [
+  {
+    label: '时间',
+    field: 'time',
+    show: true,
+    component: 'RangePicker',
+    componentProps: {
+      placeholder: ['开始时间', '结束时间'],
+      defaultValue: [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')],
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      showTime: {
+        defaultValue: [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')],
+      },
+      onChange: (e: any) => {
+        console.log(e)
+      },
+      colProps: {
+        span: 8,
+      },
+    },
+  },
+  {
+    label: '时间间隔',
+    field: 'interval',
+    component: 'Select',
+    defaultValue: 60,
+    labelWidth:100,
+    componentProps: {
+      options: [{ value: 60, label: '60秒' }, { value: 100, label: '100秒' }, { value: 300, label: '300秒' }],
+    },
+    required: true,
+    colProps: {
+      span: 5,
+    },
+  },
+]
+
--- a/src/views/warn/alarm/index.vue
+++ b/src/views/warn/alarm/index.vue
@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { Switch } from 'ant-design-vue'
-import { onMounted } from 'vue'
+import { onMounted,ref } from 'vue'

 import { useRoute } from 'vue-router'
 import { columns, searchFormSchema } from './alarm.data'
 import UpdateModal from '../../run/instant/warnConfig/UpdateModal.vue'
-
+import TrendModal from './TrendModal.vue'
 import { BasicTable, TableAction, useTable } from '@/components/Table'
-import { getWarnPageReal, updateWarn } from '@/api/alert/warn'
+import {getWarnPageReal, updateWarn, warnTrendReqVO} from '@/api/alert/warn'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { IconEnum } from '@/enums/appEnum'
@ -20,6 +20,8 @@ const route = useRoute()
 const { createMessage } = useMessage()
 const { t } = useI18n()
 const [registerUpdateModal, { openModal: openUpdateModal }] = useModal()
+const [registerTrendModal, { openModal: openTrendModal }] = useModal()
+
 const [registerTable, { getForm, reload, getDataSource, updateTableDataRecord }] = useTable({
  title: '集中告警列表',
  api: getWarnPageReal,
@ -63,6 +65,13 @@ function handleUpdate(record: Recordable) {
  openUpdateModal(true, { record, isUpdate: true })
 }

+const warnId=ref<string>();
+async function handleTrend(record: Recordable) {
+  console.log(record)
+  warnId.value=record.warnId;
+  openTrendModal(true, { record })
+
+}
 onMounted(async () => {
  const { setFieldsValue } = getForm()
  await setFieldsValue({ system: null })
@ -78,7 +87,7 @@ onMounted(async () => {
            :actions="[

              { icon: IconEnum.EDIT,  label: t('action.edit'), onClick: handleUpdate.bind(null, record) },
-              { icon: IconEnum.TREND, label: t('action.trend'), onClick: handleUpdate.bind(null, record) },
+              { icon: IconEnum.TREND, label: t('action.trend'), onClick: handleTrend.bind(null, record) },
              { icon: IconEnum.DETAIL, label: t('action.detail'), onClick: handleUpdate.bind(null, record) },

            ]"
@ -87,6 +96,7 @@ onMounted(async () => {
      </template>
    </BasicTable>
    <UpdateModal @register="registerUpdateModal" @success="reload" />
+    <TrendModal @register="registerTrendModal" :warnId="warnId"/>
  </div>
 </template>