<template>
<panel-container>
<modular-layout type="roundCorner">
<panel-title-1>智慧公共安全</panel-title-1>
<div class="Modular_main">
<div>
<vue-scroll>
<div class="row">
<div class="col-60">
<TitleThree title="警力" />
<div class="Modular_left Modular_right">
<div class="module-corner" style="padding-right:.08rem;">
<Legend :list="[['占比', '#bd273c '], ['在职人员', '#0197ff']]" />
<div style="overflow:hidden;">
<div class="col-50" v-for="(value,index) in basic_info_bar" :key="index" style="padding-right: .1rem;">
<ProgressBar :data="value" />
</div>
</div>
<Corner2 />
</div>
</div>
</div>
<div class="col-40">
<TitleThree title="监控点分布" />
<div class="">
<div id="echart-monitorPosition-box">
<EchartLine
:id="monitor_position.id"
:width="monitor_position.width"
:height="monitor_position.height"
:unit="monitor_position.unit"
:xAxisData="monitor_position.xAxisData"
:yAxisData="monitor_position.yAxisData"
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-66">
<TitleThree title="案件分布" />
<div style="width: 100%;overflow: hidden;">
<div class="col-50">
<div class="Modular_left">
<DataListCols :data="caseDistribution" :title="['类别','数量','占比']" >
<Corner2 slot="corner" />
</DataListCols>
</div>
</div>
<div class="col-50">
<div class="Modular_left module-corner" id="echart-caseDistribution-box">
<EchartPieAnnular
:id="case_distribution.id"
:width="case_distribution.width"
:height="case_distribution.height"
:legend="case_distribution.legend"
:seriesData="case_distribution.seriesData"
/>
<Corner />
</div>
</div>
</div>
</div>
<div class="col-34">
<TitleThree title="视频设备" />
<div id="video_machine_box" class="Modular_right">
<EchartBar1Color
:id="video_machine.id"
:width="video_machine.width"
:height="video_machine.height"
:xAxisData="video_machine.xAxisData"
:seriesData="video_machine.seriesData"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-34">
<TitleThree title="智能设备" />
<div class="Modular_left">
<div class="module-corner" style="padding-right:.08rem;">
<div>
<LitterTitle :title="'故障分布'" />
<Legend :list="[['占比', '#bd273c '], ['故障次数', '#0197ff']]" />
<div style="overflow:hidden;padding-right:.1rem;min-height:.73rem;">
<div v-for="(value,index) in intelligence_equipment_bar" :key="index">
<ProgressBar :data="value" />
</div>
</div>
</div>
<Corner2 />
</div>
</div>
</div>
<div class="col-66">
<TitleThree title="案件分析" />
<div class="Modular_left Modular_right">
<EchartLineLitter />
</div>
</div>
</div>
</vue-scroll>
</div>
</div>
</modular-layout>
</panel-container>
</template>
<script>
import Corner2 from '@/components/Corner2'
import Corner from '@/components/Corner'
import DataListCols from '@/components/board/DataListCols'
import EchartBar1Color from '@/components/echart/EchartBar1Color'
import EchartLineLitter from './components/EchartLineLitter'
import EchartPieAnnular from '@/components/echart/EchartPieAnnular'
import EchartLine from '@/components/echart/EchartLine'
import Legend from '@/components/echart/Legend'
import ProgressBar from './components/ProgressBar'
import LitterTitle from '@/components/title/LitterTitle'
export default {
components: {
Corner2,
Corner,
DataListCols,
EchartBar1Color,
EchartLineLitter,
EchartPieAnnular,
EchartLine,
Legend,
ProgressBar,
LitterTitle
},
data () {
return {
// 警力
basic_info_bar: [
{title: '协同办公', num1: 50, num2: 100, percentage: 50},
{title: '协同办公', num1: 50, num2: 100, percentage: 50},
{title: '协同办公', num1: 50, num2: 100, percentage: 50},
{title: '协同办公', num1: 50, num2: 100, percentage: 50}
],
// 案件分布
caseDistribution: [
{ name: '刑事案件', num1: '100', num2: '50%', unit: '（个)' },
{ name: '民事纠纷', num1: '100', num2: '50%', unit: '（个)' },
{ name: '聚众群体', num1: '100', num2: '50%', unit: '（个)' },
{ name: '刑事案件', num1: '100', num2: '50%', unit: '（个)' }
],
// 案件分布饼图
case_distribution: {
id: 'echart-caseDistribution1',
width: 0,
height: 0,
seriesData: [
{value: 34, name: '申报立案'},
{value: 34, name: '处理中'},
{value: 34, name: '已结案'}
]
},
// 视频设备
video_machine: {
id: 'video_machine_id',
width: 0,
height: 0,
xAxisData: ['潭东镇', '潭口镇', '康洋镇', '京港镇'],
seriesData: [10, 52, 200, 334, 390, 111, 222]
},
// 智能设备
intelligence_equipment_bar: [
{title: '协同办公', num1: 50, num2: 100, percentage: 50},
{title: '协同办公', num1: 50, num2: 100, percentage: 50},
{title: '协同办公', num1: 50, num2: 100, percentage: 50}
],
// 监控点分布
monitor_position: {
id: 'echart-monitorPosition',
width: 0,
height: 0,
unit: '个',
xAxisData: ['9.24', '9.24', '9.24', '9.24', '9.24', '9.24', '9.24'],
yAxisData: [
{name: '计划建设点位', data: [240, 240, 240, 240, 240, 240, 240], color: '255,248,98'},
{name: '已建设点位', data: [5, 10, 20, 30, 34, 38, 39], color: '95,193,0'},
{name: '未建设点位', data: [235, 220, 210, 180, 164, 158, 121], color: '216,46,215'}
]
}
}
},
mounted () {
// 警力
this.getBasicInfo()
// 监控点分布
this.callEchart('echart-monitorPosition-box', this.monitor_position, 2.2)
this.getMonitorPosition()
// 案件分布
this.callEchart('echart-caseDistribution-box', this.case_distribution, 1.2)
this.getCaseDistribution()
// 视频设备
this.callEchart('video_machine_box', this.video_machine, 1.12)
this.getVideoMachine()
// 智能设备
this.getIntelligenceEquipment()
},
methods: {
// 警力
getBasicInfo () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1094'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code === 200) {
let data = res.data
let total = 0
for (let i = 0; i < data.length; i++) {
total += Number(data[i].JLSL)
};
let arr = []
res.data.forEach((item, index) => {
arr.push({title: item.QY, num1: (Number(item.JLSL) / total).toFixed(2) * 100 + '%', num2: item.JLSL, percentage: (Number(item.JLSL) / total).toFixed(2) * 100})
})
this.basic_info_bar = arr
}
})
},
// 监控点分布
getMonitorPosition () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1093'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let xAxisData = []
let JHDW = [] // 计划建设点位
let YJSDW = [] // 已建设点位
let WJSDW = [] // 未建设点位
res.data.forEach(item => {
xAxisData.push(item.QY)
JHDW.push(item.JHDW)
YJSDW.push(item.YJSDW)
WJSDW.push(item.WJSDW)
})
this.monitor_position.xAxisData = xAxisData
this.monitor_position.yAxisData[0].data = JHDW
this.monitor_position.yAxisData[1].data = YJSDW
this.monitor_position.yAxisData[2].data = WJSDW
setTimeout(() => {
this.callEchart('echart-monitorPosition-box', this.monitor_position, 2.2)
}, 500)
}
})
},
// 案件分布
getCaseDistribution () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1090'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
// 表格
let arr = []
let seriesData = []
res.data.forEach((item, index) => {
if (index < 6) { arr.push({ name: item.LX, num1: item.SL, num2: (Number(item.ZB) * 100).toFixed(1) + '%'}) }
seriesData.push({value: (Number(item.ZB) * 100).toFixed(1), name: item.LX})
})
this.caseDistribution = arr
// 饼图
this.case_distribution.seriesData = seriesData
this.callEchart('echart-caseDistribution-box', this.case_distribution, 1.2)
}
})
},
// 视频设备
getVideoMachine () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1095'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let xAxisData = []
let seriesData = []
res.data.forEach(item => {
xAxisData.push(item.QY)
seriesData.push(item.SBSL)
})
this.video_machine.xAxisData = xAxisData
this.video_machine.seriesData = seriesData
this.callEchart('video_machine_box', this.video_machine, 1.12)
}
})
},
// 智能设备
getIntelligenceEquipment () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1089'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let data = res.data
let arr = []
res.data.forEach((item, index) => {
arr.push({title: item.QY, num1: Number(item.ZB) * 100 + '%', num2: item.GZCS, percentage: Number(item.ZB) * 100})
})
this.intelligence_equipment_bar = arr
}
})
},
callEchart (idBox, data, offset) {
const _width = document.getElementById(idBox).clientWidth
this.$set(data, 'width', _width)
this.$set(data, 'height', _width / offset)
}
}
}
</script>
<style scoped>
.panel-container{
width: 100%;
height: 100%;
overflow: auto;
}
/* 盒子 */
.row{
width: 100%;
overflow: hidden;
margin: 0.07rem 0;
}
.row-flex{
display:flex;
justify-content:space-between;
}
.col-50{
width: 50%;
float: left;
}
.col-60{
width: 60%;
float: left;
}
.col-40{
width: 40%;
float: left;
}
.col-66{
width: 66%;
float: left;
}
.col-34{
width: 34%;
float: left;
}
.col-33{
width: 33%;
float: left;
}
</style>
<style>
.page-zhggaq .dataListBox li{
padding: .06rem .08rem !important;
}
</style>
