<template>
  <div id="app">
    <!-- <div id="myChart"></div> -->
    <div id="cesiumContainer"></div>
    <div class="main main_left">
      <div class="title disflex bgcolor">综合态势</div>
      <div class="time disflex bgcolor">
        <div class="time_t">{{nowDate}}</div>
        <div class="time_b">
          <div class="tie_b_y">{{nowDate1}}</div>
          <div class="tie_b_w">星期一</div>
        </div>
      </div>
      <div class="environment disflex bgcolor">
        <div class="weather" v-for="(item,index) in environment" :key="index">
          <i class="el-icon-heavy-rain"></i>
          <div class="weather_l">
            <div class="weather_l_t">{{item.text}}</div>
            <div class="weather_l_b">{{item.val}}</div>
          </div>
        </div>
      </div>
      <div class="capacity disflex bgcolor">
        <div class="capacity_bar" v-for="(item,index) in capacity" :key="index">
          <div class="capacity_l_l">{{item.text}}</div>
          <div class="capacity_l_r">{{item.val}}</div>
          {{item.unit}}
        </div>
      </div>
    </div>
    <div class="main main_right">
      <div class="wind disflex bgcolor">
        <div class="wind_title">风机</div>
        <div class="wind_bar" v-for="(item,index) in wind" :key="index">
          <div class="wind_bar_l">{{item.text}}</div>
          <div class="wind_bar_r">{{item.val}}</div>台
        </div>
      </div>
      <div class="light disflex bgcolor">
        <div class="light_title">光伏</div>
        <div class="light_bar" v-for="(item,index) in wind" :key="index">
          <div class="light_bar_l">{{item.text}}</div>
          <div class="light_bar_r">{{item.val}}</div>台
        </div>
      </div>
    </div>
    <div class="main main_bootom">
      <div class="load disflex bgcolor">
        <div class="load_bar" v-for="(item,index) in load" :key="index">
          <div class="load_bar_t">{{item.text}}</div>
          <div class="load_bar_b">{{item.val}}</div>
          <div>MW</div>
        </div>
      </div>
      <div class="progress disflex bgcolor">
        <div class="progress_bar">
          <el-progress :percentage='res.rwcl' :stroke-width="10" style="width:100%"></el-progress>
          <div class="progress_bar_span">
            <div>实发电量</div>
            <div>预测发电量</div>
          </div>
        </div>
        <div class="progress_bar">
          <el-progress :percentage="res.ywcl" :stroke-width="10" style="width:100%"></el-progress>
          <div class="progress_bar_span">
            <div>月发电量</div>
            <div>月计划电量</div>
          </div>
        </div>
        <div class="progress_bar">
          <el-progress :percentage="res.nwcl" :stroke-width="10" style="width:100%"></el-progress>
          <div class="progress_bar_span">
            <div>年发电量</div>
            <div>年计划发电量</div>
          </div>
        </div>
      </div>

      <div class="windData disflex bgcolor">
        <el-table
          :data="windData"
          style="width: 100%"
          :row-style="getRowClass"
          :cell-style="getRowClass"
          :header-row-style="getRowClass"
          :header-cell-style="getRowClass"
        >
          <el-table-column prop="type" label width></el-table-column>
          <el-table-column prop="mhs" label="麻黄山" width="110"></el-table-column>
          <el-table-column prop="qs" label="青山" width="110"></el-table-column>
          <el-table-column prop="xs" label="香山" width="110"></el-table-column>
          <el-table-column prop="sbq" label="石板泉" width="110"></el-table-column>
          <el-table-column prop="nss" label="牛首山" width="110"></el-table-column>
          <el-table-column prop="pl" label="平罗" width="110"></el-table-column>
          <el-table-column prop="dwk" label="大武口" width="110"></el-table-column>
          <el-table-column prop="xh" label="宣和" width="110"></el-table-column>
        </el-table>
      </div>
      <div class="electricity bgcolor">
        <div class="electricity_bar" v-for="(item,index) in electricity" :key="index">
          <div class="electricity_bar_t">{{item.text}}</div>
          <div class="electricity_bar_b">
            {{item.val}}
            <span>{{item.unit}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var Cesium = require("cesium/Cesium");
var widgets = require("cesium/Widgets/widgets.css");
import wtTree from "../../public/static/fj";
import echarts from "echarts";
import "echarts/map/js/province/ningxia";
import "echarts-gl";
import buildingsGeoJSON from "../../public/static/buildings";
import { parseDate2Str } from '../../public/static/common'
export default {
  data() {
    return {
      res: {
        rwcl: 60,
        ywcl: 70,
        nwcl: 50,
      },
      timer:'',
      publicPath: process.env.BASE_URL,
      url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
      initPosition: [106.0231304, 37.73323706, 0],
      positionArray: [
        [106.0231304, 37.73323706],
        [106.0249329, 37.73863338],
        [106.0214138, 37.74399538],
        [106.0251689, 37.74608238],
        [106.0223579, 37.74820326],
        [106.0289025, 37.750867],
      ],
      viewer: null,
      // timeYMd: this.dateFormat("yyyy-MM-dd", new Date()),
      // timeHms: this.dateFormat("HH:mm:ss", new Date()), 
      nowDate:parseDate2Str(new Date(),'YYYY-MM-DD'),
      nowDate1:parseDate2Str(new Date(),'HH:mm:ss'),
      environment: [
        {
          text: "天气",
          val: "大雨",
        },
        {
          text: "温度",
          val: "28℃",
        },
        {
          text: "相对湿度",
          val: "60%",
        },
        {
          text: "风力",
          val: "4-5级西北风",
        },
        {
          text: "空气密度",
          val: "120",
        },
      ],
      capacity: [
        {
          text: "装机容量",
          val: 286.5,
          unit: "MW",
        },
        {
          text: "安全天数",
          val: 2481,
          unit: "天",
        },
        {
          text: "减排二氧化碳",
          val: 2400,
          unit: "吨",
        },
        {
          text: "减排二氧化硫",
          val: 121,
          unit: "吨",
        },
        {
          text: "节约用水",
          val: 445,
          unit: "吨",
        },
        {
          text: "节约标煤",
          val: 545,
          unit: "吨",
        },
      ],
      load: [
        {
          text: "当前负荷",
          val: 20,
        },
        {
          text: "日最高负荷",
          val: 20,
        },
        {
          text: "月最高负荷",
          val: 20,
        },
        {
          text: "预测功率",
          val: 20,
        },
        {
          text: "保证功率",
          val: 20,
        },
        {
          text: "理论功率",
          val: 20,
        },
      ],
      electricity: [
        {
          text: "上网电量",
          val: 110,
          unit: "万kWh",
        },
        {
          text: "购网电量",
          val: 110,
          unit: "万kWh",
        },
        {
          text: "MTBF",
          val: 110,
          unit: "h",
        },
        {
          text: "MTTR",
          val: 110,
          unit: "h",
        },
        {
          text: "综合厂用电率",
          val: 110,
          unit: "%",
        },
        {
          text: "设备可利用率",
          val: 110,
          unit: "%",
        },
        {
          text: "风能利用率",
          val: 110,
          unit: "%",
        },
      ],
      wind: [
        {
          text: "接入",
          val: 10,
        },
        {
          text: "并网",
          val: 10,
        },
        {
          text: "待机",
          val: 10,
        },
        {
          text: "检修",
          val: 10,
        },
        {
          text: "故障",
          val: 10,
        },
        {
          text: "限电",
          val: 10,
        },
        {
          text: "受累",
          val: 10,
        },
        {
          text: "离线",
          val: 10,
        },
      ],
      light: [
        {
          text: "接入",
          val: 10,
        },
        {
          text: "并网",
          val: 10,
        },
        {
          text: "待机",
          val: 10,
        },
        {
          text: "检修",
          val: 10,
        },
        {
          text: "故障",
          val: 10,
        },
        {
          text: "限电",
          val: 10,
        },
        {
          text: "受累",
          val: 10,
        },
        {
          text: "离线",
          val: 10,
        },
      ],
      windData: [
        {
          type: "发电量",
          mhs: "120MW",
          qs: "120MW",
          xs: "120MW",
          sbq: "120MW",
          nss: "120MW",
          pl: "120MW",
          dwk: "120MW",
          xh: "120MW",
        },
        {
          type: "风速/日照",
          mhs: "5m/s",
          qs: "5m/s",
          xs: "5m/s",
          sbq: "5m/s",
          nss: "5m/s",
          pl: "5m/s",
          dwk: "5m/s",
          xh: "5m/s",
        },
        {
          type: "理论功率",
          mhs: "120MW",
          qs: "120MW",
          xs: "120MW",
          sbq: "120MW",
          nss: "120MW",
          pl: "120MW",
          dwk: "120MW",
          xh: "120MW",
        },
        {
          type: "出线功率",
          mhs: "120MW",
          qs: "120MW",
          xs: "120MW",
          sbq: "120MW",
          nss: "120MW",
          pl: "120MW",
          dwk: "120MW",
          xh: "120MW",
        },
        {
          type: "AGC",
          mhs: "120MW",
          qs: "120MW",
          xs: "120MW",
          sbq: "120MW",
          nss: "120MW",
          pl: "120MW",
          dwk: "120MW",
          xh: "120MW",
        },
      ],
    };
  },
  created() {
    if (this.websock) {
      this.websock.close(); // 关闭websocket连接
    }
    this.initWebSocket();
    //定时器：获取本地时间
   this.timer = setInterval(() => {
     this.nowDate =parseDate2Str(new Date(), "YYYY-MM-DD")
     this.nowDate1 =parseDate2Str(new Date(), "HH:mm:ss")
   }, 1000);
  },
  destroyed() {
    //页面销毁时关闭ws连接
    if (this.websock) {
      this.websock.close(); // 关闭websocket
    }
     //在vue实例销毁前，清除定时器
   if (this.timer) {
     clearInterval(this.timer);
   }
  },
  mounted() {
    // this.echartsMap();
    // this.echartsMaps();
    this.cesium();
  },
  methods: {
    echartsMap() {
      let myChart = echarts.init(document.getElementById("myChart"));
      echarts.registerMap("nx", buildingsGeoJSON);
      var regions = buildingsGeoJSON.features.map(function (feature) {
        return {
          name: feature.properties.name,
          value: Math.max(Math.sqrt(feature.properties.height), 0.1),
          height: Math.max(Math.sqrt(feature.properties.height), 0.1),
        };
      });
      myChart.setOption({
        visualMap: {
          show: false,
          min: 0.4,
          max: 1,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        series: [
          {
            type: "map3D",
            map: "nx",
            shading: "realistic",
            realisticMaterial: {
              roughness: 0.6,
              textureTiling: 20,
              detailTexture: "ROOT_PATH/data-gl/asset/woods.jpg",
            },
            postEffect: {
              enable: true,
              bloom: {
                enable: false,
              },
              SSAO: {
                enable: true,
                quality: "medium",
                radius: 10,
                intensity: 1.2,
              },
              depthOfField: {
                enable: false,
                focalRange: 5,
                fstop: 1,
                blurRadius: 6,
              },
            },
            groundPlane: {
              show: true,
              color: "#333",
            },
            light: {
              main: {
                intensity: 6,
                shadow: true,
                shadowQuality: "high",
                alpha: 30,
              },
              ambient: {
                intensity: 0,
              },
              ambientCubemap: {
                texture: "ROOT_PATH/data-gl/asset/canyon.hdr",
                exposure: 2,
                diffuseIntensity: 1,
                specularIntensity: 1,
              },
            },
            viewControl: {
              minBeta: -360,
              maxBeta: 360,
            },

            itemStyle: {
              areaColor: "#666",
            },

            label: {
              textStyle: {
                color: "white",
              },
            },

            silent: true,

            instancing: true,

            boxWidth: 200,
            boxHeight: 1,

            data: regions,
          },
        ],
      });
    },
    echartsMaps() {
      let myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        series: [
          {
            type: "map3D",
            map: "宁夏",
            name: "宁夏",
            selectedMode: "single",
            boxDepth: 90,
            regionHeight: 8,
            viewControl: {
              distance: 150, //地图视角 控制初始大小
              rotateSensitivity: 1, //禁止旋转
              zoomSensitivity: 1, //禁止缩放
            },
            label: {
              show: true, //是否显示市
              textStyle: {
                color: "#0a1640", //文字颜色
                fontSize: 12, //文字大小
                backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
              },
            },
            itemStyle: {
              color: "#81d0f1", //地图颜色
              borderWidth: 0.5, //分界线wdith
              borderColor: "#459bca", //分界线颜色
            },
            emphasis: {
              label: {
                show: true, //是否显示高亮
                textStyle: {
                  color: "#fff", //高亮文字颜色
                },
              },
              itemStyle: {
                color: "#0489d6", //地图高亮颜色
              },
            }, //高亮市区  echarts  bug 不生效
            regions: [
              {
                name: "银川市",
                itemStyle: {
                  areaColor: "#f00",
                },
              },
            ],
          },
        ],
      });
    },
    dateFormat(format, v) {
      if (v) {
        var o = {
          "M+": v.getMonth() + 1, //月份
          "d+": v.getDate(), //日
          "h+": v.getHours() % 12 == 0 ? 12 : v.getHours() % 12, //小时
          "H+": v.getHours(), //小时
          "m+": v.getMinutes(), //分
          "s+": v.getSeconds(), //秒
          "q+": Math.floor((v.getMonth() + 3) / 3), //季度
          S: v.getMilliseconds(), //毫秒
        };
        var week = {
          0: "\u65e5",
          1: "\u4e00",
          2: "\u4e8c",
          3: "\u4e09",
          4: "\u56db",
          5: "\u4e94",
          6: "\u516d",
        };
        if (/(y+)/.test(format)) {
          format = format.replace(
            RegExp.$1,
            (v.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        }
        if (/(E+)/.test(format)) {
          format = format.replace(
            RegExp.$1,
            (RegExp.$1.length > 1
              ? RegExp.$1.length > 2
                ? "\u661f\u671f"
                : "\u5468"
              : "") + week[v.getDay() + ""]
          );
        }
        for (var k in o) {
          if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
          }
        }
        return format;
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background-color: transparent;;;color:#fff;";
    },
    cesium() {
      var Google = new Cesium.UrlTemplateImageryProvider({ url: this.url });
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        shouldAnimate: true,
        homeButton: false, //是否显示Home按钮
        fullscreenButton: false, //是否显示全屏按钮
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        requestRenderMode: true, //启用请求渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
        imageryProvider: Google,
        terrainProvider: Cesium.createWorldTerrain({
          //开启地形
          requestWaterMask: true,
          requestVertexNormals: true,
        }),
      });
      //jeojson 加载宁夏地图
      Cesium.Math.setRandomNumberSeed(0);
      // var promise=Cesium.GeoJsonDataSource.load(`${this.publicPath}static/mapgeoJsonnx.json`);
      var promise = this.viewer.dataSources.add(
        Cesium.GeoJsonDataSource.load(
          `${this.publicPath}static/mapgeoJsonnx.json`,
          {
            stroke: Cesium.Color.RAD,
            fill: Cesium.Color.TRANSPARENT,
            strokeWidth: 3,
            markerSymbol: "?",
          }
        )
      );
      console.log(promise);
      this.viewer.flyTo(promise);

      //  去除 版权图标
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
      // this.viewer.scene.globe.depthTestAgainstTerrain=true;
      /**
       * 删除所有实体模型
       */
      this.viewer.entities.removeAll();
      const windt = wtTree;
      for (let i in windt) {
        if (i == 8) return;
        var position = Cesium.Cartesian3.fromDegrees(
          windt[i].lng,
          windt[i].lat,
          1650
        );
        this.addFengjiModel(position);
      }
      // var position = Cesium.Cartesian3.fromDegrees(117.48, 30.67, 0);
    },
    addFengjiModel(position) {
      var hpRoll = new Cesium.HeadingPitchRoll(
        Cesium.Math.toRadians(90),
        0,
        0
      );
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpRoll
      );
      var color = Cesium.Color.LIME;
      // 添加模型
      var model = this.viewer.entities.add({
        // 模型id
        // id:'model',
        // 模型位置
        position: position,
        // 模型方向
        orientation: orientation,
        // 模型资源
        model: {
          // 模型路径
          uri: `${this.publicPath}static/WT01.glb`,
          // 模型最小刻度
          minimumPixelSize: 100,
          // 模型最大刻度
          maximumSize: 100,
          //设置模型最大放大大小
          maximumScale: 150,
          // 模型是否可见
          show: true,
          // 模型轮廓颜色
          silhouetteColor: Cesium.Color.WHITE,
          // 模型颜色  ，这里可以设置颜色的变化
          color: Cesium.Color.WHITE,
          // 仅用于调试，显示魔仙绘制时的线框
          debugWireframe: false,
          // 仅用于调试。显示模型绘制时的边界球。
          debugShowBoundingVolume: false,
          scale: 0.05,
          runAnimations: true, //是否运行模型中的动画效果
        },
        // 添加描述
        description: "风机模型",
      });
      // 视角切换到模型
      // viewer.trackedEntity = model;
      // window.m = model;
    },

    //初始化weosocket
    initWebSocket() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持WebSocket");
        return false;
      }
      const wsuri = "ws://10.155.32.4:8010/company";

      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    //连接成功
    websocketonopen() {
      console.log("WebSocket连接成功");
      // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
      let self = this;
      this.timer = setInterval(() => {
        try {
          self.websock.send("test");
          console.log("发送消息");
        } catch (err) {
          console.log("断开了：" + err);
          self.connection();
        }
      }, 30000);
    },
    //接收后端返回的数据，可以根据需要进行处理
    websocketonmessage(e) {
      var vm = this;
      // this.websocketData = JSON.parse(e.data);
      var res = JSON.parse(e.data);
      this.res.rwcl = res.rwcl
      this.res.ywcl = res.ywcl
      this.res.nwcl = res.nwcl
      this.environment[0].val = res.tq;
      this.environment[1].val = res.wd;
      this.environment[2].val = res.xdsd;
      this.environment[3].val = res.fl;
      this.environment[4].val = res.kqmd.toFixed(2);

      this.capacity[0].val = res.zjrl.toFixed(2);
      this.capacity[1].val = res.aqts;
      this.capacity[2].val = res.jpeyht.toFixed(2);
      this.capacity[3].val = res.jpeyhl.toFixed(2);
      this.capacity[4].val = res.jyys.toFixed(2);
      this.capacity[5].val = res.jybm.toFixed(2);

      // this.load[0].val = res.rzgfh.toFixed(2);
      this.load[0].val = res.dqfh.toFixed(2);
      this.load[1].val = res.rzgfh.toFixed(2);
      this.load[2].val = res.yzgfh.toFixed(2);
      this.load[3].val = res.ycgl.toFixed(2);
      this.load[4].val = res.bzgl.toFixed(2);
      this.load[5].val = res.llgl.toFixed(2);

      this.electricity[0].val = res.swdl.toFixed(2);
      this.electricity[1].val = res.gwdl.toFixed(2);
      this.electricity[2].val = res.mtbf.toFixed(2);
      this.electricity[3].val = res.mttr.toFixed(2);
      // this.electricity[4].val = res.zhcydl.toFixed(2);
      this.electricity[4].val = 0.14;
      this.electricity[5].val = res.sbklyl.toFixed(2);
      this.electricity[6].val = res.fnlyl.toFixed(2);

      this.wind[0].val = res.fdcjr;
      this.wind[1].val = res.fdcbw;
      this.wind[2].val = res.fdcdj;
      this.wind[3].val = res.fdcjx;
      this.wind[4].val = res.fdcgz;
      this.wind[5].val = res.fdcxd;
      this.wind[6].val = res.fdcsl;
      this.wind[7].val = res.fdclx;

      this.light[0].val = res.gdcjr;
      this.light[1].val = res.gdcbw;
      this.light[2].val = res.gdcdj;
      this.light[3].val = res.gdcjx;
      this.light[4].val = res.gdcgz;
      this.light[5].val = res.gdcxd;
      this.light[6].val = res.gdcsl;
      this.light[7].val = res.gdclx;

      this.windData[0].mhs = res.mhsfdl.toFixed(2);
      this.windData[0].qs = res.qsfdl.toFixed(2);
      this.windData[0].xs = res.xsfdl.toFixed(2);
      this.windData[0].sbq = res.sbqfdl.toFixed(2);
      this.windData[0].nss = res.nssfdl.toFixed(2);
      this.windData[0].pl = res.plfdl.toFixed(2);
      this.windData[0].dwk = res.dwkfdl.toFixed(2);
      this.windData[0].xh = res.xhfdl.toFixed(2);

      this.windData[1].mhs = res.mhsfs.toFixed(2);
      this.windData[1].qs = res.qsfs.toFixed(2);
      this.windData[1].xs = res.xsfs.toFixed(2);
      this.windData[1].sbq = res.sbqfs.toFixed(2);
      this.windData[1].nss = res.nssfs.toFixed(2);
      this.windData[1].pl = res.plfs.toFixed(2);
      this.windData[1].dwk = res.dwkfs.toFixed(2);
      this.windData[1].xh = res.xhfs.toFixed(2);

      this.windData[2].mhs = res.mhsllgl.toFixed(2);
      this.windData[2].qs = res.qsllgl.toFixed(2);
      this.windData[2].xs = res.xsllgl.toFixed(2);
      this.windData[2].sbq = res.sbqllgl.toFixed(2);
      this.windData[2].nss = res.nssllgl.toFixed(2);
      this.windData[2].pl = res.plllgl.toFixed(2);
      this.windData[2].dwk = res.dwkllgl.toFixed(2);
      this.windData[2].xh = res.xhllgl.toFixed(2);

      this.windData[3].mhs = res.mhscxgl.toFixed(2);
      this.windData[3].qs = res.qscxgl.toFixed(2);
      this.windData[3].xs = res.xscxgl.toFixed(2);
      this.windData[3].sbq = res.sbqcxgl.toFixed(2);
      this.windData[3].nss = res.nsscxgl.toFixed(2);
      this.windData[3].pl = res.plcxgl.toFixed(2);
      this.windData[3].dwk = res.dwkcxgl.toFixed(2);
      this.windData[3].xh = res.xhcxgl.toFixed(2);

      this.windData[4].mhs = res.mhsagc.toFixed(2);
      this.windData[4].qs = res.qsagc.toFixed(2);
      this.windData[4].xs = res.xsagc.toFixed(2);
      this.windData[4].sbq = res.sbqagc.toFixed(2);
      this.windData[4].nss = res.nssagc.toFixed(2);
      this.windData[4].pl = res.plagc.toFixed(2);
      this.windData[4].dwk = res.dwkagc.toFixed(2);
      this.windData[4].xh = res.xhagc.toFixed(2);
    },
    //连接建立失败重连
    websocketonerror(e) {
      console.log(`连接失败的信息：`, e);
      this.initWebSocket(); // 连接失败后尝试重新连接
    },
    //关闭连接
    websocketclose(e) {
      console.log("断开连接", e);
    },
  },
};
</script>
<style lang="scss" scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.mapDiv {
  width: 100%;
  height: 500px;
}

#myChart {
  width: 1900px;
  height: 950px;
}
.main {
  position: absolute;
  font-size: 14px;
  color: #fff;
  // background-color: #000;
}
.main_left {
  width: 12%;
  left: 10px;
  top: 10px;
}
.main_right {
  width: 8%;
  right: 10px;
  top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.main_bootom {
  display: flex;
  width: calc(99% - 10px);
  left: 10px;
  bottom: 0;
}
.disflex {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 20px;
  margin-bottom: 20px;
  justify-content: flex-start;
}
.bgcolor {
  background-color: rgba(48, 48, 48, 0.8);
  box-sizing: border-box;
  border-radius: 10px;
}
.title {
  color: aqua;
  font-size: 24px;
}
.time {
  align-items: center;
  .time_t {
    width: 100%;
    color: aqua;
    font-size: 24px;
  }
  .time_b {
    width: 100%;
    display: flex;
    .tie_b_y {
      margin-right: 10px;
    }
  }
}
.environment {
  .weather {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    i {
      font-size: 32px;
      align-self: center;
    }
    .weather_l {
      width: 55%;
      .weather_l_b {
        color: aqua;
        font-size: 18px;
      }
    }
  }
}
.capacity {
  font-size: 16px;
  .capacity_bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
    .capacity_l_l {
      flex: 1;
    }
    .capacity_l_r {
      color: aqua;
    }
  }
}
.load {
  width: 15%;
  margin-right: 10px;
  padding: 8px 0;
  margin-bottom: 5px;
  .load_bar {
    display: flex;
    width: 33.3%;
    flex-direction: column;
    align-content: center;
    margin-bottom: 15px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .load_bar_t {
      margin-bottom: 20px;
    }
    .load_bar_b {
      color: aqua;
      margin-bottom: 15px;
    }
  }
}
.progress {
  width: 18%;
  margin-right: 10px;
  align-items: center;
  margin-bottom: 5px;
  .progress_bar {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    height: 40px;
    ::deep .el-progress__text {
      color: #fff !important;
    }
    .progress_bar_span {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
.electricity {
  display: flex;
  padding: 10px 20px;
  flex-direction: column;
  width: 12%;
  margin-bottom: 5px;
  .electricity_bar {
    display: flex;
    width: 100;
    justify-content: space-between;
    margin-bottom: 22px;
    align-items: center;
    .electricity_bar_t {
      flex: 1;
    }
    .electricity_bar_b {
      color: aqua;
      span {
        color: #fff;
      }
    }
  }
}
.wind {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .wind_title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
  }
  .wind_bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
    .wind_bar_r {
      color: aqua;
    }
  }
}
.light {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .light_title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
  }
  .light_bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
    .light_bar_r {
      color: aqua;
    }
  }
}
.windData {
  width: 1020px;
  margin-bottom: 5px;
  margin-right: 10px;
}
</style>
<style  lang="scss" >
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.el-table tr {
  background-color: transparent !important;
}
.el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
.el-progress-bar{
  width: 95%;
}
</style>
