tysw_dpweb/src/widgets/Warning/Widget.ts

import BaseWidget = require('core/BaseWidget.class');
declare var echarts;

/**
 * 报警信息
 */
class Warning extends BaseWidget {
  baseClass: string = "widget-Warning";  
  chart: any;
  toast: any;
  popupDiv: any;


  /**
   * 启动模块
   */
  startup() {
    var htmlString = _.template(this.template.split("$$")[0])({title:this.config.title});
    this.setHtml(htmlString);
    this.toast = this.AppX.runtimeConfig.toast;
    this.ready()
    this.initEvent()
    this.initBottonPopup()
    this.loadChart()
    this.loadWarringPopup()
    this.loadMoreInfoEvent()
  }

  /**
   * 初始化事件
   */
  initEvent(){
  }  

  loadChart() {
    (this.chart = echarts
      .init(document.getElementById('widget-Warning-chart')))
      .setOption({
        title: { 
          id: 'warring', text: '报警总数', subtext: '0', left: 'center', top:'center', itemGap: 30,
          textStyle: { color: '#29b0e7', fontSize: 38, fontWeight: '', },
          subtextStyle: { color: '#eee', fontWeight: 'bold', fontFamily: 'Courier New', fontSize: 83, },
        },
        color: ['#ffe363', '#1ee2f4', '#507dff', '#c548f9'],
        tooltip: { trigger: 'item', formatter: "{b} <br/>共 {c} " + "条" + "<br/>占比 {d}%", padding: 10, textStyle: { fontSize: 28} },
        legend: { id: 'warring', orient: 'vertical', padding: 10, itemGap: 20, itemWidth: 50 ,itemHeight: 28, right: 10, bottom: 50, textStyle: { color: '#fff', fontSize: 24 }, data: [] },
        series: [
          { 
            id: 'warring', name: '报警', type: 'pie', radius: ['55%', '85%'], center: ['50%', '50%'],
            itemStyle: { shadowColor: '#1ee2f4', shadowBlur: 20 }, cursor: 'default',
            label: { show: false }, data: []
          }
        ]
    })
    var loading = document.getElementById('Warning-chart-loading')
    var url = this.config.requestURL.warringChartURL
    var timerForLoadWarring = () => {
      loading.style.display = ''
      $.ajax({  //结果
        url: this.AppX.appConfig.apiRoot + url[1], type: url[0],
        success: (res) => {
          if(res.code == 1) {
            var sum = 0, legend = []
            var data = res.result.map( e => {
              sum += e.sum, legend.push(e.warnType || '-')
              return {
                name: e.warnType || '-',
                value: e.sum
              }
            })
            this.chart.setOption({
              title: { id: 'warring', subtext: sum },       
              legend: { id: 'warring', data: legend },         
              series: [{ id: 'warring', data: data}]
            })
          } else {
            this.toast.Show('获取报警数据失败：' + res.message)
            console.error(res)
          }
          setTimeout(timerForLoadWarring, this.AppX.appConfig.timeOut.warring)
          loading.style.display = 'none'
        },
        error: (e) => console.error(e)
      })
    }
    timerForLoadWarring()
  }

  loadWarringPopup() {
    (AppX.runtimeConfig.popup || { Close: () => {} }).Close()
    var url = this.config.requestURL.warringPopupURL
    
    $.ajax({  //结果
      url: this.AppX.appConfig.apiRoot + url[1], type: url[0],
      success: (res) => {
        if(res.code == 1) {          
          if((res = res.result).length == 0) return
          var popup = AppX.runtimeConfig.popup
          popup.setSize(800, 400)
          popup
            .ShowMessage("报警提示", _.template(this.template.split("$$")[1])({ infos: res })).submitObj
            .off("click")
            .on("click", (e) => {//弹出更多信息框
              AppX.runtimeConfig.popup.Close();
              // clearInterval(this.voiceTime)
              // this.openPopup()
            })
        } else {
          this.toast.Show('获取报警失败：' + res.message)
          console.error(res)
        }
      },
      error: (e) => console.error(e)
    })
  }

  loadMoreInfoEvent() {
    var moreBotton = document.getElementById('moreWarrInfo')
    var url = this.config.requestURL.warringTypeURL
    var warringTypeList = []
    var warringStateList = this.config.warringStates

    // 请求报警type
    $.ajax({  //结果
      url: this.AppX.appConfig.apiRoot + url[1], type: url[0],
      success: (res) => res.code == 1 ? warringTypeList = res.result : (this.toast.Show('获取地图报警类型失败：' + res.message), console.error(res)),
      error: (e) => console.error(e)
    })

    moreBotton.onclick = () => {      
      AppX.runtimeConfig.datapopup.setSize(3000, 1300);
      var Obj = AppX.runtimeConfig.datapopup.Show("报警信息", this.template.split("$$")[2]);

      var typeSelect = document.getElementById('widget-Warning-more-warringType') as HTMLSelectElement
      typeSelect.innerHTML = warringTypeList.map(e => '<option value="' + (e || '') + '">' + (e || '-') + '</option>').join('')

      var statesSelect = document.getElementById('widget-Warning-more-warringStates') as HTMLSelectElement
      statesSelect.innerHTML = 
        '<option value="0">全部</option>' + 
        warringStateList.map(e => '<option value="' + e.value + '">' + e.name + '</option>').join('')

      var date1 = $(document.getElementById('widget-Warning-more-dateTimeChoose1'))
      var date2 = $(document.getElementById('widget-Warning-more-dateTimeChoose2'))
      date1.datetimepicker({ language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss' })
      date2.datetimepicker({ language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss' })

      var queryOptions = [typeSelect.value, statesSelect.value, (date1[0] as HTMLInputElement).value, (date2[0] as HTMLInputElement).value]      
      
      var url = this.config.requestURL.warringHistoryURL
      var loading = document.getElementById('Warning-table-loading')
      var tableDiv = document.getElementById('widget-Warning-more-table')
      var tableBody = tableDiv.querySelector('tbody.infowarn_body')
      var queryBotton = document.getElementById('widget-Warning-more-query');
      (queryBotton.onclick = this.popupDiv['TF_BottonPopup'].trueCallBack = () => {
          $(tableDiv).dataTable().fnDestroy()
          tableBody.innerHTML = ''
          loading.style.display = ''
          queryOptions = [typeSelect.value, statesSelect.value, (date1[0] as HTMLInputElement).value, (date2[0] as HTMLInputElement).value]
          var state = queryOptions[1]
          // 请求报警历史
          $.ajax({  //结果
            url: this.AppX.appConfig.apiRoot + url[1] + [
              '?type=' + (queryOptions[0] || ''),
              'start=' + (queryOptions[2] || ''),
              'end=' + (queryOptions[3] || '')
            ].join('&') + { 0: '', 1: '&isconfirm=0', 2: '&isclear=0'}[state] + '&size=300&current=1',
            type: url[0],
            success: (res) => {
              if (res.code == 1) {
                res = res.result.records
                var htmlStr = ''                
                for(var i=0,ii=res.length;i<ii;i++){
                  var dr = res[i]
                  htmlStr += 
                    '<tr>' + 
                      '<td>' + dr.rowId + '</td>' +
                      '<td>' + (dr.warnType || '-') + '</td>' +
                      '<td>' + 1 + '</td>' +
                      '<td>' + (dr.address || '-') + '</td>' +
                      '<td>' + dr.scadaTime + '</td>' +
                      '<td>' + dr.notes + '</td>' +
                      '<td>' + (dr.isconfirm == 0 ? 
                          '<div data="' + dr.id + '" class="trquren">确认</div>' : 
                          '<div>-</div>') + 
                      '</td>' +
                    '</tr>'
                }
                tableBody.innerHTML = htmlStr
                $(tableDiv).dataTable({
                  language: {
                      "lengthMenu": "每页 _MENU_ 条",
                      "zeroRecords": "未查询到任何记录",
                      "info": "共 _TOTAL_ 条记录，当前 _START_ - _END_ ",
                      "infoEmpty": "没有符合条件的记录",
                      "infoFiltered": "(从总共 _MAX_ 条数据中找到)",
                      "paginate": {
                          "first": "首页",
                          "last": "尾页",
                          "next": "下页",
                          "previous": "上页"
                      },
                      "search": "搜索: ",
                  },
                  pagingType: "simple_numbers",
                  scrollY: "1000",
                  pageLength: 50,
                  bLengthChange: false,
                  scrollCollapse: false,
                  scrollX: true,
                  searching: false,                    
                  ordering: true,
                  autoWidth: false,
                  dom: '<t><lfip>',
                  drawCallback: () => {                        
                    var trueBottom = $(tableBody).find('tr td:nth-last-child(1) div.trquren')
                    for(var i=0,ii=trueBottom.length;i<ii;i++) {
                      trueBottom[i].onclick = function(e) { this.shotDownWarring(e) }.bind(this)
                    }
                  }
                  //aoColumnDefs:[
                      // {"sClass":"col_class","aTargets":[0]},{"sClass":"cos_class","aTargets":[1]}],
                  // createdRow: function ( row, data, index ) {
                  //                if ( index %2 == 0 ) {
                  //                    $('td', row).css("background","#c43ff6");
                  //                }
                  //     }, 
                } )
              } else {
                this.toast.Show('获取报警历史失败：' + res.message)
                console.error(res)
              }
              loading.style.display = 'none'
            },
            error: (e) => console.error(e)
          })
      })()
    }
  }
  
  shotDownWarring(e: Event) {
    var div = e.currentTarget as HTMLElement
    var id = div.getAttribute('data')
    var BottonPopup = this.popupDiv['TF_BottonPopup']
    BottonPopup.init(div, id, e)
  }

  initBottonPopup() {
    var popupDiv = this.popupDiv = document.createElement('div')
    popupDiv.classList.value = 'botton-popup'
    popupDiv.innerHTML = 
        '<div>' + 
            '<span style="font-size: 20px;" class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>' + 
            '<span style="color: #fff; margin-left: 10px; vertical-align: top;">是否关闭报警？</span>' + 
        '</div>' +
        '<div style="margin-top:5px">' +
            '<span>部门</span>' +
            '<select class="input-sm form-control warnstatus minwidth tf-select" style="height:100%">' +
            '</select>' +
        '</div>' +
        '<div style="margin-top:5px">' +
            '<span>人员</span>' +
            '<select class="input-sm form-control warnstatus minwidth tf-select" style="height:100%">' +
            '</select>' +
        '</div>' +
        '<div style="margin-top:5px">' + 
            '<button class="btn btn-default tf-botton" style="float:right;">确定</button>' + 
            '<div style="clear:both;"></div>' + 
        '</div>';
    (popupDiv.children[3].children[0] as HTMLElement).onclick = () => {
        var id = that.id
        if(id == 'undefined') return
        $.ajax({  //结果
            url: this.AppX.appConfig.apiRoot + '/gis/bigScreen/handleWarnHistroy?code=0&wanrIds=' + id + '&id=' + perBotton.value, type: 'GET',
            success: (res) => {
              AppX.runtimeConfig.toast.Show(res.code == 1 ? '确认成功！' : (console.error(res), '确认失败！' + res.message));
              that.trueCallBack()
            },
            error: (e) => console.error(e)
        })
    }
    var style = popupDiv.style
    var timeDip = undefined 
    var that = popupDiv['TF_BottonPopup'] = {
        id: undefined,
        clickCallBack: undefined,
        trueCallBack: () => {},
        init: function (div, id, e) {
            if(that.id == id) return
            if(that.id) {
                that.id = undefined
                if(timeDip) clearTimeout(timeDip)
                style.display = ''
                style.transform = ''
                style.opacity = ''
                document.removeEventListener('click', that.clickCallBack)
                that.init(div, id, e)
                return
            }
            that.id = id

            div.appendChild(popupDiv)
            if(timeDip) clearTimeout(timeDip)
            style.display = 'block'
            window.requestAnimationFrame(_ => {
                style.transform = 'rotateX(0deg)'
                style.opacity = '1'
            })
            var clickFun = that.clickCallBack = (evt) => {
                for(var i=0,il=evt.path,ii=il.length;i<ii;i++) {
                    var di = il[i]
                    if(di == popupDiv || di == div) return evt.stopPropagation()
                }
                that.id = undefined
                style.opacity = ''
                style.transform = ''
                if(timeDip) clearTimeout(timeDip)
                timeDip = setTimeout(_ => style.display = '', 316)
                document.removeEventListener('click', clickFun)
                that.clickCallBack = undefined
                evt.stopPropagation()
            }
            document.addEventListener('click', clickFun)
            e.stopPropagation()
        },
    }
    var depBotton = popupDiv.children[1].children[1] as HTMLInputElement
    var perBotton = popupDiv.children[2].children[1] as HTMLInputElement
    
    $.ajax({  //结果
        url: this.AppX.appConfig.apiRoot + '/gis/bigScreen/deptAll', type: 'GET',
        success: (res) => {
            if(res.code == 1) {
                depBotton.innerHTML = res.result.result
                    .filter(e => e.statusName == '启用')
                    .map(e => '<option value="' + e.id  + '">' + e.name + '</option>')
                    .join('') 
                depBotton.value = depBotton.children[0].getAttribute('value')
                depBotton.oninput(undefined)
            } else console.error(res)
        },
        error: (e) => console.error(e)
    })
    depBotton.oninput = () => {            
        $.ajax({  //结果
            url: this.AppX.appConfig.apiRoot + '/gis/bigScreen/getUserByDepts?depts=' + depBotton.value, type: 'GET',
            success: (res) => {
                if(res.code == 1) {
                    perBotton.innerHTML = res.result.result[0].users
                        .map(e => '<option value="' + e.id  + '">' + e.realName  + '</option>')
                        .join('') 
                } else console.error(res)
            },
            error: (e) => console.error(e)
        })
        perBotton.innerHTML = ''
    }
  }
  /**
   * 销毁对象
   */
  destroy() {
    this.afterDestroy();
  }
}
export = Warning;