<template>
  <div class="towerManage_box">
    <div style="width: 100%;height:100%" v-if="!isProject">
      <vue-scroll>
      <div class="top">
        <div class="dev_info">
          <div class="pageTitle">设备情况</div>
          <div class="dev_list">
            <div class="dev_item" @click="showDetail(1)">
              <img style="width: 36px;height: 36px" src="@/assets/images/towerManage/tower-icon.png">
              <span>塔机总数</span>
              <span>{{devInfo.devNum}}</span>
            </div>
            <div class="dev_item c2" @click="showDetail(2)">
              <img style="width: 45px;height: 36px"  src="@/assets/images/towerManage/wifi.png">
              <span>在线总数</span>
              <span>{{devInfo.devOnline}}</span>
            </div>
            <div class="dev_item c3" @click="showDetail(3)">
              <img style="width: 33px;height: 30px" src="@/assets/images/towerManage/collision-icon.png">
              <span>防碰撞数量</span>
              <span>{{devInfo.collideDevNum}}</span>
            </div>
            <div class="dev_item" @click="showDetail(4)">
              <img style="width: 45px;height: 28px" src="@/assets/images/towerManage/video-icon.png">
              <span>可视化数量</span>
              <span>{{devInfo.videoCount}}</span>
            </div>
          </div>
        </div>
        <div class="dev_info center_info">
          <div class="pageTitle">实时数据</div>
          <div class="realData_list">
            <div class="realData_item">
              <img style="width: 52px;height: 52px;margin-right: 27px" src="@/assets/images/towerManage/hook-icon.png"/>
              <div class="item_info">
                <p>今日吊次</p>
                <p @click="showDetail(5)" style="cursor: pointer;">{{hookTime.todayCycleNum}}次</p>
                <p><el-tooltip class="item" effect="light" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                    <div slot="content">环比增长速度=（本期数－上期数）÷ 上期数×100%</div>
                  </el-tooltip>日环比  <span :style="{'color': hookTime.ratio<0 ? '#F68153':'#44D7B6'}">{{hookTime.ratio}}%</span>
                  <img v-if="hookTime.ratio>=0" src="@/assets/images/towerManage/up-icon.png" />
                  <img v-else src="@/assets/images/towerManage/down-icon.png" />
                </p>
                <p><i class="el-icon-warning-outline"></i>{{hookTime.weeksCycleNum?'本周共'+hookTime.weeksCycleNum+'吊次':'本周无吊次'}}</p>
              </div>
              <div id="echart1" ref="echart1" style="width: 131px;height: 110px;"></div>
            </div>
            <div class="realData_item">
              <img style="width: 52px;height: 52px;margin-right: 27px" src="@/assets/images/towerManage/alarm-icon.png">
              <div class="item_info">
                <p>今日报警</p>
                <p @click="showDetail(6)" style="cursor: pointer;">{{alarmTime.todayAlarmNum}}次</p>
                <p><el-tooltip class="item" effect="light" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                    <div slot="content">环比增长速度=（本期数－上期数）÷ 上期数×100%</div>
                  </el-tooltip>日环比  <span :style="{'color': alarmTime.ratio<0 ? '#F68153':'#44D7B6'}">{{alarmTime.ratio}}%</span>
                <img v-if="alarmTime.ratio>=0" src="@/assets/images/towerManage/up-icon.png" />
                <img v-else src="@/assets/images/towerManage/down-icon.png" />
                </p>
                <p><i class="el-icon-warning-outline"></i>
                {{alarmTime.weeksAlarmNum ? '本周报警'+alarmTime.weeksAlarmNum+'次':'本周无报警'}}
                </p>
              </div>
              <div id="echart2" ref="echart2" style="width: 131px;height: 110px;"></div>
            </div>
            <div class="realData_item">
              <img style="width: 52px;height: 52px;margin-right: 27px" src="@/assets/images/towerManage/warming-icon.png">
              <div class="item_info">
                <p>今日违章</p>
                <p @click="showDetail(7)" style="cursor: pointer;">{{violationTime.violationNum}}次</p>
                <p><el-tooltip class="item" effect="light" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                    <div slot="content">环比增长速度=（本期数－上期数）÷ 上期数×100%</div>
                  </el-tooltip>日环比  <span :style="{'color': violationTime.ratio<0 ? '#F68153':'#44D7B6'}">{{violationTime.ratio}}%</span>
                <img v-if="violationTime.ratio>=0" src="@/assets/images/towerManage/up-icon.png" />
                <img v-else src="@/assets/images/towerManage/down-icon.png" />
                </p>
                <p><i class="el-icon-warning-outline"></i>
                {{violationTime.weeksViolationNum ? '本周违章'+violationTime.weeksViolationNum+'次':'本周无违章'}}
                
                </p>
              </div>
              <div id="echart3" ref="echart3" style="width: 131px;height: 110px;"></div>
            </div>
            <div class="realData_item">
              <img style="width: 52px;height: 52px;margin-right: 27px" src="@/assets/images/towerManage/echart-icon.png">
              <div class="item_info">
                <p>今日在线率</p>
                <p @click="showDetail(8)" style="cursor: pointer;">{{devOnlinCount.todayDevOnlineNum}}%</p>
                <p><el-tooltip class="item" effect="light" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                    <div slot="content">环比增长速度=（本期数－上期数）÷ 上期数×100%</div>
                  </el-tooltip>日环比  <span :style="{'color': devOnlinCount.ratio<0 ? '#F68153':'#44D7B6'}">{{devOnlinCount.ratio}}%</span>
                <img v-if="devOnlinCount.ratio>=0" src="@/assets/images/towerManage/up-icon.png" />
                <img v-else src="@/assets/images/towerManage/down-icon.png" />
                </p>
                <p><i class="el-icon-warning-outline"></i>{{devOnlinCount.weeksOnline ? "本周在线率"+devOnlinCount.weeksOnline+'%':'本周无在线'}}</p>
              </div>
              <div id="echart4" ref="echart4" style="width: 131px;height: 110px;"></div>
            </div>
          </div>
        </div>
        <div class="dev_info">
          <div class="pageTitle">报警违章</div>
          <div class="search_select">
            <el-select size="mini" v-model="value" @focus="setSelectBoxWidth" @change="changValue" placeholder="请选择">
              <el-option
                  label="全部"
                  value="">
              </el-option>
              <el-option-group
                v-for="group in options"
                :key="group.label"
                :label="group.label">
                <el-option
                  v-for="item in group.options"
                  :key="item.projectSn"
                  :label="group.label == '项目' ? item.projectName:item.companyName"
                  :value="group.label == '项目' ? item.projectSn:item.companySn">
                </el-option>
              </el-option-group>
            </el-select>
          </div>
          <div class="nav_list">
            <div class="nav_item" :class="{'active_item': activeNav == 1}" @click="selectTowerAlarmViolationCount(1)">
              今日
            </div>
            <div class="nav_item" :class="{'active_item': activeNav == 2}" @click="selectTowerAlarmViolationCount(2)">
              本周
            </div>
            <div class="nav_item" :class="{'active_item': activeNav == 3}" @click="selectTowerAlarmViolationCount(3)">
              本月
            </div>
          </div>
          <div id="echart5" ref="echart5" @click="showAlarmDetail" style="height:calc(100% - 40px);width: 100%"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="info_wrap left_info">
          <div class="pageTitle">报警违章趋势</div>
          <div class="nav_list">
            <div class="nav_item" :class="{'active_item': activeNav2 == 1}" @click="selectTowerAlarmViolationTrendList(1)">
              今日
            </div>
            <div class="nav_item" :class="{'active_item': activeNav2 == 2}" @click="selectTowerAlarmViolationTrendList(2)">
              本周
            </div>
            <div class="nav_item" :class="{'active_item': activeNav2 == 3}" @click="selectTowerAlarmViolationTrendList(3)">
              本月
            </div>
          </div>
          <div id="echart6" ref="echart6" style="height:calc(100% - 40px);width: 100%"></div>
        </div>
        <div class="info_wrap right_info">
          <div class="pageTitle">报警违章排行榜</div>
          <div class="nav_list">
            <div class="nav_item" :class="{'active_item': activeNav3 == 1}" @click="selectProjectTowerAlarmViolationList(1)">
              全部
            </div>
            <div class="nav_item" :class="{'active_item': activeNav3 == 2}" @click="selectProjectTowerAlarmViolationList(2)">
              报警排行
            </div>
            <div class="nav_item" :class="{'active_item': activeNav3 == 3}" @click="selectProjectTowerAlarmViolationList(3)">
              违章排行
            </div>
          </div>
          <div class="table_wrap">
            <el-table
              class="tables"
              :data="tableData"
              height="100%"
            >
              <el-table-column type="index" label="序号">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称">
              </el-table-column>
              <el-table-column v-if="activeNav3 != 3" width="120" align="center" prop="alarmNum" label="报警数">
              </el-table-column>
              <el-table-column v-if="activeNav3 != 2" width="120" align="center" prop="violationNum" label="违章数">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      </vue-scroll>
    </div>
    <div style="width: 100%;height:100%" v-else>
      <div class="nav_box">
        <div class="nav_item" :class="{'active_item': currentIndex == index}" v-for="(item,index) in menuList" :key="index" @click="goPage(item,index)">
          {{item.name}}
        </div>
      </div>
      <div style="width: 100%;height: 100%;background: #fff;">
        <component v-if="isRefresh" :is="componentId" :sn="searchsn"></component>
      </div>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="visibleDialog"
      :title="dialogTitle"
    >
      <div class="tab_nav">
        <div class="tab_item" :class="{'active_item': searchType == 1}" @click="changeSearchType(1)">组织机构</div>
        <div class="tab_item" :class="{'active_item': searchType == 2}" @click="changeSearchType(2)">项目</div>
      </div>
      <el-table class="tables" :data="detailTableData" height="680">
        <el-table-column prop="name" :label="searchType == 1 ? '组织机构名称':'项目名称'">
          <template slot-scope="scope">
            <span class="active_text" @click="showProjectPage(scope.row.sn,scope.row.name)">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="devNum" v-if="tableType == 1 || tableType == 8" label="塔吊总数" align="center"></el-table-column>
        <el-table-column prop="devOnline" v-if="tableType == 2" label="在线总数" align="center"></el-table-column>
        <el-table-column prop="collideDevNum" v-if="tableType == 3" label="防碰撞数量" align="center"></el-table-column>
        <el-table-column prop="videoNum" v-if="tableType == 4" label="可视化数量" align="center"></el-table-column>
        <el-table-column prop="devOnlineNum" v-if="tableType == 8" label="在线数" align="center"></el-table-column>
        <el-table-column prop="cycleNum" v-if="tableType == 5" label="吊次数" align="center"></el-table-column>
        <el-table-column prop="alarmNum" v-if="tableType == 6" label="报警次数" align="center"></el-table-column>
        <el-table-column prop="violationNum" v-if="tableType == 7" label="违章次数" align="center"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="visibleDialog2"
      title="报警违章"
      width="75%"
    >
      <div class="tab_nav">
        <div class="tab_item" :class="{'active_item': searchType == 1}" @click="selectProjectTowerAlarmViolationCountList">组织机构</div>
        <div class="tab_item" :class="{'active_item': searchType == 2}" @click="selectAllProjectTowerAlarmViolationList">项目</div>
      </div>
      <el-table class="tables" :data="detailTableData2" height="680">
        <el-table-column prop="name" :label="searchType == 1 ? '组织机构名称':'项目名称'">
           <template slot-scope="scope">
            <span class="active_text" @click="showProjectPage(scope.row.sn,scope.row.name)">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="limitNum" label="限位" align="center"></el-table-column>
        <el-table-column prop="obliguityNum" label="倾角" align="center"></el-table-column>
        <el-table-column prop="momentNum" label="力矩" align="center"></el-table-column>
        <el-table-column prop="banRegionNum" label="限行区" align="center"></el-table-column>
        <el-table-column prop="rotationNum" label="回转" align="center"></el-table-column>
        <el-table-column prop="collisionNum" label="防碰撞" align="center"></el-table-column>
      </el-table>
    </el-dialog>
    <areaTree class="left_menu" :videoType="0" @getTreeData="setTreeData"></areaTree>
  </div>
</template>

<script>
import areaTree from "@/components/areaTree";
import echarts from 'echarts4';
import towerHome from '@/views/projectFront/towerCrane/home.vue';
import antiCollision from '@/views/projectFront/towerCrane/antiCollision.vue';
import monitoringStatistics from '@/views/projectFront/towerCrane/monitoringStatistics.vue';
import towerReportForm from '@/views/projectFront/towerCrane/reportForm.vue';
import towerBasicInfo from '@/views/projectFront/towerCrane/basicInfo.vue';
import towerNut from '@/views/projectFront/towerCrane/Nut.vue';
import towerJacking from '@/views/projectFront/towerCrane/Jacking.vue';
import siteVisualization from '@/views/projectFront/towerCrane/siteVisualization.vue';
import {
  selectTowerCountApi,
  selectTowerRingRatioCountApi,
  selectProjectTowerAlarmViolationListApi,
  selectTowerAlarmViolationCountApi,
  selectTowerAlarmViolationTrendListApi,
  selectTowerViolationRingRatioCountApi,
  selectTowerWorkCycleRingRatioCountApi,
  selectTowerAlarmRingRatioCountApi,
  getProjectModuleAndMenuApi,
  selectProjectTowerTotalCountListApi,
  selectProjectTowerVideoCountListApi,
  selectProjectTowerAlarmViolationCountListApi,
  selectProjectTowerCountListApi,
  selectProjectTowerViolationCountListApi,
  selectProjectTowerAlarmCountListApi,
  selectProjectTowerWorkCycleCountListApi,
  selectAllProjectTowerVideoListApi,
  selectAllProjectTowerListApi,
  selectAllProjectTowerAlarmListApi,
  selectAllProjectTowerViolationListApi,
  selectAllProjectTowerAlarmViolationListApi,
  selectAllProjectTowerWorkCycletListApi,
  selectChildCompanyListApi
} from '@/assets/js/api/towerCrane.js'
import {
  selectAllProjectInfoList
} from '@/assets/js/api/companyBigScreen.js'
export default {
  components:{
    areaTree,
    towerHome,
    antiCollision,
    monitoringStatistics,
    towerReportForm,
    towerBasicInfo,
    towerNut,
    towerJacking,
    siteVisualization
    },
  data(){
    return{
      searchType: 1,
      options: [{
        label: '组织机构',
        options: []
        },{
          label: '项目',
          options: []
        }],
      value: '',
      detailTableData:[],
      detailTableData2: [],
      componentId: 'towerHome',
      currentIndex: 0,
      isRefresh: true,
      dialogTitle: '',
      visibleDialog: false,
      visibleDialog2: false,
      tableData:[{
        index: '01',
        name: '御花园一期项目',
        num: 123
      },{
        index: '01',
        name: '御花园一期项目',
        num: 123
      }],
      activeNav: 1,
      activeNav2: 1,
      activeNav3: 1,
      searchsn: '',
      devInfo:{
        collideDevNum: 0,
        collideDevOnline: 0,
        devNum: 0,
        devOnline: 0,
        videoCount: 0,
      },
      hookTime:{
        todayCycleNum: 0,
        ratio: '0.00',
        weeksCycleNum: 0
      },
      hookTimeData:[0,0,0,0,0,0,0],
      hookTimeData2:[],
      alarmTime:{
        todayAlarmNum: 0,
        ratio: '0.00',
        weeksAlarmNum: 0
      },
      alarmTimeData:[0,0,0,0,0,0,0],
      alarmTimeData2:[],
      violationTime:{
        todayViolationNum: 0,
        ratio: '0.00',
        weeksViolationNum: 0
      },
      violationTimeData:[0,0,0,0,0,0,0],
      violationTimeData2:[],
      devOnlinCount:{
        todayDevOnlineNum: 0,
        ratio: '0.00',
        weeksOnline: 0
      },
      devOnlinCountData:[0,0,0,0,0,0,0],
      devOnlinCountData2:[0,0,0,0,0,0,0],
      devOnlinCountData3: [],
      tendencyData: [],
      alarmViolationCount:{
        banRegion: 1,
        collision: 0,
        limit: 0,
        moment: 1,
        obliguity: 0,
        rotation: 0
      },
      menuList: [{
        name: '首页',
        path: 'towerHome'
      },
      // {
      //   name: '群塔防碰撞',
      //   path: 'antiCollision'
      // },
      {
        name: '监控统计',
        path: 'monitoringStatistics'
      },{
        name: '报表导出',
        path: 'towerReportForm'
      },{
        name: '设备管理',
        path: 'towerBasicInfo'
      },
      // {
      //   name: '螺栓列表',
      //   path: 'towerNut'
      // },
      // {
      //   name: '顶升记录',
      //   path: 'towerJacking'
      // },
      {
        name: '工地可视化',
        path: 'siteVisualization'
      }],
      isProject: false,
      tableType: 0,
      threeData: [],
      detailArr: [],
      projectTb: '组织机构名称'
    }
  },
  watch: {
    "$store.state.mapBackArr": function () {
      this.initData();
    },
  },
  created(){
    this.initData()
  },
  methods:{
    setSelectBoxWidth(e){
      // console.log(e)
      let dom = document.querySelector('.el-select-dropdown')
      dom.style.width = '200px'
      // console.dir(dom)
    },
    changValue(val){
      console.log(val)
      this.value = val
      this.selectTowerAlarmViolationCount()
    },
    selectChildCompanyList(){
      this.options[0].options = []
      selectChildCompanyListApi({sn: this.searchsn}).then(res=>{
          console.log(res)
          this.options[0].options = res.result
      })
      // console.log(this.threeData,this.searchsn)
      // console.log(this.getNodeDetail(this.threeData,this.searchsn))
    },
    selectAllProject(){
      this.options[1].options = []
      selectAllProjectInfoList({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.options[1].options = res.result
      })
    },
    // 查询项目报警违章统计
    selectAllProjectTowerAlarmViolationList(){
      this.searchType = 2
      selectAllProjectTowerAlarmViolationListApi({sn: this.searchsn, selectType: this.activeNav}).then(res=>{
        console.log(res)
        this.detailTableData2 = res.result
      })
    },
    // 查询项目今日违章
    selectAllProjectTowerViolationList(){
      this.searchType = 2
      selectAllProjectTowerViolationListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 查询项目今日报警
    selectAllProjectTowerAlarmList(){
      this.searchType = 2
      selectAllProjectTowerAlarmListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 查询项目今日吊次
    selectAllProjectTowerWorkCycletList(){
      this.searchType = 2
      selectAllProjectTowerWorkCycletListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 查询项目设备统计
    selectAllProjectTowerList(){
      this.searchType = 2
      selectAllProjectTowerListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 查询项目可视化数量
    selectAllProjectTowerVideoList(){
      this.searchType = 2
      selectAllProjectTowerVideoListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 切换类型 1 组织机构 2 项目
    changeSearchType(val){
      if(this.dialogTitle == '可视化数量' && val == 1){
        this.selectProjectTowerVideoCountList()
        console.log(this.searchType)
      } else if(this.dialogTitle == '可视化数量' && val == 2){
        this.selectAllProjectTowerVideoList()
         console.log(this.searchType)
      } else if(this.dialogTitle == '吊次统计' && val == 1){
        this.selectProjectTowerWorkCycleCountList()
         console.log(this.searchType)
      } else if(this.dialogTitle == '吊次统计' && val == 2){
        this.selectAllProjectTowerWorkCycletList()
         console.log(this.searchType)
      } else if(this.dialogTitle == '报警统计' && val == 1){
        this.selectProjectTowerAlarmCountList()
         console.log(this.searchType)
      } else if(this.dialogTitle == '报警统计' && val == 2){
        this.selectAllProjectTowerAlarmList()
         console.log(this.searchType)
      } else if(this.dialogTitle == '违章统计' && val == 1){
        this.selectProjectTowerViolationCountList()
         console.log(this.searchType)
      } else if(this.dialogTitle == '违章统计' && val == 2){
        this.selectAllProjectTowerViolationList()
         console.log(this.searchType)
      } else if(this.dialogTitle == '在线统计' && val == 1){
        this.selectProjectTowerCountList()
         console.log(this.searchType)
      } else if(val == 1){
        this.selectProjectTowerTotalCountList()
         console.log(this.searchType)
      } else if(val == 2){
        this.selectAllProjectTowerList()
         console.log(this.searchType)
      }
    },
    setTreeData(data){
      console.log(data)
      this.threeData = data
    },
    getNodeDetail(data,sn){
      // this.detailArr = []
      data.forEach(item=>{
        if(item.companySn == sn && item.list){
          this.detailArr.push(item)
        }
        if(item.list){
          this.getNodeDetail(item.list,sn)
        }
      })
      
    },
    showProjectPage(sn,projectName){
      this.detailArr = []
      this.getNodeDetail(this.threeData,sn)
      console.log(this.detailArr)
      this.searchsn = sn
      let arr = this.$store.state.mapBackArr
      this.projectTb = '组织机构名称'
      if(this.detailArr.length == 0){
        arr.push({
          name: projectName,
          isProject: true,
          sn,
        })
      } else {
        // if(this.detailArr[0].companyType == 4){
        //   this.projectTb = '项目名称'
        // }
         arr.push({
          name: projectName,
          sn,
         })
      }
      this.$store.commit("setMapBackArr", arr)
      this.initData()
      this.visibleDialog = false
      this.visibleDialog2 = false
    },
    // 弹窗展示 违章报警统计
    showAlarmDetail(){
      this.visibleDialog2 = true
      this.selectProjectTowerAlarmViolationCountList()
    },
    // 违章报警统计
    selectProjectTowerAlarmViolationCountList(){
      this.searchType = 1
      selectProjectTowerAlarmViolationCountListApi({sn: this.searchsn, selectType: this.activeNav}).then(res=>{
        console.log(res)
        this.detailTableData2 = res.result
      })
    },
    // 查询设备统计
    selectProjectTowerCountList(){
      this.searchType = 1
      selectProjectTowerCountListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 查询今日吊次
    selectProjectTowerWorkCycleCountList(){
      this.searchType = 1
      selectProjectTowerWorkCycleCountListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 查询今日违章
    selectProjectTowerViolationCountList(){
      this.searchType = 1
      selectProjectTowerViolationCountListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 查询今日报警
    selectProjectTowerAlarmCountList(){
      this.searchType = 1
      selectProjectTowerAlarmCountListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    // 弹窗
    showDetail(val){
      this.detailTableData = []
      this.projectTb = '组织机构名称'
      this.visibleDialog = true
      switch(val) {
        case 1:
          this.dialogTitle = '塔吊总数';
          this.tableType = 1
          this.selectProjectTowerTotalCountList()
          break;
        case 2:
          this.dialogTitle = '在线总数';
          this.tableType = 2
          this.selectProjectTowerTotalCountList()
          break;
        case 3:
          this.dialogTitle = '防碰撞数量';
          this.tableType = 3
          this.selectProjectTowerTotalCountList()
          break;
        case 4:
          this.dialogTitle = '可视化数量';
          this.tableType = 4
          this.selectProjectTowerVideoCountList()
          break;
        case 5:
          this.dialogTitle = '吊次统计';
          this.tableType = 5
          this.selectProjectTowerWorkCycleCountList()
          break;
        case 6:
          this.dialogTitle = '报警统计';
          this.tableType = 6
          this.selectProjectTowerAlarmCountList()
          break;
        case 7:
          this.dialogTitle = '违章统计';
          this.tableType = 7
          this.selectProjectTowerViolationCountList()
          break;
        case 8:
          this.dialogTitle = '在线统计';
          this.tableType = 8
          this.selectProjectTowerCountList()
          break;
      }
    },
    selectProjectTowerTotalCountList(){
      this.searchType = 1
      selectProjectTowerTotalCountListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    selectProjectTowerVideoCountList(){
      this.searchType = 1
      selectProjectTowerVideoCountListApi({sn: this.searchsn}).then(res=>{
        console.log(res)
        this.detailTableData = res.result
      })
    },
    goPage(data,index){
      // this.$router.push(data.companyPath)
      // this.$router.push({path: data.companyPath, query: {sn: this.searchsn}})
      this.componentId = data.path
      this.currentIndex = index
    },
    selectProjectTowerAlarmViolationList(type){
      if(type){
        this.activeNav3 = type
      }
      selectProjectTowerAlarmViolationListApi({sn: this.searchsn,selectType: this.activeNav2}).then(res=>{
        console.log(res,'---报警违章排行')
        if(res.code == 200){
          // this.tendencyData = res.result ? res.result:[]
          this.tableData = res.result
        }
      })
    },
    selectTowerAlarmViolationTrendList(type){
      if(type){
        this.activeNav2 = type
      }
      selectTowerAlarmViolationTrendListApi({sn: this.searchsn,selectType: this.activeNav2}).then(res=>{
        console.log(res,'---报警违章趋势')
        if(res.code == 200){
          if(type==1){
            this.tendencyData = res.result ? res.result:[]
          }else if(type==2){
            this.tendencyData = res.result ? res.result:[]

          }else{
            this.tendencyData = res.result ? res.result:[]

          }
          this.$nextTick(()=>{
            this.createEchart6()
          })
        }
      })
    },
    selectTowerAlarmViolationCount(type){
      if(type){
        this.activeNav = type
      }
      selectTowerAlarmViolationCountApi({sn: this.value ? this.value:this.searchsn,selectType: this.activeNav}).then(res=>{
        console.log(res, '---违章报警统计')
        if(res.code == 200){
          this.alarmViolationCount = res.result
        }
        this.$nextTick(()=>{
          this.createEchart5()
        })
      })
    },
    selectTowerRingRatioCount(){
      selectTowerRingRatioCountApi({sn: this.searchsn}).then(res=>{
        console.log(res.result, '今日在线率')
        this.devOnlinCount = {
          todayDevOnlineNum: (res.result.count.todayDevOnlineNum&&res.result.count.todayDevOnlineNum) ? ((res.result.count.todayDevOnlineNum/res.result.count.devNum).toFixed(4))*100:0,
          ratio: res.result.count.ringRatio.toFixed(2),
          weeksOnline: 0
        }
        if(res.result.list.length>0){
          this.devOnlinCountData = []
          this.devOnlinCountData2 = []
          this.devOnlinCountData3=[]
          let arr = []
          res.result.list.forEach(item=>{
            this.devOnlinCountData3.push(item.titleName)
            this.devOnlinCountData.push(item.devOnlineNum)
            this.devOnlinCountData2.push(item.devNum)
            arr.push((item.devOnlineNum&&item.devNum) ? item.devOnlineNum/item.devNum:0)
          })
          console.log(arr)
          let average = 0
          arr.forEach(item=>{
            average += item
          })
          this.devOnlinCount.weeksOnline = (average&&arr.length) ? (((average/arr.length)*100).toFixed(2)):'0.00'
          let num = this.devOnlinCountData3.length
          for(let i = 0; i<(7-num);i++){
            // console.log(this.devOnlinCountData3.length)
            this.devOnlinCountData3.push('')
          }
        } else {
            this.devOnlinCountData3=[]
            this.devOnlinCountData=[]
            this.devOnlinCountData2=[]
            this.devOnlinCountData3 = []
        }
        this.$nextTick(()=>{
          this.createEchart4()
        })
      })
    },
    selectTowerViolationRingRatioCount(){
      selectTowerViolationRingRatioCountApi({sn: this.searchsn}).then(res=>{
        console.log(res.result, '今日违章')
        this.violationTime = {
          violationNum: res.result.count.todayViolationNum,
          ratio: res.result.count.ringRatio.toFixed(2),
          weeksViolationNum: 0
        }
        if(res.result.list.length>0){
          this.violationTimeData = []
          this.violationTimeData2 = []
          res.result.list.forEach(item=>{
            this.violationTimeData.push(item.violationNum)
            this.violationTimeData2.push(item.titleName)
            this.violationTime.weeksViolationNum += item.violationNum
          })
          let num = this.violationTimeData2.length
          for(let i = 0;i<(7-num); i++){
            this.violationTimeData2.push('')
          }
        } else {
          this.violationTimeData = []
          this.violationTimeData2 = []
        }
        this.$nextTick(()=>{
          this.createEchart3()
        })
      })
    },
    selectTowerWorkCycleRingRatioCount(){
      selectTowerWorkCycleRingRatioCountApi({sn: this.searchsn}).then(res=>{
        console.log(res, '----实时数据吊次')
        // let ratio = '0.00'
        // if(res.result.count.todayCycleNum && res.result.count.yesterdayCycleNum){
        //   ratio = (((res.result.count.todayCycleNum - res.result.count.yesterdayCycleNum)/res.result.count.yesterdayCycleNum)*100).toFixed(2)
        // }
        this.hookTime = {
          todayCycleNum: res.result.count.todayCycleNum,
          ratio: res.result.count.ringRatio.toFixed(2),
          weeksCycleNum: 0
        }
        if(res.result.list.length>0){
          this.hookTimeData = []
          this.hookTimeData2 = []
          res.result.list.forEach(item=>{
            this.hookTimeData.push(item.cycleNum)
            this.hookTimeData2.push(item.titleName)
            this.hookTime.weeksCycleNum += item.cycleNum
          })
          let num = this.hookTimeData2.length
          for(let i = 0;i<(7-num); i++){
            this.hookTimeData2.push('')
          }
        } else {
          this.hookTimeData = []
          this.hookTimeData2 = []
        }
        this.$nextTick(()=>{
          this.createEchart1()
        })

      })
    },
    selectTowerCount(){
      selectTowerCountApi({sn: this.searchsn}).then(res=>{
        console.log(res.result, '----设备情况')
        if(res.code == 200){
          this.devInfo = res.result
        }
      })
    },
    selectTowerAlarmRingRatioCount(){
      selectTowerAlarmRingRatioCountApi({sn: this.searchsn}).then(res=>{
        console.log(res.result, '----今日报警')
        this.alarmTime = {
          todayAlarmNum: res.result.count.todayAlarmNum,
          ratio: res.result.count.ringRatio.toFixed(2),
          weeksAlarmNum: 0
        }
        if(res.result.list.length>0){
          this.alarmTimeData = []
          this.alarmTimeData2 = []
          res.result.list.forEach(item=>{
            this.alarmTimeData.push(item.alarmNum)
            this.alarmTimeData2.push(item.titleName)
            this.alarmTime.weeksAlarmNum += item.alarmNum
          })
          let num = this.alarmTimeData2.length
          for(let i = 0;i<(7-num); i++){
            this.alarmTimeData2.push('')
          }
        }else{
          this.alarmTimeData = []
          this.alarmTimeData2 = []
        }
        this.$nextTick(()=>{
          this.createEchart2()
        })
      })
    },
    initData(){
      console.log('执行',720);
      this.backArr = this.$store.state.mapBackArr;
      this.isProject = false
      if (this.backArr.length > 0) {
        this.searchsn = this.backArr[this.backArr.length - 1].sn;
        if(this.backArr[this.backArr.length - 1].isProject){
          this.isProject = true
          this.isRefresh = false
          this.$nextTick(()=>{
            this.isRefresh = true
          })
          // getProjectModuleAndMenuApi({projectSn: this.searchsn}).then(res=>{
          //   // console.log(res)
          //   res.result.forEach(item=>{
          //     if(item.moduleName == '塔吊管理系统'){
          //       this.menuList = []
          //       item.menuList.forEach(itm=>{
          //         if(itm.priority < 1000){
          //           this.menuList.push(itm)
          //         }
          //       })
          //       this.goPage(this.menuList[0],0)
          //       console.log(this.menuList)
          //     }
          //   })
          // })
        } else { 
          this.isProject = false
        }
      } 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.isProject){
        this.value = ''
        this.selectChildCompanyList()
        this.selectAllProject()
        this.selectTowerCount()
        this.selectTowerWorkCycleRingRatioCount()
        this.selectTowerAlarmRingRatioCount()
        this.selectTowerViolationRingRatioCount()
        this.selectTowerRingRatioCount()
        this.selectTowerAlarmViolationCount()
        this.selectTowerAlarmViolationTrendList()
        this.selectProjectTowerAlarmViolationList()
      }
      console.log(this.backArr)
    },
    createEchart1(){
      let echart1 = echarts.init(this.$refs['echart1'])
      let options = {
        grid:{
          bottom: 0,
          left: 0,
          right: 0,
          top: '60%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          show: false,
          data: this.hookTimeData2
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: this.hookTimeData,
            name: '吊次',
            type: 'bar',
            barWidth: 12,
            barGap: '-100%',
            silent: true,
            itemStyle: {
              color: '#5181F6'
            }
          },
          // {
          //   data: [180, 200, 150, 80, 70, 110, 130],
          //   name: '总数',
          //   barWidth: 12,
          //   type: 'bar',
          //   itemStyle: {
          //     color: 'rgba(81, 129, 246, 0.1)'
          //   }
          // }
        ]
      }
      echart1.setOption(options)
    },
    createEchart2(){
       let echart2 = echarts.init(this.$refs['echart2'])
      let options = {
        grid:{
          bottom: 0,
          left: 0,
          right: 0,
          top: '60%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          show: false,
          data: this.alarmTimeData2
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: this.alarmTimeData,
            type: 'line',
            itemStyle: {
              color: '#F67F51'
            },
            areaStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(246, 127, 81, 0.1)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(246, 127, 81, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            smooth: true,
            symbol: 'none',
          }
        ]
      }
      echart2.setOption(options)
    },
    createEchart3(){
      let echart3 = echarts.init(this.$refs['echart3'])
      let options = {
        grid:{
          bottom: 0,
          left: 0,
          right: 0,
          top: '60%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          show: false,
          data: this.violationTimeData2
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: this.violationTimeData,
            type: 'line',
            itemStyle: {
              color: '#F67F51'
            },
            areaStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(246, 127, 81, 0.1)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(246, 127, 81, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            smooth: true,
            symbol: 'none',
          }
        ]
      }
      echart3.setOption(options)
    },
    createEchart4(){
      let echart4 = echarts.init(this.$refs['echart4'])
      let options = {
        grid:{
          bottom: 0,
          left: 0,
          right: 0,
          top: '60%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          show: false,
          data: this.devOnlinCountData3
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: this.devOnlinCountData,
            name: '在线数',
            type: 'bar',
            barWidth: 12,
            barGap: '-100%',
            silent: true,
            itemStyle: {
              color: '#44D7B6'
            }
          },
          {
            data: this.devOnlinCountData2,
            name: '总数',
            barWidth: 12,
            type: 'bar',
            itemStyle: {
              color: 'rgba(68, 215, 182, 0.1)'
            }
          }
        ]
      }
      echart4.setOption(options)
    },
    createEchart5(){
      let maxCount = 0
      for(let key in this.alarmViolationCount){
        if(this.alarmViolationCount[key]>maxCount){
          maxCount = this.alarmViolationCount[key]
        }
      }
      let _this = this
      let echart5 = echarts.init(this.$refs['echart5'])
      let options = {
        // tooltip: {
        //   // trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '限位', max: maxCount },
            { name: '防碰撞', max: maxCount },
            { name: '回转', max: maxCount },
            { name: '限行区', max: maxCount },
            { name: '力矩', max: maxCount },
            { name: '倾角', max: maxCount }
          ],
          name: {
            formatter:function(value,a){
              console.log(value)
              let text = '0'
              if(value == '限位'){
                text = _this.alarmViolationCount.limit
              } else if(value == '防碰撞'){
                text = _this.alarmViolationCount.collision
              } else if(value == '回转'){
                text = _this.alarmViolationCount.rotation
              } else if(value == '限行区'){
                text = _this.alarmViolationCount.banRegion
              } else if(value == '力矩'){
                text = _this.alarmViolationCount.moment
              } else if(value == '倾角'){
                text = _this.alarmViolationCount.collision
              }
              return '{b|' + value + '}'+ '：' + '{a|' + text + '}'
            },
            textStyle: {
              rich: {
                a: {
                  color: '#555555',
                  fontSize: 20,
                },
                b: {
                  color: '#555555',
                  fontSize: 14,
                },
              },
            },
          },
          axisLine:{
            show: false
          },
          splitLine:{
            lineStyle:{
              color: 'rgba(246, 127, 81,0.2)',
              width: 2.2,
            }
          },
          splitArea:{
            show: false
          }
        },
        series: [
          {
            type: 'radar',
            symbolSize: 7,
            data: [
            //    { name: '限位：', max: maxCount },
            // { name: '防碰撞：', max: maxCount },
            // { name: '回转：', max: maxCount },
            // { name: '限行区：', max: maxCount },
            // { name: '力矩：', max: maxCount },
            // { name: '倾角：', max: maxCount }
              {
                value: [this.alarmViolationCount.limit, this.alarmViolationCount.collision, this.alarmViolationCount.rotation, this.alarmViolationCount.banRegion, this.alarmViolationCount.moment, this.alarmViolationCount.collision],
                name: ''
              }
            ],
            areaStyle:{
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                    offset: 0, color: 'rgba(246, 127, 81, 0.01)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(246, 127, 81, 0.5)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            lineStyle:{
              color: 'rgba(246, 127, 81, 1)',
              width: 3
            }
          }
        ]
      }
      // echart5.off('click')
      // echart5.on('click',function(){
      //   _this.visibleDialog2 = true
      //   _this.selectProjectTowerAlarmViolationCountList()
      // })
      echart5.setOption(options)
    },
    makeDate() {
      var new_Date = new Date()
      var timesStamp = new_Date.getTime();
      var currenDay = new_Date.getDay();
      var dates = [];
      for(var i = 0; i < 7; i++) {
          dates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)).toLocaleDateString().replace('/', '-').replace('/', '-'));
      }
      return dates
    },
    getMounth(){
      let now = new Date()
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let d = new Date(year,month,0);
      let current_month_num = d.getDate();
      let current_month = []
      for(let i = 1;i <= current_month_num; i++){
        let day = now.setDate(i);
        let itemDay = new Date(day)
        let y = itemDay.getFullYear();
        let m = itemDay.getMonth() + 1;
        let d = itemDay.getDate();
        m < 10 ? m = '0' + m : m;
        d < 10 ? d = '0' + d : d;
        current_month.push(y+'-'+m+'-'+d)
      }
      return current_month
    },
    createEchart6(){
      let titleData = [],
          dataList = [],
          dataList2 = []
      this.tendencyData.forEach(item=>{
        if(this.activeNav2 == 1){
          titleData.push(item.titleName+':00')
        } else {
          titleData.push(item.titleName)
        }
        dataList.push(item.alarmNum)
        dataList2.push(item.violationNum)
      })
      if(this.activeNav2 == 2){
        // titleData = [...new Set([...titleData,...this.makeDate()])]
      } else if(this.activeNav2 == 3){
        titleData = [...new Set([...titleData,...this.getMounth()])]
      }
      console.log(titleData)

      let echart6 = echarts.init(this.$refs['echart6'])
      let options = { 
        grid:{
          bottom: 80,
          left: 50,
          right: 50,
          top: 50,
        },
        legend:{
          type: 'plain',
          left: 50,
          itemHeight: 3,
          itemWidth: 9,
          itemGap: 50
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          // show: false,
          data: titleData,
          axisTick:{
            show: false
          },
          axisLine:{
            show: false
          },
          axisLabel:{
            interval: 0,
            rotate: this.activeNav2 == 3 ? 60:0
          },
        },
        yAxis: {
          type: 'value',
          axisLine:{
            show: false
          },
          axisTick:{
            show: false
          },
          splitLine:{
            lineStyle:{
              type: 'dashed',
              color: '#D0D0D0',
              width: 0.6
            }
          }
          // show: false
        },
        series: [
          {
            data: dataList,
            name: '报警',
            type: 'bar',
            barWidth: 16,
            silent: true,
            itemStyle: {
              color: '#5181F6'
            }
          },
          {
            data: dataList2,
            name: '违章',
            barWidth: 16,
            type: 'bar',
            itemStyle: {
              color: 'rgba(246, 127, 81, 0.6)'
            }
          }
        ]
      }
      echart6.setOption(options)
    },
  }
}
</script>

<style lang="less" scoped>
.towerManage_box{
  width: 100%;
  height: 100%;
}
.top{
  display: flex;
  height: calc(50% - 10px);
  width: 100%;
  margin-bottom: 20px;
  .dev_info{
    background: #fff;
    width: 25%;
    padding: 15px;
    position: relative;
  }
  .center_info{
    flex: 1;
    margin: 0 20px;
  }
}
.bottom{
  display: flex;
  height: calc(50% - 10px);
  .info_wrap{
    background: #fff;
    padding: 15px;
  }
  .left_info{
    flex: 1;
    margin-right: 20px;
    position: relative;
  }
  .right_info{
    width: 30%;
    position: relative;
    .table_wrap{
      height: calc(100% - 50px);
      margin-top: 28px;
    }
    .tables{
      min-height: auto;
    }
  }
}
.dev_list{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100% - 40px);
  justify-content: space-around;
  align-items: center;
  .dev_item{
    width: 50%;
    height: 50%;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    cursor: pointer;
    img{
      margin-bottom: 18px;
      z-index: 1;
    }
    span{
      margin-bottom: 8px;
      z-index: 1;
    }
    span:nth-of-type(2){
      font-size: 24px;
      font-weight: 600;
    }
  }
  .dev_item::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(to bottom, rgba(#5181F6,0.1) , #fff);
    width: 120px;
    height: 145px;
    // opacity: 0.3;
    border-radius: 39px;
  }
  .c2::before{
    background: linear-gradient(to bottom, rgba(#44D7B6,0.1) , #fff);
  }
  .c3::before{
    background: linear-gradient(to bottom, rgba(#F67F51,0.1) , #fff);
  }
}
.realData_list{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  height: calc(100% - 40px);
  .realData_item{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    .item_info{
      margin-right: 20px;
      i{
        margin-right: 5px;
        cursor: pointer;
      }
      p:nth-child(1){
        margin-bottom: 10px;
      }
      p:nth-child(2){
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
      }
      p:nth-child(3){
        margin-bottom: 8px;
        position: relative;
        color: #909399;
        display: flex;
        align-items: center;
        white-space: nowrap;
        span{
          font-size: 20px;
          margin-right: 10px;
          margin-left: 16px;
        }
        img{
          width: 6px;
          height: 6px;
        }
        .info{
          position: absolute;
          left: 0;
          top: 0;
          font-size: 12px;
          white-space: nowrap;
          background: #fff;
        }
      }
      p:nth-child(4){
        color: #909399;
        i{
          margin-right: 5px;
        }
      }
    }
  }
}
.nav_list{
  display: flex;
  position: absolute;
  right: 26px;
  top: 12px;
  z-index: 10;
  .nav_item{
    padding: 0 10px;
    background: rgba(#5181F6,0.2);
    height: 25px;
    line-height: 25px;
    margin-right: 4px;
    border-radius: 3px;
    cursor: pointer;
  }
  .active_item{
    background: #5181F6;
    color: #fff;
  }
}
.left_menu{
  z-index: 10;
}
.nav_box{
  display: flex;
  .nav_item{
    padding: 10px 20px;
    background: #f7f9fd;
    color: #7f85a0;
    cursor: pointer;
  }
  .active_item{
    background: #fff;
    color: #000;
  }
}
.active_text{
  color: #409EFF;
  cursor: pointer;
}
.tab_nav{
  display: flex;
  margin-bottom: 10px;
  .tab_item{
    padding: 6px 10px;
    background: rgba(#5181F6,0.2);
    margin-right: 6px;
    border-radius: 3px;
    cursor: pointer;
  }
  .active_item{
    background: #5181F6;
    color: #fff;
  }
}
.search_select{
  position: absolute;
  left: 97px;
  top: 12px;
}


</style>