<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>index</title>
    <script type="text/javascript" src="../plugin/jquery.min.js"></script>
    <script type="text/javascript" src="../js/util.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/workShop.css" />
    <style>
      *,
      body {
        font-size: 0.18rem;
      }
    </style>
  </head>
  <script>
    $(window).load(function () {
      $(".loading").fadeOut();
    });
    //动态设置视口
    const setSize = () => {
      // 获取html元素
      const html = document.getElementsByTagName("html")[0];
      // 获取屏幕宽度
      const pageWidth = html.getBoundingClientRect().width;
      // 动态计算字体大小(rem)
      html.style.fontSize = pageWidth / 20 + "px";
    };
    setSize();
    window.addEventListener("resize", setSize, false);
  </script>

  <script type="text/javascript" src="../plugin/vue.js"></script>
  <script type="text/javascript" src="../plugin/datav.js"></script>
  <script type="text/javascript" src="../plugin/echarts.min.js"></script>

  <body>
    <div class="loading">
      <div class="load_box">
        <img src="../images/loading.gif" /> 看板加载中，请稍等...
      </div>
    </div>
    <div id="app" class="container">
      <dv-scroll-board
        ref="scrollBoard"
        :config="config"
        style="width: 12.4rem; height: 8.1rem; left: 6.6rem; top: 1.8rem"
      />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            start: 0,
            length: 10,
            warehouseId: 460335910903873,
            header: [
              '<span style="color:#85E0FF;font-size:0.24rem">模检具名称</span>',
              '<span style="color:#85E0FF;font-size:0.24rem">模检具状态</span>',
              '<span style="color:#85E0FF;font-size:0.24rem">零件编号</span>',
              '<span style="color:#85E0FF;font-size:0.24rem">使用时间(小时)</span>',
              '<span style="color:#85E0FF;font-size:0.24rem">使用次数</span>',
              '<span style="color:#85E0FF;font-size:0.24rem">是否需要保养</span>',
            ],
            config: {},
            addList: [],
          };
        },

        methods: {},

        mounted() {
          const _self = this;
          const url =
            "/api/BulletinBoardResource/queryBoardInventoryByWarehouse";
          const params = [
            ["warehouseId", _self.warehouseId],
            ["start", _self.start],
            ["length", _self.length],
          ];
          ajaxGet(url, params).then((success) => {
            if (success.errorCode === 0) {
              if (success.datas && success.datas.length > 0) {
                const configData = success.datas.map((item) => [
                  item.name,
                  item.inventoryStatus,
                  item.no,
                  item.useDate,
                  item.useCount,
                  item.needMaintain == true ? "是" : "否",
                ]);
                _self.config = {
                  header: _self.header,
                  headerHeight: 60,
                  rowNum: 10,
                  hoverPause: false,
                  data: configData,
                  headerBGC: "#112f6e",
                  oddRowBGC: "#06105a",
                  evenRowBGC: "#19225e",
                  align: [
                    "center",
                    "center",
                    "center",
                    "center",
                    "center",
                    "center",
                  ],
                  columnWidth: [220, 200, 220, 200, 200, 200],
                };
              }
            }
          });
        },
        beforeUnmount() {
          const _self = this;
        },
      });
    </script>
  </body>
</html>
