feat: 大屏完成
This commit is contained in:
parent
d2c3715feb
commit
a67a74d33c
|
|
@ -1,10 +1,10 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link href="/vite.svg" rel="icon" type="image/svg+xml"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>%VITE_APP_TITLE%</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link href="/vite.svg" rel="icon" type="image/svg+xml" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>%VITE_APP_TITLE%</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
"axios": "^1.7.9",
|
||||
"boxen": "^8.0.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.5.1",
|
||||
"echarts": "^5.6.0",
|
||||
"eslint": "^9.9.1",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-define-config": "^2.1.0",
|
||||
|
|
@ -50,6 +50,7 @@
|
|||
"vite-plugin-remove-console": "^2.2.0",
|
||||
"vite-plugin-vue-inspector": "^5.3.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-echarts": "^7.0.3",
|
||||
"vue-eslint-parser": "^9.4.3",
|
||||
"vue-router": "^4.4.3",
|
||||
"vue-types": "^6.0.0"
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ importers:
|
|||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
echarts:
|
||||
specifier: ^5.5.1
|
||||
specifier: ^5.6.0
|
||||
version: 5.6.0
|
||||
eslint:
|
||||
specifier: ^9.9.1
|
||||
|
|
@ -122,6 +122,9 @@ importers:
|
|||
vue:
|
||||
specifier: ^3.5.13
|
||||
version: 3.5.13(typescript@5.7.3)
|
||||
vue-echarts:
|
||||
specifier: ^7.0.3
|
||||
version: 7.0.3(@vue/runtime-core@3.5.13)(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3))
|
||||
vue-eslint-parser:
|
||||
specifier: ^9.4.3
|
||||
version: 9.4.3(eslint@9.21.0(jiti@2.4.2))
|
||||
|
|
@ -2464,6 +2467,17 @@ packages:
|
|||
vscode-uri@3.1.0:
|
||||
resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
|
||||
|
||||
vue-demi@0.13.11:
|
||||
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
|
||||
engines: {node: '>=12'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
'@vue/composition-api': ^1.0.0-rc.1
|
||||
vue: ^3.0.0-0 || ^2.6.0
|
||||
peerDependenciesMeta:
|
||||
'@vue/composition-api':
|
||||
optional: true
|
||||
|
||||
vue-demi@0.14.10:
|
||||
resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -2475,6 +2489,16 @@ packages:
|
|||
'@vue/composition-api':
|
||||
optional: true
|
||||
|
||||
vue-echarts@7.0.3:
|
||||
resolution: {integrity: sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==}
|
||||
peerDependencies:
|
||||
'@vue/runtime-core': ^3.0.0
|
||||
echarts: ^5.5.1
|
||||
vue: ^2.7.0 || ^3.1.1
|
||||
peerDependenciesMeta:
|
||||
'@vue/runtime-core':
|
||||
optional: true
|
||||
|
||||
vue-eslint-parser@9.4.3:
|
||||
resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
|
||||
engines: {node: ^14.17.0 || >=16.0.0}
|
||||
|
|
@ -4916,10 +4940,24 @@ snapshots:
|
|||
|
||||
vscode-uri@3.1.0: {}
|
||||
|
||||
vue-demi@0.13.11(vue@3.5.13(typescript@5.7.3)):
|
||||
dependencies:
|
||||
vue: 3.5.13(typescript@5.7.3)
|
||||
|
||||
vue-demi@0.14.10(vue@3.5.13(typescript@5.7.3)):
|
||||
dependencies:
|
||||
vue: 3.5.13(typescript@5.7.3)
|
||||
|
||||
vue-echarts@7.0.3(@vue/runtime-core@3.5.13)(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3)):
|
||||
dependencies:
|
||||
echarts: 5.6.0
|
||||
vue: 3.5.13(typescript@5.7.3)
|
||||
vue-demi: 0.13.11(vue@3.5.13(typescript@5.7.3))
|
||||
optionalDependencies:
|
||||
'@vue/runtime-core': 3.5.13
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
|
||||
vue-eslint-parser@9.4.3(eslint@9.21.0(jiti@2.4.2)):
|
||||
dependencies:
|
||||
debug: 4.4.0
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 785 B |
Binary file not shown.
|
After Width: | Height: | Size: 967 B |
|
|
@ -9,25 +9,25 @@
|
|||
</div>
|
||||
|
||||
<!-- 汽车列表 -->
|
||||
<ul class="car-list mt-[32px]">
|
||||
<li class="flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white">入卡口（西北门）</p>
|
||||
<ul class="mt-[32px]">
|
||||
<li class="car-item flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white font-size-[14px]">入卡口（西北门）</p>
|
||||
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
|
||||
</li>
|
||||
<li class="flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white">入卡口（东北门）</p>
|
||||
<li class="car-item flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white font-size-[14px]">入卡口（东北门）</p>
|
||||
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
|
||||
</li>
|
||||
<li class="flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" src="@/assets/images/layout/car/car-2.png" />
|
||||
<p class="c-white">入卡口（东北门）</p>
|
||||
<li class="car-item flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-2.png" />
|
||||
<p class="c-white font-size-[14px]">入卡口（东北门）</p>
|
||||
<span class="dashed-circle c-warning border-b-warning">拥堵</span>
|
||||
</li>
|
||||
<li class="flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white">入卡口（东南门）</p>
|
||||
<li class="car-item flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white font-size-[14px]">入卡口（东南门）</p>
|
||||
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -49,14 +49,12 @@
|
|||
.left {
|
||||
transform: rotateY(180deg);
|
||||
|
||||
.car-list {
|
||||
li {
|
||||
width: 330px;
|
||||
height: 60px;
|
||||
margin: 0 0 9px 0;
|
||||
background: url('@/assets/images/bg/bg-frame.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
.car-item {
|
||||
width: 330px;
|
||||
height: 61px;
|
||||
margin: 0 0 9px 0;
|
||||
background: url('@/assets/images/bg/bg-frame.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.suggest {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,14 @@
|
|||
<script lang="ts" setup></script>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { renderEcharts } from '@/layout/components/AppMain/data';
|
||||
|
||||
const weekDataChart = ref<HTMLDivElement>();
|
||||
|
||||
onMounted(async () => {
|
||||
renderEcharts(weekDataChart);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="right ml-[20px]">
|
||||
|
|
@ -9,40 +19,53 @@
|
|||
</div>
|
||||
|
||||
<!-- 汽车列表 -->
|
||||
<ul class="car-list mt-[32px]">
|
||||
<li class="flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white">入卡口（西北门）</p>
|
||||
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
|
||||
<ul class="flex-x-around mt-[32px] w-[331px]">
|
||||
<li class="detail-item flex-y-between">
|
||||
<span class="bg-frame c-white">最高进园车流量</span>
|
||||
<span class="bg-frame c-[#66FFFF]">897</span>
|
||||
</li>
|
||||
<li class="flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white">入卡口（东北门）</p>
|
||||
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
|
||||
</li>
|
||||
<li class="flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" src="@/assets/images/layout/car/car-2.png" />
|
||||
<p class="c-white">入卡口（东北门）</p>
|
||||
<span class="dashed-circle c-[#FFBE44] border-b-[#FFBE44]">拥堵</span>
|
||||
</li>
|
||||
<li class="flex-x-around w-[330px] h-[60px]">
|
||||
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
|
||||
<p class="c-white">入卡口（东南门）</p>
|
||||
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
|
||||
<li class="detail-item flex-y-between">
|
||||
<span class="bg-frame c-white">最高进园车流量</span>
|
||||
<span class="bg-frame c-[#66FFFF]">494</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 建议 -->
|
||||
<div class="suggest">
|
||||
<h5>车流量建议</h5>
|
||||
<p>
|
||||
高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
|
||||
<span class="c-warning-secondary">可建议XXX企业向后延迟15min错峰入园。</span>
|
||||
高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
|
||||
</p>
|
||||
</div>
|
||||
<!-- 七天数据 -->
|
||||
<div ref="weekDataChart" class="week-data" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.detail-item {
|
||||
width: 162px;
|
||||
height: 111px;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1) {
|
||||
width: 161px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
background: url('@/assets/images/bg/bg-frame-2.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
width: 161px;
|
||||
height: 66px;
|
||||
line-height: 66px;
|
||||
font-size: 34px;
|
||||
background: url('@/assets/images/bg/bg-frame-3.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.week-data {
|
||||
margin: 71px 0 0 0;
|
||||
width: 325px;
|
||||
height: 205px;
|
||||
transform: scale(1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@ import ArrowUp from '@/assets/images/layout/arrow/arrow-up.png';
|
|||
|
||||
const calPercentItem: Element = (percent: number) => {
|
||||
return percent > 25 ? (
|
||||
<div class="flex-center font-size-[20px] c-warning">
|
||||
<img alt="arrow" class="mt-2 h-[23px]" src={ArrowUp} />
|
||||
<span>{percent}%</span>
|
||||
<div class="flex-center c-warning">
|
||||
<img alt="arrow" class="mt-[6px] w-[13px] h-[23px]" src={ArrowUp} />
|
||||
<span className="font-size-[15px]">{percent}%</span>
|
||||
</div>
|
||||
) : (
|
||||
<div class="flex-center font-size-[20px] c-primary-secondary">
|
||||
<img alt="arrow" class="mt-2 h-[23px]" src={ArrowDown} />
|
||||
<span>{percent}%</span>
|
||||
<div class="flex-center c-primary-secondary">
|
||||
<img alt="arrow" class="mt-[6px] w-[13px] h-[23px]" src={ArrowDown} />
|
||||
<span className="font-size-[15px]">{percent}%</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
import 'echarts/lib/component/dataZoom';
|
||||
|
||||
import type { EChartsOption } from 'echarts';
|
||||
import * as echarts from 'echarts';
|
||||
import { type Ref, ref } from 'vue';
|
||||
|
||||
const option = ref<EChartsOption>({
|
||||
backgroundColor: 'transparent',
|
||||
grid: { right: 10, left: 10, bottom: 20 },
|
||||
title: {
|
||||
text: '近7天车辆数据',
|
||||
textStyle: { fontSize: 18, color: '#fff', fontWeight: 'lighter' },
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['出园', '入园'],
|
||||
icon: 'rect',
|
||||
right: 0,
|
||||
top: 0,
|
||||
itemGap: 34,
|
||||
orient: 'horizontal',
|
||||
align: 'left',
|
||||
textStyle: { fontSize: 14, color: '#fff' },
|
||||
data: [
|
||||
{ name: '出园', icon: 'rect', itemStyle: { color: '#4182FF' } },
|
||||
{ name: '入园', icon: 'rect', itemStyle: { color: '#00FFFF' } },
|
||||
],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
data: ['02.01', '02.02', '02.03', '02.04', '02.05', '02.06', '02.07'],
|
||||
itemStyle: { color: '#ccc' },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#333',
|
||||
width: 1,
|
||||
type: 'solid', // 'solid' ||'dashed'||'dotted'
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: { show: false, type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '入园',
|
||||
type: 'line',
|
||||
data: [3, 9, 2, 8, 3, 4, 8],
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#00FFFF' },
|
||||
{ offset: 1, color: 'rgba(0,255,255,0)' },
|
||||
]),
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#4182FF' },
|
||||
{ offset: 1, color: 'rgba(0,255,255,0)' },
|
||||
],
|
||||
},
|
||||
},
|
||||
itemStyle: { borderColor: '#00FFFF', borderWidth: 4, color: '#142745' },
|
||||
lineStyle: { color: '#00FFFF', width: 3 },
|
||||
},
|
||||
{
|
||||
name: '出园',
|
||||
type: 'line',
|
||||
data: [2, 8, 3, 7, 1, 9, 6],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#4182FF' },
|
||||
{ offset: 1, color: 'rgba(0,255,255,0)' },
|
||||
],
|
||||
},
|
||||
},
|
||||
itemStyle: { borderColor: '#4182FF', borderWidth: 4, color: '#142745' },
|
||||
lineStyle: { color: '#4182FF', width: 3 },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export const renderEcharts = (element: Ref<HTMLDivElement>) => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
const myChart = echarts.init(element.value, null, {
|
||||
renderer: 'svg',
|
||||
});
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option.value);
|
||||
};
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
class="rectangle w-[138px] h-[125px] flex-y-center bg-[#0E094D55]"
|
||||
>
|
||||
<img alt="车辆管理" src="@/assets/images/layout/footer-39.png" />
|
||||
<span class="text-white font-100">车辆管理</span>
|
||||
<span class="font-size-[15px] font-100 text-white">车辆管理</span>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
|
||||
<div class="bar-op flex items-center h-[36px]">
|
||||
<ul class="float-left flex-x-around w-[148px]">
|
||||
<li><img alt="icon-1" src="@/assets/images/layout/icon-1.png" /></li>
|
||||
<li><img alt="icon-2" src="@/assets/images/layout/icon-2.png" /></li>
|
||||
<li><img alt="icon-3" src="@/assets/images/layout/icon-3.png" /></li>
|
||||
<li><img alt="icon-1" class="w-[36px]" src="@/assets/images/layout/icon-1.png" /></li>
|
||||
<li><img alt="icon-2" class="w-[36px]" src="@/assets/images/layout/icon-2.png" /></li>
|
||||
<li><img alt="icon-3" class="w-[36px]" src="@/assets/images/layout/icon-3.png" /></li>
|
||||
</ul>
|
||||
<span class="float-left c-primary">王菠萝</span>
|
||||
<span class="float-left font-size-[12px] c-primary">王菠萝</span>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
|
@ -42,7 +42,7 @@ header {
|
|||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 45px;
|
||||
color: var();
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@ import NavBar from '@/layout/components/NavBar/index.vue';
|
|||
<template>
|
||||
<div class="layout w-full h-full">
|
||||
<div class="arrow left-[38px]">
|
||||
<img alt="左箭头" src="@/assets/images/layout/arrow/arrow-left.png" />
|
||||
<img alt="左箭头" class="w-[65px]" src="@/assets/images/layout/arrow/arrow-left.png" />
|
||||
</div>
|
||||
<NavBar />
|
||||
<AppMain />
|
||||
<Footer />
|
||||
<div class="arrow right-[38px]">
|
||||
<img alt="左箭头" src="@/assets/images/layout/arrow/arrow-right.png" />
|
||||
<img alt="左箭头" class="w-[65px]" src="@/assets/images/layout/arrow/arrow-right.png" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,4 +9,6 @@ import plugins from '@/plugins';
|
|||
|
||||
import App from './App.vue';
|
||||
|
||||
createApp(App).use(plugins).mount('#app');
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(plugins).mount('#app');
|
||||
|
|
|
|||
Loading…
Reference in New Issue