diff --git a/public/assets/mapicon/flow.png b/public/assets/mapicon/flow.png index 403074a..3f80be5 100644 Binary files a/public/assets/mapicon/flow.png and b/public/assets/mapicon/flow.png differ diff --git a/public/assets/mapicon/flow2.png b/public/assets/mapicon/flow2.png index b11b0d2..11da8d6 100644 Binary files a/public/assets/mapicon/flow2.png and b/public/assets/mapicon/flow2.png differ diff --git a/public/assets/mapicon/flow4.png b/public/assets/mapicon/flow4.png new file mode 100644 index 0000000..403074a Binary files /dev/null and b/public/assets/mapicon/flow4.png differ diff --git a/public/assets/mapicon/hdsw.png b/public/assets/mapicon/hdsw.png index d0859e4..7b839f5 100644 Binary files a/public/assets/mapicon/hdsw.png and b/public/assets/mapicon/hdsw.png differ diff --git a/public/assets/mapicon/hdsw2.png b/public/assets/mapicon/hdsw2.png index f11735c..ddfa96b 100644 Binary files a/public/assets/mapicon/hdsw2.png and b/public/assets/mapicon/hdsw2.png differ diff --git a/public/assets/mapicon/hdsw4.png b/public/assets/mapicon/hdsw4.png new file mode 100644 index 0000000..d0859e4 Binary files /dev/null and b/public/assets/mapicon/hdsw4.png differ diff --git a/public/assets/mapicon/sl.png b/public/assets/mapicon/sl.png index e1bee8f..1361d3e 100644 Binary files a/public/assets/mapicon/sl.png and b/public/assets/mapicon/sl.png differ diff --git a/public/assets/mapicon/sl2.png b/public/assets/mapicon/sl2.png index d2a73b0..03be4e4 100644 Binary files a/public/assets/mapicon/sl2.png and b/public/assets/mapicon/sl2.png differ diff --git a/public/assets/mapicon/sl4.png b/public/assets/mapicon/sl4.png new file mode 100644 index 0000000..e1bee8f Binary files /dev/null and b/public/assets/mapicon/sl4.png differ diff --git a/public/assets/mapicon/sy.png b/public/assets/mapicon/sy.png index 308689a..ffd08a8 100644 Binary files a/public/assets/mapicon/sy.png and b/public/assets/mapicon/sy.png differ diff --git a/public/assets/mapicon/sy2.png b/public/assets/mapicon/sy2.png index 14af05d..35bd492 100644 Binary files a/public/assets/mapicon/sy2.png and b/public/assets/mapicon/sy2.png differ diff --git a/public/assets/mapicon/sy4.png b/public/assets/mapicon/sy4.png new file mode 100644 index 0000000..308689a Binary files /dev/null and b/public/assets/mapicon/sy4.png differ diff --git a/public/assets/mapicon/video.png b/public/assets/mapicon/video.png index 0494f42..3e1fd12 100644 Binary files a/public/assets/mapicon/video.png and b/public/assets/mapicon/video.png differ diff --git a/public/assets/mapicon/video2.png b/public/assets/mapicon/video2.png index 84f7062..27a0bfe 100644 Binary files a/public/assets/mapicon/video2.png and b/public/assets/mapicon/video2.png differ diff --git a/public/assets/mapicon/video4.png b/public/assets/mapicon/video4.png new file mode 100644 index 0000000..0494f42 Binary files /dev/null and b/public/assets/mapicon/video4.png differ diff --git a/public/assets/mapicon/wy.png b/public/assets/mapicon/wy.png index b8dabb6..d9f8d5f 100644 Binary files a/public/assets/mapicon/wy.png and b/public/assets/mapicon/wy.png differ diff --git a/public/assets/mapicon/wy2.png b/public/assets/mapicon/wy2.png index 69c2f3a..1af0a3c 100644 Binary files a/public/assets/mapicon/wy2.png and b/public/assets/mapicon/wy2.png differ diff --git a/public/assets/mapicon/wy4.png b/public/assets/mapicon/wy4.png new file mode 100644 index 0000000..b8dabb6 Binary files /dev/null and b/public/assets/mapicon/wy4.png differ diff --git a/src/components/ant_override.less b/src/components/ant_override.less index e68048b..d174d30 100644 --- a/src/components/ant_override.less +++ b/src/components/ant_override.less @@ -452,4 +452,28 @@ input:-webkit-autofill:active { background: transparent!important; } } +} +//修改Radio全局样式 +.ant-radio-group{ + .ant-radio-button-wrapper{ + background: transparent; + border-color: rgba(0, 160, 233, 0.6); + color: #ffffff; + font-size: 14px; + font-weight: 400; + + + } + .ant-radio-button-wrapper:not(:first-child)::before{ + background-color: rgba(0, 160, 233, 0.8); + padding: 0; + top: 0; + } + .ant-radio-button-wrapper-checked{ + background: rgba(0, 160, 233, 0.8); + border-color: rgba(0, 160, 233, 0.6); + color: #ffffff; + font-size: 14px; + font-weight: 400; + } } \ No newline at end of file diff --git a/src/views/Home/MapCtrl/Markers/GongShuiMarker.js b/src/views/Home/MapCtrl/Markers/GongShuiMarker.js index 437a99c..ade6925 100644 --- a/src/views/Home/MapCtrl/Markers/GongShuiMarker.js +++ b/src/views/Home/MapCtrl/Markers/GongShuiMarker.js @@ -19,7 +19,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
- +
` }else{ @@ -36,7 +36,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) { function GongShuiMarker({ data, dispatch, setting, zoom }) { useEffect(() => { - const width = 13; + const width = 20; const placeholder = document.getElementById(`marker_gongshui_${data.id}`); if (!placeholder) { diff --git a/src/views/Home/MapCtrl/Markers/HdswMarker.js b/src/views/Home/MapCtrl/Markers/HdswMarker.js index 40cdc68..a638fd8 100644 --- a/src/views/Home/MapCtrl/Markers/HdswMarker.js +++ b/src/views/Home/MapCtrl/Markers/HdswMarker.js @@ -25,7 +25,7 @@ function renderMarker({ status }, { width }) {
- +
`; }else{ @@ -33,7 +33,7 @@ function renderMarker({ status }, { width }) {
- +
`; } @@ -44,7 +44,7 @@ function HdswMarker({ data, dispatch, setting, zoom }) { const [ show, setShow ] = useState(true) useEffect(() => { - const width = 8; + const width = 15; const placeholder = document.getElementById(`marker_hdsw_${data.id}`); if (!placeholder) { diff --git a/src/views/Home/MapCtrl/Markers/PicStMarker.js b/src/views/Home/MapCtrl/Markers/PicStMarker.js index d3dd7ed..1736c6c 100644 --- a/src/views/Home/MapCtrl/Markers/PicStMarker.js +++ b/src/views/Home/MapCtrl/Markers/PicStMarker.js @@ -15,7 +15,7 @@ function renderMarker({ status }, { width }) {
- +
`; }else{ @@ -33,7 +33,7 @@ function PicStMarker({ data, dispatch, setting, zoom, distSq, layerVisible }) { const [ show, setShow ] = useState(true) useEffect(() => { - const width = 10; + const width = 15; const placeholder = document.getElementById(`marker_tuxiang_${data.id}`); if (!placeholder) { diff --git a/src/views/Home/MapCtrl/Markers/SLMarker.js b/src/views/Home/MapCtrl/Markers/SLMarker.js index 1874acc..3bcd204 100644 --- a/src/views/Home/MapCtrl/Markers/SLMarker.js +++ b/src/views/Home/MapCtrl/Markers/SLMarker.js @@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
- +
` }else{ @@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
- +
` } @@ -41,7 +41,7 @@ function SLMarker({ data, dispatch, setting, zoom }) { const [ show, setShow ] = useState(true) useEffect(() => { - const width = 15; + const width = 16; const placeholder = document.getElementById(`marker_shenliu_${data.id}`); if (!placeholder) { diff --git a/src/views/Home/MapCtrl/Markers/SYMarker.js b/src/views/Home/MapCtrl/Markers/SYMarker.js index 5f837e3..76d9eaa 100644 --- a/src/views/Home/MapCtrl/Markers/SYMarker.js +++ b/src/views/Home/MapCtrl/Markers/SYMarker.js @@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
- +
` }else{ @@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
- +
` } @@ -41,7 +41,7 @@ function SYMarker({ data, dispatch, setting, zoom }) { const [ show, setShow ] = useState(true) useEffect(() => { - const width = 15; + const width = 16; const placeholder = document.getElementById(`marker_shenya_${data.id}`); if (!placeholder) { @@ -116,7 +116,7 @@ function SYMarker({ data, dispatch, setting, zoom }) { transform: 'translateX(-50%)', zIndex: zindexmarker.wyLabel }}> - {data.profileName} + {data.stationCode} ) } diff --git a/src/views/Home/MapCtrl/Markers/WYMarker.js b/src/views/Home/MapCtrl/Markers/WYMarker.js index e5116c9..ab79011 100644 --- a/src/views/Home/MapCtrl/Markers/WYMarker.js +++ b/src/views/Home/MapCtrl/Markers/WYMarker.js @@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
- +
` }else{ @@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
- +
` } @@ -42,7 +42,7 @@ function WYMarker({ data, dispatch, setting, zoom }) { const [ show, setShow ] = useState(true) useEffect(() => { - const width = 15; + const width = 16; const placeholder = document.getElementById(`marker_weiyi_${data.id}`); if (!placeholder) { diff --git a/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/TableData.js b/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/TableData.js deleted file mode 100644 index 3f72635..0000000 --- a/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/TableData.js +++ /dev/null @@ -1,45 +0,0 @@ -import {Table} from 'antd'; -import React, { useEffect, useState } from 'react'; -import moment from 'moment'; -import { render } from 'react-dom'; - - -const Tabledata = ({ data, current }) => { - const columns = [ - {title: '序号', key: 'inx', dataIndex: 'inx', align: 'center',}, - { - title: '数据时间', key: 'tm', dataIndex: 'tm', align: 'center', - render:(rec) => {rec ? moment(rec).format("YYYY-MM-DD HH:mm") : "-"} - }, - { - title: '流量(m³/s)', key: 'q', dataIndex: 'q', align: 'center', - render: (rec) => {rec ?? "-"} - }, - { - title: '水量(m³)', key: 'v', dataIndex: 'v', align: 'center', - render: (rec) => {rec ?? "-"} - }, - ]; - - - const [tableData, setTableData] = useState([]) - useEffect(() => { - if (data.length > 0) { - setTableData(data) - } - },[data]) - return ( - <> - - - - ) - -} - -export default Tabledata \ No newline at end of file diff --git a/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/drpOption.js b/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/drpOption.js deleted file mode 100644 index 0ca893e..0000000 --- a/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/drpOption.js +++ /dev/null @@ -1,168 +0,0 @@ - -import { useMemo } from 'react'; -import echarts from 'echarts/lib/echarts'; - -export default function DrpOption(data, num) { - console.log("num",num); - const minL = Math.floor(Math.min(...data?.map(s => s.q))); - const maxL = Math.ceil(Math.max(...data?.map(s => s.q))); - const minS = Math.floor(Math.min(...data?.map(s => s.v))); - const maxS = Math.ceil(Math.max(...data?.map(s => s.v))); - return { - title: { - text: `时段总水量:${num.value}${num.unit}m³`, - top: "2%", - right: "12%", - textStyle: { - fontWeight: "normal", - fontSize:14 - } - }, - tooltip: { - trigger: 'axis', - // formatter: function (params) { - // var res = `${params[0].name.substr('2020-10-14 '.length, 2)}时降雨: ${params[0].data}mm
累计降雨: ${params[1].data}mm`; - // return res; - // } - }, - grid: { - // x: 40, - // y: 30, - // x2: 30, - // y2: 28, - top: '20%', - left: '10%', - right: '10%', - bottom: '10%', - borderWidth: 0 - }, - legend: { - // 显示图例 - show: true, - top: "8%", - // 图例的位置 - // data: ['实测', '累计'] - }, - calculable: true, - xAxis: [ - { - type: 'category', - data: data?.map(item => item.tm), - splitLine: { - show: false - }, - axisLabel: { - color: '#333', - fontSize: 14, - formatter: val => val.substr(0,'2020-11-11 11:11'.length) - }, - axisLine: { - lineStyle: { - color: '#07a6ff', - width: 0.5, - } - }, - axisTick: { - show: false, - }, - } - ], - yAxis: [ - { - type: 'value', - position: 'left', - name:"流量(m³/s)", - splitLine: { - show: true, - lineStyle: { - color: '#07a6ff', - width: 0.25, - type: 'dashed' - } - }, - axisLabel: { - color: '#333', - fontSize: 12, - }, - axisLine: { - show: false - }, - axisTick: { - show: false, - }, - min: minL, - max: maxL - }, - { - type: 'value', - position: 'right', - name:"水量(m³)", - splitLine: { - show: true, - lineStyle: { - color: '#07a6ff', - width: 0.25, - type: 'dashed' - } - }, - axisLabel: { - color: '#333', - fontSize: 12, - }, - axisLine: { - show: false - }, - axisTick: { - show: false, - }, - min: minS - 1, - max: maxS - } - ], - series: [ - - { - name:'流量', - type:'line', - smooth: true, - showSymbol: false, - symbol: false, - itemStyle: { - normal: { - color: "#FAC858", - } - }, - lineStyle: { - normal: { - width: 3, - shadowColor: 'rgba(0,0,0,0.4)', - shadowBlur: 10, - shadowOffsetY: 10 - } - }, - markPoint: { - data: [{ - name: '最大值', - type: 'max', - }], - }, - data: data?.map(s => s.q), - }, - { - name: '水量', - type: 'bar', - yAxisIndex:1, - barWidth: '10%', - data: data?.map(s => s.v), - itemStyle: { - normal: { - color:"#5773c7" - }, - }, - label: { - show: false, - }, - }, - ] - }; -} diff --git a/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/index.js b/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/index.js deleted file mode 100644 index c142489..0000000 --- a/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/index.js +++ /dev/null @@ -1,185 +0,0 @@ -import React, {useEffect, useMemo, useState} from 'react'; -import {Button, DatePicker, Form, Descriptions} from 'antd'; -import ReactEcharts from 'echarts-for-react'; -import moment from 'moment' -import NormalSelect from '../../../../../../components/Form/NormalSelect'; -import './index.less' -import TableData from './TableData' -import drpOption from './drpOption'; -import { httppost } from '../../../../../../utils/request'; -import apiurl from '../../../../../../service/apiurl'; -import { exportFile,numberFormat } from '../../../../../../utils/tools'; - - -const {RangePicker} = DatePicker; - -function DrpSearch({record}) { - const name = record?.sttp == "QQ" ?"放水管流量": record?.sttp == "PQ" ? "输水管流量" : "" - const optionsType = [ - { - label: "今日", - value:1 - }, - { - label: "近一周", - value:2 - }, - { - label:"近一月", - value:3 - }, - { - label:"近三月", - value:4 - }, - { - label:"近一年", - value:5 - }, - ] - const [data, setData] = useState([]); - const [params, setParams] = useState({tm:[]}) - const [current, setCurrent] = useState(0); - - const option = useMemo(() => { - let num = 0; - if (data.length > 0) { - data.forEach(s => { - num += Number(s.v) - }) - return drpOption(data, numberFormat(num)); - } - }, [data]) - - const searchTm = (e) => { - setParams({ - ...params, - tm:e, - }) - }; - const doSearch = () => { - let data = { - ...params, - startTime:params.tm[0].format("YYYY-MM-DD HH:mm:00"), - endTime: params.tm[1].format("YYYY-MM-DD HH:mm:00"), - } - getData(data) - } - const optionChange = (e) => { - onValuesChange(e) - } - const onValuesChange = (e) => { - switch (e) { - case 1: - setParams({ ...params, tm: [moment().startOf("day"), moment()] }) - break; - case 2: - setParams({ ...params, tm: [moment().subtract(7, 'days'), moment()] }) - break; - case 3: - setParams({ ...params, tm: [moment().subtract(1, 'months'),moment()] }) - break; - case 4: - setParams({ ...params, tm: [moment().subtract(3, 'months'),moment()]}) - break; - case 5: - setParams({ ...params, tm: [moment().subtract(1, 'years'),moment()]}) - break; - default: - break; - } - - } - const exportExcel = () => { - let data = { - ...params, - stcd: record.stcd, - isAsc: false, - sortField: "tm", - tm:undefined - } - httppost(apiurl.monitor.gongshui.export, data, 'blob').then(res => { - exportFile(`${name}.xlsx`,res.data) - }) - } - const getData = async (params) => { - let data = { - ...params, - stcd: record.stcd, - isAsc: false, - sortField: "tm", - tm:undefined - } - try { - const res = await httppost(apiurl.monitor.gongshui.gsPage, data) - setData(res.data.map((item,i)=>({...item,inx: i+1}))) - } catch (error) { - console.log(error); - } - } - - useEffect(() => { - let option = ""; - if (record.stcd) { - option = { - stcd: record?.stcd, - startTime: params?.startTime || moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:00"), - endTime: params?.endTime || moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:00"), - tm:[moment().subtract(7, 'days'), moment()] - } - setParams(option) - getData(option) - } - - - }, [current,record]) - - - return ( -
-
-
- 时间段: - -
-
- 常用时段: - optionChange(e)} - /> -
- - -
-
-
- -
-
- { - data?.length > 0 ? - :
- -
- } -
-
-
- ) -} - -export default DrpSearch diff --git a/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/index.less b/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/index.less deleted file mode 100644 index 9977027..0000000 --- a/src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/index.less +++ /dev/null @@ -1,65 +0,0 @@ -.top { - display: flex; - align-items: center; - - .time-type { - margin-left: 10rem; - display: flex; - - div { - width: 80px; - text-align: center; - border: 1px solid #cccccc; - padding: 8px 0; - } - - .active { - color: #5FB7FF; - background: #F0F7FF; - border: 1px solid #5FB7FF; - } - } -} - -.mid { - - margin-top: 10px; - display: flex; - justify-content: space-between; - height: 90%; - .mid-left { - border: 1px solid #eee; - width: 47%; - height: 100%; - overflow: auto; - } - - .mid-right { - width: 52%; - height: 100%; - .react-chart { - width: 100%; - height: 300px; - } - } -} - -.footer{ - font-size: 14px; - margin-top: 40px; - .footer-row{ - display: flex; - justify-content: space-between; - .footer-item{ - flex: 1; - text-align: center; - .footer-name{ - background: #E0EDFF ; - padding: 4px 0; - } - .footer-num{ - padding: 4px 0; - } - } - } -} diff --git a/src/views/Home/MapCtrl/Pops/GongShui/index.js b/src/views/Home/MapCtrl/Pops/GongShui/index.js index 7b70e40..b704e11 100644 --- a/src/views/Home/MapCtrl/Pops/GongShui/index.js +++ b/src/views/Home/MapCtrl/Pops/GongShui/index.js @@ -1,50 +1,44 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react'; +import moment from "moment" import { CloseOutlined } from '@ant-design/icons'; -import Jcsj from "./GsJcsj"; +import titleBg from '@/assets/images/modal/title.png'; +import { Modal, Tabs } from 'antd'; +import './index.less' +import FlowPanel from '../../../components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel' -function RealDrpTip({ id, data, dispatch }) { - console.log("供水弹框数据porps",data); +function ShuikuPop({ id, data, dispatch }) { + console.log(data); + const [show, setShow] = useState(false) + + useEffect(()=>{ + setTimeout(() => { + //防止Modal打开时echarts不能找到正确的大小 + setShow(true) + }, 200); + },[]) + const closePop = () => { dispatch.runtime.closeFeaturePop(id); }; - const width = 1050; - - return ( <> -
-
-
-
-
-
- {data.stnm}  - {/* {data?.sttp && - {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}({{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]})} */} -
- -
-
-
- -
+
+
+
+ {data.stnm}
+
+
-
+
+
+ {show?:null}
) } -export default React.memo(RealDrpTip); +export default React.memo(ShuikuPop); diff --git a/src/views/Home/MapCtrl/Pops/GongShui/index.less b/src/views/Home/MapCtrl/Pops/GongShui/index.less new file mode 100644 index 0000000..7a64d69 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/GongShui/index.less @@ -0,0 +1,100 @@ +.shuikuPop{ + width: 100%; + background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8)); + + .modal-header { + height: 50px; // Reduced height to bring line closer + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + position: relative; + margin-top: 10px; + // Separator line using pseudo-element for precise positioning + &::after { + content: ''; + position: absolute; + bottom: 9px; + left: 20px; // Align with title image (which starts at padding-left) + right: 0; // Extend to the right edge + height: 1px; + background: rgba(18, 137, 221, 0.5); + } + + .title-wrapper { + height: 30px; + min-width: 150px; + display: flex; + align-items: center; + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + padding-left: 30px; // Adjust based on image content + + .title-text { + font-size: 16px; + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + letter-spacing: 2px; + } + } + + .modal-tabs { + flex: 1; + display: flex; + height: 70%; + align-items: center; + gap: 60px; // Add spacing between tabs + justify-content: center; + .tab-item { + padding: 0 10px; // Reduce horizontal padding inside tab item + height: 90%; + width: 15%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 16px; // Increase font size + color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color + transition: all 0.3s; + background-repeat: no-repeat; + background-position: center bottom; + background-size: 100% 8px; // Control height of the indicator bar + position: relative; + margin-bottom: -1px; // Align with bottom border if needed + + &:hover { + color: #fff; + } + + &.active { + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + // Selected background image + background-image: url('../../../../../assets/images/modal/selected.png'); + background-size: 100% 100%; // Restore natural aspect ratio for the glow effect + background-position: center center; // Push image slightly down to align with bottom edge + } + } + } + + .close-btn { + cursor: pointer; + color: rgba(255, 255, 255, 0.7); + font-size: 18px; + transition: color 0.3s; + + &:hover { + color: #fff; + } + } + } + .modal-body { + // flex: 1; + height: 800px; + overflow: auto; + padding: 10px; + color: #fff; + position: relative; + } +} \ No newline at end of file diff --git a/src/views/Home/MapCtrl/Pops/PciStPop/index.js b/src/views/Home/MapCtrl/Pops/PciStPop/index.js new file mode 100644 index 0000000..cd7190d --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/PciStPop/index.js @@ -0,0 +1,137 @@ +import React, { useEffect, useState } from 'react'; +import { + CloseOutlined, + CaretUpOutlined, + CaretDownOutlined, + CaretLeftOutlined, + CaretRightOutlined, + PlusOutlined, + MinusOutlined +} from "@ant-design/icons"; +import titleBg from '@/assets/images/modal/title.png'; +import './index.less' +import { httpget, httppost } from '@/utils/request'; +import HFivePlayer from '../../../../../components/VideoCom/videoPlary'; +import apiurl from '@/service/apiurl'; + + +function ShuikuPop({ id, data, dispatch }) { + console.log(data); + const [videoSrc, setVideoSrc] = useState('') + + const getVideoSrc = async() => { + try { + const res = await httpget(`${apiurl.spjk.srcData}${data.indexCode}`) + setVideoSrc(res.data); + + } catch (error) { + console.log(error); + } + } + + // 云台控制 + let timer = null; + // 云台控制 + const onOperation = async(params) => { + let data1 = { + ...params, + indexCode: data?.indexCode, + action:0 + } + try { + const res = await httppost(apiurl.spjk.controler, data1) + if (res.code == 200) { + onOperation1(params) + // if(timer) clearTimeout(timer) + // timer = setTimeout(() => { + + // },0) + } + } catch (error) { + console.log(error); + } + } + + const onOperation1 = async(params) => { + let data1 = { + ...params, + indexCode: data?.indexCode, + action:1 + } + try { + const res = await httppost(apiurl.spjk.controler,data1) + } catch (error) { + console.log(error); + } + } + + useEffect(() => { + if (data.indexCode) { + getVideoSrc(); + } + }, [data]) + + const closePop = () => { + dispatch.runtime.closeFeaturePop(id); + }; + + return ( + <> +
+
+
+ {data.name} +
+
+ +
+
+
+ +
+ { + data?.type == 1 ? +
+ onOperation({speed:30,command:"UP"})} + /> + onOperation({speed:30,command:"DOWN"})} + /> + onOperation({speed:30,command:"LEFT"})} + /> + onOperation({speed:30,command:"RIGHT"})} + /> + onOperation({speed:30,command:"ZOOM_IN"})} + /> + onOperation({speed:30,command:"ZOOM_OUT"})} + /> +
:null + } + +
+ + ) +} + +export default React.memo(ShuikuPop); diff --git a/src/views/Home/MapCtrl/Pops/PciStPop/index.less b/src/views/Home/MapCtrl/Pops/PciStPop/index.less new file mode 100644 index 0000000..1ec7b94 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/PciStPop/index.less @@ -0,0 +1,100 @@ +.pciStPop{ + width: 100%; + background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8)); + + .modal-header { + height: 50px; // Reduced height to bring line closer + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + position: relative; + margin-top: 10px; + // Separator line using pseudo-element for precise positioning + &::after { + content: ''; + position: absolute; + bottom: 9px; + left: 20px; // Align with title image (which starts at padding-left) + right: 0; // Extend to the right edge + height: 1px; + background: rgba(18, 137, 221, 0.5); + } + + .title-wrapper { + height: 30px; + min-width: 150px; + display: flex; + align-items: center; + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + padding-left: 30px; // Adjust based on image content + + .title-text { + font-size: 16px; + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + letter-spacing: 2px; + } + } + + .modal-tabs { + flex: 1; + display: flex; + height: 70%; + align-items: center; + gap: 60px; // Add spacing between tabs + justify-content: center; + .tab-item { + padding: 0 10px; // Reduce horizontal padding inside tab item + height: 90%; + width: 15%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 16px; // Increase font size + color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color + transition: all 0.3s; + background-repeat: no-repeat; + background-position: center bottom; + background-size: 100% 8px; // Control height of the indicator bar + position: relative; + margin-bottom: -1px; // Align with bottom border if needed + + &:hover { + color: #fff; + } + + &.active { + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + // Selected background image + background-image: url('../../../../../assets/images/modal/selected.png'); + background-size: 100% 100%; // Restore natural aspect ratio for the glow effect + background-position: center center; // Push image slightly down to align with bottom edge + } + } + } + + .close-btn { + cursor: pointer; + color: rgba(255, 255, 255, 0.7); + font-size: 18px; + transition: color 0.3s; + + &:hover { + color: #fff; + } + } + } + .modal-body { + // flex: 1; + height: 400px; + overflow: auto; + padding: 10px; + color: #fff; + position: relative; + } +} \ No newline at end of file diff --git a/src/views/Home/MapCtrl/Pops/ShenLiu/TableData.js b/src/views/Home/MapCtrl/Pops/ShenLiu/TableData.js index 338989b..220256a 100644 --- a/src/views/Home/MapCtrl/Pops/ShenLiu/TableData.js +++ b/src/views/Home/MapCtrl/Pops/ShenLiu/TableData.js @@ -5,7 +5,7 @@ import moment from 'moment' const Tabledata = ({tableData}) => { const columns = [ - { title: '序号', key: '', dataIndex: '', align: 'center',width:'40px',render:(a,b,c)=>c+1}, + { title: '序号', key: '', dataIndex: '', align: 'center',width:'80px',render:(a,b,c)=>c+1}, { title: '数据时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'200px',render: (rec) => {rec ?? "-"} }, { title: '渗流量', key: 'value', dataIndex: 'value', align: 'center',render: (rec) => {rec ?? "-"} }, ]; diff --git a/src/views/Home/MapCtrl/Pops/ShenLiu/index.js b/src/views/Home/MapCtrl/Pops/ShenLiu/index.js index 1245de6..9b52640 100644 --- a/src/views/Home/MapCtrl/Pops/ShenLiu/index.js +++ b/src/views/Home/MapCtrl/Pops/ShenLiu/index.js @@ -1,6 +1,16 @@ import React, { useEffect, useState, useMemo } from 'react'; -import { Descriptions, Form, Button, Input, DatePicker } from 'antd'; -import {CloseOutlined} from '@ant-design/icons'; +import { Empty } from 'antd'; +import { + CloseOutlined, + CaretUpOutlined, + CaretDownOutlined, + CaretLeftOutlined, + CaretRightOutlined, + PlusOutlined, + MinusOutlined +} from "@ant-design/icons"; +import titleBg from '@/assets/images/modal/title.png'; +import './index.less' import ReactEcharts from 'echarts-for-react'; import { httppost } from '../../../../../utils/request'; import apiurl from '../../../../../service/apiurl'; @@ -9,12 +19,11 @@ import ToolBar from './toolbar'; import TableData from './TableData' import drpOption from './drpOption'; -function ShenLiu({ id, data, dispatch, onCancel }) { +function ShuikuPop({ id, data, dispatch, onCancel }) { console.log(data); const [ tableData, setTableData ] = useState([]) const [ yjData, setYjData ] = useState([]) const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData]) - const width = 780; const closePop = () => { if(onCancel){ @@ -32,6 +41,7 @@ function ShenLiu({ id, data, dispatch, onCancel }) { }, stationCode: stationCode } + const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params) if(code!==200){ return @@ -82,19 +92,21 @@ function ShenLiu({ id, data, dispatch, onCancel }) { return ( <> -
-
-
- {data.stationCode} -
- -
+
+
+
+ {data.stationCode}
+
+ +
+
+
+
+ getData(tms,data.stationCode)}/> +
-
- getData(tms,data.stationCode)}/> -
-
+
@@ -106,9 +118,10 @@ function ShenLiu({ id, data, dispatch, onCancel }) { }
+
) } -export default React.memo(ShenLiu); +export default React.memo(ShuikuPop); diff --git a/src/views/Home/MapCtrl/Pops/ShenLiu/index.less b/src/views/Home/MapCtrl/Pops/ShenLiu/index.less new file mode 100644 index 0000000..d78bd25 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/ShenLiu/index.less @@ -0,0 +1,116 @@ +.ShenYaPop{ + width: 100%; + background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8)); + + .modal-header { + height: 50px; // Reduced height to bring line closer + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + position: relative; + margin-top: 10px; + // Separator line using pseudo-element for precise positioning + &::after { + content: ''; + position: absolute; + bottom: 9px; + left: 20px; // Align with title image (which starts at padding-left) + right: 0; // Extend to the right edge + height: 1px; + background: rgba(18, 137, 221, 0.5); + } + + .title-wrapper { + height: 30px; + min-width: 150px; + display: flex; + align-items: center; + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + padding-left: 30px; // Adjust based on image content + + .title-text { + font-size: 16px; + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + letter-spacing: 2px; + } + } + + .modal-tabs { + flex: 1; + display: flex; + height: 70%; + align-items: center; + gap: 60px; // Add spacing between tabs + justify-content: center; + .tab-item { + padding: 0 10px; // Reduce horizontal padding inside tab item + height: 90%; + width: 15%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 16px; // Increase font size + color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color + transition: all 0.3s; + background-repeat: no-repeat; + background-position: center bottom; + background-size: 100% 8px; // Control height of the indicator bar + position: relative; + margin-bottom: -1px; // Align with bottom border if needed + + &:hover { + color: #fff; + } + + &.active { + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + // Selected background image + background-image: url('../../../../../assets/images/modal/selected.png'); + background-size: 100% 100%; // Restore natural aspect ratio for the glow effect + background-position: center center; // Push image slightly down to align with bottom edge + } + } + } + + .close-btn { + cursor: pointer; + color: rgba(255, 255, 255, 0.7); + font-size: 18px; + transition: color 0.3s; + + &:hover { + color: #fff; + } + } + } + .modal-body { + // flex: 1; + height: 570px; + overflow: auto; + padding: 10px; + color: #fff; + position: relative; + + display: flex; + flex-direction: column; + .homeModal1_content{ + height: 504px; + display: flex; + padding: 5px 20px 20px 20px; + .homeModal1_content_lf{ + width: 40%; + height: 100%; + } + .homeModal1_content_rf{ + width: 60%; + height: 100%; + } + } + } +} \ No newline at end of file diff --git a/src/views/Home/MapCtrl/Pops/ShenLiu/indexOld.js b/src/views/Home/MapCtrl/Pops/ShenLiu/indexOld.js new file mode 100644 index 0000000..1245de6 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/ShenLiu/indexOld.js @@ -0,0 +1,114 @@ +import React, { useEffect, useState, useMemo } from 'react'; +import { Descriptions, Form, Button, Input, DatePicker } from 'antd'; +import {CloseOutlined} from '@ant-design/icons'; +import ReactEcharts from 'echarts-for-react'; +import { httppost } from '../../../../../utils/request'; +import apiurl from '../../../../../service/apiurl'; +import moment from "moment" +import ToolBar from './toolbar'; +import TableData from './TableData' +import drpOption from './drpOption'; + +function ShenLiu({ id, data, dispatch, onCancel }) { + console.log(data); + const [ tableData, setTableData ] = useState([]) + const [ yjData, setYjData ] = useState([]) + const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData]) + const width = 780; + + const closePop = () => { + if(onCancel){ + onCancel() + } + dispatch.runtime.closeFeaturePop(id); + }; + + const getData = async(tms,stationCode)=>{ + const params = { + type: 2, + dateTimeRangeSo: { + start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'), + end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'), + }, + stationCode: stationCode + } + const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params) + if(code!==200){ + return + } + setTableData(data) + } + + const getYjData = async(stationCode)=>{ + const params = { + "pageSo": { + "pageSize": 10, + "pageNumber": 1 + }, + "stationCode": stationCode + } + + const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params) + if(code!==200){ + return + } + const linshi = [] + records?.map((item)=>{ + if(item.status===0){ + return + } + if(item.valueOne||0){ + linshi.push({ + yjName:item.level ===1?'黄色预警':'红色预警', + value:item.valueOne, + color:item.level ===1?'#f1bf42':'red' + }) + } + if(item.valueTwo||0){ + linshi.push({ + yjName:item.level ===1?'黄色预警':'红色预警', + value:item.valueTwo, + color:item.level ===1?'#f1bf42':'red' + }) + } + }) + setYjData(linshi) + } + + useEffect(()=>{ + getYjData(data.stationCode) + getData([moment().add(-1,'months'),moment()],data.stationCode) + },[]) + + return ( + <> +
+
+
+ {data.stationCode} +
+ +
+
+ +
+ getData(tms,data.stationCode)}/> +
+
+
+ +
+
+ { + tableData.length>0? + + :
+ } +
+
+
+ + ) +} + +export default React.memo(ShenLiu); diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/TableData.js b/src/views/Home/MapCtrl/Pops/ShenYa/TableData.js index 2e95ff1..eee6970 100644 --- a/src/views/Home/MapCtrl/Pops/ShenYa/TableData.js +++ b/src/views/Home/MapCtrl/Pops/ShenYa/TableData.js @@ -5,7 +5,7 @@ import moment from 'moment' const Tabledata = ({tableData}) => { const columns = [ - { title: '序号', key: '', dataIndex: '', align: 'center',render:(a,b,c)=>c+1}, + { title: '序号', key: '', dataIndex: '', align: 'center', width:'100px', render:(a,b,c)=>c+1}, { title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',render: (rec) => {rec ?? "-"} }, { title: '库水位(m)', key: 'rz', dataIndex: 'rz', align: 'center',render: (rec) => {rec ?? "-"} }, { title: '管水位(m)', key: 'value', dataIndex: 'value', align: 'center',render: (rec) => {rec ?? "-"}}, diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js b/src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js index c7f062f..c7a46c3 100644 --- a/src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js +++ b/src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js @@ -42,6 +42,7 @@ export default function drpOption(data,yjData) { show: true, // 图例的位置 data: ["压测管水位", "库水位"], + textStyle: { color: '#fff' }, }, xAxis: [ { @@ -53,13 +54,13 @@ export default function drpOption(data,yjData) { }, axisLabel: { padding: [0, 0, 100, 0], - color: '#333', + color: '#ffffff', fontSize: 12, formatter: val => val.slice(0,10) }, axisLine: { lineStyle: { - color: '#8c8c8c', + color: '#ffffff', width: 1, } }, @@ -76,7 +77,7 @@ export default function drpOption(data,yjData) { name: "压测管水位(m)", nameTextStyle: { padding: [0, 0, 10, 10], - color:'#333333', + color:'#ffffff', fontSize: 14 }, splitLine: { @@ -88,7 +89,7 @@ export default function drpOption(data,yjData) { } }, axisLabel: { - color: '#333', + color: '#ffffff', fontSize: 12, }, axisLine: { @@ -111,7 +112,7 @@ export default function drpOption(data,yjData) { name: "库水位(m)", nameTextStyle: { padding: [0, 0, 10, 10], - color:'#333333', + color:'#ffffff', fontSize: 14 }, splitLine: { @@ -123,7 +124,7 @@ export default function drpOption(data,yjData) { } }, axisLabel: { - color: '#333', + color: '#ffffff', fontSize: 12, }, axisLine: { diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/index.js b/src/views/Home/MapCtrl/Pops/ShenYa/index.js index b6e843f..4fe0abf 100644 --- a/src/views/Home/MapCtrl/Pops/ShenYa/index.js +++ b/src/views/Home/MapCtrl/Pops/ShenYa/index.js @@ -1,6 +1,16 @@ import React, { useEffect, useState, useMemo } from 'react'; -import { Empty, Form, Button, Input, DatePicker } from 'antd'; -import {CloseOutlined} from '@ant-design/icons'; +import { Empty } from 'antd'; +import { + CloseOutlined, + CaretUpOutlined, + CaretDownOutlined, + CaretLeftOutlined, + CaretRightOutlined, + PlusOutlined, + MinusOutlined +} from "@ant-design/icons"; +import titleBg from '@/assets/images/modal/title.png'; +import './index.less' import ReactEcharts from 'echarts-for-react'; import { httppost } from '../../../../../utils/request'; import apiurl from '../../../../../service/apiurl'; @@ -9,13 +19,12 @@ import ToolBar from './toolbar'; import TableData from './TableData' import drpOption from './drpOption'; -function ShenYa({ id, data, dispatch, onCancel }) { - console.log('SY',data); +function ShuikuPop({ id, data, dispatch, onCancel }) { + console.log(data); const [ tableData, setTableData ] = useState([]) const [ yjData, setYjData ] = useState([]) const [ tabVal, setTabVal ] = useState('1') const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData]) - const width = 780; const closePop = () => { if(onCancel){ @@ -84,33 +93,33 @@ function ShenYa({ id, data, dispatch, onCancel }) { return ( <> -
-
-
- {data.stationCode} -
- -
+
+
+
+ {data.stationCode}
- -
- getData(tms,data.stationCode)} setTabVal={setTabVal}/> +
+
-
- { - tabVal==='1'? +
+
+
+ getData(tms,data.stationCode)} setTabVal={setTabVal}/> +
+ { + tabVal==='1'? tableData.length>0? - + :
- :null - } - { - tabVal==='2'?
:null - } -
+ :null + } + { + tabVal==='2'?
:null + } +
) } -export default React.memo(ShenYa); +export default React.memo(ShuikuPop); diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/index.less b/src/views/Home/MapCtrl/Pops/ShenYa/index.less new file mode 100644 index 0000000..e3b3d33 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/ShenYa/index.less @@ -0,0 +1,100 @@ +.ShenYaPop{ + width: 100%; + background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8)); + + .modal-header { + height: 50px; // Reduced height to bring line closer + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + position: relative; + margin-top: 10px; + // Separator line using pseudo-element for precise positioning + &::after { + content: ''; + position: absolute; + bottom: 9px; + left: 20px; // Align with title image (which starts at padding-left) + right: 0; // Extend to the right edge + height: 1px; + background: rgba(18, 137, 221, 0.5); + } + + .title-wrapper { + height: 30px; + min-width: 150px; + display: flex; + align-items: center; + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + padding-left: 30px; // Adjust based on image content + + .title-text { + font-size: 16px; + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + letter-spacing: 2px; + } + } + + .modal-tabs { + flex: 1; + display: flex; + height: 70%; + align-items: center; + gap: 60px; // Add spacing between tabs + justify-content: center; + .tab-item { + padding: 0 10px; // Reduce horizontal padding inside tab item + height: 90%; + width: 15%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 16px; // Increase font size + color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color + transition: all 0.3s; + background-repeat: no-repeat; + background-position: center bottom; + background-size: 100% 8px; // Control height of the indicator bar + position: relative; + margin-bottom: -1px; // Align with bottom border if needed + + &:hover { + color: #fff; + } + + &.active { + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + // Selected background image + background-image: url('../../../../../assets/images/modal/selected.png'); + background-size: 100% 100%; // Restore natural aspect ratio for the glow effect + background-position: center center; // Push image slightly down to align with bottom edge + } + } + } + + .close-btn { + cursor: pointer; + color: rgba(255, 255, 255, 0.7); + font-size: 18px; + transition: color 0.3s; + + &:hover { + color: #fff; + } + } + } + .modal-body { + // flex: 1; + height: 570px; + overflow: auto; + padding: 10px; + color: #fff; + position: relative; + } +} \ No newline at end of file diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/indexOld.js b/src/views/Home/MapCtrl/Pops/ShenYa/indexOld.js new file mode 100644 index 0000000..b6e843f --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/ShenYa/indexOld.js @@ -0,0 +1,116 @@ +import React, { useEffect, useState, useMemo } from 'react'; +import { Empty, Form, Button, Input, DatePicker } from 'antd'; +import {CloseOutlined} from '@ant-design/icons'; +import ReactEcharts from 'echarts-for-react'; +import { httppost } from '../../../../../utils/request'; +import apiurl from '../../../../../service/apiurl'; +import moment from "moment" +import ToolBar from './toolbar'; +import TableData from './TableData' +import drpOption from './drpOption'; + +function ShenYa({ id, data, dispatch, onCancel }) { + console.log('SY',data); + const [ tableData, setTableData ] = useState([]) + const [ yjData, setYjData ] = useState([]) + const [ tabVal, setTabVal ] = useState('1') + const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData]) + const width = 780; + + const closePop = () => { + if(onCancel){ + onCancel() + } + dispatch.runtime.closeFeaturePop(id); + }; + + const getData = async(tms,stationCode)=>{ + const params = { + // type: 2, + dateTimeRangeSo: { + start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'), + end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'), + }, + stationCode: stationCode + } + + const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params) + if(code!==200){ + return + } + setTableData(data) + } + + const getYjData = async(stationCode)=>{ + const params = { + "pageSo": { + "pageSize": 10, + "pageNumber": 1 + }, + "stationCode": stationCode + } + + const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params) + if(code!==200){ + return + } + const linshi = [] + records?.map((item)=>{ + if(item.status===0){ + return + } + if(item.valueOne||0){ + linshi.push({ + yjName:item.level ===1?'黄色预警':'红色预警', + value:item.valueOne, + color:item.level ===1?'#f1bf42':'red' + }) + } + if(item.valueTwo||0){ + linshi.push({ + yjName:item.level ===1?'黄色预警':'红色预警', + value:item.valueTwo, + color:item.level ===1?'#f1bf42':'red' + }) + } + }) + setYjData(linshi) + } + + useEffect(()=>{ + getYjData(data.stationCode) + getData([moment().add(-1,'months'),moment()],data.stationCode) + },[]) + + return ( + <> +
+
+
+ {data.stationCode} +
+ +
+
+ +
+ getData(tms,data.stationCode)} setTabVal={setTabVal}/> +
+
+ { + tabVal==='1'? + tableData.length>0? + + :
+ :null + } + { + tabVal==='2'?
:null + } +
+
+ + ) +} + +export default React.memo(ShenYa); diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js b/src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js index f2a56ec..386aba2 100644 --- a/src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js +++ b/src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js @@ -25,7 +25,7 @@ const ToolBar = ({search, setTabVal}) => { /> - {setTabVal(e.target.value)}} defaultValue="1" size="large" buttonStyle="outline"> + {setTabVal(e.target.value)}} defaultValue="1" size='middle' buttonStyle="outline"> 数据图 数据表 diff --git a/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.js b/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.js new file mode 100644 index 0000000..1b6779f --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.js @@ -0,0 +1,44 @@ +import React, { useEffect, useState } from 'react'; +import moment from "moment" +import { CloseOutlined } from '@ant-design/icons'; +import titleBg from '@/assets/images/modal/title.png'; +import { Modal, Tabs } from 'antd'; +import './index.less' +import ReservoirPanel from '../../../components/Business/SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel' + + +function ShuikuPop({ id, data, dispatch }) { + console.log(data); + const [show, setShow] = useState(false) + + useEffect(()=>{ + setTimeout(() => { + //防止Modal打开时echarts不能找到正确的大小 + setShow(true) + }, 200); + },[]) + + const closePop = () => { + dispatch.runtime.closeFeaturePop(id); + }; + + return ( + <> +
+
+
+ {data.stnm} +
+
+ +
+
+
+ {show?:null} +
+
+ + ) +} + +export default React.memo(ShuikuPop); diff --git a/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.less b/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.less new file mode 100644 index 0000000..7a64d69 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.less @@ -0,0 +1,100 @@ +.shuikuPop{ + width: 100%; + background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8)); + + .modal-header { + height: 50px; // Reduced height to bring line closer + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + position: relative; + margin-top: 10px; + // Separator line using pseudo-element for precise positioning + &::after { + content: ''; + position: absolute; + bottom: 9px; + left: 20px; // Align with title image (which starts at padding-left) + right: 0; // Extend to the right edge + height: 1px; + background: rgba(18, 137, 221, 0.5); + } + + .title-wrapper { + height: 30px; + min-width: 150px; + display: flex; + align-items: center; + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + padding-left: 30px; // Adjust based on image content + + .title-text { + font-size: 16px; + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + letter-spacing: 2px; + } + } + + .modal-tabs { + flex: 1; + display: flex; + height: 70%; + align-items: center; + gap: 60px; // Add spacing between tabs + justify-content: center; + .tab-item { + padding: 0 10px; // Reduce horizontal padding inside tab item + height: 90%; + width: 15%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 16px; // Increase font size + color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color + transition: all 0.3s; + background-repeat: no-repeat; + background-position: center bottom; + background-size: 100% 8px; // Control height of the indicator bar + position: relative; + margin-bottom: -1px; // Align with bottom border if needed + + &:hover { + color: #fff; + } + + &.active { + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + // Selected background image + background-image: url('../../../../../assets/images/modal/selected.png'); + background-size: 100% 100%; // Restore natural aspect ratio for the glow effect + background-position: center center; // Push image slightly down to align with bottom edge + } + } + } + + .close-btn { + cursor: pointer; + color: rgba(255, 255, 255, 0.7); + font-size: 18px; + transition: color 0.3s; + + &:hover { + color: #fff; + } + } + } + .modal-body { + // flex: 1; + height: 800px; + overflow: auto; + padding: 10px; + color: #fff; + position: relative; + } +} \ No newline at end of file diff --git a/src/views/Home/MapCtrl/Pops/ShuikuPop.js b/src/views/Home/MapCtrl/Pops/ShuikuPop.js deleted file mode 100644 index f0f8e55..0000000 --- a/src/views/Home/MapCtrl/Pops/ShuikuPop.js +++ /dev/null @@ -1,100 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import moment from "moment" -import { - CloseOutlined, -} from '@ant-design/icons'; -import { Modal, Tabs } from 'antd'; -import genDamImage from '../../../../components/DamGraph/DamImage'; -import Skssjc from "../../../../components/skComp/Skssjc"; -import Sksjcx from "../../../../components/skComp/Sksjcx"; -import { reservoirlist } from "../../../../service/station" - - - -function ShuikuPop({ id, data, dispatch }) { - console.log(data); - const [picData, setPicData] = useState({}); - const [damGraph, setDamGraph] = useState(); - const [tableData, setTableData] = useState([]) - - const getData = async (params) => { - setTableData(await reservoirlist(params)); - } - - useEffect(() => { - // if (data.url && data.url.length > 1) { - // setPicData({ - // pic1: data.url[0]?.imgPath, - // pic2: data.url[1]?.imgPath, - // pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'), - // pic2Tm: moment(data.url[1]?.tm).format('YYYY-MM-DD HH:mm:ss'), - // }); - // } else if (data.url && data.url.length == 1) { - // setPicData({ - // pic1: data.url[0]?.imgPath, - // pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'), - // }); - // } - - }, [data]);// eslint-disable-line - - useEffect(() => { - const img = genDamImage(data, 400, 260) - setDamGraph(img); - }, [data]);// eslint-disable-line - - useEffect(() => { - let option = { - sources: ["SW", "SK"], - args: "", - }; - getData(option) - }, []) - const closePop = () => { - dispatch.runtime.closeFeaturePop(id); - }; - const width = 1050; - - return ( - <> -
-
-
-
-
-
- {data?.stnm}  - {/* {(data?.sttp && data?.stnm==='黑石咀') && - {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}({{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]})} */} -
- -
-
-
- - - - - - - - -
-
-
-
-
-
- - ) -} - -export default React.memo(ShuikuPop); diff --git a/src/views/Home/MapCtrl/Pops/WeiYi/index.js b/src/views/Home/MapCtrl/Pops/WeiYi/index.js index d7a08a8..aa4a181 100644 --- a/src/views/Home/MapCtrl/Pops/WeiYi/index.js +++ b/src/views/Home/MapCtrl/Pops/WeiYi/index.js @@ -1,6 +1,16 @@ import React, { useEffect, useState, useMemo } from 'react'; -import { Empty, Form, Button, Input, DatePicker } from 'antd'; -import {CloseOutlined} from '@ant-design/icons'; +import { Empty } from 'antd'; +import { + CloseOutlined, + CaretUpOutlined, + CaretDownOutlined, + CaretLeftOutlined, + CaretRightOutlined, + PlusOutlined, + MinusOutlined +} from "@ant-design/icons"; +import titleBg from '@/assets/images/modal/title.png'; +import './index.less' import ReactEcharts from 'echarts-for-react'; import { httppost } from '../../../../../utils/request'; import apiurl from '../../../../../service/apiurl'; @@ -9,14 +19,12 @@ import ToolBar from './toolbar'; import TableData from './TableData' import drpOption from './drpOption'; -function ShenYa({ id, data, dispatch, onCancel }) { +function ShuikuPop({ id, data, dispatch, onCancel }) { console.log(data); const [ tableData, setTableData ] = useState([]) const [ yjData, setYjData ] = useState([]) const [ tabVal, setTabVal ] = useState('1') - // const option = useMemo(() => drpOption(tableData), [tableData]) const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData]) - const width = 780; const closePop = () => { if(onCancel){ @@ -35,7 +43,7 @@ function ShenYa({ id, data, dispatch, onCancel }) { stationCode: stationCode } - const { code, data} = await httppost(apiurl.monitor.dbaq.wyList,params) + const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params) if(code!==200){ return } @@ -85,35 +93,33 @@ function ShenYa({ id, data, dispatch, onCancel }) { return ( <> -
-
-
- {data.stationCode} -
- -
+
+
+
+ {data.stationCode}
- -
- getData(tms,data.stationCode)} setTabVal={setTabVal}/> +
+
-
- { - tabVal==='1'? +
+
+
+ getData(tms,data.stationCode)} setTabVal={setTabVal}/> +
+ { + tabVal==='1'? tableData.length>0? - - :
- -
- :null - } - { - tabVal==='2'?
:null - } -
+ + :
+ :null + } + { + tabVal==='2'?
:null + } +
) } -export default React.memo(ShenYa); +export default React.memo(ShuikuPop); diff --git a/src/views/Home/MapCtrl/Pops/WeiYi/index.less b/src/views/Home/MapCtrl/Pops/WeiYi/index.less new file mode 100644 index 0000000..e3b3d33 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/WeiYi/index.less @@ -0,0 +1,100 @@ +.ShenYaPop{ + width: 100%; + background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8)); + + .modal-header { + height: 50px; // Reduced height to bring line closer + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + position: relative; + margin-top: 10px; + // Separator line using pseudo-element for precise positioning + &::after { + content: ''; + position: absolute; + bottom: 9px; + left: 20px; // Align with title image (which starts at padding-left) + right: 0; // Extend to the right edge + height: 1px; + background: rgba(18, 137, 221, 0.5); + } + + .title-wrapper { + height: 30px; + min-width: 150px; + display: flex; + align-items: center; + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + padding-left: 30px; // Adjust based on image content + + .title-text { + font-size: 16px; + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + letter-spacing: 2px; + } + } + + .modal-tabs { + flex: 1; + display: flex; + height: 70%; + align-items: center; + gap: 60px; // Add spacing between tabs + justify-content: center; + .tab-item { + padding: 0 10px; // Reduce horizontal padding inside tab item + height: 90%; + width: 15%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 16px; // Increase font size + color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color + transition: all 0.3s; + background-repeat: no-repeat; + background-position: center bottom; + background-size: 100% 8px; // Control height of the indicator bar + position: relative; + margin-bottom: -1px; // Align with bottom border if needed + + &:hover { + color: #fff; + } + + &.active { + color: #fff; + text-shadow: 0 0 10px rgba(0, 160, 233, 0.8); + // Selected background image + background-image: url('../../../../../assets/images/modal/selected.png'); + background-size: 100% 100%; // Restore natural aspect ratio for the glow effect + background-position: center center; // Push image slightly down to align with bottom edge + } + } + } + + .close-btn { + cursor: pointer; + color: rgba(255, 255, 255, 0.7); + font-size: 18px; + transition: color 0.3s; + + &:hover { + color: #fff; + } + } + } + .modal-body { + // flex: 1; + height: 570px; + overflow: auto; + padding: 10px; + color: #fff; + position: relative; + } +} \ No newline at end of file diff --git a/src/views/Home/MapCtrl/Pops/WeiYi/indexOld.js b/src/views/Home/MapCtrl/Pops/WeiYi/indexOld.js new file mode 100644 index 0000000..d7a08a8 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/WeiYi/indexOld.js @@ -0,0 +1,119 @@ +import React, { useEffect, useState, useMemo } from 'react'; +import { Empty, Form, Button, Input, DatePicker } from 'antd'; +import {CloseOutlined} from '@ant-design/icons'; +import ReactEcharts from 'echarts-for-react'; +import { httppost } from '../../../../../utils/request'; +import apiurl from '../../../../../service/apiurl'; +import moment from "moment" +import ToolBar from './toolbar'; +import TableData from './TableData' +import drpOption from './drpOption'; + +function ShenYa({ id, data, dispatch, onCancel }) { + console.log(data); + const [ tableData, setTableData ] = useState([]) + const [ yjData, setYjData ] = useState([]) + const [ tabVal, setTabVal ] = useState('1') + // const option = useMemo(() => drpOption(tableData), [tableData]) + const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData]) + const width = 780; + + const closePop = () => { + if(onCancel){ + onCancel() + } + dispatch.runtime.closeFeaturePop(id); + }; + + const getData = async(tms,stationCode)=>{ + const params = { + // type: 0, + dateTimeRangeSo: { + start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'), + end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'), + }, + stationCode: stationCode + } + + const { code, data} = await httppost(apiurl.monitor.dbaq.wyList,params) + if(code!==200){ + return + } + setTableData(data) + } + + const getYjData = async(stationCode)=>{ + const params = { + "pageSo": { + "pageSize": 10, + "pageNumber": 1 + }, + "stationCode": stationCode + } + + const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params) + if(code!==200){ + return + } + const linshi = [] + records?.map((item)=>{ + if(item.status===0){ + return + } + if(item.valueOne||0){ + linshi.push({ + yjName:item.level ===1?'黄色预警':'红色预警', + value:item.valueOne, + color:item.level ===1?'#f1bf42':'red' + }) + } + if(item.valueTwo||0){ + linshi.push({ + yjName:item.level ===1?'黄色预警':'红色预警', + value:item.valueTwo, + color:item.level ===1?'#f1bf42':'red' + }) + } + }) + setYjData(linshi) + } + + useEffect(()=>{ + getYjData(data.stationCode) + getData([moment().add(-1,'months'),moment()],data.stationCode) + },[]) + + return ( + <> +
+
+
+ {data.stationCode} +
+ +
+
+ +
+ getData(tms,data.stationCode)} setTabVal={setTabVal}/> +
+
+ { + tabVal==='1'? + tableData.length>0? + + :
+ +
+ :null + } + { + tabVal==='2'?
:null + } +
+
+ + ) +} + +export default React.memo(ShenYa); diff --git a/src/views/Home/MapCtrl/Pops/index.js b/src/views/Home/MapCtrl/Pops/index.js index e1760b8..9034dcf 100644 --- a/src/views/Home/MapCtrl/Pops/index.js +++ b/src/views/Home/MapCtrl/Pops/index.js @@ -2,9 +2,9 @@ import React, { useCallback } from 'react' import { Button, Modal, Space } from 'antd'; import { useDispatch, useSelector } from 'react-redux' import DrpPop from './DrpPop'; -import ShuikuPop from './ShuikuPop'; +import ShuikuPop from './ShuiKuPop/index.js'; import GongShuiPop from './GongShui'; -import PciStPop from './PciStPop'; +import PciStPop from './PciStPop/index'; import WeiYi from './WeiYi/index.js'; import ShenYa from './ShenYa/index.js'; import ShenLiu from './ShenLiu/index.js'; @@ -55,14 +55,14 @@ function FeaturePops({ mapobj }) { ) }else if (type === 'hdsw') { return ( - dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> + dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> ) }else if (type === "gongshui" ) { // 供水 return ( - dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> + dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> ) @@ -76,21 +76,21 @@ function FeaturePops({ mapobj }) { }else if (type === 'weiyi'){ //位移 return ( - dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> + dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> ) }else if (type === 'shenya'){ //渗压 return ( - dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> + dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> ) }else if (type === 'shenliu'){ //渗流 return ( - dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> + dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> ) diff --git a/src/views/Home/MapCtrl/Pops/index.less b/src/views/Home/MapCtrl/Pops/index.less index 00da44d..0d4239e 100644 --- a/src/views/Home/MapCtrl/Pops/index.less +++ b/src/views/Home/MapCtrl/Pops/index.less @@ -119,6 +119,11 @@ border-radius: 10px; } } +.home_modal_transparent{ + .ant-modal-content{ + background: transparent; + } +} .normalModalStyle{ width: 100%; // min-height: 600px; diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js index a67cd58..efd7cd7 100644 --- a/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js @@ -76,7 +76,7 @@ const FlowPanel = ({ stcd, cleanMode = false }) => {
实时流量
- {!cleanMode && ( + {!cleanMode && !stcd && (
站点: