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

<script>
import CoreData from "@/components/common/coreData.vue";
import PersonTrendChart from "@/components/dashboard/portrait/person/personTrendChart.vue";
export default {
  data() {
    return {
      coreData: [
        {
          type: 0,
          title: '月总用水量(m³)',
          num: 2000,
          historyDesc: '同比',
          historyNum: '0.4'
        },
        {
          type: 0,
          title: '今日用水总量(m³)',
          num: 200,
          historyDesc: '同比',
          historyNum: '0.4'
        },
        {
          type: 0,
          title: '今日用水趋势',
          num: 30,
          unit: '%',
          historyDesc: '同比',
          historyNum: '0.4'
        },
        {
          type: 0,
          title: '人均用水量(m³)',
          num: 80,
          historyDesc: '环比',
          historyNum: '0.4'
        },
        {
          type: 1,
          isHighLight: false,
          title: '值得关注',
          content: ''
        },
      ]
    }
  },
  props: {
    chartHeight: Number
  },
  components: {
    CoreData,
    PersonTrendChart,
  }
}
</script>

<template>
  <div class="personPortrait">
    <div class="portrait-coreData">
      <CoreData :data-list="coreData"></CoreData>
    </div>
    <div style="padding: 0 15px 15px;">
      <PersonTrendChart :height="chartHeight"></PersonTrendChart>
    </div>
  </div>
</template>

<style lang="less" scoped>
.personPortrait {
  width: 100%;
  .portrait-coreData {
    margin-bottom: 15px;
  }
}
</style>