ZZJ
2021-10-22 38f098f7d4ca5831a513a8d50e2efee08d452e03
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">&#xe8a0;</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>