Bladeren bron

资产详情和任务详情

LXXXY 5 jaren geleden
bovenliggende
commit
292bdd916f

+ 144 - 31
src/components/data_admin/buildTask/detail/assetsDetail.vue

@@ -1,35 +1,142 @@
 <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="包含设备:">
+            <div v-if="detail.Equipment.Component && detail.Equipment.Component.length">
+              <p v-for="(item, index) in detail.Equipment.Component" :key="index" show-overflow-tooltip>
+               {{ item.EquipName }}
+              </p>
+            </div>
+            <div v-else>--</div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="implement-detail detail-item">
+        <el-form :model="detail" label-width="150px">
+          <el-form-item label="执行任务人:">{{ detail.WorkerName || '--' }}</el-form-item>
+          <el-form-item label="执行时间:">{{ detail.ProcessTime || '--' }}</el-form-item>
+          <el-form-item label="未找到对象信息:"></el-form-item>
+          <el-form-item label="设备信息:">
+            <div v-if="detail.Equipment.Component && detail.Equipment.Component.length">
+              <p v-for="(item, index) in detail.Equipment.Component" :key="index" show-overflow-tooltip>
+               {{ item.EquipName }}
+              </p>
+            </div>
+            <div v-else>--</div>
+          </el-form-item>
+          <el-form-item label="全景图:">
+            <div class="img-item" @click="dialogVisible = true">
+              <img src="@/assets/house.jpg" style="width:100%;" alt="图片走丢了">
+              <!-- 遮罩层 
+              <div class="img-hide">
+                <i class="el-icon-help" style="font-size:30px;"></i>
+                <span> 点击查看全景图 </span>
+              </div> -->
+            </div>
+          </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>
+          </el-form-item>
+          <el-form-item label="现场视频:">
+            <video controls style="width:100%;">
+              <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
+              您的浏览器不支持 HTML5 video ,暂无法播放。
+            </video>
+          </el-form-item>
+          <el-form-item label="备注信息:">{{ detail.Note || '--' }}</el-form-item>
+        </el-form>
+      </div>
+      <div class="operation-detail detail-item">
+        <el-form>
+          <el-form-item label="操作信息:"></el-form-item>
+          <div class="block">
+            <el-timeline>
+              <el-timeline-item timestamp="2018/4/12" placement="top">
+                <el-card>
+                  <h4>更新 Github 模板</h4>
+                  <p>王小虎 提交于 2018/4/12 20:46</p>
+                </el-card>
+              </el-timeline-item>
+              <el-timeline-item timestamp="2018/4/3" placement="top">
+                <el-card>
+                  <h4>更新 Github 模板</h4>
+                  <p>王小虎 提交于 2018/4/3 20:46</p>
+                </el-card>
+              </el-timeline-item>
+              <el-timeline-item timestamp="2018/4/2" placement="top">
+                <el-card>
+                  <h4>更新 Github 模板</h4>
+                  <p>王小虎 提交于 2018/4/2 20:46</p>
+                </el-card>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-form>
+      </div>
     </el-scrollbar>
+    <el-dialog title="全景图" :visible.sync="dialogVisible" width="70%" append-to-body>
+      一张图
+    </el-dialog>
   </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 {
-      
+      dialogVisible: false,//全景图弹出框
+      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: {
-    
   },
   watch: {
     id: {
@@ -44,28 +151,34 @@ 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;
+  }
+  /deep/ .el-icon-circle-close {
+    color: white;
+  }
+
+  /deep/ .el-form-item__content {
+    text-overflow: ellipsis;
+    overflow: 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;
+    cursor: pointer;
   }
+}
 </style>

+ 69 - 52
src/components/data_admin/buildTask/detail/deviceDetail.vue

@@ -15,45 +15,83 @@
           <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-item label="包含部件:">
+            <div v-if="detail.Equipment.Component && detail.Equipment.Component.length">
+              <p v-for="(item, index) in detail.Equipment.Component" :key="index" show-overflow-tooltip>
+               {{ item.EquipName }}
+              </p>
+            </div>
+            <div v-else>--</div>
+          </el-form-item>
         </el-form>
       </div>
       <div class="implement-detail detail-item">
         <el-form :model="detail" label-width="150px">
+          <el-form-item label="执行任务人:">{{ detail.WorkerName || '--' }}</el-form-item>
+          <el-form-item label="执行时间:">{{ detail.ProcessTime || '--' }}</el-form-item>
           <el-form-item label="未找到对象信息:"></el-form-item>
-          <el-form-item label="部件信息:">{{ '' || '--' }}</el-form-item>
+          <el-form-item label="部件信息:">
+            <div v-if="detail.Equipment.Component && detail.Equipment.Component.length">
+              <p v-for="(item, index) in detail.Equipment.Component" :key="index" show-overflow-tooltip>
+               {{ item.EquipName }}
+              </p>
+            </div>
+            <div v-else>--</div>
+          </el-form-item>
           <el-form-item label="全景图:">
+            <div class="img-item" @click="dialogVisible = true">
+              <img src="@/assets/house.jpg" style="width:100%;" alt="图片走丢了">
+            </div>
+          </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>
+            <video controls style="width:100%;">
+              <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
+              您的浏览器不支持 HTML5 video ,暂无法播放。
+            </video>
           </el-form-item>
           <el-form-item label="备注信息:">{{ detail.Note || '--' }}</el-form-item>
         </el-form>
       </div>
-      <div class="operation-detail detail-item"></div>
+      <div class="operation-detail detail-item">
+        <el-form>
+          <el-form-item label="操作信息:"></el-form-item>
+          <div class="block">
+            <el-timeline>
+              <el-timeline-item timestamp="2018/4/12" placement="top">
+                <el-card>
+                  <h4>更新 Github 模板</h4>
+                  <p>王小虎 提交于 2018/4/12 20:46</p>
+                </el-card>
+              </el-timeline-item>
+              <el-timeline-item timestamp="2018/4/3" placement="top">
+                <el-card>
+                  <h4>更新 Github 模板</h4>
+                  <p>王小虎 提交于 2018/4/3 20:46</p>
+                </el-card>
+              </el-timeline-item>
+              <el-timeline-item timestamp="2018/4/2" placement="top">
+                <el-card>
+                  <h4>更新 Github 模板</h4>
+                  <p>王小虎 提交于 2018/4/2 20:46</p>
+                </el-card>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-form>
+      </div>
     </el-scrollbar>
+    <el-dialog title="全景图" :visible.sync="dialogVisible" width="70%" append-to-body>
+      一张图
+    </el-dialog>
   </div>
 </template>
 
@@ -68,11 +106,11 @@ export default {
     ...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 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;
     }
@@ -82,6 +120,7 @@ export default {
   },
   data() {
     return {
+      dialogVisible: false,//全景图弹出框
       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',
@@ -93,9 +132,6 @@ export default {
     console.log(this.detail);
   },
   methods: {
-    handleClick(){
-      debugger
-    }
   },
   watch: {
     id: {
@@ -117,6 +153,14 @@ export default {
   /deep/ .el-scrollbar__wrap {
     overflow-x: hidden;
   }
+  /deep/ .el-icon-circle-close {
+    color: white;
+  }
+
+  /deep/ .el-form-item__content {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 
   .detail-item {
     width: calc(100% - 30px);
@@ -129,34 +173,7 @@ export default {
 
   .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>

+ 3 - 3
src/components/data_admin/buildTask/table/assetsTable.vue

@@ -35,7 +35,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">
-      <assets-detail :id="detailId"></assets-detail>
+      <assets-detail :detail="detailAssets"></assets-detail>
     </el-drawer>
   </div>
 </template>
@@ -59,7 +59,7 @@ export default {
       inSpaceType: '资产',
       loading: false, // loading
       drawer: false, // 详情侧弹窗
-      detailId: '',
+      detailAssets: null,
       tableData: [], //列表数据
       page: {
         pageSize: 50,
@@ -143,7 +143,7 @@ export default {
     //查看任务详情
     handleDetail() {
       this.drawer = true
-      this.detailId = row.TaskId
+      this.detailAssets = row
     },
     // 改变pagesize
     handleSizeChange(pageSize) {