Chengfei_LiTiKu
/
chengfei-board


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520
							<!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/board1.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 day-title">近七日出入库数据</span>
        <div
          style="
            height: 4rem;
            position: absolute;
            width: 4.6rem;
            top: 1rem;
            left: 0.4rem;
          "
          id="daysChart"
        ></div>
      </div>
      <div class="box">
        <span class="title position-title">今日出入库货位</span>
        <div
          style="
            height: 4.9rem;
            position: absolute;
            width: 4.6rem;
            top: 5.4rem;
            left: 0.4rem;
          "
          id="positionChart"
        ></div>
      </div>
      <div class="box">
        <span class="title quantity-title">库存数量</span>
        <span class="title count frock-title">工装库存</span>
        <span class="count-number clamp-quantity">{{clampQuantity}}</span>
      </div>
      <div class="box">
        <span class="title count total-title">总库存</span>
        <span class="count-number inventory-quantity"
          >{{inventoryQuantity}}</span
        >
      </div>
      <div class="box">
        <span class="title count device-title">设备库存</span>
        <span class="count-number instrument-quantity"
          >{{instrumentQuantity}}</span
        >
      </div>
      <div class="box">
        <span class="title year-title">年领用数据统计</span>
        <div
          style="
            height: 3rem;
            position: absolute;
            width: 9.2rem;
            top: 2.7rem;
            left: 5.2rem;
          "
          id="yearChart"
        ></div>
      </div>
      <div class="box">
        <span class="title goIn-title">出入库记录</span>
        <div>
          <dv-scroll-board
            ref="scrollBoard"
            style="
              height: 3.2rem;
              position: absolute;
              width: 8.8rem;
              top: 6.6rem;
              left: 5.5rem;
            "
            :config="recordConfig"
          />
        </div>
      </div>
      <div class="box">
        <span class="title type-title">今日出入库类型</span>
        <div
          style="
            height: 4.2rem;
            position: absolute;
            width: 5rem;
            top: 0.4rem;
            right: 0.3rem;
          "
          id="typeChart"
        ></div>
      </div>
      <div class="box">
        <span class="title hot-title">热门使用Top5</span>
        <div
          style="
            height: 2.8rem;
            position: absolute;
            width: 5rem;
            top: 4.7rem;
            right: 0.2rem;
          "
          id="hotChart"
        ></div>
      </div>
      <div class="box">
        <span class="title use-title">领用排行Top5</span>
        <div
          style="
            height: 2.7rem;
            position: absolute;
            width: 5rem;
            top: 7.6rem;
            right: 0.2rem;
          "
          id="useChart"
        ></div>
      </div>
    </div>
    <div class="back"></div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            timer: null,
            clampQuantity: null,
            inventoryQuantity: null,
            instrumentQuantity: null,
            daysChart: null,
            positionChart: null,
            yearChart: null,
            typeChart: null,
            hotChart: null,
            useChart: null,
            recordConfig: {
              header: [
                '<span style="color:#3296f6;font-size:0.18rem">序号</span>',
                '<span style="color:#3296f6;font-size:0.18rem">名称</span>',
                '<span style="color:#3296f6;font-size:0.18rem">图号</span>',
                '<span style="color:#3296f6;font-size:0.18rem">类型</span>',
                '<span style="color:#3296f6;font-size:0.18rem">规格</span>',
                '<span style="color:#3296f6;font-size:0.18rem">操作时间</span>',
                '<span style="color:#3296f6;font-size:0.18rem">操作人</span>',
              ],
              columnWidth: [60, 140, 160, 90, 120, 160, 120],
              data: [],
              align: [
                "center",
                "center",
                "center",
                "center",
                "center",
                "center",
                "center",
              ],
              headerBGC: "transparent",
              oddRowBGC: "transparent",
              evenRowBGC: "transparent",
            },
            tableDatas: [],
            dayDatas: [],
            outStockDatas: [],
            inStockDatas: [],
            yearDatas: [],
            inTypeDatas: {},
            outTypeDatas: {},
            hotDatas: [],
            useDatas: [],
            outDatas: {},
            inDatas: {},
          };
        },

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

          // 创建出入库柱状图
          createDaysChart() {
            const _self = this;
            const daysOption = drawDaysChart();
            initChart(_self.daysChart, daysOption);
          },
          createPositionChart() {
            const _self = this;
            const positionOption = drawPositionChart();
            initChart(_self.positionChart, positionOption);
          },
          createYearChart() {
            const _self = this;
            const yearOption = drawYearChart();
            initChart(_self.yearChart, yearOption);
          },
          createTypeChart() {
            const _self = this;
            const typeOption = drawTypeChart();
            initChart(_self.typeChart, typeOption);
          },
          createHotChart() {
            const _self = this;
            const hotOption = drawTopChart();
            initChart(_self.hotChart, hotOption);
          },
          createUseChart() {
            const _self = this;
            const useOption = drawTopChart();
            initChart(_self.useChart, useOption);
          },
          // 获取看板信息
          getWarehouseInfo() {
            const _self = this;
            const url = "/api/WmsResource/queryBoardStatistic";
            const params = [["warehouseId", _self.warehouseId]];
            // const success = oneDatas // 测试数据
            ajaxGet(url, params).then((success) => {
              if (success.errorCode === 0) {
                const { weekStatisticList, stockOutPosition } = success.data;
                const { stockInPosition, monthPickList } = success.data;
                const { inventoryQuantity, clampQuantity, instrumentQuantity } =
                  success.data;
                const { stockInCategory, stockOutCategory } = success.data;
                const { popularInvList, popularUserList } = success.data;
                const { cfInAndOutResponses } = success.data;

                _self.clampQuantity = clampQuantity;
                _self.inventoryQuantity = inventoryQuantity;
                _self.instrumentQuantity = instrumentQuantity;

                _self.updateDaysChart(weekStatisticList);
                _self.updatePositionChart(stockOutPosition, stockInPosition);
                _self.updateYearChart(monthPickList);
                _self.updateTypeChart(stockInCategory, stockOutCategory);
                _self.updateHotChart(popularInvList);
                _self.updateInOutChart(cfInAndOutResponses);
                _self.updateUseChart(popularUserList);
              } else {
                console.log(success.errorMessage);
              }
            });
          },

          // 更新近七日出入库数据
          updateDaysChart(dto) {
            const _self = this;
            if (!isObjectEqual(dto, _self.dayDatas)) {
              const xDatas = dto.map((item) => {
                const date = new Date(item.day);
                const month = (date.getMonth() + 1).toString().padStart(2, "0");
                const day = date.getDate().toString().padStart(2, "0");
                return `${month}.${day}`;
              });
              const inDatas = dto.map((item) => item.inCount);
              const outDatas = dto.map((item) => item.outCount);
              _self.daysChart.setOption({
                xAxis: {
                  data: xDatas,
                },
                series: [
                  { name: "入库", data: inDatas },
                  { name: "出库", data: outDatas },
                ],
              });
              _self.dayDatas = dto;
            }
          },

          // 更新货位数据
          updatePositionChart(outDto, inDto) {
            const _self = this;
            if (
              !isObjectEqual(outDto, _self.outDatas) ||
              !isObjectEqual(inDto, _self.inDatas)
            ) {
              const inDatas = [
                inDto.toolQuantity,
                inDto.equipmentQuantity,
                inDto.finishedQuantity,
                inDto.stereoscopicQuantity,
                inDto.groundQuantity,
              ];
              const outDatas = [
                outDto.toolQuantity,
                outDto.equipmentQuantity,
                outDto.finishedQuantity,
                outDto.stereoscopicQuantity,
                outDto.groundQuantity,
              ];
              _self.positionChart.setOption({
                series: [
                  { name: "入库", data: inDatas },
                  { name: "出库", data: outDatas },
                ],
              });
              _self.outStockDatas = outDto;
              _self.inStockDatas = inDto;
            }
          },

          // 更新年领用数据
          updateYearChart(dto) {
            const _self = this;
            if (!isObjectEqual(dto, _self.yearDatas)) {
              const xDatas = dto.map((item) => item.month);
              const pickCount = dto.map((item) => item.pickCount);
              const clampCount = dto.map((item) => item.clampCount);
              const instrumentCount = dto.map((item) => item.instrumentCount);
              _self.yearChart.setOption({
                xAxis: { data: xDatas },
                series: [
                  { name: "总领用", data: pickCount },
                  { name: "设备领用", data: clampCount },
                  { name: "工装领用", data: instrumentCount },
                ],
              });
              _self.yearDatas = dto;
            }
          },

          // 更新出入库类型数据
          updateTypeChart(inDto, outDto) {
            const _self = this;
            if (
              !isObjectEqual(inDto, _self.inTypeDatas) ||
              !isObjectEqual(outDto, _self.outTypeDatas)
            ) {
              const seriesData = [
                {
                  name: "工装入库数",
                  value: inDto.clampQuantity,
                },
                {
                  name: "工装出库数",
                  value: outDto.clampQuantity,
                },
                {
                  name: "设备入库数",
                  value: inDto.instrumentQuantity,
                },
                {
                  name: "设备出库数",
                  value: outDto.instrumentQuantity,
                },
                {
                  name: "成品入库数",
                  value: inDto.productQuantity,
                },
                {
                  name: "成品出库数",
                  value: outDto.productQuantity,
                },
              ];
              _self.typeChart.setOption({
                series: [{ name: "类型", data: seriesData }],
              });
              _self.inTypeDatas = inDto;
              _self.outTypeDatas = outDto;
            }
          },

          // 更新热门数据
          updateHotChart(dto) {
            const _self = this;
            if (!isObjectEqual(dto, _self.hotDatas)) {
              const datas = dto.slice(0, 5);
              const names = datas.map((item) => item.invName || "");
              const values = datas.map((item) => Number(item.count) || 0);

              while (names.length < 5) names.push("");
              while (values.length < 5) values.push(0);

              _self.hotChart.setOption({
                yAxis: [{ name: "", data: names }],
                series: [{ name: "值", data: values }],
              });
              _self.hotDatas = dto;
            }
          },

          // 更新领用排行数据
          updateUseChart(dto) {
            const _self = this;
            if (!isObjectEqual(dto, _self.useDatas)) {
              const datas = dto.slice(0, 5);
              const names = datas.map((item) => item.userName || "");
              const values = datas.map((item) => Number(item.count) || 0);

              while (names.length < 5) names.push("");
              while (values.length < 5) values.push(0);

              _self.useChart.setOption({
                yAxis: [{ name: "", data: names }],
                series: [{ name: "值", data: values }],
              });
              _self.useDatas = dto;
            }
          },

          // 更新出入库数据
          updateInOutChart(dtos) {
            const _self = this;
            if (!dtos || dtos.length === 0) {
              _self.recordConfig.data = [];
              return;
            }
            if (!isArrayEqual(dtos, _self.tableDatas)) {
              const processedData = dtos.map((item, index) => {
                return [
                  index + 1,
                  item.name || "",
                  item.drawNo || "",
                  item.type || "",
                  item.inventoryType || "",
                  item.time || "",
                  item.userName || "",
                ];
              });
              _self.tableDatas = dtos;
              _self.recordConfig.data = JSON.parse(
                JSON.stringify(processedData),
              );
              // 强制更新组件
              _self.$nextTick(() => {
                if (_self.$refs.scrollBoard) {
                  _self.$refs.scrollBoard.updateRows(_self.recordConfig.data);
                }
              });
            }
          },

          // 屏幕自适应
          resizeChart() {
            const _self = this;
            _self.daysChart && _self.daysChart.resize();
            _self.positionChart && _self.positionChart.resize();
            _self.yearChart && _self.yearChart.resize();
            _self.typeChart && _self.typeChart.resize();
            _self.hotChart && _self.hotChart.resize();
            _self.useChart && _self.useChart.resize();
          },

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

        mounted() {
          const _self = this;
          _self.getWarehouseId();
          _self.daysChart = getElement("daysChart");
          _self.positionChart = getElement("positionChart");
          _self.yearChart = getElement("yearChart");
          _self.typeChart = getElement("typeChart");
          _self.hotChart = getElement("hotChart");
          _self.useChart = getElement("useChart");
          _self.$nextTick(() => {
            _self.createDaysChart();
            _self.createPositionChart();
            _self.createYearChart();
            _self.createTypeChart();
            _self.createHotChart();
            _self.createUseChart();
            _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>