{"version":3,"sources":["webpack:///src/views/charge/page/src/views/charge/page/chargeForm.vue"],"names":[],"mappings":"AA+JA,2BACA,WACA,CACA,+BACA,WAAA,CACA,YAAA,CACA,gBAAA,CACA,oDAAA,CACA,uBACA,CACA,wBACA,cAAA,CACA,UAAA,CACA,eAAA,CACA,iBACA,CACA,8BACA,eACA,CACA,iCACA,eAAA,CACA,cAAA,CACA,aAAA,CACA,iBAAA,CACA,qBAAA,CACA,iBACA,CACA,2BACA,eAAA,CACA,cAAA,CACA,UAAA,CACA,iBAAA,CACA,UACA","file":"chunk-1bbe8318.272d4ee8.css","sourcesContent":["<template>\n    \n    <div class=\"costCard\">\n        <div class=\"main-titel\">\n                <span>财务报表</span>\n            </div>\n        <el-card class=\"box-card\">\n            <el-row>\n                <el-col :span=\"8\"\n                    ><div class=\"lastMonthCost\">\n                        <!-- <el-card class=\"box-card\" shadow=\"never\"> -->\n                        <div style=\"fontSize:22px;color:#333333;margin:10px;fontWeight:700\">上月物业缴费情况</div>\n                        <div class=\"lastmonthpay\">\n                            <div style=\"fontSize:16px;color:white;paddingTop:20px;paddingLeft:20px\">上月已缴金额（元）</div>\n                            <div class=\"price\">{{ LastMonthPayCost.lastMonthPayPrice }}</div>\n                        </div>\n                        <ul class=\"lastmonthul\">\n                            <li style=\"borderColor:#5B8FF9\">未缴累计金额（元）<span class=\"costtips\">{{LastMonthPayCost.lastMonthUnpaidPrice}}</span></li>\n                            <li style=\"borderColor:#FFD203\">应缴纳费用（元）<span class=\"costtips\">{{LastMonthPayCost.lastMonthShouldPayPrice}}</span></li>\n                            <li style=\"borderColor:#FB4702\">未缴累计户数（户）<span class=\"costtips\">{{LastMonthPayCost.lastMonthUnpaidHouseholds}}</span></li>\n                        </ul>\n                        <!-- </el-card> -->\n                    </div></el-col\n                >\n                <el-col :span=\"16\"\n                    ><div\n                        id=\"myChart\"\n                        :style=\"{\n                            width: '629px',\n                            height: '350px'\n                        }\"\n                    ></div\n                ></el-col>\n            </el-row>\n        </el-card>\n    </div>\n</template>\n\n<script>\nimport {\n    findLastMonthPayCostDetail,\n    findPaymentStatistics\n} from '@/api/company'\nexport default {\n    data() {\n        return {\n            LastMonthPayCost: {\n                lastMonthPayPrice: null, //上月已缴\n                lastMonthUnpaidPrice: null, //上月未交\n                lastMonthShouldPayPrice: null, //上月应缴\n                lastMonthUnpaidHouseholds: null //上月未缴费住户数\n            },\n            month: [], //月份\n            shouldPayPrice: [], //shouldPayPrice应缴纳\n            payPrice: [] //payPrice已缴纳\n        }\n    },\n    mounted() {\n        this.getData()\n    },\n    methods: {\n        drawLine() {\n            // 基于准备好的dom，初始化echarts实例\n            console.log(this.month)\n            let myChart = this.$echarts.init(document.getElementById('myChart'))\n            // 绘制图表\n            myChart.setOption(\n                {\n                    title: {\n                        text: '半年内物业缴费统计',\n                        link: 'http://localhost:3333/?#/company/orgManagement'\n                    },\n                    tooltip: {},\n                    color: ['#7BB0FF', '#FFD27B'],\n                    legend: {\n                        y: 'top',\n                        data: ['应缴纳费用', '实际缴纳费用']\n                    },\n                    xAxis: {\n                        type: 'category',\n                        axisTick: {\n                            show: false //隐藏刻度线\n                        },\n                        axisLine: {\n                            //隐藏y轴\n                            show: false\n                        },\n                        axisLabel: {\n                            //横坐标全部显示 不隔开显示\n                            interval: 0\n                        },\n                        data: this.month\n                    },\n                    yAxis: {\n                        nameTextStyle: {\n                            padding: [0, 0, 0, 30] // 四个数字分别为上右下左与原位置距离\n                        },\n                        splitArea: {\n                            //隐藏背景网格区域\n                            show: false\n                        },\n                        splitLine: {\n                            //隐藏背景网格线\n                            show: false\n                        },\n                        axisTick: {\n                            show: false //隐藏刻度线\n                        },\n                        axisLine: {\n                            //隐藏y轴\n                            show: false\n                        }\n                    },\n                    series: [\n                        {\n                            name: '应缴纳费用',\n                            type: 'bar', //柱状图bar 饼状图pie 折线图line\n                            data: this.shouldPayPrice\n                        },\n                        {\n                            name: '实际缴纳费用',\n                            type: 'bar', //柱状图bar 饼状图pie 折线图line\n                            data: this.payPrice\n                        }\n                    ]\n                },\n                true\n            )\n        },\n        getData() {\n            findLastMonthPayCostDetail().then((res) => {\n                console.log(res.data)\n                this.LastMonthPayCost.lastMonthPayPrice =\n                    res.data.lastMonthPayPrice\n                this.LastMonthPayCost.lastMonthUnpaidPrice =\n                    res.data.lastMonthUnpaidPrice\n                this.LastMonthPayCost.lastMonthShouldPayPrice =\n                    res.data.lastMonthShouldPayPrice\n                this.LastMonthPayCost.lastMonthUnpaidHouseholds =\n                    res.data.lastMonthUnpaidHouseholds\n            })\n            findPaymentStatistics().then((res) => {\n                console.log(res.data)\n                //months payPrice已缴纳 shouldPayPrice应缴纳 years\n                res.data.forEach((element) => {\n                    this.payPrice.push(element.payPrice)\n                    this.shouldPayPrice.push(element.shouldPayPrice)\n                    let obj = element.years + '年' + element.months + '月'\n                    this.month.push(obj)\n                })\n                console.log(this.shouldPayPrice)\n                this.drawLine()\n            })\n        }\n    }\n}\n</script>\n\n<style scoped>\n.costCard{\n    margin:20px\n}\n.lastmonthpay{\n    width: 309px;\n    height: 106px;\n    line-height: 33px;\n    background:url(../../../assets/images/company/MaskGroup.png) REPEAT;\n    mix-blend-mode: multiply;\n}\n.price{\n    font-size: 30px;\n    color: #ffffff;\n    font-weight: 700;\n    padding-left:20px ;\n}\n.lastmonthul{\n    margin-top:30px ;\n}\n.lastmonthul li{\n    margin-top:20px ;\n    font-size: 16px;\n    color: #7D94AE;\n    padding-left:10px;\n    border-left:8px solid;\n    position: relative;\n}\n.costtips{\n    font-weight: 700;\n    font-size: 20px;\n    color: #333333;\n    position: absolute;\n    right: 50px;\n}\n</style>>"]}