Просмотр исходного кода

fix: 修改告警配置value报错

sun-chaochao 3 лет назад
Родитель
Сommit
d7b5da1e0c

BIN
public/images/alarm/alarm-config.png


+ 3 - 3
src/components/ProTableCard/CardItems/AlarmConfig.tsx

@@ -10,15 +10,15 @@ export interface AlarmConfigProps extends ConfigurationItem {
   avatarSize?: number;
 }
 
-export const aliyunSms = require('/public/images/notice/sms.png');
+export const aliyunSms = require('/public/images/alarm/alarm-config.png');
 
 export default (props: AlarmConfigProps) => {
   return (
     <TableCard
       actions={props.actions}
       detail={props.detail}
-      status={props.state.value}
-      statusText={props.state.text}
+      status={props.state?.value}
+      statusText={props.state?.text}
       statusNames={{
         enabled: StatusColorEnum.success,
         disabled: StatusColorEnum.error,

+ 24 - 4
src/pages/device/Product/index.tsx

@@ -24,6 +24,7 @@ import ProductCard from '@/components/ProTableCard/CardItems/product';
 import { downloadObject } from '@/utils/util';
 import { service as categoryService } from '@/pages/device/Category';
 import { service as deptService } from '@/pages/system/Department';
+import { omit } from 'lodash';
 
 export const service = new Service('device-product');
 export const statusMap = {
@@ -113,6 +114,7 @@ const Product = observer(() => {
         productModel.current = record;
         history.push(`${getMenuPathByParams(MENUS_CODE['device/Product/Detail'], record.id)}`);
       }}
+      key="view"
       style={{ padding: 0 }}
     >
       <Tooltip
@@ -146,6 +148,7 @@ const Product = observer(() => {
     <PermissionButton
       isPermission={permission.export}
       type={'link'}
+      key="download"
       style={{ padding: 0 }}
       tooltip={{
         title: intl.formatMessage({
@@ -153,9 +156,17 @@ const Product = observer(() => {
           defaultMessage: '下载',
         }),
       }}
-      onClick={async () => {
+      onClick={() => {
+        const extra = omit(record, [
+          'transportProtocol',
+          'protocolName',
+          'accessId',
+          'accessName',
+          'accessProvider',
+          'messageProtocol',
+        ]);
         downloadObject(
-          record,
+          extra,
           intl.formatMessage({
             id: 'pages.device.product',
             defaultMessage: '产品',
@@ -167,6 +178,7 @@ const Product = observer(() => {
       <DownloadOutlined />
     </PermissionButton>,
     <PermissionButton
+      key="action"
       popConfirm={{
         title: intl.formatMessage({
           id: `pages.data.option.${record.state ? 'disabled' : 'enabled'}.tips`,
@@ -496,9 +508,17 @@ const Product = observer(() => {
                 type={'link'}
                 key={'download'}
                 style={{ padding: 0 }}
-                onClick={async () => {
+                onClick={() => {
+                  const extra = omit(record, [
+                    'transportProtocol',
+                    'protocolName',
+                    'accessId',
+                    'accessName',
+                    'accessProvider',
+                    'messageProtocol',
+                  ]);
                   downloadObject(
-                    record,
+                    extra,
                     intl.formatMessage({
                       id: 'pages.device.product',
                       defaultMessage: '产品',

+ 31 - 17
src/pages/rule-engine/Alarm/Log/TabComponent/index.less

@@ -1,5 +1,7 @@
 @import '~antd/es/style/themes/default.less';
 
+@alarm-log-padding-left: 60px;
+
 .ellipsis {
   width: 100%;
   overflow: hidden;
@@ -11,7 +13,6 @@
   .alarm-log-item {
     display: flex;
     margin-bottom: 20px;
-    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
 
     .alarm-log-title {
       position: relative;
@@ -52,32 +53,40 @@
       background: url('/images/alarm/background.png') no-repeat;
       background-size: 100% 100%;
 
-      .alarm-log-image {
+      .alarm-log-data {
         display: flex;
         align-items: center;
+        min-width: 60%;
+        max-width: 100%;
 
-        .alarm-type {
-          max-width: 120px;
-          padding-right: 50px;
+        .alarm-log-image {
+          display: flex;
+          align-items: center;
+          padding-right: @alarm-log-padding-left;
           border-right: 1px solid rgba(0, 0, 0, 0.09);
-          .name {
-            color: #000;
-            font-size: 18px;
-          }
 
-          .text {
-            margin-top: 8px;
-            color: #666;
-            font-size: 14px;
-            .ellipsis();
+          .alarm-type {
+            max-width: 120px;
+            .name {
+              color: #000;
+              font-size: 18px;
+            }
+
+            .text {
+              margin-top: 8px;
+              color: #666;
+              font-size: 14px;
+              .ellipsis();
+            }
           }
         }
         .alarm-log-right {
           display: flex;
-          padding-left: 40px;
+          justify-content: space-between;
+          width: 50%;
+          padding-left: @alarm-log-padding-left;
           .alarm-log-time {
             max-width: 165px;
-            margin: 0 10px;
             .log-title {
               margin-top: 8px;
               color: #666;
@@ -91,9 +100,11 @@
               .ellipsis();
             }
           }
+          .alarm-log-status {
+            margin-left: @alarm-log-padding-left;
+          }
         }
       }
-
       .alarm-log-actions {
         .alarm-log-action {
           display: flex;
@@ -132,4 +143,7 @@
       }
     }
   }
+  .alarm-log-item:hover {
+    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
+  }
 }

+ 17 - 12
src/pages/rule-engine/Alarm/Log/TabComponent/index.tsx

@@ -155,17 +155,19 @@ const TabComponent = observer((props: Props) => {
                     <div className="alarm-log-title-text">{item.alarmName}</div>
                   </div>
                   <div className="alarm-log-content">
-                    <div className="alarm-log-image">
-                      <img
-                        width={88}
-                        height={88}
-                        src={imgMap.get(props.type)}
-                        alt={''}
-                        style={{ marginRight: 20 }}
-                      />
-                      <div className="alarm-type">
-                        <div className="name">{titleMap.get(item.targetType)}</div>
-                        <div className="text">{item.targetName}</div>
+                    <div className="alarm-log-data">
+                      <div className="alarm-log-image">
+                        <img
+                          width={88}
+                          height={88}
+                          src={imgMap.get(props.type)}
+                          alt={''}
+                          style={{ marginRight: 20 }}
+                        />
+                        <div className="alarm-type">
+                          <div className="name">{titleMap.get(item.targetType)}</div>
+                          <div className="text">{item.targetName}</div>
+                        </div>
                       </div>
                       <div className="alarm-log-right">
                         <div className="alarm-log-time">
@@ -174,7 +176,10 @@ const TabComponent = observer((props: Props) => {
                             {moment(item.alarmDate).format('YYYY-MM-DD HH:mm:ss')}
                           </div>
                         </div>
-                        <div className="alarm-log-time" style={{ paddingLeft: 10 }}>
+                        <div
+                          className="alarm-log-time alarm-log-status"
+                          style={{ paddingLeft: 10 }}
+                        >
                           <div className="log-title">状态</div>
                           <div className="context">
                             <Badge status={item.state.value === 'warning' ? 'error' : 'default'} />

+ 1 - 1
src/utils/util.ts

@@ -37,7 +37,7 @@ export const downloadFile = (url: string, params?: Record<string, any>) => {
  * @param record
  * @param fileName
  */
-export const downloadObject = (record: Record<string, unknown>, fileName: string) => {
+export const downloadObject = (record: Record<string, any>, fileName: string) => {
   // 创建隐藏的可下载链接
   const ghostLink = document.createElement('a');
   ghostLink.download = `${fileName}-${