123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411 |
- <template>
- <div class="realData" ref="chart">
- <div class="optionLine">
- <span>应用:</span>
- <a-select default-value="0" style="width: 150px" @change="APPChange">
- <a-select-option value="0">全部</a-select-option>
- <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>
- </a-select>
-
- </div>
- <div class="tabchange">
- <a-tabs default-active-key="click" @change="callback">
- <a-tab-pane key="click" tab="点击数"></a-tab-pane>
- <a-tab-pane key="active" tab="激活" force-render></a-tab-pane>
- <a-tab-pane key="rate" tab="激活率"></a-tab-pane>
- </a-tabs>
- </div>
- <div id="echart" style="width:100%;height:400px"></div>
- <div class="duibishiduan">
- <p>
- <a-button type="primary" @click="openDate" v-clickoutside="handleClose" >对比时段</a-button>
- </p>
- <div class="dateDiv">
- <a-date-picker @change="dateChange" v-show="dateOpen" :open='dateOpen' :disabled-date="disabledDate" />
- </div>
- </div>
- <a-table
- :columns="columns"
- :data-source="dataSource"
- tableLayout="auto"
- bordered
- :pagination="false"
- ></a-table>
- </div>
- </template>
- <script>
- import moment from 'moment'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
- // 引入基本模板
- 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')
- const clickoutside = {
- // 初始化指令
- bind(el, binding, vnode) {
- function documentHandler(e) {
- // 这里判断点击的元素是否是本身,是本身,则返回
- if (el.contains(e.target)) {
- return false
- }
- // 判断指令中是否绑定了函数
- if (binding.expression) {
- // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
- binding.value(e)
- }
- }
- // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
- el.__vueClickOutside__ = documentHandler
- document.addEventListener('click', documentHandler)
- },
- update() {},
- unbind(el, binding) {
- // 解除事件监听
- document.removeEventListener('click', el.__vueClickOutside__)
- delete el.__vueClickOutside__
- }
- }
- let columns = [
- {
- title: '',
- dataIndex: 'hour',
- // scopedSlots: { customRender: 'date' },
- width:200,
- align: 'center'
- },
- {
- title: '今天',
- key: 'today',
- dataIndex: 'today',
- // scopedSlots: { customRender: 'date' },
- align: 'center'
- },
- {
- title: '昨天',
- key: 'yesterday',
- dataIndex: 'yesterday',
- // scopedSlots: { customRender: 'date' },
- align: 'center'
- },
- {
- title: '7天前',
- key: 'sevendaysAgo',
- dataIndex: 'sevendaysAgo',
- // scopedSlots: { customRender: 'date' },
- align: 'center'
- }
- ]
- let option = {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['今天', '昨天', '七天前']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- 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']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '今天',
- type: 'line',
- // stack: '总量',//可以显示成堆叠图
- data: []
- },
- {
- name: '昨天',
- type: 'line',
- data: []
- },
- {
- name: '七天前',
- type: 'line',
- data: []
- },
- {
- name: '',
- type: 'line',
- data: []
- },
- {
- name: '',
- type: 'line',
- data: []
- }
- ]
- }
- export default {
- directives: { clickoutside },
- data() {
- return {
-
- //应用下拉选择框的
- optionArr:[],
- APPID:'',
- //表格参数
- dataSource: [],
- loading: false,
- columns,
- //下拉选择框的参数
- selectValue: 'all',
- //时间选择器的显示隐藏按钮
- dateOpen: false,
- dateStr: [] ,//字符串类型的日期
- //tab切换的参数、
- tabKey:'click',
- //echart的参数
- option,
- }
- },
- methods: {
- moment,
- disabledDate(current) {
- // console.log(current)
- return current && current > moment().subtract(1, 'day')
- },
- //应用选择
- APPChange(value){
- this.APPID=value;
- this.HttpPost().then(item=>{
- this.getEchartData()
- })
- },
- //tab切换的事件
- callback(key) {
- console.log(key)
- this.tabKey=key;
- this.HttpPost().then(item=>{
- this.getEchartData()
- })
- },
-
- //打开对比时间的按钮
- openDate() {
- this.dateOpen = true
- },
- //点击其他地方关闭
- handleClose(){
- this.dateOpen = false
- },
- //日期发生变化时
- dateChange(date, dateString) {
- this.dateOpen = false;
- if(this.dateStr.length<2){
- this.dateStr.push(dateString)
- }else{
- this.dateStr.splice(0,1)
- this.dateStr.push(dateString)
- }
- let addCol=[]
- addCol = this.dateStr.map((item,index)=>{
- return {
- title: `${item}`,
- key: `${item}`,
- dataIndex:`${item}`,
- // scopedSlots: { customRender: 'date' },
- align: 'center'
- }
- })
- this.columns=[...columns,...addCol]
- //修改echart的数据项
- this.option.legend.data=[...option.legend.data,...this.dateStr]
- console.log(this.dateStr)
- this.HttpPost().then(item=>{
- this.getEchartData()
- })
- },
- //获取echart的值
- getEchartData() {
- console.log('echart')
- const chart = this.$refs.chart
- if (chart) {
- const myChart = echarts.init(document.getElementById('echart'))
- myChart.setOption(this.option)
- window.addEventListener('resize', function() {
- myChart.resize()
- })
- }
- },
- //处理echart的数据
- echartHandle(res){
- if(this.dateStr.length>0){
- this.dateStr.map((item,index)=>{
- this.option.series[index+3].name=item
- })
- }
- this.option.series.map((item)=>{
- item.data=[]
- })
- //处理this.option.series.data数据
-
- res.map((item,index)=>{
- this.option.series[0].data.push(item.today)
- this.option.series[1].data.push(item.yesterday)
- this.option.series[2].data.push(item.sevendaysAgo);
- if(this.dateStr.length==1){
- this.option.series[3].data.push(item[this.dateStr[0]]);
- }else if(this.dateStr.length==2){
- this.option.series[3].data.push(item[this.dateStr[0]]);
- this.option.series[4].data.push(item[this.dateStr[1]]);
- }
- })
-
- console.log(this.option.series)
- },
- HttpPost(){
- return new Promise((resolve,reject)=>{
- postAction('/pangolin/api/realtime', {
-
- type:this.tabKey,
- compareTime1:this.dateStr[0],
- compareTime2:this.dateStr[1],
- appId:this.APPID
- }).then(res => {
- console.log(res)
- if (res.success) {
- this.loading = false
- let total={
- key:'zongji',
- today:0,
- yesterday:0,
- sevendaysAgo:0,
- hour:'总计'
- }
- if(this.dateStr.length>0){
- this.dateStr.map((item,index)=>{
- total[item]=0
- })
- }
- res.data.map((item, index) => {
- item.key = index;
- total.today+=item.today;
- total.yesterday+=item.yesterday;
- total.sevenDaysAgo+=item.sevenDaysAgo;
- if(this.dateStr.length==1){
- total[this.dateStr[0]] += item[this.dateStr[0]]
- }else if(this.dateStr.length==2){
- total[this.dateStr[0]] += item[this.dateStr[0]]
- total[this.dateStr[1]] += item[this.dateStr[1]]
- }
-
- if(item.hour<10){
- item.hour=`0${item.hour}:00~0${item.hour+1}:00`
- }else{
- item.hour=`${item.hour}:00~${item.hour+1}:00`
- }
- })
- console.log(total)
- this.dataSource =[total,...res.data] ;
- this.echartHandle(res.data);
-
- resolve(res)
- }
- })
- })
- },
-
- },
- mounted() {
- // this.HttpPost()
-
- console.log(this.dateStr)
- this.option.legend.data=[...option.legend.data,...this.dateStr];
- console.log(this.option.legend.data)
- postAction('/pangolin/api/app/list').then(res=>{
- console.log(res)
- if(res.success){
- this.optionArr=res.data
- }
- })
- this.HttpPost().then(item=>{
- this.getEchartData()
- })
- }
- }
- </script>
- <style lang="scss" scoped>
- body,
- html {
- width: 100%;
- height: 100%;
- }
- .realData {
- width: 100%;
- height: 100%;
- background: #fff;
- padding: 10px 15px;
- }
- .optionLine {
- padding: 30px 5px;
- position: relative;
- margin-top: 20px;
- margin-bottom: 15px;
- border: 1px solid #ccc;
- span {
- display: inline-block;
- padding: 0 3px;
- }
-
- .btn {
- position: absolute;
- right: 10px;
- top: 30px;
- }
- }
- .optionLine:hover {
- border-color: rgb(24, 144, 255);
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
- }
- .tabchange {
- margin: 20px 5px;
- }
- .duibishiduan {
- position: relative;
- height: 50px;
- overflow: hidden;
- p {
- position: absolute;
- right: 10px;
- top: 2px;
- }
- .dateDiv {
- position: absolute;
- right: 10px;
- top: 2px;
- }
- }
- </style>
|