Skip to content

S
sfp-program
Commit ac914dee by kyle
Options

图表调整

parent fb2a816d
Showing with 109 additions and 54 deletions
common/common.ts
...@@ -34,5 +34,23 @@ export default { ...@@ -34,5 +34,23 @@ export default {
} }
} }
}); });
},
// 小数处理
/*
num:源数据
digitNum:保留几位小数
type:向上(1)取还是向下(2)取
*/
formatFloat(num,digitNum=2,type=1){
if(num){
if(type===1){
return Math.ceil(num.toFixed(digitNum) * Math.pow(10,digitNum)) / Math.pow(10,digitNum);
}else{
return Math.floor(num.toFixed(digitNum) * Math.pow(10,digitNum)) / Math.pow(10,digitNum)
}
}
} }
} }
\ No newline at end of file
pages/housePurchase/housePurchase.vue
...@@ -150,6 +150,16 @@ ...@@ -150,6 +150,16 @@
测算结果及建议 测算结果及建议
</view> </view>
</view> </view>
<view class="chartsLegend">
<radio-group @change="radioChange" style="display: flex;width: 100%;justify-content: space-evenly;">
<label v-for="(item, index) in chartsLegends" :key="item.value" style="display: flex;">
<view style="display: flex;">
<radio :value="item.value" :checked="index === chartsLegendsCurrent" />
</view>
<view>{{item.name}}</view>
</label>
</radio-group>
</view>
<view id="myEcharts" style="height: 430rpx;"></view> <view id="myEcharts" style="height: 430rpx;"></view>
<view style="text-align: center;color: #c3c1c1;font-size: 22rpx;"> <view style="text-align: center;color: #c3c1c1;font-size: 22rpx;">
差额 = 可实现的 - 你想要的 差额 = 可实现的 - 你想要的
...@@ -157,11 +167,14 @@ ...@@ -157,11 +167,14 @@
<view style="background: rgba(36,255,0,3%);padding: 6rpx 10rpx;border-radius: 12rpx;line-height: 1.5;"> <view style="background: rgba(36,255,0,3%);padding: 6rpx 10rpx;border-radius: 12rpx;line-height: 1.5;">
<view v-show="resultInfos.code == 'A001' || resultInfos.code =='A002'" style="display: flex;"> <view v-show="resultInfos.code == 'A001' || resultInfos.code =='A002'" style="display: flex;">
<text class="seriesNo">1</text> <text class="seriesNo">1</text>
<view>如您想实现<strong>{{resultInfos.nyear}}</strong>年后在<strong>{{resultInfos.provinceName}}-{{resultInfos.cityName}}</strong>地区购买<strong>{{resultInfos.preOrderSize}}</strong>㎡的房产，那么您还需要提高首付款到<strong>{{(resultInfos.pvDownPayment/10000).toFixed(2)}}</strong>万元，或您需提高年末预备投入房产资金到<strong>{{(resultInfos.houseSpecialPurpose/10000).toFixed(2)}}</strong>万元。 </view> <view>如您想实现<strong>{{resultInfos.nyear}}</strong>年后在<strong>{{resultInfos.provinceName}}-{{resultInfos.cityName}}</strong>地区购买
<strong>{{resultInfos.preOrderSize}}</strong>㎡的房产，那么您还需要提高首付款到
<strong>{{formatFloat(resultInfos.pvDownPayment/10000,2,1)}}</strong>万元，或您需提高年末预备投入房产资金到
<strong>{{formatFloat(resultInfos.houseSpecialPurpose/10000)}}</strong>万元。 </view>
</view> </view>
<view style="margin-top: 10rpx;display: flex;"> <view style="margin-top: 10rpx;display: flex;">
<text class="seriesNo">{{resultInfos.code == 'A001' || resultInfos.code =='A002'?'2':'1'}}</text> <text class="seriesNo">{{resultInfos.code == 'A001' || resultInfos.code =='A002'?'2':'1'}}</text>
<view>根据您的已备首付款和预备投入房产资金测算，您在<strong>{{resultInfos.nyear}}</strong>年后最高可实现购买房屋单价为<strong>{{(tipsPrice/10000).toFixed(2)}}</strong>万元/㎡，总价为<strong>{{(tipsTotalPrice/10000).toFixed(2)}}</strong>万元的房产。</view> <view>根据您的已备首付款和预备投入房产资金测算，您在<strong>{{resultInfos.nyear}}</strong>年后最高可实现购买房屋单价为<strong>{{formatFloat(tipsPrice/10000)}}</strong>万元/㎡，总价为<strong>{{formatFloat(tipsTotalPrice/10000)}}</strong>万元的房产。</view>
</view> </view>
</view> </view>
...@@ -174,7 +187,7 @@ ...@@ -174,7 +187,7 @@
<view class="content"> <view class="content">
<view class="left"> <view class="left">
<view class="realizable">可实现的</view> <view class="realizable">可实现的</view>
<view>{{housePurchaseInfo.nyear}}年后：{{(houseItem.fvPriceRealization/10000).toFixed(2)}}万元</view> <view>{{housePurchaseInfo.nyear}}年后：{{formatFloat(houseItem.fvPriceRealization/10000)}}万元</view>
<!-- <view class="now"> <!-- <view class="now">
现值：{{numberConverter(houseItem.pvPriceRealization)}}元 现值：{{numberConverter(houseItem.pvPriceRealization)}}元
</view> --> </view> -->
...@@ -182,7 +195,7 @@ ...@@ -182,7 +195,7 @@
<img src="../../static/images/vs.png" alt=""> <img src="../../static/images/vs.png" alt="">
<view class="right"> <view class="right">
<view class="realizable">你想要的</view> <view class="realizable">你想要的</view>
<view>{{housePurchaseInfo.nyear}}年后：{{(houseItem.fvPriceDesired/10000).toFixed(2)}}万元</view> <view>{{housePurchaseInfo.nyear}}年后：{{formatFloat(houseItem.fvPriceDesired/10000)}}万元</view>
<!-- <view class="now"> <!-- <view class="now">
现值：{{numberConverter(houseItem.pvPriceDesired)}}元 现值：{{numberConverter(houseItem.pvPriceDesired)}}元
</view> --> </view> -->
...@@ -191,13 +204,13 @@ ...@@ -191,13 +204,13 @@
<view class="line_bottom" v-show="houseItem.fvDifference <= 0"> <view class="line_bottom" v-show="houseItem.fvDifference <= 0">
<strong style="font-size: 36rpx;">恭喜您!</strong> <strong style="font-size: 36rpx;">恭喜您!</strong>
<text>经过测算，</text> <text>经过测算，</text>
<text v-if="houseItem.fvDifference < 0">您的{{getResultTitle(houseItem.priceType)}}已超出目标值{{Math.abs((houseItem.fvPriceRealization/10000).toFixed(2)-(houseItem.fvPriceDesired/10000).toFixed(2)).toFixed(2)}}万元，</text> <text v-if="houseItem.fvDifference < 0">您的{{getResultTitle(houseItem.priceType)}}已超出目标值{{Math.abs(formatFloat(houseItem.fvPriceRealization/10000)-formatFloat((houseItem.fvPriceDesired/10000))).toFixed(2)}}万元，</text>
<text v-if="houseItem.fvDifference == 0">您的{{getResultTitle(houseItem.priceType)}}在</text> <text v-if="houseItem.fvDifference == 0">您的{{getResultTitle(houseItem.priceType)}}在</text>
<text>{{resultInfos.nyear}}年后可以达成您的目标.</text> <text>{{resultInfos.nyear}}年后可以达成您的目标.</text>
</view> </view>
<view class="line_bottom fail" v-show="houseItem.fvDifference > 0"> <view class="line_bottom fail" v-show="houseItem.fvDifference > 0">
<strong style="font-size: 36rpx;">很遗憾！</strong> <strong style="font-size: 36rpx;">很遗憾！</strong>
经过测算，距离实现您的{{getResultTitle(houseItem.priceType)}}目标还差{{Math.abs(houseItem.fvDifference/10000).toFixed(2)}}万元。您可以参考我们给出的建议进行调整。 经过测算，距离实现您的{{getResultTitle(houseItem.priceType)}}目标还差{{Math.abs(formatFloat(houseItem.fvDifference/10000))}}万元。您可以参考我们给出的建议进行调整。
</view> </view>
</view> </view>
</view> </view>
...@@ -234,6 +247,19 @@ ...@@ -234,6 +247,19 @@
export default{ export default{
data(){ data(){
return{ return{
chartsLegendsCurrent: 0,
chartsLegends:[{
value: '1',
name: '总房款',
checked: 'true'
},
{
value: '3',
name: '首付款'
},{
value: '4',
name: '总贷款'
}],
isNeedOfficialAccountQrcode:true, isNeedOfficialAccountQrcode:true,
tipsPrice:null, tipsPrice:null,
tipsTotalPrice:null, tipsTotalPrice:null,
...@@ -267,6 +293,7 @@ ...@@ -267,6 +293,7 @@
commercialLoansParams:[], commercialLoansParams:[],
downPaymentList:[], downPaymentList:[],
totalLoanList:[], totalLoanList:[],
totalPriceList:[],
resultInfos:{ resultInfos:{
nyear:null, //几年后购房 nyear:null, //几年后购房
preOrderSize:null, //预购面积 preOrderSize:null, //预购面积
...@@ -291,6 +318,23 @@ ...@@ -291,6 +318,23 @@
this.provCityQry(); this.provCityQry();
}, },
methods:{ methods:{
radioChange: function(evt) {
for (let i = 0; i < this.chartsLegends.length; i++) {
if (this.chartsLegends[i].value === evt.detail.value) {
this.chartsLegendsCurrent = i;
this.drawLine(evt.detail.value)
break;
}
}
},
/*
num:源数据
digitNum:保留几位小数
type:向上(1)取还是向下(2)取
*/
formatFloat(num,digitNum=2,type=1){
return common.formatFloat(num,digitNum=2,type=1)
},
viewPlanningParams(){ viewPlanningParams(){
// 查看规划参数 // 查看规划参数
this.paramsSelected=this.dialogIsShow=true; this.paramsSelected=this.dialogIsShow=true;
...@@ -343,58 +387,48 @@ ...@@ -343,58 +387,48 @@
} }
this.queryCommercialHousingPrice(); this.queryCommercialHousingPrice();
}, },
drawLine() { drawLine(type=1) {
this.downPaymentList = this.totalLoanList = []; // 1是总房价
// 3是首付
// 4是总贷款
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('myEcharts')); this.myChart = echarts.init(document.getElementById('myEcharts'));
// 绘制图表 // 绘制图表
let list1;
let showLists;
if(this.housePurchasePrices.length){ if(this.housePurchasePrices.length){
const list1 = this.housePurchasePrices.filter((item)=>{ if(type){
return item.priceType == 3 list1 = this.housePurchasePrices.filter((item)=>{
})[0]; return item.priceType == type
this.downPaymentList = [].concat(list1.pvPriceRealization,list1.pvPriceDesired,-(list1.pvDifference)) })[0];
const list2 = this.housePurchasePrices.filter((item)=>{ showLists = [].concat(this.formatFloat(list1.pvPriceRealization / 10000),this.formatFloat(list1.pvPriceDesired/10000),
return item.priceType == 4 {value:this.formatFloat(Math.abs(list1.pvDifference)/10000),itemStyle:{color:'#ff0000'}})
})[0]; }
this.totalLoanList = [].concat(list2.fvPriceRealization,list2.fvPriceDesired,-(list2.fvDifference))
} }
this.myChart.setOption({ this.myChart.setOption({
legend: { legend: {},
data: ['首付款(万元)', '总贷款金额(万元)'] grid: {
}, left: '20%', // 调整这个属性
grid: { },
left: '20%', // 调整这个属性 xAxis: {
}, data: ['可实现的', '你想要的', '差额'],
xAxis: { axisTick:{//坐标轴刻度相关设置。
data: ['可实现的', '你想要的', '差额'], show: false,
axisTick:{//坐标轴刻度相关设置。 },
show: false, },
}, yAxis: {},
}, series: [
yAxis: {}, {
series: [ name:'',
{ data: showLists,
name:'首付款(万元)', type: 'bar',
data: this.downPaymentList.map(item=>(item/10000).toFixed(2)), label:{
type: 'bar', show:true,
stack: 'x', position:'inside'
label:{ }
show:true,
position:'inside'
} }
}, ]
{ });
name:'总贷款金额(万元)',
data: this.totalLoanList.map(item=>(item/10000).toFixed(2)),
type: 'bar',
stack: 'x',
label:{
show:true,
position:'inside',
}
}
]
});
}, },
provCityQry(){ provCityQry(){
api.provCityQry({insurerId:888}).then((res)=>{ api.provCityQry({insurerId:888}).then((res)=>{
...@@ -570,9 +604,6 @@ ...@@ -570,9 +604,6 @@
this.planningParams = {}; this.planningParams = {};
this.resultFlag = false; this.resultFlag = false;
} }
},
mounted(){
// this.drawLine();
} }
} }
</script> </script>
...@@ -727,6 +758,11 @@ ...@@ -727,6 +758,11 @@
} }
} }
} }
.chartsLegend{
button{
margin-right: 10rpx;
}
}
.mask{ .mask{
position: fixed; position: fixed;
left: 0; left: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment