v3_yyz/src/components/left.vue

<template>
  <el-aside class="left">
    <div class="left_top">
      <div class="title" :style="{ background: `url(${frame})` }">
        <div class="text">教室分类统计</div>
      </div>
      <div class="content">
        <div id="myChart"></div>
        <div class="list">
          <div class="item" v-for="(item, index) in classRoomCount" :key="index" :style="{
        borderRight:
          index == 0
            ? '2px solid #0BF'
            : index == 1
              ? '2px solid #00EB7D'
              : index == 2
                ? '2px solid #FB0'
                : '',
      }">
            <!-- <i :style="{ backgroundColor: item.color }"></i> -->
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"
              v-if="index === 0">
              <path
                d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.55 7C4.55 8.3531 5.6469 9.45 7 9.45C8.3531 9.45 9.45 8.3531 9.45 7C9.45 5.6469 8.3531 4.55 7 4.55C5.6469 4.55 4.55 5.6469 4.55 7Z"
                fill="#00BBFF" />
            </svg>
            <svg v-if="index === 1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
              fill="none">
              <path
                d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.55 7C4.55 8.3531 5.6469 9.45 7 9.45C8.3531 9.45 9.45 8.3531 9.45 7C9.45 5.6469 8.3531 4.55 7 4.55C5.6469 4.55 4.55 5.6469 4.55 7Z"
                fill="#00EB7D" />
            </svg>
            <svg v-if="index === 2" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
              fill="none">
              <path
                d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.55 7C4.55 8.3531 5.6469 9.45 7 9.45C8.3531 9.45 9.45 8.3531 9.45 7C9.45 5.6469 8.3531 4.55 7 4.55C5.6469 4.55 4.55 5.6469 4.55 7Z"
                fill="#FFBB00" />
            </svg>
            <div class="descr">
              <span>{{ item.name }}</span>
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="left-center">
      <div class="title" :style="{ background: `url(${frame})` }">
        <div class="text">教室统计</div>
      </div>
      <div class="content">
        <div class="content-item">
          <div class="content-item-header">
            <div class="item-header-title">多媒体教室总数</div>
            <div class="item-header-total-num">
              <countTo :startVal="0" :endVal="summaryStatistic.mdeiaClassroomCount" :decimals="0" :duration="3000">
              </countTo>
              <span>间</span>
            </div>
          </div>
          <div class="content-item-body">
            <img class="body-left-icon" src="/public/img/duomeiti-left-icon.png" alt="" srcset="" />
            <div class="body-right-text">
              <div class="total-box">
                <div>总物联数量</div>
                <div class="num1">
                  <countTo :startVal="0" :endVal="summaryStatistic.mediaClassroomDeviceCount" :decimals="0"
                    :duration="3000">
                  </countTo><span>个</span>
                </div>
              </div>
              <div class="online-box">
                <div>在线物联数量</div>
                <div class="num2">
                  <countTo :startVal="0" :endVal="summaryStatistic.mediaClassroomOnlineDeviceCount" :decimals="0"
                    :duration="3000">
                  </countTo><span>个</span>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="content-item">
          <div class="content-item-header">
            <div class="item-header-title">智慧教室总数</div>
            <div class="item-header-total-num">
                <countTo :startVal="0" :endVal="95" :decimals="0" :duration="3000">

              </countTo><span>间</span>
            </div>
          </div>
          <div class="content-item-body">
            <img class="body-left-icon" src="/public/img/zhihuijiaoshi-left-icon.png" alt="" srcset="" />
            <div class="body-right-text">
              <div class="total-box">
                <div>总物联数量</div>
                <div class="num1">
                  <countTo :startVal="0" :endVal="summaryStatistic.wiseClassroomDeviceCount" :decimals="0"
                    :duration="3000">
                  </countTo><span>个</span>
                </div>
              </div>
              <div class="online-box">
                <div>在线物联数量</div>
                <div class="num2">
                  <countTo :startVal="0" :endVal="summaryStatistic.wiseClassroomOnlineDeviceCount" :decimals="0"
                    :duration="3000">
                  </countTo><span>个</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      
      </div>
    </div> -->

    <div class="left-bottom">
      <div class="title" :style="{ background: `url(${frame})` }">
        <div class="text">教室使用明细</div>
      </div>
      <div class="usering-free-container">
        <div class="usering-free">
          <div class="usering-box">
            <div class="text">
              使用中：{{ getPercentage || 0 }}%
              <span class="num">{{ occupiedClassroomsCount || 0 }}间</span>
            </div>
          </div>
          <div class="free-box">
            <div class="text">
              空闲中：{{ (100 - getPercentage).toFixed(2) || 0 }}%
              <span class="num">{{ classRoom.length - occupiedClassroomsCount || 0 }}间</span>
            </div>
          </div>
        </div>
        <el-progress :percentage="getPercentage" :show-text="false" color="#1BCEFF" />
      </div>
      <div class="search-container">
        <el-input v-model="searchData" clearable placeholder="请输入大楼名称、教室名称" />
        <el-button type="primary" :icon="Search" @click="searchHandel" />
      </div>

      <div class="content" style="height: 100%; overflow: hidden">
        <div class="table">
          <div class="dropdown-container">
            <el-dropdown trigger="click" @command="clickBuildingsropdown" max-height="150" popper-class="popper-class">
              <span class="dropdown-name">
                <div class="cureet-text" :title="cureetBuild">{{ cureetBuild }}</div>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
                <!-- <Edit style="width: 1em; height: 1em; margin-right: 8px" /> -->
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="item.gis_building_code" v-for="(item, index) in buildings" :key="index">{{
        item.building_name }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown trigger="click" @command="clickCategoryTypedropdown" max-height="150">
              <span class="dropdown-name">
                {{ category || "全部类型" }}
                <el-icon>
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="item.category" v-for="(item, index) in categoryType" :key="index">{{
        item.category }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown trigger="click" @command="clickLeafsdropdown" max-height="150">
              <span class="dropdown-name">
                {{ cureetLeaf }}
                <el-icon>
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="item.leaf" v-for="(item, index) in leafs" :key="index">{{ item.leaf_name
                    }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown trigger="click" @command="clickStatusesdropdown" max-height="150">
              <span class="dropdown-name">
                {{ cureetStatus }}
                <el-icon>
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="item.status_code" v-for="(item, index) in statuses" :key="index">{{
        item.status_name }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <!-- <div
            ref="testMain"
            style="height: 442px; overflow: scroll; padding-top: 6px"
            class="scroll"
          > -->
          <!-- <div v-if="classRoomList.length > 0" style="width: 100%; height: 100%"> -->
          <div class="scroll-container" ref="scrollContainerRef">
            <div :style="{
        height: scrollContainerHeight + 'px',
        overflow: 'hidden',
        paddingTop: '10px',
      }" v-if="classRoomList.length > 0 && isShhow">
              <vue-auto-scroll :steep="0.5" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50">
                <div class="li" v-for="(item, index) in classRoomList" :key="index">
                  <div class="list-item">
                    <div class="class-status-btn-container">
                      <div class="left-class-status">
                        <div style="margin-right: 16px">
                          {{ item.classroom_name }}
                        </div>
                        <Tag :text="item.status_code"></Tag>
                      </div>
                      <div class="right-btn" @click.prevent="handleRoom(item)">
                        查看
                      </div>
                    </div>

                    <div class="item-content">
                      <div class="item-content-left">
                        <div class="position" :title="item.location">位置：{{ item.location }}</div>
                        <div class="course" v-if="item.course_name">
                          课程：{{ item.course_name }}
                        </div>
                      </div>
                      <div class="item-content-right">
                        <div>类型：{{ item.category }}</div>
                        <div class="person-rate-container">
                          <div v-if="item.actual != null">
                            实到/应到：{{ item.actual }}/{{ item.expected }}
                          </div>
                          <div style="margin-left: 8px" v-if="item.actual != null">
                            到课率：{{
        (item.actual / item.expected).toFixed(2) * 100 ||
        0
      }}%
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



              </vue-auto-scroll>
            </div>

            <div v-else class="empty-container">
              <img :src="noData" alt="" srcset="">
            </div>
          </div>

        </div>
        <!-- </div> -->
      </div>
    </div>
  </el-aside>

  <div ref="popoverRef" v-if="roomVisible" style="
      background-color: rgba(245, 246, 248, 0.9);
      border-radius: 10px;
      position: absolute;
      top: 10vh;
      left: 50%;
      width: 366px;
      z-index: 999;
      transform: translateX(-50%);
    ">
    <div class="model-detail">
      <span><span class="title">教室状态: </span>
        <span :class="classInfo.online ? 'green' : 'red'">{{
        classInfo && classInfo.status
      }}</span>
      </span>

      <span><span class="title">班级: </span>
        <span style="width: 105px; display: inline-flex">{{
          classInfo && classInfo.className
        }}</span>
      </span>
      <span><span class="title">课程名称: </span>
        <span style="width: 94px; display: inline-flex">{{
          classInfo && classInfo.courseName
        }}</span>
      </span>
      <span><span class="title">应到人数: </span>{{ classInfo && classInfo.expected }}</span>
      <span><span class="title">教室: </span>
        <span style="width: 120px; display: inline-flex">
          {{ classInfo && classInfo.class }}
        </span>
      </span>
      <span><span class="title">实到人数: </span>{{ classInfo && classInfo.actual }}</span>
      <span><span class="title">老师: </span>{{ classInfo && classInfo.teacher }}</span>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  reactive,
  onMounted,
  ref,
  onBeforeUnmount,
  onUnmounted,
  nextTick,
  getCurrentInstance,
  computed,
  watch,
} from "vue";
import {
  ElScrollbar,
  ElPagination,
  ElDialog,
  ElCarousel,
  ElCarouselItem,
  ElIcon,
} from "element-plus";
import { Search, ArrowDown } from "@element-plus/icons-vue";
import { getClass, classSelections, queryClassroom, summaryStatisticV3Api } from "../request/api";
import CircleProgress from "./CircleProgress.vue";

import {
  Vue3SeamlessScroll,
  VerticalScroll,
  HorizontalScroll,
} from "vue3-seamless-scroll";
import Scroll from "./ScrollView.vue";

// import { callUIInteraction } from "../webrtcVideo";
import Tag from "./Tag.vue";

import axios from 'axios'
import { CountTo } from "vue3-count-to";


export default {
  name: "Histogram",
  components: {
    ElScrollbar,
    ElPagination,
    ElDialog,
    ElCarousel,
    ElCarouselItem,
    CircleProgress,
    Tag,
    CountTo,
    Vue3SeamlessScroll,
    VerticalScroll,
    Scroll,
    ArrowDown,
  },
  props: {
    isShow: {
      type: Boolean,
      default: true,
    },

  },
  setup(props, { emit }) {
    watch(
      () => props.isShow,
      (newValue) => {
        console.log("监听一下现在的位置", newValue);
        clearTimeoutTimer(); // 清除定时器
        
        if (newValue) {
          startTimeInterval();// 重新开始定时器
        } else {
        }
      }
    )
    // 教室分类统计
    const classRoomCount = ref([]);

    const isShhow = ref(true)
    const generateData = (totalNum, bigvalue, smallvalue, color) => {
      let dataArr = [];
      for (var i = 0; i < totalNum; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: bigvalue,
            itemStyle: {
              normal: {
                color: color,
                borderWidth: 0,
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: smallvalue,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
            },
          });
        }
      }
      return dataArr;
    };
    let dolitData = generateData(60, 25, 20, "rgb(126,190,255)");

    const fontSize = (res) => {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      // 此处的3840 为设计稿的宽度，记得修改！
      let fontSize = clientWidth / 1920;
      return res * fontSize;
    };

    const classPie = reactive({
      option: {
        color: ["#00bbff", "#00eb7d", "#ffbb00"],
        tooltip: {
          trigger: "item",
          position: "right",
        },
        series: [
          {
            type: "pie",
            radius: ["85%", "100%"],
            avoidLabelOverlap: false,
            zlevel: 9999,
            labelLine: {},
            label: {
              show: true,
              position: "center",
              color: "#fff",
              fontSize: fontSize(14),
              formatter: () => {
                // 格式化要展示的文本
                return `{a|总数}\n{b|${roomtotle.value}}{c|间}`;
              },
              rich: {
                a: {
                  color: "rgba(255, 255, 255, 0.80)",
                  lineHeight: fontSize(24),
                  fontSize: fontSize(12),
                },
                b: {
                  color: "#fff",
                  fontSize: fontSize(20),
                  fontWeight: 700,
                },
                c: {
                  color: "rgba(255, 255, 255, 0.80)",

                  fontSize: fontSize(12),
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: classRoomCount,
          },

          {
            name: "虚线",
            type: "pie",
            zlevel: 10,
            silent: true,
            radius: ["58%", "56%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: dolitData,
          },
          {
            name: "阴影圈",
            type: "pie",
            radius: ["100%", "70%"],
            center: ["50%", "50%"],
            emphasis: {
              scale: false,
            },
            tooltip: {
              show: false,
            },
            itemStyle: {
              // color: "rgba(255,225,255, 0.08)",
              color: "rgba(34, 81, 113,0.8)",
            },
            zlevel: 4,
            labelLine: {
              show: false,
            },
            data: [100],
          },
          {
            name: "阴影圈2",
            type: "pie",
            radius: ["70%", "52%"],
            center: ["50%", "50%"],
            emphasis: {
              scale: false,
            },
            tooltip: {
              show: false,
            },
            itemStyle: {
              // color: "rgba(255,225,255, 0.08)",
              color: "rgba(36, 66, 88,0.8)",
            },
            zlevel: 4,
            labelLine: {
              show: false,
            },
            data: [100],
          },
          {
            name: "中间圆",
            type: "pie",
            radius: ["0", "50%"],
            center: ["50%", "50%"],
            emphasis: {
              scale: false,
            },
            tooltip: {
              show: false,
            },
            itemStyle: {
              // color: "rgba(204,225,255, 0.08)",
              color: "rgba(34, 81, 113,0.5)",
            },
            zlevel: 4,
            labelLine: {
              show: false,
            },
            data: [100],
          },
        ],
      },
    });
    let myChart = ref(null);

    const initeCharts = () => {
      myChart.value = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      console.log("绘制图表", classPie.option);
      myChart.value.setOption(classPie.option);
    };
    window.addEventListener("resize", function () {
      myChart.value.resize();
      if (scrollContainerHeight.value) {
        scrollContainerHeight.value = scrollContainerRef.value.clientHeight;

      }
    });



    // 物联设备类型统计
    const interDevice = ref([]);

    const roomVisible = ref(false);

    //消失面板
    const clearPanel = () => {
      roomVisible.value = false;
    };

    const popoverRef = ref(null);
    const triggerRef = ref({
      getBoundingClientRect() {
        // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
        return position.value;
      },
    });
    // 点击某个模型跟随移动
    const mousemoveHandler = (x, y) => {
      position.value = DOMRect.fromRect({
        width: 0,
        height: 0,
        x: x,
        y: y,
      });
    };
    const position = ref({
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
    });
    let classInfo = ref({});
    const handleRoom = function (item) {
      //查看前隐藏
      // let a1 = document.getElementById("popoverRef");
      // a1.style.display = "none";

      // emit("childMethod");

      // console.log("kankanitem", item);
      // setTimeout(() => {
      //   roomVisible.value = true;
      //   classInfo.value = item;

      //   classInfo.value.online =
      //     classInfo.value.status == "在用" ? true : false;
      // }, 2400);

      // mousemoveHandler(1000, 60);

      // let meg = item;

      // // let a2 =`roomName=${item.class}`

      // console.log("meg是多少", meg);
      //发消息给UE
      let data = {
        MainServiceName: "JiaoShiShiNei",
        ClassroomName: item.classroom_name,
      };
      console.log("data", JSON.stringify(data));

      emitUIInteraction(data);
    };

    // 本周课程统计数据
    const classCount = ref([]);
    // 智慧教室使用数据
    const classRoom = ref([]);
    const roomtotle = ref([]);

    const getClassData = async () => {
      let res = await getClass();
      console.log("res----教室分类统计", res);
      let { course, classroomDetail, category } = res.data;
      classRoomCount.value = category;

      //获取教室总数
      roomtotle.value = category.reduce(
        (accumulator, currentValue) => accumulator + currentValue.value,
        0
      );
      console.log("categorycategory", roomtotle);

      if (classRoomCount.value) {
        initeCharts();
      }
      classCount.value = course;
      console.log("看一下颜色", classCount.value);
      classRoom.value = classroomDetail;
    };

    let timer = ref(null);
    let testMain = ref(null);
    let scrollContainerRef = ref(null);
    let scrollContainerHeight = ref(null);
    let setTimeoutTimerId = ref(null);

    const clearTimeoutTimer = () => {
      if (setTimeoutTimerId.value) {
        clearTimeout(setTimeoutTimerId.value);
        setTimeoutTimerId.value = null; // 重置定时器 ID
      }
    };
    const startTimeInterval = () => {
      setTimeoutTimerId.value = setInterval(() => {
        getClassData();
        //start();
        // 获取教师下拉选择数据
        getClassSelections();
        //获取教室列表数据
        getClassRoomList();
        getSummaryStatisticV3()

      }, 30000);
    };
    onMounted(() => {
      getClassData();
      // 获取教师下拉选择数据
      getClassSelections();
      //获取教室列表数据
      getClassRoomList();
      // 获取教师统计数据
      getSummaryStatisticV3()
      // summaryStatisticV3Api
      scrollContainerHeight.value = scrollContainerRef.value.clientHeight;

      clearTimeoutTimer();//清除定时器
      startTimeInterval();//开启定时器



    });
    let summaryStatistic = ref({
      mdeiaClassroomCount: 0,
      mediaClassroomOnlineDeviceCount: 0,
      mediaClassroomDeviceCount: 0,
      wiseClassroomCount: 0,
      wiseClassroomDeviceCount: 0,
      wiseClassroomOnlineDeviceCount: 0
    });
    const getSummaryStatisticV3 = () => {
      axios.get("https://weizhi.huanghuai.edu.cn/ioc-server/summaryStatisticV3/1").then(res => {
        console.log("教室统计数据s", res)
        if (res.data.code == 200) {
          summaryStatistic.value = res.data.data.wiseClassroom
        }
      })
    }

    onBeforeUnmount(() => {
      clearTimeout(timer.value);
    });
    onUnmounted(() => {
      clearTimeout(timer.value);
    });




    // 占用教室数量
    const occupiedClassroomsCount = computed(() => {
      return classRoom.value.filter((classroom) => classroom.status === "在用")
        .length;
    });

    // 计算属性：占用百分比
    const getPercentage = computed(() => {
      const total = classRoom.value.length;
      const occupied = occupiedClassroomsCount.value;
      return (((occupied / total) * 100).toFixed(2)) == 'NaN' ? 0 : (((occupied / total) * 100).toFixed(2));
    });

    // 获取教室下拉选择
    let buildings = ref({});
    let categoryType = ref({});
    let leafs = ref({});
    let statuses = ref({});
    const getClassSelections = async () => {
      let res = await classSelections();
      if (res.code == 200) {
        buildings.value = res.data.buildings;
        categoryType.value = res.data.categoryType;
        leafs.value = res.data.leafs;
        statuses.value = res.data.statuses;
      }
    };
    let cureetBuild = ref("全部大楼");
    const clickBuildingsropdown = (e) => {
      console.log("e选择大楼", e);
      gisBuildingCode.value = e;
      let build = buildings.value.find((item) => {
        return item.gis_building_code == e;
      });
      cureetBuild.value = build.building_name;
      searchHandel();
    };

    const clickCategoryTypedropdown = (e) => {
      console.log("e", e);
      category.value = e;

      searchHandel();
    };
    let cureetLeaf = ref("全部楼层");
    const clickLeafsdropdown = (e) => {
      console.log("e", e);
      gisLeaf.value = e;
      let leaf = leafs.value.find((item) => {
        return item.leaf == e;
      });
      cureetLeaf.value = leaf.leaf_name;
      searchHandel();
    };

    let cureetStatus = ref("全部教室");
    const clickStatusesdropdown = (e) => {
      console.log("e", e);
      statusCode.value = e;
      let status = statuses.value.find((item) => {
        return item.status_code == e;
      });
      cureetStatus.value = status.status_name;
      searchHandel();
    };

    // 搜索
    let searchData = ref("");
    let category = ref("");
    let gisBuildingCode = ref("");
    let gisLeaf = ref("");
    let statusCode = ref("");
    let scrollRef = ref(null);
    const offset = () => {
      console.log("滚动完成一次");
    };
    const searchHandel = async () => {
      getClassRoomList();
      clearTimeoutTimer();//清除定时器
      startTimeInterval()
    };
    let classRoomList = ref([]);
    const getClassRoomList = async () => {
      isShhow.value = false;
      let res = await queryClassroom({
        classRoomName: searchData.value,
        category: category.value,
        gisBuildingCode: gisBuildingCode.value,
        statusCode: statusCode.value,
        gisLeaf: gisLeaf.value,
      });
      classRoomList.value = [];
      // setTimeout(() => {
      classRoomList.value = res.data;
      isShhow.value = true;
      // scrollRef.value.reset()
      // }, 0);
    };
    let deviceDialog = ref(true);
    const showDeviceDialog = () => {
      deviceDialog.value = true;
    };
    const leftimg = ref("./img/");
    const frame = ref("./img/frame.png");
    const noData = ref("./img/no-data.png");
    return {
      roomVisible,
      classCount,
      classRoom,
      interDevice,
      handleRoom,
      testMain,
      popoverRef,
      classRoomCount,
      triggerRef,
      classInfo,
      leftimg,
      clearPanel,
      frame,
      ElIcon,
      Search,
      ArrowDown,
      ElIcon,
      searchData,
      searchHandel,
      getClassSelections,
      buildings,
      categoryType,
      leafs,
      statuses,
      clickCategoryTypedropdown,
      clickBuildingsropdown,
      clickLeafsdropdown,
      clickStatusesdropdown,
      // start,
      category,
      gisBuildingCode,
      gisLeaf,
      statusCode,
      getPercentage,
      occupiedClassroomsCount,
      classRoomList,
      deviceDialog,
      showDeviceDialog,
      cureetBuild,
      cureetLeaf,
      cureetStatus,
      scrollRef,
      offset,
      scrollContainerHeight,
      scrollContainerRef,
      noData,
      isShhow,
      summaryStatistic
    };
  },
};
</script>

<style scoped lang="scss">
@import "../assets/css/left.scss";
</style>
<style>
.classpopover {
  .el-popper__arrow {
    top: 196px !important;
  }

  .el-popper[data-popper-placement^="bottom"],
  .el-popper__arrow::before {
    border-left-color: transparent !important;
    border-top-color: transparent !important;
  }
}

.el-popper.is-light {
  border-radius: 2px;
}

.el-popper {
  border: 2px solid #1a2d47 !important;
  background: rgba(1, 18, 35, 0.60) !important;
  border-radius: 4px !important;

}

.el-dropdown-menu {
  background: rgba(1, 18, 35, 0.60) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 2px !important;
}

.el-dropdown-menu__item {
  color: rgba(255, 255, 255, 0.72);
  border-radius: 4px !important;
}

.popper__arrow::after {
  background: rgba(255, 255, 255, 0.12);
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.el-dropdown-menu__item:not(.is-disabled):focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.el-popper__arrow {
  display: none;
}

.el-input__inner {
  color: #fff !important;
}
</style>