提交

src/api/bst/dashboard.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取首页数据
+export function getBrief() {
+    return request({
+        url: '/dashboard/brief',
+        method: 'get'
+    })
+}

src/views/bst/order/components/OrderFlowList.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="order-flow" v-loading="loading">
+    <el-row :gutter="20" v-if="!isEmpty(list)">
+      <el-col :span="6" v-for="order in list" :key="order.id">
+        <el-card class="order-card" shadow="hover">
+          <!-- 主图区域 -->
+          <div class="order-main-image">
+            <image-preview :src="order.picture" :width="200" :height="200" />
+          </div>
+
+          <!-- 订单信息区域 -->
+          <div class="order-info">
+            <div class="info-row">
+              <span class="label">订单号:</span>
+              <span class="value">{{ order.orderNo }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">客户名称:</span>
+              <span class="value">{{ order.customer }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">数量:</span>
+              <span class="value">{{ order.num }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">装量:</span>
+              <span class="value">{{ order.reportNum }}/{{ order.num }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">特殊要求:</span>
+              <span class="value">{{ order.remark }}</span>
+            </div>
+          </div>
+
+          <!-- 子产品列表 -->
+          <div class="sub-products">
+            <div
+              class="sub-product"
+              v-for="(prod, index) in order.orderProdList"
+              :key="index"
+            >
+              <el-checkbox :value="prod.source === 1" disabled
+                >子产品{{ index + 1 }}</el-checkbox
+              >
+              <div class="prod-progress">
+                <el-progress
+                  :percentage="prod.progress || 0"
+                  :color="ProgressColors"
+                  :format="ProgressFormat"
+                />
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-empty v-else description="暂无进行中的订单" />
+  </div>
+</template>
+
+<script>
+import { ProgressColors, ProgressFormat } from '@/utils/constants'
+import { listOrder } from '@/api/bst/order'
+import { OrderStatus } from '@/utils/enums'
+import { isEmpty } from '@/utils/index'
+
+export default {
+  name: 'OrderFlowList',
+  props: {
+  },
+  data() {
+    return {
+      ProgressColors,
+      list: [],
+      queryParams: {
+        pageSize: 10,
+        pageNum: 1,
+        status: OrderStatus.RELEASED,
+      },
+      loading: false,
+      total: 0,
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    ProgressFormat,
+    isEmpty,
+    getList() {
+      this.loading = true;
+      listOrder(this.queryParams).then(res => {
+        this.list = res.rows;
+        this.total = res.total;
+      }).finally(() => {
+        this.loading = false;
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.order-flow {
+  .order-card {
+    margin-bottom: 20px;
+
+    .order-main-image {
+      text-align: center;
+      margin-bottom: 15px;
+    }
+
+    .order-info {
+      .info-row {
+        margin-bottom: 8px;
+        display: flex;
+
+        .label {
+          color: #606266;
+          width: 70px;
+        }
+
+        .value {
+          flex: 1;
+          color: #303133;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .sub-products {
+      margin-top: 15px;
+
+      .sub-product {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .prod-progress {
+          flex: 1;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/bst/prodProcess/components/ProdProcessDetail.vue

@@ -6,44 +6,14 @@
     :with-header="false"
   >
     <div class="process-detail" v-loading="loading">
-      <!-- 顶部信息区 -->
+      <!-- 操作按钮区 -->
-      <div class="section header-section">
+      <div class="action-area">
-        <div class="order-info">
+        <el-button type="primary" @click="handleStore">上报库存</el-button>
-          <div class="order-title">
-            <order-link :id="detail.orderId" :name="detail.orderNo" />
-            <dict-tag
-              :value="detail.orderStatus"
-              :options="dict.type.order_status"
-            />
       </div>
-          <div class="product-name">{{ detail.orderProdName }}</div>
-        </div>
-        <div class="images-area">
-          <div class="image-wrapper">
-            <image-preview
-              :src="detail.orderPicture"
-              :width="70"
-              :height="70"
-              class="image-item"
-            />
-            <div class="image-label">订单图片</div>
-          </div>
-          <div class="image-wrapper">
-            <image-preview
-              :src="detail.orderProdPicture"
-              :width="70"
-              :height="70"
-              class="image-item"
-            />
-            <div class="image-label">产品图片</div>
-          </div>
-        </div>
-      </div>
-
       <!-- 工序进度区 -->
       <div class="section process-section">
         <div class="progress-title">
-          <span class="dept-name">{{ detail.deptName }}</span>
+          <span class="dept-name">{{ detail.deptName | dv}}</span>
           <el-tag type="success" v-if="detail.isEnd">最终工序</el-tag>
         </div>
         <el-progress
@@ -68,35 +38,41 @@
         </div>
       </div>
 
-      <!-- 工艺参数区 -->
+      <div class="group-title">订单信息</div>
-      <div class="section params-section">
+      <div class="header-box">
-        <div class="param-item" v-if="detail.handleWay">
+        <image-preview :src="detail.orderPicture" :width="100" :height="100" style="margin-right: 16px"/>
-          <div class="param-label">处理方式</div>
+        <el-descriptions style="flex: 1" :column="1">
-          <div class="param-value">{{detail.handleWay}}</div>
+          <el-descriptions-item label="订单编号">{{ detail.orderNo | dv}}</el-descriptions-item>
+          <el-descriptions-item label="订单状态">
+              <dict-tag :value="detail.orderStatus" :options="dict.type.order_status" size="mini"/>
+          </el-descriptions-item>
+          <el-descriptions-item label="客户">{{ detail.orderCustomer | dv}}</el-descriptions-item>
+          <el-descriptions-item label="订单日期">{{ detail.orderDate | dv}}</el-descriptions-item>
+          <el-descriptions-item label="交货日期">{{ detail.orderDeliveryDate | dv}}</el-descriptions-item>
+          <el-descriptions-item label="用料">{{ detail.orderMaterial | dv}}</el-descriptions-item>
+          <el-descriptions-item label="特殊要求">{{ detail.orderRemark | dv}}</el-descriptions-item>
+          <el-descriptions-item label="创建人">{{ detail.orderCreateBy | dv}}</el-descriptions-item>
+          <el-descriptions-item label="创建时间">{{ detail.orderCreateTime | dv}}</el-descriptions-item>
+        </el-descriptions>
       </div>
-        <div class="param-item" v-if="detail.effect">
+
-          <div class="param-label">效果</div>
+      <div class="group-title">产品信息</div>
-          <div class="param-value">{{detail.effect}}</div>
+      <div class="header-box">
-        </div>
+        <image-preview :src="detail.orderProdPicture" :width="100" :height="100" style="margin-right: 16px"/>
-        <div class="param-item" v-if="detail.color">
+        <el-descriptions style="flex: 1" :column="1">
-          <div class="param-label">颜色</div>
+          <el-descriptions-item label="产品名称">{{ detail.orderProdName | dv}}</el-descriptions-item>
-          <div class="param-value">{{detail.color}}</div>
+          <el-descriptions-item label="产品规格">{{ detail.orderProdSpec | dv}}</el-descriptions-item>
-        </div>
+          <el-descriptions-item label="物料编码">{{ detail.orderProdMaterialNo | dv}}</el-descriptions-item>
-        <div class="param-item" v-if="detail.coverColor">
+          <el-descriptions-item label="处理方式">{{ detail.handleWay | dv}}</el-descriptions-item>
-          <div class="param-label">盖子颜色</div>
+          <el-descriptions-item label="效果">{{ detail.effect | dv}}</el-descriptions-item>
-          <div class="param-value">{{detail.coverColor}}</div>
+          <el-descriptions-item label="颜色">{{ detail.color | dv}}</el-descriptions-item>
-        </div>
+          <el-descriptions-item label="盖子颜色">{{ detail.coverColor | dv}}</el-descriptions-item>
-        <div class="param-item" v-if="detail.remark">
+        </el-descriptions>
-          <div class="param-label">备注</div>
-          <div class="param-value">{{detail.remark}}</div>
       </div>
     </div>
 
-      <!-- 操作按钮区 -->
+    <store-edit-dialog :show.sync="showStoreEdit" :process-id="detail.id" @success="getDetail"/>
-      <div class="action-area">
+
-        <el-button type="primary">上报库存</el-button>
-      </div>
-    </div>
   </el-drawer>
 </template>
 
@@ -105,12 +81,14 @@ import { ProgressColors, ProgressFormat } from '@/utils/constants'
 import OrderLink from '@/components/Business/Order/OrderLink'
 import BooleanTag from '@/components/BooleanTag'
 import { getProdProcess } from '@/api/bst/prodProcess'
+import StoreEditDialog from '@/views/bst/store/components/StoreEditDialog.vue'
 
 export default {
   name: 'ProdProcessDetail',
   components: {
     OrderLink,
-    BooleanTag
+    BooleanTag,
+    StoreEditDialog
   },
   dicts: ['order_status'],
   props: {
@@ -125,6 +103,7 @@ export default {
   },
   data() {
     return {
+      showStoreEdit: false,
       ProgressColors,
       detail: {},
       loading: false,
@@ -142,6 +121,9 @@ export default {
   },
   methods: {
     ProgressFormat,
+    handleStore() {
+      this.showStoreEdit = true;
+    },
     onOpen() {
         this.getDetail();
     },
@@ -161,6 +143,18 @@ export default {
 .process-detail {
   padding: 16px;
   background: #fff;
+  .group-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 16px;
+    border-left: 4px solid #409eff;
+    padding-left: 8px;
+  }
+  .header-box {
+    display: flex;
+    justify-content: space-between;
+  }
 
   .section {
     background: #fff;
@@ -279,28 +273,9 @@ export default {
   }
 
   .action-area {
-    padding: 16px 0;
+    padding: 8px 0;
-    border-top: 1px solid #ebeef5;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
-    gap: 16px;
-  }
-}
-
-// 移动端适配
-@media screen and (max-width: 768px) {
-  .process-detail {
-    padding: 12px;
-
-    .section {
-      padding: 12px;
-    }
-
-    .header-section {
-      .images-area {
-        gap: 12px;
-      }
-    }
   }
 }
 </style>

src/views/bst/prodProcess/index.vue

@@ -154,14 +154,14 @@
       </template>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="!isCustomData">
         <template slot-scope="scope">
-          <el-button
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-plus"
             @click="handleStore(scope.row)"
             v-has-permi="['bst:store:add']"
             v-show="OrderStatus.canAddStore().includes(scope.row.orderStatus)"
-          >上报入库</el-button>
+          >上报入库</el-button> -->
          <el-button
             size="mini"
             type="text"
@@ -181,8 +181,6 @@
       @pagination="getList"
     />
 
-    <store-edit-dialog :show.sync="showStoreEdit" :process-id="row.id" @success="getList"/>
-
     <prod-process-detail :id="row.id" :show.sync="showDetail" />
   </div>
 </template>
@@ -198,7 +196,6 @@ import {
 import { $showColumns } from '@/utils/mixins'
 import FormCol from '@/components/FormCol/index.vue'
 import BooleanTag from '@/components/BooleanTag/index.vue'
-import StoreEditDialog from '@/views/bst/store/components/StoreEditDialog.vue'
 import DeptTreeSelect from '@/components/Business/Dept/DeptTreeSelect.vue'
 import { ProgressColors, ProgressFormat } from '@/utils/constants'
 import OrderLink from '@/components/Business/Order/OrderLink.vue'
@@ -215,7 +212,7 @@ export default {
   name: "ProdProcess",
   dicts: ['order_status'],
   mixins: [$showColumns],
-  components: { OrderLink, DeptTreeSelect, StoreEditDialog, BooleanTag, FormCol, ProdProcessDetail},
+  components: { OrderLink, DeptTreeSelect, BooleanTag, FormCol, ProdProcessDetail},
   props: {
     // 自定义数据
     customData: {

src/views/bst/store/components/StoreEditDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible.sync="visible" width="500px" :title="title" @open="onOpen">
+  <el-dialog :visible.sync="visible" width="500px" :title="title" @open="onOpen" append-to-body>
     <el-form :model="form" :rules="rules" ref="form" label-width="80px">
       <el-row>
         <form-col :span="span" label="工序" prop="processId">

src/views/dashboard/PanelGroup.vue

@@ -1,54 +1,41 @@
 <template>
-  <el-row :gutter="40" class="panel-group">
+  <el-row :gutter="40" class="panel-group" v-loading="loading">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+    <el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+      <div class="card-panel panel-orange">
-        <div class="card-panel-icon-wrapper icon-people">
+        <div class="card-panel-icon-wrapper icon-orange">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+          <svg-icon icon-class="chart" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            访客
+            本月订单
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="data.monthOrderCount" :duration="2600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+    <el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
+      <div class="card-panel panel-green">
         <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
+          <svg-icon icon-class="form" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            消息
+            订单总数
           </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="data.totalOrderCount" :duration="3000" class="card-panel-num" />
         </div>
       </div>
     </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+    <el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+      <div class="card-panel panel-blue">
-        <div class="card-panel-icon-wrapper icon-money">
+        <div class="card-panel-icon-wrapper icon-blue">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
+          <svg-icon icon-class="time" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            金额
+            待完成订单
           </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="data.releasedOrderCount" :duration="3200" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            订单
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
@@ -57,14 +44,29 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import {getBrief} from "@/api/bst/dashboard";
 
 export default {
+  data() {
+    return {
+      loading: false,
+      data: {}
+    }
+  },
   components: {
     CountTo
   },
+  created() {
+    this.getData()
+  },
   methods: {
-    handleSetLineChartData(type) {
+    getData() {
-      this.$emit('handleSetLineChartData', type)
+      this.loading = true;
+      getBrief().then(res => {
+        this.data = res.data;
+      }).finally(() => {
+        this.loading = false;
+      })
     }
   }
 }
@@ -75,7 +77,7 @@ export default {
   margin-top: 18px;
 
   .card-panel-col {
-    margin-bottom: 32px;
+    margin-bottom: 12px;
   }
 
   .card-panel {
@@ -85,8 +87,6 @@ export default {
     position: relative;
     overflow: hidden;
     color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
 
     &:hover {
@@ -94,37 +94,37 @@ export default {
         color: #fff;
       }
 
-      .icon-people {
+      .icon-orange {
-        background: #40c9c6;
+        background: #ffd234;
       }
 
       .icon-message {
-        background: #36a3f7;
+        background: #86DF6C;
       }
 
-      .icon-money {
+      .icon-blue {
-        background: #f4516c;
+        background: #84b3ef;
       }
 
-      .icon-shopping {
+      .icon-red {
-        background: #34bfa3
+        background: #ef8484
       }
     }
 
-    .icon-people {
+    .icon-orange {
-      color: #40c9c6;
+      color: #ffd234;
     }
 
     .icon-message {
-      color: #36a3f7;
+      color: #86DF6C;
     }
 
-    .icon-money {
+    .icon-blue {
-      color: #f4516c;
+      color: #84b3ef;
     }
 
-    .icon-shopping {
+    .icon-red {
-      color: #34bfa3
+      color: #ef8484
     }
 
     .card-panel-icon-wrapper {
@@ -141,10 +141,10 @@ export default {
     }
 
     .card-panel-description {
-      float: right;
+      float: left;
       font-weight: bold;
       margin: 26px;
-      margin-left: 0px;
+      margin-right: 0;
 
       .card-panel-text {
         line-height: 18px;
@@ -161,21 +161,25 @@ export default {
 }
 
 @media (max-width:550px) {
-  .card-panel-description {
-    display: none;
-  }
 
   .card-panel-icon-wrapper {
-    float: none !important;
+    display: none;
-    width: 100%;
+  }
-    height: 100%;
+}
-    margin: 0 !important;
 
-    .svg-icon {
+.panel-blue {
-      display: block;
+  background: linear-gradient( 180deg, #F2F9FE 0%, #E6F4FE 100%);
-      margin: 14px auto !important;
-      float: none !important;
 }
+.panel-orange {
+  background: linear-gradient( 180deg, #fefaf2 0%, #fef2e6 100%);
 }
+.panel-green {
+  background: linear-gradient( 180deg, #F5FEF2 0%, #E6FEEE 100%);
+}
+.panel-purple {
+  background: linear-gradient( 180deg, #F6F7FF 0%, #ECECFF 100%);
+}
+.panel-red {
+  background: linear-gradient( 180deg, #fff6f6 0%, #ffecec 100%);
 }
 </style>

src/views/index.vue

@@ -1,87 +1,33 @@
 <template>
-  <div class="app-container home">
+  <div class="dashboard-editor-container">
-    <h3>欢迎使用伟旺生产管理系统!</h3>
+
+    <panel-group />
+
+    <div class="order-flow-title">进行中的订单</div>
+    <order-flow-list />
+    
   </div>
 </template>
 
 <script>
+import PanelGroup from './dashboard/PanelGroup'
+import OrderFlowList from './bst/order/components/OrderFlowList'
+
 export default {
-  name: "Index",
+  name: 'Index',
+  components: {
+    PanelGroup,
+    OrderFlowList
+  },
   data() {
     return {
-      // 版本号
+    }
-      version: "3.8.8"
-    };
   },
-  methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
 }
-  }
-};
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
-.home {
+.dashboard-editor-container {
-  blockquote {
+  padding: 32px;
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  ul {
-    list-style-type: none;
-  }
-
-  h4 {
-    margin-top: 0px;
-  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
-    }
-  }
-
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
-    }
-  }
 }
 </style>
-

src/views/index_v1.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="dashboard-editor-container">
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    
-  </div>
-</template>
-
-<script>
-import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
-export default {
-  name: 'Index',
-  components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart
-  },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>