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

(*) 消防-设备统计、火情趋势

master
liujiangyong 1 year ago
parent
7778d2689f
commit
4815c20e84
11 changed files with 417 additions and 177 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. 149
      super-screen/client/src/sections/fire-control/components/left-bottom.js
  8. 285
      super-screen/client/src/sections/fire-control/components/left-middle.js
  9. 47
      super-screen/client/src/sections/fire-control/components/style.less
  10. 24
      super-screen/client/src/sections/fire-control/containers/homePage.js
  11. 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: '获取火情趋势失败' },
});
}

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

@ -1,49 +1,114 @@
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>
}
return <Box title={"今日实时警情"} >
<AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-bottom`} />
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 + " 次";
},
},
legend: {
top: 10,
itemWidth: 20,
itemHeight: 10,
left: "center",
padding: 0,
textStyle: {
color: "#E6E6E7",
fontSize: 14,
padding: [2, 0, 0, 0],
},
},
xAxis: [
{
type: "category",
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",
},
data: Ydata,
},
],
grid: {
x: 50,
y: 25,
x2: 30,
y2: 20
},
};
return <Box title={"火情趋势"} >
{
fireTrend.length ? <ReactEcharts
option={option}
notMerge
lazyUpdate
style={{ height: 231, width: 423 }}
/> : <NoData height={231} />
}
</Box>
}

285
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],
// 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,
// },
// ],
// series: [
// {
// type: 'bar',
// barWidth: 12,
// zlevel: 2,
// z: 2,
// showBackground: true,
// backgroundStyle: {
// color: '#2B375C'
// },
// color: '#005AC6',
},
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: {
// label: {
// show: false,
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,
},
// },
// 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;
// })()
// },
// ],
// };
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 }}
// />
}
],
series: [
{
type: 'bar',
barWidth: 12,
zlevel: 2,
z: 2,
showBackground: true,
backgroundStyle: {
color: '#2B375C'
},
color: '#005AC6',
label: {
show: false,
},
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;
})()
},
],
};
return <Box title={"接警类型占比"} subtitle={true} >
<ReactEcharts
option={options}
notMerge
lazyUpdate
style={{ height: 231, width: 423 }}
/>
return <Box title={"接入消防设备"} >
{
fireDevice.length
? <AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-middle`} />
: <NoData height={250} />
}
</Box>
}

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

@ -290,6 +290,53 @@
}
}
// 接入消防设备
.fire-device-item {
display: flex;
height: 30px;
align-items: center;
justify-content: space-around;
._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;
}
._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: 18px;
color: #24DCF7;
._unit {
font-size: 14px;
}
}
}
//实时数据
.realtime_data {
// height: 100%;

24
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'>
@ -53,10 +73,10 @@ function homePage(props) {
<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>
</>
:

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