realTimeData.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. <template>
  2. <div class="realData" ref="chart">
  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. <span>应用选择:</span>
  16. <a-select v-model="defalutAPP" style="width: 150px" @change="APPChange">
  17. <a-select-option value="0">全部</a-select-option>
  18. <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>
  19. </a-select>
  20. <div class="btn">
  21. <a-button type='primary' @click="getData">查询</a-button>
  22. </div>
  23. </div>
  24. <div class="tabchange">
  25. <a-tabs default-active-key="click" @change="callback">
  26. <a-tab-pane key="click" tab="点击数"></a-tab-pane>
  27. <a-tab-pane key="active" tab="激活" force-render></a-tab-pane>
  28. <a-tab-pane key="rate" tab="激活率"></a-tab-pane>
  29. </a-tabs>
  30. </div>
  31. <div id="echart" style="width:100%;height:400px"></div>
  32. <div class="duibishiduan">
  33. <p>
  34. <a-button type="primary" @click="openDate" v-clickoutside="handleClose" >对比时段</a-button>
  35. </p>
  36. <div class="dateDiv">
  37. <a-date-picker @change="dateChange" v-show="dateOpen" :open='dateOpen' :disabled-date="disabledDate" size="small" />
  38. </div>
  39. </div>
  40. <a-table
  41. :columns="columns"
  42. :data-source="dataSource"
  43. tableLayout="auto"
  44. bordered
  45. :pagination="false"
  46. ></a-table>
  47. </div>
  48. </template>
  49. <script>
  50. import moment from 'moment'
  51. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  52. import { TreeSelect } from 'ant-design-vue';
  53. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  54. // 引入基本模板
  55. var echarts = require('echarts')
  56. // 引入柱状图组件
  57. require('echarts/lib/chart/bar')
  58. require('echarts/lib/chart/pie')
  59. require('echarts/lib/chart/line')
  60. // 引入提示框和title组件
  61. require('echarts/lib/component/tooltip')
  62. require('echarts/lib/component/title')
  63. require('echarts/lib/component/graphic')
  64. require('echarts/lib/component/toolbox')
  65. require('echarts/lib/component/legend')
  66. const clickoutside = {
  67. // 初始化指令
  68. bind(el, binding, vnode) {
  69. function documentHandler(e) {
  70. // 这里判断点击的元素是否是本身,是本身,则返回
  71. if (el.contains(e.target)) {
  72. return false
  73. }
  74. // 判断指令中是否绑定了函数
  75. if (binding.expression) {
  76. // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
  77. binding.value(e)
  78. }
  79. }
  80. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  81. el.__vueClickOutside__ = documentHandler
  82. document.addEventListener('click', documentHandler)
  83. },
  84. update() {},
  85. unbind(el, binding) {
  86. // 解除事件监听
  87. document.removeEventListener('click', el.__vueClickOutside__)
  88. delete el.__vueClickOutside__
  89. }
  90. }
  91. let columns = [
  92. {
  93. title: '',
  94. dataIndex: 'hour',
  95. // scopedSlots: { customRender: 'date' },
  96. width:200,
  97. align: 'center'
  98. },
  99. {
  100. title: '今天',
  101. key: 'today',
  102. dataIndex: 'today',
  103. // scopedSlots: { customRender: 'date' },
  104. align: 'center'
  105. },
  106. {
  107. title: '昨天',
  108. key: 'yesterday',
  109. dataIndex: 'yesterday',
  110. // scopedSlots: { customRender: 'date' },
  111. align: 'center'
  112. },
  113. {
  114. title: '7天前',
  115. key: 'sevendaysAgo',
  116. dataIndex: 'sevendaysAgo',
  117. // scopedSlots: { customRender: 'date' },
  118. align: 'center'
  119. }
  120. ]
  121. let option = {
  122. tooltip: {
  123. trigger: 'axis'
  124. },
  125. legend: {
  126. data: ['今天', '昨天', '七天前']
  127. },
  128. grid: {
  129. left: '3%',
  130. right: '4%',
  131. bottom: '3%',
  132. containLabel: true
  133. },
  134. xAxis: {
  135. type: 'category',
  136. boundaryGap: false,
  137. data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00']
  138. },
  139. yAxis: {
  140. type: 'value'
  141. },
  142. series: [
  143. {
  144. name: '今天',
  145. type: 'line',
  146. // stack: '总量',//可以显示成堆叠图
  147. data: []
  148. },
  149. {
  150. name: '昨天',
  151. type: 'line',
  152. data: []
  153. },
  154. {
  155. name: '七天前',
  156. type: 'line',
  157. data: []
  158. },
  159. {
  160. name: '',
  161. type: 'line',
  162. data: []
  163. },
  164. {
  165. name: '',
  166. type: 'line',
  167. data: []
  168. }
  169. ]
  170. }
  171. export default {
  172. directives: { clickoutside },
  173. data() {
  174. return {
  175. //应用下拉选择框的
  176. optionArr:[],
  177. APPID:'',
  178. defalutAPP:'0',
  179. //表格参数
  180. dataSource: [],
  181. loading: false,
  182. columns,
  183. //下拉选择框的参数
  184. selectValue: 'all',
  185. //时间选择器的显示隐藏按钮
  186. dateOpen: false,
  187. dateStr: [] ,//字符串类型的日期
  188. //tab切换的参数、
  189. tabKey:'click',
  190. //echart的参数
  191. option:JSON.parse(JSON.stringify(option)),
  192. //treeselect的参数
  193. treeValue:[],
  194. treeData:[],
  195. SHOW_PARENT,
  196. }
  197. },
  198. methods: {
  199. moment,
  200. //项目改变后的事件
  201. treeChange(val){
  202. this.projectId=[];
  203. this.accountName=[];
  204. console.log(val,this.treeValue);
  205. this.treeValue.forEach((item,index)=>{
  206. if(parseInt(item)){
  207. this.projectId.push(item)
  208. }else{
  209. this.accountName.push(item)
  210. }
  211. })
  212. this.APPID=''
  213. this.defalutAPP='0'
  214. this.selectValue='all'
  215. this.optionArr=[]
  216. if(this.treeValue.length==0){
  217. this.optionArr=[]
  218. }
  219. postAction('/pangolin/api/app/list',{
  220. projectId:this.projectId,
  221. accountName:this.accountName
  222. }).then(res=>{
  223. console.log(res)
  224. if(res.success){
  225. this.optionArr=res.data
  226. }
  227. })
  228. },
  229. disabledDate(current) {
  230. // console.log(current)
  231. return current && current > moment().subtract(1, 'day')
  232. },
  233. //应用选择
  234. APPChange(value){
  235. this.APPID=value;
  236. this.HttpPost().then(item=>{
  237. this.getEchartData()
  238. })
  239. },
  240. //tab切换的事件
  241. callback(key) {
  242. console.log(key)
  243. this.tabKey=key;
  244. this.HttpPost().then(item=>{
  245. this.getEchartData()
  246. })
  247. },
  248. //打开对比时间的按钮
  249. openDate() {
  250. this.dateOpen = true
  251. },
  252. //点击其他地方关闭
  253. handleClose(){
  254. this.dateOpen = false
  255. },
  256. //日期发生变化时
  257. dateChange(date, dateString) {
  258. this.dateOpen = false;
  259. if(this.dateStr.length<2){
  260. this.dateStr.push(dateString)
  261. }else{
  262. this.dateStr.splice(0,1)
  263. this.dateStr.push(dateString)
  264. }
  265. let addCol=[]
  266. addCol = this.dateStr.map((item,index)=>{
  267. return {
  268. title: `${item}`,
  269. key: `${item}`,
  270. dataIndex:`${item}`,
  271. // scopedSlots: { customRender: 'date' },
  272. align: 'center'
  273. }
  274. })
  275. this.columns=[...columns,...addCol]
  276. //修改echart的数据项
  277. this.option.legend.data=[...option.legend.data,...this.dateStr]
  278. console.log(this.dateStr)
  279. this.HttpPost().then(item=>{
  280. this.getEchartData()
  281. })
  282. },
  283. //获取echart的值
  284. getEchartData() {
  285. // console.log('echart')
  286. const chart = this.$refs.chart
  287. if (chart) {
  288. const myChart = echarts.init(document.getElementById('echart'))
  289. myChart.setOption(this.option)
  290. window.addEventListener('resize', function() {
  291. myChart.resize()
  292. })
  293. }
  294. },
  295. //处理echart的数据
  296. echartHandle(res){
  297. if(this.dateStr.length>0){
  298. this.dateStr.map((item,index)=>{
  299. this.option.series[index+3].name=item
  300. })
  301. }
  302. this.option.series.map((item)=>{
  303. item.data=[]
  304. })
  305. //处理this.option.series.data数据
  306. res.map((item,index)=>{
  307. this.option.series[0].data.push(item.today)
  308. this.option.series[1].data.push(item.yesterday)
  309. this.option.series[2].data.push(item.sevendaysAgo);
  310. if(this.dateStr.length==1){
  311. this.option.series[3].data.push(item[this.dateStr[0]]);
  312. }else if(this.dateStr.length==2){
  313. this.option.series[3].data.push(item[this.dateStr[0]]);
  314. this.option.series[4].data.push(item[this.dateStr[1]]);
  315. }
  316. })
  317. this.getEchartData()
  318. console.log(this.option.series)
  319. },
  320. HttpPost(){
  321. return new Promise((resolve,reject)=>{
  322. postAction('/pangolin/api/realtime', {
  323. type:this.tabKey,
  324. compareTime1:this.dateStr[0],
  325. compareTime2:this.dateStr[1],
  326. appId:this.APPID,
  327. projectId:this.projectId,
  328. accountName:this.accountName
  329. }).then(res => {
  330. console.log(res)
  331. if (res.success) {
  332. this.loading = false
  333. let total={
  334. key:'zongji',
  335. today:0,
  336. yesterday:0,
  337. sevendaysAgo:0,
  338. hour:'总计'
  339. }
  340. if(this.dateStr.length>0){
  341. this.dateStr.map((item,index)=>{
  342. total[item]=0
  343. })
  344. }
  345. res.data.map((item, index) => {
  346. item.key = index;
  347. total.today+=item.today;
  348. total.yesterday+=item.yesterday;
  349. total.sevenDaysAgo+=item.sevenDaysAgo;
  350. if(this.dateStr.length==1){
  351. total[this.dateStr[0]] += item[this.dateStr[0]]
  352. }else if(this.dateStr.length==2){
  353. total[this.dateStr[0]] += item[this.dateStr[0]]
  354. total[this.dateStr[1]] += item[this.dateStr[1]]
  355. }
  356. if(item.hour<10){
  357. item.hour=`0${item.hour}:00~0${item.hour+1}:00`
  358. }else{
  359. item.hour=`${item.hour}:00~${item.hour+1}:00`
  360. }
  361. })
  362. console.log(total)
  363. if(this.tabKey!='rate'){
  364. this.dataSource =[total,...res.data] ;
  365. }else{
  366. this.dataSource =[...res.data] ;
  367. }
  368. this.echartHandle(res.data);
  369. resolve(res)
  370. }
  371. })
  372. })
  373. },
  374. //项目请求
  375. accountHttp(){
  376. postAction('/pangolin/api/memberList',{
  377. projectId:this.projectId,
  378. accountName:this.accountName
  379. }).then(res => {
  380. console.log(res)
  381. if(res.success){
  382. res.data.forEach((element,index) => {
  383. this.treeData.push({});
  384. this.treeData[index].title=element.projectName;
  385. this.treeData[index].value=element.projectId;
  386. this.treeData[index].key=element.projectId;
  387. this.treeData[index].children=[];
  388. element.accountList.forEach((ele,i)=>{
  389. this.treeData[index].children.push({});
  390. this.treeData[index].children[i].title=ele.accountName;
  391. this.treeData[index].children[i].value=ele.accountName;
  392. this.treeData[index].children[i].key=ele.accountName;
  393. })
  394. });
  395. }
  396. console.log(this.treeData)
  397. })
  398. },
  399. //确定按钮的事件
  400. getData(){
  401. console.log(this.monthStr,this.selectValue);
  402. this.loading=true;
  403. this.HttpPost()
  404. },
  405. },
  406. mounted() {
  407. // this.HttpPost()
  408. // console.log(this.dateStr)
  409. this.option=JSON.parse(JSON.stringify(option))
  410. // console.log(this.option.legend.data,option,'------------------------------')
  411. // postAction('/pangolin/api/app/list',{
  412. // projectId:this.projectId,
  413. // accountName:this.accountName
  414. // }).then(res=>{
  415. // // console.log(res)
  416. // if(res.success){
  417. // this.optionArr=res.data
  418. // }
  419. // })
  420. this.HttpPost().then(item=>{
  421. this.getEchartData()
  422. })
  423. this.accountHttp()
  424. }
  425. }
  426. </script>
  427. <style lang="scss" scoped>
  428. body,
  429. html {
  430. width: 100%;
  431. height: 100%;
  432. }
  433. .realData {
  434. width: 100%;
  435. height: 100%;
  436. background: #fff;
  437. padding: 10px 15px;
  438. }
  439. .optionLine {
  440. padding: 30px 5px;
  441. position: relative;
  442. margin-top: 20px;
  443. margin-bottom: 15px;
  444. border: 1px solid #ccc;
  445. span {
  446. display: inline-block;
  447. padding: 0 3px;
  448. }
  449. .btn {
  450. position: absolute;
  451. right: 10px;
  452. top: 30px;
  453. }
  454. }
  455. .optionLine:hover {
  456. border-color: rgb(24, 144, 255);
  457. box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  458. }
  459. .tabchange {
  460. margin: 20px 5px;
  461. }
  462. .duibishiduan {
  463. position: relative;
  464. height: 50px;
  465. overflow: hidden;
  466. p {
  467. position: absolute;
  468. right: 10px;
  469. top: 2px;
  470. }
  471. .dateDiv {
  472. position: absolute;
  473. right: 10px;
  474. top: 2px;
  475. }
  476. }
  477. </style>