From c3eeecf1204a81879e5f7cdf2c6d9450de40d6a9 Mon Sep 17 00:00:00 2001
From: A <1445840182@qq.com>
Date: Fri, 8 Jul 2022 13:36:39 +0800
Subject: [PATCH] =?UTF-8?q?=E2=80=9C=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E5=9B=A2=E9=98=9F=E9=A1=B5=E9=9D=A2=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             |  59 ++++++++++
 package.json                  |   1 +
 src/components/echartsPie.vue | 141 ++++++++++++++++++++++++
 src/views/ProjectGroup.vue    | 199 +++++++++++++++++++++++++++++++++-
 4 files changed, 397 insertions(+), 3 deletions(-)
 create mode 100644 src/components/echartsPie.vue

diff --git a/package-lock.json b/package-lock.json
index 8a73af5..69b403b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "axios": "^0.24.0",
         "blueimp-md5": "^2.19.0",
         "core-js": "^3.6.5",
+        "echarts": "^5.3.3",
         "element-plus": "^2.2.6",
         "moment": "^2.29.1",
         "vue": "^3.0.0",
@@ -5956,6 +5957,20 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/download/ee-first-1.1.1.tgz",
@@ -15701,6 +15716,19 @@
       "resolved": "https://registry.npmmirror.com/yallist/download/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -20407,6 +20435,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/download/ee-first-1.1.1.tgz",
@@ -28457,6 +28501,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 6a3ba95..668e2f3 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "axios": "^0.24.0",
     "blueimp-md5": "^2.19.0",
     "core-js": "^3.6.5",
+    "echarts": "^5.3.3",
     "element-plus": "^2.2.6",
     "moment": "^2.29.1",
     "vue": "^3.0.0",
diff --git a/src/components/echartsPie.vue b/src/components/echartsPie.vue
new file mode 100644
index 0000000..d57357f
--- /dev/null
+++ b/src/components/echartsPie.vue
@@ -0,0 +1,141 @@
+<template>
+  <div id="echartsPie" ref="echartsPie">
+    <div :id="id" class="echarts_box" style="width: 450px;height: 100%;"></div>
+<!--    <div class="list_box">-->
+<!--      <p>总人数：{{ getTotalNumber }}</p>-->
+<!--      <p v-for="(item,index) in dataList" :key="index">{{ item.name }}：{{ item.value }}人</p>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "echartsPie",
+  props: {
+    // 标识，同页面不能相同
+    id: {
+      type: String
+    },
+    // 是否要上角图例
+    isLegend: {
+      type: Boolean,
+      default: false
+    },
+    // 是否为满圆
+    isRadius: {
+      type: Boolean,
+      default: false
+    },
+    // 数据列表
+    dataList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  computed: {
+    getTotalNumber() {
+      let total = this.dataList.reduce((prev, item) => {
+        prev += item.value
+        return prev
+      }, 0)
+      return total;
+    }
+  },
+  methods: {
+    // 获取配置
+    getOption() {
+      // 指定图表的配置项和数据
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '统计',
+            type: 'pie',
+            center: ['45%', '55%'],
+            // radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '40',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.dataList
+          }
+        ]};
+      if (this.isLegend) {
+        option.legend = {
+          type: 'scroll',
+          orient: 'vertical',
+          right: 10,
+          top: 20,
+          bottom: 20,
+        }
+      }
+      option.series[0].radius = this.isRadius?'80%':['50%', '80%'];
+      return option;
+    },
+    // 初始化图表
+    initEcharts() {
+      this.$nextTick(()=>{
+        this.myChart = echarts.init(document.getElementById(this.id));
+        // 使用刚指定的配置项和数据显示图表。
+        this.myChart.setOption(this.getOption());
+      });
+      let that = this;
+      window.addEventListener('resize', function () {
+        console.log("addEventListener");
+        // 让我们的图表调用 resize这个方法
+        that.$nextTick(()=>{
+          that.myChart.resize();
+        });
+      });
+    },
+    // 更新图表
+    updateEcharts() {
+      this.myChart.setOption(this.getOption(),true);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#echartsPie {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #fff;
+  .echarts_box {
+    flex-shrink: 0;
+  }
+  .list_box {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: scroll;
+    padding: 50px 50px;
+    box-sizing:border-box;
+  }
+
+}
+</style>
diff --git a/src/views/ProjectGroup.vue b/src/views/ProjectGroup.vue
index 65e48c3..e035622 100644
--- a/src/views/ProjectGroup.vue
+++ b/src/views/ProjectGroup.vue
@@ -1,13 +1,206 @@
 <template>
-<div>项目团队</div>
+  <view style="display: flex;height: 100%;justify-content: space-around;">
+
+    <div class="left" ref="leftRef" style="width: 50%;height: 100%;">
+      <div style="margin: 0 0 26px 0;display: flex;flex-direction: row;justify-content: space-between" ref="left_title_Ref">
+        <p style="text-align:center; 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目团队</p>
+        <el-button style="" type="primary" >新增成员</el-button>
+      </div>
+      <el-table
+          ref="tableRef"
+          class="projectTable"
+          :height="tableHeight"
+          :data="tableData">
+        <el-table-column prop="staffFullname" label="姓名" min-width="25%"> </el-table-column>
+        <el-table-column prop="projectStaffPosition" label="职位" min-width="35%">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" min-width="40%">
+          <template #default="scope">
+            <span>
+              <el-button
+                  @click.prevent="deleteRow(scope.$index, tableData)"
+                  type="text"
+                  size="midium"
+              >
+              修改
+            </el-button>
+            <el-button
+                @click.prevent="deleteRow(scope.$index, tableData)"
+                type="text"
+                size="midium"
+            >
+              交接
+            </el-button>
+            <el-button
+                @click.prevent="deleteRow(scope.$index, tableData)"
+                type="text"
+                size="midium"
+            >
+              离队
+            </el-button>
+
+            </span>
+
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div ref="left_bottom_Ref">
+        <el-pagination
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            v-model:currentPage="currentPage"
+            :page-sizes="[5, 10, 15, 20]"
+            v-model:page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            style="padding: 15px 15px 15px 15px;box-sizing:border-box;background: #fff;display: flex;justify-content: flex-end;">
+        </el-pagination>
+      </div>
+
+    </div>
+    <div class="right" style="width: 45%;display: flex;flex-direction: column;height: 100%;">
+      <div style="display: flex;flex-direction: column;height: 100%">
+        <p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 0 0 30px 0;flex-shrink: 0;">岗位统计</p>
+        <div style="flex: 1;height: 100%">
+          <EchartsPie :id="'pie_post'" ref="pie_post" :isLegend="true" :dataList="stationList"/>
+        </div>
+        <p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 15px 0 30px 0;flex-shrink: 0;">团队工作情况统计</p>
+        <div style="flex: 1;height: 100%">
+          <EchartsPie :id="'pie_team'" :isRadius="true" />
+        </div>
+      </div>
+    </div>
+  </view>
 </template>
 
+<script setup>
+// table元素
+import {nextTick, onMounted, ref} from "vue";
+
+const tableRef = ref(null);
+
+// 总高度
+const leftRef = ref(null);
+const left_title_Ref = ref(null);
+const left_bottom_Ref = ref(null);
+// table高度
+const tableHeight = ref();
+
+onMounted(() => {
+  // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离110
+  nextTick(()=>{
+    tableHeight.value = leftRef.value.clientHeight - left_title_Ref.value.clientHeight - 26 - left_bottom_Ref.value.clientHeight
+  });
+  // tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 100;
+  window.onresize = () => {
+    tableHeight.value = leftRef.value.clientHeight - left_title_Ref.value.clientHeight - 26 - left_bottom_Ref.value.clientHeight
+    // tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 100;
+    // echartsHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 100;
+  };
+});
+
+</script>
+
 <script>
+import EchartsPie from "@/components/echartsPie";
+import request from "../utils/request";
+
 export default {
-  name: "ProjectGroup"
+  methods: {
+    getStationList() {
+      let projectId = this.$route.params.projectId
+      request({
+        url: `project/${projectId}/group/stats`,
+        method: 'get',
+      }).then(response => {
+        if (response.data.code === 200) {
+          console.log(response.data.data);
+          let data = response.data.data;
+          let array = [];
+          for (let key in data) {
+            array.push({value: data[key], name: key});
+          }
+          this.stationList = array;
+          this.$nextTick(()=>{
+            this.$refs.pie_post.updateEcharts();
+          });
+          console.log(array);
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+    },
+    deleteRow(index, rows) {
+      rows.splice(index, 1)
+    },
+    // 选择一页显示多少条数据
+    handleSizeChange(val) {
+
+    },
+    // 选择当前的是第几页
+    handleCurrentChange(val) {
+
+    },
+  },
+  mounted() {
+    this.getStationList();
+  },
+  components: {EchartsPie},
+  data() {
+    return {
+      // 岗位列表
+      stationList: [],
+      total: 5,
+      currentPage: 1,
+      pageSize: 10,
+      tableData: [
+        {
+          staffFullname: '王小虎',
+          projectStaffPosition: '项目经理',
+        },
+        {
+          staffFullname: '王小虎',
+          projectStaffPosition: '研发人员',
+        },
+        {
+          staffFullname: '王小明',
+          projectStaffPosition: '研发人员',
+        },
+        {
+          staffFullname: '王小明',
+          projectStaffPosition: '研发人员',
+        },
+        {
+          staffFullname: '王小明',
+          projectStaffPosition: '研发人员',
+        },
+        {
+          staffFullname: '王小明',
+          projectStaffPosition: '研发人员',
+        },
+        {
+          staffFullname: '王小明',
+          projectStaffPosition: '研发人员',
+        },
+        {
+          staffFullname: '王小明',
+          projectStaffPosition: '研发人员',
+        },
+        {
+          staffFullname: '王小虎',
+          projectStaffPosition: '研发人员',
+        },
+        {
+          staffFullname: '王小明',
+          projectStaffPosition: '研发人员',
+        },
+      ],
+    }
+  },
 }
 </script>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>