iot-front-ui/src/components/dashboard/portrait/dashboardPortrait.vue

<script>
import Card from "@/components/common/card.vue";
import PersonPortrait from "@/components/dashboard/portrait/personPortrait.vue";
import RestaurantPortrait from "@/components/dashboard/portrait/restaurantPortrait.vue";
import SupermarketPortrait from "@/components/dashboard/portrait/supermarketPortrait.vue";
import ElectricityPortrait from "@/components/dashboard/portrait/electricityPortrait.vue";
import WaterPortrait from "@/components/dashboard/portrait/waterPortrait.vue";
import HotPortrait from "@/components/dashboard/portrait/hotPortrait.vue";
import ColdPortrait from "@/components/dashboard/portrait/coldPortrait.vue";
import MoneyPortrait from "@/components/dashboard/portrait/moneyPortrait.vue";

export default {
  data() {
    return {
      chartHeight: 490,
      currCheck: 'person',
      tagCheck: {
        person: true,
        restaurant: false,
        supermarket: false,
        electricity: false,
        water: false,
        hot: false,
        cold: false,
        money: false,
      }
    }
  },
  components: {
    Card,
    PersonPortrait,
    RestaurantPortrait,
    SupermarketPortrait,
    ElectricityPortrait,
    WaterPortrait,
    HotPortrait,
    ColdPortrait,
    MoneyPortrait,
  },
  methods: {
    handleTagSelect(item) {
      for (const key in this.tagCheck) {
        this.tagCheck[key] = false;
      }
      this.currCheck = item;
      this.tagCheck[item] = true;
    }
  }
}
</script>

<template>
  <div class="dashboardPortrait">
    <Card title="统计画像">
      <div style="width: 97%;margin: 0 auto">
        <a-divider style="margin: 10px 0;padding: 0;"></a-divider>
      </div>
      <div class="dashboardPortrait-select">
        <a-checkable-tag v-model="tagCheck.person" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('person')">
          <span class="dashboardPortrait-select-text">人员</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.restaurant" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('restaurant')">
          <span class="dashboardPortrait-select-text">餐厅</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.supermarket" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('supermarket')">
          <span class="dashboardPortrait-select-text">商超</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.electricity" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('electricity')">
          <span class="dashboardPortrait-select-text">用电</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.water" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('water')">
          <span class="dashboardPortrait-select-text">用水</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.hot" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('hot')">
          <span class="dashboardPortrait-select-text">用热</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.cold" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('cold')">
          <span class="dashboardPortrait-select-text">用冷</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.money" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('money')">
          <span class="dashboardPortrait-select-text">资产</span>
        </a-checkable-tag>
      </div>
      <div class="dashboardPortrait-body">
        <PersonPortrait :chartHeight="chartHeight" v-if="currCheck==='person'"></PersonPortrait>
        <RestaurantPortrait :chartHeight="chartHeight" v-if="currCheck==='restaurant'"></RestaurantPortrait>
        <SupermarketPortrait :chartHeight="chartHeight" v-if="currCheck==='supermarket'"></SupermarketPortrait>
        <ElectricityPortrait :chartHeight="chartHeight" v-if="currCheck==='electricity'"></ElectricityPortrait>
        <WaterPortrait :chartHeight="chartHeight" v-if="currCheck==='water'"></WaterPortrait>
        <HotPortrait :chartHeight="chartHeight" v-if="currCheck==='hot'"></HotPortrait>
        <ColdPortrait :chartHeight="chartHeight" v-if="currCheck==='cold'"></ColdPortrait>
        <MoneyPortrait :chartHeight="chartHeight" v-if="currCheck==='money'"></MoneyPortrait>
      </div>
    </Card>
  </div>
</template>

<style lang="less" scoped>
.dashboardPortrait {
  width: 100%;
  height: 100%;
  .dashboardPortrait-select {
    padding: 8px 15px;
    .dashboardPortrait-select-tag {
      border: 1px solid #F0F1F2;
      border-radius: 12px;
      padding: 1px 12px;
      margin-right: 16px;
      cursor: pointer;
    }
    .ant-tag-checkable-checked {
      .dashboardPortrait-select-text {
        color: white;
      }
    }
    .dashboardPortrait-select-text {
      color: #B3B3B3;
    }
  }
  .dashboardPortrait-body {
    padding: 8px 12px;
  }
}
</style>