From 11317bf89e4d4194f84229c3d89a786b323c6be4 Mon Sep 17 00:00:00 2001
From: kimi <kimi42345@gmail.com>
Date: 星期四, 23 一月 2020 15:16:16 +0800
Subject: [PATCH] merge
---
src/views/Mine.vue | 275 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 248 insertions(+), 27 deletions(-)
diff --git a/src/views/Mine.vue b/src/views/Mine.vue
index 638f4c4..27ad6c5 100644
--- a/src/views/Mine.vue
+++ b/src/views/Mine.vue
@@ -1,48 +1,198 @@
<template>
- <div>
- <el-card class="box-card float-left" shadow="hover">
- <div slot="header" class="clearfix">
- <span>姒傝</span>
- </div>
- <div>
- <el-row>
- <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
- <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
- <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
- </el-row>
- </div>
- </el-card>
-
- <el-card class="box-card" shadow="hover">
- <div slot="header" class="clearfix">
- <span>椤圭洰鎬昏</span>
- </div>
- <div>
- <el-row>
- <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
- <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
- <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
- </el-row>
- </div>
- </el-card>
+ <div class="class_mine">
+ <el-row :gutter="12">
+ <el-col :span="15">
+ <el-card class="box-card" shadow="hover" style="width: 100%; height: 30vh;">
+ <div slot="header" class="clearfix">
+ <span>姒傝</span>
+ </div>
+ <div class="card1">
+ <el-row>
+ <el-col :span="5"><div class="grid-content" style="font-size: 14px; color: #72767B;">{{date_}}</div></el-col>
+ <el-col :span="12"><div class="grid-content" style="font-size: 14px;">浠婂ぉ鍓╀綑宸ヤ綔鎬昏</div></el-col>
+ </el-row>
+ <div style="width: 100%; height: 110px; overflow: auto;">
+ <div class="card1_div" v-for="(card1_itm, k) in overview1" :key="k">
+ <div class="card1_header">{{card1_itm.name}}</div>
+ <div class="card1_body">{{card1_itm.count}}</div>
+ <div class="card1_footer">{{card1_itm.warning}}</div>
+ </div>
+ </div>
+
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="9">
+ <el-card class="box-card" shadow="hover" style="width: 100%; height: 30vh;">
+ <div slot="header" class="clearfix">
+ <span>椤圭洰鎬昏</span>
+ </div>
+ <div class="card2">
+ <div class="card2_div" style="width: 19%;">
+ <div class="card2_header">鎵�鏈夐」鐩�</div>
+ <div class="card2_body">{{sum_count}}</div>
+ <el-button size="mini" type="primary" round @click="see_click">鏌ョ湅鎵�鏈�</el-button>
+ </div>
+ <div class="card2_div" style="width: 80%;">
+
+ </div>
+
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ <el-row :gutter="12" style="margin-top: 10px;">
+ <el-col :span="15">
+ <el-card class="box-card" shadow="hover" style="width: 100%; height: 46vh;">
+ <div slot="header" class="clearfix">
+ <span>椤圭洰缁熻</span>
+ </div>
+ <div class="card3">
+ <div class="card3_div" style="width: 40%; height: 34vh; overflow-y: auto; border-right: 1px solid #333333;">
+ <el-table
+ :data="tableData"
+ height="250"
+ highlight-current-row
+ @row-click="setActiveTableData"
+ style="width: 100%">
+ <el-table-column
+ prop="name"
+ label="椤圭洰鍚嶇О"
+ >
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="card3_div" style="width: 58%;">
+ <el-row :gutter="12" style="margin-top: 10px;">
+ <el-col :span="8" style="text-align: center;">
+ <el-progress type="circle" :percentage="card3Count.rate"></el-progress>
+ </el-col>
+ <el-col :span="10">
+ <div style="height: 14vh;">
+ <div>
+ <i class="el-icon-success" style="color: #40FF9E;"></i>
+ <span>鏄ㄦ棩瀹屾垚浠诲姟鏁帮細{{card3Count.complete1}}</span>
+ </div>
+ <div>
+ <el-progress :percentage="card3Count.rate1" style="margin: 5px;"></el-progress>
+ </div>
+ </div>
+
+ <div>
+ <div>
+ <i class="el-icon-success" style="color: #40FF9E;"></i>
+ <span>浠婃棩瀹屾垚浠诲姟鏁帮細{{card3Count.complete2}}</span>
+ </div>
+ <div>
+ <el-progress :percentage="card3Count.rate2" style="margin: 5px;"></el-progress>
+ </div>
+ </div>
+ </el-col>
+
+ <el-col :span="6">
+ <div style="height: 14vh;">
+ <div><span>鎬讳换鍔★細{{card3Count.sum1}}</span></div>
+ <div><span>鏈畬鎴愶細{{card3Count.unfinished1}}</span></div>
+ </div>
+
+ <div>
+ <div><span>鎬讳换鍔★細{{card3Count.sum2}}</span></div>
+ <div><span>鏈畬鎴愶細{{card3Count.unfinished2}}</span></div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="9">
+ <el-card class="box-card" shadow="hover" style="width: 100%; height: 46vh;">
+ <div slot="header" class="clearfix">
+ <span>浠婃棩寰呭姙</span>
+ </div>
+ <div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
</div>
</template>
<script>
export default {
-
+ data() {
+ return {
+ date_: "",
+ overview1: [],
+ tableData: [],
+ activeTableData: {},
+
+ card3Count: {}
+ }
+ },
created() {
this.init();
},
methods: {
init() {
+ this.date_ = this.$moment(new Date).format('YYYY骞碝M鏈圖D鏃�');
+ this.overview1 = [
+ {name: "鎴戠殑浠诲姟", count: 15, warning: "宸查�炬湡11"},
+ {name: "绔嬫涓庢柟妗堝紑鍙�", count: 15, warning: "宸查�炬湡11"},
+ {name: "鏂囩尞妫�绱笌绛涢��", count: 15, warning: "宸查�炬湡11"},
+ {name: "鏁版嵁鎻愬彇", count: 15, warning: "宸查�炬湡11"},
+ {name: "鏁版嵁鍒嗘瀽", count: 15, warning: "宸查�炬湡11"},
+ {name: "鏂囩鎾板啓", count: 15, warning: "宸查�炬湡11"},
+ ];
+
+ this.sum_count = 345;
+
+ this.tableData = [
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ {id: "1111111", name: "妫�鏌ユ悳绱㈣偗寰峰熀浼犻��"},
+ ];
+
+
+ this.card3Count = {
+ sum: 345, //鎬讳换鍔�
+ complete: 200, //宸插畬鎴�
+ sum1: 20, //鏄ㄦ棩鎬讳换鍔�
+ sum2: 16,
+ unfinished1: 10, //鏄ㄦ棩鏈畬鎴�
+ unfinished2: 6,
+ complete1: 10, //鏄ㄦ棩宸插畬鎴�
+ complete2: 10
+ };
+ this.card3Count.rate = Math.round(this.card3Count.complete/this.card3Count.sum * 100);
+ this.card3Count.rate1 = Math.round(this.card3Count.complete1/this.card3Count.sum1 * 100);
+ this.card3Count.rate2 = Math.round(this.card3Count.complete2/this.card3Count.sum2 * 100);
},
+
+ see_click() {
+ this.$router.push('/list');
+ },
+
+ setActiveTableData(currentRow, oldCurrentRow) {
+ this.activeTableData = currentRow;
+ },
+
},
}
</script>
<style>
+ .clearfix{
+ text-align: left;
+ }
.grid-content {
border-radius: 4px;
min-height: 36px;
@@ -53,4 +203,75 @@
.float-left{
float: left;
}
+ .class_mine .el-card__body {
+ padding-top: 10px;
+ }
+ .card1 .grid-content {
+ min-height: 20px;
+ }
+ .card1_div {
+ float: left;
+ width: 16%;
+ text-align: center;
+ }
+ .card1_header {
+ font-size: 10px;
+ color: #999;
+ }
+ .card1_body {
+ height: 60px;
+ line-height: 60px;
+ font-size: 34px;
+ font-weight: bold;
+ border-right: 1px solid #72767B;
+ }
+ .card1_footer {
+ font-size: 10px;
+ color: #e86c6c;
+ }
+
+ .card2_div {
+ float: left;
+ text-align: center;
+ }
+ .card2_header {
+ font-size: 10px;
+ color: #999;
+ }
+ .card2_body {
+ height: 100px;
+ line-height: 100px;
+ font-size: 34px;
+ font-weight: bold;
+ }
+ .card2_footer {
+ font-size: 10px;
+ color: #e86c6c;
+ }
+
+
+
+
+ .card3_div {
+ float: left;
+ text-align: left;
+ }
+ .card3_header {
+ font-size: 10px;
+ color: #999;
+ }
+ .card3_body {
+ height: 100px;
+ line-height: 100px;
+ font-size: 34px;
+ font-weight: bold;
+ }
+ .card3_footer {
+ font-size: 10px;
+ color: #e86c6c;
+ }
+ .card3_div .el-progress-bar__outer {
+ }
+ .card3_div .el-progress-bar__inner {
+ }
</style>
--
Gitblit v1.8.0