Chengfei_LiTiKu
/
chengfei-board


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653
							<!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/board2.css" />
    <script type="text/javascript" src="./plugin/jquery.min.js"></script>
    <script type="text/javascript" src="./plugin/echarts.min.js"></script>
    <script type="text/javascript" src="./plugin/vue.min.js"></script>
    <script type="text/javascript" src="./js/util.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <script src="./plugin/datav.min.js"></script>
    <script type="text/javascript" src="./js/chart.js"></script>
    <script type="text/javascript" src="./js/testDatas.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>

      <div class="box">
        <span class="title maintain-title">工装设备维修记录</span>
        <span class="maintain maintain-all"
          >当月维修总数:{{repairDatas.repairQuantity}}</span
        >
        <span class="maintain maintain-complete"
          >已维修数:{{repairDatas.repairCompletedQuantity}}</span
        >
        <span class="maintain maintain-incomplete"
          >待维修数:{{repairDatas.repairUncompletedQuantity}}</span
        >
        <div>
          <dv-scroll-board
            ref="scrollBoard1"
            style="
              height: 2.2rem;
              position: absolute;
              width: 5.2rem;
              top: 1.06rem;
              left: 0.3rem;
            "
            :config="maintainConfig"
          />
        </div>
      </div>
      <div class="box">
        <span class="title checkout-title">工装设备检验记录</span>
        <span class="checkout checkout-all"
          >当月检验总数:{{checkoutDatas.inspectionQuantity}}</span
        >
        <span class="checkout checkout-complete"
          >已检验数:{{checkoutDatas.inspectionCompletedQuantity}}</span
        >
        <span class="checkout checkout-incomplete"
          >待检验数:{{checkoutDatas.inspectionUncompletedQuantity}}</span
        >
        <div>
          <dv-scroll-board
            ref="scrollBoard2"
            style="
              height: 2.2rem;
              position: absolute;
              width: 5.2rem;
              top: 4.7rem;
              left: 0.3rem;
            "
            :config="checkoutConfig"
          />
        </div>
      </div>
      <div class="box">
        <span class="title check-title">工装设备检验图表</span>
        <div
          style="
            height: 2.5rem;
            position: absolute;
            width: 4.86rem;
            top: 7.9rem;
            left: 0.44rem;
          "
          id="checkoutChart"
        ></div>
      </div>
      <div class="box">
        <span class="title inventory-name">{{ inventoryDatas.name }}</span>
        <span class="inventory clamp-all">工装总数</span>
        <span class="inventory clamp-all-count"
          >{{ inventoryDatas.clampQuantity }}</span
        >
        <span class="inventory clamp-complete">已盘数</span>
        <span class="inventory clamp-complete-count"
          >{{ inventoryDatas.clampInventoriedQuantity }}</span
        >
        <span class="inventory clamp-incomplete">未盘数</span>
        <span class="inventory clamp-incomplete-count"
          >{{ inventoryDatas.clampNotInventoriedQuantity }}</span
        >
        <span class="inventory device-all">设备总数</span>
        <span class="inventory device-all-count"
          >{{ inventoryDatas.instrumentQuantity }}</span
        >
        <span class="inventory device-complete">已盘数</span>
        <span class="inventory device-complete-count"
          >{{ inventoryDatas.instrumentInventoriedQuantity }}</span
        >
        <span class="inventory device-incomplete">未盘数</span>
        <span class="inventory device-incomplete-count"
          >{{ inventoryDatas.instrumentNotInventoriedQuantity }}</span
        >
      </div>
      <div class="box">
        <span class="title agv-task-title">AGV 任务执行记录</span>
        <div>
          <dv-scroll-board
            ref="scrollBoard3"
            style="
              height: 2.8rem;
              position: absolute;
              width: 7.8rem;
              top: 7.4rem;
              left: 6rem;
            "
            :config="agvTaskConfig"
          />
        </div>
      </div>
      <div class="box">
        <span class="title agv-year-title">AGV 年任务统计</span>
        <div
          style="
            height: 3rem;
            position: absolute;
            width: 5.6rem;
            top: 0.82rem;
            right: 0.1rem;
          "
          id="agvYearChart"
        ></div>
      </div>
      <div class="box">
        <span class="title agv-record-title">AGV 任务执行统计</span>
        <div
          style="
            height: 2.5rem;
            position: absolute;
            width: 4.86rem;
            top: 4.3rem;
            right: 0.44rem;
          "
          id="agvTotalChart"
        ></div>
      </div>
      <div class="box">
        <span class="title device-time-title">设备使用时长</span>
        <div>
          <dv-scroll-board
            ref="scrollBoard4"
            style="
              height: 2.3rem;
              position: absolute;
              width: 5rem;
              top: 7.86rem;
              right: 0.4rem;
            "
            :config="deviceTimeConfig"
          />
        </div>
      </div>
    </div>
    <div class="back"></div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            timer: null,
            checkoutChart: null,
            agvYearChart: null,
            agvTotalChart: null,
            chartDatas: null,
            maintainConfig: {
              header: [
                // '<span style="color:#ffffff;font-size:0.14rem">序号</span>',
                '<span style="color:#ffffff;font-size:0.14rem">名称</span>',
                '<span style="color:#ffffff;font-size:0.14rem">类型</span>',
                '<span style="color:#ffffff;font-size:0.14rem">维修原因</span>',
                '<span style="color:#ffffff;font-size:0.14rem">维修时间</span>',
              ],
              columnWidth: [140, 80, 120, 140],
              data: [],
              align: ["center", "center", "center", "center"],
              headerBGC: "transparent",
              oddRowBGC: "transparent",
              evenRowBGC: "transparent",
            },
            checkoutConfig: {
              header: [
                // '<span style="color:#ffffff;font-size:0.14rem">序号</span>',
                '<span style="color:#ffffff;font-size:0.14rem">名称</span>',
                '<span style="color:#ffffff;font-size:0.14rem">类型</span>',
                '<span style="color:#ffffff;font-size:0.14rem">送检时间</span>',
                '<span style="color:#ffffff;font-size:0.14rem">返回时间</span>',
              ],
              columnWidth: [140, 80, 120, 140],
              data: [],
              align: ["center", "center", "center", "center"],
              headerBGC: "transparent",
              oddRowBGC: "transparent",
              evenRowBGC: "transparent",
            },
            agvTaskConfig: {
              header: [
                // '<span style="color:#ffffff;font-size:0.14rem">序号</span>',
                '<span style="color:#ffffff;font-size:0.14rem">名称</span>',
                '<span style="color:#ffffff;font-size:0.14rem">类型</span>',
                // '<span style="color:#ffffff;font-size:0.14rem">状态</span>',
                '<span style="color:#ffffff;font-size:0.14rem">起点位置</span>',
                '<span style="color:#ffffff;font-size:0.14rem">终点位置</span>',
                '<span style="color:#ffffff;font-size:0.14rem">下达时间</span>',
                // '<span style="color:#ffffff;font-size:0.14rem">执行时间</span>',
                '<span style="color:#ffffff;font-size:0.14rem">完成时间</span>',
              ],
              columnWidth: [120, 110, 90, 90, 160, 160],
              data: [],
              align: [
                "center",
                "center",
                "center",
                "center",
                "center",
                "center",
                // "center",
              ],
              headerBGC: "transparent",
              oddRowBGC: "transparent",
              evenRowBGC: "transparent",
            },
            deviceTimeConfig: {
              header: [
                // '<span style="color:#ffffff;font-size:0.14rem">序号</span>',
                '<span style="color:#ffffff;font-size:0.14rem">名称</span>',
                '<span style="color:#ffffff;font-size:0.14rem">编号</span>',
                '<span style="color:#ffffff;font-size:0.14rem">类型</span>',
                '<span style="color:#ffffff;font-size:0.14rem">使用时长</span>',
              ],
              columnWidth: [140, 160, 70, 126],
              data: [],
              align: ["center", "center", "center", "center"],
              headerBGC: "transparent",
              oddRowBGC: "transparent",
              evenRowBGC: "transparent",
            },
            tableDatas: [],
            repairDatas: {},
            repairLineDatas: [],
            checkoutDatas: {},
            checkoutLineDatas: [],
            inventoryDatas: {},
            chartDatas: [],
            agvTaskDatas: [],
            agvMonthDatas: [],
            useTimeData: [],
            agvComplete: 0,
            agvUnComplete: 0,
          };
        },

        methods: {
          // 获取当前展示的仓库id
          getWarehouseId() {
            const _self = this;
            const params = getQueryString();
            _self.warehouseId = params.warehouseId;
          },

          // 绘制工装设备检验图
          createCheckoutChart() {
            const _self = this;
            const checkoutOption = drawCheckoutChart();
            initChart(_self.checkoutChart, checkoutOption);
          },

          // 绘制Agv年任务统计图
          createAgvYearChart() {
            const _self = this;
            const agvYearOption = drawAgvYearChart();
            initChart(_self.agvYearChart, agvYearOption);
          },
          // 绘制AGV任务执行统计图
          createAgvTotalChart() {
            const _self = this;
            const agvTotalOption = drawAgvTotalChart();
            initChart(_self.agvTotalChart, agvTotalOption);
          },

          // 获取看板信息
          getWarehouseInfo() {
            const _self = this;
            const url = "/api/InventoryRepairResource/queryBoardData";
            const params = [["warehouseId", _self.warehouseId]];
            // const success = twoDatas // 测试数据
            ajaxGet(url, params).then((success) => {
            if (success.errorCode === 0) {
              const {
                cfCheckVouchBoardResponse,
                cfInventoryRepairBoardResponse,
              } = success.data;
              const {
                cfInventoryInspectionBoardResponse,
                cfInventoryChartBoardResponse,
                cfInventoryAgvBoardResponse,
                cfInventoryUseTimeBoardResponse,
              } = success.data;
              _self.updateInventory(cfCheckVouchBoardResponse);
              _self.updateRepair(
                cfInventoryRepairBoardResponse.cfInventoryRepairLineBoardResponses,
              );
              _self.updateCheck(
                cfInventoryInspectionBoardResponse.cfInventoryInspectionLineBoardResponses,
              );
              _self.updateCount(
                cfInventoryRepairBoardResponse,
                cfInventoryInspectionBoardResponse,
              );
              _self.updateChart(cfInventoryChartBoardResponse);
              _self.updateAgvTask(cfInventoryAgvBoardResponse.agvTaskList);
              _self.updateAgvMonthTask(
                cfInventoryAgvBoardResponse.agvMonthTaskList,
              );
              _self.updateAgvTotalTask(
                cfInventoryAgvBoardResponse.completeQuantity,
                cfInventoryAgvBoardResponse.incompleteQuantity,
              );
              _self.updateUseTime(cfInventoryUseTimeBoardResponse);
            } else {
              console.log(success.errorMessage);
            }
            });
          },

          // 更新盘点单信息
          updateInventory(dtos) {
            const _self = this;
            if (!isObjectEqual(dtos, _self.inventoryDatas)) {
              _self.inventoryDatas = dtos;
            }
          },

          // 更新维修单信息
          updateRepair(dtos) {
            const _self = this;
            if (!isObjectEqual(dtos, _self.repairLineDatas)) {
              const processedData = dtos.map((item, index) => {
                return [
                  // index + 1,
                  item.name || "",
                  item.type || "",
                  item.repairReason || "",
                  item.completeRepairTime
                    ? item.completeRepairTime.substring(0, 10)
                    : "",
                ];
              });
              _self.maintainConfig.data = JSON.parse(
                JSON.stringify(processedData),
              );
              // 强制更新组件
              _self.$nextTick(() => {
                if (_self.$refs.scrollBoard1) {
                  _self.$refs.scrollBoard1.updateRows(
                    _self.maintainConfig.data,
                  );
                }
              });
              _self.repairLineDatas = dtos;
            }
          },
          // 更新检验单信息
          updateCheck(dtos) {
            const _self = this;
            if (!isObjectEqual(dtos, _self.checkoutLineDatas)) {
              const processedData = dtos.map((item, index) => {
                return [
                  // index + 1,
                  item.name || "",
                  item.type || "",
                  item.inspectionTime
                    ? item.inspectionTime.substring(0, 10)
                    : "",
                  item.completeInspectionTime
                    ? item.completeInspectionTime.substring(0, 10)
                    : "",
                ];
              });
              _self.checkoutConfig.data = JSON.parse(
                JSON.stringify(processedData),
              );
              // 强制更新组件
              _self.$nextTick(() => {
                if (_self.$refs.scrollBoard2) {
                  _self.$refs.scrollBoard2.updateRows(
                    _self.checkoutConfig.data,
                  );
                }
              });
              _self.checkoutLineDatas = dtos;
            }
          },

          // 更新维修检查数量
          updateCount(repair, checkout) {
            const _self = this;
            const repairCount = {
              repairQuantity: repair.repairQuantity,
              repairCompletedQuantity: repair.repairCompletedQuantity,
              repairUncompletedQuantity: repair.repairUncompletedQuantity,
            };
            const checkoutCount = {
              inspectionQuantity: checkout.inspectionQuantity,
              inspectionCompletedQuantity: checkout.inspectionCompletedQuantity,
              inspectionUncompletedQuantity:
                checkout.inspectionUncompletedQuantity,
            };
            if (!isObjectEqual(repairCount, _self.repairDatas)) {
              _self.repairDatas = repairCount;
            }
            if (!isObjectEqual(checkoutCount, _self.checkoutDatas)) {
              _self.checkoutDatas = checkoutCount;
            }
          },

          // 更新agv任务列表
          updateAgvTask(dtos) {
            const _self = this;
            if (!isObjectEqual(dtos, _self.agvTaskDatas)) {
              const processedData = dtos.map((item, index) => {
                return [
                  // index + 1,
                  item.agvName || "",
                  item.type || "",
                  item.positionNo || "",
                  item.positionEndNo || "",
                  item.createTime || "",
                  // item.executeTime || "",
                  item.endTime || "",
                ];
              });
              _self.agvTaskConfig.data = JSON.parse(
                JSON.stringify(processedData),
              );
              // 强制更新组件
              _self.$nextTick(() => {
                if (_self.$refs.scrollBoard3) {
                  _self.$refs.scrollBoard3.updateRows(_self.agvTaskConfig.data);
                }
              });
              _self.agvTaskDatas = dtos;
            }
          },

          // 更新工装设备检验表数据
          updateChart(dtos) {
            const _self = this;
            if (!isObjectEqual(dtos, _self.chartDatas)) {
              // 工装数据
              const clampData =
                dtos.cfInventoryChartClampLineBoardResponses || [];
              // 设备数据
              const instrumentData =
                dtos.cfInventoryChartInstrumentLineBoardResponses || [];

              // 按日期排序（日期小的在前）
              const sortedClampData = [...clampData].sort((a, b) => {
                return new Date(a.monthName) - new Date(b.monthName);
              });
              const sortedInstrumentData = [...instrumentData].sort((a, b) => {
                return new Date(a.monthName) - new Date(b.monthName);
              });

              // 排序后的月份
              const xDatas =
                sortedClampData.map((item) => item.monthName) || [];

              // 创建月份到数量的映射，确保日期对应
              const clampMap = new Map();
              sortedClampData.forEach((item) => {
                clampMap.set(item.monthName, item.quantity);
              });

              const instrumentMap = new Map();
              sortedInstrumentData.forEach((item) => {
                instrumentMap.set(item.monthName, item.quantity);
              });

              // 根据x轴数据顺序提取对应的数量数据
              const clampQuantities = xDatas.map(
                (month) => clampMap.get(month) || 0,
              );
              const instrumentQuantities = xDatas.map(
                (month) => instrumentMap.get(month) || 0,
              );

              // 更新图表
              if (_self.checkoutChart) {
                _self.checkoutChart.setOption({
                  xAxis: {
                    data: xDatas,
                  },
                  series: [
                    { name: "工装", data: clampQuantities },
                    { name: "设备", data: instrumentQuantities },
                  ],
                });
              }

              _self.chartDatas = dtos;
            }
          },

          // 更新agv年任务统计(地面库、立体库)
          updateAgvMonthTask(dto) {
            const _self = this;
            if (!isObjectEqual(dto, _self.agvMonthDatas)) {
              const newData = dto.reverse();
              const xDatas = newData.map((item) => item.monthName);
              const groundCount = dto.map((item) => item.groundCount);
              const stereoscopicCount = dto.map(
                (item) => item.stereoscopicCount,
              );
              _self.agvYearChart.setOption({
                xAxis: { data: xDatas },
                series: [
                  { name: "地面库", data: groundCount },
                  { name: "立体库", data: stereoscopicCount },
                ],
              });
              _self.agvMonthDatas = dto;
            }
          },

          // 更新agv任务统计(已完成、未完成)
          updateAgvTotalTask(completeQuantity, incompleteQuantity) {
            const _self = this;
            if (
              completeQuantity !== _self.agvComplete ||
              incompleteQuantity !== _self.agvUnComplete
            ) {
              const countData = [
                { name: "已完成", value: completeQuantity },
                { name: "未完成", value: incompleteQuantity },
              ];

              _self.agvTotalChart.setOption({
                series: [{ name: "任务统计", data: countData }],
              });
              _self.agvComplete = completeQuantity;
              _self.agvUnComplete = incompleteQuantity;
            }
          },

          // 更新设备使用时长
          updateUseTime(dtos) {
            const _self = this;
            if (!isObjectEqual(dtos, _self.useTimeData)) {
              const processedData = dtos.map((item, index) => {
                return [
                  // index + 1,
                  item.invName || "",
                  item.invNo || "",
                  item.type || "",
                  item.useTime || "",
                ];
              });
              _self.deviceTimeConfig.data = JSON.parse(
                JSON.stringify(processedData),
              );
              // 强制更新组件
              _self.$nextTick(() => {
                if (_self.$refs.scrollBoard4) {
                  _self.$refs.scrollBoard4.updateRows(
                    _self.deviceTimeConfig.data,
                  );
                }
              });
              _self.useTimeData = dtos;
            }
          },

          // 屏幕自适应
          resizeChart() {
            const _self = this;
            _self.checkoutChart && _self.checkoutChart.resize();
            _self.agvYearChart && _self.agvYearChart.resize();
            _self.agvTotalChart && _self.agvTotalChart.resize();
          },

          cancalDebounce: debounce(function () {
            this.resizeChart();
          }, 200),
        },

        mounted() {
          const _self = this;
          _self.getWarehouseId();
          _self.checkoutChart = getElement("checkoutChart");
          _self.agvYearChart = getElement("agvYearChart");
          _self.agvTotalChart = getElement("agvTotalChart");
          _self.$nextTick(() => {
            _self.createCheckoutChart();
            _self.createAgvYearChart();
            _self.createAgvTotalChart();
            _self.getWarehouseInfo();
            window.addEventListener("resize", _self.cancalDebounce);
          });
          _self.timer = setInterval(() => {
            _self.getWarehouseInfo();
          }, 3000);
        },
        beforeUnmount() {
          const _self = this;
          clearInterval(_self.timer);
          _self.timer = null;
        },
      });
    </script>
  </body>
</html>