Skip to content

潘建波 / SDC-Face-Web

Go to a project
Commit cc117438 by 潘建波
Options

【NEW】首次提交

0 parents
Inline Side-by-side
Showing 29 changed files with 2939 additions and 0 deletions
.gitignore 0 → 100644
node_modules
/dist
\ No newline at end of file \ No newline at end of file
API20211215.zip 0 → 100644
No preview for this file type
API20211215/api.md 0 → 100644
<!--
* @Author: your name
* @Date: 2021-12-24 14:07:46
* @LastEditTime: 2021-12-24 14:28:25
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /sdc-face/API20211215/api.md
-->
## SDC相机接口存在的问题
### 1.
\ No newline at end of file \ No newline at end of file
API20211215/vue.config.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-12-24 14:16:06
* @LastEditTime: 2021-12-24 14:21:47
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /sdc-face/API20211215/vue.config.js
*/
module.exports = {
outputDir:process.env.outputDir || 'dist',
// 由于浏览器有跨域限制,这里cli 工具提供了 启动本地代理服务器 请求
devServer:{
open:false, // 是否打开浏览器;
hotOnly:true, // 是否热更新;
proxy:{
'/SDCAPI':{ // 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下面移除即可
target:'http://huayan.320.io/', // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
secure:false,
changeOrigin:true, // 开启代理，在本地创建一个虚拟服务端
ws:true, // 是否启用 websockets;
pathRewrite:{ // 去掉 路径中的 /api 的这一截
'^/api':''
}
},
'/test':{
target:'http://v.juhe.cn/joke', // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
secure:false,
changeOrigin:true,
ws:true,
pathRewrite:{
'^/test':'',
}
}
},
}
}
\ No newline at end of file \ No newline at end of file
API20211215/数据接入接口.txt 0 → 100644
1.获取基础数据配置
方法:GET
路由:/SDCAPI/V1.0/VionSoftware/do/getBaseParm
返回参数:
{
"chn":2, // 当前使用通道号
"frame":10, // 当前使用帧率
"resolutionW":3160, // 当前分辨率宽高
"resolutionH":2840,
"canUseChn":[1,2] //当前可用的通道号列表
}
2.设置基础数据配置
方法:POST
路由:/SDCAPI/V1.0/VionSoftware/do/setBaseParam
请求参数:
{
"chn":2, // 通道号
"frame":10, // 帧率
"resolutionW":3160, // 分辨率宽高
"resolutionH":2840
}
响应:
{
"ecode": "200",
"enote": "OK"
}
API20211215/服务管理API接口.txt 0 → 100644
1.获取服务配置接口
GET :http://192.168.1.117:8081/SDCAPI/V1.0/VionSoftware/do/webclient/deviceBasicInfo
返回:
{
"data": {
"business": {
"model": {
"file": "face_back_body_40_1_3000.trt",
"id": 1
},
"result": {
"face": {
"save": 1,
"sendbodyfeature": 1,
"sendbodynum": 1,
"sendface": 1,
"sendfacefeature": 1
},
"inout": {
"save": 0,
"sendinterval": 600
}
},
"runtype": 6,
"status": 1
},
"commonconfig": {
"httpUploadAddr": "",
"keepaliveinterval": 0,
"keepaliveswitch": 0,
"uploadjpginterval": 0,
"uploadjpgnum": 0,
"uploadjpgswitch": 0,
"workEndTime": 0,
"workStartTime": 0
},
"licence": {
"cpuid": "",
"lastdate": "2000-01-01",
"max_resouce_num": 1
}
},
"describe": "doGetBasicInfo",
"success": 1
}
2.获取存储配置
GET: http://192.168.66.2:8080/SDCAPI/V1.0/VionSoftware/do/webclient/getBusiness
返回:
{
"success":1,
"describe":"业务查询成功",
"business":
{
"runtype": 1, //类型1-7 目前只支持三种 1.进出客流 4.区域 6.人脸
"status": 0, //0：关闭 1：开启
"model":
{
"id": "1", //序号
"file": "model_vertical_small.cm3" //model文件名称
},
"result":
{
"inout": // 进出客流&区域客流
{
"sendinterval": 60, //发送结果的时间间隔,取值范围{1,6,60,120,600},单位是秒
"save": 0, //是否保存数据，0：不保存 1：保存
},
"face": //人脸客流
{
"sendface": 1, //0:不输出人脸图片 1：输出人脸图片
"sendbodynum": 1, //0:部输出人体图片 1：输出一张人体图片
"save": 0, //是否保存数据，0：不保存 1：保存
}
}
}
}
3.设置存储配置
POST :http://192.168.1.117:8081/SDCAPI/V1.0/VionSoftware/do/webclient/modBusiness
请求参数:
{
"channelid": 1
"business":
{
"runtype": 1, //类型1-7 目前只支持三种 1.进出客流 4.区域 6.人脸
"status": 0, //0：关闭 1：开启
"model":
{
"id": "1", //序号
"file": "model_vertical_small.cm3" //model文件名称
},
"result":
{
"inout": // 进出客流&区域客流
{
"sendinterval": 60, //发送结果的时间间隔,取值范围{1,6,60,120,600},单位是秒
"save": 0, //是否保存数据，0：不保存 1：保存
},
"face": //人脸客流
{
"sendface": 1, //0:不输出人脸图片 1：输出人脸图片
"sendbodynum": 1, //0:部输出人体图片 1：输出一张人体图片
"save": 0, //是否保存数据，0：不保存 1：保存
}
}
}
}
4. 设置工作时间
POST :http://192.168.1.117:8081/SDCAPI/V1.0/VionSoftware/do/webclient/setWorkTime
请求参数:
{
"channelid": 1
"worktime":{
"startTime":1222,
"endTime":122 ,
}
}
返回:
{
"success": 1,
"describe": "setWorkTime OK",
"errcode": 0,
"command": "setWorkTime"
}
5. 设置中心配置参数
POST :http://192.168.1.117:8081/SDCAPI/V1.0/VionSoftware/do/webclient/setCenterParam
请求参数:
{
"channelid": 1
"centerconfig":{
"httpUploadAddr":"",
"keepaliveinterval":10,
"keepaliveswitch":1,
"uploadjpginterval":10,
"uploadjpgnum":2,
"uploadjpgswitch":0
}
}
返回:
{
"success": 1,
"describe": "setCenterParam OK",
"errcode": 0,
"command": "setCenterParam"
}
\ No newline at end of file \ No newline at end of file
API20211215/算法参数配置接口.txt 0 → 100644
1.获取算法配置
POST : http://192.168.1.117:8081/SDCAPI/V1.0/VionSoftware/do/webclient/getAlgConfig
请求参数:
{
"channelid": 1
}
返回结果:
{
"success":1,
"describe":"算法设置查询成功",
"channelid": 1, //
"runtype": 1, //类型1-7 目前只支持三种 1.进出客流 4.区域 6.人脸
"algconfig":
{
"resource":
{
"total_resouce_free": 20,//总资源剩余 [0,100]
"resouce_usage": 20, //资源使用率，[0,100]
},
"roi":
{
"imagepath": "../../../TEMP/1462519844378479.jpg", //画ROI的那张截图路径
"imagesize_H": 1280,
"imagesize_W": 1280,
"cameraheight": 500, //单位cm
"angle": 0, //角度
"mode": 0, //选择模式, 0:宽松 1:严格
"directioncount": 0,//方向个数
"linecount": 0, //进门线个数
"rectcount": 0, //检测框个数
"directionxysets"://方向线坐标
[
{
"beginx":123,
"beginy":456,
"endx": 223,
"endy": 556
},
...
],
"linexysets"://进门线坐标initRect
[
{ //一条进门线
"coordinates":
[ //每条进门线含有N个坐标点
{ //一个坐标点
"x":123,
"y":456
}
...
]
},
...
],
"recxysets"://检测框坐标
[
{ //一个检测框
"coordinates":
[ //每个检测框含有N个坐标点
{ //一个坐标点
"x":123,
"y":456
}
...
]
},
...
],
},
"config": //算法基本参数
{
"inout"://进出客流
{
"zoomscale": 3, //人头尺寸 [0.5,4] step=0.01 alg:x100 表示传入算法时，该值要*100
"zoomscalemin": 20, //最小人头尺寸 [0,1000] step=5
"zoomscalemax": 300, //最大人头尺寸 [0,1000] step=5
"sensitivity1": 20, //敏感度1 [0,100] step=1
"sensitivity2": 40, //敏感度2 [0,100] step=1
"sensitivity3": 20, //敏感度3 [0,100] step=1
"displaymode": 1, //模式选择 0:录像 1：经典 2：调试 3：展示
"tracethreshold": 3, //轨迹跟踪阀值 [1,5] step=0.1 alg:x100
"preframenum": 30, //轨迹预测帧数 [1,100] step=1
"trackmotionthreshold": 1, //轨迹移动阀值 [0,10] step=0.1 alg:x100
"trackshapethreshold": 0.5, //轨迹形态阀值 [0,1] step=0.1 alg:x100
"incoefficient": 0, //走入参数 [0,2] step=0.1 alg:x100
"outcoefficient": 0, //走出参数 [0,2] step=0.1 alg:x100
},
"area"://区域客流
{
"zoomscale": 3, //人头尺寸 [0.5,4] step=0.01 alg:x100 表示传入算法时，该值要*100
"zoomscalemin": 20, //最小人头尺寸 [0,1000] step=5
"zoomscalemax": 300, //最大人头尺寸 [0,1000] step=5
"sensitivity1": 20, //敏感度1 [0,100] step=1
"sensitivity2": 40, //敏感度2 [0,100] step=1
"sensitivity3": 20, //敏感度3 [0,100] step=1
"displaymode": 1, //模式选择 0:录像 1：经典 2：调试 3：展示
"tracethreshold": 3, //轨迹跟踪阀值 [1,5] step=0.1 alg:x100
"trackmotionthreshold": 1, //轨迹移动阀值 [0,10] step=0.1 alg:x100
"areacoefficient": 1, //区域参数 [0.1,10] step=0.01 alg:x100
},
"face"://人脸客流
{
"zoomscale": 3, //人头尺寸 [0.5,4] step=0.01 alg:x100 表示传入算法时，该值要*100
"zoomscalemin": 20, //最小人头尺寸 [0,1000] step=5
"zoomscalemax": 300, //最大人头尺寸 [0,1000] step=5
"sensitivity1": 20, //敏感度1 [0,100] step=1
"sensitivity2": 40, //敏感度2 [0,100] step=1
"sensitivity3": 20, //敏感度3 [0,100] step=1
"displaymode": 1, //模式选择 0:录像 1：经典 2：调试 3：展示
"tracethreshold": 3, //轨迹跟踪阀值 [1,5] step=0.1 alg:x100
"preframenum": 30, //轨迹预测帧数 [1,100] step=1
"trackmotionthreshold": 1, //轨迹移动阀值 [0,10] step=0.1 alg:x100
"trackshapethreshold": 0.5, //轨迹形态阀值 [0,1] step=0.1 alg:x100
"removesimilarity":75, //去重相似度 [10,100] step=0.01 alg:x100
"removetime":15, //去重时间 [0,1200] step=1
"facelum":0.5, //人脸亮度 [0,1] step=0.01 alg:x100
"facequalitythreshold": 3.5, //人脸质量阀值 [0,5] step=0.1 alg:x100
"maxage":70, //最大年龄 [1,100] step=1
"minage":1, //最小年龄 [1,100] step=1
"genderthreshold":0.5, //男女阀值 [0,1] step=0.01 alg:x100
"facecaptureinterval":3, //人脸抓取间隔 [1,20] step=1
"incoefficient": 1, //走入参数 [0.1,10] step=0.01 alg:x100
"outcoefficient": 1, //走出参数 [0.1,10] step=0.01 alg:x100
}
}
}
}
2.设置算法配置
POST :http://192.168.1.117:8081/SDCAPI/V1.0/VionSoftware/do/webclient/modAlgConfig
参数:
{
"channelid": 1,
"runtype": 1, //类型1-7 目前只支持三种 1.进出客流 4.区域 6.人脸
"roi":
{
"imagepath": "../../../TEMP/1462519844378479.jpg", //画ROI的那张截图路径
"imagesize_H": 1280,
"imagesize_W": 1280,
"cameraheight": 500, //单位cm
"angle": 0, //角度
"mode": 0, //选择模式, 0:宽松 1:严格
"directioncount": 0,//方向个数
"linecount": 0, //进门线个数
"rectcount": 0, //检测框个数
"directionxysets"://方向线坐标
[
{
"beginx":123,
"beginy":456,
"endx": 223,
"endy": 556
},
...
],
"linexysets"://进门线坐标
[
{ //一条进门线
"coordinates":
[ //每条进门线含有N个坐标点
{ //一个坐标点
"x":123,
"y":456
}
...
]
},
...
],
"recxysets"://检测框坐标
[
{ //一个检测框
"coordinates":
[ //每个检测框含有N个坐标点
{ //一个坐标点
"x":123,
"y":456
}
...
]
},
...
]
},
"config": //算法基本参数
{
"inout"://进出客流
{
"zoomscale": 3, //人头尺寸 [0.5,4] step=0.01 alg:x100 表示传入算法时，该值要*100
"zoomscalemin": 20, //最小人头尺寸 [0,1000] step=5
"zoomscalemax": 300, //最大人头尺寸 [0,1000] step=5
"sensitivity1": 20, //敏感度1 [0,100] step=1
"sensitivity2": 40, //敏感度2 [0,100] step=1
"sensitivity3": 20, //敏感度3 [0,100] step=1
"displaymode": 1, //模式选择 0:录像 1：经典 2：调试 3：展示
"tracethreshold": 3, //轨迹跟踪阀值 [1,5] step=0.1 alg:x100
"preframenum": 30, //轨迹预测帧数 [1,100] step=1
"trackmotionthreshold": 1, //轨迹移动阀值 [0,10] step=0.1 alg:x100
"trackshapethreshold": 0.5, //轨迹形态阀值 [0,1] step=0.1 alg:x100
"incoefficient": 0, //走入参数 [0,2] step=0.1 alg:x100
"outcoefficient": 0, //走出参数 [0,2] step=0.1 alg:x100
},
"area"://区域客流
{
"zoomscale": 3, //人头尺寸 [0.5,4] step=0.01 alg:x100 表示传入算法时，该值要*100
"zoomscalemin": 20, //最小人头尺寸 [0,1000] step=5
"zoomscalemax": 300, //最大人头尺寸 [0,1000] step=5
"sensitivity1": 20, //敏感度1 [0,100] step=1
"sensitivity2": 40, //敏感度2 [0,100] step=1
"sensitivity3": 20, //敏感度3 [0,100] step=1
"displaymode": 1, //模式选择 0:录像 1：经典 2：调试 3：展示
"tracethreshold": 3, //轨迹跟踪阀值 [1,5] step=0.1 alg:x100
"trackmotionthreshold": 1, //轨迹移动阀值 [0,10] step=0.1 alg:x100
"areacoefficient": 1, //区域参数 [0.1,10] step=0.01 alg:x100
},
"face"://人脸客流
{
"zoomscale": 3, //人头尺寸 [0.5,4] step=0.01 alg:x100 表示传入算法时，该值要*100
"zoomscalemin": 20, //最小人头尺寸 [0,1000] step=5
"zoomscalemax": 300, //最大人头尺寸 [0,1000] step=5
"sensitivity1": 20, //敏感度1 [0,100] step=1
"sensitivity2": 40, //敏感度2 [0,100] step=1
"sensitivity3": 20, //敏感度3 [0,100] step=1
"displaymode": 1, //模式选择 0:录像 1：经典 2：调试 3：展示
"tracethreshold": 3, //轨迹跟踪阀值 [1,5] step=0.1 alg:x100
"preframenum": 30, //轨迹预测帧数 [1,100] step=1
"trackmotionthreshold": 1, //轨迹移动阀值 [0,10] step=0.1 alg:x100
"trackshapethreshold": 0.5, //轨迹形态阀值 [0,1] step=0.1 alg:x100
"removesimilarity":75, //去重相似度 [10,100] step=0.01 alg:x100
"removetime":15, //去重时间 [0,1200] step=1
"facelum":0.5, //人脸亮度 [0,1] step=0.01 alg:x100
"facequalitythreshold": 3.5, //人脸质量阀值 [0,5] step=0.1 alg:x100
"maxage":70, //最大年龄 [1,100] step=1
"minage":1, //最小年龄 [1,100] step=1
"genderthreshold":0.5, //男女阀值 [0,1] step=0.01 alg:x100
"facecaptureinterval":3, //人脸抓取间隔 [1,20] step=1
"incoefficient": 1, //走入参数 [0.1,10] step=0.01 alg:x100
"outcoefficient": 1, //走出参数 [0.1,10] step=0.01 alg:x100
}
}
}
响应：
{
"success":1,
"describe":"算法参数修改成功",//可选
"errcode": 23, //可选
"command": "modChannel" //可选
}
API20211215/算法授权文件接口.txt 0 → 100644
1.上传算法授权文件
POST: http://192.168.1.117:8081/SDCAPI/V1.0/VionSoftware/do/webclient/uploadLicense
参数:
{"license":"AppName=VionSoftware
AppVersion=1.0.5
Vendor=vionvision
LicenseType=trial
ExpiredDays=60
AuthorizationDate=2021-9-13
Functions=255
DeviceCount=1
DeviceIDs=67E8EA4E6AD290D2750AFC1DC54CC2B8
SerialNumber=7gAAPwgAAPfEXwAAAB7ixAAA7QAAAIMKfwAAAL0AAABjAAAAVgAAABsAVKwAAE8K+wAAACEAAACfAAAAtwAAAOIAuQDUAEwKAKQAPQAAAADHAAAAmAAAAOIA2gAAlL0KAAB4AAAAAGZTdwAAAGhVlwAAzwAAANAKCjVEF6lZAKmQ196xAAC87CEAAH4AAAANCgAAvAAAABYAAAAAAMwAAAA9AOUAAACTCgAAbgAAAMYw+Xl7ACwAAAAAAF6DMYwGCgAApgAAADwAAAAAAIoAAABmAKsAAACVCgAAhQAAAPdmlGzJAACGsgMAAA8AAACzCkj/PBa3AF93JJA72vP3QQ=="}
响应:
{
"success": 1,
"describe": "uploadLicense OK",
"errcode": 0,
"command": "uploadLicense"
}
\ No newline at end of file \ No newline at end of file
README.md 0 → 100644
# sdc-face
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
package.json 0 → 100644
{
"name": "sdc-face",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.6.5",
"element-ui": "^2.12.0",
"fabric": "^4.6.0",
"vue": "^2.6.11",
"vue-router": "^3.5.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential"
],
"rules": {
"indent": "off",
"no-console": "off",
"no-unused-vars": "off",
"no-use-before-define": "off",
"no-undef": "off",
"no-irregular-whitespace": "off",
"no-debugger": "off",
"vue/no-unused-components": "off"
},
"parserOptions": {
"parser": "babel-eslint"
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)"
],
"env": {
"mocha": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/favicon.ico 0 → 100644
No preview for this file type
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-12-16 10:55:51
* @LastEditTime: 2021-12-26 10:24:08
* @LastEditors: your name
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /sdc-face/src/App.vue
-->
<template>
<div id="app">
<div class="tabbox">
<el-menu
:default-active="activeIndex"
class="menus"
mode="horizontal"
active-text-color="#409EFF"
router
@select="handleSelect"
>
<el-menu-item index="/">
<template slot="title">
<i class="el-icon-setting"></i>
<span>算法配置</span>
</template>
</el-menu-item>
<el-menu-item index="/system">
<template slot="title">
<i class="el-icon-s-grid"></i>
<span>通用配置</span>
</template></el-menu-item>
<el-menu-item index="/datashow" >
<template slot="title">
<i class="el-icon-pie-chart"></i>
<span>数据管理</span>
</template>
</el-menu-item>
</el-menu>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
activeIndex:'/'
}
},
methods:{
handleSelect(){
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
width: 1200px;
margin: 0 auto;
}
.menus{
text-align: center;
}
</style>
src/api/apiList.js 0 → 100644
/*
* @Author: panda
* @Date: 2021-12-18 13:48:39
* @LastEditTime: 2021-12-24 17:30:03
* @LastEditors: Please set LastEditors
* @Description: api列表
* @FilePath: /sdc-face/src/api/apilist.js
*/
import api from './index'
const baseUrl = "http://huayan.320.io:80"
export default {
//截图
captureImage(params){
let url = baseUrl + "/SDCAPI/V1.0/VionSoftware/do/webclient/cutpic"
return api.get(url, params);
},
// 获取算法参数
getAlgo(params, header) {
let url = baseUrl + "/SDCAPI/V1.0/VionSoftware/do/webclient/getAlgConfig"
return api.post(url, params);
},
//设置算法参数
setAlgo(params, headers) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/modAlgConfig'
return api.post(url, params, headers);
},
//获取服务配置
getDeviceBasicInfo(params, id) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/deviceBasicInfo'
return api.get(url, params);
},
//设置中心配置参数
setCenterParam(params) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/setCenterParam'
return api.post(url, params);
},
//获取存储配置
getBusiness(params, id) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/getBusiness'
return api.get(url, params);
},
//设置存储配置
setModBusiness(params, id) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/modBusiness'
return api.post(url, params);
},
//设置工作时间
setWorking(params, id) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/setWorkTime'
return api.post(url, params);
}
}
\ No newline at end of file \ No newline at end of file
src/api/axios.js 0 → 100644
/*
* @Author: panda
* @Date: 2021-12-18 13:45:24
* @LastEditTime: 2021-12-24 15:47:12
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /sdc-face/src/api/axios.js
*/
import axios from "axios";
import router from "../router/index";
import { Message, Loading } from "element-ui";
let loading;
//内存中正在请求的数量
let loadingNum = 0;
function startLoading() {
if (loadingNum == 0) {
loading = Loading.service({
lock: true,
text: "拼命加载中...",
background: "rgba(255,255,255,0.5)"
});
}
//请求数量加1
loadingNum++;
}
function endLoading() {
//请求数量减1
loadingNum--;
if (loadingNum <= 0) {
loading.close();
}
}
// 创建 axios 实例
let service = axios.create({
// headers: {'Content-Type': 'application/Text'},
timeout: 600000
});
// 添加请求拦截器
service.interceptors.request.use(
config => {
// startLoading();
let atoken = localStorage.getItem("atoken");
if (atoken) {
// 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.authorization = atoken;
} else {
}
if (config.method == "get") {
config.params = {
_t: Date.parse(new Date()) / 1000,
...config.params
};
}
return config;
},
err => {
// 请求错误处理
return Promise.reject(err);
}
);
// 添加响应拦截器
service.interceptors.response.use(response => {
// endLoading();
if (response.data && response.data.ecode && response.data.ecode == 401) {
Message.warning({ message: "用户登录过期，请重新登录!" });
localStorage.removeItem("atoken");
router.replace({
path: "/"
});
// location.reload();
} else {
let { data } = response;
// data.response = response;
return data;
}
err => {
// endLoading();
if (err && err.response) {
Message.error({ message: err.response.data.enote });
} else {
Message.error({ message: "连接服务器失败!" });
}
return Promise.reject(err);
};
});
/**
* 创建统一封装过的 axios 实例
* @return {AxiosInstance}
*/
export default function() {
return service;
}
src/api/index.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-12-18 13:40:09
* @LastEditTime: 2021-12-18 13:46:30
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /sdc-face/src/api/index.js
*/
import axios from "./axios";
let instance = axios();
export default {
get(url, params, headers) {
let options = {};
if (params) {
options.params = params;
}
if (headers) {
options.headers = headers;
}
return instance.get(url, options);
},
post(url, data, headers, params) {
let options = {};
if (params) {
options.params = params;
}
if (headers) {
options.headers = headers;
}
return instance.post(url, data, options);
},
put(url, params, headers) {
let options = {};
if (headers) {
options.headers = headers;
}
return instance.put(url, params, options);
},
post2(url, params, headers) {
let options = {};
if (headers) {
options.headers = headers;
}
return instance.post(url, params, options);
},
delete(url, params, headers) {
let options = {};
if (params) {
options.data = params
}
if (headers) {
options.headers = headers;
}
return instance.delete(url, options);
}
};
src/api/install.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-12-18 13:47:29
* @LastEditTime: 2021-12-18 14:02:49
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /sdc-face/src/api/install.js
*/
import apiList from "./apiList";
const install = function(Vue) {
if (install.installed) {
return;
}
install.installed = true;
Object.defineProperties(Vue.prototype, {
$api: {
get() {
return apiList;
}
}
});
};
export default {
install
};
src/assets/css/public.css 0 → 100644
.el-menu--horizontal>.el-menu-item{
width: 33%;
font-size: 20px;
}
.el-slider__input{
width: 105px!important;
}
.el-form-item__label{
padding-top:5px!important;
}
.el-slider__runway.show-input{
margin-right: 108px!important;
}
.el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
line-height: 40px;
}
.advancedbox .el-slider__input{
width: 75px!important;
}
.advancedbox .el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase{
width: 20px;
}
.advancedbox .el-input-number--mini .el-input__inner {
padding: 0;
}
.advancedbox .el-slider__runway.show-input{
margin-right: 78px!important;
}
.advancedbox .el-button{
width: 100%;
text-align: center;
padding: 7px 5px;
}
.advancedbox .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
margin-bottom: -5px!important;
overflow: hidden;
}
.advancedbox .el-form-item .el-form-item--small{
overflow: hidden!important;
}
.algobox .el-form-item__label{
font-size: 12px;
}
\ No newline at end of file \ No newline at end of file
src/components/HelloWorld.vue 0 → 100644
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/main.js 0 → 100644
/*
* @Author: panda
* @Date: 2021-12-16 10:55:51
* @LastEditTime: 2021-12-18 14:24:05
* @LastEditors: Please set LastEditors
* @Description: 入口
* @FilePath: /sdc-face/src/main.js
*/
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import ElementUI from "element-ui";
import api from "./api/install";
import './assets/css/public.css'
import "element-ui/lib/theme-chalk/index.css";
Vue.config.productionTip = false
Vue.use(ElementUI, { size: "small", zIndex: 3000 });
Vue.use(api);
new Vue({
router,
render: h => h(App),
}).$mount('#app')
src/router/index.js 0 → 100644
/*
* @Author: panda
* @Date: 2021-12-18 12:56:14
* @LastEditTime: 2021-12-18 14:10:17
* @LastEditors: Please set LastEditors
* @Description: 路由设置
* @FilePath: /sdc-face/src/router/index.js
*/
import Vue from "vue";
import VueRouter from "vue-router";
import AlgoSetting from '../views/Algo'
import SystemSetting from '../views/System'
import DataShow from '../views/DataShow'
Vue.use(VueRouter);
const defalutrouter = [{
name:'algoset',
path:"/",
component:AlgoSetting
},{
name:'systemset',
path:"/system",
component:SystemSetting
},{
name:'datashow',
path:"/datashow",
component:DataShow
}]
const router = new VueRouter({
// mode: "history",
// base: process.env.BASE_URL,
routes: defalutrouter
});
export default router;
\ No newline at end of file \ No newline at end of file
src/views/Algo/advancedSet.vue 0 → 100644
<!--
* @Author: panda
* @Date: 2021-12-20 10:11:31
* @LastEditTime: 2021-12-24 14:46:50
* @LastEditors: Please set LastEditors
* @Description: 算法参数高级设置
* @FilePath: /sdc-face/src/views/Algo/advancedset.vue
-->
<template>
<div class="advancedbox">
<div>
<el-form ref="form" :model="advconfig" label-width="95px">
<el-form-item label="请选择模型:">
<el-select size="mini" v-model="advconfig.displaymode">
<el-option :value="0" label="录像"></el-option>
<el-option :value="1" label="经典"></el-option>
<el-option :value="2" label="调试"></el-option>
<el-option :value="3" label="展示"></el-option>
</el-select>
</el-form-item>
<el-form-item label="正面敏感度:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.sensitivity2"
@change="senDataChange"
:min="0"
:max="100"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('sensitivity2',40)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="背面敏感度:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.sensitivity3"
@change="senDataChange"
:min="0"
:max="100"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('sensitivity3',20)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="最小人头:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.zoomscalemin"
@change="senDataChange"
:min="0"
:max="100"
:step="5"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('zoomscalemin',20)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="最大人头:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.zoomscalemax"
@change="senDataChange"
:min="0"
:max="100"
:step="5"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('zoomscalemax',300)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="轨迹跟踪阈值:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.tracethreshold"
@change="senDataChange"
:min="1"
:max="5"
:step="0.1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('tracethreshold',3)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="轨迹预测帧数:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.preframenum"
@change="senDataChange"
:min="0"
:max="100"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('preframenum',30)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="轨迹移动距离:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.trackmotionthreshold"
@change="senDataChange"
:min="0"
:max="10"
:step="0.1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('trackmotionthreshold',1)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="轨迹形态阈值:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.trackshapethreshold"
@change="senDataChange"
:min="0"
:max="1"
:step="0.1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('trackshapethreshold',0.5)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="去重相似度:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.removesimilarity"
@change="senDataChange"
:min="10"
:max="100"
:step="0.01"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('removesimilarity',75)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="去重时间:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.removetime"
@change="senDataChange"
:min="0"
:max="1200"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('removetime',15)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="人脸质量阈值:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.facequalitythreshold"
@change="senDataChange"
:min="0"
:max="5"
:step="0.1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('facequalitythreshold',3.5)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="最大年龄:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.maxage"
@change="senDataChange"
:min="0"
:max="100"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('maxage',70)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="最小年龄:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.minage"
@change="senDataChange"
:min="1"
:max="100"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('minage',1)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="男女阈值:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.genderthreshold"
@change="senDataChange"
:min="0"
:max="1"
:step="0.01"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('genderthreshold',0.5)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="人脸抓取频率:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.facecaptureinterval"
@change="senDataChange"
:min="1"
:max="20"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('facecaptureinterval',3)">默认值</el-button>
</div>
</el-form-item>
<el-form-item label="抓拍图像上限:">
<div class="silderbox">
<el-slider
input-size="mini"
v-model="advconfig.value"
@change="senDataChange"
:min="0"
:max="20"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</div>
<div class="btnbox">
<el-button size="mini" @click="setDefault('facecaptureinterval',3)">默认值</el-button>
</div>
</el-form-item>
<div class="btn-group">
<div class="btn-item">
<el-button size="mini" type="primary" @click="saveConfig">保存</el-button>
</div>
<div class="btn-item">
<el-button size="mini" @click="returnSet">返回</el-button>
</div>
</div>
</el-form>
<div></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
senData2: {
minValue: 0,
maxValue: 100,
step: 1,
value: 40,
defaultValue: 40,
},
senData3: {
minValue: 0,
maxValue: 100,
step: 1,
value: 20,
defaultValue: 20,
},
};
},
props:{
advconfig:{
type: Object,
required: true
}
},
methods: {
senDataChange() {},
/**
* @description: 恢复默认
* @param {*} params 参数
* @param {*} data 值
* @return {*}
*/
setDefault(params, data){
this.advconfig[params] = data;
},
returnSet() {
this.$emit("closeadv", false);
},
saveConfig(){
this.$emit("saveconfig", 'config',this.advconfig);
},
},
created() {},
};
</script>
<style>
.advancedbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1006;
background: #fff;
border: 1px solid #ccc;
}
.advancedbox form {
overflow: hidden;
}
.silderbox {
width: 170px;
float: left;
}
.btnbox {
float: left;
width: 50px;
overflow: hidden;
margin: 3px 0 0 10px;
}
.btn-group {
float: right;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 5px;
}
.btn-group .btn-item {
float: right;
margin: 3px 10px;
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/Algo/index.vue 0 → 100644
<!--
* @Author: panda
* @Date: 2021-12-18 12:57:47
* @LastEditTime: 2021-12-26 10:16:32
* @LastEditors: Please set LastEditors
* @Description: 算法配置
* @FilePath: /sdc-face/src/views/Algo/index.vue
-->
<template>
<div class="algobox">
<el-row :gutter="10">
<div class="leftbox">
<div class="video-box">
<div class="video-title">标注图像</div>
<div class="video-play">
<roicontent
:dtype="drawtype"
:bgUrl="roiimg"
:rois="roidata"
ref="rois"
@roiset="saveConfig"
></roicontent>
</div>
<div class="about-set">
<div class="setbtn-box">
<el-checkbox v-model="checked">规则设置</el-checkbox>
<span class="title" v-show="!checked"
>当前高度为3米进门线为宽松模式</span
>
<span v-show="checked">
<el-popover
placement="bottom"
width="320"
style="margin: 0 20px"
v-model="shapevisible"
>
<div style="text-align: left; margin: 0">
<el-radio
v-model="shape"
label="polygon"
style="margin-right: 20px"
@change="selectShape('polygon','recxysets')"
>多边形</el-radio
>
<el-radio
v-model="shape"
label="rect"
@change="selectShape('rect','recxysets')"
>矩形</el-radio
>
</div>
<div style="color:#ccc;font-size:12px">
选择多边形绘制，可以通过鼠标根据实际场景任意选定锚点，最后通过闭合实现多边形区域绘制。
</div>
<el-button slot="reference" @click="selectShape('rect','recxysets')" class="" size="mini" :class="{'isactive':active=='recxysets'}">识别区域</el-button>
</el-popover>
<el-popover
placement="bottom"
width="260"
style="margin-right: 20px"
v-model="todoorvisible"
>
<div style="text-align: left; margin: 0; color: #ccc">
用鼠标完成进门方向绘制,箭头方向表示人的进入方向。
</div>
<el-button slot="reference" @click="selectShape('arrow','directionxysets')" :class="{'isactive':active=='directionxysets'}"
size="mini">进门方向</el-button
>
</el-popover>
<el-popover
placement="bottom"
width="260"
v-model="linevisible"
>
<div style="text-align: left; margin: 0">
<el-select
v-model="doorLine"
placeholder="请选择"
size="mini"
>
<el-option label="宽松模式" :value="1"></el-option>
<el-option label="严格模式" :value="2"></el-option>
</el-select>
<div style="text-align: left; margin: 0; color: #ccc">
请用鼠标标定门的位置，如果您选择了严格模式，则只有人的轨迹跨过这条线才会被计数，如果选择了宽松模式，则人走到线附近也会被计数。
</div>
</div>
<el-button slot="reference" @click="selectShape('line','linexysets')" size="mini" :class="{'isactive':active=='linexysets'}"
>进门线</el-button
>
</el-popover>
<el-button slot="reference" style="float:right;margin:5px 20px 0 0;" type="primary" @click="saveRoi()" size="mini"
>保存</el-button
>
</span>
</div>
<div class=""></div>
</div>
</div>
</div>
<!-- 客流算法设置 -->
<div class="rightbox">
<div class="set-box">
<div class="header">客流算法</div>
<div class="set-content">
<advancedSet
@closeadv="closeadvancedModal"
@saveconfig="saveConfig"
:advconfig="algoform"
v-show="advvisbale"
></advancedSet>
<el-form ref="form" :model="algoform" label-width="70px">
<div>
<el-tooltip
class="item tipinfo"
effect="dark"
content="人头尺寸大小"
placement="right"
>
<i class="el-icon-question" style="color:#ccc"></i>
</el-tooltip>
<el-form-item label="人头尺寸:" class="algosetfrom">
<el-slider
class="algoslider"
input-size="mini"
v-model="algoform.zoomscale"
:min="algoform.zoomscalemin"
:max="algoform.zoomscalemax"
:step="defalutConfig.zoomstep"
@change="senDataChange"
show-input
:show-tooltip="false"
>
</el-slider>
</el-form-item>
</div>
<div>
<el-tooltip
class="item tipinfo"
effect="dark"
content="敏感度越高则人越容易被检出,同时也容易出现吴检！"
placement="right"
>
<i class="el-icon-question" style="color:#ccc"></i>
</el-tooltip>
<el-form-item label="敏感度:">
<el-slider
class="algoslider"
input-size="mini"
v-model="algoform.sensitivity1"
@change="senDataChange"
:min="0"
:max="100"
:step="1"
show-input
:show-tooltip="false"
>
</el-slider>
</el-form-item>
</div>
<div class="topset">
<el-button type="text" @click="advclick">高级</el-button>
</div>
</el-form>
</div>
</div>
</div>
</el-row>
</div>
</template>
<script>
import roicontent from "./roi.vue";
import advancedSet from "./advancedSet.vue";
export default {
components: {
roicontent,
advancedSet,
},
data() {
return {
checked: false,
doorLine: 1,
shape: "rect",
advvisbale: false,
shapevisible: false,
roiimg: "",
drawtype: "react",
linevisible: false,
todoorvisible: false,
headersize: "",
Sensibility: "",
active:'',
roidata:[{roi:{}}],
algconfigData:{},
algoform: {
zoomscale: 3, //人头尺寸 [0.5,4] step=0.01 alg:x100 表示传入算法时，该值要*100
zoomscalemin: 20, //最小人头尺寸 [0,1000] step=5
zoomscalemax: 300, //最大人头尺寸 [0,1000] step=5
sensitivity1: 20, //敏感度1 [0,100] step=1
sensitivity2: 40, //敏感度2 [0,100] step=1
sensitivity3: 20, //敏感度3 [0,100] step=1
displaymode: 1, //模式选择 0:录像 1：经典 2：调试 3：展示
tracethreshold: 3, //轨迹跟踪阀值 [1,5] step=0.1 alg:x100
preframenum: 30, //轨迹预测帧数 [1,100] step=1
trackmotionthreshold: 1, //轨迹移动阀值 [0,10] step=0.1 alg:x100
trackshapethreshold: 0.5, //轨迹形态阀值 [0,1] step=0.1 alg:x100
removesimilarity: 75, //去重相似度 [10,100] step=0.01 alg:x100
removetime: 15, //去重时间 [0,1200] step=1
facelum: 0.5, //人脸亮度 [0,1] step=0.01 alg:x100
facequalitythreshold: 3.5, //人脸质量阀值 [0,5] step=0.1 alg:x100
maxage: 70, //最大年龄 [1,100] step=1
minage: 1, //最小年龄 [1,100] step=1
genderthreshold: 0.5, //男女阀值 [0,1] step=0.01 alg:x100
facecaptureinterval: 3, //人脸抓取间隔 [1,20] step=1
incoefficient: 1, //走入参数 [0.1,10] step=0.01 alg:x100
outcoefficient: 1, //走出参数 [0.1,10] step=0.01 alg:x100
},
defalutConfig: {
zoomstep: 0.1,
},
};
},
methods: {
senDataChange() {
this.saveConfig('config',this.algoform)
},
advclick() {
this.advvisbale = true;
},
/**
* @description: 设置ROI绘制图形及类型
* @param {*} val 图形类型
* @param {*} type 绘制类型
* @return {*}
*/
selectShape(val,type) {
this.$refs.rois.setDrawType(val,type);
this.active = type;
},
headeDataChange() {},
closeadvancedModal() {
this.advvisbale = false;
},
/**
* @description: 获取配置参数
* @param {*}
* @return {*}
*/
getConfig(){
this.$api.getAlgo().then(res => {
this.algconfigData = res;
this.algoform = res.algconfig.config.face;
this.roidata = res.algconfig.roi
})
},
/**
* @description: 保存算法配置
* @param {*} data 保存数据
* @return {*}
*/
saveConfig(type,data){
debugger
if(type == 'config') {
this.algconfigData.config.face = JSON.stringify(data);
} else if(type == 'roi') {
debugger
this.algconfigData.roi = JSON.stringify(data)
}
console.log(JSON.stringify(this.algconfigData).length)
this.$api.setAlgo(JSON.stringify(this.algconfigData), headers).then(res => {
if(res.code == 200) {
this.algconfigData.scene.config = this.algoform;
}
})
},
/**
* @description: 保存ROI设置
* @param {*}
* @return {*}
*/
saveRoi(){
this.$refs.rois.saveRoi()
},
},
created(){
this.getConfig()
}
};
</script>
<style scoped>
.algobox {
margin-top: 10px;
}
.video-box {
text-align: left;
}
.leftbox {
float: left;
width: 860px;
}
.rightbox {
width: 335px;
float: left;
margin-left: 10px;
}
.video-play {
height: 500px;
background: #333;
}
.video-box .video-title {
height: 40px;
line-height: 40px;
border: 1px solid rgba(134, 132, 132, 0.5);
padding-left: 20px;
background: rgba(142, 228, 251,1);
}
.about-set {
text-align: left;
height: 40px;
line-height: 40px;
padding-left: 10px;
border: 1px solid rgba(134, 132, 132, 0.5);
}
.set-box .header {
height: 40px;
line-height: 40px;
background: rgba(142, 228, 251,1);
text-align: left;
padding-left: 10px;
width: 100%;
}
.set-content {
position: relative;
}
.setbtn-box .title {
font-size: 14px;
color: #409eff;
padding-left: 10px;
}
.tipinfo {
float: left;
padding-top: 10px;
width: 20px;
}
.algosetfromitem {
position: relative;
float: left;
}
.algoslider {
float: left;
width: 230px;
}
.topset {
text-align: right;
color: #000;
}
.isactive{
background: #409eff;
color: #fff;
}
</style>
src/views/Algo/roi.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-12-18 17:18:34
* @LastEditTime: 2021-12-24 17:26:15
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /sdc-face/src/views/Algo/roi.vue
-->
<template>
<div class="modal-body b-box">
<div class="modal-left">
<div class="pic" id="picbox">
<img :src="bgUrl" height="500" width="860" alt="" @load="imgload">
<canvas id="main" class="cavmain" height="500" width="860" ></canvas>
</div>
</div>
</div>
</template>
<script>
import { fabric } from "fabric";
var drawingObject = null; //当前绘制对象
var mouseFrom = {},
mouseTo = {},
drawType = "",
canvasObjectIndex = 0,
canvasObject = null,
textbox = null;
var drawWidth = 2; //笔触宽度
var color = "#E34F51"; //画笔颜色
var moveCount = 1; //绘制移动计数器
var doDrawing = false; // 绘制状态
var cvselect = false;
var curObjcet = null;
var cvunselect = true;
export default {
data(){
return {
canvas:null,
polygonMode: false,
showligang:true,
pointArray: [],
activeShape: false,
lineArray: [],
klassarr:[],
bgUrl:"",
drawWidth: 2,
roitype:"",
}
},
props:["dtype","rois"],
watch:{
rois(){
}
},
methods:{
imgload(){
this.initRoI();
},
setDrawType(val, type){
//获取所有绘制的对象
if(val == 'polygon') {
this.drawPolygon();
} else {
this.polygonMode = false;
}
this.roitype = type;
drawType = val
/**
* @description: 初始化ROI设置
* @param {*}
* @return {*}
*/
},
initRoI(){
let {linexysets:[{coordinates:linec}], directionxysets,recxysets:[{coordinates:recxc}]} = this.rois;
debugger
this.intline(linec);
drawType = 'line'
this.drawing("init");
this.initRect(recxc);
drawType = 'rect'
this.drawing("init");
this.initArrow(directionxysets[0])
drawType = 'arrow'
this.drawing("init");
},
/**
* @description: 坐标转换
* @param {xy} 坐标集合
* @return {*} 转换后结果
*/
setxy(xy){
let W = document.getElementsByTagName("img")[0].naturalWidth,
H = document.getElementsByTagName("img")[0].naturalHeight;
let {height,width} = document.getElementById('main');
let scalWidth = width/W;
let scalHeight = height/H;
let obj = {};
// debugger
obj.x = xy.x * scalWidth
obj.y = xy.y* scalHeight
// obj.x = xy.x
// obj.y = xy.y
return obj
},
initRect(points) {
let mousxy = this.setxy( points[0])
mouseFrom.x = mousxy.x;
mouseFrom.y = mousxy.y;
let mouseToxy = this.setxy( points[2])
mouseTo.x = mouseToxy.x;
mouseTo.y = mouseToxy.y;
},
intline(points){
let mf = this.setxy(points[0])
mouseFrom.x = mf.x;
mouseFrom.y = mf.y;
let mt = this.setxy(points[1])
mouseTo.x = mt.x;
mouseTo.y = mt.y ;
},
intPolygon(points) {
let {x,y} = this.setxy(points[0])
mouseFrom.x = x;
mouseFrom.y = y;
let pointarr = [];
points.map(ele => {
let {x,y} = this.setxy(ele)
let obj = {
x:x,
y:y
}
pointarr.push(obj);
})
this.polygonpoint = pointarr
},
initArrow(points){
let xyf = {
x:points.beginx,
y:points.beginy,
}
let xyt = {
x:points.endx,
y:points.endy,
}
let mfxy = this.setxy(xyf)
mouseFrom.x = mfxy.x;
mouseFrom.y = mfxy.y;
let mtxy = this.setxy(xyt)
mouseTo.x = mtxy.x;
mouseTo.y = mtxy.y;
},
drawPloygen(){},
drawing(type) {
var vthis = this;
var color = this.color
if (drawingObject && type == "draw") {
this.canvas.remove(drawingObject);
}
switch (drawType) {
case "arrow": //箭头
var x1 = mouseFrom.x,
x2 = mouseTo.x,
y1 = mouseFrom.y,
y2 = mouseTo.y;
var w = x2 - x1,
h = y2 - y1,
sh = Math.cos(Math.PI / 4) * 16;
var sin = h / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
var cos = w / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
var w1 = (16 * sin) / 4,
h1 = (16 * cos) / 4,
centerx = sh * cos,
centery = sh * sin;
/**
* centerx,centery 表示起始点，终点连线与箭头尖端等边三角形交点相对x，y
* w1 ，h1用于确定四个点
*/
var path = " M " + x1 + " " + y1;
path += " L " + (x2 - centerx + w1) + " " + (y2 - centery - h1);
path +=
" L " + (x2 - centerx + w1 * 2) + " " + (y2 - centery - h1 * 2);
path += " L " + x2 + " " + y2;
path +=
" L " + (x2 - centerx - w1 * 2) + " " + (y2 - centery + h1 * 2);
path += " L " + (x2 - centerx - w1) + " " + (y2 - centery + h1);
path += " Z";
this.canvasObject = new fabric.Path(path, {
stroke:'red',
fill: 'blue',
strokeWidth: this.drawWidth,
roitype:'directionxysets'
});
break;
case "line": //直线
this.canvasObject = new fabric.Line(
[mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{
strokeWidth: 2,
class: "line",
originX: "center",
originY: "center",
selectable: true,
hasBorders: true,
hasControls: true,
evented: true,
objectCaching: false,
stroke: "red",
drawtype:'line',
roitype:'linexysets'
}
);
break;
case "rect": //长方形
// eslint-disable-next-line no-redeclare
var left = mouseFrom.x,
top = mouseFrom.y;
this.canvasObject = new fabric.Rect({
left: left,
top: top,
width: mouseTo.x - left, //矩形的宽度
height: mouseTo.y - top, //矩形的高度
fill: "rgba(0,0,0,.3)", //填充的颜色
stroke: "orange", // 边框原色
roitype:'recxysets',
strokeWidth: 1, // 边框大小
});
break;
case "polygon": //路径绘制
var left = mouseFrom.x,
top = mouseFrom.y,
path = vthis.path;
this.canvasObject = new fabric.Polygon(vthis.polygonpoint, {
hasControls: true,
stroke: color,
fill: "rgba(255, 255, 255, 0)",
roitype:'recxysets'
});
break;
default:
break;
}
// canvasObject.index = getCanvasObjectIndex();
if (this.canvasObject) {
this.canvasObject.on("selected", function() {
cvselect = true;
cvunselect = true;
curObjcet = vthis.canvasObject || curObjcet;
});
this.canvasObject.on("deselected", function() {
var group = vthis.canvas.getObjects();
cvunselect = false;
});
this.canvasObject.drawtype = drawType;
vthis.canvas.add(this.canvasObject); //.setActiveObject(canvasObject)
drawingObject = this.canvasObject;
}
},
addPoint(e) {
var random = Math.floor(Math.random() * 10000);
var id = new Date().getTime() + random;
var circle = new fabric.Circle({
radius: 5,
fill: "#ffffff",
stroke: "#333333",
strokeWidth: 0.5,
left: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
top: (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
selectable: false,
hasBorders: false,
hasControls: false,
originX: "center",
originY: "center",
id: id,
objectCaching: false
});
if (this.pointArray.length == 0) {
circle.set({
fill: "red"
});
}
var points = [
(e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
(e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
(e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
(e.pointer.y || e.e.layerY) / this.canvas.getZoom()
];
this.line = new fabric.Line(points, {
strokeWidth: 2,
fill: "#999999",
stroke: "#999999",
class: "line",
originX: "center",
originY: "center",
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
});
if (this.activeShape) {
var pos = this.canvas.getPointer(e.e);
var points = this.activeShape.get("points");
points.push({
x: pos.x,
y: pos.y
});
var polygon = new fabric.Polygon(points, {
stroke: "rgb(255, 126,10)",
strokeWidth: 1,
fill: "#cccccc",
opacity: 1,
hasBorders: false,
hasControls: true,
evented: false,
selectable: true,
objectCaching: false
});
polygon.drawtype = drawType;
this.canvas.remove(this.activeShape);
this.canvas.add(polygon);
this.activeShape = polygon;
this.canvas.requestRenderAll();
} else {
var polyPoint = [
{
x: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
y: (e.pointer.y || e.e.layerY) / this.canvas.getZoom()
}
];
var polygon = new fabric.Polygon(polyPoint, {
stroke: "#333333",
strokeWidth: 1,
fill: "#cccccc",
opacity: 0.3,
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
});
this.activeShape = polygon;
this.canvas.add(polygon);
}
this.activeLine = this.line;
this.pointArray.push(circle);
this.lineArray.push(this.line);
this.canvas.add(this.line);
this.canvas.add(circle);
},
Initfab() {
var vthis = this;
var deleteIcon =
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
var img = document.createElement("img");
//设置图形显示拖拽点样式
if (drawType !== "polygon") {
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: -10,
offsetX: -30,
cursorStyle: "pointer",
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 16
});
}
function deleteObject(eventData, transform) {
var target = transform.target;
var canvas = target.canvas;
cvselect = false;
canvas.remove(target);
canvas.requestRenderAll();
}
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, - size / 2, -size / 2, size, size);
ctx.restore();
}
img.src = deleteIcon;
window.zoom = window.zoom ? window.zoom : 1;
this.canvas = new fabric.Canvas("main", {});
this.canvas.selectionColor = "rgba(0,0,0,0)";
this.canvas.on("mouse:down", function(options) {
//设置每个区域只允许设置一次
let klassArr = vthis.canvas.getObjects();
let drawstatus = true;
for(let i = 0;i < klassArr.length; i++) {
if(klassArr[i].roitype == vthis.roitype){
drawstatus =false;
break;
}
}
if(!drawstatus) {return false}
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
let e = options;
this.skipTargetFind = false;
try {
// 此段为判断是否闭合多边形，点击红点时闭合多边形
if (vthis.pointArray.length > 1) {
// e.target.id == this.pointArray[0].id 表示点击了初始红点
if (e.target && e.target.id == vthis.pointArray[0].id) {
vthis.generatePolygon();
}
}
//未点击红点则继续作画
if (vthis.polygonMode) {
vthis.addPoint(e);
}
} catch (error) {
console.log(error);
}
if (!cvselect) {
doDrawing = true;
} else {
if (!cvunselect) {
cvselect = false;
}
}
});
var vthis = this;
this.canvas.on("mouse:up", function(options) {
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
// if(cvselect) {
// vthis.saveRoi(curObjcet, curObjcet.roitype)
// }
// if(vthis.canvasObject != null) {
// vthis.saveRoi(vthis.canvasObject, vthis.canvasObject.roitype)
// }
vthis.canvasObject = null;
let unique = [...new Set(vthis.klassarr)]
vthis.klassarr = unique
drawingObject = null;
moveCount = 1;
doDrawing = false;
});
this.canvas.on("mouse:move", function(options) {
if (drawType == "polygon") {
if (vthis.activeLine && vthis.activeLine.class == "line") {
var pointer = vthis.canvas.getPointer(options.e);
vthis.activeLine.set({ x2: pointer.x, y2: pointer.y });
var points = vthis.activeShape.get("points");
points[vthis.pointArray.length] = {
x: pointer.x,
y: pointer.y,
zIndex: 1
};
vthis.activeShape.set({
points: points
});
vthis.canvas.renderAll();
}
vthis.canvas.renderAll();
return false;
}
if (moveCount % 2 && !doDrawing) {
//减少绘制频率
return;
}
moveCount++;
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
vthis.drawing("draw");
});
function transformMouse(mouseX, mouseY) {
return { x: mouseX / window.zoom, y: mouseY / window.zoom };
}
},
//生成多边形
generatePolygon() {
var points = new Array();
this.pointArray.map((point, index) => {
points.push({
x: point.left,
y: point.top
});
this.canvas.remove(point);
});
this.lineArray.map((line, index) => {
this.canvas.remove(line);
});
this.canvas.remove(this.activeShape).remove(this.activeLine);
var polygon = new fabric.Polygon(points, {
stroke: "rgb(255,126,10)",
strokeWidth: this.drawWidth,
fill: "rgba(255, 255, 255, 0)",
selectable: true,
hasBorders: true,
hasControls: true,
evented: true,
objectCaching: false,
transparentCorners: false,
drawtype: 'polygon',
roitype:'recxysets'
});
polygon.drawtype = drawType;
this.canvas.add(polygon);
// polygon.key = this.citem.config['算法ID']
this.canvasObject = polygon
this.activeLine = null;
this.activeShape = null;
this.polygonMode = false;
this.doDrawing = false;
this.drawType = null;
var group = this.canvas.getObjects();
},
// 绘制多边形开始，绘制多边形和其他图形不一样，需要单独处理
drawPolygon() {
drawType = "polygon";
this.polygonMode = true;
//这里画的多边形，由顶点与线组成
this.pointArray = new Array(); // 顶点集合
this.lineArray = new Array(); //线集合
// this.canvas.isDrawingMode = false;
},
capImg(){
this.$api.captureImage().then(res => {
this.bgUrl = 'data:image/png;base64,' + res;
})
},
saveRoi(){
let areaisActive = false, inoutActive = false, doorLineActive = false;
let W = document.getElementsByTagName("img")[0].naturalWidth,
H = document.getElementsByTagName("img")[0].naturalHeight;
let {height,width} = document.getElementById('main');
let scalWidth = W/width;
let scalHeight = H/height;
let linspoint = [];
let directionxysets = [];
let recxysets = [];
let cavArr = this.canvas.getObjects();
console.log("🚀 ~ file: roi.vue ~ line 556 ~ saveRoi ~ cavArr", cavArr)
cavArr.map(ele => {
debugger
if(ele.roitype == 'linexysets') {
let { bl,tr} = ele.lineCoords;
bl.x = bl.x*scalWidth
bl.y = bl.y*scalHeight
tr.x = tr.x*scalWidth
tr.y = tr.y*scalHeight
let obj = {
coordinates:[]
}
obj.coordinates.push(bl)
obj.coordinates.push(tr)
linspoint.push(obj)
doorLineActive = true
this.rois['linexysets'] = linspoint;
} else if (ele.roitype == 'recxysets' && ele.drawtype == 'rect') {
let { tl,tr,bl,br} = ele.aCoords
bl.x = bl.x*scalWidth
bl.y = bl.y*scalHeight
br.x = br.x*scalWidth
br.y = br.y*scalHeight
tl.x = tl.x*scalWidth
tl.y = tl.y*scalHeight
tr.x = tr.x*scalWidth
tr.y = tr.y*scalHeight
let obj = {
coordinates:[]
}
obj.coordinates.push(tl)
obj.coordinates.push(tr)
obj.coordinates.push(bl)
obj.coordinates.push(br)
recxysets.push(obj)
this.rois['recxysets'] = recxysets;
areaisActive = true
} else if(ele.roitype == 'recxysets' && ele.drawtype == 'polygon') {
let {points} = ele
let spoint = JSON.parse(JSON.stringify(points))
spoint.map(k=> {
k.x = k.x*scalWidth
k.y = k.y*scalHeight
})
let obj = {
coordinates:[]
}
obj.coordinates = spoint
recxysets.push(obj)
this.rois['recxysets'] = recxysets
areaisActive = true
} else if(ele.roitype == 'directionxysets') {
let {path} = ele;
let x = path[0][1]*scalWidth
let y = path[0][2]*scalHeight
let x1 = path[3][1]*scalWidth
let y1 = path[3][2]*scalHeight
let obj = {
coordinates:[{
x: x,
y: y
},{
x: x1,
y: y1
}]
}
directionxysets.push(obj);
this.rois['directionxysets'] = directionxysets;
inoutActive = true
}
})
let info = "";
if(!areaisActive){
info = "请绘制识别区域"
} else if(!inoutActive){
info = "请绘制进门方向"
} else if(!doorLineActive) {
info = "请绘制进门线"
} else {
this.$emit('roiset','roi',this.rois)
}
this.$message({
message: info,
type: 'warning'
});
},
},
mounted(){
this.Initfab();
this.capImg();
}
}
</script>
<style scoped>
.b-box canvas{
background: rgba(0,0,0,0);
}
.pic{
position: relative;
}
.pic img{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
src/views/DataShow/index.vue 0 → 100644
<!--
* @Author: panda
* @Date: 2021-12-18 13:00:42
* @LastEditTime: 2021-12-18 13:00:42
* @LastEditors: Please set LastEditors
* @Description: 数据展示
* @FilePath: /sdc-face/src/views/DataShow/index.vue
-->
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file \ No newline at end of file
src/views/System/index.vue 0 → 100644
<!--
* @Author: panda
* @Date: 2021-12-18 13:00:42
* @LastEditTime: 2021-12-26 10:17:41
* @LastEditors: Please set LastEditors
* @Description: 系统设置
* @FilePath: /sdc-face/src/views/DataShow/index.vue
-->
<template>
<div class="sysbox">
<div class="sys-item-box">
<div class="sys-header">服务状态信息</div>
<div class="sys-content">
<el-row>
<el-col :span="8">
<span>授权序列号：</span>
</el-col>
<el-col :span="8">授权有效期：{{licence.lastdate}}</el-col>
</el-row>
<el-row>
<el-col :span="8">
<span>算法版本号：</span>
</el-col>
<el-col :span="8">软件版本号：{{licence.cpuid}}</el-col>
<el-col :span="8">硬件版本号：</el-col>
</el-row>
<el-row>
<el-col :span="8">
<span>出厂版本号：</span>
</el-col>
<el-col :span="8">
<span>Web版本号：</span>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<span>数据服务地址：</span>
</el-col>
<el-col :span="8">
<span>中心状态：</span>
</el-col>
</el-row>
</div>
</div>
<div class="sys-item-box">
<div class="sys-header">工作时间</div>
<div class="sys-content">
<el-col :span="8">
<span>开始时间：</span>
<el-date-picker v-model="commonconfig.workStartTime" type="date" placeholder="选择日期">
</el-date-picker>
</el-col>
<el-col :span="8">
<span>结束时间：</span>
<el-date-picker v-model="commonconfig.workEndTime" type="date" placeholder="选择日期">
</el-date-picker>
</el-col>
<el-col :span="8">
<el-button type="primary" class="savebtn" size="mini" @click="setWorkTimer">保存</el-button>
</el-col>
</div>
</div>
<div class="sys-item-box">
<div class="sys-header">中心配置</div>
<div class="sys-content">
<div class="bth">
<span class="sys-label">Http地址：</span>
<div class="sys-set-content">
<el-input v-model="commonconfig.httpUploadAddr" size="mini"></el-input>
</div>
</div>
<el-row>
<span>上传截图：</span>
<el-radio v-model="commonconfig.uploadjpgswitch" :label="1">是</el-radio>
<el-radio v-model="commonconfig.uploadjpgswitch" :label="0">否</el-radio>
<el-button type="primary" class="savebtn" size="mini" @click="setCenterParam">保存</el-button>
</el-row>
<el-row class="bth">
<span class="sys-label">截图时间：</span>
<div class="sys-set-content">
<el-slider
v-model="commonconfig.uploadjpginterval"
:min="0"
:max="24"
:step="1"
range
show-stops
input-size="mini"
style="
position: relative;
float: none;
width: 376px;
margin-left: 15px;
"
>
</el-slider>
</div>
</el-row>
<el-row class="bth">
<span class="sys-label">截图张数：</span>
<div class="sys-set-content">
<el-slider
v-model="commonconfig.uploadjpgnum"
:min="180"
:max="3600"
:step="1"
input-size="mini"
show-input
:show-tooltip="false"
style="
position: relative;
float: none;
width: 376px;
margin-left: 15px;
"
>
</el-slider>
</div>
</el-row>
<el-row class="bth">
<span class="sys-label">截图间隔：</span>
<div class="sys-set-content">
<el-slider
v-model="commonconfig.uploadjpginterval"
:min="180"
:max="3600"
:step="1"
input-size="mini"
show-input
:show-tooltip="false"
style="
position: relative;
float: none;
width: 376px;
margin-left: 15px;
"
>
</el-slider>
</div>
</el-row>
<el-row>
<span>上传心跳：</span>
<el-radio v-model="cutpic" :label="1">是</el-radio>
<el-radio v-model="cutpic" :label="0">否</el-radio>
</el-row>
<el-row class="bth">
<span class="sys-label">心跳间隔：</span>
<div class="sys-set-content">
<el-slider
v-model="commonconfig.keepaliveinterval"
:min="180"
:max="3600"
:step="1"
input-size="mini"
show-input
:show-tooltip="false"
style="
position: relative;
float: none;
width: 376px;
margin-left: 15px;
"
>
</el-slider>
</div>
</el-row>
</div>
</div>
<div class="sys-item-box">
<div class="sys-header">存储配置</div>
<div class="sys-content">
<el-row>
<span>发送间隔：</span>
<el-radio-group v-model="sendinterval">
<el-radio v-for="(item,index) in sdata" :key="index" :label="item.key">{{item.val}}</el-radio>
</el-radio-group>
</el-row>
<el-row style="margin-top:10px">
<span>数据存储：</span>
<el-checkbox v-model="save">本地保存</el-checkbox>
<el-button type="primary" class="savebtn" size="mini" @click="setModBusiness">保存</el-button>
</el-row>
</div>
</div>
<div class="sys-item-box">
<div class="sys-header">备份</div>
<div class="sys-content">
<el-row>
<el-col :span="19">
<el-checkbox-group v-model="backList">
<el-checkbox v-for="(item,index) in backListData" :key="index" :label="item.val">{{item.key}}</el-checkbox>
</el-checkbox-group>
</el-col>
<el-col :span="5">
<el-button class="savebtn">备份</el-button>
</el-col>
</el-row>
<el-row>
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<span style="with:190px;display:inline-block;margin-left:10px"><el-input size="mini" style="width:100%" disabled="disabled"></el-input></span>
<el-button class="savebtn" style="margin-top:5px" size="small" type="success" @click="submitUpload">恢复</el-button>
<div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过500kb</div>
</el-upload>
</el-row>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cutpic: 0,
serverData: {},
stimer:"1",
licence:{},
commonconfig:{
workStartTime:""
},
backList:[],
fileList:[],
sendinterval:60,
businessData:{},
save:0,
backListData:[{
key:'算法参数',
val:'1',
},{
key:'规则参数',
val:'1',
},{
key:'模型参数',
val:'1',
},{
key:'运行参数',
val:'1',
}],
sdata:[{
key:'1',
val:'1秒'
},{
key:'6',
val:'6秒'
},{
key:'60',
val:'1分钟'
},{
key:'120',
val:'2分钟'
},{
key:'600',
val:'10分钟'
},{
key:'900',
val:'15分钟'
},{
key:'1800',
val:'30分钟'
},{
key:'3600',
val:'60分钟'
}]
};
},
methods:{
/**
* @description: 获取基础配置
* @param {*}
* @return {*}
*/
getDeviceBasicInfo(){
this.$api.getDeviceBasicInfo().then(res=> {
let {commonconfig,licence} = res.data;
this.commonconfig = commonconfig || {};
this.licence = licence;
})
},
/**
* @description: 获取存储配置
* @param {*}
* @return {*}
*/
getBusiness(){
this.$api.getBusiness().then(res=> {
let {result:{inout}} = res.business;
this.businessData = res.data
this.sendinterval = inout.sendinterval;
this.save = inout.save;
})
},
/**
* @description: 设置存储配置
* @param {*}
* @return {*}
*/
setModBusiness(){
this.businessData.result.inout.sendinterval = this.sendinterval;
this.businessData.result.inout.save = this.save;
this.$api.setModBusiness(this.businessData).then(res=> {
})
},
/**
* @description: 设置中心参数
* @param {*}
* @return {*}
*/
setCenterParam(){
let data = {
channelid:'1',
centerconfig:this.commonconfig
}
this.$api.setCenterParam(data).then(res => {
})
},
/**
* @description: 设置工作时间
* @param {*}
* @return {*}
*/
setWorkTimer(){
debugger
let data = {
startTime:this.commonconfig.workStartTime,
endTime:this.commonconfig.workEndTime,
}
this.$api.setWorking(data).then(res => {
})
},
handleRemove(){},
/**
* @description: 提交算法配置文件
* @param {*}
* @return {*}
*/
submitUpload(){},
},
created(){
this.getDeviceBasicInfo()
}
};
</script>
<style scope>
.sysbox {
margin-top: 10px;
font-size: 14px;
}
.sys-item-box .sys-header {
height: 35px;
line-height: 35px;
background: rgba(142,228,258,1);
padding-left: 10px;
}
.sys-item-box {
width: 100%;
overflow: hidden;
padding: 10px 0;
}
.sys-item-box .sys-content {
margin: 10px 0;
padding-left: 10px;
}
.savebtn {
float: right;
}
.sys-label {
float: left;
height: 35px;
line-height: 35px;
}
.sys-set-content {
float: left;
}
.bth {
overflow: hidden;
}
</style>
\ No newline at end of file \ No newline at end of file
yarn.lock 0 → 100644
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!