From 38f098f7d4ca5831a513a8d50e2efee08d452e03 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 22 十月 2021 18:55:59 +0800
Subject: [PATCH] 暂存
---
src/pages/internetData/views/helemtTable.vue | 415 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 401 insertions(+), 14 deletions(-)
diff --git a/src/pages/internetData/views/helemtTable.vue b/src/pages/internetData/views/helemtTable.vue
index 11cb89c..6cdce5a 100644
--- a/src/pages/internetData/views/helemtTable.vue
+++ b/src/pages/internetData/views/helemtTable.vue
@@ -2,76 +2,117 @@
<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>
@@ -79,27 +120,373 @@
</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>
\ No newline at end of file
--
Gitblit v1.8.0