feat: 首页代码提交

This commit is contained in:
ycy 2024-04-22 17:15:00 +08:00
parent c6a7e5260d
commit 99db358c66
7 changed files with 757 additions and 3 deletions

View File

@ -0,0 +1,95 @@
<template>
<div style="height: 100%">
<div ref="barChartRef" :style="{ width: width, height: height }"></div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
//
const barChartRef = ref(null)
const { categories, seriesData, title, legendList } = defineProps({
//
categories: {
type: Array,
required: true
},
//
seriesData: {
type: Array,
required: true
},
//
title: {
type: String,
required: true
},
//
legendList: {
type: Array,
required: true
},
//
width: {
type: String,
default: '100%'
},
//
height: {
type: String,
default: '100%'
}
})
//
const option = {
title: {
text: title,
left: 'center',
top: '10'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: legendList, //
bottom: '10'
},
xAxis: {
type: 'category',
data: categories
},
yAxis: {
type: 'value'
},
series: seriesData
}
// ECharts
onMounted(() => {
const barChartContainer = barChartRef.value
if (barChartContainer) {
const myChart = echarts.init(barChartContainer)
myChart.setOption(option)
// resize
window.addEventListener('resize', () => {
myChart.resize()
})
}
})
</script>
<script lang="ts">
export default {
name: 'BarChart'
}
</script>
<style lang="less" scoped></style>

View File

@ -0,0 +1,133 @@
<template>
<div style="height: 100%">
<div ref="lineChartRef" :style="{ width: width, height: height }"></div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
//
const lineChartRef = ref(null)
const { categories, seriesData, titleP, legendList } = defineProps({
//
categories: {
type: Array,
required: true
},
//
seriesData: {
type: Array,
required: true
},
titleP: {
type: String,
default: '示例折线图'
},
//
legendList: {
type: Array,
required: true
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
}
})
//
const option = {
title: {
text: titleP,
left: 'center',
top: '2'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: legendList,
bottom: 0
},
grid: {
left: '3%',
right: '3%',
bottom: '9%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: categories,
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: seriesData.map((serie: any) => ({
...serie,
lineStyle: {
width: 2
},
smooth: true,
itemStyle: {
color: '#57c1ff'
},
areaStyle: {
//
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#88d1ff'
}, //
{
offset: 1,
color: '#1a91ff'
} //
])
// opacity: 0 //
}
}))
}
// ECharts
onMounted(() => {
const lineChartContainer = lineChartRef.value
if (lineChartContainer) {
const myChart = echarts.init(lineChartContainer)
myChart.setOption(option)
// resize
window.addEventListener('resize', () => {
myChart.resize()
})
}
})
</script>
<script lang="ts">
export default {
name: 'LineChart'
}
</script>
<style lang="less" scoped></style>

View File

@ -0,0 +1,88 @@
<template>
<div>
<div ref="pieChartRef" :style="{ width: width, height: height }"></div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
//
const pieChartRef = ref(null)
const { titleP, dataP } = defineProps({
//
dataP: {
type: Array,
default: () => []
},
titleP: {
type: String,
default: ''
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
}
})
//
const option = {
title: {
text: titleP,
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: '0',
top: '50'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
left: '50',
data: dataP,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
// ECharts
onMounted(() => {
const pieChartContainer = pieChartRef.value
if (pieChartContainer) {
const myChart = echarts.init(pieChartContainer)
myChart.setOption(option)
// resize
window.addEventListener('resize', () => {
myChart.resize()
})
}
})
</script>
<script lang="ts">
export default {
name: 'pieChart'
}
</script>
<style lang="less" scoped></style>

View File

@ -0,0 +1,200 @@
<template>
<div class="linebox">
<div class="title_class">
<span>数据概览</span>
<div class="circle_layout">
<div
class="circle"
v-for="(item, index) in circleClassList"
:style="{
background: `${item.judge ? item.color : ''}`,
cursor: `${item.judge ? 'pointer' : ''}`
}"
:key="index"
@mouseover="circleClick(index)"
></div>
</div>
</div>
<t-divider />
<line-chart
v-if="title === '采购入库单'"
:categories="categories"
:seriesData="seriesData"
:titleP="title"
:legendList="legendList"
:height="'80%'"
:width="'92rem'"
/>
<line-chart
v-else-if="title === '购货退货单'"
:categories="categories"
:seriesData="seriesData"
:titleP="title"
:legendList="legendList"
:height="'80%'"
:width="'92rem'"
/>
<line-chart
v-else-if="title === '销货出库单'"
:categories="categories"
:seriesData="seriesData"
:titleP="title"
:legendList="legendList"
:height="'80%'"
:width="'92rem'"
/>
<line-chart
v-else-if="title === '销货退货单'"
:categories="categories"
:seriesData="seriesData"
:titleP="title"
:legendList="legendList"
:height="'80%'"
:width="'92rem'"
/>
<line-chart
v-else-if="title === '收款单'"
:categories="categories"
:seriesData="seriesData"
:titleP="title"
:legendList="legendList"
:height="'80%'"
:width="'92rem'"
/>
<line-chart
v-else-if="title === '付款单'"
:categories="categories"
:seriesData="seriesData"
:titleP="title"
:legendList="legendList"
:height="'80%'"
:width="'92rem'"
/>
<line-chart
v-else-if="title === '库存数据'"
:categories="categories"
:seriesData="seriesData"
:titleP="title"
:legendList="legendList"
:height="'80%'"
:width="'92rem'"
/>
</div>
</template>
<script setup lang="ts">
import lineChart from '@/components/echarts/line.vue'
import { ref } from 'vue'
const title = ref('销货出库单')
const categories = ref([
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
])
const legendList = ref(['销货出库单'])
const seriesData = ref([
{
name: '销货出库单',
data: [10, 4200, 1800, 2800, 110, 3200, 100, 2000, 1500, 2000, 7500, 3000],
type: 'line'
}
])
const circleClassList = ref([
{
color: '#5e5e5e',
judge: false
},
{
color: '#5e5e5e',
judge: false
},
{
color: '#5e5e5e',
judge: false
},
{
color: '#5e5e5e',
judge: false
},
{
color: '#5e5e5e',
judge: false
},
{
color: '#5e5e5e',
judge: false
},
{
color: '#5e5e5e',
judge: false
}
])
const circleClick = async (index: number) => {
await circleClassList.value.forEach((item, i) => {
if (i === index) {
item.judge = true
} else {
item.judge = false
}
})
if (index === 0) {
title.value = '采购入库单'
} else if (index === 1) {
title.value = '购货退货单'
} else if (index === 2) {
title.value = '销货出库单'
} else if (index === 3) {
title.value = '销货退货单'
} else if (index === 4) {
title.value = '收款单'
} else if (index === 5) {
title.value = '付款单'
} else if (index === 6) {
title.value = '库存数据'
}
}
</script>
<script lang="ts">
export default {
name: 'homeCenter'
}
</script>
<style lang="less" scoped>
.linebox {
width: 100%;
height: 100%;
}
.title_class {
padding: 0 1rem;
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
.circle_layout {
width: 7rem;
display: flex;
justify-content: space-around;
.circle {
width: 0.6rem;
height: 0.6rem;
background-color: #b2b2b2;
border-radius: 50%;
}
}
}
:deep(.t-divider) {
margin: 0 0 1rem 0;
}
</style>

View File

@ -0,0 +1,93 @@
<template>
<div class="centerC">
<div class="center-pie">
<pie :titleP="title" :dataP="data" :height="'15rem'" :width="'40rem'" />
</div>
<div class="center-bar">
<bar
:categories="categories"
:seriesData="seriesData"
:title="titlebar"
:legendList="legendList"
:height="'100%'"
:width="'52rem'"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import pie from '@/components/echarts/pie.vue'
import bar from '@/components/echarts/bar.vue'
const title = ref('一天的开心程度')
const titlebar = ref('销售额')
const data = ref([
{ value: 50, name: '上午' },
{ value: 50, name: '下午' },
{ value: 100, name: '晚上' },
{ value: 200, name: '睡觉' }
])
const categories = ref([
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
])
const legendList = ['类别A', '类别B', '类别C']
const seriesData = ref([
{
name: '类别A',
type: 'bar',
data: [1000, 1200, 1400, 1500, 1600, 1800, 1700, 1900, 2000, 2200, 2300, 2500]
},
{
name: '类别B',
type: 'bar',
data: [200, 400, 1000, 500, 700, 800, 1000, 1100, 1150, 1200, 1300, 1400]
},
{
name: '类别C',
type: 'bar',
data: [800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]
}
])
</script>
<script lang="ts">
export default {
name: 'homeFooter'
}
</script>
<style lang="less" scoped>
.centerC {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.center-pie {
width: 49%;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.center-bar {
width: 49%;
height: 100%;
background-color: #fff;
}
}
</style>

View File

@ -0,0 +1,94 @@
<template>
<div class="headerC">
<div class="header_box" v-for="(item, index) in homeTitle" :key="index">
<div class="header_box">
<div class="content">
<div class="title">{{ item.title }}</div>
<div class="num">{{ item.num }}</div>
</div>
<div class="header_icon">
<t-icon :name="item.icon" class="icon" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const homeTitle = ref([
{
title: '月购贷额',
num: '362,134.39',
icon: 'cart-add'
},
{
title: '月销贷额',
num: '118,505.42',
icon: 'cart'
},
{
title: '月资金收入',
num: '200,182.74',
icon: 'money'
},
{
title: '月资金支出',
num: '400,099.91',
icon: 'logo-github'
}
])
</script>
<script lang="ts">
export default {
name: 'homeHeader'
}
</script>
<style lang="less" scoped>
.headerC {
height: 100%;
background-color: #fff;
padding: 0 1rem;
justify-content: space-between;
display: flex;
}
.header_box {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
.header_icon {
width: 30%;
height: 100%;
display: flex;
margin-right: 1.3rem;
margin-top: 0.6rem;
align-items: center;
justify-content: flex-end;
.icon {
width: 2rem;
height: 2rem;
color: #366ef4;
}
}
.content {
width: 70%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.title {
font-size: 0.7rem;
color: #74757c;
margin-bottom: 0.5rem;
font-weight: 600;
}
.num {
font-size: 1.2rem;
font-weight: 600;
}
}
</style>

View File

@ -1,8 +1,27 @@
<template>
<div>1111111111</div>
<div class="back-color">
<t-layout class="global_schema">
<t-content class="echarts">
<t-header class="header">
<home-header />
</t-header>
<t-content class="content">
<home-center />
</t-content>
<t-content class="footer">
<home-footer />
</t-content>
</t-content>
<t-aside class="contentInfo">Aside</t-aside>
</t-layout>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import homeHeader from './components/homeHeader.vue'
import homeCenter from './components/homeCenter.vue'
import homeFooter from './components/homeFooter.vue'
</script>
<script lang="ts">
export default {
@ -10,4 +29,36 @@ export default {
}
</script>
<style scoped lang="less"></style>
<style scoped lang="less">
.global_schema {
width: 100%;
height: 100%;
.echarts {
width: 80%;
height: 100%;
background-color: #f5f7fb;
padding: 0 2rem 0 0;
.header {
height: 5rem;
width: 100%;
margin-bottom: 1rem;
background-color: #f5f7fb;
}
.content {
height: 25rem;
width: 100%;
background-color: #fff;
margin-bottom: 1rem;
}
.footer {
height: 20rem;
width: 100%;
margin-bottom: 1rem;
}
}
.contentInfo {
width: 20%;
height: 100%;
}
}
</style>