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 23:44:47 +08:00
parent 74925fabbc
commit f8b31fad09
8 changed files with 311 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

4
src/plugins/echarts.ts
View File

@ -1,4 +1,4 @@
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import { BarChart, LineChart, PictorialBarChart, PieChart } from 'echarts/charts';
import {
DataZoomComponent,
GraphicComponent,
@ -15,7 +15,6 @@ import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
import type { App } from 'vue';
const { use } = echarts;
use([
PieChart,
BarChart,
@ -31,6 +30,7 @@ use([
TooltipComponent,
DataZoomComponent,
VisualMapComponent,
PictorialBarChart,
]);
/**

16
src/views/business-supervision/business-supervision-left/charts/sideBottom.ts → src/views/business-supervision/business-supervision-content/charts/contentBottom.ts
View File

@ -10,13 +10,7 @@ const option = ref<EChartsOption>();
option.value = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
shadowColor: '#66FFFF',
shadowBlur: 10,
},
},
axisPointer: { type: 'shadow', shadowStyle: { shadowColor: '#66FFFF', shadowBlur: 10 } },
},
grid: { top: '9%', right: '0%', left: '6%', bottom: '9%', containLabel: false },
xAxis: [
@ -58,10 +52,10 @@ option.value = {
{ offset: 0, color: '#00CCD2' },
{ offset: 1, color: '#00A2FF' },
]),
emphasis: {
shadowBlur: 10, // 取消阴影模糊
shadowColor: '#000', // 取消阴影颜色
},
},
emphasis: {
shadowBlur: 10, // 取消阴影模糊
shadowColor: '#000', // 取消阴影颜色
},
label: { show: true, position: 'top', color: '#fff', fontSize: 14 },
data: [10, 52, 200, 334, 390, 330, 220, 500, 482, 499, 999, 444],

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

@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
import TimeSelect from '@/components/TimeSelect/index.vue';
import { TimeSelectType } from '@/components/TimeSelect/type';
import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sideBottom';
import { renderEcharts } from '@/views/business-supervision/business-supervision-content/charts/contentBottom';
const chartYear = ref();

116
src/views/business-supervision/business-supervision-right/chart/bottom-chart.vue Normal file
View File

@ -0,0 +1,116 @@
<script lang="ts" setup>
import 'echarts/lib/component/dataZoom';
import { useDebounceFn, useEventListener } from '@vueuse/core';
import type { EChartsOption } from 'echarts';
import { onMounted, type Ref, ref, watch } from 'vue';
import echarts from '@/plugins/echarts';
const props = defineProps({
chartData: {
type: Number,
default: 0,
},
});
const chart = ref<HTMLDivElement>();
const option = ref<EChartsOption>();
option.value = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow', shadowStyle: { shadowColor: '#66FFFF', shadowBlur: 10 } },
formatter: (data) => {
let tip = '';
data.forEach((item) => {
if (item.seriesType === 'bar') {
tip += '<div class="echarts-tip-div">';
tip += '<div class="left">' + item.marker + item.seriesName + '：</div>';
tip += '<div class="right">' + item.value + '%</div>';
tip += '</div>';
}
});
return tip;
},
},
grid: { top: '9%', right: '0%', left: '0%', bottom: '0%', containLabel: false },
xAxis: [{ type: 'category', show: false }],
yAxis: [{ type: 'value', show: false, max: 100 }],
series: [
{
name: '环比',
type: 'bar',
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: 'transparent',
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FEDB65' },
{ offset: 1, color: '#66FFFF' },
]),
},
data: [props.chartData],
z: 0,
},
{
type: 'pictorialBar',
barWidth: 30,
itemStyle: { color: '#0D3770' },
symbolRepeat: 'true',
symbolMargin: 3,
symbol: 'rect',
symbolSize: [30, 4],
data: [props.chartData],
z: 1,
},
],
animationDuration: 0,
animationDurationUpdate: 1000,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
};
const renderEcharts = (element: Ref<HTMLDivElement>) => {
const myChart = echarts.init(element.value, null, {
renderer: 'svg',
devicePixelRatio: window.devicePixelRatio,
});
const debouncedFn = useDebounceFn(() => {
myChart.resize();
}, 1000);
useEventListener(window, 'resize', debouncedFn);
myChart.setOption(option.value);
watch(
() => props.chartData,
() => {
myChart.setOption({
series: [
{ name: '环比', type: 'bar', data: [props.chartData] },
{ type: 'pictorialBar', data: [props.chartData] },
],
});
}
);
};
onMounted(() => {
renderEcharts(chart);
});
</script>
<template>
<div ref="chart" class="business-supervision__sidebar-chart" />
</template>
<style lang="scss" scoped>
.business-supervision__sidebar-chart {
width: 20px;
height: 63px;
}
</style>

109
src/views/business-supervision/business-supervision-right/components/sidebar-right-bottom.vue
View File

@ -1,4 +1,18 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import BottomChart from '@/views/business-supervision/business-supervision-right/chart/bottom-chart.vue';
const charData1 = ref(Math.round(Math.random() * 100));
const charData2 = ref(Math.round(Math.random() * 100));
onMounted(() => {
setInterval(() => {
charData1.value = Math.round(Math.random() * 100);
charData2.value = Math.round(Math.random() * 100);
}, 3000);
});
</script>
<template>
<div class="business-supervision__sidebar-item h-[294px]">
@ -8,7 +22,98 @@
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
<ul class="business-supervision__sidebar-panel">
<li>
<div class="business-supervision__sidebar-panel-change">
<p>环比变化</p>
<span>+43.2%</span>
</div>
<h1>
987.1
<em>亿</em>
</h1>
<h2>货物贸易涉外总额</h2>
<div class="business-supervision__sidebar-panel-chart">
<bottom-chart :chart-data="charData1" />
</div>
</li>
<li>
<div class="business-supervision__sidebar-panel-change">
<p>环比变化</p>
<span>+43.2%</span>
</div>
<h1>
987.1
<em>亿</em>
</h1>
<h2>货物贸易涉外总额</h2>
<div class="business-supervision__sidebar-panel-chart">
<bottom-chart :chart-data="charData2" />
</div>
</li>
</ul>
</div>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.business-supervision__sidebar {
&-panel {
display: flex;
justify-content: space-between;
align-items: center;
margin: 33px 4px 0 4px;
width: 100%;
height: 167px;
li {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 240px;
height: 167px;
background: url('@/assets/images/business-supervision/bg/sidebar/bg-sidebar-bottom-panel.png')
no-repeat center;
background-size: cover;
h1 {
margin: 0 0 24px 0;
color: var(--color-primary-secondary);
font-size: 32px;
em {
font-size: 20px;
font-style: normal;
}
}
h2 {
position: absolute;
bottom: 14px;
font-size: 19px;
}
}
&-change {
display: flex;
span {
display: inline-block;
margin: 0 0 0 9px;
color: var(--color-warning-secondary);
font-size: 13px;
}
}
&-chart {
position: absolute;
top: 34px;
right: 9px;
width: 29px;
height: 63px;
}
}
}
</style>

82
src/views/business-supervision/business-supervision-right/components/sidebar-right-middle.vue
View File

@ -1,4 +1,11 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
const list = [
{ title: '食品业务出口总值', value: '890.30', unit: '亿 /k㎡', percent: '10' },
{ title: '食品业务出口总值', value: '890.30', unit: '亿 /k㎡', percent: '10' },
{ title: '食品业务出口总值', value: '890.30', unit: '亿 /k㎡', percent: '10' },
{ title: '食品业务出口总值', value: '890.30', unit: '亿 /k㎡', percent: '10' },
];
</script>
<template>
<div class="business-supervision__sidebar-item h-[354px]">
@ -8,7 +15,78 @@
</div>
<span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
</div>
<ul class="business-supervision__sidebar-panel">
<li v-for="(item, index) in list" :key="index">
<h1>{{ item.title }}</h1>
<strong>¥{{ item.value }}</strong>
<span>{{ item.unit }}</span>
<div class="business-supervision__sidebar-panel-circle">
<div>{{ item.percent }}%</div>
<div>环比</div>
</div>
</li>
</ul>
</div>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.business-supervision__sidebar {
&-panel {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 14px 0 0 0;
width: 100%;
height: calc(100% - 60px);
li {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 0 0 14px;
width: 243px;
height: 124px;
background: url('@/assets/images/business-supervision/bg/sidebar/bg-sidebar-panel.png')
no-repeat center;
background-size: cover;
h1 {
color: #fff;
font-size: 17px;
}
strong {
color: var(--color-primary-secondary);
font-size: 27px;
}
span {
position: absolute;
right: 56px;
bottom: 42px;
color: var(--color-primary-secondary);
font-size: 15px;
}
}
&-circle {
position: absolute;
top: -14px;
right: -9px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
color: var(--color-info);
font-size: 9px;
background: url('@/assets/images/common/bg/bg-main-2.png') no-repeat center;
background-size: cover;
}
}
}
</style>