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

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="4">
      <div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 95vh;">
        <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">盒子管理</p>
          <div class=" infinite-list" style="overflow:auto;height:  93vh" >
            <div class="head-container">
              <el-input
                v-model="equipmentName"
                placeholder="请输入设备名称"
                clearable
                size="small"
                @blur="nsdfse"
                prefix-icon="el-icon-search"
                style="margin-bottom: 20px"
              />
            </div>
            <div class="head-container">
              <el-tree
                :data="deptOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                default-expand-all
                highlight-current
                @node-click="ishg"
              />
            </div>
          </div>
        <!-- <div :class="ishge == index ? 'anche' : ''" style=" height: 36px;;line-height: 36px;margin-top: 10px;padding: 0 10px;"v-for="(item,index) in channelNumberList" :key="index">
                        <div @click="ishg(item,index)" style="display: flex;align-items: center;justify-content: space-between;">
                          <el-tooltip class="item" effect="dark" :content="item.channelNum == null?'暂无数据' : item.channelNum" placement="top-start">
                          <div style="font-size: 16px;
        color: #333333; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> {{item.channelNum == null?'暂无数据' : item.channelNum}}</div>
        </el-tooltip>
                          <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
                        </div>
                    </div> -->
      </div>
      </el-col>
      <el-col :span="20">
        <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="6">
                      <el-form-item label="告警类别" prop="algorithmType">
                              <el-select style="width: 120px;" v-model="queryParams.algorithmType" placeholder="请选择告警类别" clearable>
                                <el-option
                                  v-for="dict in dict.type.gaojing_typeshuju"
                                  :key="dict.value"
                                  :label="dict.label"
                                  :value="dict.value"
                                />
                              </el-select>
                            </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="告警时间" prop="warnTime">
                              <el-date-picker style="width: 120px;" 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="box-sizing: border-box; position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 10px;margin-bottom: 10px;padding-bottom: 10px;">
                          <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 v-if="item.algorithmType == 0 || item.algorithmType == 1" style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">{{ item.rangName + (item.algorithmType == 0 ? '离岗' : '玩手机') + '告警'}}</p>
                                <p v-if="item.algorithmType == 2" style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">{{ item.equipmentName + (item.algorithmType == 0 ? '离岗' : item.algorithmType == 1?'玩手机' : '人员聚集') + '告警'}}</p>
                              </div>
                              <!-- <p style="font-size: 14px; color: #aaa;font-weight: 500;" @click="tiahzo(item)">详情→</p> -->
                            </div>
                            <!-- <img :src="item.warnImage" alt="" style="width: 100%; height: 150px;"> -->
                            <image-preview v-if="item.warnImage != null && item.warnImage != ''" :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;"
                                     v-if=" item.videoAddress != null && item.videoAddress != ''"
                                   >
                                   <!-- + baseUrl -->
                                     <source  :src="item.videoAddress " />
                                   </video>

                                   <!-- <h265-player url="http://192.168.9.240:5010/prod-api/profile/videoRecored/recording_20250627_092541_357_离岗.mp4" @error="handleError"></h265-player> -->
                          </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.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_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>
                      </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-col>
    </el-row>

    <!-- 添加或修改岗位对话框 -->
    <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.algorithmType" placeholder="请选择告警类别">
                       <el-option
                         v-for="dict in dict.type.gaojing_typeshuju"
                         :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 { listEquipmentManageNoPage,  } from "@/api/manage/equipmentManage"
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import H265Player from 'vue-h265-player';
import 'videojs-flash'
import mqttHandle from "../../../utils/mqttHandler.js"
import mqtt from 'mqtt';
// import flvjs from 'flv.js/dist/flv.min.js'
import flvjs from "flv.js";
import { MqttClient } from 'mqtt'
// 状态变量
 const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
export default {
  name: "WarnManage",
  components: {
      H265Player
    },
  dicts: ['gaojing_typeshuju', 'source_type','alarm_task','shagnt'],
  data() {
    return {
      mqttThemeName:{
      	url: 'ws://13.229.167.76:1884/mqtt',
      	topic: 'test/topic'
      },
      defaultProps: {
        children: "children",
        label: "equipmentName",
        value:'equipmentId'
      },
      // 遮罩层
      loading: true,
      defaultSettings:defaultSettings,
      baseUrl: process.env.VUE_APP_BASE_API,
      // 部门树选项
      deptOptions: undefined,
      // 选中数组
            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,
              algorithmType:null,
              params:{
                month: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,
       equipmentName:null,
       staffTrainTimeList:[],
       tableMaxHeight:'200',
       receiveNews: "",
       videoShow: false,
       flvPlayer:null,
       player: null,
        player: null,
             options: {
               // 视频源
               sources: [{
                 src: '../../../assets/images/recording_20250626_210102_169_离岗.png',
                 type: 'video/mp4'
               }],
               // 其他配置选项...
             }

      };
    },
    computed: {
      dynamicStyle() {
        return {
          overflowY:'auto',
          height: this.tableMaxHeight+ 'px',
           paddingTop:'10px'
        }
      }
      },
  created() {
    this.startTime = Date.now()
    if(this.$route.query.type != undefined){
      if(this.$route.query.type == 'zs'){
        this.queryParams.params.month =  this.gettimeyer()
      }else {
         this.queryParams.algorithmType =  this.$route.query.type
      }
    }else{
      this.queryParams.params.month = null
      this.queryParams.algorithmType =  null
    }
    if(this.$route.query.deptId != undefined){
      this.queryParams.params.month =  this.gettimeyer()
      this.queryParams.deptId = this.$route.query.deptId
    }else{
      this.queryParams.params.month =  null
      this.queryParams.deptId = null
    }
    if(this.$route.query.rangName != undefined){
      this.queryParams.warnTime =  this.gettime()
      this.queryParams.rangName = this.$route.query.rangName
      this.queryParams.algorithmType =  this.$route.query.type
    }else{
      this.queryParams.warnTime =  null
      this.queryParams.rangName = null
    }
    if(this.$route.query.year != undefined){
      this.queryParams.params.year = this.$route.query.year
    }else{
      this.queryParams.params.year = null
    }


    this.getList();
    this.getListt()
    this.getTreeselect()
  window.onresize = () => {
  	      this.changeTableMaxHeight()
  	    }
  	    this.changeTableMaxHeight()
  },
  mounted() {
  // this.init('../../../assets/images/recording_20250626_210102_169_离岗.mp4')
    // this.createMqtt() // 建立mqtt通信
    // this.fullScreen()
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()
            // this.player = videojs(this.$refs.videoPlayer, this.options, () => {
            //       console.log('player is ready');
            //     });
  },


  beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
      if (client) {
        console.log(4)
        client.end()
      }
      // this.disconnect()
    },
  methods: {
    handleError(error) {
          console.error('Video error:', error);
        },
    gettimeyer(){
      let nowDate = new Date()
      				  let date = {
      				    year: nowDate.getFullYear(),
      				    month: nowDate.getMonth() + 1,
      				    date: nowDate.getDate()
      				  }
                 if (parseInt(date.month) < 10) {
                    date.month = '0' + date.month
                  }
      				   if (parseInt(date.date) < 10) {
      				      date.date = '0' + date.date
      				    }
                  let nghe = date.year + '-' + date.month
      				  return nghe
    },
       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.getge(this.warnManageList)
        this.total = response.total;
        this.loading = false;
      });
    },
  // 筛选节点
  filterNode(value, data) {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
  },
  nsdfse(){
    this.getTreeselect()
  },
  /** 查询部门下拉树结构 */
  getTreeselect() {
    // this.queryParams
    let sngse={'equipmentName':this.equipmentName}
    console.log(sngse)
    listEquipmentManageNoPage(sngse).then(response => {
      this.deptOptions = response.rows
      this.deptOptions.filter(rou=>{
        rou.children.filter(rout=>{
          rout.equipmentName  = rout.channelNum
          rout.equipmentId  = rout.channelId
        })
      })
      this.loading = false
    })
  },
  // 节点单击事件
  handleNodeClick(data) {
    // this.queryParams.deptId = data.deptId;
    // this.ghwe.deptName = data.deptName
    // this.ghwe.deptId = data.deptId
    // this.handleQuery();
  },
  // 通道点击
  ishg(item,val){
   console.log(item,val)
   if(item.channelId != undefined){
     this.queryParams.channelId = item.channelId
     this.getList()
   }

  },
    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
      }

    },
    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: "mp4",
                  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);
        },
    /** 查询通道管理列表 */
    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.queryParams.pageNum = 1
          this.queryParams.params.month = null
          this.queryParams.algorithmType =  null
          this.queryParams.deptId = null
          this.queryParams.warnTime =  null
          this.queryParams.rangName = null
          this.queryParams.params.year = null
          this.queryParams.channelId = undefined
          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;
    height: 330px;
  }
  .shipige{
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
    p{
      margin: 0;

    }
  }

  </style>