设置logo

src/router/router.ts

@@ -249,6 +249,13 @@ const routes: RouteRecordRaw[] = [
           title:'云盘空间'
         }
       },
+      {
+        path: '/a/l',
+        component: () => import('@/views/TeamCenter/LogoDisposition.vue'),
+        meta:{
+          title:'LOGO设置'
+        }
+      },
       {
         path: '/a/order',
         component: () => import('@/views/TeamCenter/Order.vue'),

src/services/LOGOService.ts

+import Api,{ HttpResponse, Result } from '../utils/request';
+
+
+class LOGOService{
+
+    static async EnableGroupLogo(IsEnableLogo:number):Promise<HttpResponse>{
+        let params = {IsEnableLogo}
+        return Api.Post("ppt_EnableGroupLogo",params)
+    }
+
+    static async DelGroupLogo(TId:any):Promise<HttpResponse>{
+        return Api.Post("ppt_DelGroupLogo",{TId})
+    }
+
+    static async SetBatchGroupLogo(LogoList:any):Promise<HttpResponse>{
+        let params = {LogoList}
+        return Api.Post("ppt_SetBatchGroupLogo",params)
+    }
+
+    static async SetGroupLogo(params:any):Promise<HttpResponse>{
+        return Api.Post("ppt_SetGroupLogo",params)
+    }
+
+    static async GetPPTistGroupLogoList():Promise<HttpResponse>{
+        return Api.Post("ppt_GetPPTistGroupLogoList",{})
+    }
+
+}
+export default LOGOService;
\ No newline at end of file

src/store/menu.ts

@@ -29,6 +29,7 @@ const menus:{menu:Menu,owner:MenuOwner}[] = [
     // {menu:{name:'数据统计',icon:'IconDashBoard',url:'/a/d'},owner:'A'},
     {menu:{name:'水印设置',icon:'IconTag',url:'/a/w'},owner:'A'},
     {menu:{name:'云盘空间',icon:'IconCloudStorage',url:'/a/c'},owner:'A'},
+    {menu:{name:'LOGO设置',icon:'IconPicture',url:'/a/l'},owner:'A'},
     {menu:{name:'订单/发票',icon:'IconCurrency',url:'/a/order'},owner:'E'},
     {
         menu:{

src/utils/common.ts

@@ -209,4 +209,16 @@ export const DominantColour = () =>{
 
 export const getRgbLevel = (colorarr:any) => {
   return colorarr[0] * 0.299 + colorarr[1] * 0.587 + colorarr[2] * 0.114
+}
+
+// base64 图
+export const dataURLtoFile = (file:any) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = (e:any) => {
+      const base64 = e.target.result
+      // 添加 base64 文件，这里假设文件名为 'file'
+      let basestr = base64.split(',')
+      return base64
+  };
 }
\ No newline at end of file

src/views/Editor/Thumbnails/index.vue

@@ -554,7 +554,7 @@ const getColorShade = async (newSlides:any) => {
   let dark = false
   let day = 0
   // 根据集团渲染logo 
-  if(tempDatas.value.GId!=userInfo.value.gid&&!searchData.value.isTeamManage){
+  if((tempDatas.value.GId!=userInfo.value.gid&&!searchData.value.isTeamManage)||userInfo.value.IsEnableLogo){
     for(let j=0;j<colorList.value.length;j++){
       if (getRgbLevel(colorList.value[j].Color) > 50) dark = true
     }
@@ -611,13 +611,22 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number,dark:false,da
           let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
           let scale = parseInt(y.width/y.height)
           let url = ''
-          console.log()
-          if(scale>=1&&scale<3&&!day) url = dark==true?acquiesceLogo.value[0]:acquiesceLogo.value[3]
-          if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
-          if(scale<1) url = dark==true?acquiesceLogo.value[1]:acquiesceLogo.value[4]
-          if(scale>=5) url = dark==true?acquiesceLogo.value[2]:acquiesceLogo.value[5]
-          if(scale>=3&&scale<5&&!day) url = dark==true?acquiesceLogo.value[2]:acquiesceLogo.value[5]
-          if(scale>=3&&scale<5&&day) url = acquiesceLogo.value[2]
+          if(userInfo.value.IsEnableLogo){
+            let LOGOS = userInfo.value.GroupLogoList
+            if(scale>=1&&scale<3&&!day) url = dark==true?LOGOS[0].FilePath:LOGOS[3].FilePath
+            if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
+            if(scale<1) url = dark==true?LOGOS[1].FilePath:LOGOS[4].FilePath
+            if(scale>=5) url = dark==true?LOGOS[2].FilePath:LOGOS[5].FilePath
+            if(scale>=3&&scale<5&&!day) url = dark==true?LOGOS[2].FilePath:LOGOS[5].FilePath
+            if(scale>=3&&scale<5&&day) url = LOGOS[2].FilePath
+          }else{
+            if(scale>=1&&scale<3&&!day) url = dark==true?acquiesceLogo.value[0]:acquiesceLogo.value[3]
+            if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
+            if(scale<1) url = dark==true?acquiesceLogo.value[1]:acquiesceLogo.value[4]
+            if(scale>=5) url = dark==true?acquiesceLogo.value[2]:acquiesceLogo.value[5]
+            if(scale>=3&&scale<5&&!day) url = dark==true?acquiesceLogo.value[2]:acquiesceLogo.value[5]
+            if(scale>=3&&scale<5&&day) url = acquiesceLogo.value[2]
+          }
           let newTempSize = await FileService.getImageSizeWithoutDownloading(url)
           let width = 0
           let height =  0

src/views/TeamCenter/Layout.vue

@@ -15,7 +15,7 @@
                 
                 <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
                     <template v-for="(x,i) in menus" :key="i">
-                        <el-sub-menu :index="i" v-if="x.children && x.children.length>0">
+                        <el-sub-menu :index="`${i}`" v-if="x.children && x.children.length>0">
                             <template #title>
                                 <component :is="x.icon" style="font-size: 20px;"></component>
                                 <span class="q-ml-lg">{{ x.name }}</span>

src/views/TeamCenter/LogoDisposition.vue

+<template>
+    <div class="column full-height" ref="currentRootDom">
+
+        <div class="row items-center flex-between">
+          <div class="text-dark text-weight-bolder">LOGO设置</div>
+          <div class="row flex-center CloudDisk-R-inquire">
+            
+          </div>
+          <!-- <FileInput @change="files => insertImageElement(files)">
+            <el-button icon="Plus" class="ppt-button text-normal" type="primary">上传LOGO</el-button>
+          </FileInput> -->
+        </div>
+        <div class="borders-light q-pa-lg rounded q-mt-xl row" style="width:600px;">
+            <div class="col">
+                <div class="text-dark text-weight-bold">行程LOGO设置</div>
+                <div class="text-grey-8 f14 q-mt-md">LOGO开启后，行程可以快速使用团队/企业的专属LOGO</div>
+            </div>
+            <div>
+                <el-button type="info" class="ppt-button text-weight-bolder"
+                    @click="showFormHandler">编辑LOGO</el-button>
+                <div class="text-small q-mt-sm text-right"
+                    :class="{ 'text-negative': !userInfo.IsEnableLogo || userInfo.IsEnableLogo == 0, 'text-secony': userInfo.IsEnableLogo && userInfo.IsEnableLogo == 1 }">当前{{
+                        (!userInfo.IsEnableLogo || userInfo.IsEnableLogo == 0) ? '未启用' : '已启用' }}LOGO</div>
+            </div>
+        </div>
+    </div>
+    <el-dialog v-model="FormVisible" 
+    style="width:560px;" :show-close="false"
+     :close-on-click-modal="false" :close-on-press-escape="false">
+        <template #header>
+            <div class="row items-center">
+                <div class="text-dark col" style="font-size: 18px;">LOGO信息设置</div>
+                <div>
+                    <span class="text-small q-mr-md">启用</span>
+                    <el-switch v-model="IsEnable" class="short-switch"
+                    :active-value="Number(1)"
+                    :inactive-value="Number(0)"/>
+                </div>
+            </div>
+        </template>
+        <div class="column" v-loading="loading">
+            <div class="fz16" style="color: #564bec;">浅色LOGO</div>
+            <div class="CloudDisk-R-Center row flex-between">
+                <template v-for="(item,index) in acquiesceIMG">
+                    <div v-if="item.FileType==1" style="position: relative;">
+                        <div class="cloudDownText row flex-between" v-if="item.width">
+                            <span>{{item.width}}*{{item.height}} px</span>
+                        </div>
+                        <el-dropdown trigger="click">
+                            <div class="CloudDisk-R-Box cursor-pointer">
+                                <div class="CloudDisk-R-Img row items-center flex-center">
+                                    <el-image :src="item.FilePath?item.FilePath:item.logo" style="width: auto; height: auto;"
+                                    fit="cover"/>
+                                </div>
+                            </div>
+                            <template #dropdown>
+                                <el-dropdown-menu class="q-pa-md microsoft">
+                                    <FileInput @change="files => insertImageElement(files,index)">
+                                        <el-dropdown-item icon="Upload">上传LOGO</el-dropdown-item>
+                                    </FileInput>
+                                    <!-- <el-dropdown-item icon="Delete">删除LOGO</el-dropdown-item> -->
+                                    <el-dropdown-item icon="View" @click="seeLogo(index)">默认LOGO</el-dropdown-item>
+                                    <el-dropdown-item v-if="item.FilePath" icon="View" @click="seeLogo(index,1)">企业LOGO</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                </template>
+            </div>
+            <div class="fz16" style="color: #564bec;">深色LOGO</div>
+            <div class="CloudDisk-R-Center row flex-between">
+                <template v-for="(item,index) in acquiesceIMG">
+                    <div v-if="item.FileType==2" style="position: relative;">
+                        <div class="cloudDownText row flex-between" v-if="item.width">
+                            <span>{{item.width}}*{{item.height}} px</span>
+                        </div>
+                        <el-dropdown trigger="click">
+                            <div class="CloudDisk-R-Box cursor-pointer">
+                                <div class="CloudDisk-R-Img row items-center flex-center">
+                                    <el-image :src="item.FilePath?item.FilePath:item.logo" style="width: auto; height: auto;"
+                                    fit="cover"/>
+                                </div>
+                            </div>
+                            <template #dropdown>
+                                <el-dropdown-menu class="q-pa-md microsoft">
+                                    <FileInput @change="files => insertImageElement(files,index)">
+                                        <el-dropdown-item icon="Upload">上传LOGO</el-dropdown-item>
+                                    </FileInput>
+                                    <!-- <el-dropdown-item icon="Delete">删除LOGO</el-dropdown-item> -->
+                                    <el-dropdown-item v-if="!item.FilePath" icon="View" @click="seeLogo(index)">查看LOGO</el-dropdown-item>
+                                    <el-dropdown-item v-if="item.FilePath" icon="View" @click="seeLogo(index,1)">查看LOGO</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <template #footer>
+            <el-button size="large" class="ppt-button" @click="()=>FormVisible=false">关闭设置</el-button>
+            <el-button size="large" type="primary" class="ppt-button" @click="saveLogo()">保存设置</el-button>
+        </template>
+    </el-dialog>
+
+    <el-image-viewer 
+      @close="() => { isViewerShow = false }" 
+      v-if="isViewerShow" 
+      :initial-index="currentImg"
+      :url-list="srcList"></el-image-viewer>
+
+    <el-dialog v-model="isShowModal" 
+     :show-close="false"
+    :close-on-click-modal="false" :close-on-press-escape="false">
+        <template #header>
+            <div class="row items-center">
+                <div class="text-dark col" style="font-size: 18px;">图片裁剪</div>
+                <div>
+                    <el-button class="btn" @click="isShowModal = false">
+                        取消
+                    </el-button>
+                    <!-- <el-button @click="clear">
+                        清除
+                    </el-button>
+                    <el-button  @click="reset">
+                        重置
+                    </el-button> -->
+                    <el-button type="primary" class="ppt-button" @click="getResult">
+                        裁剪
+                    </el-button>
+                </div>
+            </div>
+        </template>
+            
+        <div class="modal-content">
+            <VuePictureCropper
+            :boxStyle="{
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#f8f8f8',
+                margin: 'auto',
+            }"
+            :img="pic"
+            :options="{
+                viewMode: 1,
+                dragMode: 'crop',
+                cropBoxResizable: false,
+            }"
+            :presetMode="{
+                mode: 'fixedSize',
+                width: opt.width,
+                height: opt.height,
+            }"
+            @ready="ready"
+            />
+        </div>
+    </el-dialog>
+
+    
+</template>
+  
+<script lang="ts" setup>
+    import { ApiResult } from "@/configs/axios";
+    import { USER_DEFAULT_HEADER } from "@/configs/customer";
+    import UploadService from '@/services/UploadService'
+    import FileService from '@/services/FileService'
+    import LOGOService from "@/services/LOGOService";
+    import AliyunUpload from '@/utils/upload/aliyun'
+    import { fileToDataURL } from '@/utils/psdParser/compressor'
+    import { useUserStore } from "@/store";
+    import { ElLoading, ElMessage } from "element-plus";
+    import { storeToRefs } from "pinia";
+    import { ref, reactive, watch } from "vue";
+    import { useRouter } from "vue-router";
+    import InviteMember from '@/views/components/Team/InviteMember.vue'
+    import { dataURLtoFile } from "@/utils/common";
+    import VuePictureCropper, { cropper } from 'vue-picture-cropper'
+
+    
+    
+    const userGroup = ref<{id:number,name:string}[]>([
+        {id:0,name:'全部角色'},
+        {id:1,name:'管理员'},
+        {id:2,name:'成员'},
+    ])
+    const userStore = useUserStore()
+    const { token, userInfo } = storeToRefs(userStore)
+    const data = ref<any[]>([])
+    const loading = ref(false)
+    const dataList = ref([] as any)
+    const imgList = ref([] as any)
+    const srcList = ref([] as any)
+    const acquiesceLogo = ref([
+        'https://im.oytour.com/pptist/static/logo1.png',
+        'https://im.oytour.com/pptist/static/logo2.png',
+        'https://im.oytour.com/pptist/static/logo3.png',
+        'https://im.oytour.com/pptist/static/logo4.png',
+        'https://im.oytour.com/pptist/static/logo5.png',
+        'https://im.oytour.com/pptist/static/logo6.png',
+    ])
+
+    const acquiesceIMG = ref([] as any)
+
+    const currentImg = ref(0 as number)
+    const FormVisible = ref(false as boolean)
+    const isViewerShow = ref(false as boolean)
+    const currentData = ref(0 as number)
+    const pic = ref<string>('')
+    const result = reactive({
+        dataURL: '',
+        blobURL: '',
+    })
+    const isShowModal = ref(false)
+    const opt = reactive({
+        width: '',
+        height: '',
+    })
+    const fileName = ref('')
+    const loadingInstance = ref<any>(null)
+    const IsEnable = ref(0 as any)
+    if(userInfo.value.IsEnableLogo==1) IsEnable.value = userInfo.value.IsEnableLogo
+    const parameters = ref<any>([])
+
+    // userInfo.GroupLogoList
+    const seeLogo = (index:number,type:any) => {
+        currentImg.value = index
+        srcList.value = type?imgList.value:acquiesceLogo.value
+        isViewerShow.value = true
+    }
+    const getSize = async () => {
+        loading.value = true
+        acquiesceIMG.value = []
+        for(let i=0;i<6;i++){
+            let x = acquiesceLogo.value[i]
+            let newSize = await FileService.getImageSizeWithoutDownloading(x)
+            if(newSize&&newSize.width){
+                acquiesceIMG.value.push({
+                    id: i,
+                    logo: x,
+                    FilePath: '',
+                    width: newSize.width,
+                    height: newSize.height,
+                    FileSize: newSize.width+'*'+newSize.height,
+                    TId: '',
+                    FileType: i>2?2:1
+                })
+            }
+        }
+        getLOGO()
+    }
+    const showFormHandler = () => {
+        FormVisible.value = true
+        getSize()
+    }
+    const enableLogo = async () =>{
+        const response = await LOGOService.EnableGroupLogo(IsEnable.value)
+        if(response.data.resultCode == ApiResult.SUCCESS){
+            userInfo.value.IsEnableLogo = response.data.data.IsEnableLogo
+        }
+    }
+    const saveLogo = async () =>{
+        for(let i=0;i<acquiesceIMG.value.length;i++){
+            let x = acquiesceIMG.value[i]
+            if(!x.FilePath) {
+                return ElMessage.error({message:`请完善所有尺寸的LOGO`})
+            }
+        }
+        // await enableLogo()
+
+        loadingInstance.value = ElLoading.service({
+            text:'收集需要处理的图片'
+        })
+        for(let i=0;i<acquiesceIMG.value.length;i++){
+            let x = acquiesceIMG.value[i]
+            await uoloadFileToService(x.FilePath,i)
+        }
+        loadingInstance.value.close()
+        loadingInstance.value = null
+
+        for(let i=0;i<acquiesceIMG.value.length;i++){
+            let x = acquiesceIMG.value[i]
+            let item = {
+                FileSize: x.FileSize,
+                FilePath: x.FilePath,
+                FileType: x.FileType,
+                TId: x.TId,
+            }
+            parameters.value.push(item)
+        }
+        console.log(parameters.value,'---')
+        return
+        const response = await LOGOService.SetBatchGroupLogo(parameters.value)
+        if(response.data.resultCode == ApiResult.SUCCESS){
+            if(userInfo.value.IsEnableLogo!=IsEnable.value) enableLogo()
+            parameters.value = []
+            imgList.value = []
+            FormVisible.value = false
+            getLOGO(1)
+        }
+    }
+    const getResult = async ()=> {
+        if (!cropper) return
+        const loadingObj = ElLoading.service({
+            text:'正在上传图',
+            lock:true
+        })
+        const base64 = cropper.getDataURL()
+        const blob: Blob | null = await cropper.getBlob()
+        if (!blob) return
+        
+        const file = await cropper.getFile({
+            fileName: fileName.value,
+        })
+
+        //   console.log({ base64, blob, file })
+        result.dataURL = base64
+        result.blobURL = URL.createObjectURL(blob)
+        acquiesceIMG.value[currentData.value].FilePath = base64
+        imgList.value[currentData.value] = base64
+        isShowModal.value = false
+        loadingObj.close()
+    }
+    const clear = () => {
+      if (!cropper) return
+      cropper.clear()
+    }
+    const reset = () => {
+      if (!cropper) return
+      cropper.reset()
+    }
+    const ready = () => {
+      console.log('Cropper is ready.')
+    }
+    const insertImageElement = async (files: FileList,index:number) => {
+        const loadingObj = ElLoading.service({
+            text:'正在上传图',
+            lock:true
+        })
+        let fileType = files[0].name.split('.')
+        fileName.value = fileType[0]+".png"
+
+        currentData.value = index
+        pic.value = URL.createObjectURL(files[0])
+        isShowModal.value = true
+        opt.width = acquiesceIMG.value[index].width
+        opt.height = acquiesceIMG.value[index].height
+        loadingObj.close()
+    }
+    const uoloadFileToService = async (base64:any,index:number)=>{
+        if(base64.indexOf('data:image/png;base64')==-1) return
+        let basestr = base64.split(',')
+        let parms = {
+            isppt: '1',
+            uid: token.value,
+            gid: '',
+            basestr: basestr[1],
+            surl: ""
+        }
+        let filePath=`firmLogoImg/${new Date().getTime()+index+fileName.value}`;
+        let url  = await AliyunUpload.UploadCloudDiskBase64(filePath, parms);
+        if(url) {
+            loadingInstance.value.text = `当前图片处理进度：${index+1} / ${acquiesceIMG.value.length}`
+            acquiesceIMG.value[index].FilePath = url
+            imgList.value[index] = url
+        }
+    }
+    const getLOGO = async (type:any)=>{
+        if(type==1) loading.value = true
+        const response = await LOGOService.GetPPTistGroupLogoList()
+        if(response.data.resultCode == ApiResult.SUCCESS){
+            dataList.value = response.data.data
+            imgList.value = dataList.value.map(x=>{return x.FilePath})
+            if(dataList.value.length>0){
+               assembleData()
+               userInfo.value.GroupLogoList =  response.data.data 
+            }
+            loading.value = false
+        }else {
+            loading.value = false
+        }
+        
+    }
+
+    const assembleData = () => {
+        for(let i=0;i<acquiesceIMG.value.length;i++){
+            let z = acquiesceIMG.value[i]
+            let filter =  dataList.value.filter(x=>x.FileSize==z.FileSize&&x.FileType==z.FileType) 
+            if(filter&&filter.length>0) {
+                acquiesceIMG.value[i].FilePath = filter[0].FilePath
+                acquiesceIMG.value[i].TId = filter[0].TId
+            }
+        }
+    }
+  </script>
+  
+<style lang="scss" scoped>
+.CloudDisk-R-Center{
+    flex-wrap: wrap;
+    padding-top: 10px;
+}
+.CloudDisk-R-Box{
+    width: 147px;
+    margin-bottom: 24px;
+    position: relative;
+}
+.CloudDisk-R-Box.active .CloudDisk-R-Img{
+    width: 147px;
+    height: 147px;
+    background: #8790F3;
+    box-shadow: 0px 0px 13px 0px #0D3EBC;
+    border-radius: 8px;
+    border-color:#3556F9;
+}
+.CloudDisk-R-Box .close-btn{
+    position: absolute;
+    top: -10px;
+    right: 0px;
+    width: 20px;
+    height: 20px;
+    line-height: 12px;
+    background: #fff;
+    border:1px solid #AFAFAF;
+    text-align: center;
+    color:#AFAFAF;
+    border-radius: 50%;
+    z-index: 3;
+    display: none;
+}
+.CloudDisk-R-Box.active2:hover .close-btn{
+    display: block;
+}
+.CloudDisk-R-Img{
+    width: 147px;
+    height: 147px;
+    margin-bottom: 9px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0px 0px 13px 0px #eee;
+    border-radius: 8px;
+    border-color:#eee;
+}
+
+.CloudDisk-R-Img .el-image{
+    width: 147px;
+}
+.title{
+    width: 147px;
+    line-height: 17px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #000000;
+}
+.cloudDownName{
+  min-width: 147px;
+  padding: 10px 20px 15px 20px;
+  font-size: 14px;
+  color: #000;
+}
+.cloudDownText{
+  padding: 3px 10px;
+  font-size: 14px;
+  background: #eef3ff;
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: 0;
+  border-bottom-left-radius: 8px;
+  color: #3556f9;
+}
+.cloudDownTextLin{
+  border-bottom: 1px solid #F0F0F0;
+}
+
+  </style>
\ No newline at end of file

src/views/TeamCenter/WaterMaker.vue

@@ -16,7 +16,7 @@
         </div>
     </div>
     <el-dialog v-model="wmFormVisible" style="width:560px;" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
-        <template #title>
+        <template #header>
             <div class="row items-center">
                 <div class="text-dark col" style="font-size: 18px;">水印信息设置</div>
                 <div>