Skip to content

潘建波 / SDC-Face-Web

Go to a project
Commit 1a6c93de by 潘建波
Options

【new】提价第一个完整版本

1 parent cc117438
Inline Side-by-side
Showing 19 changed files with 3191 additions and 364 deletions
dist.zip 0 → 100644
No preview for this file type
package.json
......@@ -13,6 +13,7 @@
"element-ui": "^2.12.0",
"fabric": "^4.6.0",
"vue": "^2.6.11",
"vue-i18n": "^8.26.8",
"vue-router": "^3.5.3"
},
"devDependencies": {
......
public/index.html
<!--
* @Author: your name
* @Date: 2021-12-16 10:55:51
* @LastEditTime: 2021-12-30 09:20:45
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /SDC-Face-Web/public/index.html
-->
<!DOCTYPE html>
<html lang="">
<head>
......@@ -5,6 +13,9 @@
<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">
<script src="<%= BASE_URL %>js/config.js"></script>
<script src="<%= BASE_URL %>js/dateUnit.js"></script>
<script src="<%= BASE_URL %>js/echarts.common.min.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
......
public/js/config.js 0 → 100644
/*
* @Author: panda
* @Date: 2021-12-28 16:16:47
* @LastEditTime: 2022-01-04 21:51:45
* @LastEditors: Please set LastEditors
* @Description: 全局配置
* @FilePath: /SDC-Face-Web/public/js/config.js
*/
window.config = {
BASE_URL:'https://'+ location.host
}
\ No newline at end of file
public/js/dateUnit.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-12-30 08:38:29
* @LastEditTime: 2021-12-30 08:38:29
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /SDC-Face-Web/src/assets/js/dateUnit.js
*/
var dateUnit={
dateAdd:function(strInterval, NumDay, dtTmp){
if (dtTmp == null | dtTmp == "")
dtTmp = new Date();
switch (strInterval) {
case "m":
return new Date(Date.parse(dtTmp) + (60000 * NumDay));
case "h":
return new Date(Date.parse(dtTmp) + (3600000 * NumDay));
case "d":
return new Date(Date.parse(dtTmp) + (86400000 * (NumDay + 1)));
case "w":
return new Date(Date.parse(dtTmp) + ((86400000 * 7) * NumDay)
+ 86400000);
case "M":
return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + NumDay, dtTmp
.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp
.getSeconds());
case "y":
return new Date((dtTmp.getFullYear() + NumDay), dtTmp.getMonth(), dtTmp
.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp
.getSeconds());
}
},
dateFormat:function(date, fmt){
var o = {
"M+" : date.getMonth() + 1, // 月份
"d+" : date.getDate(), // 日
"h+" : date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, // 小时
"H+" : date.getHours(), // 小时
"m+" : date.getMinutes(), // 分
"s+" : date.getSeconds(), // 秒
"q+" : Math.floor((date.getMonth() + 3) / 3), // 季度
"S" : date.getMilliseconds()
// 毫秒
};
// var week = {
// "0" : "\u65e5",
// "1" : "\u4e00",
// "2" : "\u4e8c",
// "3" : "\u4e09",
// "4" : "\u56db",
// "5" : "\u4e94",
// "6" : "\u516d"
// };
var week = {
"0" : "Sunday",
"1" : "Monday",
"2" : "Tuesday",
"3" : "Wednesday",
"4" : "Thursday",
"5" : "Friday",
"6" : "Saturday"
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "")
.substr(4 - RegExp.$1.length));
}
// if (/(E+)/.test(fmt)) {
// fmt = fmt
// .replace(
// RegExp.$1,
// ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f"
// : "\u5468")
// : "")
// + week[date.getDay() + ""]);
// }
if (/(E+)/.test(fmt)) {
fmt = fmt
.replace(
RegExp.$1,
((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? ""
: "")
: "")
+ week[date.getDay() + ""]);
}
for ( var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
: (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
},
strToDate:function(strDate) {
var st = strDate;
var date;
if(st.indexOf(' ')!=-1){
var a = st.split(" ");
var b = a[0].split("-");
var c = a[1].split(":");
date = new Date(b[0], b[1], b[2], c[0], c[1], c[2]);
}else{
var c = st.split(":");
if(c[2]){
date= new Date(2000, 1, 1, c[0], c[1], c[2]);
}else{
date= new Date(2000, 1, 1, c[0], c[1], 0);
}
}
return date;
}
}
var utiljs = {};
utiljs.weekComputedfn = {
dates: [],
formatDate: function (date) {
var year = date.getFullYear() + '-';
var month = (date.getMonth() + 1) + '-';
var day = date.getDate();
return month + day;
},
addDate: function (date, n) {
date.setDate(date.getDate() + n);
return date;
},
setDate: function (date) {
dates = [];
var week = date.getDay() - 1;
date = this.addDate(date, week * -1);
currentFirstDate = new Date(date);
for (var i = 0; i < 7; i++) {
dates.push(this.formatDate(i == 0 ? date : this.addDate(date, 1)));
}
return dates;
}
}
public/js/echarts.common.min.js 0 → 100644
This diff could not be displayed because it is too large.
src/App.vue
<!--
* @Author: your name
* @Date: 2021-12-16 10:55:51
* @LastEditTime: 2021-12-26 10:24:08
* @LastEditors: your name
* @LastEditTime: 2021-12-30 09:16:52
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /sdc-face/src/App.vue
-->
......@@ -62,7 +62,7 @@ export default {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
width: 1200px;
width: 1280px;
margin: 0 auto;
}
.menus{
......
src/api/apiList.js
/*
* @Author: panda
* @Date: 2021-12-18 13:48:39
* @LastEditTime: 2021-12-24 17:30:03
* @LastEditTime: 2021-12-31 15:59:05
* @LastEditors: Please set LastEditors
* @Description: api列表
* @FilePath: /sdc-face/src/api/apilist.js
*/
import api from './index'
const baseUrl = "http://huayan.320.io:80"
const baseUrl = window.config.BASE_URL
export default {
//截图
captureImage(params){
......@@ -31,7 +31,7 @@ export default {
},
//设置中心配置参数
setCenterParam(params) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/setCenterParam'
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/modCenterParam'
return api.post(url, params);
},
//获取存储配置
......@@ -48,5 +48,38 @@ export default {
setWorking(params, id) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/setWorkTime'
return api.post(url, params);
},
//获取模型
getModel(params, id) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/getModels'
return api.get(url, params);
},
//获取当前使用模型
getBussinessModel(params, id) {
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/getBusiness'
return api.get(url, params);
},
//设置模型
setModel(params){
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/modBusiness'
return api.post(url, params);
},
//表格数据
getFaceDetail(params){
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/getFaceDetail'
return api.post(url, params);
},
//chart
getFaceReport(params){
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/getFaceReport'
return api.post(url, params);
},
getFaceDetailNumber(params){
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/getFaceDetailNumber'
return api.post(url, params);
},
backupParams(params){
let url = baseUrl + '/SDCAPI/V1.0/VionSoftware/do/webclient/backupParams'
return api.post(url, params);
}
}
\ No newline at end of file
src/api/axios.js
/*
* @Author: panda
* @Date: 2021-12-18 13:45:24
* @LastEditTime: 2021-12-24 15:47:12
* @LastEditTime: 2021-12-27 19:18:50
* @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
......@@ -65,7 +65,7 @@ service.interceptors.request.use(
// 添加响应拦截器
service.interceptors.response.use(response => {
// endLoading();
if (response.data && response.data.ecode && response.data.ecode == 401) {
if (response.data.success && response.data.ecode && response.data.ecode == 401) {
Message.warning({ message: "用户登录过期，请重新登录!" });
localStorage.removeItem("atoken");
router.replace({
......
src/assets/css/public.css
......@@ -40,4 +40,14 @@
}
.algobox .el-form-item__label{
font-size: 12px;
}
.el-slider__runway.show-input{
margin-right:120px!important;
}
.el-slider__button{
width: 12px!important;
height: 12px!important;
}
.advancedbox .el-slider__runway.show-input{
margin-right:82px!important;
}
\ No newline at end of file
src/en.js 0 → 100644
module.exports = {
web: {
title: "Third photo"
},
placeholder: {
enter: "Please type in your favorite brand"
},
brands: {
nike: "Nike",
adi: "Adidas",
nb: "New Banlance",
ln: "LI Ning"
},
menu: {
algorithmSetting: "Algorithm settings",
systemSetting: "System settings",
systemInfo: "System information",
systemTool: "System tools",
systemLog: "System logs",
systemTable: "Statistical reports",
},
login: {
remember: "Remember password",
login: "Sign in",
userError: "User name wrong",
passwordError: "Password wrong",
videoPreview: "Video preview",
alertTip: "Please select IE9 and above IE browser to watch videos."
},
algorithm: {
modelDrawing: "Please complete the model frame drawing.",
leastThree: "Please select at least three segments for the entry mode.",
a0: "Region of interest refers to the detection area that the image analysis focuses on. Delineating such area for human body detection and facial recognition can reduce the processing time and increase the recognition accuracy. The recognition area can be drawn into polygons or rectangles. Rectangles are recommended for simple recognition areas.",
a1: "The entrance direction means to determine the direction of people’s entrance and exit. The direction may be drawn at any part of the video area as needed.",
a2: "Irregular shape starting point selection: the left mouse button click, select the starting point (note: there is no display in the figure), move the mouse, click again, both points into line; if the starting point selection fails, the right mouse button multiple times, delete the starting point, and then re-select the starting point;",
a3: "Under normal circumstances, it is recommended to use a simple channel strict mode, and a straight line as the cross line.",
a4: "Rectangular type",
a5: "When the recognition area is relatively simple and can be directly covered by a rectangle, the mouse selects the 'rectangle' radio button to draw:",
a6: "Click the mouse button to hold and drag to draw the rectangle recognition area.",
a7: "Right click and delete all.",
a8: "Entry direction",
a9: "According to the actual scene in and out of the direction of the mouse click on the left button, select the starting point, there will be blue dots in the picture is the starting point;",
a10: "The mouse clicks the left key again, completes the terminal arrow direction drawing, completes the customer to enter the door direction drawing.",
a11: "Right click, you can delete edge by side operation.",
a12: "Entrance line",
a13: "Passage mode",
a14: "In actual scenarios, the passage mode is recommended when the customers generally walk in the same direction along the passage.",
a15: "Click the left mouse button, select the starting point, move the mouse, click again, both points into line; if the starting point selection failed, the right mouse button multiple times, delete the starting point, and then re-select the starting point;",
a16: "Entry mode",
a17: "In actual scenarios, the entrance mode is recommended when the customers will enter an open space after going through the door, and their walking directions will be complicated with larger changes.",
a18: "Loose / Strict",
a19: "In the strict mode, people will be counted only when their track crosses this line; while in the loose one, people will also be counted even if they walk near the line，and the system intelligently judges whether the trajectory is counted according to the entry line mode.",
a20: "Calibration information",
a21: "Calibration information refers to the information of the area within the region of interest where the imaging and focus are the clearest and the image quality is the best, i.e. calibration area. Such information can be used to achieve the best face recognition effect.",
a22: "At the same time, three options for default zones are provided: F08P15, F12P12, F16P10;",
a23: "The method of mouse operation is the same as the rectangle type drawing method of recognition area.",
a24: "Head size",
a25: "Drag to select the appropriate head size.",
a26: "Head size information is composed of three boxes. Given the far-to-near movement of customers after entering the door, the box at the far end should be the smallest and slightly smaller than the head size; the one in the middle should be approximately equal to the head size; and the one at the near end should be the biggest and slightly larger than the head size.",
tooBig: "The area drawed is too large. Please select",
Repainting: "Re-draw",
keepAccuracy: "Maintain accuracy (using standard area)",
keepArea: "Keep area (possibly reduce accuracy)",
calibrationInformation: "Calibration information",
entranceMode: "Entry mode",
channelMode: "Passage mode",
needInstall: "This website needs to install video plug-ins before it can be used properly. Please reboot your browser manually after installation.",
needUpdate: "The video plug-in of this website is not the latest version, which may lead to some incomplete functions. Please update to the latest version.",
needUpdate1: 'The current version of the video plug-in is',
needUpdate2: ',some functions may be incomplete, please update to the latest version',
displayModel: "Display modes",
video: "Video recording",
classic: "Standard",
commisson: "Commissioning",
diagnosis: "Diagnosis",
algorithm: "Algorithm",
set: "Advanced",
Sensibility: "Sensibility",
Sensibility2: "Back body sensitivity",
Sensibility3: "Front body sensitivity",
inputParameter: "Input parameter",
outputParameter: "Output parameter",
headSize: "Head size",
trajectorySensitivity: "Trajectory sensitivity",
movingDistance: "Moving distance",
installHeight: "Height of installation",
isCalculateChild: "Calculation of children",
minimumDetection: "Minimum detection",
maximumDetection: "Maximum detection",
maximumPrediction: "Maximum prediction",
detectionCycle: "Detection cycle",
detectionFrame: "Detection frame",
defaultValue: "Default",
refresh: "Refresh",
allDefault: "All default",
selectModel: "Select model:",
closeOrOpen: "Algorithm close/open:",
recognitionArea: "Recognition area:",
roiSetting: "ROI setting",
inputPsw: "If there is no special requirement, please do not modify these parameters, so as to avoid any unexpected results.",
advancedParameter: "Advanced parameter",
recoveryDefault: "Restore to default",
passwordError: "Passowrd error",
videos: "Video",
realVideo: "Real time video",
algorithmStatus: "Algorithm state",
algorithmSetting: "Algorithm parameter settings",
sensitivity: "Sensitivity",
modelSelect1: "Detection model",
modelSelect2: "Recognition model",
standard: "Standard",
compatibility: "Compatibility",
userDefind: "Custom mode",
threeDimensional: "3D filtering",
intensify: "Intensify",
validCustomer: "Valid customer",
display: "Demonstration",
videoSetting: "Video setting",
whiteBalance: "White balance mode",
automaticMode: "Automatic mode",
manualMode: "Manual mode",
sunnyDay: "Sunny day",
incandescentLamp: "Incandescent lamp",
fluorescentLamp: "Fluorescent lamp",
dusk: "Dusk",
shadow: "Shadow",
warmFluorescentLamp: "Warm fluorescent lamp",
imageBrightness: "Image brightness",
brightness: "Brightness",
redGain: "Red gain",
blueGain: "Blue gain",
restoreDefault: "Restore to default",
titleFont1: "Current height ",
titleFont2: " meters,entry line with ",
titleFont3: " mode",
titleFont4: "Entrance line is ",
regulationSetting: "Rule settings",
heightTip: "(*Please install the device at the height of 2.5-4 meters and set a proper height, or the accuracy rate will be lower)",
installationHeight: "Height",
recognizeZone: "Region of interest",
polygon: "Polygon",
rectangle: "Rectangle",
rectangleTip: "Selecting polygon rendering can arbitrarily select anchor points according to the actual scene by mouse, and finally realize polygon region of interest rendering by closing.",
directTip: "Entrance direction: Please use mouse to complete the setting of the arrow, and the direction of arrow indicates the direction of people's entry.",
entryDirection: "Entry direction",
entryDoor: "Entrance line",
modeTip: "Please mark the position of the door with mouse. If you choose the strict mode, only the trajectory of a person crosses the line will be counted. If you choose the loose mode, the person will be counted when he walks near the line.",
senTip: "More higher sensitivity makes human easier to detect, at the same time, it is prone to cause mistake.",
detectTip: "This model can be configured and applied to detect faces.",
recTip: "This model can be configured and applied to identify human faces, including genders, ages and expressions.",
threeDimenTip: "Please select the exact height of the scene in the rule setting before considering the change of this option. In Enhancement mode, test results of overheight and insufficient-height are filtered out. In the valid customer mode, children whose heights are insufficient will be filtered out.",
displayTip1: "Standard mode: The standard mode displays the statistics of the number of people entering and leaving, detection areas and pictures captured.",
displayTip2: "Commissioning mode:The commissioning mode displays the statistics of the number of people entering and leaving, pictures captured, detection areas, head sizes, tracking lines, chip temperature, CPU usage and other values.",
displayTip3: "Demonstration mode: The demonstration mode displays the numbers of people entering and exiting, pictures captured, detection areas, tracking lines, etc.",
displayTip4: "Video recording mode: In the video recording mode, there is no display of any parameters on the screen",
checkIeVersion: "Please watch the video with IE 9 or latest versions",
maxPredictionFrame: "Maximum prediction frame",
handoverModel: "If the handover model is successfully saved, manual restart is required. Do you want to switch?",
selectStep: "Please select to revoke step.",
areaBigTip: "The area you selected exceeds the upper limit set under this height, and the system automatically selects the appropriate area size for you. Click OK to continue your settings.",
endDraw: "End to draw",
headSize: "Head size",
imageSet: "Image settings",
customSetting: "Advanced",
wideDynamic: "WDR",
focus:'Focus',
scene:'Scene',
preset: "Scenario modes",
chroma: "Chroma",
contrastRatio: "Contrast",
saturationLevel: "Saturation",
acuity: "Sharpness",
exposureTime: "Time of exposure",
faceBrightness: "Face brightness",
trackingThreshold: "Trajectory tracking threshold",
minimumMovingDistance: "Min. moving distance",
trajectoryShape: "Trajectory morphology threshold",
similarityOfRemoveRepetition: "De-repeat similarity",
timeOfRemoveRepetition: "De-repeat time",
predictionFrame: "Track prediction frame number",
movingDistance: "Track movement distance",
maxAge: "Maximum age",
minimumAge: "Minimum age",
minimumHeadFrame: "Minimum head frame",
maximumHeadFrame: "Maximum head frame",
addIn: "Gain",
strongLightSuppression: "Strong light suppression",
noiseReductionGrade: "Noise reduction grade",
fogPenetrationGrade: "Fog grade",
exposureRatio: 'WDR exposure ratio',
microsecond: 'Microsecond',
Amode: "Standard mode",
Bmode: "Dim light mode",
Cmode: "Backlight mode",
Dmode: "Mode D",
drawingTwoTheMaximum: "Drawing two the max.",
faceQuality: "Face quality threshold",
faceGrab: "Person capture limit",
grabTip: "The maximum number of images each person can capture for transmission",
genderThreshold: "Gender threshold",
faceGrabbingInterval: "Face capture frequency",
inOfCoefficient: "In of coefficient",
outOfCoefficient: "Out of coefficient",
widthTip: "The wide dynamic mode allows the image to be more clearly imaged in complex light, which in turn may be slightly blurred under ideal conditions.",
restart: "Restart",
restartTip: "Model changes need to be rebooted immediately. Do you want to continue modifying and rebooting the system?",
restartTip2: "Preset changes need to be rebooted immediately. Do you want to continue modifying and rebooting the system?",
kind1: "The parameters of the group will affect face detection, that is the 'box' on the face.",
kind2: "The parameters of the group will affect the trajectory of face tracking, that is, the 'line' behind the face.",
kind3: "The parameters of the grouping will affect face recognition, that is, gender, age, de-repeat.",
senData2Tip: "Raise the item to make it easier to detect the back of the person",
senData3Tip: "Raise the item to make it easier to detect a face that is partially obscured.",
zoomscaleminTip: "Faces smaller than this value (pixel) will not be detected.",
zoomscalemaxTip: "Face whose size is higher than the value (pixel) will not be detected.",
trackDataTip: "If this item is raised, the face trajectory will be harder to be captured (the trajectory is coarse blue, indicating that the trajectory is invalid, accordingly, the capturing will not work)",
previewDataTip: "When the item is raised, the trajectory of the same person will not easy to break.",
minMoveDataTip: "Rise the value will cause miss count, appear green line when it removed.",
shapeDataTip: "Corresponding to the smoothness of the trajectory, the higher the requirement for smoothness, the less smoothness of the trajectory will not be captured (the trajectory is green, indicating that the trajectory is invalid, corresponding, the capture is not effective)",
similarityDataTip: "The similarity between two people, too similar people will be judged to be the same person (snapshot box information is shown in blue)",
removalTimeDataTip: "To judge the time of a similar person (SEC).",
faceLightDataTip: "Whether the corresponding face is right or not, the face that is not positive enough is only captured and not recognized.",
faceDataTip: "The face quality can not reach this threshold, and it only snapshots do not recognize.",
maxAgeDataTip: "The maximum age of a person.",
minAgeDataTip: "The minimum age of a person.",
sexDataTip: "The higher the value, the more inclined to identify gender as female",
faceTimeDataTip: "Value more higher, more chance to capture face, and the amount of calculation more bigger.",
kindname1: "Detection parameters",
kindname2: "Tracking parameters",
kindname3: "Identification parameters",
ageWarning: "The minimum age can not exceed the maximum age. Please reset it.",
headsizeWarning: "The minimum headframe can not exceed the maximum headframe. Please reset it."
},
roi: {
crowdMode1: 'crowding mode1',
crowdMode2: 'crowding mode2',
crowdMode3: 'crowding mode3',
intelligentMode: 'Intelligent mode',
snapshotMode: 'snapshot mode',
roiRegion: "Region rendering:",
roiline: "Line drawing",
wireframe: "Wire-frame rendering",
roidir: "Drawing in and out direction:",
dirdescribe: "Click two point of video image to confirm in and out direction",
roidoorline: "Drawing entrance line:",
doorlinedescribe: "Click two points of video image to confirm entrance line",
ruleset: "Model and angel setting:",
roiangle: "Angle setting:",
selectModel: "Select Model:",
ruleeasy: "loose mode",
rulestrict: "strict mode",
height: "Height:",
restoreDefault: "Restore the default settings",
completealert: "Please complete the drawing then do other operations.",
roizonealert: "Please empty the ROI area then draw again.",
comregion: "Please draw the region of interest!",
comdir: "Please draw the enter direction area!",
comdoor: "Please end the door line drawing!",
checkFrame: "Each frame is checked",
checkFour: "Check 4 frames per 5 frames",
checkThree: "Check 3 frames per 4 frames",
checkTwo: "Check 2 frames per 3 frames",
checkOne: "Check 1 frames per 2 frames",
roiLarge: "The ROI is too large, if not redraw the reduced accuracy, confirm the save?",
currentSize: "The current actual detection area size is",
cpnsuming: "Single frame time consuming",
currentHeight: "ms,Current installation height",
setHeadSize: "m，The head size will be set to",
setFrame: "The framing policy will be set to",
setBox: "The maximum header box and the minimum header box will be set to"
},
setting: {
setAlert: 'RTSP port and RTMP port are forbidden to be the same, please reset',
seconds: 'Seconds',
heartInterval: 'Heartbeat interval:',
heartbeat: 'Upload heartbeat:',
faceImg: 'Send face images:',
faceImgNum: 'Send face image number:',
bodyImg: 'Send body images:',
faceFeature: 'Send face features:',
bodyFeature: 'Send body features:',
sendTrail: 'Send trail:',
picInterval: 'Snapshot interval:',
screenPic: 'Upload snapshot:',
sendimgTip: 'How many photos per person are sent（if available photos are not enough，then actual number will be less than this value），and this value is less than the value of "Person capture limit" in “Advanced algorithm parameter settings”。',
maximg: 'Photo sent limit:',
sendimgSet: 'Photo Settings',
tooLong: "Length is too long. Please re-enter.",
modeSelect: "Protocol select:",
networkSetting: "Network settings",
ipAddr: "IP Address:",
subnetMask: "Subnet mask:",
gateway: "Gateway:",
macAddr: "Mac address:",
centerServerSetting: "Center settings",
serverIp: "Center address:",
port: "Center port:",
videoServerIp: "Video server IP:",
paramSetting: "Storage settings",
dataTransmissionInterval: "Data transmission interval:",
second: "S",
minute: "Minute",
dataTransmissionOption: "Data storage:",
trafficSpeed: "Traffic speed",
saveData: "Local storage",
videoStreamSetting: "Video stream setting:",
workingTimeSetting: "Working time",
noExposureModeSetting: "Exposure mode setting",
exposureModeSetting: "Exposure mode setting:",
common: "Common",
foregroundExposure: "Foreground exposure",
backgroundExposure: "Background exposure",
saveSet: "Save set",
noWhetherRestartAutomatically: "Automatic reboot",
whetherRestartAutomatically: "Automatic reboot:",
restartTime: "Reboot time:",
acquisitionSettings: "Acquisition settings",
collectionFrequency: "Collection frequency:",
openWifi: "Open wifi:",
collectionThreshold: "Collection threshold:",
notNull: "Can not empty",
mustNumber: "Must be a number",
collectionSetting: "Collection setting",
serialNumber: "Serial number",
time: "time",
videoSetting: "Video setting",
videoName: "Video name:",
fontSize: "Font size:",
fontColor: "Font color:",
coordinateX: "Coordinate X:",
coordinateY: "Coordinate Y:",
selectFontSize: "Please select font size",
selectFontColor: "Please select font color",
yellow: "Yellow",
green: "Green",
blue: "Blue",
white: "White",
black: "Black",
red: "Red",
play: "Play",
noVideoName: "Video name",
noFontSize: "Font size",
noFontColor: "Font color",
noCoordinateX: "Coordinate X",
noCoordinateY: "Coordinate Y",
enterIp: "IP address can not empty",
correctIp: "Please input correct IP address",
contentNotEmpty: "Content can not empty",
correctFormat: "Please input correct format",
enterMac: "Mac address can not empty",
enterPost: "Port can not empty",
workMode: "Work mode",
modeSelection: "Mode selection:",
runMode: "Operation mode",
inspectionMode: "Self-checking mode",
videoProtocol: "Video agreement",
DNSsettings: "DNS settings",
PORTsettings: "Web port settings",
ports: "Port",
new: "+Add",
enterDns: "Please input DNS address",
enterPort: "Please input port",
enterCorrectDNS: "Please input correct DNS address",
tcpOrHttpTip: "Default is tcp mode. When we need our private protocol, choose http mode.",
portTip: "This port is the data receive port of the center server. The default port is 9595. If there is no special requirement, please do not modify it.",
saveTip: "Check this option will store people counting data in the device, for intermittent transmission. If not, the data may be lost during disconnection.",
workTimeTip: "You can choose the starting and ending time of the algorithm work every day. People counting data will not be generated outside the working time. If you choose both the starting time and the ending time to 0 clock, the algorithm will work all day.",
workModeTip: "Self-checking code is only used for produce and test, please do not select",
rebootTip: "Choose automatic reboot every day can improve the stability of the equipment.",
wifiTip: "If enabled, MAC of the periphery device will be automatically detected.",
serverAddress: "Http address:",
resetDataAfterRestart: "Reset the data after restarting",
autoClear: "Auto clear:",
setNumber: "Setting a number for display",
enterNumber: "Enter number:",
leaveNumber: "Exit number:",
recovery: "Recovery results",
tooBig: "Value is out of range",
videoProtocol: "Video protocols",
rtspProtocolSelection: "Rtsp protocol select:",
rtmpProtocolSelection: "Rtmp port settings:",
savePath: "Save location settings",
screenPath: "Screenshot path:",
videoPath: "Record video path:",
loginManagement: "Login management",
openLogin: "Open login:",
reset: "Reset",
changePassword: "Changing password",
oldPassword: "Old password：",
newPassword: "New password：",
repeatPassword: "Repeat new password：",
passwordNotMatch: "New password not same",
resetPassword: "Reset to original password?",
cantSpace: "Path cannot contain spaces",
cantChinese: "Path cannot contain Chinese",
autoClearTip: "After the device is restarted, the input and output numbers displayed in the video start from zero, but in any case, the number before restart does not affect the actual number of people counted by the device. (equipment is automatically cleared at 0 per day).",
setNumberTip: "Set up the number of people in and out of the video display for easy statistics in the test without affecting the actual number of people counted by the equipment.",
recoveryTip: "Restore the number of people in and out of the video, the result is today's 0:00 to the current time statistics",
protocolTip: "This option is only used to meet special video docking requirements.",
urlTip: "Algorithm configuration interface video playback plug-in video recording or screenshot save path.",
port2Tip: "This device WEB client is divided into port settings, default 8080 and 80",
loginTip: "Set up this device. Does web client need account password to login?",
dataSend: "Data transmission",
routineSet: "General settings",
screenNum: "Count results in the video",
screenShowSet: "Screen display number settings",
showTip: "The setting does not affect the number of people actually counted by the device. The device automatically resets at 0:00 every day.",
restartShowTit: "Value displayed after the reboot",
fromZero: "Start from zero",
fromDayData: "Start from the cumulative value of the day",
setScreenNum: "Screen value settings",
takeEffect: "Take effect",
setCurrentData: "Confirm as the cumulative value for the day"
},
systemInfo: {
sysTime: "System time",
systemCurrent: "Device time:",
systemRunning: "Running time:",
networkInfo: "Network information",
ipAddr: "IP address:",
serverIp: "Center server IP:",
videoServerIp: "Video server IP:",
gateway: "Gateway address:",
cPort: "Center port:",
vPort: "Video server IP:",
subnetMask: "Subnet mask:",
macAddr: "MAC address:",
networkState: "Network connection:",
centerConnectionState: "Center state:",
parameterInformation: "Parameter information",
videoChannelAmount: "Video channel amount:",
saveTemporaryDataOrNot: "Save temporary data or not:",
trafficFlowAndSpeed: "Traffic flow and speed:",
videoStreamSize: "Video stream Size:",
videoTransmissionInterval: "Video transmission interval:",
allDataSave: "Local data:",
videoCaptureFormats: "Video size:",
versionInformation: "Version information",
algorithmVersion: "Algorithm version:",
webVersion: "Web version:",
softwareVersion: "Software version:",
hardwareVersion: "Hardware version:",
resourceRate: "Resource occupancy",
cpuRate: "CPU occupancy:",
memorySize: "Memory occupancy rate:",
softwarename: 'Software name',
gpuRate: "GPU utilization rate:",
freeMemorySize: "Free memory size:",
flashVacant: "Residual storage space:",
videoChannel: "Video channel",
channelName: "Channel name",
videoName: "Video name",
operationMode: "Operation mode",
operationState: "Operation state",
cameraId: "Camera ID",
rtmpState: "RTMP connecting state",
softwarePeriod: "Software validity period",
dateOfExpiry: "Valid until:",
cpuNumber: "Serial number:",
connect: "Connect",
disconnect: "Disconnect",
onLine: "Online",
offLine: "Offline",
operation: "Operation",
debugging: "Debugging",
serverAddress: "Center address:",
permanentValidity: "Permanent"
},
sysTool: {
fillIn: 'Please fill in the blanks before proceeding with the operation.',
videoRecording: "Video recording",
videoMode: "Video mode:",
selectVideoMode: "Please select video mode",
originalVideo: "Original video",
algorithmVideo: "Algorithm video",
recordAll: "Record all",
videoLength: "Video length(minute):",
videoAmount: "Video amount:",
length: "Length",
channel: "Channel",
videoMode: "Video mode",
status: "Status",
operation: "Operation",
completedVideo: "Completed video",
fileTitle: "File title",
fileSize: "File size",
dataManipulation: "Data operations",
redata: "Re-transmit historical data",
to: "to",
dataRetransmission: "Re-Transmit Data",
wipeData: "Empty data",
cleardata: "Delete data",
resettPeople: "Resetting the result of people counting",
backupOperation: "Backup operations",
noParameterBackup: "Parameter backup",
parameterBackup: "Parameter backup:",
algorithmParameter: "Algorithm parameters",
roiCode: "Rule settings",
modelParameter: "Model parameter",
videoTitle: "Video title",
networkParameter: "Network parameters",
runningParameter: "Operating parameters",
ispParameter: "ISP parameters",
backupParameter: "Parameter backup",
restoreBackup: "Parameter restoration",
uploadFiles: "Select file",
upload: "Upload",
autoupdate: 'Auto update',
update: 'Update',
systemOperation: "System operations",
systemAdjusting: "System time calibration",
cComputerTime: "Current computer time:",
cDeviceTime: "Current device time:",
cTime: "Correction time",
modelupload: "Model uploading",
face1: 'Please upload business_3100_',
face2: 'Please upload business_2200_',
cm3: "Please select the file with suffix cm3!",
onlyGz: "Please select the file with suffix tar.gz!",
gz: "Please select the file with suffix tar.gz or lic!",
mvcmd: "Please select the file with suffix mvcmd!",
restartDevice: "Device reboot",
factoryReset:"Factory Reset",
clickRestart: "Click to restart device",
reboot: "Reboot",
softwareUpdate: "Firmware update",
Note: "Note：During the firmware upgrading process, please do not turn off the device, otherwise, the system files will be damaged.",
cAlgorithmV: "Current algorithm version:",
cSoftwareV: "Current software version:",
cWebV: "Current web version:",
cHardwareV: "Current hardware version:",
systemReset: "System reset",
clickResetV: "Click the buttom to reset the device to original version",
currentVersion: "Current version",
rVersion: "Reset version",
rAlgorithmV: "Reset algorithm version:",
rSoftwareV: "Reset software version:",
rWebV: "Reset Web version:",
rHardwareV: "Reset hardware version:",
Note2: "Note:Current configuration information will lost and restore to original setting after reset",
dAlgorithmConfig: "Delete algorithm configuration",
dAlgorithmFile: "Delete algorithm configuration file",
deletNote: "Be Cautious,algorithm configuration cannot be recovered after this action",
selectDelModel: "Select the algorithm configuration file to be deleted:",
allAlgorithm: "All algorithm configuration",
algorithmConfig: "Algorithm parameter configuration",
roiConfig: "ROI configuration",
modelConfig: "Model configuration",
enterInt: "Please enter a positive integer",
selectVideoMode: "Please select the video mode",
selectDate: "Please select the date",
vSizeNotNull: "Video size cannot be empty",
vSizeIsNum: "The video size must be a number",
vCountNotNull: "The number of video cannot be empty",
vCountIsNum: "The number of video must be numeral",
selectTime: "Please select the time",
uploadSuccess: "Upload successed!",
uploadError: "Upload failed!",
recordNow: "Recording now",
waitExecution: "Wait for execution",
wantDelPlan: "Are you sure you want to delete the plan?",
delSuccess: "Delete success!",
delFailed: "Delete failed",
cancelDelet: "Canceled deleting",
wantDelVideo: "Are you sure you want to delete the video?",
selectVideo: "Please select a video",
sureDel: "Is it sure to delete?",
downloadFailed: "Download failed",
sureRestart: "Are you sure to reboot?",
factoryreset:"Are you sure to factory reset?",
cancelled: "Canceled",
resetIt: "Are you sure to reset?",
timeWidthComputer: "Time synchronization with PC",
huashengke: 'phddns',
huashengke1: 'Successfully logged in to jump to peanut shell',
timeZone: "Time zone：",
NTPTime: "NTP time calibration",
serverAddr: "Server address：",
NTPport: "NTP port：",
timeInterval: "Checkout time interval：",
manualTime: "Manual time calibration",
equipmentTime: "Device time：",
settingTime: "Set time：",
redataTip: "Re-transmit the historical data stored in the device (select the time period).",
clearDataTip: "Delete all historical data stored in the device.",
timeBtn: "Effective immediately",
test: 'Test',
centerTime: 'Center time calibration',
linkSuccess: 'Connection successed',
linkError: 'Connection failed',
testTool: 'Testing tools',
testMode: 'Running modes',
testMode2: 'Running modes:',
common: 'Normal use',
netCamera: 'As network camera',
videoTest: 'Built-in video test',
sendData: 'Sending test data',
timeTip1: 'If you select this option, the system will calibrate the time with the data center at any time of network initialization (including the reboot of the camera and re-connection to the network after disconnection). Please confirm that the data center is connected. Otherwise, the time calibration will be invalid. You can also click “Effective Immediately” to immediately perform the center time calibration.',
timeTip2: 'If you select this option, the system will regularly calibrate the time with the NTP server. Please confirm that the NTP server is connected, or otherwise the NTP time calibration will be invalid. You can also click “Effective Immediately” to immediately perform the NTP time calibration. You can fill in the NTP port number and click “Test” to check whether NTP is connected.',
timeTip3: 'If you select this option, the system will perform a calibration at the moment you click “Effective Immediately”. '
},
sysLog: {
sysLog: "System log",
sysLog2: "System logs",
note: "Note:Recommended to select a time interval within one month. Tips: 0-debug information, 1-normal information, 2-warning information, 3-error information, 4-fatal error",
date: "Date:",
dogLog: "Thread logs",
serialNumber: "Id",
logContent: "Log content",
operationLog: "Operation logs"
},
sysTable: {
personTime: "",
recognizableNumber: "Front capture",
accumulativeEntry: "Cumulative enter",
accumulativeLeave: "Cumulative leave",
annualReport: "Annual",
monthlyReport: "Monthly report",
dailyReport: "Daily report",
weeklyReport: "Weekly report",
reportHour: "Hourly",
queryCriteria: "Query criteria",
selectYear: "Select year",
date: "Date",
enterTraffic: "Enter number",
outTraffic: "Leave number",
selectMonth: "Select month",
selectDay: "Select day",
exportTable: "Export table",
isSend: "Send?",
graphic: "graphic",
dataReport: "Data reports",
week1: "",
week2: "",
sexRatio: "Gender radio",
man: "Man",
lady: "Lady",
number: "Number",
time: "Time",
type: "Type",
gender: "Gender",
age: "Age",
mood: "Expression",
headPortrait: "Head portrait",
sendStatus:"Send Status",
people: "",
tip1: "< 18",
tip2: "18-25",
tip3: "26-35",
tip4: "36-45",
tip5: "46-55",
tip6: "> 55",
ageDistribution: "Age distribution",
numberOfPeople: "Number of people",
leave: "Leave",
enter: "Enter",
male: "Male",
female: "Female",
unknown: "Unknown",
peace: "Peace",
smile: "Smile",
happy: "Happy",
other: "Other",
passengerFlow: "Customer flow",
hours: "Hour",
passengerStatic: "People counting trend",
realTime: "Real-time data",
timeTip: "Display present day's data"
},
common: {
returnLogin: 'Return login',
inputContent: "Please input content",
beginTime: "Start time:",
endTime: "End time:",
selectTime: "Select time:",
noSelectTime: "Select time",
yes: "Yes",
no: "No",
cancel: "Cancel",
close: "Close",
open: "Open",
starttime: "Start time",
endtime: "End time",
startDate: "Start date",
endDate: "End date",
del: "Deleted",
download: "Download",
opeationRestart: "Warning: Please manually reboot the device after changing the settings.",
Prompt: "Tips",
check: "View",
title: "Smart customer counting and analysis camera",
exit: "Exit"
},
message: {
success: "Operation success",
error: "Operation fail",
restartTip: "This operation needs to be manually rebooted. Do you want to continue?"
},
button: {
save: "Save",
Return: "Return",
confirm: "OK",
cancel: "Cancel",
apply: "Apply",
add: "Add",
nosave: "Not save"
}
}
\ No newline at end of file
src/main.js
/*
* @Author: panda
* @Date: 2021-12-16 10:55:51
* @LastEditTime: 2021-12-18 14:24:05
* @LastEditTime: 2021-12-30 09:14:06
* @LastEditors: Please set LastEditors
* @Description: 入口
* @FilePath: /sdc-face/src/main.js
......@@ -13,10 +13,24 @@ import ElementUI from "element-ui";
import api from "./api/install";
import './assets/css/public.css'
import "element-ui/lib/theme-chalk/index.css";
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import axios from 'axios'
Vue.prototype.axios = axios;
Vue.config.productionTip = false
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: localStorage.lang || 'zh', // 语言标识
messages: {
'zh': {...require('./zh'),...zhLocale},
'en': {...require('./en'),...enLocale}
}
})
Vue.use(ElementUI, { size: "small", zIndex: 3000 });
Vue.use(api);
new Vue({
router,
i18n,
render: h => h(App),
}).$mount('#app')
src/views/Algo/advancedSet.vue
<!--
* @Author: panda
* @Date: 2021-12-20 10:11:31
* @LastEditTime: 2021-12-24 14:46:50
* @LastEditTime: 2021-12-30 14:49:08
* @LastEditors: Please set LastEditors
* @Description: 算法参数高级设置
* @FilePath: /sdc-face/src/views/Algo/advancedset.vue
......@@ -11,11 +11,8 @@
<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 size="mini" v-model="modelid" @change="setModel">
<el-option v-for="(item,index) in modelsList" :value="item.modelid" :label="item.modelname" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="正面敏感度:">
......@@ -311,7 +308,7 @@
<el-button size="mini" type="primary" @click="saveConfig">保存</el-button>
</div>
<div class="btn-item">
<el-button size="mini" @click="returnSet">返回</el-button>
<el-button size="mini" @click="returnSet">基础</el-button>
</div>
</div>
</el-form>
......@@ -325,6 +322,8 @@ export default {
data() {
return {
form: {},
modelid:0,
modelsList:[],
senData2: {
minValue: 0,
maxValue: 100,
......@@ -364,8 +363,46 @@ export default {
saveConfig(){
this.$emit("saveconfig", 'config',this.advconfig);
},
/**
* @description: 获取算法模型
* @return {*}
*/
getModels(){
this.$api.getModel().then(res => {
let {models} = res;
this.modelsList = models;
})
},
/**
* @description: 获取当前使用模型
*/
getBussinessModel(){
this.$api.getBussinessModel().then(res => {
let {business:{model:{id}}} = res;
this.modelid = id;
})
},
/**
* @description: 设置模型
*/
setModel(){
this.$api.setModel().then(res => {
let data = {business:{model:{id:this.modelid}},channelid:1}
this.$api.setModel(data).then(res => {
if(res.success){
this.$message({
message: res.describe,
type: 'success'
});
}
})
})
}
},
created() {
this.getModels();
this.getBussinessModel()
},
created() {},
};
</script>
......
src/views/Algo/index.vue
<!--
* @Author: panda
* @Date: 2021-12-18 12:57:47
* @LastEditTime: 2021-12-26 10:16:32
* @LastEditTime: 2022-01-04 16:29:58
* @LastEditors: Please set LastEditors
* @Description: 算法配置
* @FilePath: /sdc-face/src/views/Algo/index.vue
......@@ -92,6 +92,12 @@
<el-button slot="reference" style="float:right;margin:5px 20px 0 0;" type="primary" @click="saveRoi()" size="mini"
>保存</el-button
>
<el-button slot="reference" style="float:right;margin:5px 20px 0 0;" type="defalut" @click="resetRoi()" size="mini"
>全部清空</el-button
>
<el-button slot="reference" style="float:right;margin:5px 20px 0 0;" type="defalut" @click="refresh()" size="mini"
>刷新</el-button
>
</span>
</div>
<div class=""></div>
......@@ -124,8 +130,8 @@
class="algoslider"
input-size="mini"
v-model="algoform.zoomscale"
:min="algoform.zoomscalemin"
:max="algoform.zoomscalemax"
:min="defalutConfig.zoomscalemin"
:max="defalutConfig.zoomscalemax"
:step="defalutConfig.zoomstep"
@change="senDataChange"
show-input
......@@ -195,8 +201,8 @@ export default {
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
zoomscalemin: 0.5, //最小人头尺寸 [0,1000] step=5
zoomscalemax: 8, //最大人头尺寸 [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
......@@ -218,6 +224,8 @@ export default {
},
defalutConfig: {
zoomstep: 0.1,
zoomscalemin: 0.5, //最小人头尺寸 [0,1000] step=5
zoomscalemax: 8, //最大人头尺寸 [0,1000] step=5
},
};
},
......@@ -242,18 +250,28 @@ export default {
closeadvancedModal() {
this.advvisbale = false;
},
/**
* @description: 刷新
* @param {*}
* @return {*}
*/
refresh(){
this.getConfig('refresh')
},
/**
* @description: 获取配置参数
* @param {*}
* @return {*}
*/
getConfig(){
getConfig(type){
this.$api.getAlgo().then(res => {
this.algconfigData = res;
this.algoform = res.algconfig.config.face;
this.roidata = res.algconfig.roi
this.algoform = res.scene.config.json.face;
this.roidata = res.scene.rois
if(type == 'refresh'){
this.$refs.rois.resetRoi();
this.$refs.rois.capImg();
}
})
},
/**
......@@ -262,17 +280,24 @@ export default {
* @return {*}
*/
saveConfig(type,data){
debugger
let info = "";
if(type == 'config') {
this.algconfigData.config.face = JSON.stringify(data);
// this.algconfigData.scene[0].config.json = JSON.stringify(data);
this.algconfigData.scene.config.json.face = data;
info = "参数配置成功！"
} else if(type == 'roi') {
debugger
this.algconfigData.roi = JSON.stringify(data)
// this.algconfigData.scene[0].rois.roi = JSON.stringify(data)
this.algconfigData.scene.rois = data;
info = "标定配置成功！"
}
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;
this.$api.setAlgo(this.algconfigData).then(res => {
if(res.success) {
// this.algconfigData.scene.config = this.algoform;
this.$message({
message: info,
type: 'success'
});
}
})
},
......@@ -284,6 +309,9 @@ export default {
saveRoi(){
this.$refs.rois.saveRoi()
},
resetRoi(){
this.$refs.rois.resetRoi()
},
},
created(){
this.getConfig()
......@@ -353,7 +381,7 @@ export default {
.algoslider {
float: left;
width: 230px;
width: 245px;
}
.topset {
text-align: right;
......
src/views/Algo/roi.vue
<!--
* @Author: your name
* @Date: 2021-12-18 17:18:34
* @LastEditTime: 2021-12-24 17:26:15
* @LastEditTime: 2022-01-04 16:30:41
* @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
......@@ -10,8 +10,8 @@
<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>
<img :src="bgUrl" height="500" width="860" alt="" @load="imgload" />
<canvas id="main" class="cavmain" height="500" width="860"></canvas>
</div>
</div>
</div>
......@@ -35,139 +35,153 @@ var curObjcet = null;
var cvunselect = true;
export default {
data(){
data() {
return {
canvas:null,
canvas: null,
polygonMode: false,
showligang:true,
showligang: true,
pointArray: [],
activeShape: false,
activeShape: false,
lineArray: [],
klassarr:[],
bgUrl:"",
drawWidth: 2,
roitype:"",
}
klassarr: [],
bgUrl: "",
drawWidth: 2,
roitype: "",
};
},
props:["dtype","rois"],
watch:{
rois(){
}
props: ["dtype", "rois"],
watch: {
rois() {},
},
methods:{
imgload(){
this.initRoI();
methods: {
imgload() {
this.initRoI();
},
setDrawType(val, type){
setDrawType(val, type) {
//获取所有绘制的对象
if(val == 'polygon') {
this.drawPolygon();
if (val == "polygon") {
this.drawPolygon();
} else {
this.polygonMode = false;
this.polygonMode = false;
}
this.roitype = type;
drawType = val
/**
* @description: 初始化ROI设置
* @param {*}
* @return {*}
*/
drawType = val;
this.editShape(type)
},
initRoI(){
let {linexysets:[{coordinates:linec}], directionxysets,recxysets:[{coordinates:recxc}]} = this.rois;
debugger
/**
* @description: 初始化ROI设置
* @param {*}
* @return {*}
*/
initRoI() {
let {
linexysets: [{ coordinates: linec }],
directionxysets: [{ coordinates: directc }],
recxysets: [{ coordinates: recxc }],
} = this.rois[0].roi;
//绘制设备区域
if (recxc[0].y == recxc[1].y && recxc[2].y == recxc[3].y) {
this.initRect(recxc);
drawType = "rect";
} else {
this.intPolygon(recxc);
drawType = "polygon";
}
this.drawing("init");
//绘制进门线
this.intline(linec);
drawType = 'line'
drawType = "line";
this.drawing("init");
this.initRect(recxc);
drawType = 'rect'
//绘制进门方向
this.initArrow(directc);
drawType = "arrow";
this.drawing("init");
this.initArrow(directionxysets[0])
drawType = 'arrow'
this.drawing("init");
},
/**
* @description: 重置ROI
* @param {*}
* @return {*}
*/
resetRoi() {
let klassArr = this.canvas.getObjects();
klassArr.map((ele) => {
this.canvas.remove(ele);
});
this.rois[0].roi.linexysets[0].coordinates = [];
this.rois[0].roi.recxysets[0].coordinates = [];
this.rois[0].roi.directionxysets[0] = [];
},
/**
* @description: 坐标转换
* @param {xy} 坐标集合
* @return {*} 转换后结果
*/
setxy(xy){
*/
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;
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.x = parseInt(xy.x * scalWidth);
obj.y = parseInt(xy.y * scalHeight);
// obj.x = xy.x
// obj.y = xy.y
return obj
return obj;
},
initRect(points) {
let mousxy = this.setxy( points[0])
let mousxy = this.setxy(points[0]);
mouseFrom.x = mousxy.x;
mouseFrom.y = mousxy.y;
let mouseToxy = this.setxy( points[2])
let mouseToxy = this.setxy(points[3]);
mouseTo.x = mouseToxy.x;
mouseTo.y = mouseToxy.y;
},
intline(points){
let mf = this.setxy(points[0])
intline(points) {
let mf = this.setxy(points[0]);
mouseFrom.x = mf.x;
mouseFrom.y = mf.y;
let mt = this.setxy(points[1])
let mt = this.setxy(points[1]);
mouseTo.x = mt.x;
mouseTo.y = mt.y ;
mouseTo.y = mt.y;
},
intPolygon(points) {
let {x,y} = this.setxy(points[0])
let { x, y } = this.setxy(points[0]);
mouseFrom.x = x;
mouseFrom.y = y;
let pointarr = [];
points.map(ele => {
let {x,y} = this.setxy(ele)
points.map((ele) => {
let { x, y } = this.setxy(ele);
let obj = {
x:x,
y:y
}
pointarr.push(obj);
})
this.polygonpoint = pointarr
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)
initArrow(points) {
let mfxy = this.setxy(points[0]);
let mtxy = this.setxy(points[1]);
mouseFrom.x = mfxy.x;
mouseFrom.y = mfxy.y;
let mtxy = this.setxy(xyt)
mouseTo.x = mtxy.x;
mouseTo.y = mtxy.y;
},
drawPloygen(){},
drawPloygen() {},
drawing(type) {
var vthis = this;
var color = this.color
var color = this.color;
if (drawingObject && type == "draw") {
this.canvas.remove(drawingObject);
}
switch (drawType) {
case "arrow": //箭头
var x1 = mouseFrom.x,
var x1 = mouseFrom.x,
x2 = mouseTo.x,
y1 = mouseFrom.y,
y2 = mouseTo.y;
......@@ -194,32 +208,39 @@ export default {
path += " L " + (x2 - centerx - w1) + " " + (y2 - centery + h1);
path += " Z";
this.canvasObject = new fabric.Path(path, {
stroke:'red',
fill: 'blue',
stroke: "red",
fill: "blue",
strokeWidth: this.drawWidth,
roitype:'directionxysets'
selectable: false,
hasBorders: false,
hasControls: false,
evented: true,
objectCaching: false,
roitype: "directionxysets",
});
break;
case "line": //直线
this.canvasObject = new fabric.Line(
[mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{
strokeWidth: 2,
strokeWidth: 2,
class: "line",
originX: "center",
originY: "center",
selectable: true,
hasBorders: true,
hasControls: true,
selectable: false,
hasBorders: false,
hasControls: false,
evented: true,
objectCaching: false,
centeredRotation: false,
centeredScaling: false,
stroke: "red",
drawtype:'line',
roitype:'linexysets'
drawtype: "line",
roitype: "linexysets",
}
);
break;
case "rect": //长方形
case "rect": //长方形
// eslint-disable-next-line no-redeclare
var left = mouseFrom.x,
top = mouseFrom.y;
......@@ -230,7 +251,13 @@ export default {
height: mouseTo.y - top, //矩形的高度
fill: "rgba(0,0,0,.3)", //填充的颜色
stroke: "orange", // 边框原色
roitype:'recxysets',
selectable: false,
hasBorders: false,
hasControls: false,
evented: true,
objectCaching: false,
roitype: "recxysets",
strokeWidth: 1, // 边框大小
});
break;
......@@ -240,11 +267,13 @@ export default {
path = vthis.path;
this.canvasObject = new fabric.Polygon(vthis.polygonpoint, {
hasControls: true,
stroke: color,
fill: "rgba(255, 255, 255, 0)",
roitype:'recxysets'
selectable: false,
hasBorders: false,
hasControls: false,
stroke: "rgb(255, 126,10)",
strokeWidth: 1,
fill: "#cccccc",
roitype: "recxysets",
});
break;
default:
......@@ -252,12 +281,12 @@ export default {
}
// canvasObject.index = getCanvasObjectIndex();
if (this.canvasObject) {
this.canvasObject.on("selected", function() {
this.canvasObject.on("selected", function () {
cvselect = true;
cvunselect = true;
curObjcet = vthis.canvasObject || curObjcet;
});
this.canvasObject.on("deselected", function() {
this.canvasObject.on("deselected", function () {
var group = vthis.canvas.getObjects();
cvunselect = false;
});
......@@ -266,7 +295,7 @@ export default {
drawingObject = this.canvasObject;
}
},
addPoint(e) {
addPoint(e) {
var random = Math.floor(Math.random() * 10000);
var id = new Date().getTime() + random;
var circle = new fabric.Circle({
......@@ -282,18 +311,18 @@ export default {
originX: "center",
originY: "center",
id: id,
objectCaching: false
objectCaching: false,
});
if (this.pointArray.length == 0) {
circle.set({
fill: "red"
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()
(e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
];
this.line = new fabric.Line(points, {
......@@ -307,14 +336,14 @@ export default {
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: 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
y: pos.y,
});
var polygon = new fabric.Polygon(points, {
stroke: "rgb(255, 126,10)",
......@@ -325,7 +354,7 @@ export default {
hasControls: true,
evented: false,
selectable: true,
objectCaching: false
objectCaching: false,
});
polygon.drawtype = drawType;
this.canvas.remove(this.activeShape);
......@@ -336,8 +365,8 @@ export default {
var polyPoint = [
{
x: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
y: (e.pointer.y || e.e.layerY) / this.canvas.getZoom()
}
y: (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
},
];
var polygon = new fabric.Polygon(polyPoint, {
stroke: "#333333",
......@@ -349,7 +378,7 @@ export default {
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
objectCaching: false,
});
this.activeShape = polygon;
this.canvas.add(polygon);
......@@ -367,6 +396,9 @@ export default {
var img = document.createElement("img");
//设置图形显示拖拽点样式
if (drawType !== "polygon") {
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
......@@ -375,9 +407,10 @@ export default {
cursorStyle: "pointer",
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 16
cornerSize: 16,
});
}
function deleteObject(eventData, transform) {
var target = transform.target;
var canvas = target.canvas;
......@@ -391,25 +424,27 @@ export default {
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, - size / 2, -size / 2, size, size);
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) {
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;
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);
if (!drawstatus) {
return false;
}
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
let e = options;
......@@ -438,7 +473,7 @@ export default {
}
});
var vthis = this;
this.canvas.on("mouse:up", function(options) {
this.canvas.on("mouse:up", function (options) {
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
......@@ -449,13 +484,13 @@ export default {
// vthis.saveRoi(vthis.canvasObject, vthis.canvasObject.roitype)
// }
vthis.canvasObject = null;
let unique = [...new Set(vthis.klassarr)]
vthis.klassarr = unique
let unique = [...new Set(vthis.klassarr)];
vthis.klassarr = unique;
drawingObject = null;
moveCount = 1;
doDrawing = false;
});
this.canvas.on("mouse:move", function(options) {
this.canvas.on("mouse:move", function (options) {
if (drawType == "polygon") {
if (vthis.activeLine && vthis.activeLine.class == "line") {
var pointer = vthis.canvas.getPointer(options.e);
......@@ -465,10 +500,10 @@ export default {
points[vthis.pointArray.length] = {
x: pointer.x,
y: pointer.y,
zIndex: 1
zIndex: 1,
};
vthis.activeShape.set({
points: points
points: points,
});
vthis.canvas.renderAll();
}
......@@ -485,17 +520,94 @@ export default {
mouseTo.y = xy.y;
vthis.drawing("draw");
});
//双击
this.canvas.on("mouse:dblclick", function (options) {
})
function transformMouse(mouseX, mouseY) {
return { x: mouseX / window.zoom, y: mouseY / window.zoom };
}
},
//生成多边形
/**
* @description: 编辑图形
* @param {*}
* @return {*}
*/
editShape(type){
let activeObj = null;
let cavArr = this.canvas.getObjects();
for(let i = 0; i < cavArr.length; i++){
if(cavArr[i].roitype == type) {
activeObj = cavArr[i]
break;
}
}
if(activeObj && activeObj.drawtype == 'rect') {
activeObj.selectable = true
activeObj.hasBorders = true
activeObj.hasControls = true
activeObj?this.canvas.setActiveObject(activeObj):null;
this.canvas.renderAll();
} else if(activeObj && activeObj.drawtype == 'arrow'){
cavArr.map(ele => {
if(ele.drawtype == 'arrow'){
ele.selectable = true
ele.hasBorders = true
ele.hasControls = true
} else {
ele.selectable = false
ele.hasBorders = false
ele.hasControls = false
}
})
this.canvas.setActiveObject(activeObj)
}else if(activeObj && activeObj.drawtype == 'line'){
// let {points} = activeObj
// let xy1 = {x:activeObj.x1,y:activeObj.y1}
// this.editPoint(xy1)
// let xy2 = {x:activeObj.x2,y:activeObj.y2}
// this.editPoint(xy2)
cavArr.map(ele => {
if(ele.drawtype == 'line'){
ele.selectable = true
ele.hasBorders = true
ele.hasControls = true
} else {
ele.selectable = false
ele.hasBorders = false
ele.hasControls = false
}
})
}
// define a function that can keep the polygon in the same position when we change its
// width/height/top/left.
},
//添加点
editPoint(point){
var circle1 = new fabric.Circle({
radius: 5,
fill: 'green',
left: point.x - 5,
top: point.y - 5,
hasControls: false,
hasBorders: false,
name: 'circle1',
type:'rect',
});
this.canvas.add(circle1);
this.canvas.renderAll();
},
//生成多边形
generatePolygon() {
var points = new Array();
this.pointArray.map((point, index) => {
points.push({
x: point.left,
y: point.top
y: point.top,
});
this.canvas.remove(point);
});
......@@ -507,20 +619,20 @@ export default {
stroke: "rgb(255,126,10)",
strokeWidth: this.drawWidth,
fill: "rgba(255, 255, 255, 0)",
selectable: true,
hasBorders: true,
hasControls: true,
selectable: false,
hasBorders: false,
hasControls: false,
evented: true,
objectCaching: false,
transparentCorners: false,
drawtype: 'polygon',
roitype:'recxysets'
drawtype: "polygon",
roitype: "recxysets",
});
polygon.drawtype = drawType;
this.canvas.add(polygon);
// polygon.key = this.citem.config['算法ID']
this.canvasObject = polygon
this.canvasObject = polygon;
this.activeLine = null;
this.activeShape = null;
this.polygonMode = false;
......@@ -537,131 +649,138 @@ export default {
this.lineArray = new Array(); //线集合
// this.canvas.isDrawingMode = false;
},
capImg(){
this.$api.captureImage().then(res => {
this.bgUrl = 'data:image/png;base64,' + res;
})
capImg() {
this.bgUrl="";
this.$api.captureImage().then((res) => {
this.bgUrl = "data:image/png;base64," + res;
});
},
saveRoi(){
let areaisActive = false, inoutActive = false, doorLineActive = false;
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;
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
}]
cavArr.map((ele) => {
if (ele.roitype == "linexysets") {
let { bl, tr } = ele.lineCoords;
bl.x = parseInt(bl.x * scalWidth);
bl.y = parseInt(bl.y * scalHeight);
tr.x = parseInt(tr.x * scalWidth);
tr.y = parseInt(tr.y * scalHeight);
let obj = {
coordinates: [],
};
obj.coordinates.push(bl);
obj.coordinates.push(tr);
linspoint.push(obj);
doorLineActive = true;
this.rois[0].roi["linexysets"] = linspoint;
} else if (ele.roitype == "recxysets" && ele.drawtype == "rect") {
let { tl, tr, bl, br } = ele.aCoords;
bl.x = parseInt(bl.x * scalWidth);
bl.y = parseInt(bl.y * scalHeight);
br.x = parseInt(br.x * scalWidth);
br.y = parseInt(br.y * scalHeight);
tl.x = parseInt(tl.x * scalWidth);
tl.y = parseInt(tl.y * scalHeight);
tr.x = parseInt(tr.x * scalWidth);
tr.y = parseInt(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[0].roi["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 = parseInt(k.x * scalWidth);
k.y = parseInt(k.y * scalHeight);
});
let obj = {
coordinates: [],
};
obj.coordinates = spoint;
recxysets.push(obj);
this.rois[0].roi["recxysets"] = recxysets;
areaisActive = true;
} else if (ele.roitype == "directionxysets") {
let { path } = ele;
let x = parseInt(path[0][1] * scalWidth);
let y = parseInt(path[0][2] * scalHeight);
let x1 = parseInt(path[3][1] * scalWidth);
let y1 = parseInt(path[3][2] * scalHeight);
let obj = {
coordinates: [
{
x: x,
y: y,
},
{
x: x1,
y: y1,
},
],
};
directionxysets.push(obj);
this.rois[0].roi["directionxysets"] = directionxysets;
inoutActive = true;
}
directionxysets.push(obj);
this.rois['directionxysets'] = directionxysets;
inoutActive = true
});
let info = "";
if (!areaisActive) {
info = "请绘制识别区域";
} else if (!inoutActive) {
info = "请绘制进门方向";
} else if (!doorLineActive) {
info = "请绘制进门线";
} else {
console.log(
"🚀 ~ file: roi.vue ~ line 638 ~ saveRoi ~ this.rois",
this.rois
);
this.$emit("roiset", "roi", this.rois);
}
})
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'
});
this.$message({
message: info,
type: "warning",
});
},
},
mounted(){
mounted() {
this.Initfab();
this.capImg();
}
}
},
};
</script>
<style scoped>
.b-box canvas{
background: rgba(0,0,0,0);
.b-box canvas {
background: rgba(0, 0, 0, 0);
}
.pic{
.pic {
position: relative;
}
.pic img{
.pic img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
src/views/DataShow/index.vue
<!--
* @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>
<div style="background: #FFFFFF;">
<div class="leftDiv">
<div class="tits">
<span>{{$t('sysTable.dataReport')}}</span>
</div>
<div class="searchDiv">
<span class="dateBtn" :style="styleObj.dayStyle" @click="dateClick('day','dayStyle')">{{$t('sysTable.dailyReport')}}</span>
<span class="dateBtn" :style="styleObj.weekStyle" @click="dateClick('week','weekStyle')">{{$t('sysTable.weeklyReport')}}</span>
<span class="dateBtn" :style="styleObj.monthStyle" @click="dateClick('month','monthStyle')">{{$t('sysTable.monthlyReport')}}</span>
<el-date-picker
v-show="dateType=='day'"
style="width: 150px;margin-left:20px ;"
v-model="day"
type="date"
size="mini"
@change="datehange"
:clearable=false>
</el-date-picker>
<el-date-picker
v-show="dateType=='week'"
style="width: 150px;margin-left:20px ;"
v-model="week"
size="mini"
:clearable=false
type="week"
:picker-options="firstDay"
@change="datehange"
:format="weekFormatter">
</el-date-picker>
<el-date-picker
v-show="dateType=='month'"
style="width: 150px;margin-left:20px ;"
v-model="month"
size="mini"
:clearable=false
@change="datehange"
type="month">
</el-date-picker>
<span class="refreshBtn" @click="refreshClick">{{ $t('algorithm.refresh')}}</span>
</div>
<div class="numBox">
<span class="num1">{{$t('sysTable.accumulativeEntry')}}<span style="margin-left:12px;margin-right:5px;font-size: 26px;color: #7460ee;font-family:MicrosoftYaHei-Bold;font-weight:bold">{{innum}}</span><span style="font-size: 14px;color: #7460ee;">{{$t('sysTable.personTime')}}</span></span>
<span class="num3">{{$t('sysTable.accumulativeLeave')}}<span style="margin-left:12px;margin-right:5px;font-size: 26px;color:#3BB8FF;font-family:MicrosoftYaHei-Bold;font-weight:bold">{{outnum}}</span><span style="font-size: 14px;color: #3BB8FF;">{{$t('sysTable.personTime')}}</span></span>
<span class="num2">{{$t('sysTable.recognizableNumber')}}<span style="margin-left:12px;margin-right:5px;font-size: 26px;color: #87d14b;font-family:MicrosoftYaHei-Bold;font-weight:bold">{{recognisenum}}</span><span style="font-size: 14px;color: #87d14b;">{{$t('sysTable.personTime')}}</span></span>
</div>
<div class="chart1Box">
<div :id="'pieBox'+parentid" class="pieBoxClass"></div>
<div :id="'barBox'+parentid" class="barBoxClass"></div>
<div style="clear: both;"></div>
</div>
<div :id="'chartBox'+parentid" class="chartBoxClass"></div>
</div>
<div class="rightDiv">
<div class="tits">
<span>{{$t('sysTable.realTime')}}<span style="color: #0069FF;font-size: 12px;">（{{$t('sysTable.timeTip')}}）</span></span>
</div>
<div style="padding: 12px;border: 1px solid #E1E1E1;">
<el-table
:data="tableData"
height='624'
ref="table"
@filter-change="filterTag"
header-row-class-name="headCustomRow headCustomRow2"
row-class-name="customRow"
border
style="width: 100%;margin-bottom: 14px;">
<!--<el-table-column
prop="index"
align="center"
:label="this.$t('sysTable.number')">
</el-table-column>-->
<el-table-column
prop="time"
width='100'
align="center"
:label="this.$t('sysTable.time')">
</el-table-column>
<el-table-column
prop="direction"
width='75'
column-key="direction"
align="center"
:label="this.$t('sysTable.type')"
:formatter='derictioFun'
:filtered-value=currentDir
:filters="[{ text: $t('sysTable.leave'), value: -1 }, { text:$t('sysTable.enter'), value: 1}]"
filter-placement="bottom-end"
>
</el-table-column>
<el-table-column
prop="gender"
align="center"
width='75'
:label="this.$t('sysTable.gender')"
:formatter='sexFun'>
</el-table-column>
<el-table-column
prop="age"
align="center"
width='60'
:label="this.$t('sysTable.age')"
:formatter='ageFun'>
</el-table-column>
<el-table-column
prop="mood"
align="center"
width='70'
:label="this.$t('sysTable.mood')"
:formatter='moodFun'>
</el-table-column>
<el-table-column
prop="img"
align="center"
class-name="imgCell"
:label="this.$t('sysTable.headPortrait')">
<template slot-scope="scope">
<el-popover
placement="left"
width="250"
trigger="hover">
<img :src="scope.row.img" style="width: 250px;height: 250px;" />
<img :src="scope.row.img" slot="reference" style="width: 75px;height: 75px;" />
</el-popover>
</template>
</el-table-column>
</el-table>
<el-pagination
background
:current-page=pageNum
:page-size=pageSize
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total=total>
</el-pagination>
</div>
</div>
<div style="clear: both;"></div>
</div>
</template>
<script>
export default {
}
export default {
data() {
return {
lang:localStorage.getItem('lang'),
currentDir:[-1,1],
pagecount:5,
pageSize:20,
pageNum:1,
total:100,
innum:0,
outnum:0,
recognisenum:0,
weekFormatter:'yyyy '+this.$t('sysTable.week1')+'WW'+this.$t('sysTable.week2'),
firstDay:{
firstDayOfWeek:1
},
tableData:[],
dateType:'day',
day:new Date(),
week:new Date(),
month:new Date(),
styleObj:{
dayStyle:{
background:"#24C9FF",
color: "#FFFFFF",
border: "1px solid #24C9FF"
},
weekStyle:{
background:"#FFFFFF",
color: "#888888",
border: "1px solid #e5e5e5"
},
monthStyle:{
background:"#FFFFFF",
color: "#888888",
border: "1px solid #e5e5e5"
}
},
timer:''
}
},
props: [
'parentid'
],
mounted(){
this.getChartData()
this.getTotal();
},
methods:{
getTotal(){
var datas={
reporttype:1
}
datas.starttime=dateUnit.dateFormat(new Date(), "yyyy-MM-dd")+' 00:00:00';
datas.endtime=dateUnit.dateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
datas.channel=this.parentid;
var directions;
if(this.currentDir.length==2){
directions=11;
}else{
if(this.currentDir.indexOf(1)!=-1){
directions=1;
}else if(this.currentDir.indexOf(-1)!=-1){
directions=-1;
}
}
datas.direction=directions;
this.$api.getFaceDetailNumber(datas)
.then((data) => {
this.total=data.totalnumbers;
this.getHistoryTabelData()
}).catch((error) => {
})
},
filterTag(filter) {
if(filter.direction.length==0){
this.$refs.table.columns[1].filteredValue=[-1,1]
this.currentDir=[-1,1];
}else{
this.currentDir=filter.direction;
}
this.getTotal();
// return row.direction == value;
},
handleCurrentChange(val){
this.pageNum=val;
this.getHistoryTabelData()
this.repeatGetTabelData();
},
refreshClick(){
this.getChartData()
},
dateClick(type,styleKey){
this.dateType=type;
this.day=new Date();
this.week=new Date();
this.month=new Date();
for(var key in this.styleObj){
if(key==styleKey){
this.styleObj[key]={
background:"#24C9FF",
color: "#FFFFFF",
border: "1px solid #24C9FF"
}
}else{
this.styleObj[key]={
background:"#FFFFFF",
color: "#888888",
border: "1px solid #e5e5e5"
}
}
}
this.getChartData()
},
getChartData(){
const loading = this.$loading({
lock: true,
background: 'rgba(255, 255, 255, 0.7)'
});
var datas={
reporttype:1,
_t: Date.parse(new Date())/1000
}
if(this.dateType=='day'){
datas.starttime=dateUnit.dateFormat(this.day, "yyyy-MM-dd")+' 00:00:00';
datas.endtime=dateUnit.dateFormat(this.day, "yyyy-MM-dd")+' 23:59:59';
}else if(this.dateType=='week'){
var now=this.week;
var nowDayOfWeek = now.getDay(); //今天本周的第几天
var nowDay = now.getDate(); //当前日
var nowMonth = now.getMonth(); //当前月
var nowYear = now.getFullYear(); //当前年
datas.starttime = dateUnit.dateFormat(new Date(nowYear, nowMonth, nowDay - nowDayOfWeek+1), "yyyy-MM-dd")+' 00:00:00';
datas.endtime=dateUnit.dateFormat(new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 7), "yyyy-MM-dd")+' 23:59:59';
}else{
var firstDate=this.month;
firstDate.setDate(1);//第一天
var endDate=new Date(firstDate);
endDate.setMonth(firstDate.getMonth()+1);
endDate.setDate(0);
datas.starttime=dateUnit.dateFormat(firstDate, "yyyy-MM-dd")+' 00:00:00';
datas.endtime=dateUnit.dateFormat(endDate, "yyyy-MM-dd")+' 23:59:59';
}
datas.channel=1;
// this.axios.get('./static/faceData.json').then((data)=>{
this.$api.getFaceReport(datas)
.then((data) => {
this.innum=data.innum;
this.outnum=data.outnum;
this.recognisenum=data.recognisenum;
var axiosArr=[];
if(this.dateType=='day'){
data.personDataIn.forEach((item,index,arr)=>{
var times='';
if(index<10){
times='0'+index;
}else{
times=String(index)
}
axiosArr.push(times)
})
}else if(this.dateType=='week'){
var currenDates=datas.starttime.split(' ')[0];
var datesArr=utiljs.weekComputedfn.setDate(new Date(currenDates));
var weekArr=[];
if(this.lang=='en'){
weekArr=['（Mon.）','（Tues.）','（Wed.）','（Thur.）','（Fri.）','（Sat.）','（Sun.）']
}else{
weekArr=['（周一）','（周二）','（周三）','（周四）','（周五）','（周六）','（周日）']
}
data.personDataIn.forEach((item,index,arr)=>{
axiosArr.push(datesArr[index]+weekArr[index])
})
}else{
var currenDates=datas.starttime.split('-')[1];
data.personDataIn.forEach((item,index,arr)=>{
var dates='';
if((index+1)<10){
dates=currenDates+'-0'+(index+1);
}else{
dates=currenDates+'-'+String(index+1)
}
axiosArr.push(dates)
})
}
this.initLine(data,axiosArr);
this.initPie(data);
this.initChart(data);
loading.close();
}).catch((error) => {
loading.close();
alert(this.$t('message.error'))
})
},
datehange(){
this.getChartData()
},
repeatGetTabelData(){
clearInterval(this.timer)
this.timer=setInterval(() => {
this.getHistoryTabelData();
}, 20000)
},
getHistoryTabelData(){
// /do/CboxWebClient/GetRealTimeData
//./static/b.json
var datas={
reporttype:1
}
datas.starttime=dateUnit.dateFormat(new Date(), "yyyy-MM-dd")+' 00:00:00';
datas.endtime=dateUnit.dateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
datas.limit=this.pageSize;
datas.count=this.pageNum;
datas.channel=this.parentid;
datas._t=Date.parse(new Date())/1000
var directions;
if(this.currentDir.length==2){
directions=11;
}else{
if(this.currentDir.indexOf(1)!=-1){
directions=1;
}else if(this.currentDir.indexOf(-1)!=-1){
directions=-1;
}
}
this.$api.getFaceDetail(datas)
.then((data) => {
this.tableData=data.facedetail;
}).catch((error) => {
})
},
initPie(chartData){
var _this=this;
var myChart = echarts.init(document.getElementById('pieBox'+_this.parentid));
var option = {
color: ['#FFC62E', '#3BB8FF'],
tooltip: {},
title:{
text: _this.$t('sysTable.sexRatio'),
top:22,
left:'center',
textStyle:{
color:'#444444',
fontSize:'16',
fontWeight:'normal',
align:'center'
}
},
legend: {
orient: 'horizontal',
x: 'center',
itemWidth: 12,
itemHight: 12,
itemGap: 15,
bottom: 25,
selected: {},
itemWidth:8,
itemHeight:8,
textStyle: {
color: '#555'
},
data: [_this.$t('sysTable.male'),_this.$t('sysTable.female')]
},
series:[{
type : 'pie',
center:['50%','50%'],
radius:['40%','50%'],
label:{
normal: {
show: true,
color: '#666',
formatter: '{b} {c}'+_this.$t('sysTable.people')
},
emphasis: {
show: true,
color: '#666',
formatter: '{d}%'
}
},
labelLine :{
normal: {
show: false,
length:15,
length2:20
}
},
data:[{
value:chartData.malenum,
name:_this.$t('sysTable.male')
},{
value:chartData.femalenum,
name:_this.$t('sysTable.female')
}]
}]
}
myChart.clear();
myChart.setOption(option);
},
initChart(chartData){
var _this=this;
var myChart = echarts.init(document.getElementById('barBox'+_this.parentid));
var yData=[this.$t('sysTable.tip1'),this.$t('sysTable.tip2'),this.$t('sysTable.tip3'),this.$t('sysTable.tip4'),this.$t('sysTable.tip5'),this.$t('sysTable.tip6')];
var option={
title:{
text:_this.$t('sysTable.ageDistribution'),
top:22,
left:'center',
textStyle:{
color:'#444444',
fontSize:'16',
fontWeight:'normal',
align:'center'
}
},
grid:{
top:68,
left:66,
right:50,
bottom:81
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
orient: 'horizontal',
x: 'center',
itemWidth: 12,
itemHight: 12,
itemGap: 15,
bottom: 25,
selected: {},
itemWidth:8,
itemHeight:8,
textStyle: {
color: '#555'
},
data: [_this.$t('sysTable.male'),_this.$t('sysTable.female')]
},
color: ['#FFC62E', '#3BB8FF'],
xAxis: {
type: 'value',
axisTick:{
show:false
},
axisLine:{
show:false
},
axisLabel:{
color:'#888888',
fontSize:'12'
},
splitLine:{
lineStyle:{
color:'#e1e1e1'
}
}
},
yAxis: {
type: 'category',
data: yData,
axisTick:{
show:false
},
axisLabel:{
color:'#888888',
fontSize:'12'
},
axisLine:{
lineStyle:{
color:'#e1e1e1'
}
}
},
series: [
{
name:_this.$t('sysTable.male'),
stack:_this.$t('sysTable.numberOfPeople'),
type: 'bar',
label: {
normal: {
show: false,
position: 'right',
color:'#666666',
fontSize:'12'
}
},
barWidth:'14px',
data:chartData.maleArr
},
{
name:_this.$t('sysTable.female'),
stack:_this.$t('sysTable.numberOfPeople'),
type: 'bar',
label: {
normal: {
show: true,
position: 'right',
color:'#666666',
fontSize:'12',
formatter:(params) => {
return chartData.allArr[params.dataIndex]
}
}
},
barWidth:'14px',
data:chartData.femaleArr
}
]
}
myChart.clear()
myChart.setOption(option);
myChart.on('legendselectchanged', function (params) {
if(params.selected[_this.$t('sysTable.female')]&&params.selected[_this.$t('sysTable.male')]){
option.series[0].label.normal.show=false;
option.series[1].label.normal.formatter=function(param){
return chartData.allArr[param.dataIndex]
}
}else if((!params.selected[_this.$t('sysTable.female')])&&params.selected[_this.$t('sysTable.male')]){
option.series[0].label.normal.show=true;
option.series[0].label.normal.formatter=function(param){
return chartData.maleArr[param.dataIndex]
}
}else if(params.selected[_this.$t('sysTable.female')]&&(!params.selected[_this.$t('sysTable.male')])){
option.series[0].label.normal.show=false;
option.series[1].label.normal.formatter=function(param){
return chartData.femaleArr[param.dataIndex]
}
}else{
return 0
}
myChart.setOption(option);
})
},
initLine(dataArr,xAxiosArr){
var _this=this;
var myChart = echarts.init(document.getElementById('chartBox'+_this.parentid));
var option={
"title": {
"text":_this.$t('sysTable.passengerStatic'),
"top":22,
"left":'center',
"textStyle":{
"color":'#444444',
"fontSize":'16',
"fontWeight":'normal',
"align":'center'
}
},
"series": [{
"name": _this.$t('sysTable.enterTraffic'),
"data":dataArr.personDataIn,
"type": "line",
"areaStyle": {
"normal": {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [{
"offset": 0,
"color": "rgba(255, 198, 46, 0.4)"
}, {
"offset": 1,
"color": "rgba(255, 198, 46, 0.2)"
}],
"globalCoord": false
}
}
},
"symbolSize": 6,
"lineStyle": {
"width": 3
}
},{
"name": _this.$t('sysTable.outTraffic'),
"data":dataArr.personDataOut,
"type": "line",
"areaStyle": {
"normal": {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [{
"offset": 0,
"color": "rgba(59, 184, 255, 0.4)"
}, {
"offset": 1,
"color": "rgba(59, 184, 255, 0.2)"
}],
"globalCoord": false
}
}
},
"symbolSize": 6,
"lineStyle": {
"width": 3
}
}],
"color": ['#FFC62E', '#3BB8FF'],
"tooltip": {
"show": true,
"trigger": "axis",
"backgroundColor": "rgba(255,255,255,0.8)",
"padding": [0, 0, 0, 0],
"textStyle": {
"color": "#333333"
},
"axisPointer": {
"type": "line",
"animation": true,
"lineStyle": {
"color": "#444"
}
},
"extraCssText": "box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)"
},
"toolbox": {
"showTitle": false,
"top": "26px",
"right": "26px"
},
"legend": {
// "show":false
"bottom":10
},
"grid": {
"left": "58px",
"right": "58px",
"top": "70px",
"bottom": "60px"
},
"yAxis": {
"name":_this.$t('sysTable.passengerFlow'),
"nameRotate":0,
"type": "value",
"axisTick": {
"show": false
},
"axisLabel": {
"textStyle": {
"color": "#888",
}
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "#888"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": "#f5f5f5"
}
}
},
"xAxis": {
"name":_this.$t('sysTable.hours'),
"data": xAxiosArr,
"type": "category",
"boundaryGap": false,
"axisTick": {
"show": false
},
"axisLabel": {
"textStyle": {
"color": "#888",
}
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "#888"
}
}
}
}
if(_this.dateType!='day'){
option.xAxis.name=_this.$t('sysTable.date');
}
if(_this.dateType=='week'){
option.xAxis.axisLabel.interval=0
}
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '',
xaxisName = '';
if (params.length ==2 ) {
xaxisName = params[0].axisValue;
htmls += '<div style="border-radius:4px;">'
if(_this.dateType!='day'){
htmls += '<p style="padding-left:15px;">' + xaxisName + '</p>';
}else{
htmls += '<p style="padding-left:15px;">' + xaxisName+':00' + '</p>';
}
htmls += '<p style="margin-top:6px;margin-bottom:6px;font-size:14px;padding:0px 23px 6px 15px;color:#333;text-align: left;">' + params[0].seriesName + ' : ' + params[0].data + '</p>';
htmls += '<p style="margin-top:6px;margin-bottom:6px;font-size:14px;padding:0px 23px 6px 15px;color:#333;text-align: left;">' + params[1].seriesName + ' : ' + params[1].data + '</p>';
htmls += '</div>';
return htmls;
}else if(params.length ==1){
xaxisName = params[0].axisValue;
htmls += '<div style="border-radius:4px;">'
if(_this.dateType!='day'){
htmls += '<p style="padding-left:15px;">' + xaxisName + '</p>';
}else{
htmls += '<p style="padding-left:15px;">' + xaxisName+':00' + '</p>';
}
htmls += '<p style="margin-top:6px;margin-bottom:6px;font-size:14px;padding:0px 23px 6px 15px;color:#333;text-align: left;">' + params[0].seriesName + ' : ' + params[0].data + '</p>';
htmls += '</div>';
return htmls;
}
}
myChart.clear();
myChart.setOption(option);
},
derictioFun(row, column, cellValue, index){
if(cellValue=='-1'){
return this.$t('sysTable.leave')
}else{
return this.$t('sysTable.enter')
}
},
sexFun(row, column, cellValue, index){
if(cellValue=='1'){
return this.$t('sysTable.male')
}else if(cellValue=='0'){
return this.$t('sysTable.female')
}else{
return this.$t('sysTable.unknown')
}
},
ageFun(row, column, cellValue, index){
if(cellValue=='-1'){
return this.$t('sysTable.unknown')
}else{
return cellValue
}
},
moodFun(row, column, cellValue, index){
if(cellValue=='0'||cellValue=='7'){
return this.$t('sysTable.peace')
}else if(cellValue=='1'||cellValue=='8'){
return this.$t('sysTable.smile')
}else if(cellValue=='2'||cellValue=='9'){
return this.$t('sysTable.happy')
}else if(cellValue=='3'||cellValue=='10'){
return this.$t('sysTable.other')
}else{
return this.$t('sysTable.unknown')
}
}
},
beforeRouteLeave (to, from, next) {
clearInterval(this.timer)
next()
}
}
</script>
<style>
<style scoped>
#chart{
height: 364px;
border: 1px solid #EEEEEE;
border-top: none;
}
.leftDiv{
float: left;
width: 710px;
margin-right: 12px;
}
.rightDiv{
float: left;
width: 556px;
}
.tits{
background: rgba(142,228,258,1);
border: 1px solid #E1E1E1;
height: 37px;
line-height: 37px;
padding: 0 12px;
font-size: 16px;
color: #444444;
}
.searchDiv{
background: #f9f9f9;
padding: 12px;
border-left:1px solid #EEEEEE ;
border-right: 1px solid #EEEEEE;
}
.dateBtn{
display: inline-block;
padding:2px 12px;
font-size: 14px;
color: #888888;
border: 1px solid #e5e5e5;
background: #FFFFFF;
margin-right: 5px;
cursor: pointer;
}
.activeDate{
background:#24C9FF ;
color: #FFFFFF;
border: 1px solid #24C9FF;
}
.refreshBtn{
display: inline-block;
padding:2px 12px;
font-size: 14px;
color: #FFFFFF;
border: 1px solid #246FF5;
background: #246FF5;
float: right;
cursor: pointer;
margin-right: 10px;
}
.numBox{
height: 70px;
border: 1px solid #EEEEEE;
border-bottom: none;
background: #FFFFFF;
font-size: 16px;
color: #444444;
line-height: 70px;
position: relative;
}
.chart1Box{
height: 280px;
border: 1px solid #EEEEEE;
border-bottom: none;
background: #FFFFFF;
}
.chartBoxClass{
height: 290px;
border: 1px solid #EEEEEE;
background: #FFFFFF;
}
.pieBoxClass{
height: 100%;
width: 305px;
border-right:1px solid #EEEEEE ;
display: inline-block;
float: left;
}
.barBoxClass{
height: 100%;
width: 402px;
display: inline-block;
float: left;
}
.num1{
margin-left: 41px;
}
.num3{
position: absolute;
left: 276px;
}
.num2{
position: absolute;
left: 497px;
}
.sexBox{
height: 286px;
width: 518px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
padding-top: 24px;
}
.sexTit{
font-size: 16px;
color: #444444;
text-align: center;
margin-bottom: 22px;
}
.picBox{
margin-bottom: 24px;
}
.picBox img{
width: 130px;
}
.picBox>dl{
display: inline-block;
}
.picBox>dl:nth-of-type(1){
margin-left: 73px;
margin-right: 94px;
}
.picBox dt{
margin-bottom: 12px;
}
.picBox dd{
-webkit-margin-start: 0px;
font-size: 15px;
text-align: center;
}
.progressBar{
width:402px;
height:11px;
background:rgba(255,198,46,1);
border-radius:6px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
dl{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
.blueBar{
width: 20%;
height: 100%;
background:rgba(36,201,255,1);
}
</style>
\ No newline at end of file
src/views/System/index.vue
<!--
* @Author: panda
* @Date: 2021-12-18 13:00:42
* @LastEditTime: 2021-12-26 10:17:41
* @LastEditTime: 2022-01-04 16:33:41
* @LastEditors: Please set LastEditors
* @Description: 系统设置
* @FilePath: /sdc-face/src/views/DataShow/index.vue
......@@ -11,33 +11,30 @@
<div class="sys-item-box">
<div class="sys-header">服务状态信息</div>
<div class="sys-content">
<el-row>
<el-row class="row">
<el-col :span="8">
<span>授权序列号：</span>
<span>授权序列号：{{licence.cpuid}}</span>
</el-col>
<el-col :span="8">授权有效期：{{licence.lastdate}}</el-col>
</el-row>
<el-row>
<el-row class="row">
<el-col :span="8">
<span>算法版本号：</span>
<span>算法版本号：{{version.num_algorithm}}</span>
</el-col>
<el-col :span="8">软件版本号：{{licence.cpuid}}</el-col>
<el-col :span="8">硬件版本号：</el-col>
<el-col :span="8">软件版本号：{{version.num_software}}</el-col>
<el-col :span="8">硬件版本号：{{version.num_hardware}}</el-col>
</el-row>
<el-row>
<el-row class="row">
<el-col :span="8">
<span>出厂版本号：</span>
<span>数据服务地址：{{network.httpaddr}}</span>
</el-col>
<el-col :span="8">
<span>Web版本号：</span>
<span>中心状态：{{network.server_status==1?"在线":"离线"}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<span>数据服务地址：</span>
</el-col>
<el-row class="row">
<el-col :span="8">
<span>中心状态：</span>
<span>Web版本号：{{version.num_website}}</span>
</el-col>
</el-row>
</div>
......@@ -47,13 +44,21 @@
<div class="sys-content">
<el-col :span="8">
<span>开始时间：</span>
<el-date-picker v-model="commonconfig.workStartTime" type="date" placeholder="选择日期">
</el-date-picker>
<el-time-picker
v-model="workTime.startTime"
value-format="HH:mm:ss"
@change="setEndOption"
placeholder="请选择时间点">
</el-time-picker>
</el-col>
<el-col :span="8">
<span>结束时间：</span>
<el-date-picker v-model="commonconfig.workEndTime" type="date" placeholder="选择日期">
</el-date-picker>
<el-time-picker
v-model="workTime.endTime"
value-format="HH:mm:ss"
:picker-options="endtimeroption"
placeholder="请选择时间点">
</el-time-picker>
</el-col>
<el-col :span="8">
<el-button type="primary" class="savebtn" size="mini" @click="setWorkTimer">保存</el-button>
......@@ -66,44 +71,44 @@
<div class="bth">
<span class="sys-label">Http地址：</span>
<div class="sys-set-content">
<el-input v-model="commonconfig.httpUploadAddr" size="mini"></el-input>
<el-input v-model="commonconfig.httpUploadAddr" size="mini" ></el-input>
</div>
</div>
<el-row>
<el-row class="s-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">
<!-- <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
:step="1"
show-stops
input-size="mini"
style="
position: relative;
float: none;
width: 376px;
width: 500px;
margin-left: 15px;
"
>
</el-slider>
</div>
</el-row>
</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"
:min="0"
:max="100"
:step="1"
input-size="mini"
show-input
......@@ -111,7 +116,7 @@
style="
position: relative;
float: none;
width: 376px;
width: 500px;
margin-left: 15px;
"
>
......@@ -132,19 +137,19 @@
style="
position: relative;
float: none;
width: 376px;
width: 500px;
margin-left: 15px;
"
>
</el-slider>
</div>
</el-row>
<el-row>
<el-row class="s-row">
<span>上传心跳：</span>
<el-radio v-model="cutpic" :label="1">是</el-radio>
<el-radio v-model="cutpic" :label="0">否</el-radio>
<el-radio v-model="commonconfig.keepaliveswitch" :label="1">是</el-radio>
<el-radio v-model="commonconfig.keepaliveswitch" :label="0">否</el-radio>
</el-row>
<el-row class="bth">
<el-row class="bth row">
<span class="sys-label">心跳间隔：</span>
<div class="sys-set-content">
<el-slider
......@@ -158,7 +163,7 @@
style="
position: relative;
float: none;
width: 376px;
width: 500px;
margin-left: 15px;
"
>
......@@ -170,17 +175,18 @@
<div class="sys-item-box">
<div class="sys-header">存储配置</div>
<div class="sys-content">
<el-row>
<el-row class="row">
<span>数据存储：</span>
<el-checkbox v-model="save">本地保存</el-checkbox>
<el-button type="primary" class="savebtn" size="mini" @click="setModBusiness">保存</el-button>
</el-row>
<el-row class="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">
......@@ -193,7 +199,7 @@
</el-checkbox-group>
</el-col>
<el-col :span="5">
<el-button class="savebtn">备份</el-button>
<el-button class="savebtn" size="mini" @click="backConfig">备份</el-button>
</el-col>
</el-row>
......@@ -206,8 +212,8 @@
: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>
<span style="with:190px;display:inline-block;margin-left:10px"><el-input size="mini" style="width:400px" disabled="disabled"></el-input></span>
<el-button class="savebtn" style="margin-top:5px" size="mini" type="success" @click="submitUpload">恢复</el-button>
<div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过500kb</div>
</el-upload>
......@@ -225,50 +231,60 @@ export default {
serverData: {},
stimer:"1",
licence:{},
version:{},
commonconfig:{
workStartTime:""
uploadjpgswitch:1,
keepaliveswitch:1,
},
workTime:{
startTime:"",
endTime:""
},
backList:[],
fileList:[],
sendinterval:60,
businessData:{},
network:{},
save:0,
endtimeroption:{
},
backListData:[{
key:'算法参数',
val:'1',
},{
key:'规则参数',
val:'1',
val:'2',
},{
key:'模型参数',
val:'1',
val:'3',
},{
key:'运行参数',
val:'1',
val:'4',
}],
sdata:[{
key:'1',
key:1,
val:'1秒'
},{
key:'6',
key:6,
val:'6秒'
},{
key:'60',
key:60,
val:'1分钟'
},{
key:'120',
key:120,
val:'2分钟'
},{
key:'600',
key:600,
val:'10分钟'
},{
key:'900',
key:900,
val:'15分钟'
},{
key:'1800',
key:1800,
val:'30分钟'
},{
key:'3600',
key:3600,
val:'60分钟'
}]
};
......@@ -281,9 +297,12 @@ export default {
*/
getDeviceBasicInfo(){
this.$api.getDeviceBasicInfo().then(res=> {
let {commonconfig,licence} = res.data;
this.commonconfig = commonconfig || {};
let {commonconfig,licence,workTime,version,network} = res.data;
this.commonconfig = commonconfig !== null?commonconfig : this.commonconfig;
this.workTime = workTime==null?{}:workTime;
this.licence = licence;
this.version = version;
this.network = network;
})
},
/**
......@@ -294,9 +313,9 @@ export default {
getBusiness(){
this.$api.getBusiness().then(res=> {
let {result:{inout}} = res.business;
this.businessData = res.data
this.businessData = res
this.sendinterval = inout.sendinterval;
this.save = inout.save;
this.save = inout.save?true:false;
})
},
/**
......@@ -305,10 +324,15 @@ export default {
* @return {*}
*/
setModBusiness(){
this.businessData.result.inout.sendinterval = this.sendinterval;
this.businessData.result.inout.save = this.save;
this.businessData.business.result.inout.sendinterval = this.sendinterval;
this.businessData.business.result.inout.save = this.save;
this.$api.setModBusiness(this.businessData).then(res=> {
if(res.success == 1) {
this.$message({
message: res.describe,
type: 'success'
});
}
})
},
/**
......@@ -321,8 +345,14 @@ export default {
channelid:'1',
centerconfig:this.commonconfig
}
console.log("setingdata",data)
this.$api.setCenterParam(data).then(res => {
if(res.success == 1) {
this.$message({
message: res.describe,
type: 'success'
});
}
})
},
/**
......@@ -331,16 +361,37 @@ export default {
* @return {*}
*/
setWorkTimer(){
debugger
let {workTime} = this;
this.$api.setWorking(workTime).then(res => {
})
},
/**
* @description: 备份参数目前为全部备份
* @param {*}
* @return {*}
*/
backConfig(){
let date = new Date()
let data = {
startTime:this.commonconfig.workStartTime,
endTime:this.commonconfig.workEndTime,
_t:date.getTime()
}
this.$api.setWorking(data).then(res => {
this.$api.backupParams(data).then(res => {
if(res.success){
var download = res.backupfile;
var url =
window.location.protocol + "//" + window.location.host + download;
window.open(url);
} else {
this.$message.error('备份失败');
}
})
},
setEndOption(val){
this.endtimeroption = {
selectableRange:`${val}-23:59:59`
}
},
handleRemove(){},
/**
* @description: 提交算法配置文件
......@@ -350,7 +401,8 @@ export default {
submitUpload(){},
},
created(){
this.getDeviceBasicInfo()
this.getDeviceBasicInfo();
this.getBusiness();
}
};
</script>
......@@ -369,14 +421,15 @@ export default {
.sys-item-box {
width: 100%;
overflow: hidden;
padding: 10px 0;
padding: 0 0 10px 0;
}
.sys-item-box .sys-content {
margin: 10px 0;
margin: 10px 0 0 0;
padding-left: 10px;
}
.savebtn {
float: right;
width: 100px;
}
.sys-label {
float: left;
......@@ -385,8 +438,13 @@ export default {
}
.sys-set-content {
float: left;
width: 520px;
}
.bth {
overflow: hidden;
}
.row ,.s-row{
margin-top:10px;
}
</style>
\ No newline at end of file
src/zh.js 0 → 100644
module.exports = {
menu: {
algorithmSetting: '算法配置',
systemSetting: '系统设置',
systemInfo: '系统信息',
systemTool: '系统工具',
systemLog: '系统日志',
systemTable: '统计报表',
},
login: {
remember: '记住密码',
login: '登录',
userError: "用户名错误",
passwordError: '密码错误',
videoPreview: '视频预览',
alertTip: '请选择IE9及以上IE浏览器观看视频'
},
algorithm: {
modelDrawing: '请完成模型框绘制',
leastThree: '当前选择为进门模式，请最少画三段进门线',
a0: '识别区域即图像分析所关注的检测区域，圈定该区域以便进行人体检测与识别，可减少处理时间，增加识别精度。分多边形与矩形两种类型，识别区域简单时推荐使用矩形。',
a1: '进门方向即确定行人进和出的方向，可以绘制在视频区域的任何位置，方向可按需求绘制。',
a2: '进出方向',
a3: '通常情况下，建议使用简单的通道严格模式，以及一条直线作为进门线。',
a4: '矩形类型',
a5: '当识别区域较为简单，可用矩形直接覆盖时，鼠标选择“矩形”单选按钮进行绘制：',
a6: '鼠标左键点击按住拖动绘制矩形识别区域；',
a7: '鼠标右键单击全部删除。',
a8: '进门方向',
a9: '按照实际场景进出方向，鼠标单击左键，选择起点，图中会有蓝色圆点即为起点；',
a10: '鼠标再次单击左键，完成终点箭头方向绘制，即完成了顾客进门的方向绘制。',
a11: '鼠标右键单击，可进行逐边删除操作。',
a12: '进门线',
a13: '通道模式',
a14: '实际场景中，行人通行方向基本一致，并且是沿着通道方向，建议使用通道模式。',
a15: '鼠标左键单击，选择起点，移动鼠标，再次单击，即连点成线；若起点选择失败，则鼠标右键多次，删除起点，再重新选择起点；',
a16: '进门模式',
a17: '实际场景中，行人进门后会进入一个开阔的区域，通行方向比较复杂，并且会有比较大的行进方向变化，推荐使用进门模式。',
a18: '宽松 / 严格',
a19: '严格模式下，只有人的轨迹跨过进门线后才被计数；宽松模式下，则人走到线的附近，也可能被计数，系统会根据进门线模式智能判断是否被计数。',
a20: '标定信息',
a21: '标定信息即选取识别区域中，画面成像对焦最为清晰、画质最好的区域，作为标定区域，以便识别效果最佳；',
a22: '同时提供三种默认区域的的选项：F08P15、F12P12、F16P10；',
a23: '鼠标操作方法同识别区域的矩形类型绘制方法。',
a24: '人头尺寸',
a25: '拖动选择合适的人头尺寸；',
a26: '人头尺寸由三个方框组成，随着顾客进门由远到近的过程，要求远端最小框，略小于人头大小；中端框约等于人头大小；近端最大框，略大于人头大小。',
tooBig: '所画区域过大，请选择',
Repainting: '重画',
keepAccuracy: '保持精度（使用标准区域）',
keepArea: '保持区域（可能降低精度）',
calibrationInformation: '标定信息',
entranceMode: '进门模式',
channelMode: '通道模式',
needInstall: '本网站需要安装视频插件才可正常使用，请安装完成后请手动重启浏览器',
needUpdate: '该网站视频插件不是最新版本，可能导致部分功能不完善，请更新到最新版本',
needUpdate1: '该网站当前视频插件版本为',
needUpdate2: '，可能导致部分功能不完善，请更新到最新版本',
displayModel: '显示模式',
video: '录像',
classic: '标准',
commisson: '调试',
diagnosis: '诊断',
algorithm: '算法',
set: '高级',
Sensibility: '敏感度',
Sensibility2: '背面人体敏感度',
Sensibility3: '正面人体敏感度',
inputParameter: '走入参数',
outputParameter: '走出参数',
headSize: '人头尺寸',
trajectorySensitivity: '轨迹敏感度',
movingDistance: '轨迹移动距离',
installHeight: '安装高度',
isCalculateChild: '是否计小孩',
minimumDetection: '最小检测框',
maximumDetection: '最大检测框',
maximumPrediction: '最大预测框',
detectionCycle: '检测周期',
detectionFrame: '检测帧数',
defaultValue: '默认值',
refresh: '刷新',
allDefault: '恢复默认值',
selectModel: '请选择模型：',
closeOrOpen: '是否关闭算法：',
recognitionArea: '识别区域设置：',
roiSetting: 'ROI设置',
inputPsw: '如无特殊需求，请不要修改这些参数，以免出现意外的结果。',
advancedParameter: '高级参数',
recoveryDefault: '恢复默认',
passwordError: '密码错误',
videos: '视频',
realVideo: '实时视频',
algorithmStatus: '算法状态',
algorithmSetting: '算法参数设置',
sensitivity: '敏感度',
modelSelect1: '检测模型',
modelSelect2: '识别模型',
standard: '标准',
compatibility: '兼容',
userDefind: '自定义模式',
threeDimensional: '三维过滤',
intensify: '强化',
validCustomer: '有效顾客',
maxPredictionFrame: '最大预测框',
display: '展示',
videoSetting: '视频设置',
whiteBalance: '白平衡模式',
automaticMode: '自动模式',
manualMode: '手动模式',
sunnyDay: '晴天',
incandescentLamp: '白炽灯',
fluorescentLamp: '荧光灯',
dusk: '黄昏',
shadow: '阴影',
warmFluorescentLamp: '暖色荧光灯',
imageBrightness: '图片亮度',
brightness: '亮度',
redGain: '红色增益',
blueGain: '蓝色增益',
restoreDefault: '恢复默认',
titleFont1: '当前高度',
titleFont2: '米，进门线为',
titleFont3: '模式',
titleFont4: '进门线为',
regulationSetting: '规则设置',
heightTip: '(* 请把产品安装在2.5到4米之间并且设置正确的高度，否则会导致精度下降)',
installationHeight: '安装高度',
recognizeZone: '识别区域',
polygon: '多边形',
rectangle: '矩形',
rectangleTip: '选择多边形绘制，可通过鼠标根据实际场景任意选定锚点，最后通过闭合实现多边形识别区域绘制。',
directTip: '请用鼠标完成箭头的设置，箭头方向表示人的进入方向。',
entryDirection: '进门方向',
entryDoor: '进门线',
modeTip: '请用鼠标标定门的位置，如果您选择了严格模式，则只有人的轨迹跨过这条线才会被计数，如果您选择了宽松模式，则人走到线的附近，也会被计数。',
senTip: '敏感度越高，则人越容易被检测出，同时，也容易出现误检。',
detectTip: '该模型可设置应用于检测的模型。',
recTip: '该模型可设置应用于识别的模型，包括性别，年龄，表情。',
threeDimenTip: '请在规则设置中选择精确的场景高度后再考虑开启本选项的更改。在强化模式下，会过滤掉过高以及过矮的检测结果。在有效顾客模式下，会过滤掉比较矮的儿童。',
displayTip1: '标准模式：标准模式下会显示进出人数；',
displayTip2: '调试模式：调试模式下会显示进出人数、抓拍图像和属性，以及详细的调试信息；',
displayTip3: '展示模式：展示模式下会显示进出人数、抓拍图像和属性；',
displayTip4: '录像模式：录像模式下视频上是没有任何的参数显示的；',
checkIeVersion: '请选择IE10以上版本查看视频！',
handoverModel: '切换模型保存成功后需要手动重启生效，是否切换？',
selectStep: '请选择撤销步骤',
areaBigTip: '您选择的区域超出该高度下的设置上限，系统自动为您选择合适的区域大小，点击确定继续您的设置。',
endDraw: '结束绘制',
headSize: '人头尺寸',
imageSet: '图像设置',
customSetting: '高级',
wideDynamic: '宽动态',
focus:'聚焦',
scene:'场景',
preset: '场景模式',
chroma: '色度',
contrastRatio: '对比度',
saturationLevel: '饱和度',
acuity: '锐度',
exposureTime: '曝光时间',
faceBrightness: '亮度',
trackingThreshold: '轨迹跟踪阈值',
minimumMovingDistance: '最小移动距离',
trajectoryShape: '轨迹形态阈值',
similarityOfRemoveRepetition: '去重相似度',
timeOfRemoveRepetition: '去重时间',
maxAge: '最大年龄',
predictionFrame: '轨迹预测帧数',
movingDistance: '轨迹移动距离',
minimumAge: '最小年龄',
minimumHeadFrame: '最小人头框',
maximumHeadFrame: '最大人头框',
addIn: '增益',
strongLightSuppression: '强光抑制',
noiseReductionGrade: '降噪等级',
fogPenetrationGrade: '透雾等级',
exposureRatio: 'WDR曝光比',
microsecond: '微秒',
Amode: '标准模式',
Bmode: '暗光模式',
Cmode: '背光模式',
Dmode: 'D模式',
drawingTwoTheMaximum: '最多画两个',
faceQuality: '质量阈值',
faceGrab: '单人抓拍上限',
grabTip: '每个人最多会抓取多少张图像传输',
genderThreshold: '性别阈值',
faceGrabbingInterval: '抓取频率',
inOfCoefficient: '进入系数',
outOfCoefficient: '走出系数',
widthTip: '宽动态模式的开启可以让图像在复杂光线下的成像更加清晰，相应的，在理想情况下的成像可能稍微模糊。',
restart: '重启',
restartTip: '模型修改需要立即重启，是否继续修改，重启系统？',
restartTip2: '预设修改需要立即重启，是否继续修改，重启系统？',
kind1: '该分组的参数会影响检测，也就是上面的“框”',
kind2: '该分组的参数会影响跟踪的轨迹，也就是后面的“线”',
kind3: '该分组的参数会影响的识别，也就是人的性别，年龄，去重相关',
senData2Tip: '调高该项，更容易检测出人的背面',
senData3Tip: '调高该项，更容易检测出正面被遮挡的',
zoomscaleminTip: '大小低于该值（像素）的，不会被检出',
zoomscalemaxTip: '大小高于该值（像素）的，不会被检出',
trackDataTip: '调高该项，则轨迹更不易被抓拍（轨迹为粗蓝色，表示轨迹无效，相应的，抓拍不生效）',
previewDataTip: '调高该项，则同一人的轨迹更不容易断',
minMoveDataTip: '值越大越容易少计，被去掉时出绿线',
shapeDataTip: '对应于轨迹的平滑程度，越高则对平滑程度的要求就越高，不够平滑的的轨迹不会被抓拍（轨迹为绿色，表示轨迹无效，相应的，抓拍不生效）',
similarityDataTip: '前后两个人的相似程度，过于相似的人会被判断为同一个人（抓拍框人的信息显示为蓝色）',
removalTimeDataTip: '判断相似的人的时间（秒）',
faceLightDataTip: '值越高，则抓拍到的越亮',
faceDataTip: '对应是否正对，不够正的只抓拍不做识别',
maxAgeDataTip: '人的年龄的最大值',
minAgeDataTip: '人的年龄的最小值',
sexDataTip: '值越高，则越倾向于识别性别为女性',
faceTimeDataTip: '值越大，抓到的机会就越大，相应的运算量也会越大',
kindname1: '检测参数',
kindname2: '跟踪参数',
kindname3: '识别参数',
ageWarning: '设置的最小年龄不能超过最大年龄，请重新设置',
headsizeWarning: '设置的最小人头框不能超过最大人头框，请重新设置'
},
roi: {
crowdMode1: '拥挤模式1',
crowdMode2: '拥挤模式2',
crowdMode3: '拥挤模式3',
intelligentMode: '智能模式',
snapshotMode: '抓拍模式',
roiRegion: 'ROI区域绘制：',
roiline: '线条绘制',
wireframe: '线框绘制',
roidir: '进出方向绘制：',
dirdescribe: '先后点击视频画面中两点，确定进出方向',
roidoorline: '进门线绘制：',
doorlinedescribe: '先后点击视频画面中两点，确定进门线',
ruleset: '模式和角度设置：',
roiangle: '角度设置：',
selectModel: '模型选择：',
ruleeasy: '宽松模式',
rulestrict: '严格模式',
height: '高度：',
restoreDefault: '恢复默认设置',
completealert: '请绘制完成再进行其它操作',
roizonealert: '请清空ROI区域绘制再进行',
comregion: '请画识别区域！',
comdir: '请画进出方向！',
comdoor: '请结束进门线绘制！',
checkFrame: '每帧都检',
checkFour: '每5帧检4帧',
checkThree: '每4帧检3帧',
checkTwo: '每3帧检2帧',
checkOne: '每2帧检1帧',
roiLarge: '所画ROI过大，如不重画会降低精度，确认保存?',
currentSize: '当前实际检测区域大小为',
cpnsuming: '单帧耗时',
currentHeight: 'ms,当前安装高度',
setHeadSize: 'm，人头尺寸将设置为',
setFrame: '抽帧策略将设置为',
setBox: '最大人头框和最小人头框将设置为'
},
setting: {
setAlert: 'rtsp端口和rtmp端口禁止相同，请重新设置',
seconds: '单位/秒',
heartInterval: '心跳间隔：',
faceImg: '发送图片：',
faceImgNum: '发送图片数：',
bodyImg: '发送人体图片：',
faceFeature: '发送特征：',
bodyFeature: '发送人体特征：',
sendTrail: '发送轨迹：',
heartbeat: '上传心跳：',
picInterval: '截图间隔：',
screenPic: '上传截图：',
sendimgTip: '每个人被发送的图片（如果符合要求的抓拍不足，那么实际上发送的图片可能会比这个值低），这个值不会超过高级算法参数中的“单人抓拍上限”。',
maximg: '单人最多发送图片数：',
sendimgSet: '发送图片设置',
tooLong: '长度过长，请重新输入',
modeSelect: '协议选择：',
networkSetting: '网络设置',
ipAddr: 'ＩＰ地址：',
subnetMask: '子网掩码：',
gateway: '网关地址：',
macAddr: 'MAC地址：',
centerServerSetting: '中心设置',
serverIp: '中心地址：',
port: '中心端口：',
videoServerIp: '视频服务器IP：',
paramSetting: '存储设置',
dataTransmissionInterval: '发送间隔：',
second: '秒',
minute: '分钟',
dataTransmissionOption: '数据存储：',
trafficSpeed: '进出人速度',
saveData: '本地保存',
videoStreamSetting: '视频码流设置：',
workingTimeSetting: '工作时间',
noExposureModeSetting: '曝光方式设置',
exposureModeSetting: '曝光方式设置：',
common: '普通',
foregroundExposure: '前景曝光',
backgroundExposure: '后景曝光',
saveSet: '保存设置',
noWhetherRestartAutomatically: '自动重启',
whetherRestartAutomatically: '自动重启：',
restartTime: '重启时间：',
acquisitionSettings: '探针采集设置',
collectionFrequency: '采集频率：',
openWifi: '开启采集：',
collectionThreshold: '采集阈值：',
notNull: "不能为空",
mustNumber: '请输入数字',
collectionSetting: '探针采集数据',
serialNumber: '序号',
time: '时间',
videoSetting: '视频设置',
videoName: '视频名称：',
fontSize: '字体大小：',
fontColor: '字体颜色：',
coordinateX: '显示坐标(X)：',
coordinateY: '显示坐标(Y)：',
selectFontSize: '请选择字体大小',
selectFontColor: '请选择字体颜色',
yellow: '黄色',
green: '绿色',
blue: '蓝色',
white: '白色',
black: '黑色',
red: '红色',
play: '播放',
noVideoName: '视频名称',
noFontSize: '字体大小',
noFontColor: '字体颜色',
noCoordinateX: '显示坐标(X)',
noCoordinateY: '显示坐标(Y)',
enterIp: 'ip地址不能为空',
correctIp: '请输入正确的ip地址',
contentNotEmpty: '内容不能为空',
correctFormat: '请输入正确格式',
enterMac: 'mac地址不能为空',
enterPost: '端口不能为空',
workMode: '工作模式',
modeSelection: '模式选择：',
runMode: '运行模式',
inspectionMode: '自检模式',
videoProtocol: '视频协议',
rtspProtocolSelection: 'rtsp协议选择：',
rtmpProtocolSelection: 'rtmp端口设置：',
DNSsettings: 'DNS设置',
PORTsettings: 'web端口设置',
ports: '端口',
new: '+新增',
enterDns: '请输入DNS地址',
enterPort: '请输入端口',
enterCorrectDNS: '请输入正确DNS地址',
tcpOrHttpTip: '默认采用http方式，在需要我们的私有协议时，选择tcp模式。',
portTip: '该端口为中心服务器的数据接受端口，默认值为9595，如无特殊需求，请不要修改。',
saveTip: '勾选该选项客流数据会在设备内存储，用于断网续传，如不勾选断网期间数据可能会丢失。',
workTimeTip: '您可以选择每天算法工作的起止时间，在工作时间以外将不产生客流数据，如果您选择开始时间和结束时间都为零点，则表示算法全天工作。',
workModeTip: '自检模式仅应用于生产和测试环节，请勿选择。',
rebootTip: '选择每天的自动重启，可以提升设备工作的稳定性，建议勾选。',
wifiTip: '开启后将自动检测周围无线设备的MAC。',
serverAddress: 'Http地址：',
resetDataAfterRestart: '重启后数据显示清零',
autoClear: '自动清零：',
setNumber: '设置数人结果',
enterNumber: '进人数：',
leaveNumber: '出人数：',
recovery: '数人结果恢复',
tooBig: '数值过大',
videoProtocol: '视频协议',
protocolSelect: '协议选择：',
savePath: '保存路径设置',
screenPath: '截图路径：',
videoPath: '录像路径：',
loginManagement: '登录管理',
resetDataAfterRestart: '重启后数据显示清零',
autoClear: '自动清零：',
openLogin: '开启登录：',
reset: '重置',
changePassword: '修改密码',
oldPassword: '旧密码：',
newPassword: '新密码：',
repeatPassword: '重复新密码：',
passwordNotMatch: '新密码不一致',
resetPassword: '是否重置为原始密码？',
cantSpace: '路径不能包含空格',
cantChinese: '路径不能包含中文',
autoClearTip: '设备重新后，视频中显示的进出数字从0开始，反正则从重启前的数字开始，不影响本设备实际统计到的人数。（设备每天0点自动清零）',
setNumberTip: '设置视频中显示的进出人数数字，用于测试中便于统计，不影响本设备实际统计到的人数',
recoveryTip: '恢复视频中显示的进出人数数字，恢复的结果是今天0点至当前时间统计的数据',
protocolTip: '该选项仅用于满足特殊的视频对接需求。',
urlTip: '算法配置界面视频播放插件录制视频或者截图的保存路径',
port2Tip: '此设备WEB客户端的访问端口设置，默认8080和80',
loginTip: '设置此设备web客户端是否需要账号密码登陆',
dataSend: '数据传输',
routineSet: '常规设置',
screenNum: '视频中计数结果',
screenShowSet: '屏幕显示数值设置',
showTip: '设置后不影响本设备实际统计人数，设备每天0点自动清零',
restartShowTit: '重启后显示数值',
fromZero: '从零开始',
fromDayData: '从当天累计数据开始',
setScreenNum: '设置屏幕数值',
takeEffect: '生效',
setCurrentData: '设置为当天累计数据'
},
systemInfo: {
sysTime: '系统时间',
systemCurrent: '设备时间：',
systemRunning: '运行时间：',
networkInfo: '网络信息',
ipAddr: 'ＩＰ地址：',
serverIp: '中心地址：',
videoServerIp: '视频服务器IP：',
gateway: '网关地址：',
cPort: '中心端口：',
vPort: '视频服务器端口：',
subnetMask: '子网掩码：',
macAddr: 'MAC地址：',
networkState: '互联网连接：',
centerConnectionState: '中心状态：',
parameterInformation: '参数信息',
videoChannelAmount: '视频个数：',
saveTemporaryDataOrNot: '临时数据：',
trafficFlowAndSpeed: '进出人速度：',
videoStreamSize: '视频码流大小：',
videoTransmissionInterval: '发送间隔：',
allDataSave: '本地数据：',
softwarename: "软件名称",
videoCaptureFormats: '视频尺寸：',
versionInformation: '版本信息',
algorithmVersion: '算法版本：',
webVersion: 'WEB版本：',
softwareVersion: '软件版本：',
hardwareVersion: '硬件版本：',
resourceRate: '资源占有率',
cpuRate: 'CPU占用：',
memorySize: '内存占用：',
gpuRate: 'GPU占有率：',
freeMemorySize: '内存空闲大小：',
flashVacant: '存储空闲：',
videoChannel: '视频通道',
channelName: '通道名称',
videoName: '视频名称',
operationMode: '运行模式',
operationState: '运行状态',
cameraId: '摄像头ID',
rtmpState: 'RTMP连接状态',
softwarePeriod: '软件有效期',
dateOfExpiry: '有效期至：',
cpuNumber: '序列号：',
connect: '连接',
disconnect: '断开',
onLine: '在线',
offLine: '离线',
operation: '运行',
debugging: '调试',
serverAddress: 'server地址：',
permanentValidity: '永久有效'
},
sysTool: {
fillIn: '请填写完整再进行操作！',
videoRecording: '视频录制',
videoMode: '视频模式：',
selectVideoMode: '请选择视频模式',
originalVideo: '原始录像',
algorithmVideo: '算法录像',
recordAll: '全部录制',
videoLength: '视频长度（分钟）：',
videoAmount: '录像个数：',
length: '长度',
channel: '通道',
videoMode: '录像模式',
status: '状态',
operation: '操作',
completedVideo: '已完成视频',
fileTitle: '文件名',
fileSize: '文件大小',
dataManipulation: '数据操作',
redata: '重传历史数据',
to: '至',
dataRetransmission: '数据重传',
wipeData: '清空数据',
cleardata: '删除数据',
resettPeople: '数人结果清零',
backupOperation: '备份操作',
noParameterBackup: '参数备份',
parameterBackup: '参数备份：',
algorithmParameter: '算法参数',
roiCode: '规则设置',
modelParameter: '模型参数',
videoTitle: '视频名称',
networkParameter: '网络参数',
runningParameter: '运行参数',
ispParameter: 'ISP参数',
backupParameter: '参数备份',
restoreBackup: '参数还原',
uploadFiles: '选择文件',
upload: '上传',
systemOperation: '系统操作',
systemAdjusting: '系统校时',
cComputerTime: '当前电脑时间：',
cDeviceTime: '当前设备时间：',
cTime: '系统校时',
modelupload: '模型上传',
restartDevice: '重启设备',
factoryReset: '恢复出厂设置',
clickRestart: '点击此按钮重启设备：',
reboot: '重新启动',
softwareUpdate: '固件升级',
autoupdate: '自动升级',
update: '升级',
Note: '注意:固件升级过程中，请不要将设备断电，否则会造成系统文件损坏。',
cAlgorithmV: '当前算法版本：',
cSoftwareV: '当前软件版本：',
cWebV: '当前WEB版本：',
cHardwareV: '当前硬件版本：',
systemReset: '系统重置',
clickResetV: '点击此按钮将会重置设备，使系统还原出场厂版本。',
currentVersion: '当前版本',
rVersion: '重置后版本',
rAlgorithmV: '重置后算法版本：',
rSoftwareV: '重置后软件版本：',
rWebV: '重置后WEB版本：',
rHardwareV: '重置后硬件版本：',
Note2: '注意：重置设备后，当前的配置信息会丢失，并且程序版本会还原出厂版本。',
dAlgorithmConfig: '删除算法配置',
dAlgorithmFile: '删除算法配置文件',
deletNote: '警告：执行该操作后，算法配置文件将无法恢复，请慎重',
selectDelModel: "选择即将删除的算法配置文件类型：",
allAlgorithm: '全部算法配置文件',
algorithmConfig: '算法参数配置文件',
roiConfig: 'ROI规则配置文件',
modelConfig: '模型配置文件',
enterInt: '请输入正整数',
selectVideoMode: '请选择视频模式',
selectDate: '请选择日期',
vSizeNotNull: '视频时长不能为空',
vSizeIsNum: '视频时长必须为数字',
vCountNotNull: '录像个数不能为空',
vCountIsNum: '录像个数必须为数字',
face1: '请上传business_3100_的包',
face2: '请上传business_2200_的包',
cm3: '请选择后缀为cm3的文件！',
onlyGz: '请选择后缀为tar.gz的文件！',
gz: '请选择后缀为tar.gz或lic的文件！',
mvcmd: '请选择后缀为mvcmd的文件！',
selectTime: '请选择时间',
uploadSuccess: '上传成功！',
uploadError: '上传失败！',
recordNow: '正在录制',
waitExecution: '等待执行',
wantDelPlan: '是否确定删除该计划?',
delSuccess: '删除成功!',
delFailed: '删除失败',
cancelDelet: '已取消删除',
wantDelVideo: '是否确定删除该视频?',
selectVideo: '请选择一个视频',
sureDel: '是否确定删除?',
downloadFailed: '下载失败',
sureRestart: '是否确定重启?',
factoryreset:'是否确定恢复出厂设置?',
cancelled: '已取消',
resetIt: '是否确定重置?',
timeWidthComputer: '与计算机时间同步',
timeZone: '时区：',
NTPTime: 'NTP 校时',
serverAddr: '服务器地址：',
NTPport: 'NTP端口：',
timeInterval: '校时时间间隔：',
manualTime: '手动校时',
equipmentTime: '设备时间：',
settingTime: '设置时间：',
redataTip: '将设备内存储的历史数据重新发送一遍（选择时间段）',
clearDataTip: '将设备内存储的历史数据全部删除',
huashengke: '花生壳',
huashengke1: '已成功登录跳转到花生壳',
timeBtn: '立即生效',
test: '测试',
centerTime: '中心校时',
linkSuccess: '连接成功',
linkError: '连接失败',
testTool: '测试工具',
testMode: '运行模式',
testMode2: '运行模式：',
common: '正常使用',
netCamera: '作为网络相机',
videoTest: '内置视频测试',
sendData: '发送测试数据',
timeTip1: '选择此项，则系统会在任何网络初始化的时间（包括一体机重启和断网重新连接）的情况下与数据中心校时，请确认中心状态为链接状态，否则中心校时无效，你也可以点击“立即生效”来立刻和中心校时一次。',
timeTip2: '选择此项，则系统会定期和NTP服务器进行校时，请确认NTP服务器为连接状态，否则NTP校时无效，你也可以点击“立即生效”来立刻和NTP服务器校时一次。',
timeTip3: '选择此项，则系统仅会在您点击“立即生效”的时刻进行一次校时。'
},
sysLog: {
sysLog: '系统日志',
note: '建议选择时间区间在一个月内，提示：0-调试信息，1-普通信息，2-警告信息，3-错误信息，4-致命错误',
date: '日期：',
dogLog: '线程日志',
serialNumber: '序号',
logContent: '日志内容',
operationLog: '操作日志'
},
sysTable: {
personTime: '人次',
recognizableNumber: '正面抓拍',
accumulativeEntry: '累计进入',
accumulativeLeave: '累计离开',
annualReport: '年报',
monthlyReport: '月报',
dailyReport: '日报',
weeklyReport: '周报',
hourlyReport: '时报',
queryCriteria: '查询条件',
selectYear: '选择年',
date: '日期',
enterTraffic: '进人数',
outTraffic: '出人数',
selectMonth: '选择月',
selectDay: '选择日',
exportTable: '导出表格',
isSend: '是否发送',
graphic: '导出表格',
dataReport: '数据报表',
week1: '第',
week2: '周',
sexRatio: '性别比例',
man: '男士',
lady: '女士',
number: '序号',
time: '时间',
type: '类型',
gender: '性别',
age: '年龄',
mood: '情绪',
headPortrait: '抓拍头像',
sendStatus:"状态",
people: '人',
tip1: '18岁以下',
tip2: '18-25岁',
tip3: '26-35岁',
tip4: '36-45岁',
tip5: '46-55岁',
tip6: '55岁以上',
ageDistribution: '年龄分布',
numberOfPeople: '人数',
leave: '离开',
enter: '进入',
male: '男',
female: '女',
unknown: '未知',
peace: '平静',
smile: '愉悦',
happy: '高兴',
other: '其他',
passengerFlow: '客流量',
hours: '时',
passengerStatic: '客流趋势',
realTime: '实时数据',
timeTip: '仅展示当天数据'
},
common: {
returnLogin: '返回登录',
inputContent: '请输入内容',
beginTime: '开始时间：',
endTime: '结束时间：',
selectTime: '选择时间：',
noSelectTime: '选择时间',
yes: '是',
no: '否',
cancel: '取消',
close: '关闭',
open: '开启',
starttime: '开始时间',
endtime: '结束时间',
startDate: '开始日期',
endDate: '结束日期',
del: '删除',
download: '下载',
opeationRestart: '警告:修改设置后请手动重启设备',
Prompt: '提示',
check: '查看',
title: '客群分析智能一体机',
exit: '退出'
},
message: {
success: '操作成功',
error: '操作失败',
restartTip: '此操作需手动重启生效，是否继续?'
},
button: {
save: '保存',
Return: '返回',
confirm: '确 定',
cancel: '取 消',
apply: '应用',
add: '添加',
nosave: '不保存'
}
}
\ No newline at end of file
API20211215/vue.config.js → vue.config.js
/*
* @Author: your name
* @Date: 2021-12-24 14:16:06
* @LastEditTime: 2021-12-24 14:21:47
* @LastEditTime: 2021-12-28 16:32:37
* @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
*/
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = {
outputDir:process.env.outputDir || 'dist',
productionSourceMap: false,
lintOnSave: false,
publicPath: "./",
// 由于浏览器有跨域限制,这里cli 工具提供了 启动本地代理服务器 请求
devServer:{
open:false, // 是否打开浏览器;
......@@ -37,6 +40,16 @@ module.exports = {
},
}
},
configureWebpack: {
plugins: [
new CopyWebpackPlugin([ //打包时执行拷贝
{
from: __dirname + "/public/config/js/config.js",
to: __dirname + "/dist/config/js/config.js"
}
])
]
},
}
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!