eta1.1.4

src/views/smartReport/components/ChartComp.vue

@@ -1,9 +1,10 @@
 <template>
     <div 
-        class="report-comp-item img-comp" 
-        style="min-height:100px;background:#f5f5f5;margin:10px 0"
-        :comp-type="compData.compType"
-        >这是一个chart组件</div>
+        class="report-comp-item chart-comp"
+        style="height:300px"
+    >
+        <iframe :src="compData.content" style="width:100%;height:100%;border-width:0px; "></iframe>
+    </div>
 </template>
 
 <script>

src/views/smartReport/components/ETAChart.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="eta-chart-wrap">
+        <div class="top-box">
+            <div class="left-card">
+                <span :class="['item',activeType==='ETA图库'?'active':'']">ETA图库</span>
+                <span :class="['item',activeType==='MyETA'?'active':'']">MyETA</span>
+            </div>
+        </div>
+        <div class="main-box" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="false">
+            <el-checkbox
+                class="onlyshowme-box"
+                v-model="isShowMe" 
+                @change="handleIsShowMeChange"
+            >只看我的</el-checkbox>
+            <draggable
+                :list="list"
+                :group="{ name: 'component', pull: activeType==='ETA图库'?'clone':false, put: false }"
+                class="chart-list-box"
+                animation="300"
+                :sort="false"
+                tag="div"
+            >
+                <div class="chart-item" :comp-data="getCompData(item)" v-for="item in list" :key="item.UniqueCode">
+                    <div class="title">{{item.ChartName}}</div>
+                    <img class="img" :src="item.ChartImage">
+                </div>
+            </draggable>
+        </div>
+    </div>
+</template>
+
+<script>
+import { dataBaseInterface } from "@/api/api.js";
+export default {
+    name:"ETAChartWrap",
+    data() {
+        return {
+            keyword:'',
+            activeType:'ETA图库',
+            isShowMe:false,
+            page:1,
+            pageSize:20,
+            list:[],
+            finished:false
+        }
+    },
+    created() {
+        this.getETAChartList()
+    },
+    methods: {
+        // 生产随机id
+        getCompId(type){
+            return type+new Date().getTime()
+        },
+
+        getCompData(item){
+            const LINK_CHART_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/chartshow';
+            const obj={
+                compId:3,
+                compType:'chart',
+                content:`${LINK_CHART_URL}?code=${item.UniqueCode}`
+            }
+            return JSON.stringify(obj)
+        },
+
+        async getETAChartList(){
+            const res=await dataBaseInterface.chartSearchByEs({
+                Keyword: this.keyword || "",
+                CurrentIndex: this.page,
+                PageSize: this.pageSize,
+                IsShowMe: this.isShowMe,
+            })
+            if(res.Ret===200){
+                const arr=res.Data.List || []
+                this.list=[...this.list,...arr]
+                this.finished=res.Data.Paging.IsEnd
+            }
+        },
+
+        handleIsShowMeChange(){
+            this.page=1
+            this.finished=false
+            this.list=[]
+            this.getETAChartList()
+        },
+
+        handleLoadMore(){
+            if(this.finished) return
+            this.page++
+            this.getETAChartList()
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+div{
+    box-sizing: border-box;
+}
+.eta-chart-wrap{
+    .top-box{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .left-card{
+            border-radius: 4px;
+            border: 1px solid var(--unnamed, #DCDFE6);
+            background: var(--gary-gy-3-disabled, #EBEFF6);
+            display: flex;
+            align-items: center;
+            padding: 6px;
+            .item{
+                cursor: pointer;
+                display: block;
+                width: 110px;
+                height: 30px;
+                line-height: 30px;
+                text-align: center;
+                border-radius: 4px;
+                font-size: 18px;
+                color: #666;
+                &.active{
+                    background: #FFF;
+                    color: #002D78;
+                }
+            }
+        }
+    }
+    .main-box{
+        margin-top: 30px;
+        height: calc(100vh - 180px);
+        border-radius: 4px;
+        border: 1px solid var(--gary-gy-5-line, #C8CDD9);
+        background: #FFF;
+        padding: 20px;
+        position: relative;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .onlyshowme-box{
+            display: block;
+            position: sticky;
+            top: 0;
+            background-color: #FFF;
+        }
+        .chart-list-box{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            .chart-item{
+                cursor: move;
+                padding: 0 10px;
+                width: 250px;
+                border-radius: 4px;
+                border: 1px solid var(--gary-gy-5-line, #C8CDD9);
+                background: var(--gary-gy-white, #FFF);
+                .title{
+                    padding: 10px 0;
+                    text-align: center;
+                    border-bottom: 1px solid #C8CDD9;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+                .img{
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/smartReport/components/ImgEdit.vue

@@ -14,7 +14,6 @@
 
 <script>
 import { bannerupload } from 'api/api.js';
-import { async } from '@antv/x6/lib/registry/marker/async';
 export default {
     name:'ImgEdit',
     props:{
@@ -31,10 +30,10 @@ export default {
         clickinput(){  //上传模拟点击
 			$(`#file`).click();
 		},
-        fileSelected(){  //选择文件上传
+        fileSelected(file){  //选择文件上传
+            let hostfile=document.getElementById('file').files[0]||file
 			const that = this;
-		    if( document.getElementById('file').files[0] ){
-		        let hostfile = document.getElementById('file').files[0];
+		    if( hostfile ){
 		        let size = Math.floor(hostfile.size / 1024 / 1024);
 		        if( size>200 ){
 		            that.$message.warning('上传文件大小不能大于200M！');
@@ -66,10 +65,12 @@ export default {
                 for (const item of clipboardDataItems) {
                     if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
                         const imageFile = item.getAsFile()
-                        // if (imageFile) this.$refs[`pptPage_${this.currentIndex}`][0].handlePaste(imageFile,addPositions[0])
+                        console.log('读取成功1',imageFile);
+                        if (imageFile) this.fileSelected(imageFile)
                         return
                     }
                 }
+                return
             }
             //clipboardData中没有图片，从navigator.clipboard.read里获取图片
             let clipboardItems = null
@@ -79,12 +80,13 @@ export default {
                 this.$message.warning("剪贴板读取不到文件!")
                 return
             }
-            const blob = await checkClipboardItems(clipboardItems)
-            // this.$refs[`pptPage_${this.currentIndex}`][0].handlePaste(blob,addPositions[0])
+            const blob = await this.checkClipboardItems(clipboardItems)
+            console.log('读取成功2',blob);
+            if(blob) this.fileSelected(blob)
 
         },1000),
 
-        checkClipboardItems(){
+        checkClipboardItems(clipboard){
             for(const Item of clipboard){
                 for(const type of Item.types){
                     if(type.includes('image')){
@@ -132,7 +134,7 @@ div{
             left: 0;
             top: 0;
             z-index: 10;
-            object-fit: cover;
+            background: #FFF;
         }
     }
 }

src/views/smartReport/editReport.vue

@@ -33,29 +33,9 @@
         <div class="main-wrap">
             <div class="report-action-wrap">
                 <ul class="top-type-list">
-                    <li class="item">
-                        <img class="icon" src="~@/assets/img/smartReport/icon04.png" alt="">
-                        <span>图库</span>
-                    </li>
-                    <li class="item">
-                        <img class="icon" src="~@/assets/img/smartReport/icon05.png" alt="">
-                        <span>ETA表格</span>
-                    </li>
-                    <li class="item">
-                        <img class="icon" src="~@/assets/img/smartReport/icon06.png" alt="">
-                        <span>统计分析</span>
-                    </li>
-                    <li class="item">
-                        <img class="icon" src="~@/assets/img/smartReport/icon07.png" alt="">
-                        <span>商品价格曲线</span>
-                    </li>
-                    <li class="item">
-                        <img class="icon" src="~@/assets/img/smartReport/icon08.png" alt="">
-                        <span>沙盘图</span>
-                    </li>
-                    <li class="item">
-                        <img class="icon" src="~@/assets/img/smartReport/icon09.png" alt="">
-                        <span>语义分析</span>
+                    <li class="item" v-for="item in topTypeList" :key="item.name" @click="handleShowRight(item)">
+                        <img class="icon" :src="item.icon" alt="">
+                        <span>{{item.name}}</span>
                     </li>
                 </ul>
                 <!-- 公共组件 -->
@@ -131,22 +111,25 @@
                 </div>
             </div>
 
-            <div class="right-action-wrap" v-show="activeId">
-                <div class="close-icon" @click="activeId=''">
+            <div class="right-action-wrap" v-show="showRight">
+                <div class="close-icon" @click="handleCloseRight">
                     <img src="~@/assets/img/smartReport/icon14.png" alt="">
                 </div>
                 <TextEdit 
-                    v-if="activeCompType==='text'"
+                    v-if="rightType==='text'"
                     :key="activeId"
                     :content="activeContent" 
                     @textChange="handleTextChange" 
                 />
                 <ImgEdit 
-                    v-if="activeCompType==='img'"
+                    v-if="rightType==='img'"
                     :key="activeId"
                     :content="activeContent" 
                     @imgChange="handleTextChange" 
                 />
+                <ETAChart 
+                    v-if="rightType==='etaChart'"
+                />
             </div>
         </div>
     </div>
@@ -160,6 +143,8 @@ import ImgComp from './components/ImgComp.vue'
 import _ from 'lodash'
 import TextEdit from './components/TextEdit.vue'
 import ImgEdit from './components/ImgEdit.vue'
+import ETAChart from './components/ETAChart.vue'
+import { getPublicSettingsApi } from '@/api/modules/oldApi';
 export default {
     name:"smartReportEdit",
     components: {
@@ -168,10 +153,43 @@ export default {
         ChartComp,
         ImgComp,
         TextEdit,
-        ImgEdit
+        ImgEdit,
+        ETAChart
     },
     data() {
         return {
+            topTypeList:[
+                {
+                    name:'图库',
+                    type:'etaChart',
+                    icon:require('@/assets/img/smartReport/icon04.png')
+                },
+                {
+                    name:'ETA表格',
+                    type:'etaSheet',
+                    icon:require('@/assets/img/smartReport/icon05.png')
+                },
+                {
+                    name:'统计分析',
+                    type:'statisticAnalysis',
+                    icon:require('@/assets/img/smartReport/icon06.png')
+                },
+                {
+                    name:'商品价格曲线',
+                    type:'etaPriceChart',
+                    icon:require('@/assets/img/smartReport/icon07.png')
+                },
+                {
+                    name:'沙盘图',
+                    type:'etaSandBox',
+                    icon:require('@/assets/img/smartReport/icon08.png')
+                },
+                {
+                    name:'语义分析',
+                    type:'semanticAnalysis',
+                    icon:require('@/assets/img/smartReport/icon09.png')
+                }
+            ],
             compList:[
                 {   
                     compId:1,
@@ -182,14 +200,25 @@ export default {
                     compId:2,
                     compType:'img',
                     icon:require('@/assets/img/smartReport/icon11.png')
-                }
+                },
+                // {
+                //     compId:3,
+                //     compType:'chart',
+                // },
+                // {
+                //     compId:4,
+                //     compType:'sheet',
+                // }
+                
             ],
             conList:[],
             activeId:'',
-            activeCompType:'',
             activeContent:'',
             activePindex:'',
             activeCindex:'',
+            showRight:false,
+            rightType:''
+
         }
     },
     methods: {
@@ -214,6 +243,7 @@ export default {
                 compId:compData.compId,
                 compType:compData.compType,
                 id:this.getCompId(compData.compType),
+                content:compData.content||'',
                 child:[]
             }
             // console.log(tempCompData);
@@ -316,7 +346,7 @@ export default {
             console.log('container-remove操作------------------->');
         },
 
-        // 富文本编辑组件数据变化
+        // 富文本编辑组件/图片组件数据变化
         handleTextChange(e){
             console.log(e);
             this.activeContent=e
@@ -340,12 +370,33 @@ export default {
             //{item:数据,index:父序号,cindex:子序号}
             if(!item.id) return
             this.activeId=item.id
-            this.activeCompType=item.compType
+            this.showRight=true
+            this.rightType=item.compType
             this.activeContent=item.content||''
             this.activePindex=index
             this.activeCindex=cindex>=0?cindex:''
         },
 
+        //点击顶部插入图或者图表等类型
+        handleShowRight(item){
+            this.rightType=item.type
+            this.activeId=''
+            this.activeContent=''
+            this.activePindex=''
+            this.activeCindex=''
+            this.showRight=true 
+        },
+
+        // 关闭右侧
+        handleCloseRight(){
+            this.activeId=''
+            this.activeContent=''
+            this.activePindex=''
+            this.activeCindex=''
+            this.showRight=false
+            this.rightType=''
+        },
+
         getComponentName(item){
             const temMap=new Map([
                 ['text',TextComp],
@@ -357,9 +408,20 @@ export default {
         // 生产随机id
         getCompId(type){
             return type+new Date().getTime()
+        },
+
+        /* 获取动态配置 外部动态链接 */
+        async getPublicSettings() {
+            const res =  await getPublicSettingsApi();
+            if(res.Ret !== 200) return
+            
+            this.$store.commit('SET_DYNAMIC_LINK',res.Data)
         }
         
     },
+    created() {
+        this.getPublicSettings()
+    },
 }
 </script>
 
@@ -528,6 +590,7 @@ div{
         .report-drag-item-wrap_child-wrap{
             display: flex;
             gap: 20px;
+            min-height: 10px;
         }
         .report-drag-item-wrap_child_content{
             min-height: 80px;