<template>
  <div class="renyuan">
    <div class="block1">
      <div class="options">
        <div v-for="(item,index) in block1OptionsList" :key="index" class="option">
          {{ item.title }}：<count-to :start-val="0" :end-val="+item.count" :duration="3600"/>
        </div>
      </div>
    </div>
    <div class="block2">
      <layout-title title="重大危险源统计"/>
      <div class="content">
        <div id="main2"/>
      </div>
    </div>
    <div class="block3">
      <layout-title title="危险源列表"/>
      <div class="content">
        <div class="table">
          <div class="tr">
            <div class="td">危险源名称</div>
            <div class="td">液位</div>
            <div class="td">温度</div>
            <div class="td">状态</div>
          </div>
          <div v-infinite-scroll="false" :infinite-scroll-disabled="false" class="scroll">
            <div v-for="(item,index) in block3List" :key="index" class="tr">
              <div class="td">{{ item.MAJORDANGERSOURCE_NAME }}</div>
              <div class="td">{{ item.STORAGETANK_LIQUIDLEVEL }}</div>
              <div class="td">{{ item.STORAGETANK_TEMPERATURE }}</div>
              <div class="td">
                <span v-if="item.MAJORDANGERSOURCE_STATUS == 1">正常</span>
                <span v-if="item.MAJORDANGERSOURCE_STATUS == 2">停用</span>
                <span v-if="item.MAJORDANGERSOURCE_STATUS == 3">检修</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="block4">
      <layout-title title="报警处置情况"/>
      <div class="content">
        <div id="main3"/>
      </div>
    </div>
    <div class="block5">
      <layout-title title="报警信息"/>
      <div class="content">
        <div class="table">
          <div class="tr">
            <div class="td">设备名称</div>
            <div class="td">报警时间</div>
            <div class="td">处置状态</div>
          </div>
          <div v-infinite-scroll="false" :infinite-scroll-disabled="false" class="scroll">
            <div v-for="(item,index) in block5List" :key="index" class="tr">
              <div class="td">{{ item.MAJORDANGERSOURCE_NAME }}</div>
              <div class="td">{{ item.CREATTIME }}</div>
              <div class="td">
                <span v-if="item.DISPOSAL_STATUS == -1">未处置</span>
                <span v-if="item.DISPOSAL_STATUS == 0">报警升级</span>
                <span v-if="item.DISPOSAL_STATUS == 1">完成处置</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import layoutTitle from './title.vue'
import CountTo from 'vue-count-to'
import * as echarts from 'echarts'
import { requestFN } from '@/utils/request'

let myChart2 = null
let myChart3 = null
export default {
  components: {
    CountTo,
    layoutTitle
  },
  data() {
    return {
      block1OptionsList: [],
      block3List: [],
      block5List: [],
      loading: false,
      currentPage: 1,
      count: 0,
      totalPage: 0
    }
  },
  mounted() {
    window.onresize = function() {
      myChart2 && myChart2.resize()
      myChart3 && myChart3.resize()
    }
    // this.initEcharts2()
    this.getFindDeclarationLevelChartData()
    this.getFindAlarmDisposalChartData()
  },
  beforeDestroy() {
    myChart2 = null
    myChart3 = null
  },
  created() {
    this.getFindMajorDangerSourceListAll()
    this.getListDisposal()
    this.getFindMajorDangerSourceCount()
  },
  methods: {
    initEcharts1(o) {
      myChart2 = echarts.init(document.querySelector('#main2'))
      const img = 'data:image/png;base64,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'
      const trafficWay = o.seriesData
      const data = []
      const color = ['#ee0e44', '#fc5600', '#9628a3', '#fedc00']
      for (let i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      const seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [55, 59],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          data: data
        }
      ]
      const option = {
        color: color,
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 88,
                height: 88
              },
              left: 'center',
              top: 'center'
            }
          ]
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          icon: 'circle',
          orient: 'vertical',
          data: ['一级', '二级', '三级', '四级'],
          right: '30px',
          top: 'center',
          textStyle: {
            color: '#fff'
          },
          itemGap: 10
        },
        series: seriesOption
      }
      myChart2.setOption(option)
    },
    initEcharts2(o) {
      myChart3 = echarts.init(document.querySelector('#main3'))
      const data = o
      const series = []
      for (let i = 0; i < data.seriesData.length; i++) {
        series.push({
          name: data.legendData[i],
          type: 'bar',
          data: data.seriesData[i]
        })
      }
      const option = {
        color: ['#3db1ee', '#0def67', '#fc5008'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '12%',
          top: '16%',
          containLabel: true
        },
        legend: {
          top: 0,
          data: data.legendData,
          textStyle: {
            color: '#fff'
          }
        },
        dataZoom: [
          {
            show: true,
            height: 5,
            xAxisIndex: [0],
            bottom: '5%',
            right: '5%',
            start: 0,
            end: 50,
            moveHandleSize: '3',
            moveHandleStyle: {
              color: '#2a569e'
            },
            fillerColor: '#2a569e',
            textStyle: {
              color: 'transparent'
            },
            borderColor: '#3a7a95'
          },
          {
            type: 'inside',
            show: true,
            start: 0,
            end: 25
          }
        ],
        xAxis: {
          type: 'category',
          data: data.xAxisData,
          axisLabel: {
            rotate: 45,
            textStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          },
          splitLine: {
            show: false
          }
        },
        series
      }
      myChart3.setOption(option)
    },

    // 重大危险源统计
    getFindDeclarationLevelChartData() {
      requestFN('/api/homemajor/findDeclarationLevelChartData').then(res => {
        this.$nextTick(() => {
          this.initEcharts1(res.chartData)
        })
      })
    },
    // 危险源列表
    getFindMajorDangerSourceListAll() {
      requestFN('/api/homemajor/findMajorDangerSourceListAll').then(res => {
        if (res.varList) {
          // created by liuJiaNan description:数据展示多条可能出现滚动调，所以只展示3条
          this.block3List = []
          this.block3List = res.varList
        }
      })
    },
    // 报警信息
    getListDisposal() {
      requestFN('/api/homemajor/listDisposal').then(res => {
        if (res.varList) {
          // created by liuJiaNan description:数据展示多条可能出现滚动调，所以只展示3条
          this.block5List = []
          this.block5List = res.varList
        }
      })
    },
    getFindMajorDangerSourceCount() {
      requestFN('/api/homemajor/findMajorDangerSourceCount').then(res => {
        this.block1OptionsList = [
          { title: '重大危险源', count: res.pd.COUNTSOURCE },
          { title: '监测点数', count: res.pd.COUNTSOURCE * 2 },
          { title: '监测天数', count: res.pd.COUNTDAYS }
        ]
      })
    },
    getFindDisposalCount() {
      requestFN('/api/homemajor/findDisposalCount').then(res => {
        this.top_risk_list1 = [
          { title: '报警数', value: res.pd.COUNTALARM },
          { title: '已处置', value: res.pd.COUNTDISPOSED },
          { title: '处置中', value: res.pd.COUNTDISPOSAL }
        ]
      })
    },
    getFindAlarmChartData() {
      requestFN('/api/homemajor/findAlarmChartData').then(res => {
        this.$nextTick(() => {
          this.initEcharts3(res.chartData)
        })
      })
    },
    getVideoInfo(id) {
      requestFN('/api/homemajor/getVideoInfo', { VIDOMANAGER_ID: id }).then(res => {
        this.$nextTick(() => {
          this.videoForm = res.pd
          this.dialogVideo = true
        })
      })
    },
    getFindAlarmDisposalChartData() {
      requestFN('/api/homemajor/findAlarmDisposalChartData').then(res => {
        this.$nextTick(() => {
          this.initEcharts2(res.chartData)
        })
      })
    },
    initMap() {
      this.iframeSrc = config.weburl + 'static/mapshowimage.html?t=' + Math.random()
      requestFN('/api/homemajor/listMajordangersourceLocation').then(res => {
        this.$nextTick(() => {
          const boxList = this.initMapData()
          // eslint-disable-next-line no-new-object
          var wallMap = new Object() // 一公司外墙
          const iframe = document.querySelector('#iframe')
          // 处理兼容行问题
          if (iframe.attachEvent) {
            iframe.attachEvent('onload', function() {
              this.contentWindow.postMessage(
                {
                  'varList': res.varList,
                  'boxList': boxList,
                  'wallMap': wallMap,
                  'LONGITUDE': 119.65138731427636,
                  'LATITUDE': 39.93429609044706,
                  'distance': 800, // 距屏幕中心点距离（单位m）
                  'rotate': 60, // 旋转角（单位°）
                  'tilt': 45 // 倾斜角（单位°）
                }, '*')
            })
          } else {
            iframe.onload = function() {
              this.contentWindow.postMessage(
                {
                  'varList': res.varList,
                  'boxList': boxList,
                  'wallMap': wallMap,
                  'LONGITUDE': 119.65138731427636,
                  'LATITUDE': 39.93429609044706,
                  'distance': 800, // 距屏幕中心点距离（单位m）
                  'rotate': 60, // 旋转角（单位°）
                  'tilt': 45 // 倾斜角（单位°）
                }, '*')
            }
          }
        })
      })
    },
    load() {
      this.loading = true
      this.currentPage += 1
      this.getUnitPersonnel('1')
    },
    getUnitPersonnel(index) {
      requestFN(
        '/map/getUnitPersonnel?showCount=20' + '&currentPage=' + this.currentPage,
        {
          CORPINFO_ID: this.corpInfoId,
          AREA: this.area,
          GANGKOU: this.gangkou,
          INDEX: index
        }
      ).then((data) => {
        this.block3List = this.block3List.concat(data.varList)
        this.totalPage = data.page.totalPage
        this.currentPage = data.page.currentPage
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.renyuan {

  .block1 {
    width: 410px;
    background-color: rgba(0, 0, 0, 0.3);

    .options {
      padding: 10px;
      border: 1px solid;
      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0.4), rgba(58, 122, 149, 1)) 1;
      display: flex;
      flex-wrap: wrap;

      .option {
        flex:1;
        background-image: url("../../../assets/map/anquan/label.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 125px;
        height: 25px;
        font-size: 12px;
        line-height: 25px;
        text-align: center;
        color: #fff;
      }
    }
  }

  .block2,.block4 {
    margin-top: 10px;
    width: 410px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    .content {
      border: 1px solid;
      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
      border-top: none;
      padding: 5px 10px;

      #main2,#main3 {
        width: 405px;
        height: 150px;
      }
    }
  }

  .block3,.block5 {
    margin-top: 10px;
    width: 410px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    .content {
      border: 1px solid;
      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
      border-top: none;
      padding: 10px;

      .table {
        margin-top: 10px;
        .scroll {
          max-height: 100px;
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 5px;
          }

          &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background: rgba(2, 30, 81, 0.851);
          }

          &::-webkit-scrollbar-track {
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.1);
          }

          .tr {
            &:nth-child(odd) {
              background-color: transparent;
            }
          }
        }
        .tr {
          display: flex;

          &:nth-child(odd) {
            background-color: rgba(42, 86, 158, 0.53);
          }

          .td {
            flex: 1;
            text-align: center;
            font-size: 12px;
            color: #fff;
            padding: 5px;
          }
        }
      }
    }
  }
}
</style>
