修复图表特定情况下渲染出错

src/pages/Mobile/DataMeter/Chart.js

@@ -5,13 +5,12 @@ import style from './Chart.less';
 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(() => {
@@ -42,9 +43,7 @@ function DataCenter(props) {
   }, [projectId]);
 
   // useEffect(() => {
-  //   const chartWindow = iframeRef.current?.contentWindow;
-  //   console.log(chartOptions);
-  //   if (!chartWindow || !chartOptions) return;
+  //   if (!chartOptions) return;
   //   renderChart();
   // }, [chartOptions]);
 
@@ -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);
     }
@@ -100,12 +99,14 @@ function DataCenter(props) {
       </Card>
       <Card title="图表" bodyStyle={{ paddingBottom: 0 }}>
         <Spin spinning={loading}>
-          <iframe
-            ref={iframeRef}
-            style={{ width: '100%', height: 'calc(50vh - 80px)', border: 'none' }}
-            onLoad={renderChart}
-            srcDoc={chartOptions?.template?.Content}
-          ></iframe>
+          {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>