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/components/finance/collectionStatistics.vue | 14 src/views/Mine.vue | 756 ++++++++++++++++++++++++++++++++++++++++++++++++++-------- src/views/Home.vue | 2 3 files changed, 659 insertions(+), 113 deletions(-) diff --git a/src/components/finance/collectionStatistics.vue b/src/components/finance/collectionStatistics.vue index 679a3e7..965656b 100644 --- a/src/components/finance/collectionStatistics.vue +++ b/src/components/finance/collectionStatistics.vue @@ -50,6 +50,13 @@ :header-cell-style="{'width': '100%', 'text-align': 'center'}" :row-class-name="tableRowClassName"> <!-- <el-table-column type="index" width="50"> </el-table-column> --> + <el-table-column label="鎿嶄綔" align="center"><!-- fixed="right" --> + <template v-slot="{row}"> + <el-row> + <el-button type="primary" size="mini" @click="showDetail(row)">璇︽儏</el-button> + </el-row> + </template> + </el-table-column> <el-table-column prop="code" label="椤圭洰鍙�" width="120" show-overflow-tooltip></el-table-column> <el-table-column prop="name" label="椤圭洰鍚嶇О" width="120" show-overflow-tooltip></el-table-column> <el-table-column prop="status" label="褰撳墠鐘舵��" width="100" align="center" :formatter="status_"></el-table-column> @@ -64,13 +71,6 @@ <el-table-column prop="endTime" label="缁撴潫鏃堕棿" width="100" align="center" :formatter="dateFormat_" ></el-table-column> <el-table-column prop="desp" label="椤圭洰鎻忚堪" show-overflow-tooltip></el-table-column> - <el-table-column fixed="right" label="鎿嶄綔" align="center"> - <template v-slot="{row}"> - <el-row> - <el-button type="primary" size="mini" @click="showDetail(row)">璇︽儏</el-button> - </el-row> - </template> - </el-table-column> </el-table> <div style="text-align: right; background-color: #fff;"> <el-pagination diff --git a/src/views/Home.vue b/src/views/Home.vue index d566a4f..52881b2 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -6,7 +6,7 @@ <el-menu class="el-menu-vertical-demo" :unique-opened="true" - :default-active="defaultActive" + :default-active="defaultActive" @select ="menuSelect" @open ="menuSelect" @close ="menuSelect" 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: "钁f�濆饯", 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: ['杩熸枃鍔�', '钁f�濆饯', '寮犻槼'] + } + ], + 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