799 lines
20 KiB
Vue
799 lines
20 KiB
Vue
<template>
|
||
<div class="AppQxnDv">
|
||
<div class="left">
|
||
<AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
|
||
</AiDvPanel>
|
||
<div class="left-list">
|
||
<div class="left-item" v-for="(item, index) in 16" :key="index">
|
||
<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>
|
||
</el-select>
|
||
</div>
|
||
<div class="left-item__bottom">
|
||
<span>居民数量：17246</span>
|
||
<span>成员：2057</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="right-left">
|
||
<AiDvPanel style="width: 100%" border="border6" title="警格事件概況">
|
||
<div class="right-left__total AppQxnDv-total">
|
||
<div class="item" 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-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>
|
||
</div>
|
||
<div class="right-left__middle">
|
||
<div class="left">
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>事件受理率</h2>
|
||
</div>
|
||
<DoughnutChart :ratio="60"></DoughnutChart>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>事件办结率</h2>
|
||
</div>
|
||
<DoughnutChart :ratio="95"></DoughnutChart>
|
||
</div>
|
||
</div>
|
||
<div class="right wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>最新办理动态</h2>
|
||
<el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
|
||
<el-option label="XXX派出所" value="1"></el-option>
|
||
<el-option label="XXX派出所" value="2"></el-option>
|
||
<el-option label="XXX派出所" value="3"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<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="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>
|
||
<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">
|
||
<h2>分局数量</h2>
|
||
<div class="item-bottom">
|
||
<span>726,079</span>
|
||
<i>人</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrapper">
|
||
<DvMap style="width: 100%; height: 356px;"></DvMap>
|
||
</div>
|
||
<div class="right-middle__bottom">
|
||
<div class="AppQxnDv-title">
|
||
<h2>近期成员使用分布</h2>
|
||
</div>
|
||
<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 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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import DvMap from './components/DvMap'
|
||
import DoughnutChart from './components/DoughnutChart'
|
||
export default {
|
||
name: 'AppQxnEventDv',
|
||
label: '事件上报',
|
||
|
||
components: {
|
||
DvMap,
|
||
DoughnutChart
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
value: '',
|
||
lineData1: [
|
||
{
|
||
"name": "1月",
|
||
"v1": 23
|
||
},
|
||
{
|
||
"name": "2月",
|
||
"v1": 12
|
||
},
|
||
{
|
||
"name": "3月",
|
||
"v1": 67
|
||
},
|
||
{
|
||
"name": "4月",
|
||
"v1": 98
|
||
}
|
||
],
|
||
tableData: [
|
||
{
|
||
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'
|
||
}
|
||
],
|
||
lineChart1: {
|
||
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' }
|
||
},
|
||
color: ['#7AA3CC', '#33CCCC'],
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {show: false},
|
||
axisLine: {show: false},
|
||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||
},
|
||
yAxis: {
|
||
nameGap: 23,
|
||
minInterval: 1,
|
||
splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||
axisPointer: { snap: true }
|
||
},
|
||
daemon: (color) => ({
|
||
showSymbol: false,
|
||
smooth: true,
|
||
lineStyle: {
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 2,
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: this.Hex2RGBA(color, 0.3) },
|
||
{ offset: 1, color: this.Hex2RGBA(color, 0.1) }
|
||
]
|
||
}
|
||
}
|
||
})
|
||
},
|
||
bbTableData: [
|
||
{
|
||
name: '时间',
|
||
v: '04/18',
|
||
v1: '04/18',
|
||
v2: '04/18',
|
||
v3: '04/18',
|
||
v4: '04/18',
|
||
v5: '04/18'
|
||
},
|
||
{
|
||
name: '姓名',
|
||
v: '宗梦瑞',
|
||
v1: '宗梦瑞',
|
||
v2: '宗梦瑞',
|
||
v3: '宗梦瑞',
|
||
v4: '宗梦瑞',
|
||
v5: '宗梦瑞'
|
||
},
|
||
{
|
||
name: '事件名称',
|
||
v: '户籍办理',
|
||
v1: '户籍办理',
|
||
v2: '户籍办理',
|
||
v3: '户籍办理',
|
||
v4: '户籍办理',
|
||
v5: '户籍办理'
|
||
}
|
||
],
|
||
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",
|
||
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,
|
||
minInterval: 1,
|
||
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
|
||
axisPointer: { show: false },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
triggerTooltip: false,
|
||
shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
|
||
},
|
||
color: [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(51, 204, 204, 1)' },
|
||
{ offset: 1, color: 'rgba(31, 89, 89, 0.25)' }
|
||
]
|
||
},
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ 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)' }
|
||
]
|
||
}
|
||
],
|
||
daemon: {
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barCategoryGap: 40,
|
||
itemStyle: {}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
tableConfig () {
|
||
return this.tableData.map((v, index) => {
|
||
return {
|
||
color: '#d0e1e8',
|
||
align: '',
|
||
width: index === 0 ? '100' : '',
|
||
fontSize: '14px',
|
||
flex: ''
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
Hex2RGBA(color, alpha = 1) {
|
||
let hex = 0;
|
||
if (color.charAt(0) == "#") {
|
||
if (color.length == 4) {
|
||
//检测诸如#FFF简写格式
|
||
color = "#" + color.charAt(1).repeat(2) +
|
||
color.charAt(2).repeat(2) +
|
||
color.charAt(3).repeat(2);
|
||
}
|
||
hex = parseInt(color.slice(1), 16);
|
||
}
|
||
let r = hex >> 16 & 0xFF;
|
||
let g = hex >> 8 & 0xFF;
|
||
let b = hex & 0xFF;
|
||
return `rgba(${r},${g},${b},${alpha})`;
|
||
},
|
||
RGBtoHex(r, g, b) {
|
||
let hex = r << 16 | g << 8 | b;
|
||
return "#" + hex.toString(16);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppQxnDv {
|
||
display: flex;
|
||
height: 100%;
|
||
padding-top: 16px;
|
||
box-sizing: border-box;
|
||
background: #0c0c0c;
|
||
overflow: hidden;
|
||
|
||
.wrapper {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.AppQxnDv-title {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
color: rgba(172, 201, 230, 0.8);
|
||
background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);
|
||
|
||
h2 {
|
||
position: relative;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
padding: 0 10px;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 27px;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: rgba(41, 77, 102, 1);
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: #5299CC;
|
||
content: ' ';
|
||
}
|
||
|
||
&::before {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 14px;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: rgba(41, 77, 102, 1);
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
.AppQxnDv-total {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
|
||
h2 {
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.item-bottom {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
span {
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
color: #02FEFF;
|
||
}
|
||
|
||
i {
|
||
margin-left: 4px;
|
||
font-style: normal;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-select) {
|
||
height: 24px;
|
||
line-height: 24px;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 0 26px 0 6px;
|
||
font-size: 12px;
|
||
color: rgba(179, 229, 229, 1);
|
||
border: 1px solid #2A7A92;
|
||
border-radius: 2px;
|
||
background: transparent;
|
||
|
||
&::placeholder {
|
||
color: rgba(179, 229, 229, 0.6);
|
||
}
|
||
}
|
||
|
||
.el-input__suffix {
|
||
right: 1px;
|
||
top: 0px;
|
||
}
|
||
|
||
i {
|
||
color: #B3E5E5;
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 14px;
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
min-height: 20px;
|
||
background-clip: content-box;
|
||
box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
& > .right {
|
||
display: flex;
|
||
flex: 1;
|
||
|
||
.right-left {
|
||
width: 530px;
|
||
|
||
.right-left__middle {
|
||
display: flex;
|
||
|
||
.left {
|
||
width: 245px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.right-left__top {
|
||
display: flex;
|
||
|
||
div {
|
||
flex: 1;
|
||
|
||
&:first-child {
|
||
margin-right: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right-middle {
|
||
width: 556px;
|
||
margin: 0 40px;
|
||
|
||
.right-middle__middle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
|
||
.right-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
& > .left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 240px;
|
||
margin-right: 20px;
|
||
|
||
.left-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
|
||
.left-item {
|
||
position: relative;
|
||
width: 100%;
|
||
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%);
|
||
border-radius: 6px;
|
||
|
||
i {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 22px;
|
||
height: 21px;
|
||
line-height: 21px;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
|
||
border-radius: 6px 0 6px 0;
|
||
}
|
||
|
||
.left-item__bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.left-item__top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
.el-select {
|
||
width: 100px;
|
||
}
|
||
|
||
h2 {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|