From abd285e6d013128aa57c9e30e851b2aa76d60ec5 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 10 Feb 2026 16:45:17 +0800
Subject: [PATCH] feat:独栋显示调整
---
src/views/home/components/rightContainer.vue | 2760 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 1,403 insertions(+), 1,357 deletions(-)
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index cda0565..e284ea9 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -1,146 +1,88 @@
<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="table-box" v-show="!showMJL">
- <el-table
- size="small"
- :height="tableHeight"
- :data="schedulingList"
- style="width: 100%;"
- :header-cell-style="{ 'text-align': 'center' }"
- :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }"
- :row-class-name="tableRowClassName"
- :empty-text="schedulingNoDataText"
- v-loading="schedulingLoading"
- element-loading-text="拼命加载中"
- element-loading-spinner="el-icon-loading"
- element-loading-background="rgba(0, 0, 0, 0.5)"
- >
- <el-table-column prop="dept" label="值班单位"></el-table-column>
- <el-table-column prop="person" label="姓名"></el-table-column>
- <el-table-column prop="contact" label="联系方式"></el-table-column>
- </el-table>
- <div class="pointList" v-if="schedulingList == []">
- <el-tooltip
- class="item"
- effect="dark"
- :content="item.dept"
- placement="top"
- v-for="(item, index) in schedulingDeptList"
- :key="index"
- >
- <div class="point" @click="getSchedlingList(item)"></div>
- </el-tooltip>
- </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>
- </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 class="container" ref="Container">
+ <div class="case-box" ref="caseBox">
+ <div class="box">
+ <div class="title" ref="alertBoxTitle">
+ <div>值班信息(当日)</div>
</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>
- <div id="EventChangeEcharts" class="echarts-box"></div>
- </el-main>
+ <div class="duty-information-box" v-show="!showMJL">
+ <div v-for="item in schedulingList" :key="item.id">
+ <div>
+ <span>{{ item.type }}</span>
</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>
+ <span>{{ item.person }}</span>
+ </div>
+ </div>
+ <div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
</div>
- <!-- <div class="alert-box" ref="alertBox">
+ <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">
@@ -168,67 +110,45 @@
</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 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>
+ <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",
+ "#5470FE",
+ "#91cc75",
+ "#fac858",
+ "#ee6666",
+ "#73c0de",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#ea7ccc",
]
let rightTiming = null
@@ -241,799 +161,916 @@
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"
-import { getCaseAll, getCaseRanking, getEquipment } from "@/api/home/index.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 * 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
- }
+ 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")
},
- created () {
- this.pickerOptions = {
- ...this.pickerOptions,
- disabledDate (time) {
- // 设置可选择的日期为今天之后的一个月内
- let curDate = new Date().getTime()
- return time.getTime() > curDate
- },
- }
-
- this.defaultDate()
-
- this.getSchedulingList()
-
- this.getSchedulingDeptList()
+ //获取值班单位信息
+ getSchedulingDeptList () {
+ getSchedulingDeptList().then((res) => {
+ this.schedulingDeptList = res.data.data
+ })
},
- mounted () {
- this.getHomeAllData()
+ // 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(() => {
- window.addEventListener("resize", this.echartsResize)
- this.tableHeight =
- this.$refs.Container.offsetHeight -
- this.$refs.caseBox.offsetHeight -
- this.$refs.crowdBox.offsetHeight -
- this.$refs.alertBoxTitle.offsetHeight -
- 55
+ 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) => {
+ let a = [], b = []
+ a = res.data.data.filter(i => i.dept == '信州分局')
+ b = res.data.data.filter(i => i.dept != '信州分局')
+
+ this.schedulingList = [...a, ...b]
+ })
+
+ setTimeout(() => {
+ this.schedulingNoDataText = ' '
+ this.schedulingLoading = false
+ if (!this.schedulingList.length) {
+ setTimeout(() => {
+ this.schedulingNoDataText = '暂无值班数据'
+ }, 200)
+ }
+ }, 500)
+ }
},
- methods: {
- //获取值班列表信息
- getSchedlingList (item) {
- this.$emit("showschedulingdetail", item.dept, item.dept, "type")
- },
+ echartsResize () {
+ equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
+ eventchangemychart &&
+ eventchangemychart != null &&
+ eventchangemychart.resize()
+ },
- //获取值班单位信息
- getSchedulingDeptList () {
- getSchedulingDeptList().then((res) => {
- this.schedulingDeptList = res.data.data
- })
- },
+ // 警情统计中时间变化
+ async caseTimeChange (e) {
+ const date = e.map((item) => {
+ return this.dateFormat(item)
+ })
- // actTabClick (type) {
- // this.acttype = type
- // this.$refs.activityTable.bodyWrapper.scrollTop = 0
- // this.$emit('changeActivityType', type)
- // this.$emit('activityChange')
- // },
+ eventchangemychart.clear()
- /**
- * @description: 获取当前组件内所有数据
- * @return {*}
- */
- getHomeAllData (id = "") {
- this.policeStaionID = id
+ 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])
+ }
+ },
- this.initEventChangeEcharts(this.caseInfoType)
+ // 设置默认时间
+ defaultDate () {
+ var current = new Date()
- this.initEquipmentEcharts(this.linetype)
+ var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
- if (rightTiming != null) {
- clearInterval(rightTiming)
- rightTiming = null
- }
+ this.eventTime = [seven, current] //将值设置给插件绑定的数据
+ },
- rightTiming = setInterval(async () => {
- this.initEventChangeEcharts(this.caseInfoType)
- this.initEquipmentEcharts(this.linetype)
- }, 600000)
- },
+ // 获取当前日期
+ 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
+ },
- getSchedulingList () {
- this.schedulingLoading = true
- if (this.userInfo.dept_id == "1596020515064381442") {
- this.schedulingNoDataText = ' '
- const data = [
- {
- person:
- "徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬",
- patrol: "章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥",
- }
- ]
+ // 获取警情统计值
+ getCaseAll (start, end) {
+ getCaseAll(
+ start,
+ end,
+ this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
+ ).then((res) => {
+ let obj = {}
+ if (res.data.timeList) {
+ 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: {} }
+ }
- 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)
+ eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))
- this.$nextTick(() => {
- this.tableHeight =
- this.$refs.Container.offsetHeight -
- this.$refs.caseBox.offsetHeight -
- this.$refs.crowdBox.offsetHeight -
- this.$refs.alertBoxTitle.offsetHeight
- })
+ setTimeout(() => {
+ this.eventChangeEchartsLoading = false
+ }, 500)
+ })
+ },
- this.showMJL = true
+ // 获取警情社区排行统计值
+ 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 {
- const params = {
- sameday: 1,
- }
-
- this.showMJL = false
- getSchedulingList(1, 100, params).then((res) => {
- this.schedulingList = res.data.data.records
- })
-
-
- setTimeout(() => {
- this.schedulingNoDataText = ' '
- this.schedulingLoading = false
- if (!this.schedulingList.length) {
- setTimeout(() => {
- this.schedulingNoDataText = '暂无值班数据'
- }, 200)
- }
- }, 500)
-
-
+ item.itemStyle = {
+ color: '#395FFD'
+ }
}
- },
+ return item
+ }).sort((a, b) => b.value - a.value)
- echartsResize () {
- equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
- eventchangemychart &&
- eventchangemychart != null &&
- eventchangemychart.resize()
- },
+ data = res.data.data
+ } else {
+ data = []
+ }
- // 警情统计中时间变化
- async caseTimeChange (e) {
- const date = e.map((item) => {
- return this.dateFormat(item)
- })
+ eventchangemychart.setOption(this.initRankingOption(data))
- eventchangemychart.clear()
- const optionsData = await this.getCaseAll(date[0], date[1])
- eventchangemychart.showLoading({
- text: '拼命加载中',
- color: '#c23531',
- textColor: '#FFF',
- maskColor: 'rgba(0, 0, 0, 0.2)',
- zlevel: 0,
- })
- setTimeout(() => {
- eventchangemychart.hideLoading()
- eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList))
- }, 500)
- },
+ setTimeout(() => {
+ this.eventChangeEchartsLoading = false
+ }, 500)
+ })
+ },
- // 设置默认时间
- defaultDate () {
- var current = new Date()
+ // 获取警情辖区排行统计值
+ 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 && 'name' in item
+ }).filter((item, index) => index < 8).map((item, index) => {
+ item.value = item.num
- 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) {
- 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
- },
- []
- )
- 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) => a.value - b.value)
- res.data.data = res.data.data.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)
-
- console.log(res.data.data, 465)
-
- 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])
+ if (index == 0) {
+ item.itemStyle = {
+ color: '#EB3C5A'
+ }
+ } else if (index == 1) {
+ item.itemStyle = {
+ color: '#FA8331'
+ }
+ } else if (index == 2) {
+ item.itemStyle = {
+ color: '#F7B833'
+ }
} else {
- this.getCaseRanking(date[0], date[1])
+ item.itemStyle = {
+ color: '#395FFD'
+ }
}
- },
+ return item
+ })
- // 警情数量统计的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",
- },
- },
+ 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")
+ }
}
- } 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,
- }
- ],
- grid: {
- top: "4%",
- left: "3%",
- right: "2%",
- bottom: "4%",
- containLabel: true,
- },
+ }
+ },
+ {//名称
+ 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
- },
+ 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 }
- })
- option = {
- 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: "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: dataArr.reverse().map((item) => item.name),
- },
- ],
- 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: "-20%",
- right: "2%",
- bottom: "3%",
- containLabel: true,
- }
- }
- }
+ // 现有设备统计
+ getEquipment () {
+ const typeData = {
+ carCount: "警车",
+ monitorCount: "摄像头",
+ phoneCount: "执法记录仪",
+ recorderCount: "手台",
+ }
- return option
- },
+ const typeIndexData = {
+ 警车: 0,
+ 摄像头: 1,
+ 手台: 2,
+ 执法记录仪: 3,
+ }
- // 现有设备统计
- getEquipment () {
- const typeData = {
- carCount: "车辆",
- monitorCount: "摄像头",
- phoneCount: "执法记录仪",
- recorderCount: "手台",
- }
+ 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
- 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 = ``
+ equimentType: typeIndexData[item.type],
+ name: item.type,
+ value: Number(item.count),
+ working: Number(item.online),
+ fault: Number(item.offline),
+ label: twoColor[index],
+ }
+ })
- if (
- "carCount" in params.data ||
- "monitorCount" in params.data ||
- "phoneCount" in params.data ||
- "recorderCount" in params.data
- ) {
- tipHtml = `
+ 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 />
@@ -1047,474 +1084,483 @@
<br />
<span style="margin-left:10px;color:#ee6666">手台：${params.data.recorderCount}台</span>
`
- } else {
- tipHtml = `${params.marker}
+ } else {
+ tipHtml = `${params.marker}
<strong style="color: ${params.color}">${params.data.name
- } ${params.data.value}台</strong>
+ } ${params.data.value}台</strong>
<br />
<span style="color:#4caf50">在线：${params.data.working
- }台</span>
+ }台</span>
<br />
<span style="color:#ccc">离线：${params.data.fault
- }台</span>
+ }台</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]
- },
- },
- },
- },
- ],
+ (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),
+ },
},
-
- // 设备饼图轮播
- 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)
- })
+ graphic: {
+ type: "text",
+ // left: "36.5%",
+ top: "40%",
+ left: "center",
+ style: {
+ text: "设备总数",
+ textAlign: "center",
+ fill: "#fff",
+ fontSize: fontSize(18),
+ fontWeight: 700,
+ },
},
-
- // 现有设备的点击事件（显示弹窗表格）
- clickEquimentChart () {
- equipmentmyChart.on("click", (params) => {
- // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
- if ("equimentType" in params.data) {
- this.$emit(
- "showequimentdetail",
- params.data.name,
- params.data.equimentType,
- "type"
- )
+ 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 {
- this.$emit(
- "showequimentdetail",
- params.data.name,
- params.data.online,
- "online"
- )
+ 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]
+ },
+ },
+ },
+ },
+ ],
+ }
},
- destroyed () {
- window.removeEventListener("resize", this.echartsResize)
+ // 设备饼图轮播
+ equipmentEchartsCarousel () {
+ let curIndex = 0
+ if (timer) {
+ clearInterval(timer)
+ }
- if (equipmentmyChart) {
- equipmentmyChart.dispose()
- equipmentmyChart = null
- }
+ timer = setInterval(() => {
+ equipmentmyChart.dispatchAction({
+ type: "downplay",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ curIndex = (curIndex + 1) % equimentDataLength
+ equipmentmyChart.dispatchAction({
+ type: "highlight",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ }, 1000)
- if (eventchangemychart) {
- eventchangemychart.dispose()
- eventchangemychart = null
- }
+ 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 = null
+ clearInterval(timer)
}
-
- if (rightTiming != null) {
- clearInterval(rightTiming)
- rightTiming = null
- }
+ 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;
+ display: flex;
+ position: relative;
+ height: 100%;
+ width: 100%;
+
+ .case-box,
+ .alert-box,
+ .crowd-box {
position: relative;
- height: 100%;
- width: 100%;
+ margin: 8px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ // background: $bg-color;
- .case-box,
- .alert-box,
- .crowd-box {
- position: relative;
- margin: 8px;
- flex: 1;
+ 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;
- flex-direction: column;
- // background: $bg-color;
+ 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;
- background-image: url(/img/box/box-bg.png);
- background-size: 100% 100%;
- background-repeat: no-repeat;
+ &>div {
+ height: 22px;
+ line-height: 22px;
+ white-space: nowrap;
+ }
+ }
+ }
- // .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;
- // }
+ .echarts-box {
+ padding: 12px;
+ flex: 1;
+ // height: 100%;
+ // width: 100%;
+ }
- :deep(.el-main) {
- padding: 0;
+ .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;
}
- .box {
- display: flex;
- position: absolute;
- flex-direction: column;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 11;
- }
+ .el-table__body-wrapper {
+ height: 100% !important;
+ overflow: hidden;
- .title {
- display: flex;
- align-items: center;
- justify-content: space-between;
+ .el-table__body {
+ width: 100% !important;
+ height: 100% !important;
- padding: 0 18px 0 18px;
- position: relative;
+ tbody {
+ width: 100% !important;
+ height: 100% !important;
- 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;
+ td {
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;
- }
- }
- }
-
- #peopleList {
- height: 100%;
- }
+ }
}
- .alert-box {
- margin-top: 0;
- margin-bottom: 0;
+ .duty-information-box {
+ height: 100%;
- .title {
- height: 54px;
- line-height: 54px;
+ &>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;
}
- .echarts-box {
- overflow-x: hidden;
- overflow-y: auto;
+ &>div:first-child {
+ width: 28%;
+ justify-content: center;
}
- :deep(.el-table__header-wrapper) {
- height: 40px;
+ &>div:last-child {
+ width: 72%;
+ text-align: left;
}
- }
+ }
- .border-svg {
- position: absolute;
- top: 0;
- left: 0;
+ .no-zb-data {
width: 100%;
height: 100%;
- z-index: 1;
+ 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>
\ No newline at end of file
--
Gitblit v1.9.3