Skip to content

李君 / carrefour

Go to a project
Commit 527169c5 by tianlonglong
Options

tll

1 parent 3f239696
Inline Side-by-side
Showing 6 changed files with 1991 additions and 923 deletions
package-lock.json
This diff could not be displayed because it is too large.
src/views/Management/DeskManage/index.vue
<template>
<div class="manage-container clerk-wrapper">
<el-row class="manage-head-wrapper">
<el-col :span="20">
<!-- 广场 -->
<div class="manage-select-box">
<el-select v-model="mallVal" class="mall-opt" filterable placeholder="楼层"
@change="chooseMall(mallVal)">
<el-option v-for="item in mallOpt" :label="item.name" :value="item.id" :key="item.value">
</el-option>
</el-select>
</div>
<!-- 楼层选择 -->
<div class="manage-select-box floor-box">
<el-select v-model="floorVal" filterable :placeholder="$t('pholder.floorSelect')"
@change="chooseFloor(floorVal)">
<el-option v-for="item in floorOpt" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
<el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{ $t('button.search')
<div class="manage-container clerk-wrapper">
<el-row class="manage-head-wrapper">
<el-col :span="20">
<!-- 广场 -->
<div class="manage-select-box">
<el-select v-model="mallVal" class="mall-opt" filterable placeholder="楼层" @change="chooseMall(mallVal)">
<el-option v-for="item in mallOpt" :label="item.name" :value="item.id" :key="item.value">
</el-option>
</el-select>
</div>
<!-- 楼层选择 -->
<div class="manage-select-box floor-box">
<el-select v-model="floorVal" filterable :placeholder="$t('pholder.floorSelect')" @change="chooseFloor(floorVal)">
<el-option v-for="item in floorOpt" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
<el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{ $t('button.search')
}}
</el-button>
<!-- <el-button type="primary" class="search-btn" plain size="mini" @click="saveData">保存并应用
</el-button>
<!-- <el-button type="primary" class="search-btn" plain size="mini" @click="saveData">保存并应用
</el-button> -->
</el-col>
</el-row>
<el-row class="manage-content">
<el-col :span="5" class="treeMenu">
<div v-show="floorVal" class="btn-box btn-radio">
<el-button type="primary" class="search-btn" plain size="mini" @click="addDesk">新增货架</el-button>
</div>
<el-table ref="singleTable" @row-click="setCurrent" @current-change="handleCurrentChange" :data="tableData" :max-height="tableHeight" :show-header='false' :highlight-current-row='true'
style="width: 100%;" v-loading="loading" header-row-class-name="manage-tab-head" >
<el-table-column align="left" prop="name">
<template slot-scope="scope">
<p>{{ scope.row.name }}<span v-if="scope.row.doorway==1" style="color:#f00;margin-left:5px;">{{$t('asisTab.inOut')}}</span></p>
</template>
</el-table-column>
<el-table-column align="left" prop="bindType" width="80">
<template slot-scope="scope">
<span class="bind" @click="editDesk(scope.row)">编辑</span>
<span class="unbind" @click="delDesk(scope.row)">删除</span>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination class="treePage" small background :pageCount='4' layout="jumper, prev, pager, next" :total="total"
</el-col>
</el-row>
<el-row class="manage-content">
<el-col :span="5" class="treeMenu">
<div v-show="floorVal" class="btn-box btn-radio">
<el-button type="primary" class="search-btn" plain size="mini" @click="addDesk">新增货架</el-button>
</div>
<el-table ref="singleTable" @row-click="setCurrent" @current-change="handleCurrentChange" :data="tableData" :max-height="tableHeight" :show-header='false' :highlight-current-row='true' style="width: 100%;" v-loading="loading" header-row-class-name="manage-tab-head">
<el-table-column align="left" prop="name">
<template slot-scope="scope">
<p>{{ scope.row.name }}<span v-if="scope.row.doorway==1" style="color:#f00;margin-left:5px;">{{$t('asisTab.inOut')}}</span></p>
</template>
</el-table-column>
<el-table-column align="left" prop="bindType" width="80">
<template slot-scope="scope">
<span class="bind" @click="editDesk(scope.row)">编辑</span>
<span class="unbind" @click="delDesk(scope.row)">删除</span>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination class="treePage" small background :pageCount='4' layout="jumper, prev, pager, next" :total="total"
@size-change="sizeChange" @current-change="currentChange">
</el-pagination> -->
</el-col>
<el-col :span="19" class="personInfo">
<ul class="legends">
<el-button size="mini" type="danger" @click="clearDesk">清除货架</el-button>
<el-button size="mini" type="primary" @click="saveData">保存绘图</el-button>
</ul>
<div class="draw_desks">
<el-row v-if="ptype==1" :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;">
<div class="dwrap"></div>
</li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="dwrap">
<img class="dimg" :src="item.picUrl" />
<div class="label-box">
<p>{{ $t('table.monitorSiteName') + ': ' + item.name }}</p>
<p>{{ $t('table.deviceNum') + ': ' + item.serialnum }}</p>
</div>
<div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</li>
</ul>
</el-row>
<el-row v-else>
<div class="fwrap">
<img class="dimg" :src="floorImg" />
<div class="pview">
<Painter :cdata="floorData" :isFloor="true" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</el-row>
<!-- <painter-view :maxHeight="tableHeight" :mallId="mallVal" :floorId="floorVal"></painter-view> -->
</el-col>
<el-col :span="19" class="personInfo">
<ul class="legends">
<el-button size="mini" type="danger" @click="clearDesk">清除货架</el-button>
<el-button size="mini" type="primary" @click="saveData">保存绘图</el-button>
</ul>
<div class="draw_desks">
<el-row v-if="ptype==1" :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;">
<div class="dwrap"></div>
</li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="dwrap">
<img class="dimg" :src="item.picUrl" />
<div class="label-box">
<p>{{ $t('table.monitorSiteName') + ': ' + item.name }}</p>
<p>{{ $t('table.deviceNum') + ': ' + item.serialnum }}</p>
</div>
<div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</el-col>
</el-row>
<add-desk-dialog ref="addDeskDialog" @submit="addField"></add-desk-dialog>
</div>
</li>
</ul>
</el-row>
<el-row v-else>
<div class="fwrap">
<img class="dimg" :src="floorImg" />
<div class="pview">
<Painter :cdata="floorData" :isFloor="true" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</el-row>
<!-- <painter-view :maxHeight="tableHeight" :mallId="mallVal" :floorId="floorVal"></painter-view> -->
</div>
</el-col>
</el-row>
<add-desk-dialog ref="addDeskDialog" @submit="addField"></add-desk-dialog>
</div>
</template>
<script>
import _ from 'underscore';
import Painter from './Painter';
import _ from "underscore";
import Painter from "./Painter";
import addDeskDialog from "./addDesk";
export default {
data() {
data() {
return {
ptype: 1,
floorOpt: [],
floorVal: "",
floorImg: "",
floorData: {},
mallName: "",
mallVal: null,
mallOpt: [],
tableData: [],
loading: true,
dataMsg: "",
gateList: [],
canvasList: [],
currentRow: {},
groupList: [],
};
},
components: {
"add-desk-dialog": addDeskDialog,
Painter: Painter,
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
},
},
mounted() {
this.getMallList();
this.dataMsg = this.$t("echartsTitle.loading");
},
methods: {
startDesk(data) {
let index = _.findIndex(this.groupList, (item) => {
return item.desk.id == data.id;
});
if (index > -1) {
this.groupList[index].zr.remove(this.groupList[index]);
this.groupList.splice(index, 1);
if (data.coordinates) {
this.delCoord(data);
}
} else {
return false;
}
},
clearDesk() {
if (_.isEmpty(this.currentRow)) {
return this.$message({
showClose: true,
type: "warning",
message: "请先点击选择左侧货架",
});
}
this.startDesk(this.currentRow);
},
finishDesk(data) {
let index = _.findIndex(this.groupList, (item) => {
return item.desk.id == data.desk.id;
});
if (index > -1) {
this.groupList.splice(index, 1);
}
this.groupList.push(data);
},
editDesk(data) {
this.$refs.addDeskDialog.dialogInit(data);
},
delDesk(data) {
this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
confirmButtonText: this.$t("message.confirm"),
cancelButtonText: this.$t("message.cancel"),
type: "warning",
}).then(() => {
this.$api.management.delDesk({ id: data.id }).then((res) => {
this.$message({
showClose: true,
type: "success",
message: "删除成功",
});
this.getDeskList();
});
});
},
setCurrent(row, column, event) {
this.$refs.singleTable.setCurrentRow(row);
},
groupClick(group) {
this.$refs.singleTable.setCurrentRow(group.desk);
},
handleCurrentChange(val) {
this.currentRow = val;
},
addDesk() {
this.$refs.addDeskDialog.dialogInit();
},
addField(data) {
if (!data.id) {
data.accountId = this.$cookie.get("accountId");
data.mallId = this.mallVal;
data.floorId = this.floorVal;
}
data.doorway = data.doorway ? 1 : 0;
this.$api.management.editDesk(data).then((res) => {
this.$message({
showClose: true,
type: "success",
message: data.id ? "修改成功" : "添加成功",
});
this.getDeskList();
this.$refs.addDeskDialog.addDialogClose();
});
},
// 保存
saveData() {
let ajaxs = [];
if (this.groupList.length == 0) {
return this.$message({
showClose: true,
type: "warning",
message: "请先绘制货架图",
});
}
_.each(this.groupList, (group) => {
ajaxs.push(this.editCoord(group));
});
Promise.all(ajaxs).then((res) => {
this.$message({
showClose: true,
type: "success",
message: "保存成功",
});
});
},
delCoord(data) {
data.coordinates = "";
data.gateId = "";
data.deviceId = "";
data.channelSerialnum = "";
//let desk = _.omit(data,'coordinates','gateId','deviceId','channelSerialnum');
this.$api.management.editDesk(data);
},
editCoord(group) {
let { position, points, __zr, cdata, desk } = group;
let [width, height] = [__zr.getWidth(), __zr.getHeight()];
let coordinates = _.map(points, (point) => {
return {
ptype:1,
floorOpt: [],
floorVal: '',
floorImg:'',
floorData:{},
mallName: "",
mallVal: null,
mallOpt: [],
tableData: [],
loading: true,
dataMsg: "",
gateList:[],
canvasList:[],
currentRow:{},
groupList:[],
x: parseInt((1920 * (point[0] + position[0])) / width),
y: parseInt((1080 * (point[1] + position[1])) / height),
};
});
desk.coordinates = JSON.stringify(coordinates);
desk.gateId = cdata.id;
desk.deviceId = cdata.deviceId;
desk.channelSerialnum = cdata.serialnum;
let params = Object.assign({}, desk);
return this.$api.management.editDesk(params);
},
components: {
"add-desk-dialog": addDeskDialog,
'Painter': Painter
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
}
// 广场出入口列表
getDeskList() {
this.$api.management
.getDeskList({
mallId: this.mallVal,
floorId: this.floorVal,
page: 1,
pageNum: 999,
})
.then((res) => {
this.tableData = res.data.data.list;
setTimeout(() => {
this.loading = false;
}, 500);
});
},
mounted() {
this.getMallList();
this.dataMsg = this.$t("echartsTitle.loading");
// 列表数据
getTableData() {
this.loading = true;
this.dataMsg = this.$t("echartsTitle.loading");
this.tableData = [];
this.getDeskList();
if (this.ptype == 1) {
this.loadGateData();
} else {
this.drawFloorMap();
}
},
methods: {
startDesk(data){
let index = _.findIndex(this.groupList,(item=>{
return item.desk.id == data.id;
}));
if(index>-1){
this.groupList[index].zr.remove(this.groupList[index]);
this.groupList.splice(index,1);
if(data.coordinates){
this.delCoord(data);
}
}else{
return false;
}
},
clearDesk(){
if(_.isEmpty(this.currentRow)){
return this.$message({
showClose: true,
type: "warning",
message: '请先点击选择左侧货架'
})
}
this.startDesk(this.currentRow);
},
finishDesk(data){
let index = _.findIndex(this.groupList,(item=>{
return item.desk.id == data.desk.id;
}));
if(index>-1){
this.groupList.splice(index,1);
}
this.groupList.push(data);
},
editDesk(data){
this.$refs.addDeskDialog.dialogInit(data);
},
delDesk(data){
this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
confirmButtonText: this.$t("message.confirm"),
cancelButtonText: this.$t("message.cancel"),
type: "warning"}).then(() => {
this.$api.management.delDesk({id:data.id}).then(res=>{
this.$message({
showClose: true,
type: "success",
message:'删除成功'
});
this.getDeskList();
})
})
},
setCurrent(row,column,event) {
this.$refs.singleTable.setCurrentRow(row);
},
groupClick(group){
this.$refs.singleTable.setCurrentRow(group.desk);
},
handleCurrentChange(val) {
this.currentRow = val;
},
addDesk() {
this.$refs.addDeskDialog.dialogInit();
},
addField(data) {
if(!data.id){
data.accountId = this.$cookie.get('accountId');
data.mallId = this.mallVal;
data.floorId = this.floorVal;
// 广场
getMallList() {
this.mallOpt = [];
this.mallVal = null;
this.mallName = "";
const storageMallVal = this.getSessionLocal("mallId");
this.$api.base
.mall(
{
accountId: this.$cookie.get("accountId"),
status_arr: "1,3",
},
null,
true
)
.then((res) => {
let result = res.data.data;
if (result.length > 0) {
this.mallOpt = result;
if (storageMallVal) {
this.mallVal = storageMallVal - 0;
const matchedMall = result.find(
(item) => item.id === this.mallVal
);
this.mallName = matchedMall.name;
} else {
this.mallVal = result[0].id;
this.setSessionLocal("mallId", this.mallVal);
this.mallName = result[0].name;
}
data.doorway = data.doorway?1:0;
this.$api.management.editDesk(data).then(res=>{
this.$message({
showClose: true,
type: "success",
message: data.id?'修改成功':'添加成功'
});
this.getDeskList();
this.$refs.addDeskDialog.addDialogClose();
})
},
// 保存
saveData() {
let ajaxs = [];
if(this.groupList.length==0){
return this.$message({
showClose: true,
type: "warning",
message: '请先绘制货架图'
})
}
_.each(this.groupList,group=>{
ajaxs.push(this.editCoord(group));
});
Promise.all(ajaxs).then(res=>{
this.$message({
showClose: true,
type: "success",
message: '保存成功'
})
})
},
delCoord(data){
data.coordinates='';
data.gateId ='';
data.deviceId='';
data.channelSerialnum='';
//let desk = _.omit(data,'coordinates','gateId','deviceId','channelSerialnum');
this.$api.management.editDesk(data);
},
editCoord(group){
let {position,points,__zr,cdata,desk} = group;
let [width,height] = [__zr.getWidth(),__zr.getHeight()];
let coordinates = _.map(points,point=>{
return {
x:parseInt(1920*(point[0]+position[0])/width),
y:parseInt(1080*(point[1]+position[1])/height),
}
});
desk.coordinates = JSON.stringify(coordinates);
desk.gateId = cdata.id;
desk.deviceId = cdata.deviceId;
desk.channelSerialnum = cdata.serialnum;
let params = Object.assign({},desk);
return this.$api.management.editDesk(params);
},
// 广场出入口列表
getDeskList() {
this.$api.management.getDeskList({
mallId: this.mallVal,
floorId: this.floorVal,
page:1,
pageNum:999
}).then((res) => {
this.tableData = res.data.data.list;
setTimeout(() => {
this.loading = false;
}, 500);
})
},
// 列表数据
getTableData() {
this.loading = true;
this.dataMsg = this.$t("echartsTitle.loading");
this.tableData = [];
this.getDeskList();
if(this.ptype==1){
this.loadGateData();
}else{
this.drawFloorMap();
}
},
// 广场
getMallList() {
this.mallOpt = [];
this.mallVal = null;
this.mallName = "";
const storageMallVal = this.getSessionLocal("mallId")
this.$api.base
.mall({
accountId: this.$cookie.get("accountId"),
status_arr: '1,3'
},
null,
true
)
.then(res => {
let result = res.data.data;
if (result.length > 0) {
this.mallOpt = result;
if (storageMallVal) {
this.mallVal = storageMallVal - 0;
const matchedMall = result.find(item => item.id === this.mallVal)
this.mallName = matchedMall.name;
} else {
this.mallVal = result[0].id;
this.setSessionLocal("mallId", this.mallVal);
this.mallName = result[0].name;
}
}
this.floorFetch(11)
})
.catch(err => {
console.log(err)
});
},
chooseMall(mallId) {
this.setSessionLocal("mallId", mallId);
const matchedMall = this.mallOpt.find(item => item.id == mallId)
this.mallName = matchedMall.name;
this.floorVal = '';
this.floorImg = '';
this.floorFetch()
},
// 楼层
floorFetch() {
this.floorOpt = [];
this.floorVal = "";
this.floorImg = '';
this.$api.base
.floor({
mallId: this.mallVal,
status: 1
})
.then(data => {
var result = data.data;
this.floorOpt = result.data;
if (result.data.length) {
this.floorVal = result.data[0].id
this.floorImg = window._vionConfig.picUrl + result.data[0].floorPlan;
this.getTableData();
} else {
this.tableData = []
}
})
},
chooseFloor(floorVal) {
this.floorImg = window._vionConfig.picUrl + _.findWhere(this.floorOpt,{id:floorVal}).floorPlan;
}
this.floorFetch(11);
})
.catch((err) => {
console.log(err);
});
},
chooseMall(mallId) {
this.setSessionLocal("mallId", mallId);
const matchedMall = this.mallOpt.find((item) => item.id == mallId);
this.mallName = matchedMall.name;
this.floorVal = "";
this.floorImg = "";
this.floorFetch();
},
// 楼层
floorFetch() {
this.floorOpt = [];
this.floorVal = "";
this.floorImg = "";
this.$api.base
.floor({
mallId: this.mallVal,
status: 1,
})
.then((data) => {
var result = data.data;
this.floorOpt = result.data;
if (result.data.length) {
this.floorVal = result.data[0].id;
this.floorImg =
window._vionConfig.picUrl + result.data[0].floorPlan;
this.getTableData();
},
loadGateData() {
this.gateList = [];
_.each(this.canvasList, item => {
if (item.zr && item.zr.clear) {
item.zr.clear();
}
})
this.canvasList = [];
if (!this.floorVal) {
return;
}
Promise.all([this.getGateList(), this.getShotList()]).then(res => {
this.gateList = _.map(res[0], item => {
let shot = _.findWhere(res[1], { gateId: item.id });
if (shot) {
item.serialnum = shot.serialnum;
item.deviceSerialnum = shot.deviceSerialnum;
item.deviceId = shot.deviceId;
//item.picUrl='https://store.keliuyun.com/images//snapshot/real/8F2B-3A9C-2A2D-6A06-01.jpg?t=1652495146';
item.picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.serialnum + ".jpg?t=" + Date.parse(new Date()) / 1000;
}
item.coordinates && (item.coordinates = JSON.parse(item.coordinates))
return item;
})
this.drawJoinMap()
});
},
drawJoinMap(){
this.loading = false;
let that = this;
let canvasList = [];
_.each(this.gateList.reverse(),(item,index)=>{
if(item.picUrl){
let img = new Image();
img.src = item.picUrl;
img.onload = function(){
item.width = this.width;
item.height = this.height;
canvasList.push(item);
that.$nextTick(()=>{
item.cwidth = document.querySelector('.dwrap').getBoundingClientRect().width;
item.cheight = item.cwidth*item.height/item.width;
that.canvasList = canvasList;
});
}
}
})
},
drawFloorMap(){
let that = this;
let floorData = {};
let img = new Image();
img.src = this.floorImg;
img.onload = function(){
floorData.width = this.width;
floorData.height = this.height;
that.$nextTick(()=>{
floorData.cwidth = document.querySelector('.pview').getBoundingClientRect().width;
floorData.cheight = floorData.cwidth*floorData.height/floorData.width;
that.floorData = floorData;
});
}
},
/*獲取監控點*/
getGateList() {
return this.$api.management.gateFilterList({
mallId: this.mallVal,
floorId: this.floorVal
}).then(res => {
return res.data.data;
});
},
/*獲取通道列表*/
getShotList() {
return this.$api.management.channelFilterList({
mallId: this.mallVal,
floorId_arr: this.floorVal
}).then(res => {
return res.data.data;
} else {
this.tableData = [];
}
});
},
chooseFloor(floorVal) {
this.floorImg =
window._vionConfig.picUrl +
_.findWhere(this.floorOpt, { id: floorVal }).floorPlan;
this.getTableData();
},
loadGateData() {
this.gateList = [];
_.each(this.canvasList, (item) => {
if (item.zr && item.zr.clear) {
item.zr.clear();
}
});
this.canvasList = [];
if (!this.floorVal) {
return;
}
Promise.all([this.getGateList(), this.getShotList()]).then((res) => {
this.gateList = _.map(res[0], (item) => {
let shot = _.findWhere(res[1], { gateId: item.id });
if (shot) {
item.serialnum = shot.serialnum;
item.deviceSerialnum = shot.deviceSerialnum;
item.deviceId = shot.deviceId;
//item.picUrl='https://store.keliuyun.com/images//snapshot/real/8F2B-3A9C-2A2D-6A06-01.jpg?t=1652495146';
item.picUrl =
window._vionConfig.picUrl +
"/snapshot/real/" +
item.serialnum +
".jpg?t=" +
Date.parse(new Date()) / 1000;
}
item.coordinates && (item.coordinates = JSON.parse(item.coordinates));
return item;
});
this.drawJoinMap();
});
},
drawJoinMap() {
this.loading = false;
let that = this;
let canvasList = [];
_.each(this.gateList.reverse(), (item, index) => {
if (item.picUrl) {
let img = new Image();
img.src = item.picUrl;
img.onload = function () {
item.width = this.width;
item.height = this.height;
canvasList.push(item);
that.$nextTick(() => {
item.cwidth = document
.querySelector(".dwrap")
.getBoundingClientRect().width;
item.cheight = (item.cwidth * item.height) / item.width;
that.canvasList = canvasList;
});
},
searchFun() {
this.getTableData();
};
}
}
});
},
drawFloorMap() {
let that = this;
let floorData = {};
let img = new Image();
img.src = this.floorImg;
img.onload = function () {
floorData.width = this.width;
floorData.height = this.height;
that.$nextTick(() => {
floorData.cwidth = document
.querySelector(".pview")
.getBoundingClientRect().width;
floorData.cheight =
(floorData.cwidth * floorData.height) / floorData.width;
that.floorData = floorData;
});
};
},
/*獲取監控點*/
getGateList() {
return this.$api.management
.gateFilterList({
mallId: this.mallVal,
floorId: this.floorVal,
})
.then((res) => {
return res.data.data;
});
},
/*獲取通道列表*/
getShotList() {
return this.$api.management
.channelFilterList({
mallId: this.mallVal,
floorId_arr: this.floorVal,
})
.then((res) => {
return res.data.data;
});
},
searchFun() {
this.getTableData();
},
},
};
</script>
<style scoped lang="less">
.manage-select-box .el-select {
width: 150px;
width: 150px;
}
.manage-container {
height: 100%;
/deep/ .el-table .cell{
padding-right: 0;
}
/deep/.el-table tr{
cursor: pointer;
}
/deep/.el-table__body tr.current-row>td.el-table__cell{
background-color: #c8e1ff;
}
height: 100%;
/deep/ .el-table .cell {
padding-right: 0;
}
/deep/.el-table tr {
cursor: pointer;
}
/deep/.el-table__body tr.current-row > td.el-table__cell {
background-color: #c8e1ff;
}
}
.manage-content {
height: calc(100% - 100px);
height: calc(100% - 100px);
}
.personInfo {
// padding-left: 10px;
//padding-right: 10px;
// padding-left: 10px;
//padding-right: 10px;
}
.treeMenu {
padding-right: 5px;
border-right: 3px solid #f0f3f9;
height: 100%;
padding-right: 5px;
border-right: 3px solid #f0f3f9;
height: 100%;
.treePage {
padding: 2px 0;
position: fixed;
bottom: 15px;
.treePage {
padding: 2px 0;
position: fixed;
bottom: 15px;
/deep/.el-pagination__jump {
line-height: 22px;
margin-left: 0;
}
/deep/.el-pagination__jump {
line-height: 22px;
margin-left: 0;
}
}
.btn-box {
margin-bottom: 10px;
}
.btn-box {
margin-bottom: 10px;
}
.btn-radio {
/deep/.el-radio-button {
width: 33%;
}
.btn-radio {
/deep/.el-radio-button {
width: 33%;
}
/deep/.el-radio-button__inner {
width: 100%;
}
/deep/.el-radio-button__inner {
width: 100%;
}
}
}
.title {
font-weight: 900;
text-align: left;
width: 100%;
font-weight: 900;
text-align: left;
width: 100%;
.btnGroup {
float: right;
margin-right: 10px;
}
.btnGroup {
float: right;
margin-right: 10px;
}
}
.bind {
color: #008000;
margin-right: 5px;
cursor: pointer;
color: #008000;
margin-right: 5px;
cursor: pointer;
}
.unbind {
color: #FF0000;
cursor: pointer;
color: #ff0000;
cursor: pointer;
}
.legends {
text-align: right;
text-align: right;
}
.draw_desks {
position: relative;
width: 100%;
position: relative;
width: 100%;
}
.pwraper {
position: relative;
overflow: auto;
min-height: 300px;
margin-top: 10px;
position: relative;
overflow: auto;
min-height: 300px;
margin-top: 10px;
}
.dlist {
position: relative;
clear: both;
width: 100%;
position: relative;
clear: both;
width: 100%;
.ditem {
width: calc(50% - 10px);
float: left;
margin: 0 5px 8px 5px;
.ditem {
width: calc(50% - 10px);
float: left;
margin: 0 5px 8px 5px;
.dimg {
display: block;
width: 100%;
}
.dimg {
display: block;
width: 100%;
}
}
}
.dwrap {
position: relative;
position: relative;
}
.fwrap{
position: relative;
padding-left: 10px;
padding-top: 10px;
.fwrap {
position: relative;
padding-left: 10px;
padding-top: 10px;
}
.fwrap .dimg{
width: 100%;
.fwrap .dimg {
width: 100%;
}
.label-box{
position: absolute;
pointer-events: none;
left: 7px;
bottom:5px;
color:#f00
.label-box {
position: absolute;
pointer-events: none;
left: 7px;
bottom: 5px;
color: #f00;
}
.pview {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
src/views/queueManagement/channelManagement-副本/Painter.vue 0 → 100644
<template>
<div class="painter" ref="painter"></div>
</template>
<script>
import _ from 'underscore';
import zrender from 'zrender';
export default {
props: {
isEdit:Boolean,
cdata: {
type: Object,
default: {}
},
list:Array,
desk:Object
},
watch: {
cdata: {
immediate: true,
handler(nval) {
if(JSON.stringify(nval) == '{}'){
return false
}
setTimeout(()=>{
if(!_.isEmpty(nval))this.initZrender();
},500);
},
deep: true
}
},
data() {
return {
pointList: [],//当前绘制的图形点位列表
groupList: [], //图形数组
zr: {}, //绘图实例对象
baseColor: '#ff000075',
strokeColor: '#f00',
/*********************************/
fillColor: '#f00',
scaleVal: 10, //缩放
rotateVal: 0, //旋转角度
tempData: {},
/*********************************/
groupObj: {}
}
},
methods: {
initZrender() {
this.$nextTick(() => {
let client = document.querySelector('.painter').getBoundingClientRect();
this.zr = zrender.init(this.$refs.painter, {
renderer: 'canvas',
devicePixelRatio: 2,
width: client.width,
height: client.height
});
this.bindingEvt();
this.initialGroup();
})
},
initialGroup(){
let list = this.list
_.each(list,item=>{
let gdata = zrender.util.clone(item);
if(gdata.coordinate){
gdata.points = _.map(JSON.parse(gdata.coordinate),point=>{
let x = point.x*this.zr.getWidth()/1920;
let y = point.y*this.zr.getHeight()/1080;
return [x,y];
});
gdata.desk = item;
this.createGroup(gdata,true);
}
})
},
bindingEvt() {
let that = this;
let group;
this.zr.on('click', evt => {
if(!this.desk||_.isEmpty(this.desk)){
return this.$message({
showClose: true,
type: "warning",
message: '请先点击选择通道'
})
}
this.$emit('start',this.desk);
let point = [evt.event.zrX, evt.event.zrY];
this.pointList.push(point);
if (this.pointList.length == 1) { //第一次点击，创建Group
let points = zrender.util.clone(this.pointList);
group = this.createGroup({ points, fill: that.baseColor,desk:this.desk});
}
this.drawPolyline(group, this.pointList);
})
this.zr.on('mousemove', evt => {
if (this.pointList.length == 0) return false;
let point = [evt.event.zrX, evt.event.zrY];
this.drawPolyline(group, this.pointList.concat([point]));
});
},
drawPolyline(group, points) {
group.polyline.setShape({
points: points
});
group.points = zrender.util.clone(points);
},
createGroup(gdata,isFull=false) {
let that = this;
let points = gdata.points;
let fill = gdata.fill;
let position = gdata.position;
/*******************************/
let group = new zrender.Group({
complete: false,
position: position || [0, 0]
});
if(isFull){
group.points = points;
}
group.desk = gdata.desk;
group.cdata = this.cdata;
group.zr = this.zr;
let polyline = this.createPolyline({
stroke: that.strokeColor,
fill: fill,
points: points
})
group.id = gdata.id || Date.now().toString(36);
group.add(polyline);
group.polyline = polyline;
group.fill = gdata.fill;
group.data = gdata;
if (this.isEdit && points.length == 1) {
let circle = that.createCircle(group, points[0]);
group.add(circle)
} else if(isFull){
this.drawText(group, false);
}
group.on('click', function (evt) {
if (!that.isEdit) {
evt.cancelBubble = true;
return false;
}
if(group.complete){
that.$emit('gclick',group);
evt.cancelBubble = true;
return false;
}
if (that.pointList.length == 1) {
//evt.cancelBubble = true;
}
});
let action = this.$refs.action;
/*action.onmouseleave = ()=>{
action.style.display = 'none'
}*/
group.on('contextmenu', function (evt) {
if (!that.isEdit) {
evt.stop();
return false
}
if (that.pointList.length > 0) {
evt.stop();
return false;
}
action.style.display = 'block';
action.style.left = (evt.offsetX - 5) + 'px'
action.style.top = (evt.offsetY - 5) + 'px'
evt.stop();
that.setCurrentGroup(this);
return false;
})
this.zr.add(group);
this.groupList.push(group);
return group;
},
createCircle(group, point) {
let that = this;
let circle = new zrender.Circle({
style: {
fill: 'transparent',
stroke: '#f00',
lineWidth: 2
},
shape: {
cx: point[0],
cy: point[1],
r: 10
}
});
circle.on('click', evt => {
evt.cancelBubble = true;
that.pointList.push(that.pointList[0]);
group.remove(circle);
if (that.pointList.length > 3) {
this.drawPolyline(group, that.pointList);
this.drawText(group,true);
} else {
this.zr.remove(group)
}
that.pointList = [];
});
return circle;
},
createPolyline(params) {
let that = this;
return new zrender.Polyline({
x: 0,
y: 0,
origin: [0, 0],
//cursor:'move',
draggable: false,
style: {
stroke: params.stroke,
fill: params.fill || that.baseColor,
lineWidth: 3
},
shape: {
points: params.points,
smooth: 0.01
}
});
},
drawText(group,finish) {
let that = this,xPoints=[],yPoints=[];
_.each(group.points,item=>{
xPoints.push(item[0]);
yPoints.push(item[1]);
})
let [x, y] = [_.max(xPoints) - _.min(xPoints), _.max(yPoints) - _.min(yPoints)];
let client = group.getBoundingRect();
let content = `{name|${group.desk.name || ''}}`;
let text = new zrender.Text({
position: [client.x, client.y],
style: {
x: client.width / 2,
y: client.height / 2,
width: client.width,
height: client.height,
textAlign: 'center',
textVerticalAlign: 'middle',
//textShadowBlur: 3,
textShadowColor: '#893e95',
//textShadowOffsetX: 3,
//textShadowOffsetY: 3,
text: content,
fill: '#fff',
fontSize: 14,
fontWeight:600,
rich: {
name: {
textLineHeight: 16,
textFill: '#fff'
}
}
}
});
//text.setClipPath(curGroup.polyline)
//this.setDragaAble(text)
group.add(text);
group.text = text;
group.complete = true;//图像已经绘制完毕
group.polyline.attr({
origin: [client.x + client.width / 2, client.y + client.height / 2]
});
if (that.isEdit) {
that.setDragaAble(group);
}
this.$emit('finish',group);
},
setCurrentGroup(group) {
this.groupObj = _.find(this.groupList, item => {
return item.id == group.id;
});
this.fillColor = this.groupObj.polyline.style.fill;
},
setDragaAble(el, popup) {
let isDown = false,
downPoint = [],
initPoint = [];
el.on('mousedown', evt => {
isDown = true;
evt.cancelBubble = true;
downPoint = [evt.event.zrX, evt.event.zrY];
initPoint = zrender.util.clone(el.position);
evt.cancelBubble = true;
});
el.on('mousemove', evt => {
if (isDown) {
evt.cancelBubble = true;
let pos = [evt.event.zrX - downPoint[0], evt.event.zrY - downPoint[1]];
el.attr('position', [initPoint[0] + pos[0], initPoint[1] + pos[1]]);
}
});
el.on('mouseup', evt => {
evt.cancelBubble = true;
isDown = false;
});
this.zr.on('mouseup', function () {
isDown = false;
})
},
}
}
</script>
<style scoped lang="less">
.painter {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
src/views/queueManagement/channelManagement-副本/addDesk.vue 0 → 100644
<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>
src/views/queueManagement/channelManagement-副本/index.vue 0 → 100644
<template>
<div class="queueManagementContainer clerk-wrapper">
<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-select v-model="searchForm.areaId" :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>
<el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{ $t('button.search')}}</el-button>
</el-form-item>
<div class="btns">
<el-button type="primary" size="mini" class="manage-add-btn fl-btn" @click="addDesk">{{$t('button.groupAdd')}}</el-button>
</div>
</el-form>
</div>
<el-row class="manage-content">
<el-col :span="24" class="treeMenu boxShadow">
<el-table ref="singleTable" @row-click="setCurrent" :data="tableData" :max-height="tableHeight" :highlight-current-row='true'
style="width: 100%;" v-loading="loading" 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.laneName')" align="center" prop="name"></el-table-column>
<el-table-column :label="$t('table.channelCode')" align="center" prop="code"></el-table-column>
<el-table-column :label="$t('table.counterType')" :formatter="formatCounterType" align="center" prop="counterType"></el-table-column>
<el-table-column :label="$t('table.areaName')" :formatter="formatArea" align="center" prop="areaId"></el-table-column>
<el-table-column :label="$t('table.operate')" align="center" width="200">
<template slot-scope="scope">
<el-button type="text" class="tab-btn" @click="drawDesk(scope.row)">{{$t('button.draw')}}</el-button>
<el-button type="text" class="tab-btn" @click="editDesk(scope.row)">{{$t('button.edit')}}</el-button>
<el-button type="text" class="tab-btn" @click="delDesk(scope.row)">{{$t('button.delete')}}</el-button>
<!-- <span class="bind" @click="drawDesk(scope.row)">{{$t('button.draw')}}</span>
<span class="bind" @click="editDesk(scope.row)">{{$t('button.edit')}}</span>
<span class="unbind" @click="delDesk(scope.row)">{{$t('button.delete')}}</span> -->
</template>
</el-table-column>
</el-table>
</el-col>
<!-- <el-col :span="14" class="personInfo">
<ul class="legends">
<el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button size="mini" type="primary" @click="saveData">{{$t('button.saveDrawing')}}</el-button>
</ul>
<div class="draw_desks">
<el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;">
<div class="fwrap"></div>
</li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="fwrap">
<img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }"/>
<div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</li>
</ul>
</el-row>
</div>
</el-col> -->
</el-row>
<add-desk-dialog ref="addDeskDialog"></add-desk-dialog>
<el-dialog :title="$t('button.draw')" class="manage-dialog dialog_lj" width="80%" :visible.sync="drawDialogVisible" :close-on-click-modal="false" v-if="drawDialogVisible" @close="drawDialogVisible=false">
<!-- <ul class="legends">
<el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button size="mini" type="primary" @click="saveData">{{$t('button.saveDrawing')}}</el-button>
</ul> -->
<div class="draw_desks boxShadow">
<el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;">
<div class="fwrap"></div>
</li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="fwrap">
<img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }"/>
<div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</li>
</ul>
</el-row>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="drawDialogVisible = false" class="dialog-btn">{{ $t('dialog.cancel') }}</el-button>
<el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button type="primary" @click="saveData()" class="dialog-btn dialog-confirm-btn">
{{ $t('button.saveDrawing') }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import _ from 'underscore';
import Painter from './Painter';
import addDeskDialog from "./addDesk";
export default {
data() {
return {
mallListForTerm:[],
searchForm:{
mallId:'',
areaId:'',
},
areaListData:[],
ptype:1,
floorImg:'',
tableData: [],
loading: true,
canvasList:[],
currentRow:{},
groupList:[],
isPainter:false,
chooseList:[],
counterTypeData:[],
// 画图
drawDialogVisible:false,
};
},
components: {
"add-desk-dialog": addDeskDialog,
'Painter': Painter
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
}
},
mounted() {
this.getCounterType()
this.getMallListForTerm();
},
methods: {
getCounterType(){
this.$api.base.dataDic({
type: 'counterType'
}).then(res => {
this.counterTypeData = res.data.data.map(item=>{
if(localStorage.getItem('lang') == 'en_US'){
item.value = item.valueEn;
}
return item;
});
})
},
// 广场
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(this.searchForm.mallId);
})
},
mallChange(val){
this.setSessionLocal("mallId", val);
this.getAreaList(val)
},
// 区域
getAreaList(val){
this.areaListData = [];
this.$api.queueManagementApi.getAreaList({
mallId: val,
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.areaId = result.data.list[0].id
this.floorImg =window._vionConfig.picUrl + result.data.list[0].pic
this.areaListData = result.data.list;
}
this.getTableData()
}
})
},
formatArea(row, column, cellValue){
let result = ''
this.areaListData.forEach(item=>{
if(item.id==cellValue){
result = item.name
}
})
return result
},
formatCounterType(row, column, cellValue){
let result = ''
this.counterTypeData.forEach(item=>{
if(item.key==cellValue){
result = item.value
}
})
return result
},
areaChange(val){
this.getTableData(this.searchForm.mallId)
this.areaListData.forEach(item=>{
if(item.id==val){
this.floorImg =window._vionConfig.picUrl + item.pic
}
})
},
// 列表数据
getTableData() {
this.loading = true;
this.tableData = [];
this.chooseList = []
this.$api.queueManagementApi.getChannelList({
areaId: this.searchForm.areaId,
pageNum: 1,
pageSize: 9999999
}).then(res => {
let result = res.data;
this.loading = false;
if(result.code==200){
this.tableData = result.data.list;
if(this.tableData.length>0){
this.tableData.forEach(item=>{
item.picUrl = this.floorImg;
})
this.chooseList.push(result.data.list[0])
}
}
})
},
searchFun() {
this.getTableData();
},
// 新增
addDesk() {
this.$refs.addDeskDialog.dialogInit('add');
},
editDesk(data){
this.$refs.addDeskDialog.dialogInit('edit',data);
},
delDesk(data){
this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
confirmButtonText: this.$t("message.confirm"),
cancelButtonText: this.$t("message.cancel"),
type: "warning",
}).then(() => {
this.$api.queueManagementApi.deleteChannel({id:data.id}).then(res=>{
let result = res.data;
if(result.code==200){
this.$message({
message: result.msg,
type: 'success'
});
this.getTableData();
}else{
this.$message({
message: result.msg,
type: 'error'
});
}
})
})
},
handleCurrentChange(val) {
this.currentRow = val;
},
setCurrent(row,column,event) {
this.$refs.singleTable.setCurrentRow(row);
},
drawDesk(row){
this.drawDialogVisible = true;
this.currentRow = row;
this.drawFloorMap()
},
drawFloorMap(){
this.canvasList = [];
let that = this;
let canvasList = [];
_.each(this.chooseList,(item,index)=>{
let img = new Image();
img.src = item.picUrl;
img.onload = function(){
item.width = this.width;
item.height = this.height;
canvasList.push(item);
that.$nextTick(()=>{
item.cwidth = document.querySelector('.fwrap').getBoundingClientRect().width;
item.cheight = item.cwidth*item.height/item.width;
that.canvasList = canvasList;
});
}
})
},
startDesk(data){
let index = _.findIndex(this.groupList,(item=>{
return item.desk.id == data.id;
}));
if(index>-1){
this.groupList[index].zr.remove(this.groupList[index]);
this.groupList.splice(index,1);
if(data.coordinate){
this.delCoord(data);
}
}else{
return false;
}
},
clearDesk(){
if(_.isEmpty(this.currentRow)){
return this.$message({
showClose: true,
type: "warning",
message: this.$t('tips.selectChannel')
})
}
this.startDesk(this.currentRow);
},
finishDesk(data){
let index = _.findIndex(this.groupList,(item=>{
return item.desk.id == data.desk.id;
}));
if(index>-1){
this.groupList.splice(index,1);
}
this.groupList.push(data);
},
groupClick(group){
this.$refs.singleTable.setCurrentRow(group.desk);
},
// 保存
saveData() {
let ajaxs = [];
if(this.groupList.length==0){
return this.$message({
showClose: true,
type: "warning",
message: this.$t('tips.drawChannelMap')
})
}
_.each(this.groupList,group=>{
ajaxs.push(this.editCoord(group));
});
Promise.all(ajaxs).then(res=>{
this.drawDialogVisible = false;
this.getTableData();
this.$message({
showClose: true,
type: "success",
message: this.$t('message.labelSuccess')
})
})
},
delCoord(data){
data.coordinate='';
this.$api.queueManagementApi.updateChannel(data).then(res=>{
let result = res.data;
if(result.code==200){
this.$message({
message: result.msg,
type: 'success'
});
this.getTableData();
}else{
this.$message({
message: result.msg,
type: 'error'
});
}
})
},
editCoord(group){
let {position,points,__zr,cdata,desk} = group;
let [width,height] = [__zr.getWidth(),__zr.getHeight()];
let coordinate = _.map(points,point=>{
return {
'x':parseInt(1920*(point[0]+position[0])/width),
'y':parseInt(1080*(point[1]+position[1])/height),
}
});
desk.coordinate = JSON.stringify(coordinate);
let params = Object.assign({},desk);
return this.$api.queueManagementApi.updateChannel(params);
},
}
};
</script>
<style scoped lang="less">
.queueManagementContainer{
height: calc(100% - 120px);
}
.manage-content {
height: calc(100% - 100px);
}
.bind {
color: #0069ff;
margin-right: 5px;
cursor: pointer;
}
.manage-container {
height: 100%;
}
.treeMenu {
padding-right: 5px;
border-right: 3px solid #f0f3f9;
height: 100%;
}
.unbind {
color: #0069ff;
cursor: pointer;
}
.legends {
text-align: right;
}
.draw_desks {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.pwraper {
position: relative;
overflow: auto;
padding-left: 10px;
min-height: 300px;
margin-top: 10px;
}
.fwrap{
position: relative;
width: 100%;
padding-top: 10px;
}
.fwrap .dimg{
width: 100%;
height: 400px;
}
.pview {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.btns{
margin-right: 20px;
margin-top: 7px;
}
</style>
src/views/queueManagement/channelManagement/index.vue
<template>
<div class="queueManagementContainer clerk-wrapper">
<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-select v-model="searchForm.areaId" :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>
<el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{ $t('button.search')}}</el-button>
</el-form-item>
<div class="btns">
<el-button type="primary" size="mini" class="manage-add-btn fl-btn" @click="addDesk">{{$t('button.groupAdd')}}</el-button>
</div>
</el-form>
<div class="queueManagementContainer clerk-wrapper">
<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-select v-model="searchForm.areaId" :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>
<el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{ $t('button.search')}}</el-button>
</el-form-item>
</el-form>
</div>
<div class="aiot_alone_long">
<div class="aiot_left">
<div style="margin:0 0 10px 10px">
<el-button type="primary" size="mini" class="manage-add-btn fl-btn" @click="addDesk">{{$t('button.groupAdd')}}</el-button>
</div>
<el-row class="manage-content">
<el-col :span="24" class="treeMenu boxShadow">
<el-table ref="singleTable" @row-click="setCurrent" :data="tableData" :max-height="tableHeight" :highlight-current-row='true'
style="width: 100%;" v-loading="loading" 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.laneName')" align="center" prop="name"></el-table-column>
<el-table-column :label="$t('table.channelCode')" align="center" prop="code"></el-table-column>
<el-table-column :label="$t('table.counterType')" :formatter="formatCounterType" align="center" prop="counterType"></el-table-column>
<el-table-column :label="$t('table.areaName')" :formatter="formatArea" align="center" prop="areaId"></el-table-column>
<el-table-column :label="$t('table.operate')" align="center" width="200">
<template slot-scope="scope">
<el-button type="text" class="tab-btn" @click="drawDesk(scope.row)">{{$t('button.draw')}}</el-button>
<el-button type="text" class="tab-btn" @click="editDesk(scope.row)">{{$t('button.edit')}}</el-button>
<el-button type="text" class="tab-btn" @click="delDesk(scope.row)">{{$t('button.delete')}}</el-button>
<!-- <span class="bind" @click="drawDesk(scope.row)">{{$t('button.draw')}}</span>
<el-col :span="24" class="treeMenu boxShadow">
<el-table ref="singleTable" @row-click="setCurrent" @current-change="handleCurrentChange" :data="tableData" :max-height="tableHeight-18" :highlight-current-row='true' style="width: 100%;" v-loading="loading" header-row-class-name="manage-tab-head">
<el-table-column :label="$t('table.laneName')" align="center" prop="name"></el-table-column>
<el-table-column width="200" :label="$t('table.counterType')" :formatter="formatCounterType" align="center" prop="counterType"></el-table-column>
<el-table-column :label="$t('table.operate')" align="center">
<template slot-scope="scope">
<!-- <el-button type="text" class="tab-btn" @click="drawDesk(scope.row)">{{$t('button.draw')}}</el-button> -->
<el-button type="text" class="tab-btn" @click="editDesk(scope.row)">{{$t('button.edit')}}</el-button>
<el-button style="color:red" type="text" class="tab-btn" @click="delDesk(scope.row)">{{$t('button.delete')}}</el-button>
<!-- <span class="bind" @click="drawDesk(scope.row)">{{$t('button.draw')}}</span>
<span class="bind" @click="editDesk(scope.row)">{{$t('button.edit')}}</span>
<span class="unbind" @click="delDesk(scope.row)">{{$t('button.delete')}}</span> -->
</template>
</el-table-column>
</el-table>
</el-col>
<!-- <el-col :span="14" class="personInfo">
<ul class="legends">
<el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button size="mini" type="primary" @click="saveData">{{$t('button.saveDrawing')}}</el-button>
</ul>
<div class="draw_desks">
<el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;">
<div class="fwrap"></div>
</li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="fwrap">
<img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }"/>
<div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</li>
</ul>
</el-row>
</div>
</el-col> -->
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<add-desk-dialog ref="addDeskDialog"></add-desk-dialog>
<el-dialog :title="$t('button.draw')" class="manage-dialog dialog_lj" width="80%" :visible.sync="drawDialogVisible" :close-on-click-modal="false" v-if="drawDialogVisible" @close="drawDialogVisible=false">
<!-- <ul class="legends">
</div>
<div class="aiot_right">
<el-col :span="24" class="personInfo">
<ul class="legends">
<el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button size="mini" type="primary" @click="saveData">{{$t('button.saveDrawing')}}</el-button>
</ul>
<div class="draw_desks">
<el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight-18 + 'px' }">
<ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;">
<div class="fwrap"></div>
</li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index" style="margin:10px 10px 0 0">
<div class="fwrap">
<img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }" />
<div class="label-box">
<p>{{ $t('table.laneName') + ': ' + item.name }}</p>
<!-- <p>{{ $t('table.deviceNum') + ': ' + item.serialnum }}</p> -->
</div>
<div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</li>
</ul>
</el-row>
</div>
</el-col>
</div>
</div>
<add-desk-dialog ref="addDeskDialog"></add-desk-dialog>
<!-- <el-dialog :title="$t('button.draw')" class="manage-dialog dialog_lj" width="80%" :visible.sync="drawDialogVisible" :close-on-click-modal="false" v-if="drawDialogVisible" @close="drawDialogVisible=false">
<ul class="legends">
<el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button size="mini" type="primary" @click="saveData">{{$t('button.saveDrawing')}}</el-button>
</ul> -->
<div class="draw_desks boxShadow">
<el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;">
<div class="fwrap"></div>
</li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="fwrap">
<img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }"/>
<div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</li>
</ul>
</el-row>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="drawDialogVisible = false" class="dialog-btn">{{ $t('dialog.cancel') }}</el-button>
<el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button type="primary" @click="saveData()" class="dialog-btn dialog-confirm-btn">
{{ $t('button.saveDrawing') }}</el-button>
</div>
</el-dialog>
</div>
</ul>
<div class="draw_desks boxShadow">
<el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;">
<div class="fwrap"></div>
</li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="fwrap">
<img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }" />
<div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div>
</div>
</li>
</ul>
</el-row>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="drawDialogVisible = false" class="dialog-btn">{{ $t('dialog.cancel') }}</el-button>
<el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button type="primary" @click="saveData()" class="dialog-btn dialog-confirm-btn">
{{ $t('button.saveDrawing') }}</el-button>
</div>
</el-dialog> -->
</div>
</template>
<script>
import _ from 'underscore';
import Painter from './Painter';
import _ from "underscore";
import Painter from "./Painter";
import addDeskDialog from "./addDesk";
export default {
data() {
return {
mallListForTerm:[],
searchForm:{
mallId:'',
areaId:'',
},
areaListData:[],
ptype:1,
floorImg:'',
tableData: [],
loading: true,
canvasList:[],
currentRow:{},
groupList:[],
isPainter:false,
chooseList:[],
counterTypeData:[],
// 画图
drawDialogVisible:false,
};
data() {
return {
mallListForTerm: [],
searchForm: {
mallId: "",
areaId: "",
},
areaListData: [],
ptype: 1,
floorImg: "",
tableData: [],
loading: true,
canvasList: [],
currentRow: {},
groupList: [],
isPainter: false,
chooseList: [],
counterTypeData: [],
// 画图
drawDialogVisible: false,
};
},
components: {
"add-desk-dialog": addDeskDialog,
Painter: Painter,
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
},
components: {
"add-desk-dialog": addDeskDialog,
'Painter': Painter
},
mounted() {
this.getCounterType();
this.getMallListForTerm();
},
methods: {
getCounterType() {
this.$api.base
.dataDic({
type: "counterType",
})
.then((res) => {
this.counterTypeData = res.data.data.map((item) => {
if (localStorage.getItem("lang") == "en_US") {
item.value = item.valueEn;
}
return item;
});
});
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
}
// 广场
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(this.searchForm.mallId);
});
},
mounted() {
this.getCounterType()
this.getMallListForTerm();
mallChange(val) {
this.setSessionLocal("mallId", val);
this.getAreaList(val);
},
methods: {
getCounterType(){
this.$api.base.dataDic({
type: 'counterType'
}).then(res => {
this.counterTypeData = res.data.data.map(item=>{
if(localStorage.getItem('lang') == 'en_US'){
item.value = item.valueEn;
}
return item;
});
})
},
// 广场
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(this.searchForm.mallId);
})
},
mallChange(val){
this.setSessionLocal("mallId", val);
this.getAreaList(val)
},
// 区域
getAreaList(val){
this.areaListData = [];
this.$api.queueManagementApi.getAreaList({
mallId: val,
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.areaId = result.data.list[0].id
this.floorImg =window._vionConfig.picUrl + result.data.list[0].pic
this.areaListData = result.data.list;
}
this.getTableData()
}
})
},
formatArea(row, column, cellValue){
let result = ''
this.areaListData.forEach(item=>{
if(item.id==cellValue){
result = item.name
}
})
return result
},
formatCounterType(row, column, cellValue){
let result = ''
this.counterTypeData.forEach(item=>{
if(item.key==cellValue){
result = item.value
}
})
return result
},
areaChange(val){
this.getTableData(this.searchForm.mallId)
this.areaListData.forEach(item=>{
if(item.id==val){
this.floorImg =window._vionConfig.picUrl + item.pic
}
})
},
// 列表数据
getTableData() {
this.loading = true;
this.tableData = [];
this.chooseList = []
this.$api.queueManagementApi.getChannelList({
areaId: this.searchForm.areaId,
pageNum: 1,
pageSize: 9999999
}).then(res => {
let result = res.data;
this.loading = false;
if(result.code==200){
this.tableData = result.data.list;
if(this.tableData.length>0){
this.tableData.forEach(item=>{
item.picUrl = this.floorImg;
})
this.chooseList.push(result.data.list[0])
}
}
})
},
searchFun() {
this.getTableData();
},
// 新增
addDesk() {
this.$refs.addDeskDialog.dialogInit('add');
},
editDesk(data){
this.$refs.addDeskDialog.dialogInit('edit',data);
},
delDesk(data){
this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
confirmButtonText: this.$t("message.confirm"),
cancelButtonText: this.$t("message.cancel"),
type: "warning",
}).then(() => {
this.$api.queueManagementApi.deleteChannel({id:data.id}).then(res=>{
let result = res.data;
if(result.code==200){
this.$message({
message: result.msg,
type: 'success'
});
this.getTableData();
}else{
this.$message({
message: result.msg,
type: 'error'
});
}
})
})
},
handleCurrentChange(val) {
this.currentRow = val;
},
setCurrent(row,column,event) {
this.$refs.singleTable.setCurrentRow(row);
},
drawDesk(row){
this.drawDialogVisible = true;
this.currentRow = row;
this.drawFloorMap()
},
drawFloorMap(){
this.canvasList = [];
let that = this;
let canvasList = [];
_.each(this.chooseList,(item,index)=>{
let img = new Image();
img.src = item.picUrl;
img.onload = function(){
item.width = this.width;
item.height = this.height;
canvasList.push(item);
that.$nextTick(()=>{
item.cwidth = document.querySelector('.fwrap').getBoundingClientRect().width;
item.cheight = item.cwidth*item.height/item.width;
that.canvasList = canvasList;
});
}
})
},
startDesk(data){
let index = _.findIndex(this.groupList,(item=>{
return item.desk.id == data.id;
}));
if(index>-1){
this.groupList[index].zr.remove(this.groupList[index]);
this.groupList.splice(index,1);
if(data.coordinate){
this.delCoord(data);
}
}else{
return false;
}
},
clearDesk(){
if(_.isEmpty(this.currentRow)){
return this.$message({
showClose: true,
type: "warning",
message: this.$t('tips.selectChannel')
})
// 区域
getAreaList(val) {
this.areaListData = [];
this.$api.queueManagementApi
.getAreaList({
mallId: val,
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.areaId = result.data.list[0].id;
this.floorImg =
window._vionConfig.picUrl + result.data.list[0].pic;
this.areaListData = result.data.list;
}
this.startDesk(this.currentRow);
},
finishDesk(data){
let index = _.findIndex(this.groupList,(item=>{
return item.desk.id == data.desk.id;
}));
if(index>-1){
this.groupList.splice(index,1);
this.getTableData();
}
});
},
formatArea(row, column, cellValue) {
let result = "";
this.areaListData.forEach((item) => {
if (item.id == cellValue) {
result = item.name;
}
});
return result;
},
formatCounterType(row, column, cellValue) {
let result = "";
this.counterTypeData.forEach((item) => {
if (item.key == cellValue) {
result = item.value;
}
});
return result;
},
areaChange(val) {
this.getTableData(this.searchForm.mallId);
this.areaListData.forEach((item) => {
if (item.id == val) {
this.floorImg = window._vionConfig.picUrl + item.pic;
}
});
},
// 列表数据
getTableData() {
this.loading = true;
this.tableData = [];
this.chooseList = [];
this.$api.queueManagementApi
.getChannelList({
areaId: this.searchForm.areaId,
pageNum: 1,
pageSize: 9999999,
})
.then((res) => {
let result = res.data;
this.loading = false;
if (result.code == 200) {
this.tableData = result.data.list;
if (this.tableData.length > 0) {
this.tableData.forEach((item) => {
item.picUrl = this.floorImg;
});
this.chooseList.push(result.data.list[0]);
}
this.groupList.push(data);
},
groupClick(group){
this.$refs.singleTable.setCurrentRow(group.desk);
},
// 保存
saveData() {
let ajaxs = [];
if(this.groupList.length==0){
return this.$message({
showClose: true,
type: "warning",
message: this.$t('tips.drawChannelMap')
})
this.drawFloorMap();
}
});
},
searchFun() {
this.getTableData();
},
// 新增
addDesk() {
this.$refs.addDeskDialog.dialogInit("add");
},
editDesk(data) {
this.$refs.addDeskDialog.dialogInit("edit", data);
},
delDesk(data) {
this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
confirmButtonText: this.$t("message.confirm"),
cancelButtonText: this.$t("message.cancel"),
type: "warning",
}).then(() => {
this.$api.queueManagementApi
.deleteChannel({ id: data.id })
.then((res) => {
let result = res.data;
if (result.code == 200) {
this.$message({
message: result.msg,
type: "success",
});
this.getTableData();
} else {
this.$message({
message: result.msg,
type: "error",
});
}
_.each(this.groupList,group=>{
ajaxs.push(this.editCoord(group));
});
Promise.all(ajaxs).then(res=>{
this.drawDialogVisible = false;
this.getTableData();
this.$message({
showClose: true,
type: "success",
message: this.$t('message.labelSuccess')
})
})
},
delCoord(data){
data.coordinate='';
this.$api.queueManagementApi.updateChannel(data).then(res=>{
let result = res.data;
if(result.code==200){
this.$message({
message: result.msg,
type: 'success'
});
this.getTableData();
}else{
this.$message({
message: result.msg,
type: 'error'
});
}
})
},
editCoord(group){
let {position,points,__zr,cdata,desk} = group;
let [width,height] = [__zr.getWidth(),__zr.getHeight()];
let coordinate = _.map(points,point=>{
return {
'x':parseInt(1920*(point[0]+position[0])/width),
'y':parseInt(1080*(point[1]+position[1])/height),
}
});
desk.coordinate = JSON.stringify(coordinate);
let params = Object.assign({},desk);
return this.$api.queueManagementApi.updateChannel(params);
},
}
});
});
},
handleCurrentChange(val) {
this.currentRow = val;
},
setCurrent(row, column, event) {
this.$refs.singleTable.setCurrentRow(row);
},
drawDesk(row) {
this.drawDialogVisible = true;
this.currentRow = row;
this.drawFloorMap();
},
drawFloorMap() {
this.canvasList = [];
let that = this;
let canvasList = [];
_.each(this.chooseList, (item, index) => {
let img = new Image();
img.src = item.picUrl;
img.onload = function () {
item.width = this.width;
item.height = this.height;
canvasList.push(item);
that.$nextTick(() => {
item.cwidth = document
.querySelector(".fwrap")
.getBoundingClientRect().width;
item.cheight = (item.cwidth * item.height) / item.width;
that.canvasList = canvasList;
console.log(that.canvasList);
});
};
});
},
startDesk(data) {
let index = _.findIndex(this.groupList, (item) => {
return item.desk.id == data.id;
});
if (index > -1) {
this.groupList[index].zr.remove(this.groupList[index]);
this.groupList.splice(index, 1);
if (data.coordinate) {
this.delCoord(data);
}
} else {
return false;
}
},
clearDesk() {
if (_.isEmpty(this.currentRow)) {
return this.$message({
showClose: true,
type: "warning",
message: this.$t("tips.selectChannel"),
});
}
this.startDesk(this.currentRow);
},
finishDesk(data) {
let index = _.findIndex(this.groupList, (item) => {
return item.desk.id == data.desk.id;
});
if (index > -1) {
this.groupList.splice(index, 1);
}
this.groupList.push(data);
},
groupClick(group) {
this.$refs.singleTable.setCurrentRow(group.desk);
},
// 保存
saveData() {
let ajaxs = [];
if (this.groupList.length == 0) {
return this.$message({
showClose: true,
type: "warning",
message: this.$t("tips.drawChannelMap"),
});
}
_.each(this.groupList, (group) => {
ajaxs.push(this.editCoord(group));
});
Promise.all(ajaxs).then((res) => {
this.drawDialogVisible = false;
this.getTableData();
this.$message({
showClose: true,
type: "success",
message: this.$t("message.labelSuccess"),
});
});
},
delCoord(data) {
data.coordinate = "";
this.$api.queueManagementApi.updateChannel(data).then((res) => {
let result = res.data;
if (result.code == 200) {
this.$message({
message: result.msg,
type: "success",
});
this.getTableData();
} else {
this.$message({
message: result.msg,
type: "error",
});
}
});
},
editCoord(group) {
let { position, points, __zr, cdata, desk } = group;
let [width, height] = [__zr.getWidth(), __zr.getHeight()];
let coordinate = _.map(points, (point) => {
return {
x: parseInt((1920 * (point[0] + position[0])) / width),
y: parseInt((1080 * (point[1] + position[1])) / height),
};
});
desk.coordinate = JSON.stringify(coordinate);
let params = Object.assign({}, desk);
return this.$api.queueManagementApi.updateChannel(params);
},
},
};
</script>
<style scoped lang="less">
.queueManagementContainer{
height: calc(100% - 120px);
}
.label-box {
position: absolute;
pointer-events: none;
left: 7px;
bottom: 5px;
color: #f00;
}
.dwrap {
position: relative;
}
.dlist {
position: relative;
clear: both;
width: 100%;
}
.ditem {
width: calc(50% - 10px);
float: left;
margin: 0 5px 8px 5px;
.dimg {
display: block;
width: 100%;
}
}
.aiot_alone_long {
display: flex;
.aiot_left {
width: 30%;
}
.aiot_right {
width: 70%;
padding: 0 10px 10px 0;
}
}
.queueManagementContainer {
height: calc(100% - 120px);
}
.manage-content {
height: calc(100% - 100px);
// height: calc(100% - 100px);
}
.bind {
color: #0069ff;
margin-right: 5px;
cursor: pointer;
color: #0069ff;
margin-right: 5px;
cursor: pointer;
}
.manage-container {
height: 100%;
height: 100%;
}
.treeMenu {
padding-right: 5px;
border-right: 3px solid #f0f3f9;
height: 100%;
padding-right: 5px;
border-right: 3px solid #f0f3f9;
height: 100%;
}
.unbind {
color: #0069ff;
cursor: pointer;
color: #0069ff;
cursor: pointer;
}
.legends {
text-align: right;
text-align: right;
}
.draw_desks {
position: relative;
width: 100%;
margin-bottom: 20px;
position: relative;
width: 100%;
margin-bottom: 20px;
}
.pwraper {
position: relative;
overflow: auto;
padding-left: 10px;
min-height: 300px;
margin-top: 10px;
position: relative;
overflow: auto;
padding-left: 10px;
min-height: 300px;
margin-top: 10px;
}
.fwrap{
position: relative;
width: 100%;
padding-top: 10px;
.fwrap {
position: relative;
width: 100%;
// margin-bottom: 10px;
}
.fwrap .dimg{
width: 100%;
height: 400px;
.fwrap .dimg {
width: 100%;
height: 400px;
}
.pview {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.btns{
margin-right: 20px;
margin-top: 7px;
.btns {
margin-right: 20px;
margin-top: 7px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!