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-02 22:46:59 +08:00
parent 179ac9accd
commit b3ed7238e9
16 changed files with 310 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/plugins.ts
View File

@ -1,7 +1,7 @@
import UnoCssIcons from '@unocss/preset-icons';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { presetIcons, presetUno } from 'unocss';
import { presetIcons } from 'unocss';
import UnoCSS from 'unocss/vite';
import type { PluginOption } from 'vite';
import { vitePluginFakeServer } from 'vite-plugin-fake-server';
@ -37,7 +37,6 @@ export const plugins = (mode): PluginOption[] => {
display: 'inline-block',
},
}),
presetUno(),
],
}),
compressPack(mode),

BIN
src/assets/images/bg/bg-count.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/bg/bg-frame-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 704 B

BIN
src/assets/images/manage-forms/frame-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

34
src/assets/styles/animations/src/transition.scss
View File

@ -53,14 +53,26 @@
transition: var(--pure-transition-duration) all !important;
}
//.slide-enter-active,
//.slide-leave-active {
// transition: opacity 0.3s,
// transform 0.3s;
//}
//
//.slide-enter-from,
//.slide-leave-to {
// opacity: 0;
// transform: translateX(-30%);
//}
.slide-left-enter-active,
.slide-left-leave-active {
transition: opacity 0.3s,
transform 0.3s;
}
.slide-left-enter-from,
.slide-left-leave-to {
opacity: 0;
transform: translateX(-30%);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: opacity 0.3s,
transform 0.3s;
}
.slide-right-enter-from,
.slide-right-leave-to {
opacity: 0;
transform: translateX(30%);
}

16
src/assets/styles/common/src/element.scss
View File

@ -17,4 +17,20 @@
&:hover {
color: var(--color-hover);
}
}
.thin-line {
position: relative;
}
.thin-line::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background-color: var(--color-primary-secondary);
transform: scaleX(0.8);
transform-origin: 0 0;
}

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

@ -1,10 +1,12 @@
@use "animations/animations";
@use "common/common";
@use "views/views";
:root {
--colot-primary: #027AFF;
--color-primary-secondary: #00FFFF;
--color-info: #7CC1FF;
--color-info-secondary: #707070;
--color-hover: #1C8ADF;
--color-warning: #FFBE44;
--color-warning-secondary: #FEDB65;

30
src/assets/styles/views/src/manage-forms.scss Normal file
View File

@ -0,0 +1,30 @@
.manage-forms {
padding: 19px 25px;
width: 100%;
height: 100%;
.manage-forms-slide {
width: 530px;
height: 100%;
color: #fff;
}
.common-bg {
padding: 10px 15px;
background: rgba(14, 95, 255, 0.2);
}
.title {
width: 172px;
height: 42px;
font-size: 22px;
color: #fff;
background: url('@/assets/images/bg/bg-frame-4.png') no-repeat;
background-size: cover;
}
.title-description {
font-size: 12px;
color: var(--color-info-secondary);
}
}

1
src/assets/styles/views/views.scss Normal file
View File

@ -0,0 +1 @@
@use "@/assets/styles/views/src/manage-forms";

8
src/router/index.ts
View File

@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [...remaining, ...error];
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior: () => ({ top: 0, behavior: 'smooth' }),
scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' }),
});
/** 全局注册 router */
@ -22,10 +22,4 @@ export const resetRouter = () => {
router.replace({ path: '/' }).then();
};
// router.afterEach((to, from) => {
// const toDepth = to.path.split('/').length;
// const fromDepth = from.path.split('/').length;
// to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left';
// });
export default router;

22
src/router/modules/home.ts
View File

@ -1,3 +1,4 @@
import Layout from '@/layout/index.vue';
import type { RouteConfigsTable } from '@/types/router/Route';
const routes: RouteConfigsTable[] = [
@ -7,6 +8,14 @@ const routes: RouteConfigsTable[] = [
component: () => import('@/views/welcome/index.vue'),
meta: { transition: 'fade', title: '后台管理系统大标题' },
},
{
path: '/manage-forms',
name: 'manageForms',
component: () => import('@/views/manage-forms/index.vue'),
meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
},
{
path: '/smart-parking',
name: 'smartParking',
@ -14,10 +23,15 @@ const routes: RouteConfigsTable[] = [
meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
},
{
path: '/manage-forms',
name: 'manageForms',
component: () => import('@/views/manage-forms/index.vue'),
meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
path: '/redirect',
component: Layout,
meta: { hidden: true },
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index.vue'),
},
],
},
];

10
src/utils/digte-formatter.ts Normal file
View File

@ -0,0 +1,10 @@
export function formatter(number) {
const numbers = number.toString().split('').reverse();
const segs = [];
while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
return segs.join(',').split('').reverse().join('');
}
export default formatter;

205
src/views/manage-forms/components/manage-left/index.vue
View File

@ -1,42 +1,201 @@
<script lang="ts" setup></script>
<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="manage-container flex-y-between">
<div class="money">
<h1>园区进出口金额</h1>
<div class="manage-forms-slide flex-y-between">
<div class="common-bg money">
<div class="title">
<h1>园区进出口额</h1>
</div>
<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>
</div>
<div class="enterprise-info">
<h1>园区进出口金额</h1>
<div class="enterprise-info common-bg">
<div class="flex-x-between">
<div class="title">
<h1>企业信息</h1>
</div>
<span class="title-description">截止时间至2021.12.30</span>
</div>
<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>
</div>
<div class="plan">
<h1>园区进出口金额</h1>
<div class="common-bg plan">
<div class="flex-x-between">
<div class="title">
<h1>地理规划</h1>
</div>
<span class="title-description">截止时间至2021.12.30</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.manage-container {
width: 530px;
height: 100%;
.money {
width: 100%;
height: 246px;
.money {
width: 100%;
height: 246px;
background: mediumpurple;
.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/bg/bg-count.png') no-repeat;
background-size: cover;
}
}
.enterprise-info {
width: 530px;
height: 354px;
background: mediumpurple;
.progress {
margin: 21px 0 0 0;
}
.plan {
width: 530px;
height: 294px;
background: mediumpurple;
.import-export-value {
font-size: 18px;
i {
font-style: normal;
font-size: 20px;
color: var(--color-primary-secondary);
}
}
}
.enterprise-info {
padding: 10px 15px;
width: 530px;
height: 354px;
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
width: 100%;
height: 100%;
li {
//margin: 15px 0 0 0;
padding: 9px 16px 0 19px;
margin: 15px 0 0 0;
width: 242px;
height: 124px;
background: url('@/assets/images/manage-forms/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%;
}
}
}
}
.plan {
width: 530px;
height: 294px;
}
</style>

50
src/views/manage-forms/components/manage-right/index.vue
View File

@ -1,42 +1,40 @@
<script lang="ts" setup></script>
<template>
<div class="manage-container flex-y-between">
<div class="money">
<h1>园区进出口金额</h1>
<div class="manage-forms-slide flex-y-between">
<div class="common-bg money">
<div class="title">
<h1>园区进出口额</h1>
</div>
</div>
<div class="enterprise-info">
<h1>园区进出口金额</h1>
<div class="common-bg enterprise-info">
<div class="title">
<h1>园区进出口额</h1>
</div>
</div>
<div class="plan">
<h1>园区进出口金额</h1>
<div class="common-bg plan">
<div class="title">
<h1>园区进出口额</h1>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.manage-container {
.money {
width: 100%;
height: 246px;
}
.enterprise-info {
width: 530px;
height: 100%;
height: 354px;
}
.money {
width: 100%;
height: 246px;
background: mediumpurple;
}
.enterprise-info {
width: 530px;
height: 354px;
background: mediumpurple;
}
.plan {
width: 530px;
height: 294px;
background: mediumpurple;
}
.plan {
width: 530px;
height: 294px;
}
</style>

11
src/views/manage-forms/index.vue
View File

@ -5,18 +5,9 @@ import ManageRight from '@/views/manage-forms/components/manage-right/index.vue'
</script>
<template>
<div class="manage flex-x-between">
<div class="manage-forms flex-x-between">
<manage-left />
<mange-content />
<manage-right />
</div>
</template>
<style lang="scss" scoped>
.manage {
padding: 19px 25px;
width: 100%;
height: 100%;
background: #20a0ff;
}
</style>

1
uno.config.ts
View File

@ -24,6 +24,7 @@ export default defineConfig({
primary: '#027AFF',
'primary-secondary': '#00FFFF',
info: '#7CC1FF',
'info-secondary': '#707070',
warning: '#FFBE44',
'warning-secondary': '#FEDB65',
},