Vue数据大屏回显相关点位

 

<div class="midone" style="display: flex">
				<div class="img" id="dv" style="margin: auto; height: 90.56px; width: 1447; font-weight: 400">
					<img style="width: 1438px; height: 70px; margin-top: 18px" :src="imgs" alt="" />
					<div class="marker" @click="ck(item)" v-for="(item, i) in images" :key="i" :style="[baseStyles[i]]">
						<img
							@mouseenter="onMouserOver(item)"
							@mouseleave="onMouseout(item)"
							v-if="item.nowdata < item.upperLimit"
							src="../../assets/t1.png"
							alt=""
						/>
						<img
							@mouseenter="onMouserOver(item)"
							@mouseleave="onMouseout(item)"
							v-else="item.nowdata > item.upperLimit"
							src="../../assets/t11.png"
							alt=""
						/>
						<div
							@mouseenter="onMouserOver(item)"
							@mouseleave="onMouseout(item)"
							v-if="item.nowdata < item.upperLimit"
							style="width: 150px; height: 30px; position: relative; margin-top: -45px; margin-left: -15px; color: #2dff57"
						>
							监测值:{{ item.nowdata }}
						</div>

						<div
							@mouseenter="onMouserOver(item)"
							@mouseleave="onMouseout(item)"
							v-else="item.nowdata > item.upperLimit"
							style="width: 150px; height: 30px; position: relative; margin-top: -45px; margin-left: -15px; color: #ff0000"
						>
							监测值:{{ item.nowdata }}
						</div>
						<div
							v-if="item.sensorId == showimgs"
							style="
								border: 1px solid #7fdeff;
								width: 250px;
								height: 110px;
								position: relative;
								margin-top: 20px;
								color: #7fdeff;
							"
						>
							传感器编号:{{ item.sensorCode }}
							<br />
							传感器名称:{{ item.sensorAddress }}
							<br />
							传感器类型:{{ item.sensorType }}
							<br />
							传感器上限值:{{ item.upperLimit }}
							<br />
							传感器下限值:{{ item.lowerLimit }}
						</div>
					</div>
				</div>
			</div>

selectimg(e) {
			
			this.imgs = `${url}` + e.picturePath
			this.images = []
			getOnePictureSensorList(e.pictureId).then((res) => {
				console.log(res.data.sensorList, "ppppp")
				this.dianweilist=res.data.sensorList;
                   this.params.sensorCodes=res.data.sensorList[0].sensorCode
		          this.getsSensorData()
				var divs = document.getElementsByName("marker")
				console.log(divs, 111123)
				for (var i = 0; i < res.data.sensorList.length; i++) {
					this.baseStyles.push({ left: null, top: null, height: null, background: null, position: null })
					this.baseStyles[i].left = res.data.sensorList[i].xPoint + "px"
					this.baseStyles[i].top = res.data.sensorList[i].yPoint + "px"
					this.baseStyles[i].width = "10px"
					this.baseStyles[i].height = "10px"
					this.baseStyles[i].background = "url(../../assets/t1.png)"
					this.baseStyles[i].position = "absolute"
					if(res.data.sensorList[i].sensorCode==this.codes){
                    res.data.sensorList[i].nowdata =this.sensorDatas
					}else{
						res.data.sensorList[i].nowdata=0
					}
					
					console.log(res.data.sensorList[i].nowdata)
					this.images.push(res.data.sensorList[i])
				}
			})
		},