feat(Ellipsis): 新增组件

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,76 @@
+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 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) - 12) {
+        setIsEllipsis(true);
+      } else {
+        setIsEllipsis(false);
+      }
+      if (extraNode.current) {
+        unmountComponentAtNode(extraNode.current);
+        extraNode.current.innerHTML = '';
+        extraNode.current.setAttribute('style', 'display: none');
+      }
+      setShow(true);
+    }
+  }, [props.title, extraSize]);
+
+  const ellipsisTitleClass = `ellipsis-${props.row || 1}`;
+
+  const ellipsisNode = (
+    <div
+      className={classnames(
+        'ellipsis-title',
+        {
+          [Style.ellipsis]: isEllipsis,
+          [Style[ellipsisTitleClass]]: isEllipsis,
+        },
+        props.titleClassName,
+      )}
+      style={{ ...props.titleStyle, width: props.maxWidth || '100%' }}
+    >
+      {props.title}
+    </div>
+  );
+
+  return (
+    <div className={Style['ellipsis-warp']} ref={parentNode}>
+      {show ? (
+        isEllipsis && props.showToolTip !== false ? (
+          <Tooltip title={props.title}>{ellipsisNode}</Tooltip>
+        ) : (
+          ellipsisNode
+        )
+      ) : null}
+      <div className={Style['ellipsis-max']} 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',