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 214 additions and 48 deletions
css/page.css
...@@ -136,6 +136,7 @@ html, body, #app { ...@@ -136,6 +136,7 @@ html, body, #app {
background: #409EFF; background: #409EFF;
border-radius: inherit; border-radius: inherit;
text-align: right; text-align: right;
transition: width .2s linear;
} }
.result-progress__text { .result-progress__text {
......
index.html
...@@ -615,11 +615,11 @@ ...@@ -615,11 +615,11 @@
<div class="query-item"> <div class="query-item">
<span class="query-item__title">集团 : </span> <span class="query-item__title">集团 : </span>
<el-select <el-select
v-model="query.accountVal" v-model="accountVal"
filterable filterable
multiple multiple
collapse-tags collapse-tags
clearable :clearable="false"
placeholder="请选择集团" placeholder="请选择集团"
class="query-select mall-sel-box" class="query-select mall-sel-box"
@change="accountchange" @change="accountchange"
...@@ -649,11 +649,11 @@ ...@@ -649,11 +649,11 @@
<div class="query-item"> <div class="query-item">
<span class="query-item__title">商场/门店 : </span> <span class="query-item__title">商场/门店 : </span>
<el-select <el-select
v-model="query.mallVal" v-model="mallVal"
filterable filterable
multiple multiple
collapse-tags collapse-tags
clearable :clearable="false"
placeholder="请选择商场" placeholder="请选择商场"
class="query-select mall-sel-box" class="query-select mall-sel-box"
@change="mallchange" @change="mallchange"
...@@ -709,7 +709,7 @@ ...@@ -709,7 +709,7 @@
<el-button <el-button
type="primary" type="primary"
class="query-button" class="query-button"
@click="onFeatureRevisitClick" @click="onSearchClick"
>开 始</el-button> >开 始</el-button>
</div> </div>
</div> </div>
...@@ -720,11 +720,11 @@ ...@@ -720,11 +720,11 @@
<div class="query-item"> <div class="query-item">
<span class="query-item__title">集团 : </span> <span class="query-item__title">集团 : </span>
<el-select <el-select
v-model="query.accountVal" v-model="accountVal"
filterable filterable
multiple multiple
collapse-tags collapse-tags
clearable :clearable="false"
placeholder="请选择集团" placeholder="请选择集团"
class="query-select mall-sel-box" class="query-select mall-sel-box"
@change="accountchange" @change="accountchange"
...@@ -754,11 +754,11 @@ ...@@ -754,11 +754,11 @@
<div class="query-item"> <div class="query-item">
<span class="query-item__title">商场/门店 : </span> <span class="query-item__title">商场/门店 : </span>
<el-select <el-select
v-model="query.mallVal" v-model="mallVal"
filterable filterable
multiple multiple
collapse-tags collapse-tags
clearable :clearable="false"
placeholder="请选择商场" placeholder="请选择商场"
class="query-select mall-sel-box" class="query-select mall-sel-box"
@change="mallchange" @change="mallchange"
...@@ -812,7 +812,7 @@ ...@@ -812,7 +812,7 @@
:picker-options="pickerOpts" :picker-options="pickerOpts"
placeholder="选择日期" placeholder="选择日期"
></el-date-picker> ></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> </div>
</div> </div>
...@@ -823,11 +823,11 @@ ...@@ -823,11 +823,11 @@
<div class="query-item"> <div class="query-item">
<span class="query-item__title">集团 : </span> <span class="query-item__title">集团 : </span>
<el-select <el-select
v-model="query.accountVal" v-model="accountVal"
filterable filterable
multiple multiple
collapse-tags collapse-tags
clearable :clearable="false"
placeholder="请选择集团" placeholder="请选择集团"
class="query-select" class="query-select"
@change="accountchange" @change="accountchange"
...@@ -857,11 +857,11 @@ ...@@ -857,11 +857,11 @@
<div class="query-item"> <div class="query-item">
<span class="query-item__title">商场/门店 : </span> <span class="query-item__title">商场/门店 : </span>
<el-select <el-select
v-model="query.mallVal" v-model="mallVal"
filterable filterable
multiple multiple
collapse-tags collapse-tags
clearable :clearable="false"
placeholder="请选择商场" placeholder="请选择商场"
class="query-select" class="query-select"
@change="mallchange" @change="mallchange"
...@@ -914,7 +914,7 @@ ...@@ -914,7 +914,7 @@
:picker-options="pickerOpts" :picker-options="pickerOpts"
placeholder="选择日期" placeholder="选择日期"
></el-date-picker> ></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> </div>
</div> </div>
...@@ -926,7 +926,7 @@ ...@@ -926,7 +926,7 @@
<el-scrollbar ref="scrollbarRef" wrap-class="scrollbar-wrapper"> <el-scrollbar ref="scrollbarRef" wrap-class="scrollbar-wrapper">
<div id="showDiv" class="result-content" v-show="showDiv"> <div id="showDiv" class="result-content" v-show="showDiv">
<div class="result-item" v-for="item in results" :key="item.id"> <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"> <div class="result-progress-wrapper">
<span class="result-progress-left">执行进度 : </span> <span class="result-progress-left">执行进度 : </span>
<div class="result-progress-right"> <div class="result-progress-right">
...@@ -935,7 +935,7 @@ ...@@ -935,7 +935,7 @@
<div class="result-progress__text">{{ item.progress + '%' }}</div> <div class="result-progress__text">{{ item.progress + '%' }}</div>
</div> </div>
</div> </div>
<span>第{{ item.current }}条/共{{ item.pageSize }}条</span> <span>第{{ item.current }}条/共{{ item.curPageSize }}条</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -969,6 +969,10 @@ ...@@ -969,6 +969,10 @@
"zone/faceSta", "zone/faceSta",
"gate/faceSta" "gate/faceSta"
]; ];
// const TAB_API = {
// featureRevisit: '',
// featureLibRebuild: [],
// }
new Vue({ new Vue({
el: "#app", el: "#app",
data: function() { data: function() {
...@@ -1130,6 +1134,7 @@ ...@@ -1130,6 +1134,7 @@
watch: { watch: {
accountVal: { accountVal: {
handler: function (val) { handler: function (val) {
console.log('accountVal-------->', val)
if(val && val.length) { if(val && val.length) {
this.query.accountVal = val this.query.accountVal = val
} }
...@@ -1477,7 +1482,7 @@ ...@@ -1477,7 +1482,7 @@
this.openWebSock(_scheduleType, item, params); this.openWebSock(_scheduleType, item, params);
}); });
}, },
openWebSock(wsUrl, url, params) { openWebSock(wsUrl, url, params, processKey = 'progressList') {
// browser 兼容 // browser 兼容
// var wsHost = window.location.host; // var wsHost = window.location.host;
var socketUrl = ""; var socketUrl = "";
...@@ -1486,12 +1491,12 @@ ...@@ -1486,12 +1491,12 @@
stepList: [] stepList: []
}; };
obj.stepType = wsUrl; obj.stepType = wsUrl;
obj.mark = params.mark; obj.mark = params.mark || params.featureType;
if (!webSockUrl) { if (!webSockUrl) {
webSock = window.location.host; webSock = window.location.host;
} }
socketUrl = "ws://" + webSock_Url + "/recal/schedule/" + wsUrl; socketUrl = "ws://" + webSock_Url + "/recal/schedule/" + wsUrl;
this.progressList.push(obj); this[processKey].push(obj);
var _this = this; var _this = this;
if ("WebSocket" in window) { if ("WebSocket" in window) {
_this.webSocketObj[wsUrl] = new WebSocket(socketUrl); _this.webSocketObj[wsUrl] = new WebSocket(socketUrl);
...@@ -1512,7 +1517,7 @@ ...@@ -1512,7 +1517,7 @@
_this.webSocketObj[wsUrl].onmessage = function(evt) { _this.webSocketObj[wsUrl].onmessage = function(evt) {
var msg = JSON.parse(evt.data); var msg = JSON.parse(evt.data);
_this.progressList.forEach((item, index) => { _this[processKey].forEach((item, index) => {
if ( if (
item.stepType == msg.scheduleType && item.stepType == msg.scheduleType &&
item.mark == msg.mark item.mark == msg.mark
...@@ -1529,7 +1534,7 @@ ...@@ -1529,7 +1534,7 @@
: 0; : 0;
} }
}); });
// console.log('list',_this.progressList) console.log('list',_this[processKey])
}; };
_this.webSocketObj[wsUrl].onerror = function(event) { _this.webSocketObj[wsUrl].onerror = function(event) {
console.log("设备WebSocket:发生错误 "); console.log("设备WebSocket:发生错误 ");
...@@ -1831,18 +1836,64 @@ ...@@ -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() { onFeatureRevisitClick() {
console.log('[onFeatureRevisitClick]:', this.query) console.log('[onFeatureRevisitClick]:', this.query)
// '/mall/feature' // '/mall/feature'
// startDate,endDate,mallIds,scheduleType,featureType // startDate,endDate,mallIds,scheduleType,featureType
// featureType==0 提取人体+人脸;featureType==1 提取人脸特征;featureType==2提取人体特征 // featureType==0 提取人体+人脸;featureType==1 提取人脸特征;featureType==2提取人体特征
// var socketUrl = // var socketUrl =
this.results = []
!this.startTiming && (this.startTiming = new Date()) !this.startTiming && (this.startTiming = new Date())
// this.fetchFeatureRevisit() const {
this.renderResultHtml() dateVal, mallVal, type
setTimeout(() => { } = this.query
this.endTiming = new Date() var scheduleType = 'featureRevisit' + this.query.type
}, 2000); 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() { onFeatureLibRebuildClick: function() {
...@@ -1851,6 +1902,26 @@ ...@@ -1851,6 +1902,26 @@
// 参数 mallIds,startDate,endDate,scheduleType // 参数 mallIds,startDate,endDate,scheduleType
// 重建建立店员特征池 /mall/staffPool // 重建建立店员特征池 /mall/staffPool
// 参数 mallIds,scheduleType // 参数 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() { onRematchPersonClick: function() {
...@@ -1859,17 +1930,47 @@ ...@@ -1859,17 +1930,47 @@
// 参数 mallIds,startDate,endDate,scheduleType // 参数 mallIds,startDate,endDate,scheduleType
// 店员重新比对 /mall/staff // 店员重新比对 /mall/staff
// 参数 mallIds,startDate,endDate,scheduleType // 参数 mallIds,startDate,endDate,scheduleType
}, this.results = []
onSocketConnect(wsUrl) { !this.startTiming && (this.startTiming = new Date())
var sockets = new ws(wsUrl) 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)
},
/**
* 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) { socket.onconnecting = function (ev) {
console.log('socket:onconnecting', ev) console.log('socket:onconnecting', ev)
sendMsg('socket test...')
} }
socket.onopen = function(ev) { socket.onopen = function(ev) {
console.log('socket:onopen', ev) console.log('socket:onopen', ev)
log('发了个消息！') callback && callback(callbackUrlPath, callbackParam)
// sendMsg(str)
} }
socket.onclose = function(ev) { socket.onclose = function(ev) {
console.log('socket:onclose', ev) console.log('socket:onclose', ev)
...@@ -1877,11 +1978,34 @@ ...@@ -1877,11 +1978,34 @@
} }
socket.onmessage = function(ev) { socket.onmessage = function(ev) {
console.log('socket:onmessage', ev) console.log('socket:onmessage', ev)
var message = JSON.parse(ev.data) var msg = JSON.parse(ev.data)
this.results.push(message) console.log('[onmessage]:', msg)
// log('收到消息 ' + ev.data) self.dealMessage(msg)
// socket.close() 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() { fetchFeatureRevisit() {
const { const {
...@@ -1897,7 +2021,7 @@ ...@@ -1897,7 +2021,7 @@
data: JSON.stringify({ data: JSON.stringify({
startDate: dateVal + ' 00:00:00', startDate: dateVal + ' 00:00:00',
endDate: dateVal + ' 23:59:59', endDate: dateVal + ' 23:59:59',
mallIds: mallVal && mallVal.join(','), mallIds: mallVal || null,
scheduleType: null, scheduleType: null,
featureType: type featureType: type
}), }),
...@@ -1909,13 +2033,41 @@ ...@@ -1909,13 +2033,41 @@
} }
}) })
}, },
renderResultHtml() { dealMessage(msg) {
this.results.push({ const { dates, mallIds, mallNames, status, stepCount, counter } = msg
total: Math.ceil(Math.random() * 200), var self = this
pageSize: Math.ceil(Math.random() * 200), var resObj = {}
progress: Math.ceil(Math.random() * 50), resObj.dates = dates
current: Math.ceil(Math.random() * 100) 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.$nextTick(() => {
// this.$refs.scrollbarRef.wrap.scrollTop = this.$refs.scrollbarRef.wrap.scrollHeight // this.$refs.scrollbarRef.wrap.scrollTop = this.$refs.scrollbarRef.wrap.scrollHeight
...@@ -1926,6 +2078,11 @@ ...@@ -1926,6 +2078,11 @@
typeof date === 'string' && (date = new Date(date.replace(/-/g, '/'))) typeof date === 'string' && (date = new Date(date.replace(/-/g, '/')))
return date.getTime() return date.getTime()
}, },
floatToPercent(floatNum) {
if (!floatNum) return 0
var formatNum = Math.floor(floatNum * 100)
return formatNum >= 100 ? 100 : formatNum
},
onClearClick() { onClearClick() {
if (this.dateFormat === 'revisitFeature' || if (this.dateFormat === 'revisitFeature' ||
this.dateFormat === 'rebuildFeatureLib' || this.dateFormat === 'rebuildFeatureLib' ||
...@@ -1933,9 +2090,10 @@ ...@@ -1933,9 +2090,10 @@
this.startTiming = 0 this.startTiming = 0
this.endTiming = 0 this.endTiming = 0
this.results = [] 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 \ 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 \ No newline at end of file
js/socket.js
...@@ -120,7 +120,14 @@ ...@@ -120,7 +120,14 @@
*/ */
ws.prototype.open = function() { ws.prototype.open = function() {
var self = this; var self = this;
if ("WebSocket" in window) {
wsocket = new WebSocket(this.url, this.protocols || []); 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')); eventTarget.dispatchEvent(generateEvent('connecting'));
wsocket.onopen = function(event) { wsocket.onopen = function(event) {
self.protocols = ws.protocols; 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!