zc

src/assets/styles/button.scss

@@ -266,8 +266,8 @@
   height: 40px;
   line-height:40px;
   border-radius: 6px;
-  border: 1px solid $buttonColorF;
-  color:$buttonColorG;
+  border: 1px solid $buttonColorH;
+  color:$buttonColorH;
   font-size: 14px;
   background:$buttonColorA;
   margin:0;

src/components/lookSingleImgDialog/lookSingleImgDialog.vue

@@ -15,7 +15,7 @@
 -->
 <template>
   <el-dialog class="look-img-dialog" :title="lookImgDialogTitle" :visible.sync="lookImgDialogType" v-if="lookImgDialogType" width="1070px" height="700" append-to-body>
-    <div class="look-img-dialog-min scrollbar-box">
+    <div class="look-img-dialog-min scrollbar-box" :class="backType?'back99':''">
       <img :src="lookImgUrl">
     </div>
   </el-dialog>
@@ -29,6 +29,7 @@
         lookImgDialogTitle:null,
         lookImgDialogType:false,
         lookImgUrl:null,
+        backType:false,
       }
     },
     created(){
@@ -38,8 +39,15 @@
 
     },
     methods:{
-      lookImgDialogOpen(type,url,title){
+      /*
+      * type:1.开启
+      * url:地址
+      * title:标题
+      * backType:true 灰色背景
+      * */
+      lookImgDialogOpen(type,url,title,backType){
         if(type == 1){
+          this.$set(this,'backType',backType?backType:false);
           this.$set(this,'lookImgUrl',url);
           this.$set(this,'lookImgDialogTitle',title?title:'照片');
           this.$set(this,'lookImgDialogType',true);
@@ -95,6 +103,9 @@
       bottom:0;
       width:1026px;
     }
+    .back99{
+      background-color: #dedede!important;
+    }
     .look-img-dialog-min{
       height:560px;
       display: flex;

src/views/serviceCenter/logManagement/algorithmLogs/infoPage.vue

@@ -62,20 +62,26 @@
       <div class="right-content-box scrollbar-box">
         <div>
           <p>原文件</p>
-          <img :src="propsData.originalFile">
+          <img v-if="propsData.originalFile" :src="propsData.originalFile" @click="lookImg(propsData.originalFile)">
         </div>
         <div>
           <p>识别结果</p>
-          <img :src="propsData.checkResult">
+          <img v-if="propsData.checkResult" :src="propsData.checkResult" @click="lookImg(propsData.checkResult)">
         </div>
       </div>
     </div>
+    <!--单张图片预览-->
+    <lookSingleImgDialog ref="lookSingleImgDialog"></lookSingleImgDialog>
   </div>
 </template>
 
 <script>
+  import lookSingleImgDialog from '@/components/lookSingleImgDialog/lookSingleImgDialog.vue'
   export default {
     name: 'algorithmLogsInfoPage',
+    components: {
+      lookSingleImgDialog,
+    },
     props:{
       propsData:{},
     },
@@ -90,6 +96,12 @@
       backPage(){
         this.$parent.goPage(1);
       },
+      //查看图片
+      lookImg(url){
+        if(url){
+          this.$refs.lookSingleImgDialog.lookImgDialogOpen(1,url,'查看');
+        }
+      },
     },
   }
 </script>
@@ -164,6 +176,7 @@
             font-size:14px;
           }
           img{
+            cursor: pointer;
             width:560px;
             height:310px;
             margin:10px;

src/views/systemManagement/publicConfig/basicsConfig.vue

@@ -55,12 +55,8 @@
       <p class="inquire-button-one"  @click="addOrUpdate">保存</p>
       <p class="null-p"></p>
     </div>
-    <!--查看图片-->
-    <el-dialog title="查看" :visible.sync="imgOpen" width="1200px" append-to-body>
-      <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
-        <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto">
-      </div>
-    </el-dialog>
+    <!--单张图片预览-->
+    <lookSingleImgDialog ref="lookSingleImgDialog"></lookSingleImgDialog>
   </div>
 </template>
 
@@ -68,8 +64,12 @@
   import { getToken } from "@/utils/auth";
   import { getConfigByType } from "@/api/commonality/permission";
   import { addOrUpdate } from "@/api/systemManagement/index";
+  import lookSingleImgDialog from '@/components/lookSingleImgDialog/lookSingleImgDialog.vue'
   export default {
     name: "publicConfig",
+    components: {
+      lookSingleImgDialog,
+    },
     data() {
       return {
         uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
@@ -93,8 +93,6 @@
             { required: true, message: "长方形Logo不能为空", trigger: "blur" }
           ],
         },
-        imgUrl:"",
-        imgOpen:false,
       };
     },
     created() {
@@ -130,8 +128,7 @@
       },
       //查看图片
       lookImg(url){
-        this.imgUrl = url;
-        this.imgOpen = true;
+        this.$refs.lookSingleImgDialog.lookImgDialogOpen(1,url,'查看',true);
       },
       //获取数据
       getConfigByType(){

src/views/systemManagement/publicConfig/integrationConfig.vue

@@ -53,12 +53,8 @@
       <p class="inquire-button-one"  @click="addOrUpdate">保存</p>
       <p class="null-p"></p>
     </div>
-    <!--查看图片-->
-    <el-dialog title="查看" :visible.sync="imgOpen" width="1200px" append-to-body>
-      <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
-        <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto">
-      </div>
-    </el-dialog>
+    <!--单张图片预览-->
+    <lookSingleImgDialog ref="lookSingleImgDialog"></lookSingleImgDialog>
   </div>
 </template>
 
@@ -66,8 +62,12 @@
 import { getToken } from "@/utils/auth";
 import { getConfigByType } from "@/api/commonality/permission";
 import { addOrUpdate } from "@/api/systemManagement/index";
+import lookSingleImgDialog from '@/components/lookSingleImgDialog/lookSingleImgDialog.vue'
 export default {
   name: "publicConfig",
+  components: {
+    lookSingleImgDialog,
+  },
   data() {
     return {
       uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
@@ -103,8 +103,6 @@ export default {
 
 
       },
-      imgUrl:"",
-      imgOpen:false,
       //物联控制权限
       lotControl:[],
       citiesList:[
@@ -181,8 +179,7 @@ export default {
     },
     //查看图片
     lookImg(url){
-      this.imgUrl = url;
-      this.imgOpen = true;
+      this.$refs.lookSingleImgDialog.lookImgDialogOpen(1,url,'查看');
     },
     //获取数据
     getConfigByType(){

src/views/systemManagement/publicConfig/programConfig.vue

@@ -44,22 +44,22 @@
       <p class="inquire-button-one"  @click="addOrUpdate">保存</p>
       <p class="null-p"></p>
     </div>
-    <!--查看图片-->
-    <el-dialog title="查看" :visible.sync="imgOpen" width="1200px" append-to-body>
-      <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
-        <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto">
-      </div>
-    </el-dialog>
+    <!--单张图片预览-->
+    <lookSingleImgDialog ref="lookSingleImgDialog"></lookSingleImgDialog>
   </div>
 </template>
 <script>
 import { getToken } from "@/utils/auth";
 import { getConfigByType } from "@/api/commonality/permission";
 import { addOrUpdate } from "@/api/systemManagement/index";
+import lookSingleImgDialog from '@/components/lookSingleImgDialog/lookSingleImgDialog.vue'
 
 import store from '@/store'
 export default {
   name: "publicConfig",
+  components: {
+    lookSingleImgDialog,
+  },
   data() {
     return {
       uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
@@ -79,8 +79,6 @@ export default {
           { required: true, message: "首页banner不能为空", trigger: "blur" }
         ],
       },
-      imgUrl:"",
-      imgOpen:false,
     };
   },
   created() {
@@ -110,8 +108,7 @@ export default {
     },
     //查看图片
     lookImg(url){
-      this.imgUrl = url;
-      this.imgOpen = true;
+      this.$refs.lookSingleImgDialog.lookImgDialogOpen(1,url,'查看');
     },
     //获取数据
     getConfigByType(){