Merge branch 'develop' of http://120.55.44.4:10080/xujunjie/WorkloadWeb into develop

src/pages/Mobile/DataMeter/Chart.js

@@ -2,16 +2,15 @@ import React, { useState, useEffect, useRef } from 'react';
 import { connect } from 'dva';
 import moment from 'moment';
 import style from './Chart.less';
-import { Card, Empty } from 'antd';
+import { Card, Empty, Spin } from 'antd';
 import { getOptions } from '@/components/ChartUtils/utils';
 const dataCache = {};
-
+let timer;
 function DataCenter(props) {
   const [chart, setChart] = useState();
-  const [timer, setTimer] = useState();
-  const [chartOptions, setChartOptions] = useState(false);
+  // const [timer, setTimer] = useState();
+  const [chartOptions, setChartOptions] = useState({});
   const chartEle = useRef();
-  const iframeRef = useRef();
   const signalRef = useRef();
   const [loading, setLoading] = useState(false);
   const {
@@ -25,8 +24,10 @@ function DataCenter(props) {
   // const projectId = 92;
 
   const handleClickTabs = id => {
+    if (loading) return;
     let item = chartConfigList.find(c => c.id == id);
-    getOptionsForConfig(item);
+    setLoading(true);
+    setChartOptions({ ...item });
   };
 
   useEffect(() => {
@@ -41,12 +42,10 @@ function DataCenter(props) {
     }
   }, [projectId]);
 
-  useEffect(() => {
-    const chartWindow = iframeRef.current?.contentWindow;
-    console.log(chartOptions);
-    if (!chartWindow || !chartOptions) return;
-    renderChart();
-  }, [chartOptions]);
+  // useEffect(() => {
+  //   if (!chartOptions) return;
+  //   renderChart();
+  // }, [chartOptions]);
 
   useEffect(() => {
     if (chartConfigList && chartConfigList.length > 0) {
@@ -54,24 +53,24 @@ function DataCenter(props) {
     }
   }, [chartConfigList]);
 
-  const getOptionsForConfig = item => {
-    setChartOptions(item);
-    clearTimeout(timer);
-    let t = setTimeout(() => {
-      getOptionsForConfig({ ...item });
-    }, 1000 * 60);
-    setTimer(t);
-  };
+  // const getOptionsForConfig = item => {
+  //   setChartOptions(item);
+  //   clearTimeout(timer);
+  //   let t = setTimeout(() => {
+  //     getOptionsForConfig({ ...item });
+  //   }, 1000 * 60);
+  //   setTimer(t);
+  // };
 
-  const renderChart = async () => {
+  const renderChart = async e => {
+    var chartWindow = e.target.contentWindow;
     let datas = chartOptions.configs;
     let values = chartOptions.options;
     let formula = JSON.parse(chartOptions.formula || '[]');
     if (!datas) return;
-    setLoading(true);
     try {
       let options = await getOptions(values, datas, formula, projectId);
-      iframeRef.current.contentWindow.render(options);
+      chartWindow.render(options);
     } catch (error) {
       console.log(error);
     }
@@ -99,12 +98,16 @@ function DataCenter(props) {
         )}
       </Card>
       <Card title="图表" bodyStyle={{ paddingBottom: 0 }}>
-        <iframe
-          ref={iframeRef}
-          style={{ width: '100%', height: 'calc(50vh - 80px)', border: 'none' }}
-          onLoad={renderChart}
-          srcDoc={chartOptions?.template?.Content}
-        ></iframe>
+        <Spin spinning={loading}>
+          {chartOptions.template?.Content && (
+            <iframe
+              style={{ width: '100%', height: 'calc(50vh - 80px)', border: 'none' }}
+              // srcDoc拼上id  防止当模板一致时无法触发onLoad
+              srcDoc={chartOptions?.template?.Content + `<div id="${chartOptions.id}"></div>`}
+              onLoad={renderChart}
+            ></iframe>
+          )}
+        </Spin>
       </Card>
     </div>
   );