327 lines
7.9 KiB
Vue
327 lines
7.9 KiB
Vue
<!--
|
|
* @Author: hisense.liangjunhua
|
|
* @Date: 2022-06-19 10:15:33
|
|
* @LastEditors: hisense.wuhongjian
|
|
* @LastEditTime: 2022-07-05 21:25:47
|
|
* @Description: 告诉大家这是什么
|
|
-->
|
|
<template>
|
|
<div class="platform-overview">
|
|
<div class="top"><span class="title">平台概览</span></div>
|
|
<div class="bottom">
|
|
<div class="left">
|
|
<div class="box">
|
|
<div class="item">
|
|
<div class="name">平台访问量</div>
|
|
<div claSS="num">{{ num1 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="item">
|
|
<div class="name">用户量</div>
|
|
<div claSS="num">{{ num2 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right" :key="showKey">
|
|
<div class="title_echarts">浏览趋势</div>
|
|
<div class="echarts-box" id="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import * as echarts from 'echarts'
|
|
import * as moment from 'moment'
|
|
import { ref, onMounted } from 'vue'
|
|
import { wholeAmount, trafficStatistics } from '@/api/capabilityCloud'
|
|
const num1 = ref(0)
|
|
const num2 = ref(0)
|
|
const showKey = ref(0)
|
|
wholeAmount().then((res) => {
|
|
num1.value =
|
|
res.data.data.filter((val) => val.type == '平台访问量')[0].amount || 0
|
|
num2.value =
|
|
res.data.data.filter((val) => val.type == '用户量')[0].amount || 0
|
|
})
|
|
// 获取近七天日期
|
|
const getDate = () => {
|
|
const date = []
|
|
for (let i = 0; i < 7; i++) {
|
|
date.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
|
|
}
|
|
return date.reverse()
|
|
}
|
|
const dateList = getDate()
|
|
var charts = {
|
|
unit: '次',
|
|
names: ['浏览'],
|
|
lineX: dateList,
|
|
value: [[]],
|
|
}
|
|
var color = ['rgba(23, 255, 243']
|
|
var lineY = []
|
|
|
|
for (var i = 0; i < charts.names.length; i++) {
|
|
var x = i
|
|
if (x > color.length - 1) {
|
|
x = color.length - 1
|
|
}
|
|
var data = {
|
|
name: charts.names[i],
|
|
type: 'line',
|
|
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#00b5ff',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#39da78',
|
|
},
|
|
]),
|
|
smooth: true,
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(33, 34, 35, 0.35)',
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: color[x] + ', 0)',
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10,
|
|
},
|
|
},
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
data: charts.value[i],
|
|
}
|
|
lineY.push(data)
|
|
}
|
|
var option = {
|
|
tooltip: {
|
|
backgroundColor: 'rgba(17,61,116,0.8)',
|
|
borderWidth: 0,
|
|
trigger: 'axis',
|
|
formatter: function (val) {
|
|
console.log(val)
|
|
let res = `<div style="background:rgba(17,61,116,0.8);border:1px soild rgba(28,119,205,0.8);color:#fff;padding:0">
|
|
<span>日期 : ${val[0].name}</span>
|
|
<div style="margin-left: 18px">浏览次数 : ${val[0].value}</div>
|
|
</div>`
|
|
return res
|
|
},
|
|
},
|
|
legend: {
|
|
data: charts.names,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: 'rgb(0,253,255,0.6)',
|
|
},
|
|
right: '4%',
|
|
},
|
|
grid: {
|
|
top: '14%',
|
|
left: '6%',
|
|
right: '5%',
|
|
bottom: '12%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: charts.lineX,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: 'rgb(255,255,255,0.5)',
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: charts.unit,
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
textStyle: {
|
|
color: 'rgb(255,255,255,0.5)',
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgb(23,255,243,0.3)',
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255,255,255,0.5)',
|
|
},
|
|
},
|
|
},
|
|
series: lineY,
|
|
}
|
|
onMounted(() => {
|
|
echarts.init(document.getElementById('echarts-box')).dispose()
|
|
trafficStatistics({
|
|
startDate: dateList[0],
|
|
endDate: dateList[dateList.length - 1],
|
|
}).then((res) => {
|
|
res.data.data.browseDayList.forEach((val, index) => {
|
|
charts.value[0].push(val[dateList[index]] + '')
|
|
})
|
|
const chart = document.getElementById('echarts-box')
|
|
if (chart) {
|
|
const myChart = echarts.init(chart)
|
|
myChart.setOption(option)
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize()
|
|
})
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.platform-overview {
|
|
width: 9.24rem;
|
|
height: 4.65rem;
|
|
background: rgba(0, 108, 188, 0.1);
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
|
text-decoration: none;
|
|
outline: none;
|
|
-webkit-transition: all 100ms ease-out;
|
|
-moz-transition: all 100ms ease-out;
|
|
transition: all 100ms ease-out;
|
|
.top {
|
|
font-size: 24px;
|
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
}
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.2rem;
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.box {
|
|
width: 1.94rem;
|
|
height: 1.94rem;
|
|
background: url('~@/assets/capabilityCloud/pt_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
animation: turn 10s linear infinite;
|
|
.item {
|
|
width: 1.94rem;
|
|
height: 1.94rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
animation: turn2 10s linear infinite;
|
|
.name {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
.num {
|
|
font-size: 32px;
|
|
color: #fdc623;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
width: 6.53rem;
|
|
height: 3.54rem;
|
|
position: relative;
|
|
.title_echarts {
|
|
font-size: 0.18rem;
|
|
height: 0.21rem;
|
|
line-height: 0.18rem;
|
|
color: #ffffff;
|
|
background: url('~@/assets/capabilityCloud/Component_services_title_bg.png')
|
|
no-repeat;
|
|
background-size: 0.7rem 0.08rem;
|
|
background-position: bottom left;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0.2rem;
|
|
}
|
|
.echarts-box {
|
|
width: 6.53rem;
|
|
height: 4.04rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes turn {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
25% {
|
|
-webkit-transform: rotate(90deg);
|
|
}
|
|
50% {
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
75% {
|
|
-webkit-transform: rotate(270deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes turn2 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
25% {
|
|
-webkit-transform: rotate(-90deg);
|
|
}
|
|
50% {
|
|
-webkit-transform: rotate(-180deg);
|
|
}
|
|
75% {
|
|
-webkit-transform: rotate(-270deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(-360deg);
|
|
}
|
|
}
|
|
.platform-overview:hover {
|
|
border: 2px solid;
|
|
animation: turn3 5s linear infinite;
|
|
}
|
|
@keyframes turn3 {
|
|
0% {
|
|
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
|
}
|
|
25% {
|
|
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
|
}
|
|
50% {
|
|
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
|
}
|
|
75% {
|
|
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
|
}
|
|
100% {
|
|
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
|
}
|
|
}
|
|
</style>
|