黔西南大屏
This commit is contained in:
yanran200730
@@ -82,7 +82,7 @@
|
||||
<h2>单位成员关系人数</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 220px; width: 100%;"
|
||||
style="height: 236px; width: 100%;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="barChart8">
|
||||
@@ -135,7 +135,7 @@
|
||||
<h2>近期成员使用分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 220px; width: 100%;"
|
||||
style="height: 236px; width: 100%;"
|
||||
:ref="'chart'"
|
||||
:data="lineData"
|
||||
:ops="lineChart1">
|
||||
@@ -544,9 +544,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
startAngle: 90,
|
||||
minAngle: 5,
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
@@ -555,13 +552,6 @@
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -842,6 +832,7 @@
|
||||
.left-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
.left-item {
|
||||
position: relative;
|
||||
|
||||
@@ -33,72 +33,78 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>增长情况</h2>
|
||||
<div class="right-left__top">
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>上报来源分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 230px; width: 100%;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="lineChart1">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>事件办理情況</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 230px; width: 100%;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="lineChart1">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 200px; width: 500px;"
|
||||
:ref="'chart'"
|
||||
:data="lineData"
|
||||
:ops="lineChart1">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
<div class="right-left__middle">
|
||||
<div class="left">
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>覆盖率</h2>
|
||||
<h2>事件受理率</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="60"></DoughnutChart>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>群标签化率</h2>
|
||||
<h2>事件办结率</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>群标签情况</h2>
|
||||
<h2>最新办理动态</h2>
|
||||
<el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
|
||||
<el-option label="XXX派出所" value="1"></el-option>
|
||||
<el-option label="XXX派出所" value="2"></el-option>
|
||||
<el-option label="XXX派出所" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 230px; width: 245px;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="barChart8">
|
||||
</ai-echart-v2>
|
||||
<AiDvTable
|
||||
style="margin-top: 16px; height: 220px;"
|
||||
stripe="1"
|
||||
:headerStyle="{
|
||||
color: '#02FEFF',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
backgroundColor: 'rgba(33, 180, 253, 0.1)'
|
||||
}"
|
||||
:config="blConfig"
|
||||
:data="bbTableData">
|
||||
</AiDvTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-left__bottom">
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>单位成员关系人数</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 220px; width: 100%;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="barChart8">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>群人数规模分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 180px; width: 100%; margin-top: 20px;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="pieChart">
|
||||
</ai-echart-v2>
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>增长情况</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 236px; margin-top: 10px; width: 100%;"
|
||||
:ref="'chart'"
|
||||
:data="chart3Data"
|
||||
:ops="chart3Config">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
</AiDvPanel>
|
||||
</div>
|
||||
@@ -116,71 +122,29 @@
|
||||
<div class="wrapper">
|
||||
<DvMap style="width: 100%; height: 356px;"></DvMap>
|
||||
</div>
|
||||
<div class="right-middle__middle">
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>成员激活</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>日均活跃率</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-middle__bottom">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>近期成员使用分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 220px; width: 100%;"
|
||||
:ref="'chart'"
|
||||
:data="lineData"
|
||||
:ops="lineChart1">
|
||||
</ai-echart-v2>
|
||||
<AiDvTable
|
||||
style="margin-top: 16px; height: 430px;"
|
||||
: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>
|
||||
</div>
|
||||
</AiDvPanel>
|
||||
</div>
|
||||
<div class="right-right">
|
||||
<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-bottom">
|
||||
<span>726,079</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>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>人员活跃(7日）</h2>
|
||||
</div>
|
||||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-left__middle">
|
||||
<div class="AppQxnDv-title">
|
||||
<h2>各单位群主及群分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 210px; width: 100%;"
|
||||
:ref="'chart5'"
|
||||
:data="barData"
|
||||
:ops="barChart">
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
</AiDvPanel>
|
||||
<AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
|
||||
<AiDvPanel class="bottom" style="" border="border6" title="办理排行">
|
||||
<AiDvTable
|
||||
:heigth="'100%'"
|
||||
stripe="1"
|
||||
@@ -215,28 +179,6 @@
|
||||
data () {
|
||||
return {
|
||||
value: '',
|
||||
lineData: [
|
||||
{
|
||||
"name": "阿斯达",
|
||||
"v1": 23,
|
||||
"v2": 33
|
||||
},
|
||||
{
|
||||
"name": "水电费",
|
||||
"v1": 12,
|
||||
"v2": 34
|
||||
},
|
||||
{
|
||||
"name": "凡哥",
|
||||
"v1": 67,
|
||||
"v2": 25
|
||||
},
|
||||
{
|
||||
"name": "党费",
|
||||
"v1": 98,
|
||||
"v2": 85
|
||||
}
|
||||
],
|
||||
lineData1: [
|
||||
{
|
||||
"name": "1月",
|
||||
@@ -270,20 +212,7 @@
|
||||
v10: '宗梦瑞'
|
||||
},
|
||||
{
|
||||
name: '单位',
|
||||
v1: '宗梦瑞',
|
||||
v2: '宗梦瑞',
|
||||
v3: '宗梦瑞',
|
||||
v4: '宗梦瑞',
|
||||
v5: '宗梦瑞',
|
||||
v6: '宗梦瑞',
|
||||
v7: '宗梦瑞',
|
||||
v8: '宗梦瑞',
|
||||
v9: '宗梦瑞',
|
||||
v10: '宗梦瑞'
|
||||
},
|
||||
{
|
||||
name: '群数量',
|
||||
name: '己办结',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
@@ -296,7 +225,7 @@
|
||||
v10: '1234'
|
||||
},
|
||||
{
|
||||
name: '群人员',
|
||||
name: '办理中',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
@@ -309,7 +238,7 @@
|
||||
v10: '1234'
|
||||
},
|
||||
{
|
||||
name: '新增群人员',
|
||||
name: '上报数',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
@@ -322,33 +251,7 @@
|
||||
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: '群消息总数',
|
||||
name: '联系TA',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
@@ -375,7 +278,7 @@
|
||||
type: "category",
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||||
},
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
@@ -407,45 +310,109 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
barChart8: {
|
||||
legend: {show: false},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||||
borderColor: 'rgba(0, 102, 154, 0.65)',
|
||||
textStyle: { color: '#fff' },
|
||||
axisPointer: { type: 'cross' }
|
||||
bbTableData: [
|
||||
{
|
||||
name: '时间',
|
||||
v: '04/18',
|
||||
v1: '04/18',
|
||||
v2: '04/18',
|
||||
v3: '04/18',
|
||||
v4: '04/18',
|
||||
v5: '04/18'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
{
|
||||
name: '姓名',
|
||||
v: '宗梦瑞',
|
||||
v1: '宗梦瑞',
|
||||
v2: '宗梦瑞',
|
||||
v3: '宗梦瑞',
|
||||
v4: '宗梦瑞',
|
||||
v5: '宗梦瑞'
|
||||
},
|
||||
xAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
|
||||
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)'
|
||||
},
|
||||
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: '事件名称',
|
||||
v: '户籍办理',
|
||||
v1: '户籍办理',
|
||||
v2: '户籍办理',
|
||||
v3: '户籍办理',
|
||||
v4: '户籍办理',
|
||||
v5: '户籍办理'
|
||||
}
|
||||
},
|
||||
barChart: {
|
||||
],
|
||||
blConfig: [{
|
||||
color: '#d0e1e8',
|
||||
align: '',
|
||||
width: '',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
}, {
|
||||
color: '#d0e1e8',
|
||||
align: 'left',
|
||||
width: '',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
}, {
|
||||
color: '#d0e1e8',
|
||||
align: 'right',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
}
|
||||
],
|
||||
chart3Data: [
|
||||
{
|
||||
"name": "人员聚集",
|
||||
"已办理": 223,
|
||||
"待处理": 23,
|
||||
"处理中": 223,
|
||||
"已拒绝": 23
|
||||
},
|
||||
{
|
||||
"name": "非法饲养动物",
|
||||
"已办理": 223,
|
||||
"待处理": 23,
|
||||
"处理中": 223,
|
||||
"已拒绝": 23
|
||||
},
|
||||
{
|
||||
"name": "婚姻家庭纠纷",
|
||||
"已办理": 223,
|
||||
"待处理": 23,
|
||||
"处理中": 223,
|
||||
"已拒绝": 23
|
||||
},
|
||||
{
|
||||
"name": "道路安全",
|
||||
"已办理": 223,
|
||||
"待处理": 23,
|
||||
"处理中": 223,
|
||||
"已拒绝": 23
|
||||
},
|
||||
{
|
||||
"name": "其他",
|
||||
"已办理": 223,
|
||||
"待处理": 23,
|
||||
"处理中": 223,
|
||||
"已拒绝": 23
|
||||
}
|
||||
] ,
|
||||
chart3Config: {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
top: '40px',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
@@ -478,8 +445,30 @@
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(219, 179, 110, 0.1)' },
|
||||
{ offset: 1, color: 'rgba(219, 179, 110, 1)' }
|
||||
{ offset: 0, color: 'rgba(44, 151, 232, 1)' },
|
||||
{ offset: 1, color: 'rgba(21, 154, 255, 0)' }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(191, 234, 255, 1)' },
|
||||
{ offset: 1, color: 'rgba(191, 234, 255, 0.1)' }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(219, 179, 110, 1)' },
|
||||
{ offset: 1, color: 'rgba(219, 179, 110, 0.1)' }
|
||||
]
|
||||
}
|
||||
],
|
||||
@@ -489,82 +478,6 @@
|
||||
barCategoryGap: 40,
|
||||
itemStyle: {}
|
||||
}
|
||||
},
|
||||
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'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '6%',
|
||||
top: '6%',
|
||||
right: '6%',
|
||||
bottom: '6%'
|
||||
},
|
||||
color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '66%'],
|
||||
labelLine:{
|
||||
normal:{
|
||||
length: 2,
|
||||
lineStyle: {
|
||||
color: '#526D7A'
|
||||
}
|
||||
}
|
||||
},
|
||||
startAngle: 90,
|
||||
minAngle: 5,
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#9BB7D4',
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -574,7 +487,7 @@
|
||||
return this.tableData.map((v, index) => {
|
||||
return {
|
||||
color: '#d0e1e8',
|
||||
textAlign: '',
|
||||
align: '',
|
||||
width: index === 0 ? '100' : '',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
@@ -769,7 +682,7 @@
|
||||
flex: 1;
|
||||
|
||||
.right-left {
|
||||
width: 500px;
|
||||
width: 530px;
|
||||
|
||||
.right-left__middle {
|
||||
display: flex;
|
||||
@@ -784,7 +697,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.right-left__bottom {
|
||||
.right-left__top {
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
@@ -797,8 +710,8 @@
|
||||
}
|
||||
}
|
||||
.right-middle {
|
||||
width: 522px;
|
||||
margin: 0 20px;
|
||||
width: 556px;
|
||||
margin: 0 40px;
|
||||
|
||||
.right-middle__middle {
|
||||
display: flex;
|
||||
@@ -811,24 +724,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.bottom {
|
||||
padding-top: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-right__top {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -837,11 +732,12 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 240px;
|
||||
margin-right: 14px;
|
||||
margin-right: 20px;
|
||||
|
||||
.left-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
.left-item {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user