Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation
This project
Loading...
Sign in
李君
/
carrefour
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit 527169c5
authored
Oct 22, 2022
by
tianlonglong
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
tll
1 parent
3f239696
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
1991 additions
and
923 deletions
package-lock.json
src/views/Management/DeskManage/index.vue
src/views/queueManagement/channelManagement-副本/Painter.vue
src/views/queueManagement/channelManagement-副本/addDesk.vue
src/views/queueManagement/channelManagement-副本/index.vue
src/views/queueManagement/channelManagement/index.vue
package-lock.json
View file @
527169c
This diff could not be displayed because it is too large.
src/views/Management/DeskManage/index.vue
View file @
527169c
<
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
:
#FF
0000
;
color
:
#ff
0000
;
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
>
src/views/queueManagement/channelManagement-副本/Painter.vue
0 → 100644
View file @
527169c
<
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
View file @
527169c
<
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
View file @
527169c
<
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
View file @
527169c
<
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
);
});
},
},
m
ounted
(
)
{
m
allChange
(
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
>
Write
Preview
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment