4g信息根据ws推送进行显示

web/三相/src/views/txgl/fourgsz/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
 
     <el-row>
-      <el-col :span="8" class="card-box">
+      <el-col :span="14" class="card-box">
         <el-card>
           <div slot="header"><span style=" font-size: 20px; font-weight: bold;"><i class="el-icon-monitor"></i> {{$t('fourgwlsz')}}</span>
           </div>
@@ -35,15 +35,47 @@
                 <el-form-item    :label="this.$t('tel')" prop="tel">
                   <el-input :readonly="true" v-model="form3.tel"   />
                 </el-form-item>
-                <el-form-item  class="aaa"   :label="this.$t('ztts')"  >
-                  <template #label>
-                    <span>{{$t('ztts')}}   </span>
-                    <el-tooltip class="item" effect="dark" :content="$t('zttsts')" placement="top">
-                      <i class="el-icon-question"></i>
-                    </el-tooltip>
-                  </template>
-                  <input type="checkbox" v-model="isChecked"   />
+                <!--<el-form-item  class="aaa"   :label="this.$t('ztts')"  >-->
+                  <!--<template #label>-->
+                    <!--<span>{{$t('ztts')}}   </span>-->
+                    <!--<el-tooltip class="item" effect="dark" :content="$t('zttsts')" placement="top">-->
+                      <!--<i class="el-icon-question"></i>-->
+                    <!--</el-tooltip>-->
+                  <!--</template>-->
+                  <!--<input type="checkbox" v-model="isChecked"   />-->
+                <!--</el-form-item>-->
+
+                <el-form-item     :label="this.$t('dxts')" prop="dateRange">
+                  <el-table :data="form3.dateRange" border style="width: 100%" size="mini" max-height="272">
+                    <el-table-column prop="" label=""  :min-width="getStringWidth($t('tel'))" align="center">
+                      <template slot-scope="scope">{{$t('tel')}}{{ scope.$index + 1 }}</template>
+                    </el-table-column>
+
+                    <el-table-column prop="receiveAccount" 	   :min-width="getStringWidth($t('tel'))"  :label="$t('tel')"  align="center">
+                      <template slot-scope="{ row }">
+                        <el-form-item
+                          :prop="'dateRange.' + row.idx + '.receiveAccount'"
+                          class="form-item"
+
+                        >
+                          <!-- :min="info.appointmentMin" -->
+                          <el-input v-model="row.receiveAccount" style="width: 100%" controls-position="right"  ></el-input>
+                        </el-form-item>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="" :label="this.$t('cz')" align="center"  >
+                      <template slot-scope="scope">
+                        <el-button size="mini" v-if="form3.dateRange.length < 10 && scope.$index == 0" @click.stop="addTimeRange">
+                          <i class="el-icon-plus"></i>
+                        </el-button>
+                        <el-button size="mini"  v-else @click.stop="deleteRange(scope.$index)">
+                          <i class="el-icon-delete"></i>
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
                 </el-form-item>
+
               </el-form>
               <div slot="footer" style="float: right;" class="dialog-footer">
 
@@ -82,7 +114,14 @@
         // 表单参数
         form: {},
         form2: {},
-        form3: {},
+        form3: {
+          dateRange: [
+            {
+              idx: 0,
+              receiveAccount:"",
+            },
+          ]
+        },
         sensorStatusForm: {}, // 传感器表单数据
         czmodes:[{"id":"0","name":"gb"},{"id":"1","name":"qy"}],
         modes:[{"id":"0","name":"zd"},{"id":"1","name":"sd"}],
@@ -126,18 +165,49 @@
       this.queryIp3();
     },
     methods: {
+      getStringWidth(text) {
+        //console.log('text', text)
+        const font = '14px Arial'
+        const canvas = document.createElement('canvas')
+        const context = canvas.getContext('2d')
+        context.font = font
+        const metrics = context.measureText(text)
+        // console.log('metrics.width', metrics.width)
+        return metrics.width + 40
+      },
       //4G状态
       onSocketMessageTofourgStatus(recvMessage) {
         if (recvMessage.success && recvMessage.data!=null && recvMessage.data.data!='' && recvMessage.data.data!=null) {
-          if(recvMessage.data!=null && !this.isChecked){
+          if(recvMessage.data!=null  ){
             this.form3.ljzt=recvMessage.data.data.ljzt;
-            this.form3.xhqd=recvMessage.data.data.xhqd;
+           this.form3.xhqd=recvMessage.data.data.xhqd;
             this.form3.yys=recvMessage.data.data.yys;
             this.form3.tel=recvMessage.data.data.tel;
           }
           //  this.queryTotalStatus();
         }
       },
+      //添加时间段
+      addTimeRange() {
+        if(this.form3.dateRange.length==10){
+          this.$modal.msgWarning(this.$t('slts'));
+        }else{
+          this.form3.dateRange.push({
+            idx: this.form3.dateRange.length,
+            receiveAccount: "",
+          })
+        }
+
+      },
+
+      //删除一个时间段
+      deleteRange(index) {
+        this.form3.dateRange.splice(index, 1)
+        this.form3.dateRange.forEach((item, index) => {
+          item.idx = index
+      })
+      },
+
       togglePasswordVisibility() {
         this.passwordVisible = !this.passwordVisible;
       },
@@ -241,6 +311,16 @@
         communicationManagement(params).then(response => {
           if(response.data!=null){
           this.form3=response.data;
+          if(response.data.receiveAccountList!=null){
+            this.form3.dateRange=response.data.receiveAccountList;
+          }else{
+            this.form3.dateRange=[
+              {
+                idx: 0,
+                receiveAccount:"",
+              },
+            ]
+          }
         }
 
       });
@@ -300,9 +380,18 @@
         this.$refs["form3"].validate(valid => {
           if (valid) {
             const params={};
+            let dateRange = this.form3.dateRange
+            params.receiveAccountList=dateRange;
             params.token=this.usertoken;
             params.type="fourgPZSave";
             params.czmode=this.form3.czmode;
+            if(params.receiveAccountList.length==1){
+              this.form3.dateRange.forEach((item, index) => {
+                if(item.receiveAccount==""){
+                params.receiveAccountList=null;
+              }
+            })
+            }
             // params.mac=this.form2.mac;
             this.$modal.confirm(this.$t('qdybcm')).then(function() {
               communicationManagement(params);
@@ -326,6 +415,12 @@
 
 
 <style scoped>
+  .el-form-item__content .el-button--mini {
+    border-radius: 10px;
+    background-color: #FFFFFF;
+    width: 80px;
+    margin-left: 10px;
+  }
   .row-item {
     display: -webkit-box;
     line-height: 40px;