From 9ebb88c8541a1d351a10042bdd7c2fd319d3f6bb Mon Sep 17 00:00:00 2001
From: wujian <14790700720@163.com>
Date: 星期三, 24 一月 2024 09:27:04 +0800
Subject: [PATCH] add 首页
---
jcdm-ui/src/views/dashboard/PanelGroup.vue | 325 ++++++++++++++++++++++++++++-------------------------
1 files changed, 173 insertions(+), 152 deletions(-)
diff --git a/jcdm-ui/src/views/dashboard/PanelGroup.vue b/jcdm-ui/src/views/dashboard/PanelGroup.vue
index 1a1081f..5400808 100644
--- a/jcdm-ui/src/views/dashboard/PanelGroup.vue
+++ b/jcdm-ui/src/views/dashboard/PanelGroup.vue
@@ -1,181 +1,202 @@
<template>
<el-row :gutter="40" class="panel-group">
- <el-col :xs="12" :sm="12" :lg="6" 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">
- 璁垮
+ <el-card class="bottom-card">
+ <div slot="header" class="clearfix">
+ <span style="font-size: 20px;font-weight: bold">鍗曟棩绱浜ч噺</span>
+ </div>
+
+ <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="102400" :duration="2600" 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 :xs="12" :sm="12" :lg="6" 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 :xs="12" :sm="12" :lg="6" 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 :xs="12" :sm="12" :lg="6" 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-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>
-.panel-group {
- margin-top: 18px;
- .card-panel-col {
- margin-bottom: 32px;
- }
-
- .card-panel {
- 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 14px;
- 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: 26px;
- margin-left: 0px;
-
- .card-panel-text {
- line-height: 18px;
- color: rgba(0, 0, 0, 0.45);
- font-size: 16px;
- margin-bottom: 12px;
- }
-
- .card-panel-num {
- font-size: 20px;
- }
- }
- }
+.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;
}
-@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;
- }
- }
+.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;
+}
+
+
</style>
--
Gitblit v1.9.3