<template>
|
<div class="helemtTable">
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
header-align="center"
|
:highlight-current-row="true"
|
>
|
<el-table-column
|
header-align="center"
|
label="序号"
|
align="center"
|
width="80"
|
type="index">
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
label="设备"
|
width="260">
|
<template slot-scope="scope">
|
<div class="index-container">
|
<div class="icon iconfont"></div>
|
<div class="right">
|
<div class="code">设备编码 : {{scope.row.code}}</div>
|
<div class="elec">电量 :
|
<span
|
:class="{ 'elec-high': scope.row.elec >= 40,
|
'elec-middle': scope.row.elec < 40 && scope.row.elec > 0,
|
'elec-low': scope.row.elec === 0}"
|
>{{scope.row.elec}}</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="longitude"
|
label="经度">
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="latitude"
|
label="纬度">
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="latitude"
|
label="地址">
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="height"
|
label="高度">
|
</el-table-column>
|
|
<el-table-column
|
header-align="center"
|
align="center"
|
prop="positon"
|
label="定位状态">
|
</el-table-column>
|
|
<el-table-column
|
align="center"
|
header-align="center"
|
prop="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)"
|
>
|
<img src="/images/InternetData/视频_点击.png" alt=""
|
v-else
|
@click="sendVoice(scope.row)"
|
>
|
<img src="/images/InternetData/语音.png" alt=""
|
v-if="!scope.row.istele"
|
@click="telephone(scope.row)"
|
>
|
<img src="/images/InternetData/语音_点击.png" alt=""
|
v-else
|
@click="telephone(scope.row)"
|
>
|
</div>
|
</template>
|
</el-table-column>
|
|
|
|
</el-table>
|
|
<el-pagination
|
background
|
:total="100"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="currentPage"
|
:page-sizes="[5, 10, 15, 20]"
|
:page-size="10"
|
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'
|
export default {
|
data (){
|
return {
|
currentPage:1,
|
tableData: [
|
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:29.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:0, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
|
longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
|
isSend:false,istele:false
|
},
|
],
|
commentContent:'',
|
telephoneObj:null
|
}
|
},
|
methods :{
|
sendVoice (target){
|
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 => {
|
target.isSend = false
|
|
});
|
|
|
|
},
|
telephone (target){
|
target.istele = true
|
this.telephoneObj = target
|
},
|
handleCurrentChange (){
|
|
},
|
handleSizeChange (){
|
|
},
|
onCommentInputChange(){
|
let value = document.querySelector("#commentContent").value
|
console.log(value);
|
let cont = 20-value.length
|
document.querySelector("#comment_info").innerHTML = `还可输入${cont}个字符`
|
},
|
closeTele(e){
|
e.istele = false
|
this.telephoneObj = 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;
|
justify-content: space-around;
|
height: 56px;
|
|
.icon {
|
font-size: 46px;
|
color: #FFAA44;
|
}
|
}
|
|
::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: .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>
|
