Merge branch 'main' into feature/system
This commit is contained in:
commit
773520a7c8
@ -1,3 +1,3 @@
|
||||
VITE_API_BASEURL = "http://192.168.0.206:8060"
|
||||
VITE_FILE_API_BASEURL = ""
|
||||
VITE_FILE_API_BASEURL = "http://192.168.0.206:8088"
|
||||
VITE_FORGE_BASEURL = "http://localhost:5173"
|
||||
@ -1,3 +1,3 @@
|
||||
VITE_API_BASEURL = "http://220.132.206.5:8060"
|
||||
VITE_FILE_API_BASEURL = "http://220.132.206.5:8085/file"
|
||||
VITE_API_BASEURL = "http://192.168.0.206:8060"
|
||||
VITE_FILE_API_BASEURL = "http://192.168.0.206:8088"
|
||||
VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"
|
||||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@ -1,221 +1,79 @@
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
defineProps,
|
||||
computed,
|
||||
onUnmounted,
|
||||
watch,
|
||||
provide,
|
||||
} from "vue";
|
||||
import { getUrn, getAccessToken } from "@/apis/forge";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import hexToRgb from "@/util/hexToRgb";
|
||||
import getModalPosition from "@/util/getModalPosition";
|
||||
import useSystemStatusByBaja from "@/hooks/baja/useSystemStatusByBaja";
|
||||
import ForgeInfoModal from "./ForgeInfoModal.vue";
|
||||
import useAlarmStore from "@/stores/useAlarmStore";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
initialData: Object,
|
||||
cubeStyle: {
|
||||
type: Object,
|
||||
default: {
|
||||
right: 25,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const heat_bar_isShow = ref(false);
|
||||
const updateHeatBarIsShow = (isShow) => {
|
||||
heat_bar_isShow.value = isShow;
|
||||
};
|
||||
|
||||
const {
|
||||
subscribeData,
|
||||
visibleDbid,
|
||||
updateDbidPosition,
|
||||
hideAllObjects,
|
||||
updateForgeViewer,
|
||||
urn,
|
||||
loadModel,
|
||||
updateInitialData,
|
||||
subComponents,
|
||||
} = useSystemStatusByBaja(updateHeatBarIsShow);
|
||||
|
||||
watch(
|
||||
() => props.initialData,
|
||||
(newValue) => {
|
||||
newValue && updateInitialData(newValue);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
const store = useAlarmStore();
|
||||
const subscribeDataWithErrorMsg = computed(() => {
|
||||
let data = { ...subscribeData.value };
|
||||
|
||||
for (let [key, value] of Object.entries(subscribeData.value)) {
|
||||
const alarm = store.alarmData.find(
|
||||
({ device_number }) => device_number === key
|
||||
);
|
||||
data[key].alarmMsg = alarm ? alarm.msg : "";
|
||||
}
|
||||
console.log("baja update data: ", data);
|
||||
return data;
|
||||
});
|
||||
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
|
||||
|
||||
const forgeDom = ref(null);
|
||||
let viewer = null;
|
||||
|
||||
// 初始化 Forge Viewer
|
||||
const initViewer = (container) => {
|
||||
return new Promise(function (resolve, reject) {
|
||||
Autodesk.Viewing.Initializer({ getAccessToken }, function () {
|
||||
const config = {
|
||||
extensions: ["Autodesk.DataVisualization", "Autodesk.DocumentBrowser"],
|
||||
};
|
||||
let viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
|
||||
Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
|
||||
viewer.start();
|
||||
resolve(viewer);
|
||||
});
|
||||
Autodesk.Viewing.Initializer(
|
||||
{
|
||||
env: "Local",
|
||||
language: "en",
|
||||
},
|
||||
function () {
|
||||
const config = {
|
||||
extensions: [
|
||||
"Autodesk.DataVisualization",
|
||||
"Autodesk.DocumentBrowser",
|
||||
],
|
||||
};
|
||||
viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
|
||||
Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
|
||||
viewer.start();
|
||||
viewer.setGroundShadow(false);
|
||||
viewer.impl.renderer().setClearAlpha(0);
|
||||
viewer.impl.glrenderer().setClearColor(0xffffff, 0);
|
||||
viewer.impl.invalidate(true);
|
||||
resolve(viewer);
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const initForge = () => {
|
||||
getUrn().then((res) => {
|
||||
if (!res.isSuccess) return;
|
||||
urn.value = res.data[0].urn_3D;
|
||||
initViewer(forgeDom.value).then((viewer) => {
|
||||
loadModel(viewer, res.data[0].urn_3D).then(() => {
|
||||
viewer.addEventListener(
|
||||
Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
|
||||
async function () {
|
||||
console.log(
|
||||
"Autodesk.Viewing.GEOMETRY_LOADED_EVENT",
|
||||
viewer.isLoadDone()
|
||||
);
|
||||
updateForgeViewer(viewer);
|
||||
|
||||
const tree = viewer.model.getData().instanceTree;
|
||||
hideAllObjects(tree, visibleDbid.value);
|
||||
}
|
||||
);
|
||||
viewer.addEventListener(
|
||||
Autodesk.Viewing.CAMERA_CHANGE_EVENT,
|
||||
function (e) {
|
||||
viewer.isLoadDone() &&
|
||||
updateDbidPosition(this, subscribeData.value);
|
||||
console.log(
|
||||
"camera position changed: ",
|
||||
NOP_VIEWER.navigation.getTarget(),
|
||||
e.camera.position
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
});
|
||||
// 使用本地 .svf 文件加載模型
|
||||
const loadModel = (filePath) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
viewer.loadModel(
|
||||
filePath,
|
||||
{},
|
||||
(model) => {
|
||||
viewer.impl.invalidate(true);
|
||||
viewer.fitToView();
|
||||
resolve(model);
|
||||
console.log("模型加載完成");
|
||||
},
|
||||
reject
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
console.log("Forge 加載");
|
||||
initForge();
|
||||
await initViewer(forgeDom.value);
|
||||
const filePath = `${FILE_BASEURL}/upload/forge/0.svf`;
|
||||
loadModel(filePath);
|
||||
});
|
||||
|
||||
// 傳遞目前點擊資訊
|
||||
const currentInfoModalData = ref(null);
|
||||
const isMobile = (pointerType) => {
|
||||
return pointerType !== "mouse"; // is desktop
|
||||
};
|
||||
const getCurrentInfoModalData = (e, position, value) => {
|
||||
const mobile = isMobile(e.pointerType);
|
||||
currentInfoModalData.value = {
|
||||
initPos: mobile
|
||||
? { left: `50%`, top: `50%` }
|
||||
: { left: `${position.left}px`, top: `${position.top}px` },
|
||||
value,
|
||||
isMobile: mobile,
|
||||
};
|
||||
forge_info_modal.showModal();
|
||||
};
|
||||
onUnmounted(() => {
|
||||
console.log("Forge 銷毀");
|
||||
console.log("sub", subComponents);
|
||||
subComponents.value?.unsubscribeAll();
|
||||
subComponents.value?.detach();
|
||||
updateForgeViewer(null);
|
||||
NOP_VIEWER.tearDown();
|
||||
if (viewer) {
|
||||
viewer.tearDown();
|
||||
viewer.finish();
|
||||
viewer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ForgeInfoModal :data="currentInfoModalData" />
|
||||
<div
|
||||
id="forge-preview"
|
||||
ref="forgeDom"
|
||||
class="relative w-full h-full min-h-full"
|
||||
>
|
||||
<div v-show="heat_bar_isShow" class="absolute z-10 heatbar">
|
||||
<div class="w-40 flex justify-between text-[10px] mb-1">
|
||||
<span class="text-gradient-1">10 °C</span>
|
||||
<span class="text-gradient-2">20 °C</span>
|
||||
<span class="text-gradient-3">30 °C</span>
|
||||
<span class="text-gradient-4">40 °C</span>
|
||||
</div>
|
||||
<div
|
||||
class="w-40 h-3"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#0000ff 0%,
|
||||
#00ff00 33%,
|
||||
#ffff00 66%,
|
||||
#ff0000 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<!-- label -->
|
||||
<!-- https://github.com/augustogoncalves/forge-plant-operation/blob/master/forgeSample/wwwroot/js/iconExtension.js -->
|
||||
<!-- https://github.com/dukedhx/viewer-iot-react-feathersjs/blob/master/src/client/iconExtension.js -->
|
||||
|
||||
<label
|
||||
v-for="(value, key) in subscribeDataWithErrorMsg"
|
||||
:key="key"
|
||||
:data-dbid="value.forge_dbid"
|
||||
:class="
|
||||
twMerge(
|
||||
`after:border-t-[${value.currentColor}]`,
|
||||
'flex items-center justify-center h-12 -translate-x-1/2 -translate-y-1/5 absolute z-50 px-5 py-4 text-center rounded-md text-lg border-2 border-white',
|
||||
'after:absolute after:border-t-[10px] after:border-x-[12px] after:border-x-transparent after:-bottom-[8px] after:left-1/2 after:-translate-x-1/2 ',
|
||||
'before:absolute before:border-t-[12px] before:border-x-[14px] before:border-x-transparent before:-bottom-[12px] before:left-1/2 before:-translate-x-1/2 before:border-white'
|
||||
)
|
||||
"
|
||||
:style="{
|
||||
left: `${Math.floor(value.device_coordinate_3d.x)}px`,
|
||||
top: `${Math.floor(value.device_coordinate_3d.y) - 100}px`,
|
||||
display: value.is_show,
|
||||
backgroundColor: value.currentColor,
|
||||
}"
|
||||
@click.prevent="
|
||||
(e) =>
|
||||
getCurrentInfoModalData(
|
||||
e,
|
||||
{ left: e.clientX, top: e.clientY },
|
||||
value
|
||||
)
|
||||
"
|
||||
>
|
||||
<span class="mr-2">{{ value.full_name }}</span>
|
||||
<span v-if="value.alarmMsg">{{ value.alarmMsg }}</span>
|
||||
<span v-else>{{ value.show_value }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="forge-preview"
|
||||
ref="forgeDom"
|
||||
class="relative w-full h-full min-h-full"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<style lang="css">
|
||||
@ -228,17 +86,4 @@ onUnmounted(() => {
|
||||
bottom: 200px;
|
||||
}
|
||||
|
||||
.viewcubeWrapper {
|
||||
right: v-bind("`${props.cubeStyle.right}%`") !important;
|
||||
top: v-bind("`${props.cubeStyle.top}%`") !important;
|
||||
}
|
||||
|
||||
.homeViewWrapper {
|
||||
transform: scale(1.5) !important;
|
||||
}
|
||||
|
||||
.heatbar {
|
||||
right: v-bind("`${props.cubeStyle.right + 2}%`") !important;
|
||||
top: 0% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -51,7 +51,7 @@ const mockData = ref([
|
||||
<div class="w-20">
|
||||
<img
|
||||
class="w-14 p-2 m-auto"
|
||||
:src="`./src/assets/img/icon/${item.icon}.png`"
|
||||
:src="`./icon/${item.icon}.png`"
|
||||
alt="icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -80,7 +80,7 @@ const getProgressValue = (group) => {
|
||||
<span>{{ group[1].value }}</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress progress-error"
|
||||
class="progress [&::-webkit-progress-value]:bg-red-600 [&::-moz-progress-bar]:bg-red-600"
|
||||
:value="getProgressValue(group)"
|
||||
max="100"
|
||||
size=""
|
||||
|
||||
@ -2,39 +2,37 @@
|
||||
import ImmediateDemandChart from "./components/ImmediateDemandChart.vue";
|
||||
import ElecConsumption from "./components/ElecConsumption.vue";
|
||||
import UsageInformation from "./components/UsageInformation.vue";
|
||||
import ElectricityBillChart from "./components/ElectricityBillChart.vue";
|
||||
import MonthlyElecBillChart from "./components/MonthlyElecBillChart.vue";
|
||||
import CarbonEmissionChart from "./components/CarbonEmissionChart.vue";
|
||||
import BillingDegreeChart from "./components/BillingDegreeChart.vue";
|
||||
|
||||
import IntervalBillChart from "./components/IntervalBillChart.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid gap-4 grid-cols-5 mb-4">
|
||||
<div class="col-span-2">
|
||||
<ElecConsumption />
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<ImmediateDemandChart />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center mb-4">
|
||||
<div class="w-full xl:w-5/12 lg:w-1/2">
|
||||
<ElecConsumption />
|
||||
</div>
|
||||
<div class="grid gap-4 grid-cols-3 mb-4">
|
||||
<div class="col-span-1">
|
||||
<UsageInformation />
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<ElectricityBillChart />
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<BillingDegreeChart />
|
||||
</div>
|
||||
<div class="w-full xl:w-7/12 lg:w-1/2">
|
||||
<ImmediateDemandChart />
|
||||
</div>
|
||||
<div class="grid gap-4 grid-cols-3">
|
||||
<div class="col-span-1">
|
||||
<BillingDegreeChart />
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<ElectricityBillChart />
|
||||
</div>
|
||||
<div class="w-full xl:w-1/3 px-3">
|
||||
<UsageInformation />
|
||||
</div>
|
||||
<div class="w-full xl:w-1/3 px-3">
|
||||
<MonthlyElecBillChart />
|
||||
</div>
|
||||
<div class="w-full xl:w-1/3 px-3">
|
||||
<CarbonEmissionChart />
|
||||
</div>
|
||||
<div class="w-full xl:w-1/3 px-3">
|
||||
<BillingDegreeChart />
|
||||
</div>
|
||||
<div class="w-full xl:w-2/3 px-3">
|
||||
<IntervalBillChart />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-4 grid-cols-3"></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -6,81 +6,101 @@ const defaultChartOption = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['尖峰', '半尖峰', '離峰度數'],
|
||||
data: ["尖峰", "半尖峰", "離峰度數"],
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
orient: "horizontal",
|
||||
orient: "horizontal",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
top: '5%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
top: "5%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
type: "category",
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '尖峰',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500, 5500],
|
||||
name: "尖峰",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
|
||||
5500,
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#3c50e0',
|
||||
color: "#45f4ef",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '半尖峰',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000],
|
||||
name: "半尖峰",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000,
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#6577f3',
|
||||
color: "#ffd345",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '離峰度數',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500],
|
||||
name: "離峰度數",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500,
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#8fd0ef',
|
||||
color: "#64ed81",
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
//
|
||||
//
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-slate-800 w-full h-full rounded-md">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">每月計費度數 (kWh)</h2>
|
||||
<div class="bg-slate-800 p-3">
|
||||
<div class="text-white mb-3 text-base">每月計費度數 (kWh)</div>
|
||||
<div class="bar-box">
|
||||
<BarChart
|
||||
id="billing_degree_chart"
|
||||
class="min-h-[250px]"
|
||||
class="min-h-[200px] w-full h-full"
|
||||
:option="defaultChartOption"
|
||||
ref="degree_chart"
|
||||
/>
|
||||
|
||||
@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import BarChart from "@/components/chart/BarChart.vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const defaultChartOption = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["碳排當量", "減量目標"],
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
orient: "horizontal",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "碳排當量",
|
||||
type: "bar",
|
||||
data: [
|
||||
5400, 6500, 7200, 7500, 9800, 9500, 11200, 11500, 11800, 7500, 6500,
|
||||
5500,
|
||||
],
|
||||
itemStyle: {
|
||||
color: "#45f4ef",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "減量目標",
|
||||
type: "bar",
|
||||
data: [
|
||||
5000, 6000, 6000, 7000, 9500, 9000, 10000, 11000, 10000, 7200, 6000,
|
||||
5000,
|
||||
],
|
||||
itemStyle: {
|
||||
color: "#ffd345",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
//
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-slate-800 p-3">
|
||||
<div class="text-white mb-3 text-base">
|
||||
每月碳排當量 (kgCO2e) 與減量目標
|
||||
</div>
|
||||
<div class="bar-box">
|
||||
<BarChart
|
||||
id="electricity_bill_chart"
|
||||
class="min-h-[200px] w-full h-full"
|
||||
:option="defaultChartOption"
|
||||
ref="bill_chart"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -59,19 +59,34 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-gray-800 h-full rounded-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title relative mb-4">用電即時分佈</h2>
|
||||
<div class="chart-container">
|
||||
<div ref="chartDiv" class="w-full min-h-[250px]"></div>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h2 class="text text-lg text-white mb-5 relative">用電即時分佈</h2>
|
||||
<div class="chart-container">
|
||||
<div ref="chartDiv" class="w-full min-h-[190px] h-full"></div>
|
||||
</div>
|
||||
<div class="text-sm mt-3.5">
|
||||
<ul class="flex flex-wrap items-center text-white">
|
||||
<li class="pr-5 relative z-20">
|
||||
<span class="pr-3.5">總用電 (kWh)</span>
|
||||
<span class="pr-3.5">160.05</span>
|
||||
</li>
|
||||
<li class="pr-5 relative z-20">
|
||||
<span class="pr-3.5">綠電 (kWh)</span>
|
||||
<span class="pr-3.5">39.50</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-title::after {
|
||||
@apply absolute -bottom-2 left-0 h-[1px] w-[60%] bg-slate-400;
|
||||
<style lang="scss" scoped>
|
||||
.text::after {
|
||||
@apply absolute -bottom-2.5 left-0 block w-3/5 h-[1px] bg-slate-600;
|
||||
content: "";
|
||||
}
|
||||
|
||||
ul li:last-child:after {
|
||||
@apply absolute top-0 bottom-0 left-full block w-full h-[1px] bg-slate-600 m-auto z-10;
|
||||
content: "";
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,80 +0,0 @@
|
||||
<script setup>
|
||||
import BarChart from "@/components/chart/BarChart.vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const defaultChartOption = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['基本電費', '流動電費'],
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
orient: "horizontal",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
top: '5%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '基本電費',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500, 5500],
|
||||
itemStyle: {
|
||||
color: '#37c640',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '流動電費',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [15000, 16000, 20000, 21000, 25000, 26000, 30000, 31000, 35000, 27600, 16500, 15000],
|
||||
itemStyle: {
|
||||
color: '#8ee894',
|
||||
},
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
//
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-slate-800 w-full h-full rounded-md">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">每月電費分析</h2>
|
||||
<BarChart
|
||||
id="electricity_bill_chart"
|
||||
class="min-h-[250px]"
|
||||
:option="defaultChartOption"
|
||||
ref="bill_chart"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -113,19 +113,29 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-slate-700 h-full relative rounded-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title flex justify-between">
|
||||
<div class="title">即時需量<span>279.09</span>Kw</div>
|
||||
</h2>
|
||||
<LineChart
|
||||
id="immediate_demand_chart"
|
||||
class="min-h-[250px]"
|
||||
:option="defaultChartOption"
|
||||
ref="demand_chart"
|
||||
/>
|
||||
<div class="p-3">
|
||||
<div class="flex text-white mb-5">
|
||||
<div class="flex items-end text-base relative text mr-32">
|
||||
即時需量
|
||||
<span class="text-2xl px-2.5">245.48 kw</span>
|
||||
</div>
|
||||
<div class="flex items-end text-base">
|
||||
平均需量
|
||||
<span class="text-2xl px-2.5">230.8 kw</span>
|
||||
</div>
|
||||
</div>
|
||||
<LineChart
|
||||
id="immediate_demand_chart"
|
||||
class="w-full h-full min-h-[220px]"
|
||||
:option="defaultChartOption"
|
||||
ref="demand_chart"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.text:after {
|
||||
@apply absolute top-0 -bottom-2.5 left-full block w-28 h-[1px] bg-slate-600 m-auto z-10;
|
||||
content: "";
|
||||
}
|
||||
</style>
|
||||
|
||||
111
src/views/energyManagement/components/IntervalBillChart.vue
Normal file
111
src/views/energyManagement/components/IntervalBillChart.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
import BarChart from "@/components/chart/BarChart.vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const generateDateRange = () => {
|
||||
const dates = [];
|
||||
for (let day = 1; day <= 15; day++) {
|
||||
const formattedDay = day < 10 ? `0${day}` : day;
|
||||
dates.push(`11 / ${formattedDay}`);
|
||||
}
|
||||
return dates;
|
||||
};
|
||||
|
||||
const defaultChartOption = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["尖峰", "半尖峰", "離峰度數"],
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
orient: "horizontal",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: generateDateRange(),
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "尖峰",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
|
||||
5500, 6000, 6200, 5800,
|
||||
],
|
||||
itemStyle: {
|
||||
color: "#3c50e0",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "半尖峰",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000,
|
||||
4200, 4300, 4100,
|
||||
],
|
||||
itemStyle: {
|
||||
color: "#6577f3",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "離峰度數",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500,
|
||||
3700, 3800, 3600,
|
||||
],
|
||||
itemStyle: {
|
||||
color: "#8fd0ef",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
//
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-slate-700 p-3">
|
||||
<div class="text-white mb-3 text-base">
|
||||
區間計費度數 2024 / 11 / 01 ~ 2024 / 11 / 15
|
||||
</div>
|
||||
<div class="bar-box">
|
||||
<BarChart
|
||||
id="billing_degree_chart"
|
||||
class="min-h-[200px] w-full h-full"
|
||||
:option="defaultChartOption"
|
||||
ref="degree_chart"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
112
src/views/energyManagement/components/MonthlyElecBillChart.vue
Normal file
112
src/views/energyManagement/components/MonthlyElecBillChart.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<script setup>
|
||||
import BarChart from "@/components/chart/BarChart.vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const defaultChartOption = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: [ "流動電費","基本電費", "電費總額"],
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
orient: "horizontal",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "流動電費",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
15000, 16000, 20000, 21000, 25000, 26000, 30000, 31000, 35000, 27600,
|
||||
16500, 15000,
|
||||
],
|
||||
itemStyle: {
|
||||
color: "#45f4ef",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "基本電費",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
|
||||
5500,
|
||||
],
|
||||
itemStyle: {
|
||||
color: "#ffd345",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: "電費總額",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
data: [
|
||||
3000, 3000, 4000, 5000, 12000, 17000, 20000, 20000, 12000, 12000, 5000,
|
||||
0,
|
||||
],
|
||||
itemStyle: {
|
||||
color: "#64ed81",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
//
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-slate-800 p-3">
|
||||
<div class="text-white mb-3 text-base">每月用電分析</div>
|
||||
<div class="bar-box">
|
||||
<BarChart
|
||||
id="electricity_bill_chart"
|
||||
class="min-h-[200px] w-full h-full"
|
||||
:option="defaultChartOption"
|
||||
ref="bill_chart"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,35 +1,60 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
// 假資料
|
||||
const dataItems = ref([
|
||||
{ title: "今年電費累計(元)", data: "3,255,458" },
|
||||
{ title: "區間電費(元)", data: "205,110" },
|
||||
{ title: "今年碳排當量累計(公斤)", data: "455,128" },
|
||||
{ title: "區間碳排當量", time: "2023-11-01~2023-11-19", data: "25,351" },
|
||||
{ title: "今年用電度數(kWh)", data: "864,830" },
|
||||
{ title: "區間用電度數(kWh)", time: "2023-11-01~2023-11-19", data: "50,355" },
|
||||
]);
|
||||
|
||||
// 背景顏色處理
|
||||
const getItemBackground = (index) => {
|
||||
return index === 0 || index === 3 || index === 4
|
||||
? "bg-slate-600"
|
||||
: "bg-slate-800";
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div className="stats w-full h-[48%] p-2 mb-4 bg-slate-900 rounded-lg border border-cyan-200/20 shadow-md shadow-cyan-500/20">
|
||||
<!-- 電壓資訊 -->
|
||||
<div className="stat place-items-start">
|
||||
<div className="stat-title text-gray-200 3xl:text-[2rem]">今年電費總計 (元)</div>
|
||||
<div className="stat-value text-success text-5xl 3xl:text-[6rem]">516,519</div>
|
||||
<div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-01-01 ~ 2024-08-08</div>
|
||||
</div>
|
||||
<div className="stat place-items-start">
|
||||
<div className="stat-title text-gray-200 3xl:text-[2rem]">區間電費總計 (元)</div>
|
||||
<div className="stat-value text-success text-5xl 3xl:text-[6rem]">22,432</div>
|
||||
<div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-07-01 ~ 2024-07-31</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stats w-full h-[48%] p-2 mb-4 bg-slate-900 rounded-lg border border-cyan-200/20 shadow-md shadow-cyan-500/20">
|
||||
<!-- 電流資訊 -->
|
||||
<div className="stat place-items-start">
|
||||
<div className="stat-title text-gray-200 3xl:text-[2rem]">今年用電度數 (kWh)</div>
|
||||
<div className="stat-value text-success text-5xl 3xl:text-[6rem]">172,173</div>
|
||||
<div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-01-01 ~ 2024-08-08</div>
|
||||
</div>
|
||||
<div className="stat place-items-start">
|
||||
<div className="stat-title text-gray-200 3xl:text-[2rem]">區間用電度數 (kWh)</div>
|
||||
<div className="stat-value text-success text-5xl 3xl:text-[6rem]">7,477</div>
|
||||
<div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-07-01 ~ 2024-07-31</div>
|
||||
<div class="six-data">
|
||||
<div
|
||||
v-for="(item, index) in dataItems"
|
||||
:key="index"
|
||||
:class="
|
||||
twMerge(
|
||||
'item w-1/2 py-0 px-5 h-[85px] text-white flex justify-center flex-col',
|
||||
index == 0 || index == 3 || index == 4
|
||||
? 'bg-slate-800'
|
||||
: 'bg-slate-700'
|
||||
)
|
||||
"
|
||||
>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div v-if="item.time" class="time">{{ item.time }}</div>
|
||||
<div class="data">{{ item.data }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.six-data {
|
||||
@apply flex flex-wrap mb-2.5;
|
||||
|
||||
.title {
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.time {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.data {
|
||||
@apply text-2xl;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -132,7 +132,7 @@ const changeSelected = (Device_list, renew = false) => {
|
||||
:icon="['fas', 'search']"
|
||||
class="w-6 h-6 mr-2 text-info"
|
||||
/>
|
||||
<input type="text" :placeholder="t('buttton.enter_text')"
|
||||
<input type="text" :placeholder="t('button.enter_text')"
|
||||
class="text-white bg-transparent w-full" />
|
||||
</label>
|
||||
<template v-for="d in deviceData" :key="d.building_tag">
|
||||
|
||||
@ -16,7 +16,7 @@ export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/upload': {
|
||||
target: "http://220.132.206.5:8008",
|
||||
target: "http://192.168.0.206:8088/upload",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user