From dd6ae202ebc800f363710823fa25edb85d86370c Mon Sep 17 00:00:00 2001
From: fandaiyang <1147379969@qq.com>
Date: Sat, 2 Nov 2024 17:18:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=8C=E4=B8=9A=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Common/Sign/IndustrySign/index.tsx  |  5 ++
 .../Common/Sign/IndustrySystem/index.less     | 31 ++++++++++
 .../Common/Sign/IndustrySystem/index.tsx      | 60 +++++++++++++++++++
 src/pages/IndustryOperation/index.less        |  1 +
 src/pages/IndustryOperation/index.tsx         | 23 ++++++-
 5 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Common/Sign/IndustrySystem/index.less
 create mode 100644 src/pages/Common/Sign/IndustrySystem/index.tsx

diff --git a/src/pages/Common/Sign/IndustrySign/index.tsx b/src/pages/Common/Sign/IndustrySign/index.tsx
index d08d31d0..a0f9be8b 100644
--- a/src/pages/Common/Sign/IndustrySign/index.tsx
+++ b/src/pages/Common/Sign/IndustrySign/index.tsx
@@ -10,6 +10,11 @@ import LineCharts from './LineCharts'
 import EventPicList from '@/pages/Common/components/EventPicList'
 import { eventList } from '@/mock/event'
 
+/**
+ * 
+ * @description 行业体征部分
+ */
+
 const IndustrySign = () => {
 
   const params = {
diff --git a/src/pages/Common/Sign/IndustrySystem/index.less b/src/pages/Common/Sign/IndustrySystem/index.less
new file mode 100644
index 00000000..026f95fa
--- /dev/null
+++ b/src/pages/Common/Sign/IndustrySystem/index.less
@@ -0,0 +1,31 @@
+.wrap {
+  .header {
+    font-size: 16px;
+    font-weight: 400;
+    color: #bccee9;
+    div:first-child {
+      width: 300px;
+      padding-left: 40px;
+    }
+  }
+  .list {
+    flex: 1;
+    margin-top: 20px;
+    .listItem {
+      min-height: 50px;
+      border-radius: 16px;
+      background: rgba(57, 122, 183, 0.2);
+      font-size: 20px;
+      font-weight: 700;
+      color: #ffffff;
+      margin-bottom: 10px;
+      .name {
+        width: 300px;
+        padding-left: 40px;
+      }
+      .subName {
+        padding: 10px 0;
+      }
+    }
+  }
+}
diff --git a/src/pages/Common/Sign/IndustrySystem/index.tsx b/src/pages/Common/Sign/IndustrySystem/index.tsx
new file mode 100644
index 00000000..278fbdce
--- /dev/null
+++ b/src/pages/Common/Sign/IndustrySystem/index.tsx
@@ -0,0 +1,60 @@
+
+import { Flex } from 'antd'
+import styles from './index.less'
+
+/**
+ * @description 已接入行业系统
+ */
+
+const IndustrySystem = () => {
+
+  const list = [
+    {
+      name: '审批监督处',
+      sub: [
+        {
+          name: '成都市城管委信用信息报送系统'
+        }
+      ]
+    },
+    {
+      name: '执法总队',
+      sub: [
+        {
+          name: '违法建设治理系统'
+        },
+        {
+          name: '综合执法'
+        },
+        {
+          name: '车载监控平台'
+        }
+      ]
+    }
+  ]
+
+  return (
+    <Flex vertical className={styles.wrap}>
+      <Flex className={styles.header}>
+        <div>系统使用单位</div>
+        <div>政务信息化系统</div>
+      </Flex>
+      <div className={styles.list}>
+        {
+          list.map((item) => (
+            <Flex className={styles.listItem} align='center' key={item.name}>
+              <div className={styles.name}>{`${item.name}(${item.sub.length})`}</div>
+              <div>
+                {item.sub.map((subItem) => (
+                  <div key={subItem.name} className={styles.subName}>{subItem.name}</div>
+                ))}
+              </div>
+            </Flex>
+          ))
+        }
+      </div>
+    </Flex>
+  )
+}
+
+export default IndustrySystem
\ No newline at end of file
diff --git a/src/pages/IndustryOperation/index.less b/src/pages/IndustryOperation/index.less
index ba191d00..58ff6e00 100644
--- a/src/pages/IndustryOperation/index.less
+++ b/src/pages/IndustryOperation/index.less
@@ -17,6 +17,7 @@
       color: rgb(179, 214, 247);
       font-size: 20px;
       font-weight: 400;
+      cursor: pointer;
 
       span {
         font-family: D-DIN;
diff --git a/src/pages/IndustryOperation/index.tsx b/src/pages/IndustryOperation/index.tsx
index bc070d1c..b0fd0596 100644
--- a/src/pages/IndustryOperation/index.tsx
+++ b/src/pages/IndustryOperation/index.tsx
@@ -1,6 +1,6 @@
 import { DoubleRightOutlined } from '@ant-design/icons';
 import { Flex, Space } from 'antd';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import Advertisement from './components/Advertisement';
 import Card from './components/Card';
 import DigitalUrbanManagement from './components/DigitalUrbanManagement';
@@ -11,9 +11,19 @@ import RaiseDust from './components/RaiseDust';
 import RefuseDisposal from './components/RefuseDisposal';
 import RoadAndBridge from './components/RoadAndBridge';
 import styles from './index.less';
+import Modal from '@/components/HncyModal'
+import IndustrySystem from '@/pages/Common/Sign/IndustrySystem'
+
 
 /** @module 行业运行情况  */
 const IndustryOperation: React.FC = () => {
+  const [modalOpt, setModalOpt] = useState<{
+    open: boolean;
+    title: string;
+  }>({
+    open: false,
+    title: '',
+  })
   const views = useMemo(() => {
     return [
       {
@@ -55,7 +65,7 @@ const IndustryOperation: React.FC = () => {
       <Flex justify="space-between" align="center" className={styles.header}>
         <div>行业运行情况</div>
         <Space>
-          <div className={styles.header_right_text}>
+          <div className={styles.header_right_text} onClick={() => setModalOpt({ open: true, title: ' 目前已接入16个行业系统'})}>
             目前已接入<span>16</span>个行业系统
           </div>
           <DoubleRightOutlined className={styles.header_right_icon} />
@@ -70,6 +80,15 @@ const IndustryOperation: React.FC = () => {
           );
         })}
       </div>
+      <Modal
+        open={modalOpt?.open}
+        title={modalOpt?.title}
+        onCancel={() => setModalOpt({ open: false, title: ''})}
+        width={1104}
+        height={846}
+      >
+        <IndustrySystem />
+      </Modal>
     </div>
   );
 };
-- 
GitLab