|
@@ -0,0 +1,242 @@
|
|
|
+<template>
|
|
|
+ <div class="accountReport">
|
|
|
+ <div class="optionLine">
|
|
|
+
|
|
|
+ <span>项目选择:</span>
|
|
|
+ <a-tree-select
|
|
|
+ v-model="treeValue"
|
|
|
+ style="width: 50%"
|
|
|
+ :tree-data="treeData"
|
|
|
+ tree-checkable
|
|
|
+ :show-checked-strategy="SHOW_PARENT"
|
|
|
+ searchPlaceholder="请选择项目和账户"
|
|
|
+ :allowClear="true"
|
|
|
+ @change="treeChange"
|
|
|
+ />
|
|
|
+
|
|
|
+
|
|
|
+ <div style="float:right" @click="opendate">
|
|
|
+ <DatePicker :openOptions='openOptions' :left=left />
|
|
|
+ </div>
|
|
|
+ <div class="optionTow">
|
|
|
+ <div class="optItem">
|
|
|
+ <span>折扣:</span>
|
|
|
+ <a-input-number :min="0" :max="10" :step="0.1" v-model="discount" />
|
|
|
+ </div>
|
|
|
+ <div class="optItem">
|
|
|
+ <span>返点比例:</span>
|
|
|
+ <a-input-number :min="0" :max="10" :step="0.1" v-model="rebateProp" />
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <a-button type="primary" @click="searchgetData" :disabled='searchDisabled' class="mybtn">查询</a-button>
|
|
|
+ <a-button type="primary" @click="refreshgetData" :disabled='refreshDisabled' class="mybtn">刷新</a-button>
|
|
|
+ <a-button type="primary" @click="resetgetData" :disabled='resetDisabled' class="mybtn">重置</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="show">
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import moment from 'moment';
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
+import { TreeSelect } from 'ant-design-vue';
|
|
|
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
|
|
+import DatePicker from '@/components/DatePicker.vue'
|
|
|
+// 引入基本模板
|
|
|
+var echarts = require('echarts')
|
|
|
+// 引入柱状图组件
|
|
|
+require('echarts/lib/chart/bar')
|
|
|
+require('echarts/lib/chart/pie')
|
|
|
+require('echarts/lib/chart/line')
|
|
|
+// 引入提示框和title组件
|
|
|
+require('echarts/lib/component/tooltip')
|
|
|
+require('echarts/lib/component/title')
|
|
|
+require('echarts/lib/component/graphic')
|
|
|
+require('echarts/lib/component/toolbox')
|
|
|
+require('echarts/lib/component/legend')
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ DatePicker,
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ left:0,
|
|
|
+ //treeselect的参数
|
|
|
+ treeValue: [],
|
|
|
+ treeData: [],
|
|
|
+ SHOW_PARENT,
|
|
|
+ //折扣数值
|
|
|
+ discount:1.0,
|
|
|
+ //返点比例
|
|
|
+ rebateProp:1.0,
|
|
|
+ //日期矿打开
|
|
|
+ openOptions:false,
|
|
|
+ //子元素的数据存储
|
|
|
+
|
|
|
+ type:1,
|
|
|
+ dateValue:[moment(),moment()],
|
|
|
+
|
|
|
+ //处理按钮禁用
|
|
|
+ searchDisabled:false,
|
|
|
+ refreshDisabled:false,
|
|
|
+ resetDisabled:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //项目改变后的事件
|
|
|
+ treeChange(val) {
|
|
|
+ this.projectId = []
|
|
|
+ this.accountName = []
|
|
|
+ console.log(val, this.treeValue)
|
|
|
+ this.treeValue.forEach((item, index) => {
|
|
|
+ if (parseInt(item)) {
|
|
|
+ this.projectId.push(item)
|
|
|
+ } else {
|
|
|
+ this.accountName.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.treeValue.length == 0) {
|
|
|
+ this.optionArr = []
|
|
|
+ }
|
|
|
+ postAction('/pangolin/api/app/list', {
|
|
|
+ projectId: this.projectId,
|
|
|
+ accountName: this.accountName
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.optionArr = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ disabledDate(current) {
|
|
|
+ // console.log(current)
|
|
|
+
|
|
|
+ return current && current > moment().subtract(1, 'day')
|
|
|
+ },
|
|
|
+
|
|
|
+ //查询按钮的事件
|
|
|
+ searchgetData(){
|
|
|
+
|
|
|
+ console.log();
|
|
|
+ this.loading=true;
|
|
|
+ this.searchDisabled=true;
|
|
|
+ // this.HttpPost()
|
|
|
+
|
|
|
+ },
|
|
|
+ //刷新
|
|
|
+ refreshgetData(){
|
|
|
+ this.loading=true;
|
|
|
+ this.refreshDisabled=true;
|
|
|
+ },
|
|
|
+ //重置
|
|
|
+ resetgetData(){
|
|
|
+ this.loading=true;
|
|
|
+ this.resetDisabled=true;
|
|
|
+ },
|
|
|
+ //打开日期框
|
|
|
+ opendate(){
|
|
|
+ this.openOptions=!this.openOptions;
|
|
|
+ // console.log(this.openOptions)
|
|
|
+ },
|
|
|
+
|
|
|
+ HttpPost(params){
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ postAction('/ctop/byteDance/homePage/report/week', {}).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.loading = false
|
|
|
+ this.refreshDisabled=false;
|
|
|
+ this.resetDisabled=false;
|
|
|
+ this.searchDisabled=false;
|
|
|
+ this.cost = res.result.costWeekLink
|
|
|
+ this.click = res.result.clickWeekLink
|
|
|
+ this.showNum = res.result.showNumWeekLink
|
|
|
+ // res.result.top.top7.forEach((element, index) => {
|
|
|
+ // this.topOption.xAxis[0].data.push(element.authName)
|
|
|
+ // this.topOption.series[0].data.push(element.cost)
|
|
|
+ // })
|
|
|
+
|
|
|
+ // for (let [key, value] of Object.entries(res.result.costWeek)) {
|
|
|
+ // this.costOption.xAxis[0].data.push(key)
|
|
|
+ // this.costOption.series[0].data.push(value)
|
|
|
+ // }
|
|
|
+ // for (let [key, value] of Object.entries(res.result.clickWeek)) {
|
|
|
+ // this.clickOption.xAxis[0].data.push(key)
|
|
|
+ // this.clickOption.series[0].data.push(value)
|
|
|
+ // }
|
|
|
+ // for (let [key, value] of Object.entries(res.result.showNumWeek)) {
|
|
|
+ // this.showOption.xAxis[0].data.push(key)
|
|
|
+ // this.showOption.series[0].data.push(value)
|
|
|
+ // }
|
|
|
+
|
|
|
+ // this.getEchartData('topChart', this.topOption)
|
|
|
+ // this.getEchartData('costChart', this.costOption)
|
|
|
+ // this.getEchartData('clickChart', this.clickOption)
|
|
|
+ // this.getEchartData('showChart', this.showOption)
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取echart的值
|
|
|
+ getEchartData(idName, optionName) {
|
|
|
+ const chart = this.$refs[idName]
|
|
|
+ // console.log(chart)
|
|
|
+ if (chart) {
|
|
|
+ const myChart = echarts.init(document.getElementById(idName))
|
|
|
+ myChart.setOption(optionName)
|
|
|
+ window.addEventListener('resize', function() {
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.accountReport {
|
|
|
+ .optionLine {
|
|
|
+ padding: 0 15px;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ // border: 1px solid #ccc;
|
|
|
+
|
|
|
+ .optionTow{
|
|
|
+ margin-top: 15px;
|
|
|
+ position: relative;
|
|
|
+ .optItem{
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 15px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 0px;
|
|
|
+ .mybtn{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 15px 15px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|