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-09-07 14:04:21 +08:00
parent 6dfb287c9f
commit 022a15cc9d
1 changed files with 136 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
project/dv/apps/AppXyDv.vue
View File

@@ -130,6 +130,22 @@
<div class="right-item middle-wrapper">
<div class="title">分类统计</div>
<div class="item-table">
<div class="left">
<div class="chart10" style="width: 100%; height: 240px;"></div>
<div class="left-text">
<h2>240</h2>
<span>总数</span>
</div>
</div>
<div class="right">
<div class="right-item" v-for="(item, index) in 5" :key="index">
<div class="right-item__left">
<i></i>
<span>类型A</span>
</div>
<p>类型A</p>
</div>
</div>
</div>
</div>
<div class="right-item bottom-wrapper">
@@ -220,6 +236,14 @@
if (document.querySelector('.AiDvWrapper .viewPanel')) {
document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
}
this.initChart5('.chart10', [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
])
})
},
@@ -227,6 +251,60 @@
onNodeClick (e) {
this.getGridInfo(e)
},
initChart5 (el, data) {
var chartDom = document.querySelector(el)
var myChart = echarts.init(chartDom)
var option = {
color: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#DBE8FF', '#FD6C39'],
tooltip: {
trigger: 'item'
},
grid: {
top: '0%',
left: '0%',
right: '0%',
bottom: '0%',
height: 230,
containLabel: true
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: '#030D1C',
borderWidth: 3
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
option && myChart.setOption(option)
},
getInfo () {
this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
@@ -1019,39 +1097,72 @@
margin-bottom: 23px;
.item-table {
.item-table__header {
position: relative;
height: 240px;
.left {
position: relative;
left: -70px;
height: 240px;
.left-text {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 24px;
color: #82C5FF;
font-size: 14px;
background: rgba(35,160,172,0.2000);
}
justify-items: center;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
line-height: 1;
transform: translate(-50%, -50%);
.item-table__body {
height: 280px;
overflow-y: overlay;
.item-table__item {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 24px;
h2 {
font-size: 36px;
color: #fff;
font-size: 14px;
background: rgba(35,160,172,0.2000);
&:nth-of-type(2n - 1) {
background: transparent;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 4px;
color: #a4adbd;
font-size: 20px;
}
}
}
.right {
position: absolute;
right: 0;
top: 50%;
z-index: 111;
transform: translateY(-50%);
.right-item {
display: flex;
align-items: center;
justify-content: space-between;
.right-item__left {
display: flex;
align-items: center;
margin-right: 40px;
i {
width: 14px;
height: 14px;
margin-right: 8px;
background: #2891FF;
}
span {
font-size: 14px;
color: #fff;
}
}
P {
color: #fff;
font-size: 14px;
}
}
}