380 lines
10 KiB
Vue
380 lines
10 KiB
Vue
<template>
|
|
<div style="width: 1316px; margin: 0 auto; padding: 16px 0 10px 10px">
|
|
<p class="situation">
|
|
共享情况
|
|
<span class="line"></span>
|
|
</p>
|
|
<div class="SharingSituation">
|
|
<div class="SharingSituation-left">
|
|
<div>
|
|
<div class="left-title">
|
|
<div>日平均浏览量 {{ browseAvg }}次</div>
|
|
<div></div>
|
|
<div>日最大浏览量{{ browseMax }}次</div>
|
|
</div>
|
|
<div class="left-content-title">
|
|
<div
|
|
class="left-content-title-son"
|
|
v-for="item in quarter"
|
|
:key="item"
|
|
@click="quarterSwitch(item)"
|
|
>
|
|
<div class="name" :class="item == switchquarter ? 'bianlan' : ''">
|
|
{{ item }}
|
|
</div>
|
|
<div :class="item == switchquarter ? 'hengxian' : ''"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="Chart" id="Chart"></div>
|
|
</div>
|
|
<div class="volume">
|
|
<div>
|
|
<span
|
|
style="
|
|
font-size: 14px;
|
|
float: left;
|
|
margin-left: 420px;
|
|
text-align: center;
|
|
padding-top: 6px;
|
|
"
|
|
>
|
|
单位: 次
|
|
</span>
|
|
<p class="p">申请量</p>
|
|
</div>
|
|
|
|
<div class="volume_box">
|
|
<div class="fugai"></div>
|
|
<div
|
|
v-for="(item, index) in dataLists"
|
|
:key="item"
|
|
class="volume_box-son"
|
|
:style="{
|
|
backgroundImage: `url(${item.photoBg}) `,
|
|
}"
|
|
>
|
|
<div class="volume_box-son-top" v-if="index % 2 == 0">
|
|
<div
|
|
class="photo"
|
|
:style="{
|
|
backgroundImage: `url(${item.photo}) `,
|
|
}"
|
|
></div>
|
|
<div class="name">{{ item.type }}</div>
|
|
<div class-="type">{{ item.amount }}</div>
|
|
</div>
|
|
<div class="volume_box-son-bottom" v-else>
|
|
<div class="type">{{ item.amount }}</div>
|
|
<div class="name">{{ item.type }}</div>
|
|
<div
|
|
class="photo"
|
|
:style="{
|
|
backgroundImage: `url(${item.photo}) `,
|
|
}"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import * as moment from 'moment'
|
|
import * as echarts from 'echarts'
|
|
import { applyAmount, trafficStatistics } from '@/api/abilityStatistics'
|
|
const quarter = ref(['近七天', '近14天', '月度'])
|
|
let startDate = ref('')
|
|
let endDate = ref('')
|
|
|
|
//数据图
|
|
const dataGraph = (datas) => {
|
|
console.log('datas=========>', datas)
|
|
echarts.init(document.getElementById('Chart')).dispose()
|
|
let chartDom = document.getElementById('Chart')
|
|
let myChart = echarts.init(chartDom)
|
|
let option
|
|
option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: datas.time,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'item',
|
|
formatter: '{b}的浏览量：</br> {c} 次',
|
|
},
|
|
series: [
|
|
{
|
|
data: datas.value,
|
|
type: 'line',
|
|
smooth: true,
|
|
},
|
|
],
|
|
}
|
|
option && myChart.setOption(option)
|
|
}
|
|
//季度切换方法
|
|
let swtichname = ref('日')
|
|
let switchquarter = ref('')
|
|
const quarterSwitch = (name) => {
|
|
switch (name) {
|
|
case '近七天':
|
|
hebdomad()
|
|
swtichname.value = '日'
|
|
break
|
|
case '近14天':
|
|
fortnight()
|
|
swtichname.value = '14日'
|
|
break
|
|
case '月度':
|
|
yueji()
|
|
swtichname.value = '月'
|
|
break
|
|
}
|
|
switchquarter.value = name
|
|
}
|
|
//获取近七天日期方法
|
|
function hebdomad() {
|
|
startDate.value = moment().subtract(7, 'days').format('YYYY-MM-DD')
|
|
endDate.value = moment().format('YYYY-MM-DD')
|
|
console.log('startDate.value', startDate.value, endDate.value)
|
|
}
|
|
//获取近14天日期方法
|
|
function fortnight() {
|
|
startDate.value = moment().subtract(14, 'days').format('YYYY-MM-DD')
|
|
endDate.value = moment().format('YYYY-MM-DD')
|
|
console.log('startDate.value', startDate.value, endDate.value)
|
|
}
|
|
//获取近月度日期方法
|
|
function yueji() {
|
|
startDate.value = moment().subtract(30, 'days').format('YYYY-MM-DD')
|
|
endDate.value = moment().format('YYYY-MM-DD')
|
|
console.log('startDate.value', startDate.value, endDate.value)
|
|
}
|
|
//数据图接口
|
|
let dataList = ref({ time: [], value: [] }) //初始化数据
|
|
let browseAvg = ref('')
|
|
let browseMax = ref('')
|
|
const myTrafficStatistics = () => {
|
|
dataList.value.time = []
|
|
dataList.value.value = []
|
|
const data = {
|
|
startDate: startDate.value,
|
|
endDate: endDate.value,
|
|
}
|
|
trafficStatistics(data).then((res) => {
|
|
browseMax.value = res.data.data.browseMax
|
|
browseAvg.value = res.data.data.browseAvg
|
|
res.data.data.browseDayList.map((item) => {
|
|
for (const key in item) {
|
|
dataList.value.time.push(moment(key).format('MM.DD'))
|
|
dataList.value.value.push(item[key])
|
|
}
|
|
})
|
|
console.log('rrrrrr123rrrres', dataList.value)
|
|
dataGraph(dataList.value)
|
|
})
|
|
}
|
|
let photoBg = ref([
|
|
require('../../../assets/abilityStatistics/zhishiku-bg.png'),
|
|
require('../../../assets/abilityStatistics/yingyongziyuan-bg.png'),
|
|
require('../../../assets/abilityStatistics/zujianfuwu-bg.png'),
|
|
require('../../../assets/abilityStatistics/shujuziyuan-bg.png'),
|
|
require('../../../assets/abilityStatistics/jichujianshe-bg.png'),
|
|
])
|
|
let photo = ref([
|
|
require('../../../assets/abilityStatistics/zhishiku.png'),
|
|
require('../../../assets/abilityStatistics/yingyongziyuan.png'),
|
|
require('../../../assets/abilityStatistics/zujianfuwu.png'),
|
|
require('../../../assets/abilityStatistics/shujuziyuan.png'),
|
|
require('../../../assets/abilityStatistics/jichujianshe.png'),
|
|
])
|
|
//申请量接口
|
|
let dataLists = ref([])
|
|
const myApplyAmount = () => {
|
|
applyAmount().then((res) => {
|
|
// dataLists.value = res.data.data
|
|
res.data.data.map((item) => {
|
|
switch (item.type) {
|
|
case '知识库':
|
|
dataLists.value[0] = item
|
|
break
|
|
case '应用资源':
|
|
dataLists.value[1] = item
|
|
break
|
|
case '组件服务':
|
|
dataLists.value[2] = item
|
|
break
|
|
case '数据资源':
|
|
dataLists.value[3] = item
|
|
break
|
|
case '基础设施':
|
|
dataLists.value[4] = item
|
|
break
|
|
default:
|
|
dataLists.value.push(item)
|
|
break
|
|
}
|
|
})
|
|
photo.value.map((item, index) => {
|
|
dataLists.value[index].photo = item
|
|
dataLists.value[index].photoBg = photoBg.value[index]
|
|
})
|
|
console.log('qqqqqq11122qqqqq', dataLists.value)
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
quarterSwitch('近七天')
|
|
watch(
|
|
switchquarter,
|
|
(value) => {
|
|
myTrafficStatistics(value)
|
|
},
|
|
{ deep: true }
|
|
)
|
|
myApplyAmount()
|
|
myTrafficStatistics()
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.situation {
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
}
|
|
.line {
|
|
width: 34px;
|
|
height: 3px;
|
|
background-color: #0058e1;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.SharingSituation {
|
|
font-size: 18px;
|
|
font-family: text-typeface;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px;
|
|
|
|
.SharingSituation-left {
|
|
width: 666px;
|
|
height: 420px;
|
|
background: #eef4fd;
|
|
z-index: 2;
|
|
.left-title {
|
|
height: 50px;
|
|
width: 100%;
|
|
background: #0058e1;
|
|
color: #ffffff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 2px;
|
|
padding: 0 80px;
|
|
}
|
|
.left-content-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
.left-content-title-son {
|
|
margin: 18px 50px 10px 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.name {
|
|
font-size: 16px;
|
|
}
|
|
.bianlan {
|
|
color: #0058e1;
|
|
}
|
|
.hengxian {
|
|
color: #0058e1;
|
|
height: 3px;
|
|
width: 34px;
|
|
background: #0058e1;
|
|
border-radius: 1px;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.Chart {
|
|
flex: 1;
|
|
width: 598px;
|
|
height: 286px;
|
|
background: #f7f7f7;
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.volume {
|
|
margin-top: 64px;
|
|
border-radius: 2px;
|
|
margin-left: -40px;
|
|
.p {
|
|
width: 96px;
|
|
height: 36px;
|
|
color: #0058e1;
|
|
font-size: 18px;
|
|
background: url('../../../assets/abilityStatistics/gongxiangqingkuangliulanl.png')
|
|
no-repeat;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
margin-left: 500px;
|
|
}
|
|
.volume_box {
|
|
width: 666px;
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
color: #fff;
|
|
.fugai {
|
|
width: 40px;
|
|
height: 390px;
|
|
background: #0058e1;
|
|
margin-top: 1px;
|
|
}
|
|
.volume_box-son {
|
|
width: 120px;
|
|
height: 390px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #0058e1;
|
|
padding: 44px 0;
|
|
position: relative;
|
|
.volume_box-son-top,
|
|
.volume_box-son-bottom {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
.photo {
|
|
height: 46px;
|
|
width: 46px;
|
|
}
|
|
}
|
|
.volume_box-son-bottom {
|
|
position: absolute;
|
|
bottom: 44px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|