完善页面逻辑

src/views/devide/device.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>设备管理</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/operation/hand.vue

@@ -99,7 +99,7 @@
         >
       </template>
       <template slot-scope="{ row }" slot="menu">
-        <el-button @click="$refs.crud.rowView(row, index)">查看</el-button>
+        <el-button @click="handleView(row)">查看</el-button>
         <el-button @click="handleEdit(row)">编辑</el-button>
         <el-button @click="handleEvaluate(row)">评价并签字</el-button>
       </template>
@@ -148,181 +148,309 @@
       :append-to-body="true"
       width="50%"
     >
-      <div style="height:500px;overflow:auto;">
+      <div style="height:500px;overflow:auto;" >
-        <el-form ref="form" :model="detailForm" label-width="120px">
+        <el-form ref="form" :model="detailForm" label-width="120px" label-position="left">
-          <div
+          <div v-show="rowStatus == 1 || rowStatus == 2 || rowStatus == 3">
-            style="
+            <div
-              color: #101010;
+              style="
-              font-size: 20px;
+                color: #101010;
-              font-weight: 550;
+                font-size: 20px;
-              margin-bottom: 20px;
+                font-weight: 550;
-            "
+                margin-bottom: 20px;
-          >
+              "
-            故障信息
+            >
+              故障信息
+            </div>
+            <el-form-item label="填报人" prop="errPosition">
+              <el-input
+                placeholder="请输入填报人"
+                readonly
+                v-model="detailForm.addPerson"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="填报人电话" prop="errPosition">
+              <el-input
+                placeholder="请输入填报人电话"
+                readonly
+                v-model="detailForm.addPersonPhone"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="故障位置" prop="errPosition">
+              <el-input
+                placeholder="请输入故障位置"
+                readonly
+                v-model="detailForm.errPosition"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="设备名称" prop="deviceName">
+              <el-select
+                placeholder="请选择设备名称"
+                disabled
+                v-model="detailForm.deviceName"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in deviceList"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="故障专业类型" prop="errType">
+              <el-select
+                placeholder="请选择故障专业类型"
+                disabled
+                v-model="detailForm.errType"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in errorList"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="故障现象描述" prop="errDescirb">
+              <el-input
+                placeholder="请输入故障现象描述"
+                readonly
+                type="textarea"
+                v-model="detailForm.errDescirb"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="故障视频">
+              <video
+                :src="detailForm.errorVideo"
+                style="width: 148px; height: 148px"
+                controls
+              ></video>
+            </el-form-item>
+            <el-form-item label="故障图片">
+              <img v-for="item in detailForm.errorImg" :key="item" :src="item" alt="" style="width: 148px; height: 148px;margin-right:10px;">
+            </el-form-item>
+            <el-form-item label="提报时间">
+              <el-date-picker
+                v-model="detailForm.addTime"
+                type="datetime"
+                style="width:100%;"
+                disabled
+                placeholder="选择日期时间">
+              </el-date-picker>
+            </el-form-item>
           </div>
-          <el-form-item label="填报人" prop="errPosition">
+          <div v-show="rowStatus == 2 || rowStatus == 3">
-            <el-input
+            <div
-              placeholder="请输入填报人"
+              style="
-              readonly
+                color: #101010;
-              v-model="detailForm.addPerson"
+                font-size: 20px;
-            ></el-input>
+                font-weight: 550;
-          </el-form-item>
+                margin-bottom: 20px;
-          <el-form-item label="填报人电话" prop="errPosition">
+              "
-            <el-input
-              placeholder="请输入填报人电话"
-              readonly
-              v-model="detailForm.addPersonPhone"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="故障位置" prop="errPosition">
-            <el-input
-              placeholder="请输入故障位置"
-              readonly
-              v-model="detailForm.errPosition"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-select
-              placeholder="请选择设备名称"
-              disabled
-              v-model="detailForm.deviceName"
-              style="width: 100%"
             >
-              <el-option
+              处理情况
-                v-for="item in deviceList"
+            </div>
-                :key="item.value"
+            <el-form-item label="接单时间时间">
-                :value="item.value"
+              <el-date-picker
-                :label="item.label"
+                v-model="detailForm.orderTime"
-              ></el-option>
+                type="datetime"
-            </el-select>
+                disabled
-          </el-form-item>
+                style="width:100%;"
-          <el-form-item label="故障专业类型" prop="errType">
+                placeholder="选择日期时间">
-            <el-select
+              </el-date-picker>
-              placeholder="请选择故障专业类型"
+            </el-form-item>
-              disabled
+          </div>
-              v-model="detailForm.errType"
+          <div v-show="rowStatus == 2 || rowStatus == 3">
-              style="width: 100%"
+            <div
+              style="
+                color: #101010;
+                font-size: 20px;
+                font-weight: 550;
+                margin-bottom: 20px;
+              "
             >
-              <el-option
+              维修详情
-                v-for="item in errorList"
+            </div>
-                :key="item.value"
+            <el-form-item label="填报人" prop="maintainPerson">
-                :value="item.value"
+              <el-input
-                :label="item.label"
+                placeholder="请输入填报人"
-              ></el-option>
+                readonly
-            </el-select>
+                v-model="detailForm.maintainPerson"
-          </el-form-item>
+              ></el-input>
-          <el-form-item label="故障现象描述" prop="errDescirb">
+            </el-form-item>
-            <el-input
+            <el-form-item label="设备名称" prop="maintainName">
-              placeholder="请输入故障现象描述"
+              <el-select
-              readonly
+                placeholder="请选择设备名称"
-              type="textarea"
+                disabled
-              v-model="detailForm.errDescirb"
+                v-model="detailForm.maintainName"
-            ></el-input>
+                style="width: 100%"
-          </el-form-item>
+              >
-          <el-form-item label="故障视频">
+                <el-option
-            <video
+                  v-for="item in deviceList"
-              :src="detailForm.errorVideo"
+                  :key="item.value"
-              style="width: 148px; height: 148px"
+                  :value="item.value"
-              controls
+                  :label="item.label"
-            ></video>
+                ></el-option>
-          </el-form-item>
+              </el-select>
-          <el-form-item label="故障图片">
+            </el-form-item>
-            <img v-for="item in detailForm.errorImg" :key="item" :src="item" alt="" style="width: 148px; height: 148px;margin-right:10px;">
+            <el-form-item label="故障原因" prop="errorReason">
-          </el-form-item>
+              <el-input
-          <el-form-item label="提报时间">
+                placeholder="请输入故障原因"
-            <el-date-picker
+                readonly
-              v-model="detailForm.addTime"
+                type="textarea"
-              type="datetime"
+                v-model="detailForm.errorReason"
-              disabled
+              ></el-input>
-              placeholder="选择日期时间">
+            </el-form-item>
-            </el-date-picker>
+            <el-form-item label="处理方法" prop="dealMethod">
-          </el-form-item>
+              <el-input
-          <div
+                placeholder="请输入处理方法"
-            style="
+                readonly
-              color: #101010;
+                type="textarea"
-              font-size: 20px;
+                v-model="detailForm.dealMethod"
-              font-weight: 550;
+              ></el-input>
-              margin-bottom: 20px;
+            </el-form-item>
-            "
+            <el-form-item label="维修材料">
-          >
+              <el-table :data="detailForm.tableData" border style="width: 100%" show-summary>
-            处理情况
+                <el-table-column
+                  prop="name"
+                  align="center"
+                  label="物料名称"
+                  >
+                </el-table-column>
+                <el-table-column
+                  prop="money"
+                  align="center"
+                  label="金额"
+                  >
+                </el-table-column>
+              </el-table>
+            </el-form-item>
           </div>
-          <el-form-item label="接单时间时间">
+          <div v-show="rowStatus == 3 || isEvalute">
-            <el-date-picker
+            <div
-              v-model="detailForm.orderTime"
+              style="
-              type="datetime"
+                color: #101010;
-              disabled
+                font-size: 20px;
-              placeholder="选择日期时间">
+                font-weight: 550;
-            </el-date-picker>
+                margin-bottom: 20px;
-          </el-form-item>
+              "
-          <div
+            >
-            style="
+              评价
-              color: #101010;
+            </div>
-              font-size: 20px;
+            <div>
-              font-weight: 550;
+              <p>1.您对本次维修的质量方面满意吗？</p>
-              margin-bottom: 20px;
+              <div style="display:flex;">
-            "
+                <div 
-          >
+                  style="width: 150px;
-            维修详情
+                    border-radius: 5px;
+                    height: 30px;
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;
+                    cursor:pointer;"
+                  :style="{background:isQuality == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isQuality == '1' ? '#3a62d7' : '#4f4f4f'}"
+                  @click="clickQualityYes">满意</div>
+                <div
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isQuality == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isQuality == '2' ? '#3a62d7' : '#4f4f4f'}"
+                  @click="clickQualityNo">不满意</div>
+              </div>
+            </div>
+            <div>
+              <p>2.您对本次维修的安全方面满意吗？</p>
+              <div style="display:flex;">
+                <div 
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isSafe == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isSafe == '1' ? '#3a62d7' : '#4f4f4f'}"
+                    @click="clickSafeYes"
+                  >满意</div>
+                <div
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isSafe == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isSafe == '2' ? '#3a62d7' : '#4f4f4f'}"
+                    @click="clickSafeNo"
+                  >不满意</div>
+              </div>
+            </div>
+            <div>
+              <p>3.您对本次维修的时效方面满意吗？</p>
+              <div style="display:flex;margin-bottom:30px;">
+                <div 
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isTime == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isTime == '1' ? '#3a62d7' : '#4f4f4f'}"
+                    @click="clickTimeYes"
+                  >满意</div>
+                <div
+                  style="width: 150px;
+                    border-radius: 5px;
+                    height: 30px;
+                    background: rgb(239, 239, 239);
+                    text-align: center;
+                    line-height: 30px;
+                    margin-right: 20px;cursor:pointer;"
+                    :style="{background:isTime == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isTime == '2' ? '#3a62d7' : '#4f4f4f'}"
+                    @click="clickTimeNo"
+                    >不满意</div>
+              </div>
+            </div>
           </div>
-          <el-form-item label="填报人" prop="maintainPerson">
+          <div v-show="rowStatus == 3 || isEvalute">
-            <el-input
+            <div
-              placeholder="请输入填报人"
+              style="
-              readonly
+                color: #101010;
-              v-model="detailForm.maintainPerson"
+                font-size: 20px;
-            ></el-input>
+                font-weight: 550;
-          </el-form-item>
+                margin-bottom: 20px;
-          <el-form-item label="设备名称" prop="maintainName">
+              "
-            <el-select
-              placeholder="请选择设备名称"
-              disabled
-              v-model="detailForm.maintainName"
-              style="width: 100%"
             >
-              <el-option
+              签名
-                v-for="item in deviceList"
+            </div>
-                :key="item.value"
+            <avue-sign ref="sign"></avue-sign>
-                :value="item.value"
+            <el-button @click="clearName">清空</el-button>
-                :label="item.label"
+            <el-button @click="confirmName">确定</el-button>
-              ></el-option>
+            <el-form-item label="签名人" prop="personName">
-            </el-select>
+              <el-input
-          </el-form-item>
+                placeholder="请输入签名人"
-          <el-form-item label="故障原因" prop="errorReason">
+                v-model="detailForm.personName"
-            <el-input
+              ></el-input>
-              placeholder="请输入故障原因"
+            </el-form-item>
-              readonly
+            <el-form-item label="签名时间" prop="time">
-              type="textarea"
+              <el-date-picker
-              v-model="detailForm.errorReason"
+                v-model="detailForm.time"
-            ></el-input>
+                type="datetime"
-          </el-form-item>
+                style="width:100%;"
-          <el-form-item label="处理方法" prop="dealMethod">
+                placeholder="请选择签名时间">
-            <el-input
+              </el-date-picker>
-              placeholder="请输入处理方法"
+            </el-form-item>
-              readonly
+          </div>
-              type="textarea"
-              v-model="detailForm.dealMethod"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="维修材料">
-            <el-table :data="detailForm.tableData" border style="width: 100%" show-summary>
-              <el-table-column
-                prop="name"
-                align="center"
-                label="物料名称"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="money"
-                align="center"
-                label="金额"
-                >
-              </el-table-column>
-            </el-table>
-          </el-form-item>
         </el-form>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCancel">关闭</el-button>
+        <el-button @click="handleClose">关闭</el-button>
         <el-button type="primary" @click="handleConfirm">评价并签字</el-button>
       </span>
     </el-dialog>
@@ -587,7 +715,6 @@ export default {
       },
       data: [],
       videoList: "", //上传成功的视频
-
       form2Option: {
         emptyBtn: false,
         submitBtn: false,
@@ -671,6 +798,12 @@ export default {
         ],
       },
       detailForm: {},
+      rowStatus:'',
+      isEvalute:false,
+      isQuality:0,
+      isSafe:0,
+      isTime:0,
+      nameImg:''
     };
   },
   directives: {
@@ -912,6 +1045,11 @@ export default {
         });
       }
     },
+    // 点击关闭按钮
+    handleClose(){
+      this.detailForm = {}
+      this.detailVisible = false
+    },
     // 点击取消按钮
     handleCancel() {
       this.dialogVisible = false;
@@ -1111,6 +1249,50 @@ export default {
       this.dialogVisible = true;
     },
 
+    clickQualityYes(){
+      this.isQuality = 1
+    },
+    clickQualityNo(){
+      this.isQuality = 2
+    },
+    clickSafeYes(){
+      this.isSafe = 1
+    },
+    clickSafeNo(){
+      this.isSafe = 2
+    },
+    clickTimeYes(){
+      this.isTime = 1
+    },
+    clickTimeNo(){
+      this.isTime = 2
+    },
+
+    confirmName(){
+      this.nameImg = this.$refs.sign.submit(80, 50);
+    },
+
+    clearName(){
+     this.$refs.sign.clear()
+     this.nameImg = ''
+    },
+    
+
+    // 点击行内的评价并签字按钮
+    handleEvaluate(row){
+      this.rowStatus = row.operationStatus
+      this.detailVisible = true
+      this.detailForm = row
+      this.isEvalute = true
+    },
+
+    // 查看
+    handleView(row){
+      this.rowStatus = row.operationStatus 
+      this.detailVisible = true
+      this.detailForm = row
+    },
+
     // 点击保存按钮
     handleSave() {
       this.dialogVisible = false;
@@ -1151,6 +1333,8 @@ export default {
     onLoad(page, params = {}) {
       this.data = [
         {
+          addPerson:'张三',
+          addPersonPhone:'13325412312',
           operationNo: "WX-20240820-01",
           deviceName: "通风柜",
           errPosition: "一楼102室",
@@ -1159,6 +1343,7 @@ export default {
           operationDate: "2024-02-15",
           operationStatus: 1,
           finishDate: "2024-02-26",
+          addTime:'2024-02-15 16:00:05',
           errorVideo: "/i/movie.ogg",
           errorImg: [
             "https://api.avuejs.com/imgview/1721789673575.jpg",
@@ -1166,6 +1351,8 @@ export default {
           ],
         },
         {
+          addPerson:'张三',
+          addPersonPhone:'13325412312',
           operationNo: "WX-20240820-01",
           deviceName: "通风柜",
           errPosition: "一楼102室",
@@ -1174,10 +1361,24 @@ export default {
           operationDate: "2024-02-15",
           operationStatus: 2,
           finishDate: "2024-02-26",
+          addTime:'2024-02-15 16:00:05',
           errorVideo: "https://api.avuejs.com/imgview/主动管控页面.mp4",
           errorImg: [],
+          orderTime:'2024-02-18 15:32:10',
+          maintainPerson:'李四',
+          maintainName:'通风柜',
+          errorReason:'故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因',
+          dealMethod:'处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法',
+          tableData:[
+            {name:'物料1',money:100.00},
+            {name:'物料2',money:100.00},
+            {name:'物料3',money:58.50},
+            {name:'物料4',money:32.00},
+          ]
         },
         {
+          addPerson:'张三',
+          addPersonPhone:'13325412312',
           operationNo: "WX-20240820-01",
           deviceName: "通风柜",
           errPosition: "一楼102室",
@@ -1186,8 +1387,20 @@ export default {
           operationDate: "2024-02-15",
           operationStatus: 3,
           finishDate: "2024-02-26",
+          addTime:'2024-02-15 16:00:05',
           errorVideo: "https://api.avuejs.com/imgview/主动管控页面.mp4",
           errorImg: [],
+          orderTime:'2024-02-18 15:32:10',
+          maintainPerson:'李四',
+          maintainName:'通风柜',
+          errorReason:'故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因',
+          dealMethod:'处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法',
+          tableData:[
+            {name:'物料1',money:100.00},
+            {name:'物料2',money:100.00},
+            {name:'物料3',money:58.50},
+            {name:'物料4',money:32.00},
+          ]
         },
       ];
       this.loading = false;