<template>
  <div class="box">
    <div class="a">
      <img
        src="../../assets/img/能效.png"
        alt=""
        @click="sendMessageToCSharp"
      />
    </div>
    <div class="left">
      <img src="../../assets/img/标题/能效管理.png" class="title" />
      <div class="nylx">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>能源流向</p>
        </div>
        <div id="nylx">
          <div class="zbm">原始值折标煤</div>
          <div class="shui">水</div>
          <div class="dian">电</div>
          <div class="yrfd">余热发电</div>
          <div class="mei">煤</div>
          <div class="yr_one">1号生产线</div>
          <div class="yr_two">2号生产线</div>
          <div class="yr_three">3号生产线</div>
          <div class="mei_one">1号生产线</div>
          <div class="mei_two">2号生产线</div>
          <div class="mei_three">3号生产线</div>
        </div>
      </div>
      <div class="ffl">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>复费率</p>
        </div>
        <div class="tit">
          <div class="first">
            <span class="one"></span>
            <span class="two">尖峰时段用电量</span>
          </div>
          <div class="second">
            <span class="one"></span>
            <span class="two">平时段用电量</span>
          </div>
          <div class="thrid">
            <span class="one"></span>
            <span class="two">深谷时段用电量</span>
          </div>
          <div class="fourth">
            <span class="one"></span>
            <span class="two">峰时段用电量</span>
          </div>
          <div class="fifth">
            <span class="one"></span>
            <span class="two">谷时段用电量</span>
          </div>
        </div>
        <div id="ffl"></div>
      </div>
      <div class="nxdb">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>能效对标（定额管理）</p>
        </div>
        <div id="nxdb">
          <div class="table">
            <el-table
              :data="tableData"
              :row-class-name="tableRowClassName"
              style="width: 100%"
              header-cell-style="background-color: #1969A8; color: white"
            >
              <el-table-column prop="date1" label="" align="center" width="480">
              </el-table-column>
              <el-table-column prop="date2" label="先进值" align="center">
              </el-table-column>
              <el-table-column prop="date3" label="企业" align="center">
              </el-table-column>
              <el-table-column prop="date4" label="同比" align="center">
                <template scope="scope">
                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="jnl">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>节能量（节电率）</p>
        </div>
        <div class="chartBox">
          <div id="jnl">
            <img src="../../assets/NXGL/r1.png" alt="" />
            <div class="zx">
              <span>节能量（节电率）:</span>
            </div>
            <div class="span_jnl">
              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
            </div>
          </div>
        </div>
      </div>
      <div class="dfdj">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>电费电价</p>
        </div>
        <div class="chartBox">
          <div id="dfdj"></div>
        </div>
      </div>
      <div class="sbyxqk">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>设备运行情况</p>
        </div>
        <div id="sbyxqk">
          <div class="table">
            <el-table
              :data="devices"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="date1" label="设备名称" align="center">
              </el-table-column>
              <el-table-column prop="date2" label="开关状态" align="center">
                <template scope="scope">
                  <img
                    src="../../assets/KDFH/tongguo.png"
                    v-if="scope.row.date2 == true"
                  />
                  <img src="../../assets/KDFH/jinggao.png" v-else />
                </template>
              </el-table-column>
              <el-table-column prop="date3" label="实时负荷" align="center">
                <template scope="scope">
                  <span class="count">{{ scope.row.date3 }}</span>
                  <span class="danwei">kW</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      tableData: [
        {
          date1: "水泥单位产品综合能耗",
          date2: "80kgce/t",
          date3: "84kgce/t",
          date4: "5%",
        },
        {
          date1: "水泥大内产品综合电耗",
          date2: "40kWh/t",
          date3: "53kWh/t",
          date4: "32.5%",
        },
        {
          date1: "熟料单位产品综合能耗",
          date2: "100kgce/t",
          date3: "114kgce/t",
          date4: "14%",
        },
        {
          date1: "熟料单位产品综合电耗",
          date2: "48kWh/t",
          date3: "55kWh/t",
          date4: "14.58%",
        },
        {
          date1: "熟料单位产品综合煤耗",
          date2: "94kgce/",
          date3: "108kgce/",
          date4: "14.89%",
        },
      ],
      devices: [
        {
          date1: "回转窑",
          date2: true,
          date3: "102.00",
        },
        {
          date1: "熟料收尘",
          date2: true,
          date3: "29.00",
        },
        {
          date1: "篦冷机",
          date2: true,
          date3: "45.00",
        },
        {
          date1: "生料收尘",
          date2: false,
          date3: "102.00",
        },
        {
          date1: "回转窑",
          date2: true,
          date3: "29.00",
        },
        {
          date1: "熟料收尘",
          date2: false,
          date3: "45.00",
        },
      ],
      option1: {
        layoutIterations: 0,
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        grid: {
          top: "25px",
          left: "10px",
          right: "10px",
          bottom: "6%",
          containLabel: true,
        },
        series: {
          type: "sankey",
          layout: "none",
          top: "2%",
          bottom: "5%",
          left: "5%",
          right: "12%",
          draggable: false,
          lineStyle: {
            opacity: 0.3,
            color: "gradient",
            curveness: 0.7,
          },
          label: {
            color: "#fff",
            fontSize: 16,
            formatter: function (params) {
              return params.name;
            },
            rich: {
              // white: {
              //   fontSize: 20,
              //   padding: [10, 0, 0, 0],
              // },
            },
          },
          nodeGap: 10,
          emphasis: {
            focus: "adjacency",
          },
          data: [
            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
            {
              name: "1号生产线",
              id: "1",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "2号生产线",
              id: "2",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "3号生产线",
              id: "3",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "1号生产线",
              id: "11",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "2号生产线",
              id: "22",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "3号生产线",
              id: "33",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "",
              id: "121",
              itemStyle: { color: "transparent" },
              depth: 2,
            },
            {
              name: "",
              id: "122",
              itemStyle: { color: "transparent" },
              depth: 2,
            },
          ],
          links: [
            { source: "原始值折标煤", target: "水", value: 5 },
            { source: "原始值折标煤", target: "电", value: 5 },
            { source: "原始值折标煤", target: "余热发电", value: 9 },
            { source: "原始值折标煤", target: "煤", value: 9 },

            { source: "水", target: "121", value: 5 },
            { source: "电", target: "122", value: 5 },
            { source: "余热发电", target: "1", value: 3 },
            { source: "余热发电", target: "2", value: 3 },
            { source: "余热发电", target: "3", value: 3 },
            { source: "煤", target: "11", value: 3 },
            { source: "煤", target: "22", value: 3 },
            { source: "煤", target: "33", value: 3 },
          ],
        },
      },
    };
  },
  methods: {
    //U3D交互的绑定
    sendMessageToCSharp() {
      // window.vuplex.postMessage({
      //     type: "Tog",
      //     message: "能效管理_true",
      // });
      window.vuplex.postMessage("能效管理");
      this.$router.push("/nxglnh");
    },
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    dfdj() {
      // mock 数据
      const dataArr = {
        xdata: ["1月", "2月", "3月", "4月", "5月"],
        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
        disinfeced: [32, 34, 48, 14, 38],
        // placeData: [320, 435, 490, 340, 320, 270, 360]
      };

      const legend = {
        data: [
          {
            name: "电费",
            icon: "rect",
          },
          {
            name: "销售电价",
            icon: "rect",
          },
        ],
        textStyle: {
          color: "#fff",
          fontSize: "20px",
        },
        itemWidth: 25,
        itemHeight: 15,
        itemGap: 15,
        // bottom: '5%',
        selectedMode: false,
      };
      const grid = { top: "10%", left: "10%", right: "3%", bottom: "15%" };
      // xAxis
      const xAxis = {
        axisTick: { show: true },
        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
        axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
        data: dataArr.xdata,
      };

      // yAxis
      const yAxis = [
        {
          type: "value",
          name: "单位:kWh",
          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
          axisLine: { show: false, lineStyle: { color: "#fff" } },
          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
        },
        {
          // 双y轴，主要用于折线图，所以不需要显示坐标
          type: "value",
          show: true,
          min: 0,
          max: 1,
          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
        },
      ];

      // series
      const series = [
        {
          z: 2,
          name: "底部",
          type: "pictorialBar",
          data: [1, 1, 1, 1, 1, 1, 1, 1],
          symbol: "diamond",
          symbolOffset: [0, "50%"],
          symbolSize: [30, 20],
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              x2: 1,
              y: 0,
              y2: 0,
              colorStops: [
                { offset: 0, color: "rgba(17, 195, 255, 1)" },
                { offset: 0.5, color: "rgba(17, 195, 255, 1)" },
                { offset: 0.5, color: "rgba(17, 195, 255, .7)" },
                { offset: 1, color: "rgba(17, 195, 255, 1)" },
              ],
            },
          },
        },
        {
          z: 3,
          name: "上部1",
          type: "pictorialBar",
          symbolPosition: "end",
          data: dataArr.disinfeced,
          symbol: "diamond",
          symbolOffset: [0, "-50%"],
          symbolSize: [30, 20],
          itemStyle: {
            borderColor: "rgba(17, 195, 255, 1)",
            borderWidth: 2,
            color: "rgba(17, 195, 255, 1)",
          },
        },
        {
          z: 1,
          stack: "总量",
          type: "bar",
          name: "电费",
          barWidth: 30,
          // barGap: '-100%',
          data: dataArr.disinfeced,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              x2: 1,
              y: 0,
              y2: 0,
              colorStops: [
                { offset: 0, color: "rgba(17, 195, 255, .7)" },
                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
                { offset: 1, color: "rgba(17, 195, 255, .7)" },
              ],
            },
          },
        },
        {
          z: 9,
          // 双y轴
          yAxisIndex: 1,
          name: "销售电价",
          type: "line",
          symbol: "circle",
          symbolSize: [12, 12],
          color: {
            type: "linear",
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            // 0% 处的颜色                           // 100% 处的颜色
            colorStops: [
              { offset: 0, color: "#43FFF4 " },
              { offset: 1, color: "#43FFF4" },
            ],
            global: false, // 缺省为 false
          },
          lineStyle: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              // 0% 处的颜色                           // 100% 处的颜色
              colorStops: [
                { offset: 0, color: "#43FFF4 " },
                { offset: 1, color: "#43FFF4" },
              ],
              global: false, // 缺省为 false
            },
          },
          // 修改的是线下区域的颜色
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              // 右/下/左/上
              0,
              0,
              0,
              1,
              [
                { offset: 0, color: "rgba(255, 209, 26, .2)" },
                { offset: 1, color: "transparent" },
              ]
            ),
          },
          label: {
            show: true,
            textStyle: { fontSize: 16, color: "#ffd11a" },
          },
          data: dataArr.rateData,
        },
      ];
      let option = { xAxis, yAxis, series, grid, legend };
      this.defineEcharts("dfdj", option);
    },
    ffl() {
      let lengthData = [];
      let Lengths = [];
      let data = [[], [], [], [], []];
      let sum = 0;
      let arr = [];
      let dom = 800;
      let barWidth = dom / 20;
      let JsonData = [
        {
          FXDJ: "尖峰时段用电量",
          ZTSL: "2373",
          ZTLB: "1月",
          TJRQ: "2023-09",
          ID: "1",
          JCRWS: "52",
        },
        {
          FXDJ: "平时段用电量",
          ZTSL: "6534",
          ZTLB: "1月",
          TJRQ: "2023-09",
          ID: "2",
          JCRWS: "15",
        },
        {
          FXDJ: "深谷时段用电量",
          ZTSL: "5338",
          ZTLB: "1月",
          TJRQ: "2023-09",
          ID: "3",
          JCRWS: "20",
        },
        {
          FXDJ: "峰时段用电量",
          ZTSL: "7133",
          ZTLB: "1月",
          TJRQ: "2023-09",
          ID: "4",
          JCRWS: "99",
        },
        {
          FXDJ: "谷时段用电量",
          ZTSL: "6133",
          ZTLB: "1月",
          TJRQ: "2023-09",
          ID: "5",
          JCRWS: "99",
        },
        {
          FXDJ: "尖峰时段用电量",
          ZTSL: "8201",
          ZTLB: "2月",
          TJRQ: "2023-09",
          ID: "6",
          JCRWS: "31",
        },
        {
          FXDJ: "平时段用电量",
          ZTSL: "6327",
          ZTLB: "2月",
          TJRQ: "2023-09",
          ID: "7",
          JCRWS: "99",
        },
        {
          FXDJ: "深谷时段用电量",
          ZTSL: "5621",
          ZTLB: "2月",
          TJRQ: "2023-09",
          ID: "8",
          JCRWS: "70",
        },
        {
          FXDJ: "峰时段用电量",
          ZTSL: "4327",
          ZTLB: "2月",
          TJRQ: "2023-09",
          ID: "9",
          JCRWS: "107",
        },
        {
          FXDJ: "谷时段用电量",
          ZTSL: "6327",
          ZTLB: "2月",
          TJRQ: "2023-09",
          ID: "10",
          JCRWS: "107",
        },
        {
          FXDJ: "尖峰时段用电量",
          ZTSL: "7737",
          ZTLB: "3月",
          TJRQ: "2023-09",
          ID: "11",
          JCRWS: "40",
        },
        {
          FXDJ: "平时段用电量",
          ZTSL: "5491",
          ZTLB: "3月",
          TJRQ: "2023-09",
          ID: "12",
          JCRWS: "45",
        },
        {
          FXDJ: "深谷时段用电量",
          ZTSL: "6541",
          ZTLB: "3月",
          TJRQ: "2023-09",
          ID: "13",
          JCRWS: "57",
        },
        {
          FXDJ: "峰时段用电量",
          ZTSL: "8128",
          ZTLB: "3月",
          TJRQ: "2023-09",
          ID: "14",
          JCRWS: "55",
        },
        {
          FXDJ: "谷时段用电量",
          ZTSL: "4128",
          ZTLB: "3月",
          TJRQ: "2023-09",
          ID: "14",
          JCRWS: "55",
        },
        {
          FXDJ: "尖峰时段用电量",
          ZTSL: "5795",
          ZTLB: "4月",
          TJRQ: "2023-09",
          ID: "16",
          JCRWS: "90",
        },
        {
          FXDJ: "平时段用电量",
          ZTSL: "9056",
          ZTLB: "4月",
          TJRQ: "2023-09",
          ID: "17",
          JCRWS: "57",
        },
        {
          FXDJ: "深谷时段用电量",
          ZTSL: "3181",
          ZTLB: "4月",
          TJRQ: "2023-09",
          ID: "18",
          JCRWS: "53",
        },
        {
          FXDJ: "峰时段用电量",
          ZTSL: "2304",
          ZTLB: "4月",
          TJRQ: "2023-09",
          ID: "19",
          JCRWS: "39",
        },
        {
          FXDJ: "谷时段用电量",
          ZTSL: "2204",
          ZTLB: "4月",
          TJRQ: "2023-09",
          ID: "20",
          JCRWS: "50",
        },
        {
          FXDJ: "尖峰时段用电量",
          ZTSL: "4846",
          ZTLB: "5月",
          TJRQ: "2023-09",
          ID: "21",
          JCRWS: "54",
        },
        {
          FXDJ: "平时段用电量",
          ZTSL: "7491",
          ZTLB: "5月",
          TJRQ: "2023-09",
          ID: "22",
          JCRWS: "84",
        },
        {
          FXDJ: "深谷时段用电量",
          ZTSL: "6507",
          ZTLB: "5月",
          TJRQ: "2023-09",
          ID: "23",
          JCRWS: "86",
        },
        {
          FXDJ: "峰时段用电量",
          ZTSL: "8831",
          ZTLB: "5月",
          TJRQ: "2023-09",
          ID: "24",
          JCRWS: "94",
        },
        {
          FXDJ: "谷时段用电量",
          ZTSL: "8301",
          ZTLB: "5月",
          TJRQ: "2023-09",
          ID: "25",
          JCRWS: "94",
        },
      ];

      for (let item of JsonData) {
        // x轴数据
        if (!lengthData.some((t) => t === item.ZTLB)) {
          lengthData.push(item.ZTLB);
        }
        // 图例数据
        if (!Lengths.some((t) => t === item.FXDJ)) {
          Lengths.push(item.FXDJ);
        }
      }
      Lengths.forEach((e, j) => {
        JsonData.forEach((k, i) => {
          lengthData.forEach((m, n) => {
            console.log(m, k.ZTLB, k.ZTSL);
            if (m == k.ZTLB && e == k.FXDJ) {
              data[j][n] = k.ZTSL;
            }
          });
        });
      });

      let xData = lengthData.map((item, index) => {
        return {
          value: item,
        };
      });

      let colors = [
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255, 180, 29, .7)",
            },
            {
              offset: 0.5,
              color: "rgba(255, 180, 29, .5)",
            },
            {
              offset: 0.5,
              color: "rgba(255, 180, 29, .5)",
            },
            {
              offset: 1,
              color: "rgba(255, 180, 29, .7)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(231, 238, 1, .7)",
            },
            {
              offset: 0.5,
              color: "rgba(231, 238, 1, .5)",
            },
            {
              offset: 0.5,
              color: "rgba(231, 238, 1, .7)",
            },
            {
              offset: 1,
              color: "rgba(231, 238, 1, .5)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(3, 210, 88, .7)",
            },
            {
              offset: 0.5,
              color: "rgba(3, 210, 88, .5)",
            },
            {
              offset: 0.5,
              color: "rgba(3, 210, 88, .5)",
            },
            {
              offset: 1,
              color: "rgba(3, 210, 88, .7)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(27, 158, 228, .7)",
            },
            {
              offset: 0.5,
              color: "rgba(27, 158, 228, .5)",
            },
            {
              offset: 0.5,
              color: "rgba(27, 158, 228, .5)",
            },
            {
              offset: 1,
              color: "rgba(27, 158, 228, .7)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(2, 207, 205, .7)",
            },
            {
              offset: 0.5,
              color: "rgba(2, 207, 205, .5)",
            },
            {
              offset: 0.5,
              color: "rgba(2, 207, 205, .5)",
            },
            {
              offset: 1,
              color: "rgba(2, 207, 205, .7)",
            },
          ],
        },
      ];
      let option = {
        //提示框
        tooltip: {
          show: true,
          trigger: "axis", //axis , item
          // backgroundColor: "RGBA(0, 49, 85, 0.5)",
          borderColor: "rgba(0, 151, 251, 0)",
          borderWidth: 1,
          borderRadius: 0,
          textStyle: {
            color: "#BCE9FC",
            fontSize: 20,
            align: "left",
          },
          confine: true,
          // formatter(e,i){
          //     console.log(e,i)
          // },
        },
        /**区域位置*/
        grid: {
          left: "6%",
          right: "4%",
          top: "6%",
          bottom: 40,
        },
        /**图例大小*/
        // legend: {
        //   icon: "rect",
        //   data: Lengths,
        //   textStyle: {
        //     color: "#BFEBFF",
        //     fontSize: 30,
        //   },
        //   itemHeight: 16,
        //   itemWidth: 30,
        //   left: "15%",
        //   top: 0,
        //   itemGap: 50,
        // },
        //X轴
        xAxis: {
          data: xData,
          axisLabel: {
            margin: 20,
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            textStyle: {
              color: "#FFFFFF",
              fontStyle: "normal",
              fontSize: 16,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
        },
        yAxis: {
          name: "单位：kWh",
          nameTextStyle: {
            fontSize: 18,
            color: "#FFFFFF",
          },
          show: true,
          splitNumber: 4,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            formatter: function (value) {
              if (value >= 10000) {
                return (value / 10000).toFixed(0) + " 万";
              } else {
                return value.toString();
              }
            },
            textStyle: {
              color: "#FFFFFF",
              fontStyle: "normal",
              fontSize: 18,
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
        },
        series: [
          {
            //图例一底部底片
            z: 2,
            type: "pictorialBar",
            data: data[0],
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                color: function (params) {
                  return colors[0].colorStops[0].color;
                },
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            //图例一顶部底片
            z: 3,
            type: "pictorialBar",
            symbolPosition: "end",
            data: data[0],
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: function (params) {
                  return colors[0].colorStops[0].color;
                },
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };
      data.forEach((e, i) => {
        arr.push(e);
        if (sum < i) {
          sum++;
          option.series.push({
            //图例二顶部底片
            z: 3,
            type: "pictorialBar",
            symbolPosition: "end",
            data: this.addArray(arr),
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                color: function (params) {
                  return colors[i].colorStops[0].color;
                },
              },
            },
            tooltip: {
              show: false,
            },
          });
        }
        option.series.push({
          type: "bar",
          name: Lengths[i],
          barWidth: barWidth,
          itemStyle: {
            normal: {
              color: function (params) {
                return colors[i].colorStops[0].color;
              },
            },
          },
          stack: "1",
          data: e,
        });
      });
      this.defineEcharts("ffl", option);
    },
    addArray(arr) {
      let result = [];
      for (let i = 0; i < arr.length; i++) {
        arr[i].forEach((value, index) => {
          if (result[index] == null || result[index] == "") {
            result[index] = 0;
          }
          result[index] += parseInt(value);
        });
      }
      return result;
    },
  },
  created() {
    // if (window.vuplex) {
    //   addMessageListener();
    // } else {
    //   window.addEventListener("vuplexready", addEventListener);
    // } function addEventListener() {
    //   window.vuplex.addEventListener("message", function (event) {
    //     let json = event.data;
    //     console.log("JSON received" + json);
    //   })
    // }
  },
  mounted() {
    // this.defineEcharts("nylx", this.option1);
    // this.dfdj();
    // this.defineEcharts("yysl", this.option2);
    // this.defineEcharts("nysl", this.option3);
    // this.defineEcharts("nhfx", this.option4);
    this.dfdj();
    this.ffl();
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  background-image: url(../../assets/img/左遮罩.png),
    url(../../assets/img/右遮罩.png);
  padding-top: 400px;
  justify-content: space-between;
  position: relative;
  .a {
    position: absolute;
    width: 1300px;
    z-index: 2;
    top: 420px;
    right: 480px;
    z-index: 100;

    img {
      margin-right: 102px;
      pointer-events: all;
      cursor: pointer;
    }
  }

  .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;
    }

    .nylx {
      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";
        }
      }

      #nylx {
        width: 1155px;
        height: 650px;
        margin-top: 50px;
        background: url(../../assets/liutu/能效.png);
        background-size: cover;
        font-size: 24px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        position: relative;
        .zbm {
          position: absolute;
          left: 60px;
          top: 200px;
        }
        .shui {
          position: absolute;
          left: 470px;
          top: 15px;
        }
        .dian {
          position: absolute;
          left: 470px;
          top: 96px;
        }
        .yrfd {
          position: absolute;
          left: 470px;
          top: 272px;
        }

        .mei {
          position: absolute;
          left: 470px;
          top: 526px;
        }
        .yr_one {
          position: absolute;
          left: 880px;
          top: 182px;
        }
        .yr_two {
          position: absolute;
          left: 880px;
          top: 262px;
        }
        .yr_three {
          position: absolute;
          left: 880px;
          top: 342px;
        }
        .mei_one {
          position: absolute;
          left: 880px;
          top: 432px;
        }
        .mei_two {
          position: absolute;
          left: 880px;
          top: 512px;
        }
        .mei_three {
          position: absolute;
          left: 880px;
          top: 592px;
        }
      }
    }

    .ffl {
      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";
        }
      }
      .tit {
        width: 1000px;
        height: 90px;
        margin-top: 40px;
        margin-left: 100px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: flex-start;
        align-content: space-around;
        .first {
          width: 234px;
          margin-left: 80px;
          height: 33px;
          font-size: 20px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
          line-height: 20px;
          display: flex;
          .one {
            width: 55px;
            height: 23px;
            background: #ffb41d;
            opacity: 1;
            display: block;
            margin-right: 10px;
          }
        }
        .second {
          width: 234px;
          margin-left: 80px;
          height: 33px;
          font-size: 20px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
          line-height: 20px;
          display: flex;
          .one {
            width: 55px;
            height: 23px;
            background: #e7ee01;
            opacity: 1;
            display: block;
            margin-right: 10px;
          }
        }
        .thrid {
          width: 234px;
          margin-left: 80px;
          height: 33px;
          font-size: 20px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
          line-height: 20px;
          display: flex;
          .one {
            width: 55px;
            height: 23px;
            background: #03d258;
            opacity: 1;
            display: block;
            margin-right: 10px;
          }
        }
        .fourth {
          width: 234px;
          margin-left: 80px;
          height: 33px;
          font-size: 20px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
          line-height: 20px;
          display: flex;
          .one {
            width: 55px;
            height: 23px;
            background: #1b9ee4;
            opacity: 1;
            display: block;
            margin-right: 10px;
          }
        }
        .fifth {
          width: 234px;
          margin-left: 80px;
          height: 33px;
          font-size: 20px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
          line-height: 20px;
          display: flex;
          .one {
            width: 55px;
            height: 23px;
            background: #02cfcd;
            opacity: 1;
            display: block;
            margin-right: 10px;
          }
        }
      }
      #ffl {
        width: 1155px;
        height: 600px;
        margin-top: 50px;
      }
    }

    .nxdb {
      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";
        }
      }

      #nxdb {
        width: 1155px;
        height: 500px;
        margin-top: 50px;

        /deep/ .table {
          margin-top: 50px;

          .time {
            font-size: 20px;
          }

          .count {
            color: #05f0ff;
            font-size: 28px;
          }

          //表体颜色
          .el-table tr {
            background: #16253b;
            color: #fff;
            font-size: 30px;
            height: 40px;

            .cell {
              line-height: 40px;
            }
          }

          // 去掉eltable的hover效果
          .el-table tbody tr:hover > td {
            background-color: #0b679e !important;
          }

          //修改表头颜色
          .has-gutter {
            background-color: #1969a8;

            th {
              background-color: #1969a8;
            }
          }

          //奇偶行颜色
          .el-table .success-row {
            background: #184167;
          }

          //去掉边框白线
          .el-table__row > td {
            border: none;
          }

          .el-table::before {
            height: 0px;
          }

          /* 移除表头的下边框 */
          .el-table__header th {
            border-bottom: none;
          }
        }
      }
    }
  }

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

    .jnl {
      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;

        #jnl {
          width: 1156px;
          font-size: 20px;
          color: #fff;
          position: relative;

          img {
            width: 320px;
            height: auto;
            margin-left: 80px;
          }

          .zx {
            font-size: 30px;
            position: absolute;
            top: 100px;
            left: 700px;
          }

          .span_jnl {
            position: absolute;
            top: 150px;
            left: 700px;
          }
        }
      }
    }

    .dfdj {
      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";
        }
      }

      #dfdj {
        width: 1155px;
        height: 630px;
        margin-top: 50px;
      }
    }

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

      // margin-bottom: 50px;
      /deep/ .table {
        margin-top: 50px;

        .time {
          font-size: 20px;
        }

        .count {
          color: #05f0ff;
          font-size: 28px;
        }

        //表体颜色
        .el-table tr {
          background: #16253b;
          color: #fff;
          font-size: 30px;
          height: 40px;

          .cell {
            line-height: 40px;
          }
        }

        // 去掉eltable的hover效果
        .el-table tbody tr:hover > td {
          background-color: #0b679e !important;
        }

        //修改表头颜色
        .has-gutter {
          background-color: #1969a8;

          th {
            background-color: #1969a8;
          }
        }

        //奇偶行颜色
        .el-table .success-row {
          background: #184167;
        }

        //去掉边框白线
        .el-table__row > td {
          border: none;
        }

        .el-table::before {
          height: 0px;
        }

        /* 移除表头的下边框 */
        .el-table__header th {
          border-bottom: none;
        }
      }

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

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

      #sbyxqk {
        width: 1155px;
        height: 400px;
        margin-top: 50px;
      }
    }
  }
}
</style>
