5.3 居家养老web端控制台

基于vue3+ElementPlus做的一个居家养老静态界面，内容准备后期实现

以下是效果图 特别声明用到了百度地图JS API进行位置展示与iV Cam模拟实时监控

 以下是代码部分

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { ref } from 'vue'
const videoRef = ref(null)
let stream = null
function loadJScript() {
  const script = document.createElement('script')
  script.type = 'text/javascript'
  script.src =
    '//api.map.baidu.com/api?type=webgl&v=1.0&ak=llEL7o82KutbtrUpWu5GEz6y8HJ6mzQO&callback=init'
  document.body.appendChild(script)
}

function init() {
  const container = document.getElementById('container')
  if (!container) return

  const map = new window.BMapGL.Map(container) // 创建Map实例
  const point = new window.BMapGL.Point(116.404, 39.915) // 创建点坐标
  map.centerAndZoom(point, 10)
  map.enableScrollWheelZoom() // 启用滚轮放大缩小
  var marker = new window.BMapGL.Marker(point, {
    enableDragging: true
  })
  map.addOverlay(marker)
}
onMounted(async () => {
  loadJScript()
  try {
    // 获取媒体设备（通常是前置或后置摄像头）
    stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false // 如果需要音频，设置为true
    })

    // 将视频流绑定到video元素
    if (videoRef.value) {
      videoRef.value.srcObject = stream
    }
  } catch (error) {
    console.error('Error accessing camera:', error)
  }
})

onBeforeUnmount(() => {
  // 组件卸载时记得关闭视频流
  if (stream) {
    stream.getTracks().forEach((track) => track.stop())
  }
})
if (typeof window !== 'undefined') {
  window.init = init
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="logo-container">
          <span style="font-weight: bold; font-size: 25px" class="logo-text"
            >智慧助老控制台</span
          >
        </div>
      </el-header>
      <el-container>
        <!----------------------------------------------- aside -->
        <el-aside width="250px">
          <div>
            <div class="as">
              <el-col style="height: 100%">
                <div
                  style="
                    width: 90%;
                    background-color: aqua;
                    border-radius: 10px;
                    margin: auto;
                    padding-top: 10px;
                    padding-bottom: 20px;
                  "
                >
                  <h1 style="text-align: center">信息卡片</h1>
                  <el-row style="margin-top: 30px; margin-left: 40px">
                    <el-avatar
                      src="https://b0.bdstatic.com/e002551e53878af3bbe5b7d1a2c7e73d.jpg@h_1280"
                    />
                    <h1 style="margin-left: 30px">ikun</h1></el-row
                  >
                  <el-divider style="width: 80%; margin-left: 8%" />
                  <el-row style="margin-left: 45px"> 性别：男 </el-row>
                  <el-divider style="width: 80%; margin-left: 10%" />
                  <el-row style="margin-left: 45px"> 年龄：2.5岁 </el-row>
                  <el-divider style="width: 80%; margin-left: 10%" />
                  <el-row style="margin-left: 45px"> 生肖：鸡 </el-row>
                  <el-divider style="width: 80%; margin-left: 10%" />
                  <el-row style="margin-left: 45px"> 爱好：唱跳rap篮球 </el-row>
                </div>
                <div
                  class="ad-text"
                  style="
                    background-color: yellow;
                    width: 90%;
                    margin: auto;
                    height: 35vh;
                    border-radius: 10px;
                    margin-top: 10px;
                  "
                >
                  <span>广告位招租。。。。</span>
                  <br />
                  <br />
                  <span>广告位招租。。。。</span>
                  <br />
                  <br />
                  <span>广告位招租。。。。</span>
                  <br />
                  <br />
                  <span>广告位招租。。。。</span>
                  <br />
                  <br />
                  <span>广告位招租。。。。</span>
                </div>
              </el-col>
            </div>
          </div>
        </el-aside>
        <el-container>
          <!-- main ------------------------------------------------>
          <el-main>
            <el-col style="width: 100%; height: 100vh">
              <div style="display: flex; flex-wrap: nowrap">
                <video
                  style="border-radius: 10px"
                  ref="videoRef"
                  autoplay
                  muted
                  width="400"
                  height="300"
                ></video>
                <div
                  style="
                    width: 350px;
                    background-color: white;
                    height: 300px;
                    border-radius: 10px;
                    margin-left: 80px;
                    margin-right: 30px;
                  "
                >
                  <div style="display: flex; flex-wrap: nowrap">
                    <img
                      style="
                        margin-left: 40px;
                        margin-top: 30px;
                        width: 30px;
                        height: 35px;
                      "
                      src="../../assets/heart-rate.png"
                    />
                    <h1
                      style="
                        margin-left: 10px;
                        font-weight: 200;
                        color: red;
                        margin-top: 40px;
                      "
                    >
                      心率
                    </h1>
                  </div>
                  <h1
                    style="font-size: 50px; margin-left: 14%; font-weight: 300"
                  >
                    79 次/分钟
                  </h1>
                </div>
                <div
                  style="
                    width: 350px;
                    background-color: white;
                    height: 300px;
                    border-radius: 10px;
                    margin: auto;
                  "
                >
                  <div style="display: flex; flex-wrap: nowrap">
                    <img
                      style="
                        margin-left: 40px;
                        margin-top: 30px;
                        width: 30px;
                        height: 35px;
                      "
                      src="src\assets\aawater.png"
                    />
                    <h1
                      style="
                        margin-left: 10px;
                        font-weight: 200;
                        color: red;
                        margin-top: 40px;
                      "
                    >
                      血压
                    </h1>
                  </div>
                  <h1
                    style="font-size: 50px; margin-left: 14%; font-weight: 300"
                  >
                    100 mmhg
                  </h1>
                </div>
              </div>
              <div style="display: flex; flex-wrap: nowrap">
                <div style="width: 400px; height: 400px; margin-top: 40px">
                  <div
                    style="
                      width: 100%;
                      background-color: white;
                      border-radius: 10px;
                      height: 180px;
                      display: flex;
                      flex-wrap: nowrap;
                    "
                  >
                    <div style="height: 100%; width: 50%">
                      <h1
                        style="
                          font-weight: 300;
                          color: #c4c4c4;
                          margin-left: 15px;
                          margin-top: 20px;
                          font-size: 20px;
                        "
                      >
                        uv
                      </h1>
                      <el-progress
                        style="
                          width: 180px;
                          margin-left: 10px;
                          margin-top: 30px;
                        "
                        :text-inside="true"
                        :stroke-width="20"
                        :percentage="80"
                        color="#ff6600"
                        status="exception"
                      >
                        <span></span>
                      </el-progress>
                      <h1
                        style="
                          font-weight: 300;
                          color: #333333;
                          margin-left: 15px;
                          font-weight: 500;
                          font-size: 30px;
                          margin-top: 20px;
                        "
                      >
                        强
                      </h1>
                    </div>
                    <div>
                      <h1
                        style="
                          font-size: 25px;
                          margin-left: 70px;
                          margin-top: 25px;
                          margin-bottom: 0px;
                        "
                      >
                        PA++
                      </h1>
                      <h2
                        style="
                          color: #bbbbbb;
                          margin-left: 85px;
                          margin-top: 10px;
                          margin-bottom: 1px;
                        "
                      >
                        SPF
                      </h2>
                      <span
                        style="
                          font-size: 45px;
                          font-weight: 800;
                          color: #ff6600;
                          margin-left: 75px;
                          margin-top: 0px;
                        "
                        >20</span
                      >
                    </div>
                  </div>

                  <div
                    style="
                      width: 100%;
                      display: flex;
                      flex-wrap: nowrap;
                      background-color: white;
                      border-radius: 10px;
                      height: 180px;
                      margin-top: 40px;
                    "
                  >
                    <div style="width: 50%; height: 100%">
                      <div
                        style="
                          font-size: 25px;
                          color: #bbbbbb;
                          margin-left: 25px;
                          margin-top: 25px;
                        "
                      >
                        PM2.5
                      </div>
                      <div
                        style="
                          font-size: 80px;
                          color: lightgreen;
                          margin-left: 17px;
                          margin-top: 5px;
                        "
                      >
                        32
                      </div>
                    </div>
                    <div>
                      <div style="margin-left: 30px; margin-top: 25px">
                        <span style="font-size: 20px">峰值</span>
                        <el-text tag="ins" style="font-size: 20px"
                          >21:00</el-text
                        >
                      </div>
                      <div style="display: flex; flex-wrap: nowrap">
                        <img
                          style="
                            width: 40px;
                            margin-top: 50px;
                            margin-left: 30px;
                          "
                          src="src\assets\平均值_average.png"
                        />
                        <div style="margin-left: 10px; margin-top: 65px">
                          <el-text
                            tag="ins"
                            style="font-size: 20px; margin-left: 15px"
                            >71</el-text
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  style="
                    background-color: white;
                    width: 60%;
                    margin-left: 80px;
                    border-radius: 20px;
                    margin-top: 40px;
                  "
                >
                  <div
                    id="container"
                    style="
                      overflow: hidden;
                      width: 100%;
                      height: 100%;
                      margin: 0;
                      border-radius: 20px;
                    "
                  ></div>
                </div>
              </div>
            </el-col>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.ad-text {
  font-weight: 800;
  font-size: 24px;
  width: 200px;
  height: 50px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.ad-text > span {
  position: absolute;
  width: 100%;
  animation:
    changeColor 1s infinite alternate,
    slideToLeft 5s linear infinite;
  white-space: nowrap;
  color: red; /* 初始颜色，动画会改变它 */
}

@keyframes changeColor {
  0% {
    color: red;
  }
  10% {
    color: blue;
  }
  20% {
    color: green;
  }
  30% {
    color: red;
  }
  40% {
    color: blue;
  }
  50% {
    color: green;
  }
  60% {
    color: red;
  }
  70% {
    color: blue;
  }
  80% {
    color: green;
  }
  90% {
    color: red;
  }
  100% {
    color: blue;
  }
}

@keyframes slideToLeft {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.common-layout {
  height: 100vh;
  width: 100%;
  .el-header {
    background-color: #fff;
    display: flex; // 使用flex布局来放置Logo和文本
    align-items: center; // 垂直居中
    justify-content: center;
    padding: 10px; // 可以添加一些内边距

    .logo-container {
      display: flex; // Logo和文本也使用flex布局
      align-items: center; // 垂直居中

      .logo-image {
        height: 30px; // 根据你的Logo大小调整
        width: auto;
        margin-right: 10px; // Logo和文本之间的间距
      }

      .logo-text {
        font-size: 16px; // 根据需要调整文本大小
      }
    }
  }
  .el-aside {
    background-color: #fff;
    height: 100vh;
  }
}
</style>