2020-11-13

bob

2020-11-25 84326b11401f217cd483d13bc72cec4ffd5da7ce

2020-11-13

 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 

 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"

 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;
    }