ui

xiangpei

2025-01-17 820433f8f5ab6073ae96e4ecc60ad3a4c3aa2782

ui

 src/App.vue

@@ -6,11 +6,17 @@

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-family: JDZY, sans-serif;
  -webkit-font-smoothing: antialiased ;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 95vh;
  overflow-y: hidden;
  /*font-weight: bold;*/
  letter-spacing: 0.1em;
  font-size: large;
  color: black;
}

nav {

 src/assets/bg.png

 src/assets/bottom.png

 src/assets/fx.png

 src/assets/lb.png

 src/assets/left.png

 src/assets/lt.png

 src/assets/rb.png

 src/assets/right.png

 src/assets/text/FZCHSJWGB10_DOWNYI.COM.TTF

Binary files differ

 src/assets/text/fonts.css

New file
@@ -0,0 +1,6 @@
@font-face {
    font-family: "JDZY";
    src: url('./FZCHSJWGB10_DOWNYI.COM.TTF');
    font-weight: normal;
    font-style: normal;
}

 src/assets/top.png

 src/components/ControllerVideoWeb.vue

@@ -78,40 +78,12 @@
          </div>
        </div>
      </div>
      <div style="height: 50px; position: relative; margin: 8px 0px">
        <div class="control-title">路线控制</div>
        <div class="margin20">
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'START_RECORD_TRACK'}" @mousedown="setCameraCommand('START_RECORD_TRACK', 0)" @mouseup="setCameraCommand('START_RECORD_TRACK', 1)">开始记录路线</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'STOP_RECORD_TRACK'}" @mousedown="setCameraCommand('STOP_RECORD_TRACK', 0)" @mouseup="setCameraCommand('STOP_RECORD_TRACK', 1)">停止记录路线</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'START_TRACK'}" @mousedown="setCameraCommand('START_TRACK', 0)" @mouseup="setCameraCommand('START_TRACK', 1)">开始路线</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'STOP_TRACK'}" @mousedown="setCameraCommand('STOP_TRACK', 0)" @mouseup="setCameraCommand('STOP_TRACK', 1)">停止路线</div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 50px; position: relative">
        <div class="control-title">雨刷开关</div>
        <div class="margin20">
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'WIPER_SWITCH'}" @mousedown="setCameraCommand('WIPER_SWITCH', 0)" @mouseup="setCameraCommand('WIPER_SWITCH', 1)">接通雨刷开关</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/text/fonts.css'
import { setCameraCommand } from '@/api/camear'

export default {

 src/components/ControllerVideoWx.vue

@@ -1,108 +1,75 @@
<template>
  <div>
    <div class="control-body" style="margin-left: 20px">
    <div class="control-body">
      <div style="height: 140px; position: relative">
        <div class="control-title">方向控制</div>
        <div class="margin20">
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT_UP'}" @touchstart="setCameraCommand('LEFT_UP', 0)" @touchend="setCameraCommand('LEFT_UP', 1)"><i class="el-icon-top-left"></i></div>
              <div :class="{'b-item-item': true, 'icon-lt': true, bgc: this.command === 'LEFT_UP'}" @touchstart="setCameraCommand('LEFT_UP', 0)" @touchend="setCameraCommand('LEFT_UP', 1)">&nbsp;</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'UP'}" @touchstart="setCameraCommand('UP', 0)" @touchend="setCameraCommand('UP', 1)"><i class="el-icon-top"></i></div>
              <div :class="{'b-item-item': true, 'icon-t': true, bgc: this.command === 'UP'}" @touchstart="setCameraCommand('UP', 0)" @touchend="setCameraCommand('UP', 1)">&nbsp;</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_UP'}" @touchstart="setCameraCommand('RIGHT_UP', 0)" @touchend="setCameraCommand('RIGHT_UP', 1)"><i class="el-icon-top-right"></i></div>
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_UP'}" @touchstart="setCameraCommand('RIGHT_UP', 0)" @touchend="setCameraCommand('RIGHT_UP', 1)">&nbsp;</div>
            </div>
          </div>
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT'}" @touchstart="setCameraCommand('LEFT', 0)" @touchend="setCameraCommand('LEFT', 1)"><i class="el-icon-back"></i></div>
              <div :class="{'b-item-item': true, 'icon-l': true, bgc: this.command === 'LEFT'}" @touchstart="setCameraCommand('LEFT', 0)" @touchend="setCameraCommand('LEFT', 1)">&nbsp;</div>
            </div>
            <div class="b-item">
              <div style="min-width: 54px; user-select: none;">&nbsp;</div>
              <div style="min-width: 65px; user-select: none;">&nbsp;</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT'}" @touchstart="setCameraCommand('RIGHT', 0)" @touchend="setCameraCommand('RIGHT', 1)"><i class="el-icon-right"></i></div>
              <div :class="{'b-item-item': true, 'icon-r': true, bgc: this.command === 'RIGHT'}" @touchstart="setCameraCommand('RIGHT', 0)" @touchend="setCameraCommand('RIGHT', 1)">&nbsp;</div>
            </div>
          </div>
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT_DOWN'}" @touchstart="setCameraCommand('LEFT_DOWN', 0)" @touchend="setCameraCommand('LEFT_DOWN', 1)"><i class="el-icon-bottom-left"></i></div>
              <div :class="{'b-item-item': true, 'icon-lb': true, bgc: this.command === 'LEFT_DOWN'}" @touchstart="setCameraCommand('LEFT_DOWN', 0)" @touchend="setCameraCommand('LEFT_DOWN', 1)">&nbsp;</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'DOWN'}" @touchstart="setCameraCommand('DOWN', 0)" @touchend="setCameraCommand('DOWN', 1)"><i class="el-icon-bottom"></i></div>
              <div :class="{'b-item-item': true, 'icon-bo': true, bgc: this.command === 'DOWN'}" @touchstart="setCameraCommand('DOWN', 0)" @touchend="setCameraCommand('DOWN', 1)">&nbsp;</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_DOWN'}" @touchstart="setCameraCommand('RIGHT_DOWN', 0)" @touchend="setCameraCommand('RIGHT_DOWN', 1)"><i class="el-icon-bottom-right"></i></div>
              <div :class="{'b-item-item': true, 'icon-rb': true, bgc: this.command === 'RIGHT_DOWN'}" @touchstart="setCameraCommand('RIGHT_DOWN', 0)" @touchend="setCameraCommand('RIGHT_DOWN', 1)">&nbsp;</div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 50px; position: relative">
        <div class="control-title">焦距控制</div>
      <div style="height: 60px;margin-top: 30px; position: relative">
        <div class="margin20">
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'ZOOM_IN'}" @touchstart="setCameraCommand('ZOOM_IN', 0)" @touchend="setCameraCommand('ZOOM_IN', 1)">焦距变大</div>
              <div :class="{'b-item-item-other': true, bgc: this.command === 'ZOOM_IN'}" @touchstart="setCameraCommand('ZOOM_IN', 0)" @touchend="setCameraCommand('ZOOM_IN', 1)">焦距变大</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'ZOOM_OUT'}" @touchstart="setCameraCommand('ZOOM_OUT', 0)" @touchend="setCameraCommand('ZOOM_OUT', 1)">焦距变小</div>
              <div :class="{'b-item-item-other': true, bgc: this.command === 'ZOOM_OUT'}" @touchstart="setCameraCommand('ZOOM_OUT', 0)" @touchend="setCameraCommand('ZOOM_OUT', 1)">焦距变小</div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 50px; position: relative">
        <div class="control-title">焦点控制</div>
      <div style="height: 60px; position: relative">
        <div class="margin20">
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'FOCUS_NEAR'}" @touchstart="setCameraCommand('FOCUS_NEAR', 0)" @touchend="setCameraCommand('FOCUS_NEAR', 1)">焦点前移</div>
              <div :class="{'b-item-item-other': true, bgc: this.command === 'FOCUS_NEAR'}" @touchstart="setCameraCommand('FOCUS_NEAR', 0)" @touchend="setCameraCommand('FOCUS_NEAR', 1)">焦点前移</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'FOCUS_FAR'}" @touchstart="setCameraCommand('FOCUS_FAR', 0)" @touchend="setCameraCommand('FOCUS_FAR', 1)">焦点后移</div>
              <div :class="{'b-item-item-other': true, bgc: this.command === 'FOCUS_FAR'}" @touchstart="setCameraCommand('FOCUS_FAR', 0)" @touchend="setCameraCommand('FOCUS_FAR', 1)">焦点后移</div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 50px; position: relative">
        <div class="control-title">光圈控制</div>
      <div style="height: 60px; position: relative">
        <div class="margin20">
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'IRIS_ENLARGE'}" @touchstart="setCameraCommand('IRIS_ENLARGE', 0)" @touchend="setCameraCommand('IRIS_ENLARGE', 1)">光圈扩大</div>
              <div :class="{'b-item-item-other': true, bgc: this.command === 'IRIS_ENLARGE'}" @touchstart="setCameraCommand('IRIS_ENLARGE', 0)" @touchend="setCameraCommand('IRIS_ENLARGE', 1)">光圈扩大</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'IRIS_REDUCE'}" @touchstart="setCameraCommand('IRIS_REDUCE', 0)" @touchend="setCameraCommand('IRIS_REDUCE', 1)">光圈缩小</div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 50px; position: relative; margin: 8px 0px">
        <div class="control-title">路线控制</div>
        <div class="margin20">
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'START_RECORD_TRACK'}" @touchstart="setCameraCommand('START_RECORD_TRACK', 0)" @touchend="setCameraCommand('START_RECORD_TRACK', 1)">开始记录路线</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'STOP_RECORD_TRACK'}" @touchstart="setCameraCommand('STOP_RECORD_TRACK', 0)" @touchend="setCameraCommand('STOP_RECORD_TRACK', 1)">停止记录路线</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'START_TRACK'}" @touchstart="setCameraCommand('START_TRACK', 0)" @touchend="setCameraCommand('START_TRACK', 1)">开始路线</div>
            </div>
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'STOP_TRACK'}" @touchstart="setCameraCommand('STOP_TRACK', 0)" @touchend="setCameraCommand('STOP_TRACK', 1)">停止路线</div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 50px; position: relative">
        <div class="control-title">雨刷开关</div>
        <div class="margin20">
          <div class="fx">
            <div class="b-item">
              <div :class="{'b-item-item': true, bgc: this.command === 'WIPER_SWITCH'}" @touchstart="setCameraCommand('WIPER_SWITCH', 0)" @touchend="setCameraCommand('WIPER_SWITCH', 1)">接通雨刷开关</div>
              <div :class="{'b-item-item-other': true, bgc: this.command === 'IRIS_REDUCE'}" @touchstart="setCameraCommand('IRIS_REDUCE', 0)" @touchend="setCameraCommand('IRIS_REDUCE', 1)">光圈缩小</div>
            </div>
          </div>
        </div>
@@ -168,15 +135,27 @@
  left: 5px
}
.control-body {
  width: 700px;
}
.margin20 {
  margin-left: 20px;
  width: 350px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 设置背景图片 */
  background-image: url('../assets/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* 针对手机屏幕的样式 */
@media (max-width: 768px) {
  .control-body {
    width: 90vw;
    /* 设置背景图片 */
    background-image: url('../assets/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .control-title {
    display: none;
@@ -186,19 +165,92 @@
  }
}
.fx {
  display: flex;justify-content: center;align-items: center;height: 35px;margin-bottom: 8px;
  display: flex;justify-content: center;align-items: center;height: 50px;margin-bottom: 5px;
}
.b-item {
  margin-right: 8px;
  margin: 5px;
  opacity: 0.7;
}
.b-item-item {
  padding: 10px;
  background-color: #eaeaea;
  border-radius: 4px;
  width: 65px;
  height: 50px;
  background-color: #f8f2d1;
  border-radius: 8px;
  user-select: none;
}
.b-item-item-other {
  width: 102px;
  height: 50px;
  background-color: #f8f2d1;
  border-radius: 8px;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon {
  min-width: 34px;
  background-image: url("../assets/fx.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-size: 42% 42%;
}
.icon-lt {
  background-image: url("../assets/lt.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 85% 85%;
  background-position: center;
  transform-origin: center center;
}
.icon-t {
  background-image: url("../assets/top.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 60% 60%;
  background-position: center;
  transform-origin: center center;
}
.icon-l {
  background-image: url("../assets/left.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 60% 60%;
  background-position: center;
  transform-origin: center center;
}
.icon-r {
  background-image: url("../assets/right.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 60% 60%;
  background-position: center;
  transform-origin: center center;
}
.icon-lb {
  background-image: url("../assets/lb.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 85% 85%;
  background-position: center;
  transform-origin: center center;
}
.icon-bo {
  background-image: url("../assets/bottom.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 60% 60%;
  background-position: center;
  transform-origin: center center;
}
.icon-rb {
  background-image: url("../assets/rb.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 85% 85%;
  background-position: center;
  transform-origin: center center;
}
.bgc {
  background-color: #409EFF;

 src/views/wx/CameraPTZ1.vue

@@ -5,7 +5,7 @@
        <easy-player :video-url="url"></easy-player>
      </div>
    </div>
    <div style="margin-top: 15px;display: flex;justify-content: center; width: 100%;">
    <div style="margin-top: 2px;display: flex;justify-content: center; width: 100%;">
      <controller-video :index-code="indexCode"/>
    </div>
  </div>

 src/views/wx/CameraPTZ2.vue

@@ -5,7 +5,7 @@
        <easy-player :video-url="url"></easy-player>
      </div>
    </div>
    <div style="margin-top: 15px;display: flex;justify-content: center; width: 100%;">
    <div style="margin-top: 2px;display: flex;justify-content: center; width: 100%;">
      <controller-video :index-code="indexCode"/>
    </div>
  </div>

 src/views/wx/CameraPTZ3.vue

@@ -5,7 +5,7 @@
        <easy-player :video-url="url"></easy-player>
      </div>
    </div>
    <div style="margin-top: 15px;display: flex;justify-content: center; width: 100%;">
    <div style="margin-top: 2px;display: flex;justify-content: center; width: 100%;">
      <controller-video :index-code="indexCode"/>
    </div>
  </div>

 src/views/wx/CameraPTZ4.vue

@@ -5,7 +5,7 @@
        <easy-player :video-url="url"></easy-player>
      </div>
    </div>
    <div style="margin-top: 15px;display: flex;justify-content: center; width: 100%;">
    <div style="margin-top: 2px;display: flex;justify-content: center; width: 100%;">
      <controller-video :index-code="indexCode"/>
    </div>
  </div>