Merge branch 'master' of http://10.1.235.20:3000/asiainfo/ebc

monitor-manage-service/src/main/java/com/ai/bss/monitorManage/service/impl/FileManageServiceImpl.java

package com.ai.bss.monitorManage.service.impl;
import cn.hutool.core.lang.UUID;
import com.ai.bss.components.minio.service.MinioService;
import com.ai.bss.monitorManage.service.interfaces.FileManageService;
import com.ai.bss.monitorManage.utils.SecurityProtectionMinioConfig;
import java.util.HashMap;
import java.util.Map;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.util.HashMap;
import java.util.Map;
import com.ai.bss.components.minio.service.MinioService;
import com.ai.bss.monitorManage.service.interfaces.FileManageService;
@Service
public class FileManageServiceImpl implements FileManageService {

monitor-manage-service/src/main/java/com/ai/bss/monitorManage/service/impl/KafkaProcessImpl.java

package com.ai.bss.monitorManage.service.impl;
import com.ai.abc.core.context.SpringApplicationContext;
import java.io.File;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.kafka.core.KafkaTemplate;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Service;
import org.springframework.util.CollectionUtils;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import com.ai.bss.components.common.util.ImageBase64Converter;
import com.ai.bss.components.ebcai.service.EbcAiService;
import com.ai.bss.monitorManage.constant.MonitorManageConsts;
import com.ai.bss.monitorManage.service.interfaces.AiIdenInterfaces;
import com.ai.bss.monitorManage.service.interfaces.FileManageService;
import com.ai.bss.monitorManage.service.interfaces.KafkaProcess;
import com.ai.bss.monitorManage.utils.*;
import com.ai.bss.monitorManage.utils.AiIdenUtils;
import com.ai.bss.monitorManage.utils.DateUtils;
import com.ai.bss.monitorManage.utils.FileUtils;
import com.ai.bss.monitorManage.utils.HttpServiceUtil;
import com.ai.bss.monitorManage.utils.KafkaProducerConfig;
import com.ai.bss.monitorManage.utils.SecurityProtectionMinioConfig;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.kafka.core.KafkaTemplate;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Service;
import org.springframework.util.CollectionUtils;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import java.io.File;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import lombok.extern.slf4j.Slf4j;
@Slf4j
@Service

monitor-manage-service/src/main/java/com/ai/bss/monitorManage/service/impl/ListeningFileDirectoryServiceImpl.java

import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Timer;
import java.util.TimerTask;
import com.ai.bss.monitorManage.service.interfaces.KafkaProcess;
import com.ai.bss.monitorManage.service.interfaces.ListeningFileDirectoryService;
import com.ai.bss.monitorManage.utils.FileUtils;
import com.alibaba.fastjson.JSONObject;
import com.mzlion.core.lang.StringUtils;
import lombok.extern.slf4j.Slf4j;
    @Autowired
    private KafkaProcess kafkaProcess;
    
    private static Map<String,Timer> timerMap=new HashMap<String,Timer>();
    
    //防止重启后重复监控文件
    private String taskName="pictureTask";
    private static Map<String,Timer> timerMap=new HashMap<String,Timer>();
    private static Map<String,WatchKey> keyMap=new HashMap<String,WatchKey>();
    @Override
    public void getFile(String filePath,int index)  {
    	timerMap.get(timerMapKey).schedule(new TimerTask() {
            @Override
            public void run() {
                WatchKey key;
                WatchKey watchKey;
                //System.out.println("filePath:   " + filePath);
                log.info("filePath:   " + filePath);
                String mapKey = "";
                            File file = new File(filePath);//path为监听文件夹
                            //System.out.println("等待图片加载！");
                            log.info("等待图片加载！");
                            key = watchService.take();//没有文件增加时，阻塞在这里
                            watchKey = watchService.take();//没有文件增加时，阻塞在这里
                            keyMap.put(timerMapKey, watchKey);
                            
                            int i = 0;
                            String[] fileContent = new String[3600];
                            for (WatchEvent<?> event : key.pollEvents()) {
                            for (WatchEvent<?> event : watchKey.pollEvents()) {
                                String fileName = filePath+MonitorManageConsts.getSystemSeparator()+event.context();
                                //System.out.println("增加文件的文件夹路径== :"+fileName);
                                //System.out.println("增加文件的名称== :"+event.context());
//                                Map<String, String> fileMap = fileManageService.uploadFile(mfile,null);
//                                System.out.println("pictureUrl=== " + fileMap.get("pictureUrl"));
                            }if (!key.reset()) {
                            }if (!watchKey.reset()) {
                                break; //中断循环
                            }
                        }
		}
    	
        try{
        	Iterator<Map.Entry<String, Timer>> it = timerMap.entrySet().iterator();
    	    while(it.hasNext()){
    	        Map.Entry<String, Timer> entry = it.next();
    	        entry.getValue().cancel();
        		it.remove(); 
        	Iterator<Map.Entry<String, Timer>> timerIt = timerMap.entrySet().iterator();
    	    while(timerIt.hasNext()){
    	        Map.Entry<String, Timer> entry = timerIt.next();
    	        Timer timer=entry.getValue();
    	        timer.cancel();
    	        timer=null;
        		timerIt.remove(); 
			}
    	    
			if (!CollectionUtils.isEmpty(keyMap)) {
				Iterator<Entry<String, WatchKey>> keyIt = keyMap.entrySet().iterator();
			    while(keyIt.hasNext()){
			        Map.Entry<String, WatchKey> entry = keyIt.next();
			        WatchKey watchKey=entry.getValue();
			        watchKey.cancel();
			        watchKey=null;
					keyIt.remove();
				}
			}
			
        }catch(Exception e){
           log.error("removeTimer is error :"+e.getMessage());  
           return "关闭失败";

monitor-manage-service/src/main/java/com/ai/bss/monitorManage/service/impl/MonitorManageServiceImpl.java

	//@Autowired
	//private SecurityProtectionMinioConfig minioConfig;
	private static boolean isBeginFlag=false;
	//监听状态
	private boolean isListenFlag=false;
	
	@Override
	public String loadPictureFromDirectory() throws InterruptedException {
		if (!isBeginFlag) {
		if (!isListenFlag) {
			//监听文件目录，加载文件
			loadFileList();
			isBeginFlag=true;
			isListenFlag=true;
			log.info("图片监听开启成功");
			return "开启成功";
		}
		File file = new File(baseFilePath);//path为监听文件夹
		File[] files = file.listFiles();
		int n=1;
		int n=0;
		//摄像头列表
		for(File file1:files){
			file1.getName();
				n++;
			}
		}
		log.info("此次开启监听"+n+"个文件夹");
	}
	
	/**
		log.debug("关闭图片监听");
		String result=listeningFileDirectoryService.removeTimer();
		
		isBeginFlag=false;
		isListenFlag=false;
		log.info("关闭图片监听："+result);
		return result;
	}

monitor-manage-service/src/main/java/com/ai/bss/monitorManage/service/interfaces/FileManageService.java

package com.ai.bss.monitorManage.service.interfaces;
import org.springframework.web.multipart.MultipartFile;
import java.util.Map;
import org.springframework.web.multipart.MultipartFile;
/**
 * 设备管理
 * @author konghl@asiainfo.com

monitor-manage-service/src/main/java/com/ai/bss/monitorManage/utils/AiIdenUtils.java

		} finally {
			try {
				is.close();
			} catch (NullPointerException e) {
				log.error("getBufferedImage is NullPointerException1: " + e.getMessage() + ", filePath=" + filePath);
			} catch (IOException e) {
				log.error("getBufferedImage is IOException1: " + e.getMessage() + ", filePath=" + filePath);
			}

security-protection-platform/.aid/aid.js

  //imagePrefix: url => `${subappURL}/asset/image/${url}`, // 作为子应用必须启用
  //fontPrefix: url => `${subappURL}/asset/font/${url}`, // 作为子应用必须启用
  outputPrefix: '/'// 构建后index.html中资源路径的前缀
  // ,
  // proxy: [
  //   {
  //     url: '/sp',
  //     options: {
  //       target: 'http://10.19.90.34:8018',
  //       changeOrigin: true,
  //       pathRewrite: {
  //         '^/sp': '/'
  //       }
  //     }
  //   },
  // ]
  ,
  proxy: [
    {
      url: '/sp',
      options: {
        target: 'http://10.19.90.34:8018',
        changeOrigin: true,
        pathRewrite: {
          '^/sp': '/'
        }
      }
    },
  ]
}

security-protection-platform/src/conf/axios.config.js

  },
  root: {
    default: {
      baseURL: 'http://10.19.90.34:8018'
      // baseURL: 'http://10.19.90.34:8018'
        // baseURL: 'http://localhost:8018'
        // baseURL: '/sp'
        baseURL: '/sp'
    },
    picurl: {
      baseURL: 'http://10.19.90.34:19000/tool-image/'

security-protection-platform/src/modules/access/component/instrumentRecord/index.vue

        <t-button color="primary" @click="btnsearch">查询</t-button>
        <t-button @click="reset">重置</t-button>
      </div>
      <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
       <t-button  icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
    </div> -->
    <div class="track-container">
            </div>
          </div>
          <div class="btns">
            <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
            <t-button icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
            <t-dropdown :visibled="customVisibled" trigger-mode="custom">
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
              <div slot="popper">
                <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                  <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                </div>
              </div>
            </t-dropdown>
            <t-button color="secondary" icon="loading" class="reset-btn" @click="reset"></t-button>
          </div>
        </div>
        <div class="animate-demo-wrapper">
            <div v-show="slideVisible" class="transition-box allCondition">
              <div class="input-rule">
                <span>开始时间：</span>
                <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
                <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:320px;height:32px"></t-date-picker>
              </div>
              <div class="input-rule">
                <span>结束时间：</span>
                <t-date-picker :confirm="false" v-model="searchdata.endDay" placeholder="请选择结束时间" style="width:320px;height:32px"></t-date-picker>
              </div>
              <a style="float:right;color:#0089d4;" @click="reset" href="javascript:;">重置</a>
            </div>
          </transition>
        </div>
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      flex-wrap: nowrap;
      padding: 20px;
      margin: 5px auto;
      align-items: center;
      .input-rule {
        flex: 1;
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        padding: 10px 0 10px 20px;
      }
    }

security-protection-platform/src/modules/access/component/io-record/index.vue

        <t-button @click="reset">重置</t-button>
      </div>
      <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
       <t-button  icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
    </div> -->
    <div class="track-container">
            </div>
          </div>
          <div class="btns">
            <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
            <t-button icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
            <t-dropdown :visibled="customVisibled" trigger-mode="custom">
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
              <div slot="popper">
                <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                  <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                </div>
              </div>
            </t-dropdown>
            <t-button color="secondary" icon="loading" class="reset-btn" @click="reset"></t-button>
          </div>
        </div>
        <div class="animate-demo-wrapper">
            <div v-show="slideVisible" class="transition-box allCondition">
              <div class="input-rule">
                <span>开始时间：</span>
                <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
                <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:320px;height:32px"></t-date-picker>
              </div>
              <div class="input-rule">
                <span>结束时间：</span>
                <t-date-picker :confirm="false" v-model="searchdata.endDay" placeholder="请选择结束时间" style="width:320px;height:32px"></t-date-picker>
              </div>
              <a style="float:right;color:#0089d4;" @click="reset" href="javascript:;">重置</a>
            </div>
          </transition>
        </div>
      <t-table-column v-if="columns[4].show" :formatter="date_formatter" label="职务" prop="employeePositionZh" width="80px">
      </t-table-column>
      <t-table-column v-if="columns[5].show" :formatter="date_formatter" prop="simi" label="相似度" width="75px">
        <template v-slot="{row}">
          {{ getSimi(row) }}
        </template>
      </t-table-column>
      <t-table-column v-if="columns[6].show" :formatter="date_formatter" label="进出时间" prop="taskExecuteTime" width="160px">
      </t-table-column>
      } else {
        return cellValue
      }
    },
    getSimi (row) {
      return (row.simi.split('%')[0] - 0).toFixed(2) + '%'
    }
    // //将分数转换为小数
    // toPoint (percent) {
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      flex-wrap: nowrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        flex: 1;
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        padding: 10px 0 10px 20px;
      }
    }

security-protection-platform/src/modules/aialarm/index.vue

        <t-button color="primary" @click="btnsearch">查询</t-button>
        <t-button @click="reset">重置</t-button>
      </div>
      <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
       <t-button  icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
    </div> -->
    <div class="track-container">
            </div>
          </div>
          <div class="btns">
            <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
            <t-button icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
            <t-dropdown :visibled="customVisibled" trigger-mode="custom">
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
              <div slot="popper">
                <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                  <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                </div>
              </div>
            </t-dropdown>
            <t-button color="secondary" icon="loading" class="reset-btn" @click="reset"></t-button>
          </div>
        </div>
        <div class="animate-demo-wrapper">
                <span>结束时间：</span>
                <t-date-picker :confirm="false" v-model="searchdata.endTime" placeholder="请选择结束时间" style="width:320px;height:32px"></t-date-picker>
              </div>
              <a style="float:right;color:#0089d4;" @click="reset" href="javascript:;">重置</a>
            </div>
          </transition>
        </div>
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      flex-wrap: nowrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        flex: 1;
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        padding: 10px 0 10px 20px;
      }
    }

security-protection-platform/src/modules/attendance/abnormal/index.vue

              </div>
            </div>
            <div class="btns">
              <t-button color="primary">
              <t-button>
                <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
              </t-button>
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                <div slot="popper">
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                  </div>
                </div>
              </t-dropdown>
              <t-button color="secondary" icon="loading" class="reset-btn" @click="resetData"></t-button>
            </div>
          </div>
          <div class="animate-demo-wrapper">
                  <span>部门/员工：</span>
                  <dept-staff-cascader v-model="form" @inited="handleInited" @getOrgId="getDailyOrgId" @getDepId="getDailyDepId" @getStaffId="getDailyStaffId" />
                </div>
                <a style="float:right;color:#0089d4;" @click="resetData" href="javascript:;">重置</a>
              </div>
            </transition>
          </div>
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      flex-wrap: nowrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        display: flex;
        flex: 1;
        width: 80%;
        min-width: 80%;
        max-width: 80%;
        padding: 10px 0 10px 20px;
        > span {
          line-height: 32px;

security-protection-platform/src/modules/attendance/report/index.vue

                  </div>
                </div>
                <div class="btns">
                  <t-button color="primary">
                  <t-button>
                    <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
                  </t-button>
                  <t-dropdown :visibled="customVisibled0" trigger-mode="custom">
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                    <div slot="popper">
                      <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                        <t-checkbox-group v-model="social0" vertical @change="checkAllGroupChange">
                      </div>
                    </div>
                  </t-dropdown>
                  <t-button color="secondary" icon="loading" class="reset-btn" @click="resetDailyData"></t-button>
                </div>
              </div>
              <div class="animate-demo-wrapper">
                      <span>部门/员工：</span>
                      <dept-staff-cascader v-model="dailyForm" @inited="handleDailyInited" @getOrgId="getDailyOrgId" @getDepId="getDailyDepId" @getStaffId="getDailyStaffId" />
                    </div>
                    <a style="float:right;color:#0089d4;" @click="resetDailyData" href="javascript:;">重置</a>
                  </div>
                </transition>
              </div>
                  </div>
                </div>
                <div class="btns">
                  <t-button color="primary">
                  <t-button>
                    <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
                  </t-button>
                  <t-dropdown :visibled="customVisibled1" trigger-mode="custom">
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                    <div slot="popper">
                      <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                        <t-checkbox-group v-model="social1" vertical @change="checkAllGroupChange">
                      </div>
                    </div>
                  </t-dropdown>
                  <t-button color="secondary" icon="loading" class="reset-btn" @click="resetMonthData"></t-button>
                </div>
              </div>
              <div class="animate-demo-wrapper">
                    <div class="input-rule">
                      <span>部门/员工：</span>
                      <dept-staff-cascader v-model="monthlyForm" @getOrgId="getMonthOrgId" @getDepId="getMonthDepId" @getStaffId="getMonthStaffId" />
                      <div class="search-btn">
                      </div>
                    </div>
                    <a style="float:right;color:#0089d4;" @click="resetMonthData" href="javascript:;">重置</a>
                  </div>
                </transition>
              </div>
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        display: flex;
        flex: 1;
        width: 80%;
        min-width: 80%;
        max-width: 80%;
        padding: 10px 0 10px 20px;
        > span {
          line-height: 32px;

security-protection-platform/src/modules/dashboard/index.vue

<template>
  <div class="index" style="overflow:hidden;">
    <div :style="`background-image: url(${imgBg})`" class="top" >
    <div :style="`background-image: url(${imgBg})`" class="top">
      <img src="@/assets/images/AsiainfoLogo.png" class="top-logo">
      <div style="position: absolute;top:50%;left:54%;transform: translate(-50%,-50%);vertical-align: middle; color: white; font-size: 14px">
        <b> | AISI安防一体化平台</b></div>
        <b> | AISI安防一体化平台</b>
      </div>
    </div>
    <div>
      <div class="time"><span style="color: #00d8f3;font-size: 21px;">{{ nowDate | dateFormat }}</span></div>
          <div id="doughnut" style="height: 100%;width: 100%"></div>
        </div>
        <div :style="`height:34%;margin-top: 3%;`" class="body-left-item">
          <div :style="`background-image: url(${titleImgBg})`" class="title" id="div1">
          <div id="div1" :style="`background-image: url(${titleImgBg})`" class="title">
            <span class="title-span">告警分析</span>
          </div>
          <div id="bar" style="height: 100%;width: 100%"></div>
        </div>
        <!--        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>-->
        <div id="div11">
          <video-player v-if="videoOptions !== {}" ref="videoPlayer" :options="videoOptions" :playsinline="true"  id="div111" class="vjs-custom-skin videoPlayer">
          <video-player v-if="videoOptions !== {}" id="div111" ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer">
          </video-player>
        </div>
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
import videojs from 'video.js'
import EventBus from "../../bus";
import EventBus from '../../bus'
window.videojs = videojs
require('video.js/dist/lang/zh-CN.js')
    setInterval(() => { // 识别记录
      this.initRecognition()
    }, 5000)
    // console.log(textDom.nextSibling)
    // textDom.nextSibling.nodeValue = ''
    // EventBus.$on('sendAiData', (msg) => { // 获取镜屏推送消息
    //   console.log('已接收镜屏消息...')
    //   var oDiv = document.getElementById("div111");
    // })
  },
  methods: {
    testHKK(box, alarmMemo) {
    testHKK (box, alarmMemo) {
      var width = box[2] - box[0]
      var height = box[3] - box[1]
      var oDiv = document.getElementById("div111");
      var oDiv = document.getElementById('div111')
      // var aBox = this.getByClass(oDiv,"vjs-tech");
      // alert(aBox.length);
      var e = oDiv;
      var div = document.createElement("div");
      var e = oDiv
      var div = document.createElement('div')
      // div.className = "form-group";
      var del = document.createElement('p')
      var x = 10 + this.hkk
      this.hkk ++
      del.innerHTML = '<div class="hkk" style="color: white;border: 2px solid #00d8f3;position: absolute;top: ' + box[1] + 'px;left: ' + box[0] + 'px;width: ' + width + 'px;height: ' + height + 'px;"> ' + alarmMemo + ' </div>';
      div.appendChild(del);
      e.appendChild(div);
      setTimeout(function() {
        del.remove();
      this.hkk++
      del.innerHTML = '<div class="hkk" style="color: white;border: 2px solid #00d8f3;position: absolute;top: ' + box[1] + 'px;left: ' + box[0] + 'px;width: ' + width + 'px;height: ' + height + 'px;"> ' + alarmMemo + ' </div>'
      div.appendChild(del)
      e.appendChild(div)
      setTimeout(function () {
        del.remove()
      }, 3000)
    },
    findInArr(arr,n){
      for(var i=0;i<arr.length;i++){
        if(arr[i] == n){
          return true;
    findInArr (arr, n) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == n) {
          return true
        }
      }
      return false;
      return false
    },
    getByClass(oParent,sClass){
      var ret = [];
      var aEle = oParent.getElementsByTagName("*");
      for(var i = 0; i < aEle.length; i++){
        var _aTmp = aEle[i].className.split(" ");
        if(this.findInArr(_aTmp,sClass)){
          ret.push(aEle[i]);
    getByClass (oParent, sClass) {
      var ret = []
      var aEle = oParent.getElementsByTagName('*')
      for (var i = 0; i < aEle.length; i++) {
        var _aTmp = aEle[i].className.split(' ')
        if (this.findInArr(_aTmp, sClass)) {
          ret.push(aEle[i])
        }
      }
      return ret;
      return ret
    },
    async createMyButton () {
      this.$nextTick(() => {
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
        let text = document.getElementsByClassName('vjs-live-control vjs-control')
        // 删除直播文本节点
        let textDoms = document.querySelectorAll('.vjs-live-control .vjs-live-display .vjs-control-text')
        textDoms.forEach(item => {
          // 这样设置没用 不知道为啥 明明在nextTick中 真正的“直播”文本节点还是没选到
          item.nextSibling.nodeValue = ''
          // item.nextSibling.data = ''
        })
        bars.forEach((item, index) => {
          time.forEach(item => {
            item.remove()
          data = data.slice(0, 4)
        }
        data.forEach(e => {
          if (e.employeeName == null || e.employeeName == ''){
          if (e.employeeName == null || e.employeeName == '') {
            e.employeeCode = '未识别成功'
          }
          e.simi = e.simi.split('.')[0] + '%'
.vjs-tech {
  pointer-events: none;
}
.checkedIndex{
.checkedIndex {
  border: 1px solid #009bf3;
}
</style>

security-protection-platform/src/modules/system/assignment/index.vue

                <t-icon icon="trash" size="16"></t-icon>删除
              </t-button>
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                <div slot="popper">
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                  </div>
                </div>
              </t-dropdown>
              <t-button color="secondary" icon="loading" class="reset-btn" @click="resetData"></t-button>
            </div>
          </div>
          <div class="animate-demo-wrapper">
                    <t-option v-for="item in taskStatusList" :key="item.id" :value="item.id">{{ item.description }}</t-option>
                  </t-select>
                </div>
                <a style="float:right;color:#0089d4;" @click="resetData" href="javascript:;">重置</a>
              </div>
            </transition>
          </div>
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        flex: 1;
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        padding: 10px 0 10px 20px;
      }
    }

security-protection-platform/src/modules/system/devicemana/index.vue

                <t-icon icon="trash" size="16"></t-icon>删除
              </t-button>
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                <div slot="popper">
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                  </div>
                </div>
              </t-dropdown>
              <t-button color="secondary" icon="loading" class="reset-btn" @click="resetData"></t-button>
            </div>
          </div>
          <div class="animate-demo-wrapper">
                  <span>设备编号：</span>
                  <t-input v-model="deviceId" style="width:320px" placeholder="请输入设备编号"></t-input>
                </div>
                <a style="float:right;color:#0089d4;" @click="resetData" href="javascript:;">重置</a>
              </div>
            </transition>
          </div>
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        flex: 1;
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        padding: 10px 0 10px 20px;
      }
    }

security-protection-platform/src/modules/usermana/index.vue

                <t-icon icon="trash" size="16"></t-icon>删除
              </t-button>
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                <div slot="popper">
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                  </div>
                </div>
              </t-dropdown>
              <t-button color="secondary" icon="loading" class="reset-btn" @click="resetData"></t-button>
            </div>
          </div>
          <div class="animate-demo-wrapper">
                    <t-select-tree v-model="departmentTypeId" :node-data="departmentTypesList" width="320px" node-key="id"></t-select-tree>
                  </template>
                </div>
                <a style="float:right;color:#0089d4;" @click="resetData" href="javascript:;">重置</a>
              </div>
            </transition>
          </div>
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        flex: 1;
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        padding: 10px 0 10px 20px;
      }
    }

security-protection-platform/src/modules/workorder/index.vue

              <t-button color="primary" @click="cardReplacementModal=true">
                <t-icon icon="plus-circle-outline" size="16"></t-icon> 补卡
              </t-button>
              <t-button color="primary">
              <t-button>
                <t-icon icon="upload" size="16"></t-icon> 导出至Excel
              </t-button>
              <t-button color="primary" @click="importWorkOrderModal=true">
              <t-button @click="importWorkOrderModal=true">
                <t-icon icon="download" size="16"></t-icon> 导入
              </t-button>
              <a href="javascript:;"> 模板下载 <t-icon icon="cloud-download-outline" size="16" style="lineHeight:24px"></t-icon></a>
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                <div slot="popper">
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                  </div>
                </div>
              </t-dropdown>
              <t-button color="secondary" icon="loading" class="reset-btn" @click="resetData"></t-button>
            </div>
          </div>
          <div class="animate-demo-wrapper">
                  <span>结束时间：</span>
                  <t-date-picker v-model="endDate" style="width:320px" placeholder="请选择结束时间" @date-change="endPickerDateChange"></t-date-picker>
                </div>
                <a style="float:right;color:#0089d4;" @click="resetData" href="javascript:;">重置</a>
              </div>
            </transition>
          </div>
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      flex-wrap: nowrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        flex: 1;
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        padding: 10px 0 10px 20px;
      }
    }

security-protection-platform/src/styles/index.scss

@import './variables.scss';
@import './sidebar.scss';
@import "./variables.scss";
@import "./sidebar.scss";
body {
  // height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-family: PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, Arial,
    sans-serif;
}
label {
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.text-center {
  text-align: center
  text-align: center;
}
.sub-navbar {
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
  background: linear-gradient(
    90deg,
    rgba(32, 182, 249, 1) 0%,
    rgba(32, 182, 249, 1) 0%,
    rgba(33, 120, 241, 1) 100%,
    rgba(33, 120, 241, 1) 100%
  );
  .subtitle {
    font-size: 20px;
.multiselect--active {
  z-index: 1000 !important;
}
// 解决筛选按钮的错位问题
.trigger-button {
  // transform: translateY(1.5px);
  height: 100%;
}
.track-container .search-container .search-ctn .btns{
  display: flex !important;
}
.dropdown{
  height: 32px;
}