
<template>
  <div style="width: 100%; height: 100%;">
     <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
     <div v-show="activeIndex == 0" class="btns_enp">
          <div class="btns" :class="bindBtnClass(10)" @click="equipmentTypeChange(10)">生产设备</div>
          <div class="btns" :class="bindBtnClass(30)" @click="equipmentTypeChange(30)">治理设备</div>
          <div class="btns" :class="bindBtnClass(40)" @click="equipmentTypeChange(40)">监测设备</div>
          <div class="btns" :class="bindBtnClass(50)" @click="equipmentTypeChange(50)">监控设备</div>
      </div>
      <div v-show="infoShow" class="infoDom">
        <h4 class="infoDom_header">
          <el-icon class="infoDom_close" @click="closeInfo()"><el-icon-close /></el-icon>
          {{objItem.name}}
        </h4>
        <div class="infoBody">
          <p class="bodyTitle"><span class="titleIcon"></span>实时状态</p>
          <div class="bodyContainer">
            <div class="rdio-group">
              <div  :class="['radio-item' ,objItem.state==10?'greenIcon':'']">
                <el-icon class="radio-ico"><el-icon-successFilled /></el-icon> 
                <span>运行</span>
              </div>
              <div :class="['radio-item' ,objItem.state==20?'orangeIcon':'']">
                <el-icon class="radio-ico"><el-icon-removeFilled /></el-icon> 
                <span>待机</span>
              </div>
              <div :class="['radio-item' ,objItem.state==30?'redIcon':'']">
                <el-icon class="radio-ico"><el-icon-warningFilled /></el-icon>
                 <span>离线</span>
                </div>
              </div>
          </div>
          <p class="bodyTitle"><span class="titleIcon"></span>历史监测数据</p>
        </div>
      </div>
  </div>
</template>
<script>
import * as Cesium from 'cesium';
export default {
  name: 'cesium',
  props: ['activeIndex'],
  data() {
    return {
      objItem: {},
      activeBtns: 10,
      infoShow:false,
    }
  },
  created() {
		const scriptInfo = document.createElement("script");
		scriptInfo.setAttribute("data-callType", "callScript");
		scriptInfo.src = "https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
		document.head.appendChild(scriptInfo);
  },
  // watch: {
  //   activeBtns:function(newVal, oldVal) {
  //     console.log('activeBtns 发生变化:', newVal, oldVal);
  //     this.getInfo(newVal);
  //   }
  // },
  mounted() {
    let that = this;
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";

    const viewer = new Cesium.Viewer("cesiumContainer",{
      animation:false,//动画小部件
      baseLayerPicker:false,//地图图层组件
      fullscreenButton:false,//全屏组件
      geocoder:false,//地理编码搜索组件
      homeButton:false,//首页组件
      infoBox:false,//信息框
      sceneModePicker:false,//场景模式
      selectionIndicator:false,//选取指示器组件
      timeline:false,//时间轴
      navigationHelpButton:false,//帮助按钮
      navigationInstructionsInitiallyVisible:false
});
    this.viewer = viewer;
    // viewer.scene.globe.depthTestAgainstTerrain = false
    
    //设置限制缩放大小
    // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1
    
    //隐藏logo信息
    // viewer.scene.globe.enableLighting = true;
    // viewer._cesiumWidget._creditContainer.style.display = 'none';
    //*****cesium加载3dtiles*****//
    const tileset = new Cesium.Cesium3DTileset({
      url: "/3dtiles/tileset.json",
      // url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
    });
    tileset.readyPromise.then(function (tileset) {
      viewer.scene.primitives.add(tileset);
      //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
      const cartographic = Cesium.Cartographic.fromCartesian(
        tileset.boundingSphere.center
      );
      console.log('cartographic',cartographic);
      const { longitude, latitude, height } = cartographic;
      // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
      const current = Cesium.Cartesian3.fromRadians(
        longitude,
        latitude,
        height
      )
      //根据中心点坐标计算出的地表坐标点
      const surface = Cesium.Cartesian3.fromRadians(
        cartographic.longitude, //经度
        cartographic.latitude, //纬度
        0 //高度
      )
      //根据中心点坐标和height值计算出的新的坐标点
      const offset = Cesium.Cartesian3.fromRadians(
        longitude, latitude, 0
      );
      //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
      const translation = Cesium.Cartesian3.subtract(
        offset, //根据中心点坐标和height值计算出的新的坐标点
        surface, //根据中心点坐标计算出的地表坐标点
        new Cesium.Cartesian3()
      );
      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
      //tileset加载完成监听
      // tileset.tileLoad.addEventListener(function (tile) {
      //     let content = tile.content;
      //     // let featuresLength = content.featuresLength;
      //     let feature = content.getFeature(0);
      //   //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
      //   const cartographicMesh = Cesium.Cartographic.fromCartesian(
      //     feature._content._model._boundingSphere.center
      //   );
      //   // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
      //   const currentMesh = Cesium.Cartesian3.fromRadians(
      //     cartographicMesh.longitude, //经度
      //     cartographicMesh.latitude, //纬度
      //     cartographicMesh.height
      //   )
      //   //根据中心点坐标计算出的地表坐标点
      //   const surfaceMesh = Cesium.Cartesian3.fromRadians(
      //     cartographicMesh.longitude, //经度
      //     cartographicMesh.latitude, //纬度
      //     2 //高度
      //   )
             
      // })
      //视野转到tileset模型
      viewer.zoomTo(
        tileset,
        new Cesium.HeadingPitchRange(
          -4.0,
          -0.65,
          500
        )
      );
      // that.equipmentTypeChange(10);
    });
    // 监听鼠标左键点击事件
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (click) {
      var feature = viewer.scene.pick(click.position);
      console.log("feature",feature);
      console.log("_attrs", feature.id._attrs);
      that.objItem = feature.id._attrs;
      that.getInfo(feature.id._id);
      if (Cesium.defined(feature)) {
              // 判断点击位置是否有模型被选中
              var pickedPosition = viewer.scene.pickPosition(click.position);
              if (Cesium.defined(pickedPosition)) {
                  // 将点击位置的世界坐标转换为地理坐标（经纬度）
                  var cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
                  var longitude = Cesium.Math.toDegrees(cartographic.longitude);//经度
                  var latitude = Cesium.Math.toDegrees(cartographic.latitude);//纬度
                  var height = cartographic.height; // 获取高度值
                  // console.log('Longitude: ' + longitude);
                  // console.log('Latitude: ' + latitude);
                  // console.log('Height: ' + height);
                // 可以在这里执行更多操作，例如在点击位置添加标记等
                //获取该点信息，查询相关数据
              
              }
          }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    //*****cesium加载3dtiles*****//
    //*****cesium加载.glb格式的文件*****//
    // 隐藏地球
    // viewer.scene.globe.show = false

    // 设置模型位置

  //  var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.1);
  //   var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  //   var url = "/glb/photon4.glb";
  //   // 加载 glb 模型
  //   var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
  //       url: url,
  //       modelMatrix: modelMatrix,
  //       scale: 1000// 可选：设置模型缩放比例
  //   }));
  //   // 监听模型加载完成事件
  //   model.readyPromise.then(function(model) {
  //     console.log('模型加载完成:', model);
  //     // 计算模型包围盒的边界
  //     var boundingSphere = model.boundingSphere;
      
  //     // 将相机焦点移动到模型的包围球中心
  //   viewer.camera.flyToBoundingSphere(boundingSphere, {
  //       duration: 0 // 设置飞行动画持续时间（单位：秒）
  //   });
  //   // 设置相机跟随模型
  //   viewer.trackedEntity = model;
  //   }).otherwise(function(error) {
  //       console.error('模型加载失败:', error);
  //   });

  //   var url = "/glb/photon4.glb";
  //   var height = 0;
  //   viewer.entities.removeAll() //加载之前先清楚所有entity
  //   var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height)
  //   var heading = Cesium.Math.toRadians(310) //135度转弧度
  //   var pitch = Cesium.Math.toRadians(0);
  //   var roll = Cesium.Math.toRadians(0);
  //   var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
  //   var orientation = Cesium.Transforms.headingPitchRollQuaternion(
  //     position,
  //     hpr
  //   )
  //   var  modelEntity  = viewer.entities.add({
  //     name: 'photon',
  //     position: position,
  //     orientation: orientation,
  //     model: {
  //       uri: url,//注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
  //       scale: 1.0,//缩放比例
  //       minimumPixelSize: 2500,//最小像素大小，可以避免太小看不见
  //       maximumScale: 20000,//模型的最大比例尺大小。minimumPixelSize的上限  
  //       incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入
  //       runAnimations: true,//是否启动模型中制定的gltf动画
  //       clampAnimations: true,//制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
  //       shadows: Cesium.ShadowMode.ENABLED,
  //       heightReference: Cesium.HeightReference.NONE
  //     },
  //   })
  //   // // 等待模型加载完成
  //   // modelEntity.model.readyPromise.then(function(model) {
  //   //     // 此时模型已经加载完成
  //   //     // 获取模型的网格（primitives）
  //   //     var primitives = model.primitives;
  //   //     // 遍历所有网格
  //   //     primitives.forEach(function(primitive) {
  //   //         // 每个 primitive 可能是一个网格（GeometryInstance）
  //   //         // 你可以在这里处理每个网格，例如更改其材质或颜色
  //   //         // 获取几何体实例
  //   //         var geometryInstance = primitive.geometryInstance;
  //   //         // 输出网格信息
  //   //         console.log('Mesh:', geometryInstance);
  //   //     });
  //   // }).otherwise(function(error) {
  //   //     // 如果加载过程中发生错误，这里会被调用
  //   //     console.error('模型加载失败:', error);
  //   // });
  //    viewer.trackedEntity = modelEntity; // 聚焦模型
  //   viewer.zoomTo(modelEntity);
  //   //点
  //   viewer.entities.add({
  //     // fromDegrees（经度，纬度，高度，椭球，结果）从以度为单位的经度和纬度值返回Cartesian3位置
  //       position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 1),
  //       point: {
  //         // 点的大小（像素）
  //         pixelSize: 5,
  //         // 点位颜色，fromCssColorString 可以直接使用CSS颜色
  //         color: Cesium.Color.fromCssColorString('#ee0000'),
  //         // 边框颜色
  //         outlineColor: Cesium.Color.fromCssColorString('#fff'),
  //         // 边框宽度(像素)
  //         outlineWidth: 2,
  //         // 显示在距相机的距离处的属性，多少区间内是可以显示的
  //         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
  //         // 是否显示
  //         show: true
  //       }
  //   });
  //   //图片
  //   // console.log('Cesium.Cartesian3.fromDegrees',Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.5))
  //   viewer.entities.add({
  //       position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.5),
  //       billboard: {
  //         // 图像地址，URI或Canvas的属性
  //         image: 'img/elec.png',
  //         // 设置颜色和透明度
  //         color: Cesium.Color.WHITE.withAlpha(0.8),
  //         // 高度（以像素为单位）
  //         height: 50,
  //         // 宽度（以像素为单位）
  //         width: 50,
  //         // 逆时针旋转
  //         rotation: 20,
  //         // 大小是否以米为单位
  //         sizeInMeters: false,
  //         // 相对于坐标的垂直位置
  //         verticalOrigin: Cesium.VerticalOrigin.CENTER,
  //         // 相对于坐标的水平位置
  //         horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  //         // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
  //         pixelOffset: new Cesium.Cartesian2(10, 0),
  //         // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
  //         scale: 1.0,
  //         // 显示在距相机的距离处的属性，多少区间内是可以显示的
  //         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
  //         // 是否显示
  //         show: true
  //       }
  //   });
  //   setTimeout(() => {
  //     if (modelEntity.model.ready) {
  //       console.log('Model is loaded',modelEntity.model);
  //     } else {
  //       console.log('Model is still loading',modelEntity.model);
  //     }
  //   }, 10000);
  //   Cesium.when(modelEntity.model.readyPromise).then(function(model) {
  //      window.alert(model);
  //   }).otherwise(function(error){
  //     window.alert(error);
  //   });
  // //   modelEntity.model.readyPromise.then(function(model) {
  // //     // 模型已加载，可以进行后续操作
  // //     console.log('Model loaded successfully')
  // // }).otherwise(function(error) {
  // //     // 模型加载失败，处理错误
  // //     console.error('Failed to load model', error);
  // // });

  //   // // 监听模型加载事件
  //   //   modelEntity.readyPromise.then(function(entity) {
  //   //     var modelInstance = entity._modelInstance;
  //   //     if (!modelInstance || !modelInstance.ready) {
  //   //         console.error('模型未加载或不可用');
  //   //         return;
  //   //     }

  //   //     var geometryInstances = modelInstance.geometryInstances;
  //   //     if (!geometryInstances || geometryInstances.length === 0) {
  //   //         console.error('模型没有几何体实例');
  //   //         return;
  //   //     }

  //   //     var meshData = [];
  //   //     geometryInstances.forEach(function(geometryInstance) {
  //   //         var attributes = geometryInstance.attributes;
  //   //         if (attributes && attributes.position) {
  //   //             var positions = attributes.position.values;
  //   //             // 根据你的模型数据格式，处理positions数组以获取三角形数据
  //   //             // ...
  //   //             meshData.push(/* 三角形数据 */);
  //   //         }
  //   //     });

  //   //     console.log("模型的网格数据：", meshData);
  //   // }).otherwise(function(error) {
  //   //     console.error("无法加载模型:", error);
  //   // });
    
  //   // // 确保entity实际上是一个模型实体
  //   // if (modelEntity.model) {
  //   //     // 监听模型的加载完成事件
  //   //     modelEntity.model.readyPromise.then(function(model) {
  //   //         // 模型已加载完成，可以获取其网格数据
  //   //         var geometry = model._glTFModel.scene.children[0].geometry; // 假设模型只有一个节点和几何体
  //   //         var attributes = geometry.attributes;
  //   //         var positions = attributes.position.array; // 获取顶点位置数组
  //   //         console.log("模型的网格数据已加载");
  //   //     }).otherwise(function(error) {
  //   //         // 模型加载失败
  //   //         console.error("无法加载模型:", error);
  //   //     });
  //   // } else {
  //   //     console.error("添加的实体不是一个模型实体");
  //   // }
  //   // // 获取实体集合
  //   // var entityCollection = viewer.entities;

  //   // // 创建一个空数组用于存储模型元素
  //   // var modelEntities = [];

  //   // // 遍历实体集合
  //   // entityCollection.values.forEach(function(entity) {
  //   //     // 检查实体是否为模型实体
  //   //     if (entity.model) {
  //   //         // 将模型实体添加到数组中
  //   //         modelEntities.push(entity.mesh);
  //   //     }
  //   // });

  //   // // // 输出模型元素数组
  //   // console.log(modelEntities);

  //   // // 创建一个实体集合
  //   // var entityCollection = new Cesium.EntityCollection();

  //   // // 假设modelEntities是一个包含每个模型元素的数组
  //   // modelEntities.forEach(function(modelEntity) {
  //   //     // 创建一个实体来表示标注
  //   //     var annotationEntity = entityCollection.add(new Cesium.Entity({
  //   //         position: modelEntity.position, // 设置标注位置为模型元素的位置
  //   //         billboard: {
  //   //             image: 'img/elec.png', // 设置标注的图片路径
  //   //             scale: 0.5, // 设置标注的大小
  //   //             // 可以根据需要设置更多的标注属性，比如颜色、偏移等
  //   //         }
  //   //     }));
  //   // });

  //   // // 将实体集合添加到场景中
  //   // viewer.entities.add(entityCollection);



  //   // 监听鼠标左键点击事件
  //   viewer.screenSpaceEventHandler.setInputAction(function (click) {
  //     var pickedObject = viewer.scene.pick(click.position);
  //     console.log("pickedObject",pickedObject);//被点击的模型中的mesh
  //     if (Cesium.defined(pickedObject) && pickedObject.id) {
  //       // 模型被点击了
  //         var mesh = pickedObject.mesh;//modelMesh
  //         var node = pickedObject.node;//modelNode
  //         var position = pickedObject.id.position;
  //         // 处理模型信息和位置
  //         console.log('模型信息:', mesh);
  //         console.log('模型信息:', node);
  //         console.log('位置:', position);
  //     }
  //   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    //*****cesium加载.glb格式的文件*****//
  },
  methods: {
    bindBtnClass(index) {
      let classInfo = { btns: true, btnsActive: false };
      if (index == this.activeBtns) {
        classInfo.btnsActive = true;
      }
      return classInfo;
    },
    //获取类型对应的图标
    getItemIcon(cateCode) { 
      switch (cateCode) {
        case "aqms":
          return "img/enp_blue/jcwz.png";
        case "tsp":
          return "img/enp_blue/TSP.png";
        case "cems":
          return "img/enp_blue/xct.png";
        case "wstation":
          return "img/enp_blue/CEMS.png";
        case "truck_clean":
          return "img/enp_blue/hwc.png";
        case "除尘器":
          return "img/enp_blue/ccq.png";
        case "干雾":
          return "img/enp_blue/gwfkx.png";
        case "雾炮":
          return "img/enp_blue/gxswq.png";
        case "监控设备":
          return "img/enp_blue/jksb.png";
        case "输送设备":
          return "img/enp_blue/sssb.png";
        case "eq":
          return "img/enp_blue/zyscsb.png";
        case "大型生产设备":
          return "img/enp_blue/dxscsb.png";
      }
    },
    //设备类型改变
    equipmentTypeChange(index) { 
      let that = this;
      that.removePointer();
      that.activeBtns = index;
      that.$API.em.equipment.list.req({ type: index,page:0}).then((res) => {
        res.forEach((item) => {
          if ( item.cate!==null&&item.coordinates && item.coordinates.longitude && item.coordinates.latitude) {  
            let imgUrl = that.getItemIcon(item.cate_code)
            let lon = parseFloat(item.coordinates.longitude);
            let lat = parseFloat(item.coordinates.latitude);
            let height = parseInt(item.coordinates.height);
            let arrs = { name:item.name, lon: lon, lat:lat, height:height, id:item.id, type: 'display' };
            let config = { show: true, fontSize: '16px', fillColor: '#ffffff', fillWidth: 1, pixelOffsetX: 10, pixelOffsetY: -30, image: imgUrl, imgWidth: 50, imgHeight: 50, textDistance: 550000, imgDistance: 550000 };
            that.addPointer(arrs, config);
          }
        })
        
      })
    },
    //调用此方法创建点用于标注在地图上
    creatgetInfoePoint(attrs, config) {
        const { name = '测试', lon, lat, id='11111', type = 'display' ,height} = attrs
        const { show = true, fontSize, fillColor, fillWidth,pixelOffsetX, pixelOffsetY, image, imgWidth, imgHeight, textDistance, imgDistance } = config
        return new Cesium.Entity({
            attrs: attrs,
            id: id,
            type: type,
            position: Cesium.Cartesian3.fromDegrees(lon||117.08387268794274, lat||31.6557737395655433,height), // 文字标签
            label: {
                show: show,
                text: name,
                font: (fontSize || '14px'),
                style: Cesium.LabelStyle.FILL ,
                fillColor: Cesium.Color.LIME,
                fillColor: Cesium.Color.fromCssColorString(fillColor || '#fff'),
                outline: false,// 字体边框
                outlineColor: Cesium.Color.WHITE, // 字体边框颜色
                outlineWidth: fillWidth || 4,    // 字体边框尺寸
                showBackground: true, // 是否显示背景颜色
                backgroundColor: Cesium.Color.fromCssColorString('#1ca50a'), // 背景颜色
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
                pixelOffset: new Cesium.Cartesian2(pixelOffsetX || 50, pixelOffsetY || -25), // 偏移量
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, textDistance || 550000) //  文字标签多少距离内设置可见
            },
            billboard: {
                // 图标
                image: image || 'img/enp_blue/warning_enp.png',
                width: imgWidth || 30,
                height: imgHeight || 30,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, imgDistance || 550000) //  图片多少距离内设置可见
            }
        })
    },
    //用于把创建好的点加载到地图上
    addPointer(attrs, config) {
      let that = this;
      let obj =  that.creatgetInfoePoint(attrs, config);
        that.viewer.entities.add(obj)
    },
    //调用此方法获取相关信息显示在页面
    getInfo(equpmentId) {
      let that = this;
      that.infoShow = true;
      console.log(equpmentId)
      //根据id获取相关信息
      this.$API.em.equipment.item.req(equpmentId).then((res) => {
        that.objItem = res;
        console.log(res)
      })
    },
    //添加点之前可以调用一下移除所有的点防止重复添加
    removePointer() {
        let allEntitiesPoint = []
        // console.log(viewer.entities.values)
        this.viewer.entities.values.forEach((item) => {
            allEntitiesPoint.push(item.id)
        })
        allEntitiesPoint.forEach((item) => {
            const entity_obj = this.viewer.entities.getById(item)
            this.viewer.entities.remove(entity_obj)
        })
    },
    closeInfo() { 
      this.infoShow = false;
    },
  }
}
</script>
<style>
.infoDom{
  position: fixed;
  right: 22%;
  bottom: 10%;
  width: 20%;
  min-height: 20vh;
  min-width: 360px;
  background: rgba(0, 50, 56, 0.8);
  border: 1px solid rgba(63,174,229,.5);
}
.infoDom_header{
  font-size:18px;
  padding: 10px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(63,174,229,.5);
}
.infoDom_close{
  position: absolute;
  left: 10px;
  top:10px;
}
.bodyTitle{
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  font-size: 18px;
}
.titleIcon{
  display: inline-block;
  margin-right: 10px;
  width: 6px;
  height: 20px;
  background: #00f6ff;
  vertical-align: middle;
}
.infoBody{
  padding: 10px;
}
.rdio-group{
  height: 30px;
  display: flex;
  justify-content: center;
  line-height: 30px;
}
.radio-item{
  width: 60px;
}
.greenIcon,.greenIcon>.radio-ico{
  color: #1ca50a;
}
.orangeIcon,.orangeIcon>.radio-ico{
  color: orange;
}
.redIcon,.redIcon>.radio-ico{
  color: #f41a1a;
}
.btns_enp {
  bottom: 7vh;
  left: 28.7vw;
  width: 42.6vw;
  height: 4.3vh;
  position: fixed;
  display: flex;
  justify-content: space-between;
}

.btns {
  width: 8vw;
  height: 5vh;
  font-size: 2vh;
  line-height: 4.9vh;
  background-image: url('/public/img/enp_blue/btn.png');
  background-size: 100% 100%;
  text-align: center;
  color: #ffffff;
}

.btns.btnsActive {
  background-image: url('/public/img/enp_blue/btn_active.png');
}

</style>