Commit dbb8ff2c by 李君

优化

1 parent 40765cc0
...@@ -35,15 +35,24 @@ ...@@ -35,15 +35,24 @@
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
<!-- 日期时间 -->
<div class="test-opt-time mr20"> <div class="test-opt-time mr20">
<span class="labelName">trackType</span>
<el-select v-model="trackType" class="mall-opt" filterable :placeholder="$t('pholder.select')" @change="chooseTrackType">
<el-option value="" :label="$t('pholder.all')"></el-option>
<el-option v-for="item in trackTypeOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
</el-select>
</div>
<!-- 日期时间 -->
<div class="test-opt-time mr20 timeHr">
<span class="labelName">{{$t('table.date')}}</span> <span class="labelName">{{$t('table.date')}}</span>
<el-date-picker <el-date-picker
v-model="countDate" v-model="countDate"
type="datetimerange" type="datetimerange"
:range-separator="$t('dialog.to')" :range-separator="$t('dialog.to')"
:start-placeholder="$t('table.startTime')" :start-placeholder="$t('table.startTime')"
:end-placeholder="$t('table.endTime')"> :end-placeholder="$t('table.endTime')"
:default-time="['08:00:00', '23:00:00']">
</el-date-picker> </el-date-picker>
</div> </div>
<!-- trackTime --> <!-- trackTime -->
...@@ -103,6 +112,25 @@ export default { ...@@ -103,6 +112,25 @@ export default {
pageLimit: 45, pageLimit: 45,
typeList: [], typeList: [],
accountId: this.$cookie.get('accountId'), accountId: this.$cookie.get('accountId'),
trackType:'',
trackTypeOpt:[
{
name:'complete',
id:0,
},
{
name:'abandonQueue',
id:1,
},
{
name:'disappearInMid',
id:2,
},
{
name:'appearInMid',
id:3,
}
]
} }
}, },
computed: { computed: {
...@@ -209,6 +237,10 @@ export default { ...@@ -209,6 +237,10 @@ export default {
chooseType() { chooseType() {
this.clickHandle() this.clickHandle()
}, },
chooseTrackType(){
this.$forceUpdate()
this.clickHandle()
},
chooseTime() { chooseTime() {
this.clickHandle() this.clickHandle()
}, },
...@@ -230,6 +262,7 @@ export default { ...@@ -230,6 +262,7 @@ export default {
serviceTimeEnd:this.serviceTimeEnd, serviceTimeEnd:this.serviceTimeEnd,
queueTimeStart:this.queueTimeStart, queueTimeStart:this.queueTimeStart,
queueTimeEnd:this.queueTimeEnd, queueTimeEnd:this.queueTimeEnd,
trackType:this.trackType
} }
Object.keys(_params).forEach(item=>{ Object.keys(_params).forEach(item=>{
if (_params[item] === '' || _params[item] === undefined || _params[item] === null || _params[item] === 'null') if (_params[item] === '' || _params[item] === undefined || _params[item] === null || _params[item] === 'null')
......
...@@ -72,11 +72,30 @@ ...@@ -72,11 +72,30 @@
:close-on-click-modal="false" :close-on-click-modal="false"
class="manage-dialog" class="manage-dialog"
:before-close="closeDialog" :before-close="closeDialog"
width="1000"
:title="$t('button.showTrack')" :title="$t('button.showTrack')"
> >
<div v-loading='canvasLoading' style="width: 100%;text-align: center;padding: 40px 0;height: 100%;"> <div v-loading='canvasLoading' style="width: 100%;padding: 40px 0;height: 100%;">
<canvas id="cameraCanvas" class="xycanvas"></canvas> <canvas id="cameraCanvas" class="xycanvas"></canvas>
<ul class="recordDetail">
<li class="info">
<span class="info_name">{{$t('table.personTypeName')}}</span><span class="info_value">{{personTypeFormatter(recordObj.personType)}}</span>
</li>
<li class="info">
<span class="info_name">trackType</span><span class="info_value">{{trackTypeFormatter(recordObj.trackType)}}</span>
</li>
<li class="info">
<span class="info_name">{{$t('table.date')}}</span><span class="info_value">{{recordObj.counttime}}</span>
</li>
<li class="info">
<span class="info_name">trackTime</span><span class="info_value">{{Math.floor(recordObj.trackTime/60)}}min{{recordObj.trackTime%60}}s</span>
</li>
<li class="info">
<span class="info_name">serviceTime</span><span class="info_value">{{Math.floor(recordObj.serviceTime/60)}}min{{recordObj.serviceTime%60}}s</span>
</li>
<li class="info">
<span class="info_name">queueTime</span><span class="info_value">{{Math.floor(recordObj.queueTime/60)}}min{{recordObj.queueTime%60}}s</span>
</li>
</ul>
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="isShowAll = false" class="dialog-btn">{{ $t('dialog.close') }}</el-button> <el-button @click="isShowAll = false" class="dialog-btn">{{ $t('dialog.close') }}</el-button>
...@@ -98,6 +117,25 @@ export default { ...@@ -98,6 +117,25 @@ export default {
}, },
data() { data() {
return { return {
trackTypeOpt:[
{
name:'complete',
id:0,
},
{
name:'abandonQueue',
id:1,
},
{
name:'disappearInMid',
id:2,
},
{
name:'appearInMid',
id:3,
}
],
recordObj:{},
canvasLoading:true, canvasLoading:true,
cmeraImage:'', cmeraImage:'',
canvasDevice: null, //canvas实例 canvasDevice: null, //canvas实例
...@@ -204,12 +242,17 @@ export default { ...@@ -204,12 +242,17 @@ export default {
const matched = this.personTypeList.find(item => item.id === personType) const matched = this.personTypeList.find(item => item.id === personType)
return matched && matched.name || (visibleNew ? this.$t('table.newCustomer') : this.$t("dictionary.custom")) return matched && matched.name || (visibleNew ? this.$t('table.newCustomer') : this.$t("dictionary.custom"))
}, },
trackTypeFormatter(personType, visibleNew) {
const matched = this.trackTypeOpt.find(item => item.id === personType)
return matched && matched.name
},
showAllImg(item) { showAllImg(item) {
this.recordObj = item;
let picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.channelSerialnum + ".jpg?t=" + Date.parse(new Date()) / 1000; let picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.channelSerialnum + ".jpg?t=" + Date.parse(new Date()) / 1000;
this.isShowAll = true; this.isShowAll = true;
this.canvasLoading = true; this.canvasLoading = true;
this.$api.queueManagementApi.getTrajectory({ this.$api.queueManagementApi.getTrajectory({
personId:item.personUnid, id:item.id,
countTime:item.counttime countTime:item.counttime
}).then(res => { }).then(res => {
let result = res.data; let result = res.data;
...@@ -227,20 +270,35 @@ export default { ...@@ -227,20 +270,35 @@ export default {
drawCirlceDevice(result){ drawCirlceDevice(result){
this.ctxDevice.clearRect(0, 0, this.canvasDevice.width, this.canvasDevice.height); this.ctxDevice.clearRect(0, 0, this.canvasDevice.width, this.canvasDevice.height);
this.ctxDevice.drawImage(this.cmeraImage, 0, 0, this.canvasDevice.width, this.canvasDevice.height); this.ctxDevice.drawImage(this.cmeraImage, 0, 0, this.canvasDevice.width, this.canvasDevice.height);
let dataList = result.data; let dataList = result.data.track;
this.canvasLoading = false this.canvasLoading = false
dataList.forEach((item) => { if(dataList.length<2){
this.ctxDevice.fillStyle = "red"; dataList.forEach((item) => {
this.ctxDevice.fillStyle = "red";
this.ctxDevice.beginPath();
this.ctxDevice.arc(
(item.x / 1920) * this.canvasDevice.width,
(item.y / 1080) * this.canvasDevice.height,
5,
0,
2 * Math.PI
);
this.ctxDevice.fill();
});
}else{
this.ctxDevice.beginPath(); this.ctxDevice.beginPath();
this.ctxDevice.arc( this.ctxDevice.strokeStyle = 'red';
(item.x / 1920) * this.canvasDevice.width, this.ctxDevice.lineWidth = 5
(item.y / 1080) * this.canvasDevice.height, dataList.forEach((item,index)=>{
5, if(index==0){
0, this.ctxDevice.moveTo((item.x / 1920) * this.canvasDevice.width, (item.y / 1080) * this.canvasDevice.height)
2 * Math.PI }else{
); this.ctxDevice.lineTo((item.x / 1920) * this.canvasDevice.width, (item.y / 1080) * this.canvasDevice.height)
this.ctxDevice.fill(); }
}); })
this.ctxDevice.closePath();
this.ctxDevice.stroke();
}
}, },
closeDialog() { closeDialog() {
this.isShowAll = false; this.isShowAll = false;
...@@ -257,10 +315,10 @@ export default { ...@@ -257,10 +315,10 @@ export default {
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
if (this.currentPage != val) { if (this.currentPage != val) {
this.emitData.page = val; this.emitData.pageNum = val;
this.currentPage = val; this.currentPage = val;
} else { } else {
this.emitData.page = val; this.emitData.pageNum = val;
this.currentPage = val; this.currentPage = val;
// this.loading = true; // this.loading = true;
} }
...@@ -278,7 +336,7 @@ export default { ...@@ -278,7 +336,7 @@ export default {
}, },
getPatams(param) { getPatams(param) {
this.pageSize = param.pageSize; this.pageSize = param.pageSize;
this.currentPage = param.page; this.currentPage = param.pageNum;
this.emitData = Object.assign('',param) this.emitData = Object.assign('',param)
this.getTableData(); this.getTableData();
}, },
...@@ -287,9 +345,27 @@ export default { ...@@ -287,9 +345,27 @@ export default {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.recordDetail,.xycanvas{
display: inline-block;
vertical-align: top;
}
.recordDetail{
width: 300px;
font-size: 14px;
margin-left: 20px;
.info{
margin-bottom: 8px;
.info_name,.info_value{
display: inline-block;
}
.info_name{
width: 120px;
}
}
}
.manage-dialog{ .manage-dialog{
/deep/.el-dialog{ /deep/.el-dialog{
width: 1200px; width: 1400px;
height: 700px; height: 700px;
} }
} }
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</span> </span>
</h3> </h3>
<div class="asis-table-content" v-loading="loading"> <div class="asis-table-content" v-loading="loading">
<el-table v-show="isTabChart" class="asis-table baseasis-table" id="domBaseTrafficFlow" :data="tabOps" header-row-class-name="asis-table-head" style="width: 100%" :max-height="tableHeight"> <el-table show-summary v-show="isTabChart" class="asis-table baseasis-table" id="domBaseTrafficFlow" :data="tabOps" header-row-class-name="asis-table-head" style="width: 100%" :max-height="tableHeight">
<el-table-column v-if="tabOps.length" type="index" :label="$t('table.order')" align="center" width="80"> <el-table-column v-if="tabOps.length" type="index" :label="$t('table.order')" align="center" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ indexFormatter(scope) }}</span> <span>{{ indexFormatter(scope) }}</span>
......
...@@ -18,7 +18,9 @@ ...@@ -18,7 +18,9 @@
type="datetimerange" type="datetimerange"
:range-separator="$t('dialog.to')" :range-separator="$t('dialog.to')"
:start-placeholder="$t('table.startTime')" :start-placeholder="$t('table.startTime')"
:end-placeholder="$t('table.endTime')"> :end-placeholder="$t('table.endTime')"
:default-time="['08:00:00', '23:00:00']"
>
</el-date-picker> </el-date-picker>
<!-- <el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate"></el-date-picker> --> <!-- <el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate"></el-date-picker> -->
</el-form-item> </el-form-item>
...@@ -126,7 +128,7 @@ ...@@ -126,7 +128,7 @@
<img src="../../../assets/sacle.png" > <img src="../../../assets/sacle.png" >
</div> </div>
</div> </div>
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" height='calc(100% - 30px)' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'> <el-table :data="tableData" ref="laneTable" style="width: 100%" :row-class-name="tableRowClassName" height='calc(100% - 30px)' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
<el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" width="100"> <el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" width="100">
</el-table-column> </el-table-column>
<el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="80"> <el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="80">
...@@ -785,9 +787,16 @@ ...@@ -785,9 +787,16 @@
}, },
// 表格点击触发 // 表格点击触发
handleCurrentChange(row) { handleCurrentChange(row) {
this.laneId = row.laneId; if(this.laneId == row.laneId){
this.laneName = row.laneName; this.laneId = null;
this.getchart(); this.laneName = null;
this.$refs.laneTable.setCurrentRow()
this.getchart();
}else{
this.laneId = row.laneId;
this.laneName = row.laneName;
this.getchart();
}
}, },
formatCounterType(row, column, cellValue){ formatCounterType(row, column, cellValue){
let result = '' let result = ''
...@@ -983,6 +992,12 @@ ...@@ -983,6 +992,12 @@
#container{ #container{
margin-bottom: 7px; margin-bottom: 7px;
} }
/deep/tr.current-row{
background-color: #3bb8ff !important;
td.el-table__cell{
background-color: #3bb8ff !important;
}
}
/deep/.el-table{ /deep/.el-table{
.el-table__cell{ .el-table__cell{
padding: 5px 0 !important; padding: 5px 0 !important;
......
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
<img src="../../../assets/sacle.png" > <img src="../../../assets/sacle.png" >
</div> </div>
</div> </div>
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" height='calc(100% - 30px)' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'> <el-table :data="tableData" ref="laneTable" style="width: 100%" :row-class-name="tableRowClassName" height='calc(100% - 30px)' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
<el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" width="100"> <el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" width="100">
</el-table-column> </el-table-column>
<el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="80"> <el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="80">
...@@ -704,9 +704,17 @@ export default { ...@@ -704,9 +704,17 @@ export default {
}, },
// 表格点击触发 // 表格点击触发
handleCurrentChange(row) { handleCurrentChange(row) {
this.laneId = row.laneId; if(this.laneId == row.laneId){
this.laneName = row.laneName; this.laneId = null;
this.getchart(); this.laneName = null;
this.$refs.laneTable.setCurrentRow()
this.getchart();
}else{
this.laneId = row.laneId;
this.laneName = row.laneName;
this.getchart();
}
}, },
//动态设置canvas的宽度 //动态设置canvas的宽度
setCanvasWidth() { setCanvasWidth() {
...@@ -755,6 +763,12 @@ export default { ...@@ -755,6 +763,12 @@ export default {
// padding: 0; // padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/deep/tr.current-row{
background-color: #3bb8ff !important;
td.el-table__cell{
background-color: #3bb8ff !important;
}
}
.dialogChart1,.dialogChart2{ .dialogChart1,.dialogChart2{
width: 95%; width: 95%;
height: 400px; height: 400px;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!