From 87ebb286373e365b4bb427177b26cf00dda1e2f3 Mon Sep 17 00:00:00 2001
From: yyt <306727702@qq.com>
Date: 星期三, 24 一月 2024 11:17:34 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
jcdm-ui/src/views/dashboard/PanelGroup.vue | 368 ++++++++++++++++++++++++----------------------------
1 files changed, 168 insertions(+), 200 deletions(-)
diff --git a/jcdm-ui/src/views/dashboard/PanelGroup.vue b/jcdm-ui/src/views/dashboard/PanelGroup.vue
index dbeb718..5400808 100644
--- a/jcdm-ui/src/views/dashboard/PanelGroup.vue
+++ b/jcdm-ui/src/views/dashboard/PanelGroup.vue
@@ -1,234 +1,202 @@
<template>
-
- <el-card class="box-card">
+ <el-row :gutter="40" class="panel-group">
+ <el-card class="bottom-card">
<div slot="header" class="clearfix">
- <span class="top2">鍗曟棩绱浜ч噺</span>
+ <span style="font-size: 20px;font-weight: bold">鍗曟棩绱浜ч噺</span>
</div>
- <el-row :gutter="40" class="panel-group">
- <el-col :span="4" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
- <div class="card-panel-icon-wrapper icon-people">
- <svg-icon icon-class="peoples" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- 鍚堢涓婄嚎
- </div>
- <count-to :start-val="0" :end-val="10200" :duration="2600" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :span="4" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('messages')">
- <div class="card-panel-icon-wrapper icon-message">
- <svg-icon icon-class="message" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- 鍚堢涓嬬嚎
- </div>
- <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :span="4" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('purchases')">
- <div class="card-panel-icon-wrapper icon-money">
- <svg-icon icon-class="money" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- 鎬昏涓婄嚎
- </div>
- <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :span="4" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('shoppings')">
- <div class="card-panel-icon-wrapper icon-shopping">
- <svg-icon icon-class="shopping" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- 鎬昏涓嬬嚎
- </div>
- <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :span="4" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('shoppings')">
- <div class="card-panel-icon-wrapper icon-shopping">
- <svg-icon icon-class="shopping" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- CVT涓婄嚎
+ <div style="display: flex; margin-top: 20px; height: 80px;">
+ <div class="transition-box" style="background-color: limegreen">
+ <i class="el-icon-notebook-1"></i>
+ <el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
+ <div>
+ <span style="margin-left: 20px" class="nextLine">鍚堢涓婄嚎</span>
+ <span class="nextLine">{{data1}}</span>
</div>
- <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+ </div>
+ <div class="transition-box" style="background-color: cornflowerblue">
+ <i class="el-icon-setting"></i>
+ <el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
+ <div>
+ <span style="margin-left: 20px" class="nextLine">鍚堢涓嬬嚎</span>
+ <span class="nextLine">{{data2}}</span>
+ </div>
+
+ </div>
+ <div class="transition-box" style="background-color: mediumpurple">
+ <i class="el-icon-s-unfold"></i>
+ <el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
+ <div>
+ <span style="margin-left: 20px">鎬昏涓婄嚎</span>
+ <span class="nextLine">{{data3}}</span>
+ </div>
+ </div>
+ <div class="transition-box" style="background-color: green">
+ <i class="el-icon-cpu"></i>
+ <el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
+ <div>
+ <span style="margin-left: 20px">鎬昏涓嬬嚎</span>
+ <span class="nextLine">{{data4}}</span>
+ </div>
+ </div>
+ <div class="transition-box" style="background-color: orange">
+ <i class="el-icon-upload2"></i>
+ <el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
+ <div>
+ <span style="margin-left: 20px">CVT涓婄嚎</span>
+ <span class="nextLine">{{data5}}</span>
+ </div>
+ </div>
+ <div class="transition-box" style="background-color: darkslategray">
+ <i class="el-icon-finished"></i>
+ <el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
+ <div>
+ <span style="margin-left: 20px">CVT涓嬬嚎</span>
+ <span class="nextLine">{{data6}}</span>
+ </div>
</div>
</div>
- </el-col>
- <el-col :span="4" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('shoppings')">
- <div class="card-panel-icon-wrapper icon-shopping">
- <svg-icon icon-class="shopping" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- CVT涓嬬嚎
- </div>
- <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- </el-row>
+
+
</el-card>
-
+ </el-row>
</template>
<script>
import CountTo from 'vue-count-to'
+import { getProduceNumToday } from '@/api/main/da/passingStationCollection/passingStationCollection'
export default {
components: {
CountTo
},
+ data(){
+ return{
+ query1:'box_closing_online_time',
+ data1:'',
+ query2:'closing_box_offline_time',
+ data2:'',
+ query3:'final_assembly_launch_time',
+ data3:'',
+ query4:'final_assembly_offline_time',
+ data4:'',
+ query5:'cvt_launch_time',
+ data5:'',
+ query6:'cvt_offline_time',
+ data6:'',
+ }
+ },
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
+ },
+ getData1(){
+ getProduceNumToday({fieldName:this.query1}).then(response => {
+ this.data1 = response.data;
+ });
+ },
+ getData2(){
+ getProduceNumToday({fieldName:this.query2}).then(response => {
+ this.data2 = response.data;
+ });
+ },
+ getData3(){
+ getProduceNumToday({fieldName:this.query3}).then(response => {
+ this.data3 = response.data;
+ });
+ },
+ getData4(){
+ getProduceNumToday({fieldName:this.query4}).then(response => {
+ this.data4 = response.data;
+ });
+ },
+ getData5(){
+ getProduceNumToday({fieldName:this.query5}).then(response => {
+ this.data5 = response.data;
+ });
+ },
+ getData6(){
+ getProduceNumToday({fieldName:this.query6}).then(response => {
+ this.data6 = response.data;
+ });
}
+ },
+ mounted() {
+ this.getData1(),
+ this.getData2(),
+ this.getData3(),
+ this.getData4(),
+ this.getData5(),
+ this.getData6()
}
}
</script>
<style lang="scss" scoped>
-//.bottom-card{
-// padding: 15px 20px 20px 20px;
-// height: auto;
-// width: 1272px;
-// margin-left: 20px;
-// justify-content: center;
-// column-width: max-content;
-//}
-.top2{
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 0px;
+.transition-box {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ width: 200px;
+ height: 80px;
+ border-radius: 4px;
+ text-align: center;
+ color: #fff;
+ padding: 40px 20px;
+ box-sizing: border-box;
+ margin-right: 10px;
}
-.panel-group {
-
- width: 1442px;
- .card-panel-col {
-
- margin-bottom: 15px;
- }
- .card-panel {
- margin-left: -13px;
- width: 220px;
- height: 108px;
- cursor: pointer;
- font-size: 12px;
- position: relative;
- overflow: hidden;
- color: #666;
- background: #fff;
- box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
- border-color: rgba(0, 0, 0, .05);
-
- &:hover {
- .card-panel-icon-wrapper {
- color: #fff;
- }
-
- .icon-people {
- background: #40c9c6;
- }
-
- .icon-message {
- background: #36a3f7;
- }
-
- .icon-money {
- background: #f4516c;
- }
-
- .icon-shopping {
- background: #34bfa3
- }
- }
-
- .icon-people {
- color: #40c9c6;
- }
-
- .icon-message {
- color: #36a3f7;
- }
-
- .icon-money {
- color: #f4516c;
- }
-
- .icon-shopping {
- color: #34bfa3
- }
-
- .card-panel-icon-wrapper {
- float: left;
- margin: 14px 0 0 10px;
- padding: 16px;
- transition: all 0.38s ease-out;
- border-radius: 6px;
- }
-
- .card-panel-icon {
- float: left;
- font-size: 48px;
- }
-
- .card-panel-description {
- float: right;
- font-weight: bold;
- margin: 15px 30px 0 0;
- //margin-left: 0px;
- padding: 15px 15px;
-
- .card-panel-text {
- line-height: 14px;
- color: rgba(0, 0, 0, 0.45);
- font-size: 12px;
- margin-bottom: 9px;
- }
-
- .card-panel-num {
- font-size: 18px;
- }
- }
- }
+.bottom-card{
+ padding: 0px 10px 20px 10px;
+ height: auto;
+ width: 1292px;
+ margin-left: 20px;
+ justify-content: center;
+ column-width: max-content;
+}
+.el-icon-notebook-1{
+ font-size: 40px;
+ display: flex;
+ justify-content: left;
+}
+.el-icon-setting{
+ font-size: 40px;
+ display: flex;
+ justify-content: left;
+}
+.el-icon-s-unfold{
+ font-size: 40px;
+ display: flex;
+ justify-content: left;
+}
+.el-icon-cpu{
+ font-size: 40px;
+ display: flex;
+ justify-content: left;
+}
+.el-icon-upload2 {
+ font-size: 40px;
+ display: flex;
+ justify-content: left;
+}
+.el-icon-finished{
+ font-size: 40px;
+ display: flex;
+ justify-content: left;
+}
+.el-divider--vertical{
+ width:2px;
+ height:40px; //鏇存敼绔栧悜鍒嗗壊绾块暱搴�
+ vertical-align:middle;
+ position:relative;
+}
+.nextLine{
+ display: block;
+ margin-left: 20px;
}
-@media (max-width:550px) {
- .card-panel-description {
- display: none;
- }
- .card-panel-icon-wrapper {
- float: none !important;
- width: 100%;
- height: 100%;
- margin: 0 !important;
-
- .svg-icon {
- display: block;
- margin: 14px auto !important;
- float: none !important;
- }
- }
-}
</style>
--
Gitblit v1.9.3