<template>
    <div >
        <div >
      <div class="top">
      <div class="section">  
         <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="140px">
        <div class="warning">
                <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。
            </div>
  <el-form-item label="自动保存：" >
  <el-switch v-model="formInline.user"></el-switch>
  </el-form-item>
  <el-form-item label="时间间隔：">
    <el-select v-model="formInline.region" placeholder="时间间隔">
      <el-option label="20s" value="shanghai"></el-option>
      <el-option label="30s" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>
    <el-form ref="form" :model="sizeForm" label-width="140px">
                 <div class="warning">
        <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>重置分析将删除所有累计的轨迹数据
      </div>
      <!-- <el-form-item > -->
       <el-button type="primary" @click="handleagain()" size="small" style="width:150px">重置</el-button>
         <div class="warning">
        <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>在 WGS84 坐标系中输入相机位置
      </div>
       <el-form-item label="相机位置：">
     <el-input v-model="sizeForm.name" style="width:150px"  placeholder="经度"></el-input>
     <el-input v-model="sizeForm.name" style="width:150px;margin-left:20px" placeholder="纬度"></el-input>
  </el-form-item>
            </el-form>
      </div>
      </div>     
   
                <div class="dataBoard">
      <div class="section">
        <p class="board-title">坐标转换</p>
         <div class="warning">
                <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。
            </div>
         <el-form ref="form" :model="coordinateForm" label-width="140px">
         <el-form-item label="坐标转换开关：">
            <el-switch v-model="coordinateForm.coordinateClose"></el-switch>
                </el-form-item>
                <el-form-item label="模型：" v-if="coordinateForm.coordinateClose==true">

                  <el-radio-group v-model="coordinateForm.model">
                    <el-radio label="Georeferencing"></el-radio>
                    
                    <el-radio label="其他"></el-radio>
                  </el-radio-group>
                   <div class="warning">
                <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>地理参照允许测量物理速度和静态图像源的距离。
            </div>
                </el-form-item>
                <el-form-item label="坐标转换：" v-if="coordinateForm.coordinateClose==true">
                  <el-radio-group v-model="coordinateForm.coordinateTransformation">
                    <el-radio label="84坐标系"></el-radio>
                    <el-radio label="其他"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <div style="width:100%;height:300px" v-if="coordinateForm.coordinateClose==true" >
                     <iframe id="mapModuleTop"  @load="load" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: calc(100% - 50px)" ></iframe>
                      <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" 
          ref="iframe"></iframe> -->
                </div>
               <el-table border :data="coordinateTableData" v-if="coordinateForm.coordinateClose==true">
  <el-table-column prop="name" label="点名称" align="center" >
    <template slot-scope="scope">
      <el-input
        v-if="scope.$index === 0"
        v-model="scope.row.name"
        maxlength="30"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.name"></span>
    </template>
  </el-table-column>
  <el-table-column prop="longitude" label="经度" align="center">
    <template slot-scope="scope">
      <el-input
        v-if="scope.row.isEdit"
        v-model="scope.row.longitude"
        maxlength="20"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.longitude"></span>
    </template>
  </el-table-column>
   <el-table-column prop="latitude" label="纬度" align="center">
    <template slot-scope="scope">
      <el-input
        v-if="scope.row.isEdit"
        v-model="scope.row.latitude"
        maxlength="20"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.latitude"></span>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <el-button
        v-if="scope.$index === 0"
        size="mini"
        type="text"
        style="color: #2090c1"
        @click="handleAdd(scope.row)"
      >Add
      </el-button>
      <el-button
        v-if="scope.$index !== 0"
        size="mini"
        type="text"
        style="color: #2090c1"
        @click="handleUpdate(scope.row)"
      >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}
      </el-button>
      <el-button
        v-if="scope.$index !== 0"
        size="mini"
        type="text"
        style="color: #F56C6C"
        @click="handleDelete(scope.row)"
      >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
      </el-button>
    </template>
  </el-table-column>
</el-table>
<div style="margin-top:15px">
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="coordinateForm.coordinateClose==true">保存</el-button>
</div>

</el-form>
      </div>
     
    </div>
       <div class="dataBoard">
      <div class="section">
        <p class="board-title">车道识别配置</p>
          <div class="warning">
        <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>在视频/动图上设置进口出口道
      </div>
         <el-form ref="form" :model="laneform" label-width="350px">          
                <!-- <p>车道识别配置</p> -->
            <el-form-item label="车道识别配置开关：" label-width="150px">
            <el-switch v-model="laneform.laneClose"></el-switch>
                </el-form-item>  
                <div style="width:100%;height:300px" v-if="laneform.laneClose==true">
                     <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: calc(100% - 50px)"></iframe>
                </div>
                <el-form-item label="各车道中心线（区域检测器）："   style="width:300px" v-if="laneform.laneClose==true">
                    <el-switch v-model="laneform.areaDetector"></el-switch>
                </el-form-item>
              <el-form-item label="自动识别各车道中心点坐标（断面检测器）："  style="width:300px" v-if="laneform.laneClose==true">
                    <el-switch v-model="laneform.sectionDetector"></el-switch>
                </el-form-item>
                <el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="laneform.laneClose==true">保存</el-button>
                
                
            </el-form>
      </div>
     
    </div>    
      <div class="dataBoard">
      <div class="section">
        <p class="board-title">识别区域</p>
         <div class="warning">
                    <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。
                </div>
         <el-form ref="form" :model="identificationAreaform" label-width="140px">          
                <!-- <p>车道识别配置</p> -->
               
                 <el-form-item label="识别区域开关"  style="width:250px">
                    <el-switch v-model="identificationAreaform.identificationAreaClose"></el-switch>
                </el-form-item>
                <div style="width:100%;height:300px" v-if="identificationAreaform.identificationAreaClose==true">
                     <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: calc(100% - 50px)"></iframe>
                </div>
                 <el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="identificationAreaform.identificationAreaClose==true">保存</el-button>
                
            </el-form>
      </div>
     
    </div>        
  <div class="dataBoard">
      <div class="section">
        <p class="board-title">轨迹平滑</p>
         <div class="warning">
                    <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
                </div>
         <el-form ref="form" :model="trajectorySmoothingform" label-width="140px">  
            <el-form-item label="轨迹平滑开关"  style="width:250px">
                    <el-switch v-model="trajectorySmoothingform.trajectorySmoothingClose"></el-switch>
                </el-form-item>        
                 <el-form-item label="预测滤波时间"  style="width:250px" v-if="trajectorySmoothingform.trajectorySmoothingClose==true">
                <el-input-number v-model="trajectorySmoothingform.time" @change="handleChange" :min="2000" :max="3000" label="预测滤波时间"></el-input-number>
                </el-form-item>
                 <el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="trajectorySmoothingform.trajectorySmoothingClose==true">保存</el-button>
            </el-form>
      </div>
     
    </div>   
     <div class="dataBoard">
      <div class="section">
        <p class="board-title">车牌识别</p>
          <div class="warning">
                    <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
                </div>
         <el-form ref="form" :model="licensePlateform" label-width="140px">          
               <el-form-item label="车牌识别开关"  style="width:250px">
                    <el-switch v-model="licensePlateform.licensePlateClose"></el-switch>
                </el-form-item>    
                <div style="width:100%;height:300px" v-if="licensePlateform.licensePlateClose==true">
                     <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: calc(100% - 50px)"></iframe>
                </div>
                  <el-table border :data="licensePlateTableData" v-if="licensePlateform.licensePlateClose==true">
  <el-table-column prop="sectionPlate" label="断面号牌" align="center">
    <template slot-scope="scope">
      <el-input
        v-if="scope.$index === 0"
        v-model="scope.row.sectionPlate"
        maxlength="30"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.sectionPlate"></span>
    </template>
  </el-table-column>
   <el-table-column prop="setAssociation" label="断面设置关联" align="center">
    <template slot-scope="scope">
      <el-input
        v-if="scope.row.isEdit"
        v-model="scope.row.setAssociation"
        maxlength="20"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.setAssociation"></span>
    </template>
  </el-table-column>
  <el-table-column prop="thresholdValue" label="车牌匹配阈值" align="center">
    <template slot-scope="scope">
      <el-input
        v-if="scope.row.isEdit"
        v-model="scope.row.thresholdValue"
        maxlength="20"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.thresholdValue"></span>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <el-button
        v-if="scope.$index === 0"
        size="mini"
        type="text"
        style="color: #2090c1"
        @click="handleAdd(scope.row)"
      >Add
      </el-button>
      <el-button
        v-if="scope.$index !== 0"
        size="mini"
        type="text"
        style="color: #2090c1"
        @click="handleUpdate(scope.row)"
      >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}
      </el-button>
      <el-button
        v-if="scope.$index !== 0"
        size="mini"
        type="text"
        style="color: #F56C6C"
        @click="handleDelete(scope.row)"
      >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
      </el-button>
    </template>
  </el-table-column>
</el-table>
<div style="margin-top:15px">
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="licensePlateform.licensePlateClose==true">保存</el-button>
</div>

                
            </el-form>
      </div>
     
    </div>             
         <div class="dataBoard">
      <div class="section">
        <p class="board-title">停车状态</p>
         <div class="warning">
                    <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>位移、速度、加速度的阈值，例如位移＜δ，速度＜v，加速度＜a，
则判断车辆停车
        </div>
          <el-form :inline="true" :model="stopStateform" class="demo-form-inline" label-width="140px">
  <el-form-item label="位移：" >
   <el-input-number v-model="stopStateform.displacement" @change="handleChange" :min="2000" :max="3000" label="位移"></el-input-number>
  </el-form-item>
  <el-form-item label="速度："  >
    <el-input-number v-model="stopStateform.speed" @change="handleChange" :min="2000" :max="3000" label="速度"></el-input-number>
</el-form-item>
  <el-form-item label="加速度：">
      <el-input-number v-model="stopStateform.acceleration" @change="handleChange" :min="2000" :max="3000" label="加速度"></el-input-number>
  </el-form-item>
  
</el-form>
<div style="margin-top:15px">
<el-button type="primary" @click="handleagain()" size="small" style="width:150px">保存</el-button>
</div>

      </div>
     
    </div>         
     <div class="dataBoard">
      <div class="section">
        <p class="board-title">通信设置</p>
           <el-form :model="communicationform" class="demo-form-inline" label-width="200px">
            <el-form-item label="更新频率：" style="margin-bottom: 20px;">
 <el-input v-model="communicationform.renewalFrequency" style="width:200px;"></el-input>
  </el-form-item>
   <div class="warning">
                    <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>更新频率可以根据链路带宽进行设置。
        </div>
  <el-form-item label="类型：" style="margin-bottom: 20px;">
    <el-radio-group v-model="communicationform.type" >
       <el-radio label="快速-用于高带宽连接"></el-radio>
       <el-radio label="平衡-适用于大多数连接"></el-radio>
       <el-radio label="慢速-用于低带宽连接"></el-radio>
       <el-radio label="自定义"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="请求轻型有效载荷：" v-if="communicationform.type=='自定义'">
    <el-input v-model="communicationform.name" style="width:200px;margin-bottom: 20px;"></el-input>ms
  </el-form-item>
   <el-form-item label="请求重型有效载荷：" v-if="communicationform.type=='自定义'">
    <el-input v-model="communicationform.name" style="width:200px;margin-bottom: 20px;"></el-input>ms
  </el-form-item>
    <el-form-item label="FPS分配器：" v-if="communicationform.type=='自定义'">
    <el-input v-model="communicationform.name" style="width:200px;margin-bottom: 20px;"></el-input>
  </el-form-item>
   <el-form-item label="框架决议：" v-if="communicationform.type=='自定义'">
     <el-select v-model="communicationform.region" placeholder="框架决议" style="margin-bottom: 20px;">
      <el-option label="自动" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="压缩格式：" v-if="communicationform.type=='自定义'">
     <el-select v-model="communicationform.region" placeholder="压缩格式" style="margin-bottom: 20px;">
      <el-option label="JPG" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="压缩率：" v-if="communicationform.type=='自定义'">
    <el-input v-model="communicationform.name" style="width:200px"></el-input>
  </el-form-item>
  <el-button type="primary" @click="handleagain()" size="small" style="width:150px" >保存</el-button>
</el-form>
      </div>
     
    </div>         

        </div>
    </div>
</template>
  
  <script>
  import mqtt from "mqtt"; // mqtt协议
export default {
    data() {
        return {
            sizeForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
             formInline: {
          user: '',
          region: ''
        },
        //最上部表单
        topForm:{

        },
        //坐标转换
        coordinateForm:{
          coordinateClose:false,
          model:'Georeferencing',
         coordinateTransformation:'84坐标系',  
        },
        coordinateTableData:[
             {
                name:'11',
                longitude:'111',
                inIp:'01',
                latitude:''
            },{
                name:'22',
                longitude:'222',
                inIp:'02',
                latitude:''
            },{
                name:'33',
                longitude:'333',
                inIp:'03',
                latitude:''
            },
        ],
        //车道识别配置
        laneform: {
            laneClose:false,
            areaDetector:false,
            sectionDetector:false,
        },
        //识别区域
        identificationAreaform: {
            identificationAreaClose:false
        },
        //轨迹平滑
        trajectorySmoothingform: {
            trajectorySmoothingClose:false,
            time:''
        },
        // 车牌识别
        licensePlateform: {
            licensePlateClose:false,
        },
        licensePlateTableData:[
             {
                thresholdValue:'11',
                sectionPlate:'111',
                inIp:'01',
                setAssociation:''
            },{
                thresholdValue:'22',
                sectionPlate:'222',
                inIp:'02',
                setAssociation:''
            },{
                thresholdValue:'33',
                sectionPlate:'333',
                inIp:'03',
                setAssociation:''
            },
        ],
        //停车状态
        stopStateform: {
            displacement:'2000',
            speed:'2000',
            acceleration:'2000',
        },
        //通信设置
        communicationform: {
            type:'快速-用于高带宽连接',
            renewalFrequency:''
        },
            form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        tableData: [
            {
                name:'11',
                inPort:'111',
                inIp:'01'
            },{
                name:'22',
                inPort:'222',
                inIp:'02'
            },{
                name:'33',
                inPort:'333',
                inIp:'03'
            },
        ],
     		internalIpList: [],
            fileList: []
        };
    },
      created() {
//    this.getDataByMqtt()
//  this.testMqtt()
//  var iframe = document.getElementById("mapModule");
    // iframe.onload = function () {
    //     setTimeout(() => {
    //         this.testMqtt()
    //     }, 5000);
    // };
//     iframe.onload = () => {
// setTimeout(() => {
//             this.load()
//         }, 5000);// 这样每次都会触发
// }

  },
    methods: {
        
       load(){
       console.log("1111")
        var iframe = document.getElementById("mapModuleTop");
        console.log("iframe",iframe)
        iframe.onload = () => {
            // setTimeout(() => {
            this.testMqtt()
        // }, 5000);
       }
       },
         testMqtt() {
             console.log("222")
      this.getDataByMqtt()

    },
    handleChange(){},
        handleagain() {
            this.$confirm('此操作将重新启动系统, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    // this.$message({
                    //   type: 'success',
                    //   message: '删除成功!'
                    // });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
        },
        handleReset() {
            this.$confirm('此操作将重置默认值, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    // this.$message({
                    //   type: 'success',
                    //   message: '删除成功!'
                    // });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 获取列表
		getReverseShellList() {
	    //   getShellList().then(res => {
	    //     if (res.code === 200) {
	    //       if (res.data && res.data.length > 0) {
	    //       	// 获取到的数据加上 isEdit是false， 默认是文本
	    //         res.data.forEach(item => {
	    //           item['isEdit'] = false
	    //         })
	    //       }
	        //   this.tableData = res.data
	          // 在表格列表前插入一行，用来新增数据
	          this.tableData.unshift({
	            name: '',
	            inIp: '',
	            inPort: null,
	            outPort: null,
	            enabled: null,
	            isEdit: true
	          })
	    //     }
	    //   })
	    },
	    // 新增按钮
	    handleAdd(row) {
	      for (let key in row) {
	      	// 判断一行字段是否输入完整
	        if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
	          this.msgError('Please complete the information')
	          return
	        }
	      }
	      const params = {
	        name: row.name,
	        inIp: row.inIp,
	        // inPort: parseInt(row.inPort),
	        // outPort: parseInt(row.outPort),
	        // enabled: row.enabled
	      }
          this.getReverseShellList()
	    //   addShell(params).then(res => {
	    //     if (res.code === 200) {
	    //       this.msgSuccess('Add reverse shell successfully')
	    //       row.isEdit = false
	    //       this.getReverseShellList()
	    //     }
	    //   })
	    },
	    // 编辑或者Apply按钮
	    handleUpdate(row) {
	      // 点击Apply时
	      if (row.isEdit) {
	        for (let key in row) {
	          if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
	            this.msgError('Please complete the information')
	            return
	          }
	        }
	        const params = {
	          name: row.name,
	          inIp: row.inIp,
	          inPort: parseInt(row.inPort),
	          outPort: parseInt(row.outPort),
	          enabled: row.enabled
	        }
	        // updateShell(params).then(res => {
	        //   if (res.code === 200) {
	        //     this.msgSuccess('Update reverse shell successfully')
	        //     this.getReverseShellList()
	        //   }
	        // })
	      } else {
	      	// 点击编辑时
	        row.isEdit = true
	      }
	    },
	    // 删除或取消按钮
	    handleDelete(row) {
	      // 点击取消时
	      if (row.isEdit) {
	        this.getReverseShellList()
	      } else {
	      	// 点击删除时
	        this.$confirm('Are you sure to delete reverse shell?', 'warning', {
	          confirmButtonText: 'Sure',
	          cancelButtonText: 'Cancel',
	          type: 'warning'
	        }).then(() => {
	        //   deleteShell(row.name).then(res => {
	        //     if (res.code === 200) {
	        //       this.msgSuccess('Delete reverse shell successfully')
	        //       this.getReverseShellList()
	        //     }
	        //   })
	        }).catch(() => {
	        })
	      }
	    },
          // mqtt订阅（独立）
    getDataByMqtt(url, topic, cIdNum) {
    //     var that = this
    // that.$refs.iframe.contentWindow.getDestination(1)
    // console.log("1111",document.getElementById("mapModule"))
    //  document.getElementById("mapModule").contentWindow.getDestination(1)
      const clientId = "test_id_" + String(new Date().getTime()); // 用户名
      //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
      const host = 'ws://172.16.1.168:10087/';

      const options = {
        // 配置
        // 测试：订阅本机IP
        // host: host,
        // port: port,
        // host:"172.16.1.168:10086",
        keepalive: 60, // 心跳时间，默认60s，设置为0禁用
        username: 'admin',  // 用户名（可选）
        password: '123456',  // 密码（可选）
        clientId: clientId, // 客户端ID，默认随机生成
        protocolId: "MQTT",
        protocolVersion: 4,
        clean: true, // false在离线时接收QoS1和2的消息
        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
        will: {
          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
          topic: "img1", // 要发布的主题
          payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
          qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
          retain: false, // 保留标志
        },
      };
      if (this.mqttClient == undefined) {
        this.mqttClient = mqtt.connect(host, options); // 连接
        // const client = mqtt.connect(host, options); // 连接
        // const client = mqtt.connect(host)  // 连接
        // 错误回调
        // console.log("this.mqttClient", this.mqttClient)
        this.mqttClient.on("error", (err) => {
          console.log("[MQTT-TEST] 连接错误：", err);
          this.mqttClient.end();
        });
        // 重连回调
        this.mqttClient.on("reconnect", (reconnect) => {
        //   console.log("[MQTT-TEST] 重连中……", reconnect);
        });
        // 连接回调
        this.mqttClient.on("connect", (connect) => {
        //   console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
          // 订阅
          this.mqttClient.subscribe('img0', { qos: 0 });
          this.mqttClient.subscribe('img1', { qos: 0 });
          this.mqttClient.subscribe('img2', { qos: 0 });
          this.mqttClient.subscribe('img3', { qos: 0 });
          this.mqttClient.subscribe('img4', { qos: 0 });
          this.mqttClient.subscribe('img5', { qos: 0 });
          this.mqttClient.subscribe('stream0', { qos: 0 });
          this.mqttClient.subscribe('stream1', { qos: 0 });
          this.mqttClient.subscribe('stream2', { qos: 0 });
          this.mqttClient.subscribe('stream3', { qos: 0 });
          this.mqttClient.subscribe('stream4', { qos: 0 });
          this.mqttClient.subscribe('stream5', { qos: 0 });

        });
        // 接收回调
        this.mqttClient.on("message", (topic, message, packet) => {
            
          if (topic.indexOf("img0") != -1) {
            // try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            //   debugger
            //   console.log("msg", msg)   //msg为转换后的JSON数据
            //   console.log("msg.pic", msg.pic) 
            //   debugger
            // var that = this
         
            //    document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
                // window.parent.getDestination(JSON.stringify(msg));
            //    debugger
                // unity.SendMessage('AAA', 'SendImage', JSON.stringify(msg));
            //   this.imgUrl = 'data:image/png;base64,' + msg.pic;
            //   console.log("imageUrl", imageUrl)
           
            // } 
            // catch {
            //   let imageType = 'arraybuffer';
            //   const blob = new Blob([message], { type: imageType })
            //   const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
            // //   console.log("imageUrl", imageUrl)
            // }
          } else if (topic.indexOf("img1") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
              this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
              console.log("imageUrl", imageUrl)
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img2") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
              this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
              console.log("imageUrl", imageUrl)
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img3") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
              this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
              console.log("imageUrl", imageUrl)
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img4") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
              this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
              console.log("imageUrl", imageUrl)
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img5") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
              this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
              console.log("imageUrl", imageUrl)
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("stream0") != -1) {
            // console.log(
            //   `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
            //   new Date(),
            //   new Date().getMilliseconds()
            // );
          } else if (topic.indexOf("stream0") != -1) {
            // console.log(
            //   `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
            //   new Date(),
            //   new Date().getMilliseconds()
            // );
          } else if (topic.indexOf("stream1") != -1) {
            console.log(
              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
              new Date(),
              new Date().getMilliseconds()
            );
          } else if (topic.indexOf("stream2") != -1) {
            console.log(
              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
              new Date(),
              new Date().getMilliseconds()
            );
          } else if (topic.indexOf("stream3") != -1) {
            console.log(
              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
              new Date(),
              new Date().getMilliseconds()
            );
          } else if (topic.indexOf("stream4") != -1) {
            console.log(
              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
              new Date(),
              new Date().getMilliseconds()
            );
          } else if (topic.indexOf("stream5") != -1) {
            console.log(
              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
              new Date(),
              new Date().getMilliseconds()
            );
          }

        });
      }


    },

    }
};
</script>
  
<style lang="scss" scoped>
//   /deep/ .el-form-item__content {
//     display: flex;
//     flex-flow: row nowrap;
//     align-items: center;
// }
// /deep/ .el-form-item__label {
//     text-align: left;
//     font-size: 16px;
// }
.dataBoard {
  display: flex;
  justify-content: space-between;
}
.top .section {
//   width: 80%;
//   border: 1px solid gray;
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 1%;
}
.dataBoard .region,
.dataBoard .section {
  width: 80%;
//   border: 1px solid gray;
  border: 1px solid #E4E7ED;
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 3%;
}

.dataBoard .board-title {
  font-size: 17px;
  font-weight: bolder;
  position: relative;
  margin-bottom: 30px;
}
.container {
    width: 100%;
    height: 100%;
    p {
        width: 95%;
        font-size: 25px;
        text-align: left;
        border-bottom: 1px solid black;
        margin-bottom: 20px;
    }
}
</style>
  