FengMeiRFID-2024
/
fengMeiBoard


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1920" />
    <title>模检举看板</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/mould.css" />
    <script type="text/javascript" src="../plugin/jquery.min.js"></script>
    <script type="text/javascript" src="../plugin/vue.js"></script>
    <script type="text/javascript" src="../js/util.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script src="../plugin/datav.js"></script>
  </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>

  <body>
    <div class="loading">
      <div class="load_box">
        <img src="../images/loading.gif" /> 看板加载中，请稍等...
      </div>
    </div>
    <div id="app" class="container">
      <div class="head">
        <h1>模检具看板</h1>
        <span id="showTime"></span>
      </div>
      <ul class="clearfix">
        <li>
          <div class="box management-box">
            <img src="../images/titleLogo.png" />
            <span class="board-title title1">冲压模具管理看板</span>
            <img src="../images/status.png" class="status" />
            <span class="status-span status1">在库</span>
            <span class="status-span status2">生产中</span>
            <span class="status-span status3">维修中</span>
            <span class="status-span status4">保养中</span>
            <img src="../images/mouldbg.png" class="box-border1" />
            <dv-scroll-board
              ref="scrollBoard"
              class="table1"
              :config="inventoryConfig"
            />
          </div>
        </li>

        <li>
          <div class="box">
            <div class="title aging center">{{warehouseName}}</div>

            <img src="../images/group1.png" class="group-common1 group1" />
            <span class="count mo_total">模具总数</span>
            <div class="count_box total1">{{count.moldAllQuantity}}</div>

            <img src="../images/group2.png" class="group-common1 group2" />
            <span class="count mo_store">模具在库数量</span>
            <div class="count_box store1">
              {{count.moldInWarehouseQuantity}}
            </div>

            <img src="../images/group3.png" class="group-common1 group3" />
            <span class="count mo_line">模具产线数量</span>
            <div class="count_box line1">{{count.moldProduceQuantity}}</div>

            <img src="../images/group4.png" class="group-common1 group4" />
            <span class="count mo_repair">模具维修保养</span>
            <div class="count_box repair1">
              {{count.moldMaintenanceAndRepairQuantity}}
            </div>

            <img src="../images/group1.png" class="group-common2 group1" />
            <span class="count gauge_total">检具总数</span>
            <div class="count_box total2">{{count.fixtureAllQuantity}}</div>

            <img src="../images/group2.png" class="group-common2 group2" />
            <span class="count gauge_store">检具在库数量</span>
            <div class="count_box store2">
              {{count.fixtureInWarehouseQuantity}}
            </div>

            <img src="../images/group3.png" class="group-common2 group3" />
            <span class="count gauge_line">检具产线数量</span>
            <div class="count_box line2">{{count.fixtureProduceQuantity}}</div>

            <img src="../images/group4.png" class="group-common2 group4" />
            <span class="count gauge_repair">检具维修保养</span>
            <div class="count_box repair2">
              {{count.fixtureMaintenanceAndRepairQuantity}}
            </div>
          </div>
          <div class="box warning-box">
            <img src="../images/titleLogo.png" />
            <span class="board-title title2">检具校准有效期到期预警表</span>
            <img src="../images/modulesbg.png" class="box-border2" />
            <dv-scroll-board
              ref="scrollBoard"
              class="table2"
              :config="fixtureConfig"
            />
          </div>
        </li>
        <li>
          <div class="box maintain-box">
            <img src="../images/titleLogo.png" />
            <span class="board-title title1">需保养模具预警表</span>
            <img src="../images/modulesbg.png" class="box-border3" />
            <dv-scroll-board
              ref="scrollBoard"
              class="table3"
              :config="maintainConfig"
            />
          </div>
          <div class="box repair-box">
            <img src="../images/titleLogo.png" />
            <span class="board-title title1">维修中模具表</span>
            <img src="../images/modulesbg.png" class="box-border2" />
            <dv-scroll-board
              ref="scrollBoard"
              class="table2"
              :config="repairConfig"
            />
          </div>
        </li>
      </ul>
    </div>
    <div class="back"></div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            config: {},
            // 冲压模具管理看板表头
            mangerHeader: [
              '<span style="color:#ffffff;font-size:0.16rem"></span>',
              '<span style="color:#ffffff;font-size:0.16rem">零件号</span>',
              '<span style="color:#ffffff;font-size:0.16rem">状态</span>',
              '<span style="color:#ffffff;font-size:0.16rem">库位号</span>',
            ],
            // 检具校准有效期到期预警表表头
            fixtureHeader: [
              '<span style="color:#ffffff;font-size:0.16rem"></span>',
              '<span style="color:#ffffff;font-size:0.16rem">检具名称</span>',
              '<span style="color:#ffffff;font-size:0.16rem">到期日期</span>',
              '<span style="color:#ffffff;font-size:0.16rem">检具编号</span>',
            ],
            // 需保养模具预警表表头
            maintainHeader: [
              '<span style="color:#ffffff;font-size:0.16rem"></span>',
              '<span style="color:#ffffff;font-size:0.16rem">零件号</span>',
              '<span style="color:#ffffff;font-size:0.16rem">保养时间</span>',
              '<span style="color:#ffffff;font-size:0.16rem">货位号</span>',
            ],
            // 维修中模具表表头
            repairHeader: [
              '<span style="color:#ffffff;font-size:0.16rem"></span>',
              '<span style="color:#ffffff;font-size:0.16rem">零件号</span>',
              '<span style="color:#ffffff;font-size:0.16rem">维修时间</span>',
              '<span style="color:#ffffff;font-size:0.16rem">货位号</span>',
            ],
            inventoryDatas: [], //  冲压模具管理看板数据
            fixtureDatas: [], // 检具校准有效期到期预警表数据
            maintainDatas: [], // 需保养模具预警表数据
            repairDatas: [], // 维修中模具表数据
            inventoryConfig: {}, // 冲压模具管理看板配置
            fixtureConfig: {}, // 检具校准有效期到期预警表配置
            maintainConfig: {}, // 需保养模具预警表配置
            repairConfig: {}, // 维修中模具表配置
            // 通用配置
            commonConfig: {
              headerHeight: 30,
              waitTime: 8000,
              carousel: "page",
              headerBGC: "#051b36",
              oddRowBGC: "#051b3c",
              evenRowBGC: "#030814",
            },
            count: {
              moldAllQuantity: "", // 模具总数
              moldInWarehouseQuantity: "", //模具在库数量
              moldProduceQuantity: "", // 模具生产数量
              moldMaintenanceAndRepairQuantity: "", // 模具维修保养数量
              fixtureAllQuantity: "", // 检具总数
              fixtureInWarehouseQuantity: "", // 检具在库数量
              fixtureProduceQuantity: "", // 检具生产数量
              fixtureMaintenanceAndRepairQuantity: "", // 检具维修保养数量
            },
            timer: null,
            warehouseId: null, // 车间id
            warehouseName: "", // 车间名称
          };
        },
        methods: {
          // 获取当前展示的仓库id
          getWarehouseId() {
            const _self = this;
            // 看板盒子从url获取
            const params = getQueryString();
            _self.warehouseId = params.warehouseId;
            // apk 安装包写死（需要多个页面）
            // _self.warehouseId = 460335910907969;
          },

          // 获取车间信息
          getWarehouseInfo() {
            const _self = this;
            const url = "/api/WarehouseResource/queryByWarehouseId";
            const params = [["warehouseId", _self.warehouseId]];
            ajaxGet(url, params).then((success) => {
              if (success.errorCode === 0) {
                _self.warehouseName = success.data.name;
              } else {
                console.log(success.errorMessage);
              }
            });
          },

          // 获取零件状态数据
          inventoryHandler(dtos) {
            const datas = [];
            dtos.forEach((item, index) => {
              if (
                item.inventoryStatus == "在库" ||
                item.inventoryStatus == "生产中" ||
                item.inventoryStatus == "维修中" ||
                item.inventoryStatus == "保养中"
              ) {
                datas.push(item);
              }
            });
            return datas;
          },

          // 冲压模具管理看板数据处理
          inventoryProcess(dtos) {
            const _self = this;
            _self.inventoryDatas = [];

            if (dtos && dtos.length) {
              const datas = _self.inventoryHandler(dtos)
              _self.inventoryDatas = datas.map((item) => {
                return [
                  '<div class="table-img" ><img src="../images/icon.png"/></div>',
                  item.type,
                  item.inventoryStatus == "在库"
                    ? '<div class="table-img"><img class="status-img" src="../images/in.png"/></div>'
                    : item.inventoryStatus == "生产中"
                    ? '<div class="table-img"><img class="status-img" src="../images/prod.png"/></div>'
                    : item.inventoryStatus == "维修中"
                    ? '<div class="table-img"><img class="status-img" src="../images/repair.png"/></div>'
                    : item.inventoryStatus == "保养中"
                    ? '<div class="table-img"><img class="status-img" src="../images/maintain.png"/></div>'
                    : "",
                  item.positionName,
                ];
              });
            }
            _self.inventoryDatas = _self.addEmpty(22, "table1");
            _self.inventoryConfig = {
              header: _self.mangerHeader,
              data: _self.inventoryDatas,
              rowNum: 22,
              align: ["center", "center", "center", "center"],
              columnWidth: [66, 370, 120, 180],
              ..._self.commonConfig,
            };
          },

          // 检具校准有效期到期预警表数据处理
          fixtureProcess(dtos) {
            const _self = this;
            _self.fixtureDatas = [];
            if (dtos && dtos.length) {
              _self.fixtureDatas = dtos.map((item) => [
                '<div class="table-img" ><img src="../images/icon.png"/></div>',
                item.inventoryName,
                item.effectiveDate,
                item.inventoryNo,
              ]);
            }
            _self.fixtureDatas = _self.addEmpty(12, "table2");
            _self.fixtureConfig = {
              header: _self.fixtureHeader,
              data: _self.fixtureDatas,
              rowNum: 12,
              align: ["center", "center", "center", "center"],
              columnWidth: [66, 280, 210, 200],
              ..._self.commonConfig,
            };
          },

          // 需保养模具预警表数据处理
          moldMaintainProcess(dtos) {
            const _self = this;
            _self.maintainDatas = [];
            if (dtos && dtos.length) {
              _self.maintainDatas = dtos.map((item) => [
                '<div class="table-img" ><img src="../images/icon.png"/></div>',
                item.inventoryType,
                item.maintenanceDate,
                item.positionName,
              ]);
            }
            _self.maintainDatas = _self.addEmpty(10, "table3");
            _self.maintainConfig = {
              header: _self.maintainHeader,
              data: _self.maintainDatas,
              rowNum: 10,
              align: ["center", "center", "center", "center"],
              columnWidth: [66, 280, 210, 200],
              ..._self.commonConfig,
            };
          },

          // 维修中模具表数据处理
          moldRepairProcess(dtos) {
            const _self = this;
            _self.repairDatas = [];
            if (dtos && dtos.length) {
              _self.repairDatas = dtos.map((item) => [
                '<div class="table-img" ><img src="../images/icon.png"/></div>',
                item.inventoryType,
                item.repairDate,
                item.positionName,
              ]);
            }
            _self.repairDatas = _self.addEmpty(12, "table4");
            _self.repairConfig = {
              header: _self.repairHeader,
              data: _self.repairDatas,
              rowNum: 12,
              align: ["center", "center", "center", "center"],
              columnWidth: [66, 280, 210, 200],
              ..._self.commonConfig,
            };
          },

          // 处理接口数据
          dataProcess(datas) {
            const _self = this;
            _self.count = datas.centerBoardInventoryQuantityDto;
            _self.inventoryProcess(datas.boardInventoryResponses);
            _self.fixtureProcess(datas.fixtureEffectiveDtos);
            _self.moldMaintainProcess(datas.moldNeedMaintainDtos);
            _self.moldRepairProcess(datas.moldRepairingDtos);
          },

          // 获取表格数据
          getTableDatas() {
            const _self = this;
            const url = "/api/BulletinBoardResource/queryNewBoardData";
            const params = [["warehouseId", _self.warehouseId]];
            ajaxGet(url, params).then((success) => {
              if (success.errorCode === 0) {
                if (success.data) _self.dataProcess(success.data);
              } else {
                console.log(success.errorMessage);
              }
            });
          },
          addEmpty(size, flag) {
            const _self = this;
            let newDatas;
            if (flag == "table1") {
              newDatas = JSON.parse(JSON.stringify(_self.inventoryDatas));
            } else if (flag == "table2") {
              newDatas = JSON.parse(JSON.stringify(_self.fixtureDatas));
            } else if (flag == "table3") {
              newDatas = JSON.parse(JSON.stringify(_self.maintainDatas));
            } else if (flag == "table4") {
              newDatas = JSON.parse(JSON.stringify(_self.repairDatas));
            }
            if (newDatas.length < size) {
              const count = size - newDatas.length;
              for (let i = 0; i < count; i++) {
                let newArray = ["", "", "", ""];
                newDatas.push(newArray);
              }
            }
            return newDatas;
          },
        },
        mounted() {
          const _self = this;
          _self.getWarehouseId();
          _self.getTableDatas();
          _self.getWarehouseInfo();
          _self.timer = setInterval(() => {
            _self.getTableDatas();
            _self.getWarehouseInfo();
          }, 6000 * 10 * 5);
        },
        beforeUnmount() {
          const _self = this;
          clearInterval(_self.timer);
          _self.timer = null;
        },
      });
    </script>
  </body>
</html>