fix: 历史曲线新增数据字典配置颜色

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

@@ -60,6 +60,7 @@ const DeviceTree = (props) => {
         setTreeData(newData);
         setTotal(response.data.totalPages);
         onTreeCheck([newData[0]]);
+        onTreeSelect([newData[0]]);
       } else {
         message.error(response.msg);
       }

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

@@ -4,11 +4,17 @@ import HistoryInfo from '../index';
 
 const REQUEST_HTTP = 'http';
 const REQUEST_METHOD_POST = 'post';
+const REQUEST_METHOD_GET = 'get';
 
 const GET_HISTORY_INFO =
-  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/SensorsDataForStation'; //获取历史信息
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/PandaCore/Monitor/Device/SensorsDataForStation'; //获取历史信息
 
-// const GET_HISTORY_INFO = '/api/Publish/GCK/Device/SensorsDataForStation'; //获取历史信息
+const GET_DICTIONARY_LIST =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/PandaCore/OMS/Data/GetDataDictionaryList'; //获取数据字典信息
+
+// const GET_HISTORY_INFO = '/api/PandaCore/GCK/Device/SensorsDataForStation'; //获取历史信息
+
+// const GET_DICTIONARY_LIST = '/api/PandaCore/OMS/Data/GetDataDictionaryList'; //获取数据字典信息
 
 const historyInfoService = {
   getHistoryInfo: {
@@ -16,11 +22,17 @@ const historyInfoService = {
     method: REQUEST_METHOD_POST,
     type: REQUEST_HTTP,
   },
+  getDictionaryList: {
+    url: GET_DICTIONARY_LIST,
+    method: REQUEST_METHOD_GET,
+    type: REQUEST_HTTP,
+  },
 };
 
 const hsService = service(historyInfoService);
 
 const getHistoryInfo = hsService.getHistoryInfo;
+const getDictionaryList = hsService.getDictionaryList;
 
 const Demo = () => {
   return (
@@ -30,6 +42,8 @@ const Demo = () => {
         tableProps={{ bordered: true, pagination: { pageSize: 20 } }}
         historyInfoService={getHistoryInfo}
         historyInfoParams={initialParams}
+        dictionaryService={getDictionaryList}
+        dictionaryParams={{ nodeID: 149 }}
       />
     </div>
   );

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

@@ -110,6 +110,81 @@ const DefaultDatePicker = (value) => [
   },
 ];
 
+const DefaultOptions = (color, contrastOption) => ({
+  chart: {
+    zoomType: 'x',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+  },
+  colors: color,
+  title: null,
+  credits: false,
+  rangeSelector: {
+    enabled: false,
+  },
+  xAxis: [
+    {
+      lineWidth: 0,
+      crosshair: true,
+      type: 'datetime',
+      gridLineDashStyle: 'dash',
+      gridLineWidth: 1,
+      dateTimeLabelFormats: {
+        second: '%H:%M:%S',
+        minute: '%H:%M',
+        hour: '%H:%M',
+        day: '%d',
+        week: '%d',
+        month: '%d',
+        year: '%Y',
+      },
+    },
+  ],
+  yAxis: [],
+  tooltip: {
+    shared: true,
+    split: false,
+    valueDecimals: 3,
+    formatter: function () {
+      let html = `<b>${Highcharts.dateFormat(
+        contrastOption === 'day' ? '%H:%M' : '%d %H:%M',
+        this.x,
+      )}</b><br/>`;
+      this.points.forEach((item) => {
+        html += `<span style={{color: ${item.series.color}}}>${item.series.name}</span>:
+                <b>${
+                  item.point.y.toFixed(
+                    item.series.userOptions.decimalPoint ? item.series.userOptions.decimalPoint : 2,
+                  ) * 1
+                }${item.series.userOptions.tooltip.valueSuffix}</b>
+                <br/>`;
+      });
+      return html;
+    },
+  },
+  plotOptions: {
+    series: {
+      showInNavigator: true,
+      connectNulls: false,
+      zoneAxis: 'x',
+    },
+  },
+  legend: {
+    enabled: true,
+    verticalAlign: 'top',
+  },
+  series: [],
+  responsive: {
+    rules: [
+      {
+        condition: {
+          maxWidth: 800,
+          minHeight: 500,
+        },
+      },
+    ],
+  },
+});
+
 let chartWidth = 0; // chart width
 let chartHeight = 0; // chart height
 
@@ -117,7 +192,15 @@ const HistoryInfo = (props) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('history-info');
 
-  const { title, tableProps, historyInfoService, historyInfoParams, defaultChecked } = props;
+  const {
+    title,
+    tableProps,
+    historyInfoService,
+    historyInfoParams,
+    dictionaryService,
+    dictionaryParams,
+    defaultChecked,
+  } = props;
 
   const [activeTabKey, setActiveTabKey] = useState('curve');
   const [timeValue, setTimeValue] = useState('customer');
@@ -128,6 +211,7 @@ const HistoryInfo = (props) => {
   const [checkboxData, setCheckboxData] = useState(CheckboxData);
   const [dataThinKey, setDataThinKey] = useState(timeIntervalList[0].key);
   const [options, setOptions] = useState({});
+  const [colors, setColors] = useState(defaultColors);
   const [params, setParams] = useState(historyInfoParams);
   const [tableData, setTableData] = useState([]);
   const [pageSize, setPageSize] = useState(20);
@@ -257,6 +341,22 @@ const HistoryInfo = (props) => {
     });
   };
 
+  // 获取数据字典配置的曲线颜色
+  const getDictionaryList = () => {
+    dictionaryService(dictionaryParams).then((res) => {
+      if (res.code === 0 && res.data.length) {
+        const colorsData = res.data;
+        colorsData.sort((a, b) => a.nodeName.localeCompare(b.nodeName));
+        const color = colorsData.map((item) => item.nodeValue);
+        setColors(color);
+      }
+    });
+  };
+
+  useEffect(() => {
+    dictionaryService && getDictionaryList();
+  }, []);
+
   useEffect(() => {
     onChangeParams(state);
   }, [state]);
@@ -472,10 +572,9 @@ const HistoryInfo = (props) => {
 
   // 处理图表options
   const handleChartOptions = () => {
-    // const { series } = chartOptions;
-    let _series = [];
+    const _series = [];
     let _yAxis = [];
-    let uniqueUnit = [];
+    const uniqueUnit = [];
     series.forEach((item, index) => {
       // 处理series
       let _s = {
@@ -551,7 +650,7 @@ const HistoryInfo = (props) => {
       global: { timezoneOffset: -8 * 60 },
     });
 
-    let options = { ...defaultOptions };
+    let options = { ...DefaultOptions(colors, contrastOption) };
 
     if (CheckboxData[0].checked) {
       _yAxis = setYaxisMin(_yAxis, _series);
@@ -561,30 +660,12 @@ const HistoryInfo = (props) => {
 
     if (_yAxis.length > 0) {
       options = {
-        ...defaultOptions,
-        // ...chartOptions,
+        ...DefaultOptions(colors, contrastOption),
         yAxis: _yAxis,
         series: _series,
       };
     }
 
-    options.tooltip.formatter = function formatter() {
-      let _html = `<b>${Highcharts.dateFormat(
-        contrastOption === 'day' ? '%H:%M' : '%d %H:%M',
-        this.x,
-      )}</b><br/>`;
-      this.points.forEach((item) => {
-        _html += `<span style={{color: ${item.series.color}}}>${item.series.name}</span>:
-                <b>${
-                  item.point.y.toFixed(
-                    item.series.userOptions.decimalPoint ? item.series.userOptions.decimalPoint : 2,
-                  ) * 1
-                }${item.series.userOptions.tooltip.valueSuffix}</b>
-                <br/>`;
-      });
-      return _html;
-    };
-
     if (container.current) {
       if (container.current.offsetWidth !== 0) {
         chartWidth = container.current.offsetWidth;
@@ -731,7 +812,7 @@ const endFormat = 'YYYY-MM-DD 23:59:59';
 
 const timeFormat = 'YYYY-MM-DD HH:mm:ss';
 
-const colors = [
+const defaultColors = [
   '#1884EC',
   '#90CE53',
   '#86E0C7',
@@ -750,65 +831,6 @@ const colors = [
   '#cbcc75',
 ];
 
-const defaultOptions = {
-  chart: {
-    zoomType: 'x',
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
-  },
-  colors: colors,
-  title: null,
-  credits: false,
-  rangeSelector: {
-    enabled: false,
-  },
-  xAxis: [
-    {
-      lineWidth: 0,
-      crosshair: true,
-      type: 'datetime',
-      gridLineDashStyle: 'dash',
-      gridLineWidth: 1,
-      dateTimeLabelFormats: {
-        second: '%H:%M:%S',
-        minute: '%H:%M',
-        hour: '%H:%M',
-        day: '%d',
-        week: '%d',
-        month: '%d',
-        year: '%Y',
-      },
-    },
-  ],
-  yAxis: [],
-  tooltip: {
-    shared: true,
-    split: false,
-    valueDecimals: 3,
-  },
-  plotOptions: {
-    series: {
-      showInNavigator: true,
-      connectNulls: false,
-      zoneAxis: 'x',
-    },
-  },
-  legend: {
-    enabled: true,
-    verticalAlign: 'top',
-  },
-  series: [],
-  responsive: {
-    rules: [
-      {
-        condition: {
-          maxWidth: 800,
-          minHeight: 500,
-        },
-      },
-    ],
-  },
-};
-
 const initialState = {
   dateRange: [],
   ignoreOutliers: false,

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

@@ -52,6 +52,7 @@ const QuotaSelect = ({
   const [targetValue, setTargetValue] = useState('emphasis');
   const [allQuotaList, setAllQuotaList] = useState([]);
   const [quotaList, setQuotaList] = useState([]);
+  const [groupQuotaList, setGroupQuotaList] = useState([]);
   const [selectDevice, setSelectDevice] = useState({}); // 选中的设备
   const [selectData, setSelectData] = useState([]); // 选中的指标数据
   const [confParams, setConfParams] = useState({});
@@ -99,6 +100,34 @@ const QuotaSelect = ({
     });
   };
 
+  // 处理指标分组
+  const handleGroupData = (data) => {
+    const groupData = [];
+    const groupQuotaData = [];
+    data.forEach((item) => {
+      if (!groupData.includes(item.groupName)) {
+        groupData.push(item.groupName);
+      }
+    });
+    groupData.forEach((group) => {
+      const list = [];
+      data.forEach((child) => {
+        if (child.groupName === group) {
+          list.push(child);
+        }
+      });
+      groupQuotaData.push({
+        groupName: group || '未分组指标',
+        quotaList: list,
+      });
+    });
+    setGroupQuotaList(groupQuotaData);
+  };
+
+  useEffect(() => {
+    handleGroupData(quotaList);
+  }, [quotaList]);
+
   useEffect(() => {
     if (targetValue === 'emphasis') {
       filterEmphasisQuota();
@@ -360,24 +389,31 @@ const QuotaSelect = ({
               </div>
               <div className={classNames(`${prefixCls}-modal-option-wrap`)}>
                 {!quotaList.length && <Empty />}
-                <Row gutter={[0, 6]}>
-                  {!!quotaList.length &&
-                    quotaList.map((item) => (
-                      <Col span={8} key={item.key}>
-                        <Checkbox
-                          value={item.title}
-                          checked={item.checked}
-                          disabled={
-                            (selectData.length > maximum || selectData.length === maximum) &&
-                            !item.checked
-                          }
-                          onChange={(e) => handleCheckboxChange(e, item)}
-                        >
-                          {item.title}
-                        </Checkbox>
-                      </Col>
-                    ))}
-                </Row>
+                {!!quotaList.length &&
+                  groupQuotaList.map((group, index) => (
+                    <div key={index}>
+                      <div className={classNames(`${prefixCls}-modal-class-title`)}>
+                        {group.groupName}
+                      </div>
+                      <Row gutter={[0, 6]}>
+                        {group.quotaList.map((item) => (
+                          <Col span={8} key={item.key}>
+                            <Checkbox
+                              value={item.title}
+                              checked={item.checked}
+                              disabled={
+                                (selectData.length > maximum || selectData.length === maximum) &&
+                                !item.checked
+                              }
+                              onChange={(e) => handleCheckboxChange(e, item)}
+                            >
+                              {item.title}
+                            </Checkbox>
+                          </Col>
+                        ))}
+                      </Row>
+                    </div>
+                  ))}
               </div>
             </div>
             <div className={classNames(`${prefixCls}-modal-right`)}>

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

@@ -81,10 +81,26 @@
 
   &-option-wrap {
     height: calc(100% - 52px);
-    margin-top: 20px;
     overflow-y: auto;
   }
 
+  &-class-title {
+    position: relative;
+    margin: 24px 20px 16px 0;
+    padding: 0 0 16px 12px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    &:after {
+      position: absolute;
+      top: 3px;
+      left: 0;
+      width: 3px;
+      height: 16px;
+      background: #1890ff;
+      content: '';
+    }
+  }
+
   &-number {
     margin-bottom: 10px;
     padding: 4px 0 10px 20px;