<template>
|
<div class="hello">
|
<!-- <h3>{{ msg }}</h3> -->
|
<fieldset class="dev-box">
|
<legend>设备列表</legend>
|
<el-button type="primary" size="mini" icon="el-icon-search" @click="discover" :loading="discovering"
|
>发现</el-button
|
>
|
<el-button type="primary" size="mini" icon="el-icon-search" @click="status">状态</el-button>
|
<el-button type="primary" size="mini" icon="el-icon-plus" @click="showDevForm = true">添加</el-button>
|
|
<el-select v-model="hostIp" placeholder="本机ip" size="mini" style="margin-left: 10px">
|
<el-option v-for="(net, index) in ipList" :key="index" :label="net.label" :value="net.value"></el-option>
|
</el-select>
|
|
<el-table
|
:data="devices"
|
stripe
|
:max-height="387"
|
style="width: 100%; font-size: 12px; margin-top: 5px"
|
:row-style="{ height: '8px' }"
|
:cell-style="{ padding: '5px 0px' }"
|
:header-cell-style="{ background: '#f8f8f8', color: '#222222', padding: '1px 0px' }"
|
@selection-change="handleSelection"
|
@cell-mouse-enter="handleCellHover"
|
@cell-mouse-leave="handleCellAfterHover"
|
>
|
<el-table-column type="selection" width="35"></el-table-column>
|
<el-table-column type="index" label="#" width="30"></el-table-column>
|
<el-table-column prop="address" label="IP" width="110" sortable></el-table-column>
|
<el-table-column prop="mac" label="MAC地址" sortable width="110"></el-table-column>
|
|
<el-table-column prop="online" label="状态" width="70" sortable>
|
<template slot-scope="scope">
|
<span :style="scope.row.online ? `color:green` : `color:red`">{{
|
scope.row.online ? "在线" : "离线"
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="networkMode" label="模式" width="70" sortable></el-table-column>
|
<el-table-column prop="status" label="屏幕" width="70" sortable></el-table-column>
|
<el-table-column prop="date" label="时间" width="180" sortable></el-table-column>
|
<el-table-column prop="note" label="备注">
|
<template slot-scope="scope">
|
<span>{{ scope.row.note }}</span>
|
<i
|
class="el-icon-edit"
|
style="float: right"
|
v-show="hoverLine == scope.row._id"
|
@click="editNote(scope.row)"
|
></i>
|
</template>
|
</el-table-column>
|
|
<!-- <el-table-column prop="mac" label="MAC" width="140"></el-table-column>
|
<el-table-column prop="model" label="型号"></el-table-column>
|
<el-table-column prop="version" label="版本" width="70"></el-table-column>-->
|
|
<!-- <template slot-scope="scope">
|
<i class="el-icon-video-play" style="color:green" @click="wake()"></i>
|
<i class="el-icon-remove-outline" style="color:red;margin-left:5px" @click="close()"></i>
|
</template>-->
|
</el-table>
|
</fieldset>
|
|
<fieldset class="control">
|
<legend>设备管理</legend>
|
<el-tabs>
|
<el-tab-pane label="开关设置">
|
<el-button v-show="clients.length" type="success" size="mini" icon="el-icon-switch-button" @click="wake()"
|
>开启</el-button
|
>
|
<el-button v-show="clients.length" type="danger" size="mini" icon="el-icon-remove-outline" @click="close()"
|
>关闭</el-button
|
>
|
</el-tab-pane>
|
|
<el-tab-pane label="工作时间">
|
<el-form>
|
<el-form-item label="时间段1">
|
<el-time-select
|
placeholder="开始时间"
|
v-model="startTime0"
|
:disabled="!workTimeEnable0"
|
:picker-options="{ start: '05:00', step: '00:10', end: '23:00' }"
|
size="mini"
|
style="width: 120px"
|
></el-time-select>
|
<span> - </span>
|
<el-time-select
|
placeholder="结束时间"
|
v-model="endTime0"
|
:disabled="!workTimeEnable0"
|
:picker-options="{ start: '05:00', step: '00:10', end: '23:00', minTime: startTime0 }"
|
size="mini"
|
style="width: 120px"
|
></el-time-select>
|
<el-checkbox v-model="workTimeEnable0" style="margin-left: 8px">启用</el-checkbox>
|
</el-form-item>
|
<el-form-item label="时间段2">
|
<el-time-select
|
placeholder="开始时间"
|
v-model="startTime1"
|
:disabled="!workTimeEnable1"
|
:picker-options="{ start: '05:00', step: '00:05', end: '20:00' }"
|
size="mini"
|
style="width: 120px"
|
></el-time-select>
|
<span> - </span>
|
<el-time-select
|
placeholder="结束时间"
|
v-model="endTime1"
|
:disabled="!workTimeEnable1"
|
:picker-options="{ start: '05:00', step: '00:05', end: '20:00', minTime: startTime1 }"
|
size="mini"
|
style="width: 120px"
|
></el-time-select>
|
<el-checkbox v-model="workTimeEnable1" style="margin-left: 8px">启用</el-checkbox>
|
</el-form-item>
|
<el-form-item label="时间段3">
|
<el-time-select
|
placeholder="开始时间"
|
v-model="startTime2"
|
:disabled="!workTimeEnable2"
|
:picker-options="{ start: '00:00', step: '00:01', end: '23:59' }"
|
size="mini"
|
style="width: 120px"
|
></el-time-select>
|
<span> - </span>
|
<el-time-select
|
placeholder="结束时间"
|
v-model="endTime2"
|
:disabled="!workTimeEnable2"
|
:picker-options="{ start: '00:00', step: '00:01', end: '23:59', minTime: startTime2 }"
|
size="mini"
|
style="width: 120px"
|
></el-time-select>
|
|
<el-checkbox v-model="workTimeEnable2" style="margin-left: 8px">启用</el-checkbox>
|
</el-form-item>
|
|
<el-form-item label="日期">
|
<el-checkbox-group v-model="weekList">
|
<el-checkbox label="1">星期一</el-checkbox>
|
<el-checkbox label="2">星期二</el-checkbox>
|
<el-checkbox label="3">星期三</el-checkbox>
|
<el-checkbox label="4">星期四</el-checkbox>
|
<el-checkbox label="5">星期五</el-checkbox>
|
<el-checkbox label="6">星期六</el-checkbox>
|
<el-checkbox label="7">星期日</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
v-show="clients.length"
|
type="primary"
|
size="mini"
|
icon="el-icon-time"
|
@click="handleSetTimeSegment()"
|
>设置工作时间段</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
|
<el-tab-pane label="高级">
|
<el-form>
|
<el-form-item label="控制端口">
|
<el-input
|
v-model="controlPort"
|
placeholder="控制端口"
|
size="mini"
|
value="number"
|
style="width: 70px"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="时间设置">
|
<el-date-picker
|
v-model="timeValue"
|
type="datetime"
|
placeholder="选择日期和时间"
|
default-time="12:00:00"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
size="mini"
|
></el-date-picker>
|
<el-button
|
v-show="clients.length"
|
type="primary"
|
size="mini"
|
icon="el-icon-time"
|
style="margin-left: 5px"
|
@click="handleSetTime()"
|
>设置时间</el-button
|
>
|
</el-form-item>
|
<el-form-item label="模式切换">
|
<el-button type="danger" size="mini" @click="switchModel(1)">server模式</el-button>
|
<el-button type="success" size="mini" @click="switchModel(0)">client模式</el-button>
|
<span style="margin-left: 5px; color: red"
|
>server模式下可以获取到电子钟开关状态和时间, 查询后务必切换回client状态</span
|
>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</fieldset>
|
|
<el-dialog title="添加设备" :visible.sync="showDevForm" width="350px">
|
<el-form ref="ruleForm" label-width="90px">
|
<el-form-item label="设备ip" prop="address">
|
<el-input v-model="devForm.address" autocomplete="off" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="备注" prop="note">
|
<el-input v-model="devForm.note" autocomplete="off" size="mini"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="info" @click="showDevForm = false" size="mini">取 消</el-button>
|
<el-button type="primary" @click="addDevice(devForm, 'btn')" size="mini">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog title="修改备注" :visible.sync="showEditDevForm" width="350px">
|
<el-form ref="ruleForm" label-width="90px">
|
<el-form-item label="设备ip" prop="address">
|
<el-input v-model="editRow.address" autocomplete="off" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="备注" prop="note">
|
<el-input v-model="editRow.note" autocomplete="off" size="mini"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="info" @click="showEditDevForm = false" size="mini">取 消</el-button>
|
<el-button type="primary" @click="commitNote()" size="mini">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
const { ipcRenderer } = window.require("electron")
|
|
export default {
|
name: "DeviceManager",
|
props: {
|
msg: String
|
},
|
computed: {
|
clients() {
|
return this.devices.map((dev) => dev.address)
|
},
|
multiClients() {
|
return this.multipleSelection.map((dev) => dev.address)
|
}
|
},
|
data() {
|
return {
|
discovering: false,
|
controlPort: 40001,
|
devices: [],
|
multipleSelection: [],
|
timeValue: "",
|
startTime0: "06:00",
|
endTime0: "13:00",
|
startTime1: "13:00",
|
endTime1: "19:00",
|
startTime2: "00:00",
|
endTime2: "23:50",
|
workTimeEnable0: false,
|
workTimeEnable1: false,
|
workTimeEnable2: false,
|
weekList: [],
|
showDevForm: false,
|
showEditDevForm: false,
|
devForm: {
|
address: "",
|
note: ""
|
},
|
hostIp: "",
|
ipList: [],
|
fullLoadding: false,
|
ntpServer: "",
|
hoverLine: "",
|
editRow: {}
|
}
|
},
|
created() {
|
ipcRenderer.on("discover-reply", (event, arg) => {
|
let rsp = JSON.parse(arg)
|
// this.devices.push(rsp)
|
this.addDevice(rsp, "discover")
|
})
|
|
ipcRenderer.on("discover-over", () => {
|
this.discovering = false
|
})
|
|
ipcRenderer.on("date-reply", (event, arg) => {
|
let rsp = JSON.parse(arg)
|
for (let i = 0; i < this.devices.length; i++) {
|
if (this.devices[i].address === rsp.address) {
|
this.$set(this.devices[i], "date", rsp.date)
|
}
|
}
|
})
|
|
ipcRenderer.on("config-reply", (event, arg) => {
|
// console.log("config-reply", arg)
|
let rsp = JSON.parse(arg)
|
for (let i = 0; i < this.devices.length; i++) {
|
if (this.devices[i].address === rsp.address) {
|
this.$set(this.devices[i], "networkMode", rsp.clientModel ? "server" : "client")
|
}
|
}
|
})
|
|
ipcRenderer.on("status-reply", (event, arg) => {
|
let rsp = JSON.parse(arg)
|
for (let i = 0; i < this.devices.length; i++) {
|
if (this.devices[i].address === rsp.address) {
|
this.$set(this.devices[i], "status", rsp.status == 0 ? "开" : "关")
|
}
|
}
|
})
|
|
ipcRenderer.on("iplist", (event, arg) => {
|
this.ipList = []
|
let rsp = JSON.parse(arg)
|
// console.log(rsp)
|
|
if (rsp) {
|
Object.values(rsp).forEach((iface) => {
|
iface.forEach((net) => {
|
if (net.family == "IPv4") {
|
// if (net.address == "127.0.0.1" || net.address.indexOf("169.") === 0) {
|
// return
|
// }
|
this.ipList.push({
|
label: net.address,
|
value: net.address
|
})
|
|
if (
|
net.address.indexOf("192.") === 0 ||
|
net.address.indexOf("172.") === 0 ||
|
net.address.indexOf("10.") === 0
|
) {
|
this.hostIp = net.address
|
ipcRenderer.send("discover", this.hostIp)
|
}
|
}
|
})
|
})
|
}
|
})
|
},
|
mounted() {
|
this.findAllDevice()
|
this.getHostIPAddress()
|
},
|
methods: {
|
getHostIPAddress() {
|
// this.ipcSend(("discover"))
|
ipcRenderer.send("get-iplist", "")
|
},
|
handleCellHover(row) {
|
this.hoverLine = row._id
|
},
|
handleCellAfterHover() {
|
this.hoverLine = ""
|
},
|
handleSelection(val) {
|
this.multipleSelection = val
|
},
|
handleRemoveDev() {},
|
findAllDevice() {
|
this.devices.splice(0, this.devices.length)
|
},
|
discover() {
|
this.discovering = true
|
setTimeout(() => {
|
// 清空网络状态
|
for (let i = 0; i < this.devices.length; i++) {
|
this.$set(this.devices[i], "networkMode", "")
|
}
|
ipcRenderer.send("discover", this.hostIp)
|
}, 500)
|
},
|
switchModel(model) {
|
if (this.multiClients.length < 1) {
|
this.$message({
|
type: "error",
|
message: "至少选择一个设备"
|
})
|
|
return
|
}
|
|
const loadding = this.$loading({
|
lock: true,
|
text: "正在配置...."
|
})
|
setTimeout(() => {
|
loadding.close()
|
this.getDevStatus(this.multiClients)
|
}, 4000)
|
ipcRenderer.send(
|
"config-client",
|
JSON.stringify({ hostIp: this.hostIp, model: model, clients: this.multiClients })
|
)
|
},
|
status() {
|
if (this.multiClients.length < 1) {
|
this.$message({
|
type: "error",
|
message: "至少选择一个设备"
|
})
|
|
return
|
}
|
this.getDevStatus(this.multiClients)
|
},
|
ipcSend(msgType, msg = "") {
|
if (this.multiClients.length < 1) {
|
this.$message({
|
type: "error",
|
message: "至少选择一个设备"
|
})
|
|
return
|
}
|
let body = {
|
port: this.controlPort,
|
clients: this.multiClients,
|
arg: msg
|
}
|
|
ipcRenderer.send(msgType, body)
|
|
this.$message({
|
type: "success",
|
message: "操作成功"
|
})
|
|
let _this = this
|
setTimeout(() => {
|
_this.getDevStatus(this.multiClients)
|
}, 1000)
|
},
|
close() {
|
this.ipcSend("close-device")
|
},
|
wake() {
|
this.ipcSend("wake-device")
|
},
|
getDevStatus(addrs) {
|
if (addrs.length < 1) {
|
return
|
}
|
|
// 清空状态
|
for (let i = 0; i < this.devices.length; i++) {
|
if (addrs.indexOf(this.devices[i].address) >= 0) {
|
this.$set(this.devices[i], "date", "")
|
this.$set(this.devices[i], "status", "")
|
this.$set(this.devices[i], "online", 0)
|
}
|
}
|
|
let body = {
|
port: this.controlPort,
|
clients: addrs
|
}
|
|
ipcRenderer.send("status", body)
|
|
setTimeout(() => {
|
ipcRenderer.send("read-date", body)
|
}, 500)
|
// this.getClock(addrs)
|
},
|
exceed() {
|
this.$message.error("最多只能上传1个xls文件")
|
},
|
//删除文件
|
remove() {
|
this.listTable = []
|
},
|
addDevice(row, orign = "") {
|
if (row && row.address) {
|
if (this.clients.indexOf(row.address) < 0) {
|
row.online = orign == "discover" ? 1 : 0
|
this.devices.push(row)
|
} else {
|
for (let i = 0; i < this.devices.length; i++) {
|
if (this.devices[i].address === row.address) {
|
this.devices[i].online = 1
|
}
|
}
|
}
|
|
this.showDevForm = false
|
}
|
},
|
handleSetTime() {
|
if (this.timeValue.length < 1) {
|
this.$message({
|
type: "error",
|
message: "请选择日期和时间"
|
})
|
|
return
|
}
|
|
// console.log(this.timeValue)
|
let dateStr = this.timeValue.split(" ")[0]
|
let timeStr = this.timeValue.split(" ")[1]
|
|
// console.log(dateStr)
|
let week = new Date(dateStr).getDay()
|
// console.log(week)
|
|
let year = dateStr.split("-")[0]
|
let month = dateStr.split("-")[1]
|
let day = dateStr.split("-")[2]
|
let msg = year.substr(0, 2) + ":" + year.substr(2, 2) + ":" + month + ":" + day + ":" + week + ":" + timeStr
|
// console.log(msg)
|
this.ipcSend("set-time", msg)
|
},
|
handleSetTimeSegment() {
|
// console.log(this.weekList);
|
let msg =
|
this.startTime0 +
|
":" +
|
this.endTime0 +
|
":" +
|
this.b2s(this.workTimeEnable0) +
|
":" +
|
this.startTime1 +
|
":" +
|
this.endTime1 +
|
":" +
|
this.b2s(this.workTimeEnable1) +
|
":" +
|
this.startTime2 +
|
":" +
|
this.endTime2 +
|
":" +
|
this.b2s(this.workTimeEnable2)
|
|
if (this.weekList.length === 7) {
|
msg = "0:" + msg
|
this.ipcSend("set-time-segment", msg)
|
} else {
|
this.weekList.forEach((day) => {
|
msg = day + ":" + msg
|
this.ipcSend("set-time-segment", msg)
|
})
|
}
|
},
|
b2s(d) {
|
return d ? "1" : "0"
|
},
|
editNote(row) {
|
this.showEditDevForm = true
|
this.editRow = row
|
},
|
commitNote() {
|
this.showEditDevForm = false
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style scoped>
|
.hello {
|
text-align: left;
|
}
|
|
i {
|
font-size: 18px;
|
cursor: pointer;
|
}
|
|
.upload-btn {
|
display: inline-block;
|
margin: 0px 10px;
|
}
|
|
.dev-box {
|
min-width: 700px;
|
height: 430px;
|
border: 1px solid #d2d0d0;
|
padding: 10px;
|
}
|
|
legend {
|
font-size: 14px;
|
}
|
.control {
|
margin-top: 10px;
|
min-width: 700px;
|
border: 1px solid #d2d0d0;
|
padding: 10px;
|
}
|
|
.el-form-item {
|
margin-bottom: 0px;
|
}
|
</style>
|
