Browse Source

优化修改

master
wenlele 1 year ago
parent
commit
d7179e946b
  1. BIN
      web/client/assets/font_sc/SourceHanSansCN-Bold.otf
  2. BIN
      web/client/assets/font_sc/SourceHanSansCN-ExtraLight.otf
  3. BIN
      web/client/assets/font_sc/SourceHanSansCN-Heavy.otf
  4. BIN
      web/client/assets/font_sc/SourceHanSansCN-Normal.otf
  5. 6
      web/client/index.ejs
  6. 16
      web/client/index.html
  7. 163
      web/client/src/sections/bigScreen/components/basis.js
  8. 2
      web/client/src/sections/bigScreen/components/basis.less
  9. 2
      web/client/src/sections/bigScreen/components/basis/left_1.js
  10. 4
      web/client/src/sections/bigScreen/components/basis/right_2.js
  11. 14
      web/client/src/sections/bigScreen/components/capacity.js
  12. 2
      web/client/src/sections/bigScreen/components/electrical.js
  13. 2
      web/client/src/sections/bigScreen/components/electrity/levelTrend.js
  14. 4
      web/client/src/sections/bigScreen/components/realTime/below.js
  15. 5
      web/client/src/sections/bigScreen/containers/systemManagement.js

BIN
web/client/assets/font_sc/SourceHanSansCN-Bold.otf

Binary file not shown.

BIN
web/client/assets/font_sc/SourceHanSansCN-ExtraLight.otf

Binary file not shown.

BIN
web/client/assets/font_sc/SourceHanSansCN-Heavy.otf

Binary file not shown.

BIN
web/client/assets/font_sc/SourceHanSansCN-Normal.otf

Binary file not shown.

6
web/client/index.ejs

@ -7,11 +7,11 @@
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
securityJsCode: '9e45b86a05ebb2f85d6d229973bc5ba6',
}
</script>
<script
src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch"></script>
<script
src="https://webapi.amap.com/maps?v=2.0&key=e20863d113b69b83f553ea14dfec668f&plugin=AMap.AutoComplete,AMap.PlaceSearch,aMap.DistrictSearch"></script>
<!-- <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script> -->
</head>

16
web/client/index.html

@ -46,6 +46,22 @@
font-family: D-DIN-Bold;
src: url("/assets/font_sc/D-DIN-Bold.ttf");
}
@font-face {
font-family: SourceHanSansCN-ExtraLight;
src: url("/assets/font_sc/SourceHanSansCN-ExtraLight.oty");
}
@font-face {
font-family:SourceHanSansCN-Bold;
src: url("/assets/font_sc/SourceHanSansCN-Bold.otf");
}
@font-face {
font-family: SourceHanSansCN-Heavy;
src: url("/assets/font_sc/SourceHanSansCN-Heavy.otf");
}
@font-face {
font-family: SourceHanSansCN-Normal;
src: url("/assets/font_sc/SourceHanSansCN-Normal.otf");
}
</style>
<body>

163
web/client/src/sections/bigScreen/components/basis.js

@ -11,15 +11,14 @@ import Right_2 from './basis/right_2';
import { POWER_STATIONS } from './shuizhan_detail';
import './basis.less'
const Basis = ({ actions, dispatch, setshowData }) => {
const Basis = ({ actions, dispatch, setshowData, siteList, siteData }) => {
const { bigScreen } = actions
const [siteList, setSiteList] = useState([]) //站点列表
// const [siteList, setSiteList] = useState([]) //站点列表
const [strucId, setStrucId] = useState() //站点ID
const [pageRefresh1, setPageRefresh1] = useState(false)
const [pageRefresh2, setPageRefresh2] = useState(0)
const [pageRefresh3, setPageRefresh3] = useState(0)
const [left2List, setleft2List] = useState([])
const [depthWater, setDepthWater] = useState([])
const [information, setInformation] = useState({})
@ -28,92 +27,93 @@ const Basis = ({ actions, dispatch, setshowData }) => {
const pumpNumber = useRef(0)
useEffect(async () => {
await dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(async res => {
if (res.success) {
setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name })) || [])
setshowData(res.payload.data?.map(v => ({ name: v.name, lat: v.latitude, lng: v.longitude })) || [])
setStrucId(res.payload.data[0]?.id)
for (let key in POWER_STATIONS) {
if (POWER_STATIONS[key]?.name == res.payload.data[0]?.name) {
setInformation(POWER_STATIONS[key])
}
if (siteData) {
setStrucId(siteData[0]?.id)
for (let key in POWER_STATIONS) {
if (POWER_STATIONS[key]?.name == siteData[0]?.name) {
setInformation(POWER_STATIONS[key])
}
//获取所有泵站的集水池液位
res.payload.data?.map(async v => {
await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${v.id}/factors` })).then(async r => {
//泵站信息
let informationId = r.payload.data?.find(v => v.name == '泵站信息')?.id
if (informationId) {
await dispatch(bigScreen.axyData({
type: 'get', url: `structures/${v.id}/stations`,
params: { query: { factorId: informationId } }
})).then(async p => {
if (p.success) {
}
//获取所有泵站的集水池液位
siteData?.map(async v => {
await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${v.id}/factors` })).then(async r => {
//泵站信息
let informationId = r.payload.data?.find(v => v.name == '泵站信息')?.id
if (informationId) {
await dispatch(bigScreen.axyData({
type: 'get', url: `structures/${v.id}/stations`,
params: { query: { factorId: informationId } }
})).then(async p => {
if (p.success) {
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
}
}
})).then(async d => {
if (d.success) {
left1Data.current?.push({ name: v.name, level: d.payload.data?.stations[0]?.data[0]?.sLiquid_level || 0 })
setPageRefresh1(moment().format('x'))
}
})
}
})
}
//水泵信息
let waterId = r.payload.data?.find(v => v.name == '泵站水泵')?.id
if (waterId) {
await dispatch(bigScreen.axyData({
type: 'get', url: `structures/${v.id}/stations`,
params: { query: { factorId: waterId } }
})).then(async p => {
if (p.success) {
pumpNumber.current += p.payload.data[0]?.groups[0]?.stations.length || 0
setPageRefresh3(!pageRefresh3)
let dataId = []
p.payload.data?.map(v => {
v.groups?.map(s => {
s.stations?.map(f => {
dataId.push(f.id)
})
})
})
if (dataId.length) {
// 当前时间
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
stations: dataId.join(),
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
}
}
})).then(async d => {
})).then(d => {
if (d.success) {
left1Data.current?.push({ name: v.name, level: d.payload.data?.stations[0]?.data[0]?.sLiquid_level || 0 })
setPageRefresh1(moment().format('x'))
left2Data.current?.push({ name: v.name, data: d.payload.data?.stations })
setPageRefresh2(moment().format('x'))
}
})
}
})
}
//水泵信息
let waterId = r.payload.data?.find(v => v.name == '泵站水泵')?.id
if (waterId) {
await dispatch(bigScreen.axyData({
type: 'get', url: `structures/${v.id}/stations`,
params: { query: { factorId: waterId } }
})).then(async p => {
if (p.success) {
pumpNumber.current += p.payload.data[0]?.groups[0]?.stations.length || 0
setPageRefresh3(!pageRefresh3)
let dataId = []
p.payload.data?.map(v => {
v.groups?.map(s => {
s.stations?.map(f => {
dataId.push(f.id)
})
})
})
if (dataId.length) {
// 当前时间
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: dataId.join(),
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
}
}
})).then(d => {
if (d.success) {
left2Data.current?.push({ name: v.name, data: d.payload.data?.stations })
setPageRefresh2(moment().format('x'))
}
})
}
}
})
}
})
}
})
}
})
}
})
})
}
}, [])
}, [siteData])
useEffect(() => {
setStrucId(siteList[0]?.value)
}, [siteList])
useEffect(async () => {
if (strucId) {
@ -161,10 +161,10 @@ const Basis = ({ actions, dispatch, setshowData }) => {
<div style={{
width: '100%', height: 40,
backgroundImage: 'url(/assets/images/monitor/end.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
display: 'flex', alignItems: 'flex-end',
display: 'flex', alignItems: 'flex-end', lineHeight: "40px"
}}>
<div style={{ width: 80 }}>地点</div>
<div>编号</div>
<div style={{ width: 80, fontFamily: "SourceHanSansCN-Normal", fontStyle: 'italic', textAlign: "center" }}>地点</div>
<div style={{ fontFamily: "SourceHanSansCN-Normal", fontStyle: 'italic', width: "calc(100% - 80px)", textAlign: "center" }}>编号</div>
</div>
<SimpleBar
style={{
@ -178,20 +178,15 @@ const Basis = ({ actions, dispatch, setshowData }) => {
display: 'flex', alignItems: 'center', marginTop: 6, width: '100%', height: 36,
backgroundImage: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)'
}}>
<div style={{ width: 76, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{v.name}</div>
<div title={v.name} style={{ width: 76, margin: '0 12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', fontFamily: "SourceHanSansCN-Normal", fontStyle: 'italic' }}>{v.name}</div>
<div >
{v.data?.map((s, i) => <img style={{ width: 20, height: 20, marginLeft: 3 }} src={`/assets/images/number/${[2, 4, 6].includes(s.data[0]?.sMotor_State) ? 'problem' : 'good'}${i + 1}.png`} />)
}
</div>
</div>)}
</SimpleBar>
</div>
</div>
@ -207,7 +202,7 @@ const Basis = ({ actions, dispatch, setshowData }) => {
backgroundImage: 'url(/assets/images/monitor/lower-left.png)',
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
}}>
<img style={{ width: 40, height: 40, position: 'absolute', left: 12, top: -18, }} src='/assets/images/monitor/pumpPO.png' />
<img style={{ width: 40, height: 40, position: 'absolute', left: 12, top: -18, }} src='/assets/images/monitor/pumpPo.png' />
泵站数量{siteList?.length || 0}
</div>
<div style={{

2
web/client/src/sections/bigScreen/components/basis.less

@ -12,7 +12,7 @@
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-evenly;
// justify-content: space-evenly;
.card-item {
.card-content {

2
web/client/src/sections/bigScreen/components/basis/left_1.js

@ -15,7 +15,7 @@ export default function Left_1 (props) {
<div className='liquid-level'>
<img className='img' src='/assets/images/monitor/liquid-level.png' />
<div className='info'>
<div className='name'>{d.name}</div>
<div className='name' style={{fontFamily: "SourceHanSansCN-Normal", fontStyle: 'italic'}}>{d.name}</div>
<div className='level'><span className='num'>{d.level?.toFixed(2) || 0}</span> m</div>
</div>
</div>

4
web/client/src/sections/bigScreen/components/basis/right_2.js

@ -80,9 +80,7 @@ export default function Right_2 ({ depthWater }) {
notMerge={true}
lazyUpdate={true}
theme={'ReactEChart'}
// onChartReady={this.onChartReadyCallback}
// onEvents={EventsDict}
// opts={}
style={{ width: "100%", height: "calc(100% - 30px)" }}
/>

14
web/client/src/sections/bigScreen/components/capacity.js

@ -429,9 +429,9 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
}}>
<div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF' }}>{v.name}</div>
<div style={{
width: 50, height: 26, background: [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00434180' : '#a7110033', border: `1px solid ${[2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00434180' : '#A71100'}`, cursor: "pointer",
borderRadius: 4, color: [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
}}>{[1, 3, 5].includes(v.data[0]?.sMotor_RunMode) ? '停止' : [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '运行' : v.data[0]?.sMotor_RunMode == 7 ? '故障' : '无状态'}</div>
width: 50, height: 26, background: [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00434180' : '#a7110033', border: `1px solid ${[2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00434180' : '#A71100'}`, cursor: "pointer",
borderRadius: 4, color: [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
}}>{[1, 3, 5].includes(v.data[0]?.sMotor_State) ? '停止' : [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '运行' : v.data[0]?.sMotor_State == 7 ? '故障' : '无状态'}</div>
</div>
<div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}>
<Carousel style={{ width: '100%', height: 66 }} autoplay>
@ -568,7 +568,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
position: 'absolute', top: '35%', left: -60,
}}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
今年用电</div>{centreData?.day365?.toFixed(2) || '--'}
今年用电</div>{centreData?.day365?.toFixed(2) || '--'} kWh
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/oblique.png)',
@ -577,7 +577,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
position: 'absolute', top: '54%', left: 0,
}}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
当月用电</div>{centreData?.day30?.toFixed(2) || '--'}
当月用电</div>{centreData?.day30?.toFixed(2) || '--'} kWh
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/oblique.png)',
@ -586,7 +586,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
position: 'absolute', top: '67%', left: 'calc(50% - 80px)',
}}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
当日用电</div>{centreData?.day1?.toFixed(2) || '--'}
当日用电</div>{centreData?.day1?.toFixed(2) || '--'} kWh
</div>
<div style={{
@ -756,7 +756,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
</div>
</div>
</div >
<div style={{ width: '100%', height: 'calc(34% )', display: 'flex', justifyContent: 'space-between' }}>
<div style={{ width: '100%', height: 'calc(31% )', display: 'flex', justifyContent: 'space-between' }}>
<div style={{
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
backgroundSize: '100% 36px',

2
web/client/src/sections/bigScreen/components/electrical.js

@ -226,7 +226,7 @@ const Electrical = ({ dispatch, actions, siteList}) => {
fontSize: 20, width: 160, height: 160, textAlign: 'center',
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
环境湿</div>{depthWater[0]?.sTEMP || "--"}
环境</div>{depthWater[0]?.sTEMP || "--"}
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',

2
web/client/src/sections/bigScreen/components/electrity/levelTrend.js

@ -17,7 +17,7 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate
backgroundSize: '100% 36px',
backgroundPosition: '0 0',
backgroundRepeat: 'no-repeat', zIndex: 2,
width: '26%', height: '60%', minWidth: 360, position: "absolute", left: 10, top: "44%"
width: '26%', height: '56%', minWidth: 360, position: "absolute", left: 10, top: "44%"
}}>
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>液位趋势</div>

4
web/client/src/sections/bigScreen/components/realTime/below.js

@ -195,7 +195,7 @@ const Below = ({ dispatch, actions, stations, level }) => {
backgroundSize: '100% 36px',
backgroundPosition: '0 0',
backgroundRepeat: 'no-repeat',
width: '33%', height: '100%',
width: '33%', height: '93%',
}}>
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>三相电流</div>
@ -369,7 +369,7 @@ const Below = ({ dispatch, actions, stations, level }) => {
backgroundSize: '100% 36px',
backgroundPosition: '0 0',
backgroundRepeat: 'no-repeat',
width: '33%', height: '100%',
width: '33%', height: '93%',
}}>
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>用电趋势</div>

5
web/client/src/sections/bigScreen/containers/systemManagement.js

@ -19,12 +19,15 @@ const SystemManagement = ({ dispatch, actions, user, history }) => {
const [module, setModule] = useState('basis')
const [showData, setshowData] = useState([])
const [siteList, setSiteList] = useState([]) //站点列表
const [siteData, setSitData] = useState() //站点列表
useEffect(() => {
dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(res => {
if (res.success) {
setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name,iotaThingId: v.iotaThingId })) || [])
setshowData(res.payload.data?.map(v => ({ name: v.name, lat: v.latitude, lng: v.longitude })) || [])
setSitData(res.payload.data)
}
})
}, [])
@ -43,7 +46,7 @@ const SystemManagement = ({ dispatch, actions, user, history }) => {
</div>
{module == 'basis' ? <>
<div className='map' ><Amap showData={showData} /></div>
<Basis setshowData={setshowData} />
<Basis setshowData={setshowData} siteList={siteList} siteData={siteData} />
</> : ""}
{module == 'capacity' ? <Capacity siteList={siteList} /> : ""}
{module == 'electrical' ? <Electrical siteList={siteList} /> : ""}

Loading…
Cancel
Save