<template>
  <div id="app">
    <div id="container"></div>
    <div class="main main_left">
      <div class="title disflex bgcolor">麻黄山01号风机</div>
      <div class="time disflex bgcolor">
        <div class="time_t">{{timeHms}}</div>
        <div class="time_b">
          <div class="tie_b_y">{{timeYMd}}</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>
    <div class="main main_bootom">
      <div class="state disflex bgcolor">
        <div class="state_bar" v-for="(item,index) in state" :key="index">
          <div class="state_bar_t">{{item.text}}</div>
          <div class="state_bar_b">{{item.val}}</div>
        </div>
      </div>
      <div class="category disflex bgcolor">
        <div id="categoryEcharts"></div>
      </div>
      <div class="warn disflex bgcolor">
        <div id="warnEcharts"></div>
      </div>
      <div class="maintain disflex bgcolor">
        <el-table
          :data="maintainData"
          style="width: 100%"
          :row-style="getRowClass"
          :cell-style="getRowClass"
          :header-row-style="getRowClass"
          :header-cell-style="getRowClass"
        >
          <el-table-column prop="date" label="时间" width="100"></el-table-column>
          <el-table-column prop="type" label="类型" width="100"></el-table-column>
          <el-table-column prop="parts" label="部件" width></el-table-column>
        </el-table>
      </div>
      <div class="property disflex bgcolor">
        <div id="propertyEcharts"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { MTLLoader, OBJLoader } from "three-obj-mtl-loader";
var ColladaLoader = require("three-collada-loader");
export default {
  name: "App",
  data() {
    return {
      timeYMd: this.dateFormat("yyyy-MM-dd", new Date()),
      timeHms: this.dateFormat("HH:mm:ss", new Date()),
      environment: [
        {
          text: "天气",
          val: "大雨",
        },
        {
          text: "温度",
          val: "28℃",
        },
        {
          text: "相对湿度",
          val: "60%",
        },
        {
          text: "风力",
          val: "4-5级西北风",
        },
        {
          text: "空气密度",
          val: "120",
        },
      ],
      capacity: [
        {
          text: "月MTBF",
          val: 286.5,
          unit: "MW",
        },
        {
          text: "月设备可利用率",
          val: "90%",
          unit: "",
        },
      ],
      state: [
        {
          text: "机舱",
          val: "xxx",
        },
        {
          text: "传动链",
          val: "xxx",
        },
        {
          text: "测风系统",
          val: "xxx",
        },
        {
          text: "齿轮箱",
          val: "xxx",
        },
        {
          text: "发电机",
          val: "xxx",
        },
        {
          text: "变桨系统",
          val: "xxx",
        },
        {
          text: "液压系统",
          val: "xxx",
        },

        {
          text: "偏航系统",
          val: "xxx",
        },
        {
          text: "塔底柜",
          val: "xxx",
        },
        {
          text: "其他",
          val: "xxx",
        },
      ],
      maintainData: [
        {
          date: "2020/9/4",
          type: "1",
          parts: "发电机",
        },
        {
          date: "2020/9/4",
          type: "1",
          parts: "发电机",
        },
        {
          date: "2020/9/4",
          type: "1",
          parts: "发电机",
        },
      ],
      /**场景 */
      scene: null,
      /**相机 */
      camera: null,
      /**渲染 */
      renderer: null,
      /**控制器 */
      controls: null,
      /**射线投射器 */
      raycaster: null,
      /**鼠标 */
      mouse: null,
      /**屋顶 */
      roof: null,
      /**组 */
      group: null,
      requestId: null,
      /**渲染文字 */
      CSSRender: null,
      /**容器 */
      container: null,
      publicPath: process.env.BASE_URL,
    };
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background-color: transparent;;;color:#fff;";
    },
    /**初始化 */

    initScene() {
      this.scene = new THREE.Scene();
      const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
      this.scene.add(ambientLight);
      var axisHelper = new THREE.AxisHelper(15);
      this.scene.add(axisHelper);
    },
    initCamera() {
      const aspect = window.innerWidth / 1080; //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
      this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);
      this.camera.position.set(15, 25, 20);
      this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 让相机指向原点
      const pointLight = new THREE.PointLight(0xffffff, 0.8);
      this.camera.add(pointLight);
      this.scene.add(this.camera);
    },
    initRender() {
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, 1080); //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
      // this.renderer.domElement.style.position = 'absolute';
      // this.renderer.domElement.style.top = 0;
      this.container = document.getElementById("container");
      this.container.appendChild(this.renderer.domElement);
    },
    animate() {
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animate);
    },
    initControl() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.target = new THREE.Vector3(0, 0, 0); //控制目标的坐标（旋转时以此坐标为中心点）
      // 视角最小距离
      this.controls.minDistance = 12;
      // 视角最远距离
      this.controls.maxDistance = 100;
      // 最大角度
      this.controls.maxPolarAngle = Math.PI / 4;
    },

    init() {
      this.initScene();
      this.initRender();
      this.initCamera();
      this.initControl();
    },
    /**加载模型 */
    loadPlant() {
      let that = this;
      let objLoader = new OBJLoader();
      let mtlLoader = new MTLLoader();
      mtlLoader.load(`${that.publicPath}static/fj.mtl`, (materials) => {
        materials.preload();
        objLoader.setMaterials(materials);
        objLoader.load(`${that.publicPath}static/fj.obj`, (object) => {
          console.log(object);
          console.log(object.children[0].rotation.x);
          object.position.set(-10, -19, 15);
          object.scale.set(0.0009, 0.0009, 0.0009);
          this.scene.add(object);
          setInterval(
            this.rotateAroundWorldAxis(object.children[1], "Z", "2"),
            100
          );
        });
      });
    },
    load3DModel() {
      let that = this;
      var loader = new ColladaLoader();
      loader.load(`${that.publicPath}static/WT.DAE`, function (collada) {
        //找到模型中需要的对象。将相机看向这个对象是为了让这个对象显示在屏幕中心
        collada.scene.traverse(function (child) {
          if (child instanceof THREE.SkinnedMesh) {
            camera.lookAt(child.position);
          }
        });
        //将模型的场景加入到整体的场景
        that.scene.add(collada.scene);
      });
    },
    rotateAroundWorldAxis(object, axis, radians) {
      var rotWorldMatrix = new THREE.Matrix4();
      rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
      rotWorldMatrix.multiply(object.matrix); // pre-multiply
      object.matrix = rotWorldMatrix;
      object.rotation.setFromRotationMatrix(object.matrix);
    },
    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;
      }
    },
    category() {
      let myChart = this.$echarts.init(
        document.getElementById("categoryEcharts")
      );
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        textStyle: {
          color: "#fff",
        },
        series: [
          {
            data: [0, 70, 82, 84, 85, 86, 88],
            type: "line",
            smooth: true,
          },
          {
            data: [0, 67, 78, 80, 81, 83, 87],
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    warn() {
      let myChart = this.$echarts.init(document.getElementById("warnEcharts"));
      myChart.setOption({
      
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
            },
          },
          indicator: [
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
          ],
        },
        series: [
          {
            name: "预算",
            type: "radar",
            data: [
              {
                value: [
                  4300,
                  15000,
                  4000,
                  15000,
                  5000,
                  15900,
                  3500,
                  15000,
                  3100,
                  15000,
                ],
                name: "预算分配（Allocated Budget）",
              },
            ],
          },
        ],
      });
    },
    property() {
      let myChart = this.$echarts.init(
        document.getElementById("propertyEcharts")
      );
      myChart.setOption({
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
            },
          },
          indicator: [
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
            { name: "报警", max: 20000 },
          ],
        },
        series: [
          {
            name: "预算",
            type: "radar",
            data: [
              {
                value: [
                  4300,
                  15000,
                  4000,
                  15000,
                  5000,
                  15900,
                  3500,
                  15000,
                  3100,
                  15000,
                ],
                name: "预算分配（Allocated Budget）",
              },
            ],
          },
        ],
      });
    },
  },
  mounted() {
    this.init();
    this.animate();
    // this.loadPlant();
    this.load3DModel();
    this.category();
    this.warn();
    this.property();
  },
};
</script>

<style lang="scss"  scope>
#container {
  height: 1080px;
}
.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(0, 0, 0, 0.8);
  box-sizing: border-box;
}
.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;
    margin: 10px 0;
    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;
    }
  }
}
.state {
  width: 20%;
  margin-right: 10px;
  padding: 8px 0;
  margin-bottom: 5px;
  box-sizing: border-box;
  .state_bar {
    display: flex;
    width: 20%;
    flex-direction: column;
    align-content: center;
    margin-bottom: 0px;
    justify-content: center;
    align-items: center;
    .state_bar_t {
      margin-bottom: 0px;
    }
    .state_bar_b {
      color: aqua;
      span {
        color: #fff;
      }
    }
  }
}
.category {
  width: 20%;
  margin-right: 10px;
  padding: 8px 0;
  margin-bottom: 5px;
  box-sizing: border-box;
  #categoryEcharts {
    width: 100%;
    height: 100%;
  }
}
.warn {
  width: 20%;
  margin-right: 10px;
  padding: 8px 0;
  margin-bottom: 5px;
  box-sizing: border-box;
  #warnEcharts {
    width: 100%;
    height: 200px;
  }
}
.maintain {
  width: 20%;
  margin-right: 10px;
  padding: 8px 0;
  margin-bottom: 5px;
}
.property {
  width: 20%;
  margin-right: 10px;
  padding: 8px 0;
  margin-bottom: 5px;
  box-sizing: border-box;
  #propertyEcharts {
    width: 100%;
    height: 200px;
  }
}
</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;
}
</style>
