<template>
  <div class="fullHeight dataBoardIndex">
    <div class="fullHeight aside">
      <div class="blockBox">
        <!-- 项目信息 -->
        <div class="blockTitle">
          {{ $t('message.companyDiagram.projectInfo') }}
        </div>
        <div class="blockContent">
          <marquee
            class="text"
            id="affiche"
            align="left"
            direction="up"
            height="100%"
            width="100%"
            hspace="10"
            vspace="20"
            loop="1"
            scrollamount="5"
            scrolldelay="100"
            onmouseover="this.stop()"
            onmouseout="this.start()"
            behavior="scroll"
          >
            <!-- <vue-scroll> -->
            <div class="listItem">
              <!-- 项目名称 -->
              <span class="label"
                >{{ $t('message.companyDiagram.entryName1') }}：</span
              >
              <span class="value">{{ projectData.projectName }}</span>
            </div>
            <div class="listItem">
              <!-- 项目地址 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectAddress') }}：</span
              >
              <span class="value"
                >{{ projectData.provinceName }}{{ projectData.cityName
                }}{{ projectData.areaName
                }}{{ projectData.projectAddress }}</span
              >
            </div>

            <div class="listItem">
              <!-- 项目经理 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectManager') }}：</span
              >
              <span class="value">{{ projectData.projectManage }}</span>
            </div>
            <div class="listItem">
              <!-- 联系电话 -->
              <span class="label"
                >{{ $t('message.companyDiagram.telPhone') }}：</span
              >
              <span class="value">{{ projectData.projectTel }}</span>
            </div>
            <div class="listItem">
              <!-- 建筑面积 -->
              <span class="label"
                >{{ $t('message.companyDiagram.buildArea') }}：</span
              >
              <span class="value">{{ projectData.projectAcreage }} m²</span>
            </div>
            <div class="listItem">
              <!-- 开工日期 -->
              <span class="label"
                >{{ $t('message.companyDiagram.buildStartTime') }}：</span
              >
              <span class="value">{{ projectData.startWorkDate }}</span>
            </div>
            <div class="listItem">
              <!-- 项目编号 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectNo') }}：</span
              >
              <span class="value">{{ projectData.projectNumber }}</span>
            </div>
            <div class="listItem">
              <!-- 工程类别 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectType') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.PROJECTTYPE'
                )"
                :key="index"
                v-if="projectData.projectType == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 工程用途 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectUse') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.ENGINEERINGPRUPOSE'
                )"
                :key="index"
                v-if="projectData.engineeringPurpose == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 结构类型 -->
              <span class="label"
                >{{ $t('message.companyDiagram.structureType') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.STRUCTURETYPE'
                )"
                :key="index"
                v-if="projectData.structureType == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 工程状态 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectStatus') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.BUILDSTATUS'
                )"
                :key="index"
                v-if="projectData.bulidStatus == item.id"
                >{{ item.name }}</span
              >
            </div>
            <!-- </vue-scroll> -->
            <div class="listItem">
              <!-- 项目名称 -->
              <span class="label"
                >{{ $t('message.companyDiagram.entryName1') }}：</span
              >
              <span class="value">{{ projectData.projectName }}</span>
            </div>
            <div class="listItem">
              <!-- 项目地址 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectAddress') }}：</span
              >
              <span class="value"
                >{{ projectData.provinceName }}{{ projectData.cityName
                }}{{ projectData.areaName
                }}{{ projectData.projectAddress }}</span
              >
            </div>

            <div class="listItem">
              <!-- 项目经理 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectManager') }}：</span
              >
              <span class="value">{{ projectData.projectManage }}</span>
            </div>
            <div class="listItem">
              <!-- 联系电话 -->
              <span class="label"
                >{{ $t('message.companyDiagram.telPhone') }}：</span
              >
              <span class="value">{{ projectData.projectTel }}</span>
            </div>
            <div class="listItem">
              <!-- 建筑面积 -->
              <span class="label"
                >{{ $t('message.companyDiagram.buildArea') }}：</span
              >
              <span class="value">{{ projectData.projectAcreage }} m²</span>
            </div>
            <div class="listItem">
              <!-- 开工日期 -->
              <span class="label"
                >{{ $t('message.companyDiagram.buildStartTime') }}：</span
              >
              <span class="value">{{ projectData.startWorkDate }}</span>
            </div>
            <div class="listItem">
              <!-- 项目编号 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectNo') }}：</span
              >
              <span class="value">{{ projectData.projectNumber }}</span>
            </div>
            <div class="listItem">
              <!-- 工程类别 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectType') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.PROJECTTYPE'
                )"
                :key="index"
                v-if="projectData.projectType == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 工程用途 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectUse') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.ENGINEERINGPRUPOSE'
                )"
                :key="index"
                v-if="projectData.engineeringPurpose == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 结构类型 -->
              <span class="label"
                >{{ $t('message.companyDiagram.structureType') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.STRUCTURETYPE'
                )"
                :key="index"
                v-if="projectData.structureType == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 工程状态 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectStatus') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.BUILDSTATUS'
                )"
                :key="index"
                v-if="projectData.bulidStatus == item.id"
                >{{ item.name }}</span
              >
            </div>
            <!-- di san fen -->
            <div class="listItem">
              <!-- 项目名称 -->
              <span class="label"
                >{{ $t('message.companyDiagram.entryName1') }}：</span
              >
              <span class="value">{{ projectData.projectName }}</span>
            </div>
            <div class="listItem">
              <!-- 项目地址 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectAddress') }}：</span
              >
              <span class="value"
                >{{ projectData.provinceName }}{{ projectData.cityName
                }}{{ projectData.areaName
                }}{{ projectData.projectAddress }}</span
              >
            </div>

            <div class="listItem">
              <!-- 项目经理 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectManager') }}：</span
              >
              <span class="value">{{ projectData.projectManage }}</span>
            </div>
            <div class="listItem">
              <!-- 联系电话 -->
              <span class="label"
                >{{ $t('message.companyDiagram.telPhone') }}：</span
              >
              <span class="value">{{ projectData.projectTel }}</span>
            </div>
            <div class="listItem">
              <!-- 建筑面积 -->
              <span class="label"
                >{{ $t('message.companyDiagram.buildArea') }}：</span
              >
              <span class="value">{{ projectData.projectAcreage }} m²</span>
            </div>
            <div class="listItem">
              <!-- 开工日期 -->
              <span class="label"
                >{{ $t('message.companyDiagram.buildStartTime') }}：</span
              >
              <span class="value">{{ projectData.startWorkDate }}</span>
            </div>
            <div class="listItem">
              <!-- 项目编号 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectNo') }}：</span
              >
              <span class="value">{{ projectData.projectNumber }}</span>
            </div>
            <div class="listItem">
              <!-- 工程类别 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectType') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.PROJECTTYPE'
                )"
                :key="index"
                v-if="projectData.projectType == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 工程用途 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectUse') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.ENGINEERINGPRUPOSE'
                )"
                :key="index"
                v-if="projectData.engineeringPurpose == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 结构类型 -->
              <span class="label"
                >{{ $t('message.companyDiagram.structureType') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.STRUCTURETYPE'
                )"
                :key="index"
                v-if="projectData.structureType == item.id"
                >{{ item.name }}</span
              >
            </div>
            <div class="listItem">
              <!-- 工程状态 -->
              <span class="label"
                >{{ $t('message.companyDiagram.projectStatus') }}：</span
              >
              <span
                class="value"
                v-for="(item, index) in $t(
                  'message.companyDiagram.BUILDSTATUS'
                )"
                :key="index"
                v-if="projectData.bulidStatus == item.id"
                >{{ item.name }}</span
              >
            </div>
          </marquee>
        </div>
      </div>
      <div class="blockBox" style="height: calc(33% - 90px); margin-top: 20px">
        <!-- 人员概况 -->
        <div class="blockTitle">
          {{ $t('message.companyDiagram.peopleOverview') }}
        </div>
        <div class="blockContent dataBoxContent" style="position: relative">
          <div v-show="ry_switch == 0">
            <img
              style="margin-left: 22px"
              src="@/assets/images/dataBoard/rygs1.png"
              alt=""
            />
            <img
              style="margin-left: 12px"
              src="@/assets/images/dataBoard/rygs1_1.png"
              alt=""
            />
          </div>
          <div v-show="ry_switch == 1">
            <img src="@/assets/images/dataBoard/rygs2.png" alt="" />
          </div>
          <div style="position: absolute; bottom: 10px; left: 26px">
            <img
              src="@/assets/images/dataBoard/rygs_botom.png"
              style="margin-top: 12px"
              alt=""
            />
          </div>
        </div>
      </div>
      <div @click="toznsb" class="blockBox" style="height: calc(33% - 110px); margin-top: 20px">
        <!-- 人员概况 -->">
        <div class="blockTitle">智能设备</div>
        <div style="">
          <img
            style="margin-top: 10px; margin-left: 25px"
            class=""
            src="@/assets/images/dataBoard/znsb.png"
            alt=""
          />
        </div>
      </div>
      <div class="blockBox"  @click="tohygl" style="height: calc(33% - 130px); margin-top: 20px">
        <!-- 人员概况 -->">
        <div class="blockTitle">合约管理</div>
        <div >

          <img
           
            style="margin-top: 10px; margin-left: 25px"
            class=""
            src="@/assets/images/dataBoard/hygl.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="center fullHeight">
      <div class="top">
        <img
          style="width: 92%; margin-left: 36px"
          src="@/assets/images/dataBoard/bg.jpg"
          alt=""
        />
      </div>
      <div class="bottom">
        <!-- 进度情况 -->
        <div v-if="enabledProjectV2 == 3" class="blockTitle blockTitle4">
          <i></i>{{ $t('message.companyDiagram.planStatus') }}
        </div>
        <div class="bottomInner">
          <div class="timeBox">
            <div class="blockTitle blockTitle2" style="margin-right: 40px">
              <i></i>{{ $t('message.companyDiagram.countDown') }}
            </div>
            <div class="timeInner">
              <!-- 项目总天数 -->
              <p>{{ $t('message.companyDiagram.projectDayNum') }}</p>
              <div class="bg1">
                <!-- 天 -->
                <span class="num">{{ projectData.totalProjectDay }}</span>
                {{ $t('message.companyDiagram.day') }}
              </div>
            </div>
            <div class="timeInner">
              <!-- 项目剩余天数 -->
              <p>{{ $t('message.companyDiagram.projectResidueDay') }}</p>
              <div class="bg1">
                <!-- 天 -->
                <span class="num">{{ projectData.surplusDay }}</span>
                {{ $t('message.companyDiagram.day') }}
              </div>
            </div>
            <div></div>
          </div>
          <div class="splitLine">
            <img
              src="@/assets/images/carOverview/line4.png"
              alt=""
              width="100%"
            />
          </div>
          <div class="stageContent" style="display: flex">
            <!-- 里程碑 -->
            <div class="blockTitle blockTitle2" style="width: 220px">
              <i></i>{{ $t('message.companyDiagram.milestone') }}
            </div>
            <div class="stageBox">
              <vue-scroll :ops="ops" ref="stageScroll">
                <div
                  class="stageItem"
                  v-for="(item, index) in stageList"
                  :key="index"
                  :class="
                    projectData.constructionStage - 1 > index
                      ? 'finish'
                      : projectData.constructionStage - 1 == index
                      ? 'ongoing'
                      : ''
                  "
                >
                  <div class="statusImg"></div>
                  <p>{{ item.name }}</p>
                  <div
                    class="line"
                    v-show="stageList.length != index + 1"
                  ></div>
                </div>
              </vue-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fullHeight aside">
      <div class="blockBox">
        <!-- 环境监测 -->
        <div
          v-if="COMPANY == 'longguang' || enabledProjectV2 == 3"
          class="blockTitle"
        >
          {{ $t('message.companyDiagram.environmentMonitor') }}
        </div>

        <div
          v-if="COMPANY == 'longguang' || enabledProjectV2 == 3"
          class="blockContent"
        >
          <airQulityChart
            :show="false"
            :size="mini"
            class="airQulityChart"
          ></airQulityChart>
          <!-- 天气显示 -->
          <div style="overflow: hidden" class="weatherBox">
            <div
              class="weatherItem"
              v-for="(item, index) in weatherList"
              :key="index"
              v-if="index < 2"
            >
              <p>
                <span>{{ item.day }}</span>
                <!-- <span>（{{ item.week }}）</span> -->
              </p>
              <div style="height: 7%"></div>
              <div class="imgBox">
                <img :src="item.url" />
              </div>
              <div style="height: 10%"></div>
              <p class="weather">{{ item.wea }}</p>
              <p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
              <div style="height: 6%"></div>
              <p>
                {{ $t('message.environmentalOverview.wind_power') }}
                {{ item.win_speed }}
              </p>
            </div>
          </div>
          <!-- 空气质量 -->
          <div class="airQuality">
            <div class="airQuality-item">
              <img src="@/assets/images/greenOverview/PM2.5@1x.png" alt="" />
              <div>
                <p>PM2.5</p>
                <p>{{ plantCap.pm25 ? plantCap.pm25 : '--' }}μg/m3</p>
              </div>
            </div>
            <div class="airQuality-item">
              <img src="@/assets/images/greenOverview/PM10@1x.png" alt="" />
              <div>
                <p>PM10</p>
                <p>{{ plantCap.pm10 ? plantCap.pm10 : '--' }}μg/m3</p>
              </div>
            </div>
            <div class="airQuality-item">
              <img src="@/assets/images/greenOverview/噪声@1x.png" alt="" />
              <div>
                <p>噪声</p>
                <p>{{ plantCap.noise ? plantCap.noise : '--' }}db</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 安全管理 -->
        <div @click="toquality"
          v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
          class="blockTitle"
        >
          {{ $t('message.companyDiagram.safeManage') }}
        </div>
        <div
         @click="toquality"
          v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
          class="blockContent"
        >
          <div  @click="toquality" class="safeChart" ref="safeChart"></div>
          <div  @click="toquality" class="descBox fullHeight">
            <div>
              <div class="descItem descItem1">
                <!-- 已整改安全问题 -->
                <p class="text">
                  <i class="dot purple"></i
                  >{{ $t('message.companyDiagram.rectificationSafeQuestion') }}
                </p>
                <p class="num">{{ secureData.completeNum }}</p>
              </div>

              <div class="descItem">
                <!-- 未整改安全问题 -->
                <p class="text">
                  <i class="dot red"></i
                  >{{
                    $t('message.companyDiagram.noRectificationSafeQuestion')
                  }}
                </p>
                <p class="num">{{ secureData.rectificationNum }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      </div>-->
      <div class="blockBox">
        <!-- 质量管理 -->
        <div
         @click="toquality"
          v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
          class="blockTitle"
        >
          {{ $t('message.companyDiagram.qualityManage') }}
        </div>
        <!-- 设备报警 -->
        <div  @click="toquality" v-else class="blockTitle">
          {{ $t('message.companyDiagram.devAlarm') }}
        </div>
        <div  @click="toquality" class="blockContent">
          <div
            v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
            class="qulityChart"
            ref="qulityChart"
          ></div>
          <div
            v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
            class="descBox fullHeight"
          >
            <div>
              <div class="descItem descItem1">
                <!-- 已整改质量问题 -->
                <p class="text">
                  <i class="dot blue"></i
                  >{{
                    $t('message.companyDiagram.rectificationQualityQuestion')
                  }}
                </p>
                <p class="num">{{ qualityData.completeNum }}</p>
              </div>
              <div class="descItem">
                <!-- 已完成验收 -->
                <p class="text">
                  <i class="dot green"></i>
                  已验收
                </p>
                <p class="num">51</p>
              </div>
            </div>
            <div style="margin-left: 22px">
              <div class="descItem descItem1">
                <!-- 未整改质量问题 -->
                <p class="text">
                  <i class="dot green"></i
                  >{{
                    $t('message.companyDiagram.noRectificationQualityQuestion')
                  }}
                </p>
                <p class="num">{{ qualityData.rectificationNum }}</p>
              </div>

              <div class="descItem" style="margin-top: 12px">
                <!-- 待验收 -->
                <p class="text">
                  <i class="dot blue"></i>
                  待验收
                  <!-- {{
                    $t("message.companyDiagram.rectificationQualityQuestion")
                  }} -->
                </p>
                <p class="num">52</p>
              </div>
            </div>
          </div>
          <!-- 设备报警内容 -->
          <div class="attendance-cards2" v-else>
            <div class="attendance-cards-item">
              <div class="cards-item-left">
                <img
                  src="../../../assets/images/longguang2/tower_crane.png"
                  alt=""
                />
                <p>塔吊</p>
              </div>
              <div class="cards-item-right">
                <p class="p1">设备总数：{{ totalTowerDev }}</p>
                <p class="p2">今日报警数</p>
                <p class="p3">{{ totalDangerTowerDev }}</p>
              </div>
            </div>
            <div class="attendance-cards-item">
              <div class="cards-item-left">
                <img
                  src="../../../assets/images/longguang2/elevator.png"
                  alt=""
                />
                <p>升降机</p>
              </div>
              <div class="cards-item-right">
                <p class="p1">设备总数：{{ totalLifterDev }}</p>
                <p class="p2">今日报警数</p>
                <p class="p3">{{ totalDangerLifterDev }}</p>
              </div>
            </div>
            <div class="attendance-cards-item">
              <div class="cards-item-left">
                <img
                  src="../../../assets/images/longguang2/env_monitoring.png"
                  alt=""
                />
                <p>环境监测</p>
              </div>
              <div class="cards-item-right">
                <p class="p1">设备总数：{{ environmentDevNum }}</p>
                <p class="p2">今日报警数</p>
                <p class="p3">{{ environmentTotalAlarm }}</p>
              </div>
            </div>
            <div class="attendance-cards-item">
              <div class="cards-item-left">
                <img
                  src="../../../assets/images/longguang2/video_monitoring.png"
                  alt=""
                />
                <p>AI视频监测</p>
              </div>
              <div class="cards-item-right">
                <p class="p1">设备总数：{{ totalVideoDev }}</p>
                <p class="p2">今日报警数</p>
                <p class="p3">{{ videoAlarmNum }}</p>
              </div>
            </div>
          </div>
          <!--          <vue-scroll :ops="ops" style="width: 100%">-->
          <!-- <div v-else style="overflow:hidden;">
              <div
                      class="weatherItem"
                      v-for="(item, index) in weatherList"
                      :key="index"
                      v-if="index < 3"
              >
                <p>
                  <span>{{ item.day }}</span>
                </p>
                <div style="height: 10%"></div>
                <div class="imgBox">
                  <img :src="item.url" />
                </div>
                <div style="height: 10%"></div>
                <p class="weather">{{ item.wea }}</p>
                <p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
                <div style="height: 6%"></div>
                <p>
                  {{ $t("message.environmentalOverview.wind_power") }}
                  {{ item.win_speed }}
                </p>
              </div>
            </div> -->
          <!--          </vue-scroll>-->
        </div>
      </div>
      <div @click="toenvironment" class="blockBox" style="height: calc(33.33% - 120px)">
        <!-- 环境监测 -->
        <div
          v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
          class="blockTitle"
        >
          {{ $t('message.companyDiagram.environmentMonitor') }}
        </div>
        <div>
          <img
            style="margin-top: 20px; margin-left: 25px"
            class=""
            src="@/assets/images/dataBoard/hjjcs.png"
            alt=""
          />
        </div>
      </div>
      <div  class="blockBox" style="height: calc(33.33% - 120px)">
     
        <div class="blockTitle">点亮展示</div>
        <div >
          <img 
            style="margin-top: 20px; margin-left: 55px"
            class=""
            src="@/assets/images/dataBoard/dlzs.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts4";
const echarts5 = require("echarts");
import devNumChart from "@/components/chart/devNumChart";
import airQulityChart from "@/components/chart/airQulityChart";
import { getWorkerStatisticsCountApi } from "@/assets/js/api/company/project";
import { getProjectDetail, editProjectInfo } from "@/assets/js/api/baseInfo.js";
import {
  selectSecurityManageStatisticsApi,
  selectQualityStatisticsApi,
  getAllTowerDangerInfo,
  getAllLifterDangerInfo,
  getEnvironmentInfo,
  getAiVideoInfo,
  getAIDangerList,
} from "@/assets/js/api/dataBoard";
import {
  getWeatherDataApi,
  selectNewEnvironmentAlarmListApi,
  getRealTimeDustNoiseDataApi,
  environmentDevList,
} from "@/assets/js/api/environmentManage";
import {
  getPageDetail,
  eidtProjectShowConfig,
  queryBySnData,
} from "@/assets/js/api/projectSummary.js";

export default {
  components: { devNumChart, airQulityChart },
  data() {
    return {
      ry_switch: 0,
      COMPANY: "",
      ops: {
        vuescroll: {
          // wheelScrollDuration: 0,
          wheelDirectionReverse: true,
        },
      },
      weatherList: [],
      alarmList: [],
      fileUrl: "",
      imgUrl: "", //图片
      showChangeImg: false, //显示隐藏更换图片
      optionList: [
        {
          name: /* '宣传视频', */ this.$t("message.dataBoard.promotionalVideo"),
          index: 1,
        },
        {
          name: /* '效果图', */ this.$t("message.dataBoard.effectPicture"),
          index: 2,
        },
      ],
      optionListIndex: 1,
      ops: {
        vuescroll: {
          // wheelScrollDuration: 0,
          wheelDirectionReverse: true,
        },
      },
      stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
      projectData: {
        constructionStage: 10,
        videoUrl: "",
        totalProjectDay: 0,
        surplusDay: 0,
      },
      statisticsCount: {
        currentMonthEducationPerson: 0,
        projectcount: {
          constructionStageCount14: 0,
          constructionStageCount13: 0,
          constructionStageCount15: 0,
          constructionStageCount10: 0,
          constructionStageCount12: 0,
          constructionStageCount11: 0,
          constructionStageCount1: 0,
          saleAcreageTotal: 0,
          constructionStageCount9: 0,
          constructionStageCount8: 0,
          constructionStageCount7: 0,
          constructionStageCount6: 0,
          constructionStageCount5: 0,
          constructionStageCount4: 0,
          constructionStageCount3: 0,
          constructionStageCount2: 0,
          projectNum: 0,
        },
        workercount: {
          lwPersonYesterdayAdd: 0,
          eduPersonTotal: 0,
          jfGlPersonTotal: 0,
          age18: 0,
          age18to25: 0,
          womanPersonTotal: 0,
          lsPersonTotal: 0,
          jlGlPersonTotal: 0,
          age45to60: 0,
          lwPersonTotal: 0,
          manPersonTotal: 0,
          totalPerson: 0,
          age25to35: 0,
          glPersonTotal: 0,
          yfGlPersonTotal: 0,
          avgage: 0,
          age35to45: 0,
          glPersonYesterdayAdd: 0,
          age60: 0,
        },
        devcount: { ufaceDevNum: 0, videoNum: 0, environmentDevNum: 0 },
        presencecount: {
          jfGlPersonTotal: 0,
          age18: 0,
          age18to25: 0,
          womanPersonTotal: 0,
          lsPersonTotal: 0,
          jlGlPersonTotal: 0,
          age45to60: 0,
          lwPersonTotal: 0,
          manPersonTotal: 0,
          totalPerson: 0,
          age25to35: 0,
          glPersonTotal: 0,
          yfGlPersonTotal: 0,
          avgage: 0,
          age35to45: 0,
          age60: 0,
          chart2: Object,
          option2: {},
        },
      },
      totalDevNum: 0,
      fullscreenLoading: null,
      secureData: {
        rectificationNum: 0,
        completeNum: 0,
      },
      qualityData: {
        rectificationNum: 0,
        completeNum: 0,
      },
      enabledProjectV2: 2,
      interval1: null,
      totalTowerDev: 0, //塔吊数量
      totalDangerTowerDev: 0, // 塔吊报警数量
      totalLifterDev: 0, //升降机数量
      totalDangerLifterDev: 0, //升降机报警数量
      environmentDevNum: 0, //环境设备数量
      environmentTotalAlarm: 0, // 环境设备报警数量
      totalVideoDev: 0, // AI设备数量
      videoAlarmNum: 0, // AI设备报警数量
      srcList: [],
      plantCap: {
        // 环境监测空气质量数据
        crc: "--",
        humidity: "--",
        noise: "--",
        plateHumidity: "--",
        plateTemperature: "--",
        pm10: "--",
        pm25: "--",
        pressure: "--",
        temperature: "--",
        tsp: "--",
        voltage: "--",
        winddirectionName: "--",
        windspeed: "--",
      },
      currentDevDetail: {}, // 当前项目设备详情
    };
  },
  created() {
    this.fileUrl = this.$store.state.FILEURL;
    this.COMPANY = COMPANY;
  },
  beforeDestroy() {
    clearInterval(this.interval1);
  },
  mounted() {
    this.getQueryBySnData();
    this.enabledProjectV2 = enabledProjectV2;
    this.getDataDateils();
    this.getWorkerStatisticsCount(1);
    this.getSecureData();
    this.getQualityData();
    this.loadWeather();
    this.getAlarmList();
    this.getAlarmInfor();
    this.getDevList();

    setInterval(() => {
      if (this.ry_switch == 0) {
        this.ry_switch = 1
      } else {
        this.ry_switch = 0
      }
    }, 2000)
  },
  methods: {
    toenvironment(){
      console.log('===========')
      this.$router.push({path:"/project/dataBoard/environment"})
    },
    toquality(){
      console.log('===========')
      this.$router.push({path:"/project/dataBoard/quality"})
    },
    toznsb(){
      console.log('===========')
      this.$router.push({path:"/project/dataBoard/digitalSite"})
    },
    tohygl(){
      console.log('===========')
      this.$router.push({path:"/project/dataBoard/contractManage"})
    },
    createdEchart2() {
      let chart2 = echarts.init(this.$refs["echart2"]);
      this.chart2 = chart2;
      chart2.clear();
      this.option2 = {
        grid: {
          top: "30px",
          left: "80px",
          right: "15px",
          bottom: "30px",
        },
        tooltip: {
          trigger: "axis",
          // 取消鼠标悬浮时显示的中线
          axisPointer: {
            type: "none",
          },
        },
        // ['特殊设备','人数设备','特种设备','环境设备']
        xAxis: [
          {
            type: "value",
            // '设备数'
            name: this.$t("message.companyDiagram.devNum"),
            show: false,
            splitLine: {
              lineStyle: {
                color: "#fff",
                type: "dashed",
              },
            },

            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
                type: "solid",
              },
            },
            axisLabel: {
              color: "#fff",
            },
          },
          {
            type: "value",
          },
        ],
        yAxis: {
          type: "category",
          data: this.$t("message.companyDiagram.echarTitleData"),
          axisLine: {
            lineStyle: {
              color: "#fff",
              type: "dashed",
            },
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12, //字体大小
          },
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ["#4378d8", "#a65d23", "#913211", "#199d83"];
                  return colorList[params.dataIndex];
                },
              },
            },
            name: this.$t("message.companyDiagram.devNum"),
            data: [
              this.statisticsCount.devcount.videoNum,
              this.statisticsCount.devcount.ufaceDevNum,
              this.statisticsCount.devcount.lifterDevNum +
              this.statisticsCount.devcount.towerDevNum,
              this.statisticsCount.devcount.environmentDevNum,
            ],
            type: "bar",
            barWidth: 20, //柱图宽度
          },
        ],
      };
      chart2.setOption(this.option2);
    },
    getAlarmList() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      // selectNewEnvironmentAlarmListApi(data).then((res) => {
      //   if (res.code == 200) {
      //     this.alarmList = res.result;
      //     console.log(res.result);
      //   }
      // });
    },
    loadWeather() {
      var _this = this;
      getWeatherDataApi({ cityid: "" }).then((res) => {
        console.log(res);
        var json = JSON.parse(res.result);
        var list = json.data;
        console.log(json);
        // 
        list.forEach((element, index) => {
          // element.week=getWeek(element.date)
          // element.date = element.date.substring(5,element.date.length)
          element.url = require("@/assets/images/weather/" +
            element.wea_img +
            ".png");
          this.weatherList.push(element);
        });
      });
    },
    //获取环境设备列表--环境监测实时数据--下拉
    getDevList() {
      console.log(22222222222222);
      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
        (result) => {
          // console.log('列表', result)
          console.log(result);
          if (result.result.length > 0) {
            this.currentDevDetail = result.result[0];
            this.getRealTimeDustNoiseData();
          }
        }
      );
    },
    // 获取环境监测空气质量
    getRealTimeDustNoiseData() {
      let data = {
        deviceId: this.currentDevDetail.deviceId,
        projectSn: this.$store.state.projectSn,
      };
      console.log(data);
      getRealTimeDustNoiseDataApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          console.log(res.result);
          if (res.result) {
            this.plantCap = res.result;
          } else {
            this.plantCap = {
              crc: "--",
              humidity: "--",
              noise: "--",
              plateHumidity: "--",
              plateTemperature: "--",
              pm10: "--",
              pm25: "--",
              pressure: "--",
              temperature: "--",
              tsp: "--",
              voltage: "--",
              winddirectionName: "--",
              windspeed: "--",
            };
          }
          // this.createCenterChart();
        }
      });
    },
    // 获取设备报警数据
    getAlarmInfor() {
      let data = {
        sn: this.$store.state.projectSn,
      };
      // 获取塔吊报警数据
      getAllTowerDangerInfo(data).then((res) => {
        if (res.code === 200) {
          let { result } = res;
          this.totalTowerDev = result.devCount.devNum;
          this.totalDangerTowerDev = result.towerAlarmCount;
        }
      });
      // getAiVideoInfo
      // 获取升降机报警数据
      getAllLifterDangerInfo(data).then((res) => {
        if (res.code === 200) {
          let { result } = res;
          this.totalLifterDev = result.devCount.devNum;
          this.totalDangerLiferDev = result.lifterAlarmCount;
        }
      });
      // 获取环境监测报警数据
      getEnvironmentInfo(data).then((res) => {
        if (res.code === 200) {
          let { result } = res;
          this.environmentDevNum = result.devTotal.devNum;
          this.environmentTotalAlarm = result.alarmTotal.totalAlarm;
        }
      });
      // 获取AI设备报警数据
      getAiVideoInfo(data).then((res) => {
        console.log(res);
        if (res.code === 200) {
          let { result } = res;
          this.totalVideoDev = result.totalVideoDev;
          this.videoAlarmNum = result.alarmNum;
        }
      });
      // 获取报警列表数据
      getAIDangerList(data).then((res) => {
        if (res.code === 200) {
          let { result } = res;
          let type = [
            "烟感",
            "明火",
            "人员倒地",
            "未戴安全帽",
            "区域入侵",
            "越界入侵",
            "人员聚集衣",
            "反光衣",
            "裸土覆盖",
          ];
          this.alarmList = result.slice(0, 3).map((x) => {
            return {
              createTime: x.createTime,
              hardwareName: x.hardwareName,
              id: x.id,
              imageUrl: x.imageUrl,
              location: x.location,
              projectName: x.projectName,
              alarmType: type[x.alarmType - 1],
            };
          });
          result.slice(0, 3).forEach((x) => {
            this.srcList.push(`${this.$store.state.FILEURL}${x.imageUrl}`);
          });
          console.log(this.alarmList);
          console.log(this.srcList);
        }
      });
    },

    //获取安全管理数据
    getSecureData() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      selectSecurityManageStatisticsApi(data).then((res) => {
        let total = res.result.total;
        this.secureData.rectificationNum = total.rectificationNum;
        this.secureData.completeNum = total.totalNum - total.rectificationNum;
        this.createPieChart(
          [
            { value: total.totalNum - total.rectificationNum, name: "" },
            { value: total.rectificationNum, name: "" },
          ],
          this.$refs.safeChart,
          ["rgba(120, 111, 240, 1)", "rgba(254, 108, 127, 1)"],
          this.$t("message.companyDiagram.safeQuestion")
          // "安全问题数"
        );
      });
    },
    //获取质量管理数据
    getQualityData() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      selectQualityStatisticsApi(data).then((res) => {
        let total = res.result.total;
        this.qualityData.rectificationNum = total.rectificationNum;
        this.qualityData.completeNum = total.totalNum - total.rectificationNum;
        if (COMPANY != "longguang") {
          this.createPieChart(
            [
              { value: total.totalNum - total.rectificationNum, name: "" },
              { value: total.rectificationNum, name: "" },
            ],
            this.$refs.qulityChart,
            ["rgba(81, 129, 246, 1)", "rgba(92, 226, 246, 1)"],
            this.$t("message.companyDiagram.qualityQuestion")
            // "质量问题数"
          );
        }
      });
    },
    //获取项目详情
    getDataDateils() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      getProjectDetail(data).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.projectData = res.result;
          console.log(this.projectData);
          //   console.log('this.projectData.constructionStage-4*230',this.projectData.constructionStage-4*230)
          if (parseInt(this.projectData.constructionStage) > 4) {
            this.$refs["stageScroll"].scrollTo(
              {
                x: (this.projectData.constructionStage - 4) * 230,
                // x:'50%'
              },
              500
            );
          }
        }
      });
    },
    //统计企业下项目各人员统计
    getWorkerStatisticsCount(type) {
      getWorkerStatisticsCountApi({ sn: this.$store.state.projectSn }).then(
        (res) => {
          console.log(res);
          this.statisticsCount = res.result;
          this.totalDevNum =
            this.statisticsCount.devcount.ufaceDevNum +
            this.statisticsCount.devcount.videoNum +
            this.statisticsCount.devcount.environmentDevNum +
            this.statisticsCount.devcount.towerDevNum +
            this.statisticsCount.devcount.lifterDevNum;
          if (type == 1) {
            this.createdEchart2();
          }
          clearInterval(this.interval1);
          this.interval1 = setTimeout(() => {
            this.getWorkerStatisticsCount();
          }, 5000);
        }
      );
    },
    createPieChart(data, div, color, title) {
      let that = this;
      let monitor = echarts.init(div);
      // monitor.clear();
      var option = {
        color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
        title: {
          show: true,
          text: data[0].value + data[1].value,
          x: "48%",
          y: "36%",
          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,
        },
        // tooltip: {
        //   // data: ['在线', '离线'],
        //   trigger: "item",
        //   formatter: "{a} <br/>{b}: {c} ({d}%)",
        // },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      //   if(color){
      //       option.series[0].radius=["75%", "85%"]
      //       option.title.x="45%"
      //       option.legend.show=false
      //   }
      monitor.setOption(option);
    },
    // 文件上传 之前
    handleBeforeUpload(file, type) {
      console.log(file);
      let fileType = file.type.split("/")[0];
      if (fileType == "video" || fileType == "image") {
        this.fullscreenLoading = this.$loading({
          lock: true,
          text: this.$t("message.companyDiagram.uploadHint"), // "上传中，请稍等。。。"
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        return true;
      } else {
        this.$message.error(this.$t("message.companyDiagram.uploadHint2")); //"请选择正确的文件"
        return false;
      }
    },
    //上传失败
    handleError(file, type) {
      this.fullscreenLoading.close();
      this.$message.error(this.$t("message.companyDiagram.uploadError")); //"上传失败，请重试"
    },
    //上传成功
    handleSuccess(file, type) {
      if (file.code == 200 || file.status == "SUCCESS") {
        console.log(file);
        var url = file.data[0].imageUrl;
        this.saveOrDeleteVideo(url);
      }
      this.fullscreenLoading.close();
    },

    handleSuccessTwo(file, type) {
      if (file.code == 200 || file.status == "SUCCESS") {
        console.log(file);
        var url = file.data[0].imageUrl;
        this.imgUrl = url;
        this.saveEffectData(url);
      }
      this.fullscreenLoading.close();
    },
    //效果图 保存
    saveEffectData(url) {
      // let configValue = JSON.stringify(url);
      let data = {
        projectSn: this.$store.state.projectSn,
        showType: 3,
        showTitle: this.$t("message.companyDiagram.resultImg"), //'效果图'
        configValue: url,
      };
      eidtProjectShowConfig(data).then((res) => {
        if (res.code == 200) {
          this.getQueryBySnData();
        }
      });
    },
    getQueryBySnData() {
      queryBySnData({
        projectSn: this.$store.state.projectSn,
        showType: 3,
      }).then((res) => {
        console.log(this.fileUrl + this.imgUrl);
        this.imgUrl = res.result.configValue;
      });
    },
    //保存或删除宣传视频
    saveOrDeleteVideo(url) {
      editProjectInfo({
        projectId: this.projectData.projectId,
        videoUrl: url,
      }).then((res) => {
        this.$message.success(this.$t("message.companyDiagram.uploadSuccess")); //"上传成功"
        this.projectData.videoUrl = url;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.weatherItem {
  /*float: left;*/
  display: inline-block;
  width: 101px;
  text-align: center;
  padding: 13px 5px;
  margin-top: -5px;
  // height: calc(100% - 13px);
  height: 165px;
  margin-left: 12px;
  background: linear-gradient(rgba(21, 25, 33, 0.06), rgba(6, 248, 179, 0.06));
  &:nth-child(2n) {
    background: linear-gradient(
      rgba(6, 248, 179, 0.06),
      rgba(21, 25, 33, 0.06)
    );
  }
  &:first-child {
    background: linear-gradient(
      rgba(21, 25, 33, 0.12),
      rgba(6, 248, 179, 0.12)
    );
  }
  .imgBox {
    height: 36px;
    display: flex;
    align-items: center;
    // margin: 15px 0;
    justify-content: center;
  }
  .weather {
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 3px;
  }
  // .temp{
  //     margin-bottom: 16px;
  // }
}
.weatherItem {
  background: linear-gradient(rgba(5, 11, 59, 0.1), rgba(40, 109, 221, 0.1));
  &:nth-child(2n) {
    background: linear-gradient(rgba(40, 109, 221, 0.1), rgba(5, 11, 59, 0.1));
  }
  &:first-child {
    background: linear-gradient(rgba(5, 11, 59, 0.3), rgba(36, 100, 206, 0.3));
  }
}
.optionListBox {
  display: flex;
  justify-content: center;
  .optionList_item {
    margin-right: 30px;
    box-sizing: border-box;
    text-align: center;
    padding-bottom: 5px;
    cursor: pointer;
  }
  .selectOptionList_item {
    border-bottom: 3px #2566d1 solid;
  }
  .selectOptionList_item2 {
    border-bottom: 3px #27a3e2 solid;
  }
}
.imgBox {
}
.listItem {
  color: white;
  font-size: 18px;
  .label {
    opacity: 0.8;
  }
}
.changeVideoBtn {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 3px 5px;
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  transform: translate(-50%, -50%);
}
.videos:hover + .changeVideoBox .changeVideoBtn,
.changeVideoBox:hover .changeVideoBtn {
  display: block;
}
.blockTitle4 {
  position: absolute !important;
  top: -10px !important;
  left: 50%;
  transform: translateX(-50%);
}
// 蓝色
.dataBoardPage_blue {
  .dataBoardContent {
    .bottom {
      .blockTitle {
        top: 0px;
      }
    }
    .splitLine {
      opacity: 0;
      margin: 15px 0 15px;
    }
    .timeBox {
      margin-top: 20px;
    }
  }
  .bottomInner {
    padding-left: 20px;
    &::before {
      content: '';
      position: absolute;
      top: 38px;
      left: 0;
      width: 100%;
      height: calc(100% - 48px);
      background-color: rgba(38, 104, 209, 0.1);
    }
  }
}
// 湛蓝
.dataBoardPage_blue2 {
  .dataBoardContent {
    .bottom {
      .blockTitle {
        top: 0px;
      }
    }
    .splitLine {
      opacity: 0;
      margin: 15px 0 15px;
    }
    .timeBox {
      margin-top: 20px;
    }
  }
  .bottomInner {
    padding-left: 20px;
    &::before {
      content: '';
      position: absolute;
      top: 38px;
      left: 0;
      width: 100%;
      height: calc(100% - 48px);
      background-color: rgba(2, 99, 152, 0.2);
    }
  }
}
.managePeople {
  float: left;
  position: relative;
  width: 100%;
  height: 60%;
  .managePeopleTitle {
    &::before {
      content: '';
      background-color: #6ce9f0;
      width: 5px;
      height: 5px;
      position: absolute;
      top: 5px;
      border-radius: 50%;
      display: block;
    }
  }
  .managePeopleTitle > p {
    margin-left: 10px;
  }
  .management {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .management_item {
      box-sizing: border-box;
      position: relative;
      width: 120px;
      text-align: center;
      .item_content {
        position: absolute;
        right: -5px;
        top: 0px;
      }
      .itemImgBox {
        img {
          width: 90px;
          height: 90px;
        }
      }
    }
  }
}
.airQulityChart {
  position: absolute !important;
  top: -5%;
  left: -28%;
}
.weatherBox {
  position: absolute;
  left: 167px;
  height: 75%;
  width: 80%;
  top: -5px;
}
.attendance-cards2 {
  width: 90%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // align-content: space-around;
  flex-wrap: wrap;
  position: absolute;
  left: 10%;
  top: 8%;
  // top: 10%;
  .attendance-cards-item {
    width: 50%;
    height: 40%;
    box-sizing: border-box;
    display: flex;
    // flex-direction: column;

    align-items: center;
    // text-align: center;
    // :nth-child(1) {
    //   display: block;
    //   color: white;
    //   font-size: 14px;
    //   font-family: PingFangSC-Light;
    // }
    // :nth-child(2) {
    //   display: block;
    //   margin-top: 5px;
    //   color: rgba(255, 255, 255, 0.8);
    //   font-size: 11px;
    // }
    .cards-item-left {
      width: 65px;
      text-align: center;
      p {
        text-align: center;
        color: rgba(255, 255, 254, 100);
        font-size: 13px;
        margin-top: 5px;
      }
    }
    .cards-item-right {
      margin-left: 5px;
      p {
        line-height: 22px;
        color: rgba(255, 255, 254, 0.8);
        font-size: 15px;
        margin-left: 10px;
      }
      .p3 {
        color: #d94916;
        font-size: 20px;
      }
    }
  }
}
.list_item {
  width: 100%;
  // height: 14%;
  display: flex;
  font-size: 12px;
  margin-top: 3%;
  color: rgba(255, 255, 255, 0.8);
  // .img{
  //     width: 100px;
  //     height: 100px;
  //     margin-right: 17px;
  // }
  .title {
    width: 240px;
    // height: 18%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 5px 0;
  }
  .title,
  .type,
  .address,
  .shebei,
  .date {
    margin: 4px 0;
  }
  :hover .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .img_box {
    width: 96px;
    margin-right: 10px;
  }
}
.airQuality {
  position: absolute;
  top: 80%;
  left: -1px;
  display: flex;
  width: 100%;
  justify-content: space-around;
  .airQuality-item {
    display: flex;
    font-size: 14px;
    img {
      width: 30px;
      height: 30px;
      margin-right: 9px;
      margin-top: 2px;
    }
  }
}
</style>
