设备相关数据修改

src/views/system/technology/technologyDetail/MapData.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="mapdata">
+    <div id="container" ref="container" style="width:1200px"></div>
+    <div class="left">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span style="font-size: 18px">锁定站信息展示</span>
+<!--          <span-->
+<!--            style="-->
+<!--                float: right;-->
+<!--                padding: 1px 0;-->
+<!--                font-size: 22px;-->
+<!--                cursor: pointer;-->
+<!--              "-->
+<!--            type="text"-->
+<!--            @click="goBack"-->
+<!--          >×</span-->
+<!--          >-->
+        </div>
+        <div style="height: 100%;padding-bottom:10px">
+          <el-input v-model="value" type="textarea" :rows="26" disabled></el-input>
+        </div>
+        <div class="bottombtn" style="width:100%;height: 35px;padding: 10px 0 0">
+<!--          <el-button v-no-more-click @click="save" type="primary" icon="el-icon-edit"-->
+<!--                     style="float: right; height: 33px; line-height: 2px"-->
+<!--          >保存-->
+<!--          </el-button>-->
+<!--          <el-button v-no-more-click @click="close" type="primary" icon="el-icon-close"-->
+<!--                     style="float: right; height: 33px; line-height: 2px;margin: 0 10px"-->
+<!--          >关闭-->
+<!--          </el-button>-->
+          <!--          <el-button v-no-more-click @click="reset" type="primary" icon="el-icon-refresh"  style="float: right; height: 33px; line-height: 2px;margin: 0 10px">重置</el-button>-->
+          <!--          <el-button v-no-more-click @click="view" type="primary" icon="el-icon-view" style="float: right; height: 33px; line-height: 2px">预览</el-button>-->
+        </div>
+      </el-card>
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+import Konva from 'konva'
+import { getLotoMapInfo, getLotoInfo, updateLoto } from '@/api/mes/lotoStation/lotoStation'
+import { getTechnologyInfo, saveMachineryPoints } from '@/api/system/machinery'
+
+export default {
+  name: 'KonvaExample',
+  props: {
+    machineryId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      stage: null,
+      layer: null,
+      selectedStates: [], // 用于存储每个元素的选中状态
+      selectedText: [], // 用于存储未选中的元素文本
+      rects: [], // 白色r        ect合集
+      texts: [], // 白色text合集
+      redrects: [], // 红色rect合集
+      redtexts: [], // 白色text合集
+      value: '',
+      form: {},//拿到单个数据
+      orignData: null,//原始数据
+      pointIdList: [],//选中的隔离点
+      selectPoints: []//回显之前选中的隔离点
+    }
+  },
+
+  mounted() {
+    this.p
+    this.$nextTick(() => {
+      this.getLoToInfo()
+    })
+
+  },
+
+  methods: {
+    goBack() {
+      this.$router.push('/technology/technologyList')
+    },
+    close() {
+      this.$router.push('/technology/technologyList')
+    },
+    getLoToInfo() {
+      const machineryId = this.machineryId
+      getTechnologyInfo(machineryId).then((response) => {
+        const lotoId = response.data.lotoId
+        const sopId = ''
+        const ticketId = ''
+        getLotoInfo(lotoId).then((response) => {
+          console.log(response, '电柜信息')
+          this.form = response.data
+        })
+        getLotoMapInfo(lotoId, sopId, ticketId).then(response => {
+          console.log(response, '电柜预览接口调用')
+          this.form.map = response.data
+
+          if (response.data) {
+            try {
+              this.value = JSON.stringify(response.data, null, 4)
+              this.orignData = this.value
+            } catch (err) {
+            }
+          }
+          this.initKonva()
+        })
+      });
+
+      //   设备工艺详情
+      getTechnologyInfo(this.$route.query.machineryId).then(response => {
+        console.log(response, '设备/工艺详情')
+        this.selectPoints = response.data.pointIdList
+      })
+    },
+    // 重置
+    reset() {
+      this.value = this.orignData
+      this.initKonva() // 重新初始化 Konva
+    },
+    // 预览
+    view() {
+      if (this.isJson(this.value)) {
+        this.form.map = this.value
+        this.initKonva()
+      } else {
+        this.$message({
+          type: 'error',
+          message: '地图数据格式不正确，请输入有效的 JSON 格式!'
+        })
+      }
+    },
+    save() {
+      this.$confirm('请确认是否保存修改内容', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 校验 this.value 是否为有效的 JSON
+        if (this.isJson(this.value)) {
+          const machineryId = this.$route.query.machineryId
+          const formData = {
+            machineryId: machineryId,
+            pointIdList: this.pointIdList
+          }
+          console.log(this.form, formData, 'map')
+          saveMachineryPoints(formData).then(response => {
+            console.log(response, '修改设备/工艺地图')
+            this.$router.push('/technology/technologyList')
+            this.$message({
+              type: 'success',
+              message: '保存成功!'
+            })
+          })
+        } else {
+          this.$message({
+            type: 'error',
+            message: '地图数据格式不正确，请输入有效的 JSON 格式!'
+          })
+        }
+      }).catch(() => {
+        // 取消操作
+      })
+    },
+
+    // 校验字符串是否为有效的 JSON
+    isJson(str) {
+      try {
+        JSON.parse(str)
+        return true
+      } catch (e) {
+        return false
+      }
+    },
+    initKonva() {
+      // 创建舞台
+      this.stage = new Konva.Stage({
+        container: this.$refs.container, // 容器元素
+        width: 1200,
+        height: 860
+      })
+
+      // 创建图层
+      this.layer = new Konva.Layer()
+
+      // 创建底图
+      const bgImage = new Image()
+      bgImage.src = require('@/assets/images/table.png')
+      bgImage.onload = () => {
+        const knovaImage = new Konva.Image({
+          x: 330,
+          y: 10,
+          image: bgImage,
+          width: 500,
+          height: 790,
+          draggable: false
+        })
+        this.layer.add(knovaImage)
+        this.layer.draw()
+      }
+
+      // 绘制无限网格
+      this.drawGrid(50, 50, '#e0e0e0') // 每个单元格50x50，浅灰色网格
+
+      // 渲染数据
+      const imageSrc = require('@/assets/images/localSetIcon.jpg') // 图片路径
+      this.renderGrid(imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25)
+
+      // 将图层添加到舞台
+      this.stage.add(this.layer)
+      this.layer.draw()
+
+      // 禁止舞台拖拽
+      this.stage.draggable(false)
+    },
+
+    // 绘制无限网格
+    drawGrid(cellWidth, cellHeight, gridColor) {
+      const width = 1200
+      const height = 860
+
+      // 绘制竖线
+      for (let i = 0; i <= width; i += cellWidth) {
+        const verticalLine = new Konva.Line({
+          points: [i, 0, i, height],
+          stroke: gridColor,
+          strokeWidth: 1
+        })
+        this.layer.add(verticalLine)
+      }
+
+      // 绘制横线
+      for (let j = 0; j <= height; j += cellHeight) {
+        const horizontalLine = new Konva.Line({
+          points: [0, j, width, j],
+          stroke: gridColor,
+          strokeWidth: 1
+        })
+        this.layer.add(horizontalLine)
+      }
+
+      this.layer.draw()
+    },
+
+    renderGrid(imageSrc) {
+      this.selectedStates = [] // 用数组来存储选中状态
+      this.rects = {}
+      this.texts = {}
+      this.bgrects = {}
+      this.redrects = {}
+      this.redtexts = {}
+      this.selectedText = []
+      this.pointIdList = [] // 初始化选中的点ID列表
+
+      const positions = JSON.parse(this.value)
+
+      positions.forEach((pos, index) => {
+        const x = pos.col * 50 // 每个单元格宽度为50
+        const y = pos.row * 50 // 每个单元格高度为50
+        const labelText = pos.pointName // 对应的文字
+
+        const point = new Image()
+        point.src = pos.pointIcon
+        point.onload = () => {
+          const knovaImage = new Konva.Image({
+            x: x,
+            y: y,
+            image: point,
+            width: 50,
+            height: 50,
+            draggable: false
+          })
+
+          // 添加点击事件监听器
+          knovaImage.on('click', () => {
+            const isCurrentlySelected = this.redrects[labelText].visible()
+
+            if (isCurrentlySelected) {
+              // 如果当前已选中，则取消选中
+              this.redrects[labelText].visible(false)
+              this.redtexts[labelText].visible(false)
+              this.pointIdList = this.pointIdList.filter(id => id !== pos.pointId) // 移除ID
+            } else {
+              // 如果当前未选中，则选中
+              this.redrects[labelText].visible(true)
+              this.redtexts[labelText].visible(true)
+              this.pointIdList.push(pos.pointId) // 添加ID
+            }
+
+            this.layer.batchDraw() // 更新图层显示
+          })
+
+          // 底部白色背景
+          const bgrect = new Konva.Rect({
+            x: x - 6,
+            y: y - 5,
+            width: 62,
+            height: 80,
+            cornerRadius: 5,
+            stroke: 'white',
+            strokeWidth: 2,
+            fill: 'white'
+          })
+          this.layer.add(bgrect)
+          this.bgrects[labelText] = bgrect // 用文字作为键存储
+
+          // 普通矩形
+          const rect = new Konva.Rect({
+            x: x + 0,
+            y: y - 1,
+            width: 50,
+            height: 72,
+            cornerRadius: 5,
+            stroke: 'red',
+            strokeWidth: 2,
+            fill: 'white'
+          })
+          this.layer.add(rect)
+          this.rects[labelText] = rect // 用文字作为键存储
+
+          // 先加底部白色 再添加图片
+          this.layer.add(knovaImage)
+
+          // 普通文字
+          const text = new Konva.Text({
+            x: x + 8,
+            y: y + 50,
+            fontSize: 20,
+            text: labelText,
+            fontFamily: 'Calibri',
+            fill: 'red'
+          })
+          this.layer.add(text)
+          this.texts[labelText] = text // 用文字作为键存储
+
+          // 覆盖层（表示选中状态）
+          const redrect = new Konva.Rect({
+            x: x - 7,
+            y: y - 6,
+            width: 64.1,
+            height: 82,
+            cornerRadius: 5,
+            fill: 'rgba(97, 97, 97, 0.5)', // 半透明灰色
+            visible: false, // 初始状态隐藏
+            listening: false
+          })
+          this.layer.add(redrect)
+          this.redrects[labelText] = redrect // 用文字作为键存储
+
+          // 创建对号文本
+          const redtext = new Konva.Text({
+            x: x - 5 + 42 / 2, // 水平居中
+            y: y + 62 / 2, // 垂直居中
+            fontSize: 24, // 根据需要调整字体大小
+            text: '✔',
+            fontFamily: 'Arial',
+            fill: 'white',
+            align: 'center',
+            verticalAlign: 'middle',
+            visible: false, // 初始隐藏状态
+            listening: false
+          })
+          this.layer.add(redtext)
+          this.redtexts[labelText] = redtext // 用文字作为键存储
+
+          // 检查 selectPoints 是否存在并且不为空
+          if (Array.isArray(this.selectPoints) && this.selectPoints.length > 0) {
+            if (this.selectPoints.includes(pos.pointId)) {
+              // 设置选中状态
+              this.redrects[labelText].visible(true)
+              this.redtexts[labelText].visible(true)
+              this.pointIdList.push(pos.pointId) // 添加ID
+            }
+          }
+
+          this.layer.draw()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#container {
+  width: 100%;
+  height: 100%;
+}
+
+.mapdata {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/views/system/technology/technologyDetail/craftDetail.vue

@@ -3,7 +3,7 @@
     <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
       <el-radio-button label="craftInformation">工艺信息</el-radio-button>
       <el-radio-button label="deviceList">设备列表</el-radio-button>
-      <el-radio-button label="Loto">LOTO站</el-radio-button>
+      <el-radio-button label="Loto">锁定站</el-radio-button>
       <el-radio-button label="sopList">SOP列表</el-radio-button>
     </el-radio-group>
 
@@ -19,7 +19,7 @@
             size="mini"
             @click="handleAdd"
             v-hasPermi="['iscs:machinery:add']"
-            >新增
+          >新增
           </el-button>
         </el-col>
         <el-col :span="1.5">
@@ -32,7 +32,8 @@
             :disabled="multiple"
             @click="handleDelete"
             v-hasPermi="['mes:hw:information:batchremove']"
-            >批量删除</el-button
+          >批量删除
+          </el-button
           >
         </el-col>
         <!-- <el-col :span="1.5">
@@ -61,7 +62,7 @@
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="selection" width="55" align="center"/>
         <el-table-column
           prop="machineryCode"
           label="设备编码"
@@ -70,6 +71,14 @@
           prop="machineryName"
           label="设备名称"
         ></el-table-column>
+        <el-table-column
+          prop="machineryImg"
+          label="设备图"
+        >
+          <template slot-scope="scope">
+            <img :src="scope.row.machineryImg" alt="" style="width: 50px; height: 50px;"/>
+          </template>
+        </el-table-column>
         <el-table-column
           label="设备详情"
           align="center"
@@ -81,7 +90,7 @@
               size="mini"
               type="text"
               @click="handleLook(scope.row)"
-              >查看
+            >查看
             </el-button>
           </template>
         </el-table-column>
@@ -98,7 +107,7 @@
               icon="el-icon-edit"
               @click="handleUpdate(scope.row)"
               v-hasPermi="['iscs:machinery:edit']"
-              >编辑
+            >编辑
             </el-button>
             <el-button
               v-no-more-click
@@ -107,14 +116,16 @@
               icon="el-icon-delete"
               @click="handleDelete(scope.row)"
               v-hasPermi="['iscs:machinery:remove']"
-              >删除
+            >删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <!-- LOTO站 -->
-    <div class="loto"></div>
+    <div class="loto">
+      <MapData v-if="tabPosition=='Loto'" :machineryId="this.$route.query.machineryId"></MapData>
+    </div>
     <!-- SOP列表 -->
     <div class="sopList" v-if="this.tabPosition == 'sopList'">
       <el-row :gutter="10" class="mb8">
@@ -127,7 +138,7 @@
             size="mini"
             @click="handleAdd"
             v-hasPermi="['iscs:machinery:add']"
-            >新增
+          >新增
           </el-button>
         </el-col>
         <el-col :span="1.5">
@@ -140,20 +151,10 @@
             :disabled="multiple"
             @click="handleDelete"
             v-hasPermi="['mes:hw:information:batchremove']"
-            >批量删除</el-button
+          >批量删除
+          </el-button
           >
         </el-col>
-        <!-- <el-col :span="1.5">
-          <el-button
-            v-no-more-click
-            type="info"
-            plain
-            icon="el-icon-sort"
-            size="mini"
-            @click="toggleExpandAll"
-            >展开/折叠
-          </el-button>
-        </el-col> -->
         <right-toolbar
           :showSearch.sync="showSearch"
           @queryTable="getList"
@@ -163,17 +164,17 @@
       <el-table
         v-if="refreshTable"
         v-loading="loading"
-        :data="deptList"
+        :data="SopList"
         row-key="machineryId"
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="selection" width="55" align="center"/>
 
         <el-table-column
-          prop="machineryName"
-          label="岗位设备名称"
+          prop="sopName"
+          label="sop名称"
         ></el-table-column>
         <el-table-column
           prop="machineryName"
@@ -192,7 +193,7 @@
               icon="el-icon-edit"
               @click="handleUpdate(scope.row)"
               v-hasPermi="['iscs:machinery:edit']"
-              >编辑
+            >编辑
             </el-button>
             <!-- <el-button
                 v-no-more-click
@@ -211,7 +212,7 @@
               icon="el-icon-delete"
               @click="handleDelete(scope.row)"
               v-hasPermi="['iscs:machinery:remove']"
-              >删除
+            >删除
             </el-button>
           </template>
         </el-table-column>
@@ -220,7 +221,7 @@
     <!-- 添加或修改部门对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="上级" prop="parentId">
+        <el-form-item label="所属工艺" prop="parentId">
           <treeselect
             v-model="form.parentId"
             :options="machineryOptions"
@@ -229,18 +230,18 @@
           />
         </el-form-item>
 
-        <el-form-item label="设备/工艺名称" prop="machineryName">
+        <el-form-item label="设备名称" prop="machineryName">
           <el-input
             v-model="form.machineryName"
-            placeholder="请输入设备/工艺名称"
+            placeholder="请输入设备名称"
           />
         </el-form-item>
         <el-row>
           <el-col :span="18">
-            <el-form-item label="设备/工艺编号" prop="machineryCode">
+            <el-form-item label="设备编号" prop="machineryCode">
               <el-input
                 v-model="form.machineryCode"
-                placeholder="请输入设备/工艺编号"
+                placeholder="请输入设备编号"
               />
             </el-form-item>
           </el-col>
@@ -278,14 +279,14 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="设备/工艺类型" prop="machineryType">
-          <el-input
-            v-model="form.machineryType"
-            placeholder="请输入设备/工艺类型"
-          />
-        </el-form-item>
+        <!--        <el-form-item label="设备类型" prop="machineryType">-->
+        <!--          <el-input-->
+        <!--            v-model="form.machineryType"-->
+        <!--            placeholder="请输入设备类型"-->
+        <!--          />-->
+        <!--        </el-form-item>-->
 
-        <el-form-item label="工艺图" prop="machineryImg">
+        <el-form-item label="设备图" prop="machineryImg">
           <ImageUploadSingle
             :limit="1"
             :value="form.machineryImg"
@@ -297,7 +298,8 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button v-no-more-click type="primary" @click="submitForm"
-          >确 定</el-button
+        >确 定
+        </el-button
         >
         <el-button v-no-more-click @click="cancel">取 消</el-button>
       </div>
@@ -311,25 +313,27 @@ import {
   addTechnology,
   updateTechnology,
   delTechnology,
-  getTechnologyInfo,
-} from "@/api/system/machinery";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import { genCode } from "@/api/system/autocode/rule";
-import { listMarsDept } from "@/api/system/marsdept";
-import { listLoto } from "@/api/mes/lotoStation/lotoStation";
+  getTechnologyInfo
+} from '@/api/system/machinery'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { genCode } from '@/api/system/autocode/rule'
+import { listMarsDept } from '@/api/system/marsdept'
+import { listLoto } from '@/api/mes/lotoStation/lotoStation'
+import MapData from '@/views/system/technology/technologyDetail/MapData.vue'
+import { getIsMarsSopPage } from '@/api/mes/sop/sopindex'
 
 export default {
-  name: "Dept",
-  dicts: ["sys_normal_disable"],
-  components: { Treeselect },
+  name: 'Dept',
+  dicts: ['sys_normal_disable'],
+  components: { Treeselect, MapData },
   data() {
     return {
       // 遮罩层
       loading: true,
       //自动生成编码
       autoGenFlag: false,
-      tabPosition: "deviceList",
+      tabPosition: 'deviceList',
       // 非多个禁用
       multiple: true,
       // 显示搜索条件
@@ -343,7 +347,7 @@ export default {
       // 电柜
       lotoOptions: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 是否展开，默认全部展开
@@ -355,259 +359,282 @@ export default {
         pages: 1,
         size: -1,
         machineryName: undefined,
-        machineryCode: undefined,
+        machineryCode: undefined
       },
       LotoOptions: [], //电柜绑定
       // 表单参数
-      form: {},
+      form: {
+        machineryType: '设备',
+        machineryId: undefined,
+      },
+      SopList: [],//sopLisT
       // 表单校验
       rules: {
         machineryCode: [
-          { required: true, message: "设备/工艺编码不能为空", trigger: "blur" },
+          { required: true, message: '设备编码不能为空', trigger: 'blur' }
         ],
         machineryName: [
-          { required: true, message: "设备/工艺名称不能为空", trigger: "blur" },
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
         ],
         workstationId: [
-          { required: true, message: "岗位不能为空", trigger: "blur" },
+          { required: true, message: '岗位不能为空', trigger: 'blur' }
         ],
-        lotoId: [{ required: true, message: "电柜不能为空", trigger: "blur" }],
-      },
-    };
+        lotoId: [{ required: true, message: '电柜不能为空', trigger: 'blur' }]
+      }
+    }
   },
   created() {
-    this.getList();
+    this.getList()
+    this.form.machineryId = this.$route.query.machineryId
   },
   watch: {
-    "form.workstationId": function (newVal, oldVal) {
+    'form.workstationId': function(newVal, oldVal) {
       if (newVal) {
         const data = {
           pasge: 1,
           size: -1,
-          workstationId: this.form.workstationId,
-        };
+          workstationId: this.form.workstationId
+        }
         listLoto(data).then((response) => {
           this.LotoOptions = response.data.records.map((item) => {
             return {
               value: item.lotoId,
-              label: item.lotoName,
-            };
-          });
-        });
+              label: item.lotoName
+            }
+          })
+        })
       }
     },
     // 监听 tabPosition 的变化
     tabPosition(newVal) {
-      if (newVal === "craftInformation") {
+      if (newVal === 'craftInformation') {
         // 当 tabPosition 为 "craftInformation" 时跳转
-        this.$router.push("/technology/technologyList");
+        this.$router.push('/technology/technologyList')
       }
-    },
+    }
   },
   methods: {
     /** 查询部门列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listTechnology(this.queryParams).then((response) => {
         debugger;
+        const filterData = response.data.records.filter(item => {
+          return item.parentId == this.$route.query.machineryId
+        })
         this.deptList = this.handleTree(
-          response.data.records,
-          "machineryId",
-          "parentId"
-        );
+          filterData,
+          'machineryId',
+          'parentId'
+        )
         this.machineryOptions = this.handleTree(
           response.data.records,
-          "machineryId",
-          "parentId"
-        );
-        console.log(this.deptList, "设备/工艺列表");
-        this.loading = false;
-      });
+          'machineryId',
+          'parentId'
+        )
+        console.log(this.deptList, '设备列表')
+        this.loading = false
+      })
       const data = {
         pasge: 1,
-        size: -1,
-      };
+        size: -1
+      }
       listMarsDept(data).then((response) => {
         this.marsOptions = this.handleTree(
           response.data.records,
-          "workstationId",
-          "parentId"
-        );
-      });
+          'workstationId',
+          'parentId'
+        )
+      })
       listLoto(data).then((response) => {
         this.LotoOptions = response.data.records.map((item) => {
           return {
             value: item.lotoId,
-            label: item.lotoName,
-          };
-        });
+            label: item.lotoName
+          }
+        })
       });
+      const dataSop={
+        pasge: 1,
+        size:-1,
+        machineryId:this.$route.query.machineryId
+      }
+      getIsMarsSopPage(dataSop).then(response => {
+        debugger;
+        this.SopList = response.data.records
+        this.loading = false
+      })
     },
     /** 转换部门数据结构 */
     Marsnormalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children;
+        delete node.children
       }
       return {
         id: node.workstationId,
         label: node.workstationName,
-        children: node.children,
-      };
+        children: node.children
+      }
     },
     normalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children;
+        delete node.children
       }
       return {
         id: node.machineryId,
         label: node.machineryName,
-        children: node.children,
-      };
+        children: node.children
+      }
     },
     // 地图预览
     look(row) {
-      console.log(row, "row预览");
-      const data = row.lotoId;
+      console.log(row, 'row预览')
+      const data = row.lotoId
       this.$router.push(
         `/system/technology/technologyList/index/MapData?lotoId=${data}&machineryId=${row.machineryId}`
-      );
+      )
       // this.dialogVisibleMap = true; // 显示地图预览弹框
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
       this.form = {
         machineryId: undefined,
         parentId: undefined,
-        machineryName: undefined,
-      };
-      this.autoGenFlag = false;
-      this.resetForm("form");
+        machineryName: undefined
+      }
+      this.autoGenFlag = false
+      this.resetForm('form')
     },
     //自动生成编码
     handleAutoGenChange(autoGenFlag) {
       if (autoGenFlag) {
-        genCode("TECHNOLOGY_CODE").then((response) => {
-          console.log(response, "设备工艺编码");
-          this.form.machineryCode = response;
-        });
+        genCode('TECHNOLOGY_CODE').then((response) => {
+          console.log(response, '设备工艺编码')
+          this.form.machineryCode = response
+        })
       } else {
-        this.form.machineryCode = null;
+        this.form.machineryCode = null
       }
     },
     //图标上传成功
     handleIconUplaoded(imgUrl) {
-      this.form.machineryImg = imgUrl[0].url;
+      this.form.machineryImg = imgUrl[0].url
     },
     // 图标移除
     handleIconRemoved(imgUrl) {
-      this.form.machineryImg = null;
+      this.form.machineryImg = null
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.getList();
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
 
     /** 展开/折叠操作 */
     toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
+      this.refreshTable = false
+      this.isExpandAll = !this.isExpandAll
       this.$nextTick(() => {
-        this.refreshTable = true;
-      });
+        this.refreshTable = true
+      })
     },
     /** 新增按钮操作 */
     handleAdd(row) {
-      this.reset();
+      this.reset()
       if (row != null && row.machineryId) {
-        this.form.parentId = row.machineryId;
+        this.form.parentId = row.machineryId
       } else {
-        this.form.parentId = 0;
+        this.form.parentId = this.$route.query.machineryId
       }
-      this.open = true;
-      this.title = "添加部门";
+
+      this.open = true
+      this.title = '添加设备'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       getTechnologyInfo(row.machineryId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改部门";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改设备'
+      })
     },
 
     /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
+    submitForm: function() {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.machineryId != undefined) {
             updateTechnology(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addTechnology(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
-      this.codes = selection.map((item) => item.machineryCode);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
+      this.ids = selection.map((item) => item.id)
+      this.codes = selection.map((item) => item.machineryCode)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       this.$modal
         .confirm('是否确认删除名称为"' + row.machineryName + '"的数据项？')
-        .then(function () {
-          return delTechnology(row.machineryId);
+        .then(function() {
+          return delTechnology(row.machineryId)
         })
         .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
         })
-        .catch(() => {});
-    },
-  },
-};
+        .catch(() => {
+        })
+    }
+  }
+}
 </script>
 <style scoped>
 .app-container {
   width: 100%;
   height: 100%;
 }
+
 .left {
   width: 15%;
   height: 100%;
   margin-right: 10px;
   /* background: green; */
 }
+
 .deptTree {
   width: 100%;
   height: 90%;
   /* background: pink; */
 }
+
 .right {
   width: 83%;
   height: 100%;
   /* background: yellow; */
 }
-</style>
+</style>

src/views/system/technology/technologyDetail/deviceDetail.vue

@@ -0,0 +1,514 @@
+<template>
+  <div class="app-container">
+    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
+      <el-radio-button label="deviceInformation">设备信息</el-radio-button>
+      <el-radio-button label="Loto">锁定站</el-radio-button>
+
+    </el-radio-group>
+
+    <!-- 设备列表 -->
+    <div class="device" v-if="this.tabPosition == 'deviceList'">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['iscs:machinery:add']"
+          >新增
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="danger"
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['mes:hw:information:batchremove']"
+          >批量删除</el-button
+          >
+        </el-col>
+        <!-- <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="info"
+            plain
+            icon="el-icon-sort"
+            size="mini"
+            @click="toggleExpandAll"
+            >展开/折叠
+          </el-button>
+        </el-col> -->
+        <right-toolbar
+          :showSearch.sync="showSearch"
+          @queryTable="getList"
+        ></right-toolbar>
+      </el-row>
+
+      <el-table
+        v-if="refreshTable"
+        v-loading="loading"
+        :data="deptList"
+        row-key="machineryId"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column
+          prop="machineryCode"
+          label="设备编码"
+        ></el-table-column>
+        <el-table-column
+          prop="machineryName"
+          label="设备名称"
+        ></el-table-column>
+        <el-table-column
+          label="设备详情"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-no-more-click
+              size="mini"
+              type="text"
+              @click="handleLook(scope.row)"
+            >查看
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-no-more-click
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['iscs:machinery:edit']"
+            >编辑
+            </el-button>
+            <el-button
+              v-no-more-click
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['iscs:machinery:remove']"
+            >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- LOTO站 -->
+    <div class="loto">
+      <MapData v-if="tabPosition=='Loto'" :machineryId="this.$route.query.machineryId"></MapData>
+    </div>
+
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="上级" prop="parentId">
+          <treeselect
+            v-model="form.parentId"
+            :options="machineryOptions"
+            :normalizer="normalizer"
+            placeholder="选择上级"
+          />
+        </el-form-item>
+
+        <el-form-item label="设备/工艺名称" prop="machineryName">
+          <el-input
+            v-model="form.machineryName"
+            placeholder="请输入设备/工艺名称"
+          />
+        </el-form-item>
+        <el-row>
+          <el-col :span="18">
+            <el-form-item label="设备/工艺编号" prop="machineryCode">
+              <el-input
+                v-model="form.machineryCode"
+                placeholder="请输入设备/工艺编号"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="30">
+              <el-switch
+                v-model="autoGenFlag"
+                active-color="#13ce66"
+                active-text="自动生成"
+                @change="handleAutoGenChange(autoGenFlag)"
+              >
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="所属mars岗位" prop="workstationId">
+          <treeselect
+            v-model="form.workstationId"
+            :options="marsOptions"
+            :normalizer="Marsnormalizer"
+            placeholder="选择mars岗位"
+          />
+        </el-form-item>
+        <el-form-item label="所属电柜" prop="lotoId">
+          <el-select
+            style="width: 300px"
+            v-model="form.lotoId"
+            placeholder="请选择所属电柜"
+          >
+            <el-option
+              v-for="dict in LotoOptions"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备/工艺类型" prop="machineryType">
+          <el-input
+            v-model="form.machineryType"
+            placeholder="请输入设备/工艺类型"
+          />
+        </el-form-item>
+
+        <el-form-item label="工艺图" prop="machineryImg">
+          <ImageUploadSingle
+            :limit="1"
+            :value="form.machineryImg"
+            :fileSize="5"
+            @onUploaded="handleIconUplaoded"
+            @onRemoved="handleIconRemoved"
+          ></ImageUploadSingle>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button v-no-more-click type="primary" @click="submitForm"
+        >确 定</el-button
+        >
+        <el-button v-no-more-click @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listTechnology,
+  addTechnology,
+  updateTechnology,
+  delTechnology,
+  getTechnologyInfo,
+} from "@/api/system/machinery";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { genCode } from "@/api/system/autocode/rule";
+import { listMarsDept } from "@/api/system/marsdept";
+import { listLoto } from "@/api/mes/lotoStation/lotoStation";
+import MapData from '@/views/system/technology/technologyDetail/MapData.vue'
+
+export default {
+  name: "Dept",
+  dicts: ["sys_normal_disable"],
+  components: { MapData, Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      //自动生成编码
+      autoGenFlag: false,
+      tabPosition: "deviceInformation",
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 表格树数据
+      deptList: [],
+      // mars树选项
+      marsOptions: [],
+      //工艺树
+      machineryOptions: [],
+      // 电柜
+      lotoOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        pages: 1,
+        size: -1,
+        machineryName: undefined,
+        machineryCode: undefined,
+      },
+      LotoOptions: [], //电柜绑定
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        machineryCode: [
+          { required: true, message: "设备/工艺编码不能为空", trigger: "blur" },
+        ],
+        machineryName: [
+          { required: true, message: "设备/工艺名称不能为空", trigger: "blur" },
+        ],
+        workstationId: [
+          { required: true, message: "岗位不能为空", trigger: "blur" },
+        ],
+        lotoId: [{ required: true, message: "电柜不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  watch: {
+    "form.workstationId": function (newVal, oldVal) {
+      if (newVal) {
+        const data = {
+          pasge: 1,
+          size: -1,
+          workstationId: this.form.workstationId,
+        };
+        listLoto(data).then((response) => {
+          this.LotoOptions = response.data.records.map((item) => {
+            return {
+              value: item.lotoId,
+              label: item.lotoName,
+            };
+          });
+        });
+      }
+    },
+    // 监听 tabPosition 的变化
+    tabPosition(newVal) {
+      if (newVal === "craftInformation") {
+        // 当 tabPosition 为 "craftInformation" 时跳转
+        this.$router.push("/technology/technologyList");
+      }
+    },
+  },
+  methods: {
+    /** 查询部门列表 */
+    getList() {
+      this.loading = true;
+      listTechnology(this.queryParams).then((response) => {
+        debugger;
+        this.deptList = this.handleTree(
+          response.data.records,
+          "machineryId",
+          "parentId"
+        );
+        this.machineryOptions = this.handleTree(
+          response.data.records,
+          "machineryId",
+          "parentId"
+        );
+        console.log(this.deptList, "设备/工艺列表");
+        this.loading = false;
+      });
+      const data = {
+        pasge: 1,
+        size: -1,
+      };
+      listMarsDept(data).then((response) => {
+        this.marsOptions = this.handleTree(
+          response.data.records,
+          "workstationId",
+          "parentId"
+        );
+      });
+      listLoto(data).then((response) => {
+        this.LotoOptions = response.data.records.map((item) => {
+          return {
+            value: item.lotoId,
+            label: item.lotoName,
+          };
+        });
+      });
+    },
+    /** 转换部门数据结构 */
+    Marsnormalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.workstationId,
+        label: node.workstationName,
+        children: node.children,
+      };
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.machineryId,
+        label: node.machineryName,
+        children: node.children,
+      };
+    },
+    // 地图预览
+    look(row) {
+      console.log(row, "row预览");
+      const data = row.lotoId;
+      this.$router.push(
+        `/system/technology/technologyList/index/MapData?lotoId=${data}&machineryId=${row.machineryId}`
+      );
+      // this.dialogVisibleMap = true; // 显示地图预览弹框
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        machineryId: undefined,
+        parentId: undefined,
+        machineryName: undefined,
+      };
+      this.autoGenFlag = false;
+      this.resetForm("form");
+    },
+    //自动生成编码
+    handleAutoGenChange(autoGenFlag) {
+      if (autoGenFlag) {
+        genCode("TECHNOLOGY_CODE").then((response) => {
+          console.log(response, "设备工艺编码");
+          this.form.machineryCode = response;
+        });
+      } else {
+        this.form.machineryCode = null;
+      }
+    },
+    //图标上传成功
+    handleIconUplaoded(imgUrl) {
+      this.form.machineryImg = imgUrl[0].url;
+    },
+    // 图标移除
+    handleIconRemoved(imgUrl) {
+      this.form.machineryImg = null;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      if (row != null && row.machineryId) {
+        this.form.parentId = row.machineryId;
+      } else {
+        this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加部门";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      getTechnologyInfo(row.machineryId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改部门";
+      });
+    },
+
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.machineryId != undefined) {
+            updateTechnology(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addTechnology(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.codes = selection.map((item) => item.machineryCode);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal
+        .confirm('是否确认删除名称为"' + row.machineryName + '"的数据项？')
+        .then(function () {
+          return delTechnology(row.machineryId);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style scoped>
+.app-container {
+  width: 100%;
+  height: 100%;
+}
+.left {
+  width: 15%;
+  height: 100%;
+  margin-right: 10px;
+  /* background: green; */
+}
+.deptTree {
+  width: 100%;
+  height: 90%;
+  /* background: pink; */
+}
+.right {
+  width: 83%;
+  height: 100%;
+  /* background: yellow; */
+}
+</style>