@vtx/modals2 5.0.2 → 5.0.4

package/lib/vtx-cp-modal/components/AlarmInfo/index.js

@@ -0,0 +1,41 @@
+/**
+ * 收集点-报警信息
+ */
+import { Col, Row } from 'antd';
+import AlarmRecord from "./AlarmRecord";
+import MonthTrend from "./MonthTrend";
+import Summary from "./Summary";
+import "./index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var AlarmInfo = function AlarmInfo(props) {
+  var id = props.id;
+  return /*#__PURE__*/_jsx("div", {
+    className: "cp-alarm",
+    children: /*#__PURE__*/_jsxs(Row, {
+      gutter: [10, 10],
+      children: [/*#__PURE__*/_jsx(Col, {
+        xxl: 10,
+        xl: 11,
+        lg: 12,
+        md: 24,
+        children: /*#__PURE__*/_jsx(Summary, {
+          id: id
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        xxl: 14,
+        xl: 13,
+        lg: 12,
+        md: 24,
+        children: /*#__PURE__*/_jsx(MonthTrend, {
+          id: id
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 24,
+        children: /*#__PURE__*/_jsx(AlarmRecord, {
+          id: id
+        })
+      })]
+    })
+  });
+};
+export default AlarmInfo;

package/lib/vtx-cp-modal/components/AlarmInfo/index.less

@@ -0,0 +1,34 @@
+.cp-alarm {
+  width: 100%;
+
+  .alarm-summary {
+    &-chart {
+      position: relative;
+      height: 224px;
+      padding-top: 24px;
+    }
+    &-compare {
+      margin: 0 48px;
+      position: absolute;
+      left: 32px;
+      top: 216px;
+      color: var(--modal-title-color);
+    }
+  }
+
+  .alarm-trend {
+    height: 360px;
+  }
+
+  .alarm-record {
+    &-table {
+      height: 240px;
+    }
+
+    .alarmLevel {
+      img {
+        margin-top: -2px;
+      }
+    }
+  }
+}

package/lib/vtx-cp-modal/components/BaseInfo/CarWork.js

@@ -0,0 +1,116 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 收集点-总览信息-车辆作业信息
+ */
+import { VmTable } from "../../../_components";
+import track from "../../imgs/track.png";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CarWork(props) {
+  var _paramConfigsList$SHO, _paramConfigsList$SHO2, _paramConfigsList$SHO3;
+  var dataSource = props.dataSource,
+    paramConfigsList = props.paramConfigsList,
+    isDark = props.isDark;
+  var columns = [{
+    title: '车牌号',
+    dataIndex: 'carCode',
+    key: 'carCode',
+    ellipsis: true,
+    width: '15%'
+  }, {
+    title: '收运单位',
+    key: 'collectUnitName',
+    dataIndex: 'collectUnitName',
+    ellipsis: true,
+    width: '16%'
+  }, {
+    title: '垃圾类型',
+    dataIndex: 'productTypeName',
+    key: 'productTypeName',
+    width: '12%',
+    ellipsis: true
+  }, {
+    title: '收集频次(次)',
+    dataIndex: 'collectNum',
+    key: 'collectNum',
+    width: '14%',
+    ellipsis: true,
+    align: 'right'
+  }, {
+    title: '轨迹',
+    dataIndex: 'carId',
+    key: 'carId',
+    width: '8%',
+    //   fixed: 'right',
+    render: function render(text) {
+      return /*#__PURE__*/_jsx("a", {
+        onClick: function onClick() {
+          window.open("".concat(location.protocol, "//").concat(location.host, "/carHistory/#/").concat(isDark ? 'index' : 'indexLight', "?carId=").concat(text, "&").concat(location.href.split('?')[1]));
+        },
+        children: /*#__PURE__*/_jsx("img", {
+          src: track
+        })
+      });
+    }
+  }];
+  var bucketIdx = 3,
+    weightIdx = 3;
+  if (((_paramConfigsList$SHO = paramConfigsList['SHOW_TENDER']) === null || _paramConfigsList$SHO === void 0 ? void 0 : _paramConfigsList$SHO.value) === 'true') {
+    columns.splice(3, 0, {
+      title: '标段',
+      key: 'bidSectionName',
+      dataIndex: 'bidSectionName',
+      width: '10%',
+      ellipsis: true
+    });
+    bucketIdx = 4;
+    weightIdx = 4;
+  }
+  if (((_paramConfigsList$SHO2 = paramConfigsList['SHOW_COLLECTING_BUCKETS']) === null || _paramConfigsList$SHO2 === void 0 ? void 0 : _paramConfigsList$SHO2.value) === 'true') {
+    columns.splice(bucketIdx, 0, {
+      title: '桶数(桶)',
+      dataIndex: 'bucketNum',
+      key: 'bucketNum',
+      width: '12%',
+      ellipsis: true,
+      align: 'right'
+    });
+    weightIdx = bucketIdx + 1;
+  }
+  if (((_paramConfigsList$SHO3 = paramConfigsList['SHOW_WEIGHTING']) === null || _paramConfigsList$SHO3 === void 0 ? void 0 : _paramConfigsList$SHO3.value) === 'true') {
+    columns.splice(weightIdx, 0, {
+      title: '收集重量(kg)',
+      dataIndex: 'weight',
+      key: 'weight',
+      width: '15%',
+      ellipsis: true,
+      align: 'right'
+    });
+  }
+  var tableProps = {
+    scroll: {
+      y: 194,
+      x: '100%'
+    },
+    pagination: {
+      current: 1,
+      pageSize: 10
+    },
+    indexWidth: '8%',
+    dataSource: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? dataSource.map(function (ele, index) {
+      var _ele$bidSectionName;
+      return _objectSpread(_objectSpread({}, ele), {}, {
+        bidSectionName: (_ele$bidSectionName = ele.bidSectionName) !== null && _ele$bidSectionName !== void 0 ? _ele$bidSectionName : '-',
+        index: index
+      });
+    }) : []
+  };
+  return /*#__PURE__*/_jsx(VmTable, _objectSpread({
+    columns: columns,
+    rowKey: "index"
+  }, tableProps));
+}

package/lib/vtx-cp-modal/components/BaseInfo/Rules.js

@@ -0,0 +1,72 @@
+/**
+ * 收集点-总览信息-收运规则
+ */
+import { VmEmpty } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import { BaseService } from "../../api";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Rules(props) {
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  var id = props.id,
+    paramConfigsList = props.paramConfigsList;
+  var rules = BaseService.useGetRule(id);
+  var getImgCode = function getImgCode(name) {
+    var code = 'default';
+    if (name.indexOf('厨余') > -1) {
+      code = 'cy';
+    } else if (name.indexOf('可回收') > -1) {
+      code = 'khs';
+    } else if (name.indexOf('有害') > -1) {
+      code = 'yh';
+    } else if (name.indexOf('其他') > -1) {
+      code = 'qt';
+    }
+    return code;
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "cp-rules-wrapper ".concat(isDark ? 'dark' : ''),
+    children: Array.isArray(rules) ? rules.map(function (ele, index) {
+      var _paramConfigsList$SHO, _ele$rules;
+      var typeCode = getImgCode((ele === null || ele === void 0 ? void 0 : ele.productTypeName) || '');
+      var code = typeCode === 'default' ? 'khs' : typeCode;
+      return /*#__PURE__*/_jsxs("div", {
+        className: "cp-rules-item ".concat(code),
+        children: [(ele === null || ele === void 0 ? void 0 : ele.ruleTypeName) && /*#__PURE__*/_jsx("div", {
+          className: "cp-rules-item-type ".concat(code),
+          children: ele.ruleTypeName
+        }), /*#__PURE__*/_jsx("div", {
+          className: "cp-rules-item--icon",
+          children: /*#__PURE__*/_jsx("img", {
+            src: require("../../imgs/".concat(code, ".png"))
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "cp-rules-item--row",
+            children: [(ele === null || ele === void 0 ? void 0 : ele.productTypeName) || '--', ' ', ((_paramConfigsList$SHO = paramConfigsList['SHOW_COLLECTING_BUCKETS']) === null || _paramConfigsList$SHO === void 0 ? void 0 : _paramConfigsList$SHO.value) === 'true' && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [(ele === null || ele === void 0 ? void 0 : ele.bucketNum) || 0, "\u4E2A\u6876"]
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: "cp-rules-item--row2",
+            children: ele === null || ele === void 0 || (_ele$rules = ele.rules) === null || _ele$rules === void 0 ? void 0 : _ele$rules.map(function (rule) {
+              return /*#__PURE__*/_jsxs("div", {
+                children: [rule.ruleContent, rule.carCode ? " (".concat(rule.carCode, ")") : '']
+              }, rule.ruleId);
+            })
+          }), (ele === null || ele === void 0 ? void 0 : ele.accUnitName) && /*#__PURE__*/_jsxs("div", {
+            className: "cp-rules-item--row",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "cp-rules-item--row-label",
+              children: "\u6536\u8FD0\u5355\u4F4D\uFF1A"
+            }), /*#__PURE__*/_jsx("div", {
+              className: "cp-rules-item--row-value",
+              children: ele === null || ele === void 0 ? void 0 : ele.accUnitName
+            })]
+          })]
+        })]
+      }, index);
+    }) : /*#__PURE__*/_jsx(VmEmpty, {
+      type: "NO_DATA"
+    })
+  });
+}

package/lib/vtx-cp-modal/components/BaseInfo/TodayWork.js

@@ -0,0 +1,154 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 收集点-总览信息-收运规则
+ */
+import { getVtxToken } from '@vtx/utils';
+import Progress from 'antd/es/progress';
+import { VmEmpty, VmFactor } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import "./index.less";
+import allRate from "../../imgs/allRate.png";
+import allRateDark from "../../imgs/allRate_dark.png";
+import bucket from "../../imgs/bucket.png";
+import bucketDark from "../../imgs/bucket_dark.png";
+import collect from "../../imgs/collect.png";
+import collectDark from "../../imgs/collect_dark.png";
+import plan from "../../imgs/plan.png";
+import planDark from "../../imgs/plan_dark.png";
+import weight from "../../imgs/weight.png";
+import weightDark from "../../imgs/weight_dark.png";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function TodayWork(props) {
+  var data = props.data,
+    paramConfigsList = props.paramConfigsList,
+    productTypes = props.productTypes;
+  var _useSettings = useSettings(),
+    theme = _useSettings.theme,
+    isDark = _useSettings.isDark;
+  var getIcon = function getIcon(id) {
+    var _productTypes$id;
+    var src = '';
+    if (productTypes !== null && productTypes !== void 0 && (_productTypes$id = productTypes[id]) !== null && _productTypes$id !== void 0 && _productTypes$id.icon) {
+      var icon = JSON.parse(productTypes[id].icon)[0];
+      src = "/cloudFile/common/downloadFile?id=".concat(icon.id, "&token=").concat(getVtxToken('token'));
+    }
+    return src;
+  };
+  var img = {
+    dark: {
+      全部: allRateDark
+    },
+    light: {
+      全部: allRate
+    },
+    blue: {
+      全部: allRate
+    }
+  };
+  var getValue = function getValue(name, id) {
+    var strokeColor = '#1890FF';
+    var src = name === '全部' ? isDark ? allRateDark : allRate : getIcon(id);
+    if (isDark) {
+      if (name.indexOf('全部') > -1) {
+        strokeColor = '#139DFF';
+      } else if (name.indexOf('厨余') > -1) {
+        strokeColor = '#13F97A';
+      } else if (name.indexOf('可回收') > -1) {
+        strokeColor = '#1890FF';
+      } else if (name.indexOf('有害') > -1) {
+        strokeColor = '#FF5861';
+      } else if (name.indexOf('易腐') > -1) {
+        strokeColor = '#1CE548';
+      }
+    } else {
+      if (name.indexOf('全部') > -1) {
+        strokeColor = '#1677FF';
+      } else if (name.indexOf('厨余') > -1) {
+        strokeColor = '#0FB964';
+      } else if (name.indexOf('可回收') > -1) {
+        strokeColor = '#1890FF';
+      } else if (name.indexOf('有害') > -1) {
+        strokeColor = '#F5222D';
+      } else if (name.indexOf('易腐') > -1) {
+        strokeColor = '#0FB964';
+      }
+    }
+    return {
+      strokeColor: strokeColor,
+      src: src
+    };
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: Array.isArray(data) ? data.map(function (item, index) {
+      var _paramConfigsList$SHO, _paramConfigsList$SHO2;
+      var _getValue = getValue(item === null || item === void 0 ? void 0 : item.productTypeName, item === null || item === void 0 ? void 0 : item.productTypeId),
+        strokeColor = _getValue.strokeColor,
+        src = _getValue.src;
+      return /*#__PURE__*/_jsxs("div", {
+        className: "twork--item",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "twork--item-img",
+          children: /*#__PURE__*/_jsx("img", {
+            src: src
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "twork--item-progress",
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "twork--item-progress-row",
+            children: ["".concat(item === null || item === void 0 ? void 0 : item.productTypeName, "\u5B8C\u6210\u7387\uFF1A"), "".concat(item.rate || 0, "%")]
+          }), /*#__PURE__*/_jsx(Progress, {
+            strokeLinecap: "butt",
+            percent: item.rate,
+            strokeColor: strokeColor,
+            trailColor: isDark ? 'rgba(255,255,255,0.05)' : '#D2D2D2',
+            strokeWidth: 6,
+            showInfo: false
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "twork--item-block",
+          children: [{
+            name: '应收次数',
+            unit: '次',
+            value: item === null || item === void 0 ? void 0 : item.planCollectNums,
+            img: isDark ? planDark : plan,
+            fontType: 'blue'
+          }, {
+            name: '实收次数',
+            unit: '次',
+            value: item === null || item === void 0 ? void 0 : item.collectNums,
+            img: isDark ? collectDark : collect,
+            fontType: 'green'
+          }, ((_paramConfigsList$SHO = paramConfigsList['SHOW_COLLECTING_BUCKETS']) === null || _paramConfigsList$SHO === void 0 ? void 0 : _paramConfigsList$SHO.value) === 'true' && {
+            name: '收集桶数',
+            unit: '桶',
+            value: item === null || item === void 0 ? void 0 : item.bucketNum,
+            img: isDark ? bucketDark : bucket,
+            fontType: 'cyan'
+          }, ((_paramConfigsList$SHO2 = paramConfigsList['SHOW_WEIGHTING']) === null || _paramConfigsList$SHO2 === void 0 ? void 0 : _paramConfigsList$SHO2.value) === 'true' && {
+            name: '收集重量',
+            unit: 'kg',
+            value: item === null || item === void 0 ? void 0 : item.weight,
+            img: isDark ? weightDark : weight,
+            fontType: 'cyan'
+          }].filter(function (ele) {
+            return !!ele;
+          }).map(function (ele, index) {
+            return /*#__PURE__*/_jsx(VmFactor, _objectSpread(_objectSpread({}, ele), {}, {
+              type: "sm",
+              unitStyle: {
+                fontSize: 14
+              }
+            }), index);
+          })
+        })]
+      }, index);
+    }) : /*#__PURE__*/_jsx(VmEmpty, {
+      type: "NO_DATA"
+    })
+  });
+}

package/lib/vtx-cp-modal/components/BaseInfo/index.js

@@ -0,0 +1,96 @@
+import { Col, Row } from 'antd';
+import moment from 'moment';
+import { VmInfoCollection, VmTitle, VmWrapper } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import { BaseService } from "../../api";
+import CarWork from "./CarWork";
+import "./index.less";
+import Rules from "./Rules";
+import TodayWork from "./TodayWork";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BaseInfo = function BaseInfo(props) {
+  var id = props.id,
+    baseInfo = props.baseInfo,
+    info = props.info;
+  var _useSettings = useSettings(),
+    theme = _useSettings.theme,
+    isDark = _useSettings.isDark;
+  var nowDate = moment().format('YYYY-MM-DD');
+  var _BaseService$useBaseI = BaseService.useBaseInfo(id, nowDate, nowDate),
+    todayWorkRes = _BaseService$useBaseI.todayWorkRes,
+    dataSource = _BaseService$useBaseI.dataSource;
+  var _BaseService$useConfi = BaseService.useConfig(),
+    paramConfigsList = _BaseService$useConfi.paramConfigsList,
+    productTypes = _BaseService$useConfi.productTypes;
+  var mapStyle = {
+    type: 'Marker',
+    style: {
+      icon: 'CP',
+      color: '#52C41A'
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "cp-wrapper",
+    children: /*#__PURE__*/_jsxs(Row, {
+      gutter: 16,
+      style: {
+        height: '100%'
+      },
+      children: [/*#__PURE__*/_jsx(Col, {
+        span: 8,
+        style: {
+          height: '100%'
+        },
+        children: /*#__PURE__*/_jsxs(VmWrapper, {
+          title: "\u57FA\u672C\u4FE1\u606F",
+          children: [/*#__PURE__*/_jsx(VmInfoCollection, {
+            data: baseInfo,
+            horizontal: true,
+            gap: 16
+          }), /*#__PURE__*/_jsx(VmTitle, {
+            title: "\u6536\u8FD0\u89C4\u5219"
+          }), /*#__PURE__*/_jsx(Rules, {
+            id: id,
+            paramConfigsList: paramConfigsList
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Col, {
+        span: 16,
+        children: /*#__PURE__*/_jsxs(Row, {
+          gutter: [10, 10],
+          children: [/*#__PURE__*/_jsx(Col, {
+            span: 24,
+            children: /*#__PURE__*/_jsx("div", {
+              className: "cp-wrapper-twork",
+              children: /*#__PURE__*/_jsx(VmWrapper, {
+                title: "\u4ECA\u65E5\u4F5C\u4E1A\u6C47\u603B",
+                children: /*#__PURE__*/_jsx(TodayWork, {
+                  data: todayWorkRes,
+                  paramConfigsList: paramConfigsList,
+                  productTypes: productTypes
+                })
+              })
+            })
+          }), /*#__PURE__*/_jsx(Col, {
+            span: 24,
+            children: /*#__PURE__*/_jsx("div", {
+              className: "cp-wrapper-table",
+              children: /*#__PURE__*/_jsxs(VmWrapper, {
+                title: "\u4ECA\u65E5\u4F5C\u4E1A\u660E\u7EC6",
+                contentStyle: {
+                  overflowY: 'hidden'
+                },
+                children: [/*#__PURE__*/_jsx(CarWork, {
+                  dataSource: dataSource,
+                  isDark: isDark,
+                  paramConfigsList: paramConfigsList
+                }), ' ']
+              })
+            })
+          })]
+        })
+      })]
+    })
+  });
+};
+export default BaseInfo;

package/lib/vtx-cp-modal/components/BaseInfo/index.less

@@ -0,0 +1,140 @@
+.flex-start {
+  display: flex;
+  justify-content: start;
+  align-items: start;
+}
+
+.cp-wrapper {
+  height: 100%;
+  &-twork {
+    height: 224px;
+    overflow-y: auto;
+    .twork {
+      &--item {
+        .flex-start();
+        color: var(--info-color);
+        margin-bottom: 16px;
+        gap: 16px;
+        &-img {
+          img {
+            width: 44px;
+            height: 44px;
+          }
+        }
+        &-progress-row {
+          .flex-start();
+          justify-content: space-between;
+        }
+        &-progress {
+          width: 163px;
+          font-size: 14px;
+          line-height: 22px;
+        }
+        &-block {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+      }
+    }
+  }
+
+  .cp-rules-wrapper {
+    width: 100%;
+    margin-top: 12px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    --color: #5e6169;
+    --label-color: #8c8c8c;
+    --cy-bg: rgba(28, 229, 72, 0.08);
+    --qt-bg: rgba(119, 119, 119, 0.08);
+    --yh-bg: rgba(245, 34, 45, 0.08);
+    --khs-bg: rgba(22, 119, 255, 0.08);
+
+    &.dark {
+      --color: #fff;
+      --label-color: #b1b1b1;
+      --cy-bg: rgba(28, 229, 72, 0.12);
+      --qt-bg: rgba(147, 147, 147, 0.12);
+      --yh-bg: rgba(255, 98, 106, 0.12);
+      --khs-bg: rgba(33, 158, 229, 0.12);
+    }
+  }
+  .cp-rules-item {
+    width: 100%;
+    border-radius: 4px;
+    padding: 14px 16px;
+    color: var(--modal-title-color);
+    font-size: 14px;
+    display: flex;
+    justify-content: start;
+    align-items: start;
+    gap: 12px;
+    position: relative;
+    &.cy {
+      background: var(--cy-bg);
+    }
+    &.yh {
+      background: var(--yh-bg);
+    }
+    &.qt {
+      background: var(--qt-bg);
+    }
+    &.khs {
+      background: var(--khs-bg);
+    }
+    &--icon {
+      width: 42px;
+      height: 52px;
+    }
+    .type {
+      width: 76px;
+      height: 28px;
+      line-height: 20px;
+      padding-left: 20px;
+      font-size: 12px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      color: #fff;
+    }
+    &-type {
+      .type;
+      &.cy {
+        background: url('../../imgs/corner_cy.png') 100% 100% no-repeat;
+      }
+      &.yh {
+        background: url('../../imgs/corner_yh.png') 100% 100% no-repeat;
+      }
+      &.qt {
+        background: url('../../imgs/corner_qt.png') 100% 100% no-repeat;
+      }
+      &.khs {
+        background: url('../../imgs/corner_khs.png') 100% 100% no-repeat;
+      }
+    }
+    &--row {
+      color: var(--modal-title-color);
+      display: flex;
+      &-label {
+        color: var(--label-color);
+      }
+      &-value {
+        color: var(--modal-title-color);
+      }
+    }
+    &--row2 {
+      display: flex;
+      flex-direction: column;
+      color: var(--color);
+    }
+  }
+
+  &-table {
+    height: 382px;
+  }
+}