manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/earning.vue

<template>
        <div :style="'padding:10px;background:#f7f7f7;min-height:'+tableHeight+'px;'">
        <div style="margin: 0 auto;width:1120px;">
            <el-row :gutter="10">
            <el-col :span="24">    
            <div class="box" style="height:650px;">
                <div >
                    <div class="lableTxt">项目利润快照<el-button type="default" size="small" style="float:right;margin-left:10px;" @click="cancelDelete" v-if="deleteTxt == '确认删除'">取消操作</el-button><el-button type="default" size="small" style="float:right;" @click="showDeleteBox">{{deleteTxt}}</el-button></div>
                    <el-divider></el-divider>
                    <!--利润率列表-->
                    <el-table :data="list" highlight-current-row v-loading="listLoading" max-height="300" :height="300" style="width: 100%;" @selection-change="handleSelectionChange">
                        <el-table-column prop="indate" label="校准日期"  ></el-table-column>
                        <el-table-column prop="profit" align="right" >
                            <template slot="header">
                               <span>利润</span>
                               <el-popover placement="top" width="200" trigger="hover" content="利润 = (合同金额 - 总成本)">
                                   <i class="el-icon-question" slot="reference" />
                               </el-popover>
                            </template>
                            <template slot-scope="scope" >
                               ￥{{scope.row.profit | numberToCurrency}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="profitPercent" label="利润率B"  align="right">
                            <template slot="header">
                               <span>利润率</span>
                               <el-popover placement="top" width="350" trigger="hover" content="利润率 = (合同金额 - 总成本)/合同金额">
                                   <i class="el-icon-question" slot="reference" />
                               </el-popover>
                            </template>
                            <template slot-scope="scope">
                                {{scope.row.profitPercent| numberToCurrency}}%
                            </template>
                        </el-table-column>
                        
                        <el-table-column prop="contractAmount" label="合同金额" width="150" align="right">
                            <template slot-scope="scope">
                               <span >￥{{scope.row.contractAmount | numberToCurrency}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="基线成本" align="center">
                            <el-table-column v-for="item in costFields" :prop="contractAmount" :label="item.baseName" :key="item.id" align="right">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.costList.filter(c=>c.baseId == item.baseId)[0]">
                                        ￥{{scope.row.costList.filter(c=>c.baseId == item.baseId)[0].baseAmount | numberToCurrency}}
                                    </span>
                                <!-- ￥{{scope.row.costList.filter(c=>c.baseId == item.baseId)[0].baseAmount | numberToCurrency}} -->
                                </template>
                            </el-table-column>
<!-- 
                            <el-table-column prop="baseMan" label="人员成本">
                                <template slot-scope="scope">
                                ￥{{scope.row.baseMan | numberToCurrency}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="baseFee" label="费用">
                                <template slot-scope="scope">
                                ￥{{scope.row.baseFee | numberToCurrency}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="baseOutsourcing" label="外包费用">
                                <template slot-scope="scope">
                                ￥{{scope.row.baseOutsourcing | numberToCurrency}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="baseRisk1" label="风险预留金额1" width="150">
                                <template slot-scope="scope">
                                ￥{{scope.row.baseRisk1 | numberToCurrency}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="baseRisk2" label="风险预留金额2" width="150">
                                <template slot-scope="scope">
                                ￥{{scope.row.baseRisk2 | numberToCurrency}}
                                </template>
                            </el-table-column> -->
                            
                            
                        </el-table-column>
                        <el-table-column  label="备注"  prop="remark">
                            <template slot-scope="scope">
                                
                                    <div style="font-size:10px;overflow:hidden;width:100px;height:25px;">
                                        <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start">
                                        <span>{{scope.row.remark}}</span>
                                        </el-tooltip>
                                    </div>
                                
                            </template>
                        </el-table-column>
                        <el-table-column  label="选择" width="55" type="selection" v-if="deleteTxt == '确认删除'">
                                
                        </el-table-column>
                    </el-table>

                    <el-divider ></el-divider>
                    <!--图形显示 -->
                    <div id="chartPanel" style="height: 300px;width: 1100px;"></div>
                </div>
            </div>
            </el-col>
            </el-row>
        </div>
        
    </div>
</template>
<style scoped>
#executorPanel {
        display: inline-block;
        width: 100%; 
    }  
.el-divider--horizontal {
    margin: 10px 0;
    height: 0.5px;
}
.box {
    background:#fff;border: 1px solid #eeeeee;border-radius:5px;padding:10px;
    height:303.7px;margin-top:10px;
}
.info span {
    color:#303133;
}
.gray_label {
    color:#999 !important;
}

.el-row {
    margin-top:10px;
}
.lableTxt {
    color:#666;
}

</style>
<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                costFields:[],
                selectionArray:[],
                deleteTxt:"删除记录",
                yList3:[],
                yList2:[],
                yList1:[],
                xList:[],
                list:[],
                profitChart:null,
                pVisible:false,
                taskSum:{},
                users:[],
                importanceList:[{id:1,label:'一般'},{id:2,label:'紧急'},{id:3,label:'重要'},{id:4,label:'重要且紧急'}],
                //1-一般,2-紧急,3-重要,4-重要且紧急
                levelTxt:["全部","一般","紧急","重要","重要且紧急"],
                //1-进行中,2-已完成,3-已撤销
                statusTxt: ["全部","进行中","已完成","已撤销"],
                addFolderDialog: false,
                upLoading:false,
                user: JSON.parse(sessionStorage.getItem("user")),
                addLoading: false,
                curProjectId:null,
                title: "",
                
            };
        },
        filters: {
            numberToCurrency(value) {
                console.log('earning numberToCurrency='+value);
                if (!value) return '0.00'
                value = value.toFixed(2)
                const intPart = Math.trunc(value)
                const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
                let floatPart = '.00'
                const valueArray = value.toString().split('.')
                if (valueArray.length === 2) { // 有小数部分
                floatPart = valueArray[1].toString() // 取得小数部分
                return intPartFormat + '.' + floatPart
                }
                return intPartFormat + floatPart
            }
        },
        methods: {
            handleSelectionChange(value) {
                this.selectionArray = value;
                console.log(this.selectionArray);
            },
            cancelDelete() {
                this.deleteTxt = "删除记录";
            },
            showDeleteBox() {
                if (this.deleteTxt == '删除记录') {
                    this.deleteTxt = "确认删除";
                } else {
                    if (this.selectionArray.length == 0) {
                        this.$message({
                            message: '请先选择要删除的记录',
                            type: "error"
                        });
                        return;
                    }
                    
                    this.$confirm("确定要删除该记录吗吗?","删除记录", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        //调接口删除
                        this.listLoading = true;
                        var ids = '';
                        this.deleteTxt = "删除记录";
                        for (var i=0;i<this.selectionArray.length; i++) {
                            ids += this.selectionArray[i].id+',';
                        }
                        this.http.post('/earning-snapshot/delete',{ 
                            ids: ids, projectId:this.curProjectId
                        },
                        res => {
                            this.listLoading = false;
                            if (res.code == "ok") {
                                this.getProfitSnapshot();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.listLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                            }
                        );
                    }
                    );
                }

            },
            getProfitSnapshot() {
                let _this = this;
                this.xList = [];
                this.yList1 = [];
                this.http.post('/earning-snapshot/list', {projectId: this.curProjectId},
                res => {
                    if (res.code == "ok") {
                        var list = JSON.parse(JSON.stringify(res.data)).reverse();
                        if (list.length > 0) {
                            this.costFields = list[0].costList;
                        }
                        _this.list = res.data;
                        for (var m=0;m<list.length; m++) {
                            this.xList.push(list[m].indate);
                            this.yList1.push(list[m].profitPercent);
                        }
                        //图表展示
                        var myChart = echarts.init(document.getElementById("chartPanel"));
                        this.profitChart = myChart;
                        console.log("mychart",myChart);
                        myChart.setOption({
                            title: {
                                textStyle: {
                                    color: "#666666",
                                    fontSize: 18,
                                    fontWeight: 'normal',
                                 },
                              text: list.length == 0?"暂无数据":"利润率趋势图",
                              left: list.length == 0?"center":"left",
                              top: list.length == 0?"center":"left"
                            },
                            toolbox: {
                                show: true,
                                feature:{
                                    saveAsImage:{
                                        show:true
                                    },
                                }
                            },
                            tooltip:{
                               trigger: 'axis'
                            },
                            legend: {
                                data: ['利润率(%)']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: this.xList
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series : [
                                {
                                    name: '利润率(%)',
                                    type: 'line',
                                    stack: '百分比',
                                    data: this.yList1
                                },
                                
                            ]
                        },{notMerge: true})
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            
            refreshPage() {
                this.curProjectId = parseInt(this.$route.params.id);
                this.getProfitSnapshot();
            }
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 160;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 160;
            };
        },
        mounted() {
            this.curProjectId = parseInt(this.$route.params.id);
            // var _this = this;
            var that = this
            console.log("this",this)
            window.addEventListener("resize", function() {
                // _this.profitChart.resize();
                // that.profitChart.resize(); 
            });
            this.getProfitSnapshot(); // 调用图表方法
        }
    };
</script>

<style scoped>
</style>