用電即時分佈 (kwh) 取資料
This commit is contained in:
parent
ab007abd72
commit
affc5291f4
@ -5,6 +5,11 @@
|
|||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>EMS</title>
|
<title>EMS</title>
|
||||||
|
<script type="text/javascript" src="/requirejs/config.js?"></script>
|
||||||
|
<script
|
||||||
|
type="text/javascript"
|
||||||
|
src="/module/js/com/tridium/js/ext/require/require.min.js?"
|
||||||
|
></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
127
package-lock.json
generated
127
package-lock.json
generated
@ -8,8 +8,10 @@
|
|||||||
"name": "ems_front",
|
"name": "ems_front",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"dayjs": "^1.11.13",
|
||||||
"echarts": "^5.6.0",
|
"echarts": "^5.6.0",
|
||||||
"element-plus": "^2.9.6",
|
"element-plus": "^2.9.6",
|
||||||
|
"pinia": "^3.0.2",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
@ -969,6 +971,28 @@
|
|||||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
|
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@vue/devtools-kit": {
|
||||||
|
"version": "7.7.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.5.tgz",
|
||||||
|
"integrity": "sha512-S9VAVJYVAe4RPx2JZb9ZTEi0lqTySz2CBeF0wHT5D3dkTLnT9yMMGegKNl4b2EIELwLSkcI9bl2qp0/jW+upqA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@vue/devtools-shared": "^7.7.5",
|
||||||
|
"birpc": "^2.3.0",
|
||||||
|
"hookable": "^5.5.3",
|
||||||
|
"mitt": "^3.0.1",
|
||||||
|
"perfect-debounce": "^1.0.0",
|
||||||
|
"speakingurl": "^14.0.1",
|
||||||
|
"superjson": "^2.2.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@vue/devtools-shared": {
|
||||||
|
"version": "7.7.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.5.tgz",
|
||||||
|
"integrity": "sha512-QBjG72RfpM0DKtpns2RZOxBltO226kOAls9e4Lri6YxS2gWTgL0H+wj1R2K76lxxIeOrqo4+2Ty6RQnzv+WSTQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"rfdc": "^1.4.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@vue/language-core": {
|
"node_modules/@vue/language-core": {
|
||||||
"version": "2.2.8",
|
"version": "2.2.8",
|
||||||
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.8.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.8.tgz",
|
||||||
@ -1224,6 +1248,14 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/birpc": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/birpc/-/birpc-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==",
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/antfu"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/brace-expansion": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
||||||
@ -1279,6 +1311,20 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/copy-anything": {
|
||||||
|
"version": "3.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
|
||||||
|
"integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
|
||||||
|
"dependencies": {
|
||||||
|
"is-what": "^4.1.8"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.13"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/mesqueeb"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/csstype": {
|
"node_modules/csstype": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||||
@ -1288,8 +1334,7 @@
|
|||||||
"node_modules/dayjs": {
|
"node_modules/dayjs": {
|
||||||
"version": "1.11.13",
|
"version": "1.11.13",
|
||||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
|
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
|
||||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
|
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
|
||||||
"license": "MIT"
|
|
||||||
},
|
},
|
||||||
"node_modules/de-indent": {
|
"node_modules/de-indent": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@ -1503,6 +1548,11 @@
|
|||||||
"he": "bin/he"
|
"he": "bin/he"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/hookable": {
|
||||||
|
"version": "5.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
|
||||||
|
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
|
||||||
|
},
|
||||||
"node_modules/is-binary-path": {
|
"node_modules/is-binary-path": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||||
@ -1549,6 +1599,17 @@
|
|||||||
"node": ">=0.12.0"
|
"node": ">=0.12.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/is-what": {
|
||||||
|
"version": "4.1.16",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
|
||||||
|
"integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.13"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/mesqueeb"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/js-tokens": {
|
"node_modules/js-tokens": {
|
||||||
"version": "9.0.1",
|
"version": "9.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
|
||||||
@ -1628,6 +1689,11 @@
|
|||||||
"url": "https://github.com/sponsors/isaacs"
|
"url": "https://github.com/sponsors/isaacs"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/mitt": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||||
|
},
|
||||||
"node_modules/mlly": {
|
"node_modules/mlly": {
|
||||||
"version": "1.7.4",
|
"version": "1.7.4",
|
||||||
"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
|
"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
|
||||||
@ -1722,6 +1788,11 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/perfect-debounce": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
|
||||||
|
},
|
||||||
"node_modules/picocolors": {
|
"node_modules/picocolors": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||||
@ -1741,6 +1812,34 @@
|
|||||||
"url": "https://github.com/sponsors/jonschlinkert"
|
"url": "https://github.com/sponsors/jonschlinkert"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/pinia": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.2.tgz",
|
||||||
|
"integrity": "sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==",
|
||||||
|
"dependencies": {
|
||||||
|
"@vue/devtools-api": "^7.7.2"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/posva"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"typescript": ">=4.4.4",
|
||||||
|
"vue": "^2.7.0 || ^3.5.11"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"typescript": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/pinia/node_modules/@vue/devtools-api": {
|
||||||
|
"version": "7.7.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.5.tgz",
|
||||||
|
"integrity": "sha512-HYV3tJGARROq5nlVMJh5KKHk7GU8Au3IrrmNNqr978m0edxgpHgYPDoNUGrvEgIbObz09SQezFR3A1EVmB5WZg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@vue/devtools-kit": "^7.7.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/pkg-types": {
|
"node_modules/pkg-types": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
|
||||||
@ -1824,6 +1923,11 @@
|
|||||||
"url": "https://github.com/sponsors/jonschlinkert"
|
"url": "https://github.com/sponsors/jonschlinkert"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/rfdc": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
|
||||||
|
"integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="
|
||||||
|
},
|
||||||
"node_modules/rollup": {
|
"node_modules/rollup": {
|
||||||
"version": "4.36.0",
|
"version": "4.36.0",
|
||||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.36.0.tgz",
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.36.0.tgz",
|
||||||
@ -1879,6 +1983,14 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/speakingurl": {
|
||||||
|
"version": "14.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
|
||||||
|
"integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/strip-literal": {
|
"node_modules/strip-literal": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
|
||||||
@ -1892,6 +2004,17 @@
|
|||||||
"url": "https://github.com/sponsors/antfu"
|
"url": "https://github.com/sponsors/antfu"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/superjson": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
|
||||||
|
"dependencies": {
|
||||||
|
"copy-anything": "^3.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/tinyglobby": {
|
"node_modules/tinyglobby": {
|
||||||
"version": "0.2.12",
|
"version": "0.2.12",
|
||||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
|
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
|
||||||
|
|||||||
@ -9,8 +9,10 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"dayjs": "^1.11.13",
|
||||||
"echarts": "^5.6.0",
|
"echarts": "^5.6.0",
|
||||||
"element-plus": "^2.9.6",
|
"element-plus": "^2.9.6",
|
||||||
|
"pinia": "^3.0.2",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,7 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted } from "vue";
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
import * as echarts from "echarts"; // 引入 echarts
|
import * as echarts from "echarts";
|
||||||
|
import useElecStore from "../stores/useElecDemandStore";
|
||||||
|
|
||||||
|
const store = useElecStore();
|
||||||
// 假資料
|
// 假資料
|
||||||
const data = {
|
const data = {
|
||||||
categories: [
|
categories: [
|
||||||
@ -82,22 +84,16 @@ const defaultChartOption = ref({
|
|||||||
|
|
||||||
let chartInstance = null; // 图表实例
|
let chartInstance = null; // 图表实例
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
|
// await store.getElecDataFromBaja();
|
||||||
chartInstance = echarts.init(demand_chart.value);
|
chartInstance = echarts.init(demand_chart.value);
|
||||||
chartInstance.setOption(defaultChartOption.value);
|
chartInstance.setOption(defaultChartOption.value);
|
||||||
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
chartInstance.resize();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (chartInstance) {
|
if (chartInstance) {
|
||||||
chartInstance.dispose();
|
chartInstance.dispose();
|
||||||
}
|
}
|
||||||
window.removeEventListener("resize", () => {
|
|
||||||
chartInstance.resize();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -1,16 +1,36 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted } from "vue";
|
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
import useElecStore from "../stores/useElecDistStore";
|
||||||
|
|
||||||
|
const store = useElecStore();
|
||||||
|
|
||||||
const chartContainer = ref(null);
|
const chartContainer = ref(null);
|
||||||
let chart = null;
|
let chart = null;
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initChart();
|
|
||||||
});
|
|
||||||
|
|
||||||
const initChart = () => {
|
const initChart = () => {
|
||||||
chart = echarts.init(chartContainer.value);
|
chart = echarts.init(chartContainer.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateChart = (elecData) => {
|
||||||
|
if (!chart) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 總用電量
|
||||||
|
// const totalElectricity = elecData.reduce((sum, item) => sum + item.out, 0);
|
||||||
|
|
||||||
|
// 動態生成 data 和 links
|
||||||
|
const chartData = [
|
||||||
|
{ name: "總用電", itemStyle: { color: "#038a77" } },
|
||||||
|
...elecData.map((item) => ({ name: item.displayName })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const chartLinks = elecData.map((item) => ({
|
||||||
|
source: "總用電",
|
||||||
|
target: item.displayName,
|
||||||
|
value: Number(item.out),
|
||||||
|
}));
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@ -24,22 +44,8 @@ const initChart = () => {
|
|||||||
emphasis: {
|
emphasis: {
|
||||||
focus: "adjacency",
|
focus: "adjacency",
|
||||||
},
|
},
|
||||||
data: [
|
data: chartData,
|
||||||
{ name: "總用電", itemStyle: { color: '#038a77' } },
|
links: chartLinks,
|
||||||
{ name: "照明" },
|
|
||||||
{ name: "空調" },
|
|
||||||
{ name: "設備A" },
|
|
||||||
{ name: "設備B" },
|
|
||||||
{ name: "其他" },
|
|
||||||
],
|
|
||||||
|
|
||||||
links: [
|
|
||||||
{ source: "總用電", target: "照明", value: 100 },
|
|
||||||
{ source: "總用電", target: "空調", value: 150 },
|
|
||||||
{ source: "總用電", target: "設備A", value: 80 },
|
|
||||||
{ source: "總用電", target: "設備B", value: 120 },
|
|
||||||
{ source: "總用電", target: "其他", value: 50 },
|
|
||||||
],
|
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "gradient",
|
color: "gradient",
|
||||||
opacity: 0.7,
|
opacity: 0.7,
|
||||||
@ -52,22 +58,30 @@ const initChart = () => {
|
|||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
chart.setOption(option); // 設置圖表配置項
|
chart.setOption(option);
|
||||||
|
|
||||||
// 監聽視窗大小變化，調整圖表尺寸
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
chart.resize();
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 在組件卸載時銷毀圖表實例，釋放資源
|
watch(
|
||||||
|
() => store.elecData,
|
||||||
|
(newElecData) => {
|
||||||
|
if (newElecData && newElecData.length > 0) {
|
||||||
|
updateChart(newElecData);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await store.getElecDataFromBaja();
|
||||||
|
initChart();
|
||||||
|
store.startTimer();
|
||||||
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (chart) {
|
if (chart) {
|
||||||
chart.dispose();
|
chart.clear();
|
||||||
|
store.stopTimer();
|
||||||
}
|
}
|
||||||
window.removeEventListener("resize", () => {
|
|
||||||
chart.resize();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
17
src/main.ts
17
src/main.ts
@ -1,8 +1,11 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from "vue";
|
||||||
import './reset.css'
|
import "./reset.css";
|
||||||
import App from './App.vue'
|
import { createPinia } from "pinia";
|
||||||
import router from './router'
|
import App from "./App.vue";
|
||||||
|
import router from "./router";
|
||||||
|
|
||||||
const app = createApp(App)
|
const pinia = createPinia();
|
||||||
app.use(router)
|
const app = createApp(App);
|
||||||
app.mount('#app')
|
app.use(pinia);
|
||||||
|
app.use(router);
|
||||||
|
app.mount("#app");
|
||||||
|
|||||||
44
src/stores/useElecDemandStore.ts
Normal file
44
src/stores/useElecDemandStore.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { ref } from "vue";
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
// import dayjs from "dayjs";
|
||||||
|
import type { NiagaraElecData } from "../utils/types";
|
||||||
|
|
||||||
|
const useElecStore = defineStore("elecData", () => {
|
||||||
|
const elecData = ref<NiagaraElecData[]>([]);
|
||||||
|
|
||||||
|
// get data from baja
|
||||||
|
const getElecDataFromBaja = () => {
|
||||||
|
// @ts-ignore
|
||||||
|
window.require &&
|
||||||
|
// @ts-ignore
|
||||||
|
window.requirejs(["baja!"], (baja: any) => {
|
||||||
|
console.log("進入 bajaSubscriber 準備執行 BQL 訂閱");
|
||||||
|
let eleclist: NiagaraElecData[] = [];
|
||||||
|
baja.Ord.make(
|
||||||
|
`local:|foxs:4912|station:|neql:EMS:kw|bql:select slotPath,parent.displayName,name`
|
||||||
|
).get({
|
||||||
|
cursor: {
|
||||||
|
before: () => {
|
||||||
|
},
|
||||||
|
each: (record: any) => {
|
||||||
|
console.log("record", record);
|
||||||
|
// eleclist.push({
|
||||||
|
// slotPath: record.get("slotPath"),
|
||||||
|
// displayName: record.get("parent$2edisplayName"),
|
||||||
|
// id: record.get("NumericInterval$2ehistoryConfig$2eid").$cEncStr,
|
||||||
|
// out: record.get("out").get("value"),
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
after: () => {
|
||||||
|
elecData.value = eleclist;
|
||||||
|
console.log("Niagara 用電:", elecData.value);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return { getElecDataFromBaja, elecData };
|
||||||
|
});
|
||||||
|
|
||||||
|
export default useElecStore;
|
||||||
127
src/stores/useElecDistStore.ts
Normal file
127
src/stores/useElecDistStore.ts
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
import { ref } from "vue";
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import type { NiagaraElecData } from "../utils/types";
|
||||||
|
|
||||||
|
const useElecStore = defineStore("elecData", () => {
|
||||||
|
const elecData = ref<NiagaraElecData[]>([]);
|
||||||
|
// @ts-ignore
|
||||||
|
let timerId = null;
|
||||||
|
// get data from baja
|
||||||
|
const getElecDataFromBaja = () => {
|
||||||
|
// @ts-ignore
|
||||||
|
window.require &&
|
||||||
|
// @ts-ignore
|
||||||
|
window.requirejs(["baja!"], (baja: any) => {
|
||||||
|
console.log("進入 bajaSubscriber 準備執行 BQL 訂閱");
|
||||||
|
|
||||||
|
// 定義BQL 查詢
|
||||||
|
const subSysKwhBql = `local:|foxs:4918|station:|neql:EMS:SubSys_kwh|bql:select slotPath,parent.displayName,displayName,NumericInterval.historyConfig.id`;
|
||||||
|
|
||||||
|
// 執行各電表的 BQL 查詢
|
||||||
|
fetchElecData(baja, subSysKwhBql);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchElecData = (baja: any, bql: string) => {
|
||||||
|
let eleclist: NiagaraElecData[] = [];
|
||||||
|
baja.Ord.make(bql).get({
|
||||||
|
cursor: {
|
||||||
|
before: () => {},
|
||||||
|
each: (record: any) => {
|
||||||
|
eleclist.push({
|
||||||
|
slotPath: record.get("slotPath"),
|
||||||
|
displayName: record.get("parent$2edisplayName"),
|
||||||
|
id: record.get("NumericInterval$2ehistoryConfig$2eid").$cEncStr,
|
||||||
|
out: 0,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
after: () => {
|
||||||
|
const validElecList = eleclist.filter(
|
||||||
|
(item) => item.id !== undefined
|
||||||
|
);
|
||||||
|
elecData.value = [...elecData.value, ...validElecList];
|
||||||
|
validElecList.forEach((item) => {
|
||||||
|
subscribeToHistory(item);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const subscribeToHistory = (item: NiagaraElecData) => {
|
||||||
|
const startTime = dayjs()
|
||||||
|
.subtract(2, "hour")
|
||||||
|
.format("YYYY-MM-DDTHH:mm:ss.000+08:00"); // 現在時間前2個小時
|
||||||
|
const endTime = dayjs().format("YYYY-MM-DDTHH:mm:ss.000+08:00"); // 現在的時間
|
||||||
|
const id = item.id;
|
||||||
|
console.log(
|
||||||
|
`local:|foxs:4918|history:${id}?period=timerange;start=${startTime};end=${endTime}|bql:history:HistoryRollup.rollup(baja:RelTime '3600000')`
|
||||||
|
);
|
||||||
|
const ordString = `local:|foxs:4918|history:${id}?period=timerange;start=${startTime};end=${endTime}|bql:history:HistoryRollup.rollup(baja:RelTime '3600000')`;
|
||||||
|
// @ts-ignore
|
||||||
|
window.require &&
|
||||||
|
// @ts-ignore
|
||||||
|
window.requirejs(["baja!"], (baja: any) => {
|
||||||
|
console.log("進入 bajaSubscriber 準備執行 BQL 訂閱");
|
||||||
|
let historyData: number[] = [];
|
||||||
|
baja.Ord.make(ordString).get({
|
||||||
|
cursor: {
|
||||||
|
before: () => {
|
||||||
|
console.log(`開始訂閱 ${id} 的歷史資料`);
|
||||||
|
},
|
||||||
|
each: (record: any) => {
|
||||||
|
let currentValue = record.get("min");
|
||||||
|
historyData.push(currentValue);
|
||||||
|
},
|
||||||
|
after: () => {
|
||||||
|
const diff = historyData[historyData.length - 1] - historyData[0];
|
||||||
|
console.log(
|
||||||
|
`收到 ${id} 的歷史資料: 最後一筆減第一筆的值為:`,
|
||||||
|
diff
|
||||||
|
);
|
||||||
|
|
||||||
|
elecData.value = elecData.value.map((elec) => {
|
||||||
|
if (elec.id === id) {
|
||||||
|
console.log(`更新 ${id} 的 out 值為:`, diff);
|
||||||
|
return { ...elec, out: diff };
|
||||||
|
}
|
||||||
|
return elec;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 定時更新資料的函數
|
||||||
|
const updateHistoryData = () => {
|
||||||
|
console.log("定時器觸發，重新獲取歷史資料");
|
||||||
|
if (elecData.value && elecData.value.length > 0) {
|
||||||
|
elecData.value.forEach((item) => {
|
||||||
|
subscribeToHistory(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 啟動定時器
|
||||||
|
const startTimer = () => {
|
||||||
|
timerId = setInterval(() => {
|
||||||
|
updateHistoryData();
|
||||||
|
}, 60 * 1000); // 每小時執行一次
|
||||||
|
};
|
||||||
|
|
||||||
|
// 停止定時器
|
||||||
|
const stopTimer = () => {
|
||||||
|
// @ts-ignore
|
||||||
|
if (timerId) {
|
||||||
|
clearInterval(timerId);
|
||||||
|
timerId = null;
|
||||||
|
console.log("計時器已停止");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { getElecDataFromBaja, startTimer, stopTimer, elecData };
|
||||||
|
});
|
||||||
|
|
||||||
|
export default useElecStore;
|
||||||
59
src/stores/useElecStore copy.ts
Normal file
59
src/stores/useElecStore copy.ts
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { ref } from "vue";
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
// import dayjs from "dayjs";
|
||||||
|
import type { NiagaraElecData } from "../utils/types";
|
||||||
|
|
||||||
|
const useElecStore = defineStore("elecData", () => {
|
||||||
|
// @ts-ignore
|
||||||
|
let timer = null;
|
||||||
|
const elecData = ref<NiagaraElecData[]>([]);
|
||||||
|
|
||||||
|
// get data from baja
|
||||||
|
const getElecDataFromBaja = () => {
|
||||||
|
// @ts-ignore
|
||||||
|
window.require &&
|
||||||
|
// @ts-ignore
|
||||||
|
window.requirejs(["baja!"], (baja: any) => {
|
||||||
|
console.log("進入 bajaSubscriber 準備執行 BQL 訂閱");
|
||||||
|
let eleclist: NiagaraElecData[] = [];
|
||||||
|
baja.Ord.make(
|
||||||
|
`local:|foxs:4912|station:|neql:EMS:SubSys_kwh|bql:select slotPath,parent.displayName,name,out`
|
||||||
|
).get({
|
||||||
|
cursor: {
|
||||||
|
before: () => {
|
||||||
|
timer = null;
|
||||||
|
},
|
||||||
|
each: (record: any) => {
|
||||||
|
console.log("record", record);
|
||||||
|
eleclist.push({
|
||||||
|
slotPath: record.get("slotPath"),
|
||||||
|
displayName: record.get("parent$2edisplayName"),
|
||||||
|
id: record.get("NumericInterval$2ehistoryConfig$2eid").$cEncStr,
|
||||||
|
out: record.get("out").get("value"),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
after: () => {
|
||||||
|
elecData.value = eleclist;
|
||||||
|
console.log("Niagara 用電:", elecData.value);
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
getElecDataFromBaja();
|
||||||
|
}, 30000);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearElecDataFromBaja = () => {
|
||||||
|
// @ts-ignore
|
||||||
|
if (timer) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = null;
|
||||||
|
console.log("Timeout 已清除");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { getElecDataFromBaja, clearElecDataFromBaja, elecData };
|
||||||
|
});
|
||||||
|
|
||||||
|
export default useElecStore;
|
||||||
7
src/utils/types.ts
Normal file
7
src/utils/types.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
// Niagara 用電數據類型定義
|
||||||
|
export interface NiagaraElecData {
|
||||||
|
slotPath: string;
|
||||||
|
displayName: string;
|
||||||
|
id: string;
|
||||||
|
out: number;
|
||||||
|
}
|
||||||
@ -2,7 +2,7 @@
|
|||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-card style="border-radius: 8px">
|
<el-card style="border-radius: 8px">
|
||||||
<h3 class="">用電即時分佈</h3>
|
<h3 class="">用電即時分佈 (kwh)</h3>
|
||||||
<EnergySankey />
|
<EnergySankey />
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -65,7 +65,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, computed } from "vue";
|
import { onMounted, ref, computed, onUnmounted } from "vue";
|
||||||
import EnergySankey from "../components/EnergySankey.vue";
|
import EnergySankey from "../components/EnergySankey.vue";
|
||||||
import EnergyLine from "../components/EnergyLine.vue";
|
import EnergyLine from "../components/EnergyLine.vue";
|
||||||
import EnergyBar from "../components/EnergyBar.vue";
|
import EnergyBar from "../components/EnergyBar.vue";
|
||||||
@ -208,6 +208,8 @@ const areaBillingData = ref({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -8,9 +8,10 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
|
|||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
base:
|
base:
|
||||||
process.env.NODE_ENV === "production"
|
process.env.NODE_ENV === "production"
|
||||||
? "https://192.168.0.206:8500/file/ibms_ems_dist/"
|
? "https://192.168.0.206:8500/file/ems_dist/"
|
||||||
: "/",
|
: "/",
|
||||||
build: {
|
build: {
|
||||||
|
outDir: process.env.NODE_ENV === "production" ? "../ems_dist" : "./dist",
|
||||||
emptyOutDir: true,
|
emptyOutDir: true,
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user