|
@@ -5,7 +5,7 @@ import {
|
|
apiReportIndexNewbanner,
|
|
apiReportIndexNewbanner,
|
|
apiLatestNews
|
|
apiLatestNews
|
|
} from '@/api/report'
|
|
} from '@/api/report'
|
|
-import { onActivated, onMounted, reactive, ref } from "vue"
|
|
|
|
|
|
+import { onActivated, onMounted,onUnmounted, reactive, ref,nextTick} from "vue"
|
|
import Search from "@/components/Search.vue"
|
|
import Search from "@/components/Search.vue"
|
|
import SelfList from '@/components/SelfList.vue'
|
|
import SelfList from '@/components/SelfList.vue'
|
|
import { onBeforeRouteLeave , useRouter } from "vue-router"
|
|
import { onBeforeRouteLeave , useRouter } from "vue-router"
|
|
@@ -15,6 +15,11 @@ import 'moment/dist/locale/zh-cn'
|
|
moment.locale('zh-cn')
|
|
moment.locale('zh-cn')
|
|
|
|
|
|
const router=useRouter()
|
|
const router=useRouter()
|
|
|
|
+// 实现头部的适配
|
|
|
|
+const contentRef=ref('')
|
|
|
|
+const headerRef=ref('')
|
|
|
|
+let contentWidth=ref('')
|
|
|
|
+let headerHight=ref('')
|
|
|
|
|
|
// 向小程序发送数据
|
|
// 向小程序发送数据
|
|
const handleDataToXcx=()=>{
|
|
const handleDataToXcx=()=>{
|
|
@@ -125,6 +130,9 @@ const clickFirstType = (item) => {
|
|
subTypeList.value = item.list
|
|
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])
|
|
clickSubType(item.list[0])
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ resetHeaderWidthHandle();
|
|
|
|
+ });
|
|
}
|
|
}
|
|
//点击二级分类
|
|
//点击二级分类
|
|
// const clickSubType = ({props}) => {
|
|
// const clickSubType = ({props}) => {
|
|
@@ -231,12 +239,23 @@ const handleGoReportDetail=(item)=>{
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+/* 重绘固定头宽度 */
|
|
|
|
+const resetHeaderWidthHandle = () => {
|
|
|
|
+ contentWidth.value = contentRef.value.offsetWidth+'px'
|
|
|
|
+ headerHight.value = headerRef.value.offsetHeight-10+'px'
|
|
|
|
+}
|
|
|
|
+
|
|
let isMounted = ref(false);
|
|
let isMounted = ref(false);
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
isMounted.value = true;
|
|
isMounted.value = true;
|
|
handleDataToXcx()
|
|
handleDataToXcx()
|
|
|
|
+ window.addEventListener('resize',resetHeaderWidthHandle)
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+onUnmounted(() => {
|
|
|
|
+ window.removeEventListener('resize',resetHeaderWidthHandle)
|
|
|
|
+})
|
|
|
|
+
|
|
// 格式化列表日期
|
|
// 格式化列表日期
|
|
const formatDate=(e)=>{
|
|
const formatDate=(e)=>{
|
|
const isSameYear=moment(e).isSame(new Date(), 'year');
|
|
const isSameYear=moment(e).isSame(new Date(), 'year');
|
|
@@ -267,11 +286,11 @@ onActivated(()=>{
|
|
</teleport>
|
|
</teleport>
|
|
</template>
|
|
</template>
|
|
<div class="hasrightaside-box report-index-page">
|
|
<div class="hasrightaside-box report-index-page">
|
|
- <div class="content-box report-main">
|
|
|
|
- <div class="top-nav-wrap">
|
|
|
|
|
|
+ <div class="content-box report-main" ref="contentRef">
|
|
|
|
+ <div class="top-nav-wrap" ref="headerRef" :style="{'width':contentWidth}">
|
|
<div class="flex first-nav">
|
|
<div class="flex first-nav">
|
|
- <div class="nav-move-box move-left"></div>
|
|
|
|
- <div class="nav-move-box move-right"></div>
|
|
|
|
|
|
+ <!-- <div class="nav-move-box move-left"></div>
|
|
|
|
+ <div class="nav-move-box move-right"></div> -->
|
|
<div
|
|
<div
|
|
:class="['item', item.classify_name == selectFirstType && 'item-active']"
|
|
:class="['item', item.classify_name == selectFirstType && 'item-active']"
|
|
v-for="item in firstTypeList"
|
|
v-for="item in firstTypeList"
|
|
@@ -284,11 +303,11 @@ onActivated(()=>{
|
|
<div class="sub-nav">
|
|
<div class="sub-nav">
|
|
<span
|
|
<span
|
|
:class="['sub-item', item.chart_permission_id == selectSubType && 'sub-active']"
|
|
:class="['sub-item', item.chart_permission_id == selectSubType && 'sub-active']"
|
|
- v-for="item in subTypeList.slice(0,6)"
|
|
|
|
|
|
+ v-for="item in subTypeList"
|
|
:key="item.chart_permission_id"
|
|
:key="item.chart_permission_id"
|
|
@click="clickSubType(item)"
|
|
@click="clickSubType(item)"
|
|
>{{ item.chart_permission_name }}</span>
|
|
>{{ item.chart_permission_name }}</span>
|
|
- <el-popover
|
|
|
|
|
|
+ <!-- <el-popover
|
|
:width="500"
|
|
:width="500"
|
|
trigger="click"
|
|
trigger="click"
|
|
>
|
|
>
|
|
@@ -305,7 +324,7 @@ onActivated(()=>{
|
|
>{{item.chart_permission_name}}</div>
|
|
>{{item.chart_permission_name}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
- </el-popover>
|
|
|
|
|
|
+ </el-popover> -->
|
|
<!-- <el-tabs v-model="selectSubType" class="tabs-wrap" @tab-click="clickSubType">
|
|
<!-- <el-tabs v-model="selectSubType" class="tabs-wrap" @tab-click="clickSubType">
|
|
<el-tab-pane
|
|
<el-tab-pane
|
|
:label="item.chart_permission_name"
|
|
:label="item.chart_permission_name"
|
|
@@ -324,7 +343,7 @@ onActivated(()=>{
|
|
:count="reportState.list.length"
|
|
:count="reportState.list.length"
|
|
@listOnload="onLoad"
|
|
@listOnload="onLoad"
|
|
>
|
|
>
|
|
- <div class="report-list-wrap">
|
|
|
|
|
|
+ <div class="report-list-wrap" :style="{'margin-top':headerHight}">
|
|
<div class="item" v-for="item in reportState.list" :key="item.date">
|
|
<div class="item" v-for="item in reportState.list" :key="item.date">
|
|
<div class="item-time">{{ formatDate(item.date) }}</div>
|
|
<div class="item-time">{{ formatDate(item.date) }}</div>
|
|
<div class="content-list">
|
|
<div class="content-list">
|
|
@@ -495,6 +514,7 @@ onActivated(()=>{
|
|
overflow-y: hidden;
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+ flex-wrap: wrap;
|
|
// &::-webkit-scrollbar {
|
|
// &::-webkit-scrollbar {
|
|
// display: none;
|
|
// display: none;
|
|
// }
|
|
// }
|
|
@@ -503,6 +523,7 @@ onActivated(()=>{
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
margin-right: 30px;
|
|
margin-right: 30px;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
|
+ margin-bottom: 8px;
|
|
color: #666666;
|
|
color: #666666;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|