feat: 中间部分完成
This commit is contained in:
parent
33b033219b
commit
8c803b4e7e
|
|
@ -7,33 +7,72 @@ let myChart = null;
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
grid: { top: '54px', right: '14px', left: '14px', bottom: '24px' },
|
grid: { top: 79, right: 9, left: 34, bottom: '24px' },
|
||||||
title: {
|
title: {
|
||||||
text: '最近12个月税收概览',
|
text: '最近12个月税收概览',
|
||||||
|
subtext: '单位/万元',
|
||||||
textStyle: { color: '#fff', fontSize: 22, fontWeight: 'lighter' },
|
textStyle: { color: '#fff', fontSize: 22, fontWeight: 'lighter' },
|
||||||
|
subtextStyle: { color: '#fff', fontSize: 12, fontWeight: 'lighter' },
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' },
|
||||||
|
formatter: function (params: any): string {
|
||||||
|
return `<div>${params[0].seriesName}</div> ${params[0].marker} ${params[0].name} ${params[0].value}万元`;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
tooltip: {},
|
|
||||||
legend: { show: false },
|
legend: { show: false },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
show: true,
|
show: true,
|
||||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
data: [
|
||||||
// data: category,
|
'2021.01',
|
||||||
|
'2021.02',
|
||||||
|
'2021.03',
|
||||||
|
'2021.04',
|
||||||
|
'2021.05',
|
||||||
|
'2021.06',
|
||||||
|
'2021.07',
|
||||||
|
'2021.08',
|
||||||
|
'2021.09',
|
||||||
|
'2021.10',
|
||||||
|
'2021.11',
|
||||||
|
'2021.12',
|
||||||
|
],
|
||||||
itemStyle: { color: '#ccc' },
|
itemStyle: { color: '#ccc' },
|
||||||
splitLine: { show: true, lineStyle: { color: '#333', width: 1, type: 'solid' } },
|
splitLine: { show: false },
|
||||||
splitArea: { show: false },
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: true,
|
||||||
|
type: 'value',
|
||||||
|
name: '',
|
||||||
|
nameTextStyle: { color: '#fff', padding: [0, 0, 0, 40] },
|
||||||
|
splitLine: { show: true, lineStyle: { color: '#333', width: 1, type: 'solid' } },
|
||||||
},
|
},
|
||||||
yAxis: { show: true, type: 'value', splitLine: { show: false } },
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '金额',
|
name: '金额',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 14,
|
barWidth: 9,
|
||||||
|
label: { show: true, position: 'top', color: '#fff', distance: 9 },
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderRadius: 5,
|
borderRadius: [0, 0, 4, 4],
|
||||||
color: graphicLinearGradient('#66FFFF', '#66FFFF33'),
|
color: graphicLinearGradient('#66FFFF', '#66FFFF33'),
|
||||||
},
|
},
|
||||||
data: [2, 8, 3, 7, 1, 9, 18, 3, 7, 1, 9, 6],
|
data: [596, 566, 512, 375, 566, 437, 492, 519, 309, 482, 539, 572],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '金额',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 19,
|
||||||
|
symbolOffset: [0, 5],
|
||||||
|
data: [596, 566, 512, 375, 566, 437, 492, 519, 309, 482, 539, 572],
|
||||||
|
itemStyle: { color: '#66FFFF' },
|
||||||
|
lineStyle: { color: 'transparent' },
|
||||||
|
animationDuration: 499,
|
||||||
|
animationDelay: 644,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
@ -41,7 +80,7 @@ const option = {
|
||||||
/** 渲染图表 */
|
/** 渲染图表 */
|
||||||
export const renderEcharts = (element: Ref<HTMLDivElement>) => {
|
export const renderEcharts = (element: Ref<HTMLDivElement>) => {
|
||||||
myChart = echarts.init(element.value, null, {
|
myChart = echarts.init(element.value, null, {
|
||||||
renderer: 'svg',
|
renderer: 'canvas',
|
||||||
devicePixelRatio: window.devicePixelRatio,
|
devicePixelRatio: window.devicePixelRatio,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,11 +18,12 @@ onMounted(() => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.big-data__sidebar-item {
|
.big-data__sidebar-item {
|
||||||
width: 800px;
|
margin: 16px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
height: 377px;
|
height: 377px;
|
||||||
|
|
||||||
&-chart {
|
&-chart {
|
||||||
padding: 29px 25px 21px 28px;
|
padding: 19px 0 0 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,116 @@
|
||||||
<script setup lang="ts">
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarMiddle';
|
||||||
|
|
||||||
|
const chartPie = ref<HTMLDivElement>();
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
renderEcharts(chartPie);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
top
|
<div class="big-data__sidebar-item">
|
||||||
|
<div class="flex-x-between">
|
||||||
|
<h1 class="big-data__sidebar-title">企业信息</h1>
|
||||||
|
<span class="big-data__sidebar-title-describe">截止时间至2021.12.30</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="big-data__sidebar-card">
|
||||||
|
<li>
|
||||||
|
<h1>报税金额</h1>
|
||||||
|
<p class="c-warning-secondary">¥1551154545</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex-x-between">
|
||||||
|
<div>
|
||||||
|
<h1>企业数量</h1>
|
||||||
|
<p class="c-primary-secondary">783</p>
|
||||||
|
</div>
|
||||||
|
<div ref="chartPie" class="big-data__sidebar-card-chart-pie" />
|
||||||
|
</div>
|
||||||
|
<div class="big-data__sidebar-card-enterprise-type">
|
||||||
|
<span class="mr-[13px]">
|
||||||
|
<i class="bg-primary-secondary" />
|
||||||
|
国营企业 345
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<i class="bg-warning-secondary" />
|
||||||
|
私营企业 345
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex-x-between">
|
||||||
|
<h1>总投资金额</h1>
|
||||||
|
<span class="font-size-[12px]">环比变化</span>
|
||||||
|
<span class="font-size-[12px]">+123%</span>
|
||||||
|
</div>
|
||||||
|
<p class="c-primary-secondary">¥1551154545</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex-x-between">
|
||||||
|
<h1>税收总金额</h1>
|
||||||
|
<span class="font-size-[12px]">环比变化</span>
|
||||||
|
<span class="font-size-[12px]">-123%</span>
|
||||||
|
</div>
|
||||||
|
<p class="c-primary-secondary">¥1551154545</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss" scoped>
|
||||||
|
.big-data__sidebar-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 338px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big-data__sidebar-card {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 9px 16px 0 19px;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
width: 242px;
|
||||||
|
height: 124px;
|
||||||
|
background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0 0 2px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-enterprise-type {
|
||||||
|
margin: 4px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-chart-pie {
|
||||||
|
width: 82px;
|
||||||
|
height: 82px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,11 +1,116 @@
|
||||||
<script setup lang="ts">
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarMiddle';
|
||||||
|
|
||||||
|
const chartPie = ref<HTMLDivElement>();
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
renderEcharts(chartPie);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
top
|
<div class="big-data__sidebar-item">
|
||||||
|
<div class="flex-x-between">
|
||||||
|
<h1 class="big-data__sidebar-title">企业信息</h1>
|
||||||
|
<span class="big-data__sidebar-title-describe">截止时间至2021.12.30</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="big-data__sidebar-card">
|
||||||
|
<li>
|
||||||
|
<h1>报税金额</h1>
|
||||||
|
<p class="c-warning-secondary">¥1551154545</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex-x-between">
|
||||||
|
<div>
|
||||||
|
<h1>企业数量</h1>
|
||||||
|
<p class="c-primary-secondary">783</p>
|
||||||
|
</div>
|
||||||
|
<div ref="chartPie" class="big-data__sidebar-card-chart-pie" />
|
||||||
|
</div>
|
||||||
|
<div class="big-data__sidebar-card-enterprise-type">
|
||||||
|
<span class="mr-[13px]">
|
||||||
|
<i class="bg-primary-secondary" />
|
||||||
|
国营企业 345
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<i class="bg-warning-secondary" />
|
||||||
|
私营企业 345
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex-x-between">
|
||||||
|
<h1>总投资金额</h1>
|
||||||
|
<span class="font-size-[12px]">环比变化</span>
|
||||||
|
<span class="font-size-[12px]">+123%</span>
|
||||||
|
</div>
|
||||||
|
<p class="c-primary-secondary">¥1551154545</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex-x-between">
|
||||||
|
<h1>税收总金额</h1>
|
||||||
|
<span class="font-size-[12px]">环比变化</span>
|
||||||
|
<span class="font-size-[12px]">-123%</span>
|
||||||
|
</div>
|
||||||
|
<p class="c-primary-secondary">¥1551154545</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss" scoped>
|
||||||
|
.big-data__sidebar-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 338px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big-data__sidebar-card {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 9px 16px 0 19px;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
width: 242px;
|
||||||
|
height: 124px;
|
||||||
|
background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0 0 2px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-enterprise-type {
|
||||||
|
margin: 4px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-chart-pie {
|
||||||
|
width: 82px;
|
||||||
|
height: 82px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,32 +1,87 @@
|
||||||
<script lang="ts" setup>
|
<script lang="tsx" setup>
|
||||||
import { ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { displayContent } from '@/components/PanelItem/DigitalNumber';
|
||||||
import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
|
import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
|
||||||
import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
|
import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
|
||||||
|
import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarTop';
|
||||||
|
|
||||||
|
const chartProgress = ref<HTMLDivElement>();
|
||||||
|
const money = '1386114';
|
||||||
|
|
||||||
const timeList = ref<TimeSelectType[]>([
|
const timeList = ref<TimeSelectType[]>([
|
||||||
{ label: '2020.09', value: '2021' },
|
{ label: '2020.09', value: '2021' },
|
||||||
{ label: '2020.09', value: '2021' },
|
{ label: '2020.09', value: '2021' },
|
||||||
{ label: '2020.09', value: '2021' },
|
{ label: '2020.09', value: '2021' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
renderEcharts(chartProgress);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="big-data__sidebar-item">
|
<div class="big-data__sidebar-item h-[226px]">
|
||||||
<div class="flex-x-between">
|
<div class="flex-x-between">
|
||||||
<div class="big-data__sidebar-title">
|
<h1 class="big-data__sidebar-title">园区进出口额</h1>
|
||||||
<h1>规模效益</h1>
|
<div>
|
||||||
|
<span class="big-data__sidebar-tag">总数据</span>
|
||||||
|
<TimeSelect :time-list="timeList" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="money-digit">
|
||||||
|
<component :is="displayContent(money)" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<TimeSelect :time-list="timeList" />
|
<div ref="chartProgress" class="big-data__sidebar-progress" />
|
||||||
</div>
|
|
||||||
|
<ul class="big-data__sidebar-value">
|
||||||
|
<li>
|
||||||
|
进口额
|
||||||
|
<i>¥1551154545</i>
|
||||||
|
</li>
|
||||||
|
<li class="thin-line h-[20px]" />
|
||||||
|
<li>
|
||||||
|
<i>¥1551154545</i>
|
||||||
|
出口额
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.big-data__sidebar-item {
|
.money-digit {
|
||||||
height: 274px;
|
margin: 14px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
span {
|
||||||
|
height: 69px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.big-data__sidebar {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&-progress {
|
||||||
|
margin: 14px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-value {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 9px 0 0 0;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--color-primary-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,10 +26,10 @@ onBeforeMount(async () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 25px 14px 25px;
|
padding: 0 9px 0 9px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
@include view-style-default(530px, 748px, #122953b3);
|
@include view-style-default(530px, 800px, #122953b3);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue