提交

ruoyi-ui/src/api/manage/parameterSet.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询参数设置列表
+export function listParameterSet(query) {
+  return request({
+    url: '/manage/parameterSet/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询参数设置详细
+export function getParameterSet(parameterId) {
+  return request({
+    url: '/manage/parameterSet/' + parameterId,
+    method: 'get'
+  })
+}
+
+// 新增参数设置
+export function addParameterSet(data) {
+  return request({
+    url: '/manage/parameterSet',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改参数设置
+export function updateParameterSet(data) {
+  return request({
+    url: '/manage/parameterSet/put',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除参数设置
+export function delParameterSet(parameterId) {
+  return request({
+    url: '/manage/parameterSet/delete/' + parameterId,
+    method: 'get'
+  })
+}

ruoyi-ui/src/views/index.vue

@@ -34,7 +34,7 @@
                                                                  src="../assets/images/pic_gjpt_hp_sfgx.png"
                                                                />
                        <div class="text-wrapper_2 flex-col justify-between" style="width: 84px;">
-                         <span class="text_6">越线告警</span>
+                         <span class="text_6">摸鱼告警</span>
                          <span class="text_7">08</span>
                          <div style="display: flex; margin-top:20px;">
                                                    <span class="text_14">较上月</span>
@@ -48,7 +48,7 @@
 
                        </div>
                        <div class="text-wrapper_3 flex-col justify-between" style="width: 84px;">
-                         <span class="text_8">徘徊告警</span>
+                         <span class="text_8">离岗告警</span>
                          <span class="text_9">06</span>
                           <div style="display: flex; margin-top:20px;">
                                                     <span class="text_14">较上月</span>
@@ -498,7 +498,7 @@
                   </div>
             <!-- 内容 -->
                 <div>
-                  <div v-for="(item,index) in 2" :key="index" class="box_14 flex-row" style="justify-content: space-between;padding: 0 20px;">
+                  <div v-for="(item,index) in 2" :key="index" class="box_14 flex-row" style="justify-content: space-between;padding: 0 20px;" v-if="shoue == false">
                                 <div class="text-wrapper_17 flex-col justify-between">
                                   <span class="text_94">25/04/23&nbsp;&nbsp;10:31:46</span>
                                   <span class="text_95">通道001</span>
@@ -512,6 +512,20 @@
                                 />
                               </div></div>
                                 </div>
+                    <div v-for="(item,index) in 3" :key="index" class="box_14 flex-row" style="justify-content: space-between;padding: 0 20px;" v-if="shoue == true">
+                                  <div class="text-wrapper_17 flex-col justify-between">
+                                    <span class="text_94">25/04/23&nbsp;&nbsp;10:31:46</span>
+                                    <span class="text_95">通道001</span>
+                                  </div>
+                                  <div class="text-wrapper_18 ">
+                                    <div class="text_96">越线告警</div>
+                                    <div><img
+                                    class="thumbnail_27"
+                                    referrerpolicy="no-referrer"
+                                    src="../assets/images/icon_hthp_rl_enter.png"
+                                  />
+                                </div></div>
+                                  </div>
 
                 </div>
           </div>
@@ -832,7 +846,7 @@
                     weekAll: [
                       '星期一','星期二','星期三','星期四','星期五','星期六','星期日',
                     ],
-        shoue:false
+        shoue:true
       };
     },
     created() {

ruoyi-ui/src/views/shipinggaoj/channelNumber/index.vue

@@ -108,6 +108,14 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['manage:channelNumber:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+                       type="text"
+                       style="width: 72px;height: 26px;background: #FFF1EA;
+                              border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
+            @click="canshu(scope.row)"
+            v-hasPermi="['manage:channelNumber:remove']"
+          >参数配置</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -168,18 +176,28 @@
               <el-input v-model="form.password" placeholder="请输入密码" />
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="预览端口" prop="port">
+              <el-input v-model="form.port"  placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark"  placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+
           <el-col :span="12">
             <el-form-item label="通道描述" prop="channelDetails">
               <el-input v-model="form.channelDetails" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-col>
+
         </el-row>
        <!-- <el-form-item label="删除标志" prop="delFlag">
           <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
         </el-form-item> -->
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button style="background-color:#03BF8A ; border-color: #03BF8A;" type="primary" @click="submitForm">确 定</el-button>
@@ -293,7 +311,8 @@ export default {
         updateBy: null,
         updateTime: null,
         remark: null,
-        equipmentId:null
+        equipmentId:null,
+        port:'80'
       }
       this.resetForm("form")
     },
@@ -376,6 +395,14 @@ export default {
       this.form.equipmentNum = row.equipmentNum
       this.form.equipmentName = row.equipmentName
     },
+    canshu(row){
+      this.$router.push({
+        path: '/huabuhaik',
+        query: {
+        	'id':row.channelId,
+        }
+      })
+    },
     // 获取屏幕高度
         showFilterForm () {
               this.filterActive = !this.filterActive

ruoyi-ui/src/views/shipinggaoj/ditu/index.vue

@@ -15,6 +15,7 @@
          <el-col :span="20" class="shish">
            <el-form-item label="省市区" prop="staffName">
                       <area-select
+                      @change="chesef"
                           style="display: flex"
                           type="all"
                           v-model="areaList"
@@ -26,18 +27,18 @@
          </el-col>
          <el-col :span="16">
            <el-form-item label="详细地址" prop="staffName">
-                     <el-input v-model="form.staffName" placeholder="请输入人员姓名" />
+                     <el-input @focus="huoaq" id="tipinput" v-model="form.staffName" placeholder="请输入详细地址" />
           </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-col :span="24" >
              <el-form-item label="经纬度" prop="staffName" >
                   <div style="display: flex; " class="jisnge">
-                    <el-input style="width: 160px; margin-right: 10px;" v-model="form.staffName" placeholder="请输入人员姓名" />
-                    <el-input style="width: 160px;" v-model="form.staffName" placeholder="请输入人员姓名" />
+                    <el-input style="width: 160px; margin-right: 10px;" v-model="form.kqLongitude" placeholder="请输入经度" />
+                    <el-input style="width: 160px;" v-model="form.kqLatitude" placeholder="请输入纬度" />
                     <div style="display: flex; align-items: center;" class="giet">
                       <span style="font-size: 14px;color: #606266; width: 100px; margin-left: 10px;font-weight: 700;">半径范围</span>
-                      <el-input v-model="form.staffName" placeholder="请输入人员姓名" />
+                      <el-input @blur="fanhseg" v-model="form.fanwei" placeholder="请输入范围" />
                       <span style=" margin-left: 10px; font-weight: 800;font-size: 13px;color: #3D455B;">米</span>
                     </div>
                   </div>
@@ -49,7 +50,18 @@
                   <image-uploadrss :limit="1" v-model="form.staffImage"/>
            </el-form-item>
          </el-col>
+         <el-col :span="16" v-show="!isgse">
+           <el-form-item label="地图标点" prop="staffName">
+                <div style="width: 100%;height: 360px;">
+                 <div  id="gaode_Map" style="width:100%;height: 100%;">
+                  </div>
+                </div>
+           </el-form-item>
+
+         </el-col>
        </el-row>
+
+
         </el-form>
      </div>
 	</div>
@@ -57,8 +69,13 @@
 
   </div>
 </template>
-
 <script>
+
+  //引入缺德地图
+  import AMapLoader from '@amap/amap-jsapi-loader'
+  window._AMapSecurityConfig = {
+      securityJsCode: 'b06df55c66884ce2c9a3f3281c2c5ca9'  //填写你的安全密钥
+  }
   import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
 import 'vue-area-linkage/dist/index.css'
 import { pca, pcaa } from 'area-data'
@@ -66,10 +83,9 @@ import Bscroll from "better-scroll";
 export default {
   name: "Post",
   dicts: ['sys_normal_disable','sys_yes_no','youke','tjzh','youkes','lafafen','fange','jluly'],
-  // components: {
-  //     vueQr,
-	 //  videoPlayer
-  //   },
+  components: {
+
+    },
   data() {
     return {
       // 遮罩层
@@ -78,12 +94,43 @@ export default {
 	  bg:null,
     titles:'',
       // 表单参数
-      form: {},
+      form: {
+        staffName:null,
+        kqLongitude:null,
+        kqLatitude:null,
+        fanwei:null
+      },
       rules:{},
+      areaList:[],
       pca: pca,
       		pcaa: pcaa,
           searchData:[],
-    isgse:0
+    isgse:0,
+    linkage:true,
+    visible: false,
+          isDetail: false,
+          dataForm: {
+            kqName: undefined,
+            kqLocation: undefined,
+            kqLongitude: undefined,
+            kqLatitude: undefined,
+            kqWorkUnit: undefined,
+            cronkqAccredit: [],
+            kqValidCardRange: undefined,
+          },
+          input: "",
+          map: null,
+          auto: null,
+          placeSearch: null,
+          lnglat: [],
+          markers: [],
+          position: {},
+          polyEditor :null,
+          polygonPaths :[],
+          polygonList :[],
+          inspectionRouteList :[],
+          initFormData :{},
+          cndhe:[]
 
      }
   },
@@ -91,7 +138,8 @@ export default {
 
   },
   mounted() {
-
+    let sngse = [117.211954, 31.839676]
+   this.initMap(sngse)
   },
    beforeDestroy() {
 
@@ -101,6 +149,35 @@ export default {
     isqie(row){
       this.isgse = row
     },
+    huoaq(){
+     console.log(4,this.areaList)
+     if(this.areaList.length !=0){
+       // this.areaList
+       //   for(let key in people ){
+       //       console.log(key+':'+people[key]);
+       //   }
+     }else{
+       this.$message.error('请先选择省市区');
+       return
+     }
+    },
+    chesef(){
+     console.log(4,this.areaList)
+     if(this.areaList.length !=0){
+       let sngse = ''
+       this.areaList.filter(rou=>{
+         for(let key in rou ){
+             if(key != ''){
+                sngse = sngse + rou[key]
+               console.log(key+':'+rou[key]);
+               this.form.staffName = sngse
+             }
+         }
+       })
+     }else{
+
+     }
+    },
 
     /** 提交按钮 */
     submitForm: function() {
@@ -109,6 +186,7 @@ export default {
                 // if (this.form.reservatId != null) {
                   updateReservat(this.form).then(response => {
                     this.$modal.msgSuccess("操作成功");
+
                     this.open = false;
                     this.getList();
                   });
@@ -122,6 +200,156 @@ export default {
               }
             });
     },
+    initMap(row) {
+    		AMapLoader.reset()
+          AMapLoader.load({
+            key: "fba818d626f91cf5a13cd61943a7667e",             // 申请好的Web端开发者Key，首次调用 load 时必填
+            version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+            plugins: ['AMap.AutoComplete', 'AMap.Marker', 'AMap.PlaceSearch', 'AMap.Geolocation',"AMap.Driving","AMap.Walking","AMap.Geocoder","AMap.Scale"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+          }).then((AMap) => {
+            console.log(AMap)
+            this.map = new AMap.Map("gaode_Map", {  //设置地图容器id
+              // mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
+              viewMode: "3D",    //是否为3D地图模式
+              zoom: 18,           //初始化地图级别
+              center: row, //初始化地图中心点位置
+              // center: [116.310791, 40.003419], //初始化地图中心点位置
+              pitch: 40, // 地图俯仰角度，有效范围 0 度- 83 度
+              terrain: true, // 开启地形图
+              buildingAnimation: true,//楼块出现是否带动画
+              zoomToAccuracy: true,
+
+            });
+    		// this.getCenter()
+           // this.setMarker(centerLen)
+                     // 关键字查询
+                     this.searchMap();
+                     // 监听鼠标点击事件
+                     this.map.on("click", this.clickMapHandler);
+          }).catch(e => {
+            console.log(e);
+          })
+    },
+    // 关键字查询
+        searchMap () {
+          // 搜索框自动完成类
+          this.auto = new AMap.AutoComplete({
+            input: "tipinput", // 使用联想输入的input的id
+          });
+          //构造地点查询类
+          this.placeSearch = new AMap.PlaceSearch({
+            map: this.map,
+          });
+          // 当选中某条搜索记录时触发
+          this.auto.on("select", this.selectSite);
+        },
+        //选中查询出的记录
+        selectSite (e) {
+          console.log(e)
+          this.circles = []
+          if (e.poi.location) {
+            this.lnglat = [e.poi.location.lng, e.poi.location.lat];
+            this.placeSearch.setCity(e.poi.adcode);
+            this.placeSearch.search(e.poi.name); //关键字查询
+            let geocoder = new AMap.Geocoder({});
+            let that = this;
+            geocoder.getAddress(this.lnglat, function (status, result) {
+              if (status === "complete" && result.regeocode) {
+                that.province = result.regeocode.addressComponent.province;
+                that.city = result.regeocode.addressComponent.city;
+                //自己想要赋的值，根据自己的做修改
+                that.$set(that.form, "province", that.province);
+                that.$set(that.form, "city", that.city);
+                that.$set(that.form, "address", e.poi.name);
+                that.$set(
+                  that.form,
+                  "coordinate",
+                  e.poi.location.lng + "," + e.poi.location.lat
+                );
+                that.form.kqLongitude = e.poi.location.lng
+                that.form.kqLatitude = e.poi.location.lat
+                 console.log(that.form,5)//纬度，经度
+                 let sge=[e.poi.location.lng,e.poi.location.lat]
+                 let sngse={'center':sge}
+                 that.circles.push(sngse)
+                 that.cndhe = sge
+                 that.initMap(sge)
+              } else {
+              }
+            });
+          } else {
+            this.$message.error("查询地址失败，请重新输入地址");
+          }
+        },
+        // 点击地图事件获取经纬度，并添加标记
+        clickMapHandler (e) {
+          this.dataForm.kqLongitude = e.lnglat.getLng();
+          this.dataForm.kqLatitude = e.lnglat.getLat();
+          this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
+          this.setMarker(this.lnglat);
+          // 点击地图上的位置，根据经纬度转换成详细地址
+          let geocoder = new AMap.Geocoder({});
+          let that = this;
+          geocoder.getAddress(this.lnglat, function (status, result) {
+            if (status === "complete" && result.regeocode) {
+              that.dataForm.kqLocation = result.regeocode.formattedAddress;
+            } else {
+            }
+          });
+          this.position = {
+            longitude: e.lnglat.getLng(),
+            latitude: e.lnglat.getLat(),
+            address: that.address,
+          };
+
+          this.input = that.address; //把查询到的地址赋值到输入框
+        },
+
+   //  添加标记
+       setMarker (lnglat) {
+         this.removeMarker();
+         let marker = new AMap.Marker({
+           position: lnglat,
+         });
+         console.log(lnglat,8)
+         marker.setMap(this.map);
+         this.markers.push(marker);
+         this.cndhe = lnglat
+         // this.addCircle()
+       },
+       // 删除之前后的标记点
+       removeMarker () {
+         if (this.markers) {
+           this.map.remove(this.markers);
+         }
+       },
+       fanhseg(){
+          this.addCircle()
+       },
+       addCircle() {
+             this.circleList = [];
+             console.log(this.circles)
+             // for (let i = 0; i < this.circles.length; i += 1) {
+               // let center = this.circles[i].center;
+               let circle = new AMap.Circle({
+                 center: this.cndhe,
+                 radius: this.form.fanwei, // 半径
+                 strokeColor: "#F33", // 线颜色
+                 // strokeColor: this.rgb(),  // 线颜色
+                 zIndex: 101,
+                 strokeOpacity: 1, //线透明度
+                 strokeWeight: 3, //线粗细度
+                 bubble: true, // 是否将覆盖物的鼠标或touch等事件冒泡到地图上
+                 fillColor: "#7c7cfb", //填充颜色
+                 fillOpacity: 0.35 //填充透明度
+               });
+               circle.setMap(this.map);
+               this.circleList.push(circle);
+               this.map.setFitView([circle]);
+                     // var circleEditor = new AMap.CircleEditor(this.map, circle);
+             // }
+           },
+
 
   }
 };
@@ -312,4 +540,38 @@ export default {
 	   font-weight: bold;
 	   font-size: 16px;
    }
+  .search_box {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 50px;
+
+    .label {
+      color: #000;
+      width: 100px;
+    }
+  }
+
+  .content {
+    position: relative;
+  }
+
+  #panel {
+    position: absolute;
+    top: 50px;
+    right: 20px;
+  }
+
+  #gaode_Map {
+    overflow: hidden;
+    width: 100%;
+    height: 540px;
+    margin: 0;
+  }
+
+  .amap-sug-result {
+    z-index: 2999 !important;
+  }
+
+
 </style>

ruoyi-ui/src/views/shipinggaoj/gaojingguanli/index.vue

@@ -9,13 +9,12 @@
         <div style="padding-bottom: 0;margin-bottom: 20px;">
           <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
             <el-row>
-
               <el-col :span="24">
                 <el-col :span="8">
-                  <el-form-item label="告警类别" prop="warnType">
-                          <el-select v-model="queryParams.warnType" placeholder="请选择告警类别" clearable>
+                  <el-form-item label="告警类别" prop="algorithmType">
+                          <el-select v-model="queryParams.algorithmType" placeholder="请选择告警类别" clearable>
                             <el-option
-                              v-for="dict in dict.type.gaojing_type"
+                              v-for="dict in dict.type.gaojing_typeshuju"
                               :key="dict.value"
                               :label="dict.label"
                               :value="dict.value"
@@ -36,10 +35,10 @@
                        </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                 <el-form-item label="通道ID" prop="channelId">
+                 <el-form-item label="视频通道" prop="channelNum">
                          <el-input
-                           v-model="queryParams.channelId"
-                           placeholder="请输入通道ID"
+                           v-model="queryParams.channelNum"
+                           placeholder="请输入视频通道"
                            clearable
                            @keyup.enter.native="handleQuery"
                          />
@@ -71,7 +70,6 @@
 
 
       <div class="casr">
-
               <el-row :gutter="10" class="mb8">
                 <el-col :span="1.5">
                   <el-button
@@ -143,9 +141,17 @@
                       </div>
 
                       <div class="goe">
+                        <div style="display: flex;align-items: center;margin-top: 8px;">
+                          <p>设备名称：</p>
+                          <p>{{item.equipmentName == null?'暂无数据' : item.equipmentName}}</p>
+                        </div>
+                        <div style="display: flex;align-items: center;margin-top: 8px;">
+                          <p>算法参数：</p>
+                          <p>{{item.parameterSet == null?'暂无数据' : item.parameterSet}}</p>
+                        </div>
                         <div style="display: flex;align-items: center;margin-top: 8px;">
                           <p>视频通道：</p>
-                          <p>{{item.channelId == null?'暂无数据' : item.channelId}}</p>
+                          <p>{{item.channelNum == null?'暂无数据' : item.channelNum}}</p>
                         </div>
                         <div style="display: flex;align-items: center;margin-top: 8px;">
                           <p>告警日期：</p>
@@ -161,10 +167,8 @@
                         </div>
                         <div style="display: flex;align-items: center;margin-top: 8px;">
                           <p>告警内容：</p>
-                          <div><dict-tag :options="dict.type.gaojing_type" :value="item.warnType"/></div>
+                          <div><dict-tag :options="dict.type.gaojing_typeshuju" :value="item.algorithmType"/></div>
                         </div>
-
-
                       </div>
                       <!-- <img v-if="item.isnum == true" src="../../../assets/images/icon_htgl_kp_gx.png" alt="" style="width: 35px;height: 35px;position: absolute;bottom: 0;right: 0;"> -->
                     </div>
@@ -193,9 +197,9 @@
         <el-row>
           <el-col :span="12">
            <el-form-item label="告警类别" prop="warnType">
-                     <el-select style="width: 100%;" v-model="form.warnType" placeholder="请选择告警类别">
+                     <el-select style="width: 100%;" v-model="form.algorithmType" placeholder="请选择告警类别">
                        <el-option
-                         v-for="dict in dict.type.gaojing_type"
+                         v-for="dict in dict.type.gaojing_typeshuju"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
@@ -290,7 +294,7 @@ import { MqttClient } from 'mqtt'
  const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
 export default {
   name: "WarnManage",
-  dicts: ['gaojing_type', 'source_type','alarm_task','shagnt'],
+  dicts: ['gaojing_typeshuju', 'source_type','alarm_task','shagnt'],
   data() {
     return {
       mqttThemeName:{
@@ -690,7 +694,7 @@ export default {
       this.$router.push({
         path: '/shebe',
         query: {
-        	'id':item.channelId,
+        	'id':item.warnId,
         }
       })
     }

ruoyi-ui/src/views/shipinggaoj/gaojingguanlifnag/index.vue

@@ -0,0 +1,807 @@
+<template>
+  <div class="app-container">
+    <div style="">
+      <div style="background-color: #fff;padding: 20px;border-radius: 10px; padding-bottom: 0;">
+        <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;margin-left: -20px;">
+          <!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
+         <span style="margin-left: 10px;">搜索条件</span>
+        </p>
+        <div style="padding-bottom: 0;margin-bottom: 20px;">
+          <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
+            <el-row>
+
+              <el-col :span="24">
+                <el-col :span="8">
+                  <el-form-item label="告警类别" prop="warnType">
+                          <el-select v-model="queryParams.warnType" placeholder="请选择告警类别" clearable>
+                            <el-option
+                              v-for="dict in dict.type.gaojing_type"
+                              :key="dict.value"
+                              :label="dict.label"
+                              :value="dict.value"
+                            />
+                          </el-select>
+                        </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                 <el-form-item label="上报状态" prop="reportStatus">
+                         <el-select v-model="queryParams.reportStatus" placeholder="请选择上报状态" clearable>
+                           <el-option
+                             v-for="dict in dict.type.shagnt"
+                             :key="dict.value"
+                             :label="dict.label"
+                             :value="dict.value"
+                           />
+                         </el-select>
+                       </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                 <el-form-item label="通道ID" prop="channelId">
+                         <el-input
+                           v-model="queryParams.channelId"
+                           placeholder="请输入通道ID"
+                           clearable
+                           @keyup.enter.native="handleQuery"
+                         />
+                       </el-form-item>
+                </el-col>
+
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="告警时间" prop="warnTime" style="width: 90%;">
+                        <el-date-picker style="width: 100%;" clearable
+                          v-model="queryParams.warnTime"
+                          type="date"
+                          value-format="yyyy-MM-dd"
+                          placeholder="请选择告警时间">
+                        </el-date-picker>
+                      </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item class="butt" style="border: 0;">
+                  <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary" size="mini"  @click="handleQuery">查询 </el-button>
+                  <el-button size="mini"  @click="resetQuery">重置</el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+          </el-form>
+        </div>
+      </div>
+
+
+      <div class="casr">
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5">
+                  <el-button
+                    type="success"
+                    plain
+                    size="mini"
+                    @click="handleAdd"
+                    v-hasPermi="['manage:warnManage:add']"
+                  >添加</el-button>
+                </el-col>
+                <!-- <el-col :span="1.5">
+                  <el-button
+                    type="success"
+                    plain
+                    size="mini"
+                    :disabled="singleg"
+                    @click="handleUpdateg"
+                    v-hasPermi="['manage:warnManage:edits']"
+                  >修改</el-button>
+                </el-col> -->
+                <el-col :span="1.5">
+                  <el-button
+                    type="danger"
+                    plain
+                    size="mini"
+                    @click="handleDeleteg"
+                    v-hasPermi="['manage:warnManage:remove']"
+                  >删除</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button
+                    type="warning"
+                    plain
+                    size="mini"
+                    @click="handleExport"
+                    v-hasPermi="['manage:warnManage:export']"
+                  >导出</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+              </el-row>
+              <div class=" infinite-list" :style="dynamicStyle">
+                <el-row :gutter="10" v-if="warnManageList.length !=0" style="width: 100%;margin-left: 0;">
+                  <el-col :span="6" v-for="(item,index) in warnManageList" :key="index" style="cursor: pointer;">
+                    <div v-if="isshoe"  @click="isac(item)"  :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 10px;margin-bottom: 10px;height: 370px;">
+                      <div class="quning">
+                        <div class="shipige">
+                          <div style="display: flex;align-items: center;">
+                            <img src="../../../assets/images/icon_gjgl_gx_normal.png" alt="" v-if="item.isnum == false">
+                            <img src="../../../assets/images/icon_gjgl_gx_selected.png" alt="" v-if="item.isnum == true">
+                            <p style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">告警任务{{index + 1}}</p>
+                          </div>
+                          <p style="font-size: 14px; color: #aaa;font-weight: 500;" @click="tiahzo(item)">详情→</p>
+                        </div>
+                        <image-preview :src="item.warnImage" :width="100 +'%'" :height="150"  style=""/>
+                       <!-- <video
+                                 :id="'myVideo' + (index+1)"
+                                 data-setup="{}"
+                                 loop="loop"
+                                 :autoplay="false"
+                                 muted
+                                 controls
+                                 @play="videoPlay(item)"
+                                 poster=""
+                                 style="width: 100%;height: 150px;"
+                               >
+                               <!-- + baseUrl -->
+                                 <!-- <source  :src="defaultSettings.urls+ item.videoUrl " />
+                               </video> -->
+                      </div>
+
+                      <div class="goe">
+                        <div style="display: flex;align-items: center;margin-top: 8px;">
+                          <p>设备名称：</p>
+                          <p>{{item.equipmentName == null?'暂无数据' : item.equipmentName}}</p>
+                        </div>
+                        <div style="display: flex;align-items: center;margin-top: 8px;">
+                          <p>视频通道：</p>
+                          <p>{{item.channelNum == null?'暂无数据' : item.channelNum}}</p>
+                        </div>
+                        <div style="display: flex;align-items: center;margin-top: 8px;">
+                          <p>告警日期：</p>
+                          <p>{{item.warnTime == null?'暂无数据' : item.warnTime}}</p>
+                        </div>
+                        <div style="display: flex;align-items: center;margin-top: 8px;">
+                          <p>上报地址：</p>
+                          <p>{{item.reportAddress == null?'暂无数据' : item.reportAddress}}</p>
+                        </div>
+                        <div style="display: flex;align-items: center;margin-top: 8px;">
+                          <p>上报状态：</p>
+                          <div><dict-tag :options="dict.type.shagnt" :value="item.reportStatus"/></div>
+                        </div>
+                        <div style="display: flex;align-items: center;margin-top: 8px;">
+                          <p>告警内容：</p>
+                          <div><dict-tag :options="dict.type.gaojing_type" :value="item.warnType"/></div>
+                        </div>
+                      </div>
+                      <!-- <img v-if="item.isnum == true" src="../../../assets/images/icon_htgl_kp_gx.png" alt="" style="width: 35px;height: 35px;position: absolute;bottom: 0;right: 0;"> -->
+                    </div>
+                  </el-col>
+                </el-row>
+                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;" v-if="warnManageList.length ==0">
+                   <img   src="../../../assets/images/zwshjbig.png" alt="" style="">
+                </div>
+              </div>
+
+      </div>
+
+
+      <paginations
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+           <el-form-item label="告警类别" prop="warnType">
+                     <el-select style="width: 100%;" v-model="form.warnType" placeholder="请选择告警类别">
+                       <el-option
+                         v-for="dict in dict.type.gaojing_type"
+                         :key="dict.value"
+                         :label="dict.label"
+                         :value="dict.value"
+                       ></el-option>
+                     </el-select>
+                   </el-form-item>
+          </el-col>
+
+          <el-col :span="12" >
+           <el-form-item label="告警标识" prop="warnSign">
+                     <el-input v-model="form.warnSign" placeholder="请输入告警标识" />
+                   </el-form-item>
+          </el-col>
+
+          <el-col :span="12" >
+           <el-form-item label="通道Id" prop="channelId">
+                          <el-select style="width: 100%;" v-model="form.channelId" placeholder="请选择通道ID">
+                             <el-option
+                             v-for="dict in channelNumberList "
+                             :key="dict.channelId"
+                             :label="dict.channelNum"
+                             :value="dict.channelId"
+                             ></el-option>
+                           </el-select>
+                       </el-form-item>
+          </el-col>
+          <el-col :span="12" >
+            <el-form-item label="视频地址" prop="videoAddress">
+                      <el-input v-model="form.videoAddress" placeholder="请输入视频地址" />
+                    </el-form-item>
+          </el-col>
+          <el-col :span="12" >
+            <el-form-item label="上报地址" prop="reportAddress">
+                      <el-input v-model="form.reportAddress" placeholder="请输入上报地址" />
+                    </el-form-item>
+          </el-col>
+          <el-col :span="12" >
+           <el-form-item label="上报状态" prop="reportStatus">
+                     <el-select style="width: 100%;" v-model="form.reportStatus" placeholder="请选择上报状态">
+                       <el-option
+                         v-for="dict in dict.type.shagnt"
+                         :key="dict.value"
+                         :label="dict.label"
+                         :value="dict.value"
+                       ></el-option>
+                     </el-select>
+                   </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="告警时间" prop="warnTime">
+                      <el-date-picker style="width: 100%;" clearable
+                        v-model="form.warnTime"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="请选择告警时间">
+                      </el-date-picker>
+                    </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+                      <el-input v-model="form.remark"  placeholder="请输入内容" />
+                    </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="告警预览图片" prop="warnImage">
+                      <image-upload v-model="form.warnImage"/>
+                    </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer" v-if="isredw">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+
+
+  </div>
+</template>
+
+<script>
+  // import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"
+import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
+// import 'videojs-flash'
+import { listChannelNumber, getChannelNumber, delChannelNumber, addChannelNumber, updateChannelNumber } from "@/api/system/channelNumber"
+const defaultSettings = require("@/settings.js");
+import mqttHandle from "../../../utils/mqttHandler.js"
+import mqtt from 'mqtt';
+import { MqttClient } from 'mqtt'
+// 状态变量
+ const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
+export default {
+  name: "WarnManage",
+  dicts: ['gaojing_type', 'source_type','alarm_task','shagnt'],
+  data() {
+    return {
+      mqttThemeName:{
+      	url: 'ws://13.229.167.76:1884/mqtt',
+      	topic: 'test/topic'
+      },
+      // 遮罩层
+      loading: true,
+      defaultSettings:defaultSettings,
+      baseUrl: process.env.VUE_APP_BASE_API,
+      // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 告警管理表格数据
+            warnManageList: [],
+             channelNumberList:[],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+              pageNum: 1,
+              pageSize: 10,
+              warnType: null,
+              warnSign: null,
+              channelId: null,
+              videoAddress: null,
+              reportAddress: null,
+              reportStatus: null,
+              warnTime: null,
+              warnImage: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+              videoAddress: [
+                        { required: true, message: "不能为空", trigger: "blur" }
+                      ],
+              warnTime: [
+                        { required: true, message: "不能为空", trigger: "blur" }
+                      ],
+              warnImage: [
+                        { required: true, message: "不能为空", trigger: "blur" }
+                      ],
+            },
+      activeName:'1',
+      videoState: false, // 视频播放状态
+      poster:true,
+      controls:true,
+      videoData:{},
+       player: null,
+       isshoe:true,
+       isredw:true,
+       singleg:true,
+       manid:0,
+       getreadList:[],
+       startTime: 0,
+       yutim:true,
+       staffTrainTimeList:[],
+       tableMaxHeight:'200',
+       receiveNews: "",
+      };
+    },
+    computed: {
+      dynamicStyle() {
+        return {
+          overflowY:'auto',
+          height: this.tableMaxHeight+ 'px',
+           paddingTop:'10px'
+        }
+      }
+      },
+  created() {
+    this.startTime = Date.now()
+    this.getList();
+    this.getListt()
+  window.onresize = () => {
+  	      this.changeTableMaxHeight()
+  	    }
+  	    this.changeTableMaxHeight()
+
+
+  },
+  mounted() {
+    // this.createMqtt() // 建立mqtt通信
+  	window.onresize = () => {
+  	          this.changeTableMaxHeight()
+  	        }
+  	        this.changeTableMaxHeight()
+  },
+
+
+  beforeDestroy() {
+      if (this.player) {
+        this.player.dispose()
+      }
+      if (client) {
+        console.log(4)
+        client.end()
+      }
+      // this.disconnect()
+    },
+  methods: {
+       minToHm(min) {
+          let h = Math.floor(min / 60);
+          let m = min % 60;
+          let hDisplay = h ? `${h}小时` : '';
+          let mDisplay = m ? `${m}分钟` : '';
+          console.log(`${hDisplay}${mDisplay}`.trim())
+          return `${hDisplay}${mDisplay}`.trim();
+        },
+    /** 查询岗位列表 */
+    getList() {
+      this.loading = true;
+      this.isshoe = false
+
+      listWarnManage(this.queryParams).then(response => {
+        this.warnManageList   = response.rows;
+        this.warnManageList.filter(rou=>{
+          rou.isnum = false
+        })
+        this.isshoe = true
+
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 创mqtt最终版
+    mqttzz(){
+      // 创建一个连接到MQTT broker的客户端实例
+         // 连接成功后，订阅一个主题
+         client.on('connect', function () {
+           client.subscribe('test/topic', function (err) {
+             if (!err) {
+               console.log('成功订阅 test/topic 主题！')
+             }
+           })
+         })
+
+         // 监听订阅主题上的消息
+         client.on('message', function (topic, message) {
+           // 处理接收到的消息
+           console.log('收到主题 ' + topic + ' 的消息: ' + message.toString())
+         })
+    },
+    isac(val){
+      console.log(5,val)
+      val.isnum = !val.isnum
+      this.isshoe = false
+      this.isshoe = true
+      let nhde = []
+      let nsg = ''
+      this.warnManageList.filter(rou=>{
+        if(rou.isnum == true){
+          nhde.push(rou.manualId)
+        }
+      })
+      if(nhde.length == 1){
+        this.warnManageList.filter(rou=>{
+          if(rou.isnum == true){
+            console.log(rou.manualId)
+            this.manid = rou.manualId
+            console.log(this.manid)
+          }
+        })
+        this.singleg = false
+      }else{
+        // this.manid  = row.
+        this.singleg = true
+      }
+
+    },
+    /** 查询通道管理列表 */
+    getListt() {
+      this.loading = true
+      let snge={
+        pageNum: 1,
+        pageSize: 200,
+      }
+      listChannelNumber(snge).then(response => {
+        this.channelNumberList = response.rows
+        this.loading = false
+      })
+    },
+    getge(valy){
+        this.$nextTick(() => {
+             setTimeout(() => {
+        for(var i =0; i < valy.length;i++){
+          let du = document.getElementById("myVideo" + (i+1)) //获取组件下的video
+                 var hour = parseInt((du.duration) / 3600);
+                 var minute = parseInt((du.duration % 3600) / 60);
+                 var second = parseInt(du.duration % 60);
+                 let result = ''
+                 if (hour > 0) {
+                 result = this.formatTimeStr(hour) + ':' + this.formatTimeStr(minute) + ':' + this
+                 .formatTimeStr(second)
+                           } else {
+                              result = this.formatTimeStr(minute) + ':' + 
+                            this.formatTimeStr(second)
+                            }
+
+                       this.isshoe = false
+                       valy[i].result = result
+                       this.isshoe = true
+                       console.log(valy[i],result,du)
+          //                   return result //转化成分，秒
+                       }
+                      }, 1200)
+
+                    })
+    },
+    formatTimeStr(val) {
+            if (val > 9) {
+              return val
+            } else {
+              return '0' + val
+            }
+          },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 获取当前时间
+    gettime(){
+      let nowDate = new Date()
+      				  let date = {
+      				    year: nowDate.getFullYear(),
+      				    month: nowDate.getMonth() + 1,
+      				    date: nowDate.getDate()
+      				  }
+                 // console.log(parseInt(date.date),date.month,4)
+                 if (date.month < 10) {
+                    date.month = '0' + date.month
+                  }
+      				   if (parseInt(date.date) < 10) {
+      				      date.date = '0' + date.date
+      				    }
+                  let nghe = date.year + '-' + date.month + '-' + date.date
+      				  return nghe
+
+    },
+    // 表单重置
+    reset() {
+       this.form = {
+               warnId: null,
+               warnType: null,
+               warnSign: null,
+               channelId: null,
+               videoAddress: null,
+               reportAddress: null,
+               reportStatus: null,
+               warnTime: this.gettime(),
+               warnImage: null,
+               delFlag: null,
+               createBy: null,
+               createTime: null,
+               updateBy: null,
+               updateTime: null,
+               remark: null
+             }
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+        handleQuery() {
+          this.queryParams.pageNum = 1
+          this.getList()
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+          this.resetForm("queryForm")
+          this.handleQuery()
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+          this.ids = selection.map(item => item.warnId)
+          this.single = selection.length!==1
+          this.multiple = !selection.length
+        },
+     /** 新增按钮操作 */
+        handleAdd() {
+          this.reset()
+          this.open = true
+          this.title = "添加告警管理"
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+          this.reset()
+          const warnId = row.warnId || this.ids
+          getWarnManage(warnId).then(response => {
+            this.form = response.data
+            this.open = true
+            this.title = "修改告警管理"
+          })
+        },
+    getImageSrc(val) {
+          // 创建一个临时元素，将HTML内容插入其中
+          const tempElement = document.createElement('div');
+          tempElement.innerHTML = val;
+          // 查找 <img> 标签并获取 src 属性值
+          const imgElement = tempElement.querySelector('img');
+          if (imgElement) {
+            const srcValue = imgElement.getAttribute('src');
+            // this.imagePath=srcValue
+            console.log('Image src:', srcValue+"照片路径");
+          } else {
+            console.log('No <img> element found.');
+          }
+        },
+
+
+   /** 提交按钮 */
+       submitForm() {
+         this.$refs["form"].validate(valid => {
+           if (valid) {
+             if (this.form.warnId != null) {
+               updateWarnManage(this.form).then(response => {
+                 this.$modal.msgSuccess("修改成功")
+                 this.open = false
+                 this.getList()
+               })
+             } else {
+               addWarnManage(this.form).then(response => {
+                 this.$modal.msgSuccess("新增成功")
+                 this.open = false
+                 this.getList()
+               })
+             }
+           }
+         })
+       },
+       handleDeleteg() {
+           let nhde = []
+           let nsg = ''
+           this.warnManageList.filter(rou=>{
+             if(rou.isnum == true){
+               nhde.push(rou.warnId)
+             }
+           })
+           console.log(nhde)
+           nsg = nhde.join(',')
+            // return
+            delWarnManage(nsg).then(response => {
+              this.$modal.msgSuccess("操作成功")
+              this.getList()
+            })
+            // delManual(nsg)
+            // this.$modal.confirm('是否确认删除数据项？').then(function() {
+            //   return delManual(nsg);
+            // }).then(() => {
+            //   this.getList();
+            //   this.$modal.msgSuccess("删除成功");
+            // }).catch(() => {});
+          },
+       /** 删除按钮操作 */
+       handleDelete(row) {
+         const warnIds = row.warnId || this.ids
+         this.$modal.confirm('是否确认删除告警管理编号为"' + warnIds + '"的数据项？').then(function() {
+           return delWarnManage(warnIds)
+         }).then(() => {
+           this.getList()
+           this.$modal.msgSuccess("删除成功")
+         }).catch(() => {})
+       },
+    /** 导出按钮操作 */
+       handleExport() {
+         this.download('manage/warnManage/export', {
+           ...this.queryParams
+         }, `warnManage_${new Date().getTime()}.xlsx`)
+       },
+
+
+    // 获取屏幕高度
+    showFilterForm () {
+          this.filterActive = !this.filterActive
+          this.changeTableMaxHeight()
+        },
+        changeTableMaxHeight () {
+          let height = document.body.offsetHeight // 网页可视区域高度
+          // if (this.filterActive) {
+          //   this.tableMaxHeight = height - 320
+          // } else {
+            this.tableMaxHeight = height - 150
+          // }
+          console.log(height)
+        },
+    tiahzo(item){
+      this.$router.push({
+        path: '/shebe',
+        query: {
+        	'id':item.warnId,
+        }
+      })
+    }
+
+
+  }
+};
+</script>
+<style  lang="scss">
+  .ckilde{
+    // color: #03BF8A;
+  }
+  .quning{
+    .el-image{
+      box-shadow:0;
+      -webkit-box-shadow:0;
+    }
+  }
+  .qucheu{
+    .el-form-item--small.el-form-item{
+      border: 1px  solid #E6E6E6;
+    }
+    .el-input__inner{
+      border:0;
+    }
+  }
+  .nghsey{
+    .el-dialog__body{
+      padding: 0;
+      background-color: #F2F3FD;
+    }
+  }
+  .butt{
+    .el-button--small{
+      padding: 9px 23px !important;
+      font-size: 14px;
+      border: 0 !important;
+    }
+
+  }
+  .casr{
+    .el-tabs__item.is-active{
+      color: #196CFF;
+    }
+    .el-tabs--card > .el-tabs__header .el-tabs__item{
+      padding: 0  30px !important;
+    }
+  }
+  .el-table .el-table__header-wrapper th{
+    background-color:#F5F6F8;
+    color:#343434;
+  }
+  .el-table{
+    color:#343434;
+  }
+</style>
+<style scoped lang="scss">
+  .goe{
+    padding: 0 15px;
+    div{
+      // margin-bottom: 12px;
+    }
+    p{
+      margin: 0;
+      font-weight: 500;
+      font-size: 14px;
+      color: #AAAAAA;
+      // margin-top: 10px;
+      // margin-bottom: 3px;
+      // padding: 0 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display:-webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp:1; //显示的行
+      width: 30%;
+    }
+    p:nth-child(2){
+      // margin-bottom: 10px;
+      margin-top: 0;
+     font-weight: 400;
+     width: 70%;
+     font-size: 14px;
+     color: #333333;
+     display: flex;
+     justify-content: space-between;
+     align-items: center;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     display:-webkit-box; //作为弹性伸缩盒子模型显示。
+     -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+     -webkit-line-clamp:1; //显示的行
+     // padding-bottom: 10px;
+
+    }
+  }
+  .ingwe{
+    border: 2px solid #03BF8A;
+  }
+  .shipige{
+     padding: 15px;
+     display: flex;
+     justify-content: space-between;
+     align-items: center;
+    p{
+      margin: 0;
+
+    }
+  }
+
+  </style>
+
+

ruoyi-ui/src/views/shipinggaoj/huabuhaik/index.vue

@@ -67,28 +67,49 @@
 	<div>
 		<el-row :gutter="20">
           <!-- postList -->
-					<el-col :span='5'>
+					<el-col :span='6'>
 						<div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 100vh;">
-              <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">通道列表</p>
-              <div style=" height: 36px;;line-height: 36px;margin-top: 10px;"v-for="(item,index) in channelNumberList">
+              <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">参数配置</p>
+              <!-- <div style=" height: 36px;;line-height: 36px;margin-top: 10px;"v-for="(item,index) in channelNumberList">
                               <div @click="ishg(item)" style="display: flex;align-items: center;justify-content: space-between;">
                                 <div style="font-size: 16px;
               color: #333333;"> {{item.channelNum == null?'暂无数据' : item.channelNum}}</div>
                                 <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
                               </div>
-                          </div>
+                          </div> -->
+              <div>
+                 <el-form ref="form" :model="form" :rules="rules" label-width="60px">
+                   <p style="margin: 0; margin-top: 10px; color:#03BF8A ; margin-bottom: 10px;">时间配置(分钟 <span style="font-size: 12px;color: #FEA71B;">只能输入正数</span>)</p>
+                   <el-form-item label="离岗" prop="leaveTime">
+                             <el-input :min="0" type="number" v-model="form.leaveTime" placeholder="请输入离岗时间设置 默认：10 分钟" />
+                           </el-form-item>
+                  <el-form-item label="玩手机" prop="playTime">
+                           <el-input :min="0" type="number" v-model="form.playTime" placeholder="请输入玩手机时间设置 默认：10 分钟" />
+                         </el-form-item>
+                  <p style="margin: 0; margin-top: 10px; color:#03BF8A ; margin-bottom: 10px;">相似度配置<span style="font-size: 12px;color: #FEA71B;">(只能输入正数)</span></p>
+                  <el-form-item label="离岗" prop="leaveRate">
+                            <el-input :min="0" :max="1" type="number" v-model="form.leaveRate" placeholder="请输入离岗时间相似度设置 默认：0.5" />
+                          </el-form-item>
+
+                  <el-form-item label="玩手机" prop="playRate">
+                            <el-input :min="0" :max="1" type="number" v-model="form.playRate" placeholder="请输入玩手机相似度设置 默认：0.5" />
+                          </el-form-item>
+                  </el-form>
+              </div>
+
             </div>
 					</el-col>
         <!-- v-if="isshoe" -->
         <el-col :span='14' style="padding-left: 30px; background-color: #fff;border-radius: 10px;padding: 20px; height: 100vh;" >
           <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 18px;">
-            <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">实时预览
+            <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">坐标点配置
 
             </p>
             <div>
 
-              <!-- <el-button type="danger" plain>删除</el-button>
-              <el-button type="warning" plain>置顶</el-button> -->
+              <!-- <el-button type="danger" plain>删除</el-button> -->
+              <span style="font-size: 12px; color: red;">(点击保存之前，请先确认参数配置和坐标点配置都完成)</span>
+              <el-button type="warning" plain @click="submitForm">保存</el-button>
               <el-button type="success" plain>关闭</el-button>
 
 
@@ -133,7 +154,7 @@
         						      <source src="" />
         						    </video> -->
         					</el-col>
-            <el-col :span="5">
+            <el-col :span="4">
               <div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 100vh;">
                 <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">绘制区域</p>
                 <div class="drawings-list">
@@ -204,7 +225,7 @@
 <script>
   import { listChannelNumber, listChannelNumbernopa,getChannelNumber, delChannelNumber, addChannelNumber, updateChannelNumber } from "@/api/system/channelNumber"
   import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
-// import { listPost, getPost, delPost, addPost, updatePost,updateFs,updateGx } from "@/api/kaoch/renyuan";
+import { listParameterSet, getParameterSet, delParameterSet, addParameterSet, updateParameterSet } from "@/api/manage/parameterSet"
 // import { listReservat,camera,cameraIndexCode, listReservatd, getReservat, delReservat, addReservat, updateReservat,setPass,delReservathx,openDz,closeDz } from "@/api/tonggi/houtai";
 // import vueQr from "vue-qr";
 // import videojs from 'video.js'
@@ -306,7 +327,25 @@ export default {
         ],
 
       },
-      forms:{},
+      forms:{
+        parameterId: null,
+                channelId: null,
+                equipmentId: null,
+                equipmentNum: null,
+                equipmentName: null,
+                channelNum: null,
+                channelRange: null,
+                leaveTime: 10,
+                playTime: 10,
+                leaveRate: 0.5,
+                playRate: 0.5,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null
+      },
 			tableMaxHeight:'200',
       kje:0,
       ksjegsg:[],
@@ -386,21 +425,64 @@ export default {
     getListtd() {
       this.loading = true
       let queryParams = {}
-      listChannelNumbernopa().then(response => {
-        this.channelNumberList = response.rows
-        if(this.channelNumberList.length !=0){
-                  let snghs = this.channelNumberList[0].videoAddress.split('@')
-                  let snghst = snghs[1].split(':')
-                  let snsgduan = snghst[1].split('/')
-                   console.log(snghs,snghst,snsgduan)
-                  let sgse={'ip':snghst[0],'duank':snsgduan[0],
-                  'account':this.channelNumberList[0].account,
-                  'password':this.channelNumberList[0].password,
-                  }
-           this.getVideo(sgse)
-           WebVideoCtrl.I_ShowPlugin()
-           this.loading = false
+      getChannelNumber(this.$route.query.id).then(response => {
+        this.channelNumberList = response.data
+        if(response.data.isChannel == 'Y'){
+          this.form = response.data.parameterSet
+          this.shapes = JSON.parse(this.form.channelRange)
+          this.form.channelId = response.data.channelId
+          this.form.isChannel = response.data.isChannel
+          this.form.equipmentNum = response.data.equipmentNum
+          this.form.equipmentId = response.data.equipmentId
+          this.form.equipmentName = response.data.equipmentName
+          this.form.channelNum = response.data.channelNum
+          let snghs = response.data.videoAddress.split('@')
+          let snghst = snghs[1].split(':')
+          let snsgduan = snghst[1].split('/')
+           console.log(snghs,snghst,snsgduan)
+          let sgse={'ip':response.data.equipmentIp,
+          'account':response.data.account,
+          'password':response.data.password,
+          'port':response.data.port
+          }
+          this.getVideo(sgse)
+          this.clickEnableDraw()
+          this.clickAddSnapPolygon()
+          WebVideoCtrl.I_ShowPlugin()
+        }else{
+          this.form = {parameterId: null,
+                channelId: response.data.channelId,
+                equipmentId: response.data.equipmentId,
+                equipmentNum: response.data.equipmentNum,
+                equipmentName: response.data.equipmentName,
+                channelNum: response.data.channelNum,
+                channelRange: null,
+                isChannel:response.data.isChannel,
+                leaveTime: 10,
+                playTime: 10,
+                leaveRate: 0.5,
+                playRate: 0.5,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null}
+                let snghs = response.data.videoAddress.split('@')
+                let snghst = snghs[1].split(':')
+                let snsgduan = snghst[1].split('/')
+                 console.log(snghs,snghst,snsgduan)
+                let sgse={'ip':response.data.equipmentIp,
+                'account':response.data.account,
+                'password':response.data.password,
+                'port':response.data.port
+                }
+                this.getVideo(sgse)
+                WebVideoCtrl.I_ShowPlugin()
         }
+
+
+           this.loading = false
         // getWarnManage(this.$route.query.id).then(response => {
           // this.form = response.data
         this.loading = false
@@ -444,7 +526,6 @@ export default {
       var that=this;
         const parser = new DOMParser();
             const xmlDoc = parser.parseFromString(xmlString, "text/xml");
-
             // 获取所有 SnapPolygon 节点
             const polygonNodes = xmlDoc.querySelectorAll("SnapPolygon");
              var newArr=[];
@@ -453,7 +534,6 @@ export default {
             this.polygons = Array.from(polygonNodes).map((polygonNode) => {
               const id = polygonNode.querySelector("id").textContent;
               const pointNodes = polygonNode.querySelectorAll("point");
-
               const points = Array.from(pointNodes).map((pointNode) => ({
                 x: pointNode.querySelector("x").textContent,
                 y: pointNode.querySelector("y").textContent,
@@ -474,6 +554,7 @@ export default {
            });
         // this.shapes=JSON.parse(JSON.stringify(newArr))
         this.messageToSend = this.shapes
+        this.form.channelRange = JSON.stringify(this.shapes)
         this.sendMessage()
         console.log(this.shapes)
     },
@@ -633,29 +714,30 @@ export default {
 
 
     // 通道点击
-    ishg(val){
-      this.isfse = false
-      if(WebVideoCtrl){
-        console.log(this.szDeviceIdentify)
-        this.clickDelAllSnapPolygon()
-      	WebVideoCtrl.I_Logout(this.szDeviceIdentify)
-        WebVideoCtrl.I_StopAllPlay()
-      	WebVideoCtrl.I_DestroyPlugin()
-        WebVideoCtrl.I_Resize()
-      }
-      let snghs = val.videoAddress.split('@')
-             let snghst = snghs[1].split(':')
-             let snsgduan = snghst[1].split('/')
-              console.log(snghs,snghst,snsgduan)
-             let sgse={'ip':snghst[0],'duank':snsgduan[0],
-             'account':val.account,
-             'password':val.password,
-             }
-      this.getVideo(sgse)
-      WebVideoCtrl.I_ShowPlugin()
-      // this.clickStartRealPlay('192.168.101.64', '80',1, 0, 1);
-
-    },
+    // ishg(val){
+    //   this.isfse = false
+    //   if(WebVideoCtrl){
+    //     console.log(this.szDeviceIdentify)
+    //     this.clickDelAllSnapPolygon()
+    //   	WebVideoCtrl.I_Logout(this.szDeviceIdentify)
+    //     WebVideoCtrl.I_StopAllPlay()
+    //   	WebVideoCtrl.I_DestroyPlugin()
+    //     WebVideoCtrl.I_Resize()
+    //   }
+    //   let snghs = val.videoAddress.split('@')
+    //          let snghst = snghs[1].split(':')
+    //          let snsgduan = snghst[1].split('/')
+    //           console.log(snghs,snghst,snsgduan)
+    //          let sgse={'ip':snghst[0],'duank':snsgduan[0],
+    //          'account':val.account,
+    //          'password':val.password,
+    //          'port':val.port
+    //          }
+    //   this.getVideo(sgse)
+    //   WebVideoCtrl.I_ShowPlugin()
+    //   // this.clickStartRealPlay('192.168.101.64', '80',1, 0, 1);
+
+    // },
 
 
 	  init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
@@ -770,143 +852,6 @@ export default {
 	          }
 	        })
 	      },
-
-    /** 查询岗位列表 */
-    getList() {
-	  // this.queryParams
-    this.loading = true
-    // getWarnManage(this.$route.query.id).then(response => {
-      // this.form = response.data
-     const url = new URL('rtsp://admin:zxy123456@192.168.101.64:554/h264/ch1/main/av_stream');
-             const auth = url.username + ':' + url.password;
-             console.log(url.username,url.password,8)
-             // this.username = url.username;
-             // this.password = url.password;
-      this.getVideo()
-      WebVideoCtrl.I_ShowPlugin()
-      this.loading = false
-      // this.open = true
-      // this.title = "修改告警管理"
-    // })
-  //     camera(this.queryParams).then(response => {
-  //       this.postList = response.data.data.list;
-		// if(response.data.data != null){
-		// if(response.data.data.list.length != 0){
-		// 	let ne = response.data.data.list[0]
-		// 	response.data.data.list.filter(rtu=>{
-		// 		if(rtu.name == '后门道闸'){
-		// 			console.log(3,rtu)
-		// 			ne = rtu
-		// 			return
-		// 		}
-		// 	})
-		// 	this.isfgw(ne)
-		// 	this.isjfwe =ne
-
-		// }
-		// }
-  //       // this.postList=[{'nsje':null,'visitPhone':null,'isReception':'Y'}]
-  //       this.total = response.data.data.total;
-  //       this.loading = false;
-  //     });
-    },
-    getListh() {
-      this.loading = true;
-      listReservatd().then(response => {
-        // this.postList = response.rows;
-        this.ksjegsg= response.data
-        // this.total = response.total;
-        this.loading = false;
-      });
-    },
-	isfgw(val){
-		this.isjfwe = val
-		let nhge={cameraIndexCode:val.indexCode}
-		this.isshiwa = false
-		this.isshoe= false
-	   cameraIndexCode(nhge.cameraIndexCode).then(response => {
-		   console.log(response.data.data.url)
-		   this.isshoe= true
-		  this.init(response.data.data.url)
-		   this.isshiwa = true
-	  // this.postList = response.rows;
-	  // this.total = response.total;
-	  });
-		console.log(val,4)
-	},
-	osge(){
-		console.log(this.isjfwe,45)
-		if(this.isjfwe.name == '后门道闸'){
-			this.isjfwe.name ='后门抓拍一体机1'
-		}
-		let nge={equipmentName:this.isjfwe.name}
-		openDz(nge).then(response => {
-
-		});
-	},
-	osgef(){
-		if(this.isjfwe.name == '后门道闸'){
-			this.isjfwe.name ='后门抓拍一体机1'
-		}
-		let nge={equipmentName:this.isjfwe.name}
-		closeDz(nge).then(response => {
-		  // this.postList = response.rows;
-		});
-	},
-
-    ilw(row,val){
-      this.kje = val
-      // console.log(row)
-      if(row.value == 0){
-          this.queryParams.reservatType = undefined
-      }else{
-        this.queryParams.reservatType = row.value
-      }
-    console.log(this.kje)
-      this.queryParams.pageNum  = 1
-      this.getList()
-    },
-  nhgwel(item){
-    this.form.receptionId = item.receptionId
-    this.form.receptionName = item.receptionName
-    this.form.receptionPhone = item.phonenumber
-
-  },
-    getPass(row) {
-      const _this = this
-      this.$confirm('是否审核通过', "提醒", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function() {
-        return setPass({
-        visitType: 3,
-        reservatId: row.reservatId,
-        // xmStatus:row.xmStatus
-      })
-      }).then(() => {
-    	   _this.getList();
-        _this.msgSuccess("提交成功");
-      })
-    },
-    infoBtn(row) {
-    	const _this = this
-    	this.$confirm('是否拒绝', "提醒", {
-    	  confirmButtonText: "确定",
-    	  cancelButtonText: "取消",
-    	  type: "warning"
-    	}).then(function() {
-    	  return setPass({
-    	  visitType: 2,
-    	   reservatId: row.reservatId,
-    	  // xmStatus:row.xmStatus
-    	})
-    	}).then(() => {
-    	  _this.getList();
-    	  _this.msgSuccess("提交成功");
-    	})
-
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -924,118 +869,6 @@ export default {
       };
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.reservatId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    nhgeo(row){
-      this.reset();
-     this.open = true;
-     this.title = "分配接待人员";
-     this.form.reservatId = row.reservatId;
-     this.form.reservatConfigTimeId=row.reservatConfigTimeId;
-     this.form.visitDate=row.visitDate
-    },
-    handleDeleteh(row){
-      this.$router.push({
-        path: '/bjqs',
-      		query: {
-      			'id':row.reservatId,
-      			'name':null,
-      			'names':null,
-      			'isxz':1
-      		}
-      })
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.forms = {
-        reservatType:'1'
-      }
-      this.opens = true;
-      this.titles = "添加预约人员";
-	  // this.scoreDataDetailsList = []
-	  // this.$router.push({
-	  //   path: '/system/bjq',
-	  // })
-	  // this.$router.push({
-	  //   path: '/bjqs',
-	  // 		query: {
-	  // 			'id':null,
-	  // 			'name':null,
-	  // 			'names':null,
-	  // 			'isxz':1
-	  // 		}
-	  // })
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-           const recordId = row.recordId || this.ids
-           getReservat(recordId).then(response => {
-             this.forms = response.data;
-             this.opens = true;
-             this.title = "修改访问记录";
-           });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-              if (valid) {
-                // if (this.form.reservatId != null) {
-                  updateReservat(this.form).then(response => {
-                    this.$modal.msgSuccess("操作成功");
-                    this.open = false;
-                    this.getList();
-                  });
-                // } else {
-                //   addReservat(this.form).then(response => {
-                //     this.$modal.msgSuccess("新增成功");
-                //     this.open = false;
-                //     this.getList();
-                //   });
-                // }
-              }
-            });
-    },
-    submitForms: function() {
-      this.$refs["forms"].validate(valid => {
-              if (valid) {
-                // if (this.form.reservatId != null) {
-                  // updateReservat(this.forms).then(response => {
-                  //   this.$modal.msgSuccess("操作成功");
-                  //   this.open = false;
-                  //   this.getList();
-                  // });
-                // } else {
-                  this.forms.visitTime = this.forms.visitTime + '-' + this.forms.visitTime
-                  addReservat(this.forms).then(response => {
-                    this.$modal.msgSuccess("新增成功");
-                    this.opens = false;
-                    this.getList();
-                  });
-                // }
-              }
-            });
-    },
-
-	nglqw(val){
-		this.opent = true
-		this.bg = val.investigateTableId
-	},
-
 
 	iszheg(event){
 	 console.log(event);
@@ -1191,7 +1024,7 @@ export default {
     	var that=this;
        this.isfse  = true
        console.log(row)
-    	this.initVideoPlay(row.ip, '80', row.account, row.password,'divPlugin')
+    	this.initVideoPlay(row.ip, row.port, row.account, row.password,'divPlugin')
     },
     // 有插件
     initVideoPlay(ip, port, username, password,id) {
@@ -1448,6 +1281,28 @@ export default {
     		startRealPlay();
     	}
     },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          console.log(this.form)
+          // return
+          if (this.form.isChannel != 'N') {
+            updateParameterSet(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.$router.go(-1)
+            })
+          } else {
+            addParameterSet(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.$router.go(-1)
+            })
+          }
+        }
+      })
+    },
   }
 };
 </script>

ruoyi-ui/src/views/shipinggaoj/shebe/index.vue

@@ -80,27 +80,27 @@
           <div style="display: flex;align-items: center;justify-content: space-between;">
             <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">实时预览</p>
             <div>
-              <el-button type="danger" plain>删除</el-button>
-              <el-button type="warning" plain>置顶</el-button>
-              <el-button type="success" plain>关闭</el-button>
+             <!-- <el-button type="danger" plain>删除</el-button>
+              <el-button type="warning" plain>置顶</el-button> -->
+              <el-button type="success" plain @click="cnde">关闭</el-button>
             </div>
           </div>
-          <div class="video-container">
+          <!-- <div class="video-container">
               <!-- <h3>实时YOLO检测</h3> -->
 
               <!-- http://192.168.101.22:5000/video_feed -->
-              <img :src="form.reportAddress" width="100%" height="460" id="yolo-stream">
-          </div>
+              <!-- <img :src="form.reportAddress" width="100%" height="460" id="yolo-stream"> -->
+          <!-- </div>
           <div class="controls">
               <button onclick="refreshStream()">刷新视频</button>
-          </div>
+          </div> -->
 
           <!-- <div style="width: 100%; height: 480px;">
             <div v-if="isfse" id="divPlugin" style="width: 100%; height: 480px;" ></div>
           </div> -->
           <!-- <img src="../../../assets/images/pic_ssyl_lt.png" alt="" style="width: 100%; margin-top: 20px;"> -->
           <!-- 344 -->
-          <!-- <video id="video" controls autoplay muted width="100%" height="480px"style="margin-top: 20px;"></video> -->
+          <video id="video" controls autoplay muted width="100%" height="480px"style="margin-top: 20px;"></video>
         						<!-- <video
         						      class="videosmall"
         						      ref="videosmallone"
@@ -111,7 +111,7 @@
         						      type="rtmp/flv"
         						    >
         						      <source src="" />
-        						    </video> -->
+        						    </video>
         					</el-col>
 
 			<!-- <el-col :span="24">
@@ -125,6 +125,7 @@
 						  </div>
 				</div>
 			</el-col> -->
+      </el-col>
 		</el-row>
 
 
@@ -312,6 +313,9 @@ export default {
       this.clickStartRealPlay('192.168.101.64', '80',1, 0, 1);
       // this.getVideo()
 
+    },
+    cnde(){
+      this.$router.go(-1)
     },
 
 
@@ -330,7 +334,7 @@ export default {
 	            }
 	            this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
 	              {
-	                type: "flv",
+	                type: "mp4",
 	                url: val, //你的url地址
 	                isLive: true, //数据源是否为直播流
 	                hasAudio: false, //数据源是否包含有音频
@@ -436,6 +440,7 @@ export default {
     // this.loading = true
     getWarnManage(this.$route.query.id).then(response => {
       this.form = response.data
+      this.init(this.form.videoAddress)
       // this.getVideo()
       // WebVideoCtrl.I_ShowPlugin()
       // this.loading = false

ruoyi-ui/src/views/shipinggaoj/shebecanshu/index.vue

@@ -1,602 +1,1412 @@
-
 <template>
-  <div class="cut-picture">
-    <div>
-    	<el-row :gutter="20">
-            <!-- postList -->
-    				<el-col :span='5'>
-    					<div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 90vh;overflow:auto" class="infinite-list">
-                <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">通道列表</p>
-                <div style=" height: 36px;;line-height: 36px;margin-top: 10px;"v-for="(item,index) in 20">
-                                <div :class=" numg== index ? 'acti' : ''" @click="ishg(item,index)" style="display: flex;align-items: center;justify-content: space-between;">
-                                  <div style="font-size: 16px;
-                color: #333333;"> 通道{{ index >8 ? index + 1 : '0'  + (index + 1)}}</div>
-                                  <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;" v-if="numg!= index">
-                                  <img src="../../../assets/images/bianhuan.png" alt="" style="width: 10px;height: 12px;" v-if="numg== index">
-                                </div>
-                            </div>
-              </div>
-    				</el-col>
-          <!-- v-if="isshoe" -->
-          <el-col :span='19' style="padding-left: 30px; background-color: #fff;border-radius: 10px;padding: 20px; height: 100vh;" >
-            <div style="display: flex;align-items: center;justify-content: space-between;">
-              <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">实时预览</p>
+  <div class="app-container" style="padding-top: 20px;height: 120vh;"  v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+    <div class="ntgs">
+    <el-row :gutter="10" class="mb8">
+     <div class="iuer" style="margin-bottom:10px;">
+       <!-- <div style="display: flex;align-items: center; " class="ingaqe">
+            <el-select v-model="queryParams.name" placeholder="请选监控名称" clearable>
+              <el-option
+                v-for="dict in postList"
+                :key="dict.indexCode"
+                :label="dict.name"
+                :value="dict.name"
+              />
+            </el-select>
+			<div class="ksfpofg" @click="handleQuery">
+						  搜索
+						  </div>
+       </div> -->
+	   <!-- <div class="ite">
+	      <div class="ksfpo" @click="osge"  v-hasPermi="['system:camera:openDz']">
+			  <img src="../../../assets/images/icon_ssjk_kman_open.png" alt="" style="width:10px;height: 10px;">
+			  开门</div>
+		  <div class="ksfpo ksfpok" @click="osgef" v-hasPermi="['system:camera:closeDz']">
+		  			  <img src="../../../assets/images/icon_ssjk_kman_close.png" alt="" style="width:10px;height: 10px;">
+		  			  关门</div>
+	   </div> -->
+<!--  -->
+     </div>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['investigate:table:add']"
+        >新增</el-button>
+      </el-col>
+
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['investigate:table:remove']"
+        >删除</el-button>
+      </el-col> -->
+     <!-- <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['investigate:table:export']"
+        >导出</el-button>
+      </el-col> -->
+      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
+    </el-row>
+
+	<div>
+		<el-row :gutter="20">
+          <!-- postList -->
+					<el-col :span='5'>
+						<div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 100vh;">
+              <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">通道列表</p>
+              <div style=" height: 36px;;line-height: 36px;margin-top: 10px;"v-for="(item,index) in channelNumberList">
+                              <div @click="ishg(item)" style="display: flex;align-items: center;justify-content: space-between;">
+                                <div style="font-size: 16px;
+              color: #333333;"> {{item.channelNum == null?'暂无数据' : item.channelNum}}</div>
+                                <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
+                              </div>
+                          </div>
               <div>
-                <!-- <el-button type="danger" plain>删除</el-button> -->
-                <el-button type="warning"  @click="handlerCutPicture" plain>设置参数</el-button>
-                <!-- <el-button type="success" plain>关闭</el-button> -->
-              </div>
-            </div>
-            <div class="source-content" style="width: 100%;">
-              <div class="cut-video-content" style="display: flex;justify-content: center;width:100%;">
-                <!-- <video-player ref="video" id="video"></video-player> -->
-                 <video ref="video"  id="video" controls autoplay muted width="920" height="380px"style="margin-top: 20px;"></video>
-                <!-- <div class="button-content"> -->
-                  <!-- <el-button type="primary" size="small" @click="handlerCutPicture">截取当前画面</el-button> -->
-                  <!-- <el-button size="small" @click="handlerVideo">视频录影</el-button> -->
-                <!-- </div> -->
+
               </div>
-              <!-- <div class="image-list">
-                <el-scrollbar style="height:100%;" class="el-menuscrollbar">
-                  <div v-for="(img, index) of imageList" :key="index" class="image-detail" :style="imgContentStyle">
-                    <i class="el-icon-close icon-delete" @click="deleteImage(index)"></i>
-                    <img title="点击查看原图" :ref="`img.${index}`" :src="img.src" @click="openOuter(img)" class="source-img" :width="img.width" :height="img.height"/>
-                  </div>
-                </el-scrollbar>
-              </div> -->
+
             </div>
+					</el-col>
+        <!-- v-if="isshoe" -->
+        <el-col :span='19' style="padding-left: 30px; background-color: #fff;border-radius: 10px;padding: 20px; height: 100vh;" >
+          <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 18px;">
+            <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">实时预览
+
+            </p>
+            <div>
+
+              <!-- <el-button type="danger" plain>删除</el-button>
+              <el-button type="warning" plain>置顶</el-button> -->
+              <!-- <el-button type="success" plain>关闭</el-button> -->
 
 
-            <!-- <div style="width: 100%; height: 480px;">
-              <div v-if="isfse" id="divPlugin" style="width: 100%; height: 480px;" ></div>
-            </div> -->
-            <!-- <img src="../../../assets/images/pic_ssyl_lt.png" alt="" style="width: 100%; margin-top: 20px;"> -->
-            <!-- 344 -->
-            <!-- <video id="video" controls autoplay muted width="100%" height="480px"style="margin-top: 20px;"></video> -->
-          						<!-- <video
-          						      class="videosmall"
-          						      ref="videosmallone"
-          						      preload="auto"
-          						      muted
-          						      autoplay
-          							  width="95%"
-          						      type="rtmp/flv"
-          						    >
-          						      <source src="" />
-          						    </video> -->
-          					</el-col>
-
-    		<!-- <el-col :span="24">
-    			<div class="ihgswq wrapper"  ref="wrapper" style=" overflow: hidden;">
-    					  <div class="fijge content nhgwesvq" ref="content" style="width:1610px;">
-    								<div class='shotw '   v-for="(item,index) in postList" :key="index" @click="isfgw(item)" >
-    										  <img src="../../../assets/images/fengm.png" alt="">
-    											<img src="../../../assets/images/icon_spjk_play.png" alt="" class="iges">
-    										  <p style="font-size: 14px;">{{item.name}}</p>
-    								</div>
-    					  </div>
-    			</div>
-    		</el-col> -->
-    	</el-row>
-
-
-      <!-- <pagination
-         v-show="total>0"
-         :total="total"
-         :page.sync="queryParams.pageNo"
-         :limit.sync="queryParams.pageSize"
-         @pagination="getList"
-       /> -->
-    </div>
-
-
-    <div class="source-dialog" v-if="showImgDialog">
-      <div class="source-dialog__body">
-        <i class="el-icon-close icon-delete" @click="showImgDialog=false"></i>
-        <img :src="curSourceImg" :width="canvasWidth" :height="canvasHeight" alt="查看原图"/>
-      </div>
-    </div>
-    <div class="source-dialog" v-show="showRecord">
-      <div class="source-dialog__body">
-        <canvas
-          id="vcanvas"
-          ref="recordCanvas"
-          :width="canvasWidth"
-          :height="canvasHeight"/>
-      </div>
-    </div>
-    <canvas
-    v-show="showRecordt"
-      ref="icanvas"
-      :width="canvasWidth"
-             :height="canvasHeight"
-      @mousedown="handlerMouseDown($event)"
-      @mousemove="handlerMouseMove($event)"/>
-
-    <el-dialog
-      title="截图"
-      v-dialogDrag
-      :visible.sync="showCutDialog"
-      :close-on-click-modal="false"
-      v-if="showCutDialog"
-     :width="dialogWidth"
-      class="dialog-content"
-     >
-      <transition name="fade">
-        <div class="icon-pen" v-if="showPenBtn">
-          <img :src="penBtnSrc" class="icon-pen-image" @click="showPenList" />
-          <transition name="fade">
-            <div class="icon-pen-content" v-if="showPen">
-              <div class="icon-pen-color" v-for="(item,index) in penList" :key="index" :style="{ backgroundColor: item.code }" :class="{ 'is-active': item.code === checkedPen }" @click="checkPen(item)">
-              </div>
             </div>
-          </transition>
-        </div>
-      </transition>
-      <canvas
-        ref="icanvas"
-        :width="canvasWidth"
-               :height="canvasHeight"
-        @mousedown="handlerMouseDown($event)"
-        @mousemove="handlerMouseMove($event)"/>
-      <div class="cancel-content"
-        v-show="showCancelContent">
-        <div class="button" @click="handlerClear">
-          <img :src="clearIconSrc" class="icon-clear" height="22px"/>
-          <span>清除</span>
-        </div>
-        <div class="button" @click="handlerCancel">
-          <img :src="cancelIconSrc" class="icon-clear" height="22px"/>
-          <span>撤销</span>
-        </div>
-      </div>
-      <div slot="footer">
-        <el-button @click="cancelEdit" size="small">取 消</el-button>
-        <el-button @click="confirmEdit" size="small" type="primary">确 认</el-button>
-      </div>
+          </div>
+
+         <div style="width: 100%; height: 480px;">
+           <div v-if="isfse" id="divPlugin" style="width: 100%; height: 440px;" ></div>
+
+         </div>
+
+
+          <!-- <img src="../../../assets/images/pic_ssyl_lt.png" alt="" style="width: 100%; margin-top: 20px;"> -->
+          <!-- 344 -->
+          <!-- <video id="video" controls autoplay muted width="100%" height="480px"style="margin-top: 20px;"></video> -->
+        						<!-- <video
+        						      class="videosmall"
+        						      ref="videosmallone"
+        						      preload="auto"
+        						      muted
+        						      autoplay
+        							  width="95%"
+        						      type="rtmp/flv"
+        						    >
+        						      <source src="" />
+        						    </video> -->
+        					</el-col>
+
+
+			<!-- <el-col :span="24">
+				<div class="ihgswq wrapper"  ref="wrapper" style=" overflow: hidden;">
+						  <div class="fijge content nhgwesvq" ref="content" style="width:1610px;">
+									<div class='shotw '   v-for="(item,index) in postList" :key="index" @click="isfgw(item)" >
+											  <img src="../../../assets/images/fengm.png" alt="">
+												<img src="../../../assets/images/icon_spjk_play.png" alt="" class="iges">
+											  <p style="font-size: 14px;">{{item.name}}</p>
+									</div>
+						  </div>
+				</div>
+			</el-col> -->
+		</el-row>
+
+
+	  <!-- <pagination
+	     v-show="total>0"
+	     :total="total"
+	     :page.sync="queryParams.pageNo"
+	     :limit.sync="queryParams.pageSize"
+	     @pagination="getList"
+	   /> -->
+	</div>
+
+
+	</div>
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+
+    </el-dialog>
+
+    <el-dialog :title="titles" :visible.sync="opens" width="1000px" append-to-body>
     </el-dialog>
+
+	<el-dialog title="页面二维码" :visible.sync="opent" width="200px" style="padding: 0;" class="nhgrls" append-to-body>
+	  <div v-show="opent" style="display: flex;justify-content: center;align-items: center;">
+		  <!-- <span>{{'https://qszdh.qs163.cn/pages/index/index?id=' + this.bg}}</span> -->
+			   <!-- <vue-qr   :text="'https://qszdh.qs163.cn/pages/index/index?id=' + this.bg" :size="200"></vue-qr> -->
+	  </div>
+	</el-dialog>
   </div>
 </template>
 
 <script>
-import RecordRTC from 'recordrtc';
-import html2canvas from 'html2canvas';
-// import videoSrc from '@/assets/video/oceans.mp4';
-// import videoPlayer from '@/components/videoPlayer';
-import penBtnSrc from '@/assets/images/pen_btn.png';
-import clearIconSrc from '@/assets/images/cancel_btn.png';
-import cancelIconSrc from '@/assets/images/clear_btn.png';
-
-// 定义初始坐标
+  import { listChannelNumber, listChannelNumbernopa,getChannelNumber, delChannelNumber, addChannelNumber, updateChannelNumber } from "@/api/system/channelNumber"
+  import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
+// import { listPost, getPost, delPost, addPost, updatePost,updateFs,updateGx } from "@/api/kaoch/renyuan";
+// import { listReservat,camera,cameraIndexCode, listReservatd, getReservat, delReservat, addReservat, updateReservat,setPass,delReservathx,openDz,closeDz } from "@/api/tonggi/houtai";
+// import vueQr from "vue-qr";
+// import videojs from 'video.js'
+// import 'video.js/dist/video-js.css'
+// import {videoPlayer} from 'vue-video-player'
+// import 'videojs-flash'
+// import flvjs from 'flv.js/dist/flv.min.js'
+// import flvjs from "flv.js";
+import mqtt from 'mqtt';
+import { MqttClient } from 'mqtt'
+// 状态变量
+ // const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
+ var client = MqttClient||null
+import Bscroll from "better-scroll";
 export default {
-  name: 'cutPicture',
-
+  name: "Post",
+  dicts: ['sys_normal_disable','sys_yes_no','youke','tjzh','youkes','lafafen','fange','jluly'],
+  // components: {
+  //     vueQr,
+	 //  videoPlayer
+  //   },
   data() {
     return {
-      penBtnSrc,
-      clearIconSrc,
-      cancelIconSrc,
-      showCutDialog: false,
-      tempImageCanvasList: [], // 暂时存放之前编辑的画面
-      showPenBtn: false,
-      showPen: false,
-      penList: [
-        {
-          code: 'yellow',
-        },
-        {
-          code: 'white',
-        },
-        {
-          code: 'red',
-        },
-      ],
-      checkedPen: 'white',
-      canvasWidth: 800, // canvas 初始化大小
-      canvasHeight: 400,
-      showCancelContent: false,
-      dialogWidth: '1000px',
-      playerRef: null, // 播放器对象
-      imageCanvas: new Image(), // 缓存当前初始截图
-      isMouseDown: false, // 判断鼠标是否按下
-      coordinate: { // 鼠标移动点坐标
-        X: 0,
-        Y: 0,
-        X1: 0,
-        Y1: 0,
+      // 遮罩层
+      loading: true,
+	  opent:false,
+	  bg:null,
+    titles:'',
+	editableTabsValue:'6',
+    opens:false,
+    // 通道管理表格数据
+    channelNumberList: [],
+	  imageUrl:'@/assets/logo/logo.png',
+	  printObj: {
+	           id: "nhgrew", // 这里是要打印元素的ID
+	           popTitle: "", // 打印的标题
+	         },
+	  pickerOptions:{
+	            disabledDate (time) {
+	              //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
+	              // return time.getTime() > Date.now()//选当前时间之前的时间
+	              return time.getTime() < Date.now()  - 8.64e7;//选当前时间之后的时间
+	            }
+	        },
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+	  checkedScoreDataDetails: [],
+	  scoreDataDetailsList:[],
+	  tabPosition:'left',
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 岗位表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize:500,
+		    name:null,
+        postCode: undefined,
+        postName: undefined,
+        status: undefined,
+        reservatType:undefined
       },
-      flag: 0,
-      imageList: [],
-      imgContentStyle: {},
-      recorder: null,
-      showImgDialog: false,
-      showRecord: false,
-      startTime: 0, // 开始录制的时间点
-      videoTimer: 0,
-       camera_ip: '127.0.0.1:8000',
-       // 127.0.0.1:8000 192.168.101.86:8000
-       showRecordt:false,
-       numg:0,
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        receptionId: [
+          { required: true, message: "不能为空", trigger: "blur" }
+        ],
+
+
+      },
+      ruless:{
+        visitName: [
+          { required: true, message: "不能为空", trigger: "blur" }
+        ],
+        visitPhone: [
+          { required: true, message: "不能为空", trigger: "blur" }
+        ],
+        visitNum: [
+          { required: true, message: "不能为空", trigger: "blur" }
+        ],
+        visitDate: [
+          { required: true, message: "不能为空", trigger: "blur" }
+        ],
+        visitTime: [
+          { required: true, message: "不能为空", trigger: "blur" }
+        ],
+
+      },
+      forms:{},
+			tableMaxHeight:'200',
+      kje:0,
+      ksjegsg:[],
+	   Scroll: null,
+	   videoShow: false,
+	flvPlayer:null,
+	player: null,
+	name:null,
+	isshiwa:false,
+	isjfwe:{},
+	isshoe:false,
+   webRtcServer: null,
+   camera_ip: '127.0.0.1:8000',
+   g_iWndIndex:0,
+   iRtspPort:'',//预览中的ip
+   szDeviceIdentify:'',//ip_port,
+   isfse:false,
+
+   g_bEnableDraw:false,
+    // 所有绘制的图形
+    shapes: [],
+    // 禁用
+    isdisflag:false,
+    connectionStatus:'',
+    isConnected:false,
+    connecting:false,
+    messages:[{ type: 'sent' , content: '', timestamp: '' }],
+    messageToSend:[],
+    mqttConfig:{
+    	url: 'ws://13.229.167.76:1884/mqtt',
+    	topic: 'detection/rect'
+    },
+    mqttThemeName:{
+    	url: 'ws://13.229.167.76:1884/mqtt',
+    	topic: 'detection/rect'
+    },
+
     };
   },
   created() {
-    document.addEventListener('mouseup', this.handlerMouseUp);
-  },
-  beforeDestroy() {
-    document.removeEventListener('mouseup', this.handlerMouseUp);
+    this.isfse = false
+    // this.getList();
+    this.getListtd()
+  window.onresize = () => {
+  	      this.changeTableMaxHeight()
+  	    }
+  	    this.changeTableMaxHeight()
+
   },
   mounted() {
-    this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
-          //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
-          this.webRtcServer.connect('rtsp://admin:zxy123456@192.168.101.64:554/h264/ch1/main/av_stream')
-    this.loading = false
-    this.$nextTick(() => {
-      this.playerRef = this.$refs.video;
-    });
-  },
-  methods: {
-    // 通道点击
-    ishg(val,row){
-      this.isfse = false
-      this.numg = row
-      console.log(val,row)
-      this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
-            //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
-            this.webRtcServer.connect('rtsp://admin:zxy123456@192.168.101.64:554/h264/ch1/main/av_stream')
-      // this.getVideo()
-
-    },
-    getCanvasImage() {
-      if (this.playerRef) {
-        const videoEl = this.$refs.video;
-        const videoWidth = videoEl.videoWidth  /2  - 160;
-        const videoHeight = videoEl.videoHeight /2 -140;
-        this.canvasWidth = videoWidth;
-        this.canvasHeight = videoHeight;
-        const canvasEl = this.$refs.icanvas;
-        const ctx = canvasEl.getContext('2d');
-        ctx.drawImage(videoEl, 0, 0, videoWidth, videoHeight);
-        const tempImage = canvasEl.toDataURL('image/jpeg');
-        console.log(tempImage)
-        this.imageCanvas.src = tempImage;
-        const imgObj = new Image();
-        imgObj.src = tempImage;
-        this.tempImageCanvasList.push(imgObj);
-        this.showCutDialog = false;
-        this.showCutDialog = true;
-        this.playerRef.play();
-        this.$router.push({
-          path: '/shebecanshuhuabu',
-          query: {
-          	'src': JSON.stringify(tempImage) ,
-          }
-        })
+  this.toggleConnection()
+     // this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
+     //      //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
+     //      this.webRtcServer.connect('rtsp://admin:zxy123456@192.168.101.64:554/h264/ch1/main/av_stream')
+  	window.onresize = () => {
+  	          this.changeTableMaxHeight()
+  	        }
+  	        this.changeTableMaxHeight()
 
+		this.$nextTick(() => {
+		        this.initScroll()
+		    })
+  },
 
+   beforeDestroy() {
+      // this.destoryVideo()
+      if(WebVideoCtrl){
+        console.log(this.szDeviceIdentify)
+      	WebVideoCtrl.I_Logout(this.szDeviceIdentify)
+        WebVideoCtrl.I_StopAllPlay()
+      	WebVideoCtrl.I_DestroyPlugin()
+        WebVideoCtrl.I_Resize()
       }
     },
-    handlerCutPicture() {
-    // this.showCutDialog = true;
-      this.$nextTick(() => {
-        this.playerRef.pause(); // 截图的时候暂停视频播放
-        this.tempImageCanvasList = [];
-        this.getCanvasImage();
-        this.showCancelContent = false;
-      });
-
+  methods: {
+    /** 查询通道管理列表 */
+    getListtd() {
+      this.loading = true
+      let queryParams = {}
+      listChannelNumbernopa().then(response => {
+        this.channelNumberList = response.rows
+        if(this.channelNumberList.length !=0){
+                  let snghs = this.channelNumberList[0].videoAddress.split('@')
+                  let snghst = snghs[1].split(':')
+                  let snsgduan = snghst[1].split('/')
+                   console.log(snghs,snghst,snsgduan)
+                  let sgse={'ip':snghst[0],'duank':snsgduan[0],
+                  'account':this.channelNumberList[0].account,
+                  'password':this.channelNumberList[0].password,
+                  'port':this.channelNumberList[0].port
+                  }
+           this.getVideo(sgse)
+           WebVideoCtrl.I_ShowPlugin()
+           this.loading = false
+        }
+        // getWarnManage(this.$route.query.id).then(response => {
+          // this.form = response.data
+        this.loading = false
+      })
     },
-    showPenList() {
-      this.showPen = !this.showPen;
-      this.showCancelContent = false;
+    clickEnableDraw() {
+        WebVideoCtrl.I_SetDrawStatus(true).then(() => {
+            this.g_bEnableDraw = true;
+            // showOPInfo("启用绘制成功！");
+        }, (oError) => {
+            // showOPInfo("启用绘制失败！", oError.errorCode, oError.errorMsg);
+        });
     },
-    checkPen(pen) {
-      this.checkedPen = pen.code;
-      this.showCancelContent = false;
+    getdrawFn(){
+      this.isdisflag=!this.isdisflag;
+      if(this.isdisflag){
+        this.clickDisableDraw()
+      }else{
+        this.clickEnableDraw()
+      }
     },
-    // 清除
-    handlerClear() {
-      this.showCancelContent = false;
-      const canvasEl = this.$refs.icanvas;
-      const ctx = canvasEl.getContext('2d');
-      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-      ctx.drawImage(this.imageCanvas, 0, 0, this.canvasWidth, this.canvasHeight);
-      this.tempImageCanvasList = [];
+    // 禁用多边形绘制
+    clickDisableDraw() {
+        WebVideoCtrl.I_SetDrawStatus(false).then(() => {
+            this.g_bEnableDraw = false;
+            // showOPInfo("禁用绘制成功！");
+            this.clickAddSnapPolygon()
+        }, (oError) => {
+            // showOPInfo("禁用绘制失败！", oError.errorCode, oError.errorMsg);
+        });
     },
-    // 撤销
-    handlerCancel() {
-      this.showCancelContent = false;
-      this.tempImageCanvasList.pop();
-      const canvasEl = this.$refs.icanvas;
-      const ctx = canvasEl.getContext('2d');
-      // 撤销操作为清空当前canvas，并把存储的image重新绘制到canvas上。
-      ctx.clearRect(0, 0, this.canvasWidth, this.canvasWidth);
-      if (this.tempImageCanvasList.length === 0) {
-        ctx.drawImage(this.imageCanvas, 0, 0, this.canvasWidth, this.canvasHeight);
-      } else {
-        ctx.drawImage(this.tempImageCanvasList[this.tempImageCanvasList.length - 1], 0, 0, this.canvasWidth, this.canvasHeight);
-      }
+    clickGetSnapPolygon() {
+      var that=this;
+        WebVideoCtrl.I_GetSnapPolygonInfo(this.g_iWndIndex).then((szXml) => {
+            console.log('获取图形:', szXml);
+            that.getpoint(szXml)
+        });
     },
-    deleteImage(index) {
-      this.imageList.splice(index, 1);
+    //获取x，y轴
+    getpoint(xmlString){
+      var that=this;
+        const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(xmlString, "text/xml");
+
+            // 获取所有 SnapPolygon 节点
+            const polygonNodes = xmlDoc.querySelectorAll("SnapPolygon");
+             var newArr=[];
+             var arr1=JSON.parse(JSON.stringify(this.shapes))
+            // 提取每个多边形的 id 和坐标点
+            this.polygons = Array.from(polygonNodes).map((polygonNode) => {
+              const id = polygonNode.querySelector("id").textContent;
+              const pointNodes = polygonNode.querySelectorAll("point");
+
+              const points = Array.from(pointNodes).map((pointNode) => ({
+                x: pointNode.querySelector("x").textContent,
+                y: pointNode.querySelector("y").textContent,
+              }));
+              var newobj={
+                id:id,
+                points:points
+              }
+              newArr.push(newobj)
+              // return { id, points };
+            });
+           this.shapes = arr1.map(item1 => {
+             const matchedItem = newArr.find(item2 => item2.id == item1.id);
+             return {
+               id: item1.id,
+               points: matchedItem ? matchedItem.points : item1.points
+             };
+           });
+        // this.shapes=JSON.parse(JSON.stringify(newArr))
+        this.messageToSend = this.shapes
+        this.sendMessage()
+        console.log(this.shapes)
     },
-    // 查看原图
-    openOuter(source) {
-      this.curSourceImg = source.src;
-      this.showImgDialog = true;
+    toggleConnection(){
+      if (this.isConnected) {
+        // 断开连接
+        client.end()
+        this.isConnected= false
+        this.connectionStatus = 'Disconnected'
+        return
+      }
+
+      // 建立连接
+      this.connecting = true
+      try {
+        client= mqtt.connect(this.mqttConfig.url, {
+          clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
+          keepalive: 60,
+          clean: true,
+          connectTimeout: 4000,
+          reconnectPeriod: 1000
+        })
+        client.on('connect', () => {
+          this.isConnected = true
+          this.connectionStatus= 'Connected'
+          this.connecting = false
+          console.log(3)
+          // 订阅主题
+          client.subscribe(this.mqttConfig.topic, (err) => {
+            if (err) {
+              console.error('Subscribe error:', err)
+            }else{
+               console.log('成功订阅 detection/rect 主题！')
+            }
+
+          })
+        })
+        client.on('message', (topic, message) => {
+          // 接受信息
+          console.log(topic,message)
+          this.messages.unshift({
+            type: 'received',
+            content: message.toString(),
+            timestamp: new Date().toLocaleTimeString()
+          })
+        })
+        client.on('error', (err) => {
+          console.error('MQTT Error:', err)
+          this.connectionStatus= 'Error'
+          this.connecting = false
+        })
+      } catch (error) {
+        console.error('Connection error:', error)
+        this.connectionStatus= 'Error'
+        this.connecting = false
+      }
     },
-    confirmEdit() {
-      const canvasEl = this.$refs.icanvas;
-      const obj = {};
-      obj.src = canvasEl.toDataURL('image/jpeg');
-      obj.sourceType = 'image';
-      obj.width = `${this.canvasWidth / 4}px`;
-      obj.height = `${this.canvasHeight / 4}px`;
-      this.imgContentStyle = {
-        width: obj.width,
-        height: obj.height,
-      };
-      this.imageList.push(obj);
-      this.showCutDialog = false;
-      this.playerRef.play();
+    sendMessage(){
+      if (!client || !this.messageToSend) return
+      this.messageToSend = JSON.stringify(this.messageToSend)
+      console.log(this.messageToSend)
+      client.publish(this.mqttConfig.topic, this.messageToSend)
+      this.messages.unshift({
+        type: 'sent',
+        content: this.messageToSend,
+        timestamp: new Date().toLocaleTimeString()
+      })
+      this.messageToSend = []
     },
-    cancelEdit() {
-      this.showCutDialog = false;
-      this.playerRef.play();
+    // 添加图形，最多不超过16个图形
+    clickAddSnapPolygon() {
+      var that=this;
+        if (!this.g_bEnableDraw) {
+            return;
+        }
+        var shapes=JSON.parse(JSON.stringify(this.shapes))
+        let szId = 1; // 默认从 1 开始
+        if(shapes&&shapes.length>0){
+          const ids  = shapes.map(item => item.id).sort((a, b) => a - b);
+          for (const id of ids) {
+            if (id > szId) {
+              // 如果当前 id > szId，说明 szId 未被使用
+              break;
+            }
+            szId = Number(id) + 1; // 否则，继续检查下一个
+          }
+        }
+        if (!/^[1-9]\d*$/.test(szId)) {
+            alert("图形ID只能为正整数！");
+            return
+        }
+        if (Number(szId) > 32) {
+            alert("图形ID范围1-32！");
+            return
+        }
+        console.log(szId)
+        // var szName = encodeString($("#snapName").val());
+        var szName = '';
+        var szInfo={
+
+        }
+        var szInfo = "<?xml version='1.0' encoding='utf-8'?>";
+        szInfo += "<SnapPolygonList>";
+        szInfo += "<SnapPolygon>";
+        szInfo += "<id>" + szId + "</id>";          // [1, 32]
+        szInfo += "<polygonType>0</polygonType>"; //如果想绘制多边形，polygonType指需要改为1
+        szInfo += "<PointNumMax>17</PointNumMax>";  // [MinClosed, 17]
+        szInfo += "<MinClosed>4</MinClosed>";       // [4, 17]
+        szInfo += "<tips>#" + szId + "#" + szName + "</tips>";
+        szInfo += "<isClosed>false</isClosed>";
+        szInfo += "<color><r>0</r><g>255</g><b>0</b></color>";
+        szInfo += "<pointList/>";
+        szInfo += "</SnapPolygon>";
+        szInfo += "</SnapPolygonList>";
+
+        WebVideoCtrl.I_SetSnapPolygonInfo(this.g_iWndIndex, szInfo).then(() => {
+            // showOPInfo("添加图形成功！");
+            var obj={
+              id:szId,
+              points:[]
+            }
+            if(this.shapes&&this.shapes.length){
+              this.shapes.splice(Number(szId)-1,0,obj)
+            }else{
+              this.shapes.push(obj)
+            }
+        });
+        WebVideoCtrl.I_SetSnapDrawMode(this.g_iWndIndex, 2);
     },
-    handlerMouseDown(e) {
-      this.isMouseDown = true;
-      // 记录鼠标点下的坐标
-      this.coordinate.X = e.offsetX;
-      this.coordinate.Y = e.offsetY;
-      this.showPenBtn = false;
-      this.showCancelContent = false;
+    //删除图形
+    clickDelSnapPolygon(szId,idx) {
+        if (!this.g_bEnableDraw) {
+            return;
+        }
+
+        var aShapes = [];
+        aShapes.push({
+            polygonType: 0,
+            id: szId
+        });
+        this.shapes.splice(idx,1)
+        WebVideoCtrl.I_ClearSnapInfo(this.g_iWndIndex, aShapes);
     },
-    handlerMouseMove(e) {
-      if (this.isMouseDown) {
-        this.coordinate.X1 = e.offsetX;
-        this.coordinate.Y1 = e.offsetY;
-        this.showPenBtn = false;
-        this.drawLine();
-        this.flag++;
-      }
+    // 清空图形
+    clickDelAllSnapPolygon() {
+        if (!this.g_bEnableDraw) {
+            return;
+        }
+        WebVideoCtrl.I_ClearSnapInfo(this.g_iWndIndex).then(() => {
+            // showOPInfo("清空图形成功！");
+             this.shapes=[];
+        }, (oError) => {
+            // showOPInfo("清空图形失败！", oError.errorCode, oError.errorMsg);
+        });
     },
-    handlerMouseUp() {
-      this.isMouseDown = false;
-      this.showPenBtn = true;
-      this.showCancelContent = true;
-      const canvasEl = this.$refs.icanvas;
-      if (this.flag !== 0 && canvasEl) {
-        const imgObj = new Image();
-        imgObj.src = canvasEl.toDataURL('image/jpeg');
-        this.tempImageCanvasList.push(imgObj);
-        this.flag = 0;
+
+
+
+    // 通道点击
+    ishg(val){
+      this.isfse = false
+      if(WebVideoCtrl){
+        console.log(this.szDeviceIdentify)
+        this.clickDelAllSnapPolygon()
+      	WebVideoCtrl.I_Logout(this.szDeviceIdentify)
+        WebVideoCtrl.I_StopAllPlay()
+      	WebVideoCtrl.I_DestroyPlugin()
+        WebVideoCtrl.I_Resize()
       }
+      let snghs = val.videoAddress.split('@')
+             let snghst = snghs[1].split(':')
+             let snsgduan = snghst[1].split('/')
+              console.log(snghs,snghst,snsgduan)
+             let sgse={'ip':snghst[0],'duank':snsgduan[0],
+             'account':val.account,
+             'password':val.password,
+             'port':val.port
+             }
+      this.getVideo(sgse)
+      WebVideoCtrl.I_ShowPlugin()
+      // this.clickStartRealPlay('192.168.101.64', '80',1, 0, 1);
+
     },
-    drawLine() {
-      const {
-        X, Y, X1, Y1,
-      } = this.coordinate;
-      const canvasEl = this.$refs.icanvas;
-      const ctx = canvasEl.getContext('2d');
-      if (this.flag > 0) {
-        ctx.beginPath();
-      }
-      ctx.moveTo(X, Y); // 起点
-      ctx.lineWidth = 4; // 定义画笔宽度
-      ctx.strokeStyle = this.checkedPen || 'white';
-      ctx.lineTo(X1, Y1);
-      ctx.stroke();
-      this.coordinate.X = X1;
-      this.coordinate.Y = Y1;
+
+
+	  init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
+	        setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
+	          var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
+			  this.isshiwa = true
+	          if (flvjs.isSupported()) {
+	          //因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
+	            if (this.player !== null) {
+	              this.player.pause();
+	              this.player.unload();
+	              this.player.detachMediaElement();
+	              this.player.destroy();
+	              this.player = null;
+	            }
+	            this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
+	              {
+	                type: "flv",
+	                url: val, //你的url地址
+	                isLive: true, //数据源是否为直播流
+	                hasAudio: false, //数据源是否包含有音频
+	                hasVideo: true, //数据源是否包含有视频
+	                enableStashBuffer: true, //是否启用缓存区
+	              },
+	              {
+	                enableWorker: false, //不启用分离线程
+	                enableStashBuffer: false, //关闭IO隐藏缓冲区
+	                autoCleanupSourceBuffer: true, //自动清除缓存
+	                lazyLoad: false,
+	              }
+	            );
+				this.isshoe = true
+	            this.player.attachMediaElement(videoElement); //放到dom中去
+
+	            //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
+	            // setTimeout(this.player.play(), 48000);
+				setTimeout(() =>{
+					//到时间时只执行一次就停止
+					this.player.load();//准备完成
+					this.player.play()
+					console.log('播放')
+				},900)
+	          }
+	        }, 500);
+	      },
+
+	  createVideo() {
+	        if (flvjs.isSupported()) {
+				console.log(1)
+	          var videoElement = document.getElementById('myFlvVideo')
+			  console.log(videoElement,flvjs)
+	          this.flvPlayer = flvjs.createPlayer(
+	            {
+	              type: 'application/x-mpegURL',
+	              isLive: true,
+	              hasAudio: false,
+	              url:'https://stream1.freetv.fun/86d463c0006da643e45e26b34875df87059dcba13e69d0a5471b185793c122a2.m3u8'
+	            },
+	            {
+	              cors: true, // 是否跨域
+	              enableWorker: false, // 是否多线程工作
+	              enableStashBuffer: false, // 是否启用缓存
+	              stashInitialSize: 400, // 缓存大小(kb)  默认384kb
+	              autoCleanupSourceBuffer: true // 是否自动清理缓存
+	            }
+	          )
+	          this.flvPlayer.attachMediaElement(videoElement)
+	          this.flvPlayer.load()
+	          this.flvPlayer.play()
+			  console.log(1244)
+	          // 报错重连
+	          this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
+	            console.log('errorType:', errType)
+	            console.log('errorDetail:', errDetail)
+	            if (this.flvPlayer) {
+	              this.destoryVideo()
+	              this.createVideo()
+	            }
+	          })
+	        }
+
+			console.log(this.flvPlayer.play())
+	      },
+	      destoryVideo() {
+	        this.player.pause()
+	        this.player.unload()
+	        this.player.detachMediaElement()
+	        this.player.destroy()
+	        this.player = null
+	      },
+
+	  initScroll() {
+	    	  // 给内层盒子设置宽度，不设置宽度的话无法滚动
+	    	  // let width = this.goods.length * 60
+	    	  // // 如果有外边距，可以这样写。需要去掉最后一个元素的外边距，在后面减一下
+	    	  // let width = this.goodslength * (60 + 10) - 10
+			  let width = 6 * (200 + 10) - 10
+	        // this.$refs.content.style.width = width + 'px'
+	        this.$nextTick(()=>{
+	          if(!this.Scroll) {
+	            this.Scroll = new Bscroll(this.$refs.wrapper,{
+	              click: true,      // 配置允许点击事件
+	              scrollX: true,    // 开启横向滚动
+	              eventPassthrough: 'vertical',  // 当设置 eventPassthrough 为 'vertical' 的时候，scrollY 无效
+				  mouseWheel: true,
+				  scrollbar: { // 滚动条, 要加相对位置
+				              fade: true
+				            }
+	            })
+	          } else {
+	            this.Scroll.refresh()     // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
+	          }
+	        })
+	      },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+	  this.opens = false;
+      this.reset();
     },
-    handlerVideo() {
-      this.showRecord = true;
-      this.startTime = new Date().getTime();
-      this.$nextTick(() => {
-        this.drawRecord();
-        this.looper();
-      });
+    // 表单重置
+    reset() {
+      this.form = {
+		receptionId:undefined,
+        receptionPhone:undefined,
+        // postSort: 0,
+        // status: "0",
+        receptionName: undefined
+      };
+      this.resetForm("form");
     },
-    drawRecord() {
-      const recordCanvasEl = document.getElementById('vcanvas');
-      this.recorder = RecordRTC(recordCanvasEl, {
-        type: 'cancas',
+
+	iszheg(event){
+	 console.log(event);
+
+
+	 // 校验身份证：
+	 console.log(reg.test(this.form.idCard),23741)
+	 		if ( reg.test(this.form.idCard)|| _IDre15.test(this.form.idCard)) {
+	 			// this.idea();
+	 			this.go(this.form.idCard);
+	 			// callback()
+	 		} else {
+	   if(ncjsle.test(this.form.idCard) || nhyeli.test(this.form.idCard)){
+	      console.log(3)
+	   }else{
+	     if(gnse.test(this.form.idCard)  ){
+	         console.log(4)
+	     }else{
+	       if(tw.test(this.form.idCard) || twe.test(this.form.idCard)){
+	         console.log(5)
+	       }else{
+	         this.$message.error('证件格式不正确');
+	       }
+	     }
+
+	   }
+	 		}
+	},
+	erw(row){
+		this.$router.push({
+		  path: '/reny/ewm',
+		  query:{
+			   'tenantId':row.investigateTableId
+			  }
+		})
+	},
+
+	hussar_17Click(val) {
+	        const _this = this
+	        var url =process.env.VUE_APP_BASE_API + 'pages/index/index?id=' + val.investigateTableId;
+			 console.log(url,this.$refs.canvas,6)
+			this.opent = true
+	        QRCode.toCanvas(
+	                      canvas,
+	                      url,//生成二维码的数据
+	                      {width: 100, height:100, margin: 1.5},//margin调整二维码的白边大小
+	                      function (error) {
+	                        if (error) {
+	                          console.log(error);
+	                        }
+	                      }
+	                    );
+
+	        // console.log(qrcode,987)
+	      },
+	/** 成绩_子添加按钮操作 */
+	handleAddScoreDataDetails() {
+
+	  let obj = {};
+	  obj.duty = "";
+	  obj.idCard = "";
+	  obj.phonenumber = "";
+	  obj.userName = "";
+	  this.scoreDataDetailsList.push(obj);
+	  console.log(this.scoreDataDetailsList)
+	},
+	/** 成绩_子删除按钮操作 */
+	handleDeleteScoreDataDetails() {
+	  if (this.checkedScoreDataDetails.length == 0) {
+	    this.$modal.msgError("请先选择要删除的数据");
+	  } else {
+	    const scoreDataDetailsList = this.scoreDataDetailsList;
+	    const checkedScoreDataDetails = this.checkedScoreDataDetails;
+	    this.scoreDataDetailsList = scoreDataDetailsList.filter(function(item) {
+	      return checkedScoreDataDetails.indexOf(item.index) == -1
+	    });
+	  }
+	},
+	/** 复选框选中数据 */
+	handleScoreDataDetailsSelectionChange(selection) {
+	  this.checkedScoreDataDetails = selection.map(item => item.index)
+	},
+	/** 成绩_子序号 */
+	rowScoreDataDetailsIndex({ row, rowIndex }) {
+	  row.index = rowIndex + 1;
+	},
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const postIds = row.recordId || this.ids;
+      delReservat(postIds).then(response => {
+       this.$modal.msgSuccess("操作成功");
+        this.getList();
       });
-      this.recorder.startRecording();
+
+      // this.$modal.confirm('是否确认删除数据项？').then(function() {
+      //   return delPost(postIds);
+      // }).then(() => {
+      //   this.getList();
+      //   this.$modal.msgSuccess("删除成功");
+      // }).catch(() => {});
     },
-    getVideoFile() {
-      this.recorder.stopRecording(() => {
-        const blob = this.recorder.getBlob();
-        const url = URL.createObjectURL(blob);
-        const obj = {
-          sourceType: 'video',
-          src: url,
-          file: blob,
-        };
-        console.log(obj);
-        this.imageList.push(obj);
+    handleDeletehx(row) {
+      const postIds = row.reservatId || this.ids;
+      let nhg={}
+      nhg.reservatId = postIds
+      delReservathx(nhg).then(response => {
+       this.$modal.msgSuccess("操作成功");
+        this.getList();
       });
+
+      // this.$modal.confirm('是否确认删除数据项？').then(function() {
+      //   return delPost(postIds);
+      // }).then(() => {
+      //   this.getList();
+      //   this.$modal.msgSuccess("删除成功");
+      // }).catch(() => {});
     },
-    looper() {
-      const nowTime = new Date().getTime();
-      if ((nowTime - this.startTime) / 1000 < 11) {
-        this.videoTimer = window.setTimeout(this.looper, 0);
-      } else {
-        clearTimeout(this.videoTimer);
-        this.showRecord = false;
-        this.getVideoFile();
-      }
-      const videoEl = this.playerRef.$refs.video;
-      const recordCanvasEl = this.$refs.recordCanvas;
-      html2canvas(videoEl).then(() => {
-        const ctx = recordCanvasEl.getContext('2d');
-        ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-        ctx.drawImage(videoEl, 0, 0, this.canvasWidth, this.canvasHeight);
-      });
+	// 发送短信
+	handleUpdatefas(row){
+		updateFs(row).then(response => {
+		 this.$modal.msgSuccess("发送成功");
+		  // this.getList();
+		});
+	},
+	handleDeletegx(row){
+		updateGx(row).then(response => {
+		  this.$modal.msgSuccess("发送成功");
+		  // this.getList();
+		});
+	},
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/reservat/export', {
+        ...this.queryParams
+      }, `预约人员.xlsx`)
+    },
+		// 获取屏幕高度
+		showFilterForm () {
+		      this.filterActive = !this.filterActive
+		      this.changeTableMaxHeight()
+		    },
+		    changeTableMaxHeight () {
+		      let height = document.body.offsetHeight // 网页可视区域高度
+		      // if (this.filterActive) {
+		      //   this.tableMaxHeight = height - 320
+		      // } else {
+		        this.tableMaxHeight = height - 350
+		      // }
+		      console.log(height)
+		    },
+    // 播放摄像头
+    getVideo(row) {
+    	var that=this;
+       this.isfse  = true
+       console.log(row)
+    	this.initVideoPlay(row.ip, row.port, row.account, row.password,'divPlugin')
+    },
+    // 有插件
+    initVideoPlay(ip, port, username, password,id) {
+    	var that = this;
+    	var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
+    	var g_oLocalConfig = null; //本地配置
+    	// let ip = this.szIP //硬盘录像机ip
+    	// let port = this.szPort //默认为80端口
+    	// let username = this.szUsername //账号：
+    	// let password = this.szPassword // 密码
+    	var iRtspPort = ''
+    	// 1.初始化插件参数及插入插件
+    	WebVideoCtrl.I_InitPlugin({
+    		bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
+    		iWndowType: 1,
+    		bDebugMode: true,
+    		cbSelWnd: function(xmlDoc) {
+    			g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
+    			const szInfo = "当前选择的窗口编号：" + g_iWndIndex;
+    			this.g_iWndIndex = g_iWndIndex;
+    			console.log(szInfo, "szInfo");
+    		},
+    		cbDoubleClickWnd: function(iWndIndex, bFullScreen) {
+    			let szInfo = "当前放大的窗口编号：" + iWndIndex;
+    			if (!bFullScreen) {
+    				szInfo = "当前还原的窗口编号：" + iWndIndex;
+    			}
+    			// console.log(szInfo, "szInfo");
+    		},
+    		cbEvent: function(iEventType, iParam1, iParam2) {
+    			if (2 == iEventType) {
+    				// 回放正常结束
+    				console.log("窗口" + iParam1 + "回放结束！");
+    			} else if (-1 == iEventType) {
+    				console.log("设备" + iParam1 + "网络错误！");
+    			} else if (3001 == iEventType) {
+    				clickStopRecord(g_szRecordType, iParam1);
+    			}
+    		},
+    		//2.登录摄像头
+    		cbInitPluginComplete: function() {
+    			const oLiveView = {
+    				iProtocol: 1, // protocol 1：http, 2:https
+    				szIP: ip, // protocol ip
+    				szPort: port, // protocol port
+    				szUsername: username, // device username
+    				szPassword: password, // device password
+    				iStreamType: 1, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
+    				iChannelID: 1, // channel no
+    				bZeroChannel: false, // zero channel
+    			};
+    			// var swidth=Number((that.width*Number(that.scale))).toFixed(2)
+    			// var sheight=Number((that.height*Number(that.scale))).toFixed(2)
+    			// that.swidth=swidth
+    			// that.sheight=sheight
+    			WebVideoCtrl.I_InsertOBJECTPlugin(id).then(
+    				() => {
+    					// setTimeout(function(){
+    					// 	WebVideoCtrl.I_Resize(swidth,sheight)
+    					// },300)
+    					WebVideoCtrl.I_Login(
+    						oLiveView.szIP,
+    						oLiveView.iProtocol,
+    						oLiveView.szPort,
+    						oLiveView.szUsername,
+    						oLiveView.szPassword, {
+    							timeout: 3000,
+    							async: false,
+    							success: function(xmlDoc) {
+    								console.log(" 登录成功！");
+    								let a = ip
+    								let b = port
+    								setTimeout(function() {
+    									//延迟方法
+    									setTimeout(function() {
+    										//调用预览摄像头这里可以循环创建
+    										that.clickStartRealPlay(a, b,1, 0, 1);
+    										// that.clickStartRealPlay(a, b, 1, 1,2);
+    										// that.clickStartRealPlay(a, b, 1, 2,3);
+    										// clickStartRealPlay(a,b, 1, 3, 4);
+    										// clickStartRealPlay(a,b, 1, 4, 5);
+    										// clickStartRealPlay(a,b, 1, 5, 6);
+    										// clickStartRealPlay(a,b, 1, 6, 7);
+    										// clickStartRealPlay(a,b, 1, 7, 8);
+    									}, 1000);
+
+
+    									setTimeout(function() {
+    										// 获取通道 (如果多个摄像头需要获取多个通道需要调用)
+    										// getChannelInfo(a);
+    										//获取端口 （在这里获取RTSP 端口号 预览时传入）
+    										getDevicePort(a);
+    									}, 10)
+
+    								}, 10);
+    							},
+    							error: function(oError) {
+    								console.log(" 登录失败！", oError);
+    							},
+    						}
+    					);
+    					// 检查插件是否最新
+    					WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
+    						if (bFlag) {
+    							alert(
+    								"检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
+    							);
+
+    						}
+    					});
+    				},
+    				() => {
+    					alert(
+    						"插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
+    					);
+
+    				}
+    			);
+
+    		},
+    	});
+    	// 3.获取通道
+    	function getChannelInfo(a) {
+    		var szDeviceIdentify = a,
+    			oSel = null; //通道列表
+    		if (null == szDeviceIdentify) {
+    			return;
+    		}
+
+    		// 模拟通道 有
+    		WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
+    			success: function(xmlDoc) {
+    				var oChannels = $(xmlDoc).find("VideoInputChannel");
+
+    				$.each(oChannels, function(i) {
+    					var id = $(this).find("id").eq(0).text(),
+    						name = $(this).find("name").eq(0).text();
+    					if ("" == name) {
+    						name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+    					}
+
+    					// console.log(id + "通道id是")
+    					// console.log(name + "通道name是")
+    				});
+    				console.log(szDeviceIdentify + " 获取模拟通道成功！");
+    			},
+    			error: function(oError) {
+    				console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
+    			}
+    		});
+    		// 数字通道
+    		WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
+    			success: function(xmlDoc) {
+    				var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+
+    				$.each(oChannels, function(i) {
+    					var id = $(this).find("id").eq(0).text(),
+    						name = $(this).find("name").eq(0).text(),
+    						online = $(this).find("online").eq(0).text();
+    					if ("false" == online) { // 过滤禁用的数字通道
+    						return true;
+    					}
+    					if ("" == name) {
+    						name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+    					}
+    				});
+    				console.log(szDeviceIdentify + " 获取数字通道成功！");
+    			},
+    			error: function(oError) {
+    				console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
+    			}
+    		});
+    		// 零通道
+    		WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
+    			success: function(xmlDoc) {
+    				var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+
+    				$.each(oChannels, function(i) {
+    					var id = $(this).find("id").eq(0).text(),
+    						name = $(this).find("name").eq(0).text();
+    					if ("" == name) {
+    						name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
+    					}
+    					if ("true" == $(this).find("enabled").eq(0).text()) { // 过滤禁用的零通道
+
+    					}
+    				});
+    				console.log(szDeviceIdentify + " 获取零通道成功！");
+    			},
+    			error: function(oError) {
+    				console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
+    			}
+    		});
+    	};
+
+    	//4.获取端口
+    	function getDevicePort(a) {
+    		var szDeviceIdentify = a;
+
+    		if (null == szDeviceIdentify) {
+    			return;
+    		}
+    		WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
+    			// console.log(oPort.iDevicePort + "iDevicePort的值是")
+    			// console.log(oPort.iRtspPort + "iRtspPort的值是")
+    			console.log(szDeviceIdentify + " 获取端口成功！");
+    			iRtspPort = oPort.iRtspPort
+    			that.iRtspPort = iRtspPort
+    		}, (oError) => {
+    			var szInfo = "获取端口失败！";
+    			console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
+    		});
+    	};
     },
-    handlerUpLoad() {
+    // 5.开始预览
+    clickStartRealPlay(szIP, szPort, iStreamType, iWndIndex, iChannelID) {
+      var that=this;
+    	var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
+    		szDeviceIdentify = szIP + "_" + szPort, //ip
+    		iChannelID = iChannelID,
+    		bZeroChannel = false,
+    		iPort = this.iRtspPort,
+    		szInfo = "";
+    	iStreamType = iStreamType;
+    	if (null == szDeviceIdentify) {
+    		return null;
+    	}
+    	this.szDeviceIdentify = szDeviceIdentify;
+    	var startRealPlay = function() {
+    		WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
+    			iStreamType: iStreamType,
+    			iChannelID: iChannelID,
+    			bZeroChannel: bZeroChannel,
+    			iWndIndex: iWndIndex, //要播放的窗口
+    			iPort: iPort, //如果多个摄像头需要必填 （RTSP 端口号）
+    			success: function() {
+    				szInfo = "开始预览窗口" + iWndIndex + "成功！";
+    				console.log(szDeviceIdentify + " " + szInfo);
+    			},
+    			error: function(oError) {
+    				console.log(szDeviceIdentify + " 开始预览窗口" + iWndIndex + "失败！", oError
+    					.errorCode, oError.errorMsg);
+    			}
+    		});
+    	};
 
+    	if (oWndInfo != null) { // 已经在播放了，先停止
+    		WebVideoCtrl.I_Stop({
+    			success: function() {
+    				startRealPlay();
+    			}
+    		});
+    	} else {
+    		startRealPlay();
+    	}
     },
-  },
+  }
 };
 </script>
+
 <style lang="scss">
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s
-}
-.fade-enter, .fade-leave-to{
-  opacity: 0;
-}
-@keyframes showImage {
-  from {
-    opacity: 0;
-    transform: scale(0.2);
-  }
-  to{
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-.cut-picture {
-  padding: 15px;
-  .source-content {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .cut-video-content {
-    width: 800px;
-    height: 450px;
-    position: relative;
-  }
-  .image-list {
-    width: calc(100% - 800px);
-    height: 450px;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .image-detail {
-      width: 100%;
-      position: relative;
-      margin-bottom: 15px;
-      margin-right: 20px;
-      .icon-delete {
-        position: absolute;
-        font-size: 14px;
-        right: 5px;
-        margin-top: 8px;
-        z-index: 2;
-        color: #fff;
-        cursor: pointer;
-        background-color: rgba($color: #182752, $alpha: 0.8);
-        border-radius: 50%;
-      }
-      .source-img {
-        cursor: pointer;
-      }
+	.isjses{
+		.el-tabs--left .el-tabs__nav-wrap.is-left::after{
+			width:6px;
+		}
+		.el-tabs--left .el-tabs__active-bar.is-left,{
+			width:6px;
+		}
+	}
+	.ingaqe{
+		.el-input--medium{
+			width:100%;
+		}
+	}
+	.nhgrls{
+		.el-dialog__body{
+			padding: 0;
+		}
+	}
+  .hyr{
+    span{
+      text-decoration:underline;
     }
   }
-  .button-content {
-    margin-top: 20px;
-    padding: 15px;
+</style>
+<style scoped lang="scss">
+	.nghwgq{
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: 90px;
+		div{
+			color:#aaa;
+		}
+	}
+	.ihgswq{
+		// width:100%;
+		// overflow-x: hidden;
+		// margin-top: 30px;
+	}
+	.fijge{
+		// width: 110%;
+		display: flex;
+		display: -webkit-flex;
+		justify-content: space-between;
+		.shotw{
+			position: relative;
+			// width:32%;
+			width: 238px;
+			height: 140px;
+			margin-left: 0;
+			margin-right: 20px;
+			margin-bottom: 15px;
+			img{
+				height: 100%;
+				cursor:pointer;
+			}
+		  p{
+			  // bottom:-10px;
+			  margin: 0;
+			  font-weight: bold;
+			  font-size: 16px;
+			   padding: 5px  10px;
+			   cursor:pointer;
+		  }
+		  .iges{
+			position: absolute;
+			top:50%;
+			left:50%;
+			width:30px;
+			height: 30px;
+			transform: translate(-50%,-50%);
+			cursor:pointer;
+		  }
+		}
+	}
+	.nhgwesvq{
+		width:1610px !important;
+	}
+	.shotw{
+		position: relative;
+		margin-left: -20px;
+		margin-right: -20px;
+		img{
+			width:100%;
+			height: 80vh;
+		}
+	  p{
+	     position: absolute;
+		 bottom: 0;
+		 left:0;
+		 background-color: rgba(0, 0, 0, .5);
+		 width: 100%;
+		 padding: 13px  5px;
+		 color:#fff;
+		 font-weight: bold;
+		 font-size: 18px;
+	  }
+	  .p{
+		  top:0px;
+		  height: 60px;
+		  margin: 0;
+		  padding-left: 20px;
+	  }
+	}
+
+
+	.ksfpo{
+		background-color: #3464EB;
+		padding: 6px 12px;
+		border-radius: 4px ;
+		color:#fff;
+		cursor:pointer;
+	}
+	.ksfpok{
+		background-color: #FFFFFF;
+		padding: 5px 11px;
+		border-radius: 4px;
+		color:#3464EB;
+		border: 1px solid #3464EB;
+		margin-left: 10px;
+		cursor:pointer;
+	}
+	.ksfpofg{
+		background-color: #75DB75;
+		padding: 5px 11px;
+		border-radius: 4px;
+		color:#FFFFFF;
+		border: 1px solid #75DB75;
+		margin-left: 10px;
+		cursor:pointer;
+	}
+  .iuer{
     display: flex;
-  }
-  .dialog-content {
-    .el-dialog__body {
-      position: relative;
-      padding: 20px;
-      .icon-pen {
-        position: absolute;
-        right: 0;
-        top: 30px;
-        &-image {
-          height: 40px;
-          cursor: pointer;
-        }
-        &-content {
-          width: 100%;
-          display: flex;
-          flex-direction: column;
-        }
-        &-color {
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          margin: auto;
-          margin-bottom: 10px;
-          cursor: pointer;
-          &.is-active {
-            border: 4px solid #ddd;
-            box-sizing: content-box;
-          }
-        }
-      }
-      .cancel-content {
-        position: absolute;
-        bottom: 30px;
-        // left: 50%;
-        transform: translateX(-50%);
-        display: flex;
-        justify-content: space-around;
-        .button {
-          margin-right: 15px;
-          padding: 8px 15px;
-          border-radius: 8px;
-          background-color: rgba($color: #000000, $alpha: 0.3);
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          span {
-            color: #fff;
-            height: 22px;
-            line-height: 26px;
-          }
-        }
+    justify-content: space-between;
+    align-items: center;
+    .ite{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      p{
+        cursor:pointer;
+        margin: 0;
+        font-size: 15px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color:#666666;
+        padding: 4px 12px;
+        background: #Fff;
+        border-radius: 4px;
+        margin-right: 20px;
+		position: relative;
       }
-    }
-  }
-  .source-dialog {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: rgba($color: #000000, $alpha: 0.5);
-    z-index: 2005;
-    &__body {
-      position: absolute;
-      top: 20%;
-      left: 50%;
-      transform: translateX(-50%);
-      .icon-delete {
-        position: absolute;
-        right: -6px;
-        top: -6px;
-        z-index: 2006;
-        cursor: pointer;
-        color: #fff;
-        background-color: rgba($color: #182752, $alpha: 0.8);
-        border-radius: 50%;
+      .actt{
+        background: #fff;
+        // border-bottom: 3px solid #5974E0;
+        // border-radius: 0;
+		// border-bottom-right-radius: 4px;
+        color: #5974E0;
       }
-      animation: showImage 1s 1;
-      animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);
+	  .actt{
+		    &::after {
+		          content: "";
+		          width: 40%;
+		          height: 5px;
+				  border-radius: 3px;
+		          transform: translate(-50%);
+		          background-color: #5974E0;
+		          position: absolute;
+		          left: 50%;
+		          bottom:-3px;
+		        }
+
+	  }
+
     }
   }
-}
-.acti{
-// background: #E7F1EE;
-  font-weight: 700;
-  div{
-    color: #03BF8A !important;
+  .lqw{
+    padding: 0 10px;
+    margin: 0;
+    margin-bottom: 20px;
   }
+.nhgel{
+  height: 170px;
+  background-color: #313b61;
+  width: 100%;
+  position: absolute;
+  top:0;
+  left:0;
+  z-index: 0;
 }
-</style>
-<style>
-.el-menuscrollbar .el-scrollbar__wrap {
-    overflow-x: hidden;
+	.app-container{
+		background-color: #f3f4f6;
+		padding-top: 10px;
+		height: 180vh;
+
+	}
+	.ntgs{
+	position: relative;
+		// background-color: #fff;
+		padding: 5px;
+		// border-radius: 5px;
+		padding-top: 10px;
+	     padding: 10px 20px;
+		.pagination-container{
+			height: 50px;
+		}
+	}
+	.nghfs{
+	position: relative;
+		background-color: #fff;
+		padding-top: 18px !important;
+		padding: 5px;
+		// border-radius: 5px;
+		// margin-bottom: 20px;
+	}
+	.ksf{
+		img{
+			width:100%;
+			height: 100%;
+		}
+	}
+   .ingwfaq{
+	   font-weight: bold;
+	   font-size: 16px;
+   }
+.dflex{display: flex;}
+.dflext{display: flex;align-items: flex-start;}
+.drawings-list{width: 100%;flex: 0 0 auto;padding-left: 10px;line-height:36px ;
+  .delimg{width: 15px;height: 15px;margin-left: 5px;}
+  .txt{font-size: 12px;padding-left: 5px;flex: 1;}
+  .tflex{display: flex;align-items: center;}
 }
-.el-scrollbar__thumb {
-  background-color: #3e97f6;
+.disbtn{display: flex;align-items: center;flex: 0 0 auto;min-height: 34px;cursor: pointer;
+  img{width: 14px;height: 14px;margin-right: 10px;}
+  font-weight: 500;
+  font-size: 14px;
+  color: #444444;
 }
 </style>

ruoyi-ui/src/views/shipinggaoj/shebei/index.vue

@@ -230,6 +230,11 @@
                      </el-form-item>
           </el-col>
           <el-col :span="12">
+            <el-form-item label="设备ip" prop="equipmentIp">
+                      <el-input v-model="form.equipmentIp"  placeholder="请输入内容" />
+                    </el-form-item>
+          </el-col>
+          <el-col :span="24">
             <el-form-item label="备注" prop="remark">
                       <el-input v-model="form.remark"  placeholder="请输入内容" />
                     </el-form-item>
@@ -361,7 +366,8 @@ export default {
             createTime: null,
             updateBy: null,
             updateTime: null,
-            remark: null
+            remark: null,
+            equipmentIp:null
           }
           this.resetForm("form")
         },