|
@@ -0,0 +1,276 @@
|
|
|
|
+<script setup>
|
|
|
|
+import {reactive, ref, watch} from 'vue'
|
|
|
|
+import apiCorrelationChart from '@/api/correlationChart'
|
|
|
|
+import apiLineEquationChart from '@/api/lineEquationChart'
|
|
|
|
+import apiStatisticFeatureChart from '@/api/statisticFeatureChart'
|
|
|
|
+import apiCrossVarietyChart from '@/api/crossVarietyChart'
|
|
|
|
+import apiIntervalAnalysis from '@/api/intervalAnalysis'
|
|
|
|
+import { showToast } from 'vant'
|
|
|
|
+import { vInfiniteScroll } from '@vueuse/components'
|
|
|
|
+import { useNoAuth } from '@/hooks/useNoAuth'
|
|
|
|
+import {apiMenuList} from '@/api/user'
|
|
|
|
+
|
|
|
|
+const emits=defineEmits(['update'])
|
|
|
|
+
|
|
|
|
+const typeOpts=ref([
|
|
|
|
+ {
|
|
|
|
+ label:'相关性',
|
|
|
|
+ value:3,
|
|
|
|
+ path:'chartrelevance'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label:'拟合方程曲线',
|
|
|
|
+ value:6,
|
|
|
|
+ path:'fittingEquationList'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label:'统计特征',
|
|
|
|
+ value:7,
|
|
|
|
+ path:'statisticFeatureList'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label:'跨品种分析',
|
|
|
|
+ value:10,
|
|
|
|
+ path:'crossVarietyChartList'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label:'区间分析',
|
|
|
|
+ value:12,
|
|
|
|
+ path:'rangeAnalysis'
|
|
|
|
+ },
|
|
|
|
+])
|
|
|
|
+
|
|
|
|
+const searchVal=ref('')
|
|
|
|
+const typeActive=ref(3)
|
|
|
|
+const onlyMe=ref(false)
|
|
|
|
+
|
|
|
|
+const listState=reactive({
|
|
|
|
+ page:1,
|
|
|
|
+ pageSize:20,
|
|
|
|
+ list:[],
|
|
|
|
+ finished:false,
|
|
|
|
+ loading:false
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+async function getChartList(){
|
|
|
|
+ const params={
|
|
|
|
+ Keyword:searchVal.value,
|
|
|
|
+ CurrentIndex:listState.page,
|
|
|
|
+ PageSize:listState.pageSize,
|
|
|
|
+ IsShowMe:onlyMe.value
|
|
|
|
+ }
|
|
|
|
+ listState.loading=true
|
|
|
|
+
|
|
|
|
+ const apiMap = {
|
|
|
|
+ 3: apiCorrelationChart.searchChartList,
|
|
|
|
+ 6: apiLineEquationChart.searchChartList,
|
|
|
|
+ 7: apiStatisticFeatureChart.searchChart,
|
|
|
|
+ 10: apiCrossVarietyChart.searchChart,
|
|
|
|
+ 12: apiIntervalAnalysis.searchChart,
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ let res = await apiMap[typeActive.value](params)
|
|
|
|
+
|
|
|
|
+ listState.loading=false
|
|
|
|
+ if(res.Ret===200){
|
|
|
|
+ const arr=res.Data.List||[]
|
|
|
|
+ listState.list=[...listState.list,...arr]
|
|
|
|
+ listState.finished=res.Data?.Paging.IsEnd
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+getChartList()
|
|
|
|
+// 触底加载更多
|
|
|
|
+// 如果没有关键词只加载最多一百条数据 不必分页
|
|
|
|
+function onLoadMore(){
|
|
|
|
+ if(listState.finished||listState.loading||!listState.Keyword) return
|
|
|
|
+ listState.page++
|
|
|
|
+ getChartList()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function handleRefreshList(){
|
|
|
|
+ listState.list=[]
|
|
|
|
+ listState.page=1
|
|
|
|
+ listState.finished=false
|
|
|
|
+ selectChartList.value=[]
|
|
|
|
+ getChartList()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+async function initTypeOpts(){
|
|
|
|
+ const res=await apiMenuList()
|
|
|
|
+ if(res.Ret===200){
|
|
|
|
+ const menuData=res.Data.List||[]
|
|
|
|
+ let pathArr=[]
|
|
|
|
+ menuData.forEach(item=>{
|
|
|
|
+ if(item.children){
|
|
|
|
+ item.children.forEach(_item=>{
|
|
|
|
+ pathArr.push(_item.path)
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ pathArr.push(item.path)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ typeOpts.value=typeOpts.value.filter(i=>!i.path||pathArr.includes(i.path))
|
|
|
|
+ if(typeOpts.value.length>0){
|
|
|
|
+ typeActive.value=typeOpts.value[0].value
|
|
|
|
+ getChartList()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+initTypeOpts()
|
|
|
|
+
|
|
|
|
+const selectChartList=ref([])
|
|
|
|
+function handleSelect(item){
|
|
|
|
+ if(item.Disabled){
|
|
|
|
+ showToast('内部图表,不允许插入报告')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if(!item.HaveOperaAuth) return showToast(useNoAuth().chart)
|
|
|
|
+
|
|
|
|
+ const index=selectChartList.value.indexOf(item.UniqueCode)
|
|
|
|
+ if(index!==-1){
|
|
|
|
+ selectChartList.value.splice(index,1)
|
|
|
|
+ }else{
|
|
|
|
+ selectChartList.value.push(item.UniqueCode)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+watch(
|
|
|
|
+ ()=>selectChartList.value,
|
|
|
|
+ ()=>{
|
|
|
|
+ emits('update',selectChartList.value)
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ immediate:true
|
|
|
|
+ }
|
|
|
|
+)
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<template>
|
|
|
|
+ <div class="ETA-chart-wrap">
|
|
|
|
+ <div class="sticky-box">
|
|
|
|
+ <van-search v-model="searchVal" shape="round" placeholder="请输入图表名称" @search="handleRefreshList" @clear="handleRefreshList" />
|
|
|
|
+ <van-tabs v-model:active="typeActive" :ellipsis="false" line-width="16px" title-active-color="#0052D9" @change="handleRefreshList">
|
|
|
|
+ <van-tab v-for="item in typeOpts" :key="item.value" :title="item.label" :name="item.value"></van-tab>
|
|
|
|
+ </van-tabs>
|
|
|
|
+ <van-checkbox v-model="onlyMe" @change="handleRefreshList">只看我的</van-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content-box">
|
|
|
|
+ <div v-if="listState.list.length==0&&listState.finished">
|
|
|
|
+ <img class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
|
|
|
|
+ <p style="text-align:center;color:#999999;font-size:12px">暂无图表</p>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <ul class="chart-list" v-infinite-scroll="[onLoadMore, { 'distance' : 10 }]">
|
|
|
|
+ <li
|
|
|
|
+ :class="['chart-item',selectChartList.includes(item.UniqueCode)&&'active']"
|
|
|
|
+ v-for="item in listState.list"
|
|
|
|
+ :key="item.ChartInfoId"
|
|
|
|
+ @click="handleSelect(item)"
|
|
|
|
+ >
|
|
|
|
+ <div class="van-multi-ellipsis--l2 title">{{item.ChartName}}</div>
|
|
|
|
+ <img :src="!item.HaveOperaAuth?useNoAuth().noAuthImg:item.ChartImage" alt="">
|
|
|
|
+
|
|
|
|
+ <svg v-if="selectChartList.includes(item.UniqueCode)" width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
+ <path d="M14.5 28C22.232 28 28.5 21.732 28.5 14C28.5 6.26801 22.232 0 14.5 0C6.76801 0 0.5 6.26801 0.5 14C0.5 21.732 6.76801 28 14.5 28ZM7.5 14.413L8.913 13L12.5 16.586L20.085 9L21.5 10.415L12.5 19.414L7.5 14.413Z" fill="#0052D9"/>
|
|
|
|
+ </svg>
|
|
|
|
+
|
|
|
|
+ </li>
|
|
|
|
+ <li class="chart-item" style="height:0;border:none;margin-bottom:0;padding:0"></li>
|
|
|
|
+ <li class="chart-item" style="height:0;border:none;margin-bottom:0;padding:0"></li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.ETA-chart-wrap{
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .content-box{
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ flex: 1;
|
|
|
|
+ padding: var(--van-padding-sm);
|
|
|
|
+ min-height: 300PX;
|
|
|
|
+ }
|
|
|
|
+ .chart-list{
|
|
|
|
+ height: 100%;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ .chart-item{
|
|
|
|
+ width: 48%;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border: 3px solid $border-color;
|
|
|
|
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.03);
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ padding: 14px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ position: relative;
|
|
|
|
+ max-height: 336px;
|
|
|
|
+ .title{
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ min-height: 60px;
|
|
|
|
+ }
|
|
|
|
+ img{
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .active{
|
|
|
|
+ border-color: $theme-color;
|
|
|
|
+ svg{
|
|
|
|
+ width: 28px;
|
|
|
|
+ height: 28px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 22px;
|
|
|
|
+ bottom: 22px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.sticky-box{
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ // position: sticky;
|
|
|
|
+ // top: 0;
|
|
|
|
+ // z-index: 10;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ .van-tabs{
|
|
|
|
+ border-bottom: 1px solid $border-color;
|
|
|
|
+ }
|
|
|
|
+ .van-checkbox{
|
|
|
|
+ margin: var(--van-padding-sm);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+@media screen and (min-width:$media-width){
|
|
|
|
+ .ETA-chart-wrap{
|
|
|
|
+ .chart-list{
|
|
|
|
+
|
|
|
|
+ .chart-item{
|
|
|
|
+ width: 260px;
|
|
|
|
+ border-width: 1px;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ padding: 7px;
|
|
|
|
+ max-height: 220px;
|
|
|
|
+ .title{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ min-height: 30px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .active{
|
|
|
|
+ svg{
|
|
|
|
+ width: 14px;
|
|
|
|
+ height: 14px;
|
|
|
|
+ right: 11px;
|
|
|
|
+ bottom: 11px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|