提交 d928407d 作者: 翁进城

build: rollup打包配置整合与相应代码优化

上级 9e254f63
流水线 #9330 已失败 于阶段
{
"presets": ["@babel/preset-env"]
}
\ No newline at end of file
......@@ -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 MMCFlightControlCenter from './dist';
import SymbolIcon from './src/components/symbol-icon';
......
......@@ -4,7 +4,7 @@
"description": "科比特前端标准化组件",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"build": "rm -rf dist & rollup -c"
},
"repository": {
"type": "git",
......@@ -15,10 +15,12 @@
"devDependencies": {
"@babel/core": "^7.24.5",
"@babel/preset-env": "^7.24.5",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-url": "^8.0.2",
"rollup": "^4.17.2",
"rollup-plugin-scss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"sass": "^1.62.1",
......
......@@ -3,9 +3,11 @@ const { terser } = require("rollup-plugin-terser");
const resolve = require("@rollup/plugin-node-resolve");
const url = require("@rollup/plugin-url");
const commonjs = require("@rollup/plugin-commonjs");
const babel = require("@rollup/plugin-babel");
const scss = require("rollup-plugin-scss");
module.exports = {
input: "./src/components/MMCFlightControlCenter/index.vue",
input: "./index.js",
output: {
dir: "dist",
format: "es",
......@@ -28,6 +30,10 @@ module.exports = {
return true;
}, // <---- this solves default issue
}),
babel({
exclude: "node_modules/**",
}),
scss(),
terser(),
],
external: (...args) => {
......
......@@ -5,7 +5,6 @@
<script>
import { mapState, mapActions } from "vuex";
import { User } from "../../api";
import _3dList from "./lib/3d";
import _2dList from './lib/2d';
......
......@@ -73,10 +73,11 @@
</template>
<script>
import jiantouIMG from './assets/images/jiantou.png';
export default {
data() {
return {
jian: require("./assets/images/jiantou.png"),
jian: jiantouIMG,
dakai: false, //变长变短
productType: false, // 产品类型
};
......
......@@ -10,7 +10,7 @@
</template>
<script>
const echarts = require("echarts");
import echarts from 'echarts';
export default {
name: "C0Chart",
data() {
......
......@@ -9,7 +9,7 @@
</template>
<script>
const echarts = require("echarts");
import echarts from 'echarts';
export default {
name: "NO2",
......
......@@ -9,7 +9,7 @@
</template>
<script>
const echarts = require("echarts");
import echarts from 'echarts';
export default {
name: "Ox",
......
......@@ -9,7 +9,7 @@
</template>
<script>
const echarts = require("echarts");
import echarts from 'echarts';
export default {
name: "PM",
......
......@@ -9,7 +9,7 @@
</template>
<script>
const echarts = require("echarts");
import echarts from 'echarts';
export default {
name: "PM10",
......
......@@ -9,7 +9,7 @@
</template>
<script>
const echarts = require("echarts");
import echarts from 'echarts';
export default {
name: "PM2",
......
......@@ -9,7 +9,7 @@
</template>
<script>
const echarts = require("echarts");
import echarts from 'echarts';
export default {
name: "SO2",
......
......@@ -533,6 +533,7 @@
<script>
import { MMC_Gimbal_Z60S } from "./js/index_1.js";
import { MMC_Gimbal_Z60R } from "./js/index.js";
import svgMB from "./mb.svg";
let targetPoint = null;
export default {
props: {
......@@ -683,7 +684,7 @@ export default {
targetPoint = window.viewer.entities.add({
position: new Cesium.CallbackProperty(() => this.position, false),
billboard: {
image: require("./mb.svg"),
image: svgMB,
width: 32,
height: 32,
},
......
......@@ -497,6 +497,7 @@
<script>
import { MMC_Gimbal_Z60S } from './js/index_1.js';
import { MMC_Gimbal_ZT60R } from './js/index.js';
import svgMB from "./mb.svg";
let targetPoint = null;
export default {
props: {
......@@ -647,7 +648,7 @@ export default {
targetPoint = window.viewer.entities.add({
position: new Cesium.CallbackProperty(() => this.position, false),
billboard: {
image: require('./mb.svg'),
image: svgMB,
width: 32,
height: 32
}
......
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdReadFileList extends Mavlink20 {
......@@ -28,4 +28,4 @@ class CmdReadFileList extends Mavlink20 {
}
module.exports = CmdReadFileList
\ No newline at end of file
export default CmdReadFileList
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdRecordName extends Mavlink20 {
......@@ -24,4 +24,4 @@ class CmdRecordName extends Mavlink20 {
}
}
module.exports = CmdRecordName
\ No newline at end of file
export default CmdRecordName
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdRecordState extends Mavlink20 {
......@@ -20,4 +20,4 @@ class CmdRecordState extends Mavlink20 {
return super.pack(this, this.crc_extra, jspack.Pack(this.format, [this.state, this.result]))
}
}
module.exports = CmdRecordState
\ No newline at end of file
export default CmdRecordState
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdSaveFile extends Mavlink20 {
format = '<BB100A';
......
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdServoAngle extends Mavlink20 {
......@@ -23,4 +23,4 @@ class CmdServoAngle extends Mavlink20 {
}
module.exports = CmdServoAngle
\ No newline at end of file
export default CmdServoAngle
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdSetSystemVolume extends Mavlink20 {
......@@ -21,4 +21,4 @@ class CmdSetSystemVolume extends Mavlink20 {
}
module.exports = CmdSetSystemVolume
\ No newline at end of file
export default CmdSetSystemVolume
\ No newline at end of file
const jspack = require("jspack").jspack
import Mavlink20 from "./mavlink20"
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
// mavlink20.GPI_MEDIA_STREAM_UPLOAD_START = 10 // 流上传开始
// mavlink20.GPI_MEDIA_STREAM_UPLOAD_STOP = 11 // 流上传停止
......
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdStreamUpData extends Mavlink20 {
......@@ -22,4 +22,4 @@ class CmdStreamUpData extends Mavlink20 {
}
module.exports = CmdStreamUpData
\ No newline at end of file
export default CmdStreamUpData
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20")
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdTts extends Mavlink20 {
......@@ -22,7 +22,7 @@ class CmdTts extends Mavlink20 {
}
module.exports = CmdTts
export default CmdTts
// let tts = new CmdTts("hello world")
......
const jspack = require("jspack").jspack
const Mavlink20Header = require("./mavlink20_header")
import jspack from 'jspack';
import Mavlink20Header from './mavlink20_header';
class Mavlink20 {
......@@ -45,4 +45,4 @@ class Mavlink20 {
}
module.exports = Mavlink20
\ No newline at end of file
export default Mavlink20
\ No newline at end of file
......@@ -8,4 +8,4 @@ class Mavlink20BadData {
}
}
module.exports = Mavlink20BadData
\ No newline at end of file
export default Mavlink20BadData
\ No newline at end of file
const jspack = require("jspack").jspack
import jspack from 'jspack';
class Mavlink20Header {
msgId;
......@@ -22,4 +22,4 @@ class Mavlink20Header {
}
}
module.exports = Mavlink20Header
\ No newline at end of file
export default Mavlink20Header
\ No newline at end of file
const CmdReadFileList = require("./cmd_read_file_list")
module.exports = {
import CmdReadFileList from './cmd_read_file_list';
export default {
100100: { format: '<BBB100A', type: CmdReadFileList, order_map: [0, 1, 2, 3], crc_extra: 250 },
}
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20")
const Mavlink20Header = require("./mavlink20_header")
const Mavlink20BadData = require("./mavlink20_bad_data")
const Mavlink20Map = require("./mavlink20_map")
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
import Mavlink20Header from './mavlink20_header';
import Mavlink20BadData from './mavlink20_bad_data';
import Mavlink20Map from './mavlink20_map';
// Buffer web polyfill
class Buffer {
......@@ -326,4 +326,4 @@ class MAVLink20Processor extends Mavlink20 {
}
module.exports = MAVLink20Processor
\ No newline at end of file
export default MAVLink20Processor
\ No newline at end of file
......@@ -80,4 +80,4 @@ PcmRecorder.prototype.onaudioprocess = function (e) {
this.cb && this.cb(data)
}
}
module.exports = PcmRecorder
\ No newline at end of file
export default PcmRecorder
\ No newline at end of file
import svg001 from './assets/images/observe/001.svg';
import svg002 from './assets/images/observe/002.svg';
import svg004 from './assets/images/observe/004.svg';
import svg005 from './assets/images/observe/005.svg';
import svg006 from './assets/images/observe/006.svg';
import svg007 from './assets/images/observe/007.svg';
import svg009 from './assets/images/observe/009.svg';
import svg010 from './assets/images/observe/010.svg';
import svg011 from './assets/images/observe/011.svg';
import svg019 from './assets/images/observe/019.svg';
import png008 from './assets/images/observe/008.png';
import png014 from './assets/images/observe/014.png';
import png015 from './assets/images/observe/015.png';
import png016 from './assets/images/observe/016.png';
import png017 from './assets/images/observe/017.png';
import png018 from './assets/images/observe/018.png';
import pngZ40S from './assets/images/observe/MMC_Gimbal_Z40S.png';
import pngZT60R from './assets/images/observe/MMC_Gimbal_ZT60R.png'
import svgGAS from './assets/images/observe/MMC_Gimbal_GAS.svg'
export default {
type_list: [
{
......@@ -36,28 +58,28 @@ export default {
list: [
{
title: '高清变焦相机',
icon: require('./assets/images/observe/001.svg'),
icon: svg001,
name: 'DJI_H20T',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./DJI_H20T')
},
{
title: '高清变焦相机',
icon: require('./assets/images/observe/001.svg'),
icon: svg001,
name: 'MMC_Gimbal_Z40',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_Z40')
},
{
title: '高清变焦相机',
icon: require('./assets/images/observe/001.svg'),
icon: svg001,
name: 'MMC_Gimbal_Z40N',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_Z40N')
},
{
title: '高清变焦相机Z33N',
icon: require('./assets/images/observe/001.svg'),
icon: svg001,
name: 'MMC_Gimbal_Z33N',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_Z33N')
......@@ -65,7 +87,7 @@ export default {
// Z40高清相机
{
title: '高清变焦相机Z20',
icon: require('./assets/images/observe/014.png'),
icon: png014,
name: 'MMC_Gimbal_Z20',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_Z20')
......@@ -73,7 +95,7 @@ export default {
// Z40S高清相机
{
title: '高清变焦相机Z40S',
icon: require('./assets/images/observe/MMC_Gimbal_Z40S.png'),
icon: pngZ40S,
name: 'MMC_Gimbal_Z40S',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_Z40S')
......@@ -81,7 +103,7 @@ export default {
// ZT60R高清相机
{
title: '高清变焦相机ZT60R',
icon: require('./assets/images/observe/MMC_Gimbal_ZT60R.png'),
icon: pngZT60R,
name: 'MMC_Gimbal_ZT60R',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_ZT60R/index.vue')
......@@ -89,7 +111,7 @@ export default {
// ZT60R高清相机
{
title: '高清变焦相机ZT60R',
icon: require('./assets/images/observe/MMC_Gimbal_ZT60R.png'),
icon: pngZT60R,
name: 'MMC_Gimbal_Z60R',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_Z60R/index.vue')
......@@ -97,28 +119,28 @@ export default {
// Z30Pro高清相机
{
title: '高清变焦相机Z30Pro',
icon: require('./assets/images/observe/015.png'),
icon: png015,
name: 'MMC_Gimbal_Z30Pro',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_Z30Pro/index.vue')
},
{
title: '喊话器',
icon: require('./assets/images/observe/002.svg'),
icon: svg002,
name: 'MMC_Gimbal_P0_Pro',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./MMC_Gimbal_P0_Pro')
},
{
title: '喊话器',
icon: require('./assets/images/observe/002.svg'),
icon: svg002,
name: 'MMC_Gimbal_P1_4G',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./PagerP1_New')
},
{
title: '探照灯',
icon: require('./assets/images/observe/004.svg'),
icon: svg004,
name: 'MMC_Gimbal_L60',
type: [3, 4],
component: () => import('./MMC_Gimbal_L60')
......@@ -126,97 +148,97 @@ export default {
// 探照灯L50
{
title: '探照灯',
icon: require('./assets/images/observe/016.png'),
icon: png016,
name: 'MMC_Gimbal_L50',
type: [3, 4],
component: () => import('./MMC_Gimbal_L50')
},
{
title: '红外热成像',
icon: require('./assets/images/observe/003.svg'),
icon: png016,
name: 'MMC_Gimbal_ZT1',
type: [3, 4, 5, 6],
component: () => import('./MMC_Gimbal_ZT1')
},
{
title: '抛投',
icon: require('./assets/images/observe/006.svg'),
icon: svg006,
name: 'MMC_Gimbal_S1',
type: [5, 6],
component: () => import('./MMC_Gimbal_S1')
},
{
title: '喷火器',
icon: require('./assets/images/observe/008.png'),
icon: png008,
name: 'MMC_Gimbal_FF6',
type: [5],
component: () => import('./MMC_Gimbal_FF6')
},
{
title: '水体采样器',
icon: require('./assets/images/observe/017.png'),
icon: png017,
name: 'MMC_Gimbal_QS',
type: [5],
component: () => import('./MMC_Gimbal_QS')
},
{
title: '双光',
icon: require('./assets/images/observe/007.svg'),
icon: svg007,
name: 'MMC_Gimbal_ZT30N',
type: [6],
component: () => import('./MMC_Gimbal_ZT30N')
},
{
title: '霹雳火',
icon: require('./assets/images/observe/005.svg'),
icon: svg005,
name: 'MMC_Gimbal_S79',
type: [7],
component: () => import('./MMC_Gimbal_S79')
},
{
title: '催泪弹',
icon: require('./assets/images/observe/009.svg'),
icon: svg009,
name: 'MMC_Gimbal_FE8',
type: [7, 8],
component: () => import('./MMC_Gimbal_FE8')
},
{
title: '破窗灭火器',
icon: require('./assets/images/observe/010.svg'),
icon: svg010,
name: 'MMC_Gimbal_FB1',
type: [7],
component: () => import('./MMCGimbalFB1')
},
{
title: '网枪',
icon: require('./assets/images/observe/011.svg'),
icon: svg011,
name: 'MMC_Gimbal_FN3',
type: [7, 8],
component: () => import('./MMCGimbalFN3')
},
{
title: '喊话器P3',
icon: require('./assets/images/observe/002.svg'),
icon: svg002,
name: 'MMC_Gimbal_P3',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./PagerP1_New')
},
{
title: '驱散器',
icon: require('./assets/images/observe/018.png'),
icon: png018,
name: 'MMC_Gimbal_P4',
type: [1, 2, 3, 4, 5, 6, 8],
component: () => import('./PagerP1_New')
},
{
title: '干粉灭火器',
icon: require('./assets/images/observe/019.svg'),
icon: svg019,
name: 'MMC_Gimbal_FE3',
component: () => import('./MMC_Gimbal_FE3')
},
{
title: '多气体检测',
icon: require('./assets/images/observe/MMC_Gimbal_GAS.svg'),
icon: svgGAS,
name: 'MMC_Gimbal_G6',
component: () => import('./MMC_Gimbal_GAS/index.vue')
}
......
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdReadFileList extends Mavlink20 {
......@@ -28,4 +28,4 @@ class CmdReadFileList extends Mavlink20 {
}
module.exports = CmdReadFileList
\ No newline at end of file
export default CmdReadFileList
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdRecordName extends Mavlink20 {
......@@ -24,4 +24,4 @@ class CmdRecordName extends Mavlink20 {
}
}
module.exports = CmdRecordName
\ No newline at end of file
export default CmdRecordName
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdRecordState extends Mavlink20 {
......@@ -20,4 +20,4 @@ class CmdRecordState extends Mavlink20 {
return super.pack(this, this.crc_extra, jspack.Pack(this.format, [this.state, this.result]))
}
}
module.exports = CmdRecordState
\ No newline at end of file
export default CmdRecordState
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdSaveFile extends Mavlink20 {
format = '<BB100A';
......
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdServoAngle extends Mavlink20 {
......@@ -23,4 +23,4 @@ class CmdServoAngle extends Mavlink20 {
}
module.exports = CmdServoAngle
\ No newline at end of file
export default CmdServoAngle
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdSetSystemVolume extends Mavlink20 {
......@@ -21,4 +21,4 @@ class CmdSetSystemVolume extends Mavlink20 {
}
module.exports = CmdSetSystemVolume
\ No newline at end of file
export default CmdSetSystemVolume
\ No newline at end of file
const jspack = require("jspack").jspack
import Mavlink20 from "./mavlink20"
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
// mavlink20.GPI_MEDIA_STREAM_UPLOAD_START = 10 // 流上传开始
// mavlink20.GPI_MEDIA_STREAM_UPLOAD_STOP = 11 // 流上传停止
......
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20");
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdStreamUpData extends Mavlink20 {
......@@ -22,4 +22,4 @@ class CmdStreamUpData extends Mavlink20 {
}
module.exports = CmdStreamUpData
\ No newline at end of file
export default CmdStreamUpData
\ No newline at end of file
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20")
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
class CmdTts extends Mavlink20 {
......@@ -22,7 +22,7 @@ class CmdTts extends Mavlink20 {
}
module.exports = CmdTts
export default CmdTts
// let tts = new CmdTts("hello world")
......
const jspack = require("jspack").jspack
const Mavlink20Header = require("./mavlink20_header")
import jspack from 'jspack';
import Mavlink20Header from './mavlink20_header';
class Mavlink20 {
......
......@@ -8,4 +8,4 @@ class Mavlink20BadData {
}
}
module.exports = Mavlink20BadData
\ No newline at end of file
export default Mavlink20BadData
\ No newline at end of file
const jspack = require("jspack").jspack
import jspack from 'jspack';
class Mavlink20Header {
msgId;
......@@ -22,4 +22,4 @@ class Mavlink20Header {
}
}
module.exports = Mavlink20Header
\ No newline at end of file
export default Mavlink20Header
\ No newline at end of file
const CmdReadFileList = require("./cmd_read_file_list")
module.exports = {
import CmdReadFileList from './cmd_read_file_list';
export default {
100100: { format: '<BBB100A', type: CmdReadFileList, order_map: [0, 1, 2, 3], crc_extra: 250 },
}
const jspack = require("jspack").jspack
const Mavlink20 = require("./mavlink20")
const Mavlink20Header = require("./mavlink20_header")
const Mavlink20BadData = require("./mavlink20_bad_data")
const Mavlink20Map = require("./mavlink20_map")
import jspack from 'jspack';
import Mavlink20 from './mavlink20';
import Mavlink20Header from './mavlink20_header';
import Mavlink20BadData from './mavlink20_bad_data';
import Mavlink20Map from './mavlink20_map';
// Buffer web polyfill
class Buffer {
......@@ -326,4 +326,4 @@ class MAVLink20Processor extends Mavlink20 {
}
module.exports = MAVLink20Processor
\ No newline at end of file
export default MAVLink20Processor
\ No newline at end of file
......@@ -80,4 +80,4 @@ PcmRecorder.prototype.onaudioprocess = function (e) {
this.cb && this.cb(data)
}
}
module.exports = PcmRecorder
\ No newline at end of file
export default PcmRecorder
\ No newline at end of file
......@@ -118,7 +118,9 @@
<script>
import data from "./data";
import { Viewer, Utils } from "../../../../../../lib/cesium";
import { Utils } from "../../../../../../lib/cesium";
import pngGJ from '../../assets/images/gj.png';
export default {
props: ["uavId","list"],
inject: ["g_cesium_layer", "g_collection"],
......@@ -230,7 +232,7 @@ export default {
lat: item.latitude,
alt: 0,
}),
image: require(`../../assets/images/gj.png`),
image: pngGJ,
scale: 1,
width: 54,
height: 89,
......
......@@ -9,7 +9,7 @@
:key="j"
class="obstacle-bar__item"
:class="`bar${i}-${j}`"
:src="require(`./assets/images/bar${i}-${j}.png`)"
:src="pngList[`bar${i}-${j}`]"
/>
</template>
</div>
......@@ -25,7 +25,7 @@
:key="j"
class="obstacle-bar__item"
:class="`bar${i}-${j}`"
:src="require(`./assets/images/bar${i}-${j}.png`)"
:src="pngList[`bar${i}-${j}`]"
/>
</template>
</div>
......@@ -41,7 +41,7 @@
:key="j"
class="obstacle-bar__item"
:class="`bar${i}-${j}`"
:src="require(`./assets/images/bar${i}-${j}.png`)"
:src="pngList[`bar${i}-${j}`]"
/>
</template>
</div>
......@@ -57,7 +57,7 @@
:key="j"
class="obstacle-bar__item"
:class="`bar${i}-${j}`"
:src="require(`./assets/images/bar${i}-${j}.png`)"
:src="pngList[`bar${i}-${j}`]"
/>
</template>
</div>
......@@ -68,6 +68,19 @@
</template>
<script>
import pngBar1_1 from './assets/images/bar1-1.png';
import pngBar1_2 from './assets/images/bar1-2.png';
import pngBar1_3 from './assets/images/bar1-3.png';
import pngBar2_1 from './assets/images/bar2-1.png';
import pngBar2_2 from './assets/images/bar2-2.png';
import pngBar2_3 from './assets/images/bar2-3.png';
import pngBar3_1 from './assets/images/bar3-1.png';
import pngBar3_2 from './assets/images/bar3-2.png';
import pngBar3_3 from './assets/images/bar3-3.png';
import pngBar4_1 from './assets/images/bar4-1.png';
import pngBar4_2 from './assets/images/bar4-2.png';
import pngBar4_3 from './assets/images/bar4-3.png';
//每一个显示块对应避障数组的映射关系
let angleMap = new Map();
angleMap.set("1-1", [32, 33]);
......@@ -116,6 +129,20 @@ export default {
3: -1,
4: -1,
},
pngList: {
"bar1-1": pngBar1_1,
"bar1-2": pngBar1_2,
"bar1-3": pngBar1_3,
"bar2-1": pngBar2_1,
"bar2-2": pngBar2_2,
"bar2-3": pngBar2_3,
"bar3-1": pngBar3_1,
"bar3-2": pngBar3_2,
"bar3-3": pngBar3_3,
"bar4-1": pngBar4_1,
"bar4-2": pngBar4_2,
"bar4-3": pngBar4_3,
}
};
},
computed: {
......
......@@ -98,6 +98,12 @@ import { Utils } from "../../../../../../lib/cesium";
import { mapState } from "vuex";
import { flightTaskAPI } from "../../../../../../api";
import { nanoid } from "nanoid";
import svgFace from './assets/images/face.svg';
import svgCar from './assets/images/car.svg';
import svgPeople from './assets/images/people.svg';
import svgSwim from './assets/images/swim.svg';
import svgYan from './assets/images/yan.svg';
import svgThings from './assets/images/things.svg';
export default {
props: {
......@@ -130,42 +136,42 @@ export default {
type: "人脸识别",
switch: false,
check: false,
img: require("./assets/images/face.svg"),
img: svgFace,
},
{
id: 2,
type: "车牌识别",
switch: false,
check: false,
img: require("./assets/images/car.svg"),
img: svgCar,
},
{
id: 3,
type: "人流识别",
switch: false,
check: false,
img: require("./assets/images/people.svg"),
img: svgPeople,
},
{
id: 4,
type: "游泳识别",
switch: false,
check: false,
img: require("./assets/images/swim.svg"),
img: svgSwim,
},
{
id: 7,
type: "烟雾识别",
switch: false,
check: false,
img: require("./assets/images/yan.svg"),
img: svgYan,
},
{
id: 6,
type: "异物识别",
switch: false,
check: false,
img: require("./assets/images/things.svg"),
img: svgThings,
},
],
lineNameAI: "",
......@@ -296,42 +302,42 @@ export default {
type: "人脸识别",
switch: false,
check: false,
img: require("./assets/images/face.svg"),
img: svgFace,
},
{
id: 2,
type: "车牌识别",
switch: false,
check: false,
img: require("./assets/images/car.svg"),
img: svgCar,
},
{
id: 3,
type: "人流识别",
switch: false,
check: false,
img: require("./assets/images/people.svg"),
img: svgPeople,
},
{
id: 4,
type: "游泳识别",
switch: false,
check: false,
img: require("./assets/images/swim.svg"),
img: svgSwim,
},
{
id: 7,
type: "烟雾识别",
switch: false,
check: false,
img: require("./assets/images/yan.svg"),
img: svgYan,
},
{
id: 6,
type: "异物识别",
switch: false,
check: false,
img: require("./assets/images/things.svg"),
img: svgThings,
},
];
}
......
......@@ -6,7 +6,7 @@
@click="change(item,true)"
v-if="item.id != 5"
class="w30 h36 ml10 mr10"
:src="require(`./img/select/${item.id}.svg`)"
:src="item.img"
></el-image>
<div v-else class="tc lh34 ml11" @click="handclickFn" title="主画面切换">切换</div>
</div>
......@@ -17,35 +17,43 @@
</div>
</template>
<script>
// import API from "../../../../../../api";
import svg0 from "./img/select/0.svg";
import svg1 from "./img/select/1.svg";
import svg2 from "./img/select/2.svg";
import svg3 from "./img/select/3.svg";
import svg5 from "./img/select/5.svg";
import svg12 from "./img/select/12.svg";
import svg13 from "./img/select/13.svg";
import svg23 from "./img/select/23.svg";
export default {
data() {
return {
imgList: [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 5 },
{ id: 12 },
{ id: 13 },
{ id: 23 },
{ id: 0 }
{ id: 1, img: svg1 },
{ id: 2, img: svg2 },
{ id: 3, ima: svg3 },
{ id: 5, img: svg5 },
{ id: 12, img: svg12 },
{ id: 13, img: svg13 },
{ id: 23, img: svg23 },
{ id: 0, img: svg0 },
],
key: 1,
flag: false,
isShow: false,
controlflag: true
controlflag: true,
};
},
props: {
data: {
type: Object,
default: () => ({})
default: () => ({}),
},
uavData: {
type: Object,
default: () => ({})
}
default: () => ({}),
},
},
inject: ["uav_This", "NXdata"],
watch: {
......@@ -62,17 +70,17 @@ export default {
this.key = value.modeType;
}
},
deep: true
}
deep: true,
},
},
created() {
// 查询清流拼接状态(视频融合是几分屏)
const streamData = {
data: {
data: {},
messageID: 1032
messageID: 1032,
},
type: 528
type: 528,
};
this.$emit("fn", streamData);
// this.handclickFn()
......@@ -89,9 +97,9 @@ export default {
} */
},
getImg(key) {
let arr = this.imgList.filter(item => item.id == key);
let arr = this.imgList.filter((item) => item.id == key);
if (arr) {
let img = require(`./img/default/${arr[0].id}.svg`);
let img = arr[0].img;
return img;
}
return "";
......@@ -107,11 +115,11 @@ export default {
let streamData = {
data: {
data: {
modeType: item.id
modeType: item.id,
},
messageID: 1033
messageID: 1033,
},
type: 528
type: 528,
};
this.$emit("fn", streamData);
console.log(streamData, "streamData");
......@@ -138,16 +146,16 @@ export default {
data: {
data: {
fuseFlag: true,
controlflag: this.controlflag
controlflag: this.controlflag,
},
messageID: 1018
messageID: 1018,
},
type: 528
type: 528,
};
console.log(streamData, "streamData");
this.$emit("fn", streamData);
}
}
},
},
};
</script>
<style scoped lang='scss'>
......
......@@ -422,6 +422,12 @@ 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';
export default {
name: "Player",
......@@ -462,7 +468,7 @@ export default {
title: "车牌识别",
aiType: 12,
class: "right28 top40",
Img: require("./assets/images/车牌检测.svg"),
Img: 车牌检测,
},
// {
// title: "绿化带分割",
......@@ -480,7 +486,7 @@ export default {
title: "车辆类型检测",
aiType: 9,
class: "right66 top40",
Img: require("./assets/images/车辆检测.svg"),
Img: 车辆检测,
},
// {
// title: "车辆朝向",
......@@ -492,25 +498,25 @@ export default {
title: "火焰烟雾",
aiType: 7,
class: "right-88 top40",
Img: require("./assets/images/火焰烟雾.svg"),
Img: 火焰烟雾,
},
{
title: "异物检测",
aiType: 6,
class: "right-11 top40",
Img: require("./assets/images/异物检测.svg"),
Img: 异物检测,
},
{
title: "跌倒检测",
aiType: 5,
class: "right-50 top40",
Img: require("./assets/images/跌倒检测.svg"),
Img: 跌倒检测,
},
{
title: "游泳检测",
aiType: 4,
class: " right66",
Img: require("./assets/images/游泳检测.svg"),
Img: 游泳检测,
},
],
ygisCenterFlag: false,
......
......@@ -2,6 +2,9 @@
import axios from 'axios';
import { Utils } from "../../../../../lib/cesium";
import { zoomTo } from "./zoomTo";
import pngAisu from '../assets/images/aisu.png';
import pngAier from '../assets/images/aier.png';
import pngAiing from '../assets/images/aiing.png';
// 识别类型 4 代表游泳 5:跌倒检测 6:异物检测7:火焰烟雾8:车辆朝向9:车辆类型检测 10:车道分割线 11:绿化带分割12:车牌识别
let urlList = {
......@@ -45,7 +48,7 @@ export default {
lat: Number(this.uavData.locationCoordinate3D.latitude),
alt: Number(this.uavData.locationCoordinate3D.altitude),
}),
image: require(`../assets/images/${flag ? 'aisu' : 'aier'}.png`),
image: flag ? pngAisu : pngAier,
scale: 1,
width: 54,
height: 89,
......@@ -703,7 +706,7 @@ export default {
lat: Number(this.uavData.locationCoordinate3D.latitude),
alt: Number(this.uavData.locationCoordinate3D.altitude),
}),
image: require("../assets/images/aiing.png"),
image: pngAiing,
scale: 1,
width: 54,
height: 89,
......
<template>
<div class="cpt-command-airway-edit">
<div class="header" v-interact>
<div class="hd-box">手动规划</div>
<div style="color: #08c2d1" class="hd-box cp">
<!-- <div @click="change_airway" v-if="isShow">
<span
class="iconfont"
:class="flag ? 'icon-shebeiliebiao' : 'icon-shebeiliebiao'"
></span>
<span class="ml5 mr5">{{ flag ? "鹰巢" : "无人机" }}</span>
<span
class="iconfont icon-shujushangchuan"
:class="flag ? 'icon-shujushangchuan' : 'icon-shujushangchuan'"
></span>
</div> -->
</div>
<div class="hd-box cp mr20" @click="exit">关闭</div>
</div>
<manual
:nestData="data"
v-if="visibleFlag"
:flag="flag"
@add="testEmit"
></manual>
<autoPlan v-if="!visibleFlag" :flag="flag" @add="testEmit"></autoPlan>
</div>
</template>
<script>
import autoPlan from "./autoPlan";
import manual from "./manual";
import dayjs from "dayjs";
let entitie = null;
export default {
components: {
autoPlan,
manual,
},
props: {
//为true是 规划航线为鹰巢
flag: {
type: Boolean,
default: false,
},
// 是否展示切换按钮
data: {
type: Object || Array,
default: () => {},
},
},
data() {
return {
// 手动规划还是自动规划
visibleFlag: true,
};
},
watch: {
data: {
handler(value) {
this.showAreaFn(value);
},
immediate: true,
deep: true,
},
},
beforeDestroy() {
window.viewer.entities.remove(entitie);
},
methods: {
showAreaFn(data) {
if (entitie) {
window.viewer.entities.remove(entitie);
}
let positions = Cesium.Cartesian3.fromDegrees(
Number(data.longitude),
Number(data.latitude),
0
);
let ellipse = {
semiMinorAxis: 2500,
material: Cesium.Color.fromCssColorString("#2f6947").withAlpha(0.7),
semiMajorAxis: 2500,
rotation: Cesium.Math.toRadians(-40.0),
outline: true,
outlineWidth: 4,
stRotation: Cesium.Math.toRadians(90),
};
let entities = this.createAreaPoint(window.viewer, {
id: "showArea" + data.id + "yc",
position: positions,
title: data.name,
ellipse,
});
entitie = entities;
},
createAreaPoint(viewer, { position, title, id, ellipse, longitude }) {
let point = viewer.entities.add({
id: id || null,
name: "pointArea",
position,
ellipse: ellipse,
longitude: longitude || null,
// label: {
// text: title,
// font: "14pt monospace",
// style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// outlineWidth: 2,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// pixelOffset: new Cesium.Cartesian3(0.0, 32, 0.0),
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
// },
});
return point;
},
exit() {
// 为false时为飞控中心创建航线
this.$emit("quit");
},
testEmit(item) {
this.$emit("add", item);
},
},
inject: ["g_cesium_layer"],
};
</script>
<style lang="scss" scoped>
@import "~@/styles/var.scss";
@import "~@/styles/mixins.scss";
.cpt-command-airway-edit {
position: absolute;
left: 100px;
top: 54px;
width: 560px;
box-sizing: border-box;
background: rgba(0, 23, 79, 0.7);
box-shadow: 0 2px 4px 0 rgba(1, 162, 255, 0.35),
inset 0 0 40px 0 rgba(0, 184, 255, 0.5);
border-radius: 13px;
z-index: 4;
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 44px;
background: rgba(16, 65, 215, 0.2);
box-shadow: inset 0 0 15px 0 rgba(0, 182, 255, 0.6);
border-radius: 10px 10px 0 0;
}
.hd-box {
font-family: MicrosoftYaHei-Bold;
font-size: 18px;
color: #00ffff;
letter-spacing: 0;
font-weight: 700;
margin-left: 20px;
}
.ctx-box {
height: calc(100% - 56px - 88px);
box-sizing: border-box;
padding: 25px 0px 0px 58px;
overflow: auto;
.form-box {
::v-deep .el-form {
.divider {
@include linear_gradient_border(0, auto, 0, 0);
height: 22px;
}
.el-form-item {
.item-group {
display: flex;
align-items: center;
.unit {
font-family: MicrosoftYaHeiUI;
font-size: 18px;
color: rgb(179, 201, 203);
font-weight: 400;
margin-left: 12px;
}
.iconfont {
color: rgb(179, 201, 203);
font-size: 30px;
margin-left: 0.3em;
cursor: pointer;
}
.el-icon-location-outline {
color: rgb(179, 201, 203);
font-size: 30px;
margin-left: 0.3em;
cursor: pointer;
}
}
.el-form-item__label {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ccedff;
text-align: right;
font-weight: 400;
}
.el-input {
width: 356px;
height: 40px;
border: 1px solid #08c2d1;
.el-input__inner {
width: 100%;
border: none;
border-radius: 0;
background-color: #000000;
color: #fff;
}
}
.el-input-number {
width: 356px;
.el-input-number__decrease,
.el-input-number__increase {
bottom: 1px;
background: #606266;
color: #f5f7fa;
border-radius: 0;
border: none;
}
.el-input-number__decrease {
left: 1px;
}
.el-input-number__increase {
right: -1px;
}
}
}
}
}
}
.bottom-box {
box-sizing: border-box;
padding-bottom: 20px;
height: 88px;
display: flex;
justify-content: space-evenly;
align-items: center;
@include linear_gradient_border(0, auto, 0, 0);
.iconfont {
cursor: pointer;
font-size: 44px;
color: #08c2d1;
}
}
}
</style>
<style lang="scss">
.actions-box {
.title-box {
display: flex;
align-items: center;
.title {
font-size: 14px;
width: 70px;
}
}
.list-box {
max-height: 210px;
overflow: auto;
margin-top: 12px;
.action-item {
background-color: #ececec;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #fff;
box-sizing: border-box;
padding: 12px;
&:hover {
background-color: #ccc;
}
.item-inner {
display: flex;
align-items: center;
}
.iconfont {
color: red;
cursor: pointer;
font-size: 20px;
}
}
}
}
</style>
<template>
<div class="cpt-nest-dialog">
<div class="dialog-ctx" :style="containerStyle" :class="{ collapse,changeHeightStyle }">
<div v-if="showTitle" class="dialog-title">
{{ title }}
<div class="nav__left">
<slot name="nav__left"></slot>
</div>
<div class="nav__right " @click='handleClose'>
<slot name="nav__right"></slot>
</div>
</div>
<div class="dialog-bd">
<slot></slot>
</div>
<img v-if="isCollapse" @click="collapse = !collapse" src="~@/assets/images/observe/fckernel/collapse.png"
class="icon-collapse" />
<div class="wih100 h24 pa bottom0 nest-dialog_bottom cp pt5 tc" @click='changeHeight'>
<div class="w24 h24 dib " :class="changeHeightStyle ? 'xbStyle':'' "> <img src="~@/assets/images/observe/fckernel/xb.png" alt=""> </div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: () => "",
},
showTitle: {
type: Boolean,
default: () => false,
},
containerStyle: {
type: Object,
default: () => ({}),
},
isCollapse: {
type: Boolean,
default: () => true,
},
isCollapse2: {
type: Boolean,
default: () => false,
}
},
data() {
return {
collapse: false,
changeHeightStyle: false
};
},
methods: {
changeHeight() {
this.changeHeightStyle = !this.changeHeightStyle
},
handleClose() {
this.$emit("close");
},
},
};
</script>
<style lang="scss" scoped>
.cpt-nest-dialog {
position: absolute;
width: 100%;
z-index: 99;
.nest-dialog_bottom {
background: rgba(13, 82, 143, 0.60);
}
.changeHeightStyle {
height: 637px !important;
}
.xbStyle{
transform:rotateX(141deg) ;
}
.dialog-ctx {
position: absolute;
width: 476px;
height: 648px;
background: rgba(9, 32, 87, 0.70);
border: 1px solid #70DAF9;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
top: 90px;
left: 116px;
box-sizing: border-box;
display: flex;
flex-direction: column;
transform: translateY(0);
transition: 0.3s;
&.collapse {
transform: translateX(-100%);
}
.dialog-title {
width: 100%;
height: 32px;
line-height: 32px;
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
flex-shrink: 0;
margin: 0 auto;
background-size: 100% 100%;
color: #fff;
text-align: center;
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #92d9ff;
letter-spacing: 0;
text-align: center;
font-weight: 700;
position: relative;
.nav__left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.nav__right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
}
.dialog-bd {
flex: 1;
box-sizing: border-box;
overflow: auto;
}
.icon-close {
position: absolute;
top: 15px;
right: 13px;
font-size: 18px;
color: #2edfff;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.icon-collapse {
position: absolute;
right: -24px;
top: 50%;
transform: translateY(-50%);
height: 80px;
z-index: 1;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
<template>
<svg class="symbol-svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
import "@/assets/fonts/ali/iconfont.js";
export default {
name: "symbol-icon",
props: {
icon: {
type: String,
required: true,
},
},
computed: {
iconName() {
return `#icon-${this.icon}`;
},
},
};
</script>
<style>
.symbol-svg-icon {
width: 28px;
height: 28px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
\ No newline at end of file
<!-- 飞控中心头部 -->
<template>
<div class="cpt-fckernel-header">
<div class="title">飞控中心</div>
<div class="nav-list"
@click="go_home">
<div class="nav-item"
v-for="(item, index) in list"
:key="item.id"
:class="`${index <= list.length / 2 - 1 ? '_1' : '_2'} ${
curr_val === item.id ? 'selected' : undefined
}`"
@click.stop="handle_change_nav(item)">
<div class="text-box">{{ item.label }}</div>
</div>
</div>
<div class="date-box">
<div class="yyyy">{{ date}}</div>
<div class="week-box">
<div class="week">{{ week }}</div>
<div class="hhmm">{{ time }}</div>
</div>
</div>
</div>
</template>
<script>
import dayjs from "dayjs";
export default {
props: {
value: {
type: Number | String,
default: 0,
},
},
data () {
return {
now: null,
curr_val: 0,
list: [
{ id: 1, label: "无人机应用" },
{ id: 2, label: "鹰巢应用" },
],
week_map: {
0: "天",
1: "一",
2: "二",
3: "三",
4: "四",
5: "五",
6: "六",
},
};
},
watch: {
value: {
handler (value) {
this.curr_val = value;
},
deep: true,
immediate: true,
},
},
methods: {
handle_change_nav (item) {
if(item.id==1){
this.$store.commit("device/SET_VIDEO", false);
}else{}
this.curr_val = item.id;
this.$emit("input", this.curr_val);
this.$emit("nav-click", item);
},
go_home () {
let { href } = this.$router.resolve({ path: "/home" });
window.open(href, "_self");
setTimeout(() => {
this.$router.go(0);
}, 100);
},
},
computed: {
date () {
let { now } = this;
return now ? `${now.format("YYYY/MM/DD")}` : "0000/00/00";
},
week () {
let { now, week_map } = this;
return now ? `周${week_map[now.day()]}` : "周N/A";
},
time () {
let { now } = this;
return now ? `${now.format("HH:mm")}` : "00:00";
},
},
mounted () {
setInterval(() => {
this.now = dayjs();
}, 500);
},
created () {
this.now = dayjs();
},
};
</script>
<style lang="scss" scoped>
.cpt-fckernel-header {
height: 91px;
background-color: black;
position: fixed;
top: 0;
left: 0;
right: 0;
background: center url("~@/assets/images/observe/fckernel/01_header_bg.png")
no-repeat;
background-size: cover;
.title {
font-size: 32px;
font-family: Microsoft YaHei;
font-weight: bold;
text-align: center;
line-height: 80px;
background-image: linear-gradient(0deg, #e3aa77, #f9ecd3, #e3aa77);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-list {
width: 590px;
height: 77px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
.nav-item {
width: 223px;
height: 77px;
box-sizing: border-box;
background: center url("~@/assets/images/observe/fckernel/nav-item.png")
no-repeat;
background-size: cover;
text-align: center;
cursor: pointer;
transition: 0.3s;
&:hover,
&.selected {
background: center
url("~@/assets/images/observe/fckernel/nav-item-selected.png")
no-repeat;
.text-box {
color: #3df1ff;
}
}
.text-box {
line-height: 77px;
font-family: Microsoft YaHei Bold;
font-size: 20px;
color: #aab8d1;
font-weight: 700;
transition: 0.3s;
}
&._2 {
transform: scaleX(-1);
.text-box {
transform: scaleX(-1);
}
}
}
}
.date-box {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
left: 20px;
top: 0;
height: 60px;
box-sizing: border-box;
.yyyy {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
margin-bottom: 3px;
}
.week-box {
display: flex;
justify-content: space-between;
.week {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
}
.hhmm {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="nset_control_box">
<div class="nset_control_box_header lh34">
<slot name="nset__left" ></slot>
<slot name="nset__right" ></slot>
</div>
<div class="nset_control_box_area p10 pb30" :class="{changeHeightStyle}">
<slot></slot>
</div>
<div @click='changeHeight' class="wih100 h24 pa bottom0 cp nset_control_box_bottom tc">
<div class="w24 h24 dib " :class="changeHeightStyle ? 'xbStyle':'' "> <img
src="~@/assets/images/observe/fckernel/xb.png" alt=""> </div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
changeHeightStyle: false
}
},
methods: {
changeHeight() {
this.changeHeightStyle = !this.changeHeightStyle
},
},
}
</script>
<style lang="scss" scoped>
.nset_control_box {
min-height: 200px;
background: rgba(9, 32, 87, 0.70);
border: 1px solid #70DAF9;
position: absolute;
left: calc(50% - 352px);
top: 70px;
min-width: 700px;
.nset_control_box_header {
display: flex;
justify-content: space-between;
height: 32px;
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
}
.nset_control_box_bottom {
background: rgba(13, 82, 143, 0.60);
}
.xbStyle {
transform: rotateX(141deg);
}
.changeHeightStyle {
height: 300px;
}
}
</style>
\ No newline at end of file
<template>
<div class="w440 h177 noticeBox">
<div class="headerBox" v-interact>
<div class=" jcsb">
<div class="jcsb title">
<div style="border:1px solid #FFBD36;background-color:#FFBD36 ; " class="w1 h16 mr10"></div>
{{ title }}
</div>
<div class="cp" @click="$emit('exit')" style="color: #70DAF9;">
关闭
</div>
</div>
</div>
<div class="contant pt34 ">
<div class="mb34 cf pl22 pr22">
{{ content }}
</div>
<div class="jcsb pl76 pr76">
<div class="w122 h32 tc lh32 cf cp btn" @click="$emit('close')">{{ leftText }}</div>
<div v-if="flag" class="w122 h32 tc lh32 cf cp btn ml10 mr10" @click="$emit('qzjg')">强制接管</div>
<div class="w122 h32 tc lh32 cf cp btn" @click="$emit('handle')">{{ rightText }}</div>
</div>
</div>
</div>
</template>
<script>
import API from "@/api";
export default {
data() {
return {
}
},
props: {
title: {
'type': String,
default: '提示'
},
content: {
'type': String,
default: '某某某某某某某某某某某某单位请求接管000000无人机无人机无人机'
},
leftText: {
'type': String,
default: '拒绝'
},
rightText: {
'type': String,
default: '同意'
},
flag:{
'type': Boolean,
default: ()=>{ false}
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.noticeBox {
position: absolute;
left: 50%;
top: 40%;
transform: translateX(-50%);
z-index: 99;
background: rgba(9, 32, 87, 0.70);
border: 1px solid #70DAF9;
.headerBox {
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
padding: 5px 14px;
.title {
font-family: MicrosoftYaHei-Bold;
font-size: 16px;
color: #70DAF9;
letter-spacing: 0;
font-weight: 700;
}
}
.contant {
height: 146px;
text-align: center;
.btn {
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
}
}
}
</style>
\ No newline at end of file
......@@ -6,6 +6,7 @@ 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';
// Vue.config.productionTip = false
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论