<template>
|
<div>
|
<a-modal width="70%" title="大屏页面布局" :maskClosable="false" :visible="configureFlag" :footer='versionId === -1? "" : undefined' @cancel="handleCancel" @ok="handleOk">
|
<a-tabs :active-key="versionId" tabPosition="left" @change="getSnsor" v-if="versionId !== -1">
|
<a-tab-pane v-for="(item, key, index) in versionData" :key="item.id" :tab="item.name" >
|
<a-page-header
|
style="border: 1px solid rgb(235, 237, 240)"
|
title="待选区"
|
:sub-title="'('+allWaitSensors.length+')'"
|
>
|
<a-row type="flex">
|
<a-col :span="8" :order="3" v-for="(item, index) in allWaitSensors" :key="index" style="font-size: 14px; opacity: 0.8; margin-top: 12px">
|
{{ item.name }}
|
<a-dropdown style="float: right; margin-right:40% " :trigger="['click']">
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
移到 <a-icon type="down" />
|
</a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a @click="toDefault(0,item, index)">默认区</a>
|
</a-menu-item>
|
<a-menu-item v-if="coreMonitorItems.length === 6" disabled>
|
<span style="color:lightgrey; ">核心区(已满)</span>
|
</a-menu-item>
|
<a-menu-item v-else>
|
<a @click="toCore(0,item, index)">核心区</a>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</a-col>
|
</a-row>
|
<a-button style="font-size: 14px; margin-top: 12px; margin-left: 74%" @click="toDefault(1,{}, -1)" v-if="allWaitSensors.length > 0">全部添加到默认区</a-button>
|
<p style="width: 100%; height: 60px; line-height: 60px; text-align: center; font-size: 20px ">图表显示 : {{ chartSensorKey.name }}</p>
|
</a-page-header>
|
<a-page-header
|
style="border: 1px solid rgb(235, 237, 240)"
|
title="默认区"
|
:sub-title="'('+defaultMonitorItems.length+')'"
|
>
|
<a-list :data-source="defaultMonitorItems" :split="false">
|
<a-list-item slot="renderItem" slot-scope="item, index" :key="item.code">
|
<a-list-item-meta :description="item.name">
|
</a-list-item-meta>
|
<a style="margin-right: 16%;width: 40px" @click="clickUp('defaultMonitorItems',index)"> 上移 </a>
|
<a style="margin-right: 16%;width: 40px" @click="clickDown('defaultMonitorItems', index)"> 下移 </a>
|
<a style="margin-right: 16%;width: 80px" @click="setChart(item)"> 设为图表 </a>
|
<a-dropdown style="float: right; margin-right:10% " :trigger="['click']">
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
移到 <a-icon type="down" />
|
</a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a @click="toWait(0,item, index)">待选区</a>
|
</a-menu-item>
|
<a-menu-item v-if="coreMonitorItems.length === 6" disabled>
|
<span style="color:lightgrey; ">核心区(已满)</span>
|
</a-menu-item>
|
<a-menu-item v-else>
|
<a @click="toCore(1,item, index)">核心区</a>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</a-list-item>
|
</a-list>
|
</a-page-header>
|
<a-page-header
|
style="border: 1px solid rgb(235, 237, 240)"
|
title="核心区"
|
:sub-title="'('+coreMonitorItems.length+'/6)'"
|
>
|
<a-list :data-source="coreMonitorItems" :split="false">
|
<a-list-item slot="renderItem" slot-scope="item, index" :key="item.code">
|
<a-list-item-meta :description="item.name">
|
</a-list-item-meta>
|
<a style="margin-right: 16%;width: 40px" @click="clickUp('coreMonitorItems',index)"> 上移 </a>
|
<a style="margin-right: 16%;width: 40px" @click="clickDown('coreMonitorItems', index)"> 下移 </a>
|
<a style="margin-right: 16%;width: 80px" @click="setChart(item)"> 设为图表 </a>
|
<a-dropdown style="float: right; margin-right:10% " :trigger="['click']">
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
移到 <a-icon type="down" />
|
</a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a @click="toWait(1,item, index)">待选区</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a @click="toDefault(2,item, index)">默认区</a>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</a-list-item>
|
</a-list>
|
</a-page-header>
|
<a-page-header
|
style="border: 1px solid rgb(235, 237, 240)"
|
title="固定区"
|
:sub-title="'(' + fixed +')'"
|
>
|
<a-checkbox :checked="windFlag" v-if="windDir.code" @change="onChange">
|
{{ windDir.name }}
|
</a-checkbox>
|
|
</a-page-header>
|
</a-tab-pane>
|
</a-tabs>
|
<a-result v-else title="该组织下没有可选型号!">
|
<template #icon>
|
<a-icon type="smile" theme="twoTone" />
|
</template>
|
</a-result>
|
</a-modal>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
|
import { get, post } from "@/util/request";
|
|
@Component({
|
components: {
|
}
|
})
|
export default class ConfigureWeb extends Vue {
|
|
// 存放所有型号
|
private versionData: any = null
|
|
// 存放图表区因子
|
private chartSensorKey: any = {}
|
|
// 存放核心区因子
|
private coreMonitorItems: any[] = []
|
|
// 存放默认区区因子
|
private defaultMonitorItems: any[] = []
|
|
// 存放所有待选区因子
|
private allWaitSensors: any = []
|
|
// 存放当前选中versionId
|
private versionId: any = -1
|
|
// 存放固定数量
|
private fixed: number = 0
|
|
// 判断风向有没有选中
|
private windFlag: boolean = false
|
|
// 存放固定区风向数据
|
private windDir: any = {
|
}
|
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private configureFlag!: boolean
|
|
@Prop({
|
type: Object,
|
default: () => {
|
}
|
})
|
private configRecord: any
|
// 监听弹框变化
|
@Watch('configureFlag', {
|
deep: true
|
})
|
private watchConfigureFlag(newVal: boolean, oldVal: boolean) {
|
if (newVal === true) {
|
this.coreMonitorItems = []
|
this.defaultMonitorItems = []
|
this.chartSensorKey = {}
|
this.versionId = -1
|
this.getAllVersion()
|
setTimeout(() => {
|
this.getSensorByVersionId()
|
},100)
|
}
|
}
|
|
|
// 根据组织id获取所有型号
|
private getAllVersion() {
|
get('version/queryByOrgId',{
|
organizationId: this.configRecord.id
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.versionData = res.data.data.versions
|
if (this.versionData) {
|
if (this.versionData.length > 0) {
|
if (this.versionId === -1) {
|
this.versionId = this.versionData[0].id
|
}
|
}
|
}
|
}
|
})
|
}
|
|
// 移动到默认区
|
private toDefault(flag: number,item: any, index: number) {
|
if (flag === 0) {
|
let obj = {
|
code: item.code,
|
name: item.name
|
}
|
this.allWaitSensors.splice(index,1)
|
this.defaultMonitorItems.push(obj)
|
} else if (flag == 1) {
|
if (this.allWaitSensors.length > 0) {
|
for (let i = 0; i < this.allWaitSensors.length; i++) {
|
let obj = {
|
code: this.allWaitSensors[i].code,
|
name: this.allWaitSensors[i].name
|
}
|
this.defaultMonitorItems.push(obj)
|
}
|
this.allWaitSensors = []
|
}
|
} else {
|
let obj = {
|
code: item.code,
|
name: item.name
|
}
|
this.coreMonitorItems.splice(index,1)
|
this.defaultMonitorItems.push(obj)
|
}
|
}
|
|
// 移动到核心区
|
private toCore(flag: number,item: any, index: number) {
|
if (flag === 0) {
|
let obj = {
|
code: item.code,
|
name: item.name
|
}
|
if (this.coreMonitorItems.length < 6) {
|
this.allWaitSensors.splice(index,1)
|
this.coreMonitorItems.push(obj)
|
} else {
|
this.$message.warning('核心区')
|
}
|
} else {
|
let obj = {
|
code: item.code,
|
name: item.name
|
}
|
if (this.coreMonitorItems.length < 6) {
|
this.defaultMonitorItems.splice(index,1)
|
this.coreMonitorItems.push(obj)
|
} else {
|
this.$message.warning('核心区')
|
}
|
}
|
}
|
|
// 移动到待选区
|
private toWait( flag: number,item: any, index: any) {
|
if (flag === 0) {
|
this.defaultMonitorItems.splice(index,1)
|
if (item.code === this.chartSensorKey.code) {
|
this.chartSensorKey = {}
|
}
|
this.allWaitSensors.push(item)
|
} else {
|
this.coreMonitorItems.splice(index,1)
|
if (item.code === this.chartSensorKey.code) {
|
this.chartSensorKey = {}
|
}
|
this.allWaitSensors.push(item)
|
}
|
}
|
|
// 根据型号id获取因子
|
private getSensorByVersionId() {
|
get("version/queryById", {
|
id: this.versionId,
|
page: 1,
|
size: 1000
|
})
|
.then((res: any) => {
|
if (res.data.code === 0) {
|
this.allWaitSensors = res.data.data.versions[0].sensors
|
for (let i = 0; i < this.allWaitSensors.length; i++) {
|
if (this.allWaitSensors[i].code === "a01008") {
|
this.windDir.code = this.allWaitSensors[i].code
|
this.windDir.name = this.allWaitSensors[i].name
|
this.allWaitSensors.splice(i,1)
|
this.fixed = 1
|
break
|
}
|
}
|
this.getOtherSensorsData()
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
|
}
|
|
// 风向
|
private onChange(e: any) {
|
this.windFlag = !this.windFlag
|
}
|
|
// 获取非待选区数据
|
private getOtherSensorsData() {
|
// 根据型号以及组织id获取默认区，核心区因子
|
get("organizationLayout/getLayoutData", {
|
version_id: this.versionId,
|
organization_id: this.configRecord.id
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
let sensors = res.data.data
|
if (sensors.length > 0) {
|
for (let i = 0; i < sensors.length; i++) {
|
if (sensors[i].position === 'chartSensorKey') {
|
let name = ''
|
for (let j = 0; j < this.allWaitSensors.length; j++) {
|
if (sensors[i].sensor_code === this.allWaitSensors[j].code) {
|
name = this.allWaitSensors[j].name
|
}
|
}
|
let obj = {
|
code: sensors[i].sensor_code,
|
name: name
|
}
|
this.chartSensorKey = obj
|
} else if (sensors[i].position === 'defaultMonitorItems') {
|
for (let j = 0; j < this.allWaitSensors.length; j++) {
|
let name = ''
|
let code = ''
|
if (sensors[i].sensor_code === this.allWaitSensors[j].code) {
|
name = this.allWaitSensors[j].name
|
code = this.allWaitSensors[j].code
|
let obj = {
|
code: code,
|
name: name
|
}
|
this.defaultMonitorItems.push(obj)
|
}
|
}
|
} else if (sensors[i].position === 'coreMonitorItems') {
|
for (let j = 0; j < this.allWaitSensors.length; j++) {
|
let name = ''
|
let code = ''
|
if (sensors[i].sensor_code === this.allWaitSensors[j].code) {
|
name = this.allWaitSensors[j].name
|
code = this.allWaitSensors[j].code
|
let obj = {
|
code: code,
|
name: name
|
}
|
this.coreMonitorItems.push(obj)
|
}
|
}
|
} else if (sensors[i].position === 'fixedMonitorItems') {
|
console.log(333);
|
this.windFlag = true
|
}
|
}
|
|
for (let i = 0; i <sensors.length; i++) {
|
for (let j = 0; j < this.allWaitSensors.length; j++) {
|
if (sensors[i].sensor_code === this.allWaitSensors[j].code) {
|
this.allWaitSensors.splice(j,1)
|
}
|
}
|
}
|
}
|
|
}
|
|
})
|
|
}
|
|
// 设为图表
|
private setChart(item: any) {
|
this.chartSensorKey = item
|
}
|
|
//点击上移
|
|
private clickUp(str: any,index: any){
|
if (str === 'coreMonitorItems') {
|
if(index === 0){
|
this.$message.warning('该因子已经在第一位')
|
}else {
|
this.swapArray(this.coreMonitorItems, index-1, index);
|
}
|
}else {
|
if(index === 0){
|
this.$message.warning('该因子已经在第一位')
|
}else {
|
this.swapArray(this.defaultMonitorItems, index-1, index);
|
}
|
}
|
}
|
//点击下移
|
private clickDown(str: any,index: any){
|
if (str === 'coreMonitorItems') {
|
if(index === this.coreMonitorItems.length - 1){
|
this.$message.warning('该因子已经在最后一位')
|
}else {
|
this.swapArray(this.coreMonitorItems, index, index+1);
|
}
|
}else {
|
if(index === this.defaultMonitorItems.length - 1){
|
this.$message.warning('该因子已经在最后一位')
|
}else {
|
this.swapArray(this.defaultMonitorItems, index, index+1);
|
}
|
}
|
}
|
//数组元素互换位置
|
private swapArray(arr: any, index1: any, index2: any) {
|
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
|
return arr;
|
}
|
|
|
// 改变型号
|
private getSnsor(id: any) {
|
this.versionId = id
|
this.coreMonitorItems = []
|
this.defaultMonitorItems = []
|
this.chartSensorKey = {}
|
this.windDir = {}
|
this.windFlag = false
|
this.fixed = 0
|
this.getSensorByVersionId()
|
}
|
|
// 用于传递flag
|
@Emit('turnConfigureFlag')
|
private sendConfigureFlag(flag: boolean) {
|
return flag
|
}
|
private handleCancel() {
|
this.versionId = -1
|
this.sendConfigureFlag(false)
|
this.windFlag = false
|
}
|
private handleOk() {
|
const organizationLayouts = []
|
|
if (this.chartSensorKey.code) {
|
const obj = {
|
organizationId: this.configRecord.id, //组织id
|
versionId: this.versionId,
|
position: 'chartSensorKey',
|
positionIndex: 0,
|
sensorCode: this.chartSensorKey.code
|
}
|
organizationLayouts.push(obj)
|
}
|
if (this.defaultMonitorItems.length > 0) {
|
for (let i = 0; i < this.defaultMonitorItems.length; i++) {
|
const obj = {
|
organizationId: this.configRecord.id, //组织id
|
versionId: this.versionId,
|
position: 'defaultMonitorItems',
|
positionIndex: i,
|
sensorCode: this.defaultMonitorItems[i].code
|
}
|
organizationLayouts.push(obj)
|
}
|
}
|
if (this.coreMonitorItems.length > 0) {
|
for (let i = 0; i < this.coreMonitorItems.length; i++) {
|
const obj = {
|
organizationId: this.configRecord.id, //组织id
|
versionId: this.versionId,
|
position: 'coreMonitorItems',
|
positionIndex: i,
|
sensorCode: this.coreMonitorItems[i].code
|
}
|
organizationLayouts.push(obj)
|
}
|
}
|
if (this.windFlag === true && this.windDir.code) {
|
const obj = {
|
organizationId: this.configRecord.id, //组织id
|
versionId: this.versionId,
|
position: 'fixedMonitorItems',
|
positionIndex: 0,
|
sensorCode: this.windDir.code
|
}
|
organizationLayouts.push(obj)
|
}
|
this.windFlag = false
|
this.save(organizationLayouts)
|
//
|
}
|
|
// 保存数据
|
private save(organizationLayouts: any) {
|
post('organizationLayout/setUpLayout',
|
{
|
organizationId: this.configRecord.id,
|
versionId: this.versionId,
|
organizationLayouts
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message)
|
setTimeout(() => {
|
this.versionId = -1
|
this.sendConfigureFlag(false)
|
},100)
|
}
|
|
|
})
|
}
|
}
|
</script>
|
|
<style scoped>
|
.editable-cell {
|
position: relative;
|
}
|
|
.editable-cell-input-wrapper,
|
.editable-cell-text-wrapper {
|
padding-right: 24px;
|
}
|
|
.editable-cell-text-wrapper {
|
padding: 5px 24px 5px 5px;
|
}
|
|
.editable-cell-icon,
|
.editable-cell-icon-check {
|
position: absolute;
|
right: 0;
|
width: 20px;
|
cursor: pointer;
|
}
|
|
.editable-cell-icon {
|
line-height: 18px;
|
display: none;
|
}
|
|
.editable-cell-icon-check {
|
line-height: 28px;
|
}
|
|
.editable-cell:hover .editable-cell-icon {
|
display: inline-block;
|
}
|
|
.editable-cell-icon:hover,
|
.editable-cell-icon-check:hover {
|
color: #108ee9;
|
}
|
|
.editable-add-btn {
|
margin-bottom: 8px;
|
}
|
</style>
|
