708 lines
18 KiB
Vue
708 lines
18 KiB
Vue
<template>
|
||
<div style="width: 100%; height: 100%">
|
||
<div class="map" @click="mapClick"></div>
|
||
<div class="data-screen">
|
||
<div class="basic-data">
|
||
<div class="title">基本数据</div>
|
||
<div class="show-quantity-div">
|
||
<div class="number-1 show-span-div">
|
||
<div class="show-quantity">
|
||
<div class="sub-title">企业总数</div>
|
||
<div class="show-number">3157</div>
|
||
</div>
|
||
</div>
|
||
<div class="number-2 show-span-div">
|
||
<div class="show-quantity">
|
||
<div class="sub-title">测算土地面积</div>
|
||
<div class="show-number">6360<span class="suffix">㎡</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="number-3 show-span-div">
|
||
<div class="show-quantity">
|
||
<div class="sub-title">测算房产面积</div>
|
||
<div class="show-number">3157<span class="suffix">㎡</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="enterprise-area">
|
||
<div class="title">企业占地面积分乡镇情况</div>
|
||
<div class="enterprise-area-bar"></div>
|
||
</div>
|
||
<div class="enterprise-income">
|
||
<div class="title">企业收入分镇情况</div>
|
||
<div class="enterprise-income-bar"></div>
|
||
</div>
|
||
<div class="area-pie-div">
|
||
<div class="title">企业占地面积（土地、房产）</div>
|
||
<div class="area-pie">
|
||
<div class="land-area">
|
||
<div class="pie-title">土地面积占比</div>
|
||
<div class="land-area-pie"></div>
|
||
</div>
|
||
<div class="real-estate-area">
|
||
<div class="pie-title">房产面积占比</div>
|
||
<div class="real-estate-area-pie"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pack-up"></div>
|
||
</div>
|
||
<div class="search-div">
|
||
<a-input-search
|
||
class="search-input"
|
||
v-model:value="value"
|
||
placeholder="请输入企业名称/法人/地址搜索"
|
||
size="large"
|
||
@search="onSearch"
|
||
>
|
||
<template #enterButton>
|
||
<a-button class="search-button" type="primary" :icon="h(SearchOutlined)">搜索</a-button>
|
||
</template>
|
||
</a-input-search>
|
||
<div class="show-search-list">
|
||
<div class="show-search-title"></div>
|
||
<div class="show-search-content">
|
||
<div class="show-search-item" v-for="(item, index) in searchList" :key="index">
|
||
<div style="width: 100%; color: #d3f1ff">
|
||
<div style="display: flex; justify-content: space-between; margin-bottom: 8px">
|
||
<div class="item-name">{{ item.name }}</div>
|
||
<div class="item-person-name">{{ item.personName }}</div>
|
||
</div>
|
||
<div class="item-address"
|
||
><img :src="'dataScreen/address.svg'" style="margin-right: 10px" />{{
|
||
item.address
|
||
}}</div
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="show-enterprise-info" :style="`top:${infoPosition.top};left:${infoPosition.left}`">
|
||
<div class="title-div">
|
||
<div class="title-span">隆兴板材厂A</div>
|
||
<div class="title-close-button"><img :src="'dataScreen/info-close.svg'" /></div>
|
||
</div>
|
||
<div v-for="(item, index) in enterpriseInfo" :key="index" class="show-info-item">
|
||
<div class="first-span">{{ item.title }}</div>
|
||
<div class="last-span">{{ showEnterpriseInfoData[item.key] }}</div>
|
||
</div>
|
||
<div class="show-image">图片</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import * as echarts from 'echarts';
|
||
import { onMounted, ref, h, onBeforeUnmount } from 'vue';
|
||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||
import { enterpriseInfo } from './util';
|
||
|
||
const mapClick = (event) => {
|
||
let left = 0;
|
||
let top = 0;
|
||
// console.log(event.x,event.offsetX,event.offsetX + 265,window.innerWidth)
|
||
if (event.x + 265 > window.innerWidth) {
|
||
left = event.offsetX - (event.x + 265 - window.innerWidth);
|
||
} else {
|
||
left = event.offsetX;
|
||
}
|
||
if (event.y + 322 > window.innerHeight) {
|
||
top = event.offsetY - (event.y + 322 - window.innerHeight);
|
||
} else {
|
||
top = event.offsetY;
|
||
}
|
||
infoPosition.value = {
|
||
left: left + 'px',
|
||
top: top + 'px',
|
||
};
|
||
};
|
||
const infoPosition = ref({
|
||
left: '50%',
|
||
top: '50%',
|
||
});
|
||
let enterpriseAreaBarChartOption = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: [
|
||
'上冶镇',
|
||
'薛庄镇',
|
||
'探沂镇',
|
||
'朱田镇',
|
||
'梁邱镇',
|
||
'新庄镇',
|
||
'马庄镇',
|
||
'胡阳镇',
|
||
'石井镇',
|
||
'东蒙镇',
|
||
],
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
color: '#D0DEEE',
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
show: false,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '土地面积',
|
||
type: 'bar',
|
||
showBackground: true,
|
||
barGap: '0%',
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.1)',
|
||
},
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(102, 225, 223, 1)',
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: 'rgba(102, 225, 223, 0.5)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(102, 225, 223, 0)',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: [18203, 23489, 29034, 104970, 131744, 630230, 104860, 29034, 104970, 131744],
|
||
},
|
||
{
|
||
name: '房产面积',
|
||
type: 'bar',
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.1)',
|
||
},
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 183, 66, 1)',
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: 'rgba(255, 183, 66, 0.5)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 183, 66, 0)',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: [19325, 23438, 31000, 121594, 134141, 681807, 9034, 104970, 131744, 630230],
|
||
},
|
||
],
|
||
grid: {
|
||
top: '20%',
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '17%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
right: '5%',
|
||
textStyle: {
|
||
color: '#D0DEEE',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
};
|
||
let enterpriseIncomeBarChartOption = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: [
|
||
'上冶镇',
|
||
'薛庄镇',
|
||
'探沂镇',
|
||
'朱田镇',
|
||
'梁邱镇',
|
||
'新庄镇',
|
||
'马庄镇',
|
||
'胡阳镇',
|
||
'石井镇',
|
||
'东蒙镇',
|
||
],
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
color: '#D0DEEE',
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
show: false,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '测算收入',
|
||
type: 'bar',
|
||
showBackground: true,
|
||
barGap: '0%',
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.1)',
|
||
},
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(52, 220, 254, 1)',
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: 'rgba(52, 220, 254, 0.5)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(52, 220, 254, 0)',
|
||
},
|
||
],
|
||
},
|
||
borderRadius: [8, 8, 0, 0],
|
||
},
|
||
data: [18203, 23489, 29034, 104970, 131744, 630230, 104860, 29034, 104970, 131744],
|
||
},
|
||
{
|
||
name: '实缴收入',
|
||
type: 'bar',
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.1)',
|
||
},
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(84, 107, 255, 1)',
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: 'rgba(84, 107, 255, 0.5)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(84, 107, 255, 0)',
|
||
},
|
||
],
|
||
},
|
||
borderRadius: [8, 8, 0, 0],
|
||
},
|
||
data: [19325, 23438, 31000, 121594, 134141, 681807, 9034, 104970, 131744, 630230],
|
||
},
|
||
],
|
||
grid: {
|
||
top: '20%',
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '17%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
right: '5%',
|
||
textStyle: {
|
||
color: '#D0DEEE',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
};
|
||
let landAreaPieChartOption = {
|
||
legend: {
|
||
orient: 'vertical',
|
||
right: 'right',
|
||
data: ['≥40亩', '30-40亩', '20-30亩', '10-20亩', '0-10亩'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
},
|
||
itemWidth: 6,
|
||
itemHeight: 6,
|
||
},
|
||
series: [
|
||
{
|
||
right: '30%',
|
||
type: 'pie',
|
||
radius: ['30%', '85%'],
|
||
label: {
|
||
show: true,
|
||
position: 'inner',
|
||
color: '#fff',
|
||
},
|
||
data: [
|
||
{ value: 1048, name: '≥40亩', itemStyle: { color: '#12CEFF' } },
|
||
{ value: 735, name: '30-40亩', itemStyle: { color: '#FFBD00' } },
|
||
{ value: 580, name: '20-30亩', itemStyle: { color: '#1257FF' } },
|
||
{ value: 484, name: '10-20亩', itemStyle: { color: '#73D85A' } },
|
||
{ value: 300, name: '0-10亩', itemStyle: { color: '#161BF6' } },
|
||
],
|
||
},
|
||
],
|
||
};
|
||
let realEstateAreaPieChartOption = {
|
||
legend: {
|
||
orient: 'vertical',
|
||
right: 'right',
|
||
data: ['≥100㎡', '80-100㎡', '50-80㎡', '20-50㎡', '0-20㎡'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
},
|
||
itemWidth: 6,
|
||
itemHeight: 6,
|
||
},
|
||
series: [
|
||
{
|
||
right: '30%',
|
||
type: 'pie',
|
||
radius: ['30%', '85%'],
|
||
label: {
|
||
show: true,
|
||
position: 'inner',
|
||
color: '#fff',
|
||
},
|
||
data: [
|
||
{ value: 1048, name: '≥100㎡', itemStyle: { color: '#04C7FF' } },
|
||
{ value: 735, name: '80-100㎡', itemStyle: { color: '#FF12CE' } },
|
||
{ value: 580, name: '50-80㎡', itemStyle: { color: '#FF6700' } },
|
||
{ value: 484, name: '20-50㎡', itemStyle: { color: '#161BF6' } },
|
||
{ value: 300, name: '0-20㎡', itemStyle: { color: '#5202FF' } },
|
||
],
|
||
},
|
||
],
|
||
};
|
||
let enterpriseAreaBarChart = {};
|
||
let enterpriseIncomeBarChart = {};
|
||
let landAreaPieChart = {};
|
||
let realEstateAreaPieChart = {};
|
||
onMounted(() => {
|
||
let enterpriseAreaBarDom = document.getElementsByClassName('enterprise-area-bar')[0];
|
||
let enterpriseIncomeBarDom = document.getElementsByClassName('enterprise-income-bar')[0];
|
||
let landAreaPieDom = document.getElementsByClassName('land-area-pie')[0];
|
||
let realEstateAreaPieDom = document.getElementsByClassName('real-estate-area-pie')[0];
|
||
|
||
enterpriseAreaBarChart = echarts.init(enterpriseAreaBarDom);
|
||
enterpriseIncomeBarChart = echarts.init(enterpriseIncomeBarDom);
|
||
landAreaPieChart = echarts.init(landAreaPieDom);
|
||
realEstateAreaPieChart = echarts.init(realEstateAreaPieDom);
|
||
|
||
enterpriseAreaBarChart.setOption(enterpriseAreaBarChartOption);
|
||
enterpriseIncomeBarChart.setOption(enterpriseIncomeBarChartOption);
|
||
landAreaPieChart.setOption(landAreaPieChartOption);
|
||
realEstateAreaPieChart.setOption(realEstateAreaPieChartOption);
|
||
});
|
||
onBeforeUnmount(() => {
|
||
// 及时销毁
|
||
enterpriseAreaBarChart.dispose();
|
||
enterpriseIncomeBarChart.dispose();
|
||
landAreaPieChart.dispose();
|
||
realEstateAreaPieChart.dispose();
|
||
console.log('onBeforeUnmount>>>');
|
||
});
|
||
const value = ref('');
|
||
const showEnterpriseInfoData = ref({
|
||
legalPerson: '刘明',
|
||
phone: '15056888888',
|
||
realEstateArea: '500m²',
|
||
landArea: '1500m²',
|
||
type: '板材加工',
|
||
address: '和平路与文山路交汇处200米以北',
|
||
surveySheet: '测绘表 （企业确认文件）',
|
||
});
|
||
const searchList = ref([
|
||
{ name: '隆兴板材厂A', personName: '刘明', address: '临沂市费县探沂镇209国道石行村' },
|
||
{ name: '隆兴板材厂B', personName: '刘明', address: '临沂市费县探沂镇209国道石行村' },
|
||
{ name: '隆兴板材厂C', personName: '刘明', address: '临沂市费县探沂镇209国道石行村' },
|
||
]);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.map {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #4e7243;
|
||
}
|
||
.data-screen {
|
||
height: 100%;
|
||
width: 466px;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
padding-top: 25px;
|
||
padding-left: 19px;
|
||
padding-right: 29px;
|
||
.title {
|
||
width: 100%;
|
||
height: 44px;
|
||
background: url(/dataScreen/title.png) no-repeat;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 32px;
|
||
}
|
||
.show-quantity-div {
|
||
padding-top: 16px;
|
||
padding-bottom: 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.show-span-div {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 50px;
|
||
.sub-title {
|
||
font-size: 10px;
|
||
color: #fff;
|
||
}
|
||
.show-number {
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
color: #17b0cc;
|
||
.suffix {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
.number-1 {
|
||
width: 129px;
|
||
height: 55px;
|
||
background: url(/dataScreen/number1.png) no-repeat;
|
||
}
|
||
.number-2 {
|
||
width: 129px;
|
||
height: 55px;
|
||
background: url(/dataScreen/number2.png) no-repeat;
|
||
}
|
||
.number-3 {
|
||
width: 129px;
|
||
height: 55px;
|
||
background: url(/dataScreen/number3.png) no-repeat;
|
||
}
|
||
}
|
||
.enterprise-area {
|
||
.enterprise-area-bar {
|
||
width: 100%;
|
||
height: 193px;
|
||
}
|
||
}
|
||
.enterprise-income {
|
||
.enterprise-income-bar {
|
||
width: 100%;
|
||
height: 193px;
|
||
}
|
||
}
|
||
.area-pie-div {
|
||
.area-pie {
|
||
display: flex;
|
||
margin-top: 7px;
|
||
.land-area {
|
||
flex: 1;
|
||
.land-area-pie {
|
||
height: 165px;
|
||
}
|
||
}
|
||
.real-estate-area {
|
||
flex: 1;
|
||
.real-estate-area-pie {
|
||
height: 165px;
|
||
}
|
||
}
|
||
}
|
||
.pie-title {
|
||
width: 108px;
|
||
height: 27px;
|
||
background: url(/dataScreen/pie-title.png) no-repeat;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.pack-up {
|
||
width: 34px;
|
||
height: 130px;
|
||
background: url(/dataScreen/pack-up.png) no-repeat;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translate(100%, -50%);
|
||
}
|
||
}
|
||
.search-div {
|
||
width: 370px;
|
||
height: 47px;
|
||
position: absolute;
|
||
top: 30px;
|
||
left: calc(466px + 50px);
|
||
.show-search-list {
|
||
position: absolute;
|
||
top: 47px;
|
||
width: 100%;
|
||
height: 280px;
|
||
background: #032567;
|
||
.show-search-title {
|
||
width: 100%;
|
||
height: 5px;
|
||
background: #0542b7;
|
||
}
|
||
.show-search-content {
|
||
width: 100%;
|
||
height: 275px;
|
||
overflow: auto;
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
.show-search-item {
|
||
width: 100%;
|
||
height: 64px;
|
||
border-bottom: 1px dashed #90a1b0;
|
||
display: flex;
|
||
align-items: center;
|
||
.item-name {
|
||
font-size: 16px;
|
||
}
|
||
.item-person-name {
|
||
font-size: 14px;
|
||
}
|
||
.item-address {
|
||
font-size: 12px;
|
||
opacity: 0.56;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.show-enterprise-info {
|
||
position: absolute;
|
||
// top: 50%;
|
||
// left: 50%;
|
||
// transform: translate(-50%, -50%);
|
||
width: 265px;
|
||
min-height: 307px;
|
||
background: url(/dataScreen/show-enterprise-info.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 13px 20px 20px 16px;
|
||
.title-div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 22px;
|
||
.title-span {
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.show-info-item {
|
||
display: flex;
|
||
font-size: 12px;
|
||
height: 25px;
|
||
align-items: center;
|
||
.first-span {
|
||
color: #a6e4f7;
|
||
margin-right: 12px;
|
||
}
|
||
.first-span::before {
|
||
content: '';
|
||
width: 3px;
|
||
height: 3px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
display: inline-block;
|
||
margin-left: 2px;
|
||
margin-right: 7px;
|
||
}
|
||
.last-span {
|
||
color: #fff;
|
||
}
|
||
}
|
||
.show-info-item:nth-last-child(2) {
|
||
margin-bottom: 5px;
|
||
}
|
||
.show-image {
|
||
width: 119px;
|
||
height: 69px;
|
||
background: #2473d5;
|
||
margin-left: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.search-div {
|
||
.search-input {
|
||
input::placeholder {
|
||
color: rgba(255, 255, 255, 0.63);
|
||
}
|
||
input {
|
||
background-color: #121c2d;
|
||
border: 1px solid #103a84;
|
||
color: rgba(255, 255, 255, 0.63);
|
||
border-radius: 20px;
|
||
}
|
||
button.css-dev-only-do-not-override-n9spb6.ant-btn.ant-btn-primary.ant-btn-lg.search-button.ant-input-search-button {
|
||
border-top-right-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
background: #0a44ad;
|
||
}
|
||
}
|
||
}
|
||
</style>
|