Merge xyh

Next xyh

src/components/DashBoard/echarts.tsx

@@ -59,7 +59,6 @@ export default (props: EchartsProps) => {
   const chartsRef = useRef<any>(null);
 
   const initEcharts = (dom: HTMLDivElement) => {
-    debugger;
     if (!chartsRef.current) {
       chartsRef.current = echarts.init(dom);
       if (props.options) {
@@ -85,7 +84,6 @@ export default (props: EchartsProps) => {
   }, []);
 
   useEffect(() => {
-    debugger;
     if (chartsRef.current && props.options) {
       chartsRef.current.setOption(props.options);
     }

src/components/Ellipsis/index.less

@@ -0,0 +1,52 @@
+.ellipsis-warp {
+  position: relative;
+  width: 100%;
+}
+
+.ellipsis-max {
+  position: fixed;
+  top: -9999999999px;
+  left: 0;
+  z-index: -200;
+  width: max-content;
+}
+
+.ellipsis-title {
+  width: 100%;
+}
+
+.ellipsis {
+  display: -webkit-box;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.ellipsis-1 {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.ellipsis-2 {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.ellipsis-3 {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.ellipsis-4 {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
+//.ellipsis-70 {
+//  width: 70%;
+//  overflow: hidden;
+//  white-space: nowrap;
+//  text-align: left;
+//  text-overflow: ellipsis;
+//}

src/components/Ellipsis/index.tsx

@@ -0,0 +1,77 @@
+import { useState, useRef, useEffect } from 'react';
+import { unmountComponentAtNode } from 'react-dom';
+import { useSize } from 'ahooks';
+import Style from './index.less';
+import classnames from 'classnames';
+import { Tooltip } from 'antd';
+
+interface EllipsisProps {
+  title?: string;
+  maxWidth?: string | number;
+  titleStyle?: CSSStyleSheet;
+  titleClassName?: string;
+  showToolTip?: boolean;
+  /**
+   * @default 1
+   */
+  row?: 1 | 2 | 3 | 4;
+}
+
+export default (props: EllipsisProps) => {
+  const parentNode = useRef<HTMLDivElement | null>(null);
+  const extraNode = useRef<HTMLDivElement | null>(null);
+  const titleNode = useRef<HTMLDivElement | null>(null);
+  const parentSize = useSize(parentNode.current);
+  const extraSize = useSize(extraNode.current);
+  const [isEllipsis, setIsEllipsis] = useState(false);
+  // const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    if (extraSize.width && parentSize.width) {
+      if (extraSize.width > parentSize.width * (props.row || 1)) {
+        setIsEllipsis(true);
+      } else {
+        setIsEllipsis(false);
+      }
+      if (extraNode.current) {
+        unmountComponentAtNode(extraNode.current);
+        extraNode.current.innerHTML = '';
+        extraNode.current.setAttribute('style', 'display: none');
+      }
+    }
+  }, [props.title, extraSize]);
+
+  const ellipsisTitleClass = `ellipsis-${props.row || 1}`;
+
+  const ellipsisNode = (
+    <div
+      ref={titleNode}
+      className={classnames(
+        'ellipsis-title',
+        Style.ellipsis,
+        Style[ellipsisTitleClass],
+        props.titleClassName,
+      )}
+      style={{ ...props.titleStyle, width: props.maxWidth || '100%' }}
+    >
+      {props.title}
+    </div>
+  );
+
+  return (
+    <div className={Style['ellipsis-warp']} ref={parentNode}>
+      {isEllipsis && props.showToolTip !== false ? (
+        <Tooltip title={props.title}>{ellipsisNode}</Tooltip>
+      ) : (
+        ellipsisNode
+      )}
+      <div
+        className={classnames(props.titleClassName, Style['ellipsis-max'])}
+        style={{ ...props.titleStyle, width: 'max-content !important' }}
+        ref={extraNode}
+      >
+        {props.title}
+      </div>
+    </div>
+  );
+};

src/components/ProTableCard/CardItems/device.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { DeviceInstance } from '@/pages/device/Instance/typings';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { TableCard } from '@/components';
+import { TableCard, Ellipsis } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { CheckOutlined } from '@ant-design/icons';
@@ -67,11 +67,7 @@ export const ExtraDeviceCard = (props: DeviceCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <div className={'card-item-header-name'}>
-              <Tooltip title={props.name}>
-                <div className={'ellipsis'}>{props.name}</div>
-              </Tooltip>
-            </div>
+            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
           </div>
           <div className={'card-item-content-flex'}>
             <div className={'flex-auto'}>
@@ -128,7 +124,7 @@ export default (props: DeviceCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>{props.name}</span>
+            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
           </div>
           <div className={'card-item-content'}>
             <div>

src/components/index.ts

@@ -14,3 +14,4 @@ export { default as PathSimplifier } from './AMapComponent/PathSimplifier';
 export { default as Empty } from './Empty';
 export { default as GeoPoint } from './GeoPoint';
 export { default as MetadataJsonInput } from './FormItems/MetadataJsonInput';
+export { default as Ellipsis } from './Ellipsis';

src/pages/demo/AMap/index.tsx

@@ -91,7 +91,6 @@ export default () => {
       <div style={{ position: 'absolute', top: 0 }}>
         <Select
           showSearch
-          allowClear
           options={data}
           filterOption={false}
           onSearch={debounce(onSearch, 300)}

src/pages/system/Department/Assets/deivce/bind.tsx

@@ -134,7 +134,7 @@ const Bind = observer((props: Props) => {
         },
       },
     ];
-    if (Object.keys(params).length) {
+    if (Object.keys(params).length && params.productId) {
       _params.push({
         type: 'and',
         column: 'productId$product-info',

src/pages/system/Department/Assets/deivce/index.tsx

@@ -318,6 +318,7 @@ export default observer((props: { parentId: string }) => {
         search={false}
         params={searchParam}
         gridColumn={2}
+        height={'none'}
         scroll={{ x: 1366 }}
         request={async (params) => {
           params.sorts = [{ name: 'createTime', order: 'desc' }];

src/pages/system/Department/Assets/product/index.tsx

@@ -277,6 +277,7 @@ export default observer((props: { parentId: string }) => {
         search={false}
         gridColumn={2}
         params={searchParam}
+        height={'none'}
         request={async (params) => {
           params.sorts = [{ name: 'createTime', order: 'desc' }];
           if (!props.parentId) {

src/pages/system/Department/Tree/tree.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Tooltip, Tree } from 'antd';
+import { Button, Input, Tree } from 'antd';
 import {
   DeleteOutlined,
   EditOutlined,
@@ -8,7 +8,7 @@ import {
 } from '@ant-design/icons';
 import { useEffect, useRef, useState } from 'react';
 import { service } from '@/pages/system/Department';
-import { Empty, PermissionButton } from '@/components';
+import { Ellipsis, Empty, PermissionButton } from '@/components';
 import { useIntl, useLocation } from 'umi';
 import { debounce } from 'lodash';
 import Save from '../save';
@@ -234,9 +234,7 @@ export default (props: TreeProps) => {
                   }}
                 >
                   <span className={'tree-node-name--title'}>
-                    <Tooltip title={nodeData.name}>
-                      <span className={'ellipsis'}>{nodeData.name}</span>
-                    </Tooltip>
+                    <Ellipsis title={nodeData.name} />
                   </span>
                   <span
                     className={classnames('tree-node-name--btn', {