Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit 977ac7c4 by 周志凯
Options

[feat]: test api

1 parent 96b889de
Inline Side-by-side
Showing 4 changed files with 215 additions and 49 deletions
css/page.css
......@@ -136,6 +136,7 @@ html, body, #app {
background: #409EFF;
border-radius: inherit;
text-align: right;
transition: width .2s linear;
}
.result-progress__text {
......
index.html
......@@ -615,11 +615,11 @@
<div class="query-item">
<span class="query-item__title">集团 : </span>
<el-select
v-model="query.accountVal"
v-model="accountVal"
filterable
multiple
collapse-tags
clearable
:clearable="false"
placeholder="请选择集团"
class="query-select mall-sel-box"
@change="accountchange"
......@@ -649,11 +649,11 @@
<div class="query-item">
<span class="query-item__title">商场/门店 : </span>
<el-select
v-model="query.mallVal"
v-model="mallVal"
filterable
multiple
collapse-tags
clearable
:clearable="false"
placeholder="请选择商场"
class="query-select mall-sel-box"
@change="mallchange"
......@@ -709,7 +709,7 @@
<el-button
type="primary"
class="query-button"
@click="onFeatureRevisitClick"
@click="onSearchClick"
>开 始</el-button>
</div>
</div>
......@@ -720,11 +720,11 @@
<div class="query-item">
<span class="query-item__title">集团 : </span>
<el-select
v-model="query.accountVal"
v-model="accountVal"
filterable
multiple
collapse-tags
clearable
:clearable="false"
placeholder="请选择集团"
class="query-select mall-sel-box"
@change="accountchange"
......@@ -754,11 +754,11 @@
<div class="query-item">
<span class="query-item__title">商场/门店 : </span>
<el-select
v-model="query.mallVal"
v-model="mallVal"
filterable
multiple
collapse-tags
clearable
:clearable="false"
placeholder="请选择商场"
class="query-select mall-sel-box"
@change="mallchange"
......@@ -812,7 +812,7 @@
:picker-options="pickerOpts"
placeholder="选择日期"
></el-date-picker>
<el-button type="primary" :class="featureLibRebuildType === 1 ? '' : 'query-button'" @click="onFeatureLibRebuildClick">开 始</el-button>
<el-button type="primary" :class="featureLibRebuildType === 1 ? '' : 'query-button'" @click="onSearchClick">开 始</el-button>
</div>
</div>
</div>
......@@ -823,11 +823,11 @@
<div class="query-item">
<span class="query-item__title">集团 : </span>
<el-select
v-model="query.accountVal"
v-model="accountVal"
filterable
multiple
collapse-tags
clearable
:clearable="false"
placeholder="请选择集团"
class="query-select"
@change="accountchange"
......@@ -857,11 +857,11 @@
<div class="query-item">
<span class="query-item__title">商场/门店 : </span>
<el-select
v-model="query.mallVal"
v-model="mallVal"
filterable
multiple
collapse-tags
clearable
:clearable="false"
placeholder="请选择商场"
class="query-select"
@change="mallchange"
......@@ -914,7 +914,7 @@
:picker-options="pickerOpts"
placeholder="选择日期"
></el-date-picker>
<el-button type="primary" class="query-button" @click="onRematchPersonClick">开 始</el-button>
<el-button type="primary" class="query-button" @click="onSearchClick">开 始</el-button>
</div>
</div>
</div>
......@@ -926,7 +926,7 @@
<el-scrollbar ref="scrollbarRef" wrap-class="scrollbar-wrapper">
<div id="showDiv" class="result-content" v-show="showDiv">
<div class="result-item" v-for="item in results" :key="item.id">
<div class="result-page">共计 : {{ item.total }} 页/{{ item.pageSize }}条</div>
<div class="result-page">共计 : {{ item.totalPage }} 页/{{ item.totalNum }}条</div>
<div class="result-progress-wrapper">
<span class="result-progress-left">执行进度 : </span>
<div class="result-progress-right">
......@@ -935,7 +935,7 @@
<div class="result-progress__text">{{ item.progress + '%' }}</div>
</div>
</div>
<span>第{{ item.current }}条/共{{ item.pageSize }}条</span>
<span>第{{ item.current }}条/共{{ item.curPageSize }}条</span>
</div>
</div>
</div>
......@@ -969,6 +969,10 @@
"zone/faceSta",
"gate/faceSta"
];
// const TAB_API = {
// featureRevisit: '',
// featureLibRebuild: [],
// }
new Vue({
el: "#app",
data: function() {
......@@ -1130,6 +1134,7 @@
watch: {
accountVal: {
handler: function (val) {
console.log('accountVal-------->', val)
if(val && val.length) {
this.query.accountVal = val
}
......@@ -1477,7 +1482,7 @@
this.openWebSock(_scheduleType, item, params);
});
},
openWebSock(wsUrl, url, params) {
openWebSock(wsUrl, url, params, processKey = 'progressList') {
// browser 兼容
// var wsHost = window.location.host;
var socketUrl = "";
......@@ -1486,12 +1491,12 @@
stepList: []
};
obj.stepType = wsUrl;
obj.mark = params.mark;
obj.mark = params.mark || params.featureType;
if (!webSockUrl) {
webSock = window.location.host;
}
socketUrl = "ws://" + webSock_Url + "/recal/schedule/" + wsUrl;
this.progressList.push(obj);
this[processKey].push(obj);
var _this = this;
if ("WebSocket" in window) {
_this.webSocketObj[wsUrl] = new WebSocket(socketUrl);
......@@ -1512,7 +1517,7 @@
_this.webSocketObj[wsUrl].onmessage = function(evt) {
var msg = JSON.parse(evt.data);
_this.progressList.forEach((item, index) => {
_this[processKey].forEach((item, index) => {
if (
item.stepType == msg.scheduleType &&
item.mark == msg.mark
......@@ -1529,7 +1534,7 @@
: 0;
}
});
// console.log('list',_this.progressList)
console.log('list',_this[processKey])
};
_this.webSocketObj[wsUrl].onerror = function(event) {
console.log("设备WebSocket:发生错误 ");
......@@ -1831,18 +1836,64 @@
});
},
/////////////////////////////特征重提////////////////////////////////////////////////
onSearchClick: function() {
const TAB_API = {
revisitFeature: () => '/mall/feature',
rebuildFeatureLib: (val) => {
return val === 1 ? '/mall/staffPool' : '/mall/customPool'
},
rematchPerson: (val) => {
return val === 1 ? '/mall/staff' : '/mall/custom'
}
}
const { dateFormat, query } = this
const {
dateVal, mallVal, type
} = query
console.log('onSearchClick dateFormat', dateFormat)
var urlPath = TAB_API[dateFormat](type)
var scheduleType = dateFormat + type
var parameter = {
startDate: dateVal + ' 00:00:00',
endDate: dateVal + ' 23:59:59',
mallIds: mallVal || null,
scheduleType: scheduleType
}
var socketParameter = {
scheduleType: scheduleType,
callback: this.fetchApi,
callbackUrlPath: urlPath,
callbackParam: parameter
}
this.onSocketConnect(socketParameter)
},
onFeatureRevisitClick() {
console.log('[onFeatureRevisitClick]:', this.query)
// '/mall/feature'
// startDate,endDate,mallIds,scheduleType,featureType
// featureType==0 提取人体+人脸;featureType==1 提取人脸特征;featureType==2提取人体特征
// var socketUrl =
this.results = []
!this.startTiming && (this.startTiming = new Date())
// this.fetchFeatureRevisit()
this.renderResultHtml()
setTimeout(() => {
this.endTiming = new Date()
}, 2000);
const {
dateVal, mallVal, type
} = this.query
var scheduleType = 'featureRevisit' + this.query.type
var parameter = {
startDate: dateVal + ' 00:00:00',
endDate: dateVal + ' 23:59:59',
mallIds: mallVal || null,
scheduleType: scheduleType,
featureType: type
}
// this.openWebSock(scheduleType, '/mall/feature', parameter);
var socketParameter = {
scheduleType: scheduleType,
callback: this.fetchApi,
callbackUrlPath: '/mall/feature',
callbackParam: parameter
}
this.onSocketConnect(socketParameter)
},
/////////////////////////////特征库重建////////////////////////////////////////////////
onFeatureLibRebuildClick: function() {
......@@ -1851,6 +1902,26 @@
// 参数 mallIds,startDate,endDate,scheduleType
// 重建建立店员特征池 /mall/staffPool
// 参数 mallIds,scheduleType
this.results = []
!this.startTiming && (this.startTiming = new Date())
const {
dateVal, mallVal, type
} = this.query
var scheduleType = 'rematchPerson' + type
var parameter = {
startDate: dateVal + ' 00:00:00',
endDate: dateVal + ' 23:59:59',
mallIds: mallVal || null,
scheduleType: scheduleType
}
// this.openWebSock(scheduleType, '/mall/feature', parameter);
var socketParameter = {
scheduleType: scheduleType,
callback: this.fetchApi,
callbackUrlPath: type === 1 ? '/mall/staffPool' : '/mall/customPool',
callbackParam: parameter
}
this.onSocketConnect(socketParameter)
},
/////////////////////////////人员重新对比////////////////////////////////////////////////
onRematchPersonClick: function() {
......@@ -1859,17 +1930,47 @@
// 参数 mallIds,startDate,endDate,scheduleType
// 店员重新比对 /mall/staff
// 参数 mallIds,startDate,endDate,scheduleType
this.results = []
!this.startTiming && (this.startTiming = new Date())
const {
dateVal, mallVal, type
} = this.query
var scheduleType = 'rematchPerson' + type
var parameter = {
startDate: dateVal + ' 00:00:00',
endDate: dateVal + ' 23:59:59',
mallIds: mallVal || null,
scheduleType: scheduleType
}
// this.openWebSock(scheduleType, '/mall/feature', parameter);
var socketParameter = {
scheduleType: scheduleType,
callback: this.fetchApi,
callbackUrlPath: type === 1 ? '/mall/staff' : '/mall/custom',
callbackParam: parameter
}
this.onSocketConnect(socketParameter)
},
onSocketConnect(wsUrl) {
var sockets = new ws(wsUrl)
/**
* websocket 连接
* @param {string} scheduleType
* @param {string} wsUrl
* @param {function} callback
* @param {string} callbackUrlPath
* @param {object} callbackParam
*/
onSocketConnect({ scheduleType, callback, callbackUrlPath, callbackParam }) {
var self = this,
wsUrl = webSockUrl || window.location.host,
socketUrl = "ws://" + wsUrl + "/recal/schedule/" + scheduleType
console.log('[socketUrl]:', socketUrl)
var socket = new ws(socketUrl)
socket.onconnecting = function (ev) {
console.log('socket:onconnecting', ev)
sendMsg('socket test...')
}
socket.onopen = function(ev) {
console.log('socket:onopen', ev)
log('发了个消息！')
// sendMsg(str)
callback && callback(callbackUrlPath, callbackParam)
}
socket.onclose = function(ev) {
console.log('socket:onclose', ev)
......@@ -1877,12 +1978,35 @@
}
socket.onmessage = function(ev) {
console.log('socket:onmessage', ev)
var message = JSON.parse(ev.data)
this.results.push(message)
// log('收到消息 ' + ev.data)
// socket.close()
var msg = JSON.parse(ev.data)
console.log('[onmessage]:', msg)
self.dealMessage(msg)
if (msg.stepCount === 1) {
this.endTiming = new Date()
socket.close()
}
}
},
fetchApi(urlPath, parameter) {
const {
dateVal, mallVal, type
} = this.query
var self = this
$.ajax({
type: "post",
dataType: "json",
async: true,
url: apiUrl + urlPath,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(parameter),
success: function(res) {
console.log(res)
},
error: function(err) {
console.log(err)
}
})
},
fetchFeatureRevisit() {
const {
dateVal, mallVal, type
......@@ -1897,7 +2021,7 @@
data: JSON.stringify({
startDate: dateVal + ' 00:00:00',
endDate: dateVal + ' 23:59:59',
mallIds: mallVal && mallVal.join(','),
mallIds: mallVal || null,
scheduleType: null,
featureType: type
}),
......@@ -1909,13 +2033,41 @@
}
})
},
renderResultHtml() {
this.results.push({
total: Math.ceil(Math.random() * 200),
pageSize: Math.ceil(Math.random() * 200),
progress: Math.ceil(Math.random() * 50),
current: Math.ceil(Math.random() * 100)
})
dealMessage(msg) {
const { dates, mallIds, mallNames, status, stepCount, counter } = msg
var self = this
var resObj = {}
resObj.dates = dates
resObj.mallIds = mallIds
resObj.mallNames = mallNames
resObj.status = status
resObj.progress = self.floatToPercent(stepCount)
resObj.totalNum = 0
resObj.totalPage = 0
resObj.current = 0
resObj.curPageSize = 0
if (counter) {
// dataNum dateMallNum step totalData totalDate totalMall totalMallDateProduct
resObj.totalNum = counter.dateMallNum
resObj.totalPage = counter.totalMallDateProduct
resObj.current = counter.dateMallNum
resObj.curPageSize = counter.dataNum
}
if (self.results.length) {
self.results.forEach(item => {
item.progress = self.floatToPercent(stepCount)
if (counter) {
item.totalNum = counter.dateMallNum
item.totalPage = counter.totalMallDateProduct
item.current = counter.dataNum
item.curPageSize = counter.totalData
}
})
} else {
self.results.push(resObj)
resObj = {}
}
console.log(self.results)
// 滚动至底部
// this.$nextTick(() => {
// this.$refs.scrollbarRef.wrap.scrollTop = this.$refs.scrollbarRef.wrap.scrollHeight
......@@ -1926,6 +2078,11 @@
typeof date === 'string' && (date = new Date(date.replace(/-/g, '/')))
return date.getTime()
},
floatToPercent(floatNum) {
if (!floatNum) return 0
var formatNum = Math.floor(floatNum * 100)
return formatNum >= 100 ? 100 : formatNum
},
onClearClick() {
if (this.dateFormat === 'revisitFeature' ||
this.dateFormat === 'rebuildFeatureLib' ||
......@@ -1933,9 +2090,10 @@
this.startTiming = 0
this.endTiming = 0
this.results = []
} else {
document.getElementById('showDiv').innerHTML = ''
}
// else {
document.getElementById('showDiv').innerHTML = ''
// }
}
}
});
......
js/common.js
apiUrl = 'http://101.201.36.180:9998/',
webSockUrl = ''
\ No newline at end of file
apiUrl = 'http://192.168.9.146:8080/',
webSockUrl = '192.168.9.146:8080'
\ No newline at end of file
js/socket.js
......@@ -120,7 +120,14 @@
*/
ws.prototype.open = function() {
var self = this;
wsocket = new WebSocket(this.url, this.protocols || []);
if ("WebSocket" in window) {
wsocket = new WebSocket(this.url, this.protocols || []);
} else if ("MozWebSocket" in window) {
wsocket = new MozWebSocket(this.url, this.protocols || []);
} else {
wsocket = new SockJS(this.url, this.protocols || []);
}
// wsocket = new WebSocket(this.url, this.protocols || []);
eventTarget.dispatchEvent(generateEvent('connecting'));
wsocket.onopen = function(event) {
self.protocols = ws.protocols;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!