Skip to content

M
mmc-stl-vue2
提交 34a739de 作者: 翁进城
操作

fix: 

1. 修正外部平台集成时的样式影响
2. 修正rollup混淆后外部平台集成时轨迹数据出错
3. rollup配置修正
4. 修正store模块MMCFlightControlCenter 的注册方式
5. 尝试rollup打包时css内联图片(未成功)
上级 d928407d
正在显示 包含 186 行增加 和 123 行删除
README.md
......@@ -39,6 +39,10 @@ Vue.use(MMCSTL);
执行以下命令生成
`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`
# 待解决问题
* css中的图片资源内联
* 非VUE2项目集成
## 项目结构
```
├── src 组件源码
......
index.js
......@@ -10,6 +10,7 @@ import MMCUavList from "./src/components/MMCUavList";
import MMCMQTT from './src/plugins/MMCMQTT';
import MMCGroundStation from "./src/plugins/MMCGroundStation";
import MMCFlightControlCenter from './src/components/MMCFlightControlCenter';
import MMCFlightControlCenterPlugin from './src/components/MMCFlightControlCenter/plugin';
// import MMCFlightControlCenter from './dist';
import SymbolIcon from './src/components/symbol-icon';
......@@ -22,7 +23,7 @@ const components = [
MMCFlightControlCenter,
SymbolIcon
];
const plugins = [MMCMQTT, MMCGroundStation];
const plugins = [MMCMQTT, MMCGroundStation, MMCFlightControlCenterPlugin];
export default {
install: function (Vue, options) {
......
package.json
......@@ -4,7 +4,7 @@
"description": "科比特前端标准化组件",
"main": "index.js",
"scripts": {
"build": "rm -rf dist & rollup -c"
"build": "rd /s /q dist & rollup -c"
},
"repository": {
"type": "git",
......@@ -17,10 +17,16 @@
"@babel/preset-env": "^7.24.5",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-image": "^3.0.3",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-url": "^8.0.2",
"postcss-import": "^16.1.0",
"postcss-url": "^10.1.3",
"rollup": "^4.17.2",
"rollup-plugin-copy": "^3.5.0",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-scss": "^4.0.0",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"sass": "^1.62.1",
......
postcss.config.js 0 → 100644
// TODO: 用于解决css图片内联问题, 目前未解决
module.exports = {
plugins: [
require('postcss-url')({
url: 'inline'
})
]
};
\ No newline at end of file
rollup.config.js
......@@ -5,41 +5,69 @@ const url = require("@rollup/plugin-url");
const commonjs = require("@rollup/plugin-commonjs");
const babel = require("@rollup/plugin-babel");
const scss = require("rollup-plugin-scss");
const copy = require("rollup-plugin-copy");
const getBabelOutputPlugin =
require("@rollup/plugin-babel").getBabelOutputPlugin;
const image = require("@rollup/plugin-image");
// const postcss = require("rollup-plugin-postcss");
module.exports = {
input: "./index.js",
output: {
dir: "dist",
format: "es",
format: "esm",
sourcemap: false,
},
plugins: [
vuePlugin(),
copy({
targets: [{ src: "src/style", dest: "dist" }],
}),
resolve({
preferBuiltins: false,
extensions: [".js", ".vue"], // 添加你要解析的扩展名
}),
url({
include: ["**/*.png", "**/*.svg"], // 包括所有的 PNG 文件
limit: 0, // 将所有文件复制到输出目录中
emitFiles: true, // 发布文件到输出目录
}),
// url({
// include: ["**/*.png", "**/*.svg", "**/*.jpg"], // 包括所有的 PNG 文件
// limit: 0, // 将所有文件复制到输出目录中
// emitFiles: true, // 发布文件到输出目录
// publicPath: '/assets/'
// }),
commonjs({
requireReturnsDefault: (id) => {
// console.log('id', id);
return true;
}, // <---- this solves default issue
}),/*
postcss({
extract: true, // 生成单独的 CSS 文件
plugins: [
require('postcss-import'),
require('postcss-url')({
url: 'inline', // 内联图片
maxSize: 10000, // 图片大小限制
fallback: 'rebase', // 对于大于限制的图片，使用相对路径引入
}),
],
}), */
image(),
scss({
// transformers: [(css) => css.replace(/url\(|\.png|\.jpg/g, "")],
}),
babel({
exclude: "node_modules/**",
getBabelOutputPlugin({
presets: ["@babel/preset-env"],
}),
scss(),
terser(),
],
external: (...args) => {
// console.log('args', args);
// node_modules下的库都不打包进去
if (args[0].includes("node_modules")) {
if (
args[0].includes("node_modules") &&
!args[0].includes("vue-runtime-helpers")
) {
return true;
}
},
......
src/components/MMCDataTransferPanel/index.vue
......@@ -63,7 +63,6 @@ export default {
</script>
<style scoped lang="scss">
.nest_controlBox {
position: relative;
height: 200px;
display: flex;
justify-content: start;
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/player/components/player/components/srs/index.vue
......@@ -5,14 +5,14 @@
</template>
<script>
import $ from "./jquery-1.10.2.min";
import jquery from "jquery";
import {
SrsRtcPublisherAsync,
SrsRtcPlayerAsync,
SrsRtcFormatSenders,
} from "./srs.sdk";
window.$ = $;
window.$ = jquery;
export default {
props: {
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/index.vue
<template>
<div class="left-bar" :class="{ collapse: listCollapse }">
<div class="control-left" :class="{ collapse: listCollapse }">
<div class="left-bar-item item" @click="onClickTask">
<img class="left-bar-item__icon" src="./assets/images/task.svg" />
<div class="left-bar-item__text">任务</div>
......@@ -167,9 +167,9 @@ export default {
top: -30px;
cursor: initial;
}
.left-bar {
.control-left {
position: absolute;
z-index: 1;
left: 470px;
top: 13%;
transition: 0.3s;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlBottom/index.vue
......@@ -369,6 +369,7 @@ export default {
transform: translate(-50%, 0);
display: flex;
gap: 34px;
z-index: 1;
.control-bottom-item {
box-sizing: border-box;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/index.vue
<template>
<div class="left-bar" :class="{ collapse: listCollapse }">
<div class="control-left" :class="{ collapse: listCollapse }">
<div class="left-bar-item item" @click="onClickTask">
<img class="left-bar-item__icon" src="./assets/images/task.svg" />
<div class="left-bar-item__text">任务</div>
......@@ -142,9 +142,9 @@ export default {
top: -30px;
cursor: initial;
}
.left-bar {
.control-left {
z-index: 1;
position: absolute;
left: 470px;
top: 13%;
transition: 0.3s;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/components/health/index.vue
......@@ -8,7 +8,7 @@
</div>
<div class="exit" @click="$emit('exit')">关闭</div>
</div>
<div class="nset_control_box_area p10">
<div class="nset_control_box_area">
<div class="wrj">
<div class="w97 h110 item" v-if="healthData.BAT">
<img src="./assets/images/info.png" alt @click="infoDetail('智能电池','BAT')" style="cursor: pointer;" />
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/index.vue
......@@ -186,6 +186,7 @@ export default {
position: absolute;
top: 70px;
right: 30px;
z-index: 1;
.control-list::v-deep {
display: flex;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/player/index.vue
......@@ -422,11 +422,11 @@ import Obstacle from "./components/obstacle";
import PointList from "./components/pointList";
import videoModelChange from "./components/videoModelChange";
import fkutils from "./methods/utils";
import 车牌检测 from './assets/images/车牌检测.svg';
import 火焰烟雾 from './assets/images/火焰烟雾.svg';
import 异物检测 from './assets/images/异物检测.svg';
import 跌倒检测 from './assets/images/跌倒检测.svg';
import 游泳检测 from './assets/images/游泳检测.svg';
import svg1 from "./assets/images/车牌检测.svg";
import svg2 from "./assets/images/火焰烟雾.svg";
import svg3 from "./assets/images/异物检测.svg";
import svg4 from "./assets/images/跌倒检测.svg";
import svg5 from "./assets/images/游泳检测.svg";
export default {
......@@ -460,7 +460,7 @@ export default {
},
data() {
return {
backgroundStyle: {
backgroundStyle: {
"background-position-y": 0,
},
aiIdentifyList: [
......@@ -468,64 +468,48 @@ export default {
title: "车牌识别",
aiType: 12,
class: "right28 top40",
Img: 车牌检测,
Img: svg1,
},
// {
// title: "绿化带分割",
// aiType: 11,
// class: "right102 top40",
// Img: require("./assets/images/绿化带分割.svg"),
// },
// {
// title: "车道分割线",
// aiType: 10,
// class: "right142 top40",
// Img: require("./assets/images/车道线分割.svg"),
// },
{
title: "车辆类型检测",
aiType: 9,
class: "right66 top40",
Img: 车辆检测,
Img: svg1,
},
// {
// title: "车辆朝向",
// aiType: 8,
// class: "right62 top40",
// Img: require("./assets/images/车辆朝向.svg"),
// },
{
title: "火焰烟雾",
aiType: 7,
class: "right-88 top40",
Img: 火焰烟雾,
Img: svg2,
},
{
title: "异物检测",
aiType: 6,
class: "right-11 top40",
Img: 异物检测,
Img: svg3,
},
{
title: "跌倒检测",
aiType: 5,
class: "right-50 top40",
Img: 跌倒检测,
Img: svg4,
},
{
title: "游泳检测",
aiType: 4,
class: " right66",
Img: 游泳检测,
Img: svg5,
},
],
ygisCenterFlag: false,
ygValue: null,
ygValue: null,
showCenter: false, //开启瞄准
screenRecordingStatus: false, //是否录制中
showInfo: false, //清流视频信息展示
infoData: null, //清流信息
raw_msg: 0,
carList: [], //车牌识别结果
aiVisible: false, //打开ai
pid: null,
......@@ -672,8 +656,7 @@ export default {
},
// 无人机实时数据
uavRealTimeData() {
return this.$store.state.MMCFlightControlCenter.uav
.uavRealTimeData;
return this.$store.state.MMCFlightControlCenter.uav.uavRealTimeData;
},
// 健康监测数据
healthData() {
......@@ -700,14 +683,16 @@ export default {
this.backgroundStyle = {
"background-position-y": gps.relativeAlt + "px",
};
this.num.one = Number(gps.relativeAlt.toFixed(0)) + 15;
this.num.two = Number(gps.relativeAlt.toFixed(0)) + 10;
this.num.three = Number(gps.relativeAlt.toFixed(0)) + 5;
this.num.four = Number(gps.relativeAlt.toFixed(0)) + 0;
this.num.five = Number(gps.relativeAlt.toFixed(0)) - 5;
this.num.six = Number(gps.relativeAlt.toFixed(0)) - 10;
this.num.seven = Number(gps.relativeAlt.toFixed(0)) - 15;
// }
if (this.num) {
this.num.one = Number(gps.relativeAlt.toFixed(0)) + 15;
this.num.two = Number(gps.relativeAlt.toFixed(0)) + 10;
this.num.three = Number(gps.relativeAlt.toFixed(0)) + 5;
this.num.four = Number(gps.relativeAlt.toFixed(0)) + 0;
this.num.five = Number(gps.relativeAlt.toFixed(0)) - 5;
this.num.six = Number(gps.relativeAlt.toFixed(0)) - 10;
this.num.seven = Number(gps.relativeAlt.toFixed(0)) - 15;
}
},
streamOptions: {
handler(value) {
......@@ -859,24 +844,21 @@ export default {
if (this.healthData.NX.code !== "0x2110000") {
return this.$message.error("录像失败，NX通信异常！");
}
this.$store.dispatch(
"MMCFlightControlCenter/uav/videoTranscribe",
{
playerFormat: this.streamSelect,
videoID: 1, // 视频通道ID（需保持唯一）
dbID: "929", // 历史记录id
name: "z30Pro", // 挂载名称（如果知道挂载名称，将传名称即可，通道号可以不用传）
taskID: "", // 任务ID，可传可不传
recordControl: true, // 录制开关、true为开启
callback: (isOk) => {
isOk &&
this.$message.success(
`${this.screenRecordingStatus ? "开始" : "结束"}录屏`
);
this.screenRecordingStatus = !this.screenRecordingStatus;
},
}
);
this.$store.dispatch("MMCFlightControlCenter/uav/videoTranscribe", {
playerFormat: this.streamSelect,
videoID: 1, // 视频通道ID（需保持唯一）
dbID: "929", // 历史记录id
name: "z30Pro", // 挂载名称（如果知道挂载名称，将传名称即可，通道号可以不用传）
taskID: "", // 任务ID，可传可不传
recordControl: true, // 录制开关、true为开启
callback: (isOk) => {
isOk &&
this.$message.success(
`${this.screenRecordingStatus ? "开始" : "结束"}录屏`
);
this.screenRecordingStatus = !this.screenRecordingStatus;
},
});
},
/**
* 拍照
......@@ -885,19 +867,16 @@ export default {
if (this.healthData.NX.code !== "0x2110000") {
return this.$message.error("拍照失败，NX通信异常！");
}
this.$store.dispatch(
"MMCFlightControlCenter/uav/takePhotos",
{
playerFormat: this.streamSelect,
videoID: 1, // 视频通道ID（需保持唯一）
dbID: "929", // 历史记录id
name: "z30Pro", // 挂载名称（如果知道挂载名称，将传名称即可，通道号可以不用传）
taskID: "", // 任务ID，可传可不传
callback: (isOk) => {
isOk && this.$message.success(`拍照完成`);
},
}
);
this.$store.dispatch("MMCFlightControlCenter/uav/takePhotos", {
playerFormat: this.streamSelect,
videoID: 1, // 视频通道ID（需保持唯一）
dbID: "929", // 历史记录id
name: "z30Pro", // 挂载名称（如果知道挂载名称，将传名称即可，通道号可以不用传）
taskID: "", // 任务ID，可传可不传
callback: (isOk) => {
isOk && this.$message.success(`拍照完成`);
},
});
},
//游泳识别
async aiIdentifyType(aiType) {
......@@ -1053,6 +1032,7 @@ export default {
<style lang="scss" scoped>
.video-wrap {
z-index: 1;
width: 718px;
height: 450px;
position: absolute;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/uavList/components/list/components/item/index.vue
......@@ -80,13 +80,10 @@
title="控制面板"
@click="onShowPanel(device)"
></div>
<div
class="jieg"
:class="{ active: device.currentOperator === userInfo.id }"
title="接管无人机 "
v-if="device.online"
@click="onTakeOver(device)"
></div>
<div class="jieg" title="接管无人机 " v-if="device.online" @click="onTakeOver(device)">
<img src="./assets/images/jieguan_active.svg" v-if="device.currentOperator" />
<img src="./assets/images/jieguan.svg" v-else />
</div>
</div>
</div>
</div>
......@@ -180,8 +177,7 @@ export default {
/**
* 显示面板
*/
onShowPanel(item) {
debugger
async onShowPanel(item) {
// 选中与取消选中
if (this.uav?.hardId === item.hardId) {
// 已打开播放器的情况下只需要展示数据面板
......@@ -217,7 +213,12 @@ export default {
if (this.uav) {
this.$store.dispatch("MMCFlightControlCenter/uav/unsubscribe");
}
if (!item.streamConfiguration) {
let res = await Control_API.uavDetail({
id: item.id,
});
item.streamConfiguration = res.data.streamConfiguration;
}
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPanel",
value: true,
......@@ -230,8 +231,8 @@ export default {
key: "uav",
value: {
...item,
showPlayer: true,
showPanel: true,
showPlayer: true
},
});
......@@ -278,10 +279,6 @@ export default {
item.streamConfiguration = res.data.streamConfiguration;
}
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "uav",
value: item,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPlayer",
value: true,
});
......@@ -289,6 +286,7 @@ export default {
key: "uav",
value: {
...item,
...this.uav || {},
showPlayer: true,
showPanel: this.showPanel,
},
......@@ -441,10 +439,11 @@ export default {
width: 20px;
cursor: pointer;
height: 20px;
background: url("./assets/images/jieguan.svg") no-repeat;
background-size: 100% 100%;
&.active {
background: url("./assets/images/jieguan_active.svg") no-repeat;
img {
width: 100%;
height: 100%;
}
}
.iconfont {
......
src/components/MMCFlightControlCenter/index.vue
<template>
<div class="mmc-filght-control-center">
<!-- cesium地图层 -->
<cesiumLayout></cesiumLayout>
<cesiumLayout v-if="!cesiumViewer"></cesiumLayout>
<!-- 地图切换组件 -->
<mapImageSwitch></mapImageSwitch>
<!-- 无人机应用 -->
......@@ -107,6 +107,10 @@ export default {
type: Number,
default: 0,
},
cesiumViewer: {
type: Object,
default: null
}
},
provide() {
return {
......@@ -157,6 +161,14 @@ export default {
key: "userInfo",
value: this.userInfo,
});
if(this.cesiumViewer){
this.$store.commit("MMCFlightControlCenter/setState", {
key: "cesiumViewer",
value: this.cesiumViewer
})
window.$mmc.viewer = this.cesiumViewer;
}
},
methods: {},
};
......
src/components/MMCFlightControlCenter/plugin/index.js 0 → 100644
import store from '../store';
export default {
install: function (Vue, options) {
Vue.mixin({
created: function () {
if(!this.$store){
return;
}
if(!this.$store.hasModule('MMCFlightControlCenter')){
this.$store.registerModule("MMCFlightControlCenter", store);
}
},
});
},
};
src/components/MMCFlightControlCenter/store/uav.js
......@@ -413,9 +413,9 @@ const actions = {
) {
// 默认坐标不记录
} else {
const posData = UAVDataParser(state.uavRealTimeData);
// const posData = UAVDataParser(state.uavRealTimeData); // 这种写法在执行rollup混淆压缩后, posData对象会变成elementUI的对象,原因未知
// 更新轨迹
positions.push(posData.position);
positions.push(UAVDataParser(state.uavRealTimeData).position);
}
window.positions = positions;
......
src/components/MMCPlayer/components/srs/index.vue
......@@ -5,14 +5,14 @@
</template>
<script>
import $ from "./jquery-1.10.2.min";
import jquery from "jquery";
import {
SrsRtcPublisherAsync,
SrsRtcPlayerAsync,
SrsRtcFormatSenders,
} from "./srs.sdk";
window.$ = $;
window.$ = jquery;
export default {
props: {
......
src/style/index.css 0 → 100644
@import './fonts/iconfont.css';
\ No newline at end of file
vue2/package.json
......@@ -24,7 +24,9 @@
"buffer": "^6.0.3",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"mmc-stl-vue2-dist": "git+http://git.mmcuav.cn/stl-dist/mmc-stl-vue2-dist.git#v1.2.0",
"node-polyfill-webpack-plugin": "^3.0.0",
"postcss-url": "^10.1.3",
"process": "^0.11.10",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.47.0"
......
vue2/src/App.vue
......@@ -40,16 +40,16 @@
</template>
<script>
import store from '@/../../src/components/MMCFlightControlCenter/store';
// import store from '@/../../src/components/MMCFlightControlCenter/store';
export default {
name: 'App',
components: {
},
created(){
if(!this.$store.hasModule('MMCFlightControlCenter')){
/* if(!this.$store.hasModule('MMCFlightControlCenter')){
this.$store.registerModule("MMCFlightControlCenter", store);
}
} */
},
methods: {
onSelect(index){
......
vue2/src/main.js
......@@ -5,8 +5,10 @@ import router from "./router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// import MMCSTL from 'mmc-stl-vue2';
import MMCSTL from '../../index';
// import MMCSTL from '../../dist/index';
// import MMCSTL from 'mmc-stl-vue2-dist';
// import MMCSTL from '../../index';
import MMCSTL from '../../dist/index';
import '../../dist/style/index.css';
// Vue.config.productionTip = false
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论