mitsuhaV/WetlandGuard-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移除各种废弃的选项

Browse Source
This commit is contained in:
Xiaoyu 2025-02-18 15:55:06 +08:00
parent a4496ca0fa
commit 28e15727be
5 changed files with 125 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@ -7,20 +7,22 @@ import { RouterView } from "vue-router";
</template> </template>
<style lang="scss"> <style lang="scss">
@import "./styles/variables.scss"; @use "./styles/variables" as v;
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
background-color: $bg-color; background-color: v.$bg-color;
color: $text-primary; color: v.$text-primary;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif; "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
#app { #app {
height: 100vh; height: 100%;
} }
</style> </style>

58
src/layout/AdminLayout.vue
View File

@ -4,6 +4,7 @@ import { useRouter, useRoute } from "vue-router";
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { useUserStore } from '../stores/user'; import { useUserStore } from '../stores/user';
import { useSystemLogStore } from '../stores/systemLog'; import { useSystemLogStore } from '../stores/systemLog';
import { markRaw } from 'vue';
import { import {
Menu as IconMenu, Menu as IconMenu,
Location, Location,
@ -23,6 +24,19 @@ const activeMenu = ref(route.path); // 初始化为当前路由路径
const userStore = useUserStore(); const userStore = useUserStore();
const systemLogStore = useSystemLogStore(); const systemLogStore = useSystemLogStore();
// 使用 markRaw 包装所有图标组件
const icons = {
IconMenu: markRaw(IconMenu),
Location: markRaw(Location),
Setting: markRaw(Setting),
User: markRaw(User),
DataAnalysis: markRaw(DataAnalysis),
DataBoard: markRaw(DataBoard),
Tools: markRaw(Tools),
Document: markRaw(Document),
DataLine: markRaw(DataLine)
};
// 监听路由变化 // 监听路由变化
watch( watch(
() => route.path, () => route.path,
@ -77,18 +91,18 @@ const handleLogout = () => {
@select="handleSelect" @select="handleSelect"
> >
<el-menu-item index="/dashboard"> <el-menu-item index="/dashboard">
<el-icon><DataBoard /></el-icon> <el-icon><component :is="icons.DataBoard" /></el-icon>
<template #title>控制台</template> <template #title>控制台</template>
</el-menu-item> </el-menu-item>
<el-menu-item index="/screen"> <el-menu-item index="/screen">
<el-icon><DataLine /></el-icon> <el-icon><component :is="icons.DataLine" /></el-icon>
<template #title>数据大屏</template> <template #title>数据大屏</template>
</el-menu-item> </el-menu-item>
<el-sub-menu index="system"> <el-sub-menu index="system">
<template #title> <template #title>
<el-icon><Setting /></el-icon> <el-icon><component :is="icons.Setting" /></el-icon>
<span>系统管理</span> <span>系统管理</span>
</template> </template>
<el-menu-item index="/system/users">用户管理</el-menu-item> <el-menu-item index="/system/users">用户管理</el-menu-item>
@ -101,7 +115,7 @@ const handleLogout = () => {
<el-sub-menu index="monitor"> <el-sub-menu index="monitor">
<template #title> <template #title>
<el-icon><DataAnalysis /></el-icon> <el-icon><component :is="icons.DataAnalysis" /></el-icon>
<span>监测管理</span> <span>监测管理</span>
</template> </template>
<el-menu-item index="/monitor/species">物种监测</el-menu-item> <el-menu-item index="/monitor/species">物种监测</el-menu-item>
@ -110,7 +124,7 @@ const handleLogout = () => {
<el-sub-menu index="patrol"> <el-sub-menu index="patrol">
<template #title> <template #title>
<el-icon><Location /></el-icon> <el-icon><component :is="icons.Location" /></el-icon>
<span>巡护管理</span> <span>巡护管理</span>
</template> </template>
<el-menu-item index="/patrol/tasks">巡护任务</el-menu-item> <el-menu-item index="/patrol/tasks">巡护任务</el-menu-item>
@ -119,7 +133,7 @@ const handleLogout = () => {
<el-sub-menu index="report"> <el-sub-menu index="report">
<template #title> <template #title>
<el-icon><Document /></el-icon> <el-icon><component :is="icons.Document" /></el-icon>
<span>报告管理</span> <span>报告管理</span>
</template> </template>
<el-menu-item index="/report/daily">日常报告</el-menu-item> <el-menu-item index="/report/daily">日常报告</el-menu-item>
@ -132,14 +146,14 @@ const handleLogout = () => {
<el-container> <el-container>
<el-header> <el-header>
<div class="header-left"> <div class="header-left">
<el-button type="text" @click="isCollapse = !isCollapse"> <el-button link @click="isCollapse = !isCollapse">
<el-icon><IconMenu /></el-icon> <el-icon><component :is="icons.IconMenu" /></el-icon>
</el-button> </el-button>
</div> </div>
<div class="header-right"> <div class="header-right">
<el-dropdown> <el-dropdown>
<span class="user-info"> <span class="user-info">
<el-icon><User /></el-icon> <el-icon><component :is="icons.User" /></el-icon>
管理员 管理员
</span> </span>
<template #dropdown> <template #dropdown>
@ -161,15 +175,15 @@ const handleLogout = () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/variables.scss"; @use "../styles/variables" as v;
.layout-container { .layout-container {
height: 100vh; height: 100vh;
} }
.el-aside { .el-aside {
background-color: $sidebar-bg; background-color: v.$sidebar-bg;
border-right: 1px solid $border-color; border-right: 1px solid v.$border-color;
transition: width 0.3s; transition: width 0.3s;
.logo-container { .logo-container {
@ -178,7 +192,7 @@ const handleLogout = () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 20px; padding: 0 20px;
border-bottom: 1px solid $border-color; border-bottom: 1px solid v.$border-color;
overflow: hidden; overflow: hidden;
.logo-img { .logo-img {
@ -192,7 +206,7 @@ const handleLogout = () => {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: $primary-color; color: v.$primary-color;
white-space: nowrap; white-space: nowrap;
letter-spacing: 2px; letter-spacing: 2px;
} }
@ -204,15 +218,15 @@ const handleLogout = () => {
&.el-menu-vertical { &.el-menu-vertical {
.el-menu-item, .el-menu-item,
.el-sub-menu__title { .el-sub-menu__title {
color: $text-regular; color: v.$text-regular;
&:hover { &:hover {
color: $primary-color; color: v.$primary-color;
background-color: #ecf5ff; background-color: #ecf5ff;
} }
&.is-active { &.is-active {
color: $primary-color; color: v.$primary-color;
background-color: #ecf5ff; background-color: #ecf5ff;
} }
} }
@ -221,8 +235,8 @@ const handleLogout = () => {
} }
.el-header { .el-header {
background-color: $header-bg; background-color: v.$header-bg;
box-shadow: $box-shadow; box-shadow: v.$box-shadow;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -236,7 +250,7 @@ const handleLogout = () => {
.el-icon { .el-icon {
font-size: 20px; font-size: 20px;
color: $text-regular; color: v.$text-regular;
} }
} }
} }
@ -246,7 +260,7 @@ const handleLogout = () => {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: $text-regular; color: v.$text-regular;
.el-icon { .el-icon {
margin-right: 8px; margin-right: 8px;
@ -256,7 +270,7 @@ const handleLogout = () => {
} }
.el-main { .el-main {
background-color: $bg-color; background-color: v.$bg-color;
padding: 20px; padding: 20px;
} }
</style> </style>

62
src/views/dashboard/index.vue
View File

@ -1,7 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { Timer, Bell, Document, Monitor, DataBoard, Location, Connection } from "@element-plus/icons-vue"; import { markRaw } from 'vue'
import {
Monitor,
DataAnalysis,
Location,
Document,
Timer,
Bell
} from "@element-plus/icons-vue";
// 使用 markRaw 包装图标组件
const icons = {
Monitor: markRaw(Monitor),
DataAnalysis: markRaw(DataAnalysis),
Location: markRaw(Location),
Document: markRaw(Document),
Timer: markRaw(Timer),
Bell: markRaw(Bell)
};
// 统计数据 // 统计数据
const statistics = ref({ const statistics = ref({
@ -285,21 +303,21 @@ const initDistributionChart = () => {
// 最新动态 // 最新动态
const activities = ref([ const activities = ref([
{ {
icon: Timer, title: "系统更新",
desc: "系统版本更新到 v2.0",
time: "刚刚",
type: "primary", type: "primary",
title: "巡护任务完成", icon: icons.Timer
desc: "张三完成了A区湿地的巡护任务",
time: "10分钟前",
}, },
{ {
icon: Bell, icon: icons.Bell,
type: "warning", type: "warning",
title: "环境预警", title: "环境预警",
desc: "B区水质监测点位出现异常数据", desc: "B区水质监测点位出现异常数据",
time: "30分钟前", time: "30分钟前",
}, },
{ {
icon: Document, icon: icons.Document,
type: "success", type: "success",
title: "日报生成", title: "日报生成",
desc: "系统自动生成了昨日监测报告", desc: "系统自动生成了昨日监测报告",
@ -310,7 +328,7 @@ const activities = ref([
const statsCards = ref([ const statsCards = ref([
{ {
title: '物种监测', title: '物种监测',
icon: Monitor, icon: icons.Monitor,
value: '128', value: '128',
unit: '种', unit: '种',
change: { value: '+12', label: '今日新增' }, change: { value: '+12', label: '今日新增' },
@ -320,7 +338,7 @@ const statsCards = ref([
}, },
{ {
title: '环境监测', title: '环境监测',
icon: DataBoard, icon: icons.DataAnalysis,
value: '22', value: '22',
unit: '点', unit: '点',
change: { value: '2', label: '异常' }, change: { value: '2', label: '异常' },
@ -330,7 +348,7 @@ const statsCards = ref([
}, },
{ {
title: '巡护任务', title: '巡护任务',
icon: Location, icon: icons.Location,
value: '8', value: '8',
unit: '个', unit: '个',
change: { value: '66%', label: '完成率' }, change: { value: '66%', label: '完成率' },
@ -340,7 +358,7 @@ const statsCards = ref([
}, },
{ {
title: '设备状态', title: '设备状态',
icon: Connection, icon: icons.Connection,
value: '32', value: '32',
unit: '台', unit: '台',
change: { value: '88.9%', label: '在线率' }, change: { value: '88.9%', label: '在线率' },
@ -442,7 +460,7 @@ onMounted(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../styles/variables.scss"; @use "../../styles/variables" as v;
.dashboard-container { .dashboard-container {
padding-bottom: 24px; padding-bottom: 24px;
@ -454,7 +472,7 @@ onMounted(() => {
margin: 0; margin: 0;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
color: $text-primary; color: v.$text-primary;
} }
} }
@ -560,7 +578,7 @@ onMounted(() => {
:deep(.el-timeline-item__node) { :deep(.el-timeline-item__node) {
background-color: transparent; background-color: transparent;
border: 2px solid $primary-color; border: 2px solid v.$primary-color;
} }
:deep(.el-timeline-item__tail) { :deep(.el-timeline-item__tail) {
@ -580,7 +598,7 @@ onMounted(() => {
span { span {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: $text-primary; color: v.$text-primary;
position: relative; position: relative;
padding-left: 12px; padding-left: 12px;
@ -592,7 +610,7 @@ onMounted(() => {
transform: translateY(-50%); transform: translateY(-50%);
width: 4px; width: 4px;
height: 16px; height: 16px;
background: $primary-color; background: v.$primary-color;
border-radius: 2px; border-radius: 2px;
} }
} }
@ -630,17 +648,17 @@ onMounted(() => {
&.primary { &.primary {
background: rgba(64, 158, 255, 0.1); background: rgba(64, 158, 255, 0.1);
color: $primary-color; color: v.$primary-color;
} }
&.warning { &.warning {
background: rgba(230, 162, 60, 0.1); background: rgba(230, 162, 60, 0.1);
color: $warning-color; color: v.$warning-color;
} }
&.success { &.success {
background: rgba(103, 194, 58, 0.1); background: rgba(103, 194, 58, 0.1);
color: $success-color; color: v.$success-color;
} }
.el-icon { .el-icon {
@ -654,19 +672,19 @@ onMounted(() => {
.activity-title { .activity-title {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: $text-primary; color: v.$text-primary;
margin-bottom: 4px; margin-bottom: 4px;
} }
.activity-desc { .activity-desc {
font-size: 13px; font-size: 13px;
color: $text-secondary; color: v.$text-secondary;
} }
} }
.activity-time { .activity-time {
font-size: 12px; font-size: 12px;
color: $text-secondary; color: v.$text-secondary;
margin-left: 16px; margin-left: 16px;
} }
} }

37
src/views/report/about/index.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { markRaw } from 'vue';
import { import {
Monitor, Monitor,
DataAnalysis, DataAnalysis,
@ -15,6 +16,22 @@ import {
Share, Share,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
// 使用 markRaw 包装图标组件
const icons = {
Monitor: markRaw(Monitor),
DataAnalysis: markRaw(DataAnalysis),
Location: markRaw(Location),
Document: markRaw(Document),
Aim: markRaw(Aim),
TrendCharts: markRaw(TrendCharts),
Connection: markRaw(Connection),
Platform: markRaw(Platform),
Cpu: markRaw(Cpu),
Link: markRaw(Link),
Cellphone: markRaw(Cellphone),
Share: markRaw(Share)
};
const projectInfo = ref({ const projectInfo = ref({
title: "智慧湿地管理系统", title: "智慧湿地管理系统",
version: "v2.0.0", version: "v2.0.0",
@ -25,7 +42,7 @@ const projectInfo = ref({
stats: [ stats: [
{ {
title: "物种监测", title: "物种监测",
icon: Monitor, icon: icons.Monitor,
value: "128", value: "128",
unit: "种", unit: "种",
change: "+12%", change: "+12%",
@ -34,7 +51,7 @@ const projectInfo = ref({
}, },
{ {
title: "环境监测", title: "环境监测",
icon: DataAnalysis, icon: icons.DataAnalysis,
value: "24/7", value: "24/7",
unit: "", unit: "",
change: "99.9%", change: "99.9%",
@ -43,7 +60,7 @@ const projectInfo = ref({
}, },
{ {
title: "巡护覆盖", title: "巡护覆盖",
icon: Location, icon: icons.Location,
value: "100%", value: "100%",
unit: "", unit: "",
change: "+15%", change: "+15%",
@ -53,7 +70,7 @@ const projectInfo = ref({
}, },
{ {
title: "设备在线", title: "设备在线",
icon: Connection, icon: icons.Connection,
value: "99.9%", value: "99.9%",
unit: "", unit: "",
change: "stable", change: "stable",
@ -67,7 +84,7 @@ const projectInfo = ref({
architecture: { architecture: {
frontend: { frontend: {
title: "Web前端", title: "Web前端",
icon: Platform, icon: icons.Platform,
items: [ items: [
{ name: "Vue 3", desc: "核心框架" }, { name: "Vue 3", desc: "核心框架" },
{ name: "Element Plus", desc: "组件库" }, { name: "Element Plus", desc: "组件库" },
@ -78,7 +95,7 @@ const projectInfo = ref({
}, },
backend: { backend: {
title: "后端服务", title: "后端服务",
icon: Cpu, icon: icons.Cpu,
items: [ items: [
{ name: "Node.js", desc: "运行环境" }, { name: "Node.js", desc: "运行环境" },
{ name: "MySQL", desc: "数据库" }, { name: "MySQL", desc: "数据库" },
@ -87,7 +104,7 @@ const projectInfo = ref({
}, },
miniapp: { miniapp: {
title: "小程序端", title: "小程序端",
icon: Cellphone, icon: icons.Cellphone,
items: [ items: [
{ name: "微信小程序", desc: "原生开发" }, { name: "微信小程序", desc: "原生开发" },
{ name: "Vant Weapp", desc: "UI组件库" }, { name: "Vant Weapp", desc: "UI组件库" },
@ -101,13 +118,13 @@ const projectInfo = ref({
scenarios: [ scenarios: [
{ {
title: "Web管理端", title: "Web管理端",
icon: Monitor, icon: icons.Monitor,
desc: "提供完整的湿地生态系统管理功能", desc: "提供完整的湿地生态系统管理功能",
features: ["数据看板", "环境监测", "物种管理", "系统配置"], features: ["数据看板", "环境监测", "物种管理", "系统配置"],
}, },
{ {
title: "小程序端", title: "小程序端",
icon: Cellphone, icon: icons.Cellphone,
desc: "面向公众的湿地生态互动平台", desc: "面向公众的湿地生态互动平台",
features: [ features: [
"实时生态数据监测", "实时生态数据监测",
@ -119,7 +136,7 @@ const projectInfo = ref({
}, },
{ {
title: "数据服务", title: "数据服务",
icon: DataAnalysis, icon: icons.DataAnalysis,
desc: "提供数据存储和分析能力", desc: "提供数据存储和分析能力",
features: ["数据采集", "实时监测", "数据分析", "预警提醒"], features: ["数据采集", "实时监测", "数据分析", "预警提醒"],
}, },

18
src/views/system/data/index.vue
View File

@ -2,6 +2,8 @@
import { ref } from "vue"; import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps } from "element-plus"; import type { UploadProps } from "element-plus";
import { markRaw } from 'vue';
import { Upload, Download, Refresh } from "@element-plus/icons-vue";
// 备份记录 // 备份记录
interface BackupRecord { interface BackupRecord {
@ -129,6 +131,12 @@ const handleDelete = (record: BackupRecord) => {
const handleExport = () => { const handleExport = () => {
ElMessage.success("正在导出数据，请稍候..."); ElMessage.success("正在导出数据，请稍候...");
}; };
const icons = {
Upload: markRaw(Upload),
Download: markRaw(Download),
Refresh: markRaw(Refresh)
};
</script> </script>
<template> <template>
@ -140,9 +148,15 @@ const handleExport = () => {
<span>数据导入导出</span> <span>数据导入导出</span>
<div class="header-btns"> <div class="header-btns">
<el-upload v-bind="uploadConfig" class="upload-btn"> <el-upload v-bind="uploadConfig" class="upload-btn">
<el-button type="primary">导入数据</el-button> <el-button type="primary">
<el-icon><component :is="icons.Upload" /></el-icon>
导入数据
</el-button>
</el-upload> </el-upload>
<el-button type="success" @click="handleExport">导出数据</el-button> <el-button type="success" @click="handleExport">
<el-icon><component :is="icons.Download" /></el-icon>
导出数据
</el-button>
</div> </div>
</div> </div>
</template> </template>