201 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			201 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | ||
|     <view class="bg-white br12 p-0-20">
 | ||
|         <view class="d-b-c p-30-0 border-b">
 | ||
|             <view class="f28 fb">{{ $t('ENU_G_C_2') }}</view> 
 | ||
|             <view class="hh100" @click="clickFold">
 | ||
|                 <u-icon name="arrow-down" size="28rpx" color="#999999" v-if="fold"></u-icon>
 | ||
|                 <u-icon name="arrow-right" size="28rpx" color="#999999" v-else></u-icon>
 | ||
|             </view>
 | ||
|         </view>
 | ||
|         <view class="collspaceContent" :class="{ 'closed': !fold }">
 | ||
|             <view class="d-b-c p-20-0 border-b">
 | ||
|                 <view class="f24 gray3">{{ $t('S_C_7') }}:{{ $t('S_C_58') }}</view>
 | ||
|                 <view class="f24">{{ data.month }}{{ $t('S_C_62') }}</view>
 | ||
|             </view>
 | ||
|             <view class="prefecture form-group">
 | ||
|                 <view class="form-item">
 | ||
|                     <view class="d-b-c ww100">
 | ||
|                         <view>
 | ||
|                             <view class="d-s-c">
 | ||
|                                 <view class="pr20">
 | ||
|                                     <text class="f24 fb">{{ $t('S_C_15') }}({{ performanceCurrency() }})</text>
 | ||
|                                 </view>
 | ||
|                                 <view>
 | ||
|                                     <text class="f24">{{ goalsClassifyVOList.totalAchieve }}</text>
 | ||
|                                 </view>
 | ||
|                             </view>
 | ||
|                         </view>
 | ||
|                         <view>
 | ||
|                             <view class="d-s-c">
 | ||
|                                 <view>
 | ||
|                                     <text class="f24 fb">{{ $t('S_C_35') }}(%)</text>
 | ||
|                                 </view>
 | ||
|                                 <view>
 | ||
|                                     <text class="f24">{{ goalsClassifyVOList.totalRatio }}</text>
 | ||
|                                 </view>
 | ||
|                             </view>
 | ||
|                         </view>
 | ||
|                     </view>
 | ||
|                 </view>
 | ||
|                 <view class="form-item">
 | ||
|                     <view class="d-b-c ww100">
 | ||
|                         <view>
 | ||
|                             <view class="d-s-c">
 | ||
|                                 <view class="pr20">
 | ||
|                                     <text class="f24 fb">{{ $t('S_C_16') }}({{ performanceCurrency() }})</text>
 | ||
|                                 </view>
 | ||
|                                 <view>
 | ||
|                                     <text class="f24">{{ goalsClassifyVOList.rightAchieve }}</text>
 | ||
|                                 </view>
 | ||
|                             </view>
 | ||
|                         </view>
 | ||
|                         <view>
 | ||
|                             <view class="d-s-c">
 | ||
|                                 <view>
 | ||
|                                     <text class="f24 fb">{{ $t('S_C_35') }}(%)</text>
 | ||
|                                 </view>
 | ||
|                                 <view>
 | ||
|                                     <text class="f24">{{ goalsClassifyVOList.rightRatio }}</text>
 | ||
|                                 </view>
 | ||
|                             </view>
 | ||
|                         </view>
 | ||
|                     </view>
 | ||
|                 </view>
 | ||
|                 <view class="d-f tc">
 | ||
|                     <view class="flex-1">
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_9') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_11') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item"></view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_12') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item"></view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_13') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item"></view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_14') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item"></view>
 | ||
|                     </view>
 | ||
|                     <view class="flex-1">
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_17') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="">{{ $t('S_C_18') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="">{{ $t('S_C_19') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="">{{ $t('S_C_18') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="">{{ $t('S_C_19') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="">{{ $t('S_C_18') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="">{{ $t('S_C_19') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="">{{ $t('S_C_18') }}</view>
 | ||
|                         </view>
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="">{{ $t('S_C_19') }}</view>
 | ||
|                         </view>
 | ||
|                     </view>
 | ||
|                     <view class="flex-1">
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_10') }}({{ performanceCurrency() }})</view> 
 | ||
|                         </view>
 | ||
|                         <template v-for="(v, idx) in 8">
 | ||
|                             <view class="form-item">
 | ||
|                                 <view class="">{{ getYJMB(goalsClassifyVOList.goalsRowDetailVOList[0],idx+1) }}</view>
 | ||
|                             </view>
 | ||
|                         </template>
 | ||
|                         <!-- <view class="form-item" v-for="(v, idx) in goalsClassifyVOList.goalsRowDetailVOList[0]" :key="idx">
 | ||
|                             <view class="">{{ v }}</view>
 | ||
|                         </view> -->
 | ||
|                     </view>
 | ||
|                     <view class="flex-1">
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_34') }}({{ performanceCurrency() }})</view>
 | ||
|                         </view>
 | ||
|                         <template v-for="(v, idx) in 8">
 | ||
|                             <view class="form-item">
 | ||
|                                 <view class="">{{ getYJMB(goalsClassifyVOList.goalsRowDetailVOList[1],idx+1) }}</view>
 | ||
|                             </view>
 | ||
|                         </template>
 | ||
|                         <!-- <view class="form-item" v-for="(v, idx) in goalsClassifyVOList.goalsRowDetailVOList[1]" :key="idx">
 | ||
|                             <view class="">{{ v }}</view>
 | ||
|                         </view> -->
 | ||
|                     </view>
 | ||
|                     <view class="flex-1">
 | ||
|                         <view class="form-item">
 | ||
|                             <view class="fb">{{ $t('S_C_35') }}(%)</view>
 | ||
|                         </view>
 | ||
|                         <template v-for="(v, idx) in 8">
 | ||
|                             <view class="form-item">
 | ||
|                                 <view class="">{{ getYJMB(goalsClassifyVOList.goalsRowDetailVOList[2],idx+1) }}</view>
 | ||
|                             </view>
 | ||
|                         </template>
 | ||
|                        <!--  <view class="form-item" v-for="(v, idx) in goalsClassifyVOList.goalsRowDetailVOList[2]" :key="idx">
 | ||
|                             <view class="">{{ v }}</view>
 | ||
|                         </view>  -->
 | ||
|                     </view>
 | ||
|                 </view>
 | ||
|             </view>
 | ||
|         </view>
 | ||
|     </view>
 | ||
| </template>
 | ||
| 
 | ||
| <script>
 | ||
| export default {
 | ||
|     components: {},
 | ||
|     props: ['data', 'goalsClassifyVOList'],
 | ||
|     data() {
 | ||
|         return {
 | ||
|             fold: false,
 | ||
|         };
 | ||
|     },
 | ||
|     methods: {
 | ||
|         clickFold() {
 | ||
|             this.fold = !this.fold;
 | ||
|         },
 | ||
|         getYJMB(val,index){
 | ||
|             let name;
 | ||
|             if(val){
 | ||
|                 if(Number(index) % 2 == 0){
 | ||
|                     name = `mr${index/2}`
 | ||
|                     return val[name] || '0.00'
 | ||
|                 }else{
 | ||
|                     name = `ml${(index/2-0.5)+1}`
 | ||
|                     return val[name] || '0.00'
 | ||
|                 }
 | ||
|             }
 | ||
|             return '0.00'
 | ||
|         }
 | ||
|     }
 | ||
| };
 | ||
| </script>
 | ||
| 
 | ||
| <style lang="scss" scoped>
 | ||
| .collspaceContent {
 | ||
|     max-height: 5000rpx;
 | ||
|     overflow: hidden;
 | ||
|     transition: all ease 0.8s;
 | ||
| 
 | ||
|     &.closed {
 | ||
|         max-height: 0;
 | ||
|         transition: all ease 0.6s;
 | ||
|     }
 | ||
| }
 | ||
| </style> |