596 lines
20 KiB
Vue
596 lines
20 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" :style="{'color':color}">
|
||
|
|
{{dateTimeValue.replace('-','年01-')}}月{{menuData.title}}概况
|
||
|
|
</view>
|
||
|
|
<view class="detail tn-ml-lg tn-mr-lg" v-if="detailData">
|
||
|
|
|
||
|
|
<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">总体情况</view>
|
||
|
|
|
||
|
|
<view class="block tn-radius tn-p-sm" v-if="detailData[1]">
|
||
|
|
<view class="top tn-flex">
|
||
|
|
<view class="left tn-pt-lg">
|
||
|
|
<TnTitle title="商品销售额" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[1].revenue}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[1].revenue_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[1].revenue_increase>=0?'+'+detailData[1].revenue_increase:detailData[1].revenue_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="chart-box" style="height: 200rpx;">
|
||
|
|
<ucharts-pie :chartData="chartData1" :radius="40" position="right" :label="false"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom tn-flex tn-flex-center-between">
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="批发业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[1].wholesale}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[1].wholesale_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[1].wholesale_increase>=0?'+'+detailData[1].wholesale_increase:detailData[1].wholesale_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="零售业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[1].retail}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[1].retail_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[1].retail_increase>=0?'+'+detailData[1].retail_increase:detailData[1].retail_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="住宿餐饮业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[1].catering}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[1].catering_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[1].catering_increase>=0?'+'+detailData[1].catering_increase:detailData[1].catering_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-lg tn-mb-sm" :style="{'color':color}">各园区商贸服务业情况</view>
|
||
|
|
|
||
|
|
<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">
|
||
|
|
双福工业园
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="block tn-radius tn-p-sm" v-if="detailData[2]">
|
||
|
|
<view class="top tn-flex">
|
||
|
|
<view class="left tn-pt-lg">
|
||
|
|
<TnTitle title="商品销售额" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[2].revenue}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[2].revenue_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[2].revenue_increase>=0?'+'+detailData[2].revenue_increase:detailData[2].revenue_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="chart-box" style="height: 200rpx;">
|
||
|
|
<ucharts-pie :chartData="chartData2" :radius="40" position="right" :label="false"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom tn-flex tn-flex-center-between">
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="批发业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[2].wholesale}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[2].wholesale_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[2].wholesale_increase>=0?'+'+detailData[2].wholesale_increase:detailData[2].wholesale_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="零售业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[2].retail}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[2].retail_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[2].retail_increase>=0?'+'+detailData[2].retail_increase:detailData[2].retail_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="住宿餐饮业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[2].catering}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[2].catering_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[2].catering_increase>=0?'+'+detailData[2].catering_increase:detailData[2].catering_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">
|
||
|
|
珞璜工业园
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="block tn-radius tn-p-sm" v-if="detailData[5]">
|
||
|
|
<view class="top tn-flex">
|
||
|
|
<view class="left tn-pt-lg">
|
||
|
|
<TnTitle title="商品销售额" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[5].revenue}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[5].revenue_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[5].revenue_increase>=0?'+'+detailData[5].revenue_increase:detailData[5].revenue_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="chart-box" style="height: 200rpx;">
|
||
|
|
<ucharts-pie :chartData="chartData5" :radius="40" position="right" :label="false"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom tn-flex tn-flex-center-between">
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="批发业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[5].wholesale}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[5].wholesale_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[5].wholesale_increase>=0?'+'+detailData[5].wholesale_increase:detailData[5].wholesale_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="零售业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[5].retail}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[5].retail_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[5].retail_increase>=0?'+'+detailData[5].retail_increase:detailData[5].retail_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="住宿餐饮业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[5].catering}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[5].catering_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[5].catering_increase>=0?'+'+detailData[5].catering_increase:detailData[5].catering_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">
|
||
|
|
德感工业园
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="block tn-radius tn-p-sm" v-if="detailData[4]">
|
||
|
|
<view class="top tn-flex">
|
||
|
|
<view class="left tn-pt-lg">
|
||
|
|
<TnTitle title="商品销售额" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[4].revenue}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[4].revenue_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[4].revenue_increase>=0?'+'+detailData[4].revenue_increase:detailData[4].revenue_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="chart-box" style="height: 200rpx;">
|
||
|
|
<ucharts-pie :chartData="chartData4" :radius="40" position="right" :label="false"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom tn-flex tn-flex-center-between">
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="批发业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[4].wholesale}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[4].wholesale_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[4].wholesale_increase>=0?'+'+detailData[4].wholesale_increase:detailData[4].wholesale_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="零售业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[4].retail}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[4].retail_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[4].retail_increase>=0?'+'+detailData[4].retail_increase:detailData[4].retail_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="住宿餐饮业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[4].catering}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[4].catering_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[4].catering_increase>=0?'+'+detailData[4].catering_increase:detailData[4].catering_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">
|
||
|
|
白沙工业园
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="block tn-radius tn-p-sm" v-if="detailData[3]">
|
||
|
|
<view class="top tn-flex">
|
||
|
|
<view class="left tn-pt-lg">
|
||
|
|
<TnTitle title="商品销售额" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[3].revenue}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[3].revenue_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[3].revenue_increase>=0?'+'+detailData[3].revenue_increase:detailData[3].revenue_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="chart-box" style="height: 200rpx;">
|
||
|
|
<ucharts-pie :chartData="chartData3" :radius="40" position="right"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom tn-flex tn-flex-center-between">
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="批发业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[3].wholesale}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[3].wholesale_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[3].wholesale_increase>=0?'+'+detailData[3].wholesale_increase:detailData[3].wholesale_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="零售业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[3].retail}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[3].retail_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[3].retail_increase>=0?'+'+detailData[3].retail_increase:detailData[3].retail_increase}}%
|
||
|
|
</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<TnTitle title="住宿餐饮业" mode="vLine"/>
|
||
|
|
<view class="tn-pl-sm">
|
||
|
|
<span class="tn-text-bold tn-text-xl">{{detailData[3].catering}}</span>亿
|
||
|
|
</view>
|
||
|
|
<view class="tn-pl-sm tn-text-sm">
|
||
|
|
同比<span class="tn-text-bold" :style="{'color':detailData[3].catering_increase>=0?'red':'green'}">
|
||
|
|
{{detailData[3].catering_increase>=0?'+'+detailData[3].catering_increase:detailData[3].catering_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 { 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';
|
||
|
|
import UchartsPie from '@/pages/components/ucharts-pie.vue';
|
||
|
|
|
||
|
|
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 chartData1 = ref({})
|
||
|
|
const chartData2 = ref({})
|
||
|
|
const chartData3 = ref({})
|
||
|
|
const chartData4 = ref({})
|
||
|
|
const chartData5 = ref({})
|
||
|
|
|
||
|
|
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: 'service'
|
||
|
|
}
|
||
|
|
}).then((res:any)=>{
|
||
|
|
if(res.data.code === 0){
|
||
|
|
let temp = []
|
||
|
|
res.data.data.map((item:any) =>{
|
||
|
|
temp[item.parkId] = item
|
||
|
|
})
|
||
|
|
|
||
|
|
detailData.value = temp
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
let res1 = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [
|
||
|
|
{"name":"批发业","value":temp[1].wholesale},
|
||
|
|
{"name":"零售业","value":temp[1].retail},
|
||
|
|
{"name":"住宿餐饮业","value":temp[1].catering},
|
||
|
|
]},
|
||
|
|
]}
|
||
|
|
let res2 = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [
|
||
|
|
{"name":"批发业","value":temp[2].wholesale},
|
||
|
|
{"name":"零售业","value":temp[2].retail},
|
||
|
|
{"name":"住宿餐饮业","value":temp[2].catering},
|
||
|
|
]},
|
||
|
|
]}
|
||
|
|
let res3 = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [
|
||
|
|
{"name":"批发业","value":temp[3].wholesale},
|
||
|
|
{"name":"零售业","value":temp[3].retail},
|
||
|
|
{"name":"住宿餐饮业","value":temp[3].catering},
|
||
|
|
]},
|
||
|
|
]}
|
||
|
|
let res4 = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [
|
||
|
|
{"name":"批发业","value":temp[4].wholesale},
|
||
|
|
{"name":"零售业","value":temp[4].retail},
|
||
|
|
{"name":"住宿餐饮业","value":temp[4].catering},
|
||
|
|
]},
|
||
|
|
]}
|
||
|
|
let res5 = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [
|
||
|
|
{"name":"批发业","value":temp[5].wholesale},
|
||
|
|
{"name":"零售业","value":temp[5].retail},
|
||
|
|
{"name":"住宿餐饮业","value":temp[5].catering},
|
||
|
|
]},
|
||
|
|
]}
|
||
|
|
chartData1.value = JSON.parse(JSON.stringify(res1));
|
||
|
|
chartData2.value = JSON.parse(JSON.stringify(res2));
|
||
|
|
chartData3.value = JSON.parse(JSON.stringify(res3));
|
||
|
|
chartData4.value = JSON.parse(JSON.stringify(res4));
|
||
|
|
chartData5.value = JSON.parse(JSON.stringify(res5));
|
||
|
|
|
||
|
|
}, 500);
|
||
|
|
}else{
|
||
|
|
isEmpty.value = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
flag.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
onShareAppMessage(() => {
|
||
|
|
return {
|
||
|
|
title:shareTitle.value,
|
||
|
|
path:'/pages/report/economic/service/index?id=' + shareParam.value
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
onShareTimeline(() => {
|
||
|
|
return {
|
||
|
|
title:shareTitle.value,
|
||
|
|
path:'/pages/report/economic/service/index?id=' + shareParam.value
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
onLoad((option)=>{
|
||
|
|
getMenuData(option.id)
|
||
|
|
getDateMonth()
|
||
|
|
getSummaryData(dateTimeValue.value)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.economic-summary {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 450rpx;
|
||
|
|
z-index: -1;
|
||
|
|
|
||
|
|
&::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{
|
||
|
|
background-color: #fff;
|
||
|
|
margin-top: -40rpx;
|
||
|
|
padding-bottom: 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));
|
||
|
|
.top{
|
||
|
|
.left{
|
||
|
|
width: 40%;
|
||
|
|
}
|
||
|
|
.right{
|
||
|
|
width: 60%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bottom{
|
||
|
|
.item{
|
||
|
|
width: calc(100% / 3 - 15rpx);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.picker-btn{
|
||
|
|
position: fixed;
|
||
|
|
z-index: 999;
|
||
|
|
right: 40rpx;
|
||
|
|
bottom: 60rpx;
|
||
|
|
}
|
||
|
|
</style>
|