|
|
@@ -0,0 +1,323 @@
|
|
|
+<script setup>
|
|
|
+//ETA图库页面
|
|
|
+import {ref,reactive} from 'vue'
|
|
|
+import apiChart from '@/api/chart'
|
|
|
+
|
|
|
+
|
|
|
+const goMobileSearch = ()=>{
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const goDetail = ()=>{}
|
|
|
+
|
|
|
+
|
|
|
+//目录列表
|
|
|
+const catalogNodes = ref([])
|
|
|
+//是否展示目录列表
|
|
|
+const IsShowCatalog = ref(false)
|
|
|
+//展开的目录
|
|
|
+const activeCatalogs = ref([])
|
|
|
+//获取图库目录
|
|
|
+async function getCatalogList(){
|
|
|
+ const res = await apiChart.ETAChartClassifyList()
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ catalogNodes.value = res.Data?res.Data.AllNodes:[]||[]
|
|
|
+}
|
|
|
+//展示目录列表
|
|
|
+function showCatalog(){
|
|
|
+ IsShowCatalog.value = true
|
|
|
+}
|
|
|
+//展示目录操作栏，pad模式是 phone模式是popup
|
|
|
+function handleShowFileOpt(){}
|
|
|
+//子目录被点击
|
|
|
+function handleCatalogItemClick(item){
|
|
|
+ listState.cid = item.ChartClassifyId
|
|
|
+ listState.list=[]
|
|
|
+ listState.page=1
|
|
|
+ getChartList()
|
|
|
+}
|
|
|
+//图表列表
|
|
|
+const listState = reactive({
|
|
|
+ cid:152,
|
|
|
+ list:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:15,
|
|
|
+ finished:false,
|
|
|
+ loading:false,
|
|
|
+ total:0,
|
|
|
+})
|
|
|
+//获取图表列表
|
|
|
+async function getChartList(){
|
|
|
+ const {pageSize,cid,page} = listState
|
|
|
+ const res = await apiChart.pubChartList({
|
|
|
+ PageSize: pageSize,
|
|
|
+ CurrentIndex: page,
|
|
|
+ ChartClassifyId: cid,
|
|
|
+ IsShowMe: false
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ const arr = res.Data?res.Data.List:[]
|
|
|
+ listState.list = [...listState.list,...arr]
|
|
|
+ listState.total = res.Data?res.Data.Paging.Totals:0
|
|
|
+ listState.finished = res.Data?res.Data.Paging.IsEnd:0
|
|
|
+ listState.loading=false
|
|
|
+}
|
|
|
+
|
|
|
+//下拉加载
|
|
|
+function onLoad(){
|
|
|
+ listState.page++
|
|
|
+ getChartList()
|
|
|
+}
|
|
|
+
|
|
|
+getCatalogList()
|
|
|
+getChartList()
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="chart-eta-list-wrap">
|
|
|
+ <div class="select-wrap">
|
|
|
+ <div class="search-box">
|
|
|
+ <van-search
|
|
|
+ shape="round"
|
|
|
+ readonly
|
|
|
+ placeholder="请输入图表名称"
|
|
|
+ style="flex:1"
|
|
|
+ @click-input="goMobileSearch"
|
|
|
+ />
|
|
|
+ <div class="lang-icon icon">en</div>
|
|
|
+ <div class="list-icon icon" @click="showCatalog">list</div>
|
|
|
+ </div>
|
|
|
+ <div class="select-box">
|
|
|
+ <p>共{{listState.total}}张图表</p>
|
|
|
+ <span>只看我的</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-list-wrap">
|
|
|
+ <van-list
|
|
|
+ v-model:loading="listState.loading"
|
|
|
+ :finished="listState.finished"
|
|
|
+ :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
|
|
|
+ :immediate-check="false"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
|
|
|
+ <ul class="chart-list">
|
|
|
+ <li
|
|
|
+ class="chart-list-item"
|
|
|
+ v-for="item in listState.list"
|
|
|
+ :key="item.ChartInfoId"
|
|
|
+ @click="goDetail(item)"
|
|
|
+ >
|
|
|
+ <div class="title">{{item.ChartName}}</div>
|
|
|
+ <img class="img" :src="item.ChartImage" alt="">
|
|
|
+ <div class="time">
|
|
|
+ <span>创建时间：{{item.CreateTime.slice(0,10)}}</span>
|
|
|
+ <span class="tool-icon"></span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ <!-- 目录列表 -->
|
|
|
+ <van-popup v-model:show="IsShowCatalog" position="right" class="catalog-list-wrap" style="height:100%">
|
|
|
+ <div class="catalog-list">
|
|
|
+ <div class="top">
|
|
|
+ <h3>选择分类</h3>
|
|
|
+ <span class="close-icon">X</span>
|
|
|
+ </div>
|
|
|
+ <div class="list-box">
|
|
|
+ <van-collapse v-model="activeCatalogs" :border="false">
|
|
|
+ <van-collapse-item
|
|
|
+ v-for="node in catalogNodes"
|
|
|
+ :key="node.UniqueCode"
|
|
|
+ :name="node.UniqueCode"
|
|
|
+ :is-link="false"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <div class="list-title">
|
|
|
+ <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
|
|
|
+ <span class="van-ellipsis">{{node.ChartClassifyName}}</span>
|
|
|
+ <div @click.stop="handleShowFileOpt(node)" class="menu-icon">
|
|
|
+ <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ v-for="item in node.Children"
|
|
|
+ :key="item.UniqueCode"
|
|
|
+ @click.stop="handleCatalogItemClick(item)"
|
|
|
+ >
|
|
|
+ <span class="van-ellipsis text">{{ item.ChartClassifyName }}</span>
|
|
|
+ <div @click.stop="handleShowFileOpt(item)" class="menu-icon">
|
|
|
+ <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <span>添加图表分类</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<style lang="scss">
|
|
|
+.chart-eta-list-wrap{
|
|
|
+ .van-cell__title{
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .catalog-list-wrap{
|
|
|
+ width: 65%;
|
|
|
+ }
|
|
|
+ @media screen and (min-width:$media-width){
|
|
|
+ .catalog-list-wrap{
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+.chart-eta-list-wrap{
|
|
|
+ .select-wrap{
|
|
|
+ padding: 0 30px;
|
|
|
+ position: sticky;
|
|
|
+ top:0;
|
|
|
+ background-color: #fff;
|
|
|
+ .search-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chart-list-wrap{
|
|
|
+ margin-top:15px;
|
|
|
+ padding: 0 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ .chart-list{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px 0;
|
|
|
+ .chart-list-item{
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 330px;
|
|
|
+ padding: 10px 14px;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ .title{
|
|
|
+ min-height: 70px;
|
|
|
+ overflow: hidden;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display:-webkit-box !important;
|
|
|
+ -webkit-box-orient:vertical;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: 220px;
|
|
|
+ display: block;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ font-size: 14px;
|
|
|
+ color: $font-grey_999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .catalog-list{
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
+ .top{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ padding: 0 15px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .list-box{
|
|
|
+ padding:15px;
|
|
|
+ .list-title,.list-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span{
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ display: block;
|
|
|
+ width: 48px;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .menu-icon{
|
|
|
+ width: 30px;
|
|
|
+ text-align: center;
|
|
|
+ .icon{
|
|
|
+ width: 6px;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (min-width:$media-width){
|
|
|
+ .select-wrap{
|
|
|
+ top:60px;
|
|
|
+ }
|
|
|
+ .chart-list-wrap{
|
|
|
+ //margin-top:10px;
|
|
|
+
|
|
|
+ .chart-list{
|
|
|
+ gap: 10px 5%;
|
|
|
+ justify-content:flex-start;
|
|
|
+ .chart-list-item{
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 30%;
|
|
|
+ padding: 10px 14px;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ .title{
|
|
|
+ min-height: 36px;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: block;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .catalog-list{
|
|
|
+ .list-box{
|
|
|
+ padding:15px;
|
|
|
+ .list-title{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 32px;
|
|
|
+ &.icon{
|
|
|
+ width:15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
cxmo