Merge branch 'master' of https://git.lgzn.space/chengdandan/qiuwang

config/dev.env.js

@@ -4,5 +4,5 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"/proxyApi"'
+  BASE_API: '"/api"'
 })

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,23 @@
   <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 :style="item.color"></span>
-          <span>项目管理组</span>
+          <!-- <span :background="item.color"></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,19 +37,28 @@
           <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:0,
+        pieDataNew:[],
+        color:['background-color:#00B3FF','background-color:#F1E453','background-color:#F85B60','background-color:#00A572', 'background-color:#008AA4', 'background-color:#7968D9', 'background-color:#C7A73E'],
+    };
   },
   mounted() {
     this.initCharts();
@@ -60,133 +70,356 @@ export default {
       handler() {
         this.resetOption();
       }
-    }
+    },
+    pieData: {
+        deep: true,
+        handler(newVal) {
+          console.log(newVal,'==============');
+        //    this.initCharts(newVal)
+          this.changeNewVal(newVal)
+          
+        }
+      }
   },
 
   methods: {
+    //获取人员数据
+    changeNewVal(newVal){
+        console.log("newVal",newVal)
+        this.pieDataNew = newVal
+        // var pieDataN = []
+            newVal.map((item,index) => {
+                this.totalPer+=item.number
+                console.log("this.totalPer",this.totalPer)
+             this.color.forEach((items,indexs) => {
+                if(index==indexs){
+                   return  item.color = items
+                }
+             })            
+            })
+    },
+
     initCharts() {
       let myChart = this.$echarts.init(this.$refs.chart);
-      var placeHolderStyle = {
+    //   var placeHolderStyle = {
-        normal: {
+    //     normal: {
-          label: {
+    //       label: {
-            show: false,
+    //         show: false,
-            position: "center"
+    //         position: "center"
-          },
+    //       },
-          labelLine: {
+    //       labelLine: {
-            show: false
+    //         show: false
-          },
+    //       },
-          color: "#104841a3",
+    //       color: "#104841a3",
-          borderWidth: 0
+    //       borderWidth: 0
-        },
+    //     },
-        emphasis: {
+    //     emphasis: {
-          color: "#104841a3",
+    //       color: "#104841a3",
-          borderColor: "#00b3ff",
+    //       borderColor: "#00b3ff",
-          borderWidth: 0
+    //       borderWidth: 0
-        }
+    //     }
-      };
+    //   };
-      // 绘制图表
+    //   // 绘制图表
-      myChart.setOption({
+    //   myChart.setOption({
-        series: [
+    //     series: [
-          {
+    //       {
-            name: '值',
+    //         name: '值',
-            type: 'pie',
+    //         type: 'pie',
-            clockWise: true,
+    //         clockWise: true,
-            hoverAnimation: false,
+    //         hoverAnimation: false,
-            radius: ['92%', '97%'],
+    //         radius: ['92%', '97%'],
-            center: ['50%', '50%'],
+    //         center: ['50%', '50%'],
-            itemStyle: {
+    //         itemStyle: {
-              normal: {
+    //           normal: {
-                label: {
+    //             label: {
-                  show: false
+    //               show: false
-                },
+    //             },
-                labelLine: {
+    //             labelLine: {
-                  show: false,
+    //               show: false,
-                  length: 100,
+    //               length: 100,
-                  smooth: 0.5
+    //               smooth: 0.5
-                },
+    //             },
-                borderWidth: 5,
+    //             borderWidth: 5,
-                shadowBlur: 40,
+    //             shadowBlur: 40,
-                borderColor: "#00B3FF",
+    //             borderColor: "#00B3FF",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
+    //           }
-            },
+    //         },
-            data: [{
+    //         data: [{
-              value: 12,
+    //           value: 12,
-            }, {
+    //         }, {
-              value: 4,
+    //           value: 4,
-              name: '',
+    //           name: '',
-              itemStyle: placeHolderStyle
+    //           itemStyle: placeHolderStyle
-            }]
+    //         }]
-          },
+    //       },
-          // ------------2
+    //       // ------------2
-          {
+    //       {
-            name: '值',
+    //         name: '值',
-            type: 'pie',
+    //         type: 'pie',
-            clockWise: true,
+    //         clockWise: true,
-            hoverAnimation: false,
+    //         hoverAnimation: false,
-            radius: ['72%', '67%'],
+    //         radius: ['72%', '67%'],
-            center: ['50%', '50%'],
+    //         center: ['50%', '50%'],
-            itemStyle: {
+    //         itemStyle: {
-              normal: {
+    //           normal: {
-                label: {
+    //             label: {
-                  show: false
+    //               show: false
-                },
+    //             },
-                labelLine: {
+    //             labelLine: {
-                  show: false,
+    //               show: false,
-                  length: 100,
+    //               length: 100,
-                  smooth: 0.5
+    //               smooth: 0.5
-                },
+    //             },
-                borderWidth: 5,
+    //             borderWidth: 5,
-                shadowBlur: 40,
+    //             shadowBlur: 40,
-                borderColor: "#F1E453",
+    //             borderColor: "#F1E453",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
+    //           }
-            },
+    //         },
-            data: [{
+    //         data: [{
-              value: 6,
+    //           value: 6,
-            }, {
+    //         }, {
-              value: 4,
+    //           value: 4,
-              name: '',
+    //           name: '',
-              itemStyle: placeHolderStyle
+    //           itemStyle: placeHolderStyle
-            }]
+    //         }]
-          },
+    //       },
-          // ------------3
+    //       // ------------3
-          {
+    //       {
-            name: '值',
+    //         name: '值',
-            type: 'pie',
+    //         type: 'pie',
-            clockWise: true,
+    //         clockWise: true,
-            hoverAnimation: false,
+    //         hoverAnimation: false,
-            radius: ['48%', '44%'],
+    //         radius: ['48%', '44%'],
-            center: ['50%', '50%'],
+    //         center: ['50%', '50%'],
-            itemStyle: {
+    //         itemStyle: {
-              normal: {
+    //           normal: {
-                label: {
+    //             label: {
-                  show: false
+    //               show: false
-                },
+    //             },
-                labelLine: {
+    //             labelLine: {
-                  show: false,
+    //               show: false,
-                  length: 100,
+    //               length: 100,
-                  smooth: 0.5
+    //               smooth: 0.5
-                },
+    //             },
-                borderWidth: 5,
+    //             borderWidth: 5,
-                shadowBlur: 40,
+    //             shadowBlur: 40,
-                borderColor: "#f85b60",
+    //             borderColor: "#f85b60",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
+    //           }
-            },
+    //         },
-            data: [{
+    //         data: [{
-              value: 9,
+    //           value: 9,
-            }, {
+    //         }, {
-              value: 44,
+    //           value: 44,
-              name: '',
+    //           name: '',
-              itemStyle: placeHolderStyle
+    //           itemStyle: placeHolderStyle
-            }]
+    //         }]
-          },
+    //       },
-        ]
+    //     ]
-      });
+    //   });
-      //默认第一条高亮
+   var  data = [{
-      myChart.dispatchAction({ type: 'highlight', seriesIndex: [0, 1, 2], dataIndex: 0 });
+        name: "本科及以上",
+        value: 13211
+    },
+    {
+        name: "高中",
+        value: 42111
+    },
+    {
+        name: "初中及以下",
+        value: 81711
+    },
+    {
+        name: "其他",
+        value: 121711
     }
+];
+function   getArrayValue(array, key) {
+    var key = key || "value";
+    var res = [];
+    if (array) {
+        array.forEach(function(t) {
+            res.push(t[key]);
+        });
+    }
+    return res;
+}
+function array2obj(array,key) {
+	var resObj = {};
+	for(var i=0;i<array.length;i++){
+		resObj[array[i][key]] = array[i];
+	}
+	return resObj;
+}
+function getData(data) {
+    var res = {
+        series: [],
+        yAxis: []
+    };
+    for (let i = 0; i < data.length; i++) {
+        res.series.push({
+            name: '学历',
+            type: 'pie',
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
+            center: ["30%", "55%"],
+            label: {
+                show: false
+            },
+            itemStyle: {
+                label: {
+                    show: false,
+                },
+                labelLine: {
+                    show: false
+                },
+                borderWidth: 5,
+            },
+            data: [{
+                value: data[i].value,
+                name: data[i].name
+            }, {
+                value: sumValue - data[i].value,
+                name: '',
+                itemStyle: {
+                    color: "rgba(0,0,0,0)",
+                    borderWidth: 0
+                },
+                tooltip: {
+                    show: false
+                },
+                hoverAnimation: false
+            }]
+        });
+        res.series.push({
+            name: '',
+            type: 'pie',
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
+            center: ["30%", "55%"],
+            label: {
+                show: false
+            },
+            itemStyle: {
+                label: {
+                    show: false,
+                },
+                labelLine: {
+                    show: false
+                },
+                borderWidth: 5,
+            },
+            data: [{
+                value: 7.5,
+                itemStyle: {
+                    color: "#E3F0FF",
+                    borderWidth: 0
+                },
+                tooltip: {
+                    show: false
+                },
+                hoverAnimation: false
+            }, {
+                value: 2.5,
+                name: '',
+                itemStyle: {
+                    color: "rgba(0,0,0,0)",
+                    borderWidth: 0
+                },
+                tooltip: {
+                    show: false
+                },
+                hoverAnimation: false
+            }]
+        });
+        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
+    }
+    return res;
+}
+var arrName = getArrayValue(data, "name");
+var arrValue = getArrayValue(data, "value");
+var sumValue = eval(arrValue.join('+'));
+var objData = array2obj(data, "name");
+var optionData = getData(data);
+
+
+myChart.option = {
+    backgroundColor:'#fff',
+    legend: {
+        show: true,
+        top: "center",
+        left: '70%',
+        data: arrName,
+        itemWidth: 30,
+        itemHeight: 20,
+        width:50,
+        padding: [0, 5],
+        itemGap: 25,
+        formatter: function(name) {
+            return "{title|" + name + "}\n{value|" + (objData[name].value) + "人}"
+        },
+        textStyle: {
+            rich: {
+                title: {
+                    fontSize: 10,
+                    lineHeight: 10,
+                    color: "rgba(0,0,0,.45)"
+                },
+                value: {
+                    fontSize: 14,
+                    lineHeight: 18,
+                    color: "rgba(0,0,0,.85)"
+                }
+            }
+        },
+    },
+    tooltip: {
+        show: true,
+        trigger: "item",
+        formatter: "{a}<br>{b}:{c}({d}%)"
+    },
+    color: ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
+    grid: {
+        top: '20%',
+        bottom: '48%',
+        left: "30%",
+        containLabel: false
+    },
+    yAxis: [{
+        type: 'category',
+        inverse: true,
+        axisLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            interval: 0,
+            inside: true,
+            textStyle: {
+                color: "#000",
+                fontSize: 10,
+            },
+            show: true
+        },
+        data: optionData.yAxis
+    }],
+    xAxis: [{
+        show: false
+    }],
+    series: optionData.series
+};
+      //默认第一条高亮
+    //   myChart.dispatchAction({ type: 'highlight', seriesIndex: [0, 1, 2], dataIndex: 0 });
+    },
+
   }
 };
 </script>

src/views/index.vue

@@ -21,6 +21,9 @@
             <span>&nbsp;&nbsp;天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
             <span>{{weatherItem.weather}} &nbsp;{{weatherItem.temperature}}℃</span>
           </div>
+           <div class="closeIndex" @click="closeindex">
+            <img src="../assets/pic/closeIndex.png" alt="">
+          </div>
         </div>
         </div>
         
@@ -367,6 +370,9 @@ export default {
           break; 
       }
     },
+    closeindex(){
+         this.$router.push('/')
+    },
     //获取当前时间
     getTime(){
         let myDate = new Date()  
@@ -1096,11 +1102,17 @@ position: absolute;
       right: 80px;
       width: 17.5px;
       height: 18px;
-      background: url("~@/assets/pic/sun.png") no-repeat;
+    //   background: url("~@/assets/pic/sun.png") no-repeat;
       background-size: 100% 100%;
     }
   }
-
+.closeIndex{
+     width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 5px;
+    right: 22px;
+}
 }
 
 .header .title {

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/modelScreen.vue

@@ -9,10 +9,13 @@
           </div>
           <div class="titRight">
             <span>{{dateNew}}&nbsp;{{getWeek}}&nbsp;{{time}}</span>
-            <span></span>
+            <!-- <span></span> -->
             <span>&nbsp;&nbsp;天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
             <span>{{weatherItem.weather}} &nbsp;{{weatherItem.temperature}}℃</span>
           </div>
+          <div class="closeIndex" @click="closeindex">
+            <img src="../assets/pic/closeIndex.png" alt="">
+          </div>
         </div>
       </div>
       <div @click="disBox" ref="screenBox" :class="!boxNone ? 'screenBox dh1' : 'screenBox dh2'"
@@ -476,6 +479,9 @@ export default {
           break; 
       }
     },
+    closeindex(){
+         this.$router.push('/')
+    },
     //获取当前时间
     getTime(){
         let myDate = new Date()  
@@ -1132,7 +1138,10 @@ export default {
       background-size: 100% 100%;
     }
   }
-
+.closeIndex{
+   width: 100px;
+   height: 80px;
+}
 }
 
 .title {

src/views/modelScreenComponents.vue

@@ -646,6 +646,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>