冲突解决

api/.vscode/launch.json

@@ -24,6 +24,9 @@
                 "-a https://smartworksafety.anxinyun.cn",
                 "--yingshiKey 5d16a667e1c2423d9d0d634f781810b4",
                 "--yingshiSecret 0cc4e1ec4e6a53ea3dabeb09cd5f468b", 
+                "--tf http://91mogo.com/onecity/v5",
+                "--axyApi https://openapi.anxinyun.cn/api/v1",
+                "--axyPumpProject 1a271f12-52f2-4d16-8dad-ec0c92d3e0cc/03bzzdh/123456", // 泵站
             ]
         },
         {

api/app/lib/controllers/superScreen/fire.js

@@ -1,6 +1,10 @@
 'use strict';
+
 const request = require('superagent');
 
+const moment = require("moment");
+
+
 function getFireAlarmList (opts) {
    return async function (ctx, next) {
       const models = ctx.fs.dc.models;
@@ -181,10 +185,58 @@ function getDetails (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,
+   getFireDevice,
+   getFireTrend,
    videoList,
    getDetails
 }

api/app/lib/controllers/superScreen/pump.js

@@ -0,0 +1,55 @@
+'use strict';
+const moment = require('moment');
+
+let axyTokenCache = {
+    token: null,
+    orgId: null,
+    expireTime: null // 过期时间
+}
+
+const getAnxinyunToken = async function (ctx, opts) {
+    try {
+        if (!axyTokenCache.token || moment() > moment(axyTokenCache.expireTime)) {
+            if (opts.axyPumpProject.split('/').length === 3) {
+                const dataToAxy = {
+                    p: opts.axyPumpProject.split('/')[0],
+                    username: opts.axyPumpProject.split('/')[1],
+                    password: opts.axyPumpProject.split('/')[2],
+                };
+                const axyResponse = await ctx.app.fs.anxinyun.post('project/login', { data: dataToAxy });
+                if (axyResponse.authorized) {
+                    axyTokenCache.token = axyResponse.token;
+                    axyTokenCache.orgId = axyResponse.orgId;
+                    axyTokenCache.expireTime = moment().add(20, 'hour').format('YYYY-MM-DD HH:mm:ss');
+                }
+            }
+        }
+        return axyTokenCache;
+    } catch (error) {
+        ctx.fs.logger.error(`sechedule: laborAttendance, error: ${error}`);
+    }
+}
+
+function getPumpStatus(opts) {
+    return async function (ctx, next) {
+        try {
+            const { structId } = ctx.params;
+            let authData = await getAnxinyunToken(ctx, opts);
+            const factors = await ctx.app.fs.anxinyun.get(`structures/${structId}/factors?token=${authData.token}`);
+            const pumpFactorId = factors.find(f => f.name === '泵站水泵').id;
+            const stationsRes = await ctx.app.fs.anxinyun.get(`structures/${structId}/stations?factorId=${pumpFactorId}&token=${authData.token}`);
+            const stations = stationsRes[0].groups[0].stations.map(s => s.id).join();
+            const statusList = await ctx.app.fs.anxinyun.get(`stations/theme/data?stations=${stations}&startTime=${moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')}&endTime=${moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')}&limit=1&token=${authData.token}`);
+            ctx.status = 200;
+            ctx.body = statusList;
+        } catch (err) {
+            ctx.fs.logger.error(`path: ${ctx.path}, error: ${err}`);
+            ctx.status = 400;
+            ctx.body = { name: 'FindError', message: '获取安心云数据失败' };
+        }
+    }
+}
+
+module.exports = {
+    getPumpStatus,
+}

api/app/lib/middlewares/authenticator.js

@@ -66,6 +66,9 @@ 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' });
+        excludeOpts.push({ p: '/pumpStatus/:structId', o: 'GET' });
         
         excludes = new ExcludesUrls(excludeOpts);
     }

api/app/lib/routes/superScreen/fire.js

@@ -21,4 +21,13 @@ module.exports = function (app, router, opts, AuthCode) {
 
     app.fs.api.logAttr['GET/trafficindex/city/detailst'] = { content: '获取南昌市道路数据', visible: true };
     router.get('/trafficindex/city/details', fire.getDetails(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));
+
 };

api/app/lib/routes/superScreen/pump.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const pump = require('../../controllers/superScreen/pump');
+
+module.exports = function (app, router, opts, AuthCode) {
+    // 获取水泵状态
+    app.fs.api.logAttr['GET/pumpStatus/:structId'] = { content: '获取水泵状态', visible: true };
+    router.get('/pumpStatus/:structId', pump.getPumpStatus(opts));
+};

api/config.js

@@ -1,4 +1,4 @@
-'use strict';
+'use strict';
 /*jslint node:true*/
 const path = require('path');
 const os = require('os');
@@ -15,6 +15,9 @@ 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');
+args.option('axyApi', "安心云api");
+args.option('axyPumpProject', '安心云泵站项目信息');
 
 args.option('yingshiKey', '萤石 KEY')
 args.option('yingshiSecret', '萤石 SECRET')
@@ -32,16 +35,18 @@ const QINIU_SK = process.env.ANXINCLOUD_QINIU_SECRETKEY || flags.qnsk;
 const BACKUPS_URL = process.env.BACKUPS_URL || flags.backups;
 const KUBESPHERE_URL = process.env.KUBESPHERE_URL || flags.kubesphere;
 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;
+const THIRD_FIRECONTROL = process.env.THIRD_FIRECONTROL || flags.tf;
+const AXY_API_URL = process.env.AXY_API_URL || flags.axyApi;
+const AXY_PUMP_PROJECT = process.env.AXY_PUMP_PROJECT || flags.axyPumpProject;
 
 const YINGSHI_KEY = process.env.YINGSHI_KEY || flags.yingshiKey;
 const YINGSHI_SECRET = process.env.YINGSHI_SECRET || flags.yingshiSecret;
 // 萤石服务的地址
 const YINGSHI_URL = process.env.YINGSHI_URL || flags.yingshiUrl || 'https://open.ys7.com/api';
 
-if (!DB || !BACKUPS_URL || !KUBESPHERE_URL || !DATABASE_CONFIG || !WATER_URL || !WORKSAFETY_URL) {
+if (!DB || !BACKUPS_URL || !KUBESPHERE_URL || !DATABASE_CONFIG || !WATER_URL || !WORKSAFETY_URL || !THIRD_FIRECONTROL || !AXY_API_URL || !AXY_PUMP_PROJECT) {
    console.log('缺少启动参数，异常退出');
    args.showHelp();
    process.exit(-1);
@@ -71,7 +76,6 @@ const product = {
             exclude: [
                //    "*"
             ], // 不做认证的路由，也可以使用 exclude: ["*"]  跳过所有路由
-
             sms: {
                ///阿里云-安心云
                accessKey: 'LTAI5tAFdjz7j38aNF2C9Qe8',
@@ -87,17 +91,20 @@ const product = {
                   password: 'Fs2689'
                }
             },
-            pssaRequest: [
+            pssaRequest: [{
-               {
                name: 'yingshiRequest',
                root: YINGSHI_URL,
                params: {}
-               },
+            },],
-            ],
             backupsUrl: BACKUPS_URL,
             k8s: KUBESPHERE_URL,
             dbConfig: DATABASE_CONFIG,
-
+            tfApi: THIRD_FIRECONTROL,
+            axyPumpProject: AXY_PUMP_PROJECT,
+            pssaRequest: [{// name 会作为一个 request 出现在 ctx.app.fs
+               name: 'anxinyun',
+               root: AXY_API_URL
+            }],
          }
       }, {
          entry: require('./app/lib/middlewares/proxy').entry,

super-screen/client/src/sections/community-safty/components/basic-info.js

@@ -1,8 +1,11 @@
 import React from 'react'
 import { Box } from '$components';
 
+
 function BasicInfo() {
 
+
+
     return <Box title={"基本信息"} >
         <div className='_basic_info'>
             <div className='_basic_row1'>

super-screen/client/src/sections/community-safty/components/charts/bar.js

@@ -0,0 +1,235 @@
+
+
+import React from 'react'
+import { Box } from '$components';
+import ReactEcharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import './style.less';
+
+function ThreeDBarChart() {
+    const offsetX = 12;  //bar宽
+    const offsetY = 6;   //倾斜角度
+    // 绘制左侧面
+    const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+            x: 0,
+            y: 0,
+        },
+        buildPath: function (ctx, shape) {
+            // 会canvas的应该都能看得懂，shape是从custom传入的
+            const xAxisPoint = shape.xAxisPoint;
+            // console.log(shape);
+            const c0 = [shape.x, shape.y];
+            const c1 = [shape.x - offsetX, shape.y - offsetY];
+            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+            const c3 = [xAxisPoint[0], xAxisPoint[1]];
+            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
+        },
+    });
+    // 绘制右侧面
+    const CubeRight = echarts.graphic.extendShape({
+        shape: {
+            x: 0,
+            y: 0,
+        },
+        buildPath: function (ctx, shape) {
+            const xAxisPoint = shape.xAxisPoint;
+            const c1 = [shape.x, shape.y];
+            const c2 = [xAxisPoint[0], xAxisPoint[1]];
+            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+            const c4 = [shape.x + offsetX, shape.y - offsetY];
+            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+        },
+    });
+    // 绘制顶面
+    const CubeTop = echarts.graphic.extendShape({
+        shape: {
+            x: 0,
+            y: 0,
+        },
+        buildPath: function (ctx, shape) {
+            const c1 = [shape.x, shape.y];
+            const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+            // const c3 = [shape.x, shape.y - offsetX];
+            const c3 = [shape.x, shape.y - offsetY * 2];
+            const c4 = [shape.x - offsetX, shape.y - offsetY];
+            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+        },
+    });
+    // 注册三个面图形
+    echarts.graphic.registerShape('CubeLeft', CubeLeft);
+    echarts.graphic.registerShape('CubeRight', CubeRight);
+    echarts.graphic.registerShape('CubeTop', CubeTop);
+    let xAxisData = ["1人", "2人", "3人", "4人", "5人及以上"]
+    let seriesData = [100, 200, 300, 400, 300]
+    let colorArr = [["#42D5F8"], ["#2086B0", "rgba(13,8,16,0)"], ["#3394D7", "rgba(14,185,151,0)"]]
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+            // formatter: function (params, ticket, callback) {
+            //     const item = params[1];
+            //     return item.name + ' : ' + item.value;
+            // },
+        },
+        grid: {
+            left: '5%',
+            right: '5%',
+            top: '20%',
+            bottom: '3%',
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            data: xAxisData,
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    width: 2,
+                    color: '#E6EFFF',
+                },
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                fontSize: 13,
+                interval: 0,
+                color: "#E6EFFF",
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name: "单位:户",
+            // nameGap: 30,
+            nameTextStyle: {
+                color: "rgba(195, 230, 255, 1)",
+                fontWeight: 400,
+                fontSize: 14,
+                padding: [-20, 20, 0, 0]
+            },
+            axisLine: {
+                // show: false,
+                lineStyle: {
+                    width: 2,
+                    color: '#2B7BD6',
+                },
+            },
+            splitLine: {
+                // show: false,
+                lineStyle: {
+                    color: '#153D7D',
+                },
+            },
+            axisTick: {
+                // show: false,
+            },
+            axisLabel: {
+                // show: false,
+                fontSize: 14,
+                color: 'E6EFFF'
+            },
+            // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+            {
+                type: 'custom',
+                renderItem: (params, api) => {
+                    const location = api.coord([api.value(0), api.value(1)]);
+                    return {
+                        type: 'group',
+                        children: [
+                            {
+                                type: 'CubeLeft',
+                                shape: {
+                                    api,
+                                    xValue: api.value(0),
+                                    yValue: api.value(1),
+                                    x: location[0],
+                                    y: location[1],
+                                    xAxisPoint: api.coord([api.value(0), 0]),
+                                },
+                                style: {
+                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        {
+                                            offset: 0,
+                                            color: colorArr[1][0],
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: colorArr[1][1],
+                                        },
+                                    ]),
+                                },
+                            },
+                            {
+                                type: 'CubeRight',
+                                shape: {
+                                    api,
+                                    xValue: api.value(0),
+                                    yValue: api.value(1),
+                                    x: location[0],
+                                    y: location[1],
+                                    xAxisPoint: api.coord([api.value(0), 0]),
+                                },
+                                style: {
+                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        {
+                                            offset: 0,
+                                            color: colorArr[2][0],
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: colorArr[2][1],
+                                        },
+                                    ]),
+                                },
+                            },
+                            {
+                                type: 'CubeTop',
+                                shape: {
+                                    api,
+                                    xValue: api.value(0),
+                                    yValue: api.value(1),
+                                    x: location[0],
+                                    y: location[1],
+                                    xAxisPoint: api.coord([api.value(0), 0]),
+                                },
+                                style: {
+                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        {
+                                            offset: 0,
+                                            color: colorArr[0][0],
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: colorArr[0][0],
+                                        },
+                                    ]),
+                                },
+                            },
+                        ],
+                    };
+                },
+                data: seriesData,
+            },
+        ],
+    };
+
+
+    return <>
+        <div className='bar_legend'><div className='_block' />家庭人口数</div>
+        <ReactEcharts
+            option={option}
+            notMerge
+            lazyUpdate
+            style={{ height: 231, width: 423 }}
+        />
+    </>
+}
+
+export default ThreeDBarChart;
+
+

super-screen/client/src/sections/community-safty/components/charts/pie.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import ReactEcharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import { RING_COLORS, tooltip } from '../../../water-prevention/components/charts/constants';
+/**
+ * props
+ * height: 图表高度
+ */
+
+function RingChart(props) {
+    const { data, image = {} } = props;
+    // eslint-disable-next-line react/destructuring-assignment
+    const colors = props.colors || RING_COLORS;
+    const max = data.reduce((pre, cur) => pre + cur.value, 0);
+    const getOption = () => {
+        const option = {
+            graphic: {
+                type: 'image',
+                style: {
+                    image: image.url,
+                    width: image.width,
+                    height: image.height,
+                },
+                left: 'center',
+                top: 'center',
+            },
+            title: {
+                text: max,
+                subtext: '总人数',
+                textStyle: {
+                    color: '#E2F8FF',
+                    fontSize: 25,
+                    align: 'center',
+                    fontFamily: 'DINMediumItalic',
+                    fontWeight: 'Italic',
+                    letterSpacing: '2.08px',
+                },
+                subtextStyle: {
+                    fontSize: 14,
+                    fontWeight: 400,
+                    color: ['#E6EFFF'],
+                },
+                x: 'center',
+                y: 'center',
+                top: '35%',
+            },
+            tooltip: {
+                ...tooltip,
+                trigger: 'item',
+                formatter: '{b} : {c}个 ({d}%)',
+                position: ['10%', '40%'],
+            },
+            // 渐变色
+            color: colors.map((s) => {
+                const cs = new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+                    { offset: 0, color: s.linearGradientFrom },
+                    { offset: 0.9, color: s.linearGradientTo },
+                ]);
+                return cs;
+            }),
+
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['66%', '80%'],
+                    avoidLabelOverlap: false,
+                    itemStyle: {
+                        // 环图间隙
+                        borderColor: '#0A1024',
+                        borderWidth: 3,
+                    },
+                    label: {
+                        show: false,
+                        position: 'center',
+                    },
+                    emphasis: {
+                        label: {
+                            show: false,
+                            fontSize: '40',
+                            fontWeight: 'bold',
+                        },
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    data,
+                },
+            ],
+        };
+
+        return option;
+    };
+    const { height, width } = props;
+    const options = getOption();
+    const percent_colors = ['#24DDFA', '#267FD3', '#F8C86B',]
+    const total = data?.reduce((p, c) => p + c.value, 0)
+    const renderList = () => data.map((s, index) => (
+        <div key={s.name || index} className="type-leagle-item flex-row flex-item-center" style={{ background: "linear-gradient(90deg, #002C6C 0%, #1e293800 100%)", height: 24, marginBottom: 8, width: 180, }}>
+            <div className="flex-row flex-item-center">
+                <div className="type-leagle-dot" style={{ background: RING_COLORS[index]?.linearGradientFrom }} />
+                <div className="type-leagle-label">{s.name}</div>
+            </div>
+            <div className="type-leagle-value">{s.value}个 <div style={{ textAlign: 'right', display: 'inline-block', width: 40, fontSize: 14, color: RING_COLORS[index]?.linearGradientFrom }}>{Math.round(s.value / total * 100)}%</div></div>
+        </div>
+    ));
+
+    return (
+        <div style={{ height: '100%' }} className="flex-row flex-item-center">
+            <div className="type-chart-wrapper">
+                <ReactEcharts
+                    option={options}
+                    notMerge
+                    lazyUpdate
+                    style={{ height: height || '174px', margin: '0', width: width || 'auto' }}
+                />
+            </div>
+            <div className="type-leagle-wrapper flex-row flex-content-between" style={{ height: 185, paddingLeft: 10, paddingRight: 10 }}>
+                {renderList()}
+            </div>
+        </div>
+    );
+}
+
+export default RingChart;

super-screen/client/src/sections/community-safty/components/charts/style.less

@@ -0,0 +1,15 @@
+.bar_legend {
+    color: #E6EFFF;
+    display: flex;
+    position: absolute;
+    top: 17%;
+    right: 5%;
+    align-items: center;
+
+    ._block {
+        width: 10px;
+        height: 10px;
+        background: #3ED5F7;
+        margin-right: 6px;
+    }
+}

super-screen/client/src/sections/community-safty/components/city-safty.js

@@ -1,48 +1,80 @@
 import React, { useEffect, useState } from 'react'
-import { Box, AutoRollComponent } from '$components';
+import { Box, AutoRollComponent, NoData } from '$components';
+import { useFsRequest, ApiTable } from '$utils';
+import moment from 'moment';
+import { Tooltip } from 'antd';
 import './style.less';
 
 function CitySafty(props) {
+    const { waterLevelAlarms } = props;
+
+    const { data: fireAlarms = [] } = useFsRequest({ url: ApiTable.getFireAlarmList });
 
     const getContent = () => {
         return <div className='_city_safty'>
-            <div className='alarm_handle'>
+            {fireAlarms.map(s => {
+                const handled = s?.state == 2
+                return <div className={handled ? 'alarm_handle' : 'alarm_unhandle'}>
                     <div className='handle_img' />
                     <div className='alarm_content'>
                         <div className='alarm_bg'>
-                        <div className='alarm_title1'>2023-06-20 17：00：00</div>
+                            <div className='alarm_title1'>{moment(s.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
-                        <div className='alarm_title2'>已处理</div>
+                            <div className='alarm_title2' style={{ color: handled ? '#FFF' : '#24DCF7' }}>{handled ? '已处理' : '处理中'}</div>
-                    </div>
-                    <div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div>
                         </div>
+                        <div className='alarm_text'>{s?.location}</div>
                     </div>
-            <div className='alarm_unhandle'>
-                <div className='handle_img' />
-                <div className='alarm_content'>
-                    <div className='alarm_bg'>
-                        <div className='alarm_title1'>2023-06-20 17：00：00</div>
-                        <div className='alarm_title2' style={{ color: '#24DCF7' }}>处理中</div>
-                    </div>
-                    <div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div>
                 </div>
+            })}
+
         </div>
-            <div className='alarm_unhandle'>
+    }
+
+    const renderList = () => <div className='_city_safty'>
+        {
+            waterLevelAlarms?.map(a => <div className={a.alarms[0]?.state >= 3 ? 'alarm_handle' : 'alarm_unhandle'}>
                 <div className='handle_img' />
                 <div className='alarm_content'>
                     <div className='alarm_bg'>
-                        <div className='alarm_title1'>2023-06-20 17：00：00</div>
+                        <Tooltip title={a.alarms[0]?.source?.name}>
-                        <div className='alarm_title2' style={{ color: '#24DCF7' }}>处理中</div>
+                            <div className='alarm_title1'>{a.alarms[0]?.source?.name}</div>
-                    </div>
+                        </Tooltip>
-                    <div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div>
+                        <div className='alarm_title2' style={{ color: a.alarms[0]?.state >= 3 ? '#FFEA00' : '#FF2C2C' }}>{convertLevelToLabel(a.alarms[0]?.level)}</div>
-                </div>
                     </div>
+                    <div className='alarm_text'>{a.alarms[0]?.content}</div>
                 </div>
+            </div>)
         }
+    </div>
+
+    const dataSource = fireAlarms.concat(waterLevelAlarms || [])
+
     return <Box title={"城市安全"} >
-        <AutoRollComponent canScroll={true} content={getContent()} divHeight={240} divId={`community-right-top`} />
+        {
+            dataSource?.length > 0 ? <AutoRollComponent
+                canScroll={true}
+                content={<>
+                    {renderList()}
+                    {getContent()}
+                </>}
+                divHeight={240}
+                divId={`community-right-top`} />
+                : <NoData height={240} />
+        }
     </Box>
 }
 
 export default CitySafty;
 
 
+function convertLevelToLabel(level) {
+    switch (level) {
+        case 1:
+            return '一级预警';
+        case 2:
+            return '二级预警';
+        case 3:
+            return '三级预警';
+        default:
+            return '';
+    }
+}

super-screen/client/src/sections/community-safty/components/infrastructure.js

@@ -1,13 +1,22 @@
 import React from 'react'
 import { Box, NoData } from '$components';
+import { useMockRequest, ApiTable } from '$utils';
 
 function Infrastructure(props) {
+    const { data: devices = [] } = useMockRequest({
+        url: 'https://superchangnan.anxinyun.cn/api/xiaofang/devices',
+        method: 'mockGet',
+    });
+    const datas = devices?.map(s => {
+        s.data = JSON.parse(s.data)
+        return s;
+    })
 
     const data = [
-        { name: '烟感设备', number: 32 },
+        { name: '烟感设备', number: datas?.find(s => s.type == 3)?.data?.length || 0 },
-        { name: '温度设备', number: 32 },
+        { name: '消火栓', number: datas?.find(s => s.type == 1)?.data?.length || 0 },
-        { name: '摄像头设备', number: 32 },
+        { name: '配电箱', number: datas?.find(s => s.type == 4)?.data?.length || 0 },
-        { name: '电梯设备', number: 32 },
+        { name: '水箱', number: datas?.find(s => s.type == 2)?.data?.length || 0 },
     ]
     return <Box title={"基础设施"} >
         {/* <NoData /> */}

super-screen/client/src/sections/community-safty/components/population-dynamics.js

@@ -1,32 +1,12 @@
 import React from 'react'
 import { Box } from '$components';
+import ThreeDBarChart from './charts/bar';
 
 function PopulationDynamics() {
 
-    const data = [
-        { title: '常驻人口', number: 447 },
-        { title: '流动人口', number: 447 },
-        { title: '境外人口', number: 447 },
-        { title: '未落户人口', number: 447 },
-        { title: '贫困人口', number: 447 },
-        { title: '老龄人口', number: 447 },
-    ]
-    return <Box title={"人口动态"} >
-        <div className='_person_trends'>
-            <div className='_person_tends_item1' />
-            <div className='_person_tends_item2'>
-                {
-                    data.map(s => {
-                        return <div className='_person_text'>
-                            <div className='_person_title'>{s.title}</div>
-                            <div className='_person_number'>{s.number}</div>
-                            <span>万人</span>
-                        </div>
-                    })
-                }
 
-            </div>
+    return <Box title={"租户家庭人口统计"} >
-        </div>
+        <ThreeDBarChart />
     </Box>
 }
 

super-screen/client/src/sections/community-safty/components/special-person.js

@@ -1,28 +1,31 @@
 import React, { useEffect, useState } from 'react'
 import { Box } from '$components';
 import './style.less';
+import RingChart from './charts/pie';
 
 function SpecialPerson(props) {
-
     const data = [
-        { name: '刑满释放', number: 447 },
+        { name: '17岁以下', value: 2312 },
-        { name: '社区矫正', number: 447 },
+        { name: '18-28岁', value: 123 },
-        { name: '吸毒人员', number: 447 },
+        { name: '29-40岁', value: 432 },
-        { name: '重点青少年', number: 447 },
+        { name: '41-65岁', value: 42 },
-        { name: '艾滋病人', number: 447 },
+        { name: '66-85岁', value: 41},
+        { name: '85岁以上', value: 43 }
     ]
-    return <Box title={"特殊人群统计"}>
+
-        <div className='_special'>
+    return <Box title={"租户年龄分布"}>
+        <RingChart
+            data={data}
+            width={220}
+            height={220}
+            image={
                 {
-                data.map((s, index) => {
+                    url: '/assets/images/ring_bg.png',
-                    return <div className={`_special_item _special_bg${index % 2 == 0 ? 1 : 2}`}>
+                    width: 106,
-                        <span>{s.name}</span>
+                    height: 106,
-                        <span><span className='_number'>{s.number}</span>人</span>
-                    </div>
-                })
                 }
-
+            }
-        </div>
+        />
     </Box>
 }
 

super-screen/client/src/sections/community-safty/containers/gis.js

@@ -1,22 +1,26 @@
 import React, { useEffect, useState } from 'react';
+import { Tooltip } from 'antd';
 import { connect } from 'react-redux';
 import { render } from 'react-dom';
-import { data as heatmapData } from './data'
+import { useMockRequest } from '$utils';
 import './gis.less'
-
 const MAPDOMID = 'fs-amap-container';
 let map = null;
-let heatmap = null;
+const TYPES = {
-let loca = null;
+    1: '消防栓',
-let interval = null;
+    2: '水箱',
-const MARKER_IMG_NAME = {
+    3: '烟感',
-    markergreen: '回迁房',
+    4: '配电箱'
-    markerblue: '城中村',
-    markeryellow: '廉租房',
 }
 function Map(props) {
     const [delay, setDelay] = useState(true)
     const [tab, setTab] = useState('home')
+    const [type, setType] = useState(3)
+
+    const { data: devices = [] } = useMockRequest({
+        url: 'https://superchangnan.anxinyun.cn/api/xiaofang/devices',
+        method: 'mockGet',
+    });
     // 地图初始化
     const loadMap = () => {
         // 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
@@ -46,10 +50,8 @@ function Map(props) {
         });
 
         map.on('complete', () => {
-            setTimeout(() => {
             setDelay(false)
-            }, 1000);
+            tab == 'home' && map && renderMarkers()
-
         });
 
         map.on('click', (e) => {
@@ -68,104 +70,35 @@ function Map(props) {
             console.log('e.lnglat' + e.lnglat)
         })
 
-        loca = new Loca.Container({ map: map })
 
     };
 
-
-    // 初始化GIS 组件销毁清空定时器
     useEffect(() => {
         loadMap();
     }, []);
 
+    useEffect(() => {
+        if (!delay) {
+            setTimeout(() => {
+                tab == 'home' && map && renderMarkers()
+                tab == 'device' && map && renderDevices()
+            }, 200);
+        }
+    }, [tab, devices]);
+
+    useEffect(() => {
+        if (!delay) map && renderDevices()
+    }, [type]);
+
+
     const renderMarkers = () => {
         map.clearMap();
         map.setZoom(10.3)
         map.setCenter([116.054664, 28.538966])
         map.setPitch(22.9)
         map.setRotation(1.7000)
-        if (loca && heatmap) loca.remove(heatmap)
-        if (tab == 'person') {
-
-            var geo = new Loca.GeoJSONSource({
-                data: heatmapData
-            });
 
-            heatmap = new Loca.HeatMapLayer({
-                // loca,
-                zIndex: 10,
-                opacity: 1,
-                visible: true,
-                zooms: [2, 22],
-            });
 
-            heatmap.setSource(geo, {
-                radius: 20,
-                unit: 'px',
-                height: 10,
-                // radius: 10,
-                // unit: 'px',
-                // height: 10,
-                gradient: {
-                    0.1: 'rgba(50,48,118,1)',
-                    0.2: 'rgba(127,60,255,1)',
-                    0.4: 'rgba(166,53,219,1)',
-                    0.6: 'rgba(254,64,95,1)',
-                    0.8: 'rgba(255,98,4,1)',
-                    1: 'rgba(236,220,79,1)',
-                },
-                value: function (index, feature) {
-                    return feature.properties.count;
-                },
-                min: 0,
-                max: 10,  //4.6
-                heightBezier: [0, .53, .37, .98],
-            });
-            loca.add(heatmap);
-
-            map.on('click', (e) => {
-                const feat = heatmap.queryFeature(e.pixel.toArray());
-                const random = Math.random()
-                if (feat) {
-                    let infowindow = new AMap.InfoWindow({
-                        isCustom: true,  //使用自定义窗体
-                        content: `<div id="map-content" class="personinfowindow">
-                <div style="height:${330}px;" id="contentidheatmap${random}"></div></div>`,
-                        offset: new AMap.Pixel(133, 260)
-                    });
-
-                    let position = map.getCenter();
-                    infowindow.open(map, position);
-                    setTimeout(() => {
-                        if (document.getElementById(`contentidheatmap${random}`)) {
-                            render(<div>
-                                <div className='gis_exit' onClick={() => {
-                                    map.clearInfoWindow();
-                                }} />
-                                <div className='gis_item' style={{ marginTop: 20 }}>
-                                    <span className='gis_title'>小区名称</span>
-                                    <span className='gis_text'>小区名称</span>
-                                </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>人口</span>
-                                    <span className='gis_text'>2344人</span>
-                                </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>新生儿</span>
-                                    <span className='gis_text'>23人</span>
-                                </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>老人</span>
-                                    <span className='gis_text'>342人</span>
-                                </div>
-                            </div>,
-                                document.getElementById(`contentidheatmap${random}`));
-                        }
-                    }, 50)
-
-                }
-            });
-        } else {
         //初始层级 zoom14以下显示聚合点
         const data = [
             { lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' },
@@ -192,7 +125,7 @@ function Map(props) {
             var marker = new AMap.Marker({
                 position: new AMap.LngLat(x.lng, x.lat),
                 // 将一张图片的地址设置为 icon
-                    icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
+                icon: '/assets/images/homepage/communtity/markerblue.png',
                 // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                 offset: new AMap.Pixel(-13, -30),
                 zooms: [3, 14],
@@ -266,180 +199,140 @@ function Map(props) {
             })
         })
 
-            if (tab == 'device') {
-                const data = [
-                    { lng: 115.921895, lat: 28.556351, type: 'device', name: '廉租房1', kind: 'devicemarker' },
-                    { lng: 115.920839, lat: 28.555323, type: 'device', name: '廉租房2', kind: 'devicemarker' },
-                    { lng: 115.918329, lat: 28.55445, type: 'device', name: '廉租房3', kind: 'devicemarker' },
-                    { lng: 115.919309, lat: 28.553166, type: 'device', name: '廉租房1', kind: 'devicemarker' },
-                    { lng: 115.921585, lat: 28.553925, type: 'device', name: '廉租房2', kind: 'devicemarker' },
-                    { lng: 115.92565, lat: 28.556996, type: 'device', name: '廉租房3', kind: 'devicemarker' },
-                    { lng: 115.922671, lat: 28.558769, type: 'device', name: '廉租房1', kind: 'devicemarker' },
-                ]
-
-                data.filter(s => s.type == tab).map((x, index) => {
-                    var marker = new AMap.Marker({
-                        position: new AMap.LngLat(x.lng, x.lat),
-                        // 将一张图片的地址设置为 icon
-                        icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
-                        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
-                        offset: new AMap.Pixel(-13, -30),
-                        zooms: [15, 19],
-                    });
-                    marker.setTitle(x.name);
-                    map.add(marker);
-                })
-            }
-        }
-
     }
 
-    const renderAlarms = () => {
+    const renderDevices = () => {
-        if (tab == 'person') {
+        map.clearMap()
-            return;
+        var style = [{
+            url: '/assets/images/homepage/communtity/gishydrant.png',
+            anchor: new AMap.Pixel(6, 6),
+            size: new AMap.Size(11, 11)
+        }, {
+            url: '/assets/images/homepage/communtity/giswatertank.png',
+            anchor: new AMap.Pixel(4, 4),
+            size: new AMap.Size(11, 11)
+        }, {
+            url: '/assets/images/homepage/communtity/gissmoke.png',
+            anchor: new AMap.Pixel(3, 3),
+            size: new AMap.Size(11, 11)
+        }, {
+            url: '/assets/images/homepage/communtity/giselectricity.png',
+            anchor: new AMap.Pixel(3, 3),
+            size: new AMap.Size(11, 11)
+        }];
+        let points = [], markers = [];
+        devices?.filter(x => x.type == type)?.map(x => {
+            let data = JSON.parse(x.data)
+            data?.map((s, index) => {
+                points.push(
+                    {
+                        lnglat: new AMap.LngLat(s.lng, s.lat),
+                        style: x.type - 1,//对应的status相对应的样式style
+                        name: s.address,
+                        id: s.address + s.type + index,
+                        data: s,
                     }
+                );
+                // if (index < 2000 && s.lng && s.lat) {
+                //     const marker = new AMap.Marker({
+                //         icon: '/assets/images/homepage/fire/leader.png',
+                //         // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+                //         position: [s.lng, s.lat],
+                //         // offset: new AMap.Pixel(-13, -30),
+                //         // content: ''
+                //         // size: [13, 13]
+                //     });
+                //     marker.setTitle(index);
+                //     marker.setMap(map);
+                // }
 
-        const alarms = [
-            { lng: 115.92365, lat: 28.557404, type: 'device', name: '廉租房1', kind: 'markeralarm' },
-        ]
-
-        alarms.map((x, index) => {
-            var marker = new AMap.Marker({
-                position: new AMap.LngLat(x.lng, x.lat),
-                // 将一张图片的地址设置为 icon
-                icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
-                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
-                offset: new AMap.Pixel(-13, -30),
-                zooms: [15, 19],
             });
-            marker.setTitle(x.name);
+        })
-            map.add(marker);
 
-            let infowindow = new AMap.InfoWindow({
+        var mass = new AMap.MassMarks(points, {
-                isCustom: true,  //使用自定义窗体
+            opacity: 0.8,
-                content: `<div id="map-content" class="gis-infowindow cummuntity-gis-infowindow-alarm">
+            zIndex: 11111111,
-                    <div style="height:${360}px;" id="alarmcontentid${x.name}"></div></div>`,
+            cursor: 'pointer',
-                offset: new AMap.Pixel(233, 260)
+            style: style
         });
 
-            let alarmOk = new AMap.InfoWindow({
+        mass.on('click', function (e) {
+            let id = Math.random(1000)
+            map.setCenter(e.data.lnglat)
+            let infowindow = new AMap.InfoWindow({
                 isCustom: true,  //使用自定义窗体
-                // content: `<div id="map-content" class="gis-infowindow gis-infowindow-alarm">
+                content: `<div class="device-infowindow">
-                //     <div style="height:${360}px;" id="contentid${x.name}"></div></div>`,
+        <div style="height:${360}px;" id="info-window${id}"></div></div>`,
-                offset: new AMap.Pixel(233, 440)
+                offset: new AMap.Pixel(181, 260)
             });
+            infowindow.open(map, e.data.lnglat)
 
-            marker.on('click', () => {
-                let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
-                infowindow.open(map, position);
-                map.setCenter(position)
             setTimeout(() => {
-                    if (document.getElementById(`alarmcontentid${x.name}`)) {
+                if (document.getElementById('info-window' + id)) {
-                        render(<div>
+                    render(
-                            <div className='gis_exit' onClick={() => {
+                        <div>
-                                map.setCenter([115.922069, 28.554867])
+                            <div className='gis_exit' onClick={() => { map.clearInfoWindow() }} />
-                                map.clearInfoWindow();
+                            <div style={{ marginTop: 10 }}>
-                            }} />
                                 <div className='gis_item'>
-                                <span className='gis_title'>小区名称</span>
+                                    <div className='gis_title'></div>
-                                <span className='gis_text'>{x.name}</span>
+                                    <div className='gis_text'>{TYPES[type]}</div>
                                 </div>
                                 <div className='gis_item'>
-                                <span className='gis_title'>人流量</span>
+                                    <div className='gis_title'>地址</div><div className='gis_text'>
-                                <span className='gis_text'>123次</span>
+                                        <Tooltip placement="top" title={e.data.name}>
-                                <span className='gis_title' style={{ marginLeft: 20 }}>房龄</span>
+                                            <span style={{ color: '#FFF' }}>{e.data.name?.length > 20 ? e.data.name?.substring(0, 20) + '...' : e.data.name}</span>
-                                <span className='gis_text'>9年</span>
+                                        </Tooltip>
                                     </div>
-                            <div className='gis_item'>
-                                <span className='gis_title'>租赁中房屋</span>
-                                <span className='gis_text'>165套</span>
                                 </div>
                                 <div className='gis_item'>
-                                <span className='gis_title'>网格员</span>
+                                    <div className='gis_title'>状态</div><div className='gis_text'>正常</div>
-                                <span className='gis_text'>张三</span>
                                 </div>
-                            <div className='gis_item'>
-                                <span className='gis_title'>手机号码</span>
-                                <span className='gis_text'>15765845845</span>
                             </div>
-
-                            <div><span className='confirm_text'>人流量较大，确认是否安装消防设施？</span></div>
-                            <div className='alarm_confirm'>
-                                <div className='alarm_cancel'>否</div>
-                                <div className='alarm_ok'>是</div>
                         </div>
-                        </div>,
+
-                            document.getElementById(`alarmcontentid${x.name}`));
+                        ,
+                        document.getElementById('info-window' + id));
                 }
             }, 50)
+
+            window.closeTooltip = () => {
+                testDiv.close();
+            }
         })
-        })
+
+        mass.setMap(map)
     }
 
     const renderLeftTop = () => {
-        return tab == 'person' ?
+        return <div className='home_left'>
-            <div className='home_left'>
+            <div className='hometotalbg'>廉租房总数</div>
-                <div className='hometotalbg'>区域总人数</div>
             <div className='home_total_number'>455 <span style={{ fontSize: 12 }}>万</span></div>
 
-                <div className='hqtotal'>新生儿总数</div>
+            <div className='hqtotal'>租赁中</div>
             <div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div>
 
-                <div className='cztotal'>老人总数</div>
+            <div className='cztotal'>空置</div>
             <div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div>
-            </div> :
-            <div className='home_left'>
-                <div className='hometotalbg'>租赁房屋总数</div>
-                <div className='home_total_number'>4556</div>
-
-                <div className='hqtotal'>回迁房总数</div>
-                <div className='home_total_number'>4556</div>
-
-                <div className='cztotal'>城中村总数</div>
-                <div className='home_total_number'>4556</div>
-
-                <div className='lztotal'>廉租房</div>
-                <div className='home_total_number'>4556</div>
-
         </div>
     }
 
     const renderRightBottom = () => {
-        return tab == 'person' ?
+        return <div className='device_home_right'>
-            <div className='person_home_right'>
+            {[
-                <div className='_right_row1'>
+                { name: '烟感设备', icon: 'gissmoke', type: 3 },
-                    <div className='_monitor' /><span className='monitor_text'>特殊人群</span></div>
+                { name: '配电箱', icon: 'giselectricity', type: 4 },
-
+                { name: '消火栓', icon: 'gishydrant', type: 1 },
-                <div className='flex-row flex-content-around flex-item-center' style={{ marginTop: 6, marginBottom: 6 }}>
+                { name: '水箱', icon: 'giswatertank', type: 2 }
-                    <span className='_title_1'>新生儿热力图</span>
+            ].map(s => <div className='flex-row flex-item-center' style={{ marginBottom: 8 }}>
-                    <span className='_title_2'>单位：人/平方公里</span>
+                <div onClick={() => { setType(s.type) }} className={`checkbox`} >{s.type == type ? '✓' : ''}</div>
+                <img src={`/assets/images/homepage/communtity/${s.icon}.png`} />
+                <span>{s.name}</span>
+            </div>)}
         </div>
 
-                <div className='legend_color'></div>
-                <div className='flex-row flex-content-around' style={{ color: 'rgba(147, 171, 192, 1)', marginTop: 6 }}>
-                    <span>0</span>
-                    <span>10</span>
-                    <span>20</span>
-                    <span>30</span>
-                    <span>40</span>
-                </div>
-            </div> :
-            <div className='home_right'>
-                <div className='_lz'>
-                    <div className='_icon' />
-                    <span>廉租房</span>
-                </div>
-                <div className='_hq'>
-                    <div className='_icon' />
-                    <span>回迁房</span>
-                </div>
-                <div className='_cz'>
-                    <div className='_icon' />
-                    <span>城中村</span>
-                </div>
-            </div>
     }
 
+
     return (
         <>
             {/* 延缓加载遮罩 */}
@@ -447,17 +340,21 @@ function Map(props) {
 
             {/* 地图容器 */}
             <div className="gis" id={MAPDOMID} />
-            {map && renderMarkers()}
+
-            {map && renderAlarms()}
 
             {/* 底部按钮 */}
-            {!delay && [
+            {[
                 { name: '房屋分布', tab: 'home' },
                 { name: '人口分布', tab: 'person' },
                 { name: '基础设施', tab: 'device' }
             ].map((s, index) => {
-                return <div className={'gis-button' + (index + 1)}
+
-                    onClick={() => { setTab(s.tab) }}
+                return index == 1 ? '' : <div className={'gis-button' + (index + 1)}
+                    onClick={() => {
+                        if (delay) return
+                        setTab(s.tab)
+                    }}
+                    style={{ zIndex: 1001 }}
                 >
                     <div className={`button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
                     <div>{s.name}</div>
@@ -466,8 +363,8 @@ function Map(props) {
             }
 
             {/* 左上角图例 */}
-            {renderLeftTop()}
+            {tab == 'home' && renderLeftTop()}
-            {renderRightBottom()}
+            {tab == 'device' && renderRightBottom()}
             {/* 四周遮罩 */}
             <div className='gis-left'></div>
             <div className='gis-right'></div>

super-screen/client/src/sections/community-safty/containers/gis.less

@@ -28,7 +28,7 @@
 .gis-bottom {
     position: absolute;
     left: 0;
-    bottom: 0;
+    bottom: -1px;
     height: 10%;
     width: 100%;
     background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
@@ -37,7 +37,7 @@
 .gis-button1 {
     position: absolute;
     left: 39%;
-    bottom: -5%;
+    bottom: -2%;
     font-family: YouSheBiaoTiHei;
     font-size: 12px;
     color: #ECF7FF;
@@ -91,7 +91,7 @@
 .gis-button3 {
     position: absolute;
     left: 57%;
-    bottom: -5%;
+    bottom: -2%;
     font-family: YouSheBiaoTiHei;
     font-size: 12px;
     color: #ECF7FF;
@@ -350,7 +350,7 @@
     .hqtotal {
         width: 126.45px;
         height: 26.23px;
-        padding-left: 24px;
+        padding-left: 30px;
         background: url('/assets/images/homepage/communtity/hqtotal.png') no-repeat;
         background-size: 100% 100%;
     }
@@ -358,8 +358,8 @@
     .cztotal {
         width: 126.45px;
         height: 26.23px;
-        padding-left: 24px;
+        padding-left: 38px;
-        background: url('/assets/images/homepage/communtity/cztotal.png') no-repeat;
+        background: url('/assets/images/homepage/communtity/kztotal.png') no-repeat;
         background-size: 100% 100%;
     }
 
@@ -458,64 +458,47 @@
     }
 }
 
-.person_home_right {
+.device_home_right {
     position: absolute;
     right: 26%;
     bottom: 7%;
     z-index: 999;
-    width: 224px;
+    width: 106px;
-    height: 96px;
+    height: 126px;
-    background-image: linear-gradient(270deg, rgba(4, 55, 126, 0.65) 0%, rgba(0, 18, 65, 0.69) 50%, rgba(0, 18, 65, 0.65) 96%);
+    background: rgba(2, 29, 51, 0.68);
     padding-left: 5px;
-
+    border: 1px solid #1e5899;
-    ._right_row1 {
-        width: 100%;
     display: flex;
-        align-items: center;
+    flex-direction: column;
-        padding-right: 22px;
+    justify-content: center;
-        justify-content: flex-end;
+    padding-top: 8px;
-
-        .monitor_text {
-            background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
-            background-clip: border-box;
-            -webkit-background-clip: text;
-            color: transparent;
-            font-family: YouSheBiaoTiHei;
-            font-size: 16px;
-            letter-spacing: 0;
-        }
-
-        ._monitor {
-            width: 7.39px;
-            height: 6px;
-            background: url('/assets/images/homepage/communtity/monitor.png') no-repeat;
-            background-size: 100% 100%;
-            margin-right: 13px;
-        }
-    }
 
-    .legend_color {
+    img {
-        width: 210.77px;
+        width: 13px;
-        height: 3px;
+        height: 13px;
-        background-image: linear-gradient(90deg, #A1FF00 1%, #FFF800 23%, #EF8C00 74%, #FF0000 100%);
+        margin-right: 3px;
     }
 
-    ._title_1 {
+    span {
-        background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
-        background-clip: border-box;
-        -webkit-background-clip: text;
-        color: transparent;
         font-family: YouSheBiaoTiHei;
-        font-size: 16px;
+        font-size: 14px;
+        color: #FFFFFF;
     }
 
-    ._title_2 {
+    .checkbox {
-        font-family: SourceHanSansCN-Medium;
+        width: 12px;
-        font-weight: 500;
+        height: 12px;
-        font-size: 12px;
+        background: url(/assets/images/homepage/communtity/checkbox.png) no-repeat;
-        color: #93ABC0;
+        background-size: 100% 100%;
+        cursor: pointer;
+        margin-right: 4px;
+        display: inline-block;
+        color: #b4d2ed;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 11px;
     }
-
 }
 
 
@@ -538,3 +521,68 @@
         height: 753px;
     }
 }
+
+.markerClass {
+
+    width: 12px;
+    height: 12px;
+
+    background-color: #dd524d;
+    border-radius: 6px;
+    opacity: 0.7;
+}
+
+.device-infowindow {
+    width: 302px;
+    height: 338.43px;
+    background: url('/assets/images/homepage/communtity/deviceinfowindow.png') no-repeat;
+    background-size: 100% 100%;
+    opacity: 0.8;
+    padding-left: 69px;
+    padding-left: 22px;
+    padding-top: 157px;
+    color: #fff;
+
+    .gis_exit {
+        cursor: pointer;
+        position: absolute;
+        right: 9px;
+        top: 42px;
+        width: 30.75px;
+        height: 23px;
+        background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .gis_item {
+        border-bottom: 1px solid #125DB0;
+        width: 93%;
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        margin-bottom: 10px;
+        min-height: 35px;
+        display: flex;
+
+        .gis_title {
+            font-family: SourceHanSansCN-Regular;
+            font-weight: 400;
+            font-size: 14px;
+            color: #C3E6FF;
+            letter-spacing: 0;
+            margin-right: 12px;
+            width: 65px;
+        }
+
+        .gis_text {
+            width: 188px;
+            font-family: SourceHanSansCN-Regular;
+            font-weight: 400;
+            font-size: 14px;
+            color: #FFFFFF;
+            letter-spacing: 0;
+            line-height: 21px;
+        }
+    }
+
+}

super-screen/client/src/sections/community-safty/containers/homePage.js

@@ -3,20 +3,58 @@ import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import LeftTop from '../components/basic-info'
 import LeftMiddle from '../components/population-dynamics'
-import LeftBottom from '../components/infrastructure'
+import RightTop from '../components/infrastructure'
-import RightTop from '../components/city-safty'
+import RightBottom from '../components/city-safty'
 import RightMiddle from '../components/special-person'
-import RightBottom from '../components/traffic-ranking'
+import LeftBottom from '../components/traffic-ranking'
 import Gis from './gis';
 import Weather from '../../water-prevention/components/weather';
 import { FullScreenContainer } from '$components'
 import './style.less'
 
 function homePage(props) {
-    const { dispatch } = props;
+    const { dispatch, actions } = props;
+    const { waterLogin, getWaterStructures, getWaterAlarms } = actions.waterprevention;
     const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
     const cardHeight = document.body.clientHeight * 0.896 * 0.32
     const cardContentHeight = cardHeight - 42 - 13
+    const [waterLevelAlarms, setWaterLevelAlarms] = useState([]);
+    useEffect(() => {
+        getData();
+    }, [])
+
+    const getData = () => {
+        // 水务
+        dispatch(waterLogin({ username: "123456", password: "123456", pcode: 'fce4afe2-5b6a-408a-ab18-a2afa7fa027c' })).then(loginRes => {
+            if (loginRes.success) {
+                const { token } = loginRes.payload.data;
+                sessionStorage.setItem('waterUser', JSON.stringify(loginRes.payload.data));
+                // 结构物
+                dispatch(getWaterStructures({ token })).then(structRes => {
+                    if (structRes.success) {
+                        // 告警
+                        dispatch(getWaterAlarms({ token })).then(alarmRes => {
+                            if (alarmRes.success) {
+                                let levelAlarms = [];
+                                alarmRes.payload.data.alarms.forEach(a => {
+                                    let alarm = { ...a }
+                                    for (const struct of structRes.payload.data) {
+                                        if (struct.id === a.structureId && struct.type.name === '河流') {
+                                            alarm.lng = struct.longitude;
+                                            alarm.lat = struct.latitude;
+                                            levelAlarms.push(alarm);
+                                        }
+                                    };
+                                })
+                                setWaterLevelAlarms(levelAlarms);
+                            }
+                        })
+                    }
+                })
+            }
+        })
+    }
+
     return <>
         <FullScreenContainer>
             <div className='homepage'>
@@ -42,8 +80,13 @@ function homePage(props) {
                         </div>
                     </div>
                 </div>
-                <div className='homepage-center'>
+                <div className='community-homepage-center'>
-                    <Gis />
+                    {/* <Gis /> */}
+                    <div className='homeTextLeft'>房屋分布</div>
+                    <div className='homeTextRight'>基础设施</div>
+                    <iframe src='/watergis' style={{ width: '100%', height: '100%' }} scrolling='no'
+                        frameborder="no"
+                        border="0" />
                 </div>
                 <div className='homepage-left homepage-left-right'>
                     <div className="list">
@@ -54,7 +97,7 @@ function homePage(props) {
                             <RightMiddle cardContentHeight={cardContentHeight} />
                         </div>
                         <div className='child-right' style={childStyle}>
-                            <RightBottom />
+                            <RightBottom waterLevelAlarms={waterLevelAlarms} />
                         </div>
                     </div>
                 </div>

super-screen/client/src/sections/community-safty/containers/style.less

@@ -65,7 +65,7 @@
         z-index: 300;
     }
 
-    .homepage-center {
+    .community-homepage-center {
         width: 93.9%;
         height: 84%;
         position: absolute;
@@ -259,3 +259,21 @@
     height: 100%;
 }
 
+.homeTextLeft {
+    position: absolute;
+    bottom: -18px;
+    left: 40%;
+    font-family: YouSheBiaoTiHei;
+    font-size: 12px;
+    color: #ECF7FF;
+}
+
+
+.homeTextRight {
+    position: absolute;
+    bottom: -18px;
+    right: 39.9%;
+    font-family: YouSheBiaoTiHei;
+    font-size: 12px;
+    color: #ECF7FF;
+}

super-screen/client/src/sections/community-safty/routes.js

@@ -1,6 +1,6 @@
 'use strict';
 import homePage from './containers/index';
-
+import CommunityGis from './containers/gis';
 export default [{
     type: 'outer',
     route: {
@@ -10,4 +10,15 @@ export default [{
         // 不设置 component 则面包屑禁止跳转
         component: homePage
     }
-}];
+},
+{
+    type: 'outer',
+    route: {
+        path: '/watergis',
+        key: 'watergis',
+        breadcrumb: 'GIS',
+        // 不设置 component 则面包屑禁止跳转
+        component: CommunityGis
+    }
+}
+];

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

@@ -42,6 +42,7 @@ export function modifyFireAlarm(id, params) {
 }
 
 
+
 export function getVideoCenterList () {
    return dispatch => basicAction({
        type: 'get',
@@ -64,3 +65,24 @@ export function getDetails () {
    });
 }
 
+
+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: '获取火情趋势失败' },
+    });
+}
+

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

@@ -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 = () => {
+    const option = {
-        return <div className='today_real_alarm'>
+        tooltip: {
-            <div className='today_item'>
+            trigger: "axis",
-                <div className='column1_alarm1'>14:22</div>
+            axisPointer: {
-                <div className='text_blue'><div className='_icon1' />红花岗区大队</div>
+                type: "shadow",
-                <div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
+            },
-            </div>
+            backgroundColor: "rgba(255,255,255,0.75)",
-            <div className='today_item'>
+            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
-                <div className='column1_alarm2'>14:22</div>
+            textStyle: {
-                <div className='text_blue'><div className='_icon1' />红花岗区大队</div>
+                fontSize: 14,
-                <div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
+                color: "#000",
-            </div>
+            },
-            <div className='today_item'>
+            formatter: (params) => {
-                <div className='column1_alarm1'>14:22</div>
+                const item = params[0];
-                <div className='text_blue'><div className='_icon1' />红花岗区大队</div>
+                return item.name + " : " + item.value + " 次";
-                <div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
+            },
-            </div>
+        },
-            <div className='today_item'>
+        xAxis: [
-                <div className='column1_alarm2'>14:22</div>
+            {
-                <div className='text_blue'><div className='_icon1' />红花岗区大队</div>
+                type: "category",
-                <div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
+                boundaryGap: false,
-            </div>
+                axisLabel: {
-            <div className='today_item'>
+                    interval: 0,
-                <div className='column1_alarm2'>14:22</div>
+                    color: "rgba(195, 230, 255, 1)",
-                <div className='text_blue'><div className='_icon1' />红花岗区大队</div>
+                    fontSize: 10,
-                <div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
+                },
-            </div>
+                axisLine: {
-            <div className='today_item'>
+                    show: true,
-                <div className='column1_alarm2'>14:22</div>
+                    lineStyle: {
-                <div className='text_blue'><div className='_icon1' />红花岗区大队</div>
+                        type: 'solid',
-                <div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
+                        color: "rgba(184, 185, 188, 0.5)",
-            </div>
+                        width: 1,
-            <div className='today_item'>
+                    },
-                <div className='column1_alarm2'>14:22</div>
+                },
-                <div className='text_blue'><div className='_icon1' />红花岗区大队</div>
+                data: Xdata,
-                <div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
+            },
-            </div>
+        ],
-        </div>
+        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>
 }
 

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

@@ -1,141 +1,166 @@
 import React from 'react'
-import { Box } from '$components';
+import { Box, AutoRollComponent, NoData } from '$components';
-import ReactEcharts from 'echarts-for-react';
+// 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 Ydata = fireDevice.map(d => d.type_name);
-    let Xdata = [12, 19, 19, 13, 15]
+    // let Xdata = fireDevice.map(d => d.device_count);
-    const options = {
+    // const options = {
-        xAxis: {
+    //     xAxis: {
-            type: 'value',
+    //         type: 'value',
-            show: false,
+    //         show: false,
-        },
+    //     },
-        grid: {
+    //     grid: {
-            left: -10,
+    //         left: -10,
-            top: 20,
+    //         top: 20,
-            bottom: 0,
+    //         bottom: 0,
-            right: 20,
+    //         right: 20,
-            containLabel: true,
+    //         containLabel: true,
-        },
+    //     },
-        yAxis: [
+    //     yAxis: [
-            {
+    //         {
-                type: 'category',
+    //             type: 'category',
-                inverse: true,
+    //             inverse: true,
-                axisLabel: {
+    //             axisLabel: {
-                    show: true,
+    //                 show: true,
-                    margin: 25,
+    //                 margin: 25,
-                    // textStyle: {
+    //                 // textStyle: {
-                    color: '#ECF7FF',
+    //                 color: '#ECF7FF',
-                    fontSize: 12,
+    //                 fontSize: 12,
-                    // },
+    //                 // },
-                    // 调整左侧文字的3个属性，缺一不可
+    //                 // 调整左侧文字的3个属性，缺一不可
-                    verticalAlign: 'center',
+    //                 verticalAlign: 'center',
-                    align: 'left',
+    //                 align: 'left',
-                    //调整文字上右下左
+    //                 //调整文字上右下左
-                    padding: [0, 0, 0, -30],
+    //                 padding: [0, 0, 0, -30],
-
+    //             },
-
+    //             splitLine: {
-                },
+    //                 show: false,
-                splitLine: {
+    //             },
-                    show: false,
+    //             axisTick: {
-                },
+    //                 show: false,
-                axisTick: {
+    //             },
-                    show: false,
+    //             axisLine: {
-                },
+    //                 show: false,
-                axisLine: {
+    //             },
-                    show: false,
+    //             data: Ydata
-                },
+    //         },
-                data: Ydata
+    //         {
-            },
+    //             inverse: true,
-            {
+    //             // y轴最右侧的文字
-                inverse: true,
+    //             axisTick: "none",
-                // y轴最右侧的文字
+    //             axisLine: "none",
-                axisTick: "none",
+    //             type: "category",
-                axisLine: "none",
+    //             axisLabel: {
-                type: "category",
+    //                 // margin: 10,
-                axisLabel: {
+    //                 // textStyle: {
-                    // margin: 10,
+    //                 color: "#24DCF7",
-                    // textStyle: {
+    //                 fontSize: "12",
-                    color: "#24DCF7",
+    //                 // },
-                    fontSize: "12",
+    //                 rich: {
-                    // },
-                    rich: {
 
-                        a1: {
+    //                     a1: {
-                            color: '#24DCF7',
+    //                         color: '#24DCF7',
-                            width: 5,
+    //                         width: 5,
-                            height: 5,
+    //                         height: 5,
-                            fontSize: 16,
+    //                         fontSize: 16,
-                        },
+    //                     },
-                        a2: {
+    //                     a2: {
-                            color: '#5999C8',
+    //                         color: '#5999C8',
-                            width: 5,
+    //                         width: 5,
-                            height: 5,
+    //                         height: 5,
-                            fontSize: 12,
+    //                         fontSize: 12,
-                        },
+    //                     },
-                    },
+    //                 },
-                    formatter: function (value) {
+    //                 formatter: function (value) {
-                        return [`{a1|${value}}      {a2|次}`];
+    //                     return [`{a1|${value}}      {a2|个}`];
-                    },
+    //                 },
-                },
+    //             },
-                data: Xdata,
+    //             data: Xdata,
-            },
+    //         },
+    //     ],
+    //     series: [
+    //         {
+    //             type: 'bar',
+    //             barWidth: 12,
+    //             zlevel: 2,
+    //             z: 2,
+    //             showBackground: true,
+    //             backgroundStyle: {
+    //                 color: '#2B375C'
+    //             },
+    //             color: '#005AC6',
 
+    //             label: {
+    //                 show: false,
 
-        ],
+    //             },
-        series: [
+    //             data: Xdata,
-            {
+    //         },
-                type: 'bar',
+    //         {
-                barWidth: 12,
+    //             type: "pictorialBar",
-                zlevel: 2,
+    //             // 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==',
-                z: 2,
+    //             symbolSize: [15, 15],
-                showBackground: true,
+    //             symbolOffset: [0, 0],
-                backgroundStyle: {
+    //             symbolPosition: "right",
-                    color: '#2B375C'
+    //             z: 20,
-                },
+    //             zlevel: 20,
-                color: '#005AC6',
+    //             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: {
+    const getContent = () => {
-                    show: false,
+        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 }}
+        // />
+    }
 
-                },
+    return <Box title={"接入消防设备"} >
-                data: Xdata,
-            },
         {
-                type: "pictorialBar",
+            fireDevice.length
-                // 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==',
+                ? <AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-middle`} />
-                symbolSize: [15, 15],
+                : <NoData height={250} />
-                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 }}
-        />
     </Box>
 }
 

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

@@ -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%;

super-screen/client/src/sections/fire-control/containers/gis.less

@@ -28,95 +28,12 @@
 .gis-bottom {
     position: absolute;
     left: 0;
-    bottom: 0;
+    bottom: -1px;
     height: 10%;
     width: 100%;
     background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
 }
 
-.gis-button1 {
-    position: absolute;
-    left: 39%;
-    bottom: -5%;
-    font-family: YouSheBiaoTiHei;
-    font-size: 12px;
-    color: #ECF7FF;
-    letter-spacing: 0;
-    width: 76.95px;
-    text-align: center;
-    cursor: pointer;
-    z-index: 999;
-
-    .button_img {
-        background: url('/assets/images/homepage/communtity/home.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        width: 76.95px;
-        height: 64px;
-    }
-
-    .button_img_select {
-        background: url('/assets/images/homepage/communtity/homeselect.png') no-repeat;
-        background-size: 100% 100%;
-    }
-
-
-}
-
-.gis-button2 {
-    position: absolute;
-    left: 48%;
-    bottom: -3%;
-    font-family: YouSheBiaoTiHei;
-    font-size: 12px;
-    color: #ECF7FF;
-    letter-spacing: 0;
-    width: 76.95px;
-    text-align: center;
-    cursor: pointer;
-    z-index: 999;
-
-    .button_img {
-        background: url('/assets/images/homepage/communtity/personbutton.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        width: 76.95px;
-        height: 64px;
-    }
-
-    .button_img_select {
-        background: url('/assets/images/homepage/communtity/personbuttonselect.png');
-    }
-}
-
-.gis-button3 {
-    position: absolute;
-    left: 57%;
-    bottom: -5%;
-    font-family: YouSheBiaoTiHei;
-    font-size: 12px;
-    color: #ECF7FF;
-    letter-spacing: 0;
-    width: 76.95px;
-    text-align: center;
-    cursor: pointer;
-    z-index: 999;
-
-    .button_img {
-        background: url('/assets/images/homepage/communtity/devicebutton.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        width: 76.95px;
-        height: 64px;
-    }
-
-    .button_img_select {
-        background: url('/assets/images/homepage/communtity/devicebuttonselect.png');
-    }
-
-
-}
-
 .fire-gis-infowindow {
     width: 302px;
     height: 420px;

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

@@ -26,13 +26,25 @@ function homePage (props) {
    const [alarmInfo, setAlarmInfo] = useState({})
    const [longitudeLatitude, setLongitudeLatitude] = useState({})
 
+   const [fireDevice, setFireDevice] = useState([])
+   const [fireTrend, setFireTrend] = useState([])
 
-   const { data: emergencyList = {} } = useFsRequest({ url: 'water/emergency' });
+
-   const endEvent = () => {
+   useEffect(() => {
-      dispatch(actions.firecontrol.modifyFireAlarm(
+      getFireData();
-         alarmInfo?.alarmInfo?.id, { state: 2 }
+   }, [])
-      )).then(res => {
+
-         setTab('overview')
+   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)
+         }
       })
    }
 
@@ -56,10 +68,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>
                      </>
                      :
@@ -77,7 +89,6 @@ function homePage (props) {
                   emergencyList={emergencyList}
                   dispatch={dispatch}
                   actions={actions}
-                  setLongitudeLatitude={setLongitudeLatitude}
                   propTab={tab}
                   alarmOk={(info) => {
                      setTab('item')

super-screen/client/src/sections/water-prevention/actions/waterconservancy.js

@@ -81,3 +81,13 @@ export function getWaterAlarms(query) {
         msg: { error: '获取告警失败' },
     });
 }
+
+export function getPumpStatus(structId) {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_PUMP_STATUS',
+        url: `${ApiTable.getPumpStatus.replace('{structId}', structId)}`,
+        msg: { error: '获取水泵状态失败' },
+    });
+}

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

@@ -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={"建设数据"} >

super-screen/client/src/sections/water-prevention/constants/water.js

@@ -1,22 +1,22 @@
 export const SHUI_ZHAN = [
     { name: '莲塘渡槽', location: [115.95219, 28.5429711], },
-    { name: '雄溪站', location: [115.908888, 28.5337351], structId: 2945 },
+    { name: '雄溪站', location: [115.908888, 28.5337351], },
     { name: '塔田站', location: [115.916979, 28.5319411], },
     { name: '万寿湖站', location: [115.929167, 28.5222881], },
     { name: '张坊站', location: [115.9092, 28.5049421], },
-    { name: '东山站', location: [115.887528, 28.4872531], },
+    { name: '东山站', location: [115.887528, 28.4872531], structId: 3592 },
     { name: '河外泵站', location: [115.889888, 28.4856311], },
-    { name: '三山站', location: [115.888521, 28.4726391], },
+    { name: '三山站', location: [115.888521, 28.4726391], structId: 3599 },
     { name: '内湖电排站', location: [115.891311, 28.4692441], },
     { name: '沥山站', location: [115.897692, 28.5616881], },
     { name: '象湖站', location: [115.894774, 28.5789311], },
     { name: '姚塘站', location: [115.863709, 28.579954], },
     { name: '河下站', location: [115.844769, 28.5602231], },
     { name: '霞山站', location: [115.841465, 28.5508371], },
-    { name: '石岐站', location: [115.838675, 28.5507611], },
+    { name: '石岐站', location: [115.838675, 28.5507611], structId: 3598 },
     { name: '清湖站', location: [115.838418, 28.5378311], },
     { name: '虎山站', location: [115.843673, 28.5366861], },
-    { name: '新八月湖站', location: [115.880322, 28.6076911], },
+    { name: '新八月湖站', location: [115.880322, 28.6076911], structId: 3569 },
     // { name: '八月湖站', location: [115.868392, 28.6091981], },
     { name: '河口电排站', location: [115.924659, 28.52865] },
 ]

super-screen/client/src/sections/water-prevention/containers/gis.js

@@ -17,7 +17,7 @@ const MARKER_IMG_NAME = {
     markeryellow: '廉租房',
 }
 function Map(props) {
-    const { trendData, waterLevelAlarms, emergencyList } = props;
+    const { trendData, waterLevelAlarms, emergencyList, getPumpStatusData } = props;
     const [delay, setDelay] = useState(true)
     const [tab, setTab] = useState('overview')
 
@@ -128,10 +128,17 @@ function Map(props) {
                 offset: new AMap.Pixel(153, 260)
             });
 
-            marker.on('click', () => {
+            marker.on('click', async () => {
                 let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
                 infowindow.open(map, position);
-                map.setCenter(position)
+                map.setCenter(position);
+                let pumpStatus = [];
+                if (x.structId) {
+                    const res = await getPumpStatusData(x.structId);
+                    if (res?.payload?.data?.stations) {
+                        pumpStatus = res.payload.data.stations;
+                    }
+                }
                 setTimeout(() => {
                     if (document.getElementById(`contentid${x.name}`)) {
                         render(<div>
@@ -145,20 +152,14 @@ function Map(props) {
                                 <span className='gis_title'>泵站名称：</span>
                                 <span className='gis_text'>{x.name}</span>
                             </div>
-                            <div className='gis_item'>
+                            <div className='gis_item_box'>
-                                <span className='gis_title'>1#提升泵：</span>
+                                {
-                                <div className='gis_text_on'>
+                                    pumpStatus?.map(s => <div className='gis_item' key={s.id}>
-                                </div>
+                                        <span className='gis_title'>{s.name}：</span>
-                            </div>
+                                        <div className={[2, 4, 6].includes(s.data[0]?.sMotor_State) ? 'gis_text_on' : 'gis_text_off'}>
-                            <div className='gis_item'>
-                                <span className='gis_title'>2#提升泵：</span>
-                                <div className='gis_text_on'>
-                                </div>
-                            </div>
-                            <div className='gis_item'>
-                                <span className='gis_title'>3#提升泵：</span>
-                                <div className='gis_text_off'>
                                         </div>
+                                    </div>)
+                                }
                             </div>
                         </div>,
                             document.getElementById(`contentid${x.name}`));

super-screen/client/src/sections/water-prevention/containers/gis.less

@@ -28,7 +28,7 @@
 .gis-bottom {
     position: absolute;
     left: 0;
-    bottom: 0;
+    bottom: -1px;
     height: 10%;
     width: 100%;
     background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
@@ -97,7 +97,6 @@
     background: url('/assets/images/homepage/water/waterinfowindow.png') no-repeat;
     background-size: 100% 100%;
     opacity: 0.8;
-    padding-left: 69px;
     padding-left: 22px;
     padding-top: 197px;
     color: #fff;
@@ -113,6 +112,41 @@
         background-size: 100% 100%;
     }
 
+    .gis_item_box {
+        height: 105px;
+        width: 93%;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    /* 滚动条整体 */
+    .gis_item_box::-webkit-scrollbar {
+        height: 10px;
+        width: 10px;
+    }
+
+    /* 两个滚动条交接处 -- x轴和y轴 */
+    .gis_item_box::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+
+    /* 滚动条滑块 */
+    .gis_item_box::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        background: #053676;
+    }
+
+    /* 滚动条轨道 */
+    .gis_item_box::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        border-radius: 5px;
+        background: #ededed;
+    }
+
+    /* 滚动条两端按钮 */
+    .gis_item_box::-webkit-scrollbar-button {}
+
     .gis_item {
         height: 35px;
         background-image: linear-gradient(180deg, #0555a791 0%, #022a6f91 100%);

super-screen/client/src/sections/water-prevention/containers/homePage.js

@@ -20,7 +20,8 @@ function homePage(props) {
     const { dispatch, actions } = props;
     const {
         waterLogin, getWaterLevelTrend, getWaterStructures, getWaterVideoList, getYsAccessToken, getWaterAlarms,
-        worksafetyLogin, getEmerOrgList, getEmerTeamList, getEmerExpertList, getEmerMedicalList, getEmerRefugeList
+        worksafetyLogin, getEmerOrgList, getEmerTeamList, getEmerExpertList, getEmerMedicalList, getEmerRefugeList,
+        getPumpStatus,
     } = actions.waterprevention;
     const childStyle = { height: '49%', color: '#fff', marginBottom: 17 }
     const cardHeight = document.body.clientHeight * 0.896 * 0.32
@@ -139,6 +140,10 @@ function homePage(props) {
         })
     }
 
+    const getPumpStatusData = async (structId) => {
+        return await dispatch(getPumpStatus(structId));
+    }
+
     const getEmerResource = (type, token) => {
         if (type && token) {
             const handleRequestComplete = (res) => {
@@ -200,6 +205,7 @@ function homePage(props) {
                         waterLevelAlarms={waterLevelAlarms}
                         emerResource={emerResource}
                         emergencyList={emergencyList}
+                        getPumpStatusData={getPumpStatusData}
                     />
                 </div>
                 <div className='homepage-left homepage-left-right'>

super-screen/client/src/utils/hooks.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useRequest } from 'ahooks';
 import { Request } from '@peace/utils';
+import { Request as MockRequest } from './webapi';
 
 export const useFsRequest = ({ ...props }) => {
   const {
@@ -23,8 +24,34 @@ export const useFsRequest = ({ ...props }) => {
   });
 };
 
+// 第三方系统 获取数据hook , 第三方系统api用这个，包括apiFox 的mock数据 传入不同method即可
+export const useMockRequest = ({ ...props }) => {
+  const {
+    method = 'get', header, body, query, url, ...rest
+  } = props;
+  return useRequest(() => {
+    if (method === 'post') {
+      return MockRequest.post(url, body || {}, query || {});
+    }
+    if (method === 'put') {
+      return MockRequest.put(url, body || {}, query || {});
+    }
+    if (method === 'mockGet') {
+      return MockRequest.mockGet(url, query || {}, header || {});
+    }
+    if (method === 'mockPost') {
+      return MockRequest.mockPost(url, body || {}, query || {}, header || {});
+    }
+
+    return MockRequest.get(url, query || {});
+  }, {
+    loadingDelay: 500,
+    ...rest,
+  });
+};
 
 
 export default {
   useFsRequest,
+  useMockRequest
 };

super-screen/client/src/utils/index.js

@@ -2,12 +2,14 @@
 import { AuthorizationCode } from './authCode';
 import { ApiTable, RouteTable, } from './webapi'
 import Func from './func';
-import { useFsRequest } from './hooks';
+import { useFsRequest, useMockRequest } from './hooks';
 import { getName, getPhone } from './userDisplayHandle';
 export {
     AuthorizationCode,
     Func,
     ApiTable, RouteTable,
     useFsRequest,
-    getName, getPhone
+    getName,
+    getPhone,
+    useMockRequest
 }

super-screen/client/src/utils/webapi.js

@@ -123,6 +123,8 @@ export const ApiTable = {
    getWaterVideoList: '_water/structures/{struIds}/ipcs?stationIds=undefined',
    getYsAccessToken: '_water/yingshi/accessToken',
    getWaterAlarms: '_water/axy/alarm?userId=1134&orderBy=endTime&orderDirection=desc&limit=10&offset=0',
+   getPumpStatus: 'pumpStatus/{structId}',
+
    //安监
    worksafetyLogin: '_worksafety/project/login',
    getEmerOrgList: '_worksafety/emergency/resource-org-list', // 应急机构
@@ -138,7 +140,11 @@ export const ApiTable = {
 
    //获取摄像头数据
    videoCenterList:'videoCenter/list',
-   details: '/trafficindex/city/details'
+   details: '/trafficindex/city/details',
+
+   getFireDevice: 'fire/device',
+   getFireTrend: 'fire/trend',
+
 };
 
 export const RouteTable = {
@@ -168,6 +174,7 @@ const resultHandler = (resolve, reject) => (err, res) => {
       resolve(res.body);
    }
 };
+
 export const buildRoute = (url) => {
    const user = JSON.parse(sessionStorage.getItem('user'));
    if (user == null) {
@@ -191,5 +198,42 @@ export class RouteRequest {
       new Promise((resolve, reject) => {
          request.delete(buildRoute(url)).query(query).send(data).end(resultHandler(resolve, reject));
       });
+
+   static mockPost = (url, data, query, header) => new Promise((resolve, reject) => {
+      request.post(url).set(header).query(query).send(data)
+         .end(resultHandler(resolve, reject));
+   });
+}
+
+export class Request {
+   static get = (url, query) => new Promise((resolve, reject) => {
+      request.get(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+         .end(resultHandler(resolve, reject));
+   });
+
+   static post = (url, data, query) => new Promise((resolve, reject) => {
+      request.post(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+         .send(data)
+         .end(resultHandler(resolve, reject));
+   });
+
+   static put = (url, data, query) => new Promise((resolve, reject) => {
+      request.put(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+         .send(data)
+         .end(resultHandler(resolve, reject));
+   });
+
+   static delete = (url) => new Promise((resolve, reject) => {
+      request.delete(buildUrl(url)).set(setHeader()).use(noCache).end(resultHandler(resolve, reject));
+   });
+
+   static mockGet = (url, query, header) => new Promise((resolve, reject) => {
+      request.get(url).set(header).query(query).end(resultHandler(resolve, reject));
+   });
+
+   static mockPost = (url, data, query, header) => new Promise((resolve, reject) => {
+      request.post(url).set(header).query(query).send(data)
+         .end(resultHandler(resolve, reject));
+   });
 }