<template>
  <div id="construction">
    <div class="side-area">
      <Title text="项目概况"></Title>
      <ShadowContainer>
        <div class="divider">
          <div class="divider-line"></div>
          <div class="divider-text">·工程名称·</div>
          <div class="divider-line"></div>
        </div>
        <div class="construction-name">绍兴二院兰亭院区(康复医院)工程</div>
        <div class="construction-details">
          <div class="construction-detail">
            <div class="data">288520.69</div>
            <div class="text">工程造价(万元)</div>
          </div>
          <div class="construction-detail">
            <div class="data unrecord">未录入</div>
            <div class="text">建筑面积(㎡)</div>
          </div>
          <div class="construction-detail">
            <div class="data small">
              金吉祥
              <br />
              15567789235
            </div>
            <div class="text">项目经理</div>
          </div>
        </div>
        <div class="divider">
          <div class="divider-line"></div>
          <div class="divider-text">·建造单位·</div>
          <div class="divider-line"></div>
        </div>
        <div
          v-for="(unit, index) in constructionUnits"
          :key="index"
          class="unit"
        >
          <div>
            <div class="dot"></div>
            <span class="unit-text">{{ unit.unitText }}</span>
          </div>
          <div>
            <div class="unit-name">{{ unit.unitName }}</div>
            <div class="unit-contact">{{ unit.contact }}</div>
          </div>
        </div>
      </ShadowContainer>
      <Title text="安全管理"></Title>
      <ShadowContainer>
        <div class="chart-container">
          <img class="custom-chart" src="@/assets/chart.png" />
          <div ref="securityChart" id="security-chart"></div>
        </div>
      </ShadowContainer>
    </div>
    <div class="mid-area">
      <Title text="项目平面图" type="long"></Title>
      <ShadowContainer>
        <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>
      </ShadowContainer>
      <Title text="工程进度" type="long"></Title>
      <ShadowContainer>
        <div class="progress-contains">
          <div class="progress">
            <img src="@/assets/progress.png" alt="" />
            <div class="progress-container">
              <div class="progress-day">
                <div class="progress-count">342</div>
                <div class="progress-text">总工期(天)</div>
              </div>
              <div class="progress-day">
                <div class="progress-count" style="color: #ffaf51">288</div>
                <div class="progress-text">已施工(天)</div>
              </div>
            </div>
          </div>
          <div class="steps">
            <el-steps :active="active" finish-status="success">
              <el-step>
                <template #title>
                  <div class="step-title">
                    2022-02-19
                    <div class="step-status">已完成</div>
                  </div>
                </template>
                <template #description>
                  <div class="step-description">开工</div>
                </template>
              </el-step>
              <el-step>
                <template #title>
                  <div class="step-title">
                    2022-02-19
                    <div class="step-status">已完成</div>
                  </div>
                </template>
                <template #description>
                  <div class="step-description">工程一</div>
                </template>
              </el-step>
              <el-step>
                <template #title>
                  <div class="step-title">
                    2022-02-19
                    <div class="step-status">已完成</div>
                  </div>
                </template>
                <template #description>
                  <div class="step-description">工程二</div>
                </template>
              </el-step>
              <el-step>
                <template #title>
                  <div class="step-title">
                    2022-02-19
                    <div class="step-status">已完成</div>
                  </div>
                </template>
                <template #description>
                  <div class="step-description">工程二</div>
                </template>
              </el-step>
              <el-step>
                <template #title>
                  <div class="step-title">
                    2022-02-19
                    <div class="step-status">进行中</div>
                  </div>
                </template>
                <template #description>
                  <div class="step-description">工程二</div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div class="side-area">
      <Title text="设备情况"></Title>
      <ShadowContainer>
        <div class="status">
          <div
            class="status-count"
            v-for="(status, index) in deviceStatus"
            :key="index"
          >
            <img class="status-img" :src="status.img" alt="" />
            <div class="status-detail">
              <div class="status-text">
                {{ status.text }}
              </div>
              <div class="status-number">
                {{ status.counts }}
                <span>台</span>
              </div>
            </div>
          </div>
        </div>
      </ShadowContainer>
      <Title text="质量问题"> </Title>
      <ShadowContainer>
        <div class="chart-container">
          <img class="custom-chart" src="@/assets/chart.png" />
          <div ref="qualityChart" id="quality-chart"></div>
        </div>
      </ShadowContainer>
    </div>
  </div>
</template>
<script>
export default {
  name: "Construction",
  data() {
    return {
      constructionUnits: [
        {
          unitText: "建设单位：",
          unitName: "绍兴第二医院",
          contact: "金吉祥(1556783245)",
        },
        {
          unitText: "建设单位：",
          unitName: "绍兴第二医院",
          contact: "金吉祥(1556783245)",
        },
        {
          unitText: "建设单位：",
          unitName: "绍兴第二医院",
          contact: "金吉祥(1556783245)",
        },
        {
          unitText: "建设单位：",
          unitName: "绍兴第二医院",
          contact: "金吉祥(1556783245)",
        },
      ],
      pieChartData: [
        { value: 1048, name: "未整改" },
        { value: 735, name: "整改中" },
        { value: 580, name: "已完成" },
      ],
      active: 4,
      deviceStatus: [
        {
          img: require("@/assets/status/icon_spjk@2x.png"),
          text: "视频监控",
          counts: 1,
        },
        {
          img: require("@/assets/status/icon_td@2x.png"),
          text: "塔吊",
          counts: 2,
        },
        {
          img: require("@/assets/status/icon_sjt@2x.png"),
          text: "升降机",
          counts: 2,
        },
        {
          img: require("@/assets/status/icon_hjgl@2x.png"),
          text: "环境管理",
          counts: 2,
        },
        {
          img: require("@/assets/status/icon_ydjc@2x.png"),
          text: "用电监测",
          counts: 1,
        },
        {
          img: require("@/assets/status/icon_zccl@2x.png"),
          text: "在场车辆",
          counts: 1,
        },
        {
          img: require("@/assets/status/icon_sb@2x.png"),
          text: "水表",
          counts: 1,
        },
        {
          img: require("@/assets/status/icon_lbfh@2x.png"),
          text: "临边防护",
          counts: 1,
        },
        {
          img: require("@/assets/status/icon_xlt@2x.png"),
          text: "卸料平台",
          counts: 1,
        },
      ],
    };
  },
  methods: {
    renderSecurityChart() {
      const chart = this.$echarts.init(this.$refs.securityChart);
      const option = {
        title: {
          x: "49%", //X坐标
          y: "30%",
          text: "0",
          subtext: "安全管理",
          textAlign: "center",
          textStyle: {
            //标题样式
            fontSize: 30,
            fontWeight: "bolder",
            color: "rgba(255,255,255,0.7)",
          },
          subtextStyle: {
            //副标题样式
            fontSize: 16,
            fontWeight: "bolder",
            color: "rgba(255,255,255,0.7)",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "rect",
          bottom: "5%",
          left: "center",
          itemGap: 40,
          textStyle: {
            color: "auto",
            rich: {
              a: {
                fontSize: 16,
                verticalAlign: "top",
                align: "left",
                padding: [22, 0, 0, 5],
              },
              b: {
                fontSize: 18,
                align: "left",
                lineHeight: 25,
                padding: [0, 0, 0, 7],
              },
            },
          },
          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("\n");
          },
        },
        series: [
          {
            type: "pie",
            radius: ["58%", "70%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: this.pieChartData,
          },
        ],
      };
      chart.setOption(option);
    },
    renderQualityChart() {
      const chart = this.$echarts.init(this.$refs.qualityChart);
      const option = {
        title: {
          x: "49%", //X坐标
          y: "30%",
          text: "0",
          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",
          bottom: "5%",
          left: "center",
          itemGap: 40,
          textStyle: {
            color: "auto",
            rich: {
              a: {
                fontSize: 16,
                verticalAlign: "top",
                align: "left",
                padding: [22, 0, 0, 5],
              },
              b: {
                fontSize: 18,
                align: "left",
                lineHeight: 25,
                padding: [0, 0, 0, 7],
              },
            },
          },
          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("\n");
          },
        },
        series: [
          {
            type: "pie",
            radius: ["58%", "70%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: this.pieChartData,
          },
        ],
      };
      chart.setOption(option);
    },
  },
  mounted() {
    this.renderSecurityChart();
    this.renderQualityChart();

    this.$nextTick(() => {
      // 解决echarts图表放大溢出父容器
      const resizeOb = new ResizeObserver((entries) => {
        for (const entry of entries) {
          this.$echarts.getInstanceByDom(entry.target).resize();
        }
      });
      resizeOb.observe(document.getElementById("security-chart"));
      resizeOb.observe(document.getElementById("quality-chart"));
    });
  },
};
</script>
<style scoped lang="less">
#construction {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
}
.side-area {
  width: 25%;
}
.mid-area {
  width: calc(50% - 40px);
  margin: 0 20px;
}
.divider {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 12px;
  .divider-line {
    width: calc(50% - 46px);
    border-top: 1px solid #f2af58;
    transform: translateY(50%);
  }
  .divider-text {
    text-align: center;
    width: 80px;
    font-size: 16px;

    font-weight: 400;
    color: #27acfb;
  }
}
.construction-name {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-style: italic;
  color: #ffffff;
  text-align: center;
  margin: 20px 0;
  margin-top: 0;
}
.construction-details {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 28px;
  .construction-detail {
    width: calc(100% / 3);
  }
  .data {
    font-size: 24px;

    font-weight: bold;
    color: #ffaf51;
    line-height: 24px;
    margin-bottom: 12px;
    &.unrecord {
      opacity: 0.2;
    }
    &.small {
      font-size: 12px;
      line-height: 12px;
    }
  }
  .text {
    font-size: 14px;

    font-weight: 400;
    color: #27acfb;
  }
}
.unit {
  line-height: 15px;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a3a1fb;
    margin-right: 6px;
    display: inline-block;
    vertical-align: top;
    transform: translateY(2px);
  }
  .unit-text {
    font-size: 14px;

    font-weight: 400;
    color: #22c3ed;
    margin-right: 14px;
  }
  .unit-name {
    font-size: 14px;

    font-weight: 400;
    color: #fefefe;
    margin-bottom: 4px;
  }
  .unit-contact {
    font-size: 12px;

    font-weight: 400;
    color: #99a9d0;
  }
}
.chart-container {
  position: relative;
  .custom-chart {
    position: absolute;
    width: 40%;
    left: 50%;
    transform: translateX(-50%);
    top: 19%;
  }
}
#security-chart,
#quality-chart {
  width: 100%;
  height: 400px;
}
.steps {
  padding-top: 40px;
}
.step-title {
  position: relative;
  color: #22c3ed;
  font-size: 12px;

  .step-status {
    position: absolute;
    top: -170%;
    color: #18d7b9;
    font-size: 12px;
  }
}
.step-description {
  font-size: 14px;
  color: #fff;
}
::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;
  }
}
.progress-contains {
  padding: 8px 0;
}
.progress {
  position: relative;
  width: 280px;
  img {
    width: 100%;
  }
  .progress-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    .progress-day {
      width: 50%;
      text-align: center;
      padding: 12px;
    }
    .progress-count {
      font-size: 30px;

      font-weight: bold;
      color: #22c2ec;
    }
    .progress-text {
      font-size: 14px;

      font-weight: 400;
      color: #27acfb;
    }
  }
}
.swagger-container {
  position: relative;
  .container-img {
    width: 100%;
    height: 46vh;
    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;
  }
}
.status {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .status-count {
    width: calc(100% / 3);
    padding: 20px 0px;
    margin-bottom: 20px;
    .status-img {
      width: 64px;
      height: 64px;
    }
    .status-detail {
      display: inline-block;
      vertical-align: top;
      .status-text {
        font-size: 14px;

        font-weight: 400;
        color: #ffffff;
        padding-top: 12px;
      }
      .status-number {
        font-weight: 400;
        color: #25d2ff;
        opacity: 0.7;
        font-size: 22px;
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>