@zgfe/modules-dm 1.0.34-heyh.2 → 1.0.34-heyh.21

package/es/modules/dataCollection/components/sortableComponnet.js

@@ -1,5 +1,5 @@
 import { BizGlobalDataContext } from '@zgfe/business-lib';
-import { Checkbox } from 'antd';
+import { Checkbox, Tooltip } from 'antd';
 import request from '../../../utils/ajax';
 import apis from '../../../constants/api';
 import React, { useContext } from 'react';
@@ -15,40 +15,54 @@ var SortableComponnet = function SortableComponnet(props) {
     componnetIndex = props.componnetIndex,
     groupId = props.groupId,
     groupingData = props.groupingData,
-    setGroupingData = props.setGroupingData;
+    setGroupingData = props.setGroupingData,
+    refresh = props.refresh,
+    searchData = props.searchData;
   // 需要拖动的元素的容器
   var SortableItem = SortableElement(function (data) {
     var _data$value = data.value,
       item = _data$value.item,
       index = _data$value.index;
-    return /*#__PURE__*/React.createElement(Checkbox, {
+    var name = item.alias_name ? item.alias_name : item.event_name;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "".concat(item.owner === 'zg_vtl' ? '虚拟事件' : '元事件', " | ").concat(name),
+      key: index
+    }, /*#__PURE__*/React.createElement(Checkbox, {
       className: "checkbox-item ".concat(item.event_hidden ? 'event-hidden' : '', " column-").concat(groupId),
       checked: item.checked,
       key: index,
       onChange: function onChange() {
         return onChangeItem(groupId, item.event_id);
       }
-    }, item.alias_name ? item.alias_name : item.event_name);
+    }, name));
   });
   // 不可拖动的元素（未分组数据）
   var SortableItemNotDrag = function SortableItemNotDrag(data) {
     var item = data.item,
       index = data.index;
-    return /*#__PURE__*/React.createElement(Checkbox, {
+    var name = item.alias_name ? item.alias_name : item.event_name;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "".concat(item.owner === 'zg_vtl' ? '虚拟事件' : '元事件', " | ").concat(name),
+      key: index
+    }, /*#__PURE__*/React.createElement(Checkbox, {
       className: "checkbox-item ".concat(item.event_hidden ? 'event-hidden' : '', " column-").concat(groupId),
       checked: item.checked,
       key: index,
       onChange: function onChange() {
         return onChangeItem(groupId, item.event_id);
       }
-    }, item.alias_name ? item.alias_name : item.event_name);
+    }, name));
   };
+  // const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
+  //   if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop === 400) {
+  //   }
+  // };
   // 整个元素排序的容器
   var SortableList = SortableContainer(function () {
     return /*#__PURE__*/React.createElement("div", {
       key: componnetIndex
     }, componnetData.map(function (item, index) {
-      if (groupId !== -1) {
+      if (groupId !== -1 && searchData === "") {
         return /*#__PURE__*/React.createElement(SortableItem, {
           key: "item-".concat(index),
           index: index,
@@ -89,7 +103,9 @@ var SortableComponnet = function SortableComponnet(props) {
         groupId: groupId,
         ids: ids.join(',')
       }
-    }).then(function () {});
+    }).then(function () {
+      refresh();
+    });
   };
   return /*#__PURE__*/React.createElement(SortableList, {
     distance: 5,

package/es/modules/dataCollection/components/tablePlus.js

@@ -154,7 +154,7 @@ var TablePlus = function TablePlus(props) {
         }).then(function (res) {
           // 该事件在虚拟事件中有使用
           if (res.data === 1) {
-            eventDelModal(record.event_id, '检测到该事件在虚拟事件中使用');
+            eventDelModal(record.event_id, '检测到该事件在虚拟事件中使用, 删除后，将停止采集该事件数据，也将不在分析平台中显示！');
           } else {
             eventDelModal(record.event_id, '删除后，将停止采集该事件数据，也将不在分析平台中显示！');
           }
@@ -411,7 +411,9 @@ var TablePlus = function TablePlus(props) {
         }, record.alias_name),
         trigger: "hover",
         placement: "top"
-      }, /*#__PURE__*/React.createElement("div", null, record.alias_name)), /*#__PURE__*/React.createElement(IconFont, {
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'alias_name_text'
+      }, record.alias_name)), /*#__PURE__*/React.createElement(IconFont, {
         className: "edit-alias-name",
         onClick: function onClick() {
           setAliasNameInput(record.alias_name);

package/es/modules/dataCollection/components/virtualTablePlus.js

@@ -192,7 +192,9 @@ var VirtualTablePlus = function VirtualTablePlus(props) {
     key: 'aliasName',
     width: 167,
     render: function render(_, record) {
-      return /*#__PURE__*/React.createElement(Popover, {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "alias_name"
+      }, /*#__PURE__*/React.createElement(Popover, {
         content: /*#__PURE__*/React.createElement("div", {
           style: {
             width: '200px',
@@ -201,7 +203,9 @@ var VirtualTablePlus = function VirtualTablePlus(props) {
         }, record.aliasName),
         trigger: "hover",
         placement: "top"
-      }, /*#__PURE__*/React.createElement("div", null, record.aliasName));
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'alias_name_text'
+      }, record.aliasName)));
     }
   }, {
     title: '首次上报时间',
@@ -209,7 +213,7 @@ var VirtualTablePlus = function VirtualTablePlus(props) {
     key: 'insertTime',
     width: 187,
     render: function render(text) {
-      return /*#__PURE__*/React.createElement("div", null, moment(text).format('YYYY-MM-DD HH:mm:ss'));
+      return /*#__PURE__*/React.createElement("div", null, text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '');
     }
   }, {
     title: '末次上报时间',
@@ -217,18 +221,54 @@ var VirtualTablePlus = function VirtualTablePlus(props) {
     key: 'lastInsertTime',
     width: 187,
     render: function render(text) {
-      return /*#__PURE__*/React.createElement("div", null, moment(text).format('YYYY-MM-DD HH:mm:ss'));
+      return /*#__PURE__*/React.createElement("div", null, text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '');
+    }
+  }, {
+    title: '显示状态',
+    dataIndex: 'hidden',
+    key: 'hidden',
+    width: 187,
+    render: function render(text) {
+      return /*#__PURE__*/React.createElement("div", null, text === 0 ? '显示' : '隐藏');
     }
   }, {
     title: '描述',
     dataIndex: 'description',
     key: 'description',
-    width: 187
+    width: 187,
+    render: function render(text) {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Popover, {
+        content: /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: '200px',
+            wordBreak: 'break-all'
+          }
+        }, text),
+        trigger: "hover",
+        placement: "top"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'description'
+      }, text)));
+    }
   }, {
-    title: '包含埋点事件',
+    title: '包含元事件',
     dataIndex: 'bindEvent',
     key: 'bindEvent',
-    width: 187
+    width: 187,
+    render: function render(text) {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Popover, {
+        content: /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: '200px',
+            wordBreak: 'break-all'
+          }
+        }, text),
+        trigger: "hover",
+        placement: "top"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'bind-event'
+      }, text)));
+    }
   }, {
     title: '创建人',
     dataIndex: 'createUser',

package/es/modules/dataCollection/index.js

@@ -19,7 +19,7 @@ var DataCollection = function DataCollection(props) {
   var _useContext = useContext(BizGlobalDataContext),
     currentApp = _useContext.currentApp,
     authority = _useContext.authority;
-  var _useState = useState(3),
+  var _useState = useState(1),
     _useState2 = _slicedToArray(_useState, 2),
     listTab = _useState2[0],
     setListTab = _useState2[1];
@@ -72,7 +72,7 @@ var DataCollection = function DataCollection(props) {
     }
   }, authority[100020] && /*#__PURE__*/React.createElement(Radio.Button, {
     value: 1
-  }, "\u57CB\u70B9\u4E8B\u4EF6"), /*#__PURE__*/React.createElement(Radio.Button, {
+  }, "\u5143\u4E8B\u4EF6"), /*#__PURE__*/React.createElement(Radio.Button, {
     value: 3
   }, "\u865A\u62DF\u4E8B\u4EF6"), authority[100021] && /*#__PURE__*/React.createElement(Radio.Button, {
     value: 2

package/es/modules/dataCollection/styles/index.less

@@ -15,7 +15,7 @@
   }
   .creact-group {
     .ant-modal-body {
-      padding: 3px 20px 20px 20px;
+      padding: 3px 20px 20px 20px !important;
     }
   }
 }
@@ -115,10 +115,6 @@
         word-break: break-all;
         background: red;
       }
-      .alias_name {
-        border: none;
-        cursor: pointer;
-      }
       .ant-input:focus,
       .ant-input-focused {
         background-color: #fff !important;
@@ -260,6 +256,16 @@
       }
       .alias_name {
         display: flex;
+        border: none;
+        cursor: pointer;
+        .alias_name_text {
+          display: -webkit-box;
+          max-width: 167px;
+          overflow: hidden;
+          cursor: pointer;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+        }
         .edit-alias-name {
           display: none;
           margin-left: 10px;
@@ -269,6 +275,15 @@
           color: @primary-color;
         }
       }
+      .bind-event,
+      .description {
+        display: -webkit-box;
+        max-width: 180px;
+        overflow: hidden;
+        cursor: pointer;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+      }
       .ant-table-row:hover {
         .collect-icon {
           opacity: 1;
@@ -376,6 +391,26 @@
 }
 
 .create-virtual-drawer {
+  #basic {
+    padding-bottom: 100px;
+    .ant-input {
+      border: none;
+    }
+  }
+  &-desc {
+    .ant-form-item-control {
+      max-width: 100%;
+    }
+  }
+  &-add {
+    color: #165dff;
+    &-icon {
+      margin-right: 8px;
+      font-weight: 900;
+      font-size: 18px !important;
+      vertical-align: -2px;
+    }
+  }
   &-see-box {
     > div {
       display: flex;
@@ -384,6 +419,7 @@
       color: #021429;
       span {
         width: 84px;
+        min-width: 84px;
         color: #5f6085;
         text-align: right;
       }
@@ -402,6 +438,15 @@
     > :nth-child(2) {
       margin-top: 8px;
     }
+    > :nth-child(1)::before {
+      display: inline-block;
+      margin-right: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: '*';
+    }
   }
   &-eventDataBox.see {
     > :nth-child(1) {
@@ -424,10 +469,15 @@
   }
   &-formSubmit {
     position: absolute;
-    right: 24px;
-    bottom: 24px;
+    right: 0;
+    bottom: 0;
     display: flex;
-    gap: 8px;
+    gap: 16px;
+    justify-content: end;
+    width: 100%;
+    padding: 24px;
+    background: #fff;
+    border-top: 1px solid #f2f3f4;
   }
 }
 
@@ -482,22 +532,37 @@
       > div {
         display: flex;
         flex-wrap: wrap;
+        gap: 12px;
         justify-content: flex-start;
         width: 100%;
         .checkbox-item {
-          width: 25%;
+          display: flex;
+          flex-shrink: 0;
+          align-items: center;
+          width: calc(25% - 9px);
+          height: 40px;
+          margin: 0;
+          padding: 9px 0 9px 16px;
+          background: #fafafb;
+          .ant-checkbox {
+            margin-top: -6px;
+          }
+          .ant-checkbox + span {
+            display: -webkit-box;
+            max-width: 100%;
+            overflow: hidden;
+            cursor: pointer;
+            user-select: none;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+          }
+        }
+        .checkbox-item.show{
+          display: flex;
+        }
+        .checkbox-item.hidden{
+          display: none;
         }
-        // width: 25%;
-        // .ant-checkbox {
-        //   top: 0em;
-        // }
-      }
-      .checkbox-item {
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        height: 40px;
-        margin: 0;
       }
       .event-hidden {
         color: #ccd0d4;
@@ -507,6 +572,15 @@
       display: none;
     }
   }
+  &-top-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .ant-input {
+      width: 374px;
+      border: none;
+    }
+  }
   .ant-drawer-title {
     span {
       margin-left: 8px;
@@ -518,11 +592,6 @@
     display: none;
   }
   .ant-drawer-extra {
-    display: flex;
-    justify-content: center;
-    > :nth-child(1) {
-      margin-right: 15px;
-    }
     .qingchu {
       font-size: 20px !important;
       cursor: pointer;
@@ -542,13 +611,13 @@
     }
   }
   .ant-modal-confirm-title {
-    display: inline;
-    color: #021429;
+    display: inline !important;
+    color: #021429 !important;
     font-weight: 500;
-    font-size: 24px;
+    font-size: 24px !important;
   }
   .ant-modal-confirm-content {
-    margin-top: 20px;
+    margin-top: 20px !important;
   }
 }
 
@@ -579,68 +648,84 @@
 }
 
 .select-attributes {
-  &-select {
-    .ant-select-dropdown {
-      display: none !important;
-    }
-  }
-}
-
-.select-attributes-box {
-  display: flex;
-  width: 616px;
-  height: 380px;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
-  &-left {
+  &-box {
     display: flex;
-    flex-direction: column;
-    width: 205px;
+    width: 616px;
     height: 380px;
-    padding: 8px;
-    overflow-y: auto;
+    background: #fff;
+    border-radius: 10px;
     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
-    > div {
-      display: flex;
-      justify-content: space-between;
-      padding: 6px 12px;
-    }
-    .active {
-      color: #fff;
-      background: #165dff;
-      border-radius: 4px;
-      > :nth-child(2) {
-        padding: 0px 4px;
-        border: 1px solid #fff;
-        border-radius: 10px;
-      }
-    }
-  }
-  &-right {
-    width: 100%;
-    height: 380px;
-    padding: 8px;
-    > :nth-child(2) {
+    &-left {
       display: flex;
       flex-direction: column;
-      gap: 8px;
-      align-items: flex-start;
-      width: 100%;
-      height: 320px;
-      margin-top: 8px;
+      width: 205px;
+      height: 380px;
+      padding: 8px;
       overflow-y: auto;
+      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
       > div {
         display: flex;
-        flex-shrink: 0;
-        gap: 10px;
-        align-items: center;
-        align-self: stretch;
-        height: 32px;
-        padding: 0px 16px;
+        justify-content: space-between;
+        padding: 6px 12px;
       }
       .active {
-        background: #e8efff;
+        color: #fff;
+        background: #165dff;
+        border-radius: 4px;
+        > :nth-child(2) {
+          padding: 0px 4px;
+          border: 1px solid #fff;
+          border-radius: 10px;
+        }
+      }
+    }
+    &-right {
+      width: 100%;
+      height: 380px;
+      padding: 8px;
+      > :nth-child(2) {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+        width: 100%;
+        height: 320px;
+        margin-top: 8px;
+        overflow-y: auto;
+        > div {
+          display: flex;
+          flex-shrink: 0;
+          gap: 10px;
+          align-items: center;
+          align-self: stretch;
+          height: 32px;
+          padding: 0px 16px;
+        }
+        .active {
+          background: #e8efff;
+        }
+      }
+    }
+  }
+  &-select {
+    .ant-select-dropdown {
+      display: none !important;
+    }
+  }
+  &-modal-box {
+    .ant-modal-close-x {
+      display: none;
+    }
+    .ant-modal-title {
+      position: relative;
+      .tishi1 {
+        margin-right: 8px;
+        color: #fd9f41;
+      }
+      .qingchu {
+        position: absolute;
+        top: 0;
+        right: 0;
       }
     }
   }
@@ -649,3 +734,9 @@
 .sortable-componnet-sortableList {
   z-index: 9999;
 }
+
+.not-operable {
+  color: #ccd0d4;
+  cursor: not-allowed !important;
+  user-select: none;
+}

package/es/modules/dataCollection/types.d.ts

@@ -22,6 +22,7 @@ export interface eventJsonProps {
 }
 export interface VirtualEventProps extends VirtualEventBase {
     eventGroupId: number;
+    groupId?: number;
     eventJson: eventJsonProps[];
     id: number;
 }
@@ -72,4 +73,5 @@ export interface SubmitDataProps {
 export interface EventGroupingDrawerProps {
     eventGroupingShow: boolean;
     setEventGroupingShow: Function;
+    refresh: Function;
 }

package/es/modules/dataCollection/virtualEventList.js

@@ -120,10 +120,12 @@ var VirtualEventList = function VirtualEventList() {
   };
   // 筛选事件
   var eventNameChange = function eventNameChange(e) {
+    setPageNumber(1);
     setEventNameChangeData(e.currentTarget.value);
   };
   // 筛选收藏
   var markTypeFilter = function markTypeFilter(markActive) {
+    setPageNumber(1);
     setMarkTypeData(markActive ? 1 : 0);
   };
   // 获取虚拟事件列表
@@ -218,10 +220,6 @@ var VirtualEventList = function VirtualEventList() {
       message.error('请输入分组名称');
       return;
     }
-    if (eventNameInput.length > 20) {
-      message.error('名称不可超过20字符');
-      return;
-    }
     request(apis.upsertEventGroup, {
       method: 'post',
       data: {
@@ -256,7 +254,7 @@ var VirtualEventList = function VirtualEventList() {
   }), /*#__PURE__*/React.createElement(Input, {
     className: "top-input",
     onChange: eventNameChange,
-    placeholder: "\u641C\u7D22\u4E8B\u4EF6\u540D\u79F0",
+    placeholder: "\u8BF7\u8F93\u5165\u4E8B\u4EF6\u540D\u79F0\u6216\u522B\u540D",
     prefix: /*#__PURE__*/React.createElement(IconFont, {
       type: "sousuo"
     })
@@ -298,8 +296,9 @@ var VirtualEventList = function VirtualEventList() {
       textAlign: 'right'
     },
     showQuickJumper: true,
-    showSizeChanger: total > 10,
+    showSizeChanger: total > pageSize,
     defaultCurrent: 1,
+    defaultPageSize: pageSize,
     current: pageNumber,
     total: total,
     onChange: onPaginationChange
@@ -312,7 +311,8 @@ var VirtualEventList = function VirtualEventList() {
     refresh: queryList
   }), /*#__PURE__*/React.createElement(EventGroupingDrawer, {
     eventGroupingShow: eventGroupingShow,
-    setEventGroupingShow: setEventGroupingShow
+    setEventGroupingShow: setEventGroupingShow,
+    refresh: queryList
   }), /*#__PURE__*/React.createElement(Modal, {
     title: "\u521B\u5EFA\u5206\u7EC4",
     className: "creact-group",
@@ -327,6 +327,7 @@ var VirtualEventList = function VirtualEventList() {
   }, /*#__PURE__*/React.createElement(Input, {
     placeholder: "\u8BF7\u8F93\u5165\u5206\u7EC4\u540D",
     value: eventNameInput,
+    maxLength: 20,
     onChange: function onChange(e) {
       return setEventNameInput(e.currentTarget.value);
     }

package/es/utils/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * 虚拟事件编辑 判断内容是否有改动；有改动返回true
+ */
+export declare const getVirtualContentChange: (oldData: any, newData: any) => boolean;
 /**
  * 虚拟事件属性超过100个，选择属性后的回调，处理提交数据
  */
@@ -22,10 +26,6 @@ export declare const eventMoveData: (groupId: number, groupingData: any, setGrou
  * 指标分组管理：显示或隐藏
  */
 export declare const eventShowOrHiddenData: (type: number, groupId: number, groupingData: any, setGroupingData: Function) => any;
-/**
- * 指标分组管理：删除分组
- */
-export declare const groupDeleteData: (groupId: number, groupingData: any, setGroupingData: Function) => void;
 /**
  * 指标分组管理：分组展开与关闭
  */
@@ -34,6 +34,10 @@ export declare const openChangeData: (groupId: number, groupingData: any) => any
  * 指标分组管理：事件全选处理
  */
 export declare const eventCheckedAll: (groupId: number, groupingData: any) => any;
+/**
+ * 指标分组管理：搜索事件名称或别名，判断是否展示
+ */
+export declare const eventShow: (data: any, searchData: string) => any;
 /**
  * 指标分组管理：单个事件选中处理
  */
@@ -47,6 +51,7 @@ export declare const groupListSort: (result: any, groupingData: any, setGrouping
  */
 export declare const eventListHandle: (data: any) => void;
 export declare const getAppID: (currentApp: any) => any;
+export declare const nullToEmptyString: (data: any) => any;
 /**
  * 获取第一个表格的可视化高度
  * @param {*} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为74)