托盘

src/api/vis/index.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+//托盘统计
+export async function trayGroupVO() {
+  const res = await request.get(`/eom/saleorder/getTrayGroupQuery`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

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

@@ -33,530 +33,514 @@
           </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 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>
-            </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%)"
-              />
+          </template>
+        </div>
+        <div class="box-footer">
+          <div class="box-footer-col">
+            <div class="box-echarts-top">
+              <span class="box-top-name">项目名称</span>
             </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%)"
-              />
+            <dv-scroll-board
+              :config="{...config,data:config.data.map(item=>[item.projectName])}"
+              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>
-            <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%)"
-              />
+            <dv-scroll-board
+            :config="{...config,data:config.data.map(item=>[item.sendTotalCount])}"
+              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,data:config.data.map(item=>[item.receiveTotalCount])}"
+              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,data:config.data.map(item=>[item.noReceiveTotalCount])}"
+              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;
+  import dvBorderContent from './dv-border-content.vue';
+  import * as echarts from 'echarts';
+  import { component } from 'vue-fullscreen';
+  import { trayGroupVO } from '@/api/vis/index';
+  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);
+            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;
+            document.documentElement.style.fontSize = this.isFullscreen
+              ? '24px'
+              : '16px';
+            this.isFlag = true;
 
-          this.$nextTick(() => {
+            this.$nextTick(() => {});
           });
-        });
+        },
+        immediate: true
       },
-      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;
+      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',
+        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',
+            key: 'sendTotalCount'
+          },
+          {
+            titleName: '托盘回收数量',
+            value: '0',
+            key: 'receiveTotalCount'
+          },
+          {
+            titleName: '托盘未回数量',
+            value: '0',
+            key: 'noReceiveTotalCount'
+          },
+          {
+            titleName: '托盘闲置数量',
+            value: '0',
+            key: 'idleTotalCount'
+          },
+          {
+            titleName: '托盘使用数量',
+            value: '0',
+            key: 'useTotalCount'
+          }
+        ],
+        config: {
+          header: [],
+          data: [],
+          align: ['center', 'center'],
+          headerBGC: '#031d42',
+          oddRowBGC: '#031d42',
+          evenRowBGC: '#031d42',
+          waitTime: 5000,
+          rowNum: 10
         }
-      ],
-      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() {
+      };
+    },
+    created() {
+      window.isFullscreen = false;
+      this.updateTimer = setInterval(this.updateTime, 1000);
 
-  },
-  methods: {
-   
-    /* 全屏切换 */
-    onFullscreen() {
-      this.isFullscreen = !this.isFullscreen;
+      trayGroupVO().then((res) => {
+        this.borderData.forEach((item,index)=>{
+          this.$set(this.borderData[index],'value',res[this.borderData[index].key])
+        })
+        this.config.data=res.trayProjectListGroup
+ 
+      });
     },
+    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');
+      //实时更新日期
+      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 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()];
+        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-container {
+    font-size: 16px;
+    font-family: 'AlibabaPuHuiTi';
 
-  .box-middle {
-    // width: 100% !important;
-    height: 10% !important;
+    background: #080848;
     display: flex;
-    justify-content: space-between;
-    margin: 5px 0 40px 0;
-    padding: 0 10px 0 10px;
-    .box-middle-content {
-      width: 15%;
+    flex-direction: column;
+    align-items: center;
+    .box-container-footer {
+      width: 98%;
       height: 100%;
-      background-color: #031a64;
-      // background-image: url('@/assets/border1.png');
+      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%;
-      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%;
+      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: flex-end;
-        .box-top-name {
-          display: inline-block;
-          font-size: 0.8rem;
-          letter-spacing: 2px;
-          font-weight: bold;
-          color: rgb(50, 197, 225);
-        }
+        align-items: center;
+        color: #fff;
+        transform: translateY(-10%);
+        letter-spacing: 0.4rem;
+      }
 
-        .box-top-unit {
-          display: inline-block;
-          font-size: 0.55rem;
-          transform: translate(0px, -30%);
-          letter-spacing: 1px;
-          font-weight: bold;
-        }
+      .logo {
+        display: inline-block;
+        width: 20%;
       }
 
-      .box-footer {
-        flex: 1;
+      .time {
+        width: 20%;
         display: flex;
-        justify-content: center;
         align-items: center;
-        .box-footer-value {
-          font-family: 'LCD2B';
-          display: inline-block;
-          font-size: 2rem;
-        }
+        justify-content: space-around;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: flex-start;
+        font-size: 0.8rem;
       }
     }
-  }
 
-  .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 {
+    .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: 50%;
+        height: 100%;
         display: flex;
         flex-direction: column;
-        background-image: url('@/assets/border3.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
+        color: #ffffff;
 
-        .box-echarts-top {
-          height: 20%;
+        .box-top {
           width: 100%;
+          height: 17%;
           display: flex;
-          align-items: center;
-          // justify-content: center;
-          color: #fff;
-
+          justify-content: center;
+          align-items: flex-end;
           .box-top-name {
             display: inline-block;
-            font-size: 1.3rem;
+            font-size: 0.8rem;
+            letter-spacing: 2px;
             font-weight: bold;
             color: rgb(50, 197, 225);
           }
 
           .box-top-unit {
             display: inline-block;
-            font-size: 0.75rem;
-            transform: translate(0px, 20%);
+            font-size: 0.55rem;
+            transform: translate(0px, -30%);
             letter-spacing: 1px;
             font-weight: bold;
           }
         }
 
-        .monthly_sales_volume {
-          transform: translateX(-7%);
+        .box-footer {
           flex: 1;
-          //width: 100%;
-          //height: 100%;
-          #monthly_sales_volume {
-            width: 113%;
-            height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .box-footer-value {
+            font-family: 'LCD2B';
+            display: inline-block;
+            font-size: 2rem;
           }
         }
+      }
+    }
 
-        .monthly_output {
-          transform: translateX(-7%);
-          flex: 1;
+    .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_output {
-            width: 113%;
-            height: 100%;
+          .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-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);
+        .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;
-}
+  [v-cloak] {
+    display: none;
+  }
 </style>
 <style>
-.white {
-  color: #ffffff;
-}
+  .white {
+    color: #ffffff;
+  }
 
-.yellow {
-  color: #ffd16c;
-}
+  .yellow {
+    color: #ffd16c;
+  }
 
-.green {
-  color: green;
-}
+  .green {
+    color: green;
+  }
 
-.red {
-  color: red;
-}
+  .red {
+    color: red;
+  }
 </style>