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

70
packages/bigscreen/dv/AppQxnDv.vue
View File

@@ -113,8 +113,25 @@
</div>
</div>
</div>
<div class="wrapper">
<div class="wrapper" style="position: relative;">
<DvMap style="width: 100%; height: 356px;"></DvMap>
<div class="total-info">
<div class="total-info__item">
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon3.png">
<span>民警人数</span>
<i>214</i>
</div>
<div class="total-info__item">
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon2.png">
<span>辅警人数</span>
<i>214</i>
</div>
<div class="total-info__item">
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon1.png">
<span>其他</span>
<i>214</i>
</div>
</div>
</div>
<div class="right-middle__middle">
<div class="wrapper">
@@ -214,6 +231,7 @@
data () {
return {
isShowInfo: false,
value: '',
lineData: [
{
@@ -374,7 +392,7 @@
xAxis: {
type: "category",
axisTick: {show: false},
axisLine: {show: false},
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
axisLabel: {color: '#8FABBF', fontSize: 12},
},
yAxis: {
@@ -445,6 +463,8 @@
barChart: {
xAxis: {
type: "category",
axisTick: {show: false},
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
axisLabel: {color: '#8FABBF', fontSize: 12},
},
yAxis: {
@@ -531,6 +551,12 @@
right: '6%',
bottom: '6%'
},
yAxis: {
axisLine: {show: false},
},
xAxis: {
axisLine: {show: false},
},
color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
series: [
{
@@ -549,7 +575,7 @@
normal: {
textStyle: {
color: '#9BB7D4',
fontSize: 16
fontSize: 14
}
}
}
@@ -611,6 +637,43 @@
margin-bottom: 12px;
}
.total-info {
display: flex;
position: absolute;
flex-direction: column;
right: 11px;
top: 26px;
z-index: 11;
.total-info__item {
display: flex;
align-items: center;
margin-bottom: 11px;
&:last-child {
margin-bottom: 0;
}
img {
width: 22px;
height: 22px;
}
span {
width: 60px;
margin: 0 16px 0 6px;
color: #C6D6E6;
font-size: 14px;
}
i {
font-style: normal;
font-size: 16px;
color: #fff;
}
}
}
.AppQxnDv-title {
display: flex;
position: relative;
@@ -763,7 +826,6 @@
.right-left__middle {
display: flex;
.left {
width: 245px;
margin-right: 12px;

4
packages/bigscreen/dv/AppQxnEventDv.vue
View File

@@ -536,8 +536,8 @@
xAxis: {
type: "category",
axisTick: {show: false},
axisLine: {show: false},
axisLabel: {color: '#8FABBF', fontSize: 12}
axisLabel: {color: '#8FABBF', fontSize: 12},
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } }
},
grid: {
left: '0%',

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>