<template>
|
<div class="helemtTable">
|
<el-table
|
:data="helemtArr"
|
style="width: 100%"
|
header-align="center"
|
:highlight-current-row="true"
|
>
|
<el-table-column
|
header-align="center"
|
label="序号"
|
align="center"
|
width="60"
|
type="index"
|
>
|
</el-table-column>
|
|
<el-table-column header-align="center" label="设备" width="280">
|
<template slot-scope="scope">
|
<div class="index-container">
|
<div class="icon iconfont"></div>
|
<div class="right">
|
<div class="code">设备编码 : {{ scope.row.device_sn }}</div>
|
<div class="elec">
|
电量 :
|
<span
|
:class="{
|
'elec-high': scope.row.battery >= 40,
|
'elec-middle':
|
scope.row.battery < 40 && scope.row.battery > 0,
|
'elec-low': scope.row.battery === 0,
|
}"
|
>{{ scope.row.battery }}</span
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="ip"
|
label="IP地址"
|
>
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="mac"
|
label="mac地址"
|
width="140"
|
>
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="lng"
|
label="经度"
|
>
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="lat"
|
label="纬度"
|
>
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="locate_state"
|
label="地址"
|
>
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="high"
|
label="高度"
|
>
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="gps_type"
|
label="定位状态"
|
>
|
</el-table-column>
|
|
<el-table-column
|
align="center"
|
header-align="center"
|
prop="visit_time"
|
label="访问时间"
|
>
|
</el-table-column>
|
|
<el-table-column align="center" header-align="center" label="操作">
|
<template slot-scope="scope">
|
<div class="action-container">
|
<img
|
src="/images/InternetData/视频.png"
|
alt=""
|
v-if="!scope.row.isSend"
|
@click="sendVoice(scope.row, scope.$index)"
|
/>
|
<img
|
src="/images/InternetData/视频_点击.png"
|
alt=""
|
v-else
|
@click="sendVoice(scope.row, scope.$index)"
|
/>
|
<img
|
src="/images/InternetData/语音.png"
|
alt=""
|
v-if="!scope.row.istele"
|
@click="telephone(scope.row, scope.$index)"
|
/>
|
<img
|
src="/images/InternetData/语音_点击.png"
|
alt=""
|
v-else
|
@click="telephone(scope.row, scope.$index)"
|
/>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-pagination
|
background
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="currentPage"
|
:page-sizes="[2, 10, 15, 20]"
|
:page-size="page_size"
|
popper-class="page_helemt"
|
layout="prev, pager, next,sizes,jumper"
|
>
|
</el-pagination>
|
|
<telephoneBox :tele="telephoneObj" v-if="telephoneObj" @close="closeTele" />
|
|
<div class="mask" v-if="telephoneObj"></div>
|
</div>
|
</template>
|
|
<script>
|
import telephoneBox from "@/pages/internetData/components/telephoneBox";
|
import { getHelemtData, sendAudio } from "@/api/helemt";
|
|
let voiceText = "";
|
export default {
|
name: "helemtTable",
|
data() {
|
return {
|
currentPage: 1,
|
page_size: 10,
|
total: 10,
|
helemtArr: [],
|
commentContent: "",
|
telephoneObj: null,
|
targetIndex: null,
|
};
|
},
|
created() {
|
this.getHelemtArr({
|
page: this.currentPage,
|
pageSize: this.page_size,
|
});
|
},
|
methods: {
|
async getHelemtArr(data) {
|
const res = await getHelemtData(data);
|
this.helemtArr = res.data.items;
|
this.total = res.data.total;
|
},
|
sendVoice(target, index) {
|
const _this = this;
|
target.isSend = true;
|
|
const h = this.$createElement;
|
this.$msgbox({
|
message: h(
|
"div",
|
{
|
attrs: {
|
class: "el-textarea",
|
},
|
},
|
[
|
h(
|
"div",
|
{
|
attrs: {
|
class: "el-title",
|
},
|
},
|
[
|
h(
|
"span",
|
{
|
attrs: {
|
class: "icon iconfont",
|
},
|
},
|
"\ue7cc"
|
),
|
h("span", null, "发送语音"),
|
]
|
),
|
h("textarea", {
|
attrs: {
|
placeholder: "请输入语音命令",
|
maxlength: "20",
|
class: "el-textarea__inner",
|
autocomplete: "off",
|
rows: 3,
|
id: "commentContent",
|
},
|
value: this.commentContent,
|
on: { input: this.onCommentInputChange },
|
}),
|
h(
|
"div",
|
{ attrs: { class: "info", id: "comment_info" } },
|
"还可输入20个字符"
|
),
|
]
|
),
|
showCancelButton: true,
|
confirmButtonText: "确定",
|
confirmButtonClass: "hele_btn_save",
|
cancelButtonClass: "hele_btn_cancel",
|
cancelButtonText: "取消",
|
beforeClose: (action, instance, done) => {
|
document.querySelector("#commentContent").value = "";
|
document.querySelector(
|
"#comment_info"
|
).innerHTML = `还可输入20个字符`;
|
target.isSend = false;
|
done();
|
},
|
})
|
.then((action) => {
|
if (action == "confirm") {
|
if (!voiceText) {
|
this.$message({
|
message: "指令不能为空",
|
type: "warning",
|
});
|
target.isSend = false;
|
_this.$set(_this.helemtArr, index, target);
|
return;
|
}
|
console.log(voiceText);
|
sendAudio(target.device_sn, voiceText).then((res) => {
|
this.$message({
|
message: "指令发送成功",
|
type: "success",
|
});
|
target.isSend = false;
|
_this.$set(_this.helemtArr, index, target);
|
});
|
target.isSend = false;
|
_this.$set(_this.helemtArr, index, target);
|
} else {
|
target.isSend = false;
|
_this.$set(_this.helemtArr, index, target);
|
}
|
})
|
.catch(() => {
|
target.isSend = false;
|
_this.$set(_this.helemtArr, index, target);
|
});
|
},
|
telephone(target, index) {
|
this.targetIndex = index;
|
target.istele = true;
|
this.telephoneObj = target;
|
},
|
handleCurrentChange(val) {
|
this.currentPage = val;
|
this.getHelemtArr({
|
page: this.currentPage,
|
pageSize: this.page_size,
|
});
|
},
|
handleSizeChange(val) {
|
this.page_size = val;
|
this.getHelemtArr({
|
page: this.currentPage,
|
pageSize: this.page_size,
|
});
|
},
|
onCommentInputChange() {
|
let value = document.querySelector("#commentContent").value;
|
voiceText = value;
|
let cont = 20 - value.length;
|
document.querySelector(
|
"#comment_info"
|
).innerHTML = `还可输入${cont}个字符`;
|
},
|
closeTele(e) {
|
e.istele = false;
|
this.$set(this.helemtArr, this.targetIndex, e);
|
this.telephoneObj = null;
|
this.targetIndex = null;
|
},
|
},
|
components: {
|
telephoneBox,
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.helemtTable {
|
position: relative;
|
.el-table {
|
overflow-y: scroll;
|
height: 660px;
|
font-size: 12px;
|
font-weight: 700;
|
|
img {
|
width: 22px;
|
height: 22px;
|
|
&:first-child {
|
margin-right: 10px;
|
}
|
}
|
|
.index-container {
|
display: flex;
|
align-items: center;
|
height: 56px;
|
|
.icon {
|
font-size: 46px;
|
color: #ffaa44;
|
margin-right: 10px;
|
}
|
}
|
|
::v-deep .el-table__row {
|
td {
|
border-bottom: 2px solid #fff;
|
border-top: 2px solid #fff;
|
|
&:first-child {
|
border-radius: 20px 0 0 20px;
|
border-left: 2px solid #fff;
|
border-bottom: 2px solid #fff;
|
}
|
|
&:last-child {
|
border-radius: 0 20px 20px 0;
|
border-right: 2px solid #fff;
|
border-bottom: 2px solid #fff;
|
}
|
}
|
|
&:hover {
|
background-color: rgb(242, 242, 247);
|
|
td {
|
border-bottom: 2px solid rgb(242, 242, 247);
|
border-top: 2px solid rgb(242, 242, 247);
|
|
&:first-child {
|
border-radius: 20px 0 0 20px;
|
border-left: 2px solid rgb(242, 242, 247);
|
border-bottom: 2px solid rgb(242, 242, 247);
|
}
|
|
&:last-child {
|
border-radius: 0 20px 20px 0;
|
border-right: 2px solid rgb(242, 242, 247);
|
border-bottom: 2px solid rgb(242, 242, 247);
|
}
|
}
|
}
|
|
&.current-row {
|
td {
|
background-color: #fff;
|
border-top: 2px solid rgb(17, 170, 102);
|
border-bottom: 2px solid rgb(17, 170, 102);
|
|
&:first-child {
|
border-radius: 20px 0 0 20px;
|
border-left: 2px solid rgb(17, 170, 102);
|
border-bottom: 2px solid rgb(17, 170, 102);
|
}
|
|
&:last-child {
|
border-radius: 0 20px 20px 0;
|
border-right: 2px solid rgb(17, 170, 102);
|
border-bottom: 2px solid rgb(17, 170, 102);
|
}
|
}
|
}
|
}
|
|
.elec-high {
|
color: rgb(17, 170, 102);
|
}
|
.elec-middle {
|
color: rgb(255, 170, 68);
|
}
|
.elec-low {
|
color: rgb(255, 100, 100);
|
}
|
}
|
|
::v-deep .el-pagination {
|
margin-top: 20px;
|
.el-pager li:not(.disabled):not(.active):hover {
|
color: #11aa66;
|
}
|
.el-pager li:not(.disabled).active {
|
background-color: #11aa66;
|
}
|
|
input:focus,
|
input:hover {
|
border: 1px solid #11aa66 !important;
|
}
|
|
.el-input.is-focus input {
|
border: 1px solid #11aa66 !important;
|
}
|
}
|
|
::v-deep .has-gutter {
|
height: 70px;
|
}
|
|
.mask {
|
position: fixed;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
text-align: center;
|
z-index: 1;
|
background-color: black;
|
opacity: 0.5;
|
}
|
}
|
|
.el-textarea {
|
height: 150px;
|
padding: 0 15px;
|
|
.el-title {
|
margin-top: 20px;
|
margin-bottom: 15px;
|
color: #4f4f4f;
|
font-size: 16px;
|
font-weight: 700;
|
|
.icon {
|
font-weight: normal;
|
font-size: 19px;
|
}
|
}
|
|
.el-textarea__inner {
|
width: 357px;
|
|
&:focus {
|
border: 1px solid #11aa66;
|
}
|
}
|
|
.info {
|
font-size: 12px;
|
color: #828282;
|
text-align: right;
|
padding-right: 38px;
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
.page_helemt {
|
.el-select-dropdown__item.selected span {
|
color: #11aa66;
|
}
|
}
|
.hele_btn_save {
|
width: 175px;
|
height: 40px;
|
|
background: #11aa66 !important;
|
border: 1px solid #11aa66 !important;
|
border-radius: 25px !important;
|
margin: 10px 17px 12px 10px !important;
|
|
&:hover {
|
background: #11aa66 !important;
|
border: 1px solid #11aa66 !important;
|
}
|
}
|
|
.hele_btn_cancel {
|
width: 175px;
|
height: 40px;
|
|
border: 1px solid #e0e0e0;
|
box-sizing: border-box;
|
border-radius: 25px !important;
|
}
|
</style>
|
