iot-front-ui/src/components/work/overview/workOverview.vue

<template>
  <div>
    <div class="border-shadow">
      <query></query>
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>
    <a-row :style="{ marginTop: '15px', height: '835px' }">
      <a-col :span="18">
        <div class="left border-shadow">
          <card :title="'房间分布'"></card>
          <div class="fjfbt"></div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="right border-shadow">
          <card :title="'当日门禁进出人员'"> </card>
          <div class="drmj_list">
            <div class="total">累计进入： <span>400</span>人</div>
            <a-table
              :rowKey="
                (record, index) => {
                  return index;
                }
              "
              :columns="columns"
              :data-source="listData"
              :pagination="false"
              :scroll="{ y: 635 }"
            >
            </a-table>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import query from "@/components/common/query.vue";
import card from "@/components/common/card.vue";
export default {
  components: {
    query,
    card,
  },
  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 {
      options: [
        {
          value: 1,
          name: "中讯1",
        },
        {
          value: 2,
          name: "中讯2",
        },
      ],
      floors: [
        {
          value: 7,
          name: "7层",
        },
        {
          value: 8,
          name: "8层",
        },
      ],
      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: 95 },
      ],
      listData: listData,
      coreData: [
        {
          title: "本层工位使用率",
          num: "90%",
          unit: "",
          // historyDesc: "同比",
          // historyNum: 0.4,
        },
        {
          title: "工位总数",
          num: 500,
          unit: "个",
          // historyDesc: "同比",
          // historyNum: 0.4,
        },
        {
          title: "办公区面积",
          num: 380,
          unit: "m<sup>2</sup>",
          // historyDesc: "同比",
          // historyNum: -0.4,
        },
        {
          title: "会议室面积",
          num: 80,
          unit: "m<sup>2</sup>",
          // historyDesc: "同比",
          // historyNum: 0.4,
        },
        {
          title: "领导办公室面积",
          num: 40,
          unit: "m<sup>2</sup>",
          // historyDesc: "同比",
          // historyNum: 0.4,
        },
        {
          title: "其他区域面积",
          num: 20,
          unit: "m<sup>2</sup>",
          // historyDesc: "同比",
          // historyNum: 0.4,
        },
        // {
        //   type: 1,
        //   isHighLight: false,
        //   title: "值得关注",
        //   content: "testhnjlkjn",
        // },
      ],
    };
  },
  mounted() {},
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    getTimeRange() {
      this.$refs.timeRange.getTimeRange(); // 获取时间段
    },
  },
};
</script>
  

<style lang="less" scoped>
.left {
  padding-right: 15px;
  margin-right: 5px;
}
.right {
  padding-left: 15px;
  margin-left: 5px;
}
.fjfbt,
.drmj_list {
  height: 50px;
  height: 775px;
  .total {
    font-size: 16px;
    font-weight: bold;
    height: 50px;
    span {
      font-size: 26px;
    }
  }
}
</style>