feas

src/components/ScreenBox/SquareBox/style.less

@@ -4,6 +4,7 @@
 .SquareBox-body {
   padding: 20px;
   color: #fff;
+  background: rgba(8, 40, 90, 0.4);
   border: 2px solid rgba(61, 129, 240, 0.5);
 }
 .border_corner {

src/pages/MonitoringScreen/DateCommponetsBottomLeft.jsx

@@ -42,12 +42,8 @@ export default (props) => {
       'l(270) 0:rgba(225,225,225,0.0) 1:#44F68B',
       'l(270) 0:rgba(225,225,225,0.0) 1:#51D4FF',
       'l(270) 0:rgba(225,225,225,0.0) 1:#B8B2A9',
-      'l(270) 0:rgba(225,225,225,0.0) 1:#F55226'],
-    minColumnWidth: 26,
-    columnStyle: {
-      // fill: 'l(270) 0:rgba(225,225,225,0.0) 1:#FB9900',
-    },
-
+      'l(270) 0:rgba(225,225,225,0.0) 1:#F55226',
+    ],
 
     /** 设置间距 */
     // marginRatio: 0.1,

src/pages/MonitoringScreen/DateCommponetsBottomRight.jsx

@@ -2,6 +2,7 @@ import SquareBox from '@/components/ScreenBox/SquareBox';
 import TitleBox from '@/components/ScreenBox/TitleBox';
 import { Pie, G2 } from '@ant-design/plots';
 // import ba from './a.png'
+import RedRing from '@/assets/images/screen/ring-red.png';
 
 export default (props) => {
   const data = [
@@ -22,11 +23,21 @@ export default (props) => {
       value: 70,
     },
   ];
+
   const config = {
-    color: ['#FB9900', '#355C9C', '#23E8AE', '#E63404'],
-    pieStyle: {
-      strokeOpacity: 0,
-      lineWidth: 0,
+    // color: [
+    //   'r(0.5, 0.5, 1) 0:rgba(225,225,225,0.0) 0.25:#FB9900 0.5:rgba(225,225,225,0.0)  0.75:1:#FB9900 1:#FB9900',
+    //   'r(0.5, 0.5, 1) 0:rgba(225,225,225,0.0) 1:#23E8AE',
+    //   'r(0.5, 0.5, 1) 0:rgba(225,225,225,0.0) 1:#E63404',
+    // ],
+    // pieStyle: {
+    //   strokeOpacity: 0,
+    //   lineWidth: 0,
+    // },
+    pieStyle: () => {
+      return {
+        fill: `p(n)${RedRing}`,
+      };
     },
     statistic: {
       title: false,
@@ -55,7 +66,6 @@ export default (props) => {
     interactions: [
       {
         type: 'element-selected',
-
       },
       {
         type: 'element-active',

src/pages/MonitoringScreen/DateCommponetsLeft.jsx

@@ -6,7 +6,7 @@ export default (props) => {
   const data = [
     {
       key: '收割机',
-      value: 200,
+      value: 300,
     },
     {
       key: '播种机',
@@ -19,15 +19,35 @@ export default (props) => {
   ];
 
   const config = {
-    maxBarWidth: 20,
     data,
+    axis: {
+      tickLine: null,
+      subTickLine: null,
+      grid: null,
+      line: null,
+    },
     xField: 'value',
     yField: 'key',
     seriesField: 'key',
-    color: ['l(0) 0:rgba(225,225,225,0.0) 1:#FB9900', 'l(0) 0:rgba(225,225,225,0.0) 1:#23E8AE', 'l(0) 0:rgba(225,225,225,0.0) 1:#E63404'],
+    color: [
+      'l(0) 0:rgba(225,225,225,0.0) 1:#FB9900',
+      'l(0) 0:rgba(225,225,225,0.0) 1:#23E8AE',
+      'l(0) 0:rgba(225,225,225,0.0) 1:#E63404',
+    ],
     legend: {
       position: 'top-left',
     },
+    barBackground: {
+      style: {
+        fill: 'rgba(0,0,0,0.1)',
+      },
+    },
+    interactions: [
+      {
+        type: 'active-region',
+        enable: false,
+      },
+    ],
     statistic: {
       style: {
         fontSize: 10,