Browse Source

开发修改

zhaojijng 3 years ago
parent
commit
e3f19c4bcf

+ 465 - 175
mock/environment.ts

@@ -8,73 +8,21 @@ export default {
       data: [
         {
           left: 0,
-          top: 0,
-          width: 500,
-          height: 400,
-          value: 20,
-          name: '董事办公室',
-          type: 'office',
-          lamp: 'all', //灯的不同状态会显示 不同的颜色
-          air: 'part',
-          curtain: 'part',
-          //device 到时候需要生成
-          //当前设备的状态status :all全部开启 part部分开启 close全都关闭
-          //还有设备类型type :包括air lamp curtain
-          device: [
-            { type: 'lamp', status: 'close' },
-            { type: 'air', status: 'part' },
-            { type: 'curtain', status: 'all' },
-          ],
-          timeList: ['08:00-16:00', '08:00-16:00'],
-          //normalRun: 22, overtimeWork: 22,  overtimeBook: 22,
-          runTimeStatus: 'normalRun',
-        },
-        {
-          left: 500,
-          top: 0,
-          width: 500,
-          height: 400,
-          value: 25,
-          name: '休息区',
-          type: 'rest',
-          lamp: 'part',
-          air: 'close',
-          curtain: 'close',
-          device: [
-            { type: 'lamp', status: 'close' },
-            { type: 'air', status: 'close' },
-          ],
-          runTimeStatus: 'overtimeWork',
-        },
-        {
-          left: 1000,
-          top: 0,
-          width: 500,
-          height: 400,
-          value: 28,
-          name: '会议室',
-          type: 'meeting',
-          lamp: 'close',
-          device: [
-            { type: 'lamp', status: 'all' },
-            { type: 'air', status: 'part' },
-            { type: 'curtain', status: 'part' },
-          ],
-          runTimeStatus: 'overtimeBook',
-        },
-        {
-          left: 0,
           top: 400,
           width: 500,
           height: 400,
-          value: 16,
-          name: '第一办公区',
-          type: 'work',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '第一办公区',
+          roomFuncType: 'work',
           lamp: 'all',
           curtain: 'all',
+          air: 'all',
           device: [
             { type: 'lamp', status: 'all' },
-
             { type: 'curtain', status: 'all' },
           ],
         },
@@ -83,11 +31,16 @@ export default {
           top: 400,
           width: 500,
           height: 400,
-          value: 20,
-          name: '收发室',
-          type: 'letter',
-          air: 'close',
-          curtain: 'part',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '收发室',
+          roomFuncType: 'letter',
+          air: 'all',
+          curtain: 'all',
+          lamp: 'all',
           device: [{ type: 'lamp', status: 'all' }],
         },
         {
@@ -95,12 +48,16 @@ export default {
           top: 400,
           width: 500,
           height: 400,
-          value: 23,
-          name: '走廊',
-          type: 'walk',
-          lamp: 'close',
-          air: 'part',
-          curtain: 'close',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '走廊',
+          roomFuncType: 'walk',
+          lamp: 'all',
+          air: 'all',
+          curtain: 'all',
           device: [
             { type: 'lamp', status: 'part' },
             { type: 'air', status: 'close' },
@@ -112,12 +69,16 @@ export default {
           top: 800,
           width: 500,
           height: 400,
-          value: 16,
-          name: '第一办公区',
-          type: 'work',
-          lamp: 'close',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '第一办公区',
+          roomFuncType: 'work',
+          lamp: 'all',
           air: 'all',
-          curtain: 'part',
+          curtain: 'all',
           device: [
             { type: 'lamp', status: 'close' },
             { type: 'air', status: 'close' },
@@ -129,11 +90,14 @@ export default {
           top: 800,
           width: 500,
           height: 400,
-          value: 20,
-          name: '收发室',
-          type: 'letter',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '收发室',
+          roomFuncType: 'letter',
           lamp: 'all',
-
           curtain: 'all',
           device: [
             { type: 'lamp', status: 'part' },
@@ -146,9 +110,13 @@ export default {
           top: 800,
           width: 500,
           height: 400,
-          value: 23,
-          name: '走廊',
-          type: 'walk',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '走廊',
+          roomFuncType: 'walk',
           device: [],
           lamp: 'all',
           air: 'all',
@@ -159,12 +127,16 @@ export default {
           top: 0,
           width: 500,
           height: 400,
-          value: 20,
-          name: '董事办公室',
-          type: 'office',
-          lamp: 'close',
-          air: 'part',
-          curtain: 'close',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '董事办公室',
+          roomFuncType: 'office',
+          lamp: 'all',
+          air: 'all',
+          curtain: 'all',
           device: [{ type: 'curtain', status: 'all' }],
         },
         {
@@ -172,12 +144,16 @@ export default {
           top: 0,
           width: 500,
           height: 400,
-          value: 25,
-          name: '休息区',
-          type: 'rest',
-          lamp: 'part',
-          air: 'part',
-          curtain: 'part',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '休息区',
+          roomFuncType: 'rest',
+          lamp: 'all',
+          air: 'all',
+          curtain: 'all',
           device: [
             { type: 'lamp', status: 'all' },
             { type: 'air', status: 'all' },
@@ -189,9 +165,13 @@ export default {
           top: 0,
           width: 500,
           height: 400,
-          value: 28,
-          name: '会议室',
-          type: 'meeting',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '会议室',
+          roomFuncType: 'meeting',
 
           curtain: 'all',
           device: [
@@ -205,9 +185,13 @@ export default {
           top: 400,
           width: 500,
           height: 400,
-          value: 16,
-          name: '第一办公区',
-          type: 'work',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '第一办公区',
+          roomFuncType: 'work',
           lamp: 'all',
           air: 'all',
           device: [
@@ -221,10 +205,14 @@ export default {
           top: 400,
           width: 500,
           height: 400,
-          value: 20,
-          name: '收发室',
-          type: 'letter',
-          lamp: 'close',
+          Tdb: 27,
+          RH: 27,
+          CO2: 27,
+          PM2d5: 27,
+          HCHO: 27,
+          localName: '收发室',
+          roomFuncType: 'letter',
+          lamp: 'all',
           curtain: 'all',
           device: [
             { type: 'lamp', status: 'close' },
@@ -232,75 +220,377 @@ export default {
             { type: 'curtain', status: 'part' },
           ],
         },
-        {
-          left: 2500,
-          top: 400,
-          width: 500,
-          height: 400,
-          value: 23,
-          name: '走廊',
-          type: 'walk',
-          lamp: 'all',
-          air: 'part',
-          curtain: 'all',
-          device: [
-            { type: 'lamp', status: 'part' },
-            { type: 'air', status: 'close' },
-            { type: 'curtain', status: 'all' },
-          ],
-        },
-        {
-          left: 1500,
-          top: 800,
-          width: 500,
-          height: 400,
-          value: 16,
-          name: '第一办公区',
-          type: 'work',
-          device: [{ type: 'curtain', status: 'all' }],
-        },
-        {
-          left: 2000,
-          top: 800,
-          width: 500,
-          height: 400,
-          value: 20,
-          name: '收发室',
-          type: 'letter',
-          device: [
-            { type: 'lamp', status: 'all' },
-            { type: 'air', status: 'all' },
-            { type: 'curtain', status: 'all' },
-          ],
-        },
-        {
-          left: 2500,
-          top: 800,
-          width: 500,
-          height: 400,
-          value: 23,
-          name: '走廊',
-          type: 'walk',
-          lamp: 'part',
-          air: 'part',
-          curtain: 'all',
-          device: [
-            { type: 'lamp', status: 'all' },
-            { type: 'air', status: 'all' },
-            { type: 'curtain', status: 'all' },
-          ],
-        },
       ],
+      //   data: [
+      //     {
+      //       left: 0,
+      //       top: 0,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 17,
+      //       RH: 26,
+      //       CO2: 2800,
+      //       PM2d5: 28,
+      //       HCHO: 0.01,
+      //       localName: '董事办公室',
+      //       roomFuncType: 'office',
+      //       lamp: 'all', //灯的不同状态会显示 不同的颜色
+      //       air: 'part',
+      //       curtain: 'part',
+      //       //device 到时候需要生成
+      //       //当前设备的状态status :all全部开启 part部分开启 close全都关闭
+      //       //还有设备类型type :包括air lamp curtain
+      //       device: [
+      //         { type: 'lamp', status: 'close' },
+      //         { type: 'air', status: 'part' },
+      //         { type: 'curtain', status: 'all' },
+      //       ],
+      //       timeList: ['08:00-16:00', '08:00-16:00'],
+      //       //   normalRun
+      //       //   overtimeWork
+      //       //   overtimeBook
+      //       runTimeStatus: 'normalRun',
+      //     },
+      //     {
+      //       left: 500,
+      //       top: 0,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 65,
+      //       CO2: 1008,
+      //       PM2d5: 38,
+      //       HCHO: 0.03,
+      //       localName: '休息区',
+      //       roomFuncType: 'rest',
+      //       lamp: 'part',
+      //       air: 'close',
+      //       curtain: 'close',
+      //       device: [
+      //         { type: 'lamp', status: 'close' },
+      //         { type: 'air', status: 'close' },
+      //       ],
+      //       runTimeStatus: 'overtimeWork',
+      //     },
+      //     {
+      //       left: 1000,
+      //       top: 0,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 20,
+      //       RH: 53,
+      //       CO2: 1808,
+      //       PM2d5: 88,
+      //       HCHO: 0.06,
+      //       localName: '会议室',
+      //       roomFuncType: 'meeting',
+      //       lamp: 'close',
+      //       device: [
+      //         { type: 'lamp', status: 'all' },
+      //         { type: 'air', status: 'part' },
+      //         { type: 'curtain', status: 'part' },
+      //       ],
+      //       runTimeStatus: 'overtimeBook',
+      //     },
+      //     {
+      //       left: 0,
+      //       top: 400,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 27,
+      //       RH: 37,
+      //       CO2: 28,
+      //       PM2d5: 68,
+      //       HCHO: 0.1,
+      //       localName: '第一办公区',
+      //       roomFuncType: 'work',
+      //       lamp: 'all',
+      //       curtain: 'all',
+      //       device: [
+      //         { type: 'lamp', status: 'all' },
+
+      //         { type: 'curtain', status: 'all' },
+      //       ],
+      //     },
+      //     {
+      //       left: 500,
+      //       top: 400,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 30,
+      //       RH: 26,
+      //       CO2: 28,
+      //       PM2d5: 28,
+      //       HCHO: 0.17,
+      //       localName: '收发室',
+      //       roomFuncType: 'letter',
+      //       air: 'close',
+      //       curtain: 'part',
+      //       device: [{ type: 'lamp', status: 'all' }],
+      //     },
+      //     {
+      //       left: 1000,
+      //       top: 400,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 12,
+      //       RH: 26,
+      //       CO2: 28,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '走廊',
+      //       roomFuncType: 'walk',
+      //       lamp: 'close',
+      //       air: 'part',
+      //       curtain: 'close',
+      //       device: [
+      //         { type: 'lamp', status: 'part' },
+      //         { type: 'air', status: 'close' },
+      //         { type: 'curtain', status: 'close' },
+      //       ],
+      //     },
+      //     {
+      //       left: 0,
+      //       top: 800,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 28,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '第一办公区',
+      //       roomFuncType: 'work',
+      //       lamp: 'close',
+      //       air: 'all',
+      //       curtain: 'part',
+      //       device: [
+      //         { type: 'lamp', status: 'close' },
+      //         { type: 'air', status: 'close' },
+      //         { type: 'curtain', status: 'close' },
+      //       ],
+      //     },
+      //     {
+      //       left: 500,
+      //       top: 800,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 2000,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '收发室',
+      //       roomFuncType: 'letter',
+      //       lamp: 'all',
+
+      //       curtain: 'all',
+      //       device: [
+      //         { type: 'lamp', status: 'part' },
+      //         { type: 'air', status: 'part' },
+      //         { type: 'curtain', status: 'part' },
+      //       ],
+      //     },
+      //     {
+      //       left: 1000,
+      //       top: 800,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 28,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '走廊',
+      //       roomFuncType: 'walk',
+      //       device: [],
+      //       lamp: 'all',
+      //       air: 'all',
+      //       curtain: 'all',
+      //     },
+      //     {
+      //       left: 1500,
+      //       top: 0,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 28,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '董事办公室',
+      //       roomFuncType: 'office',
+      //       lamp: 'close',
+      //       air: 'part',
+      //       curtain: 'close',
+      //       device: [{ type: 'curtain', status: 'all' }],
+      //     },
+      //     {
+      //       left: 2000,
+      //       top: 0,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 28,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '休息区',
+      //       roomFuncType: 'rest',
+      //       lamp: 'part',
+      //       air: 'part',
+      //       curtain: 'part',
+      //       device: [
+      //         { type: 'lamp', status: 'all' },
+      //         { type: 'air', status: 'all' },
+      //         { type: 'curtain', status: 'all' },
+      //       ],
+      //     },
+      //     {
+      //       left: 2500,
+      //       top: 0,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 2000,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '会议室',
+      //       roomFuncType: 'meeting',
+
+      //       curtain: 'all',
+      //       device: [
+      //         { type: 'lamp', status: 'all' },
+      //         { type: 'air', status: 'close' },
+      //         { type: 'curtain', status: 'part' },
+      //       ],
+      //     },
+      //     {
+      //       left: 1500,
+      //       top: 400,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 28,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '第一办公区',
+      //       roomFuncType: 'work',
+      //       lamp: 'all',
+      //       air: 'all',
+      //       device: [
+      //         { type: 'lamp', status: 'all' },
+      //         { type: 'air', status: 'part' },
+      //         { type: 'curtain', status: 'close' },
+      //       ],
+      //     },
+      //     {
+      //       left: 2000,
+      //       top: 400,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 2000,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '收发室',
+      //       roomFuncType: 'letter',
+      //       lamp: 'close',
+      //       curtain: 'all',
+      //       device: [
+      //         { type: 'lamp', status: 'close' },
+      //         { type: 'air', status: 'close' },
+      //         { type: 'curtain', status: 'part' },
+      //       ],
+      //     },
+      //     {
+      //       left: 2500,
+      //       top: 400,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 28,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '走廊',
+      //       roomFuncType: 'walk',
+      //       lamp: 'all',
+      //       air: 'part',
+      //       curtain: 'all',
+      //       device: [
+      //         { type: 'lamp', status: 'part' },
+      //         { type: 'air', status: 'close' },
+      //         { type: 'curtain', status: 'all' },
+      //       ],
+      //     },
+      //     {
+      //       left: 1500,
+      //       top: 800,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 2000,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '第一办公区',
+      //       roomFuncType: 'work',
+      //       device: [{ type: 'curtain', status: 'all' }],
+      //     },
+      //     {
+      //       left: 2000,
+      //       top: 800,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 2000,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '收发室',
+      //       roomFuncType: 'letter',
+      //       device: [
+      //         { type: 'lamp', status: 'all' },
+      //         { type: 'air', status: 'all' },
+      //         { type: 'curtain', status: 'all' },
+      //       ],
+      //     },
+      //     {
+      //       left: 2500,
+      //       top: 800,
+      //       width: 500,
+      //       height: 400,
+      //       Tdb: 25,
+      //       RH: 26,
+      //       CO2: 700,
+      //       PM2d5: 28,
+      //       HCHO: 39,
+      //       localName: '走廊',
+      //       roomFuncType: 'walk',
+      //       lamp: 'part',
+      //       air: 'part',
+      //       curtain: 'all',
+      //       device: [
+      //         { type: 'lamp', status: 'all' },
+      //         { type: 'air', status: 'all' },
+      //         { type: 'curtain', status: 'all' },
+      //       ],
+      //     },
+      //   ],
       success: true,
     });
   },
   'POST /api/environment/Building': (req: Request, res: Response) => {
     res.send({
       data: [
-        { name: '11#', id: '11111' },
-        { name: '22#', id: '22222' },
-        { name: '33#', id: '33333' },
-        { name: '44#', id: '444444' },
+        { localName: '11#', id: '11111' },
+        { localName: '22#', id: '22222' },
+        { localName: '33#', id: '33333' },
+        { localName: '44#', id: '444444' },
       ],
       success: true,
     });
@@ -308,14 +598,14 @@ export default {
   'POST /api/environment/Floor': (req: Request, res: Response) => {
     res.send({
       data: [
-        { name: 'F1', id: 'ffff1' },
-        { name: 'F2', id: 'ffff2' },
-        { name: 'F3', id: 'ffff3' },
-        { name: 'F4', id: 'ffff4' },
-        { name: 'F5', id: 'ffff5' },
-        { name: 'F6', id: 'ffff6' },
-        { name: 'F7', id: 'ffff7' },
-        { name: 'F8', id: 'ffff8' },
+        { localName: 'F1', id: 'ffff1' },
+        { localName: 'F2', id: 'ffff2' },
+        { localName: 'F3', id: 'ffff3' },
+        { localName: 'F4', id: 'ffff4' },
+        { localName: 'F5', id: 'ffff5' },
+        { localName: 'F6', id: 'ffff6' },
+        { localName: 'F7', id: 'ffff7' },
+        { localName: 'F8', id: 'ffff8' },
       ],
       success: true,
     });

+ 0 - 2
src/assets/css/map.less

@@ -1,7 +1,5 @@
 .map {
   position: relative;
-  width: 100%;
-  //   overflow: hidden;
   .house {
     position: absolute;
     border: 2px solid #fff;

+ 11 - 11
src/components/PageHeader/index.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import styles from './index.less';
 
-export default ({
-  title,
-  action,
-}) => {
+export default ({ title, action }) => {
   return (
-    <div className={styles.c}>
-      <div className={styles.title}>{ title }</div>
-      {
-        action
-      }
+    <div>
+      <div className={styles.header}>
+        <div className={styles.title}>之江项目</div>
+      </div>
+      <div className={styles.c}>
+        <div className={styles.title}>{title}</div>
+        {action}
+      </div>
     </div>
-  )
-}
+  );
+};

+ 24 - 13
src/components/PageHeader/index.less

@@ -1,18 +1,29 @@
-.c {
+.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 100px;
+  .title {
+    color: #000000;
+    font-weight: 600;
+    font-size: 24px;
+  }
 }
-
-.title {
-  font-size: 24px;
-  color: #000;
-  font-weight: 600;
-  &::before {
-    content: "/";
-    font-size: 32px;
-    font-weight: normal;
-    color: #f0da21;
-    margin-right: 10px;
+.c {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  .title {
+    color: #000;
+    font-weight: 600;
+    font-size: 24px;
+    &::before {
+      margin-right: 10px;
+      color: #f0da21;
+      font-weight: normal;
+      font-size: 32px;
+      content: '/';
+    }
   }
-}
+}

+ 0 - 5
src/components/map/index.less

@@ -1,5 +0,0 @@
-.map {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}

+ 4 - 2
src/components/map/index.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import mapstyles from '@/assets/css/map.less';
 import { getMapList } from '@/services/ant-design-pro/environment';
+import cx from 'classnames';
 
 type MapProps = {
   //mapList: API.MapInfo[];
+  type: string;
   render: (item: API.MapInfo, index: number) => React.ReactNode;
 };
 
-const Map: React.FC<MapProps> = ({ render }) => {
+const Map: React.FC<MapProps> = ({ type, render }) => {
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
   useEffect(() => {
     getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
@@ -16,7 +18,7 @@ const Map: React.FC<MapProps> = ({ render }) => {
     });
   }, []);
   return (
-    <div className={mapstyles.map}>
+    <div className={cx(mapstyles.map, { [mapstyles.equipmentMap]: type == 'equipment' })}>
       {mapList.map(function (item, index) {
         return render(item, index);
       })}

+ 1 - 3
src/layouts/index.jsx

@@ -5,9 +5,7 @@ import styles from './index.less';
 export default (props) => {
   return (
     <>
-      <div className={styles.layout}>
-        <div className={styles.content}>{props.children}</div>
-      </div>
+      <div className={styles.layout}>{props.children}</div>
     </>
   );
 };

+ 3 - 11
src/layouts/index.less

@@ -1,15 +1,7 @@
 .layout {
+  box-sizing: border-box;
   width: 1340px;
+  height: 100%;
   margin: 0 auto;
+  padding: 22px;
 }
-
-.header {
-  padding: 42px 0 35px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.footer {
-  padding-top: 80px;
-}

+ 5 - 5
src/pages/Environment/components/chartModal/index.jsx

@@ -10,25 +10,25 @@ export default ({ onClose }) => {
   const [paramList, setParamList] = useState([
     {
       name: '温湿度',
-      id: 'temperature&wet',
+      id: 'Tdb&RH',
       content:
         '温度表示空气的冷热程度,夏季高温高湿会使人烦躁、疲倦,冬季湿度过高时,人体感觉越冷,冬季湿度低易引起呼吸道不舒适,室外温度较高时,宜遮阳关窗',
     },
     {
       name: 'CO₂',
-      id: 'co2',
+      id: 'CO2',
       content:
         'CO₂一种无色无味气体,CO₂的标准为1000ppm,CO₂过高,影响人体呼吸系统,大脑易疲劳,工作效率降低,室内人员增多,新风量不足时,室内CO₂的浓度就会上升,宜开窗通风或增加送风量来降低CO₂浓度',
     },
     {
       name: 'PM2.5',
-      id: 'pm25',
+      id: 'PM2d5',
       content:
         'PM2.5,直径≤2.5微米的颗粒,PM2.5的平均值在0-35μg/m3,PM2.5浓度过高,影响人体,呼吸系统和心血管系统健康,应开启除尘净化设备',
     },
     {
       name: '甲醛',
-      id: 'jiaquan',
+      id: 'HCHO',
       content:
         '甲醛(HCHO)是无色有刺激性有机气体。甲醛的主要危害表现为对皮肤和黏膜的刺激作用。由于家具,胶水中的甲醛挥发是一个长期缓慢的过程,因此甲醛超标常表现为室内甲醛浓度长期处于较高的数值。',
     },
@@ -39,7 +39,7 @@ export default ({ onClose }) => {
         'TVOC,有毒有刺激性气味TVOC的标准为0.60mg/m3,TVOC超标,影响人体视觉,抽烟、涂料、燃烧、清洁剂,等会导致TVOC浓度升高,可通过通风、绿植、活性炭吸,附等方式减轻TVOC污染程度',
     },
   ]);
-  //const [paramId, setParamId] = useState('temperature&wet');
+  //const [paramId, setParamId] = useState('Tdb&RH');
   const [paramObj, setParamObj] = useState({});
   var data = [
     { Date: '2010-01', scales: 1998 },

+ 1 - 0
src/pages/Environment/components/topNavigator/index.less

@@ -5,6 +5,7 @@
   box-sizing: border-box;
   //   display: flex;
   height: 68px;
+  margin-top: 18px;
   background: #fff;
   .floor {
     display: flex;

+ 30 - 28
src/pages/Environment/index.less

@@ -1,35 +1,37 @@
 .label {
   color: #c4c4c4;
 }
-.mapwrap {
-  .top {
-    box-sizing: border-box;
-    height: 47px;
-    padding-top: 10px;
-    padding-right: 20px;
-    .right {
-      display: flex;
-      float: right;
-      .indicatorBox {
-        .text {
-          padding-bottom: 7px;
-          color: #4d5262;
-          font-size: 11px;
-          line-height: 1;
-        }
-        .color {
-          width: 40px;
-          height: 4px;
-        }
+.maptop {
+  box-sizing: border-box;
+  height: 47px;
+  padding-top: 10px;
+  padding-right: 20px;
+  .right {
+    display: flex;
+    float: right;
+    .indicatorBox {
+      .text {
+        padding-bottom: 7px;
+        color: #4d5262;
+        font-size: 11px;
+        line-height: 1;
+      }
+      .color {
+        width: 40px;
+        height: 4px;
       }
     }
   }
-
-  //   .specialRoom {
-  //     position: absolute;
-  //     top: 0;
-  //     right: 0;
-  //     width: 180px;
-  //     height: 170px;
-  //   }
 }
+.mapwrap {
+  height: calc(100% - 283px);
+  overflow: hidden;
+}
+
+//   .specialRoom {
+//     position: absolute;
+//     top: 0;
+//     right: 0;
+//     width: 180px;
+//     height: 170px;
+//   }

+ 59 - 67
src/pages/Environment/index.tsx

@@ -34,7 +34,7 @@ const Environment: React.FC = () => {
   const [navigatorList] = useState<navigatorItem[]>([
     {
       name: '温度',
-      id: 'temperature',
+      id: 'Tdb',
       src: envir_temperature,
       unit: '℃',
       num: 24.3,
@@ -45,7 +45,7 @@ const Environment: React.FC = () => {
     },
     {
       name: '湿度',
-      id: 'wet',
+      id: 'RH',
       src: envir_wet,
       unit: '%',
       num: 70,
@@ -56,7 +56,7 @@ const Environment: React.FC = () => {
     },
     {
       name: 'CO₂',
-      id: 'co2',
+      id: 'CO2',
       src: envir_co2,
       unit: 'ppm',
       num: 600,
@@ -67,7 +67,7 @@ const Environment: React.FC = () => {
     },
     {
       name: 'PM2.5',
-      id: 'pm25',
+      id: 'PM2d5',
       src: envir_pm25,
       unit: 'ug/m³',
       num: 33,
@@ -78,7 +78,7 @@ const Environment: React.FC = () => {
     },
     {
       name: '甲醛',
-      id: 'jiaquan',
+      id: 'HCHO',
       src: envir_jiaquan,
       unit: 'mg/m³',
       num: 50,
@@ -90,7 +90,7 @@ const Environment: React.FC = () => {
   ]);
   const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
   const navigatorChange = (item: navigatorItem) => {
-    if (item.id == 'temperature') {
+    if (item.id == 'Tdb') {
     }
     setSelNav(item);
   };
@@ -114,7 +114,7 @@ const Environment: React.FC = () => {
   };
 
   return (
-    <div>
+    <>
       <PageHeader
         title={<FormattedMessage id="menu.environment" />}
         action={
@@ -139,64 +139,58 @@ const Environment: React.FC = () => {
           />
         }
       />
-      <div style={{ marginTop: '26px' }}>
-        <TopNavigator
-          navigatorList={navigatorList}
+      <TopNavigator
+        navigatorList={navigatorList}
+        type={'enviroment'}
+        navigatorChange={navigatorChange}
+      ></TopNavigator>
+      <div className={styles.maptop}>
+        <div className={styles.right}>
+          {(selNav.indicator || []).map((item, index) => {
+            return (
+              <div className={styles.indicatorBox} key={index + 'indicator'}>
+                <div className={styles.text}>{item}</div>
+                <div
+                  className={styles.color}
+                  style={{
+                    backgroundColor:
+                      'rgba(' + selNav.colorStr + (selNav.opacity as number) * (index + 1) + ')',
+                  }}
+                ></div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className={styles.mapwrap}>
+        <Map
           type={'enviroment'}
-          navigatorChange={navigatorChange}
-        ></TopNavigator>
-        <div className={styles.mapwrap}>
-          <div className={styles.top}>
-            <div className={styles.right}>
-              {(selNav.indicator || []).map((item, index) => {
-                return (
-                  <div className={styles.indicatorBox} key={index + 'indicator'}>
-                    <div className={styles.text}>{item}</div>
-                    <div
-                      className={styles.color}
-                      style={{
-                        // backgroundColor: selNav.color,
-                        // opacity: selNav.opacity * (index + 1),
-                        backgroundColor:
-                          'rgba(' +
-                          selNav.colorStr +
-                          (selNav.opacity as number) * (index + 1) +
-                          ')',
-                      }}
-                    ></div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-          <div>
-            <Map
-              render={(item: API.MapInfo, index: number): React.ReactNode => {
-                return (
-                  <div
-                    key={index + 'house'}
-                    className={mapstyles.house}
-                    style={{
-                      left: item.left,
-                      top: item.top,
-                      width: item.width,
-                      height: item.height,
-                      backgroundColor:
-                        'rgba(' +
-                        selNav.colorStr +
-                        (selNav.opacity as number) * getColorOpacity(item.value) +
-                        ')',
-                    }}
-                  >
-                    <div className={mapstyles.content}>
-                      <Icon className="" type={item.type} style={{ fontSize: 20 }}></Icon>
-                      <div className={mapstyles.name}>{item.name}</div>
-                    </div>
-                  </div>
-                );
-              }}
-            ></Map>
-            {/* {mapList.map(function (item, index) {
+          render={(item: API.MapInfo, index: number) => {
+            return (
+              <div
+                key={index + 'house'}
+                className={mapstyles.house}
+                style={{
+                  left: item.left,
+                  top: item.top,
+                  width: item.width,
+                  height: item.height,
+                  backgroundColor:
+                    'rgba(' +
+                    selNav.colorStr +
+                    (selNav.opacity as number) * getColorOpacity(item[selNav.id]) +
+                    ')',
+                }}
+              >
+                <div className={mapstyles.content}>
+                  <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
+                  <div className={mapstyles.name}>{item.localName}</div>
+                </div>
+              </div>
+            );
+          }}
+        ></Map>
+        {/* {mapList.map(function (item, index) {
               return (
                 <div
                   key={index + 'house'}
@@ -220,8 +214,6 @@ const Environment: React.FC = () => {
                 </div>
               );
             })} */}
-          </div>
-        </div>
       </div>
 
       {showChart && (
@@ -231,7 +223,7 @@ const Environment: React.FC = () => {
           }}
         ></ChartModal>
       )}
-    </div>
+    </>
   );
 };
 

+ 6 - 6
src/pages/Equipment/components/deviceModal/index.jsx

@@ -28,37 +28,37 @@ export default ({ onClose }) => {
   const [paramList, setParamList] = useState([
     {
       name: '温度',
-      id: 'temperature',
+      id: 'Tdb',
       num: 24,
       describe: '温度适宜',
     },
     {
       name: 'CO₂',
-      id: 'co2',
+      id: 'CO2',
       num: 410,
       describe: '空气清新',
     },
     {
       name: 'PM2.5',
-      id: 'pm25',
+      id: 'PM2d5',
       num: 0.3,
       describe: '优秀',
     },
     {
       name: '甲醛',
-      id: 'jiaquan',
+      id: 'HCHO',
       num: 0.5,
       describe: '健康',
     },
     {
       name: '湿度',
-      id: 'wet',
+      id: 'RH',
       num: 26,
       unit: '%',
       describe: '健康',
     },
   ]);
-  //const [paramId, setParamId] = useState('temperature&wet');
+  //const [paramId, setParamId] = useState('Tdb&RH');
   const [paramObj, setParamObj] = useState({});
   const [editVisible, setEditVisible] = useState(false);
   useEffect(() => {

+ 19 - 18
src/pages/Equipment/index.less

@@ -1,24 +1,25 @@
 .label {
   color: #c4c4c4;
 }
-.mapwrap {
-  .top {
-    box-sizing: border-box;
-    height: 47px;
-    padding-top: 10px;
-
-    .right {
-      display: flex;
-      float: right;
-      .circle {
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        margin-right: 4px;
-        margin-left: 18px;
-        background: #5e8bcf;
-        border-radius: 10px;
-      }
+.maptop {
+  box-sizing: border-box;
+  height: 47px;
+  padding-top: 10px;
+  .right {
+    display: flex;
+    float: right;
+    .circle {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      margin-right: 4px;
+      margin-left: 18px;
+      background: #5e8bcf;
+      border-radius: 10px;
     }
   }
 }
+.mapwrap {
+  height: calc(100% - 283px);
+  overflow: hidden;
+}

+ 80 - 98
src/pages/Equipment/index.tsx

@@ -10,7 +10,7 @@ import DeviceModal from './components/deviceModal';
 
 import styles from './index.less';
 import mapstyles from '@/assets/css/map.less';
-import cx from 'classnames';
+
 // import './map.less';
 import { equipImageMap } from '@/config/image.js';
 import { Input } from 'antd';
@@ -103,19 +103,10 @@ const Environment: React.FC = () => {
     }
   };
   return (
-    <div>
+    <>
       <PageHeader
         title={<FormattedMessage id="menu.equipment" />}
         action={
-          //   <SearchInput
-          //     placeholder="搜索空间"
-          //     onSearch={(s) => {
-          //       setSearchText(s || undefined);
-          //     }}
-          //     onCancel={() => {
-          //       setSearchText();
-          //     }}
-          //   />
           <Input.Search
             size="large"
             allowClear
@@ -127,97 +118,88 @@ const Environment: React.FC = () => {
           />
         }
       />
-      <div style={{ marginTop: '26px' }}>
-        <TopNavigator
-          navigatorList={navigatorList}
+      <TopNavigator
+        navigatorList={navigatorList}
+        type={'equipment'}
+        navigatorChange={navigatorChange}
+        action={<TopNavRight selNavObj={selNav} navigatorList={navigatorList}></TopNavRight>}
+      ></TopNavigator>
+      <div className={styles.maptop}>
+        {selNav.id !== 'all' && (
+          <div className={styles.right}>
+            <div>
+              <span
+                className={styles.circle}
+                style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
+              ></span>
+              <span>开启</span>
+            </div>
+            <div>
+              <span
+                className={styles.circle}
+                style={{ backgroundColor: 'rgba(' + selNav.colorStr + '0.4)' }}
+              ></span>
+              <span>部分开启</span>
+            </div>
+            <div>
+              <span
+                className={styles.circle}
+                style={{ backgroundColor: 'rgba(196, 196, 196, 0.6)' }}
+              ></span>
+              <span>关闭</span>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className={styles.mapwrap}>
+        <Map
           type={'equipment'}
-          navigatorChange={navigatorChange}
-          action={<TopNavRight selNavObj={selNav} navigatorList={navigatorList}></TopNavRight>}
-        ></TopNavigator>
-
-        <div className={styles.mapwrap}>
-          <div className={styles.top}>
-            {selNav.id !== 'all' && (
-              <div className={styles.right}>
-                <div>
-                  <span
-                    className={styles.circle}
-                    style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
-                  ></span>
-                  <span>开启</span>
-                </div>
-                <div>
-                  <span
-                    className={styles.circle}
-                    style={{ backgroundColor: 'rgba(' + selNav.colorStr + '0.4)' }}
-                  ></span>
-                  <span>部分开启</span>
+          render={(item, index) => {
+            return (
+              <div
+                key={index + 'house'}
+                className={mapstyles.house}
+                style={{
+                  left: item.left,
+                  top: item.top,
+                  width: item.width,
+                  height: item.height,
+                  backgroundColor:
+                    selNav.id == 'all'
+                      ? 'rgba(196, 196, 196, 0.2)'
+                      : getColorOpacity(item[selNav.id]),
+                }}
+              >
+                {selNav.id == 'all' && (
+                  <div className={mapstyles.allDevice}>
+                    {/* 所有设备的图标列表 */}
+                    {item.device.map((ditem, dindex: number) => {
+                      return (
+                        <div
+                          key={dindex + 'device'}
+                          className={mapstyles.icon}
+                          style={{
+                            backgroundColor: getColorOpacity(ditem.status, ditem.type),
+                          }}
+                        >
+                          <Icon className="" type={ditem.type} style={{ color: '#ffffff' }}></Icon>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+                <div className={mapstyles.showModal} onClick={showModalClick}>
+                  <Icon className="" type="hover"></Icon>
                 </div>
-                <div>
-                  <span
-                    className={styles.circle}
-                    style={{ backgroundColor: 'rgba(196, 196, 196, 0.6)' }}
-                  ></span>
-                  <span>关闭</span>
+                <div className={mapstyles.content}>
+                  <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
+                  <div className={mapstyles.name}>{item.localName}</div>
                 </div>
               </div>
-            )}
-          </div>
-          <div className={cx(mapstyles.map, mapstyles.equipmentMap)}>
-            <Map
-              render={(item, index) => {
-                return (
-                  <div
-                    key={index + 'house'}
-                    className={mapstyles.house}
-                    style={{
-                      left: item.left,
-                      top: item.top,
-                      width: item.width,
-                      height: item.height,
-                      backgroundColor:
-                        selNav.id == 'all'
-                          ? 'rgba(196, 196, 196, 0.2)'
-                          : getColorOpacity(item[selNav.id]),
-                    }}
-                  >
-                    {selNav.id == 'all' && (
-                      <div className={mapstyles.allDevice}>
-                        {/* 所有设备的图标列表 */}
-                        {item.device.map((ditem, dindex: number) => {
-                          return (
-                            <div
-                              key={dindex + 'device'}
-                              className={mapstyles.icon}
-                              style={{
-                                backgroundColor: getColorOpacity(ditem.status, ditem.type),
-                              }}
-                            >
-                              <Icon
-                                className=""
-                                type={ditem.type}
-                                style={{ color: '#ffffff' }}
-                              ></Icon>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    )}
-                    <div className={mapstyles.showModal} onClick={showModalClick}>
-                      <Icon className="" type="hover"></Icon>
-                    </div>
-                    <div className={mapstyles.content}>
-                      <Icon className="" type={item.type} style={{ fontSize: 20 }}></Icon>
-                      <div className={mapstyles.name}>{item.name}</div>
-                    </div>
-                  </div>
-                );
-              }}
-            ></Map>
-          </div>
-        </div>
+            );
+          }}
+        ></Map>
       </div>
-
       {showModal && (
         <DeviceModal
           onClose={() => {
@@ -225,7 +207,7 @@ const Environment: React.FC = () => {
           }}
         ></DeviceModal>
       )}
-    </div>
+    </>
   );
 };
 

+ 13 - 22
src/pages/Runtime/index.less

@@ -7,27 +7,18 @@
   }
 }
 
-.mapwrap {
-  .top {
-    box-sizing: border-box;
-    height: 47px;
-    padding-top: 10px;
-    padding-right: 20px;
-    .right {
-      float: right;
-      width: 210px;
-    }
-  }
-  .map {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-  }
-  .specialRoom {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 180px;
-    height: 170px;
+.maptop {
+  box-sizing: border-box;
+  height: 47px;
+  padding-top: 10px;
+  padding-right: 20px;
+  .right {
+    float: right;
+    width: 210px;
   }
 }
+
+.mapwrap {
+  height: calc(100% - 283px);
+  overflow: hidden;
+}

+ 45 - 50
src/pages/Runtime/index.tsx

@@ -40,7 +40,7 @@ const Runtime: React.FC = () => {
   //     });
   //   }, []);
   return (
-    <div>
+    <>
       <PageHeader
         title={<FormattedMessage id="menu.runtime" />}
         action={
@@ -70,22 +70,19 @@ const Runtime: React.FC = () => {
           </div>
         }
       />
-      <div style={{ marginTop: '26px' }}>
-        <TopNavigator
-          type={'runtime'}
-          action={<RunNavRight runtimeNav={runtimeNav}></RunNavRight>}
-        ></TopNavigator>
-        <div className={styles.mapwrap}>
-          <div className={styles.top}>
-            <div className={styles.right}></div>
-          </div>
-          {/* <div className={styles.map}>
+      <TopNavigator
+        type={'runtime'}
+        action={<RunNavRight runtimeNav={runtimeNav}></RunNavRight>}
+      ></TopNavigator>
+      <div className={styles.maptop}>
+        <div className={styles.right}></div>
+      </div>
+      <div className={styles.mapwrap}>
+        {/* <div className={styles.map}>
             <div className={styles.specialRoom}></div>
             <img src={mapImg}></img>
           </div> */}
-
-          <div className={mapstyles.map}>
-            {/* <div
+        {/* <div
               className={mapstyles.house}
               style={{
                 width: 180,
@@ -98,43 +95,41 @@ const Runtime: React.FC = () => {
                 <div className={mapstyles.name}>Jozy Zone</div>
               </div>
             </div> */}
-
-            <Map
-              render={(item, index) => {
-                return (
-                  <div
-                    key={index + 'house'}
-                    className={mapstyles.house}
-                    style={{
-                      left: item.left,
-                      top: item.top,
-                      width: item.width,
-                      height: item.height,
-                      backgroundColor:
-                        item.runTimeStatus == 'normalRun'
-                          ? 'rgba(196, 196, 196, 0.2)'
-                          : item.runTimeStatus == 'overtimeWork'
-                          ? 'rgba(94, 139, 207, 0.2)'
-                          : 'rgba(0, 220, 35, 0.2)',
-                    }}
-                  >
-                    <div className={mapstyles.allTime}>
-                      {(item.timeList || []).map(function (titem: string, tindex: number) {
-                        return <span key={tindex + 'time'}>{titem},</span>;
-                      })}
-                    </div>
-                    <div className={mapstyles.content}>
-                      <Icon className="" type={item.type} style={{ fontSize: 20 }}></Icon>
-                      <div className={mapstyles.name}>{item.name}</div>
-                    </div>
-                  </div>
-                );
-              }}
-            ></Map>
-          </div>
-        </div>
+        <Map
+          type={'runtime'}
+          render={(item, index) => {
+            return (
+              <div
+                key={index + 'house'}
+                className={mapstyles.house}
+                style={{
+                  left: item.left,
+                  top: item.top,
+                  width: item.width,
+                  height: item.height,
+                  backgroundColor:
+                    item.runTimeStatus == 'normalRun'
+                      ? 'rgba(196, 196, 196, 0.2)'
+                      : item.runTimeStatus == 'overtimeWork'
+                      ? 'rgba(94, 139, 207, 0.2)'
+                      : 'rgba(0, 220, 35, 0.2)',
+                }}
+              >
+                <div className={mapstyles.allTime}>
+                  {(item.timeList || []).map(function (titem: string, tindex: number) {
+                    return <span key={tindex + 'time'}>{titem},</span>;
+                  })}
+                </div>
+                <div className={mapstyles.content}>
+                  <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
+                  <div className={mapstyles.name}>{item.localName}</div>
+                </div>
+              </div>
+            );
+          }}
+        ></Map>
       </div>
-    </div>
+    </>
   );
 };
 export default Runtime;