comit

src/views/smartReport/components/ETASandBox.vue

@@ -0,0 +1,168 @@
+<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">
+            <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.SandboxId">
+                        <div class="title">{{item.Name}}</div>
+                        <div class="img" :style="'backgroundImage:url('+item.PicUrl+')'"></div>
+                    </div>
+                </draggable>
+                <tableNoData text="暂无数据" size="mini" v-if="list.length===0&&finished"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {sandInterface} from "@/api/api.js";
+export default {
+    data() {
+        return {
+            
+            keyword:'',
+            list:[],
+            page:1,
+            pageSize:20,
+            finished:false
+        }
+    },
+    created(){
+        this.getSandBoxList()
+    },
+    methods: {
+        // 生产随机id
+        getCompId(type){
+            return type+new Date().getTime()
+        },
+
+        getCompData(item){
+            const obj={
+                compId:2,
+                compType:'img',
+                content:item.PicUrl
+            }
+            return JSON.stringify(obj)
+        },
+
+        handleIsShowMeChange(){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.getSandBoxList()
+        },
+
+        handleSearch(){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.getSandBoxList()
+        },
+
+        /* 搜索图表分页 */
+        async getSandBoxList(word) {
+            let params = {
+                Keyword: this.keyword || "",
+                CurrentIndex: this.page,
+                PageSize: this.pageSize,
+            };
+            let res = await sandInterface.sandlistByQuote(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.getSandBoxList()
+        }
+    },
+}
+</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: contain;
+                    background-position: center;
+                }
+            }
+}
+</style>

src/views/smartReport/components/SemanticAnalysis.vue

@@ -0,0 +1,168 @@
+<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">
+            <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.SaCompareId">
+                        <div class="title">{{item.Title}}</div>
+                        <div class="img" :style="'backgroundImage:url('+item.ResultImg+')'"></div>
+                    </div>
+                </draggable>
+                <tableNoData text="暂无数据" size="mini" v-if="list.length===0&&finished"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {semanticInterface} from '@/api/modules/semanticsApi.js';
+export default {
+    data() {
+        return {
+            
+            keyword:'',
+            list:[],
+            page:1,
+            pageSize:20,
+            finished:false
+        }
+    },
+    created(){
+        this.getSemanticList()
+    },
+    methods: {
+        // 生产随机id
+        getCompId(type){
+            return type+new Date().getTime()
+        },
+
+        getCompData(item){
+            const obj={
+                compId:2,
+                compType:'img',
+                content:item.ResultImg
+            }
+            return JSON.stringify(obj)
+        },
+
+        handleIsShowMeChange(){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.getSemanticList()
+        },
+
+        handleSearch(){
+            this.list=[]
+            this.page=1
+            this.finished=false
+            this.getSemanticList()
+        },
+
+        /* 搜索图表分页 */
+        async getSemanticList(word) {
+            let params = {
+                Keyword: this.keyword || "",
+                CurrentIndex: this.page,
+                PageSize: this.pageSize,
+            };
+            let res = await semanticInterface.compareSearch(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.getSemanticList()
+        }
+    },
+}
+</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: contain;
+                    background-position: center;
+                }
+            }
+}
+</style>

src/views/smartReport/editReport.vue

@@ -138,6 +138,10 @@
                 <StatisticAnalysis v-if="rightType==='statisticAnalysis'"/>
                 <!-- 商品价格曲线 -->
                 <ETAPriceChart v-if="rightType==='etaPriceChart'"/>
+                <!-- 沙盘图 -->
+                <ETASandBox v-if="rightType==='etaSandBox'"/>
+                <!-- 语义分析 -->
+                <SemanticAnalysis v-if="rightType==='semanticAnalysis'"/>
             </div>
         </div>
 
@@ -162,6 +166,8 @@ import {apiSmartReport}  from '@/api/modules/smartReport'
 import BaseInfo from './components/BaseInfo.vue'
 import StatisticAnalysis from './components/StatisticAnalysis.vue'
 import ETAPriceChart from './components/ETAPriceChart.vue'
+import ETASandBox from './components/ETASandBox.vue'
+import SemanticAnalysis from './components/SemanticAnalysis.vue'
 
 export default {
     name:"smartReportEdit",
@@ -177,7 +183,9 @@ export default {
         ETAChart,
         ETASheet,
         StatisticAnalysis,
-        ETAPriceChart
+        ETAPriceChart,
+        ETASandBox,
+        SemanticAnalysis
     },
     data() {
         return {
@@ -380,6 +388,7 @@ export default {
                     obj.child.splice(newDraggableIndex,1,{
                         compId:compData.compId,
                         compType:compData.compType,
+                        content:compData.content||'',
                         id:this.getCompId(compData.compType),
                         child:[]
                     })