1297 lines
35 KiB
Vue
1297 lines
35 KiB
Vue
<template>
|
||
<div class="AppQxnDv">
|
||
<div class="left">
|
||
<AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
|
||
</AiDvPanel>
|
||
<div class="left-list">
|
||
<div
|
||
class="left-item"
|
||
v-for="(item, index) in areaList"
|
||
:class="[gridParentId === item.gridId ? 'active' : '']"
|
||
:key="index"
|
||
@click="init(item.gridId)">
|
||
<i>{{ index + 1 }}</i>
|
||
<div class="left-item__top">
|
||
<h2>{{ item.gridName }}</h2>
|
||
<el-select v-model="gridId" size="mini" @change="onChange" v-if="gridParentId === item.gridId && index !== 0" placeholder="请选择派出所">
|
||
<el-option
|
||
:label="item.gridName"
|
||
:value="item.gridId"
|
||
v-for="(item, index) in policeStationList"
|
||
:key="index">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="left-item__bottom">
|
||
<span>居民数量：{{ item.customerCount + item.groupMemberCount }}</span>
|
||
<span>成员：{{ item.allGridMemberCount }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="right-left">
|
||
<AiDvPanel style="width: 100%" border="border6" title="微警务群概况">
|
||
<div class="right-left__total AppQxnDv-total">
|
||
<div class="item">
|
||
<h2>全部人员数</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wjwqgkInfo['群人数'] ? wjwqgkInfo['群人数'] + wjwqgkInfo['添加好友数'] : 0 }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>群人数</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wjwqgkInfo['群人数'] }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>添加好友数</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wjwqgkInfo['添加好友数'] }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>昨日新增</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wjwqgkInfo['昨日新增'] }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>增长情况</h2>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 200px; width: 500px;"
|
||
:ref="'chart'"
|
||
:data="zzData"
|
||
:ops="lineChart1">
|
||
</ai-echart-v2>
|
||
</div>
|
||
<div class="right-left__middle">
|
||
<div class="left">
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>覆盖率</h2>
|
||
</div>
|
||
<DoughnutChart :ratio="fglRate" :value="fglData"></DoughnutChart>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>群标签化率</h2>
|
||
</div>
|
||
<DoughnutChart :ratio="qbqRate" :value="qbqlData"></DoughnutChart>
|
||
</div>
|
||
</div>
|
||
<div class="right wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>群标签情况</h2>
|
||
<el-select v-model="value" style="width: 92px" 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>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 220px; width: 100%; margin-top: 10px;"
|
||
:ref="'chart2'"
|
||
:data="lineData1"
|
||
:ops="barChart8">
|
||
</ai-echart-v2>
|
||
</div>
|
||
</div>
|
||
<div class="right-left__bottom">
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>单位成员关系人数</h2>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 236px; width: 100%; margin-top: 10px;"
|
||
:ref="'chart2'"
|
||
:data="dwData"
|
||
:ops="barChart8">
|
||
</ai-echart-v2>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>群人数规模分布</h2>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 180px; width: 100%; margin-top: 20px;"
|
||
:ref="'chart2'"
|
||
:data="qrsGmData"
|
||
:ops="pieChart">
|
||
</ai-echart-v2>
|
||
</div>
|
||
</div>
|
||
</AiDvPanel>
|
||
</div>
|
||
<div class="right-middle">
|
||
<AiDvPanel style="width: 100%" border="border6" title="综合概况图">
|
||
<div class="right-left__total AppQxnDv-total">
|
||
<div class="item">
|
||
<h2>分局数量</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['分局数量'] }}</span>
|
||
<i>个</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>派出所</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['派出所数量'] }}</span>
|
||
<i>个</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>成员总数</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['成员总数'] }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>已激活</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['已激活'] }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>末激活</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['未激活'] }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrapper" style="position: relative;">
|
||
<DvMap :instance="instance" style="width: 100%; height: 376px;"></DvMap>
|
||
<div class="total-info">
|
||
<div class="total-info__item">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon3.png">
|
||
<span>民警人数</span>
|
||
<i>{{ middleTotalInfo['民警'] }}</i>
|
||
</div>
|
||
<div class="total-info__item">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon2.png">
|
||
<span>辅警人数</span>
|
||
<i>{{ middleTotalInfo['辅警'] }}</i>
|
||
</div>
|
||
<div class="total-info__item">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon1.png">
|
||
<span>其他</span>
|
||
<i>{{ middleTotalInfo['成员总数'] ? middleTotalInfo['成员总数'] - middleTotalInfo['民警'] - middleTotalInfo['辅警'] : 0 }}</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-middle__middle">
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>成员激活</h2>
|
||
</div>
|
||
<DoughnutChart
|
||
:ratio="cyjhRate"
|
||
:value="cyjhData">
|
||
</DoughnutChart>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>日均活跃率</h2>
|
||
</div>
|
||
<DoughnutChart
|
||
:ratio="'61'"
|
||
:value="[{key: '活跃成员', value: '6005'}, {key: '激活成员', value: '9789'}]">
|
||
</DoughnutChart>
|
||
</div>
|
||
</div>
|
||
<div class="right-middle__bottom">
|
||
<div class="AppQxnDv-title">
|
||
<h2>近期成员使用分布</h2>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 236px; width: 100%;"
|
||
:ref="'chart'"
|
||
:data="lineData"
|
||
:ops="lineChart1">
|
||
</ai-echart-v2>
|
||
</div>
|
||
</AiDvPanel>
|
||
</div>
|
||
<div class="right-right">
|
||
<AiDvPanel style="height: auto;" border="border6" title="群动态概况">
|
||
<div class="right-left__total AppQxnDv-total">
|
||
<div class="item">
|
||
<h2>群总数</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wxGroupOverview['群数量'] }}</span>
|
||
<i>个</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>群主人数</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wxGroupOverview['群主人数'] }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>群人员活跃数(30天)</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wxGroupOverview['群人员活跃度(30天)'] }}</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>群消息数(30天)</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wxGroupOverview['群消息数(30天)'] }}</span>
|
||
<i>个</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-right__top">
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>群活跃率(7日）</h2>
|
||
</div>
|
||
<DoughnutChart
|
||
:ratio="qhyRate"
|
||
:value="qhyData">
|
||
</DoughnutChart>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>成员活跃(7日）</h2>
|
||
</div>
|
||
<DoughnutChart
|
||
:ratio="rhyRate"
|
||
:value="rhyData">
|
||
</DoughnutChart>
|
||
</div>
|
||
</div>
|
||
<div class="right-left__middle">
|
||
<div class="AppQxnDv-title">
|
||
<h2>各单位群主及群分布</h2>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 230px; width: 100%; margin-top: 10px;"
|
||
:ref="'chart5'"
|
||
:data="barChartData"
|
||
:ops="barChart">
|
||
</ai-echart-v2>
|
||
</div>
|
||
</AiDvPanel>
|
||
<AiDvPanel class="bottom" style="width: 100%" border="border6" title="群动态多维度排行">
|
||
<ai-table
|
||
width="100%"
|
||
max-height="320px"
|
||
height="310px"
|
||
:tableData="tableList"
|
||
:col-configs="colConfigs"
|
||
:isShowPagination="false"
|
||
@getList="() => {}">
|
||
<el-table-column slot="index" label="排名" align="center" width="38">
|
||
<template slot-scope="{ $index }">
|
||
<div class="table-index" :class="[$index < 3 ? 'table-index__active' : '']">
|
||
<span>{{ $index + 1 }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</AiDvPanel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import DvMap from './components/DvMap'
|
||
import DoughnutChart from './components/DoughnutChart'
|
||
export default {
|
||
name: 'AppQxnDv',
|
||
label: '警民互联',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
},
|
||
|
||
components: {
|
||
DvMap,
|
||
DoughnutChart
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
isShowInfo: false,
|
||
lineData: [
|
||
{
|
||
"name": "阿斯达",
|
||
"v1": 23,
|
||
"v2": 33
|
||
},
|
||
{
|
||
"name": "水电费",
|
||
"v1": 12,
|
||
"v2": 34
|
||
},
|
||
{
|
||
"name": "凡哥",
|
||
"v1": 67,
|
||
"v2": 25
|
||
},
|
||
{
|
||
"name": "党费",
|
||
"v1": 98,
|
||
"v2": 85
|
||
}
|
||
],
|
||
lineData1: [
|
||
{
|
||
"name": "1月",
|
||
"v1": 23
|
||
},
|
||
{
|
||
"name": "2月",
|
||
"v1": 12
|
||
},
|
||
{
|
||
"name": "3月",
|
||
"v1": 67
|
||
},
|
||
{
|
||
"name": "4月",
|
||
"v1": 98
|
||
}
|
||
],
|
||
lineChart1: {
|
||
legend: {
|
||
icon: 'roundRect',
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
top: '35px',
|
||
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: ['#7AA3CC', '#33CCCC'],
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {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 }
|
||
},
|
||
daemon: (color) => ({
|
||
showSymbol: false,
|
||
smooth: true,
|
||
lineStyle: {
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 2,
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: this.Hex2RGBA(color, 0.3) },
|
||
{ offset: 1, color: this.Hex2RGBA(color, 0.1) }
|
||
]
|
||
}
|
||
}
|
||
})
|
||
},
|
||
barChart8: {
|
||
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)',
|
||
borderColor: 'rgba(0, 102, 154, 0.65)',
|
||
textStyle: { color: '#fff' },
|
||
axisPointer: { type: 'cross' }
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||
axisTick: {show: false},
|
||
},
|
||
xAxis: {
|
||
nameGap: 23, minInterval: 1,
|
||
splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
|
||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||
},
|
||
color: ['#65E0DE', '#E7C074', '#7AA3CC'],
|
||
series: [
|
||
{
|
||
name: '民警',
|
||
type: 'bar',
|
||
barWidth: '15',
|
||
stack: 'one'
|
||
},
|
||
{
|
||
name: '辅警',
|
||
barWidth: '15',
|
||
type: 'bar',
|
||
stack: 'one'
|
||
},
|
||
{
|
||
name: '其他',
|
||
barWidth: '15',
|
||
type: 'bar',
|
||
stack: 'one'
|
||
}
|
||
]
|
||
},
|
||
barChart: {
|
||
legend: {
|
||
icon: 'roundRect',
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
top: '35px',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {show: false},
|
||
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
|
||
axisLabel: {color: '#8FABBF', fontSize: 10, rotate: 30},
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||
borderColor: 'rgba(0, 102, 154, 0.65)',
|
||
textStyle: { color: '#fff' },
|
||
axisPointer: { type: 'cross' }
|
||
},
|
||
yAxis: {
|
||
nameGap: 23,
|
||
minInterval: 1,
|
||
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
|
||
axisPointer: { show: false },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
triggerTooltip: false,
|
||
shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
|
||
},
|
||
color: [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 1, color: 'rgba(51, 204, 204, 1)' },
|
||
{ offset: 0, color: 'rgba(31, 89, 89, 0.25)' }
|
||
]
|
||
},
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(219, 179, 110, 0.1)' },
|
||
{ offset: 1, color: 'rgba(219, 179, 110, 1)' }
|
||
]
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '群主数量',
|
||
type: 'bar',
|
||
barWidth: '15'
|
||
},
|
||
{
|
||
name: '群数量',
|
||
barWidth: '15',
|
||
type: 'bar'
|
||
}
|
||
]
|
||
},
|
||
pieChart: {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||
borderColor: 'rgba(0, 102, 154, 0.65)',
|
||
textStyle: { color: '#fff' },
|
||
axisPointer: { type: 'cross' }
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
grid: {
|
||
left: '6%',
|
||
top: '6%',
|
||
right: '6%',
|
||
bottom: '6%'
|
||
},
|
||
yAxis: {
|
||
axisLine: {show: false},
|
||
},
|
||
xAxis: {
|
||
axisLine: {show: false},
|
||
},
|
||
color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['50%', '66%'],
|
||
labelLine:{
|
||
normal:{
|
||
length: 2,
|
||
lineStyle: {
|
||
color: '#526D7A'
|
||
}
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
normal: {
|
||
textStyle: {
|
||
color: '#9BB7D4',
|
||
fontSize: 14
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
policeStationList: [],
|
||
areaList: [],
|
||
gridId: '',
|
||
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
|
||
middleTotalInfo: {},
|
||
cyActivityInfo: {},
|
||
wxGroupOverview: {},
|
||
wjwqgkGMFBInfo: {},
|
||
wjwqgkInfo: {},
|
||
colConfigs: [
|
||
{ slot: 'index' },
|
||
{ prop: 'ownerName', label: '姓名', align: 'left', width: 58 },
|
||
{ prop: 'deptName', label: '单位', align: 'left' },
|
||
{ prop: 'groupCount', label: '群数量', align: 'center', width: 56 },
|
||
{ prop: 'groupMemberCount', label: '群人员', align: 'center', width: 56 },
|
||
{ prop: 'newMemberCount', label: '新增群人员', align: 'center', width: 80 },
|
||
// { prop: 'hasMsgGroupCount', label: '有消息的群', align: 'center', width: 80 },
|
||
{ prop: 'msgCount', label: '群聊人数', align: 'center', width: 80 },
|
||
{ prop: 'hasMsgMemberCount', label: '群消息总数', align: 'center', width: 80 }
|
||
]
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
qbqlData () {
|
||
return [{key: '活跃成员', value: 6006}, {key: '激活成员', value: 9789}]
|
||
},
|
||
|
||
qbqRate () {
|
||
return 61
|
||
if (!this.cyActivityInfo['已激活']) {
|
||
return 0
|
||
}
|
||
|
||
return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
|
||
},
|
||
fglData () {
|
||
return [{key: '已激活成员', value: 9789}, {key: '未激活成员', value: 6}]
|
||
},
|
||
|
||
fglRate () {
|
||
return 99.93
|
||
if (!this.cyActivityInfo['已激活']) {
|
||
return 0
|
||
}
|
||
|
||
return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
|
||
},
|
||
|
||
cyjhData () {
|
||
return [{key: '已激活', value: this.cyActivityInfo['已激活']}, {key: '未激活', value: this.cyActivityInfo['未激活']}]
|
||
},
|
||
|
||
cyjhRate () {
|
||
if (!this.cyActivityInfo['已激活']) {
|
||
return 0
|
||
}
|
||
|
||
return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
|
||
},
|
||
|
||
qhyData () {
|
||
return [{key: '活跃居民群', value: this.wxGroupOverview['活跃居民群数量(7天)']}, {key: '全部居民群', value: this.wxGroupOverview['群数量']}]
|
||
},
|
||
|
||
qhyRate () {
|
||
if (!this.wxGroupOverview['活跃居民群数量(7天)']) {
|
||
return 0
|
||
}
|
||
|
||
return Number(((this.wxGroupOverview['活跃居民群数量(7天)'] / (this.wxGroupOverview['群数量'] * 7)) * 100).toFixed(2))
|
||
},
|
||
|
||
rhyData () {
|
||
return [{key: '活跃成员', value: (this.wxGroupOverview['活跃群成员数量(7天)'] / 7).toFixed(0)}, {key: '群成员 ', value: (this.wxGroupOverview['群成员数量'] / 7).toFixed(0)}]
|
||
},
|
||
|
||
rhyRate () {
|
||
if (!this.wxGroupOverview['群成员数量']) {
|
||
return 0
|
||
}
|
||
|
||
return Number(((this.wxGroupOverview['活跃群成员数量(7天)'] / (this.wxGroupOverview['群成员数量'])) * 100).toFixed(2))
|
||
},
|
||
|
||
barChartData () {
|
||
if (!this.wxGroupOverview['各单位群主及群分布']) {
|
||
return []
|
||
}
|
||
|
||
return this.wxGroupOverview['各单位群主及群分布'].map(v => {
|
||
return {
|
||
name: v['网格名称'],
|
||
'群主数量': v['群主数量'],
|
||
'群数量': v['群数量']
|
||
}
|
||
})
|
||
},
|
||
|
||
dwData () {
|
||
if (!this.wjwqgkGMFBInfo.length) {
|
||
return []
|
||
}
|
||
|
||
return this.wjwqgkGMFBInfo.map(v => {
|
||
return {
|
||
'规模': v['规模'],
|
||
'民警': v['民警'],
|
||
'辅警': v['辅警'],
|
||
'其他': v['其他']
|
||
}
|
||
})
|
||
},
|
||
|
||
qrsGmData () {
|
||
if (!this.wjwqgkGMFBInfo.length) {
|
||
return []
|
||
}
|
||
|
||
return this.wjwqgkGMFBInfo.map(v => {
|
||
return {
|
||
'群人数规模分布': v['规模'],
|
||
v: v['群数量']
|
||
}
|
||
})
|
||
},
|
||
|
||
tableList () {
|
||
const list = this.wxGroupOverview['群动态多维度排行']
|
||
if (!list) {
|
||
return []
|
||
}
|
||
|
||
return list
|
||
},
|
||
|
||
zzData () {
|
||
if (!this.wjwqgkInfo['增长情况']) {
|
||
return []
|
||
}
|
||
|
||
return this.wjwqgkInfo['增长情况'].map(v => {
|
||
return {
|
||
'月份': v['月份'],
|
||
'居民人数': v['居民人数'],
|
||
'新增居民': v['新增居民']
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
mounted () {
|
||
this.init()
|
||
},
|
||
|
||
methods: {
|
||
onChange () {
|
||
this.$nextTick(() => {
|
||
this.instance.post(`/api/wxgridinfo/tree`, null, {
|
||
params: {
|
||
gridParentId: this.gridId,
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
}
|
||
})
|
||
this.getInfo()
|
||
})
|
||
},
|
||
|
||
init (gridId) {
|
||
this.gridId = ''
|
||
this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
|
||
this.instance.post(`/api/wxgridinfo/tree`, null, {
|
||
params: {
|
||
gridParentId: gridId || '',
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
if (gridId) {
|
||
this.policeStationList = res.data
|
||
} else {
|
||
this.areaList = res.data
|
||
}
|
||
|
||
this.getInfo()
|
||
}
|
||
})
|
||
},
|
||
|
||
getInfo () {
|
||
this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.middleTotalInfo = res.data
|
||
}
|
||
})
|
||
|
||
this.instance.post(`/api/wxgridinfo/wxGroupOverview`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.wxGroupOverview = res.data
|
||
}
|
||
})
|
||
|
||
this.instance.post(`/api/wxgridinfo/wjwqgk`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.wjwqgkInfo = res.data
|
||
}
|
||
})
|
||
|
||
this.instance.post(`/api/wxgridinfo/wjwqgkGMFB`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.wjwqgkGMFBInfo = res.data
|
||
}
|
||
})
|
||
|
||
this.instance.post(`/api/wxgridinfo/cyActivity`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.cyActivityInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
Hex2RGBA(color, alpha = 1) {
|
||
let hex = 0;
|
||
if (color.charAt(0) == "#") {
|
||
if (color.length == 4) {
|
||
//检测诸如#FFF简写格式
|
||
color = "#" + color.charAt(1).repeat(2) +
|
||
color.charAt(2).repeat(2) +
|
||
color.charAt(3).repeat(2);
|
||
}
|
||
hex = parseInt(color.slice(1), 16);
|
||
}
|
||
let r = hex >> 16 & 0xFF;
|
||
let g = hex >> 8 & 0xFF;
|
||
let b = hex & 0xFF;
|
||
return `rgba(${r},${g},${b},${alpha})`;
|
||
},
|
||
|
||
RGBtoHex(r, g, b) {
|
||
let hex = r << 16 | g << 8 | b;
|
||
return "#" + hex.toString(16);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppQxnDv {
|
||
display: flex;
|
||
height: 100%;
|
||
padding-top: 16px;
|
||
box-sizing: border-box;
|
||
background: #0c0c0c;
|
||
overflow: hidden;
|
||
|
||
.table-index {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
span {
|
||
width: 22px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
border: 1px solid #42BED5;
|
||
}
|
||
|
||
&.table-index__active span {
|
||
border-color: #EDAA38;
|
||
}
|
||
}
|
||
|
||
.wrapper {
|
||
flex: 1;
|
||
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;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
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;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 27px;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: rgba(41, 77, 102, 1);
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: #5299CC;
|
||
content: ' ';
|
||
}
|
||
|
||
&::before {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 14px;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: rgba(41, 77, 102, 1);
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
.AppQxnDv-total {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
|
||
h2 {
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.item-bottom {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
span {
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
color: #02FEFF;
|
||
}
|
||
|
||
i {
|
||
margin-left: 4px;
|
||
font-style: normal;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-select) {
|
||
height: 24px;
|
||
line-height: 24px;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 0 26px 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__suffix {
|
||
right: 1px;
|
||
top: 0px;
|
||
}
|
||
|
||
i {
|
||
color: #B3E5E5;
|
||
}
|
||
}
|
||
|
||
:deep(.ai-table) {
|
||
.el-table {
|
||
font-size: 11px;
|
||
color: #d0e1e8;
|
||
background-color: transparent!important;
|
||
|
||
th.el-table__cell.is-leaf, .el-table td.el-table__cell {
|
||
border: none!important;
|
||
}
|
||
|
||
tr.el-table__row--striped td {
|
||
background: rgba(33, 180, 253, 0.1)!important;
|
||
}
|
||
|
||
.el-table__header tr th:first-child .cell {
|
||
padding: 0!important;
|
||
}
|
||
|
||
.el-table__body tr td:first-child .cell {
|
||
padding: 0!important;
|
||
}
|
||
|
||
&.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||
background-color: rgba(33, 180, 253, 0.1)!important;
|
||
}
|
||
|
||
th.el-table__cell {
|
||
background-color: transparent;
|
||
}
|
||
|
||
tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.el-table__cell {
|
||
padding: 7px 0;
|
||
color: #d0e1e8;
|
||
}
|
||
|
||
.el-table__header tr .cell {
|
||
color: #02FEFF!important;
|
||
}
|
||
}
|
||
.ai-table__header {
|
||
background: rgba(33, 180, 253, 0.1)!important;
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 14px;
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
min-height: 20px;
|
||
background-clip: content-box;
|
||
box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
& > .right {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
|
||
.right-left {
|
||
width: 500px;
|
||
|
||
.right-left__middle {
|
||
display: flex;
|
||
.left {
|
||
width: 245px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.right-left__bottom {
|
||
display: flex;
|
||
|
||
div {
|
||
flex: 1;
|
||
|
||
&:first-child {
|
||
margin-right: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right-middle {
|
||
width: 542px;
|
||
margin: 0 14px;
|
||
|
||
.right-middle__middle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
|
||
.right-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
// flex: 1;
|
||
width: 570px;
|
||
overflow: hidden;
|
||
|
||
.bottom {
|
||
padding-top: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.right-right__top {
|
||
display: flex;
|
||
margin-bottom: 16px;
|
||
|
||
& > div {
|
||
flex: 1;
|
||
|
||
&:first-child {
|
||
margin-right: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 230px;
|
||
margin-right: 10px;
|
||
|
||
.left-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
|
||
.left-item {
|
||
position: relative;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
margin-bottom: 10px;
|
||
padding: 30px 14px 14px;
|
||
background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.2) 100%);
|
||
border-radius: 6px;
|
||
box-shadow: inset 0 -1px 0 0 transparent;
|
||
transition: all ease 0.3s;
|
||
|
||
&:hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
&.active {
|
||
background-image: linear-gradient(0deg, #28b6fd24 0%, #00669aa6 99%);
|
||
box-shadow: inset 0 -1px 0 0 #23B2C7;
|
||
|
||
&:hover {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
i {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 22px;
|
||
height: 21px;
|
||
line-height: 21px;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
|
||
border-radius: 6px 0 6px 0;
|
||
}
|
||
|
||
.left-item__bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.left-item__top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
.el-select {
|
||
width: 100px;
|
||
}
|
||
|
||
h2 {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|