You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
352 lines
11 KiB
352 lines
11 KiB
<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>
|
|
|