<template>
  <div class="box">
    <div class="imgLeft">
      <div
        @click="goOne('1号生产线')"
        :class="click1 == '1号生产线' ? 'active' : ''"
      >
        1号生产线
      </div>
      <div
        @click="goOne('2号生产线')"
        :class="click1 == '2号生产线' ? 'active' : ''"
      >
        2号生产线
      </div>
      <div
        @click="goOne('3号生产线')"
        :class="click1 == '3号生产线' ? 'active' : ''"
      >
        3号生产线
      </div>
      <div @click="goOne('配电室')" :class="click1 == '配电室' ? 'active' : ''">
        配电室
      </div>
    </div>

    <div class="imgRight">
      <div
        @click="goTwo('破碎系统')"
        :class="click2 == '破碎系统' ? 'active' : ''"
      >
        破碎系统
      </div>
      <div
        @click="goTwo('生料系统')"
        :class="click2 == '生料系统' ? 'active' : ''"
      >
        生料系统
      </div>
      <div
        @click="goTwo('回转窑系统')"
        :class="click2 == '回转窑系统' ? 'active' : ''"
      >
        回转窑系统
      </div>
      <div
        @click="goTwo('煤磨系统')"
        :class="click2 == '煤磨系统' ? 'active' : ''"
      >
        煤磨系统
      </div>
      <div
        @click="goTwo('水泥磨系统')"
        :class="click2 == '水泥磨系统' ? 'active' : ''"
      >
        水泥磨系统
      </div>
    </div>

    <div class="left" v-show="flag">
      <img src="../../assets/img/标题/能源监测-电.png" class="title" />
      <div class="qcssdh">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>全厂实时电荷</p>
        </div>
        <div class="data">
          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
            >年</span
          >
          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
            >月</span
          >
          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
            >日</span
          >
        </div>
        <div id="qcssdh"></div>
      </div>
      <div class="qcydl">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>全厂用电量</p>
        </div>
        <div class="chartBox">
          <div class="chartbox" v-for="item in list">
            <span>{{ item.name }}</span>
            <div class="bigBox">
              <div
                class="smallBox"
                :style="{ width: `${35 * item.value}px` }"
              ></div>
            </div>
            <span>{{ item.value }}kWh</span>
          </div>
        </div>
      </div>
      <div class="zjtpt">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>总降拓扑图</p>
        </div>
        <div class="imgBox1">
          <el-image
            v-for="item in arr"
            :src="item.url"
            :preview-src-list="item.srcList"
          >
          </el-image>
        </div>
      </div>
    </div>

    <div class="right" v-show="flag">
      <div class="yrfd">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>余热发电</p>
        </div>
        <div class="chartBox">
          <div id="yrfd"></div>
        </div>
      </div>
      <div class="ljfdl">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>垃圾发电量</p>
        </div>
        <div class="chartBox">
          <div id="ljfdl"></div>
        </div>
      </div>
      <div class="qcsbydpm">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>全厂设备用电排名</p>
        </div>
        <div class="chartBox">
          <div class="chartbox" v-for="item in list1">
            <span>{{ item.name }}</span>
            <div class="bigBox">
              <div
                class="smallBox"
                :style="{ width: `${40 * item.value}px` }"
              ></div>
            </div>
            <span>{{ item.value }}kWh</span>
          </div>
        </div>
      </div>
    </div>
    <div class="area1">
      <router-view />
    </div>
  </div>
</template>
<script>
import { RouterView } from "vue-router";
import * as echarts from "echarts";
import Viewer from "viewerjs";
export default {
  data() {
    return {
      res: "月",
      click1: "",
      click2: "",
      flag: false,
      option1: {
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            interval: 0, //代表显示所有x轴标签显示
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW",
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            padding: 10,
          },
          min: 0,
          max: 500,
          interval: 100,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
          },
        },
        grid: {
          // 让图表占满容器
          //   top: "5%",
          left: "8%",
          right: "5%",
          bottom: "8%",
        },
        series: [
          {
            type: "line",
            symbol: "circle",
            symbolSize: 20,
            data: [200, 300, 500, 400, 334],
            itemStyle: {
              normal: {
                color: "#00FF00",
                lineStyle: {
                  width: 5,
                  color: "#21FF55", //折线颜色
                },
              },
            },
          },
        ],
      },
      option3: {
        legend: {
          data: [{ icon: "rect", name: "垃圾发电量" }],
          textStyle: {
            color: "#fff",
            fontSize: "20px",
          },
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            interval: 0, //代表显示所有x轴标签显示
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW",
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            padding: 10,
          },
          min: 0,
          max: 500,
          interval: 100,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
          },
        },
        grid: {
          // 让图表占满容器
          //   top: "5%",
          left: "8%",
          right: "5%",
          bottom: "8%",
        },
        series: [
          {
            type: "line",
            name: "垃圾发电量",
            symbolSize: 15,
            data: [200, 300, 500, 400, 334],
            itemStyle: {
              normal: {
                color: "#43FFF4",
                lineStyle: {
                  width: 5,
                  color: "#43FFF4", //折线颜色
                },
              },
            },
          },
        ],
      },
      list: [
        {
          name: "1号生产线",
          value: "15.20",
        },
        {
          name: "2号生产线",
          value: "6.21",
        },
        {
          name: "3号生产线",
          value: "6.21",
        },
        {
          name: "生活办公区",
          value: "6.52",
        },
      ],
      list1: [
        {
          name: "回转窑",
          value: "15.20",
        },
        {
          name: "熟料收尘",
          value: "6.21",
        },
        {
          name: "篦冷机",
          value: "6.21",
        },
        {
          name: "生料收尘",
          value: "6.52",
        },
        {
          name: "生料磨",
          value: "4.57",
        },
        {
          name: "预热器",
          value: "4.27",
        },
        {
          name: "配电室",
          value: "3.27",
        },
      ],
      arr: [
        {
          url: require("../../assets/tpt/总降电力室.png"),
          srcList: [require("../../assets/tpt/总降电力室.png")],
        },
      ],
    };
  },
  methods: {
    initViewer() {
      this.viewer = new Viewer(this.$el, {
        inline: false,
        button: true,
        navbar: true,
        title: false,
        toolbar: true,
        tooltip: true,
        movable: false,
        zoomable: true,
        rotatable: false,
        scalable: true,
        transition: true,
        fullscreen: true,
        keyboard: true,
        url(image) {
          console.log(image.src);
          return image.src;
        },
        ready() {
          console.log("Viewer is ready");
        },
      });
    },
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
    sendMessageToCSharp(name) {
      window.vuplex.postMessage({
        type: "Tog",
        message: `${name}_true`,
      });
    },
    goOne(a) {
      this.click2 = "";
      this.click1 = a;
      this.sendMessageToCSharp(this.click1);
      if (this.click1 == "配电室") {
        this.$router.replace(
          "/area/nyjcd/pds",
          () => {},
          () => {}
        );
      } else {
        this.$router.replace(
          `/area/nyjcd/scx1?type=${this.click1}`,
          () => {},
          () => {}
        );
      }
    },
    goTwo(a) {
      this.click1 = "";
      this.click2 = a;
      this.sendMessageToCSharp(this.click2);
      this.$router.replace(
        `/area/nyjcd/scx1?type=${this.click2}`,
        () => {},
        () => {}
      );
    },
    //余热发电  3d
    yrfd() {
      const offsetX = 24; //bar宽
      const offsetY = 8; //倾斜角度
      // 绘制左侧面
      const CubeLeft = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          // console.log(shape);
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - offsetX, shape.y - offsetY];
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
          const c4 = [shape.x + offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
          // const c3 = [shape.x, shape.y - offsetX];
          const c3 = [shape.x, shape.y - offsetY * 2];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
      let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
      let seriesData = [100, 200, 300, 400, 300];
      //拿到最大值
      const maxValue = Math.max(...seriesData);

      let colorArr = [
        ["#04E886"],
        ["#0AE841", "rgba(56,231,197,1)"],
        ["#02C25F", "rgba(11,194,121,1)"],
      ];
      let option = {
        // legend: {
        //   // data: [
        //   //   {
        //   //     icon: "rect",
        //   //     name: "余热发电",
        //   //   },
        //   // ],
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: "20px",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params, ticket, callback) {
            const item = params[1];
            return item.name + " : " + item.value;
          },
        },
        grid: {
          // 让图表占满容器
          left: "5%",
          right: "5%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 20,
            color: "#fff",
            margin: 15,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:t",
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            padding: 10,
          },
          splitLine: {
            show: true,
            lineStyle: {},
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
          },
          // boundaryGap: ['20%', '20%'],
        },
        series: [
          {
            type: "custom",
            name: "余热发电",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: colorArr[1][0],
                        },
                        {
                          offset: 1,
                          color: colorArr[1][1],
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: colorArr[2][0],
                        },
                        {
                          offset: 1,
                          color: colorArr[2][1],
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: colorArr[0][0],
                        },
                        {
                          offset: 1,
                          color: colorArr[0][0],
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            data: seriesData,
          },
          {
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: (e) => {
                  return e.value === maxValue ? e.value : "";
                },
                fontSize: 20,
                color: "#09E83E",
                offset: [0, -15],
              },
            },
            itemStyle: {
              color: "transparent",
            },
            tooltip: {},
            data: seriesData,
          },
        ],
      };
      this.defineEcharts("yrfd", option);
    },
  },
  created() {
    // if (window.vuplex) {
    //   addMessageListener();
    // } else {
    //   window.addEventListener("vuplexready", addEventListener);
    // }
    // function addMessageListener() {
    //   window.vuplex.addEventListener("message", function (event) {
    //     let json = event.data;
    //     console.log("JSON received" + json);
    //   });
    // }
  },
  watch: {
    // 监听,当路由发生变化的时候执行
    $route: {
      handler(to, from) {
        if (to.path == "/area/nyjcd") {
          this.flag = true;
        } else {
          this.flag = false;
        }
      },
      deep: true, // 深度观察监听
      immediate: true, // 第一次初始化渲染就可以监听到
    },
  },
  mounted() {
    let dom = document.querySelector(".area1");
    dom.style.pointerEvents = "none";
    this.initViewer();
    this.defineEcharts("qcssdh", this.option1);
    // this.defineEcharts("yrfd", this.option2);
    this.yrfd();
    this.defineEcharts("ljfdl", this.option3);
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  components: { RouterView },
};
</script>
<style lang="less" scoped>
.area1 {
  width: 100%;
  height: 100%;
  padding-top: 400px;
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  position: absolute;
  pointer-events: none;
}

.box {
  width: 100%;
  height: 100%;
  padding-top: 400px;
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
  justify-content: space-between;
  position: relative;
  pointer-events: all;
}

.imgLeft {
  z-index: 100;
  position: absolute;
  left: 1300px;
  top: 1500px;

  div {
    width: 540px;
    height: 147px;
    text-align: center;
    line-height: 147px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    font-family: "FZZCHJW-1";
    background-image: url("../../assets/nyjc/左默认.png");
    margin: 37px;
    cursor: pointer;
  }

  .active {
    background-image: url("../../assets/nyjc/左选中.png");
  }
}

.imgRight {
  z-index: 100;
  position: absolute;
  right: 1300px;
  top: 1300px;

  div {
    width: 550px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    background-image: url("../../assets/nyjc/右默认.png");
    background-size: cover;
    font-family: "FZZCHJW-1";
    margin: 37px;
    cursor: pointer;
  }

  .active {
    background-image: url("../../assets/nyjc/右选中.png");
  }
}

.left {
  width: 1237px;
  height: 2500px;
  margin-left: 61px;
  background-image: url("../../assets/img/侧边.png");
  padding-left: 59px;
  padding-right: 45px;
  box-sizing: border-box;

  .title {
    margin-top: 15px;
    margin-left: 60px;
  }

  .qcssdh {
    position: relative;
    margin-top: 56px;

    .data {
      position: absolute;
      font-size: 20px;
      font-family: "DOUYU";
      color: #ffffff;
      line-height: 18px;
      display: flex;
      right: 0;
      top: 120px;
      z-index: 1;

      span {
        width: 122px;
        height: 38px;
        margin: 10px;
        display: block;
        line-height: 38px;
        text-align: center;
      }

      .active {
        background: linear-gradient(
          to right,
          rgba(33, 76, 124, 0.3) 20%,
          rgba(152, 207, 230, 0.3) 100%,
          rgba(33, 76, 124, 0.3) 20%
        );
      }
    }

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    #qcssdh {
      width: 1155px;
      height: 600px;
      margin-top: 50px;
    }
  }

  .qcydl {
    position: relative;
    margin-top: 56px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .chartBox {
      width: 1155px;
      margin-top: 50px;

      .chartbox {
        width: 100%;
        color: #fff;
        font-size: 30px;
        align-items: center;
        display: flex;
        margin-top: 100px;

        .bigBox {
          width: 661px;
          height: 65px;
          background-color: #273546;

          .smallBox {
            width: 100px;
            height: 65px;
            background: linear-gradient(
              to right,
              rgba(1, 191, 249, 1) 20%,
              rgba(68, 161, 201, 1) 100%,
              rgba(42, 196, 243, 1) 20%
            );
          }
        }

        span:nth-of-type(1) {
          width: 231px;
        }

        span:nth-of-type(2) {
          color: #10ff3c;
          margin-left: 20px;
        }
      }
    }
  }

  .zjtpt {
    position: relative;
    margin-top: 56px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .imgBox1 {
      margin-top: 50px;
      width: 1156px;
      height: 500px;
      pointer-events: all;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.right {
  width: 1237px;
  height: 2500px;
  margin-right: 61px;
  background-image: url("../../assets/img/侧边.png");
  padding-left: 59px;
  padding-right: 45px;
  box-sizing: border-box;

  .yrfd {
    position: relative;
    margin-top: 130px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .chartBox {
      margin-top: 50px;

      #yrfd {
        width: 1156px;
        height: 600px;
      }
    }
  }

  .ljfdl {
    position: relative;
    margin-top: 50px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .chartBox {
      margin-top: 50px;

      #ljfdl {
        width: 1156px;
        height: 600px;
      }
    }
  }

  .qcsbydpm {
    position: relative;
    margin-top: 50px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .chartBox {
      width: 1155px;
      margin-top: 50px;

      .chartbox {
        width: 100%;
        color: #fff;
        font-size: 30px;
        align-items: center;
        display: flex;
        margin-top: 40px;

        .bigBox {
          width: 661px;
          height: 26px;
          background-color: #273546;

          .smallBox {
            width: 100px;
            height: 26px;
            background: linear-gradient(
              to right,
              rgba(1, 191, 249, 1) 20%,
              rgba(68, 161, 201, 1) 100%,
              rgba(42, 196, 243, 1) 20%
            );
          }
        }

        span:nth-of-type(1) {
          width: 231px;
        }

        span:nth-of-type(2) {
          color: #10ff3c;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
