fix: 图表逻辑 & 展示优化

km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/NodeScope.tsx

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from 'react';
+import { Radio, Input, Popover, Space, Checkbox, Row, Col, Button } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
+import { InodeScopeModule } from './index';
+import './style/node-scope.less';
+
+interface propsType {
+  change: Function;
+  nodeScopeModule: InodeScopeModule;
+}
+
+const OptionsDefault = [
+  {
+    label: 'Top 5',
+    value: 5,
+  },
+  {
+    label: 'Top 10',
+    value: 10,
+  },
+  {
+    label: 'Top 15',
+    value: 15,
+  },
+];
+
+const NodeScope = ({ nodeScopeModule, change }: propsType) => {
+  const {
+    hasCustomScope,
+    customScopeList: customList,
+    scopeName = '',
+    scopeLabel = '自定义范围',
+    searchPlaceholder = '输入内容进行搜索',
+  } = nodeScopeModule;
+  const [topNum, setTopNum] = useState<number>(5);
+  const [isTop, setIsTop] = useState(true);
+  const [audioOptions, setAudioOptions] = useState(OptionsDefault);
+  const [scopeSearchValue, setScopeSearchValue] = useState('');
+  const [inputValue, setInputValue] = useState<string>(null);
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [popVisible, setPopVisible] = useState(false);
+  const [checkAll, setCheckAll] = useState(false);
+  const [checkedListTemp, setCheckedListTemp] = useState([]);
+  const [checkedList, setCheckedList] = useState([]);
+  const [allCheckedList, setAllCheckedList] = useState([]);
+
+  useEffect(() => {
+    const all = customList?.map((item) => item.value) || [];
+    setAllCheckedList(all);
+  }, [customList]);
+
+  useEffect(() => {
+    if (topNum) {
+      const timeOption = audioOptions.find((item) => item.value === topNum);
+
+      setInputValue(timeOption?.label);
+      setCheckedListTemp([]);
+      setCheckedList([]);
+
+      setPopVisible(false);
+    }
+  }, [topNum]);
+
+  useEffect(() => {
+    setIndeterminate(!!checkedListTemp.length && checkedListTemp.length < allCheckedList.length);
+    setCheckAll(checkedListTemp?.length === allCheckedList.length);
+  }, [checkedListTemp]);
+
+  const customSure = () => {
+    if (checkedListTemp?.length > 0) {
+      setCheckedList(checkedListTemp);
+      change(checkedListTemp, false);
+      setIsTop(false);
+      setTopNum(null);
+      setInputValue(`${checkedListTemp?.length}项`);
+      setPopVisible(false);
+    }
+  };
+
+  const customCancel = () => {
+    setCheckedListTemp(checkedList);
+    setPopVisible(false);
+  };
+
+  const visibleChange = (visible: any) => {
+    setCheckedListTemp(checkedList);
+    setPopVisible(visible);
+  };
+
+  const periodtimeChange = (e: any) => {
+    const topNum = e.target.value;
+    setTopNum(topNum);
+    change(topNum, true);
+    setIsTop(true);
+  };
+
+  const onCheckAllChange = (e: any) => {
+    setCheckedListTemp(e.target.checked ? allCheckedList : []);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+  };
+
+  const checkChange = (val: any) => {
+    setCheckedListTemp(val);
+    // setIndeterminate(!!val.length && val.length < allCheckedList.length);
+    // setCheckAll(val?.length === allCheckedList.length);
+  };
+
+  const clickContent = (
+    <div className="dd-node-scope-module">
+      {/* <span>时间：</span> */}
+      <div className="flx_con">
+        <div className="flx_l">
+          <h6 className="time_title">选择 top 范围</h6>
+          <Radio.Group
+            optionType="button"
+            buttonStyle="solid"
+            className="topNum-radio-group"
+            // options={audioOptions}
+            onChange={periodtimeChange}
+            value={topNum}
+          >
+            <Space direction="vertical" size={16}>
+              {audioOptions.map((item, index) => (
+                <Radio value={item.value} key={index}>
+                  {item.label}
+                </Radio>
+              ))}
+            </Space>
+          </Radio.Group>
+        </div>
+        {hasCustomScope && (
+          <div className="flx_r">
+            <h6 className="time_title">{scopeLabel}</h6>
+            <div className="custom-scope">
+              <div className="check-row">
+                <Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+                  全选
+                </Checkbox>
+                <Input
+                  className="search-input"
+                  suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
+                  size="small"
+                  placeholder={searchPlaceholder}
+                  onChange={(e) => setScopeSearchValue(e.target.value)}
+                />
+              </div>
+              <div className="fixed-height">
+                <Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
+                  <Row gutter={[10, 12]}>
+                    {customList
+                      .filter((item) => item.label.includes(scopeSearchValue))
+                      .map((item) => (
+                        <Col span={12} key={item.value}>
+                          <Checkbox value={item.value}>{item.label}</Checkbox>
+                        </Col>
+                      ))}
+                  </Row>
+                </Checkbox.Group>
+              </div>
+
+              <div className="btn-con">
+                <Button
+                  type="primary"
+                  size="small"
+                  className="btn-sure"
+                  onClick={customSure}
+                  disabled={checkedListTemp?.length > 0 ? false : true}
+                >
+                  确定
+                </Button>
+                <Button size="small" onClick={customCancel}>
+                  取消
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+  return (
+    <>
+      <div id="d-node-scope">
+        <div className="scope-title">{scopeName}筛选：</div>
+        <Popover
+          trigger={['click']}
+          visible={popVisible}
+          content={clickContent}
+          placement="bottomRight"
+          overlayClassName={`d-node-scope-popover ${hasCustomScope ? 'large-size' : ''}`}
+          onVisibleChange={visibleChange}
+        >
+          <span className="input-span">
+            <Input
+              className={isTop ? 'relativeTime d-node-scope-input' : 'absoluteTime d-node-scope-input'}
+              value={inputValue}
+              readOnly={true}
+              suffix={<IconFont type="icon-jiantou1" rotate={90} style={{ color: '#74788D' }}></IconFont>}
+            />
+          </span>
+        </Popover>
+      </div>
+    </>
+  );
+};
+
+export default NodeScope;