基本情况面板

public/assets/icon/行政区划.svg

@@ -0,0 +1,6 @@
+<svg fill="red" t="1673677830289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="112679" width="32" height="32" style="transform: scale(1);">
+        <path d="M798.235936 511.99828c0 157.609784-127.772934 285.377557-285.374116 285.377557s-285.374116-127.767773-285.374117-285.377557c0-157.611504 127.772934-285.374116 285.374117-285.374117s285.374116 127.764333 285.374116 285.374117z" p-id="112680"></path>
+        <path d="M512.860099 511.99828m-220.653353 0a220.653353 220.653353 0 1 0 441.306706 0 220.653353 220.653353 0 1 0-441.306706 0Z" fill="#8DCDB5" p-id="112681"></path>
+        <path d="M512.860099 511.99828m-179.46491 0a179.464911 179.464911 0 1 0 358.929821 0 179.464911 179.464911 0 1 0-358.929821 0Z" fill="#69C0A3" p-id="112682"></path>
+        <path d="M512.860099 511.99828m-123.565327 0a123.565327 123.565327 0 1 0 247.130655 0 123.565327 123.565327 0 1 0-247.130655 0Z" p-id="112683"></path>
+      </svg>

src/models/map/index.js

@@ -177,18 +177,18 @@ const map = {
         Object.keys(DCPJ_TYPES).forEach(key => {
           layerVisible['Dcpj_' + key + 'Layer'] = false;
         });
-      } else if (id === 8) {
+      } else if (id === 9) {
         layerVisible = {
-          RealDrpLayer: true,
-          RealHDLayer: true,
+          RealDrpLayer: false,
+          RealHDLayer: false,
           RealSkLayer: false,
           PicStLayer: false,
           RivlLayer: true,
           YuwaiLayer: false,
           AdcdLayer: true,
           WataLayer: false,
-          RealSkLayerQ2: true,
-          RealHDLayerQ2: true,
+          RealSkLayerQ2: false,
+          RealHDLayerQ2: false,
         }
         Object.keys(DCPJ_TYPES).forEach(key => {
           layerVisible['Dcpj_' + key + 'Layer'] = false;

src/models/map/layout.js

@@ -24,6 +24,13 @@ export default function calcLayout(view, rightStack, hidePanels) {
         { key: '预警', style: { height: '40%', flexGrow: 1 } },
       ];
       leftFullHeight = true;
+    } else if (view === 9) {
+      left = [
+        { key: '天气' },
+        // { key: '综述' },
+        { key: '防汛基本情况左侧', style: { height: '30rem',flexGrow: 1 } },
+      ];
+      // leftFullHeight = true;
     } else if (view === 1) {
       left = [
         { key: '天气' },
@@ -245,6 +252,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
           // { key: '今日值班' },
         ];
         rightFullHeight = true;
+      }else if (view === 9) {
+        right = [
+          { key: '警报' },
+          { key: '防汛基本情况右侧', style: { height: '50rem',flexGrow: 1 } },
+        ];
+        rightFullHeight = true;
       } else if (view === 1) {
         right = [
           { key: '警报' },

src/models/runtime/index.js

@@ -57,6 +57,7 @@ function initState() {
       "aRz": -4.18
     },
     showGw:false,
+    jbqkKey:''
   }
 }
 
@@ -93,6 +94,9 @@ const runtime = {
     setShowGw(state, props) {
       return { ...state, showGw: props }
     },
+    setJbqkKey(state, props) {
+      return { ...state, jbqkKey: props }
+    },
     setLogoDisplaying(state, val) {
       return { ...state, logoDisplaying: val }
     },

src/views/Home/MapCtrl/mapstyle/base.js

@@ -10,6 +10,51 @@ export default {
       'fill-color': '#38467f',
     }
   },
+  zhenGround: {
+    'id': '镇范围',
+    'type': 'fill',
+    'source': '三河口镇范围',
+    'layout': {
+      'visibility':'none'
+    },
+    'paint': {
+      'fill-opacity': 0.9,
+      'fill-color': '#38467f',
+    }
+  },
+  浮桥河流域: {
+    'id': '浮桥河流域',
+    'type': 'fill',
+    'source': '浮桥河流域',
+    'layout': {
+      'visibility':'none'
+    },
+    'paint': {
+      'fill-opacity': 0.9,
+      'fill-color': '#38467f',
+    }
+  },
+  浮桥河: {
+    'id': '浮桥河',
+    'type': 'line',
+    'source': '浮桥河',
+    'layout': {
+      'line-join': 'round',
+      'visibility':'none'
+    },
+    'paint': {
+      'line-color': '#75fbfd',
+      'line-width': [
+        'case',
+        ['==', ['get', 'LEVEL'], 1], 2.2*4,
+        ['==', ['get', 'LEVEL'], 2], 2.2*4,
+        ['==', ['get', 'LEVEL'], 3], 2.2*4,
+        ['==', ['get', 'LEVEL'], 4], 1.6*4,
+        ['==', ['get', 'LEVEL'], 5], 1.3*4,
+        1*4
+      ]
+    }
+  },
   heatmap: {
     'id': '热力图',
     'type': 'raster',

src/views/Home/MapCtrl/mapstyle/layermgr.js

@@ -139,6 +139,8 @@ class LayerMgr {
       terrain: this.layerMap.TerrainLayer.getTerrain(),
       layers: [
         base.background,
+        base.zhenGround,
+        base.浮桥河流域,
         base.heatmap,
         base.gwmap,
         base.gqmap,
@@ -148,7 +150,7 @@ class LayerMgr {
         this.layerMap.RivlLayer.getStyle('water'),
         this.layerMap.RivlLayer.getStyle('rivl'),
         sources.绿色区域 && base.plantZone,
-
+        base.浮桥河,
         base.xzj.shape, base.xj.shape,
 
         this.layerMap.RoadLayer.getStyle('铁路case'),

src/views/Home/MapCtrl/mapstyle/sources.js

@@ -60,6 +60,23 @@ const sources = {
     'minzoom': 1,
     'maxzoom': 18,
   },
+  //镇范围
+  "三河口镇范围": {
+    "data": `${hash}/mapbox/geojson/三河口镇范围.geojson`,
+    "type": "geojson"
+  },
+
+  //浮桥河流域
+  "浮桥河流域": {
+    "data": `${hash}/mapbox/geojson/浮桥河流域.geojson`,
+    "type": "geojson"
+  },
+  //浮桥河
+  "浮桥河": {
+    "data": `${hash}/mapbox/geojson/浮桥河.geojson`,
+    "type": "geojson"
+  },
+
   //热力图
   "heatmapImg": {
     'type': 'image',

src/views/Home/PanelIndex.js

@@ -115,7 +115,7 @@ import Hsfy from './panels/Hsfy'
 import Cxsk from './panels/Cxsk'
 import Zdtj from './panels/Zdtj'
 import Jcgjz from './panels/Jcgjz'
-
+import JbqkLeft from './panels/JbqkLeft'
 
 
 import Skyb from './panels/Skyb'
@@ -137,6 +137,7 @@ import Sczl from './panels/Sczl'
 import Sbtj from './panels/Sbtj'
 import Sbyj from './panels/Sbyj'
 import Gsfhqx from './panels/Gsfhqx'
+import JbqkRight from './panels/JbqkRight'
 
 export default function PanelIndex({ name, style, ...params }) {
   if (name === '天气') {
@@ -406,6 +407,10 @@ export default function PanelIndex({ name, style, ...params }) {
     return <Zdtj style={style} />
   } else if (name === '监测告警总') {
     return <Jcgjz style={style} />
+  } else if (name === '防汛基本情况左侧') {
+    return <JbqkLeft style={style} />
+  } else if (name === '防汛基本情况右侧') {
+    return <JbqkRight style={style} />
   } 
   return (
     <PanelBox style={style} title={name} color="red">

src/views/Home/components/ActionDock/index.js

@@ -9,7 +9,8 @@ const VIEWS = [
   {
     id: 100, title: '防汛', img: '/assets/menu/防洪形势.png', children: [
       // { id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
-      { id: 8, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
+      // { id: 8, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
+      { id: 9, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
       { id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
       { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
       { id: 5, title: '预报', img: '/assets/menu/降雨中心.png' },

src/views/Home/panels/JbqkLeft/chart.js

@@ -0,0 +1,139 @@
+import React, { useMemo } from 'react';
+import echarts from 'echarts/lib/echarts';
+import ReactEcharts from 'echarts-for-react';
+
+
+const pallete = [
+  ['#177ab3', '#51c3e7'],
+  ['#9976dc', '#c792ee'],
+  ['#94a1eb', '#a7caf8'],
+  ['#7ae5c3', '#c9f4ea'],
+  ['#c7dca5', '#f5fcd5'],
+  ['#7988d9', '#9dc6f1'],
+  ['#d9ed8f', '#d3f89b'],
+];
+
+const palleteLen = pallete.length;
+
+const data = [
+  [
+      "2025-06-02 15:00:00",
+      134.05
+  ],
+  [
+      "2025-06-02 16:00:00",
+      134.04
+  ],
+  [
+      "2025-06-02 17:00:00",
+      134.03
+  ],
+  [
+      "2025-06-02 18:00:00",
+      134.03
+  ],
+  [
+      "2025-06-02 19:00:00",
+      134.02
+  ],
+  [
+      "2025-06-02 20:00:00",
+      134.02
+  ],
+  [
+      "2025-06-02 21:00:00",
+      134.02
+  ],
+  [
+      "2025-06-03 01:00:00",
+      134
+  ],
+  [
+      "2025-06-03 02:00:00",
+      133.99
+  ],
+  [
+      "2025-06-03 04:00:00",
+      133.99
+  ],
+  [
+      "2025-06-03 06:00:00",
+      133.97
+  ],
+  [
+      "2025-06-03 08:00:00",
+      133.97
+  ],
+  [
+      "2025-06-03 10:00:00",
+      133.97
+  ],
+  [
+      "2025-06-03 12:00:00",
+      133.98
+  ],
+  [
+      "2025-06-03 13:00:00",
+      133.97
+  ],
+  [
+      "2025-06-03 14:00:00",
+      133.97
+  ]
+]
+ 
+
+
+
+const AreaDrpChart = () => {
+
+  const color= [
+    '#6187e6',
+    '#77caa1',
+    '#5c6988',
+    '#e2b642',
+  ]
+
+  var option = {
+    color: color,
+    title : {
+      x:'center'
+    },
+    tooltip : {
+        trigger: 'item',
+        formatter: "{a} <br/>{b} : {c} ({d}%)"
+    },
+    // legend: {
+    //     orient : 'vertical',
+    //     x : 'left',
+    //     data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+    // },
+    toolbox: {
+        show : false,
+    },
+    calculable : true,
+    series : [
+        {
+            name:'访问来源',
+            type:'pie',
+            radius : '65%',
+            center: ['50%', '60%'],
+            data:[
+                {value:3, name:'大型水库'},
+                {value:7, name:'中型水库'},
+                {value:44, name:'小(1)型水库'},
+                {value:271, name:'小(2)型水库'},
+            ]
+        }
+    ]
+  };
+
+  return (
+    <ReactEcharts
+      option={option}
+      style={{ height: '99%', width: '100%' }}
+    />
+  )
+}
+
+export default React.memo(AreaDrpChart);

src/views/Home/panels/JbqkLeft/collapsePage.js

@@ -0,0 +1,19 @@
+
+function Page({ type,name,skType,setSkType,icon }) {
+
+    return ( 
+        <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'1px',cursor:'pointer'}} onClick={()=>{
+            setSkType(skType!==type?type:'')
+        }}>
+            <div style={{width:'0.3rem',height:'1rem',background:'#007afd'}}></div>
+            {/* <img src={`${process.env.PUBLIC_URL}/assets/icon/${icon}`} width={15} height={15} alt=""/> */}
+            <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{name}</div>
+            {/* <div style={{marginBottom:'-0.1rem'}}>{num1}座</div> */}
+            {/* <div style={{margin:'0 1rem -0.1rem 1rem'}}>{num2}亿m³</div> */}
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/${skType===type?'收起':'展开'}.png`} style={{cursor:'pointer'}} width={20} alt="" />
+        </div>
+      )
+  } 
+   
+  export default Page;
+  

src/views/Home/panels/JbqkLeft/countPage.js

@@ -0,0 +1,32 @@
+
+function Page({ style }) {
+
+  return ( 
+      <div style={{width:'100%',display:'flex'}}>
+        <div style={{width:'100%',display:'flex',alignItems:'flex-start',padding:'0.5rem 0',justifyContent:'space-around'}}>
+          <div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={20} alt=""/>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>大型水库</div>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
+          </div>
+          <div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={20} alt=""/>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>中型水库</div>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
+          </div>
+          <div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={20} alt=""/>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(1)型水库</div>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
+          </div>
+          <div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={20} alt=""/>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(2)型水库</div>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
+          </div>
+        </div>
+      </div>
+    )
+} 
+ 
+export default Page;

src/views/Home/panels/JbqkLeft/index.js

@@ -0,0 +1,211 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Switch, Collapse,Table, TableContainer, TableBody,TableHead, TableRow, TableSortLabel } from '@material-ui/core/index'
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import PanelBox from '../../components/PanelBox';
+import { parseGeoJSON } from "../../../../utils/tools";
+import { SkRealPromise } from "../../../../models/_/real";
+import { useDispatch, useSelector } from 'react-redux';
+import CountPage from './countPage'
+import CollapsePage from './collapsePage'
+
+
+
+function DrpReal({ style }) {
+  const [skData,setSkData] = useState([])
+  const [skType,setSkType] = useState('')
+  const [sort,setSort] = useState(true)
+  const jbqkKey = useSelector(s=>s.runtime.jbqkKey)
+  const dispatch = useDispatch();
+  const tableData = useMemo(()=>{
+    if(skType==='1'){
+      return (skData.filter(o=>o.w>10000)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w))
+    }
+    if(skType==='2'){
+      return (skData.filter(o=>o.w>100 && o.w<=10000)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w))
+    }
+    if(skType==='3'){
+      return (skData.filter(o=>o.w>0.375 && o.w<=100)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w))
+    }
+    if(skType==='4'){
+      return (skData.filter(o=>o.w>=0 && o.w<=0.375)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w))
+    }
+    return []
+  },[skData,skType,sort])
+
+  const skTypeObj = [
+    {type:'1',name:'大型水库',num1:3,num2:7.9316},//8.735
+    {type:'2',name:'中型水库',num1:7,num2:1.627},
+    {type:'3',name:'小(1)型水库',num1:43,num2:1.627},
+    {type:'4',name:'小(2)型水库',num1:207,num2:8.735},
+  ]
+
+  useEffect(()=>{
+    getSkData()
+
+    // return ()=>{
+    //   const map = window.__mapref;
+    //   const layer = map.getLayer('临时水库tz')
+    //   if(layer){
+    //       map.removeLayer('临时水库tz');
+    //       map.removeSource('临时水库tz');
+    //   }
+    // }
+  },[])
+
+  const getSkData = async()=>{
+    const data = await SkRealPromise.get();
+    setSkData(data)
+  }
+
+  const flyTo = (row)=>{
+    const { lgtd, lttd } = row;
+    if (lgtd && lttd) {
+    // dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: row, coordinates: [row.lgtd, row.lttd] });
+    dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd+0.005],
+        zoom: 15,
+        pitch: 50,
+        bearing: 0
+    });
+    }
+  }
+
+  const setSkLayer = (data=[])=>{
+    const map = window.__mapref;
+    const layer = map.getLayer('临时水库tz')
+    if(layer){
+      map.removeLayer('临时水库tz');
+      map.removeSource('临时水库tz');
+    }
+    if(data.length===0){return}
+    map.addLayer({
+        'id': '临时水库tz',//+new Date().getTime(),
+        'type': 'symbol',
+        'source': {
+            'type': 'geojson',
+            'data': {
+                'type': 'FeatureCollection',
+                'features': [],
+            },
+        },
+        'layout': {
+            // 'icon-allow-overlap': true,
+            // 'text-allow-overlap': true,
+            'icon-image': '水库', // 从properties中动态读取icon字段
+            'icon-size': [
+                'interpolate', ['linear'], ['zoom'],
+                10, 0.8,
+                14, 0.8,
+              ],
+            'text-size': [
+            'interpolate', ['linear'], ['zoom'],
+            5, 10,
+            14, 14,
+            ],
+            'text-font': ['Roboto Black'],
+            'text-field': [
+            'step',
+            ['zoom'],
+            '', 
+            8, ['get', 'stnm']
+            ],
+            'text-anchor': 'top',
+            'text-offset': [0, 1],
+          },
+        'paint': {
+            'text-color': '#fff'
+        },
+        'visibility': 'visible',
+    });
+    map.getSource('临时水库tz').setData(parseGeoJSON(data))
+  }
+
+  return ( 
+    <PanelBox
+      style={style}
+      title="基本情况"
+      color="green"
+    >
+      <div style={{marginBottom:'0.2rem'}}></div>
+      <CollapsePage type={'1'} name={'社会经济'} skType={skType} setSkType={setSkType} icon={'社会经济.png'}/>
+      <Collapse in={skType==='1'}  timeout="auto" unmountOnExit>
+        <div style={{color:jbqkKey==='1'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',display:'flex',justifyContent:'flex-start',alignItems:'center' ,padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('1')}>
+          <img src={`${process.env.PUBLIC_URL}/assets/icon/社会经济.png`} width={15} height={15} alt="" style={{marginRight:'0.5rem'}}/>
+          行政区划
+        </div>
+      </Collapse>
+
+      <CollapsePage type={'2'} name={'河流水系'} skType={skType} setSkType={setSkType} icon={'河流水系.png'}/>
+      <Collapse in={skType==='2'}  timeout="auto" unmountOnExit>
+        <div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='2'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('2')}>
+          <img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt="" style={{marginRight:'0.5rem'}}/>
+          {'>500平方公里'}
+        </div>
+        <div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='3'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>{}}>
+          <img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt="" style={{marginRight:'0.5rem'}}/>
+          {'50-500平方公里'}
+        </div>
+        <div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='4'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>{}}>
+          <img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt="" style={{marginRight:'0.5rem'}}/>
+          {'<50平方公里'}
+        </div>
+      </Collapse>
+
+      <CollapsePage type={'5'} name={'水利工程'} skType={skType} setSkType={setSkType} icon={'水利工程.png'}/>
+      <Collapse in={skType==='5'}  timeout="auto" unmountOnExit>
+        <div style={{color:jbqkKey==='5'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 3rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('5')}>水库</div>
+      </Collapse>
+
+      {/* {
+        skTypeObj.map((item)=>
+          (<>
+            <CollapsePage type={item.type} name={item.name} num1={item.num1} num2={item.num2} skType={skType} setSkType={setSkType}/>
+            <Collapse in={skType===item.type}  timeout="auto" unmountOnExit>
+              <TableContainer style={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
+                <Table size="small" stickyHeader>
+                  <TableHead>
+                    <TableRow>
+                        <DpTableCell style={{ minWidth: '1rem' }} align="left">序号</DpTableCell>
+                        <DpTableCell style={{ minWidth: '5rem' }} align="center">水库名称</DpTableCell>
+                        <DpTableCell style={{ minWidth: '8rem' }} align="center">类型</DpTableCell>
+                        <DpTableCell style={{ minWidth: '8rem' }} align="center">
+                          <TableSortLabel
+                            onClick={() => setSort(!sort)}
+                            active={true}
+                            direction={sort?'desc':'asc'}>
+                            {'库容(万m³)'}
+                          </TableSortLabel>
+                        </DpTableCell>
+                    </TableRow>
+                  </TableHead>
+                  {
+                    tableData.map((tableRow,index)=>
+                    <TableBody>
+                      <DpTableRow key={tableRow.stcd}>
+                        <DpTableCell align="center" >{index+1}</DpTableCell>
+                        <DpTableCell align="center" >
+                        <div className="table-ellipsis cursor-pointer" onClick={()=>{
+                          flyTo(tableRow)
+                          setSkLayer([tableRow])
+                        }}>
+                          {tableRow.stnm}
+                        </div>
+                        </DpTableCell>
+                        <DpTableCell align="center" >{item.name}</DpTableCell>
+                        <DpTableCell align="center" >{tableRow.w}</DpTableCell>
+                      </DpTableRow>
+                    </TableBody>
+                    )
+                  }
+                </Table>
+              </TableContainer>
+            </Collapse>
+          </>)
+        )
+      } */}
+    </PanelBox>
+  )
+} 
+ 
+export default DrpReal;

src/views/Home/panels/JbqkRight/collapsePage.js

@@ -0,0 +1,24 @@
+
+function Page({ type,name,num1,num2,skType,setSkType, setZhen }) {
+    return ( 
+        <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px',cursor:type==='421181110000000'?'pointer':'auto'}} onClick={()=>{
+            if(type==='421181110000000'){
+                setZhen()
+            }
+        }}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/行政区划.svg`} width={20} height={20} alt=""/>
+            {/* <div style={{width:'10px',height:'10px',borderRadius:'10px',background:'#8b4513',border:'2px solid #000000'}}></div> */}
+            <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{name}</div>
+            <div style={{marginBottom:'-0.1rem'}}>{num1}平方千米</div>
+            <div style={{margin:'0 1rem -0.1rem 1rem'}}>{num2}人</div>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/${skType===type?'收起':'展开'}.png`} style={{cursor:'pointer'}} width={20} alt="" onClick={()=>{
+                if(type==='421181110000000'){
+                    setSkType(skType!==type?type:'')
+                }
+            }}/>
+        </div>
+      )
+  } 
+   
+  export default Page;
+  

src/views/Home/panels/JbqkRight/countPage.js

@@ -0,0 +1,32 @@
+
+function Page({ style }) {
+
+  return ( 
+      <div style={{width:'100%',display:'flex'}}>
+        <div style={{width:'100%',display:'flex',alignItems:'flex-start',padding:'0.5rem 0',justifyContent:'space-around'}}>
+          <div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b',paddingBottom:'0.2rem'}}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.png`} width={20} alt=""/>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>大型水库</div>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
+          </div>
+          <div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b',paddingBottom:'0.2rem'}}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={20} alt=""/>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>中型水库</div>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>7</span> 座</div>
+          </div>
+          <div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b',paddingBottom:'0.2rem'}}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/小1.png`} width={20} alt=""/>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(1)型水库</div>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>44</span> 座</div>
+          </div>
+          <div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b',paddingBottom:'0.2rem'}}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/小1.png`} width={20} alt=""/>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(2)型水库</div>
+            <div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>207</span> 座</div>
+          </div>
+        </div>
+      </div>
+    )
+} 
+ 
+export default Page;

src/views/Home/panels/JbqkRight/index.js

@@ -0,0 +1,30 @@
+import React, { useMemo, useState } from 'react';
+import PanelBox from '../../components/PanelBox';
+import Page1 from './page1'
+import Page2 from './page2'
+import Page3 from './page3'
+import { useSelector } from 'react-redux';
+
+
+
+function Page({ style }) {
+  const jbqkKey = useSelector(s=>s.runtime.jbqkKey)
+
+
+  return (
+    <PanelBox
+      style={style}
+      title="统计"
+      color="green"
+    >
+      <div style={{width:'100%',height:'0.5rem'}}></div>
+      { jbqkKey==='1'?<Page1/>:null }
+      { jbqkKey==='2'?<Page2 jbqkKey={jbqkKey}/>:null }
+      { jbqkKey==='5'?<Page3 jbqkKey={jbqkKey}/>:null }
+      
+
+    </PanelBox>
+  )
+}
+
+export default Page;

src/views/Home/panels/JbqkRight/page3.js

@@ -0,0 +1,163 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Switch, Collapse,Table, TableContainer, TableBody,TableHead, TableRow, TableSortLabel } from '@material-ui/core/index'
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { parseGeoJSON } from "../../../../utils/tools";
+import { SkRealPromise } from "../../../../models/_/real";
+import CollapsePage from './collapsePage'
+import { useDispatch } from 'react-redux';
+import CountPage from './countPage'
+
+
+function Page({jbqkKey}) {
+    const [skType,setSkType] = useState('')
+    const [skData,setSkData] = useState([])
+    const dispatch = useDispatch()
+    
+
+    
+
+    const flyTo = (row)=>{
+        const { lgtd, lttd } = row;
+        if (lgtd && lttd) {
+        // dispatch.runtime.setFeaturePop({ type: 'adcd', properties: row, coordinates: [row.lgtd, row.lttd] });
+        dispatch.runtime.setCameraTarget({
+            center: [lgtd, lttd],//+0.003
+            zoom: 15,
+            pitch: 50,
+            bearing: 0
+        }); 
+        } 
+    }
+ 
+    useEffect(()=>{
+        getSkData()
+        return ()=>{
+          const map = window.__mapref;
+          const layer = map.getLayer('临时水库')
+          if(layer){
+              map.removeLayer('临时水库');
+              map.removeSource('临时水库');
+          }
+        }
+    },[])
+
+    const getSkData = async()=>{
+        const data = await SkRealPromise.get();
+        setSkData(data)
+    }
+    
+
+    const setSkLayer = (data=[])=>{
+      const map = window.__mapref;
+      const layer = map.getLayer('临时水库')
+      if(layer){
+        map.removeLayer('临时水库');
+        map.removeSource('临时水库');
+      }
+      if(data.length===0){return}
+      map.addLayer({
+          'id': '临时水库',//+new Date().getTime(),
+          'type': 'symbol',
+          'source': {
+              'type': 'geojson',
+              'data': {
+                  'type': 'FeatureCollection',
+                  'features': [],
+              },
+          },
+          'layout': {
+              // 'icon-allow-overlap': true,
+              // 'text-allow-overlap': true,
+              'icon-image': '水库', // 从properties中动态读取icon字段
+              'icon-size': [
+                  'interpolate', ['linear'], ['zoom'],
+                  10, 0.8,
+                  14, 0.8,
+                ],
+              'text-size': [
+              'interpolate', ['linear'], ['zoom'],
+              5, 10,
+              14, 14,
+              ],
+              'text-font': ['Roboto Black'],
+              'text-field': [
+              'step',
+              ['zoom'],
+              '', 
+              8, ['get', 'stnm']
+              ],
+              'text-anchor': 'top',
+              'text-offset': [0, 1],
+            },
+          'paint': {
+              'text-color': '#fff'
+          },
+          'visibility': 'visible',
+      });
+      map.getSource('临时水库').setData(parseGeoJSON(data))
+    }
+
+
+    return (
+        <>
+            <CountPage/>
+            <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px'}}>
+                <img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={18} height={18} alt=""/>
+                {/* <div style={{width:'10px',height:'10px',borderRadius:'10px',background:'#8b4513',border:'2px solid #000000'}}></div> */}
+                <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{'水库总数'}</div>
+                <div style={{margin:'0 1rem -0.1rem 1rem'}}>{300}座</div>
+                <img src={`${process.env.PUBLIC_URL}/assets/icon/${skType===1?'收起':'展开'}.png`} style={{cursor:'pointer'}} width={20} alt="" onClick={()=>{
+                    setSkType(skType!==1?1:'')
+                }}/>
+            </div>
+            <Collapse in={skType===1}  timeout="auto" unmountOnExit>
+              <TableContainer style={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
+                <Table size="small" stickyHeader>
+                  <TableHead>
+                    <TableRow>
+                        <DpTableCell style={{ minWidth: '1rem' }} align="left">序号</DpTableCell>
+                        <DpTableCell style={{ minWidth: '5rem' }} align="center">水库名称</DpTableCell>
+                        <DpTableCell style={{ minWidth: '8rem' }} align="center">类型</DpTableCell>
+                        <DpTableCell style={{ minWidth: '8rem' }} align="center">类型</DpTableCell>
+                    </TableRow>
+                  </TableHead>
+                  {
+                    skData.map((tableRow,index)=>
+                    <TableBody>
+                      <DpTableRow key={tableRow.stcd}>
+                        <DpTableCell align="center" >{index+1}</DpTableCell>
+                        <DpTableCell align="center" >
+                        <div className="table-ellipsis cursor-pointer" onClick={()=>{
+                          flyTo(tableRow)
+                          setSkLayer([tableRow])
+                        }}>
+                          {tableRow.stnm}
+                        </div>
+                        </DpTableCell>
+                        <DpTableCell align="center" >{tableRow.name}</DpTableCell>
+                        <DpTableCell align="center" >{tableRow.w}</DpTableCell>
+                      </DpTableRow>
+                    </TableBody>
+                    )
+                  }
+                </Table>
+              </TableContainer>
+            </Collapse>
+            <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px'}}>
+                <img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={18} height={18} alt=""/>
+                {/* <div style={{width:'10px',height:'10px',borderRadius:'10px',background:'#8b4513',border:'2px solid #000000'}}></div> */}
+                <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{'总库容'}</div>
+                <div style={{margin:'0 1rem -0.1rem 1rem'}}>{23275.4}万m³</div>
+            </div>
+            <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px'}}>
+                <img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={18} height={18} alt=""/>
+                {/* <div style={{width:'10px',height:'10px',borderRadius:'10px',background:'#8b4513',border:'2px solid #000000'}}></div> */}
+                <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{'浮桥河水库'}</div>
+                <div style={{margin:'0 1rem -0.1rem 1rem'}}>县内最大水库</div>
+            </div>
+        </>
+    )
+}
+
+export default Page;