parking_operation/pages/dataOverview/todayOverview/todayOverview.vue

<!-- 今日概况 -->
<template>
  <view class="overview">
    <!-- 顶部切换停车场和路段 -->
    <view class="overview-tabs">
      <view
        class="overview-tabs-item"
        v-for="(item, index) in tabs"
        :key="index"
        :class="{ active: tabCur === item.key }"
        @click="tabCur = item.key"
      >
        <text>{{ item.label }}</text>
      </view>
    </view>
    <template v-if="tabCur === 'road'">
      <view class="overview-content">
        <view class="overview-content-item" v-for="(item, index) in roadObj.list" :key="index">
          <view class="overview-content-item-left">
            <view>
              <text class="title">{{ item.label }}（{{ item.unit }}）</text>
            </view>
            <view>
              <count-up
                :num="roadData[item.key] || 0"
                color="#1767F2"
                width="20"
                height="42"
                fontSize="30"
              />
            </view>
          </view>
          <view class="overview-content-item-right">
            <template v-if="roadData[item.flag]">
              <u--image
                v-if="roadData[item.flag].indexOf('-') === -1"
                :showLoading="true"
                src="/static/icons/upward-trend-icon.svg"
                width="60px"
                height="35px"
              />
              <u--image
                v-if="roadData[item.flag].indexOf('-') > -1"
                :showLoading="true"
                src="/static/icons/downward-trend-icon.svg"
                width="60px"
                height="35px"
              />
            </template>
						<template v-else>--</template>
          </view>
        </view>
      </view>
    </template>
		<template v-if="tabCur === 'park'">
      <view class="overview-content">
        <view class="overview-content-item" v-for="(item, index) in roadObj.list" :key="index">
          <view class="overview-content-item-left">
            <view>
              <text class="title">{{ item.label }}（{{ item.unit }}）</text>
            </view>
            <view>
              <count-up
                :num="parkData[item.key] || 0"
                color="#1767F2"
                width="20"
                height="42"
                fontSize="30"
              />
            </view>
          </view>
          <view class="overview-content-item-right">
            <template v-if="parkData[item.flag]">
              <u--image
                v-if="parkData[item.flag].indexOf('-') === -1"
                :showLoading="true"
                src="/static/icons/upward-trend-icon.svg"
                width="60px"
                height="35px"
              />
              <u--image
                v-if="parkData[item.flag].indexOf('-') > -1"
                :showLoading="true"
                src="/static/icons/downward-trend-icon.svg"
                width="60px"
                height="35px"
              />
            </template>
						<template v-else>--</template>
          </view>
        </view>
      </view>
    </template>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import countUp from '@/components/p-countUp/countUp.vue';
export default {
  components: {
    countUp
  },
  data() {
    return {
      tabs: [
        { key: 'road', label: '路段' },
        { key: 'park', label: '停车场' }
      ],
      tabCur: 'road',
      roadObj: {
        list: [
          { key: 'amtIn', label: '今日营收', unit: '元', flag: 'linkRatIn' },
          { key: 'amtOwe', label: '今日欠费', unit: '元', flag: 'linkRatOwe' },
          { key: 'countQr', label: '今日停车', unit: '次', flag: 'linkRatQr' },
          {
            key: 'countVehicle',
            label: '今日扫码',
            unit: '次',
            flag: 'linkRatVehicle'
          }
        ]
      },
      roadData: {},
			parkData: {}
    };
  },
  onShow() {
    this.getTodayData();
    this.getRoadData();
  },
  methods: {
    /**
     * 获取今日路段概况
     */
    getTodayData() {
      uni.$u.api.todayOverviewApi.getTodayDataApi().then((res) => {
        if (res.code === 200) {
          this.roadData = res.data;
        } else {
          this.$refs.uToast.show({
            loading: true,
            message: res.msg || '获取今日概况失败!',
            type: 'error'
          });
        }
      });
    },
    /**
     * 获取今日停车场情况
     */
    getRoadData() {
      uni.$u.api.todayOverviewApi.getParkDataApi().then((res) => {
        if (res.code === 200) {
          this.parkData = res.data;
        } else {
          this.$refs.uToast.show({
            loading: true,
            message: res.msg || '获取路段概况失败!',
            type: 'error'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
page {
  min-height: calc(100vh - 44px);
  background-color: #1767f2;
}
</style>

<style lang="scss" scoped>
@import './todayOverview.scss';
</style>