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

<template>
  <div class="workMeeting">
      <div class="page-query-core">
          <query
                  :show="['company', 'floor', 'time']"
                  :query-data.sync="queryData"
                  :reset="reset"
                  :floor-options="floorOptions"
                  :search="search"
          ></query>
      </div>
    <div class="page-query-core">
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>

    <div style="margin-top: 12px">
      <a-row>
        <a-col :span="24">
          <div class="workMeeting-left ioc-card-content">
            <card title="会议分析" v-show="chartShow.timeLine" style="padding-bottom: 15px">
              <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" -->
                    <template v-for="(value, key) in roomInfo">
                      <a-menu-item
                        v-for="item in value"
                        :key="item.value"
                        v-if="key == queryData.floorId"
                      >
                        {{ item.value }}
                      </a-menu-item>
                    </template>
                  </a-menu>
                </a-col>
                <a-col :span="3">
                  <div class="week-box" v-for="n in timeArr" :key="n.weekday">
                    <div class="week">{{ n.weekday }}</div>
                    <div class="date">{{ n.date }}</div>
                  </div>
                </a-col>
                <a-col :span="19">
                  <timeline
                    v-if="showMeetingLine"
                    v-for="(value, key, index) in meetingInfo"
                    :key="index"
                    :select="currCheckMeeting"
                    v-bind="{
                      startTime: 8,
                      endTime: 18,
                      huiyiInfo: value,
                    }"
                    :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">
                      {{ currMeeting.subject }}
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <template #label>
                      <span class="workMeeting-left-detail-label"
                        >会议配置:</span
                      >
                    </template>
                    <div
                      class="workMeeting-left-detail-content"
                      v-if="currMeeting.subject"
                    >
                      智慧场景策略配置
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <template #label>
                      <span class="workMeeting-left-detail-label"
                        >预约部门:</span
                      >
                    </template>
                    <div class="workMeeting-left-detail-content">
                      {{ deptData[currMeeting.deptId] }}
                    </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"
                      v-if="currMeeting.subject"
                    >
                      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"
                      v-if="currMeeting.subject"
                    >
                      <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
                        style="
                          display: inline-block;
                          vertical-align: top;
                          margin: 1px 3px;
                        "
                      >
                        <a-avatar
                          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        />
                        <div>张雪峰</div>
                      </div>
                      <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
                        style="
                          display: inline-block;
                          vertical-align: top;
                          margin: 1px 3px;
                        "
                      >
                        <a-avatar
                          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        />
                        <div>李阳</div>
                      </div>
                      <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"
                      v-if="currMeeting.subject"
                    >
                      35元/小时
                    </div>
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </card >
            <card title="会议分析" v-if="chartShow.usageAllPanel" style="padding-bottom: 15px">
              <MeetingTimeCharts
                :height="300"
                :queryData="queryData"
                ref="meetingTimeRef"
              ></MeetingTimeCharts>
            </card>
            <card title="会议分析" v-if="chartShow.usageFloorPanel" style="padding-bottom: 15px">
              <MeetingTimeFloorCharts
                :height="300"
                :queryData="queryData"
                ref="meetingTimeFloorRef"
              ></MeetingTimeFloorCharts>
            </card>
          </div>
        </a-col>
        <a-col :span="24" style="margin-top: 12px">
          <div class="workMeeting-right ioc-card-content">
            <card title="成本趋势" moduleType="智慧办公" mainTitleSize="20px">
              <template #sub-title>
                <div style="font-size: 16px; color: #4d4d4d; margin-top: 10px">
                  成本趋势: 成本集中
                </div>
              </template>
              <div class="cben" style="margin-bottom: 15px">
                <WorkMeetingCostTrend
                  ref="WorkMeetingCostTrend"
                  :queryData="queryData"
                  :height="460"
                />
              </div>
            </card>
          </div>
        </a-col>
        <!-- <a-col :span="24" style="margin-top: 12px">
          <div
            class="workMeeting-left ioc-card-content"
            style="margin-bottom: 15px"
          >
            <card>
              <MeetingTimeCharts
                :height="300"
                :queryData="queryData"
              ></MeetingTimeCharts>
            </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";
import MeetingTimeCharts from "@/components/scene/meeting/chart/meetingTimeCharts.vue";
import MeetingTimeFloorCharts from "@/components/scene/meeting/chart/meetingTimeFloorCharts.vue";
import apiWorkMeeting from "@/api/work/apiWorkMeeting";

export default {
  components: {
    query,
    card,
    timeline,
    WorkMeetingCostTrend,
    MeetingTimeCharts,
    MeetingTimeFloorCharts,
  },
  data() {
    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
    return {
      showMeetingLine: false,
      timeArr: [
        {
          id: 0,
          weekday: "周一",
          date: "",
        },
        {
          id: 1,
          weekday: "周二",
          date: "",
        },
        {
          id: 2,
          weekday: "周三",
          date: "",
        },
        {
          id: 3,
          weekday: "周四",
          date: "",
        },
        {
          id: 4,
          weekday: "周五",
          date: "",
        },
      ],
      deptData: {
        0: "业务一部",
        1: "业务二部",
        2: "业务三部",
      },
      queryData: {
        companyId: "0",
        floorId: "0",
        timeRange: timeRange,
      },
      currRoom: "701",
      floorOptions: [
        {
          value: "7",
          label: "7F",
        },
        {
          value: "8",
          label: "8F",
        },
        {
          value: "9",
          label: "9F",
        },
        //{
        //  value: '',
        //  label: "全部"
        //},
        //{
        //  value: '1',
        //  label: "1F"
        //},
        //{
        //  value: '10',
        //  label: "10F"
        //},
        //{
        //  value: '11',
        //  label: "11F"
        //},{
        //  value: '12',
        //  label: "12F"
        //},{
        //  value: '15',
        //  label: "15F"
        //},{
        //  value: '16',
        //  label: "16F"
        //},{
        //  value: '17',
        //  label: "17F"
        //},{
        //  value: '18',
        //  label: "18F"
        //},{
        //  value: '19',
        //  label: "19F"
        //},{
        //  value: '20',
        //  label: "20F"
        //},{
        //  value: '30',
        //  label: "30F"
        //},
      ],
      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 },
      ],
      coreData: [
        {
          title: "会议室饱和度",
          num: "",
          unit: "%",
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          title: "会议室占用率",
          num: "",
          unit: "%",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "会议室成本(元)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "会议室人均成本(元/人)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          type: 1,
          showStar: true,
          title: "值得关注",
          content: "",
        },
      ],
      defaultSelectedKeys: ["701", "801", "901"],
      tabsItemArr: [],
      roomInfo: {
        7: [
          {
            label: "701",
            value: "701",
          },
          {
            label: "702",
            value: "702",
          },
          {
            label: "703",
            value: "703",
          },
        ],
        8: [
          {
            label: "801",
            value: "801",
          },
          {
            label: "802",
            value: "802",
          },
          {
            label: "803",
            value: "803",
          },
        ],
        9: [
          {
            label: "901",
            value: "901",
          },
          {
            label: "902",
            value: "902",
          },
          {
            label: "903",
            value: "903",
          },
        ],
      },
      meetingInfo: {},
      currMeeting: {},
      chartShow: {
        timeLine: false,
        usageFloorPanel: false,
        usageAllPanel: true,
      },
    };
  },
  mounted() {
    this.init();
    this.setDate();
  },
  watch: {},
  methods: {
    init() {
      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000);
    },
    currCheckMeeting(val) {
      this.currMeeting = val;
    },
    setDate() {
      this.timeArr = this.timeArr.map((v) => {
        return {
          id: v.id,
          weekday: v.weekday,
          date: this.$moment().weekday(v.id).format("YYYY/MM/DD"),
        };
      });
      // for(let i=1;i<=5;i++){
      //   this.timeArr.push({
      //     weekday:this.$moment().weekday(i).format(),
      //     date:this.$moment().weekday(i).format("YYYY/MM/DD")
      //   })
      // }
    },
    reset() {},
    search() {
        this.chartShow.timeLine = false;
        this.chartShow.usageAllPanel = false;
        this.chartShow.usageFloorPanel = false;
      // 楼层选全部时展示使用时长面板
      if (this.queryData.floorId === "0") {
        this.chartShow.usageAllPanel = true;
        this.$nextTick(() => {
          this.$util.asyncPromise(
            this.getCoreData(),
            this.$refs.WorkMeetingCostTrend.getData(),
            this.$refs.meetingTimeRef.getData()
            // this.getMeetingRecordData()
          );
        });
      } else {
        let start = this.$moment(this.queryData.timeRange.startDate);
        let end = this.$moment(this.queryData.timeRange.endDate);
        let diff = end.diff(start, "days");
        if (diff > 1) {
          this.chartShow.usageFloorPanel = true;
          this.$nextTick(() => {
            this.$util.asyncPromise(
              this.getCoreData(),
              this.$refs.WorkMeetingCostTrend.getData(),
              this.$refs.meetingTimeFloorRef.getData()
              // this.getMeetingRecordData()
            );
          });
        } else {
          this.chartShow.timeLine = true;
          this.$util.asyncPromise(
            this.getCoreData(),
            this.$refs.WorkMeetingCostTrend.getData(),
            this.getMeetingRecordData()
          );
        }
        // 楼层选择具体楼层时 -- 起止时间差大于一天
        // 楼层选择具体楼层时，起止时间差小于一天
      }
    },
    // 会议记录
    getMeetingRecordData() {
      this.showMeetingLine = false;
      let params = {};
      Object.assign(params, this.queryData);
      params.timeRange = this.$util.dateUtil.getCurrWeekRange();
      let resultObj = {};
      let app = this;
      this.timeArr.forEach((i) => {
        resultObj[i.date] = [];
      });
      this.meetingInfo = resultObj;
      return apiWorkMeeting
        .getMeetingRecords(params)
        .then((res) => {
          let arr = res.filter((item) => item.room == this.currRoom);
          for (let i = 0; i < arr.length; i++) {
            let obj = app.$moment(arr[i].startTime).format("yyyy/MM/DD");
            resultObj[obj].push(arr[i]);
          }
          this.meetingInfo = resultObj;
          this.showMeetingLine = true;
        })
        .catch((err) => {
          this.showMeetingLine = true;
        });
    },
    huiyiClick(e) {
      //this.changeTab(e.key);
      this.currRoom = e.key;
      this.getMeetingRecordData();
    },
    //changeTab(index) {
    //  this.tabsItemArr = this.tabsArr[index].content;
    //},
    // 核心指标
    getCoreData() {
      return apiWorkMeeting.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>
.workMeeting {
  .workMeeting-left {
    background-color: #ffffff;
    padding: 2px 15px;
    border-radius: 4px;
    // margin-right: 6px;
    .ant-col-3 {
      .week-box {
        height: 60px;
        width: 100%;
        position: relative;
        color: rgb(77, 77, 77, 0.2);
        .week {
          width: 80%;
          height: 50%;
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          align-items: center;
        }
        .date {
          width: 80%;
          height: 50%;
          position: absolute;
          right: 0;
          bottom: 0;
          margin: 0 auto;
        }
      }
    }
    .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>