From 050f815891df7c732e1ef64f1f32a83da495af11 Mon Sep 17 00:00:00 2001
From: zhangyanpeng <bob.zhang@highdatas.com>
Date: 星期二, 11 二月 2020 23:46:29 +0800
Subject: [PATCH] 时间段调整
---
src/views/Mine.vue | 403 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 375 insertions(+), 28 deletions(-)
diff --git a/src/views/Mine.vue b/src/views/Mine.vue
index 5f39f0e..90e8120 100644
--- a/src/views/Mine.vue
+++ b/src/views/Mine.vue
@@ -1,40 +1,316 @@
<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: 32vh;">
+ <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: 32vh;">
+ <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="margin-left:10%;width: 70%;">
+ <div id="typeChart" :style="{width: '100%', height: '100%'}"></div>
+ </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="200"
+ 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" style="font-size: 14px;">
+ <div style="height: 14vh; ">
+ <div>
+ <i class="el-icon-success" style="color: #40FF9E;"></i>
+ <span>鏄ㄦ棩瀹屾垚浠诲姟鏁帮細{{card3Count.yesDeal}}</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.nowDeal}}</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.yesTotal}}</span></div>
+ <div><span>宸插畬鎴愶細{{card3Count.yesDeal}}</span></div>
+ </div>
+
+ <div>
+ <div><span>鎬讳换鍔★細{{card3Count.nowTotal}}</span></div>
+ <div><span>宸插畬鎴愶細{{card3Count.nowDeal}}</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: {},
+ sum_count:0,
+ card3Count: {},
+ typeChart:undefined,
+ }
+ },
+ created() {
+ this.init();
+ },
+ mounted(){
+ this.typeChart = this.$echarts.init(document.getElementById('typeChart'));
+ },
+ methods: {
+ init() {
+
+ this.$axios.get("/api/scheme/all")
+ .then(data_ => {
+ console.log(data_);
+ if (data_.data.success) {
+ var datas = data_.data.data;
+ this.tableData = datas;
+ }
+ }).catch(error => {
+ console.log(error);
+ });
+ this.$axios.get("/api/scheme/typesCnt")
+ .then(data_ => {
+ console.log(data_);
+ if (data_.data.success) {
+ var datas = data_.data.data;
+
+ this.sum_count = datas.total;
+ this.initChart(datas.typeCnt);
+ }
+ }).catch(error => {
+ console.log(error);
+ });
+ this.date_ = this.$moment(new Date).format('YYYY骞碝M鏈圖D鏃�');
+ this.$axios.get("/api/detail/dayTask")
+ .then(data_ => {
+ console.log(data_);
+ if (data_.data.success) {
+ var datas = data_.data.data;
+ datas.map(el => {
+ if(el.delay > 0) {
+ el.warning="宸查�炬湡" + ell.delay;
+ }else {
+ el.warning = undefined;
+ }
+ el.count = el.total;
+ el.name = el.type;
+ return el;
+ });
+ this.overview1 = datas;
+ }
+ }).catch(error => {
+ console.log(error);
+ })
+ // 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.card3Count = {
+ // total: 345, //鎬讳换鍔�
+ // deal: 200, //宸插畬鎴�
+ // yesTotal: 20, //鏄ㄦ棩鎬讳换鍔�
+ // nowTotal: 16,
+ // unfinished1: 10, //鏄ㄦ棩鏈畬鎴�
+ // unfinished2: 6,
+ // yesDeal: 10, //鏄ㄦ棩宸插畬鎴�
+ // nowDeal: 10
+ // };
+
+ },
+
+ see_click() {
+ this.$router.push('/list');
+ },
+
+ setActiveTableData(currentRow, oldCurrentRow) {
+ this.activeTableData = currentRow;
+ this.$axios.get("/api/scheme/daywork/" + currentRow.id)
+ .then(data_ => {
+ console.log(data_);
+ if (data_.data.success) {
+ var datas = data_.data.data;
+ this.card3Count = datas;
+
+ this.card3Count.rate = Math.round(this.card3Count.deal/(this.card3Count.total == 0 ? 1: this.card3Count.total) * 100);
+ this.card3Count.rate1 = Math.round(this.card3Count.yesDeal/(this.card3Count.yesTotal == 0 ? 1: this.card3Count.yesTotal) * 100);
+ this.card3Count.rate2 = Math.round(this.card3Count.nowDeal/(this.card3Count.nowTotal == 0 ? 1: this.card3Count.nowTotal) * 100);
+
+ }
+ }).catch(error => {
+ console.log(error);
+ })
+ },
+ initChart(val) {
+ if(!val){
+ return;
+ }
+ this.typeChart.setOption({
+
+ backgroundColor: '#fff',
+ grid: {
+ top: '22%',
+ right: '2%',
+ left: '2%',
+ bottom: '18%'
+ },
+ xAxis: [{
+ type: 'category',
+ color: '#59588D',
+ data: ["鏈紑濮�","杩涜涓�","宸插欢鏈�","宸茬粨鏉�"],
+ axisLabel: {
+ margin: 8,
+ color: '#000',
+ textStyle: {
+ fontSize: 12
+ },
+ },
+ axisLine: {
+ show:false,
+
+ },
+ axisTick: {
+ show: false
+ },
+ }],
+ yAxis: [{
+
+ axisLabel: {
+ show:false,
+
+ },
+ axisLine: {
+ show:false,
+
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show:false,
+
+ }
+ }],
+ series: [{
+ type: 'bar',
+ data: val,
+ barWidth: '20px',
+ itemStyle: {
+ normal: {
+ color: "#409EFF",
+ barBorderRadius: [30, 30, 0, 0],
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: '#333',
+ position: 'top',
+ }
+ }
+ }
+ ]
+
+ });
+ }
+ },
+ }
</script>
<style>
+ .clearfix{
+ text-align: left;
+ }
.grid-content {
border-radius: 4px;
min-height: 36px;
@@ -45,4 +321,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: 70px;
+ line-height: 70px;
+ 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