334 lines
8.5 KiB
Vue
334 lines
8.5 KiB
Vue
<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>
|