Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai
commit
6ad5b44343
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 299 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,87 @@
|
||||
/*!
|
||||
* Very simple jQuery Color Picker
|
||||
* https://github.com/tkrotoff/jquery-simplecolorpicker
|
||||
*
|
||||
* Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
|
||||
*
|
||||
* Licensed under the MIT license
|
||||
*/
|
||||
|
||||
/**
|
||||
* Inspired by Bootstrap Twitter.
|
||||
* See https://github.com/twbs/bootstrap/blob/master/less/navbar.less
|
||||
* See https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less
|
||||
*/
|
||||
|
||||
.simplecolorpicker.picker {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
min-width: 160px;
|
||||
max-width: 283px; /* @popover-max-width = 276px + 7 */
|
||||
|
||||
padding: 5px 0 0 5px;
|
||||
margin: 2px 0 0;
|
||||
list-style: none;
|
||||
background-color: #fff; /* @dropdown-bg */
|
||||
|
||||
border: 1px solid #ccc; /* @dropdown-fallback-border */
|
||||
border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */
|
||||
|
||||
-webkit-border-radius: 4px; /* @border-radius-base */
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.simplecolorpicker.inline {
|
||||
display: inline-block;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.simplecolorpicker span {
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.simplecolorpicker.icon,
|
||||
.simplecolorpicker span.color {
|
||||
display: inline-block;
|
||||
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.simplecolorpicker.icon:after,
|
||||
.simplecolorpicker span.color:after {
|
||||
content: '\00a0\00a0\00a0\00a0'; /* Spaces */
|
||||
}
|
||||
|
||||
.simplecolorpicker span.color[data-disabled]:hover {
|
||||
cursor: not-allowed;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.simplecolorpicker span.color:hover,
|
||||
.simplecolorpicker span.color[data-selected],
|
||||
.simplecolorpicker span.color[data-selected]:hover {
|
||||
border: 1px solid #222; /* @gray-dark */
|
||||
}
|
||||
.simplecolorpicker span.color[data-selected]:after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Vertical separator, replaces optgroup. */
|
||||
.simplecolorpicker span.vr {
|
||||
border-left: 1px solid #222; /* @gray-dark */
|
||||
}
|
||||
@ -0,0 +1,235 @@
|
||||
/*!
|
||||
* Very simple jQuery Color Picker
|
||||
* https://github.com/tkrotoff/jquery-simplecolorpicker
|
||||
*
|
||||
* Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
|
||||
*
|
||||
* Licensed under the MIT license
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*/
|
||||
var SimpleColorPicker = function(select, options) {
|
||||
this.init('simplecolorpicker', select, options);
|
||||
};
|
||||
|
||||
/**
|
||||
* SimpleColorPicker class.
|
||||
*/
|
||||
SimpleColorPicker.prototype = {
|
||||
constructor: SimpleColorPicker,
|
||||
|
||||
init: function(type, select, options) {
|
||||
var self = this;
|
||||
|
||||
self.type = type;
|
||||
|
||||
self.$select = $(select);
|
||||
self.$select.hide();
|
||||
|
||||
self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
|
||||
|
||||
self.$colorList = null;
|
||||
|
||||
if (self.options.picker === true) {
|
||||
var selectText = self.$select.find('> option:selected').text();
|
||||
self.$icon = $('<span class="simplecolorpicker icon"'
|
||||
+ ' title="' + selectText + '"'
|
||||
+ ' style="background-color: ' + self.$select.val() + ';"'
|
||||
+ ' role="button" tabindex="0">'
|
||||
+ '</span>').insertAfter(self.$select);
|
||||
self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));
|
||||
|
||||
self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
|
||||
self.$colorList = self.$picker;
|
||||
|
||||
// Hide picker when clicking outside
|
||||
$(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
|
||||
self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
|
||||
} else {
|
||||
self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
|
||||
self.$colorList = self.$inline;
|
||||
}
|
||||
|
||||
// Build the list of colors
|
||||
// <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
|
||||
self.$select.find('> option').each(function() {
|
||||
var $option = $(this);
|
||||
var color = $option.val();
|
||||
|
||||
var isSelected = $option.is(':selected');
|
||||
var isDisabled = $option.is(':disabled');
|
||||
|
||||
var selected = '';
|
||||
if (isSelected === true) {
|
||||
selected = ' data-selected';
|
||||
}
|
||||
|
||||
var disabled = '';
|
||||
if (isDisabled === true) {
|
||||
disabled = ' data-disabled';
|
||||
}
|
||||
|
||||
var title = '';
|
||||
if (isDisabled === false) {
|
||||
title = ' title="' + $option.text() + '"';
|
||||
}
|
||||
|
||||
var role = '';
|
||||
if (isDisabled === false) {
|
||||
role = ' role="button" tabindex="0"';
|
||||
}
|
||||
|
||||
var $colorSpan = $('<span class="color"'
|
||||
+ title
|
||||
+ ' style="background-color: ' + color + ';"'
|
||||
+ ' data-color="' + color + '"'
|
||||
+ selected
|
||||
+ disabled
|
||||
+ role + '>'
|
||||
+ '</span>');
|
||||
|
||||
self.$colorList.append($colorSpan);
|
||||
$colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
|
||||
|
||||
var $next = $option.next();
|
||||
if ($next.is('optgroup') === true) {
|
||||
// Vertical break, like hr
|
||||
self.$colorList.append('<span class="vr"></span>');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Changes the selected color.
|
||||
*
|
||||
* @param color the hexadecimal color to select, ex: '#fbd75b'
|
||||
*/
|
||||
selectColor: function(color) {
|
||||
var self = this;
|
||||
|
||||
var $colorSpan = self.$colorList.find('> span.color').filter(function() {
|
||||
return $(this).data('color').toLowerCase() === color.toLowerCase();
|
||||
});
|
||||
|
||||
if ($colorSpan.length > 0) {
|
||||
self.selectColorSpan($colorSpan);
|
||||
} else {
|
||||
console.error("The given color '" + color + "' could not be found");
|
||||
}
|
||||
},
|
||||
|
||||
showPicker: function() {
|
||||
var pos = this.$icon.offset();
|
||||
this.$picker.css({
|
||||
// Remove some pixels to align the picker icon with the icons inside the dropdown
|
||||
left: pos.left - 6,
|
||||
top: pos.top + this.$icon.outerHeight()
|
||||
});
|
||||
|
||||
this.$picker.show(this.options.pickerDelay);
|
||||
},
|
||||
|
||||
hidePicker: function() {
|
||||
this.$picker.hide(this.options.pickerDelay);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the given span inside $colorList.
|
||||
*
|
||||
* The given span becomes the selected one.
|
||||
* It also changes the HTML select value, this will emit the 'change' event.
|
||||
*/
|
||||
selectColorSpan: function($colorSpan) {
|
||||
var color = $colorSpan.data('color');
|
||||
var title = $colorSpan.prop('title');
|
||||
|
||||
// Mark this span as the selected one
|
||||
$colorSpan.siblings().removeAttr('data-selected');
|
||||
$colorSpan.attr('data-selected', '');
|
||||
|
||||
if (this.options.picker === true) {
|
||||
this.$icon.css('background-color', color);
|
||||
this.$icon.prop('title', title);
|
||||
this.hidePicker();
|
||||
}
|
||||
|
||||
// Change HTML select value
|
||||
this.$select.val(color);
|
||||
},
|
||||
|
||||
/**
|
||||
* The user clicked on a color inside $colorList.
|
||||
*/
|
||||
colorSpanClicked: function(e) {
|
||||
// When a color is clicked, make it the new selected one (unless disabled)
|
||||
if ($(e.target).is('[data-disabled]') === false) {
|
||||
this.selectColorSpan($(e.target));
|
||||
this.$select.trigger('change');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Prevents the mousedown event from "eating" the click event.
|
||||
*/
|
||||
mousedown: function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
if (this.options.picker === true) {
|
||||
this.$icon.off('.' + this.type);
|
||||
this.$icon.remove();
|
||||
$(document).off('.' + this.type);
|
||||
}
|
||||
|
||||
this.$colorList.off('.' + this.type);
|
||||
this.$colorList.remove();
|
||||
|
||||
this.$select.removeData(this.type);
|
||||
this.$select.show();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin definition.
|
||||
* How to use: $('#id').simplecolorpicker()
|
||||
*/
|
||||
$.fn.simplecolorpicker = function(option) {
|
||||
var args = $.makeArray(arguments);
|
||||
args.shift();
|
||||
|
||||
// For HTML element passed to the plugin
|
||||
return this.each(function() {
|
||||
var $this = $(this),
|
||||
data = $this.data('simplecolorpicker'),
|
||||
options = typeof option === 'object' && option;
|
||||
if (data === undefined) {
|
||||
$this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
|
||||
}
|
||||
if (typeof option === 'string') {
|
||||
data[option].apply(data, args);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Default options.
|
||||
*/
|
||||
$.fn.simplecolorpicker.defaults = {
|
||||
// No theme by default
|
||||
theme: '',
|
||||
|
||||
// Show the picker or make it inline
|
||||
picker: false,
|
||||
|
||||
// Animation delay in milliseconds
|
||||
pickerDelay: 0
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "@sdd-web/smart-js-stable",
|
||||
"version": "2.3.0",
|
||||
"description": "中心智能配置智能算法版本解释器",
|
||||
"main": "dist/smart.js",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --mode development --config webpack.dev.config.js",
|
||||
"build:umd": "webpack --mode production --config webpack.umd.config.js",
|
||||
"build": "webpack --mode production --config webpack.prod.config.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@yfgitlab.dahuatech.com:sdd-web/npm/Smart-js.git"
|
||||
},
|
||||
"author": "232104",
|
||||
"license": "ISC",
|
||||
"browserslist": [
|
||||
"chrome 38"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-decorators": "^7.17.8",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-transform-modules-umd": "^7.16.7",
|
||||
"@babel/plugin-transform-runtime": "^7.17.0",
|
||||
"@babel/preset-env": "^7.16.11",
|
||||
"@babel/preset-es2015": "^7.0.0-beta.53",
|
||||
"@babel/preset-react": "^7.16.7",
|
||||
"@svgr/webpack": "^2.4.1",
|
||||
"babel-loader": "^8.2.4",
|
||||
"babel-plugin-import": "^1.13.5",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"copy-webpack-plugin": "^5.0.3",
|
||||
"css-loader": "^6.7.1",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"less": "^3.11.1",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"optimize-css-assets-webpack-plugin": "^6.0.1",
|
||||
"postcss-loader": "^7.0.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"terser-webpack-plugin": "^1.1.0",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.17.8",
|
||||
"@babel/polyfill": "^7.12.1",
|
||||
"@sdd-web/h5-player": "^3.1.38",
|
||||
"antd": "^3.19.1",
|
||||
"jquery": "^3.6.0",
|
||||
"layui": "^2.6.8",
|
||||
"react": "^16.6.3",
|
||||
"react-color": "^2.19.3",
|
||||
"react-dom": "^16.6.3"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
|
||||
(function(){
|
||||
String.prototype.startsWith = String.prototype.startsWith || function (str) {
|
||||
var reg = new RegExp("^" + str);
|
||||
return reg.test(this);
|
||||
}
|
||||
String.prototype.endsWith = String.prototype.endsWith || function (str) {
|
||||
var reg = new RegExp(str + "$");
|
||||
return reg.test(this);
|
||||
}
|
||||
}())
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
@ -0,0 +1,46 @@
|
||||
/*swtich背景色*/
|
||||
.layui-form-onswitch{
|
||||
background-color: #1E9FFF;
|
||||
border: #1E9FFF;
|
||||
}
|
||||
/*选择框背景色*/
|
||||
.layui-form-select dl dd.layui-this {
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
/*tab的字体和边框颜色*/
|
||||
.layui-tab-brief>.layui-tab-title .layui-this {
|
||||
color:#1E9FFF;
|
||||
}
|
||||
/*tab的边框颜色*/
|
||||
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
|
||||
border-bottom-color: #1E9FFF;
|
||||
}
|
||||
/*checkbox底色*/
|
||||
.layui-form-checked[lay-skin=primary] i {
|
||||
border-color:#1E9FFF !important;;
|
||||
background-color:#1E9FFF
|
||||
}
|
||||
.layui-form-checkbox[lay-skin=primary]:hover i {
|
||||
border-color:#1E9FFF;
|
||||
}
|
||||
|
||||
/*表格hover聚焦底色*/
|
||||
|
||||
.layui-table-highlight {
|
||||
background-color:#E6F7FF
|
||||
}
|
||||
.layui-table tbody tr:hover {
|
||||
background-color:#E6F7FF
|
||||
}
|
||||
.layui-table-edit {
|
||||
border-color:#40A9FF;
|
||||
}
|
||||
/*输入框颜色*/
|
||||
.layui-input:focus, .layui-textarea:focus,.layui-input:hover {
|
||||
border-color: #40A9FF !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
xm-select:active,xm-select:hover {
|
||||
border-color: #40A9FF !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
@ -0,0 +1,30 @@
|
||||
import { defHttp } from '@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
GetsupportList = '/api/DaHuaAi/GetsupportList',
|
||||
Getconfig = '/api/DaHuaAi/Getconfig',
|
||||
CreateTasks = '/api/DaHuaAi/CreateTasks',
|
||||
}
|
||||
|
||||
export function getsupportList(params) {
|
||||
return defHttp.post({
|
||||
url: Api.GetsupportList + '?page=' + params.page + '&limit=' + params.limit,
|
||||
});
|
||||
}
|
||||
|
||||
export function getconfig(params) {
|
||||
return defHttp.post({
|
||||
url:
|
||||
Api.Getconfig +
|
||||
'?version=' +
|
||||
params.version +
|
||||
'&functionType=' +
|
||||
params.functionType +
|
||||
'&algorithmCode=' +
|
||||
params.algorithmCode,
|
||||
});
|
||||
}
|
||||
|
||||
export function createTasks(params) {
|
||||
return defHttp.post({ url: Api.CreateTasks, params });
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
export { default as SelectComponent } from './src/SelectComponent.vue';
|
||||
export { default as StatisticsComponent } from './src/StatisticsComponent.vue';
|
||||
export { default as VideoStreamComponent } from './src/VideoStreamComponent.vue';
|
||||
|
||||
export { default as Map } from '../workplan/components/map.vue';
|
||||
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="flightoperation-top">
|
||||
<div class="select-item">
|
||||
<img src="@/assets/images/flightoperation/project.png" alt="" />
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="selectVal.project"
|
||||
style="width: 120px"
|
||||
:options="optionsArr.projectOptions"
|
||||
placeholder="项目选择"
|
||||
@change="handlePojectChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="select-item">
|
||||
<img src="@/assets/images/flightoperation/airport.png" alt="" />
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="selectVal.airport"
|
||||
style="width: 120px"
|
||||
:options="optionsArr.airportOptions"
|
||||
placeholder="机场选择"
|
||||
@change="handleAirPortChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="select-item">
|
||||
<img src="@/assets/images/flightoperation/equipment.png" alt="" />
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="selectVal.equipment"
|
||||
style="width: 120px"
|
||||
:options="optionsArr.equipmentOptions"
|
||||
placeholder="飞行器选择"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { GetWorkspaceList, GetWorkSpaceById, GetUavPageByDocksn } from '@/api/demo/projecthome';
|
||||
import { airPortStore } from '@/store/modules/airport';
|
||||
|
||||
const airPortStoreVal = airPortStore();
|
||||
const emits = defineEmits(['selectChange']);
|
||||
const selectVal = reactive({
|
||||
project: null,
|
||||
equipment: null,
|
||||
airport: null,
|
||||
gateway: null,
|
||||
});
|
||||
const optionsArr = reactive({
|
||||
projectOptions: [],
|
||||
equipmentOptions: [],
|
||||
airportOptions: [],
|
||||
});
|
||||
const handleChange = () => {
|
||||
airPortStoreVal.setAirPort('sn', selectVal.airport);
|
||||
airPortStoreVal.setUAV('sn', selectVal.equipment);
|
||||
airPortStoreVal.setGateway(selectVal.gateway);
|
||||
emits('selectChange', selectVal);
|
||||
};
|
||||
// 项目列表
|
||||
const getProjectList = async () => {
|
||||
GetWorkspaceList().then((res) => {
|
||||
if (res.length > 0) {
|
||||
optionsArr.projectOptions = res.map((item) => {
|
||||
return {
|
||||
label: item.WorkspaceName,
|
||||
value: item.Id,
|
||||
};
|
||||
});
|
||||
if (sessionStorage.getItem('homeToFlightId')) {
|
||||
selectVal.project = sessionStorage.getItem('homeToFlightId');
|
||||
sessionStorage.removeItem('homeToFlightId');
|
||||
} else {
|
||||
selectVal.project = optionsArr.projectOptions[0].value;
|
||||
}
|
||||
getAirPort(selectVal.project);
|
||||
} else {
|
||||
optionsArr.projectOptions = [];
|
||||
selectVal.project = null;
|
||||
getAirPort(selectVal.project);
|
||||
}
|
||||
});
|
||||
};
|
||||
const handlePojectChange = (val) => {
|
||||
getAirPort(val);
|
||||
};
|
||||
// 机场
|
||||
const getAirPort = (id) => {
|
||||
let params = {
|
||||
id: id,
|
||||
};
|
||||
GetWorkSpaceById(params).then((res) => {
|
||||
if (res.lasaDronePort.length > 0) {
|
||||
optionsArr.airportOptions = res.lasaDronePort.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.sn,
|
||||
};
|
||||
});
|
||||
selectVal.airport = optionsArr.airportOptions[0].value;
|
||||
getUAV(selectVal.airport);
|
||||
} else {
|
||||
optionsArr.airportOptions = [];
|
||||
selectVal.airport = null;
|
||||
optionsArr.equipmentOptions = [];
|
||||
selectVal.equipment = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleAirPortChange = (val) => {
|
||||
getUAV(val);
|
||||
};
|
||||
// 飞行器
|
||||
const getUAV = (sn) => {
|
||||
let params = {
|
||||
sn: sn,
|
||||
page: 1,
|
||||
limit: 99,
|
||||
};
|
||||
GetUavPageByDocksn(params).then((res) => {
|
||||
if (res.items.length > 0) {
|
||||
optionsArr.equipmentOptions = res.items.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.sn,
|
||||
gateway: item.gateway,
|
||||
};
|
||||
});
|
||||
selectVal.equipment = optionsArr.equipmentOptions[0].value;
|
||||
selectVal.gateway = optionsArr.equipmentOptions[0].gateway;
|
||||
handleChange();
|
||||
} else {
|
||||
optionsArr.equipmentOptions = [];
|
||||
selectVal.equipment = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getProjectList();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.flightoperation-top {
|
||||
display: flex;
|
||||
}
|
||||
.select-item {
|
||||
width: 160px;
|
||||
height: 38px;
|
||||
margin-left: 10px;
|
||||
background: #3a57e8;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
::v-deep .ant-select-selector {
|
||||
background: #3a57e8;
|
||||
border: none;
|
||||
color: #fff;
|
||||
.ant-select-selection-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-select-arrow {
|
||||
color: #fff;
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.select-item:nth-child(2) {
|
||||
background: #08b1ba;
|
||||
::v-deep .ant-select-selector {
|
||||
background: #08b1ba;
|
||||
}
|
||||
}
|
||||
.select-item:nth-child(3) {
|
||||
background: #1aa053;
|
||||
::v-deep .ant-select-selector {
|
||||
background: #1aa053;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="statistics-container">
|
||||
<div class="statistics-header">
|
||||
<div id="main"> </div>
|
||||
</div>
|
||||
<div class="map-container">
|
||||
<div class="map-container-content">
|
||||
<Map />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { Map } from '../index';
|
||||
|
||||
const initChart = () => {
|
||||
var chartDom = document.getElementById('main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
let date = [];
|
||||
let data = [Math.random() * 300];
|
||||
for (let i = 1; i < 40; i++) {
|
||||
date.push(i);
|
||||
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
||||
}
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
position: function (pt) {
|
||||
return [pt[0], '10%'];
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: '10',
|
||||
right: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
title: {
|
||||
left: '10',
|
||||
top: '10',
|
||||
text: '目标检测统计',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontsize: '12',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: date,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '100%'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '监测目标数量',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
sampling: 'lttb',
|
||||
itemStyle: {
|
||||
color: 'rgb(255, 172, 80)',
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 172, 80, 0.8)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(255, 172, 80,0.2)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.statistics-container {
|
||||
margin-left: 10px;
|
||||
.statistics-header {
|
||||
background: linear-gradient(180deg, rgba(13, 25, 45, 0.87) 0%, #182f4e 100%);
|
||||
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(3.62969752520624px);
|
||||
#main {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep canvas {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.map-container {
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.map-container-content {
|
||||
margin-top: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue