| | |
| | | <div class="helemtTable"> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%"> |
| | | 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="230"> |
| | | width="260"> |
| | | <template slot-scope="scope"> |
| | | <div class="index-container"> |
| | | <div class="index">{{scope.$index}}</div> |
| | | <div class="info"> |
| | | <div class="icon iconfont"></div> |
| | | <div class="right"> |
| | | <div class="code">{{scope.row.code}}</div> |
| | | <div class="elec">电量 : <span class="elec-number">{{scope.row.elec}}</span></div> |
| | | <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> |
| | | </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="150"> |
| | | 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"> |
| | | <template slot-scope="scope"> |
| | | <div class="action-container"> |
| | | <div class="icon iconfont"></div> |
| | | <div class="icon iconfont"></div> |
| | | <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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位" }, |
| | | ] |
| | | longitude:120.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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 { |
| | | ::v-deep .el-table { |
| | | 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> |