<template>
  <div class="dashboard-container">
    <div class="basicData">
      <el-row :gutter="15">
        <el-col :span="6">
          <div class="grid-content">
            <div class="sumName">已加装机车（辆）</div>
            <div class="sunNum" style="color: #2250C8;">{{ this.basicData.vehicleNum }}</div>
            <img src="@/assets/编组 19.png" width="66px">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="sumName">车载终端（台）</div>
            <div class="sunNum" style="color: #FAD44A;">{{ this.basicData.terminalNum }}</div>
            <img src="@/assets/编组 20.png" width="66px">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="sumName">接入报警（条）</div>
            <div class="sunNum" style="color: #F04762;">{{ this.basicData.alarmNum }}</div>
            <img src="@/assets/编组 21.png" width="66px">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="sumName">接入摄像机（台）</div>
            <div class="sunNum" style="color: #04E14C;">{{ this.basicData.cameraNum }}</div>
            <img src="@/assets/编组 22.png" width="66px">
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="chart-content">
      <div class="searchc-ontent">
        <el-select v-model="params.railwayCode" placeholder="请选择线路" style="width: 272px;" clearable>
          <el-option v-for="item in lineWayData" :key="item.railwayCode" :label="item.railwayName"
            :value="item.railwayCode" />
        </el-select>
        <el-date-picker value-format="yyyy" v-model="params.currentYear" style="width: 272px;" type="year"
          placeholder="请选择年份">
        </el-date-picker>
        <el-select style="width: 272px;" v-model="params.currentMonth" placeholder="请选择月份" clearable>
          <el-option v-for="item in startMont" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="search-btn">
          <div class="search" @click="searchData">查询</div>
          <div class="reset" @click="reset">重置</div>
        </div>
      </div>
      <div class="diseaseAndDisaster">
        <div class="s1">
          <div class="topTitle">
            <div style="width: 3px;height: 13px;background-color: #2250C8;display: inline-block;margin-right: 4px;"></div>
            <span style="color: #1C1C1C;font-size: 16px;font-weight: 500;">报警类型占比</span>
          </div>
          <div id="alarmTypeStatistic" :style="{ width: '100%', height: '100%' }"></div>
        </div>
        <div class="s2"></div>
        <div class="s3">
          <div class="topTitle">
            <div style="width: 3px;height: 13px;background-color: #2250C8;display: inline-block;margin-right: 4px;"></div>
            <span style="color: #1C1C1C;font-size: 16px;font-weight: 500;">报警频发地点</span>
            <div class="exportData" @click="alarmTypeAreaCountExport()">导出数据</div>
          </div>
          <div style="width: 100%;height: 66px;"></div>
          
          
          <div v-if="homeDisasterLocationData.length != 0" v-for="(item, index) in homeDisasterLocationData" class="ranking">
            <div class="index" v-if="index == 0 || index == 1 || index == 2">
              {{ index + 1 }}
            </div>
            <div class="index1" v-if="index == 3 || index == 4">
              {{ index + 1 }}
            </div>
            <span>{{ item.railwayName }}</span>&nbsp;
            <span>{{ item.alarmMiles }}</span>
            <el-progress style="width: 55%;position: relative;left: 180px;top: -23px;" :color="customColor"
              :show-text="false" :stroke-width="10" :percentage="percentage(item.frequency)"></el-progress>
            <span style="display: inline-block;float: right;position: relative;top: -45px;">{{
              item.frequency + '次' }}</span>
          </div>
          <div @click="more" class="moreStyle" style="font-size: 12px;
            color: red;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            position: absolute;
            right: 44px;
            bottom: 37px;
            cursor: pointer;">
            更多>
          </div>
          <div v-if="homeDisasterLocationData.length == 0" style="text-align: center;">
            <img src="@/assets/暂无数据.png" style="text-align: center;"/>
          </div>
          <rankingDialog v-if="rankingData.dialogVisible" :rankingData="rankingData" :nedData="params"></rankingDialog>
        </div>
      </div>
      <div class="alarmStatistics">
        <div class="topTitle">
          <div style="width: 3px;height: 13px;background-color: #2250C8;display: inline-block;margin-right: 4px;"></div>
          <span style="color: #1C1C1C;font-size: 16px;font-weight: 500;">报警趋势分析</span>
          <div class="exportData" @click="exportDataStatisticMonth()">导出数据</div>
        </div>
        <div id="echartAnalyData" style="width: 100%; height: 90%"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";

import {
  getBasicdata,
  alarmTypeStatistic,
  alarmMonthStatistic,
  exportDataStatisticMonth,
  alarmTypeAreaCount,
  alarmTypeAreaCountExport
} from "@/api/sum";
import { getLineWayList } from '@/api/account/camera'
import rankingDialog from "./components/rankingDialog.vue";
export default {
  name: "home",
  computed: {
    ...mapGetters(["name"]),
  },
  components: {
    rankingDialog
  },
  data() {
    return {
      params: {
        railwayCode: '',
        currentYear: '',
        currentMonth: ''
      },
      time: '',
      basicData: {
        vehicleNum: null,
        terminalNum: null,
        alarmNum: null,
        cameraNum: null
      },
      disasterProportionData: [],
      diseaseNum:0,
      monthData: [],
      numData: [],
      getAlarmMonData: [],
      startMont: [
        {
          value: '1',
          label: '1月'
        },
        {
          value: '2',
          label: '2月'
        },
        {
          value: '3',
          label: '3月'
        },
        {
          value: '4',
          label: '4月'
        },
        {
          value: '5',
          label: '5月'
        },
        {
          value: '6',
          label: '6月'
        },
        {
          value: '7',
          label: '7月'
        },
        {
          value: '8',
          label: '8月'
        },
        {
          value: '9',
          label: '9月'
        },
        {
          value: '10',
          label: '10月'
        },
        {
          value: '11',
          label: '11月'
        },
        {
          value: '12',
          label: '12月'
        }
      ],
      lineWayData: [],
      customColor: '#6791FF',
      homeDisasterLocationData: [],
      rankingData: {
        dialogVisible: false,
      }
    }
  },
  mounted() {
    this.initDisasterProportion()
    this.getAlarmMonthDataList()
    this.alarmTypeAreaCount()
    this.getLineWayList()
  },
  created() {
    getBasicdata().then(res => {
      if (res.code == 200) {
        this.basicData.vehicleNum = res.data.vehicleNum
        this.basicData.terminalNum = res.data.terminalNum
        this.basicData.alarmNum = res.data.alarmNum
        this.basicData.cameraNum = res.data.cameraNum
      }
    })
  },
  methods: {
    exportDataStatisticMonth() {

      exportDataStatisticMonth('/service/dataStatistic/exportDataStatisticMonth', this.params).then(res => {
        // const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
        // const url = window.URL.createObjectURL(blob);
        // const a = document.createElement('a');
        // a.href = url;
        // a.download = '报警趋势分析.xlsx';
        // a.click();
        // window.URL.revokeObjectURL(url);

        if (res.type == "application/json") {
          const reader = new FileReader(); 
          reader.readAsText(res, 'utf-8'); 
          reader.onload = function () {
            const msg = JSON.parse(reader.result);
            if(msg.code == 200){
              const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
              const url = window.URL.createObjectURL(blob);
              const a = document.createElement('a');
              a.href = url;
              a.download = '报警趋势分析.xlsx';
              a.click();
              window.URL.revokeObjectURL(url);
            } else{
              Message({
                type: 'error',
                message: msg.msg
              });
            }      
          }
        }else{
          const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = '报警趋势分析.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        }


      })

    },
    alarmTypeAreaCountExport() {


      alarmTypeAreaCountExport('/service/dataStatistic/alarmTypeAreaCountExport', this.params).then(res => {

        // const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
        // const url = window.URL.createObjectURL(blob);
        // const a = document.createElement('a');
        // a.href = url;
        // a.download = '报警频发地点排名.xlsx';
        // a.click();
        // window.URL.revokeObjectURL(url);

        if (res.type == "application/json") {
          const reader = new FileReader(); 
          reader.readAsText(res, 'utf-8'); 
          reader.onload = function () {
            const msg = JSON.parse(reader.result);
            if(msg.code == 200){
              const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
              const url = window.URL.createObjectURL(blob);
              const a = document.createElement('a');
              a.href = url;
              a.download = '报警频发地点排名.xlsx';
              a.click();
              window.URL.revokeObjectURL(url);
            } else{
              Message({
                type: 'error',
                message: msg.msg
              });
            }      
          }
        }else{
          const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = '报警频发地点排名.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        }

      })


    },
    initDisasterProportion() {
      this.disasterProportionData = []
      this.diseaseNum = 0
      alarmTypeStatistic(this.params).then(res => {        
        if (res.data) {
          res.data.forEach(item => {
            this.diseaseNum += item.frequency
            this.disasterProportionData.push({
              value: parseInt(item.percent.slice(0, -1)),
              name: item.alarmTypeValue,
              frequency: item.frequency
            })
          })
        } else {
          this.disasterProportionData = []
          this.diseaseNum = 0
        }
        let ecPie = echarts.init(document.getElementById('alarmTypeStatistic'));
        let pieOption = {
          tooltip: {
            show: true,
            trigger: 'item' ,
            formatter:(item) => {              
              return item.data.name + '\r' + item.data.value + '%' + '\r' + item.data.frequency + '次'
            }
          },
          legend: {
            orient: 'vertical',
            top: '65%',
            right: '40',            
          },
          series: [
            {
              name: '灾害占比',
              type: 'pie',
              radius: ['55%', '70%'],
              center: ["35%", "45%"],
              avoidLabelOverlap: false,              
              label: {
                position: 'center',
                show: true,
                formatter: () => {
                  let str = '报警总数' + '\n' + `${this.diseaseNum}`
                  return str
                },
                color: '#1C1C1C',
                lineHeight: 25,
                fontSize: 16,
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     fontSize: 40,
              //     fontWeight: 'bold'
              //   }
              // },
              labelLine: {
                show: false
              },
              data: this.disasterProportionData
            }
          ]
        }
        ecPie.setOption(pieOption);
      })

    },
    getAlarmMonthDataList() {
      this.monthData = []
      this.numData = []
      alarmMonthStatistic(this.params).then(res => {
        this.getAlarmMonData = res.data
        this.getAlarmMonData.forEach((item) => {
          if (item) {
            if (this.params.currentMonth) {
              this.monthData.push(item.monthsta + '日')
              this.numData.push(item.frequency)
            } else {
              this.monthData.push(item.monthsta + '月')
              this.numData.push(item.frequency)
            }
          }
        })
        var myChart = echarts.init(document.getElementById('echartAnalyData'))
        // 指定图表的配置项和数据
        const option = {
          title: [
            {
              subtext: '报警数（次）',
              left: 25, // 距离左边位置
              top: 20, // 距离上面位置
              subtextStyle: {
                // 设置二级标题的样式
                color: '#000'
              }
            }
          ],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            // data: ["计划数量"],
            right: '60',
            textStyle: {
              fontSize: 10, // 字体大小
              color: '#000' // 字体颜色
            }
          },
          xAxis: {
            data: this.monthData,
            axisLine: {
              // x轴线的颜色以及宽度
              show: true,
              lineStyle: {
                color: '#000',
                width: 0,
                type: 'dashed'
              }
            },
            axisLabel: {
              interval: 0
              // rotate: 35
            }
          },
          animation: true,
          animationDuration: 5000,
          yAxis: [
            {
              name: '报警数（次）',
              min: 0,
              max: null,
              splitLine: {
                // 分割线配置
                show: true,
                lineStyle: {
                  type: 'line',
                  color: '#EBEEF5'
                }
              },
              axisLabel: {
                // y轴文字的配置
                textStyle: {
                  color: '#000' // Y轴内容文字颜色
                }
              }
            },
            {
              min: 40,
              splitLine: {
                // 分割线配置
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(255,255,255,0.8)'
                }
              },
              axisLabel: {
                // y轴文字的配置
                textStyle: {
                  color: '#000' // Y轴内容文字颜色
                }
              }
            }
          ],
          title: [
            {
              // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
              subtext: '单位（万件）',
              left: -5, // 距离左边位置
              top: 20, // 距离上面位置
              subtextStyle: {
                // 设置二级标题的样式
                color: 'rgba(255,255,255,0.7)'
              }
            },
            {
              // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
              subtext: '单位（万件）',
              right: -5, // 距离左边位置
              top: 20, // 距离上面位置
              subtextStyle: {
                // 设置二级标题的样式
                color: 'rgba(255,255,255,0.7)'
              }
            }
          ],
          series: [
            {
              type: 'bar', // 形状为柱状图
              // name: '计划数量',
              // yAxisIndex:1,
              data: this.numData,
              barWidth: 20,
              itemStyle: {
                //
                normal: {
                  color: '#2866DD'
                }
              }
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      })
    },
    getLineWayList() {
      getLineWayList({}).then((res) => {
        this.lineWayData = res.data
      })
    },
    searchData() {
      this.initDisasterProportion()
      this.getAlarmMonthDataList()
      this.alarmTypeAreaCount()
    },
    reset() {
      this.params = {
        railwayCode: '',
        currentYear: '',
        currentMonth: ''
      }
      this.initDisasterProportion()
      this.getAlarmMonthDataList()
      this.alarmTypeAreaCount()
    },
    alarmTypeAreaCount() {
      this.homeDisasterLocationData = []
      alarmTypeAreaCount({
        pageNum: 1,
        pageSize: 5,
        railwayCode: this.params.railwayCode,
        currentYear: this.params.currentYear,
        currentMonth: this.params.currentMonth
      }).then(res => {
        this.homeDisasterLocationData = res.data.records
      })
    },
    percentage(val) {
      return val / (val + 5) * 100
    },
    more() {
      this.rankingData.dialogVisible = true
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {
  .basicData {
    background-color: #F5F5F5;

    .grid-content {
      height: 116px;
      background-color: #fff;

      .sumName {
        position: relative;
        top: 16px;
        left: 21px;
        color: #272727;
        font-size: 16px;
      }

      .sunNum {
        position: relative;
        top: 27px;
        left: 21px;
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
      }

      img {
        display: block;
        float: right;
        margin-right: 20px;
        margin-top: -20px;
      }
    }
  }

  .chart-content {
    padding: 0 15px 28px;
    margin-top: 10px;
    background-color: #fff;
    width: 100%;

    .searchc-ontent {
      background-color: #fff;
      height: 76px;
      width: 100%;
      // margin-left: 10px;
      display: flex;
      align-items: center;

      .el-input {
        margin-right: 20px;
      }

      .el-select {
        margin-right: 20px;
      }

      .search-btn {
        display: flex;
        align-items: center;
        height: 100%;
        // margin-left: 10px;

        div {
          // margin: 0 6px;
          display: inline-block;
          width: 80px;
          height: 40px;
          border-radius: 2px;
          font-size: 14px;
          line-height: 40px;
          text-align: center;
        }

        div:hover {
          cursor: pointer;
        }

        .search {
          // margin: 0 10px;
          background-color: #2766DD;
          color: #F7F8FB;
        }

        .search:hover {
          background-color: #4D85F4;
        }

        .reset {
          color: #333334;
          margin-left: 10px;
          border: 1px solid #D7D7D7;
        }

        .reset:hover {
          color: #1F9FFF;
          border: 1px solid #1F9FFF;
        }
      }
    }

    .diseaseAndDisaster {
      width: 100%;
      height: 484px;

      .s1 {
        height: 484px;
        width: 49.5%;
        float: left;
        box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03);

        .topTitle {
          width: 100%;
          height: 54px;
          padding: 23px 0 0 10px;
          border-bottom: 1px solid rgba(228, 228, 228, 1);
        }
      }

      .s2 {
        height: 484px;
        width: 1%;
        float: left;
      }

      .s3 {
        height: 484px;
        width: 49.5%;
        float: left;
        box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03);
        position: relative;

        .topTitle {
          width: 100%;
          height: 54px;
          padding: 23px 0 0 10px;
          border-bottom: 1px solid rgba(228, 228, 228, 1);

          .exportData {
            position: relative;
            top: -13px;
            margin-right: 20px;
            width: 98px;
            height: 34px;
            color: #fff;
            font-size: 14px;
            background-color: #2766DD;
            border-radius: 2px;
            text-align: center;
            line-height: 34px;
            float: right;
            cursor: pointer;
          }

          .exportData:hover {
            background-color: #4D85F4;
          }
        }

        .ranking {
          width: 80%;
          height: 55px;
          line-height: 35px;
          margin: 0 auto;
          font-size: 14px;

          .index {
            margin-right: 36px;
            display: inline-block;
            width: 28px;
            height: 16px;
            line-height: 16px;
            border-radius: 8px;
            background-color: #223E87;
            text-align: center;
            color: #fff;
          }

          .index1 {
            margin-right: 36px;
            display: inline-block;
            width: 28px;
            height: 16px;
            line-height: 16px;
            border-radius: 8px;
            background-color: #DDE7FF;
            text-align: center;
            color: #696969;
          }

          // .moreStyle{
          //   font-size: 12px;
          //   color: #2766DD;
          //   cursor: pointer;
          // }
        }
      }
    }

    .alarmStatistics {
      width: 100%;
      height: 484px;
      margin-top: 15px;
      box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03);

      .topTitle {
        width: 100%;
        height: 54px;
        padding: 23px 0 0 10px;
        border-bottom: 1px solid rgba(228, 228, 228, 1);

        .exportData {
          position: relative;
          top: -13px;
          margin-right: 20px;
          width: 98px;
          height: 34px;
          color: #fff;
          font-size: 14px;
          background-color: #2766DD;
          border-radius: 2px;
          text-align: center;
          line-height: 34px;
          float: right;
          cursor: pointer;
        }

        .exportData:hover {
          background-color: #4D85F4;
        }
      }
    }

  }
}
</style>
