新增電廠設定頁面 | 修改 iframe 不出現scroll bar

src/components.d.ts

@@ -28,9 +28,11 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElStatistic: typeof import('element-plus/es')['ElStatistic']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']

src/components/Common/CustomIframe.vue

@@ -22,4 +22,8 @@ const props = defineProps({
 </script>
 
 <style scoped>
+iframe {
+  border: none;
+  overflow: hidden;
+}
 </style>

src/constants/menuConfig.js

@@ -118,7 +118,9 @@ export const menuConfig = [
     children: [
       {
         id: 'system-factory',
-        title: '電廠設定'
+        title: '電廠設定',
+        path: '/plantSetting',
+        routeName: 'PlantSetting'
       },
       {
         id: 'system-account',

src/router/index.js

@@ -3,6 +3,7 @@ import Home from "../views/Home.vue";
 import PlantsOverview from "../views/PlantsOverview.vue";
 import PlantReport from "../views/PlantReport.vue";
 import PlantInfo from "../views/PlantInfo.vue";
+import PlantSetting from "../views/PlantSetting.vue";
 
 const routes = [
   {
@@ -47,6 +48,16 @@ const routes = [
       parentTitle: "報表查詢",
     },
   },
+  {
+    path: "/plantSetting",
+    name: "PlantSetting",
+    component: PlantSetting,
+    meta: {
+      title: "電廠設定",
+      menuGroup: "report",
+      parentTitle: "系統設定",
+    },
+  }
 ];
 
 const router = createRouter({

src/views/PlantInfo.vue

@@ -93,12 +93,12 @@ const tabList = computed(() => [
     icon: ScaleToOriginal,
     src: `/ord/station:|slot:/${siteId.value}/Information|view:?fullScreen=true`,
   },
-  {
+  // {
-    name: "device-info",
+  //   name: "device-info",
-    label: "設備資訊",
+  //   label: "設備資訊",
-    icon: Document,
+  //   icon: Document,
-    src: `/ord/station:|slot:/${siteId.value}/DeviceInformation|view:?fullScreen=true`,
+  //   src: `/ord/station:|slot:/${siteId.value}/DeviceInformation|view:?fullScreen=true`,
-  },
+  // },
   {
     name: "history-data",
     label: "歷史資料",

src/views/PlantSetting.vue

@@ -0,0 +1,119 @@
+<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>
+          電廠 : 
+          <el-select
+            v-model="selectValue"
+            placeholder="Select"
+            size="large"
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </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-setting'">
+              異常紀錄
+            </template>
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import Breadcrumb from "../components/Common/Breadcrumb.vue";
+import CustomIframe from "../components/Common/CustomIframe.vue";
+import { ScaleToOriginal, Warning } from "@element-plus/icons-vue";
+
+const activeName = ref("basic-info");
+const options = [
+  {
+    value: "J022270001",
+    label: "四磺子坪",
+  },
+  {
+    value: "J033110001",
+    label: "宜蘭大清水",
+  },
+  {
+    value: "J033110002",
+    label: "宜蘭小清水",
+  },
+];
+
+// 預設選取第一個 options 的 value
+const selectValue = ref(options[0].value);
+const siteId = computed(() => selectValue.value);
+
+const handleClick = (tab, event) => {
+  console.log("tab", tab, event);
+};
+
+const tabList = computed(() => [
+  {
+    name: "basic-info",
+    label: "基本資料",
+    icon: ScaleToOriginal,
+    src: `/ord/station:|slot:/${siteId.value}/Information/InformationSet|view:InformationSet`,
+  },
+  {
+    name: "abnormal-setting",
+    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>