ETA1.1.4

src/views/smartReport/components/ETAPriceChart.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="statistic-analysis-wrap">
+        <div class="top-box">
+            <div class="left-card">
+                <span>商品价格曲线</span>
+            </div>
+            <div class="right">
+                <el-input
+                    class="search-box"
+					placeholder="图表名称"
+					v-model="keyword"
+					size="medium"
+					prefix-icon="el-icon-search"
+                    @input="handleSearch"
+				/>
+            </div>
+        </div>
+        <div class="main-box">
+            <el-checkbox
+                class="onlyshowme-box"
+                v-model="isShowMe" 
+                @change="handleIsShowMeChange"
+            >只看我的</el-checkbox>
+            <div class="list-wrap" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="false">
+                <draggable
+                    :list="list"
+                    :group="{ name: 'component', pull: 'clone', 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>
+                        <div class="img" :style="'backgroundImage:url('+item.ChartImage+')'"></div>
+                    </div>
+                </draggable>
+                <tableNoData text="暂无图表" size="mini" v-if="list.length===0&&finished"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import futuresInterface from "@/api/modules/futuresBaseApi";
+export default {
+    data() {
+        return {
+            
+            keyword:'',
+            isShowMe:false,
+            list:[],
+            page:1,
+            pageSize:20,
+            finished:false
+        }
+    },
+    created(){
+        this.getChartList()
+    },
+    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)
+        },
+
+        handleIsShowMeChange(){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.getChartList()
+        },
+
+        handleSearch(){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.getChartList()
+        },
+
+        /* 搜索图表分页 */
+        async getChartList(word) {
+            let params = {
+                Keyword: this.keyword || "",
+                CurrentIndex: this.page,
+                PageSize: this.pageSize,
+                IsShowMe: this.isShowMe,
+            };
+            let res = await futuresInterface.searchChart(params);
+            if (res.Ret !== 200) return;
+            const arr = res.Data.List || [];
+            this.list =
+                this.page === 1
+                ? arr
+                : [...this.list, ...arr];
+            this.finished =  res.Data.Paging.IsEnd;
+        },
+
+        handleLoadMore(){
+            if(this.finished) return
+            this.page++
+            this.getChartList()
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+div{
+    box-sizing: border-box;
+}
+.statistic-analysis-wrap{
+    .top-box{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .right{
+            .search-box{
+                width: 330px;
+            }
+        }
+    }
+    .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;
+        display: flex;
+        flex-direction: column;
+        .list-wrap{
+            flex: 1;
+            overflow-y: auto;
+
+        }
+    }
+}
+.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%;
+                    height: 197px;
+                    background-size: cover;
+                    background-position: center;
+                }
+            }
+}
+</style>

src/views/smartReport/components/ETASheet.vue

@@ -20,7 +20,7 @@
                 :sort="false"
                 tag="div"
             >
-                <div class="sheet-item" v-for="item in list" :key="item.ExcelInfoId">
+                <div class="sheet-item" :comp-data="getCompData(item)" v-for="item in list" :key="item.ExcelInfoId">
                     <div class="title">{{item.ExcelName}}</div>
                     <div class="img" :style="'backgroundImage:url('+item.ExcelImage+')'"></div>
                 </div>
@@ -50,10 +50,11 @@ export default {
 
         getCompData(item){
             const LINK_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/sheetshow';
+            // console.log(LINK_URL);
             const obj={
-                compId:3,
+                compId:4,
                 compType:'sheet',
-                content:`${LINK_CHART_URL}?code=${item.UniqueCode}`
+                content:`${LINK_URL}?code=${item.UniqueCode}`
             }
             return JSON.stringify(obj)
         },
@@ -95,6 +96,7 @@ div{
         border: 1px solid var(--gary-gy-5-line, #C8CDD9);
         background: #FFF;
         padding: 20px;
+        overflow-y: auto;
         .sheet-list-box{
             display: flex;
             flex-wrap: wrap;

src/views/smartReport/components/SheetComp.vue

@@ -1,17 +1,38 @@
 <template>
     <div 
         class="report-comp-item sheet-comp"
-        style="min-height:300px;width:100%;overflow: hidden;"
+        style="width:100%;overflow: hidden;"
     >
-        <iframe :src="compData.content" style="width:100%;height:100%;border-width:0px;"></iframe>
+        <iframe :class="id" :src="compData.content" width="100%" style="border-width:0px;"></iframe>
     </div>
 </template>
 
 <script>
+function GetQueryString(url) {
+    let urlStr=url.split('?')[1]
+    let obj={}
+    let paramsArr=urlStr.split('&')
+    for (let index = 0; index < paramsArr.length; index++) {
+        let arr=paramsArr[index].split('=')
+        obj[arr[0]]=arr[1]
+    }
+    return obj
+}
 export default {
     props:{
         compData:{}
-    }
+    },
+    computed: {
+        id(){
+            if(this.compData.content){
+                // console.log(this.compData.content);
+                let params = GetQueryString(this.compData.content)
+                // console.log(params);
+                return `iframe${params.code}`
+            }
+            return ''
+        }
+    },
 }
 </script>
 

src/views/smartReport/components/StatisticAnalysis.vue

@@ -0,0 +1,242 @@
+<template>
+    <div class="statistic-analysis-wrap">
+        <div class="top-box">
+            <div class="left-card">
+                <span
+                    :class="['item',activeType===item.key?'active':'']" 
+                    @click="activeTypeChange(item.key)"
+                    v-for="item in typeOpts"
+                    :key="item.key"
+                >{{item.name}}</span>
+            </div>
+            <div class="right">
+                <el-input
+                    class="search-box"
+					placeholder="图表名称"
+					v-model="keyword"
+					size="medium"
+					prefix-icon="el-icon-search"
+                    @input="handleSearch"
+				/>
+            </div>
+        </div>
+        <div class="main-box">
+            <el-checkbox
+                class="onlyshowme-box"
+                v-model="isShowMe" 
+                @change="handleIsShowMeChange"
+            >只看我的</el-checkbox>
+            <div class="list-wrap" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="false">
+                <draggable
+                    :list="list"
+                    :group="{ name: 'component', pull: 'clone', 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>
+                        <div class="img" :style="'backgroundImage:url('+item.ChartImage+')'"></div>
+                    </div>
+                </draggable>
+                <tableNoData text="暂无图表" size="mini" v-if="list.length===0&&finished"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import chartRelevanceApi from "@/api/modules/chartRelevanceApi";
+import {
+  fittingEquationInterface,
+  statisticFeatureInterface,
+} from "@/api/modules/chartRelevanceApi";
+export default {
+    data() {
+        return {
+            typeOpts:[
+                {
+                    name:'相关性',
+                    key:'相关性'
+                },
+                {
+                    name:'拟合方程曲线',
+                    key:'拟合方程曲线'
+                },
+                {
+                    name:'统计特征',
+                    key:'统计特征'
+                }
+            ],
+            keyword:'',
+            isShowMe:false,
+            activeType:'相关性',
+
+            list:[],
+            page:1,
+            pageSize:20,
+            finished:false
+        }
+    },
+    created(){
+        this.getChartList()
+    },
+    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)
+        },
+
+        activeTypeChange(e){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.keyword=''
+            this.isShowMe=false
+            this.activeType=e
+            this.getChartList()
+        },
+
+        handleIsShowMeChange(){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.getChartList()
+        },
+
+        handleSearch(){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.getChartList()
+        },
+
+        /* 搜索图表分页 */
+        async getChartList(word) {
+            let params = {
+                Keyword: this.keyword || "",
+                CurrentIndex: this.page,
+                PageSize: this.pageSize,
+                IsShowMe: this.isShowMe,
+            };
+            let res = null;
+            if (this.activeType === '相关性') {
+                res = await chartRelevanceApi.searchChart(params);
+            } else if (this.activeType === '拟合方程曲线') {
+                res = await fittingEquationInterface.searchChart(params);
+            } else if (this.activeType === '统计特征') {
+                res = await statisticFeatureInterface.searchChart(params);
+            }
+
+            if (res.Ret !== 200) return;
+            const arr = res.Data.List || [];
+            this.list =
+                this.page === 1
+                ? arr
+                : [...this.list, ...arr];
+            this.finished =  res.Data.Paging.IsEnd;
+        },
+
+        handleLoadMore(){
+            if(this.finished) return
+            this.page++
+            this.getChartList()
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+div{
+    box-sizing: border-box;
+}
+.statistic-analysis-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;
+            gap: 0 3px;
+            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;
+                }
+            }
+        }
+        .right{
+            .search-box{
+                width: 330px;
+            }
+        }
+    }
+    .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;
+        display: flex;
+        flex-direction: column;
+        .list-wrap{
+            flex: 1;
+            overflow-y: auto;
+
+        }
+    }
+}
+.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%;
+                    height: 197px;
+                    background-size: cover;
+                    background-position: center;
+                }
+            }
+}
+</style>

src/views/smartReport/editReport.vue

@@ -134,6 +134,10 @@
                 />
                 <!-- ETA表格 -->
                 <ETASheet v-if="rightType==='etaSheet'"/>
+                <!-- 统计分析 -->
+                <StatisticAnalysis v-if="rightType==='statisticAnalysis'"/>
+                <!-- 商品价格曲线 -->
+                <ETAPriceChart v-if="rightType==='etaPriceChart'"/>
             </div>
         </div>
 
@@ -147,6 +151,7 @@ import draggable from 'vuedraggable'
 import TextComp from './components/TextComp.vue'
 import ChartComp from './components/ChartComp.vue'
 import ImgComp from './components/ImgComp.vue'
+import SheetComp from './components/SheetComp.vue'
 import _ from 'lodash'
 import TextEdit from './components/TextEdit.vue'
 import ImgEdit from './components/ImgEdit.vue'
@@ -155,6 +160,8 @@ import ETASheet from './components/ETASheet.vue'
 import { getPublicSettingsApi } from '@/api/modules/oldApi';
 import {apiSmartReport}  from '@/api/modules/smartReport'
 import BaseInfo from './components/BaseInfo.vue'
+import StatisticAnalysis from './components/StatisticAnalysis.vue'
+import ETAPriceChart from './components/ETAPriceChart.vue'
 
 export default {
     name:"smartReportEdit",
@@ -164,10 +171,13 @@ export default {
         TextComp,
         ChartComp,
         ImgComp,
+        SheetComp,
         TextEdit,
         ImgEdit,
         ETAChart,
-        ETASheet
+        ETASheet,
+        StatisticAnalysis,
+        ETAPriceChart
     },
     data() {
         return {
@@ -273,6 +283,17 @@ export default {
             
         },
 
+        // 设置sheet iframe 样式
+        setSheetIframeStyle(e){
+            const { height, code } = e.data;
+            // console.log(e.data);
+            let iframeDom = document.getElementsByClassName(`iframe${code}`);
+            // console.log(iframeDom);
+            iframeDom.forEach((ele) => {
+                ele.height = `${height + 45}px`;
+            });
+        },
+
         handleParentAdd(e){
             console.log('container-onAdd操作------------------->');
 
@@ -309,7 +330,7 @@ export default {
 
             const compData=JSON.parse(item.getAttribute('comp-data'))
 
-            // console.log(compData,newDraggableIndex);
+            console.log(compData,newDraggableIndex);
 
             const index=this.conList.findIndex(_e=>_e.id===parent.id)
             if(index>-1){
@@ -452,7 +473,8 @@ export default {
             const temMap=new Map([
                 ['text',TextComp],
                 ['chart',ChartComp],
-                ['img',ImgComp]
+                ['img',ImgComp],
+                ['sheet',SheetComp]
             ])
             return temMap.get(item.compType)
         },
@@ -506,6 +528,12 @@ export default {
         this.getPublicSettings()
         this.getReportDetail()
     },
+    mounted () {
+        window.addEventListener('message',this.setSheetIframeStyle)
+    },
+    destroyed() {
+		window.removeEventListener('message',this.setSheetIframeStyle)
+	},
 }
 </script>
 <style lang='scss' scoped>