scene_wisdom/js/showHardware.js

$(function () {
  let url = ``;
  // let url = `http://192.168.0.135:8004`;

  let userId = getQueryVal('userId')
  let gName = "Gridtable";
  let grtable = document.querySelector("#gridtb");
  grtable.GM({
    gridManagerName: gName,
    height: "300px",
    ajaxData: function (setting) {
      console.log(setting.pageData,setting.sortData);
      // 传入分页及排序的配置项
      return getList(Object.assign({}, setting.pageData, setting.sortData));
    },
    ajaxType: "POST",
    supportCheckbox: false,
    supportAjaxPage: true,
    useNoTotalsMode: true,
    pageSize:10,
    columnData: [
      {
        key: "code",
        text: "硬件编号",
      },
      {
        key: "devTypeName",
        text: "硬件状态",
      },
      {
        key: "name",
        text: "热点名字",
      },
      ,
      {
        key: "id",
        width: "100px",
        align: "center",
        text: "查看",
        template: function (username) {
          var titleNode = document.createElement("div");
          // titleNode.attr('href', `https://www.lovejavascript.com/#!zone/blog/content.html?id=${rowObject.id}`);
          titleNode.setAttribute("title", username);
          titleNode.classList.add("plugin-action");
          titleNode.innerHTML = `<img src="./images/jiantou2.png" alt="">`;
          return titleNode;
        },
      },
    ],
  });



  // 阻止冒泡
  $(".hardware-list").on("click keydown keyup keypress", function (event) {
    event.stopPropagation();
  });

  //点击前往查看
  $(grtable).on("click", ".plugin-action", function (e) {
    const row = GridManager.getRowData(
      gName,
      e.currentTarget.parentElement.parentElement
    );
    console.log(row);
    window.hardwareHotList[row.id] &&
      window.hardwareHotList[row.id].showPannel({ focus: true });
  });

  $(".hard-header").click(function () {
      $(".hard-body").toggle();
    }
  )

  
  $("#moshi").click(function () {
      $(".air-con").hide();
      $(".oper-con").fadeToggle();
    }
  )

  $("#fengxiang").click(function () {
    $(".oper-con").hide();
    $(".air-con").fadeToggle();
  }
)

  

  let getList = function (params) {
    return new Promise((resolve, reject) => {
      $.ajax({
        method: "POST",
        data : JSON.stringify({
          "devTypeId": "",
          "name": "",
          "pageNum": params.cPage,
          "pageSize": params.pSize,
          "searchKey": "",
          "userId": userId
        }),
        headers: {
          "Content-Type": "application/json",
        },
        dataType: "json",
        contentType: "application/json",
        url: url + "/api/device/listPage",

        success: function (data) {
          if (data.code == 0) {
            resolve({
              data:data.data.records,
              totals: data.data.total,
            });
          } else {
            reject(data);
          }
        },
      });
    });
  };

  window.changeDeviceStatus = function (item, paramCode, paramValue, success, fail) {//设置设备
    console.log(item);
    $(".waiting").addClass('showloading')
    let tmp = item.infoAttribute.hardware
    $.ajax({
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
      dataType: "json",
      contentType: "application/json",
      url: url + `/api/device/control/${tmp.id}/${paramCode}/${paramValue}/03`,
       
      success: function (data) {
        console.log(data.msg)
        $(".waiting").removeClass('showloading')  
        if (data.code === 0) {
           success && success()
        } else {
           fail && fail()
        }
      },error:function(){
          $(".waiting").removeClass('showloading')
          fail && fail()
      }
    });
  }


  window.loadTemperature = function (params={}) {
    let {id="temperature",val} = params
       //加载温度计
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    
    
    let option = {
      series: [
      {
        name: "Indicator",
        type: "gauge",
        data: [{
          value: val,
          name:'温度',
          itemStyle:{
            color: "#23EACF",
            fontSize:14
          },
          detail: {
            formatter: "{value}℃",
            color: "#23EACF",
            fontSize:24,
            offsetCenter: ['0%', '28%'],
          },
          title: {
            offsetCenter: ['0%', '80%'],
            color: "#fff",
            fontSize:20
          }
        }],
        radius: "100%",
        startAngle: 240,
        endAngle: -60,
        axisLine: {
          show: false
        },
        axisTick:{
          show: true,
          length:12,
          lineStyle:{
            color:'#339ED3'
          }
        },
        splitLine: {
          show: true,
          length:15,
          lineStyle:{
            color: "rgba(255, 255, 255, 1)",
          }
        },
        axisLabel: {
          color: "#23EACF"
        },
        pointer: {
          show: true,
          itemStyle:{
            color: "#23EACF"
          },
          width: 4.5,
          length: "46%"
        }
      },
      {
        name: "Indicator1",
        type: "gauge",
        data: [{
          value: val,
          detail:{
            show:false
          }
        }],
        radius: "50%",
        startAngle: 240,
        endAngle: -60,
        axisLine: {
          show: true,
          lineStyle:{
            width:5
          }
        },
        progress: {
          show: true,
          width:5,
          itemStyle:{
            color: "#23EACF"
          }
        },
        axisTick:{
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        }
      }
    ]
    }
    option && myChart.setOption(option, true);
  }

  window.loadAirConditioner = function (params={}) {
    let {id="air-conditioner",
    val='unset',
    type='unset',
    ifOn='unset',
    windSpeed='unset',
    fanPos='unset',
    name='unset',
    fanState='unset'} = params

    //开关
    if (ifOn!='unset') {
      if (ifOn) {
          $('.ac-body').show()
          $('.ac-switch').hide()
      }else{
          $('.ac-body').hide()
          $('.ac-switch').show()
      }
    }


    //名字
    if (name!='unset') {
      $('.ac-title').text(name)
    }

    //风向
    if (fanPos!='unset') {
      $('#fxDom').text('风向' + fanPos)
    }

    //风速
    if (windSpeed!='unset') {
      $('#fsDom').text(windSpeed)
      $(`.ac-left li[data-name='${windSpeed}']`).addClass("active").siblings().removeClass("active");
    }


    //模式
    if (type!='unset') {
      $(`#airmode span[data-name='${type}']`).addClass("activeTxt").siblings().removeClass("activeTxt");
    }

    if (val=='unset') {
      return
    }
    //加载温度计
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    
    let option = {
      series: [
      {
        name: "Indicator",
        type: "gauge",
        data: [{
          value: val,
          name:type,
          itemStyle:{
            color: "#23EACF",
            fontSize:14
          },
          detail: {
            offsetCenter: ['0%', '0'],
            formatter: "{value}℃",
            color: "#fff",
            fontSize:22
          },
          title: {
            offsetCenter: ['0%', '26%'],
            color: "#fff",
            fontSize:16
          }
        }],
        radius: "100%",
        startAngle: 220,
        endAngle: -40,
        progress: {
          show: true,
          roundCap:true,
          itemStyle:{
            color: "#23EACF"
          }
        },
        axisLine: {
          show: true,
          roundCap:true,
          lineStyle:{
            color: [[1, '#ffffff']]
          }
        },
        axisTick:{
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        }
      }
    ]
    }
    option && myChart.setOption(option, true);
  }

  window.loadMonitor = function (params={}) {
    let {id,url} = params 
    console.log(id,url);
    var video = document.getElementById(id);
    if(!params.url){
        video.src = '';  video.pause();
        return;
    }
    
    
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(url||'http://14.215.216.123:18080/rtp/00A153DF/hls.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.play();
        });
      }
      // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
      // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
      // This is using the built-in support of the plain video element, without using hls.js.
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = url||'http://14.215.216.123:18080/rtp/00A153DF/hls.m3u8';
        video.addEventListener('canplay', function () {
          video.play();
        });
      }
  }


  window.loadCalendar = function(params = {}){

    let { data,cellCb=()=>{},yearSelect=()=>{},monthCb=()=>{} } = params
      //日历方法
      let ret = $("#calendar").calendar({
        data: data, //记录数据
        work: [],//上班时间
        mode: "month",
        shwoLunar:false,
        width: 400,
        cellClick: function (data) {
          let item = data[0]
          cellCb(item)
        },
        yearSelect: function (yearText) {
          yearSelect(yearText)
        },
        monthClick: function (e, nextMonth, opts, me) {
          monthCb(nextMonth)
        }
      });

      return ret
  }

  window.loadHistoryList = function (params={}) {
    let {data=[],clickItem=()=>{}} =  params
    if (!data||data.length<=0) {
      return $('.histcon').hide()
    }else{
        $('.histcon').show()
    }
    let html = ''

    for (let i = 0; i < data.length; i++) {
      const element = data[i];
      html += `<li data-val=${i}>${element.startTime.split(" ")[1]} ~ ${element.endTime.split(" ")[1]}</li>`
    }

    $('#hislist').html(html) 
    $('#hislist').off('click','li').on('click','li',function(e){
      let i = $(e.target).data('val')
      $(e.target).addClass('active').siblings().removeClass('active')
      clickItem(data[i])
    })

  }

  
  /* let ret = window.loadCalendar({
    data:[{
        'startDate': "2021-05-18",//有监控的日期
        id:'传对应的id'
    }],
    //点击日期时间
    cellCb: (item)=> {
      console.log(item);
      console.log(ret.options.currentDate);
    },
    yearSelect: (yearText)=> {
      console.log(yearText);
    },
    monthCb: (nextMonth)=> {
      console.log(nextMonth);
    } 
 
  }) */
 
    
  
 /*  window.loadHistoryList({
    data:[{
      startTime:'2021-05-13 11:00:08',
      endTime:'2021-05-13 11:00:08'
    },{
      startTime:'2021-05-13 11:00:0811',
      endTime:'2021-05-13 11:00:08'
    },{
      startTime:'2021-05-13 11:00:082',
      endTime:'2021-05-13 11:00:082'
    }],
    //点击时间
    clickItem:(data)=>{
      console.log(data);
    }
  })
   */
 


  /*loadMonitor({
      id:"monitor",
      url:'http://14.215.216.123:18080/rtp/00A153DF/hls.m3u8'
  })

   loadAirConditioner({
    id:"air-conditioner",
    val:50,
    type:'冷风'
  }) */

  // loadAirConditioner({
  //   name:'二楼-大会议室-04-空调',
  //   val:50,
  //   id:"air-conditioner",
  //   type:'冷风',
  //   ifOn:true,//开关机
  //   windSpeed : "低风",//风速
  //   fanPos :  "上",//摆叶位置
  //   fanState:  true//摆叶状态
  // }) 


	
});