Compare commits
No commits in common. "a793096e4c6b4374be4789f6740d0fb18ec75ee0" and "83372f9739d399e9fc4c045b0af1b16e364e0a45" have entirely different histories.
a793096e4c
...
83372f9739
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 491 B |
Binary file not shown.
|
Before Width: | Height: | Size: 708 B |
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
Binary file not shown.
|
Before Width: | Height: | Size: 430 B |
Binary file not shown.
|
Before Width: | Height: | Size: 925 B |
Binary file not shown.
|
Before Width: | Height: | Size: 627 B |
Binary file not shown.
|
Before Width: | Height: | Size: 621 B |
Binary file not shown.
|
Before Width: | Height: | Size: 635 B |
Binary file not shown.
|
Before Width: | Height: | Size: 493 B |
Binary file not shown.
|
After Width: | Height: | Size: 891 B |
Binary file not shown.
|
Before Width: | Height: | Size: 888 B |
Binary file not shown.
|
Before Width: | Height: | Size: 916 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 508 B |
Binary file not shown.
|
After Width: | Height: | Size: 855 B |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 740 B |
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 740 B |
Binary file not shown.
|
Before Width: | Height: | Size: 824 B |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
|
|
@ -1,14 +1,4 @@
|
|||
@font-face {
|
||||
font-family: 'youshe';
|
||||
src: url("../fonts/优设标题黑.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'douyu';
|
||||
src: url("../fonts/douyuFont-2.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'huxiaopo';
|
||||
src: url("../fonts/HuXiaoBoNanShenTi-2.otf");
|
||||
}
|
||||
|
|
@ -337,13 +337,6 @@ input:-webkit-autofill:active {
|
|||
color: #fff;
|
||||
}
|
||||
}
|
||||
.ant-picker-cell-disabled {
|
||||
pointer-events: none;
|
||||
.ant-picker-cell-inner {
|
||||
color: rgba(255, 255, 255, 0.25) !important;
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer/Ranges
|
||||
.ant-picker-footer {
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@ export const runtime = createModel<RootModel>()({
|
|||
markers: {},
|
||||
viewTick: 1, //用来刷新页面更新Marker位置
|
||||
showPanels: true, //是否展开面板
|
||||
isFullScreen: false, //是否全屏
|
||||
homeCheckedObj: {}, //首页展开面板对象大屏不用
|
||||
homeCheckedObj: {}, //首页展开面板对象
|
||||
featurePops: [], // [{ id, type, data, lgtd, lttd, elev }]
|
||||
|
||||
layerSetting: {},
|
||||
|
|
@ -82,12 +81,6 @@ export const runtime = createModel<RootModel>()({
|
|||
showPanels: val,
|
||||
}
|
||||
},
|
||||
setIsFullScreen(state, val) {
|
||||
return {
|
||||
...state,
|
||||
isFullScreen: val,
|
||||
}
|
||||
},
|
||||
setHomeCheckedObj(state, val) {
|
||||
return {
|
||||
...state,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { reservoirlist } from "./station"
|
||||
|
||||
const service = '/gunshiApp/ss'
|
||||
const apiurl = {
|
||||
|
|
@ -158,45 +157,33 @@ const apiurl = {
|
|||
managePic: service + '/screen/manageHouseImg/get',
|
||||
wzPage:service + '/rescue/goods/page/query'
|
||||
},
|
||||
qhfz: {
|
||||
lawPage: service + '/SzRuleByLaw/page',
|
||||
systemPage: service + '/SzRegulatoryFramework/page',
|
||||
caseSta:service + '/szCase/statistics/1'
|
||||
zrrgl: {
|
||||
page: service + "/resPerson/page",
|
||||
edit: service + "/resPerson/update",
|
||||
delete: service + "/resPerson/del",
|
||||
save: service + "/resPerson/insert",
|
||||
},
|
||||
zrz: {
|
||||
respPerson: service + '/screen/responsibility/getPerson',
|
||||
floodPerson: service + '/screen/responsibility/getFxPerson',
|
||||
train:service + '/screen/responsibility/getTraining'
|
||||
}
|
||||
},
|
||||
sy: {
|
||||
sssyq: {
|
||||
rain: service + '/screen/monitoring/rain',
|
||||
reservoir: service + '/screen/monitoring/rsvr',
|
||||
flow:service + '/screen/monitoring/flow'
|
||||
fxya:{
|
||||
page: service + "/resPlanB/list",
|
||||
update: service + "/resPlanB/update",
|
||||
save: service + "/resPlanB/insert",
|
||||
delete: service + "/resPlanB/del",
|
||||
getFile: service + "/resPlanB/file/get"
|
||||
},
|
||||
ya: {
|
||||
rota: service + '/screen/plan/rota',
|
||||
document:service + '/screen/plan/doc'
|
||||
}
|
||||
},
|
||||
sg: {
|
||||
aqjd: {
|
||||
info:service + '/wholeCycle/security',
|
||||
gcaqjc: {
|
||||
gcaqyj: {
|
||||
yjgzpz:{
|
||||
page: service + '/osmoticWarnRule/page',
|
||||
save: service + '/osmoticWarnRule/insert',
|
||||
edit: service + "/osmoticWarnRule/update",
|
||||
delete: service + "/osmoticWarnRule/del",
|
||||
list: service + "/osmoticPressDevice/list"
|
||||
}
|
||||
},
|
||||
aqyh:{
|
||||
info:service + '/screen/hidden/get/',
|
||||
},
|
||||
skhj:{
|
||||
info:service + '/screen/reservoirDemarcationInfo/get',
|
||||
},
|
||||
byjc:{
|
||||
info:service + '/screen/byfz/get/',
|
||||
},
|
||||
wxyh:{
|
||||
info:service + '/screen/mfr/get/',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default apiurl
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import centerOfMass from '@turf/center-of-mass';
|
|||
import bbox from '@turf/bbox';
|
||||
import turfLength from '@turf/length';
|
||||
import along from '@turf/along';
|
||||
import { config } from '@/config';
|
||||
|
||||
const class2type = {};
|
||||
const { toString } = class2type;
|
||||
'Boolean Number String Function Array Date RegExp Object Error'.split(' ').forEach((name) => {
|
||||
|
|
@ -613,56 +613,4 @@ export const myFiltrate = (data,params)=>{
|
|||
return query.substring(iStart);
|
||||
|
||||
return query.substring(iStart, iEnd);
|
||||
}
|
||||
|
||||
export const download = (url) => {
|
||||
let downloadLink = document.createElement("a");
|
||||
// downloadLink.href = `${process.env.REACT_APP_API_URL}/gunshiApp/ss/personnelPlan/file/download/${params}`;
|
||||
downloadLink.href = config.ip +url;
|
||||
// downloadLink.download = `${params.fileName}`;
|
||||
downloadLink.style.display = "none";
|
||||
// 将链接添加到页面中
|
||||
document.body.appendChild(downloadLink);
|
||||
|
||||
// 模拟点击事件，开始下载
|
||||
downloadLink.click();
|
||||
}
|
||||
|
||||
export const showFullScreen = (show=false) => {
|
||||
//当前是否全屏
|
||||
const checkFullScreen = () => {
|
||||
return !!(
|
||||
document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement
|
||||
);
|
||||
};
|
||||
|
||||
if(show && !checkFullScreen()){
|
||||
// 进入全屏
|
||||
const elem = document?.documentElement;
|
||||
if (elem?.requestFullscreen) {
|
||||
elem?.requestFullscreen();
|
||||
} else if (elem?.mozRequestFullScreen) { /* Firefox */
|
||||
elem?.mozRequestFullScreen();
|
||||
} else if (elem?.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
|
||||
elem?.webkitRequestFullscreen();
|
||||
} else if (elem?.msRequestFullscreen) { /* IE/Edge */
|
||||
elem?.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
if(!show && checkFullScreen()){
|
||||
// 退出全屏
|
||||
if (document?.exitFullscreen) {
|
||||
document?.exitFullscreen();
|
||||
} else if (document?.mozCancelFullScreen) { /* Firefox */
|
||||
document?.mozCancelFullScreen();
|
||||
} else if (document?.webkitExitFullscreen) { /* Chrome, Safari & Opera */
|
||||
document?.webkitExitFullscreen();
|
||||
} else if (document?.msExitFullscreen) { /* IE/Edge */
|
||||
document?.msExitFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@ export default class Map2D extends BaseMap {
|
|||
this.dispatch.runtime.setMapCenter({
|
||||
center: this.PROJ2GG(center),
|
||||
zoom: zoom,
|
||||
pitch: config.pitch3d,
|
||||
pitch: config.homePitch,
|
||||
})
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ import { BouaLayer3D } from "./layers/BouaLayer3D";
|
|||
import { BouaMaskLayer3D } from "./layers/BouaMaskLayer3D";
|
||||
import { VillagesBouaLayer3D } from "./layers/VillagesBouaLayer3D"
|
||||
|
||||
import { getCameraViewPosition, getCameraViewCenter, getNewPosition } from './utils/cesutil'
|
||||
import { getCameraViewPosition, getCameraViewCenter } from './utils/cesutil'
|
||||
|
||||
|
||||
const { Cesium } = window;
|
||||
|
||||
function __prepare_ces(dispatch) {
|
||||
Cesium.CesiumWidget.prototype.showErrorPanel = function (title, error) {
|
||||
Cesium.CesiumWidget.prototype.showErrorPanel = function (title) {
|
||||
dispatch && dispatch.map.setMode('2d');
|
||||
if (title && title.indexOf('constructing') >= 0) {
|
||||
alert('无法初始化三维场景，如果一直出现此问题，请尝试下载最新的chrome浏览器');
|
||||
|
|
@ -104,38 +104,31 @@ export default class Map3D extends BaseMap {
|
|||
Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
|
||||
];
|
||||
|
||||
let isInitialMove = true;
|
||||
//监听地图移动完成事件
|
||||
viewer.camera.moveEnd.addEventListener(() => {
|
||||
if (isInitialMove) {
|
||||
isInitialMove = false;
|
||||
return;
|
||||
}
|
||||
//获取当前相机高度
|
||||
const { lon, lat, height:olZoom } = getCameraViewCenter(viewer);
|
||||
console.log(lon, lat, olZoom);
|
||||
if(lon && lat && olZoom){
|
||||
this.dispatch.runtime.setMapCenter({
|
||||
center: [lon, lat],
|
||||
zoom: olZoom,
|
||||
pitch: config.homePitch,
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
this.layerMgr = new LayerMgr3D(viewer);
|
||||
this.getLayer3D(viewer)//加载地图
|
||||
|
||||
let lastPosition = {x:null,y:null,z:null};//记录上次移动坐标
|
||||
let moveStartTime = Date.now();//记录上次setMapCenter事件, 用于防抖
|
||||
let flag = false //帧检测移动后改为true
|
||||
const timeInterval = 500; //防抖时间
|
||||
viewer.scene.postRender.addEventListener(() => {
|
||||
this.dispatch.runtime.tickViewChanged();
|
||||
// this.layerMgr.frameUpdate();
|
||||
|
||||
const currentPos = viewer.camera.position
|
||||
const { x, y, z } = lastPosition
|
||||
if(currentPos.x===x && currentPos.y===y && currentPos.z===z){
|
||||
if(flag && (Date.now() - moveStartTime >= timeInterval)){
|
||||
const { lon, lat, height:olZoom } = getCameraViewCenter(viewer)||{};
|
||||
console.log(lon, lat, olZoom);
|
||||
if(lon && lat && olZoom){
|
||||
this.dispatch.runtime.setMapCenter({
|
||||
center: [lon, lat],
|
||||
zoom: olZoom,
|
||||
pitch: config.pitch3d,
|
||||
})
|
||||
}
|
||||
flag = false
|
||||
moveStartTime = Date.now()
|
||||
}
|
||||
}else{
|
||||
//在移动
|
||||
lastPosition = { x: currentPos.x, y: currentPos.y, z: currentPos.z };
|
||||
flag = true
|
||||
}
|
||||
});
|
||||
|
||||
let destination = Cesium.Cartesian3.fromDegrees(115.064,30.989,5000) //默认相机位置
|
||||
|
|
@ -195,38 +188,21 @@ export default class Map3D extends BaseMap {
|
|||
return this.layerMgr.getLayer(name);
|
||||
}
|
||||
|
||||
zoomTo(cameraTarget={}) {
|
||||
zoomTo(cameraTarget) {
|
||||
if (cameraTarget.center) {
|
||||
if(cameraTarget.fixed){//固定相机朝向
|
||||
const camera = this._map.camera;
|
||||
const destination = getNewPosition(cameraTarget.center, cameraTarget.zoom, camera)
|
||||
if(!destination){
|
||||
return
|
||||
}
|
||||
camera.flyTo({
|
||||
destination: destination,
|
||||
orientation: {
|
||||
heading: camera.heading,
|
||||
pitch: camera.pitch,
|
||||
roll: 0.0,
|
||||
},
|
||||
duration: 1,
|
||||
});
|
||||
}else{
|
||||
this._map.camera.flyTo({
|
||||
destination: getCameraViewPosition(cameraTarget),
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(0),
|
||||
pitch: Cesium.Math.toRadians(config.pitch3d),
|
||||
roll: 0.0,
|
||||
},
|
||||
duration: 1.5, // 飞行时间，单位秒，可以根据需要调整
|
||||
// 其他可选参数，例如：
|
||||
// maximumHeight: 10000, // 最大高度
|
||||
// pitchAdjustHeight : 1000, // 在飞行过程中调整俯仰角的高度阈值
|
||||
// flyOverLongitude: 100, // 飞越经度，用于控制飞行路径
|
||||
});
|
||||
}
|
||||
this._map.camera.flyTo({
|
||||
destination: getCameraViewPosition(cameraTarget),
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(0),
|
||||
pitch: Cesium.Math.toRadians(config.pitch3d),
|
||||
roll: 0.0,
|
||||
},
|
||||
duration: 1.5, // 飞行时间，单位秒，可以根据需要调整
|
||||
// 其他可选参数，例如：
|
||||
// maximumHeight: 10000, // 最大高度
|
||||
// pitchAdjustHeight : 1000, // 在飞行过程中调整俯仰角的高度阈值
|
||||
// flyOverLongitude: 100, // 飞越经度，用于控制飞行路径
|
||||
});
|
||||
} else if (cameraTarget.bound) {
|
||||
const b = cameraTarget.bound;
|
||||
const p1 = Cesium.Cartesian3.fromDegrees(...b[0]);
|
||||
|
|
@ -245,17 +221,3 @@ export default class Map3D extends BaseMap {
|
|||
BouaMaskLayer3D(viewer)//县界外遮罩层
|
||||
}
|
||||
}
|
||||
|
||||
// // 这是一个测试性能的工具留着
|
||||
// let listenerExecutionTimes = []; // 记录每次执行的时间
|
||||
// const start = performance.now();
|
||||
// const end = performance.now();
|
||||
// listenerExecutionTimes.push(end - start);
|
||||
|
||||
// setInterval(() => {
|
||||
// if (listenerExecutionTimes.length > 0) {
|
||||
// const avg = listenerExecutionTimes.reduce((a, b) => a + b, 0) / listenerExecutionTimes.length;
|
||||
// console.log(`平均每帧监听函数执行时间: ${avg.toFixed(3)}ms`);
|
||||
// listenerExecutionTimes = []; // 清空
|
||||
// }
|
||||
// }, 1000);
|
||||
|
|
@ -48,7 +48,7 @@ export default class LayerMgr3D extends LayerMgr {
|
|||
*/
|
||||
addAppLayers(dispatch, visible, setting, otherParams) {
|
||||
visible = visible || {};
|
||||
dispatch.map.setMap(this.viewer);
|
||||
// dispatch.map.setMap(this.viewer);
|
||||
//河流
|
||||
this.addLayer(new HLLayer3D({ visible: visible[HLLayer3D.LayerName], setting, dispatch }));
|
||||
//湖泊
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export default class FeatureLayer3D extends BaseLayer3D {
|
|||
*/
|
||||
setData(records) {
|
||||
const viewer = this._viewer;
|
||||
if (!viewer || !viewer?.dataSourceDisplay?.defaultDataSource) {
|
||||
if (!viewer || !viewer.dataSourceDisplay?.defaultDataSource) {
|
||||
console.log('viewer null');
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,43 +97,42 @@ export function getCameraViewPosition(mapCenter) {
|
|||
}
|
||||
|
||||
//获取摄像机焦点经纬度和高度
|
||||
export function getCameraViewCenter(viewer={}) {
|
||||
export function getCameraViewCenter(viewer) {
|
||||
// 1. 获取屏幕中心点的射线（从相机到屏幕中心）
|
||||
const ray = viewer?.camera.getPickRay(new Cesium.Cartesian2(
|
||||
viewer?.canvas.clientWidth / 2,
|
||||
viewer?.canvas.clientHeight / 2
|
||||
const ray = viewer.camera.getPickRay(new Cesium.Cartesian2(
|
||||
viewer.canvas.clientWidth / 2,
|
||||
viewer.canvas.clientHeight / 2
|
||||
));
|
||||
|
||||
// 2. 计算射线与地球表面的交点
|
||||
const intersection = viewer?.scene.globe.pick(ray, viewer?.scene);
|
||||
const intersection = viewer.scene.globe.pick(ray, viewer.scene);
|
||||
if (intersection) {
|
||||
// 如果有交点（看向地球）
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(intersection);
|
||||
return {
|
||||
lon: Cesium.Math.toDegrees(cartographic.longitude),
|
||||
lat: Cesium.Math.toDegrees(cartographic.latitude),
|
||||
height: heigjtToZoom(viewer?.camera.positionCartographic.height)//cartographic.height
|
||||
height: heigjtToZoom(viewer.camera.positionCartographic.height)//cartographic.height
|
||||
};
|
||||
} else {
|
||||
console.log('如果看向天空或太空，获取射线与椭球体的交点');
|
||||
// 如果看向天空或太空，获取射线与椭球体的交点
|
||||
const ellipsoid = viewer?.scene.globe.ellipsoid;
|
||||
const intersection2 = viewer?.scene.camera.pickEllipsoid(
|
||||
const ellipsoid = viewer.scene.globe.ellipsoid;
|
||||
const intersection2 = viewer.scene.camera.pickEllipsoid(
|
||||
new Cesium.Cartesian2(
|
||||
viewer?.canvas.clientWidth / 2,
|
||||
viewer?.canvas.clientHeight / 2
|
||||
viewer.canvas.clientWidth / 2,
|
||||
viewer.canvas.clientHeight / 2
|
||||
),
|
||||
ellipsoid
|
||||
);
|
||||
|
||||
// if (intersection2) {
|
||||
// // const cartographic = Cesium.Cartographic.fromCartesian(intersection2);
|
||||
// // return {
|
||||
// // lon: Cesium?.Math?.toDegrees(cartographic.longitude),
|
||||
// // lat: Cesium?.Cartographic?.toDegrees(cartographic.latitude),
|
||||
// // height: 0
|
||||
// // };
|
||||
// }
|
||||
if (intersection2) {
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(intersection2);
|
||||
return {
|
||||
lon: Cesium.Math.toDegrees(cartographic.longitude),
|
||||
lat: Cesium.Cartographic.toDegrees(cartographic.latitude),
|
||||
height: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -193,36 +192,5 @@ export function zoomToHeight(olZoom) {
|
|||
}
|
||||
//cesium的摄像机height转openlayers的zoom
|
||||
export function heigjtToZoom(height) {
|
||||
return Math.max(0, Math.min(28, Math.log2(120000000 / (height>400?(height - 400):height) )))
|
||||
}
|
||||
|
||||
//根据经纬度、当前相机朝向、zoom，返回Cartesian3位置
|
||||
export function getNewPosition(center, zoom, camera ) {
|
||||
//相机坐标的高度
|
||||
const height = zoomToHeight(zoom)
|
||||
//获取摄像机朝向方向的单位向量（长度1）
|
||||
const direction = Cesium.Cartesian3.normalize( camera.directionWC, new Cesium.Cartesian3());
|
||||
const reverseDirection = Cesium.Cartesian3.negate(direction, new Cesium.Cartesian3());//这里要取反用来计算处摄像机所处的位置
|
||||
//相机与地表焦点的坐标
|
||||
const position = Cesium.Cartesian3.fromDegrees(center[0], center[1], 200);
|
||||
//相机俯仰角
|
||||
const pitch = camera.pitch
|
||||
if(pitch>=0){
|
||||
console.log('请朝向地面');
|
||||
return false
|
||||
}
|
||||
//直线距离
|
||||
const distance = height / Math.sin(-pitch);
|
||||
// 计算移动后的位置
|
||||
const newPosition = new Cesium.Cartesian3();
|
||||
Cesium.Cartesian3.add(
|
||||
position, // 当前位置
|
||||
Cesium.Cartesian3.multiplyByScalar(
|
||||
reverseDirection, // 方向向量
|
||||
distance, // 移动距离
|
||||
new Cesium.Cartesian3() // 临时向量
|
||||
),
|
||||
newPosition // 结果位置
|
||||
);
|
||||
return newPosition
|
||||
}
|
||||
return Math.max(0, Math.min(28, Math.log2(120000000 / (height - 400) )))
|
||||
}
|
||||
|
|
@ -1,200 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import * as echarts from 'echarts';
|
||||
import './index.less';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httpget } from '@/utils/request';
|
||||
|
||||
const Maintenance = ({ year }) => {
|
||||
const chartRef = useRef(null);
|
||||
const chartInstance = useRef(null);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [selectedPieItem, setSelectedPieItem] = useState(null);
|
||||
const [startAngle, setStartAngle] = useState(90);
|
||||
const [chartData, setChartData] = useState([]);
|
||||
|
||||
// Color mapping configuration
|
||||
const colorMap = {
|
||||
'溢洪道清障': '#0090FF',
|
||||
'除草除杂': '#00FFFF',
|
||||
'设备养护': '#3355FB',
|
||||
'环境清洁': '#BCEBF7',
|
||||
'危险提示': '#00D085',
|
||||
'其他': '#1890FF'
|
||||
};
|
||||
|
||||
const defaultColors = ['#0090FF', '#00FFFF', '#3355FB', '#BCEBF7', '#00D085', '#1890FF'];
|
||||
|
||||
const getInfo = async (year) => {
|
||||
try {
|
||||
const result = await httpget(apiurl.sg.wxyh.info + year);
|
||||
if (result.code === 200 && result.data) {
|
||||
// Transform object to array format
|
||||
const transformedData = Object.entries(result.data).map(([name, value], index) => ({
|
||||
name,
|
||||
value,
|
||||
color: colorMap[name] || defaultColors[index % defaultColors.length]
|
||||
}));
|
||||
setChartData(transformedData);
|
||||
} else {
|
||||
setChartData([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setChartData([]);
|
||||
}
|
||||
};
|
||||
|
||||
const total = chartData.reduce((sum, item) => sum + item.value, 0);
|
||||
|
||||
const setSelectionByIndex = (index) => {
|
||||
if (!chartData || chartData.length === 0 || index >= chartData.length) return;
|
||||
|
||||
const item = chartData[index];
|
||||
let sumBefore = 0;
|
||||
for (let i = 0; i < index; i++) {
|
||||
sumBefore += chartData[i].value;
|
||||
}
|
||||
const offset = total > 0 ? (sumBefore + item.value / 2) / total * 360 : 0;
|
||||
const newStartAngle = 90 + offset;
|
||||
setStartAngle(newStartAngle);
|
||||
setSelectedPieItem({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
percent: total > 0 ? ((item.value / total) * 100).toFixed(0) + '%' : '0%'
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (year) {
|
||||
getInfo(year);
|
||||
}
|
||||
}, [year]);
|
||||
|
||||
useEffect(() => {
|
||||
if (chartData && chartData.length > 0) {
|
||||
setSelectionByIndex(0);
|
||||
setActiveIndex(0);
|
||||
} else {
|
||||
setSelectedPieItem(null);
|
||||
setStartAngle(90);
|
||||
}
|
||||
}, [chartData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!chartRef.current) return;
|
||||
|
||||
if (!chartInstance.current) {
|
||||
chartInstance.current = echarts.init(chartRef.current);
|
||||
chartInstance.current.on('click', (params) => {
|
||||
if (params.dataIndex !== undefined) {
|
||||
setActiveIndex(params.dataIndex);
|
||||
setSelectionByIndex(params.dataIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (chartData.length === 0) {
|
||||
chartInstance.current.clear();
|
||||
return;
|
||||
}
|
||||
|
||||
const centerName = selectedPieItem ? selectedPieItem.name : (chartData.length === 1 ? chartData[0].name : '维修养护');
|
||||
const centerValue = selectedPieItem ? selectedPieItem.value : total;
|
||||
const centerPercent = selectedPieItem ? selectedPieItem.percent : '100%';
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '维修养护-外圈',
|
||||
type: 'pie',
|
||||
radius: ['52%', '94%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: startAngle,
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{b}',
|
||||
color: '#fff',
|
||||
fontSize: 10
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
labelLine: { show: false },
|
||||
data: chartData.map(item => ({
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
itemStyle: { color: item.color }
|
||||
}))
|
||||
},
|
||||
{
|
||||
name: '维修养护-内圈',
|
||||
type: 'pie',
|
||||
radius: ['60%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: startAngle,
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `{name|${centerName}}\n{value|${centerValue}}\n{percent|${centerPercent}}`,
|
||||
rich: {
|
||||
name: { fontSize: 12, color: 'rgba(255,255,255,0.6)', lineHeight: 16 },
|
||||
value: { fontSize: 14, color: '#fff', fontWeight: 'bold', lineHeight: 20 },
|
||||
percent: { fontSize: 12, color: '#fff', lineHeight: 16 }
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: { show: true, fontSize: 14, fontWeight: 'bold' }
|
||||
},
|
||||
labelLine: { show: false },
|
||||
data: chartData.map(item => ({
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
itemStyle: { color: item.color }
|
||||
}))
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.current.setOption(option);
|
||||
|
||||
const handleResize = () => {
|
||||
chartInstance.current?.resize();
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, [activeIndex, selectedPieItem, startAngle, chartData]);
|
||||
|
||||
return (
|
||||
<div className="maintenance-container">
|
||||
<div className="chart-wrapper" ref={chartRef}></div>
|
||||
<div className="legend-wrapper">
|
||||
{chartData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`legend-item ${index === activeIndex ? 'active' : ''}`}
|
||||
onMouseEnter={() => {
|
||||
setActiveIndex(index);
|
||||
setSelectionByIndex(index);
|
||||
}}
|
||||
>
|
||||
<div className="legend-color" style={{ backgroundColor: item.color }}></div>
|
||||
<div className="legend-name">{item.name}</div>
|
||||
<div className="legend-value">{item.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Maintenance;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
.maintenance-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.chart-wrapper {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.legend-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 10px;
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&.active, &:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.legend-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.legend-value {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
import React, { useEffect, useRef,useState } from 'react';
|
||||
import * as echarts from 'echarts';
|
||||
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||
import glfwBg from '@/assets/images/business/glfw.png';
|
||||
import bhfwBg from '@/assets/images/business/bhfw.png';
|
||||
import smallCard from '@/assets/images/card/smallCard.png';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httpget } from '@/utils/request';
|
||||
import './index.less';
|
||||
|
||||
const ReservoirDemarcation = () => {
|
||||
const chartRef = useRef(null);
|
||||
const chartInstance = useRef(null);
|
||||
const [info, setInfo] = useState({
|
||||
managementScopeArea: 0,
|
||||
protectionScopeArea: 0,
|
||||
propertyCertificateArea: 0,
|
||||
totalUseArea: 0
|
||||
});
|
||||
|
||||
const getInfo = async () => {
|
||||
try {
|
||||
const result = await httpget(apiurl.sg.skhj.info);
|
||||
if (result.code === 200) {
|
||||
setInfo(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!chartRef.current) return;
|
||||
|
||||
if (!chartInstance.current) {
|
||||
chartInstance.current = echarts.init(chartRef.current);
|
||||
}
|
||||
|
||||
const total = Number(info.totalUseArea) || 0;
|
||||
const property = Number(info.propertyCertificateArea) || 0;
|
||||
const maxVal = total > 0 ? total : 1;
|
||||
const rate = total > 0 ? Math.min(Math.max(property / total, 0), 1) : 0;
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 210,
|
||||
endAngle: -30,
|
||||
min: 0,
|
||||
max: maxVal,
|
||||
splitNumber: 40,
|
||||
radius: '125%',
|
||||
center: ['50%', '65%'],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 10,
|
||||
opacity: 0,
|
||||
color: [
|
||||
[rate, '#0bbafe'],
|
||||
[1, 'rgba(255, 255, 255, 0.1)']
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
length: 12,
|
||||
distance: -12,
|
||||
lineStyle: {
|
||||
color: 'auto',
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: true,
|
||||
offsetCenter: [0, '30%'],
|
||||
fontSize: 14,
|
||||
color: '#fff'
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}万亩',
|
||||
color: '#00D8FF',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
offsetCenter: [0, '-15%']
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: property,
|
||||
name: '不动产权'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.current.setOption(option);
|
||||
|
||||
const handleResize = () => {
|
||||
chartInstance.current && chartInstance.current.resize();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, [info]);
|
||||
|
||||
// Clean up chart instance on unmount
|
||||
useEffect(() => {
|
||||
getInfo()
|
||||
return () => {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.dispose();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="reservoir-demarcation">
|
||||
{/* Section 1: Management and Protection Scope */}
|
||||
<div className="section-header">
|
||||
<div className="title-wrapper">
|
||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||
<span className="section-title">管理和保护范围</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scope-area">
|
||||
<div className="scope-card" style={{ backgroundImage: `url(${glfwBg})` }}>
|
||||
<div className="scope-content">
|
||||
<div className="value-wrapper" style={{borderBottom:"1px solid #00a0e9"}}>
|
||||
<span className="value">{info.managementScopeArea}</span>
|
||||
<span className="unit">km²</span>
|
||||
</div>
|
||||
<div className="label">管理范围</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="scope-card" style={{ backgroundImage: `url(${bhfwBg})` }}>
|
||||
<div className="scope-content">
|
||||
<div className="value-wrapper">
|
||||
<span className="value">{info.protectionScopeArea}</span>
|
||||
<span className="unit">km²</span>
|
||||
</div>
|
||||
<div className="label">保护范围</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 2: Clear Property Rights */}
|
||||
<div className="section-header">
|
||||
<div className="title-wrapper">
|
||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||
<span className="section-title">产权清晰</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="property-area">
|
||||
<div className="chart-wrapper" ref={chartRef}></div>
|
||||
<div className="info-list">
|
||||
<div className="info-item" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
<span className="label">已取得不动产权证书面积：</span>
|
||||
<span className="value">{info.propertyCertificateArea}万亩</span>
|
||||
</div>
|
||||
<div className="info-item" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
<span className="label">用地总面积：</span>
|
||||
<span className="value">{info.totalUseArea}万亩</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReservoirDemarcation;
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
.reservoir-demarcation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.scope-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.scope-card {
|
||||
width: 48%;
|
||||
height: 60px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 80px; // Make space for the icon in the bg image
|
||||
box-sizing: border-box;
|
||||
|
||||
.scope-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.value-wrapper {
|
||||
margin-bottom: 2px;
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #00D8FF;
|
||||
font-family: 'huxiaopo', sans-serif;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
color: #00D8FF;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.property-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
|
||||
.chart-wrapper {
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding-left: 10px;
|
||||
|
||||
.info-item {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: #00D8FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import React from 'react';
|
||||
import xcrIcon from '@/assets/images/business/xcr.png';
|
||||
import wrjIcon from '@/assets/images/business/wrj.png';
|
||||
import './index.less';
|
||||
|
||||
const ReservoirInspection = () => {
|
||||
// Mock data matching the design
|
||||
const data = {
|
||||
annualCount: 78,
|
||||
droneCount: 156
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="reservoir-inspection">
|
||||
<div className="inspection-item">
|
||||
<div className="icon-wrapper">
|
||||
<img src={xcrIcon} alt="年度巡查" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<div className="count-row">
|
||||
<span className="count">{data.annualCount}</span>
|
||||
<span className="unit">次</span>
|
||||
</div>
|
||||
<div className="label">年度巡查</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="inspection-item">
|
||||
<div className="icon-wrapper" style={{marginRight:30}}>
|
||||
<img src={wrjIcon} alt="无人机巡查" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<div className="count-row">
|
||||
<span className="count">{data.droneCount}</span>
|
||||
<span className="unit">次</span>
|
||||
</div>
|
||||
<div className="label">无人机巡查</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReservoirInspection;
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
.reservoir-inspection {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
.inspection-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
|
||||
.icon-wrapper {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
height: 60px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.count-row {
|
||||
.count {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #00D8FF;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
color: #00D8FF;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import React,{useEffect,useState} from 'react';
|
||||
import smallCard from '@/assets/images/card/smallCard.png';
|
||||
import barTypeIcon from '@/assets/images/business/barType.png';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httpget } from '@/utils/request';
|
||||
import './index.less';
|
||||
|
||||
const SafetyAppraisal = () => {
|
||||
const [info, setInfo] = useState({})
|
||||
const topCards = [
|
||||
{ label: '', value: '双石水库', isTitle: true },
|
||||
{ label: '', value: '赤壁市/\n官塘驿镇', isLocation: true },
|
||||
{ label: '', value: '中型', isType: true },
|
||||
];
|
||||
const getInfo = async () => {
|
||||
try {
|
||||
const result = await httpget(apiurl.sg.aqjd.info);
|
||||
if (result.code === 200) {
|
||||
setInfo(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getInfo()
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className="safety-appraisal">
|
||||
{/* Top Section: Cards */}
|
||||
<div className="top-cards">
|
||||
{topCards.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="info-card"
|
||||
style={{ backgroundImage: `url(${smallCard})` }}
|
||||
>
|
||||
<div className={`sg-card-content ${item.isTitle ? 'title-style' : ''} ${item.isType ? 'type-style' : ''}`}>
|
||||
{item.isLocation ? (
|
||||
<div className="location-text">
|
||||
<div>赤壁市/</div>
|
||||
<div>官塘驿镇</div>
|
||||
</div>
|
||||
) : (
|
||||
item.value
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom Section: Timeline */}
|
||||
<div className="timeline-section">
|
||||
<div className="timeline-line"></div>
|
||||
|
||||
<div className="timeline-item left">
|
||||
<div className="dot"></div>
|
||||
<div className="label">鉴定时间</div>
|
||||
<div className="date">{info?.identifyDate ??'-'}年</div>
|
||||
</div>
|
||||
|
||||
<div className="timeline-item center">
|
||||
<div className="icon-wrapper">
|
||||
<img src={barTypeIcon} alt="Type" />
|
||||
</div>
|
||||
<div className="label type-label">{info?.identifyType ??'-'}</div>
|
||||
</div>
|
||||
|
||||
<div className="timeline-item right">
|
||||
<div className="dot"></div>
|
||||
<div className="label">下次鉴定时间</div>
|
||||
<div className="date">{info?.nextVerifyDate ??'-'}年</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SafetyAppraisal;
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
.safety-appraisal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top-cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
margin-bottom: 15px;
|
||||
.info-card {
|
||||
width: 32%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.sg-card-content {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
&.title-style {
|
||||
font-size: 18px;
|
||||
font-family: douyu;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
&.type-style {
|
||||
font-size: 18px;
|
||||
color: #00D8FF;
|
||||
font-family: douyu;
|
||||
|
||||
}
|
||||
|
||||
.location-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-section {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 2px;
|
||||
background: #007acc;
|
||||
transform: translateY(-50%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
|
||||
&.left, &.right {
|
||||
margin-top:20px;
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #00D8FF;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 0 5px #00D8FF;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #00D8FF;
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.center {
|
||||
margin-top: -40px; // Adjust to lift the icon above the line slightly if needed, or rely on flex alignment
|
||||
.icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2px;
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.label.type-label {
|
||||
color: #00D8FF;
|
||||
font-size: 18px;
|
||||
font-family: douyu;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import * as echarts from 'echarts';
|
||||
import zglIcon from '@/assets/images/business/zgl.png';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httpget } from '@/utils/request';
|
||||
import './index.less';
|
||||
|
||||
const SafetyHazard = ({ year }) => {
|
||||
const chartRef = useRef(null);
|
||||
const chartInstance = useRef(null);
|
||||
const [info, setInfo] = useState({
|
||||
totalCount: 0,
|
||||
finishCount: 0,
|
||||
finishPercent: 0,
|
||||
months: {}
|
||||
});
|
||||
|
||||
const getInfo = async (params) => {
|
||||
try {
|
||||
const result = await httpget(apiurl.sg.aqyh.info + params);
|
||||
if (result.code === 200) {
|
||||
setInfo(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (year) {
|
||||
getInfo(year);
|
||||
}
|
||||
}, [year]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!chartRef.current) return;
|
||||
|
||||
if (!chartInstance.current) {
|
||||
chartInstance.current = echarts.init(chartRef.current);
|
||||
}
|
||||
|
||||
const monthlyData = Array.from({ length: 12 }, (_, i) => info.months?.[i + 1] || 0);
|
||||
console.log(monthlyData);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12 月'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.5)'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
interval: 0
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: '30%',
|
||||
data: monthlyData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#00D8FF' },
|
||||
{ offset: 1, color: 'rgba(0, 216, 255, 0.1)' }
|
||||
]),
|
||||
borderRadius: [2, 2, 0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.current.setOption(option);
|
||||
|
||||
const handleResize = () => {
|
||||
chartInstance.current && chartInstance.current.resize();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, [info]);
|
||||
|
||||
// Clean up chart instance on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.dispose();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="safety-hazard">
|
||||
{/* Top Section */}
|
||||
<div className="top-section">
|
||||
<div className="progress-area">
|
||||
<div className="labels">
|
||||
<div className="total-label">
|
||||
<span className="text">隐患总数</span>
|
||||
<span className="num">{info.totalCount}</span>
|
||||
</div>
|
||||
<div className="rectified-label">
|
||||
<span className="text">已整改</span>
|
||||
<span className="num">{info.finishCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-bar-bg">
|
||||
<div
|
||||
className="progress-bar-fill"
|
||||
style={{ width: `${info.totalCount > 0 ? (info.finishCount / info.totalCount) * 100 : 0}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rate-box">
|
||||
<div className="icon-wrapper">
|
||||
<img src={zglIcon} alt="Rate" />
|
||||
</div>
|
||||
<div className="rate-info">
|
||||
<div className="rate-num">
|
||||
{info.finishPercent}
|
||||
<span className="percent">%</span>
|
||||
</div>
|
||||
<div className="rate-text">整改率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart Section */}
|
||||
<div className="chart-container" ref={chartRef}></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SafetyHazard;
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
.safety-hazard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
height: 60px;
|
||||
|
||||
.progress-area {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.total-label, .rectified-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.rectified-label {
|
||||
align-items: flex-end;
|
||||
.text {
|
||||
color: #00D8FF;
|
||||
}
|
||||
.num {
|
||||
color: #00D8FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-bg {
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
background: #f59e0b; // Orange color matching the design
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rate-box {
|
||||
width: 130px;
|
||||
border: 1px solid #00a0e9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
|
||||
// Add corner markers if needed, or simple border
|
||||
|
||||
.icon-wrapper {
|
||||
width: 40px;
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.rate-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-right: 5px;
|
||||
|
||||
.rate-num {
|
||||
font-family: 'huxiaopo', sans-serif;
|
||||
font-size: 16px;
|
||||
color: #00D8FF;
|
||||
// line-height: 1;
|
||||
margin-bottom: 2px;
|
||||
|
||||
.percent {
|
||||
font-size: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.rate-text {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 0; // Important for flex child to shrink
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import React from 'react';
|
||||
import zmIcon from '@/assets/images/business/zm.png';
|
||||
import './index.less';
|
||||
|
||||
const SluiceMonitor = () => {
|
||||
// Mock data based on the UI image
|
||||
const gateData = [
|
||||
{ id: 1, name: 'XXXX闸门1', opening: 0.3, time: '12-25 09:32' },
|
||||
{ id: 2, name: 'XXXX闸门2', opening: 0.0, time: '12-25 09:32' },
|
||||
{ id: 3, name: 'XXXX闸门3', opening: 0.0, time: '12-25 09:32' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="sluice-monitor">
|
||||
{gateData.map((item) => (
|
||||
<div key={item.id} className="gate-item">
|
||||
<div className="icon-wrapper">
|
||||
<img src={zmIcon} alt="gate" />
|
||||
</div>
|
||||
<div className="gate-info">
|
||||
<span className="gate-name">{item.name}</span>
|
||||
<div className="status-wrapper">
|
||||
<span className="label">开度：</span>
|
||||
<span className="value">{item.opening.toFixed(1)}</span>
|
||||
<span className="unit">m</span>
|
||||
</div>
|
||||
<span className="time">{item.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SluiceMonitor;
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
.sluice-monitor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.gate-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
margin-right: 15px;
|
||||
img {
|
||||
width: 32px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.gate-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
.gate-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-wrapper {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin: 0 20px;
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
color: #00D8FF;
|
||||
font-family: huxiaopo;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #00D8FF;
|
||||
font-family: huxiaopo;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: rgba(255, 255, 255);
|
||||
font-size: 14px;
|
||||
min-width: 90px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
import React, { useState,useEffect } from 'react';
|
||||
import moment from 'moment';
|
||||
import YearSelect from '../../../../UI/YearSelect';
|
||||
import smallCard from '@/assets/images/card/smallCard.png';
|
||||
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httpget } from '@/utils/request';
|
||||
import './index.less';
|
||||
|
||||
const TermiteControl = () => {
|
||||
const [year, setYear] = useState(moment().format('YYYY'));
|
||||
const [info, setInfo] = useState({
|
||||
searchCount: 0,
|
||||
hasByCount: 0,
|
||||
hasByCount: 0,
|
||||
});
|
||||
|
||||
const getInfo = async (year) => {
|
||||
try {
|
||||
const result = await httpget(apiurl.sg.byjc.info+year);
|
||||
if (result.code === 200) {
|
||||
setInfo(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
const data = {
|
||||
monitorRange: 13600,
|
||||
monitorDevices: 89,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (year) {
|
||||
getInfo(year)
|
||||
}
|
||||
}, [year])
|
||||
|
||||
|
||||
return (
|
||||
<div className="termite-control">
|
||||
{/* Section 1: Termite Monitoring Devices */}
|
||||
<div className="section-header">
|
||||
<div className="title-wrapper">
|
||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||
<span className="section-title">白蚁监控装置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="monitor-grid">
|
||||
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
<div className="value-wrapper">
|
||||
<span className="value">{data.monitorRange}</span>
|
||||
<span className="unit">m²</span>
|
||||
</div>
|
||||
<div className="label">白蚁监控范围</div>
|
||||
</div>
|
||||
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
<div className="value-wrapper">
|
||||
<span className="value">{data.monitorDevices}</span>
|
||||
<span className="unit">处</span>
|
||||
</div>
|
||||
<div className="label">监控装置数量</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 2: Census and Prevention Results */}
|
||||
<div className="section-header with-action">
|
||||
<div className="title-wrapper">
|
||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||
<span className="section-title">普查及防治结果</span>
|
||||
</div>
|
||||
<YearSelect value={year} onChange={setYear} />
|
||||
</div>
|
||||
|
||||
<div className="census-grid">
|
||||
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
<div className="value-wrapper">
|
||||
<span className="value text-blue">{info.searchCount}</span>
|
||||
<span className="unit text-blue">次</span>
|
||||
</div>
|
||||
<div className="label">白蚁普查</div>
|
||||
</div>
|
||||
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
<div className="value-wrapper">
|
||||
<span className="value text-red">{info.hasByCount}</span>
|
||||
<span className="unit text-blue">处</span>
|
||||
</div>
|
||||
<div className="label">有白蚁危害</div>
|
||||
</div>
|
||||
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
<div className="value-wrapper">
|
||||
<span className="value text-green">{info.hasByCount}</span>
|
||||
<span className="unit text-green">处</span>
|
||||
</div>
|
||||
<div className="label">已处置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermiteControl;
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
.termite-control {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.with-action {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.monitor-grid {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
min-height: 0;
|
||||
justify-content: center;
|
||||
.info-card {
|
||||
width: 45%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.value-wrapper {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #00D8FF;
|
||||
}
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
color: #00D8FF;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.census-grid {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
.info-card {
|
||||
// flex: 1;
|
||||
width: 33%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
.value-wrapper {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
&.text-blue { color: #00D8FF; }
|
||||
&.text-red { color: #FF4D4F; }
|
||||
&.text-green { color: #52C41A; }
|
||||
}
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
color: #00D8FF; // Always blue
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +1,39 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import CommonCard from '../../UI/CommonCard';
|
||||
import YearSelect from '../../UI/YearSelect';
|
||||
import SafetyAppraisal from './components/SafetyAppraisal';
|
||||
import ReservoirInspection from './components/ReservoirInspection';
|
||||
import SafetyHazard from './components/SafetyHazard';
|
||||
import SluiceMonitor from './components/SluiceMonitor';
|
||||
import ReservoirDemarcation from './components/ReservoirDemarcation';
|
||||
import TermiteControl from './components/TermiteControl';
|
||||
import Maintenance from './components/Maintenance';
|
||||
import './index.less';
|
||||
|
||||
const SiGuan = () => {
|
||||
const showPanels = useSelector(s => s.runtime.showPanels);
|
||||
const [inspectionYear, setInspectionYear] = useState(moment().format('YYYY'));
|
||||
const [hazardYear, setHazardYear] = useState(moment().format('YYYY'));
|
||||
const [wxYear, setWxYear] = useState(moment().format('YYYY'));
|
||||
|
||||
return (
|
||||
<div className="siguan-view">
|
||||
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||
<div className="side-panel left">
|
||||
<CommonCard title="安全鉴定" className="panel-card card-1" >
|
||||
<SafetyAppraisal />
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard
|
||||
title="库区巡查"
|
||||
className="panel-card card-2"
|
||||
headerExtra={<YearSelect value={inspectionYear} onChange={setInspectionYear} />}
|
||||
style={{minHeight:120}}
|
||||
>
|
||||
<ReservoirInspection />
|
||||
<CommonCard title="库区巡查" className="panel-card card-2" style={{minHeight:120}}>
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard title="闸门监控" className="panel-card card-3">
|
||||
<SluiceMonitor />
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard
|
||||
title="安全隐患"
|
||||
className="panel-card card-4"
|
||||
headerExtra={<YearSelect value={hazardYear} onChange={setHazardYear} />}
|
||||
headerExtra={<YearSelect />}
|
||||
>
|
||||
<SafetyHazard year={hazardYear} />
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
</div>
|
||||
|
||||
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||
<div className="side-panel right">
|
||||
<CommonCard title="水库划界" className="panel-card card-1">
|
||||
<ReservoirDemarcation />
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard title="白蚁防治" className="panel-card card-2">
|
||||
<TermiteControl />
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard
|
||||
title="维修养护"
|
||||
className="panel-card card-3"
|
||||
headerExtra={<YearSelect value={wxYear} onChange={setWxYear} />}
|
||||
>
|
||||
<Maintenance year={wxYear} />
|
||||
<CommonCard title="维修养护" className="panel-card card-3">
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
@import "../common.less";
|
||||
|
||||
.left {
|
||||
.card-1 { flex: 1; }
|
||||
.card-2 { flex: 2; }
|
||||
.card-3 { flex: 3; }
|
||||
.card-4 { flex: 5; }
|
||||
.card-1 { flex: 6; }
|
||||
.card-2 { flex: 3; }
|
||||
.card-3 { flex: 4; }
|
||||
.card-4 { flex: 6; }
|
||||
}
|
||||
|
||||
.right {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { SearchOutlined, ReloadOutlined, DownloadOutlined, FilePdfOutlined, File
|
|||
import apiurl from '@/service/apiurl';
|
||||
import usePageTable from '@/components/crud/usePageTable';
|
||||
import { createCrudService } from '@/components/crud/_';
|
||||
import { download, exportFile } from '@/utils/tools'
|
||||
import { exportFile } from '@/utils/tools'
|
||||
import { httppost } from '@/utils/request';
|
||||
import { config } from '@/config';
|
||||
import PdfView from '@/views/Home/components/UI/PdfView';
|
||||
|
|
@ -61,7 +61,6 @@ const CycleArchive = () => {
|
|||
|
||||
const handleFileClick = (file) => {
|
||||
const fileType = file.fileName?.split('.').pop()?.toLowerCase();
|
||||
const downloadUrl = `/gunshiApp/ss/projectEvents/file/download/${file.fileId}`;
|
||||
if (fileType === 'pdf') {
|
||||
setPdfInfo({
|
||||
visible: true,
|
||||
|
|
@ -69,7 +68,8 @@ const CycleArchive = () => {
|
|||
fileId: file.fileId
|
||||
});
|
||||
} else {
|
||||
download(downloadUrl)
|
||||
// Download for non-pdf files
|
||||
window.open(config.minioIp + file.filePath, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { treeList, srcData, videoList, ysyToken } from './http'
|
|||
import VideoControler from "@/components/VideoCom/VideoControler"
|
||||
import { httppost } from "@/utils/request"
|
||||
import apiurl from "@/service/apiurl"
|
||||
import { Spin } from "antd"
|
||||
|
||||
|
||||
const VideoList = () => {
|
||||
|
|
@ -16,7 +15,6 @@ const VideoList = () => {
|
|||
const [size, setSize] = useState(1)
|
||||
const [treeListData, setTreeData] = useState([])
|
||||
const [selectList, setSelectList] = useState()
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const selectedKeys = async (list, node) => {
|
||||
console.log(node, 'node');
|
||||
|
|
@ -76,24 +74,18 @@ const VideoList = () => {
|
|||
|
||||
}
|
||||
const getTreeData = async () => {
|
||||
try {
|
||||
const res = await treeList()
|
||||
const res1 = await videoList()
|
||||
const arr = res1.data.filter(item => item.menuId).map((item, index) => {
|
||||
item.parentId = item.menuId
|
||||
item.id = 999 + index
|
||||
item.isLeaf = true
|
||||
// item.icon=<VideoCameraFilled />
|
||||
return item
|
||||
})
|
||||
const arr1 = [...arr, ...res.data]
|
||||
console.log("before", arr1);
|
||||
setTreeData(buildTree(arr1))
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
const res = await treeList()
|
||||
const res1 = await videoList()
|
||||
const arr = res1.data.filter(item => item.menuId).map((item, index) => {
|
||||
item.parentId = item.menuId
|
||||
item.id = 999 + index
|
||||
item.isLeaf = true
|
||||
// item.icon=<VideoCameraFilled />
|
||||
return item
|
||||
})
|
||||
const arr1 = [...arr, ...res.data]
|
||||
console.log("before", arr1);
|
||||
setTreeData(buildTree(arr1))
|
||||
}
|
||||
function buildTree(data, parentId = "0") {
|
||||
const tree = [];
|
||||
|
|
@ -145,28 +137,20 @@ const VideoList = () => {
|
|||
}, [])
|
||||
return (
|
||||
<div className='flex videoList'>
|
||||
{loading ? (
|
||||
<div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Spin tip="加载中..." />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={['treeRight', (selectList && selectList.type == 1) ? 'ptz-visible' : ''].join(' ')}>
|
||||
<TreeData size={size} selectedKeys={selectedKeys} treeListData={treeListData} videoArr={videoArr} />
|
||||
{
|
||||
selectList && selectList.type == 1 ?
|
||||
<div style={{ position: "absolute", bottom: 0, left: 0 }}>
|
||||
<VideoControler
|
||||
selectItem={selectList}
|
||||
onOperation={onOperation}
|
||||
/>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
<div className='treeLeft'><SplitScreen count={count} videoArr={videoArr} clickIndex={clickIndex} getType={getType} /></div>
|
||||
</>
|
||||
)}
|
||||
<div className={['treeRight', (selectList && selectList.type == 1) ? 'ptz-visible' : ''].join(' ')}>
|
||||
<TreeData size={size} selectedKeys={selectedKeys} treeListData={treeListData} videoArr={videoArr} />
|
||||
{
|
||||
selectList && selectList.type == 1 ?
|
||||
<div style={{ position: "absolute", bottom: 0, left: 0 }}>
|
||||
<VideoControler
|
||||
selectItem={selectList}
|
||||
onOperation={onOperation}
|
||||
/>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
<div className='treeLeft'><SplitScreen count={count} videoArr={videoArr} clickIndex={clickIndex} getType={getType} /></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import CommonCard from '../../UI/CommonCard';
|
||||
import ThreeDots from '../../UI/ThreeDots';
|
||||
import SupervisionCoverage from './components/SupervisionCoverage';
|
||||
|
|
@ -18,7 +17,6 @@ import './index.less';
|
|||
|
||||
|
||||
const SiQuan = () => {
|
||||
const showPanels = useSelector(s => s.runtime.showPanels);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [modalType, setModalType] = useState('monitor'); // 'monitor' | 'cycle' | 'allweather'
|
||||
const [infos, setInfos] = useState({});
|
||||
|
|
@ -79,7 +77,7 @@ const SiQuan = () => {
|
|||
|
||||
return (
|
||||
<div className="siquan-view">
|
||||
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||
<div className="side-panel left">
|
||||
<div className="left-part">
|
||||
<CommonCard title="监管全覆盖" className="panel-card card-1">
|
||||
<SupervisionCoverage data={infos} />
|
||||
|
|
@ -93,7 +91,7 @@ const SiQuan = () => {
|
|||
</CommonCard>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||
<div className="side-panel right">
|
||||
<div className="right-part">
|
||||
<CommonCard
|
||||
title="管控全天候"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.siquan-view {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
@import "../common.less";
|
||||
|
|
|
|||
|
|
@ -1,186 +0,0 @@
|
|||
import React, { useState,useEffect } from 'react';
|
||||
import moment from 'moment';
|
||||
import { Image } from 'antd';
|
||||
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||
import smallCard from '@/assets/images/card/smallCard.png';
|
||||
import resperson from '@/assets/images/card/resperson.png';
|
||||
import { download } from '@/utils/tools';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httpget } from '@/utils/request';
|
||||
import PdfView from '@/views/Home/components/UI/PdfView';
|
||||
import './index.less';
|
||||
|
||||
const PlanSection = () => {
|
||||
const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
|
||||
const [imagePreview, setImagePreview] = useState({ visible: false, src: '' });
|
||||
const [rotaInfo, setRotaInfo] = useState({});
|
||||
const [docList, setDocList] = useState([]);
|
||||
// 获取值班信息
|
||||
const getRotaInfo = async () => {
|
||||
try {
|
||||
const result = await httpget(apiurl.sy.ya.rota);
|
||||
if (result.code === 200) {
|
||||
setRotaInfo(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取预案列表
|
||||
const getDocInfo = async () => {
|
||||
try {
|
||||
const result = await httpget(apiurl.sy.ya.document);
|
||||
if (result.code === 200) {
|
||||
setDocList(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const getDutyList = () => {
|
||||
const todayList = rotaInfo.today || [];
|
||||
const nextDayList = rotaInfo.nextDay || [];
|
||||
|
||||
const formatDuty = (list, defaultDate) => {
|
||||
const dateStr = list.length > 0 ? list[0].rotaDate : defaultDate;
|
||||
const date = moment(dateStr).format('MM-DD');
|
||||
const leader = list.find(item => item.rotaType === 1)?.userName || '无';
|
||||
const staff = list.filter(item => item.rotaType === 2).map(i => i.userName).join('、') || '无';
|
||||
return { date, leader, staff };
|
||||
};
|
||||
|
||||
return [
|
||||
formatDuty(todayList, moment().format('YYYY-MM-DD')),
|
||||
formatDuty(nextDayList, moment().add(1, 'days').format('YYYY-MM-DD'))
|
||||
];
|
||||
};
|
||||
|
||||
const dutyData = getDutyList();
|
||||
|
||||
const handlePreview = (item) => {
|
||||
const file = item?.files?.[0];
|
||||
if (!file || !item.fileName) return;
|
||||
const fileName = file.fileName;
|
||||
const fileId = file.fileId;
|
||||
const extension = fileName.split('.').pop().toLowerCase();
|
||||
const downloadUrl = `/gunshiApp/ss/resPlanB/file/download/${fileId}`;
|
||||
if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) {
|
||||
setImagePreview({
|
||||
visible: true,
|
||||
src: downloadUrl
|
||||
});
|
||||
} else if (extension === 'pdf') {
|
||||
setPdfInfo({
|
||||
visible: true,
|
||||
title: fileName,
|
||||
fileId: fileId
|
||||
});
|
||||
} else {
|
||||
download(downloadUrl)
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getRotaInfo()
|
||||
getDocInfo()
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className="plan-section">
|
||||
{/* Section 1: Duty Info */}
|
||||
<div className="section-header">
|
||||
<div className="title-wrapper">
|
||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||
<span className="section-title">值班信息</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="duty-info">
|
||||
{dutyData.map((item, index) => (
|
||||
<div key={index} className="duty-card">
|
||||
<div className="date-box" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
{item.date}
|
||||
</div>
|
||||
<div className="staff-info">
|
||||
<div className="staff-item">
|
||||
<img src={resperson} alt="leader" className="avatar" />
|
||||
<div className="info-text">
|
||||
<span className="role">值班领导</span>
|
||||
<span className="name">{item.leader}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="staff-item">
|
||||
<img src={resperson} alt="staff" className="avatar" />
|
||||
<div className="info-text">
|
||||
<span className="role">值班人员</span>
|
||||
<span className="name">{item.staff}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Section 2: Scheme Materials */}
|
||||
<div className="section-header">
|
||||
<div className="title-wrapper">
|
||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||
<span className="section-title">方案资料</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scheme-list">
|
||||
{docList.map((item, index) => {
|
||||
const isPlan = item.type === 1;
|
||||
const typeText = isPlan ? '防汛预案' : '调度规程';
|
||||
const colorClass = isPlan ? 'orange' : 'blue';
|
||||
|
||||
return (
|
||||
<div key={item.id || index} className="scheme-item">
|
||||
<div className={`tag ${colorClass}`}>
|
||||
{typeText}
|
||||
</div>
|
||||
<div
|
||||
className="doc-name"
|
||||
onClick={() => handlePreview(item)}
|
||||
title={item.planName}
|
||||
>
|
||||
{item.planName}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* PDF Viewer */}
|
||||
{pdfInfo.visible && (
|
||||
<PdfView
|
||||
visible={pdfInfo.visible}
|
||||
onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
|
||||
title={pdfInfo.title}
|
||||
fileId={pdfInfo.fileId}
|
||||
url="/gunshiApp/ss/resPlanB/file/download/"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Image Preview */}
|
||||
<div style={{ display: 'none' }}>
|
||||
<Image
|
||||
src={imagePreview.src}
|
||||
preview={{
|
||||
visible: imagePreview.visible,
|
||||
src: imagePreview.src,
|
||||
onVisibleChange: (value) => {
|
||||
setImagePreview({ ...imagePreview, visible: value });
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlanSection;
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
.plan-section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow-icon {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.duty-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.duty-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 48%;
|
||||
|
||||
.date-box {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
// font-weight: bold;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.staff-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 5px;
|
||||
// height: 80px;
|
||||
|
||||
.staff-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.role {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #00eaff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scheme-list {
|
||||
overflow-y: auto;
|
||||
max-height: 120px;
|
||||
.scheme-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.tag {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.blue {
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background: #fa8c16;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #00eaff;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import selectedBg from '@/assets/images/modal/selected.png';
|
||||
import skbg from '@/assets/images/card/skbg.png';
|
||||
import gth from '@/assets/images/card/gth.png';
|
||||
import syl from '@/assets/images/card/syl.png';
|
||||
import wy from '@/assets/images/card/wy.png';
|
||||
import './index.less';
|
||||
|
||||
const WarningSection = ({ type = 'monitor' }) => {
|
||||
const [activeTab, setActiveTab] = useState('water'); // 'water' or 'safety' for monitor; 'flood' or 'weather' for forecast
|
||||
|
||||
// Mock Data
|
||||
const waterWarnings = [
|
||||
{
|
||||
id: 1,
|
||||
name: '双石水库',
|
||||
limitLevel: '108.89',
|
||||
currentLevel: '109.09',
|
||||
exceedance: '0.20',
|
||||
time: '2025-10-28 09:00:00'
|
||||
}
|
||||
];
|
||||
|
||||
const safetyMonitorItems = [
|
||||
{ label: '渗压监测', value: 2, icon: syl },
|
||||
{ label: '渗流监测', value: 1, icon: syl },
|
||||
{ label: '位移监测', value: 0, icon: wy }
|
||||
];
|
||||
|
||||
const floodWarnings = [
|
||||
{
|
||||
id: 1,
|
||||
message: '根据上游流量站实测和产汇流预测结果，未来24小时预计总入库564.2万m³，平均入库流量65.2m³/s，达到橙色预警级别。',
|
||||
time: '2025-10-28 08:10:00'
|
||||
}
|
||||
];
|
||||
|
||||
const weatherWarnings = [
|
||||
{
|
||||
id: 1,
|
||||
title: '赤壁市气象台发布暴雨红色预警[Ⅰ级/特别...',
|
||||
time: '2025-07-28 06:35:30',
|
||||
content: '赤壁市2025年08月10日07时33分08秒发布暴雨红色预警信号：过去3小时最大降水出现在XXXXX为71毫米。受强降雨云团持续影响，预计未来3小时，上述地区及周边乡镇仍将有50-80毫米的降雨，累计雨量可达150毫米以上，局地阵风7-9级。城乡积涝、山区山洪、地质灾害、中小河流洪水风险极高，请特别加强防范。'
|
||||
}
|
||||
];
|
||||
|
||||
const renderContent = () => {
|
||||
if (type === 'monitor') {
|
||||
if (activeTab === 'water') {
|
||||
return (
|
||||
<div className="warning-list">
|
||||
{waterWarnings.map((item) => (
|
||||
<div key={item.id} className="warning-item">
|
||||
<div className="item-header">
|
||||
<img src={gth} alt="warning" className="warning-icon" />
|
||||
<div className="item-title" style={{ backgroundImage: `url(${skbg})` }}>{item.name}</div>
|
||||
</div>
|
||||
<div className="item-content">
|
||||
<p>水库汛限水位 {item.limitLevel} m。</p>
|
||||
<p>实时监测水位 {item.currentLevel} m，超出汛限水位 <span className="highlight"> {item.exceedance} m</span></p>
|
||||
<div className="item-time">{item.time}</div>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="safety-monitor-view">
|
||||
{safetyMonitorItems.map((item, index) => (
|
||||
<div key={index} className="monitor-item">
|
||||
<div className="monitor-value" style={{ color: item.value > 0 ? '#ff4d4f' : '#fff' }}>{item.value}</div>
|
||||
<img src={item.icon} alt={item.label} className="monitor-icon" />
|
||||
<div className="monitor-label">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// Forecast Warning
|
||||
if (activeTab === 'flood') {
|
||||
return (
|
||||
<div className="warning-list">
|
||||
{floodWarnings.map(item => (
|
||||
<div key={item.id} className="warning-item">
|
||||
<div className="item-content full-width">
|
||||
<div className="warning-text-wrapper">
|
||||
<img src={gth} alt="warning" className="warning-icon-inline" />
|
||||
<span className="warning-text">{item.message}</span>
|
||||
</div>
|
||||
<div className="item-time" style={{marginLeft:25,marginTop:0}}>预报时间：{item.time}</div>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div className="warning-list">
|
||||
{weatherWarnings.map(item => (
|
||||
<div key={item.id} className="warning-item">
|
||||
<div className="item-header weather-header">
|
||||
<img src={gth} alt="rainstorm" className="weather-icon" />
|
||||
<div className="item-title" title={item.title} style={{ backgroundImage: `url(${skbg})`,paddingLeft:38 }}>{item.title}</div>
|
||||
</div>
|
||||
<div className="item-time weather-time">{item.time}</div>
|
||||
<div className="item-content weather-content">
|
||||
{item.content}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getTabs = () => {
|
||||
if (type === 'monitor') {
|
||||
return [
|
||||
{ key: 'water', label: `水库水情 (${waterWarnings.length})` },
|
||||
{ key: 'safety', label: `安全监测 (${safetyMonitorItems.reduce((acc, cur) => acc + cur.value, 0)})` } // Sum of values or just count of items? Design shows (3) which matches items count 3. Let's use 3.
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
{ key: 'flood', label: `洪水预报 (${floodWarnings.length})` },
|
||||
{ key: 'weather', label: `气象预报 (${weatherWarnings.length})` }
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
// Reset active tab when type changes
|
||||
React.useEffect(() => {
|
||||
setActiveTab(type === 'monitor' ? 'water' : 'flood');
|
||||
}, [type]);
|
||||
|
||||
const tabs = getTabs();
|
||||
|
||||
return (
|
||||
<div className="warning-section">
|
||||
{/* Tabs */}
|
||||
<div className="tabs-container">
|
||||
{tabs.map(tab => (
|
||||
<div
|
||||
key={tab.key}
|
||||
className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
style={activeTab === tab.key ? { backgroundImage: `url(${selectedBg})` } : {}}
|
||||
>
|
||||
{tab.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{renderContent()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WarningSection;
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
.warning-section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 3px 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
transition: all 0.3s;
|
||||
// margin: 0 5px;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #00a0e9;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px;
|
||||
max-height: 180px;
|
||||
|
||||
.warning-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.warning-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
width: 180px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
padding: 2px 20px 2px 20px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.weather-header {
|
||||
.item-title {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
padding-left: 34px; /* Align with title (icon width + margin) */
|
||||
|
||||
&.full-width {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.weather-content {
|
||||
padding-left: 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.5;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.warning-text-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.warning-icon-inline {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.5;
|
||||
|
||||
.highlight {
|
||||
color: #ff4d4f; /* Red for warning values */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.item-time {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255);
|
||||
}
|
||||
|
||||
.weather-time {
|
||||
padding-left: 50px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-top: 10px;
|
||||
height: 1px;
|
||||
background: repeating-linear-gradient(to right, rgba(0, 160, 233, 0.5) 0, rgba(0, 160, 233, 0.5) 5px, transparent 5px, transparent 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safety-monitor-view {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 20px 10px;
|
||||
height: 100%;
|
||||
|
||||
.monitor-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.monitor-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.monitor-icon {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
margin-bottom: 10px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.monitor-label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,256 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import selectedBg from '@/assets/images/modal/selected.png';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httpget } from '@/utils/request';
|
||||
import CommonModal from '@/views/Home/components/UI/CommonModal';
|
||||
import RightPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/RightPanel';
|
||||
import ReservoirPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel';
|
||||
import FlowPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel';
|
||||
import './index.less';
|
||||
|
||||
const WaterRainSection = () => {
|
||||
const [activeTab, setActiveTab] = useState('rain');
|
||||
const [dataList, setDataList] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Detail Modal State
|
||||
const [detailVisible, setDetailVisible] = useState(false);
|
||||
const [selectedItem, setSelectedItem] = useState(null);
|
||||
|
||||
const tabs = [
|
||||
{ key: 'rain', label: '实时雨情' },
|
||||
{ key: 'reservoir', label: '实时水库水情' },
|
||||
{ key: 'flow', label: '出入库流量' }
|
||||
];
|
||||
|
||||
// Fetch Data Functions
|
||||
const getRainList = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await httpget(apiurl.sy.sssyq.reservoir);
|
||||
if (result.code === 200) {
|
||||
setDataList(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getReservoirList = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await httpget(apiurl.sy.sssyq.rain);
|
||||
if (result.code === 200) {
|
||||
setDataList(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getFlowList = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await httpget(apiurl.sy.sssyq.flow);
|
||||
if (result.code === 200) {
|
||||
setDataList(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setDataList([]);
|
||||
if (activeTab === 'rain') {
|
||||
getRainList();
|
||||
} else if (activeTab === 'reservoir') {
|
||||
getReservoirList();
|
||||
} else if (activeTab === 'flow') {
|
||||
getFlowList();
|
||||
}
|
||||
}, [activeTab]);
|
||||
|
||||
// Columns Definitions
|
||||
const rainColumns = [
|
||||
{
|
||||
title: '站点名称',
|
||||
dataIndex: 'stnm',
|
||||
key: 'stnm',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '今日',
|
||||
dataIndex: 'todayDrp',
|
||||
key: 'todayDrp',
|
||||
align: 'center',
|
||||
render: (text) => text ?? '-'
|
||||
},
|
||||
{
|
||||
title: '昨日',
|
||||
dataIndex: 'yesterdayDrp',
|
||||
key: 'yesterdayDrp',
|
||||
align: 'center',
|
||||
render: (text) => text ?? '-'
|
||||
},
|
||||
{
|
||||
title: '24h',
|
||||
dataIndex: 'drp24',
|
||||
key: 'drp24',
|
||||
align: 'center',
|
||||
render: (text) => text ?? '-'
|
||||
},
|
||||
{
|
||||
title: '48h',
|
||||
dataIndex: 'drp48', // Assuming API has this, otherwise mock/calc
|
||||
key: 'drp48',
|
||||
align: 'center',
|
||||
render: (text) => text ?? '-'
|
||||
},
|
||||
{
|
||||
title: '72h',
|
||||
dataIndex: 'drp72', // Assuming API has this
|
||||
key: 'drp72',
|
||||
align: 'center',
|
||||
render: (text) => text ?? '-'
|
||||
}
|
||||
];
|
||||
|
||||
const reservoirColumns = [
|
||||
{
|
||||
title: '站点名称',
|
||||
dataIndex: 'stnm',
|
||||
key: 'stnm',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '实时水位(m)',
|
||||
dataIndex: 'rz',
|
||||
key: 'rz',
|
||||
align: 'center',
|
||||
render: (text) => text ?? '-'
|
||||
},
|
||||
{
|
||||
title: '监测时间',
|
||||
dataIndex: 'tm',
|
||||
key: 'tm',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
render: (text) => text ? text.substring(5, 16) : '-' // Format: MM-DD HH:mm
|
||||
}
|
||||
];
|
||||
|
||||
const flowColumns = [
|
||||
{
|
||||
title: '站点名称',
|
||||
dataIndex: 'stnm',
|
||||
key: 'stnm',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '实时流量(m³/s)',
|
||||
dataIndex: 'q',
|
||||
key: 'q',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '监测时间',
|
||||
dataIndex: 'tm',
|
||||
key: 'tm',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
render: (text) => text ? text.substring(5, 16) : '-' // Format: MM-DD HH:mm
|
||||
}
|
||||
];
|
||||
|
||||
const getColumns = () => {
|
||||
switch (activeTab) {
|
||||
case 'rain': return rainColumns;
|
||||
case 'reservoir': return reservoirColumns;
|
||||
case 'flow': return flowColumns;
|
||||
default: return [];
|
||||
}
|
||||
};
|
||||
|
||||
const handleRowClick = (record) => {
|
||||
setSelectedItem(record);
|
||||
setDetailVisible(true);
|
||||
};
|
||||
|
||||
const renderModalContent = () => {
|
||||
if (!selectedItem) return null;
|
||||
|
||||
if (activeTab === 'rain') {
|
||||
return <RightPanel stcd={selectedItem.stcd} cleanMode={true} />;
|
||||
} else if (activeTab === 'reservoir') {
|
||||
return <ReservoirPanel stcd={selectedItem.stcd} cleanMode={true} />;
|
||||
} else if (activeTab === 'flow') {
|
||||
return <FlowPanel stcd={selectedItem.stcd} cleanMode={true} />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const getModalTitle = () => {
|
||||
if(activeTab === 'rain') return selectedItem?.stnm || '雨情详情';
|
||||
if(activeTab === 'reservoir') return selectedItem?.stnm || '水库详情';
|
||||
if(activeTab === 'flow') return selectedItem?.stnm || '流量详情';
|
||||
return '详情';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="water-rain-section">
|
||||
<div className="tabs-container">
|
||||
{tabs.map(tab => (
|
||||
<div
|
||||
key={tab.key}
|
||||
className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
style={activeTab === tab.key ? { backgroundImage: `url(${selectedBg})` } : {}}
|
||||
>
|
||||
{tab.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="content-list">
|
||||
{activeTab === 'rain' && <div className="unit-label">单位：mm</div>}
|
||||
<Table
|
||||
columns={getColumns()}
|
||||
dataSource={dataList}
|
||||
pagination={false}
|
||||
size="small"
|
||||
rowKey="stcd"
|
||||
loading={loading}
|
||||
scroll={{ y: 200 }}
|
||||
onRow={(record) => ({
|
||||
onClick: () => handleRowClick(record)
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CommonModal
|
||||
title={getModalTitle()}
|
||||
visible={detailVisible}
|
||||
onClose={() => setDetailVisible(false)}
|
||||
width={"80%"}
|
||||
>
|
||||
{renderModalContent()}
|
||||
</CommonModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WaterRainSection;
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
.water-rain-section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 3px 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
transition: all 0.3s;
|
||||
margin: 0 5px;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #00a0e9;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 5px;
|
||||
|
||||
// Scrollbar styling
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 160, 233, 0.5);
|
||||
border-radius: 2px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.unit-label {
|
||||
text-align: right;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.ant-table-wrapper {
|
||||
.ant-table {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: rgba(0, 70, 110, 0.6);
|
||||
color: #fff;
|
||||
border-bottom: none;
|
||||
padding: 8px 4px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
padding: 8px 4px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: rgba(0, 160, 233, 0.1) !important;
|
||||
}
|
||||
|
||||
.ant-empty-normal {
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,99 +1,56 @@
|
|||
import React,{useState} from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import React from 'react';
|
||||
import CommonCard from '../../UI/CommonCard';
|
||||
import ThreeDots from '../../UI/ThreeDots';
|
||||
import CommonModal from '../../UI/CommonModal';
|
||||
import WarningSection from './components/WarningSection';
|
||||
import WaterRainSection from './components/WaterRainSection';
|
||||
import PlanSection from './components/PlanSection';
|
||||
import AllWeatherModal from '../SiQuan/components/ModalComponents/AllWeatherModal';
|
||||
import './index.less';
|
||||
|
||||
|
||||
const WarningToggles = ({ activeType, onToggle }) => {
|
||||
return (
|
||||
<div className="warning-toggles">
|
||||
<div
|
||||
className={`toggle-item ${activeType === 'monitor' ? 'active' : ''}`}
|
||||
onClick={() => onToggle('monitor')}
|
||||
>
|
||||
<span>监测预警</span>
|
||||
<span className="badge">4</span>
|
||||
</div>
|
||||
<div
|
||||
className={`toggle-item ${activeType === 'forecast' ? 'active' : ''}`}
|
||||
onClick={() => onToggle('forecast')}
|
||||
>
|
||||
<span>预报预警</span>
|
||||
<span className="badge bg-red">2</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
const WarningToggles = () => {
|
||||
return (
|
||||
<div className="warning-toggles">
|
||||
<div className="toggle-item active">
|
||||
<span>监测预警</span>
|
||||
<span className="badge">4</span>
|
||||
</div>
|
||||
<div className="toggle-item">
|
||||
<span>预报预警</span>
|
||||
<span className="badge bg-red">2</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const SiYu = () => {
|
||||
const showPanels = useSelector(s => s.runtime.showPanels);
|
||||
const [warningType, setWarningType] = useState('monitor');
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('rain');
|
||||
|
||||
const tabsAllWeather = [
|
||||
{ label: '雨情监测', value: 'rain' },
|
||||
{ label: '水库水情', value: 'reservoir' },
|
||||
{ label: '出入库流量', value: 'flow' },
|
||||
{ label: '安全监测', value: 'safety' },
|
||||
];
|
||||
|
||||
const handleOpenModal = () => {
|
||||
setActiveTab('rain');
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="siyu-view">
|
||||
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||
<CommonCard title="预报" className="panel-card card-1">
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard title="预演" className="panel-card card-2">
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
</div>
|
||||
|
||||
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||
<CommonCard
|
||||
title="预警"
|
||||
className="panel-card card-1"
|
||||
headerExtra={<WarningToggles activeType={warningType} onToggle={setWarningType} />}
|
||||
>
|
||||
<WarningSection type={warningType} />
|
||||
</CommonCard>
|
||||
<CommonCard
|
||||
title="实时水雨情"
|
||||
className="panel-card card-2"
|
||||
headerExtra={<ThreeDots onClick={handleOpenModal} />}
|
||||
>
|
||||
<WaterRainSection />
|
||||
</CommonCard>
|
||||
|
||||
<CommonCard title="预案" className="panel-card card-3">
|
||||
<PlanSection />
|
||||
</CommonCard>
|
||||
</div>
|
||||
|
||||
<CommonModal
|
||||
visible={modalVisible}
|
||||
onClose={() => setModalVisible(false)}
|
||||
title="实时水雨情"
|
||||
tabs={tabsAllWeather}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
width={'90%'}
|
||||
>
|
||||
<div style={{ color: '#fff', height: '100%' }}>
|
||||
<AllWeatherModal active={activeTab} />
|
||||
<div className="side-panel left">
|
||||
<CommonCard title="预报" className="panel-card card-1">
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard title="预演" className="panel-card card-2">
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
</div>
|
||||
|
||||
<div className="side-panel right">
|
||||
<CommonCard
|
||||
title="预警"
|
||||
className="panel-card card-1"
|
||||
headerExtra={<WarningToggles />}
|
||||
>
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard
|
||||
title="实时水雨情"
|
||||
className="panel-card card-2"
|
||||
headerExtra={<ThreeDots onClick={() => console.log('实时水雨情 clicked')} />}
|
||||
>
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
|
||||
<CommonCard title="预案" className="panel-card card-3">
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
</div>
|
||||
</CommonModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,44 +11,7 @@
|
|||
}
|
||||
|
||||
.right {
|
||||
.card-1 {
|
||||
flex: 1;
|
||||
|
||||
.warning-toggles {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.toggle-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 15px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255,0.7);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #00a0e9;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
background: #ff4d4f; /* Default red */
|
||||
border-radius: 7px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
padding: 0 4px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-1 { flex: 1; }
|
||||
.card-2 { flex: 1; }
|
||||
.card-3 { flex: 1; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,212 +0,0 @@
|
|||
import React, { useState,useEffect } from 'react';
|
||||
import { Image } from 'antd';
|
||||
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||
import selectedBg from '@/assets/images/modal/selected.png';
|
||||
import resperson from '@/assets/images/card/resperson.png';
|
||||
import smallCard from '@/assets/images/card/smallCard.png';
|
||||
import qys from '@/assets/images/business/qys.png';
|
||||
import PdfView from '@/views/Home/components/UI/PdfView';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httpget } from '@/utils/request';
|
||||
import { download } from '@/utils/tools';
|
||||
import './index.less';
|
||||
|
||||
const ImplementResponsibility = () => {
|
||||
const types = {
|
||||
1:"行政责任人",
|
||||
2:"主管部门责任人",
|
||||
3:"管理单位责任人",
|
||||
4:"巡查责任人",
|
||||
5:"技术责任人",
|
||||
}
|
||||
const [activeTab, setActiveTab] = useState('dam'); // 'dam' or 'flood'
|
||||
const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
|
||||
const [imagePreview, setImagePreview] = useState({ visible: false, src: '' });
|
||||
const [respData, setRespData] = useState([])
|
||||
const [floodData, setFloodData] = useState([])
|
||||
const [trainData, setTrainData] = useState({})
|
||||
const [trainFileData, setTrainFileData] = useState({})
|
||||
|
||||
// 获取大坝安全责任人
|
||||
const getRespData = async () => {
|
||||
try {
|
||||
const { code, data } = await httpget(apiurl.sz.zrz.respPerson)
|
||||
if (code == 200 && data.length > 0) {
|
||||
const list = data.map(item => ({name:item.name,phone:item.contactInfo,role:types[item.type]}))
|
||||
setRespData(list)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
// 获取防汛安全责任人
|
||||
const getFloodData = async () => {
|
||||
try {
|
||||
const { code, data } = await httpget(apiurl.sz.zrz.floodPerson)
|
||||
if (code == 200 && data.length > 0) {
|
||||
const list = data.map(item => ({name:item.name,phone:item.contactInfo,role:types[item.type]}))
|
||||
setFloodData(list)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取岗位培训
|
||||
const getTrainData = async () => {
|
||||
try {
|
||||
const { code, data } = await httpget(apiurl.sz.zrz.train)
|
||||
if (code == 200) {
|
||||
setTrainData(data)
|
||||
setTrainFileData(data?.latestPersonnelPlan?.files[0])
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
const {trainingCount,hasTraining,hasNoTraining,totalTraining,latestPersonnelPlan} = trainData||{}
|
||||
const trainingStats = [
|
||||
{ label: '培训计划', value: trainingCount??'-' },
|
||||
{ label: '已开展', value: hasTraining??'-' },
|
||||
{ label: '未开展', value: hasNoTraining??'-' },
|
||||
{ label: '参训总人次', value: totalTraining??'-' }
|
||||
];
|
||||
|
||||
const handleTrainingClick = () => {
|
||||
if (!trainFileData || !trainFileData.fileName) return;
|
||||
|
||||
const fileName = trainFileData.fileName;
|
||||
const fileId = trainFileData.fileId;
|
||||
const extension = fileName.split('.').pop().toLowerCase();
|
||||
const downloadUrl = `/gunshiApp/ss/personnelPlan/file/download/${fileId}`;
|
||||
|
||||
if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) {
|
||||
setImagePreview({
|
||||
visible: true,
|
||||
src: downloadUrl
|
||||
});
|
||||
} else if (extension === 'pdf') {
|
||||
setPdfInfo({
|
||||
visible: true,
|
||||
title: fileName,
|
||||
fileId: fileId
|
||||
});
|
||||
} else {
|
||||
download(downloadUrl)
|
||||
// window.location.href = downloadUrl;
|
||||
}
|
||||
};
|
||||
|
||||
const currentPersonList = activeTab === 'dam' ? respData : floodData;
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'dam') {
|
||||
getRespData()
|
||||
} else {
|
||||
getFloodData()
|
||||
}
|
||||
}, [activeTab])
|
||||
|
||||
useEffect(() => {
|
||||
getTrainData()
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className="implement-responsibility">
|
||||
{/* Top Tabs */}
|
||||
<div className="tabs-container">
|
||||
<div
|
||||
className={`tab-item ${activeTab === 'dam' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('dam')}
|
||||
style={activeTab === 'dam' ? { backgroundImage: `url(${selectedBg})` } : {}}
|
||||
>
|
||||
大坝安全责任人
|
||||
</div>
|
||||
<div
|
||||
className={`tab-item ${activeTab === 'flood' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('flood')}
|
||||
style={activeTab === 'flood' ? { backgroundImage: `url(${selectedBg})` } : {}}
|
||||
>
|
||||
防汛 “三个责任人”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Person List */}
|
||||
<div className="person-list">
|
||||
{currentPersonList.map((person, index) => (
|
||||
<div key={index} className="person-item">
|
||||
<img src={resperson} alt="avatar" className="avatar" />
|
||||
<span className="name">{person.name}</span>
|
||||
<span className="phone">{person.phone}</span>
|
||||
<div
|
||||
className="role-label"
|
||||
style={{ backgroundImage: `url(${smallCard})` }}
|
||||
title={person.role}
|
||||
>
|
||||
{person.role}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Job Training Section */}
|
||||
<div className="section-header">
|
||||
<div className="title-wrapper">
|
||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||
<span>岗位培训</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Training Stats */}
|
||||
<div className="training-stats">
|
||||
{trainingStats.map((stat, index) => (
|
||||
<div key={index} className="stat-item">
|
||||
<span className="stat-value">{stat.value}</span>
|
||||
<img src={qys} alt="icon" className="stat-icon" />
|
||||
<span className="stat-label">{stat.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Latest Training Content */}
|
||||
<div className="latest-training" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||
<span className="label">最新培训内容:</span>
|
||||
<div
|
||||
className="value-box"
|
||||
onClick={handleTrainingClick}
|
||||
title={trainFileData.fileName?.replace(/\.[^/.]+$/, '')}
|
||||
>
|
||||
{trainFileData.fileName?.replace(/\.[^/.]+$/, '')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PDF Viewer */}
|
||||
{pdfInfo.visible && (
|
||||
<PdfView
|
||||
visible={pdfInfo.visible}
|
||||
onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
|
||||
title={pdfInfo.title}
|
||||
fileId={pdfInfo.fileId}
|
||||
url="/gunshiApp/ss/personnelPlan/file/download/"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Image Preview */}
|
||||
<div style={{ display: 'none' }}>
|
||||
<Image
|
||||
src={imagePreview.src}
|
||||
preview={{
|
||||
visible: imagePreview.visible,
|
||||
src: imagePreview.src,
|
||||
onVisibleChange: (value) => {
|
||||
setImagePreview({ ...imagePreview, visible: value });
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImplementResponsibility;
|
||||
|
|
@ -1,173 +0,0 @@
|
|||
.implement-responsibility {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 3px 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #00a0e9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.person-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.person-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 30%;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 45px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.role-label {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow-icon {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.training-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
color: #00eaff;
|
||||
font-weight: bold;
|
||||
margin-bottom: -5px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.latest-training {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
margin-top: auto;
|
||||
margin-bottom: 10px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value-box {
|
||||
flex: 1;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
color: #00eaff;
|
||||
font-size: 14px;
|
||||
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,369 +0,0 @@
|
|||
import React, { useState,useEffect } from 'react';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||
import selectedBg from '@/assets/images/modal/selected.png';
|
||||
import YearSelect from '@/views/Home/components/UI/YearSelect';
|
||||
import PdfView from '@/views/Home/components/UI/PdfView';
|
||||
import { FileTextOutlined } from '@ant-design/icons';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import { httppost, httpget } from '@/utils/request';
|
||||
import { Empty } from 'antd';
|
||||
import './index.less';
|
||||
import moment from 'moment';
|
||||
|
||||
const StrengthenRuleOfLaw = () => {
|
||||
const params = {
|
||||
pageSo:{ pageSize: 9999, pageNumber: 1 }
|
||||
}
|
||||
const [activeTab, setActiveTab] = useState('laws');
|
||||
const [lawData, setLawData] = useState([]);
|
||||
const [systemData, setSystemData] = useState([]);
|
||||
const [year, setYear] = useState(moment().format('YYYY'));
|
||||
const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
|
||||
|
||||
// 获取法律法规文件
|
||||
const lawsFiles = async () => {
|
||||
try {
|
||||
const { code, data } = await httppost(apiurl.sz.qhfz.lawPage, params)
|
||||
if (code == 200) {
|
||||
const list = data?.records.map(item => {
|
||||
if (item?.files?.length === 0) {
|
||||
return []
|
||||
}
|
||||
return { name: item?.files[0]?.fileName?.replace(/\.pdf$/i, ''), fileId: item?.files[0]?.fileId }
|
||||
}).flat()
|
||||
setLawData(list)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取系统文件
|
||||
const systemFiles = async () => {
|
||||
try {
|
||||
const { code, data } = await httppost(apiurl.sz.qhfz.systemPage, params)
|
||||
if (code == 200) {
|
||||
const list = data?.records.map(item => {
|
||||
if (item?.files?.length === 0) {
|
||||
return []
|
||||
}
|
||||
return { name: item?.files[0]?.fileName?.replace(/\.pdf$/i, ''), fileId: item?.files[0]?.fileId }
|
||||
}).flat()
|
||||
|
||||
setSystemData(list)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const [chartData, setChartData] = useState([]);
|
||||
const [selectedPieItem, setSelectedPieItem] = useState(null);
|
||||
const [startAngle, setStartAngle] = useState(90);
|
||||
|
||||
const typeMapping = {
|
||||
0: { name: '违建', color: '#1890ff' },
|
||||
1: { name: '毁林垦荒', color: '#00eaff' },
|
||||
2: { name: '筑坝拦汊', color: '#3155fb' },
|
||||
3: { name: '填占库容', color: '#bcebf7' },
|
||||
4: { name: '违法取水', color: '#00d085' },
|
||||
5: { name: '其他', color: '#1890ff' },
|
||||
};
|
||||
|
||||
// 获取水政执法数据 0:违建,1:毀林垦荒,2:筑坝拦汊,3:填占库容,4:违法取水,5:其他
|
||||
const caseList = async (params) => {
|
||||
try {
|
||||
const { code, data } = await httppost(apiurl.sz.qhfz.caseSta, params)
|
||||
if (code == 200) {
|
||||
if (!data || data.length === 0) {
|
||||
setChartData([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const newChartData = data.map(item => {
|
||||
const typeInfo = typeMapping[item.type] || { name: '未知', color: '#ccc' };
|
||||
return {
|
||||
name: typeInfo.name,
|
||||
value: item.count,
|
||||
color: typeInfo.color
|
||||
};
|
||||
});
|
||||
setChartData(newChartData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const total = chartData.reduce((acc, cur) => acc + cur.value, 0);
|
||||
|
||||
const getOption = () => {
|
||||
let centerName = '案件总数';
|
||||
let centerValue = total;
|
||||
let centerPercent = '100%';
|
||||
|
||||
if (selectedPieItem) {
|
||||
centerName = selectedPieItem.name;
|
||||
centerValue = selectedPieItem.value;
|
||||
centerPercent = selectedPieItem.percent;
|
||||
} else if (chartData.length === 1) {
|
||||
centerName = chartData[0].name;
|
||||
}
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '水政执法-外圈',
|
||||
type: 'pie',
|
||||
radius: ['52%', '94%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: startAngle,
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{b}',
|
||||
color: '#fff',
|
||||
fontSize: 10
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
data: chartData.map(item => ({
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
itemStyle: { color: item.color }
|
||||
}))
|
||||
},
|
||||
{
|
||||
name: '水政执法-内圈',
|
||||
type: 'pie',
|
||||
radius: ['60%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: startAngle,
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `{name|${centerName}}\n{value|${centerValue}}\n{percent|${centerPercent}}`,
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
lineHeight: 16
|
||||
},
|
||||
value: {
|
||||
fontSize: 14,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 20
|
||||
},
|
||||
percent: {
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
lineHeight: 16
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: chartData.map(item => ({
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
itemStyle: { color: item.color }
|
||||
}))
|
||||
}
|
||||
]
|
||||
}};
|
||||
|
||||
const onChartClick = (params) => {
|
||||
if (params.componentType !== 'series') return;
|
||||
|
||||
const { name, value, dataIndex } = params;
|
||||
|
||||
// Toggle selection
|
||||
if (selectedPieItem && selectedPieItem.name === name) {
|
||||
setSelectedPieItem(null);
|
||||
setStartAngle(90);
|
||||
return;
|
||||
}
|
||||
|
||||
let sumBefore = 0;
|
||||
for (let i = 0; i < dataIndex; i++) {
|
||||
sumBefore += chartData[i].value;
|
||||
}
|
||||
|
||||
const offset = (sumBefore + value / 2) / total * 360;
|
||||
const newStartAngle = 90 + offset;
|
||||
|
||||
setStartAngle(newStartAngle);
|
||||
setSelectedPieItem({
|
||||
name,
|
||||
value,
|
||||
percent: ((value / total) * 100).toFixed(0) + '%'
|
||||
});
|
||||
};
|
||||
|
||||
const handleItemClick = (item) => {
|
||||
setPdfInfo({
|
||||
visible: true,
|
||||
title: item.name,
|
||||
fileId: item.fileId
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (chartData && chartData.length > 0) {
|
||||
const totalVal = chartData.reduce((acc, cur) => acc + cur.value, 0);
|
||||
const firstItem = chartData[0];
|
||||
const value = firstItem.value;
|
||||
|
||||
const offset = (value / 2) / totalVal * 360;
|
||||
const newStartAngle = 90 + offset;
|
||||
|
||||
setStartAngle(newStartAngle);
|
||||
setSelectedPieItem({
|
||||
name: firstItem.name,
|
||||
value: value,
|
||||
percent: ((value / totalVal) * 100).toFixed(0) + '%'
|
||||
});
|
||||
} else {
|
||||
setSelectedPieItem(null);
|
||||
setStartAngle(90);
|
||||
}
|
||||
}, [chartData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab == 'laws') {
|
||||
lawsFiles()
|
||||
} else {
|
||||
systemFiles()
|
||||
}
|
||||
}, [activeTab])
|
||||
useEffect(() => {
|
||||
if (year) {
|
||||
const params = {
|
||||
stm: moment(year).format('YYYY-01-01 00:00:00'),
|
||||
etm: moment(year).format('YYYY-12-31 23:59:59'),
|
||||
}
|
||||
caseList(params)
|
||||
}
|
||||
}, [year])
|
||||
return (
|
||||
<div className="strengthen-rule-of-law">
|
||||
{/* Top Tabs */}
|
||||
<div className="tabs-container">
|
||||
<div
|
||||
className={`tab-item ${activeTab === 'laws' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('laws')}
|
||||
style={activeTab === 'laws' ? { backgroundImage: `url(${selectedBg})` } : {}}
|
||||
>
|
||||
法律法规
|
||||
</div>
|
||||
<div
|
||||
className={`tab-item ${activeTab === 'system' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('system')}
|
||||
style={activeTab === 'system' ? { backgroundImage: `url(${selectedBg})` } : {}}
|
||||
>
|
||||
制度管理
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* List Content */}
|
||||
<div className="list-content">
|
||||
{(activeTab === 'laws' ? lawData : systemData).length > 0 ? (
|
||||
(activeTab === 'laws' ? lawData : systemData).map((item, index) => (
|
||||
<div key={index} className="list-item" onClick={() => handleItemClick(item)}>
|
||||
<div className="icon-wrapper">
|
||||
<FileTextOutlined style={{ color: '#1890ff', fontSize: '16px' }} />
|
||||
</div>
|
||||
<span className="text">{item.name}</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={<span style={{color:'#fff'}}>暂无数据</span>} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Water Administration Law Enforcement */}
|
||||
<div className="enforcement-section">
|
||||
<div className="section-header">
|
||||
<div className="title-wrapper">
|
||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||
<span className="section-title">水政执法</span>
|
||||
</div>
|
||||
<YearSelect value={year} onChange={setYear} />
|
||||
</div>
|
||||
|
||||
<div className="chart-container">
|
||||
<div className="chart-wrapper">
|
||||
{chartData.length > 0 ? (
|
||||
<ReactEcharts
|
||||
option={getOption()}
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
onEvents={{
|
||||
click: onChartClick
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={<span style={{color:'#fff'}}>暂无数据</span>} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="legend-wrapper">
|
||||
{chartData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="legend-item"
|
||||
onMouseEnter={() => {
|
||||
// Logic to highlight item if needed, currently main interaction is click on chart
|
||||
const fakeParams = {
|
||||
componentType: 'series',
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
dataIndex: index
|
||||
};
|
||||
// Optional: trigger hover effect or selection
|
||||
// onChartClick(fakeParams); // This might be too aggressive on hover
|
||||
}}
|
||||
>
|
||||
<div className="legend-color" style={{ backgroundColor: item.color }}></div>
|
||||
<div className="legend-name">{item.name}</div>
|
||||
<div className="legend-value">{item.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PDF Viewer */}
|
||||
{pdfInfo.visible && (
|
||||
<PdfView
|
||||
visible={pdfInfo.visible}
|
||||
onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
|
||||
title={pdfInfo.title}
|
||||
fileId={pdfInfo.fileId}
|
||||
url="/gunshiApp/ss/projectEvents/file/download/"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StrengthenRuleOfLaw;
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
.strengthen-rule-of-law {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 3px 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #00a0e9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 15px;
|
||||
max-height: 120px; /* Limit height to show scroll if needed, though items are few */
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
.text {
|
||||
color: #00a0e9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enforcement-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; /* Add this to allow flex container to shrink properly */
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow-icon {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 0; /* Critical for nested flex scrolling/sizing */
|
||||
|
||||
.chart-wrapper {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.legend-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 10px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&.active, &:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.legend-name {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.legend-value {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,12 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import CommonCard from '../../UI/CommonCard';
|
||||
import PerfectSystem from './components/PerfectSystem';
|
||||
import SoundMechanism from './components/SoundMechanism';
|
||||
import StrengthenRuleOfLaw from './components/StrengthenRuleOfLaw';
|
||||
import ImplementResponsibility from './components/ImplementResponsibility';
|
||||
import { httppost } from '@/utils/request';
|
||||
import apiurl from '@/service/apiurl';
|
||||
import './index.less';
|
||||
|
||||
const SiZhi = () => {
|
||||
const showPanels = useSelector(s => s.runtime.showPanels);
|
||||
const [infos, setInfos] = useState({});
|
||||
|
||||
const getInfo = async () => {
|
||||
|
|
@ -29,7 +25,7 @@ const SiZhi = () => {
|
|||
}, []);
|
||||
return (
|
||||
<div className="sizhi-view">
|
||||
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||
<div className="side-panel left">
|
||||
<CommonCard title="完善体系" className="panel-card card-1">
|
||||
<PerfectSystem data={infos}/>
|
||||
</CommonCard>
|
||||
|
|
@ -38,12 +34,12 @@ const SiZhi = () => {
|
|||
</CommonCard>
|
||||
</div>
|
||||
|
||||
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||
<div className="side-panel right">
|
||||
<CommonCard title="强化法治" className="panel-card card-1">
|
||||
<StrengthenRuleOfLaw />
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
<CommonCard title="落实责任制" className="panel-card card-2">
|
||||
<ImplementResponsibility />
|
||||
<div className="placeholder-content">内容填充区域</div>
|
||||
</CommonCard>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,16 +12,10 @@
|
|||
|
||||
&.left {
|
||||
left: 20px;
|
||||
&.hidden {
|
||||
transform: translateX(-120%);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 20px;
|
||||
&.hidden {
|
||||
transform: translateX(120%);
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
|
|
@ -44,28 +38,3 @@
|
|||
height: 100%;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow-icon {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const PdfView = ({ visible, title, onClose, url, fileId }) => {
|
|||
return (
|
||||
<CommonModal
|
||||
visible={visible}
|
||||
title={title?.replace(/\.pdf$/i, '')}
|
||||
title={title}
|
||||
onClose={onClose}
|
||||
width="60%"
|
||||
bodyStyle={{ padding: 0, overflow: 'hidden' }}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,14 @@ const YearSelect = ({ value, onChange, className, style, ...props }) => {
|
|||
onChange(dateString);
|
||||
}
|
||||
};
|
||||
const disabledDate = (current) => {
|
||||
return current && current > moment().endOf('day');
|
||||
};
|
||||
|
||||
return (
|
||||
<DatePicker
|
||||
picker="year"
|
||||
disabledDate={disabledDate}
|
||||
value={value ? moment(value, 'YYYY') : null}
|
||||
onChange={handleChange}
|
||||
className={`custom-year-select ${className || ''}`}
|
||||
// dropdownClassName="custom-year-select-dropdown"
|
||||
dropdownClassName="custom-year-select-dropdown"
|
||||
style={style}
|
||||
allowClear={false}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -65,14 +65,6 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-picker-cell-disabled {
|
||||
pointer-events: none;
|
||||
.ant-picker-cell-inner {
|
||||
color: rgba(255, 255, 255, 0.25) !important;
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-picker-cell-selected .ant-picker-cell-inner {
|
||||
background-color: #00a0e9 !important;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import Header from './components/Layouts/Header';
|
||||
import SiQuan from './components/Business/SiQuan';
|
||||
import SiZhi from './components/Business/SiZhi';
|
||||
|
|
@ -8,19 +7,11 @@ import SiGuan from './components/Business/SiGuan';
|
|||
import MapCtrl from './MapCtrl/index'
|
||||
import MapToolBox from './mapToolBox'
|
||||
import './index.less';
|
||||
import { showFullScreen } from '@/utils/tools';
|
||||
|
||||
const HomePage = () => {
|
||||
const [activeMenu, setActiveMenu] = useState('siquan');
|
||||
const [userInfo, setUserInfo] = useState({ userName: '系统管理员' });
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
const isFullScreen = useSelector(s => s.runtime.isFullScreen);
|
||||
const dispatch = useDispatch()
|
||||
|
||||
useEffect(()=>{
|
||||
//根据isFullScreen判断当前是否进入全屏
|
||||
showFullScreen(isFullScreen)
|
||||
},[isFullScreen])
|
||||
|
||||
useEffect(() => {
|
||||
// 兼容 Hash 路由模式：参数可能跟在 # 后面 (例如 /#/home?token=...)
|
||||
|
|
@ -43,7 +34,6 @@ const HomePage = () => {
|
|||
|
||||
setUserInfo({ userName: finalUserName });
|
||||
setIsReady(true);
|
||||
dispatch.runtime.setHome()
|
||||
}, []);
|
||||
|
||||
const renderContent = () => {
|
||||
|
|
@ -66,15 +56,15 @@ const HomePage = () => {
|
|||
// style={{position:"relative"}} 这段以后写在.home-page里
|
||||
<div className="home-page" style={{position:"relative"}}>
|
||||
<Header activeMenu={activeMenu} onMenuChange={setActiveMenu} userName={userInfo.userName} />
|
||||
<div className="main-content-wrapper" style={{ pointerEvents: 'none' }}>
|
||||
<div className="content-overlay" style={{ pointerEvents: 'none' }}>
|
||||
<div className="main-content-wrapper">
|
||||
<div className="content-overlay">
|
||||
{renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 地图相关 */}
|
||||
<div style={{ height: '100%', width: '100%', position: 'absolute', top: 0, left: 0, overflow: 'hidden', zIndex: 0, pointerEvents: 'auto' }}>
|
||||
<div style={{ height: '100%',width:'100%', position: 'absolute',overflow:'hidden'}}>
|
||||
{/* 地图 */}
|
||||
<MapCtrl/>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,19 +10,11 @@
|
|||
color: #fff;
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
|
||||
.dashboard-header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.main-content-wrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
|
||||
.content-overlay {
|
||||
position: absolute;
|
||||
|
|
@ -32,8 +24,31 @@
|
|||
height: 100%;
|
||||
z-index: 5; // Content sits above the map
|
||||
pointer-events: none; // Let clicks pass through to map by default
|
||||
|
||||
// Re-enable pointer events for actual interactive children
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10; // Above map
|
||||
pointer-events: none; // Let clicks pass through to map by default
|
||||
|
||||
// But children (cards) must be clickable.
|
||||
// This will be handled in child components or we can set it here if all children are full-screen overlays
|
||||
// It's safer to handle in children, but for now, since SiQuan is the child:
|
||||
> * {
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,18 @@
|
|||
import React, { useEffect, useReducer, useRef, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Checkbox, message } from 'antd';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import { useLocation } from 'react-router'
|
||||
import './index.less'
|
||||
|
||||
export default function Btn() {
|
||||
const showPanels = useSelector((s) => s.runtime.showPanels)
|
||||
const homeCheckedObj = useSelector((s) => s.runtime.homeCheckedObj)
|
||||
const layerVisible = useSelector(s => s.map.layerVisible);
|
||||
const mode = useSelector(s=>s.map.mode)
|
||||
const dispatch = useDispatch()
|
||||
const location = useLocation()
|
||||
const showPanels = useSelector((s) => s.runtime.showPanels)
|
||||
const layerVisible = useSelector(s => s.map.layerVisible);
|
||||
const isFullScreen = useSelector(s => s.runtime.isFullScreen)
|
||||
const mapCenter = useSelector(s => s.runtime.mapCenter)||{}
|
||||
const mode = useSelector(s=>s.map.mode)
|
||||
const [open, setOpen] = useState(false)//是否弹出图层窗口
|
||||
const [targetZoom, setTargetZoom] = useState(null)//点击缩放按钮后地图目标的zoom值
|
||||
|
||||
useEffect(()=>{
|
||||
//移动地图后同步targetZoom值
|
||||
setTargetZoom(mapCenter?.zoom||null)
|
||||
},[mapCenter])
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const layerVisibleChanged = (event)=>{
|
||||
const vo = { [event.target.name]: event.target.checked };
|
||||
|
|
@ -56,46 +49,23 @@ export default function Btn() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="mapToolBox" style={{right: showPanels?'445px':'10px'}}>
|
||||
<div className='mapToolBtn'>
|
||||
<div title={`${showPanels?'收起':'展开'}功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${showPanels?'shouqi.png':'zhankai.png'}`} />
|
||||
</div>
|
||||
<div title="查询" onClick={()=>{}}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/search.png`} />
|
||||
</div>
|
||||
<div title="还原地图展示位置" onClick={()=>dispatch.runtime.setHome()}>
|
||||
<img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/center.png`} />
|
||||
</div>
|
||||
<div title="天气" onClick={()=>{}}>
|
||||
<img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/tianqi.png`} />
|
||||
</div>
|
||||
<div title="放大" onClick={()=>{
|
||||
if(mapCenter?.zoom === targetZoom){
|
||||
dispatch.runtime.setCameraTarget({...mapCenter, zoom: mapCenter.zoom + 1, fixed:true})
|
||||
setTargetZoom(mapCenter.zoom + 1)
|
||||
}
|
||||
}}>
|
||||
<img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/fangda.png`} />
|
||||
</div>
|
||||
<div title="缩小" onClick={()=>{
|
||||
if(mapCenter?.zoom === targetZoom){
|
||||
dispatch.runtime.setCameraTarget({...mapCenter, zoom: mapCenter.zoom - 1, fixed:true })
|
||||
setTargetZoom(mapCenter.zoom - 1)
|
||||
}
|
||||
}}>
|
||||
<img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/suoxiao.png`} />
|
||||
</div>
|
||||
<div title="截图" onClick={()=>{}}>
|
||||
<img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/download.png`} />
|
||||
</div>
|
||||
<div title={isFullScreen?"退出全屏":"进入全屏"} onClick={()=>dispatch.runtime.setIsFullScreen(!isFullScreen)}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${isFullScreen?'quanping2.png':'quanping.png'}`} />
|
||||
</div>
|
||||
<div title="地图展示图层控制" onClick={()=>{setOpen(!open)}}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
|
||||
</div>
|
||||
<div title="还原地图展示位置" onClick={()=>dispatch.runtime.setHome()}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/ZhongXin.png`} />
|
||||
</div>
|
||||
<div title={`${showPanels?'收起':'展开'}悬浮功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
|
||||
{
|
||||
showPanels ?
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/zhankai2.png`} />
|
||||
:<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/shouqi2.png`} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayer' style={{width: open ? '300px' : '0',}}>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
z-index: 100;
|
||||
right: 445px;
|
||||
top: 100px;
|
||||
transition: all 0.3s;
|
||||
.mapToolBtn{
|
||||
width:40px;
|
||||
padding-bottom: 5px;
|
||||
|
|
@ -13,10 +12,8 @@
|
|||
align-items: center;
|
||||
|
||||
.mapToolBtnIcon{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 7px;
|
||||
background: url(../../../../public//assets/icons/bg.png) 50% 50% / 100% 100% no-repeat;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue