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