free-sun
/
GovernmentDataResourceCenter
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of https://gitea.anxinyun.cn/free-sun/GovernmentDataResourceCenter

master
peng.peng 1 year ago
parent
bd94f145e3 2b4e9edbc2
commit
c88d992e6d
13 changed files with 471 additions and 282 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      api/.vscode/launch.json
  2. 49
      api/app/lib/controllers/superScreen/fire.js
  3. 2
      api/app/lib/middlewares/authenticator.js
  4. 8
      api/app/lib/routes/superScreen/fire.js
  5. 7
      api/config.js
  6. 20
      super-screen/client/src/sections/fire-control/actions/fire.js
  7. 151
      super-screen/client/src/sections/fire-control/components/left-bottom.js
  8. 281
      super-screen/client/src/sections/fire-control/components/left-middle.js
  9. 56
      super-screen/client/src/sections/fire-control/components/left-top.js
  10. 128
      super-screen/client/src/sections/fire-control/components/style.less
  11. 26
      super-screen/client/src/sections/fire-control/containers/homePage.js
  12. 4
      super-screen/client/src/sections/water-prevention/components/left-bottom.js
  13. 2
      super-screen/client/src/utils/webapi.js

1
api/.vscode/launch.json
View File

@ -22,6 +22,7 @@
"-d postgres/example/10.8.30.160/30432",
"-w https://smartwater.anxinyun.cn",
"-a https://smartworksafety.anxinyun.cn",
"--tf http://91mogo.com/onecity/v5",
]
},
{

49
api/app/lib/controllers/superScreen/fire.js
View File

@ -1,4 +1,6 @@
'use strict';
const request = require("superagent");
const moment = require("moment");
function getFireAlarmList(opts) {
return async function (ctx, next) {
@ -56,8 +58,53 @@ function updateAlarm(opts) {
}
}
// 获取消防设备
function getFireDevice(opts) {
return async function (ctx, next) {
let rslt = {};
try {
let url = `${opts.tfApi}/device/alarm/statistic?_timeStamp=${new Date().getTime()}`;
const res = (await request.get(url).set("X-API-TOKEN", "9911510d-9dae-438d-9b6e-0545ef003c58")).body.data;
rslt = res.items;
ctx.status = 200;
ctx.body = rslt;
} catch (error) {
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
ctx.status = 400;
ctx.body = { message: '获取消防设备失败' }
}
}
}
// 获取火情趋势
function getFireTrend(opts) {
return async function (ctx, next) {
let rslt = [];
try {
let url = `${opts.tfApi}/alarms/trend?key=1`;
const res = (await request.get(url).set("X-API-TOKEN", "9911510d-9dae-438d-9b6e-0545ef003c58")).body.data;
let start = moment().add(-6, 'day').startOf('day').valueOf();
let end = moment().endOf('day').valueOf();
res.map(item => {
const time = moment(item.time).valueOf();
if (time >= start && time <= end) {
rslt.push({ time: item.time, count: item.val })
}
})
ctx.status = 200;
ctx.body = rslt;
} catch (error) {
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
ctx.status = 400;
ctx.body = { message: '获取火情趋势失败' }
}
}
}
module.exports = {
addAlarm,
updateAlarm,
getFireAlarmList
getFireAlarmList,
getFireDevice,
getFireTrend
}

2
api/app/lib/middlewares/authenticator.js
View File

@ -64,6 +64,8 @@ let isPathExcluded = function (opts, path, method) {
excludeOpts.push({ p: '/fire/alarm', o: 'GET' });
excludeOpts.push({ p: '/fire/alarm', o: 'POST' });
excludeOpts.push({ p: '/fire/alarm/:id', o: 'PUT' });
excludeOpts.push({ p: '/fire/device', o: 'GET' });
excludeOpts.push({ p: '/fire/trend', o: 'GET' });
excludes = new ExcludesUrls(excludeOpts);
}

8
api/app/lib/routes/superScreen/fire.js
View File

@ -15,4 +15,12 @@ module.exports = function (app, router, opts, AuthCode) {
//修改消防告警状态
app.fs.api.logAttr['PUT/fire/alarm/:id'] = { content: '修改消防告警状态', visible: true };
router.put('/fire/alarm/:id', fire.updateAlarm(opts));
//获取消防设备
app.fs.api.logAttr['GET/fire/device'] = { content: '获取消防设备', visible: true };
router.get('/fire/device', fire.getFireDevice(opts));
//获取火情趋势
app.fs.api.logAttr['GET/fire/trend'] = { content: '获取火情趋势', visible: true };
router.get('/fire/trend', fire.getFireTrend(opts));
};

7
api/config.js
View File

@ -15,6 +15,7 @@ args.option(['s', 'kubesphere'], 'kubesphere地址');
args.option(['d', 'dbconfig'], '后台同步数据库host示例:postgres/example/10.8.30.160/30432 格式：用户名/密码/host/port');
args.option(['w', 'water'], '水环境api地址');
args.option(['a', 'worksafety'], '安监api地址');
args.option('tf', '消防第三方接口 THIRD_FIRECONTROL');
const flags = args.parse(process.argv);
@ -33,7 +34,9 @@ const DATABASE_CONFIG = process.env.DATABASE_HOST || flags.dbconfig;//同步数
const WATER_URL = process.env.WATER_URL || flags.water;
const WORKSAFETY_URL = process.env.WORKSAFETY_URL || flags.worksafety;
if (!DB || !BACKUPS_URL || !KUBESPHERE_URL || !DATABASE_CONFIG || !WATER_URL || !WORKSAFETY_URL) {
const THIRD_FIRECONTROL = process.env.THIRD_FIRECONTROL || flags.tf;
if (!DB || !BACKUPS_URL || !KUBESPHERE_URL || !DATABASE_CONFIG || !WATER_URL || !WORKSAFETY_URL || !THIRD_FIRECONTROL) {
console.log('缺少启动参数，异常退出');
args.showHelp();
process.exit(-1);
@ -81,7 +84,7 @@ const product = {
backupsUrl: BACKUPS_URL,
k8s: KUBESPHERE_URL,
dbConfig: DATABASE_CONFIG,
tfApi: THIRD_FIRECONTROL,
}
}, {
entry: require('./app/lib/middlewares/proxy').entry,

20
super-screen/client/src/sections/fire-control/actions/fire.js
View File

@ -40,3 +40,23 @@ export function modifyFireAlarm(id, params) {
},
});
}
export function getFireDevice() {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_FIRE_DEVICE',
url: `${ApiTable.getFireDevice}`,
msg: { error: '获取消防设备失败' },
});
}
export function getFireTrend() {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_FIRE_TREND',
url: `${ApiTable.getFireTrend}`,
msg: { error: '获取火情趋势失败' },
});
}

151
super-screen/client/src/sections/fire-control/components/left-bottom.js
View File

@ -1,49 +1,118 @@
import React from 'react'
import { Box, AutoRollComponent } from '$components';
import { Box, NoData } from '$components';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment';
function Infrastructure(props) {
const { fireTrend } = props;
let Ydata = fireTrend.map(t => t.count);
let Xdata = fireTrend.map(t => moment(t.time).format('MM月DD日'));
const getContent = () => {
return <div className='today_real_alarm'>
<div className='today_item'>
<div className='column1_alarm1'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
<div className='today_item'>
<div className='column1_alarm2'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
<div className='today_item'>
<div className='column1_alarm1'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
<div className='today_item'>
<div className='column1_alarm2'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
<div className='today_item'>
<div className='column1_alarm2'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
<div className='today_item'>
<div className='column1_alarm2'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
<div className='today_item'>
<div className='column1_alarm2'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
</div>
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
backgroundColor: "rgba(255,255,255,0.75)",
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
textStyle: {
fontSize: 14,
color: "#000",
},
formatter: (params) => {
const item = params[0];
return item.name + " : " + item.value + " 次";
},
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLabel: {
interval: 0,
color: "rgba(195, 230, 255, 1)",
fontSize: 10,
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: "rgba(184, 185, 188, 0.5)",
width: 1,
},
},
data: Xdata,
},
],
yAxis: [
{
splitNumber: 5, // 刻度段数
type: "value",
nameTextStyle: {
color: "rgba(195, 230, 255, 1)",
fontWeight: 400,
fontSize: 14,
padding: [-20, 20, 0, 0]
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(89, 153, 200, 0.5)'
}
},
axisLabel: {
show: true,
fontSize: 12,
color: "rgba(195, 230, 255, 1)",
},
},
],
series: [
{
type: "line",
symbol: "none",
barWidth: 16,
label: {
show: false,
position: "top",
color: "#00A8FF",
},
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#4CA1FF40' // 0% 处的颜色
}, {
offset: 1, color: '#4CA1FF00' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: Ydata,
},
],
grid: {
x: 45,
y: 25,
x2: 40,
y2: 20
},
};
return <Box title={"火情趋势"} >
{
fireTrend.length ? <ReactEcharts
option={option}
notMerge
lazyUpdate
style={{ height: 231, width: 423 }}
/> : <NoData height={231} />
}
return <Box title={"今日实时警情"} >
<AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-bottom`} />
</Box>
}

281
super-screen/client/src/sections/fire-control/components/left-middle.js
View File

@ -1,141 +1,166 @@
import React from 'react'
import { Box } from '$components';
import ReactEcharts from 'echarts-for-react';
import { Box, AutoRollComponent, NoData } from '$components';
// import ReactEcharts from 'echarts-for-react';
import { Progress } from 'antd';
function PopulationDynamics() {
function PopulationDynamics(props) {
const { fireDevice } = props;
const total = fireDevice.reduce((p, n) => p + n.device_count, 0);
let Ydata = ['火灾扑救', '抢险救援', '公务执勤', '社会救助', '其他出动'];
let Xdata = [12, 19, 19, 13, 15]
const options = {
xAxis: {
type: 'value',
show: false,
},
grid: {
left: -10,
top: 20,
bottom: 0,
right: 20,
containLabel: true,
},
yAxis: [
{
type: 'category',
inverse: true,
axisLabel: {
show: true,
margin: 25,
// textStyle: {
color: '#ECF7FF',
fontSize: 12,
// },
// 调整左侧文字的3个属性，缺一不可
verticalAlign: 'center',
align: 'left',
//调整文字上右下左
padding: [0, 0, 0, -30],
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: Ydata
},
{
inverse: true,
// y轴最右侧的文字
axisTick: "none",
axisLine: "none",
type: "category",
axisLabel: {
// margin: 10,
// textStyle: {
color: "#24DCF7",
fontSize: "12",
// },
rich: {
// let Ydata = fireDevice.map(d => d.type_name);
// let Xdata = fireDevice.map(d => d.device_count);
// const options = {
// xAxis: {
// type: 'value',
// show: false,
// },
// grid: {
// left: -10,
// top: 20,
// bottom: 0,
// right: 20,
// containLabel: true,
// },
// yAxis: [
// {
// type: 'category',
// inverse: true,
// axisLabel: {
// show: true,
// margin: 25,
// // textStyle: {
// color: '#ECF7FF',
// fontSize: 12,
// // },
// // 调整左侧文字的3个属性，缺一不可
// verticalAlign: 'center',
// align: 'left',
// //调整文字上右下左
// padding: [0, 0, 0, -30],
// },
// splitLine: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// axisLine: {
// show: false,
// },
// data: Ydata
// },
// {
// inverse: true,
// // y轴最右侧的文字
// axisTick: "none",
// axisLine: "none",
// type: "category",
// axisLabel: {
// // margin: 10,
// // textStyle: {
// color: "#24DCF7",
// fontSize: "12",
// // },
// rich: {
a1: {
color: '#24DCF7',
width: 5,
height: 5,
fontSize: 16,
},
a2: {
color: '#5999C8',
width: 5,
height: 5,
fontSize: 12,
},
},
formatter: function (value) {
return [`{a1|${value}} {a2|次}`];
},
},
data: Xdata,
},
// a1: {
// color: '#24DCF7',
// width: 5,
// height: 5,
// fontSize: 16,
// },
// a2: {
// color: '#5999C8',
// width: 5,
// height: 5,
// fontSize: 12,
// },
// },
// formatter: function (value) {
// return [`{a1|${value}} {a2|个}`];
// },
// },
// data: Xdata,
// },
// ],
// series: [
// {
// type: 'bar',
// barWidth: 12,
// zlevel: 2,
// z: 2,
// showBackground: true,
// backgroundStyle: {
// color: '#2B375C'
// },
// color: '#005AC6',
// label: {
// show: false,
],
series: [
{
type: 'bar',
barWidth: 12,
zlevel: 2,
z: 2,
showBackground: true,
backgroundStyle: {
color: '#2B375C'
},
color: '#005AC6',
// },
// data: Xdata,
// },
// {
// type: "pictorialBar",
// // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
// symbolSize: [15, 15],
// symbolOffset: [0, 0],
// symbolPosition: "right",
// z: 20,
// zlevel: 20,
// itemStyle: {
// // normal: {
// color: "#fff"
// // }
// },
// data: (function () {
// var list = [];
// for (var i = 0; i < Xdata.length; i++) {
// list.push(2.02 * Xdata[i]);
// }
// console.log(list)
// return list;
// })()
// },
// ],
// };
label: {
show: false,
const getContent = () => {
return <div className='fire-device'>{
fireDevice.map(d => <div className='fire-device-item'>
<div className='_name'>{d.type_name}</div>
<div className='_progress'>
<Progress
percent={(d.device_count / total) * 100}
showInfo={false}
strokeWidth={12}
strokeColor='#005AC6'
trailColor='#2B375C'
strokeLinecap="butt"
/>
<div className='_round' style={{
position: 'absolute',
left: `calc(${(d.device_count / total) * 100}% - 6px)`,
}}></div>
</div>
<div className='_count'>{d.device_count}<span className='_unit'>个</span></div>
</div>)
}</div>
// <ReactEcharts
// option={options}
// notMerge
// lazyUpdate
// style={{ height: 250, width: 423 }}
// />
}
},
data: Xdata,
},
return <Box title={"接入消防设备"} >
{
type: "pictorialBar",
// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
symbolSize: [15, 15],
symbolOffset: [0, 0],
symbolPosition: "right",
z: 20,
zlevel: 20,
itemStyle: {
// normal: {
color: "#fff"
// }
},
data: (function () {
var list = [];
for (var i = 0; i < Xdata.length; i++) {
list.push(2.02 * Xdata[i]);
fireDevice.length
? <AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-middle`} />
: <NoData height={250} />
}
console.log(list)
return list;
})()
},
],
};
return <Box title={"接警类型占比"} subtitle={true} >
<ReactEcharts
option={options}
notMerge
lazyUpdate
style={{ height: 231, width: 423 }}
/>
</Box>
}

56
super-screen/client/src/sections/fire-control/components/left-top.js
View File

@ -1,38 +1,30 @@
import React from 'react'
import { Box } from '$components';
import { Box, AutoRollComponent, NoData } from '$components';
function BasicInfo() {
function BasicInfo(props) {
const { emergencyList } = props;
return <Box title={"警情数据分析"} subtitle={true} >
<div className='alarm_data_analysis'>
<div className='_item_left'>
<div className='_img' >65<span style={{ fontSize: 12 }}>%</span></div>
<div className='_text'>真警占比率</div>
</div>
<div className='_item_right'>
<div className='flex-row flex-item-center'>
<div className='_iconphone' />
<div className='right_item_right'>
<div className='alarm_title'>电话联系数量</div>
<div><span className='alarm_number'>479</span><span className='alarm_unit'>个</span></div>
</div>
</div>
<div className='flex-row flex-item-center'>
<div className='_iconreal' />
<div className='right_item_right'>
<div className='alarm_title'>真警数量</div>
<div><span className='alarm_number'>273</span><span className='alarm_unit'>个</span></div>
</div>
</div>
<div className='flex-row flex-item-center'>
<div className='_iconmistake' />
<div className='right_item_right'>
<div className='alarm_title'>误报数量</div>
<div><span className='alarm_number'>276</span><span className='alarm_unit'>个</span></div>
</div>
</div>
</div>
</div>
const getContent = () => {
return <div className='xfjy_data'>
{emergencyList.xfjy?.map(item => <div className='xfjy_item'>
<div className='_text'>
<div className='_row1'>
<span>救援队伍</span>
<span>负责人及电话</span>
</div>
<div className='_row2'>
<span>{item.teamName}</span>
<span>{item.leaderContactPhone}</span>
</div>
</div>
</div>)}
</div>
}
return <Box title={"消防救援队伍"}>
{emergencyList?.xfjy?.length
? <AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-top`} />
: <NoData height={250} />
}
</Box>
}

128
super-screen/client/src/sections/fire-control/components/style.less
View File

@ -246,94 +246,94 @@
}
//警情数据分析
.alarm_data_analysis {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
._item_left {
width: 209px;
height: 100%;
//消防救援队伍
.xfjy_data {
padding-left: 28px;
padding-right: 28px;
._img {
width: 209px;
height: 209px;
background: url('/assets/images/homepage/fire/realalarmbg.png') no-repeat;
background-size: 100% 100%;
.xfjy_item {
display: flex;
background: url('/assets/images/homepage/fire/realtimebg.png') no-repeat;
background-size: 100% 100%;
height: 110px;
width: 100%;
margin-bottom: 5%;
align-items: center;
justify-content: center;
font-family: D-DINExp-Italic;
font-weight: Italic;
font-size: 48px;
color: #FFFFFF;
letter-spacing: 0;
}
._text {
font-family: YouSheBiaoTiHei;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 0;
margin-top: -30px;
text-align: center;
}
}
._item_right {
width: 200px;
width: calc(100% - 40px);
display: flex;
flex-direction: column;
._iconphone {
width: 50.96px;
height: 45px;
background: url('/assets/images/homepage/fire/iconphone.png') no-repeat;
background-size: 100% 100%;
._row1 {
color: #C3E6FF;
width: 100%;
height: 22px;
background: rgba(0, 88, 204, 0.5);
justify-content: space-around;
display: flex;
}
._iconreal {
width: 50.96px;
height: 45px;
background: url('/assets/images/homepage/fire/iconreal.png') no-repeat;
background-size: 100% 100%;
._row2 {
justify-content: space-around;
display: flex;
height: 42px;
font-family: SourceHanSansSC-Regular;
font-weight: 400;
font-size: 16px;
color: #ECF7FF;
letter-spacing: 0.67px;
padding-top: 4px;
}
}
._iconmistake {
width: 50.96px;
height: 45px;
background: url('/assets/images/homepage/fire/iconmistake.png') no-repeat;
background-size: 100% 100%;
}
}
.right_item_right {
width: 155px;
margin-left: 16px;
// 接入消防设备
.fire-device-item {
display: flex;
height: 30px;
align-items: center;
justify-content: space-around;
.alarm_title {
._name {
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: SourceHanSansSC-Regular;
font-weight: 400;
font-size: 14px;
color: #ECF7FF;
letter-spacing: 0;
text-align: right;
}
.alarm_number {
._progress {
position: relative;
width: 200px;
._round {
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 6px;
top: 7px;
}
}
._count {
width: 75px;
font-family: D-DINExp-Italic;
font-weight: Italic;
font-size: 28px;
font-size: 18px;
color: #24DCF7;
letter-spacing: 0;
margin-right: 50px;
}
.alarm_unit {
._unit {
font-size: 14px;
color: #5999C8;
letter-spacing: 0;
}
}
}
}

26
super-screen/client/src/sections/fire-control/containers/homePage.js
View File

@ -23,6 +23,8 @@ function homePage(props) {
const [tab, setTab] = useState('overview')
const [emengencyTab, setEmengencyTab] = useState('xfyjwz');
const [alarmInfo, setAlarmInfo] = useState({})
const [fireDevice, setFireDevice] = useState([])
const [fireTrend, setFireTrend] = useState([])
const { data: emergencyList = {} } = useFsRequest({ url: 'water/emergency' });
const endEvent = () => {
@ -33,6 +35,24 @@ function homePage(props) {
})
}
useEffect(() => {
getFireData();
}, [])
const getFireData = () => {
dispatch(actions.firecontrol?.getFireDevice()).then(res => {
if (res?.payload?.data?.length) {
const filterData = res.payload.data.filter(d => d.device_count)
setFireDevice(filterData)
}
})
dispatch(actions.firecontrol?.getFireTrend()).then(res => {
if (res?.payload?.data) {
setFireTrend(res.payload.data)
}
})
}
return <>
<FullScreenContainer>
<div className='homepage'>
@ -50,13 +70,13 @@ function homePage(props) {
{tab == 'overview' ?
<>
<div className='child' style={childStyle}>
<LeftTop />
<LeftTop emergencyList={emergencyList} />
</div>
<div className='child' style={childStyle}>
<LeftMiddle />
<LeftMiddle fireDevice={fireDevice} />
</div>
<div className='child' style={childStyle}>
<LeftBottom cardContentHeight={cardContentHeight} />
<LeftBottom cardContentHeight={cardContentHeight} fireTrend={fireTrend} />
</div>
</>
:

4
super-screen/client/src/sections/water-prevention/components/left-bottom.js
View File

@ -33,9 +33,9 @@ function LeftBottom(props) {
];
const data = [
{ name: '泵站站点', value: 12 },
{ name: '泵站站点', value: SHUI_ZHAN.length },
{ name: '雨量站点', value: 1 },
{ name: '水位站点', value: 23 }
{ name: '水位站点', value: waterLevelLength }
]
return <Box title={"建设数据"} >

2
super-screen/client/src/utils/webapi.js
View File

@ -134,6 +134,8 @@ export const ApiTable = {
//消防
getFireAlarmList: 'fire/alarm',
modifyFireAlarm: 'fire/alarm/{id}',
getFireDevice: 'fire/device',
getFireTrend: 'fire/trend',
};
export const RouteTable = {

Write Preview
Loading…
Cancel
Save