-
-
+
+
+ 
农田污染监测站
-
-
-
-
-
-
-
-
企业信息
@@ -221,21 +234,21 @@
-
@@ -543,7 +529,6 @@ export default {
pestLightCount: 0,
stationCount0: 0,
stationCount1: 0,
- // showData:[],
dialogTableVisible: false,
qcdialogTableVisible: false,
qcdtdialogTableVisible: false,
@@ -579,6 +564,13 @@ export default {
soilDataId: '',
tabsLoading: false,
lastZIndex: 1,
+
+ // ===== 新增：企业悬浮框相关 =====
+ entList: [], // 企业列表
+ entSearchKey: '', // 搜索关键字
+ entPanelVisible: true, // 悬浮框显示
+ entPanelCollapsed: true, // 是否折叠
+ entMarkerMap: {}, // 企业标识 -> marker
};
},
created() {
@@ -587,48 +579,52 @@ export default {
computed: {
classOption() {
return {
- step: 0.6, // 数值越大速度滚动越快
- limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
- hoverStop: true, // 是否开启鼠标悬停stop
- direction: 1, // 0向下 1向上 2向左 3向右
- openWatch: true, // 开启数据实时监控刷新dom
- singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
- singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
- waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+ step: 0.6,
+ limitMoveNum: 3,
+ hoverStop: true,
+ direction: 1,
+ openWatch: true,
+ singleHeight: 0,
+ singleWidth: 0,
+ waitTime: 1000,
};
},
classWrwcod() {
return {
- step: 0.2, // 数值越大速度滚动越快
- limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
- hoverStop: true, // 是否开启鼠标悬停stop
- direction: 1, // 0向下 1向上 2向左 3向右
- openWatch: true, // 开启数据实时监控刷新dom
- singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
- singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
- waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+ step: 0.2,
+ limitMoveNum: 6,
+ hoverStop: true,
+ direction: 1,
+ openWatch: true,
+ singleHeight: 0,
+ singleWidth: 0,
+ waitTime: 1000,
};
},
showOption() {
return {
- step: 0.5, // 数值越大速度滚动越快
- limitMoveNum: 0, // 开始无缝滚动的数据量 this.dataList.length
- hoverStop: true, // 是否开启鼠标悬停stop
- direction: 1, // 0向下 1向上 2向左 3向右
- openWatch: true, // 开启数据实时监控刷新dom
- singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
- singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
- waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+ step: 0.5,
+ limitMoveNum: 0,
+ hoverStop: true,
+ direction: 1,
+ openWatch: true,
+ singleHeight: 0,
+ singleWidth: 0,
+ waitTime: 1000,
};
},
+ // ===== 新增：根据关键字过滤企业列表 =====
+ filteredEntList() {
+ const key = (this.entSearchKey || '').trim().toLowerCase();
+ if (!key) return this.entList || [];
+ return (this.entList || []).filter(item => {
+ const name = (item.entName || item.name || '').toLowerCase();
+ return name.indexOf(key) !== -1;
+ });
+ }
},
mounted() {
console.log('开始初始化！！！！')
- // setTimeout(() => {
- // this.$nextTick(() => {
- // this.indexinfor();
- // })
- // }, 2000)
// 实时时间
let that = this;
setTimeout(() => {
@@ -639,23 +635,11 @@ export default {
item.latitude = item.entLat;
item.name = item.entName;
item.picUrl = 'temp/enticon.png';
- item.width = 0 ;
+ item.width = 0;
item.height = 0;
- // zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1),
- // icon: this.urlimg + item.picUrl,
- // position: [item.longitude, item.latitude],
- // offset: new AMap.Pixel(item.width, item.height),//偏移量
- // title: item.name,
return item;
});
- // ids: item.ids,
- // extPics: item.extPics,
- // notes: item.notes,
- // name: item.name,
- // item: item,
- // stationType: item.type
- //
- console.log(that.entList,'111222')
+ console.log(that.entList, '111222')
that.$nextTick(() => {
that.initMap(that.iniZoomData, that.isShowLightNumber);
})
@@ -672,7 +656,7 @@ export default {
this.initSoilData();
},
methods: {
- initSoilData(){
+ initSoilData() {
// getSoilSummry({deployIds:['1679816733238575105'], "summrayMode":"dayhours"}).then(res=>{
// console.log(res)
// })
@@ -682,12 +666,11 @@ export default {
},
sbdscdBtn() {
var url = 'https://wlw.zklsfk.com/admin/index?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLmsrPmtKXluILlhpzkuJrlhpzmnZHlsYAiLCJleHAiOjE2ODk2MjU0ODUsImlhdCI6MTY4ODEzMDI1NiwianRpIjoiNTcxMTY5MTAtODczZC00ZjI1LWFkNzItZjA2NWU3NmFkNDIwIn0.52iF21xidGFllgfcsSgN-cLlysI0W7Ad8ie48LsV9x4'
- //跳转1
window.open(url, "_blank");
},
mapTypeSwitch() {
this.mapTypeFlag = !this.mapTypeFlag
- if (this.mapTypeFlag == true) {//正常模式
+ if (this.mapTypeFlag == true) {
this.zoomData = 14
if (this.isShowLight == undefined) {
let isShowLight = '1'
@@ -701,7 +684,7 @@ export default {
this.doGetIndexSummry({index: 0});
})
}, 1000)
- } else {// 地图模式
+ } else {
this.zoomData = 15
if (this.isShowLight == undefined) {
this.initMap(this.zoomData, '1');
@@ -720,7 +703,6 @@ export default {
this.briefconValue = res.result.project_brief.detailList
this.pestLightCount = res.result.pestLightCount
this.stationCount0 = res.result.stationCount[0].stationCount
- // this.stationCount1 = res.result.stationCount[1].stationCount
this.climate_env = res.result.climate_env.detailList
this.water_conser = res.result.water_conser.detailList
this.roll_info = res.result.roll_info
@@ -751,7 +733,6 @@ export default {
});
}
}
-
})
},
switchBtn(value) {
@@ -770,23 +751,20 @@ export default {
console.log("ee", e)
},
showEchartDialog(item, survItem) {
- // console.log('showEchartDialog', item, survItem)
- if(survItem === 1){
- let dom = item.target.closest(".jczbtm_lf"); // 定位元素
- if(!dom){
+ if (survItem === 1) {
+ let dom = item.target.closest(".jczbtm_lf");
+ if (!dom) {
dom = item.target.closest(".jcsssj");
}
- if (dom) { // 是否是滚动组件的某一行/列
+ if (dom) {
let item2 = dom.dataset.item
survItem = dom.dataset.survitem
- if(item2){
- item2=JSON.parse(item2)
- }else{
+ if (item2) {
+ item2 = JSON.parse(item2)
+ } else {
item2 = null;
}
- // console.log('showEchartDialog222', dom,item2, survItem)
- // :data-item="item" :data-survItem="valist.tylename"
- if(item2 && survItem){
+ if (item2 && survItem) {
this.showEchartDialog(item2, survItem)
}
}
@@ -804,45 +782,42 @@ export default {
initMap(zoomnum, isShowLight) {
let that = this;
let defaultLng = 110.719361, defaultLat = 36.068184;
- // let isShowLight = this.isShowLightNumber
getAllstationAndPestLight(isShowLight).then(res => {
- // 地图
that.aMap = new AMap.Map('container', {
viewMode: '3D',
resizeEnable: true,
zoom: zoomnum,
- center: [defaultLng, defaultLat],//默认的地图中心经纬度
+ center: [defaultLng, defaultLat],
mapStyle: 'amap://styles/blue',
- dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
- jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
- keyboardEnable: true,//地图是否可通过键盘控制,默认为true方向键控制地图平移，"+"和"-"可以控制地图的缩放，Ctrl+“→”顺时针旋转，Ctrl+“←”逆时针旋转。此属性可被setStatus/getStatus 方法控制
- animateEnable: true,//地图平移过程中是否使用动画（如调用panBy、panTo、setCenter、setZoomAndCenter等函数，将对地图产生平移操作，是否使用动画平移的效果），默认为true，即使用动画
+ dragEnable: true,
+ jogEnable: true,
+ keyboardEnable: true,
+ animateEnable: true,
defaultCursor: 'pointer',
turboMode: false,
- showBuildingBlock: true,//设置地图显示3D楼块效果，移动端也可使用。推荐使用。
- showIndoorMap: false, // 隐藏地图自带的室内地图图层
- expandZoomRange: true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
+ showBuildingBlock: true,
+ showIndoorMap: false,
+ expandZoomRange: true,
forceVector: true,
scale: (2, 2.5)
});
that.aMap.on('complete', (e) => {
- let Marker = res.result.filter(ele => ele.type != 'light').sort((a,b) => {
- if (b.type=='soil') return 1;
- if (b.type!='soil') return -1;
+ let Marker = res.result.filter(ele => ele.type != 'light').sort((a, b) => {
+ if (b.type == 'soil') return 1;
+ if (b.type != 'soil') return -1;
return 0;
- });//其他类型
- // console.log(Marker,'Marker')
+ });
Marker.push(...this.entList);
console.log("初始化地图。2", Marker)
Marker.map(item => {
let marker = new AMap.Marker({
- zIndex: (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') ? (that.lastZIndex+1): (that.lastZIndex),
+ zIndex: (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') ? (that.lastZIndex + 1) : (that.lastZIndex),
icon: this.urlimg + item.picUrl,
position: [item.longitude || defaultLng, item.latitude || defaultLat],
- offset: new AMap.Pixel(item.width, item.height),//偏移量
+ offset: new AMap.Pixel(item.width, item.height),
title: item.name,
label: {
- content: item.type == "ent"? item.name : '',
+ content: item.type == "ent" ? item.name : '',
direction: 'top'
},
extData: {
@@ -854,44 +829,45 @@ export default {
stationType: item.type
}
});
- if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//监测站弹窗
+ if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {
marker.on('click', e => {
let indexnumb = e.target.getExtData().ids.slice(-1);
this.qcdtinfor = this.stationInfoList[indexnumb]
this.qcdtdialogTableVisible = true
})
this.markersOrient.push(marker)
- } else if(item.type == 'soil'){//土壤弹窗，长期监测站
+ } else if (item.type == 'soil') {
marker.on('click', e => {
this.soilDataId = e.target.getExtData()
this.soidShowFlag = true
- // console.log('soil click', )
})
this.markersSoil.push(marker);
- } else if(item.type == "ent"){//企业类型
+ } else if (item.type == "ent") {
marker.on("click", e => {
- this.qyinformation= e.target.getExtData().item
- if(this.qyinformation.entPics){
+ this.qyinformation = e.target.getExtData().item
+ if (this.qyinformation.entPics) {
this.qyinformation.extPics = this.qyinformation.entPics.split(",");
- }else {
+ } else {
this.qyinformation.extPics = []
}
- console.log("this.qyinformation",this.qyinformation)
+ console.log("this.qyinformation", this.qyinformation)
this.qyinfordtdialogTableVisible = true
})
this.markersOrient.push(marker);
+ // ===== 新增：保存企业 marker 映射，便于列表点击定位 =====
+ const entKey = item.ids || item.entName || item.name;
+ if (entKey) {
+ this.$set(this.entMarkerMap, entKey, marker);
+ }
} else {
this.markersOther.push(marker)
}
marker.setMap(that.aMap);
})
this.$forceUpdate();
- // that.aMap.setFitView(null, false, [100,400,200,200], 16);
that.aMap.setFitView();
setTimeout(() => {
that.aMap.setFitView(null, false, [130, 380, 480, 480], 16);
- // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
- // that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]);
}, 2000)
});
})
@@ -903,9 +879,10 @@ export default {
console.log(key)
tempArray = tempArray.concat(res.result[key])
})
- // this.listData = res.result.soilHisSurvData
tempArray.map(item => {
- if(!item.value){item.value = '0';}
+ if (!item.value) {
+ item.value = '0';
+ }
})
this.listData = tempArray
console.log(this.listData)
@@ -927,7 +904,6 @@ export default {
switchEchartType() {
this.dataTypeEchart = (!this.dataTypeEchart);
this.echartInit = {};
- // this.activeName2 = this.riverList[0].stationName
setTimeout(() => {
this.doGetIndexSummry({index: 0});
}, 300);
@@ -936,7 +912,7 @@ export default {
this.tabsLoading = true;
this.echartIndex = tab.index - 0;
if (this.summryAllData) {
- this.$nextTick(() => { // 加载echarts图
+ this.$nextTick(() => {
this.initEchartData(this.echartIndex)
})
} else {
@@ -945,7 +921,6 @@ export default {
this.summryAllData = res.result;
let len = this.summryAllData.length;
this.riverList = [];
- //计算对比值，2号站数据减1号站
this.summryAllData.map((item1, index) => {
if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
let data1 = item1['datas'];
@@ -958,7 +933,7 @@ export default {
if (data1[key] instanceof Array) {
data3[key] = []
data1[key].map((itemSub, index) => {
- if (data2[key] && data2[key][index] && data1[key][index]){
+ if (data2[key] && data2[key][index] && data1[key][index]) {
data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
}
})
@@ -970,7 +945,7 @@ export default {
}
});
setTimeout(() => {
- this.$nextTick(() => { // 加载echarts图
+ this.$nextTick(() => {
this.initEchartData(this.echartIndex)
})
}, 1000);
@@ -978,24 +953,24 @@ export default {
})
}
},
- // 折线图数据
initEchartData(index, times) {
this.$nextTick(() => {
let domKey = `myChartDiv${index}`;
let data = this.summryAllData[index];
- if (!this.dataTypeEchart) {// 对比数据
+ if (!this.dataTypeEchart) {
domKey = `myChartDiv2${index}`;
data = this.riverList[index];
}
if (this.echartInit[domKey]) {
this.echartInit[domKey].dispose()
}
- // console.log('初始化echart：', index, domKey, data, /^\d+$/.test(index) ,this.echartInit[domKey])
let divDom = document.getElementById(domKey);
if (!divDom) {
console.log('没找到dom,两秒后重试：', domKey, divDom)
- if(times!==2){
- setTimeout(()=>{this.initEchartData(index,2)}, 1500);
+ if (times !== 2) {
+ setTimeout(() => {
+ this.initEchartData(index, 2)
+ }, 1500);
}
return;
}
@@ -1020,12 +995,11 @@ export default {
data: item.value,
type: 'line',
stack: '',
- // areaStyle: { color: item.color },
lineStyle: {
- color: item.color // 设置线的颜色为红色
+ color: item.color
},
itemStyle: {
- color: item.color // 设置线的颜色为红色
+ color: item.color
},
smooth: true,
}
@@ -1046,12 +1020,12 @@ export default {
toolbox: {},
legend: {
padding: [10, 50, 0, 0],
- x: 'right', //可设定图例在左、右、居中
- y: 'top', //可设定图例在上、下、居中
+ x: 'right',
+ y: 'top',
data: legendData,
textStyle: {
- fontSize: 12,//字体大小
- color: '#ffffff'//字体颜色
+ fontSize: 12,
+ color: '#ffffff'
},
},
xAxis: {
@@ -1060,8 +1034,8 @@ export default {
data: xAxisData,
axisLine: {
lineStyle: {
- color: '#2295ee', //x轴的颜色
- width: 1, //轴线的宽度
+ color: '#2295ee',
+ width: 1,
},
},
},
@@ -1074,20 +1048,18 @@ export default {
},
axisLine: {
lineStyle: {
- color: '#2295ee', //x轴的颜色
- width: 1, //轴线的宽度
+ color: '#2295ee',
+ width: 1,
},
},
},
series: seriesData,
};
- //为echarts对象加载数据
this.echartInit[domKey].setOption(optionLine);
})
this.tabsLoading = false;
},
- // 实时时间
getNowTime() {
let speed = 1000
let that = this
@@ -1109,34 +1081,22 @@ export default {
if (val < 10) return '0' + val
return val
},
- // 跳转页面3
jumpStationPage(e) {
let stationCode = e.stationCode
- // if (e.stationType == 'livestock') {
- // this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}})
- // // this.$message({
- // // message: '站点正在建设中......',
- // // showClose: true,
- // // });
- // } else {
- this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
- // }
+ this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
},
- // 弹窗退出登录
handleClosetuichu(done) {
this.dialogVisible = false
- // window.sessionStorage.clear();
localStorage.clear()
this.$router.push({path: '/Login'})
},
- // 弹窗个人信息
infor() {
var onformation = JSON.parse(window.sessionStorage.getItem('password'));
if (onformation) {
this.inforname = onformation.realname
}
},
- qcguanbi() {//全部关闭
+ qcguanbi() {
this.qcdialogTableVisible = false
this.qyinfordtdialogTableVisible = false
this.dialogTableVisible = false
@@ -1162,7 +1122,6 @@ export default {
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
- // IE11
element.msRequestFullscreen();
}
}
@@ -1180,31 +1139,47 @@ export default {
} else {
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf(flag) != -1);
}
- // if (flag == 'livestock') {
- // arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("livestock") != -1);
- // } else if (flag == 'orient') {
- // arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("orient") != -1);
- // } else if (flag == 'watershed') {
- // arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1);
- // } else if (flag == 'soil') {
- // arr = this.markersSoil;
- // } else if (flag == 'ent') {
- // arr = this.markersSoil;
- // }
}
if (arr && arr.length > 0) {
arr.map(item => {
- item.setzIndex((that.lastZIndex+=2));
+ item.setzIndex((that.lastZIndex += 2));
});
that.aMap.setFitView(arr, false, [300, 500, 360, 360], that.focusZoomData);
- // setTimeout(() => {
- // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
- // that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);
- // },2000)
} else {
that.aMap.setFitView(null, false, [100, 400, 360, 360], that.normalZoomData);
}
+ },
+
+ // ===================== 新增：企业悬浮框相关方法 =====================
+ // 点击企业列表项，定位到地图并弹出企业详情
+ // 点击企业列表项，只定位到地图上的企业
+ focusEnt(item) {
+ // 定位地图
+ if (this.aMap && item.longitude && item.latitude) {
+ this.aMap.setZoomAndCenter(16, [item.longitude, item.latitude]);
+ const key = item.ids || item.entName || item.name;
+ const marker = this.entMarkerMap[key];
+ if (marker) {
+ marker.setzIndex((this.lastZIndex += 10));
+ // 让 marker 有跳动动画，方便找到
+ if (marker.setAnimation) {
+ marker.setAnimation('AMAP_ANIMATION_BOUNCE');
+ setTimeout(() => marker.setAnimation(null), 2000);
+ }
+ }
+ }
+ },
+ toggleEntPanel() {
+ this.entPanelCollapsed = !this.entPanelCollapsed;
+ },
+ closeEntPanel() {
+ this.entPanelVisible = false;
+ },
+ openEntPanel() {
+ this.entPanelVisible = true;
+ this.entPanelCollapsed = false;
}
+ // ===================== 新增结束 =====================
},
}
@@ -1221,7 +1196,6 @@ export default {
z-index: 999;
}
-/* 台账弹窗 */
.tzsanguang {
position: absolute;
top: -1.5vw;
@@ -1252,22 +1226,16 @@ export default {
font-family: douyuFont;
}
-
-
.mywrcov_onehover {
cursor: pointer;
}
-
-
-
.centerMainBox2 img {
position: absolute;
width: 100%;
height: 100%;
}
-
.boxLis {
width: 70%;
height: 1.5vw;
@@ -1390,8 +1358,6 @@ a:hover {
margin: 2% auto 0;
display: -webkit-flex;
display: -moz-flex;
- /* -webkit-justify-content: space-between;
- -moz-justify-content: space-between; */
}
.plant > li {
@@ -1404,11 +1370,7 @@ a:hover {
height: 100%;
background: rgba(0, 235, 255, .08);
display: -webkit-flex;
- /* -webkit-flex-direction: column;
- -webkit-justify-content: space-between; */
display: -moz-flex;
- /* -moz-flex-direction: column;
- -moz-justify-content: space-between; */
}
.jumps > div > img {
@@ -1473,7 +1435,6 @@ a:hover {
width: 70%;
height: 2vw;
display: -webkit-flex;
- /* -webkit-justify-content: space-between; */
margin: 1vw 0 0 5vw;
}
@@ -1669,12 +1630,12 @@ a:hover {
border: none;
background: none;
}
+
.in1con_lf_titshow12 {
font-size: 1vw;
color: #fff;
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
font-family: douyuFont;
- //position: absolute;
top: 1vw;
left: 0%;
display: block;
@@ -1696,14 +1657,15 @@ a:hover {
width: 100%;
text-align: center;
}
-.in1con_lf_titshow13{
+
+.in1con_lf_titshow13 {
color: #ffa;
}
+
.in1con_lf_titshow2 {
font-size: 11px;
color: #fff;
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
- //font-family: douyuFont;
position: absolute;
top: 1.3vw;
right: 18px;
@@ -1712,6 +1674,155 @@ a:hover {
text-align: right;
cursor: pointer;
}
+
+/* ===================== 企业悬浮框样式（新增） ===================== */
+.entPanel {
+ position: absolute;
+ top: 3%; /* 顶部锚定，向下展开 */
+ left: 24%; /* 你要求的水平位置 */
+ /* 去掉 transform: translate(-50%, -50%); */
+ width: 320px;
+ max-height: 420px;
+ background: rgba(10, 40, 70, 0.92);
+ border: 1px solid #0169d0;
+ box-shadow: inset 0 0 16px 0 rgba(0, 145, 255, 0.9),
+ 0 0 20px rgba(0, 145, 255, 0.4);
+ border-radius: 6px;
+ z-index: 1000;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ backdrop-filter: blur(4px);
+ transition: max-height 0.3s ease; /* 只过渡高度，避免位置动画 */
+}
+
+.entPanel--collapsed {
+ max-height: 44px;
+}
+
+.entPanel__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 14px;
+ border-bottom: 1px solid rgba(1, 105, 208, 0.5);
+ background: rgba(14, 44, 63, 0.9);
+}
+
+.entPanel__title {
+ color: #fff;
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 1px;
+ text-shadow: 0 0 6px rgba(0, 145, 255, 0.8);
+}
+
+.entPanel__actions {
+ display: flex;
+ gap: 8px;
+}
+
+.entPanel__btn {
+ color: #7fd4ff;
+ font-size: 12px;
+ cursor: pointer;
+ user-select: none;
+ padding: 2px 6px;
+ border-radius: 3px;
+ transition: background 0.2s;
+}
+
+.entPanel__btn:hover {
+ background: rgba(0, 145, 255, 0.3);
+ color: #fff;
+}
+
+.entPanel__btn--close {
+ font-size: 16px;
+ line-height: 1;
+}
+
+.entPanel__search {
+ padding: 8px 12px;
+ border-bottom: 1px solid rgba(1, 105, 208, 0.3);
+}
+
+.entPanel__input {
+ width: 100%;
+ height: 30px;
+ padding: 0 10px;
+ box-sizing: border-box;
+ background: rgba(0, 30, 60, 0.8);
+ border: 1px solid #0169d0;
+ border-radius: 4px;
+ color: #fff;
+ font-size: 13px;
+ outline: none;
+}
+
+.entPanel__input::placeholder {
+ color: #6a9fcf;
+}
+
+.entPanel__input:focus {
+ border-color: #2fbdff;
+ box-shadow: 0 0 6px rgba(47, 189, 255, 0.6);
+}
+
+.entPanel__list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 6px 0;
+}
+
+.entPanel__list::-webkit-scrollbar {
+ width: 4px;
+}
+
+.entPanel__list::-webkit-scrollbar-thumb {
+ background: rgba(47, 189, 255, 0.6);
+ border-radius: 2px;
+}
+
+.entPanel__item {
+ display: flex;
+ align-items: center;
+ padding: 8px 14px;
+ cursor: pointer;
+ transition: background 0.2s;
+ border-bottom: 1px dashed rgba(1, 105, 208, 0.2);
+}
+
+.entPanel__item:hover {
+ background: rgba(0, 145, 255, 0.25);
+}
+
+.entPanel__itemIcon {
+ width: 20px;
+ height: 20px;
+ margin-right: 8px;
+ object-fit: contain;
+}
+
+.entPanel__itemName {
+ color: #d6ecff;
+ font-size: 13px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.entPanel__item:hover .entPanel__itemName {
+ color: #fff;
+ text-shadow: 0 0 6px rgba(47, 189, 255, 0.9);
+}
+
+.entPanel__empty {
+ text-align: center;
+ color: #6a9fcf;
+ font-size: 12px;
+ padding: 20px 0;
+}
+
\ No newline at end of file