@vtx/modals2 5.0.2 → 5.0.4

package/lib/vtx-tfd-modal/api.js

@@ -0,0 +1,114 @@
+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 { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+var BaseService = {
+  useBaseInfo: function useBaseInfo(id) {
+    var _baseInfoRes$data, _info$timePeriods;
+    var _useRequest = useRequest(function () {
+        return request.get('/cloud/jcss-reborn/facility/get', {
+          data: {
+            id: id,
+            coordType: 'wgs84'
+          }
+        });
+      }, {
+        ready: !!id,
+        refreshDeps: [id]
+      }),
+      baseInfoRes = _useRequest.data;
+    var info = _objectSpread(_objectSpread({}, baseInfoRes === null || baseInfoRes === void 0 ? void 0 : baseInfoRes.data), baseInfoRes === null || baseInfoRes === void 0 || (_baseInfoRes$data = baseInfoRes.data) === null || _baseInfoRes$data === void 0 ? void 0 : _baseInfoRes$data.dataJson);
+    var baseInfo = [{
+      label: '行政区划',
+      key: 'divisionName',
+      value: info === null || info === void 0 ? void 0 : info.divisionName
+    }, {
+      label: '设施类型',
+      key: 'facilityClassName',
+      value: info === null || info === void 0 ? void 0 : info.facilityClassName
+    }, {
+      label: '所属小区',
+      key: 'housingEstateName',
+      value: info === null || info === void 0 ? void 0 : info.housingEstateName
+    }, {
+      label: '垃圾类型',
+      key: 'garbageTypeName',
+      value: info === null || info === void 0 ? void 0 : info.garbageTypeName
+    }, {
+      label: '投放时间',
+      key: 'householdNum',
+      value: info === null || info === void 0 || (_info$timePeriods = info.timePeriods) === null || _info$timePeriods === void 0 || (_info$timePeriods = _info$timePeriods.map(function (ele) {
+        return "".concat(ele.startTime, "~").concat(ele.endTime);
+      })) === null || _info$timePeriods === void 0 ? void 0 : _info$timePeriods.join('、')
+    }, {
+      label: '督导员',
+      key: 'supervisorName',
+      value: info === null || info === void 0 ? void 0 : info.supervisorName
+    }];
+    var photos = info !== null && info !== void 0 && info.photoIds ? JSON.parse(info.photoIds) : info !== null && info !== void 0 && info.typePhotoIds ? JSON.parse(info.typePhotoIds) : [];
+    return {
+      info: info,
+      baseInfo: baseInfo,
+      photos: photos
+    };
+  },
+  useDeviceInfo: function useDeviceInfo(id) {
+    var _useRequest2 = useRequest(function () {
+        return request.get('/cloud/ljfljc/api/v101/equipment/list', {
+          data: {
+            throwPointId: id
+          }
+        });
+      }, {
+        ready: !!id,
+        refreshDeps: [id]
+      }),
+      res = _useRequest2.data;
+    return {
+      devices: res === null || res === void 0 ? void 0 : res.data
+    };
+  },
+  useThrowInfo: function useThrowInfo(throwPointId, dateType, startDate, endDate) {
+    var _useRequest3 = useRequest(function () {
+        return request.get('/cloud/ljfljc/api/v101/throwBoard/throwAnalysis', {
+          data: {
+            throwPointId: throwPointId,
+            dateType: dateType,
+            startDate: startDate,
+            endDate: endDate
+          }
+        });
+      }, {
+        ready: !!throwPointId,
+        refreshDeps: [throwPointId, dateType, startDate, endDate]
+      }),
+      res = _useRequest3.data;
+    return {
+      throwAnalysis: res === null || res === void 0 ? void 0 : res.data
+    };
+  },
+  useAlarmInfo: function useAlarmInfo(throwPointId, dateType, startDate, endDate) {
+    var _useRequest4 = useRequest(function () {
+        return request.get('/cloud/ljfljc/api/v101/throwBoard/violationAnalysis', {
+          data: {
+            throwPointId: throwPointId,
+            dateType: dateType,
+            startDate: startDate,
+            endDate: endDate
+          }
+        });
+      }, {
+        ready: !!throwPointId,
+        refreshDeps: [throwPointId, dateType, startDate, endDate]
+      }),
+      res = _useRequest4.data;
+    return {
+      alarmAnalysis: res === null || res === void 0 ? void 0 : res.data
+    };
+  }
+};
+export { BaseService };

package/lib/vtx-tfd-modal/components/BaseInfo/Jczbqs.js

@@ -0,0 +1,96 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * 监测指标趋势分析
+ */
+import { useSetState } from 'ahooks';
+import moment from 'moment';
+import * as echarts from 'echarts';
+import { useEffect } from 'react';
+import { VmEmpty, VmFilter, VmLineCharts, VmWrapper } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import { BaseService } from "../../api";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Jczbqs(props) {
+  var _timeSumData$extraDat, _timeSumData$values;
+  var _useSettings = useSettings(),
+    chartFontColor = _useSettings.chartFontColor,
+    theme = _useSettings.theme;
+  var deviceId = props.deviceId,
+    realtimeRes = props.realtimeRes;
+  var _useSetState = useSetState({
+      value: ''
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var value = state.value;
+  useEffect(function () {
+    var _realtimeRes$;
+    setState({
+      value: realtimeRes === null || realtimeRes === void 0 || (_realtimeRes$ = realtimeRes[0]) === null || _realtimeRes$ === void 0 ? void 0 : _realtimeRes$.monitorItemCode
+    });
+  }, [realtimeRes]);
+  var _BaseService$useJczbq = BaseService.useJczbqsfx(value, deviceId, moment().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')),
+    timeSumData = _BaseService$useJczbq.timeSumData;
+  return /*#__PURE__*/_jsx("div", {
+    className: "df-overview-trend",
+    children: /*#__PURE__*/_jsx(VmWrapper, {
+      title: "\u76D1\u6D4B\u6307\u6807\u8D8B\u52BF\u5206\u6790\uFF0824\u5C0F\u65F6\uFF09",
+      extra: /*#__PURE__*/_jsx(VmFilter.VMSelect, {
+        value: value,
+        onChange: function onChange(val) {
+          setState({
+            value: val
+          });
+        },
+        options: realtimeRes === null || realtimeRes === void 0 ? void 0 : realtimeRes.map(function (item) {
+          return {
+            value: item.monitorItemCode,
+            label: item.monitorItemName
+          };
+        }),
+        style: {
+          width: 150
+        },
+        placeholder: "\u8BF7\u9009\u62E9",
+        allowClear: false
+      }),
+      children: /*#__PURE__*/_jsx("div", {
+        className: "df-overview-trend-content",
+        children: timeSumData ? /*#__PURE__*/_jsx(VmLineCharts, {
+          title: '总数',
+          height: 191,
+          unit: (timeSumData === null || timeSumData === void 0 || (_timeSumData$extraDat = timeSumData.extraData) === null || _timeSumData$extraDat === void 0 || (_timeSumData$extraDat = _timeSumData$extraDat[0]) === null || _timeSumData$extraDat === void 0 ? void 0 : _timeSumData$extraDat.unit) || '',
+          xAxis: (timeSumData === null || timeSumData === void 0 ? void 0 : timeSumData.names) || [],
+          dataList: timeSumData === null || timeSumData === void 0 || (_timeSumData$values = timeSumData.values) === null || _timeSumData$values === void 0 ? void 0 : _timeSumData$values.map(function (ele, index) {
+            var _timeSumData$extraDat2;
+            return {
+              data: ele,
+              name: (timeSumData === null || timeSumData === void 0 || (_timeSumData$extraDat2 = timeSumData.extraData[index]) === null || _timeSumData$extraDat2 === void 0 ? void 0 : _timeSumData$extraDat2.monitorItemName) || '',
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: theme === 'blue' ? 'rgba(0,157,255,0.1)' : 'rgba(22, 119, 255, 0.10)'
+                }, {
+                  offset: 0.5,
+                  color: theme === 'blue' ? 'rgba(0,157,255,0.3)' : 'rgba(22, 119, 255, 0.30)'
+                }, {
+                  offset: 1,
+                  color: theme === 'blue' ? 'rgba(0,157,255,0.75)' : 'rgba(22, 119, 255, 0.75)'
+                }])
+              }
+            };
+          })
+        }) : /*#__PURE__*/_jsx(VmEmpty, {})
+      })
+    })
+  });
+}
+export default Jczbqs;

package/lib/vtx-tfd-modal/components/BaseInfo/Qyjcl.js

@@ -0,0 +1,43 @@
+/**
+ * 区域进场量分析
+ */
+
+import { sumBy } from 'lodash';
+import { VmEmpty, VmPieCharts } from "../../../_components";
+import { BaseService } from "../../api";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Qyjcl(props) {
+  var _areaSumData$areaDeta, _areaSumData$areaDeta2;
+  var code = props.code,
+    startDate = props.startDate,
+    endDate = props.endDate;
+  var _BaseService$useQyjcl = BaseService.useQyjcl(code, startDate, endDate),
+    areaSumData = _BaseService$useQyjcl.areaSumData;
+  var total = sumBy((areaSumData === null || areaSumData === void 0 ? void 0 : areaSumData.areaDetailList) || [], 'todayInWeight') || 0;
+  return /*#__PURE__*/_jsx("div", {
+    className: "df-qyjcl",
+    children: areaSumData !== null && areaSumData !== void 0 && (_areaSumData$areaDeta = areaSumData.areaDetailList) !== null && _areaSumData$areaDeta !== void 0 && _areaSumData$areaDeta.length ? /*#__PURE__*/_jsx(VmPieCharts, {
+      height: 216,
+      total: total,
+      title: "\u5428",
+      unit: "\u5428",
+      name: "\u533A\u57DF\u8FDB\u573A\u91CF",
+      innerRadius: ['50%', '65%'],
+      outerRadius: ['65%', '70%'],
+      dataList: (areaSumData === null || areaSumData === void 0 || (_areaSumData$areaDeta2 = areaSumData.areaDetailList) === null || _areaSumData$areaDeta2 === void 0 ? void 0 : _areaSumData$areaDeta2.map(function (ele) {
+        return {
+          name: ele.areaName,
+          value: ele.todayInWeight,
+          rate: ele.todayInWeightPercent
+        };
+      })) || [],
+      legendConfig: {
+        right: 16
+      }
+    }) : /*#__PURE__*/_jsx(VmEmpty, {
+      type: "NO_CHART"
+    })
+  });
+}
+export default Qyjcl;

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

@@ -0,0 +1,259 @@
+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); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { VtxImage } from '@vtx/components';
+import { getVtxToken } from '@vtx/utils';
+import { useSetState } from 'ahooks';
+import { Col, Row } from 'antd';
+import dayjs from 'dayjs';
+import { useRef } from 'react';
+import { VmEmpty, VmFilter, VmInfoCollection, VmPieCharts, VmTitle, VmWrapper } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import { DownIcon, UpIcon } from "../../../_util/iconSvgHtml";
+import { BaseService } from "../../api";
+import "./index.less";
+
+// svg大小比png2倍还大，不如使用2次png
+import { sumBy } from 'lodash';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BaseInfo = function BaseInfo(props) {
+  var _alarmAnalysis$garbag, _throwAnalysis$garbag, _alarmAnalysis$violat;
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  var id = props.id,
+    photos = props.photos,
+    baseInfo = props.baseInfo;
+  var _useSetState = useSetState({
+      dateType: 'datePicker',
+      date: dayjs()
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var dateType = state.dateType,
+    date = state.date;
+  var imgRef = useRef(null);
+  var formatType = {
+    datePicker: 'day',
+    monthPicker: 'month',
+    yearPicker: 'year'
+  };
+  var _BaseService$useDevic = BaseService.useDeviceInfo(id),
+    devices = _BaseService$useDevic.devices;
+  var _BaseService$useThrow = BaseService.useThrowInfo(id, formatType[dateType], date.startOf(formatType[dateType]).format('YYYY-MM-DD'), date.endOf(formatType[dateType]).format('YYYY-MM-DD')),
+    throwAnalysis = _BaseService$useThrow.throwAnalysis;
+  var _BaseService$useAlarm = BaseService.useAlarmInfo(id, formatType[dateType], date.startOf(formatType[dateType]).format('YYYY-MM-DD'), date.endOf(formatType[dateType]).format('YYYY-MM-DD')),
+    alarmAnalysis = _BaseService$useAlarm.alarmAnalysis;
+  console.log(throwAnalysis, alarmAnalysis);
+  console.log(alarmAnalysis === null || alarmAnalysis === void 0 || (_alarmAnalysis$garbag = alarmAnalysis.garbageValues) === null || _alarmAnalysis$garbag === void 0 ? void 0 : _alarmAnalysis$garbag.map(function (ele) {
+    return _objectSpread(_objectSpread({}, ele), {}, {
+      name: ele.garbageTypeName,
+      value: ele.value || 10
+    });
+  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "tfd-base",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "tfd-base-left",
+      children: /*#__PURE__*/_jsxs(VmWrapper, {
+        title: "\u57FA\u672C\u4FE1\u606F",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "base-top-img",
+          ref: imgRef,
+          children: photos !== null && photos !== void 0 && photos.length ? /*#__PURE__*/_jsx("div", {
+            style: {
+              padding: '0 12px 12px'
+            },
+            children: /*#__PURE__*/_jsx(VtxImage, {
+              src: "/cloudFile/common/downloadFile?id=".concat(photos[0].id, "&token=").concat(getVtxToken('token')),
+              alt: photos[0].name,
+              isDark: true,
+              style: {
+                maxWidth: '340px',
+                height: 207,
+                overflow: 'hidden'
+              }
+            }, photos[0].id)
+          }) : /*#__PURE__*/_jsx(VmEmpty, {
+            type: "NO_PICTURE",
+            style: {
+              height: 207
+            }
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "base-top--base",
+          style: {
+            height: 382
+          },
+          children: [/*#__PURE__*/_jsx(VmInfoCollection, {
+            data: baseInfo,
+            horizontal: true,
+            ellipsis: true,
+            padding: '0 12px 12px'
+          }), /*#__PURE__*/_jsx(VmTitle, {
+            title: "\u8BBE\u5907\u60C5\u51B5"
+          }), (devices === null || devices === void 0 ? void 0 : devices.length) > 0 ? /*#__PURE__*/_jsx("div", {
+            className: "tfd-equipment",
+            children: devices.map(function (ele, index) {
+              return /*#__PURE__*/_jsxs("div", {
+                className: "tfd-equipment-item",
+                children: [/*#__PURE__*/_jsx("img", {
+                  src: require("../../imgs/".concat(IMG[ele.typeCode]).concat(isDark ? '' : '_light').concat(ele.statusCode === 'ONLINE' ? '_online' : '', ".png"))
+                }), /*#__PURE__*/_jsx("div", {
+                  children: ele.name
+                })]
+              }, index);
+            })
+          }) : /*#__PURE__*/_jsx(VmEmpty, {
+            type: "NO_DATA",
+            text: "\u6682\u65E0\u8BBE\u5907",
+            style: {
+              height: 120
+            }
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "tfd-base-right",
+      children: /*#__PURE__*/_jsxs(Row, {
+        gutter: [16, 16],
+        children: [/*#__PURE__*/_jsx(Col, {
+          span: 24,
+          children: /*#__PURE__*/_jsx(VmWrapper, {
+            title: "",
+            filterType: dateType,
+            filterChange: function filterChange(date) {
+              setState({
+                date: date
+              });
+            },
+            style: {
+              height: 52
+            },
+            headerStyle: {
+              height: 52,
+              borderBottom: 'unset'
+            },
+            showContent: false,
+            dateValue: date,
+            extra: /*#__PURE__*/_jsx("div", {
+              style: {
+                position: 'absolute',
+                right: 200,
+                top: 0,
+                borderRadius: 10,
+                background: 'rgba(12,154,255,0.99)'
+              },
+              children: /*#__PURE__*/_jsx(VmFilter.VMSelect, {
+                value: dateType,
+                options: [{
+                  label: '日',
+                  value: 'datePicker'
+                }, {
+                  label: '月',
+                  value: 'monthPicker'
+                }, {
+                  label: '年',
+                  value: 'yearPicker'
+                }],
+                onChange: function onChange(key) {
+                  setState({
+                    dateType: key
+                  });
+                }
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(Col, {
+          span: 24,
+          children: /*#__PURE__*/_jsxs(VmWrapper, {
+            title: "\u6295\u653E\u91CF\u5206\u6790",
+            style: {
+              height: 265
+            },
+            children: [/*#__PURE__*/_jsx(VmPieCharts, {
+              height: 160,
+              dataList: (throwAnalysis === null || throwAnalysis === void 0 || (_throwAnalysis$garbag = throwAnalysis.garbageValues) === null || _throwAnalysis$garbag === void 0 ? void 0 : _throwAnalysis$garbag.map(function (ele) {
+                return _objectSpread(_objectSpread({}, ele), {}, {
+                  name: ele.garbageTypeName,
+                  value: ele.value
+                });
+              })) || [],
+              name: '投放量',
+              title: "\u6295\u653E\u91CF(".concat(dateType === 'datePicker' ? 'kg' : '吨', ")"),
+              total: sumBy(throwAnalysis === null || throwAnalysis === void 0 ? void 0 : throwAnalysis.garbageValues, 'value'),
+              loading: false,
+              unit: dateType === 'datePicker' ? 'kg' : '吨',
+              innerRadius: ['65%', '85%'],
+              outerRadius: ['85%', '95%'],
+              legendConfig: {
+                right: '8%'
+              },
+              nameLength: 8
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "tfd-base-right-compare",
+              children: ["\u4E0E\u8FD130\u5929\u65E5\u5747\u503C\u6BD4", (throwAnalysis === null || throwAnalysis === void 0 ? void 0 : throwAnalysis.rate) || 0, "%", (throwAnalysis === null || throwAnalysis === void 0 ? void 0 : throwAnalysis.rate) < 0 && /*#__PURE__*/_jsx(DownIcon, {
+                fill: '#f5222d'
+              }), (throwAnalysis === null || throwAnalysis === void 0 ? void 0 : throwAnalysis.rate) > 0 && /*#__PURE__*/_jsx(UpIcon, {
+                fill: '#0fb964'
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsx(Col, {
+          span: 24,
+          children: /*#__PURE__*/_jsxs(VmWrapper, {
+            title: "\u8FDD\u89C4\u5206\u6790",
+            style: {
+              height: 265
+            },
+            children: [/*#__PURE__*/_jsx(VmPieCharts, {
+              height: 160,
+              dataList: (alarmAnalysis === null || alarmAnalysis === void 0 || (_alarmAnalysis$violat = alarmAnalysis.violationValues) === null || _alarmAnalysis$violat === void 0 ? void 0 : _alarmAnalysis$violat.map(function (ele) {
+                return _objectSpread(_objectSpread({}, ele), {}, {
+                  name: ele.violationTypeName,
+                  value: ele.count
+                });
+              })) || [],
+              name: '违规类型',
+              title: "\u5408\u8BA1(\u6B21)",
+              total: sumBy(alarmAnalysis === null || alarmAnalysis === void 0 ? void 0 : alarmAnalysis.garbageValues, 'value'),
+              loading: false,
+              unit: "\u6B21",
+              innerRadius: ['65%', '85%'],
+              outerRadius: ['85%', '95%'],
+              legendConfig: {
+                right: '12%'
+              },
+              nameLength: 8
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "tfd-base-right-compare",
+              children: ["\u4E0E\u8FD130\u5929\u65E5\u5747\u503C\u6BD4", (alarmAnalysis === null || alarmAnalysis === void 0 ? void 0 : alarmAnalysis.rate) || 0, "%", (alarmAnalysis === null || alarmAnalysis === void 0 ? void 0 : alarmAnalysis.rate) < 0 && /*#__PURE__*/_jsx(DownIcon, {
+                fill: '#f5222d'
+              }), (alarmAnalysis === null || alarmAnalysis === void 0 ? void 0 : alarmAnalysis.rate) > 0 && /*#__PURE__*/_jsx(UpIcon, {
+                fill: '#0fb964'
+              })]
+            })]
+          })
+        })]
+      })
+    })]
+  });
+};
+export default BaseInfo;
+var IMG = {
+  SMALL_WEIGHING_MACHINE: 'xdb',
+  INTELLIGENT_DELIVERY_MACHINE: 'zntfj',
+  ELECTRONIC_SCALE: 'dzc',
+  POINT_CHANGER: 'jfdhj',
+  BAG_HAIR_MACHINE: 'fdj',
+  CAMERA: 'sxt'
+};

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

@@ -0,0 +1,90 @@
+.tfd-base {
+  height: 100%;
+  display: flex;
+  justify-content: start;
+  gap: 16px;
+
+  &-left {
+    width: 400px;
+    height: 616px;
+  }
+  &-right {
+    width: calc(100% - 416px);
+
+    &-compare {
+      margin-left: 16%;
+      color: var(--modal-title-color);
+    }
+  }
+
+  .base-top {
+    &-img {
+      img {
+        width: 100%;
+      }
+    }
+
+    &--base {
+      max-height: 480px;
+      overflow: auto;
+      margin-top: 12px;
+    }
+    &--jcqsfx {
+      margin-top: 14px;
+    }
+    &--chart {
+      height: 298px;
+      width: 100%;
+    }
+  }
+
+  .base-bottom {
+    margin-top: 10px;
+
+    &--right {
+      &-content {
+        width: 100%;
+        text-align: center;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .tfd-qyjcl {
+    height: 215px;
+  }
+
+  .tfd-overview-trend {
+    width: 100%;
+    margin-top: 16px;
+    &-content {
+      width: 100%;
+      height: 191px;
+    }
+  }
+}
+
+.tfd-equipment {
+  // display: flex;
+  display: grid;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: 16px;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: repeat(4, 1fr);
+
+  &-item {
+    img {
+      width: 44px;
+      height: 44px;
+      margin-bottom: 8px;
+    }
+    text-align: center;
+    color: var(--modal-text-color);
+  }
+}
+
+.slick-track {
+  width: 340px;
+  overflow: hidden;
+}

package/lib/vtx-tfd-modal/components/index.js

@@ -0,0 +1,2 @@
+import BaseInfo from "./BaseInfo";
+export { BaseInfo };