yb11.6

src/api/myChart.js

@@ -50,4 +50,13 @@ export const apiMyChartClassifyDel=params=>{
  */
 export const apiMyChartClassifySort=params=>{
     return post('/my_chart_classify/sort',params)
+}
+
+/**
+ * 我的图表关联分类
+ * @param my_chart_id
+ * @param classify_id
+ */
+export const apiMyChartRelateClassify=params=>{
+    return post('/my_chart/relate_classify',params)
 }

src/router/index.js

@@ -436,6 +436,26 @@ const routes=[
           keepAlive:true,
           isRoot:true
         }
+      },
+      {
+        path:"search",
+        name:"MyChartSearch",
+        component:()=>import('@/views/myChart/Search.vue'),
+        meta: {
+          title: "搜索",
+          keepAlive:true,
+          isRoot:false
+        }
+      },
+      {
+        path:"detail",
+        name:"MyChartDetail",
+        component:()=>import('@/views/myChart/Detail.vue'),
+        meta: {
+          title: "图表详情",
+          keepAlive:false,
+          isRoot:false
+        }
       }
     ]
   },

src/views/myChart/Detail.vue

@@ -0,0 +1,197 @@
+<script setup>
+import {computed, ref} from 'vue'
+import { useRoute } from "vue-router";
+import {apiMyChartClassifyList,apiMyChartRelateClassify,apiMyChartClassifyAdd} from '@/api/myChart'
+import { ElMessage} from 'element-plus'
+
+const route=useRoute()
+
+let url=ref('')
+
+function init(){
+    const queryObj={
+        ChartInfoId:route.query.chartInfoId,
+        source:'ybxcx_my_chart',
+        token:localStorage.getItem('token'),
+        timestamp:new Date().getTime(),//防止缓存
+    }
+    let queryObjStr=''
+    for (const key in queryObj) {
+        if(!queryObjStr){
+                queryObjStr=`${key}=${queryObj[key]}`
+        }else{
+            queryObjStr=`${queryObjStr}&${key}=${queryObj[key]}`
+        }
+    }
+    console.log('拼接字符串：',queryObjStr);
+    url.value=`${import.meta.env.MODE==='production'?'https://details.hzinsights.com':'https://xcxh5test.hzinsights.com/xcx_h5'}/hzyb/chart/detail?${queryObjStr}`
+}
+init()
+
+let classifyList=ref([])
+let showTrans=ref(false)
+let currentClassifyId=ref(0)
+let currentClassifyName=ref('')
+let myChartId=0
+
+// 获取我的分类数据
+async function getMyClassifyList(){
+    const res=await apiMyChartClassifyList()
+    if(res.code===200){
+        classifyList.value=res.data||[]
+    }
+}
+getMyClassifyList()
+
+//添加分类
+let showAdd=ref(false)
+let inputText=ref('')
+
+async function handleConfirmAdd(){
+    if(!inputText.value){
+        ElMessage.warning('请填写分类名称')
+        return
+    }
+    const res=await apiMyChartClassifyAdd({
+        classify_name:inputText.value
+    })
+    if(res.code===200){
+        ElMessage.success(`新增成功`)
+        getMyClassifyList()
+        showAdd.value=false
+        inputText.value=''
+    }
+}
+
+
+// 获取当前图对应的分类
+// const currentClassifyItem=computed(()=>{
+//     return classifyList.value.filter(e=>e.my_chart_classify_id==currentClassifyId.value)[0]
+// })
+
+window.addEventListener('message',(e)=>{
+    // 监听转移分类
+    if(e.data?.opt=="pcShowTransClassify"){
+        currentClassifyId.value=e.data.classifyId
+        myChartId=e.data.myChartId
+        showTrans.value=true
+        if(classifyList.value.length>0){
+            classifyList.value.forEach(item=>{
+                if(item.my_chart_classify_id==e.data.classifyId){
+                    currentClassifyName.value=item.my_chart_classify_name
+                }
+            })
+        }
+    }
+})
+
+
+// 确定转移
+async function handleConfirm(){
+    if(!currentClassifyId)return
+    const res=await apiMyChartRelateClassify({
+        my_chart_id:myChartId,
+        classify_id:currentClassifyId.value
+    })
+    if(res.code===200){
+        ElMessage.success('转移成功')
+        showTrans.value=false
+        const target=document.getElementById('iframe')
+        target.contentWindow.postMessage({opt:'updateClassifyId',id:currentClassifyId.value},"*")
+    }
+}
+</script>
+
+<template>
+    <div class="mychart-detail-page">
+        <iframe id='iframe' :src="url"></iframe>
+    </div>
+    <!-- 转移分类弹窗 -->
+    <el-dialog
+        v-model="showTrans"
+        title="转移分类"
+        :width="450"
+        draggable
+        :close-on-click-modal="false"
+        append-to-body
+    >
+        <div class="trans-wrap">
+            <div v-if="classifyList.length!==0" style="margin-bottom:20px">所属分类：{{currentClassifyName}}</div>
+            <div v-if="classifyList.length==0">暂无分类，请先添加分类</div>
+            <div class="list-box">
+                <span 
+                    :class="['item',currentClassifyId==item.my_chart_classify_id?'active':'']" 
+                    v-for="item in classifyList" 
+                    :key="item.my_chart_classify_id"
+                    @click="currentClassifyId=item.my_chart_classify_id"
+                >{{item.my_chart_classify_name}}</span>
+            </div>
+            <div style="text-align:center;margin:40px 0 20px 0">
+                <el-button round plain size="large" style="width:100px" @click="showTrans=false">取消</el-button>
+                <el-button round size="large" type="primary" style="width:100px" @click="showAdd=true" v-if="classifyList.length==0">添加</el-button>
+                <el-button round size="large" type="primary" style="width:100px" @click="handleConfirm" v-else>确定</el-button>
+            </div>
+        </div>
+    </el-dialog>
+    <!-- 添加分类弹窗 -->
+    <el-dialog
+        v-model="showAdd"
+        title="添加分类"
+        :width="450"
+        draggable
+        :close-on-click-modal="false"
+        append-to-body
+    >
+        <div class="add-box">
+            <input v-model="inputText" type="text" placeholder="请输入分类名称" maxlength="10">
+            <p style="color:#999">注：字数控制在10个字以内</p>
+            <div style="text-align:center;margin:40px 0 20px 0">
+                <el-button round plain size="large" style="width:100px" @click="showAdd=false,inputText=''">取消</el-button>
+                <el-button round size="large" type="primary" style="width:100px" @click="handleConfirmAdd">确定</el-button>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.mychart-detail-page{
+    iframe{
+        width: 100%;
+        height: 800px;
+        border: none;
+    }
+}
+.trans-wrap{
+    .list-box{
+        .item{
+            display: inline-block;
+            padding: 5px 10px;
+            font-size: 14px;
+            background: #F4F4F5;
+            border: 1px solid #E9E9EB;
+            border-radius: 4px;
+            margin-right: 20px;
+            margin-bottom: 10px;
+            cursor: pointer;
+        }
+        .active{
+           background: #FDF6EC;
+           color: #E6A23C;
+        }
+    }
+}
+.add-box{
+    input{
+        width: 100%;
+        display: block;
+        line-height: 40px;
+        border: 1px solid #DCDFE6;
+        padding: 0 15px;
+        box-sizing: border-box;
+        border-radius: 40px;
+        &:focus{
+            outline: none;
+        }
+    }
+}
+</style>

src/views/myChart/List.vue

@@ -4,6 +4,9 @@ import Search from '@/components/Search.vue'
 import SelfList from '@/components/SelfList.vue'
 import SortClassify from './components/SortClassify.vue'
 import {apiMyChartList,apiMyChartClassifyList} from '@/api/myChart'
+import { useRouter } from 'vue-router'
+
+const router=useRouter()
 
 
 let classifyOpts=ref([])//我的分类数据
@@ -56,6 +59,16 @@ function onLoad(){
     getChartList()
 }
 
+//查看详情
+function goDetail(item){
+    router.push({
+        path:'/mychart/detail',
+        query:{
+            chartInfoId:item.chart_info_id
+        }
+    })
+}
+
 
 </script>
 
@@ -64,7 +77,7 @@ function onLoad(){
     <div class="mychart-list-page">
         <div class="flex top-wrap">
             <div class="flex">
-            <Search :disabled="true" placeholder="关键词搜索" style="background-color:#fff"/>
+            <Search @click="$router.push('/mychart/search')" :disabled="true" placeholder="关键词搜索" style="background-color:#fff"/>
             <el-select 
                 v-model="listState.sClassifyId" 
                 class="select-box" 
@@ -89,10 +102,11 @@ function onLoad(){
             :isEmpty="listState.list.length===0&&listState.finished"
             :loading="listState.loading"
             :count="listState.list.length"
+            emptyMsg="暂无图表收藏的信息"
             @listOnload="onLoad"
         >
             <ul class="flex list-wrap">
-                <li class="item" v-for="item in listState.list" :key="item.chart_info_id">
+                <li class="item" v-for="item in listState.list" :key="item.chart_info_id" @click="goDetail(item)">
                     <div class="multi-ellipsis-l2 title">{{item.chart_name}}</div>
                     <img class="img" :src="item.chart_image" alt="">
                 </li>

src/views/myChart/Search.vue

@@ -0,0 +1,175 @@
+<script setup>
+import { onActivated, reactive,ref } from 'vue'
+import Search from '@/components/Search.vue'
+import SelfList from '@/components/SelfList.vue'
+import {apiMyChartList} from '@/api/myChart'
+import { useRoute ,onBeforeRouteLeave, useRouter} from 'vue-router'
+import { useStore } from 'vuex'
+
+const route=useRoute()
+const router=useRouter()
+const store=useStore()
+
+let autoFocus=ref(false)
+
+let listState=reactive({
+    loading:false,
+    finished:false,
+    page:1,
+    pageSize:20,
+    list:[],
+    sClassifyId:'',
+    keyword:''
+})
+// 获取列表数据
+async function getChartList(){
+    listState.loading=true
+    const res=await apiMyChartList({
+        keyword:listState.keyword,
+        classify_id:listState.sClassifyId,
+        curr_page:listState.page,
+        page_size:listState.pageSize
+    })
+    listState.loading=false
+    if(res.code===200){
+        const arr=res.data.list||[]
+        listState.list=[...listState.list,...arr]
+        listState.finished=res.data.paging.is_end
+    }
+}
+
+// 加载更多
+function onLoad(){
+    listState.page++
+    getChartList()
+}
+
+//搜索
+function handleSearch(e){
+    listState.keyword=e||''
+    listState.page=1
+    listState.list=[]
+    listState.finished=false
+    getChartList()
+}
+
+//查看详情
+function goDetail(item){
+    router.push({
+        path:'/mychart/detail',
+        query:{
+            chartInfoId:item.chart_info_id
+        }
+    })
+}
+
+onActivated(()=>{
+    console.log('onActivated');
+    if(route.query.cid){
+        if(route.query.cid==listState.sClassifyId)return
+        autoFocus.value=false
+        listState.sClassifyId=Number(route.query.cid)
+        store.commit('modifyBreadCrumb',route.query.cname)
+        getChartList()
+    }else{
+        autoFocus.value=true
+        store.commit('modifyBreadCrumb','搜索')
+    }
+})
+
+onBeforeRouteLeave((to)=>{
+    if(to.name!='MyChartDetail'){
+        listState.page=1
+        listState.list=[]
+        listState.finished=false
+        listState.keyword=''
+        listState.sClassifyId=''
+    }
+})
+
+
+
+</script>
+
+<template>
+    <div class="mychart-search-page">
+        <div class="top-wrap">
+            <h2 class="title" v-if="$route.query.cname">{{$route.query.cname}}</h2>
+            <Search 
+                :autoFocus="autoFocus" 
+                placeholder="关键词搜索" 
+                :defaultVal="listState.keyword"
+                style="background-color:#fff"
+                @search="handleSearch"
+            />
+        </div>
+        <template v-if="listState.keyword||listState.sClassifyId">
+        <SelfList 
+            :finished="listState.finished" 
+            :isEmpty="listState.list.length===0&&listState.finished"
+            :loading="listState.loading"
+            :count="listState.list.length"
+            emptyMsg="暂无图表收藏的信息"
+            @listOnload="onLoad"
+        >
+            <ul class="flex list-wrap">
+                <li class="item" v-for="item in listState.list" :key="item.chart_info_id" @click="goDetail(item)">
+                    <div class="multi-ellipsis-l2 title">{{item.chart_name}}</div>
+                    <img class="img" :src="item.chart_image" alt="">
+                </li>
+                <li class="last-add-item"></li>
+                <li class="last-add-item"></li>
+                <li class="last-add-item"></li>
+            </ul>
+        </SelfList>
+        </template>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.top-wrap{
+    position: sticky;
+    top: 60px;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    margin-top: -20px;
+    background-color: #fff;
+    .title{
+        font-size: 20px;
+    }
+}
+    .list-wrap{
+        flex-wrap: wrap;
+        justify-content: center;
+        .last-add-item{
+            height:0;
+            flex-shrink: 0;
+            width: 285px;
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+        .item{
+            flex-shrink: 0;
+            width: 285px;
+            background: #FFFFFF;
+            border: 1px solid #EBEBEB;
+            box-shadow: 0px 0px 12px rgba(167, 167, 167, 0.25);
+            border-radius: 4px;
+            padding: 10px;
+            margin-bottom: 20px;
+            margin-left: 10px;
+            margin-right: 10px;
+            overflow: hidden;
+            cursor: pointer;
+            .title{
+                margin-bottom: 20px;
+            }
+            .img{
+                width: 100%;
+                height: 229px;
+                object-fit: contain;
+            }
+        }
+    }
+</style>

src/views/myChart/components/SortClassify.vue

@@ -9,6 +9,9 @@ import {
     apiMyChartClassifyEdit
 } from '@/api/myChart'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const router=useRouter()
 const emit=defineEmits(['change'])
 
 let list=ref([])
@@ -62,6 +65,16 @@ function handleDel(item){
                 ElMessage.success('删除成功')
                 emit('change')
                 getMyClassifyOpt()
+            }else if(res.code===4001){
+                ElMessageBox({
+                    title:`操作提示`,
+                    message:`删除失败，该分类下有图表`,
+                    center: false,
+                    dangerouslyUseHTMLString: true,
+                    confirmButtonText:'知道了',
+                    confirmButtonClass:'self-elmessage-confirm-btn',
+                    showCancelButton:false,
+                }) 
             }else{
                 ElMessage.warning(res.msg)
             }
@@ -118,13 +131,23 @@ async function handleConfirmAdd(){
 }
 
 
+function goSearch(item){
+    router.push({
+        path:'/mychart/search',
+        query:{
+            cid:item.my_chart_classify_id,
+            cname:item.my_chart_classify_name
+        }
+    })
+}
+
 </script>
 
 <template>
     <el-popover
         placement="bottom-start"
         :width="400"
-        trigger="click"
+        trigger="hover"
         popper-class="top-popper"
     >
         <template #reference>
@@ -140,7 +163,7 @@ async function handleConfirmAdd(){
                     @end="onSortEnd"
                 >
                     <template #item="{element}">
-                        <div class="item">
+                        <div class="item" @click="goSearch(element)">
                             <span>{{element.my_chart_classify_name}}</span>
                             <img src="@/assets/myChart/edit-icon.png" @click.stop="handleEdit(element)" alt="">
                             <img src="@/assets/myChart/del-icon.png" alt="" @click.stop="handleDel(element)">