Large-Visual-Screen
/
vehicle-monitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 左侧拼图完成;修改部分代码格式

This commit is contained in:
Bunny 2025-03-08 15:17:31 +08:00
parent a15fafe091
commit a84dc55486
31 changed files with 698 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/business-supervision/bg/content/bg-middle-detail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 840 B

BIN
src/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/images/business-supervision/bg/sidebar/bg-middle-spin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

2
src/assets/styles/global.scss
View File

@ -4,8 +4,10 @@
:root {
--color-primary: #027AFF;
--color-primary-secondary: #00FFFF;
--color-primary-secondary-1: rgba(0, 255, 255, 0.71);
--color-info: #7CC1FF;
--color-info-secondary: #707070;
--color-info-secondary-1: #ADCBFF;
--color-hover: #1C8ADF;
--color-warning: #FFBE44;
--color-warning-secondary: #FEDB65;

23
src/views/business-supervision/business-supervision-content/content-bottom.vue → src/views/business-supervision/business-supervision-content/components/content-bottom.vue
View File

@ -14,10 +14,10 @@ const timeList = ref<TimeSelectType[]>([
<template>
<div class="business-supervision__bottom">
<div class="business-supervision__bottom-inner">
<div class="business-supervision__bottom-title">
<div class="flex-x-between">
<div class="flex-x-between">
<h1 class="font-size-[22px]">年度税收概览</h1>
<span class="font-size-[12px]">单位/万元</span>
<h1>年度税收概览</h1>
<span class="business-supervision__bottom-title-unit">单位/万元</span>
</div>
<TimeSelect :time-list="timeList" />
</div>
@ -37,5 +37,22 @@ const timeList = ref<TimeSelectType[]>([
padding: 20px;
color: #fff;
}
&-title {
display: flex;
justify-content: space-between;
align-items: center;
height: 35px;
h1 {
font-size: 22px;
}
&-unit {
display: inline-block;
margin: 14px 0 0 4px;
font-size: 12px;
}
}
}
</style>

28
src/views/business-supervision/business-supervision-content/content-middle.vue → src/views/business-supervision/business-supervision-content/components/content-middle.vue
View File

@ -5,38 +5,46 @@
<li>
<img
alt="bg-middle-1"
src="@/assets/images/business-supervision/bg/content/bg-middle-1.png"
src="../../../../assets/images/business-supervision/bg/content/bg-middle-1.png"
/>
<h2>员工</h2>
<div class="business-supervision__middle-detail">
<strong>365</strong>
<span>相关员工</span>
</div>
</li>
<li>
<img
alt="bg-middle-2"
src="@/assets/images/business-supervision/bg/content/bg-middle-2.png"
src="../../../../assets/images/business-supervision/bg/content/bg-middle-2.png"
/>
<h2>智慧大楼</h2>
<div class="business-supervision__middle-detail">
<strong>365</strong>
<span>区域面积/㎡</span>
</div>
</li>
<li>
<img
alt="bg-middle-3"
src="@/assets/images/business-supervision/bg/content/bg-middle-3.png"
src="../../../../assets/images/business-supervision/bg/content/bg-middle-3.png"
/>
<h2>智慧设备</h2>
<div class="business-supervision__middle-detail">
<strong>1123</strong>
<span>设备总数</span>
</div>
</li>
<li>
<img
alt="bg-middle-3"
src="@/assets/images/business-supervision/bg/content/bg-middle-3.png"
src="../../../../assets/images/business-supervision/bg/content/bg-middle-3.png"
/>
<h2>数据报表</h2>
<div class="business-supervision__middle-detail">
<strong>287</strong>
<span>报表下载总数</span>
</div>
</li>
</ul>
</template>
@ -76,6 +84,18 @@
center;
background-size: cover;
}
}
&-detail {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 140px;
height: 99px;
background: url('@/assets/images/business-supervision/bg/content/bg-middle-detail.png')
no-repeat center;
background-size: cover;
strong {
font-size: 32px;

3
src/views/business-supervision/business-supervision-content/content-top.vue → src/views/business-supervision/business-supervision-content/components/content-top.vue
View File

@ -32,6 +32,7 @@ const list = [
},
];
// 动态顶部元素
const contentEl = () => {
return (
<>
@ -52,7 +53,7 @@ const contentEl = () => {
alt="card-1"
src={
new URL(
`../../../assets/images/business-supervision/bg/content/bg-card-${index + 1}.png`,
`../../../../assets/images/business-supervision/bg/content/bg-card-${index + 1}.png`,
import.meta.url
).href
}

6
src/views/business-supervision/business-supervision-content/index.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import ContentBottom from '@/views/business-supervision/business-supervision-content/content-bottom.vue';
import ContentMiddle from '@/views/business-supervision/business-supervision-content/content-middle.vue';
import ContentTop from '@/views/business-supervision/business-supervision-content/content-top.vue';
import ContentBottom from '@/views/business-supervision/business-supervision-content/components/content-bottom.vue';
import ContentMiddle from '@/views/business-supervision/business-supervision-content/components/content-middle.vue';
import ContentTop from '@/views/business-supervision/business-supervision-content/components/content-top.vue';
</script>
<template>

82
src/views/business-supervision/business-supervision-left/charts/sidebarMiddle.ts Normal file
View File

@ -0,0 +1,82 @@
import 'echarts/lib/component/dataZoom';
import type { EChartsOption } from 'echarts';
import { type Ref, ref } from 'vue';
import echarts from '@/plugins/echarts';
const option = ref<EChartsOption>();
option.value = {
tooltip: { trigger: 'item' },
grid: { top: 0, left: 0, right: 0, bottom: 0, containLabel: false },
series: [
{
name: '企业',
type: 'pie',
radius: ['74%', '100%'],
avoidLabelOverlap: false,
label: { show: false, position: false },
labelLine: { show: false },
data: [
{
value: 1048,
name: '国营企业',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: '#0DBBB3' },
{ offset: 1, color: '#66FFFF' },
]),
},
},
{
value: 735,
name: '私营企业',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: '#DEA60F' },
{ offset: 1, color: '#FFE457' },
]),
},
},
],
},
{
name: '企业1',
type: 'pie',
radius: ['54%', '74%'],
avoidLabelOverlap: false,
label: { show: false, position: false },
labelLine: { show: false },
data: [
{
value: 1048,
name: '国营企业',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: '#0DBBB37f' },
{ offset: 1, color: '#66FFFF7f ' },
]),
},
},
{
value: 735,
name: '私营企业',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: '#DEA60F7F' },
{ offset: 1, color: '#FFE4577f' },
]),
},
},
],
},
],
};
export const renderEcharts = (element: Ref<HTMLDivElement>) => {
const myChart = echarts.init(element.value, null, {
renderer: 'svg',
devicePixelRatio: window.devicePixelRatio,
});
myChart.setOption(option.value);
};

52
src/views/business-supervision/business-supervision-left/charts/sidebarTop.ts Normal file
View File

@ -0,0 +1,52 @@
import 'echarts/lib/component/dataZoom';
import type { EChartsOption } from 'echarts';
import { type Ref, ref } from 'vue';
import echarts from '@/plugins/echarts';
const option = ref<EChartsOption>();
option.value = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
},
grid: { top: 0, left: 0, right: -100, bottom: 0, containLabel: false },
xAxis: { show: false, type: 'value' },
yAxis: { show: false, type: 'category', data: ['进出口金额'] },
series: [
{
name: '进口额',
type: 'bar',
barMaxWidth: 23,
barGap: '-100%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#1B3052' },
{ offset: 1, color: '#32A5DE' },
]),
},
data: [381],
},
{
name: '出口额',
type: 'bar',
barMaxWidth: 23,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#1B3052' },
{ offset: 1, color: '#3684F2' },
]),
},
data: [-158],
},
],
};
export const renderEcharts = (element: Ref<HTMLDivElement>) => {
const myChart = echarts.init(element.value, null, {
renderer: 'svg',
devicePixelRatio: window.devicePixelRatio,
});
myChart.setOption(option.value);
};

75
src/views/business-supervision/business-supervision-left/components/sidebar-left-bottom.vue Normal file
View File

@ -0,0 +1,75 @@
<script lang="ts" setup>
import { ref } from 'vue';
const devices = ref<any>([
[
{ color: '#ff7e5f', title: 738, description: '设备总数1' },
{ color: '#ff7e5f', title: 738, description: '设备总数' },
{ color: '#fff', title: 738, description: '设备总数' },
{ color: '#ff7e5f', title: 738, description: '设备总数' },
],
[
{ color: '#2a65ea', title: '7.3k㎡', description: '设备总数' },
{ color: '#2a65ea', title: 738, description: '设备总数' },
{ color: '#fff', title: 738, description: '设备总数' },
{ color: '#2a65ea', title: 738, description: '设备总数' },
],
]);
</script>
<template>
<div class="business-supervision__sidebar-item h-[294px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>地理规划</h1>
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
<ul v-for="(parent, pIndex) in devices" :key="pIndex" class="flex-x-around mt-[12px]">
<li v-for="(item, index) in parent" :key="index">
<div class="manage-device">
<h1>{{ item.title.toString() }}</h1>
<p>{{ item.description }}</p>
<div class="device-carriage">
<i :style="{ color: item.color }" class="i-mdi:electricity" />
</div>
</div>
<!--<manage-device :color="item.color" :description="item.description" :title="item.title" />-->
</li>
</ul>
</div>
</template>
<style lang="scss" scoped>
.manage-device {
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
h1 {
text-align: center;
font-size: 24px;
}
p {
margin: 0 0 2px 0;
text-align: center;
font-size: 14px;
}
.device-carriage {
display: flex;
justify-content: center;
width: 74px;
height: 46px;
background: url('@/assets/images/business-supervision/bg/sidebar/device-carriage.png') no-repeat
center;
background-size: cover;
i {
font-size: 26px;
}
}
}
</style>

113
src/views/business-supervision/business-supervision-left/components/sidebar-left-middle.vue Normal file
View File

@ -0,0 +1,113 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sidebarMiddle';
const chartPie = ref<HTMLDivElement>();
onMounted(() => {
renderEcharts(chartPie);
});
</script>
<template>
<div class="business-supervision__sidebar-item h-[354px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>企业信息</h1>
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
<ul class="business-supervision__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="business-supervision__sidebar-card-chart-pie" />
</div>
<div class="business-supervision__sidebar-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>
<style lang="scss" scoped>
.business-supervision__sidebar-card {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
width: 100%;
height: 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 {
width: 100%;
span {
font-size: 13px;
}
i {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
}
}
&-chart-pie {
width: 82px;
height: 82px;
}
}
</style>

106
src/views/business-supervision/business-supervision-left/components/sidebar-left-top.vue Normal file
View File

@ -0,0 +1,106 @@
<script lang="tsx" setup>
import { onMounted, ref } from 'vue';
import TimeSelect from '@/components/TimeSelect/index.vue';
import { TimeSelectType } from '@/components/TimeSelect/type';
import formatter from '@/utils/digte-formatter';
import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sidebarTop';
const chartProgress = ref<HTMLDivElement>();
const money = ref('1386114');
const timeList = ref<TimeSelectType[]>([
{ label: '2020.09', value: '2021' },
{ label: '2020.09', value: '2021' },
{ label: '2020.09', value: '2021' },
]);
/** 显示金额 */
const displayContent = () => {
formatter(money);
return (
<>
<span>¥</span>
{money.value.split('').map((item, index) => (
<span key={index}>{item}</span>
))}
</>
);
};
onMounted(() => {
renderEcharts(chartProgress);
});
</script>
<template>
<div class="business-supervision__sidebar-item h-[246px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>园区进出口额</h1>
</div>
<div>
<span class="business-supervision__sidebar-tag">总数据</span>
<TimeSelect :time-list="timeList" />
</div>
</div>
<div class="business-supervision__sidebar-money-digit">
<component :is="displayContent()" />
</div>
<div>
<div ref="chartProgress" class="business-supervision__sidebar-progress" />
<ul class="business-supervision__sidebar-value flex-x-between">
<li>
进口额
<i>¥1551154545</i>
</li>
<li class="thin-line h-[20px]" />
<li>
<i>¥1551154545</i>
出口额
</li>
</ul>
</div>
</div>
</template>
<style lang="scss" scoped>
.business-supervision__sidebar {
&-money-digit {
display: flex;
justify-content: end;
margin: 26px 0 0 0;
color: var(--color-primary-secondary);
font-size: 45px;
text-align: center;
span {
float: left;
margin: 0 3.5px;
width: 49px;
height: 69px;
background: url('@/assets/images/business-supervision/bg/sidebar/bg-count.png') no-repeat;
background-size: cover;
}
}
&-progress {
margin: 21px 0 0 0;
width: 495px;
height: 23px;
}
&-value {
font-size: 18px;
i {
font-style: normal;
font-size: 20px;
color: var(--color-primary-secondary);
}
}
}
</style>

89
src/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue
View File

@ -1,89 +0,0 @@
<script lang="ts" setup></script>
<template>
<ul>
<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>111</div>
</div>
<div class="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>
</template>
<style lang="scss" scoped>
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
width: 100%;
height: 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 {
width: 100%;
span {
font-size: 13px;
}
i {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
}
}
}
</style>

74
src/views/business-supervision/business-supervision-left/compontens/import-export-value.vue
View File

@ -1,74 +0,0 @@
<script lang="tsx" setup>
import { ref } from 'vue';
import formatter from '@/utils/digte-formatter';
const money = ref('1386114');
/** 显示金额 */
const displayContent = () => {
formatter(money);
return (
<>
<span>¥</span>
{money.value.split('').map((item, index) => (
<span key={index}>{item}</span>
))}
</>
);
};
</script>
<template>
<div class="money-digit">
<component :is="displayContent()" />
</div>
<div>
<div class="progress">111</div>
<ul class="import-export-value flex-x-between">
<li>
进口额
<i>¥1551154545</i>
</li>
<li class="thin-line h-[20px]" />
<li>
<i>¥1551154545</i>
出口额
</li>
</ul>
</div>
</template>
<style lang="scss" scoped>
.money-digit {
display: flex;
justify-content: end;
margin: 26px 0 0 0;
color: var(--color-primary-secondary);
font-size: 45px;
text-align: center;
span {
float: left;
margin: 0 3.5px;
width: 49px;
height: 69px;
background: url('@/assets/images/business-supervision/bg/sidebar/bg-count.png') no-repeat;
background-size: cover;
}
}
.progress {
margin: 21px 0 0 0;
}
.import-export-value {
font-size: 18px;
i {
font-style: normal;
font-size: 20px;
color: var(--color-primary-secondary);
}
}
</style>

53
src/views/business-supervision/business-supervision-left/compontens/manage-device.vue
View File

@ -1,53 +0,0 @@
<script lang="ts" setup>
import { PropType } from 'vue';
defineProps<{
color: PropType<string>;
title: PropType<string | number>;
description: PropType<string>;
}>();
</script>
<template>
<div class="manage-device">
<h1>{{ title.toString() }}</h1>
<p>{{ description }}</p>
<div class="device-carriage">
<i :style="{ color }" class="i-mdi:electricity" />
</div>
</div>
</template>
<style lang="scss" scoped>
.manage-device {
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
h1 {
text-align: center;
font-size: 24px;
}
p {
margin: 0 0 2px 0;
text-align: center;
font-size: 14px;
}
.device-carriage {
display: flex;
justify-content: center;
width: 74px;
height: 46px;
background: url('@/assets/images/business-supervision/bg/sidebar/device-carriage.png') no-repeat
center;
background-size: cover;
i {
font-size: 26px;
}
}
}
</style>

72
src/views/business-supervision/business-supervision-left/index.vue
View File

@ -1,73 +1,13 @@
<script lang="tsx" setup>
import { ref } from 'vue';
import TimeSelect from '@/components/TimeSelect/index.vue';
import { TimeSelectType } from '@/components/TimeSelect/type';
import EnterpriseInfo from '@/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue';
import ImportExportValue from '@/views/business-supervision/business-supervision-left/compontens/import-export-value.vue';
import ManageDevice from '@/views/business-supervision/business-supervision-left/compontens/manage-device.vue';
const devices = ref<any>([
[
{ color: '#ff7e5f', title: 738, description: '设备总数1' },
{ color: '#ff7e5f', title: 738, description: '设备总数' },
{ color: '#fff', title: 738, description: '设备总数' },
{ color: '#ff7e5f', title: 738, description: '设备总数' },
],
[
{ color: '#2a65ea', title: '7.3k㎡', description: '设备总数' },
{ color: '#2a65ea', title: 738, description: '设备总数' },
{ color: '#fff', title: 738, description: '设备总数' },
{ color: '#2a65ea', title: 738, description: '设备总数' },
],
]);
const timeList = ref<TimeSelectType[]>([
{ label: '2020.09', value: '2021' },
{ label: '2020.09', value: '2021' },
{ label: '2020.09', value: '2021' },
]);
import SidebarLeftBottom from '@/views/business-supervision/business-supervision-left/components/sidebar-left-bottom.vue';
import SidebarLeftMiddle from '@/views/business-supervision/business-supervision-left/components/sidebar-left-middle.vue';
import SidebarLeftTop from '@/views/business-supervision/business-supervision-left/components/sidebar-left-top.vue';
</script>
<template>
<div class="business-supervision__sidebar">
<div class="business-supervision__sidebar-item h-[246px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>园区进出口额</h1>
</div>
<div>
<span class="business-supervision__sidebar-tag">总数据</span>
<TimeSelect :time-list="timeList" />
</div>
</div>
<import-export-value />
</div>
<div class="business-supervision__sidebar-item h-[354px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>企业信息</h1>
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
<enterprise-info />
</div>
<div class="business-supervision__sidebar-item h-[294px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>地理规划</h1>
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
<ul v-for="(parent, pIndex) in devices" :key="pIndex" class="flex-x-around mt-[12px]">
<li v-for="(item, index) in parent" :key="index">
<manage-device :color="item.color" :description="item.description" :title="item.title" />
</li>
</ul>
</div>
<sidebar-left-top />
<sidebar-left-middle />
<sidebar-left-bottom />
</div>
</template>

14
src/views/business-supervision/business-supervision-right/components/sidebar-right-bottom.vue Normal file
View File

@ -0,0 +1,14 @@
<script lang="ts" setup></script>
<template>
<div class="business-supervision__sidebar-item h-[294px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>地理规划</h1>
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
</div>
</template>
<style lang="scss" scoped></style>

14
src/views/business-supervision/business-supervision-right/components/sidebar-right-middle.vue Normal file
View File

@ -0,0 +1,14 @@
<script lang="ts" setup></script>
<template>
<div class="business-supervision__sidebar-item h-[354px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>企业信息</h1>
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
</div>
</template>
<style lang="scss" scoped></style>

132
src/views/business-supervision/business-supervision-right/components/sidebar-right-top.vue Normal file
View File

@ -0,0 +1,132 @@
<script lang="ts" setup>
import { ref } from 'vue';
import TimeSelect from '@/components/TimeSelect/index.vue';
import { TimeSelectType } from '@/components/TimeSelect/type';
const timeList = ref<TimeSelectType[]>([
{ label: '2020.09', value: '2021' },
{ label: '2020.09', value: '2021' },
{ label: '2020.09', value: '2021' },
]);
</script>
<template>
<div class="business-supervision__sidebar-item h-[246px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>园区进出口额</h1>
</div>
<div>
<span class="business-supervision__sidebar-tag">总数据</span>
<TimeSelect :time-list="timeList" />
</div>
</div>
<div class="business-supervision__sidebar-top">
<div class="business-supervision__sidebar--spin">
<div class="business-supervision__sidebar-describe">
<strong>894</strong>
<span>维修业务出口总值</span>
</div>
</div>
<ul class="business-supervision__sidebar-list">
<li>
<h1>$ 1.62</h1>
<img
alt=""
src="../../../../assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
/>
<p>批准规划面积验收率</p>
</li>
<li>
<h1>$ 1.62</h1>
<img
alt=""
src="../../../../assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
/>
<p>批准规划面积验收率</p>
</li>
<li>
<h1>$ 1.62</h1>
<img
alt=""
src="../../../../assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
/>
<p>批准规划面积验收率</p>
</li>
</ul>
</div>
</div>
</template>
<style lang="scss" scoped>
.business-supervision__sidebar {
&-top {
display: flex;
justify-content: space-between;
align-items: center;
margin: 14px 0 0 0;
}
&--spin {
width: 167px;
height: 167px;
background: url('@/assets/images/business-supervision/bg/sidebar/bg-middle-spin.png') no-repeat
center;
background-size: cover;
animation: rotate 2s linear infinite;
}
&-describe {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
width: 100%;
height: 100%;
color: var(--color-primary-secondary);
font-size: 14px;
text-align: center;
animation: rotate-reverse 2s linear infinite;
strong {
color: var(--color-primary-secondary-1);
font-size: 44px;
}
}
.business-supervision__sidebar-list {
display: flex;
justify-content: space-around;
//align-items: center;
flex: 1;
font-size: 13px;
li {
display: flex;
flex-direction: column;
align-items: center;
h1 {
color: var(--color-primary-secondary);
font-size: 31px;
}
img {
margin: 9px 0 0 0;
width: 44px;
height: 50px;
}
p {
margin: 9px 0 0 0;
width: 72px;
text-align: center;
}
}
}
}
</style>

34
src/views/business-supervision/business-supervision-right/index.vue
View File

@ -1,31 +1,17 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import SidebarRightBottom from '@/views/business-supervision/business-supervision-right/components/sidebar-right-bottom.vue';
import SidebarRightMiddle from '@/views/business-supervision/business-supervision-right/components/sidebar-right-middle.vue';
import SidebarRightTop from '@/views/business-supervision/business-supervision-right/components/sidebar-right-top.vue';
</script>
<template>
<div class="business-supervision__sidebar flex-y-between">
<div class="business-supervision__sidebar-item h-[246px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>园区进出口额</h1>
</div>
</div>
</div>
<sidebar-right-top />
<div class="business-supervision__sidebar-item h-[354px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>企业信息</h1>
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
</div>
<sidebar-right-middle />
<div class="business-supervision__sidebar-item h-[294px]">
<div class="flex-x-between">
<div class="business-supervision__sidebar-title">
<h1>地理规划</h1>
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
</div>
<sidebar-right-bottom />
</div>
</template>
<style lang="scss" scoped></style>

2
src/views/business-supervision/style.scss
View File

@ -46,7 +46,7 @@
&-title-describe {
font-size: 12px;
color: var(--color-info-secondary);
color: var(--color-info-secondary-1);
}
}

7
src/views/smart-park/index.vue
View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import SmartPartFooter from '@/views/smart-park/smart-park-footer.vue';
import SmartPartContent from '@/views/smart-park/smart-park-main/index.vue';
import SmartPartContent from '@/views/smart-park/smart-park-content/index.vue';
import SmartPartFooter from '@/views/smart-park/smart-park-footer/index.vue';
</script>
<template>
@ -8,8 +8,11 @@ import SmartPartContent from '@/views/smart-park/smart-park-main/index.vue';
<div class="smart-park__arrow left-[38px]">
<img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-left.png" />
</div>
<smart-part-content />
<smart-part-footer />
<div class="smart-park__arrow right-[38px]">
<img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-right.png" />
</div>

2
src/views/smart-park/smart-park-main/components/central-item.vue → src/views/smart-park/smart-park-content/components/smart-park-content/components/content-item.vue
View File

@ -15,7 +15,7 @@ defineProps({
<img
alt="arrow-item"
class="float-left h-[16px]"
src="@/assets/images/smart-park/arrow/arrow-item.png"
src="../../../../../../assets/images/smart-park/arrow/arrow-item.png"
/>
</div>
</div>

0
src/views/smart-park/smart-park-main/components/central-percent.vue → src/views/smart-park/smart-park-content/components/smart-park-content/components/content-percent.vue
View File

32
src/views/smart-park/smart-park-main/smart-park-center.vue → src/views/smart-park/smart-park-content/components/smart-park-content/index.vue
View File

@ -1,36 +1,36 @@
<script lang="ts" setup>
import CentralItem from '@/views/smart-park/smart-park-main/components/central-item.vue';
import CentralPercent from '@/views/smart-park/smart-park-main/components/central-percent.vue';
import ContentItem from '@/views/smart-park/smart-park-content/components/smart-park-content/components/content-item.vue';
import ContentPercent from '@/views/smart-park/smart-park-content/components/smart-park-content/components/content-percent.vue';
</script>
<template>
<div class="smart-park__center">
<div class="smart-park-central">
<div class="h-[570px] flex-y-between">
<div class="smart-park__center-title">
<div class="smart-park-central-title">
<h1>卡口车辆监控</h1>
</div>
<!-- 中间布局 -->
<div class="smart-park__center-inner">
<div class="smart-park-central-inner">
<div class="pos-relative">
<central-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
<central-percent :percent="44" class="top-[73px] left-[193px]" />
<content-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
<content-percent :percent="44" class="top-[73px] left-[193px]" />
</div>
<div class="pos-relative">
<central-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
<central-percent :percent="25" class="top-[73px] right-[192px]" />
<content-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
<content-percent :percent="25" class="top-[73px] right-[192px]" />
</div>
<div class="pos-relative">
<central-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
<central-percent :percent="25" class="top-[40px] left-[193px]" />
<content-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
<content-percent :percent="25" class="top-[40px] left-[193px]" />
</div>
<div class="pos-relative">
<central-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
<central-percent :percent="44" class="top-[40px] left-[66px]" />
<content-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
<content-percent :percent="44" class="top-[40px] left-[66px]" />
</div>
<div class="smart-park__center-content">
<div class="smart-park__center-content-headline flex-center">
<div class="smart-park-central-content">
<div class="smart-park-central-content-headline flex-center">
<h1>智能管控</h1>
</div>
</div>
@ -40,7 +40,7 @@ import CentralPercent from '@/views/smart-park/smart-park-main/components/centra
</template>
<style lang="scss" scoped>
.smart-park__center {
.smart-park-central {
display: flex;
justify-content: center;
align-items: center;

8
src/views/smart-park/smart-park-main/smart-park-sidebar-left.vue → src/views/smart-park/smart-park-content/components/smart-park-sidebar-left/index.vue
View File

@ -11,22 +11,22 @@
<!-- 汽车列表 -->
<ul class="mt-[32px]">
<li class="smart-park__sidebar--left-item">
<img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
<img alt="car-1" src="../../../../../assets/images/smart-park/car/car-1.png" />
<p>入卡口（西北门）</p>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li>
<li class="smart-park__sidebar--left-item">
<img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
<img alt="car-1" src="../../../../../assets/images/smart-park/car/car-1.png" />
<p>入卡口（东北门）</p>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li>
<li class="smart-park__sidebar--left-item">
<img alt="car-1" src="@/assets/images/smart-park/car/car-2.png" />
<img alt="car-1" src="../../../../../assets/images/smart-park/car/car-2.png" />
<p>入卡口（东北门）</p>
<span class="dashed-circle c-warning border-b-warning">拥堵</span>
</li>
<li class="smart-park__sidebar--left-item">
<img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
<img alt="car-1" src="../../../../../assets/images/smart-park/car/car-1.png" />
<p>入卡口（东南门）</p>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li>

0
src/views/smart-park/smart-park-main/charts.ts → src/views/smart-park/smart-park-content/components/smart-park-sidebar-right/charts/charts.ts
View File

2
src/views/smart-park/smart-park-main/smart-park-sidebar-right.vue → src/views/smart-park/smart-park-content/components/smart-park-sidebar-right/index.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { renderEcharts } from '@/views/smart-park/smart-park-main/charts';
import { renderEcharts } from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-right/charts/charts';
const weekDataChart = ref<HTMLDivElement>();

10
src/views/smart-park/smart-park-main/index.vue → src/views/smart-park/smart-park-content/index.vue
View File

@ -1,13 +1,15 @@
<script lang="ts" setup>
import SmartPartCenter from '@/views/smart-park/smart-park-main/smart-park-center.vue';
import SmartPartSidebarLeft from '@/views/smart-park/smart-park-main/smart-park-sidebar-left.vue';
import SmartPartSidebarRight from '@/views/smart-park/smart-park-main/smart-park-sidebar-right.vue';
import SmartPartContent from '@/views/smart-park/smart-park-content/components/smart-park-content/index.vue';
import SmartPartSidebarLeft from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-left/index.vue';
import SmartPartSidebarRight from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-right/index.vue';
</script>
<template>
<main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
<smart-part-sidebar-left />
<smart-part-center />
<smart-part-content />
<smart-part-sidebar-right />
</main>
</template>
<style lang="scss" scoped></style>

2
src/views/smart-park/smart-park-footer.vue → src/views/smart-park/smart-park-footer/index.vue
View File

@ -4,7 +4,7 @@
<footer>
<ul class="smart-park__footer-nav">
<li v-for="index in new Array(5)" :key="index" class="smart-park__footer-item">
<img alt="车辆管理" src="@/assets/images/smart-park/car/car-39.png" />
<img alt="车辆管理" src="../../../assets/images/smart-park/car/car-39.png" />
<span class="text-white hover">车辆管理</span>
</li>
</ul>