修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/internetData/views/helemtTable.vue

@@ -1,202 +1,192 @@
<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">&#xe8a0;</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, scope.$index)"
            />
            <img
              src="/images/InternetData/视频_点击.png"
              alt=""
              v-else
              @click="sendVoice(scope.row, scope.$index)"
            />
            <img
              src="/images/InternetData/语音.png"
              alt=""
              v-if="!scope.row.istele"
              @click="telephone(scope.row, scope.$index)"
            />
            <img
              src="/images/InternetData/语音_点击.png"
              alt=""
              v-else
              @click="telephone(scope.row, scope.$index)"
            />
          </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, sendAudio } from "@/api/helemt";

let voiceText = "";
export default {
  data (){
  name: "helemtTable",
  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:"单向定位",
        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
    }
      currentPage: 1,
      page_size: 10,
      total: 10,
      helemtArr: [],
      commentContent: "",
      telephoneObj: null,
      targetIndex: 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);
      this.helemtArr = res.data.items;
      this.total = res.data.total;
    },
    sendVoice(target, index) {
      const _this = this;
      target.isSend = true;

      const h = this.$createElement;
      this.$msgbox({
@@ -204,86 +194,139 @@
          "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) => {
          if (action == "confirm") {
            if (!voiceText) {
              this.$message({
                message: "指令不能为空",
                type: "warning",
              });
              target.isSend = false;
              _this.$set(_this.helemtArr, index, target);
              return;
            }
            console.log(voiceText);
            sendAudio(target.device_sn, voiceText).then((res) => {
              this.$message({
                message: "指令发送成功",
                type: "success",
              });
              target.isSend = false;
              _this.$set(_this.helemtArr, index, target);
            });
            target.isSend = false;
            _this.$set(_this.helemtArr, index, target);
          } else {
            target.isSend = false;
            _this.$set(_this.helemtArr, index, target);
          }
        })
        .catch(() => {
          target.isSend = false;
          _this.$set(_this.helemtArr, index, target);
        });
    },
    telephone(target, index) {
      this.targetIndex = index;
      target.istele = true;
      this.telephoneObj = target;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getHelemtArr({
        page: this.currentPage,
        pageSize: this.page_size,
      });



    },
    telephone (target){
      target.istele = true
      this.telephoneObj = target
    handleSizeChange(val) {
      this.page_size = val;
      this.getHelemtArr({
        page: this.currentPage,
        pageSize: this.page_size,
      });
    },
    handleCurrentChange (){

    onCommentInputChange() {
      let value = document.querySelector("#commentContent").value;
      voiceText = value;
      let cont = 20 - value.length;
      document.querySelector(
        "#comment_info"
      ).innerHTML = `还可输入${cont}个字符`;
    },
    handleSizeChange (){

    closeTele(e) {
      e.istele = false;
      this.$set(this.helemtArr, this.targetIndex, e);
      this.telephoneObj = null;
      this.targetIndex = null;
    },
    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
  }
}
  components: {
    telephoneBox,
  },
};
</script>

<style scoped lang="scss">
.helemtTable {
  position: relative;
   .el-table {
  .el-table {
    overflow-y: scroll;
    height: 660px;
    font-size: 12px;
@@ -301,75 +344,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 +427,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 +456,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>