iot-front-ui/src/components/work/meeting/workMeeting.vue

<template>
  <div class="workMeeting">
    <div class="page-query-core">
      <query></query>
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>

    <div style="margin-top: 12px">
      <a-row>
        <a-col :span="18">
          <div class="workMeeting-left">
            <card title="会议室情况">
              <a-row>
                <a-col :span="2">
                  <a-menu
                      style="width: 100%"
                      :default-selected-keys="defaultSelectedKeys"
                      mode="inline"
                      @click="huiyiClick"
                  >
                    <!-- style="width: 100px" -->
                    <!-- :open-keys.sync="openKeys" -->
                    <a-menu-item v-for="(item, index) in tabsArr" :key="index + ''">
                      {{ item.title }}
                    </a-menu-item>
                  </a-menu>
                </a-col>
                <a-col :span="22">
                  <timeline
                      v-for="(item, index) in tabsItemArr"
                      :key="index"
                      v-bind="{
                        startTime: 8,
                        endTime: 17,
                        huiyiInfo: item.shiyong,
                      }"
                      :style="{ height: '60px' }"
                  ></timeline>
                </a-col>
              </a-row>
              <div class="workMeeting-left-detail">
                <a-descriptions :column="2" :colon="false">
                  <a-descriptions-item >
                    <template #label>
                      <span class="workMeeting-left-detail-label">会议主题:</span>
                    </template>
                    <div class="workMeeting-left-detail-content">智慧楼宇产品会议</div>
                  </a-descriptions-item>
                  <a-descriptions-item >
                    <template #label>
                      <span class="workMeeting-left-detail-label">会议配置:</span>
                    </template>
                    <div class="workMeeting-left-detail-content">智慧会议场景配置1</div>
                  </a-descriptions-item>
                  <a-descriptions-item >
                    <template #label>
                      <span class="workMeeting-left-detail-label">预约部门:</span>
                    </template>
                    <div class="workMeeting-left-detail-content">北京电信规划设计院-创新产品研发中心</div>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <template #label>
                      <span class="workMeeting-left-detail-label">会议成本:</span>
                    </template>
                    <div class="workMeeting-left-detail-content" style="background-color: #ffffff">30元/小时</div>
                  </a-descriptions-item>
                  <a-descriptions-item >
                    <template #label>
                      <span class="workMeeting-left-detail-label">参会人员:</span>
                    </template>
                    <div style="width: 100%;vertical-align: top">
                      <div style="display: inline-block;vertical-align: top;margin: 1px 3px">
                        <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                        <div>张三</div>
                      </div>
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item >
                    <template #label>
                      <span class="workMeeting-left-detail-label">会议费用:</span>
                    </template>
                    <div class="workMeeting-left-detail-content" style="background-color: #ffffff">35元/小时</div>
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </card>

          </div>
        </a-col>
        <a-col :span="6">
          <div class="workMeeting-right">
            <card title="成本趋势">
              <template #title-extra>
                <div style="font-size: 18px;color: #4D4D4D;margin-top: 3px">成本集中</div>
              </template>
              <div class="cben">
                <WorkMeetingCostTrend :height="475" />
              </div>
            </card>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import query from "@/components/common/query.vue";
import card from "@/components/common/card.vue";
import timeline from "@/components/common/timeLine.vue";
import WorkMeetingCostTrend from "@/components/work/meeting/component/workMeetingCostTrend.vue";

export default {
  components: {
    query,
    card,
    timeline,
    WorkMeetingCostTrend,
  },
  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: 90},
      ],
      listData: listData,
      coreData: [
        {
          title: "会议室饱和度(月)",
          num: "90%",
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          title: "会议室占用率(天)",
          num: "80%",
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          title: "会议室占用率",
          num: "80%",
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          title: "会议室人均成本(元/人/月)",
          num: 80,
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          type: 1,
          showStar: true,
          title: "值得关注",
          content: "增加会议室",
        },
      ],
      defaultSelectedKeys: ["0"],
      tabsItemArr: [],
      tabsArr: [
        {
          title: "701",
          focus: true,
          content: [
            {
              date: "2023.08.01",
              week: "周一",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.02",
              week: "周二",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.03",
              week: "周三",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.04",
              week: "周四",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.05",
              week: "周五",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
          ],
        },
        {
          title: "702",
          focus: false,
          content: [
            {
              date: "2023.08.01",
              week: "周一",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.02",
              week: "周二",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.03",
              week: "周三",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.04",
              week: "周四",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.05",
              week: "周五",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
          ],
        },
        {
          title: "703",
          content: [
            {
              date: "2023.08.01",
              week: "周一",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.02",
              week: "周二",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.03",
              week: "周三",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.04",
              week: "周四",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
            {
              date: "2023.08.05",
              week: "周五",
              shiyong: [
                {
                  name: "1",
                  startTime: "2023.08.01 08:40:00",
                  endTime: "2023.08.01 10:40:00",
                },
                {
                  name: "2",
                  startTime: "2023.08.01 12:25:00",
                  endTime: "2023.08.01 13:42:00",
                },
                {
                  name: "3",
                  startTime: "2023.08.01 15:21:00",
                  endTime: "2023.08.01 16:22:00",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.changeTab(1);
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    getTimeRange() {
      this.$refs.timeRange.getTimeRange(); // 获取时间段
    },
    huiyiClick(e) {
      this.changeTab(e.key);
    },
    changeTab(index) {
      this.tabsItemArr = this.tabsArr[index].content;
    },
    setEchart1() {
    },
  },
};
</script>


<style lang="less" scoped>
.workMeeting {
  .workMeeting-left {
    background-color: #ffffff;
    padding: 2px 15px;
    border-radius: 4px;
    margin-right: 6px;
    .workMeeting-left-detail {
      margin-top: 30px;
      padding: 0 20px;
      margin-bottom: 12px;
      .workMeeting-left-detail-label {
        vertical-align: top;
        color: #B2B2B2;
      }
      .workMeeting-left-detail-content {
        width: 100%;
        font-size: 12px;
        background-color: #f7f9fa;
        color: #999999;
        padding-left: 12px;
      }
    }
  }
  /deep/ .ant-descriptions-item {
    vertical-align: top;
  }
  /deep/ .ant-descriptions-item-content {
    width: 80%;
    line-height: 24px;
  }
  .workMeeting-right {
    background-color: #ffffff;
    padding: 2px 15px;
    border-radius: 4px;
    margin-left: 6px;
  }
}


</style>