@vtx/modals2 5.0.2 → 5.0.4

package/lib/vtx-df-modal/components/WorkCondition/Monitor.js

@@ -0,0 +1,179 @@
+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 * as echarts from 'echarts';
+import ReactEcharts from 'echarts-for-react';
+import moment from 'moment';
+import { useEffect } from 'react';
+import { VmEmpty, VmFilter } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import { BaseService } from "../../api";
+import "./index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Jczbqs(props) {
+  var _timeSumData$extraDat2, _timeSumData$extraDat3, _timeSumData$values;
+  var _useSettings = useSettings(),
+    chartFontColor = _useSettings.chartFontColor,
+    isDark = _useSettings.isDark;
+  var deviceId = props.deviceId,
+    deviceName = props.deviceName,
+    realtimeRes = props.realtimeRes,
+    startDate = props.startDate,
+    endDate = props.endDate;
+  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(startDate).format('YYYY-MM-DD 00:00:00'), moment(endDate).format('YYYY-MM-DD 23:59:59')),
+    timeSumData = _BaseService$useJczbq.timeSumData;
+  var option = {
+    color: ['#1890FF'],
+    tooltip: {
+      trigger: 'axis',
+      formatter: function formatter(params) {
+        var _timeSumData$extraDat;
+        return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value + (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) || '';
+      }
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      top: 28,
+      left: 56,
+      right: 42,
+      bottom: 32,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: isDark ? '#fff' : chartFontColor
+      },
+      data: (timeSumData === null || timeSumData === void 0 ? void 0 : timeSumData.names) || []
+    },
+    yAxis: {
+      name: (timeSumData === null || timeSumData === void 0 || (_timeSumData$extraDat2 = timeSumData.extraData) === null || _timeSumData$extraDat2 === void 0 || (_timeSumData$extraDat2 = _timeSumData$extraDat2[0]) === null || _timeSumData$extraDat2 === void 0 ? void 0 : _timeSumData$extraDat2.unit) || '',
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      min: 0,
+      nameTextStyle: {
+        //y轴上方单位的颜色
+        color: isDark ? '#fff' : chartFontColor
+      },
+      axisLabel: {
+        color: isDark ? '#fff' : chartFontColor
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(151,151,151,0.28)'
+        }
+      }
+    },
+    series: [{
+      name: timeSumData === null || timeSumData === void 0 || (_timeSumData$extraDat3 = timeSumData.extraData) === null || _timeSumData$extraDat3 === void 0 || (_timeSumData$extraDat3 = _timeSumData$extraDat3[0]) === null || _timeSumData$extraDat3 === void 0 ? void 0 : _timeSumData$extraDat3.monitorItemName,
+      type: 'line',
+      data: timeSumData !== null && timeSumData !== void 0 && timeSumData.values ? timeSumData.values[0] : [],
+      smooth: true,
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+          offset: 0,
+          color: isDark ? 'rgba(0,157,255,0.1)' : 'rgba(22, 119, 255, 0.10)'
+        }, {
+          offset: 0.5,
+          color: isDark ? 'rgba(0,157,255,0.3)' : 'rgba(22, 119, 255, 0.30)'
+        }, {
+          offset: 1,
+          color: isDark ? 'rgba(0,157,255,0.75)' : 'rgba(22, 119, 255, 0.75)'
+        }])
+      }
+    }],
+    dataZoom: [{
+      // 这个dataZoom组件，默认控制x轴。
+      type: 'slider',
+      // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+      start: 0,
+      // 左边在 10% 的位置。
+      end: 100,
+      // 右边在 60% 的位置。
+      borderColor: isDark ? 'rgba(0, 157, 255, 0.5)' : 'rgba(22, 119, 255, 0.5)',
+      handleSize: '150%',
+      height: 16,
+      handleStyle: {
+        color: '#fff',
+        shadowBlur: 3,
+        shadowColor: 'rgba(0, 0, 0, 0.4)',
+        shadowOffsetX: 2,
+        shadowOffsetY: 2
+      },
+      showDataShadow: false,
+      showDetail: false,
+      backgroundColor: isDark ? 'rgba(0, 157, 255, 0.5)' : 'rgba(22, 119, 255, 0.2)',
+      bottom: 10
+    }]
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "df-condition-trend",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "df-condition-trend-head",
+      children: [/*#__PURE__*/_jsx("div", {
+        children: deviceName || ''
+      }), /*#__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
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        height: 414,
+        width: '100%'
+      },
+      children: timeSumData !== null && timeSumData !== void 0 && (_timeSumData$values = timeSumData.values) !== null && _timeSumData$values !== void 0 && _timeSumData$values.length ? /*#__PURE__*/_jsx(ReactEcharts, {
+        option: option,
+        notMerge: true,
+        lazyUpdate: true,
+        style: {
+          height: '100%',
+          width: '100%'
+        }
+      }) : /*#__PURE__*/_jsx(VmEmpty, {
+        type: "NO_CHART"
+      })
+    })]
+  });
+}
+export default Jczbqs;

package/lib/vtx-df-modal/components/WorkCondition/Table.js

@@ -0,0 +1,84 @@
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 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 moment from 'moment';
+import { VmTable } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import { BaseService } from "../../api";
+import "./index.less";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+var WorkCondition = function WorkCondition(props) {
+  var _realtimeRes$map, _timeSumData$names, _timeSumData$extraDat;
+  var _useSettings = useSettings(),
+    tabPosition = _useSettings.tabPosition;
+  var startDate = props.startDate,
+    endDate = props.endDate,
+    deviceId = props.deviceId;
+  var _BaseService$useRealt = BaseService.useRealtime(deviceId),
+    realtimeRes = _BaseService$useRealt.realtimeRes;
+  var _BaseService$useJczbq = BaseService.useJczbqsfx(realtimeRes === null || realtimeRes === void 0 || (_realtimeRes$map = realtimeRes.map(function (ele) {
+      return ele.monitorItemCode;
+    })) === null || _realtimeRes$map === void 0 ? void 0 : _realtimeRes$map.join(','), deviceId, moment(startDate).format('YYYY-MM-DD 00:00:00'), moment(endDate).format('YYYY-MM-DD 23:59:59')),
+    timeSumData = _BaseService$useJczbq.timeSumData;
+  var data = [];
+  if (!(timeSumData !== null && timeSumData !== void 0 && timeSumData.names) || (timeSumData === null || timeSumData === void 0 || (_timeSumData$names = timeSumData.names) === null || _timeSumData$names === void 0 ? void 0 : _timeSumData$names.length) < 1) {
+    data = [];
+  } else {
+    var extraData = timeSumData.extraData,
+      names = timeSumData.names,
+      values = timeSumData.values;
+    names.forEach(function (name, index) {
+      var obj = {};
+      extraData === null || extraData === void 0 || extraData.forEach(function (item, idx) {
+        obj[item.monitorItemName] = values[idx][index];
+      });
+      data.push(_objectSpread({
+        time: name
+      }, obj));
+    });
+  }
+  var columns = [].concat(_toConsumableArray((timeSumData === null || timeSumData === void 0 || (_timeSumData$extraDat = timeSumData.extraData) === null || _timeSumData$extraDat === void 0 ? void 0 : _timeSumData$extraDat.map(function (ele) {
+    return {
+      title: ele.unit ? "".concat(ele.monitorItemName, "(").concat(ele.unit, ")") : "".concat(ele.monitorItemName),
+      dataIndex: ele.monitorItemName,
+      key: ele.monitorItemName,
+      render: function render(text) {
+        return text || '-';
+      }
+    };
+  })) || []), [{
+    title: '数据采集时间',
+    dataIndex: 'time',
+    key: 'time',
+    sorter: function sorter(a, b) {
+      return moment(a.time).valueOf() - moment(b.time).valueOf();
+    },
+    render: function render(text) {
+      return text || '-';
+    }
+  }]);
+  var tableProps = {
+    height: tabPosition === 'top' ? 424 : 462,
+    paganitation: false,
+    dataSource: data || []
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(VmTable, _objectSpread({
+      columns: columns,
+      rowKey: "time"
+    }, tableProps))
+  });
+};
+export default WorkCondition;

package/lib/vtx-df-modal/components/WorkCondition/index.js

@@ -0,0 +1,167 @@
+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 { Space, Tabs } from 'antd';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { VmFilter, VmWrapper } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import { BaseService } from "../../api";
+import Monitor from "./Monitor";
+import Table from "./Table";
+import "./index.less";
+import alarm from "../../imgs/alarm.png";
+import alarmLight from "../../imgs/alarm_light.png";
+import normal from "../../imgs/normal.png";
+import normalLight from "../../imgs/normal_light.png";
+import more from "../../imgs/tab_more.png";
+import moreLight from "../../imgs/tab_more_light.png";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var WorkCondition = function WorkCondition(props) {
+  var _realtimeMonitor$find;
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  var code = props.code;
+  var _useSetState = useSetState({
+      startDate: moment().subtract(3, 'days'),
+      endDate: moment(),
+      tabKey: 'chart'
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deviceId = _useState4[0],
+    setDeviceId = _useState4[1]; // 列表使用
+  var startDate = state.startDate,
+    endDate = state.endDate,
+    tabKey = state.tabKey;
+  var _BaseService$useRealt = BaseService.useRealtimeMonitor(code),
+    realtimeMonitor = _BaseService$useRealt.realtimeMonitor;
+  useEffect(function () {
+    if ((realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.length) > 0) {
+      var _realtimeMonitor$;
+      setActive(realtimeMonitor[0].deviceId);
+      setDeviceId(realtimeMonitor === null || realtimeMonitor === void 0 || (_realtimeMonitor$ = realtimeMonitor[0]) === null || _realtimeMonitor$ === void 0 ? void 0 : _realtimeMonitor$.deviceId);
+    }
+  }, [realtimeMonitor]);
+  var _BaseService$useRealt2 = BaseService.useRealtime(active),
+    realtimeRes = _BaseService$useRealt2.realtimeRes;
+  var alarmImg = isDark ? alarm : alarmLight;
+  var normalImg = isDark ? normal : normalLight;
+  var disabledDate = function disabledDate(current) {
+    if (!startDate || !endDate) {
+      return false;
+    }
+    var tooLate = startDate && current.diff(startDate, 'days') > 7;
+    var tooEarly = endDate && endDate.diff(current, 'days') > 7;
+    return !!tooEarly || !!tooLate;
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "df-condition",
+    children: /*#__PURE__*/_jsxs(VmWrapper, {
+      title: "\u8FD0\u884C\u603B\u89C8",
+      onChange: function onChange(key) {
+        setState({
+          tabKey: key
+        });
+      },
+      needChange: true,
+      extra: /*#__PURE__*/_jsxs(Space, {
+        children: [tabKey === 'list' && /*#__PURE__*/_jsx(VmFilter.VMSelect, {
+          value: deviceId,
+          onChange: function onChange(val) {
+            setDeviceId(val);
+          },
+          options: realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.map(function (item) {
+            return {
+              value: item.deviceId,
+              label: item.deviceName
+            };
+          }),
+          style: {
+            width: 150
+          },
+          placeholder: "\u8BF7\u9009\u62E9",
+          allowClear: false
+        }), /*#__PURE__*/_jsx(VmFilter.VMRangePicker, {
+          value: [moment(startDate), moment(endDate)],
+          disabledDate: disabledDate,
+          onChange: function onChange(dates) {
+            return dates && setState({
+              startDate: moment(dates[0]),
+              endDate: moment(dates[1])
+            });
+          }
+        })]
+      }),
+      children: [tabKey === 'chart' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "df-condition-head",
+          children: /*#__PURE__*/_jsx(Tabs, {
+            centered: true,
+            moreIcon: /*#__PURE__*/_jsx("img", {
+              src: isDark ? more : moreLight
+            }),
+            popupClassName: "df-popup-className ".concat(isDark ? 'dark' : ''),
+            onChange: function onChange(key) {
+              setActive(key);
+            },
+            size: "small",
+            items: (realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.map(function (item) {
+              var flag = item.beenNormal;
+              return {
+                label: /*#__PURE__*/_jsxs("div", {
+                  className: "df-monitor-head-item",
+                  children: [/*#__PURE__*/_jsx("img", {
+                    src: flag ? normalImg : alarmImg
+                  }), /*#__PURE__*/_jsxs("div", {
+                    className: "df-monitor-head-item-right",
+                    children: [/*#__PURE__*/_jsx("div", {
+                      className: "df-monitor-head-item-right-name",
+                      children: item.deviceName
+                    }), /*#__PURE__*/_jsx("div", {
+                      className: "df-monitor-head-item-right-".concat(flag ? 'valueNormal' : 'valueAlarm'),
+                      children: /*#__PURE__*/_jsx("span", {
+                        children: flag ? '正常' : '异常'
+                      })
+                    })]
+                  })]
+                }),
+                key: item.deviceId
+              };
+            })) || []
+          })
+        }), /*#__PURE__*/_jsx(Monitor, {
+          deviceName: realtimeMonitor === null || realtimeMonitor === void 0 || (_realtimeMonitor$find = realtimeMonitor.find(function (ele) {
+            return ele.deviceId === active;
+          })) === null || _realtimeMonitor$find === void 0 ? void 0 : _realtimeMonitor$find.deviceName,
+          realtimeRes: realtimeRes,
+          startDate: startDate,
+          endDate: endDate,
+          deviceId: active
+        })]
+      }), tabKey === 'list' && /*#__PURE__*/_jsx("div", {
+        className: "df-condition-table",
+        children: /*#__PURE__*/_jsx(Table, {
+          startDate: moment(startDate).format('YYYY-MM-DD 00:00:00'),
+          endDate: moment(endDate).format('YYYY-MM-DD 00:00:00'),
+          deviceId: deviceId
+        })
+      })]
+    })
+  });
+};
+export default WorkCondition;

package/lib/vtx-df-modal/components/WorkCondition/index.less

@@ -0,0 +1,113 @@
+.df-condition {
+  padding: 10px;
+  &-head {
+    width: 100%;
+  }
+
+  &-table {
+    height: 518px;
+  }
+  &-trend {
+    width: 100%;
+    &-head {
+      height: 32px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  .environment-monitor {
+    padding: 10px 16px;
+    border: 1px solid var(--bg-border-color2);
+
+    background-color: var(--content-bg-color);
+    text-align: center;
+
+    &-situation {
+      height: 100%;
+      min-height: 500px;
+      padding: 10px 16px;
+      background-color: var(--content-bg-color);
+      border: 1px solid var(--bg-border-color2);
+
+      &-noData {
+        text-align: center;
+      }
+    }
+  }
+  .em-situation {
+    clear: both;
+    &-wrap {
+      width: 620px;
+      margin: 150px auto;
+    }
+    &-parent {
+      width: 324px;
+      height: 57px;
+      line-height: 50px;
+      margin: 0 auto;
+      background: url('../../imgs/situation_parent_bg.png') no-repeat 100% 100%;
+      color: var(--info-color);
+      img {
+        width: 46px;
+        height: 50px;
+        margin-left: 44px;
+        margin-right: 18px;
+      }
+      span {
+        font-size: 22px;
+      }
+    }
+    &-verticaline {
+      width: 2px;
+      height: 28px;
+      margin: 0 auto;
+      background: #096e88;
+    }
+    &-horizontaline {
+      width: 540px;
+      height: 2px;
+      margin: 0 auto;
+      background: #096e88;
+    }
+    &-verticaline4 {
+      width: 540px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      &-item {
+        width: 2px;
+        height: 16px;
+        background: #096e88;
+      }
+    }
+    &-content {
+      width: 100%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      &-item {
+        width: 80px;
+        text-align: center;
+        &--progress {
+          margin-top: 6px;
+        }
+        &--name {
+          margin-top: 12px;
+          color: var(--label-color);
+        }
+        &--value {
+          color: var(--info-color);
+          span {
+            font-size: 22px;
+          }
+        }
+      }
+    }
+  }
+  .ant-progress-text {
+    color: var(--info-color) !important;
+  }
+}

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

@@ -0,0 +1,5 @@
+import BaseInfo from "./BaseInfo";
+import Calendar from "./Calendar";
+import Metering from "./Metering";
+import WorkCondition from "./WorkCondition";
+export { BaseInfo, Calendar, Metering, WorkCondition };

package/lib/vtx-df-modal/imgs/rjjcl.svg

@@ -0,0 +1,55 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 438">
+<g id="Group 461">
+<circle id="Ellipse 38" cx="22" cy="22" r="22" fill="#119FFB" fill-opacity="0.1"/>
+</g>
+<g id="Group 528">
+<g id="Frame">
+<g id="Frame_2" clip-path="url(#clip0_163_1776)">
+<g id="Vector" filter="url(#filter0_i_163_1776)">
+<path d="M9.47559 32.618V31.0052H11.1652V21.294H17.8891V17.9599L22.2068 21.294V17.9599L26.5293 21.294V17.9599L30.847 21.294V31.0052H32.5289V32.618H9.47559ZM11.9913 20.7705L13.3053 12.818H15.6702L16.9842 20.7695L11.9913 20.7705ZM21.3778 12.4559C20.3016 11.9437 19.1247 11.6779 17.9328 11.6779C16.7409 11.6779 15.564 11.9437 14.4878 12.4559C17.6605 9.74331 20.5614 10.6222 20.5614 10.6222C22.8482 11.8025 25.4813 12.1275 27.9864 11.5386C26.7781 12.3828 25.3294 12.814 23.8561 12.7681C23.0204 12.771 22.1866 12.6653 21.3778 12.455V12.4559Z" fill="#119FFB"/>
+</g>
+</g>
+</g>
+<g id="Frame_3" clip-path="url(#clip1_163_1776)">
+<foreignObject x="17.667" y="16.667" width="22.667" height="22.667"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_2_163_1776_clip_path);height:100%;width:100%"></div></foreignObject><path id="Vector_2" data-figma-bg-blur-radius="4" d="M29 20.9668C30.8654 20.9668 32.6546 21.7083 33.9736 23.0273C35.2925 24.3463 36.0331 26.1348 36.0332 28C36.0332 28.9235 35.8514 29.8382 35.498 30.6914C35.1446 31.5447 34.6267 32.3205 33.9736 32.9736C33.3205 33.6267 32.5447 34.1446 31.6914 34.498C30.8382 34.8514 29.9235 35.0332 29 35.0332C28.0765 35.0332 27.1618 34.8515 26.3086 34.498C25.4554 34.1446 24.6804 33.6266 24.0273 32.9736C23.3742 32.3205 22.8554 31.5447 22.502 30.6914C22.1486 29.8382 21.9668 28.9234 21.9668 28C21.9669 26.1348 22.7084 24.3463 24.0273 23.0273C25.3463 21.7084 27.1348 20.9669 29 20.9668Z" fill="#C5DFFF" fill-opacity="0.5" stroke="url(#paint0_linear_163_1776)" stroke-width="0.6"/>
+<g id="&#230;&#151;&#165;" filter="url(#filter2_d_163_1776)">
+<path d="M26.232 24.688H31.816V31.608H30.784V25.656H27.216V31.624H26.232V24.688ZM26.904 27.376H31.208V28.32H26.904V27.376ZM26.904 30.128H31.216V31.096H26.904V30.128Z" fill="white"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_163_1776" x="9.47559" y="10.4863" width="23.0537" height="24.1318" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_163_1776"/>
+</filter>
+<clipPath id="bgblur_2_163_1776_clip_path" transform="translate(-17.667 -16.667)"><path d="M29 20.9668C30.8654 20.9668 32.6546 21.7083 33.9736 23.0273C35.2925 24.3463 36.0331 26.1348 36.0332 28C36.0332 28.9235 35.8514 29.8382 35.498 30.6914C35.1446 31.5447 34.6267 32.3205 33.9736 32.9736C33.3205 33.6267 32.5447 34.1446 31.6914 34.498C30.8382 34.8514 29.9235 35.0332 29 35.0332C28.0765 35.0332 27.1618 34.8515 26.3086 34.498C25.4554 34.1446 24.6804 33.6266 24.0273 32.9736C23.3742 32.3205 22.8554 31.5447 22.502 30.6914C22.1486 29.8382 21.9668 28.9234 21.9668 28C21.9669 26.1348 22.7084 24.3463 24.0273 23.0273C25.3463 21.7084 27.1348 20.9669 29 20.9668Z"/>
+</clipPath><filter id="filter2_d_163_1776" x="22.2324" y="22.6885" width="13.584" height="14.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0862745 0 0 0 0 0.466667 0 0 0 0 1 0 0 0 0.7 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_163_1776"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_163_1776" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_163_1776" x1="29.0003" y1="20.667" x2="29.0003" y2="35.3337" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.7"/>
+</linearGradient>
+<clipPath id="clip0_163_1776">
+<rect width="24" height="24" fill="white" transform="translate(9.00977 10.0127)"/>
+</clipPath>
+<clipPath id="clip1_163_1776">
+<rect width="16" height="16" fill="white" transform="translate(21 20)"/>
+</clipPath>
+</defs>
+</svg>