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 | 948 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 920 insertions(+), 28 deletions(-)
diff --git a/src/views/Mine.vue b/src/views/Mine.vue
index 5f39f0e..5e963e8 100644
--- a/src/views/Mine.vue
+++ b/src/views/Mine.vue
@@ -1,40 +1,843 @@
<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" v-if="isRootUser">
+ <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="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">
+ <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 {
+ 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: [],
+ activeTableData: {},
+ sum_count:0,
+ card3Count: {},
+ typeChart:undefined,
+ }
+ },
+ created() {
+ 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) {
+ 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').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: '涓嬪崐骞�'}]
+ },
+
+ {
+ 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: '涓婂崐骞�'}]
+ },
+
+ {
+ 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>
<style>
+ .clearfix{
+ text-align: left;
+ }
.grid-content {
border-radius: 4px;
min-height: 36px;
@@ -45,4 +848,93 @@
.float-left{
float: left;
}
+ .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;
+ }
+ .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