iot-front-ui/src/components/work/bus/workBus.vue

<template>
  <div>
    <div class="page-query-core">
      <query :show="['company', 'time']" :query-data="queryData"  :reset="reset" :search="search"></query>
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>
    <a-row :style="{ marginTop: '15px' }">
      <a-col :span="18">
        <div class="left ioc-card-content">
          <card :title="'公车管理'">
            <WorkBusChart ref="WorkBusChart" :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">
              <WorkBusTrend ref="WorkBusTrend" :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 WorkBusChart from "@/components/work/bus/component/workBusChart.vue";
import WorkBusTrend from "@/components/work/bus/component/workBusTrend.vue";
import apiWorkFloor from "@/api/work/apiWorkFloor";
import ApiWorkBus from "@/api/work/apiWorkBus";

export default {
  components: {
    query,
    card,
    WorkBusChart,
    WorkBusTrend,
  },
  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',
        timeRange: timeRange,
      },
      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.WorkBusChart.getData(),
          this.$refs.WorkBusTrend.getData(),
      )
    },
    getCoreData() {
      return ApiWorkBus.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;
}

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

</style>