srs-police-affairs.git

			@@ -1,6 +1,6 @@
			<template>
			<div class="container" ref="Container">
			<!-- <div class="case-box" ref="caseBox">
			<div class="container" ref="Container">
			<!-- <div class="case-box" ref="caseBox">
			<div class="box">
			<div class="title" ref="alertBoxTitle">
			<div>值班信息(当日)</div>
			@@ -48,7 +48,7 @@
			</svg>
			</div> -->

			<!-- <div class="alert-box" ref="alertBox ">
			<!-- <div class="alert-box" ref="alertBox ">
			<div class="box">
			<div class="title">
			警情统计
			@@ -88,7 +88,7 @@
			</svg>
			</div> -->

			<!-- <div class="alert-box" ref="alertBox">
			<!-- <div class="alert-box" ref="alertBox">
			<div class="title" ref="alertBoxTitle">
			<div>电子沙盘</div>
			<div class="title-tab">
			@@ -110,66 +110,70 @@
			</div>
			</div> -->

			<div class="crowd-box" ref="crowdBox">
			<div class="box">
			<div class="title">地址总数：{{ addresCount }}</div>
			<el-main v-loading="CountByTypeEchartsLoading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
			style="height: calc(100% - 17.6%);">
			<div style="overflow: hidden" id="CountByTypeEcharts" class="echarts-box"></div>
			</el-main>
			</div>
			<div class="crowd-box" ref="crowdBox">
			<div class="box">
			<div class="title">地址总数：{{ addresCount }}</div>
			<el-main v-loading="CountByTypeEchartsLoading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
			style="height: calc(100% - 17.6%);">
			<div style="overflow: hidden" id="CountByTypeEcharts" class="echarts-box"></div>
			</el-main>
			</div>

			<svg class="border-svg">
			<defs>
			<path id="border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
			d="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
			<svg class="border-svg">
			<defs>
			<path id="border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
			d="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
			c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,2.58,0.63,2.04,3,3c0,1.005,0,1.995,0,3c0.67,0,1.33,0,2,0
			c0.01,156.87,0.01,309.66,0,454.5c-1.43,1.17-4.01,4.155-5,6c-12,0-24,0-36,0c-2.67-4.995-5.33-10.005-8-15c-21,0-42,0-63,0
			c-1.08,3.48-2.35,6.375-4,9c-0.67,0.495-1.33,1.005-2,1.5c-0.33,1.5-0.67,3-1,4.5c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
			c-1.28-2.355-2.76-3.375-4-6c-0.33,0-0.67,0-1,0c0-13.005,0-25.995,0-39c0-29.49,0-59.01,0-88.5C0.27,240.06,0.27,120.03,0.27,0.045z" fill="transparent" />
			<radialGradient id="border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
			<stop offset="0%" stop-color="#fff" stop-opacity="1" />
			<stop offset="100%" stop-color="#fff" stop-opacity="0" />
			</radialGradient>
			<mask id="border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c">
			<circle cx="0" cy="0" r="150" fill="url(#border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c)">
			<animateMotion dur="8s"
			path="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
			<radialGradient id="border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
			r="50%">
			<stop offset="0%" stop-color="#fff" stop-opacity="1" />
			<stop offset="100%" stop-color="#fff" stop-opacity="0" />
			</radialGradient>
			<mask id="border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c">
			<circle cx="0" cy="0" r="150"
			fill="url(#border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c)">
			<animateMotion dur="8s"
			path="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
			c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,2.58,0.63,2.04,3,3c0,1.005,0,1.995,0,3c0.67,0,1.33,0,2,0
			c0.01,156.87,0.01,309.66,0,454.5c-1.43,1.17-4.01,4.155-5,6c-12,0-24,0-36,0c-2.67-4.995-5.33-10.005-8-15c-21,0-42,0-63,0
			c-1.08,3.48-2.35,6.375-4,9c-0.67,0.495-1.33,1.005-2,1.5c-0.33,1.5-0.67,3-1,4.5c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
			c-1.28-2.355-2.76-3.375-4-6c-0.33,0-0.67,0-1,0c0-13.005,0-25.995,0-39c0-29.49,0-59.01,0-88.5C0.27,240.06,0.27,120.03,0.27,0.045z"
			rotate="auto" repeatCount="indefinite" />
			</circle>
			</mask>
			</defs>
			rotate="auto" repeatCount="indefinite" />
			</circle>
			</mask>
			</defs>

			<use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
			</use>
			</svg>
			<use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
			repeatCount="indefinite" />
			</use>
			</svg>
			</div>

			<div class="crowd-box" ref="crowdBox">
			<div class="box">
			<div class="title">制牌总数：{{ zpCount }}</div>
			<el-main v-loading="CountByTypeMpEchartsLoading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
			style="height: calc(100% - 17.6%);">
			<div style="overflow: hidden" id="CountByTypeMpEcharts" class="echarts-box"></div>
			</el-main>
			</div>

			<svg class="border-svg">
			<use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
			repeatCount="indefinite" />
			</use>
			</svg>
			</div>
			</div>

			<div class="crowd-box" ref="crowdBox">
			<div class="box">
			<div class="title">制牌总数：{{ zpCount }}</div>
			<el-main v-loading="CountByTypeMpEchartsLoading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
			style="height: calc(100% - 17.6%);">
			<div style="overflow: hidden" id="CountByTypeMpEcharts" class="echarts-box"></div>
			</el-main>
			</div>

			<svg class="border-svg">
			<use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
			</use>
			</svg>
			</div>
			</div>
			</template>

			<script>
			@@ -178,15 +182,15 @@
			let countByTypeMyChart, countByTypeMpMyChart
			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
			@@ -197,9 +201,9 @@

			import recorderArr from "@/assets/data/equimentsDate/recorder.js"
			import {
			getSchedulingList, getSchedulingDeptList,
			getCountByType,
			getCountByTypeMp
			getSchedulingList, getSchedulingDeptList,
			getCountByType,
			getCountByTypeMp
			} from "@/api/home/index.js"
			import { fontSize } from "@/utils/fontSize.js"

			@@ -208,1101 +212,1220 @@
			const timeEvents = []

			export default {
			inject: ["userInfo"],
			data () {
			return {
			addresCount: '',
			zpCount: '',
			eventTime: [],
			CountByTypeEchartsLoading: false,
			CountByTypeMpEchartsLoading: false,
			equipmentEchartsLoading: false,
			eventChangeEchartsLoading: false,
			schedulingNoDataText: ' ',
			schedulingLoading: false,
			inject: ["userInfo"],
			data () {
			return {
			addresCount: '',
			zpCount: '',
			eventTime: [],
			CountByTypeEchartsLoading: false,
			CountByTypeMpEchartsLoading: false,
			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: "",
			areaId: '',
			aoiId: '',
			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()
			},

			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")
			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: "",
			areaId: '',
			aoiId: '',
			showMJL: false,
			originTitle: ['值班', '副班、巡逻'],
			transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
			caseInfoType: 0
			}
			},

			//获取值班单位信息
			getSchedulingDeptList () {
			getSchedulingDeptList().then((res) => {
			this.schedulingDeptList = res.data.data
			})
			created () {
			this.pickerOptions = {
			...this.pickerOptions,
			disabledDate (time) {
			// 设置可选择的日期为今天之后的一个月内
			let curDate = new Date().getTime()
			return time.getTime() > curDate
			},
			}

			this.defaultDate()
			},

			// actTabClick (type) {
			// this.acttype = type
			// this.$refs.activityTable.bodyWrapper.scrollTop = 0
			// this.$emit('changeActivityType', type)
			// this.$emit('activityChange')
			// },
			mounted () {
			this.getHomeAllData()

			/**
			* @description: 获取当前组件内所有数据
			* @return {*}
			*/
			getHomeAllData (deptId = "", areaId = '', aoiId = '') {
			console.log("26666666666666", deptId, areaId, aoiId)
			this.policeStaionID = deptId
			this.aoiId = aoiId
			this.areaId = areaId

			this.getCountByType()

			this.getCountByTypeMp()

			if (rightTiming != null) {
			clearInterval(rightTiming)
			rightTiming = null
			}

			rightTiming = setInterval(async () => {
			this.getCountByType()

			this.getCountByTypeMp()
			}, 600000)
			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
			})
			},

			getCountByType () {
			this.CountByTypeEchartsLoading = true
			this.disposeEchart()
			getCountByType({
			deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
			areaId: this.areaId,
			aoiId: this.aoiId
			}).then(res => {
			let data = res.data.data
			this.addresCount = 0
			data.forEach(item => {
			this.addresCount = this.addresCount + item.count
			})

			let echartsData = [
			{
			type: 'unit',
			num: 0,
			name: '单元地址'
			},
			{
			type: 'road_no',
			num: 0,
			name: '沿街门牌地址'
			},
			{
			type: 'aoi',
			num: 0,
			name: '院落地址'
			},
			{
			type: 'room',
			num: 0,
			name: '户室地址'
			},
			{
			type: 'building',
			num: 0,
			name: '楼栋地址'
			},
			]

			data.forEach(item => {
			echartsData.forEach(i => {
			if (item.type === i.type) {
			i.num = item.count
			}
			})
			})

			this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData.map(i => i.num), 1)
			})
			},

			getCountByTypeMp () {
			this.CountByTypeMpEchartsLoading = true
			this.disposeEchart()
			getCountByTypeMp({
			deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
			areaId: this.areaId,
			aoiId: this.aoiId
			}).then(res => {
			let data = res.data.data
			this.zpCount = 0
			data.forEach(item => {
			this.zpCount = this.zpCount + item.count
			})
			let echartsData = [
			{
			type: 'unit',
			value: 0,
			name: '单元牌'
			},
			{
			type: 'road_no',
			value: 0,
			name: '中门牌'
			},
			{
			type: 'aoi',
			value: 0,
			name: '大门牌'
			},
			{
			type: 'room',
			value: 0,
			name: '户室牌'
			},
			{
			type: 'building',
			value: 0,
			name: '楼栋牌'
			},
			]

			data.forEach(item => {
			echartsData.forEach(i => {
			if (item.type === i.type) {
			i.value = item.count
			}
			})
			})

			this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData, 2)
			})
			},

			initCountByTypeEcharts (xDate, yDate, type) {
			if (type === 1) {
			var chartDom = document.getElementById('CountByTypeEcharts')

			countByTypeMyChart = this.$echarts.init(chartDom)
			countByTypeMyChart.setOption(this.initCountyByOptions(xDate, yDate))

			countByTypeMyChart.on('click', params => {
			console.log('params------1111----------', params)
			this.$emit('showcountBydetail', params.name, 1, params.data, this.policeStaionID, this.areaId, this.aoiId)
			// if (this.tabTypeThree == 0) {
			// this.$emit('showcountBydetail', params.name, 2, params.data.id)
			// } else {
			// this.$emit('showcountBydetail', params.name, 1, params.data.id)
			// }
			})

			this.CountByTypeEchartsLoading = false
			} else {
			var chartMpDom = document.getElementById('CountByTypeMpEcharts')

			countByTypeMpMyChart = this.$echarts.init(chartMpDom)
			countByTypeMpMyChart.setOption(this.initCountyByOptions(xDate, yDate, '#3498db'))

			countByTypeMpMyChart.on('click', params => {
			// this.policeStaionID = deptId
			// this.aoiId = aoiId
			console.log('params----------------', params)
			this.$emit('showcountBydetail', params.name, 2, params.data, this.policeStaionID, this.areaId, this.aoiId)
			// if (this.tabTypeThree == 0) {
			// this.$emit('showcountBydetail', params.name, 2, params.data.id)
			// } else {
			// this.$emit('showcountBydetail', params.name, 1, params.data.id)
			// }
			})

			this.CountByTypeMpEchartsLoading = false
			}
			},

			initCountyByOptions (xDate, yDate, color = '#2ecc71') {
			const that = this
			return {
			tooltip: {
			trigger: 'item',
			formatter: params => {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2)
			} else {
			msg = params.value
			}

			msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
			return msg
			},
			backgroundColor: 'rgba(8, 56, 185, 0.9)',
			borderColor: 'rgba(8, 56, 185, 0.9)',
			textStyle: {
			color: '#fff',
			fontSize: fontSize(12)
			}
			methods: {
			//获取值班列表信息
			getSchedlingList (item) {
			this.$emit("showschedulingdetail", item.dept, item.dept, "type")
			},
			color: myColor,
			xAxis: {
			type: 'value',
			splitLine: {
			show: false
			},
			axisLine: {
			show: false
			},
			axisLabel: {
			show: false,
			},
			axisTick: {
			show: false
			},

			//获取值班单位信息
			getSchedulingDeptList () {
			getSchedulingDeptList().then((res) => {
			this.schedulingDeptList = res.data.data
			})
			},
			yAxis: {
			type: 'category',
			data: xDate,
			axisLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(14)
			},
			axisTick: {
			show: false
			},

			// actTabClick (type) {
			// this.acttype = type
			// this.$refs.activityTable.bodyWrapper.scrollTop = 0
			// this.$emit('changeActivityType', type)
			// this.$emit('activityChange')
			// },

			/**
			* @description: 获取当前组件内所有数据
			* @return {*}
			*/
			getHomeAllData (deptId = "", areaId = '', aoiId = '') {
			console.log("26666666666666", deptId, areaId, aoiId)
			this.policeStaionID = deptId
			this.aoiId = aoiId
			this.areaId = areaId

			this.getCountByType()

			this.getCountByTypeMp()

			if (rightTiming != null) {
			clearInterval(rightTiming)
			rightTiming = null
			}

			rightTiming = setInterval(async () => {
			this.getCountByType()

			this.getCountByTypeMp()
			}, 600000)
			},
			series: [
			{
			data: yDate,
			type: 'bar',
			barWidth: '50%',
			barCategoryGap: '80%',
			zlevel: 2,
			cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
			itemStyle: {
			normal: {
			color: color,
			label: {
			show: true, //开启显示
			position: 'right', //在上方显示
			textStyle: { //数值样式
			color: color,
			fontSize: 10
			}
			}
			}
			},
			},
			],
			grid: {
			top: '2%',
			left: '2%',
			// right: '-1%',
			right: '10%',
			bottom: '2%',
			containLabel: true
			}
			}
			},

			disposeEchart () {
			if (countByTypeMyChart != null && countByTypeMyChart != '' && countByTypeMyChart != undefined) {
			countByTypeMyChart.clear()
			countByTypeMyChart.dispose()
			countByTypeMyChart.off('click')
			}
			getCountByType () {
			this.CountByTypeEchartsLoading = true
			this.disposeEchart()
			getCountByType({
			deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
			areaId: this.areaId,
			aoiId: this.aoiId
			}).then(res => {
			let data = res.data.data
			this.addresCount = 0
			data.forEach(item => {
			this.addresCount = this.addresCount + item.count
			})

			if (countByTypeMpMyChart != null && countByTypeMpMyChart != '' && countByTypeMpMyChart != undefined) {
			countByTypeMpMyChart.clear()
			countByTypeMpMyChart.dispose()
			countByTypeMpMyChart.off('click')
			}
			},
			let echartsData = [
			{
			type: 'unit',
			num: 0,
			name: '单元地址'
			},
			{
			type: 'road_no',
			num: 0,
			name: '沿街门牌地址'
			},
			{
			type: 'aoi',
			num: 0,
			name: '院落地址'
			},
			{
			type: 'room',
			num: 0,
			name: '户室地址'
			},
			{
			type: 'building',
			num: 0,
			name: '楼栋地址'
			},
			]

			echartsResize () {
			equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
			eventchangemychart &&
			eventchangemychart != null &&
			eventchangemychart.resize()
			},
			data.forEach(item => {
			echartsData.forEach(i => {
			if (item.type === i.type) {
			i.num = item.count
			}
			})
			})

			// 警情统计中时间变化
			async caseTimeChange (e) {
			const date = e.map((item) => {
			return this.dateFormat(item)
			})
			this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData.map(i => i.num), 1)
			})
			},

			eventchangemychart.clear()
			getCountByTypeMp () {
			this.CountByTypeMpEchartsLoading = true
			this.disposeEchart()
			getCountByTypeMp({
			deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
			areaId: this.areaId,
			aoiId: this.aoiId
			}).then(res => {
			let data = res.data.data
			this.zpCount = 0
			data.forEach(item => {
			this.zpCount = this.zpCount + item.count
			})
			let echartsData = [
			{
			type: 'unit',
			value: 0,
			onValue: 10,
			offValue: 10,
			name: '单元牌'
			},
			{
			type: 'road_no',
			value: 0,
			onValue: 10,
			offValue: 10,
			name: '中门牌'
			},
			{
			type: 'aoi',
			value: 0,
			onValue: 10,
			offValue: 10,
			name: '大门牌'
			},
			{
			type: 'room',
			value: 0,
			onValue: 10,
			offValue: 10,
			name: '户室牌'
			},
			{
			type: 'building',
			value: 0,
			onValue: 10,
			offValue: 10,
			name: '楼栋牌'
			},
			]

			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])
			}
			},
			data.forEach(item => {
			echartsData.forEach(i => {
			if (item.type === i.type) {
			i.value = item.count
			}
			})
			})

			// 设置默认时间
			defaultDate () {
			var current = new Date()
			this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData, 2)
			})
			},

			var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
			initCountByTypeEcharts (xDate, yDate, type) {
			if (type === 1) {
			var chartDom = document.getElementById('CountByTypeEcharts')

			this.eventTime = [seven, current] //将值设置给插件绑定的数据
			},
			countByTypeMyChart = this.$echarts.init(chartDom)
			countByTypeMyChart.setOption(this.initCountyByOptions(xDate, yDate))

			// 获取当前日期
			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
			},
			countByTypeMyChart.on('click', params => {
			console.log('params------1111----------', params)
			this.$emit('showcountBydetail', params.name, 1, params.data, this.policeStaionID, this.areaId, this.aoiId)
			// if (this.tabTypeThree == 0) {
			// this.$emit('showcountBydetail', params.name, 2, params.data.id)
			// } else {
			// this.$emit('showcountBydetail', params.name, 1, params.data.id)
			// }
			})

			// 获取警情统计值
			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: {} }
			}

			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'
			}
			this.CountByTypeEchartsLoading = false
			} else {
			item.itemStyle = {
			color: '#395FFD'
			}
			var chartMpDom = document.getElementById('CountByTypeMpEcharts')

			countByTypeMpMyChart = this.$echarts.init(chartMpDom)
			countByTypeMpMyChart.setOption(this.initCountyByMpOptions(xDate, yDate, '#3498db'))

			countByTypeMpMyChart.on('click', params => {
			// this.policeStaionID = deptId
			// this.aoiId = aoiId
			console.log('params----------------', params, params.data.barType)
			this.$emit('showcountBydetail', params.name, 2, params.data, this.policeStaionID, this.areaId, this.aoiId)
			// if (this.tabTypeThree == 0) {
			// this.$emit('showcountBydetail', params.name, 2, params.data.id)
			// } else {
			// this.$emit('showcountBydetail', params.name, 1, params.data.id)
			// }
			})

			this.CountByTypeMpEchartsLoading = false
			}
			},

			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 && 'name' in item
			}).filter((item, index) => index < 8).map((item, index) => {
			item.value = item.num

			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

			initCountyByOptions (xDate, yDate, color = '#2ecc71') {
			const that = this
			return {
			equimentType: typeIndexData[item.type],
			name: item.type,
			value: Number(item.count),
			working: Number(item.online),
			fault: Number(item.offline),
			label: twoColor[index],
			tooltip: {
			trigger: 'item',
			formatter: params => {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2)
			} else {
			msg = params.value
			}

			msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
			return msg
			},
			backgroundColor: 'rgba(8, 56, 185, 0.9)',
			borderColor: 'rgba(8, 56, 185, 0.9)',
			textStyle: {
			color: '#fff',
			fontSize: fontSize(12)
			}
			},
			color: myColor,
			xAxis: {
			type: 'value',
			splitLine: {
			show: false
			},
			axisLine: {
			show: false
			},
			axisLabel: {
			show: false,
			},
			axisTick: {
			show: false
			},
			},
			yAxis: {
			type: 'category',
			data: xDate,
			axisLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(14)
			},
			axisTick: {
			show: false
			},
			},
			series: [
			{
			data: yDate,
			type: 'bar',
			barWidth: '50%',
			barCategoryGap: '80%',
			zlevel: 2,
			cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
			itemStyle: {
			normal: {
			color: color,
			label: {
			show: true, //开启显示
			position: 'right', //在上方显示
			textStyle: { //数值样式
			color: color,
			fontSize: 10
			}
			}
			}
			},
			},
			],
			grid: {
			top: '2%',
			left: '2%',
			// right: '-1%',
			right: '10%',
			bottom: '2%',
			containLabel: true
			}
			}
			})
			},

			equimentDataLength = data.length
			initCountyByMpOptions (xDate, yDate, color = '#2ecc71') {
			const that = this
			return {
			tooltip: {
			trigger: 'item',
			backgroundColor: 'rgba(8, 56, 185, 0.9)',
			borderColor: 'rgba(8, 56, 185, 0.9)',
			textStyle: {
			color: '#fff',
			fontSize: fontSize(12)
			}
			},
			color: myColor,
			xAxis: {
			type: 'category',
			data: xDate,

			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] },
			}
			splitLine: {
			show: false
			},
			axisLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(14)
			},
			axisTick: {
			show: false
			},
			},
			yAxis: {
			type: 'value',
			axisLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(14)
			},
			axisTick: {
			show: false
			},

			res.data.forEach((item) => {
			this.regionTotal = Number(this.regionTotal) + Number(item.count)
			max: Math.max(...yDate.map(item => item.onValue), ...yDate.map(item => item.offValue)) * 1.2
			},
			series: [
			{
			name: '已制牌',
			data: yDate.map(item => ({
			...item,
			value: item.onValue,
			barType: 'on'
			})),
			type: 'bar',
			barWidth: '10',
			barCategoryGap: '60%',
			cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
			itemStyle: {
			normal: {
			color: '#98FB98',
			label: {
			show: true, //开启显示
			position: 'top', //在上方显示
			textStyle: { //数值样式
			color: '#98FB98',
			fontSize: 10
			}
			}
			}
			},
			},

			normalData.value = Number(normalData.value) + Number(item.online)
			{
			name: '未制牌',
			data: yDate.map(item => ({
			...item,
			value: item.offValue,
			barType: 'off'
			})),
			type: 'bar',
			barWidth: '10',
			cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
			itemStyle: {
			normal: {
			color: '#ccc',
			label: {
			show: true, //开启显示
			position: 'top', //在上方显示
			textStyle: { //数值样式
			color: '#ccc',
			fontSize: 10
			}
			}
			}
			},
			},
			],
			grid: {
			top: '2%',
			left: '2%',
			// right: '-1%',
			right: '10%',
			bottom: '2%',
			containLabel: true
			}
			}
			},

			for (let key in typeData) {
			if (item.type == typeData[key]) {
			normalData[key] = Number(item.online)
			faultData[key] = Number(item.offline)
			}
			disposeEchart () {
			if (countByTypeMyChart != null && countByTypeMyChart != '' && countByTypeMyChart != undefined) {
			countByTypeMyChart.clear()
			countByTypeMyChart.dispose()
			countByTypeMyChart.off('click')
			}

			faultData.value = Number(faultData.value) + Number(item.offline)
			})
			if (countByTypeMpMyChart != null && countByTypeMpMyChart != '' && countByTypeMpMyChart != undefined) {
			countByTypeMpMyChart.clear()
			countByTypeMpMyChart.dispose()
			countByTypeMpMyChart.off('click')
			}
			},

			data = [normalData, faultData]
			echartsResize () {
			equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
			eventchangemychart &&
			eventchangemychart != null &&
			eventchangemychart.resize()
			},

			equimentDataLength = data.length
			// 警情统计中时间变化
			async caseTimeChange (e) {
			const date = e.map((item) => {
			return this.dateFormat(item)
			})

			return data
			}
			}).catch(res => {
			dataAll = '请求错误'
			})
			eventchangemychart.clear()

			return dataAll
			},
			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])
			}
			},

			// 现有设备饼图初始化
			async initEquipmentEcharts (type) {
			this.linetype = type
			this.equipmentEchartsLoading = true
			// 设置默认时间
			defaultDate () {
			var current = new Date()

			if (
			equipmentmyChart != null &&
			equipmentmyChart != "" &&
			equipmentmyChart != undefined
			) {
			equipmentmyChart.dispose()
			equipmentmyChart.off("click")
			}
			var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)

			var chartDom = document.getElementById("EquipmentEcharts")
			equipmentmyChart = this.$echarts.init(chartDom)
			this.eventTime = [seven, current] //将值设置给插件绑定的数据
			},

			const data = await this.getEquipment()
			// 获取当前日期
			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
			},

			if (data == '请求错误') {
			setTimeout(() => {
			this.equipmentEchartsLoading = false
			}, 500)
			}
			const newData = data.filter((item) => {
			if (item.value != 0) {
			return item
			}
			})
			// 获取警情统计值
			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: {} }
			}

			equipmentmyChart.setOption(this.initEquipmentOptions(newData))
			eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))

			this.clickEquimentChart()
			setTimeout(() => {
			this.eventChangeEchartsLoading = false
			}, 500)
			})
			},

			if (newData.length > 1) {
			this.equipmentEchartsCarousel()
			} else {
			clearInterval(timer)
			equipmentmyChart.off("mouseover")
			equipmentmyChart.off("mouseout")
			}
			setTimeout(() => {
			this.equipmentEchartsLoading = false
			}, 500)
			},
			// 获取警情社区排行统计值
			getCaseRanking (start, end) {
			getCaseRanking(
			start,
			end,
			this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
			).then((res) => {
			let data = []

			// 现有设备options饼图数据
			initEquipmentOptions (dataArr) {
			return {
			tooltip: {
			trigger: "item",
			confine: true,
			formatter: function (params) {
			let tipHtml = ``
			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 && 'name' in item
			}).filter((item, index) => index < 8).map((item, index) => {
			item.value = item.num

			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 (
			"carCount" in params.data \|\|
			"monitorCount" in params.data \|\|
			"phoneCount" in params.data \|\|
			"recorderCount" in params.data
			eventchangemychart != null &&
			eventchangemychart != "" &&
			eventchangemychart != undefined
			) {
			tipHtml = `

			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 />
			@@ -1316,484 +1439,484 @@
			<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 />`
			(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]
			},
			},
			},
			},
			],
			}
			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",
			]

			// 设备饼图轮播
			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)
			}
			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]
			},
			},
			},
			},
			],
			}
			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"
			)
			}
			})
			},
			},

			// 设备饼图轮播
			equipmentEchartsCarousel () {
			let curIndex = 0
			if (timer) {
			clearInterval(timer)
			}
			destroyed () {
			window.removeEventListener("resize", this.echartsResize)
			this.disposeEchart()

			timer = setInterval(() => {
			equipmentmyChart.dispatchAction({
			type: "downplay",
			seriesIndex: 0,
			dataIndex: curIndex,
			})
			curIndex = (curIndex + 1) % equimentDataLength
			equipmentmyChart.dispatchAction({
			type: "highlight",
			seriesIndex: 0,
			dataIndex: curIndex,
			})
			}, 1000)
			if (equipmentmyChart) {
			equipmentmyChart.dispose()
			equipmentmyChart = 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
			})
			if (eventchangemychart) {
			eventchangemychart.dispose()
			eventchangemychart = null
			}

			equipmentmyChart.on("mouseout", function (param) {
			curIndex = param.dataIndex
			if (timer) {
			clearInterval(timer)
			clearInterval(timer)
			timer = 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"
			)
			if (rightTiming != null) {
			clearInterval(rightTiming)
			rightTiming = null
			}
			})
			},
			},

			destroyed () {
			window.removeEventListener("resize", this.echartsResize)
			this.disposeEchart()

			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;
			position: relative;
			height: 100%;
			width: 100%;

			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;
			.case-box,
			.alert-box,
			.crowd-box {
			position: relative;
			margin: 8px;
			flex: 1;
			background: $sub-tab-bg-color;
			border-radius: 8px;
			cursor: pointer;
			height: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			// background: $bg-color;

			&>div {
			height: 22px;
			line-height: 22px;
			white-space: nowrap;
			}
			}
			}
			background-image: url(/img/box/box-bg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.echarts-box {
			padding: 12px;
			flex: 1;
			// height: 100%;
			// width: 100%;
			}
			// .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;
			// }

			.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;
			:deep(.el-main) {
			padding: 0;
			}

			.el-table__body-wrapper {
			height: 100% !important;
			overflow: hidden;
			.box {
			display: flex;
			position: absolute;
			flex-direction: column;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 11;
			}

			.el-table__body {
			width: 100% !important;
			height: 100% !important;
			.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			tbody {
			width: 100% !important;
			height: 100% !important;
			padding: 0 18px 0 18px;
			position: relative;

			td {
			flex: 1;
			}
			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%;
			}
			}

			.duty-information-box {
			height: 100%;
			.alert-box {
			margin-top: 0;
			margin-bottom: 0;

			&>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;
			.title {
			height: 54px;
			line-height: 54px;
			}

			&>div:first-child {
			width: 28%;
			justify-content: center;
			.echarts-box {
			overflow-x: hidden;
			overflow-y: auto;
			}

			&>div:last-child {
			width: 72%;
			text-align: left;
			:deep(.el-table__header-wrapper) {
			height: 40px;
			}
			}
			}

			.no-zb-data {
			.border-svg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: transparent !important;
			align-items: center;
			display: flex;
			justify-content: center;
			}
			z-index: 1;
			}

			#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>