iot-front-ui/src/components/work/print/workPrint.vue

<template>
  <div>
    <div class="page-query-core">
      <query :show="['company', 'floor', 'time']" :floor-options="floorData" :query-data.sync="queryData" :reset="reset" :search="search"></query>
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>
    <a-row :style="{ marginTop: '12px' }">
      <a-col :span="18">
        <div class="left ioc-card-content">
          <card :title="'文印管理'">
            <WorkPrintChart ref="WorkPrintChart" :query-data="queryData" :height="450" />
          </card>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="right ioc-card-content">
          <card :title="'成本趋势'">
            <div style="padding: 0 15px">
              <WorkPrintTrend ref="WorkPrintTrend" :query-data="queryData" :height="450" />
            </div>
          </card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import query from "@/components/common/query.vue";
import card from "@/components/common/card.vue";
import WorkPrintChart from "@/components/work/print/component/workPrintChart.vue";
import WorkPrintTrend from "@/components/work/print/component/workPrintTrend.vue";
import apiWorkPrint from "@/api/work/apiWorkPrint";

export default {
  components: {
    query,
    card,
    WorkPrintChart,
    WorkPrintTrend,
  },
  data() {
    const listData = [];
    for (let i = 0; i < 100; i++) {
      listData.push({
        index: i + 1,
        name: "物理饭",
        department: "技术开发部门",
        time: "2023.02.03 00:00:00",
      });
    }
    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
    return {
      queryData: {
        companyId: '0',
        floorId: '16',
        timeRange: timeRange,
      },
      floorData: [
        {
          value: '16',
          label: "16F"
        },
        {
          value: '17',
          label: "17F"
        },
        {
          value: '18',
          label: "18F"
        },
        {
          value: '19',
          label: "19F"
        },
      ],
      columns: [
        {title: "序号", dataIndex: "index", key: "1", width: 48},
        {title: "姓名", dataIndex: "name", key: "2", width: 60},
        {title: "部门", dataIndex: "department", key: "3", width: 80},
        {title: "最后进入时间", dataIndex: "time", key: "4", width: 90},
      ],
      listData: listData,
      coreData: [
        {
          title: "人均消耗成本(元/天)",
          num: "0",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "人均打印纸张(张/天)",
          num: "0",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "人均打印碳排放(tco2e)",
          num: "0",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "打印人次(人/天)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          type: 1,
          showStar: true,
          title: "值得关注",
          content: "",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000)
    },
    reset() {

    },
    search() {
      this.$util.asyncPromise(
          this.getCoreData(),
          this.$refs.WorkPrintChart.getData(),
          this.$refs.WorkPrintTrend.getData(),
      )
    },
    getCoreData() {
      return apiWorkPrint.getCoreData(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].num = res.list[3].value
        this.coreData[3].historyNum = res.list[3].compare
        this.coreData[4].content = res.worthAttention
      })
    }
  },
};
</script>


<style lang="less" scoped>
.left {
  margin-right: 6px;
  padding-bottom: 15px;
}

.right {
  background-color: #ffffff;
  margin-left: 6px;
  padding-bottom: 15px;
}

</style>