From cab07c35093158a727854fe8b1809f5a2e4d92e9 Mon Sep 17 00:00:00 2001
From: value <z1292839451@163.com>
Date: 星期三, 17 四月 2024 08:53:46 +0800
Subject: [PATCH] 对检验对象增加了一个字段
---
src/components/view/index-index.vue | 662 ++++++------------------------------------------------
1 files changed, 75 insertions(+), 587 deletions(-)
diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue
index 5f6a141..bff6116 100644
--- a/src/components/view/index-index.vue
+++ b/src/components/view/index-index.vue
@@ -6,32 +6,10 @@
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;
+ height: 118px;
margin-bottom: 10px;
}
@@ -56,91 +34,6 @@
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;
}
@@ -150,39 +43,39 @@
border-radius: 3px;
}
- .cart-3,
- .cart-4,
- .cart-5,
- .cart-6 {
- width: calc(50%);
- height: 300px;
- background-color: #fff;
- }
+ .card{
+ background: #FFFFFF;
+ border-radius: 16px;
+ width: 100%;
+ box-sizing: border-box;
+ }
- .cart-3 div,
- .cart-4 div,
- .cart-5 div,
- .cart-6 div {
- width: 100%;
- height: calc(100% - 30px);
- }
+ .right-1{
+ padding: 14px 10px 4px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
- .card p {
- width: 100%;
- line-height: 30px;
- }
+ .right-1-item{
+ width: 25%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
- .cart-3,
- .cart-5 {
- margin-right: 10px;
- }
+ .right-1-item .mun{
+ margin-left: 6px;
+ color: #0166E2;
+ }
+
</style>
<template>
<div class="index">
- <div class="no no1">
- <div class="left">
- <div class="left-1 card">
+ <el-row :gutter="25">
+ <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
+ <div class="left-1">
<div class="say">
<div style="display: flex;align-items: center;flex-wrap: wrap;">
<div class="say-1">{{user.name}} 鎮ㄥソ锛佺鎮ㄥ紑蹇冩瘡涓�澶�</div>
@@ -190,142 +83,71 @@
</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 class="left-2 card"></div>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
+ <div class="right-1 card">
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-0.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">鎴戠殑浠ｅ姙</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-1.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">宸插姙浜嬪疁</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-2.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">鍓╀綑寰呭姙</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-3.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">杩戞湡浜嬪疁</p>
+ </div>
+ </div>
+ </div>
+ <div class="right-2 card">
+ </div>
+ <div class="right-3 card">
+ </div>
+ </el-col>
+ </el-row>
</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 +176,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