能源设备详情 工单

energyManagement/src/views/instrumentManagement/popups/tabIndex.vue

@@ -143,6 +143,12 @@ export default {
                     prop: 'operationType',
                     format(val, data) {
                         let name = '';
+                        debugger;
+                        if (_this.$parent.detail.categoryId === 1) {
+                            name = '阀';
+                        } else {
+                            name = '闸';
+                        }
                         switch (val) {
                             case 0:
                                 return '关' + name;
@@ -166,9 +172,9 @@ export default {
                         }
                         switch (val) {
                             case 0:
-                                return name + '关';
+                                return '关' + name;
                             case 1:
-                                return name + '开';
+                                return '开' + name;
                             case 2:
                                 return '执行中';
                             default:

operationSupport/src/views/lookVideo.vue

@@ -0,0 +1,24 @@
+<template>
+    <video class="video" :src="src" controls="controls"></video>
+</template>
+<script>
+export default {
+    props: ['params'],
+    data() {
+        return {};
+    },
+    computed: {
+        src() {
+            return this.params.src;
+        }
+    },
+    methods: {},
+    created() {}
+};
+</script>
+<style >
+.video {
+    width: 100%;
+    height: 350px;
+}
+</style>

operationSupport/src/views/operationManagement/workOrders/index.vue

@@ -26,7 +26,10 @@
             @page-change="pageChange"
         >
             <template slot="repairFile" slot-scope="scope">
-                <div class="imgVdio"><img :src="scope.row.repairFile" alt="" /></div>
+                <div class="imgVdio" v-for="item in scope.row.repairFile.split(',')" :key="item">
+                    <video v-if="typeVideo(item)" :src="item" @click="lookVideos(item)"></video>
+                    <el-image class="imgs" v-else :src="item" :preview-src-list="[item]"></el-image>
+                </div>
             </template>
             <template slot-scope="scope" slot="opt">
                 <div class="opt">
@@ -142,7 +145,7 @@ export default {
                     height: '300px',
                     props: {
                         data,
-                        arrData:this.findUser,
+                        arrData: this.findUser,
                         callback: resolve
                     },
                     title: title
@@ -184,12 +187,41 @@ export default {
             }).then(() => {
                 this.mixins_search();
             });
+        },
+        typeVideo(str) {
+            let type = str.slice(str.lastIndexOf('.') + 1, str.length);
+            let videoType = ['mp4'];
+            return videoType.includes(type);
+        },
+        lookVideos(src) {
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: '/lookVideo.vue',
+                    width: '600px',
+                    height: '500px',
+                    props: {
+                        src: src,
+                        callback: resolve
+                    },
+                    showConfirmButton: true,
+                    showCancelButton: true,
+                    hideStar: true,
+                    title: '查看视频'
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
         }
     }
 };
 </script>
 <style scoped lang='scss'>
-.imgVdio img {
-    width: 64px;
+.imgVdio {
+    display: inline-block;
+    margin-right: 10px;
+    .imgs,
+    video {
+        width: 64px;
+    }
 }
 </style>

operationSupport/src/views/operationManagement/workOrders/stepPage/add.vue

@@ -17,20 +17,27 @@
             </el-select>
         </template>
         <template slot="repairFile">
-            <el-upload
-                :headers="token"
-                ref="uploaduserlogo"
-                class="mini-upload"
-                limit="3"
-                list-type="picture-card"
-                action="/sc-community/upload/uploadFile"
-                :on-success="uploadsuccess"
-                :before-upload="beforeAvatarUpload"
-                :auto-upload="true"
-                name="file"
-            >
-                <i slot="default" class="el-icon-plus"></i>
-            </el-upload>
+            <div class="clickUpload">
+                <div class="clickUpText" v-for="item in fileType" :key="item">
+                    <video v-if="typeVideo(item)" :src="item"></video>
+                    <img v-else class="dataImg" :src="item" />
+                </div>
+                <div class="clickUpText">
+                    <div class="addImg" @click="clickFile"><i class="el-icon-plus ashText"></i></div>
+                </div>
+                <el-upload
+                    style="display: none"
+                    :headers="token"
+                    ref="uploadBox"
+                    limit="3"
+                    action="/sc-community/upload/uploadFile"
+                    :on-success="uploadsuccess"
+                    :before-upload="beforeAvatarUpload"
+                    :auto-upload="true"
+                    name="file"
+                >
+                </el-upload>
+            </div>
         </template>
     </zz-form>
 </template>
@@ -48,7 +55,8 @@ export default {
                 address: '',
                 repairName: '',
                 repairPhone: '',
-                repairContent: ''
+                repairContent: '',
+                repairFile: ''
             },
             formRules: {
                 communityId: [this.$valid.selectRequired('社区')],
@@ -127,9 +135,10 @@ export default {
                     }
                 ]
             ],
+            fileType: [],
             token: {
                 [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
-            },
+            }
         };
     },
 
@@ -140,8 +149,17 @@ export default {
             }).then(() => {
                 var loading = this.$loading();
                 let url = '/sc-community/workOrder/add';
+                let installData = {
+                    communityId: this.formData.communityId,
+                    orderType: this.formData.orderType,
+                    address: this.formData.address,
+                    repairName: this.formData.repairName,
+                    repairPhone: this.formData.repairPhone,
+                    repairContent: this.formData.repairContent,
+                    repairFile: this.fileType.toString()
+                };
                 this.$http
-                    .post(url, this.formData)
+                    .post(url, installData)
                     .then(({ status, msg }) => {
                         if (status == 0) {
                             this.$message.success(msg);
@@ -158,21 +176,60 @@ export default {
             });
         },
         uploadsuccess(response, file, fileList) {
-            this.$refs.uploaduserlogo.clearFiles();
+            this.$refs.uploadBox.clearFiles();
             if (0 === response.status) {
-                this.formData.repairFile = response.data;
+                this.fileType.push(response.data);
             }
         },
         beforeAvatarUpload(file) {
-            // const isJPG = file.type === 'image/jpeg';
-            // const isLt2M = file.size / 1024 / 1024 < 2;
-            // if (!isLt2M) {
-            //     this.$message.error('上传头像图片大小不能超过 2MB!');
+            // const isVIDEO = file.type === 'video/mp4';
+            // if (!isVIDEO) {
+            //     this.$message.error('上传mp4视频!');
             // }
-            // return isJPG && isLt2M;
+            // return isVIDEO;
+        },
+        typeVideo(str) {
+            let type = str.slice(str.lastIndexOf('.') + 1, str.length);
+            let videoType = ['mp4'];
+            return videoType.includes(type);
+        },
+        clickFile() {
+            this.$refs.uploadBox.$children[0].$refs.input.click();
         }
     },
-    created() {
-    }
+    created() {}
 };
-</script>
+</script>
+<style scoped  lang='scss' scoped>
+.clickUpload {
+    display: flex;
+    .clickUpText {
+        height: 76px;
+        width: 76px;
+        border: 1px solid #e0e1e3;
+        box-sizing: border-box;
+        background: white;
+        border-radius: 5px;
+        margin-right: 5px;
+        z-index: 1;
+        img.dataImg {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 5px;
+        }
+        .addImg {
+            line-height: 76px;
+            text-align: center;
+            cursor: pointer;
+            & > i {
+                font-size: 30px;
+            }
+        }
+        video {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

operationSupport/src/views/operationManagement/workOrders/stepPage/details.vue

@@ -10,7 +10,14 @@
                                 <template v-if="item.slot">
                                     <template v-if="item.slot === 'orderType'">
                                         <span v-if="thisItem['orderType'] == 1">业主报修</span>
-                                        <span v-else>内部报修</span>
+                                        <span v-else-if="thisItem['orderType'] == 2">内部报修</span>
+                                        <span v-else>--</span>
+                                    </template>
+                                    <template v-if="item.slot === 'repairFile' && !!thisItem['repairFile']">
+                                        <div class="imgVdio" v-for="item in thisItem['repairFile'].split(',')" :key="item">
+                                            <video v-if="typeVideo(item)" :src="item" @click="lookVideos(item)"></video>
+                                            <el-image class="imgs" v-else :src="item" :preview-src-list="[item]"></el-image>
+                                        </div>
                                     </template>
                                 </template>
                                 <template v-else>
@@ -30,11 +37,19 @@
                                 <template v-if="item.slot">
                                     <template v-if="item.slot === 'urgencyDegree'">
                                         <span v-if="thisItem['urgencyDegree'] == 2" class="redText">紧急</span>
-                                        <span v-else class="greenText">普通</span>
+                                        <span v-else-if="thisItem['urgencyDegree'] == 1">普通</span>
+                                        <span v-else>--</span>
                                     </template>
                                     <template v-if="item.slot === 'handleResult'">
                                         <span v-if="thisItem['handleResult'] == 2" class="redText">无法处理</span>
-                                        <span v-else class="greenText">成功处理</span>
+                                        <span v-else-if="thisItem['handleResult'] == 1" class="greenText">成功处理</span>
+                                        <span v-else>--</span>
+                                    </template>
+                                    <template v-if="item.slot === 'handleFile' && !!thisItem['handleFile']">
+                                        <div class="imgVdio" v-for="item in thisItem['handleFile'].split(',')" :key="item">
+                                            <video v-if="typeVideo(item)" :src="item" @click="lookVideos(item)"></video>
+                                            <el-image class="imgs" v-else :src="item" :preview-src-list="[item]"></el-image>
+                                        </div>
                                     </template>
                                 </template>
                                 <template v-else>
@@ -49,11 +64,22 @@
         <div class="right">
             <div class="list-item">
                 <div class="formContent-item_title">工单进度追踪</div>
-                <div style="height:300px">
-                    <el-steps direction="vertical" :active="1">
-                        <el-step title="步骤 1" icon="el-icon-full-screen"></el-step>
-                        <el-step title="步骤 2" icon="el-icon-full-screen"></el-step>
-                        <el-step title="步骤 3" icon="el-icon-full-screen" description="这是一段很长很长很长的描述性文字"></el-step>
+                <div style="height: 300px">
+                    <el-steps direction="vertical" :active="thisActive">
+                        <el-step
+                            :title="item.createDate"
+                            icon="el-icon-full-screen"
+                            v-for="item in thisItem['progressList']"
+                            :key="item.id"
+                        >
+                            <div slot="description">
+                                <div v-if="item.type == 1">报修人：{{ thisItem['repairName'] }}</div>
+                                <template v-else>
+                                    <div>处理人：{{ item.name }}</div>
+                                    <div v-if="!!item.operation">操作：{{ item.operation }}</div>
+                                </template>
+                            </div>
+                        </el-step>
                     </el-steps>
                 </div>
             </div>
@@ -99,6 +125,7 @@ export default {
                 {
                     label: '图片/视频:',
                     prop: 'repairFile',
+                    slot: 'repairFile',
                     span: 24
                 }
             ],
@@ -129,10 +156,12 @@ export default {
                 {
                     label: '图片/视频:',
                     prop: 'handleFile',
+                    slot: 'handleFile',
                     span: 24
                 }
             ],
-            thisItem: {}
+            thisItem: {},
+            thisActive: 0
         };
     },
 
@@ -143,9 +172,34 @@ export default {
                 .then(({ data, msg, status }) => {
                     if (status == 0) {
                         this.thisItem = data;
+                        this.thisActive = !!data.progressList.length ? Number(data.progressList.length) - 1 : 0;
                     }
                 })
                 .catch(() => {});
+        },
+        typeVideo(str) {
+            let type = str.slice(str.lastIndexOf('.') + 1, str.length);
+            let videoType = ['mp4'];
+            return videoType.includes(type);
+        },
+        lookVideos(src) {
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: '/lookVideo.vue',
+                    width: '600px',
+                    height: '500px',
+                    props: {
+                        src: src,
+                        callback: resolve
+                    },
+                    showConfirmButton: true,
+                    showCancelButton: true,
+                    hideStar: true,
+                    title: '查看视频'
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
         }
     },
     created() {
@@ -160,6 +214,13 @@ export default {
     /deep/.el-form-item__content {
         font-size: 12px;
     }
+    /deep/ .el-step__title.is-finish,
+    /deep/ .el-step__title.is-process,
+    /deep/ .el-step__description.is-finish {
+        font-weight: 500 !important;
+        color: #424656 !important;
+    }
+
     display: flex;
     justify-content: space-between;
     .formContent-item_title {
@@ -175,4 +236,16 @@ export default {
         clear: inherit;
     }
 }
+.imgVdio {
+    width: 80px;
+    height: 60px;
+    display: inline-block;
+    margin-right: 10px;
+    video,
+    img {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+    }
+}
 </style>