(*) 社区功能提交

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

@@ -1,5 +1,142 @@
 'use strict';
 
+function getPersonAge(opts) {
+    return async function (ctx, next) {
+
+        const models = ctx.fs.dc.models;
+        let errMsg = { message: '获取租户年龄分布失败' }
+        try {
+            let age17 = 0, age18 = 0, age29 = 0, age41 = 0, age66 = 0, age85 = 0
+            // 17岁以下 18-28岁 29-40岁 41-65岁  66-85岁 85岁以上
+            age17 = await models.AffordableHousing.count({ where: { houseStatus: false, personAge: { $lte: 17 } } });
+            age18 = await models.AffordableHousing.count({ where: { houseStatus: false, personAge: { $between: [18, 28] } } });
+            age29 = await models.AffordableHousing.count({ where: { houseStatus: false, personAge: { $between: [29, 40] } } });
+            age41 = await models.AffordableHousing.count({ where: { houseStatus: false, personAge: { $between: [41, 65] } } });
+            age66 = await models.AffordableHousing.count({ where: { houseStatus: false, personAge: { $between: [66, 85] } } });
+            age85 = await models.AffordableHousing.count({ where: { houseStatus: false, personAge: { $gte: 86 } } });
+
+            ctx.status = 200;
+            ctx.body = {
+                age17, age18, age29, age41, age66, age85
+            };
+        } catch (error) {
+            ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+            ctx.status = 400;
+            ctx.body = errMsg
+        }
+    }
+}
+
+function getHomePerson(opts) {
+    return async function (ctx, next) {
+        const models = ctx.fs.dc.models;
+        let errMsg = { message: '获取租户家庭人口统计失败' }
+        try {
+            const home = await models.AffordableHousing.count({
+                attributes: [
+                    'house_id', // 分组的字段
+                ],
+                group: ['house_id'], // 分组的字段
+                where: {
+                    houseStatus: false
+                }
+            });
+
+            ctx.status = 200;
+            ctx.body = {
+                home
+            };
+        } catch (error) {
+            ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+            ctx.status = 400;
+            ctx.body = errMsg
+        }
+    }
+}
+
+function getHomeInfo(opts) {
+    return async function (ctx, next) {
+        const models = ctx.fs.dc.models;
+        let errMsg = { message: '获取社区房屋统计信息' }
+        try {
+
+            let communitys = await models.AffordableHousing.findAll({
+                attributes: [
+                    'houseCommunity', // 分组的字段
+                ],
+                group: ['houseCommunity'], // 分组的字段
+                where: {
+                    houseStatus: false
+                }
+            });
+
+            let communityInUse = []
+            for (let i = 0; i < communitys.length; i++) {
+                let arr = await models.AffordableHousing.findAll({
+                    attributes: [
+                        'house_id', // 分组的字段
+                    ],
+                    group: ['house_id'], // 分组的字段
+                    where: {
+                        houseStatus: false, 
+                        houseCommunity: communitys[i].houseCommunity
+                    }
+                })
+                communityInUse.push({
+                    "houseCommunity": communitys[i].houseCommunity,
+                    "count": arr.length
+                })
+            }
+
+            //安社区分类-社区空置套数
+            let communityUnUse = await models.AffordableHousing.count({
+                attributes: [
+                    'houseCommunity', // 分组的字段
+                ],
+                group: ['houseCommunity'], // 分组的字段
+                where: {
+                    houseStatus: true
+                }
+            });
+
+            //租赁套数
+            let inuse = 0;
+            let useHomes = await models.AffordableHousing.count({
+                attributes: [
+                    'house_id', // 分组的字段
+                ],
+                group: ['house_id'], // 分组的字段
+                where: {
+                    houseStatus: false
+                }
+            });
+            inuse = useHomes.length;
+
+            //空置套数
+            const unuse = await models.AffordableHousing.count({
+                where: {
+                    houseStatus: true
+                }
+            });
+
+            ctx.status = 200;
+            ctx.body = {
+                inuse: inuse, //租赁中套数
+                unuse: unuse, //空置套数
+                communityInUse,
+                communityUnUse
+            };
+        } catch (error) {
+            ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+            ctx.status = 400;
+            ctx.body = errMsg
+        }
+    }
+}
+
 module.exports = {
-   
-}
+    getPersonAge,
+    getHomePerson,
+    getHomeInfo
+}
+

api/app/lib/middlewares/authenticator.js

@@ -13,13 +13,13 @@ class ExcludesUrls {
       this.reload(opts);
    }
 
-   sanitizePath (path) {
+   sanitizePath(path) {
       if (!path) return '/';
       const p = '/' + path.replace(/^\/+/i, '').replace(/\/+$/, '').replace(/\/{2,}/, '/');
       return p;
    }
 
-   reload (opts) {
+   reload(opts) {
       // load all url
       if (!this.allUrls) {
          this.allUrls = opts;
@@ -37,7 +37,7 @@ class ExcludesUrls {
       }
    }
 
-   isExcluded (path, method) {
+   isExcluded(path, method) {
       return this.allUrls.some(function (url) {
          return !url.auth
             && url.pregexp.test(path)
@@ -70,7 +70,10 @@ let isPathExcluded = function (opts, path, method) {
       excludeOpts.push({ p: '/fire/device', o: 'GET' });
       excludeOpts.push({ p: '/fire/trend', o: 'GET' });
       excludeOpts.push({ p: '/pumpStatus/:structId', o: 'GET' });
-
+      excludeOpts.push({ p: '/person/age', o: 'GET' });
+      excludeOpts.push({ p: '/home/person', o: 'GET' });
+      excludeOpts.push({ p: '/community/info', o: 'GET' });
+     
       excludes = new ExcludesUrls(excludeOpts);
    }
    let excluded = excludeAll || excludes.isExcluded(path, method);
@@ -122,8 +125,8 @@ let isResourceAvailable = function (resources, options) {
    return !authCode || (resources || []).some(code => code === authCode);
 };
 
-function factory (app, opts) {
-   return async function auth (ctx, next) {
+function factory(app, opts) {
+   return async function auth(ctx, next) {
       const { path, method, header, query } = ctx;
       ctx.fs.logger.log('[AUTH] start', path, method);
       ctx.fs.api = ctx.fs.api || {};

api/app/lib/models/affordable_housing.js

@@ -0,0 +1,151 @@
+/* eslint-disable*/
+
+'use strict';
+
+module.exports = dc => {
+  const DataTypes = dc.ORM;
+  const sequelize = dc.orm;
+  const AffordableHousing = sequelize.define("affordableHousing", {
+    id: {
+      type: DataTypes.INTEGER,
+      allowNull: false,
+      defaultValue: null,
+      comment: "序号",
+      primaryKey: true,
+      field: "id",
+      autoIncrement: true
+    },
+    houseCommunity: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      defaultValue: null,
+      comment: "小区名称",
+      primaryKey: false,
+      field: "house_community",
+      autoIncrement: false
+    },
+    houseBuildingNumber: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "栋号",
+      primaryKey: false,
+      field: "house_building_number",
+      autoIncrement: false
+    },
+    houseUnit: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "单元",
+      primaryKey: false,
+      field: "house_unit",
+      autoIncrement: false
+    },
+    houseNumber: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "房号",
+      primaryKey: false,
+      field: "house_number",
+      autoIncrement: false
+    },
+    houseArea: {
+      type: DataTypes.DOUBLE,
+      allowNull: true,
+      defaultValue: null,
+      comment: "面积",
+      primaryKey: false,
+      field: "house_area",
+      autoIncrement: false
+    },
+    houseStatus: {
+      type: DataTypes.BOOLEAN,
+      allowNull: true,
+      defaultValue: null,
+      comment: "房源状态(是否空置)",
+      primaryKey: false,
+      field: "house_status",
+      autoIncrement: false
+    },
+    personName: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "租户姓名",
+      primaryKey: false,
+      field: "person_name",
+      autoIncrement: false
+    },
+    personStatus: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "租户身份",
+      primaryKey: false,
+      field: "person_status",
+      autoIncrement: false
+    },
+    personId: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "租户身份证号",
+      primaryKey: false,
+      field: "person_id",
+      autoIncrement: false
+    },
+    personAge: {
+      type: DataTypes.INTEGER,
+      allowNull: true,
+      defaultValue: null,
+      comment: "租户年龄",
+      primaryKey: false,
+      field: "person_age",
+      autoIncrement: false
+    },
+    personTownship: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "租户乡镇",
+      primaryKey: false,
+      field: "person_township",
+      autoIncrement: false
+    },
+    personCommunity: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "租户社区",
+      primaryKey: false,
+      field: "person_community",
+      autoIncrement: false
+    },
+    partOfCity: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "城市区域(东南西北)",
+      primaryKey: false,
+      field: "part_of_city",
+      autoIncrement: false
+    },
+    houseId: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "房屋唯一标识",
+      primaryKey: false,
+      field: "house_id",
+      autoIncrement: false
+    }
+  }, {
+    tableName: "affordable_housing",
+    comment: "",
+    indexes: []
+  });
+  dc.models.AffordableHousing = AffordableHousing;
+  return AffordableHousing;
+};

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const community = require('../../controllers/superScreen/community');
+
+module.exports = function (app, router, opts, AuthCode) {
+
+    //获取租户家庭人口统计
+    app.fs.api.logAttr['GET/home/person'] = { content: '获取租户家庭人口统计', visible: true };
+    router.get('/home/person', community.getHomePerson(opts));
+
+    //获取租户年龄分布
+    app.fs.api.logAttr['GET/person/age'] = { content: '获取租户年龄分布', visible: true };
+    router.get('/person/age', community.getPersonAge(opts));
+
+    //获取社区房屋统计信息
+    app.fs.api.logAttr['GET/community/info'] = { content: '获取社区房屋统计信息', visible: true };
+    router.get('/community/info', community.getHomeInfo(opts));
+
+};

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

@@ -1,10 +1,8 @@
 import React from 'react'
 import { Box } from '$components';
+import { communtity_data } from '../constants/index'
 
-
-function BasicInfo() {
-
-
+function BasicInfo({ communtityInfo }) {
 
     return <Box title={"基本信息"} >
         <div className='_basic_info'>
@@ -18,12 +16,12 @@ function BasicInfo() {
 
                     <div className='_basic_text'>
                         <span>区域面积：</span>
-                        <span className='_text_number_color'>1742.3km³</span>
+                        <span className='_text_number_color'>1810.7km³</span>
                     </div>
 
                     <div className='_basic_text'>
                         <span>人口：</span>
-                        <span className='_text_number_color'>14.43万</span>
+                        <span className='_text_number_color'>123.9万<span style={{ color: '#C3E6FF' }}>【2022年】</span></span>
                     </div>
                 </div>
             </div>
@@ -31,12 +29,12 @@ function BasicInfo() {
             <div className='_basic_row2'>
                 <div className='_item1'>
                     <span>社区数量</span>
-                    <span className='_number'>53个</span>
+                    <span className='_number'>{communtity_data?.length}个</span>
                 </div>
                 <div className='basicinterval' />
                 <div className='_item2'>
                     <span>房屋数量</span>
-                    <span className='_number'>630座</span>
+                    <span className='_number'>{communtityInfo ? (communtityInfo?.inuse + communtityInfo?.unuse) : '-'}套</span>
                 </div>
             </div>
         </div>

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

@@ -6,7 +6,7 @@ import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 import './style.less';
 
-function ThreeDBarChart() {
+function ThreeDBarChart({ data }) {
     const offsetX = 12;  //bar宽
     const offsetY = 6;   //倾斜角度
     // 绘制左侧面
@@ -61,7 +61,7 @@ function ThreeDBarChart() {
     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 seriesData = data
     let colorArr = [["#42D5F8"], ["#2086B0", "rgba(13,8,16,0)"], ["#3394D7", "rgba(14,185,151,0)"]]
     const option = {
         tooltip: {

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

@@ -1,12 +1,19 @@
 import React from 'react'
 import { Box } from '$components';
 import ThreeDBarChart from './charts/bar';
-
+import { useFsRequest } from '$utils';
 function PopulationDynamics() {
 
-
+    const { data: homes = {} } = useFsRequest({ url: 'home/person' });
+    const data = [
+        homes?.home?.filter(s => parseInt(s.count) == 1)?.length || 0,
+        homes?.home?.filter(s => parseInt(s.count) == 2)?.length || 0,
+        homes?.home?.filter(s => parseInt(s.count) == 3)?.length || 0,
+        homes?.home?.filter(s => parseInt(s.count) == 4)?.length || 0,
+        homes?.home?.filter(s => parseInt(s.count) > 4)?.length || 0,
+    ]
     return <Box title={"租户家庭人口统计"} >
-        <ThreeDBarChart />
+        <ThreeDBarChart data={data} />
     </Box>
 }
 

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

@@ -2,15 +2,17 @@ import React, { useEffect, useState } from 'react'
 import { Box } from '$components';
 import './style.less';
 import RingChart from './charts/pie';
+import { useFsRequest } from '$utils';
 
 function SpecialPerson(props) {
+    const { data: personAage = {} } = useFsRequest({ url: 'person/age' });
     const data = [
-        { name: '17岁以下', value: 2312 },
-        { name: '18-28岁', value: 123 },
-        { name: '29-40岁', value: 432 },
-        { name: '41-65岁', value: 42 },
-        { name: '66-85岁', value: 41},
-        { name: '85岁以上', value: 43 }
+        { name: '17岁以下', value: personAage?.age17 || 0 },
+        { name: '18-28岁', value: personAage?.age18 || 0 },
+        { name: '29-40岁', value: personAage?.age29 || 0 },
+        { name: '41-65岁', value: personAage?.age41 || 0 },
+        { name: '66-85岁', value: personAage?.age66 || 0 },
+        { name: '85岁以上', value: personAage?.age85 || 0 }
     ]
 
     return <Box title={"租户年龄分布"}>

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

@@ -289,6 +289,7 @@
 //小区人流量排名
 ._traffic_ranking {
     height: 100%;
+    padding: 11px;
 
     ._rank_title {
         height: 34.64px;
@@ -395,6 +396,7 @@
     overflow: auto;
     // height: 100%;
     padding-top: 20px;
+    padding-left: 12px;
 
     .alarm_handle {
         display: flex;

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

@@ -1,32 +1,26 @@
 import React, { useEffect, useState } from 'react'
 import { Box, AutoRollComponent } from '$components';
 import './style.less';
+import { communtity_data } from '../constants/index'
 
-
-function DataTop5(props) {
-
+function DataTop5({ communtityInfo }) {
     const content = <div className='rank_content_overflow'>
-        {[1, 2, 3, 4, 5, 6, 7, 8].map(s => {
+        {communtity_data.map(s => {
+            let inuse = communtityInfo?.communityInUse?.find(v => v.houseCommunity == s.name)?.count || 0
+            // let unuse = communtityInfo?.communityUnUse?.find(v => v.houseCommunity == s.name)?.count || 0
             return <div className='_rank_content'>
-                <div className={`_rank_item1`}>
-                    <div className={`topbg${s}`}>
-                        <div style={{ marginTop: -9 }}>{s}</div>
-
-                    </div>
-                </div>
-                <div className='_rank_item2'>小区名称{s}</div>
-                <div className='_rank_item3'>{1400 - s}</div>
+                <div className='_rank_item2'>{s?.name}</div>
+                <div className='_rank_item3'>{parseInt(inuse)}</div>
             </div>
         })}
     </div>
 
 
-    return <Box title={"小区人流量排名"} bodyPaddingTop={1} >
+    return <Box title={"租户来源统计"} bodyPaddingTop={1} >
         <div className='_traffic_ranking'>
             <div className='_rank_title'>
-                <div className='_rank_item1'>排名</div>
-                <div className='_rank_item2'>小区名称</div>
-                <div className='_rank_item3'>人流量<span style={{ fontSize: 14 }}>/人次</span></div>
+                <div className='_rank_item2'>社区名称</div>
+                <div className='_rank_item3'>户数<span style={{ fontSize: 14 }}>/户</span></div>
             </div>
 
             <AutoRollComponent canScroll={true} content={content} data={[]} divHeight={200} divId={`community-right-bottom`} />

super-screen/client/src/sections/community-safty/constants/index.js

@@ -0,0 +1,8 @@
+const communtity_data = [
+    { lng: 115.886724, lat: 28.534257, type: 'home', name: '城西幸福庄园', address: '南昌县小蓝经济技术开发区富山三路761号', build: '2013' },
+    { lng: 115.956004, lat: 28.541413, type: 'home', name: '城东幸福庄园', address: '南昌县莲塘镇莲武路529号', build: '2009' },
+    { lng: 115.9335, lat: 28.541146, type: 'home', name: '城南幸福庄园', address: '南昌县莲塘镇莲西路120号', build: '2010' },
+    { lng: 115.91131, lat: 28.525062, type: 'home', name: '小蓝经投公租房', address: '富山五路以南、雄溪路以西', build: '2013' },
+]
+
+export { communtity_data }

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

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { Tooltip } from 'antd';
 import { connect } from 'react-redux';
 import { render } from 'react-dom';
-import { useMockRequest } from '$utils';
+import { useMockRequest, useFsRequest } from '$utils';
+import { communtity_data } from '../constants/index'
+import moment from 'moment';
 import './gis.less'
 const MAPDOMID = 'fs-amap-container';
 let map = null;
@@ -21,6 +23,9 @@ function Map(props) {
         url: 'https://superchangnan.anxinyun.cn/api/xiaofang/devices',
         method: 'mockGet',
     });
+
+    const { data: communtityInfo = {} } = useFsRequest({ url: 'community/info' });
+
     // 地图初始化
     const loadMap = () => {
         // 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
@@ -51,7 +56,7 @@ function Map(props) {
 
         map.on('complete', () => {
             setDelay(false)
-            tab == 'home' && map && renderMarkers()
+            // tab == 'home' && map && renderMarkers()
         });
 
         map.on('click', (e) => {
@@ -99,26 +104,21 @@ function Map(props) {
         map.setRotation(1.7000)
 
 
-        const data = [
-            { lng: 115.886724, lat: 28.534257, type: 'home', name: '城西幸福庄园', kind: 'markergreen' },
-            { lng: 115.956004, lat: 28.541413, type: 'home', name: '城东幸福庄园', kind: 'markerblue' },
-            { lng: 115.9335, lat: 28.541146, type: 'home', name: '城南幸福庄园', kind: 'markeryellow' },
-            { lng: 115.91131, lat: 28.525062, type: 'home', name: '小蓝经投公租房', kind: 'markergreen' },
-        ]
-
+        const data = communtity_data
+        const markers = []
         //下钻点位显示
         data.map((x, index) => {
             var marker = new AMap.Marker({
                 position: new AMap.LngLat(x.lng, x.lat),
                 // 将一张图片的地址设置为 icon
-                icon: '/assets/images/homepage/communtity/markergreen.png',
+                icon: `/assets/images/homepage/communtity/${x.name}.png`,
                 // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
-                offset: new AMap.Pixel(-13, -30),
+                offset: new AMap.Pixel(-69, -70),
                 zooms: [3, 19],
             });
             marker.setTitle(x.name);
             map.add(marker);
-
+            markers.push(marker)
             let infowindow = new AMap.InfoWindow({
                 isCustom: true,  //使用自定义窗体
                 content: `<div id="map-content" class="gis-infowindow">
@@ -131,6 +131,8 @@ function Map(props) {
                 infowindow.open(map, position);
                 map.setCenter(position)
                 setTimeout(() => {
+                    let inuse = communtityInfo?.communityInUse?.find(v => v.houseCommunity == x.name)?.count || 0
+                    let unuse = communtityInfo?.communityUnUse?.find(v => v.houseCommunity == x.name)?.count || 0
                     if (document.getElementById(`contentid${x.name}`)) {
                         render(<div>
                             <div className='gis_exit' onClick={() => {
@@ -138,26 +140,25 @@ function Map(props) {
                                 map.clearInfoWindow();
                             }} />
                             <div className='gis_item'>
-                                <span className='gis_title'>小区名称</span>
-                                <span className='gis_text'>{x.name}</span>
-                            </div>
-                            <div className='gis_item'>
-                                <span className='gis_title'>人流量</span>
-                                <span className='gis_text'>123次</span>
-                                <span className='gis_title' style={{ marginLeft: 20 }}>房龄</span>
-                                <span className='gis_text'>9年</span>
+                                <div className='gis_title'>小区名称:</div>
+                                <div className='gis_text'>{x.name}</div>
                             </div>
+
                             <div className='gis_item'>
-                                <span className='gis_title'>租赁中房屋</span>
-                                <span className='gis_text'>165套</span>
+                                <div className='gis_title'>房龄:</div>
+                                <div className='gis_text'>{moment().diff(moment(x.build), 'years')}年</div>
                             </div>
                             <div className='gis_item'>
-                                <span className='gis_title'>网格员</span>
-                                <span className='gis_text'>张三</span>
+                                <div className='gis_title' style={{ color: '#13D3C9' }}>租赁中:</div>
+                                <div className='gis_text'>
+                                    <span>{inuse}套</span>
+                                    <span style={{ color: '#FAC46E', marginLeft: 22, marginRight: 12 }}>空置：</span>
+                                    <span>{unuse}套</span>
+                                </div>
                             </div>
                             <div className='gis_item'>
-                                <span className='gis_title'>手机号码</span>
-                                <span className='gis_text'>15765845845</span>
+                                <div className='gis_title'>地址:</div>
+                                <div className='gis_text'>{x.address}</div>
                             </div>
                         </div>,
                             document.getElementById(`contentid${x.name}`));
@@ -166,6 +167,18 @@ function Map(props) {
             })
         })
 
+        // map.setFitView(markers, false, [150, 150, 400, 400])
+        // data.map((x, index) => {
+        //     var marker = new AMap.Marker({
+        //         position: new AMap.LngLat(x.lng, x.lat),
+        //         // 将一张图片的地址设置为 icon
+        //         // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+        //         // offset: new AMap.Pixel(-13, -30),
+        //         zooms: [3, 19],
+        //     });
+        //     marker.setTitle(x.name);
+        //     map.add(marker);
+        // })
     }
 
     const renderDevices = () => {
@@ -273,13 +286,13 @@ function Map(props) {
     const renderLeftTop = () => {
         return <div className='home_left'>
             <div className='hometotalbg'>廉租房总数</div>
-            <div className='home_total_number'>455 <span style={{ fontSize: 12 }}>万</span></div>
+            <div className='home_total_number'>{communtityInfo ? (communtityInfo?.inuse + communtityInfo?.unuse) : '-'} </div>
 
             <div className='hqtotal'>租赁中</div>
-            <div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div>
+            <div className='home_total_number'>{communtityInfo ? (communtityInfo?.inuse) : '-'}</div>
 
             <div className='cztotal'>空置</div>
-            <div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div>
+            <div className='home_total_number'>{communtityInfo ? (communtityInfo?.unuse) : '-'}</div>
         </div>
     }
 

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

@@ -118,12 +118,11 @@
 
 .gis-infowindow {
     width: 302px;
-    height: 420px;
+    height: 400px;
     background: url('/assets/images/homepage/communtity/infowindowbg.png') no-repeat;
     background-size: 100% 100%;
-    opacity: 0.8;
-    padding-left: 69px;
-    padding-left: 22px;
+
+    padding-left: 12px;
     padding-top: 157px;
     color: #fff;
 
@@ -139,14 +138,19 @@
     }
 
     .gis_item {
-        height: 35px;
+        padding: 10px;
+        min-height: 45px;
+        padding-bottom: 5px;
         background-image: linear-gradient(180deg, #0555a791 0%, #022a6f91 100%);
+        border-bottom: 1px solid #0D5AB3;
         width: 93%;
         display: flex;
         align-items: center;
         padding-left: 20px;
 
         .gis_title {
+            width: 80px;
+            text-align: right;
             font-family: SourceHanSansCN-Regular;
             font-weight: 400;
             font-size: 14px;
@@ -156,6 +160,7 @@
         }
 
         .gis_text {
+            width: 150px;
             font-family: SourceHanSansCN-Regular;
             font-weight: 400;
             font-size: 14px;
@@ -171,7 +176,6 @@
     height: 420px;
     background: url('/assets/images/homepage/communtity/personinfowindow.png') no-repeat;
     background-size: 100% 100%;
-    opacity: 0.8;
     padding-left: 69px;
     padding-left: 22px;
     padding-top: 157px;
@@ -537,7 +541,6 @@
     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;

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

@@ -7,7 +7,7 @@ import RightTop from '../components/infrastructure'
 import RightBottom from '../components/city-safty'
 import RightMiddle from '../components/special-person'
 import LeftBottom from '../components/traffic-ranking'
-import Gis from './gis';
+import { useFsRequest } from '$utils';
 import Weather from '../../water-prevention/components/weather';
 import { FullScreenContainer } from '$components'
 import './style.less'
@@ -19,6 +19,8 @@ function homePage(props) {
     const cardHeight = document.body.clientHeight * 0.896 * 0.32
     const cardContentHeight = cardHeight - 42 - 13
     const [waterLevelAlarms, setWaterLevelAlarms] = useState([]);
+
+    const { data: communtityInfo = {} } = useFsRequest({ url: 'community/info' });
     useEffect(() => {
         getData();
     }, [])
@@ -68,13 +70,13 @@ function homePage(props) {
                 <div className='homepage-left homepage-left-left'>
                     <div className="list">
                         <div className='child' style={childStyle}>
-                            <LeftTop />
+                            <LeftTop communtityInfo={communtityInfo} />
                         </div>
                         <div className='child' style={childStyle}>
                             <LeftMiddle />
                         </div>
                         <div className='child' style={childStyle}>
-                            <LeftBottom cardContentHeight={cardContentHeight} />
+                            <LeftBottom cardContentHeight={cardContentHeight} communtityInfo={communtityInfo} />
                         </div>
                     </div>
                 </div>

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

@@ -39,7 +39,6 @@
     height: 420px;
     background: url('/assets/images/homepage/communtity/infowindowbg.png') no-repeat;
     background-size: 100% 100%;
-    opacity: 0.8;
     padding-left: 69px;
     padding-left: 22px;
     padding-top: 127px;

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

@@ -96,7 +96,6 @@
     height: 376px;
     background: url('/assets/images/homepage/water/waterinfowindow.png') no-repeat;
     background-size: 100% 100%;
-    opacity: 0.8;
     padding-left: 22px;
     padding-top: 197px;
     color: #fff;
@@ -185,7 +184,6 @@
     height: 420px;
     background: url('/assets/images/homepage/communtity/personinfowindow.png') no-repeat;
     background-size: 100% 100%;
-    opacity: 0.8;
     padding-left: 69px;
     padding-left: 22px;
     padding-top: 157px;