scene_wisdom/js/showHardware.js

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

  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.code] &&
      window.hardwareHotList[row.code].showPannel({ focus: true });
  });

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

  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": "77547f7af360c5d8e14932866b844d53"
        }),
        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) {
    console.log(item);
    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}/${tmp.deviceCode}/${paramValue}/03`,
      success: function (data) {
        if (data.code === 0) {
          resolve({
            ...data,
            totals: data.data.length,
          });
        } else {
          reject(data);
        }
      },
    });
  }


  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,type} = params
       //加载温度计
    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 (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();
        });
      }
  }

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

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