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

調整側邊欄寬度、更新麵包屑組件、修改標題顯示及樣式，新增 Vite 配置以設定輸出目錄

Browse Source
This commit is contained in:
huliang 2025-11-13 16:14:17 +08:00
parent a91914fb43
commit 9bcbad5ee3
6 changed files with 11 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -34,7 +34,7 @@ onUnmounted(() => {
<div class="common-layout">
<el-container>
<template v-if="!isMobile">
<el-aside :width="isCollapse ? '0px' : '280px'">
<el-aside :width="isCollapse ? '0px' : '240px'">
<Sidebar :isCollapse="isCollapse" />
</el-aside>
</template>

3
src/components/Common/Breadcrumb.vue
View File

@ -3,6 +3,9 @@
separator="/"
style="margin: 15px 10px; font-size: 1.05rem; opacity: 0.9"
>
<el-breadcrumb-item>
<span class="title">工控運維管理平台</span>
</el-breadcrumb-item>
<el-breadcrumb-item
v-for="(item, idx) in breadcrumbs"
:key="item.path || idx"

2
src/components/Navbar.vue
View File

@ -18,7 +18,7 @@
<Breadcrumb />
</div>
<div class="title-area">
<span class="title">工控運維管理平台</span>
<!-- <span class="title">工控運維管理平台</span> -->
<el-dropdown size="large">
<el-button type="text" circle>
<el-avatar :icon="UserFilled" />

4
src/components/Sidebar.vue
View File

@ -11,7 +11,7 @@
<img
src="../assets/logo.svg"
alt="logo"
style="width: 40px; height: 40px"
style="width: 30px; height: 30px"
/>
<span>結元能源</span>
</div>
@ -111,7 +111,7 @@ const activeMenuIndex = computed(() => {
.title-area {
display: flex;
align-items: center;
justify-content: center;
justify-content: start;
padding: 20px;
gap: 10px;
font-size: 1.8rem;

333
src/views/PlantsOverview copy.vue
View File

@ -1,333 +0,0 @@
<template>
<Breadcrumb />
<el-row :gutter="20" style="margin-top: 20px">
<el-col :xs="24">
<el-card shadow="always" class="custom-card">
<template #header>
<span style="">電廠總覽</span>
</template>
<el-row :gutter="20">
<el-col :xs="24" style="margin-bottom: 15px">
<div class="button-row">
<el-button type="info" size="large">全選</el-button>
<el-button type="primary" size="large"
>新北市
<span class="badge">1</span>
</el-button>
<el-button type="primary" size="large"
>宜蘭縣
<span class="badge">2</span>
</el-button>
</div>
</el-col>
<el-col :xs="24" style="margin-bottom: 15px">
<div class="button-row" style="display: flex; gap: 12px">
<el-button type="info" size="large">全選</el-button>
<el-checkbox
v-model="checked1"
size="large"
style="margin: 0"
border
>
<span style="vertical-align: middle; margin-right: 4px"
>設備正常</span
>
<el-icon
style="vertical-align: middle"
color="#67C23A"
size="large"
><CircleCheckFilled
/></el-icon>
</el-checkbox>
<el-checkbox
v-model="checked2"
size="large"
style="margin: 0"
border
>
<span style="vertical-align: middle; margin-right: 4px"
>設備斷線</span
>
<el-icon
style="vertical-align: middle"
color="#E6A23C"
size="large"
><WarningFilled
/></el-icon>
</el-checkbox>
<el-checkbox v-model="checked3" size="large" border>
<span style="vertical-align: middle; margin-right: 4px"
>設備斷線</span
>
<el-icon
style="vertical-align: middle"
color="#F56C6C"
size="large"
><RemoveFilled
/></el-icon>
</el-checkbox>
</div>
</el-col>
<el-col :xs="24" style="margin-bottom: 15px">
<div
class="button-row"
style="display: flex; gap: 10px; align-items: center"
>
<el-button size="large" text>排序條件</el-button>
<el-select
v-model="value1"
placeholder="Select"
style="width: 150px"
size="large"
>
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="value2"
placeholder="Select"
style="width: 150px"
size="large"
>
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :xs="24">
<el-row :gutter="40" style="margin-top: 10px">
<el-col
v-for="plant in plants"
:key="plant.name"
:xs="24"
:sm="12"
:md="8"
>
<el-card class="plants-card">
<div class="plant-img-wrap">
<img :src="plant.img" class="plant-img" />
</div>
<div class="plant-info-tilte">
<el-icon :color="plant.statusColor" size="25">
<component :is="plant.statusIcon" />
</el-icon>
<h3>{{ plant.name }}</h3>
<p>
<span>{{ plant.temp }}</span>
<el-icon size="25">
<Sunny />
</el-icon>
</p>
</div>
<ul class="plant-info-list">
<li>
<span>發電量</span>
<div>
<span class="value">{{ plant.power }}</span>
<span>kWh</span>
</div>
</li>
<li>
<span>PR值</span>
<div>
<span class="value">{{ plant.pr }}</span>
<span>%</span>
</div>
</li>
</ul>
<LineChart
:data="plant.weekTrend"
:minHeight="180"
yAxisName="kWh"
:smooth="true"
/>
</el-card>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from "vue";
import { ElIcon } from "element-plus";
import {
CircleCheckFilled,
WarningFilled,
RemoveFilled,
Sunny,
} from "@element-plus/icons-vue";
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(false);
const value1 = ref(1);
const value2 = ref(1);
const options1 = [
{ value: 1, label: "發電量 - 正序" },
{ value: 2, label: "發電量 - 倒序" },
];
const options2 = [
{ value: 1, label: "PR值 - 正序" },
{ value: 2, label: "PR值 - 倒序" },
];
const plants = [
{
name: "四磺子坪",
power: 185,
pr: 90,
temp: "25°C",
status: "正常",
statusColor: "#67C23A",
statusIcon: CircleCheckFilled,
img: "https://192.168.0.206:8820/file/images/plants/plant01.png",
weekTrend: [
{ time: "周一", value: 120 },
{ time: "周二", value: 132 },
{ time: "周三", value: 121 },
{ time: "周四", value: 134 },
{ time: "周五", value: 180 },
{ time: "周六", value: 230 },
{ time: "周日", value: 210 },
],
},
{
name: "大清水",
power: 170,
pr: 91,
temp: "27°C",
status: "正常",
statusColor: "#67C23A",
statusIcon: CircleCheckFilled,
img: "https://192.168.0.206:8820/file/images/plants/plant02.png",
weekTrend: [
{ time: "周一", value: 110 },
{ time: "周二", value: 120 },
{ time: "周三", value: 95 },
{ time: "周四", value: 230 },
{ time: "周五", value: 150 },
{ time: "周六", value: 200 },
{ time: "周日", value: 110 },
],
},
{
name: "大清水",
power: 117,
pr: 93,
temp: "27°C",
status: "正常",
statusColor: "#67C23A",
statusIcon: CircleCheckFilled,
img: "https://192.168.0.206:8820/file/images/plants/plant03.png",
weekTrend: [
{ time: "周一", value: 100 },
{ time: "周二", value: 140 },
{ time: "周三", value: 120 },
{ time: "周四", value: 180 },
{ time: "周五", value: 140 },
{ time: "周六", value: 200 },
{ time: "周日", value: 120 },
],
},
];
</script>
<style scoped>
.badge {
padding: 0.25em 0.6em;
font-size: 75%;
line-height: 1.3;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 4px;
background: var(--el-color-primary-dark-2);
margin-left: 0.6em;
}
:deep(.el-card.plants-card) {
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
background: #fff;
overflow: hidden;
padding: 0;
}
:deep(.el-card.plants-card) .el-card__body {
padding: 0;
}
.plant-img-wrap {
width: 100%;
height: 250px;
background: #eee;
overflow: hidden;
}
.plant-img {
width: 100%;
object-fit: cover;
display: block;
}
.plant-info-tilte {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
background: #fff;
gap: 10px;
border-bottom: 1px solid #f0f0f0;
font-size: 1rem;
color: #666;
}
.plant-info-tilte h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
flex: 1;
}
.plant-info-tilte p {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
}
.plant-info-list {
list-style: none;
padding: 10px 20px;
margin: 0;
}
.plant-info-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 8px 0;
font-size: 1rem;
}
.plant-info-list .value {
color: #409eff;
font-size: 1.2rem;
font-weight: bold;
margin: 0 8px;
width: 60%;
text-align: center;
}
</style>

4
vite.config.js
View File

@ -7,6 +7,10 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// https://vite.dev/config/
export default defineConfig({
base: "./",
build: {
outDir: "../dist",
emptyOutDir: true,
},
plugins: [
vue(),
AutoImport({