<template>
  <div class="box">
    <div class="left">
      <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">
          <img src="../../assets/znyw/tpt.png" />
        </div>
      </div>
    </div>

    <div class="right">
      <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>
</template>
<script>
export default {
  data() {
    return {
      res: "月",
      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", //折线颜色
                },
              },
            },
          },
        ],
      },
      option2: {
        legend: {
          data: ["余热发电量"],
          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: "bar",
            name: "余热发电量",
            data: [523, 410, 300, 300, 250],
            itemStyle: {
              normal: {
                color: "#09E83E",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  value: "max",
                  textStyle: {
                    //数值样式
                    color: "#09E83E",
                    fontSize: 30,
                  },
                },
              },
            },
          },
        ],
      },
      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",
        },
      ],
    };
  },

  methods: {
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
  },
  mounted() {
    this.defineEcharts("qcssdh", this.option1);
    this.defineEcharts("yrfd", this.option2);
    this.defineEcharts("ljfdl", this.option3);
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  padding-top: 400px;
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
}
.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: 1000%;
        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;
      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>
