代码提交

2023-04-10 18:05:02 +08:00 · 2023-04-10 18:05:02 +08:00 · f10c84a217
parent 16d49f37bb
commit f10c84a217
5 changed files with 405 additions and 292 deletions
--- 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
    })
 }
--- 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",
--- 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%;

--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -3,17 +3,21 @@
    <div class="aside-box">
      <div class="left-item">
        <div class="logo">
-                    <img src="@/assets/images/logo.png" alt="">
+          <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="">
+          <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>
+            <div class="mark"></div>
          </li>
        </ul>
      </div>
@ -35,69 +39,119 @@
        </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',
+  name: "index",
  components: {
    Stock,
    Manage,
    EnterStore,
    OutStore,
-        OverView
+    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') }
+        {
+          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: '',
+      view: "",
      asideShow: false,
-        }
+    };
  },
  mounted() {
    // setTimeout(()=>{
-        this.view = 'OverView'
+    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,'当月出入库金额');
+    })
+    // 积压物资
    
-    },
-    created(){

-    },
-    computed: {

+    // 库龄结构
+    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
+      this.asideShow = !this.asideShow;
      if (this.index == i && this.asideShow) {
        // console.log(1);
-                this.view = ''
-                return
+        this.view = "";
+        return;
      }
-            this.index = i
+      this.index = i;
      // let rightBox = document.querySelector('.right-item')
      // rightBox.style.transform = 'translateX(0)'
      // console.log(rightBox,'dom元素');
@ -111,23 +165,20 @@ export default {
        //     this.drawOutbound()
        //     this.drawOverStock()
        // })
-                this.view = 'OverView'
+        this.view = "OverView";
      } else if (this.index == 1) {
-                this.view = 'Stock'
+        this.view = "Stock";
      } else if (this.index == 2) {
-                this.view = 'EnterStore'
+        this.view = "EnterStore";
      } else if (this.index == 3) {
-
-                this.view = 'OutStore'
+        this.view = "OutStore";
      } else if (this.index == 4) {
-                this.view = 'Manage'
+        this.view = "Manage";
      }
-            this.asideShow = false
-        }
-
-
+      this.asideShow = false;
    },
-}
+  },
+};
 </script>
 <style scoped lang="less">
 .mark {
@ -145,7 +196,7 @@ export default {
 }

 .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,
@ -223,7 +274,7 @@ export default {
      // transition: all 1s;
      height: 100%;
      // transform: translateX(-100%);
-            background-color: rgba(229, 237, 242, .5);
+      background-color: rgba(229, 237, 242, 0.5);
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      position: relative;
@ -264,8 +315,6 @@ export default {
          height: 80%;
        }
      }
-
-
    }
  }
 }
--- a/vue.config.js
+++ b/vue.config.js
@ -20,7 +20,7 @@ module.exports = {
    proxy: {
      '/api': { //代理的名字
        // target:'http://111.229.30.246:3111/',
-        target: 'http://ip:30005/gwcp/',
+        target: 'http://192.168.80.111:30005/gwcpedge/',
        // target:'http://www.weather.com.cn/',
        ws: true,
        changeOrigin: true,