var app = new Vue({
|
el: '#app',
|
data: {
|
stations: [],
|
devices: [],
|
relations: [], // {stationId, deviceNo, deviceType}
|
|
lines: [], // {x1, y1, x2, y2, stationId, deviceNo}
|
|
draggingItem: null, // Currently dragged item
|
draggingLine: null, // Temporary line for visual feedback
|
|
saving: false,
|
|
containerOffset: { top: 0, left: 0 }
|
},
|
mounted: function() {
|
this.loadData();
|
|
// Listen to window resize to redraw lines
|
window.addEventListener('resize', this.updateLines);
|
|
// Listen to scroll events on lists to redraw lines
|
this.$refs.stationList.addEventListener('scroll', this.updateLines);
|
this.$refs.deviceList.addEventListener('scroll', this.updateLines);
|
},
|
beforeDestroy: function() {
|
window.removeEventListener('resize', this.updateLines);
|
},
|
methods: {
|
loadData: function() {
|
var that = this;
|
var loading = this.$loading({ lock: true, text: '加载数据中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
|
$.ajax({
|
url: baseUrl + '/basStationDevice/data/auth',
|
headers: { 'token': localStorage.getItem('token') },
|
method: 'GET',
|
success: function(res) {
|
loading.close();
|
if (res.code === 200) {
|
that.stations = res.data.stations || [];
|
that.devices = res.data.devices || [];
|
that.relations = res.data.relations || [];
|
|
// Delay to wait for DOM rendering
|
that.$nextTick(function() {
|
that.updateLines();
|
});
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
that.$message.error('加载数据失败: ' + res.msg);
|
}
|
},
|
error: function() {
|
loading.close();
|
that.$message.error('加载请求异常');
|
}
|
});
|
},
|
|
saveData: function() {
|
var that = this;
|
this.saving = true;
|
|
$.ajax({
|
url: baseUrl + '/basStationDevice/save/auth',
|
type: 'POST',
|
headers: { 'token': localStorage.getItem('token') },
|
contentType: 'application/json',
|
data: JSON.stringify(this.relations),
|
success: function (res) {
|
that.saving = false;
|
if (res.code === 200) {
|
that.$message.success('保存成功');
|
that.loadData();
|
} else {
|
that.$message.error('保存失败: ' + res.msg);
|
}
|
},
|
error: function () {
|
that.saving = false;
|
that.$message.error('保存请求异常');
|
}
|
});
|
},
|
|
isStationConnected: function(stationId) {
|
return this.relations.some(function(r) { return r.stationId == stationId; });
|
},
|
|
isDeviceConnected: function(deviceNo, type) {
|
return this.relations.some(function(r) { return r.deviceNo == deviceNo && r.deviceType == type; });
|
},
|
|
// --- Drag and Drop Logic ---
|
|
onDragStart: function(event, item, type) {
|
this.draggingItem = { item: item, type: type };
|
event.dataTransfer.effectAllowed = 'link';
|
// Optional: set custom drag image
|
},
|
|
onDragEnd: function() {
|
this.draggingItem = null;
|
},
|
|
onDrop: function(event, targetDevice) {
|
if (!this.draggingItem || this.draggingItem.type !== 'station') {
|
return;
|
}
|
|
var station = this.draggingItem.item;
|
|
// Check if exists
|
var exists = this.relations.some(function(r) {
|
return r.stationId == station.stationId && r.deviceNo == targetDevice.deviceNo && r.deviceType == targetDevice.type;
|
});
|
|
if (exists) {
|
this.$message.warning('该关联已存在');
|
return;
|
}
|
|
// Add relation
|
this.relations.push({
|
stationId: station.stationId,
|
deviceNo: targetDevice.deviceNo,
|
deviceType: targetDevice.type
|
});
|
|
this.$message.success('已建立关联: 站点 ' + station.stationId + ' -> ' + targetDevice.name);
|
|
this.$nextTick(this.updateLines);
|
},
|
|
confirmDelete: function(index) {
|
var that = this;
|
var link = this.relations[index]; // Note: lines index must match relations index? No.
|
|
// We need to map line click to actual relation.
|
// The lines array is rebuilt from relations, so we can store the index or relation object in the line object.
|
// But let's check updateLines logic first.
|
|
// In updateLines, we iterate relations. So index matches if filtered correctly?
|
// Wait, updateLines maps relations 1-to-1 to lines IF DOM exists.
|
// If DOM doesn't exist (scrolled out?), line might not exist.
|
// But we should draw all lines?
|
// Actually, if scrolled out, we might want to hide lines or point to edge.
|
// For simplicity, we only draw lines for visible nodes or calculate positions for all.
|
// Since lists are scrollable, calculating positions for invisible nodes is tricky (top/bottom are relative to viewport).
|
|
// Better approach: Store the relation object in the line object.
|
|
var rel = this.lines[index].relation;
|
|
this.$confirm('确定删除该关联吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(function() {
|
// Find index in relations array
|
var idx = that.relations.indexOf(rel);
|
if (idx > -1) {
|
that.relations.splice(idx, 1);
|
that.$nextTick(that.updateLines);
|
that.$message.success('已删除');
|
}
|
}).catch(function() {});
|
},
|
|
updateLines: function() {
|
var that = this;
|
var newLines = [];
|
|
// Get SVG offset
|
var svgElement = this.$el.querySelector('svg');
|
if (!svgElement) return;
|
var svgRect = svgElement.getBoundingClientRect();
|
|
// We need positions relative to the SVG
|
|
this.relations.forEach(function(rel) {
|
var sDom = document.getElementById('station-' + rel.stationId);
|
var dDom = document.getElementById('device-' + rel.deviceType + '-' + rel.deviceNo);
|
|
if (sDom && dDom) {
|
var sRect = sDom.getBoundingClientRect();
|
var dRect = dDom.getBoundingClientRect();
|
|
// Coordinates relative to SVG
|
var x1 = sRect.right - svgRect.left;
|
var y1 = sRect.top + sRect.height / 2 - svgRect.top;
|
|
var x2 = dRect.left - svgRect.left;
|
var y2 = dRect.top + dRect.height / 2 - svgRect.top;
|
|
newLines.push({
|
x1: x1,
|
y1: y1,
|
x2: x2,
|
y2: y2,
|
relation: rel,
|
stationId: rel.stationId,
|
deviceNo: rel.deviceNo
|
});
|
}
|
});
|
|
this.lines = newLines;
|
}
|
}
|
});
|
