From 7e460156de73171f9660ce48f80703e79f8b478d Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期六, 14 六月 2025 11:48:26 +0800
Subject: [PATCH] 初始化提交
---
src/views/home/index.vue | 343 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 214 insertions(+), 129 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index bef0609..1374550 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,87 +1,194 @@
+<!-- eslint-disable vue/attributes-order -->
<template>
<div class="dashboard-container">
- <div class="home-annular-list">
- <div class="annular-item" v-for="item in 4" :key="item">
- </div>
+ <el-empty
+ description="鏆傛棤鏁版嵁"
+ v-if="chartData.PieData&&chartData.DailyTotal&&
+ chartData.WeekNumData&&chartData.ExceedThirtyDay.length!=0
+ "
+ />
+ <template v-else>
+ <div class="home-annular-list" v-show="chartData.PieData">
+ <div v-for="item in 4" :key="item" class="annular-item " :class="'pie'+item" />
</div>
<div class="home-line-bar">
<div class="left">
- <div class="top">1</div>
- <div class="bottom">1</div></div>
+ <div class="top" />
+ <div class="bottom">
+ 涓磋繎30澶╁簱瀛�
+ <div>
+ <el-table
+ :data="exceedThirtyDay"
+ stripe
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="product_name"
+ label="浜у搧鍚嶇О"
+ />
+ <el-table-column
+ prop="RemainingDays"
+ label="浜у搧搴撳瓨"
+ />
+ <el-table-column
+ prop="product_code"
+ label="浜у搧缂栫爜"
+ />
+ <el-table-column
+ prop="product_model"
+ label="浜у搧瑙勬牸"
+ />
+ <el-table-column
+ prop="unit"
+ label="鍗曚綅"
+ />
+ </el-table>
+ </div>
+ </div>
+ </div>
<div class="right">
- 1
+ <div />
</div>
</div>
+ </template>
+
</div>
</template>
<script>
+import { getList } from '@/api/home'
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
name: 'Home',
+ data() {
+ return {
+ exceedThirtyDay: [],
+ show: true,
+ chartData: {}
+ }
+ },
computed: {
...mapGetters([
'name'
])
},
mounted() {
- console.log(echarts)
+ // console.log(echarts)
+ this.echartsInit()
+
+ // 鍒锋柊鏃朵互褰撳墠璺敱鍋氫负tab鍔犲叆tabs
+ // 褰撳墠璺敱涓嶆槸棣栭〉鏃讹紝娣诲姞棣栭〉浠ュ強鍙︿竴椤靛埌store閲岋紝骞惰缃縺娲荤姸鎬�
+ // 褰撳綋鍓嶈矾鐢辨槸棣栭〉鏃讹紝娣诲姞棣栭〉鍒皊tore锛屽苟璁剧疆婵�娲荤姸鎬�
+ if (this.$route.path !== '/' && this.$route.path !== '/home') {
+ console.log('1')
+ this.$store.commit('ADD_TAB', { route: '/home', name: '涓婚〉' })
+ this.$store.commit('ADD_TAB', { route: this.$route.path, name: this.$route.name })
+ this.$store.commit('SET_ACTIVE_INDEX', this.$route.path)
+ }
+ // else {
+ // console.log('2');
+ // this.$store.commit('ADD_TAB', {route: '/home', name: 'home'});
+ // this.$store.commit('SET_ACTIVE_INDEX', '/home');
+ // this.$router.push('/');
+ // }
+
+ console.log(this.$store.state)
+ },
+ created() {
this.echartsInit()
},
methods: {
- echartsInit() {
- let boxArr = document.querySelectorAll(".annular-item")
- boxArr.forEach((item) => {
- echarts.init(item).setOption({
- legend: {
- type: 'scroll',
- align: 'left',
- orient: 'vertical',
- x: 'right',
- y: 'center'
- },
- title: {
- text: '楗煎浘绾圭悊',
- textStyle: {
- color: '#235894'
- }
- },
- tooltip: {
- trigger: 'item'
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['25%', '50%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 5,
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false,
- position: 'left'
- },
- labelLine: {
- show: false
- },
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' }
- ]
- }
- ]
-})
+ getData() {
+ },
+ getPie(PieData, className) {
+ console.log(className)
+ const box = document.querySelector(className)
+ echarts.init(box).setOption({
+ legend: {
+ type: 'scroll',
+ align: 'left',
+ orient: 'vertical',
+ x: 'right',
+ y: 'center'
+ },
+ title: {
+ text: '楗煎浘绾圭悊',
+ textStyle: {
+ color: '#235894'
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ series: [
+ {
+ name: PieData.datetime,
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['25%', '50%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 5,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'left'
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: PieData.addNum, name: '鍏ュ簱鏁扮洰' },
+ { value: PieData.outNum, name: '鍑哄簱鏁扮洰' },
+ { value: PieData.beginningMonth, name: '鏈堝垵搴撳瓨' },
+ { value: PieData.endOfMonth, name: '鏈堟湯搴撳瓨' }
+ ]
+ }
+ ]
})
-
- let letTop = document.querySelector(".top")
+ },
+ getLine(DailyTotal) {
+ const right = document.querySelector('.right')
+ echarts.init(right).setOption({
+ legend: {
+
+ x: 'center',
+ slected: true
+ },
+ title: {
+ text: '浠撳簱缁熻',
+ textStyle: {
+ color: '#235894'
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: DailyTotal?.xList
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: DailyTotal?.yList,
+ type: 'line',
+ smooth: true,
+ name: '姣忔棩鎬昏',
+ areaStyle: {}
+ }
+
+ ]
+ })
+ },
+ getBar(WeekNumData) {
+ const letTop = document.querySelector('.top')
echarts.init(letTop).setOption({
grid: {
left: '3%',
@@ -90,75 +197,52 @@
containLabel: true
},
legend: {
- x: 'center',
- y: 'top'
+ x: 'center',
+ y: 'top'
+ },
+ title: {
+ text: '浠撳簱缁熻',
+ textStyle: {
+ color: '#235894'
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ xAxis: {
+ type: 'category',
+ data: WeekNumData.xList
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: WeekNumData.yOutList,
+ name: '鍑哄簱鏁伴噺',
+ type: 'bar'
},
- title: {
- text: '浠撳簱缁熻',
- textStyle: {
- color: '#235894'
- }
- },
- tooltip: {
- trigger: 'item'
- },
- xAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [120, 200, 150, 80, 70, 110, 130],
- name: '鍑哄簱鏁伴噺',
- type: 'bar'
+ {
+ data: WeekNumData.yEnterList,
+ name: '鍏ュ簱鏁伴噺',
+ type: 'bar'
+ }
+ ]
+ })
},
- {
- data: [220, 210, 80, 110, 30, 80, 130],
- name: '鍏ュ簱鏁伴噺',
- type: 'bar'
- }
- ]
-})
-
+ async echartsInit() {
+ const res = await getList()
+ const { data } = res
+ this.chartData = { ...data }
+ console.log(this.chartData)
+ data.PieData?.forEach((item, index) => {
+ console.log(item)
+ this.getPie(item, '.pie' + (index + 1))
+ })
- let right = document.querySelector(".right")
- echarts.init(right).setOption({
- legend: {
-
- x: 'center',
- slected: true
- },
- title: {
- text: '浠撳簱缁熻',
- textStyle: {
- color: '#235894'
- }
- },
- tooltip: {
- trigger: 'item'
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line',
- smooth: true,
- name: '鏁版嵁1',
- areaStyle: {}
- }
-
- ]
-})
+ this.getBar(data.WeekNumData)
+ this.getLine(data.DailyTotal)
+ this.exceedThirtyDay = data.ExceedThirtyDay
}
}
}
@@ -178,15 +262,14 @@
}
}
.home-annular-list{
-
- margin: 12px;
+ margin: 12px 0;
display: flex;
justify-content: space-between;
.annular-item{
- width: 350px;
- height: 240px;
+ width: 300px;
+ height: 200px;
border-radius: 10px;
- padding: 25px;
+ padding: 20px;
background: #fff;
// margin: 0 12px;
}
@@ -223,6 +306,8 @@
background: #fff;
padding: 25px;
border-radius: 10px;
+ // max-width: 500px;
+ max-height: 328px;
}
}
}
--
Gitblit v1.9.3