Commit 17b8f456 by 李君

优化

1 parent a379a142
......@@ -62,7 +62,9 @@ const queueManagementApi = {
getDistributionDetail(params, config) {
return req('get', `/queuing/distribution/detail`, params, config)
},
getCountData(params, config) {
return req('get', `/queuing/countData`, params, config)
},
}
......
......@@ -124,6 +124,16 @@
>{{$t('button.unbind')}}</el-button>
</template>
</el-table-column>
<el-table-column prop="mall.name" v-if="isShowConfig" :label="$t('dialog.video')" align="center">
<template slot-scope="scope">
<el-button
@click="openDialogVideo(scope.row)"
type="text"
size="small"
class="tab-btn"
>{{$t('dialog.video')}}</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('table.operate')" align="center">
<template slot-scope="scope">
<el-button
......@@ -187,7 +197,7 @@
<template-manage ref="tmanage" @refresh="searchFun"></template-manage>
<table-config ref="tabConfig" @confirm="confirmTable"></table-config>
<el-dialog
title="设备"
:title="$t('dialog.deviceDetail')"
:visible.sync="dialogVisible"
v-if="dialogVisible"
top="50px"
......@@ -197,6 +207,17 @@
<el-button @click="dialogVisible = false" class="dialog-btn">{{$t('dialog.close')}}</el-button>
</div>
</el-dialog>
<el-dialog
:title="$t('dialog.video')"
:visible.sync="dialogVideoVisible"
v-if="dialogVideoVisible"
top="50px"
width="90%">
<iframe :style="{height:tableHeight+'px'}" style="width: 100%;margin-top: 10px;margin-top: -10px;" :src="openVideoDialogUrl"></iframe>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVideoVisible = false" class="dialog-btn">{{$t('dialog.close')}}</el-button>
</div>
</el-dialog>
</div>
</template>
......@@ -269,7 +290,9 @@ export default {
data() {
return {
dialogVisible:false,
dialogVideoVisible:false,
openDialogUrl:'',
openVideoDialogUrl:'',
propsObj:{},
mallListForTerm: [],
floorListForTerm: [],
......@@ -359,7 +382,10 @@ export default {
openDialog(row){
this.dialogVisible = true;
this.openDialogUrl = window._vionConfig.aiotUrl+"/#/vionIndex?id=" +this.toCode(row.serialnum)
console.log(this.openDialogUrl)
},
openDialogVideo(row){
this.dialogVideoVisible = true;
this.openVideoDialogUrl = window._vionConfig.aiotUrl+"/#/videoIndex?id=" +row.serialnum
},
toCode(str1) {
let str = window.btoa(str1);
......
<template>
<el-dialog :title="$t('button.positionCalibration')" width="80%" class="manage-dialog" v-if="bindVisible" :visible.sync="bindVisible" :close-on-click-modal="false" @close="closeBindDialog">
<div class="draw_desks">
<div class="gateWrap" id="gateManageChannel">
<img :src="floorImg" class="fimg" @load="loadGateData">
<div class="grender" ref="gRender"></div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="bindVisible = false">
{{$t('button.closed')}}
</el-button>
</div>
</el-dialog>
</template>
<script>
import drawUtils from './drawUtils';
import _ from 'underscore';
export default {
extends:drawUtils,
data() {
return {
bindVisible: false,
floorImg: '',
width:0,
height:0,
groupList:[],
// zr:'',
areaId:'',
areaObj:{}
}
},
methods: {
dialogInit(row) {
this.areaObj = {...row}
this.areaId = row.id
this.floorImg = window._vionConfig.picUrl+row.pic
this.bindVisible = true;
},
loadGateData() {
let {width,height} = document.getElementById('gateManageChannel').getBoundingClientRect();
this.width = width;
this.height = height;
this.groupList = [];
this.zr = zrender.init(this.$refs.gRender, {
renderer: 'canvas',
devicePixelRatio: 2,
width: width,
height: height
});
window.zr = this.zr;
this.$api.queueManagementApi.getDevices({
areaId: this.areaId
}).then(res=>{
let data = res.data.data
data.forEach(item=>{
item.name = this.areaObj.name;
// item.id = this.areaObj.id;
item.id = item.serialnum;
item.picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.serialnum + "-01.jpg?t=" + Date.parse(new Date()) / 1000;
item.coordinate&&(item.coordinate=JSON.parse(item.coordinate))
})
this.gateList =data;
this.drawJoinMap()
});
},
drawJoinMap(){
let that = this;
console.log(this.gateList)
_.each(this.gateList,(item,index)=>{
if(item.picUrl){
let img = new Image();
img.src = item.picUrl;
img.onload = function(){
item.width = this.width;
item.height = this.height;
that.createGroup(item,index+1);
}
}
})
},
createGroup(data,index){
let left = 0;
let top = 0;
let that = this;
let group = new zrender.Group({
z:1,
draggable:true,
gateId:data.id,
gateName:data.name,
picUrl:data.picUrl,
position:[left,top]
}).on('mouseup', function (evt) {
that.saveGateData(data.id);
})
this.groupList.push(group);
this.zr.add(group);
window.group = group;
this.drawPolyImage(data,group);
},
closeBindDialog() {
this.bindVisible = false
},
}
}
</script>
<style lang="less" scoped="scoped">
.draw_desks {
position: relative;
width: 100%;
height: 700px;
}
.gateWrap{
position: relative;
width: 100%;
box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
}
.gateWrap .fimg{
display: block;
width: 100%;
}
.gateWrap .grender{
position: absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
opacity: 0.7;
}
</style>
<template>
<div class="clerk-wrapper queueManagementContainer">
<div class="header manage-head-wrapper">
<el-form ref="form" label-width="100px" inline class="searchForm boxShadow searchFormSocial">
<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-input v-model="searchForm.name" class="search-inp" :placeholder="$t('pholder.input')" clearable></el-input>
</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>
</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.areaName')" align="center" prop="name"></el-table-column>
<el-table-column :label="$t('table.areaNumber')" align="center" prop="code"></el-table-column>
<el-table-column :label="$t('table.areaType')" align="center" prop="type">
<template slot-scope="scope">
<span>{{scope.row.type==1?$t('pholder.selfService'):$t('pholder.manualCashier')}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.boundDevices')" align="center" prop="count"></el-table-column>
<el-table-column :label="$t('table.operate')" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" class="tab-btn" @click="bindRow(scope.row)">{{$t('button.positionCalibration')}}</el-button>
</template>
</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>
<bind-dev-dialog ref="bindDevModel"></bind-dev-dialog>
</div>
</template>
<script>
import bindDevDialog from "./bindDev";
export default {
data() {
return {
mallListForTerm:[],
tableData: [],
total: 0,
pageSize: 10,
currentPage: 1,
pagesizeArr: [10, 20, 50, 100],
loading: false,
searchForm:{
mallId:'',
name:''
},
tableData:[]
}
},
components:{
bindDevDialog
},
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.getTableData();
})
},
mallChange(val) {
this.setSessionLocal("mallId", val);
this.getTableData();
},
bindRow(row){
this.$refs.bindDevModel.dialogInit(row);
},
searchFun(){
this.currentPage = 1;
this.getTableData()
},
getTableData() {
this.loading = true;
this.tableData = [];
this.$api.queueManagementApi.getAreaList({
name: this.searchForm.name,
mallId: this.searchForm.mallId,
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">
.face-img {
width: 50px;
height: 50px;
cursor: zoom-in;
}
.zoomout-img {
width: auto;
height: 300px;
}
</style>
<template>
<div>
<el-dialog :title="isEdit=='add'?$t('button.groupAdd'):$t('button.groupEdit')" 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">
<!-- 区域名称 -->
<el-form-item :label="$t('table.laneName')" prop="name">
<el-input v-model="addForm.name" :placeholder="$t('pholder.input')"></el-input>
<i class="error-tip">*</i>
</el-form-item>
<el-form-item :label="$t('table.channelCode')" prop="code">
<el-input v-model="addForm.code" :placeholder="$t('pholder.input')"></el-input>
<i class="error-tip">*</i>
</el-form-item>
<el-form-item :label="$t('table.counterType')" prop="counterType">
<el-select v-model="addForm.counterType" :placeholder="$t('pholder.select')">
<el-option v-for="item in counterTypeData" :key="item.key" :label="item.value" :value="item.key" />
</el-select>
<i class="error-tip">*</i>
</el-form-item>
<el-form-item :label="$t('table.areaName')" prop="areaId">
<el-select v-model="addForm.areaId" :placeholder="$t('pholder.areaSelect')">
<el-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</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() {
var checkName = (rule, value, callback) => {
//var flag = new RegExp("[`’\"·_ ~!%\\-@#$^&*=|{}':;',\\[\\].<>《》/?~!@#¥……&*——|{}【】‘;:”“'。,、? ]");
var flag = new RegExp("'");
if (flag.test(value) || /\\/.test(value)) {
callback(new Error("名称包含特殊字符,请重新输入!"));
} else {
callback();
}
}
return {
isEn: localStorage.getItem('lang') == 'en_US',
counterTypeData:[],
addDialogVisible: false,
areaListData:[],
addForm: {
name: '',
areaId:"",
code:'',
counterType:''
},
isEdit:false,
rules: {
name: [{
required: true,
message: this.$t('pholder.input'),
trigger: 'blur'
},{
validator: checkName,
trigger: "blur"
}],
code:[{
required: true,
message: this.$t('pholder.input'),
trigger: 'blur'
}],
counterType:[{
required: true,
message: this.$t('pholder.select'),
trigger: 'blur'
}]
}
}
},
methods: {
dialogInit(type,data) {
this.getCounterType()
this.addForm = {
name: '',
areaId:"",
code:'',
counterType:''
};
this.isEdit = type
if(data){
this.addForm = Object.assign({},data);
this.$forceUpdate()
}
this.getAreaList()
this.addDialogVisible = true;
},
getCounterType(){
this.$api.base.dataDic({
type: 'counterType'
}).then(res => {
this.counterTypeData = res.data.data.map(item=>{
if(this.isEn){
item.value = item.valueEn;
}
return item;
});
})
},
getAreaList(){
this.areaListData = [];
this.$api.queueManagementApi.getAreaList({
mallId: Number(this.getSessionLocal("mallId")),
pageNum: 1,
pageSize: 999999
}).then(res => {
let result = res.data;
if(result.code==200){
if(result.data.list&& result.data.list.length>0){
if(this.isEdit=='add'){
this.addForm.areaId = result.data.list[0].id
}
this.areaListData = result.data.list;
}
}
})
},
addSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if(this.isEdit=='add'){
this.$api.queueManagementApi.addChannel(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.addForm = {}
this.addDialogVisible = false
}else{
this.$message({
message: result.msg,
type: 'error'
});
}
})
}else{
this.$api.queueManagementApi.updateChannel(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.addForm = {}
this.addDialogVisible = false
}else{
this.$message({
message: result.msg,
type: 'error'
});
}
})
}
// this.$emit('submit',this.addForm)
} else {
return false;
}
});
},
addDialogClose() {
this.addDialogVisible = false;
this.$refs.addForm.resetFields();
},
}
}
</script>
<style scoped lang="less">
.dialog_lj{
/deep/.el-dialog__body{
height: 270px;
}
/deep/.el-form-item__label{
line-height: 30px;
height: 30px;
text-align:left
}
/deep/.el-select{
width: 100%;
}
/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>
......@@ -333,7 +333,7 @@ export default {
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(index==0){
if(item.seriesName=='Queue Length'){
htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('format.perNum')}</p>`;
}else{
let count = item.data
......
......@@ -148,7 +148,7 @@
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(index==0){
if(item.seriesName=='Queue Length'){
htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('format.perNum')}</p>`;
}else{
let count = item.data
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!