移除各种废弃的选项
This commit is contained in:
parent
a4496ca0fa
commit
28e15727be
10
src/App.vue
10
src/App.vue
@ -7,20 +7,22 @@ import { RouterView } from "vue-router";
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background-color: $bg-color;
|
||||
color: $text-primary;
|
||||
background-color: v.$bg-color;
|
||||
color: v.$text-primary;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,6 +4,7 @@ import { useRouter, useRoute } from "vue-router";
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { useUserStore } from '../stores/user';
|
||||
import { useSystemLogStore } from '../stores/systemLog';
|
||||
import { markRaw } from 'vue';
|
||||
import {
|
||||
Menu as IconMenu,
|
||||
Location,
|
||||
@ -23,6 +24,19 @@ const activeMenu = ref(route.path); // 初始化为当前路由路径
|
||||
const userStore = useUserStore();
|
||||
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(
|
||||
() => route.path,
|
||||
@ -77,18 +91,18 @@ const handleLogout = () => {
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="/dashboard">
|
||||
<el-icon><DataBoard /></el-icon>
|
||||
<el-icon><component :is="icons.DataBoard" /></el-icon>
|
||||
<template #title>控制台</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/screen">
|
||||
<el-icon><DataLine /></el-icon>
|
||||
<el-icon><component :is="icons.DataLine" /></el-icon>
|
||||
<template #title>数据大屏</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-sub-menu index="system">
|
||||
<template #title>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<el-icon><component :is="icons.Setting" /></el-icon>
|
||||
<span>系统管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/system/users">用户管理</el-menu-item>
|
||||
@ -101,7 +115,7 @@ const handleLogout = () => {
|
||||
|
||||
<el-sub-menu index="monitor">
|
||||
<template #title>
|
||||
<el-icon><DataAnalysis /></el-icon>
|
||||
<el-icon><component :is="icons.DataAnalysis" /></el-icon>
|
||||
<span>监测管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/monitor/species">物种监测</el-menu-item>
|
||||
@ -110,7 +124,7 @@ const handleLogout = () => {
|
||||
|
||||
<el-sub-menu index="patrol">
|
||||
<template #title>
|
||||
<el-icon><Location /></el-icon>
|
||||
<el-icon><component :is="icons.Location" /></el-icon>
|
||||
<span>巡护管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/patrol/tasks">巡护任务</el-menu-item>
|
||||
@ -119,7 +133,7 @@ const handleLogout = () => {
|
||||
|
||||
<el-sub-menu index="report">
|
||||
<template #title>
|
||||
<el-icon><Document /></el-icon>
|
||||
<el-icon><component :is="icons.Document" /></el-icon>
|
||||
<span>报告管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/report/daily">日常报告</el-menu-item>
|
||||
@ -132,14 +146,14 @@ const handleLogout = () => {
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="header-left">
|
||||
<el-button type="text" @click="isCollapse = !isCollapse">
|
||||
<el-icon><IconMenu /></el-icon>
|
||||
<el-button link @click="isCollapse = !isCollapse">
|
||||
<el-icon><component :is="icons.IconMenu" /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-dropdown>
|
||||
<span class="user-info">
|
||||
<el-icon><User /></el-icon>
|
||||
<el-icon><component :is="icons.User" /></el-icon>
|
||||
管理员
|
||||
</span>
|
||||
<template #dropdown>
|
||||
@ -161,15 +175,15 @@ const handleLogout = () => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/variables.scss";
|
||||
@use "../styles/variables" as v;
|
||||
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: $sidebar-bg;
|
||||
border-right: 1px solid $border-color;
|
||||
background-color: v.$sidebar-bg;
|
||||
border-right: 1px solid v.$border-color;
|
||||
transition: width 0.3s;
|
||||
|
||||
.logo-container {
|
||||
@ -178,7 +192,7 @@ const handleLogout = () => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-bottom: 1px solid v.$border-color;
|
||||
overflow: hidden;
|
||||
|
||||
.logo-img {
|
||||
@ -192,7 +206,7 @@ const handleLogout = () => {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: $primary-color;
|
||||
color: v.$primary-color;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
@ -204,15 +218,15 @@ const handleLogout = () => {
|
||||
&.el-menu-vertical {
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: $text-regular;
|
||||
color: v.$text-regular;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
color: v.$primary-color;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: $primary-color;
|
||||
color: v.$primary-color;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
}
|
||||
@ -221,8 +235,8 @@ const handleLogout = () => {
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: $header-bg;
|
||||
box-shadow: $box-shadow;
|
||||
background-color: v.$header-bg;
|
||||
box-shadow: v.$box-shadow;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -236,7 +250,7 @@ const handleLogout = () => {
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
color: $text-regular;
|
||||
color: v.$text-regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -246,7 +260,7 @@ const handleLogout = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: $text-regular;
|
||||
color: v.$text-regular;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 8px;
|
||||
@ -256,7 +270,7 @@ const handleLogout = () => {
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: $bg-color;
|
||||
background-color: v.$bg-color;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
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({
|
||||
@ -285,21 +303,21 @@ const initDistributionChart = () => {
|
||||
// 最新动态
|
||||
const activities = ref([
|
||||
{
|
||||
icon: Timer,
|
||||
title: "系统更新",
|
||||
desc: "系统版本更新到 v2.0",
|
||||
time: "刚刚",
|
||||
type: "primary",
|
||||
title: "巡护任务完成",
|
||||
desc: "张三完成了A区湿地的巡护任务",
|
||||
time: "10分钟前",
|
||||
icon: icons.Timer
|
||||
},
|
||||
{
|
||||
icon: Bell,
|
||||
icon: icons.Bell,
|
||||
type: "warning",
|
||||
title: "环境预警",
|
||||
desc: "B区水质监测点位出现异常数据",
|
||||
time: "30分钟前",
|
||||
},
|
||||
{
|
||||
icon: Document,
|
||||
icon: icons.Document,
|
||||
type: "success",
|
||||
title: "日报生成",
|
||||
desc: "系统自动生成了昨日监测报告",
|
||||
@ -310,7 +328,7 @@ const activities = ref([
|
||||
const statsCards = ref([
|
||||
{
|
||||
title: '物种监测',
|
||||
icon: Monitor,
|
||||
icon: icons.Monitor,
|
||||
value: '128',
|
||||
unit: '种',
|
||||
change: { value: '+12', label: '今日新增' },
|
||||
@ -320,7 +338,7 @@ const statsCards = ref([
|
||||
},
|
||||
{
|
||||
title: '环境监测',
|
||||
icon: DataBoard,
|
||||
icon: icons.DataAnalysis,
|
||||
value: '22',
|
||||
unit: '点',
|
||||
change: { value: '2', label: '异常' },
|
||||
@ -330,7 +348,7 @@ const statsCards = ref([
|
||||
},
|
||||
{
|
||||
title: '巡护任务',
|
||||
icon: Location,
|
||||
icon: icons.Location,
|
||||
value: '8',
|
||||
unit: '个',
|
||||
change: { value: '66%', label: '完成率' },
|
||||
@ -340,7 +358,7 @@ const statsCards = ref([
|
||||
},
|
||||
{
|
||||
title: '设备状态',
|
||||
icon: Connection,
|
||||
icon: icons.Connection,
|
||||
value: '32',
|
||||
unit: '台',
|
||||
change: { value: '88.9%', label: '在线率' },
|
||||
@ -442,7 +460,7 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/variables.scss";
|
||||
@use "../../styles/variables" as v;
|
||||
|
||||
.dashboard-container {
|
||||
padding-bottom: 24px;
|
||||
@ -454,7 +472,7 @@ onMounted(() => {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
color: v.$text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@ -560,7 +578,7 @@ onMounted(() => {
|
||||
|
||||
:deep(.el-timeline-item__node) {
|
||||
background-color: transparent;
|
||||
border: 2px solid $primary-color;
|
||||
border: 2px solid v.$primary-color;
|
||||
}
|
||||
|
||||
:deep(.el-timeline-item__tail) {
|
||||
@ -580,7 +598,7 @@ onMounted(() => {
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
color: v.$text-primary;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
|
||||
@ -592,7 +610,7 @@ onMounted(() => {
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: $primary-color;
|
||||
background: v.$primary-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
@ -630,17 +648,17 @@ onMounted(() => {
|
||||
|
||||
&.primary {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
color: $primary-color;
|
||||
color: v.$primary-color;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba(230, 162, 60, 0.1);
|
||||
color: $warning-color;
|
||||
color: v.$warning-color;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(103, 194, 58, 0.1);
|
||||
color: $success-color;
|
||||
color: v.$success-color;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
@ -654,19 +672,19 @@ onMounted(() => {
|
||||
.activity-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
color: v.$text-primary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.activity-desc {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
color: v.$text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 12px;
|
||||
color: $text-secondary;
|
||||
color: v.$text-secondary;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { markRaw } from 'vue';
|
||||
import {
|
||||
Monitor,
|
||||
DataAnalysis,
|
||||
@ -15,6 +16,22 @@ import {
|
||||
Share,
|
||||
} 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({
|
||||
title: "智慧湿地管理系统",
|
||||
version: "v2.0.0",
|
||||
@ -25,7 +42,7 @@ const projectInfo = ref({
|
||||
stats: [
|
||||
{
|
||||
title: "物种监测",
|
||||
icon: Monitor,
|
||||
icon: icons.Monitor,
|
||||
value: "128",
|
||||
unit: "种",
|
||||
change: "+12%",
|
||||
@ -34,7 +51,7 @@ const projectInfo = ref({
|
||||
},
|
||||
{
|
||||
title: "环境监测",
|
||||
icon: DataAnalysis,
|
||||
icon: icons.DataAnalysis,
|
||||
value: "24/7",
|
||||
unit: "",
|
||||
change: "99.9%",
|
||||
@ -43,7 +60,7 @@ const projectInfo = ref({
|
||||
},
|
||||
{
|
||||
title: "巡护覆盖",
|
||||
icon: Location,
|
||||
icon: icons.Location,
|
||||
value: "100%",
|
||||
unit: "",
|
||||
change: "+15%",
|
||||
@ -53,7 +70,7 @@ const projectInfo = ref({
|
||||
},
|
||||
{
|
||||
title: "设备在线",
|
||||
icon: Connection,
|
||||
icon: icons.Connection,
|
||||
value: "99.9%",
|
||||
unit: "",
|
||||
change: "stable",
|
||||
@ -67,7 +84,7 @@ const projectInfo = ref({
|
||||
architecture: {
|
||||
frontend: {
|
||||
title: "Web前端",
|
||||
icon: Platform,
|
||||
icon: icons.Platform,
|
||||
items: [
|
||||
{ name: "Vue 3", desc: "核心框架" },
|
||||
{ name: "Element Plus", desc: "组件库" },
|
||||
@ -78,7 +95,7 @@ const projectInfo = ref({
|
||||
},
|
||||
backend: {
|
||||
title: "后端服务",
|
||||
icon: Cpu,
|
||||
icon: icons.Cpu,
|
||||
items: [
|
||||
{ name: "Node.js", desc: "运行环境" },
|
||||
{ name: "MySQL", desc: "数据库" },
|
||||
@ -87,7 +104,7 @@ const projectInfo = ref({
|
||||
},
|
||||
miniapp: {
|
||||
title: "小程序端",
|
||||
icon: Cellphone,
|
||||
icon: icons.Cellphone,
|
||||
items: [
|
||||
{ name: "微信小程序", desc: "原生开发" },
|
||||
{ name: "Vant Weapp", desc: "UI组件库" },
|
||||
@ -101,13 +118,13 @@ const projectInfo = ref({
|
||||
scenarios: [
|
||||
{
|
||||
title: "Web管理端",
|
||||
icon: Monitor,
|
||||
icon: icons.Monitor,
|
||||
desc: "提供完整的湿地生态系统管理功能",
|
||||
features: ["数据看板", "环境监测", "物种管理", "系统配置"],
|
||||
},
|
||||
{
|
||||
title: "小程序端",
|
||||
icon: Cellphone,
|
||||
icon: icons.Cellphone,
|
||||
desc: "面向公众的湿地生态互动平台",
|
||||
features: [
|
||||
"实时生态数据监测",
|
||||
@ -119,7 +136,7 @@ const projectInfo = ref({
|
||||
},
|
||||
{
|
||||
title: "数据服务",
|
||||
icon: DataAnalysis,
|
||||
icon: icons.DataAnalysis,
|
||||
desc: "提供数据存储和分析能力",
|
||||
features: ["数据采集", "实时监测", "数据分析", "预警提醒"],
|
||||
},
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
import { ref } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import type { UploadProps } from "element-plus";
|
||||
import { markRaw } from 'vue';
|
||||
import { Upload, Download, Refresh } from "@element-plus/icons-vue";
|
||||
|
||||
// 备份记录
|
||||
interface BackupRecord {
|
||||
@ -129,6 +131,12 @@ const handleDelete = (record: BackupRecord) => {
|
||||
const handleExport = () => {
|
||||
ElMessage.success("正在导出数据，请稍候...");
|
||||
};
|
||||
|
||||
const icons = {
|
||||
Upload: markRaw(Upload),
|
||||
Download: markRaw(Download),
|
||||
Refresh: markRaw(Refresh)
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -140,9 +148,15 @@ const handleExport = () => {
|
||||
<span>数据导入导出</span>
|
||||
<div class="header-btns">
|
||||
<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-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>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user