<template>
  <div class="fullHeight">
    <div v-if="company == 'henan' " id="map" class="fullHeight" style="width:100%;height: 100%"></div>
    <vue-scroll v-else>
      <div class="top blockBox">
        <!-- 人员概况 -->
        <div class="whiteBlock">
          <div class="blockInner">
            <div class="pageTitle">
              {{ $t("message.firmProject.leftBlock1.title1") }}
            </div>
            <div
              class="item1"
              style="background-color: rgba(81, 129, 246, 0.06)"
            >
              <div class="numBox">
                <img
                  src="@/assets/images/longguang/1.png"
                  v-if="company == 'longguang'"
                />
                <img src="@/assets/images/companyProject/1.png" v-else />
                <div class="dataBox">
                  <p class="num primaryText">
                    {{ statisticsCount.workercount.totalPerson }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.leftBlock1.Block1.text1") }}
                  </p>
                </div>
              </div>
              <div class="todayAdd">
                <p class="">
                  {{ $t("message.firmProject.leftBlock1.Block1.todayAdd") }}
                </p>
                <p>
                  {{ $t("message.firmProject.leftBlock1.Block1.labour")
                  }}{{ statisticsCount.workercount.lwPersonYesterdayAdd
                  }}{{ $t("message.firmProject.leftBlock1.Block1.people") }}
                  {{ $t("message.firmProject.leftBlock1.Block1.manage")
                  }}{{ statisticsCount.workercount.glPersonYesterdayAdd
                  }}{{ $t("message.firmProject.leftBlock1.Block1.people") }}
                  {{ $t("message.firmProject.leftBlock1.Block1.RealNameSystem")
                  }}{{
                    statisticsCount.workercount.lwPersonYesterdayAdd +
                    statisticsCount.workercount.glPersonYesterdayAdd
                  }}{{ $t("message.firmProject.leftBlock1.Block1.people") }}
                </p>
              </div>
            </div>
            <div class="item2">
              <div class="itemInner">
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block2.itemInner1")
                  }}<span class="primaryText">{{
                    statisticsCount.workercount.jfGlPersonTotal
                  }}</span>
                </div>
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block2.itemInner2")
                  }}<span class="primaryText">{{
                    statisticsCount.workercount.jlGlPersonTotal
                  }}</span>
                </div>
              </div>
              <div class="itemInner">
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block2.itemInner3")
                  }}<span class="primaryText">{{
                    statisticsCount.workercount.yfGlPersonTotal
                  }}</span>
                </div>
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block2.itemInner4")
                  }}<span class="primaryText">{{
                    statisticsCount.workercount.lwPersonTotal
                  }}</span>
                </div>
              </div>
            </div>
            <div
              class="item1"
              style="
                background-color: rgba(68, 215, 182, 0.06);
                margin-top: 16px;
              "
            >
              <div class="numBox">
                <img src="@/assets/images/companyProject/2.png" />
                <div class="dataBox">
                  <p class="num primaryText3">
                    {{ statisticsCount.presencecount.totalPerson }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.leftBlock1.Block2.text2") }}
                  </p>
                </div>
              </div>
            </div>
            <div class="item2">
              <div class="itemInner">
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block3.itemInner1")
                  }}<span class="primaryText">{{
                    statisticsCount.presencecount.glPersonTotal
                  }}</span>
                </div>
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block3.itemInner2")
                  }}<span class="primaryText">{{
                    statisticsCount.presencecount.lwPersonTotal
                  }}</span>
                </div>
              </div>
              <div class="itemInner">
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block3.itemInner3")
                  }}<span class="primaryText">{{
                    statisticsCount.presencecount.jfGlPersonTotal
                  }}</span>
                </div>
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block3.itemInner4")
                  }}<span class="primaryText">{{
                    statisticsCount.presencecount.jlGlPersonTotal
                  }}</span>
                </div>
              </div>
              <div class="itemInner">
                <div class="numItem">
                  {{ $t("message.firmProject.leftBlock1.Block3.itemInner5")
                  }}<span class="primaryText">{{
                    statisticsCount.presencecount.yfGlPersonTotal
                  }}</span>
                </div>
                <div class="numItem">
                  在场临时人员<span class="primaryText">{{
                    statisticsCount.presencecount.lsPersonTotal
                  }}</span>
                </div>
                <!-- <div class="numItem">
                                    {{$t('message.firmProject.leftBlock1.Block3.itemInner6')}}<span class="primaryText">{{statisticsCount.presencecount.totalPerson}}</span>
                                </div> -->
              </div>
            </div>
            <div class="numBoxContainer">
              <div class="numBox">
                <img src="@/assets/images/companyProject/3.png" />
                <div class="dataBox">
                  <p class="num primaryText">
                    {{ statisticsCount.workercount.totalPerson }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.leftBlock1.Block3.numBox1") }}
                  </p>
                </div>
              </div>
              <div class="numBox">
                <img src="@/assets/images/companyProject/4.png" />
                <div class="dataBox">
                  <p class="num" style="color: #f67f51">
                    {{ statisticsCount.workercount.lsPersonTotal }}
                  </p>
                  <!-- <p class="text">{{$t('message.firmProject.leftBlock1.Block3.numBox2')}}</p> -->
                  <p class="text">临时人员数</p>
                </div>
              </div>
            </div>
            <div class="numBoxContainer">
              <div class="numBox">
                <img
                  src="@/assets/images/longguang/5.png"
                  v-if="company == 'longguang'"
                />
                <img src="@/assets/images/companyProject/5.png" v-else />
                <div class="dataBox">
                  <p class="num primaryText3">
                    {{
                      (
                        (isNaN(
                          statisticsCount.workercount.manPersonTotal /
                            (statisticsCount.workercount.womanPersonTotal +
                              statisticsCount.workercount.manPersonTotal)
                        )
                          ? 0
                          : statisticsCount.workercount.manPersonTotal /
                            (statisticsCount.workercount.womanPersonTotal +
                              statisticsCount.workercount.manPersonTotal)) * 100
                      ).toFixed(2)
                    }}%
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.leftBlock1.Block3.numBox3") }}
                  </p>
                </div>
              </div>
              <div class="numBox">
                <img
                  src="@/assets/images/longguang/6.png"
                  v-if="company == 'longguang'"
                />
                <img src="@/assets/images/companyProject/6.png" v-else />
                <div class="dataBox">
                  <p class="num" style="color: #7851f6">
                    {{ statisticsCount.currentMonthEducationPerson }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.leftBlock1.Block3.numBox4") }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分布地图/宣传视频 -->
        <div class="whiteBlock centerBlock">
          <div class="blockInner">
            <div class="tabBox">
              <ul>
                <li
                  :class="mapTabIndex ? 'active' : ''"
                  @click="change(1)"
                >
                  分布地图
                </li>
                <li
                  :class="mapTabIndex ? '' : 'active'"
                  @click="change(0)"
                >
                  宣传视频
                </li>
              </ul>
            </div>
            <el-button
              v-show="
                mapTabIndex == 0 &&
                $store.state.userInfo.propagateFile &&
                $store.state.userInfo.propagateFile != '-1'
              "
              type="danger"
              size="mini"
              class="deleteBtn"
              @click="saveOrDeleteVideo(-1)"
              >删除视频</el-button
            >
            <div class="mapContainer" v-show="mapTabIndex===0">
              <video
                v-if="
                  $store.state.userInfo.propagateFile &&
                  $store.state.userInfo.propagateFile != '-1'
                "
                :src="
                  $store.state.FILEURL + $store.state.userInfo.propagateFile
                "
                width="100%"
                height="100%"
                autoplay
                controls
                loop
              ></video>
              <div class="placeholderBox" v-else>
                <img
                  src="@/assets/images/longguang/noData.png"
                  alt=""
                  srcset=""
                  v-if="company == 'longguang'"
                />
                <img src="@/assets/images/noData.png" alt="" srcset="" v-else />
                <p>
                  {{ $t("message.videoManage.empty") }},
                  <el-upload
                    style="display: inline-block"
                    class="upload-demo"
                    :action="$store.state.UPLOADURL"
                    :on-success="(file) => handleSuccess(file, 1)"
                    :on-error="(file) => handleError(file, 1)"
                    :beforeUpload="(file) => handleBeforeUpload(file, 1)"
                    name="files"
                    :show-file-list="false"
                  >
                    <span>点我上传</span>
                  </el-upload>
                </p>
              </div>
            </div>

            <div class="mapContainer" v-show="mapTabIndex===1">
              <div class="mapBack" v-if="showMapBack" @click="goBack">
                <i class="el-icon-arrow-left"></i>
              </div>
              <div class="mapTitle" v-if="backArr.length != 0">
                {{ backArr[backArr.length - 1].name }}
              </div>
              <div class="selectContainer">
                <div
                  class="selectBox"
                  @click="showMapDialog = !showMapDialog"
                  v-show="backArr.length == 1"
                >
                  城市列表
                  <i v-show="!showMapDialog" class="el-icon-arrow-up"></i>
                  <i v-show="showMapDialog" class="el-icon-arrow-down"></i>
                </div>
                <div
                  class="selectBox"
                  @click="showMapDialog = !showMapDialog"
                  v-show="backArr.length == 2"
                >
                  项目列表
                  <i v-show="!showMapDialog" class="el-icon-arrow-up"></i>
                  <i v-show="showMapDialog" class="el-icon-arrow-down"></i>
                </div>
                <div class="selectContent" v-show="showMapDialog">
                  <vue-scroll style="height: 100%">
                    <div
                      class="selectItem"
                      @click="mapJumpToNext(index)"
                      v-for="(item, index) in mapData"
                      :key="index"
                    >
                      <p class="title">{{ item.name }}</p>
                      <div class="datas">
                        <div class="numBox2">
                          <p>{{ item.videoNum }}</p>
                          <p>视频数</p>
                        </div>
                        <div class="numBox2">
                          <p>{{ item.ufaceDevNum }}</p>
                          <p>门禁数</p>
                        </div>
                        <div class="numBox2" v-show="!item.projectName">
                          <p>{{ item.projectNum }}</p>
                          <p>项目数</p>
                        </div>
                      </div>
                    </div>
                  </vue-scroll>
                </div>
              </div>
              <div id="map" class="fullHeight"></div>
            </div>
          </div>
        </div>
        <!-- 项目概况 -->
        <div class="whiteBlock">
          <div class="blockInner">
            <div class="pageTitle">
              {{ $t("message.firmProject.rightBlock1.title") }}
            </div>
            <div class="statictisBox">
              <div class="numBox">
                <div class="dataBox" v-if="backArr.length < 3">
                  <p class="num primaryText">
                    {{ statisticsCount.projectcount.projectNum }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.rightBlock1.numBox1") }}
                  </p>
                </div>
                <div class="dataBox" v-else>
                  <!--                  bug100000-->
                  <p class="num primaryText">{{ mapData[0].households ||0}}</p>
                  <p class="text">
                    {{ $t("message.firmProject.rightBlock1.numBox3") }}
                  </p>
                </div>
              </div>
              <div class="numBox">
                <div class="dataBox" v-if="backArr.length < 3">
                  <p class="num primaryText3">
                    {{ statisticsCount.projectcount.saleAcreageTotal }}
                  </p>
                  <p class="text">销售总面积</p>
                </div>
                <div class="dataBox" v-else>
                  <p class="num primaryText3">
                    {{ mapData[0].projectAcreage }}
                  </p>
                  <!--                  在建总面积-->
                  <p class="text">
                    {{ $t("message.firmProject.rightBlock1.numBox2") }}
                  </p>
                </div>
              </div>
            </div>
            <div class="chart" ref="projectChart"></div>
          </div>
        </div>
      </div>
      <div class="bottom blockBox">
        <!-- 年龄结构 -->
        <div class="whiteBlock">
          <div class="blockInner">
            <div class="pageTitle">
              {{ $t("message.firmProject.bottomBlock1.title") }}
            </div>
            <div class="statictisBox">
              <div class="numBox">
                <div class="dataBox">
                  <p class="num primaryText">
                    {{ statisticsCount.presencecount.avgage.toFixed(0) }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.bottomBlock1.numBox1") }}
                  </p>
                </div>
              </div>
              <div class="numBox">
                <div class="dataBox">
                  <p class="num primaryText3">
                    {{ statisticsCount.workercount.avgage.toFixed(0) }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.bottomBlock1.numBox2") }}
                  </p>
                </div>
              </div>
            </div>
            <div class="chart" ref="ageChart"></div>
          </div>
        </div>
        <!-- 设备在线统计 -->
        <div class="whiteBlock centerBlock">
          <div class="blockInner">
            <div class="pageTitle">
              {{ $t("message.firmProject.bottomBlock2.title") }}
            </div>
            <div class="statictisBox big">
              <div class="numBox">
                <div class="dataBox">
                  <p class="num" style="color: #f67f51">
                    {{ statisticsCount.devcount.videoNum }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.bottomBlock2.numBox1") }}
                  </p>
                </div>
              </div>
              <div class="numBox">
                <div class="dataBox">
                  <p class="num primaryText">
                    {{ statisticsCount.devcount.ufaceDevNum }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.bottomBlock2.numBox2") }}
                  </p>
                </div>
              </div>
              <div class="numBox">
                <div class="dataBox">
                  <p class="num primaryText3">
                    {{ statisticsCount.devcount.environmentDevNum }}
                  </p>
                  <p class="text">
                    {{ $t("message.firmProject.bottomBlock2.numBox3") }}
                  </p>
                </div>
              </div>
            </div>
            <div class="chart" ref="devChart"></div>
          </div>
        </div>
        <!-- 安全分析 -->
        <div class="whiteBlock">
          <div class="blockInner">
            <div class="pageTitle">
              {{ $t("message.firmProject.bottomBlock3.title") }}
            </div>
            <div
              class="statictisBox"
              style="margin: 5px 0 10px; font-size: 14px"
            >
              <p style="margin-right: 50px">
                {{ $t("message.firmProject.bottomBlock3.numBox1") }}：<span
                  class="primaryText"
                  >{{ eduPersonTotal }}</span
                >{{ $t("message.firmProject.bottomBlock3.people") }}
              </p>
              <p>
                {{ $t("message.firmProject.bottomBlock3.numBox2") }}：<span
                  class="primaryText"
                  >{{
                    (
                      (isNaN(
                        eduPersonTotal / statisticsCount.workercount.totalPerson
                      )
                        ? 0
                        : eduPersonTotal /
                          statisticsCount.workercount.totalPerson) * 100
                    ).toFixed(2)
                  }}%</span
                >
              </p>
            </div>
            <!-- <div class="safeBtns">
                            <el-button type="primary" size="mini">安全培训统计</el-button>
                            <el-button type="info" size="mini">安全培训统计</el-button>
                        </div> -->
            <div
              class="chart"
              ref="safeChart"
              style="height: calc(100% - 50px)"
            ></div>
          </div>
        </div>
      </div>
    </vue-scroll>
    <areaTree :videoType="0"></areaTree>
  </div>
</template>
<script>
import {
  getComapnyStatisticsListApi,
  getWorkerStatisticsCountApi,
  editCompanyBySnApi,
  getProjectDevStatisticsCountApi,
  selectWorkerSafeEducationStatisticsApi,
  selectWorkerBlacklistStatisticsApi,
} from "@/assets/js/api/company/project";
import {
  getProjectModuleList,
  getAllModuleApi,
} from "@/assets/js/api/jxjadmin.js";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
import areaTree from "@/components/areaTree";
import echarts from 'echarts4';;

export default {
  components: { areaTree },
  data() {
    return {
      mapObj: null,
      mapName: "",
      mapData: [],
      backArr: [],
      searchsn: "",
      showMapDialog: false,
      showMapBack: false,
      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,
        },
      },
      mapTabIndex: 1,
      fullscreenLoading: null,
      eduPersonTotal: 0,
      company: "",
    };
  },
  watch: {
    "$store.state.mapBackArr": function () {
      this.initData();
    },
  },
  created() {
    this.company = COMPANY;

    this.$store.commit("setIsShowBackIndex", false);
  },
  mounted() {
    
    this.initMap();
    //获取地图数据
    this.initData(true);
    // this.getAllModule();
  },
  methods: {
    //地图/视频切换
    change(index){
      console.log('切换的索引',index);
      this.mapTabIndex=index
    },
    //安全分析
    getSafeData() {
      selectWorkerSafeEducationStatisticsApi({ sn: this.searchsn }).then(
        (res) => {
          console.log('培训学校',res)
          var xData = [],
            yData1 = [],
            yData2 = [];
          if (res.result) {
            this.eduPersonTotal = res.result.totalEducationPerson;
            var arr = res.result.list;
            arr.forEach((element) => {
              xData.push(element.name);
              yData1.push(element.num);
            });
          }
          selectWorkerBlacklistStatisticsApi({ sn: this.searchsn }).then(
            (res) => {
              if (res.result) {
                var arr = res.result.list;
                arr.forEach((element) => {
                  if (xData.length == 0) {
                    xData.push(element.name);
                  }
                  yData2.push(element.num);
                });
              }
              this.createdSafeCharts(xData, yData1, yData2);
            }
          );
        }
      );
    },
    //设备在线统计
    getDevCountStatictis() {
      getProjectDevStatisticsCountApi({ sn: this.searchsn }).then((res) => {
        console.log('设备在线统计',res.result.videoList)
        if (res.result) {
          var arr3 = res.result.environmentList;
          var arr2 = res.result.ufaceList;
          var arr1 = res.result.videoList;
          console.log('arr1数据',arr1);
          arr1.forEach((element, index) => {
            arr1[index].value1 = (element.devOnlineNum / element.devNum) * 100;
            arr1[index].value2 =(arr2[index].devOnlineNum / arr2[index].devNum) * 100;
            if(arr1[index].value3){
              arr1[index].value3 =(arr3[index].devOnlineNum / arr3[index].devNum) * 100;
            }else{
              arr1[index].value3=0
            }
            // setTimeout(()=>{
            //   arr1[index].value3 =(arr3[index].devOnlineNum / arr3[index].devNum?(arr3[index].devOnlineNum / arr3[index].devNum:0) * 100;

            // },2000)
            console.log(' arr1[index].value3', arr1[index].value3);

            arr1[index].name = element.queryTime;
          });
          console.log(arr1);
          this.createDevChart(arr1);
        } else {
          this.createDevChart([]);
        }
      });
    },
    //统计企业下项目各人员统计
    getWorkerStatisticsCount() {
      getWorkerStatisticsCountApi({ sn: this.searchsn }).then((res) => {
        console.log('统计企业下项目各人员',res);
        this.statisticsCount = res.result;
        this.createProjectChart();
        this.createdAgeCharts();

      });
    },
    //获取所有企业下区域数据
    loadData(type) {
      //type：true代表第一调用
      // console.log('type,',type)
      getComapnyStatisticsListApi({
        sn: this.searchsn,
      }).then((res) => {
        this.mapData = res.result.companyList
          ? res.result.companyList
          : res.result.projectList;

        if (type) {
          // this.showMapBack=false
          this.backArr = [];
          // if(this.$store.state.userInfo.accountType==4){
          if (res.result.firstCompany) {
            this.backArr.push({
              name: res.result.firstCompany.companyName,
              sn: res.result.firstCompany.companySn,
            });
          }
          if (res.result.parentCompany) {
            this.backArr.push({
              name: res.result.parentCompany.companyName,
              sn: res.result.parentCompany.companySn,
            });
          }
          // }
          // if(this.$store.state.userInfo.accountType==3||this.$store.state.userInfo.accountType==4){
          if (res.result.companyInfo) {
            this.backArr.push({
              name: res.result.companyInfo.companyName,
              sn: res.result.companyInfo.companySn,
            });
          }
          // }
          if (
            (this.backArr.length == 0 &&
              this.$store.state.userInfo.accountType == 2) ||
            (this.backArr.length == 1 &&
              this.$store.state.userInfo.accountType == 3) ||
            (this.backArr.length == 2 &&
              this.$store.state.userInfo.accountType == 4) ||
            (this.backArr.length == 3 &&
              this.$store.state.userInfo.accountType == 7)
          ) {
            this.showMapBack = false;
          } else {
            this.showMapBack = true;
          }
          this.$store.commit("setMapBackArr", this.backArr);
        }
        if (this.mapData.length > 0) {
          this.mapObj.clearMap();
          this.setAreaMarker();
        } else {
          this.$message("该区域下没有数据！");
        }
      });
    },
    initData(type) {
      console.log('执行',720);
      this.backArr = this.$store.state.mapBackArr;
      // 
      if (this.backArr.length > 0) {
        this.searchsn = this.backArr[this.backArr.length - 1].sn;
      } else {
        switch (this.$store.state.userInfo.accountType) {
          case 2:
            this.searchsn = this.$store.state.userInfo.headquartersSn;
            break;
          case 3:
            this.searchsn = this.$store.state.userInfo.sn;
            break;
          case 4:
            this.searchsn = this.$store.state.userInfo.sn;
            break;
          case 7:
            this.searchsn = this.$store.state.userInfo.sn;
            break;
        }
      }
      if (
        (this.backArr.length == 0 &&
          this.$store.state.userInfo.accountType == 2) ||
        (this.backArr.length == 1 &&
          this.$store.state.userInfo.accountType == 3) ||
        (this.backArr.length == 2 &&
          this.$store.state.userInfo.accountType == 4) ||
        (this.backArr.length == 3 &&
          this.$store.state.userInfo.accountType == 7)
      ) {
        this.showMapBack = false;
      } else {
        this.showMapBack = true;
      }
      if (this.backArr.length == 4) {
        this.getProjectDetail();
      } else {
        this.loadData(type);
      }
      this.getWorkerStatisticsCount();
      this.getDevCountStatictis();
      this.getSafeData();
    },
    //获取项目详细
    getProjectDetail() {
      let data = {
        projectSn: this.searchsn,
      };
      getProjectDetail(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            console.log(res.result);
            this.mapData = [res.result];
            this.mapObj.clearMap();
            this.setAreaMarker();
          }
        }
      });
    },
    initMap() {
      //地图加载
      this.mapObj = new AMap.Map("map", {
        resizeEnable: true,
      });
    },
    goBack() {
      // 
      if (this.backArr.length == 1) {
        this.backArr = [];
      } else {
        this.backArr = this.backArr.splice(0, this.backArr.length - 1);
      }
      this.$store.commit("setMapBackArr", this.backArr);
      // this.initData()
    },
    setAreaMarker() {
      this.mapObj.clearMap();
      var _this = this;
      this.mapData.forEach((element, index) => {
        var marker = new AMap.Marker({
          position: [element.longitude, element.latitude],
          icon: new AMap.Icon({
            image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            size: new AMap.Size(230, 43), //图标大小
            imageSize: new AMap.Size(230, 43),
          }),
        });
        var htmls = "";
        if (!element.projectName) {
          htmls = `<div class='datas'>
                            <p class='num'>${
                              element.projectNum
                            }</p><p class='text'>${this.$t(
            "message.firmProject.marker.projectsNum"
          )}</p>
                        </div>`;
        }
        marker.setLabel({
          offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
          content: `<div class='mapInfo'>
                                       <div class='areaName datas'>${
                                         element.name
                                       }</div>${htmls}
                                            <div class='datas'><p class='num'>${
                                              element.videoNum
                                            }</p>
                                            <p class='text'>${this.$t(
                                              "message.firmProject.marker.videoNum"
                                            )}</p>
                                            </div>
                                            <div class='datas'><p class='num'>${
                                              element.ufaceDevNum
                                            }</p>
                                            <p class='text'>${this.$t(
                                              "message.firmProject.marker.guardNum"
                                            )}</p>
                                       </div>
                                   </div>`,
          direction: "center", //设置文本标注方位
        });
        AMap.event.addListener(marker, "click", function (e) {
          _this.mapJumpToNext(index);
          //得到的数据
        });
        marker.setMap(this.mapObj);
        this.mapObj.setFitView();
      });
      // this.$nextTick(() => {
      //     setTimeout(() => {
      //         var infoList = document.getElementsByClassName('mapInfo')
      //         // console.log('添加点击marker事件',infoList)
      //         infoList.forEach((element, index) => {
      //             // console.log(element)
      //             // element.removeEventListener("click",_this.mapJumpToNext(index),false);
      //             element.addEventListener('click', function () {
      //                 console.log('点击marker',index)
      //                 _this.mapJumpToNext(index)
      //             })
      //             // element.addEventListener('click', _this.mapJumpToNext(index))
      //         });
      //     }, 1000)
      // })
    },
    // 地图跳转到下一级
    mapJumpToNext(index) {
      console.log("test1");
      var _this = this;
      if (_this.mapData[index].list) {
        console.log("test2");
        var json = {
          sn: _this.mapData[index].companySn,
          name: _this.mapData[index].name,
        };
        _this.backArr.forEach(element=>{
            if(element.name==json.name){
                return
            }
        })
        _this.backArr.push(json);
        _this.$store.commit("setMapBackArr", _this.backArr);
        _this.showMapDialog = false;
        _this.initData()
      } else {
        console.log("test3");
        if (_this.mapData[index].projectName && _this.backArr.length < 3) {
          console.log("test4");
          var json = {
            sn: _this.mapData[index].projectSn,
            name: _this.mapData[index].name,
          };
          _this.backArr.forEach(element=>{
              if(element.name==json.name){
                  return
              }
          })
          _this.backArr.push(json);
          _this.$store.commit("setMapBackArr", _this.backArr);
          _this.showMapDialog = false;
          _this.initData()
        } else {
          _this.$message("该区域下没有数据！");
        }
      }
    },
    createDevChart(echartData) {
      let that = this;
      let devChart = echarts.init(this.$refs.devChart);
      // let bgColor = "#fff";
      let color =
        that.company == "longguang"
          ? ["#4378D8", "#1AA388",'#BC5D12',"#FF515A", "#8B5CFF", "#00CA69"]
          : ["#5181F6", "#00DBB6", "#F67F51", "#FF515A", "#8B5CFF", "#00CA69"];
      var symbolSize = 10;
      // let echartData = [{
      //     name: "10-01",
      //     value1: 90,
      //     value2: 85,
      //     value3: 70
      // },
      //     {
      //         name: "10-02",
      //         value1: 92,
      //         value2: 87,
      //         value3: 77
      //     },
      //     {
      //         name: "10-03",
      //         value1: 95,
      //         value2: 88,
      //         value3: 74
      //     },
      //     {
      //         name: "10-04",
      //         value1: 89,
      //         value2: 83,
      //         value3: 72
      //     },
      //     {
      //         name: "10-05",
      //         value1: 88,
      //         value2: 80,
      //         value3: 70
      //     },
      //     {
      //         name: "10-06",
      //         value1: 95,
      //         value2: 90,
      //         value3: 80
      //     },
      //     {
      //         name: "10-07",
      //         value1: 93,
      //         value2: 84,
      //         value3: 82
      //     },
      //     {
      //         name: "10-08",
      //         value1: 93,
      //         value2: 89,
      //         value3: 75
      //     }
      // ];

      let xAxisData = echartData.map((v) => v.name);
      //  ["1", "2", "3", "4", "5", "6", "7", "8"]
      let yAxisData1 = echartData.map((v) => v.value1?v.value1:0)
      // [100, 138, 350, 173, 180, 150, 180, 230]
      let yAxisData2 = echartData.map((v) => v.value2? v.value2:0)
      let yAxisData3 = echartData.map((v) => v.value3?v.value3:0)
      // [233, 233, 200, 180, 199, 233, 210, 180]
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      };

      var option = {
        // backgroundColor: bgColor,
        color: color,
        legend: {
          right: 10,
          top: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = "";
            params.forEach((v) => {
              // console.log(v)
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                              color[v.componentIndex]
                            };"></span>
                            ${v.seriesName}.${v.name}
                            <span style="color:${
                              color[v.componentIndex]
                            };font-weight:700;font-size: 18px">${v.value}</span>
                            %`;
            });
            return html;
          },
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
          // axisPointer: {
          //     type: 'shadow',
          //     shadowStyle: {
          //         color: '#ffffff',
          //         shadowColor: 'rgba(225,225,225,1)',
          //         shadowBlur: 5
          //     }
          // }
        },
        grid: {
          top: 35,
          right: 45,
          left: 15,
          bottom: 0,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#9fa2ad",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：%",
            axisLabel: {
              textStyle: {
                color: "#9fa2ad",
              },
            },
            nameTextStyle: {
              color: "#9fa2ad",
              fontSize: 12,
              lineHeight: 24,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(231, 233, 243, 0.5)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "视频设备",
            type: "line",
            smooth: true,
            // showSymbol: false,/
            symbolSize: symbolSize,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.76),
                shadowOffsetY: 8,
              },
            },
            data: yAxisData1,
          },
          {
            name: "人脸设备",
            type: "line",
            smooth: true,
            // showSymbol: false,
            symbolSize: symbolSize,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[1], 0.76),
                shadowOffsetY: 8,
              },
            },
            data: yAxisData2,
          },
          {
            name: "环境设备",
            type: "line",
            smooth: true,
            // showSymbol: false,
            symbolSize: symbolSize,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[2],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[2], 0.76),
                shadowOffsetY: 8,
              },
            },
            data: yAxisData3,
          },
        ],
      };
      devChart.setOption(option);
    },
    //年龄结构---图表
    createdAgeCharts() {
      var json1 = this.statisticsCount.presencecount;
      var json2 = this.statisticsCount.workercount;
      var arr1 = [
        json1.age18,
        json1.age18to25,
        json1.age25to35,
        json1.age35to45,
        json1.age45to60,
        json1.age60,
      ];
      var arr2 = [
        json2.age18,
        json2.age18to25,
        json2.age25to35,
        json2.age35to45,
        json2.age45to60,
        json2.age60,
      ];
      let that = this;
      let ageChart = echarts.init(this.$refs.ageChart);
      //   ageChart.clear();
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 0,
          right: 20,
          containLabel: true,
        },
        color:
          that.company == "longguang"
            ? ["#4378D8", "#1AA388"]
            : ["#5181F6", "#61D2B9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          align: "left",
          top: 5,
          left: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "18及以下",
              "18-25岁",
              "25-35岁",
              "35-45岁",
              "45-59岁",
              "60及以上",
            ],
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: "在职人数",
            type: "bar",
            data: arr2,
            barWidth: 14,
            barGap: 0.1,
          },
          {
            name: "在场人数",
            type: "bar",
            data: arr1,
            barWidth: 14,
          },
        ],
      };

      ageChart.setOption(option);
    },
    //安全分析---图表
    createdSafeCharts(xData, yData1, yData2) {
      let that = this;
      let safeChart = echarts.init(this.$refs.safeChart);
      //   ageChart.clear();
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 15,
          right: 20,
          containLabel: true,
        },
        legend: {
          show: true,
          align: "left",
          top: 0,
          left: 0,
          itemWidth: 13,
          itemHeight: 5,
          selectedMode: "single",
          textStyle: {
            color: "#9fa2ad",
          },
        },
        color:
          that.company == "longguang"
            ? ["#4378D8", "#1AA388"]
            : ["#5181F6", "#61D2B9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
              interval:0,
              formatter: function(value){
                  let valueTxt = ''
                  if (value.length > 4) {
                      valueTxt = value.substring(0,4) + '...'
                  } else {
                      valueTxt = value
                  }
                  return valueTxt
              }
            },
            
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: "安全培训统计",
            type: "bar",
            data: yData1,
            barWidth: 26,
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "rgba(42, 46, 63, 0.44)",
              // formatter:'{c}\n{c}%'
            },
          },
          {
            name: "不良人数统计",
            type: "bar",
            data: yData2,
            barWidth: 26,
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "rgba(42, 46, 63, 0.44)",
              // formatter:'{c}\n{c}%'
            },
          },
        ],
        dataZoom: [{
          type: 'slider',
          show: true, //flase直接隐藏图形
          xAxisIndex: [0],
          // left: '9%', //滚动条靠左侧的百分比
          bottom: 5,
          start: 0,//滚动条的起始位置
          end: 20, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
          height:6,
          showDetail: false,
          showDataShadow: false,
        }] 
      };
      safeChart.setOption(option);
    },
    createProjectChart() {
      let that = this;
      var arr = [];
      if (this.statisticsCount.projectcount) {
        var json = this.statisticsCount.projectcount;
        arr = [
          json.constructionStageCount1,
          json.constructionStageCount2,
          json.constructionStageCount3,
          json.constructionStageCount4,
          json.constructionStageCount5,
          json.constructionStageCount6,
          json.constructionStageCount7,
          json.constructionStageCount8,
          json.constructionStageCount9,
          json.constructionStageCount10,
          json.constructionStageCount11,
          json.constructionStageCount12,
          json.constructionStageCount13,
          json.constructionStageCount14,
          json.constructionStageCount15,
        ];
      }

      let projectChart = echarts.init(this.$refs.projectChart);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color: that.company == "longguang" ? ["#1AA388"] : ["#44D7B6"],
        grid: {
          left: "0",
          right: "20",
          bottom: "0",
          top: "20",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#9fa2ad",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: "#9fa2ad",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9",
            },
          },
          type: "category",
          axisTick: {
            show: false,
          },
          data: [
            "施工证获取",
            "土方开挖",
            "桩基",
            "垫层完成",
            "正负零",
            "工程达到预售条件",
            "主体施工",
            "主体封顶",
            "装饰装修",
            "竣工备案完成",
          ],
        },
        series: [
          {
            name: "项目数",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
              fontSize: 14,
            },
            barMinHeight: 18,
            barMaxWidth: 24,
            data: arr,
          },
        ],
      };
      projectChart.setOption(option);
    },
    // 文件上传 之前
    handleBeforeUpload(file, type) {
      console.log(file);
      let fileType = file.type.split("/")[0];
      if (fileType == "video") {
        this.fullscreenLoading = this.$loading({
          lock: true,
          text: "上传中，请稍等。。。",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        return true;
      } else {
        this.$message.error("请选择视频");
        return false;
      }
    },
    //上传失败
    handleError(file, type) {
      this.fullscreenLoading.close();
      this.$message.error("上传失败，请重试");
    },
    //上传成功
    handleSuccess(file, type) {
      if (file.code == 200 || file.status == "SUCCESS") {
        var url = file.data[0].imageUrl;
        this.saveOrDeleteVideo(url);
      }
      this.fullscreenLoading.close();
    },
    //保存或删除宣传视频
    saveOrDeleteVideo(url) {
      editCompanyBySnApi({
        companySn: this.$store.state.userInfo.headquartersSn,
        propagateFile: url,
      }).then((res) => {
        // this.$message.success("上传成功");
        var json = this.$store.state.userInfo;
        json.propagateFile = url == "-1" ? "" : url;
        this.$store.commit("setUserInfo", json);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.pageTitle {
  margin-bottom: 10px;
}

.blockBox {
  overflow: hidden;

  &.bottom {
    height: calc(100% - 550px);
    min-height: 230px;
    .chart {
      // height: 170px;
      height: calc(100% - 70px);
    }
  }

  &.top {
    margin-bottom: 20px;
    height: 530px;

    .centerBlock {
      height: 100%;
      position: relative;
      .blockInner {
        height: calc(100% - 30px);
      }
    }

    .chart {
      height: 423px;
    }
  }
  .whiteBlock {
    margin-right: 20px;
    width: 400px;
    float: left;
    height: 100%;
    &:last-child {
      margin-right: 0;
    }
  }

  .blockInner {
    padding: 15px;
    position: relative;
    height: calc(100% - 30px);
  }

  .centerBlock {
    width: calc(100% - 800px - 40px);
  }
}
.mapContainer {
  margin-top: 12px;
  height: calc(100% - 40px);
  position: relative;
}
.item1 {
  display: flex;
  align-items: center;
  padding: 6px;
}

.numBox {
  display: flex;
  align-items: center;

  .dataBox {
    margin-left: 12px;
  }

  .num {
    font-size: 20px;
  }

  .text {
    font-size: 14px;
    // color: #7C829E;
    opacity: 0.7;
  }
}

.todayAdd {
  text-align: center;
  margin-left: 20px;

  p:nth-child(1) {
    font-size: 17px;
  }

  p:nth-child(2) {
    font-size: 14px;
    // color: #7C829E;
    opacity: 0.7;
  }
}

.item2 {
  padding: 15px 10px;
  border-bottom: 1px dashed rgba(231, 233, 243, 1);

  .itemInner {
    display: flex;
    margin-bottom: 9px;

    &:last-child {
      margin-bottom: 0;
    }

    .numItem {
      flex: 1;
      // color: rgba(38, 45, 71, 0.6);
      opacity: 0.6;
      font-size: 14px;

      span {
        font-size: 15px;
        margin-left: 8px;
      }
    }
  }
}

.numBoxContainer {
  display: flex;
  align-items: center;
  margin-top: 15px;

  .numBox {
    min-width: 170px;
  }
}
/deep/ .amap-marker-label {
  background-color: @--color-primary;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  width: 230px;
  .mapInfo {
    background-color: @--color-primary;
    display: flex;
    padding: 5px 0;
    cursor: pointer;
    .datas {
      flex: 1;
      text-align: center;
      align-self: center;
    }
    .areaName {
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #ddd;
      padding: 0 5px;
      white-space: normal;
    }
  }
}

.mapTitle {
  top: 5px;
  font-size: 14px;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: rgb(255, 255, 255);
  border-radius: 3px;
  transform: translate(-50%);
  left: 50%;
  position: absolute;
  z-index: 9999;
}

.mapBack {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 22px;
  color: #ffffff;
  margin: 5px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.statictisBox {
  display: flex;
  align-items: center;
  margin: auto;
  justify-content: center;

  .numBox {
    margin-right: 87px;

    &:last-child {
      margin-right: 0 !important;
    }
  }

  &.big {
    .numBox {
      margin-right: 0;
      flex: auto;
      justify-content: center;
    }
  }

  .dataBox {
    text-align: center;
  }
}

.safeBtns {
  position: absolute;
  right: 15px;
  top: 15px;
}
.selectBox {
  position: absolute;
  right: 10px;
  top: 5px;
  color: @--color-primary;
  font-size: 12px;
  background-color: #fff;
  text-align: center;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  z-index: 9999;
  cursor: pointer;
}
.selectContent {
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  background-color: #fff;
  width: 230px;
  height: calc(100% - 60px);
  top: 50px;
  right: 10px;
  position: absolute;
  z-index: 9999;
  .selectItem {
    cursor: pointer;
  }
  .title {
    margin: 10px 0 5px;
    font-weight: 600;
  }
  .datas {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;
    height: 40px;
    background-color: #fbfbfb;
    .numBox2 {
      p:first-child {
        color: @--color-primary;
      }
    }
  }
}
.deleteBtn {
  position: absolute;
  top: 15px;
  right: 15px;
}
</style>
