429 lines
12 KiB
Vue
429 lines
12 KiB
Vue
<template>
|
||
<view class="tax-summary-page">
|
||
<tn-navbar
|
||
fixed
|
||
bg-color="rgba(255, 255, 255, 0.01)"
|
||
:bottom-shadow="false"
|
||
:placeholder="false"
|
||
/>
|
||
|
||
<view class="tax-summary"
|
||
:style="{'background':'url('+ menuData.pic +') no-repeat','backgroundPosition':'center center','backgroundSize':'100% 100%'}"
|
||
>
|
||
<view class="summary-content">
|
||
<view class="summary-info">
|
||
<view class="title">{{ menuData.title }}</view>
|
||
<view class="desc">{{ menuData.description }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tax-container tn-pt-lg" v-if="flag">
|
||
<view class="tn-radius tn-m-lg">
|
||
<view class="title-container">
|
||
<view class="left">
|
||
<view class="title">{{taxData.title}}</view>
|
||
<view class="desc tn-text-lg">
|
||
<tn-icon name="clock" size="36rpx"/>
|
||
{{taxData.dateMonth}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tax-detail tn-pt-lg">
|
||
<view class="summary introduction-content tn-border tn-shadow-sm tn-p-sm tn-radius" :style="{'borderColor':color,'boxShadow':'0 0.3125rem 1.875rem -1.25rem '+ color}">
|
||
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
||
预算收入执行情况
|
||
</view>
|
||
<view class="tn-text-lg" style="text-indent: 2em;">
|
||
{{taxData.pre_intro}}
|
||
</view>
|
||
<view class="tax-review tn-flex tn-flex-wrap tn-flex-center-between tn-p">
|
||
<view class="review-item tn-pt tn-pb tn-border tn-border-none-top tn-border-none-left tn-grey-disabled_border">
|
||
<view class="tn-text-lg tn-text-center">
|
||
财政收入
|
||
</view>
|
||
<view class="tn-text-center tn-pt tn-text-bold tn-text-2xl">
|
||
<tn-count-scroll :value="taxData.tax_income" :text-color="color"/>
|
||
</view>
|
||
</view>
|
||
<view class="review-item tn-pt tn-pb tn-border tn-border-none-top tn-border-none-right tn-border-none-left tn-grey-disabled_border">
|
||
<view class="tn-text-lg tn-text-center">
|
||
同比增长
|
||
</view>
|
||
<view class="tn-text-center tn-pt tn-text-bold tn-text-2xl">
|
||
<tn-count-scroll :value="taxData.income_rate" :text-color="color"/>%
|
||
</view>
|
||
</view>
|
||
<view class="review-item tn-pt tn-pb tn-border tn-border-none-top tn-border-none-bottom tn-border-none-left tn-grey-disabled_border">
|
||
<view class="tn-text-lg tn-text-center">
|
||
税收入库
|
||
</view>
|
||
<view class="tn-text-center tn-pt tn-text-bold tn-text-2xl">
|
||
<tn-count-scroll :value="taxData.tax_receipt" :text-color="color"/>
|
||
</view>
|
||
</view>
|
||
<view class="review-item tn-pt tn-pb tn-border tn-border-none-bottom tn-border-none-right tn-border-none-top tn-border-none-left tn-grey-disabled_border">
|
||
<view class="tn-text-lg tn-text-center">
|
||
同比增长
|
||
</view>
|
||
<view class="tn-text-center tn-pt tn-text-bold tn-text-2xl">
|
||
<tn-count-scroll :value="taxData.receipt_rate" :text-color="color"/>%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="text tn-text-lg" style="text-indent: 2em;">
|
||
{{taxData.parkName}}实现财政收入<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.tax_income}}</span>亿元，
|
||
同比增长<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.income_rate}}%</span>，
|
||
税收入库<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.tax_receipt}}</span>亿元，
|
||
同比增长<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.receipt_rate}}%</span>。
|
||
</view>
|
||
|
||
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
||
年度财税收入目标任务
|
||
</view>
|
||
|
||
<view class="chart-box">
|
||
<ucharts-ring :chartData="targetChartData" title="目标任务" :val="taxData.target" :radius="80" position="bottom"/>
|
||
</view>
|
||
|
||
<view class="text tn-text-lg" style="text-indent: 2em;">
|
||
{{taxData.parkName}}本年财税收入目标任务为<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.target}}</span>亿元，
|
||
其中税收<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.tax_target}}</span>亿元，
|
||
土地出让收入<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.land_target}}</span>亿元，
|
||
配套费收入<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.support_target}}</span>亿元，
|
||
国资收益<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.state_target}}</span>亿元。
|
||
</view>
|
||
|
||
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
||
预算支出执行情况
|
||
</view>
|
||
<view class="chart-box">
|
||
<ucharts-ring :chartData="outChartData" :radius="80" position="bottom"/>
|
||
</view>
|
||
<view class="text tn-text-lg" style="text-indent: 2em;">
|
||
{{taxData.parkName}}支出预算合计<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{taxData.expend}}</span>亿元。
|
||
<mp-html :content="expend_str"/>
|
||
</view>
|
||
|
||
<view v-if="taxData.explan" class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
||
补充说明
|
||
</view>
|
||
|
||
<view v-if="taxData.explan" class="text tn-text-lg" style="text-indent: 2em;line-height: 1.8em;color: #444444;">
|
||
<mp-html :content="taxData.explan"/>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<tn-date-time-picker v-model="dateTimeValue" v-model:open="openDateTimePicker" init-current-date-time format="YYYY-MM" mode="yearmonth" @confirm="getDate"/>
|
||
|
||
<view class="picker-btn" @click="showPicker">
|
||
<tn-button shape="circle" type="success" size="lg" shadow shadow-color="tn-type-primary_shadow">
|
||
<tn-icon name="history" :size="50"/>
|
||
</tn-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
import request from '@/utils/request';
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import UchartsRing from '@/pages/components/ucharts-ring.vue';
|
||
import TnCountScroll from '@/uni_modules/tuniaoui-vue3/components/count-scroll/src/count-scroll.vue'
|
||
import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue'
|
||
import onShare from '@/utils/share';
|
||
|
||
const { onShareAppMessage,onShareTimeline } = onShare()
|
||
|
||
const shareTitle = ref()
|
||
|
||
const shareParam = ref()
|
||
|
||
const color = ref();
|
||
|
||
const flag = ref(false);
|
||
|
||
const openDateTimePicker = ref(false)
|
||
|
||
const orgId = ref();
|
||
|
||
const taxData = reactive({
|
||
dateMonth:'',
|
||
title:'',
|
||
target:0,
|
||
parkName:'',
|
||
tax_income:0,
|
||
income_rate:0,
|
||
tax_receipt:0,
|
||
receipt_rate:0,
|
||
tax_target:0,
|
||
land_target:0,
|
||
support_target:0,
|
||
state_target:0,
|
||
expend:0,
|
||
expendData:'',
|
||
pre_intro:'',
|
||
explan:''
|
||
})
|
||
|
||
const expend_str = ref('其中，');
|
||
|
||
const targetChartData = ref({})
|
||
|
||
const outChartData = ref({})
|
||
|
||
const dateTimeValue = ref();
|
||
|
||
const menuData = reactive({
|
||
pic:'',
|
||
title:'',
|
||
color:'',
|
||
description:''
|
||
})
|
||
|
||
const showPicker = () => {
|
||
openDateTimePicker.value = true
|
||
}
|
||
|
||
const getDate = (value:string) => {
|
||
getTaxData(value)
|
||
}
|
||
|
||
const getMenuData = (id:number) => {
|
||
request({
|
||
url:'/front/report/menu',
|
||
method:'GET',
|
||
data:{ menuId:id }
|
||
}).then((res:any)=>{
|
||
if(res.data.code === 0){
|
||
Object.assign(menuData,res.data.data)
|
||
shareParam.value = res.data.data.menuId
|
||
color.value = res.data.data.color
|
||
}else{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title:res.data.message
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const getTaxData = (date:string) => {
|
||
request({
|
||
url:'/front/report/tax/summary',
|
||
method:'GET',
|
||
data:{id:orgId.value,month:date}
|
||
}).then((res:any) => {
|
||
if(res.data.code === 0){
|
||
Object.assign(taxData,res.data.data)
|
||
shareTitle.value = res.data.data.title
|
||
setTimeout(() => {
|
||
let target_res = {
|
||
series: [
|
||
{
|
||
data: [{"name":"税收","value":Number(taxData.tax_target)},
|
||
{"name":"土地出让收入","value":Number(taxData.land_target)},
|
||
{"name":"配套费收入","value":Number(taxData.support_target)},
|
||
{"name":"国资收益","value":Number(taxData.state_target)}]
|
||
}
|
||
]
|
||
};
|
||
let expendData = JSON.parse(res.data.data.expendData)
|
||
expendData.forEach((item:any)=>{
|
||
item.value = Number(item.value)
|
||
expend_str.value += item.name+item.value+'亿元'
|
||
})
|
||
let out_res = {
|
||
series: [
|
||
{
|
||
data: expendData
|
||
}
|
||
]
|
||
};
|
||
targetChartData.value = JSON.parse(JSON.stringify(target_res));
|
||
outChartData.value = JSON.parse(JSON.stringify(out_res));
|
||
}, 500);
|
||
}else{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title:res.data.message
|
||
})
|
||
}
|
||
flag.value = true
|
||
})
|
||
}
|
||
|
||
onShareAppMessage(() => {
|
||
return {
|
||
title:shareTitle.value,
|
||
path:'/pages/report/tax/child/index?mid=' + shareParam.value + '&id=' + orgId.value
|
||
}
|
||
})
|
||
|
||
onShareTimeline(() => {
|
||
return {
|
||
title:shareTitle.value,
|
||
path:'/pages/report/tax/child/index?mid=' + shareParam.value + '&id=' + orgId.value
|
||
}
|
||
})
|
||
|
||
onLoad((option)=>{
|
||
getMenuData(option.mid)
|
||
orgId.value = option.id
|
||
})
|
||
|
||
onMounted(()=>{
|
||
getTaxData('')
|
||
})
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.chart-box {
|
||
height: 600rpx;
|
||
}
|
||
.tax-summary {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 450rpx;
|
||
z-index: 2;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
0deg,
|
||
rgba(0, 0, 0, 0.4) 0%,
|
||
rgba(0, 0, 0, 0) 100%
|
||
);
|
||
z-index: 1;
|
||
}
|
||
|
||
.summary-content {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 80rpx;
|
||
width: 100%;
|
||
padding: 0rpx 30rpx;
|
||
z-index: 2;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.summary-info {
|
||
flex: 1;
|
||
color: #fff;
|
||
|
||
.title {
|
||
font-size: 52rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 8rpx;
|
||
text-shadow: 4rpx 4rpx 10rpx #585858;
|
||
}
|
||
.desc {
|
||
font-size: 34rpx;
|
||
margin-top: 20rpx;
|
||
letter-spacing: 4rpx;
|
||
text-shadow: 4rpx 4rpx 10rpx #585858;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tax-container{
|
||
position: relative;
|
||
top: -40rpx;
|
||
z-index: 99;
|
||
background-color: #fff;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
.title-container {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
line-height: 1;
|
||
|
||
.left {
|
||
flex: 1;
|
||
|
||
.title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
.desc {
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
flex-grow: 0;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-left: 20rpx;
|
||
|
||
.icon {
|
||
font-size: 70rpx;
|
||
}
|
||
|
||
.text {
|
||
font-size: 26rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.tax-detail {
|
||
position: relative;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
z-index: 10;
|
||
.text{
|
||
text-align: justify;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
|
||
.topic-item {
|
||
& + .topic-item {
|
||
margin-top: 36rpx;
|
||
}
|
||
}
|
||
.tax-review{
|
||
.review-item{
|
||
width: 50%;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.park-container {
|
||
width: fit-content;
|
||
height:100%;
|
||
.scroll-item {
|
||
flex-grow: 1;
|
||
.empty {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
.title {
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.picker-btn{
|
||
position: fixed;
|
||
z-index: 999;
|
||
right: 40rpx;
|
||
bottom: 60rpx;
|
||
}
|
||
</style> |