realTimeData.vue 10 KB

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