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
2023-04-25 17:25:29 +08:00
parent 4d7b5949c1
commit b126053e09
3 changed files with 207 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
packages/bigscreen/dv/components/DvMap.vue
View File

@@ -1,6 +1,47 @@
<template>
<div class="AiDvMap" v-resize="onDomResize">
<div class="chart-map" :class="v" style="width: 100%; height: 100%"></div>
<transition name="fade">
<div class="info" v-if="isShowInfo">
<div class="info-mask"></div>
<div class="info-content">
<div class="info-title">
<h2>兴仁公安局</h2>
</div>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShowInfo = false" />
<div class="info-wrapper">
<div class="info-wrapper__item">
<label>下属单位：</label>
<span>派出所</span>
</div>
<div class="info-wrapper__item">
<label>居民群：</label>
<span>派出所</span>
</div>
<div class="info-wrapper__item">
<label>成员人数：</label>
<span>派出所</span>
</div>
<div class="info-wrapper__item">
<label>群人数：</label>
<span>派出所</span>
</div>
<div class="info-wrapper__item">
<label>激活比例：</label>
<span>派出所</span>
</div>
<div class="info-wrapper__item">
<label>好友人数：</label>
<span>派出所</span>
</div>
<div class="info-wrapper__item">
<label>群主人数：</label>
<span>派出所</span>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
@@ -14,7 +55,8 @@ export default {
return {
timer: null,
v: `AiDvMap-${new Date().getTime()}`,
chart: null
chart: null,
isShowInfo: false
}
},
directives: {
@@ -230,6 +272,9 @@ export default {
]
}
this.chart.setOption(option)
this.chart.on('click', e => {
this.isShowInfo = true
})
}
})
},
@@ -261,11 +306,97 @@ export default {
</script>
<style lang="scss" scoped>
.AiDvMap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.AiDvMap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
.info {
position: fixed;
left: 0;
top: 0;
z-index: 111;
width: 100%;
height: 100%;
overflow: hidden;
.info-mask {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba($color: #000000, $alpha: 0);
}
.info-content {
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
width: 378px;
height: 254px;
padding: 15px 22px 0;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/info-bg.png);
background-size: 100% 100%;
transform: translate(-50%, -50%);
.info-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 40px;
.info-wrapper__item {
display: flex;
width: 50%;
margin-bottom: 20px;
label {
width: 70px;
margin-right: 20px;
color: #fff;
text-align: right;
font-size: 14px;
font-weight: 500;
}
span {
flex: 1;
font-size: 14px;
color: #FF8533;
}
}
}
img {
position: absolute;
top: 30px;
right: 18px;
z-index: 1;
width: 24px;
height: 24px;
cursor: pointer;
transition: all ease 300;
&:hover {
opacity: 0.6;
}
}
.info-title {
display: flex;
align-items: center;
h2 {
font-size: 16px;
color: #fff;
}
}
}
}
}
</style>