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="count" v-for="(item, index) in classCount" :key="index">
          <CircleProgress
            :target-value="item.number"
            :color="item.color"
            :text="item.text"
            :index="index"
            text-position="bottom"
          >
            <img :src="leftimg + item.imgnumber + '.png'" alt="" />
          </CircleProgress>
          <div class="text">{{ item.text }}</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">
              <span class="dropdown-name">
                {{ cureetBuild }}
                <!-- <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">
              <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">
              <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">
              <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
            style="height: 342px; overflow: hidden; padding-top: 10px"
            v-if="classRoomList.length > 0"
          >
            <scroll
             
              :content="classRoomList"
              class="vue3-seamless-scroll"
              :hover="true"
              :wheel="true"
              direction="top"
              ref="scrollRef"
              :mask="false"
            
            >
              <template #default="{item}" >
                <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">位置：{{ 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>
              </template>
            </scroll>
          </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,
} from "vue";
import {
  ElScrollbar,
  ElPagination,
  ElDialog,
  ElCarousel,
  ElCarouselItem,
  ElIcon,
} from "element-plus";
import { Search, ArrowDown } from "@element-plus/icons-vue";
import { getClass, classSelections, queryClassroom } 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";

export default {
  name: "Histogram",
  components: {
    ElScrollbar,
    ElPagination,
    ElDialog,
    ElCarousel,
    ElCarouselItem,
    CircleProgress,
    Tag,
    Vue3SeamlessScroll,
    VerticalScroll,
    Scroll
  },
  setup(_, { emit }) {
    // 教室分类统计
    const classRoomCount = ref([]);
    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();
    });

    // 物联设备类型统计
    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);
    onMounted(() => {
      getClassData();
      start();
      // 获取教师下拉选择数据
      getClassSelections();
      //获取教室列表数据
      getClassRoomList();
    });

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

    function testMove() {
      clearTimeout(timer.value);
    }

    function testMend() {
      start();
    }
    //开启定时器方法
    function start() {
      //清除定时器
      clearTimeout(timer.value);
      //定时器触发周期
      let speed = ref(75);
      timer.value = setInterval(MarqueeTest, speed.value);
    }
    function MarqueeTest() {
      return;
      let test1 = testMain.value;

      //判断组件是否渲染完成
      if (test1.offsetHeight == 0) {
        test1 = testMain.value;
      } else {
        //如果列表数量过少不进行滚动
        // console.log("test1", test1.childNodes)
        if (test1.childNodes.length < 6) {
          clearTimeout(timer.value);
          return;
        }
        //组件进行滚动
        test1.scrollTop += 1;

        //判断滚动条是否滚动到底部
        if (test1.scrollTop == test1.scrollHeight - test1.clientHeight) {
          //获取组件第一个节点
          let a = test1.childNodes[0];
          //删除节点
          test1.removeChild(a);
          //将该节点拼接到组件最后
          test1.append(a);
        }
      }
    }

    // 定时刷新教师统计数据
    let classRoomInterval = ref(null);
    const starttimeInterval = () => {
      clearTimeout(classRoomInterval.value);
      classRoomInterval.value = setInterval(() => {
        getClassData();
      }, 5000);
    };

    // 占用教室数量
    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) || 0;
    });

    // 获取教师下拉选择
    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();
    };
    let classRoomList = ref([]);
    const getClassRoomList = async () => {
      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;
        // scrollRef.value.reset()
      }, 0);
    };
    let deviceDialog = ref(true);
    const showDeviceDialog = () => {
      deviceDialog.value = true;
    };
    const leftimg = ref("./img/");
    const frame = ref("./img/frame.png");
    return {
      roomVisible,
      classCount,
      classRoom,
      interDevice,
      handleRoom,
      testMend,
      testMove,
      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,
    };
  },
};
</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: 10px;
}
</style>