托盘管理运行驾驶舱，采购运营驾驶仓ui页面

src/views/bpm/vis-page/procurementOperationsManagement.vue

@@ -0,0 +1,772 @@
+<template>
+  <vue-fullscreen
+    class="box-container"
+    v-model="isFullscreen"
+    fullscreenClass="box-container"
+    :exit-on-click-wrapper="false"
+    v-cloak
+  >
+    <div class="box-container">
+      <div class="box-header">
+        <div class="logo">
+          <!--          <img style="width: 20% ;height: 100%;transform: translate(51%,15%)" src="../../../assets/TGLOGO.png" alt="">-->
+        </div>
+        <div class="title"> 采购运营管理驾驶舱 </div>
+        <div class="time">
+          <span
+            style="color: #7fa7ce; margin: 5px 10px 15px 0; cursor: pointer"
+            @click.passive="onFullscreen"
+          >
+            <i
+              v-if="isFullscreen"
+              title="取消全屏"
+              class="el-icon-_screen-restore"
+            ></i>
+            <i v-else title="全屏" class="el-icon-_screen-full"></i>
+          </span>
+          <div style="margin-right: 10px">
+            <span style="color: #7fa7ce">{{ date }}</span>
+            <span style="color: rgb(210 215 221); padding: 0 5px">{{
+              time
+            }}</span>
+            <span style="color: #7fa7ce">{{ week }} </span>
+          </div>
+        </div>
+      </div>
+      <div class="box-footer">
+        <div class="box-footer-left">
+          <div class="box-echarts">
+            <div class="box-echarts-top">
+              <span class="box-top-name">月度付款分析</span>
+            </div>
+            <div class="monthly_volume">
+              <div
+                v-if="isFlag"
+                class="monthly_volume_c"
+                ref="monthly_payment_volume"
+              ></div>
+            </div>
+          </div>
+          <div class="box-echarts">
+            <div class="box-echarts-top">
+              <span class="box-top-name">收付款额情况</span>
+            </div>
+            <div class="monthly_volume">
+              <div v-if="isFlag" class="monthly_volume_c" ref="monthly_payment_amount"></div>
+            </div>
+          </div>
+          <div class="box-echarts box-echarts-count">
+            <div class="box-echarts-top">
+              <span class="box-top-name">出入库统计</span>
+            </div>
+            <div class="box-count">
+              <div class="box-count-content">
+                <div class="box-content box-content-type">
+                  <div class="box-top">图片.jpg</div>
+                  <div class="box-footer">成品</div>
+                </div>
+                <div class="box-content">
+                  <div class="box-top">0</div>
+                  <div class="box-footer">出库</div>
+                </div>
+                <div class="box-content">
+                  <div class="box-top">0</div>
+                  <div class="box-footer">入库</div>
+                </div>
+              </div>
+              <div class="box-count-content">
+                <div class="box-content box-content-type">
+                  <div class="box-top">图片.jpg</div>
+                  <div class="box-footer">原材料</div>
+                </div>
+                <div class="box-content">
+                  <div class="box-top">0</div>
+                  <div class="box-footer">出库</div>
+                </div>
+                <div class="box-content">
+                  <div class="box-top">0</div>
+                  <div class="box-footer">入库</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box-footer-middle">
+         <div class="box-middle-header"></div>
+          <div class="box-echarts">
+            <div class="box-echarts-top">
+              <span class="box-top-name">采购订单统计</span>
+            </div>
+            <div class="monthly_volume">
+              <div
+                v-if="isFlag"
+                class="monthly_volume_c"
+                ref="monthly_purchase_order"
+              ></div>
+            </div>
+          </div>
+        </div>
+        <div class="box-footer-right">
+          <div class="box-echarts">
+            <div class="box-echarts-top">
+              <span class="box-top-name">采购退货统计</span>
+            </div>
+            <div class="monthly_volume">
+              <div
+                v-if="isFlag"
+                class="monthly_volume_c"
+                ref="monthly_purchase_return"
+              ></div>
+            </div>
+          </div>
+          <div class="box-echarts box-echarts-count">
+            <div class="box-echarts-top">
+              <span class="box-top-name">成品库存统计</span>
+            </div>
+            <div class="box-count">
+              <div class="box-count-content">
+                <div class="box-content box-content-type">
+                  <div class="box-top">图片.jpg</div>
+                  <div class="box-footer">成品</div>
+                </div>
+                <div class="box-content">
+                  <div class="box-top">0</div>
+                  <div class="box-footer">出库</div>
+                </div>
+                <div class="box-content">
+                  <div class="box-top">0</div>
+                  <div class="box-footer">入库</div>
+                </div>
+              </div>
+              <div class="box-count-content">
+                <div class="box-content box-content-type">
+                  <div class="box-top">图片.jpg</div>
+                  <div class="box-footer">原材料</div>
+                </div>
+                <div class="box-content">
+                  <div class="box-top">0</div>
+                  <div class="box-footer">出库</div>
+                </div>
+                <div class="box-content">
+                  <div class="box-top">0</div>
+                  <div class="box-footer">入库</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="box-echarts">
+            <div class="box-echarts-top">
+              <span class="box-top-name">供应商排名</span>
+            </div>
+            <div class="monthly_output">
+              <dv-scroll-board :config="config" style="width:100%;height:200px" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </vue-fullscreen>
+</template>
+
+<script>
+  import dvBorderContent from './dv-border-content.vue';
+  import * as echarts from 'echarts';
+  import { component } from 'vue-fullscreen';
+  export default {
+    name: 'index',
+    components: {
+      dvBorderContent,
+      VueFullscreen: component
+    },
+    computed: {
+      contentWidth() {
+        return this.$store.state.theme.contentWidth;
+      }
+    },
+    watch: {
+      isFullscreen: {
+        handler() {
+          this.isFlag = false;
+          this.$nextTick(() => {
+            let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
+              document.documentElement;
+            let eleAdminHeaderHeight =
+              (!this.isFullscreen &&
+                document.getElementsByClassName('ele-admin-header')[0]
+                  ?.offsetHeight) ||
+              0;
+            let eleAdminSidebarWidth =
+              (!this.isFullscreen &&
+                document.getElementsByClassName('ele-admin-sidebar')[0]
+                  ?.offsetWidth) ||
+              0;
+            let eleAdminTabsWidth =
+              (!this.isFullscreen &&
+                document.getElementsByClassName('ele-admin-tabs')[0]
+                  ?.offsetHeight) ||
+              0;
+
+            const setContainerSize = (item) => {
+              item.style.height =
+                deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
+              item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
+            };
+            let boxContainer = [
+              ...document.getElementsByClassName('box-container')
+            ];
+            boxContainer.forEach(setContainerSize);
+
+            document.documentElement.style.fontSize = this.isFullscreen
+              ? '24px'
+              : '16px';
+            this.isFlag = true;
+
+            this.$nextTick(() => {
+              //月度付款分析
+              let chartDom = this.$refs.monthly_payment_volume;
+              this.payMentChart = echarts.init(chartDom);
+              this.getMonthlyPaymentStatistic();
+
+              //收付款额
+              let chartDom2 = this.$refs.monthly_payment_amount;
+              this.payMentAmountChart = echarts.init(chartDom2);
+              this.getMonthlyPaymentAmountStatistic();
+
+              //采购退货统计
+              let chartDom3 = this.$refs.monthly_purchase_return;
+              this.purchaseReturnChart = echarts.init(chartDom3);
+              this.getPurchaseReturnStatistic();
+
+              //采购订单统计
+              let chartDom4 = this.$refs.monthly_purchase_order;
+              this.purchaseOrderChart = echarts.init(chartDom4);
+              this.getPurchaseOrderStatistic();
+            });
+          });
+        },
+        immediate: true
+      },
+      contentWidth: {
+        handler() {
+          this.isFlag = false;
+          this.$nextTick(() => {
+            let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
+              document.documentElement;
+            let eleAdminHeaderHeight =
+              (!this.isFullscreen &&
+                document.getElementsByClassName('ele-admin-header')[0]
+                  ?.offsetHeight) ||
+              0;
+            let eleAdminSidebarWidth =
+              (!this.isFullscreen &&
+                document.getElementsByClassName('ele-admin-sidebar')[0]
+                  ?.offsetWidth) ||
+              0;
+            let eleAdminTabsWidth =
+              (!this.isFullscreen &&
+                document.getElementsByClassName('ele-admin-tabs')[0]
+                  ?.offsetHeight) ||
+              0;
+            const setContainerSize = (item) => {
+              item.style.height =
+                deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
+              item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
+            };
+            let boxContainer = [
+              ...document.getElementsByClassName('box-container')
+            ];
+            boxContainer.forEach(setContainerSize);
+            document.documentElement.style.fontSize = this.isFullscreen
+              ? '24px'
+              : '16px';
+            this.isFlag = true;
+            this.$nextTick(() => {
+              //月度付款分析
+              let chartDom = this.$refs.monthly_payment_volume;
+              this.payMentChart = echarts.init(chartDom);
+              this.getMonthlyPaymentStatistic(); 
+
+              //收付款额
+              let chartDom2 = this.$refs.monthly_payment_amount;
+              this.payMentAmountChart = echarts.init(chartDom2);
+              this.getMonthlyPaymentAmountStatistic();
+
+              //采购退货统计
+              let chartDom3 = this.$refs.monthly_purchase_return;
+              this.purchaseReturnChart = echarts.init(chartDom3);
+              this.getPurchaseReturnStatistic();
+
+              //采购订单统计
+              let chartDom4 = this.$refs.monthly_purchase_order;
+              this.purchaseOrderChart = echarts.init(chartDom4);
+              this.getPurchaseOrderStatistic();
+            });
+          });
+        },
+        immediate: true
+      }
+    },
+    deactivated() {
+      clearInterval(this.updateTimer);
+    },
+    data() {
+      return {
+        isFullscreen: false, // 是否是全屏
+        isFlag: false, // 是否展示图表
+        date: '',
+        time: '',
+        week: '',
+        signedTotal: 0,
+        deliveryTotal: 0,
+        salesTotal: 0,
+        WeightGainTotal: 0,
+        WeightStorageTotal: 0,
+        payMentChart: null,
+        payMentAmountChart: null,
+        purchaseReturnChart: null,
+        purchaseOrderChart: null,
+        config: {
+          header: [],
+          data: [
+                ['行1列1', '行1列2', ],
+                ['行2列1', '行2列2',],
+                ['行3列1', '行3列2',],
+                ['行4列1', '行4列2',],
+                ['行5列1', '行5列2',],
+                ['行6列1', '行6列2',],
+                ['行7列1', '行7列2',],
+                ['行8列1', '行8列2',],
+                ['行9列1', '行9列2',],
+                ['行10列1', '行10列2',]
+              ],
+          align: ['center', 'center',],
+          headerBGC: '#031d42',
+          oddRowBGC: '#0F1D5B',
+          evenRowBGC: '#0F1D5B',
+          waitTime: 5000,
+        },
+        monthlyPaymentOption: {
+          color: 'white',
+          grid: {
+            top: "10%",
+            bottom: '10%', // 组件离容器底部的距离
+            containLabel: true, // 包含坐标轴的标签,
+          },
+          xAxis: {
+            axisLine: {
+              lineStyle:{
+                color: "white"
+              },
+            },
+            data: []
+          },
+          yAxis: {
+            axisLine: {
+              lineStyle:{
+                color: "white"
+              },
+            },
+            data: []
+          },
+          series: [
+            {
+              data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+              type: 'line',
+              smooth: true
+            }
+          ]
+        }
+      };
+    },
+    created() {
+      this.updateTimer = setInterval(this.updateTime, 1000);
+    },
+    mounted() {
+    },
+    methods: {
+      /* 全屏切换 */
+      onFullscreen() {
+        this.isFullscreen = !this.isFullscreen;
+      },
+
+      //获取月度付款分析
+      async getMonthlyPaymentStatistic() {
+        this.payMentChart.setOption(this.monthlyPaymentOption);
+      },
+      //获取收付款额情况
+      async getMonthlyPaymentAmountStatistic() {
+        this.payMentAmountChart.setOption(this.monthlyPaymentOption);
+      },
+      //采购退货统计
+      async getPurchaseReturnStatistic() {
+        this.purchaseReturnChart.setOption(this.monthlyPaymentOption)
+      },
+      //采购退货统计
+      async getPurchaseOrderStatistic() {
+        this.purchaseOrderChart.setOption(this.monthlyPaymentOption)
+      },
+      //
+      async getSalesFinishList() {
+        /*customerMark	客户代号	string
+deliveryStatus	交付状态 1未交付2提前3按时4延期	integer(int32)
+produceStatus	生产状态 1未生产2已生产3已完成	integer(int32)
+purchaseStatus	采购状态 1未采购2已采购3已入库	integer(int32)
+saleOrderCode	销售订单号	string
+scheduleStatus	排产状态 1待排产2已排产	integer(int32)*/
+        let HeaderFiled = [
+          'customerMark',
+          'saleOrderCode',
+          'purchaseStatus',
+          'scheduleStatus',
+          'produceStatus',
+          'deliveryStatus'
+        ];
+        let data = await getSalesFinishListAPI();
+        this.config = {
+          header: this.tableHeader.map(
+            (item) =>
+              `<div style="color: #f4d29c;font-size: 0.9rem;font-weight: bold">${item}</div>`
+          ),
+          data:
+            data.map((item) => {
+              let list = [];
+              for (let i in item) {
+                let div = '';
+                if (i === 'customerMark') {
+                  div = `<div class="white" style="font-size: 0.8rem;">${item[i]}</div>`;
+                  list[0] = div;
+                }
+                if (i === 'saleOrderCode') {
+                  div = `<div class="white" style="font-size: 0.8rem;">${item[i]}</div>`;
+                  list[1] = div;
+                }
+                if (i === 'purchaseStatus') {
+                  if (item[i] == '1') {
+                    div = `<div class="white" style="font-size: 0.8rem;">未采购</div>`;
+                    list[2] = div;
+                  }
+                  if (item[i] == '2') {
+                    div = `<div class="yellow" style="font-size: 0.8rem;">已采购</div>`;
+                    list[2] = div;
+                  }
+                  if (item[i] == '3') {
+                    div = `<div class="yellow" style="font-size: 0.8rem;">已入库</div>`;
+                    list[2] = div;
+                  }
+                }
+                if (i === 'scheduleStatus') {
+                  if (item[i] == '1') {
+                    div = `<div class="white" style="font-size: 0.8rem;">待排产</div>`;
+                    list[3] = div;
+                  }
+                  if (item[i] == '2') {
+                    div = `<div class="yellow" style="font-size: 0.8rem;">已排产</div>`;
+                    list[3] = div;
+                  }
+                }
+                if (i === 'produceStatus') {
+                  if (item[i] == '1') {
+                    div = `<div class="white" style="font-size: 0.8rem;">未生产</div>`;
+                    list[4] = div;
+                  }
+                  if (item[i] == '2') {
+                    div = `<div class="white" style="font-size: 0.8rem;">已生产</div>`;
+                    list[4] = div;
+                  }
+                  if (item[i] == '3') {
+                    div = `<div class="yellow" style="font-size: 0.8rem;">已完成</div>`;
+                    list[4] = div;
+                  }
+                }
+                if (i === 'deliveryStatus') {
+                  //1未交付2提前3按时4延期
+                  if (item[i] == '1') {
+                    div = `<div class="white" style="font-size: 0.8rem;">未交付</div>`;
+                    list[5] = div;
+                  }
+                  if (item[i] == '2') {
+                    div = `<div class="green" style="font-size: 0.8rem;">提前</div>`;
+                    list[5] = div;
+                  }
+                  if (item[i] == '3') {
+                    div = `<div class="yellow" style="font-size: 0.8rem;">按时</div>`;
+                    list[5] = div;
+                  }
+                  if (item[i] == '4') {
+                    div = `<div class="red"  style="font-size: 0.8rem;">延期</div>`;
+                    list[5] = div;
+                  }
+                  // 合同台账  hasGeneratedOrder 0 是否生成过订单 0未 1已
+                }
+              }
+              return list;
+            }) ?? [],
+          align: ['center', 'center', 'center', 'center', 'center', 'center'],
+          headerBGC: '#031d42',
+          columnWidth: [110, 200],
+          headerHeight: 30,
+          oddRowBGC: '#031d42',
+          evenRowBGC: '#031d42',
+          waitTime: 5000,
+          rowNum: 10
+        };
+      },
+      //实时更新日期
+      updateTime() {
+        let now = new Date();
+        let hours = now.getHours();
+        let minutes = now.getMinutes();
+        let seconds = now.getSeconds();
+        this.time =
+          hours.toString().padStart(2, '0') +
+          ':' +
+          minutes.toString().padStart(2, '0') +
+          ':' +
+          seconds.toString().padStart(2, '0');
+
+        let year = now.getFullYear();
+        let month = now.getMonth() + 1;
+        let day = now.getDate();
+        this.date = year + '年' + month + '月' + day + '日';
+
+        let weekInfo = {
+          1: '一',
+          2: '二',
+          3: '三',
+          4: '四',
+          5: '五',
+          6: '六',
+          0: '日'
+        };
+        this.week = '星期' + weekInfo[now.getDay()];
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .box-container {
+    font-size: 16px;
+    font-family: 'AlibabaPuHuiTi';
+
+    background: #080848;
+    display: flex;
+    flex-direction: column;
+
+    .box-header {
+      background-image: url('@/assets/border2.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      width: 100% !important;
+      height: 10%;
+      justify-content: space-between;
+
+      .title {
+        font-family: '优设标题黑';
+        font-size: 2.75rem;
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        transform: translateY(-10%);
+        letter-spacing: 0.4rem;
+      }
+
+      .logo {
+        display: inline-block;
+        width: 20%;
+      }
+
+      .time {
+        width: 20%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: flex-start;
+        font-size: 0.8rem;
+      }
+    }
+
+    .box-middle {
+      width: 100% !important;
+      height: 10% !important;
+      display: flex;
+      justify-content: center;
+      margin: 5px 0 10px 0;
+
+      .box-middle-content {
+        width: 15%;
+        height: 100%;
+        background-image: url('@/assets/border1.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin: 0px 28px 10px 0px;
+      }
+    }
+
+    .box-footer {
+      flex: 1;
+      display: flex;
+      justify-content: space-around;
+      padding: 0 1% 1%;
+      box-sizing: border-box;
+      .box-footer-left,.box-footer-right,.box-footer-middle {
+        width: 26%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .box-echarts {
+          width: 100%;
+          height: 32%;
+          display: flex;
+          flex-direction: column;
+          // background-image: url('@/assets/border3.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          border: 1px solid #031a64;
+          background-color: #051256;
+          border-radius: 5px;
+          .box-echarts-top {
+            height: 20%;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            /* justify-content: space-around; */
+            transform: translateX(6%);
+            color: #fff;
+
+            .box-top-name {
+              display: inline-block;
+              font-size: 1.3rem;
+              font-weight: bold;
+              color: rgb(50, 197, 225);
+            }
+
+            .box-top-unit {
+              display: inline-block;
+              font-size: 0.75rem;
+              transform: translate(0px, 20%);
+              letter-spacing: 1px;
+              font-weight: bold;
+            }
+          }
+
+          .monthly_volume {
+            flex: 1;
+            .monthly_volume_c {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .box-count {
+            width: 94%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            .box-count-content {
+              height: 46%;
+              display: flex;
+              justify-content: space-around;
+              background-color:#0F1D5B;
+              border-radius: 5px;
+              color: #fff;
+              .box-content {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                width: 30%;
+                height: 100%;
+                .box-top {
+                  height: 50%;
+                  display: flex;
+                  align-items: center;
+                }
+                .box-footer {
+                  height: 50%;
+                  display: flex;
+                  align-items: center;
+                  font-size: 0.8rem;
+                }
+              }
+              .box-content-type {
+                .box-footer {
+                  font-size: 1rem;
+                }
+              }
+            }
+          }
+        }
+        .box-echarts-count {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .box-footer-middle {
+        width: 46%;
+        height: 100%;
+        // background-image: url('@/assets/border4.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        .box-middle-header {
+          height: 66%;
+          width: 100%;
+          background-color: #051256;
+          border: 1px solid #031a64;
+          border-radius: 5px;
+        }
+        .box-middle-footer {
+          width: 100%;
+          height: 32%;
+          background-color: #051256;
+          border: 1px solid #031a64;
+          border-radius: 5px;
+        }
+        .box-echarts-top {
+          height: 10.5%;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          // justify-content: center;
+          transform: translateX(8%);
+          color: #fff;
+          font-size: 1.1rem;
+          letter-spacing: 2px;
+
+          .box-top-name {
+            display: inline-block;
+            font-size: 1.3rem;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
+  [v-cloak] {
+    display: none;
+  }
+</style>
+<style>
+  .white {
+    color: #ffffff;
+  }
+
+  .yellow {
+    color: #ffd16c;
+  }
+
+  .green {
+    color: green;
+  }
+
+  .red {
+    color: red;
+  }
+</style>

src/views/bpm/vis-page/trayManagement.vue

@@ -0,0 +1,562 @@
+<template>
+  <vue-fullscreen
+    class="box-container"
+    v-model="isFullscreen"
+    fullscreenClass="box-container"
+    :exit-on-click-wrapper="false"
+    v-cloak
+  >
+    <div class="box-container">
+      <div class="box-header">
+        <div class="logo">
+          <!--          <img style="width: 20% ;height: 100%;transform: translate(51%,15%)" src="../../../assets/TGLOGO.png" alt="">-->
+        </div>
+        <div class="title"> 托盘管理运行驾驶舱 </div>
+        <div class="time">
+          <span
+            style="color: #7fa7ce; margin: 5px 10px 15px 0; cursor: pointer"
+            @click.passive="onFullscreen"
+          >
+            <i
+              v-if="isFullscreen"
+              title="取消全屏"
+              class="el-icon-_screen-restore"
+            ></i>
+            <i v-else title="全屏" class="el-icon-_screen-full"></i>
+          </span>
+          <div style="margin-right: 10px">
+            <span style="color: #7fa7ce">{{ date }}</span>
+            <span style="color: rgb(210 215 221); padding: 0 5px">{{
+              time
+            }}</span>
+            <span style="color: #7fa7ce">{{ week }} </span>
+          </div>
+        </div>
+      </div>
+        <div class="box-container-footer" >
+          <div class="box-container-title" >
+            托盘实时情况
+          </div>
+          <div class="box-middle">
+            <template v-for="item in borderData">
+              <div class="box-middle-content">
+                <div class="box-content">
+                  <div class="box-top">
+                    <span class="box-top-name">{{ item.titleName }}</span>
+                    <span class="box-top-unit">{{ item.titleUnit }}</span>
+                  </div>
+                  <div class="box-footer">
+                    <span class="box-footer-value">{{ item.value }}</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="box-footer">
+            <div class="box-footer-col">
+              <div class="box-echarts-top">
+                <span class="box-top-name">项目名称</span>
+              </div>
+              <dv-scroll-board
+                :config="config"
+                style="width: 90%; height: 87%; transform: translate(5%, 1%)"
+              />
+            </div>
+            <div class="box-footer-col">
+              <div class="box-echarts-top">
+                <span class="box-top-name">托盘发货数量</span>
+              </div>
+              <dv-scroll-board
+                :config="config"
+                style="width: 90%; height: 87%; transform: translate(5%, 1%)"
+              />
+            </div>
+            <div class="box-footer-col">
+              <div class="box-echarts-top">
+                <span class="box-top-name">托盘回收数量</span>
+              </div>
+              <dv-scroll-board
+                :config="config"
+                style="width: 90%; height: 87%; transform: translate(5%, 1%)"
+              />
+            </div>
+            <div class="box-footer-col">
+              <div class="box-echarts-top">
+                <span class="box-top-name">托盘未回数量</span>
+              </div>
+              <dv-scroll-board
+                :config="config"
+                style="width: 90%; height: 87%; transform: translate(5%, 1%)"
+              />
+            </div>
+          </div>
+        </div>
+    </div>
+  </vue-fullscreen>
+</template>
+
+<script>
+import dvBorderContent from './dv-border-content.vue';
+import * as echarts from 'echarts';
+import { component } from 'vue-fullscreen';
+import {
+  } from '@/api/bpm/visPage';
+export default {
+  name: 'index6',
+  components: {
+    dvBorderContent,
+    VueFullscreen: component
+  },
+  computed: {
+    contentWidth() {
+      return this.$store.state.theme.contentWidth;
+    }
+  },
+  watch: {
+    isFullscreen: {
+      handler() {
+        this.isFlag = false;
+        this.$nextTick(() => {
+          let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
+            document.documentElement;
+          let eleAdminHeaderHeight =
+            (!this.isFullscreen &&
+              document.getElementsByClassName('ele-admin-header')[0]
+                ?.offsetHeight) ||
+            0;
+          let eleAdminSidebarWidth =
+            (!this.isFullscreen &&
+              document.getElementsByClassName('ele-admin-sidebar')[0]
+                ?.offsetWidth) ||
+            0;
+          let eleAdminTabsWidth =
+            (!this.isFullscreen &&
+              document.getElementsByClassName('ele-admin-tabs')[0]
+                ?.offsetHeight) ||
+            0;
+
+          const setContainerSize = (item) => {
+            item.style.height =
+              deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
+            item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
+          };
+          let boxContainer = [
+            ...document.getElementsByClassName('box-container')
+          ];
+          boxContainer.forEach(setContainerSize);
+
+          document.documentElement.style.fontSize = this.isFullscreen
+            ? '24px'
+            : '16px';
+          this.isFlag = true;
+
+          this.$nextTick(() => {
+          });
+        });
+      },
+      immediate: true
+    },
+    contentWidth: {
+      handler() {
+        this.isFlag = false;
+        this.$nextTick(() => {
+          let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
+            document.documentElement;
+          let eleAdminHeaderHeight =
+            (!this.isFullscreen &&
+              document.getElementsByClassName('ele-admin-header')[0]
+                ?.offsetHeight) ||
+            0;
+          let eleAdminSidebarWidth =
+            (!this.isFullscreen &&
+              document.getElementsByClassName('ele-admin-sidebar')[0]
+                ?.offsetWidth) ||
+            0;
+          let eleAdminTabsWidth =
+            (!this.isFullscreen &&
+              document.getElementsByClassName('ele-admin-tabs')[0]
+                ?.offsetHeight) ||
+            0;
+          const setContainerSize = (item) => {
+            item.style.height =
+              deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
+            item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
+          };
+          let boxContainer = [
+            ...document.getElementsByClassName('box-container')
+          ];
+          boxContainer.forEach(setContainerSize);
+          document.documentElement.style.fontSize = this.isFullscreen
+            ? '24px'
+            : '16px';
+          this.isFlag = true;
+          this.$nextTick(() => {
+          });
+        });
+      },
+      immediate: true
+    }
+  },
+  deactivated() {
+    clearInterval(this.updateTimer);
+  },
+  data() {
+    return {
+      isFullscreen: false, // 是否是全屏
+      isFlag: false, // 是否展示图表
+      date: '',
+      time: '',
+      week: '',
+      signedTotal: 0,
+      deliveryTotal: 0,
+      salesTotal: 0,
+      WeightGainTotal: 0,
+      WeightStorageTotal: 0,
+      salesChart: null,
+      outputChart: null,
+      borderData: [
+        {
+          titleName: '托盘发货数量',
+          value: '0',
+        },
+        {
+          titleName: '托盘回收数量',
+          value: '0',
+        },
+        {
+          titleName: '托盘未回数量',
+          value: '0',
+        },
+        {
+          titleName: '托盘闲置数量',
+          value: '0',
+        },
+        {
+          titleName: '托盘使用数量',
+          value: '0',
+        }
+      ],
+      config: {
+        header: [],
+        data: [
+                ['行1列1', '行1列2', ],
+                ['行2列1', '行2列2',],
+                ['行3列1', '行3列2',],
+                ['行4列1', '行4列2',],
+                ['行5列1', '行5列2',],
+                ['行6列1', '行6列2',],
+                ['行7列1', '行7列2',],
+                ['行8列1', '行8列2',],
+                ['行9列1', '行9列2',],
+                ['行10列1', '行10列2',],
+                ['行1列1', '行1列2', ],
+                ['行2列1', '行2列2',],
+                ['行3列1', '行3列2',],
+                ['行4列1', '行4列2',],
+                ['行5列1', '行5列2',],
+                ['行6列1', '行6列2',],
+                ['行7列1', '行7列2',],
+                ['行8列1', '行8列2',],
+                ['行9列1', '行9列2',],
+                ['行10列1', '行10列2',]
+              ],
+        align: ['center', 'center'],
+        headerBGC: '#031d42',
+        oddRowBGC: '#031d42',
+        evenRowBGC: '#031d42',
+        waitTime: 5000,
+        rowNum: 10
+      },
+    };
+  },
+  created() {
+    window.isFullscreen = false
+    this.updateTimer = setInterval(this.updateTime, 1000);
+  },
+  mounted() {
+
+  },
+  methods: {
+   
+    /* 全屏切换 */
+    onFullscreen() {
+      this.isFullscreen = !this.isFullscreen;
+    },
+
+    //实时更新日期
+    updateTime() {
+      let now = new Date();
+      let hours = now.getHours();
+      let minutes = now.getMinutes();
+      let seconds = now.getSeconds();
+      this.time =
+        hours.toString().padStart(2, '0') +
+        ':' +
+        minutes.toString().padStart(2, '0') +
+        ':' +
+        seconds.toString().padStart(2, '0');
+
+      let year = now.getFullYear();
+      let month = now.getMonth() + 1;
+      let day = now.getDate();
+      this.date = year + '年' + month + '月' + day + '日';
+
+      let weekInfo = {
+        1: '一',
+        2: '二',
+        3: '三',
+        4: '四',
+        5: '五',
+        6: '六',
+        0: '日'
+      };
+      this.week = '星期' + weekInfo[now.getDay()];
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.box-container {
+  font-size: 16px;
+  font-family: 'AlibabaPuHuiTi';
+
+  background: #080848;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .box-container-footer {
+    width: 98%;
+    height: 100%;
+    border: 1px solid #041355;
+    border-radius: 5px;
+    background-color: #051256;
+    .box-container-title {
+      width: 100%;
+      height: 5%;
+      background-color: #012b83;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      color: #32c5e1;
+      font-size: 1.4rem;
+      font-weight: bold;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+  }
+  .box-header {
+    background-image: url('@/assets/border2.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    width: 100% !important;
+    height: 10%;
+    justify-content: space-between;
+    .title {
+      font-family: '优设标题黑';
+      font-size: 2.75rem;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      transform: translateY(-10%);
+      letter-spacing: 0.4rem;
+    }
+
+    .logo {
+      display: inline-block;
+      width: 20%;
+    }
+
+    .time {
+      width: 20%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: flex-start;
+      font-size: 0.8rem;
+    }
+  }
+
+  .box-middle {
+    // width: 100% !important;
+    height: 10% !important;
+    display: flex;
+    justify-content: space-between;
+    margin: 5px 0 40px 0;
+    padding: 0 10px 0 10px;
+    .box-middle-content {
+      width: 15%;
+      height: 100%;
+      background-color: #031a64;
+      // background-image: url('@/assets/border1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin-top: 10px;
+      border: 1px solid #043472;
+      border-radius: 4px;
+      padding-top: 10px;
+    }
+    .box-content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      color: #ffffff;
+
+      .box-top {
+        width: 100%;
+        height: 17%;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        .box-top-name {
+          display: inline-block;
+          font-size: 0.8rem;
+          letter-spacing: 2px;
+          font-weight: bold;
+          color: rgb(50, 197, 225);
+        }
+
+        .box-top-unit {
+          display: inline-block;
+          font-size: 0.55rem;
+          transform: translate(0px, -30%);
+          letter-spacing: 1px;
+          font-weight: bold;
+        }
+      }
+
+      .box-footer {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .box-footer-value {
+          font-family: 'LCD2B';
+          display: inline-block;
+          font-size: 2rem;
+        }
+      }
+    }
+  }
+
+  .box-footer {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px 0 10px;
+    height: 78%;
+    .box-footer-left {
+      width: 50%;
+      height: 100%;
+      .box-echarts {
+        width: 100%;
+        height: 50%;
+        display: flex;
+        flex-direction: column;
+        background-image: url('@/assets/border3.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+
+        .box-echarts-top {
+          height: 20%;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          // justify-content: center;
+          color: #fff;
+
+          .box-top-name {
+            display: inline-block;
+            font-size: 1.3rem;
+            font-weight: bold;
+            color: rgb(50, 197, 225);
+          }
+
+          .box-top-unit {
+            display: inline-block;
+            font-size: 0.75rem;
+            transform: translate(0px, 20%);
+            letter-spacing: 1px;
+            font-weight: bold;
+          }
+        }
+
+        .monthly_sales_volume {
+          transform: translateX(-7%);
+          flex: 1;
+          //width: 100%;
+          //height: 100%;
+          #monthly_sales_volume {
+            width: 113%;
+            height: 100%;
+          }
+        }
+
+        .monthly_output {
+          transform: translateX(-7%);
+          flex: 1;
+
+          #monthly_output {
+            width: 113%;
+            height: 100%;
+            //width: 100%;
+            //height: 100%;
+          }
+        }
+      }
+    }
+
+    .box-footer-col {
+      width: 24%;
+      height: 100%;
+      // background-image: url('@/assets/border4.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-color: #031a64;
+
+      .box-echarts-top {
+        height: 10.5%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 1.1rem;
+        letter-spacing: 2px;
+        background-color: #002B82;
+        .box-top-name {
+          display: inline-block;
+          font-size: 1.3rem;
+          font-weight: bold;
+          color: rgb(50, 197, 225);
+        }
+      }
+    }
+  }
+}
+
+[v-cloak] {
+  display: none;
+}
+</style>
+<style>
+.white {
+  color: #ffffff;
+}
+
+.yellow {
+  color: #ffd16c;
+}
+
+.green {
+  color: green;
+}
+
+.red {
+  color: red;
+}
+</style>