持续集成分支
This commit is contained in:
aixianling
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div class="Message">
|
||||
<div class="title">消息回复率</div>
|
||||
<div class="msg-type">
|
||||
<div class="type-list">
|
||||
<div :class="type == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="tabClick(index)">{{ item }}</div>
|
||||
</div>
|
||||
<div class="chart-content" id="chartDay"></div>
|
||||
</div>
|
||||
<div class="title">单聊统计</div>
|
||||
<div class="tab-content">
|
||||
<div class="item" v-for="(item, index) in friendList" :key="index">
|
||||
<p>{{ item.label }}</p>
|
||||
<h3>{{ item.value }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-content" id="chartFriend"></div>
|
||||
<div class="title">单聊统计</div>
|
||||
<div class="tab-content">
|
||||
<div class="item" v-for="(item, index) in groupList" :key="index">
|
||||
<p>{{ item.label }}</p>
|
||||
<h3>{{ item.value }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-content" id="chartGroup"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
name: "Message",
|
||||
data() {
|
||||
return {
|
||||
friendList: [
|
||||
{
|
||||
label: '单聊会话',
|
||||
value: '235'
|
||||
},
|
||||
{
|
||||
label: '单聊消息',
|
||||
value: '23500'
|
||||
}
|
||||
],
|
||||
groupList: [
|
||||
{
|
||||
label: '活跃群聊',
|
||||
value: '235'
|
||||
},
|
||||
{
|
||||
label: '活跃群成员',
|
||||
value: '23'
|
||||
},
|
||||
{
|
||||
label: '群聊消息',
|
||||
value: '255,625'
|
||||
},
|
||||
],
|
||||
typeList: ['昨日', '近7天', '近30天'],
|
||||
type: 0,
|
||||
echartDataFriend: null,
|
||||
echartDataGroup: null,
|
||||
echartDataDay: null
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
methods: {
|
||||
chartInit() {
|
||||
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
|
||||
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
|
||||
this.echartDataDay = echarts.init(document.getElementById('chartDay'))
|
||||
var option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#E1E5EF', //x轴的颜色
|
||||
width: 1, //轴线的宽度
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
data: ['4月', '5月', '6月', '7月', '8月',]
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{ //y轴
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
type: 'value',
|
||||
minInterval: 50,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [155, 130, 120, 160, 120, 130, 110],
|
||||
type: 'line',
|
||||
areaStyle: {//覆盖区域的渐变色
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2891FF'
|
||||
}
|
||||
},
|
||||
itemStyle : {
|
||||
normal : {
|
||||
color:'#2891FF',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.echartDataFriend.setOption(option)
|
||||
this.echartDataGroup.setOption(option)
|
||||
|
||||
var option2 = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['60%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 20,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
var colorList = ['#1890FF', '#F0F2F5'];
|
||||
return colorList[colors.dataIndex];
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.echartDataDay.setOption(option2)
|
||||
},
|
||||
tabClick(index) {
|
||||
this.type = index
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.chartInit()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Message {
|
||||
padding: 0 30px;
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
padding: 40px 0 24px 0;
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
display: flex;
|
||||
padding: 24px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 16px;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
p {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: 517px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.msg-type {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 8px;
|
||||
padding-top: 44px;
|
||||
.type-list {
|
||||
width: 430px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background: #E9E9E9;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
margin: 0 auto 48px;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
.active {
|
||||
font-weight: 500;
|
||||
color: #080808;
|
||||
background: #D8D8D8;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.23);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user