<template>
  <div class="fullHeight dataBoardIndex">
    <div class="fullHeight aside">
      <div class="blockBox">
        <!-- 项目信息 -->
        <ProjectInfo :projectData="projectData" />
      </div>
      <div class="blockBox">
        <!-- 人员概况 -->
        <PersonOverview :statisticsCount="statisticsCount" />
      </div>
      <div class="blockBox">
        <!-- 智能设备 -->
        <smartDevices :totalCount="totalDevNum" :devices="deviceData">
          <div v-if="COMPANY == 'longguang'" style="width: 100%; height: 100%" class="echart2" ref="echart2"></div>
        </smartDevices>
      </div>
    </div>
    <div class="center fullHeight">
      <div class="top">
        <!--        <div class="blockTitle blockTitle3">宣传视频</div>-->
        <div class="optionListBox">
          <div
            class="optionList_item"
            @click="optionListIndex = item.index"
            :class="{
              selectOptionList_item: item.index == optionListIndex,
              selectOptionList_item2: item.index == optionListIndex && enabledProjectV2 == 4
            }"
            v-for="(item, index) in $t('message.companyDiagram.optionList')"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
        <video
          v-if="projectData.videoUrl && optionListIndex == 1"
          :src="$store.state.FILEURL + projectData.videoUrl"
          class="topInner videos"
          autoplay
          controls
          loop
        ></video>
        <div  @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false" v-if="optionListIndex == 2" class="imgBox">
          <el-upload
           
            style="position: absolute; left: 420px; top: 230px"
            :action="$store.state.UPLOADURL"
            :on-success="file => handleSuccessTwo(file, 1)"
            :on-error="file => handleError(file, 1)"
            :beforeUpload="file => handleBeforeUpload(file, 1)"
            name="files"
            :show-file-list="false"
          >
            <!-- 更换图片 -->
            <span  v-if="showChangeImg" style="border: 1px solid #ffffff; padding: 5px">{{ $t('message.companyDiagram.changeImg') }}</span>
          </el-upload>
          <img
            style="
              width: 686px;
              margin-left: 113px;
              margin-top: 16px;
              height: 345px;
            "
            :src="fileUrl + imgUrl"
            alt=""
          />
          <!--          <img style="width: 686px;;margin-left: 113px;margin-top: 16px;height: 430px" src="@/assets/images/aa5cd03a486a3faaeb9cf4b8d06405e.png" alt="">-->
        </div>
        <div class="placeholderBox placeholderBox2" v-if="projectData.videoUrl == ''">
          <img src="@/assets/images/noData3.png" alt="" srcset="" />
          <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>{{ $t('message.companyDiagram.uploadImg') }}</span>
            </el-upload>
          </p>
        </div>
        <el-upload
          v-if="projectData.videoUrl && optionListIndex == 1"
          class="changeVideoBox"
          :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 class="changeVideoBtn">{{ $t('message.companyDiagram.changeVideo') }}</span>
        </el-upload>
        <!-- <video src="http://183.95.84.34:18081/itbgp/file/loginBgVideo.mp4" class="topInner" controls loop></video> -->
      </div>
      <div class="bottom">
        <!-- 进度情况 -->
        <div v-if="enabledProjectV2 == 3" class="blockTitle blockTitle4"><i></i>{{ $t('message.companyDiagram.planStatus') }}</div>
        <div class="bottomInner">
          <div class="timeBox">
            <div class="blockTitle blockTitle2"><i></i>{{ $t('message.companyDiagram.countDown') }}</div>
            <div>
              <div class="timeInner">
                <!-- 项目总天数 -->
                <p>{{ $t('message.companyDiagram.projectDayNum') }}</p>
                <div class="bg1">
                  <!-- 天 -->
                  <span class="num">{{ projectData.totalProjectDay }}</span>
                  {{ $t('message.companyDiagram.day') }}
                </div>
              </div>
              <div class="timeInner">
                <!-- 项目剩余天数 -->
                <p>{{ $t('message.companyDiagram.projectResidueDay') }}</p>
                <div class="bg1">
                  <!-- 天 -->
                  <span class="num">{{ projectData.surplusDay }}</span>
                  {{ $t('message.companyDiagram.day') }}
                </div>
              </div>
            </div>
          </div>
          <div class="splitLine">
            <img src="@/assets/images/carOverview/line4.png" alt="" width="100%" />
          </div>
          <div class="stageContent">
            <!-- 里程碑 -->
            <div class="blockTitle blockTitle2"><i></i>{{ $t('message.companyDiagram.milestone') }}</div>
            <div class="stageBox">
              <vue-scroll :ops="ops" ref="stageScroll">
                <div
                  class="stageItem"
                  v-for="(item, index) in stageList"
                  :key="index"
                  :class="
                    projectData.constructionStage - 1 > index ? 'finish' : projectData.constructionStage - 1 == index ? 'ongoing' : ''
                  "
                >
                  <div class="statusImg"></div>
                  <p>{{ item.name }}</p>
                  <div class="line" v-show="stageList.length != index + 1"></div>
                </div>
              </vue-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fullHeight aside">
      <div class="blockBox">
        <!-- 环境监测 -->
        <div v-if="COMPANY == 'longguang' || enabledProjectV2 == 3" class="blockTitle">
          {{ $t('message.companyDiagram.environmentMonitor') }}
        </div>

        <div v-if="COMPANY == 'longguang' || enabledProjectV2 == 3" class="blockContent">
          <airQulityChart :show="false" :size="small" class="airQulityChart"></airQulityChart>
          <!-- 天气显示 -->
          <div style="overflow: hidden" class="weatherBox">
            <div class="weatherItem" v-for="(item, index) in weatherList" :key="index" v-if="index < 2">
              <p>
                <span>{{ item.day }}</span>
                <!-- <span>（{{ item.week }}）</span> -->
              </p>
              <div style="height: 7%"></div>
              <div class="imgBox">
                <img :src="item.url" />
              </div>
              <div style="height: 10%"></div>
              <p class="weather">{{ item.wea }}</p>
              <p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
              <div style="height: 6%"></div>
              <p>
                {{ $t('message.environmentalOverview.wind_power') }}
                {{ item.win_speed }}
              </p>
            </div>
          </div>
          <!-- 空气质量 -->
          <div class="airQuality">
            <div class="airQuality-item">
              <img src="@/assets/images/greenOverview/PM2.5@1x.png" alt="" />
              <div>
                <p>PM2.5</p>
                <p>{{ plantCap.pm25 ? plantCap.pm25 : '--' }}μg/m3</p>
              </div>
            </div>
            <div class="airQuality-item">
              <img src="@/assets/images/greenOverview/PM10@1x.png" alt="" />
              <div>
                <p>PM10</p>
                <p>{{ plantCap.pm10 ? plantCap.pm10 : '--' }}μg/m3</p>
              </div>
            </div>
            <div class="airQuality-item">
              <img src="@/assets/images/greenOverview/噪声@1x.png" alt="" />
              <div>
                <p>噪声</p>
                <p>{{ plantCap.noise ? plantCap.noise : '--' }}db</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 安全管理 -->
        <div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockTitle">
          {{ $t('message.companyDiagram.safeManage') }}
        </div>
        <div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockContent">
          <safeManage></safeManage>
          <!-- <div class="safeChart" ref="safeChart"></div> -->
        </div>
      </div>
      <!--      </div>-->
      <div class="blockBox">
        <!-- 质量管理 -->
        <div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockTitle">
          {{ $t('message.companyDiagram.qualityManage') }}
        </div>
        <!-- 设备报警 -->
        <div v-else class="blockTitle">
          {{ $t('message.companyDiagram.devAlarm') }}
        </div>
        <div class="blockContent">
          <!-- 质量管理 -->
          <!-- <div
            v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
            class="qulityChart"
            ref="qulityChart"
          ></div> -->
          <div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="descBox fullHeight">
            <qualityManage></qualityManage>
            <!-- 此处剪切了一部分 -->
          </div>
          <!-- 设备报警内容 -->
          <div class="attendance-cards2" v-else>
            <div class="attendance-cards-item">
              <div class="cards-item-left">
                <img src="../../../assets/images/longguang2/tower_crane.png" alt="" />
                <p>塔吊</p>
              </div>
              <div class="cards-item-right">
                <p class="p1">设备总数：{{ totalTowerDev }}</p>
                <p class="p2">今日报警数</p>
                <p class="p3">{{ totalDangerTowerDev }}</p>
              </div>
            </div>
            <div class="attendance-cards-item">
              <div class="cards-item-left">
                <img src="../../../assets/images/longguang2/elevator.png" alt="" />
                <p>升降机</p>
              </div>
              <div class="cards-item-right">
                <p class="p1">设备总数：{{ totalLifterDev }}</p>
                <p class="p2">今日报警数</p>
                <p class="p3">{{ totalDangerLifterDev }}</p>
              </div>
            </div>
            <div class="attendance-cards-item">
              <div class="cards-item-left">
                <img src="../../../assets/images/longguang2/env_monitoring.png" alt="" />
                <p>环境监测</p>
              </div>
              <div class="cards-item-right">
                <p class="p1">设备总数：{{ environmentDevNum }}</p>
                <p class="p2">今日报警数</p>
                <p class="p3">{{ environmentTotalAlarm }}</p>
              </div>
            </div>
            <div class="attendance-cards-item">
              <div class="cards-item-left">
                <img src="../../../assets/images/longguang2/video_monitoring.png" alt="" />
                <p>AI视频监测</p>
              </div>
              <div class="cards-item-right">
                <p class="p1">设备总数：{{ totalVideoDev }}</p>
                <p class="p2">今日报警数</p>
                <p class="p3">{{ videoAlarmNum }}</p>
              </div>
            </div>
          </div>
          <!--          <vue-scroll :ops="ops" style="width: 100%">-->
          <!-- <div v-else style="overflow:hidden;">
              <div
                      class="weatherItem"
                      v-for="(item, index) in weatherList"
                      :key="index"
                      v-if="index < 3"
              >
                <p>
                  <span>{{ item.day }}</span>
                </p>
                <div style="height: 10%"></div>
                <div class="imgBox">
                  <img :src="item.url" />
                </div>
                <div style="height: 10%"></div>
                <p class="weather">{{ item.wea }}</p>
                <p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
                <div style="height: 6%"></div>
                <p>
                  {{ $t("message.environmentalOverview.wind_power") }}
                  {{ item.win_speed }}
                </p>
              </div>
            </div> -->
          <!--          </vue-scroll>-->
        </div>
      </div>
      <div class="blockBox">
        <!-- 环境监测 -->
        <div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockTitle">
          {{ $t('message.companyDiagram.environmentMonitor') }}
        </div>
        <!-- 报警列表 -->
        <div v-else class="blockTitle">
          {{ $t('message.companyDiagram.alarmRecord') }}
        </div>
        <div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockContent">
          <!-- 环境监测 -->
          <environmentWatch :show="true" :size="small"></environmentWatch>
        </div>
        <div v-else class="blockContent alarmBlockContent">
          <vue-scroll>
            <!-- 报警列表内容 -->
            <div class="list_item" v-for="item in alarmList" :key="item.id" v-if="alarmList.length">
              <!-- <img :src="$store.state.FILEURL+item.imageUrl"  class="img" > --><!--  @click="bigImg($store.state.FILEURL+item.imageUrl) -->

              <el-image class="img_box" :src="$store.state.FILEURL + item.imageUrl" :preview-src-list="srcList"></el-image>

              <!-- <big-img  :imgSrc="$store.state.FILEURL+item.imageUrl" v-show="img" :img.sync='img'></big-img> -->
              <div class="box">
                <el-tooltip
                  effect="dark"
                  :content="item.projectName"
                  placement="left-start"
                  :disabled="item.projectName.length >= 18 ? false : true"
                >
                  <div class="title">{{ item.projectName }}</div>
                </el-tooltip>
                <div class="type">
                  预警类型：<span>{{ item.alarmType }}</span>
                </div>
                <div class="address">
                  抓拍点：<span>{{ item.location }}</span>
                </div>
                <div class="shebei">
                  抓拍设备：<span>{{ item.hardwareName }}</span>
                </div>
                <div class="date">
                  预警时间时间：<span>{{ item.createTime }}</span>
                </div>
              </div>
            </div>
            <div class="placeholderBox placeholderBox2" v-if="alarmList.length == 0">
              <img src="@/assets/images/noData3.png" alt="" srcset="" />
              <!-- 暂无数据 -->
              <p>{{ $t('message.companyDiagram.noData') }}</p>
            </div>
          </vue-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts4'
const echarts5 = require('echarts')
import safeManage from './homePage/safeManage'
import qualityManage from './homePage/qualityManage'
import airQulity from './components/airQulity'
import smartDevices from './homePage/smartDevices'
import environmentWatch from './homePage/environmentWatch.vue'
import airQulityChart from '@/components/chart/airQulityChart'
import { getWorkerStatisticsCountApi } from '@/assets/js/api/company/project'
import { getProjectDetail, editProjectInfo } from '@/assets/js/api/baseInfo.js'
import {
  getAllTowerDangerInfo,
  getAllLifterDangerInfo,
  getEnvironmentInfo,
  getAiVideoInfo,
  getAIDangerList
} from '@/assets/js/api/dataBoard'
import {
  getWeatherDataApi,
  selectNewEnvironmentAlarmListApi,
  getRealTimeDustNoiseDataApi,
  environmentDevList
} from '@/assets/js/api/environmentManage'
import { eidtProjectShowConfig, queryBySnData } from '@/assets/js/api/projectSummary.js'
import ProjectInfo from './homePage/projectInfo'
import PersonOverview from './homePage/personOverview'

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

    this.getWorkerStatisticsCount(1)
    this.loadWeather()
    this.getAlarmList()
    this.getAlarmInfor()
    this.getDevList()
  },
  methods: {
    createdEchart2() {
      let chart2 = echarts.init(this.$refs['echart2'])
      this.chart2 = chart2
      chart2.clear()
      this.option2 = {
        grid: {
          top: '30px',
          left: '80px',
          right: '15px',
          bottom: '30px'
        },
        tooltip: {
          trigger: 'axis',
          // 取消鼠标悬浮时显示的中线
          axisPointer: { type: 'none' }
        },
        // ['特殊设备','人数设备','特种设备','环境设备']
        xAxis: [
          {
            type: 'value',
            // '设备数'
            name: this.$t('message.companyDiagram.devNum'),
            show: false,
            splitLine: {
              lineStyle: { color: '#fff', type: 'dashed' }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: { color: '#fff', type: 'solid' }
            },
            axisLabel: { color: '#fff' }
          },
          { type: 'value' }
        ],
        yAxis: {
          type: 'category',
          data: this.$t('message.companyDiagram.echarTitleData'),
          axisLine: {
            lineStyle: { color: '#fff', type: 'dashed' },
            show: false
          },
          axisTick: { show: false },
          axisLabel: { color: '#fff', fontSize: 12 }
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#4378d8', '#a65d23', '#913211', '#199d83']
                  return colorList[params.dataIndex]
                }
              }
            },
            name: this.$t('message.companyDiagram.devNum'),
            data: [
              this.statisticsCount.devcount.videoNum,
              this.statisticsCount.devcount.ufaceDevNum,
              this.statisticsCount.devcount.lifterDevNum + this.statisticsCount.devcount.towerDevNum,
              this.statisticsCount.devcount.environmentDevNum
            ],
            type: 'bar',
            barWidth: 20 //柱图宽度
          }
        ]
      }
      chart2.setOption(this.option2)
    },
    getAlarmList() {
      let data = {
        projectSn: this.$store.state.projectSn
      }
      // selectNewEnvironmentAlarmListApi(data).then((res) => {
      //   if (res.code == 200) {
      //     this.alarmList = res.result;
      //     console.log(res.result);
      //   }
      // });
    },
    loadWeather() {
      var _this = this
      getWeatherDataApi({ cityid: '' }).then(res => {
        console.log(res)
        var json = JSON.parse(res.result)
        var list = json.data
        console.log(json)
        //
        list.forEach((element, index) => {
          // element.week=getWeek(element.date)
          // element.date = element.date.substring(5,element.date.length)
          element.url = require('@/assets/images/weather/' + element.wea_img + '.png')
          this.weatherList.push(element)
        })
      })
    },
    //获取环境设备列表--环境监测实时数据--下拉
    getDevList() {
      console.log(22222222222222)
      environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
        // console.log('列表', result)
        console.log(result)
        if (result.result.length > 0) {
          this.currentDevDetail = result.result[0]
          this.getRealTimeDustNoiseData()
        }
      })
    },
    // 获取环境监测空气质量
    getRealTimeDustNoiseData() {
      let data = {
        deviceId: this.currentDevDetail.deviceId,
        projectSn: this.$store.state.projectSn
      }
      console.log(data)
      getRealTimeDustNoiseDataApi(data).then(res => {
        console.log(res)
        if (res.code == 200) {
          console.log(res.result)
          if (res.result) {
            this.plantCap = res.result
          } else {
            this.plantCap = {
              crc: '--',
              humidity: '--',
              noise: '--',
              plateHumidity: '--',
              plateTemperature: '--',
              pm10: '--',
              pm25: '--',
              pressure: '--',
              temperature: '--',
              tsp: '--',
              voltage: '--',
              winddirectionName: '--',
              windspeed: '--'
            }
          }
          // this.createCenterChart();
        }
      })
    },
    // 获取设备报警数据
    getAlarmInfor() {
      let data = {
        sn: this.$store.state.projectSn
      }
      // 获取塔吊报警数据
      getAllTowerDangerInfo(data).then(res => {
        if (res.code === 200) {
          let { result } = res
          this.totalTowerDev = result.devCount.devNum
          this.totalDangerTowerDev = result.towerAlarmCount
        }
      })
      // getAiVideoInfo
      // 获取升降机报警数据
      getAllLifterDangerInfo(data).then(res => {
        if (res.code === 200) {
          let { result } = res
          this.totalLifterDev = result.devCount.devNum
          this.totalDangerLiferDev = result.lifterAlarmCount
        }
      })
      // 获取环境监测报警数据
      getEnvironmentInfo(data).then(res => {
        if (res.code === 200) {
          let { result } = res
          this.environmentDevNum = result.devTotal.devNum
          this.environmentTotalAlarm = result.alarmTotal.totalAlarm
        }
      })
      // 获取AI设备报警数据
      getAiVideoInfo(data).then(res => {
        console.log(res)
        if (res.code === 200) {
          let { result } = res
          this.totalVideoDev = result.totalVideoDev
          this.videoAlarmNum = result.alarmNum
        }
      })
      // 获取报警列表数据
      getAIDangerList(data).then(res => {
        if (res.code === 200) {
          let { result } = res
          let type = ['烟感', '明火', '人员倒地', '未戴安全帽', '区域入侵', '越界入侵', '人员聚集衣', '反光衣', '裸土覆盖']
          this.alarmList = result.slice(0, 3).map(x => {
            return {
              createTime: x.createTime,
              hardwareName: x.hardwareName,
              id: x.id,
              imageUrl: x.imageUrl,
              location: x.location,
              projectName: x.projectName,
              alarmType: type[x.alarmType - 1]
            }
          })
          result.slice(0, 3).forEach(x => {
            this.srcList.push(`${this.$store.state.FILEURL}${x.imageUrl}`)
          })
          console.log(this.alarmList)
          console.log(this.srcList)
        }
      })
    },
    //获取项目详情
    getDataDateils() {
      let data = {
        projectSn: this.$store.state.projectSn
      }
      console.log('当前的参数', data)
      getProjectDetail(data).then(res => {
        if (res.code == 200) {
          this.projectData = res.result
          console.log('projectData', this.projectData)
          if (parseInt(this.projectData.constructionStage) > 4) {
            this.$refs['stageScroll'].scrollTo({ x: (this.projectData.constructionStage - 4) * 230 }, 500)
          }
        }
      })
    },
    //统计企业下项目各人员统计
    getWorkerStatisticsCount(type) {
      getWorkerStatisticsCountApi({ sn: this.$store.state.projectSn }).then(res => {
        console.log(res)
        this.statisticsCount = res.result
        console.log('----------------', this.statisticsCount)
        this.totalDevNum =
          this.statisticsCount.devcount.ufaceDevNum +
          this.statisticsCount.devcount.videoNum +
          this.statisticsCount.devcount.environmentDevNum +
          this.statisticsCount.devcount.towerDevNum +
          this.statisticsCount.devcount.lifterDevNum
        const device = this.statisticsCount.devcount
        this.deviceData = [
          { label: 'projectSummary.ufaceDevNum', value: device.ufaceDevNum },
          {
            label: 'projectSummary.environmentDevNum',
            value: device.environmentDevNum
          },
          { label: 'companyDiagram.videoDevNum', value: device.videoNum },
          { label: 'companyDiagram.towerDevNum', value: device.towerDevNum }
        ]
        if (type == 1) {
          this.createdEchart2()
        }
        clearInterval(this.interval1)
        this.interval1 = setTimeout(() => {
          this.getWorkerStatisticsCount()
        }, 5000)
      })
    },
    // 文件上传 之前
    handleBeforeUpload(file, type) {
      console.log(file)
      let fileType = file.type.split('/')[0]
      if (fileType == 'video' || fileType == 'image') {
        this.fullscreenLoading = this.$loading({
          lock: true,
          text: this.$t('message.companyDiagram.uploadHint'), // "上传中，请稍等。。。"
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        return true
      } else {
        this.$message.error(this.$t('message.companyDiagram.uploadHint2')) //"请选择正确的文件"
        return false
      }
    },
    //上传失败
    handleError(file, type) {
      this.fullscreenLoading.close()
      this.$message.error(this.$t('message.companyDiagram.uploadError')) //"上传失败，请重试"
    },
    //上传成功
    handleSuccess(file, type) {
      console.log('上传成功了吗', file)
      if (file.code == 200 || file.status == 'SUCCESS') {
        console.log(file)
        var url = file.data[0].imageUrl
        this.saveOrDeleteVideo(url)
      }
      this.fullscreenLoading.close()
    },

    handleSuccessTwo(file, type) {
      if (file.code == 200 || file.status == 'SUCCESS') {
        console.log(file)
        var url = file.data[0].imageUrl
        this.imgUrl = url
        this.saveEffectData(url)
      }
      this.fullscreenLoading.close()
    },
    //效果图 保存
    saveEffectData(url) {
      // let configValue = JSON.stringify(url);
      let data = {
        projectSn: this.$store.state.projectSn,
        showType: 3,
        showTitle: this.$t('message.companyDiagram.resultImg'), //'效果图'
        configValue: url
      }
      eidtProjectShowConfig(data).then(res => {
        if (res.code == 200) {
          this.getQueryBySnData()
        }
      })
    },
    getQueryBySnData() {
      queryBySnData({
        projectSn: this.$store.state.projectSn,
        showType: 3
      }).then(res => {
        console.log(this.fileUrl + this.imgUrl)
        this.imgUrl = res.result.configValue
      })
    },
    //保存或删除宣传视频
    saveOrDeleteVideo(url) {
      editProjectInfo({
        projectSn: this.$store.state.projectSn,
        videoUrl: url
      }).then(res => {
        this.$message.success(this.$t('message.companyDiagram.uploadSuccess')) //"上传成功"
        this.projectData.videoUrl = url
      })
    }
  }
}
</script>
<style lang="less" scoped>
.stageContent {
  height: 220px;
}
.weatherItem {
  display: inline-block;
  width: 101px;
  text-align: center;
  padding: 13px 5px;
  margin-top: -5px;
  height: 165px;
  margin-left: 12px;
  background: linear-gradient(rgba(5, 11, 59, 0.1), rgba(40, 109, 221, 0.1));
  &:nth-child(2n) {
    background: linear-gradient(rgba(40, 109, 221, 0.1), rgba(5, 11, 59, 0.1));
  }
  &:first-child {
    background: linear-gradient(rgba(5, 11, 59, 0.3), rgba(36, 100, 206, 0.3));
  }
  &:nth-child(2n) {
    background: linear-gradient(rgba(6, 248, 179, 0.06), rgba(21, 25, 33, 0.06));
  }
  &:first-child {
    background: linear-gradient(rgba(21, 25, 33, 0.12), rgba(6, 248, 179, 0.12));
  }
  .imgBox {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .weather {
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 3px;
  }
}
.optionListBox {
  display: flex;
  justify-content: center;
  .optionList_item {
    margin-right: 30px;
    box-sizing: border-box;
    text-align: center;
    padding-bottom: 5px;
    cursor: pointer;
  }
  .selectOptionList_item {
    border-bottom: 3px #2566d1 solid;
  }
  .selectOptionList_item2 {
    border-bottom: 3px #27a3e2 solid;
  }
}
.changeVideoBtn {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 3px 5px;
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  transform: translate(-50%, -50%);
}
.videos:hover + .changeVideoBox .changeVideoBtn,
.changeVideoBox:hover .changeVideoBtn {
  display: block;
}
.blockTitle4 {
  position: absolute !important;
  top: -10px !important;
  left: 50%;
  transform: translateX(-50%);
}

.airQulityChart {
  position: absolute !important;
  top: -5%;
  left: -28%;
}
.weatherBox {
  position: absolute;
  left: 167px;
  height: 75%;
  width: 80%;
  top: -5px;
}
.attendance-cards2 {
  width: 90%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  left: 10%;
  top: 8%;
  .attendance-cards-item {
    width: 50%;
    height: 40%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .cards-item-left {
      width: 65px;
      text-align: center;
      p {
        text-align: center;
        color: rgba(255, 255, 254, 100);
        font-size: 13px;
        margin-top: 5px;
      }
    }
    .cards-item-right {
      margin-left: 5px;
      p {
        line-height: 22px;
        color: rgba(255, 255, 254, 0.8);
        font-size: 15px;
        margin-left: 10px;
      }
      .p3 {
        color: #d94916;
        font-size: 20px;
      }
    }
  }
}
.list_item {
  width: 100%;
  display: flex;
  font-size: 12px;
  margin-top: 3%;
  color: rgba(255, 255, 255, 0.8);
  .title {
    width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 5px 0;
  }
  .title,
  .type,
  .address,
  .shebei,
  .date {
    margin: 4px 0;
  }
  :hover .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .img_box {
    width: 96px;
    margin-right: 10px;
  }
}
.airQuality {
  position: absolute;
  top: 80%;
  left: -1px;
  display: flex;
  width: 100%;
  justify-content: space-around;
  .airQuality-item {
    display: flex;
    font-size: 14px;
    img {
      width: 30px;
      height: 30px;
      margin-right: 9px;
      margin-top: 2px;
    }
  }
}
</style>
