From 75f043dfa6660716364e66ee0b3cf99f44255686 Mon Sep 17 00:00:00 2001
From: DYL0109 <dn18191638832@163.com>
Date: 星期三, 16 四月 2025 19:20:36 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop1.0' into dyl_dev
---
zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue | 286 ++++++++++++++++++++++++++-------------------------------
1 files changed, 131 insertions(+), 155 deletions(-)
diff --git a/zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue b/zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue
index c1fde4f..1c4a4ab 100644
--- a/zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue
+++ b/zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue
@@ -4,19 +4,20 @@
<div class="page">
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
<el-form-item label="鏃ユ湡绛涢��" prop="dataTime">
- <el-date-picker v-model="queryParams.dataTime" value-format="YYYY-MM-DD 00:00:00" type="date"
- placeholder="鏃ユ湡绛涢��" style="width: 100%" />
+ <el-date-picker
+ v-model="queryParams.dataTime"
+ value-format="YYYY-MM-DD 00:00:00"
+ type="date"
+ placeholder="鏃ユ湡绛涢��"
+ style="width: 100%"
+ />
</el-form-item>
<el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">
- 鎼滅储
- </el-button>
+ <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button>
<el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
</el-form-item>
<el-form-item>
- <el-button type="primary" icon="Download" @click="handleExport">
- 瀵煎嚭
- </el-button>
+ <el-button type="primary" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button>
</el-form-item>
</el-form>
<div class="chart-box" v-loading="loading">
@@ -28,173 +29,148 @@
</template>
<script setup name="chartModal">
-import * as echarts from "echarts";
-import { getEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor";
-const { proxy } = getCurrentInstance();
-import useSettingsStore from "@/store/modules/settings";
-const settingsStore = useSettingsStore();
-const dialogTableVisible = ref(false);
+import * as echarts from "echarts"
+import { getEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor"
+const { proxy } = getCurrentInstance()
+import useSettingsStore from "@/store/modules/settings"
+const settingsStore = useSettingsStore()
+const dialogTableVisible = ref(false)
const data = reactive({
title: null,
queryParams: {
tagCode: null,
dataTime: null,
},
-});
-const { queryParams, title } = toRefs(data);
-const loading = ref(false);
-defineExpose({ handleOpen });
+})
+const { queryParams, title } = toRefs(data)
+const loading = ref(false)
+defineExpose({ handleOpen })
function handleOpen(row) {
- title.value = row.name;
- dialogTableVisible.value = true;
- queryParams.value.nodeName = row.nodeName;
- queryParams.value.tagCode = row.indexCode;
- queryParams.value.unit = row.unit;
- queryParams.value.name = row.name;
- queryParams.value.dataTime = proxy
- .dayjs(new Date())
- .format("YYYY-MM-DD 00:00:00");
- getList();
+ title.value = row.name
+ dialogTableVisible.value = true
+ queryParams.value.nodeName = row.nodeName
+ queryParams.value.tagCode = row.indexCode
+ queryParams.value.unit = row.unit
+ queryParams.value.name = row.name
+ queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00")
+ getList()
}
function handleClose() {
- dialogTableVisible.value = false;
+ dialogTableVisible.value = false
}
// 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-鍒楄〃
function getList() {
- loading.value = true;
- getEnergyRealTimeMonitor(proxy.addDateRange(queryParams.value)).then(
- (res) => {
- const myChart1 = echarts.init(document.getElementById("Chart1"));
- if (!!res.code && res.code == 200) {
- if (!!res.data) {
- let xdata = [];
- let ydata = [];
- res.data.map((item) => {
- xdata.push(proxy.dayjs(item.name).format("HH:mm"));
- ydata.push(!!item.value ? item.value : 0);
- });
- loading.value = false;
- myChart1.setOption({
- color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
- grid: {
- top: "45",
- left: "6%",
- right: "5%",
- bottom: "10",
- containLabel: true,
- },
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- xAxis: {
- type: "category",
- axisLine: {
- show: true,
- lineStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
- },
- },
- axisTick: {
- show: false,
- },
- splitArea: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
- fontSize: 14,
- padding: [5, 0, 0, 0],
- // formatter: '{value} ml'
- },
- data: xdata,
- },
- yAxis: {
- type: "value",
- name:
- queryParams.value.name +
- (!!queryParams.value.unit
- ? "(" + queryParams.value.unit + ")"
- : ""),
- nameTextStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
- fontSize: 14,
- padding: [0, 0, 5, 0],
- },
- axisLine: {
- show: false,
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: "dashed",
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
- },
- },
- axisTick: {
- show: false,
- },
- splitArea: {
- show: false,
- },
- axisLabel: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
- fontSize: 14,
- },
- },
- series: [
- {
- name: title.value + "鍘嗗彶鏁版嵁鏌ヨ", // ytip
- type: "line",
- barWidth: "27",
- stack: "total",
- data: ydata,
- },
- ],
- });
- }
- window.addEventListener(
- "resize",
- () => {
- myChart1.resize();
+ loading.value = true
+ getEnergyRealTimeMonitor(proxy.addDateRange(queryParams.value)).then((res) => {
+ const myChart1 = echarts.init(document.getElementById("Chart1"))
+ if (!!res.code && res.code == 200) {
+ if (!!res.data) {
+ let xdata = []
+ let ydata = []
+ res.data.map((item) => {
+ xdata.push(proxy.dayjs(item.name).format("HH:mm"))
+ ydata.push(!!item.value ? item.value : 0)
+ })
+ loading.value = false
+ myChart1.setOption({
+ color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
+ grid: {
+ top: "45",
+ left: "6%",
+ right: "5%",
+ bottom: "10",
+ containLabel: true,
},
- { passive: true }
- );
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ xAxis: {
+ type: "category",
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitArea: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ padding: [5, 0, 0, 0],
+ // formatter: '{value} ml'
+ },
+ data: xdata,
+ },
+ yAxis: {
+ type: "value",
+ name: queryParams.value.name + (!!queryParams.value.unit ? "(" + queryParams.value.unit + ")" : ""),
+ nameTextStyle: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ padding: [0, 0, 5, 0],
+ },
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitArea: {
+ show: false,
+ },
+ axisLabel: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ },
+ },
+ series: [
+ {
+ name: title.value + "鍘嗗彶鏁版嵁鏌ヨ", // ytip
+ type: "line",
+ barWidth: "12",
+ stack: "total",
+ data: ydata,
+ },
+ ],
+ })
}
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart1.resize()
+ },
+ { passive: true }
+ )
}
- );
+ })
}
// 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-鎼滅储
function handleQuery() {
- getList();
+ getList()
}
// 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-閲嶇疆
function resetQuery() {
- proxy.resetForm("queryRef");
- (queryParams.value.dataTime = proxy
- .dayjs(new Date())
- .format("YYYY-MM-DD 00:00:00")),
- handleNodeClick(nodeOptions.value[0]);
+ proxy.resetForm("queryRef")
+ ;(queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00")),
+ handleNodeClick(nodeOptions.value[0])
}
// 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-瀵煎嚭
function handleExport() {
@@ -202,7 +178,7 @@
"rtdb/realtimeTrend/export",
queryParams.value,
`${queryParams.value.nodeName}-${queryParams.value.name}_鑳芥簮瀹炴椂鐩戞帶_${new Date().getTime()}.xlsx`
- );
+ )
}
</script>
<style scoped lang="scss">
--
Gitblit v1.9.3