共享图片采集

src/views/modules/base/smartExcel/cpts/picture-Info.vue

@@ -0,0 +1,331 @@
+<template>
+    <div>
+        <div class="dialog-h-content scroll-h">
+            <el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" class="form">
+                <el-row>
+
+                    <el-col :span="24">
+                        <el-form-item label="图片集名称" prop="title" label-width="150px">
+                            <el-input v-model.trim="formData.title" size="small" clearable placeholder="请输入图片集名称(30字以内)"
+                                class="u-item-width-normal"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="图片集封面" label-width="150px" prop="fileList">
+                            <template>
+                                <upload-image :defaultFileList="fileList" :limit="1" @change="onChangeFileList"
+                                    @file-removed="removedImg"></upload-image>
+                            </template>
+                        </el-form-item>
+                    </el-col>
+                    
+                    <el-col :span="24">
+                        <el-form-item label-width="150px" label="共享范围" prop="columnId">
+                            <el-select v-model="formData.columnId" placeholder="仅本组织内共享" clearable>
+                                <el-option v-for="item in sharingScopeList" :key="item.value" :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </div>
+        <div class="div_btn">
+            <el-button size="small" @click="handleCancle">取 消</el-button>
+            <el-button size="small" v-if="formType != 'detail'" type="primary" :disabled="btnDisable"
+                @click="handleComfirm">确 定</el-button>
+
+        </div>
+    </div>
+</template>
+ 
+ <script>
+ import { mapGetters } from 'vuex'
+ import { Loading } from 'element-ui' // 引入Loading服务
+ import { requestPost } from '@/js/dai/request'
+ import Tinymce from '@c/tinymce2/index.vue'
+ import daiMap from "@/utils/dai-map";
+ import util from '@js/util.js';
+ // import UploadImage from './upload-image.vue'
+ import UploadImage from '@/views/modules/plugins/rent/upload-image.vue'
+ 
+ 
+ var map
+ var search
+ var markers
+ var infoWindowList
+ var geocoder // 新建一个正逆地址解析类
+ 
+ let loading // 加载动画
+ export default {
+    data() {
+        return {
+            fileList:[],
+            sharingScopeList:[
+            {
+                    value:"0",
+                    label:"仅本部门内共享"
+                },
+                {
+                    value:"1",
+                    label:"本级和直接下级组织共享"
+                },
+                {
+                    value:"2",
+                    label:"本级和直接上级组织共享"
+                },
+                {
+                    value:"3",
+                    label:"本级和直接上下级组织共享"
+                },
+            ],
+            formData:
+            {
+            },
+            corganizerList: [],
+            uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
+            customerId: localStorage.getItem('customerId'),
+
+        }
+
+    },
+ 
+    components: {Tinymce, UploadImage  },
+    mounted() {
+        this.activityType()
+        this.listServerOrg()
+    },
+ 
+    methods: {
+        async activityType() {
+            this.$nextTick(() => {
+                if (!map) {
+                    this.initMap(this.formData.latitude, this.formData.longitude);
+                    console.log("map", map,this.formData.latitude, this.formData.longitude)
+                } else {
+                    map.setCenter(this.formData.latitude, this.formData.longitude);
+                    map.setMarker(this.formData.latitude, this.formData.longitude);
+                    console.log("mapmapmap", map)
+                }
+            })
+        },
+        removedImg() {
+            this.formData.coverPic = ''
+        },
+        onChangeFileList(e) {
+            console.log(e, 'sssssb');
+            this.fileList = e.length > 0 ? e.map(item => ({
+                fileType: '0',
+                fileUrl: item.response.data.url
+            })) : []; // 当e为空时清空fileList
+            if (e.length > 0) {
+                this.formData.coverImg = e[0].response.data.url;
+            } else {
+                this.formData.coverImg = '';
+            }
+        },
+        async initForm(type, activityId) {
+            this.startLoading()
+            this.formType = type
+            console.log(type,activityId,"进行修改");
+   
+            if (type === 'edit') {
+                this.formData = activityId
+                if (activityId.coverPic) {
+                    let ob = {
+                        fileType: '0',
+                        fileUrl: activityId.coverPic
+                    };
+                    this.fileList = [ob];
+                    this.formData.coverPic = ob.fileUrl;
+                }
+            }  else {
+                
+            }
+            this.endLoading()
+ 
+        },
+ 
+        async getDemandOptions() {
+            this.$http
+                .post("/actual/base/serviceitem/listAllCategory",{})
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg);
+                    } else {
+                        console.log(res.data);
+                        this.demandOptions = this.getFlagData(
+                            this.getTreeData(res.data),
+                            "usableFlag"
+                        );
+                    }
+                })
+                .catch(() => {
+                    return this.$message.error("网络错误");
+                });
+        },
+        getFlagData(data, flag) {
+            if (!Array.isArray(data)) return [];
+            let arr1 = data.filter((item) => item[flag]);
+            let arr2 = arr1.map((item) => {
+                if (item.childCateList)
+                    return { ...item, childCateList: this.getFlagData(item.childCateList, flag) };
+                else return item;
+            });
+            return arr2;
+        },
+        getTreeData(data) {
+            if (!Array.isArray(data)) return [];
+            let arr = data.map((item) => {
+                let _item = {};
+                if (item.childCateList) {
+                    if (item.childCateList.length === 0)
+                        _item = { ...item, childCateList: undefined };
+                    else _item = { ...item, childCateList: this.getTreeData(item.childCateList) };
+                } else {
+                    _item = { ...item };
+                }
+                return _item;
+            });
+            return arr;
+        },
+        async loadGrid() {
+            const url = "/gov/org/customergrid/gridoption"
+ 
+            let params = {
+                agencyId: this.agencyId
+            }
+ 
+            const { data, code, msg } = await requestPost(url, params)
+ 
+            if (code === 0) {
+                this.gridList = data
+ 
+            } else {
+                this.$message.error(msg)
+            }
+ 
+        },
+ 
+ 
+
+        async handleComfirm() {
+           this.addActivity()
+        },
+        async addActivity() {
+                let url = '/voluntary/newsTrends/saveOrUpdate'
+                const { data, code, msg } = await requestPost(url, this.formData)
+                if (code === 0) {
+                    this.$message({
+                        type: 'success',
+                        message: '操作成功'
+                    })
+                } else {
+                    this.$message.error(msg)
+                }
+                console.log("sdlkfjklsdf ");
+                this.$emit('closeAdd')
+            },
+            
+ 
+ 
+        handleCancle() {
+             console.log("sdlkfjklsdf ");
+            this.$emit('closeAdd')
+ 
+        },
+ 
+
+        // 开启加载动画
+        startLoading() {
+            loading = Loading.service({
+                lock: true, // 是否锁定
+                text: '正在加载……', // 加载中需要显示的文字
+                background: 'rgba(0,0,0,.7)' // 背景颜色
+            })
+        },
+        // 结束加载动画
+        endLoading() {
+            // clearTimeout(timer);
+            if (loading) {
+                loading.close()
+            }
+        }
+    },
+    computed: {
+        dataRule() {
+            return {
+                columnId: [
+                    { required: true, message: '请输入图片集名称', trigger: 'blur' }
+                ],
+                title: [
+                    { required: true, message: '请选择共享范围', trigger: 'blur' }
+                ],
+                fileList: [
+                    { required: true, message: '请选择图片集封面', trigger: 'blur' }
+                ]
+            }
+        },
+ 
+    },
+    props: {
+ 
+ 
+ 
+    },
+    destroyed () {
+     map = null
+   }
+ }
+ </script>
+ 
+ 
+ <style lang="scss" scoped>
+ @import "@/assets/scss/modules/visual/communityManageForm.scss";
+ </style>
+ <style lang="scss" scoped>
+ .item_width_1 {
+    width: 634px;
+ 
+    /deep/.tox .tox-dialog {
+        z-index: 20000;
+    }
+ }
+ .u-item-width-normal{
+    width: 222px;
+ }
+ 
+ .tinymce_view {
+    ::v-deep .tox .tox-dialog {
+        z-index: 2000000000;
+    }
+ }
+ 
+ .div_map {
+    position: relative;
+ }
+ 
+ .div_searchmap {
+    z-index: 5000;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+ }
+ 
+ .tinymce_view {
+    height: 400px;
+    overflow: auto;
+ }
+ 
+ .text_p {
+    margin: 0;
+    padding: 0 10px;
+    border: 1px solid #d9d9d9;
+    border-radius: 5px;
+ 
+    >p {
+        margin: 0;
+    }
+ }
+ </style>

src/views/modules/base/smartExcel/cpts/picture-add.vue

@@ -0,0 +1,331 @@
+<template>
+    <div>
+        <div class="dialog-h-content scroll-h">
+            <el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" class="form">
+                <el-row>
+
+                    <el-col :span="24">
+                        <el-form-item label="图片集名称" prop="title" label-width="150px">
+                            <el-input v-model.trim="formData.title" size="small" clearable placeholder="请输入图片集名称(30字以内)"
+                                class="u-item-width-normal"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="图片集封面" label-width="150px" prop="fileList">
+                            <template>
+                                <upload-image :defaultFileList="fileList" :limit="1" @change="onChangeFileList"
+                                    @file-removed="removedImg"></upload-image>
+                            </template>
+                        </el-form-item>
+                    </el-col>
+                    
+                    <el-col :span="24">
+                        <el-form-item label-width="150px" label="共享范围" prop="columnId">
+                            <el-select v-model="formData.columnId" placeholder="仅本组织内共享" clearable>
+                                <el-option v-for="item in sharingScopeList" :key="item.value" :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </div>
+        <div class="div_btn">
+            <el-button size="small" @click="handleCancle">取 消</el-button>
+            <el-button size="small" v-if="formType != 'detail'" type="primary" :disabled="btnDisable"
+                @click="handleComfirm">确 定</el-button>
+
+        </div>
+    </div>
+</template>
+ 
+ <script>
+ import { mapGetters } from 'vuex'
+ import { Loading } from 'element-ui' // 引入Loading服务
+ import { requestPost } from '@/js/dai/request'
+ import Tinymce from '@c/tinymce2/index.vue'
+ import daiMap from "@/utils/dai-map";
+ import util from '@js/util.js';
+ // import UploadImage from './upload-image.vue'
+ import UploadImage from '@/views/modules/plugins/rent/upload-image.vue'
+ 
+ 
+ var map
+ var search
+ var markers
+ var infoWindowList
+ var geocoder // 新建一个正逆地址解析类
+ 
+ let loading // 加载动画
+ export default {
+    data() {
+        return {
+            fileList:[],
+            sharingScopeList:[
+            {
+                    value:"0",
+                    label:"仅本部门内共享"
+                },
+                {
+                    value:"1",
+                    label:"本级和直接下级组织共享"
+                },
+                {
+                    value:"2",
+                    label:"本级和直接上级组织共享"
+                },
+                {
+                    value:"3",
+                    label:"本级和直接上下级组织共享"
+                },
+            ],
+            formData:
+            {
+            },
+            corganizerList: [],
+            uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
+            customerId: localStorage.getItem('customerId'),
+
+        }
+
+    },
+ 
+    components: {Tinymce, UploadImage  },
+    mounted() {
+        this.activityType()
+        this.listServerOrg()
+    },
+ 
+    methods: {
+        async activityType() {
+            this.$nextTick(() => {
+                if (!map) {
+                    this.initMap(this.formData.latitude, this.formData.longitude);
+                    console.log("map", map,this.formData.latitude, this.formData.longitude)
+                } else {
+                    map.setCenter(this.formData.latitude, this.formData.longitude);
+                    map.setMarker(this.formData.latitude, this.formData.longitude);
+                    console.log("mapmapmap", map)
+                }
+            })
+        },
+        removedImg() {
+            this.formData.coverPic = ''
+        },
+        onChangeFileList(e) {
+            console.log(e, 'sssssb');
+            this.fileList = e.length > 0 ? e.map(item => ({
+                fileType: '0',
+                fileUrl: item.response.data.url
+            })) : []; // 当e为空时清空fileList
+            if (e.length > 0) {
+                this.formData.coverImg = e[0].response.data.url;
+            } else {
+                this.formData.coverImg = '';
+            }
+        },
+        async initForm(type, activityId) {
+            this.startLoading()
+            this.formType = type
+            console.log(type,activityId,"进行修改");
+   
+            if (type === 'edit') {
+                this.formData = activityId
+                if (activityId.coverPic) {
+                    let ob = {
+                        fileType: '0',
+                        fileUrl: activityId.coverPic
+                    };
+                    this.fileList = [ob];
+                    this.formData.coverPic = ob.fileUrl;
+                }
+            }  else {
+                
+            }
+            this.endLoading()
+ 
+        },
+ 
+        async getDemandOptions() {
+            this.$http
+                .post("/actual/base/serviceitem/listAllCategory",{})
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg);
+                    } else {
+                        console.log(res.data);
+                        this.demandOptions = this.getFlagData(
+                            this.getTreeData(res.data),
+                            "usableFlag"
+                        );
+                    }
+                })
+                .catch(() => {
+                    return this.$message.error("网络错误");
+                });
+        },
+        getFlagData(data, flag) {
+            if (!Array.isArray(data)) return [];
+            let arr1 = data.filter((item) => item[flag]);
+            let arr2 = arr1.map((item) => {
+                if (item.childCateList)
+                    return { ...item, childCateList: this.getFlagData(item.childCateList, flag) };
+                else return item;
+            });
+            return arr2;
+        },
+        getTreeData(data) {
+            if (!Array.isArray(data)) return [];
+            let arr = data.map((item) => {
+                let _item = {};
+                if (item.childCateList) {
+                    if (item.childCateList.length === 0)
+                        _item = { ...item, childCateList: undefined };
+                    else _item = { ...item, childCateList: this.getTreeData(item.childCateList) };
+                } else {
+                    _item = { ...item };
+                }
+                return _item;
+            });
+            return arr;
+        },
+        async loadGrid() {
+            const url = "/gov/org/customergrid/gridoption"
+ 
+            let params = {
+                agencyId: this.agencyId
+            }
+ 
+            const { data, code, msg } = await requestPost(url, params)
+ 
+            if (code === 0) {
+                this.gridList = data
+ 
+            } else {
+                this.$message.error(msg)
+            }
+ 
+        },
+ 
+ 
+
+        async handleComfirm() {
+           this.addActivity()
+        },
+        async addActivity() {
+                let url = '/voluntary/newsTrends/saveOrUpdate'
+                const { data, code, msg } = await requestPost(url, this.formData)
+                if (code === 0) {
+                    this.$message({
+                        type: 'success',
+                        message: '操作成功'
+                    })
+                } else {
+                    this.$message.error(msg)
+                }
+                console.log("sdlkfjklsdf ");
+                this.$emit('closeAdd')
+            },
+            
+ 
+ 
+        handleCancle() {
+             console.log("sdlkfjklsdf ");
+            this.$emit('closeAdd')
+ 
+        },
+ 
+
+        // 开启加载动画
+        startLoading() {
+            loading = Loading.service({
+                lock: true, // 是否锁定
+                text: '正在加载……', // 加载中需要显示的文字
+                background: 'rgba(0,0,0,.7)' // 背景颜色
+            })
+        },
+        // 结束加载动画
+        endLoading() {
+            // clearTimeout(timer);
+            if (loading) {
+                loading.close()
+            }
+        }
+    },
+    computed: {
+        dataRule() {
+            return {
+                columnId: [
+                    { required: true, message: '请输入图片集名称', trigger: 'blur' }
+                ],
+                title: [
+                    { required: true, message: '请选择共享范围', trigger: 'blur' }
+                ],
+                fileList: [
+                    { required: true, message: '请选择图片集封面', trigger: 'blur' }
+                ]
+            }
+        },
+ 
+    },
+    props: {
+ 
+ 
+ 
+    },
+    destroyed () {
+     map = null
+   }
+ }
+ </script>
+ 
+ 
+ <style lang="scss" scoped>
+ @import "@/assets/scss/modules/visual/communityManageForm.scss";
+ </style>
+ <style lang="scss" scoped>
+ .item_width_1 {
+    width: 634px;
+ 
+    /deep/.tox .tox-dialog {
+        z-index: 20000;
+    }
+ }
+ .u-item-width-normal{
+    width: 222px;
+ }
+ 
+ .tinymce_view {
+    ::v-deep .tox .tox-dialog {
+        z-index: 2000000000;
+    }
+ }
+ 
+ .div_map {
+    position: relative;
+ }
+ 
+ .div_searchmap {
+    z-index: 5000;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+ }
+ 
+ .tinymce_view {
+    height: 400px;
+    overflow: auto;
+ }
+ 
+ .text_p {
+    margin: 0;
+    padding: 0 10px;
+    border: 1px solid #d9d9d9;
+    border-radius: 5px;
+ 
+    >p {
+        margin: 0;
+    }
+ }
+ </style>

src/views/modules/base/smartExcel/cpts/picture-collection.vue

@@ -1,30 +1,91 @@
 <template>
-    <div class="" style="margin-left: 50px;">
+    <div class="" style="height: 900px;margin: 20px;">
-        <el-button type="primary" style="margin:20px 0  20px 0" size="small">新建图片库</el-button>
+        <div v-if="!showPictureList">
-        <div>
+            <el-button type="primary" style="margin:20px 0  20px 0" size="small"
-            <div class="gallery" v-for="(item, index) in pictureList">
+                @click="onClick('add')">新建图片库</el-button>
-         
+            <div>
-                   <div class="gallery-item" style="text-align: center;position: absolute;  ">
+                <div class="gallery">
-                        <img   :src="require(`@/assets/images/index/imageBackground.png`)" alt="" style="cursor:pointer; width: 190; height: 180px; ">
+                    <div v-for="(item, index) in pictureList" style="margin-bottom: 30px;">
-                        <img   :src="require(`@/assets/images/index/noPictures.png`)" alt="" style="  cursor:pointer; width: 200; height: 200px;">
+                        <div style="margin: 30px 30px 100px 30px ">
+                            <div style="position: relative;">
+                                <div style="position: absolute;z-index: 10; right: -10px;top: -10px; ">
+                                    <el-dropdown @command="onClickEdit">
+                                        <span class="el-dropdown-link" style="color: blue;">
+                                            . . .
+                                        </span>
+                                        <el-dropdown-menu slot="dropdown">
+                                            <el-dropdown-item :command="item">修改</el-dropdown-item>
+                                            <el-dropdown-item :command="item">删除</el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </el-dropdown>
+                                </div>
+                                <img :src="require(`@/assets/images/index/imageBackground.png`)" alt=""
+                                    style="    position: absolute; cursor:pointer;  height: 180px;width: 200px; ">
+                                <img :src="item.src ? `${item.src}` : require(`@/assets/images/index/noPictures.png`)"
+                                    @click="onPictureList" alt="" style=" top: -20px;
+                    left: -20px;;  position: absolute; cursor:pointer; height: 180px; width: 200px;">
+                            </div>
+                        </div>
+                        <div style="position: relative; bottom: -120px;left: 30px; font-size: 14px;">{{ item.title }}
+                        </div>
+                    </div>
                 </div>
-
             </div>
+            <el-dialog :visible.sync="formShow" :close-on-click-modal="false" :close-on-press-escape="false"
+                title="查看图片" width="950px" top="5vh" class="dialog-h" @closed="closeAdd">
+                <picture-add ref="ref_form" @closeAdd="closeAdd"></picture-add>
+            </el-dialog>
         </div>
+         <div v-if="showPictureList"> 
+            <picture-list ref="ref_form" @closeAdd="closePictureList"></picture-list>
+         </div>
+
     </div>
 </template>
 <script>
 import { requestPost, requestGet } from "@/js/dai/request";
 import { mapGetters } from 'vuex'
+import pictureAdd  from '../cpts/picture-add.vue'
+import pictureList  from '../cpts/picture-list.vue'
 export default {
 data() {
     return {
+        showPictureList:false,
+        formShow:false,
         pictureList:[
             {
-                src:"kdfjlsjf"
+                id:"1001",
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"",
+                      title:"嘉定山社区网格巡查"
             },
-            {},
-            {},
        
         ],
         pageNo: 1,
@@ -40,37 +101,31 @@ mounted() {
     this.getTableData()
 },
 methods: {
-    // handleSizeChange(val) {
+    closePictureList(){
-    //     this.pageSize = val;
+        this.showPictureList=false  
-    //     window.localStorage.setItem("pageSize", val);
+    },
-    //     this.getTableData();
+    onPictureList(){
-    // },
+        this.showPictureList=true
-    // handleCurrentChange(val) {
+    },
-    //     this.pageNo = val;
+    closeAdd(){
-    //     this.getTableData();
+        this.formShow=false
-    // },
+    },
-    // async getTableData() {
+    onClick(type,id){
-    //     const url = "/actual/base/communityOneTablePublish/page";
+        console.log(type,"这是点击");
-    //     const { pageSize, pageNo, formData } = this;
+        this.formShow=true
-    //     const { data, code, msg } = await requestGet(url, {
+        this.$nextTick(() => {
-    //         pageSize,
+             this.$refs.ref_form.initForm(type,id);
-    //         pageNo,
+      });
-    //         ...formData
+    },  
-    //     });
+    onClickEdit(item){
-    //     if (code === 0) {
+        this.formShow=true
-    //         this.total = data.total || 0;
+        this.$nextTick(() => {
-    //         this.tableData = data.list
+             this.$refs.ref_form.initForm("edit",item);
-    //             ? data.list.map((item) => {
+      });
-    //                 return item;
+    }, 
-    //             })
+
-    //             : [];
-    //     } else {
-    //         this.$message.error(msg);
-    //     }
-    // },
-},
-components:{
 },
+components:{pictureAdd,pictureList},
 computed:{
     tableHeight() {
         return (this.clientHeight - 140) + 'px'
@@ -94,8 +149,7 @@ watch: {},
 .gallery {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 2fr));
-    gap: 50px;
+    gap: 100px;
-    .gallery-item{
+
-    }
 }
 </style>

src/views/modules/base/smartExcel/cpts/picture-list.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="" style="height: 900px;margin: 20px;">
+        <div style="margin:20px 0  20px 0;align-items: center;" class="flex">
+            <el-button type="text" size="small" style="margin-right: 10px; font-size: 10px;">返回</el-button>
+            <div style="margin-right: 10px;">{{ title }} </div>
+            <div>
+                <el-upload :headers="$getElUploadHeaders()" class="upload-demo" 
+                :data="{customerId:customerId}"
+                :action="uploadUlr" :show-file-list="false"
+                    :on-success="handleSuccess"   >
+                    <el-button size="small" type="primary">点击上传</el-button>
+                </el-upload>
+            </div>
+        </div>
+        <div>
+            <div class="gallery">
+                <div v-for="(item, index) in pictureList"
+                    style="display: flex;flex-direction: column; justify-content: center;align-items: center;">
+                    <div style="position: relative;" @click="onClickInfo(item)">
+                        <img :src="item.src ? `${item.src}` : require(`@/assets/images/index/noPictures.png`)" alt=""
+                            style=" cursor:pointer; height: 180px; width: 200px;">
+                        <el-dropdown @command="onClickEdit"
+                            style="position: absolute;z-index: 10;width: 30px;right: 1px;">
+                            <span class="el-dropdown-link" style="color: red;">
+                                . . .
+                            </span>
+                            <el-dropdown-menu slot="dropdown">
+                                <el-dropdown-item :command="item">删除</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                    </div>
+                    <div style="margin-top: 10px;">{{ item.title }}
+                    </div>
+                    <div style="margin-top: 10px; font-size: 10px; color: #7f89a8;">
+                        <span style=""> {{ item.title }}</span>
+                        <span> {{ item.title }}</span>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-dialog :visible.sync="showInfo" :close-on-click-modal="false" :close-on-press-escape="false" title="查看图片"
+            width="950px" top="5vh" class="dialog-h" @closed="closeAdd">
+            <picture-Info v-if="showInfo" ref="ref_form" @closeAdd="closeAdd"></picture-Info>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { requestPost, requestGet } from "@/js/dai/request";
+import { mapGetters } from 'vuex'
+import pictureInfo  from '../cpts/picture-Info.vue'
+import dayjs from "dayjs"
+export default {
+data() {
+    return {
+        showInfo:false,
+        uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
+        title:"xx社区",
+        formShow:false,
+        pictureList:[
+            {
+                id:"1001",
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
+                      title:"嘉定山社区网格巡查"
+            },
+            {
+                src:"",
+                      title:"嘉定山社区网格巡查"
+            },
+       
+        ],
+        pageNo: 1,
+        pageSize: window.localStorage.getItem("pageSize") || 20,
+        taskId:"",
+        tableData:[],
+        total: 1,
+        formedate:{
+            date:"",
+            url:"",
+            fileName:"",
+            name:""
+        },
+        customerId: localStorage.getItem('customerId'),
+    };
+   noPictures
+},
+created() {},
+mounted() {
+    this.getTableData()
+},
+methods: {
+    onClickInfo(item){
+        this.showInfo=true,
+        console.log("打开详情");
+        this.$nextTick(() => {
+             this.$refs.ref_form.initForm(item);
+      });
+        
+    },
+    handleSuccess(file, fileList){
+        console.log(file, fileList,"上传成功");
+        this.formedate.date=dayjs(item.time).format('YYYY-MM-DD')
+    },
+    closeAdd(){
+        this.showInfo=false
+    },
+},
+components:{pictureInfo},
+computed:{
+    tableHeight() {
+        return (this.clientHeight - 140) + 'px'
+
+    },
+    ...mapGetters(['clientHeight', 'resolution']),
+},
+props: {
+    taskId: {
+        type: String,
+        default: ""
+    },
+},
+watch: {},
+}
+</script>
+
+<style lang='scss' scoped>
+@import "@/assets/scss/pages/resiInfo.scss";
+@import "@/assets/scss/modules/management/list-main.scss";
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 2fr));
+    gap: 50px;
+
+}
+</style>