@zgfe/modules-dm 1.0.1

package/es/modules/dataPlan/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './styles/index.less';
+declare const PlanList: React.FC;
+export default PlanList;

package/es/modules/dataPlan/index.js

@@ -0,0 +1,233 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { BizGlobalDataContext, IconFont } from '@zgfe/business-lib';
+import { Switch, Button, DatePicker, Table, Modal, message } from 'antd';
+var RangePicker = DatePicker.RangePicker;
+import React, { useEffect, useState, useContext } from 'react';
+import './styles/index.less';
+import request from '../../utils/ajax';
+import apis from '../../constants/api';
+import AddPlan from './addPlan';
+
+var PlanList = function PlanList(props) {
+  var classPrefix = 'plan-list';
+
+  var _useContext = useContext(BizGlobalDataContext),
+      currentApp = _useContext.currentApp,
+      isDemo = _useContext.isDemo; // 查看方案
+
+
+  var tableSee = function tableSee(data) {
+    setDetailId(data.id);
+    setDetailName(data.planName);
+    setDrawerShow(true);
+  }; // 删除方案
+
+
+  var tableDel = function tableDel(data) {
+    Modal.confirm({
+      centered: true,
+      title: '是否确认删除方案？',
+      okText: '确认',
+      cancelText: '取消',
+      maskClosable: false,
+      onOk: function onOk() {
+        request(apis.deletePlan, {
+          method: 'post',
+          data: {
+            appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+            planName: data
+          }
+        }).then(function (res) {
+          message.success('删除成功');
+          queryList();
+        }).catch(function (err) {
+          message.success('删除失败');
+        }).finally(function () {});
+      }
+    });
+  }; // 时间戳转换
+
+
+  var getDateTime = function getDateTime(date) {
+    var zero = function zero(e) {
+      return e < 10 ? '0' + e : e;
+    };
+
+    var now = new Date(parseInt(date)),
+        Y = now.getFullYear(),
+        M = now.getMonth() + 1,
+        D = now.getDate(),
+        h = now.getHours(),
+        m = now.getMinutes(),
+        s = now.getSeconds();
+    return "".concat(Y, "-").concat(zero(M), "-").concat(zero(D), " ").concat(zero(h), ":").concat(zero(m), ":").concat(zero(s));
+  }; // 表格列
+
+
+  var columns = [{
+    title: '方案名称',
+    dataIndex: 'planName',
+    key: 'planName'
+  }, {
+    title: '创建时间',
+    dataIndex: 'createOn',
+    key: 'createOn',
+    render: function render(_text, _record) {
+      return /*#__PURE__*/React.createElement("div", null, getDateTime(_text));
+    }
+  }, {
+    title: '创建人',
+    dataIndex: 'createUser',
+    key: 'createUser'
+  }, {
+    title: '操作',
+    dataIndex: 'set',
+    render: function render(_text, _record) {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(classPrefix, "-table-see"),
+        onClick: function onClick() {
+          return tableSee(_record);
+        }
+      }, "\u67E5\u770B"), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(classPrefix, "-table-del"),
+        onClick: function onClick() {
+          return tableDel(_record.planName);
+        }
+      }, "\u5220\u9664"));
+    }
+  }]; // 方案列表
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      listData = _useState2[0],
+      setListData = _useState2[1];
+
+  var queryList = function queryList() {
+    request(apis.getAllPlan, {
+      method: 'get',
+      params: {
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+      }
+    }).then(function (res) {
+      if (!res) throw new Error();
+      setListData(res.data.planList);
+    }).catch(function (err) {
+      console.error('查询列表失败', err);
+    }).finally(function () {});
+  };
+
+  useEffect(function () {
+    queryList();
+  }, []);
+
+  var _useState3 = useState(-1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      detailId = _useState4[0],
+      setDetailId = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      detailName = _useState6[0],
+      setDetailName = _useState6[1]; // 抽屉显示与隐藏
+
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      drawerShow = _useState8[0],
+      setDrawerShow = _useState8[1]; // 埋点方案控制开关
+
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isOpen = _useState10[0],
+      setIsOpen = _useState10[1]; // 获取埋点方案开关状态
+
+
+  var queryControlSwitch = function queryControlSwitch() {
+    request(apis.queryControlSwitch, {
+      method: 'get',
+      params: {
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+      }
+    }).then(function (res) {
+      var _res$data;
+
+      setIsOpen((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.isOpen) == '0' ? false : true);
+    });
+  }; // 初始化数据
+
+
+  useEffect(function () {
+    queryControlSwitch();
+  }, []); // 埋点方案开关状态变更
+
+  var isOpenChang = function isOpenChang(data) {
+    request(apis.updateControlSwitch, {
+      method: 'post',
+      data: {
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        isOpen: !isOpen ? '1' : '0'
+      }
+    }).then(function (res) {
+      setIsOpen(!isOpen);
+      message.success("\u65B9\u6848\u63A7\u5236\u5DF2".concat(!isOpen ? '开始' : '关闭'));
+    });
+  };
+
+  var drawerClose = function drawerClose(type) {
+    type == 'save' ? queryList() : null;
+    setDrawerShow(false);
+    setDetailId(-1);
+    setDetailName('');
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, !drawerShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-switchbox clearfix")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "switch"
+  }, /*#__PURE__*/React.createElement("span", null, "\u57CB\u70B9\u65B9\u6848\u63A7\u5236"), /*#__PURE__*/React.createElement(Switch, {
+    onChange: isOpenChang,
+    checkedChildren: "\u5F00",
+    unCheckedChildren: "\u5173",
+    checked: isOpen
+  })), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      setDrawerShow(true);
+    },
+    type: "primary",
+    className: "add"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "tianjia",
+    style: {
+      marginRight: '5px',
+      verticalAlign: '-2px'
+    }
+  }), "\u65B0\u589E\u57CB\u70B9\u65B9\u6848")), /*#__PURE__*/React.createElement(Table, {
+    className: "".concat(classPrefix, "-table"),
+    columns: columns,
+    rowKey: 'id',
+    dataSource: listData,
+    // onChange={onChange}
+    pagination: false
+  })), /*#__PURE__*/React.createElement(AddPlan, {
+    detailName: detailName,
+    drawerShow: drawerShow,
+    drawerClose: drawerClose,
+    detailId: detailId
+  }));
+};
+
+export default PlanList;

package/es/modules/dataPlan/search.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './styles/index.less';
+interface PropsType {
+    type: 'event' | 'user';
+    total: number;
+    searchData: string;
+    setSearchData: Function;
+    setVisible: Function;
+}
+declare const Search: React.FC<PropsType>;
+export default Search;

package/es/modules/dataPlan/search.js

@@ -0,0 +1,42 @@
+import { IconFont } from '@zgfe/business-lib';
+import { Input, Button, Select } from 'antd';
+var Option = Select.Option;
+import React from 'react';
+import './styles/index.less';
+
+var Search = function Search(props) {
+  var classPrefix = 'search-box';
+
+  var searchChange = function searchChange(e) {
+    props.setSearchData(e.currentTarget.value);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement(Input, {
+    className: "".concat(classPrefix, "-input"),
+    value: props.searchData,
+    onChange: searchChange,
+    placeholder: props.type == 'event' ? '搜索事件名称' : '搜索属性名称',
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: "sousuo"
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-text")
+  }, "\u5171", /*#__PURE__*/React.createElement("span", null, props.total), "\u6761 / \u4E0A\u9650500\u6761"), /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "tianjia",
+      style: {
+        marginRight: '5px',
+        verticalAlign: '-2px'
+      }
+    }),
+    type: "primary",
+    className: "".concat(classPrefix, "-add-button"),
+    onClick: function onClick() {
+      props.setVisible(true);
+    }
+  }, "\u624B\u52A8\u6DFB\u52A0", props.type == 'event' ? '事件' : '用户属性'));
+};
+
+export default Search;

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

@@ -0,0 +1,269 @@
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+.plan-list {
+  position: relative;
+  width: calc(100% - 264px);
+  height: 100%;
+  margin-top: 16px;
+  padding: 24px;
+  background: #fff;
+  .clearfix:after {
+    display: block;
+    clear: both;
+    height: 0;
+    content: '';
+  }
+  &-form {
+    position: relative;
+    margin-top: 5px;
+    .ant-form-item {
+      width: 35%;
+      margin-right: 80px;
+    }
+    .ant-form-item-label {
+      color: @text-color-secondary;
+    }
+    .ant-form-item-label {
+      text-align: left;
+    }
+  }
+  &-submit {
+    position: absolute;
+    top: 0;
+    right: 90px;
+  }
+  &-reset {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  &-switchbox {
+    // margin-top: 26px;
+    // padding-top: 26px;
+    // border-top: 1px solid #e8efff;
+    .switch {
+      float: left;
+      span {
+        margin-right: 20px;
+      }
+    }
+    .add {
+      float: right;
+    }
+  }
+  &-table-see {
+    margin-right: 20px;
+    color: #165dff;
+    cursor: pointer;
+    user-select: none;
+  }
+  &-table-del {
+    color: #165dff;
+    cursor: pointer;
+    user-select: none;
+  }
+  &-table {
+    height: 550px;
+    margin-top: 20px;
+    overflow-y: scroll;
+  }
+  &-pagination {
+    position: absolute;
+    right: 20px;
+    bottom: -50px;
+  }
+}
+
+.add-plan {
+  position: relative;
+  height: 100%;
+  .point-active,
+  .point-active-null {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-right: 5px;
+    vertical-align: 2px;
+    border-radius: 50%;
+  }
+  .point-active {
+    background: @primary-color;
+  }
+  .point-active-null {
+    background: #fb5547;
+  }
+  &-top {
+    position: relative;
+    display: flex;
+    margin-bottom: 30px;
+    .input-waring {
+      position: absolute;
+      bottom: -30px;
+      left: 0;
+      color: red;
+    }
+    > :nth-child(1) {
+      line-height: 30px;
+    }
+    .plan-name-div {
+      display: flex;
+      height: 32px;
+      color: #242541;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 32px;
+      .bsicon {
+        margin-right: 40px;
+        margin-left: 10px;
+        color: @primary-color;
+      }
+    }
+    .plan-name {
+      width: 200px;
+      margin-right: 20px;
+      // margin: 0 50px;
+    }
+    .cancel {
+      margin-right: 20px;
+    }
+    .back {
+      cursor: pointer;
+    }
+  }
+  &-tabs {
+    position: relative;
+    display: flex;
+    margin-bottom: 15px;
+    > :nth-child(1) {
+      border-radius: 4px 0 0 4px !important;
+    }
+    > :nth-child(2) {
+      border-radius: 0 4px 4px 0 !important;
+    }
+    .handle-box {
+      position: absolute;
+      top: 14px;
+      right: 20px;
+      .bsicon {
+        margin-right: 10px;
+      }
+      .ant-btn {
+        margin-left: 20px;
+      }
+      .export-data {
+        margin-left: 20px;
+        .ant-select-selection-placeholder {
+          color: #000;
+        }
+      }
+    }
+  }
+  &-table-header {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    background: #fff;
+    li {
+      width: 25%;
+      padding: 16px;
+      border: 1px solid #e8efff;
+    }
+  }
+  .user-list,
+  .event-list {
+    position: relative;
+    &-pagination {
+      position: absolute;
+      right: 20px;
+      bottom: -50px;
+    }
+  }
+  .event-list {
+    ant-table-thead > tr > th,
+    .ant-table-tbody > tr > td,
+    .ant-table tfoot > tr > th,
+    .ant-table tfoot > tr > td {
+      height: 48px;
+      padding: 0 !important;
+      // margin-left: 16px!important;
+    }
+    .table-multiline {
+      line-height: 48px;
+      :nth-child(1) {
+        border-top: none;
+      }
+      > div {
+        padding-left: 16px;
+        border-top: 1px solid rgb(236, 237, 240);
+      }
+    }
+    .table-single {
+      // height: 100%;
+      // line-height: 100%;
+      padding-left: 16px;
+    }
+  }
+  .table-plus {
+    &-table {
+      margin-top: -2px;
+      .ant-table-thead {
+        display: none;
+      }
+    }
+    // &-table-header {
+    //   display: flex;
+    //   margin: 0;
+    //   padding: 0;
+    //   list-style-type: none;
+    //   background: #fff;
+    //   li {
+    //     width: 25%;
+    //     padding: 16px;
+    //     border: 1px solid #e8efff;
+    //   }
+    // }
+    .ant-table-title {
+      text-align: center;
+      .set-button {
+        margin-left: 20px;
+        color: @primary-color;
+        user-select: none;
+      }
+    }
+    .ant-table-selection-column {
+      border: 1px solid red;
+    }
+  }
+  .add-event {
+    .ant-form-item {
+      margin: 0;
+    }
+    &-add-button {
+      margin-top: 10px;
+      .bsicon {
+        margin-right: 5px;
+        line-height: 22px;
+      }
+    }
+  }
+  .search-box {
+    position: relative;
+    display: flex;
+    margin-bottom: 16px;
+    line-height: 32px;
+    &-input {
+      width: 264px;
+      height: 32px;
+      margin-right: 12px;
+    }
+    &-text {
+      span {
+        color: @primary-color;
+      }
+    }
+    &-add-button {
+      position: absolute;
+      right: 20px;
+    }
+  }
+}

package/es/modules/dataPlan/tablePlus.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import './styles/index.less';
+interface DataType {
+    key: React.Key;
+    eventName: string;
+    eventActive: string;
+    attributeName: string[];
+    attributeActive: string[];
+    open: Boolean;
+    sheetName?: string;
+}
+interface TablePlusType {
+    eventListData: {
+        [x: string]: DataType[];
+    };
+    tableClick: Function;
+    selectedRowKeys: React.Key[];
+    tableCheck: Function;
+    eventListDataIndex: number;
+}
+declare const TablePlus: React.FC<TablePlusType>;
+export default TablePlus;

package/es/modules/dataPlan/tablePlus.js

@@ -0,0 +1,106 @@
+import { Table, Select, Checkbox } from 'antd';
+var Option = Select.Option;
+import React from 'react';
+import './styles/index.less';
+
+var TablePlus = function TablePlus(props) {
+  var classPrefix = 'table-plus';
+  var eventListData = props.eventListData,
+      tableClick = props.tableClick; // console.log('TablePlus', eventListData);
+  // 表格列
+
+  var columns = [{
+    title: '事件名称',
+    dataIndex: 'eventName',
+    width: '25%',
+    render: function render(text, record, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "table-single"
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        style: {
+          marginRight: '10px'
+        },
+        checked: props.selectedRowKeys.indexOf(record.key) != -1,
+        onChange: function onChange(e) {
+          props.tableCheck(e, record);
+        }
+      }), text);
+    }
+  }, {
+    title: '采集状态',
+    dataIndex: 'eventActive',
+    width: '25%',
+    render: function render(text, record, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "table-single"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: text == '有数据' ? 'point-active' : 'point-active-null'
+      }), text);
+    }
+  }, {
+    title: '事件属性',
+    dataIndex: 'attributeName',
+    width: '25%',
+    render: function render(text, record, index) {
+      var data = record.open ? record.attributeName : [record.attributeName[0]];
+      var height = data.length * 48 + 'px';
+      return /*#__PURE__*/React.createElement("div", {
+        className: data.length > 1 ? 'table-multiline' : 'table-single',
+        style: {
+          height: data.length > 1 ? height : '15px'
+        }
+      }, data.map(function (item, _index) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: _index
+        }, item);
+      }));
+    }
+  }, {
+    title: '采集状态',
+    dataIndex: 'attributeActive',
+    width: '25%',
+    render: function render(text, record, index) {
+      var data = record.open ? record.attributeActive : [record.attributeActive[0]];
+      var height = data.length * 48 + 'px';
+      return /*#__PURE__*/React.createElement("div", {
+        className: data.length > 1 ? 'table-multiline' : 'table-single',
+        style: {
+          height: data.length > 1 ? height : '15px'
+        }
+      }, data.map(function (item, _index) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: _index
+        }, /*#__PURE__*/React.createElement("i", {
+          className: item == '有数据' ? 'point-active' : 'point-active-null'
+        }), item);
+      }));
+    }
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, Object.keys(eventListData).map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Table, {
+      key: index,
+      className: "".concat(classPrefix, "-table"),
+      columns: columns,
+      dataSource: eventListData[item],
+      bordered: true,
+      title: function title() {
+        var _eventListData$item$;
+
+        return /*#__PURE__*/React.createElement("div", null, item, /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick() {
+            tableClick(item, props.eventListDataIndex);
+          }
+        }, ((_eventListData$item$ = eventListData[item][0]) === null || _eventListData$item$ === void 0 ? void 0 : _eventListData$item$.open) ? /*#__PURE__*/React.createElement("span", {
+          className: "set-button"
+        }, "\u6536\u8D77") : /*#__PURE__*/React.createElement("span", {
+          className: "set-button"
+        }, "\u5C55\u5F00")));
+      },
+      pagination: false
+    });
+  }));
+};
+
+export default TablePlus;