暂存

ZZJ

2021-11-12 2ff4a572df6b098779bc592a0c6e0a90e1b79b2e

暂存

 src/api/helemt.ts

New file
@@ -0,0 +1,9 @@
import request from "@/scripts/httpRequest";

export const getHelemtData = (data: any) => {
    return request({
        url: "/temp/iotdata/devices",
        method: "post",
        data
    })
}

 src/pages/internetData/components/screening.vue

@@ -1,118 +1,116 @@
<template>
<div class="screening">
    
        <div class="title">设备编码 : </div>
        <div class="input_code">
            <el-input
             placeholder="请输入内容"
             v-model="code"
             clearable>
             </el-input>
        </div>
        
  <div class="screening">
    <div class="title">设备编码 :</div>
    <div class="input_code">
      <el-input placeholder="请输入内容" v-model="code" clearable> </el-input>
    </div>

        <div class="title electric">电量区间 : </div>
    <div class="title electric">电量区间 :</div>

        <div class="input_elec">
        <el-input
        placeholder="请输入"
        v-model="lowerElec"
        clearable>
        </el-input>
        </div>    
        <div class="font-weight: 700;font-size: 25px;">-</div>
        <div class="input_elec">
        <el-input
        placeholder="请输入"
        v-model="UpperElec"
        clearable>
        </el-input>
        </div>
    <div class="input_elec">
      <el-input placeholder="请输入" v-model="lowerElec" clearable> </el-input>
    </div>
    <div class="font-weight: 700;font-size: 25px;">-</div>
    <div class="input_elec">
      <el-input placeholder="请输入" v-model="UpperElec" clearable> </el-input>
    </div>

        <div class="save">查询</div>
        <div class="reset">清空</div>


</div>
    <div class="save" @click="searchHelmet">查询</div>
    <div class="reset" @click="resetHelmet">清空</div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            code:'',
            lowerElec: '',
            UpperElec: ''
        }
    }
}
  data() {
    return {
      code: "",
      lowerElec: "",
      UpperElec: "",
    };
  },
  methods: {
    searchHelmet() {
      this.$emit("searchHelmet", {
        sn: this.code,
        batteryStart: this.lowerElec,
        batteryEnd: this.UpperElec,
      });
    },
    resetHelmet() {
      this.code = "";
      this.lowerElec = "";
      this.UpperElec = "";
      this.$emit("resetHelmet");
    },
  },
};
</script>

<style scoped lang="scss">
.screening {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 70px;
    border-radius: 15px;
    background-color: #F2F2F7;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 70px;
  border-radius: 15px;
  background-color: #f2f2f7;

    .title {
        font-size: 14px;
        color: #4F4F4F;
  .title {
    font-size: 14px;
    color: #4f4f4f;
  }

  .input_code {
    margin: 0 20px 0 5px;
    width: 250px;
  }

  .input_elec {
    margin: 0 5px;
    width: 130px;
  }

  .save {
    margin-left: 22%;
    margin-right: 10px;
    width: 90px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    color: #333333;
    font-size: 14px;
    line-height: 40px;
    cursor: pointer;

    &:hover {
      background: #11aa66;
      color: #fff;
    }
  }

    .input_code {
        margin:0 20px 0 5px ;
        width: 250px;
  .reset {
    width: 90px;
    height: 40px;
    background: #fff;
    border-radius: 10px;
    color: #333333;
    font-size: 14px;
    line-height: 40px;
    cursor: pointer;

    &:hover {
      background: #11aa66;
      color: #fff;
    }
  }

    .input_elec {
        margin:0 5px ;
        width: 130px;
  .el-input ::v-deep input {
    border-radius: 10px;

    &:focus {
      border: 1px solid #11aa66;
    }

    .save {
        margin-left: 22%;
        margin-right: 10px;
        width: 90px;
        height: 40px;       
        border-radius: 10px;
        background: #fff;
        color: #333333;
        font-size: 14px;
        line-height: 40px;
        cursor: pointer;

        &:hover {
            background: #11AA66;
            color: #fff;
        }
    }

    .reset {
        width: 90px;
        height: 40px;
        background: #fff;
        border-radius: 10px;
        color: #333333;
        font-size: 14px;
        line-height: 40px;
        cursor: pointer;

        &:hover {
            background: #11AA66;
            color: #fff;
        }
    }

    .el-input ::v-deep input {
        border-radius: 10px;

        &:focus {
            border: 1px solid #11AA66;
        }
    }
    
  }
}
</style>

 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">&#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)"
            />
            <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>

 src/pages/internetData/views/helmet.vue

@@ -1,38 +1,51 @@
<template>
 <div class="data_helmet">
     <!-- 筛选框 -->
     <screening />
  <div class="data_helmet">
    <!-- 筛选框 -->
    <screening @searchHelmet="searchHelmet" @resetHelmet="resetHelmet" />

     <!-- 表格 -->
     <helemtTable />
   
</div>  
    <!-- 表格 -->
    <helemtTable ref="helemtTable" />
  </div>
</template>

<script>
import screening from '@/pages/internetData/components/screening'
import helemtTable from '@/pages/internetData/views/helemtTable'
import screening from "@/pages/internetData/components/screening";
import helemtTable from "@/pages/internetData/views/helemtTable";
export default {
    data (){
        return {

        }
  data() {
    return {};
  },
  components: {
    screening,
    helemtTable,
  },
  methods: {
    searchHelmet(data) {
      this.$refs.helemtTable.getHelemtArr({
        ...data,
        page: 1,
        pageSize: this.$refs.helemtTable._data.page_size,
      });
    },
    components: {
        screening,
        helemtTable
    }
}
    resetHelmet() {
      console.log(this.$refs.helemtTable);
      this.$refs.helemtTable.getHelemtArr({
        page: 1,
        pageSize: this.$refs.helemtTable._data.page_size,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.data_helmet {
    padding: 15px 20px 20px 20px;
    height: 100%;
    background-color: rgb(251, 252, 254);
  padding: 15px 20px 20px 20px;
  height: 100%;
  background-color: rgb(251, 252, 254);

    .helemtTable {
        height: 710px;
    }
  .helemtTable {
    height: 710px;
  }
}
</style>

 vue.config.js

@@ -1,34 +1,34 @@
'use strict'
const glob = require('glob')
const pages = {}
const IS_VENDOR = /[\\/]node_modules[\\/]/
const pageVendor = {}
"use strict";
const glob = require("glob");
const pages = {};
const IS_VENDOR = /[\\/]node_modules[\\/]/;
const pageVendor = {};

const pkg = require('./package.json')
const timestamp = new Date().getTime()
const queryStr = `?v=${pkg.version}&t=${timestamp}`
const pkg = require("./package.json");
const timestamp = new Date().getTime();
const queryStr = `?v=${pkg.version}&t=${timestamp}`;

glob.sync('./src/pages/**/main.ts').forEach(path => {
  const chunk = path.split('./src/pages/')[1].split('/main.ts')[0]
  const chunk_vendor = `${chunk}-vendors`
  const chunk_common = `${chunk}-common`
glob.sync("./src/pages/**/main.ts").forEach((path) => {
  const chunk = path.split("./src/pages/")[1].split("/main.ts")[0];
  const chunk_vendor = `${chunk}-vendors`;
  const chunk_common = `${chunk}-common`;
  pages[chunk] = {
    entry: path,
    template: 'public/index.html',
    title: chunk == 'desktop/index' ? 'SmartAI' : chunk,
    chunks: [chunk_vendor, 'chunk-common', chunk]
  }
  if (chunk != 'index') {
    pages[chunk].filename = 'view/' + chunk + '.html'
    template: "public/index.html",
    title: chunk == "desktop/index" ? "SmartAI" : chunk,
    chunks: [chunk_vendor, "chunk-common", chunk],
  };
  if (chunk != "index") {
    pages[chunk].filename = "view/" + chunk + ".html";
  }

  pageVendor[chunk_vendor] = {
    name: chunk_vendor,
    priority: -11,
    chunks: c => c.name === chunk,
    chunks: (c) => c.name === chunk,
    test: /\.js$/,
    enforce: true
  }
    enforce: true,
  };

  // pageVendor[chunk_common] = {
  //   name: chunk_common,
@@ -38,30 +38,31 @@
  //   reuseExistingChunk: true,
  //   enforce: true
  // }
})
});

// const serverUrl = "http://58.118.225.79:41243" // 羊五
 const serverUrl = "http://192.168.20.189:7009"
const serverUrl = "http://192.168.20.189:7009";
//const serverUrl = "http://192.168.20.10:9000";

module.exports = {
  pages,
  chainWebpack: config => {
    config.plugins.delete('named-chunks')
    if (process.env.NODE_ENV === 'production') {
      config.output.filename('js/[name].js' + queryStr).end()
      config.output.chunkFilename('js/[name].js' + queryStr).end()
  chainWebpack: (config) => {
    config.plugins.delete("named-chunks");
    if (process.env.NODE_ENV === "production") {
      config.output.filename("js/[name].js" + queryStr).end();
      config.output.chunkFilename("js/[name].js" + queryStr).end();
      // 修改生产配置
      config.plugin('extract-css').tap(() => [
      config.plugin("extract-css").tap(() => [
        {
          filename: `css/[name].css${queryStr}`,
          chunkFilename: `css/[name].css${queryStr}`
        }
      ])
          chunkFilename: `css/[name].css${queryStr}`,
        },
      ]);
    }

    config.optimization.splitChunks({
      cacheGroups: pageVendor
    })
      cacheGroups: pageVendor,
    });

    // config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', publicPath: '../' })
    //config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', outputPath: '../' })
@@ -70,51 +71,51 @@
  filenameHashing: false,
  pwa: {
    iconPaths: {
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico'
    }
      favicon32: "favicon.ico",
      favicon16: "favicon.ico",
    },
  },
  devServer: {
    proxy: {
      '/track': {
      "/track": {
        target: serverUrl,
        // ws: true,
        changeOrigin: true,
      },
      '/ws': {
      "/ws": {
        target: serverUrl,
        // ws: true,
        changeOrigin: true,
      },
      "/data/api-v/app/findAllApp": {
        // target: '/',
        target: 'http://localhost:8080/',
        target: "http://localhost:8080/",
        changeOrigin: true,
        pathRewrite: {
          '^/data/api-v/app/findAllApp': 'apps.json'
        }
          "^/data/api-v/app/findAllApp": "apps.json",
        },
      },
      "/api-c": {
        target: serverUrl,
        changeOrigin: true
        changeOrigin: true,
      },
      "/api-v": {
        target: serverUrl,
        changeOrigin: true
        changeOrigin: true,
      },
      "/api-f": {
        target: serverUrl,
        // secure: false,
        changeOrigin: true
        changeOrigin: true,
      },
      "/api-p": {
        target: serverUrl,
        // secure: false,
        changeOrigin: true
        changeOrigin: true,
      },
      "/api-u": {
        target: serverUrl,
        changeOrigin: true
        changeOrigin: true,
      },
      "/httpImage": {
        target: serverUrl,
@@ -123,8 +124,15 @@
      "/files": {
        target: serverUrl,
        changeOrigin: true, //开启代理
      }
    }
      },
      "/temp": {
        target: "http://192.168.20.10:9000",
        changeOrigin: true, //开启代理,
        pathRewrite: {
          "/temp": "",
        },
      },
    },
  },
  /* css:{
    loaderOptions:{
@@ -133,4 +141,4 @@
      }
    }
  } */
}
};