master/xcxFront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
xcxFront/pages/report/economic/tech/index.vue

520 lines
18 KiB
Vue
Raw Normal View History

first commit
2024-11-05 10:14:41 +08:00
<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-disabled_border" :style="{'color':color}">
{{dateTimeValue.replace('-','年01-')}}月{{menuData.title}}概况
</view>
<view class="detail tn-text-lg tn-p-lg" style="color:#444" v-if="detailData">
<view class="tn-text-bold tn-text-xl tn-pb-lg tn-text-center">
江津工业园
</view>
<view class="block tn-p-sm tn-shadow tn-shadow-md tn-radius tn-mb-lg tn-flex tn-flex-center-between" v-if="detailData[1]">
<view class="row tn-text-center" style="height: 425rpx;">
<view class="item total tn-p-sm tn-radius tn-h-full tn-flex tn-flex-wrap tn-flex-center-start">
<view class="tn-w-full">
<TnTitle title="高新技术企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[1].high_tech}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="引育科技型企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[1].tech_type}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="专精特新企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[1].special}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="国家小巨人企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[1].little_giant}}家
</view>
</view>
</view>
</view>
<view class="row">
<view class="item tn-p-sm tn-w-full tn-radius tn-mb-sm" style="height: 180rpx;">
<TnTitle title="战新产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[1].new_output}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[1].new_increase>=0?'red':'green'}">
{{detailData[1].new_increase>=0?'+':''}}{{detailData[1].new_increase}}%
</span>
</view>
</view>
<view class="item tn-p-sm tn-w-full tn-radius" style="height: 180rpx;">
<TnTitle title="数字经济产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[1].digital}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[1].digital_increase>=0?'red':'green'}">
{{detailData[1].digital_increase>=0?'+':''}}{{detailData[1].digital_increase}}%
</span>
</view>
</view>
</view>
</view>
<view class="tn-text-bold tn-text-xl tn-pb-lg tn-text-center">
双福工业园
</view>
<view class="block tn-p-sm tn-shadow tn-shadow-md tn-radius tn-mb-lg tn-flex tn-flex-center-between" v-if="detailData[2]">
<view class="row tn-text-center" style="height: 425rpx;">
<view class="item total tn-p-sm tn-radius tn-h-full tn-flex tn-flex-wrap tn-flex-center-start">
<view class="tn-w-full">
<TnTitle title="高新技术企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[2].high_tech}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="引育科技型企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[2].tech_type}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="专精特新企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[2].special}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="国家小巨人企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[2].little_giant}}家
</view>
</view>
</view>
</view>
<view class="row">
<view class="item tn-p-sm tn-w-full tn-radius tn-mb-sm" style="height: 180rpx;">
<TnTitle title="战新产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[2].new_output}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[2].new_increase>=0?'red':'green'}">
{{detailData[2].new_increase>=0?'+':''}}{{detailData[2].new_increase}}%
</span>
</view>
</view>
<view class="item tn-p-sm tn-w-full tn-radius" style="height: 180rpx;">
<TnTitle title="数字经济产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[2].digital}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[2].digital_increase>=0?'red':'green'}">
{{detailData[2].digital_increase>=0?'+':''}}{{detailData[2].digital_increase}}%
</span>
</view>
</view>
</view>
</view>
<view class="tn-text-bold tn-text-xl tn-pb-lg tn-text-center">
珞璜工业园
</view>
<view class="block tn-p-sm tn-shadow tn-shadow-md tn-radius tn-mb-lg tn-flex tn-flex-center-between" v-if="detailData[5]">
<view class="row tn-text-center" style="height: 425rpx;">
<view class="item total tn-p-sm tn-radius tn-h-full tn-flex tn-flex-wrap tn-flex-center-start">
<view class="tn-w-full">
<TnTitle title="高新技术企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[5].high_tech}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="引育科技型企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[5].tech_type}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="专精特新企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[5].special}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="国家小巨人企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[5].little_giant}}家
</view>
</view>
</view>
</view>
<view class="row">
<view class="item tn-p-sm tn-w-full tn-radius tn-mb-sm" style="height: 180rpx;">
<TnTitle title="战新产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[5].new_output}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[5].new_increase>=0?'red':'green'}">
{{detailData[5].new_increase>=0?'+':''}}{{detailData[5].new_increase}}%
</span>
</view>
</view>
<view class="item tn-p-sm tn-w-full tn-radius" style="height: 180rpx;">
<TnTitle title="数字经济产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[5].digital}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[5].digital_increase>=0?'red':'green'}">
{{detailData[5].digital_increase>=0?'+':''}}{{detailData[5].digital_increase}}%
</span>
</view>
</view>
</view>
</view>
<view class="tn-text-bold tn-text-xl tn-pb-lg tn-text-center">
德感工业园
</view>
<view class="block tn-p-sm tn-shadow tn-shadow-md tn-radius tn-mb-lg tn-flex tn-flex-center-between" v-if="detailData[4]">
<view class="row tn-text-center" style="height: 425rpx;">
<view class="item total tn-p-sm tn-radius tn-h-full tn-flex tn-flex-wrap tn-flex-center-start">
<view class="tn-w-full">
<TnTitle title="高新技术企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[4].high_tech}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="引育科技型企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[4].tech_type}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="专精特新企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[4].special}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="国家小巨人企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[4].little_giant}}家
</view>
</view>
</view>
</view>
<view class="row">
<view class="item tn-p-sm tn-w-full tn-radius tn-mb-sm" style="height: 180rpx;">
<TnTitle title="战新产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[4].new_output}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[4].new_increase>=0?'red':'green'}">
{{detailData[4].new_increase>=0?'+':''}}{{detailData[4].new_increase}}%
</span>
</view>
</view>
<view class="item tn-p-sm tn-w-full tn-radius" style="height: 180rpx;">
<TnTitle title="数字经济产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[4].digital}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[4].digital_increase>=0?'red':'green'}">
{{detailData[4].digital_increase>=0?'+':''}}{{detailData[4].digital_increase}}%
</span>
</view>
</view>
</view>
</view>
<view class="tn-text-bold tn-text-xl tn-pb-lg tn-text-center">
白沙工业园
</view>
<view class="block tn-p-sm tn-shadow tn-shadow-md tn-radius tn-mb-lg tn-flex tn-flex-center-between" v-if="detailData[3]">
<view class="row tn-text-center" style="height: 425rpx;">
<view class="item total tn-p-sm tn-radius tn-h-full tn-flex tn-flex-wrap tn-flex-center-start">
<view class="tn-w-full">
<TnTitle title="高新技术企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[3].high_tech}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="引育科技型企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[3].tech_type}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="专精特新企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[3].special}}家
</view>
</view>
<view class="tn-w-full">
<TnTitle title="国家小巨人企业" mode="vLine"/>
<view class="tn-text-xl tn-text-bold tn-text-left tn-pl">
{{detailData[3].little_giant}}家
</view>
</view>
</view>
</view>
<view class="row">
<view class="item tn-p-sm tn-w-full tn-radius tn-mb-sm" style="height: 180rpx;">
<TnTitle title="战新产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[3].new_output}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[3].new_increase>=0?'red':'green'}">
{{detailData[3].new_increase>=0?'+':''}}{{detailData[3].new_increase}}%
</span>
</view>
</view>
<view class="item tn-p-sm tn-w-full tn-radius" style="height: 180rpx;">
<TnTitle title="数字经济产值" mode="vLine" size="lg"/>
<view class="tn-text-bold tn-text-2xl tn-ml-sm">
{{detailData[3].digital}}<span class="tn-text-lg" style="font-weight: normal;">亿元</span>
</view>
<view class="tn-ml-sm">同比
<span class="tn-text-bold" :style="{'color': detailData[3].digital_increase>=0?'red':'green'}">
{{detailData[3].digital_increase>=0?'+':''}}{{detailData[3].digital_increase}}%
</span>
</view>
</view>
</view>
</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 { onMounted, 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: 'tech'
}
}).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/tech/index?id=' + shareParam.value
}
})
onShareTimeline(() => {
return {
title:shareTitle.value,
path:'/pages/report/economic/tech/index?id=' + shareParam.value
}
})
onLoad((option)=>{
getMenuData(option.id)
})
onMounted(()=>{
getDateMonth()
getSummaryData(dateTimeValue.value)
})
</script>
<style lang="scss" scoped>
.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));
.row{
width: calc(100% / 2 - 10rpx);
.total{
background:linear-gradient(180deg,rgba(255, 170, 170, 0.8),rgba(255, 170, 170, 0.4));;
}
}
}
}
}
.picker-btn{
position: fixed;
z-index: 999;
right: 40rpx;
bottom: 60rpx;
}
</style>
Reference in New Issue Copy Permalink