Merge remote-tracking branch 'origin/build' into build
This commit is contained in:
aixianling
@@ -13,7 +13,7 @@
|
||||
<i>{{ index + 1 }}</i>
|
||||
<div class="left-item__top">
|
||||
<h2>{{ item.gridName }}</h2>
|
||||
<el-select v-model="gridId" size="mini" v-if="gridParentId === item.gridId && index !== 0" placeholder="请选择派出所">
|
||||
<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"
|
||||
@@ -33,10 +33,31 @@
|
||||
<div class="right-left">
|
||||
<AiDvPanel style="width: 100%" border="border6" title="微警务群概况">
|
||||
<div class="right-left__total AppQxnDv-total">
|
||||
<div class="item" v-for="(item, index) in 4" :key="index">
|
||||
<div class="item">
|
||||
<h2>全部人员数</h2>
|
||||
<div class="item-bottom">
|
||||
<span>726,079</span>
|
||||
<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>
|
||||
@@ -48,7 +69,7 @@
|
||||
<ai-echart-v2
|
||||
style="height: 200px; width: 500px;"
|
||||
:ref="'chart'"
|
||||
:data="lineData"
|
||||
:data="zzData"
|
||||
:ops="lineChart1">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
@@ -58,13 +79,13 @@
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>覆盖率</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="60"></DoughnutChart>
|
||||
<DoughnutChart :ratio="fglRate" :value="fglData"></DoughnutChart>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>群标签化率</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
<DoughnutChart :ratio="qbqRate" :value="qbqlData"></DoughnutChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right wrapper">
|
||||
@@ -77,7 +98,7 @@
|
||||
</el-select>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 230px; width: 245px;"
|
||||
style="height: 220px; width: 100%; margin-top: 10px;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="barChart8">
|
||||
@@ -90,9 +111,9 @@
|
||||
<h2>单位成员关系人数</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 246px; width: 100%;"
|
||||
style="height: 236px; width: 100%; margin-top: 10px;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:data="dwData"
|
||||
:ops="barChart8">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
@@ -103,7 +124,7 @@
|
||||
<ai-echart-v2
|
||||
style="height: 180px; width: 100%; margin-top: 20px;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:data="qrsGmData"
|
||||
:ops="pieChart">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
@@ -113,31 +134,59 @@
|
||||
<div class="right-middle">
|
||||
<AiDvPanel style="width: 100%" border="border6" title="综合概况图">
|
||||
<div class="right-left__total AppQxnDv-total">
|
||||
<div class="item" v-for="(item, index) in 5" :key="index">
|
||||
<div class="item">
|
||||
<h2>分局数量</h2>
|
||||
<div class="item-bottom">
|
||||
<span>726,079</span>
|
||||
<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 style="width: 100%; height: 376px;"></DvMap>
|
||||
<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>214</i>
|
||||
<i>{{ middleTotalInfo['民警'] }}</i>
|
||||
</div>
|
||||
<div class="total-info__item">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon2.png">
|
||||
<span>辅警人数</span>
|
||||
<i>214</i>
|
||||
<i>{{ middleTotalInfo['辅警'] }}</i>
|
||||
</div>
|
||||
<div class="total-info__item">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon1.png">
|
||||
<span>其他</span>
|
||||
<i>214</i>
|
||||
<i>{{ middleTotalInfo['成员总数'] ? middleTotalInfo['成员总数'] - middleTotalInfo['民警'] - middleTotalInfo['辅警'] : 0 }}</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,13 +195,19 @@
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>成员激活</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
<DoughnutChart
|
||||
:ratio="cyjhRate"
|
||||
:value="cyjhData">
|
||||
</DoughnutChart>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>日均活跃率</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
<DoughnutChart
|
||||
:ratio="'61'"
|
||||
:value="[{key: '活跃成员', value: '6005'}, {key: '激活成员', value: '9789'}]">
|
||||
</DoughnutChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-middle__bottom">
|
||||
@@ -169,28 +224,55 @@
|
||||
</AiDvPanel>
|
||||
</div>
|
||||
<div class="right-right">
|
||||
<AiDvPanel style="height: auto;" border="border6" title="微警务群概况">
|
||||
<AiDvPanel style="height: auto;" border="border6" title="群动态概况">
|
||||
<div class="right-left__total AppQxnDv-total">
|
||||
<div class="item" v-for="(item, index) in 4" :key="index">
|
||||
<h2>群动态概况</h2>
|
||||
<div class="item">
|
||||
<h2>群总数</h2>
|
||||
<div class="item-bottom">
|
||||
<span>726,079</span>
|
||||
<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="95"></DoughnutChart>
|
||||
<DoughnutChart
|
||||
:ratio="qhyRate"
|
||||
:value="qhyData">
|
||||
</DoughnutChart>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>人员活跃(7日）</h2>
|
||||
<h2>成员活跃(7日）</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
<DoughnutChart
|
||||
:ratio="rhyRate"
|
||||
:value="rhyData">
|
||||
</DoughnutChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-left__middle">
|
||||
@@ -198,27 +280,30 @@
|
||||
<h2>各单位群主及群分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 210px; width: 100%;"
|
||||
style="height: 230px; width: 100%; margin-top: 10px;"
|
||||
:ref="'chart5'"
|
||||
:data="barData"
|
||||
:data="barChartData"
|
||||
:ops="barChart">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
</AiDvPanel>
|
||||
<AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
|
||||
<AiDvTable
|
||||
:heigth="'100%'"
|
||||
stripe="1"
|
||||
:headerStyle="{
|
||||
color: '#02FEFF',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
backgroundColor: 'rgba(33, 180, 253, 0.1)'
|
||||
}"
|
||||
isShowIndex="1"
|
||||
:config="tableConfig"
|
||||
:data="tableData">
|
||||
</AiDvTable>
|
||||
<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>
|
||||
@@ -245,7 +330,6 @@
|
||||
data () {
|
||||
return {
|
||||
isShowInfo: false,
|
||||
value: '',
|
||||
lineData: [
|
||||
{
|
||||
"name": "阿斯达",
|
||||
@@ -286,114 +370,20 @@
|
||||
"v1": 98
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
name: '姓名',
|
||||
v1: '宗梦瑞',
|
||||
v2: '宗梦瑞',
|
||||
v3: '宗梦瑞',
|
||||
v4: '宗梦瑞',
|
||||
v5: '宗梦瑞',
|
||||
v6: '宗梦瑞',
|
||||
v7: '宗梦瑞',
|
||||
v8: '宗梦瑞',
|
||||
v9: '宗梦瑞',
|
||||
v10: '宗梦瑞'
|
||||
},
|
||||
{
|
||||
name: '单位',
|
||||
v1: '宗梦瑞',
|
||||
v2: '宗梦瑞',
|
||||
v3: '宗梦瑞',
|
||||
v4: '宗梦瑞',
|
||||
v5: '宗梦瑞',
|
||||
v6: '宗梦瑞',
|
||||
v7: '宗梦瑞',
|
||||
v8: '宗梦瑞',
|
||||
v9: '宗梦瑞',
|
||||
v10: '宗梦瑞'
|
||||
},
|
||||
{
|
||||
name: '群数量',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
},
|
||||
{
|
||||
name: '群人员',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
},
|
||||
{
|
||||
name: '新增群人员',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
},
|
||||
{
|
||||
name: '有消息的群',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
},
|
||||
{
|
||||
name: '群聊人数',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
},
|
||||
{
|
||||
name: '群消息总数',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
}
|
||||
],
|
||||
lineChart1: {
|
||||
legend: { show: false },
|
||||
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)',
|
||||
@@ -439,7 +429,18 @@
|
||||
})
|
||||
},
|
||||
barChart8: {
|
||||
legend: {show: false},
|
||||
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)',
|
||||
@@ -449,36 +450,63 @@
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
},
|
||||
xAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', barWidth: 10, barGap: '40%',
|
||||
label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(123, 165, 255, .2)'
|
||||
color: ['#65E0DE', '#E7C074', '#7AA3CC'],
|
||||
series: [
|
||||
{
|
||||
name: '民警',
|
||||
type: 'bar',
|
||||
barWidth: '15',
|
||||
stack: 'one'
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
|
||||
colorStops: [{offset: 0, color: 'rgba(0, 89, 84, 0)'}, {offset: 1, color: '#66E1DF'}]
|
||||
}
|
||||
{
|
||||
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: 12},
|
||||
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,
|
||||
@@ -500,8 +528,8 @@
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(51, 204, 204, 1)' },
|
||||
{ offset: 1, color: 'rgba(31, 89, 89, 0.25)' }
|
||||
{ offset: 1, color: 'rgba(51, 204, 204, 1)' },
|
||||
{ offset: 0, color: 'rgba(31, 89, 89, 0.25)' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -516,44 +544,26 @@
|
||||
]
|
||||
}
|
||||
],
|
||||
daemon: {
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
barCategoryGap: 40,
|
||||
itemStyle: {}
|
||||
}
|
||||
series: [
|
||||
{
|
||||
name: '群主数量',
|
||||
type: 'bar',
|
||||
barWidth: '15'
|
||||
},
|
||||
{
|
||||
name: '群数量',
|
||||
barWidth: '15',
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
},
|
||||
barData: [
|
||||
{
|
||||
"name": "兴仁公安局",
|
||||
"v1": 223,
|
||||
"v11": 23
|
||||
},
|
||||
{
|
||||
"name": "兴仁公安局1",
|
||||
"v1": 22,
|
||||
"v11": 29
|
||||
},
|
||||
{
|
||||
"name": "兴仁公安局2",
|
||||
"v1": 67,
|
||||
"v11": 23
|
||||
},
|
||||
{
|
||||
"name": "兴仁公安局3",
|
||||
"v1": 98,
|
||||
"v11": 23
|
||||
}
|
||||
],
|
||||
pieData: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }] ,
|
||||
pieChart: {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
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
|
||||
@@ -598,19 +608,149 @@
|
||||
policeStationList: [],
|
||||
areaList: [],
|
||||
gridId: '',
|
||||
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
|
||||
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: {
|
||||
tableConfig () {
|
||||
return this.tableData.map((v, index) => {
|
||||
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 {
|
||||
color: '#d0e1e8',
|
||||
textAlign: '',
|
||||
width: index === 0 ? '100' : '',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
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['新增居民']
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -621,10 +761,25 @@
|
||||
},
|
||||
|
||||
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
|
||||
this.instance.post(`/wxgridinfo/tree`, null, {
|
||||
this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
|
||||
this.instance.post(`/api/wxgridinfo/tree`, null, {
|
||||
params: {
|
||||
gridParentId: gridId || '',
|
||||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||||
@@ -636,6 +791,64 @@
|
||||
} 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
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -656,6 +869,7 @@
|
||||
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);
|
||||
@@ -667,13 +881,34 @@
|
||||
<style lang="scss" scoped>
|
||||
.AppQxnDv {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -834,6 +1069,54 @@
|
||||
}
|
||||
}
|
||||
|
||||
: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;
|
||||
@@ -860,6 +1143,7 @@
|
||||
& > .right {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.right-left {
|
||||
width: 500px;
|
||||
@@ -889,8 +1173,8 @@
|
||||
}
|
||||
}
|
||||
.right-middle {
|
||||
width: 522px;
|
||||
margin: 0 20px;
|
||||
width: 542px;
|
||||
margin: 0 14px;
|
||||
|
||||
.right-middle__middle {
|
||||
display: flex;
|
||||
@@ -902,7 +1186,9 @@
|
||||
.right-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
width: 570px;
|
||||
overflow: hidden;
|
||||
|
||||
.bottom {
|
||||
padding-top: 16px;
|
||||
@@ -928,8 +1214,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 240px;
|
||||
margin-right: 14px;
|
||||
width: 230px;
|
||||
margin-right: 10px;
|
||||
|
||||
.left-list {
|
||||
flex: 1;
|
||||
@@ -944,6 +1230,7 @@
|
||||
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 {
|
||||
|
||||
@@ -4,19 +4,27 @@
|
||||
<AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
|
||||
</AiDvPanel>
|
||||
<div class="left-list">
|
||||
<div class="left-item" v-for="(item, index) in 16" :key="index">
|
||||
<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>黔西南州公安局</h2>
|
||||
<el-select v-model="value" size="mini" placeholder="请选择派出所">
|
||||
<el-option label="南京派出所" value="1"></el-option>
|
||||
<el-option label="北京派出所" value="2"></el-option>
|
||||
<el-option label="长安派出所" value="3"></el-option>
|
||||
<h2>{{ item.gridName }}</h2>
|
||||
<el-select v-model="gridId" @change="onStationChange" size="mini" 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>居民数量：17246</span>
|
||||
<span>成员：2057</span>
|
||||
<span>居民数量：{{ item.customerCount + item.groupMemberCount }}</span>
|
||||
<span>成员：{{ item.allGridMemberCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,10 +33,31 @@
|
||||
<div class="right-left">
|
||||
<AiDvPanel style="width: 100%" border="border6" title="警格事件概況">
|
||||
<div class="right-left__total AppQxnDv-total">
|
||||
<div class="item" v-for="(item, index) in 4" :key="index">
|
||||
<h2>全部人员数</h2>
|
||||
<div class="item">
|
||||
<h2>全部上报事件</h2>
|
||||
<div class="item-bottom">
|
||||
<span>726,079</span>
|
||||
<span>{{ wxGridReportOverviewInfo['全部上报事件数量'] }}</span>
|
||||
<i>人</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>已办结事件</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ wxGridReportOverviewInfo['已办结数量'] }}</span>
|
||||
<i>人</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>办理中事件</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ wxGridReportOverviewInfo['办理中数量'] }}</span>
|
||||
<i>人</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>待处理事件</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ wxGridReportOverviewInfo['待受理数量'] }}</span>
|
||||
<i>人</i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,7 +68,7 @@
|
||||
<h2>上报来源分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 220px; width: 100%; margin-top: 10px;"
|
||||
style="height: 220px; width: 245px; margin-top: 10px;"
|
||||
:ref="'chart1'"
|
||||
:data="chartData1"
|
||||
:ops="chartConfig1">
|
||||
@@ -50,7 +79,7 @@
|
||||
<h2>事件办理情況</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 220px; width: 100%; margin-top: 10px;"
|
||||
style="height: 220px; width: 265px; margin-top: 10px;"
|
||||
:ref="'chart2'"
|
||||
:data="chartData2"
|
||||
:ops="chartConfig2">
|
||||
@@ -63,37 +92,32 @@
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>事件受理率</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="60"></DoughnutChart>
|
||||
<DoughnutChart :ratio="sllRate" :value="sllData"></DoughnutChart>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>事件办结率</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
<DoughnutChart :ratio="sjbjRate" :value="sjbjData"></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 v-model="type" @change="onChange" style="width: 92px" size="mini" placeholder="请选择">
|
||||
<el-option label="新办结" value="0"></el-option>
|
||||
<el-option label="新受理" value="1"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<AiDvTable
|
||||
style="margin-top: 16px; height: 220px;"
|
||||
stripe="1"
|
||||
size="mini"
|
||||
:headerStyle="{
|
||||
color: '#02FEFF',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
backgroundColor: 'rgba(33, 180, 253, 0.1)'
|
||||
}"
|
||||
:config="blConfig"
|
||||
:data="bbTableData">
|
||||
</AiDvTable>
|
||||
<ai-table
|
||||
width="265px"
|
||||
style="margin-top: 10px;"
|
||||
height="210px"
|
||||
:tableData="tableData1"
|
||||
:col-configs="colConfigs1"
|
||||
:isShowPagination="false"
|
||||
@getList="() => {}">
|
||||
</ai-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-left__bottom">
|
||||
@@ -126,7 +150,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<DvMap style="width: 100%; height: 356px;"></DvMap>
|
||||
<DvMap :instance="instance" style="width: 100%; height: 356px;"></DvMap>
|
||||
</div>
|
||||
<div class="right-middle__bottom">
|
||||
<div class="AppQxnDv-title">
|
||||
@@ -202,6 +226,10 @@
|
||||
name: 'AppQxnEventDv',
|
||||
label: '事件上报',
|
||||
|
||||
props: {
|
||||
instance: Function
|
||||
},
|
||||
|
||||
components: {
|
||||
DvMap,
|
||||
DoughnutChart
|
||||
@@ -209,67 +237,12 @@
|
||||
|
||||
data () {
|
||||
return {
|
||||
value: '',
|
||||
policeStationList: [],
|
||||
currIndex: 0,
|
||||
chartData2: [
|
||||
{
|
||||
"name": "1月",
|
||||
"已办理": 4,
|
||||
"待处理": 44,
|
||||
"处理中": 23,
|
||||
"已拒绝": 11
|
||||
},
|
||||
{
|
||||
"name": "2月",
|
||||
"已办理": 2,
|
||||
"待处理": 24,
|
||||
"处理中": 23,
|
||||
"已拒绝": 11
|
||||
},
|
||||
{
|
||||
"name": "3月",
|
||||
"已办理": 44,
|
||||
"待处理": 14,
|
||||
"处理中": 2,
|
||||
"已拒绝": 11
|
||||
},
|
||||
{
|
||||
"name": "4月",
|
||||
"已办理": 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
|
||||
}
|
||||
],
|
||||
areaList: [],
|
||||
type: '0',
|
||||
gridId: '',
|
||||
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
|
||||
tableData: [
|
||||
{
|
||||
name: '姓名',
|
||||
@@ -669,6 +642,13 @@
|
||||
v9: '详情>>',
|
||||
v10: '详情>>'
|
||||
}
|
||||
],
|
||||
wxGridReportOverviewInfo: {},
|
||||
tableData1: [],
|
||||
colConfigs1: [
|
||||
{ prop: 'createTime', label: '时间', align: 'center', width: '60px', dateFormat: 'MM/DD' },
|
||||
{ prop: 'reporterName', label: '姓名', align: 'center' },
|
||||
{ prop: 'caseName', label: '事件名称', align: 'left', width: 130 }
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -767,10 +747,150 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
chartData1 () {
|
||||
if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
|
||||
return []
|
||||
}
|
||||
|
||||
return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
|
||||
return {
|
||||
name: v['月份'],
|
||||
'警格上报': v['警格上报'],
|
||||
'居民上报': v['居民上报']
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
chartData2 () {
|
||||
if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
|
||||
return []
|
||||
}
|
||||
|
||||
return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
|
||||
return {
|
||||
name: v['月份'],
|
||||
'上报总数': v['上报数量'],
|
||||
'已办理': v['已拒绝数量'],
|
||||
'已拒绝': v['已拒绝数量']
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
sllData () {
|
||||
return [{
|
||||
key: '累计受理事件',
|
||||
value: this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']
|
||||
},{
|
||||
key: '累计上报事件',
|
||||
value: this.wxGridReportOverviewInfo['全部上报事件数量']
|
||||
}]
|
||||
},
|
||||
|
||||
sllRate () {
|
||||
if (!this.wxGridReportOverviewInfo['待受理数量']) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return Number((((this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']) / this.wxGridReportOverviewInfo['全部上报事件数量']) * 100).toFixed(2))
|
||||
},
|
||||
|
||||
sjbjData () {
|
||||
return [{key: '累计办结事件', value: this.wxGridReportOverviewInfo['已办结数量']}, {key: '累计受理事件', value: this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']}]
|
||||
},
|
||||
|
||||
sjbjRate () {
|
||||
if (!this.wxGridReportOverviewInfo['待受理数量']) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return Number(((this.wxGridReportOverviewInfo['已办结数量'] / (this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量'])) * 100).toFixed(2))
|
||||
},
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.getInfo()
|
||||
this.init()
|
||||
},
|
||||
|
||||
methods: {
|
||||
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()
|
||||
},
|
||||
|
||||
onStationChange () {
|
||||
this.$nextTick(() => {
|
||||
this.getInfo()
|
||||
})
|
||||
},
|
||||
|
||||
onChange () {
|
||||
this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
|
||||
params: {
|
||||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||||
gridId: this.gridId || this.gridParentId,
|
||||
type: this.type
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.wxGridReportNewInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
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/wxGridReportOverview`, null, {
|
||||
params: {
|
||||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||||
gridId: this.gridId || this.gridParentId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.wxGridReportOverviewInfo = res.data
|
||||
}
|
||||
})
|
||||
|
||||
this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
|
||||
params: {
|
||||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||||
gridId: this.gridId || this.gridParentId,
|
||||
type: this.type
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.tableData1 = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Hex2RGBA(color, alpha = 1) {
|
||||
let hex = 0;
|
||||
if (color.charAt(0) == "#") {
|
||||
@@ -998,6 +1118,54 @@
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ai-table) {
|
||||
.el-table {
|
||||
font-size: 12px;
|
||||
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;
|
||||
@@ -1024,12 +1192,14 @@
|
||||
& > .right {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.right-left {
|
||||
width: 530px;
|
||||
|
||||
.right-left__middle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
width: 245px;
|
||||
@@ -1037,18 +1207,19 @@
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
width: 275px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-left__top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
width: 275px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 12px;
|
||||
width: 245px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1086,10 +1257,26 @@
|
||||
.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.65) 100%);
|
||||
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;
|
||||
|
||||
@@ -7,15 +7,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="DoughnutChart-explain">
|
||||
<div class="item">
|
||||
<div class="item" v-for="(item, index) in value" :key="index">
|
||||
<i></i>
|
||||
<span>已激活成员</span>
|
||||
<p>2142</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<i></i>
|
||||
<span>未激活成员</span>
|
||||
<p>2142</p>
|
||||
<span>{{ item.key }}</span>
|
||||
<p>{{ item.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -23,7 +18,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['ratio'],
|
||||
props: ['ratio', 'value'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
@@ -34,6 +29,12 @@
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
ratio () {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
@@ -126,12 +127,16 @@
|
||||
|
||||
.DoughnutChart-explain {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
margin-left: 10px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@@ -141,7 +146,10 @@
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 24px;
|
||||
margin-right: 20px;
|
||||
// width: 88px;
|
||||
// min-width: 50px;
|
||||
// max-width: 70px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #9BB7D4;
|
||||
@@ -175,7 +183,7 @@
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
color: #02FEFF;
|
||||
}
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
<template>
|
||||
<div class="AiDvMap" v-resize="onDomResize">
|
||||
<div class="AiDvMap">
|
||||
<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-mask" @click="isShowInfo = false"></div>
|
||||
<div class="info-content">
|
||||
<div class="info-title">
|
||||
<h2>兴仁公安局</h2>
|
||||
<h2>{{ title }}</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>
|
||||
<span>{{ info['派出所数量'] }}个派出所</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>居民群：</label>
|
||||
<span>派出所</span>
|
||||
<span>{{ info['群数量'] }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>成员人数：</label>
|
||||
<span>派出所</span>
|
||||
<span>{{ info['成员总数'] }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>群人数：</label>
|
||||
<span>派出所</span>
|
||||
<span>{{ info['群成员数量'] }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>激活比例：</label>
|
||||
<span>派出所</span>
|
||||
<span>{{ rate }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>好友人数：</label>
|
||||
<span>派出所</span>
|
||||
<span>{{ info['外部联系人数量'] }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>群主人数：</label>
|
||||
<span>派出所</span>
|
||||
<span>{{ info['群主人数'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,265 +46,237 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import http from "dui/lib/js/request";
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'AiDvMap',
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
v: `AiDvMap-${new Date().getTime()}`,
|
||||
chart: null,
|
||||
isShowInfo: false,
|
||||
geoJSON: require('./geoJSon/qxnGeoJSON.json')
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
resize: {
|
||||
bind(el, binding) {
|
||||
let width = ''
|
||||
let height = ''
|
||||
export default {
|
||||
name: 'AiDvMap',
|
||||
|
||||
function isReize() {
|
||||
const style = document.defaultView.getComputedStyle(el)
|
||||
if (width !== style.width || height !== style.height) {
|
||||
binding.value({
|
||||
width: style.width,
|
||||
height: style.height
|
||||
})
|
||||
}
|
||||
width = style.width
|
||||
height = style.height
|
||||
props: {
|
||||
instance: Function
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
timer: null,
|
||||
title: '',
|
||||
v: `AiDvMap-${new Date().getTime()}`,
|
||||
chart: null,
|
||||
isShowInfo: false,
|
||||
geoJSON: require('./geoJSon/qxnGeoJSON.json')
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
rate () {
|
||||
if (!this.info['已激活']) {
|
||||
return '0%'
|
||||
}
|
||||
|
||||
el.__vueSetInterval__ = setInterval(isReize, 300)
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
clearInterval(el.__vueSetInterval__)
|
||||
return (this.info['已激活'] / this.info['成员总数']).toFixed(2) * 100 + '%'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onDomResize() {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.chart.resize()
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector(`.${this.v}`))
|
||||
// this.getData().then(res => {
|
||||
// if (res.code === 0) {
|
||||
echarts.registerMap('黔西南', this.geoJSON)
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector(`.${this.v}`))
|
||||
echarts.registerMap('黔西南', this.geoJSON)
|
||||
|
||||
let option = {
|
||||
geo: [
|
||||
{
|
||||
map: "黔西南",
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "50%"],
|
||||
layoutSize: "180%",
|
||||
let option = {
|
||||
geo: [
|
||||
{
|
||||
map: "黔西南",
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "50%"],
|
||||
layoutSize: "180%",
|
||||
show: true,
|
||||
roam: false,
|
||||
emphasis: {
|
||||
show: true,
|
||||
roam: false,
|
||||
emphasis: {
|
||||
show: true,
|
||||
label: {
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
// areaColor: '#fff'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: '14'
|
||||
}
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "rgba(2, 254, 255, 0.7)",
|
||||
borderWidth: 2,
|
||||
shadowColor: "rgba(2, 254, 255, 0.1)",
|
||||
shadowOffsetY: 10,
|
||||
shadowBlur: 120,
|
||||
areaColor: "#0f7295",
|
||||
},
|
||||
// areaColor: '#fff'
|
||||
}
|
||||
},
|
||||
// 重影
|
||||
{
|
||||
type: "map",
|
||||
map: "黔西南",
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "180%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor:"rgba(17, 149, 216,0.6)",
|
||||
borderColor: "rgba(2, 254, 255, 0.3)",
|
||||
shadowColor: "rgba(2, 254, 255, 0.3)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: '14'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "map",
|
||||
map: "黔西南",
|
||||
zlevel: -2,
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "52%"],
|
||||
layoutSize: "180%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor: "rgba(57, 132, 188,0.4)",
|
||||
borderColor: "rgba(2, 254, 255, 0.2)",
|
||||
shadowColor: "rgba(2, 254, 255, 0.24)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "transpercent",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "map",
|
||||
map: "黔西南",
|
||||
zlevel: -3,
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "53%"],
|
||||
layoutSize: "180%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor: "rgba(11, 43, 97,0.8)",
|
||||
borderColor: "rgba(2, 254, 255, 0.1)",
|
||||
shadowColor: "rgba(2, 254, 255, 0.1)",
|
||||
shadowOffsetY: 15,
|
||||
shadowBlur: 10,
|
||||
areaColor: "transpercent",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "rgba(2, 254, 255, 0.7)",
|
||||
borderWidth: 2,
|
||||
shadowColor: "rgba(2, 254, 255, 0.1)",
|
||||
shadowOffsetY: 10,
|
||||
shadowBlur: 120,
|
||||
areaColor: "#0f7295",
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
map: "黔西南",
|
||||
coordinateSystem: 'geo',
|
||||
z: 3,
|
||||
zlevel: 3,
|
||||
// symbol: 'none',
|
||||
symbolSize: 16,
|
||||
rippleEffect: {
|
||||
period: 2,
|
||||
scale: 4,
|
||||
brushType: 'fill'
|
||||
},
|
||||
// 重影
|
||||
{
|
||||
type: "map",
|
||||
map: "黔西南",
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "180%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor:"rgba(17, 149, 216,0.6)",
|
||||
borderColor: "rgba(2, 254, 255, 0.3)",
|
||||
shadowColor: "rgba(2, 254, 255, 0.3)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "map",
|
||||
map: "黔西南",
|
||||
zlevel: -2,
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "52%"],
|
||||
layoutSize: "180%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor: "rgba(57, 132, 188,0.4)",
|
||||
borderColor: "rgba(2, 254, 255, 0.2)",
|
||||
shadowColor: "rgba(2, 254, 255, 0.24)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "transpercent",
|
||||
},
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#000',
|
||||
borderColor: '#a18a3a',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
areaColor: null
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "map",
|
||||
map: "黔西南",
|
||||
zlevel: -3,
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "53%"],
|
||||
layoutSize: "180%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor: "rgba(11, 43, 97,0.8)",
|
||||
borderColor: "rgba(2, 254, 255, 0.1)",
|
||||
shadowColor: "rgba(2, 254, 255, 0.1)",
|
||||
shadowOffsetY: 15,
|
||||
shadowBlur: 10,
|
||||
areaColor: "transpercent",
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: e => {
|
||||
// const name = e.data[3]
|
||||
// const value = e.data[2]
|
||||
// return `{a|${name}}\n{b|${value}}`
|
||||
// },
|
||||
// fontSize: 16,
|
||||
// rich: {
|
||||
// a: {
|
||||
// width: '100%',
|
||||
// color: '#fff',
|
||||
// lineHeight: 20,
|
||||
// fontSize: 16
|
||||
// },
|
||||
// b: {
|
||||
// backgroundColor: {
|
||||
// // image: require('@/assets/images/point.png')
|
||||
// },
|
||||
// color: '#fff',
|
||||
// height: 56,
|
||||
// align: 'center',
|
||||
// width: 50,
|
||||
// fontSize: 16
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
data: []
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
map: "黔西南",
|
||||
coordinateSystem: 'geo',
|
||||
z: 3,
|
||||
zlevel: 3,
|
||||
// symbol: 'none',
|
||||
symbolSize: 16,
|
||||
rippleEffect: {
|
||||
period: 2,
|
||||
scale: 4,
|
||||
brushType: 'fill'
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#000',
|
||||
borderColor: '#a18a3a',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
areaColor: null
|
||||
}
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: e => {
|
||||
// const name = e.data[3]
|
||||
// const value = e.data[2]
|
||||
// return `{a|${name}}\n{b|${value}}`
|
||||
// },
|
||||
// fontSize: 16,
|
||||
// rich: {
|
||||
// a: {
|
||||
// width: '100%',
|
||||
// color: '#fff',
|
||||
// lineHeight: 20,
|
||||
// fontSize: 16
|
||||
// },
|
||||
// b: {
|
||||
// backgroundColor: {
|
||||
// // image: require('@/assets/images/point.png')
|
||||
// },
|
||||
// color: '#fff',
|
||||
// height: 56,
|
||||
// align: 'center',
|
||||
// width: 50,
|
||||
// fontSize: 16
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chart.setOption(option)
|
||||
this.chart.on('click', e => {
|
||||
this.getInfo(e.name)
|
||||
})
|
||||
},
|
||||
|
||||
getInfo (name) {
|
||||
this.title = `${name}公安局`
|
||||
this.instance.post(`/api/wxgridinfo/comprehensiveOverviewMap`, null, {
|
||||
params: {
|
||||
gridName: `${name}公安局`,
|
||||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||||
}
|
||||
this.chart.setOption(option)
|
||||
this.chart.on('click', e => {
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.isShowInfo = true
|
||||
})
|
||||
// })
|
||||
},
|
||||
|
||||
convertData(data) {
|
||||
return data.map(v => {
|
||||
return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
|
||||
})
|
||||
},
|
||||
|
||||
qqMapTransBMap(lng, lat) {
|
||||
const x_pi = 3.14159265358979324 * 3000.0 / 180.0
|
||||
var x = lng
|
||||
var y = lat
|
||||
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
|
||||
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
|
||||
|
||||
return {
|
||||
lng: z * Math.cos(theta) + 0.0065,
|
||||
lat: z * Math.sin(theta) + 0.006
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getData() {
|
||||
return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=522300_full`)}`, null, {
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -354,7 +326,9 @@ export default {
|
||||
|
||||
.info-wrapper__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
line-height: 1;
|
||||
margin-bottom: 20px;
|
||||
|
||||
label {
|
||||
|
||||
@@ -0,0 +1,647 @@
|
||||
<template>
|
||||
<section class="AppIntegralStatistics">
|
||||
<el-row class="overallStatistics">
|
||||
<div class="title">
|
||||
<p>总体统计</p>
|
||||
<div class="title_right">
|
||||
<div>
|
||||
<span v-for="(item,index) in timeCheck" :key="index" :class="type == index? 'active':''"
|
||||
@click="timeChange(index)">{{ item }}</span>
|
||||
</div>
|
||||
<el-cascader ref="cascader1" v-model="girdArr" :options="girdOptions" placeholder="所属网格" size="small"
|
||||
:props="defaultProps" :show-all-levels="false" @change="gridChange" clearable></el-cascader>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card_list">
|
||||
<div class="card">
|
||||
<h2>积分余额汇总
|
||||
<el-tooltip
|
||||
placement="right"
|
||||
style="width: 16px;"
|
||||
content="截止目前所有网格员剩余可用积分余额的总和">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
</el-tooltip>
|
||||
</h2>
|
||||
<p class="color1">{{ data.nowIntegral || 0 }}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>发放积分</h2>
|
||||
<p class="color1">{{ data.addIntegral || 0 }}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>消耗积分</h2>
|
||||
<p class="color1">{{ Math.abs(data.reduceIntegral) || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echertsBox">
|
||||
<div class="left_Box">
|
||||
<p>个人积分排行</p>
|
||||
<div>
|
||||
<div id="chart1" style="height: 300px; width: 100%;" v-show="userSortListX.length && userSortListY.length"></div>
|
||||
<ai-empty v-show="!userSortListX.length && !userSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_Box">
|
||||
<p>网格积分排行</p>
|
||||
<div>
|
||||
<div id="chart2" style="height: 300px; width: 100%;" v-show="girdSortListX.length && girdSortListY.length"></div>
|
||||
<ai-empty v-show="!girdSortListX.length && !girdSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<ai-card>
|
||||
<ai-title slot="title" title="积分明细"/>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-cascader ref="cascader2" v-model="girdIdArr" :options="girdOptions" placeholder="所属网格" size="small"
|
||||
:props="defaultProps" :show-all-levels="false" clearable @change="gridChangeOpt"></el-cascader>
|
||||
<ai-select v-model="search.integralType" placeholder="请选择类型" @change="current=1, getTableData()"
|
||||
:selectList="dict.getDict('integralType')"/>
|
||||
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input size="small" placeholder="请输入姓名" v-model="search.userName" clearable
|
||||
@clear="current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(current = 1), getTableData();}" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
|
||||
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
|
||||
<el-table-column slot="eventDesc" label='事件' align="center" width="400px" show-overflow-tooltip>
|
||||
<template slot-scope="{ row }">
|
||||
<span>{{ row.integralRuleName || row.eventDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="changeIntegral" label="变动积分" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span>{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="open(row.id)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-card>
|
||||
|
||||
<el-dialog title="详情" :visible.sync="dialog" customFooter width="700">
|
||||
<ai-detail>
|
||||
<template #content>
|
||||
<ai-wrapper>
|
||||
<ai-info-item label="姓名" :value="details.integralUserName" />
|
||||
<ai-info-item label="所属网格" :value="details.girdName"/>
|
||||
<ai-info-item label="事件" isLine :value="details.eventDesc">
|
||||
<span v-if="details.integralRuleId">{{ details.integralRuleName }}</span>
|
||||
<span v-else>{{ details.eventDesc }}</span>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="时间" isLine :value="details.createTime"/>
|
||||
<ai-info-item label="积分变动">
|
||||
{{ details.integralCalcType == 0 ? '-' : '+' }}{{ details.changeIntegral }}
|
||||
</ai-info-item>
|
||||
<ai-info-item label="积分余额" :value="details.nowIntegral"/>
|
||||
<ai-info-item label="凭证" isLine v-if="fileDownLoad.length">
|
||||
<ai-file-list :fileList="fileDownLoad" style="width: 200px;" :fileOps="{name: 'name'}"></ai-file-list>
|
||||
</ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-detail>
|
||||
<span slot="footer" class="dialog-footer" center>
|
||||
<el-button @click="dialog = false" style="width: 92px">关闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
|
||||
<el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
<el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import * as echarts from 'echarts';
|
||||
import dayjs from 'dayjs'
|
||||
export default {
|
||||
name: "AppIntegralStatistics",
|
||||
label: "积分统计",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart1: null,
|
||||
myChart2: null,
|
||||
tableData: [],
|
||||
search: {
|
||||
current: 1,
|
||||
userName: '',
|
||||
girdId: '',
|
||||
integralType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
},
|
||||
girdIdArr:[],
|
||||
total: 0,
|
||||
size: 10,
|
||||
current: 1,
|
||||
girdList: [],
|
||||
time: [],
|
||||
timeCheck: ['昨日','近7天','近30天','自定义'],
|
||||
dialog: false,
|
||||
dialogDate: false,
|
||||
timeList: [],
|
||||
type: '1',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
data: {},
|
||||
girdId: '',
|
||||
girdArr: [],
|
||||
girdOptions: [],
|
||||
defaultProps: {
|
||||
label: 'girdName',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
checkStrictly: true,
|
||||
},
|
||||
details: {},
|
||||
fileDownLoad: [],
|
||||
userSortListX: [],
|
||||
userSortListY: [],
|
||||
girdSortListX: [],
|
||||
girdSortListY: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: "integralUserName", label: '姓名', align: "left", width: "200px" },
|
||||
{ prop: "girdName", label: '所属网格', align: "center", width: "180px" },
|
||||
{ slot: "eventDesc"},
|
||||
{ prop: "integralType", label: '类型', align: "center", dict: "integralType"},
|
||||
{ slot: "changeIntegral", label: '积分变动', align: "center", },
|
||||
{ prop: "nowIntegral", label: '剩余积分', align: "center", },
|
||||
{ prop: "createTime", label: '时间', align: "center", },
|
||||
{ slot: "options" }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.time = [dayjs().subtract(1,'week').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')]
|
||||
this.$dict.load('epidemicDangerousAreaLevel','integralType','integralRuleEvent','integralRuleEventType').then(() => {
|
||||
this.getStatistics()
|
||||
this.getGridList()
|
||||
this.getRanking()
|
||||
this.search.startTime = this.time?.[0]
|
||||
this.search.endTime = this.time?.[1]
|
||||
this.getTableData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 统计接口
|
||||
getStatistics() {
|
||||
this.instance.post('/app/appintegraluser/allAppletUserIntegral',null, {
|
||||
params: {
|
||||
type: this.type,
|
||||
girdId: this.girdId,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
this.data = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 人员、网格排行
|
||||
getRanking() {
|
||||
this.instance.post('/app/appintegraluser/userAndGirdIntegralSortByApplet',null,{
|
||||
params: {
|
||||
type: this.type,
|
||||
girdId: this.girdId,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime
|
||||
}
|
||||
}).then((res) => {
|
||||
if(res?.data) {
|
||||
this.userSortListX = res.data.userSortList.map(e=> e.userName).reverse()
|
||||
this.userSortListY = res.data.userSortList.map(e=> e.changeIntegral).reverse()
|
||||
this.girdSortListX = res.data.girdSortList.map(e=> e.girdName).reverse()
|
||||
this.girdSortListY = res.data.girdSortList.map(e=> e.changeIntegral).reverse()
|
||||
this.getColEcherts1(this.userSortListX,this.userSortListY)
|
||||
this.getColEcherts2(this.girdSortListX,this.girdSortListY)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 积分明细
|
||||
getTableData() {
|
||||
this.instance.post('/app/appintegraluser/girdIntegralDetailByApplet',null,{
|
||||
params: {
|
||||
...this.search,
|
||||
current: this.current,
|
||||
size: this.size,
|
||||
total: this.total,
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
gridChangeOpt(val) {
|
||||
this.girdIdArr = val
|
||||
this.search.girdId = val?.[val.length - 1]
|
||||
this.$refs.cascader2.dropDownVisible = false;
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
getColEcherts1(xData,yData) {
|
||||
let chartDom1 = document.getElementById('chart1');
|
||||
chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
|
||||
this.myChart1 = echarts.init(chartDom1);
|
||||
this.myChart1.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '16px',
|
||||
right: '28px',
|
||||
bottom: '14px',
|
||||
top: '16px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#5087ec",
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'right', //在上方显示
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
barWidth: 10,
|
||||
barGap: '20%',
|
||||
}
|
||||
]
|
||||
}, true);
|
||||
window.addEventListener("resize", this.onResize)
|
||||
},
|
||||
getColEcherts2(xData,yData) {
|
||||
let chartDom2 = document.getElementById('chart2');
|
||||
chartDom2.style.width = (window.innerWidth - 435) / 2 + "px";
|
||||
this.myChart2 = echarts.init(chartDom2);
|
||||
this.myChart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '16px',
|
||||
right: '28px',
|
||||
bottom: '14px',
|
||||
top: '16px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
triggerEvent: true,
|
||||
//设置文本过长超出隐藏...表示
|
||||
axisLabel:{
|
||||
margin: 8,
|
||||
formatter: function(params){
|
||||
var val=""
|
||||
if(params.length > 8) {
|
||||
val = params.substr(0,8)+'...'
|
||||
return val
|
||||
} else {
|
||||
return params;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#5087ec",
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'right', //在右方显示
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
barWidth: 10,
|
||||
barGap: '20%',
|
||||
}
|
||||
]
|
||||
}, true);
|
||||
window.addEventListener("resize", this.onResize2)
|
||||
// this.extension(this.myChart2)
|
||||
},
|
||||
onResize1() {
|
||||
this.myChart1.resize()
|
||||
},
|
||||
onResize2() {
|
||||
this.myChart2.resize()
|
||||
},
|
||||
gridChange(val) {
|
||||
this.girdArr = val
|
||||
this.girdId = val?.[val.length - 1]
|
||||
this.$refs.cascader1.dropDownVisible = false;
|
||||
this.getStatistics()
|
||||
this.getRanking()
|
||||
},
|
||||
// 所有网格
|
||||
getGridList() {
|
||||
this.instance.post(`/app/appgirdinfo/listAll3`).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.girdOptions = this.toTree(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 转树形结构
|
||||
toTree(data) {
|
||||
let result = [];
|
||||
if (!Array.isArray(data)) {
|
||||
return result
|
||||
}
|
||||
let map = {};
|
||||
data.forEach(item => {
|
||||
map[item.id] = item;
|
||||
});
|
||||
data.forEach(item => {
|
||||
let parent = map[item.parentGirdId];
|
||||
if (parent) {
|
||||
(parent.children || (parent.children = [])).push(item);
|
||||
} else {
|
||||
result.push(item);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
timeChange(index) {
|
||||
if(index == 3) {
|
||||
this.dialogDate = true
|
||||
}
|
||||
this.type = index
|
||||
this.getStatistics()
|
||||
this.getRanking()
|
||||
},
|
||||
|
||||
open(id) {
|
||||
this.dialog = true
|
||||
this.getDetail(id)
|
||||
},
|
||||
|
||||
onChange(val) {
|
||||
this.search.startTime = val?.[0]
|
||||
this.search.endTime = val?.[1]
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
getDetail(id) {
|
||||
this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res=> {
|
||||
if(res?.data) {
|
||||
this.details = res.data
|
||||
if(res.data.enclosure) {
|
||||
let str = res.data.enclosure.split('/')
|
||||
this.fileDownLoad = [{
|
||||
url:res.data.enclosure,
|
||||
name: str?.[str.length - 1]
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
selectDete() {
|
||||
if(!this.timeList || !this.timeList.length) {
|
||||
return this.$message.error('请选择自定义时间');
|
||||
}
|
||||
this.startTime = this.timeList?.[0]
|
||||
this.endTime = this.timeList?.[1]
|
||||
this.dialogDate = false
|
||||
this.getStatistics()
|
||||
this.getRanking()
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
filters: {
|
||||
formatTime(num) {
|
||||
if(num > 0) {
|
||||
return '+' + num
|
||||
} else {
|
||||
return num
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getColEcherts1()
|
||||
this.getColEcherts2()
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
window.removeEventListener('resize', this.onResize1)
|
||||
window.removeEventListener('resize', this.onResize2)
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppIntegralStatistics {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
overflow-y: scroll;
|
||||
.overallStatistics {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: MicrosoftYaHeiSemibold;
|
||||
color: #222222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #D0D4DC;
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
color: #2266FF;
|
||||
border: 1px solid #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card_list {
|
||||
display: flex;
|
||||
.card {
|
||||
flex: 1;
|
||||
height: 96px;
|
||||
background: #F9F9F9;
|
||||
border-radius: 2px;
|
||||
margin-right: 20px;
|
||||
padding: 16px 24px;
|
||||
box-sizing: border-box;
|
||||
h2 {
|
||||
color: #888888;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
p {
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.color1 {
|
||||
color: #2891FF;
|
||||
}
|
||||
.color2 {
|
||||
color: #22AA99;
|
||||
}
|
||||
.color3 {
|
||||
color: #F8B425;
|
||||
}
|
||||
}
|
||||
.card:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.echertsBox {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
.left_Box {
|
||||
margin-right: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.right_Box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left_Box,
|
||||
.right_Box {
|
||||
background: #F9F9F9;
|
||||
box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
#chart1,
|
||||
#chart2 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
p {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .chartCss {
|
||||
// position: absolute;
|
||||
// color: black;
|
||||
// background:white;
|
||||
// font-family: Aril;
|
||||
// font-size: 12px;
|
||||
// padding: 5px;
|
||||
// display: inline;
|
||||
// }
|
||||
|
||||
:deep( .el-dialog__footer ){
|
||||
text-align: center;
|
||||
}
|
||||
:deep( .el-dialog__header ){
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
:deep( .ai-detail ){
|
||||
background: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
309
project/pidu/app/AppKeywordManagement/AppKeywordManagement.vue
Normal file
309
project/pidu/app/AppKeywordManagement/AppKeywordManagement.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<section class="AppKeywordManagement">
|
||||
<ai-list>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input size="small" placeholder="关键词搜索" v-model="search.name" clearable
|
||||
@clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(current = 1), getTableData();}"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
|
||||
@getList="getTableData()" :col-configs="colConfigs" :dict="dict">
|
||||
<el-table-column slot="options" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="edit(row)">启用</el-button>
|
||||
<el-button type="text" @click="edit(row)">编辑</el-button>
|
||||
<el-button type="text" @click="del(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<ai-dialog
|
||||
:title="form.id ? '编辑敏感词' : '添加敏感词'"
|
||||
:visible.sync="dialog"
|
||||
:destroyOnClose="true"
|
||||
width="720px"
|
||||
@onConfirm="onConfirm"
|
||||
@closed="form={}">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="敏感词" prop="registerCount">
|
||||
<el-input v-model.trim="form.registerCount" placeholder="请输入正整数" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="生效地区" prop="friendCount">
|
||||
<el-input v-model.trim="form.friendCount" placeholder="请输入正整数" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="生效部门" prop="confidantCount">
|
||||
<el-input v-model.trim="form.confidantCount" placeholder="请输入正整数" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "AppKeywordManagement",
|
||||
label: '关键词管理',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
menuName:String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
name: '',
|
||||
departmentId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
areaId: '',
|
||||
},
|
||||
departIdList: [],
|
||||
tableData: [],
|
||||
size: 10,
|
||||
total: 0,
|
||||
current: 1,
|
||||
girdList: [],
|
||||
form: {
|
||||
registerCount: 0,
|
||||
friendCount: 0,
|
||||
confidantCount: 0
|
||||
},
|
||||
personList: [],
|
||||
dialog: false,
|
||||
girdOptions: [],
|
||||
defaultProps: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
},
|
||||
chooseUserList: [],
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('integralCalcType')
|
||||
this.getTableData()
|
||||
this.getGridList()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: "name", label: '关键词', align: "left"},
|
||||
{ prop: "areaName", label: '创建时间'},
|
||||
{ prop: "departmentName", label: '创建人'},
|
||||
{ prop: "phone", label: '生效地区'},
|
||||
{ prop: "registerCount", label: '生效部门'},
|
||||
{ slot: "options" },
|
||||
]
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
registerCount: [{required: true, message: '请输入登记数', trigger: 'blur' },
|
||||
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||
friendCount: [{required: true, message: '请输入朋友数', trigger: 'blur' },
|
||||
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||
confidantCount: [{required: true, message: '请输入知己数', trigger: 'blur' },
|
||||
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
this.instance.post(`/app/appwxuserfamiliarityrate/list`,null,{
|
||||
params: {
|
||||
...this.search,
|
||||
current: this.current,
|
||||
size: this.size,
|
||||
total: this.total
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
onAreaChange () {
|
||||
this.search.current = 1
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getTableData()
|
||||
})
|
||||
},
|
||||
del(row) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appwxuserfamiliarityrate/delete?id=${row.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getTableData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
edit(row) {
|
||||
this.dialog = true
|
||||
this.form = {...row}
|
||||
},
|
||||
|
||||
selectPerson(val) {
|
||||
console.log(val)
|
||||
if (val) {
|
||||
this.personList = val
|
||||
this.form.ids = [...this.personList.map(e => e.sysUserId)]
|
||||
} else {
|
||||
this.form.ids = this.chooseUserList.map(e => e.sysUserId)
|
||||
}
|
||||
},
|
||||
|
||||
getGridList() {
|
||||
this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.girdOptions = this.toTree(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 转树形结构
|
||||
toTree(data) {
|
||||
let result = [];
|
||||
if (!Array.isArray(data)) {
|
||||
return result
|
||||
}
|
||||
let map = {};
|
||||
data.forEach(item => {
|
||||
map[item.id] = item;
|
||||
});
|
||||
data.forEach(item => {
|
||||
let parent = map[item.parentid];
|
||||
if (parent) {
|
||||
(parent.children || (parent.children = [])).push(item);
|
||||
} else {
|
||||
result.push(item);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
gridChange(val) {
|
||||
this.departIdList = val
|
||||
this.search.departmentId = val?.[val.length - 1]
|
||||
this.$refs.cascader1.dropDownVisible = false;
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
if(this.flag) return
|
||||
|
||||
this.$refs.form.validate((valid)=> {
|
||||
if(valid) {
|
||||
this.flag = true
|
||||
this.instance.post(`/app/appwxuserfamiliarityrate/webUpdate`,{...this.form}).then(res => {
|
||||
if(res?.code == 0) {
|
||||
this.$message.success('分类信息修改成功')
|
||||
setTimeout(() =>{
|
||||
this.dialog = false
|
||||
this.getTableData()
|
||||
this.flag = false
|
||||
}, 600)
|
||||
} else {
|
||||
this.flag = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
toDetail(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppKeywordManagement {
|
||||
height: 100%;
|
||||
|
||||
:deep( .ai-dialog .ai-dialog__content ){
|
||||
max-height: 600px!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.userlist {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.userlist, .user {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.user {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
|
||||
.remove-icon {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: -4px;
|
||||
line-height: 1;
|
||||
padding: 6px 0;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: crimson;
|
||||
}
|
||||
}
|
||||
|
||||
img, h2 {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin: 0 auto 4px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .selectCont .pagination ){
|
||||
width: 100%!important;
|
||||
background: pink;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
329
project/pidu/app/AppSensitive/AppSensitive.vue
Normal file
329
project/pidu/app/AppSensitive/AppSensitive.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<section class="AppSensitive">
|
||||
<ai-list>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-area-get
|
||||
style="width: 180px;"
|
||||
placeholder="请选择地区"
|
||||
:instance="instance"
|
||||
v-model="search.areaId"
|
||||
@select="onAreaChange"/>
|
||||
<el-cascader ref="cascader1" clearable v-model="departIdList" :options="girdOptions" placeholder="所属部门" size="small"
|
||||
:props="defaultProps" :show-all-levels="false" @change="gridChange"></el-cascader>
|
||||
<ai-select v-model="search.integralType" placeholder="会话类型" @change="current=1, getTableData()"
|
||||
:selectList="dict.getDict('integralType')"/>
|
||||
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input size="small" placeholder="敏感词、涉及对象、姓名、手机号" v-model="search.name" clearable
|
||||
@clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(current = 1), getTableData();}"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
|
||||
@getList="getTableData()" :col-configs="colConfigs" :dict="dict">
|
||||
<el-table-column slot="options" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="edit(row)">编辑</el-button>
|
||||
<el-button type="text" @click="del(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<ai-dialog
|
||||
title="分类信息详情"
|
||||
:visible.sync="dialog"
|
||||
:destroyOnClose="true"
|
||||
width="720px"
|
||||
@onConfirm="onConfirm"
|
||||
@closed="form={}">
|
||||
<ai-wrapper>
|
||||
<ai-info-item label="姓名" :value="form.name"></ai-info-item>
|
||||
<ai-info-item label="部门" :value="form.departmentName"></ai-info-item>
|
||||
<ai-info-item label="手机号" :value="form.phone"></ai-info-item>
|
||||
<ai-info-item label="行政区划" :value="form.areaName"></ai-info-item>
|
||||
</ai-wrapper>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="登记数" prop="registerCount">
|
||||
<el-input v-model.trim="form.registerCount" placeholder="请输入正整数" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="朋友数" prop="friendCount">
|
||||
<el-input v-model.trim="form.friendCount" placeholder="请输入正整数" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="知己数" prop="confidantCount">
|
||||
<el-input v-model.trim="form.confidantCount" placeholder="请输入正整数" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "AppSensitive",
|
||||
label: '敏感词触发',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
menuName:String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
name: '',
|
||||
departmentId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
areaId: '',
|
||||
},
|
||||
departIdList: [],
|
||||
tableData: [],
|
||||
size: 10,
|
||||
total: 0,
|
||||
current: 1,
|
||||
girdList: [],
|
||||
form: {
|
||||
registerCount: 0,
|
||||
friendCount: 0,
|
||||
confidantCount: 0
|
||||
},
|
||||
personList: [],
|
||||
dialog: false,
|
||||
girdOptions: [],
|
||||
defaultProps: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
},
|
||||
chooseUserList: [],
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('integralCalcType')
|
||||
this.getTableData()
|
||||
this.getGridList()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: "name", label: '触发敏感词', align: "left"},
|
||||
{ prop: "departmentName", label: '会话类型'},
|
||||
{ prop: "areaName", label: '行政区划'},
|
||||
{ prop: "phone", label: '部门'},
|
||||
{ prop: "registerCount", label: '涉及对象'},
|
||||
{ prop: "friendCount", label: '姓名'},
|
||||
{ prop: "confidantCount", label: '手机号'},
|
||||
{ prop: "createTime", label: '日期', width:220},
|
||||
{ slot: "options" },
|
||||
]
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
registerCount: [{required: true, message: '请输入登记数', trigger: 'blur' },
|
||||
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||
friendCount: [{required: true, message: '请输入朋友数', trigger: 'blur' },
|
||||
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||
confidantCount: [{required: true, message: '请输入知己数', trigger: 'blur' },
|
||||
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
this.instance.post(`/app/appwxuserfamiliarityrate/list`,null,{
|
||||
params: {
|
||||
...this.search,
|
||||
current: this.current,
|
||||
size: this.size,
|
||||
total: this.total
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
onAreaChange () {
|
||||
this.search.current = 1
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getTableData()
|
||||
})
|
||||
},
|
||||
del(row) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appwxuserfamiliarityrate/delete?id=${row.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getTableData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
edit(row) {
|
||||
this.dialog = true
|
||||
this.form = {...row}
|
||||
},
|
||||
|
||||
selectPerson(val) {
|
||||
console.log(val)
|
||||
if (val) {
|
||||
this.personList = val
|
||||
this.form.ids = [...this.personList.map(e => e.sysUserId)]
|
||||
} else {
|
||||
this.form.ids = this.chooseUserList.map(e => e.sysUserId)
|
||||
}
|
||||
},
|
||||
|
||||
getGridList() {
|
||||
this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.girdOptions = this.toTree(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 转树形结构
|
||||
toTree(data) {
|
||||
let result = [];
|
||||
if (!Array.isArray(data)) {
|
||||
return result
|
||||
}
|
||||
let map = {};
|
||||
data.forEach(item => {
|
||||
map[item.id] = item;
|
||||
});
|
||||
data.forEach(item => {
|
||||
let parent = map[item.parentid];
|
||||
if (parent) {
|
||||
(parent.children || (parent.children = [])).push(item);
|
||||
} else {
|
||||
result.push(item);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
gridChange(val) {
|
||||
this.departIdList = val
|
||||
this.search.departmentId = val?.[val.length - 1]
|
||||
this.$refs.cascader1.dropDownVisible = false;
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
if(this.flag) return
|
||||
|
||||
this.$refs.form.validate((valid)=> {
|
||||
if(valid) {
|
||||
this.flag = true
|
||||
this.instance.post(`/app/appwxuserfamiliarityrate/webUpdate`,{...this.form}).then(res => {
|
||||
if(res?.code == 0) {
|
||||
this.$message.success('分类信息修改成功')
|
||||
setTimeout(() =>{
|
||||
this.dialog = false
|
||||
this.getTableData()
|
||||
this.flag = false
|
||||
}, 600)
|
||||
} else {
|
||||
this.flag = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
toDetail(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppSensitive {
|
||||
height: 100%;
|
||||
|
||||
:deep( .ai-dialog .ai-dialog__content ){
|
||||
max-height: 600px!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.userlist {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.userlist, .user {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.user {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
|
||||
.remove-icon {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: -4px;
|
||||
line-height: 1;
|
||||
padding: 6px 0;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: crimson;
|
||||
}
|
||||
}
|
||||
|
||||
img, h2 {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin: 0 auto 4px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: $primaryColor;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .selectCont .pagination ){
|
||||
width: 100%!important;
|
||||
background: pink;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
70
project/pidu/app/AppSessionArchive/AppSessionArchive.vue
Normal file
70
project/pidu/app/AppSessionArchive/AppSessionArchive.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="AppSessionArchive">
|
||||
<keep-alive :include="['List']">
|
||||
<component
|
||||
ref="component"
|
||||
:is="component"
|
||||
@change="onChange"
|
||||
:params="params"
|
||||
:instance="instance"
|
||||
:dict="dict"
|
||||
></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from "./components/List";
|
||||
import Detail from "./components/Detail";
|
||||
|
||||
export default {
|
||||
name: "AppSessionArchive",
|
||||
label: "会话存档",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: "List",
|
||||
params: {},
|
||||
include: [],
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
Detail,
|
||||
List,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === "Detail") {
|
||||
this.component = "Detail";
|
||||
this.params = data.params;
|
||||
}
|
||||
|
||||
if (data.type === "List") {
|
||||
this.component = "List";
|
||||
this.params = data.params;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppSessionArchive {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
412
project/pidu/app/AppSessionArchive/components/Detail.vue
Normal file
412
project/pidu/app/AppSessionArchive/components/Detail.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<ai-list v-loading="isLoading" class="detail">
|
||||
<template slot="title">
|
||||
<ai-title title="会话存档详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template #left>
|
||||
<div class="addressBook-left">
|
||||
<div class="addressBook-left__title">
|
||||
<h2 :class="[tabIndex === 0 ? 'tab-active' : '']">群聊会话</h2>
|
||||
<h2 :class="[tabIndex === 1 ? 'tab-active' : '']">私聊会话</h2>
|
||||
</div>
|
||||
<div class="addressBook-left__list--title">
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入联系人姓名"
|
||||
v-model="searchName"
|
||||
clearable
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="addressBook-left__list--wrapper">
|
||||
<div class="addressBook-left__list--item active">
|
||||
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||
</div>
|
||||
<div class="addressBook-left__list--item">
|
||||
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||
</div>
|
||||
<div class="addressBook-left__list--item">
|
||||
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="content-right-title">
|
||||
<div class="tab-content">
|
||||
<h2 class="tab-active">全部</h2>
|
||||
<h2>图片/视频</h2>
|
||||
<h2>文件</h2>
|
||||
</div>
|
||||
<div class="search-content">
|
||||
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
|
||||
</el-date-picker>
|
||||
<el-input size="small" placeholder="输入搜索内容" v-model="search.name" clearable
|
||||
@clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(current = 1), getTableData();}"/>
|
||||
<ai-download :instance="instance" url="/app/appconvenientaddressbook/export" :params="search" fileName="会话存档"
|
||||
:disabled="tableData.length == 0">
|
||||
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||||
</ai-download>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right-info">
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<div class="item item-left" v-if="item.type">
|
||||
<p class="time">2023-04-26 16:11:43</p>
|
||||
<div class="item-content-flex">
|
||||
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="user-img">
|
||||
<div class="content">
|
||||
<span></span>
|
||||
<p>{{item.content}}</p>
|
||||
</div>
|
||||
<i class="el-icon-warning"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item-right" v-else>
|
||||
<p class="time">2023-04-26 16:11:43</p>
|
||||
<div class="item-content-flex">
|
||||
<i class="el-icon-warning"></i>
|
||||
<div class="content">
|
||||
<span></span>
|
||||
<p>{{item.content}}</p>
|
||||
</div>
|
||||
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="user-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Detail',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
info: {},
|
||||
isShow: false,
|
||||
currIndex: 0,
|
||||
isLoading: false,
|
||||
tableData: [],
|
||||
form: {
|
||||
code: ''
|
||||
},
|
||||
colConfigs: [
|
||||
{ slot: 'goods', label: '商品' },
|
||||
{ prop: 'merchandiseIntegral', align: 'center', label: '单价' },
|
||||
{ prop: 'merchandiseNumber', align: 'center', label: '数量' },
|
||||
{ prop: 'merchandiseIntegral', align: 'center', label: '小计' }
|
||||
],
|
||||
|
||||
|
||||
|
||||
tabIndex: 0,
|
||||
searchName: '',
|
||||
time: [],
|
||||
search: {
|
||||
name: ''
|
||||
},
|
||||
current: 1,
|
||||
list: [
|
||||
{type: 0, content: '123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右'},
|
||||
{type: 1, content: '123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左'},
|
||||
{type: 0, content: '456右右右右'},
|
||||
{type: 0, content: '123右右右右'},
|
||||
{type: 1, content: '123左左左左'},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
// this.isLoading = true
|
||||
if (this.params && this.params.id) {
|
||||
this.id = this.params.id
|
||||
this.dict.load(['merchandiseOrderStatus']).then(() => {
|
||||
// this.getInfo(this.params.id)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.instance.post(`/app/appintegralmerchandiseorder/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.tableData = [this.info]
|
||||
}
|
||||
|
||||
this.isLoading = false
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/appintegralmerchandiseorder/writeOffOrder`, null, {
|
||||
params: {
|
||||
code: this.form.code,
|
||||
id: this.params.id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.isShow = false
|
||||
this.getInfo(this.params.id)
|
||||
this.$message.success('核销成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
cancel () {
|
||||
this.$emit('change', {
|
||||
type: 'List',
|
||||
isRefresh: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail {
|
||||
.addressBook-left {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #FAFAFB;
|
||||
|
||||
.addressBook-left__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.tab-active {
|
||||
color: #2266FF;
|
||||
border-bottom: 2px solid #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addressBook-left__list--wrapper {
|
||||
height: calc(100% - 68px);
|
||||
padding: 8px;
|
||||
.addressBook-left__list--item {
|
||||
line-height: 44px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.addressBook-left__list--item:hover {
|
||||
background-color: #E8EFFF;
|
||||
}
|
||||
.active {
|
||||
background-color: #E8EFFF;
|
||||
color: #26f;
|
||||
}
|
||||
}
|
||||
.addressBook-left__list--title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 8px 8px 0;
|
||||
|
||||
.addressBook-left__list--search {
|
||||
flex: 1;
|
||||
|
||||
:deep( input ){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 84px;
|
||||
flex-shrink: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .ai-list__content--right ){
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 1px;
|
||||
box-shadow: none;
|
||||
|
||||
.ai-list__content--right-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep .ai-list__content--right-wrapper {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.content-right-title {
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: content-box;
|
||||
.tab-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.tab-active {
|
||||
color: #2266FF;
|
||||
border-bottom: 2px solid #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-content {
|
||||
display: flex;
|
||||
padding: 4px 8px 4px 0;
|
||||
.ai-download,
|
||||
.el-input {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.el-input {
|
||||
width: 240px;
|
||||
}
|
||||
.el-date-editor--daterange {
|
||||
width: 240px;
|
||||
}
|
||||
:deep .el-date-editor .el-range-separator {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right-info {
|
||||
padding: 24px 16px;
|
||||
.item {
|
||||
margin-bottom: 48px;
|
||||
.time {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
.item-content-flex {
|
||||
display: flex;
|
||||
.user-img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.content {
|
||||
max-width: calc(100% - 144px);
|
||||
position: relative;
|
||||
background-color: #f3f6f9;
|
||||
|
||||
span {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border: 10px solid transparent;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
line-height: 28px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.el-icon-warning {
|
||||
font-size: 32px;
|
||||
color: #f46;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-left {
|
||||
.item-content-flex {
|
||||
.user-img {
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
.content {
|
||||
span {
|
||||
left: -18px;
|
||||
border-right-color: #f3f6f9;
|
||||
}
|
||||
}
|
||||
.el-icon-warning {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.item-right {
|
||||
width: 100%;
|
||||
justify-content: right;
|
||||
.item-content-flex {
|
||||
justify-content: end;
|
||||
.user-img {
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
.content {
|
||||
background-color: #90e287;
|
||||
span {
|
||||
border-left-color:#90e287;
|
||||
right: -18px;
|
||||
}
|
||||
}
|
||||
.el-icon-warning {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
931
project/pidu/app/AppSessionArchive/components/List.vue
Normal file
931
project/pidu/app/AppSessionArchive/components/List.vue
Normal file
@@ -0,0 +1,931 @@
|
||||
<template>
|
||||
<ai-list class="List">
|
||||
<template slot="title">
|
||||
<ai-title title="会话存档" isShowBottomBorder></ai-title>
|
||||
</template>
|
||||
<template #left>
|
||||
<div class="addressBook-left">
|
||||
<div class="addressBook-left__title">
|
||||
<h2 @click="tabIndex = 0, search.current = 1, getList()" :class="[tabIndex === 0 ? 'tab-active' : '']">
|
||||
组织架构</h2>
|
||||
<h2 @click="tabIndex = 1, search.current = 1, getList()" :class="[tabIndex === 1 ? 'tab-active' : '']">行政区划</h2>
|
||||
</div>
|
||||
<div class="addressBook-left__list--title" v-if="tabIndex === 0">
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入部门名称"
|
||||
v-model="unitName"
|
||||
clearable
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="addressBook-left__list--title" v-if="tabIndex === 1">
|
||||
<el-input
|
||||
class="addressBook-left__list--search"
|
||||
size="mini"
|
||||
clearable
|
||||
style="width: 154px;"
|
||||
placeholder="请输入地区名称"
|
||||
v-model="tagName"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="addressBook-left__list--wrapper">
|
||||
<div class="addressBook-left__list" v-show="tabIndex === 0">
|
||||
<el-tree
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:data="unitList"
|
||||
highlight-current
|
||||
@node-contextmenu="nodeContextmenu"
|
||||
:current-node-key="search.departmentId"
|
||||
:default-expanded-keys="defaultExpanded"
|
||||
:default-checked-keys="defaultChecked"
|
||||
@current-change="onTreeChange">
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<!-- <el-button size="small" type="primary" icon="iconfont iconAdd" v-if="tabIndex === 0" @click="toAdd('')">添加成员
|
||||
</el-button>
|
||||
<ai-import :instance="instance" :dict="dict" v-if="tabIndex === 0" type="wxcp/wxuser" name="会话存档"
|
||||
:importParams="{departmentId:search.departmentId}" @success="getList"/> -->
|
||||
<el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading" @click="syncMembers">同步部门</el-button>
|
||||
<el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading" @click="syncUser">同步成员</el-button>
|
||||
<ai-wechat-selecter refs="addTags" :instance="instance" v-model="users" @change="onChooseUser"
|
||||
:disabled="currIndex < 0" v-if="tabIndex === 1">
|
||||
<!-- <el-button size="small" :disabled="currIndex < 0" type="primary" icon="iconfont iconAdd">添加成员</el-button> -->
|
||||
</ai-wechat-selecter>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="请输入成员姓名、手机号或标签名称"
|
||||
clearable
|
||||
@clear="search.current = 1, search.name = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
v-loading="loading"
|
||||
style="margin-top: 6px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
@getList="getList">
|
||||
<el-table-column slot="avatar" label="" align="right" width="100px">
|
||||
<template slot-scope="{ row }">
|
||||
<img class="table-avatar" :src="row.avatar || 'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="tags" label="标签" align="left">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-tags" v-if="row.tagNames">
|
||||
<el-tag type="info" v-for="(item, index) in row.tagNames.split('、')" size="small" :key="index">{{
|
||||
item
|
||||
}}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="toDetail(row.id)">查看会话记录</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<div slot="paginationBtns" class="addressBook-table__btns">
|
||||
<span style="margin-right: 8px;" @click="removeAll">{{ tabIndex === 0 ? '批量删除' : '批量移除' }}</span>
|
||||
<ai-wechat-selecter :instance="instance" v-model="department" isChooseUnit @change="onDepartment"
|
||||
v-if="tabIndex === 0">
|
||||
<span>批量导出</span>
|
||||
</ai-wechat-selecter>
|
||||
</div>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
users: [],
|
||||
isShowMenu: false,
|
||||
department: [],
|
||||
btnLoading: false,
|
||||
menuInfo: {
|
||||
x: '',
|
||||
y: '',
|
||||
node: {}
|
||||
},
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
title: '',
|
||||
tagname: '',
|
||||
name: '',
|
||||
tagIds: '',
|
||||
departmentId: ''
|
||||
},
|
||||
tagForm: {
|
||||
tagname: ''
|
||||
},
|
||||
isShowDepart: false,
|
||||
departForm: {
|
||||
name: ''
|
||||
},
|
||||
loading: false,
|
||||
isShowTags: false,
|
||||
defaultChecked: [],
|
||||
defaultExpanded: [],
|
||||
tabIndex: 0,
|
||||
currIndex: -1,
|
||||
areaList: [],
|
||||
total: 0,
|
||||
colConfigs: [
|
||||
{type: 'selection', label: ''},
|
||||
{slot: 'avatar', label: ''},
|
||||
{prop: 'name', label: '姓名'},
|
||||
{prop: 'position', label: '职务'},
|
||||
{prop: 'departmentNames', label: '部门'},
|
||||
{prop: 'mobile', label: '手机号'},
|
||||
// {slot: 'tags', label: '标签'},
|
||||
// {prop: 'status', label: '账号状态', align: 'center', format: v => v == 1 ? '已激活' : '未激活'}
|
||||
],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
unitName: '',
|
||||
rootId: '',
|
||||
unitList: [],
|
||||
tagsList: [],
|
||||
tagName: '',
|
||||
sourceTagList: [],
|
||||
tableData: [],
|
||||
tagId: '',
|
||||
departmentName: '',
|
||||
departId: '',
|
||||
ids: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
watch: {
|
||||
unitName(val) {
|
||||
this.$refs.tree.filter(val)
|
||||
},
|
||||
|
||||
tagName(val) {
|
||||
if (!val) {
|
||||
this.tagsList = this.sourceTagList
|
||||
}
|
||||
|
||||
this.tagsList = this.sourceTagList.filter(v => v.tagname.indexOf(val) > -1)
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getTree()
|
||||
this.getList()
|
||||
this.getTags()
|
||||
document.querySelector('html').addEventListener('click', this.bindEvent)
|
||||
|
||||
this.$nextTick(() => {
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeTag(index) {
|
||||
this.currIndex = index
|
||||
this.search.current = 1
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
bindEvent() {
|
||||
this.isShowMenu = false
|
||||
},
|
||||
|
||||
nodeContextmenu(e, node) {
|
||||
this.isShowMenu = true
|
||||
let y = e.y + 6
|
||||
if (y + 202 > document.body.clientHeight) {
|
||||
y = y - 202
|
||||
}
|
||||
this.menuInfo = {
|
||||
x: e.x + 16, y,
|
||||
node
|
||||
}
|
||||
},
|
||||
removeTags(id) {
|
||||
if (this.currIndex < 0) {
|
||||
return this.$message.error('请选择标签')
|
||||
}
|
||||
|
||||
this.$confirm('确定移除该成员？').then(() => {
|
||||
this.instance.post(`/app/wxcp/wxtag/removeTag?userIds=${id}&tagId=${this.tagsList[this.currIndex].id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('移除成功!')
|
||||
this.search.current = 1
|
||||
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onDepartment(e) {
|
||||
if (!e.length) {
|
||||
return this.$message.error('请选择部门')
|
||||
}
|
||||
const ids = e.map(v => v.id).join(',')
|
||||
|
||||
this.department = []
|
||||
this.instance.post(`/app/wxcp/wxuser/export?departmentId=${ids}`, null, {
|
||||
responseType: 'blob'
|
||||
}).then(res => {
|
||||
if (res?.type == "application/json") {
|
||||
let reader = new FileReader()
|
||||
reader.readAsText(res, "utf-8")
|
||||
reader.onload = e => {
|
||||
if (e.target.readyState === 2) {
|
||||
let ret = JSON.parse(e.target.result)
|
||||
if (ret?.code == 0) {
|
||||
this.$message.success(ret.msg)
|
||||
} else this.$message.error(ret.msg)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const link = document.createElement('a')
|
||||
let blob = new Blob([res], {type: res.type})
|
||||
link.style.display = 'none'
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.setAttribute('download', `${e[0].name}.xls`)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
this.$message.success('导出成功！')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onChooseUser(e) {
|
||||
if (!e.length) {
|
||||
return this.$message.error('请选择成员')
|
||||
}
|
||||
|
||||
this.instance.post(`/app/wxcp/wxtag/markTag`, null, {
|
||||
params: {
|
||||
tagId: this.tagsList[this.currIndex].id,
|
||||
userIds: e.map(v => v.id).join(',')
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.getList()
|
||||
this.users = []
|
||||
this.search.current = 1
|
||||
this.$refs.addTags.reset()
|
||||
} else {
|
||||
this.users = []
|
||||
}
|
||||
}).catch(() => {
|
||||
this.users = []
|
||||
})
|
||||
},
|
||||
|
||||
handleTreeCommand(e, item) {
|
||||
this.isShowMenu = false
|
||||
|
||||
if (e === 'add') {
|
||||
this.departForm.id = ''
|
||||
this.departForm.parentid = item.id
|
||||
this.departId = ''
|
||||
this.isShowDepart = true
|
||||
} else if (e === 'edit') {
|
||||
this.departForm = {
|
||||
...item
|
||||
}
|
||||
|
||||
this.departId = item.id
|
||||
this.isShowDepart = true
|
||||
} else if (e === 'top') {
|
||||
if (!item.i) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.moveDepart(item.id, 0)
|
||||
} else if (e === 'bottom') {
|
||||
if ((item.i === item.len - 1) || (!item.i && item.i !== 0)) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.moveDepart(item.id, 1)
|
||||
} else if (e === 'remove') {
|
||||
this.removeDepart(item.id, item.parentid)
|
||||
}
|
||||
},
|
||||
|
||||
removeDepart(id, parentid) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/wxcp/wxdepartment/delete?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.defaultChecked = [parentid]
|
||||
this.$message.success('删除成功！')
|
||||
this.getTree()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
moveDepart(id, type) {
|
||||
this.instance.post(`/app/wxcp/wxdepartment/move?id=${id}&type=${type}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.defaultChecked = [id]
|
||||
this.getTree()
|
||||
this.$message.success(type === 0 ? '上移成功' : '下移成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onDepartConfirm() {
|
||||
this.$refs.departForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/wxcp/wxdepartment/addOrUpdate`, {
|
||||
...this.departForm,
|
||||
departId: this.departId
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.defaultChecked = [this.departForm.parentid]
|
||||
this.isShowDepart = false
|
||||
this.getTree()
|
||||
this.$message.success(this.departId ? '编辑成功' : '新增成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onFormConfirm() {
|
||||
this.$refs.tagForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/wxcp/wxtag/addOrUpdate`, {
|
||||
...this.tagForm
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.isShowTags = false
|
||||
this.getTags()
|
||||
this.$message.success(this.tagId ? '编辑成功' : '新增成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleCommand(e, item) {
|
||||
if (e === 'edit') {
|
||||
this.tagId = item.id
|
||||
this.tagForm = {
|
||||
...item
|
||||
}
|
||||
|
||||
this.isShowTags = true
|
||||
} else {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/wxcp/wxtag/delete?id=${item.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getTags()
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.tagId = ''
|
||||
this.tagForm.tagname = ''
|
||||
this.departForm.name = ''
|
||||
this.departId = ''
|
||||
this.departForm.nameEn = ''
|
||||
this.departForm.parentid = ''
|
||||
this.departForm.showIndex = ''
|
||||
},
|
||||
|
||||
syncMembers() {
|
||||
this.btnLoading = true
|
||||
|
||||
this.instance.post(`/app/wxcp/wxdepartment/syncDepart`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('同步成功')
|
||||
this.getList()
|
||||
this.getTree()
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
syncUser() {
|
||||
let departId = this.search.departmentId;
|
||||
if (!departId) departId = 1;
|
||||
this.btnLoading = true
|
||||
|
||||
this.instance.post(`/app/wxcp/wxdepartment/syncUser?departmentId=${departId}`, null, {
|
||||
timeout: 1000000
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('同步成功')
|
||||
this.getList()
|
||||
this.getTree()
|
||||
}
|
||||
|
||||
this.btnLoading = false
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
getTags() {
|
||||
this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.sourceTagList = res.data.length ? JSON.parse(JSON.stringify(res.data)) : []
|
||||
this.tagsList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onSwitchChange(id) {
|
||||
this.instance.post(`/app/wxcp/wxuser/enable?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onTreeChange(e) {
|
||||
this.departmentName = e.name
|
||||
this.search.departmentId = e.id || ''
|
||||
this.search.current = 1
|
||||
this.isShowMenu = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.instance.post(`/app/wxcp/wxuser/list`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
departmentId: this.tabIndex === 0 ? this.search.departmentId : '',
|
||||
tagIds: this.tabIndex === 1 ? (this.currIndex >= 0 ? this.tagsList[this.currIndex].id : '') : '',
|
||||
listType: this.tabIndex
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
if (!this.ids) return
|
||||
|
||||
if (this.tabIndex === 1) {
|
||||
this.removeTags(this.ids)
|
||||
} else {
|
||||
this.remove(this.ids)
|
||||
}
|
||||
},
|
||||
|
||||
handleSelectionChange(e) {
|
||||
this.ids = e.map(v => v.id).join(',')
|
||||
},
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
|
||||
changeTab(id, index) {
|
||||
this.currIndex = index
|
||||
this.search.areaId = id
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
getTree() {
|
||||
this.instance.post(`/app/wxcp/wxdepartment/listAll?unitName=${this.unitName}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
let parent = res.data.map(v => {
|
||||
v.label = v.name
|
||||
v.children = []
|
||||
|
||||
return v
|
||||
}).filter(e => !e.parentid)[0]
|
||||
this.defaultExpanded = [parent.id]
|
||||
this.defaultChecked = [parent.id]
|
||||
this.search.departmentId = parent.id
|
||||
this.departmentName = parent.name
|
||||
this.addChild(parent, res.data)
|
||||
this.unitList = [parent]
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(parent.id)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
addChild(parent, list) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].parentid === parent.id) {
|
||||
list[i].i = parent.children.length
|
||||
parent.children.push(list[i])
|
||||
}
|
||||
}
|
||||
|
||||
if (parent.children.length) {
|
||||
parent.children.forEach(v => {
|
||||
v.len = parent.children.length
|
||||
})
|
||||
}
|
||||
|
||||
if (list.length > 0) {
|
||||
parent['children'].map(v => this.addChild(v, list))
|
||||
}
|
||||
},
|
||||
|
||||
formatList(list) {
|
||||
var arr = []
|
||||
for (let item of list) {
|
||||
if (item.childrenUser && item.childrenUser.length) {
|
||||
delete item.childrenUser
|
||||
}
|
||||
|
||||
if (item.childrenDept && item.childrenDept.length) {
|
||||
this.formatList(item.childrenDept)
|
||||
}
|
||||
|
||||
arr.push(item)
|
||||
}
|
||||
|
||||
return arr
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/wxcp/wxuser/delete?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
toDetail(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id: id || '',
|
||||
departmentId: this.search.departmentId || '',
|
||||
departmentName: this.departmentName || ''
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.List {
|
||||
.addressBook-table__btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.table-tags {
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.import-wrapper {
|
||||
& > h2 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
color: #222222;
|
||||
font-weight: Bold;
|
||||
}
|
||||
|
||||
.import-wrapper__tips {
|
||||
line-height: 1;
|
||||
margin-bottom: 24px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
color: #2266FF;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.import-files {
|
||||
i {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.tree-name {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
transform: translateY(-50%);
|
||||
padding-right: 8px;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
border: 1px solid #D0D4DC;
|
||||
background: #F3F4F7;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #222222;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-top: 3px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
.el-button--mini, .el-button--mini.is-round {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
|
||||
:deep( span ){
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.addressBook-left__list--title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 8px 8px 0;
|
||||
|
||||
.addressBook-left__list--search {
|
||||
flex: 1;
|
||||
|
||||
:deep( input ){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 84px;
|
||||
flex-shrink: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.addressBook-left {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #FAFAFB;
|
||||
|
||||
.addressBook-left__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.tab-active {
|
||||
color: #2266FF;
|
||||
border-bottom: 2px solid #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 1px;
|
||||
// }
|
||||
|
||||
.addressBook-left__list--wrapper {
|
||||
height: calc(100% - 68px);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.addressBook-left__list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
:deep( .el-tree ){
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
:deep( .el-scrollbar__wrap ){
|
||||
margin-bottom: 0 !important;
|
||||
overflow-x: hidden;
|
||||
|
||||
.el-scrollbar__view {
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.addressBook-left__tags--item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 8px 0 16px;
|
||||
cursor: pointer;
|
||||
color: #222222;
|
||||
|
||||
&.addressBook-left__tags--item-active, &:hover {
|
||||
background: #E8EFFF;
|
||||
color: #2266FF;
|
||||
|
||||
i, span {
|
||||
color: #2266FF;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
color: #8e9ebf;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep( .el-tree ){
|
||||
background: transparent;
|
||||
|
||||
.el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree__empty-text {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-tree-node__children .el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: #E8EFFF;
|
||||
color: #222222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
&:hover {
|
||||
background: #2266FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
background: #2266FF;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .ai-list__content--right ){
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 1px;
|
||||
box-shadow: none;
|
||||
|
||||
.ai-list__content--right-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user