Skip to content

M
mmc-stl-vue2
提交 6c7a4d81 作者: 翁进城
操作

补充README.md，优化项目架构

上级 dcb90362
正在显示 包含 349 行增加 和 154 行删除
.gitignore
.DS_Store .DS_Store
node_modules node_modules
!/node_modeuls/mmc/*
/dist /dist
......
README.md
# 标准化鹰视模组 ## 项目描述
基于城市之鹰的前端标准化组件库
## 项目部署
* yarn
`yarn ` 安装依赖
`yarn serve` 启动本地服务
`yarn dev:xx` 启动基于配置文件的本地服务
`yarn build` 构建生产包
`yarn build:xx` 构建基于配置文件的生产包
* npm&cnpm
`npm i` 安装依赖
`npm run serve` 启动本地服务
`npm run dev:xx` 启动基于配置文件的本地服务
`npm run build` 构建生产包
`npm run build:xx` 构建基于配置文件的生产包
## npm调试组件方法
* npm link （将npm包链接到本地全局目录（node_modules）下面）
* cd vue2 后执行 npm link mmc-stl-vue2 （在主项目中引用上一步挂到全局的软链接）
## 备注
生成目录树请安装
`npm install -g tree-node-cli`
执行以下命令生成
`treee -I "node_modules|.idea|objects|.git|.vscode|dist|.png|.jpg|.svg|.gif|.mp4|cesium|index.vue|index.js" -a > tree.txt --dirs-first -d -L 3`
## 项目结构
├── src 组件源码
│ ├── assets 资源文件
│ │ └── img
│ │ ├── fckernel
│ │ ├── home
│ │ ├── mount
│ │ ├── nest
│ │ ├── nest_v2
│ │ └── weather
│ ├── components 组件库
│ │ ├── MMCCodeDemo 源码案例组件
│ │ ├── MMCDataTransferPanel 数值面板组件
│ │ │ ├── assets
│ │ │ ├── components
│ │ │ ├── controlList
│ │ │ ├── controlMenu
│ │ │ ├── logger
│ │ │ └── videoTomap
│ │ ├── MMCPlayer 播放器组件
│ │ │ ├── assets
│ │ │ ├── components
│ │ │ └── lib
│ │ ├── MMCUavList 无人机列表组件
│ │ │ └── item
│ │ └── symbol-icon
│ ├── directives 指令库
│ ├── lib js依赖库
│ ├── observe
│ │ ├── fckernel
│ │ │ ├── methods
│ │ │ ├── nest
│ │ │ └── uav
│ │ └── fckernelVideos
│ │ ├── components
│ │ ├── data
│ │ └── methods
│ ├── plugins
│ │ └── MMCMQTT mqtt插件
│ └── style 全局样式
│ └── fonts
├── types ts需要的types
└── vue2 案例网站源码
├── public
│ ├── js
│ └── liveplayer
└── src
├── assets
├── components 公共组件
├── router 路由
└── views 页面
├── dataTransferPanel 数传面板页面
├── mount 挂载页面
├── mqtt mqtt页面
├── player 播放器页面
└── uavList 无人机列表页面
src/components/MMCDataTransferPanel/components/obstacle/index.vue
...@@ -107,6 +107,7 @@ export default { ...@@ -107,6 +107,7 @@ export default {
} }
} }
.ball_box { .ball_box {
position: relative;
box-sizing: border-box; box-sizing: border-box;
width: 150px; width: 150px;
height: 150px; height: 150px;
......
src/components/MMCDataTransferPanel/components/throttleGauge/index.vue 0 → 100644
<template>
<div class="throttle-gauge">
<PositionBall class="ball" :uav-data="uavData" />
<ThrottleValue :value="throttleValue" style="position: absolute; left: -70px; top: -70px;"></ThrottleValue>
<img class="img1" src="../../assets/ball2.png" />
<img class="img2" src="../../assets/ball2.png" />
</div>
</template>
<script>
import PositionBall from "../ball/index";
import ThrottleValue from "../throttleValue";
export default {
name: "throttleGauge",
components: {
PositionBall,
ThrottleValue,
},
props: {
uavData: {
type: Object,
default() {
return {};
},
},
throttleValue: {
type: Number,
default: 500,
},
},
};
</script>
<style scoped>
.throttle-gauge {
position: relative;
}
.img1 {
position: absolute;
left: -11px;
top: 34px;
width: 8px;
height: 9px;
z-index: 9999;
transform: rotate(110deg);
}
.img2 {
position: absolute;
left: -7px;
top: 36px;
width: 8px;
height: 9px;
z-index: 9999;
transform: rotate(-67deg);
}
</style>
\ No newline at end of file
src/components/MMCDataTransferPanel/components/ymfz/index.vue → src/components/MMCDataTransferPanel/components/throttleValue/index.vue
<template> <template>
<div class="w270 h270" id="ymfzDom"></div> <div style="width: 270px; height: 270px;" ref="chart"></div>
</template> </template>
<script> <script>
let echarts = require("echarts"); let echarts = require("echarts");
export default { export default {
name: 'throttleValue',
props: { props: {
channelData: { value: {
type: Object, type: Number,
default: () => ({}), default: 0,
}, },
}, },
data() { data() {
...@@ -75,10 +76,13 @@ export default { ...@@ -75,10 +76,13 @@ export default {
}, },
watch: { watch: {
channelData: { value: {
immediate: true,
handler(value) { handler(value) {
if (value?.accelerator !== undefined) { if (value !== undefined) {
this.updateDom(value.accelerator); this.$nextTick(() => {
this.updateDom(value);
})
} }
}, },
deep: true, deep: true,
...@@ -90,12 +94,12 @@ export default { ...@@ -90,12 +94,12 @@ export default {
}, },
methods: { methods: {
init() { init() {
let chartDom = document.getElementById("ymfzDom"); let chartDom = this.$refs.chart;
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
myChart.setOption(this.option); myChart.setOption(this.option);
}, },
updateDom(value) { updateDom(value) {
let chartDom = document.getElementById("ymfzDom"); let chartDom = this.$refs.chart;
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
let value1 = value / 10; let value1 = value / 10;
let value2 = 100 - value1; let value2 = 100 - value1;
...@@ -163,10 +167,5 @@ export default { ...@@ -163,10 +167,5 @@ export default {
}; };
</script> </script>
<style> <style scoped>
#ymfzDom {
position: absolute;
left: -100px;
top: -32x;
}
</style> </style>
\ No newline at end of file
src/components/MMCDataTransferPanel/index.vue
<!-- 飞控新版鹰视1027 --> <!-- 飞控新版鹰视1027 -->
<template> <template>
<div class="nest_controlBox"> <div class="nest_controlBox">
<PositionBall class="pa ding" :uav-data="uavData" /> <throttleGauge :uavData="uavData" :throttleValue="throttleValue" style="transform: translateX(35px);"></throttleGauge>
<ymfz :channelData="data"> </ymfz> <div class="nest_control">
<img class="img2" src="./assets/ball2.png" />
<img class="img3" src="./assets/ball2.png" />
<div class="w900 h78 nest_control">
<Info class="" :uav-data="uavData" :wsShow="wsShow" :isM300="device.goodsName == 'M300'"></Info> <Info class="" :uav-data="uavData" :wsShow="wsShow" :isM300="device.goodsName == 'M300'"></Info>
<div class="xian" v-if="!device.goodsName == 'M300'"></div> <div class="xian" v-if="!device.goodsName == 'M300'"></div>
<battery v-if="uavBattery" :uav-battery="uavBattery" :device="device"></battery> <battery v-if="uavBattery" :uav-battery="uavBattery" :device="device"></battery>
</div> </div>
<obstacle :uav-data="uavData" style="transform: translateX(-35px);"></obstacle>
<div class="bizhang">
<obstacle :uav-data="uavData"></obstacle>
</div>
</div> </div>
</template> </template>
<script> <script>
import PositionBall from "./components/ball/index"; import throttleGauge from './components/throttleGauge';
import Info from "./components/info/index"; import Info from "./components/info/index";
import battery from "./components/battery/index"; import battery from "./components/battery/index";
import ymfz from "./components/ymfz";
import obstacle from "./components/obstacle"; import obstacle from "./components/obstacle";
export default { export default {
...@@ -37,9 +30,9 @@ export default { ...@@ -37,9 +30,9 @@ export default {
type: Object, type: Object,
default: () => ({}) default: () => ({})
}, },
data: { throttleValue: {
type: Object, type: Number,
default: () => ({}) default: 0
}, },
device: { device: {
type: Object, type: Object,
...@@ -52,9 +45,8 @@ export default { ...@@ -52,9 +45,8 @@ export default {
} }
} }
}, },
components: { PositionBall, Info, battery, ymfz, obstacle }, components: { Info, battery, obstacle, throttleGauge },
mounted(){ mounted(){
console.log(this.device,"infodevice");
}, },
computed: { computed: {
props_obj() { props_obj() {
...@@ -72,30 +64,13 @@ export default { ...@@ -72,30 +64,13 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
pointer-events: none; pointer-events: none;
padding: 0 0px 0px 20px;
.nest_control { .nest_control {
display: flex; display: flex;
align-items: center; align-items: center;
background: rgba(9, 32, 87, 0.7); background: rgba(9, 32, 87, 0.7);
padding: 0 50px;
} }
.img2{
position: absolute;
left: -36px;
top: calc(35%);
width: 8px;
height: 9px;
z-index: 9999;
transform: rotate(-75deg);
}
.img3{
position: absolute;
left: -40px;
top: calc(34%);
width: 8px;
height: 9px;
z-index: 9999;
transform: rotate(115deg);
}
} }
.xian { .xian {
width: 0.3px; width: 0.3px;
...@@ -110,18 +85,4 @@ export default { ...@@ -110,18 +85,4 @@ export default {
2 2; 2 2;
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
} }
.bizhang {
box-sizing: border-box;
width: 150px;
height: 150px;
display: flex;
justify-content: space-between;
position: relative;
}
.kong {
width: 40px;
}
.ding{
left: -31px;
}
</style> </style>
\ No newline at end of file
src/components/MMCPlayer/components/livenvr/index.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
:videoUrl="data.vUrl" :videoUrl="data.vUrl"
/> />
<!-- <LivePlayer <LivePlayer
v-if="fpvUrl.vUrl" v-if="fpvUrl.vUrl"
:class="{ :class="{
vUrl: fullScreen, vUrl: fullScreen,
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
ref="fpvPlayer" ref="fpvPlayer"
:controls="false" :controls="false"
:videoUrl="fpvUrl.vUrl" :videoUrl="fpvUrl.vUrl"
/> --> />
</div> </div>
</template> </template>
...@@ -125,13 +125,13 @@ export default { ...@@ -125,13 +125,13 @@ export default {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: center center; object-position: center center;
z-index: 1;
} }
.small { .small {
width: 300px; width: 300px;
height: 170px; height: 170px;
position: absolute; position: absolute;
right: 0; right: 0;
z-index: 1;
} }
.vjs-volume-panel, .vjs-volume-panel,
.vjs-playback-rate, .vjs-playback-rate,
......
src/components/MMCPlayer/components/obstacle/index.vue
...@@ -100,6 +100,18 @@ angleMap.forEach((value, key) => { ...@@ -100,6 +100,18 @@ angleMap.forEach((value, key) => {
window.angleMap = angleMap; window.angleMap = angleMap;
export default { export default {
name: 'obstacle',
props: {
obstacleData: {
type: Object,
default(){
return null; /* {
distances: [], //array<int>（36个值每10度一个与障碍物的距离厘米）;
obsDistance: 0, //int(避障警告距离米)}
} */
}
}
},
data() { data() {
//转化value为{indexs: [], count: 0}结构 //转化value为{indexs: [], count: 0}结构
const blockCount = {}; const blockCount = {};
...@@ -118,25 +130,20 @@ export default { ...@@ -118,25 +130,20 @@ export default {
}, },
}; };
}, },
computed: {
obstacle() {
return this.$store.state.fckernel.obstacle;
},
},
watch: { watch: {
obstacle: { obstacleData: {
immediate: true, immediate: true,
handler() { handler() {
if(!this.obstacle){ if(!this.obstacleData){
return; return;
} }
//显示块出发等级 //显示块出发等级
const level = (this.obstacle.obsDistance * 100) / 3; const level = (this.obstacleData.obsDistance * 100) / 3;
Object.keys(this.minDistance).forEach(i => { Object.keys(this.minDistance).forEach(i => {
this.minDistance[i] = -1; this.minDistance[i] = -1;
}) })
//匹配每个10度对应的显示块 //匹配每个10度对应的显示块
this.obstacle.distances.forEach((value, i) => { this.obstacleData.distances.forEach((value, i) => {
//取得当前角度对应的显示块 //取得当前角度对应的显示块
const index = angleToBlock.get(i); const index = angleToBlock.get(i);
......
src/components/MMCPlayer/index.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</div> </div>
<div v-show="!fullScreen" class="close" @click="onClose(data)">关闭</div> <div v-show="!fullScreen" class="close" @click="onClose(data)">关闭</div>
</div> </div>
<el-tooltip content="模式切换" placement="bottom" v-if="streamSelect !== 'QingLiu' && fpvUrl.vUrl"> <el-tooltip content="模式切换" placement="bottom" v-if="playerCom !== 'QingLiuPlayer' && fpvUrl.vUrl">
<div class="fpv-switch iconfont icon-moshiqiehuan modelStyle pointer" @click="onChangeFPV"></div> <div class="fpv-switch iconfont icon-moshiqiehuan modelStyle pointer" @click="onChangeFPV"></div>
</el-tooltip> </el-tooltip>
<components <components
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
:raw_msg="raw_msg" :raw_msg="raw_msg"
@debugInfo="onDebugInfo" @debugInfo="onDebugInfo"
/> />
<div class="info" v-if="showQingLiuInfo && streamSelect == 'QingLiu'"> <div class="info" v-if="showQingLiuInfo && playerCom == 'QingLiuPlayer'">
<div class="de"> <div class="de">
<div class="title">bitrate:</div> <div class="title">bitrate:</div>
<div class="detail">{{ raw_msg ? raw_msg/1000 : "0"}}kbps</div> <div class="detail">{{ raw_msg ? raw_msg/1000 : "0"}}kbps</div>
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
</div> </div>
<div class="play"> <div class="play">
<el-tooltip <el-tooltip
v-if="streamSelect == 'QingLiu'" v-if="playerCom == 'QingLiuPlayer'"
class="ql-info" class="ql-info"
content="信息" content="信息"
placement="bottom" placement="bottom"
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
<div v-else class="left ml24" style="margin-left: 124px; color: #fff;"></div> <div v-else class="left ml24" style="margin-left: 124px; color: #fff;"></div>
<div class="ctrl-items"> <div class="ctrl-items">
<div class="ctrl-items-selects"> <div class="ctrl-items-selects">
<el-select class="video_type mr24" v-model="streamSelect" placeholder="切换源"> <el-select class="video_type mr24" v-model="streamSelect" @change="fpvSmallWindow = true;" placeholder="切换源">
<el-option <el-option
v-for="item in streamOptions" v-for="item in streamOptions"
:key="item.value" :key="item.value"
...@@ -119,8 +119,9 @@ ...@@ -119,8 +119,9 @@
<div class="pointer iconfont icon-quanping" @click="onFullScreen"></div> <div class="pointer iconfont icon-quanping" @click="onFullScreen"></div>
</div> </div>
</div> </div>
<slot></slot>
<Obstacle :obstacleData="obstacleData" v-if="obstacleData"></Obstacle>
</div> </div>
<slot></slot>
</div> </div>
</div> </div>
</template> </template>
...@@ -132,12 +133,14 @@ import LiveNVRPlayer from "./components/livenvr/index.vue"; ...@@ -132,12 +133,14 @@ import LiveNVRPlayer from "./components/livenvr/index.vue";
// import QingLiuPlayer from "./flv/index.vue"; // import QingLiuPlayer from "./flv/index.vue";
import QingLiuPlayer from "./components/qingliu/index.vue"; import QingLiuPlayer from "./components/qingliu/index.vue";
import { to_moveMount } from "../../lib/to_moveMount"; import { to_moveMount } from "../../lib/to_moveMount";
import Obstacle from './components/obstacle';
export default { export default {
name: "MMCPlayer", name: "MMCPlayer",
components: { components: {
QingLiuPlayer, QingLiuPlayer,
LiveNVRPlayer, LiveNVRPlayer,
Obstacle
}, },
props: { props: {
//网络类型 //网络类型
...@@ -159,6 +162,15 @@ export default { ...@@ -159,6 +162,15 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
obstacleData: {
type: Object,
default(){
return null; /* {
distances: [], //array<int>（36个值每10度一个与障碍物的距离厘米）;
obsDistance: 0, //int(避障警告距离米)}
} */
}
}
}, },
data() { data() {
return { return {
...@@ -243,7 +255,8 @@ export default { ...@@ -243,7 +255,8 @@ export default {
this.streamSelect = this.streamOptions[0].value; this.streamSelect = this.streamOptions[0].value;
} }
}, },
deep: true deep: true,
immediate: true
}, },
}, },
mounted() { mounted() {
...@@ -307,7 +320,7 @@ export default { ...@@ -307,7 +320,7 @@ export default {
*/ */
play() { play() {
if (this.playerCom === "LiveNVRPlayer") { if (this.playerCom === "LiveNVRPlayer") {
this.$refs.player.$refs["livePlayer"].pause(); this.$refs.player.$refs["livePlayer"].play();
} }
}, },
/** /**
...@@ -315,7 +328,7 @@ export default { ...@@ -315,7 +328,7 @@ export default {
*/ */
pause() { pause() {
if (this.playerCom === "LiveNVRPlayer") { if (this.playerCom === "LiveNVRPlayer") {
this.$refs.player.$refs["livePlayer"].play(); this.$refs.player.$refs["livePlayer"].pause();
} }
}, },
/** /**
...@@ -499,6 +512,7 @@ export default { ...@@ -499,6 +512,7 @@ export default {
} }
} }
.play { .play {
z-index: 1;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
......
src/plugins/MMCMQTT/store.js
...@@ -44,7 +44,7 @@ export default { ...@@ -44,7 +44,7 @@ export default {
protocol, protocol,
clientId, clientId,
}); });
commit("setClient", client); commit("setClient", client);
commit("setClientId", clientId); commit("setClientId", clientId);
...@@ -115,5 +115,23 @@ export default { ...@@ -115,5 +115,23 @@ export default {
client.unsubscribe(topic); client.unsubscribe(topic);
} }
}, },
/**
* 发布
* QoS 0：消息最多传递一次，如果当时客户端不可用，则会丢失该消息。
* QoS 1：消息传递至少 1 次。
* QoS 2：消息仅传送一次。
* @param {*} publication
* @param {*} callback
* @param {*} options
* @param {*} type
*/
publish({state}, {topic, message, callback, options = { qos: 0 }}) {
state.client.publish(
topic,
new TextEncoder().encode(JSON.stringify(message)),
options,
callback
);
},
}, },
}; };
\ No newline at end of file
vue2/src/views/dataTransferPanel/demo.js
...@@ -4,7 +4,7 @@ export default ` ...@@ -4,7 +4,7 @@ export default `
<MMCDataTransferPanel <MMCDataTransferPanel
:device="device" :device="device"
:wsShow="wsShow" :wsShow="wsShow"
:data="channelData" :throttleValue="throttleValue"
:uav-battery="battery" :uav-battery="battery"
:uav-data="uavData" :uav-data="uavData"
></MMCDataTransferPanel> ></MMCDataTransferPanel>
...@@ -16,14 +16,12 @@ export default ` ...@@ -16,14 +16,12 @@ export default `
export default { export default {
data(){ data(){
return { return {
device: { device: {
cateName: 'px4' cateName: 'px4'
}, },
wsShow: false, wsShow: false, //是否为地面站连接
channelData: { throttleValue: 500, //油门值0-1000，中位500
accelerator: 50 battery: { //电池电量
},
battery: {
voltage: 0, voltage: 0,
id: '' id: ''
}, },
......
vue2/src/views/dataTransferPanel/demo.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<MMCDataTransferPanel <MMCDataTransferPanel
:device="device" :device="device"
:wsShow="wsShow" :wsShow="wsShow"
:data="channelData" :throttleValue="throttleValue"
:uav-battery="battery" :uav-battery="battery"
:uav-data="uavData" :uav-data="uavData"
></MMCDataTransferPanel> ></MMCDataTransferPanel>
...@@ -19,9 +19,7 @@ export default { ...@@ -19,9 +19,7 @@ export default {
cateName: 'px4' cateName: 'px4'
}, },
wsShow: false, wsShow: false,
channelData: { throttleValue: 500,
accelerator: 50
},
battery: { battery: {
voltage: 0, voltage: 0,
id: '' id: ''
......
vue2/src/views/player/demo.js
export default ` export default `
依赖以下步骤
1.清流需要网站响应头中添加
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
2.需要将mmc-stl-vue2/components/MMCPlayer/lib/js和mmc-stl-vue2/components/MMCPlayer/lib/liveplayer复制到项目的public文件中
<template> <template>
<div> <div>
<el-form> <MMCPlayer
<el-form-item label="播放地址"> title="测试播放器"
<el-input v-model="url"></el-input> :streamOptions="streamOptions"
</el-form-item> @close="onClose"
</el-form> :obstacleData="obstacleData"
<MMCPlayer title="测试播放器" :streamOptions="streamOptions" @close="onClose"></MMCPlayer> ></MMCPlayer>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return { return {
url: '', streamOptions: [
}
},
computed: {
streamOptions(){
return [
{ {
label: '播放源1', label: "播放源1",
value: this.url, value:
fpvUrl: '' "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
} fpvUrl:
] "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
}, },
{
label: "播放源2",
value:
"http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
fpvUrl:
"https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
},
{
label: "播放源3",
value:
"pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
},
],
obstacleData: null,
/* {
distances: [], //array<int>（36个值每10度一个与障碍物的距离厘米）;
obsDistance: 0, //int(避障警告距离米)}
} */
};
},
mounted() {
//模拟数据
setInterval(() => {
let data = {
distances: [],
obsDistance: 15,
};
for (let i = 0; i < 36; i++) {
data.distances.push(Math.random() * 10 * 100);
}
this.obstacleData = data;
}, 1000);
}, },
methods: { methods: {
onClose(){ onClose() {
alert('关闭') alert("关闭");
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
`; `;
\ No newline at end of file
vue2/src/views/player/demo.vue
<template> <template>
<div> <div>
<el-form> <MMCPlayer
<el-form-item label="播放地址"> title="测试播放器"
<el-input v-model="url"></el-input> :streamOptions="streamOptions"
</el-form-item> @close="onClose"
</el-form> :obstacleData="obstacleData"
<MMCPlayer title="测试播放器" :streamOptions="streamOptions" @close="onClose"></MMCPlayer> ></MMCPlayer>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return { return {
url: '', streamOptions: [
}
},
computed: {
streamOptions(){
return [
{ {
label: '播放源1', label: "播放源1",
value: this.url, value:
fpvUrl: '' "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
} fpvUrl:
] "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
}, },
{
label: "播放源2",
value:
"http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
fpvUrl:
"https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
},
{
label: "播放源3",
value:
"pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
},
],
obstacleData: null,
/* {
distances: [], //array<int>（36个值每10度一个与障碍物的距离厘米）;
obsDistance: 0, //int(避障警告距离米)}
} */
};
},
mounted() {
//模拟数据
setInterval(() => {
let data = {
distances: [],
obsDistance: 15,
};
for (let i = 0; i < 36; i++) {
data.distances.push(Math.random() * 10 * 100);
}
this.obstacleData = data;
}, 1000);
}, },
methods: { methods: {
onClose(){ onClose() {
alert('关闭') alert("关闭");
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
\ No newline at end of file
vue2/src/views/uavList/demo.js
...@@ -38,7 +38,7 @@ export default { ...@@ -38,7 +38,7 @@ export default {
} }
} }
} }
</script> </s>
<style> <style>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论