lishenfeng
/
ykzz-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 标题更改以及删除多余代码

test
李神峰 2024-12-10 17:47:22 +08:00
parent 86947a4ca6
commit 029c78e4c2
1159 changed files with 71 additions and 161191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.yarnrc Normal file
View File

@ -0,0 +1,7 @@
registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

2
public/index.html
View File

@ -29,7 +29,7 @@
<script type="text/javascript" src="%PUBLIC_URL%/popmotion.xl.min.js"></script>
<script type="text/javascript" src="%PUBLIC_URL%/imouplayer.js"></script>
<script src="%PUBLIC_URL%/h5Player/h5player.min.js"></script>
<title>檀树岗水库现代化运行管理矩阵平台</title>
<title>盐卡引水闸信息化系统</title>
<style>
.lf{

15
src/components/DashboardLayout/TopMenu.tsx
View File

@ -62,7 +62,6 @@ const TopMenu: React.FC<{
const menuClicked = (id: any) => {
const menuItem:any = menu.find(m => m.id == id);
if (menuItem.title === "雨水工灾情") {
getReadStatus()
}
const url = getMenuUrl(menuItem);
@ -70,21 +69,7 @@ const TopMenu: React.FC<{
navigate(url);
}
}
/**
* @description 由于进入雨水工灾情 初始化进入是这个页面 发请求来获取未读和已读状态
*
*/
const getReadStatus = () => {
createCrudService(apiurl.ssyq.status).delGet().then((res) => {
if (res.code === 200) {
dispatch.runtime.setIsReadObject(res.data)
}
})
}
useEffect(() => {
getReadStatus()
}, [])
return (
<div className='app-top-menu'>

4
src/components/DashboardLayout/index.tsx
View File

@ -90,7 +90,7 @@ const DashboardLayout: React.FC = () => {
navigate('/login')
}else{
dispatch.auth.loadMenu();
document.title = "檀树岗水库现代化运行管理矩阵平台";
document.title = "盐卡引水闸信息化系统";
}
},[])
@ -150,7 +150,7 @@ const DashboardLayout: React.FC = () => {
{/*<span className="app-title">{TITLE}{SUBTITLE}</span>*/}
<span className="app-title lf">
<img src={`${process.env.PUBLIC_URL}/assets/shuili.png`} alt=""/>
<span>檀树岗水库现代化运行管理矩阵平台</span>
<span>盐卡引水闸信息化系统</span>
</span>
<div className="topMenu lf">
<TopMenu menu={menu} menuIndexes={menuIndexes} />

190
src/components/summarizeRain/DataTable.tsx
View File

@ -1,190 +0,0 @@
import React, { useState, useMemo } from 'react';
import { Descriptions, Button, Card, Space, Table, Modal, Divider } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import {CrudContext} from "../crud/useCrud";
import { SearchOption } from "../../service/def";
import moment from 'moment';
import ToolBar from './ToolBar';
import { adnmCun, adnmZhen } from '../../models/_/adcd';
import appconsts from '../../service/appconsts'
type IProps = {
pagerCtx: any;
crudCtx: CrudContext;
params: any;
reportStatisticsData: any;
rainfallLevelDistributionData: any;
}
const myType:any= {
SH: '山洪',
SW: '水文',
QX: '气象',
SK: '水库',
}
const DataTable: React.FC<IProps> = ({ pagerCtx, crudCtx, params, reportStatisticsData, rainfallLevelDistributionData }) => {
const columns = useMemo<ColumnsType<any>>(() => [
{ title: '序号', key: 'inx', dataIndex: 'inx', width:60, align:"center", fixed:"left", render: (text:any, rec:any, index:any) => index + 1 },
{ title: '测站编码', key: 'stcd', dataIndex: 'stcd', align: 'center', width: 90 },
{ title: '测站名称', key: 'stnm', dataIndex: 'stnm', align: 'center', width: 110, ellipsis: true },
{ title: '时间', key: 'tm', dataIndex: 'tm', align: 'center', width: 90, render: (text:any) => text?moment(text).format('MM-DD HH:mm'):"-"},
{ title: '测站所属区划', key: 'adcd', dataIndex: 'adcd', align: 'center', width: 120, ellipsis: true, render: (text:any, rec:any,) => <>{adnmZhen(rec.adcd)}</> },
{ title: '数据来源', key: 'source', dataIndex: 'source', align: 'center', width: 100, ellipsis: true, render: (text:any, rec:any) => <>{myType[text]}</> },
{ title: '今日降雨', key: 'today', dataIndex: 'today', align: 'center', width: 100,
sorter: (a, b) => a.today - b.today, },
{ title: '1小时降雨', key: 'h1', dataIndex: 'h1', align: 'center', width: 100,
sorter: (a, b) => a.h1 - b.h1, },
{ title: '3小时降雨', key: 'h3', dataIndex: 'h3', align: 'center', width: 100,
sorter: (a, b) => a.h3 - b.h3, },
{ title: '6小时降雨', key: 'h6', dataIndex: 'h6', align: 'center', width: 100,
sorter: (a, b) => a.h6 - b.h6, },
{ title: '12小时降雨', key: 'h12', dataIndex: 'h12', align: 'center', width: 110,
sorter: (a, b) => a.h12 - b.h12, },
{ title: '24小时降雨', key: 'h24', dataIndex: 'h24', align: 'center', width: 110,
sorter: (a, b) => a.h24 - b.h24, },
{ title: '48小时降雨', key: 'h48', dataIndex: 'h48', align: 'center', width: 110,
sorter: (a, b) => a.h24 - b.h24, },
/*{ title: '昨日降雨', key: 'yesterday', dataIndex: 'yesterday', align: 'center', width: 100,
sorter: (a, b) => a.yesterday - b.yesterday, },*/
], [crudCtx]);
const [doReportedParams, setDoReportedParams] = useState(0);
const [doRainParams, setDoRainParams] = useState(0);
const doSearch = (params: any) => {
const searchParams: SearchOption = {
search: {
...params,
doRain:doRainParams,
doReported:doReportedParams
}
};
pagerCtx.search(searchParams);
};
const doReported = (type:any) => {
if(doReportedParams === type){
setDoReportedParams(0);
}else{
setDoReportedParams(type);
}
};
const doRain = (type:any) => {
if(doRainParams === type){
setDoRainParams(0);
}else{
setDoRainParams(type);
}
};
return (
<>
<div style={{padding:"15px", background:"#FBFBFB", border:"1px solid #F0F0F0"}}>
<Space wrap>
<ToolBar
params={{ ...params.search }}
search={doSearch}
doReportedParams={doReportedParams}
doRainParams={doRainParams}
/>
</Space>
</div>
<div style={{marginTop:"15px"}} className="clearFloat descriptionsBox">
<div className="lf" style={{width:"34%"}}>
<div className="lf" style={{lineHeight:"24px", fontWeight:"bold"}}>雨量站来报：</div>
<div className="lf" style={{width:"80%"}}>
<div className="lf"
style={{cursor:"pointer",borderBottom:doReportedParams===0?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doReported(0)}
>
<span>全部</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>{reportStatisticsData.total}</span>
</div>
<div className="lf"
style={{cursor:"pointer",margin:"0 50px",borderBottom:doReportedParams===1?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doReported(1)}
>
<span>已来报</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>{reportStatisticsData.reported}</span>
</div>
<div className="lf"
style={{cursor:"pointer",borderBottom:doReportedParams===2?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doReported(2)}
>
<span>未来报站数</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#FF2525"}}>{reportStatisticsData.unReport}</span>
</div>
</div>
</div>
<div className="lf" style={{width:"66%"}}>
<div className="lf" style={{lineHeight:"24px", fontWeight:"bold"}}>降雨量等级分布：</div>
<div className="lf" style={{width:"70%"}}>
<div className="lf"
style={{cursor:"pointer",marginRight:"40px",borderBottom:doRainParams===1?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doRain(1)}
>
<span>无雨</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#A9A9A9"}}>{rainfallLevelDistributionData.noRain}</span>
</div>
<div className="lf"
style={{cursor:"pointer",marginRight:"40px",borderBottom:doRainParams===2?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doRain(2)}
>
<span>小雨</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#A5F38D"}}>{rainfallLevelDistributionData.lightRain}</span>
</div>
<div className="lf"
style={{cursor:"pointer",marginRight:"40px",borderBottom:doRainParams===3?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doRain(3)}
>
<span>中雨</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#43B83E"}}>{rainfallLevelDistributionData.moderateRain}</span>
</div>
<div className="lf"
style={{cursor:"pointer",marginRight:"40px",borderBottom:doRainParams===4?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doRain(4)}
>
<span>大雨</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#73B5F9"}}>{rainfallLevelDistributionData.heavyRain}</span>
</div>
<div className="lf"
style={{cursor:"pointer",marginRight:"40px",borderBottom:doRainParams===5?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doRain(5)}
>
<span>暴雨</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#1D02FA"}}>{rainfallLevelDistributionData.rainstorm}</span>
</div>
<div className="lf"
style={{cursor:"pointer",marginRight:"40px",borderBottom:doRainParams===6?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doRain(6)}
>
<span>大暴雨</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#FD00F9"}}>{rainfallLevelDistributionData.heavyRainstorm}</span>
</div>
<div className="lf"
style={{cursor:"pointer",borderBottom:doRainParams===7?"2px solid #0893FF":"2px solid #fff"}}
onClick={()=>doRain(7)}
>
<span>特大暴雨</span>&nbsp;&nbsp;
<span style={{fontWeight:"bold",fontSize:"15px", color:"#861361"}}>{rainfallLevelDistributionData.extremelyHeavyRainstorm}</span>
</div>
</div>
</div>
</div>
<div style={{marginTop:"15px"}}>
<Table rowKey={rec => rec.source + rec.stcd} columns={columns} {...pagerCtx.tableProps}
scroll={{ y: "calc(100vh - 320px)" }}
/>
</div>
</>
)
};
export default DataTable

114
src/components/summarizeRain/ToolBar.tsx
View File

@ -1,114 +0,0 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { Form, Input, Button, DatePicker, Select } from 'antd';
import { SearchOutlined, RedoOutlined, UploadOutlined } from '@ant-design/icons';
import {getWaterList} from "../../service/forecastModule/waterSituation";
const { Option } = Select;
const { RangePicker } = DatePicker;
type ToolBarProps = {
params: any;
search: (value: any) => void;
doReportedParams: any;
doRainParams: any;
}
const ToolBar: React.FC<ToolBarProps> = ({ params, search, doReportedParams, doRainParams }) => {
const [form] = Form.useForm();
const { stm, etm, ...record } = params;
if (stm && etm) {
record.tm = [moment(stm), moment(etm)]
}
const [waterList, setWaterList] = useState([])
const getData= async ()=>{
let data = await getWaterList();
setWaterList(data)
}
useEffect(() => {
getData()
}, []);
const onSearchClick = (doReportedParams?:any, doRainParams?:any) => {
const { tm, ...rec } = form.getFieldsValue();
if (tm) {
if (tm[0]) {
rec.stm = tm[0].format('YYYY-MM-DD HH:mm:ss');
}
if (tm[1]) {
rec.etm = tm[1].format('YYYY-MM-DD HH:mm:ss');
}
}
if(doReportedParams>=0){
rec.doReported = doReportedParams;
}
if(doRainParams>=0){
rec.doRain = doRainParams;
}
var reg = /[\u4e00-\u9fa5]/g;
if(reg.test(rec.txt)){
rec.stnm = rec.txt;
}else{
rec.stcd = rec.txt;
}
search(rec);
};
useEffect(() => {
if(doReportedParams>=0 || doRainParams>=0){
onSearchClick(doReportedParams,doRainParams);
}
}, [doReportedParams, doRainParams]);
const reset = () => {
form.resetFields();
onSearchClick();
};
return record ? (
<Form layout="inline" form={form} initialValues={record}>
<Form.Item label="内容" name="txt">
<Input style={{ width: 205 }} allowClear placeholder="请输入河流/站名/站码查询" onChange={onSearchClick}/>
</Form.Item>
<Form.Item label="按流域" name="wscd">
<Select style={{ width: 120 }} allowClear>
{
// @ts-ignore
waterList.map(o => <Select.Option key={o.wscd} value={o.wscd}>{o.wsnm}</Select.Option>)
}
</Select>
</Form.Item>
<Form.Item label="数据来源" name="source">
<Select style={{ width: 145 }} allowClear onChange={onSearchClick}>
<Option value="SH">山洪</Option>
<Option value="SW">水文</Option>
<Option value="QX">气象</Option>
<Option value="SK">水库</Option>
</Select>
</Form.Item>
<Form.Item label="日期" name="tm">
<RangePicker allowClear format="YYYY-MM-DD HH:mm" style={{ width: 310 }} onChange={onSearchClick}/>
</Form.Item>
<Form.Item>
<Button type="primary" icon={<SearchOutlined />} onClick={onSearchClick}>查询</Button>
</Form.Item>
<Form.Item>
<Button icon={<RedoOutlined />} onClick={reset}>重置</Button>
</Form.Item>
{/*<Form.Item>
<Button icon={<UploadOutlined />} >导出</Button>
</Form.Item>*/}
</Form>
) : null;
};
export default ToolBar;

5
src/components/summarizeRain/index.less
View File

@ -1,5 +0,0 @@
.descriptionsBox{
.ant-descriptions-item{
padding-bottom:0;
}
}

51
src/components/summarizeRain/index.tsx
View File

@ -1,51 +0,0 @@
import React, {useEffect, useState} from 'react';
import moment from 'moment';
import {Card} from "antd";
import useCrud from '../../components/crud/useCrud';
import usePageTable from '../../components/crud/usePageTable';
import { SearchOption } from '../../service/def';
import "./index.less"
import DataTable from './DataTable';
import { page } from "../../service/forecastModule/rainfall";
const OutStoreOrderPage: React.FC = () => {
// 页面初始默认查询参数
const options = {
search: {
stm: moment().subtract(1, 'month').format("YYYY-MM-DD HH:mm:ss"),
etm: moment().format("YYYY-MM-DD HH:mm:ss"),
},
};
const crud = useCrud();
const [reportStatisticsData, setReportStatisticsData] = useState({});
const [rainfallLevelDistributionData, setRainfallLevelDistributionData] = useState({});
const pager = usePageTable<any>(async (params?: SearchOption) => {
let data:any = await page(params);
if(Object.keys(data).length>0){
setReportStatisticsData(data.reportStatistics?data.reportStatistics:{});
setRainfallLevelDistributionData(data.rainfallLevelDistribution?data.rainfallLevelDistribution:{});
return { list: data?.page?.records, totalRow: data?.page?.total }
}else{
return { list: [], totalRow: 0 };
}
}, options);
return (
<div className="content-root">
<DataTable
crudCtx={crud}
pagerCtx={pager}
params={options}
reportStatisticsData={reportStatisticsData}
rainfallLevelDistributionData={rainfallLevelDistributionData}
/>
</div>
)
};
export default OutStoreOrderPage;

65
src/components/summarizeReservoirWaterRegime/DataTable.tsx
View File

@ -1,65 +0,0 @@
import React, {useCallback, useMemo, useState} from 'react';
import { useDispatch } from 'react-redux';
import { Descriptions, Button, Card, Space, Table, Modal, Divider } from 'antd';
import { DeleteOutlined, PlusOutlined, EditOutlined, ExclamationCircleOutlined, ProfileOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/lib/table';
import {CrudContext} from "../crud/useCrud";
import { SearchOption } from "../../service/def";
import ToolBar from './ToolBar';
import moment from "moment";
type IProps = {
pagerCtx: any;
crudCtx: CrudContext;
}
const myType:any= {
SH: '山洪',
SW: '水文',
QX: '气象',
SK: '水库',
}
const DataTable: React.FC<IProps> = ({ pagerCtx, crudCtx }) => {
const columns = useMemo<ColumnsType<any>>(() => [
{ title: '序号', key: 'inx', dataIndex: 'inx', width:60, align:"center", fixed:"left", render: (text:any, rec:any, index:any) => index + 1 },
{ title: '测站编码', key: 'stcd', dataIndex: 'stcd', align: 'center', fixed:"left",width: 140 },
{ title: '测站名称', key: 'stnm', dataIndex: 'stnm', align: 'center', fixed:"left",width: 140, ellipsis: true },
{
title: '上报时间', key: 'tm', dataIndex: 'tm', align: 'center', width: 120, render: (text: any,row:any) =>
<span style={{color:row.state ? "red" : "#fff"}}>{text ? moment(text).format('MM-DD HH:mm') : "-"}</span>
},
{ title: '所属政区', key: 'adnm', dataIndex: 'adnm', align: 'center', width: 150},
{ title: '站址', key: 'stlc', dataIndex: 'stlc', align: 'center', width: 150},
{ title: '数据来源', key: 'source', dataIndex: 'source', align: 'center', width: 120, render: (text:any, rec:any) => <>{myType[text]}</> },
{ title: '水位(m)', key: 'rz', dataIndex: 'rz', align: 'center', width: 120,sorter: (a, b) => a.z - b.z,},
{ title: '汛限水位(m)', key: 'flLowLimLev', dataIndex: 'flLowLimLev', align: 'center', width: 150, },
{ title: '防洪高水位(m)', key: 'uppLevFlco', dataIndex: 'uppLevFlco', align: 'center', width: 150, },
{ title: '设计洪水位(m)', key: 'desFloodLev', dataIndex: 'desFloodLev', align: 'center', width: 150, },
{ title: '校核洪水位(m)', key: 'calFloodLev', dataIndex: 'calFloodLev', align: 'center', width: 150, },
{
title: '历史最高水位(m)', children: [
{title: '实测(m)', key: 'htrz', dataIndex: 'htrz', align: 'center', width: 120,},
{title: '出现时间', key: 'htrztm', dataIndex: 'htrztm', align: 'center', width: 120,},
{title: '调查(m)', key: 'invrz', dataIndex: 'invrz', align: 'center', width: 120,},
{title: '出现时间', key: 'invrztm', dataIndex: 'invrztm', align: 'center', width: 120,},
]
},
], [crudCtx]);
const width = useMemo(() => columns.reduce((total: number, cur) => total + (cur.width as number), 0), [columns]);
return (
<>
<div style={{marginTop:"15px"}}>
<Table rowKey="id" columns={columns} {...pagerCtx.tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }}/>
</div>
</>
)
};
export default DataTable

113
src/components/summarizeReservoirWaterRegime/ToolBar.tsx
View File

@ -1,113 +0,0 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { Form, Input, Button, DatePicker, Select } from 'antd';
import { SearchOutlined, RedoOutlined, UploadOutlined } from '@ant-design/icons';
import {getWaterList} from "../../service/forecastModule/waterSituation";
const { Option } = Select;
const { RangePicker } = DatePicker;
type ToolBarProps = {
params: any;
search: (value: any) => void;
doReportedParams: any;
doRainParams: any;
}
const ToolBar: React.FC<ToolBarProps> = ({ params, search, doReportedParams, doRainParams }) => {
const [form] = Form.useForm();
const { stm, etm, ...record } = params;
if (stm && etm) {
record.tm = [moment(stm), moment(etm)]
}
const [waterList, setWaterList] = useState([])
const getData= async ()=>{
let data = await getWaterList();
setWaterList(data)
}
useEffect(() => {
getData()
}, []);
const onSearchClick = (doReportedParams?:any, doRainParams?:any) => {
const { tm, ...rec } = form.getFieldsValue();
if (tm) {
if (tm[0]) {
rec.stm = tm[0].format('YYYY-MM-DD HH:mm:ss');
}
if (tm[1]) {
rec.etm = tm[1].format('YYYY-MM-DD HH:mm:ss');
}
}
if(doReportedParams>=0){
rec.doReported = doReportedParams;
}
if(doRainParams>=0){
rec.doRain = doRainParams;
}
var reg = /[\u4e00-\u9fa5]/g;
if(reg.test(rec.txt)){
rec.stnm = rec.txt;
}else{
rec.stcd = rec.txt;
}
search(rec);
};
console.log(waterList);
useEffect(() => {
if(doReportedParams>=0 || doRainParams>=0){
onSearchClick(doReportedParams,doRainParams);
}
}, [doReportedParams, doRainParams]);
const reset = () => {
form.resetFields();
onSearchClick();
};
return record ? (
<Form layout="inline" form={form} initialValues={record}>
<Form.Item label="内容" name="txt">
<Input style={{ width: 205 }} allowClear placeholder="请输入河流/站名/站码查询" onChange={onSearchClick}/>
</Form.Item>
<Form.Item label="按流域" name="wscd">
<Select style={{ width: 120 }} allowClear>
{
// @ts-ignore
waterList.map(o => <Select.Option key={o.wscd} value={o.wscd}>{o.wsnm}</Select.Option>)
}
</Select>
</Form.Item>
<Form.Item label="数据来源" name="source">
<Select style={{ width: 120 }} allowClear onChange={onSearchClick}>
<Option value="SH">山洪</Option>
<Option value="SW">水文</Option>
<Option value="QX">气象</Option>
<Option value="SK">水库</Option>
</Select>
</Form.Item>
<Form.Item label="日期" name="tm">
<RangePicker allowClear format="YYYY-MM-DD HH:mm" style={{ width: 310 }} onChange={onSearchClick}/>
</Form.Item>
<Form.Item>
<Button type="primary" icon={<SearchOutlined />} onClick={onSearchClick}>查询</Button>
</Form.Item>
<Form.Item>
<Button icon={<RedoOutlined />} onClick={reset}>重置</Button>
</Form.Item>
{/*<Form.Item>
<Button icon={<UploadOutlined />} >导出</Button>
</Form.Item>*/}
</Form>
) : null;
};
export default ToolBar;

5
src/components/summarizeReservoirWaterRegime/index.less
View File

@ -1,5 +0,0 @@
.descriptionsBox{
.ant-descriptions-item{
padding-bottom:0;
}
}

32
src/components/summarizeReservoirWaterRegime/index.tsx
View File

@ -1,32 +0,0 @@
import React, {useEffect, useState} from 'react';
import moment from 'moment';
import useCrud from '../../components/crud/useCrud';
import usePageTable from '../../components/crud/usePageTableZdk1';
import { SearchOption } from '../../service/def';
import "./index.less"
import DataTable from './DataTable';
import { reservoirsummaryInfo } from "../../service/sssq";
import { createCrudService } from '../../components/crud/_';
import apiurl from '../../service/apiurl';
const OutStoreOrderPage: React.FC = () => {
const crud = useCrud();
// const pager = usePageTable<any>(async (params?: SearchOption) => {
// let data:any = await reservoirsummaryInfo(params);
// return { list: data.records, totalRow: data.total }
// });
const data = usePageTable(createCrudService(apiurl.sssq.reservoirsummaryInfo).find_noCode1);
return (
<div className="content-root">
<DataTable
crudCtx={crud}
pagerCtx={data}
/>
</div>
)
};
export default OutStoreOrderPage;

60
src/components/summarizeRiverWaterRegime/DataTable.tsx
View File

@ -1,60 +0,0 @@
import React, {useCallback, useMemo, useState} from 'react';
import { Descriptions, Button, Card, Space, Table, Modal, Divider } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import {CrudContext} from "../crud/useCrud";
import moment from "moment";
type IProps = {
pagerCtx: any;
crudCtx: CrudContext;
}
const myType:any= {
SH: '山洪',
SW: '水文',
QX: '气象',
SK: '水库',
};
const DataTable: React.FC<IProps> = ({ pagerCtx, crudCtx }) => {
const columns = useMemo<ColumnsType<any>>(() => [
{ title: '序号', key: 'inx', dataIndex: 'inx', width:60, align:"center", render: (text:any, rec:any, index:any) => index + 1 },
{ title: '测站编码', key: 'stcd', dataIndex: 'stcd', align: 'center',width: 140 },
{ title: '测站名称', key: 'stnm', dataIndex: 'stnm', align: 'center',width: 140, ellipsis: true },
{
title: '上报时间', key: 'tm', dataIndex: 'tm', align: 'center', width: 90, render:
(text: any,row:any) =>
<span style={{color:row.state ? "red" :"#000"}}>{text ? moment(text).format('MM-DD HH:mm') : "-"}</span>
},
{ title: '所属政区', key: 'adnm', dataIndex: 'adnm', align: 'center', width: 150, ellipsis: true },
{ title: '站址', key: 'stlc', dataIndex: 'stlc', align: 'center', width: 150, ellipsis: true},
{ title: '数据来源', key: 'source', dataIndex: 'source', align: 'center', width: 90, render: (text:any, rec:any) => <>{myType[text]}</> },
{ title: '水位(m)', key: 'z', dataIndex: 'z', align: 'center', width: 100,sorter: (a, b) => a.z - b.z,},
{ title: '流量(m³/s)', key: 'q', dataIndex: 'q', align: 'center', width: 110, },
{ title: '警戒水位(m)', key: 'wrz', dataIndex: 'wrz', align: 'center', width: 110, },
{ title: '危险水位(m)', key: 'grz', dataIndex: 'grz', align: 'center', width: 120, },
{
title: '历史最高水位(m)', children: [
{title: '实测(m)', key: 'htrz', dataIndex: 'htrz', align: 'center', width: 120,},
{title: '出现时间', key: 'htrztm', dataIndex: 'htrztm', align: 'center', width: 120,},
{title: '调查(m)', key: 'invrz', dataIndex: 'invrz', align: 'center', width: 120,},
{title: '出现时间', key: 'invrztm', dataIndex: 'invrztm', align: 'center', width: 120,},
]
},
], [crudCtx]);
return (
<>
<div style={{marginTop:"15px"}}>
<Table rowKey="id" columns={columns} {...pagerCtx.tableProps} scroll={{ x: "100%", y: "calc( 100vh - 400px )" }}/>
</div>
</>
)
};
export default DataTable

111
src/components/summarizeRiverWaterRegime/ToolBar.tsx
View File

@ -1,111 +0,0 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { Form, Input, Button, DatePicker, Select } from 'antd';
import { SearchOutlined, RedoOutlined, UploadOutlined } from '@ant-design/icons';
import {getWaterList} from "../../service/forecastModule/waterSituation";
const { Option } = Select;
const { RangePicker } = DatePicker;
type ToolBarProps = {
params: any;
search: (value: any) => void;
doReportedParams: any;
doRainParams: any;
}
const ToolBar: React.FC<ToolBarProps> = ({ params, search, doReportedParams, doRainParams }) => {
const [form] = Form.useForm();
const { stm, etm, ...record } = params;
if (stm && etm) {
record.tm = [moment(stm), moment(etm)]
}
const [waterList, setWaterList] = useState([])
const getData= async ()=>{
let data = await getWaterList();
setWaterList(data)
}
useEffect(() => {
getData()
}, []);
const onSearchClick = (doReportedParams?:any, doRainParams?:any) => {
const { tm, ...rec } = form.getFieldsValue();
if (tm) {
if (tm[0]) {
rec.stm = tm[0].format('YYYY-MM-DD HH:mm:ss');
}
if (tm[1]) {
rec.etm = tm[1].format('YYYY-MM-DD HH:mm:ss');
}
}
if(doReportedParams>=0){
rec.doReported = doReportedParams;
}
if(doRainParams>=0){
rec.doRain = doRainParams;
}
var reg = /[\u4e00-\u9fa5]/g;
if(reg.test(rec.txt)){
rec.rvnm = rec.txt;
}else{
rec.stcd = rec.txt;
}
search(rec);
};
useEffect(() => {
if(doReportedParams>=0 || doRainParams>=0){
onSearchClick(doReportedParams,doRainParams);
}
}, [doReportedParams, doRainParams]);
const reset = () => {
form.resetFields();
onSearchClick();
};
return record ? (
<Form layout="inline" form={form} initialValues={record}>
<Form.Item label="内容" name="txt">
<Input style={{ width: 205 }} allowClear placeholder="请输入河流/站名/站码查询" onChange={onSearchClick}/>
</Form.Item>
<Form.Item label="按流域" name="wscd">
<Select style={{ width: 120 }} allowClear>
{
// @ts-ignore
waterList.map(o => <Select.Option key={o.wscd} value={o.wscd}>{o.wsnm}</Select.Option>)
}
</Select>
</Form.Item>
<Form.Item label="按来源" name="source">
<Select style={{ width: 110 }} allowClear onChange={onSearchClick}>
<Option value="SH">山洪</Option>
<Option value="SW">水文</Option>
</Select>
</Form.Item>
<Form.Item label="日期" name="tm">
<RangePicker allowClear format="YYYY-MM-DD HH:mm" style={{ width: 310 }} onChange={onSearchClick}/>
</Form.Item>
<Form.Item>
<Button type="primary" icon={<SearchOutlined />} onClick={onSearchClick}>查询</Button>
</Form.Item>
<Form.Item>
<Button icon={<RedoOutlined />} onClick={reset}>重置</Button>
</Form.Item>
{/*<Form.Item>
<Button icon={<UploadOutlined />} >导出</Button>
</Form.Item>*/}
</Form>
) : null;
};
export default ToolBar;

5
src/components/summarizeRiverWaterRegime/index.less
View File

@ -1,5 +0,0 @@
.descriptionsBox{
.ant-descriptions-item{
padding-bottom:0;
}
}

31
src/components/summarizeRiverWaterRegime/index.tsx
View File

@ -1,31 +0,0 @@
import React, {useState} from 'react';
import useCrud from '../../components/crud/useCrud';
import usePageTable from '../../components/crud/usePageTableZdk1';
import { SearchOption } from '../../service/def';
import "./index.less"
import DataTable from './DataTable';
import { summaryInfo } from "../../service/sssq";
import { createCrudService } from '../../components/crud/_';
import apiurl from '../../service/apiurl';
const OutStoreOrderPage: React.FC = () => {
// 页面初始默认查询参数
const crud = useCrud();
// const pager = usePageTable<any>(async (params?: SearchOption) => {
// let data:any = await summaryInfo(params);
// return { list: data.records, totalRow: data.total }
// });
const data = usePageTable(createCrudService(apiurl.sssq.summaryInfo).find_noCode1);
return (
<div className="content-root">
<DataTable
crudCtx={crud}
pagerCtx={data}
/>
</div>
)
};
export default OutStoreOrderPage;

441
src/models/auth/_.ts
View File

@ -192,402 +192,67 @@ export async function loadMenu(): Promise<MenuItem[]> {
const id = idgen()
return [
{ id: id(), title: '水库一张图', path: '/mgr/home', icon: 'yzt' },
{ id: id(), title: '首页', path: '/mgr/home', icon: 'yzt' },
{
id: id(), title: '四全', redirect: '/mgr/sq/qfg/zcdjxx', icon: 'sz',
id: id(), title: '监测数据', path: '/mgr/jcsj/jcsj', icon: 'sz',
children: [
{
id: id(), title: '全覆盖', redirect: '/mgr/sq/qfg/zcdjxx',
id: id(), title: '监测数据', path: '/mgr/jcsj/jcsj',
},
{
id: id(), title: '报警管理', redirect: '/mgr/jcsj/bjgl/bjjl',
children: [
{ id: id(), title: '注册登记信息', path: '/mgr/sq/qfg/zcdjxx' },
{ id: id(), title: '报警记录', path: '/mgr/jcsj/bjgl/bjjl' },
{ id: id(), title: '报警规则配置', path: '/mgr/jcsj/bjgl/bjgzpz' },
]
},
{
id: id(), title: '全要素', redirect: '/mgr/sq/qys/kqys',
children: [
{ id: id(), title: '库区要素', path: '/mgr/sq/qys/kqys' },
{ id: id(), title: '工程要素', path: '/mgr/sq/qys/gcys' },
{ id: id(), title: '下游要素', path: '/mgr/sq/qys/xyys' },
]
},
{ id: id(), title: '全天候', redirect: '/mgr/sq/qth/sksq',
children: [
{ id: id(), title: '水库水情', path: '/mgr/sq/qth/sksq'},
{ id: id(), title: '河道水情', path: '/mgr/sq/qth/hdsq'},
{ id: id(), title: '实时雨情', path: '/mgr/sq/qth/ssyq'},
{ id: id(), title: '大坝安全监测', path: '/mgr/sq/qth/dbaqjc'},
{ id: id(), title: '视频监控', path: '/mgr/sq/qth/spjk'},
]
},
{ id: id(), title: '全周期', redirect: '/mgr/sq/qzq/gcdsj',
children: [
{ id: id(), title: '工程大事记', path: '/mgr/sq/qzq/gcdsj'},
{ id: id(), title: '全周期档案', path: '/mgr/sq/qys/qzqda'},
]
},
]
},
{
id: id(), title: '四制', redirect: '/mgr/sz/gltx/zzjgck', icon: 'sz',
children: [
{
id: id(), title: '管理体系', redirect: '/mgr/sz/gltx/zzjgck',
children: [
{
id: id(), title: '组织机构查看', path: '/mgr/sz/gltx/zzjgck',
},
{
id: id(), title: '责任人管理', path: '/mgr/sz/gltx/zrrgl',
}
]
},
{
id: id(), title: '培训管理', redirect: '/mgr/sz/pxgl/pxjhgl',
children: [
{
id: id(), title: '培训计划管理', path: '/mgr/sz/pxgl/pxjhgl',
},
{
id: id(), title: '培训记录管理', path: '/mgr/sz/pxgl/pxjlgl',
},
]
},
{
id: id(), title: '水政执法', redirect: '/mgr/sz/szzf/ajdj',
children: [
{
id: id(), title: '案件登记', path: '/mgr/sz/szzf/ajdj',
},
{
id: id(), title: '案件统计', path: '/mgr/sz/szzf/ajtj',
},
{
id: id(), title: '处理依据', path: '/mgr/sz/szzf/clyj',
}
]
},
{
id: id(), title: '监督考核', redirect: '/mgr/sz/jdkh/khtj',
children: [
{
id: id(), title: '考核统计', path: '/mgr/sz/jdkh/khtj',
},
{
id: id(), title: '考核任务管理', path: '/mgr/sz/jdkh/khrwgl',
},
{
id: id(), title: '考核问题整改', path: '/mgr/sz/jdkh/khwtzg',
},
{
id: id(), title: '考核指标管理', path: '/mgr/sz/jdkh/khzbgl',
},
{
id: id(), title: '考核模板管理', path: '/mgr/sz/jdkh/khmbgl',
}
]
},
{ id: id(), title: '制度管理', path: '/mgr/sz/zdgl' },
{ id: id(), title: '法律法规', path: '/mgr/sz/flfg' },
]
},
{
id: id(), title: '四预', redirect: '/mgr/sy/fhxzfx', icon: 'sz',
children: [
{ id: id(), title: '防洪形势', path: '/mgr/sy/fhxzfx' },
{ id: id(), title: '天气预报', path: '/mgr/sy/tqyb' },
{
id: id(), title: '洪水预报', redirect: '/mgr/sy/hsyb/hyybjs',
children: [
{ id: id(), title: '洪水预报计算', path: '/mgr/sy/hsyb/hyybjs' },
{ id: id(), title: '预报方案管理', path: '/mgr/sy/hsyb/ybfagl' },
{ id: id(), title: '参数管理', path: '/mgr/sy/hsyb/csgl' },
]
},
{ id: id(), title: '防汛预案', path: '/mgr/sy/fxya' },
{ id: id(), title: '调度规程', path: '/mgr/sy/ddgc' },
{
id: id(),
title: '抢险物料',
path: '/mgr/sy/qxwl',
},
{
id: id(),
title: '抢险队伍',
path: '/mgr/sy/qxdw',
},
],
},
{
id: id(), title: '四管', redirect: '/mgr/sg/xcxj/xcrw', icon: 'sz',
children: [
{
id: id(), title: '巡查巡检', redirect: '/mgr/sg/xcxj/xcrw',
children: [
{ id: id(), title: '巡检任务', path: '/mgr/sg/xcxj/xcrw' },
{ id: id(), title: '巡检问题处理', path: '/mgr/sg/xcxj/xjwtcl' },
{ id: id(), title: '巡检项配置', path: '/mgr/sg/xcxj/xjxpz' },
]
},
{
id: id(), title: '安全管理', redirect: '/mgr/sg/aqgl/fxgkqd',
children: [
{ id: id(), title: '风险管控清单', path: '/mgr/sg/aqgl/fxgkqd' },
{ id: id(), title: '安全隐患排查', path: '/mgr/sg/aqgl/aqyhpc' },
{ id: id(), title: '安全检查管理', path: '/mgr/sg/aqgl/aqjcgl' },
{ id: id(), title: '安全事故登记', path: '/mgr/sg/aqgl/aqsgdj' },
{ id: id(), title: '安全鉴定台帐', path: '/mgr/sg/aqgl/aqjdtz' },
{ id: id(), title: '除险加固台帐', path: '/mgr/sg/aqgl/cxjgtz' },
]
},
{
id: id(), title: '白蚁防治', redirect: '/mgr/sg/byfz/bypc',
children: [
{ id: id(), title: '白蚁普查', path: '/mgr/sg/byfz/bypc' },
{ id: id(), title: '防治宣传', path: '/mgr/sg/byfz/byxc' },
]
},
{
id: id(), title: '闸门监控', path: '/mgr/sg/zmjk',
},
{
id: id(), title: '维修养护', path: '/mgr/sg/wxyh',
},
{
id: id(), title: '库容管理', path: '/mgr/sg/krgl',
},
{
id: id(), title: '值班管理', redirect: '/mgr/sg/zbgl/zbb',
children: [
{ id: id(), title: '值班表', path: '/mgr/sg/zbgl/zbb' },
{ id: id(), title: '值班日志', path: '/mgr/sg/zbgl/zbrz' },
]
},
{
id: id(), title: '报表管理', redirect: '/mgr/sg/btbb/sdjyrbb',
children: [
{ id: id(), title: '时段降雨日报表', path: '/mgr/sg/btbb/sdjyrbb' },
{ id: id(), title: '日降雨量年报表', path: '/mgr/sg/btbb/rjylnbb' },
{ id: id(), title: '时段水位日报表', path: '/mgr/sg/btbb/sdswbb' },
{ id: id(), title: '日均水位年报表', path: '/mgr/sg/btbb/rjswbb' },
]
},
{
id: id(), title: '告警管理', redirect: '/mgr/sg/gjgl/aigj',
children: [
{ id: id(), title: 'AI告警', path: '/mgr/sg/gjgl/aigj' },
{ id: id(), title: '广播预警', path: '/mgr/sg/gjgl/gbyj' },
]
},
],
},
{
id: id(), title: '工程安全监测', redirect: '/mgr/gcaqjc/gcaqyj/bzt', icon: 'xtgl',
children: [
{
id: id(), title: '布置图', path: '/mgr/gcaqjc/gcaqyj/bzt',
},
{
id: id(), title: '工程安全分析', redirect: '/mgr/gcaqjc/gcaqfx/jrx',
children: [
{ id: id(), title: '浸润线', path: '/mgr/gcaqjc/gcaqfx/jrx' },
]
},
{
id: id(), title: '工程安全预警', redirect: '/mgr/gcaqjc/gcaqyj/yhyj',
children: [
{ id: id(), title: '隐患预警', path: '/mgr/gcaqjc/gcaqyj/yhyj' },
{ id: id(), title: '预警规则配置', path: '/mgr/gcaqjc/gcaqyj/yjgzpz' },
]
},
{
id: id(), title: '数据统计查询', redirect: '/mgr/gcaqjc/sjtjcx/czcx',
children: [
{ id: id(), title: '测值查询', path: '/mgr/gcaqjc/sjtjcx/czcx' },
{ id: id(), title: '渗压监测', path: '/mgr/gcaqjc/sjtjcx/syjx' },
{ id: id(), title: '渗流监测 ', path: '/mgr/gcaqjc/sjtjcx/sljx' },
{ id: id(), title: '位移监测 ', path: '/mgr/gcaqjc/sjtjcx/wyjx' },
{ id: id(), title: '年度渗压统计表', path: '/mgr/gcaqjc/sjtjcx/ndsytjb' },
{ id: id(), title: '年度渗流统计表', path: '/mgr/gcaqjc/sjtjcx/ndsltjb' },
]
},
],
},
{
id: id(), title: '水资源调度', redirect: '/mgr/szydd/gsnlfx', icon: 'aqjc',
children: [
{
id: id(), title: '供水能力分析', path: '/mgr/szydd/gsnlfx',
},
{
id: id(), title: '调度记录', path: '/mgr/szydd/diaodu',
},
{
id: id(), title: '供水统计分析', path: '/mgr/szydd/gstjfx',
},
{
id: id(), title: '典型年降雨资料', path: '/mgr/szydd/dxnjyzl',
},
]
},
// { id: id(), title: '基本情况', path: '/mgr/home', icon: 'jbqk' },
// {
// id: id(),
// title: '防汛调度',
// redirect: '/mgr/fxzb/fhxs',
// icon: 'fxzb',
// children: [
// { id: id(), title: '防洪形势', path: '/mgr/fxzb/fhxs'},
// { id: id(), title: '天气预报', path: '/mgr/fxzb/tqyb'},
// {
// id: id(), title: '洪水预报', redirect: '/mgr/fxzb/hsyb/hyybjs',
// children: [
// { id: id(), title: '洪水预报计算', path: '/mgr/fxzb/hsyb/hyybjs' },
// { id: id(), title: '预报方案管理', path: '/mgr/fxzb/hsyb/ybfagl' },
// { id: id(), title: '参数管理', path: '/mgr/fxzb/hsyb/csgl' },
// ]
// },
// { id: id(), title: '调度规程', path: '/mgr/fxzb/ddgc'},
// { id: id(), title: '防汛预案', path: '/mgr/fxzb/fxya'},
// {
// id: id(),
// title: '抢险物料',
// path: '/mgr/fxzb/qxwl',
// },
// {
// id: id(),
// title: '抢险队伍',
// path: '/mgr/fxzb/qxdw',
// },
// ],
// },
// {
// id: id(),
// title: '工程安全监测',
// redirect: '/mgr/gcaqjc/gcaqyj/bzt',
// icon: 'fxzb',
// children: [
// { id: id(), title: '布置图', path: '/mgr/gcaqjc/gcaqyj/bzt' },
// {
// id: id(), title: '工程安全预警', redirect: '/mgr/gcaqjc/gcaqyj/yhyj',
// children: [
// { id: id(), title: '隐患预警', path: '/mgr/gcaqjc/gcaqyj/yhyj' },
// { id: id(), title: '预警规则配置', path: '/mgr/gcaqjc/gcaqyj/yjgzpz' },
// ]
// },
// {
// id: id(), title: '工程安全分析', redirect: '/mgr/gcaqjc/gcaqfx/jrx',
// children: [
// { id: id(), title: '浸润线', path: '/mgr/gcaqjc/gcaqfx/jrx' },
// ]
// },
// {
// id: id(), title: '数据统计查询', redirect: '/mgr/gcaqjc/sjtjcx/sljx',
// children: [
// { id: id(), title: '测值查询', path: '/mgr/gcaqjc/sjtjcx/czcx' },
// { id: id(), title: '渗压监测', path: '/mgr/gcaqjc/sjtjcx/syjx' },
// { id: id(), title: '渗流监测', path: '/mgr/gcaqjc/sjtjcx/sljx' },
// { id: id(), title: '位移监测', path: '/mgr/gcaqjc/sjtjcx/wyjx' },
// { id: id(), title: '年度渗压统计表', path: '/mgr/gcaqjc/sjtjcx/ndsytjb' },
// { id: id(), title: '年度渗流统计表', path: '/mgr/gcaqjc/sjtjcx/ndsltjb' },
// { id: id(), title: '年度位移统计表', path: '/mgr/gcaqjc/sjtjcx/ndwytjb' },
// ]
// },
// ],
// },
// {
// id: id(),
// title: '日常管理',
// redirect: '/mgr/rcgl/gcdsj',
// icon: 'fxzb',
// children: [
// {
// id: id(),
// title: '工程大事件',
// path: '/mgr/rcgl/gcdsj',
// },
// {
// id: id(), title: '值班管理', redirect: '/mgr/rcgl/zbgl/zbb',
// children: [
// { id: id(), title: '值班表', path: '/mgr/rcgl/zbgl/zbb' },
// { id: id(), title: '值班日志', path: '/mgr/rcgl/zbgl/zbrz' },
// ]
// },
// {
// id: id(),
// title: '水质整编',
// path: '/mgr/rcgl/szzb',
// },
// {
// id: id(),
// title: '生态流量监控',
// path: '/mgr/rcgl/stlljc',
// },
// ],
// }, {
// id: id(),
// title: '供水兴利',
// redirect: '/mgr/gsxl/zfzl',
// icon: 'fxzb',
// children: [
// {
// id: id(),
// title: '闸阀总览',
// path: '/mgr/gsxl/zfzl',
// },
// {
// id: id(),
// title: '闸阀监控',
// path: '/mgr/gsxl/zfjk',
// },
// {
// id: id(),
// title: '供水统计分析',
// path: '/mgr/gsxl/gstjfx',
// },
// {
// id: id(),
// title: '典型年降雨资料',
// path: '/mgr/gsxl/dxnjyzl',
// },
// ],
// },
// {
// id: id(),
// title: '视频监控',
// redirect: '/mgr/spjk/spjk',
// icon: 'spjk',
// children: [
// {
// id: id(),
// title: '视频监控',
// path: '/mgr/spjk/spjk',
// },
// {
// id: id(),
// title: 'AI告警',
// path: '/mgr/spjk/aiWarn',
// },
// ],
// },
// {
// id: id(),
// title: '数字孪生大屏',
// path: '/',
// icon: 'spjk'
// },
{ id: id(), title: '安全监测', path: '/mgr/aqjc', icon: 'sz' },
{
id: id(), title: '设备维护', path: '/mgr/sbwh/wxyhgl/wxfabz', icon: 'sz',
children: [
{
id: id(), title: '维修养护管理', redirect: '/mgr/sbwh/wxyhgl/wxfabz',
children: [
{ id: id(), title: '维护方案编制', path: '/mgr/sbwh/wxyhgl/wxfabz' },
{ id: id(), title: '实施过程记录', path: '/mgr/sbwh/wxyhgl/ssgcjl' },
{ id: id(), title: '维护项目验收', path: '/mgr/sbwh/wxyhgl/whxmys' },
]
},
{
id: id(), title: '设备物资管理', redirect: '/mgr/sbwh/sbwzgl/cgtzgl',
children: [
{ id: id(), title: '采购台账管理', path: '/mgr/sbwh/sbwzgl/cgtzgl' },
{ id: id(), title: '库存核算管理', path: '/mgr/jcsj/bjgl/kchsgl' },
{ id: id(), title: '备品备件管理', path: '/mgr/jcsj/bjgl/bpbjgl' },
{ id: id(), title: '综合分析考核', path: '/mgr/jcsj/bjgl/zhfxkh' },
]
},
]
},
{
id: id(), title: '工程运行', path: '/mgr/gcyx/xxcx/jbqk', icon: 'sz',
children: [
{
id: id(), title: '信息查询', redirect: '/mgr/gcyx/xxcx/jbqk',
children: [
{ id: id(), title: '基本情况', path: '/mgr/gcyx/xxcx/jbqk' },
{ id: id(), title: '运行情况', path: '/mgr/gcyx/xxcx/yxqk' },
{ id: id(), title: '统计报表', path: '/mgr/gcyx/xxcx/tjbb' },
{ id: id(), title: '操作日志', path: '/mgr/gcyx/xxcx/czrz' },
]
},
]
},
{
id: id(), title: '系统管理', path: '/mgr/xtgl/yhxx', icon: 'sz',
children: [
{
id: id(), title: '用户信息', path: '/mgr/xtgl/yhxx',
},
]
},
]
}

1139
src/service/apiurl.js
View File

File diff suppressed because it is too large Load Diff

261
src/service/sssq.js
View File

@ -1,261 +0,0 @@
import {httppost, httpget, httpget2,httpget3} from "../utils/request";
import {message} from 'antd';
import apiurl from './apiurl';
import moment from 'moment'
//实时水情-河道水情列表
export async function list(params) {
const {data, code, msg} = await httppost(apiurl.sssq.list, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时水情-水库水情列表
export async function reservoirlist(params) {
const {data, code, msg} = await httppost(apiurl.sssq.reservoirlist, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
// const list = data?.filter(o => o.lgtd && o.lttd)
return data;
}
//实时水情-河道水情汇总
export async function summaryInfo(params) {
const {data, code, msg} = await httppost(apiurl.sssq.summaryInfo, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时水情-河道水情统计
export async function warn(params) {
const {data, code, msg} = await httppost(apiurl.sssq.warn, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时水情-水库水情汇总
export async function reservoirsummaryInfo(params) {
const {data, code, msg} = await httppost(apiurl.sssq.reservoirsummaryInfo, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时水情-水库水情统计
export async function reswarn(params) {
const {data, code, msg} = await httppost(apiurl.sssq.reswarn, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//详情-监测数据
export async function monitor(params) {
params.stm = moment(params.stm).format("YYYY-MM-DD HH:mm:ss")
params.etm = moment(params.etm).format("YYYY-MM-DD HH:mm:ss")
const {data, code, msg} = await httppost(apiurl.sssq.monitor, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//详情-监测数据-下方表格
export async function getDetail(params) {
const {data, code, msg} = await httpget(apiurl.sssq.detail, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//详情-水位流量关系
export async function zqrl(stcd) {
const {data, code, msg} = await httpget(apiurl.sssq.zqrl, {stcd}) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//详情-图像监测视角
export async function channel(params) {
const {data, code, msg} = await httpget2(apiurl.sssq.channel, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//详情-图像监测
export async function imageinfo(params) {
params.pageSo = {
pageSize: params.pageSize,
pageNumber: params.pageNumber,
}
const {data, code, msg} = await httppost(apiurl.sssq.imageinfo, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//详情-图像监测
export async function reservoirmonitor(params) {
params.stm = moment(params.stm).format("YYYY-MM-DD HH:mm:ss")
params.etm = moment(params.etm).format("YYYY-MM-DD HH:mm:ss")
const {data, code, msg} = await httppost(apiurl.sssq.reservoirmonitor, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//基本信息
export async function attResBase(params) {
const {data, code, msg} = await httpget2(apiurl.sssq.attResBase, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//库容曲线
export async function zvarl(params) {
const {data, code, msg} = await httpget2(apiurl.sssq.zvarl, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//责任体系
export async function person(params) {
const {data, code, msg} = await httppost(apiurl.sssq.person, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//挡水建筑物
export async function dam(params) {
const {data, code, msg} = await httppost(apiurl.sssq.dam, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//泄水建筑物
export async function drainage(params) {
const {data, code, msg} = await httppost(apiurl.sssq.drainage, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//输水建筑物
export async function transport(params) {
const {data, code, msg} = await httppost(apiurl.sssq.transport, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//建设信息
export async function construction(params) {
const {data, code, msg} = await httppost(apiurl.sssq.construction, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//工程图片
export async function projectimg(params) {
const {data, code, msg} = await httppost(apiurl.sssq.projectimg, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//防汛预案
export async function plan(params) {
const {data, code, msg} = await httppost(apiurl.sssq.plan, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//设计报告
export async function file(params) {
const {data, code, msg} = await httppost(apiurl.sssq.file, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//根据id查文件
export async function fileget(params) {
const {data, code, msg} = await httpget3(apiurl.sssq.fileget, params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}

185
src/service/ssyq.js
View File

@ -1,185 +0,0 @@
import { httppost,httppost1, httppost2, httpget } from "../utils/request";
import { message } from 'antd';
import apiurl from './apiurl';
import moment from 'moment'
//流域选择
export async function basNameList() {
const { data, code, msg } = await httpget(apiurl.ssyq.basNameList) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//行政选择
export async function adnmList() {
const { data, code, msg } = await httpget(apiurl.ssyq.adnmList) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-列表
export async function list(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.list,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-站点统计
export async function count(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.count,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-站点统计
export async function level(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.level,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-库区降雨
export async function res(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.res,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-区域降雨
export async function adcd(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.adcd,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-流域降雨
export async function bas(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.bas,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-频率统计
export async function freq(params) {
let Myparams={
timeType:1,
...params
}
const { data, code, msg } = await httppost(apiurl.ssyq.freq,Myparams) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-弹框详情-监测数据-天
export async function StcdAndStartTimeAndEndTime(params) {
params.startTime=moment(params.startTime).format("YYYY-MM-DD HH:mm:ss")
params.endTime=moment(params.endTime).format("YYYY-MM-DD HH:mm:ss")
const { data, code, msg } = await httppost(apiurl.ssyq.StcdAndStartTimeAndEndTime,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-弹框详情-监测数据-小时
export async function StcdAndStartTimeAndEndTimeHour(params) {
params.startTime=moment(params.startTime).format("YYYY-MM-DD HH:mm:ss")
params.endTime=moment(params.endTime).format("YYYY-MM-DD HH:mm:ss")
const { data, code, msg } = await httppost(apiurl.ssyq.StcdAndStartTimeAndEndTimeHour,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
export async function maxDrpUrl(params) {
params.startTime=moment(params.startTime).format("YYYY-MM-DD HH:mm:ss")
params.endTime=moment(params.endTime).format("YYYY-MM-DD HH:mm:ss")
const { data, code, msg } = await httppost(apiurl.ssyq.maxDrp,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-弹框详情-测站编码查详细雨量
export async function queryStPptnDetails(stcd) {
const { data, code, msg } = await httpget(apiurl.ssyq.queryStPptnDetails,{stcd}) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-弹框详情-周边雨情
export async function queryNearbyRainStations(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.queryNearbyRainStations,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-弹框详情-监测数据-天-图表
export async function queryStStbprpPerDayChart(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.queryStStbprpPerDayChart,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}
//实时雨情-弹框详情-监测数据-小时-图表
export async function queryStStbprpPerHourChart(params) {
const { data, code, msg } = await httppost(apiurl.ssyq.queryStStbprpPerHourChart,params) || {};
if (code !== 200) {
message.error(msg || '请求失败');
}
return data;
}

245
src/views/AppRouters.tsx
View File

@ -5,119 +5,11 @@ import DashboardLayout from '../components/DashboardLayout'
import { Dispatch } from '../models/store'
import LoginPage from './Login/index1'
import Sszq from './ysgzq/sszq'
import Yxqk from './ysgzq/ssgq/yxqk'
import Gcxq from './ysgzq/ssgq/gcxq'
import Dbaq from './ysgzq/ssgq/dbaq'
import Skhs from './fxdd/hsyb/skhs'
import Hdhs from './fxdd/hsyb/hdhs'
import Yjxy from './fxdd/ddjc/yjxy'
import Ddzl from './fxdd/ddjc/ddzl'
import Ddgc from "./fxzb/ddgc"
import Fxya from './fxzb/fxya'
import Hsybjs from './fxzb/hsybjs'
import Ybfagl from './fxzb/ybfagl'
import Csgl from './fxzb/csgl'
import Qxdw_Gc from './fxzb/qxdw/gc/index.js'
import Qxwl_Gc from './fxzb/qxwl/gc'
// 工程安全监测
import Bzt from './gcaqjc/bzt'
import Yhyj from "./gcaqjc/gcaqyj/yhyj"
import Yjgzpz from "./gcaqjc/gcaqyj/yjgzpz"
import Sljc from "./gcaqjc/sjtjcx/sljc"
import Syjc from "./gcaqjc/sjtjcx/syjc"
import Wyjc from "./gcaqjc/sjtjcx/wyjc"
import Czcx from "./gcaqjc/sjtjcx/czcx"
import Ndsytjb from "./gcaqjc/sjtjcx/ndsytjb"
import Ndsltjb from "./gcaqjc/sjtjcx/ndsltjb"
import Ndwytjb from "./gcaqjc/sjtjcx/ndwytjb"
import Jrx from "./gcaqjc/gcaqfx/jrx"
// 日常管理
import Rjswnbb from "./rcgl/btbb/rjswnbb"
import Rjylnbb from "./rcgl/btbb/rjynbb"
import Sdswrbb from "./rcgl/btbb/sdswrbb"
import Sdjyrbb from "./rcgl/btbb/sdjyrbb"
import Xjrw from "./rcgl/xcxj/xjrw"
import Xjwtcl from "./rcgl/xcxj/xjwtcl"
import Xjxpz from "./rcgl/xcxj/xjxpz"
import Fzxc from "./rcgl/byfz/fzxc"
import Bypc from "./rcgl/byfz/bypc"
import Zmjk from "./rcgl/zmjk"
import Wxyh from "./rcgl/wxyh"
import Szzb from "./rcgl/szzb"
import Stlljc from "./rcgl/stlljc"
import Aqyhpc from "./rcgl/aqgl/aqyhpc"
import Aqjcgl from "./rcgl/aqgl/aqjcgl"
import Aqsgdj from "./rcgl/aqgl/aqsgdj"
import Aqjdtz from "./rcgl/aqgl/aqjdtz"
import Cxjgtz from "./rcgl/aqgl/cxjgtz"
import Fxgkqd from "./rcgl/aqgl/fxgkqd"
import Khzbgl from "./rcgl/jdkh/khzbgl"
import Khmbgl from "./rcgl/jdkh/khmbgl"
import Khtj from "./rcgl/jdkh/khtj"
import Khwtzg from "./rcgl/jdkh/khwtzg"
import Khrwgl from "./rcgl/jdkh/khrwgl"
// 值班管理
import Zbb from "./zbgl/zbb"
import Zbrz from "./zbgl/zbrz"
// import Gcdsj from "./rcgl/gcdsj"
import VideoList from './video'
// 供水兴利
import Dxnjyzl from "./gxsl/dxnjyzl"
import Zfzl from "./gxsl/zfzl"
import Zfjk from './gxsl/zfjk'
import Gstjfx from "./gxsl/gstjfx"
// 视频监控
import Spjk from "./video"
import AiWarn from "./spjk/aiWarn"
// 广播预警
import Gbyj from "./gbyj/index"
// 四全
import Zcdjxx from './sq/qfg/zcdjxx'
import Kqys from './sq/qys/kqys/index.js'
import Xyys from './sq/qys/xyys/index.js'
import Gcys from './sq/qys/gcys/index.js'
import Gcdsj from './sq/qzq/gcdsj'
import Sksq from './sq/qth/sksq'
import Hdsq from './sq/qth/hdsq'
import Ssyq from './sq/qth/ssyq'
import Qzqda from './sq/qzq/qzqda'
// import Zcdjxx from './sq/qys/'
// import Zcdjxx from './sq/qfg/zcdjxx'
// import Zcdjxx from './sq/qfg/zcdjxx'
// import Zcdjxx from './sq/qfg/zcdjxx'
// 四制 - 组织机构查看
import Zzjgck from './sz/zzjgck'
import Zrrgl from './sz/zrrgl'
import Pxjhgl from './sz/pxjhgl'
import Pxjlgl from './sz/pxjlgl'
import Flfg from './sz/flfg'
import Zdgl from './sz/zdgl'
import Ajdj from './sz/szzf/ajdj'
import Ajtj from './sz/szzf/ajtj'
import Clyj from './sz/szzf/clyj'
import Krgl from './KrLine'
import Gsnlfx from './gxsl/gsnlfx'
import Ddjl from './szydd/ddjl'
const HomePage = lazy(() => import('./Home'))
const IframePage = lazy(() => import('./Iframe'))
const AppRouters: React.FC = () => {
const dispatch = useDispatch<Dispatch>()
@ -131,150 +23,13 @@ const AppRouters: React.FC = () => {
let element = useRoutes([
{ path: '/', element: <LoginPage /> },
// { path: '/', element: <DashboardLayout /> },
// { id: id(), title: '洪水预报计算', path: '/mgr/fxzb/hsyb/hyybjs' },
// { id: id(), title: '预报方案管理', path: '/mgr/fxzb/hsyb/ybfagl' },
// { id: id(), title: '参数管理', path: '/mgr/fxzb/hsyb/csgl' },
{
path: '/mgr',
element: <DashboardLayout />,
children: [
{ path: 'home', element: <HomePage /> },
//四预
{ path: 'sy/fhxzfx', element: <HomePage /> },
{ path: 'sy/tqyb', element: <HomePage /> },
//四预-洪水预报
{ path: 'sy/hsyb/hyybjs', element: <Hsybjs /> },
{ path: 'sy/hsyb/ybfagl', element: <Ybfagl /> },
{ path: 'sy/hsyb/csgl', element: <Csgl /> },
// 调度规程
{ path: 'sy/ddgc', element: <Ddgc /> },
// 防汛预案
{ path: 'sy/fxya', element: <Fxya /> },
// 抢险物料
{ path: 'sy/qxwl', element: <Qxwl_Gc /> },
// 抢险队伍
{ path: 'sy/qxdw', element: <Qxdw_Gc /> },
// 工程安全监测
{ path: 'sq/qth/dbaqjc', element: <Bzt isHome={false}/> },
{ path: 'sq/qth/sksq', element: <Sksq /> },
{ path: 'sq/qth/hdsq', element: <Hdsq /> },
{ path: 'sq/qth/ssyq', element: <Ssyq /> },
// 预警
{ path: 'gcaqjc/gcaqyj/bzt', element: <Bzt isHome={false}/> },
{ path: 'gcaqjc/gcaqyj/yhyj', element: <Yhyj /> },
{ path: 'gcaqjc/gcaqyj/yjgzpz', element: <Yjgzpz /> },
//统计
{ path: 'gcaqjc/sjtjcx/syjx', element: <Syjc /> },
{ path: 'gcaqjc/sjtjcx/sljx', element: <Sljc /> },
{ path: 'gcaqjc/sjtjcx/wyjx', element: <Wyjc /> },
{ path: 'gcaqjc/sjtjcx/czcx', element: <Czcx /> },
{ path: 'gcaqjc/sjtjcx/ndsytjb', element: <Ndsytjb /> },
{ path: 'gcaqjc/sjtjcx/ndsltjb', element: <Ndsltjb /> },
{ path: 'gcaqjc/sjtjcx/ndwytjb', element: <Ndwytjb /> },
// 工程安全分析
{ path: 'gcaqjc/gcaqfx/jrx', element: <Jrx /> },
// 日常管理-水质整编
{ path: 'sg/btbb/rjswbb', element: <Rjswnbb /> },
{ path: 'sg/btbb/rjylnbb', element: <Rjylnbb /> },
{ path: 'sg/btbb/sdswbb', element: <Sdswrbb /> },
{ path: 'sg/btbb/sdjyrbb', element: <Sdjyrbb /> },
{ path: 'sg/xcxj/xcrw', element: <Xjrw /> },
{ path: 'sg/xcxj/xjwtcl', element: <Xjwtcl /> },
{ path: 'sg/xcxj/xjxpz', element: <Xjxpz/> },
{ path: 'sg/byfz/byxc', element: <Fzxc /> },
{ path: 'sg/byfz/bypc', element: <Bypc /> },
{ path: 'sg/zmjk', element: <Zmjk /> },
{ path: 'sg/wxyh', element: <Wxyh /> },
{ path: 'sg/aqgl/aqjcgl', element: <Aqjcgl /> },
{ path: 'sg/aqgl/fxgkqd', element: <Fxgkqd /> },
{ path: 'sg/aqgl/cxjgtz', element: <Cxjgtz /> },
{ path: 'sg/aqgl/aqjdtz', element: <Aqjdtz /> },
{ path: 'sg/aqgl/aqyhpc', element: <Aqyhpc /> },
{ path: 'sg/aqgl/aqsgdj', element: <Aqsgdj /> },
{ path: 'sg/gcdsj', element: <Gcdsj /> },
{ path: 'sg/szzb', element: <Szzb /> },
{ path: 'sg/krgl', element: <Krgl /> },
{ path: 'rcgl/stlljc', element: <Stlljc /> },
{ path: 'sg/zbgl/zbb', element: <Zbb /> },
{ path: 'sg/zbgl/zbrz', element: <Zbrz /> },
// 日常管理-监督考核
{ path: 'sz/jdkh/khtj', element: <Khtj /> },
{ path: 'sz/jdkh/khzbgl', element: <Khzbgl /> },
{ path: 'sz/jdkh/khmbgl', element: <Khmbgl /> },
{ path: 'sz/jdkh/khwtzg', element: <Khwtzg /> },
{ path: 'sz/jdkh/khrwgl', element: <Khrwgl /> },
// 供水兴利
{ path: 'gsxl/zfzl', element: <Zfzl /> },
{ path: 'gsxl/zfjk', element: <Zfjk /> },
{ path: 'szydd/diaodu', element: <Ddjl/> },
{ path: 'szydd/gsnlfx', element: <Gsnlfx /> },
{ path: 'szydd/gstjfx', element: <Gstjfx /> },
{ path: 'szydd/dxnjyzl', element: <Dxnjyzl /> },
{ path: 'fxzb/jczw/yqz', element: <HomePage /> },
{ path: 'fxzb/jczw/sqz', element: <HomePage /> },
// 视频监控
{ path: 'sq/qth/spjk', element: <Spjk /> },
{ path: 'sg/gjgl/aigj', element: <AiWarn /> },
{ path: 'sg/gjgl/gbyj', element: <Gbyj /> },
// { path: 'fxzb/zbb', element: <Zbb /> },
// { path: 'fxzb/txl', element: <Txl /> },
{ path: 'ysgzq/ssyq', element: <HomePage /> },
{ path: 'ysgzq/sssq', element: <HomePage /> },
{ path: 'ysgzq/sszq', element: <Sszq /> },
{ path: 'ysgzq/ssgq/yxqk', element: <Yxqk /> },
{ path: 'ysgzq/ssgq/gcxq', element: <Gcxq /> },
{ path: 'ysgzq/ssgq/dbaq', element: <Dbaq /> },
{ path: 'fxdd/dqxsfx', element: <HomePage /> },
{ path: 'fxdd/tqyb', element: <HomePage /> },
{ path: 'fxdd/hsyb/skhs', element: <Skhs /> },
{ path: 'fxdd/hsyb/hdhs', element: <Hdhs /> },
{ path: 'fxdd/ddjc/yjxy', element: <Yjxy /> },
{ path: 'fxdd/ddjc/ddzl', element: <Ddzl /> },
{ path: 'videoSurveillance', element: <VideoList /> },
// 四全
// 注册登记信息
{ path: 'sq/qfg/zcdjxx', element: <Zcdjxx /> },
//库区要素
{ path: 'sq/qys/kqys', element: <Kqys /> },
{ path: 'sq/qys/xyys', element: <Xyys /> },
{ path: 'sq/qys/gcys', element: <Gcys /> },
{ path: 'sq/qzq/gcdsj', element: <Gcdsj /> },
{ path: 'sq/qys/qzqda', element: <Qzqda /> },
// 四制-组织机构查看
{ path: 'sz/gltx/zzjgck', element: <Zzjgck /> },
{ path: 'sz/gltx/zrrgl', element: <Zrrgl /> },
{ path: 'sz/pxgl/pxjhgl', element: <Pxjhgl /> },
{ path: 'sz/pxgl/pxjlgl', element: <Pxjlgl /> },
{ path: 'sz/flfg', element: <Flfg /> },
{ path: 'sz/zdgl', element: <Zdgl /> },
{ path: 'sz/szzf/ajdj', element: <Ajdj /> },
{ path: 'sz/szzf/ajtj', element: <Ajtj /> },
{ path: 'sz/szzf/clyj', element: <Clyj /> },
],
},

35
src/views/Home/InfoPops/PicStPop/index.js
View File

@ -1,35 +0,0 @@
import React from 'react'
import {config} from '../../../../config';
import { getRealPic } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
function PicStPop({ record, dispatch }) {
const { data, loading } = useRequest(() => getRealPic(record));
return (
<>
<div className="boxhead"></div>
<div className="featuretip-title">
<div className="name">{record.stnm}{data?.tm ? `(${data.tm})` : ''}</div>
</div>
<div >
{
loading ? (
<span>载入中</span>
) : (
data?.img ? (
<img alt="img" src={'data:image/jpeg;base64,' + data.img} />
) : (
<span>无图片</span>
)
)
}
</div>
<div className="boxfoot"></div>
</>
)
}
export default React.memo(PicStPop);

14
src/views/Home/InfoPops/index.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import PicStPop from './PicStPop';
export const InfoPopNames = {
PicStPop: 'PicStPop',
};
export const InfoPops = ({ type, properties, dispatch }) => {
if (type === InfoPopNames.PicStPop) {
return <PicStPop record={properties} dispatch={dispatch} />
}
return null;
}

BIN
src/views/Home/Introduction/dcpj/img/dcpj-js.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 KiB

BIN
src/views/Home/Introduction/dcpj/img/dcpj-wf.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 88 KiB

0
src/views/Home/Introduction/dcpj/index.less
View File

346
src/views/Home/Introduction/dcpj/index.tsx
View File

@ -1,346 +0,0 @@
import React, {useMemo, useState} from 'react';
import {Descriptions, Table, Tabs} from 'antd';
import staticData from '../../../staticData';
import "./index.less"
import useCrud from '../../../../components/crud/useCrud';
import {ColumnsType} from "antd/lib/table";
import { CRUD_NAMES } from '../../../../components/crud/useCrud';
import usePageTable from '../../../../components/crud/usePageTable';
const { TabPane } = Tabs;
type IProps = {
}
const systemSwitchType = localStorage.getItem('address') && localStorage.getItem('address')==="wufeng";
localStorage.getItem('address')
console.log(localStorage.getItem('address'))
const BasePage: React.FC<IProps> = ({ }) => {
const crud = useCrud();
// @ts-ignore
const pager = usePageTable(async (params?: SearchOption) =>
{
return {
list: systemSwitchType?[
{
"cultiArea": 132,
"hasChildren": true,
"landArea": 4.53,
"adcd": "420529203001000",
"lttd": 30.213941,
"remark": null,
"list": null,
"house": 358,
"cutoffDate": 1465994645000,
"population": 1323,
"adnm": "采花社区",
"prevtpnm": "非防治区",
"household": 358,
"lgtd": 110.449803,
"prevtp": "0"
},
{
"cultiArea": 226,
"hasChildren": false,
"landArea": 3.51,
"adcd": "420529203001106",
"lttd": 30.214687,
"remark": null,
"list": null,
"house": 116,
"cutoffDate": 1465994690000,
"population": 406,
"adnm": "中街",
"prevtpnm": "重点防治区",
"household": 116,
"lgtd": 110.450705,
"prevtp": "2"
},
{
"cultiArea": 413,
"hasChildren": false,
"landArea": 3.51,
"adcd": "420529203001107",
"lttd": 30.216293,
"remark": null,
"list": null,
"house": 89,
"cutoffDate": 1465994684000,
"population": 315,
"adnm": "下街",
"prevtpnm": "重点防治区",
"household": 89,
"lgtd": 110.450165,
"prevtp": "2"
},
{
"cultiArea": 467,
"hasChildren": false,
"landArea": 3.51,
"adcd": "420529203001108",
"lttd": 30.205698,
"remark": null,
"list": null,
"house": 153,
"cutoffDate": 1465994678000,
"population": 602,
"adnm": "上街",
"prevtpnm": "重点防治区",
"household": 153,
"lgtd": 110.445732,
"prevtp": "2"
},
{
"cultiArea": 2270,
"hasChildren": true,
"landArea": 13.7,
"adcd": "420529203201000",
"lttd": 30.217673,
"remark": null,
"list": null,
"house": 231,
"cutoffDate": 1465997223000,
"population": 750,
"adnm": "长茂司村",
"prevtpnm": "非防治区",
"household": 231,
"lgtd": 110.452802,
"prevtp": "0"
},
{
"cultiArea": 754,
"hasChildren": false,
"landArea": 6.53,
"adcd": "420529203201100",
"lttd": 30.225834,
"remark": null,
"list": null,
"house": 101,
"cutoffDate": 1465997333000,
"population": 350,
"adnm": "三组（胡家台）",
"prevtpnm": "重点防治区",
"household": 101,
"lgtd": 110.452846,
"prevtp": "2"
},
{
"cultiArea": 759,
"hasChildren": false,
"landArea": 6.61,
"adcd": "420529203201101",
"lttd": 30.218348,
"remark": null,
"list": null,
"house": 30,
"cutoffDate": 1465997246000,
"population": 100,
"adnm": "二组（茶丘）",
"prevtpnm": "重点防治区",
"household": 30,
"lgtd": 110.45266,
"prevtp": "2"
},
{
"cultiArea": 757,
"hasChildren": false,
"landArea": 6.57,
"adcd": "420529203201102",
"lttd": 30.208181,
"remark": null,
"list": null,
"house": 100,
"cutoffDate": 1465997417000,
"population": 300,
"adnm": "一组（长茂司）",
"prevtpnm": "一般防治区",
"household": 100,
"lgtd": 110.451124,
"prevtp": "1"
},
]:[
{
"cultiArea": 95638.15,
"hasChildren": true,
"landArea": 372.84,
"adcd": "422822100000000",
"lttd": 30.60279,
"remark": null,
"list": null,
"house": 21576,
"cutoffDate": null,
"population": 132402,
"adnm": "业州镇",
"prevtpnm": "非防治区",
"household": 21576,
"lgtd": 109.716677,
"prevtp": "0"
},
{
"cultiArea": 82890,
"hasChildren": true,
"landArea": 259.8,
"adcd": "422822101000000",
"lttd": 30.661992,
"remark": null,
"list": null,
"house": 18084,
"cutoffDate": null,
"population": 53304,
"adnm": "高坪镇",
"prevtpnm": "非防治区",
"household": 18084,
"lgtd": 110.076703,
"prevtp": "0"
},
{
"cultiArea": 28323.15,
"hasChildren": true,
"landArea": 85.13,
"adcd": "422822102000000",
"lttd": 30.550984,
"remark": null,
"list": null,
"house": 6638,
"cutoffDate": null,
"population": 20457,
"adnm": "红岩寺镇",
"prevtpnm": "非防治区",
"household": 6638,
"lgtd": 109.902764,
"prevtp": "0"
},
{
"cultiArea": 51970.95,
"hasChildren": true,
"landArea": 160.39,
"adcd": "422822103000000",
"lttd": 30.350414,
"remark": null,
"list": null,
"house": 10133,
"cutoffDate": null,
"population": 40479,
"adnm": "景阳镇",
"prevtpnm": "非防治区",
"household": 10133,
"lgtd": 109.969684,
"prevtp": "0"
},
{
"cultiArea": 87455.4,
"hasChildren": true,
"landArea": 372.86,
"adcd": "422822104000000",
"lttd": 30.240167,
"remark": null,
"list": null,
"house": 16273,
"cutoffDate": null,
"population": 55773,
"adnm": "官店镇",
"prevtpnm": "非防治区",
"household": 16273,
"lgtd": 110.041068,
"prevtp": "0"
},
{
"cultiArea": 101027.85,
"hasChildren": true,
"landArea": 405.67,
"adcd": "422822105000000",
"lttd": 30.446302,
"remark": null,
"list": null,
"house": 15289,
"cutoffDate": null,
"population": 56934,
"adnm": "花坪镇",
"prevtpnm": "非防治区",
"household": 15289,
"lgtd": 109.997533,
"prevtp": "0"
},
{
"cultiArea": 99281.4,
"hasChildren": true,
"landArea": 398.14,
"adcd": "422822200000000",
"lttd": 30.687276,
"remark": null,
"list": null,
"house": 20362,
"cutoffDate": null,
"population": 53361,
"adnm": "长梁乡",
"prevtpnm": "非防治区",
"household": 20362,
"lgtd": 109.754904,
"prevtp": "0"
},
{
"cultiArea": 35711.4,
"hasChildren": true,
"landArea": 210.7,
"adcd": "422822201000000",
"lttd": 30.800129,
"remark": null,
"list": null,
"house": 6406,
"cutoffDate": null,
"population": 23303,
"adnm": "茅田乡",
"prevtpnm": "非防治区",
"household": 6406,
"lgtd": 109.880439,
"prevtp": "0"
},
],
totalRow: 6
};
}
);
return (
<div className="introductionTable">
{/* 切换页面 */}
{
localStorage.getItem('address') === 'jianshi' && (
<div className="bigTable">
<Descriptions column={{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }} >
<Descriptions.Item label="行政区总人口(万人)"><span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>51</span></Descriptions.Item>
<Descriptions.Item label="行政区总面积(km²)"><span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>2666</span></Descriptions.Item>
<Descriptions.Item label="耕地面积(亩)"><span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>705340</span></Descriptions.Item>
<Descriptions.Item label="乡镇总数(个)"><span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>10</span></Descriptions.Item>
</Descriptions>
</div>
)
}
{
localStorage.getItem('address') === 'wufeng' && (
<div className="bigTable">
<Descriptions column={{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }} >
<Descriptions.Item label="行政区总人口(万人)"><span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>20.7</span></Descriptions.Item>
<Descriptions.Item label="行政区总面积(km²)"><span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>2372</span></Descriptions.Item>
<Descriptions.Item label="耕地面积(亩)"><span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>29</span></Descriptions.Item>
<Descriptions.Item label="乡镇总数(个)"><span style={{fontWeight:"bold",fontSize:"15px", color:"#0000EE"}}>8</span></Descriptions.Item>
</Descriptions>
</div>
)
}
</div>
)
};
export default BasePage

103
src/views/Home/Introduction/dcpjDetails/DataTable.tsx
View File

@ -1,103 +0,0 @@
import {
EditOutlined, DeleteOutlined
} from '@ant-design/icons';
import {Tooltip, Input, Button, Card, Space, Table, Modal, Select, Divider, Popconfirm,Breadcrumb, Row} from 'antd';
import { ColumnsType } from 'antd/lib/table';
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import { CrudContext } from '../../../../components/crud/useCrud';
import { SearchOption } from "../../../../service/def";
// import ToolBar from './ToolBar';
import moment from "moment";
// import Dialog from './Dialog'
import { Pagination } from 'antd';
let MyImg= require ('../../../../assets/icons/搜索.png')
const { Option } = Select;
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
type IProps = {
pagerCtx: any;
crudCtx: CrudContext;
}
const DataTable: React.FC<IProps> = ({ pagerCtx, crudCtx }) => {
const columns1: ColumnsType<any> = [
{
title: '',
width: 140,
dataIndex: 'adnm',
key: 'name',
fixed: 'left',
// className:'tablecolor',
},
{
title: '',
width: 150,
dataIndex: 'adcd',
key: 'age',
},
{
title: '',
dataIndex: 'landArea',
key: '1',
width: 150,
},
{
title: '',
dataIndex: 'prevtpnm',
key: '2',
width: 150,
},
];
const width1 = useMemo(() => columns1.reduce((total: number, cur) => total + (cur.width as number), 0), [columns1]);
// 初始接收默认查询参数
const options1 = {
search: {
deptNames: null,
stm: moment().subtract(0, 'day').format("YYYY-MM-DD"),
etm: moment().format("YYYY-MM-DD"),
}};
const doSearch = (params:any) => {
const searchParams: SearchOption = {
search: {
...params
}
};
pagerCtx.search(searchParams);
};
return (
<>
<div className='gap-tabel1'>
{/*<div className="card-h-margin" />*/}
<Card className='nonebox2'>
<Table rowKey="id" columns={columns1} {...pagerCtx.tableProps} scroll={{ x: 20, y: 300 }} pagination={false}/>
</Card>
</div>
</>
)
};
export default DataTable

104
src/views/Home/Introduction/dcpjDetails/DataTable2.tsx
View File

@ -1,104 +0,0 @@
import {
EditOutlined, DeleteOutlined
} from '@ant-design/icons';
import {Tooltip, Input, Button, Card, Space, Table, Modal, Select, Divider, Popconfirm,Breadcrumb, Row} from 'antd';
import { ColumnsType } from 'antd/lib/table';
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import { CrudContext } from '../../../../components/crud/useCrud';
import { SearchOption } from "../../../../service/def";
// import ToolBar from './ToolBar';
import moment from "moment";
// import Dialog from './Dialog'
import { Pagination } from 'antd';
let MyImg= require ('../../../../assets/icons/搜索.png')
const { Option } = Select;
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
type IProps = {
pagerCtx: any;
crudCtx: CrudContext;
}
const DataTable: React.FC<IProps> = ({ pagerCtx, crudCtx }) => {
const columns1: ColumnsType<any> = [
{
title: ' ',
width: 140,
dataIndex: 'adnm',
key: 'name',
fixed: 'left',
// className:'tablecolor',
},
{
title: ' ',
width: 150,
dataIndex: 'adcd',
key: 'age',
},
{
title: ' ',
dataIndex: 'landArea',
key: '1',
width: 150,
},
{
title: ' ',
dataIndex: 'prevtpnm',
key: '2',
width: 150,
},
];
const width = useMemo(() => columns1.reduce((total: number, cur) => total + (cur.width as number), 0), [columns1]);
// 初始接收默认查询参数
const options1 = {
search: {
deptNames: null,
stm: moment().subtract(0, 'day').format("YYYY-MM-DD"),
etm: moment().format("YYYY-MM-DD"),
}};
const doSearch = (params:any) => {
const searchParams: SearchOption = {
search: {
...params
}
};
pagerCtx.search(searchParams);
};
return (
<>
<div className='gap-tabel1'>
{/*<div className="card-h-margin" />*/}
<Card className='nonebox2'>
<Table rowKey="id" columns={columns1} {...pagerCtx.tableProps} scroll={{ x: 20, y: 300 }} pagination={false}/>
</Card>
</div>
</>
)
};
export default DataTable

0
src/views/Home/Introduction/dcpjDetails/index.less
View File

641
src/views/Home/Introduction/dcpjDetails/index.tsx
View File

@ -1,641 +0,0 @@
import React, {useMemo, useState} from 'react';
import {Card, Checkbox, Select, Space, Table, Tabs} from 'antd';
import {ColumnsType} from "antd/lib/table";
import moment from "moment";
import {SearchOption} from "../../../../service/def";
import JsDcpjImg from "../dcpj/img/dcpj-js.jpg";
import WfDcpjImg from "../dcpj/img/dcpj-wf.jpg";
import DataTable from './DataTable';
import DataTable2 from './DataTable2';
import TableC from "./tableC";
import TableHz from "./tableHz";
import useCrud from '../../../../components/crud/useCrud';
import usePageTable from '../../../../components/crud/usePageTable';
const { TabPane } = Tabs;
type IProps = {
}
const BasePage: React.FC<IProps> = ({ }) => {
const columns = useMemo<ColumnsType<any>>(() => [
{ title: '序号', key: 'inx', width:70, dataIndex: 'inx', align:"center", fixed:"left", render: (text, rec, index) => index + 1 },
{ title: '行政区划码', key: 'name', width:100, dataIndex: 'name', align:"center", fixed:"left", },
{ title: '行政区名称', key: 'yjyl', width:100, dataIndex: 'yjyl', align:"center", fixed:"left", },
{ title: '防治区面积(万km2)', key: 'yjyzls', width:140, dataIndex: 'yjyzls' , align:"center", fixed:"left", },
{ title: '年鉴行政村数(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '上报乡镇数量(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '上报总村数(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '上报行政村数(个) ', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '上报自然村数(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '防治区总村数(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '一般防治区行政村数(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '一般防治区自然村数(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '重点防治区行政村数(个)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '重点防治区自然村数(个)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '非防治区村数(个) ', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '危险区数(个)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '企事业单位(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '历史山洪灾害记录数(条)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '需治理山洪沟数(条)', key: 'yjyzls', width:140, dataIndex: 'yjyzls' , align:"center"},
{ title: '自动监测站数量(座)', key: 'yjyzls', width:140, dataIndex: 'yjyzls' , align:"center"},
{ title: '简易雨量站(座)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '简易水位站(座)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '无线预警广播站(座) ', key: 'yjyzls', width:140, dataIndex: 'yjyzls' , align:"center"},
{ title: '桥梁数(座)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '路涵数(座)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '塘堰坝数(座)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '断面测量组数(组)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '多媒体文件数', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '空间标绘对象数', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '分析评价村数(个)', key: 'yjyzls', width:120, dataIndex: 'yjyzls' , align:"center"},
{ title: '设计暴雨成果总记录数(条)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '设计洪水成果总记录数(条)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '控制断面水位流量人口关系数(个)', key: 'yjyzls', width:140, dataIndex: 'yjyzls' , align:"center"},
{ title: '防洪现状评价村数(个)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '临界雨量成果村数(个)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '预警指标雨量成果村数(个)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '预警指标水位成果村数(个)', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
{ title: '危险区划分示意图数', key: 'yjyzls', width:100, dataIndex: 'yjyzls' , align:"center"},
], []);
const crud = useCrud();
const data:any = [];
const [selectVal, setSelectVal] = useState("0");
const handleChange = (value: string) => {
setSelectVal(value);
};
// 切换数据
const systemSwitchType = localStorage.getItem('address') && localStorage.getItem('address')==="wufeng";
// @ts-ignore
const pager = usePageTable(async (params?: SearchOption) =>
{
return {
list: systemSwitchType?[
{
"landArea": "行政区总人口（万人）",
"adcd": "20.7",
"adnm": "行政区总面积（km²）",
"prevtpnm": "2372",
},
{
"landArea": "乡镇总数(个)",
"adcd": "29",
"adnm": "耕地面积(亩)",
"prevtpnm": "8",
},{
"landArea": "自然村总数(个)",
"adcd": "108",
"adnm": "行政村总数(个)",
"prevtpnm": "338",
},{
"adnm": "防治区面积（km²）",
"adcd": "",
"landArea": "防治区总人口（万人）",
"prevtpnm": "9.9",
},{
"adnm": "受山洪威胁人口（人）",
"adcd": "7747",
"landArea": "受山洪威胁自然村数（个）",
"prevtpnm": "",
},{
"adnm": "受山洪威胁行政村数（个）",
"adcd": "15",
"landArea": "受山洪威胁自然村数（个）",
"prevtpnm": "164",
},
{
"adnm": "受山洪威胁严重的沿河村落数（个）",
"adcd": "10",
"landArea": "受山洪威胁的企事业单位数（个）",
"prevtpnm": "177",
},{
"adnm": "危险区数（个）",
"adcd": "294",
"landArea": "小流域数量（个）",
"prevtpnm": "209",
},{
"adnm": "自动监测站（座）",
"adcd": "32",
"landArea": "简易雨量站（座）",
"prevtpnm": "62",
},{
"adnm": "简易水位站（座）",
"adcd": "7",
"landArea": "无线预警广播站（座）",
"prevtpnm": "118",
},
{
"adnm": "桥梁（座）",
"adcd": "397",
"landArea": "路涵（座）",
"prevtpnm": "89",
},{
"adnm": "塘（堰）坝（座）",
"adcd": "22",
}
]:[
{
"landArea": "行政区总面积（km²）",
"adcd": "51",
"adnm": "行政区总人口（万人）",
"prevtpnm": "2666",
},
{
"landArea": "乡镇总数(个)",
"adcd": "705340",
"adnm": "耕地面积(亩)",
"prevtpnm": "10",
},{
"landArea": "自然村总数(个)",
"adcd": "410",
"adnm": "行政村总数(个)",
"prevtpnm": "851",
},{
"adnm": "防治区面积（km²）",
"adcd": "0",
"landArea": "防治区总人口（万人）",
"prevtpnm": "8.5",
},{
"adnm": "受山洪威胁人口（人）",
"adcd": "58336",
"landArea": "受山洪威胁自然村数（个）",
"prevtpnm": "",
},{
"adnm": "受山洪威胁行政村数（个）",
"adcd": "68",
"landArea": "受山洪威胁自然村数（个）",
"prevtpnm": "2",
},
{
"adnm": "受山洪威胁严重的沿河村落数（个）",
"adcd": "1",
"landArea": "受山洪威胁的企事业单位数（个）",
"prevtpnm": "109",
},{
"adnm": "危险区数（个）",
"adcd": "427",
"landArea": "小流域数量（个）",
"prevtpnm": "213",
},{
"adnm": "自动监测站（座）",
"adcd": "28",
"landArea": "简易雨量站（座）",
"prevtpnm": "193",
},{
"adnm": "简易水位站（座）",
"adcd": "17",
"landArea": "无线预警广播站（座）",
"prevtpnm": "162",
},
{
"adnm": "桥梁（座）",
"adcd": " 248",
"landArea": "路涵（座）",
"prevtpnm": "149",
},{
"adnm": "塘（堰）坝（座）",
"adcd": "6",
}
],
totalRow: 6
};
}
);
// @ts-ignore
const pager2 = usePageTable(async (params?: SearchOption) =>
{
return {
list: systemSwitchType?[
{
"adnm": "行政区划代码",
"adcd": "420529 ",
"landArea": "行政区划名称",
"prevtpnm": "五峰土家族自治县 ",
},
{
"adnm": "土地面积（km²）",
"adcd": "2372",
"landArea": "乡(镇)个数（个）",
"prevtpnm": "8 ",
},
{
"adnm": "年末总户数（户）",
"adcd": "71017",
"landArea": "乡村户数（户）",
"prevtpnm": "57084",
},
{
"adnm": "年末总人口（人）",
"adcd": "20.67",
"landArea": "乡村人口（人）",
"prevtpnm": "18.26",
},
{
"adnm": "年末单位从业人员数（人）",
"adcd": "83000",
"landArea": "乡村从业人员数（人）",
"prevtpnm": "115700",
}, {
"adnm": "农林牧渔业从业人员数（人）",
"adcd": "8000",
"landArea": "农业机械总动力（万千瓦特）",
"prevtpnm": "19.69",
}, {
"adnm": "固定电话用户（户）",
"adcd": "164900",
"landArea": "第一产业增加值（万元）",
"prevtpnm": "10218",
},
{
"adnm": "第二产业增加值（万元）",
"adcd": "29100",
"landArea": "地方财政一般预算收入（万元）",
"prevtpnm": "10218",
},{
"adnm": "地方财政一般预算支出（万元）",
"adcd": "262200 ",
"landArea": "城乡居民储蓄存款余额（万元）",
"prevtpnm": "600000",
},{
"adnm": "年末金融机构各项贷款余额（万元）",
"adcd": "189000 ",
"landArea": "粮食总产量（吨）",
"prevtpnm": "84400",
},{
"adnm": "棉花产量（吨）",
"adcd": "0",
"landArea": "油料产量（吨）",
"prevtpnm": "5373",
},{
"adnm": "肉类总产量（吨）",
"adcd": "32319",
"landArea": "规模以上工业企业个数（个）",
"prevtpnm": "179",
},
{
"adnm": "规模以上工业总产值(现价)（万元）",
"adcd": "463900 ",
"landArea": "固定资产投资(不含农户)（万元）",
"prevtpnm": "524200",
},{
"adnm": "普通中学在校学生数（人）",
"adcd": "5510",
"landArea": "小学在校学生数（人）",
"prevtpnm": "7512",
},{
"adnm": "医院、卫生院床位数（床）",
"adcd": "777",
"landArea": "各种社会福利收养性单位数（人）",
"prevtpnm": "8",
},{
"adnm": "各种社会福利收养性单位床位数（床）",
"adcd": "900",
"landArea": "规模以上工业企业个数（个）",
"prevtpnm": "179",
},
]:[
{
"adnm": "行政区划代码",
"adcd": "422822",
"landArea": "行政区划名称",
"prevtpnm": "建始县",
},
{
"adnm": "土地面积（km²）",
"adcd": "2666",
"landArea": "乡(镇)个数（个）",
"prevtpnm": "10 ",
},
{
"adnm": "年末总户数（户）",
"adcd": "130519",
"landArea": "乡村户数（户）",
"prevtpnm": "87324",
},
{
"adnm": "年末总人口（人）",
"adcd": "51",
"landArea": "乡村人口（人）",
"prevtpnm": "27.32",
},
{
"adnm": "年末单位从业人员数（人）",
"adcd": "65700",
"landArea": "乡村从业人员数（人）",
"prevtpnm": "230000",
}, {
"adnm": "农林牧渔业从业人员数（人）",
"adcd": "130200",
"landArea": "农业机械总动力（万千瓦特）",
"prevtpnm": "29.14",
}, {
"adnm": "固定电话用户（户）",
"adcd": "14627",
"landArea": "第一产业增加值（万元）",
"prevtpnm": "166600",
},
{
"adnm": "第二产业增加值（万元）",
"adcd": "211000",
"landArea": "地方财政一般预算收入（万元）",
"prevtpnm": " 127408",
},{
"adnm": "地方财政一般预算支出（万元）",
"adcd": "269872 ",
"landArea": "城乡居民储蓄存款余额（万元）",
"prevtpnm": "542152",
},{
"adnm": "年末金融机构各项贷款余额（万元）",
"adcd": " 444404 ",
"landArea": "粮食总产量（吨）",
"prevtpnm": "234000",
},{
"adnm": "棉花产量（吨）",
"adcd": "0",
"landArea": "油料产量（吨）",
"prevtpnm": "1.59",
},{
"adnm": "肉类总产量（吨）",
"adcd": "70100",
"landArea": "规模以上工业企业个数（个）",
"prevtpnm": "68",
},
{
"adnm": "规模以上工业总产值(现价)（万元）",
"adcd": "480324",
"landArea": "固定资产投资(不含农户)（万元）",
"prevtpnm": "584489",
},{
"adnm": "普通中学在校学生数（人）",
"adcd": "19245",
"landArea": "小学在校学生数（人）",
"prevtpnm": "28086",
},{
"adnm": "医院、卫生院床位数（床）",
"adcd": "2881",
"landArea": "各种社会福利收养性单位数（人）",
"prevtpnm": "13",
},{
"adnm": "各种社会福利收养性单位床位数（床）",
"adcd": "1527",
},
],
totalRow: 6
};
}
);
localStorage.getItem('address')
console.log(localStorage.getItem('address'))
return (
<div className="introductionTable">
<Space size="large" wrap>
{/* <Select
value={selectVal}
style={{ width: 260 }}
onChange={handleChange}
options={[
{
label: '综合',
options: [
{ label: 'B01-调查评价成果总体统计表', value: '0' },
],
},
{
label: '现场调查成果',
options: [{ label: 'C02-行政区划总体情况表', value: '1' }],
},
{
label: '汇总表',
options: [{ label: '防治区基本情况调查成果汇总表', value: '2' }],
},
]}
/> */}
</Space>
<div style={{marginTop:"16px"}} >
{
localStorage.getItem('address')
=== 'wufeng' && ( <p>五峰土家族自治县（420529）——调查评价成果汇总表</p>)
}
{
localStorage.getItem('address')
=== 'jianshi' && ( <p>建始县（422822）——调查评价成果汇总表</p>)
}
<DataTable crudCtx={crud} pagerCtx={pager} />
<p style={{margin:"20px 0"}}>县级社会经济情况表</p>
<DataTable2 crudCtx={crud} pagerCtx={pager2} />
<div style={{textAlign:"center"}}>
{/*
{
selectVal === "0"?
<img src={systemSwitchType?JsDcpjImg:JsDcpjImg} alt="" width="80%"/>
:null
} */}
{/* {
selectVal === "1"?<TableC />:null
}
{
selectVal === "2"?<TableHz />:null
} */}
</div>
</div>
</div>
)
};
export default BasePage

48
src/views/Home/Introduction/dcpjDetails/tableC.tsx
View File

@ -1,48 +0,0 @@
import React, {useMemo, useState} from 'react';
import {Checkbox, Select, Space, Table, Tabs} from 'antd';
import {ColumnsType} from "antd/lib/table";
import moment from "moment";
import {SearchOption} from "../../../../service/def";
import staticData from '../../../../views/staticData';
const { TabPane } = Tabs;
type IProps = {
}
const BasePage: React.FC<IProps> = ({ }) => {
const columns = useMemo<ColumnsType<any>>(() => [
{ title: '序号', key: 'inx', width:70, dataIndex: 'inx', align:"center", fixed:"left", render: (text, rec, index) => index + 1 },
{ title: '行政区划代码', key: 'ADCD', width:100, dataIndex: 'ADCD', align:"center", fixed:"left", },
{ title: '乡镇名称', key: 'ZHEN', width:100, dataIndex: 'ZHEN', align:"center", fixed:"left", },
{ title: '行政区划名称', key: 'ADNM', width:100, dataIndex: 'ADNM', align:"center", fixed:"left", },
{ title: '总人口(人)', key: 'PCOUNT', width:140, dataIndex: 'PCOUNT' , align:"center", fixed:"left", },
{ title: '总户数(户)', key: 'HTCOUNT', width:120, dataIndex: 'HTCOUNT' , align:"center"},
{ title: '土地面积(km2)', key: 'LDAREA', width:120, dataIndex: 'LDAREA' , align:"center"},
{ title: '耕地面积(亩)', key: 'PLAREA', width:120, dataIndex: 'PLAREA' , align:"center"},
{ title: '防治区类型', key: 'formateFangzhiquType', width:120, dataIndex: 'formateFangzhiquType' , align:"center"},
], []);
const data:any = staticData.dcpjTableC;
return (
<div className="introductionTable">
<div style={{marginTop:"16px"}}>
<Table
rowKey="key"
size="small"
columns={columns}
// @ts-ignore
dataSource={data}
scroll={{ y: 180 }}
pagination={false}
/>
</div>
</div>
)
};
export default BasePage

50
src/views/Home/Introduction/dcpjDetails/tableHz.tsx
View File

@ -1,50 +0,0 @@
import React, {useMemo, useState} from 'react';
import {Checkbox, Select, Space, Table, Tabs} from 'antd';
import {ColumnsType} from "antd/lib/table";
import moment from "moment";
import {SearchOption} from "../../../../service/def";
import staticData from '../../../../views/staticData';
const { TabPane } = Tabs;
type IProps = {
}
const BasePage: React.FC<IProps> = ({ }) => {
const columns = useMemo<ColumnsType<any>>(() => [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '行政区划代码', key: 'ADCD', width:100, dataIndex: 'ADCD', align:"center", fixed:"left", },
{ title: '乡镇名称', key: 'ZHEN', width:100, dataIndex: 'ZHEN', align:"center", fixed:"left", ellipsis: true},
{ title: '行政区划名称', key: 'ADNM', width:100, dataIndex: 'ADNM', align:"center", fixed:"left", ellipsis: true},
{ title: '总人口(人)', key: 'PCOUNT', width:140, dataIndex: 'PCOUNT' , align:"center", fixed:"left", },
{ title: '土地面积(km2)', key: 'LDAREA', width:120, dataIndex: 'LDAREA' , align:"center"},
{ title: '耕地面积(亩)', key: 'PLAREA', width:120, dataIndex: 'PLAREA' , align:"center"},
{ title: '总户数(户)', key: 'HTCOUNT', width:120, dataIndex: 'HTCOUNT' , align:"center"},
{ title: 'Ⅰ类经济户数(户)', key: 'ECOUNT1', width:120, dataIndex: 'ECOUNT1' , align:"center"},
{ title: 'Ⅱ类经济户数(户)', key: 'ECOUNT2', width:120, dataIndex: 'ECOUNT1' , align:"center"},
{ title: 'Ⅲ类经济户数(户)', key: 'ECOUNT3', width:120, dataIndex: 'ECOUNT1' , align:"center"},
], []);
const data:any = staticData.dcpjTableHzb;
return (
<div className="introductionTable">
<div style={{marginTop:"16px"}}>
<Table
rowKey="key"
size="small"
columns={columns}
// @ts-ignore
dataSource={data}
scroll={{ y: 180 }}
pagination={false}
/>
</div>
</div>
)
};
export default BasePage

BIN
src/views/Home/Introduction/fxyhdc/img/table0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
src/views/Home/Introduction/fxyhdc/img/table1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
src/views/Home/Introduction/fxyhdc/img/table2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
src/views/Home/Introduction/fxyhdc/img/table3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

0
src/views/Home/Introduction/fxyhdc/index.less
View File

101
src/views/Home/Introduction/fxyhdc/index.tsx
View File

@ -1,101 +0,0 @@
import React, {useMemo, useState} from 'react';
import {Checkbox, Modal, Table, Tabs} from 'antd';
import "./index.less"
import {config} from "../../../../config";
import {ColumnsType} from "antd/lib/table";
import Table0 from "../fxyhdc/img/table0.jpg";
import Table1 from "../fxyhdc/img/table1.jpg";
import Table2 from "../fxyhdc/img/table2.jpg";
import Table3 from "../fxyhdc/img/table3.jpg";
import { useLocation } from "react-router-dom";
const { TabPane } = Tabs;
type IProps = {
setVisible:any
setPdf:any
}
const BasePage: React.FC<IProps> = ({ setVisible,setPdf }) => {
const location = useLocation();
const [fxyhdcVisible, setFxyhdcVisible] = useState(false);
const [fxyhdcTitle, setFxyhdcTitle] = useState("");
//console.log(22222,location)
const handleCancelFxyhdc = () => {
setFxyhdcVisible(false);
}
const openTable = (val:any) => {
// setFxyhdcVisible(true);
if(val===0){
// setFxyhdcTitle("山洪灾害风险隐患保护对象名录表");
setVisible(true)
setPdf(`${process.env.PUBLIC_URL}/data/html/${localStorage.getItem('address')}/山洪灾害风险隐患保护对象名录表.html`)
}else if(val===1){
// setFxyhdcTitle("沟滩占地情况调查成果表");
setVisible(true)
setPdf(`${process.env.PUBLIC_URL}/data/html/${localStorage.getItem('address')}/沟滩占地情况调查成果表.html`)
}else if(val===2){
// setFxyhdcTitle("（雨量）外洪顶托城集镇及村落调查分析成果表");
setVisible(true)
setPdf(`${process.env.PUBLIC_URL}/data/html/${localStorage.getItem('address')}/外洪顶托城集镇及村落调查分析成果表.html`)
}else if(val===3){
// setFxyhdcTitle("跨沟道路、桥涵调查成果表");
setVisible(true)
setPdf(`${process.env.PUBLIC_URL}/data/html/${localStorage.getItem('address')}/跨沟道路、桥涵调查成果表.html`)
}else if(val===4){
setVisible(true)
setPdf(`${process.env.PUBLIC_URL}/data/html/${localStorage.getItem('address')}/水位-保护对象关系表.html`)
}else if(val===5){
setVisible(true)
setPdf(`${process.env.PUBLIC_URL}/data/html/${localStorage.getItem('address')}/保护对象名录.html`)
}else if(val===6){
setVisible(true)
setPdf(`${process.env.PUBLIC_URL}/data/html/${localStorage.getItem('address')}/隐患点名录.html`)
}
}
return (
<div className="introductionTable">
<div onClick={()=>openTable(0)} style={{cursor:"pointer", color:"#0893FF", marginBottom:"10px"}}>1、山洪灾害风险隐患保护对象名录表</div>
<div onClick={()=>openTable(1)} style={{cursor:"pointer", color:"#0893FF", marginBottom:"10px"}}>2、沟滩占地情况调查成果表</div>
<div onClick={()=>openTable(2)} style={{cursor:"pointer", color:"#0893FF", marginBottom:"10px"}}>3、（雨量）外洪顶托城集镇及村落调查分析成果表</div>
<div onClick={()=>openTable(3)} style={{cursor:"pointer", color:"#0893FF", marginBottom:"10px"}}>4、跨沟道路、桥涵调查成果表</div>
<div onClick={()=>openTable(4)} style={{cursor:"pointer", color:"#0893FF", marginBottom:"10px"}}>5、水位-保护对象关系表</div>
<div onClick={()=>openTable(5)} style={{cursor:"pointer", color:"#0893FF", marginBottom:"10px"}}>6、保护对象名录</div>
<div onClick={()=>openTable(6)} style={{cursor:"pointer", color:"#0893FF", marginBottom:"10px"}}>7、隐患点名录</div>
{/*风险隐患调查的弹窗*/}
<Modal
visible={fxyhdcVisible}
title={fxyhdcTitle}
footer={null}
onCancel={handleCancelFxyhdc}
width="94vw"
className="hzyqModal"
style={{top:"15px", height:"98vh"}}
>
{
fxyhdcTitle === "山洪灾害风险隐患保护对象名录表"?<img src={Table0} alt="" width="100%"/>:null
}
{
fxyhdcTitle === "沟滩占地情况调查成果表"?<img src={Table1} alt="" width="100%"/>:null
}
{
fxyhdcTitle === "（雨量）外洪顶托城集镇及村落调查分析成果表"?<img src={Table2} alt="" width="100%"/>:null
}
{
fxyhdcTitle === "跨沟道路、桥涵调查成果表"?<img src={Table3} alt="" width="100%"/>:null
}
</Modal>
</div>
)
};
export default BasePage

7
src/views/Home/Introduction/index.less
View File

@ -1,7 +0,0 @@
.bigTable{
th{
padding:5px 10px !important;
line-height: 16px;
font-size: 13px;
}
}

142
src/views/Home/Introduction/index.tsx
View File

@ -1,142 +0,0 @@
import { Tabs, Modal, Collapse } from 'antd'
import React, { useState } from 'react'
import { CaretRightOutlined, ExpandOutlined } from '@ant-design/icons';
import DcpjPage from "../../Home/Introduction/dcpj"
import FxyhdcPage from "../../Home/Introduction/fxyhdc"
import staticData from '../../staticData';
import DcpjDetailsPage from "../../Home/Introduction/dcpjDetails"
import "./index.less"
import {config} from "../../../config";
import useCrud from '../../../components/crud/useCrud';
const { Panel } = Collapse;
const Introduction = () => {
const [activeKey, setActiveKey] = useState("1");
const [detailsVisible, setDetailsVisible] = useState(false);
const [detailsVisible2, setDetailsVisible2] = useState(false);
const [dcpjVisible, setDcpjVisible] = useState(false);
const crud = useCrud();
const handleCancel = () => {
setDetailsVisible(false);
}
const handleCancelDcpj = () => {
setDcpjVisible(false);
}
const [previewPdf, setPreviewPdf] = useState("");
//console.log(previewPdf)
const genExtra = () => (
<ExpandOutlined title="调查评价详情"
onClick={(event) => {
event.stopPropagation();
setDcpjVisible(true);
}}
/>
);
const systemSwitchType = localStorage.getItem('address') && localStorage.getItem('address')==="wufeng";
return (
<div style={{ width: '98%', height:"calc( 100vh - 60px )", marginLeft: '2%', overflow:"hidden auto", }}>
<Tabs defaultActiveKey={activeKey}>
<Tabs.TabPane tab={systemSwitchType?"五峰县基本情况":"建始县基本情况"} key="1">
<div style={{textIndent:"28px", textAlign:"justify", paddingRight:"12px"}}>
<span>{staticData.qkjsData.jbqk}&nbsp;&nbsp;</span>
<span onClick={()=>{setDetailsVisible(true);setPreviewPdf(`${process.env.PUBLIC_URL}/data/pdf/${localStorage.getItem('address')}/简介.pdf`);}} style={{fontSize:"12px", cursor:"pointer", color:"#0068F4"}}>展开详情</span>
</div>
</Tabs.TabPane>
<Tabs.TabPane tab="试点流域基本情况" key="2">
<div style={{textIndent:"28px", textAlign:"justify", paddingRight:"12px"}}>
{staticData.qkjsData.sdly}&nbsp;&nbsp;
<span onClick={()=>{setDetailsVisible(true);setPreviewPdf(`${process.env.PUBLIC_URL}/data/pdf/${localStorage.getItem('address')}/试点流域基本情况.pdf`);}} style={{fontSize:"12px", cursor:"pointer", color:"#0068F4"}}>展开详情</span>
</div>
</Tabs.TabPane>
</Tabs>
<div style={{margin:"20px 12px 0 0"}}>
<Collapse
collapsible="header"
defaultActiveKey={['1','2']}
expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
>
<Panel header="调查评价" key="1" extra={genExtra()} >
<DcpjPage />
</Panel>
<Panel header="风险隐患调查" key="2" >
<FxyhdcPage setVisible={(e:any)=>{setDetailsVisible2(e)}} setPdf={(e:any)=>{setPreviewPdf(e)}}/>
</Panel>
</Collapse>
</div>
{/*展开详情的弹窗*/}
<Modal
visible={detailsVisible}
title="详情"
footer={null}
onCancel={handleCancel}
width="94vw"
className="hzyqModal"
style={{top:"15px", height:"98vh"}}
>
<div style={{height:"87vh"}}>
<iframe
src={previewPdf}
width="100%"
height="100%"
frameBorder={0}//边框设置
scrolling="no"//滚动设置
></iframe>
</div>
</Modal>
{/*展开详情的弹窗2*/}
<Modal
visible={detailsVisible2}
title="详情"
footer={null}
onCancel={()=>{setDetailsVisible2(false)}}
width="94vw"
className="hzyqModal"
style={{top:"15px", height:"98vh"}}
>
<div style={{height:"87vh"}}>
<iframe
src={previewPdf}
width="100%"
height="100%"
frameBorder={0}//边框设置
// scrolling="no"//滚动设置
></iframe>
</div>
</Modal>
{/*调查评价的弹窗*/}
<Modal
visible={dcpjVisible}
title="调查评价详情"
footer={null}
onCancel={handleCancelDcpj}
width="90vw"
className="hzyqModal"
style={{top:"15px", height:"98vh"}}
>
<DcpjDetailsPage />
</Modal>
</div>
)
}
export default Introduction

11
src/views/Home/MapCtrl/CoordsText.js
View File

@ -1,11 +0,0 @@
import React from 'react'
import { useSelector } from 'react-redux'
function CoordsText() {
const coordsText = useSelector(s => s.runtime.coordsText);
return (
<div className="coords_txt">{coordsText}</div>
)
}
export default CoordsText

17
src/views/Home/MapCtrl/FeatureTip.js
View File

@ -1,17 +0,0 @@
import React from 'react'
import { useSelector } from 'react-redux'
function FeatureTip() {
const featureTip = useSelector(s => s.runtime.featureTip);
if (!featureTip) {
return null;
}
return (
<div style={{ display: 'block', left: featureTip.left, top: featureTip.top }} className="tip_container">
<div style={{ borderTopColor: 'white' }} />
<div className="tip_txt">{featureTip.text}</div>
</div>
)
}
export default FeatureTip

240
src/views/Home/MapCtrl/M2D/Map2D.js
View File

@ -1,240 +0,0 @@
import * as proj from 'ol/proj';
import Mask from "ol-ext/filter/Mask.js";
import Map from 'ol/Map';
import View from 'ol/View';
import { Fill, Stroke, Style } from "ol/style.js";
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import { GeoJSON } from 'ol/format'
import BaseMap from '../basemap';
import LayerMgr2D from './layermgr2d';
import Point from 'ol/geom/Point';
import { getWktData } from "../../../../models/_/base";
/**
* OL 封装
*/
export default class Map2D extends BaseMap {
constructor({ divid, dispatch }) {
super();
this.dispatch = dispatch;
this.divid = divid; // div element id
this._map = null; // openlayers map obj
this.layerMgr = null;
this.PROJ2GG = proj.getTransform('EPSG:900913', 'EPSG:4326');
this.GG2PROJ = proj.getTransform('EPSG:4326', 'EPSG:900913');
}
/**
* 初始化地图、图层
*/
init() {
console.log("++++++++++初始化地图、图层++++++++++");
// const extent = [114.65, 30.85 , 115.48, 31.60]; //视图中心位置
const extent = [114.746, 31.479 , 114.776, 31.509]; //视图中心位置
console.log("@@@@ map init 38++++", extent);
// const fitE = [extent[0] + ew, extent[1] + eh, extent[2] - ew, extent[3] - eh];
const map = new Map({
moveTolerance: 2,
controls: [],
view: new View({
minZoom: 5.5,//8.6,
maxZoom: 20,
//zoomFactor: 1.5
}),
target: this.divid,
});
map.getView().fit(this.GG2PROJ(extent), { nearest: true });
//console.log("53 mapZoom+++++",map.getView().getZoom());
//console.log("51",localStorage.getItem('mapZoom'));
localStorage.setItem('mapZoom', map.getView().getZoom());
let tile = new TileLayer({
source: new XYZSource({
tilePixelRatio: 1,
//url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',
// url: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd',
//url: `http://res3dstatic{0-7}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd",
}),
maxZoom: 20,
//zIndex:10,
//opacity: 0.4
});
// 设置图层名
tile.set('name', 'SatelliteImage');//卫星影像
getWktData().then((wkt) => {
var mask2 = new Mask({
feature: new GeoJSON().readFeature(wkt[0], {
dataProjection: 'EPSG:4326', // json的坐标系
featureProjection: 'EPSG:3857', // 当前地图使用的坐标系
}),
wrapX: true,
inner: false,
fill: new Fill({
// color: "rgb(236, 242, 249)",
color: "rgb(236, 242, 249, 0.2)",
}),
//fill: new Fill({ color: 'rgba(220,240,253,0.6)' }),
});
tile.addFilter(mask2);
});
map.addLayer(tile);
//map.getLayers().insertAt(2, tile);
// 隐藏图层
tile.setVisible(false);
this.layerMgr = new LayerMgr2D(map);
map.on('singleclick', (evt) => {
const feature = map.forEachFeatureAtPixel(evt.pixel, o => o);
if (feature) {
const props = feature.getProperties();
//console.log("singleclick",props);
if (props && props.layerName) {
const layer = this.layerMgr.getLayer(props.layerName);
if (layer && layer.onFeatureClicked) {
layer.onFeatureClicked(feature, this.dispatch);
}
}
} else {
this.layerMgr.onClick(evt.coordinate);
}
});
map.on('pointermove', (evt) => {
// 显示鼠标经纬度
if (evt.coordinate) {
const ll = this.PROJ2GG(evt.coordinate);
if (ll) {
const strtxt = `${ll[0].toFixed(6)}, ${ll[1].toFixed(6)}`;
//console.log("120 显示鼠标经纬度",strtxt);
this.dispatch.runtime.setCoordsText(strtxt);
//document.getElementById(`${this.divid}_coord`).innerHTML = strtxt;
}
}
if (evt.dragging || !evt.pixel) {
map.getTargetElement().style.cursor = '';
this.dispatch.runtime.setFeatureTip(null);
return;
}
const feature = map.forEachFeatureAtPixel(
map.getEventPixel(evt.originalEvent), o => o);
let featureTip = null;
if (feature) {
const props = feature.getProperties();
if (props && props.layerName) {
const layer = this.layerMgr.getLayer(props.layerName);
if (layer && layer.getFeatureTip) {
featureTip = layer.getFeatureTip(feature);
}
}
}
this.dispatch.runtime.setFeatureTip({
pixel: evt.pixel,
featureTip,
});
});
map.on('pointermove', (e) => {
let pixel = map.getEventPixel(e.originalEvent)
let feature = map.forEachFeatureAtPixel(pixel, (feature) => {
return feature
})
/*if(feature == undefined || feature.getGeometry().getType() !='Point'){// 线、面要素不做鼠标移入样式修改
map.getTargetElement().style.cursor = 'auto'
}else{
map.getTargetElement().style.cursor = 'pointer'
}*/
if (feature && (feature.getGeometry().getType() === 'Point' || feature.getGeometry().getType() === 'LineString')) {
//console.log(feature.getGeometry().getType());
map.getTargetElement().style.cursor = 'pointer'
}
});
map.on('postrender', () => {
this.dispatch.runtime.tickViewChanged();
});
map.on('moveend', () => {
var view = map.getView();
var resolution = view.getResolution();
if (resolution <120){
map && map.getLayers().getArray().forEach((layer)=> {
// if( (layer.values_.name) && ((layer.values_.name).indexOf("HL2Layer")>-1) ){
if( (layer.values_.name) && ((layer.values_.name).indexOf("highroadLayer")>-1) ){
layer.setVisible(true)
}
})
}else{
map && map.getLayers().getArray().forEach((layer)=> {
// if( (layer.values_.name) && ((layer.values_.name).indexOf("HL2Layer")>-1) ){
if( (layer.values_.name) && ((layer.values_.name).indexOf("highroadLayer")>-1) ){
layer.setVisible(false)
}
})
}
});
this._map = map;
setTimeout(() => {
map.updateSize();
}, 100);
}
coordinateToPixel(lgtd, lttd) {
let coords = this.GG2PROJ([lgtd, lttd]);
return this._map?.getPixelFromCoordinate(coords);
}
/**
* 组件卸载时，需要销毁map对象
*/
destroy() {
console.log('##############destroy##############')
this.layerMgr.destroy();
if (this._map) {
this._map.setTarget(null);
this._map = null;
}
}
/**
* get layer obj
*/
getLayer(name) {
return this.layerMgr.getLayer(name);
}
zoomTo(cameraTarget) {
//console.log("148",cameraTarget);
if (cameraTarget.center) {
this._map.getView().fit(new Point(this.GG2PROJ(cameraTarget.center)), {
duration: 800,
maxZoom: cameraTarget.zoom
});
} else if (cameraTarget.bound) {
this._map.getView().fit(this.GG2PROJ([cameraTarget.bound[0][0], cameraTarget.bound[0][1], cameraTarget.bound[1][0], cameraTarget.bound[1][1]]), {
duration: 800,
maxZoom: cameraTarget.zoom
});
}
}
}

194
src/views/Home/MapCtrl/M2D/layermgr2d.js
View File

@ -1,194 +0,0 @@
import { useDispatch, useSelector } from "react-redux";
import LayerMgr from "../layermgr";
import BouaLayer2D from "./layers/BouaLayer2D";
import BouaInLayer2D from "./layers/BouaInLayer2D";
import BouaOutLayer2D from "./layers/BouaOutLayer2D";
import AdcdBorderInLayer2D from "./layers/AdcdBorderInLayer2D"
import BouaOutsideLayer2D from "./layers/BouaOutsideLayer2D";
import OfflineMap2D from "./layers/OfflineMap2D";
import SatelliteImage2D from "./layers/SatelliteImage2D";
import RainLayer2D from "./layers/RainLayer2D";
import RainLayer2DRadar from "./layers/RainLayer2D-radar";
import RainLayer2DRh from "./layers/RainLayer2D-rh";
import HLLayer2D from "./layers/HLLayer2D";
import HLLayer2D2 from "./layers/HLLayer2D2";
import HL2Layer2D from "./layers/HL2Layer2D";
import XLYLayer2D from "./layers/XLYLayer2D";
import AdcdBorderLayer2D from './layers/AdcdBorderLayer2D'
import YsgcLayer2D from './layers/YsgcLayer2D'
import highroadLayer2D from './layers/highroadLayer2D'
import Contourlayer from "./layers/contourlayer";
import ContourlayerLoop from "./layers/contourlayerLoop";
import WxqLayer2D from "./layers/WxqLayer2D";
export default class LayerMgr2D extends LayerMgr {
constructor(map) {
super();
this.map = map;
}
/**
* 添加图层
* @param {@BaseLayer}
*/
addLayer(layer) {
let ollayers = [];
if (layer.getRawLayers) {
ollayers = layer.getRawLayers();
}
for (const ollayer of ollayers) {
/*ollayer.getSource().clear();
this.map.removeLayer(ollayer);*/
//console.log("39++++ ollayer",ollayer);
this.map.addLayer(ollayer);
}
this.layers.push(layer);
if (layer.onAdd) {
layer.onAdd(this.map);
}
return layer;
}
addLayerC(layer, cLayerData) {
//console.log("58 cLayerData",cLayerData);
this.layers = [];
this.layers.push(layer);
if (layer.onAdd) {
layer.onAdd(this.map, cLayerData);
}
//console.log("layer 74++++++++++++",layer);
return layer;
}
onClick(coordinate) {
for (let i = this.layers.length - 1; i >= 0; i -= 1) {
const curlayer = this.layers[i];
if (typeof curlayer.onClick === 'function') {
const passdown = curlayer.onClick({
map: this.map,
coordinate,
});
if (!passdown) {
break;
}
}
}
}
destroy() {
for (const layer of this.layers) {
let ollayers = [];
if (layer.getRawLayers) {
ollayers = layer.getRawLayers();
}
for (const ollayer of ollayers) {
this.map.removeLayer(ollayer);
}
}
this.layers = null;
}
addAppLayers(dispatch, visible, setting, otherParams) {
visible = visible || {};
dispatch.map.setMap(this.map);
dispatch.map.setClickLoopBtn(false);
//离线地图
this.addLayer(new OfflineMap2D({ visible: visible[OfflineMap2D.LayerName], setting, dispatch }));
//卫星影像
this.addLayer(new SatelliteImage2D({ visible: visible[SatelliteImage2D.LayerName], setting, dispatch }));
//乡镇边界
this.addLayer(new AdcdBorderInLayer2D({ visible: visible[AdcdBorderInLayer2D.LayerName], setting, dispatch }));
//县外的边界
// this.addLayer(new BouaOutsideLayer2D({ visible: visible[BouaOutsideLayer2D.LayerName], setting, dispatch }));
//河流
this.addLayer(new HLLayer2D2({ visible: visible[HLLayer2D2.LayerName], setting, dispatch }));//河流线-卫星图
this.addLayer(new HLLayer2D({ visible: visible[HLLayer2D.LayerName], setting, dispatch }));//河流线-矢量图
this.addLayer(new HL2Layer2D({ visible: visible[HL2Layer2D.LayerName], setting, dispatch }));//河流面
//省级公路
this.addLayer(new highroadLayer2D({ visible: visible[highroadLayer2D.LayerName], setting, dispatch }));
//咸丰边界
this.addLayer(new BouaLayer2D({ visible: visible[BouaLayer2D.LayerName], setting, dispatch }));
// this.addLayer(new BouaInLayer2D({ visible: visible[BouaInLayer2D.LayerName], setting, dispatch }));
// this.addLayer(new BouaOutLayer2D({ visible: visible[BouaOutLayer2D.LayerName], setting, dispatch }));
//RainLayer2DRadar 测雨雷达
// this.addLayer(new RainLayer2DRadar({ visible: visible[RainLayer2DRadar.LayerName], setting, dispatch }));
//RainLayer2DRh 融合雨量
// this.addLayer(new RainLayer2DRh({ visible: visible[RainLayer2DRh.LayerName], setting, dispatch }));
// this.addLayer(new XLYLayer2D({ visible: visible[XLYLayer2D.LayerName], setting, dispatch }));
//行政区划边界
// ['422826102','422826100','422826201','422826104','422826203','422826204','422826200','422826101','422826103','422826202','422826400'].map((i)=>{
// this.addLayer(new AdcdBorderLayer2D({ visible: visible["AdcdBorderLayer_"+i], setting, dispatch },i));
// })
//引水工程
// this.addLayer(new YsgcLayer2D({ visible: visible[YsgcLayer2D.LayerName], setting, dispatch }));
//danad:危险区 placement:安置点 transfer:转移路线 flrvvlg:沿河居民户 bsnssinfo:企事业单位
//bridge:桥梁 culvert:路涵 sluice:水闸 daminfo:塘(堰)坝 dike:堤防 wbrinfo:无线预警广播
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_danadLayer"], setting, dispatch },"danad"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_placementLayer"], setting, dispatch },"placement"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_transferLayer"], setting, dispatch },"transfer"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_flrvvlgLayer"], setting, dispatch },"flrvvlg"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_bsnssinfoLayer"], setting, dispatch },"bsnssinfo"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_bridgeLayer"], setting, dispatch },"bridge"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_culvertLayer"], setting, dispatch },"culvert"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_sluiceLayer"], setting, dispatch },"sluice"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_daminfoLayer"], setting, dispatch },"daminfo"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_dikeLayer"], setting, dispatch },"dike"));
// this.addLayer(new WxqLayer2D({ visible: visible["Dcpj_wbrinfoLayer"], setting, dispatch },"wbrinfo"));
this._addAppMarkerLayers(dispatch, visible, setting, otherParams);
}
addAppLayersC(dispatch, visible, setting) {
visible = visible || {};
this.addLayerC(new Contourlayer({ visible: visible[Contourlayer.LayerName], setting, dispatch }),setting.contour);
}
addAppLayersCLoop(dispatch, visible, setting) {
visible = visible || {};
//console.log("layermgr2d ContourlayerLoop 142",setting.contour)
if(this.map){
this.addLayerC(new ContourlayerLoop({ visible: visible[ContourlayerLoop.LayerName], setting, dispatch }, this.map),setting.contour);
dispatch.map.setMap(this.map);
}
}
}

52
src/views/Home/MapCtrl/M2D/layers/AdcdBorderInLayer2D.js
View File

@ -1,52 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
import FillStyle from "ol/style/Fill";
import {config} from "../../../../../config";
//咸丰下乡镇边界
export default class AdcdBorderInLayer2D extends POILayer2D {
static LayerName = 'AdcdBorderInLayer'
constructor(props, type) {
super(props);
this._style1 = {};
this._style2 = {};
this._type = type;
}
getLayerName() {
return 'AdcdBorderInLayer'
}
async dataPromise() {
const XLYData2 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/adcdBorder.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'ly2' })))
.catch(() => []);
this._style2 = new Style({
stroke: new StrokeStyle({
color: 'rgba(0,0,0,0.1)',
width: 1,
lineDash: [5,5],
}),
zIndex: zindex2d.sx,
})
return [...XLYData2];
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
return this._style2
}
}

62
src/views/Home/MapCtrl/M2D/layers/AdcdBorderLayer2D.js
View File

@ -1,62 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
import FillStyle from "ol/style/Fill";
import {config} from "../../../../../config";
export default class AdcdBorderLayer2D extends POILayer2D {
static LayerName = 'AdcdBorderLayer_'+this._type;
constructor(props, type) {
super(props);
this._style1 = {};
this._style2 = {};
this._type = type;
}
getLayerName() {
return 'AdcdBorderLayer_'+this._type;
}
async dataPromise() {
const XLYData2 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/xianfeng/adcdBorder.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'ly2' })))
.catch(() => []);
const list = [];
['422826102','422826100','422826201','422826104','422826203','422826204','422826200','422826101','422826103','422826202','422826400'].map((i)=>{
if(this._type === i){
XLYData2.map(o => {
if(o.CODE == i){
this._style2 = new Style({
stroke: new StrokeStyle({
color: 'rgba(122,227,200, 1)',
width: 2,
}),
fill: new FillStyle({
color: 'rgba(44,169,138,0.5)',
}),
zIndex: zindex2d.sx,
})
list.push(o)
}
});
}
})
return [...list];
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
return this._style2
}
}

60
src/views/Home/MapCtrl/M2D/layers/BouaInLayer2D.js
View File

@ -1,60 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
import {config} from "../../../../../config";
export default class BouaInLayer2D extends POILayer2D {
static LayerName = 'BouaInLayer';
constructor(props) {
super(props);
this._style1 = new Style({
stroke: new StrokeStyle({
color: 'rgb(161,166,211)',
width: 7,
}),
zIndex: zindex2d.sx,
});
this._style2 = new Style({
stroke: new StrokeStyle({
color: 'rgb(137,137,137)',
width: 1.5,
lineDash: [15,5,3,5],
}),
zIndex: zindex2d.sx,
});
}
getLayerName() {
return BouaInLayer2D.LayerName;
}
async dataPromise() {
const hlData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/xianfeng/boua_In.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features
// .filter(o => o.geometry.coordinates.length > 1)
.map(({ properties, geometry }) => ({
...properties,
geometry,
name: properties.name || properties.Name,
pname: properties.projName,
id: properties.FID,
})))
.catch(() => []);
return hlData;
}
styleFunc = () => {
if (!this.isVisible()) {
return null;
}
return [
this._style1,
this._style2]
;
}
}

88
src/views/Home/MapCtrl/M2D/layers/BouaLayer2D.js
View File

@ -1,88 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
export default class BouaLayer2D extends POILayer2D {
static LayerName = 'BouaLayer';
constructor(props) {
super({ ...props, rowKey: 'code' });
this._style0 = new Style({
zIndex: zindex2d.boua1,
stroke: new StrokeStyle({
color: 'rgba(22,227,200, 0.5)',
width: 3,
}),
});
this._style1 = new Style({
zIndex: zindex2d.boua2,
stroke: new StrokeStyle({
color: 'rgb(91,123,188,0.4)',//'rgba(122,227,200, 0.1)',
lineDash: [15,10,5,10],
width: 3,
opacity:0.5,
}),
});
this._style1Highlight = new Style({
zIndex: zindex2d.bouahighlight,
stroke: new StrokeStyle({
color: 'rgb(255, 0, 0,1)',
width: 2.5,
}),
});
this._styleLabel = {};
this.highlights = this.getHighlightMap();
}
getLayerName() {
return BouaLayer2D.LayerName;
}
async dataPromise() {
const address = localStorage.getItem('address');
const a1 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/县界.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({
...o.properties,
geometry: o.geometry,
type: 'boua',
ADCD: `${o.properties.ADCD}000000000`.substr(0, 15)
})))
.catch(() => []);
//console.log("a1++++",a1);
return [...a1];
}
styleFunc = ({ props }) => {
if (this.highlights[props.code]) {
return this._style1Highlight;
}
if (!this.isVisible()) {
return null;
}
if (props.type === 'label') {
return this._styleLabel[props.code];
}
if (props.type === 'xj') {
return this._style0;
}else {
return this._style1;
}
}
setSetting(setting) {
if (setting?.highlight?.BouaLayer !== this._setting?.highlight?.BouaLayer) {
this.highlights = this.getHighlightMap(setting?.highlight);
this.redrawLayer();
}
this._setting = setting;
}
}

57
src/views/Home/MapCtrl/M2D/layers/BouaOutLayer2D.js
View File

@ -1,57 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
import {config} from "../../../../../config";
export default class BouaOutLayer2D extends POILayer2D {
static LayerName = 'BouaOutLayer';
constructor(props) {
super(props);
this._style1 = new Style({
stroke: new StrokeStyle({
color: 'rgb(161,166,211)',
width: 7,
}),
zIndex: zindex2d.sx,
});
this._style2 = new Style({
stroke: new StrokeStyle({
color: 'rgb(78,78,78)',
width: 1.5,
lineDash: [15,5,3,5],
}),
zIndex: zindex2d.sx,
});
}
getLayerName() {
return BouaOutLayer2D.LayerName;
}
async dataPromise() {
const hlData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/xianfeng/boua_Out.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features
// .filter(o => o.geometry.coordinates.length > 1)
.map(({ properties, geometry }) => ({
...properties,
geometry,
name: properties.name || properties.Name,
pname: properties.projName,
id: properties.FID,
})))
.catch(() => []);
return hlData;
}
styleFunc = () => {
if (!this.isVisible()) {
return null;
}
return [this._style1,this._style2];
}
}

79
src/views/Home/MapCtrl/M2D/layers/BouaOutsideLayer2D.js
View File

@ -1,79 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
export default class BouaOutsideLayer2D extends POILayer2D {
static LayerName = 'BouaOutsideLayer';
constructor(props) {
super({ ...props, rowKey: 'code' });
this._style0 = new Style({
zIndex: zindex2d.boua1,
stroke: new StrokeStyle({
color: 'rgba(22,227,200, 0.5)',
width: 3,
}),
});
this._style1 = new Style({
zIndex: zindex2d.boua2,
stroke: new StrokeStyle({
color: '#bfbfbf',
width: 1,
}),
});
this._style1Highlight = new Style({
zIndex: zindex2d.bouahighlight,
stroke: new StrokeStyle({
color: 'rgb(255, 0, 0)',
width: 2.5,
}),
});
this._styleLabel = {};
this.highlights = this.getHighlightMap();
}
getLayerName() {
return BouaOutsideLayer2D.LayerName;
}
async dataPromise() {
const a1 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/xianfeng/bouaOther.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({
...o.properties,
geometry: o.geometry,
type: 'boua',
ADCD: `${o.properties.ADCD}000000000`.substr(0, 15)
})))
.catch(() => []);
//console.log("a1++++",a1);
return [...a1];
}
styleFunc = ({ props }) => {
if (this.highlights[props.code]) {
return this._style1Highlight;
}
if (!this.isVisible()) {
return null;
}
return this._style1;
}
setSetting(setting) {
if (setting?.highlight?.BouaOutsideLayer !== this._setting?.highlight?.BouaOutsideLayer) {
this.highlights = this.getHighlightMap(setting?.highlight);
this.redrawLayer();
}
this._setting = setting;
}
}

64
src/views/Home/MapCtrl/M2D/layers/HL2Layer2D.js
View File

@ -1,64 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
import FillStyle from "ol/style/Fill";
import { Text } from 'ol/style';
import { Fill } from "ol/style.js";
import Stroke from "ol/style/Stroke";
import {config} from "../../../../../config";
export default class HL2Layer2D extends POILayer2D {
static LayerName = 'HL2Layer';
constructor(props) {
super(props);
this._style1 = new Style({
stroke: new StrokeStyle({
color: '#0070ff',
width: 2,
}),
zIndex: zindex2d.sx,
});
this._style2 = new Style({
// stroke: new StrokeStyle({
// color: 'rgba(122,227,200, 1)',
// width: 2,
// }),
fill: new FillStyle({
color: '#bfdafc',//'rgba(0,161,233)',
}),
zIndex: zindex2d.sx,
})
}
getLayerName() {
return HL2Layer2D.LayerName;
}
async dataPromise() {
const hlData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/hl2.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features
// .filter(o => o.geometry.type === 'LineString' && o.geometry.coordinates.length > 1)
.map(({ properties, geometry }) => ({
...properties,
geometry,
name: properties.name || properties.Name,
pname: properties.projName,
id: properties.FID,
})))
.catch(() => []);
return hlData;
}
styleFunc = (e) => {
if (!this.isVisible()) {
return null;
}
return this._style2;
}
}

118
src/views/Home/MapCtrl/M2D/layers/HLLayer2D.js
View File

@ -1,118 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { Text } from 'ol/style';
import { Fill } from "ol/style.js";
import { zindex2d } from "../../zindex";
import {config} from "../../../../../config";
export default class HLLayer2D extends POILayer2D {
static LayerName = 'HLLayer';
constructor(props) {
super(props);
this._style1 = new Style({
stroke: new StrokeStyle({
color: '#0070ff',
width: 3,
}),
// text: new Text(({
// // 位置
// textAlign: 'center',
// // 基准线
// textBaseline: 'middle',
// // 文字样式
// font: 'bold 12px 微软雅黑',
// // 文本内容
// text: '我是河流',
// // 文字颜色
// fill: new Fill({ color: 'red' }),
// // 文字背景
// // stroke: new Stroke({ color: '#ffcc33', width: 10 })
// })),
zIndex: zindex2d.sx,
});
this._style2 = new Style({
})
}
getStyle(RVNM,LEVEL){
const myLevel = {
'1':2,
'2':1.6,
'3':1.1,
'4':0.89,
'5':0.6,
'6':0.4,
'7':0.3,
// '8':0.2,
// '9':0.1,
// '10':0.1,
// '11':0.1,
// '12':0.1,
// '13':0.1,
'8':0.3,
'9':0.3,
'10':0.3,
'11':0.3,
'12':0.3,
'13':0.3,
}[LEVEL]
return new Style({
stroke: new StrokeStyle({
color: '#bfdafc',//'rgba(0,161,233)',
width: (myLevel||0.3)*2,
}),
// text: new Text(({
// // 位置
// textAlign: 'center',
// // 基准线
// textBaseline: 'middle',
// // 文字样式
// font: 'bold 10px 微软雅黑',
// // 文本内容
// text: `${RVNM||''}`,
// // 文字颜色
// fill: new Fill({ color: 'rgba(0,0,0,0.2)' }),
// // 文字背景
// // stroke: new Stroke({ color: '#ffcc33', width: 10 })
// })),
zIndex: zindex2d.sx,
});
}
getLayerName() {
return HLLayer2D.LayerName;
}
async dataPromise() {
const hlData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/hl.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features
// .filter(o => o.geometry.coordinates.length > 1)
.map(({ properties, geometry }) => ({
...properties,
geometry,
name: properties.name || properties.Name,
pname: properties.projName,
id: properties.FID,
}))
)
.catch(() => []);
return hlData;
}
styleFunc = (e) => {
if (!this.isVisible()) {
return null;
}
const RVNM = e.props.RVNM
const LEVEL = e.props.LEVEL || e.props.LEVLE
return this.getStyle(RVNM,LEVEL);
}
}

112
src/views/Home/MapCtrl/M2D/layers/HLLayer2D2.js
View File

@ -1,112 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { Text } from 'ol/style';
import { Fill } from "ol/style.js";
import { zindex2d } from "../../zindex";
import {config} from "../../../../../config";
export default class HLLayer2D2 extends POILayer2D {
static LayerName = 'HLLayer2';
constructor(props) {
super(props);
this._style1 = new Style({
stroke: new StrokeStyle({
color: '#0070ff',
width: 3,
}),
// text: new Text(({
// // 位置
// textAlign: 'center',
// // 基准线
// textBaseline: 'middle',
// // 文字样式
// font: 'bold 12px 微软雅黑',
// // 文本内容
// text: '我是河流',
// // 文字颜色
// fill: new Fill({ color: 'red' }),
// // 文字背景
// // stroke: new Stroke({ color: '#ffcc33', width: 10 })
// })),
zIndex: zindex2d.sx,
});
this._style2 = new Style({
})
}
getStyle(RVNM,LEVEL){
const myLevel = {
'1':2,
'2':1.6,
'3':1.1,
'4':0.89,
'5':0.6,
'6':0.4,
'7':0.3,
'8':0.2,
'9':0.1,
'10':0.1,
'11':0.1,
'12':0.1,
'13':0.1,
}[LEVEL]
return new Style({
stroke: new StrokeStyle({
color: 'rgba(0,161,233)',
width: (myLevel||0.1),
}),
// text: new Text(({
// // 位置
// textAlign: 'center',
// // 基准线
// textBaseline: 'middle',
// // 文字样式
// font: 'bold 10px 微软雅黑',
// // 文本内容
// text: `${RVNM||''}`,
// // 文字颜色
// fill: new Fill({ color: 'rgba(0,0,0,0.2)' }),
// // 文字背景
// // stroke: new Stroke({ color: '#ffcc33', width: 10 })
// })),
zIndex: zindex2d.sx,
});
}
getLayerName() {
return HLLayer2D2.LayerName;
}
async dataPromise() {
const hlData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/hl.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features
// .filter(o => o.geometry.coordinates.length > 1)
.map(({ properties, geometry }) => ({
...properties,
geometry,
name: properties.name || properties.Name,
pname: properties.projName,
id: properties.FID,
}))
)
.catch(() => []);
return hlData;
}
styleFunc = (e) => {
if (!this.isVisible()) {
return null;
}
const RVNM = e.props.RVNM
const LEVEL = e.props.LEVEL
return this.getStyle(RVNM,LEVEL);
}
}

31
src/views/Home/MapCtrl/M2D/layers/OfflineMap2D.js
View File

@ -1,31 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
export default class OfflineMap2D extends POILayer2D {
static LayerName = 'OfflineMap';
constructor(props) {
super({ ...props, rowKey: 'code' });
this.highlights = this.getHighlightMap();
}
getLayerName() {
return OfflineMap2D.LayerName;
}
async dataPromise() {
return [];
}
styleFunc = ({ props }) => {
return null;
}
setSetting(setting) {
}
}

460
src/views/Home/MapCtrl/M2D/layers/POILayer2D.js
View File

@ -1,460 +0,0 @@
import BaseLayer2D from "./baselayer2d";
import * as proj from 'ol/proj';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import GeoJSONFormat from 'ol/format/GeoJSON';
import { zindex2d } from "../../zindex";
import Style from "ol/style/Style";
import FillStyle from "ol/style/Fill";
import TileLayer from 'ol/layer/Tile';
import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
import { getWktData } from "../../../../../models/_/base";
import TileImage from 'ol/source/TileImage';
import Tile from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import polylabel from "polylabel";
import TextStyle from "ol/style/Text";
import StrokeStyle from "ol/style/Stroke";
import Mask from "ol-ext/filter/Mask";
import { GeoJSON } from "ol/format";
import { Fill } from "ol/style";
const transformFn = proj.getTransform('EPSG:4326', 'EPSG:900913');
function isIPAddress(url) {
// 匹配 IPv4 地址的正则表达式
var ipv4Pattern = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
// 匹配 IPv6 地址的正则表达式
var ipv6Pattern = /^([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4})$/;
return ipv4Pattern.test(url) || ipv6Pattern.test(url);
}
function calLabel(f, field, geojson) {
const geometry = f.geometry;
const label = f?.properties?.[field];
if (!label) {
return;
}
let coords = [];
if (geometry.type === 'Polygon') {
if (geometry.coordinates?.length) {
coords.push(geometry.coordinates);
}
} else if (geometry.type === 'MultiPolygon') {
for (const p of geometry.coordinates) {
if (p?.length) {
coords.push(p);
}
}
}
for (const c of coords) {
// var p = polylabel(c, 1.0); 这里临时修改 有时会卡住
// var p = polylabel([c[0][0]], 1.0);
// if (Array.isArray(p) && p[0] && p[1]) {
// geojson.features.push({
// type: 'Feature',
// properties: { value: label },
// geometry: {
// type: 'Point',
// coordinates: p,
// }
// })
// }
}
}
export default class POILayer2D extends BaseLayer2D {
constructor(props) {
super(props);
this._rawlayers.push(new VectorLayer({
source: new VectorSource({ wrapX: false }),
style: this._styleFunc,
zIndex: props.zIndex || zindex2d.default,
visible: true,
name: this.getLayerName(),
}));
this.rowKey = props.rowKey || Math.random();
this._loading = false;
this._styleLabel = {};
this._map = null;
}
setVisible(val) {
const changed = val !== this.isVisible();
super.setVisible(val);
if (changed) {
this.redrawLayer();
}
if (this._map && this.getLayerName() === "OfflineMap") {
this._map.getLayers().getArray().forEach((layer) => {
//离线地图
if (layer.values_.name === "OfflineMapWmts") {
layer.setVisible(val);
}
});
}
if (this._map && this.getLayerName() === "SatelliteImage") {
this._map.getLayers().getArray().forEach((layer) => {
//卫星影像
if (layer.values_.name === "SatelliteImage") {
layer.setVisible(val);
}
});
}
}
handleData(data, label) {
if (!data) {
data = { type: 'FeatureCollection', features: [] };
}
const features = data.features || [];
if (features.length > 0) {
features.forEach(o => {
this._styleC[o.properties.z1] = new Style({
stroke: new StrokeStyle({
color: 'rgb(0, 0, 0, 0.1)',
width: 1,
}),
fill: new FillStyle({
color: o.properties.fill,
// color: "#fff",
}),
//zIndex: zindex2d.sx,
});
});
}
const labelObj = { type: 'FeatureCollection', features: [] };
for (const f of features) {
calLabel(f, label, labelObj);
}
let newArray = [];
if (labelObj.features.length > 0) {
labelObj.features.map(o => {
newArray.push(
{
"NAME": o.properties.value,
"level": 3,
"lgtd": o.geometry.coordinates[0],
"lttd": o.geometry.coordinates[1],
"type": "label"
}
);
});
}
const labelData = newArray;
if (labelData.length > 0) {
labelData.forEach(o => {
this._styleLabel[o.NAME] = new Style({
text: new TextStyle({
text: o.NAME,
font: 'bold 14px 微软雅黑',
fill: new FillStyle({ color: '#000' }),
stroke: new StrokeStyle({ color: '#fff', width: 1 }),
overflow: true,
zIndex: o.level,
}),
})
});
};
return [...features, ...labelData];
}
/**
* 读取数据并设置数据源
*/
loadData(cData, map) {
//console.log('load Data:' + this.getLayerName());
if (this._loading) {
return;
}
this._loading = true;
if (this.getLayerName() === "ContourLayer" || this.getLayerName() === "ContourLayerLoop") {
//console.log("85",this.getLayerName());
this._loading = false;
//console.log("POILayer2D.js 146++++++++++",cData);
const { shp, shps, index, label } = cData || {};
let data = shp || (shps || [])[index];
let records = this.handleData(data, label);
map.addLayer(this._rawlayers[0]);
this.setDataLoop(records, map);
} else {
//console.log("141",this.getLayerName());
this.dataPromise().then((data) => {
this._loading = false;
this.setData(data);
});
}
}
/*loadData(cData, map) {
//console.log('load Data:' + this.getLayerName());
if (this._loading) {
return;
}
this._loading = true;
this.dataPromise().then((data) => {
this._loading = false;
this.setData(data,map);
});
}*/
setData(records) {
if (!Array.isArray(records)) {
return;
}
this.beforeSetData();
const source = this._rawlayers[0].getSource();
source.clear();
const features = [];
const geojsonFormat = new GeoJSONFormat();
for (const props of records) {
const { lgtd, lttd, ...info } = props;
let geometry;
if (typeof lttd === 'number' && typeof lgtd === 'number') {
geometry = new Point([lgtd, lttd]);
geometry.applyTransform(transformFn);
} else if (info.geometry) {
geometry = geojsonFormat.readGeometry(info.geometry, {
featureProjection: 'EPSG:3857',
});
}
if (!geometry) {
continue;
}
const feature = new Feature({
geometry,
data: props,
layerName: this.getLayerName(),
id: Math.random()
});
features.push(feature);
}
source.addFeatures(features);
}
handleFeatureData(data) {
//console.log("handleData",data);
const features = [];
const geojsonFormat = new GeoJSONFormat();
for (const props of data) {
const { lgtd, lttd, ...info } = props;
let geometry;
if (typeof lttd === 'number' && typeof lgtd === 'number') {
geometry = new Point([lgtd, lttd]);
geometry.applyTransform(transformFn);
} else if (info.geometry) {
geometry = geojsonFormat.readGeometry(info.geometry, {
featureProjection: 'EPSG:3857',
});
}
if (!geometry) {
continue;
}
const feature = new Feature({
geometry,
data: props,
layerName: this.getLayerName(),
});
features.push(feature);
}
return features
}
setDataLoop(records, map) {
if (!Array.isArray(records)) {
return;
}
let features = this.handleFeatureData(records);
let targetLayer = null;
let that = this;
let hasLoopLayer = false;
map.getLayers().getArray().forEach(layer => {
if (layer === that._rawlayers[0]) {
targetLayer = layer;
hasLoopLayer = true;
}
});
if (hasLoopLayer) {
targetLayer.getSource().addFeatures(features);
}
}
/**
* 图层的样式函数，此方法不能继承覆盖
*/
_styleFunc = (feature, res) => {
const props = feature.get('data');
const geometry = feature.getGeometry();
const lod = this.getLod(res);
return this.styleFunc({
props,
lod,
res,
geometry,
});
}
getLod() {
return 0;
}
styleFunc = ({ props, lod, res, geometry }) => {
return null;
}
beforeSetData() { }
onAdd(map, contourLayerData) {
super.onAdd(map);
this._map = map;
if (this.getLayerName() === "ContourLayer" || this.getLayerName() === "ContourLayerLoop") {
this.loadData(contourLayerData, map);
} else {
let urlAddress = window.location.href;
let mapUrl = "";
if (isIPAddress(urlAddress)) {//是一个 IP 地址
mapUrl = "http://223.75.53.141:911{0-7}";
} else {
if (urlAddress.indexOf("https") !== -1) {
mapUrl = "https://slt-sh.chutianyun.gov.cn:1443";
} else {
mapUrl = "http://223.75.53.141:911{0-7}";
}
}
//console.log("@@@@ mapUrl",mapUrl);
const superMapLayer = new Tile({
source: new XYZSource({
// url: mapUrl + "/iserver/services/map-ugcv5-YXDOM3857/rest/maps/YXDOM_20230704/zxyTileImage.png?z={z}&x={x}&y={y}&width=256&height=256"
// url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd"
}),
name: "OfflineMapWmts",
maxZoom: 20,
});
if (this.getLayerName() === "OfflineMap") {
//遮罩
getWktData().then((wkt) => {
console.log(wkt, 2222)
var mask2 = new Mask({
feature: new GeoJSON().readFeature(wkt[0], {
dataProjection: 'EPSG:4326', // json的坐标系
featureProjection: 'EPSG:3857', // 当前地图使用的坐标系
}),
wrapX: true,
inner: false,
fill: new Fill({
color: "rgb(236, 242, 249)",
// color: "#fff"
}),
//fill: new Fill({ color: 'rgba(220,240,253,0.6)' }),
});
superMapLayer.addFilter(mask2);
map.addLayer(superMapLayer);
//wmts
/*const url =
'http://223.75.53.141:911{0-7}/iserver/services/map-YXFW/wmts100';
fetch(url)
.then(function (response) {
return response.text();
})
.then(function (text) {
const result = parser.read(text);
console.log("WMTS result 342+++++",result);
const options = optionsFromCapabilities(result, {
layer: 'YXDOM',
});
options.crossOrigin = '';
options.projection = 'EPSG:4326';
options.wrapX = false;
options.layer = "OfflineMapWmts";
console.log("WMTS options 351+++++",options);
layers.setSource(new WMTS(options));
map.addLayer(layers);
});*/
// 创建TileImage图层
/*const superMapSource = new TileImage({
url: 'http://223.75.53.141:81/iserver/services/map-ugcv5-YXDOM3857/rest/maps/YXDOM_20230704', // 超图服务URL
attributions: '© <a href="http://www.supermap.com">SuperMap</a>'
});*/
});
}
// 监听指定图层的源的加载状态
if (superMapLayer.getSource().getState() === 'ready') {
this.loadData({}, map);
}
}
}
getFeature(id) {
const mainKey = this.rowKey;
if (!mainKey) {
return null;
}
const source = this._rawlayers[0].getSource();
const features = source.getFeatures();
for (const feature of features) {
const { data } = feature.getProperties();
if (data[mainKey] === id) {
return feature;
}
}
return null;
}
}

54
src/views/Home/MapCtrl/M2D/layers/RainLayer2D-radar.js
View File

@ -1,54 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import FillStyle from 'ol/style/Fill';
import { zindex2d } from "../../zindex";
import TextStyle from "ol/style/Text";
import StrokeStyle from "ol/style/Stroke";
export default class RainLayer2DRadar extends POILayer2D {
static LayerName = 'RainLayerRadar';
constructor(props) {
super(props);
this._style1 = new Style({
fill: new FillStyle({
color: '#C7DFBB',
}),
zIndex: zindex2d.sx,
});
this._styleRain = {};
}
getLayerName() {
return RainLayer2DRadar.LayerName;
}
async dataPromise() {
const rainData = await fetch(`${process.env.PUBLIC_URL}/data/rainfallCenter/建始县20210812.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'rain1' })))
.catch(() => []);
rainData.forEach(o => {
this._styleRain[o.z1] = new Style({
fill: new FillStyle({
color: o.fill,
}),
zIndex: zindex2d.sx,
})
});
//return [...rainData];
return [];
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
return this._styleRain[props.z1];
}
}

54
src/views/Home/MapCtrl/M2D/layers/RainLayer2D-rh.js
View File

@ -1,54 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import FillStyle from 'ol/style/Fill';
import { zindex2d } from "../../zindex";
import TextStyle from "ol/style/Text";
import StrokeStyle from "ol/style/Stroke";
export default class RainLayer2DRh extends POILayer2D {
static LayerName = 'RainLayerRh';
constructor(props) {
super(props);
this._style1 = new Style({
fill: new FillStyle({
color: '#C7DFBB',
}),
zIndex: zindex2d.sx,
});
this._styleRain = {};
}
getLayerName() {
return RainLayer2DRh.LayerName;
}
async dataPromise() {
const rainData = await fetch(`${process.env.PUBLIC_URL}/data/rainfallCenter/建始县20210811.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'rain1' })))
.catch(() => []);
rainData.forEach(o => {
this._styleRain[o.z1] = new Style({
fill: new FillStyle({
color: o.fill,
}),
zIndex: zindex2d.sx,
})
});
//return [...rainData];
return [];
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
return this._styleRain[props.z1];
}
}

163
src/views/Home/MapCtrl/M2D/layers/RainLayer2D.js
View File

@ -1,163 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import FillStyle from 'ol/style/Fill';
import { zindex2d } from "../../zindex";
import TextStyle from "ol/style/Text";
import StrokeStyle from "ol/style/Stroke";
import {BouaPromise} from "../../../../../models/_/base";
import {config} from "../../../../../config";
import {calWeatherContour24H} from "../../../../../models/rcview/calculator";
import polylabel from "polylabel";
import {useSelector} from "react-redux";
export function wait(tm) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, tm || 0);
});
}
function calLabel(f, field, geojson) {
const geometry = f.geometry;
const label = f?.properties?.[field];
if (!label) {
return;
}
let coords = [];
if (geometry.type === 'Polygon') {
if (geometry.coordinates?.length) {
coords.push(geometry.coordinates);
}
} else if (geometry.type === 'MultiPolygon') {
for (const p of geometry.coordinates) {
if (p?.length) {
coords.push(p);
}
}
}
for (const c of coords) {
var p = polylabel(c, 1.0);
if (Array.isArray(p) && p[0] && p[1]) {
geojson.features.push({
type: 'Feature',
properties: { value: label },
geometry: {
type: 'Point',
coordinates: p,
}
})
}
}
}
export default class RainLayer2D extends POILayer2D {
static LayerName = 'RainLayer';
constructor(props) {
super(props);
this._style1 = new Style({
fill: new FillStyle({
color: '#C7DFBB',
}),
zIndex: zindex2d.sx,
});
this._styleRain = {};
this._styleLabel = {};
}
getLayerName() {
return RainLayer2D.LayerName;
}
async dataPromise() {
/*const rainData = await fetch(`${process.env.PUBLIC_URL}/data/rainfallCenter/建始县20210810.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'rain' })))
.catch(() => []);*/
/*const filename = "Z_QPF_20210718083000.F120.bin.bz2";
const extent = config.extent;
const strextent = `x1=${extent[0]}&y1=${extent[1]}&x2=${extent[2]}&y2=${extent[3]}`;
const url = `/service1/res/radarlayer?filename=${filename}&${strextent}`;
const rainData = await fetch(url).then(resp => resp.json()).then(data => data.data);*/
/*const progress = (idx) => {
this._dispatch.runtime.setCalculating([idx, 25]);
return wait(100);
}
await progress(0);*/
/*const result = await calWeatherContour24H();
//console.log("60------",result);
const { shp, shps, index, label } = result || {};
let data = shp || (shps || [])[index];
data.features.forEach(o => {
this._styleRain[o.properties.z1] = new Style({
fill: new FillStyle({
color: o.properties.fill,
}),
//zIndex: 2,
});
});
const features = data.features || [];
const labelObj = { type: 'FeatureCollection', features: [] };
for (const f of features) {
calLabel(f, label, labelObj);
}
//console.log("labelObj",labelObj);
let newArray = [];
if(labelObj.features.length>0){
labelObj.features.map(o=>{
newArray.push(
{
"NAME": o.properties.value,
"level": 5,
"lgtd": o.geometry.coordinates[0],
"lttd": o.geometry.coordinates[1],
"type": "label"
}
);
});
}
const labelData = newArray;
if(labelData.length>0){
labelData.forEach(o => {
this._styleLabel[o.NAME] = new Style({
text: new TextStyle({
text: o.NAME,
font: 'bold 14px 微软雅黑',
fill: new FillStyle({ color: '#000' }),
stroke: new StrokeStyle({ color: '#fff', width: 1 }),
overflow: true,
zIndex: o.level,
}),
})
});
};
//console.log("72------",data.features);
return [...data.features,...labelData];*/
return [];
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
if (props.type === 'label') {
return this._styleLabel[props.NAME];
}else{
return this._styleRain[props.properties.z1];
}
}
}

31
src/views/Home/MapCtrl/M2D/layers/SatelliteImage2D.js
View File

@ -1,31 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
export default class SatelliteImage2D extends POILayer2D {
static LayerName = 'SatelliteImage';
constructor(props) {
super({ ...props, rowKey: 'code' });
this.highlights = this.getHighlightMap();
}
getLayerName() {
return SatelliteImage2D.LayerName;
}
async dataPromise() {
return [];
}
styleFunc = ({ props }) => {
return null;
}
setSetting(setting) {
}
}

222
src/views/Home/MapCtrl/M2D/layers/WxqLayer2D.js
View File

@ -1,222 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
import FillStyle from "ol/style/Fill";
import Icon from "ol/style/Icon";
import { DcpjPromise } from '../../../../../models/_/dcpj';
import { geometryCenter, geometryBound } from '../../../../../utils/tools';
export default class WxqLayer2D extends POILayer2D {
static LayerName = 'Dcpj_' + this._type + 'Layer';
constructor(props, type) {
super(props);
this._style1 = {};
this._type = type;
}
getLayerName() {
//return WxqLayer2D.LayerName;
return 'Dcpj_' + this._type + 'Layer';
}
async dataPromise() {
const WXQData = await DcpjPromise(this._type);
//console.log("WXQData",WXQData);
//danad:危险区
if(this._type === "danad"){
WXQData.forEach(o => {
this._style1 = new Style({
stroke: new StrokeStyle({
color: '#da6361',
width: 2,
}),
fill: new FillStyle({
color: 'rgba(218,99,97,0.5)',
}),
zIndex: zindex2d.sx,
})
});
}
//placement:安置点
if(this._type === "placement"){
WXQData.forEach(o => {
this._style1 = new Style({
image: new Icon({
src: require("../../../../../assets/icons/azd1.png"),
anchor: [0.5, 0.5],
opacity: 1,
scale: 0.9,
}),
})
});
}
//transfer:转移路线
if(this._type === "transfer"){
this._style1 = new Style({
stroke: new StrokeStyle({
color: 'yellow',
width: 2,
}),
zIndex: zindex2d.sx,
})
}
//flrvvlg:沿河居民户
if(this._type === "flrvvlg"){
WXQData.forEach(o => {
this._style1 = new Style({
image: new Icon({
src: require("../../../../../assets/icons/yhjmh.png"),
anchor: [0.5, 0.5],
opacity: 1,
scale: 0.6,
}),
})
});
}
//bsnssinfo:企事业单位
if(this._type === "bsnssinfo"){
WXQData.forEach(o => {
this._style1 = new Style({
image: new Icon({
src: require("../../../../../assets/icons/qsydw.png"),
anchor: [0.5, 0.5],
opacity: 1,
scale: 0.6,
}),
})
});
}
//bridge:桥梁
if(this._type === "bridge"){
WXQData.forEach(o => {
this._style1 = new Style({
image: new Icon({
src: require("../../../../../assets/icons/ql.png"),
anchor: [0.5, 0.5],
opacity: 1,
scale: 0.6,
}),
})
});
}
//culvert:路涵
if(this._type === "culvert"){
WXQData.forEach(o => {
this._style1 = new Style({
image: new Icon({
src: require("../../../../../assets/icons/lh.png"),
anchor: [0.5, 0.5],
opacity: 1,
scale: 0.7,
}),
})
});
}
//sluice:水闸
if(this._type === "sluice"){
WXQData.forEach(o => {
this._style1 = new Style({
image: new Icon({
src: require("../../../../../assets/icons/sz.png"),
anchor: [0.5, 0.5],
opacity: 1,
scale: 0.7,
}),
})
});
}
//daminfo:塘(堰)坝
if(this._type === "daminfo"){
WXQData.forEach(o => {
this._style1 = new Style({
image: new Icon({
src: require("../../../../../assets/icons/tyb.png"),
anchor: [0.5, 0.5],
opacity: 1,
scale: 0.7,
}),
})
});
}
//dike:堤防
if(this._type === "dike"){
var lightStroke = new Style({
stroke: new StrokeStyle({
color: "#C971E8",
width: 20,
lineDash: [10,40],
lineDashOffset: 6,
lineCap:"butt"
})
});
var darkStroke = new Style({
stroke: new StrokeStyle({
color: "#C971E8",
width: 2,
lineDash: [40,10],
})
});
WXQData.forEach(o => {
this._style1 = [lightStroke, darkStroke]
});
}
//wbrinfo:无线预警广播
if(this._type === "wbrinfo"){
WXQData.forEach(o => {
this._style1 = new Style({
image: new Icon({
src: require("../../../../../assets/icons/gb.png"),
anchor: [0.5, 0.5],
opacity: 1,
scale: 0.7,
}),
})
});
}
return [...WXQData];
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
//console.log(props);
return this._style1;
}
onFeatureClicked(feature, dispatch) {
const { data } = feature.getProperties();
if (data) {
if(this._type !== "danad" && this._type !== "transfer" && this._type !== "dike"){
dispatch.runtime.setFeaturePop({
id: data.ADCD,
type: this._type,
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}else{
const bbox = geometryBound(data.geometry);
const center = geometryCenter(data.geometry);
if (bbox && center) {
dispatch.runtime.setFeaturePop({
id: data.ADCD,
type: this._type,
data,
lgtd: center[0],
lttd: center[1],
elev: center[2],
})
}
}
}
}
}

70
src/views/Home/MapCtrl/M2D/layers/XLYLayer2D.js
View File

@ -1,70 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
import FillStyle from "ol/style/Fill";
import {config} from "../../../../../config";
export default class XLYLayer2D extends POILayer2D {
static LayerName = 'XLYLayer';
constructor(props) {
super(props);
this._style1 = {};
this._style2 = {};
}
getLayerName() {
return XLYLayer2D.LayerName;
}
async dataPromise() {
/*const XLYData1 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/${localStorage.getItem('address')}/xly-lym1.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'ly1' })))
.catch(() => []);*/
const XLYData2 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/${localStorage.getItem('address')}/xly-zlm.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'ly2' })))
.catch(() => []);
/*XLYData1.forEach(o => {
this._style1 = new Style({
stroke: new StrokeStyle({
color: '#da6361',
width: 2,
}),
zIndex: zindex2d.sx,
})
});*/
XLYData2.forEach(o => {
this._style2 = new Style({
stroke: new StrokeStyle({
color: '#2ca98a',
width: 2,
}),
fill: new FillStyle({
color: 'rgba(44,169,138,0.5)',
}),
zIndex: zindex2d.sx,
})
});
return [ ...XLYData2];
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
if (props.type === 'ly1') {
return this._style1;
} else {
return this._style2;
}
}
}

101
src/views/Home/MapCtrl/M2D/layers/YsgcLayer2D.js
View File

@ -1,101 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
import FillStyle from "ol/style/Fill";
import Icon from "ol/style/Icon";
import { DcpjPromise } from '../../../../../models/_/dcpj';
import Stroke from "ol/style/Stroke";
import { Text } from 'ol/style';
import { Fill } from "ol/style.js";
import { geometryCenter, geometryBound } from '../../../../../utils/tools';
export default class YsgcLayer2D extends POILayer2D {
static LayerName = 'YsgcLayer';
constructor(props, type) {
super(props);
this._style1 = {};
this._type = type;
}
getLayerName() {
return YsgcLayer2D.LayerName;
}
async dataPromise() {
const WXQData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/xianfeng/ysgc.json`)
.then(resp => resp.json())
.then(data => data)
.catch(() => []);
var lightStroke = new Style({
stroke: new StrokeStyle({
color: "#bae637",
width: 20,
lineDash: [10,40],
lineDashOffset: 6,
lineCap:"butt"
}),
text: new Text(({
// 位置
textAlign: 'center',
// 基准线
textBaseline: 'middle',
// 文字样式
font: 'bold 14px 微软雅黑',
// 文本内容
text: `十咸引水渠道`,
// 文字颜色
fill: new Fill({ color: 'rgba(0,0,0,0.7)' }),
offsetX:(70),
// 文字背景
stroke: new Stroke({ color: '#fff', width: 1 })
})),
});
var darkStroke = new Style({
stroke: new StrokeStyle({
color: "#bae637",
width: 2,
lineDash: [40,10],
})
});
WXQData.forEach(o => {
this._style1 = [lightStroke, darkStroke]
});
return [...WXQData];
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
//console.log(props);
return this._style1;
}
onFeatureClicked(feature, dispatch) {
const { data } = feature.getProperties();
if (data) {
const bbox = geometryBound(data.geometry);
const center = geometryCenter(data.geometry);
if (bbox && center) {
dispatch.runtime.setFeaturePop({
id: data.ADCD,
type: 'yinshuigongcheng',
data,
lgtd: center[0],
lttd: center[1],
elev: center[2],
})
}
}
}
}

22
src/views/Home/MapCtrl/M2D/layers/baselayer2d.js
View File

@ -1,22 +0,0 @@
import BaseLayer from "../../baselayer";
export default class BaseLayer2D extends BaseLayer {
constructor(props) {
super(props);
this._rawlayers = []; // openlayers的layer对象
}
getRawLayers() {
return this._rawlayers;
}
onAdd(/* map */) {
}
redrawLayer() {
for (const layer of this._rawlayers) {
layer.changed();
}
}
}

132
src/views/Home/MapCtrl/M2D/layers/contourlayer.js
View File

@ -1,132 +0,0 @@
import clone from "clone";
import polylabel from "polylabel";
import POILayer2D from "./POILayer2D";
import Style from "ol/style/Style";
import FillStyle from "ol/style/Fill";
import {zindex2d} from "../../zindex";
const SourceName = '等值线';
const LabelSourceName = '等值线Label'
const ShapeStyle = {
id: SourceName,
type: 'fill-extrusion',
source: SourceName,
layout: {
},
paint: {
/*
'fill-extrusion-color': [
'case',
['>', ['get', 'z1'], 0], ['get', 'fill'],
'#020315'
],
*/
'fill-extrusion-color': ['get', 'fill'],
'fill-extrusion-height': ['*', 50, ['get', 'z1']],
'fill-extrusion-opacity': 0.8,
},
};
const ShapeLabelStyle = {
id: LabelSourceName,
type: 'symbol',
source: LabelSourceName,
layout: {
'text-size': 12,
'text-font': ['Roboto Black'],
'text-field': ['get', 'value'],
// 'text-offset': [0, 0.6],
'text-anchor': 'center',
'text-max-width': 6
},
'paint': {
'text-color': '#000',
'text-halo-color': '#fff',
'text-halo-width': 1
}
};
function calLabel(f, field, geojson) {
const geometry = f.geometry;
const label = f?.properties?.[field];
if (!label) {
return;
}
let coords = [];
if (geometry.type === 'Polygon') {
if (geometry.coordinates?.length) {
coords.push(geometry.coordinates);
}
} else if (geometry.type === 'MultiPolygon') {
for (const p of geometry.coordinates) {
if (p?.length) {
coords.push(p);
}
}
}
for (const c of coords) {
var p = polylabel(c, 1.0);
if (Array.isArray(p) && p[0] && p[1]) {
geojson.features.push({
type: 'Feature',
properties: { value: label },
geometry: {
type: 'Point',
coordinates: p,
}
})
}
}
}
export default class ContourLayer extends POILayer2D {
static LayerName = 'ContourLayer';
static SourceName = SourceName;
static LabelSourceName = LabelSourceName;
constructor(props) {
super(props);
this._style1 = new Style({
fill: new FillStyle({
color: '#C7DFBB',
}),
zIndex: zindex2d.sx,
});
this._styleLabel = {};
this._styleC = {};
}
getLayerName() {
return ContourLayer.LayerName;
}
async dataPromise() {
/*const { shp, shps, index, label } = this._layerSettings?.contour || {};
let data = shp || (shps || [])[index];
if (!data) {
data = { type: 'FeatureCollection', features: [] };
}
console.log("ContourLayer",data);
return [data];*/
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
if (props.type === 'label') {
return this._styleLabel[props.NAME];
}else{
return this._styleC[props.properties.z1];
}
}
}

183
src/views/Home/MapCtrl/M2D/layers/contourlayerLoop.js
View File

@ -1,183 +0,0 @@
import clone from "clone";
import polylabel from "polylabel";
import POILayer2D from "./POILayer2D";
import Style from "ol/style/Style";
import FillStyle from "ol/style/Fill";
import {zindex2d} from "../../zindex";
import TextStyle from "ol/style/Text";
import StrokeStyle from "ol/style/Stroke";
const SourceName = '等值线';
const LabelSourceName = '等值线Label'
const ShapeStyle = {
id: SourceName,
type: 'fill-extrusion',
source: SourceName,
layout: {
},
paint: {
/*
'fill-extrusion-color': [
'case',
['>', ['get', 'z1'], 0], ['get', 'fill'],
'#020315'
],
*/
'fill-extrusion-color': ['get', 'fill'],
'fill-extrusion-height': ['*', 50, ['get', 'z1']],
'fill-extrusion-opacity': 0.8,
},
};
const ShapeLabelStyle = {
id: LabelSourceName,
type: 'symbol',
source: LabelSourceName,
layout: {
'text-size': 12,
'text-font': ['Roboto Black'],
'text-field': ['get', 'value'],
// 'text-offset': [0, 0.6],
'text-anchor': 'center',
'text-max-width': 6
},
'paint': {
'text-color': '#000',
'text-halo-color': '#fff',
'text-halo-width': 1
}
};
function calLabel(f, field, geojson) {
const geometry = f.geometry;
const label = f?.properties?.[field];
if (!label) {
return;
}
let coords = [];
if (geometry.type === 'Polygon') {
if (geometry.coordinates?.length) {
coords.push(geometry.coordinates);
}
} else if (geometry.type === 'MultiPolygon') {
for (const p of geometry.coordinates) {
if (p?.length) {
coords.push(p);
}
}
}
for (const c of coords) {
var p = polylabel(c, 1.0);
if (Array.isArray(p) && p[0] && p[1]) {
geojson.features.push({
type: 'Feature',
properties: { value: label },
geometry: {
type: 'Point',
coordinates: p,
}
})
}
}
}
export default class ContourlayerLoop extends POILayer2D {
static LayerName = 'ContourLayerLoop';
static SourceName = SourceName;
static LabelSourceName = LabelSourceName;
constructor(props, map) {
super(props);
this._style1 = new Style({
fill: new FillStyle({
color: '#C7DFBB',
}),
zIndex: zindex2d.sx,
});
this._styleLabel = {};
this._styleC = {};
this._data = props.setting;
}
getLayerName() {
return ContourlayerLoop.LayerName;
}
async dataPromise() {
/*const { shp, shps, index, label } = this._data?.contour || {};
let data = shp || (shps || [])[index];
if (!data) {
data = { type: 'FeatureCollection', features: [] };
}
const features = data.features || [];
if(features.length>0){
features.forEach(o => {
this._styleC[o.properties.z1] = new Style({
fill: new FillStyle({
color: o.properties.fill,
}),
//zIndex: zindex2d.sx,
});
});
}
const labelObj = { type: 'FeatureCollection', features: [] };
for (const f of features) {
calLabel(f, label, labelObj);
}
let newArray = [];
if(labelObj.features.length>0){
labelObj.features.map(o=>{
newArray.push(
{
"NAME": o.properties.value,
"level": 3,
"lgtd": o.geometry.coordinates[0],
"lttd": o.geometry.coordinates[1],
"type": "label"
}
);
});
}
const labelData = newArray;
if(labelData.length>0){
labelData.forEach(o => {
this._styleLabel[o.NAME] = new Style({
text: new TextStyle({
text: o.NAME,
font: 'bold 14px 微软雅黑',
fill: new FillStyle({ color: '#000' }),
stroke: new StrokeStyle({ color: '#fff', width: 1 }),
overflow: true,
zIndex: o.level,
}),
})
});
};
return [...features,...labelData];*/
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
if (props.type === 'label') {
return this._styleLabel[props.NAME];
}else{
return this._styleC[props.properties.z1];
}
}
}

182
src/views/Home/MapCtrl/M2D/layers/flowAnalysisLayer.js
View File

@ -1,182 +0,0 @@
import clone from "clone";
import polylabel from "polylabel";
import POILayer2D from "./POILayer2D";
import Style from "ol/style/Style";
import FillStyle from "ol/style/Fill";
import {zindex2d} from "../../zindex";
import TextStyle from "ol/style/Text";
import StrokeStyle from "ol/style/Stroke";
const SourceName = '等值线';
const LabelSourceName = '等值线Label'
const ShapeStyle = {
id: SourceName,
type: 'fill-extrusion',
source: SourceName,
layout: {
},
paint: {
/*
'fill-extrusion-color': [
'case',
['>', ['get', 'z1'], 0], ['get', 'fill'],
'#020315'
],
*/
'fill-extrusion-color': ['get', 'fill'],
'fill-extrusion-height': ['*', 50, ['get', 'z1']],
'fill-extrusion-opacity': 0.8,
},
};
const ShapeLabelStyle = {
id: LabelSourceName,
type: 'symbol',
source: LabelSourceName,
layout: {
'text-size': 12,
'text-font': ['Roboto Black'],
'text-field': ['get', 'value'],
// 'text-offset': [0, 0.6],
'text-anchor': 'center',
'text-max-width': 6
},
'paint': {
'text-color': '#000',
'text-halo-color': '#fff',
'text-halo-width': 1
}
};
function calLabel(f, field, geojson) {
const geometry = f.geometry;
const label = f?.properties?.[field];
if (!label) {
return;
}
let coords = [];
if (geometry.type === 'Polygon') {
if (geometry.coordinates?.length) {
coords.push(geometry.coordinates);
}
} else if (geometry.type === 'MultiPolygon') {
for (const p of geometry.coordinates) {
if (p?.length) {
coords.push(p);
}
}
}
for (const c of coords) {
var p = polylabel(c, 1.0);
if (Array.isArray(p) && p[0] && p[1]) {
geojson.features.push({
type: 'Feature',
properties: { value: label },
geometry: {
type: 'Point',
coordinates: p,
}
})
}
}
}
export default class FlowAnalysisLayer extends POILayer2D {
static LayerName = 'FlowAnalysisLayer';
static SourceName = SourceName;
constructor(props, map) {
super(props);
this._style1 = new Style({
fill: new FillStyle({
color: '#C7DFBB',
}),
zIndex: zindex2d.sx,
});
this._styleLabel = {};
this._styleC = {};
this._data = props.setting;
}
getLayerName() {
return FlowAnalysisLayer.LayerName;
}
async dataPromise() {
/*const { shp, shps, index, label } = this._data?.contour || {};
let data = shp || (shps || [])[index];
if (!data) {
data = { type: 'FeatureCollection', features: [] };
}
const features = data.features || [];
if(features.length>0){
features.forEach(o => {
this._styleC[o.properties.z1] = new Style({
fill: new FillStyle({
color: o.properties.fill,
}),
//zIndex: zindex2d.sx,
});
});
}
const labelObj = { type: 'FeatureCollection', features: [] };
for (const f of features) {
calLabel(f, label, labelObj);
}
let newArray = [];
if(labelObj.features.length>0){
labelObj.features.map(o=>{
newArray.push(
{
"NAME": o.properties.value,
"level": 3,
"lgtd": o.geometry.coordinates[0],
"lttd": o.geometry.coordinates[1],
"type": "label"
}
);
});
}
const labelData = newArray;
if(labelData.length>0){
labelData.forEach(o => {
this._styleLabel[o.NAME] = new Style({
text: new TextStyle({
text: o.NAME,
font: 'bold 14px 微软雅黑',
fill: new FillStyle({ color: '#000' }),
stroke: new StrokeStyle({ color: '#fff', width: 1 }),
overflow: true,
zIndex: o.level,
}),
})
});
};
return [...features,...labelData];*/
}
styleFunc = ({ props }) => {
if (!this.isVisible()) {
return null;
}
if (props.type === 'label') {
return this._styleLabel[props.NAME];
}else{
return this._styleC[props.properties.z1];
}
}
}

73
src/views/Home/MapCtrl/M2D/layers/highroadLayer2D.js
View File

@ -1,73 +0,0 @@
import POILayer2D from "./POILayer2D";
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import { zindex2d } from "../../zindex";
export default class highroadLayer2D extends POILayer2D {
static LayerName = 'highroadLayer';
constructor(props) {
super({ ...props, rowKey: 'code' });
this._style1 = new Style({
zIndex: 6,//zindex2d.boua2,
stroke: new StrokeStyle({
color: 'rgba(138,189,165,0.1)',
width: 4,
}),
});
this._style2 = new Style({
zIndex: 6,//zindex2d.boua2,
stroke: new StrokeStyle({
color: '#ffffff',
width: 2,
}),
});
this._styleLabel = {};
this.highlights = this.getHighlightMap();
}
getLayerName() {
return highroadLayer2D.LayerName;
}
async dataPromise() {
const a1 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/highroad.geojson`)
.then(resp => resp.json())
.then(data => data.features)
.then(features => features.map(o => ({
...o.properties,
geometry: o.geometry,
type: 'boua',
ADCD: `${o.properties.ADCD}000000000`.substr(0, 15)
})))
.catch(() => []);
console.log("a1++++",a1);
return [...a1];
}
styleFunc = ({ props }) => {
if (this.highlights[props.code]) {
return this._style1Highlight;
}
if (!this.isVisible()) {
return null;
}
return [this._style1,this._style2];
}
setSetting(setting) {
if (setting?.highlight?.highroadLayer !== this._setting?.highlight?.highroadLayer) {
this.highlights = this.getHighlightMap(setting?.highlight);
this.redrawLayer();
}
this._setting = setting;
}
}

124
src/views/Home/MapCtrl/MapCtrl.less
View File

@ -1,124 +0,0 @@
.map-ctrl-root {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
.tip-container {
display: block;
position: absolute;
z-index: 999;
}
.tip-txt {
background-color: gray;
border: 2px solid white;
color: white;
padding: 4px;
}
}
a.mapboxgl-ctrl-logo {
display: none;
}
.mapboxgl-popup-content {
background: rgba(4, 8, 27, 0.8);
border-radius: 0px;
padding: 0;
box-shadow: 0 0 0.5rem 0 rgba(31, 95, 102, 0.7);
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
-webkit-align-self: center;
align-self: center;
border-bottom: none;
border-top-color: rgba(4, 8, 27, 0.8);
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
-webkit-align-self: center;
align-self: center;
border-left: none;
border-right-color: rgba(4, 8, 27, 0.8);
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
-webkit-align-self: center;
align-self: center;
border-top: none;
border-bottom-color: rgba(4, 8, 27, 0.8);
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
-webkit-align-self: center;
align-self: center;
border-right: none;
border-left-color: rgba(4, 8, 27, 0.8);
}
.featuretip-title {
border-bottom: 1px solid rgba(36, 136, 223, 0.60);
color: aliceblue;
padding: 0.5rem 1rem;
font-size: 1rem;
display: flex;
.extra {
flex-shrink: 0;
}
.name {
flex-grow: 1;
}
}
.featuretip-prop-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.2rem;
border-bottom: 1px dashed #00deff88;
}
.marker1 {
position: absolute;
bottom: 0;
left: 0;
transform: translateX(-50%);
line-height: 1;
}
.e-marker {
transform-origin: bottom center;
cursor: pointer;
&__image {
transform: scale(0);
transform-origin: 50% 50%;
}
&__circle {
display: none;
}
&__text {
font-size: 14px;
font-family: brandon-grotesque, sans-serif;
text-align: center;
opacity: 0;
color: #fff;
fill: #fff;
transform-origin: 50% 50%;
// Center SVG text
alignment-baseline: middle;
text-anchor: middle;
}
}

52
src/views/Home/MapCtrl/Markers/AZDLayer.js
View File

@ -1,52 +0,0 @@
import { AzdPromise } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import AZDMarker from "./AZDMarker"
export default class AZDLayer extends BaseLayer {
static LayerName = 'AZDLayer';//危险区
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return AZDLayer.LayerName;
}
onAdd() {
AzdPromise.get().then((data) => {
const list = data.map((i)=>{
return {
id : i.pid,
...i
}
})
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || []
});
});
}
setSetting(setting) {
const highlights = setting?.highlight?.AZDLayer;
if (highlights !== this._setting?.highlight?.AZDLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return AZDMarker;
}
}

196
src/views/Home/MapCtrl/Markers/AZDMarker.js
View File

File diff suppressed because one or more lines are too long

54
src/views/Home/MapCtrl/Markers/AdcdAllLayer.js
View File

@ -1,54 +0,0 @@
import BaseLayer from "../baselayer";
import AdcdAllMarker from "./AdcdAllMarker";
import {AllAdcdPromise, xzList} from "../../../../models/_/common";
export default class AdcdAllLayer extends BaseLayer {
static LayerName = 'AdcdAllLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return AdcdAllLayer.LayerName;
}
async onAdd() {
const agnp = await AllAdcdPromise.get();
const xzLabel = agnp.map(o => ({
...o,
// id:o.ADCODE99+o.LAST_NAME9,
CODE:o.ADCODE99,
NAME:o.LAST_NAME9,
stcd: o.ADCD,
type: 'label'
}))
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: xzLabel || []
});
}
setSetting(setting) {
const highlights = setting?.highlight?.AdcdAllLayer;
if (highlights !== this._setting?.highlight?.AdcdAllLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return AdcdAllMarker;
}
}

167
src/views/Home/MapCtrl/Markers/AdcdAllMarker.js
View File

@ -1,167 +0,0 @@
import React, {useEffect, useMemo, useState} from 'react';
import { zindexmarker } from '../zindex';
import { useDispatch, useSelector } from 'react-redux';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ level }, { width, highlight }) {
let color1= 'red'
return `
<div style="cursor:pointer">
<svg fill="${color1}" t="1673677830289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="112679" width="${32}" height="32">
<path d="M798.235936 511.99828c0 157.609784-127.772934 285.377557-285.374116 285.377557s-285.374116-127.767773-285.374117-285.377557c0-157.611504 127.772934-285.374116 285.374117-285.374117s285.374116 127.764333 285.374116 285.374117z" p-id="112680"></path>
<path d="M512.860099 511.99828m-220.653353 0a220.653353 220.653353 0 1 0 441.306706 0 220.653353 220.653353 0 1 0-441.306706 0Z" fill="#8DCDB5" p-id="112681"></path>
<path d="M512.860099 511.99828m-179.46491 0a179.464911 179.464911 0 1 0 358.929821 0 179.464911 179.464911 0 1 0-358.929821 0Z" fill="#69C0A3" p-id="112682"></path>
<path d="M512.860099 511.99828m-123.565327 0a123.565327 123.565327 0 1 0 247.130655 0 123.565327 123.565327 0 1 0-247.130655 0Z" p-id="112683"></path>
</svg>
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function AdcdAllMarker({ data, dispatch, setting, zoom, distSq, layerVisible }) {
const highlight = setting;
const getLayerVisible = useSelector((s) => s.map.layerVisible)
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
//console.log("zoom change",zoom);
}, [zoom]);
useEffect(() => {
const width = 32;
const placeholder = document.getElementById(`marker_xianzhuji_${data.CODE}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.xianzhuji + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [ highlight, zoom ]);
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
{
data.CODE === '422826'?
<div
id={`marker_xianzhuji_${data.CODE}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.tuxiang + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
></div>:null
}
<div
className="markerLabel"
style={{
// backgroundColor: '#0008',
color: data.CODE==='422826'?'rgba(230,0,0)':!getLayerVisible.SatelliteImage?'#595959':'#fff',
padding: 4,
borderRadius: 4,
fontSize: data.CODE==='422826'?18:14,
fontWeight:data.CODE==='422826'?700:400,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex:1,
// zIndex: zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
{data?.NAME}
</div>
</>
)
}
export default React.memo(AdcdAllMarker);

52
src/views/Home/MapCtrl/Markers/AdcdLayer.js
View File

@ -1,52 +0,0 @@
import BaseLayer from "../baselayer";
import AdcdMarker from "./AdcdMarker";
import {AgnpPromise, xzList} from "../../../../models/_/common";
export default class AdcdLayer extends BaseLayer {
static LayerName = 'AdcdLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return AdcdLayer.LayerName;
}
async onAdd() {
const agnp = await AgnpPromise.get();
const xzLabel = agnp.filter(o => o.LEVEL === 4 || o.LEVEL === 5 || o.LEVEL === 6).map(o => ({
...o,
stcd: o.OBJECTID,
level: o.LEVEL,
id: o.OBJECTID,
type: 'label'
}))
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: xzLabel || []
});
}
setSetting(setting) {
const highlights = setting?.highlight?.AdcdLayer;
if (highlights !== this._setting?.highlight?.AdcdLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return AdcdMarker;
}
}

243
src/views/Home/MapCtrl/Markers/AdcdMarker.js
View File

@ -1,243 +0,0 @@
import React, {useEffect, useMemo, useState} from 'react';
import { zindexmarker } from '../zindex';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ level }, { width, highlight }) {
let color1;
if (level === 5) {
color1 = '#ec4e4e';
} else if (level === 6) {
color1 = '#1296db';
} else {
color1 = '#1296db';
}
if(level === 5){
return `
<div style="position:relative">
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
</svg>
<img width="${width}" style="position:absolute;top:0;left:2px" src="data:image/png;base64,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"
alt="" className="panel-icon" />
</div>
`;
}else if(level === 4){
return `
<div style="position:relative">
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
</svg>
<img width="16" style="position:absolute;top:0;left:2px" src="data:image/png;base64,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"
alt="" className="panel-icon" />
</div>
`;
}else{
return `
<div style="position:relative">
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
</svg>
<img width="${width-4}" style="position:absolute;top:0;left:2px" src="data:image/png;base64,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"
alt="" className="panel-icon" />
</div>
`;
}
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function AdcdMarker({ data, dispatch, setting, zoom, distSq, layerVisible }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
//console.log("zoom change",zoom);
}, [zoom]);
useEffect(() => {
const width = 12;
const placeholder = document.getElementById(`marker_tuxiang_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.tuxiang + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [ highlight, zoom, layerVisible ]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'adcd',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
{
( (zoom > 8 || distSq < dist2 || highlight) && (data.level === 5 || data.level === 4) &&
// isShow
true
) && (
<>
<div
id={`marker_tuxiang_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: data.level === 4?6:4,//zindexmarker.tuxiang + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
// onClick={showPop}
></div>
<div
className="markerLabel"
style={{
// backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: 3,//zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: data.level === 4? 'red':'#0008'
}}>
{data?.NAME}
</div>
</>
)
}
{
( (zoom > 12 || distSq < dist2 || highlight) && data.level === 6 &&
// isShow
true
) && (
<>
<div
id={`marker_tuxiang_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: 2,//zindexmarker.tuxiang + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
// onClick={showPop}
></div>
<div
className="markerLabel"
style={{
// backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: 1,//zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: !layerVisible.SatelliteImage?'#0008':'#fff'
}}>
{data?.NAME}
</div>
</>
)
}
</>
)
}
export default React.memo(AdcdMarker);

46
src/views/Home/MapCtrl/Markers/ForecastLayer.js
View File

@ -1,46 +0,0 @@
// import clone from "clone";
import BaseLayer from "../baselayer";
import ForecastMarker from "./ForecastMarker";
import {config} from "../../../../config";
import staticData from '../../../staticData';
export default class ForecastLayer extends BaseLayer {
static LayerName = 'ForecastLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return ForecastLayer.LayerName;
}
onAdd() {
/*this._dispatch.runtime.setMarkers({
[this.getLayerName()]: staticData.ybyjData[0]?.submergeDetails[0].townList || []
});*/
}
setSetting(setting) {
const highlights = setting?.highlight?.ForecastLayer;
if (highlights !== this._setting?.highlight?.ForecastLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return ForecastMarker;
}
}

218
src/views/Home/MapCtrl/Markers/ForecastMarker.js
View File

@ -1,218 +0,0 @@
import React, {useEffect, useState} from 'react';
import { zindexmarker } from '../zindex';
import {Button, Modal, Tabs, message} from "antd";
import staticData from '../../../staticData';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ type }, { width, highlight }) {
let color1;
if (type === 0) {
color1 = '#FF0000';
} else if (type === 1) {
color1 = '#F39800';
} else if (type === 2) {
color1 = '#F39800';
}
/*return `
<div style="cursor:pointer">
<svg fill="${color2}" t="1668582218569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3035" width="${width}" height="22">
<path d="M810.666667 170.666667a128 128 0 0 1 128 128v426.666666a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128V298.666667a128 128 0 0 1 128-128h597.333334z m-347.008 359.594666a85.333333 85.333333 0 0 0-115.370667-0.384l-5.205333 5.205334-148.949334 161.28a42.666667 42.666667 0 0 0 26.368 71.338666l4.949334 0.298667H801.706667a42.666667 42.666667 0 0 0 32-70.826667l-97.194667-110.336a41.386667 41.386667 0 0 0-55.466667-0.768l-3.754666 3.754667-77.952 73.514667-2.005334 2.56-130.730666-132.778667-2.901334-2.858667zM704 341.333333a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" p-id="3036" fill="#1296db"></path>
</svg>
</div>
`;*/
return `
<div style="cursor:pointer">
<svg fill="${color1}" t="1668582218569" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3035"
width="${width}" height="33"
>
<path d="M1011.982 842.518 606.673 140.565c-49.575-85.822-130.595-85.822-180.157 0L21.205 842.518c-49.562 85.91-9.015 155.99 90.04 155.99l810.693 0C1020.997 998.507 1061.502 928.423 1011.982 842.518zM460.924 339.737c14.565-15.747 33.082-23.622 55.665-23.622 22.595 0 41.095 7.792 55.675 23.307 14.485 15.55 21.725 34.997 21.725 58.382 0 20.12-30.235 168.07-40.32 275.704l-72.825 0c-8.845-107.635-41.652-255.584-41.652-275.704C439.194 374.774 446.446 355.407 460.924 339.737zM571.244 851.538c-15.32 14.92-33.55 22.355-54.65 22.355-21.095 0-39.33-7.435-54.647-22.355-15.275-14.885-22.867-32.915-22.867-54.09 0-21.065 7.592-39.29 22.867-54.565 15.317-15.28 33.552-22.92 54.647-22.92 21.1 0 39.33 7.64 54.65 22.92 15.265 15.275 22.875 33.5 22.875 54.565C594.119 818.623 586.509 836.653 571.244 851.538z" p-id="2697"></path>
</svg>
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function ForecastMarker({ data, dispatch, setting, zoom, distSq }) {
//console.log("ForecastMarker",data);
const highlight = setting;
let zindexOffset = 1;
if (!data.type) {
zindexOffset = 0;
} else if (data.type) {
zindexOffset = 2;
}
useEffect(() => {
const width = 14;//12
const placeholder = document.getElementById(`marker_forecast_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
//console.log(placeholder);
const el = placeholder.firstChild;
//console.log(el);
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.tuxiang + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
setActiveKey("1");
setVisible(true);
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'forecast',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
};
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
const [visible, setVisible] = useState(false);
const [modalData, setModalData] = useState(staticData.yjfsjlData);
const [modalTitle, setModalTitle] = useState("");
const [activeKey, setActiveKey] = useState("1");
useEffect(() => {
if(data.status === 0){
setModalTitle("预警核实");
}else if(data.status === 1){
setModalTitle("发布外部预警");
}else if(data.status === 2){
setModalTitle("灾情上报");
}
setModalData(staticData.yjfsjlData);
}, []);
return (
<>
<div
id={`marker_forecast_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%) ${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.tuxiang + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>
{/*<Modal
visible={visible}
width={960}
style={{top:"60px"}}
title={<div className="clearFloat">
<span className="lf" style={{width:"3px",height:"20px",background:'#0075F9',margin:"4px 8px 0 0",letterSpacing:"1px"}}></span>
<span className="lf" style={{lineHeight:"27px",marginRight:"10px",fontWeight:"bold"}}>{modalTitle}</span>
</div>}
className="homeModal"
onCancel={()=>{setVisible(false);setActiveKey("1");}}
footer={data.status === 0?[<Button type="primary" style={{marginRight:"20px"}} >发布内部预警</Button>,<Button type="primary" >关闭预警</Button>]:
data.status === 1?[<Button type="primary" style={{marginRight:"20px"}} >发布外部预警</Button>,<Button type="primary" >关闭预警</Button>]:[]}
>
<Tabs defaultActiveKey={activeKey}>
<Tabs.TabPane tab="基础信息" key="1">
<BasePage statusVal={data.status} tabsData={data}/>
</Tabs.TabPane>
<Tabs.TabPane tab="关联站点" key="2">
<StationWarnPage yjlx={data.yjlx}/>
</Tabs.TabPane>
<Tabs.TabPane tab="预警配置信息" key="3">
<WarnConfigPage record={modalData}/>
</Tabs.TabPane>
<Tabs.TabPane tab="预警发送记录" key="4">
<WarnMsgPage record={modalData}/>
</Tabs.TabPane>
<Tabs.TabPane tab="预警指标" key="5">
<WarnIndicatorsPage />
</Tabs.TabPane>
</Tabs>
</Modal>*/}
</>
)
}
export default React.memo(ForecastMarker);

53
src/views/Home/MapCtrl/Markers/FzdxLayer.js
View File

@ -1,53 +0,0 @@
// import clone from "clone";
import BaseLayer from "../baselayer";
import FzdxMarker from "./FzdxMarker";
import {FzdxPromise} from "../../../../models/_/base";
import {DcpjPromise} from "../../../../models/_/dcpj";
export default class FzdxLayer extends BaseLayer {
static LayerName = 'FzdxLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return FzdxLayer.LayerName;
}
async onAdd() {
const FzdxData = await DcpjPromise("fzdx");
if(FzdxData.length>0){
FzdxData.map(o=>{
o.stcd = o.ADCD
});
}
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: FzdxData || []
});
}
setSetting(setting) {
const highlights = setting?.highlight?.FzdxLayer;
if (highlights !== this._setting?.highlight?.FzdxLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return FzdxMarker;
}
}

167
src/views/Home/MapCtrl/Markers/FzdxMarker.js
View File

@ -1,167 +0,0 @@
import React, {useEffect, useState} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { zindexmarker } from '../zindex';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ level }, { width, highlight }) {
let color1 = '#DF5512';
return `
<div style="cursor:pointer">
<svg fill="${color1}" t="1673850589843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4229" width="${width}" height="22">
<path d="M552.96 643.072H471.04c-9.728 0-17.92-7.68-17.92-17.408L429.056 148.48c-0.512-10.24 7.68-18.944 17.92-18.944h129.024c10.24 0 18.944 8.704 17.92 18.944l-23.552 477.696c0 9.216-7.68 16.896-17.408 16.896z" p-id="4230"></path>
<path d="M512 817.664m-105.472 0a105.472 105.472 0 1 0 210.944 0 105.472 105.472 0 1 0-210.944 0Z" p-id="4231"></path>
</svg>
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function FzdxMarker({ data, dispatch, setting, zoom, distSq }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 22;
const placeholder = document.getElementById(`marker_fzdx_${data.ADCD}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.tuxiang + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [ highlight ]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.ADCD,
type: 'adcd',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
<div
id={`marker_fzdx_${data.ADCD}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.tuxiang + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>
{
(zoom > 14 || distSq < dist2 || highlight) && (
<div
className="markerLabel"
style={{
backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
{data?.NAME}
</div>
)
}
</>
)
}
export default React.memo(FzdxMarker);

52
src/views/Home/MapCtrl/Markers/GongShuiLayer.js
View File

@ -1,52 +0,0 @@
import { GongShuiPromiseWX } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import GongShuiMarker from "./GongShuiMarker"
export default class GongShuiLayer extends BaseLayer {
static LayerName = 'GongShuiLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return GongShuiLayer.LayerName;
}
onAdd() {
GongShuiPromiseWX.get().then((data) => {
const list = data.map((i)=>{
return {
id : i.stcd,
...i
}
})
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || []
});
});
}
setSetting(setting) {
const highlights = setting?.highlight?.GongShuiLayer;
if (highlights !== this._setting?.highlight?.GongShuiLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return GongShuiMarker;
}
}

196
src/views/Home/MapCtrl/Markers/GongShuiMarker.js
View File

@ -1,196 +0,0 @@
import React, { useEffect } from 'react';
import { zindexmarker } from '../zindex';
import { useDispatch, useSelector } from 'react-redux';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ rzWarning, rzState }, { width, highlight }) {
let color1;
color1 = '#1296db';
return `
<div style="position:relative">
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
</svg>
<img width="${width}" style="position:absolute;top:0;left:0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAABFNJREFUSEudlWtMm2UUx/+npS2lpaUt7aDQcVXGYG7TAjpnFrMtjm1uAy/RL2ZzGWEzfjBZXBgiIIZlRLNPbsyZ4UyMi4kwFGQRNSYOhwNv3AbJuIzScjEttLR0FOhj3teWlLY0zvdbcy6/55zz7zmECB9jTAXgMIBDADYD0PvcLQAGAHwNoJmIZtdLQ+EMjLFoAG8tMbzdZnHGtU0u4K+5RUw9WOHdE6KF2BonQWFiDAr18jkRoQ7ABSJ6EJwvBMAYSwJwo9XiMlb323B/YTlSkUiJiUJljhoH9LJuAEeIyBwYsAbAJfcy1lnTb0u+OOyImDjYeCpDgYoc9YSA6MlAyCrA15afq/usxkjJRQQssfBsDlKZq+EqecbfrkBAWavFVft610zY6ONpsXjzkTgkSqNgWljCh0Nz+GLcGeJ7NU/HtessEZ3jjDyAU4vHy0Z3/jChDNfzU5kKlGYoUd5jxYDDg6fio1GZo0FVnxWfB0G4mdzanWwXCyiNU5cfcLTZ7Gwo6f475EVcSwYKN+K1X6dx27rI2zViAXZvkOJsthrbvjOFxFwxanEoSX6MiD71AxpPds8UNZpdIc7JUiE69xjwYsck1BIhtBIh9iXE4NqYA9cKEpDZOob55bVDKU6S4ZJR10RExX7A4I7vTVnDrlBJigXA8P4UHOmYgtm9jB2aaAzNe5AqE+HCtng82jYe8qgMWRR+2WMYIqJNfoAjvWUs1rUSXh61W9TYrpKgpGsGJvcKsmJFaMjXodnswvnBuRCATEgYOZg6T0QKP8CZ2jImc68D4OZQtzUeLxnkcC57ERsl4Fv0Tp8N3jBvkgoJYwdTXUQk9wNG8ttNaeEUpBQJ+FZw8uUqOZ6uxNVRB8p6rKjYrMLFe3ZYPd41VXBKurPXMEpE6X7AV6XdM8VNQUPepZXislELlViI8l4r3shUQi+NwqR7GR/ds6MmVw37khev3J7CH3OeVUhRkgz1Rl0jEb3gB5Q2TTgvlf62VqbPJcTgs4INfGDtgA2lmUqoxULYPCu4PGxHWbaatx2+ZUGnT8Lc7/ontChKlp8kono/QLHkZab8dpPC4tuYnOP/AeijhVx7HCIBGYjIEbgqKr+1uKqOBawKrv8FaglOZ6lw9M40D9ykEPMyvTm5gBs7E3Hu7izapxfg9P0XGvJ02K+XVRFR9eqq8K0LMYCuil7rYx+PPNwm9Te/JF2Bmi2aHgB5RMQPJXhdG7wMHe/2WQ1XHhJyIl2B93I1JgHhaSJa3R/hDk4KgMZvzM7Hq/ptmHD/e8XW+7hVUpWjxvNJ8t8BFBPR/UDfSCfz9KKXnbk56ZJfH3fixxn3GsazOile3SjHvkSZUyKg8wA++E8nMzALY0wJ4GXuPn8yYs8u77Xx5vdz1TiRobzL3WEAXxKRfb0Kw1YQ7MwYUwD4qW5wdjtjwJls1Z8AdnEyjNi/4CFHcmaMaQG0+GIOEFHo8QiT4B9CpcwoDsGItwAAAABJRU5ErkJggg==" alt="" className="panel-icon" />
</div>
`
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function GongShuiMarker({ data, dispatch, setting, zoom, distSq }) {
const highlight = setting;
const getLayerVisible = useSelector((s) => s.map.layerVisible)
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 20;
const placeholder = document.getElementById(`marker_gongshui_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.gongshui + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'gongshui',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 14) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
<div
id={`marker_gongshui_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
fontWeight:"bold",
fontSize:16,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.gongshui + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
cursor:"pointer"
}}
onClick={showPop}
></div>
{
(zoom > 14 || distSq < dist1 || highlight) && (
<div
className="markerLabel2"
style={{
// backgroundColor: '#0008',
width:"100px",
fontSize: 12,
fontWeight:"bold",
lineHeight: 1,
bottom: -14 * markerZoom,
left: 0,
top:25,
transform: `translateX(-50%)`,
zIndex: zindexmarker.gongshuiLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: `rgba(0, 0, 0, 0.533)`,
// textShadow: '2px 2px 4px #000000'
}}>
{data.v || '-'}
</div>
)
}
{
(zoom > 10 || distSq < dist2 || highlight) && (
<div
className="markerLabel2"
style={{
// backgroundColor: '#0008',
padding: "2px 0",
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.gongshuiLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: !getLayerVisible.SatelliteImage?'#0008':'#fff'
}}>
{data.name}
</div>
)
}
</>
)
}
export default React.memo(GongShuiMarker);

57
src/views/Home/MapCtrl/Markers/HdswAllLayer.js
View File

@ -1,57 +0,0 @@
import { HDRealPromiseWX2,HDRealPromiseWX3 } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import HdswAllMarker from "./HdswAllMarker";
export default class HdswAllLayer extends BaseLayer {
static LayerName = 'HdswAllLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return HdswAllLayer.LayerName;
}
onAdd() {
HDRealPromiseWX2.get().then((data) => {
// const sh = data.filter(o => o.source==='SH')
// const sw = data.filter(o => o.source==='SW')
// const sk = data.filter(o => o.source==='SK')
HDRealPromiseWX3.get().then((data2) => {
const list1 = data||[]
const list2 = data2||[]
const list = [...list1,...list2]
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || []
});
})
});
}
setSetting(setting) {
const highlights = setting?.highlight?.HdswAllLayer;
if (highlights !== this._setting?.highlight?.HdswAllLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return HdswAllMarker;
}
}

230
src/views/Home/MapCtrl/Markers/HdswAllMarker.js
View File

@ -1,230 +0,0 @@
import React, { useEffect } from 'react';
import { zindexmarker } from '../zindex';
import {useSelector} from "react-redux";
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ status, warning, source }, { width, highlight }) {
let color1, color2;
color1 = '#0f0';
color2 = '#17abe3';
// if (status !== "1") {
// color1 = '#888';
// color2 = '#17abe3';
// } else if (warning === "3") {
// color1 = '#f00';
// color2 = '#ec4e4e';
// } else if (warning === "2") {
// color1 = 'yellow';
// color2 = '#ec4e4e';
// } else if (warning === "1") {
// color1 = 'yellow';
// color2 = '#ec4e4e';
// } else {
// color1 = '#0f0';
// color2 = '#17abe3';
// }
return `
<div style="cursor:pointer">
<svg t="1619076397355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4205" width="${width}" height="${width}">
</svg>
<div style="display:flex;alignItems:center;margin-top:6px"}}>
<div style="width:0px;height:0px; border-left:10px solid transparent; border-right:10px solid transparent; border-top:25px solid #0f0;position:relative">
<div style="position:absolute;left:-6px;top:-22px;font-size:12px">
${{'SH':'山','SW':'水','QX':'气','SK':'工'}?.[source]}
</div>
</div>
</div>
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function HdswAllMarker({ data, dispatch, setting, zoom, distSq }) {
const sqz = useSelector((s) => s.map.sqz);
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 12;
const placeholder = document.getElementById(`marker_hdsw_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.hdsw + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight, sqz]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'hdsw',
data:{...data,xiangqingShow:'不显示'},
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
const isShow = ()=>{
if(sqz && data.source && sqz[data.source]){
return true
}else{
return false
}
}
return (
<>
{
isShow()?<div
id={`marker_hdsw_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.hdsw + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>:null
}
{
(zoom > 14 || distSq < dist2 || highlight) && isShow() && (
<div
className="markerLabel"
style={{
backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.hdswLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
{data?.stnm}
</div>
)
}
{
(zoom > 14 || distSq < dist2 || highlight) && (
<div
className="markerLabel2"
style={{
backgroundColor: '#0008',
fontSize: 12,
fontWeight:"bold",
lineHeight: 1,
bottom: -14 * markerZoom,
left: 0,
transform: `translateX(-50%)`,
zIndex: zindexmarker.hdswLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: `#fff`,
textShadow: '2px 2px 4px #000000',
minWidth:"20px"
}}>
{
/*(!data.rz || !(data.state === 1 || data.rzState === 1)?"-":data.rz.toFixed(2))*/
// (!data.z || !(data.status === "1" || data.rzState === 1)?"-":data.z.toFixed(2))
(!data.z?"-":data.z.toFixed(2))
}m
</div>
)
}
</>
)
}
export default React.memo(HdswAllMarker);

46
src/views/Home/MapCtrl/Markers/HdswLayer.js
View File

@ -1,46 +0,0 @@
import { HDRealPromiseWX } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import HdswMarker from "./HdswMarker";
export default class HdswLayer extends BaseLayer {
static LayerName = 'HdswLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return HdswLayer.LayerName;
}
onAdd() {
HDRealPromiseWX.get().then((data) => {
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: data || []
});
});
}
setSetting(setting) {
const highlights = setting?.highlight?.HdswLayer;
if (highlights !== this._setting?.highlight?.HdswLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return HdswMarker;
}
}

210
src/views/Home/MapCtrl/Markers/HdswMarker.js
View File

@ -1,210 +0,0 @@
import React, { useEffect } from 'react';
import { zindexmarker } from '../zindex';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ status, warning }, { width, highlight }) {
let color1, color2;
color1 = '#0f0';
color2 = '#17abe3';
// if (status !== "1") {
// color1 = '#888';
// color2 = '#17abe3';
// } else if (warning === "3") {
// color1 = '#f00';
// color2 = '#ec4e4e';
// } else if (warning === "2") {
// color1 = 'yellow';
// color2 = '#ec4e4e';
// } else if (warning === "1") {
// color1 = 'yellow';
// color2 = '#ec4e4e';
// } else {
// color1 = '#0f0';
// color2 = '#17abe3';
// }
return `
<div style="position:relative">
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
</svg>
<img width="${width}" style="position:absolute;top:0;left:0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA1CAYAAAAgYencAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAJLSURBVFhHxZk/T8JAGIcBo8HBhMTFmDgbJ930Uxg/pnECYqJlUiZ10k033dRFoiCl/LO/9lqupXd977w7nqW9K4GH6/v+eoRqtV6tbxxvnlRWwNyf+5HAzuf+F45s3hnDi+/zGixGnf41m3NK+LleDSd++6cVzTjGb/ebsYA3cL4Cwf3wbtab9iKB2cfkHRPRFUeMOgMPx0gAJBOuCG97E8dUIJlwwfRt/Dp+8h9xngpgAhfY0Cq+t+i6VADwF2wSVn/adVkB7oItkDtBd3DDhlkBXMAL2NAKCD3+MzICLlIxH3oZAWA7FfOhtyxgMRWj9AtDjw0jlgRspmJR2C0JAFupWBR2hQI2UhErm6QfT6GAjVQU1VahADCdiqLuEgsYTEVZvggFTKai7L2EAiZTUbaaQgFgKhVl9SQXMJCKZR0lFTCRimXFLBUA/03FsjoiCOgXImUFSwWKnmBUKDVUKgB0i5HSRTQBjXZEjgTd33TvJ4IkgDpQTcXxQ/zTiw2FkATib7PYyVIYtmirRhIAqg8n6p6CLqDweJ68BM/U/QRZgP89Vwb12wOyAKDehrBoyempJEBJRVT+6La8/RKUBCipGK6S0oZWSQCUpaLK8gN1AUkqxrsotdhWFpClIjX9eJQFZKlITT8eZQEgakdKl+TREyhIRQQVEpANyWgJFKWiSvrxaAmA/G3Q2TMAbQH+fqPydXfP2gJ8KqL3VTcsCdoCIElF1fQzRv1062w3OJjXGmsNNuUW/Muyfbl3xYarYf2wfsRONahU/gBd1OeNjK84SwAAAABJRU5ErkJggg=="
alt="" className="panel-icon" />
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function HdswMarker({ data, dispatch, setting, zoom, distSq }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 8;
const placeholder = document.getElementById(`marker_hdsw_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.hdsw + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'hdsw',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
<div
id={`marker_hdsw_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.hdsw + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>
{
(zoom > 14 || distSq < dist2 || highlight) && (
<div
className="markerLabel"
style={{
backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.hdswLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
{data?.stnm}
</div>
)
}
{
(zoom > 14 || distSq < dist2 || highlight) && (
<div
className="markerLabel2"
style={{
backgroundColor: '#0008',
fontSize: 12,
fontWeight:"bold",
lineHeight: 1,
bottom: -14 * markerZoom,
left: 0,
transform: `translateX(-50%)`,
zIndex: zindexmarker.hdswLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: `#fff`,
textShadow: '2px 2px 4px #000000',
minWidth:"20px"
}}>
{
/*(!data.rz || !(data.state === 1 || data.rzState === 1)?"-":data.rz.toFixed(2))*/
// (!data.z || !(data.status === "1" || data.rzState === 1)?"-":data.z.toFixed(2))
(!data.z?"-":data.z.toFixed(2))
}m
</div>
)
}
</>
)
}
export default React.memo(HdswMarker);

54
src/views/Home/MapCtrl/Markers/HeLiuZhuJiLayer.js
View File

@ -1,54 +0,0 @@
import BaseLayer from "../baselayer";
import HeLiuZhuJiMarKer from "./HeLiuZhuJiMarKer";
import {HeLiuPromise, xzList} from "../../../../models/_/common";
export default class HeLiuZhuJiLayer extends BaseLayer {
static LayerName = 'HeLiuZhuJiLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return HeLiuZhuJiLayer.LayerName;
}
async onAdd() {
const agnp = await HeLiuPromise.get();
const xzLabel = agnp.map(o => ({
...o,
id:o.FeatureID,
TEXTSTRING:o.TextString,
CODE:o.ADCODE99,
NAME:o.LAST_NAME9,
stcd: o.ADCD,
type: 'label'
}))
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: xzLabel || []
});
}
setSetting(setting) {
const highlights = setting?.highlight?.HeLiuZhuJiLayer;
if (highlights !== this._setting?.highlight?.HeLiuZhuJiLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return HeLiuZhuJiMarKer;
}
}

148
src/views/Home/MapCtrl/Markers/HeLiuZhuJiMarKer.js
View File

@ -1,148 +0,0 @@
import React, {useEffect, useMemo, useState} from 'react';
import { zindexmarker } from '../zindex';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ level }, { width, highlight }) {
let color1= 'red'
return `
<div style="cursor:pointer">
<svg fill="${color1}" t="1673677830289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="112679" width="${32}" height="32">
<path d="M798.235936 511.99828c0 157.609784-127.772934 285.377557-285.374116 285.377557s-285.374116-127.767773-285.374117-285.377557c0-157.611504 127.772934-285.374116 285.374117-285.374117s285.374116 127.764333 285.374116 285.374117z" p-id="112680"></path>
<path d="M512.860099 511.99828m-220.653353 0a220.653353 220.653353 0 1 0 441.306706 0 220.653353 220.653353 0 1 0-441.306706 0Z" fill="#8DCDB5" p-id="112681"></path>
<path d="M512.860099 511.99828m-179.46491 0a179.464911 179.464911 0 1 0 358.929821 0 179.464911 179.464911 0 1 0-358.929821 0Z" fill="#69C0A3" p-id="112682"></path>
<path d="M512.860099 511.99828m-123.565327 0a123.565327 123.565327 0 1 0 247.130655 0 123.565327 123.565327 0 1 0-247.130655 0Z" p-id="112683"></path>
</svg>
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function HeLiuZhuJiMarKer({ data, dispatch, setting, zoom, distSq, layerVisible }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
//console.log("zoom change",zoom);
}, [zoom]);
useEffect(() => {
const width = 32;
const placeholder = document.getElementById(`marker_heliuzhuji_${data.CODE}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.xianzhuji + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [ highlight, zoom ]);
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
<div
className="markerLabel"
style={{
// backgroundColor: '#0008',
color: 'rgba(0,161,233)',//data.CODE==='422826'?'rgba(230,0,0)':'#595959',
padding: 4,
borderRadius: 4,
fontSize: data.FONTSIZE==='9'?14:10,
// fontWeight:data.CODE==='422826'?700:400,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
// zIndex: zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
{data?.TEXTSTRING}
</div>
</>
)
}
export default React.memo(HeLiuZhuJiMarKer);

48
src/views/Home/MapCtrl/Markers/PicStLayer.js
View File

@ -1,48 +0,0 @@
// import clone from "clone";
import { PicStMapDataPromise } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import PicStMarker from "./PicStMarker";
export default class PicStLayer extends BaseLayer {
static LayerName = 'PicStLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return PicStLayer.LayerName;
}
onAdd() {
PicStMapDataPromise().then((data) => {
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: data || []
});
});
}
setSetting(setting) {
const highlights = setting?.highlight?.PicStLayer;
if (highlights !== this._setting?.highlight?.PicStLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return PicStMarker;
}
}

178
src/views/Home/MapCtrl/Markers/PicStMarker.js
View File

@ -1,178 +0,0 @@
import React, { useEffect } from 'react';
import { Table, Tabs,Modal,message,Tooltip } from 'antd';
import { zindexmarker } from '../zindex';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ alarm, status }, { width, highlight }) {
let color1, color2;
if (!status) {
color1 = '#1296db';
color2 = '#17abe3';
} else if (alarm) {
color1 = '#1296db';
color2 = '#ec4e4e';
} else {
color1 = '#1296db';
color2 = '#17abe3';
}
return `
<div style="position:relative">
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
</svg>
<img width="${width}" style="position:absolute;top:0;left:0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA8BJREFUSEudlX9M1GUcx9/v41fBdWoac+hxgq3ENSHvDhNHNP+SYULnbAkFuBrUygx1peUCKmy0jJk1Q9oCF7HVONHhMFulMSC5I6k/wJp2HkfMUkv5pcB972nPed92h8eddH/e8/68X9/Pj+f5ECF+Qoh5AHIBbACwHECCTz4EoA/AMQBHSf4zkw2DHQgh7gJQNuVRXj0+0D23zdWD3qsXcGn8ls/C2HlIm78U2XojchLTr0VpIt4DUEPy5nS/2wBCiEUAWlqd3aaKnkZcHP0rVJJYoo1HhbEA6w3pdgB5JP/wDwgASHOP8PxY2dO0+OO+1pDG0w9fXL4e5cbNgxpqHvGH/AfwlaW93N5omq25CpOQSlOBzCRTLZc/YHers3tv8emaWX35dHF9Vpks1+sk35VnXoCclknF7cg4umOOWnMNg/Y/wE8IQEAE/Cd70pm773p0RGSSnC4VUNxyseuz53740Ct+5aFc7Fn5VNhMFI8Hj39die7LvwVoP330ZeQtWb2FZL0KsJa2f/REs6PDK9xrLkJJyrqwACko/H4frk6MQPEosF85743ZmLQGtZkvHSFpUQHnVrWUPXhh+NKMgO1dddixwoJFcfMDwOPuCcRGxuDk4FnkfyevA7BUtxBn8mp+JblMBQwbvii+Z8w9MSMguelZkMT+1SWyibdl983gWWz2AeIiY+DMrx8hqVMBo/rGorgbymRIwE1lEtXpW/DMA2tDAu6OiIaroGGMpFYF/G60bkty+m5tsB7ktJWjylyEtAXJQXvjn4FBG48ey34HyWQV0FzafsDS7OicdZOPODqRqI1H37UBlHXV+ZqcgdrMrVaSG1XA81ZH58GS9gNewa7UTdiZagk7RUII5J18Gx1/9gdoD2VuhSUp4wWSn6gA3ZTH7TJat+mGxv/23r650dqwALdQMDJ1I0CXEHuvLM9wlCZST3LY/6koPz5gqyg69UFY41CChse2IyfRXEGyUur8AdEAbG/YDq+o7W/7X5DSlGxUmQt/AWAm6R3J6c+13iNExx7bYf2hcydmBSlZtg7vmAtdGnINSZcaHGzhGABYjznPrHzT/jkGx66EBC2OW4C3TE9jg2HVTwAsJJ3+AaFW5s4JZeq1Npdd23T+NL4d+jkAtDYhFfn3ZyFbbxqNiYiqBvD+Ha1MfxchxBwAT8r9XNd/ImW3rcF7XGUuRGlKtpxNuTy+JHl9pjTDP/q39oUOwKnq3q8elq//rrRNvQCy5BiGa9QdAaSJEOI+AHJRy5gckpfDmcvzfwGAPogoI769tgAAAABJRU5ErkJggg==" alt="" className="panel-icon" />
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function PicStMarker({ data, dispatch, setting, zoom, distSq }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 12;
const placeholder = document.getElementById(`marker_tuxiang_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.tuxiang + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'tuxiang',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
<Tooltip title={data.name}>
<div
id={`marker_tuxiang_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.tuxiang + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>
</Tooltip>
{
// (zoom > 12 || distSq < dist2 || highlight) && (
// <div
// className="markerLabel"
// style={{
// backgroundColor: '#0008',
// padding: 4,
// borderRadius: 4,
// fontSize: 10,
// lineHeight: 1,
// top: 0,
// left: 0,
// transform: 'translateX(-50%)',
// zIndex: zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
// }}>
// {data?.stnm}
// </div>
// )
}
</>
)
}
export default React.memo(PicStMarker);

52
src/views/Home/MapCtrl/Markers/QSYDWLayer.js
View File

@ -1,52 +0,0 @@
import { DzzhdPromise } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import QSYDWMarker from "./QSYDWMarker"
export default class QSYDWLayer extends BaseLayer {
static LayerName = 'QSYDWLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return QSYDWLayer.LayerName;
}
onAdd() {
DzzhdPromise.get().then((data) => {
const list = data.map((i)=>{
return {
id : i.eicd,
...i
}
})
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || []
});
});
}
setSetting(setting) {
const highlights = setting?.highlight?.QSYDWLayer;
if (highlights !== this._setting?.highlight?.QSYDWLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return QSYDWMarker;
}
}

198
src/views/Home/MapCtrl/Markers/QSYDWMarker.js
View File

@ -1,198 +0,0 @@
import React, { useEffect } from 'react';
// import { zindexmarker } from '../zindex';
const zindexmarker = {
z:36,
hilightPlus:40,
zLabel:56
}
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ rzWarning, rzState }, { width, highlight }) {
return `
<div style="position:relative">
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
aa
</svg>
<img width="${width}" style="position:absolute;top:0;left:0" src="data:image/png;base64,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"
alt="" className="panel-icon" />
</div>
`
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function QSYDWMarker({ data, dispatch, setting, zoom, distSq }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 16;
const placeholder = document.getElementById(`marker_qishiyedanwei_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.z + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
dispatch.runtime.setCameraTarget({
center: [data.lgtd, data.lttd],
zoom: 18,
pitch: 60
})
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'qishiyedanwei',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
<div
id={`marker_qishiyedanwei_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.z + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
cursor:"pointer"
}}
onClick={showPop}
></div>
{/* {
(zoom > 14 || distSq < dist1 || highlight) && (
<div
className="markerLabel2"
style={{
backgroundColor: '#0008',
fontSize: 12,
fontWeight:"bold",
lineHeight: 1,
bottom: -14 * markerZoom,
left: 0,
transform: `translateX(-50%)`,
zIndex: zindexmarker.zLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: `#fff`,
textShadow: '2px 2px 4px #000000'
}}>
{data.rz || '-'}m
</div>
)
} */}
{/* {
(zoom > 12 || distSq < dist2 || highlight) && (
<div
className="markerLabel2"
style={{
backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.zLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
{data.name}
</div>
)
} */}
</>
)
}
export default React.memo(QSYDWMarker);

49
src/views/Home/MapCtrl/Markers/RadarLayer.js
View File

@ -1,49 +0,0 @@
// import clone from "clone";
import BaseLayer from "../baselayer";
import RadarMarker from "./RadarMarker";
export default class RadarLayer extends BaseLayer {
static LayerName = 'RadarLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return RadarLayer.LayerName;
}
onAdd() {
const systemSwitchType = localStorage.getItem('address') && localStorage.getItem('address')==="wufeng";
const data = [
systemSwitchType?{"id":1,"adcd":"","name":"","level":6,"lgtd":110.498736,"lttd":30.05789, warnType: 0}:
{"id":1,"adcd":"","name":"","level":6,"lgtd":109.914319,"lttd":30.510822, warnType: 0},
];
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: data || []
});
}
setSetting(setting) {
const highlights = setting?.highlight?.WarnLayer;
if (highlights !== this._setting?.highlight?.WarnLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return RadarMarker;
}
}

208
src/views/Home/MapCtrl/Markers/RadarMarker.js
View File

@ -1,208 +0,0 @@
import React, {useEffect, useState} from 'react';
import { zindexmarker } from '../zindex';
import { Modal,Tabs } from "antd";
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ warnType, status }, { width, highlight }) {
let color1 = '#11b7cd';
/*return `
<div style="cursor:pointer">
<svg fill="${color2}" t="1668582218569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3035" width="${width}" height="22">
<path d="M810.666667 170.666667a128 128 0 0 1 128 128v426.666666a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128V298.666667a128 128 0 0 1 128-128h597.333334z m-347.008 359.594666a85.333333 85.333333 0 0 0-115.370667-0.384l-5.205333 5.205334-148.949334 161.28a42.666667 42.666667 0 0 0 26.368 71.338666l4.949334 0.298667H801.706667a42.666667 42.666667 0 0 0 32-70.826667l-97.194667-110.336a41.386667 41.386667 0 0 0-55.466667-0.768l-3.754666 3.754667-77.952 73.514667-2.005334 2.56-130.730666-132.778667-2.901334-2.858667zM704 341.333333a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" p-id="3036" fill="#1296db"></path>
</svg>
</div>
`;*/
return `
<div style="cursor:pointer">
<svg fill="${color1}" t="1668582218569" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3035"
width="${width}" height="33"
>
<path d="M0.19968 0h1023.968712v1023.968712H0.19968z" fill="transparent" p-id="4215"></path><path d="M235.484935 941.368569l-35.952679 36.009567a98.300996 98.300996 0 0 1-139.202858 0l-13.880465-13.709804a98.869868 98.869868 0 0 1 0-139.54418l35.95268-36.009567A519.49346 519.49346 0 0 1 152.145259 140.226826L491.249565 480.127552l100.235159-100.462708a84.875629 84.875629 0 1 1 51.539759 51.653532L542.732436 531.781084l339.218079 339.900726a516.421554 516.421554 0 0 1-646.46558 69.686759z m721.329071-576.323723A303.891159 303.891159 0 0 0 653.26417 60.869251V0a364.703523 364.703523 0 0 1 364.077764 365.044846z m-121.454067 0a182.323318 182.323318 0 0 0-182.038882-182.550867v-54.725439a237.048757 237.048757 0 0 1 236.764321 237.276306z" p-id="4216"></path>
</svg>
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function RadarMarker({ data, dispatch, setting, zoom, distSq }) {
const [visible, setVisible] = useState(false);
const systemSwitchType = localStorage.getItem('address') && localStorage.getItem('address')==="wufeng";
const [iframeUrl, setIframeUrl] = useState("");
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.warnType) {
zindexOffset = 2;
}
useEffect(() => {
const width = 30;//12
const placeholder = document.getElementById(`marker_radar_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
//console.log(placeholder);
const el = placeholder.firstChild;
//console.log(el);
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.radar + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
/*dispatch.runtime.setFeaturePop({
id: data.id,
type: 'radar',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})*/
setVisible(true);
};
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
useEffect(() => {
if(systemSwitchType){
setIframeUrl("http://223.75.53.141:81/isc/index.html#/player?cameraIndexCode=c53571c976c34fd09f11ad1a61b5e4cd&token=111");
}else{
setIframeUrl("http://223.75.53.141:81/isc/index.html#/player?cameraIndexCode=0fda6a3d0df743b1ac35debe77155cb1&token=111");
}
}, [systemSwitchType]);
return (
<>
<div
id={`marker_radar_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%) ${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.radar + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>
{/*{
(zoom > 12 || distSq < dist2 || highlight) && (
<div
className="markerLabel"
style={{
backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.tuxiangLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
{data?.stnm}
</div>
)
}*/}
<Modal
visible={visible}
title="测雨雷达监控视频"
footer={null}
onCancel={()=>{setVisible(false)}}
width="70vw"
className="radarVideoModal"
style={{top:"12vh", height:"82vh"}}
>
<Tabs defaultActiveKey={1}>
<Tabs.TabPane tab="方舱监控" key="1">
<iframe src={iframeUrl} style={{width: "100%", height:"100%"}}></iframe>
</Tabs.TabPane>
</Tabs>
</Modal>
</>
)
}
export default React.memo(RadarMarker);

62
src/views/Home/MapCtrl/Markers/RealDrpAllLayer.js
View File

@ -1,62 +0,0 @@
import { DrpRealPromiseWX } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import RealDrpAllMarker from "./RealDrpAllMarker";
export default class RealDrpAllLayer extends BaseLayer {
static LayerName = 'RealDrpAllLayer';
constructor(props) {
super(props);
this.highlights = {};
this._visible = false;
this._layerSettings = {};
}
getLayerName() {
return RealDrpAllLayer.LayerName;
}
onAdd() {
// 此处为何会重复请求2次？
DrpRealPromiseWX.get().then((data) => {
let list = []
console.log("RealDrpAllLayer.js", data);
// if (Array.isArray(data)) {
// if (this._layerSettings.skVisible) {
// list = data.filter(o => o.type !== 'SK' && o.type2 !== 'swsk');
// }
// if (this._layerSettings.hdVisible) {
// list = data.filter(o => !o.hasRz || o.type === 'SK' || o.type2 === 'swsk');
// }
// }
list = data.filter(o => o.lgtd && o.lttd && o.elem=='drp');//筛选一下，保证数据都是有经纬度的
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || []
});
});
}
setSetting(setting) {
const highlights = setting?.highlight?.RealDrpAllLayer;
if (highlights !== this._setting?.highlight?.RealDrpAllLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return RealDrpAllMarker;
}
}

218
src/views/Home/MapCtrl/Markers/RealDrpAllMarker.js
View File

@ -1,218 +0,0 @@
import React, { useEffect } from 'react';
import { zindexmarker } from '../zindex';
import { DRP_COLORS } from "../../../../utils/renutils";
import {useSelector} from "react-redux";
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ h24,source }, { width, highlight }) {
let color1;
// if (h24 === 0 || h24 === null) {
// color1 = "#ADB6D9";
// } else if (h24 >= 0.1 && h24 < 10) {
// color1 = "#BDEF9A";
// } else if (h24 >= 10 && h24 < 25) {
// color1 = "#59B666";
// } else if (h24 >= 25 && h24 < 50) {
// color1 = "#6EC2FA";
// } else if (h24 >= 50 && h24 < 100) {
// color1 = "#1E1ACA";
// } else if (h24 >= 100 && h24 < 250) {
// color1 = "#EB20F7";
// } else if (h24 >= 250) {
// color1 = "#781D4F";
// }
color1 = "#1E1ACA";
return `
<div style="cursor:pointer">
<svg t="1619076397355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4205" width="${12}" height="${12}">
</svg>
<div style="display:flex;align-items:center">
<div style="width:20px;height:20px;background:rgb(102, 177, 255);border-radius:10px;text-align:center;line-height:20px;font-size:12px;color:#ffffff">${{'SH':'山','SW':'水','QX':'气','SK':'工'}?.[source]}</div>
</div>
</div>
`
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function RealDrpAllMarker({ data, dispatch, setting, zoom, distSq }) {
const yqz = useSelector((s) => s.map.yqz);
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 12;
const placeholder = document.getElementById(`marker_drp_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.drp + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight,yqz]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'drp',
data:{...data,xiangqingShow:'不显示'},
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
const isShow = ()=>{
if(yqz && data.source && yqz[data.source]){
return true
}else{
return false
}
}
return (
<>
{
isShow()?<div
id={`marker_drp_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.drp + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>:null
}
{/* {
(zoom > 12 || distSq < dist1 || highlight) && (
<div
className="markerLabel2"
style={{
backgroundColor: '#0008',
fontSize: 12,
fontWeight:"bold",
lineHeight: 1,
bottom: -14 * markerZoom,
left: 0,
transform: `translateX(-50%)`,
zIndex: zindexmarker.drpLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: `#fff`,
textShadow: '2px 2px 4px #000000'
}}>
{data.h24 || '-'}m
</div>
)
}*/}
{
(zoom > 14 || distSq < dist2 || highlight) && isShow() && (
<div
className="markerLabel"
style={{
backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.drpLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
<div style={{textAlign:"center"}}>{data.name}</div>
{/* <div style={{textAlign:"center"}}>{data.h24 || '-'}m</div> */}
</div>
)
}
</>
)
}
export default React.memo(RealDrpAllMarker);

63
src/views/Home/MapCtrl/Markers/RealDrpLayer.js
View File

@ -1,63 +0,0 @@
import { DrpRealPromiseWX } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import RealDrpMarker from "./RealDrpMarker";
export default class RealDrpLayer extends BaseLayer {
static LayerName = 'RealDrpLayer';
constructor(props) {
super(props);
this.highlights = {};
this._visible = false;
this._layerSettings = {};
}
getLayerName() {
return RealDrpLayer.LayerName;
}
onAdd() {
// 此处为何会重复请求2次？
DrpRealPromiseWX.get().then((data) => {
let list = []
console.log("RealDrpLayer.js", data);
// if (Array.isArray(data)) {
// if (this._layerSettings.skVisible) {
// list = data.filter(o => o.type !== 'SK' && o.type2 !== 'swsk');
// }
// if (this._layerSettings.hdVisible) {
// list = data.filter(o => !o.hasRz || o.type === 'SK' || o.type2 === 'swsk');
// }
// }
list = data.filter(o => o.lgtd && o.lttd);//筛选一下，保证数据都是有经纬度的
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || []
});
});
}
setSetting(setting) {
const highlights = setting?.highlight?.RealDrpLayer;
if (highlights !== this._setting?.highlight?.RealDrpLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return RealDrpMarker;
}
}

203
src/views/Home/MapCtrl/Markers/RealDrpMarker.js
View File

@ -1,203 +0,0 @@
import React, { useEffect } from 'react';
import { zindexmarker } from '../zindex';
import { DRP_COLORS } from "../../../../utils/renutils";
import {useSelector} from "react-redux";
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ h24 }, { width, highlight }) {
let color1;
// if (h24 === 0 || h24 === null) {
// color1 = "#ADB6D9";
// } else if (h24 >= 0.1 && h24 < 10) {
// color1 = "#BDEF9A";
// } else if (h24 >= 10 && h24 < 25) {
// color1 = "#59B666";
// } else if (h24 >= 25 && h24 < 50) {
// color1 = "#6EC2FA";
// } else if (h24 >= 50 && h24 < 100) {
// color1 = "#1E1ACA";
// } else if (h24 >= 100 && h24 < 250) {
// color1 = "#EB20F7";
// } else if (h24 >= 250) {
// color1 = "#781D4F";
// }
color1 = "#1E1ACA";
return `
<div style="cursor:pointer">
<svg t="1619076397355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4205" width="${12}" height="${12}">
<div style="width:10px;height:10px;background:${color1};border-radius: 50%;"></div>
</svg>
</div>
`
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function RealDrpMarker({ data, dispatch, setting, zoom, distSq }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 12;
const placeholder = document.getElementById(`marker_drp_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.drp + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.id,
type: 'drp',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
<div
id={`marker_drp_${data.id}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.drp + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>
{/* {
(zoom > 12 || distSq < dist1 || highlight) && (
<div
className="markerLabel2"
style={{
backgroundColor: '#0008',
fontSize: 12,
fontWeight:"bold",
lineHeight: 1,
bottom: -14 * markerZoom,
left: 0,
transform: `translateX(-50%)`,
zIndex: zindexmarker.drpLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0),
color: `#fff`,
textShadow: '2px 2px 4px #000000'
}}>
{data.h24 || '-'}m
</div>
)
}*/}
{
(zoom > 14 || distSq < dist2 || highlight) && (
<div
className="markerLabel"
style={{
backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.drpLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
<div style={{textAlign:"center"}}>{data.name}</div>
{/* <div style={{textAlign:"center"}}>{data.h24 || '-'}m</div> */}
</div>
)
}
</>
)
}
export default React.memo(RealDrpMarker);

55
src/views/Home/MapCtrl/Markers/RhbjqLayer.js
View File

@ -1,55 +0,0 @@
import BaseLayer from "../baselayer";
import RhbjqMarker from "./RhbjqMarker";
export default class RhbjqLayer extends BaseLayer {
static LayerName = 'RhbjqLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return RhbjqLayer.LayerName;
}
async onAdd() {
const rhbjqData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/wufeng/rhbjq.json`)//入户报警器.json
.then(resp => resp.json())
.then(data => data)
.catch(() => []);
if(rhbjqData.length>0){
rhbjqData.map(item=>{
item.stcd = item.xh;
item.id = item.xh;
});
}
//console.log("rhbjqData",rhbjqData);
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: rhbjqData || []
});
}
setSetting(setting) {
const highlights = setting?.highlight?.RhbjqLayer;
if (highlights !== this._setting?.highlight?.RhbjqLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return RhbjqMarker;
}
}

164
src/views/Home/MapCtrl/Markers/RhbjqMarker.js
View File

@ -1,164 +0,0 @@
import React, { useEffect } from 'react';
import { zindexmarker } from '../zindex';
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ },{ width, highlight }) {
let color1="#DA6361";
return `
<div style="cursor:pointer">
<svg t="1680254166820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5884" width="${width}">
<path fill="${color1}" d="M270.1 781.7h488.6V537.3c0-134.4-110-244.4-244.3-244.4-134.4 0-244.4 110-244.4 244.4v244.4zM426.5 609l113.3-150.1c3.9-5.2 12.1-1.5 10.9 4.9l-18.8 96.8 65.2-0.1c1.1 0 2.1 0.6 2.6 1.6s0.4 2.2-0.3 3.1L486.1 715.1c-3.9 5.2-12.1 1.5-10.9-4.9l18.8-96.8-65.2 0.1c-1.1 0-2.1-0.6-2.6-1.6-0.5-0.9-0.4-2.1 0.3-2.9zM279.9 253.8c7.3 9.9 22 12.3 34.2 4.9 9.9-7.3 12.3-24.4 4.9-34.2l-29.4-39.1c-7.3-12.3-21.9-14.7-34.2-7.3-9.9 9.8-12.3 24.4-4.9 34.2l29.4 41.5zM514.4 195.2c14.7 0 24.4-9.7 24.4-24.4v-48.9c0-14.7-9.7-24.4-24.4-24.4s-24.4 9.8-24.4 24.4v48.9c-0.1 14.7 9.8 24.4 24.4 24.4zM221.3 879.4c0 26.8 22 48.9 48.9 48.9h488.6c26.8 0 48.9-22 48.9-48.9v-48.9H221.3v48.9zM172.4 398L126 383.3c-14.7-4.8-26.8 2.4-31.8 14.7-4.8 14.7 2.4 26.8 14.7 31.8l46.4 14.7c14.7 2.4 26.8-4.9 31.8-14.7 4.8-14.7-2.4-26.9-14.7-31.8zM929.8 402.9c-4.9-12.3-19.5-19.6-31.8-14.7l-46.4 14.7c-12.3 4.9-19.6 19.5-14.7 31.8 4.9 12.3 19.5 19.6 31.8 14.7l46.4-14.7c12.2-2.4 19.5-17.1 14.7-31.8zM712.3 261.2c12.2 7.3 26.8 4.8 34.2-4.9l29.4-39.1c7.2-12.2 4.8-26.8-4.9-34.2-12.2-7.3-26.8-4.8-34.2 4.9L707.4 227c-7.3 9.7-4.9 26.8 4.9 34.2z" p-id="5885"></path>
</svg>
</div>
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function RhbjqMarker({ data, dispatch, setting, zoom, distSq }) {
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.alarm) {
zindexOffset = 2;
}
useEffect(() => {
const width = 12;
const placeholder = document.getElementById(`marker_rhbjq_${data.xh}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
const el = placeholder.firstChild;
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.hdsw + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
dispatch.runtime.setFeaturePop({
id: data.xh,
type: 'rhbjq',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})
}
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
return (
<>
<div
id={`marker_rhbjq_${data.xh}`}
style={{
position: 'absolute',
bottom: 0,
left: 0,
transformOrigin: 'bottom center',
transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.hdsw + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
></div>
{
(zoom > 18 || distSq < dist2 || highlight) && (
<div
className="markerLabel"
style={{
backgroundColor: '#0008',
padding: 4,
borderRadius: 4,
fontSize: 10,
lineHeight: 1,
top: 0,
left: 0,
transform: 'translateX(-50%)',
zIndex: zindexmarker.hdswLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
}}>
{data?.MEMO}
</div>
)
}
</>
)
}
export default React.memo(RhbjqMarker);

56
src/views/Home/MapCtrl/Markers/SLLayer.js
View File

@ -1,56 +0,0 @@
import { SLPromise } from "../../../../models/_/real";
import BaseLayer from "../baselayer";
import SLMarker from "./SLMarker"
export default class SLLayer extends BaseLayer {
static LayerName = 'SLLayer';//渗流
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return SLLayer.LayerName;
}
onAdd() {
SLPromise.get().then((data) => {
const list = data.map((i)=>{
i.lgtd = 114.975
i.lttd = 31.11174
return {
id : i.stationCode,
bz : '这条数据的经纬度是假的',
...i
}
})
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || []
});
});
}
setSetting(setting) {
const highlights = setting?.highlight?.SLLayer;
if (highlights !== this._setting?.highlight?.SLLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return SLMarker;
}
}

Some files were not shown because too many files have changed in this diff Show More