Browse Source

任务详情页面

LXXXY 5 years ago
parent
commit
5dab816405

BIN
src/assets/house.jpg


+ 121 - 30
src/components/data_admin/buildTask/detail/deviceDetail.vue

@@ -1,35 +1,101 @@
 <template>
   <div class="detail-box">
     <el-scrollbar style="height:100%;">
-      <div class="attribute-detail"></div>
-      <div class="implement-detail"></div>
+      <div class="attribute-detail detail-item">
+        <el-form :model="detail" label-width="150px">
+          <el-form-item label="设备基本信息:"></el-form-item>
+          <el-form-item label="任务创建时间:">{{ detail.CreateTime || '--' }}</el-form-item>
+          <el-form-item label="任务当前状态:">{{ detail.TaskState || '--' }}</el-form-item>
+          <el-form-item label="任务执行方案:">{{ detail.TaskId || '--' }}</el-form-item>
+          <el-form-item label="设备类:">{{ detail.EquipCategory.EquipName || '--' }}</el-form-item>
+          <el-form-item label="全局名称:">{{ detail.EquipName || '--' }}</el-form-item>
+          <el-form-item label="设备本地名称:">{{ detail.EquipLocalName || '--' }}</el-form-item>
+          <el-form-item label="设备本地编码:">{{ detail.EquipLocalID || '--' }}</el-form-item>
+          <el-form-item label="设计图纸中编码:">{{ detail.CadId || '--' }}</el-form-item>
+          <el-form-item label="安装位置:">{{ detail.InstallLocation || '--' }}</el-form-item>
+          <el-form-item label="生产厂家:">{{ detail.Equipment.DpSupplierID || '--' }}</el-form-item>
+          <el-form-item label="型号:">{{ detail.Equipment.DpManufacturerID || '--' }}</el-form-item>
+          <el-form-item label="包含部件:">{{ detail.EquipId || '--' }}</el-form-item>
+          <el-form-item label="执行任务人:">{{ detail.WorkerName || '--' }}</el-form-item>
+          <el-form-item label="执行时间:">{{ detail.ProcessTime || '--' }}</el-form-item>
+        </el-form>
+      </div>
+      <div class="implement-detail detail-item">
+        <el-form :model="detail" label-width="150px">
+          <el-form-item label="未找到对象信息:"></el-form-item>
+          <el-form-item label="部件信息:">{{ '' || '--' }}</el-form-item>
+          <el-form-item label="全景图:">
+            <div class="img-item">
+              <div class="demo-image__preview">
+                <el-image style="width:100%;" @click="nowUrl = url1" :src="url1" :preview-src-list="srcList"></el-image>
+                <el-image style="width:100%;" @click="nowUrl = url2" :src="url2" :preview-src-list="srcList"></el-image>
+                <el-image style="width:100%;" @click="nowUrl = url3" :src="url3" :preview-src-list="srcList"></el-image>
+                </div>
+              <div class="img-hide">
+                <i class="el-icon-help" style="font-size:30px;"></i><br />
+                <span> 点击查看全景图 </span>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="部件照片:">
+            
+          </el-form-item>
+          <el-form-item label="现场视频:">
+            <div class="img-item">
+              <img src="@/assets/house.jpg" style="width:100%;" alt="图片走丢了">
+              <div class="img-hide">
+                <i class="el-icon-help" style="font-size:30px;"></i><br />
+                <span> 点击查看视频 </span>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="备注信息:">{{ detail.Note || '--' }}</el-form-item>
+        </el-form>
+      </div>
+      <div class="operation-detail detail-item"></div>
     </el-scrollbar>
   </div>
 </template>
 
 <script>
-import {  } from "@/api/scan/request"
+import { } from "@/api/scan/request"
 import { mapGetters } from "vuex"
 export default {
   components: {
-    
+
   },
   computed: {
-    ...mapGetters("layout", ["projectId"])
+    ...mapGetters("layout", ["projectId"]),
+    srcList: function () {
+      let index = this.urls.indexOf(this.nowUrl) >= 1 ? this.urls.indexOf(this.nowUrl) : 0;
+    //  let temp = this.urls.concat();
+    let temp = this.urls;
+      let tempArr1 = temp.slice(0, index);
+      let tempArr2 = temp.slice(index, temp.length);
+      
+      let res = tempArr2.concat(tempArr1);
+      return res;
+    }
   },
   props: {
-    id: String,
+    detail: Object,
   },
   data() {
     return {
-      
+      nowUrl: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',//当前正在显示的图
+      url1: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+      url2: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      url3: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+      urls: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
     };
   },
   created() {
-    
+    console.log(this.detail);
   },
   methods: {
-    
+    handleClick(){
+      debugger
+    }
   },
   watch: {
     id: {
@@ -44,28 +110,53 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-  .detail-box{
-    width: 100%;
-    height: 100%;
+.detail-box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  /deep/ .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+
+  .detail-item {
+    width: calc(100% - 30px);
+    margin: 15px 15px 10px;
+    padding: 10px;
     box-sizing: border-box;
-    /deep/ .el-scrollbar__wrap {
-      overflow-x: hidden;
-    }
-    .attribute-detail{
-      width: calc(100% - 30px);
-      height: 500px;
-      margin: 15px 15px 10px;
-      box-sizing: border-box;
-      border-left: 1px solid #eee;
-      box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
-    }
-    .implement-detail{
-      width: calc(100% - 30px);
-      height: 500px;
-      margin: 15px 15px 10px;
-      box-sizing: border-box;
-      border-left: 1px solid #eee;
-      box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
+    border-left: 1px solid #eee;
+    box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
+  }
+
+  .img-item {
+    position: relative;
+  }
+
+  .img-item:hover {
+    .img-hide {
+      height: 100%;
+      transition: all 1s;
     }
   }
+
+  .img-hide {
+    color: white;
+    font-size: 16px;
+    font-weight: 400;
+    width: 100%;
+    height: 0px;
+    background: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    display: flex;
+    overflow: hidden;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    display: none;
+  }
+}
 </style>

+ 6 - 4
src/components/data_admin/buildTask/table/modelTable.vue

@@ -42,7 +42,7 @@
      :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
     </el-pagination>
     <el-drawer title="任务详情" :visible.sync="drawer" direction="rtl" size="600px">
-      <device-detail :id="detailId"></device-detail>
+      <device-detail :detail="detailModel"></device-detail>
     </el-drawer>
   </div>
 </template>
@@ -66,7 +66,7 @@ export default {
       inSpaceType: '设备',
       loading: false, // loading
       drawer: false, // 详情侧弹窗
-      detailId: '',
+      detailModel: '',
       tableData: [], //列表数据
       taskStateMap: {
         '-1': '未找到',
@@ -96,7 +96,9 @@ export default {
         Filters: `ProjectId='${this.projectId}'`,
         Cascade: [
           {
-            Name: 'component'
+            Name: 'equipment',
+            Cascade: [{ Name: 'component' }]
+            // Name: 'component'
           }, {
             Name: 'equipCategory'
           }
@@ -141,7 +143,7 @@ export default {
     //查看任务详情
     handleDetail(index, row) {
       this.drawer = true
-      this.detailId = row.TaskId
+      this.detailModel = row
     },
     // 改变pagesize
     handleSizeChange(pageSize) {