diff --git a/package.json b/package.json
index ab71b93..3eac5f7 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@turf/turf": "^6.5.0",
     "axios": "1.2.0",
     "crypto-js": "4.1.1",
+    "dayjs": "^1.11.13",
     "echarts": "5.3.3",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.3.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 42b0cfe..175cce9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       crypto-js:
         specifier: 4.1.1
         version: 4.1.1
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       echarts:
         specifier: 5.3.3
         version: 5.3.3
diff --git a/src/api/reservoir/index.ts b/src/api/reservoir/index.ts
new file mode 100644
index 0000000..c34017b
--- /dev/null
+++ b/src/api/reservoir/index.ts
@@ -0,0 +1,210 @@
+import { request } from '../axios';
+
+// 获取场景列表
+export const getSceneListData = async (data: any) => {
+  return request({
+    url: `/map/scene/sceneList`,
+    method: 'post',
+    data: {
+      pageNum: 1,
+      pageSize: 10,
+      data: {
+        id: '',
+        name: data.name
+      },
+      params: {
+        order: 'asc',
+        orderBy: 'pub_date'
+      }
+    }
+  });
+};
+
+// 根据id获取图层树
+export const getLayerData = async (sceneId: any) => {
+  return request({
+    url: `/map/scene/getLayerTree/${sceneId}`,
+    method: 'get'
+  });
+};
+
+// 获取水库基础列表
+export const getReservoirBaseListData = (data: any) => {
+  return request({
+    url: `/sk/base/list`,
+    method: 'post',
+    data: data
+  });
+};
+
+// 获取水库测站基础列表
+export const getReservoirCZListData = (data: any) => {
+  return request({
+    url: `/cz/base/list`,
+    method: 'post',
+    data: data
+  });
+};
+
+// 获取测点列表 /cd/base/list
+export const getReservoirCDListData = (data: any) => {
+  return request({
+    url: `/cd/base/list`,
+    method: 'post',
+    data: data
+  });
+};
+
+
+// 获取水库测站提交告警详情
+export const getReservoirCZAlarmDetailsData = (id: string | number) => {
+  return request({
+    url: `/cz/base/${id}`,
+    method: 'get'
+  });
+};
+
+// 水库基础信息详情
+export const getReservoirBaseDetailData = (id: string | number) => {
+  return request({
+    url: `/sk/base/${id}`,
+    method: 'get'
+  });
+};
+// 获取水库代表站信息详情
+export const getReservoirFlagCZData = (id: string | number) => {
+  return request({
+    url: `/sk/base/stcd/${id}`,
+    method: 'get'
+  });
+};
+// 水库特征信息详情
+export const getReservoirRsppDetailData = (id: string | number) => {
+  return request({
+    url: `/sk/rspp/${id}`,
+    method: 'get'
+  });
+};
+
+// 水库测站详情
+export const getReservoirCZDetailData = (id: string | number) => {
+  return request({
+    url: `/cz/base/${id}`,
+    method: 'get'
+  });
+};
+
+// 测站要素详情
+export const getReservoirCZElementDetailData = (data: any) => {
+  return request({
+    url: `/cz/monitor/water`,
+    method: 'post',
+    data
+  });
+};
+
+// 获取测站测点指标 /cz/monitor/index
+export const getReservoirMonitorIndexData = (data: any) => {
+  return request({
+    url: `/cz/monitor/index`,
+    method: 'post',
+    data
+  });
+};
+
+// 测站树结构
+export const getReservoirTreeDetailData = (data: any) => {
+  return request({
+    url: `/cd/base/tree`,
+    method: 'get',
+    params: data
+  });
+};
+
+// 获取测点列表
+export const getReservoirCZPointListData = (data: any) => {
+  return request({
+    url: `/cd/base/list`,
+    method: 'post',
+    data
+  });
+};
+
+// 获取水库测站echarts数据
+export const getReservoirCZEchartsData = (data: any) => {
+  return request({
+    url: `/cz/monitor/chart`,
+    method: 'post',
+    data
+  });
+};
+
+// 分页获取监测告警信息/cz/alarm/page
+export const getReservoirCZAlarmPageData = (data: any) => {
+  return request({
+    url: `/cz/alarm/page`,
+    method: 'post',
+    data
+  });
+};
+
+// 保存监测预警表单信息 /cz/monitor/config
+export const saveReservoirCZMonitorConfigData = (data: any) => {
+  return request({
+    url: `/cz/monitor/config`,
+    method: 'post',
+    data
+  });
+};
+
+// 获取监测预警表单信息 /cz/monitor/config/list/{stcd}
+export const getReservoirCZMonitorConfigData = (stcd: any) => {
+  return request({
+    url: `/cz/monitor/config/list/${stcd}`,
+    method: 'get'
+  });
+};
+
+// 获取echart数据 /cz/monitor/chart
+export const getReservoirCZMonitorEchartsData = (data: any) => {
+  return request({
+    url: `/cz/monitor/chart`,
+    method: 'post',
+    data
+  });
+};
+
+// 获取视频列表/safe/operation/Play
+export const getOperationPlay = (data: any) => {
+  return request({
+    url: `/safe/operation/play`,
+    method: 'post',
+    data
+  });
+};
+
+export const getVideoDataList = (data: any) => {
+  return request({
+    url: `/safe/operation/reservoirList`,
+    method: 'post',
+    data
+  });
+};
+
+// 水库实时监测--监测站树数据
+export const getReservoirMonitorTreeData = (id: string | number) => {
+  return request({
+    url: `/sk/??`,
+    method: 'get'
+  });
+};
+
+// 水库实时监测--降雨量等详情
+export const getReservoirRainDetailData = (id: string | number) => {
+  return request({
+    url: `/sk/??`,
+    method: 'get'
+  });
+}
+
+
diff --git a/src/components.d.ts b/src/components.d.ts
index d58ef46..10a0151 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,12 +9,22 @@ declare module 'vue' {
   export interface GlobalComponents {
     Card: typeof import('./components/Card/index.vue')['default']
     Dialog: typeof import('./components/Dialog/index.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
diff --git a/src/hooks/web/useProject.tsx b/src/hooks/web/useProject.tsx
index 22c92e5..7c96cfe 100644
--- a/src/hooks/web/useProject.tsx
+++ b/src/hooks/web/useProject.tsx
@@ -4,6 +4,7 @@ import { LayerTypeEnum } from '@/enums/projectEnum';
 import { queryLayersByPos } from "@/utils/mapUtils";
 import axios from 'axios';
 import { throttle } from "lodash-es";
+import { useProjectStore } from '@/store/modules/project';
 const clustering = reactive({
   enabled: true,
   pixelRange: 200,
@@ -289,47 +290,48 @@ export function useLayer() {
     if (!layerType || !(action = layerActions[layerType as string])) return;
     let layer: any = await action(layerData);
     if (isNeedCluster === '1' && layerData.nameCn === "水库点") {
-      let baseUrl = import.meta.env.VITE_BASE_URL;
-      const data = await getFeatures(layerData);
-      if (data?.features?.[0]?.geometry?.type === 'Point') {
-        let layerConfig = {};
-        switch (layerData.nameCn) {
-          case "水库点":
-            layerConfig = {
-              isUniqueRender: true,
-              field: "ENG_SCAL",
-              fieldOptions: [
-                { name: "1.0", attr: "image", value: "reservoir_big.png" },
-                { name: "2.0", attr: "image", value: "reservoir_big.png" },
-                { name: "3.0", attr: "image", value: "reservoir_normal.png" },
-                { name: "4.0", attr: "image", value: "reservoir_small.png" },
-                { name: "5.0", attr: "image", value: "reservoir_small.png" },
-              ],
-              image: "map-title-o.png",
-            };
-            break;
-        }
-        layer = new SyCim.ClusterWfsLayer(layerData.id, {
-          data,
-          symbol: {
-            type: "billboardP",
-            imageProxy: `${baseUrl}/img/map/`, // 图片代理
-            style: {
-              clampToGround: false,
-              image: "reservoir_small.png",
-              ...layerConfig,
-            },
-          },
-          clustering: {
-            enabled: clustering.enabled,
-            pixelRange: clustering.pixelRange,
-            minimumClusterSize: clustering.minimumClusterSize,
-            clusterEvent: undefined,
-            clusterColors: undefined, // 聚合点颜色
-            getImage: undefined, // 获取聚合图片的函数
-          },
-        });
-      }
+      // let baseUrl = import.meta.env.VITE_BASE_URL;
+      // const data = await getFeatures(layerData);
+      // if (data?.features?.[0]?.geometry?.type === 'Point') {
+      //   let layerConfig = {};
+      //   switch (layerData.nameCn) {
+      //     case "水库点":
+      //       layerConfig = {
+      //         isUniqueRender: true,
+      //         field: "ENG_SCAL",
+      //         fieldOptions: [
+      //           { name: "1.0", attr: "image", value: "reservoir_big.png" },
+      //           { name: "2.0", attr: "image", value: "reservoir_big.png" },
+      //           { name: "3.0", attr: "image", value: "reservoir_normal.png" },
+      //           { name: "4.0", attr: "image", value: "reservoir_small.png" },
+      //           { name: "5.0", attr: "image", value: "reservoir_small.png" },
+      //         ],
+      //         image: "map-title-o.png",
+      //       };
+      //       break;
+      //   }
+      //   layer = new SyCim.ClusterWfsLayer(layerData.id, {
+      //     data,
+      //     symbol: {
+      //       type: "billboardP",
+      //       imageProxy: `${baseUrl}/img/map/`, // 图片代理
+      //       style: {
+      //         clampToGround: false,
+      //         image: "reservoir_small.png",
+      //         ...layerConfig,
+      //       },
+      //     },
+      //     clustering: {
+      //       enabled: clustering.enabled,
+      //       pixelRange: clustering.pixelRange,
+      //       minimumClusterSize: clustering.minimumClusterSize,
+      //       clusterEvent: undefined,
+      //       clusterColors: undefined, // 聚合点颜色
+      //       getImage: undefined, // 获取聚合图片的函数
+      //     },
+      //   });
+      // }
+      addViewerClick();
     }
     layer && window.viewer.addLayer(layer);
     if (['013000'].includes(layerType)) {
@@ -366,21 +368,30 @@ export function useLayer() {
     const { layerType } = data;
     zoomToLayerActions[layerType as string]?.(data);
   };
-  const viewerClick = throttle((e) => {
-    console.log(e);
-  }, 500);
-  const addViewerMouseClick = () => {
-    window.viewer?.on(SyCim.MouseEventType.MOUSE_MOVE, viewerClick);
+  const viewerClick = (e: any) => {
+    const projectStore = useProjectStore();
+    const selectedLayers: any = projectStore.selectedLayers;
+    queryLayersByPos(e.wgs84SurfacePosition, selectedLayers, (res: any) => {
+      if (res?.attributes?.showCode) {
+        const { showCode, showName } = res?.attributes;
+        window.$bus.$emit("open-water-dialog", {
+          code: showCode,
+          name: showName
+        });
+      }
+    });
+  };
+  const addViewerClick = () => {
+    window.viewer?.on(SyCim.MouseEventType.CLICK, viewerClick, window.viewer);
   };
-  const removeViewerMouseClick = () => {
-    window.viewer?.off(SyCim.MouseEventType.MOUSE_MOVE, viewerClick);
+  const removeViewerClick = () => {
+    window.viewer?.off(SyCim.MouseEventType.CLICK, viewerClick, window.viewer);
   };
   return {
     addLayer,
     removeLayer,
     zoomToLayer,
-    addViewerMouseClick,
-    removeViewerMouseClick
+    removeViewerClick
   };
 }
 
diff --git a/src/views/Main/Map/components/LayerTree.vue b/src/views/Main/Map/components/LayerTree.vue
index 1845e93..39acc7f 100644
--- a/src/views/Main/Map/components/LayerTree.vue
+++ b/src/views/Main/Map/components/LayerTree.vue
@@ -43,7 +43,7 @@ import { useProjectStore } from "@/store/modules/project";
 import { useLayer } from "@/hooks/web/useProject";
 import { flattenTree } from "@/utils/index";
 import Tree from "@/components/Tree/index.vue";
-const { zoomToLayer, addViewerMouseClick, removeViewerMouseClick } = useLayer();
+const { zoomToLayer, removeViewerClick } = useLayer();
 
 const projectStore = useProjectStore();
 defineOptions({
@@ -117,11 +117,7 @@ watch(
   },
 );
 
-onMounted(() => {
-  addViewerMouseClick();
-});
-
 onBeforeUnmount(() => {
-  removeViewerMouseClick();
+  removeViewerClick();
 });
 </script>
diff --git a/src/views/Main/ProjectOperation/components/BaseInfo.vue b/src/views/Main/ProjectOperation/components/BaseInfo.vue
new file mode 100644
index 0000000..dcf4d17
--- /dev/null
+++ b/src/views/Main/ProjectOperation/components/BaseInfo.vue
@@ -0,0 +1,739 @@
+<template>
+  <div class="baseInfo-page">
+    <el-tabs v-model="activeName" @tab-click="handleChangeTab">
+      <el-tab-pane label="水库信息" name="1">
+        <div>水库基本信息</div>
+        <el-descriptions
+          class="mt-16"
+          :column="3"
+          border
+          :labelStyle="{
+            'text-align': 'left',
+            width: '120px',
+            height: '50px',
+          }"
+          :contentStyle="{ minWidth: '180px' }"
+        >
+          <el-descriptions-item>
+            <template slot="label"> 水库名称 </template>
+            {{ form.resName }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库代码 </template>
+            {{ form.resCode }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库注册登记号 </template>
+            {{ form.registerCode }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库功能 </template>
+            {{ form.resAction }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库类型 </template>
+            {{ form.resType }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库状态 </template>
+            {{ form.resState }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 工程规模 </template>
+            {{ form.engScal }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 工程等别 </template>
+            {{ form.engGrad }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 曾用名 </template>
+            {{ form.oldName }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库中心经度 </template>
+            {{ form.resCenLong }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库中心纬度 </template>
+            {{ form.resCenLat }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 归口管理部门 </template>
+            {{ form.admDep }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库主管部门 </template>
+            {{ form.cmun }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库管理部门 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 所在行政区划 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 所在流域 </template>
+            {{ form.localBasin }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 所在河流 </template>
+            {{ form.localRiver }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水准基面 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 是否注册 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 左下角经度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 左下角纬度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 右上角经度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 右上角纬度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库所在位置 </template>
+            {{ form.resLoc }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库管理单位 </template>
+            {{ form.mnun }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 工程建设情况 </template>
+            {{ form.engStat }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 有效年份 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 主要建筑物级别 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 控制流域面积 </template>
+            {{ form.watShedArea }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 河道长度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 河道比降 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均径流量 </template>
+            {{ form.avanrnam }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均降水量 </template>
+            {{ form.avanpram }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均流沙量 </template>
+            {{ form.avansdam }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计重现期 </template>
+            {{ form.dsrcin }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计洪峰流量 </template>
+            {{ form.dspkfl }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计1日洪水洪量(万m³) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计3日洪水洪量(万m³) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 校核重现期 </template>
+            {{ form.chrcin }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 校核洪峰流量 </template>
+            {{ form.chpkfl }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 校核洪水历时 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 校核洪水总量 </template>
+            {{ form.chflvl }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计洪水位 </template>
+            {{ form.dsfllv }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 校核洪水位 </template>
+            {{ form.chfllv }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 防洪高水位 </template>
+            {{ form.uppLevFlco }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 防洪限制水位库容 </template>
+            {{ form.flLowLimLevCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 正常蓄水位 </template>
+            {{ form.normWatLev }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 正常蓄水位相应水面面积 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 正常蓄水位相应库容 </template>
+            {{ form.normPoolStagCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 死水位 </template>
+            {{ form.deadLev }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 总库容 </template>
+            {{ form.totCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 调节库容 </template>
+            {{ form.storFlCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 死库容 </template>
+            {{ form.deadCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 防洪库容 </template>
+            {{ form.flcoCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 兴利库容 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 坝址控制流域面积 </template>
+            {{ form.watShedArea }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 地震基本烈度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 地震动峰值加速度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设防地震烈度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 集雨面积 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 下泄生态流量 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 数据来源 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 数据创建时间 </template>
+            {{ form.createTime }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 备注 </template>
+            {{ form.note }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions
+          class="mt-16"
+          :column="2"
+          border
+          :labelStyle="{
+            'text-align': 'left',
+            width: '120px',
+            height: '100px',
+          }"
+          :contentStyle="{ minWidth: '180px' }"
+        >
+          <el-descriptions-item :span="2">
+            <template slot="label"> 水库概况 </template>
+            {{ form.resOv }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="mt-16">水库建设时间</div>
+        <el-descriptions
+          class="mt-16"
+          :column="2"
+          border
+          :labelStyle="{
+            'text-align': 'left',
+            width: '120px',
+            height: '60px',
+          }"
+          :contentStyle="{ minWidth: '180px' }"
+        >
+          <el-descriptions-item>
+            <template slot="label"> 开工时间 </template>
+            {{ form.startDate }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 完工时间 </template>
+            {{ form.compDate }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="mt-16">最近异常加固改造时间</div>
+        <el-descriptions
+          class="mt-16"
+          :column="2"
+          border
+          :labelStyle="{
+            'text-align': 'left',
+            width: '120px',
+            height: '60px',
+          }"
+          :contentStyle="{ minWidth: '180px' }"
+        >
+          <el-descriptions-item>
+            <template slot="label"> 更新时间 </template>
+            {{ form.updateTime }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-tab-pane>
+      <el-tab-pane label="水文特征" name="2">
+        <div>水库水文特征</div>
+        <el-descriptions
+          class="mt-16"
+          :column="3"
+          border
+          :labelStyle="{
+            'text-align': 'left',
+            width: '120px',
+            height: '50px',
+          }"
+          :contentStyle="{ minWidth: '180px' }"
+        >
+          <el-descriptions-item>
+            <template slot="label"> 控制流域面积(km²) </template>
+            {{ form.watShedArea }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均降雨量(mm) </template>
+            {{ form.avanpram }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均径流量(万m³) </template>
+            {{ form.avanrnam }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均输沙两(万t) </template>
+            {{ form.avansdam }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均最低气温(℃) </template>
+            {{ form.myavgmintp }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均蒸发量(mm) </template>
+            {{ form.avanev }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 多年平均含沙量(kg/m³) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水库调节性能 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 正常蓄水位相应水面面积(km²) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 防洪高水位(m) </template>
+            {{ form.uppLevFlco }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 死水位(m) </template>
+            {{ form.deadLev }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 橙色预警水位(m) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 红色预警水位(m) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 黄色预警水位(m) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 汛期开始日期 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 汛期结束日期 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 水准基面 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 备注 </template>
+            {{ form.note }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="mt-16">设计洪水</div>
+        <el-descriptions
+          class="mt-16"
+          :column="3"
+          border
+          :labelStyle="{
+            'text-align': 'left',
+            width: '120px',
+            height: '50px',
+          }"
+          :contentStyle="{ minWidth: '180px' }"
+        >
+          <el-descriptions-item>
+            <template slot="label"> 校核洪峰流量(m³/s) </template>
+            {{ form.chpkfl }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计洪峰流量(m³/s) </template>
+            {{ form.dspkfl }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计洪水位(m) </template>
+            {{ form.dsfllv }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 校核洪水位(m) </template>
+            {{ form.chfllv }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计1日洪水洪量(万m³) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 设计3日洪水洪量(万m³) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 校核洪水历时(d) </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 洪水总量 </template>
+            {{ "" }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="mt-16">汛期限制水位</div>
+        <el-descriptions
+          class="mt-16"
+          :column="3"
+          border
+          :labelStyle="{
+            'text-align': 'left',
+            width: '120px',
+            height: '50px',
+          }"
+          :contentStyle="{ minWidth: '180px' }"
+        >
+          <el-descriptions-item>
+            <template slot="label"> 设计重现期 </template>
+            {{ form.dsrcin }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 河道比降 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 河道长度 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 汛期限制水位主汛期 </template>
+            {{ "" }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="mt-16">库容</div>
+        <el-descriptions
+          class="mt-16"
+          :column="3"
+          border
+          :labelStyle="{
+            'text-align': 'left',
+            width: '120px',
+            height: '50px',
+          }"
+          :contentStyle="{ minWidth: '180px' }"
+        >
+          <el-descriptions-item>
+            <template slot="label"> 兴利库容 </template>
+            {{ "" }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 总库容(m³) </template>
+            {{ form.totCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 防洪库容(m³) </template>
+            {{ form.flcoCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 调节库容(m³) </template>
+            {{ form.storFlCap }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 死库容(m³) </template>
+            {{ form.deadCap }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-tab-pane>
+      <el-tab-pane label="库容曲线" name="3">
+        <div class="chart-container" ref="lineChartRef"></div>
+      </el-tab-pane>
+      <el-tab-pane label="责任人信息" name="4">
+        <div>责任人信息</div>
+        <el-table class="mt-16" :data="dutyPersonList" border style="width: 100%">
+          <el-table-column type="index" label="序号" width="60"> </el-table-column>
+          <el-table-column prop="dutyName" label="负责人" width="120"> </el-table-column>
+          <el-table-column prop="dutyType" label="负责人类别" width="120"> </el-table-column>
+          <el-table-column prop="phone" label="电话"> </el-table-column>
+          <el-table-column prop="manageUnit" label="单位"> </el-table-column>
+          <el-table-column prop="createTime" label="数据创建时间"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch } from "vue";
+import * as echarts from "echarts";
+import { getReservoirBaseDetailData, getReservoirRsppDetailData } from "@/api/reservoir";
+
+const props = defineProps({
+  resCode: {
+    type: String,
+    default: "",
+  },
+});
+let myChart = null;
+let code = null;
+const activeName = ref("1");
+let typeApi = {
+  ["1"]: initBaseAndRsppInfo,
+  ["2"]: initBaseAndRsppInfo,
+  ["3"]: initEchart,
+  ["4"]: null,
+};
+const form = ref({});
+const dutyPersonList = ref([]);
+const emits = defineEmits(["getResInfo"]);
+function initBaseInfo() {
+  getReservoirBaseDetailData(props.resCode).then((res) => {
+    if (res?.data) {
+      form.value = {
+        ...form.value,
+        ...res.data,
+      };
+      emits("getResInfo", res.data);
+    }
+  });
+}
+function initRsppInfo() {
+  getReservoirRsppDetailData(props.resCode).then((res) => {
+    if (res?.data) {
+      Object.keys(res.data).forEach((key) => {
+        form.value[key] = res.data[key];
+      });
+    }
+  });
+}
+
+function initBaseAndRsppInfo() {
+  initBaseInfo();
+  initRsppInfo();
+}
+
+function initData() {
+  activeName.value = "1";
+  initBaseAndRsppInfo();
+}
+const lineChartRef = ref(null);
+function initEchart() {
+  let chartDom = lineChartRef.value;
+  if (!chartDom) return;
+  if (myChart) {
+    myChart.dispose();
+  }
+  myChart = echarts.init(chartDom);
+  let option;
+  option = {
+    title: {
+      // text: "World Population",
+    },
+    color: ["#38A0FF", "#4CCA73", "#FBD437"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#283b56",
+        },
+      },
+    },
+    legend: {
+      orient: "horizontal",
+      bottom: "2%",
+    },
+    grid: {
+      left: "10%",
+      right: "10%",
+      top: "10%",
+      bottom: "18%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        name: "库容",
+        nameLocation: "middle",
+        nameGap: 20,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "green",
+          },
+        },
+        axisTick: {
+          alignWithLabel: true,
+        },
+        data: [],
+      },
+      {
+        type: "category",
+        name: "面积(km²)",
+        nameLocation: "middle",
+        position: "top",
+        nameGap: 20,
+        axisLine: {
+          onZero: false,
+          show: true,
+          lineStyle: {
+            // color: "red",
+          },
+        },
+        data: [],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "水位(mm)",
+        position: "left",
+        nameLocation: "middle",
+        nameGap: 34,
+        axisLine: {
+          onZero: false,
+          show: true,
+        },
+        axisLabel: {
+          formatter: "{value}",
+        },
+      },
+      // {
+      //   type: "value",
+      //   name: "test1",
+      //   position: "right",
+      //   nameLocation: "middle",
+      //   axisLine: {
+      //     onZero: false,
+      //     show: true,
+      //     color: "red",
+      //   },
+      //   alignTicks: true,
+      //   axisLabel: {
+      //     formatter: "{value}?",
+      //   },
+      // },
+    ],
+
+    series: [
+      {
+        type: "line",
+        color: "#0000f7",
+        name: "库容",
+        data: [],
+      },
+      {
+        type: "line",
+        color: "#00f400",
+        name: "面积",
+        data: [],
+      },
+    ],
+  };
+
+  option && myChart.setOption(option);
+  window.addEventListener("resize", function () {
+    myChart.resize();
+  });
+}
+
+function handleChangeTab() {
+  typeApi[activeName.value] && typeApi[activeName.value](code);
+}
+
+watch(
+  () => props.resCode,
+  (val) => {
+    initData();
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  initData();
+});
+</script>
+<style scoped lang="scss">
+.baseInfo-page {
+  padding: 0 12px;
+
+  .chart-container {
+    width: 480px;
+    height: 480px;
+  }
+}
+</style>
diff --git a/src/views/Main/ProjectOperation/components/DataStatistics.vue b/src/views/Main/ProjectOperation/components/DataStatistics.vue
new file mode 100644
index 0000000..f49db0a
--- /dev/null
+++ b/src/views/Main/ProjectOperation/components/DataStatistics.vue
@@ -0,0 +1,411 @@
+<!-- 数据统计 -->
+<template>
+  <div class="data-statistics">
+    <div class="flex justify-between">
+      <div class="flex items-center">
+        <el-cascader
+          size="small"
+          v-model="cascaderArr"
+          :options="cascaderOptions"
+          :props="cascaderProps"
+          @change="handleChangeCascader"
+        ></el-cascader>
+        <el-date-picker
+          size="small"
+          class="ml-12"
+          v-model="dateArr"
+          type="daterange"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+        <el-button size="small" type="primary" class="!ml-12" @click="handleSearch">查询</el-button>
+      </div>
+
+      <el-radio-group size="small" v-model="showType" @change="handleChangeShowType">
+        <el-radio-button label="1">指标</el-radio-button>
+        <el-radio-button label="2">图表</el-radio-button>
+      </el-radio-group>
+    </div>
+    <div class="mt-24">
+      <!-- 指标 -->
+      <div v-if="showType === '1'">
+        <div class="attributes-box" v-for="(item, index) in attributesList" :key="index">
+          <div class="title">{{ item.group }}</div>
+          <div class="list-box">
+            <div class="list-item" v-for="(item2, index2) in item.items" :key="index2">
+              <div class="item-title">{{ item2.zhName }}({{ item2.unit }})</div>
+              <div class="item-value">
+                {{ item2.value == null ? "-" : item2.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="!attributesList || !attributesList.length" class="pt-30 text-center">-暂无指标数据-</div>
+      </div>
+      <!-- 图表 -->
+      <div v-else-if="showType === '2'" class="echarts-box">
+        <div class="echarts-dom-box">
+          <div class="title">水库基本情况</div>
+          <div ref="echartsRef1" class="echarts-dom"></div>
+        </div>
+        <div class="echarts-dom-box">
+          <div class="title">环境情况</div>
+          <div ref="echartsRef2" class="echarts-dom"></div>
+        </div>
+        <div class="echarts-dom-box">
+          <div class="title">应变应力情况</div>
+          <div ref="echartsRef3" class="echarts-dom"></div>
+        </div>
+        <div class="echarts-dom-box">
+          <div class="title">渗流压力情况</div>
+          <div ref="echartsRef4" class="echarts-dom"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import {
+  getReservoirCZListData,
+  getReservoirCDListData,
+  getReservoirMonitorIndexData,
+  getReservoirCZMonitorEchartsData,
+} from "@/api/reservoir";
+import * as echarts from "echarts";
+const props = defineProps({
+  resCode: {
+    type: String,
+    default: "",
+  },
+});
+const cascaderOptions = ref([]);
+const showType = ref("1");
+const cascaderArr = ref([]);
+const dataArr = ref([]);
+const cascaderProps = {
+  expandTrigger: "hover",
+  label: "stnm",
+  value: "stcd",
+  children: "children",
+  checkStrictly: true,
+  lazy: true,
+  lazyLoad(node, resolve) {
+    console.log("lazyLoad-node >>>>>  ", node);
+    if (node && node.data && node.data.prjcd) {
+      getReservoirCDListData({
+        stcd: node.data.prjcd,
+      }).then((res) => {
+        resolve(res.records);
+      });
+    } else {
+      resolve([]);
+    }
+  },
+};
+const attributesList = ref([]);
+let echart1 = null;
+let echart2 = null;
+let echart3 = null;
+let echart4 = null;
+const echartsRef1 = ref();
+const echartsRef2 = ref();
+const echartsRef3 = ref();
+const echartsRef4 = ref();
+
+function getData() {
+  switch (showType.value) {
+    case "1":
+      console.log("dataArr.value >> ", dataArr.value);
+      // 处理获取指标数据
+      getReservoirMonitorIndexData({
+        startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "",
+        endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "",
+        group: "SK",
+        resCode: props.resCode,
+        stcd: cascaderArr.value[0] || "",
+        mpcd: cascaderArr.value[1] || "",
+      }).then((res) => {
+        attributesList.value = res.data;
+      });
+      break;
+    case "2":
+      // 处理图表数据
+      getEchartsData();
+      break;
+  }
+}
+function initChart(data, chartInstance, echartRes) {
+  // 渲染echarts
+  if (!echartRes) {
+    return;
+  }
+
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+  let options = initLineOptions(data);
+  chartInstance = echarts.init(echartRes);
+  options && chartInstance.setOption(options);
+}
+// 折线图
+function initLineOptions(data: any) {
+  const { markLine, xaxis, yaxis } = data;
+  if (!xaxis || !yaxis || !yaxis.length) return {};
+  let yAxis = yaxis.map((v) => {
+    return {
+      type: "value",
+      name: `${v.name}(${v.unit})`,
+      nameLocation: "end",
+    };
+  });
+
+  let series = [];
+  yaxis.forEach((v, i) => {
+    if (v.series?.length) {
+      v.series.forEach((v2) => {
+        series.push({
+          type: "line",
+          smooth: true,
+          yAxisIndex: i,
+          name: v2.name,
+          data: v2.data,
+        });
+      });
+    }
+  });
+
+  if (markLine && markLine.length && series.length) {
+    let seriesItem = series.find((v) => v.yAxisIndex === 1) || series[0];
+    let colors = ["#f8afaf", "#bae4dd"];
+    let markLineData = markLine.map((v, i) => {
+      return {
+        name: v.name,
+        yAxis: v.value,
+        label: {
+          color: colors[i] || "red",
+        },
+        lineStyle: {
+          color: colors[i] || "red",
+        },
+      };
+    });
+    seriesItem.markLine = {
+      symbol: "none",
+      label: {
+        show: true,
+        position: "insideEndTop",
+        formatter: "{b}",
+      },
+      lineStyle: {
+        width: 2,
+        type: "solid",
+        color: colors[0] || "red",
+      },
+      data: markLineData,
+    };
+  }
+
+  return {
+    title: {
+      // text: "统计",
+    },
+    legend: {
+      orient: "horizontal",
+      top: "2%",
+    },
+    grid: {
+      left: "5%",
+      right: "10%",
+      bottom: "10%",
+      top: "20%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#283b56",
+        },
+      },
+    },
+    xAxis: [
+      {
+        type: "category",
+        name: "时间",
+        position: "bottom",
+        axisLine: {
+          onZero: false,
+          show: true,
+        },
+        axisTick: {
+          alignWithLabel: true,
+        },
+        data: xaxis,
+      },
+    ],
+    yAxis: yAxis,
+    series: series,
+  };
+}
+function getEchartsData() {
+  // 水库基本情况
+  getReservoirCZMonitorEchartsData({
+    startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "",
+    endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "",
+    resCode: props.resCode,
+    stcd: cascaderArr.value[0] || "",
+    mpcd: cascaderArr.value[1] || "",
+    elementType: "WATER_LEVEL",
+  }).then((res) => {
+    if (res.data) {
+      initChart(res.data, echart1, echartsRef1.value);
+    }
+  });
+  // 环境情况
+  getReservoirCZMonitorEchartsData({
+    startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "",
+    endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "",
+    resCode: props.resCode,
+    stcd: cascaderArr.value[0] || "",
+    elementType: "ENV",
+  }).then((res) => {
+    if (res.data) {
+      initChart(res.data, echart2, echartsRef2.value);
+    }
+  });
+  // 应变应力
+  getReservoirCZMonitorEchartsData({
+    startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "",
+    endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "",
+    resCode: props.resCode,
+    mpcd: cascaderArr.value[1] || "",
+    elementType: "C_STRESS",
+  }).then((res) => {
+    if (res.data) {
+      initChart(res.data, echart3, echartsRef3.value);
+    }
+  });
+  // 渗流压力情况-没数据
+  initChart([], echart4, echartsRef4.value);
+}
+function handleSearch() {
+  attributesList.value = [];
+  getData();
+}
+function handleChangeCascader() {}
+function handleChangeShowType() {
+  getData();
+}
+
+onMounted(() => {
+  getReservoirCZListData({
+    data: {
+      page: 1,
+      pageSize: 1000,
+      prjcd: props.resCode,
+    },
+  }).then((res) => {
+    cascaderOptions.value = res.records;
+  });
+  getData();
+});
+</script>
+<style scoped lang="scss">
+.data-statistics {
+  .attributes-box {
+    margin-bottom: 16px;
+    .title {
+      padding-left: 10px;
+      font-size: 14px;
+      font-weight: 500;
+      position: relative;
+      &::before {
+        content: " ";
+        width: 4px;
+        height: 4px;
+        background: #36b29e;
+        position: absolute;
+        left: 1px;
+        top: 50%;
+        margin-top: -2px;
+        transform: rotate(45deg);
+      }
+    }
+    .list-box {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 10px;
+
+      .list-item {
+        width: 236px;
+        height: 102px;
+        border: 1px solid #36b29e;
+        border-radius: 10px;
+        position: relative;
+        padding: 16px 24px;
+        margin-right: 16px;
+        margin-bottom: 12px;
+        background: linear-gradient(180deg, #eafffc 0%, rgba(222, 255, 250, 0) 100%), #ffffff;
+        overflow: hidden;
+        &::after {
+          position: absolute;
+          content: "";
+          background: url("../../../../assets/image/icon-attr-bg.png") no-repeat center center;
+          width: 64px;
+          height: 64px;
+          right: -12px;
+          bottom: -12px;
+        }
+        .item-title {
+          font-size: 14px;
+        }
+        .item-value {
+          margin-top: 12px;
+          font-size: 32px;
+          color: #36b29e;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .echarts-box {
+    display: flex;
+    flex-wrap: wrap;
+    .echarts-dom-box {
+      margin-bottom: 24px;
+      &:nth-child(2n) {
+        margin-left: 24px;
+      }
+      .title {
+        padding-left: 10px;
+        font-size: 14px;
+        font-weight: 500;
+        position: relative;
+        margin-bottom: 12px;
+        &::before {
+          content: " ";
+          width: 4px;
+          height: 4px;
+          background: #36b29e;
+          position: absolute;
+          left: 1px;
+          top: 50%;
+          margin-top: -2px;
+          transform: rotate(45deg);
+        }
+      }
+      .echarts-dom {
+        width: 478px;
+        height: 260px;
+        border: 1px solid #f0f0f0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Main/ProjectOperation/components/MonitorWarning.vue b/src/views/Main/ProjectOperation/components/MonitorWarning.vue
new file mode 100644
index 0000000..aa19472
--- /dev/null
+++ b/src/views/Main/ProjectOperation/components/MonitorWarning.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="monitor-warning">
+    <div class="flex justify-between mt-12">
+      <div class="flex items-center">
+        <el-select class="w-150" size="mini" v-model="dateRange" @change="handleChangeDate">
+          <el-option label="近1月" value="0"></el-option>
+          <el-option label="近1日" value="1"></el-option>
+          <el-option label="近7日" value="2"></el-option>
+          <el-option label="近3月" value="3"></el-option>
+          <el-option label="近1年" value="4"></el-option>
+        </el-select>
+        <span class="ml-10 mr-6">开始日期</span>
+        <el-date-picker
+          class="w-150"
+          size="mini"
+          type="date"
+          v-model="startDate"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        ></el-date-picker>
+        <span class="ml-10 mr-6">结束日期</span>
+        <el-date-picker
+          class="w-150"
+          size="mini"
+          type="date"
+          v-model="endDate"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        ></el-date-picker>
+      </div>
+
+      <div class="flex items-center">
+        <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
+        <el-button size="mini" @click="handleReset">重置</el-button>
+      </div>
+    </div>
+
+    <div class="mt-10">
+      <el-table :data="tableData" border>
+        <el-table-column label="测站名称">
+          <template slot-scope="scope">
+            <span>{{ scope.row.stnm }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="测站编码">
+          <template slot-scope="scope">
+            <span>{{ scope.row.stcd }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="测站类型">
+          <template slot-scope="scope">
+            <span>{{ scope.row.sttp }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预警类型">
+          <template slot-scope="scope">
+            <span>{{ scope.row.alarmType }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="监测数据">
+          <template slot-scope="scope">
+            <span>{{ scope.row.monitorData }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="监测时间">
+          <template slot-scope="scope">
+            <span>{{ scope.row.monitorTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预警值" width="100">
+          <template slot-scope="scope">
+            <span>{{ scope.row.alarmValue }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预警时间">
+          <template slot-scope="scope">
+            <span>{{ scope.row.alarmTime }}</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini">告警处置</el-button>
+            <el-button type="text" size="mini">解除本次预警</el-button>
+          </template>
+        </el-table-column> -->
+      </el-table>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import dayjs from "dayjs";
+import { getReservoirCZAlarmPageData } from "@/api/reservoir";
+
+const props = defineProps({
+  resCode: {
+    type: String,
+    default: "",
+  },
+});
+const dateRange: any = ref("0");
+const startDate: any = ref(dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"));
+const endDate: any = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));
+const tableData: any = ref([]);
+const paramsData: any = ref({
+  pageSize: 10,
+  pageNum: 1,
+  total: 0,
+});
+const emit = defineEmits(["node-click"]);
+watch(
+  () => props.resCode,
+  (val) => {
+    getTableData(val);
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  getTableData();
+});
+
+function getTableData() {
+  getReservoirCZAlarmPageData({
+    startDate: startDate.value,
+    endDate: endDate.value,
+    pageSize: paramsData.value.pageSize,
+    pageNum: paramsData.value.pageNum,
+  }).then((res) => {
+    console.log("res >>>>>  ", res);
+    tableData.value = res.records || [];
+    paramsData.value.total = res.total;
+  });
+}
+function handleChangeDate(value) {
+  switch (value) {
+    case "0":
+      startDate.value = dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss");
+      endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
+      break;
+    case "1":
+      startDate.value = dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss");
+      endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
+      break;
+    case "2":
+      startDate.value = dayjs().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss");
+      endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
+      break;
+    case "3":
+      startDate.value = dayjs().subtract(3, "month").format("YYYY-MM-DD HH:mm:ss");
+      endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
+      break;
+    case "4":
+      startDate.value = dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss");
+      endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
+      break;
+    default:
+      break;
+  }
+}
+function handleSearch() {
+  tableData.value = [];
+  getTableData();
+}
+function handleReset() {
+  dateRange.value = null;
+  startDate.value = null;
+  endDate.value = null;
+  paramsData.value.pageNum = 1;
+  tableData.value = [];
+  getTableData();
+}
+</script>
+<style scoped lang="scss">
+.monitor-warning {
+}
+</style>
diff --git a/src/views/Main/ProjectOperation/components/VideoAnalysis.vue b/src/views/Main/ProjectOperation/components/VideoAnalysis.vue
new file mode 100644
index 0000000..f57d984
--- /dev/null
+++ b/src/views/Main/ProjectOperation/components/VideoAnalysis.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="video-analysis">
+    <div class="videoSelect">
+      <el-select placeholder="请选择视频" v-model="activeVideo" size="mini" style="width: 240px" @change="videoChange">
+        <el-option v-for="item in videoList" :key="item" :label="item" :value="item" />
+      </el-select>
+    </div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="实时视频" name="realTime">
+        <div class="videoBox">
+          <video style="width: 100%; height: 100%" :src="videoUrl" v-if="videoUrl"></video>
+          <div v-else class="videoNull">
+            <div class="videoContent">
+              <img src="@/assets/image/videoNull.png" />
+              <span>暂无内容</span>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { getVideoDataList, getOperationPlay } from "@/api/reservoir";
+
+const props = defineProps({
+  resCode: {
+    type: String,
+    default: "",
+  },
+});
+const activeName = ref("realTime");
+const videoUrl = ref("");
+const activeVideo = ref("");
+const videoList = ref([]);
+onMounted(() => {
+  getVideoDataList({
+    pageNum: 1,
+    pageSize: 100,
+    resCode: props.resCode,
+  }).then((res) => {
+    if (res.data) {
+      videoList.value = res.data.cameraIds;
+    }
+  });
+});
+function videoChange(val) {
+  console.log("cameraId-watch >>>>>  ", val);
+  getOperationPlay({
+    cameraId: val,
+  }).then((res) => {
+    if (res.data) {
+      videoUrl.value = res.data.urlsMap.flvPlayUrl;
+    }
+  });
+}
+</script>
+<style scoped lang="scss">
+.video-analysis {
+  .videoBox {
+    height: 558px;
+    video {
+      width: 100%;
+      height: 100%;
+    }
+    .videoNull {
+      width: 100%;
+      height: 100%;
+      background: #383838;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .videoContent {
+        img {
+          width: 44px;
+          height: 35px;
+          margin-bottom: 8px;
+        }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: rgba(255, 255, 255, 0.55);
+      }
+    }
+  }
+  .videoSelect {
+    position: absolute;
+    z-index: 12;
+    right: 0;
+    top: 5px;
+  }
+}
+</style>
diff --git a/src/views/Main/ProjectOperation/index.vue b/src/views/Main/ProjectOperation/index.vue
new file mode 100644
index 0000000..6e362b8
--- /dev/null
+++ b/src/views/Main/ProjectOperation/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="project-detail-wrapper">
+    <div class="header">项目详情</div>
+    <div class="content">
+      <el-tabs :tab-position="'left'" v-model="activeTab">
+        <el-tab-pane label="基础信息" name="1" lazy>
+          <BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
+        </el-tab-pane>
+        <el-tab-pane label="数据统计" name="2" lazy>
+          <DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
+        </el-tab-pane>
+        <el-tab-pane label="监测预警" name="5" lazy>
+          <MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning>
+        </el-tab-pane>
+        <!-- <el-tab-pane label="视频分析" name="6" lazy>
+          <VideoAnalysis ref="videoAnalysis" :resCode="resCode"></VideoAnalysis>
+        </el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineOptions, defineEmits, defineProps, watch } from "vue";
+import BaseInfo from "./components/BaseInfo.vue";
+import DataStatistics from "./components/DataStatistics.vue";
+import MonitorWarning from "./components/MonitorWarning.vue";
+// import VideoAnalysis from "./components/VideoAnalysis.vue";
+const props = defineProps({
+  data: {
+    type: String,
+    default: "",
+  },
+});
+const resCode = ref("");
+defineOptions({
+  name: "ProjectDetail",
+});
+const emits = defineEmits(["getResInfo"]);
+const activeTab = ref("1");
+function handleGetResInfo(data: any) {
+  emits("getResInfo", data);
+}
+watch(
+  () => props.data,
+  (val) => {
+    if (val) {
+      debugger;
+      resCode.value = val.code;
+    }
+  },
+  { immediate: true },
+);
+</script>
+<style scoped lang="scss">
+.project-detail-wrapper {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 1000px;
+  min-height: 600px;
+  max-height: 800px;
+  transform: translate(-50%, -50%);
+  border-radius: 4px;
+  background: #fff;
+}
+</style>
diff --git a/src/views/Main/index.vue b/src/views/Main/index.vue
index 806e961..eab1d1c 100644
--- a/src/views/Main/index.vue
+++ b/src/views/Main/index.vue
@@ -24,6 +24,7 @@
   </RightPanel>
   <BottomPanel v-if="showBottomPanel"></BottomPanel>
   <Map></Map>
+  <ProjectOperation v-if="showWaterDialog" :data="waterData"></ProjectOperation>
 </template>
 
 <script setup lang="ts">
@@ -41,6 +42,7 @@ import LayerTree from "./Map/components/LayerTree.vue";
 import Map from "./Map/index.vue";
 import RegionSelect from "../RegionSelect/index.vue";
 import MapSearch from "./MapSearch/index.vue";
+import ProjectOperation from "./ProjectOperation/index.vue";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 defineOptions({
   name: "main",
@@ -49,6 +51,8 @@ const showLeftDrawer = ref(true);
 const showRightDrawer = ref(true);
 const showBottomPanel = ref(true);
 const showLayerTree = ref(false);
+const showWaterDialog = ref(false);
+const waterData = ref({});
 function layerTreeChange(val: boolean) {
   showLayerTree.value = val;
 }
@@ -72,6 +76,18 @@ onMounted(() => {
   window.$bus.$on("close-bottom-panel", () => {
     showBottomPanel.value = false;
   });
+  window.$bus.$on("open-water-dialog", (data: any) => {
+    window.$bus.$emit("close-left-panel");
+    window.$bus.$emit("close-right-panel");
+    showWaterDialog.value = true;
+    waterData.value = data;
+  });
+  window.$bus.$on("close-water-dialog", () => {
+    window.$bus.$emit("open-left-panel");
+    window.$bus.$emit("open-right-panel");
+    showWaterDialog.value = false;
+    waterData.value = {};
+  });
 });
 onBeforeUnmount(() => {
   window.$bus.$all_off();