封装树形控件&&多个监测页面

ruoyi-ui/src/components/FolderTree.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="tree-with-lines">
+    <el-tree
+      class="custom-tree"
+      :data="props.treeData"
+      :props="defaultProps"
+      :expand-on-click-node="false"
+      :default-expand-all="true"
+      node-key="id"
+      @node-click="handleNodeClick"
+      :current-node-key="currentNodeKey"
+    >
+    <template #default="{ node, data }">
+      <div class="custom-tree-node">
+        <div class="node-content">
+          <span class="node-icon">
+            <el-icon v-if="data.type === 'folder'">
+              <FolderOpened v-if="node.expanded" />
+              <Folder v-else />
+            </el-icon>
+            <el-icon v-else><Document /></el-icon>
+          </span>
+          <span class="node-label">{{ node.label }}</span>
+        </div>
+      </div>
+    </template>
+  </el-tree>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  treeData: {
+    type: Array,
+  },
+})
+watch(() => props.treeData, (newVal) => {
+  if (newVal) {
+    newTreeData.value = newVal;
+  }
+});
+const emit = defineEmits(['send-nodeData']);
+
+const newTreeData = ref(props.treeData);
+const defaultProps = ref({
+  children: 'children',
+  label: 'label'
+})
+
+const handleNodeClick = (data, node) => {
+  emit('send-nodeData', data,node);
+};
+</script>
+
+<style lang="scss"> /* 自定义树形控件样式 */
+.custom-tree {
+  position: relative;
+  /* 连接线样式 */
+  .el-tree-node {
+    position: relative;
+  }
+      
+  .el-tree-node__children {
+    position: relative;
+  }
+      
+  /* 垂直连接线 */
+  .el-tree-node__children::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 15px;
+    border-left: 1px dashed #c0c4cc;
+  }
+      
+  /* 水平连接线 */
+  .el-tree-node::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    width: 18px;
+    height: 0;
+    border-top: 1px dashed #c0c4cc;
+  }
+      
+  /* 第一个节点的水平连接线调整 */
+  .el-tree-node:first-child::before {
+    top: 15px;
+  }
+      
+  /* 最后一个节点的垂直连接线调整 */
+  .el-tree-node:last-child::after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    bottom: 0;
+    left: 15px;
+    width: 18px;
+    border-left: 1px solid white;
+  }
+      
+  /* 节点内容样式 */
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    position: relative;
+  }
+      
+  .node-content {
+    display: flex;
+    align-items: center;
+  }
+      
+  .node-icon {
+    margin-right: 6px;
+    color: #e6a23c;
+  }
+      
+  .node-label {
+    padding: 2px 5px;
+    border-radius: 3px;
+    transition: background-color 0.3s;
+  }
+      
+  .node-label:hover {
+    background-color: #f0f9ff;
+  }
+      
+  .node-actions {
+    display: flex;
+    gap: 8px;
+  }
+      
+  .action-btn {
+    padding: 2px 6px;
+    font-size: 12px;
+    border-radius: 3px;
+    background-color: #f4f4f5;
+    color: #606266;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+      
+  .action-btn:hover {
+    background-color: #409eff;
+    color: white;
+  }
+      
+  /* 选中的节点样式 */
+  .el-tree-node.is-current > .el-tree-node__content .node-label {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+}
+    
+    
+/* 空数据提示 */
+.empty-tree {
+  text-align: center;
+  color: #909399;
+  padding: 20px;
+}
+</style>

ruoyi-ui/src/layoutEx/index.vue

@@ -40,12 +40,11 @@
       <div class="contentLeft" :class="{ 'collapsed': !leftItem}" v-if="menuLeftValue != '首页'">
         <div class="leftMenu">
           <el-menu
-            :default-active="$route.path"
+            :default-active="activeMenu"
             background-color="rgb(74, 147, 245)"
             text-color="#fff"
             :unique-opened="true"
             :collapse="isCollapse"
-            @select="handleMenuSelect"
             :router="true"
           >
             <div class="leftTitle">
@@ -89,7 +88,17 @@ const isCollapse = ref(false);
 const menuLeftValue = ref(useRoute().meta.title);
 const menuList = staticMenuData[0].children;
 const menuItem = ref(null);
-console.log('menuList',menuList);
+const route = useRoute()
+
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  console.log('route',route);
+  
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
 
 const menuValueFn = (row) => {
   menuLeftValue.value = row.meta.title;
@@ -119,8 +128,8 @@ function imgLeftFn() {
       width: 26.5%;
       margin-left: 20px;
       .yujing-logo{
-        width: 3.75rem;
-        height: 3.75rem;
+        width: 3.5rem;
+        height: 3.5rem;
         position: absolute;
         top: 3px;
       }
@@ -186,7 +195,7 @@ function imgLeftFn() {
     .contentLeft {
       width: 10%;
       height: 100%;
-      margin-right: 10px;
+      // margin-right: 10px;
       transition: all 0.3s ease-in-out; /* 添加过渡效果 */
       overflow: hidden; /* 防止内容溢出 */
       .leftTitle {

ruoyi-ui/src/router/index.js

@@ -117,38 +117,57 @@ export const constantRoutes = [
             meta: { title: '邮件管理', icon: 'Setting'},
             children:[
               {
-                path: '/zhibanjilu',
+                path: '/taihushuizhi',
                 component: () => import('@/views/zhiban/youjian/taihushuizhi.vue'),
                 meta: { title: '太湖水质信息', icon: 'Setting'},
               },
               {
-                path: '/hushangjilu',
+                path: '/wangyuheshuizhi',
                 component: () => import('@/views/zhiban/youjian/wangyuheshuizhi.vue'),
                 meta: { title: '望虞河水质信息', icon: 'Setting'},
               },
               {
-                path: '/zhibanjihua',
+                path: '/youxiang',
                 component: () => import('@/views/zhiban/youjian/youxiang.vue'),
                 meta: { title: '邮箱通讯录', icon: 'Setting'},
               },
               {
-                path: '/tongxunlu',
+                path: '/youjian',
                 component: () => import('@/views/zhiban/youjian/youjian.vue'),
                 meta: { title: '邮件组', icon: 'Setting' },
               },
             ]
           },
           {
-            path: '/yujing/yingjijiance',
+            path: '',
             meta: { title: '应急监测', icon: 'Setting'},
+            children:[
+              {
+                path: '/yingjijiance',
+                component: () => import('@/views/zhiban/yingjijiance.vue'),
+                meta: { title: '监测信息', icon: 'Setting'},
+              },
+            ]
           },
           {
             path: '/yujing/duanxinguanli',
             meta: { title: '短信管理', icon: 'Setting'},
           },
           {
-            path: '/yujing/jianceshuju',
+            path: '',
             meta: { title: '监测数据', icon: 'Setting'},
+            children:[
+              {
+                path: '/zidongjiance',
+                component: () => import('@/views/zhiban/jianceshuju/zidongjiance.vue'),
+                meta: { title: '自动站监测', icon: 'Setting'},
+              },
+              {
+                path: '/gongxiangjiance',
+                component: () => import('@/views/zhiban/jianceshuju/gongxiangjiance.vue'),
+                meta: { title: '共享数据监测', icon: 'Setting'},
+              },
+            ]
           },
           {
             path: '/yujing/chuanzhenguanli',
@@ -156,6 +175,7 @@ export const constantRoutes = [
           },
           {
             path: '/yujing/ziliaoguanli',
+            component: () => import('@/views/zhiban/ziliaoguanli.vue'),
             meta: { title: '资料管理', icon: 'Setting'},
           },
           {

ruoyi-ui/src/router/staticMenuData.js

@@ -47,38 +47,57 @@ export const staticMenuData = [
             meta: { title: '邮件管理', icon: 'Setting'},
             children:[
               {
-                path: '/zhibanjilu',
+                path: '/taihushuizhi',
                 component: () => import('@/views/zhiban/youjian/taihushuizhi.vue'),
                 meta: { title: '太湖水质信息', icon: 'Setting'},
               },
               {
-                path: '/hushangjilu',
+                path: '/wangyuheshuizhi',
                 component: () => import('@/views/zhiban/youjian/wangyuheshuizhi.vue'),
                 meta: { title: '望虞河水质信息', icon: 'Setting'},
               },
               {
-                path: '/zhibanjihua',
+                path: '/youxiang',
                 component: () => import('@/views/zhiban/youjian/youxiang.vue'),
                 meta: { title: '邮箱通讯录', icon: 'Setting'},
               },
               {
-                path: '/tongxunlu',
+                path: '/youjian',
                 component: () => import('@/views/zhiban/youjian/youjian.vue'),
                 meta: { title: '邮件组', icon: 'Setting' },
               },
             ]
           },
           {
-            path: '/yujing/yingjijiance',
+            path: '',
             meta: { title: '应急监测', icon: 'Setting'},
+            children:[
+              {
+                path: '/yingjijiance',
+                component: () => import('@/views/zhiban/yingjijiance.vue'),
+                meta: { title: '监测信息', icon: 'Setting'},
+              },
+            ]
           },
           {
             path: '/yujing/duanxinguanli',
             meta: { title: '短信管理', icon: 'Setting'},
           },
           {
-            path: '/yujing/jianceshuju',
+            path: '',
             meta: { title: '监测数据', icon: 'Setting'},
+            children:[
+              {
+                path: '/zidongjiance',
+                component: () => import('@/views/zhiban/jianceshuju/zidongjiance.vue'),
+                meta: { title: '自动站监测', icon: 'Setting'},
+              },
+              {
+                path: '/gongxiangjiance',
+                component: () => import('@/views/zhiban/jianceshuju/gongxiangjiance.vue'),
+                meta: { title: '共享数据监测', icon: 'Setting'},
+              },
+            ]
           },
           {
             path: '/yujing/chuanzhenguanli',
@@ -86,6 +105,7 @@ export const staticMenuData = [
           },
           {
             path: '/yujing/ziliaoguanli',
+            component: () => import('@/views/zhiban/ziliaoguanli.vue'),
             meta: { title: '资料管理', icon: 'Setting'},
           },
           {

ruoyi-ui/src/views/mapIndex/components/StnmDialog.vue

@@ -92,7 +92,6 @@
         layout="total, prev, pager, next, jumper"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        style="margin-top: 1%;"
       />
     </div>
   </div>
@@ -230,8 +229,12 @@ const initZheChart = () => {
   elementChart.value.setOption(option);
 };
 
-const handleSizeChange = (val) => {};
-const handleCurrentChange = (val) => {};
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
+}
+const handleCurrentChange = (val) => {
+  pagination.value.currentPage = val;
+}
 const closeDialog = () => {
   dialogVisible.value = false;
   emit('close-dialog', dialogVisible.value);

ruoyi-ui/src/views/zhiban/jianceshuju/gongxiangjiance.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="gxsjjc-index">
+    <div class="gxsjjc-left">
+      <div class="left-title">
+        共享数据监测站点列表
+      </div>
+      <div class="left-input">
+        <el-input
+          v-model="stnm"
+          style="width: 100%;"
+          placeholder="请输入测站名称"
+          size="small"
+        >
+          <template #append>
+            <el-button icon="Search" size="small"/>
+          </template>
+        </el-input>
+      </div>
+      <tree :treeData="treeData" @sendNodeData="getNodeData"/>
+    </div>
+    <div class="gxsjjc-right">
+      <el-form ref="gxsjjcFormRef" :model="gxsjjcForm" :inline="true" size="small" class="gxsjjc-form">
+        <el-form-item label="日期：">
+          <el-date-picker
+            v-model="gxsjjcForm.daterange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="right-content">
+        <div id="gxsjjcLineChart"></div>
+        <el-table 
+        :data="gxsjjcTableData" 
+        border 
+        stripe
+        style="width: 100%" 
+        :height="heightAll" 
+        :header-cell-style="{
+          background: '#d2eafa !important',
+          fontSize: '12px'
+        }"
+        >
+          <el-table-column type="index" width="60" fixed="left" align="center"/>
+          <el-table-column prop="tm" label="时间" align="center"/>
+          <el-table-column prop="tm" label="溶解氧" align="center"/>
+          <el-table-column prop="tm" label="高锰酸盐指数" align="center"/>
+          <el-table-column prop="tm" label="氨氮" align="center"/>
+          <el-table-column prop="tm" label="总氮" align="center"/>
+          <el-table-column prop="tm" label="总磷" align="center"/>
+          <el-table-column prop="tm" label="锑" align="center"/>
+          <el-table-column prop="tm" label="温度" align="center"/>
+          <el-table-column prop="tm" label="PH值" align="center"/>
+          <el-table-column prop="tm" label="电导率" align="center"/>
+        </el-table>
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :size="pagination.size"
+          :total="pagination.totalCount"
+          :disabled=false
+          background
+          layout="total, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts  from "echarts";
+import tree from "@/components/FolderTree.vue";
+import { onMounted } from "vue";
+
+const stnm = ref("");
+const treeData = ref([
+  {
+    id: '1',
+    label: '共享站点监测站列表',
+    type: 'folder',
+    children: [
+      {
+        id: '1-1',
+        label: '新孟河-江苏水质共享',
+        type: 'folder',
+        children: [
+        {
+            id: '1-1-1',
+            label: '340省道大桥',
+            type: 'file',
+        },
+    ]
+      },
+    ]
+  },
+])
+const gxsjjcForm = ref({
+  daterange:[],
+});
+const gxsjjcLineChart = ref(null);
+const heightAll = 40.3 + 'vh';
+const gxsjjcTableData = ref([])
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  totalCount: 0,
+});
+
+onMounted(() => {
+  initChart();
+})
+
+const handleSearch = () => {};
+// 过程线
+const initChart = () => {
+  const option = { 
+    title: {
+    text: '【望亭立交闸下】监测指标过程线',
+    subtext: '时段：2025-10-30 至 2025-10-31',
+    left: 'center'
+  },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: { 
+        x:'center',      //可设定图例在左、右、居中
+        y:'bottom',     //可设定图例在上、下、居中
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '8%',
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        data: [120, 132, 101, 134, 90, 230, 210]
+      },
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [220, 182, 191, 234, 290, 330, 310]
+      },
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [150, 232, 201, 154, 190, 330, 410]
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        data: [320, 332, 301, 334, 390, 330, 320]
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        data: [820, 932, 901, 934, 1290, 1330, 1320]
+      }
+    ]
+  };
+  gxsjjcLineChart.value = echarts.init(document.getElementById('gxsjjcLineChart'));
+  gxsjjcLineChart.value.setOption(option);
+};
+
+// 获取树控件节点数据
+const getNodeData = (data,node) => {
+  console.log('getnnode',data,node);
+};
+
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
+}
+const handleCurrentChange = (val) => {
+  pagination.value.currentPage = val;
+}
+</script>
+
+<style lang="scss" scoped>
+.gxsjjc-index{
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  .gxsjjc-left{
+    width: 15%;
+    height: 92vh;
+    border: 1px solid #DCDFE6;
+    .left-title{
+      width: 100%;
+      height: 30px;
+      background: linear-gradient(to right, #a8d2fa, #fff);
+      box-shadow: 0 5px 5px #b2d3f9;
+      font-size: 16px;
+      font-family: 'ALIMAMASHUHEITI';
+      color: #4a93f5;
+      line-height: 30px;
+      text-align: center;
+    }
+    .left-input{
+      width: 90%;
+      margin: 8px auto;
+      .input-demo{
+        .el-input-group__append{
+          background-color: #409eff !important;
+        }
+      }
+    }
+  }
+  .gxsjjc-right{
+    width:84%;
+    .gxsjjc-form{
+      width: 100%;
+      padding: 5px 0;
+      .el-form-item{
+          margin-bottom: 0 !important;
+      }
+    }
+    .right-content{
+      width: 100%;
+      border: 1px solid #DCDFE6;
+      #gxsjjcLineChart{
+        width: 100%;
+        height: 45vh;
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/zhiban/jianceshuju/zidongjiance.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="zdzjc-index">
+    <div class="zdzjc-left">
+      <div class="left-title">
+        自动测站列表
+      </div>
+      <div class="left-input">
+        <el-input
+          v-model="stnm"
+          style="width: 100%;"
+          placeholder="请输入测站名称"
+          size="small"
+        >
+          <template #append>
+            <el-button icon="Search" size="small"/>
+          </template>
+        </el-input>
+      </div>
+      <tree :treeData="treeData" @sendNodeData="getNodeData"/>
+    </div>
+    <div class="zdzjc-right">
+      <el-form ref="zdzjcFormRef" :model="zdzjcForm" :inline="true" size="small" class="zdzjc-form">
+        <el-form-item label="日期：">
+          <el-date-picker
+            v-model="zdzjcForm.daterange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="right-content">
+        <div id="zdzjcLineChart"></div>
+        <el-table 
+        :data="zdzjcTableData" 
+        border 
+        stripe
+        style="width: 100%" 
+        :height="heightAll" 
+        :header-cell-style="{
+          background: '#d2eafa !important',
+          fontSize: '12px'
+        }"
+        >
+          <el-table-column type="index" width="60" fixed="left" align="center"/>
+          <el-table-column prop="tm" label="时间" align="center"/>
+          <el-table-column prop="tm" label="溶解氧" align="center"/>
+          <el-table-column prop="tm" label="高锰酸盐指数" align="center"/>
+          <el-table-column prop="tm" label="氨氮" align="center"/>
+          <el-table-column prop="tm" label="总氮" align="center"/>
+          <el-table-column prop="tm" label="总磷" align="center"/>
+          <el-table-column prop="tm" label="锑" align="center"/>
+          <el-table-column prop="tm" label="温度" align="center"/>
+          <el-table-column prop="tm" label="PH值" align="center"/>
+          <el-table-column prop="tm" label="电导率" align="center"/>
+        </el-table>
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :size="pagination.size"
+          :total="pagination.totalCount"
+          :disabled=false
+          background
+          layout="total, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts  from "echarts";
+import tree from "@/components/FolderTree.vue";
+import { onMounted } from "vue";
+
+const stnm = ref("");
+const treeData = ref([
+  {
+    id: '1',
+    label: '太浦河沿线',
+    type: 'folder',
+    children: [
+      {
+        id: '1-1',
+        label: '太浦河口自动站',
+        type: 'file',
+      },
+    ]
+  },
+  {
+    id: '2',
+    label: '望虞河沿线',
+    type: 'folder',
+    children: [
+      {
+        id: '2-4',
+        label: '望亭立交闸下',
+        type: 'file',
+      },
+    ]
+  },
+  {
+    id: '3',
+    label: '太湖及周边',
+    type: 'folder',
+    children: [
+      {
+        id: '3-1',
+        label: '社渎港',
+        type: 'file',
+      },
+    ]
+  },
+])
+const zdzjcForm = ref({
+  daterange:[],
+});
+const zdzjcLineChart = ref(null);
+const heightAll = 40.3 + 'vh';
+const zdzjcTableData = ref([])
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  totalCount: 0,
+});
+
+onMounted(() => {
+  initChart();
+})
+
+const handleSearch = () => {};
+// 过程线
+const initChart = () => {
+  const option = { 
+    title: {
+    text: '【望亭立交闸下】监测指标过程线',
+    subtext: '时段：2025-10-30 至 2025-10-31',
+    left: 'center'
+  },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: { 
+        x:'center',      //可设定图例在左、右、居中
+        y:'bottom',     //可设定图例在上、下、居中
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '8%',
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        data: [120, 132, 101, 134, 90, 230, 210]
+      },
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [220, 182, 191, 234, 290, 330, 310]
+      },
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [150, 232, 201, 154, 190, 330, 410]
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        data: [320, 332, 301, 334, 390, 330, 320]
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        data: [820, 932, 901, 934, 1290, 1330, 1320]
+      }
+    ]
+  };
+  zdzjcLineChart.value = echarts.init(document.getElementById('zdzjcLineChart'));
+  zdzjcLineChart.value.setOption(option);
+};
+
+// 获取树控件节点数据
+const getNodeData = (data,node) => {
+  console.log('getnnode',data,node);
+};
+
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
+}
+const handleCurrentChange = (val) => {
+  pagination.value.currentPage = val;
+}
+</script>
+
+<style lang="scss" scoped>
+.zdzjc-index{
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  .zdzjc-left{
+    width: 15%;
+    height: 92vh;
+    border: 1px solid #DCDFE6;
+    .left-title{
+      width: 100%;
+      height: 30px;
+      background: linear-gradient(to right, #a8d2fa, #fff);
+      box-shadow: 0 5px 5px #b2d3f9;
+      font-size: 16px;
+      font-family: 'ALIMAMASHUHEITI';
+      color: #4a93f5;
+      line-height: 30px;
+      text-align: center;
+    }
+    .left-input{
+      width: 90%;
+      margin: 8px auto;
+      .input-demo{
+        .el-input-group__append{
+          background-color: #409eff !important;
+        }
+      }
+    }
+  }
+  .zdzjc-right{
+    width:84%;
+    .zdzjc-form{
+      width: 100%;
+      padding: 5px 0;
+      .el-form-item{
+          margin-bottom: 0 !important;
+      }
+    }
+    .right-content{
+      width: 100%;
+      border: 1px solid #DCDFE6;
+      #zdzjcLineChart{
+        width: 100%;
+        height: 45vh;
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/zhiban/shiwu/hushangjilu.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="huishang-index">
+    <el-form ref="huiShangFormRef" :model="huiShangForm" :inline="true" size="small" class="huishang-form">
+      <el-form-item label="日期：">
+        <el-date-picker
+          v-model="huiShangForm.daterange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </el-form-item>
+      <el-form-item label="关键字：">
+      <el-input v-model="huiShangForm.keyword" placeholder="请输入关键字"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="huishang-content">
+      <div class="content-btns">
+        <el-button type="primary" size="small" @click="handleRefresh">刷新</el-button>
+        <el-button type="primary" size="small" @click="handleDayList">转至日报</el-button>
+        <el-button type="primary" size="small" @click="handelExport" class="btn-export">导出</el-button>
+      </div>
+      <el-table 
+        :data="huiShangData" 
+        border 
+        stripe
+        style="width: 100%;" 
+        :height="heightAll" 
+        :header-cell-style="{
+          background: '#d2eafa !important',
+          fontSize: '12px'
+        }"
+      >
+        <el-table-column type="selection" width="55"/>
+        <el-table-column type="index" width="50" align="center"/>
+        <el-table-column prop="tm" label="值班日期" align="center"/>
+        <el-table-column prop="tm" label="值班时间" align="center"/>
+        <el-table-column prop="tm" label="值班人" align="center"/>
+        <el-table-column prop="tm" label="太湖水位(m)" width="220" align="center"/>
+        <el-table-column prop="tm" label="望虞引/排水量(万m³)" width="220" align="center"/>
+        <el-table-column prop="tm" label="太浦闸供/排水量(万m³)" width="220" align="center"/>
+        <el-table-column prop="tm" label="常熟引/排水量(万m³)" width="220" align="center"/>
+        <el-table-column prop="tm" label="新孟河江边枢纽引/排水量(万m³)" width="220" align="center"/>
+      </el-table>
+      <el-pagination
+        v-model:current-page="pagination.currentPage"
+        v-model:page-size="pagination.pageSize"
+        :size="pagination.size"
+        :total="pagination.totalCount"
+        :disabled=false
+        background
+        layout="total, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const huiShangForm = ref({
+  daterange:[],
+  keyword:""
+});
+const heightAll = 82 + 'vh';
+const huiShangData = ref([]);
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  totalCount: 0,
+});
+
+const handleSearch = () => {};
+const handleRefresh = () => {};
+const handleDayList = () => {};
+const handelExport = () => {};
+
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
+}
+const handleCurrentChange = (val) => {
+  pagination.value.currentPage = val;
+}
+</script>
+
+<style scoped lang="scss">
+.huishang-index{
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  .huishang-form{
+    width: 100%;
+    padding: 5px 0;
+    .el-form-item{
+        margin-bottom: 0 !important;
+    }
+  }
+  .huishang-content{
+    width: 100%;
+    border: 1px solid #DCDFE6;
+    .content-btns{
+      width: 99%;
+      margin: 5px auto;
+      position: relative;
+    }
+    .btn-export{
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/zhiban/shiwu/zhibanjihua.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="jihua-index">
+    <el-form ref="jiHuaFormRef" :model="jiHuaForm" :inline="true" size="small" class="jihua-form">
+      <el-form-item label="日期：">
+        <el-date-picker
+          v-model="jiHuaForm.daterange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </el-form-item>
+      <el-form-item label="关键字：">
+      <el-input v-model="jiHuaForm.keyword" placeholder="请输入关键字"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="jihua-content">
+      <div class="content-btns">
+        <el-button type="primary" size="small" @click="handleRefresh">刷新</el-button>
+        <el-button type="primary" size="small" @click="handleShiftChange">换班</el-button>
+        <el-button type="primary" size="small" @click="handleScheduling">导入排班</el-button>
+        <el-button type="primary" size="small" @click="handelExportTemplate">导出模板</el-button>
+        <el-button type="primary" size="small" @click="handelExport" class="btn-export">导出</el-button>
+      </div>
+      <el-table 
+        :data="jiHuaData" 
+        border 
+        stripe
+        style="width: 100%;" 
+        :height="heightAll" 
+        :header-cell-style="{
+          background: '#d2eafa !important',
+          fontSize: '12px'
+        }"
+      >
+        <el-table-column type="selection" width="55"/>
+        <el-table-column type="index" width="50" align="center"/>
+        <el-table-column prop="tm" label="值班时间" align="center"/>
+        <el-table-column prop="tm" label="星期" align="center"/>
+        <el-table-column prop="tm" label="第一值班人" align="center"/>
+        <el-table-column prop="tm" label="第一值班人" align="center"/>
+        <el-table-column prop="tm" label="带班领导" align="center"/>
+      </el-table>
+      <el-pagination
+        v-model:current-page="pagination.currentPage"
+        v-model:page-size="pagination.pageSize"
+        :size="pagination.size"
+        :total="pagination.totalCount"
+        :disabled=false
+        background
+        layout="total, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const jiHuaForm = ref({
+  daterange:[],
+  keyword:""
+});
+const heightAll = 82 + 'vh';
+const jiHuaData = ref([]);
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  totalCount: 0,
+});
+
+const handleSearch = () => {};
+const handleRefresh = () => {};
+const handleShiftChange = () => {};
+const handleScheduling = () => {};
+const handelExportTemplate = () => {};
+const handelExport = () => {};
+
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
+}
+const handleCurrentChange = (val) => {
+  pagination.value.currentPage = val;
+}
+</script>
+
+<style scoped lang="scss">
+.jihua-index{
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  .jihua-form{
+    width: 100%;
+    padding: 5px 0;
+    .el-form-item{
+        margin-bottom: 0 !important;
+    }
+  }
+  .jihua-content{
+    width: 100%;
+    border: 1px solid #DCDFE6;
+    .content-btns{
+      width: 99%;
+      margin: 5px auto;
+      position: relative;
+    }
+    .btn-export{
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/zhiban/shiwu/zhibanjilu.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="zhiban-index">
-    <el-form ref="zhiBanFormRef" :model="zhiBanForm" :inline="true" class="zhiban-form">
+    <el-form ref="zhiBanFormRef" :model="zhiBanForm" :inline="true" size="small" class="zhiban-form">
       <el-form-item label="日期：" style="margin-bottom: 0;">
         <el-date-picker
           v-model="zhiBanForm.date"
@@ -8,16 +8,15 @@
           type="date"
           placeholder="请输入日期"
           clearable
-          size="small"
         />
       </el-form-item>
       <el-form-item label="值班时间：" style="margin-bottom: 0;">
-      <el-input v-model="zhiBanForm.time" size="small"/>
+      <el-input v-model="zhiBanForm.time"/>
       </el-form-item>
       <el-form-item style="margin-bottom: 0;">
-        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
-        <el-button type="primary" size="small" @click="handleChangeList">转至列表</el-button>
-        <el-button type="primary" size="small" @click="handelExport">导出当前日报</el-button>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+        <el-button type="primary" @click="handleChangeList">转至列表</el-button>
+        <el-button type="primary" @click="handelExport">导出当前日报</el-button>
       </el-form-item>
     </el-form>
     <div class="zhiban-content">
@@ -122,8 +121,9 @@ const handelSave = () => {};
 
 <style scoped lang="scss">
 .zhiban-index{
-  width: 100%;
+  width: 99%;
   height: 100%;
+  margin: auto;
   background-color: #f6f6f6;
 }
 .zhiban-form{

ruoyi-ui/src/views/zhiban/yingjijiance.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="yingji-index">
+    <div class="yingji-left">
+      <div class="left-title">
+        应急监测站点列表
+      </div>
+      <div class="left-input">
+        <el-input
+          v-model="stnm"
+          style="width: 100%;"
+          placeholder="请输入测站名称"
+          size="small"
+        >
+          <template #append>
+            <el-button icon="Search" size="small"/>
+          </template>
+        </el-input>
+      </div>
+      <tree :treeData="treeData" @sendNodeData="getNodeData"/>
+    </div>
+    <div class="yingji-right">
+      <el-form ref="yingJiFormRef" :model="yingJiForm" :inline="true" size="small" class="yingji-form">
+        <el-form-item label="日期：">
+          <el-date-picker
+            v-model="yingJiForm.daterange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="right-content">
+        <div id="yingJiLineChart"></div>
+        <el-table 
+        :data="yingJiTableData" 
+        border 
+        stripe
+        style="width: 100%" 
+        :height="heightAll" 
+        :header-cell-style="{
+          background: '#d2eafa !important',
+          fontSize: '12px'
+        }"
+        >
+          <el-table-column type="index" width="60" fixed="left" align="center"/>
+          <el-table-column prop="tm" label="时间" align="center"/>
+          <el-table-column prop="tm" label="溶解氧" align="center"/>
+          <el-table-column prop="tm" label="高锰酸盐指数" align="center"/>
+          <el-table-column prop="tm" label="氨氮" align="center"/>
+          <el-table-column prop="tm" label="总氮" align="center"/>
+          <el-table-column prop="tm" label="总磷" align="center"/>
+          <el-table-column prop="tm" label="锑" align="center"/>
+          <el-table-column prop="tm" label="温度" align="center"/>
+          <el-table-column prop="tm" label="PH值" align="center"/>
+          <el-table-column prop="tm" label="电导率" align="center"/>
+        </el-table>
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :size="pagination.size"
+          :total="pagination.totalCount"
+          :disabled=false
+          background
+          layout="total, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts  from "echarts";
+import tree from "@/components/FolderTree.vue";
+import { onMounted } from "vue";
+
+const stnm = ref("");
+const treeData = ref([
+  {
+    id: '1',
+    label: '应急监测站列表',
+    type: 'folder',
+    children: [
+      {
+        id: '1-1',
+        label: '金墅湾水厂',
+        type: 'file',
+      },
+      {
+        id: '1-2',
+        label: '太浦闸下',
+        type: 'file',
+      },
+      {
+        id: '1-3',
+        label: '大桥角新桥',
+        type: 'file',
+      },
+      {
+        id: '1-4',
+        label: '望亭立交闸下',
+        type: 'file',
+      },
+    ]
+  },
+])
+const yingJiForm = ref({
+  daterange:[],
+});
+const yingJiLineChart = ref(null);
+const heightAll = 40.3 + 'vh';
+const yingJiTableData = ref([])
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  totalCount: 0,
+});
+
+onMounted(() => {
+  initChart();
+})
+
+const handleSearch = () => {};
+// 过程线
+const initChart = () => {
+  const option = { 
+    title: {
+    text: '【金墅湾水厂】监测指标过程线',
+    subtext: '时段：2025-10-30 至 2025-10-31',
+    left: 'center'
+  },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: { 
+        x:'center',      //可设定图例在左、右、居中
+        y:'bottom',     //可设定图例在上、下、居中
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '8%',
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        data: [120, 132, 101, 134, 90, 230, 210]
+      },
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [220, 182, 191, 234, 290, 330, 310]
+      },
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [150, 232, 201, 154, 190, 330, 410]
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        data: [320, 332, 301, 334, 390, 330, 320]
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        data: [820, 932, 901, 934, 1290, 1330, 1320]
+      }
+    ]
+  };
+  yingJiLineChart.value = echarts.init(document.getElementById('yingJiLineChart'));
+  yingJiLineChart.value.setOption(option);
+};
+
+// 获取树控件节点数据
+const getNodeData = (data,node) => {
+  console.log('getnnode',data,node);
+};
+
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
+}
+const handleCurrentChange = (val) => {
+  pagination.value.currentPage = val;
+}
+</script>
+
+<style lang="scss" scoped>
+.yingji-index{
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  .yingji-left{
+    width: 15%;
+    height: 92vh;
+    border: 1px solid #DCDFE6;
+    .left-title{
+      width: 100%;
+      height: 30px;
+      background: linear-gradient(to right, #a8d2fa, #fff);
+      box-shadow: 0 5px 5px #b2d3f9;
+      font-size: 16px;
+      font-family: 'ALIMAMASHUHEITI';
+      color: #4a93f5;
+      line-height: 30px;
+      text-align: center;
+    }
+    .left-input{
+      width: 90%;
+      margin: 8px auto;
+      .input-demo{
+        .el-input-group__append{
+          background-color: #409eff !important;
+        }
+      }
+    }
+  }
+  .yingji-right{
+    width:84%;
+    .yingji-form{
+      width: 100%;
+      padding: 5px 0;
+      .el-form-item{
+          margin-bottom: 0 !important;
+      }
+    }
+    .right-content{
+      width: 100%;
+      border: 1px solid #DCDFE6;
+      #yingJiLineChart{
+        width: 100%;
+        height: 45vh;
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/zhiban/youjian/taihushuizhi.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="taiHu-index">
+  <el-form ref="taiHuFormRef" :model="taiHuForm" :inline="true" size="small" class="taiHu-form">
+    <el-form-item label="日期：">
+      <el-date-picker
+        v-model="taiHuForm.daterange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      />
+    </el-form-item>
+    <el-form-item label="值班人：">
+      <el-select v-model="taiHuForm.people" placeholder="请选择发送人" style="width: 150px;">
+        <el-option 
+          v-for="(item) in peopleList"
+          :key="item.value"
+          :label="item.label" 
+          :value="item.value" 
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="关键字：">
+      <el-input v-model="taiHuForm.keyword" placeholder="请输入关键字"/>
+    </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
+        <el-button type="primary" size="small" @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="taiHu-content">
+      <div class="content-btns">
+        <el-button type="primary" size="small" @click="handleRefresh">刷新</el-button>
+        <el-button type="primary" size="small" @click="handleEdit">编辑</el-button>
+        <el-button type="primary" size="small" @click="handleReview">审核</el-button>
+        <el-button type="primary" size="small" @click="handelApproval">审批</el-button>
+        <el-button type="primary" size="small" @click="handelSendEmail">发送邮件</el-button>
+      </div>
+      <el-table 
+        :data="taiHuData" 
+        border 
+        stripe
+        style="width: 100%;" 
+        :height="heightAll" 
+        :header-cell-style="{
+          background: '#d2eafa !important',
+          fontSize: '12px'
+        }"
+      >
+        <el-table-column type="selection" width="55"/>
+        <el-table-column type="index" width="50"/>
+        <el-table-column prop="tm" label="日期" width="120"/>
+        <el-table-column prop="tm" label="标题" width="220"/>
+        <el-table-column prop="tm" label="期数" width="200"/>
+        <el-table-column prop="tm" label="值班人" width="100"/>
+        <el-table-column prop="tm" label="审核状态" width="120"/>
+        <el-table-column prop="tm" label="审批状态" width="120"/>
+        <el-table-column prop="tm" label="发送状态" width="120"/>
+        <el-table-column prop="tm" label="备注"/>
+        <el-table-column label="操作" align="center" width="220">
+          <template #default="scope">
+            <el-button size="small" @click="handleTableEdit(scope.row)">
+              <el-icon>
+                <Edit />
+              </el-icon>
+            </el-button>
+            <el-button size="small" @click="handleDownload(scope.row)">
+              <el-icon>
+                <Download />
+              </el-icon>
+            </el-button>
+            <el-button size="small" @click="handleView(scope.row)">
+              <el-icon>
+                <View />
+              </el-icon>
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        v-model:current-page="pagination.currentPage"
+        v-model:page-size="pagination.pageSize"
+        :size="pagination.size"
+        :total="pagination.totalCount"
+        :disabled=false
+        background
+        layout="total, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const taiHuForm = ref({
+  daterange:[],
+  people:"",
+  keyword:""
+});
+const peopleList = ref([]);
+const heightAll = 82 + 'vh';
+const taiHuData = ref([]);
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  totalCount: 0,
+});
+
+const handleSearch = () => {};
+const handleReset = () => {};
+const handleRefresh = () => {};
+const handleEdit = () => {};
+const handleReview = () => {};
+const handelApproval = () => {};
+const handelSendEmail = () => {};
+
+// 表格按钮
+const handleTableEdit = (row) => {};
+const handleDownload = (row) => {};
+const handleView = (row) => {};
+
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
+}
+const handleCurrentChange = (val) => {
+  pagination.value.currentPage = val;
+}
+</script>
+
+<style scoped lang="scss">
+.taiHu-index{
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  .taiHu-form{
+    width: 100%;
+    padding: 5px 0;
+    .el-form-item{
+        margin-bottom: 0 !important;
+    }
+  }
+  .taiHu-content{
+    width: 100%;
+    border: 1px solid #DCDFE6;
+    .content-btns{
+      width: 99%;
+      margin: 5px auto;
+      position: relative;
+    }
+    .btn-export{
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/zhiban/youjian/youxiang.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="youxiang-index">
+  <el-form ref="youXiangFormRef" :model="youXiangForm" :inline="true" size="small" class="youxiang-form">
+    <el-form-item label="邮件名称：">
+      <el-input v-model="youXiangForm.emailName" placeholder="请输入邮件名称"/>
+    </el-form-item>
+    <el-form-item label="邮件地址：">
+      <el-input v-model="youXiangForm.emailAddr" placeholder="请输入邮件地址"/>
+    </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="youxiang-content">
+      <div class="content-btns">
+        <el-button type="primary" size="small" @click="handleRefresh">刷新</el-button>
+        <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
+        <el-button type="primary" size="small" @click="handleEdit">编辑</el-button>
+        <el-button type="primary" size="small" @click="handelDel">删除</el-button>
+      </div>
+      <el-table 
+        :data="huiShangData" 
+        border 
+        stripe
+        style="width: 100%;" 
+        :height="heightAll" 
+        :header-cell-style="{
+          background: '#d2eafa !important',
+          fontSize: '12px'
+        }"
+      >
+        <el-table-column type="selection" width="55"/>
+        <el-table-column type="index" width="50"/>
+        <el-table-column prop="tm" label="邮件名称"/>
+        <el-table-column prop="tm" label="邮件地址"/>
+        <el-table-column prop="tm" label="邮箱状态"/>
+        <el-table-column prop="tm" label="备注"/>
+      </el-table>
+      <el-pagination
+        v-model:current-page="pagination.currentPage"
+        v-model:page-size="pagination.pageSize"
+        :size="pagination.size"
+        :total="pagination.totalCount"
+        :disabled=false
+        background
+        layout="total, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const youXiangForm = ref({
+  emailName:"",
+  emailAddr:""
+});
+const heightAll = 82 + 'vh';
+const huiShangData = ref([]);
+const pagination = ref({
+  currentPage: 1,
+  pageSize: 10,
+  totalCount: 0,
+});
+
+const handleSearch = () => {};
+
+const handleRefresh = () => {};
+const handleAdd = () => {};
+const handleEdit = () => {};
+const handelDel = () => {};
+
+// 表格按钮
+const handleTableEdit = (row) => {};
+const handleDownload = (row) => {};
+const handleView = (row) => {};
+
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
+}
+const handleCurrentChange = (val) => {
+  pagination.value.currentPage = val;
+}
+</script>
+
+<style scoped lang="scss">
+.youxiang-index{
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  .youxiang-form{
+    width: 100%;
+    padding: 5px 0;
+    .el-form-item{
+        margin-bottom: 0 !important;
+    }
+  }
+  .youxiang-content{
+    width: 100%;
+    border: 1px solid #DCDFE6;
+    .content-btns{
+      width: 99%;
+      margin: 5px auto;
+      position: relative;
+    }
+    .btn-export{
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+</style>