完成运维记录前端

src/api/maintenance/maintenance.js

@@ -0,0 +1,67 @@
+import request from '@/utils/request';
+
+// 设备运维规则配置
+export function getMaintainConfigList(params) {
+  return request({
+    url: '/api/admin/equipment-maintain-config/index',
+    method: 'get',
+    params
+  });
+}
+
+export function getMaintainConfigDetail(params) {
+  return request({
+    url: '/api/admin/equipment-maintain-config/show',
+    method: 'get',
+    params
+  });
+}
+
+export function saveMaintainConfig(data) {
+  return request({
+    url: '/api/admin/equipment-maintain-config/save',
+    method: 'post',
+    data
+  });
+}
+
+export function deleteMaintainConfig(params) {
+  return request({
+    url: '/api/admin/equipment-maintain-config/destroy',
+    method: 'get',
+    params
+  });
+}
+
+// 设备运维记录
+export function getOperationList(params) {
+  return request({
+    url: '/api/admin/equipment-operation/index',
+    method: 'get',
+    params
+  });
+}
+
+export function getOperationDetail(params) {
+  return request({
+    url: '/api/admin/equipment-operation/show',
+    method: 'get',
+    params
+  });
+}
+
+export function saveOperation(data) {
+  return request({
+    url: '/api/admin/equipment-operation/save',
+    method: 'post',
+    data
+  });
+}
+
+export function deleteOperation(params) {
+  return request({
+    url: '/api/admin/equipment-operation/destroy',
+    method: 'get',
+    params
+  });
+}

src/views/maintenance/maintenance_records.vue

@@ -165,7 +165,10 @@
               </div>
               <div class="form-group signature-area">
                 <label>签名:</label>
-                <div class="signature-display">当前用户: {{ currentUser }}</div>
+                <div class="signature-pad-wrapper">
+                  <canvas ref="signaturePad" class="signature-canvas"></canvas>
+                  <Button size="small" style="margin-top: 8px;" @click="clearSignature">清除签名</Button>
+                </div>
               </div>
             </form>
           </div>
@@ -339,6 +342,7 @@ export default {
   mounted() {
     this.calcTableHeight();
     window.addEventListener('resize', this.calcTableHeight);
+    this.initSignaturePad();
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.calcTableHeight);
@@ -503,6 +507,85 @@ export default {
     closeViewModal() {
       this.showViewModal = false;
       this.currentRecord = {};
+    },
+    initSignaturePad() {
+      const canvas = this.$refs.signaturePad;
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      // 适配高分屏
+      const dpr = window.devicePixelRatio || 1;
+      const container = canvas.parentNode;
+      const displayWidth = container.offsetWidth || 400;
+      canvas.width = displayWidth * dpr;
+      canvas.height = 120 * dpr;
+      canvas.style.width = displayWidth + 'px';
+      canvas.style.height = '120px';
+      ctx.scale(dpr, dpr);
+      ctx.lineWidth = 2;
+      ctx.lineCap = 'round';
+      let drawing = false;
+      let lastX = 0, lastY = 0;
+      const getPos = e => {
+        if (e.touches && e.touches.length) {
+          const rect = canvas.getBoundingClientRect();
+          return {
+            x: e.touches[0].clientX - rect.left,
+            y: e.touches[0].clientY - rect.top
+          };
+        } else {
+          const rect = canvas.getBoundingClientRect();
+          return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+          };
+        }
+      };
+      const start = e => {
+        drawing = true;
+        const pos = getPos(e);
+        lastX = pos.x;
+        lastY = pos.y;
+      };
+      const move = e => {
+        if (!drawing) return;
+        const pos = getPos(e);
+        ctx.beginPath();
+        ctx.moveTo(lastX, lastY);
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+        lastX = pos.x;
+        lastY = pos.y;
+      };
+      const end = () => { drawing = false; };
+      canvas.addEventListener('mousedown', start);
+      canvas.addEventListener('mousemove', move);
+      canvas.addEventListener('mouseup', end);
+      canvas.addEventListener('mouseleave', end);
+      canvas.addEventListener('touchstart', start);
+      canvas.addEventListener('touchmove', move);
+      canvas.addEventListener('touchend', end);
+      this.signaturePadCtx = ctx;
+      this.signaturePadCanvas = canvas;
+    },
+    clearSignature() {
+      if (this.signaturePadCtx && this.signaturePadCanvas) {
+        this.signaturePadCtx.clearRect(0, 0, this.signaturePadCanvas.width, this.signaturePadCanvas.height);
+      }
+    },
+    getSignatureDataUrl() {
+      if (this.signaturePadCanvas) {
+        return this.signaturePadCanvas.toDataURL('image/png');
+      }
+      return '';
+    }
+  },
+  watch: {
+    showModal(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.initSignaturePad();
+        });
+      }
     }
   }
 }
@@ -719,6 +802,8 @@ export default {
 }
 
 .form-group {
+  width: 100%;
+  min-width: 0;
   margin-bottom: 1rem;
 }
 
@@ -759,17 +844,29 @@ export default {
   color: #6c757d;
 }
 
-.signature-area .signature-display {
-  background-color: #f8f9fa;
-  border: 1px dashed #ced4da;
-  padding: 1rem;
-  text-align: center;
-  color: #6c757d;
-  border-radius: 0.25rem;
-  min-height: 80px;
+.signature-area {
+  width: 100%;
+  min-width: 0;
+}
+.signature-pad-wrapper {
+  width: 100%;
+  min-width: 0;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.signature-canvas {
+  border: 1px dashed #ced4da;
+  background: #fff;
+  border-radius: 4px;
+  width: 100%;
+  height: 120px;
+  cursor: crosshair;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
 }
 
 .form-value {