作业指导书表单修改/轮播展示调整

zkqy-ui/src/api/amichi/operationInstruction/instruction.js

@@ -12,7 +12,7 @@ export function listInstruction(query) {
 // 查询作业指导书详细
 export function getInstruction(id) {
   return request({
-    url: '/amichi/operationInstruction' + id,
+    url: '/amichi/operationInstruction/' + id,
     method: 'get'
   })
 }
@@ -38,7 +38,7 @@ export function updateInstruction(data) {
 // 删除作业指导书
 export function delInstruction(id) {
   return request({
-    url: '/amichi/operationInstruction' + id,
+    url: '/amichi/operationInstruction/' + id,
     method: 'delete'
   })
 }

zkqy-ui/src/views/amichi/operationInstruction/index.vue

@@ -123,7 +123,7 @@
             </el-button>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item
-                icon="el-icon-edit"
+                icon="el-icon-zoom-in"
                 command="catOperationInstruction"
                 >查看作业指导书</el-dropdown-item
               >
@@ -159,9 +159,23 @@
         <el-form-item label="作业名称" prop="jobName">
           <el-input v-model="form.jobName" placeholder="请输入作业名称" />
         </el-form-item>
-        <el-form-item label="组件名称" prop="componentPath">
-          <el-input v-model="form.componentPath" placeholder="请输入组件名称" />
+        <el-form-item label="作业指导书" prop="imageSrc">
+          <!-- :before-upload="beforeUpload" -->
+          <el-upload
+            :action="uploadImgUrl"
+            class="avatar-uploader"
+            :before-upload="beforeUpload"
+            :show-file-list="false"
+            :on-success="handleUploadSuccess"
+            :headers="headers"
+          >
+            <img v-if="form.imageSrc" :src="form.imageSrc" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
         </el-form-item>
+        <!-- <el-form-item label="组件名称" prop="componentPath">
+          <el-input v-model="form.componentPath" placeholder="请输入组件名称" />
+        </el-form-item> -->
         <!--        <el-form-item label="路由地址" prop="routingAddress">-->
         <!--          <el-input v-model="form.routingAddress" placeholder="请输入路由地址" />-->
         <!--        </el-form-item>-->
@@ -194,6 +208,29 @@
         >
       </div>
     </el-dialog>
+    <!-- 图片式预览 -->
+    <el-dialog
+      :title="previewTitle"
+      :visible.sync="previewShow"
+      width="1500px"
+      append-to-body
+    >
+      <!-- 动态加载组件 -->
+      <!-- <component :is="catOperationInstructionCurrentComponent"></component> -->
+      <div class="previewWrap">
+        <img class="preImg" :src="previewUrl" :alt="previewTitle" />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          @click="catOperationInstructionBoolean = false"
+          >确 定</el-button
+        >
+        <el-button @click="catOperationInstructionBoolean = false"
+          >取 消</el-button
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -217,15 +254,26 @@ import {
   addInstruction,
   updateInstruction,
 } from "@/api/amichi/operationInstruction/instruction";
+import { getToken } from "@/utils/auth";
 
 export default {
   name: "MaterialInfo",
   dicts: ["wlsx"],
   data() {
     return {
+      // 图片上传 相关 start
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      // 图片上传 相关 end
       catOperationInstructionTitle: "",
       catOperationInstructionCurrentComponent: "", // 默认显示ComponentA
       catOperationInstructionBoolean: false,
+      previewShow: false,
+      previewUrl: "",
+      previewTitle: "",
       tableData: [
         {
           id: "1",
@@ -322,6 +370,23 @@ export default {
     this.getList();
   },
   methods: {
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.form.imageSrc = res.url;
+      } else {
+        this.$message.error("网络异常,请稍后上传");
+      }
+    },
+    beforeUpload(file) {
+      if (file.type.indexOf("image/") == -1) {
+        this.$modal.msgError(
+          "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
+        );
+      }
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {},
     handleClick(row) {
       console.log(row);
       this.catOperationInstructionTitle = row.instructionName;
@@ -330,6 +395,12 @@ export default {
       //   path: row.path
       // })
     },
+    previewHandler(row) {
+      console.log(row);
+      this.previewUrl = row.imageSrc;
+      this.previewTitle = row.instructionName;
+      this.previewShow = true;
+    },
     //下拉菜单点击事件
     handleCommand(command, row) {
       switch (command) {
@@ -340,8 +411,9 @@ export default {
           this.handleDelete(row);
           break;
         case "catOperationInstruction":
-          this.catOperationInstructionBoolean = true;
-          this.handleClick(row);
+          // this.catOperationInstructionBoolean = true;
+          // this.handleClick(row);
+          this.previewHandler(row);
           break;
         default:
           break;
@@ -373,6 +445,7 @@ export default {
         jobName: null,
         componentPath: null,
         routingAddress: null,
+        imageSrc: null,
         remark: null,
         createById: null,
         createBy: null,
@@ -469,3 +542,36 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.previewWrap {
+  width: 100%;
+  height: 100%;
+  .preImg {
+    width: 100%;
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>

zkqy-ui/src/views/amichi/operationInstruction/page/driverInstallation.vue

@@ -232,6 +232,7 @@ export default {
             "用深度尺检查螺纹深度是否符合图面要求。",
           ],
         },
+
         {
           step: "步骤二",
           img: require("@/assets/operationInstructionimgs/qdp2.png"),

zkqy-ui/src/views/amichi/operationInstruction/page/operatingInstructions_012.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="container">
+    <div class="borderline">
+      <titleComp
+        :titleData="titleData"
+        title="定子绕线工序作业指导书"
+      ></titleComp>
+      <el-row>
+        <el-col :span="9">
+          <table style="lineheight: 16px">
+            <tr>
+              <td
+                colspan="6"
+                style="color: #005bae; font-size: 18px; border-top: 0"
+                class="td-title"
+              >
+                {{ interFaceTableData.title }}
+              </td>
+            </tr>
+            <tr>
+              <td
+                v-for="(item, index) in interFaceTableData.headerList"
+                :key="index"
+                v-html="item"
+              ></td>
+            </tr>
+            <tr
+              style="line-height: 30px"
+              v-for="(item, index) in interFaceTableData.tableData"
+              :key="index"
+            >
+              <td>{{ item.type }}</td>
+              <td>{{ item.doubleLayered }}</td>
+              <td>{{ item.doubleConcentric }}</td>
+              <td>{{ item.singlePhase }}</td>
+              <td>{{ item.L }}</td>
+              <td>{{ item.control }}</td>
+            </tr>
+          </table>
+          <img style="margin-top: 40px; height: 300px" :src="img01" alt="" />
+        </el-col>
+        <el-col :span="16"> </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import titleComp from "@/views/amichi/operationInstruction/components/titleComp.vue";
+import parameterComp from "@/views/amichi/operationInstruction/components/parameterComp.vue";
+import auxiliaryTools from "@/views/amichi/operationInstruction/components/auxiliaryTools.vue";
+import attentionComp from "@/views/amichi/operationInstruction/components/attentionComp.vue";
+import stepImgComp from "@/views/amichi/operationInstruction/components/stepImgComp.vue";
+import footerComp from "@/views/amichi/operationInstruction/components/footerComp.vue";
+const img01 = require("@/assets/operationInstructionimgs/OI_012_01.png");
+export default {
+  name: "operatingInstructions_012",
+  props: [],
+  components: {
+    titleComp,
+    parameterComp,
+    auxiliaryTools,
+    attentionComp,
+    stepImgComp,
+    footerComp,
+  },
+  data() {
+    return {
+      titleData: {
+        type: "全系列",
+        number: "QYDG-SOP002",
+        dep: "电工",
+        version: "A",
+        procedure: "绕线",
+        page: "1/1",
+        org: "叶梦珪",
+        orgDate: "2023/1/7",
+        exa: "陈光",
+        exaDep: "技术部",
+        approval: "陈兰生",
+        approvalDate: "",
+      },
+      interFaceTableData: {
+        title: "定子绕线作业控制",
+        headerList: [
+          "定子型号",
+          "双层叠绕组<br/>DLL A",
+          "双层同心绕组<br/>DLL A",
+          "单相绕组<br/>DLL A",
+          "L",
+          "作业控制",
+        ],
+        tableData: [
+          {
+            type: "164/184",
+            doubleLayered: "30",
+            doubleConcentric: "20",
+            singlePhase: "30",
+            L: "= 铁芯长 +（A×2）",
+            control: "圈数计数器+钢直尺",
+          },
+          {
+            type: "164/184",
+            doubleLayered: "30",
+            doubleConcentric: "20",
+            singlePhase: "30",
+            L: "= 铁芯长 +（A×2）",
+            control: "圈数计数器+钢直尺",
+          },
+          {
+            type: "164/184",
+            doubleLayered: "30",
+            doubleConcentric: "20",
+            singlePhase: "30",
+            L: "= 铁芯长 +（A×2）",
+            control: "圈数计数器+钢直尺",
+          },
+          {
+            type: "164/184",
+            doubleLayered: "30",
+            doubleConcentric: "20",
+            singlePhase: "",
+            L: "= 铁芯长 +（A×2）",
+            control: "圈数计数器+钢直尺",
+          },
+          {
+            type: "164/184",
+            doubleLayered: "30",
+            doubleConcentric: "20",
+            singlePhase: "",
+            L: "= 铁芯长 +（A×2）",
+            control: "圈数计数器+钢直尺",
+          },
+          {
+            type: "164/184",
+            doubleLayered: "30",
+            doubleConcentric: "20",
+            singlePhase: "",
+            L: "= 铁芯长 +（A×2）",
+            control: "圈数计数器+钢直尺",
+          },
+        ],
+      },
+      img01: img01,
+      stepList: [
+        {
+          step: "步骤一",
+          img: require("@/assets/operationInstructionimgs/OI_012_02.png"),
+          text: [
+            "依据技术数据对应漆包线立于地面；",
+            "将线从陶瓷线嘴穿出；",
+            "注意线径及数量是否正确；",
+            "注意检查线径、线数及绝缘等级要求。",
+          ],
+        },
+        {
+          step: "步骤二",
+          img: require("@/assets/operationInstructionimgs/OI_012_03.png"),
+          text: [
+            "依上图示意，将引出的漆包线依次从尼龙轮穿插；",
+            "注意防止漆包线越出线轮。",
+          ],
+        },
+        {
+          step: "步骤三",
+          img: require("@/assets/operationInstructionimgs/OI_012_04.png"),
+          text: [
+            "按生产订单要求，选取相应参数绕线模具；",
+            "模具安装时依据铁芯长度侧量间距，注意模具锁紧；",
+            "初始及结尾预留引出线头长度，详见《定子绕线预留参数表》。",
+          ],
+        },
+        {
+          step: "步骤四",
+          img: require("@/assets/operationInstructionimgs/OI_012_05.png"),
+          text: [
+            "绕制后的线圈，每股线用白色聚酯纤维绑扎带箍紧；",
+            "绕制后的半成品用专用塑料周转车存放；",
+            "注意写好标识，以便下道工序区分、领用。",
+          ],
+        },
+        {
+          step: "",
+          img: require("@/assets/operationInstructionimgs/OI_012_06.png"),
+          text: [],
+        },
+      ],
+    };
+  },
+  computed: {
+    firstTwoStep() {
+      return this.stepList.slice(0, 2);
+    },
+    lastStemp() {
+      return this.stepList.slice(2);
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  padding: 30px;
+  background: linear-gradient(to bottom, #74d9fb, #fff);
+}
+.borderline {
+  border: 1.5px solid #333;
+  border-bottom: 2.5px solid #333;
+  border-right: 2.5px solid #333;
+  .top_area {
+    display: flex;
+  }
+}
+.line {
+  height: 25px;
+  border-left: 1px solid #333;
+}
+
+/* 表格样式 */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  /* 合并边框 */
+  /* border: 1px solid #333; */
+}
+
+tr:nth-last-child(1) {
+  padding-bottom: 30px;
+}
+
+.td {
+  height: 21px;
+}
+
+th,
+td {
+  border: 1px solid #333;
+  border-top: 0;
+  text-align: center;
+  font-size: 12px;
+}
+
+.tr td:nth-child(2n) {
+  width: 30%;
+}
+
+.tr td:nth-child(2n -1) {
+  width: 20%;
+}
+</style>

zkqy-ui/src/views/amichi/operationInstruction/swiperIndex.vue

@@ -1,10 +1,14 @@
 <template>
   <!-- :style="`height:${pageHeight}px;`" -->
-  <v-scale-screen width="2200" height="1080">
+  <v-scale-screen width="5669" height="4535">
     <div class="swiper-container">
       <div class="swiper-wrapper">
-        <div v-for="item in swiperArr" :key="item" class="swiper-slide">
-          <component :is="item"></component>
+        <!-- <div class="swiper-slide">
+          <img :src="OI001" alt="" />
+        </div> -->
+        <div v-for="(item, index) in urlList" :key="index" class="swiper-slide">
+          <!-- <component :is="item"></component> -->
+          <img :src="item.url" :alt="item.title" />
         </div>
       </div>
       <div class="swiper-button-next"></div>
@@ -20,9 +24,13 @@ import excitationStator from "@/views/amichi/operationInstruction/page/excitatio
 import statorCore from "@/views/amichi/operationInstruction/page/statorCore.vue";
 import statorPressFit from "@/views/amichi/operationInstruction/page/statorPressFit.vue";
 import StatorWireEmbedding from "@/views/amichi/operationInstruction/page/StatorWireEmbedding.vue";
+import operatingInstructions_012 from "@/views/amichi/operationInstruction/page/operatingInstructions_012.vue";
+const OI001 = require("@/assets/operationInstructionimgs/OI001.png");
 
 import Swiper from "swiper";
 import "swiper/css/swiper.css";
+
+import { listInstruction } from "@/api/amichi/operationInstruction/instruction";
 export default {
   name: "swiperIndex",
   props: [],
@@ -32,10 +40,12 @@ export default {
     statorCore,
     statorPressFit,
     StatorWireEmbedding,
+    operatingInstructions_012,
   },
   data() {
     return {
       swiperArr: [
+        "operatingInstructions_012",
         "driverInstallation",
         "excitationStator",
         "statorCore",
@@ -45,6 +55,8 @@ export default {
       swiper: null,
       pageHeight: 0,
       pageWidth: 0,
+      OI001: OI001,
+      urlList: [],
     };
   },
   computed: {},
@@ -54,11 +66,32 @@ export default {
     this.pageWidth =
       document.documentElement.scrollWidth || document.body.scrollWidth;
     console.log(this.pageHeight);
-    this.$nextTick(() => {
-      this.initSwipper();
-    });
+    // this.$nextTick(() => {
+    //   this.initSwipper();
+    // });
+    this.initDataList();
   },
   methods: {
+    async initDataList() {
+      let payload = {
+        isEnablePaging: false,
+      };
+      let res = await listInstruction(payload);
+      if (res.code === 200) {
+        this.urlList = res.rows.map((item) => {
+          return {
+            url: item.imageSrc,
+            title: item.instructionName,
+          };
+        });
+        console.log(this.urlList);
+        this.$nextTick(() => {
+          this.initSwipper();
+        });
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
     initSwipper() {
       this.swiper = new Swiper(".swiper-container", {
         loop: true,
@@ -72,6 +105,11 @@ export default {
           nextEl: ".swiper-button-next",
           prevEl: ".swiper-button-prev",
         },
+        autoplay: {
+          delay: 5000,
+          stopOnLastSlide: false,
+          disableOnInteraction: false,
+        },
       });
     },
   },
@@ -82,7 +120,7 @@ export default {
 .swiper-container {
   width: 100%;
   height: 100%;
-  background: #e68181;
+  background: #ffffff;
   .swiper-wrapper {
     width: 100%;
     height: 100%;
@@ -95,4 +133,9 @@ export default {
     }
   }
 }
+img {
+  width: 100%;
+  height: 111%;
+  object-fit: fill;
+}
 </style>