var app = new Vue({
|
el: '#app',
|
data: {
|
loading: false,
|
saving: false,
|
items: [],
|
predefineColors: [
|
'#78FF81',
|
'#FA51F6',
|
'#C4C400',
|
'#30BFFC',
|
'#18C7B8',
|
'#97B400',
|
'#E69138',
|
'#B8B8B8',
|
'#FF6B6B',
|
'#FFD166',
|
'#06D6A0',
|
'#118AB2'
|
]
|
},
|
mounted: function () {
|
this.reloadData();
|
},
|
methods: {
|
reloadData: function () {
|
var that = this;
|
this.loading = true;
|
$.ajax({
|
url: baseUrl + '/watch/stationColor/config/auth',
|
headers: { token: localStorage.getItem('token') },
|
method: 'GET',
|
success: function (res) {
|
that.loading = false;
|
if (res.code === 200) {
|
var items = (res.data && res.data.items) ? res.data.items : [];
|
that.items = items.map(function (item) {
|
return {
|
status: item.status,
|
name: item.name,
|
desc: item.desc,
|
color: that.normalizeColor(item.color || item.defaultColor),
|
defaultColor: that.normalizeColor(item.defaultColor)
|
};
|
});
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + '/';
|
} else {
|
that.$message.error(res.msg || '加载站点颜色配置失败');
|
}
|
},
|
error: function () {
|
that.loading = false;
|
that.$message.error('加载站点颜色配置失败');
|
}
|
});
|
},
|
resetDefaults: function () {
|
this.items = this.items.map(function (item) {
|
return Object.assign({}, item, {
|
color: item.defaultColor
|
});
|
});
|
this.$message.success('已恢复默认颜色');
|
},
|
applyDefaultColor: function (item) {
|
item.color = item.defaultColor;
|
},
|
handleColorInput: function (item) {
|
var normalized = this.normalizeColor(item.color);
|
if (normalized !== String(item.color || '').trim().toUpperCase()) {
|
this.$message.warning('颜色格式已自动修正为十六进制');
|
}
|
item.color = normalized;
|
},
|
saveConfig: function () {
|
var that = this;
|
this.saving = true;
|
$.ajax({
|
url: baseUrl + '/watch/stationColor/config/save/auth',
|
headers: { token: localStorage.getItem('token') },
|
method: 'POST',
|
contentType: 'application/json;charset=UTF-8',
|
dataType: 'json',
|
data: JSON.stringify({
|
items: this.items.map(function (item) {
|
return {
|
status: item.status,
|
color: that.normalizeColor(item.color)
|
};
|
})
|
}),
|
success: function (res) {
|
that.saving = false;
|
if (res.code === 200) {
|
that.$message.success('站点颜色配置已保存');
|
that.reloadData();
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + '/';
|
} else {
|
that.$message.error(res.msg || '保存站点颜色配置失败');
|
}
|
},
|
error: function () {
|
that.saving = false;
|
that.$message.error('保存站点颜色配置失败');
|
}
|
});
|
},
|
normalizeColor: function (color) {
|
var value = String(color || '').trim();
|
if (!value) {
|
return '#B8B8B8';
|
}
|
if (/^#[0-9a-fA-F]{6}$/.test(value)) {
|
return value.toUpperCase();
|
}
|
if (/^#[0-9a-fA-F]{3}$/.test(value)) {
|
return ('#' + value.charAt(1) + value.charAt(1) + value.charAt(2) + value.charAt(2) + value.charAt(3) + value.charAt(3)).toUpperCase();
|
}
|
if (/^0x[0-9a-fA-F]{6}$/.test(value)) {
|
return ('#' + value.substring(2)).toUpperCase();
|
}
|
return '#B8B8B8';
|
}
|
}
|
});
|