<template>
<div class="HomeFrameControl">
<ElPopover trigger="manual" :value="activeIcon === 'FrameControl'" :visibleArrow="false" placement="left"
popper-class="global-input-search-popover">
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference"
@click.native="handleClick('FrameControl')">
<img src="@screen/images/home-FrameControl/FrameControl.svg" />
</Button>
<div class="body">
<div class="title">批量控制</div>
<span class="close" @click="() => { this.activeIcon = null; }">
<i class="el-icon-close" />
</span>
<Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
<component ref="ControlComponent" :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true"
:selectItems="data.childType" @update:activeIcon="(val) => { this.activeIcon = val }"></component>
<!-- <div class="footer">
<Button @click.native="submitClick">
确认
</Button>
<Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick"> 取消 </Button>
</div> -->
</div>
</ElPopover>
</div>
</template>
<script>
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import * as PresetFormItems from "@screen/common/PresetFormItems.js";
import { merge, cloneDeep } from "lodash";
import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js"
import { ChildTypes } from "@screen/utils/enum.js"
import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
import { delay } from "@screen/utils/common";
import { initSearch } from "@screen/utils/enum/common.js"
import DeviceParams from "@screen/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue";
import BroadcastParam from "@screen/pages/Home/components/Dialogs/Broadcast/components/BroadcastParamMulti.vue";
import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent";
const componentMap = { "语音广播": "BroadcastParam" } //DeviceTopics[deviceType]
//"情报板": undefined, "行车诱导": undefined, "疲劳唤醒": undefined, "合流区": undefined,"设备箱": "DeviceParams",
const controlMulti = Object.keys(componentMap);//6种批量控制
const DeviceTopics = {};//6种批量控制 事件专题 {key:label}
Object.keys(DeviceForMap).forEach(DeviceLabel => {
controlMulti.indexOf(DeviceLabel) !== -1 && (DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel);
});
const deviceTypeDefault = Object.keys(DeviceTopics)[0];
async function setDeviceOptions(config, filterData, formList) {
const data = await getDeviceList(config.deviceType, filterData).then(async (data) => {
await delay(600);
return data;
});
formList[4].options.options = data.map(item => {
return { label: `${item.deviceName}`, value: JSON.stringify({ id: item.id, iotDeviceId: item.iotDeviceId, deviceType: item.deviceType, otherConfig: item.otherConfig }), disabled: item.deviceState != 1 }
})
};
function changeHandle(data, formList) {
const filterData = {};
data.direction && (filterData.direction = data.direction);
data.startStakeMark && (filterData.startStakeMark = data.startStakeMark);
data.endStakeMark && (filterData.endStakeMark = data.endStakeMark);
setDeviceOptions({ deviceType: data.deviceType }, filterData, formList);
data.childType = undefined;
}
export default {
name: "HomeFrameControl",//设备控制
components: {
Button,
Form,
DeviceParams,
BroadcastParam
},
data() {
return {
activeIcon: null,
data: {},
formList: [
{
label: "设备类型:",
key: "deviceType",
type: "select",
default: deviceTypeDefault,
options: {
clearable: true,
options: Object.keys(DeviceTopics).map(key => { return { label: DeviceTopics[key], value: key } }),
},
ons: { //on监听 element事件
change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
if (data.deviceType) changeHandle(data, formList);
else data.childType = undefined;
}
},
},
{
label: "设备方向:",
key: "direction",
type: "select",
options: {
options: [
{ key: "1", label: "济南方向" },
{ key: "3", label: "菏泽方向" },
{ key: "2", label: "双向" },
],
},
ons: { //on监听 element事件
change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList);
}
},
},
merge({}, PresetFormItems.startStation,
{
options: {
options: [
{
prefix: {
text: "K",
style: {
color: "#3DE8FF",
},
},
key: "startStakeMark[0]",
default: initSearch.startStakeMark[0],
rules: [
{
message: "请补全桩号",
callback(value, data) {
console.log(value, data.startStakeMark);
if (
!((value + "")?.trim() && (data.startStakeMark[1] + "")?.trim())
)
return false;
else return true;
},
},
],
ons: { //on监听 element事件
change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList);
}
},
},
{
prefix: {
text: "+",
style: {
color: "#3DE8FF",
},
},
default: initSearch.startStakeMark[1],
key: "startStakeMark[1]",
ons: { //on监听 element事件
change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList);
}
},
},
],
}
}),
merge({}, PresetFormItems.endStation, {
options: {
options: [
{
prefix: {
text: "K",
style: {
color: "#3DE8FF",
},
},
key: "endStakeMark[0]",
default: initSearch.endStakeMark[0],
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (
!((value + "")?.trim() && (data.endStakeMark[1] + "")?.trim())
)
return false;
else return true;
},
},
],
ons: { //on监听 element事件
change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList);
}
},
},
{
prefix: {
text: "+",
style: {
color: "#3DE8FF",
},
},
default: initSearch.endStakeMark[1],
key: "endStakeMark[1]",
ons: { //on监听 element事件
change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList);
}
},
},
],
}
}),
{
label: "设备名称:",
key: "childType",
type: "select",
isAlone: true,
options: {
clearable: true,
options: [],
multiple: true,
["collapse-tags"]: true
},
visible: data => {
return true;
},
},
// {
// label: "控制操作:",
// key: "controlOp",
// type: "select",
// default: null,
// options: {
// clearable: true,
// options: [{
// label: "在线",
// value: "1"
// }, {
// label: "离线",
// value: "0"
// }]
// },
// },
],
DeviceTopics,
componentMap
}
},
// inject: ["activeDeviceTypes"],
// watch: {
// activeDeviceTypes: {
// handler(val) {
// const activeTopicOptions = []
// this.activeDeviceTypes.filter(activeDeviceType => {
// const match = activeDeviceType.match(/路测设备_(\d+)/);
// if (match) {
// const deviceType = match[1];
// DeviceTopics[deviceType] && activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });
// }
// });
// this.formList[0].options.options = activeTopicOptions;
// },
// immediate: true,
// deep: true
// }
// },
mounted() {
changeHandle(this.data, this.formList);
},
methods: {
submitClick() {
this.$refs.ControlComponent.handleSubmit()
},
cancelClick() {
this.activeIcon = null;
},
handleClick(type) {
this.activeIcon = this.activeIcon === type ? null : type;
},
filterEnd(data) {
this.activeIcon = null;
// this.filterData = data;
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
},
},
};
</script>
<style lang="scss">
div.el-popper.global-input-search-popover {
background: rgba(6, 66, 88, 0.8);
border: 1px solid rgba(42, 217, 253, 0.6);
position: relative;
padding-top: 36px;
transform: translateY(24px);
// margin-top: 6vh;
.body {
.title {
background: linear-gradient(90deg,
#237e9b 0%,
rgba(23, 145, 184, 0) 100%);
padding: 3px 9px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.close {
padding: 3px 9px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
width: fit-content;
}
}
}
</style>
<style lang="scss" scoped>
.image {
width: 50vw;
height: 65vh;
}
.HomeFrameControl {
.btn {
padding: 9px;
background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
border-radius: 4px;
overflow: hidden;
height: unset;
border: 1px solid rgba(40, 144, 167, 1);
}
.btn-active {
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
}
}
</style>