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>
</div> </div>
<div class="chart1" style="width: 100%; height: 114px;"></div> <div class="chart1" style="width: 100%; height: 134px;"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">居民群统计</div> <div class="title">居民群统计</div>
@@ -67,7 +67,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="chart2" style="width: 100%; height: 114px;"></div> <div class="chart2" style="width: 100%; height: 134px;"></div>
</div> </div>
<div class="item item-tags"> <div class="item item-tags">
<div class="title">标签人群</div> <div class="title">标签人群</div>
@@ -98,21 +98,22 @@
</div> </div>
<div class="item"> <div class="item">
<div class="title">单聊统计</div> <div class="title">单聊统计</div>
<div class="item-top"> <div class="item-top dl">
<div class="item-top__item"> <div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
<h2>单聊会话</h2> <h2>单聊会话</h2>
<p>279</p> <p>279</p>
</div> </div>
<div class="item-top__item"> <div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
<h2>单聊会话</h2> <h2>单聊会话</h2>
<p>279</p> <p>279</p>
</div> </div>
</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>
<div class="item item-tags"> <div class="item item-tags">
<div class="title">群聊统计</div> <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> </div>
</div> </div>
@@ -216,7 +217,8 @@
data () { data () {
return { return {
leftIndex: 0, leftIndex: 0,
rightIndex: 0 rightIndex: 0,
dlIndex: 0
} }
}, },
@@ -225,8 +227,14 @@
setTimeout(() => { setTimeout(() => {
this.initLineChart('.chart1') this.initLineChart('.chart1')
this.initLineChart('.chart2') 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) }, 500)
}) })
}, },
@@ -314,7 +322,7 @@
option && myChart.setOption(option) option && myChart.setOption(option)
}, },
initBarChart (el) { initBarChart (el, color) {
var chartDom = document.querySelector(el) var chartDom = document.querySelector(el)
var myChart = echarts.init(chartDom) var myChart = echarts.init(chartDom)
var option var option
@@ -357,10 +365,7 @@
x2: 0, x2: 0,
y: 0, y: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: color
{offset: 0, color: 'rgba(47, 211, 241, 1)'},
{offset: 1, color: 'rgba(47, 211, 241, 0)'}
]
} }
], ],
tooltip: { tooltip: {
@@ -414,7 +419,69 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 84px; 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 { .appPdDv-title {