手机移动端图标页面样式

config/router.config.js

@@ -68,12 +68,12 @@ export default [
             path: '/home/flow-list',
             component: './PurchaseAdmin/PurchaseList/Flow/List',
           },
-          {
-            path: '/home/mobiletest/chart',
-            component: './Mobile/DataMeter/Chart',
-          }
         ],
       },
+      {
+        path: '/mobiletest/chart',
+        component: './Mobile/DataMeter/Chart',
+      },
       {
         component: '404',
       },

src/components/ChartUtils/utils.js

@@ -7,6 +7,77 @@ import {
   queryFormHistoryData,
 } from '@/services/ProjectAdmin';
 
+const computePrefixExpression = (function() {
+  var s1 = [],
+    result;
+  return function(prefixExpression) {
+    s1.length = 0;
+    //计算
+    while (prefixExpression.length > 0) {
+      var o = prefixExpression.shift();
+      if (operator_map.indexOf(o) == -1) {
+        s1.push(Number(o));
+      } else {
+        switch (o) {
+          case '+': {
+            result = s1.pop() + s1.pop();
+            break;
+          }
+          case '-': {
+            result = s1.pop() - s1.pop();
+            break;
+          }
+          case '*': {
+            result = s1.pop() * s1.pop();
+            break;
+          }
+          case '/': {
+            result = s1.pop() / s1.pop();
+            break;
+          }
+        }
+        s1.push(result);
+      }
+    }
+    return s1[0];
+  };
+})();
+
+const getFunctionValue = child => {
+  let data = {};
+  data.data = [];
+  let expression = child.tempExpression;
+  let first = child.data[0];
+  let indexArr = child.indexArr;
+  first.data.forEach(item => {
+    // firstDevice.device
+    let resObj = {
+      [first.device.deviceName]: item,
+    };
+    let htime = item.htime;
+    for (let i = 1; i < child.data.length; i++) {
+      let element = child.data[i];
+      // deviceName = element.name
+      let result = element.data.find(item => item.htime === htime);
+      if (!result) return;
+      resObj[element.device.deviceName] = result;
+    }
+    Object.keys(resObj).forEach(key => {
+      var result = indexArr.find(item => key === item.deviceName);
+      if (result) expression[result.index] = resObj[key].val;
+    });
+    // console.log(expression);
+    data.data.push({
+      htime: moment(htime).format('YYYY-MM-DD HH:mm:ss'),
+      val: computePrefixExpression([...expression]),
+    });
+    // console.log(indexArr, resObj, expression);
+    //  indexArr   resObj     expression
+  });
+  data.name = child.name;
+  return data;
+};
+
 /**
  * 获取图表的options
  * @param {object} values 表单数据

src/pages/Mobile/DataMeter/Chart.js

@@ -2,9 +2,10 @@ import React, { useState, useEffect, useRef } from 'react';
 import echarts from 'echarts';
 import { connect } from 'dva';
 import moment from 'moment';
+import style from './Chart.less';
 import { getPlcOptions, getFormOptions } from '@/components/ChartUtils/utils';
 const dataCache = {};
-
+console.log(style);
 function DataCenter(props) {
   const [chart, setChart] = useState();
   const [timer, setTimer] = useState();
@@ -15,7 +16,7 @@ function DataCenter(props) {
   const [loading, setLoading] = useState(false);
   const { chartConfigList, dispatch } = props;
   // const { projectId } = props.location; //?
-  const projectId = 46;
+  const projectId = 92;
 
   const handleClickTabs = id => {
     let item = chartConfigList.find(c => c.id == id);
@@ -30,26 +31,15 @@ function DataCenter(props) {
         payload: {
           projectId,
         },
-        // callback: list => console.log(list),
       });
     }
   }, [projectId]);
 
-  useEffect(() => {
-    let chart = echarts.init(chartEle.current);
-    setChart(chart);
-    const controller = new AbortController();
-    signalRef.current = controller;
-    return () => {
-      clearTimeout(timer);
-      signalRef.current.abort();
-    };
-  }, []);
-
   useEffect(() => {
     const chartWindow = iframeRef.current?.contentWindow;
     if (!chartWindow) return;
     if (chartWindow.render) {
+      console.log(chartWindow.render)
       renderChart();
     } else {
       chartWindow.onload = () => {
@@ -58,9 +48,14 @@ function DataCenter(props) {
     }
   }, [chartOptions]);
 
+  useEffect(() => {
+    chartConfigList && handleClickTabs(chartConfigList[0].id);
+  }, [chartConfigList]);
+
   const getOptionsForConfig = item => {
     console.log(item);
     setChartOptions(item);
+    clearTimeout(timer);
     let t = setTimeout(() => {
       getOptionsForConfig({ ...item });
     }, 1000 * 60);
@@ -89,34 +84,30 @@ function DataCenter(props) {
   };
 
   return (
-    <>
-      <ul>
-        {/* <ul className={style.tabsList}> */}
-        {(chartConfigList || [])
-          // .filter(item => item.show)
-          .map(item => (
-            <li
-              // key={item.key}
-              key = {item.id}
-              // className={`${active == item.key ? style.active : ''}`}
-              onClick={() => handleClickTabs(item.id)}
-            >
-              {/* {item.title} */}
+    <div className={style.body}>
+      <div className={style.title}>数据项</div>
+      <div className={style.listWrapper}>
+        <div className={style.list}>
+          {(chartConfigList || []).map(item => (
+            <div key={item.id} onClick={() => handleClickTabs(item.id)} className={style.listItem}>
               {item.name}
-            </li>
+            </div>
           ))}
-      </ul>
-      <div style={{ paddingTop: '0.1rem', overflow: 'hidden' }}>
-        {chartOptions && chartOptions.template && (
-          <iframe
-            ref={iframeRef}
-            style={{ width: '100%', height: '98%', border: 'none' }}
-            srcDoc={chartOptions.template.Content}
-          ></iframe>
-        )}
-        <div style={{ display: chartOptions, height: '100%' }} ref={chartEle}></div>
+        </div>
+      </div>
+      <div className={style.title}>图表</div>
+      <div className={style.chartWrapper}>
+        <div style={{ paddingTop: '0.1rem', overflow: 'hidden' }}>
+          {chartOptions && chartOptions.template && (
+            <iframe
+              ref={iframeRef}
+              style={{ width: '100%', height: '30vh', border: 'none' }}
+              srcDoc={chartOptions.template.Content}
+            ></iframe>
+          )}
+        </div>
       </div>
-    </>
+    </div>
   );
 }
 export default connect(({ dataMeterNew, user }) => ({

src/pages/Mobile/DataMeter/Chart.less

@@ -0,0 +1,34 @@
+.body {
+  background-color: #0d1a2b;
+  color: #fff;
+  height: 100%;
+}
+
+.title {
+  font-size: 20px;
+  padding: 10px 0px;
+}
+
+.listWrapper {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+.list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.listItem {
+  width: 80%;
+  text-align: center;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  margin: 5px 0px;
+  padding: 5px 0px;
+}
+
+.chartWrapper{
+	height: 40vh;
+}