From 2ff4a572df6b098779bc592a0c6e0a90e1b79b2e Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期五, 12 十一月 2021 19:08:00 +0800 Subject: [PATCH] 暂存 --- src/pages/internetData/views/helemtTable.vue | 775 ++++++++++++++++++++++++++++++++++------------------------ 1 files changed, 453 insertions(+), 322 deletions(-) diff --git a/src/pages/internetData/views/helemtTable.vue b/src/pages/internetData/views/helemtTable.vue index 5c80651..011b96e 100644 --- a/src/pages/internetData/views/helemtTable.vue +++ b/src/pages/internetData/views/helemtTable.vue @@ -1,202 +1,321 @@ <template> -<div class="helemtTable"> -<el-table - :data="tableData" - style="width: 100%" - header-align="center" - :highlight-current-row="true" + <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="80" - type="index"> - </el-table-column> + <el-table-column + header-align="center" + label="搴忓彿" + align="center" + width="60" + type="index" + > + </el-table-column> - <el-table-column - header-align="center" - label="璁惧" - width="260"> - <template slot-scope="scope"> - <div class="index-container"> + <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.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 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> + </div> + </template> + </el-table-column> - <el-table-column - header-align="center" - align="center" + <el-table-column + header-align="center" + align="center" prop="ip" - label="IP鍦板潃"> - </el-table-column> + label="IP鍦板潃" + > + </el-table-column> - <el-table-column - header-align="center" - align="center" + <el-table-column + header-align="center" + align="center" prop="mac" label="mac鍦板潃" - width="140"> - </el-table-column> + 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 + <el-table-column header-align="center" align="center" - prop="height" - label="楂樺害"> - </el-table-column> + prop="lng" + label="缁忓害" + > + </el-table-column> - <el-table-column + <el-table-column header-align="center" align="center" - prop="positon" - label="瀹氫綅鐘舵��"> - </el-table-column> + prop="lat" + label="绾害" + > + </el-table-column> - <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="time" - label="璁块棶鏃堕棿"> - </el-table-column> + prop="visit_time" + label="璁块棶鏃堕棿" + > + </el-table-column> - <el-table-column - align="center" - header-align="center" - label="鎿嶄綔"> + <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> + <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="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" /> - </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> - + <div class="mask" v-if="telephoneObj"></div> + </div> </template> <script> -import telephoneBox from '@/pages/internetData/components/telephoneBox' +import telephoneBox from "@/pages/internetData/components/telephoneBox"; +import { getHelemtData } from "@/api/helemt"; export default { - data (){ + name: "helemtTable", + data() { return { - currentPage:1, + currentPage: 1, + page_size: 10, + total: 10, 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 - }, + { + 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 - } + helemtArr: [], + commentContent: "", + telephoneObj: null, + }; }, - methods :{ - sendVoice (target){ - target.isSend = true + created() { + this.getHelemtArr({ + page: this.currentPage, + pageSize: this.page_size, + }); + }, + methods: { + async getHelemtArr(data) { + const res = await getHelemtData(data); + console.log(res); + this.helemtArr = res.data.items; + this.total = res.data.total; + }, + sendVoice(target) { + target.isSend = true; const h = this.$createElement; this.$msgbox({ @@ -204,86 +323,107 @@ "div", { attrs: { - class: "el-textarea" - } + class: "el-textarea", + }, }, - [ h( - "div", - { - attrs: { - class: "el-title" - } - },[h("span",{ - attrs: { - class: "icon iconfont" - } - },"\ue7cc"),h("span",null,"鍙戦�佽闊�")]), + [ + h( + "div", + { + attrs: { + class: "el-title", + }, + }, + [ + h( + "span", + { + attrs: { + class: "icon iconfont", + }, + }, + "\ue7cc" + ), + h("span", null, "鍙戦�佽闊�"), + ] + ), h("textarea", { attrs: { placeholder: "璇疯緭鍏ヨ闊冲懡浠�", - maxlength:"20", + maxlength: "20", class: "el-textarea__inner", autocomplete: "off", rows: 3, id: "commentContent", - }, value: this.commentContent, - on: { input: this.onCommentInputChange } + on: { input: this.onCommentInputChange }, }), - h("div",{attrs:{class:"info",id: "comment_info"}},"杩樺彲杈撳叆20涓瓧绗�") + h( + "div", + { attrs: { class: "info", id: "comment_info" } }, + "杩樺彲杈撳叆20涓瓧绗�" + ), ] ), showCancelButton: true, confirmButtonText: "纭畾", - confirmButtonClass:"hele_btn_save", - cancelButtonClass:"hele_btn_cancel", + 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 - + 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 + telephone(target) { + target.istele = true; + this.telephoneObj = target; }, - handleCurrentChange (){ - + handleCurrentChange(val) { + this.currentPage = val; + this.getHelemtArr({ + page: this.currentPage, + pageSize: this.page_size, + }); }, - handleSizeChange (){ - + handleSizeChange(val) { + this.page_size = val; + this.getHelemtArr({ + page: this.currentPage, + pageSize: this.page_size, + }); }, - onCommentInputChange(){ - let value = document.querySelector("#commentContent").value + onCommentInputChange() { + let value = document.querySelector("#commentContent").value; console.log(value); - let cont = 20-value.length - document.querySelector("#comment_info").innerHTML = `杩樺彲杈撳叆${cont}涓瓧绗 + let cont = 20 - value.length; + document.querySelector( + "#comment_info" + ).innerHTML = `杩樺彲杈撳叆${cont}涓瓧绗; }, - closeTele(e){ - e.istele = false - this.telephoneObj = null - } + closeTele(e) { + e.istele = false; + this.telephoneObj = null; + }, }, - components :{ - telephoneBox - } -} + components: { + telephoneBox, + }, +}; </script> <style scoped lang="scss"> .helemtTable { position: relative; - .el-table { + .el-table { overflow-y: scroll; height: 660px; font-size: 12px; @@ -301,75 +441,73 @@ .index-container { display: flex; align-items: center; - justify-content: space-around; height: 56px; .icon { font-size: 46px; - color: #FFAA44; + color: #ffaa44; + margin-right: 10px; } } - ::v-deep .el-table__row{ + ::v-deep .el-table__row { td { - border-bottom: 2px solid #fff; - border-top: 2px solid #fff; + 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; - } + &: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; - } + &: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) ; + background-color: rgb(242, 242, 247); td { - border-bottom: 2px solid rgb(242, 242, 247); - border-top: 2px solid rgb(242, 242, 247); + 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); - } + &: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); - } - } + 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); + 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); - } + &: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); - } + border-radius: 0 20px 20px 0; + border-right: 2px solid rgb(17, 170, 102); + border-bottom: 2px solid rgb(17, 170, 102); + } + } } - } - } .elec-high { @@ -386,29 +524,28 @@ ::v-deep .el-pagination { margin-top: 20px; .el-pager li:not(.disabled):not(.active):hover { - color: #11AA66; + color: #11aa66; } - .el-pager li:not(.disabled).active { - background-color: #11AA66; + .el-pager li:not(.disabled).active { + background-color: #11aa66; } - input:focus, input:hover { - border: 1px solid #11AA66 !important; + input:focus, + input:hover { + border: 1px solid #11aa66 !important; } - .el-input.is-focus input{ - border: 1px solid #11AA66 !important; + .el-input.is-focus input { + border: 1px solid #11aa66 !important; } - - } ::v-deep .has-gutter { height: 70px; } - .mask { - position: fixed; + .mask { + position: fixed; top: 0; bottom: 0; left: 0; @@ -416,77 +553,71 @@ text-align: center; z-index: 1; background-color: black; - opacity: .5; - } - - + opacity: 0.5; + } } - .el-textarea { - height: 150px; - padding: 0 15px; +.el-textarea { + height: 150px; + padding: 0 15px; - .el-title { - margin-top: 20px; - margin-bottom: 15px; - color: #4F4F4F; - font-size: 16px; - font-weight: 700; + .el-title { + margin-top: 20px; + margin-bottom: 15px; + color: #4f4f4f; + font-size: 16px; + font-weight: 700; - .icon { - font-weight: normal; - font-size: 19px; - } - + .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; - } - - } + + .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; - } + .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; + 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; -} + &:hover { + background: #11aa66 !important; + border: 1px solid #11aa66 !important; + } } .hele_btn_cancel { -width: 175px; -height: 40px; + width: 175px; + height: 40px; -border: 1px solid #E0E0E0; -box-sizing: border-box; -border-radius: 25px !important; + border: 1px solid #e0e0e0; + box-sizing: border-box; + border-radius: 25px !important; } </style> \ No newline at end of file -- Gitblit v1.8.0