qingzhengli
2 years ago
8 changed files with 513 additions and 31 deletions
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,328 @@ |
|||||
|
<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> |
||||
|
<Form labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" /> |
||||
|
<div class="footer"> |
||||
|
<Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="handleResetForm"> |
||||
|
重置 |
||||
|
</Button> |
||||
|
<Button @click.native="handleSearch"> 搜索 </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 { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent" |
||||
|
const DeviceTopics = {} |
||||
|
|
||||
|
Object.keys(DeviceForMap).forEach(DeviceLabel => { |
||||
|
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: "55", |
||||
|
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: "378", |
||||
|
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: "208", |
||||
|
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: "153", |
||||
|
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]; |
||||
|
activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType }); |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
this.formList[0].options.options = activeTopicOptions; |
||||
|
|
||||
|
}, |
||||
|
immediate: true, |
||||
|
deep: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
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> |
||||
@ -0,0 +1,97 @@ |
|||||
|
<template> |
||||
|
<div class="HomeVectorControl"> |
||||
|
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" |
||||
|
@click.native="handleClick('VectorControl')"> |
||||
|
<img src="@screen/images/home-VectorControl/VectorControl.svg" /> |
||||
|
</Button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
import Form from "@screen/components/FormConfig"; |
||||
|
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
||||
|
import { merge, cloneDeep } from "lodash"; |
||||
|
import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js" |
||||
|
export default { |
||||
|
name: "HomeVectorControl", |
||||
|
components: { |
||||
|
Button, |
||||
|
Form, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeIcon: null, |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClick(type) { |
||||
|
this.activeIcon = this.activeIcon === type ? null : type; |
||||
|
if (this.activeIcon) window.showStakeText = true; |
||||
|
else window.showStakeText = false; |
||||
|
markerClusterIns.setData(); |
||||
|
}, |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.HomeVectorControl { |
||||
|
.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> |
||||
Loading…
Reference in new issue