<template>
  <div class="content-main-manage">
     <div class="content-main">
     <div class="content-body-wrap">
       <div class="content-body">
          <div class="search-list">
            <div class="search-left">
              <Form class="common-form common-form-list" ref="monitorParams" :model="monitorParams" inline>
                 <FormItem label="" prop="appId">
                  <Select v-model="monitorParams.appId" placeholder="来源应用">
                    <Option v-for="item in appData" :value="item.id" :key="item.id">{{ item.appName}}</Option>
                  </Select>
                </FormItem>
                <FormItem label="" prop="dateType">
                  <Select v-model="monitorParams.dateType" placeholder="请选择报告类型" @on-change="selectReport">
                      <Option v-for="item in reportList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="" prop="dateStr">
                   <DatePicker type="date" :value="monitorParams.dateStr" placeholder="Select date" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='DAY'" @on-change="changeDate"></DatePicker>
                   <DatePicker type="month" :value="monitorParams.dateStr" placeholder="Select year" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='MONTH'" @on-change="changeDate"></DatePicker>
                   <DatePicker type="year"  :value="monitorParams.dateStr" placeholder="Select year"  :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" v-show="monitorParams.dateType=='YEAR'" @on-change="changeDate"></DatePicker>
                </FormItem>
                <FormItem label="" >
                  <Button type="primary" class="common-btn-search" @click="searchClick">
                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
                  </Button> 
                  <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick">
                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
                  </Button>
                </FormItem>
              </Form>
            </div>
            </div> 
            <statistics-list :tabsInitData="tabsInitData" :statisParams="monitorParams" :tabsTitleColor="tabsTitleColor" :unitArr="unitArr" :tabsIcon="tabsIcon" url="metroapi/dataQuality/insp/statistical" ref="statistics"></statistics-list>
           <div class="manage-main-center">
              <Row :gutter="16">
              <Col :span="8">
                <loading-animation class="line-loading" loadingTitle="准确性-数据内容准确性" v-if="loading1"></loading-animation>
                <div v-else class="line-loading">
                  <div v-show="!showImg1" class="line-loading">
                    <div class="manage-title">
                      <span>准确性-数据内容准确性</span>
                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                    </div>
                    <div id="line1" class="line-loading-echarts"></div>
                  </div>
                  <no-data v-show="showImg1" class="line-loading no-title-data" nodataTitle="准确性-数据内容准确性"></no-data>
                </div>
              </Col>
              <Col :span="8">
               <loading-animation class="line-loading" loadingTitle="数据一致性-数据类型一致性" v-if="loading2"></loading-animation>
                <div v-else class="line-loading">
                  <div v-show="!showImg2" class="line-loading">
                    <div class="manage-title">
                      <span>数据一致性-数据类型一致性</span>
                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                    </div>
                    <div id="line2" class="line-loading-echarts"></div>
                  </div>
                  <no-data v-show="showImg2" class="line-loading no-title-data" nodataTitle="数据一致性-数据类型一致性"></no-data>
                </div>
              </Col>
              <Col :span="8">
               <loading-animation class="line-loading" loadingTitle="数据一致性-处理前后一致性" v-if="loading3"></loading-animation>
               <div v-else class="line-loading">
                  <div v-show="!showImg3" class="line-loading">
                    <div class="manage-title">
                      <span>数据一致性-处理前后一致性</span>
                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                    </div>
                    <div id="line3" class="line-loading-echarts"></div>
                  </div>
                  <no-data v-show="showImg3" class="line-loading no-title-data" nodataTitle="数据一致性-处理前后一致性"></no-data>
                </div>
              </Col>
            </Row>
            <Row :gutter="16" style="padding-top:10px">
              <Col :span="8">
               <loading-animation class="line-loading" loadingTitle="及时性-数据采集" v-if="loading4"></loading-animation>
               <div v-else class="line-loading">
                  <div v-show="!showImg4" class="line-loading">
                    <div class="manage-title">
                      <span>及时性-数据采集</span>
                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                    </div>
                    <div id="line4" class="line-loading-echarts"></div>
                  </div>
                  <no-data v-show="showImg4" class="line-loading no-title-data" nodataTitle="及时性-数据采集"></no-data>
                </div>
              </Col>
              <Col :span="8">
               <loading-animation class="line-loading" loadingTitle="及时性-数据入库" v-if="loading5"></loading-animation>
               <div v-else class="line-loading">
                  <div v-show="!showImg5" class="line-loading">
                    <div class="manage-title">
                      <span>及时性-数据入库</span>
                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                    </div>
                    <div id="line5" class="line-loading-echarts"></div>
                  </div>
                  <no-data v-show="showImg5" class="line-loading no-title-data" nodataTitle="及时性-数据入库"></no-data>
                </div>
              </Col>
              <Col :span="8">
               <loading-animation class="line-loading" loadingTitle="数据完整性" v-if="loading6"></loading-animation>
               <div v-else class="line-loading">
                  <div v-show="!showImg6" class="line-loading">
                    <div class="manage-title">
                      <span>数据完整性</span>
                      <span class="title-right">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                    </div>
                    <div id="line6" class="line-loading-echarts"></div>
                  </div>
                  <no-data v-show="showImg6" class="line-loading no-title-data" nodataTitle="数据完整性"></no-data>
                </div>
              </Col>
            </Row>
           </div>
       </div>
     </div>
    </div>
    <Modal
      v-model="showModal"
      :title="title"
      width="40"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      footer-hide
      class-name="common-modal">
      <div class="common-modal-body">
        <div class="common-modal-top">
          <div class="common-modal-top-left">
            <span>质量规则</span>
            <span class="modal-top-left-color1">4444条</span>
            <span>监测记录</span>
            <span class="modal-top-left-color2">445544条</span>
            <span>异常记录</span>
            <span class="modal-top-left-color3">44条</span>
          </div>
          <div id="guage" class="common-modal-top-right"></div>
        </div>
        <div class="common-modal-content">
          <span>监测异常记录</span>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import * as echarts from "echarts"
import StatisticsList from '../../../components/StatisticsList.vue'
import moment from 'moment'
export default {
  name: "DataMonitor",
  components: {
    StatisticsList
  },
  data() {
    return {
      tabsIcon: [
        { imgSrc: require('@/assets/images/dataReport1.png') },
        { imgSrc: require('@/assets/images/dataReport2.png') },
        { imgSrc: require('@/assets/images/dataReport3.png') },
        { imgSrc: require('@/assets/images/dataReport4.png') },
        { imgSrc: require('@/assets/images/dataReport5.png') },
      ],
      tabsTitleColor:['#45F2FD', '#EBF310', '#54D593', '#FD7545'],
      unitArr: ['个','种','条','种'],
      tabsInitData: [
        { name: '监测覆盖应用', value: 0},
        { name: '覆盖业务类型', value: 0},
        { name: '监测规则', value: 0},
        { name: '规则维度', value: 0},
      ],
      reportList: [{label: "日报",value: 'DAY'},{label: "月报",value: 'MONTH'},{label: "年报",value: 'YEAR'}],
      monitorParams: {
        appId: '-1',
        dateType: 'DAY',
        dateStr: moment(new Date(new Date().getTime())).format('YYYY-MM-DD')
      },
      applicationParams: {
        level: '',
        lineId: '',
        stationId: '',
        equipmentCheck: '',
        instrumentCheck: '',
        pageNum: 1,
        pageSize: 9999
      },
      appData: [],
      loading1: true,
      loading2: true,
      loading3: true,
      loading4: true,
      loading5: true,
      loading6: true,
      showImg1: false,
      showImg2: false,
      showImg3: false,
      showImg4: false,
      showImg5: false,
      showImg6: false,
      showModal: false,
      title: '',
    //   optionsDay: {
    //     disabledDate(date) {
    //       return date && date.valueOf() < Date.now() - 86400000 //可选择今日起之后的日期
    //     }
    //   },
    //  optionsMonth: {
    //     disabledDate(date) {
    //       var dateNow = new Date() ; //之前月份禁用
    //       return date && date.valueOf() < dateNow.setMonth(dateNow.getMonth()-1);
    //     }
    //   },
    };
  },
  mounted() {
    this.getType()
    this.getEcharts()
  },
  methods: {
     getType  () {
      // 指标类型数据
      this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
        if (res.httpCode == 1 ){
          this.appData = res.data.data
          this.appData.unshift({ id: '-1', appName: '来源应用' })
        } else {
          this.appData = []
        }
      })
    },
    searchClick () {
      this.$refs.statistics.getStatisList()
      this.getEcharts()
      // this.getDetailData()
      // this.title = '准确性-数据内容准确性'
      // this.showModal = true
      // this.monitorParams.pageNum = 1
      // this.getTableData()
    },
    resetClick () {
      this.monitorParams.appId = '-1'
      this.monitorParams.dateType = 'DAY'
      this.monitorParams.dateStr =  moment(new Date(new Date().getTime())).format('YYYY-MM-DD')
      this.$refs.statistics.getStatisList()
      this.getEcharts()
    }, 
    modalChange (modalStatus) {
     if (!modalStatus) {
      this.$refs.formOption.resetFields();
     }
    },
    selectReport (val) {
      if (val == 'DAY') {
        this.monitorParams.dateStr = moment(new Date(new Date().getTime())).format('YYYY-MM-DD')
      } else if (val == 'MONTH') {
        this.monitorParams.dateStr = moment(new Date(new Date().getTime())).format('YYYY-MM')
      } else {
        this.monitorParams.dateStr = moment(new Date(new Date().getTime())).format('YYYY')
      } 
    },
    changeDate (date) {
     this.monitorParams.dateStr = date
    },
    getEcharts () {
      let params = JSON.parse(JSON.stringify(this.monitorParams))
      params.appId= params.appId == '-1'?'':params.appId
      params.modelType = '准确性'
      this.loading1 = true
      this.$get('metroapi/dataQuality/insp/trend',params).then(res=>{
        this.loading1 = false
        if (res.httpCode == 1 ){
          this.showImg1 = false
          let obj = res.data
          obj.id = 'line1'
          obj.legend = ['']
          obj.lineColor = ['#2F9B34']
          obj.unit = '%'
          this.$nextTick(() => this.creatLine(obj))
        } else {
          this.showImg1 = true
        } 
      })
      let params2 = JSON.parse(JSON.stringify(params))
      params2.modelType = '一致性'
      this.loading2 = true
      this.$get('metroapi/dataQuality/insp/trend',params2).then(res=>{
        this.loading2 = false
        if (res.httpCode == 1 ){
          this.showImg2 = false
          let obj = res.data
          obj.id = 'line2'
          obj.legend = ['']
          obj.lineColor = ['#F18404']
          obj.unit = '%'
          this.$nextTick(() => this.creatLine(obj))
        } else {
          this.showImg2 = true
        } 
      })
      let params3 = JSON.parse(JSON.stringify(params))
      params3.modelType = '一致性'
      this.loading3 = true
      this.$get('metroapi/dataQuality/insp/trend',params3).then(res=>{
        this.loading3 = false
        if (res.httpCode == 1 ){
          this.showImg3 = false
          let obj = res.data
          obj.id = 'line3'
          obj.legend = ['']
          obj.lineColor = ['#7A70D6']
          obj.unit = '%'
          this.$nextTick(() => this.creatLine(obj))
        } else {
          this.showImg3 = true
        } 
      })
      let params4 = JSON.parse(JSON.stringify(params))
      params4.modelType = '及时性（数据采集）'
      this.loading4 = true
      this.$get('metroapi/dataQuality/insp/trend',params4).then(res=>{
        this.loading4 = false
        if (res.httpCode == 1 ){
          this.showImg4 = false
          let obj = res.data
          obj.id = 'line4'
          obj.legend = ['']
          obj.lineColor = ['#FB638B']
          obj.unit = '%'
          this.$nextTick(() => this.creatLine(obj))
        } else {
          this.showImg4 = true
        } 
      })
      let params5 = JSON.parse(JSON.stringify(params))
      params5.modelType = '及时性（数据入库）'
      this.loading5 = true
      this.$get('metroapi/dataQuality/insp/trend',params5).then(res=>{
        this.loading5 = false
        if (res.httpCode == 1 ){
          this.showImg5 = false
          let obj = res.data
          obj.id = 'line5'
          obj.legend = ['']
          obj.lineColor = ['#54A4F8']
          obj.unit = '%'
          this.$nextTick(() => this.creatLine(obj))
        } else {
          this.showImg5 = true
        } 
      })
      let params6 = JSON.parse(JSON.stringify(params))
      params6.modelType = '完整性'
      this.loading6 = true
      this.$get('metroapi/dataQuality/insp/trend',params6).then(res=>{
        this.loading6 = false
        if (res.httpCode == 1 ){
          this.showImg6 = false
          let obj = res.data
          obj.id = 'line6'
          obj.legend = ['']
          obj.lineColor = ['#EBF310']
          obj.unit = '%'
          this.$nextTick(() => this.creatLine(obj))
        } else {
          this.showImg6 = true
        } 
      })
    },
    getDetailData () {
      let params = {
        dateStrDate: '2022-03-01',
        endDate: '2022-03-31'
      }
      this.$get('metroapi/dataQuality/report/comScores',params).then(res => {
        if (res.httpCode == 1) {
          let obj = res.data
          obj.id = 'guage'
          this.$nextTick(() => this.creatGauge(obj))
        }
      })
    },
    creatLine (lineData) {
      let toplinechart = echarts.init(document.getElementById(lineData.id));
      let seriesData = _.map(lineData.legend, (item,index)=>({
          name: lineData.legend[index], type: 'line', symbol: 'circle', symbolSize: 2,smooth: true, // 平滑曲线
          lineStyle: { normal: { color: lineData.lineColor[index], width: 2 } },
          itemStyle: { normal: { color: lineData.lineColor[index], borderColor: lineData.lineColor[index], borderWidth: 2 },
          emphasis: { color: '#fff' }
        },
        areaStyle: { opacity:0.4,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0.3, color: lineData.lineColor[index]}, { offset: 1, color: 'rgba(0,0,0,0)' }])},
        data: lineData.data
      }))
      let toplineoption = {
        legend: {
          top: '5%', left: 'center', itemWidth: 10, itemHeight: 10, itemGap: 25,
          textStyle: { color: '#fff', fontSize: 12 },
          data: lineData.legend
        },
        tooltip: { trigger: "axis",
          confine: true,
          backgroundColor: '#011235',
          borderWidth: 0,
          extraCssText: 'opacity:0.8',
          textStyle: {
            color: '#fff'
          },
        formatter: function (params) {
          let res = ''
          params.forEach((item,i) => {
            res += '<div style="display: flex;align-items:center;justify-content:space-between"><span>'+ item.marker + item.seriesName + '：</span><span>' +  item.value + lineData.unit+'</span></div> '
          })
          return params[0].name + res
        }
        },
        grid: {
          top: '10%', 
          left: "6%",
          right: "6%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: lineData.category,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#00479D',
              width: 1
            }
          },
          axisLabel: {
            color: '#fff',
          },
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00479D',
              width: 1
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              width: 1,
              color: "#153068"
            }
          },
          axisLabel: {
            show: true,
            color: '#fff'
          }
        }],
        series: seriesData
      }
      toplinechart.resize()
      toplinechart.clear()
      toplinechart.setOption(toplineoption)
      window.addEventListener("resize", function () { toplinechart.resize() })
    },
    creatGauge(gaugeData) {
      let titleArr = this.title.split('-')
      let myChart = echarts.init(document.getElementById(gaugeData.id))
      let option = {
         series: [
            {
              type: 'gauge',
              center: ['55%', '55%'],
              radius:'110%',
              min: 0,
              max: 100,
              progress: {
                show: true,
                width: 18
              },
              itemStyle: {
                color: '#4992FF'
              },
              axisLine: {
                lineStyle: {
                  color:[[1, '#36344E']],
                  width: 18
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                length: 10,
                lineStyle: {
                  width: 2,
                  color: '#363349'
                }
              },
              axisLabel: {
                distance: 25,
                color: '#fff',
                fontSize: 12
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 25,
                itemStyle: {
                  borderWidth: 10
                }
              },
              title: {
                offsetCenter: [0, '70%'],
                fontSize: 12,
                color:'#fff'
              },
              detail: {
                valueAnimation: true,
                fontSize: 26,
                offsetCenter: [0, '40%'],
                formatter: '{value} %',
                color: '#4992FF'
              },
              data: [
                {
                  value: gaugeData.scores,
                  name: titleArr[0]+'\n\n'+titleArr[1]
                }
              ]
            }
          ]
        };
      myChart.resize()
      myChart.clear()
      myChart.setOption(option)
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },
    // 获取实时大数据处理
    // getRealTimeFirst() {
    //   this.loading1 = true
    //   this.$get('api/dataCenter/realTimeData', {
    //     flag: 1
    //   }).then(res => {
    //     this.loading1 = false
    //     if (res.httpCode == 1) {
    //       this.showImg1 = false
    //       let obj = res.data
    //       obj.id = 'line'
    //       this.$nextTick(() => this.creatLine(obj))
    //     } else {
    //       this.showImg1 = true
    //     }
    //   })
    // },
  }
};
</script>
<style scoped lang="stylus">
.content-main-manage {
  overflow: hidden;
  height: calc(100% - 50px);
  width: 100%;
}
.content-main {
  width: 100%;
  height: 100%;
}
.content-body-wrap {
  width: 100%;
  height: 100%;
  background: #06214d;
  padding: 10px;
}
.content-body {
  height: 100%;
  position: relative;
}
.search-list {
  display: flex;
  justify-content: space-between;
  padding: 0 0 15px 0;
}
.search-left {
  display: flex;
  align-items: center;
   .ivu-select {
     width: 150px;
     height: 32px;
   }
   .ivu-select-single .ivu-select-selection {
     height: 100%;
   }
    >>> .ivu-input {
     width: 150px;
     height: 32px;
   }
    >>> .ivu-date-picker-editor .ivu-input {
     width: 150px;
   }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
     height: 32px;
     line-height: 32px;
   }
}
>>> .common-form-list .ivu-form-item {
 margin-bottom: 0px;
}
.manage-main-center {
  width: 100%;
  height: calc(100% - 165px);
  padding-top: 10px;
}
/* 对话框里的input里的placeholder样式修改 */
/deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{   /* Mozilla Firefox 19+ */
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholde, /deep/ .ivu-input-number-input::-webkit-input-placeholderr{    /* Mozilla Firefox 4 to 18 */
 color: #718EBD;
}
/deep/ .ivu-input::-ms-input-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{  /* Internet Explorer 10-11 */
  color: #718EBD;
}
>>> .ivu-row {
  height: 50%;
}
.line-loading {
  height: 100%;
}
.manage-title {
   color: #ec9c45;
    font-size: 14px;
    color: #FEF0F0;
    font-weight: bold;
    height: 50px;
    background: #14316A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .title-right {
    color: #D7790C;
    font-size: 12px;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
.line-loading-echarts {
  height: calc(100% - 50px);
  border: 1px solid #204384;
}
.no-title-data {
  border: 1px solid #204384;
}
.common-modal-top {
  height: 234px;
  border: 1px solid #1F4584;
  padding: 20px;
  display: flex;
}
.common-modal-top-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  width: 40%;
  span {
    width: 50%;
  }
  span:nth-child(odd) {
    color: #FFFFFF;
    font-size: 16px;
  }
  span:nth-child(even) {
   text-align: right;
   font-size: 30px;
   font-weight: bold;
  }
  .modal-top-left-color1 {
    color:#DAA924;
  }
  .modal-top-left-color2 {
    color:#24DA93;
  }
  .modal-top-left-color3 {
    color:#F84C78;
  }
}
.common-modal-top-right {
  height: 100%;
  width: 60%;
}
.common-modal-content {
  margin: 20px 0;
}
.common-modal-content span { 
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
}
</style>