Commit 527169c5 by tianlonglong

tll

1 parent 3f239696
This diff could not be displayed because it is too large.
<template> <template>
<div class="manage-container clerk-wrapper"> <div class="manage-container clerk-wrapper">
<el-row class="manage-head-wrapper"> <el-row class="manage-head-wrapper">
<el-col :span="20"> <el-col :span="20">
<!-- 广场 --> <!-- 广场 -->
<div class="manage-select-box"> <div class="manage-select-box">
<el-select v-model="mallVal" class="mall-opt" filterable placeholder="楼层" <el-select v-model="mallVal" class="mall-opt" filterable placeholder="楼层" @change="chooseMall(mallVal)">
@change="chooseMall(mallVal)"> <el-option v-for="item in mallOpt" :label="item.name" :value="item.id" :key="item.value">
<el-option v-for="item in mallOpt" :label="item.name" :value="item.id" :key="item.value"> </el-option>
</el-option> </el-select>
</el-select> </div>
</div> <!-- 楼层选择 -->
<!-- 楼层选择 --> <div class="manage-select-box floor-box">
<div class="manage-select-box floor-box"> <el-select v-model="floorVal" filterable :placeholder="$t('pholder.floorSelect')" @change="chooseFloor(floorVal)">
<el-select v-model="floorVal" filterable :placeholder="$t('pholder.floorSelect')" <el-option v-for="item in floorOpt" :key="item.id" :label="item.name" :value="item.id" />
@change="chooseFloor(floorVal)"> </el-select>
<el-option v-for="item in floorOpt" :key="item.id" :label="item.name" :value="item.id" /> </div>
</el-select> <el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{ $t('button.search')
</div>
<el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{ $t('button.search')
}} }}
</el-button> </el-button>
<!-- <el-button type="primary" class="search-btn" plain size="mini" @click="saveData">保存并应用 <!-- <el-button type="primary" class="search-btn" plain size="mini" @click="saveData">保存并应用
</el-button> --> </el-button> -->
</el-col> </el-col>
</el-row> </el-row>
<el-row class="manage-content"> <el-row class="manage-content">
<el-col :span="5" class="treeMenu"> <el-col :span="5" class="treeMenu">
<div v-show="floorVal" class="btn-box btn-radio"> <div v-show="floorVal" class="btn-box btn-radio">
<el-button type="primary" class="search-btn" plain size="mini" @click="addDesk">新增货架</el-button> <el-button type="primary" class="search-btn" plain size="mini" @click="addDesk">新增货架</el-button>
</div> </div>
<el-table ref="singleTable" @row-click="setCurrent" @current-change="handleCurrentChange" :data="tableData" :max-height="tableHeight" :show-header='false' :highlight-current-row='true' <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">
style="width: 100%;" v-loading="loading" header-row-class-name="manage-tab-head" > <el-table-column align="left" prop="name">
<el-table-column align="left" prop="name"> <template slot-scope="scope">
<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>
<p>{{ scope.row.name }}<span v-if="scope.row.doorway==1" style="color:#f00;margin-left:5px;">{{$t('asisTab.inOut')}}</span></p> </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="left" prop="bindType" width="80">
<el-table-column align="left" prop="bindType" width="80"> <template slot-scope="scope">
<template slot-scope="scope"> <span class="bind" @click="editDesk(scope.row)">编辑</span>
<span class="bind" @click="editDesk(scope.row)">编辑</span> <span class="unbind" @click="delDesk(scope.row)">删除</span>
<span class="unbind" @click="delDesk(scope.row)">删除</span> </template>
</template> </el-table-column>
</el-table-column> </el-table>
</el-table> <!-- <el-pagination class="treePage" small background :pageCount='4' layout="jumper, prev, pager, next" :total="total"
<!-- <el-pagination class="treePage" small background :pageCount='4' layout="jumper, prev, pager, next" :total="total"
@size-change="sizeChange" @current-change="currentChange"> @size-change="sizeChange" @current-change="currentChange">
</el-pagination> --> </el-pagination> -->
</el-col> </el-col>
<el-col :span="19" class="personInfo"> <el-col :span="19" class="personInfo">
<ul class="legends"> <ul class="legends">
<el-button size="mini" type="danger" @click="clearDesk">清除货架</el-button> <el-button size="mini" type="danger" @click="clearDesk">清除货架</el-button>
<el-button size="mini" type="primary" @click="saveData">保存绘图</el-button> <el-button size="mini" type="primary" @click="saveData">保存绘图</el-button>
</ul> </ul>
<div class="draw_desks"> <div class="draw_desks">
<el-row v-if="ptype==1" :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }"> <el-row v-if="ptype==1" :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist"> <ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;"> <li class="ditem" style="height:0;margin:0;">
<div class="dwrap"></div> <div class="dwrap"></div>
</li> </li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index"> <li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="dwrap"> <div class="dwrap">
<img class="dimg" :src="item.picUrl" /> <img class="dimg" :src="item.picUrl" />
<div class="label-box"> <div class="label-box">
<p>{{ $t('table.monitorSiteName') + ': ' + item.name }}</p> <p>{{ $t('table.monitorSiteName') + ': ' + item.name }}</p>
<p>{{ $t('table.deviceNum') + ': ' + item.serialnum }}</p> <p>{{ $t('table.deviceNum') + ': ' + item.serialnum }}</p>
</div> </div>
<div class="pview"> <div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter> <Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div> </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> -->
</div> </div>
</el-col> </li>
</el-row> </ul>
<add-desk-dialog ref="addDeskDialog" @submit="addField"></add-desk-dialog> </el-row>
</div> <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> </template>
<script> <script>
import _ from 'underscore'; import _ from "underscore";
import Painter from './Painter'; import Painter from "./Painter";
import addDeskDialog from "./addDesk"; import addDeskDialog from "./addDesk";
export default { 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 { return {
ptype:1, x: parseInt((1920 * (point[0] + position[0])) / width),
floorOpt: [], y: parseInt((1080 * (point[1] + position[1])) / height),
floorVal: '',
floorImg:'',
floorData:{},
mallName: "",
mallVal: null,
mallOpt: [],
tableData: [],
loading: true,
dataMsg: "",
gateList:[],
canvasList:[],
currentRow:{},
groupList:[],
}; };
});
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, getDeskList() {
'Painter': Painter this.$api.management
}, .getDeskList({
computed: { mallId: this.mallVal,
tableHeight() { floorId: this.floorVal,
const windowInnerHeight = window.innerHeight; page: 1,
return windowInnerHeight - windowInnerHeight * 0.24; pageNum: 999,
} })
.then((res) => {
this.tableData = res.data.data.list;
setTimeout(() => {
this.loading = false;
}, 500);
});
}, },
mounted() { // 列表数据
this.getMallList(); getTableData() {
this.dataMsg = this.$t("echartsTitle.loading"); 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){ getMallList() {
let index = _.findIndex(this.groupList,(item=>{ this.mallOpt = [];
return item.desk.id == data.id; this.mallVal = null;
})); this.mallName = "";
if(index>-1){ const storageMallVal = this.getSessionLocal("mallId");
this.groupList[index].zr.remove(this.groupList[index]); this.$api.base
this.groupList.splice(index,1); .mall(
if(data.coordinates){ {
this.delCoord(data); accountId: this.$cookie.get("accountId"),
} status_arr: "1,3",
}else{ },
return false; null,
} true
}, )
clearDesk(){ .then((res) => {
if(_.isEmpty(this.currentRow)){ let result = res.data.data;
return this.$message({ if (result.length > 0) {
showClose: true, this.mallOpt = result;
type: "warning", if (storageMallVal) {
message: '请先点击选择左侧货架' this.mallVal = storageMallVal - 0;
}) const matchedMall = result.find(
} (item) => item.id === this.mallVal
this.startDesk(this.currentRow); );
}, this.mallName = matchedMall.name;
finishDesk(data){ } else {
let index = _.findIndex(this.groupList,(item=>{ this.mallVal = result[0].id;
return item.desk.id == data.desk.id; this.setSessionLocal("mallId", this.mallVal);
})); this.mallName = result[0].name;
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.floorFetch(11);
this.$message({ })
showClose: true, .catch((err) => {
type: "success", console.log(err);
message: data.id?'修改成功':'添加成功' });
}); },
this.getDeskList(); chooseMall(mallId) {
this.$refs.addDeskDialog.addDialogClose(); this.setSessionLocal("mallId", mallId);
}) const matchedMall = this.mallOpt.find((item) => item.id == mallId);
this.mallName = matchedMall.name;
}, this.floorVal = "";
// 保存 this.floorImg = "";
saveData() { this.floorFetch();
let ajaxs = []; },
if(this.groupList.length==0){ // 楼层
return this.$message({ floorFetch() {
showClose: true, this.floorOpt = [];
type: "warning", this.floorVal = "";
message: '请先绘制货架图' this.floorImg = "";
}) this.$api.base
} .floor({
_.each(this.groupList,group=>{ mallId: this.mallVal,
ajaxs.push(this.editCoord(group)); status: 1,
}); })
Promise.all(ajaxs).then(res=>{ .then((data) => {
this.$message({ var result = data.data;
showClose: true, this.floorOpt = result.data;
type: "success", if (result.data.length) {
message: '保存成功' this.floorVal = result.data[0].id;
}) this.floorImg =
}) window._vionConfig.picUrl + result.data[0].floorPlan;
},
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.getTableData(); this.getTableData();
}, } else {
loadGateData() { this.tableData = [];
this.gateList = []; }
_.each(this.canvasList, item => { });
if (item.zr && item.zr.clear) { },
item.zr.clear(); chooseFloor(floorVal) {
} this.floorImg =
}) window._vionConfig.picUrl +
this.canvasList = []; _.findWhere(this.floorOpt, { id: floorVal }).floorPlan;
if (!this.floorVal) { this.getTableData();
return; },
} loadGateData() {
Promise.all([this.getGateList(), this.getShotList()]).then(res => { this.gateList = [];
this.gateList = _.map(res[0], item => { _.each(this.canvasList, (item) => {
let shot = _.findWhere(res[1], { gateId: item.id }); if (item.zr && item.zr.clear) {
if (shot) { item.zr.clear();
item.serialnum = shot.serialnum; }
item.deviceSerialnum = shot.deviceSerialnum; });
item.deviceId = shot.deviceId; this.canvasList = [];
//item.picUrl='https://store.keliuyun.com/images//snapshot/real/8F2B-3A9C-2A2D-6A06-01.jpg?t=1652495146'; if (!this.floorVal) {
item.picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.serialnum + ".jpg?t=" + Date.parse(new Date()) / 1000; return;
} }
item.coordinates && (item.coordinates = JSON.parse(item.coordinates)) Promise.all([this.getGateList(), this.getShotList()]).then((res) => {
return item; this.gateList = _.map(res[0], (item) => {
}) let shot = _.findWhere(res[1], { gateId: item.id });
this.drawJoinMap() if (shot) {
}); item.serialnum = shot.serialnum;
}, item.deviceSerialnum = shot.deviceSerialnum;
drawJoinMap(){ item.deviceId = shot.deviceId;
this.loading = false; //item.picUrl='https://store.keliuyun.com/images//snapshot/real/8F2B-3A9C-2A2D-6A06-01.jpg?t=1652495146';
let that = this; item.picUrl =
let canvasList = []; window._vionConfig.picUrl +
_.each(this.gateList.reverse(),(item,index)=>{ "/snapshot/real/" +
if(item.picUrl){ item.serialnum +
let img = new Image(); ".jpg?t=" +
img.src = item.picUrl; Date.parse(new Date()) / 1000;
img.onload = function(){ }
item.width = this.width; item.coordinates && (item.coordinates = JSON.parse(item.coordinates));
item.height = this.height; return item;
canvasList.push(item); });
that.$nextTick(()=>{ this.drawJoinMap();
item.cwidth = document.querySelector('.dwrap').getBoundingClientRect().width; });
item.cheight = item.cwidth*item.height/item.width; },
that.canvasList = canvasList; drawJoinMap() {
}); this.loading = false;
} let that = this;
} let canvasList = [];
}) _.each(this.gateList.reverse(), (item, index) => {
}, if (item.picUrl) {
drawFloorMap(){ let img = new Image();
let that = this; img.src = item.picUrl;
let floorData = {}; img.onload = function () {
let img = new Image(); item.width = this.width;
img.src = this.floorImg; item.height = this.height;
img.onload = function(){ canvasList.push(item);
floorData.width = this.width; that.$nextTick(() => {
floorData.height = this.height; item.cwidth = document
that.$nextTick(()=>{ .querySelector(".dwrap")
floorData.cwidth = document.querySelector('.pview').getBoundingClientRect().width; .getBoundingClientRect().width;
floorData.cheight = floorData.cwidth*floorData.height/floorData.width; item.cheight = (item.cwidth * item.height) / item.width;
that.floorData = floorData; that.canvasList = canvasList;
});
}
},
/*獲取監控點*/
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();
} }
} });
},
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> </script>
<style scoped lang="less"> <style scoped lang="less">
.manage-select-box .el-select { .manage-select-box .el-select {
width: 150px; width: 150px;
} }
.manage-container { .manage-container {
height: 100%; height: 100%;
/deep/ .el-table .cell{ /deep/ .el-table .cell {
padding-right: 0; padding-right: 0;
} }
/deep/.el-table tr{ /deep/.el-table tr {
cursor: pointer; cursor: pointer;
} }
/deep/.el-table__body tr.current-row>td.el-table__cell{ /deep/.el-table__body tr.current-row > td.el-table__cell {
background-color: #c8e1ff; background-color: #c8e1ff;
} }
} }
.manage-content { .manage-content {
height: calc(100% - 100px); height: calc(100% - 100px);
} }
.personInfo { .personInfo {
// padding-left: 10px; // padding-left: 10px;
//padding-right: 10px; //padding-right: 10px;
} }
.treeMenu { .treeMenu {
padding-right: 5px; padding-right: 5px;
border-right: 3px solid #f0f3f9; border-right: 3px solid #f0f3f9;
height: 100%; height: 100%;
.treePage { .treePage {
padding: 2px 0; padding: 2px 0;
position: fixed; position: fixed;
bottom: 15px; bottom: 15px;
/deep/.el-pagination__jump { /deep/.el-pagination__jump {
line-height: 22px; line-height: 22px;
margin-left: 0; margin-left: 0;
}
} }
}
.btn-box { .btn-box {
margin-bottom: 10px; margin-bottom: 10px;
} }
.btn-radio { .btn-radio {
/deep/.el-radio-button { /deep/.el-radio-button {
width: 33%; width: 33%;
} }
/deep/.el-radio-button__inner { /deep/.el-radio-button__inner {
width: 100%; width: 100%;
}
} }
}
} }
.title { .title {
font-weight: 900; font-weight: 900;
text-align: left; text-align: left;
width: 100%; width: 100%;
.btnGroup { .btnGroup {
float: right; float: right;
margin-right: 10px; margin-right: 10px;
} }
} }
.bind { .bind {
color: #008000; color: #008000;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
} }
.unbind { .unbind {
color: #FF0000; color: #ff0000;
cursor: pointer; cursor: pointer;
} }
.legends { .legends {
text-align: right; text-align: right;
} }
.draw_desks { .draw_desks {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.pwraper { .pwraper {
position: relative; position: relative;
overflow: auto; overflow: auto;
min-height: 300px; min-height: 300px;
margin-top: 10px; margin-top: 10px;
} }
.dlist { .dlist {
position: relative; position: relative;
clear: both; clear: both;
width: 100%; width: 100%;
.ditem { .ditem {
width: calc(50% - 10px); width: calc(50% - 10px);
float: left; float: left;
margin: 0 5px 8px 5px; margin: 0 5px 8px 5px;
.dimg { .dimg {
display: block; display: block;
width: 100%; width: 100%;
}
} }
}
} }
.dwrap { .dwrap {
position: relative; position: relative;
} }
.fwrap{ .fwrap {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
padding-top: 10px; padding-top: 10px;
} }
.fwrap .dimg{ .fwrap .dimg {
width: 100%; width: 100%;
} }
.label-box{ .label-box {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
left: 7px; left: 7px;
bottom:5px; bottom: 5px;
color:#f00 color: #f00;
} }
.pview { .pview {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<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>
<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>
<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>
<template> <template>
<div class="queueManagementContainer clerk-wrapper"> <div class="queueManagementContainer clerk-wrapper">
<div class="header manage-head-wrapper"> <div class="header manage-head-wrapper">
<el-form ref="form" label-width="100px" inline class="searchForm boxShadow searchFormSocial"> <el-form ref="form" label-width="100px" inline class="searchForm boxShadow searchFormSocial">
<el-form-item :label="$t('table.mall')"> <el-form-item :label="$t('table.mall')">
<el-select v-model="searchForm.mallId" filterable :placeholder="$t('pholder.select')" @change="mallChange"> <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-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('table.areaName')"> <el-form-item :label="$t('table.areaName')">
<el-select v-model="searchForm.areaId" :placeholder="$t('pholder.areaSelect')" @change="areaChange"> <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-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<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="searchFun">{{ $t('button.search')}}</el-button>
</el-form-item> </el-form-item>
<div class="btns"> </el-form>
<el-button type="primary" size="mini" class="manage-add-btn fl-btn" @click="addDesk">{{$t('button.groupAdd')}}</el-button> </div>
</div> <div class="aiot_alone_long">
</el-form> <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> </div>
<el-row class="manage-content"> <el-row class="manage-content">
<el-col :span="24" class="treeMenu boxShadow"> <el-col :span="24" class="treeMenu boxShadow">
<el-table ref="singleTable" @row-click="setCurrent" :data="tableData" :max-height="tableHeight" :highlight-current-row='true' <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">
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 :label="$t('table.order')" align="center" type="index" width="100"></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.laneName')" align="center" prop="name"></el-table-column> <el-table-column :label="$t('table.operate')" align="center">
<el-table-column :label="$t('table.channelCode')" align="center" prop="code"></el-table-column> <template slot-scope="scope">
<el-table-column :label="$t('table.counterType')" :formatter="formatCounterType" align="center" prop="counterType"></el-table-column> <!-- <el-button type="text" class="tab-btn" @click="drawDesk(scope.row)">{{$t('button.draw')}}</el-button> -->
<el-table-column :label="$t('table.areaName')" :formatter="formatArea" align="center" prop="areaId"></el-table-column> <el-button type="text" class="tab-btn" @click="editDesk(scope.row)">{{$t('button.edit')}}</el-button>
<el-table-column :label="$t('table.operate')" align="center" width="200"> <el-button style="color:red" type="text" class="tab-btn" @click="delDesk(scope.row)">{{$t('button.delete')}}</el-button>
<template slot-scope="scope"> <!-- <span class="bind" @click="drawDesk(scope.row)">{{$t('button.draw')}}</span>
<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="bind" @click="editDesk(scope.row)">{{$t('button.edit')}}</span>
<span class="unbind" @click="delDesk(scope.row)">{{$t('button.delete')}}</span> --> <span class="unbind" @click="delDesk(scope.row)">{{$t('button.delete')}}</span> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-col> </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> </el-row>
<add-desk-dialog ref="addDeskDialog"></add-desk-dialog> </div>
<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"> <div class="aiot_right">
<!-- <ul class="legends"> <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="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button size="mini" type="primary" @click="saveData">{{$t('button.saveDrawing')}}</el-button> <el-button size="mini" type="primary" @click="saveData">{{$t('button.saveDrawing')}}</el-button>
</ul> --> </ul>
<div class="draw_desks boxShadow"> <div class="draw_desks boxShadow">
<el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }"> <el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
<ul class="dlist" ref="dlist"> <ul class="dlist" ref="dlist">
<li class="ditem" style="height:0;margin:0;"> <li class="ditem" style="height:0;margin:0;">
<div class="fwrap"></div> <div class="fwrap"></div>
</li> </li>
<li class="ditem" v-for="(item, index) in canvasList" :key="index"> <li class="ditem" v-for="(item, index) in canvasList" :key="index">
<div class="fwrap"> <div class="fwrap">
<img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }"/> <img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }" />
<div class="pview"> <div class="pview">
<Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter> <Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
</el-row> </el-row>
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="drawDialogVisible = false" class="dialog-btn">{{ $t('dialog.cancel') }}</el-button> <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 size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
<el-button type="primary" @click="saveData()" class="dialog-btn dialog-confirm-btn"> <el-button type="primary" @click="saveData()" class="dialog-btn dialog-confirm-btn">
{{ $t('button.saveDrawing') }}</el-button> {{ $t('button.saveDrawing') }}</el-button>
</div> </div>
</el-dialog> </el-dialog> -->
</div> </div>
</template> </template>
<script> <script>
import _ from 'underscore'; import _ from "underscore";
import Painter from './Painter'; import Painter from "./Painter";
import addDeskDialog from "./addDesk"; import addDeskDialog from "./addDesk";
export default { export default {
data() { data() {
return { return {
mallListForTerm:[], mallListForTerm: [],
searchForm:{ searchForm: {
mallId:'', mallId: "",
areaId:'', areaId: "",
}, },
areaListData:[], areaListData: [],
ptype:1, ptype: 1,
floorImg:'', floorImg: "",
tableData: [], tableData: [],
loading: true, loading: true,
canvasList:[], canvasList: [],
currentRow:{}, currentRow: {},
groupList:[], groupList: [],
isPainter:false, isPainter: false,
chooseList:[], chooseList: [],
counterTypeData:[], counterTypeData: [],
// 画图 // 画图
drawDialogVisible:false, 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, mounted() {
'Painter': Painter 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() { getMallListForTerm() {
const windowInnerHeight = window.innerHeight; this.mallListForTerm = [];
return windowInnerHeight - windowInnerHeight * 0.24; 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() { mallChange(val) {
this.getCounterType() this.setSessionLocal("mallId", val);
this.getMallListForTerm(); this.getAreaList(val);
}, },
methods: { // 区域
getCounterType(){ getAreaList(val) {
this.$api.base.dataDic({ this.areaListData = [];
type: 'counterType' this.$api.queueManagementApi
}).then(res => { .getAreaList({
this.counterTypeData = res.data.data.map(item=>{ mallId: val,
if(localStorage.getItem('lang') == 'en_US'){ pageNum: 1,
item.value = item.valueEn; pageSize: 999999,
} })
return item; .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;
getMallListForTerm() { this.floorImg =
this.mallListForTerm = []; window._vionConfig.picUrl + result.data.list[0].pic;
this.searchForm.mallId = ""; this.areaListData = result.data.list;
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); this.getTableData();
}, }
finishDesk(data){ });
let index = _.findIndex(this.groupList,(item=>{ },
return item.desk.id == data.desk.id; formatArea(row, column, cellValue) {
})); let result = "";
if(index>-1){ this.areaListData.forEach((item) => {
this.groupList.splice(index,1); 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); this.drawFloorMap();
}, }
groupClick(group){ });
this.$refs.singleTable.setCurrentRow(group.desk); },
}, searchFun() {
// 保存 this.getTableData();
saveData() { },
let ajaxs = []; // 新增
if(this.groupList.length==0){ addDesk() {
return this.$message({ this.$refs.addDeskDialog.dialogInit("add");
showClose: true, },
type: "warning", editDesk(data) {
message: this.$t('tips.drawChannelMap') 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=>{ handleCurrentChange(val) {
this.drawDialogVisible = false; this.currentRow = val;
this.getTableData(); },
this.$message({ setCurrent(row, column, event) {
showClose: true, this.$refs.singleTable.setCurrentRow(row);
type: "success", },
message: this.$t('message.labelSuccess') drawDesk(row) {
}) this.drawDialogVisible = true;
}) this.currentRow = row;
}, this.drawFloorMap();
delCoord(data){ },
data.coordinate=''; drawFloorMap() {
this.$api.queueManagementApi.updateChannel(data).then(res=>{ this.canvasList = [];
let result = res.data; let that = this;
if(result.code==200){ let canvasList = [];
this.$message({ _.each(this.chooseList, (item, index) => {
message: result.msg, let img = new Image();
type: 'success' img.src = item.picUrl;
}); img.onload = function () {
this.getTableData(); item.width = this.width;
}else{ item.height = this.height;
this.$message({ canvasList.push(item);
message: result.msg, that.$nextTick(() => {
type: 'error' item.cwidth = document
}); .querySelector(".fwrap")
} .getBoundingClientRect().width;
}) item.cheight = (item.cwidth * item.height) / item.width;
}, that.canvasList = canvasList;
editCoord(group){ console.log(that.canvasList);
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), startDesk(data) {
'y':parseInt(1080*(point[1]+position[1])/height), let index = _.findIndex(this.groupList, (item) => {
} return item.desk.id == data.id;
}); });
desk.coordinate = JSON.stringify(coordinate); if (index > -1) {
let params = Object.assign({},desk); this.groupList[index].zr.remove(this.groupList[index]);
return this.$api.queueManagementApi.updateChannel(params); 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> </script>
<style scoped lang="less"> <style scoped lang="less">
.queueManagementContainer{ .label-box {
height: calc(100% - 120px); 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 { .manage-content {
height: calc(100% - 100px); // height: calc(100% - 100px);
} }
.bind { .bind {
color: #0069ff; color: #0069ff;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
} }
.manage-container { .manage-container {
height: 100%; height: 100%;
} }
.treeMenu { .treeMenu {
padding-right: 5px; padding-right: 5px;
border-right: 3px solid #f0f3f9; border-right: 3px solid #f0f3f9;
height: 100%; height: 100%;
} }
.unbind { .unbind {
color: #0069ff; color: #0069ff;
cursor: pointer; cursor: pointer;
} }
.legends { .legends {
text-align: right; text-align: right;
} }
.draw_desks { .draw_desks {
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
} }
.pwraper { .pwraper {
position: relative; position: relative;
overflow: auto; overflow: auto;
padding-left: 10px; padding-left: 10px;
min-height: 300px; min-height: 300px;
margin-top: 10px; margin-top: 10px;
} }
.fwrap{ .fwrap {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 10px; // margin-bottom: 10px;
} }
.fwrap .dimg{ .fwrap .dimg {
width: 100%; width: 100%;
height: 400px; height: 400px;
} }
.pview { .pview {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.btns{ .btns {
margin-right: 20px; margin-right: 20px;
margin-top: 7px; margin-top: 7px;
} }
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!