修改

src/components/CustomPages/BI/BI014RiskPerformanceModel.js

@@ -58,20 +58,17 @@ class BI014RiskPerformanceModel extends React.Component {
             { DATE: "2024-12-31 23:59:59", COUNT: 116, TYPE: 1 },
             { DATE: "2024-12-31 23:59:59", COUNT: 1154, TYPE: 0 },
           ],
-          CHART11:
+          CHARTFXDJ1:
           {
             NAME: ["一级", "二级", "三级", "四级"],
             LEVEL1: [3, 8, 181, 1112],
-            LEVEL2: [8],
-            LEVEL3: [181],
-            LEVEL4: [1112],
           }
           ,
-          CHART12: [
+          CHARTFXDJ2: [
-            { name: "露天矿", value: 3 },
+            { name: "一级", value: 3 },
-            { name: "选矿厂", value: 8 },
+            { name: "二级", value: 8 },
-            { name: "尾矿库", value: 181 },
+            { name: "三级", value: 181 },
-            { name: "职能部门", value: 1112 },
+            { name: "四级", value: 1112 },
           ],
           CHARTLIST: [
             {
@@ -172,11 +169,11 @@ class BI014RiskPerformanceModel extends React.Component {
               LEVEL4: [18, 33, 43, 21, 27],
             },
             {
-              NAME: ["破碎一班", "破碎二班", "破碎三班", "磨重一班", "磨重二班", "磨重三班"],
+              NAME: ["破碎车间", "磨重车间", "破碎一班", "破碎二班", "破碎三班", "磨重一班", "磨重二班", "磨重三班"],
-              LEVEL1: [0, 0, 0, 0, 0, 0],
+              LEVEL1: [1, 3, 0, 0, 0, 0, 0, 0],
-              LEVEL2: [0, 0, 0, 0, 1, 1],
+              LEVEL2: [2, 4, 0, 0, 0, 0, 1, 1],
-              LEVEL3: [1, 3, 7, 22, 43, 1],
+              LEVEL3: [3, 5, 1, 3, 7, 22, 43, 1],
-              LEVEL4: [7, 26, 8, 18, 21, 24],
+              LEVEL4: [4, 6, 7, 26, 8, 18, 21, 24],
             },
             {
               NAME: ["尾矿一班", "尾矿二班", "尾矿三班", "尾矿机修班"],
@@ -253,6 +250,17 @@ class BI014RiskPerformanceModel extends React.Component {
               LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7]
             },
           ],
+          CHARTZYRW1:
+          {
+            NAME: ["一般任务", "关键任务", "许可作业"],
+            LEVEL1: [67, 81, 91],
+          }
+          ,
+          CHARTZYRW2: [
+            { name: "一般任务", value: 67 },
+            { name: "关键任务", value: 81 },
+            { name: "许可作业", value: 91 },
+          ],
         },
         TotalCount: 0,
         MessageType: 0,
@@ -276,28 +284,28 @@ class BI014RiskPerformanceModel extends React.Component {
       onlyData: false,
       onComplete: (ret) => {
         this.chart4(ret?.Data.DATECOUNTS);
-        this.chartFXDJ1(ret?.Data.CHART11);
+        this.chartFXDJ1(ret?.Data.CHARTFXDJ1);
-        this.chartFXDJ2(ret?.Data.CHART12);
+        this.chartFXDJ2(ret?.Data.CHARTFXDJ2);
         this.chartSCDY(ret?.Data.CHARTLIST[0]);
-        this.chartFXLB3(ret?.Data.CHARTLIST[1]);
         this.chartFXLB1(ret?.Data.CHARTLIST[1]);
         this.chartZRDW(ret?.Data.CHARTLIST[2]);
         this.chartCJ(ret?.Data.CHARTLIST[3]);
-
+        this.chartZYRW1(this.state.ret.Data.CHARTZYRW1);
+        this.chartZYRW2(this.state.ret.Data.CHARTZYRW2);
       },
     });
   };
   getBaseInfoData = (mineType) => {
     this.chart4(this.state.ret.Data.DATECOUNTS);
-    this.chartFXDJ1(this.state.ret.Data.CHART11);
+    this.chartFXDJ1(this.state.ret.Data.CHARTFXDJ1);
-    this.chartFXDJ2(this.state.ret.Data.CHART12);
+    this.chartFXDJ2(this.state.ret.Data.CHARTFXDJ2);
     this.chartSCDY(this.state.ret.Data.CHARTLIST[0]);
-    //this.chartFXLB3(this.state.ret.Data.CHARTLIST[1]);
     this.chartFXLB1(this.state.ret.Data.CHARTLIST[1]);
     this.chartCJ(this.state.ret.Data.CHARTLIST[3]);
     this.chartZRDW(this.state.ret.Data.CHARTLIST[2]);
     this.chartQY(this.state.ret.Data.CHARTLIST[4]);
-
+    this.chartZYRW1(this.state.ret.Data.CHARTZYRW1);
+    this.chartZYRW2(this.state.ret.Data.CHARTZYRW2);
   };
   chart4 = (data) => {
     let riskArr = [];
@@ -504,10 +512,6 @@ class BI014RiskPerformanceModel extends React.Component {
             },
           },
           grid: {
-            left: "3%",
-            right: "3%",
-            bottom: "12%",
-            top: "10%",
             containLabel: true,
           },
           xAxis: [
@@ -540,8 +544,18 @@ class BI014RiskPerformanceModel extends React.Component {
                   }
                 }
               },
-
+              barWidth: 30,
-              barWidth: 30
+              label: {
+                normal: {
+                  show: true,
+                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
+                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
+                  textStyle: {
+                    fontSize: 12, // 字体大小
+                    color: '#333', // 字体颜色
+                  },
+                },
+              },
             },
           ],
         },
@@ -558,12 +572,12 @@ class BI014RiskPerformanceModel extends React.Component {
         {
           tooltip: {
             trigger: "item",
-            formatter: "{b} : {c} ({d}%)",
+            formatter: "{b} : ({d}%)",
           },
           legend: {
+            left: "0%",
             bottom: "10%",
-            data: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
+            data: ["一级", "二级", "三级", "四级"],
-
           },
           series: [
             {
@@ -571,13 +585,31 @@ class BI014RiskPerformanceModel extends React.Component {
               radius: '55%',
               center: ["50%", "45%"],
               data: Data,
+              itemStyle: {
+                color: function (params) {
+                  switch (params.dataIndex) {
+                    case 0:
+                      return "#c02e30"; // 第一个柱子颜色
+                    case 1:
+                      return "#f7aa52"; // 第二个柱子颜色
+                    case 2:
+                      return "#fbe06a"; // 第三个柱子颜色
+                    case 3:
+                      return "#5185f3"; // 第四个柱子颜色
+                  }
+                }
+              },
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
-              }
+              },
+              label: {
+                show: true, // 开启标签显示
+                formatter: '{d}%', // 格式化标签文本，仅显示数值
+              },
             },
           ],
         },
@@ -705,105 +737,7 @@ class BI014RiskPerformanceModel extends React.Component {
       true
     );
   };
-  chartFXLB3 = (Data) => {
+
-    let chartFXLB3 = document.getElementById("chartFXLB3");
-    let myChart = echarts.init(chartFXLB3);
-    myChart.setOption(
-      {
-        // title: {
-        //   text: "风险类别(等级)",
-        //   left: "center",
-        // },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-          },
-        },
-        legend: {
-          left: "center",
-          align: "left",
-          bottom: "2%",
-          textStyle: {
-            color: "#000",
-          },
-          itemWidth: 10,
-          itemHeight: 10,
-          data: ["一级", "二级", "三级", "四级"],
-        },
-        grid: {
-          left: "3%",
-          right: "5%",
-          bottom: "12%",
-          top: "10%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          data: Data.NAME.slice(0, 10),
-          axisLabel: {
-            interval: 0,
-            rotate: 20,
-            formatter: function (value) {
-              return value
-            }
-          }
-        },
-        yAxis: {
-          type: "value",
-        },
-        series: [
-          {
-            name: "一级",
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideRight",
-            },
-            data: Data.LEVEL1.slice(0, 10),
-            itemStyle: { color: this.state.level1Color },
-            barWidth: 30
-          },
-          {
-            name: "二级",
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideRight",
-            },
-            data: Data.LEVEL2.slice(0, 10),
-            itemStyle: { color: this.state.level2Color },
-          },
-          {
-            name: "三级",
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideRight",
-            },
-            data: Data.LEVEL3.slice(0, 10),
-            itemStyle: { color: this.state.level3Color },
-          },
-          {
-            name: "四级",
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideRight",
-            },
-            data: Data.LEVEL4.slice(0, 10),
-            itemStyle: { color: this.state.level4Color },
-          },
-        ],
-      },
-      true
-    );
-  };
   chartFXLB1 = (Data) => {
     let chartFXLB1 = document.getElementById("chartFXLB1");
     let myChart = echarts.init(chartFXLB1);
@@ -1209,6 +1143,125 @@ class BI014RiskPerformanceModel extends React.Component {
       );
     }
   };
+  chartZYRW1 = (Data) => {
+    let chartZYRW1 = document.getElementById("chartZYRW1");
+    if (chartZYRW1) {
+      let myChart = echarts.init(chartZYRW1);
+      myChart.setOption(
+        {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+            },
+          },
+          grid: {
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: Data.NAME,
+            },
+          ],
+          yAxis: [
+            {
+              type: "value",
+            },
+          ],
+          series: [
+            {
+              name: "一级",
+              type: "bar",
+              data: Data.LEVEL1,
+              itemStyle: {
+                color: function (params) {
+                  switch (params.dataIndex) {
+                    case 0:
+                      return "#c02e30"; // 第一个柱子颜色
+                    case 1:
+                      return "#f7aa52"; // 第二个柱子颜色
+                    case 2:
+                      return "#fbe06a"; // 第三个柱子颜色
+                    case 3:
+                      return "#5185f3"; // 第四个柱子颜色
+                  }
+                }
+              },
+              barWidth: 30,
+              label: {
+                normal: {
+                  show: true,
+                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
+                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
+                  textStyle: {
+                    fontSize: 12, // 字体大小
+                    color: '#333', // 字体颜色
+                  },
+                },
+              },
+            },
+          ],
+        },
+        true
+      );
+    }
+  };
+  chartZYRW2 = (Data) => {
+    let that = this;
+    let chartZYRW2 = document.getElementById("chartZYRW2");
+    if (chartZYRW2) {
+      let myChart = echarts.init(chartZYRW2);
+      myChart.setOption(
+        {
+          tooltip: {
+            trigger: "item",
+            formatter: "{b} : ({d}%)",
+          },
+          legend: {
+            left: "0%",
+            bottom: "10%",
+            data: ["一般任务", "关键任务", "许可作业"],
+          },
+          series: [
+            {
+              type: "pie",
+              radius: '55%',
+              center: ["50%", "45%"],
+              data: Data,
+              itemStyle: {
+                color: function (params) {
+                  switch (params.dataIndex) {
+                    case 0:
+                      return "#c02e30"; // 第一个柱子颜色
+                    case 1:
+                      return "#f7aa52"; // 第二个柱子颜色
+                    case 2:
+                      return "#fbe06a"; // 第三个柱子颜色
+                    case 3:
+                      return "#5185f3"; // 第四个柱子颜色
+                  }
+                }
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+              label: {
+                show: true, // 开启标签显示
+                formatter: '{d}%', // 格式化标签文本，仅显示数值
+              },
+            },
+          ],
+        },
+        true
+      );
+    }
+  };
   subtractRandomNotLessThanSelf = (obj) => {
     function getRandomNotLessThan(num) {
       return Math.floor(Math.random() * num);
@@ -2006,10 +2059,10 @@ class BI014RiskPerformanceModel extends React.Component {
             <Row gutter={12} style={{ marginTop: "5px" }}>
               <Col span={12}>
                 <div id="chart21" style={{ width: "500px", height: "300px", flex: 1 }}></div>
-                <div id="chart22" style={{ width: "500px", height: "300px", flex: 1 }}></div>
+                <div id="chart23" style={{ width: "500px", height: "300px", flex: 1 }}></div>
               </Col>
               <Col span={12}>
-                <div id="chart23" style={{ width: "500px", height: "300px", flex: 1 }}></div>
+                <div id="chart22" style={{ width: "500px", height: "300px", flex: 1 }}></div>
                 <div id="chart24" style={{ width: "500px", height: "300px", flex: 1 }}></div>
               </Col>
             </Row>
@@ -2144,23 +2197,16 @@ class BI014RiskPerformanceModel extends React.Component {
             </div>
           </Col>
           <Col span={1}></Col>
-          {/* <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
+          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
             <div className="home-always-title">
               <div className="home-always-left">
                 <div className="home-always-badge"></div>
-                <div className="home-always-name">风险类别</div>
+                <div className="home-always-name">作业任务</div>
-              </div>
-              <div type="primary" onClick={() => this.showDetailModal("风险类别1")}>
-                <IconFont
-                  type="icon-24gl-expand2"
-                  className="home-always-icon"
-                ></IconFont>
               </div>
             </div>
-            <div className="risk-chart" style={{ height: "330px" }}>
+            <div id="chartZYRW1" style={{ width: "45%", height: "330px", float: "left" }}></div>
-              <div id="chartFXLB3" style={{ width: "100%", flex: 1 }}></div>
+            <div id="chartZYRW2" style={{ width: "45%", height: "330px", float: "left" }}></div>
-            </div>
+          </Col>
-          </Col> */}
           <Col span={1}></Col>
         </Row>
         <br />