需求池优化完成

src/components/Audio.vue

@@ -65,6 +65,7 @@ const handleDragTime=(e)=>{
 
 // 关闭弹窗
 const closeAudioPop=()=>{
+    store.commit('closeAudio')
     store.commit('closeAudioPop')
 }
 

src/components/SharePoster.vue

@@ -32,12 +32,33 @@ const handleCreatePoster=async ()=>{
 }
 
 const onLongPressImg=()=>{
-    const a=document.createElement('a')
-    a.setAttribute("download",'名字')
-    a.style.display = "none"
-    a.href=posterImg.value+'?response-content-type=application/octet-stream'
-    document.body.appendChild(a);
-    a.click()
+    // const a=document.createElement('a')
+    // a.setAttribute("download",'名字')
+    // a.style.display = "none"
+    // a.href=posterImg.value+'?response-content-type=application/octet-stream'
+    // document.body.appendChild(a);
+    // a.click()
+
+    let img=new Image()
+    img.setAttribute('crossOrigin', 'anonymous');
+    img.src=posterImg.value
+    img.onload=()=>{
+        let canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        let context = canvas.getContext('2d');
+        context.drawImage(img, 0, 0, img.width, img.height);
+        let dataURL = canvas.toDataURL("image/png", 1);
+        const a=document.createElement('a')
+        a.setAttribute("download",'海报')
+        a.style.display = "none"
+        a.href=dataURL
+        document.body.appendChild(a);
+        a.click()
+    }
+    img.onerror=(e)=>{
+        console.log('图片加载失败',e);
+    }
 }
 
 onLongPress(imgDom, onLongPressImg)
@@ -60,7 +81,7 @@ onLongPress(imgDom, onLongPressImg)
             <img class="load-img" src="@/assets/loading.png"/>
             <div>海报生成中...</div>
         </div>
-        <img v-if="showPoster" ref="imgDom" class="poster-img" :src="posterImg" @longpress="" />
+        <img v-if="showPoster" ref="imgDom" class="poster-img" :src="posterImg" />
     </div>
 </template>
 

src/style/global.scss

@@ -1,4 +1,8 @@
 // 全局样式
+@font-face {
+  font-family: 'PingFang';
+  src: url('https://hzstatic.hzinsights.com/static/font/PingFangRegular.ttf');
+}
 html,
 body,
 #app {
@@ -6,6 +10,7 @@ body,
   height: 100%;
   font-size: 16px;
   color: #333;
+  font-family: 'PingFang';
   // min-width: 1024px;
 }
 

src/views/report/Index.vue

@@ -122,16 +122,18 @@ const getReportList = async () => {
 const clickFirstType = (item) => {
   selectFirstType.value = item.classify_name
   subTypeList.value = item.list
-  clickSubType({props:{label:item.list[0].chart_permission_name,name:item.list[0].chart_permission_id}})
+  // clickSubType({props:{label:item.list[0].chart_permission_name,name:item.list[0].chart_permission_id}})
+  clickSubType(item.list[0])
 }
 //点击二级分类
-const clickSubType = ({props}) => {
-  let item=null
-  subTypeList.value.forEach(_item=>{
-    if(_item.chart_permission_id==props.name){
-      item=_item
-    }
-  })
+// const clickSubType = ({props}) => {
+  // let item=null
+  // subTypeList.value.forEach(_item=>{
+  //   if(_item.chart_permission_id==props.name){
+  //     item=_item
+  //   }
+  // })
+const clickSubType = (item) => {
   selectSubType.value = item.chart_permission_id
   reportState.list = []
   reportState.page = 1
@@ -279,20 +281,38 @@ onActivated(()=>{
           <div class="see-more" @click="handleGoMoreClassify">查看更多</div>
         </div>
         <div class="sub-nav">
-            <!-- <span 
+            <span 
               :class="['sub-item', item.chart_permission_id == selectSubType && 'sub-active']" 
-              v-for="item in subTypeList" 
+              v-for="item in subTypeList.slice(0,6)" 
               :key="item.chart_permission_id" 
               @click="clickSubType(item)"
-            >{{ item.chart_permission_name }}</span> -->
-          <el-tabs v-model="selectSubType" class="tabs-wrap" @tab-click="clickSubType">
+            >{{ item.chart_permission_name }}</span>
+            <el-popover
+              :width="500"
+              trigger="click"
+            >
+              <template #reference>
+                <img v-if="subTypeList.length>6" style="width:16px;transform: rotate(90deg);cursor: pointer" src="@/assets/icon-more.png" alt="">
+              </template>
+              <template #default>
+                <div class="flex top-nav-filter-box">
+                  <div 
+                      :class="['item',item.chart_permission_id == selectSubType&&'active']" 
+                      v-for="item in subTypeList.slice(6)" 
+                      :key="item.chart_permission_id"
+                      @click="clickSubType(item)"
+                  >{{item.chart_permission_name}}</div>
+                </div>
+              </template>
+            </el-popover>
+          <!-- <el-tabs v-model="selectSubType" class="tabs-wrap" @tab-click="clickSubType">
             <el-tab-pane 
                 :label="item.chart_permission_name" 
                 :name="item.chart_permission_id"
                 v-for="item in subTypeList" 
                 :key="item.chart_permission_id"
             ></el-tab-pane>
-          </el-tabs>
+          </el-tabs> -->
         </div>
       </div>
       <!-- 报告列表 -->
@@ -355,6 +375,30 @@ onActivated(()=>{
 </template>
 
 <style lang="scss" scoped>
+.top-nav-filter-box{
+          flex-wrap: wrap;
+          .item{
+              margin: 5px 10px;
+              width: 113px;
+              height: 40px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background-color: #f6f6f6;
+              border-radius: 4px;
+              font-size: 16px;
+              cursor: pointer;
+              :hover{
+                  color: #fff;
+                  background-color: #F3A52F;
+              }
+          }
+          .active{
+              color: #fff;
+              background-color: #F3A52F;
+          }
+}
+
 .el-backtop{
   z-index: 1000;
 }
@@ -444,66 +488,67 @@ onActivated(()=>{
       .sub-nav {
         margin-top: 30px;
         // overflow-x: auto;
-        // overflow-y: hidden;
+        overflow-y: hidden;
         // &::-webkit-scrollbar {
         //   display: none;
         // }
-        width: calc(100vw - 500px);
-        // .sub-item {
-        //   flex-shrink: 0;
-        //   margin-right: 30px;
-        //   font-size: 16px;
-        //   color: #666666;
-        //   cursor: pointer;
-        // }
-        // .sub-active {
-        //   color: #F3A52F;
-        // }
-        :deep(.el-tabs__header){
-          margin-bottom: 0;
-        }
-        :deep(.el-tabs__active-bar){
-          display: none;
-        }
-        :deep(.el-tabs__nav-wrap::after){
-            display: none;
-        }
-        :deep(.el-tabs__item.is-active){
-            color: #F3A52F;
-        }
-        :deep(.el-tabs__item){
-            font-size: 16px;
-            // height: 22px;
-            &:hover{
-                color: #F3A52F;
-            }
-        }
-        :deep(.el-tabs__nav-next){
-            width: 20px;
-            height: 20px;
-            background-image: url('@/assets/icon-more.png');
-            background-size: cover;
-            top: 10px;
-            .el-icon{
-                display: none;
-            }
-        }
-        :deep(.el-tabs__nav-prev){
-            width: 20px;
-            height: 20px;
-            background-image: url('@/assets/icon-more.png');
-            background-size: cover;
-            top: 10px;
-            transform: rotate(180deg);
-            .el-icon{
-                display: none;
-            }
+        // width: calc(100vw - 500px);
+        .sub-item {
+          flex-shrink: 0;
+          margin-right: 30px;
+          font-size: 16px;
+          color: #666666;
+          cursor: pointer;
         }
-        :deep(.el-tabs__nav-wrap.is-scrollable){
-            padding: 0 25px;
+        .sub-active {
+          color: #F3A52F;
         }
+        // :deep(.el-tabs__header){
+        //   margin-bottom: 0;
+        // }
+        // :deep(.el-tabs__active-bar){
+        //   display: none;
+        // }
+        // :deep(.el-tabs__nav-wrap::after){
+        //     display: none;
+        // }
+        // :deep(.el-tabs__item.is-active){
+        //     color: #F3A52F;
+        // }
+        // :deep(.el-tabs__item){
+        //     font-size: 16px;
+        //     // height: 22px;
+        //     &:hover{
+        //         color: #F3A52F;
+        //     }
+        // }
+        // :deep(.el-tabs__nav-next){
+        //     width: 20px;
+        //     height: 20px;
+        //     background-image: url('@/assets/icon-more.png');
+        //     background-size: cover;
+        //     top: 10px;
+        //     .el-icon{
+        //         display: none;
+        //     }
+        // }
+        // :deep(.el-tabs__nav-prev){
+        //     width: 20px;
+        //     height: 20px;
+        //     background-image: url('@/assets/icon-more.png');
+        //     background-size: cover;
+        //     top: 10px;
+        //     transform: rotate(180deg);
+        //     .el-icon{
+        //         display: none;
+        //     }
+        // }
+        // :deep(.el-tabs__nav-wrap.is-scrollable){
+        //     padding: 0 25px;
+        // }
 
       }
+      
     }
 
     .report-list-wrap {