yb11.6

src/api/myChart.js

@@ -0,0 +1,53 @@
+/**
+ * 我的图库模块
+ */
+ import {get,post} from './http'
+
+ /**
+ * 我的图库列表
+ * @param keyword
+ * @param classify_id 分类ID
+ */
+export const apiMyChartList=params=>{
+    return get('/my_chart/list',params)
+}
+
+/**
+ * 我的图库分类列表
+ */
+export const apiMyChartClassifyList=()=>{
+    return get('/my_chart_classify/list',{})
+}
+
+/**
+ * 新增我的图库分类
+ * @param classify_name
+ */
+export const apiMyChartClassifyAdd=params=>{
+    return post('/my_chart_classify/add',params)
+}
+
+/**
+ * 编辑我的图库分类
+ * @param classify_name
+ * @param classify_id
+ */
+export const apiMyChartClassifyEdit=params=>{
+    return post('/my_chart_classify/edit',params)
+}
+
+/**
+ * 删除我的图库分类
+ * @param classify_id
+ */
+export const apiMyChartClassifyDel=params=>{
+    return post('/my_chart_classify/del',params)
+}
+
+/**
+ * 排序我的图库分类
+ * @param list<item>:{ "classify_id": 1, //分类ID "sort": 3 //排序}
+ */
+export const apiMyChartClassifySort=params=>{
+    return post('/my_chart_classify/sort',params)
+}

src/layout/component/Aside.vue

@@ -52,10 +52,17 @@ let menuList = reactive([
     icon_path: new URL('../../assets/leftNav/roadShowVideo-s.png', import.meta.url).href,
     children: null,
   },
+  // {
+  //   MenuId: 2,
+  //   name: "价格驱动",
+  //   path: "/pricedriven",
+  //   icon_path: new URL('../../assets/leftNav/chart-s.png', import.meta.url).href,
+  //   children: null,
+  // },
   {
     MenuId: 2,
-    name: "价格驱动",
-    path: "/pricedriven",
+    name: "我的图库",
+    path: "/mychart/list",
     icon_path: new URL('../../assets/leftNav/chart-s.png', import.meta.url).href,
     children: null,
   },

src/router/index.js

@@ -418,6 +418,27 @@ const routes=[
       }
     ]
   },
+  // 我的图库模块
+  {
+    path:"/mychart",
+    name: "MyChart",
+    component: () => import("@/layout/Index.vue"),
+    meta: {
+      title:"我的图库"
+    },
+    children:[
+      {
+        path:"list",
+        name:"MyChartList",
+        component:()=>import('@/views/myChart/List.vue'),
+        meta: {
+          title: "我的图库",
+          keepAlive:true,
+          isRoot:true
+        }
+      }
+    ]
+  },
 
   {
     path: '/:pathMatch(.*)',

src/utils/common.js

@@ -0,0 +1,17 @@
+// 公共工具方法
+
+/**
+ * 将报告详情字符串中的iframe加token,reportId参数
+ * @param str 报告详情
+ * @param reportId 
+ * @param chapterId
+ * @returns 
+ */
+export const addTokenToIframe=(str,reportId,chapterId=0)=>{
+    const token=localStorage.getItem('token')||''
+    if(import.meta.env.MODE==='production'){
+        return str.replace(/<iframe src="https:\/\/chartlib.hzinsights.com\/chartshow\?/g,`<iframe src="https://chartlib.hzinsights.com/chartshow?token=${token}&reportId=${reportId}&chapterId=${chapterId}&source=ybxcx&`)
+    }else{
+        return str.replace(/<iframe src="https:\/\/charttest.hzinsights.com\/chartshow\?/g,`<iframe src="https://charttest.hzinsights.com/chartshow?token=${token}&reportId=${reportId}&chapterId=${chapterId}&source=ybxcx&`)
+    }
+}

src/views/myChart/List.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { reactive,ref } from 'vue'
+import Search from '@/components/Search.vue'
+import SelfList from '@/components/SelfList.vue'
+import SortClassify from './components/SortClassify.vue'
+import {apiMyChartList,apiMyChartClassifyList} from '@/api/myChart'
+
+
+let classifyOpts=ref([])//我的分类数据
+async function getMyClassifyOpt(){
+    const res=await apiMyChartClassifyList()
+    if(res.code===200){
+        classifyOpts.value=res.data||[]
+    }
+}
+getMyClassifyOpt()
+
+// 分类选择变化
+function classifyChange(){
+    listState.page=1
+    listState.finished=false
+    listState.list=[]
+    getChartList()
+}
+
+let listState=reactive({
+    loading:false,
+    finished:false,
+    page:1,
+    pageSize:20,
+    list:[],
+    sClassifyId:'',
+
+})
+// 获取列表数据
+async function getChartList(){
+    listState.loading=true
+    const res=await apiMyChartList({
+        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
+    }
+}
+getChartList()
+
+// 加载更多
+function onLoad(){
+    listState.page++
+    getChartList()
+}
+
+
+</script>
+
+
+<template>
+    <div class="mychart-list-page">
+        <div class="flex top-wrap">
+            <div class="flex">
+            <Search :disabled="true" placeholder="关键词搜索" style="background-color:#fff"/>
+            <el-select 
+                v-model="listState.sClassifyId" 
+                class="select-box" 
+                placeholder="选择分类" 
+                clearable
+                size="large"
+                @change="classifyChange"
+            >
+                <el-option
+                    v-for="item in classifyOpts"
+                    :key="item.my_chart_classify_id"
+                    :label="item.my_chart_classify_name"
+                    :value="item.my_chart_classify_id"
+                />
+            </el-select>
+            </div>
+            
+            <el-popover
+                placement="bottom-start"
+                :width="400"
+                trigger="click"
+                popper-class="top-popper"
+            >
+                <template #reference>
+                    <img style="width:109px;cursor: pointer;" src="@/assets/myChart/btn-img.png" alt="">
+                </template>
+                <template #default>
+                    <SortClassify @change="getMyClassifyOpt"/>
+                </template>
+            </el-popover>
+        </div>
+        <SelfList 
+            :finished="listState.finished" 
+            :isEmpty="listState.list.length===0&&listState.finished"
+            :loading="listState.loading"
+            :count="listState.list.length"
+            @listOnload="onLoad"
+        >
+            <ul class="flex list-wrap">
+                <li class="item" v-for="item in listState.list" :key="item.chart_info_id">
+                    <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>
+    </div>
+</template>
+
+<style>
+.top-popper{
+    padding: 0 !important;
+}    
+</style>
+<style lang="scss" scoped>
+
+.mychart-list-page{
+    .top-wrap{
+        position: sticky;
+        top: 60px;
+        z-index: 10;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        margin-top: -20px;
+        background-color: #fff;
+        justify-content: space-between;
+    }
+    .select-box{
+        width: 228px;
+        margin-left: 30px;
+        :deep(.el-input__wrapper){
+            border-radius: 40px;
+        }
+    }
+
+
+    .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

@@ -0,0 +1,93 @@
+<script setup>
+import {ref} from 'vue'
+import draggable from 'vuedraggable'
+import {apiMyChartClassifyList,apiMyChartClassifySort} from '@/api/myChart'
+import { ElMessage, ElMessageBox } from 'element-plus'
+const emit=defineEmits(['change'])
+
+let list=ref([])
+async function getMyClassifyOpt(){
+    const res=await apiMyChartClassifyList()
+    if(res.code===200){
+        list.value=res.data||[]
+    }
+}
+getMyClassifyOpt()
+
+
+// 排序结束
+function onSortEnd(){
+    // console.log('sort end');
+    updateClassifySort()
+}
+
+// 更新排序
+async function updateClassifySort(){
+    const arr=list.value.map((item,index)=>{
+        return {
+            sort:index+1,
+            classify_id:item.my_chart_classify_id
+        }
+    })
+    const res=await apiMyChartClassifySort(arr)
+    if(res.code===200){
+        ElMessage.success('操作成功')
+        emit('change')
+    }
+}
+
+</script>
+
+<template>
+    <div class="sort-classify-wrap">
+        <draggable 
+            class="list"
+            v-model="list" 
+            item-key="my_chart_classify_id"
+            animation="300"
+            @end="onSortEnd"
+        >
+            <template #item="{element}">
+                <div class="item">
+                    <span>{{element.my_chart_classify_name}}</span>
+                    <img src="@/assets/myChart/edit-icon.png" alt="">
+                    <img src="@/assets/myChart/del-icon.png" alt="">
+                    <img src="@/assets/myChart/drag-icon.png" alt="">
+                </div>
+            </template>
+        </draggable>
+        <div class="add-btn">添加分类</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.sort-classify-wrap{
+    .list{
+        min-height: 300px;
+        max-height: 500px;
+        .item{
+            cursor: pointer;
+            padding: 10px 20px;
+            font-size: 16px;
+            display: flex;
+            &:hover{
+                background-color: #FFFBF4;
+            }
+            span{
+                flex: 1;
+            }
+            img{
+                width: 20px;
+                margin-left: 20px;
+            }
+        }
+    }
+    .add-btn{
+        background: #F3A52F;
+        color: #fff;
+        text-align: center;
+        line-height: 40px;
+        cursor: pointer;
+    }
+}
+</style>

src/views/report/ChapterDetail.vue

@@ -22,6 +22,7 @@ import CollectBox from '@/components/CollectBox.vue'
 import collectIcon from '@/assets/collect2.png'
 import collectSIcon from '@/assets/collect2-s.png'
 import {useWaterMark} from '@/hooks/waterMark.js'
+import {addTokenToIframe} from '@/utils/common.js'
 
 const route=useRoute()
 const router=useRouter()
@@ -114,6 +115,7 @@ const getChapterReportDetail=async ()=>{
     })
     if(res.code===200){
         info.value=res.data
+        info.value.report_chapter_item.content=addTokenToIframe(res.data.report_chapter_item.content,res.data.report_chapter_item.report_id,res.data.report_chapter_item.report_chapter_id)
         audioData.value={
             auth_ok:res.data.auth_ok,
             video_name:res.data.report_chapter_item.video_name,

src/views/report/Detail.vue

@@ -16,6 +16,7 @@ import {useWaterMark} from '@/hooks/waterMark.js'
 import CollectBox from '@/components/CollectBox.vue'
 import collectIcon from '@/assets/collect2.png'
 import collectSIcon from '@/assets/collect2-s.png'
+import {addTokenToIframe} from '@/utils/common.js'
 moment.locale('zh-cn')
 
 const route=useRoute()
@@ -52,6 +53,7 @@ const getReportDetail=async ()=>{
     })
     if(res.code===200){
         info.value=res.data 
+        info.value.report_info.content=addTokenToIframe(res.data.report_info.content,res.data.report_info.report_id,0)
         audioData.value={
             auth_ok:res.data.auth_ok,
             video_name:res.data.report_info.video_name,