<!-- 运营分析 --> <template> <view class="operation"> <view class="operation-header"> <view class="operation-header-item" v-for="(item, index) in tabList" :key="index" :class="{ active: tabCur === item.key }" @click="tabCur = item.key" > <text>{{ item.label }}</text> </view> </view> <view class="operation-main"> <template v-if="tabCur === 'road'"> <view class="operation-main-menu"> <view class="operation-main-menu-item" v-for="(item, index) in roadMenuList" :key="index" @click="jumpPage(item.url, item.params)" > <view class="image"> <u--image :showLoading="true" :src="item.icon" width="60px" height="60px" /> </view> <view class="name"> <text>{{ item.name }}</text> </view> </view> </view> </template> <template v-if="tabCur === 'park'"> <view class="operation-main-menu"> <view class="operation-main-menu-item" v-for="(item, index) in parkMenuList" :key="index" @click="jumpPage(item.url, item.params)" > <view class="image"> <u--image :showLoading="true" :src="item.icon" width="60px" height="60px" /> </view> <view class="name"> <text>{{ item.name }}</text> </view> </view> </view> </template> </view> </view> </template> <script> export default { data() { return { tabList: [ { key: 'road', label: '路段' }, { key: 'park', label: '停车场' } ], tabCur: 'road', roadMenuList: [ { icon: '/static/icons/statisticalReportIcons/section-berth-icon.svg', name: '路段泊位实收统计', url: 'pages/statisticalReport/roadModel/index', params: { title: '路段泊位实收统计', key: 'sectionBerth' } }, { icon: '/static/icons/operationalAnalysisIcons/arrearage-analysis-icon.svg', name: '欠费统计', url: 'pages/statisticalReport/roadModel/index', params: { title: '欠费统计', key: 'arrearsReport' } }, { icon: '/static/icons/operationalAnalysisIcons/revenue-analysis-icon.svg', name: '营收统计', url: 'pages/statisticalReport/roadModel/index', params: { title: '营收统计', key: 'revenueReport' } }, { icon: '/static/icons/statisticalReportIcons/really-receivable-icon.svg', name: '应收实收分析', url: 'pages/statisticalReport/roadModel/index', params: { title: '应收实收分析', key: 'reallyReceivable' } }, { icon: '/static/icons/statisticalReportIcons/recovery-report-icon.svg', name: '追缴统计', url: 'pages/statisticalReport/roadModel/index', params: { title: '追缴统计', key: 'recoveryReport' } } ], parkMenuList: [ { icon: '/static/icons/statisticalReportIcons/parking-lot-income-icon.svg', name: '停车场实收统计', url: 'pages/statisticalReport/parkModel/index', params: { title: '停车场实收统计', key: 'parkingReallyIncome' } }, { icon: '/static/icons/operationalAnalysisIcons/arrearage-analysis-icon.svg', name: '欠费统计', url: 'pages/statisticalReport/parkModel/index', params: { title: '欠费统计', key: 'arrearsReport' } }, { icon: '/static/icons/operationalAnalysisIcons/revenue-analysis-icon.svg', name: '营收统计', url: 'pages/statisticalReport/parkModel/index', params: { title: '营收统计', key: 'revenueReport' } }, { icon: '/static/icons/statisticalReportIcons/really-receivable-icon.svg', name: '应收实收统计', url: 'pages/statisticalReport/parkModel/index', params: { title: '应收实收统计', key: 'reallyReceivable' } } ] }; }, onShow() {}, methods: { /** * 跳转指定页面 * @param {*} url * @param {*} params * @param {*} type */ jumpPage(url, params, type = 'navigateTo') { uni.$u.route({ url, params, type }); } } }; </script> <style lang="scss"> page { background-color: #1767f2; min-height: calc(100vh - 44px); } </style> <style lang="scss" scoped> @import './statisticalReport.scss'; </style>