452 lines
18 KiB
JavaScript
452 lines
18 KiB
JavaScript
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
testlist: [
|
|
{
|
|
tab_name: "first",
|
|
name: "first",
|
|
},
|
|
{
|
|
tab_name: "2",
|
|
name: "2",
|
|
},
|
|
{
|
|
tab_name: "3",
|
|
name: "3",
|
|
}
|
|
],
|
|
fileList: {},
|
|
panel_msg: "",
|
|
play_sound_enabled: false,
|
|
source_liveRoom_enabled: false,
|
|
source_liveRoom_url: '',
|
|
source_record_enabled: false,
|
|
source_record_device: '',
|
|
attribute_name: "",
|
|
attribute_gender: "",
|
|
attribute_age: "",
|
|
attribute_birth: "",
|
|
attribute_zodiac: "",
|
|
attribute_constellation: "",
|
|
attribute_job: "",
|
|
attribute_hobby: "",
|
|
attribute_contact: "",
|
|
attribute_voice: "",
|
|
interact_perception_gift: 0,
|
|
interact_perception_follow: 0,
|
|
interact_perception_join: 0,
|
|
interact_perception_chat: 0,
|
|
interact_perception_indifferent: 0,
|
|
interact_maxInteractTime: 15,
|
|
interact_QnA: "",
|
|
items_data: [],
|
|
live_state: 0,
|
|
device_list: [],
|
|
// device_list: [
|
|
// {
|
|
// value: '选项1',
|
|
// label: '麦克风'
|
|
// }
|
|
// ],
|
|
voice_list: [],
|
|
options: [{
|
|
value: '选项1',
|
|
label: '黄金糕'
|
|
}, {
|
|
value: '选项2',
|
|
label: '双皮奶'
|
|
}],
|
|
activeName: 'first',
|
|
|
|
editableTabsValue: '1',
|
|
tabIndex: 1,
|
|
editableTabs: [{
|
|
title: 'Tab 1',
|
|
name: '1',
|
|
content: 'Tab 1 content'
|
|
}, {
|
|
title: 'Tab 2',
|
|
name: '2',
|
|
content: 'Tab 2 content'
|
|
}],
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
handleTabsEdit(targetName, action) {
|
|
if (action === 'add') {
|
|
let newTabName = ++this.tabIndex + '';
|
|
this.items_data.push({
|
|
tab_name: newTabName,
|
|
enabled: false,
|
|
name: "",
|
|
explain: {
|
|
intro: "",
|
|
usage: "",
|
|
price: "",
|
|
discount: "",
|
|
promise: "",
|
|
character: ""
|
|
},
|
|
demoVideo: "",
|
|
QnA: ""
|
|
});
|
|
this.editableTabsValue = newTabName;
|
|
}
|
|
if (action === 'remove') {
|
|
let tabs = this.items_data;
|
|
let activeName = this.editableTabsValue;
|
|
if (activeName === targetName) {
|
|
tabs.forEach((tab, index) => {
|
|
if (tab.tab_name === targetName) {
|
|
let nextTab = tabs[index + 1] || tabs[index - 1];
|
|
if (nextTab) {
|
|
activeName = nextTab.name;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
this.editableTabsValue = activeName;
|
|
this.items_data = tabs.filter(tab => tab.tab_name !== targetName);
|
|
}
|
|
},
|
|
show() {
|
|
alert("run...")
|
|
},
|
|
formatTooltip(val) {
|
|
return val / 100;
|
|
},
|
|
handleChange(value) {
|
|
console.log(value);
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
},
|
|
handleRemove(file, fileList) {
|
|
console.log(file, fileList);
|
|
},
|
|
handlePreview(file) {
|
|
console.log(file);
|
|
},
|
|
onExceed() {
|
|
},
|
|
beforeRemove() {
|
|
},
|
|
handleExceed() {
|
|
},
|
|
connectWS() {
|
|
let _this = this;
|
|
let socket = new WebSocket('ws://localhost:10003')
|
|
socket.onopen = function () {
|
|
// console.log('客户端连接上了服务器');
|
|
}
|
|
socket.onmessage = function (e) {
|
|
// console.log(" --> " + e.data)
|
|
let data = JSON.parse(e.data)
|
|
_this.live_broadcast = (data.time % 2) === 0
|
|
let liveState = data.liveState
|
|
if (liveState !== undefined) {
|
|
_this.live_state = liveState
|
|
if (liveState === 1) {
|
|
_this.sendSuccessMsg("已开启！")
|
|
} else if (liveState === 0) {
|
|
_this.sendSuccessMsg("已关闭！")
|
|
}
|
|
}
|
|
let voiceList = data.voiceList
|
|
if (voiceList !== undefined) {
|
|
voice_list = []
|
|
for (let i = 0; i < voiceList.length; i++) {
|
|
voice_list[i] = {
|
|
value: voiceList[i].id,
|
|
label: voiceList[i].name
|
|
}
|
|
_this.voice_list = voice_list
|
|
}
|
|
}
|
|
|
|
let deviceList = data.deviceList
|
|
if (deviceList !== undefined) {
|
|
device_list = []
|
|
for (let i = 0; i < deviceList.length; i++) {
|
|
device_list[i] = {
|
|
value: deviceList[i],
|
|
label: deviceList[i]
|
|
}
|
|
_this.device_list = device_list
|
|
}
|
|
}
|
|
let panelMsg = data.panelMsg
|
|
if (panelMsg !== undefined) {
|
|
_this.panel_msg = panelMsg
|
|
|
|
//Edit by xszyou in 2022/2/3:同步到看板娘
|
|
text = panelMsg;
|
|
const tips = document.getElementById("waifu-tips");
|
|
if (panelMsg != "" && tips != null){
|
|
sessionStorage.setItem("waifu-text", 8);
|
|
tips.innerHTML = text;
|
|
tips.classList.add("waifu-tips-active");
|
|
messageTimer = setTimeout(() => {
|
|
sessionStorage.removeItem("waifu-text");
|
|
tips.classList.remove("waifu-tips-active");
|
|
}, 7000);
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
getData() {
|
|
let _this = this;
|
|
let url = "http://127.0.0.1:5000/api/get-data";
|
|
let xhr = new XMLHttpRequest()
|
|
xhr.open("post", url)
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
|
|
xhr.send()
|
|
let executed = false
|
|
xhr.onreadystatechange = async function () {
|
|
if (!executed && xhr.status === 200) {
|
|
try {
|
|
if (xhr.responseText.length > 0) {
|
|
let data = await eval('(' + xhr.responseText + ')')
|
|
let config = data["config"]
|
|
let source = config["source"]
|
|
let attribute = config["attribute"]
|
|
let interact = config["interact"]
|
|
let perception = interact["perception"]
|
|
let items = config["items"]
|
|
_this.play_sound_enabled = interact["playSound"]
|
|
_this.source_liveRoom_enabled = source["liveRoom"]["enabled"]
|
|
_this.source_liveRoom_url = source["liveRoom"]["url"]
|
|
_this.source_record_enabled = source["record"]["enabled"]
|
|
_this.source_record_device = source["record"]["device"]
|
|
_this.attribute_name = attribute["name"]
|
|
_this.attribute_gender = attribute["gender"]
|
|
_this.attribute_age = attribute["age"]
|
|
_this.attribute_birth = attribute["birth"]
|
|
_this.attribute_zodiac = attribute["zodiac"]
|
|
_this.attribute_constellation = attribute["constellation"]
|
|
_this.attribute_job = attribute["job"]
|
|
_this.attribute_hobby = attribute["hobby"]
|
|
_this.attribute_contact = attribute["contact"]
|
|
_this.attribute_voice = attribute["voice"]
|
|
_this.interact_perception_gift = parseInt(perception["gift"])
|
|
_this.interact_perception_follow = perception["follow"]
|
|
_this.interact_perception_join = perception["join"]
|
|
_this.interact_perception_chat = perception["chat"]
|
|
_this.interact_perception_indifferent = perception["indifferent"]
|
|
_this.interact_maxInteractTime = interact["maxInteractTime"]
|
|
_this.interact_QnA = interact["QnA"]
|
|
let item_data_list = []
|
|
for (let i = 0; i < items.length; i++) {
|
|
let item = items[i]
|
|
let _tab_name = "first"
|
|
if (i > 0) {
|
|
_tab_name = i.toString()
|
|
}
|
|
item_data_list[i] = {
|
|
tab_name: _tab_name,
|
|
enabled: item.enabled,
|
|
name: item.name,
|
|
explain: {
|
|
intro: item.explain.intro,
|
|
usage: item.explain.usage,
|
|
price: item.explain.price,
|
|
discount: item.explain.discount,
|
|
promise: item.explain.promise,
|
|
character: item.explain.character
|
|
},
|
|
demoVideo: item.demoVideo,
|
|
QnA: item.QnA
|
|
}
|
|
}
|
|
_this.items_data = item_data_list
|
|
console.log(_this.items_data);
|
|
executed = true
|
|
}
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
postData() {
|
|
let url = "http://127.0.0.1:5000/api/submit";
|
|
let send_data = {
|
|
"config": {
|
|
"source": {
|
|
"liveRoom": {
|
|
"enabled": this.source_liveRoom_enabled,
|
|
"url": this.source_liveRoom_url
|
|
},
|
|
"record": {
|
|
"enabled": this.source_record_enabled,
|
|
"device": this.source_record_device
|
|
}
|
|
},
|
|
"attribute": {
|
|
"voice": this.attribute_voice,
|
|
"name": this.attribute_name,
|
|
"gender": this.attribute_gender,
|
|
"age": this.attribute_age,
|
|
"birth": this.attribute_birth,
|
|
"zodiac": this.attribute_zodiac,
|
|
"constellation": this.attribute_constellation,
|
|
"job": this.attribute_job,
|
|
"hobby": this.attribute_hobby,
|
|
"contact": this.attribute_contact
|
|
},
|
|
"interact": {
|
|
"playSound": this.play_sound_enabled,
|
|
"QnA": this.interact_QnA,
|
|
"maxInteractTime": this.interact_maxInteractTime,
|
|
"perception": {
|
|
"gift": this.interact_perception_gift,
|
|
"follow": this.interact_perception_follow,
|
|
"join": this.interact_perception_join,
|
|
"chat": this.interact_perception_chat,
|
|
"indifferent": this.interact_perception_indifferent
|
|
}
|
|
},
|
|
"items": [],
|
|
}
|
|
};
|
|
for (let i = 0; i < this.items_data.length; i++) {
|
|
let item = this.items_data[i]
|
|
send_data.config.items[i] = {
|
|
enabled: item.enabled,
|
|
name: item.name,
|
|
explain: {
|
|
intro: item.explain.intro,
|
|
usage: item.explain.usage,
|
|
price: item.explain.price,
|
|
discount: item.explain.discount,
|
|
promise: item.explain.promise,
|
|
character: item.explain.character
|
|
},
|
|
demoVideo: item.demoVideo,
|
|
QnA: item.QnA
|
|
}
|
|
}
|
|
let xhr = new XMLHttpRequest()
|
|
xhr.open("post", url)
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
|
|
xhr.send('data=' + JSON.stringify(send_data))
|
|
let executed = false
|
|
xhr.onreadystatechange = async function () {
|
|
if (!executed && xhr.status === 200) {
|
|
try {
|
|
let data = await eval('(' + xhr.responseText + ')')
|
|
console.log("data: " + data['result'])
|
|
executed = true
|
|
} catch (e) {
|
|
}
|
|
}
|
|
}
|
|
this.sendSuccessMsg("配置已保存！")
|
|
},
|
|
postStartLive() {
|
|
this.postData()
|
|
this.live_state = 2
|
|
let url = "http://127.0.0.1:5000/api/start-live";
|
|
let xhr = new XMLHttpRequest()
|
|
xhr.open("post", url)
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
|
|
xhr.send()
|
|
},
|
|
postStopLive() {
|
|
this.live_state = 3
|
|
let url = "http://127.0.0.1:5000/api/stop-live";
|
|
let xhr = new XMLHttpRequest()
|
|
xhr.open("post", url)
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
|
|
xhr.send()
|
|
},
|
|
isEmptyItem(data) {
|
|
let isEmpty = true
|
|
let explain = data["explain"]
|
|
for (let key in data) {
|
|
let value = data[key]
|
|
if (key !== "tab_name" && value.constructor === String && value.length > 0) {
|
|
isEmpty = false
|
|
break
|
|
}
|
|
}
|
|
for (let key in explain) {
|
|
let value = explain[key]
|
|
if (value.constructor === String && value.length > 0) {
|
|
isEmpty = false
|
|
break
|
|
}
|
|
}
|
|
return isEmpty
|
|
},
|
|
lastItemIsEmpty() {
|
|
return this.isEmptyItem(this.items_data[this.items_data.length - 1])
|
|
},
|
|
uuid() {
|
|
let uuid = Math.random().toString(36);
|
|
return uuid
|
|
},
|
|
runnnable() {
|
|
setTimeout(() => {
|
|
let _this = this
|
|
let item_data_list = []
|
|
let changed = false
|
|
let index = 0
|
|
for (let i = 0; i < _this.items_data.length; i++) {
|
|
let data = _this.items_data[i]
|
|
if (i === (_this.items_data.length - 1) || !this.isEmptyItem(data)) {
|
|
item_data_list[index] = _this.items_data[i]
|
|
index++
|
|
} else {
|
|
changed = true
|
|
}
|
|
}
|
|
if (!this.lastItemIsEmpty()) {
|
|
changed = true
|
|
item_data_list.push({
|
|
tab_name: this.uuid(),
|
|
enabled: false,
|
|
name: "",
|
|
explain: {
|
|
intro: "",
|
|
usage: "",
|
|
price: "",
|
|
discount: "",
|
|
promise: "",
|
|
character: ""
|
|
},
|
|
demoVideo: "",
|
|
QnA: ""
|
|
})
|
|
}
|
|
if (changed) {
|
|
_this.items_data = item_data_list
|
|
console.log("修改了！" + _this.items_data.length)
|
|
}
|
|
this.runnnable()
|
|
}, 50)
|
|
},
|
|
sendSuccessMsg(text) {
|
|
this.$notify({
|
|
title: '成功',
|
|
message: text,
|
|
type: 'success'
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
let _this = this;
|
|
_this.getData();
|
|
_this.connectWS()
|
|
// _this.runnnable()
|
|
// _this.items_data.push({});
|
|
},
|
|
watch: {
|
|
items_data() {
|
|
// console.log("items_data 改变了");
|
|
}
|
|
}
|
|
}) |