<template>
|
<div class="container">
|
<div class="case-box">
|
<div class="title">
|
案件统计
|
<div class="timer">
|
<el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
|
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
|
</el-date-picker>
|
</div>
|
</div>
|
<div id="EventChangeEcharts" class="echarts-box"></div>
|
</div>
|
<div class="alert-box">
|
<div class="title">
|
<span style="margin-right:130px">安保活动</span>
|
<span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>
|
<span>/</span>
|
<span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
|
</div>
|
<div id="peopleList" class="echarts-box">
|
<el-table :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%"
|
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
|
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
|
:row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
|
<el-table-column prop="activityName" label="活动名称"></el-table-column>
|
<el-table-column prop="startTime" label="开始时间"></el-table-column>
|
<el-table-column prop="endTime" label="结束时间"></el-table-column>
|
<el-table-column prop="scale" label="规模"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="crowd-box">
|
<div class="title">
|
<span style="margin-right:130px">现有设备</span>
|
<span class="equiment" :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">在线设备</span>
|
<span>/</span>
|
<span class="activity" :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">离线设备</span>
|
</div>
|
<div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let equipmentmyChart
|
let eventchangemychart
|
let timer
|
|
import historyArr from '@/assets/data/activitysData/history.js'
|
import underwayArr from '@/assets/data/activitysData/underway.js'
|
import carArr from '@/assets/data/equimentsDate/car.js'
|
import phoneArr from '@/assets/data/equimentsDate/phone.js'
|
import recorderArr from '@/assets/data/equimentsDate/recorder.js'
|
|
export default {
|
data () {
|
return {
|
eventTime: '',
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近三个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}]
|
},
|
regionTotal: 0,
|
acttype: 0,
|
linetype: 0,
|
timetype: 0,
|
underwayArr: [],
|
historyArr: [],
|
policeName: '全部',
|
phoneNewArr: [],
|
carNewArr: [],
|
recorderNewArr: [],
|
}
|
},
|
|
mounted () {
|
this.initEquipmentEcharts()
|
this.initEventChangeEcharts()
|
this.clickEquimentChart()
|
this.historyArr = historyArr
|
this.underwayArr = underwayArr
|
this.$nextTick(() => {
|
window.addEventListener("resize", this.echartsResize)
|
})
|
this.equipmentEchartsCarousel()
|
},
|
methods: {
|
actTabClick (type) {
|
this.acttype = type
|
this.$refs.activityTable.bodyWrapper.scrollTop = 0
|
this.$emit('changeActivityType', type)
|
this.$emit('activityChange')
|
},
|
|
lineTabClick (type) {
|
this.linetype = type
|
equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(this.policeName)), true)
|
},
|
|
echartsResize () {
|
equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
|
eventchangemychart && eventchangemychart != null && eventchangemychart.resize()
|
},
|
|
initEquipmentEcharts () {
|
var chartDom = document.getElementById('EquipmentEcharts')
|
equipmentmyChart = this.$echarts.init(chartDom)
|
equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData('全部')))
|
},
|
|
initEquipmentOptions (dataArr) {
|
return {
|
tooltip: {
|
trigger: 'item',
|
confine: true,
|
formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>'
|
},
|
legend: {
|
left: '60%',
|
y: '25%',
|
itemGap: 20,
|
textStyle: {
|
color: '#fff'
|
},
|
formatter: function (name) {
|
let tarValue
|
for (let i = 0; i < dataArr.length; i++) {
|
if (dataArr[i].name == name) {
|
tarValue = dataArr[i].value
|
}
|
}
|
let v = tarValue
|
return `${name} ${v} 个 `
|
},
|
},
|
graphic: {
|
type: "text",
|
left: "16.5%",
|
top: "45%",
|
style: {
|
text: "设备总数",
|
textAlign: "center",
|
fill: "#fff",
|
fontSize: 20,
|
fontWeight: 700
|
}
|
},
|
title: {
|
text: `${this.regionTotal}`,
|
left: "22%",
|
top: "56%",
|
textStyle: {
|
color: "#27D9C8",
|
fontSize: 22,
|
fontWeight: 700,
|
align: "center"
|
}
|
},
|
series: [
|
{
|
name: '',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
center: ['27%', '57%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
labelLine: {
|
show: false
|
},
|
data: dataArr
|
}
|
],
|
grid: {
|
x: 10,
|
y: 10,
|
x2: 10,
|
y2: 20
|
},
|
}
|
},
|
|
equipmentEchartsCarousel () {
|
let dataLen = this.getEquimentChartData(this.policeName).length
|
let curIndex = 0
|
if (timer) {
|
clearInterval(timer)
|
}
|
timer = setInterval(() => {
|
equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
|
curIndex = (curIndex + 1) % dataLen
|
equipmentmyChart.dispatchAction({
|
type: 'highlight', seriesIndex: 0, dataIndex: curIndex
|
})
|
equipmentmyChart.dispatchAction({
|
type: "showTip",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
// position: ['5%', '5%'],
|
})
|
}, 1000)
|
equipmentmyChart.on('mouseover', function (param) {
|
clearInterval(timer)
|
equipmentmyChart.dispatchAction({
|
type: 'downplay',
|
seriesIndex: 0,
|
dataIndex: curIndex
|
})
|
equipmentmyChart.dispatchAction({
|
type: 'highlight',
|
seriesIndex: 0,
|
dataIndex: param.dataIndex
|
})
|
curIndex = param.dataIndex
|
})
|
equipmentmyChart.on('mouseout', function (param) {
|
curIndex = param.dataIndex
|
if (timer) {
|
clearInterval(timer)
|
}
|
timer = setInterval(() => {
|
equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
|
curIndex = (curIndex + 1) % dataLen
|
equipmentmyChart.dispatchAction({
|
type: 'highlight', seriesIndex: 0, dataIndex: curIndex
|
})
|
equipmentmyChart.dispatchAction({
|
type: "showTip",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
// position: ['5%', '5%'],
|
})
|
}, 1000)
|
})
|
},
|
|
initEventChangeEcharts () {
|
var chartDom = document.getElementById('EventChangeEcharts')
|
eventchangemychart = this.$echarts.init(chartDom)
|
eventchangemychart.setOption(this.initEventChangeOption([10, 9, 12, 6, 4, 14, 8]))
|
},
|
|
initEventChangeOption (seriesData) {
|
return {
|
tooltip: {
|
trigger: 'item'
|
},
|
xAxis: {
|
type: 'category',
|
data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1'],
|
axisLabel: {
|
color: "#fff"
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#fff"
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
show: false
|
},
|
axisLabel: {
|
color: "#fff"
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#fff"
|
}
|
}
|
},
|
series: [
|
{
|
data: seriesData,
|
type: 'line',
|
smooth: true
|
}
|
],
|
grid: {
|
x: 30,
|
y: 40,
|
x2: 10,
|
y2: 20
|
},
|
}
|
},
|
|
clickEquimentChart () {
|
equipmentmyChart.on('click', params => {
|
this.$emit('showequimentdetail', params.name, false, true, [false, false, false], [])
|
if (params.name == '摄像头') {
|
this.$emit('showequimentdetail', params.name, true, false, [false, false, false], [])
|
} else if (params.name == '手台') {
|
this.$emit('showequimentdetail', params.name, false, true, [false, false, true], this.phoneNewArr)
|
} else if (params.name == '车辆') {
|
this.$emit('showequimentdetail', params.name, false, true, [false, true, false], this.carNewArr)
|
} else if (params.name == '执法记录仪') {
|
this.$emit('showequimentdetail', params.name, false, true, [true, false, false], this.recorderNewArr)
|
}
|
})
|
},
|
|
selectPoliceChangeEquimentData (police) {
|
if (police != '全部') {
|
let arr1 = []
|
let arr2 = []
|
underwayArr.some(item => {
|
if (item.policeStationName == police) {
|
arr1.push(item)
|
}
|
})
|
this.underwayArr = arr1
|
historyArr.some(item => {
|
if (item.policeStationName == police) {
|
arr2.push(item)
|
}
|
})
|
this.historyArr = arr2
|
} else {
|
this.underwayArr = underwayArr
|
this.historyArr = historyArr
|
}
|
equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(police)), true)
|
this.policeName = police
|
},
|
|
selectPoliceChangeEventData (police) {
|
if (police == '全部') {
|
eventchangemychart.setOption(this.initEventChangeOption([10, 9, 12, 6, 4, 14, 8]), true)
|
} else if (police == '车站派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([6, 1, 4, 0, 1, 3, 0]), true)
|
} else if (police == '沙溪派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([1, 4, 0, 1, 0, 2, 1]), true)
|
} else if (police == '北门派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([2, 0, 3, 2, 1, 7, 1]), true)
|
} else if (police == '灵溪派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([0, 3, 2, 1, 1, 2, 4]), true)
|
} else if (police == '江光派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([1, 1, 3, 2, 1, 0, 2]), true)
|
}
|
},
|
|
getEquimentDataCount (data, policeStationName) {
|
let count = 0
|
data.some(item => {
|
if (item.policeStation == policeStationName) {
|
count = Number(count) + 1
|
}
|
})
|
return count
|
},
|
|
getEquimentChartData (policeStationName) {
|
let dataArr = []
|
let phoneCount = 0
|
let carCount = 0
|
let recorderCount = 0
|
let monitor = 0
|
this.phoneNewArr = []
|
this.carNewArr = []
|
this.recorderNewArr = []
|
if (this.linetype == 0) {
|
phoneArr.forEach(item => {
|
if (item.state == '在线') {
|
this.phoneNewArr.push(item)
|
}
|
})
|
carArr.forEach(item => {
|
if (item.state == '在线') {
|
this.carNewArr.push(item)
|
}
|
})
|
recorderArr.forEach(item => {
|
if (item.state == '在线') {
|
this.recorderNewArr.push(item)
|
}
|
})
|
} else {
|
phoneArr.forEach(item => {
|
if (item.state == '离线') {
|
this.phoneNewArr.push(item)
|
}
|
})
|
carArr.forEach(item => {
|
if (item.state == '离线') {
|
this.carNewArr.push(item)
|
}
|
})
|
recorderArr.forEach(item => {
|
if (item.state == '离线') {
|
this.recorderNewArr.push(item)
|
}
|
})
|
}
|
if (policeStationName == '全部') {
|
phoneCount = this.phoneNewArr.length
|
carCount = this.carNewArr.length
|
recorderCount = this.recorderNewArr.length
|
monitor = 10
|
} else {
|
phoneCount = this.getEquimentDataCount(this.phoneNewArr, policeStationName)
|
carCount = this.getEquimentDataCount(this.carNewArr, policeStationName)
|
recorderCount = this.getEquimentDataCount(this.recorderNewArr, policeStationName)
|
monitor = 10
|
}
|
dataArr = [
|
{ value: carCount, name: '车辆' },
|
{ value: monitor, name: '摄像头' },
|
{ value: recorderCount, name: '执法记录仪' },
|
{ value: phoneCount, name: '手台' },
|
]
|
this.regionTotal = phoneCount + monitor + carCount + recorderCount
|
return dataArr
|
},
|
|
activityRowClick (row) {
|
this.$EventBus.$emit('toPosition', {
|
layerName: 'activityLayers',
|
siteJd: Number(row.position[0]),
|
siteWd: Number(row.position[1])
|
})
|
},
|
},
|
|
destroyed () {
|
window.removeEventListener("resize", this.echartsResize)
|
|
if (equipmentmyChart) {
|
equipmentmyChart.dispose()
|
equipmentmyChart = null
|
}
|
|
if (eventchangemychart) {
|
eventchangemychart.dispose()
|
eventchangemychart = null
|
}
|
clearInterval(timer)
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
.case-box {
|
height: 30%;
|
}
|
|
.alert-box,
|
.crowd-box {
|
height: 35%;
|
|
.echarts-box {
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
}
|
|
.case-box,
|
.alert-box,
|
.crowd-box {
|
display: flex;
|
flex-direction: column;
|
|
.title::after {
|
content: '';
|
position: absolute;
|
top: 15px;
|
left: 0;
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
background: #43bafe;
|
box-shadow: 0px 0px 8px 2px #43bafe;
|
margin-left: 8px;
|
}
|
|
.title {
|
padding: 0 18px 0 25px;
|
position: relative;
|
text-align: left;
|
height: 40px;
|
line-height: 40px;
|
font-size: 20px;
|
background-image: linear-gradient(to right, #2e4aba, #010d3e);
|
|
.timer {
|
width: 250px;
|
height: 30px;
|
float: right;
|
}
|
|
.regionTotal {
|
color: #fff;
|
font-size: 22px;
|
font-weight: 700;
|
margin-left: 50%;
|
letter-spacing: 1px;
|
}
|
|
.activity,
|
.equiment {
|
font-size: 16px;
|
color: rgb(98, 95, 95);
|
cursor: pointer;
|
}
|
|
.choosed {
|
color: #fff;
|
}
|
}
|
|
.sub-title {
|
display: flex;
|
justify-content: space-between;
|
height: 36px;
|
}
|
|
.sub-tab {
|
padding: 10px;
|
display: flex;
|
|
.tab {
|
margin: 0 10px;
|
flex: 1;
|
background: rgba(29, 38, 105, 1);
|
border: 1px solid rgba(20, 50, 123, 1);
|
cursor: pointer;
|
|
&>div {
|
height: 26px;
|
line-height: 26px;
|
}
|
}
|
|
.tab.on {
|
border: 1px solid rgb(3, 108, 255);
|
}
|
}
|
|
.echarts-box {
|
padding: 10px;
|
flex: 1;
|
}
|
|
#peopleList {
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
