Skip to content

O
OpenXG-AIEngine
Commit a70b293a authored by wangdong's avatar wangdong
Browse files
Options

222

parent f9d0ee15
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4749 additions and 2469279 deletions
.babelrc
View file @ a70b293a
......@@ -26,5 +26,5 @@
]
}
},
"plugins": ["transform-runtime","transform-remove-strict-mode"]
"plugins": ["transform-remove-strict-mode","transform-runtime","transform-remove-strict-mode"]
}
src/renderer/components/ResultPages/CalPage.vue
View file @ a70b293a
<template>
<div>
<!--
{{getterRE}}
{{JSON.stringify(slice_info)}}
{{getterRE}}<br>
{{JSON.stringify(normal_d)}}<br>
{{ai_d}}<br>
{{ai_u}}<br> -->
<!-- <svg width="500" height="270">
<g style="transform: translate(0, 10px)">
<path :d="line" />
</g>
</svg> -->
<!-- <iframe id="show-iframe" style="height:500px;width:100%" frameborder=0 name="showHere" scrolling=auto :src="src"></iframe> -->
</div>
......@@ -13,29 +19,80 @@
<script>
import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import * as d3 from 'd3';
import * as numbers from 'numbers'
// 渲染进程接收主进程的传参
const { ipcRenderer } = require("electron");
const data = [99, 71, 78, 25, 36, 92];
Vue.use(vueJsonTreeView);
export default {
data() {
return {
data: [99, 71, 78, 25, 36, 92],
line: '',
dataList: [],
color_arrs:["info","danger","warning","success"],
slices_getter: "a",
};
},
computed: {
slice_info(){
return this.$store.state.slice_info
slice_info() {
return this.$store.state.slice_info;
},
total_prb() {
return this.$store.state.slice_info;
},
ai_u() {
let slice_info = this.$store.state.slice_info;
let res = [];
for (let j = 0; j < slice_info.length; j++) {
let index = slice_info[j].id;
if (j < 3) {
res.push(Number((slice_info[j].ddqn.arb ) / 25).toFixed(2)*1);
}
}
return res;
},
getterSlice() {
return this.$store.getters.getterSlice;
},
getterRE() {
return this.$store.state.re;
},
getterSliceRate() {
let slice_info =this.$store.state.slice_info
let rate=[]
slice_info.forEach((v,k)=>{
if(k<3)
rate.push([v.ddqn.thrpt1,this.$store.state.re[k]])
})
return rate;
},
ai_d() {
let res = [];
let slice_info = this.$store.state.slice_info;
let re = this.$store.state.re;
for (let j = 0; j < slice_info.length; j++) {
let index = slice_info[j].id;
if (j < 3) {
res.push((Math.abs(Number(re[j] - slice_info[j].ddqn.thrpt1).toFixed(2))));
}
}
return res;
},
normal_d() {
let res = [];
let re = this.$store.state.re;
let ue_list = this.$store.state.ue_list1;
for (let j = 0; j < ue_list.length; j++) {
let index = ue_list[j].id;
if (j < 3) {
res.push((Math.abs(Number(re[j] - ue_list[j].Mbs).toFixed(2))));
}
}
return res;
},
getterSlice(){
return this.$store.getters.getterSlice
}
,
getterRE(){
return this.$store.state.re
}
},
watch:{
// slice_info:{
......@@ -45,100 +102,27 @@ export default {
}
,
mounted() {
let a = {
dl: {
algorithm: "DDQN",
slices: [
{
id: 0,
label: "Besteffort",
ddqn: {
typeid: 0,
arb: 0,
mrb: 0,
},
},
],
},
};
ipcRenderer.on("eNB", (event, arg) => {
if (arg) {
flexranAPI.START_ENB({});
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
flexranAPI.ADD_SLICE(a, -1);
loading.close();
this.$message({
message: "成功启动OAI基站",
type: "success",
});
}, 4000);
}
});
ipcRenderer.on("eNBl2", (event, arg) => {
if (arg) {
flexranAPI.START_ENB_L2({});
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
flexranAPI.ADD_SLICE(a, -1);
loading.close();
this.$message({
message: "成功启动OAI基站",
type: "success",
});
}, 2000);
}
});
ipcRenderer.on("addUE", (event, arg) => {
if (arg) {
this.$prompt('请输入激活UE数目', 'L2-nFAPI', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[0-9]$|^[0-2][0-9]$|^3[0-2]$/,
inputErrorMessage: 'MAX_UE=32'
}).then(({ value }) => {
flexranAPI.START_ENB_L2({ues:value});
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
loading.close();
this.$message({
message: "成功启动OAI基站",
type: "success",
});
}, 2000);
setTimeout(()=>{
flexranAPI.ADD_SLICE(a, -1);
},4000)
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
// flexranAPI.ADD_UE({ueid:this.$store.state.ue_nums});
// console.log(arg)
// this.$store.commit("addUes", {});
}
});
},
methods: {
getScales() {
const x = d3.scaleTime().range([0, 430]);
const y = d3.scaleLinear().range([210, 0]);
d3.axisLeft().scale(x);
d3.axisBottom().scale(y);
x.domain(d3.extent(this.data, (d, i) => i));
y.domain([0, d3.max(this.data, d => d)]);
return { x, y };
},
calculatePath() {
const scale = this.getScales();
const path = d3.line()
.x((d, i) => scale.x(i))
.y(d => scale.y(d));
this.line = path(this.data);
},
},
};
</script>
......@@ -174,4 +158,12 @@ body,
color: #35495e;
font-weight: bold;
}
svg {
margin: 25px;
}
path{
fill: none;
stroke: #76BF8A;
stroke-width: 3px
}
</style>
src/renderer/components/ResultPages/D3Page.vue 0 → 100644
View file @ a70b293a
<template>
<div>
<div id="flex1" >
<div id="left">
<svg id="d3js" width="620px" height="200px"></svg>
<svg id="d3js1" width="620px" height="200px"></svg>
<svg id="d3js2" width="620px" height="200px"></svg>
</div>
<div id="right">
<svg id="d3js3" width="620px" height="200px"></svg>
<svg id="d3js4" width="620px" height="200px"></svg>
<svg id="d3js5" width="620px" height="200px"></svg>
</div>
<!-- <iframe id="show-iframe" style="height:500px;width:100%" frameborder=0 name="showHere" scrolling=auto :src="src"></iframe> -->
</div>
</div>
</template>
<script>
import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import * as timechart from "../../../utils/timechart";
import * as graph from "../../../utils/graph";
import * as numbers from 'numbers'
import * as d3 from "d3";
// 渲染进程接收主进程的传参
const { ipcRenderer } = require("electron");
const data = [99, 71, 78, 25, 36, 92];
Vue.use(vueJsonTreeView);
export default {
data() {
return {
data: [99, 71, 78, 25, 36, 92],
line: "",
dataList: [],
color_arrs: ["info", "danger", "warning", "success"],
slices_getter: "a",
timechart: [],
mult:0,
mult1:0,
mult2:0,
};
},
computed: {
slice_info() {
return this.$store.state.slice_info;
},
total_prb() {
return this.$store.state.slice_info;
},
ai_u() {
let slice_info = this.$store.state.slice_info;
let res = [];
for (let j = 0; j < slice_info.length; j++) {
let index = slice_info[j].id;
if (j < 3) {
res.push(Number((slice_info[j].ddqn.arb ) / 25).toFixed(2)*1);
}
}
return res;
},
getterSlice() {
return this.$store.getters.getterSlice;
},
getterRE() {
return this.$store.state.re;
},
getterSliceRate() {
let slice_info =this.$store.state.slice_info
let rate=[]
slice_info.forEach((v,k)=>{
if(k<3)
rate.push([v.ddqn.thrpt1,this.$store.state.re[k]])
})
return rate;
},
ai_d() {
let res = [];
let slice_info = this.$store.state.slice_info;
let re = this.$store.state.re;
for (let j = 0; j < slice_info.length; j++) {
let index = slice_info[j].id;
if (j < 3) {
res.push((Math.abs(Number(re[j] - slice_info[j].ddqn.thrpt1).toFixed(2))));
}
}
return res;
},
normal_d() {
let res = [];
let re = this.$store.state.re;
let ue_list = this.$store.state.ue_list1;
for (let j = 0; j < ue_list.length; j++) {
let index = ue_list[j].id;
if (j < 3) {
res.push((Math.abs(Number(re[j] - ue_list[j].Mbs).toFixed(2))));
}
}
return res;
},
},
watch: {
slice_info: {
handler(newValue, oldValue) {
this.mult=1/numbers.matrix.dotproduct(this.ai_u, this.ai_d);
this.mult1=1/numbers.matrix.dotproduct(this.normal_d, [0.25,0.25,0.25]);
this.mult2=(this.mult-this.mult1)/this.mult1;
this.$store.commit("up", {
up: Math.abs(this.mult2*100)==Infinity?0:Math.abs(this.mult2*100),
});
let rate_to_show=this.getterSliceRate
if (this.timechart)
this.timechart.forEach((v,k)=>{
if (v && k<3) {
let ue_list = this.$store.state.ue_list1;
rate_to_show[k%3].push(ue_list[k].Mbs)
var bytes = rate_to_show[k%3];
var stamp = Date.now() / 1000;
if (v.bytes !== undefined) {
v.chart.append(
stamp /* seconds! */,
v.bytes.map((d, i) => {
if (d === undefined || bytes[i] === undefined) return undefined;
// Value is bits/second estimate
else return bytes[i];
})
);
}
v.bytes = bytes;
v.stamp = stamp;
}
if (v && k>=3) {
let ue_list = this.$store.state.ue_list1;
if(k==3)
var bytes = [this.$store.state.slice_info[3].ddqn.thrpt1,ue_list[k].Mbs];
if(k==4)
var bytes = [(Math.abs(this.mult2*100)==Infinity?0:Math.abs(this.mult2*100))>400?400:(Math.abs(this.mult2*100)==Infinity?0:Math.abs(this.mult2*100)),30]
var stamp = Date.now() / 1000;
if (v.bytes !== undefined) {
v.chart.append(
stamp /* seconds! */,
v.bytes.map((d, i) => {
if (d === undefined || bytes[i] === undefined) return undefined;
// Value is bits/second estimate
else return bytes[i];
})
);
}
v.bytes = bytes;
v.stamp = stamp;
}
})
},
deep: true,
},
},
mounted() {
this.timechart.push(this.create("rate","App切片速率/目标速率（Mps）", "#d3js"));
this.timechart.push(this.create("rate","Audio切片速率/目标速率（Mps）", "#d3js1"));
this.timechart.push(this.create("rate","Video切片速率/目标速率（Mps）", "#d3js2"));
this.timechart.push(this.create("rate","BestEffort切片速率（Mps）", "#d3js3"));
this.timechart.push(this.create("percent","资源利用提升值", "#d3js4"));
this.timechart.push(this.create("percent","资源利用率提升比例", "#d3js5"));
},
methods: {
create(mode,name, id) {
let test = d3.select(id);
test.append("text")
.text(function(d){return ""+name;}).style("fill", "red").attr("transform", "translate(" + 40 + "," +30 + ")")
let test1 = test
.append("g")
.attr("transform", "translate(" + 10 + "," + 40 + ")")
.attr("class", "timechart");
let test2 = test1
.append("rect")
.attr("width", 500)
.attr("id", "rect")
.attr("height", 150)
.style("fill", "#fff")
.style("opacity", "0.5");
let test3 = test1._groups[0];
let b = timechart.timechart(test1, 500, 150, 120,mode);
return { chart: b };
},
cal(arr1,arr2){
}
},
};
</script>
<style scoped>
html,
body,
#app {
height: 100%;
display: flex;
}
#flex1 {
display: flex;
}
.linepath {
fill: none;
stroke-width: 0.5px;
}
.tick line,
.timechart .domain {
/* stroke-dasharray: 2 2; */
stroke-width: 0.5px;
stroke: #ccc;
}
.tick text {
font-size: 4px;
}
.timechart .linepath {
stroke-width: 0.5px;
}
.timechart > rect {
fill: #fff;
opacity: 0.5;
}
</style>
src/renderer/components/ResultPages/aapl.csv 0 → 100644
View file @ a70b293a
This diff is collapsed.
src/renderer/components/ResultPages/data.js
View file @ a70b293a
This diff is collapsed.
src/renderer/components/sliceInfos/BaseStationInfo.vue
View file @ a70b293a
......@@ -110,7 +110,6 @@
import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import * as flexranAPI from "../../../utils/flexranAPI";
let flag=1
export default {
data() {
return {
......@@ -128,6 +127,9 @@ export default {
this.getDataList();
},
computed: {
flag(){
return this.$store.state.flag;
},
slices() {
return this.$store.state.slice_info;
},
......@@ -153,9 +155,44 @@ export default {
},
dataList: {
handler(newValue, oldValue) {
console.log(this.flag)
if(newValue.length>=4 && this.flag){
flexranAPI
.CHANGE_SLICE_ASSOC(
{
ueConfig: [
{
imsi: 208920100001111,
dlSliceId: 1,
}, {
imsi: 208920100001100,
dlSliceId: 2,
}, {
imsi: 208920100001101,
dlSliceId: 3,
}, {
imsi: 208920100001102,
dlSliceId: 0,
},
],
},
this.$store.state.bs_id
).then((res) => {
console.log(res);
if (res.status == "Ok") {
this.$store.commit("updateFlag", {bool:false});
this.$message({
type: "success",
message: "切换成功!",
});
}
}).catch(err=>{
});
}
this.littleDate=newValue.slice((this.currentPage-1)*4,(this.currentPage-1)*4+4)
.
},
deep: true,
......@@ -170,6 +207,7 @@ export default {
mounted(){
this.littleDate=this.dataList.slice(0*4,+4)
this.littleDate1=this.dataList1.slice(0*4,+4)
},
methods: {
handleCurrentChange(val){
......
src/renderer/components/sliceInfos/SliceInformation.vue
View file @ a70b293a
<template>
<div>
<el-card>
<el-popover
placement="right"
width="620"
trigger="hover">
<prb-info></prb-info>
<el-button slot="reference">时频图</el-button>
</el-popover>
<el-popover placement="right" width="620" trigger="hover">
<prb-info></prb-info>
<el-button slot="reference">时频图</el-button>
</el-popover>
<el-table :data="slice_info" border stripe>
<el-table-column label="网络切片ID" width="75px">
<el-table-column label="网络切片ID" width="75px">
<template slot-scope="scope">
<el-button :type="color_arrs[scope.row.id]" circle> {{ scope.row.id }}</el-button>
</template>
<el-button :type="color_arrs[scope.row.id]" circle>
{{ scope.row.id }}</el-button
>
</template>
</el-table-column>
<el-table-column prop="label" label="业务类型" width="150px">
<template slot-scope="scope">
{{ scope.row.label }}
{{ scope.row.label }}
</template>
</el-table-column>
<el-table-column label="吞吐量(Mps)">
......@@ -32,7 +30,7 @@
</el-table-column>
<el-table-column label="PRB(x2)">
<template slot-scope="scope">
{{ scope.row.id==0?'*':scope.row.ddqn.mrb }}
{{ scope.row.id == 0 ? "*" : scope.row.ddqn.mrb }}
</template>
</el-table-column>
<el-table-column label="RB使用情况">
......@@ -47,8 +45,7 @@
</el-table-column> -->
</el-table>
</el-card>
<flex-ran></flex-ran>
<flex-ran></flex-ran>
<!-- <iframe id="show-iframe" style="height:500px;width:100%" frameborder=0 name="showHere" scrolling=auto :src="src"></iframe> -->
</div>
......@@ -59,7 +56,7 @@ import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import PRBInfo from "./PRBInfo";
import * as flexranAPI from "../../../utils/flexranAPI";
import FlexRan from '../SshPage/FlexRan.vue';
import FlexRan from "../SshPage/FlexRan.vue";
// 渲染进程接收主进程的传参
const { ipcRenderer } = require("electron");
......@@ -68,30 +65,28 @@ export default {
data() {
return {
dataList: [],
color_arrs:["info","danger","warning","success"],
color_arrs: ["info", "danger", "warning", "success"],
slices_getter: "a",
};
},
components: { "prb-info": PRBInfo,"flex-ran":FlexRan },
components: { "prb-info": PRBInfo, "flex-ran": FlexRan },
computed: {
slice_info(){
return this.$store.state.slice_info
slice_info() {
return this.$store.state.slice_info;
},
getterSlice() {
return this.$store.getters.getterSlice;
},
getterRE() {
return this.$store.state.re;
},
getterSlice(){
return this.$store.getters.getterSlice
}
,
getterRE(){
return this.$store.state.re
}
},
watch:{
watch: {
// slice_info:{
// function(val, oldVal) {console.log(val,oldVal)},
// deep: true
// }
}
,
},
mounted() {
let a = {
dl: {
......@@ -140,8 +135,9 @@ export default {
setTimeout(() => {
flexranAPI.ADD_SLICE(a, -1);
loading.close();
this.$message({
message: "成功启动OAI基站",
message: "成功启动OAI基站|updateFlag",
type: "success",
});
}, 2000);
......@@ -150,42 +146,43 @@ export default {
ipcRenderer.on("addUE", (event, arg) => {
if (arg) {
this.$prompt('请输入激活UE数目', 'L2-nFAPI', {
confirmButtonText: '确定',
cancelButtonText: '取消',
this.$prompt("请输入激活UE数目", "L2-nFAPI", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputPattern: /^[0-9]$|^[0-2][0-9]$|^3[0-2]$/,
inputErrorMessage: 'MAX_UE=32'
}).then(({ value }) => {
flexranAPI.START_ENB_L2({ues:value});
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
loading.close();
this.$message({
message: "成功启动OAI基站",
type: "success",
inputErrorMessage: "MAX_UE=32",
})
.then(({ value }) => {
flexranAPI.START_ENB_L2({ ues: value });
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
loading.close();
this.$store.commit("updateFlag", {bool:true});
this.$message({
message: "成功启动OAI基站",
type: "success",
});
}, 2000);
setTimeout(() => {
flexranAPI.ADD_SLICE(a, -1);
}, 4000);
})
.catch(() => {
this.$message({
type: "info",
message: "取消输入",
});
});
}, 2000);
setTimeout(()=>{
flexranAPI.ADD_SLICE(a, -1);
},4000)
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
// flexranAPI.ADD_UE({ueid:this.$store.state.ue_nums});
// console.log(arg)
// this.$store.commit("addUes", {});
}
});
},
};
</script>
......
src/renderer/main.js
View file @ a70b293a
......@@ -10,6 +10,7 @@ import store from './store/index';
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(Table);
Vue.use(ElementUI);
......
src/renderer/store/mutations.js
View file @ a70b293a
......@@ -25,6 +25,13 @@ const mutations = {
},
updateRE(state, obj) {
return state.re = obj.re;
},
updateFlag(state, obj) {
return state.flag = obj.bool;
}
,
up(state, obj) {
return state.up = obj.up;
}
}
const resize_ = (arr)=>{
......
src/renderer/store/rootState.js
View file @ a70b293a
const state = {
flag:true,
up:0,
slice_info:[],
ue_list:[],
ue_list1:[],
......
src/utils/graph.js 0 → 100644
View file @ a70b293a
This diff is collapsed.
yarn.lock
View file @ a70b293a
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment