FengMeiRFID-2024
/
boardFengMei


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!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">
      <div class="info_box" style="top: 4.84rem; left: 1.4rem; color: #ffffff">
        {{ warehouseNo }}
      </div>
      <div class="info_box" style="top: 6rem; left: 1.4rem; color: #85e0ff">
        {{ warehouseName }}
      </div>
      <dv-scroll-board
        ref="scrollBoard"
        :config="config"
        style="width: 12.4rem; height: 8rem; left: 6.6rem; top: 1.8rem"
      />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            start: 0,
            length: 500,
            warehouseNo: "",
            warehouseId: null,
            warehouseName: "",
            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: {},
          };
        },

        methods: {
          // 获取车间信息
          getWarehouseInfo() {
            const _self = this;
            const url = "/api/WarehouseResource/queryByWarehouseId";
            const params = [["warehouseId", _self.warehouseId]];
            ajaxGet(url, params).then((success) => {
              if (success.errorCode === 0) {
                _self.warehouseNo = success.data.no;
                _self.warehouseName = success.data.name;
              }
            });
          },
          // 获取表格数据
          getTableDatas() {
            const _self = this;
            const url =
              "/api/BulletinBoardResource/queryBoardInventoryByWarehouse";
            const params = [
              ["start", _self.start],
              ["length", _self.length],
              ["warehouseId", _self.warehouseId],
            ];
            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,
                    waitTime: 8000,
                    carousel: "page",
                    hoverPause: false,
                    data: configData,
                    headerBGC: "#112f6e",
                    oddRowBGC: "#06105a",
                    evenRowBGC: "#19225e",
                    align: [
                      "center",
                      "center",
                      "center",
                      "center",
                      "center",
                      "center",
                    ],
                    columnWidth: [260, 160, 350, 200, 180, 200],
                  };
                }
              }
            });
          },
        },

        mounted() {
          const _self = this;
          this.warehouseId = getQueryString("warehouseId");
          _self.getTableDatas();
          _self.getWarehouseInfo();
          _self.timer = setInterval(() => {
            _self.getTableDatas();
            _self.getWarehouseInfo();
          }, 6000 * 10 * 6);
        },
        beforeUnmount() {
          const _self = this;
          clearInterval(_self.timer);
          _self.timer = null;
        },
      });
    </script>
  </body>
</html>