<template>
  <!-- <vue-scroll> -->
  <div class="projectSummary">
    <closePage></closePage>
    <div class="title_wrap">
      <img
        v-if="LOGO_white"
        :src="'./img/logo/' + LOGO_white + '.png'"
        class="logo"
      />
      <img src="@/assets/images/overview2/headerBG.png" class="headerBG" />
      <div class="flex title_content">
        <div>
          <!-- 安全施工1456天14小时53分钟49秒 -->
        </div>
        <div class="projectName">
          {{ projectData.projectName }}
          <!-- - {{$t('message.projectSummary.overview')}} -->
        </div>
        <div>
          <!-- {{$t('message.projectSummary.timeRemaining')}}：789 {{$t('message.projectSummary.sky')}} -->
        </div>
      </div>
    </div>
    <div class="content flex4">
      <div class="content_l">
        <div class="content_height">
          <div class="flex3 content_title">
            <img
              src="@/assets/images/overview2/titleBG.png"
              class="title_img_bg"
            />
            <div class="flex title_r">
              <div class="title_name" >{{ showServicesData.showTitle }}</div>
              <div>
                <img
                  src="@/assets/images/overview2/config.png"
                  style="margin-right: 18px; cursor: pointer"
                  @click="configurationBrief = true"
                />
                <img
                  src="@/assets/images/overview2/refresh.png"
                  style="cursor: pointer"
                  @click="getSingleData(1)"
                />
              </div>
            </div>
          </div>
          <div class="content_content" v-if="!noServicesData">
            <img class="proImg" :src="showServicesData.printUrl" />
            <div v-if="!showServicesData.switchScroll" class="text">
              <vue-scroll>
                <pre>{{ showServicesData.text }}</pre>
              </vue-scroll>
            </div>
            <marquee
              class="text"
              v-else
              id="affiche"
              align="left"
              direction="up"
              height="60%"
              width="100%"
              hspace="10"
              vspace="20"
              loop="-1"
              scrollamount="5"
              scrolldelay="100"
              onmouseover="this.stop()"
              onmouseout="this.start()"
              behavior="alternate"
            >
              <div>
                <pre>{{ showServicesData.text }}</pre>
              </div>
            </marquee>
          </div>
          <div class="content_content noData" v-else>
            <img src="@/assets/images/noData.png" style="margin-top: 50%" />
            <div style="color: #224289">
              {{ $t('message.projectSummary.noData') }}
            </div>
          </div>
        </div>
        <div class="content_bottom">
          <div class="flex3 content_title">
            <img
              src="@/assets/images/overview2/titleBG.png"
              class="title_img_bg"
            />
            <div class="flex title_r">
              <div class="title_name">
                {{ $t('message.projectSummary.statistics') }}
              </div>
              <div>
                <!-- <img src="@/assets/images/overview2/config.png" style="margin-right:18px" />
                <img src="@/assets/images/overview2/refresh.png" />-->
              </div>
            </div>
          </div>
          <div class="content_content" style="padding: 0">
            <div class="device_wrap flex3">
              <devNumChart
                :title="$t('message.projectSummary.ufaceDevNum')"
                :num="statisticsCount.devcount.ufaceDevNum"
                :totalDevNum="totalDevNum"
              ></devNumChart>
              <!-- <div ref="device1" class="device1"></div> -->
              <!-- <div ref="device2" class="device2"></div> -->
              <devNumChart
                :title="$t('message.projectSummary.environmentDevNum')"
                :num="statisticsCount.devcount.environmentDevNum"
                :totalDevNum="totalDevNum"
              ></devNumChart>
            </div>
          </div>
        </div>
      </div>
      <div class="content_c">
        <div class="content_height">
          <div class="flex3 content_title">
            <img
              src="@/assets/images/overview2/titleBG.png"
              class="title_img_bg"
            />
            <div class="flex title_r" v-if="COMPANY == 'hezhan'">
              <div class="title_name">
                {{ $t(message.projectInfo.bimModel) }}
                <!-- BIM模型 -->
              </div>
            </div>
            <div class="flex title_r" v-else>
              <div class="title_name">{{ showVideoTitle }}</div>
              <div style="width: 100px; margin-right: -25px">
                <img
                  src="@/assets/images/overview2/config.png"
                  style="margin-right: 18px; cursor: pointer;z-index: 999;"
                  @click="configurationVideo = true"
                />
                <img
                  src="@/assets/images/overview2/refresh.png"
                  style="cursor: pointer;z-index: 999"
                  @click="getSingleData(2)"
                />
              </div>
            </div>
          </div>
          <div
            class="content_content"
            v-if="!noVideoData && COMPANY != 'hezhan'"
            style="padding-left: 8px; padding-right: 8px"
          >
            <!-- 视频插件 -->
            <!-- <videoModule :value="showVideoData[0]" ></videoModule> -->

            <el-carousel
              style="width: 100%; height: 100%"
              indicator-position="none"
              arrow="always"
              :autoplay="false"
              @change="changeCarousel"
            >
              <el-carousel-item
                v-for="(item, index) in showVideoData"
                :key="index"
                style="height: 100%"
              >
                <videoModule
                  :value="videoList"
                  :displayBottomMod="false"
                  :winNumBer="1"
                  v-show="showVideoData[videoIndex].videoType != 4"
                  :autoplay="true"
                ></videoModule>
                <video
                  v-show="showVideoData[videoIndex].videoType == 4"
                  width="100%"
                  height="100%"
                  :autoplay="
                    showVideoData[videoIndex].videoType == 4 && 'autoplay'
                  "
                  muted="muted"
                  loop="loop"
                  class="videoClass"
                  controls="controls"
                  :src="
                    showVideoData[videoIndex].videoType == 4 && item.videoUrl
                  "
                  id="videoDOM"
                  :poster="item.coverUrl"
                ></video>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div v-else-if="COMPANY == 'hezhan'" class="content_content2">
            <bimCenter></bimCenter>
          </div>
          <div class="content_content noData" v-else>
            <img src="@/assets/images/noData.png" style="margin-top: 20%" />
            <div style="color: #224289">
              {{ $t('message.projectSummary.noData') }}
            </div>
          </div>
        </div>
        <div class="content_bottom">
          <div class="flex3 content_title">
            <img
              src="@/assets/images/overview2/titleBG.png"
              class="title_img_bg"
            />
            <div class="flex title_r">
              <div class="title_name">{{ showEffectTitle }}</div>
              <div>
                <img
                  src="@/assets/images/overview2/config.png"
                  style="margin-right: 18px; cursor: pointer"
                  @click="effectPicture = true"
                />
                <img
                  src="@/assets/images/overview2/refresh.png"
                  style="cursor: pointer"
                  @click="getSingleData(3)"
                />
              </div>
            </div>
          </div>
          <div
            class="content_content"
            style="padding: 23px 15px 18px"
            v-if="!noEffectData"
          >
            <div class="effect_wrap flex3">
              <el-carousel
                :interval="5000"
                style="width: 100%; height: 100%"
                indicator-position="none"
                arrow="hover"
              >
                <el-carousel-item
                  v-for="(pageData, index) in showEffectData"
                  :key="index"
                  style="height: 100%"
                  class="flex3"
                >
                  <div
                    class="effect_img_content"
                    v-for="(item, index2) in pageData"
                    :key="index2"
                  >
                    <!-- <div :preview="item.effectUrl"
                      :style="{'background-image':'url('+ item.effectUrl +')'}"
                      class="effectImg"
                    ></div>-->
                    <img
                      :preview="item.effectUrl"
                      :src="item.effectUrl"
                      class="effectImg"
                    />
                    <div>{{ item.effectName }}</div>
                    <div class="dot"></div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div class="content_content noData" v-else>
            <img src="@/assets/images/noData.png" style="margin-top: 5%" />
            <div style="color: #224289">
              {{ $t('message.projectSummary.noData') }}
            </div>
          </div>
        </div>
      </div>
      <div class="content_r">
        <div class="content_title" style="height: 50%">
          <div class="flex3 content_title">
            <img
              src="@/assets/images/overview2/titleBG.png"
              class="title_img_bg"
            />
            <div class="flex title_r">
              <div class="title_name">
                {{ $t('message.projectSummary.schedule') }}
              </div>
              <div></div>
            </div>
          </div>
          <div class="content_content" style="padding: 0">
            <div ref="projectSchedule" class="projectSchedule"></div>
          </div>
        </div>
        <div class="content_bottom personnel" @click="goPerson">
          <div class="flex3 content_title">
            <img
              src="@/assets/images/overview2/titleBG.png"
              class="title_img_bg"
            />
            <div class="flex title_r">
              <div class="title_name">
                {{ $t('message.projectSummary.management') }}
              </div>
              <div></div>
            </div>
          </div>
          <div class="content_content" style="padding: 23px 0px 18px">
            <div class="people_wrap">
              <!-- <img src="@/assets/images/overview2/blockBG.png" /> -->
              <div class="realTime_num">
                <div class="number">
                  <!-- statisticsCount.currentMonthEducationPerson -->
                  <countTo
                    :startVal="0"
                    :endVal="statisticsCount.presencecount.totalPerson"
                    :duration="5000"
                  ></countTo>
                </div>
                <!-- {{$t('message.firmProject.leftBlock1.Block3.numBox4')}} -->
                <div>{{ $t('message.projectSummary.realtimeNumber') }}</div>
              </div>
              <div class="attendance_num">
                <div class="number">
                  <countTo
                    :startVal="0"
                    :endVal="statisticsCount.presencecount.totalPerson"
                    :duration="5000"
                  ></countTo>
                </div>
                <div>{{ $t('message.projectSummary.attendance') }}</div>
              </div>
              <div class="headcount">
                <div class="number">
                  <countTo
                    :startVal="0"
                    :endVal="statisticsCount.workercount.totalPerson"
                    :duration="5000"
                  ></countTo>
                </div>
                <div>{{ $t('message.projectSummary.headcount') }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_bottom" @click="goEnvir">
          <div class="flex3 content_title">
            <img
              src="@/assets/images/overview2/titleBG.png"
              class="title_img_bg"
            />
            <div class="flex title_r">
              <div class="title_name">
                {{ $t('message.projectSummary.monitoring') }}
              </div>
              <div></div>
            </div>
          </div>
          <div class="content_content" style="padding: 0">
            <airQulityChart></airQulityChart>
            <!-- <div ref="monitor" style="width:100%;height:100%"></div>
            <div class="colour flex5">
              <div class="colour_content">
                <div
                  class="bg"
                  style="background:#1FCCC6; border-top-left-radius: 8px; border-bottom-left-radius: 8px;"
                ></div>
                <div class="size">{{$t('message.projectSummary.actor')}}</div>
              </div>
              <div class="colour_content">
                <div class="bg" style="background:#FFBB38"></div>
                <div class="size">{{$t('message.projectSummary.fine')}}</div>
              </div>
              <div class="colour_content">
                <div class="bg" style="background:#FE7A18"></div>
                <div class="size">{{$t('message.projectSummary.mildContamination')}}</div>
              </div>
              <div class="colour_content">
                <div class="bg" style="background:#7718FE"></div>
                <div class="size">{{$t('message.projectSummary.middleLevelPollution')}}</div>
              </div>
              <div class="colour_content">
                <div class="bg" style="background:#890EA1"></div>
                <div class="size">{{$t('message.projectSummary.actheavyPollutionor')}}</div>
              </div>
              <div class="colour_content">
                <div
                  class="bg"
                  style="background:#970C0C;  border-top-right-radius: 8px; border-bottom-right-radius: 8px;"
                ></div>
                <div class="size">{{$t('message.projectSummary.severeContamination')}}</div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- //项目简介 -->
    <div class="configuration_wrap" v-if="configurationBrief">
      <div class="configuration_content">
        <div class="content_wrap">
          <div class="title">
            {{ $t('message.projectSummary.projectIntro') }}
          </div>
          <img
            src="@/assets/images/overview2/shut_icon.png"
            class="shut_icon"
            @click="configurationBrief = false"
          />
          <el-form
            label-width="180px"
            class="form"
            size="small"
            style="width: 80%; margin-top: 40px"
          >
            <el-form-item :label="$t('message.projectSummary.title')">
              <el-input
                style="background: #06173f"
                v-model="services.showTitle"
                :placeholder="$t('message.projectSummary.pleaseEnter')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.projectSummary.picture')">
              <el-input
                :placeholder="
                  $t('message.projectSummary.pleaseEnterTheImageURL')
                "
                v-model="services.printUrl"
              ></el-input>
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                name="files"
                :on-success="(file) => handleAvatarSuccess(file, 1)"
                :on-error="handleAvatarError"
                :show-file-list="false"
              >
                <el-button
                  style="color: #33d4f1; font-size: 14px"
                  type="text"
                  >{{ $t('message.projectSummary.upload') }}</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item :label="$t('message.projectSummary.text')">
              <el-input type="textarea" v-model="services.text"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.projectSummary.roll')">
              <div style="text-align: left">
                <el-switch
                  v-model="services.switchScroll"
                  active-color="#41BAE2"
                  inactive-color="#C4C4C4"
                ></el-switch>
              </div>
            </el-form-item>
          </el-form>
          <el-button size="small" class="save" @click="saveServices">{{
            $t('message.projectSummary.save')
          }}</el-button>
        </div>
      </div>
    </div>
    <!-- 宣传视频 -->
    <div class="configuration_wrap" v-if="configurationVideo">
      <div class="configuration_content">
        <div class="content_wrap" style="padding: 0 100px">
          <div class="title">
            {{ $t('message.projectSummary.allocationVideo') }}
          </div>
          <img
            src="@/assets/images/overview2/shut_icon.png"
            class="shut_icon"
            @click="configurationVideo = false"
          />
          <el-form
            label-width="180px"
            class="form"
            size="small"
            style="width: 80%; margin-top: 40px"
          >
            <el-form-item :label="$t('message.projectSummary.title')">
              <el-input
                style="background: #06173f"
                v-model="videoTitle"
                :placeholder="$t('message.projectSummary.pleaseEnter')"
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: left">
            {{ $t('message.projectSummary.video') }}
          </div>
          <div
            class="video_type_wrap"
            style="background: none; margin-bottom: 0"
          >
            <div
              class="video_type"
              v-if="videoData.length > 0"
              v-for="(item, index) in videoData"
              :key="index"
            >
              <img
                src="@/assets/images/overview2/delete.png"
                class="delete_img"
                v-if="
                  videoData.length > 1 || (videoData.length <= 1 && index != 0)
                "
                @click="removeVideoData(index)"
              />
              <el-form
                label-width="180px"
                class="form"
                size="small"
                style="width: 80%"
              >
                <el-form-item :label="$t('message.projectSummary.videoFile')">
                  <el-input
                    :placeholder="$t('message.projectSummary.playAddress')"
                    v-model="item.videoUrl"
                  ></el-input>
                  <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-success="(file) => handleAvatarSuccess(file, 2, index)"
                    :on-error="handleAvatarError"
                    name="files"
                    :show-file-list="false"
                  >
                    <el-button
                      size="small"
                      style="color: #33d4f1"
                      type="text"
                      >{{ $t('message.projectSummary.upload') }}</el-button
                    >
                  </el-upload>
                </el-form-item>
                <!-- 视频格式： -->
                <el-form-item
                  :label="$t('message.projectInfo.videoType') + ':'"
                >
                  <el-radio-group v-model="item.videoType">
                    <el-radio :label="1">flv</el-radio>
                    <el-radio :label="2">m3u8</el-radio>
                    <el-radio :label="3">rtmp</el-radio>
                    <el-radio :label="4">mp4</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  :label="$t('message.projectSummary.coverPicture')"
                >
                  <el-input
                    :placeholder="
                      $t('message.projectSummary.pleaseEnterTheImageURL')
                    "
                    v-model="item.coverUrl"
                  ></el-input>
                  <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-success="(file) => handleAvatarSuccess(file, 3, index)"
                    :on-error="handleAvatarError"
                    name="files"
                    :show-file-list="false"
                  >
                    <el-button
                      size="small"
                      style="color: #33d4f1"
                      type="text"
                      >{{ $t('message.projectSummary.upload') }}</el-button
                    >
                  </el-upload>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div
            class="flex3"
            @click="addVideoData"
            style="cursor: pointer; width: 100px"
          >
            <img
              src="@/assets/images/overview2/add.png"
              style="width: 30px; height: 30px; margin-top: 10px"
            />
            <div>{{ $t('message.projectSummary.addVideo') }}</div>
          </div>
          <el-button size="small" class="save" @click="saveVideo">{{
            $t('message.projectSummary.save')
          }}</el-button>
        </div>
      </div>
    </div>
    <!-- 效果图 -->
    <div class="configuration_wrap" v-if="effectPicture">
      <div class="configuration_content">
        <div class="content_wrap" style="padding: 0 100px">
          <div class="title">
            {{ $t('message.projectSummary.configurationRenderings') }}
          </div>
          <img
            src="@/assets/images/overview2/shut_icon.png"
            class="shut_icon"
            @click="effectPicture = false"
          />
          <el-form
            label-width="180px"
            class="form"
            size="small"
            style="width: 80%; margin-top: 40px"
          >
            <el-form-item :label="$t('message.projectSummary.title')">
              <el-input
                style="background: #06173f"
                v-model="effectTitle"
                :placeholder="$t('message.projectSummary.pleaseEnter')"
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: left; font-size: 17px">
            {{ $t('message.projectSummary.picture') }}
          </div>
          <div
            class="video_type_wrap"
            style="background: none; margin-bottom: 0"
          >
            <div
              class="video_type"
              v-if="effectData.length > 0"
              v-for="(item, index) in effectData"
              :key="index"
            >
              <img
                src="@/assets/images/overview2/delete.png"
                class="delete_img"
                v-if="
                  effectData.length > 1 ||
                  (effectData.length <= 1 && index != 0)
                "
                @click="removeEffectData(index)"
              />
              <el-form
                label-width="180px"
                class="form"
                size="small"
                style="width: 80%"
              >
                <el-form-item :label="$t('message.projectSummary.imageName')">
                  <el-input
                    :placeholder="$t('message.projectSummary.pleaseEnter')"
                    v-model="item.effectName"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('message.projectSummary.imageFile')">
                  <el-input
                    :placeholder="
                      $t('message.projectSummary.pleaseEnterTheImageURL')
                    "
                    v-model="item.effectUrl"
                  ></el-input>
                  <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-success="(file) => handleAvatarSuccess(file, 4, index)"
                    :on-error="handleAvatarError"
                    name="files"
                    :show-file-list="false"
                  >
                    <el-button
                      size="small"
                      style="color: #33d4f1"
                      type="text"
                      >{{ $t('message.projectSummary.upload') }}</el-button
                    >
                  </el-upload>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div
            class="flex3"
            style="cursor: pointer; width: 100px"
            @click="addEffectImg"
          >
            <img
              src="@/assets/images/overview2/add.png"
              style="width: 30px; height: 30px; margin-top: 10px"
            />
            <div>{{ $t('message.projectSummary.addImage') }}</div>
          </div>
          <el-button size="small" class="save" @click="saveEffectData">{{
            $t('message.projectSummary.save')
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- </vue-scroll> -->
</template>
<script>
import echarts from 'echarts4';;
import {
  getPageDetail,
  eidtProjectShowConfig,
  queryBySnData
} from "@/assets/js/api/projectSummary.js";
import scroll from "vue-seamless-scroll";
import countTo from "vue-count-to";
import videoModule from "@/components/videoModule/videoModule";
import devNumChart from "@/components/chart/devNumChart";
import airQulityChart from "@/components/chart/airQulityChart";
import bimCenter from "../BIMCenter/overview";
import { getWorkerStatisticsCountApi } from "@/assets/js/api/company/project";
import closePage from "@/components/closePage"
export default {
  name: "projectSummary",
  components: {
    scroll,
    countTo,
    videoModule,
    devNumChart,
    airQulityChart,
    bimCenter, closePage
  },
  data() {
    return {
      LOGO_white: LOGO_white,
      COMPANY: COMPANY,
      uploadUrl: "",
      fileUrl: "",
      projectSn: "",
      projectData: {},
      configurationBrief: false, //简介弹窗
      //简介数据  新增 || 修改
      services: {
        showTitle: "",
        switchScroll: false,
        printUrl: "",
        text: "",
      },
      //显示的简介 数据
      showServicesData: {
        showTitle: this.$t("message.projectSummary.projectBrief"),
        switchScroll: false,
        printUrl: "",
        text: "",
      },
      noServicesData: true,
      noVideoData: true,
      noEffectData: true,

      scroll: false, // 简介是否滚动
      synopsisText: "", // 显示的简介

      configurationVideo: false, // 宣传视频
      videoTitle: "",
      // 新增 || 编辑
      videoData: [
        {
          videoUrl: "",
          videoType: "",
          coverUrl: "",
        },
      ],
      showVideoTitle: this.$t("message.projectSummary.promotionVedio"),
      showVideoData: [
        {
          videoUrl: "",
          videoType: "",
          coverUrl: "",
        },
      ],

      videoList: [],

      videoIndex: 0,

      effectPicture: false, // 效果图弹窗
      // 新增  || 修改 效果图
      effectTitle: "",
      effectData: [
        {
          effectName: "",
          effectUrl: "",
        },
      ],

      showEffectTitle: this.$t("message.projectSummary.effectPicture"),
      showEffectData: [],
      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
        }
      },
      totalDevNum: 0
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.getPageDetails();
    this.getWorkerStatisticsCount()
    // this.getDevCountStatictis()
  },
  mounted() {


  },

  methods: {
    goPerson() {
      var arr = this.$store.state.userInfo.menuAuthority.moduleList
      arr.forEach(element => {
        if (element.moduleName == '劳务管理') {
          this.$store.commit("setMoudle", element);
          var arr2 = element.menuList, arr3 = []
          arr2.forEach(item => {
            if (item.menuEquipment == 0) {
              arr3.push(item)
            }
          });
          this.$store.commit("setMenuList", arr3);
        }
      });
      let routeUrl = this.$router.resolve({
        path: "/project/labor/personnelOverview",
      });
      window.open(routeUrl.href, "_blank");
    },
    goEnvir() {
      let routeUrl = this.$router.resolve({
        path: "/project/environmentalOverview",
      });
      window.open(routeUrl.href, "_blank");
    },
    //统计企业下项目各人员统计
    getWorkerStatisticsCount() {
      getWorkerStatisticsCountApi({ sn: this.projectSn }).then(res => {
        this.statisticsCount = res.result
        this.totalDevNum = this.statisticsCount.devcount.ufaceDevNum +
          this.statisticsCount.devcount.videoNum + this.statisticsCount.devcount.environmentDevNum
      })
    },
    //获取页面数据详情
    getPageDetails() {
      let data = {
        projectSn: this.projectSn,
      };
      getPageDetail(data).then((res) => {
        //showType==1 项目简介； 2 视频； 3 效果图
        if (res.code == 200) {
          this.videoList = [];
          this.projectData = res.result.project;
          if (res.result.list.length > 0) {
            for (let i in res.result.list) {
              let value = JSON.parse(res.result.list[i].configValue);
              if (res.result.list[i].showType == 1) {
                this.noServicesData = false;
                this.showServicesData = value;
                this.services = JSON.parse(JSON.stringify(value));
              }
              if (res.result.list[i].showType == 2) {
                this.noVideoData = false;
                this.showVideoTitle = res.result.list[i].showTitle;
                this.showVideoData = value;
                //获取到视频地址 传值到 插件
                for (let v = 0; v < value.length; v++) {
                  if (value[v].videoType != 4) {
                    let data = {
                      winNum: 0,
                      value: "video" + (v + 1),
                      url: value[v].videoUrl,
                    };
                    this.videoList.push(data);
                  }
                }

                this.videoData = JSON.parse(JSON.stringify(value));
                this.videoTitle = JSON.parse(
                  JSON.stringify(res.result.list[i].showTitle)
                );
              }

              if (res.result.list[i].showType == 3) {
                let index = 0;
                let newArr = [];
                while (index < value.length) {
                  newArr.push(value.slice(index, (index += 5)));
                }
                this.effectData = JSON.parse(JSON.stringify(value));
                this.effectTitle = JSON.parse(
                  JSON.stringify(res.result.list[i].showTitle)
                );
                this.noEffectData = false;
                this.showEffectData = newArr;
                this.showEffectTitle = res.result.list[i].showTitle;
              }
              setTimeout(() => {
                this.$previewRefresh();
              }, 100);
            }
          } else {
          }
          this.createdEcharts2();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    // 查询单条数据
    getSingleData(type) {
      // type == 1项目简介，2宣传视频，3效果图
      let data = {
        projectSn: this.projectSn,
        showType: type,
      };
      queryBySnData(data).then((res) => {
        if (res.code == 200 && res.result) {
          let value = JSON.parse(res.result.configValue);
          if (res.result.showType == 1) {
            this.showServicesData = value;
            this.services = JSON.parse(JSON.stringify(value));
            this.noServicesData = false;
          } else if (res.result.showType == 2) {
            this.showVideoTitle = res.result.showTitle;
            this.showVideoData = JSON.parse(JSON.stringify(value));
            this.videoData = JSON.parse(JSON.stringify(value));
            this.videoTitle = JSON.parse(JSON.stringify(res.result.showTitle));
            this.noVideoData = false;
          } else if (res.result.showType == 3) {
            let index = 0;
            let newArr = [];
            while (index < value.length) {
              newArr.push(value.slice(index, (index += 5)));
            }
            this.effectData = JSON.parse(JSON.stringify(value));
            this.effectTitle = JSON.parse(JSON.stringify(res.result.showTitle));
            this.noEffectData = false;
            this.showEffectData = newArr;
            this.showEffectTitle = res.result.showTitle;
          }
        } else {
          this.noServicesData = true;
          this.noVideoData = true;
          this.noEffectData = true;
        }
      });
    },

    //上传文件成功
    handleAvatarSuccess(file, type, index) {
      this.$message.success(this.$t("message.projectSummary.uploadSuccessful"));
      //1 项目简介图片；   2 视频文件；  3 封面图片；  4 效果图
      if (file.status == "SUCCESS") {
        if (type == 1) {
          this.services.printUrl = this.fileUrl + file.data[0].imageUrl;
        } else if (type == 2) {
          this.videoData[index].videoUrl = this.fileUrl + file.data[0].imageUrl;
        } else if (type == 3) {
          this.videoData[index].coverUrl = this.fileUrl + file.data[0].imageUrl;
        } else if (type == 4) {
          this.effectData[index].effectUrl =
            this.fileUrl + file.data[0].imageUrl;
        }
      }
    },
    //上传文件失败
    handleAvatarError(file) {
      this.$message.error(file.message);
    },

    //保存项目简介
    saveServices() {
      let configValue = JSON.stringify(this.services);
      let data = {
        projectSn: this.projectSn,
        showType: 1,
        showTitle: this.services.showTitle,
        configValue: configValue,
      };

      eidtProjectShowConfig(data).then((res) => {
        if (res.code == 200) {
          this.configurationBrief = false;
          this.getSingleData(1);
        }
      });
    },

    //新增 视频 按钮
    addVideoData() {
      let data = {
        videoUrl: "",
        videoType: "",
        coverUrl: "",
      };
      this.$message.success(this.$t("message.projectSummary.newSuccess"));
      this.videoData.push(data);
    },

    //删除视频按钮
    removeVideoData(index) {
      let data = this.videoData;
      for (let i in data) {
        if (i == index) {
          data.splice(index, 1);
        }
      }
      this.videoData = data;
    },

    // 保存 视频 按钮
    saveVideo() {
      let configValue = JSON.stringify(this.videoData);
      let data = {
        projectSn: this.projectSn,
        showType: 2,
        showTitle: this.videoTitle,
        configValue: configValue,
      };
      eidtProjectShowConfig(data).then((res) => {
        if (res.code == 200) {
          this.configurationVideo = false;
          this.getSingleData(2);
        }
      });
    },

    // 切换视频
    changeCarousel(index) {
      this.videoIndex = index;
      document.getElementById("videoDOM").currentTime = 0;
    },

    //新增效果图按钮
    addEffectImg() {
      this.$message.success(this.$t("message.projectSummary.newSuccess"));
      let data = {
        effectName: "",
        effectUrl: "",
      };
      this.effectData.push(data);
    },

    //删除效果图
    removeEffectData(index) {
      let data = this.effectData;
      for (let i in data) {
        if (i == index) {
          data.splice(index, 1);
        }
      }
      this.effectData = data;
    },

    //效果图 保存
    saveEffectData() {
      let configValue = JSON.stringify(this.effectData);
      let data = {
        projectSn: this.projectSn,
        showType: 3,
        showTitle: this.effectTitle,
        configValue: configValue,
      };
      eidtProjectShowConfig(data).then((res) => {
        if (res.code == 200) {
          this.effectPicture = false;
          this.getSingleData(3);
        }
      });
    },

    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
    getCirlPoint(x0, y0, r, angle) {
      let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
      let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },
    // 项目进度 计算
    _dashed() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgb(0,255,255,.3)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgb(0,0,0,0)",
                borderWidth: 1,
                borderColor: "rgba(0,255,255,1)",
              },
            },
          });
        }
      }
      return dataArr;
    },

    //创建图表 --- 项目进度
    createdEcharts2() {
      let that = this;
      //项目进度
      let projectSchedule = echarts.init(this.$refs.projectSchedule);
      projectSchedule.clear();
      let option = {
        title: {
          text:
            "{a|" +
            this.$t('message.companyDiagram.CONSTRUCTIONSTAGE')[this.projectData.constructionStage - 1].name +
            "}\n{c|" +
            this.$t("message.projectSummary.stage") +
            "}",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 15,
                color: " rgba(255, 255, 254, 1)",
                fontWeight: "600",
                lineHeight: 25,
              },

              c: {
                fontSize: 15,
                color: " rgba(255, 255, 254, 1)",
                lineHeight: 20,
              },
            },
          },
        },
        series: [
          {
            type: "gauge",
            radius: "80%",
            clockwise: false,
            startAngle: "90",
            endAngle: "-269.9999",
            splitNumber: 30,
            detail: {
              offsetCenter: [0, -20],
              formatter: " ",
            },
            pointer: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0, "#2CFAFC"],
                  [36.7 / 100, "#0EF6F8"],
                  [1, "#061740"],
                ],
                width: 20,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 55,
              lineStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 255, 255, 1)",
                shadowOffsetY: "0",
                color: "#042B3E",
                width: 2,
              },
            },
            axisLabel: {
              show: false,
            },
          },
          {
            type: "pie",
            radius: ["54%", "55%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: "#0C355E",
              },
            },
            label: {
              show: false,
            },
            data: that._dashed(),
          },

          {
            type: "pie",
            radius: [0, "40%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                shadowBlur: 20,
                shadowColor: "#000",
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                  {
                    offset: 0,
                    color: "#0FF",
                  },
                  {
                    offset: 1,
                    color: "#060f20",
                  },
                ]),
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            radius: ["84%", "85.5%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                shadowBlur: 20,
                shadowColor: "rgba(0, 255, 255,.6)",
                color: "#0f232e",
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            radius: ["88%", "89.5%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                shadowBlur: 20,
                shadowColor: "rgba(0, 255, 255,.6)",
                color: "rgba(15, 35, 46,.6)",
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
        ],
      };
      projectSchedule.setOption(option);
      setInterval(() => {
        let option = projectSchedule.getOption();
        option.series[1].startAngle = option.series[1].startAngle - 1;
        projectSchedule.setOption(option);
      }, 100);
    },
  },
};
</script>
<style lang="less" scoped>
body,
html,
#app {
  overflow: hidden;
}
.logo {
  position: absolute;
  left: 40px;
  top: 8px;
  height: 16px;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex3 {
  display: flex;
  align-items: center;
}
.flex4 {
  display: flex;
  justify-content: space-between;
}
.flex5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.projectSummary {
  width: 100%;
  height: 100%;
  background: #061740;

  .title_wrap {
    width: 100%;
    height: 8%;
    position: relative;
    color: rgba(255, 255, 254, 1);
    font-size: 15px;
    text-align: center;
    font-family: PingFangSC-Regular;
    .headerBG {
      width: 100%;
      height: 76px;
    }
    .title_content {
      position: absolute;
      top: 8px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 18%;
    
      .projectName {
        width: 96%;
        color: rgba(14, 246, 248, 1);
        font-size: 31px;
        text-align: center;
        font-family: AlibabaPuHuiTiH;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // margin-left: -123px;
      }
    }
  }
  .content {
    width: 100%;
    background: #061740;
    box-sizing: border-box;
    padding: 10px 30px 0;
    color: rgba(255, 255, 255, 1);
    height: 92%;

    .content_l,
    .content_r {
      width: 22%;
      height: 68%;
    }
    .content_c {
      width: 54.5%;
      height: 68%;
    }
    .content_title {
      width: 100%;
      .title_img_bg {
        width: 81px;
        height: 21px;
      }
      .title_r {
        width: calc(100% - 81px);
        height: 21px;
        margin-top: -6px;
        padding: 0 4px 4px;
        border-bottom: 2px solid #245f89;
        color: rgba(65, 186, 226, 1);
        font-size: 17px;
        text-align: center;
        font-family: PingFangSC-Medium;
        img {
          width: 15px;
          height: 15px;
        }
      }
    }
    .content_height {
      height: 100%;
    }
    .content_content2 {
      border-radius: 2px;
      background-image: linear-gradient(#0b2453, #061740);
      border: 2px solid #18426c;
      width: 100%;
      height: calc(100% - 26px);
    }
    .content_content {
      margin-top: -1px;
      height: calc(100% - 21px);
      padding: 23px 23px 18px;
      box-sizing: border-box;
      border: 2px solid #18426c;
      border-top: none;
      font-size: 14px;
      line-height: 25px;
      border-radius: 2px;
      background-image: linear-gradient(#0b2453, #061740);
      .proImg {
        max-width: 100%;
        max-height: 230px;
        width: auto;
        height: auto;
        display: block;
        margin: auto;
      }
      .text {
        margin-top: 20px;
        overflow-y: auto;
        height: calc(100% - 250px);
        // pre{
        //   white-space: normal;
        // }
      }
    }
    .content_bottom {
      margin-top: 21px;
      width: 100%;
      height: 41%;
    }

    .personnel {
      margin-bottom: 0 !important;
      height: calc(100% - 50% - 21px);
    }
  }
  .projectSchedule {
    width: 100%;
    height: 100%;
  }
  .people_wrap {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    // background-image: url("../../../assets/images/overview2/blockBG.png");
    background-image: url('../../../assets/images/overview2/blockBG.gif');
    background-repeat: no-repeat;
    // background-size: contain;
    background-size: auto;
    background-position: center center;
    color: rgba(255, 255, 254, 0.8);
    font-size: 14px;
    img {
      width: 95%;
      height: auto;
      margin-top: 4.6%;
    }
    .realTime_num,
    .attendance_num,
    .headcount {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 56px;
      height: 55px;
    }
    .realTime_num {
      transform: translate(-30px, -68px);
    }
    .attendance_num {
      transform: translate(-142px, 18px);
    }
    .headcount {
      transform: translate(80px, 18px);
    }
    // .realTime_num {
    //   position: absolute;
    //   top: 17.8%;
    //   left: 50%;
    //   width: 56px;
    //   height: 55px;
    //   margin-left: -30px;
    // }
    // .attendance_num {
    //   position: absolute;
    //   top: 57.8%;
    //   left: 13%;
    //   width: 56px;
    //   height: 55px;
    // }
    // .headcount {
    //   position: absolute;
    //   top: 57.8%;
    //   left: 70%;
    //   width: 56px;
    //   height: 55px;
    // }
    .number {
      color: rgba(0, 229, 232, 1);
      font-size: 28px;
      font-family: PingFangSC-Medium;
      margin-bottom: 5px;
    }
  }
  .device_wrap {
    width: 100%;
    height: 100%;
    div {
      height: 100%;
      width: 50%;
      background-image: linear-gradient(#0b2453, #061740) !important;
    }
  }

  //弹窗
  .configuration_wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #fff;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.4);
    .configuration_content {
      width: 882px;
      height: 557px;
      position: relative;
      margin: 180px auto 0;
      box-sizing: border-box;
      padding: 26px 30px;
      background-image: url('../../../assets/images/overview2/dialogBG.png');
      background-repeat: no-repeat;
      background-size: 100%;
      text-align: center;
    }
    .content_wrap {
      z-index: 10000;
      .title {
        color: rgba(14, 246, 248, 1);
        font-size: 18px;
        text-align: center;
        font-family: AliHYAiHei;
        font-weight: 700;
      }
      .shut_icon {
        position: absolute;
        right: 28px;
        top: 36px;
        z-index: 2000;
        margin: 10px;
        cursor: pointer;
      }
    }
    /deep/ .el-form .el-form-item__label {
      color: #fff;
    }
    /deep/ .el-input__inner {
      background: #06173f;
      font-size: 14px;
      border-color: #1d5181;
      color: rgba(161, 164, 176, 1);
    }
    /deep/ .el-textarea__inner {
      min-height: 188px !important;
      background: #06173f;
      font-size: 14px;
      color: rgba(161, 164, 176, 1);
      border-color: #1d5181;
    }
    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    /deep/ .el-textarea__inner::-webkit-scrollbar {
      width: 5px; /*对垂直流动条有效*/
      height: 10px; /*对水平流动条有效*/
    }

    /*定义滚动条的轨道颜色、内阴影及圆角*/
    /deep/ .el-textarea__inner::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: none;
      border-radius: 3px;
    }

    /*定义滑块颜色、内阴影及圆角*/
    /deep/ .el-textarea__inner::-webkit-scrollbar-thumb {
      border-radius: 7px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #666d7e;
    }

    .upload-demo {
      position: absolute;
      top: 0;
      right: -68px;
      color: #33d4f1;
      font-size: 14px;
    }
    .save {
      color: #fff;
      background: #41bae2;
      border-color: #41bae2;
      position: absolute;
      bottom: 40px;
      left: 50%;
      margin-left: -26px;
    }
  }
  /deep/ .el-radio {
    color: rgba(161, 164, 176, 1);
  }
  /deep/ .el-radio__label {
    font-size: 16px;
  }
  /deep/ .el-radio__inner {
    background: #102757;
    border-color: rgba(161, 164, 176, 1);
  }
  .video_type_wrap {
    width: 100%;
    background: #102757;
    margin: 12px 0;
    max-height: 250px;
    overflow-y: auto;
  }
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  .video_type_wrap::-webkit-scrollbar {
    width: 5px; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/
  }

  /*定义滚动条的轨道颜色、内阴影及圆角*/
  .video_type_wrap::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: none;
    border-radius: 3px;
  }

  /*定义滑块颜色、内阴影及圆角*/
  .video_type_wrap::-webkit-scrollbar-thumb {
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #666d7e;
  }
  .video_type {
    position: relative;
    .delete_img {
      position: absolute;
      right: 0;
      top: 0;
      margin: 10px;
      cursor: pointer;
      z-index: 2010;
    }
    width: 100%;
    background: #102757;
    padding: 12px 0;
    margin-bottom: 10px;
  }
  .video_type:last-child {
    margin-bottom: 0;
  }
  .effect_wrap {
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    overflow: hidden;
    .effect_img_content {
      width: 20%;
      padding-bottom: 10px;
      border-bottom: 1px solid #15254b;
      position: relative;
      text-align: center;
      font-size: 14px;
      color: #04ffff;
      .effectImg {
        background-size: contain;
        background-repeat: no-repeat;
        height: 95px;
        background-position: 50%;
        margin: 15px auto;
      }
      .dot {
        position: absolute;
        bottom: -5px;
        left: 50%;
        margin-left: -5px;
        height: 10px;
        width: 10px;
        background-color: #04ffff;
        border-radius: 50%;
      }
    }
  }
  /deep/ .el-carousel__container {
    height: 100%;
  }
  .noData {
    text-align: center;
  }
}
</style>