1.临时提交

src/views/hbao/index.vue

@@ -70,7 +70,7 @@ export default {
   height: 100%;
   background-color: #030409;
   color: #fff;
-  background-image: url('../kban/img/bg.png');
+  background-image: url('../kban/img/bg_bak.png');
   background-size: 100% 100%;
   box-shadow: 0 0 3px blue;
   display: flex;

src/views/kban/comps/GxChanLiang.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="ycl">
+    <template v-for="(item,index) in gxNames">
+      <div class="gxcl">
+        <div class="gxcl__title">{{item}}</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'MainGxChanLiang',
+  data(){
+    return {
+      gxNames:['上料','抛丸','理料','划线','切割']
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ycl{
+  width: 1470px;
+  height: 342px;
+  background: url('../../../assets/kban/yclbg.png') no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+
+  .gxcl{
+    width: 278px;
+    height: 300px;
+    background: url('../../../assets/kban/yclbg.png') no-repeat;
+    background-size: 100% 100%;
+
+    .gxcl__title{
+      width: 231px;
+      height: 41px;
+      background: url('../../../assets/kban/cltitle.png') no-repeat;
+      background-size: 100% 100%;
+      font-weight: bold;
+      font-size: 20px;
+      padding: 12px 26px;
+      margin-left: 25px;
+    }
+  }
+
+}
+</style>
+

src/views/kban/comps/MainChanLian.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="chanlian">
+    <div class="chanlian__title">本月各垮产量(吨)</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MainChanLian",
+}
+</script>
+
+<style scoped>
+.chanlian{
+  width: 369px;
+  height: 688px;
+  background: url('../../../assets/kban/clbg.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 41px;
+  text-align: center;
+
+  .chanlian__title{
+    width: 231px;
+    height: 41px;
+    background: url('../../../assets/kban/cltitle.png') no-repeat;
+    background-size: 100% 100%;
+    font-weight: bold;
+    font-size: 20px;
+    padding: 12px 26px;
+    margin-left: 71px;
+  }
+}
+</style>

src/views/kban/comps/MainCq.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="cq">
+    <div class="cq__title">出勤情况</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'Cq'
+}
+</script>
+
+<style scoped>
+.cq{
+  width: 369px;
+  height: 294px;
+  background: url('../../../assets/kban/cqbg.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 41px;
+  margin-top: 14px;
+  text-align: center;
+
+  .cq__title{
+    width: 231px;
+    height: 41px;
+    background: url('../../../assets/kban/cltitle.png') no-repeat;
+    background-size: 100% 100%;
+    font-weight: bold;
+    font-size: 20px;
+    padding: 12px 26px;
+    margin-left: 71px;
+  }
+}
+</style>

src/views/kban/comps/MainGeYueChanLiang.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="ycl">
+    <div class="ycl__title">各月份产量(吨)</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'MainGeYueChanLiang'
+}
+</script>
+
+<style scoped>
+.ycl{
+  width: 1070px;
+  height: 342px;
+  background: url('../../../assets/kban/gyclbg.png') no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+
+  .ycl__title{
+    width: 231px;
+    height: 41px;
+    background: url('../../../assets/kban/cltitle.png') no-repeat;
+    background-size: 100% 100%;
+    font-weight: bold;
+    font-size: 20px;
+    padding: 12px 26px;
+    margin-left: 425px;
+  }
+}
+</style>
+

src/views/kban/comps/MainVideo.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="video">
+    <div class="video-info">
+      <div class="webcam">
+        <img src="../../../assets/kban/webcam.png"  alt=""/>
+        <span class="title">01</span>
+      </div>
+      <img src="../../../assets/kban/无视频.png"  alt=""/>
+    </div>
+    <div class="video-info">
+      <div class="webcam">
+        <img src="../../../assets/kban/webcam.png"  alt=""/>
+        <span class="title">02</span>
+      </div>
+      <img src="../../../assets/kban/无视频.png"  alt=""/>
+    </div>
+    <div class="video-info">
+      <div class="webcam">
+        <img src="../../../assets/kban/webcam.png"  alt=""/>
+        <span class="title">03</span>
+      </div>
+      <img src="../../../assets/kban/无视频.png"  alt=""/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MainVideo",
+}
+</script>
+
+<style scoped>
+.video{
+  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;
+
+  .video-info{
+    border: 1px solid #0d84ff;
+    width: 464px;
+    height: 245px;
+    background: #001846;
+    margin: 25px 0 0 19px;
+    padding: 74px 180px;
+    position: relative;
+
+    .webcam{
+      position: absolute;
+      top:12px;
+      left: 17px;
+
+      img{
+        width: 16px;
+        height: 21px;
+      }
+
+      span{
+        font-size: 16px;
+        line-height: 21px;
+        margin-left: 3px;
+      }
+    }
+  }
+}
+</style>

src/views/kban/comps/MainYueChanLiang.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="ycl">
+    <div class="ycl__title">计划完成情况</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'MainYueChanLiang'
+}
+</script>
+
+<style scoped>
+.ycl{
+  width: 396px;
+  height: 342px;
+  background: url('../../../assets/kban/yclbg.png') no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+
+  .ycl__title{
+    width: 231px;
+    height: 41px;
+    background: url('../../../assets/kban/cltitle.png') no-repeat;
+    background-size: 100% 100%;
+    font-weight: bold;
+    font-size: 20px;
+    padding: 12px 26px;
+    margin-left: 85px;
+  }
+}
+</style>
+

src/views/kban/comps/Menu.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="menu">
+    <img class="ico" src="../../../assets/kban/收起.png" alt="">
+    <div class="title" @click="menuClick">主菜单</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Menu",
+  data(){
+    return{
+      showMenu:false
+    }
+  },
+  methods:{
+    menuClick(){
+      this.menuControl()
+    },
+    menuControl(){
+      this.showMenu=!this.showMenu;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.menu{
+  width: 43px;
+  height: 100vh;
+  background: url('../../../assets/kban/menu.png') no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 2px;
+  left: 1px;
+  text-align: center;
+
+  .ico {
+    width: 19px;
+    height: 17px;
+    position: absolute;
+    top:39%;
+    left: 25%;
+  }
+
+  .title{
+    font-weight: bold;
+    font-size: 24px;
+    position: absolute;
+    top:44%;
+    text-align: center;
+    vertical-align: center;
+  }
+}
+</style>

src/views/kban/comps/topHeader.vue

@@ -1,8 +1,5 @@
 <template>
   <div id="top-header">
-    <dv-decoration-8 class="header-left-decoration" />
-    <dv-decoration-5 class="header-center-decoration" />
-    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
     <div class="center-title">{{ title }}</div>
   </div>
 </template>
@@ -23,29 +20,20 @@ export default {
 #top-header {
   position: relative;
   width: 100%;
-  height: 100px;
+  height: 60px;
   display: flex;
   justify-content: space-between;
   flex-shrink: 0;
-
+  background: url('../../../assets/kban/logo.png') no-repeat;
-  .header-center-decoration {
+  background-size: 86% 100%;
-    width: 40%;
-    height: 60px;
-    margin-top: 30px;
-  }
-
-  .header-left-decoration, .header-right-decoration {
-    width: 25%;
-    height: 60px;
-  }
 
   .center-title {
-    position: absolute;
+    width: 100%;
-    font-size: 30px;
+    height: 60px;
+    text-align: center;
+    font-size: 32px;
     font-weight: bold;
-    left: 50%;
+    line-height: 60px;
-    top: 15px;
-    transform: translateX(-50%);
   }
 }
 </style>

src/views/kban/index.vue

@@ -2,18 +2,17 @@
   <div id="data-view">
     <dv-full-screen-container>
       <top-header />
+<!--      <Menu />-->
       <div class="main-content">
-        <digital-flop />
+        <div class="block-top-bottom-content">
-        <div class="block-left-right-content">
+          <Cq />
-          <ranking-board />
+          <MainVideo />
-          <div class="block-top-bottom-content">
+        </div>
-            <div class="block-top-content">
+        <div class="block-mid-bottom-content">
-              <rose-chart />
+          <MainChanLian />
-              <water-level-chart />
+          <MainYueChanLiang />
-              <scroll-board />
+          <MainGeYueChanLiang />
-            </div>
+          <MainGxChanLiang />
-            <cards />
-          </div>
         </div>
       </div>
     </dv-full-screen-container>
@@ -22,23 +21,25 @@
 
 <script>
 import topHeader from './comps/topHeader'
-import digitalFlop from './comps/digitalFlop'
+import Cq from "@/views/kban/comps/MainCq.vue";
-import rankingBoard from './comps/rankingBoard'
+import Menu from "@/views/kban/comps/Menu.vue";
-import roseChart from './comps/roseChart'
+import MainVideo from "@/views/kban/comps/MainVideo.vue";
-import waterLevelChart from './comps/waterLevelChart'
+import MainChanLian from "@/views/kban/comps/MainChanLian.vue";
-import scrollBoard from './comps/scrollBoard'
+import MainYueChanLiang from "@/views/kban/comps/MainYueChanLiang.vue";
-import cards from './comps/cards'
+import MainGeYueChanLiang from "@/views/kban/comps/MainGeYueChanLiang.vue";
+import MainGxChanLiang from "@/views/kban/comps/GxChanLiang.vue";
 
 export default {
   name: 'DataView',
   components: {
+    MainGxChanLiang,
+    MainGeYueChanLiang,
+    MainYueChanLiang,
+    MainChanLian,
+    MainVideo,
+    Menu,
+    Cq,
     topHeader,
-    digitalFlop,
-    rankingBoard,
-    roseChart,
-    waterLevelChart,
-    scrollBoard,
-    cards
   },
   data () {
     return {}
@@ -48,46 +49,31 @@ export default {
 </script>
 
 <style lang="less">
+
 #data-view {
   width: 100%;
-  height: 100%;
+  height: 100vh;
-  background-color: #030409;
   color: #fff;
 
   #dv-full-screen-container {
-    background-image: url('img/bg.png');
+    background: #002166 url('../../assets/kban/bg.png') no-repeat;
     background-size: 100% 100%;
     box-shadow: 0 0 3px blue;
     display: flex;
     flex-direction: column;
   }
 
-  .main-content {
+  .block-top-bottom-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .block-left-right-content {
     flex: 1;
     display: flex;
-    margin-top: 20px;
+    flex-direction: row;
   }
 
-  .block-top-bottom-content {
+  .block-mid-bottom-content {
     flex: 1;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    box-sizing: border-box;
-    padding-left: 20px;
   }
 
-  .block-top-content {
-    height: 55%;
-    display: flex;
-    flex-grow: 0;
-    box-sizing: border-box;
-    padding-bottom: 20px;
-  }
 }
 </style>

src/views/kban/index.vue_bak

@@ -0,0 +1,93 @@
+<template>
+  <div id="data-view">
+    <dv-full-screen-container>
+      <top-header />
+      <div class="main-content">
+        <digital-flop />
+        <div class="block-left-right-content">
+          <ranking-board />
+          <div class="block-top-bottom-content">
+            <div class="block-top-content">
+              <rose-chart />
+              <water-level-chart />
+              <scroll-board />
+            </div>
+            <cards />
+          </div>
+        </div>
+      </div>
+    </dv-full-screen-container>
+  </div>
+</template>
+
+<script>
+import topHeader from './comps/topHeader'
+import digitalFlop from './comps/digitalFlop'
+import rankingBoard from './comps/rankingBoard'
+import roseChart from './comps/roseChart'
+import waterLevelChart from './comps/waterLevelChart'
+import scrollBoard from './comps/scrollBoard'
+import cards from './comps/cards'
+
+export default {
+  name: 'DataView',
+  components: {
+    topHeader,
+    digitalFlop,
+    rankingBoard,
+    roseChart,
+    waterLevelChart,
+    scrollBoard,
+    cards
+  },
+  data () {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less">
+#data-view {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+
+  #dv-full-screen-container {
+    background-image: url('img/bg.png');
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .block-left-right-content {
+    flex: 1;
+    display: flex;
+    margin-top: 20px;
+  }
+
+  .block-top-bottom-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+
+  .block-top-content {
+    height: 55%;
+    display: flex;
+    flex-grow: 0;
+    box-sizing: border-box;
+    padding-bottom: 20px;
+  }
+}
+</style>

src/views/zyjhzx/sliao/comps/baifang.js

@@ -1,5 +1,4 @@
 import Konva from "konva";
-import {daoduo} from "@/api/zyjh";
 
 const baifang=function (option={}) {
   const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')

src/views/zyjhzx/sliao/comps/container.js

@@ -13,6 +13,21 @@ const container=function (width=0,height=0,container){
   stage.add(layer)
   // layer.draw();
 
+  const imageObj = new Image();
+  const imgSize=width
+  imageObj.src = require('@/assets/kban/bg.png');
+  imageObj.onload = function () {
+    const shape = new Konva.Image({
+      x: 0,
+      y: 0,
+      width: imgSize,
+      height:this.height,
+      image: imageObj,
+    });
+    layer.add(shape)
+    shape.zIndex(0)
+  }
+
   return {
     stage,layer
   }

src/views/zyjhzx/sliao/comps/sljh.js

@@ -10,7 +10,20 @@ export const sljh=function (width,height){
   layer.clipFunc(function(ctx) {
     ctx.rect(0, 0, width-30, height*0.2-60);
   });
-  //layer.draw()
+
+  const imageObj = new Image();
+  imageObj.src = require('@/assets/sliao/sljhbg.png');
+  imageObj.onload = function () {
+    const shape = new Konva.Image({
+      x: 0,
+      y: 0,
+      width: width-30,
+      height:189,
+      image: imageObj,
+    });
+    layer.add(shape)
+    shape.zIndex(0)
+  }
 
   const group=new Konva.Group({
     x:0,
@@ -26,6 +39,7 @@ export const sljh=function (width,height){
     },
   });
   layer.add(group)
+  group.zIndex(2)
 
   return {
     layer,group

src/views/zyjhzx/sliao/comps/title.js

@@ -1,18 +1,40 @@
 import Konva from "konva";
 
 const title=function (width,height,title) {
-  return new Konva.Text({
+  const group=new Konva.Group({
+    x: 0,
+    y: 8,
+    width: width,
+    height: 20,
+  })
+
+  const imageObj = new Image();
+  imageObj.src = require('@/assets/kban/logo.png');
+  imageObj.onload = function () {
+    const shape = new Konva.Image({
+      x: 0,
+      y: 0,
+      width: width*0.86,
+      height:41,
+      image: imageObj,
+    });
+    group.add(shape)
+  }
+
+  const text=new Konva.Text({
     x: 0,
     y: 8,
     width: width,
     height: 20,
-    lineHeight: 1,
-    stroke: 'blue',
-    strokeWidth: 2,
     text: title,
     align: 'center',
+    fill:'#fff',
     fontSize: 32,
+    fontStyle:'bold'
   })
+  group.add(text)
+
+  return group
 }
 
 export default title

src/views/zyjhzx/sliao/index.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import Konva from "konva";
 import container from "@/views/zyjhzx/sliao/comps/container";
 import drawTitle from "@/views/zyjhzx/sliao/comps/title";
 import initSearch from "@/views/zyjhzx/sliao/comps/search";
@@ -14,7 +15,7 @@ import workers from "@/views/zyjhzx/sliao/comps/person";
 import SliaoSearch from "@/views/zyjhzx/sliao/comps/SliaoSearch.vue";
 import liliao from "@/views/zyjhzx/sliao/comps/liliao";
 import baifang from "@/views/zyjhzx/sliao/comps/baifang";
-import {getSljhPgd, getTlt, getYcldw, shangLiao} from "@/api/zyjh";
+import {getSljhPgd, getYcldw, shangLiao} from "@/api/zyjh";
 import {formatTlt} from "@/views/zyjhzx/sliao/comps/utils";
 import {getBzryList} from "@/api/sjzx/bzzGL";
 
@@ -158,25 +159,23 @@ export default {
                     that.sljhItemList.splice(this.getAttr('index'),1)
                     that.sljhGroup.destroyChildren()
                     that.drawSljhItem(that.sljhItemList)
-                    _sljhGroup.draggable(true)
                   }else{
                     this.remove()
                     _that.visible(true)
                   }
+                  _sljhGroup.draggable(true)
                 })
                 tmpGroup.startDrag()
                 _that.visible(false)
               }
             }
-            if (movingFlag){
-
-            }
           },500)
         })
 
         qyGroup.on('touchend',function (){
           touchingFlag=false;
           this.draggable(false)
+          _sljhGroup.draggable(true)
         })
 
         const rect=new Konva.Rect({
@@ -230,8 +229,9 @@ export default {
       this.stage=stage
       this.layer=layer
 
-      const titel=drawTitle(this.width,this.height,this.title)
+
-      this.layer.add(titel)
+      const title=drawTitle(this.width,this.height,this.title)
+      this.layer.add(title)
 
       const {group}=initSearch()