Merge remote-tracking branch 'origin/build' into build
This commit is contained in:
aixianling
@@ -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;
|
||||
|
||||
@@ -39,10 +39,10 @@
|
||||
<h2>上报来源分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 230px; width: 100%;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="lineChart1">
|
||||
style="height: 220px; width: 100%; margin-top: 10px;"
|
||||
:ref="'chart1'"
|
||||
:data="chartData1"
|
||||
:ops="chartConfig1">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
@@ -50,10 +50,10 @@
|
||||
<h2>事件办理情況</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 230px; width: 100%;"
|
||||
style="height: 220px; width: 100%; margin-top: 10px;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="lineChart1">
|
||||
:data="chartData2"
|
||||
:ops="chartConfig2">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,6 +84,7 @@
|
||||
<AiDvTable
|
||||
style="margin-top: 16px; height: 220px;"
|
||||
stripe="1"
|
||||
size="mini"
|
||||
:headerStyle="{
|
||||
color: '#02FEFF',
|
||||
fontSize: '12px',
|
||||
@@ -97,13 +98,18 @@
|
||||
</div>
|
||||
<div class="right-left__bottom">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>增长情况</h2>
|
||||
<div class="left AppQxnDv-title__tab">
|
||||
<h2 @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">隐患上报</h2>
|
||||
<h2 @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">咨询服务</h2>
|
||||
<h2 @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">矛盾调解</h2>
|
||||
<h2 @click="currIndex = 3" :class="[currIndex === 3 ? 'active' : '']">其他</h2>
|
||||
</div>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 236px; margin-top: 10px; width: 100%;"
|
||||
:ref="'chart'"
|
||||
:data="chart3Data"
|
||||
:ops="chart3Config">
|
||||
:ref="'chart3'"
|
||||
:data="chartData3"
|
||||
:ops="chartConfig3">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
</AiDvPanel>
|
||||
@@ -124,11 +130,37 @@
|
||||
</div>
|
||||
<div class="right-middle__bottom">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>近期成员使用分布</h2>
|
||||
<h2>事件列表</h2>
|
||||
<div class="right">
|
||||
<el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="上报来源">
|
||||
<el-option label="XXX派出所" value="1"></el-option>
|
||||
<el-option label="XXX派出所" value="2"></el-option>
|
||||
<el-option label="XXX派出所" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
|
||||
<el-option label="XXX派出所" value="1"></el-option>
|
||||
<el-option label="XXX派出所" value="2"></el-option>
|
||||
<el-option label="XXX派出所" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
|
||||
<el-option label="XXX派出所" value="1"></el-option>
|
||||
<el-option label="XXX派出所" value="2"></el-option>
|
||||
<el-option label="XXX派出所" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
|
||||
<el-option label="XXX派出所" value="1"></el-option>
|
||||
<el-option label="XXX派出所" value="2"></el-option>
|
||||
<el-option label="XXX派出所" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-input placeholder="关键词" style="width: 98px;">
|
||||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<AiDvTable
|
||||
style="margin-top: 16px; height: 430px;"
|
||||
:heigth="'100%'"
|
||||
size="mini"
|
||||
stripe="1"
|
||||
:headerStyle="{
|
||||
color: '#02FEFF',
|
||||
@@ -136,9 +168,8 @@
|
||||
fontWeight: '600',
|
||||
backgroundColor: 'rgba(33, 180, 253, 0.1)'
|
||||
}"
|
||||
isShowIndex="1"
|
||||
:config="tableConfig"
|
||||
:data="tableData">
|
||||
:config="eventTableConfig"
|
||||
:data="eventTableData">
|
||||
</AiDvTable>
|
||||
</div>
|
||||
</AiDvPanel>
|
||||
@@ -179,22 +210,64 @@
|
||||
data () {
|
||||
return {
|
||||
value: '',
|
||||
lineData1: [
|
||||
currIndex: 0,
|
||||
chartData2: [
|
||||
{
|
||||
"name": "1月",
|
||||
"v1": 23
|
||||
"已办理": 4,
|
||||
"待处理": 44,
|
||||
"处理中": 23,
|
||||
"已拒绝": 11
|
||||
},
|
||||
{
|
||||
"name": "2月",
|
||||
"v1": 12
|
||||
"已办理": 2,
|
||||
"待处理": 24,
|
||||
"处理中": 23,
|
||||
"已拒绝": 11
|
||||
},
|
||||
{
|
||||
"name": "3月",
|
||||
"v1": 67
|
||||
"已办理": 44,
|
||||
"待处理": 14,
|
||||
"处理中": 2,
|
||||
"已拒绝": 11
|
||||
},
|
||||
{
|
||||
"name": "4月",
|
||||
"v1": 98
|
||||
"已办理": 4,
|
||||
"待处理": 44,
|
||||
"处理中": 3,
|
||||
"已拒绝": 1
|
||||
},
|
||||
{
|
||||
"name": "5月",
|
||||
"已办理": 4,
|
||||
"待处理": 4,
|
||||
"处理中": 23,
|
||||
"已拒绝": 11
|
||||
}
|
||||
],
|
||||
chartData1: [
|
||||
{
|
||||
"name": "1月",
|
||||
"警格上报": 23,
|
||||
"居民上报": 23
|
||||
},
|
||||
{
|
||||
"name": "2月",
|
||||
"警格上报": 23,
|
||||
"居民上报": 23
|
||||
},
|
||||
{
|
||||
"name": "3月",
|
||||
"警格上报": 23,
|
||||
"居民上报": 23
|
||||
},
|
||||
{
|
||||
"name": "4月",
|
||||
"警格上报": 23,
|
||||
"居民上报": 23
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
@@ -252,20 +325,31 @@
|
||||
},
|
||||
{
|
||||
name: '联系TA',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
v1: '联系TA',
|
||||
v2: '联系TA',
|
||||
v3: '联系TA',
|
||||
v4: '联系TA',
|
||||
v5: '联系TA',
|
||||
v6: '联系TA',
|
||||
v7: '联系TA',
|
||||
v8: '联系TA',
|
||||
v9: '联系TA',
|
||||
v10: '联系TA'
|
||||
}
|
||||
],
|
||||
lineChart1: {
|
||||
legend: { show: false },
|
||||
chartConfig1: {
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
top: '40px',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||||
@@ -273,11 +357,64 @@
|
||||
textStyle: { color: '#fff' },
|
||||
axisPointer: { type: 'cross' }
|
||||
},
|
||||
color: ['#7AA3CC', '#33CCCC'],
|
||||
color: ['#33CCCC', '#DBB36E'],
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||||
},
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
minInterval: 1,
|
||||
splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||||
axisPointer: { snap: true }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '警格上报',
|
||||
type: 'bar',
|
||||
barWidth: '15',
|
||||
stack: 'one'
|
||||
},
|
||||
{
|
||||
name: '居民上报',
|
||||
barWidth: '15',
|
||||
type: 'bar',
|
||||
stack: 'one'
|
||||
}
|
||||
]
|
||||
},
|
||||
chartConfig2: {
|
||||
legend: {
|
||||
itemWidth: 16,
|
||||
itemGap: 4,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: '12'
|
||||
},
|
||||
icon: 'roundRect'
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
top: '40px',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||||
borderColor: 'rgba(0, 102, 154, 0.65)',
|
||||
textStyle: { color: '#fff' },
|
||||
axisPointer: { type: 'cross' }
|
||||
},
|
||||
color: ['#33CCCC', '#2C97E8','#BFEAFF', '#DBB36E'],
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {show: false},
|
||||
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||||
},
|
||||
yAxis: {
|
||||
@@ -358,7 +495,7 @@
|
||||
flex: ''
|
||||
}
|
||||
],
|
||||
chart3Data: [
|
||||
chartData3: [
|
||||
{
|
||||
"name": "人员聚集",
|
||||
"已办理": 223,
|
||||
@@ -395,12 +532,12 @@
|
||||
"已拒绝": 23
|
||||
}
|
||||
] ,
|
||||
chart3Config: {
|
||||
chartConfig3: {
|
||||
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%',
|
||||
@@ -478,13 +615,98 @@
|
||||
barCategoryGap: 40,
|
||||
itemStyle: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
eventTableData: [
|
||||
{
|
||||
name: '时间',
|
||||
v1: '04/18',
|
||||
v2: '02/18',
|
||||
v3: '04/18',
|
||||
v4: '04/18',
|
||||
v5: '04/18',
|
||||
v6: '04/18',
|
||||
v7: '04/18',
|
||||
v8: '04/18',
|
||||
v9: '04/18',
|
||||
v10: '04/18'
|
||||
},
|
||||
{
|
||||
name: '事件内容',
|
||||
v1: '咨询如何报考摩托车驾驶咨询如',
|
||||
v2: '咨询如何报考摩托车驾驶咨询如',
|
||||
v3: '咨询如何报考摩托车驾驶咨询如',
|
||||
v4: '咨询如何报考摩托车驾驶咨询如',
|
||||
v5: '咨询如何报考摩托车驾驶咨询如',
|
||||
v6: '咨询如何报考摩托车驾驶咨询如',
|
||||
v7: '咨询如何报考摩托车驾驶咨询如',
|
||||
v8: '咨询如何报考摩托车驾驶咨询如咨询如何报考摩托车驾驶咨询如',
|
||||
v9: '咨询如何报考摩托车驾驶咨询如',
|
||||
v10: '咨询如何报考摩托车驾驶咨询如'
|
||||
},
|
||||
{
|
||||
name: '状态',
|
||||
v1: '已办理',
|
||||
v2: '已办理',
|
||||
v3: '已办理',
|
||||
v4: '已办理',
|
||||
v5: '处理中',
|
||||
v6: '已拒绝',
|
||||
v7: '处理中',
|
||||
v8: '待处理',
|
||||
v9: '处理中',
|
||||
v10: '处理中'
|
||||
},
|
||||
{
|
||||
name: '查看',
|
||||
v1: '详情>>',
|
||||
v2: '详情>>',
|
||||
v3: '详情>>',
|
||||
v4: '详情>>',
|
||||
v5: '详情>>',
|
||||
v6: '详情>>',
|
||||
v7: '详情>>',
|
||||
v8: '详情>>',
|
||||
v9: '详情>>',
|
||||
v10: '详情>>'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableConfig () {
|
||||
return this.tableData.map((v, index) => {
|
||||
if (index === 4) {
|
||||
return {
|
||||
color: '#d0e1e8',
|
||||
align: 'center',
|
||||
width: '',
|
||||
fontSize: '12px',
|
||||
flex: '',
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
'p', {
|
||||
style: {
|
||||
width: '52px',
|
||||
height: '22px',
|
||||
textAlign: 'center',
|
||||
lineHeight: '22px',
|
||||
color: '#D4F2FF',
|
||||
cursor: 'pointer',
|
||||
margin: '0 auto',
|
||||
borderRadius: '4px',
|
||||
backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
|
||||
},
|
||||
on: {
|
||||
click: e => {
|
||||
console.log(params)
|
||||
}
|
||||
},
|
||||
}, params.column
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
color: '#d0e1e8',
|
||||
align: '',
|
||||
@@ -493,6 +715,58 @@
|
||||
flex: ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
eventTableConfig () {
|
||||
return [
|
||||
{
|
||||
color: '#d0e1e8',
|
||||
align: '',
|
||||
width: '',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
},
|
||||
{
|
||||
color: '#d0e1e8',
|
||||
align: 'left',
|
||||
width: '250',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
},
|
||||
{
|
||||
color: '#d0e1e8',
|
||||
align: 'center',
|
||||
width: '',
|
||||
fontSize: '14px',
|
||||
flex: '',
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
'i', {
|
||||
style: {
|
||||
width: '52px',
|
||||
height: '20px',
|
||||
textAlgin: 'center',
|
||||
lineHeight: '20px',
|
||||
color: '#07B794',
|
||||
margin: '0 auto',
|
||||
borderRadius: '2px',
|
||||
background: 'rgba(19, 246, 201, 0.14)',
|
||||
}
|
||||
}, params.column
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
color: '#00AAFF',
|
||||
align: '',
|
||||
width: '',
|
||||
fontSize: '14px',
|
||||
flex: '',
|
||||
click: e => {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -544,12 +818,27 @@
|
||||
color: rgba(172, 201, 230, 0.8);
|
||||
background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
h2:first-child {
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 27px;
|
||||
z-index: 1;
|
||||
width: 9px;
|
||||
height: 2px;
|
||||
background: rgba(41, 77, 102, 1);
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > h2 {
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -562,6 +851,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.AppQxnDv-title__tab {
|
||||
h2 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h2.active {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -654,6 +961,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(179, 229, 229, 1);
|
||||
border: 1px solid #2A7A92;
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(179, 229, 229, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
padding: 0 16px;
|
||||
background: #007994;
|
||||
border: none;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 1px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #B3E5E5;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user