黔西南大屏
This commit is contained in:
yanran200730
@@ -82,7 +82,7 @@
|
||||
<h2>单位成员关系人数</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 210px; width: 100%;"
|
||||
style="height: 220px; width: 100%;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="barChart8">
|
||||
@@ -93,7 +93,7 @@
|
||||
<h2>群人数规模分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 160px; width: 100%;"
|
||||
style="height: 180px; width: 100%; margin-top: 20px;"
|
||||
:ref="'chart2'"
|
||||
:data="lineData1"
|
||||
:ops="pieChart">
|
||||
@@ -114,7 +114,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<DvMap style="width: 100%; height: 420px;"></DvMap>
|
||||
<DvMap style="width: 100%; height: 356px;"></DvMap>
|
||||
</div>
|
||||
<div class="right-middle__middle">
|
||||
<div class="wrapper">
|
||||
@@ -135,7 +135,7 @@
|
||||
<h2>近期成员使用分布</h2>
|
||||
</div>
|
||||
<ai-echart-v2
|
||||
style="height: 210px; width: 100%;"
|
||||
style="height: 220px; width: 100%;"
|
||||
:ref="'chart'"
|
||||
:data="lineData"
|
||||
:ops="lineChart1">
|
||||
@@ -144,7 +144,7 @@
|
||||
</AiDvPanel>
|
||||
</div>
|
||||
<div class="right-right">
|
||||
<AiDvPanel style="width: 100%" 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>
|
||||
@@ -180,29 +180,19 @@
|
||||
</ai-echart-v2>
|
||||
</div>
|
||||
</AiDvPanel>
|
||||
<AiDvPanel style="width: 100%; height: 340px;" border="border6" title="群动态多维度排行">
|
||||
<AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
|
||||
<AiDvTable
|
||||
:heigth="'100%'"
|
||||
stripe
|
||||
:isShowIndex="true"
|
||||
:config="[{
|
||||
width: '',
|
||||
color: '',
|
||||
align: ''
|
||||
},
|
||||
{
|
||||
width: '',
|
||||
color: '',
|
||||
align: ''
|
||||
},
|
||||
{
|
||||
width: '',
|
||||
color: '',
|
||||
align: ''
|
||||
}]"
|
||||
:data="[{name: '列1', v: 23, v2: 3},
|
||||
{name: '列2', v: 12, v2: 4},
|
||||
{name: '列2', v: 12, v2: 4}]">
|
||||
stripe="1"
|
||||
:headerStyle="{
|
||||
color: '#02FEFF',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
backgroundColor: 'rgba(33, 180, 253, 0.1)'
|
||||
}"
|
||||
isShowIndex="1"
|
||||
:config="tableConfig"
|
||||
:data="tableData">
|
||||
</AiDvTable>
|
||||
</AiDvPanel>
|
||||
</div>
|
||||
@@ -265,12 +255,114 @@
|
||||
"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 },
|
||||
grid: {
|
||||
left: 50,
|
||||
right: '2%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||||
@@ -351,12 +443,16 @@
|
||||
}
|
||||
},
|
||||
barChart: {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||||
},
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
minInterval: 1,
|
||||
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
|
||||
axisLabel: { color: '#C3C4C4' },
|
||||
axisPointer: { show: false }
|
||||
axisPointer: { show: false },
|
||||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
@@ -435,13 +531,14 @@
|
||||
right: '6%',
|
||||
bottom: '6%'
|
||||
},
|
||||
color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '66%'],
|
||||
labelLine:{
|
||||
normal:{
|
||||
length: 0.01,
|
||||
length: 2,
|
||||
lineStyle: {
|
||||
color: '#526D7A'
|
||||
}
|
||||
@@ -472,6 +569,20 @@
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableConfig () {
|
||||
return this.tableData.map((v, index) => {
|
||||
return {
|
||||
color: '#d0e1e8',
|
||||
textAlign: '',
|
||||
width: index === 0 ? '100' : '',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
Hex2RGBA(color, alpha = 1) {
|
||||
let hex = 0;
|
||||
@@ -697,8 +808,15 @@
|
||||
}
|
||||
|
||||
.right-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.bottom {
|
||||
padding-top: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-right__top {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
|
||||
Reference in New Issue
Block a user