|
|
<template>
|
|
|
<div class="reportBox">
|
|
|
<div class="commandBox">
|
|
|
<div class="commandRunLeft commandClass">
|
|
|
<div class="headTitle">
|
|
|
<span class="title">待下发终端</span>
|
|
|
<el-select
|
|
|
v-model="operateL"
|
|
|
placeholder="筛选运操维作"
|
|
|
@change="selectLeftChanged"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in operateOptions"
|
|
|
:key="item.id"
|
|
|
:label="item.name"
|
|
|
:value="item.id"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
<el-input
|
|
|
class="cmdidClass"
|
|
|
v-model="leftcmdVal"
|
|
|
placeholder="请输入设备ID查询"
|
|
|
@change="leftInputChange"
|
|
|
></el-input>
|
|
|
<span class="mlspan">命令:{{ leftCommand.length }}</span>
|
|
|
<span class="time"
|
|
|
>更新时间：{{
|
|
|
$moment(updateTime).format("YYYY-MM-DD HH:mm:ss")
|
|
|
}}</span
|
|
|
>
|
|
|
<el-button
|
|
|
class="deletebtn"
|
|
|
type="danger"
|
|
|
icon="el-icon-delete"
|
|
|
@click="deleteml"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
<div
|
|
|
class="commandList"
|
|
|
v-loading="leftComLoading"
|
|
|
v-if="leftCommand.length != 0"
|
|
|
>
|
|
|
<p
|
|
|
class="comLi"
|
|
|
v-for="(item, index) in leftCommand"
|
|
|
:key="index"
|
|
|
@dblclick="handleShowCommand(item)"
|
|
|
>
|
|
|
<span class="indexClass">{{ index + 1 }}</span>
|
|
|
<span class="comMsg"
|
|
|
><b>时间：{{ item.createTime }}</b>
|
|
|
<b>设备ID：{{ item.cmdid }}</b>
|
|
|
<b v-if="item.cmd.fileName">apk版本：{{ item.cmd.fileName }}</b>
|
|
|
<b>命令：{{ cmdCn[item.cmdName] }}</b></span
|
|
|
>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="commandList" v-else>
|
|
|
<p>暂无下发命令</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="commandRunRight commandClass">
|
|
|
<div class="headTitle">
|
|
|
<span class="title">已下发终端</span>
|
|
|
<el-select
|
|
|
v-model="operateR"
|
|
|
placeholder="筛选运操维作"
|
|
|
@change="selectRightChanged"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in operateOptions"
|
|
|
:key="item.id"
|
|
|
:label="item.name"
|
|
|
:value="item.id"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
<el-input
|
|
|
class="cmdidClass"
|
|
|
v-model="rightcmdVal"
|
|
|
placeholder="请输入设备ID查询"
|
|
|
@change="rightInputChange"
|
|
|
></el-input>
|
|
|
<span class="mlspan">命令:{{ rightCommand.length }}</span>
|
|
|
<span class="time"
|
|
|
>更新时间：{{
|
|
|
$moment(updateTime).format("YYYY-MM-DD HH:mm:ss")
|
|
|
}}</span
|
|
|
>
|
|
|
<el-button
|
|
|
class="deletebtn"
|
|
|
type="danger"
|
|
|
icon="el-icon-delete"
|
|
|
@click="deletehis"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
<div class="commandList" v-if="rightCommand.length != 0">
|
|
|
<p class="comLi" v-for="(item, index) in rightCommand" :key="index">
|
|
|
<el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
|
:open-delay="600"
|
|
|
:content="item.status == '1' ? '已下发' : '已取消'"
|
|
|
placement="top"
|
|
|
>
|
|
|
<span
|
|
|
class="indexClass"
|
|
|
:class="item.status == '1' ? 'normalClass' : 'cancelClass'"
|
|
|
>{{ index + 1 }}</span
|
|
|
>
|
|
|
</el-tooltip>
|
|
|
|
|
|
<span class="comMsg"
|
|
|
><b>下发时间：{{ item.publishTime }}</b>
|
|
|
<b>设备ID：{{ item.cmdid }}</b>
|
|
|
<b>命令：{{ cmdCn[item.cmdName] }}</b>
|
|
|
<b v-if="item.cmd.fileName">apk版本：{{ item.cmd.fileName }}</b>
|
|
|
<b v-else>cmd：{{ item.cmd }}</b>
|
|
|
</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="commandList" v-else>
|
|
|
<p>暂无已下发命令</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
class="MsgDialog"
|
|
|
title="命令信息"
|
|
|
:visible.sync="commandShow"
|
|
|
:close-on-click-modal="false"
|
|
|
width="680px"
|
|
|
>
|
|
|
<div class="cmdMain">
|
|
|
<!-- {{ deveceMsg }} -->
|
|
|
<p>设备ID:{{ deveceMsg.cmdid }}</p>
|
|
|
<p>操作时间：{{ deveceMsg.createTime }}</p>
|
|
|
<p>待执行操作：{{ deveceMsg.cmdName }}</p>
|
|
|
<p>cmd：{{ deveceMsg.cmd }}</p>
|
|
|
</div>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="handleCancel(deveceMsg.id)">取消操作</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { getdoActionApi, getqueryCmdsApi } from "@/utils/api/index";
|
|
|
export default {
|
|
|
name: "report",
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
leftComLoading: false, //左侧loading
|
|
|
runCommand: [],
|
|
|
endCommand: [],
|
|
|
leftCommand: [],
|
|
|
rightCommand: [],
|
|
|
commandShow: false,
|
|
|
deveceMsg: "",
|
|
|
cmdCn: {
|
|
|
yw_cmd_android_reboot: "安卓重启",
|
|
|
yw_cmd_mcu_reboot: "MCU单片机重启",
|
|
|
i1_cmd_set_i1_server_ip_port: "设置I1服务器",
|
|
|
i1_cmd_set_xy_yw_ip_port: "设置运维服务器",
|
|
|
i1_cmd_set_i1_heart_beat_time: "设置心跳周期",
|
|
|
yw_cmd_upload_i1_zip_log: "上传日志",
|
|
|
upgrade: "升级",
|
|
|
yw_cmd_start_frpc: "开启frpc",
|
|
|
yw_cmd_stop_frpc: "停止frpc",
|
|
|
i1_cmd_stop_aging_test: "停止老化测试",
|
|
|
},
|
|
|
cmdtimer: null,
|
|
|
endtimer: null,
|
|
|
updateTime: null,
|
|
|
//运维操作列表
|
|
|
operateOptions: [
|
|
|
{ id: 0, name: "全部" },
|
|
|
{ id: 1, name: "安卓重启" },
|
|
|
{ id: 2, name: "MCU单片机重启" },
|
|
|
{ id: 3, name: "设置I1服务器" },
|
|
|
// { id: 4, name: "设置运维服务器" },
|
|
|
{ id: 5, name: "设置心跳周期" },
|
|
|
{ id: 6, name: "上传日志" },
|
|
|
{ id: 7, name: "升级" },
|
|
|
{ id: 8, name: "开启frpc" },
|
|
|
{ id: 9, name: "停止frpc" },
|
|
|
{ id: 10, name: "停止老化测试" },
|
|
|
],
|
|
|
operateL: 0,
|
|
|
operateR: 0,
|
|
|
leftcmdVal: "",
|
|
|
rightcmdVal: "",
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
created() {
|
|
|
this.cmdtimer = setInterval(this.getCmdList, 60000); // 每10秒刷新数据
|
|
|
this.endtimer = setInterval(this.getEndList, 60000); // 每10秒刷新数据
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getCmdList();
|
|
|
this.getEndList();
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
getCmdList() {
|
|
|
//this.leftComLoading = true;
|
|
|
getqueryCmdsApi({ p: 1, ps: 10000 })
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.runCommand = res.data;
|
|
|
this.leftComLoading = false;
|
|
|
this.selectLeftChanged(this.operateL);
|
|
|
this.updateTime = new Date();
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
handleShowCommand(val) {
|
|
|
console.log(val);
|
|
|
this.commandShow = true;
|
|
|
console.log(this.commandShow);
|
|
|
this.deveceMsg = val;
|
|
|
},
|
|
|
//取消操作
|
|
|
handleCancel(val) {
|
|
|
getdoActionApi({
|
|
|
act: "cancel",
|
|
|
id: val,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
|
|
|
this.$confirm("确定取消该命令？", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "命令已取消",
|
|
|
type: "success",
|
|
|
});
|
|
|
this.commandShow = false;
|
|
|
this.getCmdList();
|
|
|
this.getEndList();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.commandShow = false;
|
|
|
});
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
|
|
|
//获取已取走列表
|
|
|
getEndList() {
|
|
|
getqueryCmdsApi({ qt: "his", p: 1, ps: 10000 })
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
//this.endCommand = res.data;
|
|
|
this.endCommand = res.data.filter((item) => item.status == "1");
|
|
|
this.selectRightChanged(this.operateR);
|
|
|
// this.leftComLoading = false;
|
|
|
this.updateTime = new Date();
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//左侧筛选
|
|
|
selectLeftChanged(val) {
|
|
|
console.log(val);
|
|
|
switch (val) {
|
|
|
case 0:
|
|
|
this.leftCommand = this.runCommand;
|
|
|
return;
|
|
|
case 1:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_android_reboot"
|
|
|
);
|
|
|
return;
|
|
|
case 2:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_mcu_reboot"
|
|
|
);
|
|
|
return;
|
|
|
case 3:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "i1_cmd_set_i1_server_ip_port"
|
|
|
);
|
|
|
return;
|
|
|
case 4:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "i1_cmd_set_xy_yw_ip_port"
|
|
|
);
|
|
|
return;
|
|
|
case 5:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "i1_cmd_set_i1_heart_beat_time"
|
|
|
);
|
|
|
return;
|
|
|
case 6:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_upload_i1_zip_log"
|
|
|
);
|
|
|
return;
|
|
|
case 7:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "upgrade"
|
|
|
);
|
|
|
return;
|
|
|
case 8:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_start_frpc"
|
|
|
);
|
|
|
return;
|
|
|
case 9:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_stop_frpc"
|
|
|
);
|
|
|
return;
|
|
|
case 10:
|
|
|
this.leftCommand = this.runCommand.filter(
|
|
|
(item) => item.cmdName == "i1_cmd_stop_aging_test"
|
|
|
);
|
|
|
return;
|
|
|
}
|
|
|
},
|
|
|
leftInputChange(value) {
|
|
|
this.leftCommand = this.runCommand.filter((item) =>
|
|
|
item.cmdid.includes(value)
|
|
|
);
|
|
|
},
|
|
|
//右侧筛选
|
|
|
selectRightChanged(val) {
|
|
|
console.log(val);
|
|
|
switch (val) {
|
|
|
case 0:
|
|
|
this.rightCommand = this.endCommand;
|
|
|
console.log(this.rightCommand);
|
|
|
return;
|
|
|
case 1:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_android_reboot"
|
|
|
);
|
|
|
console.log(this.rightCommand);
|
|
|
return;
|
|
|
case 2:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_mcu_reboot"
|
|
|
);
|
|
|
return;
|
|
|
case 3:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "i1_cmd_set_i1_server_ip_port"
|
|
|
);
|
|
|
return;
|
|
|
case 4:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "i1_cmd_set_xy_yw_ip_port"
|
|
|
);
|
|
|
return;
|
|
|
case 5:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "i1_cmd_set_i1_heart_beat_time"
|
|
|
);
|
|
|
return;
|
|
|
case 6:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_upload_i1_zip_log"
|
|
|
);
|
|
|
return;
|
|
|
case 7:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "upgrade"
|
|
|
);
|
|
|
return;
|
|
|
case 8:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_start_frpc"
|
|
|
);
|
|
|
return;
|
|
|
case 9:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "yw_cmd_stop_frpc"
|
|
|
);
|
|
|
return;
|
|
|
case 10:
|
|
|
this.rightCommand = this.endCommand.filter(
|
|
|
(item) => item.cmdName == "i1_cmd_stop_aging_test"
|
|
|
);
|
|
|
return;
|
|
|
}
|
|
|
},
|
|
|
rightInputChange(value) {
|
|
|
this.rightCommand = this.endCommand.filter((item) =>
|
|
|
item.cmdid.includes(value)
|
|
|
);
|
|
|
},
|
|
|
deleteml() {
|
|
|
getdoActionApi({
|
|
|
act: "clear",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
|
|
|
this.$confirm("确定清除所有命令？", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "命令已清除",
|
|
|
type: "success",
|
|
|
});
|
|
|
this.commandShow = false;
|
|
|
this.getCmdList();
|
|
|
this.getEndList();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.commandShow = false;
|
|
|
});
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
deletehis() {
|
|
|
getdoActionApi({
|
|
|
act: "clearHis",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
|
|
|
this.$confirm("确定清除所有命令？", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "命令已清除",
|
|
|
type: "success",
|
|
|
});
|
|
|
|
|
|
this.getCmdList();
|
|
|
this.getEndList();
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
//清除定时器
|
|
|
clearInterval(this.cmdtimer);
|
|
|
clearInterval(this.endtimer);
|
|
|
this.cmdtimer = null;
|
|
|
this.endtimer = null;
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.reportBox {
|
|
|
height: calc(100% - 24px);
|
|
|
width: calc(100% - 24px);
|
|
|
padding: 12px;
|
|
|
.commandBox {
|
|
|
display: flex;
|
|
|
height: 100%;
|
|
|
.commandClass {
|
|
|
width: 50%;
|
|
|
padding: 12px;
|
|
|
height: calc(100% - 24px);
|
|
|
border: 1px solid #dcdfe6;
|
|
|
margin-right: 12px;
|
|
|
border-radius: 4px;
|
|
|
.headTitle {
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.title {
|
|
|
font-size: 16px;
|
|
|
font-weight: normal;
|
|
|
}
|
|
|
.el-select {
|
|
|
margin: 0px 12px;
|
|
|
width: 150px;
|
|
|
}
|
|
|
.cmdidClass {
|
|
|
width: 180px;
|
|
|
}
|
|
|
.mlspan {
|
|
|
font-size: 14px;
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
.time {
|
|
|
font-size: 12px;
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
.deletebtn {
|
|
|
margin-left: auto;
|
|
|
padding: 4px;
|
|
|
}
|
|
|
}
|
|
|
.commandList {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 32px);
|
|
|
//background: #fcc;
|
|
|
overflow: auto;
|
|
|
p {
|
|
|
background: #fdf6ec;
|
|
|
margin-bottom: 8px;
|
|
|
line-height: 24px;
|
|
|
color: #333;
|
|
|
font-size: 14px;
|
|
|
padding: 6px;
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
&:hover {
|
|
|
background: #faecd8;
|
|
|
}
|
|
|
.indexClass {
|
|
|
padding: 4px;
|
|
|
font-size: 14px;
|
|
|
color: #000;
|
|
|
background: #d3d3d3;
|
|
|
min-width: 18px;
|
|
|
text-align: center;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
.normalClass {
|
|
|
background: #d3d3d3;
|
|
|
}
|
|
|
.cancelClass {
|
|
|
background: #fde2e2;
|
|
|
}
|
|
|
.comMsg {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
b {
|
|
|
font-weight: normal;
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.commandRunLeft {
|
|
|
}
|
|
|
.commandRunRight {
|
|
|
.commandList {
|
|
|
p {
|
|
|
cursor: default;
|
|
|
background: #e1f3d8;
|
|
|
&:hover {
|
|
|
background: #e1f3d8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.MsgDialog {
|
|
|
.cmdMain {
|
|
|
p {
|
|
|
font-size: 16px;
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
}
|
|
|
.dialog-footer {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|