調整側邊欄寬度、更新麵包屑組件、修改標題顯示及樣式，新增 Vite 配置以設定輸出目錄
This commit is contained in:
parent
a91914fb43
commit
9bcbad5ee3
@ -34,7 +34,7 @@ onUnmounted(() => {
|
|||||||
<div class="common-layout">
|
<div class="common-layout">
|
||||||
<el-container>
|
<el-container>
|
||||||
<template v-if="!isMobile">
|
<template v-if="!isMobile">
|
||||||
<el-aside :width="isCollapse ? '0px' : '280px'">
|
<el-aside :width="isCollapse ? '0px' : '240px'">
|
||||||
<Sidebar :isCollapse="isCollapse" />
|
<Sidebar :isCollapse="isCollapse" />
|
||||||
</el-aside>
|
</el-aside>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -3,6 +3,9 @@
|
|||||||
separator="/"
|
separator="/"
|
||||||
style="margin: 15px 10px; font-size: 1.05rem; opacity: 0.9"
|
style="margin: 15px 10px; font-size: 1.05rem; opacity: 0.9"
|
||||||
>
|
>
|
||||||
|
<el-breadcrumb-item>
|
||||||
|
<span class="title">工控運維管理平台</span>
|
||||||
|
</el-breadcrumb-item>
|
||||||
<el-breadcrumb-item
|
<el-breadcrumb-item
|
||||||
v-for="(item, idx) in breadcrumbs"
|
v-for="(item, idx) in breadcrumbs"
|
||||||
:key="item.path || idx"
|
:key="item.path || idx"
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
<Breadcrumb />
|
<Breadcrumb />
|
||||||
</div>
|
</div>
|
||||||
<div class="title-area">
|
<div class="title-area">
|
||||||
<span class="title">工控運維管理平台</span>
|
<!-- <span class="title">工控運維管理平台</span> -->
|
||||||
<el-dropdown size="large">
|
<el-dropdown size="large">
|
||||||
<el-button type="text" circle>
|
<el-button type="text" circle>
|
||||||
<el-avatar :icon="UserFilled" />
|
<el-avatar :icon="UserFilled" />
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
<img
|
<img
|
||||||
src="../assets/logo.svg"
|
src="../assets/logo.svg"
|
||||||
alt="logo"
|
alt="logo"
|
||||||
style="width: 40px; height: 40px"
|
style="width: 30px; height: 30px"
|
||||||
/>
|
/>
|
||||||
<span>結元能源</span>
|
<span>結元能源</span>
|
||||||
</div>
|
</div>
|
||||||
@ -111,7 +111,7 @@ const activeMenuIndex = computed(() => {
|
|||||||
.title-area {
|
.title-area {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: start;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
font-size: 1.8rem;
|
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/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
base: "./",
|
base: "./",
|
||||||
|
build: {
|
||||||
|
outDir: "../dist",
|
||||||
|
emptyOutDir: true,
|
||||||
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue(),
|
||||||
AutoImport({
|
AutoImport({
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user