修改首页库存成本

src/views/home/index.vue

@@ -28,13 +28,13 @@
         <div class="content2">
           <el-row class="content2-aside">
             <h3 class="title" @click="contract(0)">采购合同完成进度</h3>
-            <el-col :span="12" class="chart-card" >
+            <el-col :span="12" class="chart-card">
               <div style="font-weight: bold;" class="">
                 <div ref="myEchart1" style="height: 288px;" class="roseChart"></div>
                 <div class="bottom-tip">统计单位：吨</div>
               </div>
             </el-col>
-            <el-col :span="12" class="chart-card" >
+            <el-col :span="12" class="chart-card">
               <div style="font-weight: bold;">
                 <div ref="myEchart2" style="height: 288px;" class="roseChart"></div>
                 <div class="bottom-tip">统计单位：元</div>
@@ -80,19 +80,28 @@
               </div>
             </el-row>
             <el-row>
-              <h3>库存成本</h3>
+              <div style="display: flex;">
+                  <h3>头寸</h3>
+                   <h3 style="margin-left: 30px;">{{position}}吨</h3>
+              </div>
               <div class="content3">
                 <div class="left">
-                  <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt="">
-                  <span>总库存量</span>
-                  <span class="content3-number blue">{{inventoryCost}}</span>
+                  <!-- <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt=""> -->
+                  <span>实际库存</span>
+                  <span class="content3-number blue">{{physicalInventory}}</span>
+                  <span style="margin-top: 10px;">吨</span>
+                </div>
+                <div class="left">
+                  <!-- <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt=""> -->
+                  <span>采购待执行（吨）</span>
+                  <span class="content3-number blue">{{procurementPending}}</span>
                   <span style="margin-top: 10px;">吨</span>
                 </div>
                 <div class="right">
-                  <img src="../../../public/img/1637204768818-70JRjz0H.png" alt="">
-                  <span>库存价值</span>
-                  <span class="content3-number yellow">{{inventoryValue}}</span>
-                  <span style="margin-top: 10px;">元</span>
+                  <!-- <img src="../../../public/img/1637204768818-70JRjz0H.png" alt=""> -->
+                  <span>销售待执行（吨）</span>
+                  <span class="content3-number yellow">{{salesPending}}</span>
+                  <span style="margin-top: 10px;">吨</span>
                 </div>
               </div>
             </el-row>
@@ -111,7 +120,7 @@
                 <div class="bottom-tip">统计单位：元</div>
               </div>
             </el-col>
-            <el-col :span="12" class="chart-card" >
+            <el-col :span="12" class="chart-card">
               <div style="font-weight: bold;">
                 <div ref="myEchart6" style="height: 288px;" class="roseChart" @click="contract(1)"></div>
                 <div class="bottom-tip">统计单位：元</div>
@@ -214,10 +223,12 @@
 
     data() {
       return {
+        physicalInventory :0,
+        procurementPending:0,
+        salesPending:0,
+        position:0,
         mapInfo: [],
         totalReserves: '',
-        inventoryCost: '',
-        inventoryValue: '',
         carCount1: '',
         carCount2: '',
         carCount3: '',
@@ -328,7 +339,7 @@
       },
 
     },
-    activated(){
+    activated() {
       // var staffId=JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffId
       //      if ('WebSocket' in window) {
       //             if (process.env.NODE_ENV === 'production') {
@@ -358,18 +369,17 @@
       }
     },
     async mounted() {
-      var staffId=JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffId
+      var staffId = JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffId
       // getAdminId().toPromise().then(response => {console.log(11111)})
       this.loading = false
       // WebSocket
       // this.$store.dispatch('setAdminId', response.data.data)
       if ('WebSocket' in window) {
         if (process.env.NODE_ENV === 'production') {
-          this.websocket = new WebSocket('wss://www.zthymaoyi.com/wss/websocket/'+staffId )
-        }
-        else {
+          this.websocket = new WebSocket('wss://www.zthymaoyi.com/wss/websocket/' + staffId)
+        } else {
           //  this.websocket = new WebSocket('ws://192.168.1.115:8090/commonUser/api/onOpen?adminId=84f62127b7384dcdbaeaddfe460329fc' )
-          this.websocket = new WebSocket('ws://192.168.1.119:9100/websocket/'+staffId )
+          this.websocket = new WebSocket('ws://192.168.1.119:9100/websocket/' + staffId)
         }
         this.initWebSocket()
       } else {
@@ -395,16 +405,18 @@
       //获取新闻列表
       // this.getNewList()
       gChartsData({
-        compId:localStorage.getItem('ws-pf_compId'),
-		seachMoth:'2021'
+        compId: localStorage.getItem('ws-pf_compId'),
+        seachMoth: '2021'
       }).toPromise().then(res => {
-        console.log('··············',res)
+        console.log('··············', res)
         this.chartsData = res
         this.carCount1 = res[6].biViewInfoList[0].count
         this.carCount2 = res[6].biViewInfoList[1].count
         this.carCount3 = res[6].biViewInfoList[2].count
-        this.inventoryCost = parseInt(res[7].biViewInfoList[0].count).toFixed(0)
-        this.inventoryValue = parseInt(res[7].biViewInfoList[1].count).toFixed(0)
+        this.physicalInventory = Number(res[7].biViewInfoList[0].count).toFixed(2)
+        this.procurementPending= Number(res[7].biViewInfoList[1].count).toFixed(2)
+        this.salesPending =  Number(res[7].biViewInfoList[2].count).toFixed(2)
+        this.position = Number(Number(this.physicalInventory)+Number(this.procurementPending) - Number(this.salesPending)).toFixed(2)
         this.totalReserves = res[8].biViewInfoList
         this.mapInfo = res[9]
         this.initCharts()
@@ -451,67 +463,72 @@
           this.number.news = news
         })
       },
-         initWebSocket () {
-           console.log(this.websocket)
-      // 连接错误
-      this.websocket.onerror = this.setErrorMessage
-      // 连接成功
-      this.websocket.onopen = this.setOnopenMessage
+      initWebSocket() {
+        console.log(this.websocket)
+        // 连接错误
+        this.websocket.onerror = this.setErrorMessage
+        // 连接成功
+        this.websocket.onopen = this.setOnopenMessage
 
-      // 收到消息的回调
-      this.websocket.onmessage = this.setOnmessageMessage
+        // 收到消息的回调
+        this.websocket.onmessage = this.setOnmessageMessage
 
-      // 连接关闭的回调
-      this.websocket.onclose = this.setOncloseMessage
+        // 连接关闭的回调
+        this.websocket.onclose = this.setOncloseMessage
 
-      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-      window.onbeforeunload = this.onbeforeunload
-    },
-    setErrorMessage () {
-      console.log('WebSocket连接发生错误   状态码：' +this.websocket.readyState)
-    },
-    setOnopenMessage () {
-      // console.log(this.websocket)
-      console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
-    },
-    setOnmessageMessage (event) {
-      // console.log(3333)
-      // 根据服务器推送的消息做自己的业务处理
-      console.log('服务端返回：' + event.data)
-      var msg = event.data.split('$')
-      var that = this
-      this.$notify.warning({
-        title: '新消息提醒',
-        message: msg[0],
-        duration: 0,
-        onClick() {
-          that.$router.push({
-            path: msg[1] }) // 你要跳转的路由 还可以传参 当然也可以通过其他方式跳转
-        }
-      })
-      var currentPage = that.$router.history.current.path
-      that.$router.push({ path: '/' })
-      that.$router.push({ path: currentPage })
-    },
-    setOncloseMessage () {
-      // console.log(this.websocket)
-      console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
-    },
-      //跳转
-      contract(index){
-         if(index == 0){
-            this.$router.push({
-              name:'buyContract'
-            })
-          }else if(index == 1){
-            this.$router.push({
-              name:'salesContract'
-            })
-          }else if(index == 3){
-            this.$router.push({
-              name:'warehouseManagementList'
-            })
+        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+        window.onbeforeunload = this.onbeforeunload
+      },
+      setErrorMessage() {
+        console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
+      },
+      setOnopenMessage() {
+        // console.log(this.websocket)
+        console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
+      },
+      setOnmessageMessage(event) {
+        // console.log(3333)
+        // 根据服务器推送的消息做自己的业务处理
+        console.log('服务端返回：' + event.data)
+        var msg = event.data.split('$')
+        var that = this
+        this.$notify.warning({
+          title: '新消息提醒',
+          message: msg[0],
+          duration: 0,
+          onClick() {
+            that.$router.push({
+              path: msg[1]
+            }) // 你要跳转的路由 还可以传参 当然也可以通过其他方式跳转
           }
+        })
+        var currentPage = that.$router.history.current.path
+        that.$router.push({
+          path: '/'
+        })
+        that.$router.push({
+          path: currentPage
+        })
+      },
+      setOncloseMessage() {
+        // console.log(this.websocket)
+        console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
+      },
+      //跳转
+      contract(index) {
+        if (index == 0) {
+          this.$router.push({
+            name: 'buyContract'
+          })
+        } else if (index == 1) {
+          this.$router.push({
+            name: 'salesContract'
+          })
+        } else if (index == 3) {
+          this.$router.push({
+            name: 'warehouseManagementList'
+          })
+        }
       },
       getTime() {
         const date = new Date();
@@ -551,12 +568,12 @@
               // 圆环图各环节的名称和值(系列中各数据项的名称和值)
               data = [{
                 name: '已完成量',
-                value:Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2) ,
-                type:'采购合同'
+                value: Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2),
+                type: '采购合同'
               }, {
                 name: '待完成量',
-                value:Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2) ,
-                type:'采购合同'
+                value: Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
+                type: '采购合同'
               }]
               text = '合同总量'
               formatter = '{b}{c}吨 </br> 占比{d}%'
@@ -569,12 +586,12 @@
               // 圆环图各环节的名称和值(系列中各数据项的名称和值)
               data = [{
                 name: '已开票',
-                value:Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2),
-                type:'采购合同'
+                value: Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2),
+                type: '采购合同'
               }, {
                 name: '待开票',
-                value:Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
-                type:'采购合同'
+                value: Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
+                type: '采购合同'
               }]
               text = '合同总额'
               formatter = '{b}{c}元 </br> 占比{d}%'
@@ -590,8 +607,8 @@
                 type: '采购合同'
               }, {
                 name: '待付款',
-                value:Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
-                   type: '采购合同'
+                value: Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
+                type: '采购合同'
               }]
               text = '合同总额'
               formatter = '{b}{c}元 </br> 占比{d}%'
@@ -604,15 +621,15 @@
               data = [{
                 name: '已完成量',
                 value: Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2),
-                  type: '销售合同'
+                type: '销售合同'
               }, {
                 name: '待完成量',
-                value:Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
+                value: Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
               }]
               text = '合同总量'
               formatter = '{b}{c}吨 </br> 占比{d}%'
               graphicText = ' \n\n总量合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
-                break;
+              break;
             case 4:
               // 圆环图各环节的颜色
               color = ['#247ef4', '#3a3b40'];
@@ -725,7 +742,7 @@
             //  var a = params.dataIndex
             // console.log(params, '我被点击了');
             // app.dialogVisible = true
-           return
+            return
           })
         }
         console.log(this.totalReserves)
@@ -1892,7 +1909,8 @@
     .content2-middle {
       width: calc(100% - 720px);
       margin: 0 20px 0 15px;
-      min-width:910px ;
+      min-width: 910px;
+
       .left-card {
         display: flex;
         // background: green;
@@ -1950,7 +1968,7 @@
     justify-content: space-between;
     align-items: center;
     background: #2a2a2a;
-    padding: 10px 60px;
+    padding: 10px;
 
     .content3-number {
       margin-left: 40px;