srs-police-affairs.git

			@@ -1,90 +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="duty-information-box" v-show="!showMJL">
			<div v-for="item in schedulingList" :key="item.id">
			<div>
			<span>{{ item.type }}</span>
			</div>
			<div>
			<span>{{ item.person }}</span>
			</div>
			</div>
			<div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
			</div>

			<div class="duty-information-box" v-show="showMJL">
			<div>
			<div>
			<span>值班</span>
			</div>
			<div>
			<span>徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬</span>
			</div>
			</div>
			<div>
			<div>
			<span>副班、巡逻</span>
			</div>
			<div>
			<span>章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥</span>
			</div>
			</div>
			<div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
			</div>
			</div>

			<svg class="border-svg">
			<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
			repeatCount="indefinite" />
			</use>
			</svg>
			<div 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 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 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">
			@@ -112,46 +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
			@@ -169,907 +166,911 @@
			const timeEvents = []

			export default {
			inject: ["userInfo"],
			data () {
			return {
			eventTime: [],
			equipmentEchartsLoading: false,
			eventChangeEchartsLoading: false,
			schedulingNoDataText: ' ',
			schedulingLoading: false,
			pickerOptions: {
			shortcuts: [
			{
			text: '最近一周',
			onClick (picker) {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
			picker.$emit('pick', [start, end])
			}
			},
			{
			text: '最近两周',
			onClick (picker) {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
			picker.$emit('pick', [start, end])
			}
			},
			{
			text: '最近一个月',
			onClick (picker) {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			picker.$emit('pick', [start, end])
			}
			},
			{
			text: '最近三个月',
			onClick (picker) {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			picker.$emit('pick', [start, end])
			}
			}]
			},
			regionTotal: 0,
			linetype: 0,
			tableHeight: 0,
			schedulingList: [],
			schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
			policeStaionID: "",
			showMJL: false,
			originTitle: ['值班', '副班、巡逻'],
			transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
			caseInfoType: 0
			}
			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,
			isPage: 1
			}

			this.showMJL = false
			getSchedulingList(params).then((res) => {
			this.schedulingList = res.data.data
			})

			setTimeout(() => {
			this.schedulingNoDataText = ' '
			this.schedulingLoading = false
			if (!this.schedulingList.length) {
			setTimeout(() => {
			this.schedulingNoDataText = '暂无值班数据'
			}, 200)
			}
			}, 500)
			item.itemStyle = {
			color: '#395FFD'
			}
			}
			},

			echartsResize () {
			equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
			eventchangemychart &&
			eventchangemychart != null &&
			eventchangemychart.resize()
			},
			return item
			}).sort((a, b) => b.value - a.value)

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

			eventchangemychart.clear()
			eventchangemychart.setOption(this.initRankingOption(data))

			if (this.caseInfoType == 0) {
			this.getCaseAll(date[0], date[1])
			} else if (this.caseInfoType == 1) {
			this.getCaseRanking(date[0], date[1])
			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 {
			this.getCaseRankingArea(date[0], date[1])
			item.itemStyle = {
			color: '#395FFD'
			}
			}
			},

			// 设置默认时间
			defaultDate () {
			var current = new Date()
			return item
			})

			var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
			data = res.data.data
			} else {
			data = []
			}

			this.eventTime = [seven, current] //将值设置给插件绑定的数据
			},
			eventchangemychart.setOption(this.initRankingOption(data))

			// 获取当前日期
			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
			},
			setTimeout(() => {
			this.eventChangeEchartsLoading = false
			}, 500)
			})
			},

			// 获取警情统计值
			getCaseAll (start, end) {
			getCaseAll(
			start,
			end,
			this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
			).then((res) => {
			let obj = {}
			if (res.data.timeList) {
			console.log(res.data, 1111)
			let yDataList = {}
			yDataList.dqList = res.data.dqList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.zpList = res.data.zpList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.jfList = res.data.jfList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.qtList = res.data.qtList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.qjList = res.data.qjList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.sdList = res.data.sdList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.sduList = res.data.sduList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.shList = res.data.shList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			let xData = res.data.timeList.map(item => item.slice(5, 10))
			obj = { xData, yDataList }
			} else {
			obj = { xData: [], yDataList: {} }
			// 初始化警情数量统计
			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")
			}
			}

			eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))

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

			// 获取警情社区排行统计值
			getCaseRanking (start, end) {
			getCaseRanking(
			start,
			end,
			this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
			).then((res) => {
			let data = []

			if (res.data.data) {
			res.data.data = res.data.data.sort((a, b) => b.value - a.value)
			res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => {
			item.value = item.count

			if (index == 0) {
			item.itemStyle = {
			color: '#EB3C5A'
			}
			} else if (index == 1) {
			item.itemStyle = {
			color: '#FA8331'
			}
			} else if (index == 2) {
			item.itemStyle = {
			color: '#F7B833'
			}
			} else {
			item.itemStyle = {
			color: '#395FFD'
			}
			}

			return item
			}).sort((a, b) => b.value - a.value)

			data = res.data.data
			} else {
			data = []
			}
			},
			{//名称
			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)
			}

			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()

			},
			label: {
			show: true,
			fontSize: fontSize(10),
			color: "#fff"
			}
			}
			],
			grid: {
			top: "3%",
			left: "-14%",
			right: "2%",
			bottom: "3%",
			containLabel: true,
			}
			}
			}

			var chartDom = document.getElementById("EventChangeEcharts")
			eventchangemychart = this.$echarts.init(chartDom)
			return option
			},

			const date = this.eventTime.map((item) => {
			return this.dateFormat(item)
			})
			// 现有设备统计
			getEquipment () {
			const typeData = {
			carCount: "警车",
			monitorCount: "摄像头",
			phoneCount: "执法记录仪",
			recorderCount: "手台",
			}

			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])
			}
			},
			const typeIndexData = {
			警车: 0,
			摄像头: 1,
			手台: 2,
			执法记录仪: 3,
			}

			// 警情数量统计的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",
			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

			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 = ``
			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 />
			@@ -1083,483 +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;
			}
			}

			.no-zb-data {
			width: 100%;
			height: 100%;
			background: transparent !important;
			align-items: center;
			display: flex;
			justify-content: center;
			}
			}

			#peopleList {
			height: 100%;
			}
			}
			}

			.alert-box {
			margin-top: 0;
			margin-bottom: 0;
			.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>

	src/styles/media/index.scss	4 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/rightContainer.vue	2801 ●●●●● patch \| view \| raw \| blame \| history
	src/views/house/index.vue	14 ●●●●● patch \| view \| raw \| blame \| history

			@@ -2,7 +2,7 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2022-08-18 16:18:17
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2025-01-08 15:53:43
			* @LastEditTime: 2025-01-16 12:02:41
			* @FilePath: \srs-police-affairs\src\views\house\index.vue
			* @Description: 小区-栋-层-房屋
			*
			@@ -1090,18 +1090,18 @@
			buildingInfo: {},
			businessChooseItem: {},
			isBusinessHoverShow: false,
			hushiPeoTy: 1,
			hushiPeoTy: 2,
			residentIdSave: '',
			// 菜单列表
			menuList: [
			{
			label: "户籍人口",
			value: 1,
			label: "实有人口",
			value: 2,
			isHover: true,
			},
			{
			label: "实有人口",
			value: 2,
			label: "户籍人口",
			value: 1,
			isHover: true,
			},
			{
			@@ -2013,7 +2013,7 @@
			},

			residentDetailsClose () {
			this.hushiPeoTy = 1
			this.hushiPeoTy = 2
			this.residentDetailsShow = false
			this.residentDetailsType = 1
			},

			@@ -88,8 +88,10 @@
			.case-box {

			.duty-information-box {
			padding: countSizeVh(16);
			margin: countSizeVh(16);
			flex: 1;
			overflow: hidden;
			overflow-y: auto;

			&>div {
			padding: countSizeVh(10);