windows提交
This commit is contained in:
98
src/DataView/APPDataview.vue
Normal file
98
src/DataView/APPDataview.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
<a-layout style="height: 100vh; width: 100vw;">
|
||||
<a-layout-header>
|
||||
<menubardatavue></menubardatavue>
|
||||
</a-layout-header>
|
||||
<a-layout>
|
||||
<a-layout-sider :resize-directions="['right']" style=" min-width: 200px;max-width: 50vw;">
|
||||
<a-dropdown trigger="contextMenu" alignPoint :style="{ display: 'block' }">
|
||||
<GuiLeftSider class="lefttree" v-on:NodeClicked="ononeFilechoese"></GuiLeftSider>
|
||||
<template #content>
|
||||
<a-doption>Option 1</a-doption>
|
||||
<a-doption>Option 2</a-doption>
|
||||
<a-doption>Option 3</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-layout-sider>
|
||||
<a-layout-content class="right">
|
||||
<GuiForDataShow ref="GuiForDataShow"></GuiForDataShow>
|
||||
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
<a-layout-footer>Footer</a-layout-footer>
|
||||
</a-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menubardatavue from './menuvue/menubar.vue';
|
||||
import GuiForDataShow from './vuecomponents/GuiForDataShow.vue';
|
||||
import GuiLeftSider from './vuecomponents/GuiLeftSider.vue';
|
||||
export default {
|
||||
name: 'APPDataview',
|
||||
components: {
|
||||
menubardatavue,
|
||||
GuiForDataShow,
|
||||
GuiLeftSider
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 初始化数据
|
||||
message: '欢迎使用 Vue!',
|
||||
treeData: [
|
||||
{
|
||||
title: 'Trunk 0-0',
|
||||
key: '0-0',
|
||||
children: [
|
||||
{
|
||||
title: 'Branch 0-0-0',
|
||||
key: '0-0-0',
|
||||
children: [
|
||||
{
|
||||
title: 'Leaf',
|
||||
key: '0-0-0-0',
|
||||
},
|
||||
{
|
||||
title: 'Leaf',
|
||||
key: '0-0-0-1',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Branch 0-0-1',
|
||||
key: '0-0-1',
|
||||
children: [
|
||||
{
|
||||
title: 'Leaf',
|
||||
key: '0-0-1-0',
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 方法定义
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式区域 */
|
||||
h1 {
|
||||
color: #42b983;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
12
src/DataView/appGloblefunction.js
Normal file
12
src/DataView/appGloblefunction.js
Normal file
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
install(app, options) {
|
||||
// 将整个 myFileMethod 实例挂载到全局属性 $fileUtils
|
||||
app.config.globalProperties.$fileUtils = myFileMethod;
|
||||
// 将 isElectron 函数也挂载到全局属性 $isElectron
|
||||
app.config.globalProperties.$isElectron = isElectron;
|
||||
// 如果还有其他全局组件、指令等，也可以在这里注册
|
||||
// app.component('MyGlobalComponent', MyGlobalComponent);
|
||||
// app.directive('my-directive', myDirective);
|
||||
console.log('fileUtilsPlugin 已安装');
|
||||
}
|
||||
};
|
||||
204
src/DataView/menuvue/menubar.vue
Normal file
204
src/DataView/menuvue/menubar.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<script >
|
||||
import { BDropdownItem,BDropdown,BDropdownDivider,BButtonGroup,BButton,BModal,BNavbar,BNavbarBrand,BNavbarNav,BNavItem,BNavItemDropdown,BToast,useToast } from 'bootstrap-vue-next';
|
||||
|
||||
import { ref,Teleport} from 'vue';
|
||||
|
||||
import EventBus from "../../eventBus.js";
|
||||
|
||||
export default {
|
||||
name: 'menubardatavue',
|
||||
components: {
|
||||
BDropdownItem,
|
||||
BDropdown,
|
||||
BDropdownDivider,
|
||||
BButtonGroup,
|
||||
BButton,
|
||||
BModal,
|
||||
BNavbar,
|
||||
BNavbarBrand,
|
||||
BNavbarNav,
|
||||
BNavItem,
|
||||
BNavItemDropdown,
|
||||
BToast
|
||||
|
||||
},
|
||||
emits: ['menubalclicked'],
|
||||
data() {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App',
|
||||
modal:false,
|
||||
DCbutton:{
|
||||
state:"init",
|
||||
|
||||
},
|
||||
WRbutton:{
|
||||
state:"init",
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
const active = ref(false);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return {active}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("keydown",this.handlekeydown)
|
||||
EventBus.on('SetMenubutton',this.setbutton);
|
||||
},
|
||||
methods: {
|
||||
setbutton(command){
|
||||
if (command.name == "DC"){
|
||||
this.DCbutton.state = command.state;
|
||||
}
|
||||
if (command.name == "WR"){
|
||||
this.WRbutton.state = command.state;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
showbox(){
|
||||
EventBus.emit('showbox',"hello","提示11")
|
||||
},
|
||||
changemainvue() {
|
||||
EventBus.emit('changemainvue');
|
||||
},
|
||||
|
||||
onmenuclick(type, name) {
|
||||
|
||||
|
||||
|
||||
|
||||
// console.log("menu " + name + " click");
|
||||
// let command = {
|
||||
// name: name,
|
||||
// type: type
|
||||
// }
|
||||
// this.$emit("menubalclicked", command)
|
||||
},
|
||||
handlekeydown(event) {
|
||||
// console.log(event.key);
|
||||
if (event.ctrlKey) {
|
||||
if (event.key == "n" || event.key == "N") {
|
||||
this.onmenuclick('Set', 'Workmode');
|
||||
}
|
||||
if (event.key == "d" || event.key == "D") {
|
||||
this.onmenuclick('Set', 'DevInfo');
|
||||
}
|
||||
if (event.key == "w" || event.key == "W") {
|
||||
this.onmenuclick('Set', 'Weavelenth');
|
||||
}
|
||||
if (event.key == "c" || event.key == "C") {
|
||||
this.onmenuclick('Set', 'Calibrate');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!--<script setup lang="ts">-->
|
||||
<!--import { BDropdownItem,BDropdown,BDropdownDivider,BButtonGroup,BButton,BModal,BNavbar,BNavbarBrand,BNavbarNav,BNavItem,BNavItemDropdown,BToast,useToast } from 'bootstrap-vue-next';-->
|
||||
<!--import { ref} from 'vue';-->
|
||||
<!--const {show1} = useToast();-->
|
||||
<!--const active = ref(false)-->
|
||||
<!--</script>-->
|
||||
<template>
|
||||
<BNavbar variant="dark" v-b-color-mode="'dark'" style="height: 3vh">
|
||||
|
||||
<BNavbarNav>
|
||||
<BNavItemDropdown text="文件" right>
|
||||
<BDropdownItem href="#">新建</BDropdownItem>
|
||||
<BDropdownItem href="#" >打开</BDropdownItem>
|
||||
<BDropdownItem href="#">保存</BDropdownItem>
|
||||
<BDropdownItem href="#">另存为</BDropdownItem>
|
||||
<BDropdownDivider></BDropdownDivider>
|
||||
<BDropdownItem href="#">退出</BDropdownItem>
|
||||
<BDropdownItem href="#" @click="onmenuclick('File','Advance')">高级</BDropdownItem>
|
||||
<BDropdownItem @click="onmenuclick('info','help')">帮助</BDropdownItem>
|
||||
</BNavItemDropdown>
|
||||
|
||||
<!-- <!– Navbar dropdowns –>-->
|
||||
|
||||
|
||||
<BNavItemDropdown text="设置" right>
|
||||
<!-- <BDropdownItem @click="onmenuclick('Set','Workmode')">工作模式</BDropdownItem>
|
||||
<BDropdownItem @click="onmenuclick('Set','DevInfo')">设备信息</BDropdownItem> -->
|
||||
<!-- <BDropdownItem @click="onmenuclick('Set','Weavelenth')">波长系数</BDropdownItem> -->
|
||||
<!-- <BDropdownItem @click="onmenuclick('Set','Weavelenthcoeff')">波长设定</BDropdownItem>
|
||||
<BDropdownItem @click="onmenuclick('Set','Calibrate')">定标</BDropdownItem>
|
||||
<BDropdownItem @click="onmenuclick('Set','CalibrateHH3')">HH3定标</BDropdownItem> -->
|
||||
</BNavItemDropdown>
|
||||
|
||||
<BNavItemDropdown text="窗口" right>
|
||||
|
||||
|
||||
<BDropdownItem @click="changemainvue()">数据采集</BDropdownItem>
|
||||
<!-- <BDropdownItem >ES</BDropdownItem>-->
|
||||
<!-- <BDropdownItem href="#">RU</BDropdownItem>-->
|
||||
<!-- <BDropdownItem href="#">FA</BDropdownItem>-->
|
||||
</BNavItemDropdown>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <Teleport to="body">-->
|
||||
<!-- <div class="toast-container position-fixed " style="top:0px;right: 0px;width: 300px" >-->
|
||||
<!-- <BToast v-model="active" variant="info" interval="10" value="100" progress-props="{-->
|
||||
<!-- variant: 'danger',-->
|
||||
<!-- },">-->
|
||||
<!-- <template #title>-->
|
||||
<!-- Title-->
|
||||
<!-- </template>-->
|
||||
<!-- 你好-->
|
||||
<!-- </BToast>-->
|
||||
<!-- </div>-->
|
||||
<!-- </Teleport>-->
|
||||
<!-- <BButton @click="active = !active">Toggle</BButton>-->
|
||||
</BNavbarNav>
|
||||
<!-- <div class="btgroup">
|
||||
<b-button variant="secondary" pill class="siglebt" @click="onmenuclick('Work','OPT')">OPT</b-button>
|
||||
<b-button :variant='DCbutton.state=="OK"?"success":"secondary"' pill class="siglebt" @click=" onmenuclick('Work','DC') ">DC</b-button>
|
||||
|
||||
<b-button :variant='WRbutton.state=="OK"?"success":"secondary"' pill class="siglebt" @click="onmenuclick('Work','WR')">WR</b-button>
|
||||
<b-button variant="secondary" pill class="siglebt" disabled @click="onmenuclick('Work','Rad')">Rad</b-button>
|
||||
<b-button variant="secondary" pill class="siglebt" @click="onmenuclick('Work','Save')">Save</b-button>
|
||||
|
||||
</div> -->
|
||||
</BNavbar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
background-color: #f8f9fa;
|
||||
width: 100vw;
|
||||
}
|
||||
.btgroup{
|
||||
position: absolute;
|
||||
right: 15%;
|
||||
}
|
||||
.siglebt{
|
||||
radio: 50%;
|
||||
font-size: 10px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
73
src/DataView/vuecomponents/GuiForDataShow.vue
Normal file
73
src/DataView/vuecomponents/GuiForDataShow.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<el-main style="height: 100%; width: 100%; overflow: auto;">
|
||||
<el-row class="secondhang">
|
||||
<GuiForPlotShow ref="ASDPlotShow" class="plotcontainer"></GuiForPlotShow>
|
||||
</el-row>
|
||||
<el-row class="firsthang">
|
||||
<el-col :span="10" class="diveinfo">
|
||||
设备信息
|
||||
<GuiForDivesInfo ref="GuiForDivesInforef"></GuiForDivesInfo>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
地图
|
||||
<!-- <MapContainer></MapContainer> -->
|
||||
<a-image
|
||||
width="200"
|
||||
src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GuiForPlotShow from "./GuiForPlotShow.vue";
|
||||
import MapContainer from "./MapContainer.vue";
|
||||
import GuiForDivesInfo from "./GuiForDivesInfo.vue";
|
||||
import {invoke} from "@tauri-apps/api/tauri";
|
||||
export default {
|
||||
name: "GuiForDataShow",
|
||||
components: {
|
||||
GuiForPlotShow,
|
||||
MapContainer,
|
||||
GuiForDivesInfo
|
||||
},
|
||||
methods: {
|
||||
async onloaddata(data){
|
||||
// console.log(data);
|
||||
let jsonfiletem = await this.$MyGetJsonData(data);
|
||||
this.$refs.ASDPlotShow.onloaddata(jsonfiletem);
|
||||
this.$refs.GuiForDivesInforef.onloaddata(jsonfiletem["ASDInfo"]);
|
||||
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
let aaa=await invoke("getoneirisfile",{path:"iris_data_example.iris"});
|
||||
console.log(aaa);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plotcontainer{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.firsthang{
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.secondhang{
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.diveinfo{
|
||||
|
||||
}
|
||||
</style>
|
||||
74
src/DataView/vuecomponents/GuiForDivesInfo.vue
Normal file
74
src/DataView/vuecomponents/GuiForDivesInfo.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="maincontemer">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>设备信息</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
|
||||
width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Value"
|
||||
|
||||
width="100px">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "GuiForDivesInfo",
|
||||
data(){
|
||||
return {
|
||||
tableData: [{
|
||||
name: '设备名称',
|
||||
Value: 'ARS'
|
||||
} ]
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
onloaddata(jsondata){
|
||||
//if (jsondata.isObject){
|
||||
this.tableData=[];
|
||||
this.tableData.push(...convertObjectToArray(jsondata));
|
||||
// }
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function convertObjectToArray(jsonObject) {
|
||||
const jsonArray = [];
|
||||
|
||||
for (const key in jsonObject) {
|
||||
if (jsonObject.hasOwnProperty(key)) {
|
||||
const keyValueObject = {
|
||||
name: key,
|
||||
Value: jsonObject[key]
|
||||
};
|
||||
jsonArray.push(keyValueObject);
|
||||
}
|
||||
}
|
||||
|
||||
return jsonArray;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.maincontemer{
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
425
src/DataView/vuecomponents/GuiForPlotShow.vue
Normal file
425
src/DataView/vuecomponents/GuiForPlotShow.vue
Normal file
@ -0,0 +1,425 @@
|
||||
<template>
|
||||
|
||||
<div class="elbutton" style="width: 100% ;max-height: 50px;">
|
||||
<el-button class="plotbutton">求导</el-button>
|
||||
<el-checkbox v-model="Prameter.smooth" @change="singleshowclicked($event,'Smooth')">平滑</el-checkbox>
|
||||
<el-checkbox @change="singleshowclicked($event,'single')">单条显示</el-checkbox>
|
||||
<el-checkbox @change="singleshowclicked($event,'Radiance')">Radiance</el-checkbox>
|
||||
|
||||
<el-button class="plotbutton" @click="onsavetcliked">导出数据</el-button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="echartbox">
|
||||
|
||||
<div class="chart-container" ref="chart"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import 'zrender/lib/svg/svg';
|
||||
|
||||
export default {
|
||||
name: "GuiForPlotShow",
|
||||
|
||||
data() {
|
||||
return {
|
||||
Prameter: {
|
||||
smooth: false,
|
||||
singleshow: false,
|
||||
Radiance: "DN",
|
||||
Data: null,
|
||||
zoomLock: false
|
||||
},
|
||||
//chart: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
singleshowclicked(event, slots) {
|
||||
if (slots == 'Radiance') {
|
||||
if (event) {
|
||||
this.Prameter.Radiance = "Radiance";
|
||||
} else {
|
||||
this.Prameter.Radiance = "DN";
|
||||
}
|
||||
if (this.Prameter.Data) {
|
||||
this.onloaddata(this.Prameter.Data);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// const customText = event.target.getAttribute('custom-text');
|
||||
if (slots == 'single') {
|
||||
if (event) {
|
||||
this.option.legend.selectedMode = 'single';
|
||||
} else {
|
||||
this.option.legend.selectedMode = 'multiple';
|
||||
let lenthofseries = this.option.series.length;
|
||||
this.option.legend.selected = [];
|
||||
for (let i = 0; i < lenthofseries; i++) {
|
||||
this.option.legend.selected.push(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (slots == 'Smooth') {
|
||||
let lenthofseries = this.option.series.length;
|
||||
this.option.legend.selected = [];
|
||||
for (let i = 0; i < lenthofseries; i++) {
|
||||
this.option.series[i].smooth = event;
|
||||
}
|
||||
}
|
||||
this.flushplot();
|
||||
},
|
||||
onsavetcliked(){
|
||||
let data=this.option;
|
||||
var lenthofseries = data.series.length;
|
||||
let xdata = [];
|
||||
let xbegin = data.xAxis.min;
|
||||
let xend = data.xAxis.max;
|
||||
for (let i = xbegin; i <= xend; i++) {
|
||||
xdata.push(i);
|
||||
}
|
||||
var datalenth=data.series[0].data.length;
|
||||
let content = "weavelength,";
|
||||
for (let i = 0; i < lenthofseries; i++) {
|
||||
content += data.series[i].name +",";
|
||||
|
||||
}
|
||||
content += "\n";
|
||||
for (let i = 0; i < datalenth; i++) {
|
||||
content += xdata[i] + ",";
|
||||
for (let j = 0; j < lenthofseries; j++) {
|
||||
content += data.series[j].data[i][1] + ",";
|
||||
}
|
||||
content += "\n";
|
||||
}
|
||||
|
||||
let orgdata=this.Prameter.Data;
|
||||
if (!orgdata){
|
||||
alert("没有数据")
|
||||
return;
|
||||
}
|
||||
let dateget=orgdata["Date"];
|
||||
// dataget 是"2024-05-11 12:01:31" 格式 转换成2024_05_11_12_01_31
|
||||
let dataname=dateget.replace(/-/g,"_");
|
||||
dataname=dataname.replace(/:/g,"_");
|
||||
dataname=dataname.replace(" ","_");
|
||||
dataname=dataname+"_"+this.Prameter.Radiance+".csv";
|
||||
|
||||
// alert(dateget1);
|
||||
|
||||
|
||||
createAndDownloadFile(dataname, content);
|
||||
|
||||
|
||||
},
|
||||
flushplot() {
|
||||
const chartDom = this.$refs.chart;
|
||||
let chart = echarts.getInstanceByDom(chartDom);
|
||||
chart.setOption(this.option);
|
||||
},
|
||||
onloaddata(data) {
|
||||
this.Prameter.Data = data;
|
||||
const chartDom = this.$refs.chart;
|
||||
let chart = echarts.getInstanceByDom(chartDom);
|
||||
this.option.series = [];
|
||||
// console.log(data);
|
||||
let jsonfiletem = data;
|
||||
let lenthofpint = jsonfiletem["Data"].length;
|
||||
;
|
||||
this.option.legend.data = [];
|
||||
//this.option.legend.selected=[];
|
||||
for (let j = lenthofpint - 1; j >= 0; j--) {
|
||||
let lenthofpointdata = jsonfiletem["Data"][j]["PointData"].length;
|
||||
|
||||
let bandsumnow = 0;
|
||||
if (jsonfiletem["Data"][j]["OptimizeResult"]["bandsum"]) {
|
||||
bandsumnow = jsonfiletem["Data"][j]["OptimizeResult"]["bandsum"];
|
||||
} else {
|
||||
bandsumnow = 2151;
|
||||
}
|
||||
|
||||
for (let k = 0; k < lenthofpointdata; k++) {
|
||||
let serilatemp = {
|
||||
type: 'line',
|
||||
//type: 'custom',
|
||||
// minInterval:0.0000000001,
|
||||
|
||||
symbol: 'none', // 不显示数据点
|
||||
smooth: true, // 不使用平滑处理
|
||||
//step: 'start' // 设置 step 类型的起始位置
|
||||
};
|
||||
if (this.Prameter.smooth) {
|
||||
serilatemp.smooth = true;
|
||||
}
|
||||
let temp = [];
|
||||
for (let ii = 0; ii < bandsumnow; ii++) {
|
||||
if (this.Prameter.Radiance == "Radiance")
|
||||
temp.push([ii + 350, jsonfiletem["Data"][j]["PointData"][k][this.Prameter.Radiance][ii] * 1000]);
|
||||
if (this.Prameter.Radiance == "DN")
|
||||
temp.push([ii + 350, jsonfiletem["Data"][j]["PointData"][k][this.Prameter.Radiance][ii]]);
|
||||
//temp.push([ii+350, jsonfiletem["Data"][j]["PointData"][k]["DN"][ii]]);
|
||||
|
||||
|
||||
}
|
||||
serilatemp.data = temp;
|
||||
//serilatemp.renderItem=baoluo,
|
||||
serilatemp.large = true;
|
||||
serilatemp.name = jsonfiletem["Data"][j]["PointData"][k]["PointName"];
|
||||
this.option.legend.data.push(jsonfiletem["Data"][j]["PointData"][k]["PointName"]);
|
||||
this.option.series.push(serilatemp);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
chart.setOption(this.option);
|
||||
var aaa = chart.getOption();
|
||||
aaa = {};
|
||||
},
|
||||
initChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
let chart = echarts.init(chartDom, null, {renderer: 'svg'});
|
||||
|
||||
this.option = {
|
||||
|
||||
toolbox: {
|
||||
left: 'center',
|
||||
itemSize: 25,
|
||||
top: 55,
|
||||
feature: {
|
||||
dataZoom: {},
|
||||
restore: {}
|
||||
}
|
||||
},
|
||||
// ECharts 配置选项
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: false,// 显示连续的刻度
|
||||
min: 350,
|
||||
max: 2500,
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside', // 内置数据区域缩放
|
||||
start: 0, // 初始缩放范围的起始位置（0%）
|
||||
end: 100 // 初始缩放范围的结束位置（100%）
|
||||
}
|
||||
]
|
||||
},
|
||||
animation: false,
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// minInterval: 1//只显示整数
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside', // 内置数据区域缩放
|
||||
start: 0, // 初始缩放范围的起始位置（0%）
|
||||
end: 100 // 初始缩放范围的结束位置（100%）
|
||||
}
|
||||
]
|
||||
//min:0,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside', // 内置数据区域缩放，包括滚轮缩放
|
||||
xAxisIndex: [0], // 对应 x 轴
|
||||
filterMode: 'none' // 不过滤数据
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置数据区域缩放，包括滚轮缩放
|
||||
yAxisIndex: [0], // 对应 y 轴
|
||||
filterMode: 'none' // 不过滤数据
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
legend: {
|
||||
data: ['曲线'], // 图例名称
|
||||
show: true,// 显示图例
|
||||
selectedMode: 'multiple', // 图例的选择模式。默认开启图例开关，可选single，multiple
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [[1, 150], [2, 230], [3, 224], [4, 218], [5, 135], [6, 147], [7, 260]], // 使用二维数组表示数据点的坐标
|
||||
type: 'line',
|
||||
//minInterval:0.0000000001,
|
||||
symbol: 'none', // 不显示数据点
|
||||
smooth: true, // 不使用平滑处理
|
||||
//step: 'start' // 设置 step 类型的起始位置
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(this.option);
|
||||
let that = this;
|
||||
window.addEventListener('resize', function () {
|
||||
that.echartresize();
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
getDataURL(chart) {
|
||||
// 获取图表数据 URL
|
||||
var url = chart.getDataURL({
|
||||
type: 'csv'
|
||||
});
|
||||
// 创建 XMLHttpRequest 对象
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url);
|
||||
xhr.setRequestHeader('Content-Type', 'application/csv');
|
||||
xhr.onload = function () {
|
||||
if (xhr.status === 200) {
|
||||
// 下载数据
|
||||
exportCSV(chart, 'data.csv', function () {
|
||||
return xhr.responseText;
|
||||
});
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
},
|
||||
|
||||
handleKeyDown(event) {
|
||||
// 按下 Ctrl 键
|
||||
if (event.ctrlKey) {
|
||||
this.Prameter.zoomLock = true;
|
||||
}
|
||||
},
|
||||
handleKeyUp(event) {
|
||||
// 释放 Ctrl 键
|
||||
if (!event.ctrlKey) {
|
||||
this.Prameter.zoomLock = false;
|
||||
}
|
||||
},
|
||||
handleClickOutside(event) {
|
||||
// 点击图表外部
|
||||
if (this.Prameter.zoomLock) {
|
||||
this.getDataURL(this.chart);
|
||||
}
|
||||
} ,
|
||||
echartresize(){
|
||||
console.log("resize")
|
||||
const chartDom = this.$refs.chart;
|
||||
let chart = echarts.getInstanceByDom(chartDom);
|
||||
|
||||
chart.resize();
|
||||
let width=chartDom.clientWidth;
|
||||
// if (width<800)
|
||||
// {
|
||||
// let option =this.option;
|
||||
// option.grid.left="10%";
|
||||
// chart.setOption(option);
|
||||
// }else{
|
||||
// let option =this.option;
|
||||
// option.grid.left="5%";
|
||||
// chart.setOption(option);
|
||||
// }
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
mounted() {
|
||||
this.initChart();
|
||||
window.addEventListener('keydown', this.handleKeyDown);
|
||||
window.addEventListener('keyup', this.handleKeyUp);
|
||||
window.addEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('keydown', this.handleKeyDown);
|
||||
window.removeEventListener('keyup', this.handleKeyUp);
|
||||
window.removeEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
|
||||
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
}
|
||||
};
|
||||
function exportCSV(chart, filename, getDataFn) {
|
||||
// 获取导出的数据
|
||||
var data = getDataFn();
|
||||
// 创建 Blob 对象
|
||||
var blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
|
||||
// 创建下载链接
|
||||
var downloadLink = document.createElement('a');
|
||||
downloadLink.setAttribute('download', filename);
|
||||
downloadLink.setAttribute('href', URL.createObjectURL(blob));
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
// 触发下载链接
|
||||
downloadLink.click();
|
||||
// 移除下载链接
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
function createAndDownloadFile(fileName, content) {
|
||||
// 创建一个 a 标签
|
||||
var aTag = document.createElement('a');
|
||||
// 创建一个 Blob 对象
|
||||
var blob = new Blob([content]);
|
||||
// 设置下载的文件名
|
||||
aTag.download = fileName;
|
||||
// 创建一个临时的 URL 指向 Blob 对象
|
||||
aTag.href = URL.createObjectURL(blob);
|
||||
// 模拟 a 标签的点击事件，触发下载
|
||||
aTag.click();
|
||||
// 释放创建的临时 URL 资源
|
||||
URL.revokeObjectURL(blob);
|
||||
}
|
||||
|
||||
|
||||
function baoluo(params, api) {
|
||||
// console.log(params);
|
||||
var xValue = api.value(0);
|
||||
var highPoint = api.coord([xValue, api.value(1)]);
|
||||
var lowPoint = api.coord([xValue, api.value(2)]);
|
||||
|
||||
return {
|
||||
type: 'line',
|
||||
shape: {
|
||||
x1: 350,
|
||||
y1: 10,
|
||||
x2: 400,
|
||||
y2: 100
|
||||
},
|
||||
style: api.style({
|
||||
stroke: 'rgba(0,255,0,0.2)',
|
||||
fill: 'none'
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.echartbox {
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.plotbutton {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
</style>
|
||||
78
src/DataView/vuecomponents/GuiLeftSider.vue
Normal file
78
src/DataView/vuecomponents/GuiLeftSider.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="el-treecontain">
|
||||
<el-tree :data="data" :props="defaultProps" class="el-treemain" @node-click="handleNodeClick"/>
|
||||
</div>
|
||||
<button @click="onopendata">click</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "GuiLeftSider",
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
label: '请选择',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
},
|
||||
DefualtPath: "\\ARS_data"
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
//if(this.$isElectron()) {
|
||||
this.DefualtPath="";
|
||||
return
|
||||
|
||||
// };
|
||||
await this.onopendata();
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
if (data.isLeaf)
|
||||
// console.log(getParentPath(data));
|
||||
this.$emit("NodeClicked", this.DefualtPath+getParentPath(data));
|
||||
|
||||
},
|
||||
async onopendata() {
|
||||
let cfiles = await this.$MyGetFolderlist(this.DefualtPath);
|
||||
this.data = [];
|
||||
this.data.push(cfiles);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getParentPath(node) {
|
||||
if (!node) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (node.parent) {
|
||||
return getParentPath(node.parent) + '\\' + node.label;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
el-tree{
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-treemain {
|
||||
min-width: 100%;
|
||||
white-space: nowrap; /* 不换行，使树节点水平排列 */
|
||||
display: inline-block; /* 横向排列 */
|
||||
text-align: left;
|
||||
}
|
||||
.el-treecontain{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
40
src/DataView/vuecomponents/HelloWorld.vue
Normal file
40
src/DataView/vuecomponents/HelloWorld.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
78
src/DataView/vuecomponents/MapContainer.vue
Normal file
78
src/DataView/vuecomponents/MapContainer.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div ref="mapContainer" id="map" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "maptalks/dist/maptalks.css";
|
||||
import * as maptalks from "maptalks";
|
||||
|
||||
export default {
|
||||
name: "MapContainer",
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
layer: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addpointtomap(lon,lat){
|
||||
var marker1 = new maptalks.Marker(
|
||||
[116.255535,40.204654],
|
||||
{
|
||||
'symbol': {
|
||||
'markerType': 'ellipse',
|
||||
'markerFill': 'rgb(135,196,240)',
|
||||
'markerFillOpacity': 1,
|
||||
'markerLineColor': '#34495e',
|
||||
'markerLineWidth': 3,
|
||||
'markerLineOpacity': 1,
|
||||
'markerLineDasharray': [],
|
||||
'markerWidth': 40,
|
||||
'markerHeight': 40,
|
||||
'markerDx': 0,
|
||||
'markerDy': 0,
|
||||
'markerOpacity': 1
|
||||
}
|
||||
}
|
||||
)
|
||||
marker1.addTo(this.layer);
|
||||
|
||||
},
|
||||
initializeMap() {
|
||||
this.map = new maptalks.Map('map', {
|
||||
center: [-0.113049,51.498568],
|
||||
zoom: 14,
|
||||
compassControl: {
|
||||
position: 'top-left',
|
||||
},
|
||||
|
||||
baseLayer: new maptalks.TileLayer('base', {
|
||||
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
|
||||
subdomains: ['a','b','c','d'],
|
||||
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
|
||||
})
|
||||
});
|
||||
this.map.setCenter([116.255535,40.204654]);
|
||||
this.layer=new maptalks.VectorLayer('vector').addTo(this.map);
|
||||
this.addpointtomap(0,0)
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initializeMap();
|
||||
// const mapOptions = {
|
||||
// center: [0, 0],
|
||||
// zoom: 10
|
||||
// };
|
||||
//
|
||||
// const map = new Map(this.$refs.mapContainer, mapOptions);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user