comit

.env.development

@@ -4,3 +4,5 @@ VITE_APP_API_URL="http://8.136.199.33:8610/v1"
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
 VITE_APP_OUTDIR="dist"
+# 图分享地址
+VITE_APP_CHART_SHARE_LINK="https://charttest.hzinsights.com/chartshow"

.env.production

@@ -3,4 +3,6 @@ VITE_APP_API_URL="https://mveta.hzinsights.com/v1"
 # 路由根地址
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
-VITE_APP_OUTDIR="hongze_ETA_mobile"
+VITE_APP_OUTDIR="hongze_ETA_mobile"
+# 图分享地址
+VITE_APP_CHART_SHARE_LINK="https://chartlib.hzinsights.com/chartshow"

.env.test

@@ -4,3 +4,5 @@ VITE_APP_API_URL="http://8.136.199.33:8610/v1"
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
 VITE_APP_OUTDIR="hongze_ETA_mobile"
+# 图分享地址
+VITE_APP_CHART_SHARE_LINK="https://charttest.hzinsights.com/chartshow"

src/api/common.js

@@ -12,7 +12,8 @@ export function apiReportingErrInfo(params){
         ...params,
         timestamp:new Date().toLocaleString(),
         agent:'ETA移动端',
-        page:window.location.href
+        page:window.location.href,
+        token:localStorage.getItem('token')
     }
     return post('/resource/public/wechat_warning',{content:JSON.stringify(obj)})
 }

src/hooks/common.js

@@ -15,12 +15,51 @@ export function useUserInfo(){
     return userInfo
 }
 
+// 是否为微信浏览器
+export function isWeiXin(){
+    const ua = navigator.userAgent.toLowerCase();
+    const flag = ua.indexOf('micromessenger') != -1;
+    if(flag){
+        console.log('在微信浏览器中', flag)
+    }
+    return flag
+}
+
+/**
+ * 将远程图片转化为base64
+ * url 远程图片地址
+ */
+export function transfImgTobase64(url) { 
+    return new Promise((resolve,reject)=>{
+        const image = new Image();
+        image.crossOrigin = 'Anonymous';
+        image.onload =()=>{
+            const canvas = document.createElement('canvas');
+            canvas.width = image.width;
+            canvas.height = image.height;
+
+            const context = canvas.getContext('2d');
+            context.drawImage(image, 0, 0);
+
+            const base64 = canvas.toDataURL('image/png');
+
+            resolve(base64)
+        }
+        image.onerror = function (e) {
+            console.log('图片加载失败',e);
+            
+            resolve(url);
+            throw new Error(JSON.stringify(e))
+        };
+        image.src = url;
+    })
+}
+
 /**
  * 设置剪切板
  * @param text 文本
  */
-export function setClipboardData(text){
-    
+export async function setClipboardData(text){
     if(navigator.clipboard&&window.isSecureContext){
         try{
            await navigator.clipboard.writeText(text)

src/hooks/useUploadFileToOSS.js

@@ -55,7 +55,7 @@ export async function useUploadFileToOSS(data,fileName,isMultipart=false){
             resUrl='https://hzstatic.hzinsights.com/'+res.name
         }
     } catch (error) {
-        console.log(error);
+        console.log('阿里云上传失败',error);
     }
     
 

src/views/myETA/ChartDetail.vue

@@ -15,6 +15,7 @@ import { showToast,showDialog} from 'vant'
 import ChartSaveOther from './components/ChartSaveOther.vue'
 import _ from 'lodash';
 import { useWindowSize } from '@vueuse/core'
+import {setClipboardData} from '@/hooks/common'
 
 const { width, height } = useWindowSize()
 
@@ -24,6 +25,7 @@ const {options,axisLimitState,chartRender}=useChartRender()
 const route=useRoute()
 const router=useRouter()
 let chartCode=route.query.code
+let CHARTINS=ref(null)
 
 // 获取当前图表所在分类下的所有图表数据 用于上一张下一张切换
 let allChartList=ref([])
@@ -72,7 +74,7 @@ async function getChartInfo(){
 
 
     nextTick(()=>{
-        chartRender({
+        CHARTINS.value=chartRender({
             data:res.Data,
             renderId:'chart-box',
             lang:'zh',
@@ -115,7 +117,7 @@ async function reloadChartInfo(){
     //         return item;
     //     }
     // })
-    chartRender({
+    CHARTINS.value=chartRender({
         data:{
             ...res.Data,
             ChartInfo:{
@@ -251,7 +253,7 @@ function handleConfirmLimitChange(){
         }
     }
 
-    chartRender({
+    CHARTINS.value=chartRender({
         data:data,
         renderId:'chart-box',
         lang:'zh',
@@ -307,7 +309,7 @@ async function handleUpdateRender(val,isEdit){
         edbList.value[index]=val
     }
 
-    chartRender({
+    CHARTINS.value=chartRender({
         data:{
             ...chartInfoData,
             EdbInfoList:edbList.value
@@ -443,7 +445,22 @@ async function handleChartRefresh(){
 
 //分享
 function handleChartShare(){
-    
+    const url=import.meta.env.VITE_APP_CHART_SHARE_LINK+`?code=${chartInfo.value.UniqueCode}&fromType=share&lang=ch`
+    setClipboardData(url)
+}
+
+//保存图片
+function handleChartSavePicture(){
+    const {chartWidth,chartHeight} = CHARTINS.value
+    //打开保存图片弹窗
+    const svgData = CHARTINS.value.getSVG({
+        chart: {
+            width: chartWidth,
+            height: chartHeight,
+        }
+    })
+    console.log(CHARTINS.value);
+    console.log(svgData);
 }
 
 </script>
@@ -725,7 +742,7 @@ function handleChartShare(){
             <div class="item" @click.stop="showSaveChartOther=true">
                 另存为
             </div>
-            <div class="item">
+            <div class="item" @click.stop="handleChartSavePicture" v-if="!chartInfo.Disabled">
                 保存图片
             </div>
             <div class="item">
@@ -741,7 +758,7 @@ function handleChartShare(){
     <van-popup 
         v-model:show="showCopyTo"
         :position="width>650?'center':'bottom'"
-        round
+        :round="width>650?true:false"
         closeable
     >
         <div class="global-pop-wrap_mobile chart-copyto-wrap">

src/views/report/chapter/Detail.vue

@@ -8,7 +8,7 @@ import AudioBox from '../components/AudioBox.vue'
 import ReportInsertContent from '../components/reportInsert/Index.vue'
 import moment from 'moment'
 import {useInitFroalaEditor} from '@/hooks/useFroalaEditor'
-import {useUserInfo} from '@/hooks/common'
+import {useUserInfo,isWeiXin} from '@/hooks/common'
 import { showToast,showDialog } from 'vant'
 import {useUploadFileToOSS} from '@/hooks/useUploadFileToOSS'
 import MD5 from 'js-md5'
@@ -193,40 +193,43 @@ function handleShowUploadAudio(){
 // 获取音频时长
 function handleGetAudioDuration(file){
     return new Promise((resolve,reject)=>{
+        if(isWeiXin()){
+            console.log('微信？');
+            resolve(0)
+        }
+
         const fileUrl=URL.createObjectURL(file)
         const audioEl=new Audio(fileUrl)
         audioEl.addEventListener('loadedmetadata',(e)=>{
-            // console.log('e.path',e.path)
-            // console.log('e.composedPath',e.composedPath())
-            // console.log('获取音频时长',e.composedPath()[0].duration);
-            // console.log(audioEl.duration);
+            console.log('e.path',e.path)
+            console.log('e.composedPath',e.composedPath())
+            console.log('获取音频时长',e.composedPath()[0].duration);
+            console.log(audioEl.duration);
             const t=e.composedPath()[0].duration
             resolve(t)
         })
     })
 }
 function handleAudioUploadBeforeRead(e){
-    const temFile=e
-    if(temFile.name.indexOf('.mp3')==-1 
-        && temFile.name.indexOf('.wav')==-1 
-        && temFile.name.indexOf('.wma')==-1
-        &&temFile.name.indexOf('.m4a')==-1
-    ){
-        showToast('上传失败，上传音频格式不正确')
-        return false
-    }
+    const allowedTypes = ['audio/mpeg', 'audio/mp4','audio/aac','audio/x-m4a','audio/wav']
+    //由于部分安卓机的部分浏览器无法获取到文件类型，无法判断故先去除判断
+    // if(!allowedTypes.includes(e.type)){
+    //     showToast('上传失败，上传音频格式不正确')
+    //     return false
+    // }
     return true
 }
 async function handleAudioUploadAfterRead(e){
     // console.log(e);
     const duration=await handleGetAudioDuration(e.file)
-    if(duration>60*15){
-        showToast('音频时长不得超过15分钟')
-        return
-    }
-    temAudioData.time=duration
+    // if(duration>60*15){
+    //     showToast('音频时长不得超过15分钟')
+    //     return
+    // }
+    temAudioData.time=duration||0
     temAudioData.size=e.file.size/1024/1024 //单位MB
     temAudioData.name=e.file.name
+    console.log('音频数据temAudioData',temAudioData);
     // 生成文件名
     const t=new Date().getTime().toString()
     const temName=`static/yb/audio/${import.meta.env.MODE}/${MD5(t)}.${e.file.type.split('/')[1]}`
@@ -239,6 +242,10 @@ function handleUpdateAudio(){
     chapterBaseInfo.audioSize=temAudioData.size
     showUploadAudio.value=false
 }
+//更新下音频时长
+function handleUpdateAudioTime(e){
+    temAudioData.time=e
+}
 
 // 报告插入数据弹窗
 const showReportInsertPop=ref(false)
@@ -482,10 +489,11 @@ async function handleReportOpt(type){
         :style="{height:'60%'}"
     >
         <div class="upload-audio-wrap" v-if="showUploadAudio">
+            <div style="font-size:12px;color:#666">tips:如果是在微信中访问,请上传完音频点击播放,获取音频时长后方可保存</div>
             <template v-if="temAudioData.url">
                 <h2>音频链接</h2>
                 <p>{{temAudioData.url}}</p>
-                <AudioBox :url="temAudioData.url" />
+                <AudioBox :time="temAudioData.time" :url="temAudioData.url" @updateDuration="handleUpdateAudioTime"/>
             </template>
             <div class="bot-btns">
                 <van-uploader 
@@ -495,7 +503,7 @@ async function handleReportOpt(type){
                 >
                     <van-button class="bot-btn" type="default">{{temAudioData.url?'重新上传':'上传音频'}}</van-button>
                 </van-uploader>
-                <van-button class="bot-btn" type="primary" :disabled="!temAudioData.url" @click="handleUpdateAudio">保存</van-button>
+                <van-button class="bot-btn" type="primary" :disabled="!temAudioData.url||temAudioData.time===0" @click="handleUpdateAudio">保存</van-button>
             </div>
         </div>
     </van-popup>

src/views/report/chapter/List.vue

@@ -9,6 +9,7 @@ import { useWindowSize } from '@vueuse/core'
 import {useCachedViewsStore} from '@/store/modules/cachedViews'
 import EditBaseInfo from './components/EidtBaseInfo.vue'
 import html2canvas from "html2canvas";
+import {transfImgTobase64} from '@/hooks/common'
 
 const cachedViewsStore=useCachedViewsStore()
 const { width, height } = useWindowSize()
@@ -218,6 +219,8 @@ async function handleShowPoster(item){
         }
     }
     chapterItemPosterInfo.value=item
+    chapterItemPosterInfo.value.TypeEditImg=await transfImgTobase64(chapterItemPosterInfo.value.TypeEditImg)
+    chapterItemPosterInfo.value.QRCodeImg=await transfImgTobase64(chapterItemPosterInfo.value.QRCodeImg)
 
     nextTick(()=>{
         const targetEl = document.getElementById('chapter-poster-box');

src/views/report/components/AudioBox.vue

@@ -4,15 +4,20 @@ const props=defineProps({
     url:{
         type:String,
         defalut:''
-    }
+    },
+    time:0
 })
 
+const emits=defineEmits(['updateDuration'])
+
 watch(
     ()=>props.url,
     ()=>{
         if(audioIns.value){
             audioIns.value.src=props.url
         }
+        console.log(props.time);
+        duration.value=props.time
     }
 )
 
@@ -37,6 +42,7 @@ const duration=ref(0)//audio时长
 
 function audioCanplay(e){
     duration.value=e.target.duration
+    emits('updateDuration',duration.value)
 }
 
 function audioPlay(){