148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="pr">
|
|||
|
|
<image class="top-bg" src="/static/bg/bf-othedetail.png" mode=""></image>
|
|||
|
|
<view class="top-box">
|
|||
|
|
<view class="mb40">{{$t('N_I_129')}}:{{detail.actStartDate}} -{{detail.actEndDate}}</view>
|
|||
|
|
<view v-if="detail.residueDay" class="mb20">{{$t('fn_112')}}<text>{{detail.residueDay}}</text>{{$t('S_L_6')}}</view>
|
|||
|
|
<view v-else class="mb20">{{$t('fn_113')}}</view>
|
|||
|
|
<view >{{ $t('N_I_87') }}：{{ orderAchieve }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pt20">
|
|||
|
|
<view class="detail-item" v-for="(item,index) in listData" :key="index">
|
|||
|
|
<view class="d-b-c mb20">
|
|||
|
|
<view class="flex-1 f28 gray3" v-if="item.placeDept >= 4">
|
|||
|
|
{{ item.placeDept}}<span v-if="languages==='en-US'">th</span> {{ '' }} {{ $t("fn_011") }}
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-1 f28 gray3" v-else>
|
|||
|
|
{{ item.placeDept}}{{ $t("fn_011") }}
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="flex-1 f28 gray3">{{$t('fn_010')}}{{item.placeDept}}{{$t('fn_011')}}</view> -->
|
|||
|
|
<view class="f24 gray9 f-s-0">{{$t('S_C_7')}}:PV</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="mb20">
|
|||
|
|
<view class="f24 gray9">{{$t('fn_114')}}</view>
|
|||
|
|
<view class="f28 gray3">{{formatNum(item.placeDeptPv)}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="slider">
|
|||
|
|
<view v-if="item.complianceFlag==1" class="slider-width"
|
|||
|
|
:style="'width: '+((item.sumPv*100)/(item.placeDeptPv *1))+'%;'"></view>
|
|||
|
|
<view v-if="item.complianceFlag==0" class="slider-width full" :style="'width: 100%;'"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="d-b-s">
|
|||
|
|
<view class="flex-1">
|
|||
|
|
<view class="redfb">{{$t('ENU_REA_S_1')}}</view>
|
|||
|
|
<view class="f28 gray3">{{formatNum(item.notSumPv)}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-1">
|
|||
|
|
<view class="green1E">{{$t('ENU_REA_S_0')}}</view>
|
|||
|
|
<view class="f28 gray3">{{formatNum(item.sumPv)}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
pkId: '',
|
|||
|
|
listData: [],
|
|||
|
|
detail: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
languages:'',
|
|||
|
|
title: '',
|
|||
|
|
orderAchieve:'',
|
|||
|
|
actTypes:''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
this.pkId = e.pkId;
|
|||
|
|
this.title = e.actTypeVal;
|
|||
|
|
this.actTypes= e.actType;
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: this.title
|
|||
|
|
});
|
|||
|
|
this.getData();
|
|||
|
|
this.languages= uni.getLocale();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getData() {
|
|||
|
|
let self = this;
|
|||
|
|
self._get('activity/api/other/other-detail/' + self.pkId, {}, res => {
|
|||
|
|
self.listData = res.data.detailList;
|
|||
|
|
self.detail = res.data;
|
|||
|
|
self.orderAchieve= res.data.orderAchieve;
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.top-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
height: 230rpx;
|
|||
|
|
width: 750rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-box {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
height: 230rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 0 25rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-item {
|
|||
|
|
background-color: #fff;
|
|||
|
|
width: 706rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 28rpx 20rpx 33rpx 20rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slider {
|
|||
|
|
width: 665rpx;
|
|||
|
|
height: 18rpx;
|
|||
|
|
background: #EEEEEE;
|
|||
|
|
border-radius: 9rpx;
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slider-width {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
height: 18rpx;
|
|||
|
|
border-radius: 9rpx;
|
|||
|
|
background-color: #FB3024;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slider-width.full {
|
|||
|
|
background: #FFB85C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.redfb {
|
|||
|
|
color: #FB3024;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.green1E {
|
|||
|
|
color: #1EBD85;
|
|||
|
|
}
|
|||
|
|
</style>
|