From c1e5dfb4c72a0ab2478d3b7295ab7deecd3f8c8c Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期二, 16 四月 2024 16:47:36 +0800
Subject: [PATCH] 修改样式
---
src/components/view/index-index.vue | 562 -------------------------------------------------------
1 files changed, 7 insertions(+), 555 deletions(-)
diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue
index b7b059a..26c81c0 100644
--- a/src/components/view/index-index.vue
+++ b/src/components/view/index-index.vue
@@ -20,11 +20,11 @@
.no1 {
display: flex;
+ justify-content: space-between;
}
.no1 .left {
width: 65%;
- margin-right: 10px;
}
.left-1 {
@@ -56,89 +56,11 @@
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%;
+ width: 32%;
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 {
@@ -150,36 +72,14 @@
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">
+ <el-row :gutter="10">
+ <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+ <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+ </el-row>
<div class="no no1">
<div class="left">
<div class="left-1 card">
@@ -190,142 +90,28 @@
</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>
- import * as echarts from 'echarts';
export default {
data() {
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()
- }, 60 * 1000) */
},
methods: {
nowTime() {
@@ -354,345 +140,11 @@
}
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
+</script>
--
Gitblit v1.9.3