parking_operation/pages/dataOverview/operationalAnalysis/operationalAnalysis.vue

<!-- 运营分析 -->
<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/operationalAnalysisIcons/section-analysis-icon.svg',
          name: '路段分析',
          url: 'pages/operationalAnalysis/roadModel/index',
          params: {
            title: '路段分析',
            key: 'sectionAnalysis'
          }
        },
        {
          icon: '/static/icons/operationalAnalysisIcons/arrearage-analysis-icon.svg',
          name: '欠费分析',
          url: 'pages/operationalAnalysis/roadModel/index',
          params: {
            title: '欠费分析',
            key: 'arrearsAnalysis'
          }
        },
        {
          icon: '/static/icons/operationalAnalysisIcons/revenue-analysis-icon.svg',
          name: '营收分析',
          url: 'pages/operationalAnalysis/roadModel/index',
          params: {
            title: '营收分析',
            key: 'revenueAnalysis'
          }
        },
        {
          icon: '/static/icons/operationalAnalysisIcons/shouru-analysis-icon.svg',
          name: '收入分析',
          url: 'pages/operationalAnalysis/roadModel/index',
          params: {
            title: '收入分析',
            key: 'incomeAnalysis'
          }
        },
        {
          icon: '/static/icons/operationalAnalysisIcons/payment-method-icon.svg',
          name: '支付方式占比',
          url: 'pages/operationalAnalysis/roadModel/index',
          params: {
            title: '支付方式占比',
            key: 'paymentMethod'
          }
        }
      ],
      parkMenuList: [
        {
          icon: '/static/icons/operationalAnalysisIcons/parking-lot-analysis-icon.svg',
          name: '停车场分析',
          url: 'pages/operationalAnalysis/parkModel/index',
          params: {
            title: '停车场分析',
            key: 'parkingLotAnalysis'
          }
        },
        {
          icon: '/static/icons/operationalAnalysisIcons/arrearage-analysis-icon.svg',
          name: '欠费分析',
          url: 'pages/operationalAnalysis/parkModel/index',
          params: {
            title: '欠费分析',
            key: 'arrearsAnalysis'
          }
        },
        {
          icon: '/static/icons/operationalAnalysisIcons/revenue-analysis-icon.svg',
          name: '营收分析',
          url: 'pages/operationalAnalysis/parkModel/index',
          params: {
            title: '营收分析',
            key: 'revenueAnalysis'
          }
        },
        {
          icon: '/static/icons/operationalAnalysisIcons/shouru-analysis-icon.svg',
          name: '收入分析',
          url: 'pages/operationalAnalysis/parkModel/index',
          params: {
            title: '收入分析',
            key: 'incomeAnalysis'
          }
        },
        {
          icon: '/static/icons/operationalAnalysisIcons/payment-method-icon.svg',
          name: '支付方式占比',
          url: 'pages/operationalAnalysis/parkModel/index',
          params: {
            title: '支付方式占比',
            key: 'paymentMethod'
          }
        }
      ]
    };
  },
  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 './operationalAnalysis.scss';
</style>