<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-09 17:19:29
 * @FilePath: src/views/screen/components/dataManagement/DataOverview.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="container">
    <div class="container_content">
      <div class="module">
        <div class="module_title"><span>工程信息</span></div>
        <div style="display: flex;justify-content: right">
          <el-button :class="buttonClass(1)" type="text"
                     @click="changeProjectData(1)"
          >工程建设项目
          </el-button>
          <el-button :class="buttonClass(2)" type="text"
                     @click="changeProjectData(2)"
          >外委外包项目
          </el-button>
        </div>
        <ProjectInfo :data="projectData" style="height: 22vh" />
      </div>
      <div class="module">
        <div class="module_title"><span>施工人员信息</span></div>
        <PersonInfo :data="personData" style="height: 24vh" />
      </div>
      <div class="module">
        <div class="module_title"><span>工器具信息</span></div>
        <div style="position: absolute;top: 78%;left: 15%;font-size: 18px;display: flex;flex-direction: column">
          <div class="legend">
            <div style="width: 15px;height: 15px;background-color: #169fe5;margin: 0 10px 0 0"></div>
            普通工器具 {{ normalRate }}
          </div>
          <div class="legend" style="margin-top: 10px;">
            <div style="width: 15px;height: 15px;background-color: #00c1d2;margin: 0 10px 0 0"></div>
            特殊工器具 {{ specialRate }}
          </div>
        </div>
        <EquipInfo :data="equipData" style="height: 24vh" />
      </div>
    </div>
    <div class="container_content2">
      <div style="width: 100%;background-color: rgb(5, 32, 75)">
        <el-select v-model="proId" filterable placeholder="请选择工程" class="custom-select" :popper-append-to-body="false" clearable @clear="clear" @change="change">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
<!--      <echartsMap ref="mapRef" v-on:openDialog="openDialog" :pro-id="proId"/>-->
      <BnsBaiDuMap ref="mapRef" v-on:openDialog="openDialog" :pro-id="proId" style="height: 80vh"/>
    </div>
    <div class="container_content">
      <div class="module">
        <div class="module_title" @click="jumpPage(3)" style="cursor:pointer;"><span>固定摄像头巡检</span></div>
        <FixedCamera :data="videoData" v-on:open="jumpVideo" style="height: 24vh" />
      </div>
      <div class="module">
        <div class="module_title" @click="jumpPage(4)" style="cursor:pointer;"><span>无人机巡检</span></div>
        <Drone :data="droneData" v-on:open="jumpDrone" style="height: 24vh" />
      </div>
      <div class="module">
        <div class="module_title" @click="jumpPage(2)" style="cursor:pointer;"><span>终端设备巡检</span></div>
        <Terminal :data="terminalData" v-on:getVideoData="getVideoData" v-on:open="jumpTerminal"
                            style="height: 24vh"
        />
      </div>
    </div>
    <el-dialog title="工程详情" :visible.sync="dialogVisible" width="98%" style="height: 98%" :append-to-body="true" :destroy-on-close="true">
      <ProjectDetails :data="projectDetails"/>
    </el-dialog>
  </div>
</template>
<script>
import ProjectInfo from '@/views/screen/components/dataManagement/ProjectInfo.vue'
import PersonInfo from '@/views/screen/components/dataManagement/PersonInfo.vue'
import EquipInfo from '@/views/screen/components/dataManagement/EquipInfo.vue'
import FixedCamera from '@/views/screen/components/dataManagement/FixedCamera.vue'
import Drone from '@/views/screen/components/dataManagement/Drone.vue'
import Terminal from '@/views/screen/components/dataManagement/Terminal.vue'
import EchartsMap from '@/views/screen/components/dataManagement/EchartsMap.vue'
import {
  getEquipData,
  getPersonData,
  getProData,
  getProjectMapData,
  getProSelect,
  getVideoList
} from '@/api/screen/screen'
import ProjectDetails from '@/views/screen/components/dataManagement/ProjectDetails.vue'
import BnsBaiDuMap from '@/views/screen/components/dataManagement/BaiduMap.vue'


export default {
  name: 'DataOverview',
  components: { BnsBaiDuMap, ProjectDetails, EchartsMap, Terminal, Drone, FixedCamera, EquipInfo, PersonInfo, ProjectInfo },
  data() {
    return {
      dialogVisible: false,
      projectDetails: {},
      projectTab: 1,
      videoType: 1,
      projectData: [2, 3, 4, 5],
      personData: [],
      equipData: [],
      videoData: [],
      droneData: [],
      terminalData: [],
      projectMapData: [],
      proId: '',
      options: [],
      specialRate: 0,
      normalRate: 0
    }
  },
  mounted() {
    this.fetchData()
    setInterval(this.fetchData, 5 * 60 * 1000) // Fetch data every 20 seconds
  },
  methods: {
    change(val) {
      console.log("change-----",val)
      this.proId = val
      this.$refs.mapRef.getProjectMapData(val)
    },
    clear() {
      console.log("clear-----")
      this.proId = ''
      this.$refs.mapRef.getProjectMapData(null)
    },
    fetchData() {
      this.getProData({ type: this.projectTab })
      this.getPersonData()
      this.getEquipData()
      this.initVideo()
      this.getProSelect()
    },
    initVideo() {
      this.getFixCameraData({ deviceType: '固定摄像头' })
      this.getDroneData({ deviceType: '无人机' })
      this.getTerminalData({ deviceType: '终端设备', type: this.videoType })
    },
    getProSelect() {
      getProSelect().then(res => {
        this.options = res.data
      })
      setTimeout(() => {
        this.$refs.mapRef.getProjectMapData(null)
      }, 1000)
    },
    getFixCameraData(params) {
      getVideoList(params).then(res => {
        this.videoData = []
        this.videoData = res.data
      })
    },
    // getProjectMapData(params) {
    //   getProjectMapData(params).then(res => {
    //     console.log('getProjectMapData', res)
    //     this.projectMapData = []
    //     this.projectMapData = res.data
    //   })
    // },
    getDroneData(params) {
      getVideoList(params).then(res => {
        this.droneData = []
        this.droneData = res.data
      })
    },
    getTerminalData(params) {
      getVideoList(params).then(res => {
        this.terminalData = res.data
      })
    },
    changeProjectData(index) {
      this.projectTab = index
      if (index === 1) {
        this.projectData = []
      } else {
        this.projectData = []
      }
      this.getProData({ type: index })
    },
    getProData(params) {
      getProData(params).then(res => {
        this.projectData = res.data
      })
    },
    getPersonData() {
      getPersonData().then(res => {
        this.personData = [
          { value: res.data[0].consNum, name: '承包商项目经理' },
          { value: res.data[0].normalNum, name: '普通施工人员' },
          { value: res.data[0].subNum, name: '分包商项目经理' },
          { value: res.data[0].specialNum, name: '特殊工种人数' }
        ]
      })
    },
    getEquipData() {
      getEquipData().then(res => {
        this.equipData = [{
          name: '特种工器具',
          value: res.data[0].specialNum,
          label: true,
          itemStyle: {
            // opacity: 1,
            color: '#00d7e9'
          }
        }, {
          name: '普通工器具',
          value: res.data[0].normalNum,
          label: true,
          itemStyle: {
            // opacity: 1,
            color: '#18b1ff'
          }
        }]

        let total =  Number(res.data[0].specialNum) + Number(res.data[0].normalNum)
        if (total == 0){
          this.specialRate = '0.0%'
          this.normalRate = '0.0%'
        }else{
          this.specialRate = (Number(res.data[0].specialNum )/ total  * 100).toFixed(2) + '%'
          this.normalRate = (Number(res.data[0].normalNum) / total * 100).toFixed(2) + '%'
        }
      })
    },
    getVideoData(index) {
      getVideoList({ deviceType: index, type: "proInfo" }).then(res => {
        this.terminalData = []
        this.terminalData = res.data
      })
    },
    buttonClass(index) {
      return this.projectTab === index ? 'type_select' : 'type_normal'
    },
    jumpDrone(e) {
      console.log('jumpDrone', e)
      console.log('jumpDrone', JSON.stringify(e))
    },
    jumpVideo(e) {
      console.log('jumpVideo', e)
      console.log('jumpVideo', JSON.stringify(e))
    },
    jumpTerminal(e) {
      console.log('jumpTerminal', e)
      console.log('jumpTerminal', JSON.stringify(e))
    },
    jumpPage(index) {
     this.$emit('jumpPage', index)
    },
    openDialog(e) {
      this.projectDetails = e
      this.dialogVisible = true

      console.log('openDialog', e)
      console.log('openDialog', JSON.stringify(e))
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .container_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28%;
    height: 100%;

    .module {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  }

  .container_content2 {
    display: flex;
    flex-direction: column;
    width: 44%;
    height: 100%;
  }
}

.type_normal {
  color: white;
}

.type_select {
  color: rgb(75, 201, 234);
}

.module_title {
  background: url("../../../../assets/screen/video/title.png") no-repeat;
  background-size: 100% 100%;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  width: 100%;
  min-height: 35px;

  span {
    margin-left: 4rem;
  }
}

.el-input--medium .el-input__inner {
  height: 36px;
  line-height: 36px;
  background-color: rgb(5, 32, 75) !important;
}

.el-input--suffix .el-input__inner {
  padding-right: 30px;
  background-color: rgb(5, 32, 75) !important;
}

.custom-select {
  width: 30%;
  float: right;
  margin-right: 20px;
  background-color: rgb(5, 32, 75) !important;
  color: rgb(5, 32, 75);
  font-size: 14px;
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  background: rgb(5, 32, 75);
  color: #fff;
  border: 1px solid rgba(41, 78, 136, 0.8);
  border-radius: 5px;

}

//el-input聚焦的时候 外层的border会有一个样式
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border: 0;
}

//修改的是el-input上下的小图标的颜色
::v-deep .el-select .el-input .el-select__caret {
  color: rgba(174, 197, 234, 0.8);
}

//修改总体选项的样式 最外层

::v-deep .el-select-dropdown {
  background: rgba(21, 43, 94, 0.3);
  margin: 0px;
  border: 0px;
  border-radius: 0px;
  left: 0px !important;
}

//修改单个的选项的样式
::v-deep .el-select-dropdown__item {
  background-color:  rgb(5, 32, 75,0.8);;
  color: #fff;
}

//item选项的hover样式
::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
  color: rgb(212, 215, 220);
  background-color: #146193;
}

//修改的是下拉框选项内容上方的尖角
::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after {
  display: none;

}

.legend {
  width: 220px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: url('../../../../assets/screen/btn.png') 100% no-repeat;
  background-size: 100% 100%;
  color: whitesmoke
}


::v-deep .el-dialog {
  background: rgb(5, 32, 75);
  width: 90%;
  height: 90%;
}

//rgb(5, 32, 75)
//弹框头部
::v-deep .el-dialog__header {
  --el-text-color-primary: #1EFFFF;
  --el-text-color-regular: #fff;
  padding: 0 !important;
  width: 100%;
  height: 64px;
}

//弹框标题
::v-deep .el-dialog__title {
  margin-left: 24px;
  line-height: 64px;
  color: whitesmoke;
}

//弹框内容部分
::v-deep .el-dialog__body {
  --el-bg-color: #000741 !important;
  --el-text-color-regular: #fff;
  color: whitesmoke;
}
::v-deep .el-badge__content.is-dot {
  height: 15px!important;
  width: 15px!important;
  padding: 0;
  right: 0;
  border-radius: 50%;
}

</style>
