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 1382 additions and 314 deletions
package-lock.json
This diff could not be displayed because it is too large.
src/views/Management/DeskManage/index.vue
...@@ -4,16 +4,14 @@ ...@@ -4,16 +4,14 @@
<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')" <el-select v-model="floorVal" filterable :placeholder="$t('pholder.floorSelect')" @change="chooseFloor(floorVal)">
@change="chooseFloor(floorVal)">
<el-option v-for="item in floorOpt" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in floorOpt" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</div> </div>
...@@ -29,8 +27,7 @@ ...@@ -29,8 +27,7 @@
<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>
...@@ -89,100 +86,100 @@ ...@@ -89,100 +86,100 @@
</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 {
ptype:1, ptype: 1,
floorOpt: [], floorOpt: [],
floorVal: '', floorVal: "",
floorImg:'', floorImg: "",
floorData:{}, floorData: {},
mallName: "", mallName: "",
mallVal: null, mallVal: null,
mallOpt: [], mallOpt: [],
tableData: [], tableData: [],
loading: true, loading: true,
dataMsg: "", dataMsg: "",
gateList:[], gateList: [],
canvasList:[], canvasList: [],
currentRow:{}, currentRow: {},
groupList:[], groupList: [],
}; };
}, },
components: { components: {
"add-desk-dialog": addDeskDialog, "add-desk-dialog": addDeskDialog,
'Painter': Painter Painter: Painter,
}, },
computed: { computed: {
tableHeight() { tableHeight() {
const windowInnerHeight = window.innerHeight; const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24; return windowInnerHeight - windowInnerHeight * 0.24;
} },
}, },
mounted() { mounted() {
this.getMallList(); this.getMallList();
this.dataMsg = this.$t("echartsTitle.loading"); this.dataMsg = this.$t("echartsTitle.loading");
}, },
methods: { methods: {
startDesk(data){ startDesk(data) {
let index = _.findIndex(this.groupList,(item=>{ let index = _.findIndex(this.groupList, (item) => {
return item.desk.id == data.id; return item.desk.id == data.id;
})); });
if(index>-1){ if (index > -1) {
this.groupList[index].zr.remove(this.groupList[index]); this.groupList[index].zr.remove(this.groupList[index]);
this.groupList.splice(index,1); this.groupList.splice(index, 1);
if(data.coordinates){ if (data.coordinates) {
this.delCoord(data); this.delCoord(data);
} }
}else{ } else {
return false; return false;
} }
}, },
clearDesk(){ clearDesk() {
if(_.isEmpty(this.currentRow)){ if (_.isEmpty(this.currentRow)) {
return this.$message({ return this.$message({
showClose: true, showClose: true,
type: "warning", type: "warning",
message: '请先点击选择左侧货架' message: "请先点击选择左侧货架",
}) });
} }
this.startDesk(this.currentRow); this.startDesk(this.currentRow);
}, },
finishDesk(data){ finishDesk(data) {
let index = _.findIndex(this.groupList,(item=>{ let index = _.findIndex(this.groupList, (item) => {
return item.desk.id == data.desk.id; return item.desk.id == data.desk.id;
})); });
if(index>-1){ if (index > -1) {
this.groupList.splice(index,1); this.groupList.splice(index, 1);
} }
this.groupList.push(data); this.groupList.push(data);
}, },
editDesk(data){ editDesk(data) {
this.$refs.addDeskDialog.dialogInit(data); this.$refs.addDeskDialog.dialogInit(data);
}, },
delDesk(data){ delDesk(data) {
this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), { this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
confirmButtonText: this.$t("message.confirm"), confirmButtonText: this.$t("message.confirm"),
cancelButtonText: this.$t("message.cancel"), cancelButtonText: this.$t("message.cancel"),
type: "warning"}).then(() => { type: "warning",
this.$api.management.delDesk({id:data.id}).then(res=>{ }).then(() => {
this.$api.management.delDesk({ id: data.id }).then((res) => {
this.$message({ this.$message({
showClose: true, showClose: true,
type: "success", type: "success",
message:'删除成功' message: "删除成功",
}); });
this.getDeskList(); this.getDeskList();
}) });
}) });
}, },
setCurrent(row,column,event) { setCurrent(row, column, event) {
this.$refs.singleTable.setCurrentRow(row); this.$refs.singleTable.setCurrentRow(row);
}, },
groupClick(group){ groupClick(group) {
this.$refs.singleTable.setCurrentRow(group.desk); this.$refs.singleTable.setCurrentRow(group.desk);
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
...@@ -192,81 +189,82 @@ export default { ...@@ -192,81 +189,82 @@ export default {
this.$refs.addDeskDialog.dialogInit(); this.$refs.addDeskDialog.dialogInit();
}, },
addField(data) { addField(data) {
if(!data.id){ if (!data.id) {
data.accountId = this.$cookie.get('accountId'); data.accountId = this.$cookie.get("accountId");
data.mallId = this.mallVal; data.mallId = this.mallVal;
data.floorId = this.floorVal; data.floorId = this.floorVal;
} }
data.doorway = data.doorway?1:0; data.doorway = data.doorway ? 1 : 0;
this.$api.management.editDesk(data).then(res=>{ this.$api.management.editDesk(data).then((res) => {
this.$message({ this.$message({
showClose: true, showClose: true,
type: "success", type: "success",
message: data.id?'修改成功':'添加成功' message: data.id ? "修改成功" : "添加成功",
}); });
this.getDeskList(); this.getDeskList();
this.$refs.addDeskDialog.addDialogClose(); this.$refs.addDeskDialog.addDialogClose();
}) });
}, },
// 保存 // 保存
saveData() { saveData() {
let ajaxs = []; let ajaxs = [];
if(this.groupList.length==0){ if (this.groupList.length == 0) {
return this.$message({ return this.$message({
showClose: true, showClose: true,
type: "warning", type: "warning",
message: '请先绘制货架图' message: "请先绘制货架图",
}) });
} }
_.each(this.groupList,group=>{ _.each(this.groupList, (group) => {
ajaxs.push(this.editCoord(group)); ajaxs.push(this.editCoord(group));
}); });
Promise.all(ajaxs).then(res=>{ Promise.all(ajaxs).then((res) => {
this.$message({ this.$message({
showClose: true, showClose: true,
type: "success", type: "success",
message: '保存成功' message: "保存成功",
}) });
}) });
}, },
delCoord(data){ delCoord(data) {
data.coordinates=''; data.coordinates = "";
data.gateId =''; data.gateId = "";
data.deviceId=''; data.deviceId = "";
data.channelSerialnum=''; data.channelSerialnum = "";
//let desk = _.omit(data,'coordinates','gateId','deviceId','channelSerialnum'); //let desk = _.omit(data,'coordinates','gateId','deviceId','channelSerialnum');
this.$api.management.editDesk(data); this.$api.management.editDesk(data);
}, },
editCoord(group){ editCoord(group) {
let {position,points,__zr,cdata,desk} = group; let { position, points, __zr, cdata, desk } = group;
let [width,height] = [__zr.getWidth(),__zr.getHeight()]; let [width, height] = [__zr.getWidth(), __zr.getHeight()];
let coordinates = _.map(points,point=>{ let coordinates = _.map(points, (point) => {
return { return {
x:parseInt(1920*(point[0]+position[0])/width), x: parseInt((1920 * (point[0] + position[0])) / width),
y:parseInt(1080*(point[1]+position[1])/height), y: parseInt((1080 * (point[1] + position[1])) / height),
} };
}); });
desk.coordinates = JSON.stringify(coordinates); desk.coordinates = JSON.stringify(coordinates);
desk.gateId = cdata.id; desk.gateId = cdata.id;
desk.deviceId = cdata.deviceId; desk.deviceId = cdata.deviceId;
desk.channelSerialnum = cdata.serialnum; desk.channelSerialnum = cdata.serialnum;
let params = Object.assign({},desk); let params = Object.assign({}, desk);
return this.$api.management.editDesk(params); return this.$api.management.editDesk(params);
}, },
// 广场出入口列表 // 广场出入口列表
getDeskList() { getDeskList() {
this.$api.management.getDeskList({ this.$api.management
.getDeskList({
mallId: this.mallVal, mallId: this.mallVal,
floorId: this.floorVal, floorId: this.floorVal,
page:1, page: 1,
pageNum:999 pageNum: 999,
}).then((res) => { })
.then((res) => {
this.tableData = res.data.data.list; this.tableData = res.data.data.list;
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
}, 500); }, 500);
}) });
}, },
// 列表数据 // 列表数据
getTableData() { getTableData() {
...@@ -274,9 +272,9 @@ export default { ...@@ -274,9 +272,9 @@ export default {
this.dataMsg = this.$t("echartsTitle.loading"); this.dataMsg = this.$t("echartsTitle.loading");
this.tableData = []; this.tableData = [];
this.getDeskList(); this.getDeskList();
if(this.ptype==1){ if (this.ptype == 1) {
this.loadGateData(); this.loadGateData();
}else{ } else {
this.drawFloorMap(); this.drawFloorMap();
} }
}, },
...@@ -285,22 +283,25 @@ export default { ...@@ -285,22 +283,25 @@ export default {
this.mallOpt = []; this.mallOpt = [];
this.mallVal = null; this.mallVal = null;
this.mallName = ""; this.mallName = "";
const storageMallVal = this.getSessionLocal("mallId") const storageMallVal = this.getSessionLocal("mallId");
this.$api.base this.$api.base
.mall({ .mall(
{
accountId: this.$cookie.get("accountId"), accountId: this.$cookie.get("accountId"),
status_arr: '1,3' status_arr: "1,3",
}, },
null, null,
true true
) )
.then(res => { .then((res) => {
let result = res.data.data; let result = res.data.data;
if (result.length > 0) { if (result.length > 0) {
this.mallOpt = result; this.mallOpt = result;
if (storageMallVal) { if (storageMallVal) {
this.mallVal = storageMallVal - 0; this.mallVal = storageMallVal - 0;
const matchedMall = result.find(item => item.id === this.mallVal) const matchedMall = result.find(
(item) => item.id === this.mallVal
);
this.mallName = matchedMall.name; this.mallName = matchedMall.name;
} else { } else {
this.mallVal = result[0].id; this.mallVal = result[0].id;
...@@ -308,133 +309,148 @@ export default { ...@@ -308,133 +309,148 @@ export default {
this.mallName = result[0].name; this.mallName = result[0].name;
} }
} }
this.floorFetch(11) this.floorFetch(11);
}) })
.catch(err => { .catch((err) => {
console.log(err) console.log(err);
}); });
}, },
chooseMall(mallId) { chooseMall(mallId) {
this.setSessionLocal("mallId", mallId); this.setSessionLocal("mallId", mallId);
const matchedMall = this.mallOpt.find(item => item.id == mallId) const matchedMall = this.mallOpt.find((item) => item.id == mallId);
this.mallName = matchedMall.name; this.mallName = matchedMall.name;
this.floorVal = ''; this.floorVal = "";
this.floorImg = ''; this.floorImg = "";
this.floorFetch() this.floorFetch();
}, },
// 楼层 // 楼层
floorFetch() { floorFetch() {
this.floorOpt = []; this.floorOpt = [];
this.floorVal = ""; this.floorVal = "";
this.floorImg = ''; this.floorImg = "";
this.$api.base this.$api.base
.floor({ .floor({
mallId: this.mallVal, mallId: this.mallVal,
status: 1 status: 1,
}) })
.then(data => { .then((data) => {
var result = data.data; var result = data.data;
this.floorOpt = result.data; this.floorOpt = result.data;
if (result.data.length) { if (result.data.length) {
this.floorVal = result.data[0].id this.floorVal = result.data[0].id;
this.floorImg = window._vionConfig.picUrl + result.data[0].floorPlan; this.floorImg =
window._vionConfig.picUrl + result.data[0].floorPlan;
this.getTableData(); this.getTableData();
} else { } else {
this.tableData = [] this.tableData = [];
} }
});
})
}, },
chooseFloor(floorVal) { chooseFloor(floorVal) {
this.floorImg = window._vionConfig.picUrl + _.findWhere(this.floorOpt,{id:floorVal}).floorPlan; this.floorImg =
window._vionConfig.picUrl +
_.findWhere(this.floorOpt, { id: floorVal }).floorPlan;
this.getTableData(); this.getTableData();
}, },
loadGateData() { loadGateData() {
this.gateList = []; this.gateList = [];
_.each(this.canvasList, item => { _.each(this.canvasList, (item) => {
if (item.zr && item.zr.clear) { if (item.zr && item.zr.clear) {
item.zr.clear(); item.zr.clear();
} }
}) });
this.canvasList = []; this.canvasList = [];
if (!this.floorVal) { if (!this.floorVal) {
return; return;
} }
Promise.all([this.getGateList(), this.getShotList()]).then(res => { Promise.all([this.getGateList(), this.getShotList()]).then((res) => {
this.gateList = _.map(res[0], item => { this.gateList = _.map(res[0], (item) => {
let shot = _.findWhere(res[1], { gateId: item.id }); let shot = _.findWhere(res[1], { gateId: item.id });
if (shot) { if (shot) {
item.serialnum = shot.serialnum; item.serialnum = shot.serialnum;
item.deviceSerialnum = shot.deviceSerialnum; item.deviceSerialnum = shot.deviceSerialnum;
item.deviceId = shot.deviceId; item.deviceId = shot.deviceId;
//item.picUrl='https://store.keliuyun.com/images//snapshot/real/8F2B-3A9C-2A2D-6A06-01.jpg?t=1652495146'; //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.picUrl =
} window._vionConfig.picUrl +
item.coordinates && (item.coordinates = JSON.parse(item.coordinates)) "/snapshot/real/" +
item.serialnum +
".jpg?t=" +
Date.parse(new Date()) / 1000;
}
item.coordinates && (item.coordinates = JSON.parse(item.coordinates));
return item; return item;
}) });
this.drawJoinMap() this.drawJoinMap();
}); });
}, },
drawJoinMap(){ drawJoinMap() {
this.loading = false; this.loading = false;
let that = this; let that = this;
let canvasList = []; let canvasList = [];
_.each(this.gateList.reverse(),(item,index)=>{ _.each(this.gateList.reverse(), (item, index) => {
if(item.picUrl){ if (item.picUrl) {
let img = new Image(); let img = new Image();
img.src = item.picUrl; img.src = item.picUrl;
img.onload = function(){ img.onload = function () {
item.width = this.width; item.width = this.width;
item.height = this.height; item.height = this.height;
canvasList.push(item); canvasList.push(item);
that.$nextTick(()=>{ that.$nextTick(() => {
item.cwidth = document.querySelector('.dwrap').getBoundingClientRect().width; item.cwidth = document
item.cheight = item.cwidth*item.height/item.width; .querySelector(".dwrap")
.getBoundingClientRect().width;
item.cheight = (item.cwidth * item.height) / item.width;
that.canvasList = canvasList; that.canvasList = canvasList;
}); });
};
} }
} });
})
}, },
drawFloorMap(){ drawFloorMap() {
let that = this; let that = this;
let floorData = {}; let floorData = {};
let img = new Image(); let img = new Image();
img.src = this.floorImg; img.src = this.floorImg;
img.onload = function(){ img.onload = function () {
floorData.width = this.width; floorData.width = this.width;
floorData.height = this.height; floorData.height = this.height;
that.$nextTick(()=>{ that.$nextTick(() => {
floorData.cwidth = document.querySelector('.pview').getBoundingClientRect().width; floorData.cwidth = document
floorData.cheight = floorData.cwidth*floorData.height/floorData.width; .querySelector(".pview")
.getBoundingClientRect().width;
floorData.cheight =
(floorData.cwidth * floorData.height) / floorData.width;
that.floorData = floorData; that.floorData = floorData;
}); });
} };
}, },
/*獲取監控點*/ /*獲取監控點*/
getGateList() { getGateList() {
return this.$api.management.gateFilterList({ return this.$api.management
.gateFilterList({
mallId: this.mallVal, mallId: this.mallVal,
floorId: this.floorVal floorId: this.floorVal,
}).then(res => { })
.then((res) => {
return res.data.data; return res.data.data;
}); });
}, },
/*獲取通道列表*/ /*獲取通道列表*/
getShotList() { getShotList() {
return this.$api.management.channelFilterList({ return this.$api.management
.channelFilterList({
mallId: this.mallVal, mallId: this.mallVal,
floorId_arr: this.floorVal floorId_arr: this.floorVal,
}).then(res => { })
.then((res) => {
return res.data.data; return res.data.data;
}); });
}, },
searchFun() { searchFun() {
this.getTableData(); this.getTableData();
} },
} },
}; };
</script> </script>
...@@ -445,13 +461,13 @@ export default { ...@@ -445,13 +461,13 @@ export default {
.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;
} }
} }
...@@ -514,7 +530,7 @@ export default { ...@@ -514,7 +530,7 @@ export default {
} }
.unbind { .unbind {
color: #FF0000; color: #ff0000;
cursor: pointer; cursor: pointer;
} }
.legends { .legends {
...@@ -553,21 +569,20 @@ export default { ...@@ -553,21 +569,20 @@ export default {
.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;
...@@ -575,6 +590,5 @@ export default { ...@@ -575,6 +590,5 @@ export default {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </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
...@@ -15,25 +15,23 @@ ...@@ -15,25 +15,23 @@
<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-button type="primary" size="mini" class="manage-add-btn fl-btn" @click="addDesk">{{$t('button.groupAdd')}}</el-button>
</div>
</el-form> </el-form>
</div> </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-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.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.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 width="200" :label="$t('table.counterType')" :formatter="formatCounterType" align="center" prop="counterType"></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.operate')" align="center">
<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"> <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="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="editDesk(scope.row)">{{$t('button.edit')}}</el-button>
<el-button type="text" class="tab-btn" @click="delDesk(scope.row)">{{$t('button.delete')}}</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="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> -->
...@@ -41,20 +39,28 @@ ...@@ -41,20 +39,28 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-col> </el-col>
<!-- <el-col :span="14" class="personInfo">
</el-row>
</div>
<div class="aiot_right">
<el-col :span="24" class="personInfo">
<ul class="legends"> <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"> <div class="draw_desks">
<el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }"> <el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight-18 + '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" style="margin:10px 10px 0 0">
<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="label-box">
<p>{{ $t('table.laneName') + ': ' + item.name }}</p>
<!-- <p>{{ $t('table.deviceNum') + ': ' + item.serialnum }}</p> -->
</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>
...@@ -63,14 +69,16 @@ ...@@ -63,14 +69,16 @@
</ul> </ul>
</el-row> </el-row>
</div> </div>
</el-col> --> </el-col>
</el-row> </div>
</div>
<add-desk-dialog ref="addDeskDialog"></add-desk-dialog> <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"> <!-- <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"> <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">
...@@ -79,7 +87,7 @@ ...@@ -79,7 +87,7 @@
</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>
...@@ -94,72 +102,76 @@ ...@@ -94,72 +102,76 @@
<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: { components: {
"add-desk-dialog": addDeskDialog, "add-desk-dialog": addDeskDialog,
'Painter': Painter Painter: Painter,
}, },
computed: { computed: {
tableHeight() { tableHeight() {
const windowInnerHeight = window.innerHeight; const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24; return windowInnerHeight - windowInnerHeight * 0.24;
} },
}, },
mounted() { mounted() {
this.getCounterType() this.getCounterType();
this.getMallListForTerm(); this.getMallListForTerm();
}, },
methods: { methods: {
getCounterType(){ getCounterType() {
this.$api.base.dataDic({ this.$api.base
type: 'counterType' .dataDic({
}).then(res => { type: "counterType",
this.counterTypeData = res.data.data.map(item=>{ })
if(localStorage.getItem('lang') == 'en_US'){ .then((res) => {
this.counterTypeData = res.data.data.map((item) => {
if (localStorage.getItem("lang") == "en_US") {
item.value = item.valueEn; item.value = item.valueEn;
} }
return item; return item;
}); });
}) });
}, },
// 广场 // 广场
getMallListForTerm() { getMallListForTerm() {
this.mallListForTerm = []; this.mallListForTerm = [];
this.searchForm.mallId = ""; this.searchForm.mallId = "";
this.$api.base.mall({ this.$api.base
accountId: this.$cookie.get('accountId'), .mall({
status_arr: "1,3" accountId: this.$cookie.get("accountId"),
}).then(data => { status_arr: "1,3",
})
.then((data) => {
let result = data.data; let result = data.data;
if (result.data.length) { if (result.data.length) {
if (this.getSessionLocal("mallId")) { if (this.getSessionLocal("mallId")) {
...@@ -171,245 +183,289 @@ export default { ...@@ -171,245 +183,289 @@ export default {
this.mallListForTerm = result.data; this.mallListForTerm = result.data;
} }
this.getAreaList(this.searchForm.mallId); this.getAreaList(this.searchForm.mallId);
}) });
}, },
mallChange(val){ mallChange(val) {
this.setSessionLocal("mallId", val); this.setSessionLocal("mallId", val);
this.getAreaList(val) this.getAreaList(val);
}, },
// 区域 // 区域
getAreaList(val){ getAreaList(val) {
this.areaListData = []; this.areaListData = [];
this.$api.queueManagementApi.getAreaList({ this.$api.queueManagementApi
.getAreaList({
mallId: val, mallId: val,
pageNum: 1, pageNum: 1,
pageSize: 999999 pageSize: 999999,
}).then(res => { })
.then((res) => {
let result = res.data; let result = res.data;
if(result.code==200){ if (result.code == 200) {
if(result.data.list&& result.data.list.length>0){ if (result.data.list && result.data.list.length > 0) {
this.searchForm.areaId = result.data.list[0].id this.searchForm.areaId = result.data.list[0].id;
this.floorImg =window._vionConfig.picUrl + result.data.list[0].pic this.floorImg =
window._vionConfig.picUrl + result.data.list[0].pic;
this.areaListData = result.data.list; this.areaListData = result.data.list;
} }
this.getTableData() this.getTableData();
} }
}) });
}, },
formatArea(row, column, cellValue){ formatArea(row, column, cellValue) {
let result = '' let result = "";
this.areaListData.forEach(item=>{ this.areaListData.forEach((item) => {
if(item.id==cellValue){ if (item.id == cellValue) {
result = item.name result = item.name;
} }
}) });
return result return result;
}, },
formatCounterType(row, column, cellValue){ formatCounterType(row, column, cellValue) {
let result = '' let result = "";
this.counterTypeData.forEach(item=>{ this.counterTypeData.forEach((item) => {
if(item.key==cellValue){ if (item.key == cellValue) {
result = item.value result = item.value;
} }
}) });
return result return result;
}, },
areaChange(val){ areaChange(val) {
this.getTableData(this.searchForm.mallId) this.getTableData(this.searchForm.mallId);
this.areaListData.forEach(item=>{ this.areaListData.forEach((item) => {
if(item.id==val){ if (item.id == val) {
this.floorImg =window._vionConfig.picUrl + item.pic this.floorImg = window._vionConfig.picUrl + item.pic;
} }
}) });
}, },
// 列表数据 // 列表数据
getTableData() { getTableData() {
this.loading = true; this.loading = true;
this.tableData = []; this.tableData = [];
this.chooseList = [] this.chooseList = [];
this.$api.queueManagementApi.getChannelList({ this.$api.queueManagementApi
.getChannelList({
areaId: this.searchForm.areaId, areaId: this.searchForm.areaId,
pageNum: 1, pageNum: 1,
pageSize: 9999999 pageSize: 9999999,
}).then(res => { })
.then((res) => {
let result = res.data; let result = res.data;
this.loading = false; this.loading = false;
if(result.code==200){ if (result.code == 200) {
this.tableData = result.data.list; this.tableData = result.data.list;
if(this.tableData.length>0){ if (this.tableData.length > 0) {
this.tableData.forEach(item=>{ this.tableData.forEach((item) => {
item.picUrl = this.floorImg; item.picUrl = this.floorImg;
}) });
this.chooseList.push(result.data.list[0]) this.chooseList.push(result.data.list[0]);
} }
this.drawFloorMap();
} }
}) });
}, },
searchFun() { searchFun() {
this.getTableData(); this.getTableData();
}, },
// 新增 // 新增
addDesk() { addDesk() {
this.$refs.addDeskDialog.dialogInit('add'); this.$refs.addDeskDialog.dialogInit("add");
}, },
editDesk(data){ editDesk(data) {
this.$refs.addDeskDialog.dialogInit('edit',data); this.$refs.addDeskDialog.dialogInit("edit", data);
}, },
delDesk(data){ delDesk(data) {
this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), { this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
confirmButtonText: this.$t("message.confirm"), confirmButtonText: this.$t("message.confirm"),
cancelButtonText: this.$t("message.cancel"), cancelButtonText: this.$t("message.cancel"),
type: "warning", type: "warning",
}).then(() => { }).then(() => {
this.$api.queueManagementApi.deleteChannel({id:data.id}).then(res=>{ this.$api.queueManagementApi
.deleteChannel({ id: data.id })
.then((res) => {
let result = res.data; let result = res.data;
if(result.code==200){ if (result.code == 200) {
this.$message({ this.$message({
message: result.msg, message: result.msg,
type: 'success' type: "success",
}); });
this.getTableData(); this.getTableData();
}else{ } else {
this.$message({ this.$message({
message: result.msg, message: result.msg,
type: 'error' type: "error",
}); });
} }
}) });
}) });
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.currentRow = val; this.currentRow = val;
}, },
setCurrent(row,column,event) { setCurrent(row, column, event) {
this.$refs.singleTable.setCurrentRow(row); this.$refs.singleTable.setCurrentRow(row);
}, },
drawDesk(row){ drawDesk(row) {
this.drawDialogVisible = true; this.drawDialogVisible = true;
this.currentRow = row; this.currentRow = row;
this.drawFloorMap() this.drawFloorMap();
}, },
drawFloorMap(){ drawFloorMap() {
this.canvasList = []; this.canvasList = [];
let that = this; let that = this;
let canvasList = []; let canvasList = [];
_.each(this.chooseList,(item,index)=>{ _.each(this.chooseList, (item, index) => {
let img = new Image(); let img = new Image();
img.src = item.picUrl; img.src = item.picUrl;
img.onload = function(){ img.onload = function () {
item.width = this.width; item.width = this.width;
item.height = this.height; item.height = this.height;
canvasList.push(item); canvasList.push(item);
that.$nextTick(()=>{ that.$nextTick(() => {
item.cwidth = document.querySelector('.fwrap').getBoundingClientRect().width; item.cwidth = document
item.cheight = item.cwidth*item.height/item.width; .querySelector(".fwrap")
.getBoundingClientRect().width;
item.cheight = (item.cwidth * item.height) / item.width;
that.canvasList = canvasList; that.canvasList = canvasList;
console.log(that.canvasList);
});
};
}); });
}
})
}, },
startDesk(data){ startDesk(data) {
let index = _.findIndex(this.groupList,(item=>{ let index = _.findIndex(this.groupList, (item) => {
return item.desk.id == data.id; return item.desk.id == data.id;
})); });
if(index>-1){ if (index > -1) {
this.groupList[index].zr.remove(this.groupList[index]); this.groupList[index].zr.remove(this.groupList[index]);
this.groupList.splice(index,1); this.groupList.splice(index, 1);
if(data.coordinate){ if (data.coordinate) {
this.delCoord(data); this.delCoord(data);
} }
}else{ } else {
return false; return false;
} }
}, },
clearDesk(){ clearDesk() {
if(_.isEmpty(this.currentRow)){ if (_.isEmpty(this.currentRow)) {
return this.$message({ return this.$message({
showClose: true, showClose: true,
type: "warning", type: "warning",
message: this.$t('tips.selectChannel') message: this.$t("tips.selectChannel"),
}) });
} }
this.startDesk(this.currentRow); this.startDesk(this.currentRow);
}, },
finishDesk(data){ finishDesk(data) {
let index = _.findIndex(this.groupList,(item=>{ let index = _.findIndex(this.groupList, (item) => {
return item.desk.id == data.desk.id; return item.desk.id == data.desk.id;
})); });
if(index>-1){ if (index > -1) {
this.groupList.splice(index,1); this.groupList.splice(index, 1);
} }
this.groupList.push(data); this.groupList.push(data);
}, },
groupClick(group){ groupClick(group) {
this.$refs.singleTable.setCurrentRow(group.desk); this.$refs.singleTable.setCurrentRow(group.desk);
}, },
// 保存 // 保存
saveData() { saveData() {
let ajaxs = []; let ajaxs = [];
if(this.groupList.length==0){ if (this.groupList.length == 0) {
return this.$message({ return this.$message({
showClose: true, showClose: true,
type: "warning", type: "warning",
message: this.$t('tips.drawChannelMap') message: this.$t("tips.drawChannelMap"),
}) });
} }
_.each(this.groupList,group=>{ _.each(this.groupList, (group) => {
ajaxs.push(this.editCoord(group)); ajaxs.push(this.editCoord(group));
}); });
Promise.all(ajaxs).then(res=>{ Promise.all(ajaxs).then((res) => {
this.drawDialogVisible = false; this.drawDialogVisible = false;
this.getTableData(); this.getTableData();
this.$message({ this.$message({
showClose: true, showClose: true,
type: "success", type: "success",
message: this.$t('message.labelSuccess') message: this.$t("message.labelSuccess"),
}) });
}) });
}, },
delCoord(data){ delCoord(data) {
data.coordinate=''; data.coordinate = "";
this.$api.queueManagementApi.updateChannel(data).then(res=>{ this.$api.queueManagementApi.updateChannel(data).then((res) => {
let result = res.data; let result = res.data;
if(result.code==200){ if (result.code == 200) {
this.$message({ this.$message({
message: result.msg, message: result.msg,
type: 'success' type: "success",
}); });
this.getTableData(); this.getTableData();
}else{ } else {
this.$message({ this.$message({
message: result.msg, message: result.msg,
type: 'error' type: "error",
}); });
} }
}) });
}, },
editCoord(group){ editCoord(group) {
let {position,points,__zr,cdata,desk} = group; let { position, points, __zr, cdata, desk } = group;
let [width,height] = [__zr.getWidth(),__zr.getHeight()]; let [width, height] = [__zr.getWidth(), __zr.getHeight()];
let coordinate = _.map(points,point=>{ let coordinate = _.map(points, (point) => {
return { return {
'x':parseInt(1920*(point[0]+position[0])/width), x: parseInt((1920 * (point[0] + position[0])) / width),
'y':parseInt(1080*(point[1]+position[1])/height), y: parseInt((1080 * (point[1] + position[1])) / height),
} };
}); });
desk.coordinate = JSON.stringify(coordinate); desk.coordinate = JSON.stringify(coordinate);
let params = Object.assign({},desk); let params = Object.assign({}, desk);
return this.$api.queueManagementApi.updateChannel(params); 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 {
...@@ -446,12 +502,12 @@ export default { ...@@ -446,12 +502,12 @@ export default {
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;
} }
...@@ -461,9 +517,8 @@ export default { ...@@ -461,9 +517,8 @@ export default {
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;
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!