更改图片视频样式

operationSupport/src/utils/filters.js

@@ -30,6 +30,9 @@ let filterHtml = (val) => {
     let content = val.replace(/<.+?>/g, '');
     content = content.replace(/&nbsp;/gi, '');
     content = content.replace(/\s/gi, '');
+    content = content.replace(/&ldquo;/gi, '“');
+    content = content.replace(/&rdquo;/gi, '”');
+
     // if (content.length >= 20) {
     //     content = content.substring(0, 20) + '...';
     // }

operationSupport/src/views/propertyManagement/common/previeInform.vue

@@ -33,7 +33,14 @@
             <div class="prev-text image-content" v-if="dataDetail.type">
                 <div class="image-text">主题图片:</div>
                 <div class="right-image" v-if="successImageLists.length > 0">
-                    <img v-for="(item, index) of successImageLists" :key="index" :src="item.url" alt="" />
+                    <el-image
+                        class="images"
+                        v-for="(item, index) of successImageLists"
+                        :key="index"
+                        :src="item.url"
+                        :preview-src-list="[item.url]"
+                    ></el-image>
+                    <!-- <img v-for="(item, index) of successImageLists" :key="index" :src="item.url" alt="" /> -->
                     <!-- <img src="https://a.storyblok.com/f/88751/1734x1092/c3cde09986/storyblok-editor-1.jpg/m/900x0/" alt="" /> -->
                     <!-- <img src="https://a.storyblok.com/f/88751/1734x1092/c3cde09986/storyblok-editor-1.jpg/m/900x0/" alt="" /> -->
                     <!-- <img src="https://a.storyblok.com/f/88751/1734x1092/c3cde09986/storyblok-editor-1.jpg/m/900x0/" alt="" /> -->
@@ -215,7 +222,7 @@ export default {
             :last-child {
                 margin-right: 0;
             }
-            img {
+            .images {
                 display: block;
                 float: left;
                 width: 180px;
@@ -251,13 +258,6 @@ export default {
         .html-left {
             margin-right: 5%;
         }
-
-        .html-right {
-            // width: 86%;
-            // max-height: 218px;
-            // overflow-y: scroll;
-            // overflow-x: hidden;
-        }
     }
     // 弹框自定义滚动条
     .my-scroll-bar {
@@ -267,9 +267,6 @@ export default {
         /deep/ .gm-scrollbar.-horizontal .thumb {
             height: 0;
         }
-        /deep/ .gm-scroll-view {
-            // height: 0 !important;
-        }
     }
     /deep/ .wscnph {
         max-width: 200px;

operationSupport/src/views/propertyManagement/index.vue

@@ -113,18 +113,17 @@
                         </div>
                         <div class="complaint-images complaint-content">
                             <span class="complaint-content-left">图片/视频：</span>
-                            <span v-for="(item, index) in mediaList" :key="index">
-                                <span v-if="item.type == 1">
-                                    <el-image class="images" :src="item.url" :preview-src-list="imgList"> </el-image
-                                ></span>
-                                <span @click="clickVideo" v-else>
-                                    <video id="video" :controls="videoControls" class="videos">
-                                        <source :src="item.url" type="video/mp4" />
-                                        您的浏览器暂不支持播放视频
-                                    </video></span
-                                >
+                            <span v-if="mediaList.length > 0">
+                                <span v-for="(item, index) in mediaList" :key="index">
+                                    <span v-if="typeVideo(item)">
+                                        <video class="images" :src="item" @click="lookVideos(item)"></video>
+                                    </span>
+                                    <span v-else>
+                                        <el-image class="images" :src="item" :preview-src-list="[item]"></el-image>
+                                    </span>
+                                </span>
                             </span>
-                            <span v-els> 暂无图片 </span>
+                            <span v-else> 暂无图片 </span>
                         </div>
                     </div>
                     <div class="record">
@@ -210,8 +209,6 @@ export default {
             complaintName: '',
             // 视频获得焦点
             videoControls: false,
-            // 弹框显示图片/视频
-            imgList: [],
             mediaList: [],
             // 物业回复
             replayForm: {
@@ -337,6 +334,30 @@ export default {
     },
     mounted() {},
     methods: {
+        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();
+            });
+        },
         /** 点击播放视频*/
         clickVideo() {
             this.videoControls = !this.videoControls;
@@ -432,17 +453,7 @@ export default {
                     this.rowData = res.data;
                     this.centerDialogVisible = true;
                     this.complaintName = row.userName;
-                    this.mediaList = JSON.parse(res.data.imageUrl);
-                    let arr = this.mediaList.filter((item) => {
-                        console.log('item', item);
-                        return item.url.substr(-3) == 'png' || item.url.substr(-3) == 'jpg' || item.url.substr(-4) == 'jpeg';
-                    });
-                    arr.map((item) => {
-                        if (item.url) {
-                            this.imgList.push(item.url);
-                        }
-                    });
-                    console.log(' this.imgList', this.imgList);
+                    this.mediaList = res.data.imageUrl.split(',');
                 } else {
                     this.rowData = row;
                     this.$message('获取详情失败!请稍后重试');

operationSupport/src/views/propertyManagement/inform.vue

@@ -250,7 +250,7 @@
                                     <div v-else>{{ rowDetail.type == 0 ? '物业通知' : '社区活动' }}</div>
                                 </div>
                                 <div class="center-padding"></div>
-                                <GeminiScrollbar class="my-scroll-bar" :autoshow="false">
+                                <GeminiScrollbar class="my-scroll-bar" :autoshow="true">
                                     <div class="dialog-right-content">
                                         <div class="dialog-title">
                                             <div class="dialog-titles" v-if="showDetail">

operationSupport/src/views/propertyManagement/neighbor.vue

@@ -88,23 +88,11 @@
                         </div>
                         <div class="complaint-content complaint-images">
                             <span class="complaint-content-left">图片/视频：</span>
-                            <!-- <el-image src="/sc-community-web/upload/2021/12/15/db4376cf4ab541f9a282145a5ddf2919.jpeg"></el-image> -->
-                            <span v-if="srcList">
-                                <span v-for="(item, index) in imgList" :key="index">
-                                    <el-image class="images" :src="item" :preview-src-list="imgList"> </el-image
-                                ></span>
-                                <span @click="clickVideo">
-                                    <video
-                                        id="video"
-                                        v-for="(item, index) in videoList"
-                                        :key="index"
-                                        :controls="videoControls"
-                                        class="videos"
-                                    >
-                                        <source :src="item" type="video/mp4" />
-                                        您的浏览器暂不支持播放视频
-                                    </video></span
-                                >
+                            <span v-if="mediaList.length > 0" class="complaint-content-media">
+                                <span v-for="(item, index) in mediaList" :key="index" class="media">
+                                    <video v-if="typeVideo(item)" id="video" class="images" :src="item" @click="lookVideos(item)"></video>
+                                    <el-image v-else class="images" :src="item" :preview-src-list="srcList"></el-image>
+                                </span>
                             </span>
                             <span v-else> 暂无图片/视频 </span>
                         </div>
@@ -175,10 +163,9 @@ export default {
     data() {
         let _this = this;
         return {
-            // 弹框显示图片
+            // 媒体
+            mediaList: [],
             srcList: [],
-            imgList: [],
-            videoList: [],
             // 视频获得焦点
             videoControls: false,
             // 查询的时间
@@ -250,6 +237,30 @@ export default {
     },
     mounted() {},
     methods: {
+        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();
+            });
+        },
         /**查询按钮*/
         searchInfo() {
             if (this.searchTime && this.searchTime.length) {
@@ -315,15 +326,11 @@ export default {
                     if (res.status === 0) {
                         if (res.data.file) {
                             let file = res.data.file;
-                            let files = file.split(',');
-                            this.srcList = files;
-                            console.log('file', this.srcList);
+                            let mediaList = file.split(',');
+                            this.mediaList.length = 3;
 
-                            this.imgList = files.filter((item) => {
-                                return item.substr(-3) == 'png' || item.substr(-3) == 'jpg' || item.substr(-4) == 'jpeg';
-                            });
-                            this.videoList = files.filter((item) => {
-                                return item.substr(-3) === 'mp4';
+                            this.srcList = this.mediaList.filter((item) => {
+                                return item !== 'mp4';
                             });
                             this.centerDialogVisible = true;
                             this.enditShow = true;

operationSupport/src/views/propertyManagement/style.scss

@@ -77,16 +77,24 @@ $fontSizeSmall: 14px;
         .complaint-content-right {
             color: #535766;
         }
+        .complaint-content-media {
+            height: 100px !important;
+            overflow: hidden !important;
+            .media {
+                width: 100%;
+            }
+        }
     }
     .complaint-images {
         margin-top: 33px;
         margin-left: 20px;
         display: block;
+        max-height: 70px;
     }
     // 图片/视频样式
     .images {
-        width: 80px;
-        height: 60px;
+        width: 25%;
+        height: 70px;
         vertical-align: middle;
         border-radius: 4px;
         margin-right: 10px;

operationSupport/src/views/workbench/index.vue

@@ -179,7 +179,7 @@
             <div class="footer-left" style="margin-right: 0">
                 <div class="footer-left-text">
                     <div>告警信息</div>
-                    <div @click="goPath('/alarmManagement/index')">查看更多&nbsp;></div>
+                    <div @click="goPath('/alarmManagement/details')">查看更多&nbsp;></div>
                 </div>
                 <div v-if="warnData.length > 0">
                     <ul>

operationSupport/src/views/workbench/style.scss

@@ -209,7 +209,7 @@
         display: flex;
         font-size: 12px;
         width: 80%;
-        margin-right: 30px;
+        // margin-right: 30px;
         height: 17px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -223,35 +223,5 @@
             text-overflow: ellipsis;
             white-space: nowrap;
         }
-        // /deep/ div,
-        // p,
-        // h1,
-        // h2,
-        // h3,
-        // h4,
-        // h5,
-        // h6,
-        // span {
-        //     font-size: 12px !important;
-        //     font-size: 12pt !important;
-        //     line-height: 12px;
-        //     vertical-align: middle;
-        // }
-        // :last-child {
-        //     margin-left: 5px;
-        //     height: 17px;
-        //     width: 346px;
-        //     overflow: hidden;
-        //     text-overflow: ellipsis;
-        //     white-space: nowrap;
-        // }
-        // /deep/ img {
-        //     height: 15px;
-        //     max-width: 14px !important;
-        // }
-        // .wscnph {
-        //     width: 14px !important;
-        //     vertical-align: middle;
-        // }
     }
 }