增加监控视频页面

src/views/vehicleMachinery/video-manage/api.js

@@ -0,0 +1,66 @@
+import axios from '@/utils/request'
+// 查询分页数据：
+export const vehicleList = (arg) => {
+  return axios.request({
+    url: '/vehicle/list',
+    method: 'get',
+    params: arg,
+    dataType: 'json',
+    
+  })
+}
+// 查询详情数据：
+export const vehicleGetById = (arg) => {
+  return axios.request({
+    url: `/vehicle/getById`,
+    method: 'get',
+    params: arg,
+    dataType: 'json',
+    
+  })
+}
+
+// 添加数据：
+export const vehicleAdd = (arg) => {
+  return axios.request({
+    url: '/vehicle/add',
+    method: 'post',
+    data: arg,
+    dataType: 'json',
+    
+  })
+}
+
+// 修改数据：
+export const vehicleUpdate = (arg) => {
+  return axios.request({
+    url: '/vehicle/update',
+    method: 'put',
+    data: arg,
+    dataType: 'json',
+    
+  })
+}
+
+// 删除数据:
+export const vehicleDelete = (arg) => {
+  return axios.request({
+    url: '/vehicle/delete',
+    method: 'delete',
+    params: {
+      id:arg.id[0]
+    },
+    dataType: 'json',
+    
+  })
+}
+// 查询分页数据：
+export const iproductionplanList = (arg) => {
+  return axios.request({
+    url: '/iproductionplan/list',
+    method: 'get',
+    params: arg,
+    dataType: 'json',
+    
+  })
+}

src/views/vehicleMachinery/video-manage/index.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { reactive } from 'vue'
+import { vehicleList, vehicleAdd, vehicleUpdate, vehicleDelete, vehicleGetById, iproductionplanList } from './api'
+import { baseModelOptions, baseFilterOptions } from './options'
+import { useRouter } from 'vue-router';
+
+const cameraList = reactive([
+  { name: '5305#摄像头', source: 'rtsp://admin:admin@IP_ADDRESS' },
+  { name: '5601#摄像头', source: 'rtsp://admin:admin@IP_ADDRESS' }
+])
+const state = reactive({
+  currentCameraIndex: 0
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <!-- 监控摄像头名称列表 -->
+    <div class="camera-name-list">
+      <template v-for="(camera, index) in cameraList" :key="index">
+        <span 
+          class="camera-name" 
+          @click="switchCamera(index)"
+          :class="{ active: state.currentCameraIndex === index }"
+        >
+          {{ camera.name }}
+        </span>
+      </template>
+    </div>
+    <!-- 摄像头展示区域 -->
+    <div class="camera-display">
+      <video 
+        v-if="state.currentCameraIndex !== -1" 
+        :src="cameraList[state.currentCameraIndex].source" 
+        controls 
+        autoplay 
+        muted
+      ></video>
+      <p v-else>请选择摄像头</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  min-height: 100vh;
+}
+
+.camera-name-list {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.camera-name {
+  padding: 8px 16px;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: white;
+}
+
+.camera-name:hover {
+  background-color: #e0e0e0;
+  transform: translateY(-2px);
+}
+
+.camera-name.active {
+  background-color: #2196F3;
+  color: white;
+  border-color: #2196F3;
+}
+
+.camera-display {
+  width: 80%;
+  max-width: 800px;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+video {
+  width: 100%;
+  height: auto;
+}
+
+p {
+  text-align: center;
+  color: #666;
+  font-size: 18px;
+}
+</style>

src/views/vehicleMachinery/video-manage/options.js

@@ -0,0 +1,43 @@
+export const baseModelOptions = () => {
+  return [
+
+  ]
+}
+
+export const baseFilterOptions = () => {
+  return [
+    {
+      tag: 'el-input',
+      label: '设备名称:',
+      key: 'deviceName',
+      value: '',
+      default: '',
+      attribute: {//属性
+        type: 'text',
+        placeholder: '请输入设备名称',
+      },
+    },
+    {
+      tag: 'el-input',
+      label: 'IMEI:',
+      key: 'imei',
+      value: '',
+      default: '',
+      attribute: {//属性
+        type: 'text',
+        placeholder: '请输入IMEI',
+      },
+    },
+    {
+      tag: 'el-input',
+      label: '设备类型:',
+      key: 'mcType',
+      value: '',
+      default: '',
+      attribute: {//属性
+        type: 'text',
+        placeholder: '请输入设备类型',
+      },
+    },
+  ]
+}