Skip to content

李君 / carrefour

Go to a project
Commit 7368dacc by 李君
Options

优化

1 parent 0e2b99ea
Inline Side-by-side
Showing 9 changed files with 581 additions and 22 deletions
package-lock.json
This diff could not be displayed because it is too large.
src/api/queueManagementApi.js
......@@ -84,6 +84,21 @@ const queueManagementApi = {
getTrajectory(params, config) {
return req('get', `/queuing/person/trajectory`, params, config)
},
// 报警记录
getAlarmMessageList(params, config) {
return req('get', `/d-cashier-alarm-message-log/page`, params, config)
},
// 报警规则
getAlarmRulesList(params, config) {
return req('get', `/d-cashier-alarm-rule/list`, params, config)
},
addAlarmRules(params, config) {
return req('POST', `/d-cashier-alarm-rule`, params, config)
},
updateAlarmRules(params, config) {
return req('PUT', `/d-cashier-alarm-rule/${params.id}`, params, config)
},
}
......
src/router/modules/queueManagement.js
......@@ -83,6 +83,14 @@ const queueManagementRouterMap = {
permissionPath: 'businessTimeSetting'
},
component: () => import('@/views/queueManagement/businessTimeSetting/'),
},
{
name: 'alarmEvent',
path: '/queueManagement/alarmEvent',
meta: {
permissionPath: 'alarmEvent'
},
component: () => import('@/views/queueManagement/alarmEvent/'),
}
]
......
src/views/queueManagement/alarmEvent/addRule.vue 0 → 100644
<template>
<div>
<el-dialog :title="$t('button.alarmRules')" class="manage-dialog dialog_lj" :visible.sync="addDialogVisible"
:close-on-click-modal="false" v-if="addDialogVisible" @close="addDialogClose()">
<el-form :model="addForm" label-width="100px" status-icon :rules="rules" ref="addForm">
<!-- 区域名称 -->
<p class="itemTitle">{{$t('button.alarmRules')}}</p>
<el-form-item >
<el-checkbox v-model="addForm.queueLengthSwitch">{{$t('table.queueLengthAlert')}}</el-checkbox>
<el-checkbox v-model="addForm.waitTimeSwitch">{{$t('table.waitTimeAlert')}}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('table.alarmPensonNum')" prop="name" v-if="addForm.queueLengthSwitch">
<el-input-number v-model="addForm.queueLengthThreshold" :min="0" :controls = 'false' :precision = '0'></el-input-number> {{$t('format.perNum')}}
</el-form-item>
<el-form-item :label="$t('table.waitingTime')" prop="code" v-if="addForm.waitTimeSwitch">
<el-input-number v-model="addForm.waitTimeThreshold" :min="0" :controls = 'false' :precision = '0'></el-input-number> {{$t('format.minute')}}
</el-form-item>
<el-form-item :label="$t('table.alarmCycle')" prop="counterType">
<el-input-number v-model="addForm.alarmInterval" :min="0" :controls = 'false' :precision = '0'></el-input-number> {{$t('format.minute')}}
</el-form-item>
<p class="info">{{$t('message.alarmInfo')}}</p>
<p class="itemTitle">{{$t('table.alarmReceiver')}}</p>
<div v-for="(item,index) in alarmReceiverList" :key='index' style="margin-top: 10px;">
<el-input class="receiverEmail" v-model="item.email"></el-input>
<el-button type="primary" class="dialog-btn dialog-confirm-btn" v-if="index==0" @click='addEmail'>{{$t('button.groupAdd')}}</el-button>
<el-button type="primary" class="dialog-btn dialog-confirm-btn" @click='delEmail(index)' v-if="index>0">{{$t('button.delete')}}</el-button>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false" class="dialog-btn">{{ $t('dialog.cancel') }}</el-button>
<el-button type="primary" @click="addSubmit('addForm')" class="dialog-btn dialog-confirm-btn">
{{ $t('dialog.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
addDialogVisible: false,
addForm: {
},
alarmReceiverList:[{
email:''
}],
isAdd:true,
rules: {
// name: [{
// required: true,
// message: this.$t('pholder.input'),
// trigger: 'blur'
// }],
// code:[{
// required: true,
// message: this.$t('pholder.input'),
// trigger: 'blur'
// }],
}
}
},
methods: {
dialogInit(data,mallId,areaId) {
this.addForm = {
mallId: '',
areaId:"",
queueLengthSwitch:false,
queueLengthThreshold:'',
waitTimeSwitch:false,
waitTimeThreshold:'',
alarmInterval:'',
sendEmail:'',
};
if(data && data.length>0){
this.isAdd = false;
this.addForm = Object.assign({},data[0]);
this.addForm.queueLengthSwitch = data[0].queueLengthSwitch==1?true:false;
this.addForm.waitTimeSwitch = data[0].waitTimeSwitch==1?true:false;
let arr = data[0].sendEmail.split(";")
this.alarmReceiverList = []
for (var i = 0; i < arr.length; i++) {
this.alarmReceiverList.push({
email:arr[i]
})
}
this.$forceUpdate()
}else{
this.addForm.mallId = mallId;
this.addForm.areaId = areaId;
}
this.addDialogVisible = true;
},
addEmail(){
this.alarmReceiverList.push({
email:''
})
},
delEmail(index){
this.alarmReceiverList.splice(index,1)
},
addSubmit(formName) {
let arr = []
for (var i = 0; i < this.alarmReceiverList.length; i++) {
arr.push(this.alarmReceiverList[i].email)
}
this.addForm.sendEmail = arr.join(';')
this.$refs[formName].validate((valid) => {
if (valid) {
this.addForm.queueLengthSwitch = this.addForm.queueLengthSwitch?'1':'0'
this.addForm.waitTimeSwitch = this.addForm.waitTimeSwitch?'1':'0'
if(this.isAdd){
this.$api.queueManagementApi.addAlarmRules(this.addForm)
.then((res) => {
let result = res.data;
if(result.code==200){
this.$message({
message: result.msg,
type: 'success'
});
this.$parent.getTableData();
this.$refs.addForm.resetFields();
this.addDialogVisible = false
}else{
this.$message({
message: result.msg,
type: 'error'
});
}
})
}else{
this.$api.queueManagementApi.updateAlarmRules(this.addForm).then((res) => {
let result = res.data;
if(result.code==200){
this.$message({
message: result.msg,
type: 'success'
});
this.$parent.getTableData();
this.$refs.addForm.resetFields();
this.addDialogVisible = false
}else{
this.$message({
message: result.msg,
type: 'error'
});
}
})
}
} else {
return false;
}
});
},
addDialogClose() {
this.addDialogVisible = false;
this.$refs.addForm.resetFields();
},
}
}
</script>
<style scoped lang="less">
.dialog_lj{
/deep/.el-dialog{
width: 1000px !important;
}
/deep/.el-form{
height: 500px !important;
}
.itemTitle{
width: 100%;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
.info{
margin: 15px 0;
}
.receiverEmail{
width: 500px !important;
}
/deep/.el-form-item__label{
line-height: 30px;
height: 30px;
text-align:left
}
/deep/.el-form-item__label+.el-form-item__content{
float: none !important;
line-height:40px !important;
}
/deep/.el-form-item__error{
padding-top: 0px !important;
}
}
</style>
src/views/queueManagement/alarmEvent/index.vue 0 → 100644
<template>
<div class="clerk-wrapper queueManagementContainer">
<div class="header manage-head-wrapper">
<el-form ref="form" class="boxShadow searchFormSocial" inline>
<el-form-item :label="$t('table.mall')">
<el-select v-model="searchForm.mallId" filterable :placeholder="$t('pholder.select')" @change="mallChange">
<el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.areaName')">
<el-select v-model="searchForm.cashierAreaId" :placeholder="$t('pholder.areaSelect')" @change="areaChange">
<el-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.laneName')">
<el-select v-model="searchForm.cashierChannelId" clearable :placeholder="$t('pholder.selectLane')">
<el-option :label="$t('pholder.all')" value="" />
<el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.alarmType')">
<el-select v-model="searchForm.messageType" clearable :placeholder="$t('pholder.selectLane')">
<el-option :label="$t('pholder.all')" value="" />
<el-option v-for="item in messageTypetData" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.date')">
<el-date-picker
v-model="searchForm.countDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<!-- <el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate" style="width: 100%;"></el-date-picker> -->
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}</el-button>
<el-button type="primary" class="search-btn" size="mini" plain @click="alarmRulesFun">{{$t('button.alarmRules')}}</el-button>
</el-form-item>
</el-form>
</div>
<div class="manage-content">
<div class="asis-table-content boxShadow" v-loading="loading">
<el-table
:data="tableData"
:max-height="tableHeight"
style="width: 100%;"
ref="row_table"
v-loading="loading"
class="clerk-manage-table"
header-row-class-name="manage-tab-head"
>
<el-table-column :label="$t('table.order')" align="center" type="index" width="100"></el-table-column>
<el-table-column :label="$t('table.alarmType')" align="center" prop="messageType">
<template slot-scope="scope">
<span>{{scope.row.messageType==0?$t('table.queueLengthAlert'):$t('table.waitTimeAlert')}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.laneName')" align="center" prop="cashierChannelId"></el-table-column>
<el-table-column :label="$t('table.messageContent')" align="center" prop="messageContent" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('table.sentDate')" align="center" prop="createTime"></el-table-column>
<el-table-column :label="$t('table.state')" align="center" prop="status">
<template slot-scope="scope">
<span>{{scope.row.status==1?$t('table.sendSuccess'):$t('table.sendFail')}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.recipient')" align="center" prop="sendEmail">
</el-table-column>
</el-table>
<el-pagination
class="manage-pagination-box"
background
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
@size-change="sizeChange"
@current-change="cerrentChange"
layout="sizes, prev, pager, next, slot"
:total="total"
>
<span
class="slot-ele-total"
>{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
</el-pagination>
</div>
</div>
<add-dialog ref="addModel"></add-dialog>
</div>
</template>
<script>
import moment from 'moment'
import addDialog from './addRule.vue'
export default {
data() {
return {
mallListForTerm:[],
channelListData:[],
areaListData:[],
tableData: [],
total: 0,
pageSize: 10,
currentPage: 1,
pagesizeArr: [10, 20, 50, 100],
loading: false,
searchForm: {
mallId: '',
cashierAreaId: '',
cashierChannelId: '',
messageType:'',
countDate: [new Date(),new Date()],
},
messageTypetData:[{
name:this.$t('table.queueLengthAlert'),
id:'0'
},{
name:this.$t('table.waitTimeAlert'),
id:'1'
}]
}
},
components:{
addDialog,
},
mounted() {
this.getMallListForTerm()
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
},
},
methods: {
// 广场
getMallListForTerm() {
this.mallListForTerm = [];
this.searchForm.mallId = "";
this.$api.base.mall({
accountId: this.$cookie.get('accountId'),
status_arr: "1,3"
}).then(data => {
let result = data.data;
if (result.data.length) {
if (this.getSessionLocal("mallId")) {
this.searchForm.mallId = Number(this.getSessionLocal("mallId"));
} else {
this.searchForm.mallId = result.data[0].id;
this.setSessionLocal("mallId", this.searchForm.mallId);
}
this.mallListForTerm = result.data;
}
this.getAreaList();
})
},
mallChange(val) {
this.setSessionLocal("mallId", val);
this.searchForm.cashierAreaId = ''
this.searchForm.cashierChannelId = ''
this.areaListData = [];
this.channelListData = [];
this.getAreaList(val)
},
// 区域
getAreaList(val) {
this.areaListData = [];
this.$api.queueManagementApi.getAreaList({
mallId: this.searchForm.mallId,
pageNum: 1,
pageSize: 999999
}).then(res => {
let result = res.data;
if (result.code == 200) {
if (result.data.list && result.data.list.length > 0) {
this.searchForm.cashierAreaId = result.data.list[0].id
this.areaListData = result.data.list;
this.getChannelList()
}
}
})
},
areaChange() {
this.searchForm.cashierChannelId = ''
this.getChannelList()
},
// 通道
getChannelList() {
this.channelListData = [];
this.$api.queueManagementApi.getChannelList({
areaId: this.searchForm.cashierAreaId,
pageNum: 1,
pageSize: 999999
}).then(res => {
let result = res.data;
if (result.code == 200) {
if (result.data.list && result.data.list.length > 0) {
this.channelListData = result.data.list;
this.getTableData()
}
}
})
},
alarmRulesFun(){
this.$api.queueManagementApi.getAlarmRulesList({
mallId: this.searchForm.mallId,
areaId: this.searchForm.cashierAreaId,
pageNum: 1,
pageSize: 999999
}).then(res => {
let result = res.data;
if (result.code == 200) {
this.$refs.addModel.dialogInit(result.data.list,this.searchForm.mallId,this.searchForm.cashierAreaId);
}
})
},
searchFun(){
this.currentPage = 1;
this.getTableData()
},
getTableData() {
this.loading = true;
this.tableData = [];
this.$api.queueManagementApi.getAlarmMessageList({
mallId: this.searchForm.mallId,
cashierAreaId: this.searchForm.cashierAreaId,
cashierChannelId: this.searchForm.cashierChannelId,
messageType: this.searchForm.messageType,
startDate: moment(this.searchForm.countDate[0]).format('YYYY-MM-DD'),
endDate:moment(this.searchForm.countDate[1]).format('YYYY-MM-DD'),
pageNum: this.currentPage,
pageSize: this.pageSize
}).then(res => {
let result = res.data;
if(result.code==200){
this.tableData = result.data.list;
this.total = result.data.total;
}
this.loading = false;
})
},
sizeChange(val) {
this.pageSize = val;
this.getTableData();
},
cerrentChange(val) {
if (this.currentPage != val) {
this.currentPage = val;
this.getTableData();
}
},
}
}
</script>
<style scoped="scoped" lang="less">
/deep/.el-select{
width: 180px;
}
/deep/.el-form-item__label{
width: auto !important;
min-width: 60px;
}
/deep/.el-date-editor{
width: 250px !important;
}
</style>
src/views/queueManagement/basicPassengerFlow/index.vue
......@@ -10,6 +10,17 @@
<el-form-item :label="$t('table.date')">
<el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item :label="$t('table.type')">
<el-select v-model="searchForm.chartDataType" filterable :placeholder="$t('pholder.select')">
<el-option label='summary' value="summary"></el-option>
<el-option label='detail' value="detail"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('table.granularity')">
<el-select v-model="searchForm.minuteGranularity" filterable :placeholder="$t('pholder.select')">
<el-option v-for="item in granularityListData" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}</el-button>
</el-form-item>
......@@ -55,12 +66,29 @@
export default {
data() {
return {
granularityListData:[
{
value: 1,
label: '1min'
}, {
value: 5,
label: '5min'
}, {
value: 10,
label: '10min'
},{
value: 15,
label: '15min'
}
],
mallListForTerm: [],
trafficFlow_title: "BasicReportdetailData", //报表
loading: false,
searchForm: {
mallId: '',
countDate: new Date(),
chartDataType:'summary',
minuteGranularity:10
},
isTabChart: false,
tabHeadData: [],
......
src/views/queueManagement/queueLive/index.vue
......@@ -74,12 +74,12 @@
<div class="tabel_title">
<!-- <span>{{$t('home.queuingmonitoring')}}</span> -->
<span>Queue Monitoring</span>
<div class="lenged">
<p>
<small>{{safeingNum}}~{{warningNum}}</small><small class="colorBox colorBox_yellow"></small>
<div class="lenged" v-if="!(JSON.stringify(ruleObj) =='{}')">
<p v-if="ruleObj.queueLengthSwitch==1">
<small>>{{ruleObj.queueLengthThreshold}}</small><small class="colorBox colorBox_red"></small>
</p>
<p>
<small>>{{warningNum}}</small><small class="colorBox colorBox_red"></small>
<p v-if="ruleObj.waitTimeSwitch==1">
<small>>{{ruleObj.waitTimeThreshold}}min</small><small class="colorBox colorBox_red"></small>
</p>
</div>
<div class="openBtn" @click="openDialog('table')">
......@@ -233,6 +233,7 @@ import moment from "moment";
export default {
data() {
return {
ruleObj:{},
dialogShow:false,
openDialogType:'',
laneName:'',
......@@ -263,8 +264,6 @@ export default {
time3: null,
tableData: [],
counterTypeData:[],
warningNum:0,
safeingNum:0,
optionTopConfig: {
tooltip: {
trigger: 'axis',
......@@ -285,7 +284,7 @@ export default {
left: '3%',
right: '4%',
bottom: '3%',
top:'40',
top:'50',
containLabel: true
},
color: ['#3BB8FF', '#FFC62E', '#97c05c'],
......@@ -442,8 +441,10 @@ export default {
htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`;
parmas.forEach((item,index) => {
if(item.data != null){
if(item.seriesName=='Queue Length'){
if(item.seriesName=='Queue Length' || item.seriesName=='Customers Abandoned the Queue'){
htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('format.perNum')}</p>`;
}else if (item.seriesName=='Open Counters' ){
htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('iPage.number')}</p>`;
}else{
let count = item.data
if(count>60){
......@@ -669,6 +670,23 @@ export default {
}
})
},
// 报警规则
getRules(){
this.$api.queueManagementApi.getAlarmRulesList({
mallId: this.mallId,
areaId: this.regionId,
pageNum: 1,
pageSize: 999999
}).then(res => {
let result = res.data;
if (result.code == 200) {
this.getAllData();
if(result.data.list && result.data.list.length>0){
this.ruleObj = result.data.list[0]
}
}
})
},
// 获取区域id
getRegionId() {
this.$api.queueManagementApi
......@@ -677,8 +695,7 @@ export default {
let result = res.data;
if (result.code == 200) {
this.regionId = result.data.list[0] && result.data.list[0].id;
this.warningNum = result.data.list[0].warnNum
this.safeingNum = result.data.list[0].safeNum
this.getRules();
this.pic = new Image();
this.pic.src =
result.data.list[0] &&
......@@ -686,8 +703,6 @@ export default {
this.pic.onload = () => {
this.drawCirlce();
};
this.getAllData();
}
});
},
......@@ -699,12 +714,13 @@ export default {
this.getCustomersOverview()
},
tableRowClassName: function({ row, rowIndex }) {
if (row.customersInQueue > this.warningNum) {
if(this.ruleObj.queueLengthSwitch ==1 || this.ruleObj.waitTimeSwitch ==1){
if (row.customersInQueue > this.ruleObj.queueLengthThreshold) {
return 'danger-row';
}else if(row.customersInQueue >this.safeingNum && row.customersInQueue <= this.warningNum){
return 'warn-row';
}else{
return 'safe-row';
}
if (row.averageWaitingTime > (this.ruleObj.waitTimeThreshold * 60)) {
return 'danger-row';
}
}
},
// 表格点击触发
......
src/views/queueManagement/queueStatistics/index.vue
......@@ -17,6 +17,11 @@
<el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.granularity')">
<el-select v-model="searchForm.minuteGranularity" filterable :placeholder="$t('pholder.select')">
<el-option v-for="item in granularityListData" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.date')">
<el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate" style="width: 100%;"></el-date-picker>
</el-form-item>
......@@ -65,6 +70,21 @@
export default {
data() {
return {
granularityListData:[
{
value: 1,
label: '1min'
}, {
value: 5,
label: '5min'
}, {
value: 10,
label: '10min'
},{
value: 15,
label: '15min'
}
],
mallListForTerm: [],
areaListData: [],
channelListData: [],
......@@ -75,6 +95,7 @@
cashierAreaId: '',
cashierChannelId: '',
countDate: new Date(),
minuteGranularity:10
},
isTabChart: false,
tabHeadData: [],
......@@ -148,8 +169,11 @@
let htmls = "";
htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`;
parmas.forEach((item,index) => {
if(item.seriesName=='Queue Length'){
if(item.data){
if(item.seriesName=='Queue Length' || item.seriesName=='Customers Abandoned the Queue'){
htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('format.perNum')}</p>`;
}else if (item.seriesName=='Open Counters' ){
htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('iPage.number')}</p>`;
}else{
let count = item.data
if(count>60){
......@@ -159,6 +183,7 @@
}
htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${count}</p>`;
}
}
});
htmls += "</div>";
return htmls;
......@@ -314,5 +339,7 @@
</script>
<style scoped="scoped" lang="less">
/deep/.el-select{
width: 180px !important;
}
</style>
src/views/queueManagement/regionalManagement/index.vue
......@@ -50,11 +50,11 @@
<span>{{scope.row.status==0?$t('pholder.state1'):$t('pholder.state2')}}</span>
</template>
</el-table-column>
<el-table-column label="QoS" align="center" prop="role_unid">
<!-- <el-table-column label="QoS" align="center" prop="role_unid">
<template slot-scope="scope">
<el-button type="text" class="tab-btn" @click="qosConfig(scope.row)">{{$t('asisTab.setting')}}</el-button>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column :label="$t('table.deviceBind')" align="center" prop="role_unid">
<template slot-scope="scope">
<el-button type="text" class="tab-btn" @click="bindRow(scope.row)">{{$t('button.unbind')}}</el-button>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!