圓柱體chart | 系統監控的menu新增大類
This commit is contained in:
parent
20d45b4277
commit
d2a9027869
@ -92,10 +92,11 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
|
||||
class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
|
||||
>
|
||||
<li class="text-white">
|
||||
<a
|
||||
href="/logout"
|
||||
<router-link
|
||||
to="logout"
|
||||
type="link"
|
||||
class="flex flex-col justify-center items-center"
|
||||
>{{ $t("sign_out") }}</a
|
||||
>{{ $t("sign_out") }}</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
@ -108,7 +109,7 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
|
||||
|
||||
<style lang="css">
|
||||
.sub-drawer {
|
||||
@apply bg-dark bg-opacity-80 shadow-xl !important;
|
||||
@apply bg-dark bg-opacity-90 shadow-xl !important;
|
||||
}
|
||||
/**menu**/
|
||||
.menu-box {
|
||||
|
||||
@ -7,9 +7,10 @@ import useUserInfoStore from "@/stores/useUserInfoStore";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { locale } = useI18n();
|
||||
const store = useUserInfoStore();
|
||||
|
||||
const buildingStore = useBuildingStore();
|
||||
|
||||
const openKeys = ref([]); // 追蹤當前打開的子菜單
|
||||
|
||||
const iniFroList = async () => {
|
||||
const res = await getAuth(locale.value);
|
||||
|
||||
@ -42,20 +43,12 @@ const onClose = () => {
|
||||
open.value = false;
|
||||
};
|
||||
|
||||
const navigateToSub = (sub) => {
|
||||
// buildingStore.selectedSystem = sub;
|
||||
onClose()
|
||||
// console.log("navigateToSub", sub);
|
||||
// let pageAct = JSON.parse(sessionStorage.getItem("pageAct"));
|
||||
// pageAct = {
|
||||
// ...pageAct,
|
||||
// sysMainTag: sub.main_system_tag,
|
||||
// sysSubTag: sub.sub_system_tag,
|
||||
// sysSubName: sub.full_name,
|
||||
// };
|
||||
// sessionStorage.setItem("lastPage", "systemMonitor");
|
||||
// sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
|
||||
// window.location.href = "/file/index.html";
|
||||
const handleOpenChange = (keys) => {
|
||||
if (keys.length > 0) {
|
||||
openKeys.value = [keys[keys.length - 1]]; // 只保留最後一個打開的子菜單
|
||||
} else {
|
||||
openKeys.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
@ -85,7 +78,7 @@ onMounted(() => {
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'home']"
|
||||
size="2x"
|
||||
class=" w-10 m-auto"
|
||||
class="w-10 m-auto"
|
||||
/>
|
||||
{{ $t("home") }}
|
||||
</router-link>
|
||||
@ -115,32 +108,69 @@ onMounted(() => {
|
||||
<font-awesome-icon
|
||||
:icon="['fas', page.icon]"
|
||||
size="2x"
|
||||
class=" w-10 m-auto"
|
||||
class="w-10 m-auto"
|
||||
/>
|
||||
{{ page.subName }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<a-drawer :width="200" placement="left" :open="open" :closable="false" @close="onClose" class="sub-drawer"
|
||||
:maskStyle="{ opacity: 0.5 }" :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }">
|
||||
<ul>
|
||||
<li v-for="sub in buildingStore.subSys" :key="sub.sub_system_tag"
|
||||
class="group text-xl text-center py-3 hover:bg-black" @click="() => navigateToSub(sub)">
|
||||
|
||||
|
||||
<a-drawer
|
||||
:width="250"
|
||||
placement="left"
|
||||
:open="open"
|
||||
:closable="false"
|
||||
@close="onClose"
|
||||
class="sub-drawer"
|
||||
:maskStyle="{ opacity: 0 }"
|
||||
:bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
|
||||
>
|
||||
<a-menu
|
||||
mode="inline"
|
||||
theme="dark"
|
||||
class="text-lg bg-transparent"
|
||||
:openKeys="openKeys"
|
||||
@openChange="handleOpenChange"
|
||||
>
|
||||
<a-sub-menu
|
||||
v-for="main in buildingStore.mainSubSys"
|
||||
:key="main.main_system_tag"
|
||||
:title="main.full_name"
|
||||
>
|
||||
<a-menu-item
|
||||
v-for="sub in main.history_Sub_systems"
|
||||
:key="sub.sub_system_tag"
|
||||
@click="() => onClose()"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'sub_system', params: { main_system_id: sub.main_system_tag, sub_system_id: sub.sub_system_tag }, }"
|
||||
type="link" class="group-hover:text-info">
|
||||
|
||||
:to="{
|
||||
name: 'sub_system',
|
||||
params: {
|
||||
main_system_id: main.main_system_tag,
|
||||
sub_system_id: sub.sub_system_tag,
|
||||
},
|
||||
}"
|
||||
>
|
||||
{{ sub.full_name }}
|
||||
</router-link>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</a-drawer>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.router-link-active.router-link-exact-active {
|
||||
color: #93c0dc;
|
||||
}
|
||||
|
||||
::v-deep .ant-menu-submenu-title:active {
|
||||
background-color: #35759d !important;
|
||||
}
|
||||
|
||||
::v-deep .ant-menu-item-selected {
|
||||
background-color: #35759d !important;
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -94,6 +94,16 @@ const router = createRouter({
|
||||
name: "mytestfile",
|
||||
component: Test,
|
||||
},
|
||||
{
|
||||
path: "/logout",
|
||||
name: "logout",
|
||||
beforeEnter: (to, from, next) => {
|
||||
const auth = useUserInfoStore();
|
||||
document.cookie = "JWT-Authorization=";
|
||||
auth.user.token = "";
|
||||
next({ path: "/login", replace: true });
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -105,13 +115,6 @@ router.beforeEach(async (to, from, next) => {
|
||||
const auth = useUserInfoStore();
|
||||
const token = useGetCookie("JWT-Authorization");
|
||||
|
||||
if (location.pathname.includes("logoutConfirm")) {
|
||||
document.cookie = "JWT-Authorization=";
|
||||
auth.user.token = "";
|
||||
// 清除 cookie token
|
||||
next({ path: "/login" });
|
||||
}
|
||||
|
||||
if ((authRequired && !token) || to.path === "/") {
|
||||
auth.user.token = "";
|
||||
next({ path: "/login" });
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import BarChart from "@/components/chart/BarChart.vue";
|
||||
|
||||
// 昨天與今天的用電比較資料
|
||||
// 定義用電比較資料
|
||||
const yesterdayTodayData = {
|
||||
data: {
|
||||
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
values: [
|
||||
{
|
||||
@ -16,12 +16,10 @@ const yesterdayTodayData = {
|
||||
value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// 本週與上週的用電比較資料
|
||||
// 本週與上週用電比較資料
|
||||
const weekComparisonData = {
|
||||
data: {
|
||||
categories: ["週五", "週六", "週日", "週一", "週二", "週三", "週四"],
|
||||
values: [
|
||||
{
|
||||
@ -32,13 +30,13 @@ const weekComparisonData = {
|
||||
name: "Last week's electricity consumption",
|
||||
value: [800, 150, 300, 750, 900, 900, 800],
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// 生成每個圖表的 option，並隱藏 legend
|
||||
const generateChartOption = (categories, values) => ({
|
||||
// 生成圓柱圖表的 option
|
||||
const generateCylinderChartOption = (categories, values) => {
|
||||
const barWidth = 15; // 圓柱體寬度
|
||||
return {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: categories,
|
||||
@ -64,27 +62,81 @@ const generateChartOption = (categories, values) => ({
|
||||
series: [
|
||||
{
|
||||
name: values[0].name,
|
||||
data: values[0].value,
|
||||
type: "bar",
|
||||
barWidth: "35%",
|
||||
barWidth: barWidth,
|
||||
data: values[0].value,
|
||||
itemStyle: {
|
||||
color: "#00BFFF", // 藍色
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1, // 向右漸層
|
||||
y2: 0, // 水平漸層
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#acd7e4" }, // 左側顏色
|
||||
{ offset: 0.5, color: "#0ca9d4" }, // 中間顏色
|
||||
{ offset: 1, color: "#acd7e4" }, // 右側顏色
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: values[1].name,
|
||||
data: values[1].value,
|
||||
type: "bar",
|
||||
barWidth: "35%",
|
||||
barWidth: barWidth,
|
||||
data: values[1].value,
|
||||
itemStyle: {
|
||||
color: "#FFD700", // 黃色
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1, // 向右漸層
|
||||
y2: 0, // 水平漸層
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#fff6b3" }, // 左側顏色
|
||||
{ offset: 0.5, color: "#ffe000" }, // 中間顏色
|
||||
{ offset: 1, color: "#fff6b3" }, // 右側顏色
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
// 圓柱頂部
|
||||
{
|
||||
name: null,
|
||||
type: "pictorialBar",
|
||||
symbolSize: [barWidth, 5],
|
||||
symbolOffset: [-9, -5],
|
||||
symbolPosition: "end",
|
||||
data: values[0].value,
|
||||
z: 12,
|
||||
itemStyle: {
|
||||
color: "#0b86a7",
|
||||
borderWidth: 10,
|
||||
borderColor: "#fff",
|
||||
borderType: "solid",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: null,
|
||||
type: "pictorialBar",
|
||||
symbolSize: [barWidth, 5],
|
||||
symbolOffset: [9, -5],
|
||||
symbolPosition: "end",
|
||||
data: values[1].value,
|
||||
itemStyle: {
|
||||
color: "#c3ae1a",
|
||||
borderWidth: 10,
|
||||
borderColor: "#fff",
|
||||
borderType: "solid",
|
||||
},
|
||||
z: 12,
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
right: "3%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
@ -92,21 +144,28 @@ const generateChartOption = (categories, values) => ({
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: function (params) {
|
||||
// 僅顯示 bar 系列的資料
|
||||
const barData = params.filter((item) => item.seriesType === "bar");
|
||||
return barData
|
||||
.map((item) => `${item.seriesName}: ${item.data}`)
|
||||
.join("<br/>");
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false, // 隱藏 legend
|
||||
},
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// 分別生成每個圖表的 option
|
||||
const yesterdayTodayOption = generateChartOption(
|
||||
yesterdayTodayData.data.categories,
|
||||
yesterdayTodayData.data.values
|
||||
const yesterdayTodayOption = generateCylinderChartOption(
|
||||
yesterdayTodayData.categories,
|
||||
yesterdayTodayData.values
|
||||
);
|
||||
|
||||
const weekComparisonOption = generateChartOption(
|
||||
weekComparisonData.data.categories,
|
||||
weekComparisonData.data.values
|
||||
const weekComparisonOption = generateCylinderChartOption(
|
||||
weekComparisonData.categories,
|
||||
weekComparisonData.values
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user