|
@@ -4,8 +4,20 @@
|
|
|
<div class="apibox-top-title">
|
|
|
<p>API访问情况</p>
|
|
|
</div>
|
|
|
- <div class="apibox-top-left"></div>
|
|
|
- <div class="apibox-top-right"></div>
|
|
|
+ <div class="apibox-top-left">
|
|
|
+ <CommonApiBar :barData="countBar" width="30vw" height="26vh" @clicktime="clicktimes"></CommonApiBar>
|
|
|
+ </div>
|
|
|
+ <div class="apibox-top-center">
|
|
|
+ <CommonApiBar :barData="rankBar" width="30vw" height="26vh"></CommonApiBar>
|
|
|
+ </div>
|
|
|
+ <div class="apibox-top-right">
|
|
|
+ <div class="notdatas" v-if="minuteShow">
|
|
|
+ 暂无当前时间或选择时间数据
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <CommonApiBar :barData="minuteBar" width="30vw" height="26vh"></CommonApiBar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="apibox-list">
|
|
|
<div class="apibox-list-header">
|
|
@@ -28,7 +40,13 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import { ref, getCurrentInstance } from 'vue'
|
|
|
+import { ElMessage, ElLoading } from 'element-plus'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import CommonApiBar from '@/components/echarts/commonApiBar.vue'
|
|
|
export default ({
|
|
|
+ components: {
|
|
|
+ CommonApiBar
|
|
|
+ },
|
|
|
setup () {
|
|
|
let { proxy } = getCurrentInstance()
|
|
|
let selectValue = ref('all')
|
|
@@ -59,7 +77,419 @@ export default ({
|
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
|
},
|
|
|
])
|
|
|
- return { selectValue, options, tableData }
|
|
|
+ let timelist = ref([
|
|
|
+ { time: 0, count: 0, },
|
|
|
+ { time: 1, count: 0, },
|
|
|
+ { time: 2, count: 0, },
|
|
|
+ { time: 3, count: 0, },
|
|
|
+ { time: 4, count: 0, },
|
|
|
+ { time: 5, count: 0, },
|
|
|
+ { time: 6, count: 0, },
|
|
|
+ { time: 7, count: 0, },
|
|
|
+ { time: 8, count: 0, },
|
|
|
+ { time: 9, count: 0, },
|
|
|
+ { time: 10, count: 0, },
|
|
|
+ { time: 11, count: 0, },
|
|
|
+ { time: 12, count: 0, },
|
|
|
+ { time: 13, count: 0, },
|
|
|
+ { time: 14, count: 0, },
|
|
|
+ { time: 15, count: 0, },
|
|
|
+ { time: 16, count: 0, },
|
|
|
+ { time: 17, count: 0, },
|
|
|
+ { time: 18, count: 0, },
|
|
|
+ { time: 19, count: 0, },
|
|
|
+ { time: 20, count: 0, },
|
|
|
+ { time: 21, count: 0, },
|
|
|
+ { time: 22, count: 0, },
|
|
|
+ { time: 23, count: 0, },
|
|
|
+ ])
|
|
|
+ let countBar = ref({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '0%',
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '0%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ // {
|
|
|
+ // name: '全天各小时内API访问量',
|
|
|
+ // type: 'bar',
|
|
|
+ // barWidth: '20px',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color: '#01c871',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: '#55f49c',
|
|
|
+ // },
|
|
|
+ // ]),
|
|
|
+ // barBorderRadius: 3,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top'
|
|
|
+ // },
|
|
|
+ // data: [],
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ name: '访问趋势',
|
|
|
+ data: [],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true, //true曲线; false折线
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(36, 173, 254, 1)', //改变折线点的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(36, 173, 254, .5)', //改变折线颜色
|
|
|
+ type: 'solid',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //折线图颜色半透明
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(36, 173, 254, 1)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(36, 173, 254, .1)', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ let rankBar = ref({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '0%',
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ axisLabel: {
|
|
|
+ formatter: (val) => {
|
|
|
+ let txt = val
|
|
|
+ if (val.length > 5) {
|
|
|
+ txt = val.substr(0, 5) + '...'
|
|
|
+ }
|
|
|
+ return txt
|
|
|
+ },
|
|
|
+ // rotate: 40,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ height: 10,
|
|
|
+ xAxisIndex: [0, 1],
|
|
|
+ bottom: 5,
|
|
|
+ right: '1%',
|
|
|
+ left: '5%',
|
|
|
+ start: 0,
|
|
|
+ end: 45,
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-1,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
|
+ handleSize: '100%',
|
|
|
+ handleStyle: {
|
|
|
+ color: '#999999',
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#999999',
|
|
|
+ },
|
|
|
+ borderColor: '',
|
|
|
+ zoomOnMouseWheel: false,
|
|
|
+ moveOnMouseMove: true,
|
|
|
+ moveOnMouseWheel: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ show: true,
|
|
|
+ height: 10,
|
|
|
+ start: 1,
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'API访问排行',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20px',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#01c871',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#55f49c',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ barBorderRadius: 3,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top'
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ let minuteBar = ref({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '0%',
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ axisLabel: {
|
|
|
+ formatter: (val) => {
|
|
|
+ let txt = val
|
|
|
+ if (val.length > 5) {
|
|
|
+ txt = val.substr(0, 5) + '...'
|
|
|
+ }
|
|
|
+ return txt
|
|
|
+ },
|
|
|
+ // rotate: 40,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ height: 10,
|
|
|
+ xAxisIndex: [0, 1],
|
|
|
+ bottom: 5,
|
|
|
+ right: '1%',
|
|
|
+ left: '5%',
|
|
|
+ start: 0,
|
|
|
+ end: 30,
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-1,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
|
+ handleSize: '100%',
|
|
|
+ handleStyle: {
|
|
|
+ color: '#999999',
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#999999',
|
|
|
+ },
|
|
|
+ borderColor: '',
|
|
|
+ zoomOnMouseWheel: false,
|
|
|
+ moveOnMouseMove: true,
|
|
|
+ moveOnMouseWheel: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ show: true,
|
|
|
+ height: 10,
|
|
|
+ start: 1,
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'API访问排行',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20px',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#01c871',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#55f49c',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ barBorderRadius: 3,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top'
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ let disposeInitData = ref([])
|
|
|
+ let minuteShow = ref(false)
|
|
|
+ const discrepancy = Math.abs((new Date().getTimezoneOffset() / 60))
|
|
|
+ console.log(discrepancy, '偏移量')
|
|
|
+ function dataInit () {
|
|
|
+ proxy.$api.getNowapi({}).then((res) => {
|
|
|
+ console.log(res, 'API返回内容')
|
|
|
+ let hoursInfo = new Date().getHours()
|
|
|
+ let hourData = timelist.value
|
|
|
+ let xdata = []; let seriesData = [];
|
|
|
+ var rankDatas = [];
|
|
|
+ let ranx = []; let rankdata = []
|
|
|
+ if (res.state === 200) {
|
|
|
+ //处理时间
|
|
|
+ for (let i in hourData) {
|
|
|
+ let nums = parseInt(i) + 1
|
|
|
+ hourData[i].time === hoursInfo ? hourData.splice(nums) : ''
|
|
|
+ }
|
|
|
+ //计算count
|
|
|
+ res.days.forEach((item) => {
|
|
|
+ item.time = item.key.slice(-2)
|
|
|
+ let timenum = item.time.substr(0, 1)
|
|
|
+ let timenumtwo = item.time.substr(1, 1)
|
|
|
+ console.log(timenum, '获取第一位数')
|
|
|
+ timenum === 0 ? item.time = parseInt(timenumtwo) + discrepancy : item.time = parseInt(item.time) + discrepancy
|
|
|
+ item.count = 0
|
|
|
+ let totalCount = item.value.minCnts
|
|
|
+ for (let i in totalCount) {
|
|
|
+ item.count += totalCount[i].cnt
|
|
|
+ }
|
|
|
+ })
|
|
|
+ disposeInitData.value = res.days
|
|
|
+ //赋值到数组
|
|
|
+ for (let t in res.days) {
|
|
|
+ let timelabels = res.days[t].time
|
|
|
+ hourData.forEach((item) => {
|
|
|
+ item.time === timelabels ? item.count = res.days[t].count : ''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ hourData.forEach((item) => { xdata.push(item.time + '时'); seriesData.push(item.count) })
|
|
|
+ countBar.value.xAxis.data = xdata
|
|
|
+ countBar.value.series[0].data = seriesData
|
|
|
+ //处理排行
|
|
|
+ for (let i in res.days) {
|
|
|
+ let totaldata = res.days[i].value.apiCnt
|
|
|
+ for (let v in totaldata) {
|
|
|
+ let apiName = totaldata[v].api
|
|
|
+ let counts = totaldata[v].count
|
|
|
+ let host = totaldata[v].hostName[0]
|
|
|
+ console.log(apiName, counts, host, '9999999')
|
|
|
+ rankDatas.push({ api: apiName, count: counts, hostName: host })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let newArr = [];
|
|
|
+ rankDatas.forEach(el => {
|
|
|
+ const res = newArr.findIndex(ol => {
|
|
|
+ return el.api === ol.api && el.hostName == ol.hostName;
|
|
|
+ });
|
|
|
+ if (res !== -1) {
|
|
|
+ newArr[res].count = newArr[res].count + el.count;
|
|
|
+ } else {
|
|
|
+ newArr.push(el);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ newArr.sort(function (x, y) {
|
|
|
+ var a = parseInt(x.count)
|
|
|
+ var b = parseInt(y.count)
|
|
|
+ if (a < b) return 1
|
|
|
+ if (a > b) return -1
|
|
|
+ })
|
|
|
+ newArr.forEach((item) => { ranx.push(item.api); rankdata.push(item.count) })
|
|
|
+ rankBar.value.xAxis.data = ranx
|
|
|
+ rankBar.value.series[0].data = rankdata
|
|
|
+
|
|
|
+ //默认显示最近一个小时的分钟
|
|
|
+ let minutex = []; let minuteData = []
|
|
|
+ if (res.days[res.days.length - 1].value.minCnts) {
|
|
|
+ res.days[res.days.length - 1].value.minCnts.forEach((itemM) => {
|
|
|
+ minutex.push(itemM.minute)
|
|
|
+ minuteData.push(itemM.cnt)
|
|
|
+ })
|
|
|
+ minuteShow.value = false
|
|
|
+ minuteBar.value.xAxis.data = minutex
|
|
|
+ minuteBar.value.series[0].data = minuteData
|
|
|
+ } else {
|
|
|
+ minuteShow.value = true
|
|
|
+ }
|
|
|
+ console.log(rankDatas, newArr, '排行榜')
|
|
|
+ console.log(hourData, res, xdata)
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ ElMessage.error('获取API管理内数据失败,API异常')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function clicktimes (val) {
|
|
|
+ console.log(val, disposeInitData.value, '调用到了')
|
|
|
+ let datas = disposeInitData.value
|
|
|
+ let clicknum = val.dataIndex
|
|
|
+ let nowminData = []
|
|
|
+ let minutex = []; let minuteData = []
|
|
|
+ for (let i in datas) {
|
|
|
+ datas[i].time === clicknum ? nowminData = datas[i].value.minCnts : ''
|
|
|
+ }
|
|
|
+ console.log(nowminData, '33333')
|
|
|
+ nowminData.length !== 0 ? (nowminData.forEach((item) => { minutex.push(item.minute); minuteData.push(item.cnt) }), minuteBar.value.xAxis.data = minutex, minuteBar.value.series[0].data = minuteData, minuteShow.value = false) : minuteShow.value = true
|
|
|
+ }
|
|
|
+ dataInit()
|
|
|
+ return { selectValue, options, tableData, dataInit, timelist, discrepancy, countBar, rankBar, minuteBar, minuteShow, clicktimes }
|
|
|
},
|
|
|
})
|
|
|
</script>
|
|
@@ -86,10 +516,11 @@ export default ({
|
|
|
color: #7f8c8d;
|
|
|
}
|
|
|
.apibox-top-left,
|
|
|
-.apibox-top-right {
|
|
|
- width: 50%;
|
|
|
+.apibox-top-right,
|
|
|
+.apibox-top-center {
|
|
|
+ width: 33%;
|
|
|
height: 28vh;
|
|
|
- border: 1px solid #ccc;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
}
|
|
|
.apibox-list {
|
|
|
width: 100%;
|
|
@@ -111,4 +542,14 @@ export default ({
|
|
|
.apibox-list-header-select {
|
|
|
float: right;
|
|
|
}
|
|
|
+.echarts-topbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.notdatas {
|
|
|
+ margin: 12vh auto 0 auto;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #bdc3c7;
|
|
|
+}
|
|
|
</style>
|