459 lines
17 KiB
Vue
459 lines
17 KiB
Vue
<template>
|
||
<view class="economic-detail-page">
|
||
<TnNavbar
|
||
fixed
|
||
bg-color="rgba(255, 255, 255, 0.01)"
|
||
:bottom-shadow="false"
|
||
:placeholder="false"
|
||
/>
|
||
|
||
<view class="economic-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="summary-detail" v-if="flag">
|
||
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center tn-border-bottom tn-gray-light_border" :style="{'color':color}">
|
||
{{dateTimeValue.replace('-','年01-')}}月{{menuData.title}}概况
|
||
</view>
|
||
<view class="detail tn-ml-lg tn-mr-lg" v-if="detailData">
|
||
|
||
|
||
<view class="title tn-p tn-text-bold tn-text-2xl tn-text-center">
|
||
江津工业园
|
||
</view>
|
||
<view class="block tn-shadow tn-p tn-radius" v-if="detailData[1]">
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="区级项目" mode="vLine" size="lg"/>
|
||
<view class="tn-pt tn-pl-sm">
|
||
<span class="tn-text-2xl tn-text-bold">{{detailData[1].project_num}}</span>个
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="完成投资" mode="vLine" size="lg"/>
|
||
<view class="tn-pl-sm">
|
||
<span class="tn-text-xl tn-text-bold">{{detailData[1].project_invest}}</span>亿
|
||
<view>
|
||
同比<span v-if="detailData[1].increase>=0" class="tn-text-bold" style="color: red;">+{{detailData[1].increase}}%</span>
|
||
<span v-else class="tn-text-bold" style="color: green;">{{detailData[1].increase}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="投资进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[1].access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[1].access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[1].access}}%</span>
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="超时序进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[1].over_access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[1].over_access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[1].over_access}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title tn-p tn-text-bold tn-text-2xl tn-text-center">
|
||
双福工业园
|
||
</view>
|
||
<view class="block tn-shadow tn-p tn-radius" v-if="detailData[2]">
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="区级项目" mode="vLine" size="lg"/>
|
||
<view class="tn-pt tn-pl-sm">
|
||
<span class="tn-text-2xl tn-text-bold">{{detailData[2].project_num}}</span>个
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="完成投资" mode="vLine" size="lg"/>
|
||
<view class="tn-pl-sm">
|
||
<span class="tn-text-xl tn-text-bold">{{detailData[2].project_invest}}</span>亿
|
||
<view>
|
||
同比<span v-if="detailData[2].increase>=0" class="tn-text-bold" style="color: red;">+{{detailData[2].increase}}%</span>
|
||
<span v-else class="tn-text-bold" style="color: green;">{{detailData[2].increase}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="投资进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[2].access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[2].access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[2].access}}%</span>
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="超时序进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[2].over_access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[2].over_access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[2].over_access}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title tn-p tn-text-bold tn-text-2xl tn-text-center">
|
||
珞璜工业园
|
||
</view>
|
||
<view class="block tn-shadow tn-p tn-radius" v-if="detailData[5]">
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="区级项目" mode="vLine" size="lg"/>
|
||
<view class="tn-pt tn-pl-sm">
|
||
<span class="tn-text-2xl tn-text-bold">{{detailData[5].project_num}}</span>个
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="完成投资" mode="vLine" size="lg"/>
|
||
<view class="tn-pl-sm">
|
||
<span class="tn-text-xl tn-text-bold">{{detailData[5].project_invest}}</span>亿
|
||
<view>
|
||
同比<span v-if="detailData[5].increase>=0" class="tn-text-bold" style="color: red;">+{{detailData[5].increase}}%</span>
|
||
<span v-else class="tn-text-bold" style="color: green;">{{detailData[5].increase}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="投资进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[5].access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[5].access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[5].access}}%</span>
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="超时序进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[5].over_access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[5].over_access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[5].over_access}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title tn-p tn-text-bold tn-text-2xl tn-text-center">
|
||
德感工业园
|
||
</view>
|
||
<view class="block tn-shadow tn-p tn-radius" v-if="detailData[4]">
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="区级项目" mode="vLine" size="lg"/>
|
||
<view class="tn-pt tn-pl-sm">
|
||
<span class="tn-text-2xl tn-text-bold">{{detailData[4].project_num}}</span>个
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="完成投资" mode="vLine" size="lg"/>
|
||
<view class="tn-pl-sm">
|
||
<span class="tn-text-xl tn-text-bold">{{detailData[4].project_invest}}</span>亿
|
||
<view>
|
||
同比<span v-if="detailData[4].increase>=0" class="tn-text-bold" style="color: red;">+{{detailData[4].increase}}%</span>
|
||
<span v-else class="tn-text-bold" style="color: green;">{{detailData[4].increase}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="投资进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[4].access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[4].access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[4].access}}%</span>
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="超时序进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[4].over_access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[4].over_access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[4].over_access}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title tn-p tn-text-bold tn-text-2xl tn-text-center">
|
||
白沙工业园
|
||
</view>
|
||
<view class="block tn-shadow tn-p tn-radius" v-if="detailData[3]">
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="区级项目" mode="vLine" size="lg"/>
|
||
<view class="tn-pt tn-pl-sm">
|
||
<span class="tn-text-2xl tn-text-bold">{{detailData[3].project_num}}</span>个
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="完成投资" mode="vLine" size="lg"/>
|
||
<view class="tn-pl-sm">
|
||
<span class="tn-text-xl tn-text-bold">{{detailData[3].project_invest}}</span>亿
|
||
<view>
|
||
同比<span v-if="detailData[3].increase>=0" class="tn-text-bold" style="color: red;">+{{detailData[3].increase}}%</span>
|
||
<span v-else class="tn-text-bold" style="color: green;">{{detailData[3].increase}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-flex tn-flex-center-between">
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="投资进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[3].access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[3].access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[3].access}}%</span>
|
||
</view>
|
||
</view>
|
||
<view class="item tn-p-sm">
|
||
<TnTitle title="超时序进度" mode="vLine" size="lg"/>
|
||
<view class="tn-pt-xs tn-pl-sm">
|
||
<span v-if="detailData[3].over_access>=0" class="tn-text-bold tn-text-xl" style="color: red;">+{{detailData[3].over_access}}%</span>
|
||
<span v-else class="tn-text-bold tn-text-xl" style="color: green;">{{detailData[3].over_access}}%</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="text">
|
||
<p v-if="detailData[2]">双福工业园<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[2].project_num}}</text>个区级项目完成投资<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[2].project_invest}}</text>亿元，
|
||
同比增长<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[2].increase}}</text>%，
|
||
投资进度为<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[2].access}}</text>%，
|
||
超序时进度<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[2].over_access}}</text>%。{{detailData[2].explan}}</p>
|
||
|
||
<p v-if="detailData[3]">白沙工业园<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[3].project_num}}</text>个区级项目完成投资<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[3].project_invest}}</text>亿元，
|
||
同比增长<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[3].increase}}</text>%，
|
||
投资进度为<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[3].access}}</text>%，
|
||
超序时进度<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[3].over_access}}</text>%。{{detailData[3].explan}}</p>
|
||
|
||
<p v-if="detailData[4]">德感工业园<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[4].project_num}}</text>个区级项目完成投资<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[4].project_invest}}</text>亿元，
|
||
同比增长<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[4].increase}}</text>%，
|
||
投资进度为<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[4].access}}</text>%，
|
||
超序时进度<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[4].over_access}}</text>%。{{detailData[4].explan}}</p>
|
||
|
||
<p v-if="detailData[5]">珞璜工业园<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[5].project_num}}</text>个区级项目完成投资<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[5].project_invest}}</text>亿元，
|
||
同比增长<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[5].increase}}</text>%，
|
||
投资进度为<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[5].access}}</text>%，
|
||
超序时进度<text class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{detailData[5].over_access}}</text>%。{{detailData[5].explan}}</p>
|
||
</view> -->
|
||
</view>
|
||
<view class="detail tn-flex-center-center" v-else>
|
||
<TnEmpty mode="data" size="lg" color="#ccc" v-if="isEmpty"/>
|
||
</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 { reactive, ref } from 'vue';
|
||
import request from '@/utils/request';
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue'
|
||
import TnEmpty from '@/uni_modules/tuniaoui-vue3/components/empty/src/empty.vue'
|
||
import onShare from '@/utils/share';
|
||
|
||
const { onShareAppMessage,onShareTimeline } = onShare()
|
||
|
||
const shareTitle = ref()
|
||
|
||
const shareParam = ref()
|
||
|
||
const flag = ref(false)
|
||
|
||
const color = ref()
|
||
|
||
const isEmpty = ref(false)
|
||
|
||
const menuData = reactive({
|
||
pic:'',
|
||
title:'',
|
||
color:'',
|
||
description:'',
|
||
})
|
||
|
||
const detailData = ref();
|
||
|
||
const dateTimeValue = ref();
|
||
|
||
const openDateTimePicker = ref(false)
|
||
|
||
const getDate = (date:string) => {
|
||
detailData.value = null
|
||
getSummaryData(date)
|
||
}
|
||
|
||
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)
|
||
color.value = res.data.data.color
|
||
shareParam.value = res.data.data.menuId
|
||
}else{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title:res.data.message
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const showPicker = () => {
|
||
openDateTimePicker.value = true
|
||
}
|
||
|
||
const getDateMonth = () => {
|
||
let datetime = new Date();
|
||
let month:any = datetime.getMonth()
|
||
month = month < 10?'0' + month : month
|
||
let dateMonth = datetime.getFullYear() + '-' + month
|
||
dateTimeValue.value = dateMonth;
|
||
}
|
||
|
||
const getSummaryData = (month:string) => {
|
||
request({
|
||
url:'/front/report/eco',
|
||
method:'GET',
|
||
data:{
|
||
month: month,
|
||
field: 'project'
|
||
}
|
||
}).then((res:any)=>{
|
||
if(res.data.code === 0){
|
||
let temp = []
|
||
res.data.data.map((item:any) =>{
|
||
temp[item.parkId] = item
|
||
})
|
||
|
||
detailData.value = temp
|
||
}else{
|
||
isEmpty.value = true
|
||
}
|
||
})
|
||
flag.value = true
|
||
}
|
||
|
||
onShareAppMessage(() => {
|
||
return {
|
||
title:shareTitle.value,
|
||
path:'/pages/report/economic/project/index?id=' + shareParam.value
|
||
}
|
||
})
|
||
|
||
onShareTimeline(() => {
|
||
return {
|
||
title:shareTitle.value,
|
||
path:'/pages/report/economic/project/index?id=' + shareParam.value
|
||
}
|
||
})
|
||
|
||
onLoad((option)=>{
|
||
getMenuData(option.id)
|
||
getDateMonth()
|
||
getSummaryData(dateTimeValue.value)
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.table{
|
||
text-indent: 0;
|
||
display: flex;
|
||
border-radius: 0;
|
||
text-align: center;
|
||
border-color: v-bind(color);
|
||
.tr{
|
||
line-height: 2em;
|
||
font-size: 28rpx;
|
||
border-color: v-bind(color)
|
||
}
|
||
}
|
||
.economic-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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.summary-detail{
|
||
position: relative;
|
||
background-color: #fff;
|
||
top: -40rpx;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
z-index: 9;
|
||
.text{
|
||
letter-spacing: 4rpx;
|
||
text-align: justify;
|
||
}
|
||
.detail{
|
||
min-height: calc(100vh - 580rpx);
|
||
.block{
|
||
background: linear-gradient(0deg,rgba(0, 150, 255, 0.4),rgba(0, 150, 255, 0.05));
|
||
.item{
|
||
width: calc(100% / 2 - 10rpx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.picker-btn{
|
||
position: fixed;
|
||
z-index: 999;
|
||
right: 40rpx;
|
||
bottom: 60rpx;
|
||
}
|
||
</style> |