Mauve
379 lines
12 KiB
Vue
379 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<view>
|
|
<mgmHeader ref="headerRef" />
|
|
<view v-if="showDashboardView">
|
|
<view class="hz-font-bolder hz-font-l hz-font-color-black hz-text-right"
|
|
style="margin-top:36rpx;margin-right:36rpx;">
|
|
{{$t('dashboard.dataAsOf')}} {{dataAsOf}}
|
|
</view>
|
|
<view v-if="showAchievement">
|
|
<view class="hz-font-bolder hz-font-xl hz-font-color-black hz-text-left"
|
|
style="margin-top:36rpx;margin-left:36rpx;">
|
|
{{$t('dashboard.achievement')}}
|
|
|
|
</view>
|
|
<uni-card>
|
|
<view v-for="(record,index) in dashboardData" :key="index" v-show="getShowAchievement(record)"
|
|
style="margin-top:12px;">
|
|
<view class="hz-flex-row">
|
|
<view style="width:37%">
|
|
<view class="hz-font-color-dark hz-font-base">{{record.itemName}}</view>
|
|
</view>
|
|
<view v-if="record.targetValue!==0&&record.targetValue!==null&&record.targetValue!==undefined" class="hz-flex-row"
|
|
style="width:63%;justify-content: flex-end;align-items: center;align-items: center;">
|
|
<view class="hz-font-color-dark hz-font-12px" style="white-space: nowrap;">{{getTargetValue(record)}}</view>
|
|
<view class="hz-card-level" style="margin-left:4px;">LV{{record.level}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top:3px;" v-if="record.targetValue!==0&&record.targetValue!==null&&record.targetValue!==undefined">
|
|
<u-line-progress :percentage="getPercentValue(record)" activeColor="#C39A4B"
|
|
height="16"></u-line-progress>
|
|
</view>
|
|
<view style="margin-top:3px;" v-else>
|
|
<u-line-progress :percentage="0" activeColor="#C39A4B" height="16"><span
|
|
style="font-size:10px;padding-left: 10px;">{{getCurrentValue(record)}}</span></u-line-progress>
|
|
</view>
|
|
</view>
|
|
<view v-show="userSegment =='IM'">
|
|
<view class="im-view-outside">
|
|
<view class="im-view-inside" style="margin-right:5px;">
|
|
<view class="im-text-gold">{{formatNumber(MFValue)}}</view>
|
|
<view class="hz-font-color-dark hz-font-base">MF Turnover</view>
|
|
</view>
|
|
<view class="im-view-inside" style="margin-left:5px;">
|
|
<view class="im-text-gold">{{formatNumber(IMValue)}}</view>
|
|
<view class="hz-font-color-dark hz-font-base">IM Turnover</view>
|
|
</view>
|
|
</view>
|
|
<view class="im-view-outside">
|
|
<view class="im-view-inside" style="margin-right:5px;">
|
|
<view class="im-text-gold">{{formatNumber(NFROValue)}}</view>
|
|
<view class="hz-font-color-dark hz-font-base">NFRO Turnover</view>
|
|
</view>
|
|
<view class="im-view-inside" style="margin-left:5px;">
|
|
<view class="im-text-gold">{{formatNumber(MRIValue)}}</view>
|
|
<view class="hz-font-color-dark hz-font -base">MRI Turnover</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</view>
|
|
<view v-if="showKPI">
|
|
<view class="hz-font-bolder hz-font-xl hz-font-color-black hz-text-left"
|
|
style="margin-top:36rpx;margin-left:36rpx;">
|
|
{{$t('dashboard.kpi')}}
|
|
</view>
|
|
<uni-card>
|
|
<view v-for="(record,index) in dashboardData" :key="index" v-show="getShowKPI(record)"
|
|
style="margin-top:12px;">
|
|
<view class="hz-flex-row">
|
|
<view style="width:85%">
|
|
<view class="hz-font-color-dark hz-font-base">{{record.itemName}}</view>
|
|
</view>
|
|
<view class="hz-flex-row"
|
|
style="width:15%;justify-content: flex-end;align-items: center;align-items: center;">
|
|
<view class="hz-font-color-dark hz-font-12px">{{getTargetValue(record)}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top:3px;">
|
|
<u-line-progress :percentage="getPercentValue(record)" activeColor="#C39A4B"
|
|
height="16"><span
|
|
style="font-size:10px;margin-right:6px;padding-left: 10px;">{{percentFormat(record.currentValue)}}</span></u-line-progress>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</view>
|
|
|
|
<u-modal :content="msgStr" :show="showMsg" :confirmText="okText" :showCancelButton="false"
|
|
closeOnClickOverlay @confirm="showMsg=false" confirmColor="#C39A4B"
|
|
@close="showMsg=false"></u-modal>
|
|
</view>
|
|
</view>
|
|
<view v-if="!showDashboardView">
|
|
<view class="hz-flex-row" style="justify-content: center;margin-top:80px;">
|
|
<image src="/static/images/datanull.png" style="width:160px;height:160px;"></image>
|
|
</view>
|
|
<view class="hz-flex-row hz-font-bolder hz-font-md" style="justify-content: center;margin:20px;">
|
|
{{dataNull}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mgmHeader from '@/components/header/header.vue' // 引入头部组件
|
|
import {
|
|
getTodoDashboard
|
|
} from '../../api/todoApi';
|
|
import {
|
|
logout
|
|
} from '../../api/commonApi';
|
|
import {
|
|
formatDate
|
|
} from '../../common/stringUtils';
|
|
export default {
|
|
components: {
|
|
mgmHeader // 注册组件
|
|
},
|
|
data() {
|
|
return {
|
|
deviceData: null,
|
|
siteData: null,
|
|
msgStr: null,
|
|
showMsg: false,
|
|
okText: this.$t("common.ok"),
|
|
dataNull:this.$t("common.dataNotFound"),
|
|
userData: null,
|
|
dashboardData: [],
|
|
dataAsOf:"",
|
|
hasTargetValue:false,
|
|
MFValue: '0',
|
|
NFROValue: '0',
|
|
IMValue: '0',
|
|
MRIValue: '0',
|
|
showAchievement: false,
|
|
showKPI: false,
|
|
showDashboardView: false,
|
|
userSegment: null
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
// 初始化界面
|
|
this.initUI();
|
|
},
|
|
onShow() {
|
|
this.playerData = uni.getStorageSync("playerData");
|
|
this.getTodoDashboardByuserId();
|
|
this.$nextTick(() => {
|
|
const header = this.$refs.headerRef;
|
|
if(header) {
|
|
header.updateUserData();
|
|
}
|
|
});
|
|
if (this.userData !== null && this.userData !== undefined)
|
|
this.showTabbarByPermission(this.userData);
|
|
},
|
|
|
|
methods: {
|
|
normalizeDashboardRecord(record) {
|
|
record = record || {};
|
|
return {
|
|
currentValue: record.currentValue ?? record.CurrentValue,
|
|
identifier: record.identifier ?? record.Identifier,
|
|
itemName: record.itemName ?? record.ItemName,
|
|
level: record.level ?? record.Level,
|
|
targetValue: record.targetValue ?? record.TargetValue,
|
|
type: record.type ?? record.Type,
|
|
userId: record.userId ?? record.UserId,
|
|
userSegment: record.userSegment ?? record.UserSegment,
|
|
};
|
|
},
|
|
formatNumber(num) {
|
|
return num?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || "0";
|
|
},
|
|
async getTodoDashboardByuserId() {
|
|
uni.showLoading({
|
|
title: this.$t("common.loading")
|
|
});
|
|
let requestBody = "";
|
|
try {
|
|
let params = {};
|
|
requestBody = JSON.stringify(params);
|
|
const res = await getTodoDashboard(params);
|
|
this.dashboardData = [];
|
|
this.dataAsOf = "";
|
|
this.userSegment = null;
|
|
this.MFValue = this.IMValue = this.NFROValue = this.MRIValue = "0";
|
|
if (res.data != null && res.success == true) {
|
|
const records = Array.isArray(res.data.records)
|
|
? res.data.records
|
|
: Array.isArray(res.data.Records)
|
|
? res.data.Records
|
|
: [];
|
|
if (records.length > 0) {
|
|
this.dashboardData = records.map((record) => this.normalizeDashboardRecord(record));
|
|
this.showDashboardView = true;
|
|
// 设置用户类型
|
|
this.userSegment = this.dashboardData[0].userSegment;
|
|
this.hasTargetValue = this.dashboardData[0].targetValue !== null && this.dashboardData[0].targetValue !== undefined;
|
|
} else {
|
|
this.dashboardData = [];
|
|
this.showDashboardView = false;
|
|
this.dataNull = this.$t("common.noRecord");
|
|
}
|
|
// 重置显示标志
|
|
this.showAchievement = false;
|
|
this.showKPI = false;
|
|
let hasIMValues = false;
|
|
|
|
if(this.dashboardData.length > 0){
|
|
// 检查是否有IM类型的特殊数据
|
|
if(this.userSegment == 'IM'){
|
|
for (let i = 0; i < this.dashboardData.length; i++) {
|
|
if (this.dashboardData[i].itemName == "MF Turnover") {
|
|
this.MFValue = this.dashboardData[i].currentValue;
|
|
hasIMValues = true;
|
|
}
|
|
if (this.dashboardData[i].itemName == "IM Turnover") {
|
|
this.IMValue = this.dashboardData[i].currentValue;
|
|
hasIMValues = true;
|
|
}
|
|
if (this.dashboardData[i].itemName == "NFRO Turnover") {
|
|
this.NFROValue = this.dashboardData[i].currentValue;
|
|
hasIMValues = true;
|
|
}
|
|
if (this.dashboardData[i].itemName == "MRI Turnover") {
|
|
this.MRIValue = this.dashboardData[i].currentValue;
|
|
hasIMValues = true;
|
|
}
|
|
}
|
|
}
|
|
// 检查是否有DataAsOf类型的数据
|
|
for (let i = 0; i < this.dashboardData.length; i++) {
|
|
if (this.dashboardData[i].type == "DataAsOf"){
|
|
this.dataAsOf = this.dashboardData[i].itemName;
|
|
}
|
|
// 检查是否有Achievement类型的数据
|
|
if (this.dashboardData[i].type == "Achievement" && this.dashboardData[i].itemName !=="MF Turnover" && this.dashboardData[i].itemName !=="IM Turnover"
|
|
&& this.dashboardData[i].itemName !=="NFRO Turnover" && this.dashboardData[i].itemName !=="MRI Turnover") {
|
|
this.showAchievement = true;
|
|
}
|
|
// 检查是否有KPI类型的数据
|
|
if (this.dashboardData[i].type == "KPI") {
|
|
this.showKPI = true;
|
|
}
|
|
}
|
|
// 如果没有Achievement数据，但有IM用户的四个Value，也要显示卡片
|
|
if(!this.showAchievement && hasIMValues){
|
|
this.showAchievement = true;
|
|
}
|
|
}
|
|
} else {
|
|
this.showDashboardView = false;
|
|
this.showAchievement = false;
|
|
this.showKPI = false;
|
|
if(res.errorCode == 'NO_PERMISSION'){
|
|
this.dataNull = this.$t("todo.noPermission");
|
|
}else if(res.errorCode == 'INVOKE_TODODASHBOARD_API_ERROR'){
|
|
this.dataNull = this.$t("todo.invokeError");
|
|
}else {
|
|
if(String(res.errorCode || res.code || '').toUpperCase().indexOf('NO RECORD') != -1){
|
|
this.dataNull = this.$t("common.noRecord");
|
|
}else{
|
|
this.dataNull = this.$t("todo.returnError");
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
this.showDashboardView = false;
|
|
this.showAchievement = false;
|
|
this.showKPI = false;
|
|
} finally {
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
|
|
|
|
initUI() {
|
|
this.deviceData = uni.getStorageSync("deviceData");
|
|
this.siteData = uni.getStorageSync("siteData");
|
|
this.userData = uni.getStorageSync("userData");
|
|
}
|
|
},
|
|
computed: {
|
|
getShowAchievement() {
|
|
return function(record) {
|
|
if (record.type == "Achievement" && record.itemName !=="MF Turnover" && record.itemName !=="IM Turnover"
|
|
&& record.itemName !=="NFRO Turnover" && record.itemName !=="MRI Turnover") {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
},
|
|
getShowKPI() {
|
|
return function(record) {
|
|
if (record.type == "KPI") {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
},
|
|
getTargetValue() {
|
|
return function(record) {
|
|
if (record.targetValue != null && record.currentValue != null && record.targetValue != 0) {
|
|
if (record.type == "KPI") {
|
|
if (record.targetValue < 1) {
|
|
return (record.targetValue * 100) + "%";
|
|
} else {
|
|
return this.formatNumber(record.targetValue);
|
|
}
|
|
} else {
|
|
const targetShow = this.formatNumber(record.currentValue) + " / " + this.formatNumber(
|
|
record.targetValue);
|
|
return targetShow;
|
|
}
|
|
} else {
|
|
return null;
|
|
}
|
|
};
|
|
},
|
|
getCurrentValue(){
|
|
return function(record){
|
|
let result = this.formatNumber(parseInt(record.currentValue));
|
|
return result;
|
|
}
|
|
},
|
|
getPercentValue() {
|
|
return function(record) {
|
|
if (record.targetValue != null && record.currentValue != null && record.targetValue != 0) {
|
|
if ((Math.floor(record.currentValue / record.targetValue * 100)) <= 100) {
|
|
return Math.floor(record.currentValue / record.targetValue * 100);
|
|
} else {
|
|
return 100;
|
|
}
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
percentFormat() {
|
|
return function(val) {
|
|
if (val < 1) {
|
|
return Math.floor((val * 100) )+"%";
|
|
} else {
|
|
return this.formatNumber(Math.floor(val));
|
|
}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.im-view-outside {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 70px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.im-view-inside {
|
|
width: 50%;
|
|
background-color: #f0f0f0;
|
|
border-radius: 8px;
|
|
height: 95%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.im-text-gold {
|
|
color: #cfa34f;
|
|
}
|
|
</style>
|