| | |
| | | :model="dataForm" |
| | | @keydown.enter="getDataList()" |
| | | > |
| | | <el-form-item> |
| | | <el-form-item label="开始时间"> |
| | | <el-date-picker |
| | | size="mini" |
| | | v-model="dataForm.startTime" |
| | | format="YYYY-MM-DD HH:mm:00" |
| | | value-format="YYYY-MM-DD HH:mm:00" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="选择日期时间" |
| | | /> |
| | | :clearable="false" |
| | | placeholder="选择日期时间"/> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-form-item label="结束时间"> |
| | | <el-date-picker |
| | | size="mini" |
| | | v-model="dataForm.endTime" |
| | | format="YYYY-MM-DD HH:mm:00" |
| | | value-format="YYYY-MM-DD HH:mm:00" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="选择日期时间" |
| | | /> |
| | | :clearable="false" |
| | | placeholder="选择日期时间"/> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button @click="getDataList()">查询</el-button> |
| | |
| | | import {ref} from 'vue'; |
| | | import * as echarts from 'echarts'; |
| | | import * as DaPoint from '@/api/data/da/point/daPointChart' |
| | | import {getYMDHM0} from "@/utils/dateUtil" |
| | | import download from "@/utils/download"; |
| | | const message = useMessage() // 消息弹窗 |
| | | const visible = ref(false); |
| | | const chartDom = ref(null); |
| | | let myChart = null; |
| | | const chartParams = reactive({ |
| | | codes:[], |
| | | startDate : undefined, |
| | | endDate: undefined, |
| | | }) |
| | | const dataForm = ref({ |
| | | id: "", |
| | | pointNo: "", |
| | | pointName: "", |
| | | pointTypeName: "", |
| | | startTime: getYMDHMS(), |
| | | endTime: undefined, |
| | | startTime: getYMDHM0(new Date() - 60 * 60 * 1000), |
| | | endTime: "", |
| | | }); |
| | | const queryParams = reactive({ |
| | | pointNo: "", |
| | | start: undefined, |
| | | end: undefined, |
| | | }) |
| | | function getYMDHMS() { |
| | | let timestamp = new Date().getTime(); |
| | | let time = new Date(timestamp - 1000 * 60 * 30); |
| | | let year = time.getFullYear(); |
| | | let month = (time.getMonth() + 1).toString(); |
| | | let date = time.getDate().toString(); |
| | | let hours = time.getHours().toString(); |
| | | let minute = time.getMinutes().toString(); |
| | | |
| | | if (month < 10) { |
| | | month = "0" + month; |
| | | } |
| | | if (date < 10) { |
| | | date = "0" + date; |
| | | } |
| | | if (hours < 10) { |
| | | hours = "0" + hours; |
| | | } |
| | | if (minute < 10) { |
| | | minute = "0" + minute; |
| | | } |
| | | return ( |
| | | year + |
| | | "-" + |
| | | month + |
| | | "-" + |
| | | date + |
| | | " " + |
| | | hours + |
| | | ":" + |
| | | minute + |
| | | ":" + |
| | | "00" |
| | | ); |
| | | } |
| | | /** 打开弹窗 */ |
| | | const open = async (row: object) => { |
| | | visible.value = true |
| | | dataForm.value.id = row.id; |
| | | dataForm.value.pointNo = row.pointNo; |
| | | dataForm.value.pointName = row.pointName; |
| | | dataForm.value.startTime = getYMDHMS(); |
| | | dataForm.value.endTime = ""; |
| | | getDataList(); |
| | | } |
| | | |
| | |
| | | visible.value = true; |
| | | if (dataForm.value.id) { |
| | | try { |
| | | queryParams.pointNo=dataForm.value.pointNo; |
| | | queryParams.start = dataForm.value.startTime; |
| | | queryParams.end = dataForm.value.endTime; |
| | | const data = await DaPoint.getPointDaChart(queryParams) |
| | | const dataList = []; |
| | | const xAxisData = []; |
| | | data[dataForm.value.pointNo].forEach(function (value) { |
| | | // 判断数据是否为布尔型 |
| | | if (typeof value["value"] === "boolean") { |
| | | value["value"] = value["value"]? 1 : 0; |
| | | } |
| | | dataList.push([value["time"], value["value"]]); |
| | | xAxisData.push(value["time"]); |
| | | }); |
| | | let seriesData = []; |
| | | seriesData.push({ |
| | | name: "采集值", |
| | | type: "line", |
| | | data: dataList, |
| | | showSymbol: false, |
| | | smooth: false, |
| | | lineStyle: { |
| | | normal: { |
| | | color: "#5B8FF9", |
| | | width: 1, |
| | | chartParams.codes=[dataForm.value.pointNo]; |
| | | chartParams.startDate = dataForm.value.startTime; |
| | | chartParams.endDate = dataForm.value.endTime; |
| | | const data = await DaPoint.getPointDaChart(chartParams) |
| | | let seriesData = [] |
| | | data.series.forEach(item => { |
| | | seriesData.push({ |
| | | name: item.name, |
| | | type: "line", |
| | | data: item.data, |
| | | showSymbol: true, |
| | | smooth: false, |
| | | lineStyle: { |
| | | normal: { |
| | | color: "#5B8FF9", |
| | | width: 1, |
| | | }, |
| | | }, |
| | | }, |
| | | }); |
| | | }); |
| | | }) |
| | | |
| | | myChart = echarts.init(chartDom.value); |
| | | const option = { |
| | | title: { |
| | |
| | | xAxis: { |
| | | type: "category", |
| | | boundaryGap: false, |
| | | data: xAxisData, |
| | | data: data.categories, |
| | | }, |
| | | yAxis: { |
| | | type: "value", |
| | |
| | | ], |
| | | series: seriesData, |
| | | }; |
| | | myChart.clear(); |
| | | myChart.setOption(option); |
| | | } catch (error) { |
| | | console.error(error) |
| | |
| | | /** 导出按钮操作 */ |
| | | const exportLoading = ref(false) |
| | | const handleExport = async () => { |
| | | queryParams.pointNos=[dataForm.value.pointNo]; |
| | | queryParams.start = dataForm.value.startTime; |
| | | queryParams.end = dataForm.value.endTime; |
| | | chartParams.codes=[dataForm.value.pointNo]; |
| | | chartParams.startDate = dataForm.value.startTime; |
| | | chartParams.endDate = dataForm.value.endTime; |
| | | try { |
| | | // 导出的二次确认 |
| | | await message.exportConfirm() |
| | | // 发起导出 |
| | | exportLoading.value = true |
| | | const data = await DaPoint.exportDaPointValue(queryParams) |
| | | const data = await DaPoint.exportDaPointValue(chartParams) |
| | | download.excel(data, dataForm.value.pointName +'.xls') |
| | | } catch { |
| | | } finally { |