修改路徑 | 首頁小卡修改
This commit is contained in:
parent
d7d31c813e
commit
a4fa9c864c
@ -1,3 +1,3 @@
|
||||
VITE_API_BASEURL = "http://192.168.0.206:8060"
|
||||
VITE_FILE_API_BASEURL = "http://192.168.0.206:8088"
|
||||
VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
|
||||
VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
|
||||
VITE_FORGE_BASEURL = "http://localhost:5173"
|
||||
@ -1,3 +1,3 @@
|
||||
VITE_API_BASEURL = "http://192.168.0.206:8060"
|
||||
VITE_FILE_API_BASEURL = "http://192.168.0.206:8088"
|
||||
VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
|
||||
VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
|
||||
VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"
|
||||
@ -79,8 +79,8 @@ export const getAlarmMemberList = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
export const getNoticeList = async () => {
|
||||
const res = await instance.post(GET_NOTICE_LIST_API, {});
|
||||
export const getNoticeList = async (lang) => {
|
||||
const res = await instance.post(GET_NOTICE_LIST_API, { lang });
|
||||
|
||||
return apihandler(res.code, res.data, {
|
||||
msg: res.msg,
|
||||
|
||||
@ -16,8 +16,10 @@ export const getBuildings = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
export const getAuth = async () => {
|
||||
const res = await instance.post(GET_AUTHPAGE_API);
|
||||
export const getAuth = async (lang) => {
|
||||
const res = await instance.post(GET_AUTHPAGE_API, {
|
||||
lang,
|
||||
});
|
||||
return apihandler(res.code, res.data, {
|
||||
msg: res.msg,
|
||||
code: res.code,
|
||||
|
||||
@ -24,13 +24,13 @@ const toggleErrIcon = () => {
|
||||
v-if="!showErr"
|
||||
:icon="['fas', 'comment-dots']"
|
||||
size="2x"
|
||||
class="text-white menu-icon"
|
||||
class="text-white w-10 m-auto"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
v-else
|
||||
:icon="['fas', 'comment-slash']"
|
||||
size="2x"
|
||||
class="text-white menu-icon"
|
||||
class="text-white w-10 m-auto"
|
||||
/>
|
||||
<span class="text-white"> {{ $t("alarm.title") }}</span>
|
||||
</label>
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
import { defineProps, ref, computed, inject, watch } from "vue";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { data } from "autoprefixer";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t } = useI18n();
|
||||
/* -------------------------------------------------------------
|
||||
> 6 頁 => 會有 input 跳頁，且前三後三顯示
|
||||
---------------------------------------------------------------- */
|
||||
@ -117,7 +119,7 @@ const pageInput = computed(() => {
|
||||
v-if="totalPage < 6"
|
||||
class="absolute -bottom-8 -translate-x-1/2 text-base text-center"
|
||||
>
|
||||
共 {{ dataSource.length }} 筆</span
|
||||
{{ dataSource.length }} {{ $t("table.in_otal") }}</span
|
||||
>
|
||||
<label
|
||||
v-if="totalPage > 6"
|
||||
@ -127,7 +129,7 @@ const pageInput = computed(() => {
|
||||
type="text"
|
||||
maxlength="6"
|
||||
class="bg-transparent h-full w-20 font-extrabold italic text-lg"
|
||||
placeholder="跳至"
|
||||
:placeholder="t('table.skip_to')"
|
||||
:value="pageInput"
|
||||
@change="
|
||||
(e) => {
|
||||
@ -143,7 +145,7 @@ const pageInput = computed(() => {
|
||||
<span
|
||||
class="w-full text-center absolute -bottom-8 left-1/2 -translate-x-1/2 text-base"
|
||||
>
|
||||
共 {{ totalItems || dataSource.length }} 筆</span
|
||||
{{ totalItems || dataSource.length }} {{ $t("table.in_otal") }}</span
|
||||
>
|
||||
</label>
|
||||
<ul
|
||||
|
||||
@ -4,6 +4,8 @@ import { computed, defineProps, provide, ref, watch } from "vue";
|
||||
import Pagination from "@/components/customUI/Pagination.vue";
|
||||
import Checkbox from "@/components/customUI/Checkbox.vue";
|
||||
import dayjs from "dayjs";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t } = useI18n();
|
||||
/*
|
||||
column={
|
||||
title,key,class, width, filter:Boolean, sort:Boolean
|
||||
@ -246,14 +248,14 @@ watch(
|
||||
<input
|
||||
type="reset"
|
||||
class="btn btn-sm text-white btn-error"
|
||||
value="重置"
|
||||
:value="t('button.reset')"
|
||||
@click="() => onFilter(column.key, true)"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-sm btn-success"
|
||||
@click.stop.prevent="() => onFilter(column.key)"
|
||||
>
|
||||
確定
|
||||
{{ $t("button.submit") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -270,7 +272,7 @@ watch(
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-else-if="currentDataSource.length == 0">
|
||||
<td :colspan="columns.length">表中數據為空</td>
|
||||
<td :colspan="columns.length">{{ $t("table.no_data") }}</td>
|
||||
</tr>
|
||||
<template v-else :sort="sortRule">
|
||||
<tr
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<script setup>
|
||||
import { ref, defineProps, watch, onMounted } from "vue";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
name: String,
|
||||
fileList: Array,
|
||||
@ -262,8 +263,8 @@ const revokeURL = (src) => {
|
||||
<div>
|
||||
<font-awesome-icon size="2x" :icon="['fas', 'cloud-upload-alt']" />
|
||||
</div>
|
||||
<p class="text-2xl my-2">選擇一個文件或拖放到這裡</p>
|
||||
<p class="mb-0 col-grey">檔案不超過 10MB</p>
|
||||
<p class="text-2xl my-2">{{ $t("upload.title") }}</p>
|
||||
<p class="mb-0 col-grey">{{ $t("upload.description") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -6,8 +6,10 @@ import Logo from "@/assets/img/logo.svg";
|
||||
import useGetCookie from "@/hooks/useGetCookie";
|
||||
import AlarmDrawer from "@/components/alarm/AlarmDrawer.vue";
|
||||
import NavbarLang from "./NavbarLang.vue";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
const user = ref("");
|
||||
const menuShow = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
const name = useGetCookie("niagara_userid");
|
||||
@ -16,14 +18,17 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const toggleMenu = () => {
|
||||
menuShow.value = !menuShow.value;
|
||||
};
|
||||
|
||||
const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="navbar bg-dark text-success w-full relative z-50">
|
||||
<header class="navbar bg-dark text-light-info w-full relative z-50">
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden" @click="toggleMenu">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
@ -39,20 +44,25 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul
|
||||
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
|
||||
|
||||
<router-link
|
||||
to="/dashboard"
|
||||
class="rounded-lg pl-4 text-2xl font-bold text-white flex items-center"
|
||||
>
|
||||
<NavbarItem />
|
||||
</ul>
|
||||
</div>
|
||||
<router-link to="/dashboard" class="rounded-lg pl-4 text-2xl font-bold text-white flex items-center">
|
||||
<img :src="src" alt="logo" class="w-8 me-1" />
|
||||
CviLux Group
|
||||
</router-link>
|
||||
<NavbarBuilding />
|
||||
</div>
|
||||
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<div
|
||||
:class="
|
||||
twMerge(
|
||||
'navbar-center flex absolute lg:relative top-full bg-dark',
|
||||
menuShow ? 'block' : 'hidden'
|
||||
)
|
||||
"
|
||||
>
|
||||
<NavbarItem />
|
||||
</div>
|
||||
<div class="navbar-end mr-4">
|
||||
@ -73,7 +83,7 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'user-circle']"
|
||||
size="2x"
|
||||
class="text-white menu-icon"
|
||||
class="text-white w-10 m-auto"
|
||||
/>
|
||||
<span class="text-white"> {{ user || "webUser" }}</span>
|
||||
</button>
|
||||
@ -102,7 +112,7 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
|
||||
}
|
||||
/**menu**/
|
||||
.menu-box {
|
||||
@apply flex justify-center;
|
||||
@apply flex flex-wrap justify-center ;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
@ -130,11 +140,6 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 40px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.menu-box .btn-group span {
|
||||
color: #fff;
|
||||
display: block;
|
||||
|
||||
@ -4,13 +4,14 @@ import { AUTHPAGES } from "@/constant";
|
||||
import { getAuth, getAllSysSidebar } from "@/apis/building";
|
||||
import useBuildingStore from "@/stores/useBuildingStore";
|
||||
import useUserInfoStore from "@/stores/useUserInfoStore";
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { locale } = useI18n();
|
||||
const store = useUserInfoStore();
|
||||
|
||||
const buildingStore = useBuildingStore();
|
||||
|
||||
const iniFroList = async () => {
|
||||
const res = await getAuth();
|
||||
const res = await getAuth(locale.value);
|
||||
|
||||
store.updateAuthPage(
|
||||
res.data.map((d) =>
|
||||
@ -64,6 +65,10 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
watch(locale, () => {
|
||||
iniFroList();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
iniFroList();
|
||||
});
|
||||
@ -78,9 +83,9 @@ onMounted(() => {
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'home']"
|
||||
size="2x"
|
||||
class="menu-icon"
|
||||
class=" w-10 m-auto"
|
||||
/>
|
||||
首頁
|
||||
{{ $t("home") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
@ -95,7 +100,7 @@ onMounted(() => {
|
||||
<font-awesome-icon
|
||||
:icon="['fas', page.icon]"
|
||||
size="2x"
|
||||
class="menu-icon"
|
||||
class="w-10 m-auto"
|
||||
/>
|
||||
{{ page.subName }}
|
||||
</a>
|
||||
@ -108,7 +113,7 @@ onMounted(() => {
|
||||
<font-awesome-icon
|
||||
:icon="['fas', page.icon]"
|
||||
size="2x"
|
||||
class="menu-icon"
|
||||
class=" w-10 m-auto"
|
||||
/>
|
||||
{{ page.subName }}
|
||||
</router-link>
|
||||
|
||||
@ -3,12 +3,10 @@ import { useI18n } from "vue-i18n";
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const { locale } = useI18n(); // 使用 I18n
|
||||
const language = ref(locale.value)
|
||||
// 切換語言
|
||||
const toggleLanguage = (lang) => {
|
||||
locale.value = lang;
|
||||
localStorage.setItem("CviLanguage", lang);
|
||||
language.value = lang;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -20,7 +18,7 @@ const toggleLanguage = (lang) => {
|
||||
class="flex flex-col justify-center items-center btn-group"
|
||||
>
|
||||
<span
|
||||
:class="`fi fi-${language} fis text-3xl rounded-full border-1 border-white`"
|
||||
:class="`fi fi-${locale} fis text-3xl rounded-full border-1 border-white`"
|
||||
></span>
|
||||
<span class="text-white">{{ $t("language") }}</span>
|
||||
</button>
|
||||
|
||||
@ -1,9 +1,28 @@
|
||||
{
|
||||
"language": "简体中文",
|
||||
"home": "首页",
|
||||
"sign_out": "登出",
|
||||
"log_in": "登入",
|
||||
"account": "帐号",
|
||||
"password": "密码",
|
||||
"table": {
|
||||
"no_data": "表中数据为空",
|
||||
"in_otal": "笔资料",
|
||||
"skip_to": "跳至"
|
||||
},
|
||||
"upload": {
|
||||
"title": "选择一个文件或拖放到这里",
|
||||
"description": "档案不超过 10MB"
|
||||
},
|
||||
"dashboard": {
|
||||
"yesterday_today": "昨天/今天",
|
||||
"elec_consumption_comparison": "用电量比较",
|
||||
"today_electricity_consumption": "今日用电量",
|
||||
"yesterday_electricity_consumption": "昨天用电量",
|
||||
"this_last_week": "本周/上周",
|
||||
"thisweek_electricity_consumption": "本周用电量",
|
||||
"lastweek_electricity_consumption": "上周用电量"
|
||||
},
|
||||
"history": {
|
||||
"title": "历史资料",
|
||||
"building_name": "厂区",
|
||||
@ -21,6 +40,23 @@
|
||||
"end_date": "结束日期",
|
||||
"end_time": "结束时间"
|
||||
},
|
||||
"energy": {
|
||||
"elec_consumption": "用电即时分布",
|
||||
"total_elec": "总用电",
|
||||
"green_elec": "绿电",
|
||||
"immediate_demand": "即时需量",
|
||||
"average_demand": "平均需量",
|
||||
"elec_bills": "今年电费累计(元)",
|
||||
"interval_elec_charges": "区间电费(元)",
|
||||
"year_carbon_emission": "今年碳排当量累计(公斤)",
|
||||
"interval_carbon_emission": "区间碳排当量",
|
||||
"year_elec_consumption": "今年用电度数(kWh)",
|
||||
"interval_elec_consumption": "区间用电度数(kWh)",
|
||||
"monthly_elec_consumption": "每月用电分析",
|
||||
"monthly_carbon_emission_and_reduction": "每月碳排当量 (kgCO2e) 与减量目标",
|
||||
"monthly_bill_power": "每月计费度数 (kWh)",
|
||||
"interval_bill_degree": "区间计费度数"
|
||||
},
|
||||
"alarm": {
|
||||
"title": "显示警告",
|
||||
"notify": "异常通知",
|
||||
|
||||
@ -1,9 +1,28 @@
|
||||
{
|
||||
"language": "繁體中文",
|
||||
"home": "首頁",
|
||||
"sign_out": "登出",
|
||||
"log_in": "登入",
|
||||
"account": "帳號",
|
||||
"password": "密碼",
|
||||
"table": {
|
||||
"no_data": "表中數據為空",
|
||||
"in_otal": "筆資料",
|
||||
"skip_to": "跳至"
|
||||
},
|
||||
"upload": {
|
||||
"title": "選擇一個文件或拖放到這裡",
|
||||
"description": "檔案不超過 10MB"
|
||||
},
|
||||
"dashboard": {
|
||||
"yesterday_today": "昨天/今天",
|
||||
"elec_consumption_comparison":"用電量比較",
|
||||
"today_electricity_consumption":"今日用電量",
|
||||
"yesterday_electricity_consumption":"昨天用電量",
|
||||
"this_last_week":"本週/上週",
|
||||
"thisweek_electricity_consumption":"本周用電量",
|
||||
"lastweek_electricity_consumption":"上週用電量"
|
||||
},
|
||||
"history": {
|
||||
"title": "歷史資料",
|
||||
"building_name": "廠區",
|
||||
@ -21,6 +40,23 @@
|
||||
"end_date": "結束日期",
|
||||
"end_time": "結束時間"
|
||||
},
|
||||
"energy": {
|
||||
"elec_consumption": "用電即時分佈",
|
||||
"total_elec": "總用電",
|
||||
"green_elec": "綠電",
|
||||
"immediate_demand": "即時需量",
|
||||
"average_demand": "平均需量",
|
||||
"elec_bills": "今年電費累計(元)",
|
||||
"interval_elec_charges": "區間電費(元)",
|
||||
"year_carbon_emission": "今年碳排當量累計(公斤)",
|
||||
"interval_carbon_emission": "區間碳排當量",
|
||||
"year_elec_consumption": "今年用電度數(kWh)",
|
||||
"interval_elec_consumption": "區間用電度數(kWh)",
|
||||
"monthly_elec_consumption": "每月用電分析",
|
||||
"monthly_carbon_emission_and_reduction": "每月碳排當量 (kgCO2e) 與減量目標",
|
||||
"monthly_bill_power": "每月計費度數 (kWh)",
|
||||
"interval_bill_degree": "區間計費度數"
|
||||
},
|
||||
"alarm": {
|
||||
"title": "顯示警告",
|
||||
"notify": "異常通知",
|
||||
|
||||
@ -1,9 +1,19 @@
|
||||
{
|
||||
"language": "English",
|
||||
"home": "Home",
|
||||
"sign_out": "Sign out",
|
||||
"log_in": "Log in",
|
||||
"account": "Account",
|
||||
"password": "Password",
|
||||
"table": {
|
||||
"no_data": "No data",
|
||||
"in_otal": "items in total",
|
||||
"skip_to": "Skip to"
|
||||
},
|
||||
"upload": {
|
||||
"title": "Select a file or drag and drop here",
|
||||
"description": "File size cannot exceed 10MB"
|
||||
},
|
||||
"history": {
|
||||
"title": "Historical Data",
|
||||
"building_name": "Building",
|
||||
@ -21,6 +31,32 @@
|
||||
"end_date": "End date",
|
||||
"end_time": "End time"
|
||||
},
|
||||
"dashboard": {
|
||||
"yesterday_today": "Yesterday / Today's",
|
||||
"elec_consumption_comparison": "Electricity Consumption Comparison",
|
||||
"today_electricity_consumption": "Today’s electricity consumption",
|
||||
"yesterday_electricity_consumption": "Yesterday’s electricity consumption",
|
||||
"this_last_week": "This Week's / Last Week's",
|
||||
"thisweek_electricity_consumption": "This week’s electricity consumption",
|
||||
"lastweek_electricity_consumption": "Last week’s electricity consumption"
|
||||
},
|
||||
"energy": {
|
||||
"elec_consumption": "Real-time distribution of electricity consumption",
|
||||
"total_elec": "Total electricity consumption",
|
||||
"green_elec": "Green electricity",
|
||||
"immediate_demand": "immediate demand",
|
||||
"average_demand": "average demand",
|
||||
"elec_bills": "Total electricity bills this year (yuan)",
|
||||
"interval_elec_charges": "Interval electricity charges (yuan)",
|
||||
"year_carbon_emission": "Cumulative carbon emission equivalent this year (kg)",
|
||||
"interval_carbon_emission": "Interval carbon emission equivalent",
|
||||
"year_elec_consumption": "This year's electricity consumption (kWh)",
|
||||
"interval_elec_consumption": "Interval electricity consumption (kWh)",
|
||||
"monthly_elec_consumption": "Monthly electricity consumption analysis",
|
||||
"monthly_carbon_emission_and_reduction": "Monthly carbon emission equivalent (kgCO2e) and reduction target",
|
||||
"monthly_bill_power": "Monthly billing power (kWh)",
|
||||
"interval_bill_degree": "Interval billing degree"
|
||||
},
|
||||
"alarm": {
|
||||
"title": "Warning",
|
||||
"notify": "Notification",
|
||||
|
||||
@ -40,6 +40,20 @@ import {
|
||||
faFilePowerpoint,
|
||||
faFileAlt,
|
||||
faDatabase,
|
||||
faBuilding,
|
||||
faVideo,
|
||||
faFan,
|
||||
faTemperatureHigh,
|
||||
faLightbulb,
|
||||
faBolt,
|
||||
faChargingStation,
|
||||
faTint,
|
||||
faWater,
|
||||
faCarBattery,
|
||||
faFireExtinguisher,
|
||||
faDoorOpen,
|
||||
faCar,
|
||||
faWind
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
/* add icons to the library */
|
||||
@ -81,6 +95,20 @@ library.add(
|
||||
faFilePowerpoint,
|
||||
faFileAlt,
|
||||
faDatabase,
|
||||
faBuilding,
|
||||
faVideo,
|
||||
faFan,
|
||||
faTemperatureHigh,
|
||||
faLightbulb,
|
||||
faBolt,
|
||||
faChargingStation,
|
||||
faTint,
|
||||
faWater,
|
||||
faCarBattery,
|
||||
faFireExtinguisher,
|
||||
faDoorOpen,
|
||||
faCar,
|
||||
faWind
|
||||
);
|
||||
|
||||
export default library;
|
||||
|
||||
@ -167,14 +167,14 @@ const onCancel = () => {
|
||||
:options="floors"
|
||||
:isBottomLabelExist="false"
|
||||
>
|
||||
<template #topLeft>{{ t("assetManagement.floor") }}</template>
|
||||
<template #topLeft>{{ $t("assetManagement.floor") }}</template>
|
||||
</Select>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-success mt-10 ml-5"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t("assetManagement.add_floor") }}
|
||||
{{ $t("assetManagement.add_floor") }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- <button type="button" class="btn btn-success mt-10">確認座標</button> -->
|
||||
@ -195,7 +195,7 @@ const onCancel = () => {
|
||||
v-if="!currentFloor?.floor_map_url"
|
||||
class="absolute top-0 left-0 flex justify-center items-center min-h-[500px] w-full border border-stone-900 shadow-lg bg-sub-success bg-opacity-25 rounded-md"
|
||||
>
|
||||
<p class="text-2xl">{{ t("assetManagement.add_floor_text") }}</p>
|
||||
<p class="text-2xl">{{ $t("assetManagement.add_floor_text") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
|
||||
@ -2,15 +2,22 @@
|
||||
import AlertSubList from "./AlertSubList.vue";
|
||||
import AlertOutliersTable from "./AlertOutliersTable.vue";
|
||||
import AlertNotifyTable from "./AlertNotifyTable.vue";
|
||||
import { ref, provide, onMounted } from "vue";
|
||||
import { ref, provide, onMounted, watch } from "vue";
|
||||
import { getNoticeList } from "@/apis/alert";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { locale } = useI18n();
|
||||
|
||||
const noticeList = ref([]);
|
||||
|
||||
const NoticeListData = async () => {
|
||||
const res = await getNoticeList();
|
||||
const res = await getNoticeList(locale.value);
|
||||
noticeList.value = res.data;
|
||||
};
|
||||
|
||||
watch(locale, () => {
|
||||
NoticeListData();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
NoticeListData();
|
||||
});
|
||||
|
||||
@ -7,14 +7,14 @@ const yesterdayTodayData = {
|
||||
data: {
|
||||
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
values: [
|
||||
{
|
||||
name: "Yesterday's electricity consumption",
|
||||
value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70],
|
||||
},
|
||||
{
|
||||
name: "Today's electricity consumption",
|
||||
value: [8, 8, 8, 8, 8, 15, 25, 65, 75, 60],
|
||||
},
|
||||
{
|
||||
name: "Yesterday's electricity consumption",
|
||||
value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -24,14 +24,15 @@ const weekComparisonData = {
|
||||
data: {
|
||||
categories: ["週五", "週六", "週日", "週一", "週二", "週三", "週四"],
|
||||
values: [
|
||||
{
|
||||
name: "Last week's electricity consumption",
|
||||
value: [800, 150, 300, 750, 900, 900, 800],
|
||||
},
|
||||
{
|
||||
name: "This week's electricity consumption",
|
||||
value: [850, 200, 350, 850, 950, 950, 900],
|
||||
},
|
||||
{
|
||||
name: "Last week's electricity consumption",
|
||||
value: [800, 150, 300, 750, 900, 900, 800],
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -67,7 +68,7 @@ const generateChartOption = (categories, values) => ({
|
||||
type: "bar",
|
||||
barWidth: "35%",
|
||||
itemStyle: {
|
||||
color: "#FFD700", // 黃色
|
||||
color: "#00BFFF", // 藍色
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -76,7 +77,7 @@ const generateChartOption = (categories, values) => ({
|
||||
type: "bar",
|
||||
barWidth: "35%",
|
||||
itemStyle: {
|
||||
color: "#00BFFF", // 藍色
|
||||
color: "#FFD700", // 黃色
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -115,16 +116,18 @@ const weekComparisonOption = generateChartOption(
|
||||
<div class="lg:w-1/2 w-full chart-data relative px-8 py-3">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<h2 class="text-xs font-light w-1/2 relative">
|
||||
Yesterday / Today's<br />Electricity Consumption Comparison (kWH)
|
||||
{{ $t("dashboard.yesterday_today") }}<br />
|
||||
{{ $t("dashboard.elec_consumption_comparison") }}
|
||||
(kWH)
|
||||
</h2>
|
||||
<div class="w-[48%]">
|
||||
<a href="#" class="text-con">
|
||||
<img src="@ASSET/img/chart-title01.svg" />
|
||||
<span>Today’s electricity consumption</span>
|
||||
<span>{{ $t("dashboard.today_electricity_consumption") }}</span>
|
||||
</a>
|
||||
<a href="#" class="text-con">
|
||||
<img src="@ASSET/img/chart-title02.svg" />
|
||||
<span>Yesterday’s electricity consumption</span>
|
||||
<span>{{ $t("dashboard.yesterday_electricity_consumption") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -141,16 +144,18 @@ const weekComparisonOption = generateChartOption(
|
||||
<div class="lg:w-1/2 w-full chart-data relative px-8 py-3">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<h2 class="text-xs font-light w-1/2 relative">
|
||||
This Week's / Last Week's <br />Electricity Consumption Comparison (kWH)
|
||||
{{ $t("dashboard.this_last_week") }}<br />
|
||||
{{ $t("dashboard.elec_consumption_comparison") }}
|
||||
(kWH)
|
||||
</h2>
|
||||
<div class="w-[48%]">
|
||||
<a href="#" class="text-con">
|
||||
<img src="@ASSET/img/chart-title01.svg" />
|
||||
<span>This week’s electricity consumption</span>
|
||||
<span>{{ $t("dashboard.thisweek_electricity_consumption") }}</span>
|
||||
</a>
|
||||
<a href="#" class="text-con">
|
||||
<img src="@ASSET/img/chart-title02.svg" />
|
||||
<span>Last week’s electricity consumption</span>
|
||||
<span>{{ $t("dashboard.lastweek_electricity_consumption") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,34 +3,22 @@ import { ref } from "vue";
|
||||
|
||||
// 假資料
|
||||
const mockData = ref([
|
||||
{ title: "Elevator system", icon: "EL", isError: false },
|
||||
{ title: "CCTV system", icon: "C", isError: true },
|
||||
{ title: "Emergency rescue system", icon: "P", isError: true },
|
||||
{ title: "Air Conditioning System", icon: "M10", isError: false },
|
||||
{ title: "Lighting system", icon: "L1", isError: false },
|
||||
{ title: "Fire Equipment", icon: "F1", isError: false },
|
||||
{ title: "Water supply system", icon: "W2", isError: false },
|
||||
{
|
||||
title: "Sewage and wastewater equipment",
|
||||
icon: "P1",
|
||||
isError: false,
|
||||
},
|
||||
{ title: "High voltage switchboard", icon: "E1", isError: false },
|
||||
{ title: "Low voltage switchboard", icon: "E2", isError: false },
|
||||
{ title: "Meter system", icon: "E4-1", isError: false },
|
||||
{ title: "Emergency generator", icon: "E3", isError: false },
|
||||
{ title: "Shutdown system", icon: "PSC", isError: false },
|
||||
{ title: "Access control system", icon: "R", isError: false },
|
||||
{
|
||||
title: "Environmental sensing equipment",
|
||||
icon: "M12",
|
||||
isError: false,
|
||||
},
|
||||
{
|
||||
title: "Air supply and exhaust system",
|
||||
icon: "M5-2",
|
||||
isError: false,
|
||||
},
|
||||
{ title: "Elevator system", icon: "building", isError: false },
|
||||
{ title: "Air Conditioning System", icon: "fan", isError: false },
|
||||
{ title: "Environmental sensing equipment", icon: "temperature-high", isError: false },
|
||||
{ title: "Lighting system", icon: "lightbulb", isError: false },
|
||||
{ title: "Meter system", icon: "bolt", isError: false },
|
||||
{ title: "High voltage switchboard", icon: "charging-station", isError: false },
|
||||
{ title: "Low voltage switchboard", icon: "charging-station", isError: false },
|
||||
{ title: "Water supply system", icon: "tint", isError: false },
|
||||
{ title: "Sewage and wastewater equipment", icon: "water", isError: false },
|
||||
{ title: "Emergency generator", icon: "car-battery", isError: false },
|
||||
{ title: "Fire Equipment", icon: "fire-extinguisher", isError: false },
|
||||
{ title: "CCTV system", icon: "video", isError: true },
|
||||
{ title: "Access control system", icon: "door-open", isError: false },
|
||||
{ title: "Shutdown system", icon: "car", isError: false },
|
||||
{ title: "Emergency rescue system", icon: "exclamation-triangle", isError: true },
|
||||
{ title: "Air supply and exhaust system", icon: "wind", isError: false },
|
||||
]);
|
||||
</script>
|
||||
|
||||
@ -48,15 +36,11 @@ const mockData = ref([
|
||||
<img v-else src="@ASSET/img/equipment-item-background04.svg" />
|
||||
|
||||
<div class="equipment-item">
|
||||
<div class="w-20">
|
||||
<img
|
||||
class="w-14 p-2 m-auto"
|
||||
:src="`./icon/${item.icon}.png`"
|
||||
alt="icon"
|
||||
/>
|
||||
<div class="w-16">
|
||||
<FontAwesomeIcon class="text-2xl mt-1 m-auto" :icon="['fas', item.icon]"></FontAwesomeIcon>
|
||||
</div>
|
||||
<div class="icon-text">
|
||||
<div class="text-slate-300 text-xs">{{ item.title }}</div>
|
||||
<div class="text-slate-300 text-sm">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -68,7 +52,7 @@ const mockData = ref([
|
||||
@apply flex items-center absolute top-1/2 w-[90%] left-0 right-0 m-auto text-center -translate-y-1/2;
|
||||
}
|
||||
.icon-text {
|
||||
@apply text-start font-light p-1 relative z-20;
|
||||
@apply w-52 text-start p-3 relative z-20;
|
||||
}
|
||||
.icon-text:before {
|
||||
@apply absolute -left-3 top-0 bottom-0 m-auto h-10 w-5 z-10;
|
||||
|
||||
@ -96,7 +96,9 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="bg-slate-800 p-3">
|
||||
<div class="text-white mb-3 text-base">每月計費度數 (kWh)</div>
|
||||
<div class="text-white mb-3 text-base">
|
||||
{{ $t("energy.monthly_bill_power") }}
|
||||
</div>
|
||||
<div class="bar-box">
|
||||
<BarChart
|
||||
id="billing_degree_chart"
|
||||
|
||||
@ -85,7 +85,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<div class="bg-slate-800 p-3">
|
||||
<div class="text-white mb-3 text-base">
|
||||
每月碳排當量 (kgCO2e) 與減量目標
|
||||
{{ $t("energy.monthly_carbon_emission_and_reduction") }}
|
||||
</div>
|
||||
<div class="bar-box">
|
||||
<BarChart
|
||||
|
||||
@ -36,7 +36,6 @@ const chartOption = {
|
||||
label: {
|
||||
position: "right",
|
||||
fontSize: 12,
|
||||
borderWidth: 0,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
@ -60,18 +59,20 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="p-3">
|
||||
<h2 class="text text-lg text-white mb-5 relative">用電即時分佈</h2>
|
||||
<h2 class="text text-lg text-white mb-5 relative">
|
||||
{{ $t("energy.elec_consumption") }}
|
||||
</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"> {{ $t("energy.total_elec") }} (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">{{ $t("energy.green_elec") }} (kWh)</span>
|
||||
<span class="pr-3.5">39.50</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -116,11 +116,11 @@ onMounted(() => {
|
||||
<div class="p-3">
|
||||
<div class="flex text-white mb-5">
|
||||
<div class="flex items-end text-base relative text mr-32">
|
||||
即時需量
|
||||
{{ $t("energy.immediate_demand") }}
|
||||
<span class="text-2xl px-2.5">245.48 kw</span>
|
||||
</div>
|
||||
<div class="flex items-end text-base">
|
||||
平均需量
|
||||
{{ $t("energy.average_demand") }}
|
||||
<span class="text-2xl px-2.5">230.8 kw</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -95,7 +95,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<div class="bg-slate-700 p-3">
|
||||
<div class="text-white mb-3 text-base">
|
||||
區間計費度數 2024 / 11 / 01 ~ 2024 / 11 / 15
|
||||
{{ $t("energy.interval_bill_degree") }} 2024 / 11 / 01 ~ 2024 / 11 / 15
|
||||
</div>
|
||||
<div class="bar-box">
|
||||
<BarChart
|
||||
|
||||
@ -99,7 +99,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="bg-slate-800 p-3">
|
||||
<div class="text-white mb-3 text-base">每月用電分析</div>
|
||||
<div class="text-white mb-3 text-base">{{$t("energy.monthly_elec_consumption")}}</div>
|
||||
<div class="bar-box">
|
||||
<BarChart
|
||||
id="electricity_bill_chart"
|
||||
|
||||
@ -1,23 +1,33 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
// 假資料
|
||||
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";
|
||||
const updateDataItems = () => {
|
||||
return [
|
||||
{ title: t("energy.elec_bills"), data: "3,255,458" },
|
||||
{ title: t("energy.interval_elec_charges"), data: "205,110" },
|
||||
{ title: t("energy.year_carbon_emission"), data: "455,128" },
|
||||
{
|
||||
title: t("energy.interval_carbon_emission"),
|
||||
time: "2023-11-01~2023-11-19",
|
||||
data: "25,351",
|
||||
},
|
||||
{ title: t("energy.year_elec_consumption"), data: "864,830" },
|
||||
{
|
||||
title: t("energy.interval_elec_consumption"),
|
||||
time: "2023-11-01~2023-11-19",
|
||||
data: "50,355",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const dataItems = ref(updateDataItems());
|
||||
|
||||
watch(locale, () => {
|
||||
dataItems.value = updateDataItems();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -27,7 +37,7 @@ const getItemBackground = (index) => {
|
||||
:key="index"
|
||||
:class="
|
||||
twMerge(
|
||||
'item w-1/2 py-0 px-5 h-[85px] text-white flex justify-center flex-col',
|
||||
'item w-1/2 py-0 px-3 h-[85px] text-white flex justify-center flex-col',
|
||||
index == 0 || index == 3 || index == 4
|
||||
? 'bg-slate-800'
|
||||
: 'bg-slate-700'
|
||||
|
||||
@ -16,7 +16,7 @@ export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/upload': {
|
||||
target: "http://192.168.0.206:8088/upload",
|
||||
target: "https://ibms-cvilux.production.mjmtech.com.tw",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user