feat: 添加泰来工作台组件

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.less

@@ -231,5 +231,31 @@
       background: url('@{imgSrc}/系统使用排名.png');
       background-size: 100% 100%;
     }
+    &[widget='WATER_MONITORING_TAILAI'] {
+      height: 240px;
+      background: url('@{imgSrc}/泰来运营总览.png');
+      background-size: 100% 100%;
+    }
+    &[widget='MANAGE_OVERVIEW_TAILAI'] {
+      height: 50px;
+      background: url('@{imgSrc}/泰来水厂总览.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PIPE_MONITORING_TAILAI'] {
+      height: 200px;
+      background: url('@{imgSrc}/泰来管网运营.png');
+      background-size: 100% 100%;
+    }
+    &[widget='DMA_OVERVIEW_TAILAI'] {
+      height: 120px;
+      background: url('@{imgSrc}/泰来DMA总览.png');
+      background-size: 100% 100%;
+    }
+    &[widget='REVENUE_OVERVIEW_TAILAI'] {
+      height: 120px;
+      background: url('@{imgSrc}/泰来营收总览.png');
+      background-size: 100% 100%;
+    }
+
   }
 }
\ No newline at end of file

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js

-import React, { useState, useRef, useContext, useMemo, useEffect } from 'react'
-import { Checkbox, Row, Col, Button, message, Input } from 'antd'
-import { useDrag, useDrop, DndProvider } from 'react-dnd'
-import { CaretRightOutlined } from '@ant-design/icons'
-import styles from './index.less'
-import { GlobalStore } from '../index'
-import { getCardVersion, upgradeCardVersion } from '@/services/mobileConfig/api'
+import React, { useState, useRef, useContext, useMemo, useEffect } from 'react';
+import { Checkbox, Row, Col, Button, message, Input } from 'antd';
+import { useDrag, useDrop, DndProvider } from 'react-dnd';
+import { CaretRightOutlined } from '@ant-design/icons';
+import styles from './index.less';
+import { GlobalStore } from '../index';
+import { getCardVersion, upgradeCardVersion } from '@/services/mobileConfig/api';
 
-const { Search } = Input
+const { Search } = Input;
 
-const cardTypes = ['管理', '执行', '运营']
-const tabs = ['产品组件', '项目组件']
+const cardTypes = ['管理', '执行', '运营'];
+const tabs = ['产品组件', '项目组件'];
 
 const cards = [
   [
@@ -19,7 +19,7 @@ const cards = [
       children: [
         { name: '运营总览', widget: 'OVERVIEW', type: '运营' },
         { name: '经营概览', widget: 'MANAGE_OVERVIEW', type: '运营' },
-      ]
+      ],
     },
     {
       title: '水厂',
@@ -28,7 +28,7 @@ const cards = [
         { name: '水厂总览', widget: 'WATER_OVERVIEW', type: '运营' },
         { name: '供水量曲线', widget: 'WATER_CHART', type: '运营' },
         { name: '水厂监控', widget: 'WATER_MONITORING', type: '运营' },
-      ]
+      ],
     },
     {
       title: '管网',
@@ -42,7 +42,7 @@ const cards = [
         { name: '维修工单', widget: 'MAINTENANCEORDER', type: '运营' },
         { name: '压力监控', widget: 'PRESSURE_MONITORING', type: '运营' },
         { name: '采集工程', widget: 'PROJECT_OVERVIEW', type: '运营' },
-      ]
+      ],
     },
     {
       title: '二供',
@@ -51,14 +51,12 @@ const cards = [
         { name: '二供总览', widget: 'OPERATIONAL_OVERVIEW', type: '运营' },
         { name: '泵房运行状态', widget: 'PUMP_STATUS', type: '运营' },
         { name: '泵房维修保养', widget: 'PUMP_MAINTAIN', type: '运营' },
-      ]
+      ],
     },
     {
       title: '营收',
       count: 1,
-      children: [
-        { name: '营收总览', widget: 'REVENUE_OVERVIEW', type: '运营' },
-      ]
+      children: [{ name: '营收总览', widget: 'REVENUE_OVERVIEW', type: '运营' }],
     },
     {
       title: 'DMA',
@@ -86,7 +84,7 @@ const cards = [
         { name: '巡检运维', widget: 'INSPECTIONMAINTENANCE', type: '运营' },
         { name: '事件工单', widget: 'EVENTWORKORDER', type: '运营' },
         { name: '子公司业务排行', widget: 'SUBSIDIARYBUSINESSRANKING', type: '运营' },
-      ]
+      ],
     },
     {
       title: '新乐智慧水务项目',
@@ -95,14 +93,12 @@ const cards = [
         { name: '生产概览', widget: 'PRODUCT_OVERVIEW', type: '运营' },
         { name: '三水厂送水泵房监控', widget: 'WATER_SUPPLY_MONITORING3', type: '运营' },
         { name: '四水厂送水泵房监控', widget: 'WATER_SUPPLY_MONITORING4', type: '运营' },
-      ]
+      ],
     },
     {
       title: '广西农投天等县智慧水务项目',
       count: 1,
-      children: [
-        { name: '采集总览', widget: 'ACQUISITION_OVERVIEW', type: '运营' },
-      ]
+      children: [{ name: '采集总览', widget: 'ACQUISITION_OVERVIEW', type: '运营' }],
     },
     {
       title: '瑞云智慧水务项目',
@@ -114,45 +110,55 @@ const cards = [
         { name: '工单运营', widget: 'RUIYUN_CASEOPERATION', type: '运营' },
         { name: '维修服务统计', widget: 'RUIYUN_MAINTAINSTATISTICS', type: '运营' },
         { name: '人员业务排名', widget: 'RUIYUN_PERSONRANKING', type: '运营' },
-      ]
+      ],
     },
-  ]
-]
+    {
+      title: '泰来县金泽自来水智慧水务建设项目',
+      count: 6,
+      children: [
+        { name: '运营总览', widget: 'WATER_MONITORING_TAILAI', type: '运营' },
+        { name: '水厂总览', widget: 'MANAGE_OVERVIEW_TAILAI', type: '运营' },
+        { name: '管网运营', widget: 'PIPE_MONITORING_TAILAI', type: '运营' },
+        { name: 'DMA总览', widget: 'DMA_OVERVIEW_TAILAI', type: '运营' },
+        { name: '营收总览', widget: 'REVENUE_OVERVIEW_TAILAI', type: '运营' },
+      ],
+    },
+  ],
+];
 
 const getNanoid = (len = 10) => {
-  var orgStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let returnStr = "";
-  for (var i = 0; i < len; i++) {
-    returnStr += orgStr.charAt(Math.floor((Math.random() * orgStr.length)));
+  let orgStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let returnStr = '';
+  for (let i = 0; i < len; i++) {
+    returnStr += orgStr.charAt(Math.floor(Math.random() * orgStr.length));
   }
-  return `${returnStr}`
-}
-
-const Group = (props) => {
+  return `${returnStr}`;
+};
 
-  const id = getNanoid()
-  const ref = useRef(null)
+const Group = props => {
+  const id = getNanoid();
+  const ref = useRef(null);
 
   const [{ dragging }, drag, dragPreview] = useDrag({
     type: 'box',
     item: {
-      id: id,
+      id,
       name: '通栏布局',
       widget: '通栏布局',
-      children: []
+      children: [],
     },
     collect(monitor) {
       return {
-        dragging: monitor.isDragging()
-      }
-    }
+        dragging: monitor.isDragging(),
+      };
+    },
   });
 
-  drag(ref)
+  drag(ref);
 
   const boxClick = () => {
-    props?.boxClick?.()
-  }
+    props?.boxClick?.();
+  };
 
   return (
     <div
@@ -160,20 +166,18 @@ const Group = (props) => {
       className={styles.group}
       style={{ border: dragging ? '2px solid #001bff' : '' }}
       onClick={() => boxClick()}
-    >
-    </div>
-  )
-}
+    />
+  );
+};
 
-const Card = (props) => {
-
-  const ref = useRef(null)
-  const id = getNanoid()
+const Card = props => {
+  const ref = useRef(null);
+  const id = getNanoid();
 
   const [{ dragging }, drag] = useDrag({
     type: 'card',
     item: {
-      id: id,
+      id,
       name: props.name,
       widget: props.widget,
       iconShow: false,
@@ -181,33 +185,33 @@ const Card = (props) => {
       url: '',
       param: '',
     },
-  })
+  });
 
-  drag(ref)
+  drag(ref);
 
   return (
-    <div
-      ref={ref}
-      className={styles.card}
-    >
-      <div className={styles.cardType} type={props.type}>{props.type + '组件'}</div>
+    <div ref={ref} className={styles.card}>
+      <div className={styles.cardType} type={props.type}>
+        {`${props.type}组件`}
+      </div>
       <div className={styles.box}>
-        <div className={styles.cardBox} widget={props.widget}></div>
+        <div className={styles.cardBox} widget={props.widget} />
       </div>
       <div className={styles.swiper}>{props.name}</div>
     </div>
-  )
-}
-
-//卡片分组
-const CardGroup = (props) => {
+  );
+};
 
-  const [shrink, setShrink] = useState(false)
+// 卡片分组
+const CardGroup = props => {
+  const [shrink, setShrink] = useState(false);
 
   return (
     <div className={styles.cardGroup}>
       <div className={styles['g-top']} onClick={() => setShrink(!shrink)}>
-        <CaretRightOutlined style={{ transition: '0.5s all', transform: !shrink ? 'rotate(90deg)' : '' }} />
+        <CaretRightOutlined
+          style={{ transition: '0.5s all', transform: !shrink ? 'rotate(90deg)' : '' }}
+        />
         <span>{props.title}</span>
         <span>{`(${props.count})`}</span>
       </div>
@@ -215,52 +219,52 @@ const CardGroup = (props) => {
         {props.children}
       </div>
     </div>
-  )
-
-}
+  );
+};
 
 const Left = () => {
-
-  const { shema, setShema } = useContext(GlobalStore)
-  const [cardType, setCardType] = useState(cardTypes)
-  const [version, setVersion] = useState({ Version: '', lastVersion: '' })
-  const [activeIndex, setActiveIndex] = useState(0)
-  const [inputValue, setInputValue] = useState('')
+  const { shema, setShema } = useContext(GlobalStore);
+  const [cardType, setCardType] = useState(cardTypes);
+  const [version, setVersion] = useState({ Version: '', lastVersion: '' });
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [inputValue, setInputValue] = useState('');
 
   const cardsFilter = useMemo(() => {
-    let array = []
+    let array = [];
     cards[activeIndex].forEach(v => {
-      let children = v.children.filter(s => cardType.includes(s.type) && (!inputValue || s.name.includes(inputValue)))
+      let children = v.children.filter(
+        s => cardType.includes(s.type) && (!inputValue || s.name.includes(inputValue)),
+      );
       if (children.length) {
-        array.push({ ...v, children })
+        array.push({ ...v, children });
       }
-    })
-    return array
-  }, [cards, cardType, activeIndex, inputValue])
+    });
+    return array;
+  }, [cards, cardType, activeIndex, inputValue]);
 
-  const cardTypeChange = (value) => {
-    setCardType(value)
-  }
+  const cardTypeChange = value => {
+    setCardType(value);
+  };
 
   const update = async () => {
-    const { code, data, msg } = await upgradeCardVersion()
+    const { code, data, msg } = await upgradeCardVersion();
     if (code === 0) {
-      getData()
+      getData();
     } else {
-      message.error(msg)
+      message.error(msg);
     }
-  }
+  };
 
   const getData = async () => {
-    const { code, data } = await getCardVersion()
+    const { code, data } = await getCardVersion();
     if (code === 0) {
-      setVersion(data)
+      setVersion(data);
     }
-  }
+  };
 
   useEffect(() => {
-    getData()
-  }, [])
+    getData();
+  }, []);
 
   return (
     <div className={styles.left}>
@@ -271,7 +275,7 @@ const Left = () => {
         </div>
         <div className={styles['r-right']}>
           <Button
-            size='small'
+            size="small"
             onClick={() => update()}
             style={{ display: version.Version !== version.lastVersion ? 'block' : 'none' }}
           >
@@ -283,68 +287,56 @@ const Left = () => {
         <div className={styles.item}>
           <div className={styles['g-title']}>布局</div>
           <div className={styles['g-content']}>
-            <Group></Group>
+            <Group />
           </div>
         </div>
         <div className={styles.tabs}>
-          {tabs.map((v, i) => {
-            return (
-              <div
-                className={styles.tab}
-                active={`${activeIndex === i}`}
-                onClick={() => setActiveIndex(i)}
-              >
-                {v}
-              </div>
-            )
-          })}
+          {tabs.map((v, i) => (
+            <div
+              className={styles.tab}
+              active={`${activeIndex === i}`}
+              onClick={() => setActiveIndex(i)}
+            >
+              {v}
+            </div>
+          ))}
         </div>
         <div className={styles.item}>
           <div className={styles.search}>
             <Search
               placeholder="请输入关键字搜索"
               value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
+              onChange={e => setInputValue(e.target.value)}
               style={{ width: 250 }}
             />
           </div>
           <div className={styles['g-checks']}>
-            <Checkbox.Group
-              style={{ width: '100%' }}
-              value={cardType}
-              onChange={cardTypeChange}
-            >
+            <Checkbox.Group style={{ width: '100%' }} value={cardType} onChange={cardTypeChange}>
               <Row>
-                {
-                  cardTypes.map(v => {
-                    return (
-                      <Col key={v} style={{ display: 'flex', justifyContent: 'center', marginLeft: '10px' }}>
-                        <Checkbox value={v}>{v}</Checkbox>
-                      </Col>
-                    )
-                  })
-                }
+                {cardTypes.map(v => (
+                  <Col
+                    key={v}
+                    style={{ display: 'flex', justifyContent: 'center', marginLeft: '10px' }}
+                  >
+                    <Checkbox value={v}>{v}</Checkbox>
+                  </Col>
+                ))}
               </Row>
             </Checkbox.Group>
           </div>
           <div className={styles['g-content']}>
-            {
-              cardsFilter.map(v => {
-                return (
-                  <CardGroup key={v.title} {...v}>
-                    {
-                      v.children.map(s => <Card key={s.name} {...s}></Card>)
-                    }
-                  </CardGroup>
-                )
-              })
-            }
+            {cardsFilter.map(v => (
+              <CardGroup key={v.title} {...v}>
+                {v.children.map(s => (
+                  <Card key={s.name} {...s} />
+                ))}
+              </CardGroup>
+            ))}
           </div>
         </div>
       </div>
     </div>
-  )
-
-}
+  );
+};
 
-export default Left
+export default Left;
\ No newline at end of file

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less

@@ -272,6 +272,31 @@
             background: url('@{imgSrc}/系统使用排名.png');
             background-size: 100% 100%;
           }
+          &[widget='WATER_MONITORING_TAILAI'] {
+            height: 140px;
+            background: url('@{imgSrc}/泰来运营总览.png');
+            background-size: 100% 100%;
+          }
+          &[widget='MANAGE_OVERVIEW_TAILAI'] {
+            height: 50px;
+            background: url('@{imgSrc}/泰来水厂总览.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PIPE_MONITORING_TAILAI'] {
+            height: 140px;
+            background: url('@{imgSrc}/泰来管网运营.png');
+            background-size: 100% 100%;
+          }
+          &[widget='DMA_OVERVIEW_TAILAI'] {
+            height: 80px;
+            background: url('@{imgSrc}/泰来DMA总览.png');
+            background-size: 100% 100%;
+          }
+          &[widget='REVENUE_OVERVIEW_TAILAI'] {
+            height: 80px;
+            background: url('@{imgSrc}/泰来营收总览.png');
+            background-size: 100% 100%;
+          }
         }
       }
       .cardType {