1.完善看板数据加载

src/api/kban.js

@@ -0,0 +1,51 @@
+import request from '@/utils/request'
+
+/**
+ * 各垮计划完成情况
+ */
+export const getGkjhwcqk=function(){
+  return request({
+    url: '/kban/gxjhwcqk',
+    method: 'get',
+  })
+}
+
+/**
+ * 各月份产量(吨)
+ */
+export const getQyfcl=function(){
+  return request({
+    url: '/kban/gyfcl',
+    method: 'get',
+  })
+}
+
+/**
+ * 计划完成情况(吨)
+ */
+export const getJhwcqk=function(){
+  return request({
+    url: '/kban/jhwcqk',
+    method: 'get',
+  })
+}
+
+/**
+ * 各垮产量
+ */
+export const getGekuachaliang=function(){
+  return request({
+    url: '/kban/gekuachaliang',
+    method: 'get',
+  })
+}
+
+/**
+ * 考勤情况
+ */
+export const getKqData=function(){
+  return request({
+    url: '/kban/kq',
+    method: 'get',
+  })
+}

src/views/kban/comps/GxChanLiang.vue

@@ -8,13 +8,13 @@
           <div class="card-footer-item">
             <div class="footer-title">数量</div>
             <div class="footer-detail">
-              <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />张
+              <dv-digital-flop v-if="show" :config="card.total" style="width:70%;height:35px;" />张
             </div>
           </div>
           <div class="card-footer-item">
             <div class="footer-title">重量</div>
             <div class="footer-detail">
-              <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />吨
+              <dv-digital-flop v-if="show" :config="card.num" style="width:70%;height:35px;" />吨
             </div>
           </div>
         </div>
@@ -24,92 +24,368 @@
 </template>
 
 <script>
+import {getGkjhwcqk} from "@/api/kban";
+
 export default {
   name:'MainGxChanLiang',
   data(){
     return {
+      show:false,
       cards:[]
     }
   },
+  mounted () {
+    this.getData()
+    setInterval(this.getData, 30000)
+  },
   methods: {
-    createData () {
+    async getData() {
-      const { randomExtend } = this
+      const res=await getGkjhwcqk()
-
+      const {上料, 抛丸, 理料, 划线, 切割} = this.createData(res.data)
-      const arr=['上料','抛丸','理料','划线','切割']
+      this.show = false
-      this.cards = new Array(5).fill(0).map((foo, i) => ({
+      this.cards = [上料, 抛丸, 理料, 划线, 切割]
-        title: arr[i],
+      this.show = true
-        total: {
+    },
-          number: [randomExtend(100, 400)],
+    createData (list) {
-          content: '{nt}',
+      const data={
-          textAlign: 'right',
+        "上料": {
-          style: {
+          title: '上料',
-            fill: '#ea6027',
+          total: {
-            fontWeight: 'bold'
+            number: [0],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#ea6027',
+              fontWeight: 'bold'
+            }
+          },
+          num: {
+            number: [0],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#26fcd8',
+              fontWeight: 'bold'
+            }
+          },
+          ring: {
+            series: [
+              {
+                type: 'gauge',
+                startAngle: -Math.PI / 2,
+                endAngle: Math.PI * 1.5,
+                arcLineWidth: 13,
+                radius: '80%',
+                data: [
+                  { name: '重量占比', value: 0 }
+                ],
+                axisLabel: {
+                  show: false
+                },
+                axisTick: {
+                  show: false
+                },
+                pointer: {
+                  show: false
+                },
+                backgroundArc: {
+                  style: {
+                    stroke: '#224590'
+                  }
+                },
+                details: {
+                  show: true,
+                  formatter: '重量占比{value}%',
+                  style: {
+                    fill: '#1ed3e5',
+                    fontSize: 20
+                  }
+                }
+              }
+            ],
+            color: ['#03d3ec']
           }
         },
-        num: {
+        "抛丸": {
-          number: [randomExtend(300, 600)],
+          title: '抛丸',
-          content: '{nt}',
+          total: {
-          textAlign: 'right',
+            number: [0],
-          style: {
+            content: '{nt}',
-            fill: '#26fcd8',
+            textAlign: 'right',
-            fontWeight: 'bold'
+            style: {
+              fill: '#ea6027',
+              fontWeight: 'bold'
+            }
+          },
+          num: {
+            number: [0],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#26fcd8',
+              fontWeight: 'bold'
+            }
+          },
+          ring: {
+            series: [
+              {
+                type: 'gauge',
+                startAngle: -Math.PI / 2,
+                endAngle: Math.PI * 1.5,
+                arcLineWidth: 13,
+                radius: '80%',
+                data: [
+                  { name: '重量占比', value: 0 }
+                ],
+                axisLabel: {
+                  show: false
+                },
+                axisTick: {
+                  show: false
+                },
+                pointer: {
+                  show: false
+                },
+                backgroundArc: {
+                  style: {
+                    stroke: '#224590'
+                  }
+                },
+                details: {
+                  show: true,
+                  formatter: '重量占比{value}%',
+                  style: {
+                    fill: '#1ed3e5',
+                    fontSize: 20
+                  }
+                }
+              }
+            ],
+            color: ['#03d3ec']
           }
         },
-        ring: {
+        "理料": {
-          series: [
+          title: '理料',
-            {
+          total: {
-              type: 'gauge',
+            number: [0],
-              startAngle: -Math.PI / 2,
+            content: '{nt}',
-              endAngle: Math.PI * 1.5,
+            textAlign: 'right',
-              arcLineWidth: 13,
+            style: {
-              radius: '80%',
+              fill: '#ea6027',
-              data: [
+              fontWeight: 'bold'
-                { name: '重量占比', value: randomExtend(40, 60) }
+            }
-              ],
+          },
-              axisLabel: {
+          num: {
-                show: false
+            number: [0],
-              },
+            content: '{nt}',
-              axisTick: {
+            textAlign: 'right',
-                show: false
+            style: {
-              },
+              fill: '#26fcd8',
-              pointer: {
+              fontWeight: 'bold'
-                show: false
+            }
-              },
+          },
-              backgroundArc: {
+          ring: {
-                style: {
+            series: [
-                  stroke: '#224590'
+              {
+                type: 'gauge',
+                startAngle: -Math.PI / 2,
+                endAngle: Math.PI * 1.5,
+                arcLineWidth: 13,
+                radius: '80%',
+                data: [
+                  { name: '重量占比', value: 0 }
+                ],
+                axisLabel: {
+                  show: false
+                },
+                axisTick: {
+                  show: false
+                },
+                pointer: {
+                  show: false
+                },
+                backgroundArc: {
+                  style: {
+                    stroke: '#224590'
+                  }
+                },
+                details: {
+                  show: true,
+                  formatter: '重量占比{value}%',
+                  style: {
+                    fill: '#1ed3e5',
+                    fontSize: 20
+                  }
                 }
-              },
+              }
-              details: {
+            ],
-                show: true,
+            color: ['#03d3ec']
-                formatter: '重量占比{value}%',
+          }
-                style: {
+        },
-                  fill: '#1ed3e5',
+        "划线": {
-                  fontSize: 20
+          title: '划线',
+          total: {
+            number: [0],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#ea6027',
+              fontWeight: 'bold'
+            }
+          },
+          num: {
+            number: [0],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#26fcd8',
+              fontWeight: 'bold'
+            }
+          },
+          ring: {
+            series: [
+              {
+                type: 'gauge',
+                startAngle: -Math.PI / 2,
+                endAngle: Math.PI * 1.5,
+                arcLineWidth: 13,
+                radius: '80%',
+                data: [
+                  { name: '重量占比', value: 0 }
+                ],
+                axisLabel: {
+                  show: false
+                },
+                axisTick: {
+                  show: false
+                },
+                pointer: {
+                  show: false
+                },
+                backgroundArc: {
+                  style: {
+                    stroke: '#224590'
+                  }
+                },
+                details: {
+                  show: true,
+                  formatter: '重量占比{value}%',
+                  style: {
+                    fill: '#1ed3e5',
+                    fontSize: 20
+                  }
                 }
               }
+            ],
+            color: ['#03d3ec']
+          }
+        },
+        "切割": {
+          title: '切割',
+          total: {
+            number: [0],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#ea6027',
+              fontWeight: 'bold'
             }
-          ],
+          },
-          color: ['#03d3ec']
+          num: {
+            number: [0],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#26fcd8',
+              fontWeight: 'bold'
+            }
+          },
+          ring: {
+            series: [
+              {
+                type: 'gauge',
+                startAngle: -Math.PI / 2,
+                endAngle: Math.PI * 1.5,
+                arcLineWidth: 13,
+                radius: '80%',
+                data: [
+                  { name: '重量占比', value: 0 }
+                ],
+                axisLabel: {
+                  show: false
+                },
+                axisTick: {
+                  show: false
+                },
+                pointer: {
+                  show: false
+                },
+                backgroundArc: {
+                  style: {
+                    stroke: '#224590'
+                  }
+                },
+                details: {
+                  show: true,
+                  formatter: '重量占比{value}%',
+                  style: {
+                    fill: '#1ed3e5',
+                    fontSize: 20
+                  }
+                }
+              }
+            ],
+            color: ['#03d3ec']
+          }
         }
-      }))
-    },
-    randomExtend (minNum, maxNum) {
-      if (arguments.length === 1) {
-        return parseInt(Math.random() * minNum + 1, 10)
-      } else {
-        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
       }
-    }
-  },
-  mounted () {
-    const { createData } = this
 
-    createData()
+      let totalZl=0
+      for (const item of list) {
+        totalZl+=(item.bcshzl/1000)||0
+        if (!!item.slfkrq){
+          data.上料.total.number[0]+=1
+          data.上料.num.number[0]+=(item.bcshzl/1000)||0
+        }
+        if (!!item.pwfkrq){
+          data.抛丸.total.number[0]+=1
+          data.抛丸.num.number[0]+=(item.bcshzl/1000)||0
+        }
+        if (!!item.llfkrq){
+          data.理料.total.number[0]+=1
+          data.理料.num.number[0]+=(item.bcshzl/1000)||0
+        }
+        if (!!item.hxfkrq){
+          data.划线.total.number[0]+=1
+          data.划线.num.number[0]+=(item.bcshzl/1000)||0
+        }
+        if (!!item.qgfkrq){
+          data.切割.total.number[0]+=1
+          data.切割.num.number[0]+=(item.bcshzl/1000)||0
+        }
+      }
+      let d1=data.上料.num.number[0]/totalZl*100
+      d1=d1<1?1:d1
+      data.上料.ring.series[0].data[0].value=parseFloat(d1.toFixed(2))
+
+      let d2=data.上料.num.number[0]/totalZl*100
+      d2=d2<1?1:d2
+      data.抛丸.ring.series[0].data[0].value=parseFloat(d2.toFixed(2))
 
-    setInterval(this.createData, 30000)
+      let d3=data.上料.num.number[0]/totalZl*100
-  }
+      d3=d3<1?1:d3
+      data.理料.ring.series[0].data[0].value=parseFloat(d3.toFixed(2))
+
+      let d4=data.上料.num.number[0]/totalZl*100
+      d4=d4<1?1:d4
+      data.划线.ring.series[0].data[0].value=parseFloat(d4.toFixed(2))
+
+      let d5=data.上料.num.number[0]/totalZl*100
+      d5=d5<1?1:d5
+      data.切割.ring.series[0].data[0].value=parseFloat(d5.toFixed(2))
+      return data
+    },
+  },
 }
 </script>
 

src/views/kban/comps/MainChanLian.vue

@@ -1,57 +1,57 @@
 <template>
   <div class="chanlian">
     <div class="chanlian__title">本月各垮产量(吨)</div>
-    <dv-scroll-ranking-board :config="config" />
+    <dv-scroll-ranking-board v-if="show" :config="config" />
   </div>
 </template>
 
 <script>
+import {getGekuachaliang} from "@/api/kban";
+
 export default {
   name: "MainChanLian",
   data () {
     return {
+      show:false,
       config: {
         data: [
           {
             name: '上料',
             value: 120
           },
-          {
-            name: '切割',
-            value: 55
-          },
-          {
-            name: '理料',
-            value: 78
-          },
-          {
-            name: '划线',
-            value: 66
-          },
-          {
-            name: '抛丸',
-            value: 80
-          },
-          {
-            name: '坡口',
-            value: 45
-          },
-          {
-            name: '曲加工',
-            value: 29
-          },
-          {
-            name: '打磨',
-            value: 29
-          },
-          {
-            name: '预配盘',
-            value: 29
-          }
         ],
         rowNum: 9
       }
     }
+  },
+  mounted() {
+    // this.$socket.open()
+    // this.wsSubscribe()
+  },
+  created(){
+    this.getData();
+  },
+  sockets:{},
+  methods:{
+    getData(){
+      getGekuachaliang().then(res=>{
+        this.show=false
+        const data=[]
+        let total=0
+        Object.keys(res.data).forEach(key=>{
+          const item=res.data[key]
+          data.push({name:item.BMSM,value:item.t})
+          total+=1
+        })
+        this.config.data=data
+        this.config.rowNum=total
+        this.show=true
+        this.execute()
+      })
+    },
+    execute(){
+      setTimeout(this.getData,30000)
+    }
   }
 }
 </script>

src/views/kban/comps/MainCq.vue

@@ -5,30 +5,57 @@
       总人数<span>{{totalPerson}}</span>人
     </div>
     <div class="chart-container">
-      <dv-active-ring-chart :config="config" />
+      <dv-active-ring-chart v-if="show" :config="config" />
     </div>
   </div>
 </template>
 
 <script>
+import {getKqData} from "@/api/kban";
+
 export default {
   name:'Cq',
   data () {
     return {
-      totalPerson:300,
+      show:false,
+      totalPerson:0,
       config: {
         radius: '60%',
         activeRadius: '63%',
-        data: [
+        data: [],
-          {name:'出勤',value:296},
-          {name:'请假',value:2},
-          {name:'缺勤',value:2}
-        ],
         digitalFlopStyle: {
           fontSize: 20
         }
       }
     }
+  },
+  mounted() {
+    // this.$socket.open()
+    // this.wsSubscribe()
+  },
+  created(){
+    this.getData();
+  },
+  sockets:{},
+  methods:{
+    getData(){
+      getKqData().then(res=>{
+        this.show=false
+        const data=[]
+        this.totalPerson=0
+        Object.keys(res.data).forEach(key=>{
+          const item=res.data[key]
+          data.push({name:key,value:item})
+          this.totalPerson+=item
+        })
+        this.config.data=data
+        this.show=true
+        this.execute()
+      })
+    },
+    execute(){
+      setTimeout(this.getData,30000)
+    }
   }
 }
 </script>

src/views/kban/comps/MainGeYueChanLiang.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="ycl">
     <div class="ycl__title">各月份产量(吨)</div>
-    <dv-conical-column-chart :config="config" />
+    <dv-conical-column-chart v-if="show" :config="config" />
   </div>
 </template>
 
 <script>
+import {getKqData, getQyfcl} from "@/api/kban";
+
 export default {
   name:'MainGeYueChanLiang',
   data(){
     return {
+      show:false,
       config:{
         showValue:true,
         data: [
@@ -17,41 +20,34 @@ export default {
             name: '1月',
             value: 71
           },
-          {
-            name: '2月',
-            value: 55
-          },
-          {
-            name: '3月',
-            value: 120
-          },
-          {
-            name: '4月',
-            value: 66
-          },
-          {
-            name: '5月',
-            value: 80
-          },
-          {
-            name: '6月',
-            value: 95
-          },
-          {
-            name: '7月',
-            value: 90
-          },
-          {
-            name: '8月',
-            value: 90
-          },
-          {
-            name: '9月',
-            value: 32
-          },
         ],
       }
     }
+  },
+  mounted() {
+    // this.$socket.open()
+    // this.wsSubscribe()
+  },
+  created(){
+    this.getData();
+  },
+  sockets:{},
+  methods:{
+    getData(){
+      getQyfcl().then(res=>{
+        this.show=false
+        const data=[]
+        for (const item of res.data) {
+          data.push({name:`${item.month}月`,value:item.t.toFixed(2)})
+        }
+        this.config.data=data
+        this.show=true
+        this.execute()
+      })
+    },
+    execute(){
+      setTimeout(this.getData,30000)
+    }
   }
 }
 </script>

src/views/kban/comps/MainYueChanLiang.vue

@@ -2,26 +2,59 @@
   <div class="ycl">
     <div class="ycl__title">本月计划完成情况</div>
     <div class="water-level-chart-details">
-      累计完成<span>6,800</span>吨
+      累计完成<span>{{dun}}</span>吨
     </div>
     <div class="chart-container">
-      <dv-water-level-pond :config="config" />
+      <dv-water-level-pond v-if="show" :config="config" />
     </div>
   </div>
 </template>
 
 <script>
+import {getJhwcqk} from "@/api/kban";
+
 export default {
   name:'MainYueChanLiang',
   data () {
     return {
+      show:false,
+      dun:0,
       config: {
-        data: [45],
+        data: [],
         shape: 'round',
         waveHeight: 25,
         waveNum: 2
       }
     }
+  },
+  mounted() {
+    // this.$socket.open()
+    // this.wsSubscribe()
+  },
+  created(){
+    this.getData();
+  },
+  sockets:{},
+  methods:{
+    getData(){
+      getJhwcqk().then(res=>{
+        this.show=false
+        let total=0
+        for (const item of res.data) {
+          if (item.zt==='62'){
+            this.dun=item.t.toFixed(2)
+          }
+          total+=item.t||0
+        }
+        const point=(this.dun/total*100).toFixed(2)
+        this.config.data=[point]
+        this.show=true
+        this.execute()
+      })
+    },
+    execute(){
+      setTimeout(this.getData,30000)
+    }
   }
 }
 </script>

src/views/kban/index.vue

@@ -48,7 +48,14 @@ export default {
   data () {
     return {}
   },
-  methods: {}
+  mounted(){
+    this.init()
+  },
+  methods: {
+    init(){
+      this.$store.dispatch('page/handler', true)
+    }
+  }
 }
 </script>