项目集大屏

api/app/lib/routes/project/index.js

@@ -43,9 +43,6 @@ module.exports = function (app, router, opts) {
    app.fs.api.logAttr['GET/project/group/statistic'] = { content: '获取项目分组统计信息', visible: true };
    router.get('/project/group/statistic', projectGroup.groupStatistic);
 
-   app.fs.api.logAttr['GET/project/group/statistic'] = { content: '获取项目分组统计信息', visible: true };
-   router.get('/project/group/statistic', projectGroup.groupStatistic);
-
    app.fs.api.logAttr['GET/project/group/statistic/online'] = { content: '获取项目分组在线率统计信息', visible: true };
    router.get('/project/group/statistic/online', projectGroup.groupStatisticOnline);
 };

web/client/src/sections/projectGroup/actions/group.js

@@ -32,4 +32,15 @@ export function delProjectGroup (id) {
       url: `${ApiTable.projectGroup}?groupId=${id}`,
       msg: { option: "删除项目分组" },
    });
+}
+
+export function groupStatistic () {
+   return (dispatch) => basicAction({
+      type: "get",
+      dispatch: dispatch,
+      actionType: "GET_GROPUP_STATISTICS",
+      url: `${ApiTable.groupStatistic}`,
+      msg: { error: "获取项目分组统计信息失败" },
+      reducer: { name: "groupStatistic", params: { noClear: true } },
+   });
 }

web/client/src/sections/projectGroup/components/header.jsx

@@ -110,6 +110,14 @@ const Header = (props) => {
                   {weatherMap[weatherRealtime?.skycon]}
                </span>
             </div>
+            <div style={lineBetweenStyle} />
+            <div style={{
+               display: "flex", alignItems: 'center', justifyContent: "space-around", width: 90,
+               color: 'color: #5A6685'
+            }}>
+               <img src="/assets/images/projectGroup/backend.png" style={{ width: 14, height: 14 }} alt="" />
+               返回后台
+            </div>
          </span>
       </div>
    )

web/client/src/sections/projectGroup/containers/bigscreen.jsx

@@ -5,7 +5,13 @@ import Body from '../components/body'
 import Card from '../components/card'
 import '../style.less'
 
-const Bigscreen = (props) => {
+const Bigscreen = ({ dispatch, actions, user, history, clientHeight }) => {
+   
+   useEffect(() => {
+      let projectGroupId = localStorage.getItem('project_group_id')
+      console.log(projectGroupId);
+   })
+
 
    return (
       <div className='project-group'>
@@ -24,6 +30,7 @@ function mapStateToProps (state) {
    return {
       user: auth.user,
       actions: global.actions,
+      clientHeight: global.clientHeight,
    };
 }
 

web/client/src/sections/projectGroup/containers/index.js

@@ -1,4 +1,5 @@
 'use strict';
 import Statistic from './statistic'
+import Bigscreen from './bigscreen'
 
-export { Statistic };
+export { Statistic ,Bigscreen};

web/client/src/sections/projectGroup/containers/statistic.jsx

@@ -1,19 +1,133 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
+import { Skeleton, Button, Pagination, Form, Popconfirm, Table, Tooltip } from '@douyinfe/semi-ui';
+import { SkeletonScreen, } from "$components";
 import Header from '../components/header';
 import Body from '../components/body'
 import Card from '../components/card'
 import '../style.less'
 
 
-const Statistic = (props) => {
+const Statistic = ({ dispatch, actions, user, history, loading, groupStatistic, clientHeight }) => {
+   const { projectGroup } = actions;
+
+   const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
+
+   useEffect(() => {
+      dispatch(projectGroup.groupStatistic())
+
+   }, [])
+
+
+   let columns = [
+      {
+         title: '项目集名称',
+         dataIndex: "name",
+         key: 'name',
+         width: "30%",
+         render: (text, row) => <div style={{ cursor: 'pointer' }} onClick={() => {
+            localStorage.setItem('project_group_id', row.id)
+            history.push({
+               pathname: `/projectGroup/bigscreen`,
+            })
+         }}>{text}</div>
+      }, {
+         title: '项目集类型',
+         dataIndex: "name",
+         key: 'name',
+         render: (_, row) => '--'
+      }, {
+         title: '项目个数',
+         dataIndex: "pomsProjectIds",
+         key: 'pomsProjectIds',
+         render: (_, row) => row?.pomsProjectIds?.length || 0
+      }, {
+         title: '结构物数量',
+         dataIndex: "strucCount",
+         key: 'strucCount',
+      }, {
+         title: '流转工单数',
+         dataIndex: "name",
+         key: 'name',
+         render: (_, row) => Math.floor(Math.random() * 10)
+      }, {
+         title: '中断时长',
+         dataIndex: "maxOffLineTime",
+         key: 'maxOffLineTime',
+      }, {
+         title: '今日告警个数',
+         dataIndex: "name",
+         key: 'name',
+         render: (_, row) => Math.floor(Math.random() * 20)
+      }
+   ]
+
+   const handleRow = (record, index) => {
+      return {
+         style: {
+            background: 'linear-gradient(180deg, #f1f7ff00 0%, #DEEBFF 100%)',
+         },
+      };
+
+   };
+
+
 
    return (
       <div className='project-group'>
          <Header />
          <Body>
-            <Card title="12312312">
+            <Card title="重点项目集">
-               123
+               <div style={{
+                  marginTop: 10, height: clientHeight - 140,
+                  display: 'flex', flexDirection: 'column', justifyContent: "space-between"
+               }}>
+                  <Skeleton
+                     loading={loading}
+                     // loading={false}
+                     active={true}
+                     placeholder={SkeletonScreen()}
+                  >
+                     <Table
+                        rowKey="name"
+                        scroll={{ y: clientHeight - 245 }}
+                        columns={columns}
+                        dataSource={groupStatistic}
+                        bordered={false}
+                        hideExpandedColumn={false}
+                        empty="暂无数据"
+                        // expandedRowRender={expandRowRender}
+                        pagination={false}
+                        onRow={handleRow}
+                     />
+                  </Skeleton>
+                  <div
+                     style={{
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        padding: "20px 20px",
+                     }}
+                  >
+
+                     <div style={{ display: 'flex', }}>
+                        <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
+                           共{groupStatistic?.length || 0}条信息
+                        </span>
+                        <Pagination
+                           className=""
+                           total={groupStatistic?.length || 0}
+                           showSizeChanger
+                           currentPage={query.page + 1}
+                           pageSizeOpts={[10, 20, 30, 40]}
+                           onChange={(currentPage, pageSize) => {
+                              setQuery({ limit: pageSize, page: currentPage - 1 });
+                              // page.current = currentPage - 1
+                              // setChange(!change)
+                           }}
+                        />
+                     </div>
+                  </div>
+               </div>
             </Card>
          </Body>
       </div>
@@ -21,10 +135,13 @@ const Statistic = (props) => {
 }
 
 function mapStateToProps (state) {
-   const { auth, global, } = state;
+   const { auth, global, groupStatistic } = state;
    return {
+      clientHeight: global.clientHeight,
       user: auth.user,
       actions: global.actions,
+      groupStatistic: groupStatistic?.data || [],
+      loading: groupStatistic.isRequesting,
    };
 }
 

web/client/src/sections/projectGroup/routes.js

@@ -1,4 +1,4 @@
-import { Statistic } from './containers';
+import { Statistic, Bigscreen } from './containers';
 
 export default [{
    type: 'outer',
@@ -8,4 +8,13 @@ export default [{
       breadcrumb: '项目集',
       component: Statistic,
    }
-}];
+}, {
+   type: 'outer',
+   route: {
+      path: '/projectGroup/bigscreen',
+      key: 'bigscreen',
+      breadcrumb: '数据大屏 ',
+      component: Bigscreen,
+   }
+}
+];

web/client/src/utils/webapi.js

@@ -38,6 +38,7 @@ export const ApiTable = {
 
    //项目分组
    projectGroup: 'project/group',
+   groupStatistic:'project/group/statistic',
 
    //告警
    getProjectPoms: 'project/poms',    //获取已绑定项目