You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.4 KiB
106 lines
3.4 KiB
<script lang="ts" setup>
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
import type { Dayjs } from 'dayjs'
|
|
import moment from 'moment'
|
|
import { Button, Card, Empty, Form, FormItem, RangePicker, Space, message } from 'ant-design-vue'
|
|
import HistoryLine from '../HistoryLine.vue'
|
|
import PointModal from './PointModal.vue'
|
|
import { getExaHistorys } from '@/api/alert/exa'
|
|
import { useModal } from '@/components/Modal'
|
|
|
|
interface FormState {
|
|
publishTime: any[]
|
|
}
|
|
const searchForm = reactive<FormState>({
|
|
publishTime: [],
|
|
})
|
|
const loading = ref(true)
|
|
|
|
function onRangeChange(value: [Dayjs, Dayjs], dateString: [string, string]) {
|
|
console.log('Selected Time: ', value)
|
|
console.log('Formatted Selected Time: ', dateString)
|
|
}
|
|
|
|
function onRangeOk(value: [Dayjs, Dayjs]) {
|
|
console.log('onOk: ', value)
|
|
console.log(searchForm.publishTime)
|
|
searchForm.publishTime = value
|
|
}
|
|
|
|
const selectedData = ref<Recordable[]>([])
|
|
interface RowKeys {
|
|
selectedRowKeys: number[]
|
|
}
|
|
const state = reactive<RowKeys>({
|
|
selectedRowKeys: [],
|
|
})
|
|
onMounted(() => {
|
|
getHistoryChart()
|
|
})
|
|
|
|
const historyData = ref()
|
|
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
|
|
|
|
if (pointCodeList.length === 0)
|
|
message.info('暂无测点')
|
|
|
|
const pointCode = selectedData.value.map(item => (item.itemName)).join(',')
|
|
const pointDesc: any[] = selectedData.value.map(item => (item.descriptor))
|
|
|
|
const exaHistoryReqVO = {
|
|
startTime: searchForm.publishTime[0],
|
|
endTime: searchForm.publishTime[1],
|
|
itemName: pointCode,
|
|
interval: 100,
|
|
}
|
|
historyData.value = await getExaHistorys(exaHistoryReqVO)
|
|
legendName.value = pointDesc
|
|
loading.value = false
|
|
}
|
|
|
|
const [registerPointModal, { openModal: openPointModal }] = useModal()
|
|
function handlePointModal() {
|
|
openPointModal(true)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Card>
|
|
<Form layout="inline" :model="searchForm">
|
|
<FormItem label="时间范围">
|
|
<RangePicker
|
|
:model="searchForm.publishTime"
|
|
:show-time="{ format: 'HH:mm:ss' }"
|
|
:placeholder="['开始时间', '结束时间']" :default-value="[moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
@change="onRangeChange"
|
|
@ok="onRangeOk"
|
|
/>
|
|
</FormItem>
|
|
<FormItem>
|
|
<Space wrap>
|
|
<Button type="primary" @click="getHistoryChart">
|
|
查看趋势
|
|
</Button>
|
|
<Button @click="handlePointModal">
|
|
测点配置
|
|
</Button>
|
|
</Space>
|
|
</FormItem>
|
|
</Form>
|
|
</Card>
|
|
<Card style="margin:5px" :loading="loading">
|
|
<HistoryLine :data="historyData" :name="legendName" height="70vh" />
|
|
</Card>
|
|
<PointModal :selected-row-keys="state.selectedRowKeys" :selected-data="selectedData" @register="registerPointModal" @success="getHistoryChart" />
|
|
</div>
|
|
</template>
|
|
|