Merge branch 'master' of https://g.civnet.cn:8443/ReactWeb5/maintenance

package.json

@@ -129,7 +129,7 @@
         "jszip": "^3.10.1",
         "lodash": "4.17.11",
         "minimist": "1.2.0",
-        "panda-xform": "6.10.2",
+        "panda-xform": "6.10.17",
         "parseForm": "^2.3.8",
         "prop-types": "15.7.2",
         "qrcode.react": "^3.1.0",

src/assets/images/bsmanager/patrolMaintenance/base/tablemanager/矢量智能对象.svg

+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="7783px" height="2246px">
+</svg>

src/pages/bsmanager/base/tablemanager/components/ChooseTableType.jsx

@@ -5,6 +5,45 @@ import {
 } from '@ant-design/icons';
 import styles from './ChooseTableType.less';
 
+const list = [
+  {
+    title: '流程类表单',
+    value: '事件工单表',
+    mTitle: '用于事件、工单流程配置',
+    describe: '水司日常进行管网维修、漏点上报、热线咨询等业务流程流转。',
+  },
+  {
+    title: '台账表单',
+    value: '台账表',
+    mTitle: '用于记录资产信息',
+    describe: '水司用于供应商管理、材料管理、设备信息管理等。',
+  },
+  {
+    title: '设备表单',
+    value: '设备表',
+    mTitle: '用于记录维保设备信息',
+    describe: '水司日常管理一些设备，例如水厂、泵房、车间等。',
+  },
+  {
+    title: '工单反馈表',
+    value: '工单反馈表',
+    mTitle: '用于工单流程中的关联表单配置',
+    describe: '水司在进行现场维修时填写维修清单，该表与工单深度绑定进行关联查询。',
+  },
+  {
+    title: '设备维保反馈表',
+    value: '设备反馈表',
+    mTitle: '用于设备维保中的设备、扫码反馈配置等',
+    describe: '水司人员进行设备维保时记录设备的维保信息，可基于某个字段值（例如设备状态）联动发起工单。',
+  },
+  {
+    title: 'GIS巡检反馈表',
+    value: 'GIS反馈表',
+    mTitle: '用于GIS设备巡检到位反馈配置',
+    describe: '水司人员日常进行管网巡检到位后，可配置该表单，可基于某个字段值（例如是否有漏点）联动发起工单。',
+  }
+]
+
 const ChooseTableType = props => {
   const { defalutFields, visible, onCancel, onTableClick } = props;
   const [tableList, setTableList] = useState([]);
@@ -39,12 +78,13 @@ const ChooseTableType = props => {
     onCancel();
     onTableClick(val);
   };
+
   return (
     <div>
       <Modal
         visible={visible}
         title="选择表模型"
-        width="400px"
+        width="955px"
         onOk={onFinish}
         onCancel={onCancel}
         maskClosable={false}
@@ -53,34 +93,15 @@ const ChooseTableType = props => {
         centered
       >
         <div className={styles.content}>
-          {Object.keys(tableList).map(item => (
-            <div className={styles.groupBox} key={item}>
-              <div className={styles.headerBox}>
-                <div className={styles.line} />
-                <div className={styles.groupName}>
-                  {item}
-                  <Tooltip placement="top" title={textObj[item]} arrowPointAtCenter>
-                    <span className={styles.serchIcon}><QuestionCircleOutlined /></span>
-                  </Tooltip>
-                </div>
-              </div>
-              <div className={styles.tableContent}>
-                {tableList[item].map(ele => {
-                  if (!ele.hidden) {
-                    return (
-                      <div
-                        className={styles.tableBox}
-                        key={ele.value}
-                        onClick={() => createTable(ele.value)}
-                      >
-                        <div className={styles.imgBox}>
-                          <img src={`${window.location.origin}/civmanage/${ele.icon}`} alt="" />
-                        </div>
-                        <div className={styles.title}>{ele.value}</div>
-                      </div>
-                    );
-                  }
-                })}
+          {list.map(v => (
+            <div className={styles.groupBox} title={v.title} key={v.title} onClick={() => createTable(v.value)}>
+              <div className={styles['g-icon']} title={v.title}></div>
+              {['流程类表单', '台账表单'].includes(v.title) ? <div className={styles['g-iconM']} title={v.title}>常用</div> : null}
+              <div className={styles['g-title']}>{v.title}</div>
+              <div className={styles['g-mtitle']}>{v.mTitle}</div>
+              <div className={styles['g-describe']}>
+                <span>使用场景：</span>
+                <span style={{ color: '#8A8A8A' }}>{v.describe}</span>
               </div>
             </div>
           ))}

src/pages/bsmanager/base/tablemanager/components/ChooseTableType.less

+@imgSrc: '@/assets/images/bsmanager/patrolMaintenance/base/tablemanager';
+
 .content {
-  height: 430px;
-  overflow-y: scroll;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
 
   .groupBox {
-    width: 100%;
-    margin-bottom: 30px;
+    width: 32%;
+    margin-top: 10px;
+    position: relative;
+    border-radius: 7px;
+    padding: 10px;
+    transition: all 0.3s ease-in-out;
+
+    &:hover {
+      cursor: pointer;
+      transform: scale(1.1);
+    }
+
+    &[title='流程类表单'] {
+      background: linear-gradient(to bottom, #EFF5FF, #EEF6FF);
+    }
+
+    &[title='台账表单'] {
+      background: linear-gradient(to bottom, #FDF4DB, #FDF8E9);
+    }
+
+    &[title='设备表单'] {
+      background: linear-gradient(to bottom, #FEE9E4, #FFF3F0);
+    }
+
+    &[title='工单反馈表'] {
+      background: linear-gradient(to bottom, #EAF7EE, #F1F9F3);
+    }
+
+    &[title='设备维保反馈表'] {
+      background: linear-gradient(to bottom, #F0F0FE, #F5F5FF);
+    }
+
+    &[title='GIS巡检反馈表'] {
+      background: linear-gradient(to bottom, #E6F7FC, #EFFAFD);
+    }
 
-    .headerBox {
+    .g-icon {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 32px;
+      height: 32px;
 
-      display: flex;
-      align-items: center;
-      justify-content: left;
+      &[title='流程类表单'] {
+        background: url('@{imgSrc}/流程类表单.png');
+        background-size: 100% 100%;
+      }
 
-      .line {
-        height: 12px;
-        width: 3px;
-        background-color: #3D78FF;
+      &[title='台账表单'] {
+        background: url('@{imgSrc}/台账表单.png');
+        background-size: 100% 100%;
       }
 
-      .groupName {
-        margin-left: 7px;
-
-        .serchIcon {
-          position: relative;
-          top: 0;
-          display: inline-block;
-          width: 12px;
-          height: 12px;
-          transform: scale(0.9);
-          margin-left: 2px;
-          &:hover {
-            cursor: pointer;
-          }
-        }
+      &[title='设备表单'] {
+        background: url('@{imgSrc}/设备表单.png');
+        background-size: 100% 100%;
       }
 
+      &[title='工单反馈表'] {
+        background: url('@{imgSrc}/工单反馈表.png');
+        background-size: 100% 100%;
+      }
 
-    }
+      &[title='设备维保反馈表'] {
+        background: url('@{imgSrc}/设备维保反馈表.png');
+        background-size: 100% 100%;
+      }
 
-    .tableContent {
-      display: flex;
-
-      .tableBox {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-right: 10px;
-        margin-top: 10px;
-        width: 100px;
-        cursor: pointer;
-
-        .imgBox {
-          display: flex;
-          justify-content: center;
-          width: 100px;
-          height: 50px;
-          transition: transform 1s inherit;
-
-          img {
-            width: 50px;
-            height: 50px;
-          }
-
-        }
-
-        .imgBox:hover {
-          transform: scale(1.1);
-        }
-
-        .title {
-          text-align: center;
-          margin-top: 5px;
-        }
+      &[title='GIS巡检反馈表'] {
+        background: url('@{imgSrc}/GIS巡检反馈表.png');
+        background-size: 100% 100%;
       }
     }
+
+    .g-iconM {
+      position: absolute;
+      right: 20px;
+      top: 0;
+      width: 34px;
+      height: 34px;
+      background: url('@{imgSrc}/常用.png');
+      background-size: 100% 100%;
+      color: white;
+      text-align: center;
+      font-size: 12px;
+      padding-top: 3px;
+    }
+
+    .g-title {
+      padding-left: 38px;
+      font-weight: 500;
+    }
+
+    .g-mtitle {
+      padding-left: 38px;
+      font-size: 12px;
+      margin-top: 5px;
+      margin-bottom: 15px;
+      color: #666666;
+    }
+
+    .g-describe {
+      background: #FFFFFF;
+      border-radius: 5px;
+      padding: 5px;
+      font-size: 12px;
+    }
+
   }
 }
\ No newline at end of file