天眼人脸识别系统-人脸识别登录
·
基础：
基于face_recognition与Django人脸识别服务案例-CSDN博客
需求：
基于人脸识别接口实现，人脸检测并基于人脸信息进行查询用户画像（后台服务可以使用模拟数据）
实现：
步骤一：配置跨域
pip install django-cors-headers
soft863ai/settings.py文件中30行左右添加
ALLOWED_HOSTS=['*'] CORS_ORIGIN_ALLOW_ALL = True
INSTALLED_APPS中最后一行添加如下内容：
'corsheaders',
MIDDLEWARE中注释'django.middleware.csrf.CsrfViewMiddleware',添加如下内容：
'corsheaders.middleware.CorsMiddleware',
settings.py全部内容如下
"""
Django settings for soft863ai project.
Generated by 'django-admin startproject' using Django 3.2.20.
For more information on this file, see
https://docs.djangoproject.com/en/3.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.2/ref/settings/
"""
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-1ccz-%j4iybj97nvy6%s0!5ap&y^fls83@xktoqn=6e$byozlk'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ['*']
CORS_ORIGIN_ALLOW_ALL = True
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'sourceai.apps.SourceaiConfig',
'corsheaders',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware',
]
ROOT_URLCONF = 'soft863ai.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates']
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'soft863ai.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
步骤二：编写控制层代码
创建sourceai/controller/portrait_view.py文件，内容如下：
from django.shortcuts import render
from django.http import HttpResponse
import json
def face_index(request):
return render(request, 'face/login.html')
def get_userinfo(request):
userid = request.POST.get('userid')
dict_data = {}
dict_data['fid'] = userid
dict_data['fname'] = 'wangchaojie'
dict_data['fage'] = 36
dict_data['foccupation'] = '工程师'
dict_data['feducation'] = '研究生'
dict_data['fcard'] = '410728'
dict_data['faddress'] = '郑州'
dict_data['ftel'] = '15138679323'
# return HttpResponse(json.dumps({"res": dict_data}))
return HttpResponse(json.dumps(dict_data))
def getResume(request):
datas = []
dict_data = {}
dict_data['fresume'] = '毕业于XXX中学'
dict_data['ftime'] = '2010-07-01'
datas.append(dict_data)
dict_data['fresume'] = '毕业于XXX大学，后XXX公司从事XXX工作'
dict_data['ftime'] = '2010-07-01'
datas.append(dict_data)
return HttpResponse(json.dumps(datas))
def getTravel(request):
datas = []
dict_data = {}
dict_data['ftraveltype'] = '火车'
dict_data['fvehicleinfo'] = 'G360'
dict_data['ftime'] = '2023-6-20 15:45'
datas.append(dict_data)
dict_data = {}
dict_data['ftraveltype'] = '汽车'
dict_data['fvehicleinfo'] = '郑州-开封'
dict_data['ftime'] = '2023-6-13 09:00'
datas.append(dict_data)
return HttpResponse(json.dumps(datas))
def selectMedical(request):
dict_data = {}
dict_data['healthy'] = '否'
dict_data['xuexing'] = 'B'
return HttpResponse(json.dumps(dict_data))
def diet_info(request):
datas = []
dict_data = {}
dict_data['fmeal'] = '火锅'
dict_data['fmoney'] = '400'
datas.append(dict_data)
dict_data = {}
dict_data['fmeal'] = '米线'
dict_data['fmoney'] = '10'
datas.append(dict_data)
dict_data = {}
dict_data['fmeal'] = '麻辣烫'
dict_data['fmoney'] = '25'
datas.append(dict_data)
return HttpResponse(json.dumps(datas))
def selectDiet(request):
datas = []
dict_data = {}
dict_data['fcategory'] = '中餐'
dict_data['fmoney'] = '400'
datas.append(dict_data)
dict_data = {}
dict_data['fcategory'] = '西餐'
dict_data['fmoney'] = '500'
datas.append(dict_data)
dict_data = {}
dict_data['fcategory'] = '小吃'
dict_data['fmoney'] = '300'
datas.append(dict_data)
return HttpResponse(json.dumps(datas))
def get_consume_info(request):
dict_data = {}
dict_data['月份'] = [7, 8, 9]
dict_data['消费'] = [30, 60, 25]
return HttpResponse(json.dumps(dict_data))
def get_consume_year(request):
dict_data = {}
dict_data['年份'] = [2019,2020,2021, 2022, 2023]
dict_data['消费'] = [30, 45,46,60, 25]
return HttpResponse(json.dumps(dict_data))
def earthdata(request):
dict_data = {}
return HttpResponse(json.dumps(dict_data))
步骤三：添加URL映射代码
在soft863ai/urls.py中添加如下内容：
from sourceai.controller import portrait_view
path('face', portrait_view.face_index),
path('getUser', portrait_view.get_userinfo),
path('getResume', portrait_view.getResume),
path('gettravel', portrait_view.getTravel),
path('selectMedical', portrait_view.selectMedical),
path('diet', portrait_view.diet_info),
path('consumeinfo', portrait_view.get_consume_info),
path('selectDiet', portrait_view.selectDiet),
path('get_consume_year', portrait_view.get_consume_year),
path('earthdata', portrait_view.earthdata),全部内容如下：
"""soft863ai URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from sourceai import views
from sourceai.controller import imgc_view
from sourceai.controller import nlp_view
from sourceai.controller import chat_view
from sourceai.controller import draw_view
from sourceai.controller import ppt_view
from sourceai.controller import face_view
from sourceai.controller import portrait_view
urlpatterns = [
path('admin/', admin.site.urls),
path('first', views.first_index),
path('firstvalue', views.first_value),
path('urltotext', views.url_to_text),
path('ocrurl', views.ocr_index_url),
path('imgtotext', views.img_to_text),
path('ocrindex', views.ocr_index),
path('imgc', imgc_view.imgc_index),
path('imgcto', imgc_view.img_to_text),
path('poem', nlp_view.poem_index),
path('poemto', nlp_view.poem_to_create),
path('chat', chat_view.chat_index),
path('chatto', chat_view.chat_to_create),
path('sparkchat', chat_view.spark_index),
path('sparkchatto', chat_view.spark_to_create),
path('baichuan2chat', chat_view.baichuan2_index),
path('baichuan2chatto', chat_view.baichuan2_to_create),
path('sparkdrawindex', draw_view.sparkdraw_index),
path('sparkdrawto', draw_view.sparkdraw_to_create),
path('sparkppt', ppt_view.ppt_index),
path('sparkpptto', ppt_view.ppt_to_create),
path('faceregister', face_view.custom_facec_regiter),
path('facedbsearch', face_view.custom_facec_search),
path('facelist', face_view.custom_facec_list),
path('faceget', face_view.custom_facec_get),
path('face', portrait_view.face_index),
path('getUser', portrait_view.get_userinfo),
path('getResume', portrait_view.getResume),
path('gettravel', portrait_view.getTravel),
path('selectMedical', portrait_view.selectMedical),
path('diet', portrait_view.diet_info),
path('consumeinfo', portrait_view.get_consume_info),
path('selectDiet', portrait_view.selectDiet),
path('get_consume_year', portrait_view.get_consume_year),
path('earthdata', portrait_view.earthdata),
]
步骤四：覆盖静态资源文件
参考资源文件
步骤五：编写人脸识别登录代码
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="icon" href="/static/img/touxiang.png">
<!-- 网页图标 -->
<link rel="stylesheet" type="text/css" href="/static/css/face.css" />
<link rel="stylesheet" href="/static/css/demo.css">
<link rel="stylesheet" href="/static/css/login.css">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<script src="/static/js/jquery.min.js"></script>
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="/static/js/rem.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="cursor: url(img/body2.png);">
<div class="canvas" style="opacity: .2">
<iframe frameborder="0" src="/static/js/index.html" style="width: 100%; height: 100%"></iframe>
</div>
<div id="app">
<div class="header_title">智能人脸识别系统 <input id="fileUpload" accept="image/*" type="file"></div>
<div class="header_time"></div>
<div class="face-capture" id="face-capture">
<div class="faceCon">
<div class="videoFaceCon">
<div class="imgCoverCon" @mouseenter="stopAnimaFun" @mouseleave="startAnimaFun">
<div class="retiveCon">
<img src="/static/img/1233.png" class="retiveConImg allRoteAnmi">
<img src="/static/img/121.png" class="videoFace">
</div>
</div>
<div class="demo-frame">
<div class="demo-container">
<video id="video" width="320" height="240" preload autoplay loop muted></video>
</div>
</div>
</div>
<div class="control-container face-capture">
<div class="title"></div>
<canvas id="canvas" width="320" height="240"></canvas>
</div>
<div class="rect" v-for="item in profile"
:style="{ width: item.width + 'px', height: item.height + 'px', left: item.left + 'px', top: item.top + 'px'}">
</div>
</div>
</div>
<div class="videoImgPhoto">
<img src="/static/img/1233.png" class="imgVideoBg" />
<div class="videoImgCon">
<img class="videoConImg" src="/static/img/121.png" />
</div>
</div>
<script type="text/javascript" src="/static/js/tracking-min.js"></script>
<script type="text/javascript" src="/static/js/face-min.js"></script>
<script type="text/javascript">
window.onload = function () {
var timer = '';
var clickOn = true;
var tipFlag = false; // 提示用户已经检测到
var flag = false; // 判断是否已经拍照
var removePhotoID = null; // 停止转换图片
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
var width = window.screen.width;
var height = window.screen.height;
// 时间
timer && clearInterval(_this.timer);
timer = setInterval(function () {
var show_day = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
var nowtime = new Date();
var year = nowtime.getFullYear();
var month = nowtime.getMonth() + 1;
var date = nowtime.getDate();
var day = nowtime.getDay();
var hour = nowtime.getHours();
var minutes = nowtime.getMinutes();
var second = nowtime.getSeconds();
month < 10 ? month = '0' + month : month;
hour < 10 ? hour = '0' + hour : hour;
minutes < 10 ? minutes = '0' + minutes : minutes;
second < 10 ? second = '0' + second : second;
var show_day_s = day === 0 ? show_day[6] : show_day[day - 1];
var mytimer = year + "年" + month + "月" + date + "日" + show_day_s + ' ' +
hour + ':' + minutes;
$('.header_time').html(mytimer)
}, 1000);
//时间
$('.title').html('点击头像进行识别..')
function tackPhoto() {
context.drawImage(video, 0, 0, canvas.width, canvas.height)
// 保存为base64格式
$('.videoConImg').attr('src', saveAsPNG(canvas));
a = saveAsPNG(canvas).substring(22);
$.ajax({
url: 'http://localhost:8000/facedbsearch',
// url: 'http://49.232.173.197:8000/user/facerecognition',
// url: 'http://localhost:8000/user/facerecognition',
type: 'POST',
async: true,
data: {
imgFile: a,
// imgUrl : a,
},
dataType: "JSON",
success: function (res) {
// sessionStorage.setItem('user', JSON.stringify(res.data)) //将用户信息放入session
// if (res.res.cardid.length > 6) {
// location.href = 'main.html?id=' + res.res.cardid.substr(12);
// } else {
// location.href = 'main.html?id=' + res.res.cardid
// }
if (res.cardid == "") {
$("#info").html("人脸识别失败！");
}
else {
{#alert('识别成功,即将跳转...');#}
setTimeout(function () {
{#window.location.href = "index.html";#}
window.location.href = "static/index.html";
console.log(res.res.cardid);
window.localStorage.setItem('id', res.res.cardid);
}, 2000)
}
succefun();
// //跳转页面原地方
// console.log(res);
},
error: function (res) {
alert('接口调用失败')
}
})
close();
}
function getVideo() {
$('.demo-frame').show();
clickOn = false;
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
$('.title').html('系统已开启识别')
tracking.track('#video', tracker, {
camera: true
});
tracker.on('track', handleTracked);
}
//追踪事件
// 追踪事件
function handleTracked(e) {
$('.videoFace').hide();
context.clearRect(0, 0, canvas.width, canvas.height);
if (e.data.length == 0) {
$('.title').html('未检测到人脸 请动一动')
} else {
if (!tipFlag) {
$('.title').html('检测成功，正在拍照，请保持不动2秒')
}
// 1秒后拍照，仅拍一次
if (!flag) {
flag = true
removePhotoID = setTimeout(() => {
tackPhoto();
tipFlag = true
}, 1000)
}
e.data.forEach(function (rect) {
context.strokeStyle = '#ffa126';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '5px Helvetica';
context.fillStyle = "#fff";
});
}
};
// 保存为png,base64格式图片
function saveAsPNG(c) {
return c.toDataURL('image/png', 0.3)
};
// 拍照
var a;
function close() {
// 关闭并清理资源
flag = false
tipFlag = false
this.showFailPop = false
$('.face-capture').hide();
$('.videoImgPhoto').show();
tracker && tracker.removeListener('track', this.handleTracked)
tracker = null
context = null
profile = []
clearTimeout(this.removePhotoID)
}
// //顶部上传图片
// $("body").on("change", "#fileUpload", function () {
// var reads = new FileReader();
// var f = $(this).get(0).files[0];
// var rep = /jpeg|png|gif|bmp/ig;
// var gstyle = f.type.split("/")[1];
// if (rep.test(gstyle)) {
// reads.readAsDataURL(f);
// var that = this;
// reads.onload = function (e) {
// succefun();
// $('.videoConImg').attr('src', this.result);
// };
// } else {
// layer.msg("图片格式不正确，请上传 jpeg|png|gif|bmp 格式的图片")
// }
// });
//识别成功逻辑
function succefun() {
$('.face-capture').hide();
$('.videoImgPhoto').show();
$('.side_right').addClass('rightAnimations');
$('.side_left').addClass('leftAnimations');
}
//点击获取摄像头
$('.imgCoverCon').click(() => {
if (clickOn == true) {
$('.title').html('系统正在识别..')
getVideo();
}
})
}
</script>
</body>
</html>创建templates/face/login.html文件，内容如下：
步骤六：编写主窗口代码
创建static/index.html文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户信息</title>
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/info.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/rem.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/echarts.js"></script>
<script src="/static/js/echarts-gl.min.js"></script>
<script src="/static/js/echarts-wordcloud.js"></script>
<!-- <script src="js/index.js"></script> -->
</head>
<body>
<div id="start">
<div class="start_out">
<div class="start_in"></div>
</div>
</div>
<div class="top">
<span id="title">天眼人脸识别系统</span>
<span><a href="main.html"><返回</a></span>
<span>2022年06月14日星期二 15:57</span>
</div>
<div class="left">
<div class="left_top">
<div class="left_top_1">
<div class="user" >
<img id="userpic" src="" style="width: 1.2rem;height: 1.2rem"></img>
</div>
<div id="health"></div>
</div>
<div class="left_top_2">
<ul id="user_info">
<li>ID:5</li>
<li>姓名：陈弘毅</li>
<li>性别：男</li>
<li>电话：15036027961</li>
<li>职业：架构师</li>
<li>学历：本科</li>
<li>出生年月日：1998-10</li>
<li>籍贯：河南省郑州市</li>
</ul>
</div>
</div>
<div class="left_bt">
<div class="left_bt_1">个人简历</div>
<div class="left_bt_2">
<div id="box">
<ul id="list"></ul>
</div>
</div>
<div class="left_bt_3"></div>
</div>
</div>
<div id="earth"></div>
<img src="/static/img/leftfgg.png" alt="" class="bg_img_left">
<img src="/static/img/leftfg.png" alt="" class="bg_img_right">
<div class="right">
<div class="right_top">
<div class="right_top_title">月消费金额</div>
<div id="right_top_main"></div>
</div>
<div class="right_bt">
<div class="right_bt_title">年度收入与支出</div>
<div id="right_bt_main"></div>
</div>
</div>
<ul class="left_bottom">
<li><a href="#"><img src="/static/img/icon11.png" alt="">人际</a></li>
<li><a href="#"><img src="/static/img/icon12.png" alt="">工作</a></li>
<li><a href="#"><img src="/static/img/icon13.png" alt="">资产</a></li>
<li><a href="#"><img src="/static/img/icon14.png" alt="">教育</a></li>
<li><a href="#"><img src="/static/img/icon15.png" alt="">娱乐</a></li>
<li><a href="#"><img src="/static/img/icon16.png" alt="">医疗</a></li>
</ul>
<div class="center_bottom">
<div class="center_bottom_left">
<span>医疗信息</span>
<div class="s_body"></div>
<div class="yes">
<p id="yes">是</p>
<p>健康</p>
</div>
<div class="no">
<p id="xueXin">A</p>
<p>血型</p>
</div>
</div>
<div class="center_bottom_right">
<div id="box_go">
<ul id="list_go"></ul>
</div>
</div>
</div>
<div class="right_bottom">
<div class="canYin">餐饮信息</div>
<div id="ciYun"></div>
<div id="zhiZhu"></div>
</div>
</body>
<script>
//获取id
var user_id = window.localStorage.getItem('id');
// 获取当前时间
postTime();
setInterval(function () {
postTime();
}, 1000);
function postTime() {
var time = getTime();
$(".top span").eq(2).html(time);
}
function getTime() {
var date = new Date();
var arr_week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var week = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var time = year + '年' + this.addZero(month) + '月' + this.addZero(day) + '日 ' + arr_week[week]
+ this.addZero(hour) + ":" + this.addZero(minute) + ":" + this.addZero(second);
return time;
}
function addZero(s) {
return s < 10 ? ('0' + s) : s;
}
$.ajax({
url: 'http://localhost:8000/faceget',
type: 'GET',
data: {
cardid: user_id,
},
dataType: 'JSON',
success: function (data) {
$('#userpic').attr("src", data.res.path)
// var userpic = document.getElementById("userpic");
//userpic.innerHTML = data.res.path;
}
})
$.ajax({
url: 'http://localhost:8000/selectDiet',
type: 'POST',
data: {
userid: user_id,
},
dataType: 'JSON',
success: function (res) {
var chartDom_z = document.getElementById('zhiZhu');
var myChart_z = echarts.init(chartDom_z);
var option_z;
option_z = {
tooltip: {
trigger: 'axis'
},
radar: {
indicator: [],
radius: 80
},
series: [
{
color: ['#c37327'],
name: '餐饮信息',
type: 'radar',
tooltip: {
trigger: 'item'
},
colorBy: 'data',
data: [
{
value: [],
}
]
}
]
};
var max = 0;
res.forEach(function (e, i) {
option_z.series[0].data[0].value[i] = e.fmoney
})
option_z.series[0].data[0].value.forEach(function (e) {
if (e > max) {
max = e;
}
})
res.forEach(function (e, i) {
var obj = new Object
obj.name = e.fcategory;
obj.max = max;
option_z.radar.indicator.push(obj);
})
// console.log(option_z.radar.indicator);
option_z && myChart_z.setOption(option_z);
}
})
//月度消费金额
$.ajax({
url: 'http://localhost:8000/consumeinfo',
type: 'POST',
data: {
userid: user_id,
},
dataType: 'JSON',
success: function (res) {
// console.log(res.消费);
var chartDom = document.getElementById('right_top_main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: res.月份,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: res.消费, //[10, 52, 200, 334, 390, 330, 220]
}
],
};
option && myChart.setOption(option);
}
})
//年度收入与支出
$.ajax({
url: 'http://localhost:8000/get_consume_year',
type: 'POST',
data: {
userid: user_id,
},
dataType: 'JSON',
success: function (res) {
// console.log(res);
var chartDom_n = document.getElementById('right_bt_main');
var myChart_n = echarts.init(chartDom_n);
var option_n;
option_n = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: res.年份
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: []
},
{
name: '',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(0, 221, 255)'
},
{
offset: 1,
color: 'rgb(77, 119, 255)'
}
])
},
emphasis: {
focus: 'series'
},
data: []
},
{
name: '',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(55, 162, 255)'
},
{
offset: 1,
color: 'rgb(116, 21, 219)'
}
])
},
emphasis: {
focus: 'series'
},
data: []
},
{
name: '',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 0, 135)'
},
{
offset: 1,
color: 'rgb(135, 0, 157)'
}
])
},
emphasis: {
focus: 'series'
},
data: []
},
{
name: '',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 191, 0)'
},
{
offset: 1,
color: 'rgb(224, 62, 76)'
}
])
},
emphasis: {
focus: 'series'
},
data: []
}
]
};
// console.log(option_n);
option_n.xAxis[0].data = res.年份;
var key = [], keyValue = [];
for (var k in res) {
if (k != '年份') {
key[key.length] = k;
keyValue[keyValue.length] = res[k]
}
}
// console.log(keyValue);
option_n.series.forEach(function (e, i) {
option_n.series[i].name = key[i];
option_n.series[i].data = keyValue[i]
})
// console.log(option_n.series);
option_n && myChart_n.setOption(option_n);
// $("#start").hide()
}
})
// 中间地球部分
$.ajax({
url: 'http://localhost:8000/earthdata',
type: 'POST',
data: {
userid: user_id,
},
dataType: 'JSON',
success: function (res) {
// console.log(res);
var ROOT_PATH =
'https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var chartDom_e = document.getElementById('earth');
var myChart_e = echarts.init(chartDom_e);
var option_e;
$.getJSON(ROOT_PATH + '/data-gl/asset/data/flights.json', function (data) {
function getAirportCoord(idx) {
return [data.airports[idx][3], data.airports[idx][4]];
}
/*function getAirportCoord(idx) {
return [res[idx].flat, res[idx].flong];
}*/
var routes = data.routes.map(function (airline) {
return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
});
/*var routes = [];
res.map(function (airline, i) {
// console.log(airline);
var j = i;
if (i < res.length - 1) {
j = i + 1;
}
routes[routes.length] = [getAirportCoord(i), getAirportCoord(j)]
});*/
// var routes = [[[-75.440806, 40.652083], [180.943139, 35.214]], [[-175.440806, 60.652083], [80.943139, -35.214]]]
// console.log(routes);
myChart_e.setOption({
backgroundColor: '',
globe: {
baseTexture: 'img/map01.jpg',
heightTexture: 'img/map02.jpg',
shading: 'lambert',
light: {
ambient: {
intensity: 0.8
},
main: {
intensity: 0.4
}
},
viewControl: {
autoRotate: true
},
globeRadius: 60
},
series: {
type: 'lines3D',
coordinateSystem: 'globe',
blendMode: 'lighter',
lineStyle: {
width: 1,
color: 'rgb(50, 50, 150)',
opacity: 0.2
},
data: routes
}
});
});
option_e && myChart_e.setOption(option_e);
}
})
//监听地球缩放滚轮事件（有BUG）
var count = 0;
$("#earth").on('mousewheel DOMMouseScroll', function (e) {
if (e.originalEvent.zrDelta == 1 && count != 18) {
count += e.originalEvent.zrDelta;
} else if (e.originalEvent.zrDelta == -1 && count != -18) {
count += e.originalEvent.zrDelta;
}
if (count >= 3) {
$("#title").css("opacity", "0.3")
} else {
$("#title").css("opacity", "1")
}
// console.log(count);
// console.log(myChart_e._model.option);
})
// 健康模块
var chartDom_h = document.getElementById('health');
var myChart_h = echarts.init(chartDom_h);
var option_h;
option_h = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [{value: 735}, {value: 0}, {value: 0}, {value: 300}]
}
]
};
option_h && myChart_h.setOption(option_h);
//滚动窗口
function scroll_view(a, b) {
var box = document.getElementById(a);
var list = document.getElementById(b)
var content = list.innerHTML;
list.innerHTML += content;
var time = 30;
var timer = setInterval(up, time);
function up() {
//滚上去的内容大于ul内容高度的一半，重置高度 0
if (box.scrollTop >= list.offsetHeight / 2) {
box.scrollTop = 0
} else {
box.scrollTop++;
}
}
//鼠标移入暂停--清除定时器
box.onmouseover = function () {
clearInterval(timer)
}
///鼠标移出继续--启动定时器
box.onmouseout = function () {
timer = setInterval(up, time);
}
}
scroll_view('box', 'list');
scroll_view('box_go', 'list_go');
//词云图
var ciYun_url = 'http://localhost:8000/diet';
$.ajax({
url: ciYun_url,
type: 'POST',
data: {
userid: user_id,
},
dataType: 'JSON',
success: function (res) {
var ciYunTu = document.getElementById('ciYun');
var arr_ciYun = {
"list": [],
"gridSize": 18, // 以像素为单位
"weightFactor": 0.9, // 每个单词的大小
"fontWeight": 'normal', // 'normal', 'bold' or a callback
"fontFamily": 'Times, serif', // font to use
"color": 'random-light', // 'random-dark' or 'random-light'
"backgroundColor": '', // the color of canvas
"rotateRatio": 1 // 单词旋转的概率。1表示始终旋转
}
res.forEach(function (e) {
var arr = [e.fmeal, e.fmoney]
arr_ciYun.list.push(arr)
})
// console.log(arr_ciYun);
arr_ciYun.list = arr_ciYun.list.concat(arr_ciYun.list);//嫌数据少double一下
var options = eval(arr_ciYun);
WordCloud(ciYunTu, options);
}
})
//医疗信息
$.ajax({
url: 'http://localhost:8000/selectMedical',
type: 'POST',
data: {
userid: user_id,
},
dataType: 'JSON',
success: function (res) {
var y = document.getElementById("yes");
var x = document.getElementById("xueXin");
y.innerHTML = res.healthy;
x.innerHTML = res.xuexing;
}
})
//出行记录
$.ajax({
url: 'http://localhost:8000/gettravel',
type: 'POST',
data: {
userid: user_id,
},
dataType: 'JSON',
success: function (res) {
// console.log(res);
var ul = document.getElementById("list_go");
res.forEach(function (e, i) {
if (e.ftraveltype == '火车') {
$(ul).append("<li><span id='logo'><img src='img/huoche.png'></span><span id='tag'>" + e.fvehicleinfo + "</span><spanid='tag_time'>" + e.ftime.substr(0, 19) + "</spanid=></li>")
} else {
$(ul).append("<li><span id='logo'><img src='img/feiji.png'></span><span id='tag'>" + e.fvehicleinfo + "</span><spanid='tag_time'>" + e.ftime.substr(0, 19) + "</spanid=></li>")
}
})
ul.innerHTML += ul.innerHTML
}
})
//个人履历
var detail_url = 'http://localhost:8000/getResume';
$.ajax({
url: detail_url,
type: 'POST',
data: {
userid: user_id,
},
dataType: 'JSON',
success: function (res) {
var ul = document.getElementById("list");
res.forEach(function (e, i) {
$(ul).append("<li><p class='school'>" + e.fresume + "</p><p class='date'>" + e.ftime.substr(0, 19) + "</p></li>")
})
ul.innerHTML += ul.innerHTML
}
})
//用户信息
var url_id = 'http://localhost:8000/getUser';
$.ajax({
url: url_id,
type: 'POST',
dataType: 'JSON',
data: {
userid: user_id,
},
success: function (res) {
// console.log(res);
var li = document.getElementById("user_info").children;
$(li)[0].innerHTML = "ID：" + res.fid;
$(li)[1].innerHTML = "姓名：" + res.fname;
$(li)[2].innerHTML = "年龄：" + res.fage;
$(li)[3].innerHTML = "职业：" + res.foccupation;
$(li)[4].innerHTML = "学历：" + res.feducation;
// $(li)[5].innerHTML = "身份证号：" + res.fcard;
$(li)[5].innerHTML = "住址：" + res.faddress;
$(li)[6].innerHTML = "电话：" + res.ftel;
}
})
//加载页面完成事件
window.onload = function () {
$("#start").hide()
}
//图表自适应大小
//参数container为图表盒子节点.charts为图表节点
function chartsSize(container, charts) {
function getStyle(el, name) {
if (window.getComputedStyle) {
return window.getComputedStyle(el, null);
} else {
return el.currentStyle;
}
}
var wi = getStyle(container, 'width').width;
var hi = getStyle(container, 'height').height;
charts.style.width = wi
charts.style.height = hi
}
var chartDom_n = document.getElementById('right_bt_main');
var myChart_n = echarts.init(chartDom_n);
window.onresize = function () {
// chartsSize(chartDom_n, myChart_n)
}
</script>
</html>步骤七：运行工程
步骤八：登录测试
将自己的人脸图片放置到static/facedb文件夹下，注：使用系统前需要人脸库有自己的图片，否则无法识别成功
步骤九：浏览器打开127.0.0.1:8000/face人脸识别界面，进行调试
DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
24
0- 0
已为社区贡献8条内容
所有评论(0)