{"version":3,"sources":["webpack:///./src/components/EchartOrderData.vue?3705","webpack:///src/components/EchartOrderData.vue","webpack:///./src/components/EchartOrderData.vue?ad4d","webpack:///./src/components/EchartOrderData.vue","webpack:///./src/components/EchartOrderData.vue?9a26","webpack:///./src/components/EchartOrderData.vue?4ea9","webpack:///./src/components/EchartOrderData.vue?1a46"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticStyle","ref","staticClass","_v","_e","staticRenderFns","name","props","data","type","default","showDataTab","timeType","curOrderInfo","thisEchart","colors","xarrs","yarrs","noChartData","watch","mounted","methods","handleData","initEcharts","series","xAxisData","el","filter","x","color","grid","tooltip","trigger","axisPointer","formatter","str","nbhd","planNbhd","bd","validDeviceNum","targetFlowNum","realFlowNum","realPlayCount","backgroundColor","textStyle","padding","xAxis","axisLine","axisTick","splitLine","yAxis","window","component","content","__esModule","module","i","locals","exports","add","___CSS_LOADER_API_IMPORT___","push"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,CAAC,MAAQ,OAAO,OAAS,OAAO,SAAW,aAAa,CAACF,EAAG,MAAM,CAACG,IAAI,UAAUC,YAAY,SAASF,YAAY,CAAC,MAAQ,OAAO,OAAS,UAAWN,EAAe,YAAEI,EAAG,MAAM,CAACI,YAAY,QAAQ,CAACR,EAAIS,GAAG,UAAUT,EAAIU,QAC7UC,EAAkB,G,qBCQR,GACdC,uBACAC,OACAC,MACAC,WACAC,UACA,WAGAC,aACAF,YACAC,qBAEAE,UACAH,YACAC,qBAEAG,iBAEAL,OACA,OACAM,gBACAC,qDACAC,cACAC,sBACAC,iBAGAC,OACAX,OACA,wBAGA,OAFA,6BACA,qBAGA,oBACA,kBACA,oBAEAG,eACA,qBAGAS,UACA,6CACA,kBACA,oBAEAC,SACAC,aACA,mBACA,2BACA,sEACA,uCACA,sBACA,sBACA,yBACA,yBAEA,gDAGAC,cAEA,MADA,wBAEA,mCAEAC,EADA,uBACAA,qCAEAA,2BAEA,gCACA,iCACA,eACA,qCACA,sBACAC,6DAIAD,WACAA,UACA,6BACA,QACA,oCAMA,OALA,0CACAE,2CACAA,4BACAA,eACAA,MACA,EACC,MAAD,KACAC,OAAAC,OAEA,SACAC,oCACAC,wDACAC,SACAC,eACAC,sEACAC,cACA,kCACA,yDACA,SACA,kBACAC,WACAA,kCAEAA,WACAA,iBAEA,mBACA,wBAEA,kEACA,0DAQA,OAPAA,kDAC4CC,KAAQC,gDACRC,EAAGC,gBAA/C,6LAC0FD,EAAGE,eAA7F,6IAC4FF,EAAGG,aAA/F,2FAC4CH,EAAGI,eAA/C,sEAEA,EACC,OAAD,qBACAP,+FACA,GACA,IAEAQ,oCACAC,qCACAC,YAEAC,OACArC,gBAEAD,OACAuC,0DACAC,oCACAC,+DAEAC,OACAzC,aACAsC,6DACAE,8DACAD,qCAEAxB,UAEA,6BAEA2B,qBACA,6BCjKyV,I,wBCQrVC,EAAY,eACd,EACA3D,EACAY,GACA,EACA,KACA,WACA,MAIa,aAAA+C,E,8BChBf,IAAIC,EAAU,EAAQ,QACnBA,EAAQC,aAAYD,EAAUA,EAAQ3C,SACnB,kBAAZ2C,IAAsBA,EAAU,CAAC,CAACE,EAAOC,EAAIH,EAAS,MAC7DA,EAAQI,SAAQF,EAAOG,QAAUL,EAAQI,QAE5C,IAAIE,EAAM,EAAQ,QAA+DjD,QACpEiD,EAAI,WAAYN,GAAS,EAAM,CAAC,WAAY,EAAM,YAAa,K,qBCR5E,IAAIO,EAA8B,EAAQ,QAC1CF,EAAUE,GAA4B,GAEtCF,EAAQG,KAAK,CAACN,EAAOC,EAAI,wKAAyK,KAElMD,EAAOG,QAAUA,G,kCCNjB","file":"static/js/chunk-7a7f5567.c899add4.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"100%\",\"position\":\"relative\"}},[_c('div',{ref:\"barLine\",staticClass:\"eachrt\",staticStyle:{\"width\":\"100%\",\"height\":\"100%\"}}),(_vm.noChartData)?_c('div',{staticClass:\"none\"},[_vm._v(\"暂无数据\")]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template lang=\"pug\">\n    div(style=\"width: 100%;height: 100%;position: relative;\")\n        .eachrt(style=\"width: 100%;height: 100%;\" ref=\"barLine\")\n        .none(v-if=\"noChartData\") 暂无数据\n</template>\n\n<script>\nimport echarts from 'echarts'\n\nexport default {\n    name: 'EchartOrderData',\n    props: {\n        data: {\n            type: Array,\n            default () {\n                return []\n            }\n        },\n        showDataTab: {\n            type: Number,\n            default () { return 0 }\n        },\n        timeType: {\n            type: Number,\n            default () { return 0 }\n        },\n        curOrderInfo : {}\n    },\n    data () {\n        return {\n            thisEchart: null,\n            colors: [['#FF3973', '#6296FF', '#E9E9E9'], ['#6296FF']],\n            xarrs: [[], []],\n            yarrs: [[[], [], []], []],\n            noChartData: false\n        }\n    },\n    watch: {\n        data () {\n            if (this.data.length === 0) {\n                this.thisEchart.clear()\n                this.noChartData = true\n                return\n            }\n            this.noChartData = false\n            this.handleData()\n            this.initEcharts()\n        },\n        showDataTab (v) {\n            this.initEcharts()\n        }\n    },\n    mounted () {\n        this.thisEchart = echarts.init(this.$refs.barLine)\n        this.handleData()\n        this.initEcharts()\n    },\n    methods: {\n        handleData () {\n            this.xarrs = [[], []]\n            this.yarrs = [[[], [], []], []]\n            this.data.forEach(({ date, timeSegmentNameOfWeb, baseData }) => {\n                const { targetFlowNum, realFlowNum } = baseData\n                this.xarrs[0].push(date) // 分天X轴\n                this.xarrs[1].push(timeSegmentNameOfWeb) // 分时X轴\n                this.yarrs[0][0].push(targetFlowNum) // 广告流量-目标流量\n                this.yarrs[0][1].push(realFlowNum) // 广告流量-触达流量\n                // this.yarrs[0][2].push(planFlowNum) // 广告流量-计划流量\n                this.yarrs[1].push(realFlowNum ? (targetFlowNum / realFlowNum * 100).toFixed(2) : 0) // 匹配率\n            })\n        },\n        initEcharts () {\n            this.thisEchart.clear()\n            let series\n            let seriesData = this.yarrs[this.showDataTab]\n            if (this.showDataTab - 0 === 0) {\n                series = seriesData.map(d => ({ data: d, type: 'line', z: 3 }))\n            } else {\n                series = [{ type: 'line', data: seriesData, z: 3 }]\n            }\n            let xAxisData = this.xarrs[this.timeType]\n            if (this.timeType == 0 && xAxisData.length < 7) { // 分天 timeType == 0 的时候 X 轴不足7个则补够7个\n                let len = xAxisData.length\n                let last = len === 0 ? new Date() - 24 * 3600000 : xAxisData[xAxisData.length - 1]\n                for (let i = 0; i < 7 - len; i++) {\n                    xAxisData.push(this.formatDate(new Date(last).getTime() + (i + 1) * 24 * 3600000))\n                }\n            }\n            // X轴补全七个之后series数据可能不足,需合并一个数据组再原来的基础上补0\n            series = series.concat(\n                series.map(ele => {\n                    let len = xAxisData.length - ele.data.length\n                    if (len > 0) {\n                        let el = JSON.parse(JSON.stringify(ele))\n                        if (ele.data && ele.data.length === 1) ele.data.push(0) // 防止只有一个数据时只显示一个点\n                        el.data = el.data.concat(new Array(len).fill(0))\n                        el.lineStyle = { type: 'dashed' } // 设置成虚线\n                        el.color = '#ccc'\n                        el.z = 2 // 层级设为 2 比正常的低\n                        return el\n                    } else return ''\n                }).filter(x => x)\n            )\n            const option = {\n                color: this.colors[this.showDataTab],\n                grid: { containLabel: true, left: '0%', right: '0%', bottom: '8%' },\n                tooltip: {\n                    trigger: 'axis',\n                    axisPointer: { type: 'shadow', shadowStyle: { color: 'rgba(40,39,41,0.05)' } },\n                    formatter: p => {\n                        const item = this.data[p[0].dataIndex]\n                        if (!item || item.isShort) return `该时段无订单<br/>投放时间：${p[0].axisValue}`\n                        let str = ''\n                        if (this.timeType == 1) {\n                            str += '投放时段：'\n                            str += item.timeSegmentNameOfWeb || '--'\n                        } else {\n                            str += '投放时间：'\n                            str += item.date || '--'\n                        }\n                        const bd = item.baseData\n                        if (this.showDataTab == 0) {\n                            // <br/>计划流量：${bd.planFlowNum ? (bd.planFlowNum - 0).toLocaleString() : 0}\n                            const nbhd = `${bd.validNbhdNum ? (bd.validNbhdNum - 0).toLocaleString() : 0}`\n                            const planNbhd = `${bd.planNbhdNum?(bd.planNbhdNum - 0).toLocaleString():0}`\n                            str += `\n                                <br/>覆盖小区：${nbhd}/${planNbhd}\n                                <br/>覆盖屏幕：${bd.validDeviceNum ? (bd.validDeviceNum - 0).toLocaleString() : 0}/${bd.planDeviceNum ? (bd.planDeviceNum - 0).toLocaleString() : 0}\n                                <br/><span style=\"color: #FF6A95;font-weight: bold;\">目标：${bd.targetFlowNum ? (bd.targetFlowNum - 0).toLocaleString() : 0}人次</span>\n                                <br/><span style=\"color: #8BB2FF;font-weight: bold;\">触达流量：${bd.realFlowNum ? (bd.realFlowNum - 0).toLocaleString() : 0}人次</span>\n                                <br/>播放次数：${bd.realPlayCount ? (bd.realPlayCount - 0).toLocaleString() : 0}\n                            `\n                            return str\n                        } else if (this.showDataTab == 1) {\n                            str += bd.realFlowNum ? `<br/>有效匹配：${(bd.targetFlowNum/bd.realFlowNum*100).toFixed(2)}%` : '<br/>有效匹配：--'\n                            return str\n                        } else return ''\n                    },\n                    backgroundColor: 'rgba(40,39,41,.8)',\n                    textStyle: { color: '#fff', fontSize: 12 },\n                    padding: 10\n                },\n                xAxis: {\n                    type: 'category',\n                    // boundaryGap: false, // 是否在刻度位置展示\n                    data: xAxisData,\n                    axisLine: { show: false, lineStyle: { color: '#999', type: 'dashed' } },\n                    axisTick: { lineStyle: { color: '#FFF' } },\n                    splitLine: { show: true, lineStyle: { color: '#e9e9e9', type: 'dashed' } }\n                },\n                yAxis: {\n                    type: 'value',\n                    axisLine: { show: false, lineStyle: { color: '#FF3973', type: 'dashed' } },\n                    splitLine: { show: true, lineStyle: { color: '#e9e9e9', type: 'dashed' } },\n                    axisTick: { lineStyle: { color: '#FFF' } }\n                },\n                series // 展示所有数据\n            }\n            this.thisEchart.setOption(option)\n\n            window.onresize = () => {\n                this.thisEchart.resize()\n            }\n        }\n    }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.none {\n    width: 100%;\n    height: calc(100% - 20px);\n    line-height: 100%;\n    position: absolute;\n    left: 0;\n    top: 30px;\n    padding-top: 150px;\n    background: #f5f5f5;\n    text-align: center;\n}\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EchartOrderData.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EchartOrderData.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./EchartOrderData.vue?vue&type=template&id=004b5b1f&scoped=true&lang=pug&\"\nimport script from \"./EchartOrderData.vue?vue&type=script&lang=js&\"\nexport * from \"./EchartOrderData.vue?vue&type=script&lang=js&\"\nimport style0 from \"./EchartOrderData.vue?vue&type=style&index=0&id=004b5b1f&prod&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"004b5b1f\",\n  null\n  \n)\n\nexport default component.exports","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EchartOrderData.vue?vue&type=style&index=0&id=004b5b1f&prod&lang=scss&scoped=true&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"84d256f8\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".none[data-v-004b5b1f]{width:100%;height:calc(100% - 20px);line-height:100%;position:absolute;left:0;top:30px;padding-top:150px;background:#f5f5f5;text-align:center}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","export * from \"-!../../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EchartOrderData.vue?vue&type=style&index=0&id=004b5b1f&prod&lang=scss&scoped=true&\""],"sourceRoot":""}