<template>
  <div id="construction">
    <div class="side-area">
      <Title text="项目概况"></Title>
      <ShadowContainer class="long-container">
        <div class="construction-status">
          <div class="construction-details">
            <div style="display: flex; justify-content: center">
              <div
                class="construction-detail"
                style="border-right: 1px solid rgba(9, 124, 167, 0.5)"
              >
                <div class="data">{{ screenDetail.project_cost }}</div>
                <div class="text">工程造价(万元)</div>
              </div>
              <div class="construction-detail">
                <div class="data">{{ screenDetail.build_area }}</div>
                <div class="text">建筑面积(㎡)</div>
              </div>
            </div>
            <div
              style="
                border-top: 1px solid rgba(9, 124, 167, 0.5);
                width: 90%;
                margin: 0 auto;
                padding-top: 12px;
              "
            >
              <div style="font-size: 14px; color: #ffaf51">
                项目经理：{{
                  screenDetail.manageList &&
                  screenDetail.manageList[0] &&
                  screenDetail.manageList[0].person_name
                }}
                /
                {{
                  screenDetail.manageList &&
                  screenDetail.manageList[0] &&
                  screenDetail.manageList[0].person_mobile
                }}
              </div>
            </div>
          </div>
          <div class="divider">
            <div class="divider-line"></div>
            <div class="divider-text">·参建单位·</div>
            <div class="divider-line"></div>
          </div>
          <div
            class="table-scroll"
            id="table-scroll"
            @mouseenter="clearScroll"
            @mouseleave="reScroll"
          >
            <table>
              <tr>
                <td width="60">
                  <div class="table-label">建设单位</div>
                </td>
                <td>
                  <div
                    v-for="(unit, index) in screenDetail.unitList.jsList"
                    :key="index"
                    class="table-unit"
                  >
                    <div class="unit-name">{{ unit.company_name }}</div>
                    <div class="unit-contact">
                      {{ unit.contact_person }}({{ unit.contact_mobile }})
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="table-label">施工单位</div>
                </td>
                <td>
                  <div
                    v-for="(unit, index) in screenDetail.unitList.sgList"
                    :key="index"
                    class="table-unit"
                  >
                    <div class="unit-name">{{ unit.company_name }}</div>
                    <div class="unit-contact">
                      {{ unit.contact_person }}({{ unit.contact_mobile }})
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td><div class="table-label">监理单位</div></td>
                <td>
                  <div
                    v-for="(unit, index) in screenDetail.unitList.jlList"
                    :key="index"
                    class="table-unit"
                  >
                    <div class="unit-name">{{ unit.company_name }}</div>
                    <div class="unit-contact">
                      {{ unit.contact_person }}({{ unit.contact_mobile }})
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="table-label">设计单位</div>
                </td>
                <td>
                  <div>
                    <div
                      v-for="(unit, index) in screenDetail.unitList.sjList"
                      :key="index"
                      class="table-unit"
                    >
                      <div class="unit-name">{{ unit.company_name }}</div>
                      <div class="unit-contact">
                        {{ unit.contact_person }}({{ unit.contact_mobile }})
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="table-label">勘察单位</div>
                </td>
                <td>
                  <div>
                    <div
                      v-for="(unit, index) in screenDetail.unitList.kcList"
                      :key="index"
                      class="table-unit"
                    >
                      <div class="unit-name">{{ unit.company_name }}</div>
                      <div class="unit-contact">
                        {{ unit.contact_person }}({{ unit.contact_mobile }})
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </ShadowContainer>
      <Title text="今日考勤率"></Title>
      <ShadowContainer class="short-container">
        <div class="check-in">
          <div
            class="checks"
            @click="
              checkType = 'manage';
              checkInDialogVisible = true;
            "
          >
            <div class="title">管理人员</div>
            <div class="count" style="color: rgba(254, 186, 1, 1)">
              {{ screenDetail.today_manage_attendance_rate }}<span>%</span>
            </div>
            <img style="width: 120px" src="@/assets/icon-person.png" alt="" />
          </div>
          <div
            class="checks"
            @click="
              checkType = 'normal';
              checkInDialogVisible = true;
            "
          >
            <div class="title">普通工人</div>
            <div class="count" style="color: rgba(24, 215, 185, 1)">
              {{ screenDetail.today_normal_attendance_rate }}<span>%</span>
            </div>
            <img style="width: 120px" src="@/assets/icon-person.png" alt="" />
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div class="mid-area">
      <Title text="项目平面图" type="long"></Title>
      <ShadowContainer class="long-container">
        <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="" />
          <el-carousel :interval="5000" arrow="always" height="100%">
            <el-carousel-item
              v-for="(item, index) in screenDetail.banner_image_arr"
              :key="index"
            >
              <!-- <img class="container-img" :src="item.url" alt="" /> -->
              <el-image
                style="width: 100%; height: 100%"
                :src="item.url"
                fit="cover"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </ShadowContainer>
      <Title text="工程进度" type="long"></Title>
      <ShadowContainer class="short-container">
        <div class="progress-contains">
          <div style="width: 100%">
            <div class="progress">
              <div class="progress-container">
                <div class="progress-day">
                  <div class="progress-count">{{ progressDetail.zgq_num }}</div>
                  <div class="progress-text">总工期(天)</div>
                </div>
                <div class="progress-day">
                  <div class="progress-count" style="color: #ffaf51">
                    {{ progressDetail.sg_num }}
                  </div>
                  <div class="progress-text">已施工(天)</div>
                </div>
                <div class="progress-day">
                  <div class="progress-count" style="color: #ff5151">
                    {{ progressDetail.current_progress_over_day }}
                  </div>
                  <div class="progress-text">距离当前工期结束(天)</div>
                </div>
              </div>
            </div>
            <div
              id="scroll-container"
              @mouseenter="clearScrollX"
              @mouseleave="reScrollX"
            >
              <div id="step-scroll">
                <el-steps :active="progressDetail.step" finish-status="success">
                  <el-step
                    v-for="(progress, index) in progressDetail.progress_data"
                    :key="index"
                    :class="[
                      progress.type ? progress.type : '',
                      index <= progressDetail.step - 1 ? 'success' : '',
                    ]"
                  >
                    <template #title>
                      <div class="step-title">
                        {{ progress.over_date }}
                        <div class="step-status">
                          {{ progress.status_text }}
                        </div>
                      </div>
                    </template>
                    <template #description>
                      <div class="step-description">{{ progress.name }}</div>
                    </template>
                  </el-step>
                </el-steps>
              </div>
            </div>
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div class="side-area">
      <Title text="设备情况"></Title>
      <ShadowContainer class="long-container">
        <div class="devices">
          <div class="device-container">
            <div
              class="device-area"
              @click="
                onlineStatus = '';
                deviceDialogVisible = true;
              "
            >
              <div class="device-count" style="color: #ffaf51">
                {{ deviceStatusCount.total }}
              </div>
              <div class="device-text">设备总数</div>
            </div>
            <div
              class="device-area"
              @click="
                onlineStatus = '1';
                deviceDialogVisible = true;
              "
            >
              <div class="device-count" style="color: #2bd3ff">
                {{ deviceStatusCount.zx_total }}
              </div>
              <div class="device-text">在线数量</div>
            </div>
            <div
              class="device-area"
              @click="
                onlineStatus = '0';
                deviceDialogVisible = true;
              "
            >
              <div class="device-count" style="color: #ff5d5d">
                {{ deviceStatusCount.lx_total }}
              </div>
              <div class="device-text">离线数量</div>
            </div>
          </div>
        </div>
        <div
          class="status"
          id="table-scroll-status"
          @mouseenter="clearScrollStatus"
          @mouseleave="reScrollStatus"
        >
          <div
            class="status-count"
            v-for="(status, index) in deviceStatus"
            :key="index"
            @click="jumpPage(status)"
          >
            <img class="status-img" :src="status.icon_path" alt="" />
            <div class="status-text">
              {{ status.name }}
            </div>
            <div class="status-number">
              总数：<span
                ><span class="number">{{ status.total }}</span
                >台</span
              >
            </div>
            <div class="status-number">
              在线：<span style="color: #1bc8b6"
                ><span class="number">{{ status.zx_total }}</span
                >台</span
              >
            </div>
            <div class="status-number">
              离线：<span style="color: #bf9063"
                ><span class="number">{{ status.lx_total }}</span
                >台</span
              >
            </div>
          </div>
        </div>
      </ShadowContainer>
      <Title text="AI预警"> </Title>
      <ShadowContainer class="short-container">
        <div
          style="display: flex; justify-content: center; cursor: pointer"
          @click="warningRecordVisible = true"
        >
          <div class="chart-container">
            <div ref="qualityChart" id="quality-chart"></div>
            <div class="title">
              <div class="main-title">
                {{ AIwarningTotal }}
              </div>
              <div class="sub-title">AI预警</div>
            </div>
          </div>

          <div class="chart-legends">
            <div
              v-for="(legend, index) in aiwarningData"
              :key="index"
              :style="{
                color:
                  legend.name == '已处理'
                    ? '#18d7b9'
                    : legend.name == '处理中'
                    ? '#feba01'
                    : '#ff754c',
              }"
            >
              <span
                class="rect"
                :style="{
                  background:
                    legend.name == '已处理'
                      ? '#18d7b9'
                      : legend.name == '处理中'
                      ? '#feba01'
                      : '#ff754c',
                }"
              ></span>
              {{ legend.name }} {{ legend.value }}
            </div>
          </div>
        </div>
      </ShadowContainer>
    </div>
    <CheckInDialog
      :visible="checkInDialogVisible"
      :type="checkType"
      @changeVisible="(val) => (checkInDialogVisible = val)"
    ></CheckInDialog>
    <DeviceDialog
      :visible="deviceDialogVisible"
      :type="onlineStatus"
      @changeVisible="(val) => (deviceDialogVisible = val)"
    ></DeviceDialog>
    <WarningRecordDialog
      :visible="warningRecordVisible"
      @changeVisible="(val) => (warningRecordVisible = val)"
    ></WarningRecordDialog>
  </div>
</template>
<script>
import {
  getBaseData,
  getDeviceStatus,
  getProgressDetail,
  getAIWarningData,
} from "@/api/index";
import CheckInDialog from "./CheckInDialog";
import DeviceDialog from "./DeviceDialog";
import WarningRecordDialog from "./WarningRecordDialog";

export default {
  name: "Construction",
  components: { CheckInDialog, DeviceDialog, WarningRecordDialog },
  data() {
    return {
      constructionUnits: [],
      personData: [],
      active: 4,
      deviceStatus: [],
      screenDetail: {
        unitList: {
          sgList: [],
          jsList: [],
          jlList: [],
          sjList: [],
          kcList: [],
        },
        manageList: [],
        plane_image_arr: [],
      },
      progressDetail: {
        progress_data: [],
        sg_num: 0,
        zgq_num: 0,
        step: 0,
        current_progress_over_day: 0,
      },
      aiwarningData: [],
      AIwarningTotal: 0,
      interval1: null,
      timeout1: null,
      interval2: null,
      timeout2: null,
      interval3: null,
      timeout3: null,
      deviceStatusCount: {
        total: 0,
        zx_total: 0,
        lx_total: 0,
      },
      checkInDialogVisible: false,
      checkType: "normal",
      deviceDialogVisible: false,
      onlineStatus: "online",
      warningRecordVisible: false,
    };
  },
  methods: {
    renderQualityChart() {
      let total = 0;
      this.aiwarningData.map((item) => {
        total += item.value;
      });
      this.AIwarningTotal = total;
      const chart = this.$echarts.init(this.$refs.qualityChart);
      const option = {
        tooltip: {
          trigger: "item",
          appendToBody: true,
        },
        series: [
          {
            type: "pie",
            radius: ["58%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: this.aiwarningData.map((item) => {
              return {
                ...item,
                itemStyle: {
                  color:
                    item.name == "已处理"
                      ? "#18d7b9"
                      : item.name == "处理中"
                      ? "#feba01"
                      : "#ff754c",
                },
              };
            }),
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("quality-chart"));
      });
    },
    getBaseData() {
      getBaseData().then((res) => {
        if (res.status == 200) {
          this.screenDetail = res.data;

          this.$nextTick(() => {
            const element = document.getElementById("table-scroll");
            this.autoScroll(1, 50, 1500, element);
          });
        }
      });

      getDeviceStatus().then((res) => {
        if (res.status == 200) {
          this.deviceStatusCount = {
            total: res.data.total,
            zx_total: res.data.zx_total,
            lx_total: res.data.lx_total,
          };
          this.deviceStatus = res.data.device_data;

          this.$nextTick(() => {
            const element = document.getElementById("table-scroll-status");
            this.autoScrollStatus(1, 50, 1500, element);
          });
        }
      });
      getProgressDetail().then((res) => {
        if (res.status == 200) {
          this.progressDetail = res.data;
          if (res.data.progress_data.length > 5) {
            document.getElementById("step-scroll").style.width =
              20 * res.data.progress_data.length + "%";
          }
          console.log(this.progressDetail.step);
          console.log(this.progressDetail.progress_data);
          const timeArray = this.progressDetail.progress_data.map((item) => {
            return new Date(item.over_date).getTime();
          });
          let todayTs = new Date(this.getTime()).getTime();
          console.log(timeArray.indexOf(todayTs));
          if (timeArray.indexOf(todayTs) == -1) {
            let insertIndex = timeArray.findIndex((item) => {
              return item > todayTs;
            });

            if (insertIndex > this.progressDetail.step) {
              this.progressDetail.progress_data.splice(
                this.progressDetail.step,
                0,
                {
                  over_date: this.getTime(),
                  status_text: "当前进度",
                  type: "wait",
                  name: "当时日期",
                }
              );
              this.progressDetail.step = this.progressDetail.step + 1;
              this.$nextTick(() => {
                let wait_step = document
                  .getElementById("step-scroll")
                  .getElementsByClassName("el-step");
                let wait_line = wait_step[
                  insertIndex - 1
                ].getElementsByClassName("el-step__line-inner")[0];
                wait_line.style.cssText =
                  "transition-delay: 150ms; width: 100%!important;border-width:0px!important";
              });
            } else {
              this.progressDetail.progress_data.splice(insertIndex, 0, {
                over_date: this.getTime(),
                status_text: "当前进度",
                name: "当时日期",
              });
              this.$nextTick(() => {
                let wait_step = document
                  .getElementById("step-scroll")
                  .getElementsByClassName("el-step");
                let wait_line = wait_step[
                  insertIndex - 1
                ].getElementsByClassName("el-step__line-inner")[0];
                wait_line.style.cssText =
                  "transition-delay: 150ms; width: 100%!important";
              });
            }
          }

          this.$nextTick(() => {
            const element = document.getElementById("scroll-container");
            this.autoScrollX(1, 50, 1500, element);
          });
        }
      });
      getAIWarningData().then((res) => {
        this.aiwarningData = res.data;
        this.renderQualityChart();
      });
    },

    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;
      return today;
    },
    autoScroll(stepLength, speed, delay, element) {
      //let step = 1
      // element.scrollTop = 0;
      var that = this;
      function start() {
        that.interval1 = setInterval(scrolling, speed);
        element.scrollTop += stepLength;
      }
      function scrolling() {
        var sTop = element.scrollTop;
        element.scrollTop += stepLength;
        if (
          sTop === element.scrollTop ||
          sTop == 0 ||
          element.scrollTop === element.scrollHeight - element.offsetHeight
        ) {
          stepLength *= -1; // 转换方向
          clearInterval(that.interval1);
          that.timeout1 = setTimeout(start, delay);
        }
      }
      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        that.timeout1 = setTimeout(start, delay);
      }
    },
    clearScroll() {
      clearInterval(this.interval1);
      clearTimeout(this.timeout1);
    },
    reScroll() {
      this.$nextTick(() => {
        const element = document.getElementById("table-scroll");
        this.autoScroll(1, 50, 1500, element);
      });
    },

    autoScrollX(stepLength, speed, delay, element) {
      var that = this;
      function start() {
        that.interval2 = setInterval(scrolling, speed);
        element.scrollLeft += stepLength;
      }
      function scrolling() {
        var sLeft = element.scrollLeft;
        element.scrollLeft += stepLength;
        if (
          sLeft === element.scrollLeft ||
          sLeft == 0 ||
          element.scrollLeft === element.scrollWidth - element.offsetWidth
        ) {
          element.scrollLeft = 0;
          clearInterval(that.interval2);
          that.timeout2 = setTimeout(start, delay);
        }
      }
      if (element.offsetWidth !== element.scrollWidth) {
        // 元素内容没有溢出时，不触发
        that.timeout2 = setTimeout(start, delay);
      }
    },
    clearScrollX() {
      clearInterval(this.interval2);
      clearTimeout(this.timeout2);
    },
    reScrollX() {
      this.$nextTick(() => {
        const element = document.getElementById("scroll-container");
        this.autoScrollX(1, 50, 1500, element);
      });
    },

    autoScrollStatus(stepLength, speed, delay, element) {
      var that = this;
      function start() {
        that.interval3 = setInterval(scrolling, speed);
        element.scrollTop += stepLength;
      }
      function scrolling() {
        var sLeft = element.scrollTop;
        element.scrollTop += stepLength;
        if (
          sLeft === element.scrollTop ||
          sLeft == 0 ||
          element.scrollTop === element.scrollHeight - element.offsetHeight
        ) {
          element.scrollTop = 0;
          clearInterval(that.interval3);
          that.timeout3 = setTimeout(start, delay);
        }
      }
      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        that.timeout3 = setTimeout(start, delay);
      }
    },
    clearScrollStatus() {
      clearInterval(this.interval3);
      clearTimeout(this.timeout3);
    },
    reScrollStatus() {
      this.$nextTick(() => {
        const element = document.getElementById("table-scroll-status");
        this.autoScrollStatus(1, 50, 1500, element);
      });
    },
    jumpPage(item) {
      if (item.type == 1) {
        this.$router.push({
          path: "/tower",
          query: { token_code: localStorage.getItem("token") },
        });
      } else if (item.type == 2) {
        this.$router.push({
          path: "/supervisory",
          query: { token_code: localStorage.getItem("token") },
        });
      } else if (item.type == 3) {
        this.$router.push({
          path: "/realname",
          query: { token_code: localStorage.getItem("token") },
        });
      } else if (item.type == 4) {
        this.$router.push({
          path: "/safecap",
          query: { token_code: localStorage.getItem("token") },
        });
      } else if (item.type == 8) {
        this.$router.push({
          path: "/earlywarning",
          query: { token_code: localStorage.getItem("token") },
        });
      } else if (item.type == 9) {
        this.$router.push({
          path: "/noise",
          query: { token_code: localStorage.getItem("token") },
        });
      } else if (item.type == 13) {
        this.$router.push({
          path: "/fallprotection",
          query: { token_code: localStorage.getItem("token") },
        });
      } else if (item.type == 14) {
        this.$router.push({
          path: "/unloadingplatform",
          query: { token_code: localStorage.getItem("token") },
        });
      } else if (item.type == 15) {
        this.$router.push({
          path: "/elevator",
          query: { token_code: localStorage.getItem("token") },
        });
      }
    },
  },

  mounted() {
    this.getBaseData();
  },
};
</script>
<style scoped lang="less">
@import "@/assets/common/element.less";
#construction {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  height: calc(100% - 24px);
  padding-bottom: 0;
}
.side-area {
  min-width: 400px;
  width: 25%;
  height: 100%;
}
.mid-area {
  width: calc(50% - 24px);
  height: 100%;
}
.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 {
  text-align: center;
  margin-bottom: 28px;
  position: relative;
  padding: 18px 0 12px;
  background: url("@/assets/icon-short-bg.png") no-repeat;
  background-size: 100% 100%;
  .construction-detail {
    width: calc(50% - 18px);
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  img {
    position: absolute;
    width: 100%;
    vertical-align: top;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .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;
  &: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);
  }
}
table {
  width: 100%;
  border: 1px solid #097ca7;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #097ca7;
    padding: 14px;
  }
  .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;
  width: 200px;
  height: 200px;
  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    .main-title {
      font-size: 30px;
      font-weight: bold;
      color: #00fcff;
    }
    .sub-title {
      font-size: 16px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
#quality-chart {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url("@/assets/chart.png") no-repeat;
  background-size: 50% 50%;
  background-position: center center;
}
.steps {
  padding-top: 40px;
  overflow-x: hidden;
}
.step-title {
  position: relative;
  color: #c0c4cc;
  font-size: 12px;

  .step-status {
    position: absolute;
    top: -130%;
    color: #c0c4cc;
    font-size: 12px;
  }
}
.step-description {
  font-size: 14px;
  color: #c0c4cc;
}

.progress-contains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.progress {
  position: relative;
  width: 100%;
  img {
    width: 100%;
  }
  .progress-container {
    width: 100%;
    background: url("@/assets/icon-long-bg.png") no-repeat;
    background-size: 100% 100%;
    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;
  height: 100%;
  .container-img {
    width: 100%;
    vertical-align: top;
    object-fit: cover;
  }
  .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 {
  overflow-y: auto;
  margin-top: 20px;
  height: calc(100% - 106px);
  overflow-y: auto;
  .status-count {
    width: calc(100% - 20px);
    padding: 8px 10px;
    background: rgba(44, 96, 162, 0.2);
    text-align: left;
    cursor: pointer;
    margin-bottom: 10px;
    white-space: nowrap;
    .status-img {
      width: 50px;
      height: 50px;
      vertical-align: middle;
      display: inline-block;
    }
    .status-text {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 30px;
      height: 30px;
      width: 65px;
      text-align-last: justify;
      -ms-text-align-last: justify;
      -moz-text-align-last: justify;
      padding: 0 10px;
      display: inline-block;
      vertical-align: middle;
    }
    .status-number {
      font-weight: 400;
      color: #25d2ff;
      font-size: 13px;
      line-height: 30px;
      padding: 0 6px;
      width: calc(calc(100% - 170px) / 3);
      display: inline-block;
      vertical-align: middle;
      border-left: 1px solid rgba(44, 96, 162, 0.6);
      text-align: center;
      span.number {
        font-size: 20px;
        line-height: 30px;
        margin-right: 4px;
      }
    }
  }
}
.unit-scroll {
  max-height: 160px;
  overflow: scroll;
}

.table-label {
  font-size: 14px;
  color: #22c3ed;
}
.table-unit {
  margin-bottom: 12px;
  &:last-child {
    margin-bottom: 0;
  }
}
.table-scroll {
  height: calc(100% - 190px);
  overflow-y: auto;
}
.check-in {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  .checks {
    width: 50%;
    text-align: center;
    cursor: pointer;
    &:hover {
      img {
        transform: translateY(-20px);
        transition: 1s;
      }
    }
    &:first-child {
      border-right: 1px solid rgba(9, 124, 167, 0.5);
    }
    img {
      width: 80%;
      margin: 0 auto;
      vertical-align: top;
    }
    .title {
      font-size: 12px;
      color: rgba(225, 239, 255, 0.7);
      margin-bottom: 20px;
      margin-top: 10px;
    }
    .count {
      font-size: 40px;
      span {
        font-size: 14px;
      }
    }
  }
}

#step-scroll {
  margin-top: 40px;
  width: 100%;
}
.long-container {
  height: calc(66% - 108px);
}
.short-container {
  height: calc(33% - 98px);
}
::v-deep .el-carousel {
  height: 100%;
}
.construction-status {
  height: 100%;
}
.chart-legends {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  & > div {
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    width: 100%;
    text-align: left;
  }
  .rect {
    width: 8px;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
  }
}
#scroll-container {
  width: 100%;
  overflow-x: auto;
}
#scroll-container::-webkit-scrollbar {
  display: inline !important;
}
.el-steps {
  // ::v-deep .el-step__head.is-process {
  //   ::v-deep .el-step__line {
  //     ::v-deep .el-step__line-inner {
  //       border-width: 0px !important;
  //     }
  //   }
  // }
  ::v-deep .el-step.wait {
    .el-step__icon,
    .el-step__line {
      border-color: #ffb81e !important;
    }
    .step-status,
    .step-description,
    .step-title {
      color: #ffb81e !important;
    }

    ::v-deep .el-step__head.is-success {
      color: #ffb81e !important;
      border-color: #ffb81e !important;
    }
    ::v-deep .el-step__line {
      ::v-deep .el-step__line-inner {
        border-color: #ffb81e !important;
      }
    }
  }
}

::v-deep .el-step.success {
  .step-status,
  .step-description,
  .step-title {
    color: #67c23a !important;
  }
}

.devices {
  position: relative;
  width: 100%;

  img {
    width: 100%;
  }
  .device-container {
    width: 100%;
    background: url("@/assets/device-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    .device-area {
      width: 50%;
      text-align: center;
      padding: 12px;
      cursor: pointer;
    }
    .device-count {
      font-size: 30px;

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

      font-weight: 400;
      color: #27acfb;
    }
  }
}
</style>