moral_fronted.git

			@@ -13,8 +13,7 @@
			class="left"
			:class="{ click: changeColor === index }"
			@click="change(index)"
			>{{ item }}</span
			>
			>{{ item }}</span>
			<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
			<span class="right">{{ times }}秒</span>
			<span class="dropDown">
			@@ -23,170 +22,170 @@
			:src="require('@/assets/images/regionalOverview/realTimeImg.png')"
			alt=""
			@click="turnState"
			/>
			>
			<span class="text_Time">{{ dateFormat }}</span>
			<img class="drop-icon" :src="turnImg" alt="" @click="turnState" />
			<img class="drop-icon" :src="turnImg" alt="" @click="turnState">
			</span>
			</div>
			<div class="topDate" style="height: 60px">
			<div class="jdt" id="eventPro">
			<div id="eventPro" class="jdt">
			<div class="mouseDiv">
			<span class="inText"></span>
			<div class="sjDiv"></div>
			<span class="inText" />
			<div class="sjDiv" />
			</div>
			<div class="mouseDiv2">
			<span class="inText2"></span>
			<div class="sjDiv2"></div>
			<span class="inText2" />
			<div class="sjDiv2" />
			</div>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			</div>
			<div class="timeDiv" style="position: relative">
			<ul id="timeUl">
			<li style="width: 0.83%"></li>
			<li></li>
			<li></li>
			<li style="width: 0.83%" />
			<li />
			<li />
			<li>03</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>06</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>09</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>12</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>15</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>18</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>21</li>
			<li></li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li />
			<!-- -->
			<li></li>
			<li></li>
			<li />
			<li />
			<li>03</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>06</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>09</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>12</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>15</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>18</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>21</li>
			<li></li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li />
			<!-- -->
			<li></li>
			<li></li>
			<li />
			<li />
			<li>03</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>06</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>09</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>12</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>15</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>18</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>21</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>00</li>
			</ul>
			<div
			@@ -197,7 +196,7 @@
			"
			class="dayDiv"
			>
			<p class="p1"></p>
			<p class="p1" />
			<p style="position: relative">
			<span
			class="borderLine"
			@@ -208,8 +207,8 @@
			height: 47px;
			bottom: 0;
			"
			></span>
			<span class="p2"></span>
			/>
			<span class="p2" />
			<span
			class="borderLine"
			style="
			@@ -219,9 +218,9 @@
			height: 47px;
			bottom: 0;
			"
			></span>
			/>
			</p>
			<p class="p3"></p>
			<p class="p3" />
			</div>
			</div>
			</div>
			@@ -264,9 +263,10 @@
			:value="item.value"
			/>
			</el-select>
			<el-button type="primary" @click="alertData(PageSize, currentPage)"
			>查询</el-button
			>
			<el-button
			type="primary"
			@click="alertData(PageSize, currentPage)"
			>查询</el-button>
			</div>
			</div>
			<el-table
			@@ -314,9 +314,10 @@
			@current-change="handleCurrentChange"
			/>
			<div slot="footer" class="dialog-footer">
			<el-button size="mini" @click="alarmTableVisible = false"
			>关闭</el-button
			>
			<el-button
			size="mini"
			@click="alarmTableVisible = false"
			>关闭</el-button>
			</div>
			</el-dialog>
			</div>
			@@ -339,7 +340,7 @@
			weidu: Number,
			jingdu: Number,
			monitorPointId: Number,
			monitorPointIds: Array,
			monitorPointIds: Array
			},
			data() {
			return {
			@@ -388,70 +389,70 @@
			factorOptions: [
			{
			label: '全部因子',
			value: 'all',
			value: 'all'
			},
			{
			label: 'PM10',
			value: 'PM10',
			value: 'PM10'
			},
			{
			label: 'PM2.5',
			value: 'PM2.5',
			value: 'PM2.5'
			},
			{
			label: 'SO2',
			value: 'SO2',
			value: 'SO2'
			},
			{
			label: 'NO2',
			value: 'NO2',
			value: 'NO2'
			},
			{
			label: 'CO',
			value: 'CO',
			value: 'CO'
			},
			{
			label: 'O3',
			value: 'O3',
			},
			value: 'O3'
			}
			],
			alertOptions: [
			{
			label: '全部报警类型',
			value: 'all',
			value: 'all'
			},
			{
			label: '超限',
			value: 'overrun',
			value: 'overrun'
			},
			{
			label: '突然高',
			value: 'sudden',
			value: 'sudden'
			},
			{
			label: '超过国控站点100%',
			value: 'state100',
			value: 'state100'
			},
			{
			label: '超过国控站点150%',
			value: 'state150',
			value: 'state150'
			},
			{
			label: '超过国控站点250%',
			value: 'state250',
			value: 'state250'
			},
			{
			label: '超过市区均值100%',
			value: 'city100',
			value: 'city100'
			},
			{
			label: '超过市区均值150%',
			value: 'city150',
			value: 'city150'
			},
			{
			label: '超过市区均值250%',
			value: 'city250',
			},
			value: 'city250'
			}
			],
			currentDate: '',
			turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
			@@ -463,10 +464,11 @@
			dateInfo: '', // 选择的日期
			timeInfo: '', // 选择的时间
			nyr: '', // 选择的年月日
			windAllDate: []
			}
			},
			computed: {
			...mapGetters(['regionCode']),
			...mapGetters(['regionCode'])
			},
			watch: {
			dateValue(n, o) {
			@@ -475,9 +477,12 @@
			},
			regionCode(newCode, oldCode) {
			this.timerKey = newCode // 用于监听code变化重新渲染子组件
			},
			}
			},
			mounted() {
			this.$nextTick(() => {
			this.getParamsData()
			})
			this.currentHour()
			this.$Bus.$on(
			'alarmTableVisible',
			@@ -497,9 +502,9 @@
			this.jingduNew = newLL[1]
			this.weiduNew = newLL[0]
			// 初始化风场数据
			this.windData()
			this.change(0)
			this.getParamsData()
			// this.windData()
			// this.change(0)

			this.windDir()
			this.newDate()
			// this.alertData(this.PageSize, this.currentPage)
			@@ -682,7 +687,7 @@
			}
			// 鼠标移入移出事件
			for (let i = 0; i < lis.length; i++) {
			lis[i].onmouseenter = function () {
			lis[i].onmouseenter = function() {
			// console.log('mouseenter', i)
			// mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
			mouseDiv.style.transform = 'translateX(-50%)'
			@@ -693,13 +698,13 @@
			inText.innerHTML = times + ':00'
			// console.log(mouseDiv)
			}
			lis[i].onmouseleave = function () {
			lis[i].onmouseleave = function() {
			mouseDiv.style.display = 'none'
			// console.log('移出事件', i)
			}
			}
			for (let i = 0; i < timeLis.length; i++) {
			timeLis[i].onmouseenter = function () {
			timeLis[i].onmouseenter = function() {
			// console.log('mouseenter', i)
			// mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
			mouseDiv.style.left = 1.36986 * i + '%'
			@@ -710,7 +715,7 @@
			inText.innerHTML = times + ':00'
			// console.log(mouseDiv)
			}
			timeLis[i].onmouseleave = function () {
			timeLis[i].onmouseleave = function() {
			mouseDiv.style.display = 'none'
			// console.log('移出事件', i)
			}
			@@ -995,7 +1000,7 @@
			deviceMaker() {
			// 遍历所有图层
			if (this.map) {
			this.map.eachLayer(function (layer) {
			this.map.eachLayer(function(layer) {
			// 卸载之前的风场图层
			if (
			!layer._container &&
			@@ -1015,8 +1020,8 @@
			organizationId: this.$store.state.orgId,
			regionCode: this.$store.state.regionCode,
			chooseTime: this.chooseTime,
			time: this.nyr,
			},
			time: this.nyr
			}
			}).then((data) => {
			// console.log('五分钟设备数据')
			console.log(data, 'tata')
			@@ -1341,23 +1346,23 @@
			// iconUrl: require('@/assets/icon/ico2.png'),
			iconSize: [60, 60],
			iconAnchor: [30, 48],
			className: 'my-device',
			className: 'my-device'
			})
			// 添加标记到地图
			L.marker([lat, lng], {
			icon: blueIcon,
			icon: blueIcon
			}).addTo(group)
			// console.log(JSON.parse(this.keys[i]))
			var myIcon = L.divIcon({
			html: this.keys[i],
			className: 'my-div-icon',
			iconSize: [60, 60],
			iconAnchor: [40, 40],
			iconAnchor: [40, 40]
			})
			var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
			// 给标记添加鼠标移入事件，mouseover事件会冒泡
			var _this = this
			marker.on('mouseover', function (e) {
			marker.on('mouseover', function(e) {
			this.noneData = false
			// $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (res) => {
			// var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{\|}\|"/g, '')
			@@ -1371,8 +1376,8 @@
			params: {
			mac: keyData[i].mac,
			chooseTime: _this.chooseTime,
			time: _this.nyr,
			},
			time: _this.nyr
			}
			})
			.then((res) => {
			if (res.message == '操作目标不存在') {
			@@ -1407,7 +1412,7 @@
			})
			})
			// 给标记点添加鼠标移出事件
			marker.on('mouseout', function (e) {
			marker.on('mouseout', function(e) {
			this.noneData = false
			this.bindPopup().closePopup()
			})
			@@ -1425,8 +1430,8 @@
			method: 'get',
			params: {
			regionCode: 130900,
			sensorCode: 'a34002',
			},
			sensorCode: 'a34002'
			}
			})
			.then((res) => {
			// console.log('国控站信息')
			@@ -1441,19 +1446,19 @@
			// iconUrl:require('@/assets/images/tl_PM10.png'),
			iconSize: [55, 55],
			iconAnchor: [13, 21],
			className: 'my-device',
			className: 'my-device'
			})
			// 添加标记到地图
			L.marker([glat, glng], {
			icon: gIcon,
			icon: gIcon
			}).addTo(group)
			var myIcon = L.divIcon({
			html: gkData[i].data,
			className: 'my-div-icon-g',
			iconSize: 30,
			iconSize: 30
			})
			L.marker([glat, glng], {
			icon: myIcon,
			icon: myIcon
			}).addTo(group)
			}
			})
			@@ -1485,7 +1490,7 @@
			// const that = this
			// 遍历所有图层
			if (this.map) {
			this.map.eachLayer(function (layer) {
			this.map.eachLayer(function(layer) {
			// 卸载之前的风场图层
			if (
			!layer._container &&
			@@ -1522,7 +1527,7 @@
			this.getParamsData()
			setTimeout(() => {
			$.getJSON(
			'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
			'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
			{ monitorPointId: this.$store.state.monitorPointId },
			(data) => {
			// 遍历所有图层
			@@ -1539,14 +1544,14 @@
			}
			)
			}, 1000)
			if (this.windState === 1) {
			// this.ws.close()
			this.initData()
			// console.log('请求风场图')
			} else if (this.windState === 2) {
			this.windDir()
			// console.log('请求风向标')
			}
			// if (this.windState === 1) {
			// console.log('getRegionApiRequest')
			// this.initData()
			// console.log('请求风场图')
			// } else if (this.windState === 2) {
			// this.windDir()
			// console.log('请求风向标')
			// }
			// 请求设备坐标
			// this.deviceMaker()
			// this.getParamsData()
			@@ -1581,14 +1586,14 @@
			}
			// console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')
			// clearInterval(this.timer)
			if (this.windState === 1) {
			// this.ws.close()
			this.initData()
			// console.log('请求风场图')
			} else if (this.windState === 2) {
			this.windDir()
			// console.log('请求风向标')
			}
			// if (this.windState === 1) {
			// this.ws.close()
			// this.initData()
			// console.log('请求风场图')
			// } else if (this.windState === 2) {
			// this.windDir()
			// console.log('请求风向标')
			// }
			setTimeout(() => {
			this.change(this.changeColor)
			this.times = 300
			@@ -1596,6 +1601,21 @@
			}
			}, 1000)
			},

			findLayer(layerName) { // 根据图层名称查找图层
			if (!this.map) {
			return null
			}
			const gisMap_layers = this.map._layers
			let layer = null
			for (const i in gisMap_layers) {
			if (gisMap_layers[i].options.id === layerName) {
			layer = gisMap_layers[i]
			}
			}
			return layer
			},

			// 初始化地图容器
			initMap() {
			// console.log('这是index传到map的经纬度')
			@@ -1607,8 +1627,12 @@
			center: [this.weiduNew, this.jingduNew],
			zoom: 14,
			zoomControl: false, // 缩放组件
			attributionControl: false, // 去掉右下角logol
			crs: L.CRS.EPSG3857, // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84
			trackResize: true,
			worldCopyJump: true,
			dragging: true,
			inertia: true,
			attributionControl: true, // 去掉右下角logol
			crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84
			})
			// 定义图层样式
			L.tileLayer(
			@@ -1617,11 +1641,26 @@
			// L.tileLayer(
			// 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
			// ).addTo(map)
			const that = this
			this.map = map // data上需要挂载

			this.map.on('moveend', function(ev) {
			const res = that.findLayer('wmsid')
			that.map.removeLayer(res)
			that.openWindCanves()
			})
			// this.map.on('viewreset', function() {
			// console.log('--->viewreset 重绘内容时触发')
			// })
			window.map = map
			},
			// 更改不同的值区间
			change(index) {
			if (this.windState === 1) {
			this.initData()
			} else if (this.windState === 2) {
			this.windDir()
			}
			this.changeColor = index
			var pr = ''
			switch (index) {
			@@ -1657,11 +1696,6 @@
			this.sensorKey = pr
			// 请求设备坐标
			// this.toggleWindState()
			if (this.windState === 1) {
			this.initData()
			} else if (this.windState === 2) {
			this.windDir()
			}
			},
			// 请求风场图接口
			initData() {
			@@ -1671,7 +1705,7 @@
			// console.log(this.monitorPointId)
			// 遍历所有图层
			if (this.map) {
			this.map.eachLayer(function (layer) {
			this.map.eachLayer(function(layer) {
			// 卸载之前的风场图层
			if (
			!layer._container &&
			@@ -1682,11 +1716,11 @@
			}
			})
			}
			this.windData()
			this.deviceMaker()
			// console.log('请求风场之前')
			// $.ajaxSettings.async = false
			// for (let i = 0; i < this.monitorPointIds.length; i++) {
			this.windData()
			// }
			},
			// 风场图数据
			@@ -1697,10 +1731,12 @@
			params: {
			monitorPointIds: this.monitorPointIds.toString(),
			chooseTime: this.chooseTime,
			time: this.nyr,
			},
			time: this.nyr
			}
			})
			.then((res) => {
			this.windAllDate = res.data[0]
			this.openWindCanves()
			// console.log('新风场数据')
			// console.log(res)
			// if (res.data[0][0].data.length === 0) {
			@@ -1716,44 +1752,47 @@
			// data2[0].header.dy = 0.0018464922
			// data2[1].header.dy = 0.0018464922
			// console.log(data2, 'data2')
			var velocityLayer = L.velocityLayer({
			displayValues: false, // 是否显示当前鼠标移动位置，风场信息
			displayOptions: {
			// 显示信息配置
			// velocityType: 'Global Wind',
			velocityType: 'GBR Wind',
			displayPosition: 'bottomleft',
			displayEmptyString: 'No wind data',
			},
			data: res.data[0], // 数据格式可参照
			// data: data2,
			// 以下为控制参数，后面为默认值
			minVelocity: 0, // 粒子最小速度（ m/s ）
			maxVelocity: 8, // 粒子最大速度（ m/s ）
			velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
			particleAge: 90, // 粒子在再生之前绘制的最大帧数
			lineWidth: 1.5, // 绘制粒子的线宽
			particleMultiplier: 1 / 300, // 粒子计数标量（粒子密度）
			frameRate: 15, // 每秒所需的帧数
			colorScale: [
			'#A2D839',
			'#7EB530',
			'#6E9F26',
			'#4E7522',
			'#345B1B',
			'#186303',
			'#175103',
			'#053F03',
			],
			// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
			})
			velocityLayer.addTo(this.map) // 添加到图上
			// console.log('风场数据')
			// console.log(res.data[0])
			})
			.catch((err) => {
			console.log(err)
			})
			},
			openWindCanves() {
			var velocityLayer = L.velocityLayer({
			displayValues: true, // 是否显示当前鼠标移动位置，风场信息
			id: 'wmsid',
			displayOptions: {
			// 显示信息配置
			// velocityType: 'Global Wind',
			velocityType: 'GBR Wind',
			displayPosition: 'bottomleft',
			displayEmptyString: 'No wind data'
			},
			data: this.windAllDate, // 数据格式可参照
			// data: data2,
			// 以下为控制参数，后面为默认值
			minVelocity: 0, // 粒子最小速度（ m/s ）
			maxVelocity: 8, // 粒子最大速度（ m/s ）
			velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
			particleAge: 90, // 粒子在再生之前绘制的最大帧数
			lineWidth: 1.5, // 绘制粒子的线宽
			particleMultiplier: 1 / 300, // 粒子计数标量（粒子密度）
			frameRate: 15, // 每秒所需的帧数
			colorScale: [
			'#A2D839',
			'#7EB530',
			'#6E9F26',
			'#4E7522',
			'#345B1B',
			'#186303',
			'#175103',
			'#053F03'
			]
			// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
			})
			velocityLayer.addTo(this.map) // 添加到图上
			},
			// 将页码，及每页显示的条数以参数传递提交给后台
			alertData(n1, n2) {
			@@ -1770,8 +1809,8 @@
			startTime: this.dateValue[0],
			endTime: this.dateValue[1],
			index: this.factorValue,
			alarmType: this.alartValue,
			},
			alarmType: this.alartValue
			}
			}).then((res) => {
			// console.log('分页数据')
			// console.log(res)
			@@ -1832,8 +1871,8 @@
			},
			closeAlarmTableVisible() {
			this.$store.state.alarmTableVisible = false
			},
			},
			}
			}
			}
			</script>