add：大屏离线设备离线设备名称显示模块开发

src/views/Screen/index.vue

 <template>
 	<div class="Screen cm-layout">
+		<!-- 新增：原生模态框 -->
+		<div class="native-modal" :class="{ 'active': showUnListModal }">
+			<div class="modal-mask" @click="closeModal"></div>
+			<div class="modal-content">
+				<div class="modal-header">
+					<h3>离线设备列表</h3>
+					<button class="modal-close" @click="closeModal">×</button>
+				</div>
+				<div class="modal-body" id="unListContainer">
+					<!-- 动态渲染的列表将插入此处 -->
+				</div>
+			</div>
+		</div>
 		<div class="a_0">
 			<!-- <cesium
 				ref="CesiumMap" 
@@ -85,6 +98,9 @@ export default {
 				views:[],
 			},
 			title:'',
+			// 原有数据保持不变
+			showUnListModal: false,  // 控制模态框显示
+			currentUnList: []        // 当前离线设备列表
 		}
 	},
 	mounted() {
@@ -422,10 +438,17 @@ export default {
 					});
 				}else if(type === 't_10'){	// 设备信息
 					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
-						var data = res.body || {};
+						var data = res.body || {}, that = this;
 						panel.info.sum = data.all;
 						panel.info.online = data.online;
 						panel.info.offline = data.unline;
+						
+						// 离线设备点击事件
+						this.currentUnList =  data.unlineList;  // 存储数据
+						this.addLastLiClickEvent();
+						
+
+						
 						var opts = {
 							chartConfig:{
 								chart: {
@@ -623,7 +646,54 @@ export default {
 				next();
 			}, function(){});
 		},
+		 // 新增：为 t_10 类下最后一个 li 添加点击事件
+		 addLastLiClickEvent() {
+			// 定位类名为 t_10 的容器（根据实际 DOM 结构调整选择器）
+			const t10Container = document.querySelector('.t_10');
+			if (!t10Container) return;
+
+			// 获取容器内所有 li 元素
+			const lis = t10Container.getElementsByTagName('li');
+			if (lis.length === 0) return;
+
+			// 取最后一个 li 元素
+			const lastLi = lis[lis.length - 1];
+
+			// 添加点击事件
+			lastLi.addEventListener('click', (event)=> {
+				// 点击事件逻辑（示例）
+				this.showUnListModal = true;    // 显示模态框
+				this.renderUnList()
+				// 可在此处添加自定义业务逻辑（如弹框、数据请求等）
+			});
+		},
+		// 新增：渲染离线设备列表
+		renderUnList() {
+			const container = document.getElementById('unListContainer');
+			container.innerHTML = ''; // 清空旧内容
+			
+			// 创建列表
+			const ul = document.createElement('ul');
+			ul.style.listStyle = 'none';
+			ul.style.padding = '0 15px';
+			
+			this.currentUnList.forEach(item => {
+				const li = document.createElement('li');
+				li.style.padding = '8px 0';
+				li.style.borderBottom = '1px solid #e5e5e5';
+				li.innerHTML = `
+					<span style="width: 40%; display: inline-block;">${item.equipname}</span>
+				`;
+				ul.appendChild(li);
+			});
+			
+			container.appendChild(ul);
+		},
 
+		// 新增：关闭模态框
+		closeModal() {
+			this.showUnListModal = false;
+		},
 		cuCharts(ctn, data, opts){
 			//
 			var cuCharts=function(ctn,data,opts){var ctn=this.ctn=typeof element==="string"?document.getElementById(ctn):ctn;if(!ctn)return console.log('%c cuCharts Error Element is a invalid param! ','color:red');var self=this,setDpr=1;var dpr=window.devicePixelRatio||qf.envir.dpr;self.dpr=dpr*setDpr;self.Cache={};!ctn.style.position&&(ctn.style.position='relative');var canvas=this.canvas=document.createElement("canvas");canvas.style.cssText='position:absolute;height:100%;width:100%;';this.ctx=canvas.getContext("2d");ctn.appendChild(canvas);var defaults=this.defaults={altitude:1000,damHeight:data.dissect.height||100,damWidth:data.dissect.width||100,axisLineWidth:6,axisColor:'red',margin:{top:14,right:0,bottom:0,left:18},};var left=defaults.margin.left*this.dpr,top=defaults.margin.top*this.dpr,right=defaults.margin.right*this.dpr,bottom=defaults.margin.bottom*this.dpr;this.ladders=data.steps||[];this.devices=this.formatDeviceParam(data.devices);var ladderInfo=this.discernDamHeight(this.ladders);this.options={damWidth:defaults.damWidth,damHeight:ladderInfo.damHeight,axisLineWidth:defaults.axisLineWidth||6,stepAverageHeight:ladderInfo.averageHeight,initX:defaults.margin.left*dpr+(defaults.axisLineWidth/2),initY:defaults.margin.top*dpr,bottomDist:defaults.margin.bottom*dpr,rightDist:defaults.margin.right*dpr,waterArea:{startAngle:data.dissect.sdeg,radius:data.dissect.diameter},alarm:data.alarm,axisLineWidth:opts.axisLineWidth||defaults.axisLineWidth,axisColor:opts.axisColor||defaults.axisColor,};this.init()};cuCharts.prototype={init:function(){this.setModule();this.onresize()},drawAxis:function(color,damHeight){var lw=this.options.axisLineWidth;var wHalf=lw/2;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var axisYSX=initX-wHalf;var axisXEY=endY+lw;var axisYEY=endY+wHalf;this.drawLiner({sx:axisYSX,sy:0,ex:axisYSX,ey:axisXEY,width:lw,color:color});var fontY=~~(this.options.damPxHeight/2+this.options.initY);var fontSize=12;var axisXText='剖面高度'+~~damHeight+'米';this.drawText({x:this.options.initY/2+2,y:fontY,size:fontSize,width:fontSize*this.dpr,text:axisXText,color:'#fff',align:'center',vertical:'center',});this.drawLiner({sx:initX,sy:axisYEY,ex:endX,ey:axisYEY,width:lw,color:color})},drawSteps:function(ladders){ladders=ladders||[0];var initX=this.options.initX,initY=this.options.initY;var cumulationX=initX,cumulationY=initY;var damLength=this.options.endX;var damDepth=this.options.endY;var pxRetioY=this.options.pxRetioY;var averageHeight=this.options.stepAverageHeight*pxRetioY;var damPxWidth=this.options.damPxWidth;var damPxHeight=this.options.damPxHeight;var len=ladders.length;var stepWidth=damPxWidth/(len+0);var stepHeight=damPxHeight/(len+0);var slopeRatio=damPxHeight/damPxWidth;var maxStepDepth={ratio:slopeRatio};this.Cache.ladders=[];for(var i=0;i<len;i++){var item=ladders[i];var setWidth=item.width*this.dpr*this.options.pxRetioX;var setHeight=item.height*pxRetioY||averageHeight;var slope=item.slope||0;var aCoord=this.byAngleAndHeightToCoord(slope,setHeight);var fEndX,fEndY;if(setWidth){fEndX=cumulationX+setWidth;stepWidth=(damLength-(cumulationX+setWidth+aCoord.x*this.dpr))/(len-(i+1))}else{fEndX=cumulationX+(stepWidth-aCoord.x*this.dpr)};if(setHeight){fEndY=cumulationY+setHeight;stepHeight=(damDepth-(cumulationY+setHeight))/(len-(i+1))}else{fEndY=cumulationY+stepHeight};var lEndX=fEndX+aCoord.x*this.dpr,lEndY=fEndY+aCoord.y*this.dpr;var stepDepthRatio=(damDepth-~~lEndY)/(damLength-lEndX);if(stepDepthRatio&&stepDepthRatio<maxStepDepth.ratio&&i<len-1){maxStepDepth={ratio:stepDepthRatio,x:lEndX,y:lEndY,}};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,width:2,color:"#8b8b8b"});this.drawLiner({sx:fEndX,sy:cumulationY,ex:lEndX,ey:lEndY,width:2,color:"#8b8b8b"});this.Cache.ladders[i]={sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,slope:slope,slopeX:lEndX,slopeY:lEndY,xy:aCoord.xy};cumulationX=lEndX;cumulationY=lEndY};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:damLength,ey:damDepth,width:2,color:"#8b8b8b"});var damHeight=(cumulationY-this.options.initY)/pxRetioY;return maxStepDepth.damHeight=damHeight,maxStepDepth},drawDevice:function(list){var lineW=4*this.dpr,deviceW=6*this.dpr,deviceH=3*this.dpr;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var ladders=this.Cache.ladders||[];var fontSize=11;var fontTopDev=fontSize*this.dpr+3;this.options.deviceCoords=[];for(var device of list){var holeX=~~(endX-device.x*this.options.pxRetioX);var depthText='埋深'+device.depth+'米';var holeDistY=device.holeDepth*this.options.pxRetioY;var deviceY=device.value*this.options.pxRetioY;var ladderSY=this.xPixelToStepsYPixel(holeX);this.drawText({x:holeX,y:ladderSY-fontTopDev,size:fontSize,text:depthText,color:'red',align:'center',});var holeEndY=ladderSY+holeDistY;holeEndY=holeEndY>endY?endY:holeEndY;this.drawLiner({sx:holeX,sy:ladderSY,ex:holeX,ey:holeEndY,width:lineW,color:"grey"});var deviceLY=ladderSY+deviceY;var deviceEY=deviceLY+(deviceH/2);var deviceSY=deviceEY-deviceH;this.drawLiner({sx:holeX,sy:deviceSY,ex:holeX,ey:deviceEY,width:deviceW,color:"#3403CB"});this.options.deviceCoords.push({x:holeX,y:deviceLY,stepY:ladderSY});var valFont=11;var valueSY=~~(deviceSY-valFont*this.dpr-6);var text='水位值'+device.waterValue+'米';this.drawText({x:holeX,y:valueSY,size:valFont,text:text,color:'white',align:'center',})}},drawAlarmLine:function(alarms,Steps){var alarmValues=alarms.value;var alarmLevel=alarms.alarmLevel;var deviceCoords=this.options.deviceCoords||[];var deviceSX=deviceCoords[0].x;var deviceSY=deviceCoords[0].y;var initX=this.options.initX;var initY=this.options.initY;var endY=this.options.endY;var endX=this.options.endX;var alarmLevelNum=['red','orange','yellow','blue']||Object.keys(alarmValues);var alarmLine={};var level=(~~alarmLevel||alarmLevelNum.length+1)-1;var nearLevel=level?level-1:level;var alarm=alarmLevelNum[level];var nearAlarm=alarmLevelNum[nearLevel];alarmLine[nearAlarm]=alarmValues[nearAlarm];if(alarm){alarmLine[alarm]=alarmValues[alarm]};var alarmRealParam=this.getAlarmRealParam(Object.values(alarmLine))||Steps.ratio;var deviceSlopeRatio=alarmRealParam.ratio;for(var key in alarmLine){var value=alarmValues[key];if(key){var ladderSY=this.xPixelToStepsYPixel(deviceSX)-initX+6;var lineSY=(value*this.options.pxRetioY+ladderSY)-(deviceSX-initX)*deviceSlopeRatio;var lineEX=(endY-lineSY)/deviceSlopeRatio;this.drawLiner({sx:initX,sy:lineSY+initY,ex:lineEX,ey:endY,width:2,color:key})}}},getCirHeightDev:function(r,x){return r-Math.sqrt(Math.pow(r,2)-Math.pow(x,2))},drawWaterArea:function(depth){depth=100;var startAngle=this.options.waterArea.startAngle;var radiusMultiple=this.options.waterArea.radius;var angleRatio=90/0.5;var initArc=startAngle/angleRatio;var ctx=this.ctx,initX=this.options.initX;var arcOrigin=1.50,arcStart=arcOrigin+initArc;var sAngle=(arcStart-arcOrigin)*angleRatio;var r1=this.options['damPxWidth']*radiusMultiple;var waterApexToAxisXDist=Math.sin(sAngle*0.017453293)*r1;var sAngleToTopSpotDist=(r1-(Math.cos(sAngle*0.017453293)*r1));var depth=(depth||30)*this.options.pxRetioY+sAngleToTopSpotDist;var firstDeviceX=this.devices[0].x*this.options.pxRetioX;var ladderSY=this.xPixelToStepsYPixel(firstDeviceX+initX)-initX+6;var deviceToAxisXDist=firstDeviceX+waterApexToAxisXDist;var deviceToAxisYDist=Math.sqrt(r1*r1-deviceToAxisXDist*deviceToAxisXDist);var deviceAreaToApexDev=r1-deviceToAxisYDist-sAngleToTopSpotDist-ladderSY;var firstDeviceY=this.options.damPxHeight-this.devices[0].value*this.options.pxRetioY;firstDeviceY+=deviceAreaToApexDev;var ry=r1+this.options.endY-sAngleToTopSpotDist-firstDeviceY;var lineToY=r1-sAngleToTopSpotDist-firstDeviceY;var eAngle=Math.acos(lineToY/r1)/0.017453293;var arcEnd=eAngle/angleRatio+arcOrigin;ctx.beginPath();ctx.arc(initX-waterApexToAxisXDist,ry,r1,arcStart*Math.PI,arcEnd*Math.PI,false);ctx.lineTo(initX,ry-lineToY);ctx.fillStyle='#00A2E8';ctx.fill()},byAngleAndHeightToCoord:function(angle,height){var devX=Math.tan(angle*0.017453293)*height;var xy=height/Math.cos(angle*0.017453293);var devY=height-devX;var yRatio=height/devX;var x=0,y=0;if(angle>50){x=height,y=devY*yRatio}else{x=devX,y=0};return{x:x,y:y,xy:xy}},discernDamHeight(list){var not=0,set=0,sum=0;for(var item of list){var height=item.height;height?(set++,sum+=height):not++};var damHeight=not?this.defaults.damHeight:sum;var averageHeight=(damHeight-sum)/not;return{averageHeight:averageHeight,damHeight:damHeight}},setModule:function(){this.ctx.clearRect(0,0,this.SumWidth,this.SumHeight);var canvas=this.canvas;var SumWidth=this.SumWidth=(this.ctn.clientWidth*this.dpr)-this.ctn.clientLeft-0;var SumHeight=this.SumHeight=this.ctn.clientHeight*this.dpr-this.ctn.clientTop-0;canvas.width=SumWidth*this.dpr;canvas.height=SumHeight*this.dpr;canvas.style.cssText='position:absolute;top:0;left:0;height:'+(SumHeight)+'px;width:'+SumWidth+'px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;';var top=this.options.initY,left=this.options.initX,bottom=this.options.bottomDist,right=this.options.rightDist;var damPxWidth=SumWidth-(right+left),damPxHeight=SumHeight-(bottom+top+this.options.axisLineWidth),endX=SumWidth-right,endY=SumHeight-bottom-this.options.axisLineWidth;this.options['endX']=endX;this.options['endY']=endY;this.options['damPxWidth']=damPxWidth;this.options['damPxHeight']=damPxHeight;this.options['pxRetioX']=damPxWidth/this.defaults.damWidth;this.options['pxRetioY']=damPxHeight/this.options.damHeight;this.options['HWRation']=(endY-top)/(endX-left);this.drawChart()},formatDeviceParam:function(devices){var devices=devices||[];var arr=[];for(var item of devices){arr.push({x:item.jrx_coord_x,holeDepth:item.jrx_trepanning,value:item.depth,depth:item.jrx_burial,waterValue:item.stage})};return arr},getAlarmRealParam:function(aValues){var aval=aValues[0];var coords=this.options.deviceCoords||[];var valY=aval*this.options.pxRetioY;var sy=valY+coords[0].stepY,sx=coords[0].x,ey=0,ex=0;var len=coords.length;for(var i=1;i<len;i++){var item=coords[i];ey=valY+item.stepY,ex=item.x};return{ratio:(ey-sy)/(ex-sx),sy:sy,ey:ey}},drawChart:function(){var Steps=this.drawSteps(this.ladders);this.drawAxis(this.options.axisColor,Steps.damHeight);var depth=55;this.drawWaterArea(depth);this.drawDevice(this.devices);this.drawAlarmLine(this.options.alarm,Steps)},onresize:function(){qf.resize(()=>{this.setModule()})},updateData:function(data){data=data||{};this.stations=data.stations||this.stations;this.points=data.points||this.points;this.draw(this.cacheX+this.destX,true)},drawLiner:function(o){var ctx=this.ctx;ctx.beginPath();ctx.moveTo(o.sx,o.sy);ctx.lineTo(o.ex,o.ey);ctx.lineWidth=o.width;ctx.strokeStyle=o.color;ctx.stroke()},drawText:function(o){var ctx=this.ctx;var fontSize=(o.size||14)*this.dpr;var text=o.text||'';var textWidth=this.getTextWidth(text,fontSize);var width=o.width||textWidth;var align=o.align||'normal';ctx.font='normal '+fontSize+"px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif";var rows=[];if(width&&~~width<textWidth){var str='',texts=text.split("");for(var word of texts){var testStr=str+word;var testWidth=ctx.measureText(testStr).width;if(testWidth>width){rows.push(str);str=word}else{if(testWidth===width){rows.push(testStr);str=''}else{str=testStr}}};str&&rows.push(str)}else{rows=text.split(/\r\n|\n/g)};var rlen=rows.length,sumHeight=(rlen+1)*fontSize;var x=o.x;var y=o.vertical==='center'?o.y-(sumHeight/2):o.y;var color=o.randomColor?this.getRandomColor():o.color||'red';var lsx=x,lsy=y;for(var b=0;b<rlen;b++){if(align==='center'){var textW=this.getTextWidth(rows[b],fontSize);lsx=x-(textW/2)};lsy=(b+1)*fontSize;ctx.lineHeight=1;ctx.fillStyle=color;ctx.fillText(rows[b],~~lsx+0.5,y+(~~lsy)+0.5)}},getTextWidth:function(text,fontSize){return(this.ctx.measureText(text).width/parseInt(this.ctx.font))*fontSize},drawImg:function(img,x,y,w,h){x=x-w/2;y=y-h;ctx.drawImage(img,x,y,w,h)},getRandomColor:function(){return"#"+Math.floor(Math.random()*16777215).toString(16)},getEventTarget:function(x,y){if(y>bottomReferY-imgA.height-1&&y<bottomReferY+1){var arr=this.points;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}};if(y>bottomReferY-imgB.height-1&&y<bottomReferY+1){var arr=this.stations;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}}},xPixelToStepsYPixel:function(x){var ladders=this.Cache.ladders||[],ladderSY=0;for(var ladder of ladders){if(x>=ladder.sx&&x<ladder.slopeX){if(x<ladder.ex){ladderSY=ladder.sy}else{var slopeWidth=ladder.slopeX-ladder.ex;var slopeHeight=ladder.slopeY-ladder.ey;ladderSY=(x-ladder.ex)*(slopeHeight/slopeWidth)+ladder.ey}}};return ladderSY},};return new cuCharts(ctn,data,opts);
@@ -668,6 +738,69 @@ export default {
 </script>
 
 <style lang="scss" scope>
+	/* 新增原生模态框样式 */
+	.native-modal {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 9999;
+		display: none;
+	}
+
+	.native-modal.active {
+		display: block;
+	}
+
+	.modal-mask {
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.6);
+	}
+
+	.modal-content {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: #fff;
+		border-radius: 8px;
+		min-width: 600px;
+		max-width: 80%;
+		max-height: 80%;
+		overflow-y: auto;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+	}
+
+	.modal-header {
+		padding: 15px 20px;
+		border-bottom: 1px solid #e5e5e5;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.modal-header h3 {
+		margin: 0;
+		font-size: 18px;
+		color: #333;
+	}
+
+	.modal-close {
+		background: none;
+		border: none;
+		font-size: 24px;
+		cursor: pointer;
+		color: #666;
+		padding: 0 8px;
+	}
+
+	.modal-body {
+		padding: 20px;
+		max-height: calc(100vh - 600px);
+		overflow-y: auto;
+	}
 	@font-face {
 		font-family:"diget year";
 		src: url("~@/assets/fonts/DS-Digital.ttf");