Skip to content

Commit cb7b487

Browse files
niming2100niming2100
committed
[fix iotaledger-archive#275]add dev proxy config;show dag map
1 parent b05f7ab commit cb7b487

3 files changed

Lines changed: 221 additions & 46 deletions

File tree

‎scripts/front_end/web/config/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// see http://vuejs-templates.github.io/webpack for documentation.
2-
var path = require('path')
3-
2+
var path = require('path');
3+
var proxyConfig = require('./proxyConfig');
44
module.exports = {
55
build: {
66
env: require('./prod.env'),
@@ -27,12 +27,12 @@ module.exports = {
2727
autoOpenBrowser: true,
2828
assetsSubDirectory: 'static',
2929
assetsPublicPath: '/',
30-
proxyTable: {},
30+
proxyTable: proxyConfig.proxy,
3131
// CSS Sourcemaps off by default because relative paths are "buggy"
3232
// with this option, according to the CSS-Loader README
3333
// (https://github.com/webpack/css-loader#sourcemaps)
3434
// In our experience, they generally work as expected,
3535
// just be aware of this issue when enabling this option.
3636
cssSourceMap: false
3737
}
38-
}
38+
};

‎scripts/front_end/web/config/proxyConfig.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
proxy: {
3+
'/api': { //将www.exaple.com印射为/apis
4+
target: 'http://192.168.199.112:8000', // 接口域名
5+
secure: false, // 如果是https接口，需要配置这个参数
6+
changeOrigin: true, //是否跨域
7+
pathRewrite: {
8+
'^/api': '' //需要rewrite的,
9+
}
10+
}
11+
}
12+
};

‎scripts/front_end/web/src/views/nav1/DagDB.vue‎

Lines changed: 205 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,15 @@
2121

2222
<script>
2323
let requestHost = "";
24+
let nameMap = {};
2425
export default {
2526
data() {
2627
return {
2728
form: {
2829
server: ""
2930
},
3031
serverList: [
31-
{"name": "http://192.168.199.105:5000", "value": "http://192.168.199.105:5000"}
32+
{"name": "http://192.168.199.112:5000", "value": "http://192.168.199.112:5000"}
3233
]
3334
};
3435
},
@@ -43,11 +44,11 @@
4344
if (requestHost === "") {
4445
return;
4546
}
46-
let action = "get_dag";
47-
requestHost += "/" + action;
47+
let requestUrl = "";
48+
requestUrl = requestHost + "/get_dag";
4849
let request = {};
4950
let requestData = {"type": "JSON"};
50-
request.requestUrl = requestHost;
51+
request.requestUrl = requestUrl;
5152
request.requestData = JSON.stringify(requestData);
5253
this.axios.post("/api/QueryNodeDetail", request).then((res) => {
5354
if (res.data["Code"] === 0) {
@@ -60,59 +61,49 @@
6061
console.error(err);
6162
})
6263
},
63-
getTotalOrder() {
64-
if (requestHost === "") {
65-
return;
66-
}
67-
let action = "get_total_order";
68-
requestHost += "/" + action;
69-
let request = {};
70-
request.requestUrl = requestHost;
71-
request.requestData = "";
72-
this.axios.post("/api/QueryNodeDetail", request).then((res) => {
73-
console.log(res);
74-
}).catch((err) => {
75-
console.error(err);
76-
})
77-
},
7864
drawDagMap(data) {
7965
let myChart = this.$echarts.init(document.getElementById("dagChart"));
8066
myChart.showLoading();
8167
// prepare nodes
82-
let nodes = {};
68+
let nodes = this.prepareMapData(data);
69+
let datas = [];
70+
nodes.forEach(function (item) {
71+
let shortName = item.id.substr(0,6);
72+
let unit = {
73+
x: item.x,
74+
y: item.y,
75+
id: shortName,
76+
name: shortName,
77+
symbolSize: 15,
78+
itemStyle: {
79+
normal: {
80+
color: "rgb(63, 167, 220)"
81+
}
82+
}
83+
};
84+
datas.push(unit);
85+
nameMap[nameMap] = item.id;
86+
});
87+
console.log(JSON.stringify(datas));
8388
let relations = [];
8489
for (let i in data) {
85-
let unit = {};
86-
nodes[i] = 1;
87-
unit.target = i;
8890
let b = data[i];
8991
for (let j in b) {
90-
nodes[b[j]] = 1;
91-
unit.source = b[j];
92+
let unit = {};
93+
unit.target = i.substr(0,6);
94+
unit.source = b[j].substr(0,6);
9295
relations.push(unit);
9396
}
9497
}
98+
console.log(relations);
9599
//prepare charts datas
96100
let series = [];
97101
let seriesData;
98102
seriesData = {
99103
type: "graph",
100-
layout: "force",
104+
layout: "none",
101105
edgeSymbol: ['arrow'],
102-
data: Object.keys(nodes).map(function (item) {
103-
return {
104-
x: null,
105-
y: null,
106-
id: item,
107-
name: item,
108-
symbolSize: 25,
109-
itemStyle: {
110-
normal: {
111-
color: "rgb(63, 167, 220)"
112-
}
113-
}
114-
};
115-
}),
106+
data: datas,
116107
edges: relations.map(function (edge) {
117108
return {
118109
source: edge.source,
@@ -135,8 +126,8 @@
135126
}
136127
},
137128
force: {
138-
repulsion: 200,
139-
edgeLength: [200, 200]
129+
repulsion: 150,
130+
edgeLength: [50, 250]
140131
}
141132
};
142133
series[0] = seriesData;
@@ -168,6 +159,178 @@
168159
});
169160
myChart.hideLoading();
170161
},
162+
prepareMapData(data) {
163+
//get root node
164+
let root = "";
165+
let keys = [];
166+
let values = {};
167+
for (let i in data) {
168+
keys.push(i);
169+
let b = data[i];
170+
for (let j in b) {
171+
values[b[j]] = 1;
172+
}
173+
}
174+
for (let i in keys) {
175+
if (values[keys[i]] == null) {
176+
root = keys[i];
177+
break;
178+
}
179+
}
180+
let resultData = [];
181+
let existNode = {};
182+
let startx = 0;
183+
let starty = 500;
184+
let unit = {0: 80, 1: -80};
185+
if (root !== "") {
186+
let createMap = function (nodeName, data, x, y) {
187+
if (!data[nodeName] || existNode[nodeName]) {
188+
return;
189+
} else {
190+
let item = {};
191+
item.id = nodeName;
192+
item.x = x;
193+
item.y = y;
194+
resultData.push(item);
195+
existNode[nodeName] = 1;
196+
for (var i = 0, j = data[nodeName].length; i < j; i++) {
197+
if (j > 1) {
198+
createMap(data[nodeName][i], data, x + 100, y + unit[i]);
199+
} else {
200+
createMap(data[nodeName][i], data, x + 100, y);
201+
}
202+
}
203+
}
204+
};
205+
createMap(root, data, startx, starty);
206+
}
207+
return resultData;
208+
},
209+
getTotalOrder() {
210+
if (requestHost === "") {
211+
return;
212+
}
213+
let requestUrl = "";
214+
requestUrl = requestHost + "/get_total_order";
215+
let request = {};
216+
request.requestUrl = requestUrl;
217+
request.requestData = "";
218+
this.axios.post("/api/QueryNodeDetail", request).then((res) => {
219+
if (res.data["Code"] === 0) {
220+
alert(data["Message"]);
221+
} else {
222+
let data = JSON.parse(res.data["Data"]);
223+
this.drawOrderMap(data);
224+
}
225+
}).catch((err) => {
226+
console.error(err);
227+
})
228+
},
229+
drawOrderMap(data) {
230+
let myChart = this.$echarts.init(document.getElementById("dagChart"));
231+
myChart.showLoading();
232+
let treeData = this.prepareTreeData(data);
233+
let series = [];
234+
let seriesData;
235+
seriesData = {
236+
type: 'tree',
237+
data: [treeData],
238+
top: '1%',
239+
left: '2%',
240+
bottom: '1%',
241+
right: '2%',
242+
symbolSize: 10,
243+
label: {
244+
normal: {
245+
position: 'left',
246+
verticalAlign: 'middle',
247+
align: 'right',
248+
fontSize: 9
249+
}
250+
},
251+
leaves: {
252+
label: {
253+
normal: {
254+
position: 'right',
255+
verticalAlign: 'middle',
256+
align: 'left'
257+
}
258+
}
259+
},
260+
expandAndCollapse: false,
261+
animationDuration: 550,
262+
animationDurationUpdate: 750
263+
};
264+
series[0] = seriesData;
265+
let mapOption = {};
266+
mapOption.title = {};
267+
mapOption.title.text = "Dag Map";
268+
mapOption.series = series;
269+
mapOption.tooltip = {trigger: 'item', triggerOn: 'mousemove'};
270+
myChart.setOption(mapOption, true);
271+
myChart.on("click", function (param) {
272+
if (requestHost === "") {
273+
return;
274+
}
275+
let action = "get_block_content";
276+
requestHost += "/" + action;
277+
let request = {};
278+
let requestData = {"hashes": param.name};
279+
request.requestUrl = requestHost;
280+
request.requestData = JSON.stringify(requestData);
281+
// $.ajax(
282+
//
283+
// );
284+
this.axios.post("/api/QueryNodeDetail", request).then((res) => {
285+
console.log(res);
286+
}).catch((err) => {
287+
console.error(err);
288+
})
289+
});
290+
myChart.hideLoading();
291+
},
292+
prepareTreeData(data) {
293+
//get root node
294+
let root = "";
295+
let keys = [];
296+
let values = {};
297+
for (let i in data) {
298+
keys.push(i);
299+
let b = data[i];
300+
for (let j in b) {
301+
values[b[j]] = 1;
302+
}
303+
}
304+
for (let i in keys) {
305+
if (values[keys[i]] == null) {
306+
root = keys[i];
307+
break;
308+
}
309+
}
310+
// create tree
311+
let treeData = {};
312+
let existNode = {};
313+
if (root !== "") {
314+
let createTree = function (nodeName, data, treeData) {
315+
treeData.name = nodeName.substr(0, 6);
316+
if (!data[nodeName] || existNode[nodeName]) {
317+
return treeData;
318+
} else {
319+
existNode[nodeName] = 1;
320+
if (!treeData.children) {
321+
treeData.children = [];
322+
}
323+
for (var i in data[nodeName]) {
324+
let item = {};
325+
treeData.children.push(createTree(data[nodeName][i], data, item));
326+
}
327+
}
328+
return treeData;
329+
};
330+
createTree(root, data, treeData);
331+
}
332+
return treeData;
333+
},
171334
}
172335
}
173336
</script>

0 commit comments

Comments
 (0)