fix: 工作台2.0升级

98bb8971 · 田翔 · d27f3c5c · 98bb8971 · 98bb8971 · 98bb8971
Commit 98bb8971 authored Dec 22, 2023 by 田翔
9 changed files
--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.js
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.js
@@ -67,7 +67,7 @@ const Group = (props) => {
    shema?.work.forEach(v => {
      array.push({ ...v, active: item.id === v.id, children: v.children.map(v => ({ ...v, active: false })) })
    })
-    setShema({ ...shema, work: array, active: false })
+    setShema({ ...shema, work: array, active: false, carousel: { ...shema.carousel, active: false } })
  }

  const deleteGroup = (e, item) => {
@@ -106,7 +106,7 @@ const Group = (props) => {
      })
      array.push({ ...v, active: false, children })
    })
-    setShema({ ...shema, work: array, active: false })
+    setShema({ ...shema, work: array, active: false, carousel: { ...shema.carousel, active: false } })
  }

  return (
@@ -114,6 +114,10 @@ const Group = (props) => {
      className={styles.group}
      onClick={(e) => groupClick(e, props)}
      active={`${props.active}`}
+      style={{
+        background: props.hideBackground ? '' : '#FFFFFF',
+        marginTop: props.hideBackground ? '0' : '10px'
+      }}
      ref={ref}
    >
      {

--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.less
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.less
 @imgSrc: '@/assets/images/mobileConfig/WorkDesign';
 .group {
  margin-top: 10px;
-  background: #FFFFFF;
  border-radius: 5px;
  width: 100%;
  min-height: 100px;
@@ -107,5 +106,35 @@
      background: url('@{imgSrc}/card12.png');
      background-size: 100% 100%;
    }
+    &[widget='OPERATIONSOVERVIEW'] {
+      height: 60px;
+      background: url('@{imgSrc}/card101.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PIPELINEASSETS'] {
+      height: 205px;
+      background: url('@{imgSrc}/card102.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PIPELINECOLLECTION'] {
+      height: 43px;
+      background: url('@{imgSrc}/card103.png');
+      background-size: 100% 100%;
+    }
+    &[widget='INSPECTIONMAINTENANCE'] {
+      height: 57px;
+      background: url('@{imgSrc}/card104.png');
+      background-size: 100% 100%;
+    }
+    &[widget='EVENTWORKORDER'] {
+      height: 46px;
+      background: url('@{imgSrc}/card105.png');
+      background-size: 100% 100%;
+    }
+    &[widget='SUBSIDIARYBUSINESSRANKING'] {
+      height: 180px;
+      background: url('@{imgSrc}/card106.png');
+      background-size: 100% 100%;
+    }
  }
 }
\ No newline at end of file
--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js
 import React, { useRef, useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react'
 import styles from './index.less'
-import { DownOutlined, VerticalAlignTopOutlined, UpOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'
+import {
+  DownOutlined,
+  VerticalAlignTopOutlined,
+  UpOutlined,
+  VerticalAlignBottomOutlined,
+  CheckOutlined,
+  CaretDownOutlined,
+} from '@ant-design/icons'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { GlobalStore } from '../index'
 import Group from './Group'
 import moment from 'moment'
 import { getSiteTree } from '@/services/siteManage/api'
+import { Carousel } from 'antd'

 const btns = [
  { title: '置顶', icon: <VerticalAlignTopOutlined /> },
@@ -24,6 +32,7 @@ const Container = (props, ref) => {
  const moblieRef = useRef(null)
  const [currentSite, setCurrentSite] = useState('永吉水务有限公司')
  const { shema, setShema } = useContext(GlobalStore)
+  const { carousel } = shema

  const [, drop] = useDrop(() => {
    return {
@@ -81,17 +90,20 @@ const Container = (props, ref) => {
    setShema({ ...shema, work: array, active: false })
  }

+  const carouselClick = (e) => {
+    e.stopPropagation()
+    let array = []
+    shema?.work.forEach(v => {
+      array.push({ ...v, active: false, children: v.children.map(v => ({ ...v, active: false })) })
+    })
+    setShema({ ...shema, work: array, active: false, carousel: { ...shema.carousel, active: true } })
+  }
+
+  const getMoblieCenter = () => {
+    if (shema.themeStyle === '个人版') {
      return (
-    <div className={styles.container}>
-      <div className={styles.content}>
-        <div
-          ref={moblieRef}
-          className={styles.moblie}
-          onClick={() => pageClick()}
-          active={`${shema.active}`}
-        >
        <div
-            className={styles.moblieCenter}
+          className={styles['moblieCenter-a']}
          name={shema.theme}
        >
          <div className={styles['m-info']}>
@@ -112,6 +124,61 @@ const Container = (props, ref) => {
            }
          </div>
        </div>
+      )
+    }
+    return (
+      <div
+        className={styles['moblieCenter-b']}
+        name={shema.theme}
+      >
+        <div
+          className={styles.slideShow}
+          onClick={(e) => carouselClick(e)}
+          active={`${carousel?.active}`}
+        >
+          <div className={styles.top}>
+            <div className={styles['top-left']}>
+              <span className={styles['l-icon']}></span>
+              <span className={styles['l-text']}>{currentSite}</span>
+              <CaretDownOutlined style={{ color: '#999999' }} />
+            </div>
+            <div className={styles['top-right']}>
+              <span className={styles['r-icon']}></span>
+              <span className={styles['r-text']}>{currentDate}</span>
+            </div>
+          </div>
+          <Carousel autoplay>
+            {
+              shema?.carousel?.imgUrls?.map(v => {
+                return (
+                  <div className={styles['carousel-item']}>
+                    <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/PandaOMS/OMS/FileCenter/DownLoadFiles?module=图库&filePath=${v}`} />
+                  </div>
+                )
+              })
+            }
+          </Carousel>
+        </div>
+        <div style={{ padding: '10px' }}>
+          {
+            shema?.work?.map((v, i) => <Group key={v.id} index={i} {...v} />)
+          }
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <div
+          ref={moblieRef}
+          className={styles.moblie}
+          onClick={() => pageClick()}
+          active={`${shema.active}`}
+          style={{ background: shema?.background }}
+        >
+          {getMoblieCenter()}
        </div>
        <div className={styles['c-btns']}>
          {

--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less
@@ -46,7 +46,7 @@
      &::-webkit-scrollbar {
        width: 0;
      }
-      .moblieCenter {
+      .moblieCenter-a {
        padding-top: 110px;
        height: 650px;
        position: relative;
@@ -94,6 +94,67 @@
          }
        }
      }
+      .moblieCenter-b {
+        height: 650px;
+        position: relative;
+        .slideShow {
+          position: relative;
+          width: 100%;
+          height: 150px;
+          .top {
+            position: absolute;
+            width: 100%;
+            padding: 10px;
+            z-index: 99;
+            display: flex;
+            justify-content: space-between;
+            color: black;
+            .top-left {
+              display: flex;
+              align-items: center;
+              padding: 2px 10px;
+              border-radius: 15px;
+              background: #FFFFFF;
+              .l-icon {
+                width: 16px;
+                height: 16px;
+                background: url('@{imgSrc}/公司图标.png');
+                background-size: 100% 100%;
+                margin-right: 10px;
+              }
+              .l-text {
+                font-size: 14px;
+                margin-right: 10px;
+              }
+            }
+            .top-right {
+              padding: 2px 10px;
+              border-radius: 15px;
+              background: #FFFFFF;
+              align-items: center;
+              display: flex;
+              align-items: center;
+              .r-icon {
+                width: 16px;
+                height: 16px;
+                background: url('@{imgSrc}/时间图标.png');
+                background-size: 100% 100%;
+                margin-right: 10px;
+              }
+              .r-text {
+                font-size: 14px;
+              }
+            }
+          }
+          &[active='true'] {
+            border: 2px solid #001bff;
+          }
+          .carousel-item {
+            height: 150px;
+            background: #52A2E5;
+          }
+        }
+      }
      &[active='true'] {
        border: 2px solid #001bff;
      }

--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js
@@ -59,7 +59,18 @@ const cards = [
    },
  ],
  [
-    
+    {
+      title: '江西水务集团GIS项目',
+      count: 1,
+      children: [
+        { name: '运营总览', widget: 'OPERATIONSOVERVIEW', type: '运营' },
+        { name: '管网资产', widget: 'PIPELINEASSETS', type: '运营' },
+        { name: '管网采集', widget: 'PIPELINECOLLECTION', type: '运营' },
+        { name: '巡检运维', widget: 'INSPECTIONMAINTENANCE', type: '运营' },
+        { name: '事件工单', widget: 'EVENTWORKORDER', type: '运营' },
+        { name: '子公司业务排行', widget: 'SUBSIDIARYBUSINESSRANKING', type: '运营' },
+      ]
+    },
  ]
 ]

@@ -243,7 +254,6 @@ const Left = () => {
          })}
        </div>
        <div className={styles.item}>
-          {/* <div className={styles['g-title']} style={{ paddingBottom: '0' }}>卡片组件</div> */}
          <div className={styles['g-checks']}>
            <Checkbox.Group
              style={{ width: '100%' }}

--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less
@@ -50,8 +50,7 @@
        font-weight: 700;
      }
      .g-checks {
-        // padding: 9px 0;
-        // background: linear-gradient(to top, #F3F3F3, #FFFFFF);
+        margin: 10px 0 5px 0;
      }
      .g-content {
        padding: 0 10px;
@@ -142,6 +141,36 @@
            background: url('@{imgSrc}/card12.png');
            background-size: 100% 100%;
          }
+          &[widget='OPERATIONSOVERVIEW'] {
+            height: 60px;
+            background: url('@{imgSrc}/card101.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PIPELINEASSETS'] {
+            height: 205px;
+            background: url('@{imgSrc}/card102.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PIPELINECOLLECTION'] {
+            height: 43px;
+            background: url('@{imgSrc}/card103.png');
+            background-size: 100% 100%;
+          }
+          &[widget='INSPECTIONMAINTENANCE'] {
+            height: 57px;
+            background: url('@{imgSrc}/card104.png');
+            background-size: 100% 100%;
+          }
+          &[widget='EVENTWORKORDER'] {
+            height: 46px;
+            background: url('@{imgSrc}/card105.png');
+            background-size: 100% 100%;
+          }
+          &[widget='SUBSIDIARYBUSINESSRANKING'] {
+            height: 180px;
+            background: url('@{imgSrc}/card106.png');
+            background-size: 100% 100%;
+          }
        }
      }
      &:hover {

--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js
--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.less
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.less
@@ -19,11 +19,91 @@
        font-size: 14px;
        font-weight: 600;
      }
+      .mimGroup {
+        padding-left: 13px;
+      }
      .g-content {
+        width: 100%;
+        padding: 0 20px;
+        .themeStyles {
+          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
-        padding: 0 20px;
+          .themeStyle {
+            width: 120px;
+            height: 120px;
+            border-radius: 5px;
+            overflow: hidden;
+            position: relative;
+            &:hover {
+              cursor: pointer;
+            }
+            &[name='个人版'] {
+              background: url('@{imgSrc}/个人版.png');
+              background-size: 100% 100%;
+              &[ative='true'] {
+                border: 2px solid #3594FF;
+              }
+            }
+            &[name='企业版'] {
+              background: url('@{imgSrc}/企业版.png');
+              background-size: 100% 100%;
+              &[ative='true'] {
+                border: 2px solid #20B896;
+              }
+            }
+            .s-icon {
+              color: white;
+              width: 100%;
+              width: 18px;
+              height: 18px;
+              top: 5px;
+              right: 5px;
+              position: absolute;
+              &[name='个人版'] {
+                background: url('@{imgSrc}/个人版-图标.png');
+                background-size: 100% 100%;
+              }
+              &[name='企业版'] {
+                background: url('@{imgSrc}/企业版-图标.png');
+                background-size: 100% 100%;
+              }
+            }
+            .s-text {
+              color: white;
+              width: 100%;
+              height: 25px;
+              bottom: 0;
+              left: 0;
+              text-align: center;
+              position: absolute;
+            }
+          }
+        }
+        .c-background {
+          margin-top: 10px;
+          width: 100%;
+          display: flex;
+          .d-item {
+            margin-right: 10px;
+            width: 30px;
+            height: 30px;
+            border: 1px solid #C8C8C8;
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &:hover {
+              cursor: pointer;
+            }
+          }
+        }
+        .c-backImg {
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          margin-top: 10px;
          .c-center {
            .c-img {
              width: 120px;
@@ -60,10 +140,21 @@
        }
      }
    }
+  }
  .comSetting {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
+    .carouselSetting {
+      .g-title {
+        padding: 10px;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .g-content {
+        padding: 0 20px;
+      }
+    }
    .group {
      .g-title {
        padding: 10px;
@@ -73,8 +164,8 @@
      .g-content {
        padding: 0 20px;
        .c-item {
-          display: flex;
          align-items: center;
+          margin-bottom: 10px;
        }
      }
    }

--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/index.js
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/index.js
@@ -39,7 +39,10 @@ const initShema = {
  work: [],
  active: true,
  type: '运营组件',
+  theme: '供水主题背景',
+  themeStyle: '个人版',
 }
+
 const Designer = (props) => {

  const { currentCard, } = props
@@ -70,6 +73,7 @@ const Designer = (props) => {
      formData.append('singleFile', file);
      const { code, data, msg } = await UploadSingleFile(formData)
      if (code === 0) {
+        console.log('shema', shema)
        props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema), '路径': data })
      } else {
        message.error({ content: msg })