From 6940bdec72ef961c2103947986bf30eaf2341205 Mon Sep 17 00:00:00 2001
From: dengzedong <dengzedong@email>
Date: 星期一, 23 十二月 2024 17:28:52 +0800
Subject: [PATCH] MergeItem
---
src/views/data/point/DaPointChart.vue | 220 ++++++++++++++++++++++++++++--------------------------
1 files changed, 114 insertions(+), 106 deletions(-)
diff --git a/src/views/data/point/DaPointChart.vue b/src/views/data/point/DaPointChart.vue
index 6b4d88f..caaa271 100644
--- a/src/views/data/point/DaPointChart.vue
+++ b/src/views/data/point/DaPointChart.vue
@@ -24,8 +24,8 @@
<el-date-picker
size="mini"
v-model="dataForm.endTime"
- format="YYYY-MM-DD HH:mm:ss"
- value-format="YYYY-MM-DD HH:mm:ss"
+ format="YYYY-MM-DD HH:mm:00"
+ value-format="YYYY-MM-DD HH:mm:00"
type="datetime"
:clearable="false"
placeholder="选择日期时间"/>
@@ -41,57 +41,63 @@
:loading="exportLoading"
v-hasPermi="['data:point:export']"
>
- <Icon icon="ep:download" />导出
+ <Icon icon="ep:download"/>
+ 导出
</el-button>
</el-form-item>
</el-form>
- <div ref="chartDom" class="result-chart"></div>
+ <div ref="chartDom" class="result-chart" v-loading="loading"></div>
</el-dialog>
</template>
<script lang="ts" setup>
- import {ref} from 'vue';
- import * as echarts from 'echarts';
- import * as DaPoint from '@/api/data/da/point/daPointChart'
- import {getYMDHMS} 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(new Date() - 60 * 60 * 1000),
- endTime: "",
- });
+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 open = async (row: object) => {
- visible.value = true
- dataForm.value.id = row.id;
- dataForm.value.pointNo = row.pointNo;
- dataForm.value.pointName = row.pointName;
- getDataList();
- }
+const message = useMessage() // 消息弹窗
+const visible = ref(false);
+const chartDom = ref(null);
+let myChart = null;
+const chartParams = reactive({
+ codes: [],
+ pointNo: undefined,
+ startDate: undefined,
+ endDate: undefined,
+})
+const dataForm = ref({
+ id: "",
+ pointNo: "",
+ pointName: "",
+ pointTypeName: "",
+ startTime: getYMDHM0(new Date() - 60 * 60 * 1000),
+ endTime: "",
+});
- defineExpose({open}) // 提供 open 方法，用于打开弹窗
+/** 打开弹窗 */
+const open = async (row: object) => {
+ visible.value = true
+ dataForm.value.id = row.id;
+ dataForm.value.pointNo = row.pointNo;
+ dataForm.value.pointName = row.pointName;
+ getDataList();
+}
+defineExpose({open}) // 提供 open 方法，用于打开弹窗
+
+ const loading = ref(false)
async function getDataList() {
visible.value = true;
+ loading.value = true
if (dataForm.value.id) {
try {
chartParams.codes=[dataForm.value.pointNo];
chartParams.startDate = dataForm.value.startTime;
chartParams.endDate = dataForm.value.endTime;
const data = await DaPoint.getPointDaChart(chartParams)
+ loading.value = false
let seriesData = []
data.series.forEach(item => {
seriesData.push({
@@ -109,84 +115,86 @@
});
})
- myChart = echarts.init(chartDom.value);
- const option = {
- title: {
- text: dataForm.value.pointName,
- top: 0,
- left: "1%",
- textStyle: {
- fontSize: 14,
+ myChart = echarts.init(chartDom.value);
+ const option = {
+ title: {
+ text: dataForm.value.pointName,
+ top: 0,
+ left: "1%",
+ textStyle: {
+ fontSize: 14,
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "#cccccc",
+ width: "1",
+ type: "dashed",
},
},
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "line",
- lineStyle: {
- color: "#cccccc",
- width: "1",
- type: "dashed",
- },
- },
+ },
+ legend: {
+ show: false,
+ top: 10,
+ },
+ grid: {
+ top: 30,
+ left: "3%",
+ right: "5%",
+ bottom: 10,
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ data: data.categories,
+ },
+ yAxis: {
+ type: "value",
+ },
+ dataZoom: [
+ {
+ type: "inside",
},
- legend: {
- show: false,
- top: 10,
- },
- grid: {
- top: 30,
- left: "3%",
- right: "5%",
- bottom: 10,
- containLabel: true,
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: data.categories,
- },
- yAxis: {
- type: "value",
- },
- dataZoom: [
- {
- type: "inside",
- },
- ],
- series: seriesData,
- };
- myChart.setOption(option);
- } catch (error) {
- console.error(error)
- }
+ ],
+ series: seriesData,
+ };
+ myChart.setOption(option);
+ } catch (error) {
+ console.error(error)
}
}
- /** 导出按钮操作 */
- const exportLoading = ref(false)
- const handleExport = async () => {
- 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(chartParams)
- download.excel(data, dataForm.value.pointName +'.xls')
- } catch {
- } finally {
- exportLoading.value = false
- }
+}
+
+/** 导出按钮操作 */
+const exportLoading = ref(false)
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await DaPoint.exportDaPointValue({
+ pointNo: dataForm.value.pointNo,
+ start: dataForm.value.startTime,
+ end: dataForm.value.endTime
+ })
+ download.excel(data, dataForm.value.pointName + '.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
}
+}
</script>
<style>
- .el-select {
- width: 100%;
- }
+.el-select {
+ width: 100%;
+}
- .result-chart {
- height: 500px;
- }
+.result-chart {
+ height: 500px;
+}
</style>
--
Gitblit v1.9.3