From 5229a61ca5250e1bd24399258e05ada2e7c4253a Mon Sep 17 00:00:00 2001
From: 李林 <z1292839451@163.com>
Date: 星期四, 28 十二月 2023 11:26:01 +0800
Subject: [PATCH] 第三阶段
---
src/components/view/index-index.vue | 688 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 685 insertions(+), 3 deletions(-)
diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue
index 479fcde..d3b7b7c 100644
--- a/src/components/view/index-index.vue
+++ b/src/components/view/index-index.vue
@@ -1,16 +1,698 @@
<style scoped>
+ .index {
+ width: 100%;
+ height: calc(100% - 50px);
+ overflow-y: auto;
+ padding: 25px 0;
+ }
+
+ .no {
+ width: 100%;
+ display: flex;
+ margin-bottom: 10px;
+ }
+
+ .card {
+ border-radius: 6px;
+ background-color: #fff;
+ padding: 10px 20px;
+ }
+
+ .no1 {
+ display: flex;
+ }
+
+ .no1 .left {
+ width: 65%;
+ margin-right: 10px;
+ }
+
+ .left-1 {
+ background-image: url("../../../static/img/棣栭〉鍥剧墖1.png");
+ background-size: 100% 100%;
+ width: calc(100% - 40px);
+ height: 7.2vw;
+ margin-bottom: 10px;
+ }
+
+ .left-1 .say {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ margin-left: 15%;
+ width: 45%;
+ }
+
+ .left-1 .say div {
+ color: #fff;
+ margin: 4px 0;
+ }
+
+ .left-1 .say-1 {
+ font-size: 18px;
+ }
+
+ .left-1 .say-2 {
+ font-size: 17px;
+ }
+
+ .left-2 {
+ width: 100%;
+ display: flex;
+ }
+
+ .card-1 {
+ width: calc(25% - 40px);
+ height: 100px;
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+ }
+
+ .card-1 .label .p1 {
+ color: #333;
+ font-size: 0.85vw;
+ font-style: normal;
+ font-weight: 400;
+ margin-bottom: 10px;
+ }
+
+ .card-1 .label .p2 {
+ color: #3A7BFA;
+ font-size: 1.4vw;
+ font-style: normal;
+ font-weight: 400;
+ }
+
+ .card-1 .label {
+ width: calc(100% - 4vw);
+ }
+
+ .card-1 .icon {
+ background-color: #F3F6FA;
+ border-radius: 50%;
+ width: 4vw;
+ height: 4vw;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .card-1 .icon i {
+ font-size: 1.6vw;
+ color: #3A7BFA;
+ }
+
+ .right {
+ width: 35%;
+ height: calc(7.2vw + 10px + 120px);
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .card-2 {
+ width: 33.3%;
+ height: calc(50% - 20px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ cursor: pointer;
+ margin-bottom: 10px;
+ }
+
+ .card-2 .icon {
+ width: 3.5vw;
+ height: 3.5vw;
+ background-color: #F3F6FA;
+ border-radius: 24px;
+ }
+
+ .card-2 .icon i {
+ font-size: 1.7vw;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ }
+
+ .card-2 .text {
+ width: 100%;
+ text-align: center;
+ }
+
+ ::-webkit-scrollbar {
+ width: 0px;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ border-radius: 3px;
+ }
+
+ .cart-3,
+ .cart-4,
+ .cart-5,
+ .cart-6 {
+ width: calc(50%);
+ height: 300px;
+ background-color: #fff;
+ }
+
+ .cart-3 div,
+ .cart-4 div,
+ .cart-5 div,
+ .cart-6 div {
+ width: 100%;
+ height: calc(100% - 30px);
+ }
+
+ .card p {
+ width: 100%;
+ line-height: 30px;
+ }
+
+ .cart-3,
+ .cart-5 {
+ margin-right: 10px;
+ }
</style>
<template>
- <div class="index">棣栭〉</div>
+ <div class="index">
+ <div class="no no1">
+ <div class="left">
+ <div class="left-1 card">
+ <div class="say">
+ <div style="display: flex;align-items: center;flex-wrap: wrap;">
+ <div class="say-1">{{user.name}} 鎮ㄥソ锛佺鎮ㄥ紑蹇冩瘡涓�澶�</div>
+ <div class="say-2">褰撳墠鏃堕棿锛� {{now}}</div>
+ </div>
+ </div>
+ </div>
+ <div class="left-2">
+ <div class="card card-1">
+ <div class="label">
+ <p class="p1">浠婃棩瀹㈡埛娑堣垂</p>
+ <p class="p2">{{data.data1.data1}}</p>
+ </div>
+ <div class="icon">
+ <i class="font icon-a-Group1139"></i>
+ </div>
+ </div>
+ <div class="card card-1">
+ <div class="label">
+ <p class="p1">浠婃棩瀹為檯娑堣垂</p>
+ <p class="p2">{{data.data1.data2}}</p>
+ </div>
+ <div class="icon">
+ <i class="font icon-a-Group1139"></i>
+ </div>
+ </div>
+ <div class="card card-1">
+ <div class="label">
+ <p class="p1">浠婃棩鎴愭湰</p>
+ <p class="p2">{{data.data1.data3}}</p>
+ </div>
+ <div class="icon">
+ <i class="font icon-qiandai" style="color: #FF9900;font-size: 2.4vw;"></i>
+ </div>
+ </div>
+ <div class="card card-1" style="margin-right: 0;">
+ <div class="label">
+ <p class="p1">浠婃棩瀹為檯鎴愭湰</p>
+ <p class="p2">{{data.data1.data4}}</p>
+ </div>
+ <div class="icon">
+ <i class="font icon-qiandai" style="color: #FF9900;font-size: 2.4vw;"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right card">
+ <p>甯哥敤鍔熻兘</p>
+ <div class="card-2" @click="openComponent('璐㈠姟涓婃姤')">
+ <div class="icon">
+ <i class="font icon-a-Group1236" style="color: #3A7BFA;"></i>
+ </div>
+ <div class="text">璐㈠姟涓婃姤</div>
+ </div>
+ <div class="card-2" @click="openComponent('杩涚矇涓婃姤')">
+ <div class="icon">
+ <i class="font icon-a-Group1122" style="color: #34BD66;"></i>
+ </div>
+ <div class="text">杩涚矇涓婃姤</div>
+ </div>
+ <div class="card-2" @click="openComponent('浜哄憳绠＄悊')">
+ <div class="icon">
+ <i class="font icon-a-Group1124" style="color: #FF9900;"></i>
+ </div>
+ <div class="text">浜哄憳绠＄悊</div>
+ </div>
+ <div class="card-2" @click="openComponent('瑙掕壊绠＄悊')">
+ <div class="icon">
+ <i class="font icon-a-Group1126" style="color: #3A7BFA;"></i>
+ </div>
+ <div class="text">瑙掕壊绠＄悊</div>
+ </div>
+ <div class="card-2" @click="openComponent('瀹㈡埛绠＄悊')">
+ <div class="icon">
+ <i class="font icon-a-Group1124" style="color: #34BD66;"></i>
+ </div>
+ <div class="text">瀹㈡埛绠＄悊</div>
+ </div>
+ <div class="card-2" @click="openComponent('椤圭洰绠＄悊')">
+ <div class="icon">
+ <i class="font icon-a-Group1232" style="color: #FF9900;"></i>
+ </div>
+ <div class="text">椤圭洰绠＄悊</div>
+ </div>
+ </div>
+ </div>
+ <div class="no no-2">
+ <div class="card cart-3">
+ <p>涓�鍛ㄥ鎴锋秷璐�</p>
+ <div id="card-1"></div>
+ </div>
+ <div class="card cart-4">
+ <p>涓�鍛ㄥ鎴峰疄闄呮秷璐�</p>
+ <div id="card-2"></div>
+ </div>
+ </div>
+ <div class="no no-2">
+ <div class="card cart-5">
+ <p>椤圭洰瀹㈡埛鎴愭湰</p>
+ <div id="card-3"></div>
+ </div>
+ <div class="card cart-6">
+ <p>椤圭洰瀹為檯鎴愭湰</p>
+ <div id="card-4"></div>
+ </div>
+ </div>
+ </div>
</template>
<script>
- export default{
+ import * as echarts from 'echarts';
+ export default {
data() {
- return{}
+ return {
+ user: {},
+ now: null,
+ data: {
+ data1: {},
+ data2: [],
+ data3: [],
+ data4: [],
+ data5: []
+ },
+ myChart1: null,
+ myChart2: null,
+ myChart3: null,
+ myChart4: null
+ }
},
mounted() {
+ this.user = JSON.parse(localStorage.getItem('user'))
+ this.nowTime()
+ this.myChart1 = echarts.init($('#card-1')[0]);
+ this.myChart2 = echarts.init($('#card-2')[0]);
+ this.myChart3 = echarts.init($('#card-3')[0]);
+ this.myChart4 = echarts.init($('#card-4')[0]);
+ this.getDataList()
+ setInterval(() => {
+ this.nowTime()
+ }, 1000)
+ setInterval(() => {
+ this.getDataList()
+ }, 30000)
+ },
+ methods: {
+ nowTime() {
+ var date = new Date();
+ var y = date.getFullYear();
+ var m = date.getMonth() + 1;
+ var d = date.getDate();
+ var h = date.getHours();
+ this.timeH = h
+ var min = date.getMinutes();
+ var s = date.getSeconds();
+ if (s < 10) {
+ s = "0" + s;
+ }
+ if (min < 10) {
+ min = "0" + min;
+ }
+ if (h < 10) {
+ h = "0" + h;
+ }
+ if (d < 10) {
+ d = "0" + d;
+ }
+ if (m < 10) {
+ m = "0" + m;
+ }
+ this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
+ },
+ openComponent(str) {
+ var str1 = {}
+ var str2 = -1
+ switch (str) {
+ case '璐㈠姟涓婃姤':
+ str1 = {
+ k: 6,
+ v: "璐㈠姟涓婃姤",
+ i: "font icon-a-Group1236",
+ u: "finance-submit"
+ }
+ break
+ case '杩涚矇涓婃姤':
+ str1 = {
+ k: 5,
+ v: "杩涚矇涓婃姤",
+ i: "font icon-a-Group1122",
+ u: "fans-submit"
+ }
+ break
+ case '浜哄憳绠＄悊':
+ str1 = {
+ k: 8,
+ v: "浜哄憳绠＄悊",
+ i: "font icon-a-Group1124",
+ u: "person-manage"
+ }
+ break
+ case '瑙掕壊绠＄悊':
+ str1 = {
+ k: 7,
+ v: "瑙掕壊绠＄悊",
+ i: "font icon-a-Group1126",
+ u: "role-manage"
+ }
+ break
+ case '瀹㈡埛绠＄悊':
+ str1 = {
+ k: 4,
+ v: "瀹㈡埛绠＄悊",
+ i: "font icon-24gl-clipboardList",
+ u: "custom-enum"
+ }
+ str2 = 4
+ break
+ case '椤圭洰绠＄悊':
+ str1 = {
+ k: 11,
+ v: "椤圭洰绠＄悊",
+ i: "font icon-24gl-clipboardList",
+ u: "product-enum"
+ }
+ str2 = 4
+ break
+ }
+ this.$parent.addTab(str1, str2)
+ },
+ initEcharts1() {
+ var myChart = this.myChart1
+ var option;
+ let dataX = []
+ let data = [];
+ this.data.data2.forEach(a => {
+ dataX.push(a.date)
+ data.push(a.account_consumptions)
+ })
+ let yMax = 1000;
+ let dataShadow = [];
+ for (let i = 0; i < data.length; i++) {
+ dataShadow.push(yMax);
+ }
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: "20px",
+ left: "50px",
+ bottom: "30px",
+ right: "20px"
+ },
+ title: {},
+ xAxis: {
+ type: 'category',
+ data: dataX,
+ axisLabel: {
+ color: '#333'
+ },
+ },
+ yAxis: {
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#333'
+ },
+ splitLine: {
+ lineStyle: {
+ type: [10, 10],
+ dashOffset: 20
+ },
+ show: true
+ }
+ },
+ series: [{
+ type: 'bar',
+ barWidth: '20%',
+ roam: false,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#ffd062'
+ },
+ {
+ offset: 0.5,
+ color: '#ffa844'
+ },
+ {
+ offset: 1,
+ color: '#f59433'
+ }
+ ]),
+ barBorderRadius: [8, 8, 0, 0]
+ },
+ data: data
+ }]
+ };
+ option && myChart.setOption(option);
+ },
+ initEcharts2() {
+ var myChart = this.myChart2
+ var option;
+ let dataX = []
+ let data = [];
+ this.data.data3.forEach(a => {
+ dataX.push(a.date)
+ data.push(a.consumption)
+ })
+ let yMax = 1000;
+ let dataShadow = [];
+ for (let i = 0; i < data.length; i++) {
+ dataShadow.push(yMax);
+ }
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: "20px",
+ left: "50px",
+ bottom: "30px",
+ right: "20px"
+ },
+ title: {},
+ xAxis: {
+ type: 'category',
+ data: dataX,
+ axisLabel: {
+ color: '#333'
+ },
+ },
+ yAxis: {
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#333'
+ },
+ splitLine: {
+ lineStyle: {
+ type: [10, 10],
+ dashOffset: 20
+ },
+ show: true
+ }
+ },
+ series: [{
+ type: 'bar',
+ barWidth: '20%',
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#74b3fe'
+ },
+ {
+ offset: 0.5,
+ color: '#4982f3'
+ },
+ {
+ offset: 1,
+ color: '#1c56df'
+ }
+ ]),
+ barBorderRadius: [8, 8, 0, 0]
+ },
+ data: data
+ }]
+ };
+ option && myChart.setOption(option);
+ },
+ initEcharts3() {
+ var myChart = this.myChart3
+ var dataX = []
+ var dataY = []
+ this.data.data4.forEach(a => {
+ dataX.push(a.product)
+ dataY.push(a.customerCosts)
+ })
+ var option;
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: "20px",
+ left: "50px",
+ bottom: "30px",
+ right: "20px"
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: dataX,
+ axisLabel: {
+ interval: 0,
+ }
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ type: [10, 10],
+ dashOffset: 20
+ },
+ show: true
+ }
+ },
+ series: [{
+ data: dataY,
+ type: 'line',
+ areaStyle: {},
+ smooth: true,
+ symbolSize: 7,
+ lineStyle: {
+ color: '#3c7aff'
+ },
+ itemStyle: {
+ color: '#3c7aff'
+ },
+ areaStyle: {
+ color: '#E5EEFF'
+ }
+ }]
+ };
+ option && myChart.setOption(option);
+ },
+ initEcharts4() {
+ var myChart = this.myChart4
+ var dataX = []
+ var dataY = []
+ this.data.data5.forEach(a => {
+ dataX.push(a.product)
+ dataY.push(a.actualCost)
+ })
+ var option;
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: "20px",
+ left: "50px",
+ bottom: "30px",
+ right: "20px"
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: dataX,
+ axisLabel: {
+ interval: 0
+ }
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ type: [10, 10],
+ dashOffset: 20
+ },
+ show: true
+ }
+ },
+ series: [{
+ data: dataY,
+ type: 'line',
+ areaStyle: {},
+ smooth: true,
+ symbolSize: 7,
+ lineStyle: {
+ color: '#f59433'
+ },
+ itemStyle: {
+ color: '#f59433'
+ },
+ areaStyle: {
+ color: '#FFF6DE'
+ }
+ }]
+ };
+ option && myChart.setOption(option);
+ },
+ getDataList() {
+ this.$axios.get(this.$api.dataReporting.getDataList).then(res => {
+ this.data = res.data
+ this.initEcharts1()
+ this.initEcharts2()
+ this.initEcharts3()
+ this.initEcharts4()
+ })
+ }
}
}
</script>
\ No newline at end of file
--
Gitblit v1.9.3