ETA模块图库搜索

src/hooks/chart/render.js

@@ -1287,18 +1287,27 @@ const setCommodityChart = (leftMin,leftMax) => {
             const ctx = this;
             let str = '';
             ctx.points.forEach(item => {
-              let obj_item = data.find(_ => _.Name === item.series.name);
-              let index = commodityXData.value.findIndex(_ => _.Name === ctx.x);
-
-              str+=`<b>${ commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName }</b>`
+                let obj_item = data.find(_ => _.Name === item.series.name);
+                let index = commodityXData.value.findIndex(_ => _.Name === ctx.x);
+                
+                // 合约显示
+                const haveContract=obj_item.XEdbInfoIdList[index]
+                if(haveContract){
+                    // 利润曲线指标名
+                    let edb_name = chartData.value.ChartInfo.Source === 5 
+                        ? (index === 0 ? obj_item.NameList[index] : `${chartData.value.DataResp.ProfitName}(${obj_item.NameList[index]})`)
+                        : commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName;
+                    str+=`<b>${ edb_name }</b>`
+
+                    if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
+                        str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
+                    }else {
+                        str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
+                    }
 
-              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
-                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
-              }else {
-                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
-              }
+                }
             })
-            return str
+            return str||'无合约'
         },
         formatterCh: function() {
             let str = ''; 

src/router/chartETA.js

@@ -10,4 +10,14 @@ export const chartETARoutes=[
             hasBackTop:true,
         },
     },
+    {
+        path:"/chartETA/search",
+        name:"ChartETASearch",
+        component: () => import("@/views/chartETA/Search.vue"),
+        meta: { 
+            title: "ETA图库",
+            keepAlive:true,
+            hasBackTop:true,
+        },
+    }
 ]

src/views/chartETA/Search.vue

@@ -1,12 +1,166 @@
-<script setup>
+<script setup name="ChartETASearch">
+import {ref,reactive} from 'vue'
+import apiChart from '@/api/chart'
+import { showToast } from 'vant'
+import moment from 'moment'
+import { useRouter } from 'vue-router'
+
+const router=useRouter()
+
+const keyword=ref('')
+const listState = reactive({
+    list:[],
+    page:1,
+    pageSize:20,
+    finished:false,
+    loading:false
+})
+async function getList(){
+    const res=await apiChart.ETAChartListByES({
+        CurrentIndex:listState.page,
+        PageSize:listState.pageSize,
+        Keyword:keyword.value,
+        IsShowMe:false
+    })
+    if(res.Ret===200){
+        listState.loading=false
+        if(!res.Data){
+            listState.finished=true
+            return
+        }
+        
+        listState.finished=res.Data.Paging.IsEnd
+        const arr=res.Data.List||[]
+        listState.list=[...listState.list,...arr]
+    }
+}
+function onLoad(){
+    listState.page++
+    getList()
+}
+
+function handleSearch(){
+    if(!keyword.value){
+        showToast('请输入关键词')
+        return
+    }
+    listState.page=1
+    listState.list=[]
+    listState.finished=false
+    getList()
+}
+
+function goDetail(item){
+
+    // const routerEl=router.resolve({
+    //     path:"/myETA/chartdetail",
+    //     query:{
+    //         code:item.UniqueCode,
+    //         iscommon:true
+    //     }
+    // })
+    // window.open(routerEl.href,'_blank')
+}
+
 </script>
 
 <template>
-    <div>
-
+    <div class="chart-search-list-page">
+        <div class="search-box">
+            <van-search 
+                shape="round"
+                placeholder="请输入图表名称"
+                v-model="keyword"
+                @search="handleSearch"
+            />
+        </div>
+        <img v-if="listState.list.length==0&&listState.finished&&keyword" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
+        <van-list
+            v-model:loading="listState.loading"
+            :finished="listState.finished"
+            :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
+            :immediate-check="false"
+            @load="onLoad"
+        >
+            <ul class="list-wrap">
+                <li class="item" v-for="item in listState.list" :key="item.ChartInfoId" @click="goDetail(item)">
+                    <div class="van-ellipsis name">{{item.ChartName}}</div>
+                    <img class="img" :src="item.ChartImage" alt="">
+                    <div class="time">
+                        <span>{{moment(item.CreateTime).format('YYYY-MM-DD')}}</span>
+                        <span>{{item.SysUserRealName}}</span>
+                    </div>
+                </li>
+                <li class="item" style="height:0;padding:0;border:none"></li>
+                <li class="item" style="height:0;padding:0;border:none"></li>
+                <li class="item" style="height:0;padding:0;border:none"></li>
+            </ul>
+        </van-list>
     </div>
 </template>
 
-<style scoped lang="scss">
-
+<style lang="scss" scoped>
+.search-box{
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    z-index: 99;
+}
+.list-wrap{
+    padding: $page-padding;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .item{
+        width: 326px;
+        padding: 14px;
+        background: #FFFFFF;
+        border: 1px solid $border-color;
+        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.03);
+        border-radius: 12px;
+        box-sizing: border-box;
+        margin-bottom: 30px;
+        .img{
+            margin: 14px 0;
+            width: 100%;
+            height: 220px;
+        }
+        .time{
+            display: flex;
+            justify-content: space-between;
+            color: $font-grey_999;
+            font-size: 28px;
+        }
+    }
+}
+@media screen and (min-width:$media-width){
+    .search-box{
+        top: 60px;
+    }
+    .list-wrap{
+        padding: 20px 30px;
+        justify-content: center;
+        .item{
+            width: 260px;
+            padding: 14px;
+            border-radius: 6px;
+            margin-left: 8px;
+            margin-right: 8px;
+            margin-bottom: 15px;
+            .img{
+                margin: 14px 0;
+                width: 100%;
+                height: 200px;
+            }
+            .time{
+                font-size: 14px;
+                justify-content: flex-start;
+                span{
+                    margin-right: 20px;
+                }
+            }
+        }
+        
+    }
+}
 </style>