123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- <template>
- <div class="detail-box">
- <el-scrollbar style="height:100%;">
- <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.Manufacturer || '--' }}</el-form-item>
- <el-form-item label="型号:">{{ detail.Specification || '--' }}</el-form-item>
- <el-form-item label="供应商:">{{ detail.Supplier || '--' }}</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>
- </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 { mapGetters } from "vuex"
- export default {
- components: {
- },
- computed: {
- ...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: {
- 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: {
- detail: {
- handler(newName, oldName) {
- // this.page.pageNumber = 1
- // this.getTableData()
- },
- immediate: true,
- deep: true
- }
- }
- };
- </script>
- <style lang="less" scoped>
- .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;
- border-left: 1px solid #eee;
- box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
- }
- .img-item {
- position: relative;
- cursor: pointer;
- }
- }
- </style>
|