From f10c84a217b20eda7e9f37c77e4f3fdd28a6405b Mon Sep 17 00:00:00 2001
From: luoshiwen <1140456899@qq.com>
Date: Mon, 10 Apr 2023 18:05:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js           |  16 +-
 src/component/OverView.vue |  66 ++++-
 src/component/Stock.vue    |  36 ++-
 src/views/index.vue        | 513 ++++++++++++++++++++-----------------
 vue.config.js              |  66 ++---
 5 files changed, 405 insertions(+), 292 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index e7df952..70475b4 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -19,41 +19,41 @@ export const byPosition = (params) => {
 }
 // 获取物料和批次
 export const byBatchAndMateri = (params) => {
-    axios.get('api/visualStorage/getVisualStorageListByBatchAndMateri', {
+    return axios.get('api/visualStorage/getVisualStorageListByBatchAndMateriel', {
         params
     })
 }
 
 // 仓库使用率
 export const getWarehouseUsages = (params) => {
-    axios.get('api/visualStorage/getWarehouseUsages', {
+    return axios.get('api/visualStorage/getWarehouseUsages', {
         params
     })
 }
 // 每月的周转率
 export const getTurnoverRate = (params) => {
-    axios.get('api/visualStorage/getTurnoverRateList', {
+    return axios.get('api/visualStorage/getTurnoverRateList', {
         params
     })
 }
 
 // 当月出入库金额
 export const getChangeAmount = (params) => {
-    axios.get('api/visualStorage/getChangeAmount', {
+    return axios.get('api/visualStorage/getChangeAmount', {
         params
     })
 }
 
 // 积压物质
 export const getBacklogMaterialInfo = (params) => {
-    axios.get('api/visualStorage/getBacklogMaterialInfo', {
+    return axios.get('api/visualStorage/getBacklogMaterialInfo', {
         params
     })
 }
 
 // 库龄结构
 export const getInventoryAgeInfo = (params) => {
-    axios.get('api/visualStorage/getInventoryAgeInfo', {
+    return axios.get('api/visualStorage/getInventoryAgeInfo', {
         params
     })
 }
@@ -61,14 +61,14 @@ export const getInventoryAgeInfo = (params) => {
 // 库存构成
 
 export const getStore = (params) => {
-    axios.get('api/visualStorage/getInventoryConstitute', {
+    return axios.get('api/visualStorage/getInventoryConstitute', {
         params
     })
 }
 
 // 库容预测
 export const getMaterialDataList = (params) => {
-    axios.get('api/visualStorage/getMaterialDataList', {
+    return axios.get('api/visualStorage/getMaterialDataList', {
         params
     })
 }
\ No newline at end of file
diff --git a/src/component/OverView.vue b/src/component/OverView.vue
index 3cec8c8..d2eb79a 100644
--- a/src/component/OverView.vue
+++ b/src/component/OverView.vue
@@ -8,7 +8,7 @@
         <!-- 每月周转率 -->
         <div class="monthlyTurnover">
             <div class="title">
-                每日周转率
+                每月周转率
             </div>
             <div class="turnoverChart" ref="turnoverChart">
 
@@ -36,6 +36,7 @@
     </div>
 </template>
 <script>
+import { getWarehouseUsages, getTurnoverRate, getBacklogMaterialInfo } from '@/api/index'
 export default {
     name: '',
     data() {
@@ -44,20 +45,45 @@ export default {
             myChart2: '',//每月周转率echarts
             myChart3: '',//当月出库金额echarts
             myChart4: '',//积压物资
+
+            storeData: {
+
+            },
         }
     },
     mounted() {
+
+
+        this.drawOutbound()
         this.drawStore()
         this.drawTurnoverChart()
-        this.drawOutbound()
         this.drawOverStock()
     },
     computed: {
 
+    },
+    created() {
+        // 仓库的使用率
+        // getWarehouseUsages({wareHouseCode:'HA1'}).then(res=>{
+        //     console.log(res,'仓库使用率');
+        //     this.storeData = res.data.data
+        //     this.drawStore(this.storeData)
+        //     // console.log(this.storeData,'......');
+        // })
+        // getTurnoverRate({wareHouseCode:'HA1'}).then(res=>{
+        //     console.log(res,'每月的周转率');
+        //     this.drawTurnoverChart(res.data.data.rateList)
+        // })
+        //  getBacklogMaterialInfo({wareHouseCode:'HA1'}).then(res=>{
+        //     console.log(res,'积压物资');
+        //     this.drawOverStock(res.data.data)
+        // })
+        // },
+        // 积压物资
     },
     methods: {
         // 仓库使用率的ecahrt图
-        drawStore() {
+        drawStore(storeData) {
             this.storemyChart = this.$echarts.init(this.$refs.storeUse)
             const chartData = [
                 {
@@ -70,6 +96,11 @@ export default {
                 },
 
             ];
+            if (storeData) {
+                chartData[0].value = storeData.usage
+                chartData[1].value = storeData.idleRate
+            }
+
             const colorList = ['#f49a58', '#4351fd'];
             const pieData1 = [];
             // const pieData2 = [];
@@ -140,7 +171,7 @@ export default {
                         },
 
                         formatter:
-                            `{aa| ` + chartData[i].name + ` }{val| ` + parseInt(chartData[i].value / total * 100) + `% }`, // 也可以是个函数return
+                            `{aa| ` + chartData[i].name + ` }{val| ` + chartData[i].value + `% }`, // 也可以是个函数return
                         x: "left",
                         textStyle: {
                             // color: "#BAFF7F",
@@ -245,13 +276,23 @@ export default {
             });
         },
         // 每日周转率
-        drawTurnoverChart() {
+        drawTurnoverChart(turnoverList) {
             this.myChart2 = this.$echarts.init(this.$refs.turnoverChart)
             var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月']
             var yDataArr = [0, 182, 191, 150, 0, 0, 0]
+            if (turnoverList) {
+                xDataArr = turnoverList.map(ele => {
+                    return ele.month + '月'
+                })
+                yDataArr = turnoverList.map(ele => {
+                    return ele.rate
+                })
+            }
+
+
             var colors = ['#4587E7', '#55c3f6', '#4351fd', '#f49a58', '#da70d6', '#32cd32'];
             let option = {
-
+                tooltip: {},
                 xAxis: {
                     boundaryGap: true,
                     type: 'category',
@@ -301,7 +342,7 @@ export default {
                             }
                         },
                     },
-                    name: '星期',
+                    name: '周转率',
                     type: 'bar',
                     barWidth: 20,
                     data: yDataArr
@@ -444,7 +485,7 @@ export default {
             });
         },
         // 积压物质
-        drawOverStock() {
+        drawOverStock(overData) {
             this.myChart4 = this.$echarts.init(this.$refs.oveChart)
             var data = [
                 {
@@ -457,6 +498,11 @@ export default {
                 },
 
             ];
+            if (overData) {
+                data[0].value = overData.backlogAmount
+                data[1].value = overData.noBacklogAmount
+            }
+
             var total = data.reduce((pre, cur) => {
                 console.log(pre, cur.value, '数据');
                 return pre.value + cur.value
@@ -487,7 +533,7 @@ export default {
                         color: colors[index],
                     },
                     formatter:
-                        `{aa|20000万}\n{bb|总物资}`, // 也可以是个函数return
+                        overData?`{aa|${overData.amount}万}\n{bb|总物资}`:`{aa|5241万}\n{bb|总物资}`, // 也可以是个函数return
                     x: "left",
                     textStyle: {
                         // color: "#BAFF7F",
@@ -516,7 +562,7 @@ export default {
                         color: colors[index],
                     },
                     formatter:
-                        `{aa|${(item.value / 100 * 100).toFixed(2)}% }\n{bb| ${item.name}占比}`, // 也可以是个函数return
+                        overData?`{aa|${overData.noBacklogRate}% }\n{bb| ${item.name}占比}`:`{aa|${60}% }\n{bb| ${item.name}占比}`, // 也可以是个函数return
                     x: "left",
                     textStyle: {
                         // color: "#BAFF7F",
diff --git a/src/component/Stock.vue b/src/component/Stock.vue
index 7af7d09..846cbc5 100644
--- a/src/component/Stock.vue
+++ b/src/component/Stock.vue
@@ -16,9 +16,10 @@
             </div>
             <ul class="ul">
                 <li v-for="(s, i) in ulList" class="stockLi" :key="i">
-                    <img :src="s.pic" alt="">
+                    <img :src="pics[i]" alt="">
                     <span class="liName">{{ s.name }}:</span>
-                    <span class="liNum" :class="'num' + i">{{ s.num }}&nbsp;<span style="font-size: 13px;">万元</span></span>
+                    <span class="liNum" :class="'num' + i">{{ s.value }}&nbsp;<span
+                            style="font-size: 13px;">{{ s.unit == true ? s.unit : '万元' }}</span></span>
                 </li>
             </ul>
         </div>
@@ -51,27 +52,41 @@
     </div>
 </template>
 <script>
+import { getStore } from "@/api/index"
 export default {
     name: 'Stock',
     data() {
         return {
             ulList: [
-                { name: '非限制', pic: require('@/assets/images/upstock.png'), num: '26285.91' },
-                { name: '质检', pic: require('@/assets/images/testing.png'), num: '1338.31' },
-                { name: '冻结', pic: require('@/assets/images/freeze.png'), num: '2066.08' },
+                { name: '非限制', value: '26285.91' },
+                { name: '质检', value: '1338.31' },
+                { name: '冻结', value: '2066.08' },
             ],
+            pics: [require('@/assets/images/upstock.png'), require('@/assets/images/testing.png'), require('@/assets/images/freeze.png')],
             inputVal: '',
             ISRList: [
                 { productMsg: '镇江扬中国电电力线缆', address: 'B01-050103', num: '26823' },
                 { productMsg: '镇江扬中国电电力线缆', address: 'B01-050104', num: '17895' },
             ],
-            textarea:''
+            textarea: ''
         }
     },
     mounted() {
         // 当月出库率
         this.drawOutboundStock()
     },
+    created() {
+        // 库存结构
+
+        //      getStore({wareHouseCode:'HA1'}).then(res=>{
+        //     // console.log(res,'库存结构');
+        //     if(res.data.code==200){
+        //         // console.log(res.data.data,'kulin');
+        //         this.ulList = res.data.data.infoList
+        //         // console.log(this.ulList);
+        //     }
+        // })
+    },
     computed: {
 
     },
@@ -289,15 +304,18 @@ export default {
                 display: flex;
                 justify-content: space-evenly;
                 flex-direction: column;
-                p>span:nth-child(1){
+
+                p>span:nth-child(1) {
                     display: inline-block;
                     width: 5em;
                 }
-                
-                .address,.num{
+
+                .address,
+                .num {
                     font-family: quare;
                     color: #4c59fd;
                 }
+
                 .p1 {
                     width: 100%;
 
diff --git a/src/views/index.vue b/src/views/index.vue
index 8b00bd2..940f3f8 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,272 +1,321 @@
 <template>
-    <div class="aside">
-        <div class="aside-box">
-            <div class="left-item">
-                <div class="logo">
-                    <img src="@/assets/images/logo.png" alt="">
-                </div>
-                <!-- 右边小图标样式 -->
-                <ul class="icons">
-                    <li class="icon-item" ref="iconItem" v-for="(s, i) in asideList" data-num="0" :key="i"
-                        @click="updateImg(i, $event)">
-                        <img :src="i == index ? s.select : s.pic" alt="">
-                        <span :style="i == index ? 'color:#2620b1' : ''">{{ s.name }}</span>
-                        <div class="mark">
-
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <!-- <transition name="slide-fade"> -->
-
-            <!-- </transition> -->
-            <!-- <transition name="move"> -->
-            <!-- 库存组件 -->
-            <!-- <Stock v-if="index == 1" class="right-item" /> -->
-            <!-- 入库的组件 -->
-            <!-- <EnterStore v-if="index == 2" class="right-item" /> -->
-            <!-- 出库组件 -->
-            <!-- <OutStore v-if="index == 3" class="right-item" /> -->
-            <!-- <Manage v-if="index == 4" class="right-item" /> -->
-            <!-- </transition> -->
-            <keep-alive>
-                <transition name="slide-fade" mode="out-in">
-                    <component ref="rightItem" :is="view" class="right-item"></component>
-                </transition>
-            </keep-alive>
+  <div class="aside">
+    <div class="aside-box">
+      <div class="left-item">
+        <div class="logo">
+          <img src="@/assets/images/logo.png" alt="" />
         </div>
+        <!-- 右边小图标样式 -->
+        <ul class="icons">
+          <li
+            class="icon-item"
+            ref="iconItem"
+            v-for="(s, i) in asideList"
+            data-num="0"
+            :key="i"
+            @click="updateImg(i, $event)"
+          >
+            <img :src="i == index ? s.select : s.pic" alt="" />
+            <span :style="i == index ? 'color:#2620b1' : ''">{{ s.name }}</span>
+            <div class="mark"></div>
+          </li>
+        </ul>
+      </div>
+      <!-- <transition name="slide-fade"> -->
 
-
-
-
+      <!-- </transition> -->
+      <!-- <transition name="move"> -->
+      <!-- 库存组件 -->
+      <!-- <Stock v-if="index == 1" class="right-item" /> -->
+      <!-- 入库的组件 -->
+      <!-- <EnterStore v-if="index == 2" class="right-item" /> -->
+      <!-- 出库组件 -->
+      <!-- <OutStore v-if="index == 3" class="right-item" /> -->
+      <!-- <Manage v-if="index == 4" class="right-item" /> -->
+      <!-- </transition> -->
+      <keep-alive>
+        <transition name="slide-fade" mode="out-in">
+          <component ref="rightItem" :is="view" class="right-item"></component>
+        </transition>
+      </keep-alive>
     </div>
+  </div>
 </template>
 <script>
 // 库存组件
-import Stock from '@/component/Stock.vue'
+import Stock from "@/component/Stock.vue";
 // 管理组件
-import Manage from '@/component/Manage.vue'
+import Manage from "@/component/Manage.vue";
 // 入库组件
-import EnterStore from '@/component/EnterStore.vue'
+import EnterStore from "@/component/EnterStore.vue";
 // 出库组件
-import OutStore from '@/component/OutStore.vue'
-import OverView from '@/component/OverView.vue'
+import OutStore from "@/component/OutStore.vue";
+import OverView from "@/component/OverView.vue";
 
+import {getBacklogMaterialInfo,byPosition, byBatchAndMateri ,getWarehouseUsages,getTurnoverRate,getChangeAmount ,getInventoryAgeInfo ,getStore,getMaterialDataList} from "@/api/index";
 export default {
-    name: 'index',
-    components: {
-        Stock,
-        Manage,
-        EnterStore,
-        OutStore,
-        OverView
+  name: "index",
+  components: {
+    Stock,
+    Manage,
+    EnterStore,
+    OutStore,
+    OverView,
+  },
+  data() {
+    return {
+      index: 0,
+      asideList: [
+        {
+          name: "总览",
+          select: require("@/assets/images/overview-select.png"),
+          pic: require("@/assets/images/overview-default.png"),
+        },
+        {
+          name: "库存",
+          select: require("@/assets/images/stock-select.png"),
+          pic: require("@/assets/images/stock-default.png"),
+        },
+        {
+          name: "入库",
+          select: require("@/assets/images/enter-select.png"),
+          pic: require("@/assets/images/enter-default.png"),
+        },
+        {
+          name: "出库",
+          select: require("@/assets/images/out-select.png"),
+          pic: require("@/assets/images/out-default.png"),
+        },
+        {
+          name: "管理",
+          select: require("@/assets/images/manage-select.png"),
+          pic: require("@/assets/images/manage-default.png"),
+        },
+      ],
+      view: "",
+      asideShow: false,
+    };
+  },
+  mounted() {
+    // setTimeout(()=>{
+    this.view = "OverView";
+    // },2000)
+    // 获取仓位号接口
+    byPosition({ wareHouseCode: "HA1", position: "B01-010102" }).then((res) => {
+      console.log(res, "仓位号");
+    });
+    // 获取物料批次
+    byBatchAndMateri({ batch:"2021093009",wareHouseCode:'HA1' }).then((res) => {
+        console.log(res,'物料批次');
+    });
+    // // 仓库的使用率
+    // getWarehouseUsages({wareHouseCode:'HA1'}).then(res=>{
+    //     console.log(res,'仓库使用率');
+    // })
+    //每月的周转率
+    // getTurnoverRate({wareHouseCode:'HA1'}).then(res=>{
+    //     console.log(res,'每月的周转率');
+    // })
+    // 当月出入库金额
+    getChangeAmount({wareHouseCode:'HA1'}).then(res=>{
+        console.log(res,'当月出入库金额');
+    })
+    // 积压物资
+    
+
+
+    // 库龄结构
+    getInventoryAgeInfo({wareHouseCode:'HA1'}).then(res=>{
+        console.log(res,'库龄结构');
+    })
+
+    // 库存构成
+    // getStore({wareHouseCode:'HA1'}).then(res=>{
+    //     console.log(res,'库存结构');
+    // })
+
+    // 库容预测
+    // getMaterialDataList({method:'getYckc',LGUNM:"HA1",NY:"202304"}).then(res=>{
+    //     console.log(res,'库容预测');
+    // })
+  },
+  created() {},
+  computed: {},
+  methods: {
+    // 切图
+    updateImg(i, event) {
+      // 当页面显示出来时 再次点击隐藏
+      this.asideShow = !this.asideShow;
+      if (this.index == i && this.asideShow) {
+        // console.log(1);
+        this.view = "";
+        return;
+      }
+      this.index = i;
+      // let rightBox = document.querySelector('.right-item')
+      // rightBox.style.transform = 'translateX(0)'
+      // console.log(rightBox,'dom元素');
+      // console.log(event.target,'....');
+
+      if (this.index == 0) {
+        // this.$nextTick(() => {
+        //     // 总览界面echarts
+        //     this.drawStore()
+        //     this.drawTurnoverChart()
+        //     this.drawOutbound()
+        //     this.drawOverStock()
+        // })
+        this.view = "OverView";
+      } else if (this.index == 1) {
+        this.view = "Stock";
+      } else if (this.index == 2) {
+        this.view = "EnterStore";
+      } else if (this.index == 3) {
+        this.view = "OutStore";
+      } else if (this.index == 4) {
+        this.view = "Manage";
+      }
+      this.asideShow = false;
     },
-    data() {
-        return {
-            index: 0,
-            asideList: [
-                { name: '总览', select: require("@/assets/images/overview-select.png"), pic: require('@/assets/images/overview-default.png') },
-                { name: '库存', select: require("@/assets/images/stock-select.png"), pic: require('@/assets/images/stock-default.png') },
-                { name: '入库', select: require("@/assets/images/enter-select.png"), pic: require('@/assets/images/enter-default.png') },
-                { name: '出库', select: require("@/assets/images/out-select.png"), pic: require('@/assets/images/out-default.png') },
-                { name: '管理', select: require("@/assets/images/manage-select.png"), pic: require('@/assets/images/manage-default.png') }
-            ],
-            view: '',
-            asideShow: false,
-        }
-    },
-    mounted() {
-        // setTimeout(()=>{
-        this.view = 'OverView'
-        // },2000)
-
-    },
-    created(){
-
-    },
-    computed: {
-
-    },
-    methods: {
-        // 切图
-        updateImg(i, event) {
-            // 当页面显示出来时 再次点击隐藏
-            this.asideShow = !this.asideShow
-            if (this.index == i && this.asideShow) {
-                // console.log(1);
-                this.view = ''
-                return
-            }
-            this.index = i
-            // let rightBox = document.querySelector('.right-item')
-            // rightBox.style.transform = 'translateX(0)'
-            // console.log(rightBox,'dom元素');
-            // console.log(event.target,'....');
-
-            if (this.index == 0) {
-                // this.$nextTick(() => {
-                //     // 总览界面echarts
-                //     this.drawStore()
-                //     this.drawTurnoverChart()
-                //     this.drawOutbound()
-                //     this.drawOverStock()
-                // })
-                this.view = 'OverView'
-            } else if (this.index == 1) {
-                this.view = 'Stock'
-            } else if (this.index == 2) {
-                this.view = 'EnterStore'
-            } else if (this.index == 3) {
-
-                this.view = 'OutStore'
-            } else if (this.index == 4) {
-                this.view = 'Manage'
-            }
-            this.asideShow = false
-        }
-
-
-    },
-}
+  },
+};
 </script>
 <style scoped lang="less">
 .mark {
-    // display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    // background-color: #888888;
+  // display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  // background-color: #888888;
 }
 
 .slide-fade-enter-active {
-    transition: all 1s;
+  transition: all 1s;
 }
 
 .slide-fade-leave-active {
-    transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
 }
 
 .slide-fade-enter,
 .slide-fade-leave-to {
-    transform: translateX(-100%);
-    opacity: 0;
+  transform: translateX(-100%);
+  opacity: 0;
 }
 
 .aside {
-    width: 21.4%;
-    height: 100%;
+  width: 21.4%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 3%;
+  position: relative;
+  z-index: 99;
+
+  .aside-box {
+    width: 100%;
+    height: 92.6%;
+    overflow: hidden;
+    // background-color: rgba(229, 237, 242, .5);
+    border-radius: 20px;
     display: flex;
-    align-items: center;
-    margin-left: 3%;
-    position: relative;
-    z-index: 99;
 
-    .aside-box {
-        width: 100%;
-        height: 92.6%;
-        overflow: hidden;
-        // background-color: rgba(229, 237, 242, .5);
-        border-radius: 20px;
+    .left-item {
+      width: 18.8%;
+      height: 100%;
+      background-color: #f7f8f9;
+      border-top-left-radius: 20px;
+      border-bottom-left-radius: 20px;
+      position: relative;
+      z-index: 15;
+
+      .logo {
+        margin-top: 15px;
         display: flex;
+        justify-content: center;
+        margin-bottom: 32px;
+      }
 
-        .left-item {
-            width: 18.8%;
-            height: 100%;
-            background-color: #f7f8f9;
-            border-top-left-radius: 20px;
-            border-bottom-left-radius: 20px;
-            position: relative;
-            z-index: 15;
+      .icons {
+        width: 100%;
+        height: 10%;
 
-            .logo {
-                margin-top: 15px;
-                display: flex;
-                justify-content: center;
-                margin-bottom: 32px;
-            }
-
-            .icons {
-                width: 100%;
-                height: 10%;
-
-                .icon-item {
-                    width: 100%;
-                    height: 100%;
-                    display: flex;
-                    flex-wrap: wrap;
-                    align-items: center;
-                    justify-content: center;
-                    align-content: center;
-                    cursor: pointer;
-                    position: relative;
-
-                    img {
-                        display: block;
-                    }
-
-                    span {
-                        display: inline-block;
-                        width: 100%;
-                        text-align: center;
-                        color: #888888;
-                    }
-                }
-            }
-        }
-
-        .right-item {
-            width: 81.2%;
-            // display: none;
-            // opacity: 0;
-            // transition: all 1s;
-            height: 100%;
-            // transform: translateX(-100%);
-            background-color: rgba(229, 237, 242, .5);
-            border-top-right-radius: 20px;
-            border-bottom-right-radius: 20px;
-            position: relative;
-            z-index: 10;
-
-            .title {
-                font-size: 16px;
-                margin-left: 7%;
-                margin-bottom: 4%;
-            }
-
-            .storeUse {
-                width: 100%;
-                height: 21.5%;
-            }
-
-            .monthlyTurnover,
-            .outboundAmount {
-                width: 100%;
-                height: 25%;
-
-                .turnoverChart,
-                .outboundChart {
-                    width: 90%;
-                    height: 80%;
-                    background-color: #fff;
-                    margin: 0 auto;
-                    border-radius: 10px;
-                }
-            }
-
-            .overStock {
-                height: calc(100% - 71.5%);
-                width: 100%;
-
-                .overChart {
-                    width: 100%;
-                    height: 80%;
-                }
-            }
+        .icon-item {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: center;
+          align-content: center;
+          cursor: pointer;
+          position: relative;
 
+          img {
+            display: block;
+          }
 
+          span {
+            display: inline-block;
+            width: 100%;
+            text-align: center;
+            color: #888888;
+          }
         }
+      }
     }
+
+    .right-item {
+      width: 81.2%;
+      // display: none;
+      // opacity: 0;
+      // transition: all 1s;
+      height: 100%;
+      // transform: translateX(-100%);
+      background-color: rgba(229, 237, 242, 0.5);
+      border-top-right-radius: 20px;
+      border-bottom-right-radius: 20px;
+      position: relative;
+      z-index: 10;
+
+      .title {
+        font-size: 16px;
+        margin-left: 7%;
+        margin-bottom: 4%;
+      }
+
+      .storeUse {
+        width: 100%;
+        height: 21.5%;
+      }
+
+      .monthlyTurnover,
+      .outboundAmount {
+        width: 100%;
+        height: 25%;
+
+        .turnoverChart,
+        .outboundChart {
+          width: 90%;
+          height: 80%;
+          background-color: #fff;
+          margin: 0 auto;
+          border-radius: 10px;
+        }
+      }
+
+      .overStock {
+        height: calc(100% - 71.5%);
+        width: 100%;
+
+        .overChart {
+          width: 100%;
+          height: 80%;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
index b015161..4435c4c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,33 +1,33 @@
-// const { defineConfig } = require('@vue/cli-service')
-// module.exports = defineConfig({
-//   transpileDependencies: true
-// })
-module.exports = {
-  // 打包文件配置
-  publicPath: "/",
-  assetsDir: "static",
-  lintOnSave: false,
-  devServer: {
-    // overlay: { // 让浏览器 overlay 同时显示警告和错误
-    //     warnings: true,
-    //     errors: true,
-    // },
-    // hotOnly: true,
-    // open: false, // npm run serve后自动打开页面
-    // https: false, // https:{type:Boolean}
-    // host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
-    // port: 8989, // 开发服务器运行端口号
-    proxy: {
-      '/api': { //代理的名字
-        // target:'http://111.229.30.246:3111/',
-        target: 'http://ip:30005/gwcp/',
-        // target:'http://www.weather.com.cn/',
-        ws: true,
-        changeOrigin: true,
-        pathRewrite: {
-          '^/api': '',
-        }
-      },
-    }
-  }
-}
+// const { defineConfig } = require('@vue/cli-service')
+// module.exports = defineConfig({
+//   transpileDependencies: true
+// })
+module.exports = {
+  // 打包文件配置
+  publicPath: "/",
+  assetsDir: "static",
+  lintOnSave: false,
+  devServer: {
+    // overlay: { // 让浏览器 overlay 同时显示警告和错误
+    //     warnings: true,
+    //     errors: true,
+    // },
+    // hotOnly: true,
+    // open: false, // npm run serve后自动打开页面
+    // https: false, // https:{type:Boolean}
+    // host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
+    // port: 8989, // 开发服务器运行端口号
+    proxy: {
+      '/api': { //代理的名字
+        // target:'http://111.229.30.246:3111/',
+        target: 'http://192.168.80.111:30005/gwcpedge/',
+        // target:'http://www.weather.com.cn/',
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': '',
+        }
+      },
+    }
+  }
+}