在线机场-负载设备指令

Web/src/components/airport/components/InfoModal.vue

@@ -187,35 +187,93 @@
                 <img :src="returnHomeSrc" @click="onClickReturnHome">
               </a-tooltip>
             </div>
-            <div class="content-aircraft-head-right-bottom-icon" style="margin-left: 5px;">
+            <!-- <div class="content-aircraft-head-right-bottom-icon" style="margin-left: 5px;">
               <a-tooltip title="操作">
                 <img :src="aircraftSelectedSrc" @click="state.droneControlPanelVisible = false"
                   v-if="state.droneControlPanelVisible">
                 <img :src="aircraftSrc" @click="state.droneControlPanelVisible = true" v-else>
               </a-tooltip>
-            </div>
+            </div> -->
           </div>
           <div class="content-aircraft-head-right-select">
             <div v-if="state.deviceLiveVisible">
-              <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头"
-                v-model:value="deviceLive.cameraValue">
-                <a-select-option v-for="item in deviceLive.cameraList" :key="item.value" :value="item.value"
-                  @click="onDeviceCameraSelect(item)">
-                  {{ item.label }}
-                </a-select-option>
-              </a-select>
-              <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度"
-                v-model:value="deviceLive.clarityValue">
-                <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
-                  {{ item.label }}
-                </a-select-option>
-              </a-select>
-              <a-tooltip title="播放">
-                <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onDeviceStartLive" />
-              </a-tooltip>
-              <a-tooltip title="停止">
-                <a-button :icon="h(PoweroffOutlined)" @click="onDeviceStopLive" />
-              </a-tooltip>
+              <div style="display: flex;">
+                <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头"
+                  v-model:value="deviceLive.cameraValue">
+                  <a-select-option v-for="item in deviceLive.cameraList" :key="item.value" :value="item.value"
+                    @click="onDeviceCameraSelect(item)">
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
+                <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度"
+                  v-model:value="deviceLive.clarityValue">
+                  <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
+                <a-tooltip title="播放">
+                  <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onDeviceStartLive" />
+                </a-tooltip>
+                <a-tooltip title="停止">
+                  <a-button :icon="h(PoweroffOutlined)" @click="onDeviceStopLive" />
+                </a-tooltip>
+              </div>
+              <div v-if="false">
+                <div style="display: flex;margin-top: 10px;">
+                  <a-select style="width: 120px;margin-right: 5px;" placeholder="相机类型"
+                    v-model:value="payload.camera_type">
+                    <a-select-option value="wide">
+                      广角
+                    </a-select-option>
+                    <a-select-option value="zoom">
+                      变焦
+                    </a-select-option>
+                  </a-select>
+                  <a-select style="width: 120px;margin-right: 5px;" placeholder="重置云台"
+                    v-model:value="payload.reset_mode">
+                    <a-select-option :value="0">
+                      回中
+                    </a-select-option>
+                    <a-select-option :value="1">
+                      向下
+                    </a-select-option>
+                    <a-select-option :value="2">
+                      偏航回中
+                    </a-select-option>
+                    <a-select-option :value="3">
+                      俯仰向下
+                    </a-select-option>
+                  </a-select>
+                  <a-select style="width: 120px;" placeholder="相机模式" v-model:value="payload.camera_mode">
+                    <a-select-option :value="0">
+                      拍照
+                    </a-select-option>
+                    <a-select-option :value="1">
+                      录像
+                    </a-select-option>
+                    <a-select-option :value="3">
+                      全景拍照
+                    </a-select-option>
+                  </a-select>
+                </div>
+                <div style="display: flex;align-items: center;padding-left: 10px;margin-top: 10px;">
+                  <a-slider style="width: 200px;" :marks="payload.marks" :included="false" :min="2" :max="56"
+                    v-model:value="payload.zoom_factor" />
+                  <div style="margin-left: 40px;">
+                    <a-tooltip title="拍摄" v-if="payload.camera_mode === 1">
+                      <div style="text-align: center;">
+                        <img style="width:40px;height:40px;cursor: pointer;" :src="videoSrc">
+                        <div style="margin-top: 5px;">
+                          00:00
+                        </div>
+                      </div>
+                    </a-tooltip>
+                    <a-tooltip title="拍摄" v-else>
+                      <img style="width: 40px;height:40px;cursor: pointer;" :src="pictureSrc">
+                    </a-tooltip>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -364,7 +422,7 @@
 </template>
 
 <script lang="ts" setup>
-import { h, computed, reactive, onMounted } from 'vue';
+import { h, computed, reactive, ref, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
 import { CloseOutlined, PlaySquareOutlined, PoweroffOutlined } from '@ant-design/icons-vue'
 import LivePlayer from '/@/components/livePlayer/index.vue';
@@ -382,6 +440,8 @@ import actionSrc from '../icons/info/action.svg';
 import actionSelectedSrc from '../icons/info/action_selected.svg';
 import aircraftSrc from '../icons/aircraft.svg';
 import aircraftSelectedSrc from '../icons/aircraft_selected.svg';
+import pictureSrc from '../icons/info/picture.png';
+import videoSrc from '../icons/info/video.png';
 import controllerSrc from '../icons/info/controller.svg';
 import controllerErrorSrc from '../icons/info/controllerError.svg';
 import fourGSrc from '../icons/info/fourG.svg';
@@ -674,6 +734,20 @@ const deviceLive: DeviceLive = reactive({
   playerUrl: '',
 })
 
+const payload = reactive({
+  camera_type: 'wide',// 相机类型
+  reset_mode: 0,// 重置云台
+  camera_mode: 0,// 相机模式
+  marks: {
+    2: '2倍',
+    14: '14倍',
+    28: '28倍',
+    42: '42倍',
+    56: '56倍',
+  },
+  zoom_factor: 2,// 变焦倍数
+});
+
 const fetchLiveCapacity = async () => {
   try {
     const res = await getLiveCapacity({});
@@ -1210,5 +1284,9 @@ const onClickReturnHome = async () => {
       background-color: #3a3a3a;
     }
   }
+
+  .ant-slider-mark-text {
+    color: #FFFFFF;
+  }
 }
 </style>