js网络拓扑图绘制

视频加载中...

function imgpost() {

let content = Array.prototype.shift.apply(arguments);

let data;

let url;

if ((typeof content) == 'object') {

data = new FormData();

data.append('file', content);

url = 'http://127.0.0.1:8000/post_request';

} else {

data = JSON.stringify(content)

url = 'http://127.0.0.1:8000/post_text';

}

let ajx = new XMLHttpRequest();

ajx.open('POST', url, true);

ajx.onreadystatechange = function () {

if (ajx.readyState == 4) {

if (ajx.status == 200) {

console.log(123)

}

}

}

ajx.send(data);

}

function textget() {

let ajx = new XMLHttpRequest();

let url = 'http://127.0.0.1:8000/get_content';

ajx.open('GET', url, true);

ajx.onreadystatechange = function () {

if (ajx.readyState == 4) {

if (ajx.status == 200) {

select1(JSON.parse(ajx.responseText)['data'])

}

}

}

ajx.send()

}

function textpost() {

let content = Array.prototype.shift.apply(arguments);

let ajx = new XMLHttpRequest();

let url = 'http://127.0.0.1:8000/post_content';

ajx.open('POST', url, true);

ajx.onreadystatechange = function () {

if (ajx.readyState == 4) {

if (ajx.status == 200) {

console.log(123);

}

}

}

ajx.send(JSON.stringify(content))

}

function select1() {

let content = Array.prototype.shift.apply(arguments);

let attribute = ['旁挂', '直连'];

let position = ['上', '下', '左', '右'];

let cabinetlocation = ['上层', '中层', '下层'];

let select = document.getElementById('select1');

let select2 = document.getElementById('select2');

let select3 = document.getElementById('select3');

let select4 = document.getElementById('select4');

let select5 = document.getElementById('select5');

let select6 = document.getElementById('select6');

for (let i = 0; i < content.length; i++) {

let option = document.createElement('option');

let option1 = document.createElement('option');

select.appendChild(option);

select2.appendChild(option1);

option.innerHTML = content[i]['name'];

option1.innerHTML = content[i]['name'];

}

for (let i = 0; i < attribute.length; i++) {

let option = document.createElement('option');

select3.appendChild(option);

option.innerHTML = attribute[i];

}

for (let i = 0; i < position.length; i++) {

let option = document.createElement('option');

select4.appendChild(option);

option.innerHTML = position[i];

}

for (let i = 0; i < 100; i++) {

let option = document.createElement('option');

select5.appendChild(option);

option.innerHTML = i + 1;

}

for (let i = 0; i < cabinetlocation.length; i++) {

let option = document.createElement('option');

select6.appendChild(option);

option.innerHTML = cabinetlocation[i];

}

}

function picturedisplay() {

let ajx = new XMLHttpRequest();

let url = 'http://127.0.0.1:8000/get_picture';

ajx.open('GET', url, true);

ajx.onreadystatechange = function () {

if (ajx.readyState == 4) {

if (ajx.status == 200) {

let data = JSON.parse(ajx.responseText)['data'];

pcreate(data);

}

}

}

ajx.send();

}

function pcreate() {

let num = [];

let arr;

let device = [];

let device1 = [];

let device2 = [];

let device3 = [];

let device4 = [];

let device5 = [];

let device6 = [];

let device7 = [];

let device8 = [];

let content = Array.prototype.shift.apply(arguments);

let p = document.createElement('p');

let p1 = document.createElement('p');

for (let i = 0; i < content.length; i++) {

if (content[i]['deviceproperties'] == '' && content[i]['devicelocation'] == '') {

device.push(content[i]['name']);

}

if (content[i]['devicelocation'] == '直连' && content[i]['referenceposition'] == '右') {

device1.push(content[i]['name'])

}

if (content[i]['devicelocation'] == '直连' && content[i]['referenceposition'] == '左') {

device2.push(content[i]['name'], content[i]['deviceproperties'])

}

if (content[i]['devicelocation'] == '旁挂') {

device4.push(content[i])

}

arr = device.concat(device1);

}

if(device4.length == 0){

console.log(123);

}else{

sidehanging(device4);

}

for (let i = 0; i < device2.length; i++) {

if (i % 2 != 0) {

device3.push(device2[i])

} else {

device5.push(device2[i])

}

}

for (let i = 0; i < device6.length; i++) {

if (i % 2 != 0) {

device7.push(device2[i])

} else {

device8.push(device2[i])

}

}

let newList1 = Array.from(new Set(device3))

for (let i = 0; i < newList1.length; i++) {

for (let j = 0; j < arr.length; j++) {

if (newList1[i] == arr[j]) {

num.push(j);

}

}

}

for (let i = 0; i < device5.length; i++) {

for (let j = 0; j < num.length; j++) {

arr.splice(Number(num[j]), 0, device5[i])

}

}

devicefunction(arr);

for (let i = 0; i < arr.length; i++) {

let p1 = document.createElement('p');

document.body.appendChild(p);

p.appendChild(p1);

p1.style.width = '50px';

p1.style.height = '50px';

p1.style.float = 'left';

p1.style.margin = '10px';

p1.setAttribute('id', 'pp' + i);

let img = document.createElement('img');

p.appendChild(img);

img.src = '直线.png';

img.style.width = '40px';

img.style.float = 'left';

img.style.margin = '10px';

img.style.height = '40px';

img.id = 'img' + i;

}

document.getElementById('img' + (arr.length - 1)).remove();

document.body.appendChild(p1);

}

function devicefunction() {

let content = Array.prototype.shift.apply(arguments);

let ajx = new XMLHttpRequest();

let url = 'http://127.0.0.1:8000/post_select';

ajx.open('POST', url, true);

ajx.onreadystatechange = function () {

if (ajx.readyState == 4) {

if (ajx.status == 200) {

imgfunction(JSON.parse(ajx.responseText)['data']);

}

}

}

ajx.send(JSON.stringify(content))

}

function imgfunction() {

let content = Array.prototype.shift.apply(arguments);

for (let i = 0; i < content.length; i++) {

let img = document.createElement('img');

let p = document.createElement('p');

document.getElementById('pp' + i).appendChild(img);

document.getElementById('pp' + i).appendChild(p);

img.src = 'http://127.0.0.1:8000/media/' + content[i][0]['img'];

p.innerText = content[i][0]['name'];

p.id = 'p' + i;

img.style.width = '50px';

img.style.height = '50px';

}

}

function sidehanging() {

let device = [];

let content = Array.prototype.shift.apply(arguments);

let img = document.createElement('img');

document.body.appendChild(img)

img.src = '直线.png';

img.style.rotate = 90 + 'deg';

img.style.width = '50px';

img.style.height = '50px';

img.id = 'img00' + 1;

document.getElementById('img00' + 1).style.position = 'absolute';

document.getElementById('img00' + 1).style.margin = 'auto';

document.getElementById('img00' + 1).style.marginTop = '-50px';

document.getElementById('img00' + 1).style.marginLeft = '200px';

document.getElementById('p0p').style.margin = '100px';

for (let i = 0; i < content.length; i++) {

let img = document.createElement('img') document.getElementById('p0p').appendChild(img);

img.id = 'img0' + i;

device.push(content[i]['name']);

}

getajx(device);

}

function getajx() {let content = Array.prototype.shift.apply(arguments);

let ajx = new XMLHttpRequest();

let url = 'http://127.0.0.1:8000/get_post';

ajx.open('POST', url, true);

ajx.onreadystatechange = function () {

if (ajx.readyState == 4) {

if (ajx.status == 200) {

let arr = (JSON.parse(ajx.responseText)['data']);

for (let i = 0; i < arr.length; i++) {

let p = document.createElement('p');

document.getElementById('img0' + i).src = 'http://127.0.0.1:8000/media/' + arr[i][0]['img'];

document.getElementById('img0' + i).style.width = '50px';

document.getElementById('img0' + i).style.height = '50px';

document.getElementById('img0' + i).style.margin = '10px';

document.getElementById('p0p').appendChild(p);

p.innerText = i + 1 + '、' + '旁挂：' + arr[i][0]['name'];

}

}

}

}

ajx.send(JSON.stringify(content))

}

textget();

picturedisplay();

document.getElementById('input1').addEventListener('change', function () {

let img = document.getElementById('input1').files[0];

imgpost(img);

})

document.getElementById('input01').addEventListener('click', function () {

let text = document.getElementById('input2').value;

imgpost(text);

location.reload();

})

document.getElementById('input02').addEventListener('click', function () {

let arr = [];

let select1 = document.getElementById('select1').value;

let select2 = document.getElementById('select2').value;

let select3 = document.getElementById('select3').value;

let select4 = document.getElementById('select4').value;

let select5 = document.getElementById('select5').value;

let select6 = document.getElementById('select6').value;

arr.push(select1, select2, select3, select4, select5, select6);

textpost(arr);

location.reload();

})