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

<template>
  <div>
    <div class="border-shadow">
      <query></query>
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>
    <a-row :style="{ marginTop: '15px' }">
      <a-col :span="18">
        <div class="left border-shadow">
          <card :title="'会议室管理'"></card>
          <div class="huiyi_ksh">
            <div class="aside">
              <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>
            </div>
            <div class="container">
              <timeline
                v-for="(item, index) in tabsItemArr"
                :key="index"
                v-bind="{
                  startTime: 8,
                  endTime: 17,
                  huiyiInfo: item.shiyong,
                }"
                :style="{ height: '60px' }"
              ></timeline>
            </div>
          </div>
          <div class="huiyi_detailed">
            <a-row>
              <a-col :span="2" class="label"> 会议主题： </a-col>
              <a-col :span="6">
                <a-input></a-input>
              </a-col>
              <a-col :span="2" class="label"> 会议配置： </a-col>
              <a-col :span="6">
                <a-input></a-input>
              </a-col>
              <a-col :span="2" class="label"> 会议预约： </a-col>
              <a-col :span="6">
                <a-input></a-input>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="2" class="label"> 参会人员： </a-col>
              <a-col :span="14"> </a-col>
              <a-col :span="4"> 会议成本：30 元/小时 </a-col>
              <a-col :span="4"> 会议费用：35 元/小时 </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="right border-shadow">
          <card :title="'成本趋势'">
            <div class="cben">
              <div class="total">成本趋势： <span>成本集中</span></div>
              <div
                class="myChart"
                ref="myChart2"
                :style="{ height: '475px' }"
              ></div>
            </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 timeline from "@/components/common/timeLine.vue";
export default {
  components: {
    query,
    card,
    timeline,
  },
  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%",
          unit: "/月",
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          title: "会议室占用率",
          num: "80%",
          unit: "/天",
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          title: "会议室占用率",
          num: "80%",
          unit: "/天",
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          title: "人均成本（会议）",
          num: 80,
          unit: "元/人/月",
          historyDesc: "同比",
          historyNum: 0.4,
        },
        {
          type: 1,
          isHighLight: false,
          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.setEchart2();
    this.changeTab(0);
  },
  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() {},
    setEchart2() {
      let that = this;
      let chart = this.$echarts.init(this.$refs.myChart2);

      let xLabel = ["3.26", "3.27", "3.28", "3.29", "3.30", "3.31"];

      let yData = [
        {
          name: "市场部",
          color: "#5087ec",
          startColor: "rgba(80,135,236,.6)",
          endColor: "rgba(80,135,236,.6)",
          data: ["110", "130", "150", "170", "150", "130"],
        },
        {
          name: "办公室",
          color: "#68bbc4",
          startColor: "rgba(104,187,196,.6)",
          endColor: "rgba(104,187,196,.6)",
          data: ["210", "230", "250", "270", "250", "230"],
        },
        {
          name: "产品中心",
          color: "#60b565",
          startColor: "rgba(96,181,101,.6)",
          endColor: "rgba(96,181,101,.6)",
          data: ["310", "330", "350", "370", "350", "330"],
        },
        {
          name: "智慧院",
          color: "#f2bd42",
          startColor: "rgba(242,189,66,.6)",
          endColor: "rgba(242,189,66,.6)",
          data: ["410", "430", "450", "470", "450", "430"],
        },
        {
          name: "业务一部",
          color: "#ee752f",
          startColor: "rgba(238,117,47,.6)",
          endColor: "rgba(238,117,47,.6)",
          data: ["510", "530", "550", "570", "550", "530"],
        },
        {
          name: "其他部门",
          color: "#d95040",
          startColor: "rgba(217,80,64,.6)",
          endColor: "rgba(217,80,64,.6)",
          data: ["610", "630", "650", "670", "650", "630"],
        },
      ];
      let ySeries = yData.map(function (item) {
        return {
          name: item.name,
          type: "line",
          stack: "Total",
          // symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 8,
          smooth: true,
          lineStyle: {
            normal: {
              width: 2,
              color: item.color, // 线条颜色
            },
          },
          itemStyle: {
            color: item.color,
          },
          areaStyle: {
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new that.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: item.startColor,
                  },
                  {
                    offset: 1,
                    color: item.endColor,
                  },
                ],
                false
              ),
            },
          },
          data: item.data,
        };
      });

      let options = {
        // backgroundColor: "#000237",
        tooltip: {
          trigger: "axis",
          // backgroundColor: "transparent",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(126,199,255,0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(126,199,255,1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(126,199,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        },
        legend: {
          align: "left",
          top: "5%",
          textStyle: {
            color: "#000000",
            fontSize: 16,
          },
        },
        grid: {
          top: "20%",
          left: "15%",
          right: "10%",
          bottom: "10%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#6e7079",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#000000",
                padding: 8,
                fontSize: 14,
              },
              formatter: function (data) {
                return data;
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#233653",
              },
            },
            axisTick: {
              show: true,
              inside: true,
            },
            data: xLabel,
          },
        ],
        yAxis: [
          {
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#e8e8e8",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#233653",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#000000",
                padding: 8,
              },
              formatter: function (value) {
                if (value === 0) {
                  return value;
                }
                return value;
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: ySeries,
      };
      chart.setOption(options);
    },
  },
};
</script>
  

<style lang="less" scoped>
.left {
  padding-right: 15px;
  margin-right: 5px;
}
.right {
  padding-left: 15px;
  margin-left: 5px;
}

.cben {
  font-weight: bold;
  span {
    font-size: 20px;
  }
}

.huiyi_ksh {
  height: 300px;
  .aside {
    width: 100px;
    height: 100%;
    margin-right: 5px;
    display: inline-block;
    overflow: hidden;
    overflow-y: auto;
  }
  .container {
    width: calc(100% - 100px - 5px);
    height: 100%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    overflow-y: auto;
  }
}
.huiyi_detailed {
  height: 205px;
  .ant-row {
    height: 60px;
    line-height: 60px;
    .label {
      text-align: right;
    }
  }
}
</style>