优化

FTT.Board.VueUI/package-lock.json

@@ -348,6 +348,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.0.tgz",
+      "integrity": "sha1-Jt8IiAOiNQ3/LCf5b++Z/klEKso=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -2788,6 +2796,14 @@
         "entities": "^1.1.1"
       }
     },
+    "dom7": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/dom7/download/dom7-3.0.0.tgz",
+      "integrity": "sha1-uGHOXWemvs16qjrQKUL/FLEkAzE=",
+      "requires": {
+        "ssr-window": "^3.0.0-alpha.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -3572,8 +3588,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-      "dev": true
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -10360,6 +10375,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-3.0.0.tgz",
+      "integrity": "sha1-/VuCgBY4lD4MxwTEaRgBQ1r3rDc="
+    },
     "ssri": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
@@ -10670,6 +10690,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "6.3.5",
+      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-6.3.5.tgz",
+      "integrity": "sha1-dES2gND9r+hIWYJaw1WbWwG9GRY=",
+      "requires": {
+        "dom7": "^3.0.0-alpha.7",
+        "ssr-window": "^3.0.0-alpha.4"
+      }
+    },
     "tapable": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.9.tgz",
@@ -11162,6 +11191,12 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4=",
+      "dev": true
+    },
     "vue-drag-resize": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/vue-drag-resize/-/vue-drag-resize-1.3.2.tgz",

FTT.Board.VueUI/package.json

@@ -14,11 +14,12 @@
     "echarts": "^4.2.1",
     "element-ui": "^2.11.1",
     "moment": "^2.24.0",
+    "swiper": "^6.3.5",
     "uglifyjs-webpack-plugin": "^1.0.0",
     "vue": "^2.5.2",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.0.1",
-    "vue-seamless-scroll": "^1.1.16"
+    "vue-seamless-scroll": "^1.1.21"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -55,6 +56,7 @@
     "style-loader": "^1.2.1",
     "stylus-loader": "^3.0.2",
     "url-loader": "^0.5.8",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",

FTT.Board.VueUI/src/App.vue

@@ -63,7 +63,4 @@ html {
 html::-webkit-scrollbar {
   width: 0px;
 }
-#app div{
-  /* overflow: hidden; */
-}
 </style>

FTT.Board.VueUI/src/components/view/HtmlPanel.vue

+<template>
+ <div>
+  <!-- <mu-circular-progress :size="40" v-if="loading"/> -->
+  <div v-html="html"></div>
+ </div>
+</template>
+<script>
+ export default{
+  // 使用时请使用 :url.sync=""传值
+  props: {
+   url: {
+    required: true
+   }
+  },
+  data () {
+   return {
+    loading: false,
+    html: ''
+   }
+  },
+  watch: {
+   url (value) {
+    this.load(value)
+   }
+  },
+  mounted () {
+   this.load(this.url)
+  },
+  methods: {
+
+   load (url) {
+
+    if (url && url.length > 0) {
+
+     // 加载中
+
+     this.loading = true
+
+     let param = {
+
+      accept: 'text/html, text/plain'
+
+     }
+
+     this.$http.get(url, param).then((response) => {
+
+      this.loading = false
+
+      // 处理HTML显示
+
+      this.html = response.data
+
+     }).catch(() => {
+
+      this.loading = false
+
+      this.html = '加载失败'
+
+     })
+
+    }
+
+   }
+
+  }
+
+ }
+
+</script>
\ No newline at end of file

FTT.Board.VueUI/src/main.js

@@ -37,6 +37,13 @@ import echarts from 'echarts'
 Vue.use(echarts)
 Vue.prototype.echarts = echarts
 
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+// import 'swiper/dist/css/swiper.css'
+
+import 'swiper/swiper-bundle.min.css'
+
+Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
+
 Vue.prototype.__defaultErrorHandlder = function (code, message) {
   let msg = '';
   console.log(message);
@@ -86,11 +93,11 @@ Vue.prototype.__defaultErrorHandlder = function (code, message) {
   });
 }
 
-Vue.prototype.jsController = function(){
-  JsControllerObj.CsExecuter("StartReadRFID",'ComReadCardCallBack')
+Vue.prototype.jsController = function () {
+  JsControllerObj.CsExecuter("StartReadRFID", 'ComReadCardCallBack')
 }
 
-function ComReadCardCallBack(data){
+function ComReadCardCallBack(data) {
   console.log(data);
 }
 

FTT.Board.VueUI/src/views/machine/processSheet.vue

@@ -55,7 +55,8 @@
             <i slot="prefix" class="el-input__icon el-icon-search"></i>
           </el-input>
           <span class="el-icon-search" @click="search"></span> -->
-          [序号]工序
+          <span>[序号]工序</span>
+          <button @click="getSOP(0)">款式SOP</button>
         </div>
         <div class="process_list">
           <div
@@ -125,13 +126,59 @@
         <div class="none" v-if="detailList.length == 0">暂无数据...</div>
       </div>
     </div>
+    <el-dialog :visible.sync="centerDialogVisible" width="600px" center>
+      <swiper ref="mySwiper" :options="swiperOptions">
+        <swiper-slide v-for="(item, index) in imgArr" :key="index">
+          <img :src="item" alt="" />
+          <h3>{{ index + 1 }}/{{ imgArr.length }}</h3>
+        </swiper-slide>
+      </swiper>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="sopDialogVisible"
+      width="100%"
+      center
+      :title="Name"
+    >
+      <div class="tab">
+        <div class="tab_list" v-for="(item, index) in tabList" :key="index">
+          <span
+            @click="tabChange(index)"
+            :class="{ active: tabIndex == index }"
+            >{{ item }}</span
+          >
+        </div>
+      </div>
+      <div class="sop_main">
+        <!-- <hPanel :url="url" v-if="url"></hPanel> -->
+        <iframe
+          v-if="url"
+          :src="url"
+          id="mobsf"
+          scrolling="no"
+          frameborder="0"
+          style="width:100%;height:450px"
+        ></iframe>
+        <div class="none" v-else>该款式暂无SOP</div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import qs from "qs";
+import hPanel from "@/components/view/HtmlPanel";
 export default {
+  components: {
+    hPanel
+  },
   data() {
     return {
+      swiperOptions: {
+        loop: true
+      },
+      centerDialogVisible: false, //控制弹窗的显示隐藏
+      sopDialogVisible: false, //sop弹窗显隐
+      imgArr: [],
       options: [],
       value: "",
       checkIndex: -1,
@@ -140,7 +187,15 @@ export default {
       processList: [], //工序列表
       inforList: [],
       detailList: [],
-      userName: localStorage.getItem("$state") ? JSON.parse(localStorage.getItem("$state")).name : '',
+      tabList: ["裁断", "针车", "成型"],
+      tabIndex: 0,
+      // url:
+      //   "http://jhdsoft.gicp.net:9203/hyerp/Cached/Sop/fffb44ad289f7e96f05de47b4631fb82.html",
+      url:'',
+      Name: "款式SOP",
+      userName: localStorage.getItem("$state")
+        ? JSON.parse(localStorage.getItem("$state")).name
+        : "",
       TitleList: [
         "型体",
         "工序号",
@@ -174,14 +229,19 @@ export default {
       if (command == "a") {
         this.$cookie.delCookie("access_token");
         this.$cookie.delCookie("host");
-        localStorage.removeItem('$state')
-        this.$router.push('login')
+        localStorage.removeItem("$state");
+        this.$router.push("login");
       }
     },
     check(item, index) {
       this.checkIndex = index;
+      this.getIEPictureInfo(item);
       this.getIEReportInfo(item);
     },
+    tabChange(index) {
+      this.tabIndex = index;
+      this.getSOP(index);
+    },
     search() {
       if (!this.value) {
         this.$message({
@@ -210,6 +270,70 @@ export default {
           console.log(err);
         });
     },
+    getSOP(index) {
+      //获取SOP
+      if (!this.item.StyleCode) {
+        this.$message({
+          message: "请先选择指令单",
+          type: "warning"
+        });
+        return;
+      }
+      this.sopDialogVisible = true;
+      this.tabIndex = index;
+      let params = {
+        ReportType: index ? index : 0,
+        StyleCode: this.item.StyleCode
+      };
+      this.$http({
+        method: "post",
+        url: this.$cookie.getCookie("host") + "/api/vMES/Sop/StyleSop",
+        data: params
+      })
+        .then(res => {
+          if (res.success) {
+            this.Name = res.data.Name;
+            this.url = res.data.Url
+          }else{
+            this.Name = '款式SOP'
+            this.url = ''
+          }
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    getIEPictureInfo(item) {
+      let params = {
+        IndexNo: this.value,
+        WorkSectionID: item.WorkSectionID,
+        IEType: item.IEType,
+        IEID: item.IEID
+      };
+      this.$http({
+        method: "post",
+        url:
+          this.$cookie.getCookie("host") +
+          "/api/vWSM/WorkStation/GetIEPictureInfo",
+        data: params
+      })
+        .then(res => {
+          if (res.success) {
+            if (res.items.length == 0) {
+              this.$message({
+                message: "该工序暂无工艺图片",
+                type: "warning"
+              });
+            } else {
+              this.centerDialogVisible = true;
+              this.imgArr = res.items;
+            }
+          }
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
     getIEDailyReportInfo() {
       let params = {};
       this.$http
@@ -293,6 +417,7 @@ export default {
           if (res.success) {
             console.log(res);
             this.item = res.data;
+            this.checkIndex = -1
           }
         })
         .catch(err => {
@@ -316,6 +441,21 @@ export default {
 .el-icon-arrow-down {
   font-size: 12px;
 }
+.el-dialog {
+  margin-top: 10vh !important;
+}
+.swiper-container {
+  overflow: hidden !important;
+}
+.swiper-slide {
+  width: 100%;
+  text-align: center;
+  img {
+    // height: 500px;
+    // max-width: 100%;
+    width: 100%;
+  }
+}
 .top {
   width: 100%;
   height: 60px;
@@ -370,6 +510,17 @@ export default {
         color: #ffffff;
         cursor: pointer;
       }
+      button {
+        width: 100px;
+        height: 35px;
+        background-color: #ffffff;
+        font-size: 18px;
+        outline: none;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-weight: 400;
+      }
     }
     .process_list {
       width: 100%;
@@ -515,4 +666,41 @@ export default {
     }
   }
 }
+.tab {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tab_list {
+    font-size: 20px;
+    width: 33.4%;
+    text-align: center;
+    cursor: pointer;
+
+    span {
+      display: inline-block;
+      height: 50px;
+      box-sizing: border-box;
+      border-bottom: 2px solid transparent;
+      &.active {
+        color: #409eff;
+        border-bottom: 2px solid #409eff;
+        transition: all 0.3s ease-in-out;
+      }
+    }
+  }
+}
+.sop_main {
+  height: 450px;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  > div {
+    font-size: 18px;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
 </style>