bug修复

ZZJ

2022-06-23 feaf0a9778879ef211c5587a513ba4cbdabb52d0

 src/pages/internetData/views/helemtTable.vue

@@ -1,105 +1,526 @@
<template>
<div class="helemtTable">
<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="序号"
      type="index">
    </el-table-column>
  <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="60"
        type="index"
      >
      </el-table-column>

    <el-table-column
      label="设备"
      width="230">
      <template slot-scope="scope">
        <div class="index-container">
          <div class="index">{{scope.$index}}</div>
          <div class="info">
      <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-number">{{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>
        </div>
      </template>
    </el-table-column>
        </template>
      </el-table-column>

    <el-table-column
      <el-table-column
        header-align="center"
        align="center"
        prop="ip"
        label="IP地址">
    </el-table-column>
        label="IP地址"
      >
      </el-table-column>

    <el-table-column
      <el-table-column
        header-align="center"
        align="center"
        prop="mac"
        label="mac地址"
        width="150">
    </el-table-column>
        width="140"
      >
      </el-table-column>

    <el-table-column
        prop="longitude"
        label="经度">
    </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="lng"
        label="经度"
      >
      </el-table-column>

    <el-table-column
        prop="latitude"
        label="纬度">
    </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="lat"
        label="纬度"
      >
      </el-table-column>

    <el-table-column
        prop="latitude"
        label="地址">
    </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="locate_state"
        label="地址"
      >
      </el-table-column>

    <el-table-column
        prop="height"
        label="高度">
    </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="high"
        label="高度"
      >
      </el-table-column>

    <el-table-column
        prop="positon"
        label="定位状态">
    </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="gps_type"
        label="定位状态"
      >
      </el-table-column>

    <el-table-column
        prop="time"
        label="访问时间">
    </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="visit_time"
        label="访问时间"
      >
      </el-table-column>

    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <div class="action-container">
          <div class="icon iconfont"></div>
          <div class="icon iconfont"></div>
        </div>
      </template>
    </el-table-column>
      <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, 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>
</div>
  
    <div class="mask" v-if="telephoneObj"></div>
  </div>
</template>

<script>
import telephoneBox from "@/pages/internetData/components/telephoneBox";
import { getHelemtData, sendAudio } from "@/api/helemt";

let voiceText = "";
export default {
  data (){
  name: "helemtTable",
  data() {
    return {
      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:"单向定位" },
      ]
    }
  }
}
      currentPage: 1,
      page_size: 10,
      total: 10,
      helemtArr: [],
      commentContent: "",
      telephoneObj: null,
      targetIndex: null,
    };
  },
  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({
        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) => {
          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,
      });
    },
    handleSizeChange(val) {
      this.page_size = val;
      this.getHelemtArr({
        page: this.currentPage,
        pageSize: this.page_size,
      });
    },
    onCommentInputChange() {
      let value = document.querySelector("#commentContent").value;
      voiceText = value;
      let cont = 20 - value.length;
      document.querySelector(
        "#comment_info"
      ).innerHTML = `还可输入${cont}个字符`;
    },
    closeTele(e) {
      e.istele = false;
      this.$set(this.helemtArr, this.targetIndex, e);
      this.telephoneObj = null;
      this.targetIndex = 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;
      height: 56px;

      .icon {
        font-size: 46px;
        color: #ffaa44;
        margin-right: 10px;
      }
    }

    ::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: 0.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>