123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 |
- <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>
|