<template>
  <div id="tower">
    <div class="side-area">
      <Title text="设备总览"></Title>
      <ShadowContainer>
        <div class="chart-container">
          <img class="custom-chart" src="@/assets/chart.png" />
          <div ref="deviceChart" id="device-chart"></div>
        </div>
      </ShadowContainer>
      <Title text="各塔吊24h力矩百分比统计"></Title>
      <ShadowContainer>
        <div id="force-chart" ref="forceChart"></div>
      </ShadowContainer>
      <Title text="各塔吊24h倾角统计"></Title>
      <ShadowContainer>
        <div id="dip-chart" ref="dipChart"></div>
      </ShadowContainer>
    </div>
    <div class="mid-area">
      <div class="swagger-container">
        <img class="lt" src="@/assets/lt.png" alt="" />
        <img class="rt" src="@/assets/rt.png" alt="" />
        <img class="rb" src="@/assets/rb.png" alt="" />
        <img class="lb" src="@/assets/lb.png" alt="" />
        <img class="container-img" src="@/assets/swiper-pic.png" alt="" />
      </div>
    </div>
    <div class="side-area">
      <Title text="报警信息"></Title>
      <ShadowContainer>
        <div class="warn-message">
          <div class="warn-icon">
            <img src="@/assets/no-message.png" alt="" />
            <div>暂无信息~</div>
          </div>
        </div>
      </ShadowContainer>
      <Title text="维护信息"></Title>
      <ShadowContainer>
        <div class="tower-name">NJBR-TD-02#</div>
        <div class="steps">
          <el-steps :active="active" finish-status="success">
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">开工</div>
              </template>
            </el-step>
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">工程一</div>
              </template>
            </el-step>
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">工程二</div>
              </template>
            </el-step>
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">工程二</div>
              </template>
            </el-step>
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">工程二</div>
              </template>
            </el-step>
          </el-steps>
        </div>
        <el-divider></el-divider>
        <div class="tower-name">NJBR-TD-02#</div>
        <div class="steps">
          <el-steps :active="active" finish-status="success">
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">开工</div>
              </template>
            </el-step>
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">工程一</div>
              </template>
            </el-step>
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">工程二</div>
              </template>
            </el-step>
            <el-step>
              <template #title>
                <div class="step-title">2022-02-19</div>
              </template>
              <template #description>
                <div class="step-description">工程二</div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </ShadowContainer>
    </div>
  </div>
</template>
<script>
export default {
  name: "Tower",
  data() {
    return {
      pieChartData: [
        { value: 4, name: "在线总数" },
        { value: 3, name: "报警总数" },
        { value: 2, name: "离线总数" },
      ],
      active: 3,
    };
  },
  methods: {
    renderDeviceChart() {
      const chart = this.$echarts.init(this.$refs.deviceChart);
      const option = {
        title: {
          x: "27%", //X坐标
          y: "35%",
          text: "9",
          subtext: "总数",
          textAlign: "center",
          textStyle: {
            //标题样式
            fontSize: 30,
            fontWeight: "bolder",
            color: "#00fcff",
          },
          subtextStyle: {
            //副标题样式
            fontSize: 16,
            fontWeight: "bolder",
            color: "rgba(255,255,255,0.7)",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "rect",
          right: "10%",
          top: "15%",
          orient: "vertical",
          itemGap: 40,
          textStyle: {
            color: "inherit",
            rich: {
              a: {
                fontSize: 14,
                align: "left",
              },
              b: {
                fontSize: 20,
                align: "left",
                lineHeight: 25,
              },
            },
          },
          formatter: (name) => {
            let data = this.pieChartData;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            let arr = [`{a|${name}}`, `{b|${target}} 台`];
            return arr.join("   ");
          },
        },
        series: [
          {
            type: "pie",
            radius: ["80%", "90%"],
            center: ["28%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: this.pieChartData,
          },
        ],
      };
      chart.setOption(option);
    },
    renderForceChart() {
      const chart = this.$echarts.init(this.$refs.forceChart);
      const option = {
        color: ["#FFAF51", "#00a2ff"],
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "top",
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
        },
        xAxis: {
          type: "category",
          data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"],
          axisTick: { show: false },
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
        },
        series: [
          {
            name: "NJBR-TD-01#",
            data: [2, 5, 4, 4, 7, 5, 6],
            type: "line",
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFAF51",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0)",
                },
              ]),
            },
          },
          {
            name: "NJBR-TD-02#",
            type: "line",
            data: [5, 2, 3, 4, 2, 2, 4],
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00a2ff",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0)",
                },
              ]),
            },
          },
        ],
      };
      chart.setOption(option);
    },
    renderDipChart() {
      const chart = this.$echarts.init(this.$refs.dipChart);
      const option = {
        color: ["#E965C2", "#00FFDE"],
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "top",
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
        },
        xAxis: {
          type: "category",
          data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"],
          axisTick: { show: false },
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
        },
        series: [
          {
            name: "NJBR-TD-01#",
            data: [2, 5, 4, 4, 7, 5, 6],
            type: "line",
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#E965C2",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0)",
                },
              ]),
            },
          },
          {
            name: "NJBR-TD-02#",
            type: "line",
            data: [5, 2, 3, 4, 2, 2, 4],
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFDE",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0)",
                },
              ]),
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
  mounted() {
    this.renderDeviceChart();
    this.renderForceChart();
    this.renderDipChart();
    this.$nextTick(() => {
      // 解决echarts图表放大溢出父容器
      const resizeOb = new ResizeObserver((entries) => {
        for (const entry of entries) {
          this.$echarts.getInstanceByDom(entry.target).resize();
        }
      });
      resizeOb.observe(document.getElementById("device-chart"));
      resizeOb.observe(document.getElementById("force-chart"));
      resizeOb.observe(document.getElementById("dip-chart"));
    });
  },
};
</script>
<style lang="less" scoped>
#tower {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  .side-area {
    width: 25%;
  }
  .mid-area {
    width: calc(50% - 40px);
    margin: 0 20px;
  }
}
.swagger-container {
  position: relative;
  .container-img {
    width: 100%;
    height: 88vh;
    vertical-align: top;
  }
  .lt,
  .lb,
  .rb,
  .rt {
    position: absolute;
    width: 20px;
    height: 20px;
  }
  .lt {
    top: -2px;
    left: -2px;
  }
  .lb {
    left: -2px;
    bottom: -2px;
  }
  .rb {
    right: -2px;
    bottom: -2px;
  }
  .rt {
    right: -2px;
    top: -2px;
  }
}
#force-chart,
#dip-chart {
  width: 100%;
  height: 210px;
}
.chart-container {
  position: relative;
  .custom-chart {
    position: absolute;
    width: 30%;
    top: 50%;
    transform: translateY(-50%);
    left: 13%;
  }
}
#device-chart {
  width: 100%;
  height: 210px;
}
.tower-name {
  background: rgba(255, 175, 81, 0.1);
  border: 1px solid #ffaf51;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffaf51;
  display: inline-block;
  padding: 6px 12px;
  letter-spacing: 1px;
}
.steps {
  padding-top: 20px;
}
.step-title {
  position: relative;

  color: #fff;
  font-size: 12px;

  .step-status {
    position: absolute;
    top: -170%;
    color: #18d7b9;
    font-size: 12px;
  }
}
.step-description {
  font-size: 14px;
  color: #22c3ed;
}
::v-deep .el-step__icon-inner {
  display: none !important;
}

::v-deep .el-step__head.is-success {
  ::v-deep .el-step__icon {
    border-width: 4px !important;
    border-color: #67c23a !important;
  }
}
::v-deep .el-step__icon.is-text {
  border-width: 4px !important;
  border-color: #22c2ec;
}
::v-deep .el-step__head.is-success {
  .el-step__icon {
    border-color: #67c23a !important;
  }
}
::v-deep .el-divider {
  background: #5f7890;
  opacity: 0.5;
}
.warn-message {
  position: relative;
  height: 400px;
  .warn-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #063e6c;
    font-size: 16px;
    text-align: center;
    img {
      width: 100px;
    }
  }
}
</style>