wanzai_lingdaojiashi/src/components/school/schoolRight.vue

<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="title">
      <div class="title_text">校园安全</div>
      <div class="title_sub">Campus security</div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <div class="sub_title">安全设施监控情况</div>
      <div class="device">
        <div class="device_box">
          <div class="box_img">
            <div class="box_num" ref="deviceDom">{{ deviceNum }}</div>
          </div>
          监控摄像头
        </div>

        <div class="device_box">
          <div class="box_img">
            <div class="box_num" ref="deviceDom2">{{ deviceNum2 }}</div>
          </div>
          报警器/监控器
        </div>

        <div class="device_box">
          <div class="box_img">
            <div class="box_num" ref="deviceDom3">{{ deviceNum3 }}</div>
          </div>
          消防设施
        </div>
      </div>
      <div class="sub_title">预警推送</div>
      <div class="form">
        <el-table :data="tableData">
          <el-table-column label="序号" align="center" width="40">
            <template #default="scope">
              <div class="order">{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            width="50"
            show-overflow-tooltip
          />
          <el-table-column prop="time" label="时间" align="center" width="55" />
          <el-table-column
            prop="type"
            label="类别"
            align="center"
            width="62"
            show-overflow-tooltip
          />
          <el-table-column
            prop="section"
            label="部门"
            align="center"
            width="62"
          />
          <el-table-column
            prop="address"
            label="地点"
            align="center"
            width="71"
            show-overflow-tooltip
          />
          <el-table-column label="状态" align="center" width="62">
            <template #default="{ row }">
              <div v-if="row.status === 0">未处理</div>
              <div class="red" v-if="row.status === 1">已推送</div>
              <div class="green" v-if="row.status === 2">已处理</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="sub_title">
        实时监控画面
        <span class="more" @click="handleCheckMore">查看更多 ></span>
      </div>
      <div class="video">
        <div class="video_box" v-for="(item, index) in 4" :key="index">
          <img
            src="https://materials.cdn.bcebos.com/images/107505592/68889f5dbf4bd8d8ef0cd11f98b5adea.jpeg"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { countUpNum } from "@/utils/countUpNum";

const deviceNum = ref(100);
const deviceNum2 = ref(150);
const deviceNum3 = ref(10);
const deviceDom = ref();
const deviceDom2 = ref();
const deviceDom3 = ref();

const tableData = [
  {
    name: "张三",
    time: "18:22",
    type: "打架打架打架",
    section: "八年级",
    address: "教学楼教学楼教学楼",
    status: 0,
  },
  {
    name: "李四",
    time: "18:22",
    type: "打架",
    section: "八年级",
    address: "教学楼",
    status: 1,
  },
  {
    name: "王五",
    time: "18:22",
    type: "打架",
    section: "八年级",
    address: "教学楼",
    status: 2,
  },
  {
    name: "老刘",
    time: "18:22",
    type: "打架打架打架",
    section: "八年级",
    address: "教学楼教学楼教学楼",
    status: 0,
  },
  {
    name: "胜七",
    time: "18:22",
    type: "打架",
    section: "八年级",
    address: "教学楼",
    status: 1,
  },
  {
    name: "王八",
    time: "18:22",
    type: "打架",
    section: "八年级",
    address: "教学楼",
    status: 2,
  },
  {
    name: "何九",
    time: "18:22",
    type: "打架打架打架",
    section: "八年级",
    address: "教学楼教学楼教学楼",
    status: 0,
  },
];

const router = useRouter();

onMounted(() => {
  getCountUpNum();
});

// 查看更多按钮回调
const handleCheckMore = () => {
  router.push("/more");
};

const getCountUpNum = () => {
  countUpNum(deviceDom.value, deviceNum.value);
  countUpNum(deviceDom2.value, deviceNum2.value);
  countUpNum(deviceDom3.value, deviceNum3.value);
};
</script>

<style lang="scss" scoped>
.container {
  width: 435px;
  height: 951px;
  color: #fff;
  background-image: url(@/assets/images/box-bg.png);

  .title {
    display: flex;
    align-items: center;
    width: 430px;
    height: 47px;
    font-family: "庞门正道标题体";
    background-image: url(@/assets/images/title-bg.png);
    background-size: 100% 100%;

    .title_text {
      margin-left: 38px;
      font-size: 20px;
      text-shadow: 0px 0px 9px #158eff;
    }

    .title_sub {
      margin-left: 19px;
      font-size: 12px;
      color: #215a8e;
    }
  }

  .content {
    padding: 20px 19px 0 14px;
    height: 904px;

    .sub_title {
      display: flex;
      padding-left: 28px;
      height: 35px;
      line-height: 18px;
      color: #abd6ff;
      font-weight: bold;
      background-image: url(@/assets/images/title-bg2.png);
      background-size: 100% 100%;

      .more {
        margin-left: auto;
        font-size: 12px;
        cursor: pointer;
      }
    }

    .device {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 130px;

      .device_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;

        .box_img {
          margin-bottom: 5px;
          width: 80px;
          height: 48px;
          font-size: 19px;
          font-weight: bold;
          text-align: center;
          background-image: url(@/assets/images/device.png);
          background-size: 100% 100%;

          .box_num {
            animation: float 3s linear infinite;
          }
        }
      }
    }

    .form {
      margin: 26px 0;
      height: 274px;
      overflow: hidden;

      .order {
        margin: auto;
        width: 24px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        color: #ffeb3b;
        background-color: rgba(255, 235, 59, 0.3);
      }

      .red {
        color: #ff6b6b;
      }

      .green {
        color: #40f7eb;
      }
    }

    .video {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-evenly;
      padding-top: 24px;
      height: 320px;

      .video_box {
        width: 198px;
        height: 134px;
        border-radius: 5px;

        img {
          width: 100%;
          border-radius: 5px;
        }
      }
    }
  }
}

/*最外层透明*/
.form ::v-deep(.el-table),
.form ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.form ::v-deep(.el-table th),
.form ::v-deep(.el-table tr),
.form ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent !important;
  color: white;
  font-size: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  height: 40px;
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(58, 126, 199, 0.5);
}
// 清除表格默认padding
::v-deep(.el-table .cell) {
  padding: 0;
}

// 动画滚动
::v-deep(.el-scrollbar__view) {
  animation: run 12s linear infinite;
}
</style>