|
@@ -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>
|