This commit is contained in:
lixiaobang 2023-03-23 09:47:52 +08:00
commit 1559a86cd8
18 changed files with 450 additions and 169 deletions

View File

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

29
src/api/personnel.js Normal file
View File

@ -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},
)
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 684 B

BIN
src/assets/weather/1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 430 B

BIN
src/assets/weather/2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 376 B

BIN
src/assets/weather/3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 442 B

BIN
src/assets/weather/4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 485 B

BIN
src/assets/weather/5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 B

BIN
src/assets/weather/6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 388 B

BIN
src/assets/weather/7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 B

BIN
src/assets/weather/8.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 B

BIN
src/assets/weather/sun.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 621 B

View File

@ -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>项目管理组</span>
<span :style="item.color"></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 = {
normal: {
label: {
show: false,
position: "center"
// var placeHolderStyle = {
// normal: {
// label: {
// show: false,
// position: "center"
// },
// labelLine: {
// show: false
// },
// color: "#104841a3",
// borderWidth: 0
// },
// emphasis: {
// color: "#104841a3",
// borderColor: "#00b3ff",
// borderWidth: 0
// }
// };
// //
// myChart.setOption({
// series: [
// {
// name: '',
// type: 'pie',
// clockWise: true,
// hoverAnimation: false,
// radius: ['92%', '97%'],
// center: ['50%', '50%'],
// itemStyle: {
// normal: {
// label: {
// show: false
// },
// labelLine: {
// show: false,
// length: 100,
// smooth: 0.5
// },
// borderWidth: 5,
// shadowBlur: 40,
// borderColor: "#00B3FF",
// shadowColor: 'rgba(0, 0, 0, 0)' //
// }
// },
// data: [{
// value: 12,
// }, {
// value: 4,
// name: '',
// itemStyle: placeHolderStyle
// }]
// },
// // ------------2
// {
// name: '',
// type: 'pie',
// clockWise: true,
// hoverAnimation: false,
// radius: ['72%', '67%'],
// center: ['50%', '50%'],
// itemStyle: {
// normal: {
// label: {
// show: false
// },
// labelLine: {
// show: false,
// length: 100,
// smooth: 0.5
// },
// borderWidth: 5,
// shadowBlur: 40,
// borderColor: "#F1E453",
// shadowColor: 'rgba(0, 0, 0, 0)' //
// }
// },
// data: [{
// value: 6,
// }, {
// value: 4,
// name: '',
// itemStyle: placeHolderStyle
// }]
// },
// // ------------3
// {
// name: '',
// type: 'pie',
// clockWise: true,
// hoverAnimation: false,
// radius: ['48%', '44%'],
// center: ['50%', '50%'],
// itemStyle: {
// normal: {
// label: {
// show: false
// },
// labelLine: {
// show: false,
// length: 100,
// smooth: 0.5
// },
// borderWidth: 5,
// shadowBlur: 40,
// borderColor: "#f85b60",
// shadowColor: 'rgba(0, 0, 0, 0)' //
// }
// },
// data: [{
// value: 9,
// }, {
// value: 44,
// name: '',
// itemStyle: placeHolderStyle
// }]
// },
// ]
// });
var data = [{
name: "本科及以上",
value: 13211
},
labelLine: {
show: false
},
color: "#104841a3",
borderWidth: 0
},
emphasis: {
color: "#104841a3",
borderColor: "#00b3ff",
borderWidth: 0
}
};
//
myChart.setOption({
series: [
{
name: '值',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: ['92%', '97%'],
center: ['50%', '50%'],
itemStyle: {
normal: {
label: {
show: false
name: "高中",
value: 42111
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: 5,
shadowBlur: 40,
borderColor: "#00B3FF",
shadowColor: 'rgba(0, 0, 0, 0)' //
}
},
data: [{
value: 12,
}, {
value: 4,
name: '',
itemStyle: placeHolderStyle
}]
},
// ------------2
{
name: '值',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: ['72%', '67%'],
center: ['50%', '50%'],
itemStyle: {
normal: {
label: {
show: false
name: "初中及以下",
value: 81711
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: 5,
shadowBlur: 40,
borderColor: "#F1E453",
shadowColor: 'rgba(0, 0, 0, 0)' //
}
},
data: [{
value: 6,
}, {
value: 4,
name: '',
itemStyle: placeHolderStyle
}]
},
// ------------3
{
name: '值',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: ['48%', '44%'],
center: ['50%', '50%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: 5,
shadowBlur: 40,
borderColor: "#f85b60",
shadowColor: 'rgba(0, 0, 0, 0)' //
name: "其他",
value: 121711
}
},
data: [{
value: 9,
}, {
value: 44,
name: '',
itemStyle: placeHolderStyle
}]
},
]
];
function getArrayValue(array, key) {
var key = key || "value";
var res = [];
if (array) {
array.forEach(function(t) {
res.push(t[key]);
});
//
myChart.dispatchAction({ type: 'highlight', seriesIndex: [0, 1, 2], dataIndex: 0 });
}
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>

View File

@ -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 {

View File

@ -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">

View File

@ -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 {

View File

@ -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,

View File

@ -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() {
@ -382,9 +363,29 @@ export default {
},
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>