140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<template>
|
|
<Breadcrumb />
|
|
<el-row :gutter="20" style="margin-top: 20px">
|
|
<el-col :xs="24">
|
|
<el-card
|
|
shadow="always"
|
|
class="custom-card"
|
|
style="margin-bottom: 0"
|
|
:body-style="{ paddingTop: '16px', paddingBottom: '0' }"
|
|
>
|
|
<template #header>
|
|
<span style="">{{ title }}</span>
|
|
</template>
|
|
<el-tabs
|
|
v-model="activeName"
|
|
type="border-card"
|
|
class="demo-tabs"
|
|
@tab-click="handleClick"
|
|
>
|
|
<el-tab-pane
|
|
v-for="tab in tabList"
|
|
:key="tab.name"
|
|
:name="tab.name"
|
|
>
|
|
<template #label>
|
|
<el-icon><component :is="tab.icon" /></el-icon>
|
|
<span style="margin-left: 4px">{{ tab.label }}</span>
|
|
</template>
|
|
<template v-if="tab.src && activeName === tab.name">
|
|
<CustomIframe :src="tab.src" minHeight="calc(100vh - 300px)" />
|
|
</template>
|
|
<template v-else-if="tab.name === 'abnormal-record'">
|
|
異常紀錄
|
|
</template>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import Breadcrumb from "../components/Common/Breadcrumb.vue";
|
|
import CustomIframe from "../components/Common/CustomIframe.vue";
|
|
import {
|
|
Odometer,
|
|
Postcard,
|
|
ScaleToOriginal,
|
|
Document,
|
|
Coin,
|
|
Warning,
|
|
Operation,
|
|
} from "@element-plus/icons-vue";
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const title = computed(() => {
|
|
if (route.params.id === "1") return "四磺子坪";
|
|
if (route.params.id === "2") return "宜蘭大清水";
|
|
if (route.params.id === "3") return "宜蘭小清水";
|
|
return "";
|
|
});
|
|
|
|
const siteId = computed(() => {
|
|
if (route.params.id === "1") return "J022270001";
|
|
if (route.params.id === "2") return "J033110001";
|
|
if (route.params.id === "3") return "J033110002";
|
|
return "";
|
|
});
|
|
|
|
const activeName = ref("system-status");
|
|
const handleClick = (tab, event) => {
|
|
console.log("tab", tab, event);
|
|
};
|
|
|
|
const tabList = computed(() => [
|
|
{
|
|
name: "system-status",
|
|
label: "系統狀態",
|
|
icon: Odometer,
|
|
src: `/ord/station:|slot:/${siteId.value}/PID|view:?fullScreen=true`,
|
|
},
|
|
{
|
|
name: "realtime-info",
|
|
label: "即時資訊",
|
|
icon: Postcard,
|
|
src: `/ord/station:|slot:/${siteId.value}/RealTimeInformation|view:?fullScreen=true`,
|
|
},
|
|
{
|
|
name: "basic-info",
|
|
label: "基本資料",
|
|
icon: ScaleToOriginal,
|
|
src: `/ord/station:|slot:/${siteId.value}/Information|view:?fullScreen=true`,
|
|
},
|
|
// {
|
|
// name: "device-info",
|
|
// label: "設備資訊",
|
|
// icon: Document,
|
|
// src: `/ord/station:|slot:/${siteId.value}/DeviceInformation|view:?fullScreen=true`,
|
|
// },
|
|
{
|
|
name: "history-data",
|
|
label: "歷史資料",
|
|
icon: Coin,
|
|
src: `/ord/station:|slot:/${siteId.value}/History|view:?fullScreen=true`,
|
|
},
|
|
{
|
|
name: "abnormal-record",
|
|
label: "異常紀錄",
|
|
icon: Warning,
|
|
src: null,
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.el-tabs__header) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.el-tabs--border-card {
|
|
border: none;
|
|
}
|
|
|
|
:deep(.el-tabs__item) {
|
|
margin-top: 0px !important;
|
|
margin-left: 0px !important;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
:deep(.el-tabs__item.is-active) {
|
|
border-top-color: var(--el-border-color);
|
|
}
|
|
|
|
:deep(.el-tabs--border-card) > .el-tabs__content {
|
|
padding: 10px 0px;
|
|
}
|
|
</style>
|