fix: 统计查看

packages/extend-components/EC_StatisticalHistoryView/src/demos/Basic.tsx

@@ -10,9 +10,9 @@ const Demo = () => {
   //   statisticType: '',
   // }
   const params = {
-    deviceCode: 'SC00000023',
-    sensors: '出水累计流量',
-    deviceType: '水厂',
+    deviceCode: 'LLJ00000001',
+    sensors: '今日水量',
+    deviceType: '流量计',
     statisticType: '',
   }
   return (

packages/extend-components/EC_StatisticalHistoryView/src/index.js

@@ -4,7 +4,9 @@ import moment from 'moment';
 import Empty from '@wisdom-components/empty';
 import LoadBox from '@wisdom-components/loadbox';
 import BasicTable from '@wisdom-components/basictable';
-import { ConfigProvider, Select, DatePicker, Radio } from 'antd';
+import { ExportExcel } from '@wisdom-components/exportexcel';
+import { ConfigProvider, Select, DatePicker, Radio, Table, Button } from 'antd';
+import { VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { BasicChart } from '@wisdom-components/basicchart';
 import { getStatisticsInfo } from './apis';
 import './index.less';
@@ -32,7 +34,6 @@ const StatisticalHistoryView = (props) => {
   const [picker, setPicker] = useState('day');
   const [time, setTime] = useState({ startTime: '', endTime: '' });
   const [dateTime, setDateTime] = useState(moment().format('YYYY-MM-DD HH:mm:ss'));
-  const [hoverIndex, setHoverIndex] = useState(null);
 
   // 时间切换筛选
   const onTimeChange = (e) => {
@@ -55,11 +56,41 @@ const StatisticalHistoryView = (props) => {
     setTime({ startDate: start, endDate: end });
   };
 
+  const exportExcelBtn = (e) => {
+    if (!dataSource.length) return false;
+    const sheetFilter = columns.map((item) => {
+      return item.dataIndex;
+    });
+    const sheetHeader = columns.map((item) => {
+      return item.title;
+    });
+    const sheetData = dataSource.map((item) => {
+      return {
+        pt: item.pt,
+        value0: String(item.value0),
+        value1: String(item.value1),
+        value2: String(item.value2),
+      };
+    });
+    ExportExcel({
+      name: `${props?.deviceParams?.sensors || ''}指标数据`,
+      content: [
+        {
+          sheetData: sheetData,
+          sheetName: 'sheet1',
+          sheetFilter: sheetFilter,
+          sheetHeader: sheetHeader,
+          columnWidths: [10, 10, 10, 10],
+        },
+      ],
+    });
+  };
+
   // 获取历史统计数据
   const getHistoryData = async () => {
     const { deviceCode = '', sensors = '', deviceType = '', statisticType = '' } = historyParams;
     const nameTypeList = [];
-    if (!deviceCode || !sensors) return setHistoryRender(false);
+    if (!deviceCode || !sensors) return setOptions(null);
     nameTypeList.push({
       name: sensors,
       type: statisticType || 'Sub',
@@ -75,13 +106,18 @@ const StatisticalHistoryView = (props) => {
       dateType: picker,
     };
     setLoading(true);
-    const results = await getStatisticsInfo(params);
+    let results = null;
+    try {
+      results = await getStatisticsInfo(params);
+    } catch (err) {
+      return setLoading(false);
+    }
     setLoading(false);
     const list = results?.data?.list || [];
     const dataList = list.length ? list[0] : {};
     const dNameDataList = dataList.dNameDataList ? dataList.dNameDataList : [];
     const data = dNameDataList.length ? dNameDataList[0] : null;
-    if (!data) return setHistoryRender(false);
+    if (!data) return setOptions(null);
     dataMenthod(data);
   };
 
@@ -134,6 +170,19 @@ const StatisticalHistoryView = (props) => {
           if (times === time2) data2.push({ ...item, pt: pt });
         });
         break;
+      case 'thisYear':
+        time0 = moment(time.endDate).subtract(0, 'year').format('YYYY');
+        time1 = moment(time.endDate).subtract(1, 'year').format('YYYY');
+        time2 = moment(time.endDate).subtract(2, 'year').format('YYYY');
+        timeName = [].concat(yearName);
+        nameDate.forEach((item) => {
+          const times = moment(item.time).format('YYYY');
+          const pt = moment(item.time).format('MM月');
+          if (times === time0) data0.push({ ...item, pt: pt });
+          if (times === time1) data1.push({ ...item, pt: pt });
+          if (times === time2) data2.push({ ...item, pt: pt });
+        });
+        break;
       case 'customer':
         const style = picker === 'day' ? 'HH时' : picker === 'month' ? 'DD日' : 'MM月';
         const format = picker === 'day' ? 'YYYY-MM-DD' : picker === 'month' ? 'YYYY-MM' : 'YYYY';
@@ -172,11 +221,11 @@ const StatisticalHistoryView = (props) => {
     const series = [];
     dataInfo.data.forEach((item, index) => {
       const config = !index && dName.indexOf('流量') > -1 ? { areaStyle: {} } : {};
-      const style = index ? {lineStyle:{normal:{type:'dashed'}}} : {}
+      const style = index ? { lineStyle: { normal: { type: 'dashed' } } } : {};
       const list = {
         name: dataInfo.name[index],
         type: 'line',
-        smooth: true, 
+        smooth: true,
         ...config,
         ...style,
         data: item.map((arr) => {
@@ -202,7 +251,7 @@ const StatisticalHistoryView = (props) => {
       grid: {
         containLabel: true,
         left: 20,
-        right: 10,
+        right: 20,
         // top: 20,
         bottom: 10,
       },
@@ -218,6 +267,13 @@ const StatisticalHistoryView = (props) => {
           axisTick: {
             alignWithLabel: true,
           },
+          boundaryGap: false,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+            },
+          },
         },
       ],
       yAxis: [
@@ -255,7 +311,6 @@ const StatisticalHistoryView = (props) => {
         title: item,
         dataIndex: dataIndex[index],
         align: 'center',
-        // width: 60,
       };
     });
     const column = column1.concat(column2);
@@ -290,6 +345,24 @@ const StatisticalHistoryView = (props) => {
     }
   };
 
+  const Summary = (currentData) => {
+    return (
+      <Table.Summary.Row>
+        {columns.map((item, index) => {
+          let sum = 0;
+          currentData.reduce((prev, next) => {
+            sum += next[item.dataIndex] === '-' ? 0 : next[item.dataIndex];
+          }, 0);
+          return (
+            <Table.Summary.Cell key={item.dataIndex} index={index} align={'center'}>
+              {index === 0 ? '总计' : sum.toFixed(0)}
+            </Table.Summary.Cell>
+          );
+        })}
+      </Table.Summary.Row>
+    );
+  };
+
   useEffect(() => {
     setHistoryParams(props.deviceParams || {});
   }, [props.deviceParams]);
@@ -313,6 +386,11 @@ const StatisticalHistoryView = (props) => {
         end = moment().endOf('month').format('YYYY-MM-DD 23:59:59');
         setPicker('month');
         break;
+      case 'thisYear':
+        start = moment().startOf('year').subtract(2, 'year').format('YYYY-MM-DD 00:00:00');
+        end = moment().endOf('year').format('YYYY-MM-DD 23:59:59');
+        setPicker('year');
+        break;
       case 'customer':
         start = moment().startOf(picker).subtract(2, picker).format('YYYY-MM-DD 00:00:00');
         end = moment().endOf(picker).format('YYYY-MM-DD 23:59:59');
@@ -331,32 +409,54 @@ const StatisticalHistoryView = (props) => {
     <div className={classNames(prefixCls)}>
       <div className={classNames(`${prefixCls}-box`)}>
         <div className={classNames(`${prefixCls}-header`)}>
-          <span>时间选择：</span>
-          <Radio.Group value={dateValue} defaultValue={dateList[0].key} onChange={onTimeChange}>
-            {dateList.map((item) => (
-              <Radio.Button key={item.key} value={item.key}>
-                {item.name}
-              </Radio.Button>
-            ))}
-          </Radio.Group>
-          {dateValue === 'customer' && (
-            <>
-              <Select
-                defaultValue="day"
-                value={picker}
-                options={timeList}
-                onChange={onPickerChange}
-                className={classNames(`${prefixCls}-select`)}
-              />
-              <DatePicker onChange={onDateChange} value={moment(dateTime)} picker={picker} />
-            </>
-          )}
+          <div className={classNames(`${prefixCls}-time`)}>
+            <span>时间选择：</span>
+            <Radio.Group value={dateValue} defaultValue={dateList[0].key} onChange={onTimeChange}>
+              {dateList.map((item) => (
+                <Radio.Button key={item.key} value={item.key}>
+                  {item.name}
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+            {dateValue === 'customer' && (
+              <>
+                <Select
+                  defaultValue="day"
+                  value={picker}
+                  options={timeList}
+                  onChange={onPickerChange}
+                  className={classNames(`${prefixCls}-select`)}
+                />
+                <DatePicker onChange={onDateChange} value={moment(dateTime)} picker={picker} />
+              </>
+            )}
+          </div>
+          <Button
+            className={classNames(`${prefixCls}-down-load`)}
+            type="primary"
+            onClick={exportExcelBtn}
+            disabled={!dataSource.length}
+          >
+            <VerticalAlignBottomOutlined />
+            下载
+          </Button>
         </div>
         <div className={classNames(`${prefixCls}-content`)}>
           {
             <>
               <div className={classNames(`${prefixCls}-chart`)}>
-                <BasicChart ref={chartRef} option={options} notMerge style={{ width: '100%', height: '100%' }} />
+                {options ? (
+                  <BasicChart
+                    ref={chartRef}
+                    option={options}
+                    notMerge
+                    style={{ width: '100%', height: '100%' }}
+                  />
+                ) : (
+                  <div className={classNames(`${prefixCls}-empty`)}>
+                    <Empty />
+                  </div>
+                )}
               </div>
               <div className={classNames(`${prefixCls}-table`)}>
                 <BasicTable
@@ -364,7 +464,32 @@ const StatisticalHistoryView = (props) => {
                   columns={columns}
                   pagination={false}
                   bordered={true}
+                  onRow={(record, index) => {
+                    return {
+                      onMouseEnter: (event) => {
+                        let seriesIndex = 0;
+                        const dataIndex = ['value0', 'value1', 'value2'];
+                        seriesIndex = dataIndex.findIndex((item) => {
+                          return record[item] !== '-';
+                        });
+                        chartRef?.current?.getEchartsInstance() &&
+                          chartRef?.current?.getEchartsInstance().dispatchAction({
+                            type: 'showTip',
+                            seriesIndex: seriesIndex,
+                            dataIndex: index,
+                          });
+                      }, // 鼠标移入行
+                      onMouseLeave: (event) => {
+                        chartRef?.current?.getEchartsInstance() &&
+                          chartRef?.current?.getEchartsInstance().dispatchAction({
+                            type: 'hideTip',
+                            dataIndex: index,
+                          });
+                      }, // 鼠标移出行
+                    };
+                  }}
                   scroll={{ x: '100%', y: 'calc(100% - 40px)' }}
+                  summary={Summary}
                 />
               </div>
             </>
@@ -387,14 +512,18 @@ const dateList = [
     key: 'today',
     name: '今日',
   },
-  {
-    key: 'thisWeek',
-    name: '本周',
-  },
+  // {
+  //   key: 'thisWeek',
+  //   name: '本周',
+  // },
   {
     key: 'thisMonth',
     name: '本月',
   },
+  {
+    key: 'thisYear',
+    name: '今年',
+  },
   {
     key: 'customer',
     name: '自定义',
@@ -421,3 +550,5 @@ const dayName = ['今日', '昨日', '前日'];
 const weekName = ['本周', '上周', '上上周'];
 
 const monthName = ['本月', '上月', '上上月'];
+
+const yearName = ['今年', '去年', '前年'];

packages/extend-components/EC_StatisticalHistoryView/src/index.less

@@ -25,6 +25,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100%;
   }
 
   &-box {
@@ -37,6 +39,19 @@
   &-header {
     flex: none;
     margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &-time {
+    display: flex;
+    align-items: center;
+  }
+
+  &-down-load {
+    display: flex;
+    align-items: center;
   }
 
   &-select {