20230321

src/api/personnel.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+import axios from 'axios'
+import qs from 'qs'
+if (process.env.NODE_ENV === 'development') {
+    axios.defaults.baseURL = '/'
+} else if (process.env.NODE_ENV === 'production') {
+    axios.defaults.baseURL = '/'
+}
+//设置公共请求头
+let access_token = JSON.parse(sessionStorage.getItem("token"))
+axios.defaults.headers.common['Blade-Auth'] =  access_token;
+// //获取token登录接口
+// export const getToken = (data) => {
+//     // axios.defaults.headers.common['Authorization'] = `Basic c2FiZXI6c2FiZXJfc2VjcmV0`;
+//     // axios.defaults.headers.common['Tenant-Id'] = `748495`
+//     return axios.post('api/blade-auth/oauth/token'+'?grant_type='+data.grant_type+'&scope='+data.scope
+//     +'&tenantId='+data.tenantId+'&username='+data.username+'&password='+data.password+'&type='+data.type,
+//     data,
+//      {headers: {'Authorization':'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
+//      'Tenant-Id': '748495','Content-Type': 'application/json;charset=UTF-8'}}
+//      )
+// };
+//人员统计
+export const getUserGroup = (params) => {
+    return axios.get('api/ems-third-party-service/user/group',
+    {params},
+     )
+};
+

src/components/common/pieDateChart.vue

@@ -2,22 +2,22 @@
   <div style="width:100%;height:100%;position: relative;">
     <div class="allTotle">
       <div>项目总人数</div>
-      <span>100</span>
+      <span>{{totalPer}}</span>
       <span>人</span>
     </div>
     <div ref="chart" style="width:100%;height:100%;"></div>
     <div class="jsBox">
-      <div class="bogJs">
+      <div class="bogJs" v-for="(item, i) in pieData" :key="i">
         <div class="jsChild">
           <span style="background: #00B3FF;"></span>
-          <span>项目管理组</span>
+          <span>{{item.groupName}}</span>
         </div>
         <div class="js2Child">
-          <span>85</span>
+          <span>{{item.number}}</span>
           <span>人</span>
         </div>
       </div>
-      <div class="bogJs">
+      <!-- <div class="bogJs">
         <div class="jsChild">
           <span style="background: #F1E453;"></span>
           <span>项目管理组</span>
@@ -36,22 +36,31 @@
           <span>85</span>
           <span>人</span>
         </div>
-      </div>
+      </div> -->
     </div>
 
   </div>
 </template>
 <script>
 export default {
-  props: {},
+  props: {
+      pieData:{
+        type:Array,
+        default: []
+      }
+  },
 
   components: {},
 
   data() {
-    return {};
+    return {
+        totalPer:'',
+        // pieData:[],
+        color:['#00B3FF','#F1E453','#F85B60','#00A572', '#008AA4', '#7968D9', '#C7A73E'],
+    };
   },
   mounted() {
-    this.initCharts();
+    // this.initCharts();
   },
   watch: {
     // 监听父组件中的数据变化，重新触发Echarts
@@ -60,11 +69,38 @@ export default {
       handler() {
         this.resetOption();
       }
-    }
+    },
+    pieData: {
+        deep: true,
+        handler(newVal) {
+          console.log(newVal,'==============');
+           this.initCharts(newVal)
+          this.changeNewVal(newVal)
+          
+        }
+      }
   },
 
   methods: {
-    initCharts() {
+    //获取人员数据
+    changeNewVal(newVal){
+        console.log("newVal",newVal)
+        // var pieDataN = this.pieData.map((item,index) => {
+                      
+        //     })
+            var pieDataN = []
+              this.color.forEach((items,indexs) => {
+               pieDataN = this.pieData.map((item,index) => {
+                  if(index==indexs){
+                   return  item.color = items
+                }     
+            })
+               
+             }) 
+            console.log("this.pieDataN",pieDataN)
+    },
+    initCharts(value) {
+        console.log(value,'============');
       let myChart = this.$echarts.init(this.$refs.chart);
       var placeHolderStyle = {
         normal: {

src/views/login.vue

@@ -1,7 +1,8 @@
 <template>
   <Resize>
     <div style="width:100%;height:100%;position: relative;">
-      <div class="bgPicture" :style="{ height: vdaH }">
+      <!-- <div class="bgPicture" :style="{ height: vdaH }"> -->
+        <div class="bgPicture" style="height:100%">
         <!-- 标题 -->
         <div class="title"></div>
         <div class="titTop">

src/views/modelScreenComponents.vue

@@ -573,6 +573,10 @@ export default {
     getProjectInfo().then((res)=>{
       this.introduction = res.data.data[0].introduction
       this.projectId = res.data.data[0].id
+       sessionStorage.setItem(
+                            "projectId",
+                            res.data.data[0].id
+                          );
       //人员监控信息
         getUserMonitorInfo({
           projectId: this.projectId

src/views/personnelComponents.vue

@@ -1,25 +1,5 @@
 <template>
-    <!-- <Resize> -->
         <div >
-            <!-- <div class="bgPicture" :style="{ height: vdaH }">
-                <div class="title"></div>
-                <div class="titTop">
-                    <div class="titLeft">
-                        <span @click="goBack(1)">首页</span>
-                        <span>/</span>
-                        <span @click="goBack(2)">人员管理</span>
-                    </div>
-                    <div class="titRight">
-                        <span>2023年2月17日 星期四 14:26</span>
-                        <span></span>
-                        <span>&nbsp;&nbsp;天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-                        <span>晴 12℃</span>
-                    </div>
-                </div>
-            </div>
-            <div @click="disBox" class="screenBox"
-                :style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
-            </div>            -->
              <div @click="disBox" class="screenBox"
                 :style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
             </div>   
@@ -31,7 +11,7 @@
                     <span></span>
                 </div>
                 <div class="concet">
-                    <pieDateChart style="width: 100%; height: 100%" />
+                    <pieDateChart style="width: 100%; height: 100%" :pieData='pieData'/>
                 </div>
             </div>
             <!-- 左侧模块2 -->
@@ -227,7 +207,7 @@ import RadarChart from "@/components/common/RadarChart";
 import pieChart from "@/components/common/pieChart";
 import pieDateChart from "@/components/common/pieDateChart";
 import Resize from '../utils/Resize.vue'
-
+import {getUserGroup} from "@/api/personnel";
 export default {
     name: "report",
     components: {
@@ -371,7 +351,8 @@ export default {
             numberList: [5, 5],
             innerHeight: null,
             dialogShow: false,
-            topicSends:[]
+            topicSends:[],
+            pieData:[],
         };
     },
     created() {
@@ -381,10 +362,30 @@ export default {
         console.log("this.iconPicList",this.iconPicList)
 
     },
-    mounted(){
+     mounted() {
+         this.getUser()
         this.createMqtt()
+        // this.switchDiv();
+        // window.onresize = () => {
+        //         return (() => {
+        //             let h = document.documentElement.clientHeight || document.body.clientHeight;
+        //           this.vdaH = h - 0 + "px";
+        //         })()
+        //     }
     },
     methods: {
+        //获取人员统计
+        getUser(){
+            let projectId = sessionStorage.getItem("projectId")
+            console.log("projectId",projectId)
+             getUserGroup({
+          projectId:projectId
+        }).then((res)=>{
+            console.log("res.data.data",res.data.data)
+        //   this.projectUser = res.data.data
+        this.pieData= res.data.data
+        })
+        },
          createMqtt() {
            
             this.topicSends = ['webdata'];
@@ -457,15 +458,7 @@ export default {
             }
         }
     },
-    mounted() {
+   
-        this.switchDiv();
-        window.onresize = () => {
-                return (() => {
-                    let h = document.documentElement.clientHeight || document.body.clientHeight;
-                  this.vdaH = h - 0 + "px";
-                })()
-            }
-    }
 };
 </script>