<!--已注释：新增手动任务，单机操作-->
|
<template>
|
<div>
|
<input type="hidden" id="currentUser" />
|
<input type="hidden" id="thisModel" />
|
<div class="content"
|
@mouseup="handMouseUp"
|
@mousedown.left="onmousedownClick">
|
<div class="content-top">
|
<div style="margin-bottom: 15px">
|
<button @click="value3 = formdrawer.location?true:false" type="primary" class="ivu-btn ivu-btn-primary ivu-btn-small">货位分配</button>
|
</div>
|
<Drawer
|
title="货位绑定类型"
|
v-model="value3"
|
width="720"
|
:mask-closable="true"
|
:styles="styles"
|
>
|
<div class="demo-drawer__content">
|
<el-form :model="formdrawer">
|
<el-form-item label="货位行列" :label-width="formLabelWidth">
|
<el-input type="textarea" v-model="formdrawer.location" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="物料名称" :label-width="formLabelWidth">
|
<el-select v-model="formdrawer.materiel_type" clearable filterable placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div class="demo-drawer-footer">
|
<Button style="margin-right: 8px" @click="value3 = false">取消</Button>
|
<Button type="primary" @click="onSubmitLocation()">提交</Button>
|
</div>
|
</div>
|
</Drawer>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list0"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
width="200"
|
trigger="click"
|
:content="!display?'暂无数据':''"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '1_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="[item.classhide, item.margin_right0]"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list1"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
width="200"
|
trigger="click"
|
:content="!display?'暂无数据':''"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '2_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="item.classhide"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>
|
{{!isNaN(item.id)?item.id:""}}
|
</Tag>
|
</el-popover>
|
</div>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list2"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
:content="!display?'暂无数据':''"
|
width="200"
|
trigger="click"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '3_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="[item.classhide, item.margin_right2]"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list3"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
:content="!display?'暂无数据':''"
|
width="200"
|
trigger="click"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '4_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="[item.classhide, item.margin_right2]"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list4"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
:content="!display?'暂无数据':''"
|
width="200"
|
trigger="click"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '5_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="[item.classhide, item.margin_right2, item.margin_left4]"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list5"
|
:key="index"
|
placement="bottom"
|
:content="!display?'暂无数据':''"
|
title="状态信息"
|
width="200"
|
trigger="click"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '6_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="[item.classhide]"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list6"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
:content="!display?'暂无数据':''"
|
width="200"
|
trigger="click"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '7_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="item.classhide"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list7"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
:content="!display?'暂无数据':''"
|
width="200"
|
trigger="click"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '8_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="[item.classhide, item.margin_right7]"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list8"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
:content="!display?'暂无数据':''"
|
width="200"
|
trigger="click"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '9_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
|
<Tag
|
class="box"
|
:class="[item.classhide, item.boxwidth, item.margin_left5]"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
|
<div class="tag-group">
|
<el-popover
|
v-for="(item, index) in list9"
|
:key="index"
|
placement="bottom"
|
title="状态信息"
|
:content="!display?'暂无数据':''"
|
width="200"
|
trigger="click"
|
:disabled="item.popoverdis"
|
:name="'item'"
|
:id="item.id != null ? item.id : '10_' + index"
|
@keydown.native="keyDownCtrl($event, item)"
|
>
|
<Tag
|
class="box"
|
:class="item.classhide"
|
:color="item.color"
|
@click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
|
slot="reference"
|
>{{!isNaN(item.id)?item.id:""}}</Tag>
|
</el-popover>
|
</div>
|
<div id="rectangular"></div>
|
<Tag class="zhuzi1" color="red" slot="reference" >柱子</Tag>
|
<Tag class="zhuzi2" color="red" slot="reference" >柱子</Tag>
|
<Tag class="zhuzi3" color="red" slot="reference" >柱子</Tag>
|
<Tag class="zhuzi4" color="red" slot="reference" >柱子</Tag>
|
<Tag class="zhuzi5" color="red" slot="reference" >柱子</Tag>
|
<Tag class="zhuzi6" color="red" slot="reference" >柱子</Tag>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import http from "./../api/http.js";
|
import $ from "jquery";
|
export default {
|
data() {
|
return {
|
display:false,
|
selectIdList: [],
|
value3: false,
|
styles: {
|
height: 'calc(100% - 55px)',
|
overflow: 'auto',
|
paddingBottom: '53px',
|
position: 'static'
|
},
|
formdrawer: {
|
location: "",
|
materiel_type:''
|
},
|
options: [{
|
value: '选项1',
|
label: '阴极粉料'
|
}, {
|
value: '选项2',
|
label: '阳极粉料'
|
}, {
|
value: '选项3',
|
label: '阴极泊材'
|
}, {
|
value: '选项4',
|
label: '阳极泊材'
|
}, {
|
value: '选项5',
|
label: '阳极辅料'
|
}],
|
formLabelWidth: "80px",
|
//颜色数据
|
colors: [
|
"success",
|
"primary",
|
"error",
|
"warning",
|
"magenta",
|
"red",
|
"volcano",
|
"orange",
|
"gold",
|
"green",
|
"cyan",
|
"blue",
|
"geekblue",
|
"#FFA2D3",
|
"default",
|
],
|
//#region wcs货位图数据
|
list0: [
|
{ color: "green", popoverdis: true, id: "008-022" },
|
{ color: "green", popoverdis: true, id: "008-021" },
|
{ color: "green", popoverdis: true, id: "008-020" },
|
{ color: "green", popoverdis: true, id: "008-019" },
|
{ color: "green", popoverdis: true, id: "008-018" },
|
{ color: "green", popoverdis: true, id: "008-017" },
|
{ color: "green", popoverdis: true, id: "008-016" },
|
{ color: "green", popoverdis: true, id: "008-015" },
|
{ color: "green", popoverdis: true, id: "008-014" },
|
{ color: "green", popoverdis: true, id: "008-013" },
|
{ color: "green", popoverdis: true, id: "008-012" },
|
{ color: "green", popoverdis: true, id: "008-011" },
|
{ color: "green", popoverdis: true, id: "008-010" },
|
{ color: "green", popoverdis: true, id: "008-009" },
|
{ color: "green", popoverdis: true, id: "008-008" },
|
{ color: "green", popoverdis: true, id: "008-007" },
|
{ color: "green", popoverdis: true, id: "008-006" },
|
{ color: "green", popoverdis: true, id: "008-005" },
|
{ color: "green", popoverdis: true, id: "008-004" },
|
{ color: "green", popoverdis: true, id: "008-003" },
|
{ color: "green", popoverdis: true, id: "008-002" },
|
{ color: "green", popoverdis: true, id: "008-001" },
|
],
|
list1: [
|
{ color: "green", popoverdis: true, id: "007-022" },
|
{ color: "green", popoverdis: true, id: "007-021" },
|
{ color: "green", popoverdis: true, id: "007-020" },
|
{ color: "green", popoverdis: true, id: "007-019" },
|
{ color: "green", popoverdis: true, id: "007-018" },
|
{ color: "green", popoverdis: true, id: "007-017" },
|
{ color: "green", popoverdis: true, id: "007-016" },
|
{ color: "green", popoverdis: true, id: "007-015" },
|
{ color: "green", popoverdis: true, id: "007-014" },
|
{ color: "green", popoverdis: true, id: "007-013" },
|
{ color: "green", popoverdis: true, id: "007-012" },
|
{ color: "green", popoverdis: true, id: "007-011" },
|
{ color: "green", popoverdis: true, id: "007-010" },
|
{ color: "green", popoverdis: true, id: "007-009" },
|
{ color: "green", popoverdis: true, id: "007-008" },
|
{ color: "green", popoverdis: true, id: "007-007" },
|
{ color: "green", popoverdis: true, id: "007-006" },
|
{ color: "green", popoverdis: true, id: "007-005" },
|
{ color: "green", popoverdis: true, id: "007-004" },
|
{ color: "green", popoverdis: true, id: "007-003" },
|
{ color: "green", popoverdis: true, id: "007-002" },
|
{ color: "green", popoverdis: true, id: "007-001" },
|
],
|
list2: [
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
],
|
list3: [
|
{ color: "green", popoverdis: true, id: "006-022" },
|
{ color: "green", popoverdis: true, id: "006-021" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "006-018" },
|
{ color: "green", popoverdis: true, id: "006-017" },
|
{ color: "green", popoverdis: true, id: "006-016" },
|
{ color: "green", popoverdis: true, id: "006-015" },
|
{ color: "green", popoverdis: true, id: "006-014" },
|
{ color: "green", popoverdis: true, id: "006-013" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "006-011" },
|
{ color: "green", popoverdis: true, id: "006-010" },
|
{ color: "green", popoverdis: true, id: "006-009" },
|
{ color: "green", popoverdis: true, id: "006-008" },
|
{ color: "green", popoverdis: true, id: "006-007" },
|
{ color: "green", popoverdis: true, id: "006-006" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "006-003" },
|
{ color: "green", popoverdis: true, id: "006-002" },
|
{ color: "green", popoverdis: true, id: "006-001" },
|
],
|
list4: [
|
{ color: "green", popoverdis: true, id: "005-022" },
|
{ color: "green", popoverdis: true, id: "005-021" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "005-018" },
|
{ color: "green", popoverdis: true, id: "005-017" },
|
{ color: "green", popoverdis: true, id: "005-016" },
|
{ color: "green", popoverdis: true, id: "005-015" },
|
{ color: "green", popoverdis: true, id: "005-014" },
|
{ color: "green", popoverdis: true, id: "005-013" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "005-011" },
|
{ color: "green", popoverdis: true, id: "005-010" },
|
{ color: "green", popoverdis: true, id: "005-009" },
|
{ color: "green", popoverdis: true, id: "005-008" },
|
{ color: "green", popoverdis: true, id: "005-007" },
|
{ color: "green", popoverdis: true, id: "005-006" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "005-003" },
|
{ color: "green", popoverdis: true, id: "005-002" },
|
{ color: "green", popoverdis: true, id: "005-001" },
|
],
|
list5: [
|
{ color: "green", popoverdis: true, id: "004-022" },
|
{ color: "green", popoverdis: true, id: "004-021" },
|
{ color: "green", popoverdis: true, id: "004-020" },
|
{ color: "green", popoverdis: true, id: "004-019" },
|
{ color: "green", popoverdis: true, id: "004-018" },
|
{ color: "green", popoverdis: true, id: "004-017" },
|
{ color: "green", popoverdis: true, id: "004-016" },
|
{ color: "green", popoverdis: true, id: "004-015" },
|
{ color: "green", popoverdis: true, id: "004-014" },
|
{ color: "green", popoverdis: true, id: "004-013" },
|
{ color: "green", popoverdis: true, id: "004-012" },
|
{ color: "green", popoverdis: true, id: "004-011" },
|
{ color: "green", popoverdis: true, id: "004-010" },
|
{ color: "green", popoverdis: true, id: "004-009" },
|
{ color: "green", popoverdis: true, id: "004-008" },
|
{ color: "green", popoverdis: true, id: "004-007" },
|
{ color: "green", popoverdis: true, id: "004-006" },
|
{ color: "green", popoverdis: true, id: "004-005" },
|
{ color: "green", popoverdis: true, id: "004-004" },
|
{ color: "green", popoverdis: true, id: "004-003" },
|
{ color: "green", popoverdis: true, id: "004-002" },
|
{ color: "green", popoverdis: true, id: "004-001" },
|
],
|
list6: [
|
{ color: "green", popoverdis: true, id: "003-022" },
|
{ color: "green", popoverdis: true, id: "003-021" },
|
{ color: "green", popoverdis: true, id: "003-020" },
|
{ color: "green", popoverdis: true, id: "003-019" },
|
{ color: "green", popoverdis: true, id: "003-018" },
|
{ color: "green", popoverdis: true, id: "003-017" },
|
{ color: "green", popoverdis: true, id: "003-016" },
|
{ color: "green", popoverdis: true, id: "003-015" },
|
{ color: "green", popoverdis: true, id: "003-014" },
|
{ color: "green", popoverdis: true, id: "003-013" },
|
{ color: "green", popoverdis: true, id: "003-012" },
|
{ color: "green", popoverdis: true, id: "003-011" },
|
{ color: "green", popoverdis: true, id: "003-010" },
|
{ color: "green", popoverdis: true, id: "003-009" },
|
{ color: "green", popoverdis: true, id: "003-008" },
|
{ color: "green", popoverdis: true, id: "003-007" },
|
{ color: "green", popoverdis: true, id: "003-006" },
|
{ color: "green", popoverdis: true, id: "003-005" },
|
{ color: "green", popoverdis: true, id: "003-004" },
|
{ color: "green", popoverdis: true, id: "003-003" },
|
{ color: "green", popoverdis: true, id: "003-002" },
|
{ color: "green", popoverdis: true, id: "003-001" },
|
],
|
list7: [
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
{ color: "blue", classhide: "devices", popoverdis: true },
|
],
|
list8: [
|
{ color: "green", popoverdis: true, id: "002-022" },
|
{ color: "green", popoverdis: true, id: "002-021" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "002-018" },
|
{ color: "green", popoverdis: true, id: "002-017" },
|
{ color: "green", popoverdis: true, id: "002-016" },
|
{ color: "green", popoverdis: true, id: "002-015" },
|
{ color: "green", popoverdis: true, id: "002-014" },
|
{ color: "green", popoverdis: true, id: "002-013" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "002-011" },
|
{ color: "green", popoverdis: true, id: "002-010" },
|
{ color: "green", popoverdis: true, id: "002-009" },
|
{ color: "green", popoverdis: true, id: "002-008" },
|
{ color: "green", popoverdis: true, id: "002-007" },
|
{ color: "green", popoverdis: true, id: "002-006" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "002-003" },
|
{ color: "green", popoverdis: true, id: "002-002" },
|
{ color: "green", popoverdis: true, id: "002-001" },
|
],
|
list9: [
|
{ color: "green", popoverdis: true, id: "001-022" },
|
{ color: "green", popoverdis: true, id: "001-021" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "001-018" },
|
{ color: "green", popoverdis: true, id: "001-017" },
|
{ color: "green", popoverdis: true, id: "001-016" },
|
{ color: "green", popoverdis: true, id: "001-015" },
|
{ color: "green", popoverdis: true, id: "001-014" },
|
{ color: "green", popoverdis: true, id: "001-013" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "001-011" },
|
{ color: "green", popoverdis: true, id: "001-010" },
|
{ color: "green", popoverdis: true, id: "001-009" },
|
{ color: "green", popoverdis: true, id: "001-008" },
|
{ color: "green", popoverdis: true, id: "001-007" },
|
{ color: "green", popoverdis: true, id: "001-006" },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", classhide: "devices", popoverdis: true },
|
{ color: "green", popoverdis: true, id: "001-003" },
|
{ color: "green", popoverdis: true, id: "001-002" },
|
{ color: "green", popoverdis: true, id: "001-001" },
|
],
|
};
|
},
|
methods: {
|
//以下四个方法都是关于多选的
|
//按住ctrl多选
|
keyDownCtrl(event, item) {
|
//获取点击对象
|
let div = event.currentTarget;
|
let orginClassName = div.lastChild;
|
this.isRightClickCtrl = true;
|
if (this.selectIdList.indexOf(item.id) == -1) {
|
try {
|
var locationNum = item.id.substring(4);
|
var leftNum = item.id.substr(0, item.id.indexOf("-"));
|
if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
|
this.selectIdList.push(item.id);
|
orginClassName.className = orginClassName.className + " ctrlClick";
|
}
|
} catch (error) {}
|
}
|
},
|
//还原样式
|
setFileDivClass() {
|
let files = document.getElementsByName("item");
|
for (let index = 0; index < files.length; index++) {
|
const file = files[index];
|
var lastdiv = file.lastChild;
|
lastdiv.classList.remove("ctrlClick");
|
}
|
},
|
|
//鼠标左键按下方法
|
onmousedownClick(event) {
|
this.isRightClick = true;
|
this.start_x = event.clientX;
|
this.start_y = event.clientY;
|
let that = this;
|
//console.log(this.start_x,this.start_y)
|
document.onmousemove = function (event) {
|
let end_x = event.clientX;
|
let end_y = event.clientY;
|
let divElement = document.getElementById("rectangular");
|
divElement.style.display = "block";
|
divElement.className = "rectangular";
|
//从左往右
|
// 画矩形
|
if (that.start_x < end_x) {
|
divElement.style.width = end_x - that.start_x + "px";
|
divElement.style.height =
|
(that.start_y > end_y > 0
|
? that.start_y - end_y
|
: end_y - that.start_y) + "px";
|
divElement.style.left = that.start_x + "px";
|
divElement.style.right = end_x + "px";
|
//从下往上
|
if (that.start_y > end_y) {
|
divElement.style.top = end_y + "px";
|
divElement.style.bottom = that.start_y + "px";
|
} else {
|
divElement.style.top = that.start_y + "px";
|
divElement.style.bottom = end_y + "px";
|
}
|
} else {
|
divElement.style.width = that.start_x - end_x + "px";
|
divElement.style.height =
|
(that.start_y > end_y > 0
|
? that.start_y - end_y
|
: end_y - that.start_y) + "px";
|
divElement.style.left = end_x + "px";
|
divElement.style.right = that.start_x + "px";
|
//从下往上
|
if (that.start_y > end_y) {
|
divElement.style.top = end_y + "px";
|
divElement.style.bottom = that.start_y + "px";
|
} else {
|
divElement.style.top = that.start_y + "px";
|
divElement.style.bottom = end_y + "px";
|
}
|
}
|
};
|
document.onmouseup = function () {
|
//禁用鼠标移动时间
|
document.onmousemove = function () {
|
return false;
|
};
|
// 移动样式清空
|
let divElement = document.getElementById("rectangular");
|
divElement.style.display = "none";
|
};
|
},
|
//鼠标左键抬起方法
|
handMouseUp: function (event) {
|
this.end_x = event.clientX;
|
this.end_y = event.clientY;
|
//核心内容，根据你的鼠标移动矩形区域来判断div是否在里面
|
this.isRightClick = false;
|
let files = document.getElementsByName("item");
|
let a = 0;
|
for (let i = 0; i < files.length; i++) {
|
const file = files[i];
|
let lastdiv = file.lastChild;
|
let id = file.id;
|
let el = lastdiv.getBoundingClientRect();
|
let top = el.top; //上边界
|
let left = el.left; //左边界
|
let right = el.right; //右边界
|
let bottom = el.bottom; //下边界
|
//原地点击
|
if (this.start_x == this.end_x) {
|
if (
|
!(
|
this.end_x >= left &&
|
this.end_x <= right &&
|
this.end_y > top &&
|
this.end_y < bottom
|
)
|
) {
|
a += 1;
|
}
|
} else {
|
//从左往右
|
if (this.start_x < this.end_x) {
|
//从下到上
|
if (this.start_y > this.end_y) {
|
if (top < this.start_y && bottom > this.end_y) {
|
if (left < this.end_x && right > this.start_x) {
|
if (this.selectIdList.indexOf(id) === -1) {
|
try {
|
var locationNum = id.substring(4);
|
var leftNum = id.substr(0, id.indexOf("-"));
|
if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
|
this.selectIdList.push(id);
|
var lastdiv = file.lastChild;
|
lastdiv.className = lastdiv.className + " ctrlClick";
|
}
|
} catch (error) {
|
}
|
}
|
}
|
}
|
}
|
//从上到下
|
else {
|
if (top < this.end_y && bottom > this.start_y) {
|
if (left < this.end_x && right > this.start_x) {
|
if (this.selectIdList.indexOf(id) === -1) {
|
try {
|
var locationNum = id.substring(4);
|
var leftNum = id.substr(0, id.indexOf("-"));
|
if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
|
this.selectIdList.push(id);
|
var lastdiv = file.lastChild;
|
lastdiv.className = lastdiv.className + " ctrlClick";
|
}
|
} catch (error) {
|
}
|
}
|
}
|
}
|
}
|
//从右往左
|
} else {
|
//从下到上
|
if (this.start_y > this.end_y) {
|
if (top < this.start_y && bottom > this.end_y) {
|
if (left < this.start_x && right > this.end_x) {
|
if (this.selectIdList.indexOf(id) === -1) {
|
try {
|
var locationNum = id.substring(4);
|
var leftNum = id.substr(0, id.indexOf("-"));
|
if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
|
this.selectIdList.push(id);
|
var lastdiv = file.lastChild;
|
lastdiv.className = lastdiv.className + " ctrlClick";
|
}
|
} catch (error) {
|
}
|
}
|
}
|
}
|
}
|
//从上到下
|
else {
|
if (top < this.end_y && bottom > this.start_y) {
|
if (left < this.start_x && right > this.end_x) {
|
if (this.selectIdList.indexOf(id) === -1) {
|
try {
|
var locationNum = id.substring(4);
|
var leftNum = id.substr(0, id.indexOf("-"));
|
if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
|
this.selectIdList.push(id);
|
var lastdiv = file.lastChild;
|
lastdiv.className = lastdiv.className + " ctrlClick";
|
}
|
} catch (error) {
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
//如果点击空白处
|
if (a == files.length) {
|
var obj = event.srcElement;
|
if(obj.type!="submit"){
|
this.selectIdList = [];
|
this.setFileDivClass();
|
}
|
else{
|
this.formdrawer.location=this.selectIdList.toString();
|
}
|
}
|
},
|
//货位绑定类型
|
onSubmitLocation(){
|
}
|
},
|
created() {
|
},
|
};
|
</script>
|
|
<style>
|
.rectangular {
|
background-color: rgba(235, 239, 243, 0.45);
|
position: fixed;
|
border: 1px solid rgba(24, 135, 243, 1);
|
z-index: 20;
|
}
|
.el-form-item--mini.el-form-item,
|
.el-form-item--small.el-form-item {
|
margin-bottom: 0px;
|
}
|
.demo-drawer-footer{
|
width: 100%;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
border-top: 1px solid #e8e8e8;
|
padding: 10px 16px;
|
text-align: right;
|
background: #fff;
|
}
|
* {
|
margin: 0 auto;
|
padding: 0;
|
list-style-type: none;
|
font-family: "微软雅黑";
|
}
|
|
.el-row {
|
margin-bottom: 10px;
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
.bg-purple {
|
background: #d3dce6;
|
}
|
.bg-purple-light {
|
background: #e5e9f2;
|
}
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
}
|
.model-backcolor {
|
background: rgb(144, 238, 144);
|
}
|
|
.nav-header {
|
margin-left: 60px;
|
width: 500px;
|
height: 50px;
|
line-height: 50px;
|
text-align: left;
|
color: white;
|
font-size: 18px;
|
font-weight: bold;
|
letter-spacing: 2px;
|
padding-top: 50px;
|
/*font-style:italic;斜体*/
|
}
|
|
.navbar-fixed-top {
|
left: -17px !important;
|
right: 17px !important;
|
top: 6px !important;
|
}
|
|
#logo {
|
width: 60px;
|
height: 60px;
|
margin-top: -8px;
|
}
|
</style>
|
|
<style lang="less" scoped>
|
.content {
|
/* padding-top: 50px; */
|
height: 100%;
|
width: 100%;
|
min-width: 100%;
|
}
|
.content-top {
|
padding-top: 1.5%;
|
height: 500px;
|
width: 1650px;
|
min-width: 1650px;
|
margin-left: 3%;
|
margin-bottom: 1%;
|
/* float: left; */
|
}
|
.heartbeat-tb tr td {
|
font-size: 8px;
|
width: 70px;
|
height: 18px;
|
/*border:1px solid black;*/
|
}
|
/*报警心跳区域*/
|
/*日期*/
|
.demo {
|
position: relative;
|
width: 56%;
|
margin-left: 10px;
|
}
|
|
.demo i {
|
position: absolute;
|
bottom: 10px;
|
right: 24px;
|
top: auto;
|
cursor: pointer;
|
}
|
.ctrlClick {
|
border: 1px solid rgba(243, 24, 24, 0.5);
|
}
|
.content-down {
|
height: 10%;
|
width: 1367px;
|
min-width: 1367px;
|
min-height: 340px;
|
margin-left: 12%;
|
}
|
|
.box {
|
width: 43px;
|
height: 43px;
|
margin-right: 4px;
|
margin-bottom: 4px;
|
padding: 0px;
|
line-height: 25px;
|
text-align: center;
|
}
|
.devices {
|
border: 0px solid #ffffff;
|
background-color: white;
|
}
|
|
.margin11 {
|
margin-right: 758px;
|
}
|
.classmargin10_1 {
|
margin-right: 468px;
|
}
|
.boxwidth {
|
width: 54px;
|
}
|
.margin_right0 {
|
margin-right: 565px;
|
}
|
.margin_right2 {
|
margin-right: 584px;
|
}
|
.margin_right7 {
|
margin-right: 40px;
|
}
|
.margin_left5 {
|
float: right;
|
margin-right: 52px;
|
height: 56px;
|
line-height: 56px;
|
}
|
.margin_left4 {
|
margin-left: 587px;
|
}
|
.zhuzi1{
|
width: 90px;
|
height: 90px;
|
line-height: 90px;
|
text-align: center;
|
position: relative;
|
top: -342px;
|
left: 94px;
|
}
|
.zhuzi2{
|
width: 90px;
|
height: 90px;
|
line-height: 90px;
|
text-align: center;
|
position: relative;
|
top: -97px;
|
right: 3px;
|
}
|
.zhuzi3{
|
width: 90px;
|
height: 90px;
|
line-height: 90px;
|
text-align: center;
|
position: relative;
|
top: -342px;
|
left: 604px;
|
}
|
.zhuzi4{
|
width: 90px;
|
height: 90px;
|
line-height: 90px;
|
text-align: center;
|
position: relative;
|
top: -97px;
|
left: 506px;
|
}
|
.zhuzi5{
|
width: 45px;
|
height: 90px;
|
line-height: 90px;
|
text-align: center;
|
position: relative;
|
top: -342px;
|
left: 79px;
|
}
|
.zhuzi6{
|
width: 45px;
|
height: 90px;
|
line-height: 90px;
|
text-align: center;
|
position: relative;
|
top: -97px;
|
left: 26px;
|
}
|
</style>
|
