From 7f2bc78a5101017c4470577003e4cf99c0ca7648 Mon Sep 17 00:00:00 2001
From: zhangyanpeng <bob.zhang@highdatas.com>
Date: 星期四, 23 一月 2020 14:49:23 +0800
Subject: [PATCH] 首页
---
src/views/Overview.vue | 23 ++++
src/views/Mine.vue | 275 +++++++++++++++++++++++++++++++++++++++++++++++++-----
2 files changed, 270 insertions(+), 28 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>
diff --git a/src/views/Overview.vue b/src/views/Overview.vue
index 5ac6c75..960d40e 100644
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
@@ -35,7 +35,15 @@
</div>
</div>
</div>
- <div class="z_shadow" style="float: right; margin-right: 1%; width: 28%; height: 70vh; border: 1px solid #e4eef9;"></div>
+ <div class="z_shadow" style="float: right; margin-right: 1%; padding: 10px; box-sizing: border-box; width: 28%; height: 70vh; border: 1px solid #e4eef9; overflow: auto;">
+ <h3 style="margin: 0px;">椤圭洰姒傝</h3>
+ <div v-for="(type_itm, k_) in task_itm" :key="k_">
+ <h3>{{k_+1}}銆亄{type_itm.name}} <span style="font-size: 12px; color: #409EFF;">{{type_itm.state}} </span></h3>
+ <div>
+ <span>{{type_itm.desp}}</span>
+ </div>
+ </div>
+ </div>
@@ -72,6 +80,19 @@
dialog_1: false,
fileLevel: 0,
fileList: [],
+
+ task_itm: [
+ {'id': "111_1", 'name': "绔嬮鏈嶅姟", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"}, //
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"},
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"},
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"},
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"},
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"},
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"},
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"},
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", desp: "鎻忚堪鐪嬪埌闈欏畨瀵�", 'state': "杩涜涓�"},
+
+ ]
}
},
mounted() {
--
Gitblit v1.8.0