kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏

Browse Source
This commit is contained in:
yanran200730
2022-07-21 16:50:48 +08:00
parent 552c6888e5
commit 5e5e0d9b57
2 changed files with 362 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
project/dv/apps/AppPdDv.vue
View File

@@ -3,11 +3,11 @@
<div class="left">
<div class="appPdDv-title">企微数据库</div>
<div class="tab">
<div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']">居民统计</div>
<div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']">会话统计</div>
<div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']" @click="leftIndex = 0">居民统计</div>
<div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']" @click="leftIndex = 1">会话统计</div>
</div>
<div class="tab-content">
<div class="tab-content__item">
<div class="tab-content__item" v-show="leftIndex === 0">
<div class="item">
<div class="title">居民好友统计</div>
<div class="item-top">
@@ -33,7 +33,7 @@
</div>
</div>
</div>
<div class="chart1"></div>
<div class="chart1" style="width: 100%; height: 114px;"></div>
</div>
<div class="item">
<div class="title">居民群统计</div>
@@ -67,7 +67,7 @@
</div>
</div>
</div>
<div class="chart2"></div>
<div class="chart2" style="width: 100%; height: 114px;"></div>
</div>
<div class="item item-tags">
<div class="title">标签人群</div>
@@ -87,6 +87,34 @@
</div>
</div>
</div>
<div class="tab-content__item" v-show="leftIndex === 1">
<div class="item">
<div class="title">消息回复率</div>
<div class="item-top DonutChart-wrapper">
<DonutChart v-if="leftIndex === 1" :ratio="100" text="昨日"></DonutChart>
<DonutChart v-if="leftIndex === 1" :ratio="40" text="近7天"></DonutChart>
<DonutChart v-if="leftIndex === 1" :ratio="70" text="近1个月"></DonutChart>
</div>
</div>
<div class="item">
<div class="title">单聊统计</div>
<div class="item-top">
<div class="item-top__item">
<h2>单聊会话</h2>
<p>279</p>
</div>
<div class="item-top__item">
<h2>单聊会话</h2>
<p>279</p>
</div>
</div>
<div class="chart3" style="width: 336px; height: 114px;"></div>
</div>
<div class="item item-tags">
<div class="title">群聊统计</div>
<div class="chart4" style="width: 336px; height: 114px;"></div>
</div>
</div>
</div>
</div>
<div class="middle">
@@ -139,7 +167,7 @@
<span style="width: 60px; text-align: right;">群人数</span>
</div>
<div class="item-table__body">
<div class="item-table__item" v-for="(item, index) in 4" :key="index">
<div class="item-table__item" v-for="(item, index) in 6" :key="index">
<span style="width: 110px">XX网格居民群</span>
<span style="flex: 1; text-align: center;">王磊</span>
<span style="width: 60px; text-align: right;">150</span>
@@ -155,12 +183,12 @@
<div :class="[rightIndex === 1 ? 'active' : '']">上周积分榜</div>
</div>
<div class="tab-content">
<div class="tab-item" v-for="(item, index) in 5" :key="index">
<div class="tab-item" v-for="(item, index) in 6" :key="index">
<div class="left" :class="'left'+ index">{{ index + 1 }}</div>
<div class="middel">
<div class="top">
<h2>王磊</h2>
<span>网格长</span>
<span v-if="index === 0">网格长</span>
</div>
<p></p>
</div>
@@ -174,16 +202,198 @@
</template>
<script>
import DonutChart from './DonutChart'
import * as echarts from 'echarts'
export default {
name: 'AppPdDv',
label: '微网实格',
components: {
DonutChart
},
data () {
return {
leftIndex: 0,
rightIndex: 0
}
},
mounted () {
this.$nextTick(() => {
setTimeout(() => {
this.initLineChart('.chart1')
this.initLineChart('.chart2')
this.initBarChart('.chart3')
this.initBarChart('.chart4')
}, 500)
})
},
methods: {
initLineChart (el) {
var chartDom = document.querySelector(el)
var myChart = echarts.init(chartDom)
var option
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#aeacaf'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
},
yAxis: {
type: 'value',
nameGap: 23,
minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
axisLabel: {
textStyle: {
color: '#aeacaf'
}
},
axisPointer: {show: false}
},
color: [
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{offset: 0, color: 'rgba(47, 211, 241, 1)'},
{offset: 1, color: 'rgba(47, 211, 241, 0)'}
]
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '14%',
left: '1%',
right: '0%',
bottom: '0%',
containLabel: true
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
label: {
show: false,
position: 'top',
color: '#fff'
},
areaStyle: {},
barWidth: 16,
barCategoryGap: 40,
itemStyle: {}
}
]
}
option && myChart.setOption(option)
},
initBarChart (el) {
var chartDom = document.querySelector(el)
var myChart = echarts.init(chartDom)
var option
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#aeacaf'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
},
yAxis: {
type: 'value',
nameGap: 23,
minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
axisLabel: {
textStyle: {
color: '#aeacaf'
}
},
axisPointer: {show: false}
},
color: [
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{offset: 0, color: 'rgba(47, 211, 241, 1)'},
{offset: 1, color: 'rgba(47, 211, 241, 0)'}
]
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '14%',
left: '1%',
right: '0%',
bottom: '0%',
containLabel: true
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: false,
position: 'top',
color: '#fff'
},
barWidth: 8,
barCategoryGap: 40,
itemStyle: {}
}
]
}
option && myChart.setOption(option)
}
}
}
</script>
@@ -199,6 +409,14 @@
box-sizing: border-box;
}
.DonutChart-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 84px;
margin-bottom: 23px;
}
.appPdDv-title {
position: absolute;
top: 0;
@@ -257,6 +475,10 @@
}
}
.chart1 {
margin: 10px 0 18px;
}
.item-tags {
margin-top: 20px;