1.调整看板考勤

2.调整看板底部展示内容
3.取消看板摄像头展示,改为在建船只进度
4.增加看板左侧菜单

src/api/kban.js

@@ -1,5 +1,15 @@
 import request from '@/utils/request'
 
+/**
+ * 各垮船只完成情况
+ */
+export const getGcjd=function(){
+  return request({
+    url: '/kban/gcjd',
+    method: 'get',
+  })
+}
+
 /**
  * 各垮计划完成情况
  */

src/views/kban/comps/GxChanLiang.vue

@@ -42,19 +42,18 @@ export default {
   methods: {
     async getData() {
       const res=await getGkjhwcqk()
-      const {上料, 抛丸, 理料, 划线, 切割} = this.createData(res.data)
+      const {计划, 理料, 划线, 切割,预配盘} = this.createData(res.data)
       this.show = false
-      this.cards = [上料, 抛丸, 理料, 划线, 切割]
+      this.cards = [计划, 理料, 划线, 切割,预配盘]
       this.show = true
     },
     clear(){
-      console.log("本月计划完成情况停止加载数据")
       clearInterval(this.delay)
     },
     createData (list) {
       const data={
-        "上料": {
+        "计划": {
-          title: '上料',
+          title: '计划',
           total: {
             number: [0],
             content: '{nt}',
@@ -111,8 +110,8 @@ export default {
             color: ['#03d3ec']
           }
         },
-        "抛丸": {
+        "理料": {
-          title: '抛丸',
+          title: '理料',
           total: {
             number: [0],
             content: '{nt}',
@@ -169,8 +168,8 @@ export default {
             color: ['#03d3ec']
           }
         },
-        "理料": {
+        "划线": {
-          title: '理料',
+          title: '划线',
           total: {
             number: [0],
             content: '{nt}',
@@ -227,8 +226,8 @@ export default {
             color: ['#03d3ec']
           }
         },
-        "划线": {
+        "切割": {
-          title: '划线',
+          title: '切割',
           total: {
             number: [0],
             content: '{nt}',
@@ -285,8 +284,8 @@ export default {
             color: ['#03d3ec']
           }
         },
-        "切割": {
+        "预配盘": {
-          title: '切割',
+          title: '预配盘',
           total: {
             number: [0],
             content: '{nt}',
@@ -348,46 +347,46 @@ export default {
       let totalZl=0
       for (const item of list) {
         totalZl+=(item.bcshzl/1000)||0
-        if (!!item.slfkrq){
+        if (item.zt==='11'){
-          data.上料.total.number[0]+=1
+          if (!!item.sljhrq){
-          data.上料.num.number[0]+=(item.bcshzl/1000)||0
+            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){
+
+        if (item.zt>='42'&&!!item.llfkrq){
           data.理料.total.number[0]+=1
           data.理料.num.number[0]+=(item.bcshzl/1000)||0
         }
-        if (!!item.hxfkrq){
+        if (item.zt>='52'&&!!item.hxfkrq){
           data.划线.total.number[0]+=1
           data.划线.num.number[0]+=(item.bcshzl/1000)||0
         }
-        if (!!item.qgfkrq){
+        if (item.zt>='62'&&!!item.qgfkrq){
           data.切割.total.number[0]+=1
           data.切割.num.number[0]+=(item.bcshzl/1000)||0
         }
+
       }
-      let d1=data.上料.num.number[0]/totalZl*100
+      let d1=data.计划.num.number[0]/totalZl*100
       d1=d1>0&&d1<1?1:d1
-      data.上料.ring.series[0].data[0].value=parseFloat(d1.toFixed(2))
+      data.计划.ring.series[0].data[0].value=parseFloat(d1.toFixed(2))
 
-      let d2=data.上料.num.number[0]/totalZl*100
+      let d3=data.理料.num.number[0]/totalZl*100
-      d2=d2>0&&d2<1?1:d2
-      data.抛丸.ring.series[0].data[0].value=parseFloat(d2.toFixed(2))
-
-      let d3=data.上料.num.number[0]/totalZl*100
       d3=d3>0&&d3<1?1:d3
       data.理料.ring.series[0].data[0].value=parseFloat(d3.toFixed(2))
 
-      let d4=data.上料.num.number[0]/totalZl*100
+      let d4=data.划线.num.number[0]/totalZl*100
       d4=d4>0&&d4<1?1:d4
       data.划线.ring.series[0].data[0].value=parseFloat(d4.toFixed(2))
 
-      let d5=data.上料.num.number[0]/totalZl*100
+      let d5=data.切割.num.number[0]/totalZl*100
       d5=d5>0&&d5<1?1:d5
       data.切割.ring.series[0].data[0].value=parseFloat(d5.toFixed(2))
+
+      let d6=data.预配盘.num.number[0]/totalZl*100
+      d6=d6>0&&d6<1?1:d6
+      data.预配盘.ring.series[0].data[0].value=parseFloat(d5.toFixed(2))
       return data
     },
   },

src/views/kban/comps/MainChanLian.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chanlian">
-    <div class="chanlian__title">本月各垮产量(吨)</div>
+    <div class="chanlian__title">本月套料重量(吨)</div>
     <dv-scroll-ranking-board v-if="show" :config="config" />
   </div>
 </template>

src/views/kban/comps/MainCq.vue

@@ -45,10 +45,26 @@ export default {
         this.show=false
         const data=[]
         this.totalPerson=0
+        const keySize=Object.keys(res.data).length
         Object.keys(res.data).forEach(key=>{
+          if (key==='total'){
+            this.totalPerson=res.data[key]
+            if (keySize===1){
+              const item=res.data[key]
+              data.push({name:'总人数',value:item})
+            }
+            return
+          }
+          if (key==='rows'){
+            const item=res.data[key]
+            const 白班人数=item.filter(item=>item.zt==='01').length
+            const 二班人数=item.filter(item=>item.zt==='02').length
+            data.push({name:'白班',value:白班人数})
+            data.push({name:'二班',value:二班人数})
+            return
+          }
           const item=res.data[key]
           data.push({name:key,value:item})
-          this.totalPerson+=item
         })
         this.config.data=data
         this.show=true

src/views/kban/comps/MainGcjd.vue

@@ -0,0 +1,188 @@
+<template>
+  <div ref="gcjd" class="gcjd" id="gcjd"></div>
+</template>
+
+<script>
+import {getGcjd} from "@/api/kban";
+import echarts from 'echarts'
+
+export default {
+  name: "MainGcjd",
+  data(){
+    return {
+      myChart:null,
+      show:false,
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  created(){
+    this.delay=setInterval(this.getData,30000)
+  },
+  methods:{
+    getData(){
+      this.myChart = echarts.init(document.getElementById("gcjd"),null,{renderer: 'svg'})
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        legend: {
+          top: '3%',
+          show: true,
+          data: [ { name: '完成张数', }, { name: '未完成张数', } ],
+          textStyle: {
+            color: 'white'
+          },
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: { // 控制轴线是否显示
+            show: false
+          },
+          axisLabel: { // 控制轴标签是否显示
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          axisLine: { // 控制轴线是否显示
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 9, // 字体大小
+              color: 'white' // 字体颜色
+            },
+          },
+          data: []
+        },
+        series: [
+          {
+            name:'完成张数',
+            type: 'bar',
+            data: [20, 30, 15, 10],
+            stack: "总量",
+            label: {
+              show: true, // 显示标签
+              position: 'inside', // 标签位置
+              formatter: function(params) {
+                // params 是一个对象，包含数据的各种信息
+                // params.data 是当前项的数据值
+                // params.total 是所有项的总和
+                // 返回自定义的标签内容
+                // return (params.data/1).toFixed(2);
+                return ''
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  const colorList = ['green', 'green', 'green', 'green']
+                  return 'green'
+                }
+              }
+            }
+          },
+          {
+            name:'未完成张数',
+            type: 'bar',
+            data: [201, 301, 151, 101],
+            stack: "总量",
+            label: {
+              show: true, // 显示标签
+              position: 'inside', // 标签位置
+              formatter: function(params) {
+                // return (params.data/1).toFixed(2);
+                return ''
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  const colorList = ['blue', '#blue', 'blue', 'blue']
+                  return 'blue'
+                }
+              }
+            }
+          },
+          // {
+          //   type: 'bar',
+          //   data: [],
+          //   stack: "总量",
+          //   label: {
+          //     show: true, // 显示标签
+          //     position: 'right', // 标签位置
+          //     formatter: params => `${params.data}`
+          //   },
+          //   itemStyle: {
+          //     normal: {
+          //       color: function(params) {
+          //         const colorList = ['blue', '#blue', 'blue', 'blue']
+          //         return 'blue'
+          //       }
+          //     }
+          //   }
+          // }
+        ]
+      }
+
+      getGcjd().then(res=>{
+        const czbh=res.data.map(item=>item.dc_ch);
+        const complete=res.data.map(item=>item.complete);
+        const other=res.data.map(item=>item.total-item.complete);
+        const totalData=res.data.map(item=>item.total)
+        option.yAxis.data=czbh
+        option.series[0].data=complete
+        option.series[1].data=other
+
+        option.series.push({
+          name:'总张数',
+          type: 'bar',
+          stack: '总量',
+          itemStyle: {
+            color: 'white' // 透明颜色
+          },
+          label: {
+            show: true,
+            position: 'right',
+            formatter: function (params){
+              return `${totalData[params.dataIndex]}张`
+            }
+          },
+          data: totalData.map(value => 0.01)// 微小的值以便能显示标签但不影响图形
+        });
+
+        this.myChart.setOption(option)
+      })
+    },
+    clear(){
+      clearInterval(this.delay)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.gcjd{
+  width: 1470px;
+  height: 294px;
+  background: url('../../../assets/kban/videobg.png') no-repeat;
+  background-size: 1470px 100%;
+  margin-top: 14px;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+}
+</style>

src/views/kban/index.vue

@@ -6,7 +6,7 @@
       <div class="main-content">
         <div class="block-top-bottom-content">
           <Cq ref="cq" />
-          <MainVideo ref="manVideo" />
+          <MainGcjd ref="mainGcjd" />
         </div>
         <div class="block-left-right-content">
           <MainChanLian ref="mainChanLian" />
@@ -27,20 +27,20 @@
 import topHeader from './comps/topHeader'
 import Cq from "@/views/kban/comps/MainCq.vue";
 import Menu from "@/views/kban/comps/Menu.vue";
-import MainVideo from "@/views/kban/comps/MainVideo.vue";
 import MainChanLian from "@/views/kban/comps/MainChanLian.vue";
 import MainYueChanLiang from "@/views/kban/comps/MainYueChanLiang.vue";
 import MainGeYueChanLiang from "@/views/kban/comps/MainGeYueChanLiang.vue";
 import MainGxChanLiang from "@/views/kban/comps/GxChanLiang.vue";
+import MainGcjd from "@/views/kban/comps/MainGcjd.vue";
 
 export default {
   name: 'DataView',
   components: {
+    MainGcjd,
     MainGxChanLiang,
     MainGeYueChanLiang,
     MainYueChanLiang,
     MainChanLian,
-    MainVideo,
     Menu,
     Cq,
     topHeader,

src/views/zyjhzx/components/Container.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="container">
+    <el-menu mode="horizontal" style="width: 5%;height: 100vh;">
+      <el-menu-item>123</el-menu-item>
+      <el-menu-item>123</el-menu-item>
+      <el-menu-item>123</el-menu-item>
+      <el-menu-item>123</el-menu-item>
+    </el-menu>
+    <el-main>
+      <slot />
+    </el-main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Container",
+
+}
+</script>

src/views/zyjhzx/components/Drawer.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-drawer class="drawer" :visible.sync="drawer" :direction="direction" :withHeader="withHeader" @select="handleSelect">
+    <el-menu class="menu" mode="horizontal">
+      <el-menu-item class="menu-item">抛丸</el-menu-item>
+      <el-menu-item class="menu-item">理料</el-menu-item>
+      <el-menu-item class="menu-item">划线</el-menu-item>
+      <el-menu-item class="menu-item">切割</el-menu-item>
+    </el-menu>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: "Drawer",
+  data(){
+    return{
+      drawer:true,
+      direction:'ltr',
+      withHeader:false
+    }
+  },
+  methods:{
+    handleSelect(key,path){
+      console.log(key,path)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer{
+  width: 25%;
+  height: 100vh;
+
+  .menu{
+    width: 100%;
+    height: 100vh;
+    background-color: #002166;
+
+    .menu-item{
+      width: 90%;
+      text-align: center;
+      color: white;
+      margin: 5vh 5px;
+      background: #0d84ff url('../../../assets/kban/cqbg.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+  }
+}
+</style>

src/views/zyjhzx/pwanpgong/index.vue

@@ -4,6 +4,7 @@
     <PWanPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" :worker="getWorker" :workers="workers"/>
     <ZyjhSelectComp id="selectComp" ref="selRef"  @initWorkers="initWorkers"/>
     <TipsComp />
+    <Drawer />
   </div>
 </template>
 
@@ -18,10 +19,11 @@ import {getBzryList} from "@/api/sjzx/bzzGL";
 import {dict, getYcldw, shangLiao} from "@/api/zyjh";
 import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
 import TipsComp from "@/views/zyjhzx/components/TipsComp.vue";
+import Drawer from "@/views/zyjhzx/components/Drawer.vue";
 
 export default {
   name:'PWanPGong',
-  components: {TipsComp, ZyjhSelectComp, PWanPgd},
+  components: {Drawer, TipsComp, ZyjhSelectComp, PWanPgd},
   data(){
     return {
       title:'抛 丸 作 业 派 工',
@@ -149,5 +151,6 @@ export default {
 
 .container{
   background: #ddd;
+  height: 100vh;
 }
 </style>

src/views/zyjhzx/pwanpgong/index_bak.vue

@@ -0,0 +1,14 @@
+<template>
+  <Container>
+    <PWanPGong/>
+  </Container>
+</template>
+<script>
+import Container from "@/views/zyjhzx/components/Container.vue";
+import PWanPGong from "@/views/zyjhzx/pwanpgong/index.vue";
+
+export default {
+  name:"PWPG",
+  components: {Container,PWanPGong}
+}
+</script>