調整側邊欄寬度、更新麵包屑組件、修改標題顯示及樣式，新增 Vite 配置以設定輸出目錄
This commit is contained in:
parent
a91914fb43
commit
9bcbad5ee3
@ -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,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"
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
@ -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({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user