123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318 |
- <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.SchemeId?detail.SchemeId == 1 ? '极简' : '标准':'--' }}
- </el-form-item>
- <el-form-item label="设备类:">{{
- detail.EquipCategory?detail.EquipCategory.EquipName?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="包含部件:">
- {{Name ? Name :'-'}}{{Count ? ':' + Count +'个' :'-'}}
- </el-form-item>
- </el-form>
- </div>
- <div class="implement-detail detail-item" v-if="detail.TaskState === '未找到'">
- <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="设备信息:" v-if="!detail.isComponent">{{ detail.EquipLocalName || detail.EquipName
- ||'--' }}
- </el-form-item>
- <el-form-item label="部件信息:" v-else>
- <div v-if="detail.Component && detail.Component.length">
- <p v-for="item in detail.Component?detail.Component:[]" :key="item.TaskId"
- show-overflow-tooltip>
- {{ item.EquipLocalName || item.EquipName }}
- </p>
- </div>
- <div v-else>--</div>
- </el-form-item>
- <el-form-item label="全景图:" v-show="panoramaList && panoramaList.length">
- <div class="img-item" @click="dialogVisible = true" v-for="item in panoramaList"
- :key="item.Key">
- <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`"
- style="width:100%;" :alt="item.Name">
- </div>
- </el-form-item>
- <el-form-item label="设备照片:" v-show="imgList && imgList.length">
- <div class="img-item">
- <div class="demo-image__preview">
- <el-image style="width:100%;" v-for="item in imgList"
- :key="item.Key" :title="item.Name"
- @click="nowUrl = item.Key"
- :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}&width=400`"
- :preview-src-list="srcList">
- </el-image>
- </div>
- </div>
- </el-form-item>
- <el-form-item label="现场视频:" v-show="videoList && videoList.length">
- <video controls style="width:100%;" v-for="item in videoList" :key="item.Key"
- :title="item.Name">
- <source :src="`/image-service/common/file_get?systemId=dataPlatform&key=${item.Key}`"
- 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" v-if="detail.TaskState === '未找到'">
- <el-form>
- <el-form-item label="操作信息:"></el-form-item>
- <div class="block">
- <el-timeline>
- <el-timeline-item
- placement="top"
- v-for="(item,index) in arr"
- :key="index"
- :timestamp="item.timestamp"
- >
- <el-card>
- <small>{{item.content}}</small>
- <p>{{item.title}}</p>
- <img
- v-for="isImg in item.imgs"
- :key="isImg.Key"
- :src="`/image-service/common/image_get?systemId=dataPlatform&key=${isImg.Key}`">
- <video controls style="width:100%;" v-for="v in videoList" :key="index"
- :title="v.Name">
- <source
- :src="`/image-service/common/file_get?systemId=dataPlatform&key=${v.Key}`"
- type="video/mp4">
- 您的浏览器不支持 HTML5 video ,暂无法播放。
- </video>
- </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 {mapGetters} from "vuex"
- import {categoryCount, modelCategoryCount} from "@/api/data_admin/buildTaskApi"
- export default {
- components: {},
- created() {
- let {ConfirmTime, PositivePhotoTime, QrCodeTime, NameplateTime, SidePhotoTime, VideoTime, EquipProblemTime, EquipProblem, TaskPicList} = this.detail;
- let arr = []
- QrCodeTime && arr.push({
- timestamp: QrCodeTime,
- time: new Date(QrCodeTime).getTime(),
- content: '黏贴二维码',
- imgs: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('带二维码的设备近景照片'))
- })
- PositivePhotoTime && arr.push({
- timestamp: PositivePhotoTime,
- time: new Date(PositivePhotoTime).getTime(),
- content: '拍摄正面照片',
- imgs: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('设备正面照片'))
- })
- NameplateTime && arr.push({
- timestamp: NameplateTime,
- time: new Date(NameplateTime).getTime(),
- content: '拍摄铭牌照片',
- imgs: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('铭牌照片'))
- })
- SidePhotoTime && arr.push({
- timestamp: SidePhotoTime,
- time: new Date(SidePhotoTime).getTime(),
- content: '拍摄侧面照片',
- imgs: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('设备左侧照片' || '设备右侧照片'))
- })
- VideoTime && arr.push({
- timestamp: VideoTime,
- time: new Date(VideoTime).getTime(),
- content: '拍摄30s视频',
- videoList: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('视频资料'))
- })
- EquipProblemTime && arr.push({
- timestamp: EquipProblemTime,
- time: new Date(EquipProblemTime).getTime(),
- content: '记录设备问题',
- title: EquipProblem
- })
- ConfirmTime && arr.push({
- timestamp: ConfirmTime,
- time: new Date(ConfirmTime).getTime(),
- content: '确认信息',
- title: '已确认的设备信息'
- })
- this.arr = arr.map(i => ({...i})).sort((a, b) => b.time - a.time)
- },
- computed: {
- ...mapGetters("layout", ["projectId"]),
- notFoundList() {
- if (this.detail && this.detail.Component && this.detail.Component.length) {//是否存在部件
- let index = this.detail.Component.findIndex(item => {
- return item.TaskState == -1
- })
- if (index != -1) {//部件中存在未找到的对象
- this.detail.isComponent = true
- return this.detail.Component[index].TaskPicList ? this.detail.Component[index].TaskPicList : []
- } else {//部件全部找到
- this.detail.isComponent = false
- return this.detail.TaskPicList ? this.detail.TaskPicList : []
- }
- } else {
- this.detail.isComponent = false
- if (this.detail && this.detail.TaskPicList && this.detail.TaskPicList.length) {
- return this.detail.TaskPicList
- } else {
- return []
- }
- }
- },
- panoramaList() {
- if (this.notFoundList && this.notFoundList.length) {
- return this.notFoundList.filter(item => {
- return item.Type == 'panorama'
- })
- } else {
- return []
- }
- },
- imgList() {
- if (this.notFoundList && this.notFoundList.length) {
- return this.notFoundList.filter(item => {
- return item.Type == 'image'
- })
- } else {
- return []
- }
- },
- videoList() {
- if (this.notFoundList && this.notFoundList.length) {
- return this.notFoundList.filter(item => {
- return item.Type == 'video'
- })
- } else {
- return []
- }
- },
- srcList() {
- let nowIndex = this.imgList.findIndex(item => {
- return item.Key == this.nowUrl
- })
- let index = nowIndex >= 1 ? nowIndex : 0;
- let tempArr1 = this.imgList.slice(0, index);
- let tempArr2 = this.imgList.slice(index, this.imgList.length);
- let res = tempArr2.concat(tempArr1).map(item => {
- return `/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`
- });
- return res;
- }
- },
- props: {
- detail: Object,
- type: String
- },
- data() {
- return {
- dialogVisible: false,//全景图弹出框
- nowUrl: '',//当前正在显示的图
- arr: [],
- Name: '',
- Count: '', //包含部件
- };
- },
- methods: {
- // 查询设备部件数量
- handleContent(row) {
- let param = {
- TaskId: row.TaskId,
- EquipId: row.EquipId
- }
- this.Name = ''
- this.Count = ''
- categoryCount(param, res => {
- if (res.Content.length) {
- this.Name = res.Content[0].Name
- this.Count = res.Content[0].Count
- }
- })
- },
- // 查询模型部件数量
- handleModelContent(row) {
- let param = {
- TaskId: row.TaskId,
- EquipId: row.EquipId
- }
- this.Name = ''
- this.Count = ''
- modelCategoryCount(param, res => {
- if (res.Content.length) {
- this.Name = res.Content[0].Name
- this.Count = res.Content[0].Count
- }
- })
- }
- },
- watch: {
- 'detail.TaskId'() {
- console.log(this.detail)
- }
- }
- };
- </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>
|