533 lines
14 KiB
Vue
533 lines
14 KiB
Vue
<template>
|
|
<view class="develop-summary-page">
|
|
<TnNavbar fixed bg-color="rgba(255, 255, 255, 0.01)" :bottom-shadow="false" :placeholder="false" />
|
|
|
|
<view class="develop-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="develop-container tn-pt-lg" v-if="flag">
|
|
<view class="tn-radius tn-m">
|
|
<view class="title-container tn-border-bottom tn-grey-light_border tn-p-xs tn-pb"
|
|
style="border-radius: 0;">
|
|
<view class="left">
|
|
<view class="title">{{developData.title}}</view>
|
|
<view class="desc tn-text-lg">
|
|
<TnIcon name="clock" size="36rpx" />
|
|
{{developData.dateMonth.replace('-','年01-')+'月'}}
|
|
</view>
|
|
</view>
|
|
<view class="right" @click="showPop">
|
|
<view class="icon">
|
|
<TnIcon name="menu-flex" />
|
|
</view>
|
|
<view class="text">园区详情</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="develop-detail tn-pt">
|
|
<view class="tn-text-bold tn-text-2xl tn-text-center tn-pb" :style="{'color':color}">
|
|
土地规划概况
|
|
</view>
|
|
<view class="develop-review tn-flex tn-flex-wrap tn-flex-center-between tn-shadow tn-p-xs tn-radius">
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow" style="width: 100%;">
|
|
<view class="tn-text-lg tn-text-center">
|
|
城市建设用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.city" :text-color="color" /><span
|
|
class="unit">平方公里</span>
|
|
</view>
|
|
</view>
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
|
|
<view class="tn-text-lg tn-text-center">
|
|
居住用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.build" :text-color="color" /><span
|
|
class="unit">公顷</span>
|
|
</view>
|
|
</view>
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
|
|
<view class="tn-text-lg tn-text-center">
|
|
公共服务用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.service" :text-color="color" /><span
|
|
class="unit">公顷</span>
|
|
</view>
|
|
</view>
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
|
|
<view class="tn-text-lg tn-text-center">
|
|
商业服务业用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.business" :text-color="color" /><span
|
|
class="unit">公顷</span>
|
|
</view>
|
|
</view>
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
|
|
<view class="tn-text-lg tn-text-center">
|
|
工业用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.industry" :text-color="color" /><span
|
|
class="unit">公顷</span>
|
|
</view>
|
|
</view>
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
|
|
<view class="tn-text-lg tn-text-center">
|
|
交通设施用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.traffic" :text-color="color" /><span
|
|
class="unit">公顷</span>
|
|
</view>
|
|
</view>
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
|
|
<view class="tn-text-lg tn-text-center">
|
|
公用设施用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.public" :text-color="color" /><span
|
|
class="unit">公顷</span>
|
|
</view>
|
|
</view>
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
|
|
<view class="tn-text-lg tn-text-center">
|
|
绿地与广场用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.plaza" :text-color="color" /><span
|
|
class="unit">公顷</span>
|
|
</view>
|
|
</view>
|
|
<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
|
|
<view class="tn-text-lg tn-text-center">
|
|
物流仓储用地
|
|
</view>
|
|
<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
|
|
<tn-count-scroll :value="developData.logistic" :text-color="color" /><span
|
|
class="unit">公顷</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tn-text-bold tn-text-2xl tn-text-center tn-p" :style="{'color':color}">
|
|
土地规划分布
|
|
</view>
|
|
|
|
<view class="rose tn-shadow" style="height:600rpx">
|
|
<ucharts-pie :chartData="useChartData" position="bottom" :label="true" :radius="100"/>
|
|
</view>
|
|
|
|
<view v-if="developData.review">
|
|
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
|
概述
|
|
</view>
|
|
|
|
<view class="tn-text-lg tn-shadow tn-p-sm" style="line-height: 1.8em;color: #444444;letter-spacing: 4rpx;">
|
|
<mp-html :content="developData.review" @linktap="downloadFile"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<TnDateTimePicker v-model="dateTimeValue" v-model:open="openDateTimePicker" init-current-date-time
|
|
format="YYYY-MM" mode="yearmonth" @confirm="getDate" />
|
|
<TnPopup v-model="showPopup" open-direction="right">
|
|
<view class="park-container tn-p-lg tn-flex tn-flex-center">
|
|
<TnScrollList :indicator="false">
|
|
<view class="item-container tn-flex-column tn-flex-center items-center">
|
|
<view v-for="(item, index) in parkList" :key="index"
|
|
class="scroll-item tn-p-lg tn-flex-center tn-flex-column" @click="tnNavPage(item.parkId)">
|
|
<view class="empty tn-grey-light_bg tn-flex tn-flex-center-around">
|
|
<TnAvatar :url="item.image" shape="square" size="lg" />
|
|
</view>
|
|
<view class="title tn-text-sm tn-text-center">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</TnScrollList>
|
|
</view>
|
|
</TnPopup>
|
|
<view class="picker-btn" @click="showPicker">
|
|
<TnButton shape="circle" type="success" size="lg" shadow shadow-color="tn-type-primary_shadow">
|
|
<TnIcon name="history" :size="50" />
|
|
</TnButton>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import request from '@/utils/request';
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import UchartsPie from '@/pages/components/ucharts-pie.vue';
|
|
import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
|
|
import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
|
|
import TnCountScroll from '@/uni_modules/tuniaoui-vue3/components/count-scroll/src/count-scroll.vue'
|
|
import TnScrollList from '@/uni_modules/tuniaoui-vue3/components/scroll-list/src/scroll-list.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 flag = ref(false);
|
|
|
|
const color = ref();
|
|
|
|
const showPopup = ref(false)
|
|
|
|
const shareParam = ref()
|
|
|
|
const shareTitle = ref()
|
|
|
|
const openDateTimePicker = ref(false)
|
|
|
|
const menuId = ref();
|
|
|
|
const parkList = ref([]);
|
|
|
|
const developData = reactive({
|
|
dateMonth: '',
|
|
title: '',
|
|
parkName: '',
|
|
develop: 0,
|
|
city: 0,
|
|
build: 0,
|
|
service: 0,
|
|
business: 0,
|
|
industry: 0,
|
|
traffic: 0,
|
|
public: 0,
|
|
plaza: 0,
|
|
logistic: 0,
|
|
invest: 0,
|
|
review: '',
|
|
explan: ''
|
|
})
|
|
|
|
const useChartData = ref({})
|
|
|
|
const dateTimeValue = ref();
|
|
|
|
const menuData = reactive({
|
|
pic: '',
|
|
title: '',
|
|
color: '',
|
|
description: ''
|
|
})
|
|
|
|
const showPop = () => {
|
|
showPopup.value = true
|
|
}
|
|
|
|
const showPicker = () => {
|
|
openDateTimePicker.value = true
|
|
}
|
|
|
|
const getDate = (value : string) => {
|
|
getDevelopData(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 getParkList = () => {
|
|
request({
|
|
url: '/front/park/list',
|
|
method: 'GET',
|
|
data: { id: 1 }
|
|
}).then((res : any) => {
|
|
if (res.data.code === 0) {
|
|
parkList.value = res.data.data
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: res.data.message
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const tnNavPage = (id : number) => {
|
|
showPopup.value = false
|
|
uni.navigateTo({
|
|
url: '/pages/report/develop/child/index?mid=' + menuId.value + '&id=' + id,
|
|
})
|
|
}
|
|
|
|
const getDevelopData = (date : string) => {
|
|
request({
|
|
url: '/front/report/develop/summary',
|
|
method: 'GET',
|
|
data: { id: 1, month: date }
|
|
}).then((res : any) => {
|
|
if (res.data.code === 0) {
|
|
Object.assign(developData, res.data.data)
|
|
shareTitle.value = res.data.data.title
|
|
setTimeout(() => {
|
|
let use_res = {
|
|
series: [
|
|
{
|
|
data: [{ "name": "居住用地", "value": Number(developData.build) },
|
|
{ "name": "公共服务用地", "value": Number(developData.service) },
|
|
{ "name": "商业服务业用地", "value": Number(developData.business) },
|
|
{ "name": "工业用地", "value": Number(developData.industry) },
|
|
{ "name": "交通设施用地", "value": Number(developData.traffic) },
|
|
{ "name": "公用设施用地", "value": Number(developData.public) },
|
|
{ "name": "绿地与广场用地", "value": Number(developData.plaza) },
|
|
{ "name": "物流仓储用地", "value": Number(developData.logistic) },
|
|
{ "name": "其它用地", "value": Number(developData.city*100)-Number(developData.build)-Number(developData.service)-Number(developData.business)-Number(developData.industry)-Number(developData.traffic)-Number(developData.public)-Number(developData.plaza)-Number(developData.logistic)}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
|
|
useChartData.value = JSON.parse(JSON.stringify(use_res));
|
|
}, 500);
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: res.data.message
|
|
})
|
|
}
|
|
flag.value = true
|
|
})
|
|
}
|
|
|
|
const downloadFile = (file:any) => {
|
|
uni.downloadFile({
|
|
url:file.href,
|
|
success(res) {
|
|
if (res.statusCode === 200) {
|
|
uni.saveFile({
|
|
tempFilePath: res.tempFilePath, //临时路径
|
|
success: function(res) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
mask: true,
|
|
title: '文件已保存：' + res.savedFilePath, //保存路径
|
|
duration: 3000,
|
|
});
|
|
setTimeout(() => {
|
|
//打开文档查看
|
|
uni.openDocument({
|
|
filePath: res.savedFilePath,
|
|
showMenu: true,
|
|
success: function() {
|
|
console.log('打开文档成功');
|
|
}
|
|
});
|
|
}, 3000)
|
|
}
|
|
})
|
|
console.log('下载成功');
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log(err);
|
|
uni.showToast({
|
|
icon: 'none',
|
|
mask: true,
|
|
title: '失败请重新下载',
|
|
});
|
|
},
|
|
})
|
|
}
|
|
|
|
onShareAppMessage(() => {
|
|
return {
|
|
title: shareTitle.value,
|
|
path: '/pages/report/develop/index?id=' + shareParam.value
|
|
}
|
|
})
|
|
|
|
onShareTimeline(() => {
|
|
return {
|
|
title: shareTitle.value,
|
|
path: '/pages/report/develop/index?id=' + shareParam.value
|
|
}
|
|
})
|
|
|
|
onLoad((option) => {
|
|
getMenuData(option.id)
|
|
menuId.value = option.id
|
|
})
|
|
|
|
getParkList()
|
|
|
|
getDevelopData(dateTimeValue.value)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.develop-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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.develop-container {
|
|
// position: relative;
|
|
margin-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: 80rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 26rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.develop-detail {
|
|
// position: relative;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
// z-index: 10;
|
|
.topic-item {
|
|
&+.topic-item {
|
|
margin-top: 36rpx;
|
|
}
|
|
}
|
|
|
|
.develop-review {
|
|
.review-item {
|
|
width: calc(100% / 2 - 10rpx);
|
|
background: linear-gradient(-45deg, rgba(0, 150, 255, 0.4), rgba(0, 150, 255, 0.05));
|
|
|
|
.unit {
|
|
font-weight: normal;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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> |