ko.ko/guandu_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI修改

Browse Source
This commit is contained in:
huliang 2025-05-09 18:10:10 +08:00
parent 7599b7fa3a
commit 48dd8d62bb
11 changed files with 141 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/dashboard/dashboardAlert.vue
View File

@ -9,23 +9,27 @@ const alarmDataStore = useAlarmDataStore();
<template>
<a-card class="card">
<h5>Alarm</h5>
<h5>異常告警</h5>
<table className="table w-full">
<thead>
<tr>
<th>Name</th>
<th>In Alarm Count</th>
<th>Unacked Count</th>
<th>異常類別</th>
<th>發報中</th>
<th>未確認</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in alarmDataStore.alarmData" :key="index">
<tr
v-for="(item, index) in alarmDataStore.alarmData"
:key="index"
:class="item.alarmCount > 0 ? 'animate-pulse' : ''"
>
<td>
<font-awesome-icon
v-if="item.alarmCount > 0"
:icon="['fas', 'exclamation-circle']"
class="text-rose-600 text-lg animate-pulse -ms-5"
class="text-rose-600 text-base -ms-5"
/>
{{ item.name }}
</td>
@ -35,10 +39,11 @@ const alarmDataStore = useAlarmDataStore();
<router-link
:to="{
name: 'baja',
query: { ord: encodeURIComponent(item.Ord) },
query: { pagename: 'alert',
ord: encodeURIComponent(item.Ord) },
}"
class="flex items-center justify-between gap-8"
>view</router-link
>查看</router-link
>
</td>
</tr>
@ -53,21 +58,21 @@ const alarmDataStore = useAlarmDataStore();
h5 {
margin: 0;
font-weight: 700;
font-size: 18px;
font-size: 33px;
color: #141414;
}
.table th {
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-size: 15px;
font-size: 1.125rem;
font-weight: 600;
padding: 8px 0;
color: #8c8c8c;
}
.table td {
font-size: 15px;
padding: 16px 0px;
font-size: 1.125rem;
padding: 8px 0px;
white-space: nowrap;
}
</style>

28
src/components/dashboard/dashboardElecChart.vue
View File

@ -14,8 +14,8 @@ const props = defineProps({
const yesterdayTodayChart = ref(null);
const weekComparisonChart = ref(null);
let yesterdayTodayEChart = null;
let weekComparisonEChart = null;
let yesterdayTodayEChart = null;
let weekComparisonEChart = null;
watch(
() => props.yesterdayTodayData,
@ -70,7 +70,21 @@ onUnmounted(() => {
// 生成圓柱圖表的 option
const generateCylinderChartOption = (data) => {
const barWidth = 15;
const dataCount = data.categories.length; // 數據筆數
let barWidth = 15; // 寬度
let symbolOffset = 0; // 偏移量
if (dataCount <= 7) {
barWidth = 15;
symbolOffset = 9;
} else if (dataCount <= 10) {
barWidth = 10;
symbolOffset = 6;
} else {
barWidth = 8;
symbolOffset = 5;
}
const color1 = {
// 今天用電量顏色
type: "linear",
@ -157,7 +171,7 @@ const generateCylinderChartOption = (data) => {
name: null,
type: "pictorialBar",
symbolSize: [barWidth, 5],
symbolOffset: [-9, -4], // 置中
symbolOffset: [-symbolOffset, -4], // 置中
symbolPosition: "end",
data: data.values[0].value,
z: 12,
@ -172,7 +186,7 @@ const generateCylinderChartOption = (data) => {
name: null,
type: "pictorialBar",
symbolSize: [barWidth, 5],
symbolOffset: [9, -4], // 置中
symbolOffset: [symbolOffset, -4], // 置中
symbolPosition: "end",
data: data.values[1].value,
itemStyle: {
@ -188,7 +202,7 @@ const generateCylinderChartOption = (data) => {
name: null,
type: "pictorialBar",
symbolSize: [barWidth, 5],
symbolOffset: [-9, 4], // 置中
symbolOffset: [-symbolOffset, 4], // 置中
symbolPosition: "start",
data: data.values[0].value,
z: 12,
@ -200,7 +214,7 @@ const generateCylinderChartOption = (data) => {
name: null,
type: "pictorialBar",
symbolSize: [barWidth, 5],
symbolOffset: [9, 4], // 置中
symbolOffset: [symbolOffset, 4], // 置中
symbolPosition: "start",
data: data.values[1].value,
itemStyle: {

10
src/components/dashboard/dashboardTag.vue
View File

@ -46,7 +46,9 @@ const handleClick = (ord) => {
if (ord) {
router.push({
name: "baja",
query: { ord: encodeURIComponent(ord) },
query: {
pagename: 'system',
ord: encodeURIComponent(ord) },
});
}
};
@ -54,8 +56,8 @@ const handleClick = (ord) => {
<template>
<a-card class="card h-full mb-4">
<div class="flex items-cemter justify-between mb-4">
<h5>System</h5>
<div class="flex items-center justify-between mb-4">
<h5>系統監控</h5>
<NavBuild />
</div>
<div v-if="flattenedItems.length > 0">
@ -93,7 +95,7 @@ const handleClick = (ord) => {
h5 {
margin: 0;
font-weight: 700;
font-size: 18px;
font-size: 33px;
color: #141414;
}
</style>

10
src/components/navbar/LeftSidebar.vue
View File

@ -18,7 +18,12 @@ const preOpenKeys = ref([]); // 用於儲存之前展開的 submenu
const filteredItems = computed(() => {
if (navStore.menuList && navStore.menuList.length > 0) {
return navStore.menuList[0].children;
if(navStore.menuList[0].children.length > 1){
return navStore.menuList[0].children;
}else{
return navStore.menuList[0].children[0].children;
}
}
return [];
});
@ -27,7 +32,8 @@ const handleClick = (ord) => {
if (ord) {
router.push({
name: "baja",
query: { ord: encodeURIComponent(ord) },
query: { pagename: 'system',
ord: encodeURIComponent(ord) },
});
}
};

4
src/components/navbar/NavAlarm.vue
View File

@ -44,7 +44,7 @@ onBeforeUnmount(() => {
<router-link
:to="{
name: 'baja',
query: { ord: encodeURIComponent(child.Ord) },
query: { pagename: 'alarm', ord: encodeURIComponent(child.Ord) },
}"
class="flex items-center justify-between gap-8"
>
@ -54,7 +54,7 @@ onBeforeUnmount(() => {
</a-menu-item>
</a-menu>
</template>
<a-badge :count="totalAlarmCount" :overflow-count="999">
<a-badge :count="totalAlarmCount" :overflow-count="999" class="!mt-3">
<a class="flex flex-col items-center">
<font-awesome-icon :icon="['fas', 'bell']" size="2x" />
<span class="text-sm">告警</span>

2
src/components/navbar/NavBuild.vue
View File

@ -26,7 +26,7 @@ watch(
<template>
<a-select
v-if="buildmenu && buildmenu.length > 0"
v-if="buildmenu && buildmenu.length > 1"
:default-value="buildmenu[0] ? buildmenu[0].label : null"
@change="handleBuildClick"
placeholder="請選擇建築"

17
src/components/navbar/NavWeather.vue
View File

@ -108,19 +108,24 @@ const updateTime = () => {
if (window.require && window.requirejs) {
window.requirejs(["baja!"], (baja) => {
const bAbsTime = baja.AbsTime.make({ jsDate: date });
bAbsTime.toDateTimeString().then((dateTimeStr) => {
dateTime.value = dateTimeStr;
});
bAbsTime
.toDateTimeString()
.then((dateTimeStr) => {
dateTime.value = dateTimeStr;
})
.catch((error) => {
console.error("轉換時間字串失敗:", error);
});
});
}
};
onMounted(() => {
setTimeout(() => {
initializeData(); // 初始化資料
}, 500);
updateTime(); // 更新時間
intervalId = setInterval(updateTime, 1000);
setTimeout(() => {
initializeData();
}, 1000);
});
onUnmounted(() => {

74
src/components/navbar/Navbar.vue
View File

@ -1,6 +1,6 @@
<script setup>
import { computed, defineProps } from "vue";
import { useRouter } from "vue-router";
import { computed, defineProps, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import NavBuild from "./NavBuild.vue";
import NavWeather from "./NavWeather.vue";
import NavAlarm from "./NavAlarm.vue";
@ -8,6 +8,7 @@ import useNiagaraDataStore from "@/stores/useNiagaraDataStore";
import useNavDataStore from "@/stores/useNavDataStore";
const router = useRouter();
const route = useRoute();
const niagaraStore = useNiagaraDataStore();
const navStore = useNavDataStore();
@ -16,8 +17,14 @@ const props = defineProps({
userName: String,
});
const activePageName = ref("home");
const openSystemMonitor = () => {
props.open();
};
function correctImageUrl(imageUrl) {
if (!imageUrl) return ''; // 處理空值的情況
if (!imageUrl) return ""; // 處理空值的情況
const stringUrlNiagara = "file:^";
const stringUrlNiagara2 = "station:|file:^";
@ -62,53 +69,64 @@ const dynamicMenu = computed(() =>
);
const userList = computed(() => niagaraStore.userList?.children || []);
watch(
() => route.query.pagename,
(newPagename) => {
activePageName.value = newPagename || "home" ; // 更新
},
{
immediate: true,
}
);
</script>
<template>
<a-layout-header class="header">
<div class="flex items-center">
<img v-if="logoUrl" :src="logoUrl" alt="Logo" class="logo" />
<a href="./index.html" class="text-2xl font-bold mx-4">{{
<a href="./index.html" class="text-[33px] font-bold mx-4">{{
systemName
}}</a>
<!-- <NavBuild /> -->
</div>
<ul class="nav-menu flex gap-10">
<li>
<li :class="{ 'link-active': activePageName === 'home' }">
<router-link
:to="
homeData.ord !== 'null'
? {
name: 'baja',
query: { ord: encodeURIComponent(homeData.ord) },
query: {
pagename: 'home',
ord: encodeURIComponent(homeData.ord),
},
}
: '/'
"
class="nav-link"
>
<img
:src="homeData.icon"
alt="home_icon"
class="icon"
/>
<img :src="homeData.icon" alt="home_icon" class="icon" />
<span class="text-sm">首頁</span>
</router-link>
</li>
<li>
<a
@click="props.open"
>
<img
:src="systemData.icon"
alt="system_icon"
class="icon"
/>
<li :class="{ 'link-active': activePageName === 'system' }">
<a @click.prevent="openSystemMonitor" class="nav-link">
<img :src="systemData.icon" alt="system_icon" class="icon" />
<span class="text-sm">系統監控</span>
</a>
</li>
<li v-for="item in dynamicMenu" :key="item.key">
<li
v-for="item in dynamicMenu"
:key="item.key"
:class="{ 'link-active': activePageName === item.ord }"
>
<router-link
:to="{ name: 'baja', query: { ord: encodeURIComponent(item.ord) } }"
:to="{
name: 'baja',
query: { pagename: item.ord, ord: encodeURIComponent(item.ord) },
}"
class="nav-link"
>
<img :src="item.icon" alt="menu_icon" class="icon" />
<span class="text-sm">{{ item.name }}</span>
@ -130,7 +148,10 @@ const userList = computed(() => niagaraStore.userList?.children || []);
<router-link
:to="{
name: 'baja',
query: { ord: encodeURIComponent(child.ord) },
query: {
pagename: 'user',
ord: encodeURIComponent(child.ord),
},
}"
>
{{ child.name }}
@ -158,6 +179,13 @@ const userList = computed(() => niagaraStore.userList?.children || []);
align-items: center;
}
.nav-menu li.link-active .icon {
filter: brightness(1.2);
}
.nav-menu li.link-active span {
color: #43daff;
}
.header {
background-color: #fff;
width: 100%;

3
src/style.css
View File

@ -1 +1,4 @@
@import "tailwindcss";
:root {
font-family:"Microsoft JhengHei", "Noto Sans CJK TC", STHeiti, sans-serif, serif;
}

2
src/views/dashboard/DashboardPage.vue
View File

@ -32,7 +32,7 @@ const elecStat = ref([
},
{
value: 0,
label: "容積占比",
label: "契約容量佔比",
unit: "%",
icon: "charging-station",
},

22
src/views/system/NotFound.vue
View File

@ -1,13 +1,28 @@
<script setup>
import { computed } from "vue";
import { computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import useNiagaraDataStore from "@/stores/useNiagaraDataStore";
const niagaraStore = useNiagaraDataStore();
const router = useRouter();
const homeData = computed(() => {
const data = niagaraStore.headerList.children?.[2] || {};
return {
...data,
};
});
onMounted(() => {
router.push({
name: "NotFound",
query: {
pagename: "notfound",
ord: null,
},
});
});
</script>
<template>
<a-result status="404" title="404" sub-title="抱歉，您造訪的頁面不存在">
@ -18,7 +33,10 @@ const homeData = computed(() => {
homeData.ord !== 'null'
? {
name: 'baja',
query: { ord: encodeURIComponent(homeData.ord) },
query: {
pagename: 'notfound',
ord: encodeURIComponent(homeData.ord),
},
}
: '/'
"