<template>
|
<div class="container" ref="Container">
|
<div class="case-box" ref="caseBox">
|
<div class="box">
|
<div class="title" ref="alertBoxTitle">
|
<div>值班信息(当日)</div>
|
</div>
|
|
<div class="duty-information-box" v-show="!showMJL">
|
<div v-for="item in schedulingList" :key="item.id">
|
<div>
|
<span>{{ item.type }}</span>
|
</div>
|
<div>
|
<span>{{ item.person }}</span>
|
</div>
|
</div>
|
<div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
|
</div>
|
|
<div class="duty-information-box" v-show="showMJL">
|
<div>
|
<div>
|
<span>值班</span>
|
</div>
|
<div>
|
<span>徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬</span>
|
</div>
|
</div>
|
<div>
|
<div>
|
<span>副班、巡逻</span>
|
</div>
|
<div>
|
<span>章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥</span>
|
</div>
|
</div>
|
<div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
|
</div>
|
</div>
|
|
<svg class="border-svg">
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite" />
|
</use>
|
</svg>
|
</div>
|
|
<div class="alert-box" ref="alertBox ">
|
<div class="box">
|
<div class="title">
|
警情统计
|
<div class="timer">
|
<el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right" unlink-panels
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="caseTimeChange"
|
:picker-options="pickerOptions"></el-date-picker>
|
</div>
|
</div>
|
<el-main v-loading="eventChangeEchartsLoading" element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
|
<div class="sub-tab">
|
<div class="tab" :class="{ 'select-on-tab': caseInfoType == 0 }" @click="initEventChangeEcharts(0)">
|
<div class="tab-title-small">警情变化趋势</div>
|
</div>
|
<div class="tab" :class="{ 'select-on-tab': caseInfoType == 1 }" @click="initEventChangeEcharts(1)">
|
<div class="tab-title-small">社区警情排行</div>
|
</div>
|
<div class="tab" :class="{ 'select-on-tab': caseInfoType == 2 }" @click="initEventChangeEcharts(2)">
|
<div class="tab-title-small">辖区警情排行</div>
|
</div>
|
</div>
|
<div id="EventChangeEcharts" class="echarts-box"></div>
|
</el-main>
|
</div>
|
|
<svg class="border-svg">
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite" />
|
</use>
|
</svg>
|
</div>
|
|
<!-- <div class="alert-box" ref="alertBox">
|
<div class="title" ref="alertBoxTitle">
|
<div>电子沙盘</div>
|
<div class="title-tab">
|
<span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
|
<span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
|
</div>
|
</div>
|
<div id="peopleList" class="echarts-box">
|
<el-table
|
size="small"
|
:height="tableHeight"
|
: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" ref="crowdBox">
|
<div class="box">
|
<div class="title">现有设备</div>
|
<el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
|
<div class="sub-tab">
|
<div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)">
|
<div class="tab-title-small">设备种类</div>
|
</div>
|
<div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)">
|
<div class="tab-title-small">设备状态</div>
|
</div>
|
</div>
|
<div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
|
</el-main>
|
</div>
|
|
<svg class="border-svg">
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite" />
|
</use>
|
</svg>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
const oneColor = ["#4caf50", "#2979ff", "#ffd600", "#0d47a1", "#b71c1c"]
|
const twoColor = [
|
"#5470FE",
|
"#91cc75",
|
"#fac858",
|
"#ee6666",
|
"#73c0de",
|
"#3ba272",
|
"#fc8452",
|
"#9a60b4",
|
"#ea7ccc",
|
]
|
|
let rightTiming = null
|
let equipmentmyChart = null
|
let eventchangemychart = null
|
let timer
|
let equimentDataLength = 0
|
|
import recorderArr from "@/assets/data/equimentsDate/recorder.js"
|
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
|
import { fontSize } from "@/utils/fontSize.js"
|
|
import { getCaseAll, getCaseRanking, getCaseRankingArea, getEquipment } from "@/api/home/index.js"
|
|
const timeEvents = []
|
|
export default {
|
inject: ["userInfo"],
|
data () {
|
return {
|
eventTime: [],
|
equipmentEchartsLoading: false,
|
eventChangeEchartsLoading: false,
|
schedulingNoDataText: ' ',
|
schedulingLoading: false,
|
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 * 14)
|
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,
|
linetype: 0,
|
tableHeight: 0,
|
schedulingList: [],
|
schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
|
policeStaionID: "",
|
showMJL: false,
|
originTitle: ['值班', '副班、巡逻'],
|
transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
|
caseInfoType: 0
|
}
|
},
|
|
created () {
|
this.pickerOptions = {
|
...this.pickerOptions,
|
disabledDate (time) {
|
// 设置可选择的日期为今天之后的一个月内
|
let curDate = new Date().getTime()
|
return time.getTime() > curDate
|
},
|
}
|
|
this.defaultDate()
|
|
this.getSchedulingList()
|
|
this.getSchedulingDeptList()
|
},
|
|
mounted () {
|
this.getHomeAllData()
|
|
this.$nextTick(() => {
|
window.addEventListener("resize", this.echartsResize)
|
this.tableHeight =
|
this.$refs.Container.offsetHeight -
|
this.$refs.caseBox.offsetHeight -
|
this.$refs.crowdBox.offsetHeight -
|
this.$refs.alertBoxTitle.offsetHeight -
|
55
|
})
|
},
|
|
methods: {
|
//获取值班列表信息
|
getSchedlingList (item) {
|
this.$emit("showschedulingdetail", item.dept, item.dept, "type")
|
},
|
|
//获取值班单位信息
|
getSchedulingDeptList () {
|
getSchedulingDeptList().then((res) => {
|
this.schedulingDeptList = res.data.data
|
})
|
},
|
|
// actTabClick (type) {
|
// this.acttype = type
|
// this.$refs.activityTable.bodyWrapper.scrollTop = 0
|
// this.$emit('changeActivityType', type)
|
// this.$emit('activityChange')
|
// },
|
|
/**
|
* @description: 获取当前组件内所有数据
|
* @return {*}
|
*/
|
getHomeAllData (id = "") {
|
this.policeStaionID = id
|
|
this.initEventChangeEcharts(this.caseInfoType)
|
|
this.initEquipmentEcharts(this.linetype)
|
|
if (rightTiming != null) {
|
clearInterval(rightTiming)
|
rightTiming = null
|
}
|
|
rightTiming = setInterval(async () => {
|
this.initEventChangeEcharts(this.caseInfoType)
|
this.initEquipmentEcharts(this.linetype)
|
}, 600000)
|
},
|
|
getSchedulingList () {
|
this.schedulingLoading = true
|
if (this.userInfo.dept_id == "1596020515064381442") {
|
this.schedulingNoDataText = ' '
|
const data = [
|
{
|
person:
|
"徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬",
|
patrol: "章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥",
|
}
|
]
|
|
const matrixData = data.map((row) => {
|
let arr = []
|
for (let key in row) {
|
arr.push(row[key])
|
}
|
return arr
|
})
|
setTimeout(() => {
|
this.schedulingList = matrixData[0].map((col, i) => {
|
return [this.originTitle[i], ...matrixData.map((row) => {
|
return row[i]
|
})]
|
})
|
this.schedulingLoading = false
|
}, 1000)
|
|
this.$nextTick(() => {
|
this.tableHeight =
|
this.$refs.Container.offsetHeight -
|
this.$refs.caseBox.offsetHeight -
|
this.$refs.crowdBox.offsetHeight -
|
this.$refs.alertBoxTitle.offsetHeight
|
})
|
|
this.showMJL = true
|
} else {
|
const params = {
|
sameday: 1,
|
isPage: 1
|
}
|
|
this.showMJL = false
|
getSchedulingList(params).then((res) => {
|
this.schedulingList = res.data.data
|
})
|
|
setTimeout(() => {
|
this.schedulingNoDataText = ' '
|
this.schedulingLoading = false
|
if (!this.schedulingList.length) {
|
setTimeout(() => {
|
this.schedulingNoDataText = '暂无值班数据'
|
}, 200)
|
}
|
}, 500)
|
}
|
},
|
|
echartsResize () {
|
equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
|
eventchangemychart &&
|
eventchangemychart != null &&
|
eventchangemychart.resize()
|
},
|
|
// 警情统计中时间变化
|
async caseTimeChange (e) {
|
const date = e.map((item) => {
|
return this.dateFormat(item)
|
})
|
|
eventchangemychart.clear()
|
|
if (this.caseInfoType == 0) {
|
this.getCaseAll(date[0], date[1])
|
} else if (this.caseInfoType == 1) {
|
this.getCaseRanking(date[0], date[1])
|
} else {
|
this.getCaseRankingArea(date[0], date[1])
|
}
|
},
|
|
// 设置默认时间
|
defaultDate () {
|
var current = new Date()
|
|
var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
|
|
this.eventTime = [seven, current] //将值设置给插件绑定的数据
|
},
|
|
// 获取当前日期
|
dateFormat (dateData) {
|
var date = new Date(dateData)
|
var y = date.getFullYear()
|
var m = date.getMonth() + 1
|
m = m < 10 ? "0" + m : m
|
var d = date.getDate()
|
d = d < 10 ? "0" + d : d
|
const time = y + "-" + m + "-" + d
|
return time
|
},
|
|
// 获取警情统计值
|
getCaseAll (start, end) {
|
getCaseAll(
|
start,
|
end,
|
this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
|
).then((res) => {
|
let obj = {}
|
if (res.data.timeList) {
|
console.log(res.data, 1111)
|
let yDataList = {}
|
yDataList.dqList = res.data.dqList.reduce(
|
(previous, current) => {
|
previous.push(current.count)
|
return previous
|
},
|
[]
|
)
|
yDataList.zpList = res.data.zpList.reduce(
|
(previous, current) => {
|
previous.push(current.count)
|
return previous
|
},
|
[]
|
)
|
yDataList.jfList = res.data.jfList.reduce(
|
(previous, current) => {
|
previous.push(current.count)
|
return previous
|
},
|
[]
|
)
|
yDataList.qtList = res.data.qtList.reduce(
|
(previous, current) => {
|
previous.push(current.count)
|
return previous
|
},
|
[]
|
)
|
yDataList.qjList = res.data.qjList.reduce(
|
(previous, current) => {
|
previous.push(current.count)
|
return previous
|
},
|
[]
|
)
|
yDataList.sdList = res.data.sdList.reduce(
|
(previous, current) => {
|
previous.push(current.count)
|
return previous
|
},
|
[]
|
)
|
yDataList.sduList = res.data.sduList.reduce(
|
(previous, current) => {
|
previous.push(current.count)
|
return previous
|
},
|
[]
|
)
|
yDataList.shList = res.data.shList.reduce(
|
(previous, current) => {
|
previous.push(current.count)
|
return previous
|
},
|
[]
|
)
|
let xData = res.data.timeList.map(item => item.slice(5, 10))
|
obj = { xData, yDataList }
|
} else {
|
obj = { xData: [], yDataList: {} }
|
}
|
|
eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))
|
|
setTimeout(() => {
|
this.eventChangeEchartsLoading = false
|
}, 500)
|
})
|
},
|
|
// 获取警情社区排行统计值
|
getCaseRanking (start, end) {
|
getCaseRanking(
|
start,
|
end,
|
this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
|
).then((res) => {
|
let data = []
|
|
if (res.data.data) {
|
res.data.data = res.data.data.sort((a, b) => b.value - a.value)
|
res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => {
|
item.value = item.count
|
|
if (index == 0) {
|
item.itemStyle = {
|
color: '#EB3C5A'
|
}
|
} else if (index == 1) {
|
item.itemStyle = {
|
color: '#FA8331'
|
}
|
} else if (index == 2) {
|
item.itemStyle = {
|
color: '#F7B833'
|
}
|
} else {
|
item.itemStyle = {
|
color: '#395FFD'
|
}
|
}
|
|
return item
|
}).sort((a, b) => b.value - a.value)
|
|
data = res.data.data
|
} else {
|
data = []
|
}
|
|
eventchangemychart.setOption(this.initRankingOption(data))
|
|
setTimeout(() => {
|
this.eventChangeEchartsLoading = false
|
}, 500)
|
})
|
},
|
|
// 获取警情辖区排行统计值
|
getCaseRankingArea (start, end) {
|
getCaseRankingArea(
|
start,
|
end,
|
this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
|
).then((res) => {
|
let data = []
|
if (res.data.data) {
|
res.data.data = res.data.data.sort((a, b) => b.num - a.num)
|
res.data.data = res.data.data.filter((item) => {
|
return 'num' in item && 'police_station_name' in item
|
}).filter((item, index) => index < 8).map((item, index) => {
|
item.value = item.num
|
item.name = item.police_station_name
|
|
if (index == 0) {
|
item.itemStyle = {
|
color: '#EB3C5A'
|
}
|
} else if (index == 1) {
|
item.itemStyle = {
|
color: '#FA8331'
|
}
|
} else if (index == 2) {
|
item.itemStyle = {
|
color: '#F7B833'
|
}
|
} else {
|
item.itemStyle = {
|
color: '#395FFD'
|
}
|
}
|
|
return item
|
})
|
|
data = res.data.data
|
} else {
|
data = []
|
}
|
|
eventchangemychart.setOption(this.initRankingOption(data))
|
|
setTimeout(() => {
|
this.eventChangeEchartsLoading = false
|
}, 500)
|
})
|
},
|
|
// 初始化警情数量统计
|
async initEventChangeEcharts (type) {
|
this.caseInfoType = type
|
this.eventChangeEchartsLoading = true
|
|
if (
|
eventchangemychart != null &&
|
eventchangemychart != "" &&
|
eventchangemychart != undefined
|
) {
|
|
eventchangemychart.clear()
|
eventchangemychart.dispose()
|
|
}
|
|
var chartDom = document.getElementById("EventChangeEcharts")
|
eventchangemychart = this.$echarts.init(chartDom)
|
|
const date = this.eventTime.map((item) => {
|
return this.dateFormat(item)
|
})
|
|
if (type == 0) {
|
this.getCaseAll(date[0], date[1])
|
} else if (type == 1) {
|
this.getCaseRanking(date[0], date[1])
|
} else {
|
this.getCaseRankingArea(date[0], date[1])
|
}
|
},
|
|
// 警情数量统计的options
|
initEventChangeOption (xData, yDataList) {
|
let option
|
if (xData.length == 0) {
|
//暂无数据
|
option = {
|
title: {
|
text: "暂无警情数据",
|
x: "center",
|
y: "center",
|
textStyle: {
|
color: "#fff",
|
fontSize: fontSize(14),
|
fontWeight: "normal",
|
},
|
},
|
}
|
} else {
|
option = {
|
color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
|
tooltip: {
|
trigger: "item",
|
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;color:#5c7bd9">{c0}起</strong>',
|
},
|
xAxis: {
|
type: "category",
|
data: xData,
|
axisLabel: {
|
color: "#fff",
|
fontSize: fontSize(14),
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
legend: {
|
data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'],
|
textStyle: {
|
color: "#fff"
|
}
|
},
|
yAxis: {
|
type: "value",
|
|
minInterval: 1,
|
|
splitLine: {
|
show: false,
|
},
|
axisLabel: {
|
color: "#fff",
|
fontSize: fontSize(14),
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
series: [
|
{
|
name: '盗窃',
|
data: yDataList.dqList,
|
type: "line",
|
smooth: true,
|
// areaStyle: {
|
// normal: {
|
// //渐变色
|
// color: new this.$echarts.graphic.LinearGradient(
|
// 0,
|
// 0,
|
// 0,
|
// 1,
|
// [
|
// {
|
// //波形图渐变色样式
|
// offset: 0,
|
// color: "rgba(3, 108, 255, 0.7)",
|
// },
|
// {
|
// offset: 0.8,
|
// color: "rgba(3, 108, 255, 0.1)",
|
// },
|
// ],
|
// false
|
// ),
|
// },
|
// },
|
// itemStyle: {
|
// normal: {
|
// color: "red", //改变折线点的颜色
|
// lineStyle: {
|
// color: "rgba(3, 108, 255, 1)", //改变折线颜色
|
// },
|
// },
|
// },
|
},
|
{
|
name: '涉诈',
|
data: yDataList.zpList,
|
type: "line",
|
smooth: true,
|
},
|
{
|
name: '纠纷',
|
data: yDataList.jfList,
|
type: "line",
|
smooth: true,
|
},
|
{
|
name: '其他',
|
data: yDataList.qtList,
|
type: "line",
|
smooth: true,
|
},
|
{
|
name: '求助',
|
data: yDataList.qjList,
|
type: "line",
|
smooth: true,
|
},
|
{
|
name: '涉毒',
|
data: yDataList.sduList,
|
type: "line",
|
smooth: true,
|
},
|
{
|
name: '涉赌',
|
data: yDataList.sdList,
|
type: "line",
|
smooth: true,
|
},
|
{
|
name: '涉黄',
|
data: yDataList.shList,
|
type: "line",
|
smooth: true,
|
}
|
|
],
|
grid: {
|
top: "24%",
|
left: "3%",
|
right: "2%",
|
bottom: "4%",
|
containLabel: true,
|
},
|
}
|
}
|
|
return option
|
},
|
|
// 警情排行统计的options
|
initRankingOption (dataArr) {
|
let option
|
if (dataArr.length == 0) {
|
//暂无数据
|
option = {
|
title: {
|
text: "暂无警情排行数据",
|
x: "center",
|
y: "center",
|
textStyle: {
|
color: "#fff",
|
fontSize: fontSize(14),
|
fontWeight: "normal",
|
},
|
},
|
}
|
} else {
|
let seriesData = dataArr.map(item => {
|
return { value: item.value, itemStyle: item.itemStyle }
|
})
|
let xData = dataArr.map((item) => {
|
if (item.name.length > 5) {
|
let name = item.name.substring(0, 6) + '…'
|
|
return name
|
} else {
|
return item.name
|
}
|
})
|
option = {
|
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;color:#5c7bd9">{c0}起</strong>',
|
},
|
xAxis: {
|
type: "value",
|
splitLine: { show: false },
|
axisLabel: { show: false },
|
axisTick: { show: false },
|
axisLine: { show: false }
|
},
|
yAxis: [
|
{
|
type: "category",
|
inverse: true,
|
axisLine: { show: false },
|
axisTick: { show: false },
|
data: dataArr.map(item => item.name),
|
axisLabel: {
|
rich: {
|
nt1: {
|
color: "#fff",
|
backgroundColor: '#EB3B5A',
|
width: fontSize(12),
|
height: fontSize(12),
|
fontSize: fontSize(10),
|
align: "center",
|
borderRadius: fontSize(50),
|
padding: [0, 1, 2, 1]
|
},
|
nt2: {
|
color: "#fff",
|
backgroundColor: '#FA8231',
|
width: fontSize(12),
|
height: fontSize(12),
|
fontSize: fontSize(10),
|
align: "center",
|
borderRadius: fontSize(50),
|
padding: [0, 1, 2, 1]
|
},
|
nt3: {
|
color: "#fff",
|
backgroundColor: '#F7B731',
|
width: fontSize(12),
|
height: fontSize(12),
|
fontSize: fontSize(10),
|
align: "center",
|
borderRadius: fontSize(50),
|
padding: [0, 1, 2, 1]
|
},
|
nt: {
|
color: "#fff",
|
backgroundColor: '#00a9c8',
|
width: fontSize(12),
|
height: fontSize(12),
|
fontSize: fontSize(10),
|
align: "center",
|
borderRadius: fontSize(50),
|
padding: [0, 1, 2, 1]
|
}
|
},
|
formatter: function (value, index) {
|
let idx = index + 1
|
if (idx <= 3) {
|
return ["{nt" + idx + "|" + idx + "}"].join("\n")
|
} else {
|
return ["{nt|" + idx + "}"].join("\n")
|
}
|
}
|
}
|
},
|
{//名称
|
type: 'category',
|
offset: -10,
|
position: "left",
|
axisLine: { show: false },
|
axisTick: { show: false },
|
axisLabel: {
|
color: '#fff',
|
align: "left",
|
verticalAlign: "bottom",
|
lineHeight: fontSize(24),
|
fontSize: fontSize(10)
|
},
|
data: xData.reverse(),
|
},
|
],
|
series: [
|
{
|
zlevel: 1,
|
type: "bar",
|
barWidth: fontSize(10),
|
data: seriesData,
|
itemStyle: {
|
normal: {
|
barBorderRadius: fontSize(5)
|
}
|
},
|
label: {
|
show: true,
|
fontSize: fontSize(10),
|
color: "#fff"
|
}
|
}
|
],
|
grid: {
|
top: "3%",
|
left: "-14%",
|
right: "2%",
|
bottom: "3%",
|
containLabel: true,
|
}
|
}
|
}
|
|
return option
|
},
|
|
// 现有设备统计
|
getEquipment () {
|
const typeData = {
|
carCount: "警车",
|
monitorCount: "摄像头",
|
phoneCount: "执法记录仪",
|
recorderCount: "手台",
|
}
|
|
const typeIndexData = {
|
警车: 0,
|
摄像头: 1,
|
手台: 2,
|
执法记录仪: 3,
|
}
|
|
let data = []
|
this.regionTotal = 0
|
let dataAll = null
|
dataAll = getEquipment(
|
this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
|
).then((res) => {
|
if (this.linetype == 0) {
|
data = res.data.map((item, index) => {
|
this.regionTotal += item.count
|
|
return {
|
equimentType: typeIndexData[item.type],
|
name: item.type,
|
value: Number(item.count),
|
working: Number(item.online),
|
fault: Number(item.offline),
|
label: twoColor[index],
|
}
|
})
|
|
equimentDataLength = data.length
|
|
return data
|
} else {
|
let normalData = {
|
value: 0,
|
name: "在线",
|
color: "#4caf50",
|
online: true,
|
label: { color: oneColor[0] },
|
}
|
let faultData = {
|
value: 0,
|
name: "离线",
|
color: "#ffd600",
|
online: false,
|
label: { color: oneColor[2] },
|
}
|
|
res.data.forEach((item) => {
|
this.regionTotal = Number(this.regionTotal) + Number(item.count)
|
|
normalData.value = Number(normalData.value) + Number(item.online)
|
|
for (let key in typeData) {
|
if (item.type == typeData[key]) {
|
normalData[key] = Number(item.online)
|
faultData[key] = Number(item.offline)
|
}
|
}
|
|
faultData.value = Number(faultData.value) + Number(item.offline)
|
})
|
|
data = [normalData, faultData]
|
|
equimentDataLength = data.length
|
|
return data
|
}
|
}).catch(res => {
|
dataAll = '请求错误'
|
})
|
|
return dataAll
|
},
|
|
// 现有设备饼图初始化
|
async initEquipmentEcharts (type) {
|
this.linetype = type
|
this.equipmentEchartsLoading = true
|
|
if (
|
equipmentmyChart != null &&
|
equipmentmyChart != "" &&
|
equipmentmyChart != undefined
|
) {
|
equipmentmyChart.dispose()
|
equipmentmyChart.off("click")
|
}
|
|
var chartDom = document.getElementById("EquipmentEcharts")
|
equipmentmyChart = this.$echarts.init(chartDom)
|
|
const data = await this.getEquipment()
|
|
if (data == '请求错误') {
|
setTimeout(() => {
|
this.equipmentEchartsLoading = false
|
}, 500)
|
}
|
const newData = data.filter((item) => {
|
if (item.value != 0) {
|
return item
|
}
|
})
|
|
equipmentmyChart.setOption(this.initEquipmentOptions(newData))
|
|
this.clickEquimentChart()
|
|
if (newData.length > 1) {
|
this.equipmentEchartsCarousel()
|
} else {
|
clearInterval(timer)
|
equipmentmyChart.off("mouseover")
|
equipmentmyChart.off("mouseout")
|
}
|
setTimeout(() => {
|
this.equipmentEchartsLoading = false
|
}, 500)
|
},
|
|
// 现有设备options饼图数据
|
initEquipmentOptions (dataArr) {
|
return {
|
tooltip: {
|
trigger: "item",
|
confine: true,
|
formatter: function (params) {
|
let tipHtml = ``
|
|
if (
|
"carCount" in params.data ||
|
"monitorCount" in params.data ||
|
"phoneCount" in params.data ||
|
"recorderCount" in params.data
|
) {
|
tipHtml = `
|
${params.marker}
|
<strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong>
|
<br />
|
<strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong>
|
<br />
|
<span style="color:#5470c6">警车：${params.data.carCount}台</span>
|
<br />
|
<span style="margin-left:10px;color:#91cc75">摄像头：${params.data.monitorCount}台</span>
|
<br />
|
<span style="margin-left:10px;color:#fac858">执法记录仪：${params.data.phoneCount}台</span>
|
<br />
|
<span style="margin-left:10px;color:#ee6666">手台：${params.data.recorderCount}台</span>
|
`
|
} else {
|
tipHtml = `${params.marker}
|
<strong style="color: ${params.color}">${params.data.name
|
} ${params.data.value}台</strong>
|
<br />
|
<span style="color:#4caf50">在线：${params.data.working
|
}台</span>
|
<br />
|
<span style="color:#ccc">离线：${params.data.fault
|
}台</span>
|
<br />
|
<span style="margin-left:10px;color:#ccc">设备离线率：${Math.floor(
|
(params.data.fault /
|
(params.data.working + params.data.fault)) *
|
100
|
)}%</span><br />`
|
}
|
return tipHtml
|
},
|
backgroundColor: "rgba(8, 56, 185, 0.9)",
|
borderColor: "rgba(8, 56, 185, 0.9)",
|
textStyle: {
|
fontSize: fontSize(14),
|
},
|
},
|
graphic: {
|
type: "text",
|
// left: "36.5%",
|
top: "40%",
|
left: "center",
|
style: {
|
text: "设备总数",
|
textAlign: "center",
|
fill: "#fff",
|
fontSize: fontSize(18),
|
fontWeight: 700,
|
},
|
},
|
title: {
|
text: `${this.regionTotal}`,
|
top: "52%",
|
left: "center",
|
textStyle: {
|
color: "#27D9C8",
|
fontSize: fontSize(20),
|
fontWeight: 700,
|
align: "center",
|
},
|
},
|
series: [
|
{
|
name: "",
|
type: "pie",
|
radius: ["90%", "136%"],
|
top: "middle",
|
left: "center",
|
data: dataArr,
|
avoidLabelOverlap: false,
|
labelLine: {
|
normal: {
|
length: fontSize(15),
|
lineStyle: {
|
width: fontSize(3),
|
},
|
},
|
},
|
emphasis: {
|
label: {
|
color: "red",
|
fontSize: fontSize(16),
|
},
|
},
|
label: {
|
formatter: '{b} {c}',
|
color: function (params) {
|
let colorList = []
|
if ("carCount" in params.data) {
|
colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
|
} else {
|
colorList = [
|
"#5470FE",
|
"#91cc75",
|
"#fac858",
|
"#ee6666",
|
"#73c0de",
|
"#3ba272",
|
"#fc8452",
|
"#9a60b4",
|
"#ea7ccc",
|
]
|
}
|
return colorList[params.dataIndex]
|
},
|
fontSize: fontSize(16),
|
},
|
itemStyle: {
|
normal: {
|
color: function (params) {
|
let colorList = []
|
if ("carCount" in params.data) {
|
colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
|
} else {
|
colorList = [
|
"#5470FE",
|
"#91cc75",
|
"#fac858",
|
"#ee6666",
|
"#73c0de",
|
"#3ba272",
|
"#fc8452",
|
"#9a60b4",
|
"#ea7ccc",
|
]
|
}
|
return colorList[params.dataIndex]
|
},
|
},
|
},
|
},
|
],
|
}
|
},
|
|
// 设备饼图轮播
|
equipmentEchartsCarousel () {
|
let curIndex = 0
|
if (timer) {
|
clearInterval(timer)
|
}
|
|
timer = setInterval(() => {
|
equipmentmyChart.dispatchAction({
|
type: "downplay",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
curIndex = (curIndex + 1) % equimentDataLength
|
equipmentmyChart.dispatchAction({
|
type: "highlight",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
}, 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) % equimentDataLength
|
equipmentmyChart.dispatchAction({
|
type: "highlight",
|
seriesIndex: 0,
|
dataIndex: curIndex,
|
})
|
}, 1000)
|
})
|
},
|
|
// 现有设备的点击事件（显示弹窗表格）
|
clickEquimentChart () {
|
equipmentmyChart.on("click", (params) => {
|
// 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
|
if ("equimentType" in params.data) {
|
this.$emit(
|
"showequimentdetail",
|
params.data.name,
|
params.data.equimentType,
|
"type"
|
)
|
} else {
|
this.$emit(
|
"showequimentdetail",
|
params.data.name,
|
params.data.online,
|
"online"
|
)
|
}
|
})
|
},
|
},
|
|
destroyed () {
|
window.removeEventListener("resize", this.echartsResize)
|
|
if (equipmentmyChart) {
|
equipmentmyChart.dispose()
|
equipmentmyChart = null
|
}
|
|
if (eventchangemychart) {
|
eventchangemychart.dispose()
|
eventchangemychart = null
|
}
|
|
if (timer) {
|
clearInterval(timer)
|
timer = null
|
}
|
|
if (rightTiming != null) {
|
clearInterval(rightTiming)
|
rightTiming = null
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
display: flex;
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
.case-box,
|
.alert-box,
|
.crowd-box {
|
position: relative;
|
margin: 8px;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
// background: $bg-color;
|
|
background-image: url(/img/box/box-bg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
|
// .title::after {
|
// content: '';
|
// position: absolute;
|
// top: 13px;
|
// left: 6px;
|
// width: 10px;
|
// height: 10px;
|
// border-radius: 50%;
|
// background: #43bafe;
|
// box-shadow: 0px 0px 8px 2px #43bafe;
|
// margin-left: 8px;
|
// }
|
|
:deep(.el-main) {
|
padding: 0;
|
}
|
|
.box {
|
display: flex;
|
position: absolute;
|
flex-direction: column;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11;
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
padding: 0 18px 0 18px;
|
position: relative;
|
|
font-size: 16px;
|
font-weight: bold;
|
font-style: oblique;
|
letter-spacing: 2px;
|
color: #fff;
|
// background-image: linear-gradient(to right, #2e4aba, #010d3e);
|
|
.title-tab {
|
color: #99cccc;
|
|
span {
|
cursor: pointer;
|
}
|
|
span.choosed {
|
color: #fff;
|
}
|
}
|
|
.timer {
|
width: 250px;
|
}
|
|
.regionTotal {
|
color: #fff;
|
font-size: 22px;
|
font-weight: 700;
|
margin-left: 50%;
|
letter-spacing: 1px;
|
}
|
}
|
|
.sub-title {
|
display: flex;
|
justify-content: space-between;
|
height: 36px;
|
}
|
|
.sub-tab {
|
padding: 10px;
|
display: flex;
|
color: #99cccc;
|
|
.tab {
|
display: flex;
|
justify-content: center;
|
margin: 0 10px;
|
flex: 1;
|
background: $sub-tab-bg-color;
|
border-radius: 8px;
|
cursor: pointer;
|
height: 22px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
&>div {
|
height: 22px;
|
line-height: 22px;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
.echarts-box {
|
padding: 12px;
|
flex: 1;
|
// height: 100%;
|
// width: 100%;
|
}
|
|
.table-box {
|
padding: 0 12px;
|
flex: 1;
|
|
.pointList {
|
width: 100%;
|
display: flex;
|
justify-content: space-evenly;
|
margin-top: -10px;
|
|
.point {
|
width: 12px;
|
height: 12px;
|
border-radius: 50px;
|
background-color: #006699;
|
cursor: pointer;
|
}
|
}
|
|
:deep(.el-table) {
|
.cell {
|
// white-space: pre-line;
|
white-space: pre-wrap;
|
height: 100% !important;
|
line-height: 3.2 !important;
|
}
|
|
.el-table__body-wrapper {
|
height: 100% !important;
|
overflow: hidden;
|
|
.el-table__body {
|
width: 100% !important;
|
height: 100% !important;
|
|
tbody {
|
width: 100% !important;
|
height: 100% !important;
|
|
td {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.duty-information-box {
|
height: 100%;
|
|
&>div:first-child {
|
background: $table-body-tr-n-color;
|
}
|
|
&>div:last-child {
|
background: $table-body-tr-2n-color;
|
}
|
|
&>div {
|
display: flex;
|
height: 50%;
|
|
&>div {
|
display: flex;
|
align-items: center;
|
}
|
|
&>div:first-child {
|
width: 28%;
|
justify-content: center;
|
}
|
|
&>div:last-child {
|
width: 72%;
|
text-align: left;
|
}
|
}
|
|
.no-zb-data {
|
width: 100%;
|
height: 100%;
|
background: transparent !important;
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
|
#peopleList {
|
height: 100%;
|
}
|
}
|
|
.alert-box {
|
margin-top: 0;
|
margin-bottom: 0;
|
|
.title {
|
height: 54px;
|
line-height: 54px;
|
}
|
|
.echarts-box {
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
|
:deep(.el-table__header-wrapper) {
|
height: 40px;
|
}
|
}
|
|
.border-svg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
}
|
</style>
|
