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/Overview.vue | 46 ++++++-
src/views/Mine.vue | 275 +++++++++++++++++++++++++++++++++++++++++----
2 files changed, 287 insertions(+), 34 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 505dcdd..1d1625c 100644
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
@@ -23,7 +23,9 @@
</div>
<div class="z_shadow" style="float: left; margin: 10px; width: 46%; height: 43%; border: 1px solid #e4eef9;">
<el-row :gutter="20">
- <el-col :span="6" v-for="(user, index) in userList" :key="index">111</el-col>
+ <el-col :span="6" v-for="(oneUser, index) in userList" :key="index"><div class="grid-content bg-purple">
+ <i class="el-icon-user-solid"></i>
+ <span>{{oneUser.name}}</span></div></el-col>
</el-row>
</div>
<div class="z_shadow" style="float: left; margin: 10px; padding: 10px; box-sizing: border-box; width: 46%; height: 43%; border: 1px solid #e4eef9;">
@@ -44,11 +46,16 @@
</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>
+
</div>
</template>
@@ -63,6 +70,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': "杩涜涓�"},
+
+ ],
myChart: undefined,
userList: [],
grandPa:"",
@@ -192,13 +212,25 @@
result.record = result.record.map(el => {
var imoment = this.$moment(el.createTime);
// 鏍煎紡鍖栨垚锛屽勾鏈堟棩
- let iformat = imoment.format('YYYY-MM-DD');
+ let iformat = imoment.format('YYYY-MM-DD HH:mm:ss');
el.createTime = iformat;
if(!el.desp) {
el.desp = "鏆傛棤鎻忚堪";
}
return el;
});
+ result.scheme = result.scheme.map(el => {
+ if(el.finish) {
+ el.state="宸茬粨鏉�";
+ }else if(el.delay) {
+ el.state="宸插欢鏈�";
+ }else if(el.edit) {
+ el.state="寰呭惎鍔�";
+ }else {
+ el.state="杩涜涓�";
+ }
+ return el;
+ });
me.fileList = result.paths;
me.scheme = result.scheme;
me.deals = result.record;
--
Gitblit v1.8.0