accountReport.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <div class="accountReport">
  3. <div class="optionLine">
  4. <span>项目选择:</span>
  5. <a-tree-select
  6. v-model="treeValue"
  7. style="width: 50%"
  8. :tree-data="treeData"
  9. tree-checkable
  10. :show-checked-strategy="SHOW_PARENT"
  11. searchPlaceholder="请选择项目和账户"
  12. :allowClear="true"
  13. @change="treeChange"
  14. />
  15. <div style="float:right" @click="opendate">
  16. <DatePicker :openOptions='openOptions' :left=left />
  17. </div>
  18. <div class="optionTow">
  19. <div class="optItem">
  20. <span>折扣:</span>
  21. <a-input-number :min="0" :max="10" :step="0.1" v-model="discount" />
  22. </div>
  23. <div class="optItem">
  24. <span>返点比例:</span>
  25. <a-input-number :min="0" :max="10" :step="0.1" v-model="rebateProp" />
  26. </div>
  27. <div class="btn">
  28. <a-button type="primary" @click="searchgetData" :disabled='searchDisabled' class="mybtn">查询</a-button>
  29. <a-button type="primary" @click="refreshgetData" :disabled='refreshDisabled' class="mybtn">刷新</a-button>
  30. <a-button type="primary" @click="resetgetData" :disabled='resetDisabled' class="mybtn">重置</a-button>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="show">
  35. </div>
  36. </div>
  37. </template>
  38. <script>
  39. import moment from 'moment';
  40. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  41. import { TreeSelect } from 'ant-design-vue';
  42. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  43. import DatePicker from '@/components/DatePicker.vue'
  44. // 引入基本模板
  45. var echarts = require('echarts')
  46. // 引入柱状图组件
  47. require('echarts/lib/chart/bar')
  48. require('echarts/lib/chart/pie')
  49. require('echarts/lib/chart/line')
  50. // 引入提示框和title组件
  51. require('echarts/lib/component/tooltip')
  52. require('echarts/lib/component/title')
  53. require('echarts/lib/component/graphic')
  54. require('echarts/lib/component/toolbox')
  55. require('echarts/lib/component/legend')
  56. export default {
  57. components:{
  58. DatePicker,
  59. },
  60. data() {
  61. return {
  62. left:0,
  63. //treeselect的参数
  64. treeValue: [],
  65. treeData: [],
  66. SHOW_PARENT,
  67. //折扣数值
  68. discount:1.0,
  69. //返点比例
  70. rebateProp:1.0,
  71. //日期矿打开
  72. openOptions:false,
  73. //子元素的数据存储
  74. type:1,
  75. dateValue:[moment(),moment()],
  76. //处理按钮禁用
  77. searchDisabled:false,
  78. refreshDisabled:false,
  79. resetDisabled:false,
  80. }
  81. },
  82. methods: {
  83. //项目改变后的事件
  84. treeChange(val) {
  85. this.projectId = []
  86. this.accountName = []
  87. console.log(val, this.treeValue)
  88. this.treeValue.forEach((item, index) => {
  89. if (parseInt(item)) {
  90. this.projectId.push(item)
  91. } else {
  92. this.accountName.push(item)
  93. }
  94. })
  95. if (this.treeValue.length == 0) {
  96. this.optionArr = []
  97. }
  98. postAction('/pangolin/api/app/list', {
  99. projectId: this.projectId,
  100. accountName: this.accountName
  101. }).then(res => {
  102. console.log(res)
  103. if (res.success) {
  104. this.optionArr = res.data
  105. }
  106. })
  107. },
  108. disabledDate(current) {
  109. // console.log(current)
  110. return current && current > moment().subtract(1, 'day')
  111. },
  112. //查询按钮的事件
  113. searchgetData(){
  114. console.log();
  115. this.loading=true;
  116. this.searchDisabled=true;
  117. // this.HttpPost()
  118. },
  119. //刷新
  120. refreshgetData(){
  121. this.loading=true;
  122. this.refreshDisabled=true;
  123. },
  124. //重置
  125. resetgetData(){
  126. this.loading=true;
  127. this.resetDisabled=true;
  128. },
  129. //打开日期框
  130. opendate(){
  131. this.openOptions=!this.openOptions;
  132. // console.log(this.openOptions)
  133. },
  134. HttpPost(params){
  135. return new Promise((resolve, reject) => {
  136. postAction('/ctop/byteDance/homePage/report/week', {}).then(res => {
  137. // console.log(res)
  138. if (res.success) {
  139. this.loading = false
  140. this.refreshDisabled=false;
  141. this.resetDisabled=false;
  142. this.searchDisabled=false;
  143. this.cost = res.result.costWeekLink
  144. this.click = res.result.clickWeekLink
  145. this.showNum = res.result.showNumWeekLink
  146. // res.result.top.top7.forEach((element, index) => {
  147. // this.topOption.xAxis[0].data.push(element.authName)
  148. // this.topOption.series[0].data.push(element.cost)
  149. // })
  150. // for (let [key, value] of Object.entries(res.result.costWeek)) {
  151. // this.costOption.xAxis[0].data.push(key)
  152. // this.costOption.series[0].data.push(value)
  153. // }
  154. // for (let [key, value] of Object.entries(res.result.clickWeek)) {
  155. // this.clickOption.xAxis[0].data.push(key)
  156. // this.clickOption.series[0].data.push(value)
  157. // }
  158. // for (let [key, value] of Object.entries(res.result.showNumWeek)) {
  159. // this.showOption.xAxis[0].data.push(key)
  160. // this.showOption.series[0].data.push(value)
  161. // }
  162. // this.getEchartData('topChart', this.topOption)
  163. // this.getEchartData('costChart', this.costOption)
  164. // this.getEchartData('clickChart', this.clickOption)
  165. // this.getEchartData('showChart', this.showOption)
  166. }
  167. })
  168. })
  169. },
  170. //获取echart的值
  171. getEchartData(idName, optionName) {
  172. const chart = this.$refs[idName]
  173. // console.log(chart)
  174. if (chart) {
  175. const myChart = echarts.init(document.getElementById(idName))
  176. myChart.setOption(optionName)
  177. window.addEventListener('resize', function() {
  178. myChart.resize()
  179. })
  180. }
  181. },
  182. }
  183. }
  184. </script>
  185. <style lang="scss" scoped>
  186. .accountReport {
  187. .optionLine {
  188. padding: 0 15px;
  189. position: relative;
  190. margin-top: 20px;
  191. margin-bottom: 15px;
  192. // border: 1px solid #ccc;
  193. .optionTow{
  194. margin-top: 15px;
  195. position: relative;
  196. .optItem{
  197. display: inline-block;
  198. margin-right: 15px;
  199. span {
  200. display: inline-block;
  201. padding: 0 3px;
  202. }
  203. }
  204. }
  205. .btn {
  206. position: absolute;
  207. right: 0px;
  208. top: 0px;
  209. .mybtn{
  210. margin-left: 10px;
  211. }
  212. }
  213. }
  214. .show{
  215. background-color: #fff;
  216. padding: 15px 15px;
  217. }
  218. }
  219. </style>