根据现有代码要求如下：1.生成新的河湖
介绍界面，优化显示样式。1.保留原有功能并去除多余代码<template>
<n-layout position="absolute">
<n-layout-header style="height: 8%">
<gh-head @menu-hover="handleMenuHover" @menu-leave="handleMenuLeave" />
</n-layout-header>
<n-layout has-sider style="height: 92%">
<!-- 侧边栏 -->
<n-layout-sider
collapse-mode="width"
:collapsed-width="64"
:width="221"
:collapsed="collapsed"
@collapse="collapsed = true"
@expand="collapsed = false"
>
<gh-sidebar
:menu-options="menuOptions"
@menu-select="handleUpdateValue"
/>
</n-layout-sider>
<n-layout-content content-style="height:100%">
<!-- 动态内容区域 -->
<div class="dynamic-content-area">
<!-- 河湖基本情况
介绍 -->
<div v-show="dialogStates.lakeInformation" class="lake-info-container">
<!-- 上半部分：封面轮播 + 简介标题 -->
<section class="top-section">
<n-grid x-gap="24" :cols="responsiveCols" class="body-introduce">
<!-- 轮播图 -->
<n-gi span="responsiveSpan" class="carousel-wrapper">
<lay-carousel v-model="activeAnmi2" arrow="always" autoplay>
<lay-carousel-item v-for="img in lakeImages" :key="img.id">
<div class="carousel-item">
<n-image
lazy
width="100%"
height="400px"
object-fit="cover"
:src="img.src"
:preview-disabled="true"
:border-radius="8"
/>
</div>
</lay-carousel-item>
</lay-carousel>
</n-gi>
<!-- 文字简介 -->
<n-gi span="responsiveSpan" class="title-introduce">
<h1>{{ lakeInfo.name }}</h1>
<p class="subtitle">{{ lakeInfo.location }}</p>
<p class="stats">
面积：<strong>{{ lakeInfo.area }} km²</strong> |
平均水深：<strong>{{ lakeInfo.depth }} m</strong> |
水质等级：<strong :class="`quality-${lakeInfo.waterQuality}`">
{{ lakeInfo.waterQualityLabel }}
</strong>
</p>
<p class="text-introduce">
{{ lakeInfo.description }}
</p>
</n-gi>
</n-grid>
</section>
<!-- 下半部分：详细信息 Tabs -->
<section class="bottom-section">
<n-card :bordered="false" style="background-color: #f7f9fc">
<n-tabs
type="bar"
size="large"
:tabs-padding="responsiveTabsPadding"
pane-style="padding: 20px; line-height: 1.8;"
class="custom-tabs"
>
<!-- 地理境域 -->
<n-tab-pane name="地理境域" tab="地理境域">
<n-grid x-gap="24" :cols="responsiveCols">
<n-gi span="1">
<p class="text-introduce">{{ geoContext }}</p>
</n-gi>
<n-gi span="1" class="image-center">
<n-image width="100%" :src="ghImage" :border-radius="8" />
</n-gi>
</n-grid>
</n-tab-pane>
<!-- 水文特征 -->
<n-tab-pane name="水文特征" tab="水文特征">
<p class="text-introduce">{{ hydrology }}</p>
</n-tab-pane>
<!-- 生态环境 -->
<n-tab-pane name="生态环境" tab="生态环境">
<n-grid x-gap="24" :cols="responsiveCols">
<n-gi span="1">
<p class="text-introduce">{{ ecology }}</p>
</n-gi>
<n-gi span="1" class="image-center">
<n-image width="100%" :src="ghImage3" :border-radius="8" />
</n-gi>
</n-grid>
</n-tab-pane>
<!-- 主要功能 -->
<n-tab-pane name="主要功能" tab="主要功能">
<ul class="function-list text-introduce">
<li v-for="(func, i) in lakeInfo.functions" :key="i">
{{ func }}
</li>
</ul>
</n-tab-pane>
<!-- 治理保护 -->
<n-tab-pane name="治理保护" tab="治理保护">
<p class="text-introduce">{{ management }}</p>
</n-tab-pane>
</n-tabs>
</n-card>
</section>
</div>
<!-- </div> -->
<!-- </div> -->
<Regulations v-if="dialogStates.Regulations" />
<RelatedPlanning v-if="dialogStates.RelatedPlanning" />
<paymentRecords v-if="dialogStates.paymentRecords" />
<!-- <PatrolStatistics v-if="dialogStates.PatrolStatistics" /> -->
<billManagement v-if="dialogStates.billManagement" />
<fileArchives v-if="dialogStates.fileArchives" />
<caseStatistics v-if="dialogStates.caseStatistics" />
<stockEnhancement v-if="dialogStates.stockEnhancement" />
<personnelInformation v-if="dialogStates.personnelInformation" />
<infrastructureManagement
v-if="dialogStates.infrastructureManagement"
/>
<maintenanceRecord v-if="dialogStates.maintenanceRecord" />
<biddingProject v-if="dialogStates.biddingProject" />
<promotionManagement v-if="dialogStates.promotionManagement" />
<attendanceInformation v-if="dialogStates.attendanceInformation" />
<promotionalMaterials v-if="dialogStates.promotionalMaterials" />
<lawRegulation v-if="dialogStates.lawRegulation" />
</div>
</n-layout-content>
</n-layout>
</n-layout>
</template>
<script setup lang="ts">
import {
ref,
watch,
reactive,
h,
defineComponent,
onBeforeUnmount,
onMounted,
computed
} from "vue";
import { NIcon, useMessage } from "naive-ui";
import type { MenuOption } from "naive-ui";
import type { Component } from "vue";
import { layer } from "@layui/layui-vue";
import Regulations from "./regulations.vue";
import RelatedPlanning from "./relatedPlanning.vue";
import paymentRecords from "./paymentRecords.vue";
import PatrolStatistics from "./PatrolStatistics.vue";
import billManagement from "./billManagement.vue";
import fileArchives from "./fileArchives.vue";
import caseStatistics from "./caseStatistics.vue";
import stockEnhancement from "./stockEnhancement.vue";
import personnelInformation from "./personnelInformation.vue";
import infrastructureManagement from "./infrastructureManagement.vue";
import maintenanceRecord from "./maintenanceRecord.vue";
import biddingProject from "./biddingProject.vue";
import promotionManagement from "./promotionManagement.vue";
import attendanceInformation from "./attendanceInformation.vue";
import promotionalMaterials from "./promotionalMaterials.vue";
import lawRegulation from "./lawRegulation.vue";
import ghImage from "@/assets/gh.png";
import ghImage2 from "@/assets/gh2.webp";
import ghImage3 from "@/assets/gh3.webp";
import ghImage4 from "@/assets/gh4.webp";
import {
Grid as BookIcon, //管理动态
PeopleSharp as MapOutIcon, //人事管理
ListSharp as BrosersIcon, //项目管理
ConstructSharp as BuildIcon, //基础设施管理
SchoolOutline as FishIcon, //宣传教育
} from "@vicons/ionicons5";
const data = ref();
const model = reactive({});
const activeAnmi2 = ref("1");
const collapsed = ref(false);
const layout5 = ref(["count", "prev", "page", "next", "limits", "skip"]);
const tableData = ref([]);
function renderIcon(icon: Component) {
return () => h(NIcon, null, { default: () => h(icon) });
}
const menuOptions: MenuOption[] = [
{
label: "管理动态",
key: "1",
icon: renderIcon(BookIcon),
children: [
{
label: "河湖基本情况
介绍",
key: "11",
},
// {
// label: "组织机构",
// key: "12",
// },
{
label: "法律法规",
key: "13",
},
{
label: "规章制度",
key: "14",
},
{
label: "相关规划",
key: "15",
},
],
},
{
label: "项目管理",
key: "4",
icon: renderIcon(BrosersIcon),
children: [
{
label: "招投标项目",
key: "41",
},
{
label: "增殖放流",
key: "42",
},
// {
// label: "涉渔工程管理",
// key: "43",
// },
],
},
{
label: "人事管理",
key: "5",
icon: renderIcon(MapOutIcon),
children: [
{
label: "人员信息",
key: "51",
},
// {
// label: "考勤信息",
// key: "52",
// },
],
},
{
label: "基础设施管理",
key: "6",
icon: renderIcon(BuildIcon),
children: [
{
label: "基础设施管理",
key: "61",
},
{
label: "设施维护",
key: "62",
},
],
},
{
label: "宣传教育",
key: "7",
icon: renderIcon(FishIcon),
children: [
{
label: "宣传记录",
key: "71",
},
// {
// label: "宣传资料",
// key: "72",
// },
],
},
];
function handleUpdateValue(key: string, item: MenuOption) {
// 关闭所有对话框
Object.keys(dialogStates).forEach((key) => {
dialogStates[key as keyof typeof dialogStates] = false;
});
// 根据 key 打开对应的对话框
switch (key) {
case "11":
dialogStates.lakeInformation = true;
break;
case "12":
dialogStates.organization = true;
break;
case "13":
dialogStates.lawRegulation = true;
break;
case "14":
dialogStates.Regulations = true;
break;
case "15":
dialogStates.RelatedPlanning = true;
break;
case "21":
dialogStates.paymentRecords = true;
break;
case "22":
dialogStates.billManagement = true;
break;
case "23":
dialogStates.fileArchives = true;
break;
case "24":
dialogStates.caseStatistics = true;
break;
case "42":
dialogStates.stockEnhancement = true;
break;
case "51":
dialogStates.personnelInformation = true;
break;
case "52":
dialogStates.attendanceInformation = true;
break;
case "61":
dialogStates.infrastructureManagement = true;
break;
case "62":
dialogStates.maintenanceRecord = true;
break;
case "41":
dialogStates.biddingProject = true;
break;
case "71":
dialogStates.promotionManagement = true;
break;
case "72":
dialogStates.promotionalMaterials = true;
break;
}
}
const loading = ref(false);
const selectedKeys = ref([]);
const page = reactive({ current: 1, limit: 10, total: 100 });
const columns = ref([
{ title: "选项", width: "55px", type: "checkbox", fixed: "left" },
{ title: "序号", width: "55px", key: "id", fixed: "left" },
{
title: "文件名称",
width: "80px",
key: "name",
fixed: "left",
sort: "desc",
},
{ title: "上传部门", width: "80px", key: "department", sort: "desc" },
{ title: "上传人", width: "120px", key: "people" },
{ title: "上传时间", width: "80px", key: "time" },
{
title: "操作",
width: "150px",
customSlot: "operator",
key: "operator",
fixed: "right",
ignoreExport: true,
},
]);
const dialogStates = reactive({
lakeInformation: true, //默认显示
organization: false,
lawRegulation: false,
Regulations: false,
RelatedPlanning: false,
paymentRecords: false,
// PatrolStatistics: false,
billManagement: false,
fileArchives: false,
caseStatistics: false,
stockEnhancement: false,
personnelInformation: false,
infrastructureManagement: false,
maintenanceRecord: false,
biddingProject: false,
promotionManagement: false,
attendanceInformation: false,
promotionalMaterials: false,
});
const showGeneralManageMenu = ref(false);
const keepMenuOpen = ref(false);
let menuTimer: number | null = null;
const handleMenuHover = (menuId: string) => {
if (menuId === "6") {
// 综合管理菜单ID
if (menuTimer) {
clearTimeout(menuTimer);
menuTimer = null;
}
showGeneralManageMenu.value = true;
keepMenuOpen.value = true;
}
};
const handleMenuLeave = () => {
keepMenuOpen.value = false;
menuTimer = window.setTimeout(() => {
if (!keepMenuOpen.value) {
showGeneralManageMenu.value = false;
}
}, 300);
};
const closeMenu = () => {
keepMenuOpen.value = false;
handleMenuLeave();
};
// 响应式调整
const responsiveCols = ref(2);
const responsiveSpan = ref(1);
const responsiveImageWidth = ref(450);
const responsiveTabsPadding = ref(20);
function updateResponsiveLayout() {
const screenWidth = window.innerWidth;
responsiveCols.value = screenWidth < 768 ? 1 : 2;
responsiveSpan.value = 1;
responsiveImageWidth.value = screenWidth < 768 ? 300 : 450;
responsiveTabsPadding.value = screenWidth < 768 ? 10 : 20;
}
onMounted(() => {
window.addEventListener("resize", updateResponsiveLayout);
updateResponsiveLayout();
});
onBeforeUnmount(() => {
window.removeEventListener("resize", updateResponsiveLayout);
});
// 初始化加载数据
const lakeImages = [
{ id: 1, src: ghImage },
{ id: 2, src: ghImage2 },
{ id: 3, src: ghImage3 },
{ id: 4, src: ghImage4 },
];
const lakeInfo = computed(() => ({
name: "滆湖",
location: "江苏省常州市武进区西南部，太湖水系",
area: 172.71,
depth: 1.19,
waterQuality: "level3",
waterQualityLabel: "Ⅲ类（轻度污染）",
functions: [
"饮用水源地",
"农业灌溉",
"生态调节",
"渔业养殖",
"旅游休闲",
],
description:
"滆湖是苏南重要淡水湖泊之一，位于北纬31°29′—31°42′，东经119°44′—119°53′，湖水面积达172.71平方公里。湖泊呈狭长形，南北长22.1千米，最大宽度9.0千米。作为太湖上游重要调蓄湖泊，滆湖在区域水资源配置与生态保护中具有战略地位。",
}));
// 各模块详细
介绍文本（可提取为 i18n 或 API 数据）
const geoContext = `
滆湖地处扬子古陆下扬子台褶带南部，属震旦纪以来形成的拗陷地带。燕山运动引发强烈断裂活动，形成华夏系断陷构造。主干断裂线穿越湖区东西向，推测存在隐伏断裂，促成湖盆凹陷。地表百米以内为第四系冲积物，12–15米深处有含蚌壳流沙层，地质条件复杂。
`;
const hydrology = `
据观测数据（1952–1990），滆湖历年最高水位5.36米（1954年），最低2.44米（1979年），年变幅达2.92米。多年平均水位3.29米，年内呈“春涨夏峰秋降冬稳”规律。年入湖水量约8.58亿立方米，出湖9.10亿立方米，蓄水变量0.52亿立方米。湖水黄绿色，透明度0.8–1.1米，pH值8.85，属重碳酸盐类钙组Ⅱ型水。底泥中重金属含量需持续监控。
`;
const ecology = `
滆湖生物多样性较丰富，记录鱼类40余种，包括鲤、鲫、鲢、鳙等经济鱼种。沉水植物以苦草、黑藻为主，浮叶植物有菱角、芡实。近年实施退圩还湖工程，恢复湿地面积约3.2平方公里。鸟类栖息种类逐年增加，发现白鹭、夜鹭、小䴙䴘等10余种。但富营养化风险仍存，总磷浓度偏高，蓝藻水华偶发。
`;
const management = `
滆湖实行河湖长制管理，由常州市政府牵头成立联合治理办公室。重点推进控源截污、生态清淤、滨岸带修复三大工程。划定一级保护区禁止养殖与排污，设立水质自动监测站6处。每年开展增殖放流活动，投放鲢鳙鱼苗超百万尾。公众参与机制逐步建立，志愿者巡湖常态化。
`;
</script>
<style lang="scss" scoped>
.generalManage-menu {
position: absolute;
top: 8%; /* 与header高度一致 */
width: 100%;
height: auto;
background: url(@/assets/menubg.png) no-repeat;
background-size: cover;
// background: rgba(224, 242, 252, 0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10000;
padding: 16px;
// border-radius: 0 0 8px 8px;
max-height: 80vh;
}
.menuTitle {
display: block;
font-size: 18px;
color: #000;
height: 50px;
line-height: 50px;
text-align: left;
padding: 0px;
font-weight: 1000;
}
.menuButton {
display: block;
font-size: 16px;
color: rgba(0, 0, 0, 0.7);
height: 29px;
line-height: 29px;
text-align: left;
overflow: hidden;
}
// 新增
.top-section {
height: 50%; /* 上半部分占50% */
overflow-y: auto; /* 内容过多时滚动 */
}
.bottom-section {
height: 50%; /* 下半部分占50% */
margin-top: 16px; /* 可选间距 */
}
/* 确保内部组件高度继承 */
.n-card,
.n-tabs,
.n-tab-pane {
height: 100%;
}
.lake-info-container {
height: calc(100vh - 10vh);
display: flex;
flex-direction: column;
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.table-title {
font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
font-size: clamp(16px, 1vw, 22px); /* 响应式字体大小 */
color: #ffffff;
background: rgb(0, 178, 238);
display: flex;
align-items: center;
}
.body-introduce {
// padding: 10px 10%;
padding: 1rem 5%;
height: 100%;
}
.title-introduce {
font-size: clamp(1.5rem, 4vw, 2rem);
margin-top: 20px;
font-family: "微软雅黑";
// font-size: 26px;
color: #000;
height: auto;
overflow: hidden;
}
.text-introduce {
font-size: clamp(1rem, 2vw, 1.2rem);
line-height: 1.6;
// font-size: 18px;
color: hsl(0, 0%, 4%);
line-height: 29px;
margin-top: 25px;
padding-bottom: 50px;
// line-height: 1.8;
}
:deep(.custom-tabs .n-tabs-tab) {
font-size: 24px;
// font-weight: bold;
}
//菜单项图标默认颜色
:deep(
.navigation-area[data-v-2f01e0f8]
.n-menu
.n-menu-item
.n-menu-item-content
.n-icon
) {
color: #606060;
}
// 表格页码样式
:deep(.layui-pager) {
.is-active {
background-color: #0a4eab !important;
}
.layui-pager-number {
border: none;
}
.is-active {
border: 1px solid;
}
}
.layui-page {
position: relative;
left: 56%;
}
.table-title-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #fdfdfd;
border-bottom: 1px solid #efefef;
}
/* 面包屑样式 */
:deep(.layui-breadcrumb) {
a {
font-size: 16px !important;
&:hover {
color: #0a4eab !important;
}
}
a:nth-last-child(2) {
color: #111010 !important;
}
}
// 表格样式
.table-container {
flex: 1;
min-height: 300px;
overflow: auto;
width: 99%;
padding: 20px;
margin: 0 10px;
border: 1px solid #efefef;
border-radius: 4px 4px 0 0;
}
.dynamic-content-area {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 1000;
margin-left: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow-y: auto; /* 添加y轴滚动条 */
overflow-x: hidden; /* 防止不必要的横向滚动条 */
// padding: 16px;
}
.query-container {
margin: 10px 10px;
padding: 15px;
border-radius: 4px;
background-color: white;
border: 1px solid #efefef;
position: relative;
.btnContainer {
position: absolute;
top: 12%;
right: 5%;
}
}
/* 响应式调整 */
@media (max-width: 768px) {
.top-section,
.bottom-section {
height: auto;
min-height: 50%;
}
.dynamic-content-area {
margin-left: 0;
padding: 10px;
}
.body-introduce {
padding: 0.5rem 2%;
}
.title-introduce {
font-size: 1.5rem;
margin-top: 10px;
}
.text-introduce {
font-size: 1rem;
margin-top: 15px;
padding-bottom: 20px;
}
:deep(.custom-tabs .n-tabs-tab) {
font-size: 18px;
}
.table-container {
padding: 10px;
margin: 0 5px;
}
.query-container {
margin: 5px;
padding: 10px;
}
.btnContainer {
position: relative !important;
top: 0 !important;
right: 0 !important;
margin-top: 10px;
display: flex;
justify-content: center;
}
.layui-page {
position: relative;
left: 0;
text-align: center;
}
}
@media (max-width: 480px) {
.dynamic-content-area {
padding: 5px;
}
.title-introduce {
font-size: 1.2rem;
margin-top: 8px;
}
.text-introduce {
font-size: 0.9rem;
margin-top: 10px;
padding-bottom: 15px;
line-height: 1.5;
}
:deep(.custom-tabs .n-tabs-tab) {
font-size: 16px;
}
.table-title-container {
padding: 8px 10px;
}
.table-container {
padding: 8px;
margin: 0 3px;
}
.query-container {
margin: 3px;
padding: 8px;
}
}
// ::v-deep .layui-table th {
// padding: 12px 15px;
// background-color: #295d92;
// color: #fff;
// font-weight: bold;
// font-size: 16px;
// }
</style>
扫一扫
3232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
