【数据大屏】80%
Zhufu
parent
337b0c5e39
commit
35ad6b7313
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="11px" height="14px" viewBox="0 0 11 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>形状</title>
|
||||||
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="财源一体化平台A-切图" transform="translate(-533.000000, -219.000000)" fill="#0653D8" fill-rule="nonzero">
|
||||||
|
<g id="弹窗" transform="translate(516.000000, 175.000000)">
|
||||||
|
<g id="文字信息list" transform="translate(16.000000, 21.548027)">
|
||||||
|
<path d="M6.50000278,26.7979183 C6.05771178,26.7979183 5.6424624,26.9672852 5.32896287,27.2770218 C5.0178662,27.5835196 4.84333527,27.9999412 4.84404477,28.4340059 C4.84333527,28.8680706 5.0178662,29.2844922 5.32896287,29.59099 C5.63918414,29.8983526 6.06066479,30.0707886 6.50000278,30.0700876 C6.93934077,30.0707886 7.36082141,29.8983526 7.67104268,29.59099 C7.98270088,29.2848637 8.15733327,28.8682 8.15596667,28.4340059 C8.15596667,27.9970237 7.98454221,27.5867585 7.67104268,27.2770218 C7.36119745,26.9691044 6.93947179,26.7965681 6.50000278,26.7979183 L6.50000278,26.7979183 Z M11.5654952,26.2445664 C11.2871091,25.6102845 10.8856948,25.0360046 10.3839136,24.554147 C9.88062342,24.0679512 9.28728015,23.6820567 8.63629123,23.4175404 C7.95912431,23.1402373 7.23302993,22.9983314 6.5000055,23.0000148 C5.75933723,23.0000148 5.04067164,23.1404076 4.36371433,23.4166347 C3.71305643,23.6815652 3.11981627,24.067239 2.61609196,24.5527885 C2.11468567,25.0347848 1.71332134,25.6088394 1.4345104,26.2427551 C1.14687533,26.8972045 0.998960604,27.6032362 1.0000055,28.3167226 C1.0000055,29.3482724 1.24980234,30.3752938 1.74067661,31.365636 C2.13530101,32.1617134 2.68713351,32.9374135 3.38150747,33.6750758 C4.56904735,34.9339469 5.81387881,35.7037601 6.16725328,35.9102512 C6.37140431,36.0299163 6.62539292,36.0299163 6.82954395,35.9102512 C7.18291842,35.704213 8.42774988,34.9343997 9.61528976,33.6750758 C10.310122,32.938772 10.8619545,32.1617134 11.2561206,31.365636 C11.7502032,30.3766523 11.9999945,29.3514422 11.9999945,28.3185339 C11.9999945,27.5998906 11.8533281,26.9016247 11.5654952,26.2445664 Z M6.50000278,31.0047294 C5.56210209,31.0170276 4.69007011,30.5297149 4.21748963,29.7292053 C3.74490916,28.9286957 3.74490916,27.9388633 4.21748963,27.1383537 C4.69007011,26.3378441 5.56210209,25.8505313 6.50000278,25.8628296 C7.92368129,25.8814976 9.06787978,27.0270653 9.06787978,28.4337795 C9.06787978,29.8404936 7.92368129,30.9860613 6.50000278,31.0047294 L6.50000278,31.0047294 Z" id="形状"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
|
|
@ -2,5 +2,6 @@
|
||||||
"dashboard": "Dashboard",
|
"dashboard": "Dashboard",
|
||||||
"about": "关于",
|
"about": "关于",
|
||||||
"workbench": "工作台",
|
"workbench": "工作台",
|
||||||
"analysis": "分析页"
|
"analysis": "分析页",
|
||||||
|
"dataScreen": "数据大屏"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,15 @@ const dashboard: AppRouteModule = {
|
||||||
title: t('routes.dashboard.analysis'),
|
title: t('routes.dashboard.analysis'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/dashboard/dataScreen',
|
||||||
|
name: 'DataScreen',
|
||||||
|
component: () => import('@/views/dashboard/dataScreen/index.vue'),
|
||||||
|
meta: {
|
||||||
|
// affix: true,
|
||||||
|
title: t('routes.dashboard.dataScreen'),
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/formCallPage',
|
path: '/formCallPage',
|
||||||
name: 'formCallPage',
|
name: 'formCallPage',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,574 @@
|
||||||
|
<template>
|
||||||
|
<div class="map"></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"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { onMounted, ref, h } from 'vue';
|
||||||
|
import { SearchOutlined } from '@ant-design/icons-vue'
|
||||||
|
// import address from ''
|
||||||
|
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"} }
|
||||||
|
],
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
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]
|
||||||
|
|
||||||
|
let enterpriseAreaBarChart = echarts.init(enterpriseAreaBarDom)
|
||||||
|
let enterpriseIncomeBarChart = echarts.init(enterpriseIncomeBarDom)
|
||||||
|
let landAreaPieChart = echarts.init(landAreaPieDom)
|
||||||
|
let realEstateAreaPieChart = echarts.init(realEstateAreaPieDom)
|
||||||
|
|
||||||
|
enterpriseAreaBarChart.setOption(enterpriseAreaBarChartOption);
|
||||||
|
enterpriseIncomeBarChart.setOption(enterpriseIncomeBarChartOption);
|
||||||
|
landAreaPieChart.setOption(landAreaPieChartOption);
|
||||||
|
realEstateAreaPieChart.setOption(realEstateAreaPieChartOption);
|
||||||
|
})
|
||||||
|
const value = ref("")
|
||||||
|
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;
|
||||||
|
height: 307px;
|
||||||
|
background: url(/dataScreen/show-enterprise-info.png) no-repeat;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue