iot-front-ui/src/components/business/space/space.vue

<template>
  <div>
    <div class="page-query-core">
      <Query
        :show="['company', 'time']"
        :query-data.sync="queryData"
        :reset="reset"
        :search="search"
        style="
          background: #fff;
          height: 60px;
          padding: 10px;
          border-radius: 5px;
          margin-bottom: 10px;
        "
      ></Query>
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>
    <a-row style="margin-top: 12px">
      <a-col :span="18">
        <div class="left ioc-card-content">
          <card :title="'空间分析'">
            <div style="padding: 8px" class="space-image">
              <img :src="requireImg('business/联通img.png')" width="100%" />
            </div>
          </card>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="right ioc-card-content">
          <card :title="'空间成本'">
            <div style="height: 40px">
              <span
                style="
                  font-size: 16px;
                  font-weight: 400;
                  color: #b2b2b2;
                  margin-left: 25%;
                "
                >人均空间成本</span
              >
              <span style="padding: 0 10%; font-size: 20px; color: #4d4d4d"
                >36</span
              >
              <span style="color: #b2b2b2">元/m2/人</span>
            </div>
            <div style="padding: 0 15px">
              <SpaceCostChart
                ref="SpaceCostChart"
                :query-data="queryData"
                :height="540"
              />
            </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 { requireImg } from "@/utils/requireImg";
import SpaceCostChart from "@/components/business/space/charts/spaceCostChart.vue";
import apiOperationSpace from "@/api/operation/apiOperationSpace";

export default {
  components: {
    query,
    card,
    SpaceCostChart,
  },
  data() {
    const listData = [];
    for (let i = 0; i < 100; i++) {
      listData.push({
        index: i + 1,
        name: "物理饭",
        department: "技术开发部门",
        time: "2023.02.03 00:00:00",
      });
    }
    return {
      queryData: {
        companyId: "0",
        timeRange: this.$util.dateUtil.getNearlyMonthRange(),
      },
      coreData: [
        {
          title: "自用工位分配率",
          num: "",
          unit: "%",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "会议室使用率",
          num: "",
          unit: "%",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "流动工位总数",
          num: "",
          unit: "%",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "固定工位总数",
          num: "0",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "休闲/办公面积(m2)",
          num: "0",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          type: 1,
          showStar: true,
          title: "值得关注",
          content: "",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    requireImg,
    init() {
      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000);
    },
    reset() {},
    search() {
      this.$util.asyncPromise(
        this.getCoreData(),
        this.$refs.SpaceCostChart.getData()
      );
    },
    tabChange(index) {
      let that = this;
      setTimeout(() => {
        switch (index) {
          case "1":
            // that.$refs.myChart1 = that.clearECharts(that.$refs.myChart1);
            that.setEchart1();
            break;
          case "2":
            // that.$refs.myChart2 = that.clearECharts(that.$refs.myChart2);
            that.setEchart2();
            break;
        }
      }, 100);
    },
    getCoreData() {
      return apiOperationSpace.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].num = res.list[4].value;
        this.coreData[4].historyNum = res.list[4].compare;
        this.coreData[5].content = res.worthAttention;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.space-image {
  //background-image: url("@/assets/images/business/联通img.png");
  //background-position: 50% 50%;
  //background-repeat: no-repeat;
  height: 550px;
  //background-size: 100% auto;
}
.left {
  margin-right: 6px;
}

.right {
  margin-left: 6px;
}

.cben {
  font-weight: bold;

  span {
    font-size: 20px;
  }
}
</style>