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 17:36:07 +08:00
parent 73080b55f8
commit b804a7e5aa
1 changed files with 83 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,7 @@
</div>
</div>
</div>
<div class="chart1" style="width: 100%; height: 114px;"></div>
<div class="chart1" style="width: 100%; height: 134px;"></div>
</div>
<div class="item">
<div class="title">居民群统计</div>
@@ -67,7 +67,7 @@
</div>
</div>
</div>
<div class="chart2" style="width: 100%; height: 114px;"></div>
<div class="chart2" style="width: 100%; height: 134px;"></div>
</div>
<div class="item item-tags">
<div class="title">标签人群</div>
@@ -98,21 +98,22 @@
</div>
<div class="item">
<div class="title">单聊统计</div>
<div class="item-top">
<div class="item-top__item">
<div class="item-top dl">
<div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
</div>
<div class="item-top__item">
<div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
</div>
</div>
<div class="chart3" style="width: 336px; height: 114px;"></div>
<div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 134px;"></div>
<div class="chart4" v-show="dlIndex === 1" style="width: 336px; height: 134px;"></div>
</div>
<div class="item item-tags">
<div class="title">群聊统计</div>
<div class="chart4" style="width: 336px; height: 114px;"></div>
<div class="chart4" style="width: 336px; height: 134px;"></div>
</div>
</div>
</div>
@@ -216,7 +217,8 @@
data () {
return {
leftIndex: 0,
rightIndex: 0
rightIndex: 0,
dlIndex: 0
}
},
@@ -225,8 +227,14 @@
setTimeout(() => {
this.initLineChart('.chart1')
this.initLineChart('.chart2')
this.initBarChart('.chart3')
this.initBarChart('.chart4')
this.initBarChart('.chart4', [
{offset: 0, color: 'rgba(66, 255, 254, 1)'},
{offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
])
this.initBarChart('.chart3', [
{offset: 0, color: 'rgba(66, 187, 255, 1)'},
{offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
])
}, 500)
})
},
@@ -314,7 +322,7 @@
option && myChart.setOption(option)
},
initBarChart (el) {
initBarChart (el, color) {
var chartDom = document.querySelector(el)
var myChart = echarts.init(chartDom)
var option
@@ -357,10 +365,7 @@
x2: 0,
y: 0,
y2: 1,
colorStops: [
{offset: 0, color: 'rgba(47, 211, 241, 1)'},
{offset: 1, color: 'rgba(47, 211, 241, 0)'}
]
colorStops: color
}
],
tooltip: {
@@ -414,7 +419,69 @@
align-items: center;
justify-content: space-between;
height: 84px;
margin-bottom: 23px;
margin-bottom: 20px;
}
.dl {
display: flex;
align-items: center;
justify-content: space-between;
.item-top__item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 164px;
height: 52px;
line-height: 1;
cursor: pointer;
user-select: none;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl3.png);
background-size: 100% 100%;
h2 {
margin-bottom: 4px;
color: #4488FB;
font-size: 12px;
}
&:nth-of-type(2) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl4.png);
background-size: 100% 100%;
h2 {
color: #2AB7D1;
}
}
p {
font-size: 14px;
color: #fff;
font-weight: bold;
font-style: oblique;
}
&.active {
&:nth-of-type(1) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl1.png);
background-size: 100% 100%;
h2 {
color: #fff;
}
}
&:nth-of-type(2) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl2.png);
background-size: 100% 100%;
h2 {
color: #fff;
}
}
}
}
}
.appPdDv-title {