fix(): 修改预演图表

public/data3/line2.geojson

@@ -0,0 +1,8 @@
+{"type":"FeatureCollection",
+"features":[{"type":"Feature",
+"id":2,
+"bbox":[114.88191247,31.16683581,114.88643309,31.16825998],
+"properties":{"gid":2,"geometry":"LineString"},
+"geometry":{
+  "type":"LineString",
+  "coordinates":[[114.878250,31.169557],[114.879593,31.169511],[114.880543,31.169543],[114.881345,31.170357]]}}]}

src/views/Home/InfoDlg/XcxqDlg/TrackMap.js

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import config from '../../../../config';
+import LayerMgr from '../../MapCtrl/mapstyle/layermgr';
+import { getLayerVisible, getLayerSetting, getCameraTarget } from '../../../../models/map/selectors';
+import { useDispatch, useSelector } from 'react-redux';
+// 设置你的 Mapbox 访问令牌
+mapboxgl.accessToken = 'pk.eyJ1IjoiaW5ob25vb3IiLCJhIjoiQzgzSmFadyJ9.jQDKFw6z_HrtBzu8hY415g';
+
+const TrackMap = ({ trackData }) => {
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+  const layermgrRef = useRef(new LayerMgr());
+  const layerSetting = useSelector(getLayerSetting);
+
+  useEffect(() => {
+    if (!mapContainer.current) return;
+    layermgrRef.current.init(layerSetting);
+    // 初始化地图
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: layermgrRef.current.getMapStyle(), // 使用暗色主题
+      center: [114.88069, 31.171967], // 以轨迹起点为中心
+      minZoom: 5,
+      maxZoom: 18,
+      pitch: config.homePitch,
+      bounds: config.initalExtent,
+      maxBounds: config.w_extent_mb,
+      preserveDrawingBuffer: true,
+    });
+
+    map.current.on('load', () => {
+      if (!map.current) return;
+
+      // // 添加轨迹数据源
+      // map.current.addSource('track', {
+      //   type: 'geojson',
+      //   data: {
+      //     type: 'Feature',
+      //     properties: {},
+      //     geometry: {
+      //       type: 'LineString',
+      //       coordinates: trackData.coordinates
+      //     }
+      //   }
+      // });
+
+      // // 添加轨迹线图层
+      // map.current.addLayer({
+      //   id: 'track-line',
+      //   type: 'line',
+      //   source: 'track',
+      //   layout: {
+      //     'line-join': 'round',
+      //     'line-cap': 'round'
+      //   },
+      //   paint: {
+      //     'line-color': '#1890ff',
+      //     'line-width': 3,
+      //     'line-opacity': 0.8
+      //   }
+      // });
+
+      // 添加起点标记
+      // new mapboxgl.Marker({ color: '#00ff00' })
+      //   .setLngLat(trackData.coordinates[0])
+      //   .setPopup(new mapboxgl.Popup().setHTML('起点'))
+      //   .addTo(map.current);
+
+      // // 添加终点标记
+      // new mapboxgl.Marker({ color: '#ff0000' })
+      //   .setLngLat(trackData.coordinates[trackData.coordinates.length - 1])
+      //   .setPopup(new mapboxgl.Popup().setHTML('终点'))
+      //   .addTo(map.current);
+
+      // 添加轨迹点图层
+      // map.current.addLayer({
+      //   id: 'track-points',
+      //   type: 'circle',
+      //   source: 'track',
+      //   paint: {
+      //     'circle-radius': 4,
+      //     'circle-color': '#ffffff',
+      //     'circle-stroke-width': 1,
+      //     'circle-stroke-color': '#1890ff'
+      //   }
+      // });
+
+      // // 添加动画效果
+      // let animationStep = 0;
+      // const animateTrack = () => {
+      //   if (!map.current) return;
+
+      //   // 更新轨迹线的渐变动画
+      //   map.current.setPaintProperty('track-line', 'line-gradient', [
+      //     'step',
+      //     ['line-progress'],
+      //     '#1890ff',
+      //     animationStep,
+      //     '#ffffff'
+      //   ]);
+
+      //   animationStep = (animationStep + 0.001) % 1;
+      //   requestAnimationFrame(animateTrack);
+      // };
+
+      // animateTrack();
+    });
+
+    // 清理函数
+    return () => {
+      map.current?.remove();
+    };
+  }, [[]]);
+
+  return <div ref={mapContainer} style={{width:500}} />;
+};
+
+export default TrackMap;

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

@@ -8,6 +8,7 @@ import DpAppBar from '../../../../layouts/mui/DpAppBar';
 import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
 import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
 import TaskInspectionDetail from './TaskInspectionDetail'
+import TrackMap from './TrackMap'
 function HDStDlg({ record, onClose }) {
   const [value, setValue] = React.useState(0);
 
@@ -21,7 +22,7 @@ function HDStDlg({ record, onClose }) {
       BackdropComponent={DpBackgroundDrop}
     >
       <div className="boxhead"></div>
-      <DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden',height:'80rem' }}>
+      <DialogContent style={{ padding: 0, width: '85rem', overflowX: 'hidden',height:'80rem' }}>
         <DpAppBar position="sticky">
           <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
             <DpTab label="任务信息" />
@@ -30,7 +31,13 @@ function HDStDlg({ record, onClose }) {
         </DpAppBar>
       <div >
           {/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
-          <TaskInspectionDetail />
+          <div style={{display:'flex'}}>
+            <div style={{flex:1}}>
+            <TaskInspectionDetail />
+            </div>
+            {/* <div style={{width:500}}></div> */}
+            {/* <TrackMap /> */}
+          </div>
        </div>
       </DialogContent>
       <div className="boxfoot"></div>

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

@@ -168,7 +168,15 @@ export default function Title() {
           <>
             <div style={{padding:'1rem',color:item.key===view?'#65dbfb':'#ffffff',cursor:'pointer',margin:"0 1rem"}} onClick={()=>{
               dispatch.map.setView(item.key)
-              if(item.key===200){
+                const map = window.__mapref;
+                if (map) {
+                  const layer = map.getLayer('临时线')
+                  if (layer) {
+                    map.removeLayer('临时线');
+                    map.removeSource('临时线');
+                  }
+                }
+                if (item.key === 200) {
                 const center = JSON.parse(sessionStorage.getItem('lastCenter'))
                 if(center){
                   dispatch.runtime.setCameraTarget({

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

@@ -143,8 +143,8 @@ function HDReal({ style }) {
            <img src={`${process.env.PUBLIC_URL}/assets/cgfx.png`} alt="" style={{ width: 420}} />
             </div>
             {
-              renderChart &&<div style={{position:'absolute',top:80,right:450}}>
+              renderChart &&<div style={{position:'absolute',top:130,right:450}}>
-           <img src={`${process.env.PUBLIC_URL}/assets/dcjg.jpg`} alt="" style={{ width: 370}} />
+           <img src={`${process.env.PUBLIC_URL}/assets/ddjg.png`} alt="" style={{ width: 370}} />
             </div>
             }
             

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

@@ -85,11 +85,45 @@ function DrpReal({ style }) {
     const flyTo = () => {
         dispatch?.runtime.setInfoDlg({ layerId: 'XunchachaoshiLayer', properties: {} })
     }
+     const setSkLayer1 = ()=>{
+    const map = window.__mapref;
+    const layer = map.getLayer('临时线')
+    if(layer){
+      map.removeLayer('临时线');
+      map.removeSource('临时线');
+    }
+    map.addLayer({
+        'id': '临时线',
+        'type': 'line',
+        'source': {
+            'type': 'geojson',
+            'data': `${window.location.origin}/data3/line2.geojson`
+        },
+        'layout': {
+          'line-join': 'round'
+        },
+        'paint': {
+          'line-color': 'red',
+          'line-width': 10
+          // [
+          //   'case',
+          //   ['==', ['get', 'LEVEL'], 1], 2.2,
+          //   ['==', ['get', 'LEVEL'], 2], 2.2,
+          //   ['==', ['get', 'LEVEL'], 3], 2.2,
+          //   ['==', ['get', 'LEVEL'], 4], 1.6,
+          //   ['==', ['get', 'LEVEL'], 5], 1.3,
+          //   10
+          // ]
+        },
+        'visibility': 'visible',
+    });
+  }
     const jumpTo = (record) => {
         const { lgtd, lttd } = record;
         const lgtdNum = Number(lgtd);
         const lttdNum = Number(lttd)
         if (record.code == 1) {
+            setSkLayer1()
             if (lgtdNum && lttdNum) {
                 dispatch.runtime.setCameraTarget({
                     center: [lgtdNum, lttdNum],

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

@@ -155,8 +155,8 @@ export default function Warn({ style }) {
           </RadioGroup>
         </FormControl>
         {res.yy &&
-          <div style={{ color: "#fff", position: 'absolute', top: 90, left: '-380px' }}>
+          <div style={{ color: "#fff", position: 'absolute', top: 130, left: '-380px' }}>
-            <img src={`${process.env.PUBLIC_URL}/assets/yjzl.jpg`} alt="" style={{ width: 370 }} />
+            <img src={`${process.env.PUBLIC_URL}/assets/yyzl.png`} alt="" style={{ width: 370 }} />
             {/* <div style={{ background: '#020c2b',padding:'5px 10px',opacity:1 }}>
             <div style={{color:'#c5d02c',fontSize:20}}>最大淹没范围</div>
             <div style={{display:'flex',columnGap:10}}>
@@ -170,7 +170,7 @@ export default function Warn({ style }) {
           </div> */}
           </div>}
         
-        <div style={{ color: "#fff", position: 'absolute', top: 160, right: 600 }}>
+        <div style={{ color: "#fff", position: 'absolute', top: 83, right: 600 }}>
           <WaterLevelAlert />
           </div>
       </div>