绩效考核手机版
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

917 lines
25 KiB

3 years ago
<template>
<view class="container">
<view class="u-demo-block">
<u-swiper height="200"
:list="list3"
previousMargin="30"
nextMargin="30"
indicator
indicatorMode="line"
circular
:autoplay="true"
radius="5"
bgColor="#ffffff"
></u-swiper>
</view>
<uni-card :isShadow="false" padding="0">
<template v-slot:title>
<u-row customStyle="margin-bottom: 10px; margin-top: 10px" @click="departmentSubmitted">
<u-col span="8" class="card_header_title" style="padding-left: 15rpx;">
<view class="">待提交</view>
</u-col>
<u-col span="4">
<view class="card_header_mone">查看详情</view>
</u-col>
</u-row>
</template>
<uni-list>
<view class="" v-for="item in departmentWaitSubList.slice(0,4)" @click="lookWaitSub(item.id)">
<uni-list-item ellipsis="1" :title="item.title" />
</view>
</uni-list>
</uni-card>
<uni-card :isShadow="false" padding="0">
<template v-slot:title>
<u-row customStyle="margin-bottom: 10px; margin-top: 10px" @click="departmentWaitRatify">
<u-col span="8" class="card_header_title" style="padding-left: 15rpx;">
<view class="">待审核</view>
</u-col>
<u-col span="4">
<view class="card_header_mone">查看详情</view>
</u-col>
</u-row>
</template>
<uni-list>
<uni-list-item v-for="items in departmentWaitRatifyList.slice(0,4)" ellipsis="1" :title="items.tittle"/>
</uni-list>
</uni-card>
<uni-card :title="chareTitle" padding="0" >
<picker mode="date" fields="month" v-model="pickerCurrentTime" @change="bindDateChange">
<uni-easyinput prefixIcon="search" :value="pickerCurrentTime" :clearable ="false"></uni-easyinput>
</picker>
<view class="swiper-box-cont">
<swiper circular class="swiper-box" @change="chareChange" :current="charCurrent" :indicator-dots="false" :autoplay="false">
<swiper-item :key="0">
<u-loading-icon class="load_icon" :show="charIsShow[0].loading" color="#19be6b"
:vertical="true"
text="加载中"
></u-loading-icon>
<view v-show="charIsShow[0].charview" class="charts-box" id="anquan"></view>
</swiper-item>
<swiper-item :key="1">
<u-loading-icon class="load_icon" :show="charIsShow[1].loading" color="#19be6b"
:vertical="true"
text="加载中"
></u-loading-icon>
<view v-show="charIsShow[1].charview" class="charts-box" id="huanbao"></view>
</swiper-item>
<swiper-item :key="2">
<u-loading-icon class="load_icon" :show="charIsShow[2].loading" color="#19be6b"
:vertical="true"
text="加载中"
></u-loading-icon>
<view v-show="charIsShow[2].charview" class="charts-box" id="zhiyeweisheng"></view>
</swiper-item>
<swiper-item :key="3">
<u-loading-icon class="load_icon" :show="charIsShow[3].loading" color="#19be6b"
:vertical="true"
text="加载中"
></u-loading-icon>
<view v-show="charIsShow[3].charview" class="charts-box" id="shengchandiaodu"></view>
</swiper-item>
<swiper-item :key="4">
<u-loading-icon class="load_icon" :show="charIsShow[4].loading" color="#19be6b"
:vertical="true"
text="加载中"
></u-loading-icon>
<view v-show="charIsShow[4].charview" class="charts-box" id="gongyiguanli"></view>
</swiper-item>
<swiper-item :key="5">
<u-loading-icon class="load_icon" :show="charIsShow[5].loading" color="#19be6b"
:vertical="true"
text="加载中"
></u-loading-icon>
<view v-show="charIsShow[5].charview" class="charts-box" id="shebeidianyi"></view>
</swiper-item>
<swiper-item :key="6">
<u-loading-icon class="load_icon" :show="charIsShow[6].loading" color="#19be6b"
:vertical="true"
text="加载中"
></u-loading-icon>
<view v-show="charIsShow[6].charview" class="charts-box" id="laodongjilv"></view>
</swiper-item>
<swiper-item :key="7">
<u-loading-icon class="load_icon" :show="charIsShow[7].loading" color="#19be6b"
:vertical="true"
text="加载中"
></u-loading-icon>
<view v-show="charIsShow[7].charview" class="charts-box" id="peixunjiaoyu"></view>
</swiper-item>
<!-- <uni-icons class='prev arrow' type="left" :color="'#5e6d82'" size="30" />
<uni-icons class='next arrow' type="right" :color="'#5e6d82'" size="30" /> -->
</swiper>
<uni-icons class='prev arrow' type="left" :color="'#5e6d82'" size="30" @click="prevCharIndex" />
<uni-icons class='next arrow' type="right" :color="'#5e6d82'" size="30" @click="nextCharIndex" />
</view>
<view class="charts-box" id="chengji"></view>
</uni-card>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
export default {
data() {
return {
chareTitle:'安全管理',
charIsShow:[
{
loading:false,
charview:true,
title:"安全管理",
target:"6",
charKey:'anquan',
data:[
]
},
{
loading:false,
charview:true,
title:"环保管理",
target:"84",
charKey:'huanbao',
data:[]
},
{
loading:false,
charview:true,
title:"职业卫生",
target:"85",
charKey:'zhiyeweisheng',
data:[]
},
{
loading:false,
charview:true,
title:"生产调度",
target:"7",
charKey:'shengchandiaodu',
data:[]
},
{
loading:false,
charview:true,
title:"工艺管理",
target:"9",
charKey:'gongyiguanli',
data:[]
},
{
loading:false,
charview:true,
title:"设备电仪",
target:"8",
charKey:'shebeidianyi',
data:[]
},
{
loading:false,
charview:true,
title:"劳动纪律",
target:"10",
charKey:'laodongjilv',
data:[]
},
{
loading:false,
charview:true,
title:"培训教育",
target:"11",
charKey:'peixunjiaoyu',
data:[]
}
],
charCurrent:0,
title:"待提交",
tispShow:false,
tispTitle:"",
list3: [
'http://new.hxgk.group/sj/1.png',
'http://new.hxgk.group/sj/2.png',
'http://new.hxgk.group/sj/3.png',
],
pickerCurrentTime:this.getCurrentMonth(),
yserDate:0,
monthDate:0,
headerVerify:{
userkey:"",
token:"",
userCont:""
},
departmentWaitSubList:[
{
id:"",
title:""
}
], //待提交
departmentWaitRatifyList:[
{
id:"",
title:""
}
] //待审核
}
},
onLoad () {
let _this = this
let systemCache = _this.$commonMethod.getSystemCacheDate('myCache')
if(!systemCache){
_this.$commonMethod.JumpUrl('/pages/login/login')
}else{
let currentTime = new Date().getTime() - systemCache.tokenTime
if (currentTime >= 10000000){
_this.$commonMethod.verifyPowerIsTrue('myCache')
}
console.log("_this.headerVerify------------>",currentTime)
}
_this.headerVerify.userkey = systemCache.userKey
_this.headerVerify.token = systemCache.token
_this.headerVerify.userCont = systemCache.userInfo
_this.getCurrentMonth()
},
onReady(){ //页面加载完毕后启用
let _this = this
_this.getCurrentMonth() //获取年月
// _this.securityStatistics() //安全管理
_this.monthStatistics() //月份绩效成绩
_this.getDepartmentWaitSubmitted() //待提交的定性考核
_this.getDepartmentWaitRatify() //待审核
_this.getTargetChare(0) //获取默认图表数据
},
methods: {
//上一项
prevCharIndex(){
let prevDate = this.charCurrent - 1
if(prevDate >= 0){
this.charCurrent = prevDate
}else{
this.charCurrent = 7
}
this.chareTitle = this.charIsShow[this.charCurrent].title
},
//下一项
nextCharIndex(){
let prevDate = this.charCurrent + 1
if(prevDate <= 7){
this.charCurrent = prevDate
}else{
this.charCurrent = 0
}
this.chareTitle = this.charIsShow[this.charCurrent].title
},
//图表轮播变更事件
chareChange(e) {
this.charCurrent = e.detail.current;
console.log("e-----1223123----->", e.detail.current)
// for(let icp=0;icp<=7;icp++){
// if(icp != this.charCurrent){
// this.charIsShow[icp].loading = true
// this.charIsShow[icp].charview = false
// }
// }
this.getTargetChare(this.charCurrent)
},
//部门待提交项查看更多
departmentSubmitted(){
let _this = this
_this.$commonMethod.JumpUrl('/pages/task/task')
},
//部门待审核项查看更多
departmentWaitRatify(){
let _this = this
_this.$commonMethod.JumpUrl('/pages/login/login')
},
//日期改变
bindDateChange(e){
console.log('日期改变事件:', e.detail.value);
this.pickerCurrentTime = e.detail.value
let timeDay = e.detail.value+"-01 00:00:00"
let timeVal = this.$timetostring.default.timeProcessing(timeDay)
let date = new Date(timeVal);
this.yserDate = date.getFullYear();
this.monthDate = date.getMonth() + 1
console.log(timeDay,"--------------->",timeVal,"--------------->",date,"--------------->",this.yserDate,"--------------->",this.monthDate)
this.getTargetChare(this.charCurrent)
// this.securityStatistics()
this.monthStatistics()
},
//获取年月
getCurrentMonth () {
const date = new Date()
let year = date.getFullYear()
let month = date.getMonth()
this.yserDate = year
this.monthDate = month
month = month > 9 ? month : '0' + month
return `${year}-${month}`
},
//安全管理
securityStatistics(){
let _this = this
//获取安全管理数据
uni.request({
url:_this.$commonMethod.localhostUrl+'/api/quant/quantechart',
header: {
'Content-Type': 'application/json', //自定义请求头信息
// 'User-Agent':250,
'user-key': _this.headerVerify.userkey,
'user-token': _this.headerVerify.token
},
method:'POST',//请求方式,必须为大写
data:{
// group:_this.headerVerify.userCont.company,
targetid:['6'], //指标id
org: [
"115",
"282",
"116",
"349",
"354",
"126",
], //行政组织编号
year:[_this.yserDate.toString()], //年
timeattribute:{ //时间辅助
class:3, //0:全年;1:半年;2:季度;3:月度
time:[_this.monthDate] //class->0(0),Time->1(1:上半年,2:下半年),class->2(1:第一季度,2:第二季度,3:第三季度,4:第四季度),class->3(1:1月....12:12月)
} ,//月
AccMethod:[1],
analysisangle:1
},
success: (res) => {
console.log('接口返回--login--3--',res.data);
let callBackDate = res.data
if(callBackDate.code == 0){
let minVal = 0
let maxVal = 0
let chartMapDate = _this.$echartsMethod.echartsStruct
chartMapDate.series=[]
let chartDate = callBackDate.data
chartMapDate.title.text = chartDate.legend[0]
chartMapDate.xAxis.data = chartDate.xAxis
chartDate.series.forEach(item=>{
console.log("--------------->",item)
let zhuAry = new Array
item.data.forEach((datItem,index)=>{
if(minVal == 0 || minVal > datItem){
minVal = datItem
}
if(maxVal == 0 || maxVal < datItem){
maxVal = datItem
}
let backColor = _this.$commonMethod.randomHexColor()
if(_this.$commonMethod.colorCommon[index]){
backColor = _this.$commonMethod.colorCommon[index]
}
let zhuCont = {
value: datItem,
itemStyle: {
color:backColor
},
label: {
show: true,
position: 'top',
color:'black'
},
}
zhuAry.push(zhuCont)
});
let seriesDate = {
name:item.name,
data: zhuAry,
type: 'bar',
showBackground: true,
}
console.log(minVal)
maxVal = 0
// chartMapDate.yAxis.min=minVal
// chartMapDate.yAxis.max=maxVal
chartMapDate.series.push(seriesDate)
})
console.log("chartMapDate--->",chartMapDate)
let myChart = _this.$echarts.init(document.getElementById('anquan'));
// 绘制图表
myChart.clear();
myChart.setOption(chartMapDate)
}else{
_this.$refs.uToast.show({
message: callBackDate.msg,
duration: 1000 * 2,
position:'bottom',
})
}
},
fail:function(e){
console.log('接口返回--login--2--',e);
_this.$refs.uToast.show({
message: e,
duration: 1000 * 2,
position:'bottom',
})
}
})
},
//月份绩效成绩
monthStatistics(){
let _this = this
console.log(_this.headerVerify.userCont.company,"公司")
//获取月份绩效成绩
uni.request({
url:_this.$commonMethod.localhostUrl+'/api/ststic/departmenttranscript',
header: {
'Content-Type': 'application/json', //自定义请求头信息
// 'User-Agent':250,
'user-key': _this.headerVerify.userkey,
'user-token': _this.headerVerify.token
},
method:'POST',//请求方式,必须为大写
data:{
// group:_this.headerVerify.userCont.company,
// department: [
// "115",
// "282",
// "116",
// "349",
// "354",
// "126",
// ], //行政组织编号
year:[_this.yserDate.toString()], //年
month:[_this.monthDate],//月
},
success: (res) => {
console.log('接口返回--绩效成绩--3--',res.data);
let callBackDate = res.data
if(callBackDate.code == 0){
let minVal = 0
let maxVal = 0
let chartMapDateJixiao = _this.$echartsMethod.echartsStruct
chartMapDateJixiao.series=[]
let chartDateJx = callBackDate.data
chartMapDateJixiao.title.text =_this.yserDate+"年"+_this.monthDate+ "份绩效成绩"
chartMapDateJixiao.title.top =10
console.log('接口返回--绩效成绩--4--',chartDateJx.echarsListOrg);
chartMapDateJixiao.xAxis.data = chartDateJx.echarsListOrg.xline
chartMapDateJixiao.xAxis.axisLabel.rotate = 60
chartMapDateJixiao.grid.bottom = 70
chartDateJx.echarsListOrg.cylindricaldata.forEach(item=>{
console.log("--------------->",item)
let zhuAry = new Array
item.data.forEach((datItem,index)=>{
if(minVal == 0 || minVal > datItem){
minVal = datItem
}
if(maxVal == 0 || maxVal < datItem){
maxVal = datItem
}
let backColor = _this.$commonMethod.randomHexColor()
if(_this.$commonMethod.colorCommon[index]){
backColor = _this.$commonMethod.colorCommon[index]
}
let zhuCont = {
value: datItem,
itemStyle: {
color:backColor
},
label: {
show: true,
rotate: 70, // 旋转70度
position: 'top',
color:'black',
distance: 20, // 距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。
verticalAlign: 'middle',
textStyle: { // 数值样式
color: 'black',
fontSize: 10
}
},
}
zhuAry.push(zhuCont)
});
let seriesDate = {
name:item.name,
data: zhuAry,
type: 'bar',
showBackground: true,
}
minVal = Math.trunc(minVal)-1
chartMapDateJixiao.yAxis.min=minVal
chartMapDateJixiao.yAxis.max=maxVal
chartMapDateJixiao.series.push(seriesDate)
})
console.log("chartMapDateJixiao--绩效成绩->",chartMapDateJixiao)
let myChart = _this.$echarts.init(document.getElementById('chengji'));
// 绘制图表
myChart.clear();
myChart.setOption(chartMapDateJixiao)
}else{
_this.$refs.uToast.show({
message: callBackDate.msg,
duration: 1000 * 2,
position:'bottom',
})
}
},
fail:function(e){
console.log('接口返回--login--2--',e);
_this.$refs.uToast.show({
message: e,
duration: 1000 * 2,
position:'bottom',
})
}
})
},
//获取部门待提交项目
getDepartmentWaitSubmitted(){
let _this = this
uni.request({
url:_this.$commonMethod.localhostUrl+'/api/eval/newqualitative',
header: {
'Content-Type': 'application/json', //自定义请求头信息
// 'User-Agent':250,
'user-key': _this.headerVerify.userkey,
'user-token': _this.headerVerify.token
},
method:'POST',//请求方式,必须为大写
data:{
// group:_this.headerVerify.userCont.company, //公司
// department:_this.headerVerify.userCont.maindeparment, //部门
// tittle:"" //指标名称
},
success: (res) => {
console.log("待提交的定性考核",res)
let callBackDate = res.data
if (callBackDate.code == 0){
_this.departmentWaitSubList = callBackDate.data
}
},
fail:function(e){
console.log('接口返回--login--2--',e);
_this.$refs.uToast.show({
message: e,
duration: 1000 * 2,
position:'bottom',
})
},
})
},
//查看待提交项目详情
lookWaitSub(idval){
let _this = this
_this.$refs.uToast.show({
message: idval,
duration: 1000 * 2,
position:'bottom',
})
},
//获取待审核项目
getDepartmentWaitRatify(){
let _this = this
uni.request({
url:_this.$commonMethod.localhostUrl+'/api/eval/seeflowlog',
header: {
'Content-Type': 'application/json', //自定义请求头信息
// 'User-Agent':250,
'user-key': _this.headerVerify.userkey,
'user-token': _this.headerVerify.token
},
method:'POST',//请求方式,必须为大写
data:{
isset: 2, //0:未处理 1:已审核;2:未审核
page: 1,
pagesize: 1000000,
},
success: (res) => {
console.log("待审核",res)
let callBackDate = res.data
if (callBackDate.code == 0){
_this.departmentWaitRatifyList = callBackDate.data.list
}
},
fail:function(e){
console.log('接口返回--login--2--',e);
_this.$refs.uToast.show({
message: e,
duration: 1000 * 2,
position:'bottom',
})
},
})
},
//获取指标图表数据
getTargetChare(ind){
let _this = this
let dateLength = _this.charIsShow[ind].data
let charKey = _this.yserDate.toString()+_this.monthDate .toString()
if(dateLength.length > 0){
if(dateLength[charKey] == undefined ){
_this.getChartApiDate(ind)
}else if(dateLength[charKey].length <= 0){
_this.getChartApiDate(ind)
}else{
console.log("dateLength-----学习--3---->",charKey,dateLength[charKey])
let charAry = dateLength[charKey]
_this.drawTable(ind,charAry.title,charAry.xAxis,charAry.series)
}
}else{ //当前节点没有数据
console.log("dateLength--->",dateLength.length)
_this.getChartApiDate(ind)
}
console.log("dateLength-----结果------>",_this.charIsShow[ind])
},
//请求API获取图表数据
getChartApiDate(ind){
let _this=this
let dateLength = _this.charIsShow[ind].data
let charKey = _this.yserDate.toString()+_this.monthDate .toString()
uni.request({
url:_this.$commonMethod.localhostUrl+'/api/quant/quantechart',
header: {
'Content-Type': 'application/json', //自定义请求头信息
// 'User-Agent':250,
'user-key': _this.headerVerify.userkey,
'user-token': _this.headerVerify.token
},
method:'POST',//请求方式,必须为大写
data:{
// group:_this.headerVerify.userCont.company,
targetid:[_this.charIsShow[ind].target], //指标id
org: [
"115",
"282",
"116",
"349",
"354",
"126",
], //行政组织编号
year:[_this.yserDate.toString()], //年
timeattribute:{ //时间辅助
class:3, //0:全年;1:半年;2:季度;3:月度
time:[_this.monthDate] //class->0(0),Time->1(1:上半年,2:下半年),class->2(1:第一季度,2:第二季度,3:第三季度,4:第四季度),class->3(1:1月....12:12月)
} ,//月
AccMethod:[1],
analysisangle:1
},
success: (res) => {
console.log(res)
let callBackDate = res.data
if(callBackDate.code == 0){
let chartDate = callBackDate.data
let charCallBackData = {
title:chartDate.legend[0],
xAxis:chartDate.xAxis,
series:chartDate.series
}
dateLength[charKey] = charCallBackData
_this.drawTable(ind,chartDate.legend[0],chartDate.xAxis,chartDate.series)
}else{
_this.$refs.uToast.show({
message: callBackDate.msg,
duration: 1000 * 2,
position:'bottom',
})
}
},
fail:function(e){
console.log('接口返回--login--2--',e);
_this.$refs.uToast.show({
message: e,
duration: 1000 * 2,
position:'bottom',
})
},
})
},
//画统计图表
drawTable(ind,title,xAxis,series){
let _this = this
let minVal = 0
let maxVal = 0
let chartMapDate = _this.$echartsMethod.echartsStruct
chartMapDate.series=[]
// let chartDate = callBackDate.data
chartMapDate.title.text = title
chartMapDate.xAxis.data = xAxis
series.forEach(item=>{
console.log("--------------->",item)
let zhuAry = new Array
item.data.forEach((datItem,index)=>{
if(minVal == 0 || minVal > datItem){
minVal = datItem
}
if(maxVal == 0 || maxVal < datItem){
maxVal = datItem
}
let backColor = _this.$commonMethod.randomHexColor()
if(_this.$commonMethod.colorCommon[index]){
backColor = _this.$commonMethod.colorCommon[index]
}
let zhuCont = {
value: datItem,
itemStyle: {
color:backColor
},
label: {
show: true,
position: 'top',
color:'black'
},
}
zhuAry.push(zhuCont)
});
let seriesDate = {
name:item.name,
data: zhuAry,
type: 'bar',
showBackground: true,
}
// console.log(minVal)
// maxVal = 0
if(minVal <= 0){
if(maxVal < 0){
maxVal = minVal-0.1
minVal = 0
}else if(maxVal > 0){
maxVal = maxVal+0.1
minVal = minVal - 0.1
}
}else{
maxVal = maxVal+1
}
chartMapDate.yAxis.min=minVal
chartMapDate.yAxis.max=maxVal
chartMapDate.series.push(seriesDate)
})
console.log("chartMapDate--->",chartMapDate)
let muChartKey = _this.charIsShow[ind].charKey
let myChart = _this.$echarts.init(document.getElementById(muChartKey));
console.log("muChartKey--->",muChartKey)
console.log("myChart--->",myChart)
// 绘制图表
myChart.clear();
myChart.setOption(chartMapDate)
_this.charIsShow[ind].loading = false
_this.charIsShow[ind].charview = true
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.u-demo-block{
/* height:350rpx; */
margin-top: 20rpx;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.load_icon{
margin-top: 25%;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.charts-box {
margin-top: 20rpx;
width: 100%;
max-width: 100%;
height: 300px;
}
.card_header_mone{
text-align: right;
font-size: 12rpx;
color: #909399;
padding-right: 15rpx;
}
.card_header_title{
font-size: 30rpx;
color: #3a3a3a;
}
/* .swiper-box {
height: 300px;
} */
.swiper-box{
position: relative;
height: 300px;
}
.swiper-box-cont .arrow{
width: 30rpx;
height: 46rpx;
display: block;
/* width: 100%;
height: 300rpx; */
cursor: pointer;
}
.swiper-box-cont .prev{
position: absolute;
left: 0;
top: 45%;
border-radius: 50%;
width: 70rpx;
height: 70rpx;
line-height: 70rpx;
/* transform: translate(0, -50%); */
cursor: pointer;
background-color: rgba(204, 204, 204, 0.6);
}
.swiper-box-cont .next{
position: absolute;
right: 15px;
top: 45%;
border-radius: 50%;
width: 70rpx;
height: 70rpx;
line-height: 70rpx;
background-color: rgba(204, 204, 204, 0.6);
/* transform: translate(0, -50%); */
}
</style>