默认logo 优化

7a52a646 · zhengke · 8de42d27 · 7a52a646 · 7a52a646 · 7a52a646
Commit 7a52a646 authored May 22, 2024 by zhengke
6 changed files
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -45,11 +45,18 @@

    <div class="page-number">幻灯片 {{slideIndex + 1}} / {{slides.length}}</div>
  </div>
-  
+  <!-- <div style="position: fixed;left: 200px;top: 0;opacity: 1;">
+      <canvas style="display: none" id="canvas"></canvas>
+      <div
+         id="extract-color-id"
+         class="extract-color"
+         style="display: flex;padding: 0 20px; justify-content:end;">
+      </div>
+  </div> -->
 </template>

 <script lang="ts" setup>
-import { computed, nextTick, ref, reactive, watch, inject } from 'vue'
+import { computed, nextTick, ref, reactive, watch, inject,onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore, useKeyboardStore, useScreenStore, useSellTemplateStore } from '@/store'
 import { fillDigit } from '@/utils/common'
@@ -73,6 +80,7 @@ import FileService from '@/services/FileService'
 import { Slide } from '@/types/slides'
 import { uniqueId } from 'lodash'
 import { useUserStore } from "@/store";
+import themeColor from '@/utils/colorExtraction';

 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
@@ -119,7 +127,9 @@ 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/logo4.png',
+  'https://im.oytour.com/pptist/static/logo5.png',
+  'https://im.oytour.com/pptist/static/logo6.png',
 ])

 watch(() => slideIndex.value, () => {
@@ -458,17 +468,21 @@ const GetTripTemplate = async () =>{
            newSlides = newSlides.filter((x:Slide)=>!x.isTripItems)
          }
          // 根据集团渲染logo
-          if(userInfo.value&&userInfo.value.RB_Group_id<=1){
+          if(dataRes.data.data.AuthType<=1){
            for(let i=0;i<newSlides.length;i++){
              let x = newSlides[i]
-              let index =null
-              x.elements.forEach((y,indexs)=>{
-                if(y.layerName && y.layerName.indexOf('logo')!=-1) index =  indexs
-              })
              let eles = x.elements.filter(y=>y.layerName && y.layerName.indexOf('logo')!=-1)
-              let newElements = await ResolveTripLogoHandler(eles,i)
-              x.elements = x.elements.concat(newElements?.elements)
-              if(index>=0) x.elements.splice(index,1)
+              let newElementsImg = await ResolveTripLogoHandler(eles,i)
+              let newElements = []
+              x.elements.forEach(y=>{
+                if(newElementsImg?.elements){
+                  newElementsImg?.elements.forEach(z=>{
+                    if(y.id==z.id) y = JSON.parse(JSON.stringify(z))
+                  })
+                }
+                newElements.push(y)
+              })
+              x.elements = newElements
            }
          }
          layoutsStore.setLayouts(JSON.parse(JSON.stringify(newSlides)))
@@ -519,18 +533,21 @@ const generateUniqueId = () => {
    return '-' + timestamp + '-' + randomNum
 }

+// 替换logo
 const ResolveTripLogoHandler = async (items:any, slideIndex:number) =>{
    let elements = []
    let tempNewSlide:any = null
    let templateObj = JSON.parse(JSON.stringify(items))
    for(let i=0;i<templateObj.length;i++){
      try {
+          let Colors = templateObj[i].layerName.split(',')
          let y = templateObj[i]
          let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
-          let scale = tempSize.width/tempSize.height
+          let scale = parseInt(tempSize.width/tempSize.height)
+          if(Colors[1]||scale==6) templateObj[i].filters.invert = '20%'
          if(scale==1) templateObj[i].src = acquiesceLogo.value[0]
-          if(scale>1) templateObj[i].src = acquiesceLogo.value[3]
          if(scale<1) templateObj[i].src = acquiesceLogo.value[1]
+          if(scale>1) templateObj[i].src = acquiesceLogo.value[2]
          if(tempNewSlide){
            tempNewSlide.elements.push(...templateObj)
          }else{
@@ -551,17 +568,36 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number) =>{
          }
          y.height = height
          y.width = width
+          
        } catch (error) {

        }
    }
-    
    return {
      elements,
      newSlider:tempNewSlide,
    }
 }

+const SetColor = (colorArr: number[][]) => {
+    // 初始化删除多余子节点
+    const extractColor = document.querySelector('#extract-color-id') as HTMLElement;
+    while (extractColor.firstChild) {
+      extractColor.removeChild(extractColor.firstChild);
+    }
+    // 创建子节点
+    for (let index = 0; index < colorArr.length; index++) {
+      const bgc = '(' + colorArr[index][0] + ',' + colorArr[index][1] + ',' + colorArr[index][2] + ')';
+      const colorBlock = document.createElement('div') as HTMLElement;
+      colorBlock.id = `color-block-id${index}`;
+      colorBlock.style.cssText = 'height: 50px;width: 50px;margin-right: 10px;border-radius: 50%;';
+      colorBlock.style.backgroundColor = `rgb${bgc}`;
+      let list = [parseInt(colorArr[index][0]),parseInt(colorArr[index][1]),parseInt(colorArr[index][2])]
+      // colorList.value.push(list)
+      extractColor.appendChild(colorBlock);
+    }
+}
+
 const copySlidHandlerLogo = (slideIndex:number)=>{
  let newSlide = JSON.parse(JSON.stringify(slides.value[slideIndex]))
  newSlide.id = uniqueId()
@@ -811,6 +847,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
    },
  ]
 }
+
 if(searchData.value.sellId&&!searchData.value.TempId) sellGetTripTemplate()
 if(!query().ViewSlideshow) GetTripTemplate()
  

--- a/src/views/Preview/PreviewCover.vue
+++ b/src/views/Preview/PreviewCover.vue
@@ -44,7 +44,9 @@ 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/logo4.png',
+  'https://im.oytour.com/pptist/static/logo5.png',
+  'https://im.oytour.com/pptist/static/logo6.png',  
 ])

 const w = ref(0)
@@ -73,8 +75,7 @@ const loadSliders = async ()=>{
        newSlides.push(x)
      })
      // 根据集团渲染logo
-      if(userInfo.value&&userInfo.value.RB_Group_id<=1){
-        return
+      if(dataRes.data.data.AuthType<=1){
        for(let i=0;i<newSlides.length;i++){
          let x = newSlides[i]
          let index =null
@@ -82,9 +83,17 @@ const loadSliders = async ()=>{
            if(y.layerName && y.layerName.indexOf('logo')!=-1) index =  indexs
          })
          let eles = x.elements.filter(y=>y.layerName && y.layerName.indexOf('logo')!=-1)
-          let newElements = await ResolveTripLogoHandler(eles,i)
-          x.elements = x.elements.concat(newElements?.elements)
-          if(index>=0) x.elements.splice(index,1)
+          let newElementsImg = await ResolveTripLogoHandler(eles,i)
+          let newElements = []
+          x.elements.forEach(y=>{
+            if(newElementsImg?.elements){
+              newElementsImg?.elements.forEach(z=>{
+                if(y.id==z.id) y = JSON.parse(JSON.stringify(z))
+              })
+            }
+            newElements.push(y)
+          })
+          x.elements = newElements
        }
      }
      slidesStore.setSlides(newSlides)
@@ -97,11 +106,13 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number) =>{
    let templateObj = JSON.parse(JSON.stringify(items))
    for(let i=0;i<templateObj.length;i++){
      try {
+          let Colors = templateObj[i].layerName.split(',')
          let y = templateObj[i]
          let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
-          let scale = tempSize.width/tempSize.height
+          let scale = parseInt(tempSize.width/tempSize.height)
+          if(Colors[1]||scale==6) templateObj[i].filters.invert = '20%'
          if(scale==1) templateObj[i].src = acquiesceLogo.value[0]
-          if(scale>1) templateObj[i].src = acquiesceLogo.value[3]
+          if(scale>1) templateObj[i].src = acquiesceLogo.value[2]
          if(scale<1) templateObj[i].src = acquiesceLogo.value[1]
          if(tempNewSlide){
            tempNewSlide.elements.push(...templateObj)

--- a/src/views/TemplateCenter/Index.vue
+++ b/src/views/TemplateCenter/Index.vue
@@ -3,12 +3,12 @@
      <div class="col row flex-between">
          <div class="row wrap">
            <div class="row items-center q-mb-lg">
-                <span class="fz14 q-pr-sm shrink">关键字:</span>
+                <span class="fz14 q-pr-md shrink">关键字:</span>
                <el-input style="max-width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable
                @keyup.enter="search"></el-input>
            </div>
-            <div class="row items-center q-mb-lg">
-                <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;模版:</span>
+            <div class="row items-center q-mb-lg q-pl-lg">
+                <span class="fz14 q-pr-md shrink">&nbsp;&nbsp;模版:</span>
                <el-select v-model="queryObj.TemplateType" 
                    class="ml-1 shrink TemSel"
                    placeholder="模版类型" clearable>
@@ -20,8 +20,8 @@
                        />
                </el-select>
            </div>
-            <div class="row items-center q-mb-lg">
-                <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;&nbsp;版型:</span>
+            <div class="row items-center q-mb-lg q-pl-lg">
+                <span class="fz14 q-pr-md shrink">&nbsp;&nbsp;&nbsp;版型:</span>
                <el-select v-model="queryObj.TempType" 
                    class="ml-1 shrink TemSel"
                    placeholder="版型" clearable>
@@ -33,8 +33,8 @@
                        />
                </el-select>
            </div>
-            <div class="row items-center q-mb-lg">
-                <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;国家:</span>
+            <div class="row items-center q-mb-lg q-pl-lg">
+                <span class="fz14 q-pr-md shrink">&nbsp;&nbsp;国家:</span>
                <el-select v-model="queryObj.CountryList" multiple
                    class="ml-1 shrink TemSel"
                    placeholder="国家" clearable>
@@ -47,8 +47,8 @@
                        />
                </el-select>
            </div>
-            <div class="row items-center q-mb-lg">
-                <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;季节:</span>
+            <div class="row items-center q-mb-lg q-pl-lg">
+                <span class="fz14 q-pr-md shrink">&nbsp;&nbsp;季节:</span>
                <el-select v-model="queryObj.SeasonList" multiple
                    class="ml-1 shrink TemSel"
                    placeholder="季节" clearable>
@@ -61,8 +61,8 @@
                        />
                </el-select>
            </div>
-            <div class="row items-center q-mb-lg">
-                <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;颜色:</span>
+            <div class="row items-center q-mb-lg q-pl-lg">
+                <span class="fz14 q-pr-md shrink">&nbsp;&nbsp;颜色:</span>
                <el-select v-model="queryObj.ColorList" multiple
                    class="ml-1 shrink TemSel"
                    placeholder="颜色" clearable>
@@ -133,11 +133,23 @@
          <span class="text-info">{{scope.row.CreateTime}}</span>
        </template>
      </el-table-column>
-      <el-table-column label="操作" width="240">
+      <el-table-column label="操作" width="120">
        <template #default="scope">
-          <el-button type="primary" :icon="Edit" size="small" @click="goToTemplate(scope.row)">编辑</el-button>
-          <el-button type="primary" :icon="View" size="small" @click="getTemplate(scope.row)">详情</el-button>
-          <el-button type="primary" :icon="Delete" size="small" @click="deleteTemplate(scope.row)">删除</el-button>
+          <el-button type="default" link :icon="Edit" size="small" @click="goToTemplate(scope.row)">编辑</el-button>
+          <el-dropdown class="q-pl-lg" trigger="click">
+            <el-icon class="q-pt-sm" size="16" color="#b1b7cf"><MoreFilled /></el-icon>
+            <template #dropdown>
+                <el-dropdown-menu class="q-pa-md" @click.stop="OffEdit">
+                    <el-dropdown-item>
+                        <el-button type="default" link :icon="View" size="small" @click="getTemplate(scope.row)">详情</el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                        <el-button type="default" link :icon="Delete" size="small" @click="deleteTemplate(scope.row)">删除</el-button>
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+          
        </template>
      </el-table-column>
    </el-table>
@@ -428,9 +440,10 @@ const getTemplate = async (item:any) => {
 */
 const goToTemplate = (item: any) => {
  let url = ''
-  if(model.value==2) url = createSaleCreateLink(item.TempId,item.TemplateType)
-  else if(model.value==0 && router.currentRoute.value.params.configId) url = createOpEditorLink(parseInt(router.currentRoute.value.params.configId.toString()),item.TempId)
-  else if(model.value==1) url = managerTemplateLink(item.TempId,item.TemplateType)
+//   if(model.value==2) url = createSaleCreateLink(item.TempId,item.TemplateType)
+//   else if(model.value==0 && router.currentRoute.value.params.configId) url = createOpEditorLink(parseInt(router.currentRoute.value.params.configId.toString()),item.TempId)
+//   else if(model.value==1) url = managerTemplateLink(item.TempId,item.TemplateType)
+  url = managerTemplateLink(item.TempId,item.TemplateType)
  if(url!='') {
      router.push({
          path:url

--- a/src/views/TemplateCenter/colour.vue
+++ b/src/views/TemplateCenter/colour.vue
@@ -61,10 +61,10 @@
          {{scope.row.Content}}
        </template>
      </el-table-column>
-      <el-table-column label="操作" width="160">
+      <el-table-column label="操作" width="130">
        <template #default="scope">
-          <el-button type="primary" :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
-          <el-button type="primary" :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
+          <el-button type="default" link :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
+          <el-button type="default" link :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

--- a/src/views/TemplateCenter/font.vue
+++ b/src/views/TemplateCenter/font.vue
@@ -38,10 +38,10 @@
          {{scope.row.reduceUrl}}
        </template>
      </el-table-column>
-      <el-table-column label="操作" width="160">
+      <el-table-column label="操作" width="130">
        <template #default="scope">
-          <el-button type="primary" :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
-          <el-button type="primary" :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
+          <el-button type="default" link :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
+          <el-button type="default" link :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

--- a/src/views/TemplateCenter/nation.vue
+++ b/src/views/TemplateCenter/nation.vue
@@ -22,10 +22,10 @@
          {{scope.row.Name}}
        </template>
      </el-table-column>
-      <el-table-column label="操作" width="160">
+      <el-table-column label="操作" width="130">
        <template #default="scope">
-          <el-button type="primary" :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
-          <el-button type="primary" :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
+          <el-button type="default" link :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
+          <el-button type="default" link :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>