alert-front/src/views/warn/alarm/TrendModal.vue

<script lang="ts" setup>
import { ref } from 'vue'
import moment from 'moment'

import { Card } from 'ant-design-vue'
import { formHistory } from '../../exa/exa.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: formHistory,
  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>