<template>
  <!-- 进度管理 -->
  <div class="fullHeight">
    <div class="optionBox_wrap">
      <div class="optionBox">
        <vue-scroll
          v-if="ProgressPlanBidSectionList.length != 0"
          :ops="ops"
          ref="navScroll"
        >
          <div
            @click="changeOptionBoxListIndex(index, item.id)"
            v-for="(item, index) in ProgressPlanBidSectionList"
            :key="index"
            class="optionBox_item"
            :class="{
              selectOptionBox_item: selectProgressPlanBidSection === index,
            }"
          >
            <span>{{ item.projectfName }}</span>
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
            <div class="d"></div>
          </div>
        </vue-scroll>
      </div>
    </div>
    <!-- <vue-scroll>
            <img  src="@/assets/images/dataBoard/6.png" style="height:auto;width:100%"/>
            </vue-scroll> -->
    <div class="top_box">
      <div class="aside fullHeight">
        <div class="blockBox">
          <div class="blockTitle">
            <!-- 进度总览 -->
            {{ $t("message.dataBoard.progressOfTheOverview") }}
          </div>
          <div class="blockContent">
            <div class="blockContentTitleBox">
              <span class="TitleBoxSpan TitleBoxSpan1">
                <!-- 全景节点: -->
                {{ $t("message.dataBoard.panoramaNode") + ":"
                }}<span style="font-size: 18px; font-weight: 900">{{
                  progressOverview.panoramaNodeNum
                    ? progressOverview.panoramaNodeNum
                    : "0"
                }}</span></span
              >
              <span class="TitleBoxSpan TitleBoxSpan2">
                <!-- 楼栋节点数: -->
                {{ $t("message.dataBoard.buildingNodeNum") + ":"
                }}<span style="font-size: 18px; font-weight: 900">{{
                  progressOverview.buildingNodeNum
                    ? progressOverview.buildingNodeNum
                    : "0"
                }}</span></span
              >
            </div>
            <div class="ChartsBox">
              <div class="Charts" ref="Chart1"></div>
              <!-- 进行中节点数 -->
              {{ $t("message.dataBoard.doingNodeNum") }}
            </div>
            <div class="ChartsBox">
              <div class="Charts" ref="Chart2"></div>
              <!-- 已完成节点数 -->
              {{ $t("message.dataBoard.completeNodeNum") }}
            </div>
            <div class="ChartsBox">
              <div class="Charts" ref="Chart3"></div>
              <!-- 逾期节点数 -->
              {{ $t("message.dataBoard.overdueNodeNum") }}
            </div>
          </div>
        </div>
        <div class="blockBox">
          <div class="blockTitle">
            <!-- 整体进度 -->
            {{ $t("message.dataBoard.overallProgress") }}
          </div>
          <div class="blockContent">
            <div class="dotBox">
              <p class="text">
                <i style="background: #44d7b6" class="dot"></i
                ><span>
                  <!-- 提前完成/正常完成/进行中 -->
                  {{ $t("message.dataBoard.progressStatusList")[0] }}
                </span>
              </p>
              <p class="text">
                <i style="background: #ff0000" class="dot"></i
                ><span>
                  <!-- 期完成/逾期 -->
                  {{ $t("message.dataBoard.progressStatusList")[1] }}
                </span>
              </p>
            </div>
            <div class="list_wrap" v-if="allProgress.length > 0">
              <vue-scroll>
                <div class="list_box">
                  <div
                    class="list_item"
                    v-for="(item, index) in allProgress"
                    :key="index"
                  >
                    <span>{{ item.buildingName }}</span>
                    <div
                      class="point"
                      :class="{
                        point2:
                          item.deferCompleteNodeNum > 0 ||
                          item.deferNodeNum > 0,
                      }"
                    ></div>
                    <div
                      class="item_detail"
                      :style="{ left: (index + 1) % 3 != 0 ? '60%' : '-100%' }"
                    >
                      <p class="detail_title item_h">{{ item.buildingName }}</p>
                      <p class="detail_title">
                        <!-- 总完成数： -->{{
                          $t("message.dataBoard.totalCompleteNum") + ":"
                        }}{{ item.completeNodeNum }}
                      </p>
                      <p class="detail_info">
                        <span class="p1"></span
                        ><i>
                          <!-- 正常完成 -->
                          {{ $t("message.dataBoard.completeStatus")[0] }} </i
                        ><span>{{ item.normalCompleteNodeNum }}个</span>
                      </p>
                      <p class="detail_info">
                        <span class="p1"></span
                        ><i>
                          <!-- 提前完成 -->
                          {{ $t("message.dataBoard.completeStatus")[1] }} </i
                        ><span>{{ item.beforeCompleteNodeNum }}个</span>
                      </p>
                      <p class="detail_info">
                        <span class="p1"></span
                        ><i>
                          <!-- 进行中 -->
                          {{ $t("message.dataBoard.completeStatus")[3] }} </i
                        ><span>{{ item.executeNodeNum }}个</span>
                      </p>
                      <p class="detail_info">
                        <span class="p2"></span
                        ><i>
                          <!-- 逾期完成 -->
                          {{ $t("message.dataBoard.completeStatus")[2] }} </i
                        ><span>{{ item.deferCompleteNodeNum }}个</span>
                      </p>
                      <p class="detail_info">
                        <span class="p2"></span
                        ><i>
                          <!-- 逾期 -->
                          {{ $t("message.dataBoard.completeStatus")[4] }} </i
                        ><span>{{ item.deferNodeNum }}个</span>
                      </p>
                    </div>
                  </div>
                </div>
              </vue-scroll>
            </div>
            <div v-else style="text-align: center" class="noDataImgBox">
              <img
                style="width: 150px"
                class="noDataImg"
                src="@/assets/images/noData3.png"
                alt=""
                srcset=""
              />
              <p>
                <!-- 暂无数据 -->
                {{ $t("message.dataBoard.nodata") }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 全景计划 -->
      <div class="right fullHeight">
        <div class="blockBox blockBox2">
          <div class="blockTitle">
            <!-- 全景计划 -->
            {{ $t("message.dataBoard.panoramaPlan") }}
          </div>
          <div class="legend_box">
            <div class="legend_item">
              <img
                style="height: 31px; width: 26px"
                src="../../../assets/images/dataBoard/stage3.png"
              />
              <!-- 已完成 -->
              {{ $t("message.dataBoard.projectStatusList")[0] }}
            </div>
            <div class="legend_item">
              <img
                style="height: 31px; width: 26px"
                src="../../../assets/images/dataBoard/stage2.png"
              />
              <!-- 进行中 -->
              {{ $t("message.dataBoard.projectStatusList")[1] }}
            </div>
            <div class="legend_item">
              <img
                style="height: 31px; width: 26px"
                src="../../../assets/images/dataBoard/stage1.png"
              />
              <!-- 未开始 -->
              {{ $t("message.dataBoard.projectStatusList")[2] }}
            </div>
          </div>
          <div class="blockContent" style="display: flex; align-items: center">
            <div class="stageBox">
              <vue-scroll
                v-if="stageList2.length > 0"
                :ops="ops"
                ref="stageScroll"
              >
                <div
                  class="planList"
                  :style="{
                    'justify-content':
                      index % 2 !== 0 ? 'flex-end' : 'flex-start',
                  }"
                  :class="{
                    right_line:
                      index % 2 == 0 &&
                      index != stageList2.length - 1 &&
                      item.length == 5,
                    left_line:
                      index % 2 != 0 &&
                      index != stageList2.length - 1 &&
                      item.length == 5,
                  }"
                  v-for="(item, index) in stageList2"
                  :key="index"
                >
                  <div
                    class="planItem"
                    v-for="(item2, index2) in item"
                    :key="index2"
                  >
                    <div class="left">
                      <div
                        style="
                          height: 80px;
                          display: flex;
                          align-items: flex-end;
                          margin-bottom: 7px;
                        "
                      >
                        <img
                          src="../../../assets/images/dataBoard/stage3.png"
                          v-if="item2.status === 6"
                        />
                        <img
                          style="width: 60px; height: 80px"
                          src="../../../assets/images/dataBoard/stage2.png"
                          v-else-if="item2.status === 2"
                          alt=""
                        />
                        <img
                          src="../../../assets/images/dataBoard/stage1.png"
                          v-else
                        />
                      </div>
                      <div
                        :title="item2.nodeName"
                        class="title"
                        :class="{
                          left_title: index % 2 != 0,
                          end_title3: index2 == item.length - 1,
                        }"
                      >
                        <span> {{ item2.nodeName }}</span>
                        <div class="line"></div>
                      </div>
                      <div class="starDate" v-if="item2.plannedFinishDate">
                        {{ $t("message.dataBoard.planComplete") + ":"
                        }}<!-- 计划完成:  -->{{
                          item2.plannedFinishDate
                            ? item2.plannedFinishDate
                            : "--"
                        }}
                      </div>
                      <div class="endDate1" v-if="item2.actualFinishDate">
                        {{ $t("message.dataBoard.realComplete") + ":"
                        }}<!-- 实际完成： -->{{
                          item2.actualFinishDate ? item2.actualFinishDate : ""
                        }}
                      </div>
                    </div>
                    <!-- <img src="../../../assets/images/dataBoard/line.png" alt=""  class="right">
                                             <img src="../../../assets/images/dataBoard/left.png" alt="" class="left2"> -->
                  </div>
                </div>
                <!-- <div class="box">
                                      <plan-item :starDate="item.plannedFinishDate?item.plannedFinishDate:'--'" :endDate="item.actualFinishDate?item.actualFinishDate: ''" :title="item.nodeName" :item="index" v-for="(item,index) in stageList2" :key="index" :status="item.status"></plan-item>
                                  </div> -->
              </vue-scroll>

              <div v-else style="text-align: center" class="noDataImgBox">
                <img
                  style="width: 150px"
                  class="noDataImg"
                  src="@/assets/images/noData3.png"
                  alt=""
                  srcset=""
                />
                <p>
                  <!-- 暂无数据 -->
                  {{ $t("message.dataBoard.nodata") }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="blockBox blockBox2 bottom">
      <div class="blockTitle">
        <!-- 楼栋进度图 -->
        {{ $t("message.dataBoard.buildingProgressPicture") }}
      </div>

      <el-select
        v-model="alarmType2"
        size="small"
        class="buildingSelect"
        @change="changeResultList"
      >
        <el-option
          v-for="(item, index) in resultList"
          :key="index"
          :value="item.id"
          :label="item.buildingName"
        ></el-option>
      </el-select>
      <div class="blockContent" style="display: flex; align-items: center">
        <div class="stageBox">
          <vue-scroll
            v-if="BuildingPlanList.length > 0"
            :ops="ops"
            ref="stageScroll2"
          >
            <!-- <div class="buildingList" :style="{'justify-content': index%2 !== 0 ?'flex-end':'flex-start'}" :class="{'right_line': index%2 == 0 && index != BuildingPlanList.length-1 && index !=5 ,'left_line': index%2 != 0 && index != BuildingPlanList.length-1 && item.length === 6 }" v-for="(item,index) in BuildingPlanList" :key="index"> -->
            <div
              class="buildingList"
              :style="{
                'justify-content':
                  index % 2 !== 0 ? 'flex-start' : 'flex-start',
              }"
              :class="{
                right_line:
                  index % 2 == 0 &&
                  index != BuildingPlanList.length - 1 &&
                  index != 5,
                left_line:
                  index % 2 != 0 &&
                  index != BuildingPlanList.length - 1 &&
                  item.length === 6,
              }"
              v-for="(item, index) in BuildingPlanList"
              :key="index"
            >
              <div
                class="buildingItem"
                v-for="(item2, index2) in item"
                :key="index2"
              >
                <div :title="item2.nodeName" class="building_title">
                  {{ item2.nodeName }}
                </div>
                <div class="building_line">
                  <span
                    :class="{
                      dot1: item2.nodeState == 2,
                      dot2: item2.nodeState == 4,
                      dot3: item2.nodeState == 3,
                      dot4: item2.nodeState == 5,
                      dot5: item2.nodeState == 1,
                    }"
                  ></span>
                  <div
                    class="line"
                    :class="{ line2: (index + 1) % 2 == 0 }"
                  ></div>
                </div>
                <div class="building_info">
                  <div class="building_time">
                    <p>
                      <!-- 计划完成： -->{{
                        $t("message.dataBoard.planComplete") + ":"
                      }}{{
                        item2.plannedFinishDate ? item2.plannedFinishDate : ""
                      }}
                    </p>
                    <p>
                      <!-- 实际完成： -->{{
                        $t("message.dataBoard.realComplete") + ":"
                      }}{{
                        item2.actualFinishDate ? item2.actualFinishDate : ""
                      }}
                    </p>
                  </div>
                  <div class="building_status" v-if="item2.nodeState == 2">
                    {{ $t("message.dataBoard.completeStatus")[4]
                    }}<!-- 逾期 -->{{ item2.deferDiffDay
                    }}{{ $t("message.dataBoard.textList")[0]
                    }}<!-- 天 -->
                  </div>
                  <div class="building_status2" v-if="item2.nodeState == 4">
                    <!-- 提前 -->{{ $t("message.dataBoard.textList")[1]
                    }}{{ item2.beforeCompleteDiffDay
                    }}{{ $t("message.dataBoard.textList")[2]
                    }}<!-- 天完成 -->
                  </div>
                  <div class="building_status3" v-if="item2.nodeState == 3">
                    {{ $t("message.dataBoard.textList")[3]
                    }}<!-- 正常完成 -->
                  </div>
                  <div class="building_status4" v-if="item2.nodeState == 5">
                    {{ $t("message.dataBoard.completeStatus")[4]
                    }}<!-- 逾期 -->{{ item2.deferCompleteDiffDay
                    }}{{ $t("message.dataBoard.textList")[2]
                    }}<!-- 天完成 -->
                  </div>
                  <div class="building_status5" v-if="item2.nodeState == 1">
                    <!-- 进行中 -->
                    {{ $t("message.dataBoard.completeStatus")[3] }}
                  </div>
                </div>
              </div>
            </div>
          </vue-scroll>
          <!-- <vue-scroll v-if="stageList2.length != 0" :ops="ops" ref="stageScroll">
                            <div
                                    class="stageItem"
                                    
                                    v-for="(item, index) in stageList2"
                                    :key="index"
                                    :class="item.status == 6? 'finish': item.status == 2? 'ongoing': ''">
                                <div class="statusImg"></div>
                                <p>{{ item.nodeName }}</p>
                                <div style="bottom: 45px;" class="line" v-show="stageList2.length != index + 1"></div>
                                <p v-if="item.plannedFinishDate" style="color: #61676b;">计划完成:{{ item.plannedFinishDate?item.plannedFinishDate:'--'}}</p>
                                <p v-else style="color: #61676b;height: 16px;isplay: inline-block"></p>
                                <p v-if="item.actualFinishDate" style="color: #61676b;">实际完成:{{ item.actualFinishDate?item.actualFinishDate: ''}}</p>
                                <p v-else style="color: #61676b;height: 16px;display: inline-block"></p>
                            </div>
                        </vue-scroll> -->

          <div
            v-else
            style="text-align: center; margin: 0px 600px"
            class="noDataImgBox"
          >
            <img
              style="width: 150px"
              class="noDataImg"
              src="@/assets/images/noData3.png"
              alt=""
              srcset=""
            />
            <p>
              <!-- 暂无数据 -->
              {{ $t("message.dataBoard.nodata") }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :title="$t('message.dataBoard.configProjectCompleteDate')"
      :visible.sync="dialogVisible"
      width="667px"
    >
      <div style="text-align: center; margin-bottom: 30px">
        <el-date-picker
          size="medium"
          v-model="endDate"
          type="date"
          placeholder="$t('message.dataBoard.chooseDate')"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <!-- <br> -->
        <el-button
          type="primary"
          size="medium"
          @click="saveDataFn"
          style="margin-left: 20px"
        >
          <!-- 保存 -->
          {{ $t("message.dataBoard.save") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import echarts from "echarts4";
import {
  getProjectDetail,
  getProjectExtendInfoApi,
  editProjectExtendApi,
} from "@/assets/js/api/baseInfo.js";
import {
  selectProgressItemStatisticsApi,
  selectProgressItemOverdueListApi,
  selectPersonOverdueProgressItemNumListApi,
  getPlanNodeStatisticsApi,
  selectBuildingNodeStatisticsListApi,
  progressBuildingPlanListApi,
  selectBuildingNodeDetailStatisticsListApi,
  selectPanoramaNodePlanListApi,
  selectProgressPlanBidSectionListApi,
} from "@/assets/js/api/dataBoard.js";
import { GetDateStr } from "@/assets/js/util";
import planItem from "./components/planItem.vue";
export default {
  data() {
    return {
      selectItem: "",
      ops: {
        vuescroll: {
          // wheelScrollDuration: 0,
          wheelDirectionReverse: true,
        },
      },
      stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
      stageList2: [], //全景计划
      projectData: {
        constructionStage: 10,
        videoUrl: "",
      },
      alarmList: [],
      alarmType: 1,
      endDate: "",
      dialogVisible: false,
      leftDays: 0,
      baseURL: "",
      progressOverview: "", //进度总览所需数据
      resultList: "", //所有楼栋
      alarmType2: "",
      alarmType3: "",
      BuildingPlanList: "", //楼栋计划
      selectProgressPlanBidSection: 0, //所选标段
      ProgressPlanBidSectionList: [], //标段列表
      bidSectionId: "", //标段id
      noDataImg1: "", //
      noDataImg2: "", //
      noDataImg3: "", //
      allProgress: [],
    };
  },
  components: {
    planItem,
  },
  mounted() {
    this.baseURL = this.$http.defaults.baseURL;

    // this.getData()
    // this.getData3()
  },
  created() {
    this.selectProgressPlanBidSectionList();
    this.selectBuildingNodeDetailStatisticsList();
  },
  methods: {
    changeOptionBoxListIndex(index, id) {
      this.selectProgressPlanBidSection = index;
      this.bidSectionId = id;
      this.getPlanNodeStatistics();
      this.selectBuildingNodeStatisticsList();
      this.progressBuildingPlanList();
      this.selectPanoramaNodePlanList();
    },
    //标段列表
    selectProgressPlanBidSectionList() {
      selectProgressPlanBidSectionListApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        this.ProgressPlanBidSectionList = res.result;
        this.bidSectionId = this.ProgressPlanBidSectionList[0].id;
        this.selectPanoramaNodePlanList();
        this.getPlanNodeStatistics();
        this.selectBuildingNodeStatisticsList();
        this.progressBuildingPlanList();
        console.log(res.result, "标段信息"); //projectfName
      });
    },
    //全景计划
    selectPanoramaNodePlanList() {
      selectPanoramaNodePlanListApi({
        projectSn: this.$store.state.projectSn,
        bidSectionId: this.bidSectionId,
      }).then((res) => {
        //    let  allPlan = []
        //    console.log(res)
        //    res.result.forEach(x=>)
        // const index = this.stageList2.findIndex((item,index) => {
        //   return item.status == 2
        // })
        let index = res.result.findIndex((item, index) => {
          return item.status == 2;
        });
        console.log(index);
        let array = [];
        var j = 0;
        this.stageList2 = [];
        for (let i = 0; i < Math.ceil(res.result.length / 5); i++) {
          j += 5;
          console.log(res.result.slice(j - 5, j));
          array = res.result.slice(j - 5, j);
          this.stageList2.push(array);
        }
        for (let i = 0; i < this.stageList2.length; i++) {
          if (i % 2 === 1) {
            this.stageList2[i].reverse();
          }
        }
        if (index == -1) {
          index = res.result.length - 1;
        }
        console.log(this.stageList2, index);
        // console.log(index, res.result);
        this.$nextTick(() => {
          if (parseInt(index) > 4) {
            this.$refs["stageScroll"].scrollTo(
              {
                y: parseInt((index + 1) / 5) * 165,
                // x:'50%'
              },
              500
            );
          }
        });
        console.log(res.result);
      });
    },
    //班组图表
    createdGroupChart(xData, yData1, yData2, el, legendData) {
      console.log(yData2);
      let monitor = echarts.init(el);
      //       var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
      // var yMax = 500;
      // var dataShadow = [];

      // for (var i = 0; i < data.length; i++) {
      //     dataShadow.push(yMax);
      // }
      var option = {
        // legend: {
        //     show: true,
        //     align: "left",
        //     top: 5,
        //     left: 0,
        //     // itemWidth: 13,
        //     // itemHeight: 5,
        //     textStyle: {
        //         color: "#9fa2ad",
        //     },
        // },
        grid: {
          left: "10",
          right: "50",
          bottom: "10",
          top: "30",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
            formatter: function () {
              return "";
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: xData,
          axisLabel: {
            formatter: function (params) {
              var maxLength = 5;
              //判断长度，超出使用...代替
              if (params && params.length > maxLength) {
                return params.substring(0, maxLength - 1) + "...";
              } else {
                return params;
              }
            },
            textStyle: {
              // fontSize: 14,
              color: "white",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            return params[0].name;
            // console.log(params);
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 10,
            data: yData1,
            barGap: "-100%",
            itemStyle: {
              // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              //     { offset: 1, color: "#5181F6",},
              // ]),
              color: function (params) {
                //通过判断选中的名字改变柱子的颜色样式
                // console.log(params);//dataIndex
                // console.log(yData2[params.dataIndex]);
                if (yData2[params.dataIndex] == 1) {
                  return "#5181F6";
                } else if (yData2[params.dataIndex] == 2) {
                  return "#848484";
                } else if (yData2[params.dataIndex] == 3) {
                  return "#44D7B6";
                }
              },
              barBorderRadius: 5,
            },
            // label: {
            //     show: true,
            //     position: "right",
            //     color: "white",
            //     textStyle: {
            //       fontSize: 15,
            //     },
            //   },
          },
        ],
      };
      monitor.setOption(option);
    },
    changeResultList() {
      this.selectBuildingNodeDetailStatisticsList();
    },
    changeResultList2() {
      if (document.querySelector("iframe")) {
        document.querySelector("iframe").contentWindow.location.reload();
      }
    },
    //楼栋计划
    selectBuildingNodeDetailStatisticsList() {
      selectBuildingNodeDetailStatisticsListApi({
        buildingId: this.alarmType2,
      }).then((res) => {
        console.log(res.result);
        // this.BuildingPlanList = res.result
        let array = [];
        var j = 0;
        this.BuildingPlanList = [];
        for (let i = 0; i < Math.ceil(res.result.length / 6); i++) {
          j += 6;
          console.log(res.result.slice(j - 6, j));
          array = res.result.slice(j - 6, j);
          this.BuildingPlanList.push(array);
        }
        for (let i = 0; i < this.BuildingPlanList.length; i++) {
          if (i % 2 === 1) {
            console.log(this.BuildingPlanList[i]);
            this.BuildingPlanList[i].reverse();
          }
        }
        let index = res.result.findIndex((item, index) => {
          return item.nodeState == 1;
        });
        if (index == -1) {
          index = res.result.findIndex((item, index) => {
            return item.nodeState == 2;
          });
        }
        if (index == -1) {
          index = res.result.length - 1;
        }

        console.log(index, parseInt((index + 1) / 5));
        this.$nextTick(() => {
          if (parseInt(index) > 5) {
            this.$refs["stageScroll2"].scrollTo(
              {
                y: parseInt((index + 1) / 6) * 110,
                // x:'50%'
              },
              500
            );
          }
        });
        // this.createdGroupChart(xData, yData1, yData2, this.$refs.groupChart);
      });
    },
    getNewList(alarmType) {
      selectBuildingNodeDetailStatisticsListApi({ buildingId: alarmType }).then(
        (res) => {
          console.log(res.result);
          // this.BuildingPlanList = res.result
          let array = [];
          var j = 0;
          this.BuildingPlanList = [];
          for (let i = 0; i < Math.ceil(res.result.length / 6); i++) {
            j += 6;
            console.log(res.result.slice(j - 6, j));
            array = res.result.slice(j - 6, j);
            this.BuildingPlanList.push(array);
          }
          for (let i = 0; i < this.stageList2.length; i++) {
            if (i % 2 === 1) {
              this.BuildingPlanList[i].reverse();
            }
          }
          // this.createdGroupChart(xData, yData1, yData2, this.$refs.groupChart);
        }
      );
    },
    progressBuildingPlanList() {
      progressBuildingPlanListApi({
        projectSn: this.$store.state.projectSn,
        bidSectionId: this.bidSectionId,
      }).then((res) => {
        this.resultList = res.result;
        console.log(res.result);
        if (res.result.length) {
          this.alarmType2 = res.result[0].id;
          this.alarmType3 = res.result[0].id;
        } else {
          this.alarmType2 = "";
          this.alarmType3 = "";
        }
        this.selectBuildingNodeDetailStatisticsList();
        // console.log(this.BuildingPlanList);
      });
    },
    createPieChart(data, div, color, title, total) {
      let that = this;
      let monitor = echarts.init(div);
      var option = {
        color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
        title: {
          show: true,
          text: total,
          x: "45%",
          y: "42%",
          z: 5,
          textAlign: "center",
          textStyle: {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 20,
          },
          // subtext: title,
          // subtextStyle: {
          //     color: "rgba(255, 255, 255, 0.8)",
          //     fontSize: 13,
          // },
        },
        grid: {
          right: 0,
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      monitor.setOption(option);
    },
    //进度总览
    getPlanNodeStatistics() {
      getPlanNodeStatisticsApi({
        projectSn: this.$store.state.projectSn,
        bidSectionId: this.bidSectionId,
      }).then((res) => {
        // console.log(res)
        this.createPieChart(
          [
            {
              value:
                res.result.executeNodeNum +
                res.result.completeNodeNum +
                res.result.deferNodeNum +
                res.result.notStartNodeNum
                  ? res.result.executeNodeNum +
                    res.result.completeNodeNum +
                    res.result.deferNodeNum +
                    res.result.notStartNodeNum
                  : 1,
              name: "",
            },
            {
              value: res.result.executeNodeNum,
              name: "",
            },
          ],
          this.$refs.Chart1,
          ["rgba(68, 215, 182, 0.2)", "#557ded"],
          "",
          res.result.executeNodeNum
        );
        this.createPieChart(
          [
            {
              value:
                res.result.executeNodeNum +
                res.result.completeNodeNum +
                res.result.deferNodeNum +
                res.result.notStartNodeNum
                  ? res.result.executeNodeNum +
                    res.result.completeNodeNum +
                    res.result.deferNodeNum +
                    res.result.notStartNodeNum
                  : 1,
              name: "",
            },
            {
              value: res.result.completeNodeNum,
              name: "",
            },
          ],
          this.$refs.Chart2,
          ["rgba(68, 215, 182, 0.2)", "#44D7B6"],
          "",
          res.result.completeNodeNum
        );
        this.createPieChart(
          [
            {
              value:
                res.result.executeNodeNum +
                res.result.completeNodeNum +
                res.result.deferNodeNum +
                res.result.notStartNodeNum
                  ? res.result.executeNodeNum +
                    res.result.completeNodeNum +
                    res.result.deferNodeNum +
                    res.result.notStartNodeNum
                  : 1,
              name: "",
            },
            {
              value: res.result.deferNodeNum,
              name: "",
            },
          ],
          this.$refs.Chart3,
          ["rgba(68, 215, 182, 0.2)", "#FF0000"],
          "",
          res.result.deferNodeNum
        );
        this.progressOverview = res.result;
        console.log(res.result);
      });
    },
    //整体进度
    selectBuildingNodeStatisticsList() {
      selectBuildingNodeStatisticsListApi({
        projectSn: this.$store.state.projectSn,
        bidSectionId: this.bidSectionId,
      }).then((res) => {
        this.allProgress = res.result;
        console.log(res.result);
        let arr1 = [],
          arr2 = [],
          arr3 = [],
          arr4 = [],
          arr5 = [],
          arr6 = [],
          nameArr = [];
        this.noDataImg1 = res.result;
        console.log(res.result, this.noDataImg1.length != 0);
        res.result.forEach((item) => {
          nameArr.push(item.buildingName);
          arr1.push(item.normalCompleteNodeNum);
          arr2.push(item.beforeCompleteNodeNum);
          arr3.push(item.deferCompleteNodeNum);
          arr4.push(item.executeNodeNum);
          arr5.push(item.deferNodeNum);
          arr6.push(item.completeNodeNum);
          // console.log(item);
        });
        this.$nextTick(() => {
          this.createdBarCharts(
            nameArr,
            arr1,
            arr2,
            arr3,
            arr4,
            arr5,
            arr6,
            this.$refs.companyChart
          );
        });
      });
    },
    saveDataFn() {
      if (this.endDate == "") {
        // 请选择日期！
        this.$message.error(
          this.$t("message.dataBoard.pleaseChooseDate") + "!"
        );
        return;
      }
      editProjectExtendApi({
        projectSn: this.$store.state.projectSn,
        engineeringEndTime: this.endDate,
      }).then((res) => {
        // '保存成功！'
        this.$message.success(this.$t("message.dataBoard.saveSuccess") + "!");
        this.dialogVisible = false;
        this.getDaysBetween();
      });
    },
    /**
     * 计算两个日期之间的天数
     * @param dateString1  开始日期 yyyy-MM-dd
     * @param dateString2  结束日期 yyyy-MM-dd
     * @returns {number} 如果日期相同 返回一天 开始日期大于结束日期，返回0
     */
    getDaysBetween() {
      var startDate = Date.parse(GetDateStr(0, "-"));
      var endDate = Date.parse(this.endDate);
      if (startDate > endDate) {
        return 0;
      }
      if (startDate == endDate) {
        return 1;
      }
      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
      // return  days;
      this.leftDays = days;
    },
    changeAlarmType() {
      if (this.alarmType == 1) {
        this.getData3();
      } else {
        this.getData2();
      }
    },
    getData() {
      selectProgressItemStatisticsApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        var data = res.result;
        // this.createdBarCharts(['未开始','进行中','已完成'], this.$refs.companyChart)
      });
    },
    getData2() {
      selectProgressItemOverdueListApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        this.alarmList = res.result;
      });
    },
    getData3() {
      selectPersonOverdueProgressItemNumListApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        this.alarmList = res.result;
      });
    },
    //年龄结构---图表
    createdBarCharts(
      xData,
      yData1,
      yData2,
      yData3,
      yData4,
      yData5,
      yData6,
      el
    ) {
      let that = this;
      let ageChart = echarts.init(el);
      //   ageChart.clear();
      let option = {
        grid: {
          top: 20,
          left: 0,
          bottom: 10,
          right: 20,
          containLabel: true,
        },
        color: ["#5CE2F6", "#5181F6"],
        dataZoom: [
          {
            show: true,
            // realtime: true,
            start: 50,
            end: 100,
            height: 8,
            borderColor: "transparent",
            backgroundColor: "#000",
            filterColor: "#999999",
            bottom: 0,
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter(params) {
            return (
              params[0].name +
              "<br />" +
              '<span style="font-size: 14px">' +
              this.$t("message.dataBoard.totalCompleteNum") +
              ":" +
              yData6[params[0].dataIndex] +
              "</span>" +
              "<br />" +
              '<span style="background: #44D7B6;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
              '<span style="font-size: 12px">' +
              this.$t("message.dataBoard.completeStatus")[0] +
              ":" +
              params[0].value +
              "</span>" +
              "<br />" +
              '<span style="background: #F7D300;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
              '<span style="font-size: 12px">' +
              this.$t("message.dataBoard.completeStatus")[1] +
              ":" +
              params[1].value +
              "</span>" +
              "<br />" +
              '<span style="background: #FE6C7F;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
              '<span style="font-size: 12px">' +
              this.$t("message.dataBoard.completeStatus")[2] +
              ":" +
              params[2].value +
              "</span>" +
              "<br />" +
              '<span style="background: #3D6DC3;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
              '<span style="font-size: 12px">' +
              this.$t("message.dataBoard.completeStatus")[3] +
              ":" +
              params[3].value +
              "</span>" +
              "<br />" +
              '<span style="background: #FF0000;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
              '<span style="font-size: 12px">' +
              this.$t("message.dataBoard.completeStatus")[4] +
              ":" +
              params[4].value +
              "</span>"
            );
          },
        },
        legend: {
          show: false,
          align: "left",
          top: 5,
          left: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },

        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.2)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: /* '正常完成', */ this.$t(
              "message.dataBoard.completeStatus"
            )[0],
            data: yData1,
            type: "bar",
            stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
            color: "#44D7B6",
          },
          {
            name: /* '提前完成', */ this.$t(
              "message.dataBoard.completeStatus"
            )[1],
            data: yData2,
            type: "bar",
            stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
            color: "#F7D300",
          },
          {
            name: /* '逾期完成', */ this.$t(
              "message.dataBoard.completeStatus"
            )[2],
            data: yData3,
            type: "bar",
            stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
            color: "#FE6C7F",
          },
          {
            name: /* '进行中', */ this.$t(
              "message.dataBoard.completeStatus"
            )[3],
            data: yData4,
            type: "bar",
            stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
            color: "#3D6DC3",
          },
          {
            name: /* '逾期', */ this.$t("message.dataBoard.completeStatus")[4],
            data: yData5,
            type: "bar",
            stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
            color: "#FF0000",
          },
        ],
      };

      ageChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
}
.scrollBox {
  display: flex;
  flex-wrap: wrap;
  .scrollItem {
    position: relative;
    margin-left: 4px;
    margin-bottom: 5px;
    box-sizing: border-box;
    width: 120px;
    height: 51px;
    background: #0c222b;
    border-radius: 5px;
    text-align: center;
    padding-top: 10px;
    .scrollItemTitle {
      width: 96px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      margin: 0 auto 3px auto;
    }
    img {
      width: 17px;
      height: 17px;
    }
    .ItemTips {
      position: absolute;
      left: 80px;
      top: 20px;
      z-index: 100;
      background: rgba(8, 24, 53, 0.7);
      /*height: 64px;*/
      /*max-width: 190px;*/
      text-align: left;
      padding: 10px;
      box-sizing: border-box;
      p {
        display: inline-block;
        min-width: 100px;
      }
    }
    .ItemTips2 {
      left: -80px;
    }
    .ItemTips3 {
      left: -4px;
    }
  }
  .scrollItem2 {
    background-color: #80060a;
  }
}
.dotBox {
  display: flex;
  justify-content: space-between;
  .text {
    display: flex;
    align-items: center;
    .dot {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 5px;
    }
  }
}
.titleItem {
  position: absolute;
  left: 20px;
  top: 25px;
  span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
}
.ChartsBox {
  width: 33%;
  float: left;
  text-align: center;
  height: 60%;
  .Charts {
    height: 100%;
    width: 100%;
  }
}
.blockContentTitleBox {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 40px;
  .TitleBoxSpan {
    display: inline-block;
    width: 50%;
    text-align: center;
    font-size: 14px;
  }
  .TitleBoxSpan1 {
    background: linear-gradient(to left, #0f2730, #040d15);
  }
  .TitleBoxSpan2 {
    background: linear-gradient(to right, #0f2730, #040d15);
  }
}
.numContent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  p {
    font-size: 14px;
    opacity: 0.88;
    margin-top: 10px;
    text-align: center;
  }
}
.companyChart {
  width: 100%;
  height: 95%;
}
/deep/.alarmTypeBox {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 66px;
  opacity: 0.8;
  z-index: 3;
  .el-input__inner {
    background-color: transparent;
    color: white;
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
  }
  .el-input__suffix {
    right: 0px;
  }
  .el-input__icon {
    color: white;
    line-height: 24px;
  }
}
.configBtn {
  position: absolute;
  right: 8px;
  top: 15px;
  font-size: 20px;
  cursor: pointer;
  z-index: 3;
}
.days {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .num {
    font-size: 46px;
  }
}
.daysBG {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.endDate {
  position: absolute;
  right: 15px;
  bottom: 12px;
  // font-size: 13px;
}
.Extgantt {
  width: 100%;
  height: 100%;
  border: none;
}
.optionBox_wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.optionBox {
  text-align: center;
  // margin-bottom: 10px;
  width: calc(77% - 25px);
  white-space: nowrap;
  .optionBox_item {
    cursor: pointer;
    z-index: 100;
    padding: 4px 15px;
    display: inline-block;
    /*width: 52px;*/
    height: 12px;
    font-size: 12px;
    line-height: 12px;
    margin-right: 10px;
    text-align: center;
    background: #193b43;
    position: relative;
  }
  .selectOptionBox_item {
    background: #393204;
    color: #f7d300;
    .a {
      border-left: 2px solid #f7d300;
      border-top: 2px solid #f7d300;
    }
    .b {
      border-right: 2px solid #f7d300;
      border-top: 2px solid #f7d300;
    }
    .c {
      border-bottom: 2px solid #f7d300;
      border-left: 2px solid #f7d300;
    }
    .d {
      border-right: 2px solid #f7d300;
      border-bottom: 2px solid #f7d300;
    }
  }
}
.a {
  width: 3px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 2px solid #ebebeb;
  border-top: 2px solid #ebebeb;
}

.b {
  width: 3px;
  height: 3px;
  position: absolute;
  top: 0;
  right: 0;
  border-right: 2px solid #ebebeb;
  border-top: 2px solid #ebebeb;
}

.c {
  width: 3px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #ebebeb;
  border-left: 2px solid #ebebeb;
}

.d {
  width: 3px;
  height: 3px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
}
.top_box {
  height: 64%;
  .aside {
    .blockBox {
      height: 46%;
    }
  }
  .right {
    .blockBox {
      height: calc(100% - 20px);
      padding-bottom: 20px;
      box-sizing: border-box;
      .stageBox {
        height: 100%;
        width: 100%;
        .noDataImgBox {
          padding-top: 80px;
          margin: 0 auto;
        }
      }
    }
  }
}
.planList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  // padding: 0 40px;
  width: calc(100% - 40px);
  // overflow: hidden;
  margin: 0 auto;
}

.left_line {
  position: relative;
  &::before {
    // content: '';
    // // background: url('../../../assets/images/dataBoard/left.png') no-repeat center;
    // background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
    // background-size: 100% 100%;
    // width: 120px;
    // height: 30px;
    // transform: rotate(90deg);
    // position: absolute;
    // top: 120%;
    // left: -48px;

    content: "";
    background: url("../../../assets/images/dataBoard/arrow_dotted_left.png")
      no-repeat center;
    width: 76px;
    height: 190px;
    position: absolute;
    top: 54%;
    left: -28px;
  }
}
.right_line {
  position: relative;
  &::before {
    // content: '';
    // // background: url('../../../assets/images/dataBoard/left.png') no-repeat center;
    // background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
    // background-size: 100% 100%;
    // width: 120px;
    // height: 30px;
    // transform: rotate(90deg);
    // position: absolute;
    // top: 120%;
    // right: -32px;
    content: "";
    height: 190px;
    width: 76px;
    background: url("../../../assets/images/dataBoard/arrow_dotted_right.png")
      no-repeat center;
    position: absolute;
    top: 54%;
    right: 0;
  }
}
.planItem {
  width: 20%;
  height: 164px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  .left {
    display: flex;
    align-items: center;
    flex-direction: column;
    img {
      width: 36px;
      height: 47px;
    }
    .title {
      font-size: 16px;
      color: white;
      text-align: center;

      //    margin-left: 50%;
      width: 100%;

      position: relative;
      span {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &::after {
    //     position: absolute;
    //     top: -1px;
    //     right: -88px;
    //     width: 88px;
    //     height: 28px;
    // //    background: url('../../../assets/images/dataBoard/right.png');
    //     background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
    //     background-size: 100% 100%;
    //     content: '';
    //     display: inline-block;
    //     margin-left: 10px;
        position: absolute;
        top: -1px;
        right: -88px;
        width: 88px;
        height: 1.5px;
        background: url("../../../assets/images/dataBoard/arrow_dotted.png")
          no-repeat center;
        background-size: 100% 100%;
        content: "";
        display: inline-block;
        margin-left: 10px;
      }
    }
    .left_title {
      &::after {
        transform: rotate(180deg);
      }
    }
    .end_title {
      &::after {
        width: 46px;
        right: -46px;
      }
      &::before {
        // width: 1px;
        // height: 162px;
        // // border-top: 1px dotted #fff;
        // // background: url('../../../assets/images/dataBoard/right.png');
        // background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
        // background-size: 100% 100%;
        // // transform: rotate(0deg);
        // content: '';
        // position: absolute;
        // right: -48px;
        // top: 50%;
        width: 1px;
        height: 162px;
        background: url("../../../assets/images/dataBoard/arrow_dotted.png")
          no-repeat center;
        background-size: 100% 100%;
        content: "";
        position: absolute;
        right: -48px;
        top: 50%;
      }
    }
    .start_title {
      &::before {
        position: absolute;
        top: 50%;
        left: -46px;
        width: 46px;
        height: 2px;
        background: url("../../../assets/images/dataBoard/right.png");
        content: "";
        display: inline-block;
      }
    }
    .start_title2 {
      &::after {
        width: 1px;
        height: 162px;
        // border-top: 1px dotted #fff;
        background: url("../../../assets/images/dataBoard/right.png");
        // transform: rotate(0deg);
        content: "";
        position: absolute;
        left: -38px;
        top: 50%;
      }
      .line {
        // position: absolute;
        // top: 50%;
        // right: -88px;
        // width: 88px;
        // height: 2px;
        // //    background: url('../../../assets/images/dataBoard/right.png');
        // background: url('../../../assets/images/dataBoard/arrow-right2.png') no-repeat center;
        // content: '';
        // display: inline-block;
        position: absolute;
        top: 50%;
        right: -88px;
        width: 88px;
        height: 2px;
        content: "";
        display: inline-block;
      }
    }
    .end_title2 {
      &::before {
        display: none;
      }
    }
    .end_title3 {
      &::after {
        display: none;
      }
    }
    .starDate {
      color: rgba(255, 255, 255, 0.6);
      margin-top: 5px;
      font-size: 14px;
    }
    .endDate1 {
      color: rgba(255, 255, 255, 0.6);
      margin-top: 5px;
      font-size: 14px;
    }
  }
  .right {
    height: 165px;
    transform: translate3d(-20%, 51%, 0);
  }
  .left2 {
    height: 165px;
    transform: translate3d(-535%, 51%, 0);
  }
}
.list_wrap {
  height: calc(100% - 30px);
  margin-top: 10px;
  .list_box {
    display: flex;
    flex-wrap: wrap;
    .list_item {
      width: 30%;
      background: rgba(#193b43, 0.8);
      color: #fff;
      height: 62px;
      display: flex;
      font-size: 14px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 4px;
      margin-bottom: 7px;
      position: relative;
      .point {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: rgba(#00ff45, 0.32);
        position: relative;
        margin-top: 6px;
        &::after {
          content: "";
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: rgba(#00ff45, 1);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .point2 {
        background: rgba(#ff0000, 0.32);
        &::after {
          background: rgba(#ff0000, 1);
        }
      }
      .item_detail {
        position: absolute;
        top: 50%;
        // transform: translateY(-50%);
        width: 142px;
        display: none;
        background: rgba(#0d2146, 0.8);
        z-index: 1;
        // transform: translate(110px, 10px);
        padding: 15px;
        p {
          margin-bottom: 6px;
        }
        .detail_title {
          font-size: 16px;
        }
        .item_h {
          font-weight: 600;
        }
        .detail_info {
          display: flex;
          align-items: center;
          .p1 {
            display: block;
            width: 5px;
            height: 5px;
            background: #00ff45;
            border-radius: 50%;
            margin-right: 10px;
          }
          .p2 {
            display: block;
            width: 5px;
            height: 5px;
            background: #ff0000;
            border-radius: 50%;
            margin-right: 10px;
          }
          i {
            font-style: normal;
            display: block;
            width: 78px;
          }
        }
      }
    }
    .list_item:hover .item_detail {
      display: block;
    }
  }
}
.bottom {
  .buildingSelect {
    // position: absolute;
    // top: 20px;
    // left: 10px;
    margin-top: -10px;
    margin-left: 10px;
    width: 150px;
    // opacity: 0.8;
    z-index: 3;
    /deep/.el-input--small .el-input__inner {
      background: #193b43;
      color: #fff;
    }
    /deep/.el-select__caret {
      color: #53ccde;
    }
    /deep/.el-input__inner {
      border: 2px solid #1a4c5a;
    }
  }
  .blockContent {
    height: calc(100% - 20px - 44px);
    padding-top: 0;
  }
  .stageBox {
    width: 100%;
    height: calc(100% - 20px);
    .buildingList {
      display: flex;
      padding: 0 10px;
      position: relative;
      margin-bottom: 10px;
      .buildingItem {
        width: 16.63%;
        margin-bottom: 22px;
        .building_title {
          margin-left: 28px;
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 11px;
          width: calc(100% - 56px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .building_line {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          .dot1 {
            display: block;
            width: 16px;
            height: 16px;
            background: #ff0000;
            border-radius: 50%;
            position: relative;
            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background: #040d15;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .dot2 {
            display: block;
            width: 16px;
            height: 16px;
            background: #f7d300;
            border-radius: 50%;
            position: relative;
            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background: #040d15;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .dot3 {
            display: block;
            width: 16px;
            height: 16px;
            background: #44d7b6;
            border-radius: 50%;
            position: relative;
            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background: #040d15;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .dot4 {
            display: block;
            width: 16px;
            height: 16px;
            background: #fe6c7f;
            border-radius: 50%;
            position: relative;
            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background: #040d15;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .dot5 {
            display: block;
            width: 16px;
            height: 16px;
            background: #5ce2f6;
            border-radius: 50%;
            position: relative;
            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background: #040d15;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .line {
            // flex: 1;
            // height: 28px;
            // margin-left: 10px;
            // margin-right: 10px;
            // // background: #193B43;
            // background: url('../../../assets/images/dataBoard/arrow-right2.png') no-repeat center;
            // background-size: 100% 100%;
            flex: 1;
            height: 1px;
            width: 100%;
            background: #50c5d7;
            opacity: 0.4;
          }
          .line2 {
            transform: rotate(180deg);
          }
        }
        .building_info {
          display: flex;
          font-size: 14px;
          .building_time {
            margin-right: 19px;
            margin-left: 26px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
          }
          // 逾期
          .building_status {
            display: inline-block;
            padding: 0 8px;
            border-radius: 10px;
            line-height: 24px;
            height: 24px;
            background: rgba(#ff0000, 0.32);
            color: #ff0000;
          }
          // 提前完成
          .building_status2 {
            display: inline-block;
            padding: 0 8px;
            border-radius: 10px;
            line-height: 24px;
            height: 24px;
            background: rgba(#f7d300, 0.32);
            color: #f7d300;
          }
          // 正常完成
          .building_status3 {
            display: inline-block;
            padding: 0 8px;
            border-radius: 10px;
            line-height: 24px;
            height: 24px;
            background: rgba(#44d7b6, 0.32);
            color: #44d7b6;
          }
          //逾期完成
          .building_status4 {
            display: inline-block;
            padding: 0 8px;
            border-radius: 10px;
            line-height: 24px;
            height: 24px;
            background: rgba(#fe6c7f, 0.32);
            color: #fe6c7f;
          }
          .building_status5 {
            display: inline-block;
            padding: 0 8px;
            border-radius: 10px;
            line-height: 24px;
            height: 24px;
            background: rgba(#5ce2f6, 0.32);
            color: #5ce2f6;
          }
        }
      }
    }
    .left_line:before {
      // height: 28px;
      // width: 98px;
      // background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
      // background-size: 100% 100%;
      // transform: rotate(90deg);
      // // background: #193B43;
      // position: absolute;
      // left: -28px;
      // top: 78%;
      height: 125px;
      width: 1px;
      background: #50c5d7;
      opacity: 0.4;
      position: absolute;
      left: 18px;
      top: 40%;
    }
    .right_line:before {
      //  height: 28px;
      // width: 98px;
      // // background: #193B43;
      // background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
      // background-size: 100% 100%;
      // transform: rotate(90deg);
      // position: absolute;
      // right: -26px;
      // top: 74%;
      height: 125px;
      width: 1px;
      background: #50c5d7;
      opacity: 0.4;
      position: absolute;
      right: 14px;
      top: 35%;
    }
  }
}
.legend_box {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  .legend_item {
    display: flex;
    align-items: center;
    margin-right: 10px;
    font-size: 12px;
    color: rgba(#fff, 0.38);
    img {
      margin-right: 10px;
    }
  }
}
.blockBox {
  .blockContent {
    padding-bottom: 0;
    padding-top: 0;
  }
}
</style>
