From 84326b11401f217cd483d13bc72cec4ffd5da7ce Mon Sep 17 00:00:00 2001
From: bob <bob.zhang@highdatas.com>
Date: 星期三, 25 十一月 2020 10:02:22 +0800
Subject: [PATCH] 2020-11-13
---
src/views/Mine.vue | 756 ++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 651 insertions(+), 105 deletions(-)
diff --git a/src/views/Mine.vue b/src/views/Mine.vue
index d3614e1..5e963e8 100644
--- a/src/views/Mine.vue
+++ b/src/views/Mine.vue
@@ -1,7 +1,7 @@
<template>
<div class="class_mine">
<el-row :gutter="12">
- <el-col :span="15">
+ <el-col :span="15" v-if="isRootUser">
<el-card class="box-card" shadow="hover" style="width: 100%; height: 32vh;">
<div slot="header" class="clearfix">
<span>姒傝</span>
@@ -11,18 +11,117 @@
<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 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="15" v-else>
+ <el-card class="box-card" shadow="hover" style="width: 100%; height: 32vh;">
+ <div v-loading="loading_tab" class="card1">
+ <el-button-group style="float: right;">
+ <el-button :type="islist ? 'primary' : ''" size="mini" @click="setIsList(true)">鍒楄〃</el-button>
+ <el-button :type="islist ? '' : 'primary'" size="mini" @click="setIsList(false)">鍥捐〃</el-button>
+ </el-button-group>
+ <el-tabs v-model="tab_activeName" type="card" @tab-click="handleClick">
+ <el-tab-pane label="鏁翠綋" name="all" class="z_tab_div">
+ <div v-show="islist">
+ <el-table highlight-current-row
+ v-if="refresh"
+ ref="data_table"
+ size="mini"
+ :data="tableData_all"
+ border
+ :header-cell-style="{'width': '100%', 'text-align': 'center'}"
+ >
+ <el-table-column prop="range" label="鑼冨洿" width="100" align="left"></el-table-column>
+ <el-table-column prop="finishAmt" label="瀹屾垚閲戦" align="right"></el-table-column>
+ <el-table-column prop="target" label="鎸囨爣" align="right"></el-table-column>
+ <el-table-column prop="endRate" label="瀹屾垚鐜�" align="center"></el-table-column>
+ <el-table-column prop="chain" label="鐜瘮" ></el-table-column>
+ </el-table>
+ </div>
+ <div v-show="!islist" style="height: 100%;">
+ <div class="z_shadow" style="width: 100%; height: 100%;">
+ <div id="myChart_all" style="width: 43vw; height: 24vh"></div>
+ </div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="鍥㈤槦" name="team" class="z_tab_div">
+ <div v-show="islist">
+ <el-table highlight-current-row
+ v-if="refresh"
+ ref="data_table"
+ size="mini"
+ :data="tableData_team"
+ border
+ :header-cell-style="{'width': '100%', 'text-align': 'center'}"
+ >
+ <el-table-column prop="range" label="鍥㈤槦" width="100" align="left"></el-table-column>
+ <el-table-column label="涓婂崐骞�">
+ <el-table-column prop="finishAmt_t" label="瀹屾垚閲戦" align="right"></el-table-column>
+ <el-table-column prop="target_t" label="鎸囨爣" align="right"></el-table-column>
+ <el-table-column prop="endRate_t" label="瀹屾垚鐜�" align="center"></el-table-column>
+ <el-table-column prop="chain_t" label="鐜瘮" ></el-table-column>
+ </el-table-column>
+ <el-table-column label="涓嬪崐骞�">
+ <el-table-column prop="finishAmt_b" label="瀹屾垚閲戦" align="right"></el-table-column>
+ <el-table-column prop="target_b" label="鎸囨爣" align="right"></el-table-column>
+ <el-table-column prop="endRate_b" label="瀹屾垚鐜�" align="center"></el-table-column>
+ <el-table-column prop="chain_b" label="鐜瘮" ></el-table-column>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div v-show="!islist" style="height: 100%;">
+ <div class="z_shadow" style="width: 100%; height: 100%;">
+ <div id="myChart_team" style="width: 43vw; height: 24vh"></div>
+ </div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="鎴愬憳" name="member" class="z_tab_div">
+ <div v-show="islist">
+ <el-table highlight-current-row
+ v-if="refresh"
+ ref="data_table"
+ size="mini"
+ :data="tableData_member"
+ border
+ :header-cell-style="{'width': '100%', 'text-align': 'center'}"
+ >
+ <el-table-column prop="range" label="鎴愬憳" width="80" align="left"></el-table-column>
+ <el-table-column label="涓婂崐骞�">
+ <el-table-column prop="finishAmt_t" label="瀹屾垚閲戦" align="right"></el-table-column>
+ <el-table-column prop="target_t" label="鎸囨爣" align="right"></el-table-column>
+ <el-table-column prop="endRate_t" label="瀹屾垚鐜�" align="center"></el-table-column>
+ <el-table-column prop="chain_t" label="鐜瘮" ></el-table-column>
+ </el-table-column>
+ <el-table-column label="涓嬪崐骞�">
+ <el-table-column prop="finishAmt_b" label="瀹屾垚閲戦" align="right"></el-table-column>
+ <el-table-column prop="target_b" label="鎸囨爣" align="right"></el-table-column>
+ <el-table-column prop="endRate_b" label="瀹屾垚鐜�" align="center"></el-table-column>
+ <el-table-column prop="chain_b" label="鐜瘮" ></el-table-column>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div v-show="!islist" style="height: 100%;">
+ <div class="z_shadow" style="width: 100%; height: 100%;">
+ <div id="myChart_member" style="width: 43vw; height: 24vh"></div>
+ </div>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </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">
@@ -124,6 +223,19 @@
export default {
data() {
return {
+ refresh: true,
+ islist: false,
+ isRootUser: false,
+ tab_activeName: "all",
+ loading_tab: false,
+ tableData_all: [],
+ tableData_team: [],
+ tableData_member: [],
+
+ myChart_all: null,
+ myChart_team: null,
+ myChart_member: null,
+
date_: "",
overview1: [],
tableData: [],
@@ -137,11 +249,100 @@
this.init();
},
mounted(){
+ let me = this;
+ //鑾峰彇鐢ㄦ埛瑙掕壊
+ let roleName = this.$cookies.get('roleName');
+ if(roleName != "鍒涘浜�") {
+ this.isRootUser = true;
+ }
this.typeChart = this.$echarts.init(document.getElementById('typeChart'));
+ if(!this.isRootUser) {
+ this.myChart_all = this.$echarts.init(document.getElementById('myChart_all'));
+ this.myChart_team = this.$echarts.init(document.getElementById('myChart_team'));
+ this.myChart_member = this.$echarts.init(document.getElementById('myChart_member'));
+
+ this.tocharts();
+ }
+
},
methods: {
+ handleClick(tab, event) {
+ if(this.tab_activeName == "all") {
+ if(this.islist) {
+ this.tolist();
+ }
+ else {
+ this.tocharts();
+ }
+ //this.tableData_all = [];
+ }
+ else if(this.tab_activeName == "team") {
+ if(this.islist) {
+ this.tolist();
+ }
+ else {
+ this.tocharts();
+ }
+ //this.tableData_team = [];
+ }
+ else if(this.tab_activeName == "member") {
+ if(this.islist) {
+ this.tolist();
+ }
+ else {
+ this.tocharts();
+ }
+ //this.tableData_member = [];
+ }
+ },
+
+ setIsList(islist_) {
+ if(islist_) {
+ this.tolist();
+ }
+ else {
+ this.tocharts();
+ }
+ },
+ tolist() {//鍒楄〃
+ this.islist = true;
+ this.refresh = false;
+ if(this.tab_activeName == "all") {
+ this.tableData_all = [
+ {range: "涓婂崐骞�", finishAmt: 180, target: 195, endRate: "92%", chain: ""},
+ {range: "涓嬪崐骞�", finishAmt: 300, target: 355, endRate: "92%", chain: ""},
+ {range: "鍏ㄥ勾", finishAmt: 480, target: 550, endRate: "92%", chain: ""}
+ ];
+ }
+ else if(this.tab_activeName == "team") {
+ this.tableData_team = [
+ {range: "Team1(Sai)", finishAmt_t: 70, target_t: 95, endRate_t: "92%", chain_t: "", finishAmt_b: 100, target_b: 160, endRate_b: "92%", chain_b: ""},
+ {range: "Team2(Fang)", finishAmt_t: 80, target_t: 100, endRate_t: "92%", chain_t: "", finishAmt_b: 100, target_b: 140, endRate_b: "92%", chain_b: ""},
+ {range: "澶忓悰", finishAmt_t: 0, target_t: 0, endRate_t: "92%", chain_t: "", finishAmt_b: 30, target_b: 55, endRate_b: "92%", chain_b: ""}
+ ];
+ }
+ else if(this.tab_activeName == "member") {
+ this.tableData_member = [
+ {range: "杩熸枃鍔�", finishAmt_t: 12, target_t: 20, endRate_t: "62%", chain_t: "", finishAmt_b: 20, target_b: 40, endRate_b: "52%", chain_b: ""},
+ {range: "钁ｆ�濆饯", finishAmt_t: 12, target_t: 20, endRate_t: "62%", chain_t: "", finishAmt_b: 20, target_b: 40, endRate_b: "52%", chain_b: ""},
+ {range: "寮犻槼", finishAmt_t: 12, target_t: 20, endRate_t: "62%", chain_t: "", finishAmt_b: 20, target_b: 40, endRate_b: "52%", chain_b: ""}
+ ];
+ }
+ this.refresh = true;
+ },
+ tocharts() {//鍥捐〃
+ this.islist = false;
+ if(this.tab_activeName == "all") {
+ this.initChart_all();
+ }
+ else if(this.tab_activeName == "team") {
+ this.initChart_team();
+ }
+ else if(this.tab_activeName == "member") {
+ this.initChart_member();
+ }
+ },
init() {
-
this.$axios.get("/api/scheme/all")
.then(data_ => {
if (data_.data.success) {
@@ -204,105 +405,432 @@
// nowDeal: 10
// };
- },
-
- see_click() {
- this.$router.push('/list').catch(err => {err});
- },
-
- 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;
+ },
+
+ see_click() {
+ this.$router.push('/list').catch(err => {err});
+ },
+
+ 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',
+ }
+ }
+ }
+ ]
+ });
+ },
+
+ initChart_all(val) {
+ /* if(!val){
+ return;
+ } */
+ this.myChart_all.setOption({
+
+ grid: {
+ top: '10%',
+ left: '7%',
+ right: '2%',
+ bottom: '10%'
+ },
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ show: false,
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ center: ['77%', '70%'],
+ radius: '70px',
+ startAngle: 180,
+ endAngle:0,
+ axisLine:{
+ lineStyle: {
+ width: 10
+ }
+ },
+ splitLine:{
+ length:'10%'
+ },
+ axisLabel:{
+ fontSize: 12
+ },
+ pointer:{
+ width: 5
+ },
+ title: {
+ fontSize: 12
+ },
+
+ name: '涓氬姟鎸囨爣',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}%',
+ fontSize: 20
+ },
+ data: [{value: 60, name: '涓嬪崐骞�'}]
+ },
- 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);
+ {
+ center: ['23%', '70%'],
+ radius: '70px',
+ startAngle: 180,
+ endAngle:0,
+ axisLine:{
+ lineStyle: {
+ width: 10
+ }
+ },
+ splitLine:{
+ length:'10%'
+ },
+ axisLabel:{
+ fontSize: 12
+ },
+ pointer:{
+ width: 5
+ },
+ title: {
+ fontSize: 12
+ },
+
+ name: '涓氬姟鎸囨爣',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}%',
+ fontSize: 20
+ },
+ data: [{value: 80, name: '涓婂崐骞�'}]
+ },
- }
- }).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',
- }
+ {
+ radius: '70px',
+ axisLine:{
+ lineStyle: {
+ width: 10
+ }
+ },
+ splitLine:{
+ length:'10%'
+ },
+ axisLabel:{
+ fontSize: 12
+ },
+ pointer:{
+ width: 5
+ },
+ title: {
+ fontSize: 12
+ },
+
+ name: '涓氬姟鎸囨爣',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}%',
+ fontSize: 20
+ },
+ data: [{value: 60, name: '鍏ㄥ勾'}]
+ }
+ ]
+ });
+ },
+ initChart_team(val) {
+ /* if(!val){
+ return;
+ } */
+ var labelOption = {
+ show: true,
+ position: 'insideBottom',
+ distance: 15,
+ align: 'left',
+ verticalAlign: 'middle',
+ rotate: 90,
+ formatter: '{c}',
+ fontSize: 12,
+ rich: {
+ name: {
+ textBorderColor: '#fff'
}
}
- ]
-
- });
- }
- },
+ };
+
+ this.myChart_team.setOption({
+
+ grid: {
+ top: '10%',
+ left: '7%',
+ right: '2%',
+ bottom: '10%'
+ },
+ color: ['#003366', '#006699', '#4cabce', '#e5323e'],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['涓婂崐骞撮噾棰�', '涓婂崐骞存寚鏍�', '涓嬪崐骞撮噾棰�', '涓嬪崐骞存寚鏍�']
+ },
+ toolbox: {
+ show: false,
+ orient: 'vertical',
+ left: 'right',
+ top: 'center',
+ feature: {
+ mark: {show: true},
+ dataView: {show: true, readOnly: false},
+ magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {show: false},
+ data: ['Team1(Sai)', 'Team2(Fang)', '澶忓悰']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: '涓婂崐骞撮噾棰�',
+ type: 'bar',
+ barGap: 0,
+ label: labelOption,
+ data: [50, 50, 0]
+ },
+ {
+ name: '涓婂崐骞存寚鏍�',
+ type: 'bar',
+ label: labelOption,
+ data: [95, 100, 0]
+ },
+ {
+ name: '涓嬪崐骞撮噾棰�',
+ type: 'bar',
+ label: labelOption,
+ data: [100, 100, 30]
+ },
+ {
+ name: '涓嬪崐骞存寚鏍�',
+ type: 'bar',
+ label: labelOption,
+ data: [160, 140, 55]
+ }
+ ]
+
+ /*
+ grid: {
+ top: '10%',
+ left: '7%',
+ right: '2%',
+ bottom: '10%'
+ },
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ }
+ }]
+ */});
+ },
+ initChart_member(val) {
+ /* if(!val){
+ return;
+ } */
+ var labelOption = {
+ show: true,
+ position: 'insideBottom',
+ distance: 15,
+ align: 'left',
+ verticalAlign: 'middle',
+ rotate: 90,
+ formatter: '{c}', /* {name|{a}}*/
+ fontSize:12,
+ rich: {
+ name: {
+ textBorderColor: '#fff'
+ }
+ }
+ };
+
+ this.myChart_member.setOption({
+ grid: {
+ top: '10%',
+ left: '7%',
+ right: '2%',
+ bottom: '10%'
+ },
+ color: ['#003366', '#006699', '#4cabce', '#e5323e'],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['涓婂崐骞撮噾棰�', '涓婂崐骞存寚鏍�', '涓嬪崐骞撮噾棰�', '涓嬪崐骞存寚鏍�']
+ },
+ toolbox: {
+ show: false,
+ orient: 'vertical',
+ left: 'right',
+ top: 'center',
+ feature: {
+ mark: {show: true},
+ dataView: {show: true, readOnly: false},
+ magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {show: false},
+ data: ['杩熸枃鍔�', '钁ｆ�濆饯', '寮犻槼']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: '涓婂崐骞撮噾棰�',
+ type: 'bar',
+ barGap: 0,
+ label: labelOption,
+ data: [12, 12, 12]
+ },
+ {
+ name: '涓婂崐骞存寚鏍�',
+ type: 'bar',
+ label: labelOption,
+ data: [20, 20, 20]
+ },
+ {
+ name: '涓嬪崐骞撮噾棰�',
+ type: 'bar',
+ label: labelOption,
+ data: [28, 28, 28]
+ },
+ {
+ name: '涓嬪崐骞存寚鏍�',
+ type: 'bar',
+ label: labelOption,
+ data: [40, 40, 40]
+ }
+ ]
+ });
+ }
+
+
+
+
+ },
}
</script>
@@ -323,6 +851,24 @@
.class_mine .el-card__body {
padding-top: 10px;
}
+
+ .card1 .el-tabs__item {
+ height: 30px;
+ line-height: 30px;
+ }
+ .card1 .el-tabs__header {
+ margin: 0 0 5px;
+ width: 75%;
+ }
+ .card1 .el-table thead.is-group th {
+ background: #fff;
+ }
+
+ .card1 .z_tab_div {
+ border: 1px solid #E4E7ED;
+ height: 25vh;
+ overflow-y: auto;
+ }
.card1 .grid-content {
min-height: 20px;
}
--
Gitblit v1.8.0