智慧运营改动

src/global.less

@@ -119,7 +119,7 @@ input[type='reset'] {
   overflow-y: auto;
 }
 .content-title {
-  height: calc(100vh - 100px);
+  height: calc(100vh - 110px);
   overflow-x: hidden;
   overflow-y: auto;
 }

src/models/eqSelfInspection.js

@@ -209,7 +209,16 @@ export default {
         if (errorNum?.length > 0) num += errorNum;
         data.warningTotalNum = num;
 
-        data.patrolStatus = data?.extendWarningNum?.length > 0 ? 1 : 0;
+        if (data.extendWarningNum > 0) {
+          // 判断是否有异常
+          data.patrolStatus = 1;
+        } else if (data.extendWarningData.length - data.extendWarningNum > 0) {
+          // extendWarningData包含警告和异常
+          // 判断是否有警告
+          data.patrolStatus = 2;
+        } else {
+          data.patrolStatus = 0;
+        }
         data.faultAnalysisStatus = data?.FaultAnalysis?.length > 0 ? 1 : 0;
         // data.secureStatus =
         //   data?.dumuList?.length > 0 || data?.sensorWaringNum > 0 ? 1 : 0;

src/pages/EqSelfInspection/index.js

@@ -271,7 +271,11 @@ const Item = (props) => {
           </div>
         );
       case 2:
-        return;
+        return (
+          <div className={styles.right} style={{ color: '#FFE26D' }}>
+            警告
+          </div>
+        );
       // return <SyncOutlined className={styles.right} spin />;
       default:
         return <div className={`${styles.iconSuccess} ${styles.right}`}></div>;

src/pages/Menu/index.js

@@ -1,39 +1,42 @@
-import { useParams } from '@umijs/max';
+import { UnityAction } from '@/utils/utils';
 import { useState } from 'react';
 import styles from './index.less';
-import { UnityAction } from '@/utils/utils';
 
 const menuList = [
   {
     name: '首页',
-    path: (projectId) => `/home/${projectId}`,
+    // path: (projectId) => `/home/${projectId}`,
   },
   {
     name: '工况管理',
-    path: (projectId) => `/smart/work/${projectId}`,
+    // path: (projectId) => `/smart/work/${projectId}`,
   },
   {
     name: '系统自检',
-    path: (projectId) => `/self-inspection/${projectId}`,
+    // path: (projectId) => `/self-inspection/${projectId}`,
   },
   {
     name: '智能管控',
-    path: (projectId) => `/hardware-controller/${projectId}`,
+    // path: (projectId) => `/hardware-controller/${projectId}`,
   },
   {
     name: '数字孪生',
   },
+  {
+    name: '智慧运营',
+    // path: (projectId) => `/smart-ops/${projectId}`,
+  },
   {
     name: '安全管理',
-    path: (projectId) => `/safety/${projectId}`,
+    // path: (projectId) => `/safety/${projectId}`,
   },
   {
     name: '任务管理',
-    path: (projectId) => `/task-manage/${projectId}`,
+    // path: (projectId) => `/task-manage/${projectId}`,
   },
   {
     name: '设备管理',
-    path: (projectId) => `/device/${projectId}`,
+    // path: (projectId) => `/device/${projectId}`,
   },
 ];
 
@@ -41,8 +44,8 @@ function Menu() {
   const [active, setActive] = useState('首页');
   const handleClick = (item) => {
     setActive(item.name);
-    
-    UnityAction.sendMsg("menuItem", item.name)
+
+    UnityAction.sendMsg('menuItem', item.name);
   };
 
   return (

src/pages/SmartOps/Analysis.js

@@ -10,12 +10,12 @@ const { TabPane } = Tabs;
 const Analysis = (props) => {
   const Status = [
     { name: '异常', type: '1', data: [] },
-    { name: '告警', type: '2', data: [] },
+    { name: '警告', type: '2', data: [] },
     { name: '提醒', type: '3', data: [] },
   ];
 
   const { list = [], processList, loading } = props;
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState();
   const [tab, setTab] = useState('1');
 
   const columns = [
@@ -100,7 +100,7 @@ const Analysis = (props) => {
   }, [data, tab]);
 
   const selectedItem = (e) => {
-    setSelectedRowKeys([e]);
+    setSelectedRowKeys(e);
     console.log(data);
     const itemIndex = data?.findIndex((item) => item.type == tab);
     const index = data[itemIndex]?.data?.findIndex(
@@ -125,6 +125,7 @@ const Analysis = (props) => {
   const handleBtnClick = (plcs, title) => {
     if (!plcs) return;
     const msg = JSON.stringify(plcs); //[{ dataitemid: 'Raw_Water_Tank_Level', deviceid: '1436022785' }]
+    // router.push(`/unity/smart-ops/chart-page/46?type=2&data=${msg}`);
     UnityAction.sendMsg(
       'ProcessAnalysisAbout',
       JSON.stringify({
@@ -136,31 +137,32 @@ const Analysis = (props) => {
 
   const onTabChange = (tab) => {
     setTab(tab);
+    setSelectedRowKeys(null);
     UnityAction.sendMsg('ProcessAnalysisType', tab);
   };
 
-  const rowSelection = {
-    type: 'radio',
-    selectedRowKeys,
-    onChange: (selectedRowKeys, selectedRows) => {
-      setSelectedRowKeys(selectedRowKeys);
-      UnityAction.sendMsg('SynDev', selectedRows[0].DeviceCode);
-    },
-  };
+  // const rowSelection = {
+  //   type: 'radio',
+  //   selectedRowKeys,
+  //   onChange: (selectedRowKeys, selectedRows) => {
+  //     setSelectedRowKeys(selectedRowKeys);
+  //     UnityAction.sendMsg('SynDev', selectedRows[0].DeviceCode);
+  //   },
+  // };
 
   const onSelectRow = (record, index) => {
-    const selectedList = [...selectedRowKeys];
-    if (selectedList[0] === index) return;
-    selectedList[0] = index;
-    setSelectedRowKeys(selectedList);
+    // const selectedList = [...selectedRowKeys];
+    // if (selectedList[0] === index) return;
+    // selectedList[0] = index;
+    setSelectedRowKeys(index);
     UnityAction.sendMsg('SynDev', record.DeviceCode);
   };
 
   const setRowClassName = (record, index) => {
-    return index === selectedRowKeys[0] ||
-      record.DeviceCode == selectedRowKeys[0]
-      ? styles.tableSelect
-      : '';
+    if (!selectedRowKeys && selectedRowKeys !== 0) return;
+    if (selectedRowKeys == index || selectedRowKeys == record.DeviceCode) {
+      return styles.tableSelect;
+    }
   };
 
   return (
@@ -174,19 +176,19 @@ const Analysis = (props) => {
             label: `${item.name}(${item.data?.length || 0})`,
             key: item.type,
             children: (
-              <Table
-                dataSource={item.data}
-                columns={columns}
-                // rowKey={'DeviceCode'}
-                // rowSelection={rowSelection}
-                rowClassName={setRowClassName}
-                onRow={(record, index) => ({
-                  onClick: () => onSelectRow(record, index),
-                })}
-                pagination={false}
-                scroll={{ y: document.body.clientHeight - 730 }}
-              />
-            ),
+            <Table
+              dataSource={item.data}
+              columns={columns}
+              // rowKey={'DeviceCode'}
+              // rowSelection={rowSelection}
+              rowClassName={setRowClassName}
+              onRow={(record, index) => ({
+                onClick: () => onSelectRow(record, index),
+              })}
+              pagination={false}
+              scroll={{ y: document.body.clientHeight - 730 }}
+            />
+          ),
           };
         })}
         onChange={onTabChange}

src/pages/SmartOps/HistoryRecord.js

@@ -70,47 +70,46 @@ const HistoryRecord = (props) => {
       key: 'Num1',
       render: (text) => {
         if (text === undefined || text === null) {
-          return '--';
+          return 0;
         }
         return text;
       },
     },
     {
-      title: '工艺分析',
-      dataIndex: 'Num2',
-      key: 'Num2',
+      title: '设备分析',
+      dataIndex: 'Num4',
+      key: 'Num4',
       render: (text) => {
         if (text === undefined || text === null) {
           return '--';
         }
-        if (String(text).includes(',')) {
-          return text.split(',').length;
-        }
         return text;
       },
     },
     {
-      title: '感知分析',
-      dataIndex: 'Num3',
-      key: 'Num3',
+      title: '工艺分析',
+      dataIndex: 'Num2',
+      key: 'Num2',
       render: (text) => {
-        if (text === undefined || text === null) {
-          return '--';
+        if (!text) {
+          return 0;
+        } else {
+          return text.split(',').length;
         }
-        return text;
       },
     },
     {
-      title: '设备分析',
-      dataIndex: 'Num4',
-      key: 'Num4',
+      title: '感知分析',
+      dataIndex: 'Num3',
+      key: 'Num3',
       render: (text) => {
         if (text === undefined || text === null) {
-          return '--';
+          return 0;
         }
         return text;
       },
     },
+
     {
       title: '操作',
       render: (record) => (

src/pages/SmartOps/components/DeviceAnalysis.js

@@ -14,7 +14,7 @@ const DeviceAnalysis = (props) => {
   ];
 
   const { loading, autoReport } = props;
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState();
   const [tab, setTab] = useState('1');
 
   const columns = [
@@ -91,14 +91,12 @@ const DeviceAnalysis = (props) => {
   }, [data, tab]);
 
   const selectedItem = (e) => {
-    setSelectedRowKeys([e]);
+    setSelectedRowKeys(e);
     console.log(data);
     const itemIndex = data?.findIndex((item) => item.type == tab);
-    const index = data[itemIndex]?.data?.findIndex(
-      (item) => item.DeviceCode == e,
-    );
-    if (index !== 0 || index != -1) {
-      const dom = document.querySelector(`tr[data-row-key="${index}"]`);
+    const item = data[itemIndex]?.data?.find((item) => item.DeviceCode == e);
+    if (item) {
+      const dom = document.querySelector(`tr[data-row-key="${item.Id}"]`);
       if (dom) {
         let v = document.getElementsByClassName('ant-table-body')[itemIndex];
         v.scrollTop = dom.offsetTop;
@@ -115,31 +113,32 @@ const DeviceAnalysis = (props) => {
 
   const onTabChange = (tab) => {
     setTab(tab);
+    setSelectedRowKeys(null);
     UnityAction.sendMsg('DevAnalysisType', tab);
   };
 
-  const rowSelection = {
-    type: 'radio',
-    selectedRowKeys,
-    onChange: (selectedRowKeys, selectedRows) => {
-      setSelectedRowKeys(selectedRowKeys);
-      UnityAction.sendMsg('SynDev', selectedRows[0].DeviceCode);
-    },
-  };
+  // const rowSelection = {
+  //   type: 'radio',
+  //   selectedRowKeys,
+  //   onChange: (selectedRowKeys, selectedRows) => {
+  //     setSelectedRowKeys(selectedRowKeys);
+  //     UnityAction.sendMsg('SynDev', selectedRows[0].DeviceCode);
+  //   },
+  // };
 
   const onSelectRow = (record, index) => {
-    const selectedList = [...selectedRowKeys];
-    if (selectedList[0] === index) return;
-    selectedList[0] = index;
-    setSelectedRowKeys(selectedList);
+    // const selectedList = [...selectedRowKeys];
+    // if (selectedList[0] === index) return;
+    // selectedList[0] = index;
+    setSelectedRowKeys(index);
     UnityAction.sendMsg('SynDev', record.DeviceCode);
   };
 
   const setRowClassName = (record, index) => {
-    return index === selectedRowKeys[0] ||
-      record.DeviceCode == selectedRowKeys[0]
-      ? styles.tableSelect
-      : '';
+    if (!selectedRowKeys && selectedRowKeys !== 0) return;
+    if (selectedRowKeys == index || selectedRowKeys == record.DeviceCode) {
+      return styles.tableSelect;
+    }
   };
 
   return (

src/pages/SmartOps/components/VideoAnalysis.js

@@ -2,8 +2,8 @@ import ModuleTitle from '@/components/ManagementPage/moduleTitle';
 import TabsContent from '@/components/TabsContent';
 import ThresholdDetail from '@/components/ThresholdDetail';
 import { UnityAction } from '@/utils/utils';
-import { Collapse, Spin, Table, Tabs } from 'antd';
-import { useMemo, useState } from 'react';
+import { Collapse, Empty, Spin, Table, Tabs } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
 import styles from './VideoAnalysis.less';
 
 const { TabPane } = Tabs;
@@ -45,27 +45,28 @@ function VideoAnalysis(props) {
     return [...list1, ...list2, ...list3];
   }, [videoData]);
 
-  // useEffect(() => {
-  //   UnityAction.on('SynCam', selectedItem);
-  //   UnityAction.on('SynDev', selectedItem);
-  //   return () => {
-  //     UnityAction.off('SynDev', selectedItem);
-  //     UnityAction.off('SynCam', selectedItem);
-  //   };
-  // }, [data?.list]);
+  useEffect(() => {
+    UnityAction.on('SynCam', selectedItem);
+    UnityAction.on('SynDev', selectedItem);
+    return () => {
+      UnityAction.off('SynDev', selectedItem);
+      UnityAction.off('SynCam', selectedItem);
+    };
+  }, [videoData]);
 
-  // //滚动到相应位置
-  // const selectedItem = (e) => {
-  //   setSelectedName(e);
-  //   const dom = document.querySelector(`div[data-name="${e}"]`);
-  //   if (dom) {
-  //     let v = document.getElementById('videoContent');
-  //     v.scrollTop = dom.offsetTop;
-  //   }
-  // };
+  //滚动到相应位置
+  const selectedItem = (e) => {
+    setSelectedName(e);
+    const dom = document.querySelector(`div[data-name="${e}"]`);
+    if (dom) {
+      let v = document.getElementById('videoContent');
+      v.scrollTop = dom.offsetTop;
+    }
+  };
 
   const onTabChange = (tab) => {
     setTab(tab);
+    setSelectedName('');
     UnityAction.sendMsg('SensorAnalysisType', tab);
   };
 
@@ -83,13 +84,20 @@ function VideoAnalysis(props) {
               <AnalysisContent
                 errorData={errorData}
                 selectedName={selectedName}
+                setSelectedName={setSelectedName}
               />
             ),
           },
           {
             label: `全部(${allCount})`,
             key: '2',
-            children: <AllContent data={data} videoData={videoData} />,
+            children: (
+              <AllContent
+                videoData={videoData}
+                selectedName={selectedName}
+                setSelectedName={setSelectedName}
+              />
+            ),
           },
         ]}
         onChange={onTabChange}
@@ -98,17 +106,20 @@ function VideoAnalysis(props) {
   );
 }
 
-function AnalysisContent({ errorData, selectedName }) {
+function AnalysisContent({ errorData, selectedName, setSelectedName }) {
   const [prevKey, setPrevKey] = useState();
   const handleImgClick = (item) => {
-    localStorage.setItem('preview', JSON.stringify(item.data));
+    localStorage.setItem('preview', item.path);
     UnityAction.sendMsg('SensorPic');
   };
+
   const handleCollapse = (item) => {
     const key = item.type == TYPE.video ? item.device_name : item.device_code;
     const name = item.type == TYPE.video ? 'SynCam' : 'SynDev';
-    if (key === prevKey) return;
-    setPrevKey(key);
+    // 清除unity发送过来的选中设备
+    setSelectedName('');
+    if (item.key === prevKey) return;
+    setPrevKey(item.key);
     UnityAction.sendMsg(name, key);
   };
 
@@ -197,31 +208,36 @@ function AnalysisContent({ errorData, selectedName }) {
     return content;
   };
   const getClassName = (item) => {
-    const key = item.type == TYPE.video ? item.device_name : item.device_code;
-    return selectedName == key || prevKey == key
-      ? styles.tableSelect
-      : styles.table;
+    const device =
+      item.type == TYPE.video ? item.device_name : item.device_code;
+    if (selectedName && selectedName == device) {
+      return styles.tableSelect;
+    } else if (prevKey == item.key) {
+      return styles.tableSelect;
+    }
+    return styles.table;
   };
+
   return (
     <div
       className={styles.page}
       style={{ height: 'calc(100vh - 630px)', overflow: 'auto' }}
     >
       {errorData?.length > 0 ? (
-        errorData?.map((item) => (
-          <div data-name={item.device_name}>
+        errorData.map((item) => (
+          <div
+            data-name={item.device_name}
+            key={item.key}
+            onClick={() => handleCollapse(item)}
+          >
             <Collapse
-              defaultActiveKey={[item.device_name]}
-              key={item.device_name}
+              activeKey={item.key}
               className={getClassName(item)}
               expandIcon={() => (
                 <div className={styles.typeText}>{item.type_name}</div>
               )}
-              onChange={(e) => {
-                handleCollapse(item);
-              }}
             >
-              <Panel header={item.device_name} key={item.device_name}>
+              <Panel header={item.device_name} key={item.key}>
                 <div className={styles.box}>
                   <div className={styles.item}>
                     {renderContent(item.type, item)}
@@ -238,13 +254,14 @@ function AnalysisContent({ errorData, selectedName }) {
   );
 }
 
-function AllContent({ data = [], videoData = {} }) {
+function AllContent({ videoData = {}, selectedName, setSelectedName }) {
   const {
     environment_list = [],
     fluid_level_list = [],
     dumu_list = [],
   } = videoData;
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  // const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectKey, setSelectKey] = useState([]);
   const columns1 = [
     {
       title: '设备名称',
@@ -268,7 +285,6 @@ function AllContent({ data = [], videoData = {} }) {
             JsonNumThreshold: record?.json_num_threshold,
             Type: record.type || 2,
           }}
-          // onClick={() => onClickThreshold(record)}
         />
       ),
     },
@@ -413,18 +429,26 @@ function AllContent({ data = [], videoData = {} }) {
   const onSelectRow = (item, type) => {
     const key = type == TYPE.video ? item.device_name : item.device_code;
     const name = type == TYPE.video ? 'SynCam' : 'SynDev';
-    const selectedList = [...selectedRowKeys];
-    if (selectedList[0] === key) return;
-    selectedList[0] = key;
-    setSelectedRowKeys(selectedList);
+    setSelectedName('');
+    if (selectKey === item.key) return;
+    setSelectKey(item.key);
     UnityAction.sendMsg(name, key);
   };
 
+  const handleImgClick = (item) => {
+    localStorage.setItem('preview', item.path);
+    UnityAction.sendMsg('SensorPic');
+  };
+
   const setRowClassName = (item) => {
-    const key = item.type == TYPE.video ? item.device_name : item.device_code;
-    return selectedRowKeys.length > 0 && key == selectedRowKeys[0]
-      ? styles.tableSelect
-      : '';
+    const device =
+      item.type == TYPE.video ? item.device_name : item.device_code;
+    if (selectedName && selectedName == device) {
+      return styles.tableSelect;
+    } else if (selectKey == item.key) {
+      return styles.tableSelect;
+    }
+    return '';
   };
 
   return (
@@ -467,6 +491,7 @@ function AllContent({ data = [], videoData = {} }) {
           onRow={(record, index) => ({
             onClick: () => onSelectRow(record, TYPE.video),
           })}
+          rowKey="id"
           pagination={false}
           scroll={{ y: 400 }}
         />

src/pages/SmartOps/index.js

@@ -39,6 +39,8 @@ function SmartOps(props) {
   const time = searchParams.get('time');
   const idList = searchParams.get('idList');
   const patrolId = searchParams.get('patrolId');
+  
+  const [tab, setTab] = useState('1');
   const [videoNum, setVideoNum] = useState(0);
 
   const signalRef = useRef();
@@ -76,20 +78,22 @@ function SmartOps(props) {
   }, [reportData]);
 
   const initDate = () => {
-    //工艺分析
-    dispatch({
-      type: 'smartOps/queryList',
-      payload: {
-        project_id: projectId * 1,
-        projectId: projectId * 1,
-        ids: idList || reportData.Num2,
-        page_size: 999,
-        isNewRole: [46, 65, 92, 94].includes(projectId * 1),
-      },
-      callback: (data) => {
-        UnityAction.sendMsg('ProcessAnalysis', JSON.stringify(data?.list));
-      },
-    });
+    if (idList || reportData?.Num2) {
+      //工艺分析
+      dispatch({
+        type: 'smartOps/queryList',
+        payload: {
+          project_id: projectId * 1,
+          projectId: projectId * 1,
+          ids: idList || reportData.Num2,
+          page_size: 999,
+          isNewRole: [46, 65, 92, 94].includes(projectId * 1),
+        },
+        callback: (data) => {
+          UnityAction.sendMsg('ProcessAnalysis', JSON.stringify(data?.list));
+        },
+      });
+    }
 
     dispatch({
       type: 'eqSelfInspection/getPatrolDataById',
@@ -155,9 +159,12 @@ function SmartOps(props) {
     () =>
       getPatrolPerception({
         project_id: projectId * 1,
-        patrol_id: patrolId || reportData?.PatrolId,
+        patrol_id: patrolId || reportData.PatrolId,
+        s_time: sTime,
+        e_time: eTime,
       }),
     {
+      manual: true,
       onSuccess: (data) => {
         const count1 = data.dumu_list?.length || 0;
         const count2 =
@@ -165,22 +172,31 @@ function SmartOps(props) {
         const count3 =
           data.fluid_level_list?.filter((item) => item.status)?.length || 0;
         setVideoNum(count1 + count2 + count3);
-        const Cam = data.dumu_list?.map((item) => item.device_name) || [];
+        const Cam =
+          data.dumu_list?.map((item) => {
+            item.key = `dumu_${item.id}`;
+            return item.device_name;
+          }) || [];
         const Dev1 =
-          data.environment_list?.map((item) => {
+          data.environment_list?.map((item, index) => {
+            item.key = `environment_${index}_${item.device_code}`;
             return { DeviceCode: item.device_code, grade_alarm: item.status };
           }) || [];
         const Dev2 =
-          data.fluid_level_list?.map((item) => {
+          data.fluid_level_list?.map((item, index) => {
+            item.key = `fluid_${index}_${item.device_code}`;
             return { DeviceCode: item.device_code, grade_alarm: item.status };
           }) || [];
         const params = { Cam, Dev: [...Dev1, ...Dev2] };
+        UnityAction.sendMsg('SensorAnalysis', JSON.stringify(params));
       },
     },
   );
 
   const AnalysisNumber = list?.pagenation?.total || 0;
 
+  const deviceNumber = autoReport?.extendWarningData?.length || 0;
+
   // 利润
   const { data: profitData, run: getProfit } = useRequest(
     () =>
@@ -208,6 +224,7 @@ function SmartOps(props) {
   }, [eTime]);
 
   const onChangeTab = (type) => {
+    setTab(type);
     UnityAction.sendMsg('SmartAnalysisTab', type);
   };
 
@@ -271,14 +288,19 @@ function SmartOps(props) {
                 : '暂无优化'}
             </div>
             <div className={styles.item2}>
+              设备分析：
+              {autoReport?.extendWarningData?.length > 0
+                ? `${autoReport?.extendWarningData?.length}项可优化`
+                : '暂无优化'}
+            </div>
+            <div className={styles.item3}>
               工艺分析：
               {list?.pagenation?.total > 0
                 ? `${list?.pagenation?.total}项可优化`
                 : '暂无优化'}
             </div>
-            <div className={styles.item3}>
-              感知分析：
-              {videoNum > 0 ? `${videoNum}项可优化` : '暂无优化'}
+            <div className={styles.item4}>
+              感知分析：{videoNum > 0 ? `${videoNum}项可优化` : '暂无优化'}
             </div>
           </div>
         </div>
@@ -290,15 +312,15 @@ function SmartOps(props) {
           items={[
             {
               label: `工况分析(${loadingWork ? '-' : optimizationNumber})`,
-              key: '1',
+            key: '1',
               children: (
-                <WorkAnalysis
-                  workAnalysisRequest={workAnalysisRequest}
-                  projectId={projectId}
-                  loading={loadingWork}
-                  eTime={eTime}
-                />
-              ),
+              <WorkAnalysis
+                workAnalysisRequest={workAnalysisRequest}
+                projectId={projectId}
+                loading={loadingWork}
+                eTime={eTime}
+              />
+            ),
             },
             {
               label: `设备分析(${
@@ -316,12 +338,12 @@ function SmartOps(props) {
               label: `感知分析(${loadingVideo ? '-' : videoNum})`,
               key: '3',
               children: (
-                <VideoAnalysis
-                  videoNum={videoNum}
-                  videoData={videoData}
-                  loading={loadingVideo}
-                />
-              ),
+              <VideoAnalysis
+                videoNum={videoNum}
+                videoData={videoData}
+                loading={loadingVideo}
+              />
+            ),
             },
           ]}
           onChange={onChangeTab}

src/pages/SmartOps/index.less

@@ -59,34 +59,36 @@
       display: flex;
       flex-direction: column;
       align-items: flex-end;
-      .item1 {
+      .item {
         width: 585px;
-        height: 72px;
-        padding-left: 64px;
+        height: 52px;
         white-space: nowrap;
-        line-height: 60px;
-        margin-bottom: 6px;
+        margin-bottom: 10px;
         background: url('@/assets/smartOps/icon01.png') no-repeat center;
         background-size: 100% 100%;
+        line-height: 52px;
+      }
+      .item1 {
+        .item;
+        padding-left: 96px;
       }
       .item2 {
+        .item;
         width: 527px;
-        height: 72px;
-        padding-left: 24px;
-        white-space: nowrap;
-        line-height: 60px;
-        margin-bottom: 6px;
-        background: url('@/assets/smartOps/icon02.png') no-repeat center;
-        background-size: 100% 100%;
+        padding-left: 40px;
+        background-image: url('@/assets/smartOps/icon02.png');
       }
       .item3 {
-        background: url('@/assets/smartOps/icon03.png') no-repeat center;
-        background-size: 100% 100%;
-        width: 581px;
-        height: 60px;
-        padding-left: 64px;
-        white-space: nowrap;
-        line-height: 60px;
+        .item;
+        width: 527px;
+        padding-left: 40px;
+        background-image: url('@/assets/smartOps/icon03.png');
+      }
+      .item4 {
+        .item;
+        margin-bottom: 0;
+        padding-left: 96px;
+        background-image: url('@/assets/smartOps/icon08.png');
       }
     }
   }