Compare commits
2 Commits
a91914fb43
...
0e33a0b64f
| Author | SHA1 | Date | |
|---|---|---|---|
| 0e33a0b64f | |||
| 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,19 +3,15 @@
|
||||
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"
|
||||
:to="
|
||||
item.path && idx !== breadcrumbs.length - 1
|
||||
? { path: item.path }
|
||||
: undefined
|
||||
"
|
||||
:key=" idx"
|
||||
:to="item.name ? { name: item.name } : undefined"
|
||||
>
|
||||
<span v-if="!item.path || idx === breadcrumbs.length - 1">{{
|
||||
item.title || item.name
|
||||
}}</span>
|
||||
<span v-else>{{ item.title || item.name }}</span>
|
||||
<span>{{ item.title }}</span>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
@ -25,84 +21,30 @@ import { computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { menuConfig } from "../../constants/menuConfig.js";
|
||||
|
||||
// 更簡潔的選單查找與麵包屑組裝
|
||||
function findMenuItem(route) {
|
||||
for (const menu of menuConfig) {
|
||||
for (const child of menu.children) {
|
||||
// 靜態路由、名稱
|
||||
if (child.routeName === route.name || child.path === route.path) {
|
||||
return { parent: menu, item: child };
|
||||
const route = useRoute();
|
||||
|
||||
function findBreadcrumbs(menu, route, path = []) {
|
||||
for (const item of menu) {
|
||||
const currentPath = [...path, { title: item.title, name: item.routeName || null }];
|
||||
if (item.routeName === route.name) {
|
||||
if (item.params) {
|
||||
const paramsMatch = Object.keys(item.params).every(key => item.params[key] == route.params[key]);
|
||||
if (paramsMatch) {
|
||||
return currentPath;
|
||||
}
|
||||
// 動態路由（如 /plant/:id）
|
||||
if (
|
||||
child.routeName === "PlantInfo" &&
|
||||
route.path &&
|
||||
route.path.startsWith("/plant/")
|
||||
) {
|
||||
return { parent: menu, item: child };
|
||||
} else {
|
||||
return currentPath;
|
||||
}
|
||||
}
|
||||
if (item.children) {
|
||||
const result = findBreadcrumbs(item.children, route, currentPath);
|
||||
if (result) return result;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function buildBreadcrumb(route) {
|
||||
const match = findMenuItem(route);
|
||||
if (!match) return [];
|
||||
const crumbs = [
|
||||
{
|
||||
name: match.parent.title,
|
||||
title: match.parent.title,
|
||||
path: null,
|
||||
meta: { title: match.parent.title },
|
||||
},
|
||||
];
|
||||
let itemTitle = match.item.title;
|
||||
if (route.name === "PlantInfo" && route.params.id) {
|
||||
const plantNames = {
|
||||
"1": "四磺子坪",
|
||||
"2": "宜蘭大清水",
|
||||
"3": "宜蘭小清水",
|
||||
};
|
||||
itemTitle = plantNames[route.params.id] || match.item.title;
|
||||
}
|
||||
crumbs.push({
|
||||
name: itemTitle,
|
||||
title: itemTitle,
|
||||
path: match.item.path,
|
||||
meta: { title: itemTitle },
|
||||
});
|
||||
return crumbs;
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
const menuBreadcrumbs = buildBreadcrumb(route);
|
||||
if (menuBreadcrumbs.length > 0) {
|
||||
return menuBreadcrumbs;
|
||||
}
|
||||
const matchedRoutes = route.matched.filter((r) => r.meta && r.meta.title);
|
||||
if (matchedRoutes.length === 0) {
|
||||
return [];
|
||||
}
|
||||
const currentRoute = matchedRoutes[matchedRoutes.length - 1];
|
||||
if (currentRoute.meta.parentTitle) {
|
||||
return [
|
||||
{
|
||||
title: currentRoute.meta.parentTitle,
|
||||
path: null,
|
||||
},
|
||||
{
|
||||
title: currentRoute.meta.title,
|
||||
path: currentRoute.path,
|
||||
},
|
||||
];
|
||||
}
|
||||
return matchedRoutes.map((r) => ({
|
||||
title: r.meta.title,
|
||||
name: r.name,
|
||||
path: r.path,
|
||||
}));
|
||||
return findBreadcrumbs(menuConfig, route) || [];
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -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,12 +11,12 @@
|
||||
<img
|
||||
src="../assets/logo.svg"
|
||||
alt="logo"
|
||||
style="width: 40px; height: 40px"
|
||||
style="width: 30px; height: 30px"
|
||||
/>
|
||||
<span>結元能源</span>
|
||||
</div>
|
||||
|
||||
<el-sub-menu v-for="menu in menuConfig" :key="menu.id" :index="menu.id">
|
||||
<el-sub-menu v-for="menu in menuConfig" :key="menu.title" :index="menu.title">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="getIconComponent(menu.icon)" />
|
||||
@ -26,8 +26,8 @@
|
||||
|
||||
<el-menu-item
|
||||
v-for="item in menu.children"
|
||||
:key="item.id"
|
||||
:index="item.path || item.id"
|
||||
:key="item.title"
|
||||
:index="item.title"
|
||||
@click="handleMenuClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
@ -73,12 +73,9 @@ const getIconComponent = (iconName) => {
|
||||
|
||||
// 處理選單點擊
|
||||
const handleMenuClick = (item) => {
|
||||
if (item.path) {
|
||||
if (item.routeName && item.params) {
|
||||
router.push({ name: item.routeName, params: item.params });
|
||||
} else {
|
||||
router.push(item.path);
|
||||
}
|
||||
if (item.routeName) {
|
||||
router.push({ name: item.routeName, params: item.params || {} });
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
@ -87,12 +84,12 @@ const activeMenuIndex = computed(() => {
|
||||
// 嘗試根據當前路由匹配選單項
|
||||
for (const menu of menuConfig) {
|
||||
for (const item of menu.children) {
|
||||
if (item.routeName === route.name || item.path === route.path) {
|
||||
return item.path || item.id;
|
||||
if (item.routeName === route.name) {
|
||||
return item.title;
|
||||
}
|
||||
}
|
||||
}
|
||||
return route.name || route.path;
|
||||
return '';
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -111,7 +108,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,129 +1,102 @@
|
||||
export const menuConfig = [
|
||||
{
|
||||
id: 'overview',
|
||||
title: '總覽',
|
||||
icon: 'Location',
|
||||
children: [
|
||||
{
|
||||
id: 'PlantsMap',
|
||||
title: '地圖總覽',
|
||||
path: '/plantsMap',
|
||||
routeName: 'PlantsMap'
|
||||
},
|
||||
{
|
||||
id: 'PlantsOverview',
|
||||
title: '電廠總覽',
|
||||
path: '/plants',
|
||||
routeName: 'PlantsOverview'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'factory-info',
|
||||
title: '電廠資訊',
|
||||
icon: 'Postcard',
|
||||
children: [
|
||||
{
|
||||
id: 'plant-1',
|
||||
title: '四磺子坪',
|
||||
path: '/plant/1',
|
||||
routeName: 'PlantInfo',
|
||||
params: { id: 1 }
|
||||
},
|
||||
{
|
||||
id: 'plant-2',
|
||||
title: '宜蘭大清水',
|
||||
path: '/plant/2',
|
||||
routeName: 'PlantInfo',
|
||||
params: { id: 2 }
|
||||
},
|
||||
{
|
||||
id: 'plant-3',
|
||||
title: '宜蘭小清水',
|
||||
path: '/plant/3',
|
||||
routeName: 'PlantInfo',
|
||||
params: { id: 3 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'inspection',
|
||||
title: '巡檢系統',
|
||||
icon: 'DocumentChecked',
|
||||
children: [
|
||||
{
|
||||
id: 'inspection-task',
|
||||
title: '巡檢任務'
|
||||
title: '巡檢任務',
|
||||
routeName: 'PatrolMission',
|
||||
},
|
||||
{
|
||||
id: 'inspection-setting',
|
||||
title: '巡檢設定'
|
||||
title: '巡檢設定',
|
||||
routeName: 'PatrolSetting',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'report',
|
||||
title: '報表查詢',
|
||||
icon: 'DataLine',
|
||||
children: [
|
||||
{
|
||||
id: 'PlantsReport',
|
||||
title: '電廠報表',
|
||||
path: '/plantsReport',
|
||||
routeName: 'PlantsReport'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'alert',
|
||||
title: '即時告警',
|
||||
icon: 'Bell',
|
||||
children: [
|
||||
{
|
||||
id: 'alert-event',
|
||||
title: '異常事件查詢'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'material',
|
||||
title: '備料管理',
|
||||
icon: 'MessageBox',
|
||||
children: [
|
||||
{
|
||||
id: 'material-item',
|
||||
title: '備品料件管理'
|
||||
},
|
||||
{
|
||||
id: 'material-location',
|
||||
title: '倉庫櫃位管理'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'security',
|
||||
title: '智慧安防',
|
||||
icon: 'VideoCamera',
|
||||
children: [
|
||||
{
|
||||
id: 'security-system',
|
||||
title: '安防系統'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'system',
|
||||
title: '系統設定',
|
||||
icon: 'Setting',
|
||||
children: [
|
||||
{
|
||||
id: 'system-factory',
|
||||
title: '電廠設定',
|
||||
path: '/plantSetting',
|
||||
routeName: 'PlantSetting'
|
||||
},
|
||||
{
|
||||
id: 'system-account',
|
||||
title: '帳號設定'
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,62 +1,51 @@
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import Home from "../views/Home.vue";
|
||||
import PlantsOverview from "../views/PlantsOverview.vue";
|
||||
import PatrolMission from "../views/PatrolMission.vue";
|
||||
import PatrolSetting from "../views/PatrolSetting.vue";
|
||||
import PlantReport from "../views/PlantReport.vue";
|
||||
import PlantInfo from "../views/PlantInfo.vue";
|
||||
import PlantSetting from "../views/PlantSetting.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
redirect: "/plantsMap"
|
||||
},
|
||||
{
|
||||
path: "/plantsMap",
|
||||
name: "PlantsMap",
|
||||
component: Home,
|
||||
meta: {
|
||||
title: "地圖總覽",
|
||||
icon: "Location",
|
||||
menuGroup: "overview",
|
||||
parentTitle: "總覽",
|
||||
},
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: "/plants",
|
||||
name: "PlantsOverview",
|
||||
component: PlantsOverview,
|
||||
meta: {
|
||||
title: "電廠總覽",
|
||||
icon: "Postcard",
|
||||
menuGroup: "overview",
|
||||
parentTitle: "總覽"
|
||||
},
|
||||
component: PlantsOverview
|
||||
},
|
||||
{
|
||||
path: "/plant/:id",
|
||||
name: "PlantInfo",
|
||||
component: PlantInfo,
|
||||
meta: {
|
||||
title: "電廠詳細",
|
||||
menuGroup: "factory-info",
|
||||
parentTitle: "電廠資訊",
|
||||
component: PlantInfo
|
||||
},
|
||||
{
|
||||
path: "/patrolMission",
|
||||
name: "PatrolMission",
|
||||
component: PatrolMission
|
||||
},
|
||||
{
|
||||
path: "/patrolSetting",
|
||||
name: "PatrolSetting",
|
||||
component: PatrolSetting
|
||||
},
|
||||
{
|
||||
path: "/plantsReport",
|
||||
name: "PlantsReport",
|
||||
component: PlantReport,
|
||||
meta: {
|
||||
title: "電廠報表",
|
||||
menuGroup: "report",
|
||||
parentTitle: "報表查詢",
|
||||
},
|
||||
component: PlantReport
|
||||
},
|
||||
{
|
||||
path: "/plantSetting",
|
||||
name: "PlantSetting",
|
||||
component: PlantSetting,
|
||||
meta: {
|
||||
title: "電廠設定",
|
||||
menuGroup: "report",
|
||||
parentTitle: "系統設定",
|
||||
},
|
||||
component: PlantSetting
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
9
src/views/PatrolMission.vue
Normal file
9
src/views/PatrolMission.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
30
src/views/PatrolSetting.vue
Normal file
30
src/views/PatrolSetting.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :xs="24">
|
||||
<el-card shadow="always" class="custom-card">
|
||||
<template #header
|
||||
><el-radio-group v-model="radio" size="large" fill="#409eff">
|
||||
<el-radio-button label="樣板管理" value="template" />
|
||||
<el-radio-button label="任務管理" value="task" /> </el-radio-group
|
||||
></template>
|
||||
<div v-if="radio === 'template'">
|
||||
<!-- 樣板管理內容 -->
|
||||
<p>這裡是樣板管理</p>
|
||||
</div>
|
||||
|
||||
<div v-if="radio === 'task'">
|
||||
<!-- 任務管理內容 -->
|
||||
<p>這裡是任務管理</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const radio = ref("template");
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -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