修改坐标位置

t # Please enter a commit message to explain why this merge is necessary,

public/data3/hdReal.json

@@ -210,8 +210,8 @@
         "adcd": null,
         "wscd": null,
         "importancy": 0,
-        "lgtd": 114.883583,
-        "lttd": 31.180444,
+        "lgtd": 114.8862,
+        "lttd": 31.1655,
         "elev": null,
         "hasRz": true,
         "type": "sw",

public/mapbox/sprite.json

@@ -46,6 +46,14 @@
     "y": 0,
     "pixelRatio": 1,
     "visible": true
+  },
+    "实时雨量1": {
+    "width": 32,
+    "height": 32,
+    "x": 220,
+    "y": 190,
+    "pixelRatio": 1,
+    "visible": true
   },
   "水库": {
     "width": 32,
@@ -54,6 +62,22 @@
     "y": 0,
     "pixelRatio": 1,
     "visible": true
+  },
+    "水库1": {
+    "width": 32,
+    "height": 32,
+    "x": 32,
+    "y": 0,
+    "pixelRatio": 1,
+    "visible": true
+  },
+   "巡查": {
+    "width": 32,
+    "height": 32,
+    "x": 128,
+    "y": 32,
+    "pixelRatio": 1,
+    "visible": true
   },
   "水库-离线": {
     "width": 32,
@@ -247,6 +271,14 @@
     "pixelRatio": 1,
     "visible": true
   },
+  "流量站": {
+    "width": 32,
+    "height": 32,
+    "x": 160,
+    "y": 32,
+    "pixelRatio": 1,
+    "visible": true
+  },
   "泵站": {
     "width": 32,
     "height": 32,
@@ -286,5 +318,117 @@
     "y": 256,
     "pixelRatio": 1,
     "visible": true
+  },
+  "变形监测": {
+    "width": 26,
+    "height": 26,
+    "x": 0,
+    "y": 288,
+    "pixelRatio": 0.8,
+    "visible": true
+  },
+  "渗压监测": {
+    "width": 26,
+    "height": 26,
+    "x": 28,
+    "y": 290,
+    "pixelRatio": 0.6,
+    "visible": true
+  },
+  "渗流监测": {
+    "width": 22,
+    "height": 22,
+    "x": 52,
+    "y": 290,
+    "pixelRatio": 0.5,
+    "visible": true
+  },
+  "白蚁监测": {
+    "width": 20,
+    "height": 30,
+    "x": 74,
+    "y": 286,
+    "pixelRatio": 0.5,
+    "visible": true
+  },
+  "水闸2": {
+    "width": 24,
+    "height": 32,
+    "x": 94,
+    "y": 290,
+    "pixelRatio": 0.5,
+    "visible": true
+  },
+  "泵站2": {
+    "width": 15,
+    "height": 32,
+    "x": 118,
+    "y": 290,
+    "pixelRatio": 0.5,
+    "visible": true
+  },
+  "水表": {
+    "width": 20,
+    "height": 32,
+    "x": 133,
+    "y": 290,
+    "pixelRatio": 0.5,
+    "visible": true
+  },
+  "渠道": {
+    "width": 14,
+    "height": 32,
+    "x": 153,
+    "y": 290,
+    "pixelRatio": 0.6,
+    "visible": true
+  },
+  "水质": {
+    "width": 16,
+    "height": 32,
+    "x": 167,
+    "y": 290,
+    "pixelRatio": 0.5,
+    "visible": true
+  },
+  "土壤墒情": {
+    "width": 24,
+    "height": 32,
+    "x": 183,
+    "y": 290,
+    "pixelRatio": 0.5,
+    "visible": true
+  },
+  "水厂": {
+    "width": 32,
+    "height": 32,
+    "x": -3,
+    "y": 315,
+    "pixelRatio": 0.6,
+    "visible": true
+  }, 
+  "水厂q": {
+    "width": 32,
+    "height": 32,
+    "x": 28,
+    "y": 315,
+    "pixelRatio": 0.6,
+    "visible": true
+  },
+  "水源地": {
+    "width": 32,
+    "height": 32,
+    "x": 256,
+    "y": 0,
+    "pixelRatio": 0.6,
+    "visible": true
+  } , 
+   "水源地q": {
+    "width": 32,
+    "height": 32,
+    "x": 59,
+    "y": 315,
+    "pixelRatio": 0.6,
+    "visible": true
   }
 }

src/config.js

@@ -9,6 +9,8 @@ const isShYjDebug = false;
 const config = {
   address,
   title: '麻城市智慧水利一张图',
+  title2: '麻城市防汛一张图',
+  title3: '麻城市水库一张图',
   ADCD,
   ADCD6,
   ADCD12,

src/models/map/index.js

@@ -188,6 +188,7 @@ const map = {
           WataLayer: false,
           RealSkLayerQ2: false,
           RealHDLayerQ2: false,
+          RealSkLayerQ3: true,
         }
         Object.keys(DCPJ_TYPES).forEach(key => {
           layerVisible['Dcpj_' + key + 'Layer'] = false;
@@ -333,6 +334,7 @@ const map = {
           RealDrpLayer: false,
           RealHDLayer: false,
           RealSkLayer: false,
+          RealSkLayerQ2: true,
           BxSkLayer: false,
           FzdxLayer: false,
           WataLayer: false,
@@ -411,10 +413,12 @@ const map = {
           AdcdLayer: true,
           RoadLayer: true,
           RivlLayer: true,
+          RealSkLayerQ3: true,
         };
         Object.keys(DCPJ_TYPES).forEach(key => {
           layerVisible['Dcpj_' + key + 'Layer'] = false;
         });
+        dispatch.runtime.setHome(); 
       } else if (id === 301) {
         layerVisible = {
           RealDrpLayer: false,

src/models/map/layout.js

@@ -232,7 +232,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
     } else {
       if (view === 0) {
         right = [
-          { key: '警报' },
+          // { key: '警报' },
           { key: '防汛基本情况右侧', style: { height: '50rem',flexGrow: 1 } },
         ];
         rightFullHeight = true;

src/views/Home/InfoDlg/SyjcDlg/view.js

@@ -29,7 +29,8 @@ function HDStDlg({ record, onClose,open }) {
           <DpCloseButton onClick={onClose} />
         </DpAppBar>
         <div style={{padding:0}}>
-        <img src={`${process.env.PUBLIC_URL}/assets/jrx.png`} style={{width:'100%'}}></img>
+        {/* <img src={`${process.env.PUBLIC_URL}/assets/jrx.png`} style={{width:'100%'}}></img> */}
+        <img src={`${process.env.PUBLIC_URL}/assets/浸润线修改2.png`} style={{width:'100%'}}></img>
        </div>
       </DialogContent>
       <div className="boxfoot"></div>

src/views/Home/InfoDlg/WyWarnDlg/index.js

@@ -60,7 +60,7 @@ function HDStDlg({ record, onClose }) {
                   <DpTableCell align="center">GN1</DpTableCell>
                   <DpTableCell align="center">红色</DpTableCell>
                   <DpTableCell align="center">-120mm</DpTableCell>
-                  <DpTableCell align="center">100mm</DpTableCell>
+                  <DpTableCell align="center">±100mm</DpTableCell>
                   <DpTableCell align="center"></DpTableCell>
                   
                 </DpTableRow>

src/views/Home/InfoDlg/index.js

@@ -48,6 +48,7 @@ import ShuichangguanwangDlg from './ShuichangguanwangDlg';
 import FlowjcDlg from './FlowjcDlg'
 import EditFaDlg from './EditFaDlg'
 import AllSkDlg from './AllSkDlg'
+import SpjkDlg from './spjkDlg'
 function InfoDlg() {
   const infoDlg = useSelector(getInfoDlg);
   const dispatch = useDispatch();
@@ -155,6 +156,8 @@ function InfoDlg() {
     return <EditFaDlg record={properties} onClose={handleClose} />
   }else if (layerId === 'allSkFaLayer') {
     return <AllSkDlg record={properties} onClose={handleClose} />
+  }else if (layerId === 'spjkFaLayer') {
+    return <SpjkDlg record={properties} onClose={handleClose} />
   }
   
 

src/views/Home/InfoDlg/spjkDlg/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import DpTab from '../../../../layouts/mui/DpTab';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import DpTabs from '../../../../layouts/mui/DpTabs';
+import DpAppBar from '../../../../layouts/mui/DpAppBar';
+import { useDispatch, useSelector } from 'react-redux';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
+import SkPicReal from '../../../Mgr/xqjs/SkPicReal2';
+import { makeStyles } from '@material-ui/core/styles';
+
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "80%",
+    marginLeft: "10%",
+  },
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    border: '1px solid rgba(41, 182, 246, 0.4)',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+    width: "100%",
+  },
+}));
+
+
+function HDStDlg({ record, onClose }) {
+  const [value, setValue] = React.useState(0);
+  const classes = useStyles();
+
+  const dispatch = useDispatch();
+
+ 
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+      <DialogContent style={{ padding: 0, width: '85rem', overflowX: 'hidden' }}>
+        <DpAppBar position="sticky">
+          <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
+            <DpTab label="视频监控" />
+          </DpTabs>
+          <DpCloseButton onClick={onClose} />
+        </DpAppBar>
+        <div className={classes.paper}>
+          <SkPicReal />
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default React.memo(HDStDlg);

src/views/Home/InfoPops/RealSkPop/index.js

@@ -187,7 +187,6 @@ function RealSkTip({ record, dispatch,view }) {
           record?.setView&&view===207?
           <span style={{cursor:'pointer',color:'#50b1f9',marginLeft:20}} onClick={()=>{
             dispatch.map.setView(203)
-            sessionStorage.setItem('lastCenter',JSON.stringify(record))
           }}>  进入此水库</span>
               : null :
             record.stnm == '小玉潭水库' ?

src/views/Home/MapCtrl/index.js

@@ -158,6 +158,20 @@ export default function MapCtrl({ initParams, onLoad }) {
           }
           // dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
         }
+
+        if (feature.layer.id === '流域站点_drp') {
+          const record = feature.properties
+          dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: record, coordinates: [record.lgtd, record.lttd] });
+        }
+        if (feature.layer.id === '流域站点_hd') {
+          const record = feature.properties
+          dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: record, coordinates: [record.lgtd, record.lttd] });
+        }
+        if (feature.layer.id === '流域站点_sk') {
+          const record = feature.properties
+          dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
+        }
+        
       }
     });
 

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

@@ -3,6 +3,7 @@ import RealHDLayer from "./realhdlayer";
 import RealHDLayerQ2 from "./realhdlayerQ2";
 import RealSkLayer from "./realsklayer";
 import RealSkLayerQ2 from "./realsklayerQ2";
+import RealSkLayerQ3 from "./realsklayerQ3";
 import ShyjLayer from "./shyjLayer"
 import sources from "./sources";
 
@@ -86,6 +87,7 @@ class LayerMgr {
     this.layers.push(new RealHDLayerQ2());    
     this.layers.push(new RealSkLayer());
     this.layers.push(new RealSkLayerQ2());
+    this.layers.push(new RealSkLayerQ3());
 
 
     this.layers.push(new BxSkLayer());
@@ -195,6 +197,7 @@ class LayerMgr {
 
         this.layerMap.RealSkLayer.getStyle(),
         this.layerMap.RealSkLayerQ2.getStyle(),
+        this.layerMap.RealSkLayerQ3.getStyle(),
 
         this.layerMap.BxSkLayer.getStyle(),
         this.layerMap.RealHDLayer.getStyle(),

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

@@ -18,8 +18,8 @@ const ShapeStyle = {
     'icon-image': '水库-超汛限',
     'icon-size': [
       'interpolate', ['linear'], ['zoom'],
-      10, 0.8,
-      14, 0.8,
+      10, 0.5,
+      14, 0.5,
     ],
 
     'text-allow-overlap': true,

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

@@ -0,0 +1,469 @@
+import clone from "clone";
+import { SkRealPromise } from "../../../../models/_/real";
+import { parseGeoJSON } from "../../../../utils/tools";
+import { InfoPopNames } from "../../InfoPops";
+import BaseLayer from "./baselayer";
+
+
+const SourceName = '实时水库q3';
+
+
+const ShapeStyle = {
+  id: SourceName,
+  type: 'symbol',
+  source: SourceName,
+  layout: {
+    'icon-allow-overlap': true,
+    'text-allow-overlap': true,
+    'icon-image': [
+        'case',
+        ['==', ['get', 'rzWarning'], 1], '水库-超汛限',
+        '水库'
+      ],
+    'icon-size': [
+      'interpolate', ['linear'], ['zoom'],
+      10, 0.5,
+      14, 0.5,
+    ],
+
+    'text-allow-overlap': true,
+    'text-size': [
+      'interpolate', ['linear'], ['zoom'],
+      10, 10,
+      14, 14,
+    ],
+    'text-font': ['Roboto Black'],
+    'text-field': [
+      'step',
+      ['zoom'],
+      '',
+      12, ['get', 'stnm']
+    ],
+    'text-anchor': 'top',
+    'text-offset': [0, 1],
+
+    'visibility': 'none',
+  },
+  paint: {
+    'text-color': '#fff'
+  }
+};
+
+export default class RealSkLayerQ3 extends BaseLayer {
+
+  static LayerName = 'RealSkLayerQ3';
+
+  static SourceName = SourceName;
+
+  getStyle() {
+    const ret = clone(ShapeStyle);
+    this._setStyleVisibility(ret);
+    return ret;
+  }
+
+  getName() {
+    return RealSkLayerQ3.LayerName;
+  }
+
+  getSubLayers() {
+    return [ShapeStyle.id];
+  }
+
+  getRefreshInterval() {
+    return 60 * 1000;
+  }
+
+
+  async doRefreshLayer(mapCtrl) {
+    const ms = mapCtrl.getSource(SourceName);
+
+    let data = [
+        {
+            "stcd": "61614200",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "浮桥河水库",
+            "adcd": "421181100000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 114.88069,
+            "lttd": 31.171967,
+            "elev": 0,
+            "damel": 71.33,
+            "dsflz": 68.04,
+            "fsltdz": 64.89,
+            "ddz": 51.78,
+            "zcxsw": 64.89,
+            "jhhsw":68.7,
+            "drpTm": "2025-06-06T22:00:00.000Z",
+            "today": 4,
+            "h1": 4,
+            "h3": 4,
+            "h6": 4,
+            "h12": 4,
+            "h24": 4,
+            "h48": 4,
+            "drpState": 2,
+            "rz": 65.7,
+            "w": 45490,
+            "xs":32133,
+            "a_fsltdz": -4.189999999999998,
+            "rzTm": "2025-06-06T22:00:00.000Z",
+            "rzWarning": 1,
+            "rzState": 2,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop",
+            "setView":true
+        },
+        {
+            "stcd": "61612610",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "三河口水库",
+            "adcd": "421181109000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.166667,
+            "lttd": 31.333333,
+            "elev": 0,
+            "damel": 156.8,
+            "dsflz": 154.99,
+            "fsltdz": 149,
+            "ddz": 124,
+            "zcxsw": 149,
+            "drpTm": "2025-06-06T22:00:00.000Z",
+            "today": 43.5,
+            "h1": 32,
+            "h3": 43.5,
+            "h6": 43.5,
+            "h12": 43.5,
+            "h24": 43.5,
+            "h48": 43.5,
+            "drpState": 1,
+            "rz": 141.56,
+            "xs":12744,
+            "w": 16926,
+            "a_fsltdz": -7.439999999999998,
+            "rzTm": "2025-06-06T22:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 1,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+        {
+            "stcd": "61613010",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "明山水库",
+            "adcd": "421181103000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.066667,
+            "lttd": 31.016667,
+            "elev": 0,
+            "damel": 98.7,
+            "dsflz": 96.07,
+            "fsltdz": 93,
+            "ddz": 78.02,
+            "zcxsw": 93,
+            "drpTm": "2025-06-06T22:00:00.000Z",
+            "today": 15,
+            "h1": 15,
+            "h3": 15,
+            "h6": 15,
+            "h12": 15,
+            "h24": 15,
+            "h48": 15,
+            "drpState": 1,
+            "rz": 84.67,
+            "xs":10432,
+            "w": 16900,
+            "a_fsltdz": -8.329999999999998,
+            "rzTm": "2025-06-06T22:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 1,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+        {
+            "stcd": "61612700",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "碧绿河水库",
+            "adcd": "421181109000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.214444,
+            "lttd": 31.299722,
+            "elev": 0,
+            "damel": 142.9,
+            "dsflz": 139.08,
+            "fsltdz": 137,
+            "ddz": 105,
+            "zcxsw": 137,
+            "drpTm": "2025-06-06T22:00:00.000Z",
+            "today": 50,
+            "h1": 38,
+            "h3": 50,
+            "h6": 50,
+            "h12": 50,
+            "h24": 50,
+            "h48": 50,
+            "drpState": 1,
+            "rz": 120,
+            "w": 6015,
+            "xs":1676,
+            "a_fsltdz": -17,
+            "rzTm": "2025-06-06T00:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 2,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+        {
+            "stcd": "61612750",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "大坳水库",
+            "adcd": "421181201000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.110833,
+            "lttd": 31.071944,
+            "elev": 0,
+            "damel": 215.75,
+            "dsflz": 212.7,
+            "fsltdz": 208.48,
+            "ddz": 194.6,
+            "zcxsw": 208.48,
+            "drpTm": "2025-06-06T00:00:00.000Z",
+            "today": 0,
+            "h1": 0,
+            "h3": 0,
+            "h6": 0,
+            "h12": 0,
+            "h24": 0,
+            "h48": 0,
+            "drpState": 2,
+            "rz": 203.4,
+            "xs":1164,
+            "w": 2797,
+            "a_fsltdz": -5.079999999999984,
+            "rzTm": "2025-06-06T00:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 2,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+        {
+            "stcd": "61612300",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "大旗山水库",
+            "adcd": "421181111000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.1375,
+            "lttd": 31.478333,
+            "elev": 0,
+            "damel": 171.6,
+            "dsflz": 170.1,
+            "fsltdz": 167.4,
+            "ddz": 149,
+            "zcxsw": 167.4,
+            "drpTm": "2025-06-06T00:00:00.000Z",
+            "today": 0,
+            "h1": 0,
+            "h3": 0,
+            "h6": 0,
+            "h12": 0,
+            "h24": 0,
+            "h48": 0,
+            "drpState": 2,
+            "rz": 156.8,
+            "w": 1834,
+            "xs":448,
+            "a_fsltdz": -10.599999999999994,
+            "rzTm": "2025-06-06T00:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 2,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+        {
+            "stcd": "61612580",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "芭茅河水库",
+            "adcd": "421181110000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.101389,
+            "lttd": 31.307778,
+            "elev": 0,
+            "damel": 127.8,
+            "dsflz": 125.57,
+            "fsltdz": 122.44,
+            "ddz": 106.94,
+            "zcxsw": 122.44,
+            "drpTm": "2025-06-06T22:00:00.000Z",
+            "today": 18,
+            "h1": 18,
+            "h3": 18,
+            "h6": 18,
+            "h12": 18,
+            "h24": 18,
+            "h48": 18,
+            "drpState": 1,
+            "rz": 117.78,
+            "w": 1577,
+            "xs":628,
+            "a_fsltdz": -4.659999999999997,
+            "rzTm": "2025-06-06T22:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 1,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+        {
+            "stcd": "61612560",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "大河铺水库",
+            "adcd": "421181112000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 114.941111,
+            "lttd": 31.464444,
+            "elev": 0,
+            "damel": 162.21,
+            "dsflz": 160.08,
+            "fsltdz": 159,
+            "ddz": 142.5,
+            "zcxsw": 159,
+            "drpTm": "2025-06-06T22:00:00.000Z",
+            "today": 50,
+            "h1": 50,
+            "h3": 50,
+            "h6": 50,
+            "h12": 50,
+            "h24": 50,
+            "h48": 50,
+            "drpState": 1,
+            "rz": 144.5,
+            "w": 1574,
+            "xs":"--",
+            "a_fsltdz": -14.5,
+            "rzTm": "2025-06-06T00:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 2,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+        {
+            "stcd": "716460001",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "杉林河水库",
+            "adcd": "421181107000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.433056,
+            "lttd": 31.304444,
+            "elev": 0,
+            "damel": 236.2,
+            "dsflz": 233.92,
+            "fsltdz": 231,
+            "ddz": 204,
+            "zcxsw": 231,
+            "drpTm": "2025-04-11T05:00:00.000Z",
+            "today": 0,
+            "h1": 0,
+            "h3": 0,
+            "h6": 0,
+            "h12": 0,
+            "h24": 0,
+            "h48": 0,
+            "drpState": 2,
+            "rz": 224.31,
+            "w": 1415,
+            "xs":750,
+            "a_fsltdz": -6.689999999999998,
+            "rzTm": "2025-04-11T05:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 2,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+        {
+            "stcd": "61614600",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "黑石咀水库",
+            "adcd": "421181103000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.056389,
+            "lttd": 31.001944,
+            "elev": 0,
+            "damel": 104,
+            "dsflz": 101.05,
+            "fsltdz": 98.3,
+            "ddz": 81.5,
+            "zcxsw": 98.3,
+            "drpTm": "2025-06-06T00:00:00.000Z",
+            "today": 0,
+            "h1": 0,
+            "h3": 0,
+            "h6": 0,
+            "h12": 0,
+            "h24": 0,
+            "h48": 0,
+            "drpState": 2,
+            "rz": 83,
+            "w": 1026,
+            "xs":375,
+            "a_fsltdz": -15.299999999999997,
+            "rzTm": "2025-06-06T00:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 2,
+            "layer": "RealSkLayer",
+            "layerPop": "RealSkPop"
+        },
+    ];
+    if (Array.isArray(data)) {
+      data.forEach(o => {
+        const strarz = o.rz - o.fsltdz;
+        if (!isNaN(strarz)) {
+          o.strarz = strarz.toFixed(2);
+        }
+      });
+    }
+    
+    ms.setData(parseGeoJSON(data));
+    return true;
+  }
+
+
+  getFeatureTip(record) {
+    return record.stnm;
+  }
+
+  featureClicked(properties, dispatch) {
+    if (properties.stnm === '小玉潭水库') {
+      /*
+      dispatch.runtime.setInfoDlg({
+        layerId: 'Three', properties: properties
+      });
+      */
+    } else {
+      dispatch.runtime.setFeaturePop({
+        type: InfoPopNames.RealSkPop,
+        properties,
+        coordinates: [properties.lgtd, properties.lttd],
+        offsetPop: true,
+      });
+    }
+
+  }
+}

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

@@ -4,6 +4,7 @@ import RealHDLayer from "./realhdlayer";
 import RealHDLayerQ2 from "./realhdlayerQ2";
 import RealSkLayer from "./realsklayer";
 import RealSkLayerQ2 from "./realsklayerQ2";
+import RealSkLayerQ3 from "./realsklayerQ3";
 import { DCPJ_TYPES } from "../../consts";
 import WataLayer from "./watalayer";
 import PlaneAreaLayer from "./planarealayer";
@@ -308,6 +309,10 @@ const sources = {
     type: 'geojson',
     data: { type: 'FeatureCollection', features: [] },
   },
+  [RealSkLayerQ3.SourceName]: {
+    type: 'geojson',
+    data: { type: 'FeatureCollection', features: [] },
+  },
   [PicStLayer.SourceName]: {
     type: 'geojson',
     data: { type: 'FeatureCollection', features: [] },

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

@@ -32,16 +32,16 @@ const VIEWS = [
     ]
   },
   // { id: 200, title: '水库', img: process.env.PUBLIC_URL+'/assets/menu/水库专题.png'},
-  {
-    id: 300, title: '水厂', img: process.env.PUBLIC_URL + '/assets/menu/水利设施.png', children: [
-      { id: 301, title: '供水态势', img: process.env.PUBLIC_URL + '/assets/menu/降雨中心.png' },
-      { id: 302, title: '水质安全', img: process.env.PUBLIC_URL + '/assets/menu/水情监测.png' },
-      { id: 303, title: '水厂运行', img: process.env.PUBLIC_URL + '/assets/menu/水库管理.png' },
-      { id: 306, title: '管网健康诊断', img: process.env.PUBLIC_URL + '/assets/menu/水利设施.png' },
-      { id: 307, title: '应急指挥调度', img: process.env.PUBLIC_URL + '/assets/menu/病险水库.png' },
-      // { id: 305, title: '决策支持与报表', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
-    ]
-  },
+  // {
+  //   id: 300, title: '水厂', img: process.env.PUBLIC_URL + '/assets/menu/水利设施.png', children: [
+  //     { id: 301, title: '供水态势', img: process.env.PUBLIC_URL + '/assets/menu/降雨中心.png' },
+  //     { id: 302, title: '水质安全', img: process.env.PUBLIC_URL + '/assets/menu/水情监测.png' },
+  //     { id: 303, title: '水厂运行', img: process.env.PUBLIC_URL + '/assets/menu/水库管理.png' },
+  //     { id: 306, title: '管网健康诊断', img: process.env.PUBLIC_URL + '/assets/menu/水利设施.png' },
+  //     { id: 307, title: '应急指挥调度', img: process.env.PUBLIC_URL + '/assets/menu/病险水库.png' },
+  //     // { id: 305, title: '决策支持与报表', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
+  //   ]
+  // },
   {
     id: 400, title: '灌区', img: process.env.PUBLIC_URL + '/assets/menu/预警分析.png', children: [
       { id: 501, title: '灌区监测', img: process.env.PUBLIC_URL + '/assets/menu/防洪形势.png' },
@@ -125,6 +125,11 @@ export default function ActionDock({ }) {
           <BootstrapTooltip key={o.id} title={<Typography variant="h6"><span style={{ color: '#fff' }}>{o.title}</span></Typography>}>
             <div className="dock-item" onClick={() => {
               if (o.children) {
+                if(o.id===400){
+                  // window.open("https://axhub.im/ax9/eec435b86544bac8/#id=arlcql&p=%E7%81%8C%E5%8C%BA%E6%80%BB%E8%A7%88&sc=1&c=1")
+                  window.open("https://workspace.easyv.cloud/shareScreen/eyJzY3JlZW5JZCI6MzUwOTQ0MywiZXhwaXJlZEF0IjoiMjAyNS0wNy0xMFQwODo1Nzo1NS40MjBaIn0=")
+                  return
+                }
                 //一级菜单
                 dispatch.map.setView(o.children[0].id)
                 setViewKey(o.id)

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

@@ -77,6 +77,17 @@ export default function Title() {
     dispatch.runtime.setHome();
   }
 
+  const getTitle = (view)=>{
+    if(view===1||view===3||view===4||view===5||view===6||view===8){
+      return `${ config.title2 }`
+    }
+    if(view===203||view===205||view===206||view===207){
+      return `${ config.title3 }`
+    }
+
+    return `${ config.title }`
+  }
+
   return (
     <div className="dp-title">
       <div className="action">
@@ -97,7 +108,7 @@ export default function Title() {
           </IconButton>
         </div>
       </div>
-      <div className="title">{`${config.title}`}</div>
+      <div className="title">{getTitle(view)}</div>
       <div className="action">
         <div className="menu-bar">
           <Link style={{ color: '#00deff' }} to={mgrHomePage()}>管理平台</Link>

src/views/Home/index.js

@@ -25,6 +25,7 @@ export default function Demo1() {
   const showGw = useSelector(s => s.runtime.showGw)
   const yuananType = useSelector(s => s.runtime.yuananType);
   const xiayou = useSelector(s => s.runtime.xiayouxh);
+  const jbqkKey = useSelector(s=>s.runtime.jbqkKey)
   console.log('wg', wg);
 
 
@@ -98,6 +99,9 @@ export default function Demo1() {
           <TransitionGroup className={clsx('right', 'dp-panel-container', layout.rightFullHeight && 'fullheight')}>
             {
               layout.right.map(({ key, ...params }) => {
+                if(key==='防汛基本情况右侧'&&jbqkKey===''){
+                  return
+                }
                 if (key != '网格' && key != '单个预案') {
                   return (
                     <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">

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

@@ -439,7 +439,7 @@ function DrpReal({ style }) {
       "eng_scal": "小（1）型",
       "danger_stat": "非病险水库",
       "label": "2023高标准",
-      "value": 43.95,
+      "value": 50.5,
       "diff_value": -0.0246,
       "trend": -1,
       "is_has_data": "y",
@@ -558,7 +558,7 @@ function DrpReal({ style }) {
       "eng_scal": "小（1）型",
       "danger_stat": "非病险水库",
       "label": "2023高标准",
-      "value": 43.95,
+      "value": 50.5,
       "diff_value": -0.0142,
       "trend": -1,
       "is_has_data": "y",

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

@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import useRequest from '../../../../utils/useRequest';
 import PanelBox from '../../components/PanelBox';
-
+import HighlightOff from '@material-ui/icons/HighlightOff';
+import SkPicReal from '../../../Mgr/xqjs/SkPicReal2';
 import Table from '@material-ui/core/Table';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableBody from '@material-ui/core/TableBody';
@@ -19,11 +20,37 @@ import Setting from './Setting';
 import { InfoPopNames } from '../../InfoPops';
 import config from '../../../../config';
 
+
+import Modal from '@material-ui/core/Modal';
+import { makeStyles } from '@material-ui/core/styles';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "80%",
+    marginLeft: "10%",
+  },
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    border: '1px solid rgba(41, 182, 246, 0.4)',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+    width: "100%",
+  },
+}));
+
+
 function DrpReal({ style }) {
   const dispatch = useDispatch();
   const tableDrpFilter = useSelector(s => s.realview.tableDrpFilter);
   const tableDrpSorter = useSelector(s => s.realview.tableDrpSorter);
   const drpAutoRefresh = useSelector(s => s.realview.drpAutoRefresh);
+  const [open, setOpen] = React.useState(false);
+  const classes = useStyles();
   const t = useRefresh(drpAutoRefresh ? 20 * 1000 : 0);
   const { data } = useRequest(DrpRealPromise.get, t);
   const [setting, showSetting] = useState(false);
@@ -57,6 +84,13 @@ function DrpReal({ style }) {
       });
     }
   }
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
 
   const toggleStType = (type) => {
     const visible = !tableDrpFilter[type];
@@ -90,8 +124,11 @@ function DrpReal({ style }) {
       }
       extra={
         <>
-          <i style={{ marginRight: '0.5rem', color: drpAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
-          <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i>
+          <i style={{ marginRight: '0.5rem' }} className="ionicons image cursor-pointer" onClick={()=>{
+            dispatch?.runtime.setInfoDlg({ layerId: 'spjkFaLayer', properties: {} })
+          }}></i> 
+          {/* <i style={{ marginRight: '0.5rem', color: drpAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
         </>
       }
     >
@@ -132,6 +169,27 @@ function DrpReal({ style }) {
       {
         setting && <Setting onClose={() => showSetting(false)} />
       }
+
+      {/*水库图片弹窗*/}
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={classes.modal}
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={open}>
+          <div className={classes.paper}>
+            <HighlightOff style={{ color: "#fff", position: "absolute", right: "1rem", fontSize: "2rem", cursor: "pointer" }} onClick={handleClose} />
+            <SkPicReal />
+          </div>
+        </Fade>
+      </Modal>
     </PanelBox>
   )
 }

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

@@ -43,14 +43,15 @@ function DrpReal({ style }) {
   useEffect(()=>{
     getSkData()
 
-    // return ()=>{
+    return ()=>{
+      dispatch.runtime.setJbqkKey('')
       // const map = window.__mapref;
       // const layer = map.getLayer('临时水库tz')
       // if(layer){
       //     map.removeLayer('临时水库tz');
       //     map.removeSource('临时水库tz');
       // }
-    // }
+    }
   },[])
 
   const getSkData = async()=>{
@@ -138,7 +139,7 @@ function DrpReal({ style }) {
 
       <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')}>
+        {/* <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>
@@ -149,6 +150,11 @@ function DrpReal({ style }) {
         <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>  */}
+        <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 2rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('2')}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt=""/>
+            <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>浮桥河</div>
+            <div style={{marginBottom:'-0.1rem'}}>{518}平方千米</div>
         </div>
       </Collapse>
 

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

@@ -58,7 +58,53 @@ function HDReal({ style }) {
         </div>
       }
     >
-      <div style={{ display: 'flex', padding: '10px 5px', marginLeft: 30, justifyContent: 'space-between', flexWrap: 'wrap' }}>
+      <div style={{border:'1px solid #408ecb',width:"100%",borderRadius:'5px',display:'flex',cursor:'pointer',marginBottom:'1rem'}} onClick={handleBxDlg}>
+        <div style={{width:"20%",fontSize:'1.2rem',color:'#408ecb',padding:'1rem',textAlign:'center'}}>变形监测</div>
+        <div style={{width:"80%",display:'flex',flexDirection:'column',justifyContent:'center'}}>
+          <div style={{width:'100%',display:'flex',justifyContent:'start',color:'#ffffff',fontSize:'0.8rem',padding:"0.2rem 0"}}>
+            <div style={{width:'4rem',textAlign:'right'}}>水库名称：</div>
+            <div style={{width:'5rem',textAlign:'left'}}>浮桥河水库</div>
+            <div style={{width:'4rem',textAlign:'right'}}>预警级别：</div>
+            <div style={{width:'5rem',textAlign:'left',color:'red'}}>红色</div>
+          </div>
+          <div style={{width:'100%',display:'flex',justifyContent:'start',color:'#ffffff',fontSize:'0.8rem',padding:"0.2rem 0"}}>
+            <div style={{width:'4rem',textAlign:'right'}}>测点编号：</div>
+            <div style={{width:'5rem',textAlign:'left'}}>GN1</div>
+            <div style={{width:'4rem',textAlign:'right'}}>监测值：</div>
+            <div style={{width:'5rem',textAlign:'left'}}>-120mm</div>
+          </div>
+          <div style={{width:'100%',display:'flex',justifyContent:'start',color:'#ffffff',fontSize:'0.8rem',padding:"0.2rem 0"}}>
+            <div style={{width:'4rem',textAlign:'right'}}>阈值：</div>
+            <div style={{width:'5rem',textAlign:'left'}}>±100mm</div>
+            <div style={{width:'4rem',textAlign:'right'}}>告警时间：</div>
+            <div style={{width:'8rem',textAlign:'left'}}>2025-07-03 07:00:01</div>
+          </div>
+        </div>
+      </div>
+      <div style={{border:'1px solid #408ecb',width:"100%",borderRadius:'5px',display:'flex',cursor:'pointer',marginBottom:'1rem',position:'relative'}}>
+        <div style={{width:"20%",fontSize:'1.2rem',color:'#408ecb',padding:'1rem',textAlign:'center',display:'flex',alignItems:'center'}}>视频AI</div>
+        <div style={{width:"80%",display:'flex',flexDirection:'column',justifyContent:'center'}}>
+          <div style={{width:'100%',display:'flex',justifyContent:'start',color:'#ffffff',fontSize:'0.8rem',padding:"0.2rem 0"}}>
+            <div style={{width:'4rem',textAlign:'right'}}>水库名称：</div>
+            <div style={{width:'5rem',textAlign:'left'}}>浮桥河水库</div>
+          </div>
+          <div style={{width:'100%',display:'flex',justifyContent:'start',color:'#ffffff',fontSize:'0.8rem',padding:"0.2rem 0"}}>
+            <div style={{width:'4rem',textAlign:'right'}}>告警类型：</div>
+            <div style={{width:'5rem',textAlign:'left',color:"red"}}>漂浮物</div>
+          </div>
+          <div style={{width:'100%',display:'flex',justifyContent:'start',color:'#ffffff',fontSize:'0.8rem',padding:"0.2rem 0"}}>
+            <div style={{width:'4rem',textAlign:'right'}}>告警点位：</div>
+            <div style={{width:'5rem',textAlign:'left'}}>大坝坝中</div>
+          </div>
+          <div style={{width:'100%',display:'flex',justifyContent:'start',color:'#ffffff',fontSize:'0.8rem',padding:"0.2rem 0"}}>
+            <div style={{width:'4rem',textAlign:'right'}}>告警时间：</div>
+            <div style={{width:'8rem',textAlign:'left'}}>2025-07-03 07:00:01</div>
+          </div>
+
+          <img src={`${process.env.PUBLIC_URL}/assets/jcgj.jpg`} alt=""  style={{ position:'absolute',top:"0",right:'0',width:'35%',height:'100%',padding:'0.5rem' }}  onClick={handleBxDlg}/>
+        </div>
+      </div>
+      {/* <div style={{ display: 'flex', padding: '10px 5px', marginLeft: 30, justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <div>
           <img src={`${process.env.PUBLIC_URL}/assets/s3.png`} alt="" style={{ width: 180, cursor: 'pointer' }} onClick={handleBxDlg} />
           <img src={`${process.env.PUBLIC_URL}/assets/s4.png`} alt="" style={{ width: 180 }} />
@@ -78,7 +124,7 @@ function HDReal({ style }) {
         <img src={`${process.env.PUBLIC_URL}/assets/s7.png`} alt="" style={{ width: 180, marginTop: 5 }} />
 
 
-      </div>
+      </div> */}
       {
         setting && <Setting onClose={() => showSetting(false)} />
       }

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

@@ -104,8 +104,8 @@ function DrpReal({ style }) {
         ], // 从properties中动态读取icon字段
         'icon-size': [
           'interpolate', ['linear'], ['zoom'],
-          10, 0.8,
-          14, 0.8, 
+          10, 0.5,
+          14, 0.5, 
         ],
         'text-size': [
           'interpolate', ['linear'], ['zoom'],

src/views/Home/panels/Tqyb24h/dsld.js

@@ -228,7 +228,7 @@ export default function AreaDrp({ style }) {
     <>
         <div style={{color:'#ffffff',padding:'7px 5px 10px 5px',display:'flex',alignItems:'center',fontWeight:200}}>
             {/* 时段选择 */}
-            麻城市未来24小时最大网格点雨量量级统计
+            麻城市未来2小时最大网格点雨量量级统计
 
             {/* <div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"71%",margin:'10px'}}>
             <RangePicker

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

@@ -60,6 +60,19 @@ export default function AreaDrp({ style }) {
     }
   },[show])
 
+  useEffect(()=>{
+    if(tab==='1'){
+      dispatch.rcview.showRealContour('htest')
+    }else{
+      dispatch.rcview.showRealContour('htest')
+    }
+
+    return ()=>{
+      dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
+      dispatch.runtime.setLayerSetting({ planeArea: null });
+      dispatch.map.setLayerVisible({ ContourLayer: false });
+    }
+  },[tab])
 
   return (
     <PanelBox

src/views/Mgr/xqjs/SkPicReal2/index.less

@@ -0,0 +1,14 @@
+.myCached{
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 8px;
+  padding: 2px 5px;
+  margin: 15px 0 0 20px;
+  cursor: pointer;
+  &:hover{
+    color:#00deff;
+    border-color:#00deff;
+  }
+}
+
+

src/views/Mgr/xqjs/SkPicReal2/picList.js

@@ -0,0 +1,172 @@
+import React, { useMemo,useState } from 'react'
+import moment from 'moment';
+import { renderDrp,renderSkArz } from '../../../../utils/renutils';
+import { KrM100Render } from '../../../../utils/tools';
+import { Card,CardActionArea,CardContent,CardMedia,Typography,Grid,Modal } from '@material-ui/core/index';
+import HighlightOff from '@material-ui/icons/HighlightOff';
+import '../SkPicReal/picList.less';
+import DefalutImg from '../../../../assets/defalut.png';
+import Backdrop from "@material-ui/core/Backdrop/Backdrop";
+import MgrCardContent from '../../../../layouts/mgrmui/MgrCardContent'
+import Fade from "@material-ui/core/Fade/Fade";
+import {makeStyles} from "@material-ui/core/styles";
+
+
+const useStyles = makeStyles((theme) => ({
+    modal: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width:"60%",
+        marginLeft:"20%",
+    },
+    paper: {
+        backgroundColor: theme.palette.background.paper,
+        border: '1px solid rgba(41, 182, 246, 0.4)',
+        boxShadow: theme.shadows[5],
+        padding: theme.spacing(2, 4, 3),
+        width:"100%",
+    },
+    txt: {
+        color:theme.palette.type === "dark"?"#fff":"#333"
+    }
+}));
+
+function PicList({itemData}) {
+    const classes = useStyles();
+
+    const info = useMemo(() => {
+        const pic = itemData.pic || [];
+        pic[0] = pic[0] || {};
+        pic[1] = pic[1] || {};
+        return {
+            pic1: pic[0].url?pic[0].url:DefalutImg,
+            pic2: pic[1].url?pic[1].url:DefalutImg,
+            pic1Tm: pic[0].tm ? moment(pic[0].tm).format('MM-DD HH:mm') : '-',
+            pic2Tm: pic[1].tm ? moment(pic[1].tm).format('MM-DD HH:mm') : '-',
+        }
+    }, [itemData]);
+
+    const [flipPic, setFlipPic] = useState(false);
+
+    const changePic = () => {
+        setFlipPic(!flipPic);
+    }
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const { pic1, pic2, pic1Tm, pic2Tm } = info;
+
+    return (
+        <div className="lf cardItem">
+            <Card>
+                <CardActionArea>
+                    <div style={{position:"relative",overflow:"hidden"}}>
+                        <CardMedia
+                            className="media"
+                            image={flipPic ? pic1 : pic2}
+                            title={itemData.stnm}
+                            onClick={handleOpen}
+                        />
+                        {
+                            itemData.pic?<div style={{ position: 'absolute', left: '0px', bottom: '-7px', right: '70%', borderTop: '4px solid white', borderRight: '4px solid white' }}>
+                                <img onClick={e => changePic(e)} alt={itemData.stcd} src={flipPic ? pic2 : pic1} style={{ width: '100%', cursor: 'pointer' }} />
+                            </div>:""
+                        }
+                    </div>
+                    <MgrCardContent>
+                        <Typography gutterBottom variant="h5" component="h2" className="clearFloat">
+                            <span className="lf">{itemData.stnm}</span>
+                            <span className="rf">{flipPic ? pic1Tm : pic2Tm}</span>
+                        </Typography>
+                        <div style={{color:"#999",fontSize:"0.8rem"}}>
+                            <Grid container spacing={3}>
+                                <Grid item xs={4}>
+                                    <strong>实时水位</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {itemData.rz}
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <strong>01小时雨量</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderDrp(itemData, 'h1')}
+                                </Grid>
+
+                                <Grid item xs={4}>
+                                    <strong>汛限水位</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {itemData.fsltdz}
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <strong>03小时雨量</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderDrp(itemData, 'h3')}
+                                </Grid>
+
+                                <Grid item xs={4}>
+                                    <strong>超汛限</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderSkArz(itemData)}
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <strong>06小时雨量</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderDrp(itemData, 'h6')}
+                                </Grid>
+
+                                <Grid item xs={4}>
+                                    <strong>实时库容</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {KrM100Render(itemData)}
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <strong>24小时雨量</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderDrp(itemData, 'h24')}
+                                </Grid>
+                            </Grid>
+                        </div>
+                    </MgrCardContent>
+                </CardActionArea>
+            </Card>
+
+            {/*水库图片弹窗*/}
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                className={classes.modal}
+                open={open}
+                onClose={handleClose}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+            >
+                <Fade in={open}>
+                    <div className={classes.paper}>
+                        <HighlightOff style={{position:"absolute",right: "1rem",fontSize:"2rem",cursor:"pointer" }} className={classes.txt} onClick={handleClose}/>
+                        <img src={flipPic ? pic1 : pic2} alt="" style={{width:"80%",marginLeft:"10%"}}/>
+                    </div>
+                </Fade>
+            </Modal>
+        </div>
+    );
+}
+export default PicList

src/views/Mgr/xqjs/SkPicReal2/picList.less

@@ -0,0 +1,34 @@
+.cardList{
+  width:100%;
+  .cardItem{
+    width: calc( (100% - 3rem)/4 );
+    margin:0 1rem 1rem 0;
+    &:nth-child(4n){
+      margin-right:0;
+    }
+    .MuiGrid-item {
+      padding: 2px 12px;
+    }
+    .MuiCard-root{
+      box-shadow: none;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+  }
+  .media {
+    height:270px
+  }
+}
+
+.myCached{
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 8px;
+  padding: 2px 5px;
+  margin: 15px 0 0 20px;
+  cursor: pointer;
+  &:hover{
+    color:#00deff;
+    border-color:#00deff;
+  }
+}