init 立库看板

src/router/index.js

@@ -1257,6 +1257,19 @@ export const powerRoutes = [
             name: '22kwkb',
             path: "22kwkb",
           },
+          {
+              component: 'ccgl/dpkb/lkkb/index',
+              hidden: false,
+              meta: {
+                "title": "立库看板",
+                "icon": "",
+                "noCache": false,
+                "link": null,
+                "mkid": 920150999,
+              },
+              name: 'lkkb',
+              path: "lkkb",
+            }
         ]
       }
 

src/views/ccgl/dpkb/lkkb/index.vue

+<template>
+  <div ref='lkkb' class="min_full dbAllBody  ">
+
+    <!-- 绝对定位展示框-->
+    <div ref="infoBox" class="infoCar">
+    </div>
+    <!-- 日期内容-->
+    <span class='kbtime'>{{newTime}}</span>
+    <!-- 标题-->
+    <div class="dbTitle">
+      <i class="title-left"><img src="./dimage/title-left.png"></i>
+      <p class="title-left-title-font">立库看板</p>
+      <i class="title-right"><img src="./dimage/title-right.png"></i>
+    </div>
+    <!-- 内容-->
+    <div class="dbBody ">
+      <!-- svg库位图-->
+      <div class="dbSvgtop flex">
+        <!-- 分五个巷道-->
+        <div class="xd flex-center ">
+          <div class="xdmx">
+            <div class="xdmxTitle">
+              1巷道
+            </div>
+            <div class="xdmxBody">
+              <div v-for="(item,index) in xdList1" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
+                xdmxBodymxSelected:selectIndex==item
+              }">
+                {{item}}
+              </div>
+
+            </div>
+          </div>
+        </div>
+        <div class="xd flex-center ">
+          <div class="xdmx">
+            <div class="xdmxTitle">
+              2巷道
+            </div>
+            <div class="xdmxBody">
+              <div v-for="(item,index) in xdList2" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
+               xdmxBodymxSelected:selectIndex==item
+             }">
+                {{item}}
+              </div>
+
+            </div>
+          </div>
+        </div>
+        <div class="xd flex-center ">
+          <div class="xdmx">
+            <div class="xdmxTitle">
+              3巷道
+            </div>
+            <div class="xdmxBody">
+              <div v-for="(item,index) in xdList3" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
+               xdmxBodymxSelected:selectIndex==item
+             }">
+                {{item}}
+              </div>
+
+            </div>
+          </div>
+        </div>
+        <div class="xd flex-center ">
+          <div class="xdmx">
+            <div class="xdmxTitle">
+              4巷道
+            </div>
+            <div class="xdmxBody">
+              <div v-for="(item,index) in xdList4" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
+                xdmxBodymxSelected:selectIndex==item
+              }">
+                {{item}}
+              </div>
+
+            </div>
+          </div>
+        </div>
+        <div class="xd flex-center ">
+          <div class="xdmx">
+            <div class="xdmxTitle">
+              5巷道
+            </div>
+            <div class="xdmxBody">
+              <div v-for="(item,index) in xdList5" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
+                xdmxBodymxSelected:selectIndex==item
+              }">
+                {{item}}
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="dbSvg">
+
+        <div  class="svgMain full data-box1">
+          <i class="topL"></i>
+          <i class="topR"></i>
+          <i class="bottomL"></i>
+          <i class="bottomR"></i>
+          <div class="data-title">
+            <b class="data-title-left">[</b>
+            <span>库位状态</span>
+            <b class="data-title-right">]</b>
+          </div>
+          <div class="kwMain full ">
+
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  /* svg集合*/
+
+  /* 双击全屏*/
+  function fullScreen(element) {
+    const elem = element || document.documentElement;
+    if (elem.webkitRequestFullScreen) {
+      elem.webkitRequestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+      elem.mozRequestFullScreen();
+    } else if (elem.requestFullScreen) {
+      elem.requestFullscreen();
+    } else if (elem.msExitFullscreen) {
+      elem.msExitFullscreen();
+    } else if (elem.msRequestFullscreen) {
+      elem.msRequestFullscreen();
+    } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
+      var wscript = new ActiveXObject("WScript.Shell");
+      if (wscript !== null) {
+        wscript.SendKeys("{F11}");
+      }
+    }
+  }
+  export default {
+    mounted() {
+
+
+      /* 测试时间*/
+      this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
+      this.timer = setInterval(() => {
+        this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
+      }, 1000)
+      /* 测试列表*/
+
+
+      this.$nextTick(() => {
+
+        $(this.$refs.lkkb).dblclick(() => {
+          fullScreen(this.$refs.lkkb);
+        })
+
+
+      })
+    },
+    computed: {
+
+    },
+    data() {
+      return {
+        /* 排列*/
+        xdList1: [1, 2, 3, 4],
+        xdList2: [5, 6, 7, 8],
+        xdList3: [9, 10, 11],
+        xdList4: [12, 13, 14],
+        xdList5: [15, 16, 17, 18],
+        selectIndex: 1,
+        newTime: 'loading',
+        timer: null
+      }
+    },
+    beforeDestroy() {
+      clearInterval(this.timer)
+    },
+    methods: {
+
+    },
+    components: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .kwMain{
+    padding: 20px;
+  }
+  .xd {
+    flex: 1;
+    padding: 10px;
+
+    .xdmx {
+      height: 80px;
+      width: 100%;
+      // background-color: #eee;
+      box-shadow: inset 0 0 13px #032d60;
+
+      .xdmxTitle {
+        color: rgb(131, 199, 227);
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-size: 20px;
+        font-weight: 800;
+      }
+
+      .xdmxBody {
+        padding: 3px;
+        color: rgb(131, 199, 227);
+        height: 40px;
+        line-height: 34px;
+        display: flex;
+        font-size: 17px;
+
+        .xdmxBodymx {
+
+          text-align: center;
+          cursor: pointer;
+
+        }
+      }
+    }
+  }
+
+  .xdmxBodymxSelected {
+    border: 1px solid #ffffff;
+    background-color: #83c7e3;
+    color: #fff;
+  }
+
+  .infoText {
+    color: #fff;
+    font-size: 19.6px;
+    font-weight: 600;
+  }
+
+  .infoMain {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    font-size: 16px;
+    padding-left: 15px;
+    border: 2px solid #032d60;
+    -webkit-box-shadow: #0fcaef 0px 0px 10px;
+    -moz-box-shadow: #0fcaef 0px 0px 10px;
+    box-shadow: inset 0 0 30px #0fcaef;
+
+  }
+
+  // .com-count-body {
+  //   font-size: .65vw;
+  //   height: calc(100% - 2vh);
+  //   width: 100%;
+  // }
+  .lbbt {
+    height: 4vh;
+    width: 100%;
+    font-size: .9vw;
+    display: flex;
+    line-height: 4vh;
+    color: #61d2f7;
+  }
+
+  .lbbody {
+    height: calc(100% - 4vh);
+  }
+
+  .lbbody div {
+    flex: 1;
+    line-height: 25px;
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .infoCar {
+    border: 2px solid #032d60;
+    -webkit-box-shadow: #07417a 0px 0px 10px;
+    -moz-box-shadow: #07417a 0px 0px 10px;
+    box-shadow: inset 0 0 30px #07417a;
+    display: none;
+    position: absolute;
+    z-index: 9999;
+    background-color: #01172a;
+    color: #009ae7;
+    font-size: 13px;
+    padding: 10px;
+    right: 10px;
+    top: 10px;
+    line-height: 16px;
+    height: 106px;
+    width: 130px
+  }
+
+  .mktitle {
+    line-height: 35px;
+    font-size: 16px;
+    color: #83c7e3;
+    font-weight: 600;
+    height: 35px;
+    position: relative;
+    overflow: hidden
+  }
+
+  .mktitle img {
+    height: 15px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+
+  .mktitle span {
+    line-height: 35px;
+  }
+
+  .min_full {
+    border: 0;
+  }
+
+  .dbAllBody {
+    background-image: url('./dimage/data08.png');
+    background-size: 100% 100%;
+  }
+
+  .dbTitle {
+    height: 70px;
+    width: 100%;
+    position: relative;
+
+    .title-left {
+      top: 12px;
+      position: absolute;
+      left: 13vw;
+    }
+
+    .title-right {
+      top: 12px;
+      position: absolute;
+      right: 13vw;
+    }
+
+    .title-left-title-font {
+      text-align: center;
+      width: 42vw;
+      display: block;
+      margin: 0 auto;
+      background: -webkit-linear-gradient(top, #fff, #65c4f1);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 2.2vw;
+      font-weight: 700;
+      line-height: 70px;
+      letter-spacing: 2px;
+    }
+  }
+
+  .dbBody {
+    padding-top: 2px;
+    height: calc(100% - 70px);
+    width: 100%;
+  }
+
+  .dbSvgtop {
+    height: 130px;
+    width: 100%;
+    padding: 20px;
+  }
+
+  .dbSvg {
+    height: calc(100% - 130px);
+    width: 100%;
+    padding: 20px;
+
+    .svgMain {
+      position: relative;
+
+    }
+
+  }
+
+
+  .topL {
+    width: 20px;
+    height: 20px;
+    border-top-width: 2px;
+    border-top-color: #26c6f0;
+    border-top-style: solid;
+    border-left-width: 2px;
+    border-left-color: #26c6f0;
+    border-left-style: solid;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+  }
+
+  .topR {
+    width: 20px;
+    height: 20px;
+    border-top-width: 2px;
+    border-top-color: #26c6f0;
+    border-top-style: solid;
+    border-right-width: 2px;
+    border-right-color: #26c6f0;
+    border-right-style: solid;
+    position: absolute;
+    top: -2px;
+    right: -2px;
+  }
+
+  .bottomL {
+    width: 20px;
+    height: 20px;
+    border-bottom-width: 2px;
+    border-bottom-color: #26c6f0;
+    border-bottom-style: solid;
+    border-left-width: 2px;
+    border-left-color: #26c6f0;
+    border-left-style: solid;
+    position: absolute;
+    bottom: -2px;
+    left: -2px;
+  }
+
+  .bottomR {
+    width: 20px;
+    height: 20px;
+    border-bottom-width: 2px;
+    border-bottom-color: #26c6f0;
+    border-bottom-style: solid;
+    border-right-width: 2px;
+    border-right-color: #26c6f0;
+    border-right-style: solid;
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+  }
+
+  .data-title {
+    background-color: #000c3b;
+    width: 154px;
+    margin: -14px auto 0 auto;
+    color: #83c7e3;
+    font-size: 20px;
+    letter-spacing: 2px;
+    font-weight: 600
+  }
+
+  .data-title span {
+    margin: 0 15px;
+  }
+
+  .data-title-left,
+  .data-title-right {
+    color: #105eda;
+  }
+
+  .data-box1 {
+    border: 2px solid #032d60;
+    -webkit-box-shadow: #07417a 0px 0px 10px;
+    -moz-box-shadow: #07417a 0px 0px 10px;
+    box-shadow: inset 0 0 30px #07417a;
+    /*position: relative;*/
+  }
+
+  .dbTable {
+    width: 100%;
+    padding: 10px;
+    height: 50%;
+    padding-left: 5px;
+  }
+
+  .dbCharts {
+    width: 100%;
+    height: 50%;
+    display: flex;
+  }
+
+  .dbChart1 {
+    flex: 1;
+    padding: 5px;
+  }
+
+  .dbChart2 {
+    flex: 1;
+    padding: 5px;
+  }
+
+  .kbtime {
+    position: absolute;
+    font-size: 1.2vw;
+    color: #fff;
+    right: 20px;
+    top: 20px;
+  }
+
+  .font-sd {
+    font-family: 微软雅黑;
+    text-shadow: #00d8ff 0 0 25.9455px;
+  }
+</style>