sop和作业票隔离点可视化交互功能完善

src/api/mes/wa/workarea.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+
+// 查询硬件类型-列表
+export function listWordarea(query) {
+  return request({
+    url: '/iscs/workarea/getIsWorkareaPage',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取硬件类型详细信息
+export function getWorkareaInfo(repairId) {
+  return request({
+    url: '/iscs/workarea/selectIsWorkareaById/?id=' + repairId,
+    method: 'get'
+  })
+}
+// 获取所有车间
+export function listAllWorkshop(){
+  return request({
+    url: '/mes/md/workshop/listAll',
+    method: 'get'
+  })
+}
+
+//新增硬件类型
+export function addWorkarea(query) {
+  return request({
+    url: '/iscs/workarea/insertIsWorkarea',
+    method: 'post',
+    data: query
+  })
+}
+
+// 修改设备维修单
+export function updateWorkarea(data) {
+  return request({
+    url: '/iscs/workarea/updateIsWorkarea',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除设备维修单
+export function delWorkarea(repairId) {
+  return request({
+    url: '/iscs/workarea/deleteIsWorkareaByWorkareaIds?ids='+ repairId,
+    method: 'post'
+
+  })
+}

src/views/mes/job/jobm/SeparationPoint.vue

@@ -13,84 +13,16 @@ export default {
       layer: null,
       selectedStates: [], // 用于存储每个元素的选中状态
       selectedText: [], // 用于存储未选中的元素文本
+      rects:[],//白色rect合集
+      texts:[],//白色text合集
+      redrects:[],//红色rect合集
+      redtexts:[],//白色text合集
     };
   },
   mounted() {
     this.initKonva();
   },
   methods: {
-    // initKonva() {
-    //   // 创建舞台
-    //   this.stage = new Konva.Stage({
-    //     container: this.$refs.container, // 容器元素
-    //     width: 1250,
-    //     height: 830,
-    //     fill: 'black'
-    //   })
-
-    //   // 创建图层
-    //   this.layer = new Konva.Layer()
-
-    //   // 创建底图
-    //   const bgImage = new Image()
-    //   bgImage.src = require('@/assets/images/table.png')
-    //   bgImage.onload = () => {
-    //     const KnovaImage = new Konva.Image({
-    //       x: 350,
-    //       y: 10,
-    //       image: bgImage,
-    //       width: 500,
-    //       height: 790,
-    //       draggable: false
-    //     })
-    //     this.layer.add(KnovaImage)
-
-    //     this.layer.draw()
-    //   }
-    // // 调用函数
-    //   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.on('wheel', (e) => {
-    //     e.evt.preventDefault()
-
-    //     const scaleBy = 1.05 // 缩放因子
-    //     const oldScale = this.stage.scaleX() // 获取当前缩放比例
-    //     const pointer = this.stage.getPointerPosition() // 获取鼠标位置
-
-    //     const mousePointTo = {
-    //       x: (pointer.x - this.stage.x()) / oldScale,
-    //       y: (pointer.y - this.stage.y()) / oldScale
-    //     }
-
-    //     // 根据滚轮滚动的方向决定缩放
-    //     const newScale = e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy
-
-    //     this.stage.scale({ x: newScale, y: newScale })
-
-    //     const newPos = {
-    //       x: pointer.x - mousePointTo.x * newScale,
-    //       y: pointer.y - mousePointTo.y * newScale
-    //     }
-    //     this.stage.position(newPos)
-    //     this.stage.batchDraw()
-    //   })
-
-    //   this.stage.on('mousedown', function() {
-    //     this.stage.container().style.cursor = 'move'
-    //   }.bind(this))
-
-    //   this.stage.on('mouseup', function() {
-    //     this.stage.container().style.cursor = 'default'
-    //   }.bind(this))
-    //   this.stage.draggable(true)
-    // },
-
     initKonva() {
       // 创建舞台
       this.stage = new Konva.Stage({
@@ -160,113 +92,13 @@ export default {
 
       this.layer.draw();
     },
-    // renderGrid(
-    //   imageSrc,
-    //   rows,
-    //   cols,
-    //   startX,
-    //   startY,
-    //   xOffset,
-    //   yOffset,
-    //   imageWidth,
-    //   imageHeight,
-    //   rectWidth,
-    //   rectHeight
-    // ) {
-    //   // 初始化状态数组
-    //   this.selectedStates = new Array(rows * cols).fill(false);
-
-    //   for (let row = 0; row < rows; row++) {
-    //     for (let col = 0; col < cols; col++) {
-    //       const x = startX + col * xOffset;
-    //       const y = startY + row * yOffset;
-    //       const index = row * cols + col;
-
-    //       const point = new Image();
-    //       point.src = imageSrc;
-    //       point.onload = () => {
-    //         const knovaImage = new Konva.Image({
-    //           x: x,
-    //           y: y,
-    //           image: point,
-    //           width: imageWidth,
-    //           height: imageHeight,
-    //           draggable: false,
-    //         });
-
-    //         knovaImage.on("click", () => {
-    //           // 切换选中状态
-    //           this.selectedStates[index] = !this.selectedStates[index];
-
-    //           // 更新 selectedText 数组
-    //           if (this.selectedStates[index]) {
-    //             // 元素被选中，替换成选中的图片
-    //             point.src = require("@/assets/images/localSetSelect.jpg");
-
-    //             // 检查是否已经在 selectedText 数组中
-    //             if (
-    //               !this.selectedText.some((item) => item.value === index + 1)
-    //             ) {
-    //               // 元素被选中，添加到 selectedText 数组
-    //               this.selectedText.push({
-    //                 label: `E-${index + 1}`,
-    //                 value: index + 1,
-    //               });
-    //             }
-    //           } else {
-    //             // 元素未选中，恢复原图片
-    //             point.src = imageSrc;
-
-    //             // 元素未选中，从 selectedText 数组中移除
-    //             const textIndex = this.selectedText.findIndex(
-    //               (item) => item.value === index + 1
-    //             );
-    //             if (textIndex !== -1) {
-    //               this.selectedText.splice(textIndex, 1); // 如果元素在 selectedText 中，移除它
-    //             }
-    //           }
-
-    //           knovaImage.image(point); // 更新图片
-    //           this.layer.draw(); // 重绘图层
-
-    //           // console.log(this.selectedText, '子组件选中的隔离点');
-
-    //           // 传递选中的元素文本到父组件
-    //           this.$emit("selection-changed", this.selectedText);
-    //         });
-
-    //         this.layer.add(knovaImage);
-
-    //         const rect = new Konva.Rect({
-    //           x: x - 3,
-    //           y: y + imageHeight + 10,
-    //           width: rectWidth,
-    //           height: rectHeight,
-    //           cornerRadius: 10,
-    //           stroke: "red",
-    //           strokeWidth: 2,
-    //           fill: "white",
-    //         });
-    //         this.layer.add(rect);
-
-    //         const text = new Konva.Text({
-    //           x: x + 12,
-    //           y: y + imageHeight + 15,
-    //           fontSize: 20,
-    //           text: `E-${index + 1}`,
-    //           fontFamily: "Calibri",
-    //           fill: "red",
-    //         });
-    //         this.layer.add(text);
-
-    //         this.layer.draw();
-    //       };
-    //     }
-    //   }
-    // },
-
     renderGrid(imageSrc) {
-      this.selectedStates = [];
+      this.selectedStates = {}; // 用对象来存储选中状态，键为文字内容
+      this.rects = {};
+      this.texts = {};
+      this.redrects = {};
+      this.redtexts = {};
+      this.selectedText = [];
 
       const positions = [
         { row: 2, col: 9 }, // E-1
@@ -292,6 +124,7 @@ export default {
       positions.forEach((pos, index) => {
         const x = pos.col * 50; // 每个单元格宽度为50
         const y = pos.row * 50; // 每个单元格高度为50
+        const labelText = `E-${index + 1}`; // 对应的文字
 
         const point = new Image();
         point.src = imageSrc;
@@ -306,30 +139,65 @@ export default {
           });
 
           knovaImage.on("click", () => {
-            this.selectedStates[index] = !this.selectedStates[index];
-
-            if (this.selectedStates[index]) {
-              point.src = require("@/assets/images/localSetSelect.jpg");
+            // 切换选中状态，基于文本内容
+            this.selectedStates[labelText] = !this.selectedStates[labelText];
+
+            // 判断当前是否选中
+            if (this.selectedStates[labelText]) {
+              // 选中状态
+              // 显示红色矩形和文字，隐藏普通矩形和文字
+              this.rects[labelText].visible(false);
+              this.texts[labelText].visible(false);
+              this.redrects[labelText].visible(true);
+              this.redtexts[labelText].visible(true);
+
+              // 切换图片为选中状态的图片
+              const selectedImage = new Image();
+              selectedImage.src = require('@/assets/images/localSetSelect.jpg'); // 选中的图片路径
+              selectedImage.onload = () => {
+                knovaImage.image(selectedImage); // 更新图像
+                this.layer.draw(); // 更新图层
+              };
+
+              // 将选中的 labelText 推入数组
               this.selectedText.push({
-                label: `E-${index + 1}`,
+                label: labelText,
                 value: index + 1,
               });
+
             } else {
-              point.src = imageSrc;
+              // 取消选中状态
+              // 显示普通矩形和文字，隐藏红色矩形和文字
+              this.rects[labelText].visible(true);
+              this.texts[labelText].visible(true);
+              this.redrects[labelText].visible(false);
+              this.redtexts[labelText].visible(false);
+
+              // 切换图片为未选中状态的图片
+              const normalImage = new Image();
+              normalImage.src = imageSrc; // 未选中的默认图片路径
+              normalImage.onload = () => {
+                knovaImage.image(normalImage); // 更新图像
+                this.layer.draw(); // 更新图层
+              };
+
+              // 从选中数组中移除该项
               this.selectedText = this.selectedText.filter(
-                (item) => item.value !== index + 1
+                (item) => item.label !== labelText
               );
             }
 
-            knovaImage.image(point);
+            // 最后确保图层重新渲染
             this.layer.draw();
 
             // 传递选中的元素文本到父组件
             this.$emit("selection-changed", this.selectedText);
           });
 
+
           this.layer.add(knovaImage);
 
+          // 普通矩形
           const rect = new Konva.Rect({
             x: x - 3,
             y: y + 55,
@@ -341,21 +209,58 @@ export default {
             fill: "white",
           });
           this.layer.add(rect);
+          this.rects[labelText] = rect; // 用文字作为键存储
 
+          // 普通文字
           const text = new Konva.Text({
             x: x + 12,
             y: y + 60,
             fontSize: 20,
-            text: `E-${index + 1}`,
+            text: labelText,
             fontFamily: "Calibri",
             fill: "red",
           });
           this.layer.add(text);
+          this.texts[labelText] = text; // 用文字作为键存储
+
+          // 红色矩形（初始隐藏）
+          const redrect = new Konva.Rect({
+            x: x - 3,
+            y: y + 55,
+            width: 60,
+            height: 25,
+            cornerRadius: 10,
+            stroke: "red",
+            strokeWidth: 2,
+            fill: "red",
+            visible: false,
+          });
+          this.layer.add(redrect);
+          this.redrects[labelText] = redrect; // 用文字作为键存储
+
+          // 红色文字（初始隐藏）
+          const redtext = new Konva.Text({
+            x: x + 12,
+            y: y + 60,
+            fontSize: 20,
+            text: labelText,
+            fontFamily: "Calibri",
+            fill: "white",
+            visible: false,
+          });
+          this.layer.add(redtext);
+          this.redtexts[labelText] = redtext; // 用文字作为键存储
+
           this.layer.draw();
         };
       });
     },
 
+
+
+
+
+
     //     methods结束
   },
 };

src/views/mes/sop/sopm/IsolationLeft.vue

@@ -3,20 +3,24 @@
 </template>
 
 <script>
-import Konva from 'konva'
+import Konva from "konva";
 
 export default {
-  name: 'KonvaExample',
+  name: "KonvaExample",
   data() {
     return {
       stage: null,
       layer: null,
       selectedStates: [], // 用于存储每个元素的选中状态
-      selectedText: [] // 用于存储未选中的元素文本
-    }
+      selectedText: [], // 用于存储未选中的元素文本
+      rects:[],//白色rect合集
+      texts:[],//白色text合集
+      redrects:[],//红色rect合集
+      redtexts:[],//白色text合集
+    };
   },
   mounted() {
-    this.initKonva()
+    this.initKonva();
   },
   methods: {
     initKonva() {
@@ -32,7 +36,7 @@ export default {
 
       // 创建底图
       const bgImage = new Image();
-      bgImage.src = require('@/assets/images/table.png');
+      bgImage.src = require("@/assets/images/table.png");
       bgImage.onload = () => {
         const knovaImage = new Konva.Image({
           x: 330,
@@ -47,10 +51,10 @@ export default {
       };
 
       // 绘制无限网格
-      this.drawGrid(50, 50, '#e0e0e0'); // 每个单元格50x50，浅灰色网格
+      this.drawGrid(50, 50, "#e0e0e0"); // 每个单元格50x50，浅灰色网格
 
       // 渲染数据
-      const imageSrc = require('@/assets/images/localSetIcon.jpg'); // 图片路径
+      const imageSrc = require("@/assets/images/localSetIcon.jpg"); // 图片路径
       this.renderGrid(imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25);
 
       // 将图层添加到舞台
@@ -61,7 +65,7 @@ export default {
       this.stage.draggable(false);
     },
 
-// 绘制无限网格
+    // 绘制无限网格
     drawGrid(cellWidth, cellHeight, gridColor) {
       const width = 1270;
       const height = 830;
@@ -89,7 +93,12 @@ export default {
       this.layer.draw();
     },
     renderGrid(imageSrc) {
-      this.selectedStates = [];
+      this.selectedStates = {}; // 用对象来存储选中状态，键为文字内容
+      this.rects = {};
+      this.texts = {};
+      this.redrects = {};
+      this.redtexts = {};
+      this.selectedText = [];
 
       const positions = [
         { row: 2, col: 9 }, // E-1
@@ -97,24 +106,25 @@ export default {
         { row: 2, col: 13 }, // E-3
         { row: 4, col: 9 }, // E-4
         { row: 4, col: 11 }, // E-5
-        { row: 4, col: 13 },  // E-6
+        { row: 4, col: 13 }, // E-6
         { row: 6, col: 9 }, // E-7
         { row: 6, col: 11 }, // E-8
         { row: 6, col: 13 }, // E-9
         { row: 8, col: 9 }, // E-10
         { row: 8, col: 11 }, // E-11
-        { row: 8, col: 13 },  // E-12
+        { row: 8, col: 13 }, // E-12
         { row: 10, col: 9 }, // E-13
         { row: 10, col: 11 }, // E-14
         { row: 10, col: 13 }, // E-15
         { row: 12, col: 9 }, // E-16
         { row: 12, col: 11 }, // E-17
-        { row: 12, col: 13 },  // E-18
+        { row: 12, col: 13 }, // E-18
       ];
 
       positions.forEach((pos, index) => {
         const x = pos.col * 50; // 每个单元格宽度为50
         const y = pos.row * 50; // 每个单元格高度为50
+        const labelText = `E-${index + 1}`; // 对应的文字
 
         const point = new Image();
         point.src = imageSrc;
@@ -128,56 +138,126 @@ export default {
             draggable: false,
           });
 
-          knovaImage.on('click', () => {
-            this.selectedStates[index] = !this.selectedStates[index];
+          knovaImage.on("click", () => {
+            // 切换选中状态，基于文本内容
+            this.selectedStates[labelText] = !this.selectedStates[labelText];
+
+            // 判断当前是否选中
+            if (this.selectedStates[labelText]) {
+              // 选中状态
+              // 显示红色矩形和文字，隐藏普通矩形和文字
+              this.rects[labelText].visible(false);
+              this.texts[labelText].visible(false);
+              this.redrects[labelText].visible(true);
+              this.redtexts[labelText].visible(true);
+
+              // 切换图片为选中状态的图片
+              const selectedImage = new Image();
+              selectedImage.src = require('@/assets/images/localSetSelect.jpg'); // 选中的图片路径
+              selectedImage.onload = () => {
+                knovaImage.image(selectedImage); // 更新图像
+                this.layer.draw(); // 更新图层
+              };
+
+              // 将选中的 labelText 推入数组
+              this.selectedText.push({
+                label: labelText,
+                value: index + 1,
+              });
 
-            if (this.selectedStates[index]) {
-              point.src = require('@/assets/images/localSetSelect.jpg');
-              this.selectedText.push({ label: `E-${index + 1}`, value: index + 1 });
             } else {
-              point.src = imageSrc;
-              this.selectedText = this.selectedText.filter(item => item.value !== index + 1);
+              // 取消选中状态
+              // 显示普通矩形和文字，隐藏红色矩形和文字
+              this.rects[labelText].visible(true);
+              this.texts[labelText].visible(true);
+              this.redrects[labelText].visible(false);
+              this.redtexts[labelText].visible(false);
+
+              // 切换图片为未选中状态的图片
+              const normalImage = new Image();
+              normalImage.src = imageSrc; // 未选中的默认图片路径
+              normalImage.onload = () => {
+                knovaImage.image(normalImage); // 更新图像
+                this.layer.draw(); // 更新图层
+              };
+
+              // 从选中数组中移除该项
+              this.selectedText = this.selectedText.filter(
+                (item) => item.label !== labelText
+              );
             }
 
-            knovaImage.image(point);
+            // 最后确保图层重新渲染
             this.layer.draw();
 
             // 传递选中的元素文本到父组件
-            this.$emit('selection-changed', this.selectedText);
+            this.$emit("selection-changed", this.selectedText);
           });
 
           this.layer.add(knovaImage);
 
+          // 普通矩形
           const rect = new Konva.Rect({
             x: x - 3,
             y: y + 55,
             width: 60,
             height: 25,
             cornerRadius: 10,
-            stroke: 'red',
+            stroke: "red",
             strokeWidth: 2,
-            fill: 'white',
+            fill: "white",
           });
           this.layer.add(rect);
+          this.rects[labelText] = rect; // 用文字作为键存储
 
+          // 普通文字
           const text = new Konva.Text({
             x: x + 12,
             y: y + 60,
             fontSize: 20,
-            text: `E-${index + 1}`,
-            fontFamily: 'Calibri',
-            fill: 'red',
+            text: labelText,
+            fontFamily: "Calibri",
+            fill: "red",
           });
           this.layer.add(text);
+          this.texts[labelText] = text; // 用文字作为键存储
+
+          // 红色矩形（初始隐藏）
+          const redrect = new Konva.Rect({
+            x: x - 3,
+            y: y + 55,
+            width: 60,
+            height: 25,
+            cornerRadius: 10,
+            stroke: "red",
+            strokeWidth: 2,
+            fill: "red",
+            visible: false,
+          });
+          this.layer.add(redrect);
+          this.redrects[labelText] = redrect; // 用文字作为键存储
+
+          // 红色文字（初始隐藏）
+          const redtext = new Konva.Text({
+            x: x + 12,
+            y: y + 60,
+            fontSize: 20,
+            text: labelText,
+            fontFamily: "Calibri",
+            fill: "white",
+            visible: false,
+          });
+          this.layer.add(redtext);
+          this.redtexts[labelText] = redtext; // 用文字作为键存储
 
           this.layer.draw();
         };
       });
     },
-    //     methods结束
-  }
 
-}
+    //     methods结束
+  },
+};
 </script>
 
 <style scoped lang="scss">

src/views/mes/wa/workarea/index.vue

@@ -1,12 +1,461 @@
 <template>
-  <div>
-    <p>工作区域</p>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="工作区域编码" prop="workareaCode">
+        <el-input
+          v-model="queryParams.workareaCode"
+          placeholder="请输入隔离点编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="隔离点名称" prop="teamCode">
+        <el-input
+          v-model="queryParams.teamCode"
+          placeholder="请输入隔离点名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="calendarType">
+        <el-select v-model="queryParams.calendarType" placeholder="状态">
+          <el-option>正常</el-option>
+          <el-option>异常</el-option>
+          <!--          <el-option-->
+          <!--            v-for="dict in dict.type.mes_calendar_type"-->
+          <!--            :key="dict.value"-->
+          <!--            :label="dict.label"-->
+          <!--            :value="dict.value"-->
+          <!--          />-->
+        </el-select>
+      </el-form-item>
+      <el-form-item label="隔离点类型" prop="calendarType">
+        <el-select v-model="queryParams.calendarType" placeholder="请选择隔离点类型">
+          <el-option
+            v-for="dict in dict.type.mes_calendar_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="危险能量类型" prop="calendarType">
+        <el-select v-model="queryParams.calendarType" placeholder="请选择危险能量类型">
+          <el-option
+            v-for="dict in dict.type.mes_calendar_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="value2"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+        >
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['mes:spm:seg:add']"
+        >新增
+        </el-button>
+      </el-col>
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--          type="success"-->
+      <!--          plain-->
+      <!--          icon="el-icon-edit"-->
+      <!--          size="mini"-->
+      <!--          :disabled="single"-->
+      <!--          @click="handleUpdate"-->
+      <!--          v-hasPermi="['mes:cal:team:edit']"-->
+      <!--        >修改</el-button>-->
+      <!--      </el-col>-->
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['mes:spm:seg:batchremove']"
+        >批量删除
+        </el-button>
+      </el-col>
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--          type="warning"-->
+      <!--          plain-->
+      <!--          icon="el-icon-download"-->
+      <!--          size="mini"-->
+      <!--          @click="handleExport"-->
+      <!--          v-hasPermi="['mes:cal:team:export']"-->
+      <!--        >导出</el-button>-->
+      <!--      </el-col>-->
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="workareaList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="工作区域编码" align="center" prop="teamCode">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            @click="handleView(scope.row)"
+            v-hasPermi="['mes:spm:seg:query']"
+          >{{ scope.row.workareaCode }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="工作区域名称" align="center" prop="workareaName"/>
+      <el-table-column label="工作区域类型" align="center" prop="workareaType"/>
+      <el-table-column label="所属车间Id" align="center" prop="workshopId"/>
+
+      <el-table-column label="状态" align="center" prop="calendarType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.mes_calendar_type" :value="scope.row.calendarType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="地图" align="center" prop="map">
+        <template slot-scope="scope">
+          <img :src="scope.row.map" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark">
+      </el-table-column>
+
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['mes:spm:seg:edit']"
+          >编辑
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['mes:spm:seg:remove']"
+          >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.current"
+      :limit.sync="queryParams.size"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改班组对话框 -->
+    <el-dialog  :visible.sync="open" width="660px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <i></i>
+        <span class="title">{{ title }}</span>
+      </div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="区域Id" prop="workareaId">
+          <el-input style="width: 318px" v-model="form.workareaId" placeholder="请输入区域Id"       />
+        </el-form-item>
+        <el-form-item label="区域编码" prop="workareaCode" >
+          <el-input style="width: 318px"  v-model="form.workareaCode" placeholder="请输入区域编码" />
+        </el-form-item>
+        <el-form-item label="区域类型" prop="workareaType">
+          <el-input style="width: 318px"  v-model="form.workareaType" placeholder="请输入区域类型" />
+        </el-form-item>
+        <el-form-item label="所属车间" prop="workshopId">
+          <el-select style="width: 318px" v-model="form.workshopId" placeholder="请选择所属车间">
+            <el-option
+              v-for="dict in this.WorkShopListOptions"
+              :key="dict.key"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="地图" prop="map">
+          <ImageUpload :limit="1" :value="form.map" :fileSize="5" @onUploaded="handleImgUplaoded" @onRemoved="handleImgRemoved" ></ImageUpload>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input style="width: 318px" type="textarea"  v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
+        <el-button type="primary" @click="submitForm" v-else>确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-export default {};
-</script>
+import { listWordarea, getWorkareaInfo, addWorkarea, updateWorkarea, delWorkarea,listAllWorkshop } from '@/api/mes/wa/workarea'
+
+import { genCode } from '@/api/system/autocode/rule'
+
+
+export default {
+  name: 'Workarea',
+  dicts: ['mes_calendar_type'],
+  data() {
+    return {
+      //自动生成编码
+      autoGenFlag: false,
+      optType: undefined,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 班组表格数据
+      workareaList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        teamCode: null,
+        teamName: null,
+        calendarType: null
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
 
-<style>
-</style>
+      value2: '',
+
+      // 表单参数
+      form: {},
+      WorkShopListOptions:null,//所属车间下拉数据
+      EditId:null,//判断是否是编辑弹框的值
+      // 表单校验
+      rules: {
+        teamCode: [
+          { required: true, message: '班组编号不能为空', trigger: 'blur' }
+        ],
+        teamName: [
+          { required: true, message: '班组名称不能为空', trigger: 'blur' }
+        ],
+        calendarType: [
+          { required: true, message: '清选择班组类型', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getList()
+
+  },
+  methods: {
+    /** 查询班组列表 */
+    getList() {
+      this.loading = true
+      listWordarea(this.queryParams).then(response => {
+        this.workareaList = response.data.records;
+        this.total = response.data.total;
+        this.loading = false
+      })
+      // 获取所有车间信息
+      listAllWorkshop().then(response => {
+        console.log(response,'车间信息')
+        this.WorkShopListOptions = response.data.map((item) => {
+          return {
+            label:item.workshopName,
+            value:item.workshopId,
+            key:item.workshopCode,
+          }
+        })
+      })
+    },
+    //图片上传成功
+    handleImgUplaoded(imgUrl){
+      this.form.map = imgUrl;
+    },
+    //图片移除
+    handleImgRemoved(imgUrl){
+      this.form.map = null;
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        remark: null,
+        map: null,
+        workareaCode: null,
+        workareaId: null,
+        workareaName: null,
+        workareaType: null,
+        workshopId: null,
+
+      }
+      this.resetForm('form')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.current = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.teamId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加工作区域'
+      this.optType = 'add'
+    },
+    // 查询明细按钮操作
+    handleView(row) {
+      this.reset()
+      this.EditId = row.id || this.ids
+      getWorkareaInfo(this.EditId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '查看班组'
+        this.optType = 'view'
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+     this.EditId = row.id || this.ids
+      getWorkareaInfo(this.EditId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改工作区域信息'
+        this.optType = 'edit'
+      })
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.EditId != null) {
+            updateWorkarea(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addWorkarea(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const teamIds = row.id || this.ids
+      this.$modal.confirm('是否确认删除班组编号为"' + teamIds + '"的数据项？').then(function() {
+        return delWorkarea(teamIds)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('cal/team/export', {
+        ...this.queryParams
+      }, `team_${new Date().getTime()}.xlsx`)
+    },
+    //自动生成编码
+    handleAutoGenChange(autoGenFlag) {
+      if (autoGenFlag) {
+        genCode('CAL_TEAM_CODE').then(response => {
+          this.form.teamCode = response
+        })
+      } else {
+        this.form.teamCode = null
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" src="@/assets/styles/dialog-title.scss" scoped>
+.el-input-width {
+  width: 380px !important;
+}
+</style>