Merge branch '1.1' of code.aliyun.com:jetlinks/ui-antd into 1.1

jetlinks · Mar 1, 2020 · b0484d9 · b0484d9
2 parents c2aa572 + 65ca937
commit b0484d9
Show file tree

Hide file tree

Showing 6 changed files with 429 additions and 314 deletions.
diff --git a/src/pages/analysis/components/Charts/Grouped/index.tsx b/src/pages/analysis/components/Charts/Grouped/index.tsx
@@ -1,63 +1,41 @@
-import React from "react";
-import {
-  G2,
-  Chart,
-  Geom,
-  Axis,
-  Tooltip,
-  Coord,
-  Label,
-  Legend,
-  View,
-  Guide,
-  Shape,
-  Facet,
-  Util
-} from "bizcharts";
-import DataSet from "@antv/data-set";
+import React from 'react';
+import { Axis, Chart, Coord, Geom, Legend, Tooltip } from 'bizcharts';
+import DataSet from '@antv/data-set';
+import autoHeight from '@/pages/analysis/components/Charts/autoHeight';
+
+export interface IGaugeProps {
+  color?: string;
+  height?: number;
+  bgColor?: number;
+  datas: Array<{
+    x: string;
+    消息量: number;
+  }>;
+  forceFit?: boolean;
+  style?: React.CSSProperties;
+  formatter: (value: string) => string;
+}
+
+class Grouped  extends React.Component<IGaugeProps> {
+    render() {
+      const {
+        data,
+        height = 1,
+      } = this.props;
 
-class Grouped extends React.Component {
-  render() {
-    const data = [
-      {
-        label: "Monday",
-        series1: 2800,
-        series2: 2260
-      },
-      {
-        label: "Tuesday",
-        series1: 1800,
-        series2: 1300
-      },
-      {
-        label: "Wednesday",
-        series1: 950,
-        series2: 900
-      },
-      {
-        label: "Thursday",
-        series1: 500,
-        series2: 390
-      },
-      {
-        label: "Friday",
-        series1: 170,
-        series2: 100
-      }
-    ];
     const ds = new DataSet();
     const dv = ds.createView().source(data);
     dv.transform({
       type: "fold",
-      fields: ["series1", "series2"],
+      fields: ["消息量"],
       // 展开字段集
       key: "type",
       // key字段
       value: "value" // value字段
     });
     return (
       <div>
-        <Chart height={385} data={dv} forceFit>
+        <Chart height={height} data={dv} forceFit>
           <Legend />
           <Coord transpose scale={[1, -1]} />
           <Axis
@@ -85,4 +63,4 @@ class Grouped extends React.Component {
   }
 }
 
-export default Grouped;
+export default autoHeight()(Grouped);
diff --git a/src/pages/analysis/components/ProportionSales.tsx b/src/pages/analysis/components/ProportionSales.tsx
@@ -1,43 +1,131 @@
-import React from 'react';
-import { Card, Radio } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { message, Card, Radio } from 'antd';
 import Charts from './Charts';
 import styles from '../style.less';
-import { RadioChangeEvent } from 'antd/es/radio';
 import { ISalesData } from '../data';
+import apis from '@/services';
+import Select from 'antd/es/select';
 
 const { Pie } = Charts;
 
-const ProportionSales = ({
-  salesType,
-  loading,
-  salesPieData,
-  handleChangeSalesType,
-}: {
-  loading: boolean;
-  salesType: 'all' | 'online' | 'stores';
-  salesPieData: ISalesData[];
-  handleChangeSalesType?: (e: RadioChangeEvent) => void;
-}) => {
+export interface State {
+  productDataList: any[];
+  defaultList: any[];
+  dataList: ISalesData[];
+  state:string;
+  productId:any[];
+  productData:any;
+}
+
+const ProportionSales = ({ loading, }: { loading: boolean; }) => {
+
+  const initState: State = {
+    productDataList: [],
+    defaultList: [],
+    dataList: [],
+    state:"",
+    productId:[],
+    productData:{},
+  };
+  const [productDataList, setProductDataList] = useState(initState.productDataList);
+  const [defaultList, setDefaultList] = useState(initState.defaultList);
+  const [dataList, setDataList] = useState(initState.dataList);
+  const [stateType, setState] = useState(initState.state);
+  const [productId, setProductId] = useState(initState.productId);
+  const [productData, setProductData] = useState(initState.productData);
+  useEffect(() => {
+    apis.deviceProdcut
+      .queryNoPagin()
+      .then(response => {
+        const tempResult = response?.result;
+        if (tempResult) {
+          let list = [];
+          for (let i = 0; i < tempResult.length; i++) {
+            productData[tempResult[i].id] = tempResult[i].name;
+            productDataList.push(<Select.Option key={tempResult[i].id}>{tempResult[i].name}</Select.Option>);
+            if (i < 6) {
+              list.push(tempResult[i].id);
+              setDefaultList(defaultList.push(tempResult[i].id));
+            }
+          }
+          setProductId(list);
+          deviceStatus(defaultList, '');
+        }
+      })
+      .catch(() => {
+      });
+  }, []);
+
+
+  function handleChange(value) {
+    if (value.length > 6){
+      message.error('设备型号最多只能勾选6个');
+      return false;
+    }
+    setProductId(value);
+    deviceStatus(value, stateType);
+  }
+
+  function onChange(e) {
+    let val: string = "";
+    if (e.target.value !== 'all') {
+      val = e.target.value;
+    }
+    setState(val);
+    deviceStatus(productId, val);
+  }
+
+  const deviceStatus = (prodcutList, stateType) => {
+    const list = [];
+    prodcutList.forEach(item => {
+      list.push({
+        'dashboard': 'device',
+        'object': 'status',
+        'measurement': 'record',
+        'dimension': 'current',
+        'group': item,
+        'params': {
+          'productId': item,
+          'state': stateType,
+        },
+      });
+    });
+    apis.analysis.getMulti(list)
+      .then((response: any) => {
+        const tempResult = response?.result;
+        if (tempResult) {
+          const list = [];
+          tempResult.forEach(item => {
+            list.push({
+              x: productData[item.group],
+              y: item.data.value,
+            });
+          });
+          setDataList(list);
+        }
+      });
+  };
+
   return (
     <Card
       loading={loading}
       className={styles.salesCard}
       bordered={false}
       title={
-        '各类型设备占比'
+        '各型号设备占比'
       }
       bodyStyle={{ padding: 24 }}
       extra={
         <div className={styles.salesCardExtra}>
           <div className={styles.salesTypeRadio}>
-            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
+            <Radio.Group onChange={onChange} defaultValue="all">
               <Radio.Button value="all">
                 全部设备
               </Radio.Button>
               <Radio.Button value="online">
                 在线
               </Radio.Button>
-              <Radio.Button value="stores">
+              <Radio.Button value="offline">
                 离线
               </Radio.Button>
             </Radio.Group>
@@ -48,21 +136,31 @@ const ProportionSales = ({
     >
       <div
         style={{
-          minHeight: 380,
+          minHeight: 360,
         }}
       >
-        <h4 style={{ marginTop: 8, marginBottom: 32 }}>
-          数量统计
-        </h4>
-        <Pie
-          hasLegend
-          subTitle={'总设备数'}
-          total={() => <span>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</span>}
-          data={salesPieData}
-          valueFormat={value => <span>{value}</span>}
-          height={248}
-          lineWidth={4}
-        />
+        <div>
+          <Select mode="tags" defaultValue={defaultList} maxTagTextLength={3}
+                  maxTagCount={3}
+                  style={{ width: '50%', float: 'right', marginBottom: 32 }}
+                  placeholder="设备型号" onChange={handleChange}>
+            {productDataList}
+          </Select>
+        </div>
+        <div>
+          <h4 style={{ marginTop: 8, marginBottom: 32, width: '40%' }}>
+            数量统计
+          </h4>
+          <Pie
+            hasLegend
+            subTitle={'总设备数'}
+            total={() => <span>{dataList.reduce((pre, now) => now.y + pre, 0)}</span>}
+            data={dataList}
+            valueFormat={value => <span>{value}</span>}
+            height={280}
+            lineWidth={4}
+          />
+        </div>
       </div>
     </Card>
   );