~admin/srs-police-affairs.git

New file
			@@ -0,0 +1,725 @@
			<!--
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2022-08-18 16:18:17
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2022-09-19 18:29:26
			* @FilePath: \srs-police-affairs\src\views\home\index.vue
			* @Description: 小区-栋-层-房屋
			*
			* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
			-->

			<template>
			<div class="container">
			<div class="left-container">
			<div class="person-box">
			<div class="title">
			<div class="one-level">现有人员</div>
			<!-- <div class="two-level">现有人员</div> -->
			</div>

			<div class="sub-title">
			<div class="one-level">实有人口总数</div>
			<div class="two-level">183.16万人</div>
			</div>

			<div class="sub-tab">
			<div class="tab">
			<div class="num">164.57万人</div>
			<div class="type">户籍人口</div>
			</div>
			<div class="tab">
			<div class="num">17.52万人</div>
			<div class="type">流动人口</div>
			</div>
			<div class="tab">
			<div class="num">91995人</div>
			<div class="type">境外人口</div>
			</div>
			</div>

			<div id="PersonEcharts" class="echarts-box"></div>
			</div>
			<div class="land-box">
			<div class="title">
			<div class="one-level">现有房屋</div>
			<!-- <div class="two-level">现有房屋</div> -->
			</div>

			<div class="sub-tab">
			<div class="tab">
			<div class="num">1822603户</div>
			<div class="num">实有房屋</div>
			</div>
			<div class="tab">
			<div class="num">634个</div>
			<div class="num">关注场所</div>
			</div>
			</div>

			<div id="LandEcharts" class="echarts-box"></div>
			</div>
			<div class="equipment-box">
			<div class="title">
			<div class="one-level">现有设备</div>
			<!-- <div class="two-level">现有设备</div> -->
			</div>

			<div id="EquipmentEcharts" class="echarts-box"></div>
			</div>
			</div>
			<div class="right-container">
			<div class="case-box">
			<div class="title">
			<div class="one-level">警情动态</div>
			<div class="two-level">当前16</div>
			</div>

			<div id="EventChangeEcharts" class="echarts-box"></div>
			</div>
			<div class="alert-box">
			<div class="title">
			<div class="one-level">警情历史(近一年)</div>
			<!-- <div class="two-level">历史累计</div> -->
			</div>

			<!-- <div class="sub-title">
			<div class="one-level">警情、案事件总量</div>
			<div class="two-level">555578起</div>
			</div>-->

			<div id="EventCountEcharts" class="echarts-box"></div>
			</div>
			<div class="crowd-box">
			<div class="title">
			<div class="one-level">重点稳控/服务人群</div>
			<div class="two-level">当前38</div>
			</div>

			<div id="peopleList" class="echarts-box">
			<el-table
			:data="arr"
			style="width: 100%"
			:header-cell-style="{'text-align':'center','background-color':'#00204f','borderColor':'#073365'}"
			:cell-style="{'text-align':'center','borderColor':'#073365'}"
			:row-class-name="tableRowClassName"
			>
			<el-table-column prop="type" label="人员类型" width="80"></el-table-column>
			<el-table-column prop="num" label="人数" width="180"></el-table-column>
			<el-table-column prop="radio" label="占比" width="120"></el-table-column>
			</el-table>
			</div>
			</div>
			</div>

			<div class="center-container">
			<div class="layers-control-btn">
			<el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
			</div>
			<div class="layers-control-btn">
			<el-checkbox v-model="carLayerShow">警车</el-checkbox>
			</div>
			<div class="layers-control-btn">
			<el-checkbox v-model="phoneLayerShow">手台</el-checkbox>
			</div>
			<div class="layers-control-btn">
			<el-checkbox v-model="videoLayerShow">监控</el-checkbox>
			</div>
			<div class="layers-control-btn">
			<el-checkbox v-model="panoramaLayerShow">全景</el-checkbox>
			</div>
			</div>
			<div class="top-container">
			<div class="selectBox">
			<div class="choose" v-if="oneSelected==''">请选择</div>
			<select id="one" v-model="oneSelected">
			<option v-for="(value,key) in chooseData" :key="key">{{key}}</option>
			</select>
			</div>
			<div class="selectBox">
			<div class="choose" v-if="twoSelected==''">请选择</div>
			<select name id="two" v-model="twoSelected">
			<option v-for="(value,key) in twoChooseData" :key="key">{{key}}</option>
			</select>
			</div>
			<div class="selectBox">
			<div class="choose" v-if="threeSelected==''">请选择</div>
			<select name id="three" v-model="threeSelected">
			<option v-for="(item,index) in threeChooseData" :key="index">{{item}}</option>
			</select>
			</div>
			</div>
			</div>
			</template>

			<script>
			export default {
			data () {
			return {
			navType: 0,
			houseLayerShow: false,
			carLayerShow: false,
			phoneLayerShow: false,
			videoLayerShow: false,
			panoramaLayerShow: false,
			arr: [{ 'type': '孤寡老人', 'num': '0', 'radio': '0.00%' }, { 'type': '邪教人员', 'num': '1', 'radio': '2.00%' }, { 'type': '上访人员', 'num': '8', 'radio': '14.00%' }, { 'type': '涉毒', 'num': '15', 'radio': '27.00%' }, { 'type': '留守儿童', 'num': '6', 'radio': '11.00%' }, { 'type': '重点青少年', 'num': '5', 'radio': '9.00%' }],
			chooseData: {},
			oneSelected: '',
			twoSelected: '',
			threeSelected: '',
			twoChooseData: {},
			threeChooseData: [],
			}
			},
			created () {
			},
			mounted () {
			this.getChooseData()
			this.initPersonEcharts()
			this.initLandEcharts()
			this.initEquipmentEcharts()
			this.initEventChangeEcharts()
			this.initEventCountEcharts()
			this.$nextTick(() => {
			let position = [
			[
			[115.935114, 28.627012, 100],
			[115.930150, 28.733535, 100],
			[115.986738, 28.683523, 100],
			[116.015526, 28.647454, 100],
			]
			]

			position.forEach((item) => {
			let str = ''
			item.forEach(it => {
			str = str + `${it[0]},${it[1]},${it[2]};`
			})

			this.$EventBus.$emit('layerPolygonAdd', {
			layerName: 'polygonLayer',
			positions: str,
			material: global.DC.Namespace.Cesium.Color.fromBytes(
			3,
			255,
			13,
			10
			),
			})
			})
			})
			},
			updated () {
			},
			methods: {
			navClick (e) {
			this.navType = e.target.dataset.type
			},
			initPersonEcharts () {
			var chartDom = document.getElementById('PersonEcharts')
			var myChart = this.$echarts.init(chartDom)
			var option

			option = {
			xAxis: {
			type: 'category',
			data: ['湖北', '上海', '北京', '广东', '浙江'],
			},
			yAxis: {
			type: 'value',
			splitLine: {
			show: true,
			lineStyle: {
			color: "rgba(0,0,255,0.1)"
			}
			}
			},
			series: [
			{
			data: [6414, 4231, 2211, 1231, 881],
			type: 'bar',
			itemStyle: {
			normal: {
			label: {
			show: true,
			position: 'top',
			textStyle: {
			color: '#1a94a8',
			fontSize: 16
			}
			}
			}
			}
			}
			],
			grid: {
			x: 40,
			y: 10,
			x2: 20,
			y2: 20
			},
			}

			option && myChart.setOption(option)
			window.addEventListener("resize", function () {
			myChart.resize()
			})
			},
			initLandEcharts () {
			var chartDom = document.getElementById('LandEcharts')
			var myChart = this.$echarts.init(chartDom)
			var option

			option = {
			color: ['#2967c4', '#112d54'],
			xAxis: {
			type: 'value',
			splitLine: {
			show: true,
			lineStyle: {
			color: "rgba(0,0,255,0.1)"
			}
			},
			axisLine: {
			show: false
			},
			axisLabel: {
			show: false
			},
			axisTick: {
			show: false
			},

			},
			yAxis: {
			type: 'category',
			data: ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业'],
			axisLine: {
			show: false
			},
			axisTick: {
			show: false
			},

			},
			series: [
			{
			data: [54, 77, 97, 141, 191],
			type: 'bar',
			zlevel: 2,
			},
			{
			data: [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }],
			type: 'bar',
			barGap: '-100%',
			label: {
			show: true,
			color: '#fff',
			position: 'right', // 标签右对齐
			distance: 5,// 标签距离柱条的距离
			formatter: params => {
			return params.data.realValue + '个'
			}
			}
			}
			],
			grid: {
			x: 70,
			y: 10,
			x2: 10,
			y2: 20
			},
			}

			option && myChart.setOption(option)
			},
			initEquipmentEcharts () {
			var chartDom = document.getElementById('EquipmentEcharts')
			var myChart = this.$echarts.init(chartDom)
			var option
			var regionTotal = 0
			let dataArr = [
			{ value: 21438, name: '未知' },
			{ value: 4664, name: '固定枪机' },
			{ value: 310, name: '固定球机' },
			{ value: 279, name: '可控球机' },
			{ value: 241, name: '卡口枪机' },
			{ value: 5, name: '云台枪机' }
			]
			for (let i = 0; i < dataArr.length; i++) {
			regionTotal += dataArr[i].value
			}
			console.log(regionTotal)
			option = {
			title: {
			show: true,
			text: ['{a\|摄像头总数}', `{b\|${regionTotal}个}`].join(' '), // 主副标题
			left: 'left',
			textStyle: {
			rich: {
			a: {
			fontWeight: 'normal',
			fontSize: 16,
			color: '#fff'
			},
			b: {
			fontSize: 22,
			fontWeight: 'bolder',
			color: '#fff'
			}
			}
			}
			},
			tooltip: {
			trigger: 'item'
			},
			legend: {
			left: '55%',
			y: '20%',
			itemGap: 10,
			textStyle: {
			color: '#fff'
			},
			formatter: function (name) {
			let data = option.series[0].data
			let tarValue
			for (let i = 0; i < data.length; i++) {
			if (data[i].name == name) {
			tarValue = data[i].value
			}
			}
			let v = tarValue
			return `${name} ${v} 个 `
			},
			},
			series: [
			{
			name: 'Access From',
			type: 'pie',
			radius: ['40%', '70%'],
			center: ['27%', '57%'],
			avoidLabelOverlap: false,
			label: {
			show: false,
			position: 'center'
			},
			emphasis: {
			label: {
			show: true,
			fontSize: '40',
			fontWeight: 'bold'
			}
			},
			labelLine: {
			show: false
			},
			data: dataArr
			}
			],
			grid: {
			x: 10,
			y: 10,
			x2: 10,
			y2: 20
			},
			}

			option && myChart.setOption(option)
			},
			initEventChangeEcharts () {
			var chartDom = document.getElementById('EventChangeEcharts')
			var myChart = this.$echarts.init(chartDom)
			var option

			option = {
			xAxis: {
			type: 'category',
			data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1']
			},
			yAxis: {
			type: 'value',
			splitLine: {
			show: true,
			lineStyle: {
			color: "rgba(0,0,255,0.1)"
			}
			},
			},
			series: [
			{
			data: [0, 1, 0, 2, 0, 1, 0],
			type: 'line'
			}
			],
			grid: {
			x: 30,
			y: 40,
			x2: 10,
			y2: 20
			},
			}

			option && myChart.setOption(option)

			},
			initEventCountEcharts () {
			var chartDom = document.getElementById('EventCountEcharts')
			var myChart = this.$echarts.init(chartDom)
			var option

			option = {
			tooltip: {
			trigger: 'item'
			},
			legend: {
			left: '75%',
			y: '10%',
			itemGap: 25,
			textStyle: {
			color: '#fff' // 图例文字颜色
			}
			},
			series: [
			{
			name: 'Access From',
			type: 'pie',
			radius: ['40%', '70%'],
			center: ['40%', '60%'],
			avoidLabelOverlap: false,
			label: {
			show: false,
			position: 'center'
			},
			emphasis: {
			label: {
			show: true,
			fontSize: '40',
			fontWeight: 'bold'
			}
			},
			labelLine: {
			show: false
			},
			data: [
			{ value: 4659154, name: '入室盗窃' },
			{ value: 916685, name: '抢劫抢夺' },
			{ value: 916685, name: '汽车被盗' },
			{ value: 916685, name: '交通事故' },
			{ value: 916685, name: '打架斗殴' },
			{ value: 916685, name: '走失人口' }
			]
			}
			],
			grid: {
			x: 10,
			y: 10,
			x2: 10,
			y2: 20
			},
			}

			option && myChart.setOption(option)
			},
			houseChange (e) {
			if (e == true) {
			this.$EventBus.$emit('addMxTileset', {
			titlesetName: 'sdTilesetLayer',
			titlesetUrl: "/sd/tileset.json"
			})
			} else {
			this.$EventBus.$emit('removeMxTileset', {
			titlesetName: 'sdTilesetLayer'
			})
			}
			},
			getChooseData () {
			let arr1 = ['一区', '二区', '三区']
			let arr2 = ['1所', '2所', '3所']
			let arr3 = ['A小区', 'B小区', 'C小区']
			console.log(arr1, arr2, arr3)
			var obj = {}
			for (let i = 0; i < 3; i++) {
			obj[arr1[i]] = {}
			for (let j = 0; j < 3; j++) {
			let str = arr1[i] + arr2[j]
			console.log('str', str)
			obj[arr1[i]][str] = []
			for (let k = 0; k < 3; k++) {
			obj[arr1[i]][str].push(str + arr3[k])
			}
			}
			}
			this.chooseData = obj
			console.log(obj)
			}
			},
			watch: {
			oneSelected (item1, item2) {
			console.log(item2)
			this.twoChooseData = this.chooseData[item1]
			// this.twoSelected = ''
			console.log('twoSelected', this.twoSelected)

			},
			twoSelected (item1, item2) {
			console.log(item2)
			this.threeChooseData = this.twoChooseData[item1]
			}
			}
			}
			</script>

			<style scoped lang="scss">
			.container {
			color: #fff;

			.left-container {
			position: fixed;
			top: 80px;
			left: 0;
			width: 400px;
			height: calc(100% - 80px);
			background: rgba(7, 22, 37, 0.8);

			.person-box {
			height: 40%;
			}

			.land-box,
			.equipment-box {
			height: 30%;
			}
			}

			.right-container {
			position: fixed;
			top: 80px;
			right: 0;
			width: 400px;
			height: calc(100% - 80px);
			background: rgba(7, 22, 37, 0.8);

			.case-box {
			height: 30%;
			}

			.alert-box,
			.crowd-box {
			height: 35%;
			.el-table__row.statistics-warning-row {
			background: #ff0000;
			}
			}
			::v-deep .el-table tr:nth-child(2n) {
			background: #03254c;
			color: #fff;
			}
			::v-deep .el-table tr:nth-child(2n-1) {
			background: #26426a;
			color: #fff;
			}
			::v-deep .el-table tr:hover td {
			color: #000;
			}
			}

			.left-container,
			.right-container {
			.person-box,
			.land-box,
			.equipment-box,
			.case-box,
			.alert-box,
			.crowd-box {
			display: flex;
			flex-direction: column;
			padding: 10px;

			.title {
			display: flex;
			justify-content: space-between;
			height: 40px;
			}

			.sub-title {
			display: flex;
			justify-content: space-between;
			height: 36px;
			}

			.sub-tab {
			display: flex;

			.tab {
			margin: 0 10px;
			flex: 1;
			background: rgba(5, 21, 38, 0.8);
			border: 1px solid #fff;

			& > div {
			height: 26px;
			line-height: 26px;
			}
			}
			}

			.echarts-box {
			flex: 1;
			}

			.sub-tab + .echarts-box {
			margin-top: 10px;
			}
			}
			}

			.center-container {
			display: flex;
			position: fixed;
			left: 50%;
			bottom: 80px;
			transform: translate(-50%, 0);

			.layers-control-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 10px;
			width: 160px;
			height: 60px;
			background: rgba(7, 22, 37, 0.8);
			}
			}
			.top-container {
			position: fixed;
			display: flex;
			top: 80px;
			left: 400px;
			width: 650px;
			height: 60px;
			text-align: left;
			select {
			position: relative;
			background-color: #11335d;
			width: 200px;
			height: 40px;
			border: 2px solid #2c7dd4;
			color: #fff;
			border-radius: 4px;
			margin-top: 5px;
			margin-left: 5px;
			}
			.choose {
			position: absolute;
			top: 13px;
			left: 11px;
			color: #fff;
			z-index: 22;
			cursor: default;
			}
			.selectBox {
			position: relative;
			}
			}
			}
			</style>