fix: 工作台升级

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

@@ -103,7 +103,7 @@
       background-size: 100% 100%;
     }
     &[widget='LARGE_MONITORING'] {
-      height: 120px;
+      height: 180px;
       background: url('@{imgSrc}/card12.png');
       background-size: 100% 100%;
     }

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

 @imgSrc: '@/assets/images/mobileConfig/WorkDesign';
 .container {
-  width: calc(100% - 660px);
+  flex: 1;
   height: 100%;
   background: white;
   margin: 0 10px;

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

-import React, { useState, useRef, useContext, useMemo } from 'react'
-import { Checkbox, Row, Col } from 'antd'
+import React, { useState, useRef, useContext, useMemo, useEffect } from 'react'
+import { Checkbox, Row, Col, Button, message } 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 moment from 'moment'
 
 const cardTypes = ['管理', '执行', '运营']
 
@@ -128,7 +130,9 @@ const Card = (props) => {
       className={styles.card}
     >
       <div className={styles.cardType} type={props.type}>{props.type + '组件'}</div>
-      <div className={styles.cardBox} widget={props.widget}></div>
+      <div className={styles.box}>
+        <div className={styles.cardBox} widget={props.widget}></div>
+      </div>
       <div className={styles.swiper}>{props.name}</div>
     </div>
   )
@@ -158,6 +162,7 @@ const Left = () => {
 
   const { shema, setShema } = useContext(GlobalStore)
   const [cardType, setCardType] = useState(cardTypes)
+  const [version, setVersion] = useState({ Version: '', lastVersion: '' })
 
   const cardsFilter = useMemo(() => {
     let array = []
@@ -174,9 +179,43 @@ const Left = () => {
     setCardType(value)
   }
 
+  const update = async () => {
+    const { code, data, msg } = await upgradeCardVersion()
+    if (code === 0) {
+      getData()
+    } else {
+      message.error(msg)
+    }
+  }
+
+  const getData = async () => {
+    const { code, data } = await getCardVersion()
+    if (code === 0) {
+      setVersion(data)
+    }
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
   return (
     <div className={styles.left}>
-      <div className={styles.header}>组件库</div>
+      <div className={styles.header}>
+        <div className={styles['r-left']}>
+          <span style={{ paddingRight: '3px' }}>组件库</span>
+          <span style={{ fontSize: '10px' }}>V{version.lastVersion}</span>
+        </div>
+        <div className={styles['r-right']}>
+          <Button
+            size='small'
+            onClick={() => update()}
+            style={{ display: version.Version !== version.lastVersion ? 'block' : 'none' }}
+          >
+            立即更新
+          </Button>
+        </div>
+      </div>
       <div className={styles['l-content']}>
         <div className={styles.item}>
           <div className={styles['g-title']}>布局</div>

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

 @imgSrc: '@/assets/images/mobileConfig/WorkDesign';
 .left {
-  width: 320px;
+  width: 600px;
   height: 100%;
   background: white;
   .header {
-    padding-left: 10px;
-    height: 40px;
-    line-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
     border-bottom: 1px solid #dbdbdb;
+    .r-left {
+      font-size: 15px;
+      padding-right: 5px;
+      height: 40px;
+      line-height: 40px;
+    }
+    .r-right {}
   }
   .l-content {
     height: calc(100% - 40px);
@@ -35,74 +43,83 @@
       }
     }
     .card {
-      width: 100%;
+      width: 32%;
+      height: 150px;
       border-radius: 4px;
       background: #f4f4f4;
       margin-top: 7px;
+      margin-left: 0.8%;
       padding: 10px;
       position: relative;
-      .cardBox {
+      .box {
         width: 100%;
         height: 100%;
-        &[widget='OVERVIEW'] {
-          height: 50px;
-          background: url('@{imgSrc}/card1.png');
-          background-size: 100% 100%;
-        }
-        &[widget='WATER_OVERVIEW'] {
-          height: 100px;
-          background: url('@{imgSrc}/card2.png');
-          background-size: 100% 100%;
-        }
-        &[widget='WATER_CHART'] {
-          height: 130px;
-          background: url('@{imgSrc}/card3.png');
-          background-size: 100% 100%;
-        }
-        &[widget='PIPEMONITORING'] {
-          height: 200px;
-          background: url('@{imgSrc}/card4.png');
-          background-size: 100% 100%;
-        }
-        &[widget='PIPEGATHER'] {
-          height: 80px;
-          background: url('@{imgSrc}/card5.png');
-          background-size: 100% 100%;
-        }
-        &[widget='PIPEINSPECTION'] {
-          height: 160px;
-          background: url('@{imgSrc}/card6.png');
-          background-size: 100% 100%;
-        }
-        &[widget='MAINTENANCEORDER'] {
-          height: 290px;
-          background: url('@{imgSrc}/card7.png');
-          background-size: 100% 100%;
-        }
-        &[widget='OPERATIONAL_OVERVIEW'] {
-          height: 110px;
-          background: url('@{imgSrc}/card8.png');
-          background-size: 100% 100%;
-        }
-        &[widget='PUMP_STATUS'] {
-          height: 120px;
-          background: url('@{imgSrc}/card9.png');
-          background-size: 100% 100%;
-        }
-        &[widget='PUMP_MAINTAIN'] {
-          height: 130px;
-          background: url('@{imgSrc}/card10.png');
-          background-size: 100% 100%;
-        }
-        &[widget='REVENUE_OVERVIEW'] {
-          height: 120px;
-          background: url('@{imgSrc}/card11.png');
-          background-size: 100% 100%;
-        }
-        &[widget='LARGE_MONITORING'] {
-          height: 120px;
-          background: url('@{imgSrc}/card12.png');
-          background-size: 100% 100%;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        .cardBox {
+          width: 100%;
+          height: 100%;
+          &[widget='OVERVIEW'] {
+            height: 50px;
+            background: url('@{imgSrc}/card1.png');
+            background-size: 100% 100%;
+          }
+          &[widget='WATER_OVERVIEW'] {
+            height: 100px;
+            background: url('@{imgSrc}/card2.png');
+            background-size: 100% 100%;
+          }
+          &[widget='WATER_CHART'] {
+            height: 130px;
+            background: url('@{imgSrc}/card3.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PIPEMONITORING'] {
+            height: 200px;
+            background: url('@{imgSrc}/card4.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PIPEGATHER'] {
+            height: 80px;
+            background: url('@{imgSrc}/card5.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PIPEINSPECTION'] {
+            height: 160px;
+            background: url('@{imgSrc}/card6.png');
+            background-size: 100% 100%;
+          }
+          &[widget='MAINTENANCEORDER'] {
+            height: 240px;
+            background: url('@{imgSrc}/card7.png');
+            background-size: 100% 100%;
+          }
+          &[widget='OPERATIONAL_OVERVIEW'] {
+            height: 90px;
+            background: url('@{imgSrc}/card8.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PUMP_STATUS'] {
+            height: 120px;
+            background: url('@{imgSrc}/card9.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PUMP_MAINTAIN'] {
+            height: 130px;
+            background: url('@{imgSrc}/card10.png');
+            background-size: 100% 100%;
+          }
+          &[widget='REVENUE_OVERVIEW'] {
+            height: 120px;
+            background: url('@{imgSrc}/card11.png');
+            background-size: 100% 100%;
+          }
+          &[widget='LARGE_MONITORING'] {
+            height: 180px;
+            background: url('@{imgSrc}/card12.png');
+            background-size: 100% 100%;
+          }
         }
       }
       &:hover {
@@ -160,5 +177,8 @@
   }
   .g-cards {
     overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
   }
 }
\ No newline at end of file

src/services/mobileConfig/api.js

@@ -114,3 +114,9 @@ export const saveScheme = parmas => post(`${PUBLISH_SERVICE}/WebSite/AppWorkSpac
 
 //删除方案
 export const deleteScheme = parmas => post(`${PUBLISH_SERVICE}/WebSite/AppWorkSpace_DeleteScheme`, parmas);
+
+//获取版本
+export const getCardVersion = parmas => get(`${PUBLISH_SERVICE}/WebSite/AppWorkSpace_GetCardVersion`, parmas);
+
+//更新版本
+export const upgradeCardVersion = parmas => post(`${PUBLISH_SERVICE}/WebSite/AppWorkSpace_UpgradeCardVersion`, parmas);