次元看板--增加仓库看板，以及登录密码加密传输

src/assets/scss/indexwarehouse.scss

@@ -0,0 +1,148 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+  
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../../assets/pageBg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 26px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
+      font-size: 18px;
+      width: 120px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 20px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+      background-color: #0f1325;
+
+      .react-left {
+        position: absolute;
+        left: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #1a5cd7;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+     /* .content-box {
+        display: grid;
+        grid-template-columns: 1.5fr 1.3fr 1.2fr;
+      }*/
+      .content-box {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+
+      // 底部数据
+      .bottom-box {
+       // margin-top: 10px;
+        display: grid;
+        grid-template-columns: 2.8fr 1.2fr ;
+      }
+    }
+  }
+}

src/router/index.js

@@ -42,6 +42,14 @@ const routes = [{
     title: "品质看板",
     requireAuth: true // 标识该路由是否需要登录
   }
+},{
+  path: '/warehouse',
+  name: 'warehouse',
+  component: () => import('../views/warehouse/index.vue'),
+  meta: {
+    title: "仓库看板",
+    requireAuth: true // 标识该路由是否需要登录
+  }
 }]
 const router = new VueRouter({
   routes

src/views/login.vue

@@ -76,6 +76,7 @@
                     {label: '车间看板', value: '车间看板'},
                     {label: '产线看板', value: '产线看板'},
                     {label: '品质看板', value: '品质看板'},
+                    {label: '仓库看板', value: '仓库看板'},
                    /* {label: '设备看板', value: '设备看板'}*/
                 ],
                 factoryoptions:[],  //产区
@@ -137,7 +138,7 @@
                         this.$http.get("kanban/login.action",{
                                 params:{
                                     username:this.loginForm.username,
-                                    password:this.loginForm.password,
+                                    password:CryptoJS.AES.encrypt(this.loginForm.password, "123456"), //密码加密传递
                                     sob:this.loginForm.sob,
                                     type:this.loginForm.type,
                                     factory:this.loginForm.factory
@@ -153,6 +154,8 @@
                                         this.$router.push({path: this.redirect || '/shop'});
                                     }else if(this.loginForm.type =='品质看板'){
                                         this.$router.push({path: this.redirect || '/quality'});
+                                    }else if(this.loginForm.type =='仓库看板'){
+                                      this.$router.push({path: this.redirect || '/warehouse'});
                                     }
                                 }else{
                                     this.$message.error(res.reason);
@@ -184,7 +187,7 @@
              //登录成功返回session
              sessionStorage.setItem('x-access-token', res.token);
              sessionStorage.setItem('username',this.loginForm.username);
-             sessionStorage.setItem('password',this.loginForm.password);
+             sessionStorage.setItem('password',CryptoJS.AES.encrypt(this.loginForm.password, "123456"));
              sessionStorage.setItem('sob',this.loginForm.sob);
              this.$store.commit('setUser',this.loginForm);
              this.$store.commit('setFactoryOptions',this.factoryoptions);

src/views/prodline/index.vue

@@ -49,6 +49,7 @@
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item class="dropdownitem"><router-link to="shop">车间看板</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="quality">品质看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="warehouse">仓库看板</router-link></el-dropdown-item>
 <!--                    <el-dropdown-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->
                   </el-dropdown-menu>
               </el-dropdown>

src/views/quality/index.vue

@@ -50,6 +50,7 @@
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item class="dropdownitem"><router-link to="shop">车间看板</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="prodline">产线看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="warehouse">仓库看板</router-link></el-dropdown-item>
 <!--                    <el-dropdown-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->
                   </el-dropdown-menu>
               </el-dropdown>

src/views/shop/index.vue

@@ -49,6 +49,7 @@
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item class="dropdownitem"><router-link to="prodline">产线看板</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="quality">品质看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="warehouse">仓库看板</router-link></el-dropdown-item>
 <!--                    <el-dropdown-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->
                   </el-dropdown-menu>
               </el-dropdown>

src/views/warehouse/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <div id="index" ref="appRef">
+    <div class="bg">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <div class="d-flex jc-center">
+          <dv-decoration-10 class="dv-dec-10" />
+          <div class="d-flex jc-center">
+            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
+            <div class="title">
+              <span class="title-text">Emdoor可视化平台</span>
+              <dv-decoration-6
+                class="dv-dec-6"
+                :reverse="true"
+                :color="['#50e3c2', '#67a1e5']"
+              />
+            </div>
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="decorationColor"
+            />
+          </div>
+          <dv-decoration-10 class="dv-dec-10-s" />
+        </div>
+
+        <!-- 第二行 -->
+        <div class="d-flex jc-between px-2">
+          <div class="d-flex aside-width">
+            <div class="react-left ml-4 react-l-s bg-color-blue">
+              <span class="react-left"></span>
+              <span class="text fw-b" style="font-size:24px;">次元之造智能工厂</span>
+            </div>
+            <div class="react-left ml-3">
+              <span class="text">生产实况分析</span>
+            </div>
+          </div>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-r mr-3">
+              <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen"  style="display: none">退出全屏</span>
+            </div>
+            <div class="react-right mr-4 react-l-s" style="width: 900px">
+              <span class="react-after"></span>
+              <el-dropdown class="dropdown">
+                <span class="el-dropdown-link" ref="echarType">
+                  仓库看板<i class="el-icon-arrow-down el-icon--right"></i>&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item class="dropdownitem"><router-link to="prodline">产线看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="shop">车间看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="quality">品质看板</router-link></el-dropdown-item>
+<!--                    <el-dropdown-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->
+                  </el-dropdown-menu>
+              </el-dropdown>
+
+<!--              <el-select v-model="factory" class="dropdown" @change ="handleBlur" style="width:80px">
+                <el-option
+                    v-for="item in factoryoptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                ></el-option>
+              </el-select>
+
+              <el-select v-model="ulcode" class="dropdown" @change ="handleBlur2" style="width: 150px">
+                <el-option
+                    v-for="item in uldata"
+                    :key="item.UL_CODE"
+                    :label="item.UL_NAME"
+                    :value="item.UL_CODE"
+                ></el-option>
+              </el-select>-->
+
+              <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="body-box">
+          <!-- 上面 -->
+          <div class="content-box">
+              <div>
+                <dv-border-box-12>
+                  <up1 />
+                </dv-border-box-12>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import drawMixin from "../../utils/drawMixin";
+import  common  from '../../utils/common';
+import {formatTime} from '../../utils/index.js'
+import up1 from './up1'
+import {mapMutations, mapState} from "vuex"
+
+export default {
+  mixins: [ drawMixin,common ],
+  computed: {
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      timing: null,
+      timing2: null,
+      timing3: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+      decorationColor: ['#568aea', '#000000'],
+      ulcode:'',
+      uldata:[]
+    }
+  },
+  components: {
+    up1
+  },
+  created() {
+    // this.getuldata();
+  },
+  mounted() {
+    this.timeFn()
+    this.cancelLoading()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing);
+    clearInterval(this.timing2);
+  },
+  methods: {
+    ...mapMutations(['setFactory']),
+    timeFn() {
+      this.timing = setInterval(() => {
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
+        this.dateWeek = this.weekday[new Date().getDay()]
+      }, 1000);
+      //定时获取厂区,大线
+      /*this.timing2 = setInterval(() => {
+        this.getFactory();
+        this.getuldata();
+      }, 300000);*/ //5分钟一次
+      /*this.$store.commit('setFactoryOptions',this.factoryoptions);
+      this.$store.commit('setFactory',this.loginForm.factory);*/
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 1000)
+    },
+    handleBlur (val){
+      this.setFactory(val);
+      location.reload();
+    },
+    handleBlur2 (val){
+      sessionStorage.setItem('ul_code',val);
+      this.$cookie.set("ul_code", val, {
+        expires: 30,
+      });
+      location.reload();
+    },
+    getuldata (){
+      this.$http.get("kanban/getUlDataByFactory.action",{
+        params: {
+          fa_name: this.factory
+        }
+      }).then( (res)=>{
+                if(res.data.uldata) {
+                  const data = res.data.uldata;
+                  if(this.$cookie.get("ul_code") && data.some(item => item.UL_CODE === this.$cookie.get("ul_code")) ){
+                    sessionStorage.setItem('ul_code', this.$cookie.get("ul_code"));
+                  }else {
+                    sessionStorage.setItem('ul_code', data[0].UL_CODE);
+                    this.$cookie.set("ul_code", data[0].UL_CODE, {
+                      expires: 30,
+                    });
+                  }
+                  this.uldata = data;
+                }else{
+                  sessionStorage.setItem('ul_code','');
+                  this.uldata = [];
+                }
+                this.ulcode = sessionStorage.getItem("ul_code");
+              },(result)=>{
+                console.error(result)
+              });
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/indexwarehouse.scss';
+.dropdown{
+  font-size: 18px;
+  color: #568aea;
+  transform: skewX(45deg);
+  ::v-deep .el-select-dropdown {
+    /* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
+    // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */
+    border: 1px solid #0f1325;
+    background: #04308D !important;
+  }
+
+  ::v-deep .el-input__inner {
+    background-color: #0f1325;
+    color: #fff;
+    border: 1px solid #0f1325;
+  }
+
+  .el-select-dropdown__item {
+    color: #fff;
+    background-color: #0f1325;
+  }
+  ::v-deep .el-select-dropdown {
+    background-color: transparent;
+    border: 1px solid #0f1325;
+  }
+  ::v-deep.el-select-dropdown__list {
+    padding: 0;
+  }
+  ::v-deep.el-popper[x-placement^="bottom"] {
+    margin-top: 0px;
+  }
+  ::v-deep.el-popper .popper__arrow,
+  ::v-deep.el-popper .popper__arrow::after {
+    display: none;
+  }
+  .el-select-dropdown__item:hover {
+    background-color: rgba(0, 225, 219, 0.690196078431373);
+  }
+}
+
+</style>

src/views/warehouse/up1.vue

@@ -0,0 +1,136 @@
+<template>
+  <div id="up1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2 jc-center pb-2">
+        <span class="fs-xxl text mx-2 fw-b">已备料未上线数据</span>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+  data() {
+    return {
+      config: {
+        header: [],//['线别','生产工单', '机型', '订单数', '备料状态', '计划投入', '计划完成', '计划工时', '加班工时', '提醒事项'],
+        data: [],
+        rowNum: 15, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [],//[130,190, 180, 100, 100, 100, 100, 100, 100, 160],
+        align: []//['center','left','left','left','left','center','center','center','center']
+      },
+      timing: null,
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy() {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+
+    async getdata() {
+      var caller = 'KB!WHData';
+      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
+        params: {
+          condition: "1=1" ,
+        }
+      }).then((result) => {
+               let columns = result.data.columns;
+               let headers = new Array();
+               let columnWidths = new Array();
+               let fieldnames = new Array();
+               let aligns = new Array();
+               for (let index = 0; index < columns.length; index++) {
+                 const element = columns[index];
+                 if(element.width>0) {
+                   headers.push(element.text);
+                   columnWidths.push(element.width);
+                   fieldnames.push(element.dataIndex);
+                   aligns.push('center');
+                 }
+               }
+               this.config.header = headers;
+               this.config.columnWidth = columnWidths;
+               this.config.align = aligns;
+
+                let dataList = JSON.parse(result.data.data);
+                let resultList = new Array();
+                for (let index = 0; index < dataList.length; index++) {
+                  const element = dataList[index];
+                  let item = new Array();
+                  fieldnames.forEach(function (ele) {
+                    // 遍历数组，对每个元素进行操作
+                    item.push("<span  class='colorGrass fs-lg'>" + element[ele] + "</span>");
+                  });
+
+                 /* if (element.v_blstatus == '未领料') {  //98%
+                    item.push("<span  class='colorRemind fs-lgmd'>" + element.v_blstatus + "</span>");
+                  } else {
+                    item.push("<span  class='colorGrass fs-lg'>" + element.v_blstatus + "</span>");
+                  }*/
+                  resultList.push(item);
+                }
+                this.config.data = resultList;
+                /*const scrollBoard = this.$refs['scroll-board'];
+                //刷新数据
+                scrollBoard.updateRows(resultList);*/
+                this.config = { ...this.config };
+              }, (result) => {
+                console.error(result)
+              }
+          );
+    }
+  }
+};
+</script>
+
+<style lang="scss" class>
+$box-height: 950px;
+$box-width: 100%;
+#up1 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    border-radius: 10px;
+    height: $box-height - 25px;
+    padding: 5px;
+  }
+
+  .text {
+    color: #c3cbde;
+    //font-size: 15px;
+  }
+
+  .body-box {
+    width: $box-width;
+
+    .dv-scroll-board .header {
+      font-size: 20px;
+    }
+
+    .dv-scroll-board {
+      height: $box-height - 70px;
+    }
+  }
+
+}
+</style>