湖里大屏(劳务管理):班组统计更改以及接口对接

src/views/projectAdmin/jlw/laborManage/rightBottom.vue

@@ -3,20 +3,25 @@
 <!-- 证书统计 -->
   <div class="containerBox">
     <div class="title">{{ title }}</div>
-    <div class="persontype">
+    <!-- <div class="persontype">
         <span>证件总数</span>
         <p class="person">679</p>
-    </div>
+    </div> -->
     <div class="content">
-      <JProgressChart :seriesData="seriesData" :yData="yData" />
+      <!-- <JProgressChart :seriesData="seriesData" :yData="yData" /> -->
+      <div class="groupChart" ref="groupChart"></div>
     </div>
   </div>
 </template>
 
 <script>
-import JProgressChart from '../jChart/bar/JProgressChart.vue'
+// import JProgressChart from '../jChart/bar/JProgressChart.vue'
+import {
+  selectProjectTeamWorkTotalListApi,
+} from "@/assets/js/api/dataBoard.js";
+import echarts from 'echarts4';
 export default {
-  components: { JProgressChart },
+  // components: { JProgressChart },
   props: {
     title: {
       type: String,
@@ -34,6 +39,167 @@ export default {
       ].reverse(),
       seriesData: [432,234,322,259,402]
     }
+  },
+  mounted(){
+    this.getTotalList()
+  },
+  methods:{
+    // 查询班组信息
+    getTotalList() {
+      selectProjectTeamWorkTotalListApi({
+        projectSn: this.$store.state.projectSn,
+      }).then((res) => {
+        console.log('查询班组信息班组统计',res)
+        var Data = res.result;
+        var xData = [],
+          yData1 = [],
+          yData2 = [];
+        Data.forEach((element) => {
+          xData.push(element.teamName);
+          yData1.push(element.attendancePersonNum);
+          yData2.push(element.totalPersonNum);
+        });
+        console.log('11111',xData)
+        this.createGroupChart(xData, yData1, yData2, this.$refs.groupChart,this.$t('message.dataBoard.attendanceOrTotal') /* ["出勤人数","总人数"] */);
+      });
+    },
+    //班组图表
+    createGroupChart(xData, yData1, yData2, el, legendData) {
+      console.log(yData2);
+      let monitor = echarts.init(el);
+      //       var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
+      // var yMax = 500;
+      // var dataShadow = [];
+
+      // for (var i = 0; i < data.length; i++) {
+      //     dataShadow.push(yMax);
+      // }
+      var option = {
+        legend: {
+          show: true,
+          align: "left",
+          top: 5,
+          left: 0,
+          // itemWidth: 13,
+          // itemHeight: 5,
+          textStyle: {
+            color: "#9fa2ad",
+          },
+        },
+        grid: {
+          left: "10",
+          right: "40",
+          bottom: "10",
+          top: "30",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: function () {
+              return "";
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "category",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          data: xData,
+          axisLabel: {
+            textStyle: {
+              // fontSize: 14,
+              color: "white",
+            },
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        series: [
+          {
+            name: "出勤人数",
+            type: "bar",
+            barWidth: 20,
+            data: yData1,
+            barGap: "-100%",
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 1, color: "#4ADEE2" },
+              ]),
+              // barBorderRadius: 3,
+
+            },
+            // label: {
+            //     show: true,
+            //     position: "right",
+            //     color: "white",
+            //     textStyle: {
+            //       fontSize: 15,
+            //     },
+            //   },
+          },
+          {
+            // For shadow
+            name: "总人数",
+            type: "bar",
+            z:"-1",
+            itemStyle: {
+              // color: ["#5CE2F6", "#5181F6"],
+              color: "#5181F6",
+              // barBorderRadius: 3,
+            },
+            barCategoryGap: "40%",
+            data: yData2,
+            animation: false,
+            barWidth: 20,
+            label: {
+              show: true,
+              position: "right",
+              color: "white",
+              formatter:function(params){ //标签内容
+                console.log(params);
+                for (let i = 0; i < yData1.length; i++) {
+                  if (params.data == yData2[i]){
+                    return '{color1|' + yData1[i] + '}/{color2|' + yData2[i] + '}'
+                  }
+                }
+              },
+              rich: {
+                color1: {
+                  color: '#4ADEE2',
+                  fontSize: 16,
+                },
+                color2: {
+                  color: '#FFFFFF',
+                  fontSize: 16,
+                }
+              },
+              textStyle: {
+                fontSize: 16,
+              },
+            },
+          },
+        ],
+      };
+      monitor.setOption(option);
+    },
   }
 }
 </script>
@@ -71,6 +237,10 @@ export default {
   
   .content {
     height: calc(100% - 30px);
+    .groupChart{
+      width:100%;
+      height:100%;
+    }
   }
 }
 </style>