Commit 9d4fab04 by 夏新然

交接

1 parent 85f4750f
No preview for this file type
......@@ -4558,11 +4558,11 @@
}
},
"echarts": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.1.tgz",
"integrity": "sha512-pw4xScRPsLegD/cqEcoXRKeA2SD4+s+Kyo0Na166NamOWhzNl2yI5RZ2rE97tBlAopNmhyMeBVpAeD5qb+ee1A==",
"version": "4.7.0",
"resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.7.0.tgz",
"integrity": "sha1-Wzh1pML5HjkpQl+rq56s5+QJiz8=",
"requires": {
"zrender": "4.0.7"
"zrender": "4.3.0"
}
},
"editorconfig": {
......@@ -15626,9 +15626,9 @@
}
},
"zrender": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.7.tgz",
"integrity": "sha512-TNloHe0ums6zxbHfnaCryM61J4IWDajZwNq6dHk9vfWhhysO/OeFvvR0drBs/nbXha2YxSzfQj2FiCd6RVBe+Q=="
"version": "4.3.0",
"resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.3.0.tgz",
"integrity": "sha1-nwVhIbILuuREFNKHv2oRn/cEJmE="
}
}
}
......@@ -16,7 +16,7 @@
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"cssnano": "^4.1.10",
"echarts": "^4.2.1",
"echarts": "^4.7.0",
"element-ui": "^2.8.2",
"file-saver": "^2.0.2",
"ol": "^6.0.0",
......
......@@ -33,4 +33,54 @@ export default {
-moz-osx-font-smoothing: grayscale;
color: #fff;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 120px;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px!important;
text-align: center;
}
.avatar {
width: 120px;
height: 120px;
display: block;
}
.chartTitle{
position: absolute;
color: #444;
padding-right: 20px;
left: 26px;
top: 16px;
font-weight: 400;
font-size: 18px;
}
.chartBox{
position: relative;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
}
.radioBox{
position: absolute;
font-size: 13px;
z-index: 1;
left: 50%;
top: 16px;
transform: translateX(-50%);
}
.noBackGround{
background: none!important;
}
</style>
......@@ -7,7 +7,6 @@ import axios from './util/http'
import store from './store/index.js'
import * as API from './util/api'
import { faceapi } from './util/initApi'
import './util/permission'
import './util/vproto'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
......@@ -22,6 +21,7 @@ import VuePhotoZoomPro from 'vue-photo-zoom-pro'
import VideoPlayer from 'vue-video-player'
import { Loading } from 'element-ui'
import echarts from 'echarts'
import common from './util/common.js'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
......@@ -30,6 +30,8 @@ Vue.use(VideoPlayer)
Vue.config.productionTip = false
Vue.prototype.axios = axios;
Vue.prototype.API = API;
Vue.prototype.common = common;
Vue.use(ElementUI);
Vue.use(selecttree);
//--图片放大
......@@ -39,6 +41,11 @@ Vue.prototype.loading = Loading;
Vue.prototype.$echarts = echarts;
Vue.prototype.faceapi = faceapi;
let localRoutes = localStorage.getItem('menuArr');
if(localRoutes){
store.dispatch("GetMenuRole", JSON.parse(localRoutes))
.then(res => {});
}
let vue = new Vue({
el: '#app',
router,
......@@ -46,4 +53,3 @@ let vue = new Vue({
components: { App },
template: '<App/>'
})
......@@ -46,22 +46,49 @@ export const constantRouterMap = [{
/**
* 异步路由
*/
export const asyncRouterMap = [{
path: '/monitor',
name: '实时视频',
component: reslove => require(['@/views/layout'], reslove),
meta: {
icon: 'gy-icon-jianguan'
export const asyncRouterMap = [
{
path: '/monitor',
name: '报表统计',
component: reslove => require(['@/views/layout'], reslove),
meta: {
icon: 'gy-icon-jianguan'
},
children: [
{
path: '/monitor/show',
name: '报表展示',
component: reslove => require(['@/views/report/show'], reslove),
},
{
path: '/monitor/static',
name: '基础统计',
component: reslove => require(['@/views/report/static'], reslove),
},
{
path: '/monitor/timeflow',
name: '时段客流分布',
component: reslove => require(['@/views/report/timeflow'], reslove),
}
]
},
children: [
{
path: '/system/playvideo',
name: '实时视频',
component: reslove => require(['@/views/videos/playvideo'], reslove),
}
]
},{
path: '/enforcelaw/config',
// {
// path: '/monitor',
// name: '实时视频',
// component: reslove => require(['@/views/layout'], reslove),
// meta: {
// icon: 'gy-icon-jianguan'
// },
// children: [
// {
// path: '/system/playvideo',
// name: '实时视频',
// component: reslove => require(['@/views/videos/playvideo'], reslove),
// }
// ]
// },
{
path: '/system/playvideo',
name: '数据检索',
meta: {
icon: 'el-icon-search'
......@@ -72,29 +99,10 @@ export const asyncRouterMap = [{
name: '抓拍记录',
component: reslove => require(['@/views/Search/FilmedRecords'], reslove),
},
{
path: '/search/pices',
name: '以图搜图',
component: reslove => require(['@/views/Search/Searchpic'], reslove),
}, {
path: '/search/dbs',
name: '人口库管理',
component: reslove => require(['@/views/Search/facedb/database'], reslove),
}
]
},
{
path: '/activity',
name: '活动状态',
meta: {
icon: 'el-icon-map-location'
},
component: reslove => require(['@/views/layout'], reslove),
children: [
// {
// path: '/activity/status',
// name: '轨迹查询',
// component: reslove => require(['@/views/activity/status'], reslove),
// path: '/search/pices',
// name: '以图搜图',
// component: reslove => require(['@/views/Search/Searchpic'], reslove),
// },
{
path: '/activity/report',
......@@ -102,7 +110,28 @@ export const asyncRouterMap = [{
component: reslove => require(['@/views/activity/report'], reslove),
}
]
},{
},
// {
// path: '/activity',
// name: '活动状态',
// meta: {
// icon: 'el-icon-map-location'
// },
// component: reslove => require(['@/views/layout'], reslove),
// children: [
// // {
// // path: '/activity/status',
// // name: '轨迹查询',
// // component: reslove => require(['@/views/activity/status'], reslove),
// // },
// {
// path: '/activity/report',
// name: '状态报表',
// component: reslove => require(['@/views/activity/report'], reslove),
// }
// ]
// },
{
path: '/equipment',
name: '设备管理',
component: reslove => require(['@/views/layout'], reslove),
......@@ -113,12 +142,14 @@ export const asyncRouterMap = [{
path: '/equipment/org',
name: '组织机构管理',
component: reslove => require(['@/views/Equipment/org.vue'], reslove),
},{
path: '/equipment/vchan',
name: '相机配置',
component: reslove => require(['@/views/Equipment/vchan.vue'], reslove),
}
// ,{
// path: '/equipment/vchan',
// name: '相机配置',
// component: reslove => require(['@/views/Equipment/vchan.vue'], reslove),
// },
// ,{
// path: '/equipment/dev',
// name: '设备状态',
// component: reslove => require(['@/views/Equipment/dev.vue'], reslove),
......@@ -140,11 +171,18 @@ export const asyncRouterMap = [{
path: '/system/role',
name: '角色管理',
component: reslove => require(['@/views/System/role'], reslove),
},{
path: '/system/setting',
name: '其他配置',
component: reslove => require(['@/views/System/Setting'], reslove),
},
// {
// path: '/system/setting',
// name: '其他配置',
// component: reslove => require(['@/views/System/Setting'], reslove),
// },
{
path: '/search/dbs',
name: '人口库管理',
component: reslove => require(['@/views/Search/facedb/database'], reslove),
}
]
}
]
......
......@@ -7,7 +7,7 @@ const info = {
org:[],
address:[],
facedbdata:[],
province:[]
province:[],
},
mutations:{
SET_DEV: (state, dev) => {
......
import axios from '../../util/http'
import {asyncRouterMap, constantRouterMap } from '@/router'
import {url} from '../../util/api'
/**
* 获取路由列表
*/
function getMenuInfo(token) {
return new Promise((reslove, reject) =>{
axios.get(url + "/auth/apps/" + '23660e5593563b27832c2b8f490b458e' + "/menus?shape=list").then(response => {
reslove(response);
})
});
}
import {asyncRouterMap, constantRouterMap } from '@/router/index.js'
import defultrouter from "@/router/index.js";
/**
* cyl add
* 用于判断父级菜单是否有子级菜单被选中
* 如果有,那么该父节菜单也需要选中
*/
function existsChildren(router,roles){
for(let i = 0; i < roles.length; i++){
for(let k = 0; k < router.children.length; k++){
if(router.children[k].children && router.children[k].children.length>0){
existsChildren(router.children[k],roles);
}else{
if(roles[i].path === router.children[k].path){
return true;
}
}
}
}
return false;
}
/**
* 判断是否有权限
......@@ -38,22 +8,22 @@ function existsChildren(router,roles){
* @param {*} roles
*/
function hasPerminssion(router, roles) {
if(router.children && router.children.length>0){
if(existsChildren(router,roles)){
return true;
if (router.children && router.children.length > 0) {
if (existsChildren(router, roles)) {
return true;
}
}
let status = false
let status = false;
// let status = true
if (roles) {
for(let i = 0; i < roles.length; i++){
if(roles[i].path === router.path){
for (let i = 0; i < roles.length; i++) {
if (roles[i].path === router.path) {
status = true;
break;
}
}
}
return status
return status;
}
/**
......@@ -63,87 +33,53 @@ function hasPerminssion(router, roles) {
* @param {*} roles
*/
function filterAsyncRouter(asyncRouterMap, roles) {
const newData = [];
var newData = [];
// return routers
asyncRouterMap.forEach(ele => {
let obj = {};
if (hasPerminssion(ele, roles)) {
obj['path'] = ele.path;
obj['name'] = ele.name;
obj['meta'] = ele.meta || {}
obj['component'] = ele.component;
if (ele.children && ele.children.length > 0) {
obj['children'] = filterAsyncRouter(ele.children, roles)
} else {
obj['children'] = []
asyncRouterMap.forEach((ele, index) => {
roles.map(m => {
if (ele.path == m.path) {
let obj = ele;
if (m.children && m.children.length > 0) {
obj.children = filterAsyncRouter(ele.children, m.children);
} else {
obj.children = []
}
newData.push(obj);
}
} else {
return false
}
newData.push(obj)
});
});
return newData
}
/**
* 根据路由和当前跳转key(路由路径)
* 获取第三级路由
* @param {*} router
* @param {*} key
*/
function filterTwoMenu(router, key) {
let data = [],
state = true;
router.forEach(e => {
if(e.path == key)
if(e.children) {
data = e.children
} else {
data = [];
}
})
return data;
return newData;
}
const menu = {
state: {
routers: constantRouterMap,
addRouter: [],
threeMenu:[],
threeMenu: []
},
mutations:{
mutations: {
SET_ROUTERS: (state, routers) => {
state.addRouter = routers;
state.routers = constantRouterMap.concat(routers);
defultrouter.addRoutes(routers); //合并路由
},
SET_THREEMENU: (state, routers) => {
state.threeMenu = routers;
}
},
actions: {
GetMenuRole({ commit, state},data) {
if (data === ''){
commit('SET_ROUTERS', []);
return
GetMenuRole({ commit, state }, data) {
if (data === "") {
commit("SET_ROUTERS", []);
return;
} else {
console.log('aaa',data)
let accessedRouters = filterAsyncRouter(asyncRouterMap, data);
console.log(accessedRouters)
commit("SET_ROUTERS", accessedRouters);
}
return new Promise((resolve, reject) => {
getMenuInfo().then(response => {
let accessedRouters = filterAsyncRouter(asyncRouterMap,response.data.list_data);
// commit('SET_ROUTERS', accessedRouters);
commit('SET_ROUTERS', accessedRouters);
resolve(accessedRouters);
})
})
},
GetTwoMenu({commit, state},data) {
return new Promise((reslove,reject) => {
const tmenus = filterTwoMenu(state.routers, data);
commit('SET_THREEMENU', tmenus);
reslove(tmenus);
})
}
},
}
}
};
export default menu
export default menu;
......@@ -3,19 +3,22 @@
// export let url = 'http://52.1.113.109:20080/api/v1'
export let IP = location.host
if (IP.indexOf('9.161') > -1 ||IP.indexOf('localhost')) {
IP = '192.168.9.208:20080'
// IP = 'https://store.keliuyun.com/report'
// IP="/report"
}
export let url = `http://${IP}/api/v1`
export let menus = `${url}/auth/apps/23660e5593563b27832c2b8f490b458e/menus`
IP="/report"
export let url = `${IP}`
export let menus = `${url}/auth/api/auth/apps/23660e5593563b27832c2b8f490b458e/menus`
let timer = ()=>{
return new Date().getTime()
}
export let auth = {
login: `${url}/auth/users/login`,
user: `${url}/auth/users`,
login: `${url}/users/login`,
accountid:`${url}/accounts`,
user: `${url}/users`,
edituser(userid){
return `${url}/auth/users/${userid}`
return `${url}/users/${userid}`
},
role: `${url}/auth/roles`,
editrole (roleid){
......@@ -65,3 +68,5 @@ export let org = {
}
export let faceweb = `${url}/face_web`
// export let picUrl ="https://vion-retail.oss-cn-beijing.aliyuncs.com/"
export let picUrl ="http://192.168.9.239/"
......@@ -52,8 +52,8 @@ function formatterMoreInfo(value, options) {
}
/**
* 对部分枚举可能值是0开头的,但是表数据不规范的时候,导致01变为1这种情况进行解决
* @param {} value
* @param {*} options
* @param {} value
* @param {*} options
*/
function formatterInfoChangInt(value, options) {
if(value==null || value==""){
......@@ -71,7 +71,7 @@ function formatterInfoChangInt(value, options) {
/**
* 处理图片访问地址的,目的是解决谷歌高版本浏览器不支持ftp协议
* @param {*} path
* @param {*} path
*/
function imgPathAnalysis(serip,path){
if(path !=null && path != "" && path.length > 10){
......@@ -86,7 +86,7 @@ function imgPathAnalysis(serip,path){
}
}
function formatDate(date, fmt) {
function formatDateFun(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
......@@ -131,12 +131,36 @@ function exportExcel(title) {
}
return wbout;
}
function getEndDay(dateType,date) {
let newEndDay=''
switch (dateType){
case "month":{
let dateArr=date.split('-');
var maxDay = new Date(dateArr[0],dateArr[1],0).getDate(); //获取date月最大天数
var selectDate=new Date(Date.parse((date+'-'+maxDay).replace(/-/g,"/")));
var curDate=new Date();
if(selectDate > curDate){
newEndDay=formatDateFun(new Date(),'yyyy-MM-dd')
}else{
newEndDay = date+'-'+maxDay
}
return newEndDay;
}
break;
default:
break;
}
if(dateType=="month"){
}
}
export default {
formatterInfo,
formatterMoreInfo,
formatterInfoChangInt,
imgPathAnalysis,
formatDate,
exportExcel
}
\ No newline at end of file
formatDateFun,
exportExcel,
getEndDay
}
const FONT_FAMILY = '"PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif'
const legend = {
type: 'scroll',
orient: "horizontal",
x: "center",
itemWidth: 12,
itemHeight: 12,
selected: {},
data: []
}
const xAxis = {
type: 'category',
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#888',
fontFamily: FONT_FAMILY
}
},
axisLine: {
show: true,
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
data: []
}
const yAxis = {
type: 'value',
nameTextStyle: {
color: '#444',
fontSize: 13,
fontFamily: FONT_FAMILY,
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#888',
fontFamily: FONT_FAMILY,
}
},
axisLine: {
show: true,
lineStyle: {
color: '#888'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#f5f5f5'
}
}
}
/**
* 格式化 echarts 结构
* @param {object} data
* @return {object}
*/
export function optionFormatter(data) {
let option = {}
, emptyOption = {
isEmpty: true,
graphic: {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#444',
text: 'No Data',
font: '26px ' + FONT_FAMILY
}
},
otherConf: data ? Object.assign({}, data.otherConf || {}) : {}
}
if (!data || !Object.keys(data).length) {
return false
}
else if (!data.series) {
return emptyOption
}
else if (!data.series.length) {
return emptyOption
}
option = {
animation: false,
tooltip: {
show: true,
backgroundColor: '#fff',
textStyle: {
color: '#333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)'
},
legend: legend,
grid: {},
xAxis: xAxis,
yAxis: data.yaxis || yAxis,
series: []
}
if (typeof (data.title) === 'string') {
option.title = {
text: data.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: FONT_FAMILY,
fontWeight: 'normal',
},
left: 24,
top: 16
}
}
option.color = data.color
// 处理series
// 如果不清除, 页面中有多个同类型报表将叠加
option.legend.data = []
option.xAxis.data = []
data.series.forEach((item, index) => {
if (data.notSale) {
// if(index === 1 && item.name === '销售额') {
// item.yAxisIndex = 1
// }
index === 0 && option.legend.data.push(item.name)
} else {
if (item.name) {
option.legend.data.push({ name: item.name })
}
}
})
if (data.xaxis) {
option.xAxis.data = data.xaxis.data
}
option.series = data.series
// 整合特殊情况配置
/**
* isYear: 是否年报表
* hasYaxisName: 是否显示 y 轴名称
* seriesText: 单位
* isIndependent: 是否单独的排行榜
* selectedLen: legend 选中长度
* hideDataZoom: 是否隐藏缩放轴
* chartKey: 特殊报表处理字段
* grid: 网格配置
* kpiType: 指标值
* normalXAxisLabel: 是否正常显示 x 轴 label
* yAxisName: y 轴名称(计量单位)
* _color: option color
* ...
*/
option.otherConf = Object.assign({}, data.otherConf)
return JSON.parse(JSON.stringify(option))
}
......@@ -48,13 +48,13 @@ export function tryHideFullScreenLoading() {
* 请求前的拦截器
*/
service.interceptors.request.use(function (config) {
console.log('request interceptors', config)
//截取API添加时间戳防止请求缓存
if (config.url.indexOf('?') > -1) {
if (config.url.split('?')[1].indexOf('&') > -1) {
config.url = config.url + '&s=' + new Date().getTime();
}
} else {
config.url = config.url + '?s=' + new Date().getTime();
if (config.method == "get") {
config.params = {
_t: Date.parse(new Date()) / 1000,
...config.params
};
}
if (config.url.indexOf('codes/countries') < 1) {
if (config.url.indexOf('cates') < 1) {
......@@ -83,7 +83,7 @@ service.interceptors.response.use(function (res) {
return res;
}, function (err) {
//tryHideFullScreenLoading();
// return Promise.reject(error);
return Promise.reject(err);
})
export default service
......@@ -14,31 +14,6 @@ import {pushws} from './socket'
router.beforeEach((to, from, next) => {
if (to.path === '/') {
next()
} else {
if (store.getters.permission_routers.length === 0) { //判断当前用户是否拉取了路由
store.dispatch('GetMenuRole').then(res => { //获取菜单
router.addRoutes(res);
pushws();
/**
* 初始化页面所需api
**/
faceapi.setBehaviorLocal();
faceapi.getCodeName();
faceapi.getSite();
faceapi.getOrg();
faceapi.getAddress();
faceapi.getFaceDbData();
faceapi.getProvince();
}).catch(() => {
})
} else {
}
// if (store.getters.dev_unid === ""){ //获取设备信息
// store.dispatch('GetDev')
// }
}
} else {}
next()
});
......@@ -8,13 +8,14 @@ Vue.prototype.zoomImg = function (data){
store.commit('setImgsrc',data);
}
Vue.filter('sexfn', function (value) {
if (!value)
return;
var str = '';
if (value == 1)
str = '男'
if (value == 2)
str = '女'
if (value == 0){
str = '女'
}else if (value == 1){
str = '男'
}else{
str = '未知'
}
return str;
});
......
......@@ -49,7 +49,15 @@ export default {
this.show = true
this.titlename = '抓拍图片'
this.curshow = 'img'
this.axios.get(this.API.faceweb + '/faces/' + data.unid + '/face_events').then(res => {
this.axios.get(this.API.url + '/faceRecognitions/history',{
params:{
mallId:2,
personUnid:data.personUnid,
countdate: this.common.formatDateFun(new Date(),"yyyy-MM-dd"),
sortName: "counttime",
sortOrder: "DESC"
}
}).then(res => {
if(res.data.list_data){
this.imgData = res.data.list_data;
this.noImg=false;
......
......@@ -4,21 +4,20 @@
<el-form :inline="true" class="search-form" size="small">
<el-form-item label="人口库:">
<el-select v-model="dbname" class="br0 bra bla">
<el-option value="" label="请选择库类型"></el-option>
<el-option v-for="item in crucialData" :key="item.unid" :value="item.code" :label="item.name"></el-option>
<el-option v-for="item in crucialData" :key="item.unid" :value="item.id" :label="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="姓名:">
<el-input type="text" class="bla bra br0" v-model="facename" placeholder=""></el-input>
</el-form-item>
<el-form-item label="证件号:">
<!-- <el-form-item label="证件号:">
<el-input type="text" class="bla" placeholder="请输入证件号" v-model="facecardid"></el-input>
</el-form-item>
</el-form-item> -->
<el-form-item label="性别:">
<el-select v-model="facesex" class="br0 bra bla">
<el-option value="" label="请选择性别"></el-option>
<el-option :value="1" label="男"></el-option>
<el-option :value="2" label="女"></el-option>
<el-option value="" label="全部"></el-option>
<el-option value="1" label="男"></el-option>
<el-option value="0" label="女"></el-option>
</el-select>
</el-form-item>
<el-form-item>
......@@ -30,14 +29,14 @@
<el-table :data="tableData" style="width: 100%" height="680" >
<el-table-column type="index" label="#"></el-table-column>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="sex" label="性别" :formatter="setSex" align="center"></el-table-column>
<el-table-column label="出生日期" property="birthday" :formatter="setBirthday"> </el-table-column>
<el-table-column label="身份证号" property="card_id"></el-table-column>
<el-table-column prop="gender" label="性别" :formatter="setSex" align="center"></el-table-column>
<el-table-column label="出生日期" property="email" :formatter="setBirthday"> </el-table-column>
<el-table-column label="身份证号" property="tel"></el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<div class="tab-btn-box">
<span @click="showImg(scope.row)" class="table-btn">抓拍图片</span>
<span @click="activityStatus(scope.row)" class="table-btn">活动状态</span>
<!-- <span @click="activityStatus(scope.row)" class="table-btn">活动状态</span> -->
</div>
</template>
</el-table-column>
......@@ -76,12 +75,13 @@ export default {
offset:0,
limit:20,
total:0,
currentPage:0,
currentPage:1,
dbname:'',
facename:'',
communityunid:'',
facecardid:'',
facesex:''
facesex:'',
accountId:localStorage.getItem('accountId')
};
},
......@@ -95,7 +95,7 @@ export default {
setSex(row, column, cellValue) {
var sex = "";
if (cellValue == "1") sex = "男";
if (cellValue == "2") sex = "女";
if (cellValue == "0") sex = "女";
return sex;
},
setBirthday(row, column, cellValue) {
......@@ -104,31 +104,44 @@ export default {
return data;
},
initDbData(){
this.axios.get(this.API.url + "/codes/custom/cates/4DD23AF66E/codes").then((response)=> {
this.crucialData = response.data.list_data;
});
this.axios.get(this.API.url + "/personTypes",{
params:{
accountId:this.accountId,
hasBaseType: 1
}
}).then((response)=> {
this.crucialData= response.data.data.filter(item=>{
return item.id!==0&&item.id!==1
})
this.typeData=JSON.parse(JSON.stringify(this.crucialData));
this.crucialData.unshift({
"id":"",
"name":"全部",
"unid":"alltype"
})
});
},
getData() {
this.axios
.get(this.API.faceweb + "/faces/crucial_faces", {
.get(this.API.url + "/persons", {
params: {
offset: this.offset,
limit: this.limit,
is_crucial: true,
is_active: true,
sex: this.facesex,
name__like: this.facename,
card_id__like: this.facecardid,
crucial_type: this.dbname,
page:this.currentPage,
pageSize: this.limit,
status: 1,
accountId: this.accountId,
gender: this.facesex,
name_like: `%${this.facename}%`,
type: this.dbname,
resident_unids: this.communityunid,
}
}).then( (response) =>{
this.tableData = response.data.list_data;
this.total = response.data.total_num;
this.tableData = response.data.data.list;
this.total = response.data.data.total;
});
},
handleCurrentChange(){
handleCurrentChange(val){
this.currentPage = val;
this.getData();
}
},
created() {
......
......@@ -2,16 +2,17 @@
<div class="template-box content_div_main org-box">
<div class="videoleft-box">
<el-tree
v-loading="loading"
:data="treedata"
v-loading="loading"
highlight-current
:props="defaultProps"
default-expand-all
highlight-current
:load="loadNode"
lazy
@node-click="handleNodeClick"
></el-tree>
>
</el-tree>
</div>
<div class="org-right-box">
<el-button class="search-btn ml10 mt10" @click="addorg()" icon="el-icon-plus">添加</el-button>
<!-- <el-button class="search-btn ml10 mt10" @click="addorg()" icon="el-icon-plus">添加</el-button> -->
<el-table
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
......@@ -28,13 +29,15 @@
</div>
</div>
<el-table-column type="type" width="55" label="#"></el-table-column>
<el-table-column label="名称" prop="org_name"></el-table-column>
<el-table-column label="类型" :formatter="formatHpzl" prop="org_type"></el-table-column>
<el-table-column label="操作">
<el-table-column label="本地IP" prop="localIp"></el-table-column>
<el-table-column label="设备序列号" prop="serialnum"></el-table-column>
<el-table-column label="状态" :formatter="formatHpzl" prop="status"></el-table-column>
<el-table-column label="外网IP" prop="wanIp"></el-table-column>
<!-- <el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="info" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
</div>
<div class="dialog-org">
......@@ -110,27 +113,33 @@ export default {
treedata: [],
defaultProps: {
children: "childs",
label: "org_name"
label: "name",
isLeaf: "leaf"
},
dialogVisible: false,
orgform: {
oreType:'',
orgname:''
},
curOrgData: {}
curOrgData: {},
accountId:localStorage.getItem('accountId')
};
},
methods: {
dialogclose(){
this.$refs.orgform.resetFields()
},
handleNodeClick(data) {
this.tableData = data.childs;
this.curOrgData = data;
handleNodeClick(data,node) {
if(node.childNodes.length>0&&data.floorId){
this.tableData=[]
node.childNodes.forEach(item=>{
this.tableData.push(item.data)
})
}
},
formatHpzl(data) {
if (data.org_type == "org") return "组织";
if (data.org_type == "address") return "地点";
if (data.status == 0) return "离线";
if (data.status == 1) return "在线";
},
buildTree(data) {
if (!data) {
......@@ -258,11 +267,58 @@ export default {
}
console.log(alldata)
},
loadNode(node, resolve) {
this.loading = true;
if (node.level === 0) {
this.axios.get(this.API.url+"/malls",{
params:{
accountId:this.accountId,
status:1
}
}).then((res)=>{
return resolve(res.data.data)
})
}
if (node.level === 1){
this.axios.get(this.API.url+"/gates/filter",{
params:{
mallId:node.data.id,
accountId:this.accountId,
status:1
}
}).then((res)=>{
return resolve(res.data.data)
})
}
if(node.level === 2){
let deviceArr=[];
this.axios.get(this.API.url+"/channels",{
params:{
gateId:node.data.id
}
}).then((res)=>{
const promises=res.data.data.map((item)=>{
return this.axios.get(this.API.url+"/devices/"+item.deviceId)
})
Promise.all(promises).then(res=>{
res.forEach(item=>{
item.data.data.leaf=true;
deviceArr.push(item.data.data)
})
this.tableData=deviceArr;
return resolve(deviceArr)
})
})
}
this.loading = false;
if(node.level > 2){
return resolve([])
}
},
getorgtree() {
this.loading = true;
this.axios.get(this.API.org.getorgtree).then(res => {
this.treedata = res.data;
this.loading = false;
// if (res.data.length > 0) {
// res.data.forEach(e => {
// this.buildTree(e);
......
......@@ -5,15 +5,23 @@
</div>
<div class="org-right-box">
<el-form :inline="true" class="search-form" size="small">
<el-form-item label="组织:">
<!-- <el-form-item label="组织:">
<el-input type="text" class="bra" v-model="search.org_name" placeholder="组织名"></el-input>
</el-form-item>
<el-form-item label="地点:">
<el-input type="text" class="bla" placeholder="相机名称" v-model="search.address_name"></el-input>
</el-form-item>
<el-form-item label="相机:">
<el-input type="text" class="bla" placeholder="相机名称" v-model="search.name__like"></el-input>
</el-form-item>
</el-form-item> -->
<el-form-item label="社区选择:">
<el-select v-model="search.mallId" placeholder="请选择">
<el-option
v-for="item in mallData"
:key="item.unid" :value="item.id" :label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="相机:">
<el-input type="text" class="bla" placeholder="相机名称" v-model="search.serialnum_like"></el-input>
</el-form-item>
<el-form-item>
<el-button class="search-btn" icon="el-icon-search" @click="searchVchan">查询</el-button>
<el-button class="search-btn" @click="addvchan()" icon="el-icon-plus">添加</el-button>
......@@ -21,15 +29,15 @@
</el-form>
<el-table :data="tableData" style="width: 98%;margin:10px auto;" v-loading.body="loading">
<el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
<el-table-column label="相机编号" property="vchan_refid"> </el-table-column>
<el-table-column label="相机名称" property="vchan_name"> </el-table-column>
<el-table-column label="相机编号" property="serialnum"> </el-table-column>
<el-table-column label="相机名称" property="name"> </el-table-column>
<el-table-column label="相机属性">
<template slot-scope="scope">
<span>{{showent(scope.row)}}</span>
</template>
</el-table-column>
<el-table-column label="IP" property="vchan_prop.ip" align="center"> </el-table-column>
<el-table-column label="所属组织" property="org_name" align="center"> </el-table-column>
<el-table-column label="IP" property="localIp" align="center"> </el-table-column>
<el-table-column label="所属组织" property="mall.name" align="center"> </el-table-column>
<el-table-column label="所属地点" property="address_name" align="center"> </el-table-column>
<el-table-column label="操作" width="350px" align="center">
<template slot-scope="scope">
......@@ -57,6 +65,7 @@ import addvchan from "./adddev";
export default {
data() {
return {
mallData:[],
height: 900,
tableData: [],
loading: false,
......@@ -71,19 +80,33 @@ export default {
},
orgData: [],
search:{
org_name:'',
address_name:'',
name__like:''
accountId:localStorage.getItem('accountId'),
mallId:'',
serialnum_like:''
},
page: {
offset: 0,
limit: 18,
total: 0,
currentPage: 0
currentPage: 1
}
};
},
methods: {
initMallData(){
this.axios.get(this.API.url + "/malls",{
params:{
accountId:this.search.accountId,
status:1
}
}).then((response)=> {
this.mallData = response.data.data;
if(response.data.data.length>0){
this.search.mallId=response.data.data[0].id
}
this.getvchanlist();
});
},
handleCurrentChange(val) {
this.page.offset = (val - 1) * this.page.limit;
this.getvchanlist();
......@@ -113,7 +136,7 @@ export default {
},
editvchan(index, row) {
this.editData = row;
this.$refs.vchan.editvchan();
// this.$refs.vchan.editvchan();
this.addvdialog = true;
this.state = 'edit';
},
......@@ -148,19 +171,21 @@ export default {
},
getvchanlist() {
this.axios
.get(this.API.org.getvchanList, {
.get(this.API.url+"/devices/filter", {
params:{
org_name:this.search.org_name,
address_name:this.address_name,
name__like:this.name__like,
offset: this.page.offset,
limit: this.page.limit,
vchan_type:'vchan'
accountId: this.search.accountId,
mallId: this.search.mallId,
status_arr: '1,0',
serialnum_like: `%${this.search.serialnum_like}%`,
page: this.page.currentPage,
pageSize: this.page.limit,
sortName: 'sort_ip',
sortOrder: 'ASC'
}
})
.then(response => {
this.tableData = response.data.list_data;
this.page.total = response.data.total_num;
this.tableData = response.data.data.list;
this.page.total = response.data.data.total;
});
},
buildTree(data){
......@@ -235,7 +260,7 @@ export default {
},
created() {
this.getOrgData();
this.getvchanlist();
this.initMallData();
}
};
</script>
......@@ -260,5 +285,3 @@ export default {
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
}
</style>
......@@ -5,25 +5,32 @@
<div class="info-box">
<div class="info-item">
<div class="info-header">
<span class="icon el-icon-s-data"></span>相机抓拍总数</div>
<div class="info-content">90</div>
<span class="icon el-icon-s-data"></span>相机总数</div>
<div class="info-content">{{devsNum}}</div>
</div>
<div class="info-item">
<div class="info-header">
<span class="icon el-icon-s-custom"></span>人口库数量</div>
<div class="info-content">10</div>
<div class="info-content">{{personTypeLength}}</div>
</div>
<div class="info-item">
<div class="info-header">
<span class="icon el-icon-camera-solid"></span>总抓拍次数</div>
<div class="info-content">909</div>
<div class="info-content">{{flowNum}}</div>
</div>
<div class="info-item">
<div class="info-header">
<span class="icon el-icon-user-solid"></span>核实人数</div>
<div class="info-content ">230</div>
<div class="info-content ">{{flowNum}}</div>
</div>
</div>
<div class="imgBox">
<el-image
v-for="item in imgArr"
:key="item.id"
:src="API.picUrl+'picture/'+item.facePath+item.facePic"
fit="fill"></el-image>
</div>
</div>
</div>
</template>
......@@ -65,10 +72,77 @@ export default {
dayfacealarm:0,
openstate:false,
unid:'',
listData:[1,2,3,4,5,5,6,7,7,9]
listData:[1,2,3,4,5,5,6,7,7,9],
accountId:localStorage.getItem("accountId"),
personTypeLength:0,
flowNum:0,
devsNum:0,
imgArr:[],
timer:''
}
},
methods:{
init(){
this.initFlow();
this.initDbData();
this.initDevs();
this.initFacePic();
this.initSetinterval();
},
initSetinterval(){
this.timer=setInterval(()=>{
this.initFacePic();
},1000)
},
initFacePic(){
this.axios.get(this.API.url + "/faceRecognitions",{
params:{
accountId:this.accountId,
direction:1,
sortName:"counttime",
sortOrder:"DESC",
age_gt:0,
page: 1,
pageSize: 21,
countdate: this.common.formatDateFun(new Date(),'yyyy-MM-dd')
}
}).then((response)=> {
this.imgArr=response.data.data.list;
})
},
initDevs(){
this.axios.get(this.API.url + "/devices",{
params:{
accountId:this.accountId,
page:1,
pageSize:99999
}
}).then((response)=> {
this.devsNum= response.data.data.total;
});
},
initFlow(){
this.axios.get(this.API.url + "/report/day/account",{
params:{
orgIds:this.accountId,
chartIds: "1",
date: this.common.formatDateFun(new Date(),'yyyy-MM-dd')
}
}).then((response)=> {
this.flowNum= response.data.data.head.dayInnum;
});
},
initDbData(){
this.axios.get(this.API.url + "/personTypes",{
params:{
accountId:this.accountId,
hasBaseType: 1
}
}).then((response)=> {
this.personTypeLength= response.data.data.length;
});
},
InitMap(){
let _this = this;
//坐标
......@@ -110,7 +184,8 @@ export default {
                                                    dataProjection : 'EPSG:4326'
                                                  })
});
var path = "http://192.168.9.62:20080/static/pics/qingdaoMap/roadmap/{z}/{x}/{y}.png"
// var path = "http://192.168.9.62:20080/static/pics/qingdaoMap/roadmap/{z}/{x}/{y}.png"
var path = "http://19610hs911.iask.in/static/pics/qingdaoMap/roadmap/{z}/{x}/{y}.png"
var offlineMapLayer = new TileLayer({
source: new XYZ({
// 设置本地离线瓦片所在路径,由于例子里面只有一张瓦片,页面显示时就只看得到一张瓦片。
......@@ -251,8 +326,12 @@ export default {
},
},
beforeRouteLeave (to, from, next) {
clearInterval(this.timer);
next()
},
created(){
this.init();
},
mounted(){
this.InitMap();
......@@ -350,7 +429,7 @@ export default {
color red
}
.map{
height 88vh
height 85vh
width 99%
margin 10px auto 10px
}
......@@ -578,4 +657,28 @@ export default {
.info-list {
padding 1px 10px
}
.imgBox{
position absolute
z-index 5000
width 370px
color #222
// display flex;
right: 0px;
top: 0px;
max-height 100%
overflow hidden;
// flex-wrap:wrap ;
}
.el-image{
width 31%;
// order:1;
// flex-grow:1;
// flex-shrink:0;
margin-left 4px
}
@media only screen and (max-width: 1366px) {
.imgBox{
width 250px
}
}
</style>
......@@ -49,9 +49,7 @@
</div>
<el-col :span="24" class="view-box">
<keep-alive>
<router-view></router-view>
</keep-alive>
</el-col>
</el-row>
......
......@@ -41,6 +41,7 @@
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
data() {
return {
......@@ -50,15 +51,14 @@ export default {
},
methods: {
login() {
debugger;
//--添加验证
if (this.userName == "") {
this.$message.error("请输入用户名");
return;
}
if (this.userName != "admin" && this.userName.length != 6) {
this.$message.error("请输入6位用户ID");
if (this.userName != "admin" && this.userName.length < 2) {
this.$message.error("请输入至少2位用户ID");
return;
}
......@@ -66,36 +66,70 @@ export default {
this.$message.error("请输入密码在继续");
return;
}
var data = { username: this.userName, password: this.passWord };
var data = { loginName: this.userName, password: this.passWord };
this.axios
.post(this.API.auth.login, data)
.then(response => {
localStorage.setItem("atoken", response.data.atoken);
localStorage.setItem("rtoken", response.data.rtoken);
localStorage.setItem("user_id", response.data.user_unid);
localStorage.setItem("atoken", response.data.data.atoken);
localStorage.setItem("rtoken", response.data.data.rtoken);
localStorage.setItem("user_id", response.data.data.user_unid);
localStorage.setItem("username", this.userName);
localStorage.setItem("userId", response.data.data.user.id);
sessionStorage.removeItem("threemenu");
sessionStorage.removeItem("menu");
localStorage.setItem("accountId", response.data.data.user.accountId);
// this.axios.get(this.API.auth.accountid,{
// params:{
// id:response.
// }
// })
//----cyl 添加获取更加详细的用户信息---
this.axios
.get(this.API.auth.edituser(localStorage.getItem("user_id")))
.then(response => {
localStorage.setItem("namemc", response.data.name);
});
//---end
this.$router.push("/show");
this.getMenuInfo();
// console.log(response.data)
// localStorage.setItem("atoken",'dc62ae05-21be-43ad-9be2-d5f8a6bd0dac');
})
.catch(err => {
console.log(err)
let info = "用户名或密码错误!";
if (err.message == "Network Error") info = "网络错误!";
this.$message.error(info);
});
},
/**
* 获取路由列表
*/
getMenuApp(){
return new Promise((reslove, reject) =>{
this.axios.get(this.API.url + "/auth/api/v1/auth/apps").then(response => {
reslove(response);
})
});
},
async getMenuInfo() {
let res =await this.getMenuApp();
let unid=''
res.data.list_data.forEach(item=>{
if(item.name=='shebao'){
unid=item.unid
}
})
this.axios.get(this.API.url + "/auth/api/v1/auth/apps/" + unid + "/menus?shape=tree").then(response => {
localStorage.setItem(
"menuArr",
JSON.stringify(response.data.menu_tree[0].children)
);
this.$store
.dispatch("GetMenuRole", response.data.menu_tree[0].children)
.then(res => {
this.$router.push("/show");
});
})
}
}
};
......
......@@ -29,7 +29,6 @@
},
methods: {
handleSelect(key, keyPath) {
debugger
sessionStorage.setItem('menu',key);
this.$router.push(key);
......@@ -45,7 +44,6 @@
]),
},
created(){
debugger
console.log(this.theme)
let menu = sessionStorage.getItem('menu');
if(menu) {
......
......@@ -40,7 +40,6 @@ export default {
...mapGetters(["three_menu"])
},
created() {
debugger
let threemenu = sessionStorage.getItem("threemenu");
if (threemenu) {
this.subactiveIndex = threemenu;
......
......@@ -2,33 +2,38 @@
<template>
<div class="template-box content_div_main">
<el-form :inline="true" class="search-form" size="small">
<el-form-item label="抓拍地点:">
<el-form-item label="社区选择:">
<el-select v-model="search.communityunid" placeholder="请选择">
<el-option
v-for="item in addrData"
:key="item.unid" :value="item.unid" :label="item.org_name"
:key="item.unid" :value="item.id" :label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="抓拍相机:">
<el-input type="text" class="bla bra br0" v-model="search.cameraname" placeholder=""></el-input>
<el-select v-model="search.cameraname" placeholder="请选择">
<el-option
v-for="item in gateData"
:key="item.unid" :value="item.id" :label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="查询库:">
<el-select v-model="search.crucial_type" placeholder="请选择">
<el-option
v-for="item in crucialData"
:key="item.unid" :value="item.code" :label="item.name"
:key="item.unid" :value="item.id" :label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="查询时间:">
<el-date-picker
v-model="search.datatime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
<el-date-picker
v-model="search.datatime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button class="search-btn" @click="searchFaceCheck" icon="el-icon-search">查询</el-button>
......@@ -37,17 +42,14 @@
</el-form>
<el-row class="table_m_type">
<el-table :data="tableData" height="690" v-loading="loading">
<el-table-column prop="event_dt" label="日期">
<template slot-scope="scope">
{{showLocalTime(scope.row.event_dt)}}
</template>
<el-table-column prop="counttime" label="日期">
</el-table-column>
<el-table-column prop="events_count" label="出现次数" ></el-table-column>
<el-table-column prop="camera.name" label="相机名称"></el-table-column>
<el-table-column prop="historyArrivalCount" label="出现次数" ></el-table-column>
<el-table-column prop="channelSerialnum" label="相机名称"></el-table-column>
<el-table-column prop="face.name" label="姓名"></el-table-column>
<el-table-column label="性别">
<template slot-scope="scope">
{{scope.row.sex |sexfn}}
{{scope.row.gender |sexfn}}
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
......@@ -60,9 +62,9 @@
trigger="hover"
>
<div class="pop-img">
<img slot="reference" :src="scope.row.pic_url"/>
<img slot="reference" :src="API.picUrl+'picture/'+scope.row.facePath+scope.row.facePic"/>
</div>
<img slot="reference" :src="scope.row.pic_url" class="accomimg"/>
<img slot="reference" :src="API.picUrl+'picture/'+scope.row.facePath+scope.row.facePic" class="accomimg"/>
</el-popover>
</div>
</template>
......@@ -84,7 +86,7 @@
</el-pagination>
</el-row>
<el-row>
<tracks ref="track"></tracks>
<tracks ref="track" :gateData="gateData"></tracks>
</el-row>
</div>
</template>
......@@ -95,8 +97,13 @@ import tracks from './track'
export default {
data() {
return {
pickerOptions:{
disabledDate(time) {
return time.getTime() > Date.now();
},
},
addrData: [],
communityData: [],
gateData:[],
crucialData:[],
loading: false,
Progressdialog:false,
......@@ -104,7 +111,7 @@ export default {
communityunid: "",
cameraname: "",
crucial_type:'',
datatime: ""
datatime: this.formatDate(new Date(), "yyyy-MM-dd")
},
camrefid: "",
page: {
......@@ -119,6 +126,7 @@ export default {
dialogVisible: false,
timer:'',
progress:0,
accountId:localStorage.getItem('accountId')
};
},
methods: {
......@@ -127,9 +135,8 @@ export default {
},
handleSizeChange(val) {},
handleCurrentChange(val) {
this.page.offset = (val - 1) * this.page.limit;
this.getFaceData();
this.page.currentPage = val;
this.getFaceData();
},
handleEdit(index, row) {
this.eventdata = row;
......@@ -138,69 +145,89 @@ export default {
},
searchFaceCheck() {
this.getFaceData();
this.page.offset = 0;
this.page.currentPage = 0;
this.page.currentPage = 1;
},
initDbData(){
this.axios.get(this.API.url + "/codes/custom/cates/4DD23AF66E/codes").then((response)=> {
this.crucialData = response.data.list_data;
this.axios.get(this.API.url + "/personTypes",{
params:{
accountId:this.accountId,
hasBaseType: 1
}
}).then((response)=> {
this.crucialData = response.data.data;
this.crucialData.unshift({
"id":"",
"name":"全部",
"unid":"alltype"
})
});
},
initAddrData(){
this.axios.get(this.API.url + "/org/address").then((response)=> {
this.addrData = response.data.list_data;
});
this.axios.get(this.API.url + "/malls",{
params:{
accountId:this.accountId,
status:1
}
}).then((response)=> {
this.addrData = response.data.data;
if(response.data.data.length>0){
this.search.communityunid=response.data.data[0].id
}
this.initDbData();
this.initGateData();
this.getFaceData();
});
},
initGateData(){
this.axios.get(this.API.url + "/gates",{
params:{
mallId:this.search.communityunid,
isHasFace: 1,
status:1
}
}).then((response)=> {
this.gateData = response.data.data;
this.gateData.unshift({
"id":"",
"name":"全部",
"unid":"allgate"
})
});
},
getFaceData() {
this.loading = true;
var checknum_greater = this.search.dtNumber,
gte_checknum_greater,
lt_checknum_greater;
if (this.search.dt == 1) {
gte_checknum_greater = checknum_greater;
lt_checknum_greater = "";
}
if (this.search.dt == 2) {
gte_checknum_greater = "";
lt_checknum_greater = checknum_greater;
}
var Vthis = this;
this.axios
.get( this.API.faceweb + "/face_events?",{
.get( this.API.url + "/faceRecognitions",{
params: {
offset: Vthis.page.offset,
limit: Vthis.page.limit,
is_active: true,
'face.crucial_type':this.search.crucial_type,
'camera.name':this.search.cameraname,
camera_addr_unid: this.search.communityunid,
event_dt__gte: this.setUtcTime(this.search.datatime[0]),
event_dt__lt: this.setUtcTime(this.search.datatime[1]),
sortName: 'counttime',
sortOrder: 'DESC',
countdate:this.search.datatime,
accountId: this.accountId,
mallId: this.search.communityunid,
personType:this.search.crucial_type,
direction:1,
gateId:this.search.cameraname,
page: Vthis.page.currentPage,
pageSize: Vthis.page.limit,
age_gt: 0,
group: 1
}
}).then(function(response) {
Vthis.tableData = response.data.list_data;
Vthis.page.total = response.data.total_num;
Vthis.tableData = response.data.data.list;
Vthis.page.total = response.data.data.total;
Vthis.loading = false;
});
},
exportCluster() {
var checknum_greater = this.search.dtNumber,
gte_checknum_greater,
lt_checknum_greater;
if (this.search.dt == 1) {
gte_checknum_greater = checknum_greater;
lt_checknum_greater = "";
}
if (this.search.dt == 2) {
gte_checknum_greater = "";
lt_checknum_greater = checknum_greater;
}
this.axios.get(this.API.faceweb + "/faces/aggregate/export",{
params:{
"camera_addr_unids":this.search.communityunid,
"camera_name__like": this.search.cameraname,
"event_dt__gte": this.setUtcTime(this.search.datatime[0]),
"event_dt__lt": this.setUtcTime(this.search.datatime[1]),
// "event_dt__gte": this.setUtcTime(this.search.datatime[0]),
// "event_dt__lt": this.setUtcTime(this.search.datatime[1]),
"limit":100
}
}).then((response)=>{
......@@ -234,7 +261,44 @@ export default {
});
},
handleSee(index,data){
this.$refs.track.init(data)
var Vthis = this;
this.axios
.get( this.API.url + "/faceRecognitions",{
params: {
sortName: 'counttime',
sortOrder: 'DESC',
countdate:this.search.datatime,
accountId: this.accountId,
mallId: this.search.communityunid,
direction:1,
age_gt: 0,
personUnid:data.personUnid
}
}).then(function(response) {
Vthis.$refs.track.init(response.data.data)
});
},
formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
}
}
return fmt;
},
padLeftZero(str) {
return ('00' + str).substr(str.length);
}
},
components: {
......@@ -242,10 +306,7 @@ export default {
tracks
},
created() {
this.initDbData();
this.initAddrData();
this.getFaceData();
this.communityData = this.$store.state.orgData;
}
};
</script>
......
......@@ -27,9 +27,9 @@
</el-col>
<el-col :span="12">
<el-form-item label="性别" prop="region">
<el-select v-model="faceForm.sex" placeholder="">
<el-option label="男" value="shanghai"></el-option>
<el-option label="女" value="beijing"></el-option>
<el-select v-model="faceForm.gender" placeholder="">
<el-option label="男" :value="1"></el-option>
<el-option label="女" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
......
......@@ -3,8 +3,7 @@
<el-form :inline="true" class="search-form" size="small">
<el-form-item label="人口库:">
<el-select v-model="dbname" class="br0 bra bla">
<el-option value="" label="请选择库类型"></el-option>
<el-option v-for="item in crucialData" :key="item.unid" :value="item.code" :label="item.name"></el-option>
<el-option v-for="item in crucialData" :key="item.unid" :value="item.id" :label="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="姓名:">
......@@ -15,9 +14,9 @@
</el-form-item>
<el-form-item label="性别:">
<el-select v-model="facesex" class="br0 bra bla">
<el-option value="" label="请选择性别"></el-option>
<el-option :value="1" label="男"></el-option>
<el-option :value="2" label="女"></el-option>
<el-option label="全部" value=""></el-option>
<el-option value="1" label="男"></el-option>
<el-option value="0" label="女"></el-option>
</el-select>
</el-form-item>
<el-form-item>
......@@ -27,44 +26,50 @@
</el-form>
<el-dialog title="人员管理" :visible.sync="dialogVisible" size="small" >
<el-row>
<el-upload ref="upload" action=""
:file-list="fileList"
:auto-upload=false
:http-request="uploadimg"
list-type="picture-card"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
<el-upload
ref="upload"
class="avatar-uploader"
action=""
:show-file-list="false"
:auto-upload="false"
:on-change="handleAvatarChange"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-row>
<el-form :model="form" ref="personform" class="mt10" :rules="rules">
<el-row>
<div style="overflow:hidden">
<el-col :span="12">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-form-item label="姓名" :label-width="formLabelWidth" :rules="[ { required: true, message: '姓名不能为空'}]">
<el-input v-model="form.name" auto-complete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="库类型" prop="crucial_type" :label-width="formLabelWidth" :rules="[ { required: true, message: '请选择库类型'}]">
<el-select v-model="form.crucial_type" type="crucial_type" placeholder="请选择库类型">
<el-option v-for="item in crucialData" :key="item.code" :label="item.name" :value="item.code"></el-option>
<el-form-item label="库类型" prop="type" :label-width="formLabelWidth" :rules="[ { required: true, message: '请选择库类型'}]">
<el-select v-model="form.type" >
<el-option v-for="item in typeData" :key="item.unid" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</div>
<div style="overflow:hidden">
<el-col :span="12">
<!-- <el-col :span="12">
<el-form-item label="人员类型" :label-width="formLabelWidth">
<el-input v-model="form.crime_act" auto-complete="off"></el-input>
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input v-model="form.age" auto-complete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" :label-width="formLabelWidth">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
<el-form-item label="性别" :label-width="formLabelWidth" :rules="[ { required: true, message: '请选择性别'}]">
<el-select v-model="form.gender" placeholder="请选择性别">
<el-option label="男" :value="1"></el-option>
<el-option label="女" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
......@@ -72,7 +77,7 @@
<div style="overflow:hidden">
<el-col :span="12">
<el-form-item label="生日" :label-width="formLabelWidth">
<el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
<el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
......@@ -86,18 +91,20 @@
</div>
<div style="overflow:hidden">
<el-col :span="12">
<el-form-item label="证件号" prop="card_id" :label-width="formLabelWidth">
<el-form-item label="证件号" :label-width="formLabelWidth">
<el-input v-model="form.card_id" auto-complete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="mphone" :label-width="formLabelWidth">
<el-input v-model="form.mphone" auto-complete="off"></el-input>
<el-form-item label="籍贯" :label-width="formLabelWidth">
<el-input v-model="form.info" auto-complete="off"></el-input>
</el-form-item>
</el-col>
</div>
<div style="overflow:hidden">
<el-col :span="12">
<!-- <div style="overflow:hidden">
<el-col :span="12">
<el-form-item label="籍贯" :label-width="formLabelWidth">
<el-col :span="11">
<el-select v-model="form.province" @change="getCity" placeholder="省份">
......@@ -119,17 +126,17 @@
</el-select>
</el-form-item>
</el-col>
</div>
</div>-->
<!-- <el-col :span="12">
<el-form-item label="座机号" :label-width="formLabelWidth">
<el-input v-model="form.homephone" auto-complete="off"></el-input>
</el-form-item>
</el-col> -->
<el-col :span="24">
<!-- <el-col :span="24">
<el-form-item label="备注" :label-width="formLabelWidth">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.note"></el-input>
</el-form-item>
</el-col>
</el-col> -->
</el-row>
</el-form>
<el-dialog
......@@ -154,6 +161,9 @@ import Facetable from "./faceTable";
export default {
data() {
return {
typeData:[],
imageUrl:'',
file:null,
Substate: 1,
dbname: "",
curEditData: [], //当前编辑的数据
......@@ -171,15 +181,25 @@ export default {
faceunid: "",
communityData:[],
communityunid:"",
cartypeData:"",
crucialData:"",
cartypeData:[
{
name:"身份证",
code:1
}
],
crucialData:[],
form: {
name: "",
crucial_type: "",
accountId:localStorage.getItem('accountId'),
age:"",
info:"",
type: "",
createType:0,
photo:"",
birthday: "",
card_type: "",
card_type: 1,
card_id: "",
sex: "",
gender: "",
mphone: "",
province: "",
city: "",
......@@ -198,7 +218,8 @@ export default {
mphone: [
{ min: 0, max: 13, message: '请正确输入手机号!', trigger: 'blur' }
],
}
},
accountId:localStorage.getItem('accountId')
};
},
components: {
......@@ -218,8 +239,8 @@ export default {
editTable(index, val) {
this.Substate = 2;
this.dialogVisible = true;
this.getBlackInfo(val.unid);
this.faceunid = val.unid;
this.getBlackInfo(val);
this.faceunid = val.id;
},
/* 获取城市*/
getCity(val, citycod) {
......@@ -244,22 +265,12 @@ export default {
addFaceBlack() {
this.dialogVisible = true;
this.count = [];
this.fileList = [];
this.file = null;
this.imageUrl = '';
this.initFaceInfo();
this.Substate = 1;
},
handleRemove(file, fileList) {
//移除图片
if(file.unid){
this.deletStr+=file.unid+','
}
},
handlePictureCardPreview(file) {
//预览大图
this.dialogImageUrl = file.url;
this.dialogVisible1 = true;
},
successImg(response, file, fileList) {
console.log('r',response)
console.log('f',file)
......@@ -278,6 +289,10 @@ export default {
return false
}
},
handleAvatarChange(file,fileList){
this.file=file;
this.imageUrl= URL.createObjectURL(file.raw);
},
uploadimg(file) {
if (this.Substate == 2) {
this.editPersonnelImg(file.file);
......@@ -295,41 +310,38 @@ export default {
}
});
},
getBlackInfo(unid) {
var Vthis = this;
this.axios.get(this.API.faceweb + "/faces/" + unid).then(function(response) {
Vthis.initEditFaceInfo(response.data);
});
getBlackInfo(data) {
this.initEditFaceInfo(data);
},
initEditFaceInfo(data) {
for (var i = 0; i < data.pics.length; i++) {
data.pics[i].url = data.pics[i].url_path;
}
this.imageUrl=this.API.picUrl+data.personPic;
this.curEditData = data;
this.form.name = data.name;
var pice = [];
this.form.crucial_type = data.crucial_type;
this.form.birthday = data.birthday;
this.form.card_type = "111";
this.form.card_id = data.card_id;
this.form.sex = data.sex;
this.form.mphone = data.mphone;
this.form.province = data.province;
this.form.homephone = "";
this.form.note = data.note;
this.fileList = data.pics;
this.form.handle_state = data.handle_state;
this.form.crime_act = data.crime_act;
this.form.resident_unid = Number(data.resident_unid)
this.form.type = data.type;
this.form.gender=data.gender;
this.form.birthday = data.email;
this.form.card_type = 1;
this.form.age = data.age;
this.form.card_id = data.tel;
this.form.info = data.personInfo;
// this.form.gender = data.gender;
// this.form.mphone = data.mphone;
// this.form.province = data.province;
// this.form.homephone = "";
// this.form.note = data.note;
// this.form.handle_state = data.handle_state;
// this.form.crime_act = data.crime_act;
// this.form.resident_unid = Number(data.resident_unid)
this.getCity(data.province, data.city);
},
initFaceInfo() {
this.form.name = "";
this.form.crucial_type = "";
this.form.photo = "";
this.form.type = "";
this.form.birthday = "";
this.form.card_type = "";
this.form.card_id = "";
this.form.sex = "";
this.form.gender = "";
this.form.mphone = "";
this.form.province = "";
this.form.city = "";
......@@ -338,11 +350,33 @@ export default {
this.form.note = "";
this.form.handle_state = "";
this.form.resident_unid = "";
this.form.card_type = 1;
this.form.age ="";
this.form.info = "";
},
saveAddPersonnel() {
/* eslint-disable no-undef */
let param = new FormData() // 创建form对象
param.append('file', this.file.raw) // 通过append向form对象添加数据
param.append('name', this.form.name);
param.append('gender', this.form.gender);
param.append('type', this.form.type);
param.append('photo', this.imageUrl);
param.append('age', this.form.age);
param.append('tel', this.form.card_id);
param.append('email', this.form.birthday);
param.append('personInfo', this.form.info);
param.append('accountId', this.form.accountId);
param.append('createType', 0);
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
var Vthis = this;
this.axios.post(this.API.faceweb + "/faces", this.form).then(function(response) {
Vthis.savePersonnelImg(response.data.unid);
this.axios.post(this.API.url + "/persons", param,config).then((response)=>{
// Vthis.savePersonnelImg(response.data.unid);
this.$refs.upload.clearFiles();
this.$refs.c1.initTable();
Vthis.$message({
message: "添加人员成功!",
type: 'success'
......@@ -350,13 +384,29 @@ export default {
});
},
saveEditPersonnel() {
this.$refs.upload.submit();
let param = new FormData() // 创建form对象
if(this.file){
param.append('file', this.file.raw) // 通过append向form对象添加数据
param.append('personPic', this.imageUrl);
}else{
param.append('personPic', this.curEditData.personPic);
}
param.append('name', this.form.name);
param.append('gender', this.form.gender);
param.append('type', this.form.type);
param.append('age', this.form.age);
param.append('tel', this.form.card_id);
param.append('email', this.form.birthday);
param.append('personInfo', this.form.info);
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
var Vthis = this;
var birthdayDate= new Date(new Date(this.form.birthday).getTime());
this.form.birthday = this.form.birthday?this.timeForm(birthdayDate).split(' ')[0]:'';
this.axios.post(this.API.faceweb + "/faces/" + Vthis.faceunid, this.form).then(function(response) {
this.axios.post(this.API.url + "/persons/" + Vthis.faceunid, param,config).then((response)=> {
Vthis.$refs["personform"].resetFields();
Vthis.$refs.c1.initTable();
this.file=null;
this.imageUrl='';
});
let messageInfo = "";
if(this.Substate == 2) messageInfo ="修改人员成功!"
......@@ -388,7 +438,6 @@ export default {
}, this);
},
editPersonnelImg(file) {
debugger
var fileArr=[];
var Vthis = this;
this.$refs.upload.uploadFiles.forEach((ele,index)=>{
......@@ -434,9 +483,22 @@ export default {
};
},
initDbData(){
this.axios.get(this.API.url + "/codes/custom/cates/4DD23AF66E/codes").then((response)=> {
this.crucialData = response.data.list_data;
});
this.axios.get(this.API.url + "/personTypes",{
params:{
accountId:this.accountId,
hasBaseType: 1
}
}).then((response)=> {
this.crucialData= response.data.data.filter(item=>{
return item.id!==0&&item.id!==1
})
this.typeData=JSON.parse(JSON.stringify(this.crucialData));
this.crucialData.unshift({
"id":"",
"name":"全部",
"unid":"alltype"
})
});
},
initcartypeData(){
this.axios.get(this.API.url + "/codes/simple/cates/09BB973F92/codes").then((response)=> {
......@@ -453,7 +515,7 @@ export default {
Vthis.provenceData = response.data.list_data;
});
this.initDbData();
this.initcartypeData();
// this.initcartypeData();
},
mounted() {}
};
......@@ -466,5 +528,4 @@ export default {
.cc {
text-align: center;
}
</style>
......@@ -10,41 +10,49 @@
</span>
<span class="info-text">{{faceInfo.name}}</span>
</el-col>
<el-col :span="12">
<span class="info-label">
<span class="info-label-name">年龄:</span>
</span>
<span class="info-text">{{faceInfo.age}}</span>
</el-col>
<el-col :span="12" class="mt10 clear-both">
<span class="info-label">
<span class="info-label-name">性别:</span>
</span>
<span class="info-text">{{faceInfo.sex |sexfn}}</span>
<span class="info-text">{{faceInfo.gender |sexfn}}</span>
</el-col>
<el-col :span="12" class="mt10 clear-both">
<span class="info-label">
<span class="info-label-name">生日:</span>
</span>
<span class="info-text">{{faceInfo.birthday}}</span>
<span class="info-text">{{faceInfo.email}}</span>
</el-col>
<el-col :span="12" class="mt10 clear-both">
<span class="info-label">
<span class="info-label-name">证件类型:</span>
</span>
<span class="info-text">{{getcardtype(faceInfo.card_type)}}</span>
<!-- <span class="info-text">{{getcardtype(faceInfo.card_type)}}</span> -->
<span class="info-text">身份证</span>
</el-col>
<el-col :span="12" class="mt10 clear-both">
<span class="info-label">
<span class="info-label-name">证件号:</span>
</span>
<span class="info-text">{{faceInfo.card_id}}</span>
<span class="info-text">{{faceInfo.tel}}</span>
</el-col>
<el-col :span="12" class="mt10 clear-both">
<!-- <el-col :span="12" class="mt10 clear-both">
<span class="info-label">
<span class="info-label-name">手机号:</span>
</span>
<span class="info-text">{{faceInfo.mphone}}</span>
</el-col>
</el-col> -->
<el-col :span="12" class="mt10 clear-both">
<span class="info-label">
<span class="info-label-name">籍贯:</span>
</span>
<span class="info-text">{{showCity(faceInfo.province,faceInfo.city)}}</span>
<!-- <span class="info-text">{{showCity(faceInfo.province,faceInfo.city)}}</span> -->
<span class="info-text">{{faceInfo.personInfo}}</span>
</el-col>
<!-- 户籍库详细信息 -->
<el-row v-show="faceInfo.extra_info" v-if="faceInfo.extra_info">
......@@ -379,19 +387,18 @@
},
getFaceDetail(data) {
var Vthis = this;
debugger
this.axios.get(this.API.faceweb + "/faces/" + data.unid).then(function (response) {
Vthis.faceInfo = response.data;
// this.axios.get(this.API.faceweb + "/faces/" + data.unid).then(function (response) {
Vthis.faceInfo = data;
Vthis.loading = false;
});
// });
},
getcardtype(data) {
let cardname = "";
this.cartypeData.forEach(function (ele) {
if (ele.code == data) {
cardname = ele.name;
}
}, this);
let cardname = "身份证";
// this.cartypeData.forEach(function (ele) {
// if (ele.code == data) {
// cardname = ele.name;
// }
// }, this);
return cardname;
},
initDbData() {
......@@ -417,7 +424,7 @@
},
created() {
this.initDbData();
this.initcartypeData();
// this.initcartypeData();
}
};
......@@ -438,4 +445,3 @@
}
</style>
......@@ -9,10 +9,11 @@
</div>
<el-table-column label="序号" type="index" width="120"></el-table-column>
<el-table-column label="姓名" property="name" type="name" width="180"></el-table-column>
<el-table-column label="性别" property="sex" :formatter="setSex" width="180"></el-table-column>
<el-table-column label="出生日期" property="birthday" :formatter="setBirthday"> </el-table-column>
<el-table-column label="身份证号" property="card_id"></el-table-column>
<el-table-column label="籍贯" property="provence" :formatter="setCity">
<el-table-column label="年龄" property="age" width="180"></el-table-column>
<el-table-column label="性别" property="gender" :formatter="setSex" width="180"></el-table-column>
<el-table-column label="出生日期" property="email" :formatter="setBirthday"> </el-table-column>
<el-table-column label="身份证号" property="tel"></el-table-column>
<el-table-column label="籍贯" property="personInfo" :formatter="setCity">
</el-table-column>
<el-table-column label="操作" width="300px" align="center">
<template slot-scope="scope">
......@@ -50,6 +51,7 @@
detaildialong: false,
curData: '',
cData: '',
accountId:localStorage.getItem('accountId')
};
},
props: {
......@@ -94,15 +96,19 @@
.then(() => {
Athis = this;
Vthis.axios
.delete(this.API.faceweb + "/faces/" + row.unid, {
is_active: false
})
.delete(this.API.url + "/persons/" + row.id)
.then(function (response) {
console.log(response)
Vthis.initTable();
Athis.$message({
type: "success",
message: "删除成功!"
});
}).catch((err)=>{
this.$message({
type: "error",
message: err
});
});
})
.catch(() => {
......@@ -113,12 +119,16 @@
});
},
setCity(row, column, cellValue) {
return this.showCity(row.province, row.city)
if(!row.personInfo){
return '未知'
}else{
return cellValue
}
},
setSex(row, column, cellValue) {
var sex = "";
if (cellValue == "1") sex = "男";
if (cellValue == "2") sex = "女";
if (cellValue == "0") sex = "女";
return sex;
},
setBirthday(row, column, cellValue) {
......@@ -130,27 +140,27 @@
alert(val);
},
handleCurrentChange(val) {
this.offset = (val - 1) * this.limit;
this.currentPage = val;
this.initTable();
},
initTable() {
var Vthis = this;
this.axios
.get(this.API.faceweb + "/faces/crucial_faces", {
.get(this.API.url + "/persons", {
params: {
offset: Vthis.offset,
limit: this.limit,
is_crucial: true,
is_active: true,
sex: Vthis.facesex,
name__like: Vthis.facename,
page:this.currentPage,
pageSize: this.limit,
status: 1,
accountId: this.accountId,
gender: Vthis.facesex,
name_like: `%${Vthis.facename}%`,
card_id__like: Vthis.facecardid,
crucial_type: Vthis.dbname,
type: Vthis.dbname,
resident_unids: this.communityunid,
}
}).then( (response) =>{
Vthis.tableData = response.data.list_data;
Vthis.total = response.data.total_num;
Vthis.tableData = response.data.data.list;
Vthis.total = response.data.data.total;
});
}
},
......@@ -175,4 +185,3 @@
}
</style>
......@@ -5,18 +5,15 @@
:visible.sync="show"
width="50%"
:before-close="handleClose">
<el-table :data="trackData">
<el-table-column prop="event_dt" label="日期">
<template slot-scope="scope">
{{showLocalTime(scope.row.event_dt)}}
</template>
<el-table :data="trackData" height="400">
<el-table-column property="counttime" label="日期">
</el-table-column>
<el-table-column property="face.name" label="姓名"></el-table-column>
<el-table-column property="camera.location" label="抓怕地址"></el-table-column>
<el-table-column property="name" label="姓名"></el-table-column>
<el-table-column property="gateId" label="抓怕地址" :formatter="gateFormatter"></el-table-column>
<el-table-column property="pic_url" label="抓怕图片">
<template slot-scope="scope">
<div class="img-box">
<img :src="scope.row.pic_url" alt="">
<img :src="API.picUrl+'picture/'+scope.row.facePath+scope.row.facePic" alt="">
</div>
</template>
</el-table-column>
......@@ -51,21 +48,24 @@ export default {
},
props: {
accunid: {},
faceunid: {}
faceunid: {},
gateData:{
type:Array
}
},
methods:{
init(data){
this.show = true;
console.log(data)
this.axios.get(this.API.faceweb+ '/faces/' + data.face_unid + '/face_events',{
params: {
limit: this.page.limit,
offset: this.page.offset,
this.trackData=data
},
gateFormatter(data){
let val="";
this.gateData.forEach(item=>{
if(item.id==data.gateId){
val=item.name;
}
}).then(res => {
console.log(res.data)
this.trackData = res.data.list_data;
})
return val;
},
handleCurrentChange(val) {
this.page.currentPage = val;
......
......@@ -38,8 +38,10 @@ export default {
addform: {
name: ""
},
headertitle: "添加角色"
};
headertitle: "添加角色",
appsUnid:'',
hasMenu:[]
}
},
props: {
opaddroledialog: {},
......@@ -54,11 +56,10 @@ export default {
this.$refs["addroleform"].validate(valid => {
if (valid) {
var Url = "";
if (this.curData == "") Url =this.API.auth.role;
if (this.curData != "")Url = this.API.auth.editrole(this.curData.role_unid);
if (this.curData == "") Url =this.API.url+"/auth/api/v1/auth/roles";
if (this.curData != "")Url = this.API.url+"/auth/api/v1/auth/roles/"+this.curData.role_unid;
this.axios.post(Url, this.addform).then(response => {
debugger
this.setPrem(response.data);
this.closeroledialong();
this.$refs["addroleform"].resetFields();
......@@ -73,6 +74,17 @@ export default {
}
});
},
dealHasMenu(menu) {
console.log(menu)
menu.children.forEach(item => {
if(!item.children) {
this.hasMenu.push(item.perm_unid)
}else if(item.children && item.children.length > 0){
this.dealHasMenu(item)
}
})
this.$refs.roletree.setCheckedKeys(this.hasMenu);
},
// 添加权限
setPrem(data) {
var permunidData = this.getCheckedNodes();
......@@ -85,14 +97,10 @@ export default {
};
aList.push(obj);
});
this.axios.post(this.API.auth.menusRole(data.role_unid),
this.axios.post(this.API.url+"/auth/api/v1/auth/roles/"+data.role_unid+"/apps/"+this.appsUnid+"/menus",
{
list_size: permunidData.length,
list_data: aList
},{
headers:{
"authorization": localStorage.getItem("atoken"),
}
}
)
.then(response => {
......@@ -101,35 +109,38 @@ export default {
}
},
getCheckedNodes() {
return this.$refs.roletree.getCheckedNodes();
return [...this.$refs.roletree.getHalfCheckedNodes(),...this.$refs.roletree.getCheckedNodes()];
},
getmenu() {
this.axios
.get(this.API.menus +'?shape=tree', {
headers: {
authorization: localStorage.getItem("atoken")
}
}
)
.then(response => {
this.roleData = response.data.menu_tree;
getMenuApp(){
return new Promise((reslove, reject) =>{
this.axios.get(this.API.url + "/auth/api/v1/auth/apps").then(response => {
reslove(response);
})
});
},
async getmenu() {
let res =await this.getMenuApp();
res.data.list_data.forEach(item=>{
if(item.name=='shebao'){
this.appsUnid=item.unid
}
})
this.axios.get(this.API.url + "/auth/api/v1/auth/apps/" + this.appsUnid + "/menus?shape=tree").then(response => {
this.roleData= response.data.menu_tree;
})
},
getRolePerms(data) {
debugger
var _this = this;
this.axios
.get(this.API.auth.perms(data.role_unid),{ headers: {
authorization: localStorage.getItem("atoken")
}})
.then(response => {
var IDs = [];
if (response.data.list_data) {
response.data.list_data.forEach((ele, i) => {
IDs.push(ele.perm_unid);
}, this);
.get(this.API.url+"/auth/api/v1/auth/apps/"+this.appsUnid+"/menus",{
params:{
role:data.role_unid
}
_this.$refs.roletree.setCheckedKeys(IDs);
})
.then(response => {
this.hasMenu = [];
this.dealHasMenu(response.data.menu_tree[0])
});
}
},
......
......@@ -70,7 +70,8 @@ export default {
currentPage: 1
},
loading: false,
curData: ""
curData: "",
userUnid:localStorage.getItem("user_id")
};
},
methods: {
......@@ -79,8 +80,8 @@ export default {
if (state) this.getRolList();
},
searchRol() {
this.page.offset = 0;
this.page.currentPage = 0;
this.page.offset = 0;
this.getRolList();
},
addRole() {
......@@ -116,18 +117,15 @@ export default {
});
},
getRolList() {
this.axios.get(this.API.auth.role, {
headers: {
authorization: localStorage.getItem("atoken")
},
params: {
"name__like": this.search.rolename,
"is_active": true,
"limit":this.page.limit,
"offset":this.page.offset
}
}).then(response => {
debugger
this.axios.get(this.API.url+"/auth/api/v1/auth/users/"+this.userUnid+"/roles", {
params: {
order: "asc",
sortby: "create_dt",
is_active:true,
limit:this.page.limit,
offset:this.page.offset
}
}).then(response => {
this.tableData = response.data.list_data;
this.page.total = response.data.total_num;
});
......
......@@ -3,13 +3,10 @@
<el-row class="">
<el-form :inline="true" class="search-form" size="small">
<el-form-item>
<el-input type="text" class="bla bra br0" v-model="name" placeholder="姓名"></el-input>
<el-input type="text" class="bla bra br0" v-model="realName" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-input type="text" class="bla bra br0" v-model="username" placeholder="登录名"></el-input>
</el-form-item>
<el-form-item>
<el-input type="text" class="bla bra" v-model="mphone" placeholder="电话"></el-input>
<el-input type="text" class="bla bra br0" v-model="loginName" placeholder="登录名"></el-input>
</el-form-item>
<el-form-item>
<el-button class="search-btn" @click="searchUser" icon="el-icon-search">查询</el-button>
......@@ -26,9 +23,9 @@
</div>
</div>
<el-table-column type="index" width=""></el-table-column>
<el-table-column prop="name" label="姓名" width=""></el-table-column>
<el-table-column prop="username" label="登录名" width=""></el-table-column>
<el-table-column prop="mphone" label="联系电话" width=""></el-table-column>
<el-table-column prop="realName" label="姓名" width=""></el-table-column>
<el-table-column prop="loginName" label="登录名" width=""></el-table-column>
<el-table-column prop="tel" label="联系电话" width=""></el-table-column>
<el-table-column label="操作" align="center" width="">
<template slot-scope="scope" align="center">
<div class="tab-btn-box">
......@@ -45,8 +42,8 @@
<el-dialog title="添加系统用户" :visible.sync="adduserDialog" width="35%">
<div>
<el-form :model="addruleForm" :rules="rules" ref="addruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label=" " prop="username" class="importas">
<el-input v-model="addruleForm.username" placeholder="登录名"></el-input>
<el-form-item label=" " prop="loginName" class="importas">
<el-input v-model="addruleForm.loginName" placeholder="登录名"></el-input>
</el-form-item>
<el-form-item label="*" class="importas" prop="password">
<el-input type="password" v-model="addruleForm.password" auto-complete="off" placeholder="密码"></el-input>
......@@ -54,16 +51,16 @@
<el-form-item label="*" class="importas" prop="checkPass">
<el-input type="password" v-model="addruleForm.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
</el-form-item>
<el-form-item label=" " prop="name">
<el-input v-model="addruleForm.name" placeholder="用户名"></el-input>
<el-form-item label=" " prop="realName">
<el-input v-model="addruleForm.realName" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label=" " prop="email">
<el-input v-model="addruleForm.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item label=" " prop="mphone">
<el-input v-model="addruleForm.mphone" placeholder="联系方式"></el-input>
<el-form-item label=" " prop="tel">
<el-input v-model="addruleForm.tel" placeholder="联系方式"></el-input>
</el-form-item>
<el-form-item label=" " prop="mphone">
<!-- <el-form-item label=" " prop="mphone">
<el-select v-model="org" filterable placeholder="请选择" class="el-sel">
<el-option
v-for="item in orgData"
......@@ -72,7 +69,7 @@
:value="item.unid">
</el-option>
</el-select>
</el-form-item>
</el-form-item> -->
</el-form>
</div>
<span slot="footer" class="dialog-footer">
......@@ -85,20 +82,20 @@
<el-dialog title="编辑系统用户" :visible.sync="edituserDialog" width="40%">
<div>
<el-form :model="editruleForm" :rules="editrules" ref="ruleEditForm" label-width="100px" class="demo-ruleForm">
<el-form-item label=" " prop="username" class="importas">
<el-input v-model="editruleForm.username" :disabled="true" placeholder="登录名"></el-input>
<el-form-item label=" " prop="loginName" class="importas">
<el-input v-model="editruleForm.loginName" :disabled="true" placeholder="登录名"></el-input>
</el-form-item>
<el-form-item label=" " class="importas" prop="password">
<!-- <el-form-item label=" " class="importas" prop="password">
<el-input type="password" v-model="editruleForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item label=" " prop="name">
<el-input v-model="editruleForm.name" placeholder="用户名"></el-input>
</el-form-item> -->
<el-form-item label=" " prop="realName">
<el-input v-model="editruleForm.realName" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label=" " prop="email">
<el-input v-model="editruleForm.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item label=" " prop="mphone">
<el-input v-model="editruleForm.mphone" placeholder="联系方式"></el-input>
<el-form-item label=" " prop="tel">
<el-input v-model="editruleForm.tel" placeholder="联系方式"></el-input>
</el-form-item>
</el-form>
</div>
......@@ -114,7 +111,7 @@
<el-col :span="12">
<div class="left-box">
<el-checkbox-group v-model="roleaddsel">
<el-col v-for="(item,index) in roleData" :key="index" :span="20" :offset="2" class="mt10"><el-checkbox :label="item">{{item.name}}</el-checkbox></el-col>
<el-col v-for="(item,index) in roleData" :key="index" :span="20" :offset="2" class="mt10"><el-checkbox :label="item.role_unid">{{item.name}}</el-checkbox></el-col>
</el-checkbox-group>
<el-col :span="24" class="editrolebtn-box">
<el-button type="primary" class="" @click="addRoleToUser">添加角色</el-button>
......@@ -125,7 +122,7 @@
<el-col :span="12">
<div class="right-box">
<el-checkbox-group v-model="roledeletesel">
<el-col v-for="(item,index) in usreHasRoleData" :key="index" :span="20" :offset="2" class="mt10"><el-checkbox :label="item">{{item.name}}</el-checkbox></el-col>
<el-col v-for="(item,index) in usreHasRoleData" :key="index" :span="20" :offset="2" class="mt10"><el-checkbox :label="item.role_unid">{{item.name}}</el-checkbox></el-col>
</el-checkbox-group>
<el-col :span="24" class="editrolebtn-box">
<el-button type="primary" @click="deleteRoleToUser">删除角色</el-button>
......@@ -197,8 +194,8 @@ export default {
label: 'c',
} ],
groupname: "",
username: "",
name: "",
realName: "",
loginName: "",
mphone: "",
groupData: [],
systableData: [],
......@@ -209,75 +206,102 @@ export default {
roleaddsel: [],
roledeletesel:[],
usreHasRoleData:[],
curData:'',
orgData:[],
org:'',
page: {
offset: 0,
limit: 20,
total: 0,
currentPage: 0
currentPage: 1
},
editruleForm: {
user_type: "user",
norm_type: "login",
name: "",
username: "",
realName: "",
loginName: "",
email: "",
mphone: "",
password: "",
is_active: true,
user_unid:''
tel: "",
status: 1,
},
addruleForm: {
user_type: "user",
norm_type: "login",
name: "",
username: "",
modifyUser:localStorage.getItem("userId"),
createUser:localStorage.getItem("userId"),
createTime:"",
realName: "",
loginName: "",
email: "",
mphone: "",
tel: "",
checkPass: "",
password: "",
sex: "",
is_active: true,
telephone: "",
user_unid:"",
},
rules: {
username: [
loginName: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
{ min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" }
],
password: [{ validator: validatePass, trigger: "blur" }],
checkPass: [{ validator: validatePass2, trigger: "blur" }]
},
editrules: {
username: [
loginName: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
{ min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
],
password: [{ required: true, message: "请输入密码1", trigger: "blur" }]
}
},
accountId:localStorage.getItem('accountId'),
editUserId:'',
userUnid:localStorage.getItem("user_id"),
editRoleUnid:"",
userHasRoleArr:[]
};
},
methods: {
formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
}
}
return fmt;
},
padLeftZero(str) {
return ('00' + str).substr(str.length);
},
searchUser(){
this.getSysUser();
},
adduser() {
this.$refs["addruleForm"].validate(valid => {
if (valid) {
this.axios.post(this.API.auth.user, this.addruleForm)
this.addruleForm.createTime=this.formatDate(new Date(), "yyyy-MM-dd hh:mm:ss");
this.addruleForm.accountId=this.accountId;
this.axios.post(this.API.url+"/users/addUser", this.addruleForm)
.then((response)=> {
this.$message({
type: "info",
message: "创建成功!"
});
this.adduserDialog = false;
this.page.currentPage = 1;
this.page.offset = 0;
this.getSysUser();
this.$refs["addruleForm"].resetFields();
if(response.data.code==500){
this.$message({
type: "error",
message: response.data.msg
});
}else{
this.$message({
type: "success",
message: "创建成功!"
});
this.adduserDialog = false;
this.page.currentPage = 1;
this.getSysUser();
this.$refs["addruleForm"].resetFields();
}
});
} else {
console.log("error submit!!");
......@@ -288,7 +312,7 @@ export default {
edituser() {
this.$refs["ruleEditForm"].validate(valid => {
if (valid) {
this.axios.post(this.API.auth.edituser(this.editruleForm.user_unid),this.editruleForm)
this.axios.post(this.API.url+"/users/"+this.editUserId,this.editruleForm)
.then((response)=> {
this.$message({
type: "info",
......@@ -307,39 +331,46 @@ export default {
allotRole(index, row) {
this.roleData = [];
this.roledialog = true;
this.curData = row
this.axios.get(this.API.auth.role, {
this.axios.get(this.API.url+"/auth/api/v1/auth/users/"+this.userUnid+"/roles", {
params: {
offset: 0,
limit: 1000,
order: "asc",
sortby: "create_dt",
is_active:true
}
}).then(response => {
this.roleData = response.data.list_data;
this.allHasRole(row);
});
this.axios.get(this.API.url+"/auth/api/v1/auth/users", {
params: {
user_type: "user",
username: row.loginName
}
}).then(response => {
this.editRoleUnid = response.data.list_data[0].user_unid;
this.allHasRole();
});
},
allHasRole(row){
this.axios.get(this.API.auth.userRole(row.user_unid), {
allHasRole(){
this.userHasRoleArr=[];
this.axios.get(this.API.url+"/auth/api/v1/auth/users/"+this.editRoleUnid +"/roles", {
params: {
offset: 0,
limit: 1000,
is_active:true
order: "asc",
sortby: "name"
}
}).then(response => {
this.usreHasRoleData = response.data.list_data;
this.usreHasRoleData.forEach(item=>{
this.userHasRoleArr.push(item.role_unid)
})
});
},
handleEdit(index, row) {
this.axios.get(this.API.auth.edituser(row.user_unid)).then((response)=>{
this.edituserDialog = true;
this.editruleForm.username= response.data.username;
this.editruleForm.name= response.data.name;
this.editruleForm.mphone= response.data.mphone;
this.editruleForm.email= response.data.email;
this.editruleForm.user_unid= response.data.user_unid;
});
this.editruleForm.loginName= row.loginName;
this.editruleForm.realName= row.realName;
this.editruleForm.tel= row.tel;
this.editruleForm.email= row.email;
this.editUserId= row.id;
},
handleDelete(index, row) {
var Vthis = this;
......@@ -348,9 +379,7 @@ export default {
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.axios.post(this.API.auth.edituser(row.user_unid), {
is_active: false
}).then(function(response) {
this.axios.delete(this.API.url+"/users/"+row.id).then(function(response) {
Vthis.getSysUser();
Vthis.$message({
type: "success",
......@@ -365,61 +394,63 @@ export default {
});
},
addGroupUser() {
this.addruleForm.loginName="";
this.addruleForm.password="";
this.addruleForm.checkPass="";
this.addruleForm.realName="";
this.addruleForm.email="";
this.addruleForm.tel="";
this.adduserDialog = true;
},
addRoleToUser(){
if(this.roleaddsel.length > 0){
this.roleaddsel.forEach(function(ele,i) {
this.axios.post(this.API.auth.userRole(this.curData.user_unid),{"role_unid":ele.role_unid}).then((response)=> {
if(i == this.roleaddsel.length-1){
this.allHasRole(this.curData);
}
});
}, this);
for(let i=0;i<this.roleaddsel.length;i++){
if(!this.userHasRoleArr.includes(this.roleaddsel[i])){
this.axios.post(this.API.url+"/auth/api/v1/auth/users/"+this.editRoleUnid+"/roles",{"role_unid":this.roleaddsel[i]}).then((response)=> {
if(i == this.roleaddsel.length-1){
this.allHasRole();
}
});
}
}
}
},
deleteRoleToUser(){
if(this.roledeletesel.length > 0){
this.roledeletesel.forEach(function(ele,i) {
this.axios.delete(this.API.auth.deleteuserRole(this.curData.user_unid, ele.role_unid)).then((response)=> {
if(i == this.roledeletesel.length-1){
this.roledeletesel = [];
this.allHasRole(this.curData);
}
});
}, this);
for(let i=0;i<this.roledeletesel.length;i++){
this.axios.delete(this.API.url+"/auth/api/v1/auth/users/"+this.editRoleUnid+"/roles/"+this.roledeletesel[i]).then((response)=> {
if(i == this.roledeletesel.length-1){
this.allHasRole();
}
});
}
}
},
setSex(row, column, cellValue) {
var sex = "";
if (cellValue == "1") sex = "男";
if (cellValue == "2") sex = "女";
if (cellValue == "0") sex = "女";
return sex;
},
getSysUser() {
debugger
console.log(this.selval)
var Vthis = this;
this.axios
.get(this.API.auth.user, {
.get(this.API.url+"/users", {
params: {
limit: 20,
offset: this.page.offset,
username__like: this.username,
mphone__like: this.mphone,
name__like: this.name,
is_active: true,
user_type: "user",
norm_type: "login"
pageSize: 20,
page: this.page.currentPage,
loginName_like:`%${this.loginName}%`,
realName_like:`%${this.realName}%`,
accountId: this.accountId,
}
}).then(function(response) {
Vthis.systableData = response.data.list_data;
Vthis.page.total = response.data.total_num;
Vthis.systableData = response.data.data.list;
Vthis.page.total = response.data.data.total;
});
},
handleCurrentChange(val) {
this.page.offset = (val - 1) * this.page.limit;
this.page.currentPage = val;
this.getSysUser();
},
handleSizeChange(val) {
......@@ -443,7 +474,7 @@ export default {
}
.el-checkbox {
color: #fff;
// color: #fff;
}
.role-box {
......
<template>
<div class="chart" :id="chartId" :chartType="chartType"></div>
</template>
<script>
import echarts from "echarts";
import { optionFormatter } from "../../util/dealChart.js";
export default {
name: "Charts",
props: {
chartId: {
type: String,
required: true
},
chartType: {
type: String,
required: true
},
chartData: {
type: Object,
default: () => {}
}
},
watch: {
chartData: {
handler(newVal, val) {
// draw chart
if (!this.chartType) return;
newVal && this[`draw${this.chartType}`](newVal);
},
deep: true
}
},
data() {
return {
chart: null,
fontFamily:
'"PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif'
};
},
mounted() {
this.initChart();
// chartType: HeatMap
if (!this.chartType) return;
this[`draw${this.chartType}`]
? this[`draw${this.chartType}`](this.chartData)
: this.$message({
type: "warning",
message: `${this.chartType}不支持`
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart =
echarts.getInstanceByDom(document.getElementById(this.chartId)) ||
echarts.init(document.getElementById(this.chartId));
},
getRandomColors(length) {
let colors = [],
temp = [];
while (colors.length < length) {
temp.push(getColor());
colors = [...new Set(temp)];
}
function getColor() {
return (
"#" +
("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6)
);
}
return colors;
},
drawAreaLine(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
top: 80,
right: 45,
bottom: 60,
left: 60
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
// let _colors = ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"] // this.getRandomColors(optionFormat.legend.data.length)
// 特殊配置项
let {
normalXAxisLabel,
grid,
selectedLen,
_color,
isYear,
chartKey,
hasYaxisName,
periodTime,
nextTimeNum,
legendShow,
legendBottom,
seriesText,
calcPercent
} = optionFormat.otherConf;
optionFormat.legend.show = legendShow || true;
let _colors =
_color || this.getRandomColors(optionFormat.legend.data.length);
let areaColor = _colors.map(item => {
return {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: item // 0% 处的颜色
},
{
offset: 1,
color: "#fff" // 100% 处的颜色
}
]
};
});
optionFormat.series.forEach((item, index) => {
item.type = "line";
item.showSymbol = true;
item.symbolSize = 6;
if (optionFormat.legend.data.length === 1 || !chartKey) {
item.areaStyle = {
normal: {
color: areaColor[index]
}
};
}
if (selectedLen) {
optionFormat.legend.selected[item.name] = index < selectedLen;
}
});
// default yAxis name 是否显示y轴单位
let yAxisNameFlag = true;
if (typeof hasYaxisName === "boolean") {
yAxisNameFlag = false;
}
if (yAxisNameFlag) {
optionFormat.yAxis.name = '人次';
optionFormat.yAxis.nameRotate = 0.1;
} else {
optionFormat.yAxis.name = "";
}
optionFormat.xAxis.boundaryGap = false;
optionFormat.legend.bottom = legendBottom || 12;
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
// animation: true,
lineStyle: {
color: "#444"
}
};
let _grid =
isYear && chartKey
? { top: 16, right: 26, bottom: 60, left: 52 }
: isYear
? { top: 80, right: 26, bottom: 100, left: 60 }
: chartKey
? { top: 16, right: 26, bottom: 60, left: 52 }
: { top: 80, right: 26, bottom: 60, left: 60 };
// 覆盖格式化后的`option`数据 按需修改
let coverTemp = {
color: _colors, // ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"]
grid: grid || _grid
};
let option = Object.assign({}, optionFormat, coverTemp);
let _dataZoom = [
{
type: "slider",
throttle: 0
},
{
type: "inside",
throttle: 0
}
];
if (isYear && chartKey) {
option.legend.bottom = 8;
option.dataZoom = _dataZoom;
} else if (isYear) {
_dataZoom[0].bottom = "40px";
option.dataZoom = _dataZoom;
} else if (chartKey) {
option.legend.bottom = 6;
option.legend.itemGap = 15;
}
if (
chartKey == "trafficMinuteForDates" ||
chartKey == "traffic10Min" ||
chartKey == "trafficdensity"
) {
_dataZoom[0].handleSize = 1;
option.dataZoom = _dataZoom;
// if (chartKey == 'trafficdensity') {
// option.dataZoom[0].start = 90
// option.dataZoom[0].end = 100
// }
}
option.tooltip.formatter = params => {
let axisText;
if (periodTime) {
axisText = this.addNextTime(params[0].axisValue, nextTimeNum);
} else {
let time,
nextTime,
regex = /\d{2}\:\d{2}$/;
if (regex.test(params[0].axisValue)) {
time = Number(params[0].axisValue.split(":")[0]);
nextTime = time > 8 ? time + 1 + ":00" : "0" + (time + 1) + ":00";
}
axisText = params[0].axisValue + (nextTime ? "-" + nextTime : "");
}
let htmls = "";
htmls = `<div style="font-size:14px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px;padding-right:15px; text-align: left;">${axisText}</div><div>`;
let marks = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#0069FF;"></span>'
let dataList = []
let dataPercent = 0
params.forEach(item => {
dataList.push(item.data)
htmls += `<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">${
item.marker
} ${item.seriesName}: ${item.data || "--"}${
chartKey === "trafficdensity"
? '人数'
: seriesText
? this.$options.filters[seriesText](true)
: "人次"
}</p>`;
});
if (calcPercent && dataList.length > 1) {
dataList.forEach(item => {
dataPercent = dataPercent !== 0
? dataPercent / item
: (item || '0')
})
htmls += `
<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">
${marks} ${老顾客比例}: ${dataPercent ? (dataPercent * 100).toFixed(2) : '--'}%
</p>
`
}
htmls += "</div>";
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawBar(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 0,
top: 80,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
// let _colors = optionFormat.color || this.getRandomColors(optionFormat.legend.data.length)
// 特殊配置项
let {
normalXAxisLabel,
hideDataZoom,
grid,
_color,
isYear,
chartKey,
kpiType,
seriesText,
barMaxWidth,
xAxisfontSize,
legend
} = optionFormat.otherConf;
let _colors = _color || '#0f0'
optionFormat.color = _colors;
optionFormat.xAxis.boundaryGap = true;
optionFormat.legend.itemGap = 15;
optionFormat.legend.bottom = 6;
optionFormat.legend.show = legend === false ? false : true;
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
animation: false,
lineStyle: {
color: "transparent"
}
};
optionFormat.xAxis.axisLabel = {
fontSize: xAxisfontSize ? xAxisfontSize : 12,
interval: 0,
rotate: normalXAxisLabel ? 0 : 30,
textStyle: {
color: "#888"
}
};
optionFormat.grid = grid || { top: 80, right: 26, left: 52, bottom: 84 };
optionFormat.series.forEach(item => {
item.barGap = 0;
if (optionFormat.xAxis.data.length <= 8) {
item.barMaxWidth = 60;
}
});
if (!hideDataZoom) {
if (
optionFormat.xAxis.data.length >= 15 ||
optionFormat.series.length >= 15
) {
optionFormat.dataZoom = [
{
type: "slider",
throttle: 0,
handleSize: 1
},
{
type: "inside",
throttle: 0
}
];
}
}
let coverTemp = {};
if (chartKey === "rankReport") {
let seriesObj = {},
seriesData = [],
totalData = [],
xAxisData = [],
legendData = [];
seriesData = optionFormat.xAxis.data.map(item => {
return {
name: item,
data: []
};
});
optionFormat.series.forEach(item => {
xAxisData.push(item.name);
item.data.forEach((dataItem, dataIndex) => {
seriesObj[optionFormat.xAxis.data[dataIndex]] = dataItem;
Object.keys(seriesObj).forEach(key => {
if (seriesData[dataIndex].name === key) {
seriesData[dataIndex].data.push(seriesObj[key]);
}
});
seriesObj = {};
});
});
seriesData.forEach(item => {
item.itemStyle = {
show: false
};
item.type = "bar";
item.barMaxWidth = "100px";
if (barMaxWidth) {
item.barMaxWidth = barMaxWidth;
}
legendData.push(item.name);
item.data.forEach((k, i) => {
if (totalData[i]) {
totalData[i] += k;
} else {
totalData[i] = k;
}
});
});
// Y轴name
let nameDict = {
TRAFFIC: "人次",
ORDER: "单",
HANDBAGRATE: "%",
PREPRICE: "元/人",
PERAREAVALUE: "元/平米",
ENTERINGRATE: "%",
DURATIONTIME: "分",
DEPTH: "游逛深度",
SALES: "元"
};
optionFormat.yAxis.nameRotate = 1;
optionFormat.yAxis.name = nameDict[kpiType];
coverTemp = {
series: seriesData,
xAxis: Object.assign({}, optionFormat.xAxis)
};
coverTemp.xAxis.data = xAxisData;
optionFormat.legend.data = legendData;
}
let option = Object.assign({}, optionFormat, coverTemp);
option.tooltip.formatter = params => {
let htmls = "",
nums = 0,
unit1 = "";
unit1 = seriesText
? this.$options.filters[seriesText](true)
: '人次';
htmls +=
'<div style="font-size:16px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">' +
params[0].axisValue +
"</div><div>";
params.forEach(item => {
if (!seriesText) {
nums = item.value
? item.value > 100000
? (item.value / 10000).toFixed(2)
: item.value
: 0;
if (item.value > 100000 && !seriesText) {
unit1 = '万次';
}
} else {
nums = item.value;
}
htmls +=
'<p style="font-size:14px;padding:4px 15px;color:#444;text-align: left;">' +
item.marker +
" " +
item.seriesName +
":" +
(nums || "--") +
unit1 +
"</p>";
});
htmls += "</div>";
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawHeatmap(data) {
// 格式化自定义的 y 轴
let yAxisData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 36,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
let seriesData = [],
yIndex = null,
maxArr = [],
onedimen = [],
maxNum = null,
{ isYear } = optionFormat.otherConf;
optionFormat.series.forEach((item, index) => {
yIndex = yAxisData.indexOf(item.name);
maxArr.push(item.data);
item.data.forEach((dataItem, dataIndex) => {
seriesData.push([parseInt(yIndex), dataIndex, dataItem || "-"]);
});
item.type = "heatmap";
item.itemStyle = {
emphasis: {
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, .5)"
}
};
item.label = {
normal: {
show: true,
color: "#444"
}
};
});
optionFormat.legend.show = false;
optionFormat.xAxis.nameTextStyle = {
color: "#444",
fontSize: 12
};
optionFormat.xAxis.splitArea = {
show: true
};
optionFormat.xAxis.axisLine = {
lineStyle: {
color: "#535353"
}
};
seriesData = seriesData.map(function(item) {
return [item[1], item[0], item[2] || "-"];
});
if (maxArr.length) {
onedimen = maxArr.join(",").split(",");
maxNum = Math.max.apply(null, onedimen);
}
// 覆盖格式化后的`option`数据 按需修改
let coverTemp = {
grid: {
left: 50,
right: 40,
top: 40,
bottom: 52
},
toolbox: {
show: false,
showTitle: false,
feature: {
saveAsImage: {
icon: this.downloadIcon
}
},
top: 0,
right: 0
},
yAxis: {
type: "category",
splitArea: {
show: true
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "#535353"
}
},
data: yAxisData
},
visualMap: {
show: !isYear,
min: 0,
max: 20,
calculable: true,
orient: "horizontal",
left: "left",
bottom: -10,
itemWidth: 15,
color: ["#0068FF", "#fff"]
}
};
coverTemp.visualMap.max = maxNum;
let option = JSON.parse(
JSON.stringify({ ...optionFormat, ...coverTemp })
);
option.series.forEach(item => {
item.data = [];
item.data = seriesData.splice(0, optionFormat.xAxis.data.length); // 多次裁剪 seriesData 数组
});
option.tooltip.formatter = (params, ticket, callback) => {
let xData = option.xAxis.data,
yData = option.yAxis.data,
htmls = "";
htmls += `<div style="font-size:14px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">${
yData[params.value[1]]
}</div><div><p style="font-size:13px;padding:4px 15px;color:"#444444"">${
xData[params.value[0]]
}: 平均热力${params.value[2]}</p></div>`;
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
autoComplete(dataLen, data, type) {
if (type === "string") {
if (dataLen < 10) {
for (let i = 0; i < 10; i++) {
if (!data[i] && data[i] != 0) {
data[i] = "";
}
}
}
} else if (type === "seven") {
if (dataLen < 7) {
for (let i = 0; i < 7; i++) {
if (!data[i] && data[i] != 0) {
data[i] = "";
}
}
}
} else if (type === "zero") {
if (dataLen < 10) {
for (let i = 0; i < 10; i++) {
if (!data[i] && data[i] != 0) {
data[i] = 0;
}
}
}
} else if (type === "test") {
if (dataLen < 10) {
for (let i = 0; i < 10; i++) {
if (!data[i] && data[i] != 0) {
data[i] = "C119 BHG MARKET PLACE超市、 BHG厨房";
}
}
}
} else {
if (dataLen < 10) {
for (let i = 0; i < 10; i++) {
if (!data[i] && data[i] != 0) {
data[i] = "";
}
}
}
}
return data;
},
computeSize(maxNum, maxSize, x) {
x = x || 1;
if (maxNum / x > maxSize) {
x += 1;
return this.computeSize(maxNum, maxSize, x);
} else {
return x;
}
},
addNextTenTime(timeStr) {
let start = timeStr;
let matchtTime = timeStr.split(":");
return `${start}-${matchtTime[0] + ":" + (matchtTime[1] - 0 + 10)}`;
},
addNextTime(timeStr, nextTimeNum) {
let start = timeStr,
matchtTime = timeStr.split(":"),
endTime;
endTime = nextTimeNum
? matchtTime[1] - 0 + nextTimeNum < 60
? matchtTime[0] + ":" + (matchtTime[1] - 0 + nextTimeNum)
: matchtTime[0] - 0 + 1 + ":" + "00"
: (matchtTime[0] > 8
? matchtTime[0] - 0 + 1
: "0" + (matchtTime[0] - 0 + 1)) +
":" +
matchtTime[1];
return `${start}-${endTime}`;
}
//
}
};
</script>
<template>
<div class="template-box content_div_main noBackGround">
<el-form :inline="true" class="search-form" size="small">
<el-form-item label="查询时间:">
<el-date-picker
v-model="datatime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button class="search-btn" @click="searchFaceCheck" icon="el-icon-search">查询</el-button>
<!-- <el-button class="search-btn ml10" @click="exportCluster()" icon="el-icon-upload">导出</el-button> -->
</el-form-item>
</el-form>
<div class="chartBox">
<!-- <div class="chartTitle">集团实时客流</div> -->
<chart chartId="chart1" chartType="AreaLine" :chartData="chartData1" class="chart"></chart>
</div>
<div class="chartBox">
<!-- <div class="chartTitle">集团实时客流</div> -->
<div class="radioBox">
<el-radio-group v-model="radioVal" size="small">
<el-radio-button label="trend7">近7天</el-radio-button>
<el-radio-button label="trend15">近15天</el-radio-button>
<el-radio-button label="trend30">近30天</el-radio-button>
</el-radio-group>
</div>
<chart chartId="chart2" chartType="AreaLine" :chartData="chartData2" class="chart"></chart>
</div>
</div>
</template>
<script>
import chart from "../public/chart.vue"
export default {
data() {
return {
pickerOptions:{
disabledDate(time) {
return time.getTime() > Date.now();
},
},
datatime:this.common.formatDateFun(new Date(), "yyyy-MM-dd"),
datas:{},
chartData1:{},
chartData2:{},
radioVal:"trend15",
accountId:localStorage.getItem("accountId")
}
},
watch:{
radioVal(newVal,oldVal){
this.radioChange(this.datas)
}
},
components:{
chart
},
methods: {
searchFaceCheck(){
this.initChart();
},
initChart(){
this.axios.get(this.API.url+"/report/day/account",{
params:{
orgIds: this.accountId,
date: this.datatime,
chartIds: '1,2,3,4,5,6,8,16,17'
}
}).then((res)=>{
this.datas=res.data.data;
this.chartData1 = this.datas.body.CustomerCounting;
this.chartData1.otherConf={
_color:["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"]
}
this.radioChange(this.datas);
})
},
radioChange(res){
switch (this.radioVal){
case "trend7":
this.chartData2=res.body.trend7;
break;
case "trend15":
this.chartData2=res.body.trend15;
break;
case "trend30":
this.chartData2=res.body.trend30;
break;
default:
break;
}
this.chartData2.otherConf={
_color:["#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"]
}
}
},
mounted() {
this.initChart();
}
}
</script>
<style scoped>
.chart{
height: 500px;
}
</style>
<template>
<div class="template-box content_div_main noBackGround">
<el-form :inline="true" class="search-form" size="small">
<el-form-item label="社区选择:">
<el-select v-model="mallId" placeholder="请选择">
<el-option
v-for="item in mallData"
:key="item.unid" :value="item.id" :label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="查询时间:">
<el-date-picker
v-model="datatime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button class="search-btn" @click="searchFaceCheck" icon="el-icon-search">查询</el-button>
<!-- <el-button class="search-btn ml10" @click="exportCluster()" icon="el-icon-upload">导出</el-button> -->
</el-form-item>
</el-form>
<div class="chartBox">
<div class="radioBox" style="left: 140px;">
<el-radio-group v-model="radioVal" size="small">
<el-radio-button label="trend7">天汇总</el-radio-button>
<el-radio-button label="trend15">小时级</el-radio-button>
<el-radio-button label="trend30">分钟级</el-radio-button>
</el-radio-group>
</div>
<chart chartId="chart2" :chartType="type" :chartData="chartData2" class="chart"></chart>
</div>
</div>
</template>
<script>
import chart from "../public/chart.vue"
export default {
data() {
return {
type:"AreaLine",
pickerOptions:{
disabledDate(time) {
return time.getTime() > Date.now();
},
},
datatime:this.common.formatDateFun(new Date(), "yyyy-MM-dd"),
datas:{},
chartData2:{},
radioVal:"trend15",
mallData:[],
mallId:'',
accountId:localStorage.getItem("accountId")
}
},
watch:{
radioVal(newVal,oldVal){
this.radioChange(this.datas)
}
},
components:{
chart
},
methods: {
searchFaceCheck(){
this.initChart();
},
getMallList(){
this.axios.get(this.API.url + "/malls",{
params:{
accountId:this.accountId,
status:1
}
}).then((response)=> {
this.mallData = response.data.data;
if(response.data.data.length>0){
this.mallId=response.data.data[0].id
}
this.initChart();
});
},
initChart(){
this.axios.get(this.API.url+"/report/basics/day/mall",{
params:{
orgIds: this.mallId,
date: this.datatime,
chartIds: '283,284,285',
option: "TAB_CHART"
}
}).then((res)=>{
this.datas=res.data.data;
this.radioChange(this.datas);
})
},
radioChange(res){
switch (this.radioVal){
case "trend7":
this.type="Bar";
this.chartData2=res.body.detailData;
break;
case "trend15":
this.type="AreaLine";
this.chartData2=res.body.trafficHour;
break;
case "trend30":
this.type="AreaLine";
this.chartData2=res.body.traffic10Min;
this.chartData2.otherConf={
isYear:true
}
break;
default:
break;
}
if(this.chartData2.otherConf){
this.chartData2.otherConf._color=["#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"]
}else{
this.chartData2.otherConf={
_color:["#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"]
}
}
}
},
mounted() {
this.getMallList();
}
}
</script>
<style scoped>
.chart{
height: 500px;
}
</style>
<template>
<div class="template-box content_div_main noBackGround">
<el-form :inline="true" class="search-form" size="small">
<el-form-item label="社区选择:">
<el-select v-model="mallId" placeholder="请选择">
<el-option
v-for="item in mallData"
:key="item.unid" :value="item.id" :label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="查询时间:">
<el-date-picker
v-model="datatime"
type="month"
value-format="yyyy-MM"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button class="search-btn" @click="searchFaceCheck" icon="el-icon-search">查询</el-button>
<!-- <el-button class="search-btn ml10" @click="exportCluster()" icon="el-icon-upload">导出</el-button> -->
</el-form-item>
</el-form>
<div class="chartBox">
<chart chartId="chart1" :chartType="type" :chartData="chartData" class="chart"></chart>
</div>
</div>
</template>
<script>
import chart from "../public/chart.vue"
export default {
data() {
return {
type:"Heatmap",
pickerOptions:{
disabledDate(time) {
return time.getTime() > Date.now();
},
},
datatime:this.common.formatDateFun(new Date(), "yyyy-MM"),
chartData:{},
mallData:[],
mallId:'',
accountId:localStorage.getItem("accountId")
}
},
watch:{
},
components:{
chart
},
methods: {
searchFaceCheck(){
this.initChart();
},
getMallList(){
this.axios.get(this.API.url + "/malls",{
params:{
accountId:this.accountId,
status:1
}
}).then((response)=> {
this.mallData = response.data.data;
if(response.data.data.length>0){
this.mallId=response.data.data[0].id
}
this.initChart();
});
},
initChart(){
this.axios.get(this.API.url+"/report/thermodynamic/mall",{
params:{
orgIds: this.mallId,
startDate: this.datatime+'-01',
endDate:this.common.getEndDay("month",this.datatime),
chartIds: '267',
}
}).then((res)=>{
this.chartData=res.data.data.body.TimeThermodynamic;
this.chartData.otherConf={
_color:["#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"]
}
})
},
},
mounted() {
this.getMallList();
}
}
</script>
<style scoped>
.chart{
height: 500px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!