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

<script>
import CoreData from "@/components/common/coreData.vue";
import SupermarketTrendChart from "@/components/dashboard/portrait/supermarket/supermarketTrendChart.vue"
import api from "@/api/dashboard/apiDashboard";
export default {
  data() {
    let range = this.$util.dateUtil.getNearlyMonthRange();
    return {
      queryData: {
        companyId: '0',
        deptId: '0',
        timeRange: range
      },
      coreData: [
        {
          type: 0,
          title: '商超消费金额(元)',
          num: 0,
          historyDesc: '同比',
          historyNum: '0'
        },
        {
          type: 0,
          title: '商超消费订单(单)',
          num: 0,
          historyDesc: '同比',
          historyNum: '0'
        },
        {
          type: 0,
          title: '商超平均单价(元/单)',
          num: 0,
          historyDesc: '同比',
          historyNum: '0'
        },
        {
          type: 1,
          title: '第三方结算方式 费用(元)',
          content: '0'
        },
        {
          type: 1,
          title: '值得关注',
          showStar: true,
          content: ''
        },
      ]
    }
  },
  props: {
    chartHeight: Number
  },
  components: {
    CoreData,
    SupermarketTrendChart
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getCoreData(this.queryData)
    },
    getCoreData() {
      api.getSuperMarketCoreData(this.queryData).then(res=>{
        this.coreData[0].num = res.list[0].value
        this.coreData[0].historyNum = res.list[0].compare
        this.coreData[1].num = res.list[1].value
        this.coreData[1].historyNum = res.list[1].compare
        this.coreData[2].num = res.list[2].value
        this.coreData[2].historyNum = res.list[2].compare
        this.coreData[3].content = res.list[3].value
        this.coreData[4].content = res.worthAttention
      })
    },
  }
}
</script>

<template>
  <div class="supermarketPortrait">
    <div class="portrait-coreData">
      <CoreData :data-list="coreData"></CoreData>
    </div>
    <div style="padding: 15px">
      <SupermarketTrendChart :height="chartHeight" :query-data="queryData"></SupermarketTrendChart>
    </div>
  </div>
</template>

<style lang="less" scoped>
.supermarketPortrait {

}
</style>