<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 labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
<div class="footer">
<Button @click.native="">
确认
</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 { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent"
const controlMulti = ["情报板", "行车诱导", "疲劳唤醒", "合流区", "设备箱", "语音广播"];
const DeviceTopics = {};//6种批量控制 事件专题 {key:label}
Object.keys(DeviceForMap).forEach(DeviceLabel => {
controlMulti.indexOf(DeviceLabel) !== -1 && (DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel);
});
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}${item.stakeMark}`, value: JSON.stringify({ id: item.id, iotDeviceId: item.iotDeviceId }) }
})
};
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);
}
export default {
name: "HomeFrameControl",//设备控制
components: {
Button,
Form,
},
data() {
return {
activeIcon: null,
formList: [
{
label: "设备类型:",
key: "deviceType",
type: "select",
options: {
clearable: true,
options: [],
},
ons: { //on监听 element事件
change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList);
}
},
},
{
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: [],
},
visible: data => {
return true;
},
},
{
label: "控制操作:",
key: "controlOp",
type: "select",
default: null,
options: {
clearable: true,
options: [{
label: "在线",
value: "1"
}, {
label: "离线",
value: "0"
}]
},
visible: data => {
// if (find(this.activeDeviceTypes, (type => type.match("路测设备_"))))
// return true;
},
},
]
}
},
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
}
},
methods: {
cancelClick() {
this.activeIcon = null;
},
handleClick(type) {
console.log("type: ", type);
this.activeIcon = this.activeIcon === type ? null : type;
console.log("this.activeIcon", this.activeIcon);
},
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>