修改样式

src/pages/SmartOps/components/VideoAnalysis.js

@@ -3,11 +3,16 @@ import TabsContent from '@/components/TabsContent';
 import ThresholdDetail from '@/components/ThresholdDetail';
 import { UnityAction } from '@/utils/utils';
 import { Collapse, Spin, Table, Tabs } from 'antd';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import styles from './VideoAnalysis.less';
 
 const { TabPane } = Tabs;
 const { Panel } = Collapse;
+const TYPE = {
+  video: 1,
+  fill: 2,
+  water: 3,
+};
 
 function VideoAnalysis(props) {
   const { videoNum, data, videoData, loading } = props;
@@ -23,37 +28,41 @@ function VideoAnalysis(props) {
   const errorData = useMemo(() => {
     const list1 =
       videoData.dumu_list?.map((item) => {
-        return { ...item, type_name: '视频报警', type: 1 };
+        return { ...item, type_name: '视频报警', type: TYPE.video };
       }) || [];
     const list2 =
       videoData.environment_list
         ?.filter((item) => item.status)
         .map((item) => {
-          return { ...item, type_name: '环境监测', type: 2 };
+          return { ...item, type_name: '环境监测', type: TYPE.fill };
         }) || [];
     const list3 =
       videoData.fluid_level_list
         ?.filter((item) => item.status)
         .map((item) => {
-          return { ...item, type_name: '液位监测', type: 3 };
+          return { ...item, type_name: '液位监测', type: TYPE.water };
         }) || [];
     return [...list1, ...list2, ...list3];
   }, [videoData]);
 
-  useEffect(() => {
-    UnityAction.on('SynCam', selectedItem);
-    return () => UnityAction.off('SynCam', selectedItem);
-  }, [data?.list]);
+  // useEffect(() => {
+  //   UnityAction.on('SynCam', selectedItem);
+  //   UnityAction.on('SynDev', selectedItem);
+  //   return () => {
+  //     UnityAction.off('SynDev', selectedItem);
+  //     UnityAction.off('SynCam', selectedItem);
+  //   };
+  // }, [data?.list]);
 
-  //滚动到相应位置
-  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);
@@ -96,10 +105,11 @@ function AnalysisContent({ errorData, selectedName }) {
     UnityAction.sendMsg('SensorPic');
   };
   const handleCollapse = (item) => {
-    const key = item.type == 1 ? item.device_name : item.device_code;
+    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);
-    UnityAction.sendMsg('SynCam', key);
+    UnityAction.sendMsg(name, key);
   };
 
   const renderContent = (key, item) => {
@@ -187,7 +197,7 @@ function AnalysisContent({ errorData, selectedName }) {
     return content;
   };
   const getClassName = (item) => {
-    const key = item.type == 1 ? item.device_name : item.device_code;
+    const key = item.type == TYPE.video ? item.device_name : item.device_code;
     return selectedName == key || prevKey == key
       ? styles.tableSelect
       : styles.table;
@@ -400,17 +410,19 @@ function AllContent({ data = [], videoData = {} }) {
     },
   ];
 
-  const onSelectRow = (record, index) => {
+  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] === index) return;
-    selectedList[0] = index;
+    if (selectedList[0] === key) return;
+    selectedList[0] = key;
     setSelectedRowKeys(selectedList);
-    UnityAction.sendMsg('SynDev', record.DeviceCode);
+    UnityAction.sendMsg(name, key);
   };
 
-  const setRowClassName = (record, index) => {
-    return index === selectedRowKeys[0] ||
-      record.DeviceCode == selectedRowKeys[0]
+  const setRowClassName = (item) => {
+    const key = item.type == TYPE.video ? item.device_name : item.device_code;
+    return selectedRowKeys.length > 0 && key == selectedRowKeys[0]
       ? styles.tableSelect
       : '';
   };
@@ -425,10 +437,10 @@ function AllContent({ data = [], videoData = {} }) {
         <Table
           dataSource={environment_list}
           columns={columns1}
-          // rowClassName={setRowClassName}
-          // onRow={(record, index) => ({
-          //   onClick: () => onSelectRow(record, index),
-          // })}
+          rowClassName={setRowClassName}
+          onRow={(record, index) => ({
+            onClick: () => onSelectRow(record, TYPE.fill),
+          })}
           pagination={false}
           scroll={{ y: 400 }}
         />
@@ -438,10 +450,10 @@ function AllContent({ data = [], videoData = {} }) {
         <Table
           dataSource={fluid_level_list}
           columns={columns2}
-          // rowClassName={setRowClassName}
-          // onRow={(record, index) => ({
-          //   onClick: () => onSelectRow(record, index),
-          // })}
+          rowClassName={setRowClassName}
+          onRow={(record, index) => ({
+            onClick: () => onSelectRow(record, TYPE.water),
+          })}
           pagination={false}
           scroll={{ y: 400 }}
         />
@@ -449,12 +461,12 @@ function AllContent({ data = [], videoData = {} }) {
       <div className={`card-box ${styles.box}`}>
         <ModuleTitle title="感知监测" />
         <Table
-          dataSource={data}
+          dataSource={dumu_list}
           columns={columns3}
-          // rowClassName={setRowClassName}
-          // onRow={(record, index) => ({
-          //   onClick: () => onSelectRow(record, index),
-          // })}
+          rowClassName={setRowClassName}
+          onRow={(record, index) => ({
+            onClick: () => onSelectRow(record, TYPE.video),
+          })}
           pagination={false}
           scroll={{ y: 400 }}
         />

src/pages/SmartOps/components/VideoAnalysis.less

@@ -42,10 +42,10 @@
 }
 .page {
   .tableSelect {
-    background-color: #2466a4 !important;
+    background-color: #b0d5f7 !important;
   }
   .table {
-    background-color: #064779;
+    background-color: #ffffff;
   }
   .typeText {
     color: #4a90e2 !important;
@@ -66,11 +66,17 @@
   }
 
   :global {
+    .ant-collapse .ant-collapse-content {
+      background-color: transparent !important;
+    }
+    .ant-collapse-item {
+      background-color: transparent !important;
+    }
     .ant-collapse > .ant-collapse-item {
       border-radius: 8px;
       box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
       border: 1px solid #eee;
-      background: rgba(255, 255, 255);
+      // background: rgba(255, 255, 255);
       padding: 0 15px;
       margin-bottom: 15px;
       &.ant-collapse-item-active > .ant-collapse-header {

src/pages/SystemDaily/index.js

@@ -1,5 +1,6 @@
 import PageContent from '@/components/PageContent';
 import { queryDailyWorkReport } from '@/services/user';
+import { LeftOutlined } from '@ant-design/icons';
 import { useParams, useRequest } from '@umijs/max';
 import { Spin } from 'antd';
 import dayjs from 'dayjs';
@@ -36,40 +37,47 @@ const SystemDaily = (props) => {
     user_name = '',
     user_name_count = 0,
   } = data;
+  const handleOnClick = () => {
+    history.back();
+  };
   return (
-    <PageContent>
+    <PageContent closeable={false}>
       <Spin spinning={loading}>
-        <div className={styles.main}>
-          <div className={styles.titleContent}>
-            <div className={styles.title}>系统工作日报</div>
-            <div className={styles.time}>{dayjs().format('MM月DD日')}</div>
+        <div className={styles.titleContent}>
+          <div className={styles.title}>
+            <LeftOutlined
+              onClick={handleOnClick}
+              style={{ fontSize: 36, cursor: 'pointer', marginRight: '20px' }}
+            />
+            系统工作日报
           </div>
-          <div className={styles.content}>
-            <div className={styles.text}>
-              执行自控指令次数：{automatic_task}次
-            </div>
-            <div className={styles.text}>
-              推送优化建议：{push_optimize_task}条
-            </div>
-            <div className={styles.text}>
-              系统自检次数：{self_inspection_task}条
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常次数：
-              {self_inspection_normal_task}条
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;异常次数：
-              {self_inspection_abnormal_task}条
-            </div>
-            <div className={styles.text}>
-              推送任务：{push_task}条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-              任务完成率：{task_percent}%
-            </div>
-            <div className={styles.text}>
-              工单数量：{work_order_task}条
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工单完成率：
-              {work_percent}%
-            </div>
-            <div className={styles.text}>
-              工单完成人员第一名：{user_name}完成{user_name_count}个工单
-            </div>
+          <div className={styles.time}>{dayjs().format('MM月DD日')}</div>
+        </div>
+        <div className={styles.content}>
+          <div className={styles.text}>
+            执行自控指令次数：{automatic_task}次
+          </div>
+          <div className={styles.text}>
+            推送优化建议：{push_optimize_task}条
+          </div>
+          <div className={styles.text}>
+            系统自检次数：{self_inspection_task}条
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常次数：
+            {self_inspection_normal_task}条
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;异常次数：
+            {self_inspection_abnormal_task}条
+          </div>
+          <div className={styles.text}>
+            推送任务：{push_task}条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            任务完成率：{task_percent}%
+          </div>
+          <div className={styles.text}>
+            工单数量：{work_order_task}条
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工单完成率：
+            {work_percent}%
+          </div>
+          <div className={styles.text}>
+            工单完成人员第一名：{user_name}完成{user_name_count}个工单
           </div>
         </div>
       </Spin>

src/pages/SystemDaily/index.less

@@ -9,7 +9,7 @@
 }
 .titleContent {
   width: 100%;
-  text-align: center;
+  // text-align: center;
   font-family: PingFangSC, PingFang SC;
   color: #4a4a4a;
   margin: auto;
@@ -18,6 +18,7 @@
     line-height: 48px;
   }
   .time {
+    margin-left: 60px;
     font-size: 22px;
     line-height: 30px;
   }
@@ -25,7 +26,6 @@
 .content {
   padding: 60px 30px;
   margin: 20px auto;
-  width: 80%;
   box-shadow: 0px 0px 8px 4px rgba(212, 212, 212, 0.5);
   border-radius: 20px;
   background: #e7f1fe;