提交分组耗用进度图表

fhKeeper/formulahousekeeper/timesheet/src/components/echartsEchar.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :id="uuid" :style="style"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    height: {
+      type: String,
+      default: "100%",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    options: {
+      type: Object,
+      default: null,
+    },
+  },
+  components: {},
+  data() {
+    return {
+      uuid: null,
+      myChart: null,
+    };
+  },
+  computed: {
+    style() {
+      return {
+        height: this.height,
+        width: this.width,
+      };
+    },
+  },
+  watch: {
+    options() {
+      if (this.myChart) {
+        this.myChart.setOption(this.options);
+      }
+    },
+  },
+  created() {
+    this.uuid = this.idGen();
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById(this.uuid));
+    this.myChart.setOption(this.options);
+  },
+  methods: {
+    idGen() {
+      return new Date().getTime();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

fhKeeper/formulahousekeeper/timesheet/src/views/corpreport/echartsData.js

@@ -0,0 +1,87 @@
+export function getGroupConsumption(nameList = [], actualPlan = [], actualSupplement = [], summary = [], realHourList = []) {
+  let num1 = actualPlan.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
+  let num2 = actualSupplement.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
+  let num3 = realHourList.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
+  return {
+    title: {
+      text: `求和项:合计工时：${num3}(h) 实际工时: ${num1}(h)  实际增补: ${num2}(h)`,
+      top: 20
+    },
+    tooltip: {},
+    toolbox: {},
+    grid: {
+      top: 80,
+      left: 80,
+      right: 80,
+      bottom: 120,
+    },
+    legend: {
+      data: ["实际计划", "实际增补", "汇总"],
+      top: 20,
+      right: 100
+    },
+    xAxis: [
+      {
+        data: nameList,
+        axisPointer: {
+          type: "shadow",
+        },
+        axisLabel: {
+          rotate: 45,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        axisLabel: {
+          formatter: "{value} (h)",
+        },
+      },
+      {
+        type: "value",
+        axisLabel: {
+          formatter: "{value} (h)",
+        },
+      },
+    ],
+    series: [
+      {
+        name: "实际计划",
+        type: "bar",
+        stack: "one",
+        barWidth: 40,
+        itemStyle: {
+          normal: {
+            color: "#5B9BD5",
+          },
+        },
+        data: actualPlan,
+      },
+      {
+        name: "实际增补",
+        type: "bar",
+        stack: "one",
+        barWidth: 40,
+        itemStyle: {
+          normal: {
+            color: "#ED7D31",
+          },
+        },
+        data: actualSupplement,
+      },
+      {
+        name: "汇总",
+        type: "line",
+        yAxisIndex: 1,
+        lineStyle: {
+          normal: {
+            width: 3,
+            color: "#5B9BD5",
+          },
+        },
+        data: summary,
+      },
+    ],
+  }
+}

fhKeeper/formulahousekeeper/timesheet/src/views/corpreport/list.vue

@@ -119,7 +119,7 @@
         </template>
 
         <template v-if="ins == 24">
-          <el-radio-group v-model="tabPosition">
+          <el-radio-group v-model="tabPosition" size="small" @input="getGroupConsumptionData">
             <el-radio-button label="0">表格</el-radio-button>
             <el-radio-button label="1">柱状图</el-radio-button>
           </el-radio-group>
@@ -139,6 +139,10 @@
           </el-option>
         </el-select>
 
+        <el-select v-if="ins == 24 && tabPosition == 1" v-model="groupConsumptionName" placeholder="'请选择任务分组'" clearable filterable size="small" @change="getList(true)" multiple collapse-tags style="margin-left:10px; width: 250px">
+          <el-option v-for="(item, index) in groupConsumptionList" :key="item.id" :label="item" :value="item"> </el-option>
+        </el-select>
+
         <!-- 任务分组 -->
         <el-select v-if="ins == 1 && user.companyId == '3092'" v-model="projectGroupId" :placeholder="$t('defaultText.pleaseSelectaTaskGroup')" clearable filterable size="small" @change="getList(true)" style="margin-left:10px">
           <el-option v-for="(item) in projectTaskgroupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
@@ -1168,7 +1172,7 @@
             </el-table>
 
             <!-- 分组耗用进度表 -->
-            <el-table  v-if="ins == 24 && this.tabPosition==0" :key="24" border :data="isbeCustomReport.consumptionSchedule" highlight-current-row v-loading="listLoading" :height="(+tableHeight - 0) - 1" style="width: 100%;" :span-method="objectSpanMethod">
+            <el-table  v-if="ins == 24 && tabPosition==0" :key="24" border :data="isbeCustomReport.consumptionSchedule" highlight-current-row v-loading="listLoading" :height="(+tableHeight - 0) - 1" style="width: 100%;" :span-method="objectSpanMethod">
               <el-table-column align="center" prop="projectName" :label="$t('headerTop.projectName')" min-width="200"></el-table-column>
               <el-table-column align="center" prop="department_name" :label="$t('fuZeBuMen')" min-width="150">
                 <template slot-scope="scope">
@@ -1195,6 +1199,11 @@
               <el-table-column align="center" prop="process" :label="$t('gongShiHaoYongShuai')" width="150"></el-table-column>
             </el-table>
 
+            <!-- 分组耗用进度图表 -->
+            <div v-if="ins == 24 && tabPosition!=0" class="useASchedule" :style="`height:${tableHeight + 50}px`" v-loading="groupConsumptionLoading">
+              <EchartsEchar :options="groupConsumptionOption"></EchartsEchar>
+            </div>
+
             <!-- 项目耗用进度表 -->
             <el-table  v-if="ins == 25" :key="25" border :data="isbeCustomReport.consumptionScheduleTwo" highlight-current-row v-loading="listLoading" :height="(+tableHeight) - 1" style="width: 100%;" >
               <el-table-column align="center" prop="projectName" :label="$t('headerTop.projectName')" min-width="220"></el-table-column>
@@ -1321,7 +1330,7 @@
               <el-table-column align="center" prop="onTimePercent" :label="$t('anShiWanChengShuai')" min-width="150"></el-table-column>
             </el-table>
         <!--工具条-->
-        <el-col :span="24" class="toolbar" v-if="ins != 6 && ins != 20 && ins != 21 && this.tabPosition==0">
+        <el-col :span="24" class="toolbar" v-if="ins != 6 && ins != 20 && ins != 21 && tabPosition==0">
           <el-pagination
                 v-if="ins == 12"
                 @size-change="groupSizeChange"
@@ -1637,12 +1646,15 @@
 import selectCat from "@/components/select.vue"
 // 引入自定义级联组件
 import vueCascader from "@/components/cascader.vue"
+import EchartsEchar from "@/components/echartsEchar.vue"
+import { getGroupConsumption } from "./echartsData"
 
 export default {
   name: "expense",
   components: {
     selectCat,
-    vueCascader
+    vueCascader,
+    EchartsEchar
   },
   props: {},
   data() {
@@ -1868,7 +1880,14 @@ export default {
       writeOffOperationVisable: false,
       writeOffOperationTransitionData: {},
       writeOffStatus: '',
-      tabPosition:"0"
+      tabPosition:"0",
+
+      // 分组耗用进度图表
+      groupConsumptionOption: {},
+      groupConsumptionLoading: false,
+      groupConsumptionList: ['工程部现场安装施工', '工程部配合调试', '生产部电气', '生产部车间', '研发部BIM设计', '研发部工艺设计', '研发部工艺调试验收', '研发部电气设计', '研发部电气调试验收', '研发部结构设计'],
+      groupConsumptionName: [],
+      groupConsumptionTimer: null
     };
   },
   computed: {},
@@ -2326,7 +2345,11 @@ export default {
                   this.getProjectSchedule()
                 }
                 if(this.ins == 24) {
-                  this.getConsumptionSchedule()
+                  if(this.tabPosition == 1) {
+                    this.getGroupConsumptionData()
+                  } else {
+                    this.getConsumptionSchedule()
+                  }
                 }
                 if(this.ins == 25) {
                   this.getConsumptionScheduleTwo()
@@ -3696,7 +3719,11 @@ export default {
         this.getProjectSchedule()
       }
       if(this.ins == 24) {
-        this.getConsumptionSchedule()
+        if(this.tabPosition == 1) {
+          this.getGroupConsumptionData()
+        } else {
+          this.getConsumptionSchedule()
+        }
       }
       if(this.ins == 25) {
         this.page=1
@@ -4259,6 +4286,32 @@ export default {
         this.writeOffOperationVisable = false
       }
       this.getList(6)
+    },
+
+    getGroupConsumptionData() {
+      if(this.groupConsumptionTimer) {
+        clearTimeout(this.groupConsumptionTimer)
+      }
+      this.groupConsumptionTimer = setTimeout(async () => {
+        if(this.tabPosition == 0) {
+          this.proJuctId = ''
+          return
+        }
+        this.groupConsumptionLoading = true
+        let { data } = await this.postData('/project/groupExpendProcessListForChart', {
+          startDate: this.rangeDatas[0],
+          endDate: this.rangeDatas[1],
+          projectIds: this.proJuctId,
+          groupNames: this.groupConsumptionName.join(',')
+        })
+        this.groupConsumptionLoading = false
+        let nameList = data.map(item => (item.groupName || ''))
+        let realHourList = data.map(item => (item.realHour || 0))
+        let actualPlan = data.map(item => (item.planHour || 0))
+        let actualSupplement = data.map(item => (item.afterSetPlanHour || 0))
+        let summary = data.map(item => (item.planHour || 0) + (item.afterSetPlanHour || 0))
+        this.groupConsumptionOption = getGroupConsumption(nameList, actualPlan, actualSupplement, summary, realHourList)
+      }, 500)
     }
   },
 };
@@ -4488,5 +4541,7 @@ export default {
 .warntext{
   color:red;
 }
-
+.useASchedule {
+  width: 100%;
+}
 </style>