UI: #9269 物联网首页部分图片更改，样式微调

src/pages/home/components/BaseStatistics.tsx

@@ -53,12 +53,24 @@ const BaseStatistics = () => {
         {
           name: 'CPU使用率',
           value: String(cpuValue) + '%',
-          children: <Pie value={cpuValue} />,
+          children: (
+            <Pie
+              value={cpuValue}
+              color={['#EBEBEB', '#D3ADF7']}
+              image={require('/public/images/home/top-3.svg')}
+            />
+          ),
         },
         {
           name: 'JVM内存',
           value: String(jvmValue) + '%',
-          children: <Pie value={jvmValue} />,
+          children: (
+            <Pie
+              value={jvmValue}
+              color={['#D6E4FF', '#85A5FF']}
+              image={require('/public/images/home/top-4.svg')}
+            />
+          ),
         },
       ]}
       title="基础统计"

src/pages/home/components/GuideHome.tsx

@@ -40,7 +40,12 @@ const GuideItem = (props: GuideItemProps) => {
     <div
       className={'home-guide-item step-bar pointer'}
       onClick={jumpPage}
-      style={{ marginTop: 12, padding: 10, border: '1px solid #eee' }}
+      style={{
+        marginTop: 12,
+        padding: 10,
+        border: '1px solid #eee',
+        borderLeft: '2px solid #85a5ff',
+      }}
     >
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <div>

src/pages/home/components/Pie.tsx

@@ -4,23 +4,41 @@ import type { EChartsOption } from 'echarts';
 
 interface Props {
   value: number;
+  color: array;
+  image: string;
 }
 
 const Pie = (props: Props) => {
   const [options, setOptions] = useState<EChartsOption>({});
-
   useEffect(() => {
     setOptions({
-      color: ['#2F54EB', '#979AFF'],
+      color: props.color || ['#D3ADF7', '#979AFF'],
+      graphic: [
+        {
+          type: 'image',
+          style: {
+            image: props.image || '',
+            width: 16,
+            height: 16,
+          },
+          left: 'center',
+          top: '41%',
+        },
+      ],
       series: [
         {
           type: 'pie',
-          radius: ['100%', '50%'],
+          radius: ['100%', '60%'],
           center: ['50%', '50%'],
           label: {
             show: false,
           },
-          data: [props.value, 100 - props.value],
+          data: [100 - props.value, props.value],
+          itemStyle: {
+            // borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
         },
       ],
     });

src/pages/home/components/index.less

@@ -117,6 +117,7 @@
   margin-bottom: @margin;
   padding-bottom: 26.5%;
   overflow: hidden;
+  border-bottom: 1px solid #2f54eb;
 
   .home-body-img {
     position: absolute;

src/pages/home/comprehensive/index.tsx

@@ -156,7 +156,7 @@ const Comprehensive = () => {
                 {
                   name: '设备数量',
                   value: deviceCount,
-                  children: '',
+                  children: require('/public/images/home/top-1.png'),
                   permission: deviceMessage,
                 },
               ]}
@@ -206,6 +206,7 @@ const Comprehensive = () => {
           data={[
             {
               title: '创建产品',
+              url: require('/public/images/home/bottom-4.png'),
               content:
                 '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
               onClick: () => {
@@ -221,6 +222,7 @@ const Comprehensive = () => {
             },
             {
               title: '配置产品接入方式',
+              url: require('/public/images/home/bottom-1.png'),
               content:
                 '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
               onClick: () => {
@@ -233,6 +235,7 @@ const Comprehensive = () => {
             },
             {
               title: '添加测试设备',
+              url: require('/public/images/home/bottom-5.png'),
               content: '添加单个设备，用于验证产品模型是否配置正确。',
               onClick: () => {
                 const path = getMenuPathByCode('device/Instance');
@@ -247,6 +250,7 @@ const Comprehensive = () => {
             },
             {
               title: '功能调试',
+              url: require('/public/images/home/bottom-2.png'),
               content: '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
               onClick: () => {
                 if (!!devicePermission.update) {
@@ -258,6 +262,7 @@ const Comprehensive = () => {
             },
             {
               title: '批量添加设备',
+              url: require('/public/images/home/bottom-3.png'),
               content: '批量添加同一产品下的设备',
               onClick: () => {
                 const path = getMenuPathByCode('device/Instance');
@@ -286,8 +291,8 @@ const Comprehensive = () => {
           data={[
             {
               title: '协议管理',
+              url: require('/public/images/home/bottom-9.png'),
               content: '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
-              url: require('/public/images/home/bottom-1.png'),
               onClick: () => {
                 const url = getMenuPathByCode(MENUS_CODE['link/Protocol']);
                 if (!!url) {
@@ -299,8 +304,8 @@ const Comprehensive = () => {
             },
             {
               title: '证书管理',
+              url: require('/public/images/home/bottom-9.png'),
               content: '统一维护平台内的证书，用于数据通信加密。',
-              url: require('/public/images/home/bottom-6.png'),
               onClick: () => {
                 const url = getMenuPathByCode(MENUS_CODE['link/Certificate']);
                 if (!!url) {
@@ -313,7 +318,7 @@ const Comprehensive = () => {
             {
               title: '网络组件',
               content: '根据不同的传输类型配置平台底层网络组件相关参数。',
-              url: require('/public/images/home/bottom-3.png'),
+              url: require('/public/images/home/bottom-10.png'),
               onClick: () => {
                 const url = getMenuPathByCode(MENUS_CODE['link/Type']);
                 if (!!url) {
@@ -326,7 +331,7 @@ const Comprehensive = () => {
             {
               title: '设备接入网关',
               content: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
-              url: require('/public/images/home/bottom-4.png'),
+              url: require('/public/images/home/bottom-11.png'),
               onClick: () => {
                 const url = getMenuPathByCode(MENUS_CODE['link/AccessConfig']);
                 if (!!url) {
@@ -339,7 +344,7 @@ const Comprehensive = () => {
             {
               title: '日志管理',
               content: '监控系统日志，及时处理系统异常。',
-              url: require('/public/images/home/bottom-5.png'),
+              url: require('/public/images/home/bottom-9.png'),
               onClick: () => {
                 const url = getMenuPathByCode(MENUS_CODE['Log']);
                 if (!!url) {