海康监控H5 实时视频监控

一、先上图

二、码农的代码吐槽下

<template>

  <div class="app-container home">

    <div class="header">

      <div>

        <div>今日在校：{ { SchoolCountdata.allInSchoolCount }}人</div>

        <div>教职工：{ { SchoolCountdata.teacherInSchoolCount }}人</div>

        <div>学生：{ { SchoolCountdata.studentInSchoolCount }}人</div>

      </div>

      <div>智慧校园</div>

      <div>

        <div v-html="yeartxt"></div>

        <div v-html="daytxt"></div>

        <!--  <div>{ {$moment().format('YYYY年MM年DD HH:mm')}}</div> -->

        <div @click="goTarget">退出大屏</div>

      </div>

    </div>

    <div class="main">

      <div class="left">

        <!--   style="width:446px; padding:40px 20px 0px; overflow: hidden;" -->

        <div>

          <div style="overflow: hidden; width: 415px; margin-left: 10px">

            <vue-seamless-scroll

              class="seamless-scroll"

              :data="lastWeekRankdata"

              :class-option="classOption2"

            >

              <ul style="width: 1000px; padding-top: 30px">

                <li v-for="(v, i) in lastWeekRankdata" :key="i">

                  <div>{ { i + 1 }}</div>

                  <div v-if="i + 1 == 1">

                    <img src="@/assets/images/2@2x.png" alt="" width="45" />

                  </div>

                  <div v-if="i + 1 == 2">

                    <img src="@/assets/images/3@2x.png" alt="" width="45" />

                  </div>

                  <div v-if="i + 1 == 3">

                    <img src="@/assets/images/1@2x.png" alt="" width="45" />

                  </div>

                  <div v-if="i + 1 > 3">

                    <div></div>

                  </div>

                  <div>

                    <img

                      :src="baseUrl_src(v.image)"

                      alt=""

                      width="72"

                      height="72"

                    />

                  </div>

                  <span>{ { v.attendanceRatio }}</span>

                  <div>{ { v.teacherName }}</div>

                </li>

              </ul>

            </vue-seamless-scroll>

          </div>

        </div>

        <div>

          <!-- { {attendancedata}} === -->

          <div>

            实到人数<span> { { attendancedata.realNumber }}</span

            >人

          </div>

          <div>

            较昨日 <img src="@/assets/images/up.png" v-if="Accounted" />

            <img src="@/assets/images/down.png" v-else />

            <span>{ { attendancedata.realRatio }} </span>

          </div>

          <div>

            <div ref="commandstats" style="height: 200px; width: 180px" />

            <ul>

              <li>

                <div></div>

                <div>正常</div>

                <div>{ { attendancedata.normalNumber }}</div>

              </li>

              <li>

                <div style="background: #fde64e"></div>

                <div style="color: #fde64e">迟到</div>

                <div>{ { attendancedata.lateNumber }}</div>

              </li>

              <li>

                <div style="background: #fd6767"></div>

                <div style="color: #fd6767">早退</div>

                <div>{ { attendancedata.leaveEarlyNumber }}</div>

              </li>

              <li>

                <div style="background: #a1e6ce"></div>

                <div style="color: #a1e6ce">不在岗</div>

                <div>{ { attendancedata.notOnDutyNumber }}</div>

              </li>

            </ul>

          </div>

        </div>

      </div>

      <div class="center">

        <div class="bannerBox">

          <div

            id="player"

            v-loading="loading"

            style="width: 100%; height: 100%"

          ></div>

          <!-- <div class="swiper-container gallery-top">

            <div class="swiper-wrapper">

              <div class="swiper-slide" v-for="(item,index) of bigImg" :key="index">

                <img class="img" :src="item">

              </div>

            </div>

          </div>

          <div class="swiper-container gallery-thumbs">

            <div class="swiper-wrapper">

              <div class="swiper-slide swiper-bottom" v-for="(item,index) of bigImg" :key="index">

                <img class="img" :src="item">

              </div>

            </div>

          </div> -->

        </div>

      </div>

      <!-- 学生当日考勤 -->

      <div class="right">

        <div class="race-lamp-card">

          <ul class="horseLamp_list" style="height: 30px">

            <li>

              <div>序号</div>

              <div>班级</div>

              <div>出勤率(%)</div>

            </li>

          </ul>

          <ul class="horseLamp_list">

            <vue-seamless-scroll

              class="seamless-scroll"

              :data="classattendancedata"

              :class-option="classOption"

            >

              <li v-for="(item, index) in classattendancedata" :key="index">

                <div>{ { index + 1 }}</div>

                <div>{ { item.organizedName }}</div>

                <div>

                  { { item.attendanceRatio

                  }}{ { item.attendanceRatio ? "%" : "%" }}

                </div>

              </li>

              <li class="bottom_fade"></li>

            </vue-seamless-scroll>

          </ul>

        </div>

        <!-- 学生考勤排行 -->

        <div class="race-lamp-card">

          <ul class="horseLamp_list" style="height: 30px">

            <li>

              <div>班级</div>

              <div></div>

              <div>出勤率(%)</div>

            </li>

          </ul>

          <ul class="horseLamp_list">

            <vue-seamless-scroll

              class="seamless-scroll"

              :data="WeekAttendancedata"

              :class-option="classOption"

            >

              <li v-for="(item, index) in WeekAttendancedata" :key="index">

                <div>{ { item.organizedName }}</div>

                <div>

                  <el-progress

                    color="#81FF00"

                    :show-text="false"

                    :percentage="item.attendanceRatio"

                  >

                  </el-progress>

                </div>

                <div>{ { item.attendanceRatio }}%</div>

              </li>

              <li class="bottom_fade"></li>

            </vue-seamless-scroll>

          </ul>

        </div>

      </div>

    </div>

    <!-- 教师出勤率 -->

    <div class="bottom">

      <!-- { {attendanceRatiodata}} -->

      <div class="commandstatsPie">

        <div ref="commandstatsPie" style="width: 420px; height: 160px"></div>

        <div class="teacherbg">

          <div style="color: rgb(109, 86, 249)">

            <!-- <img src="@/assets/images/e38378266ec5cc32918654fa1388384.png" alt=""> -->

            { { this.attendanceRatiodata.nowRatio }}

          </div>

          <div style="color: #00e1fe">

            { { this.attendanceRatiodata.weekRatio }}

            <!-- <img src="@/assets/images/ae447071c20f3fcab87839017414677.png" alt=""> -->

          </div>

          <div style="color: gold">

            { { this.attendanceRatiodata.monthRatio }}

            <!-- <img src="@/assets/images/761bf03b9b5943d164b93e5b58c5422.png" alt=""> -->

          </div>

        </div>

        <div>

          <div>当日</div>

          <div>当周</div>

          <div>当月</div>

        </div>

      </div>

      <!-- 学生作品 -->

      <div class="race-lamp-card" v-if="progresList.length > 0">

        <ul class="horseLamp_list" :class="{ horseLamp_top: animate }">

          <li>

            <div>序号</div>

            <div>作品名称</div>

            <div>作者</div>

            <div>班级</div>

          </li>

          <li v-for="(item, index) in broadcastdata" v-bind:key="index">

            <div>{ { item.areaId }}</div>

            <div>{ { item.broadcastName }}</div>

            <div>{ { item.broadcastName }}</div>

            <div>{ { item.groupName }}</div>

          </li>

          <li class="bottom_fade"></li>

        </ul>

      </div>

      <!-- 广播节目 -->

      <div class="race-lamp-card" v-if="broadcastdata.length > 0">

        <ul class="horseLamp_list reshorseLamp_list" style="height: 30px">

          <li>

            <div>序号</div>

            <div>节目播放设备</div>

            <div>时间</div>

          </li>

        </ul>

        <ul class="horseLamp_