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": ""
        }),
        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);
        }
      },
    });
  }



  //记载温度计
  var chartDom = document.getElementById('temperature');
  var myChart = echarts.init(chartDom);
  
  option = {
    series: [
    {
      name: "Indicator",
      type: "gauge",
      data: [{
        value: 50,
        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: 50,
        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);
});