FengMeiRFID-2024
/
boardFengMei


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
							<!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="../plugin/echarts.min.js"></script>
    <script type="text/javascript" src="../js/chart.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>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/mould.css" />
  </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">
            <span class="count mo_total">模具总数</span>
            <div class="count_box total1">{{count.moldAllQuantity}}</div>

            <span class="count mo_store">模具在库数量</span>
            <div class="count_box store1">
              {{count.moldInWarehouseQuantity}}
            </div>

            <span class="count mo_line">模具产线数量</span>
            <div class="count_box line1">{{count.moldProduceQuantity}}</div>

            <span class="count gauge_total">检具总数</span>
            <div class="count_box total2">{{count.fixtureAllQuantity}}</div>

            <span class="count gauge_store">检具在库数量</span>
            <div class="count_box store2">
              {{count.fixtureInWarehouseQuantity}}
            </div>

            <span class="count gauge_line">检具产线数量</span>
            <div class="count_box line2">{{count.fixtureProduceQuantity}}</div>
          </div>
          <div class="box">
            <div
              class="chart"
              style="height: 5.4rem; margin-top: 0.5rem; left: 0.1rem"
              id="dieCountChart"
            ></div>
          </div>
        </li>

        <li>
          <div class="box">
            <div
              class="chart center"
              style="height: 8rem; top: -2.96rem; left: 1.26rem"
              id="workShopChart"
            ></div>
          </div>
          <div class="box">
            <div class="title malfunction center">模检具故障趋势图</div>
            <div
              class="chart center"
              style="height: 1rem; margin-top: 1.24rem; left: 0.6rem"
              id="malfunctionNumber"
            ></div>
            <div
              class="chart center"
              style="margin-top: 2rem; height: 3.4rem"
              id="malfunctionChart"
            ></div>
          </div>
        </li>
        <li>
          <div class="box">
            <div class="title aging center">模具维修时效</div>
            <div
              class="chart center"
              style="height: 4rem; margin-top: 0.6rem; left: -1.2rem"
              id="maintainChart"
            ></div>
          </div>
          <div class="box">
            <div class="title outIn center">近七天模检具出入库情况</div>
            <div
              class="chart center"
              style="height: 4rem; margin-top: 1rem; left: -1rem"
              id="outInChart"
            ></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="back"></div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            count: {
              moldAllQuantity: "",
              moldInWarehouseQuantity: "",
              moldProduceQuantity: "",
              fixtureAllQuantity: "",
              fixtureInWarehouseQuantity: "",
              fixtureProduceQuantity: "",
            },
            workShopChart: null,
            malfunctionChart: null,
            malfunctionNumber: null,
            dieCountChart: null,
            maintainChart: null,
            outInChart: null,
            warehouse: null,
            workShopDatas: null,
            warehouseId: null,
          };
        },
        methods: {
          // 创建并渲染中间车间环图
          createWorkShopChart() {
            const _self = this;
            const workShopOption = drawWorkShopChart(
              _self.workShopChart,
              _self.workShopDatas
            );
            initChart(_self.workShopChart, workShopOption);
          },

          // 创建并渲染左下角模检具数量图
          createCountChart() {
            const _self = this;
            const data = [];
            const countOption = drawCountChart(_self.dieCountChart, data);
            initChart(_self.dieCountChart, countOption);
          },

          // 更新左下角数据
          updateCountChart(newData) {
            newData.forEach((item) => {
              item.value = item.quantity;
            });
            let value = newData.reduce((a, b) => a + b.quantity, 0);
            this.dieCountChart.setOption({
              title: [{ text: "{a|" + "总数" + "\n " + value + "}{c|}" }],
              series: [{ type: "pie", name: "模检具数量", data: newData }],
            });
          },

          // 创建并渲染中间模检具故障数量图
          createMalfunctionNumberChart() {
            const _self = this;
            const malfunctionNumberOption = drawMalfunctionNumber();
            initChart(_self.malfunctionNumber, malfunctionNumberOption);
          },

          // 更新故障数量图数据
          updateNumberChart(newData) {
            let number = [];
            newData.forEach((item) => {
              item.value = item.quantity;
              number.push({ name: item.name, value: `${item.value}个` });
            });
            this.malfunctionNumber.setOption({
              series: [{ name: "故障数量", type: "bar", data: newData }],
              yAxis: [{ name: "right", data: number }],
            });
          },

          // 创建并渲染中间模检具故障趋势曲线图
          createMalfunctionChart() {
            const _self = this;

            const malfunctionOption = drawMalfunctionChart();
            initChart(_self.malfunctionChart, malfunctionOption);
          },

          // 更新检具故障趋势曲线图数据
          updateMalfunctionChart(newData) {
            this.malfunctionChart.setOption({
              xAxis: [{ name: "月份", data: newData.name }],
              series: [
                {
                  name: "模具故障趋势",
                  type: "line",
                  data: newData.moldQuantity,
                },
                {
                  name: "检具故障趋势",
                  type: "line",
                  data: newData.fixtureQuantity,
                },
              ],
            });
          },

          // 创建并渲染右上角模具维修时效图
          createMaintainChart() {
            const _self = this;

            const maintainOption = drawMaintainChart();
            initChart(_self.maintainChart, maintainOption);
          },

          // 更新维修时效图数据
          updateMaintainChart(newData) {
            const yData = [];
            newData.forEach((item) => {
              yData.push(item.quantity);
            });
            let value = newData.reduce((a, b) => a + b.quantity, 0);
            this.maintainChart.setOption({
              series: [
                { type: "custom", name: "时效", data: yData },
                { type: "bar", name: "比例", data: yData,
                  label: {
                    normal: {
                      formatter: (e) => {
                        if(value == 0){
                          value = 1;
                        }
                        return e.value / value * 100 + '%';
                      },
                    }
                  }},

              ],
            });
          },

          // 创建并渲染右下角模近七天出入库图
          createOutInChart() {
            const _self = this;

            const outInOption = drawOutInChart();
            initChart(_self.outInChart, outInOption);
          },

          // 更新近七天出入库数据
          updateOutInChart(newData) {
            const xData = [];
            newData.forEach((item) => {
              if (item.name === "模具入库总数") {
                xData[0] = item.quantity;
              } else if (item.name === "模具出库总数") {
                xData[1] = item.quantity;
              } else if (item.name === "检具入库总数") {
                xData[2] = item.quantity;
              } else if (item.name === "检具出库总数") {
                xData[3] = item.quantity;
              }
            });
            this.outInChart.setOption({
              series: [{ name: "数量", type: "bar", data: xData }],
            });
          },

          // 屏幕自适应
          resizeChart() {
            const _self = this;
            _self.outInChart && _self.outInChart.resize();
            _self.workShopChart && _self.workShopChart.resize();
            _self.maintainChart && _self.maintainChart.resize();
            _self.dieCountChart && _self.dieCountChart.resize();
            _self.malfunctionChart && _self.malfunctionChart.resize();
            _self.malfunctionNumber && _self.malfunctionNumber.resize();
          },

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

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

          // 获取所有车间信息
          getAllWarehouse() {
            const _self = this;
            const url = "/api/WarehouseResource/queryAllWarehouse";
            ajaxGet(url).then((success) => {
              if (success.errorCode === 0) {
                _self.workShopDatas = success.datas;
                _self.createWorkShopChart();
              } else {
                console.log(success.errorMessage);
              }
            });
          },

          // 获取看板信息
          getBoardInfo(warehouseId) {
            const _self = this;
            const url = "/api/BulletinBoardResource/queryBoardByWarehouse";
            const params = [["warehouseId", warehouseId]];
            ajaxGet(url, params).then((success) => {
              if (success.errorCode === 0) {
                if (success.data) {
                  const { boardInventoryQuantityDto } = success.data; // 左上角模检具数量
                  const { boardInventoryPieDtos: count } = success.data; // 左下角饼图
                  const { boardRepairInThirtyDaysDtos: number } = success.data; // 中间故障数量
                  const { boardInventoryRepairDto: fault } = success.data; // 中间故障折线图
                  const { boardMoldRepairDurationDtos: timer } = success.data; // 右上角时效图
                  const { boardInventoryStockInOrOutDtos: inOut } =
                    success.data; // 右下角出入库

                  // 更新左上角
                  _self.count = boardInventoryQuantityDto;
                  // 更新左下角
                  if (count && count.length > 0) {
                    _self.updateCountChart(count);
                  }
                  // 更新中间故障数量
                  if (number && number.length > 0) {
                    _self.updateNumberChart(number);
                  }
                  // 更新中间故障曲线
                  _self.updateMalfunctionChart(fault);
                  // 更新右上角
                  if (timer && timer.length > 0) {
                    _self.updateMaintainChart(timer);
                  }
                  // 更新右下角
                  if (inOut && inOut.length > 0) {
                    _self.updateOutInChart(inOut);
                  }
                }
              } else {
                console.log(success.errorMessage);
              }
            });
          },

          // 销毁图表
          disposeChart(chart) {
            chart && chart.dispose();
          },
        },
        watch: {
          warehouseId(newVal, oldValue) {
            var _self = this;
            if (newVal !== oldValue) {
              _self.getBoardInfo(newVal);
            }
          },
        },
        mounted() {
          const _self = this;
          _self.outInChart = getElement("outInChart");
          _self.workShopChart = getElement("workShopChart");
          _self.dieCountChart = getElement("dieCountChart");
          _self.maintainChart = getElement("maintainChart");
          _self.malfunctionChart = getElement("malfunctionChart");
          _self.malfunctionNumber = getElement("malfunctionNumber");

          _self.getAllWarehouse();
          _self.$nextTick(() => {
            _self.createCountChart();
            _self.createOutInChart();
            _self.createMaintainChart();
            _self.createMalfunctionChart();
            _self.createMalfunctionNumberChart();
            window.addEventListener("resize", _self.cancalDebounce);
            window.addEventListener("onmessageChange", _self.getWarehouseId);
          });
        },
        beforeUnmount() {
          const _self = this;
          window.clearInterval(window.timeTicket);
          window.timeTicket = null;
          _self.disposeChart(_self.outInChart);
          _self.disposeChart(_self.workShopChart);
          _self.disposeChart(_self.maintainChart);
          _self.disposeChart(_self.dieCountChart);
          _self.disposeChart(_self.malfunctionChart);
          _self.disposeChart(_self.malfunctionNumber);
          window.removeEventListener("resize", _self.cancalDebounce);
          window.removeEventListener("onmessageChange", _self.getWarehouseId);
        },
      });
    </script>
  </body>
</html>