119 lines
		
	
	
		
			4.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			119 lines
		
	
	
		
			4.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_4') }}</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_67') }}</view> | |||
|  |                 <view class="f24">{{ data.month }}{{ $t('ENU_SETTLE_P_3') }}</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_20') }}</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="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 class="fb">{{ $t('S_C_12') }}</view> | |||
|  |                         </view> | |||
|  |                         <view class="form-item"> | |||
|  |                             <view class="fb">{{ $t('S_C_13') }}</view> | |||
|  |                         </view> | |||
|  |                         <view class="form-item"> | |||
|  |                             <view class="fb">{{ $t('S_C_14') }}</view> | |||
|  |                         </view> | |||
|  |                     </view> | |||
|  |                     <view class="flex-1"> | |||
|  |                         <view class="form-item"> | |||
|  |                             <view class="fb">{{ $t('S_C_21') }}({{ currencyIcon() }})</view> | |||
|  |                         </view> | |||
|  |                          <view class="form-item" v-for="index in 4" :key="index"> | |||
|  |                             <view class="">{{ getVal(goalsClassifyVOList.goalsRowDetailVOList[0],index) }}</view> | |||
|  |                         </view> | |||
|  |                     </view> | |||
|  |                     <view class="flex-1"> | |||
|  |                         <view class="form-item"> | |||
|  |                             <view class="fb">{{ $t('S_C_34') }}({{ currencyIcon() }})</view> | |||
|  |                         </view> | |||
|  |                          <view class="form-item" v-for="index in 4" :key="index"> | |||
|  |                             <view class="">{{ getVal(goalsClassifyVOList.goalsRowDetailVOList[1],index) }}</view> | |||
|  |                         </view> | |||
|  |                     </view> | |||
|  |                     <view class="flex-1"> | |||
|  |                         <view class="form-item"> | |||
|  |                             <view class="fb">{{ $t('S_C_35') }}(%)</view> | |||
|  |                         </view> | |||
|  |                        <view class="form-item" v-for="index in 4" :key="index"> | |||
|  |                             <view class="">{{ getVal(goalsClassifyVOList.goalsRowDetailVOList[2],index) }}</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; | |||
|  |         }, | |||
|  |           getVal(obj,index){ | |||
|  |             let key = `m${index}` | |||
|  |             return obj[key] || '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> |