zhangzhang
2 years ago
26 changed files with 1333 additions and 186 deletions
@ -1 +1 @@ |
|||
window._iconfont_svg_string_4466169='<svg><symbol id="icon-menu" viewBox="0 0 1024 1024"><path d="M512 747.52c-10.24 0-20.48-5.12-30.72-10.24l-414.72-256C51.2 476.16 40.96 460.8 40.96 445.44s10.24-30.72 25.6-40.96l414.72-256c15.36-10.24 40.96-10.24 56.32 0l414.72 256c15.36 10.24 25.6 25.6 25.6 40.96s-5.12 30.72-20.48 40.96l-414.72 256c-10.24 5.12-20.48 5.12-30.72 5.12zM117.76 445.44l394.24 240.64 394.24-240.64L512 204.8 117.76 445.44z m-20.48-10.24z" ></path><path d="M512 936.96c-15.36 0-30.72-5.12-46.08-15.36l-378.88-230.4c-15.36-10.24-20.48-25.6-10.24-40.96s25.6-20.48 40.96-10.24L496.64 870.4c10.24 5.12 20.48 5.12 30.72 0l378.88-230.4c15.36-10.24 35.84-5.12 40.96 10.24s5.12 35.84-10.24 40.96L558.08 921.6c-15.36 10.24-30.72 15.36-46.08 15.36z" ></path></symbol><symbol id="icon-menuactive" viewBox="0 0 1024 1024"><path d="M51.2 404.48c-10.24-5.12-10.24-15.36 0-25.6L501.76 102.4h20.48L972.8 378.88c10.24 5.12 10.24 20.48 0 25.6l-450.56 276.48c-5.12 5.12-15.36 5.12-20.48 0L51.2 404.48z" fill="#2c2c2c" ></path><path d="M512 906.24c-20.48 0-40.96-5.12-56.32-15.36l-378.88-230.4c-25.6-15.36-30.72-46.08-20.48-71.68 15.36-25.6 46.08-30.72 71.68-15.36l378.88 230.4h10.24l378.88-230.4c25.6-15.36 56.32-5.12 71.68 15.36 15.36 25.6 5.12 56.32-15.36 71.68l-378.88 230.4c-20.48 10.24-40.96 15.36-61.44 15.36z" fill="#2c2c2c" ></path></symbol><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M268.9 488.3L681.6 75.6C688.2 69 697.3 65 707.4 65c20.2 0 36.5 16.3 36.5 36.5 0 10.1-4.1 19.2-10.7 25.8l-391 391 378.5 378.5c6 6.2 9.7 14.7 9.7 24.1 0 19.2-15.5 34.7-34.7 34.7-9.4 0-17.9-3.7-24.1-9.7L279.2 553.4c-4.7-4.8-8.1-11.1-9.3-18 0.7 4.9-0.3 5.5-1 4.4-6.6-6.6-10.7-15.7-10.7-25.8 0.1-10 4.1-19.1 10.7-25.7z m0 0" ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M755.1 535.7L342.4 948.4C335.8 955 326.70000001 959 316.60000001 959c-20.2 0-36.5-16.3-36.50000001-36.5 0-10.1 4.1-19.2 10.7-25.8l391-391-378.49999999-378.5c-6-6.2-9.7-14.7-9.70000001-24.1 0-19.2 15.5-34.7 34.7-34.7 9.4 0 17.9 3.7 24.1 9.7L744.8 470.6c4.7 4.8 8.1 11.1 9.30000001 18-0.7-4.9 0.3-5.5 0.99999999-4.4 6.6 6.6 10.69999999 15.7 10.7 25.8-0.1 10-4.1 19.1-10.7 25.7z m0 0" ></path></symbol><symbol id="icon-recent" viewBox="0 0 1024 1024"><path d="M504 1024C225.6 1024 0 798.4 0 520S225.6 16 504 16s504 225.6 504 504-225.6 504-504 504z m0-939.2C264 84.8 68.8 280 68.8 520c0 240.8 195.2 436 436 436s436-195.2 436-436c-0.8-240-196-435.2-436.8-435.2z" ></path><path d="M452 572.8V221.6h71.2v280h237.6v71.2H452z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,o,i,l,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4466169,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),c()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=c,l=n.document,d=!1,m(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,a())})}function a(){d||(d=!0,i())}function m(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}a()}}(window); |
|||
window._iconfont_svg_string_4466169='<svg><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M512 0.006C229.233 0.006 0.006 229.233 0.006 512S229.233 1023.993 512 1023.993 1023.994 794.767 1023.994 512 794.767 0.006 512 0.006z m0 962.549C263.563 962.555 61.445 760.437 61.445 512S263.563 61.445 512 61.445 962.555 263.563 962.555 512 760.437 962.555 512 962.555z" fill="#040000" ></path><path d="M707.498 273.063L512 468.561 316.502 273.063l-43.449 43.439L468.551 512 273.053 707.497l43.449 43.45L512 555.449l195.498 195.498 43.449-43.45L555.449 512l195.498-195.498z" fill="#040000" ></path></symbol><symbol id="icon-menu" viewBox="0 0 1024 1024"><path d="M512 747.52c-10.24 0-20.48-5.12-30.72-10.24l-414.72-256C51.2 476.16 40.96 460.8 40.96 445.44s10.24-30.72 25.6-40.96l414.72-256c15.36-10.24 40.96-10.24 56.32 0l414.72 256c15.36 10.24 25.6 25.6 25.6 40.96s-5.12 30.72-20.48 40.96l-414.72 256c-10.24 5.12-20.48 5.12-30.72 5.12zM117.76 445.44l394.24 240.64 394.24-240.64L512 204.8 117.76 445.44z m-20.48-10.24z" ></path><path d="M512 936.96c-15.36 0-30.72-5.12-46.08-15.36l-378.88-230.4c-15.36-10.24-20.48-25.6-10.24-40.96s25.6-20.48 40.96-10.24L496.64 870.4c10.24 5.12 20.48 5.12 30.72 0l378.88-230.4c15.36-10.24 35.84-5.12 40.96 10.24s5.12 35.84-10.24 40.96L558.08 921.6c-15.36 10.24-30.72 15.36-46.08 15.36z" ></path></symbol><symbol id="icon-menuactive" viewBox="0 0 1024 1024"><path d="M51.2 404.48c-10.24-5.12-10.24-15.36 0-25.6L501.76 102.4h20.48L972.8 378.88c10.24 5.12 10.24 20.48 0 25.6l-450.56 276.48c-5.12 5.12-15.36 5.12-20.48 0L51.2 404.48z" fill="#2c2c2c" ></path><path d="M512 906.24c-20.48 0-40.96-5.12-56.32-15.36l-378.88-230.4c-25.6-15.36-30.72-46.08-20.48-71.68 15.36-25.6 46.08-30.72 71.68-15.36l378.88 230.4h10.24l378.88-230.4c25.6-15.36 56.32-5.12 71.68 15.36 15.36 25.6 5.12 56.32-15.36 71.68l-378.88 230.4c-20.48 10.24-40.96 15.36-61.44 15.36z" fill="#2c2c2c" ></path></symbol><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M268.9 488.3L681.6 75.6C688.2 69 697.3 65 707.4 65c20.2 0 36.5 16.3 36.5 36.5 0 10.1-4.1 19.2-10.7 25.8l-391 391 378.5 378.5c6 6.2 9.7 14.7 9.7 24.1 0 19.2-15.5 34.7-34.7 34.7-9.4 0-17.9-3.7-24.1-9.7L279.2 553.4c-4.7-4.8-8.1-11.1-9.3-18 0.7 4.9-0.3 5.5-1 4.4-6.6-6.6-10.7-15.7-10.7-25.8 0.1-10 4.1-19.1 10.7-25.7z m0 0" ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M755.1 535.7L342.4 948.4C335.8 955 326.70000001 959 316.60000001 959c-20.2 0-36.5-16.3-36.50000001-36.5 0-10.1 4.1-19.2 10.7-25.8l391-391-378.49999999-378.5c-6-6.2-9.7-14.7-9.70000001-24.1 0-19.2 15.5-34.7 34.7-34.7 9.4 0 17.9 3.7 24.1 9.7L744.8 470.6c4.7 4.8 8.1 11.1 9.30000001 18-0.7-4.9 0.3-5.5 0.99999999-4.4 6.6 6.6 10.69999999 15.7 10.7 25.8-0.1 10-4.1 19.1-10.7 25.7z m0 0" ></path></symbol><symbol id="icon-recent" viewBox="0 0 1024 1024"><path d="M504 1024C225.6 1024 0 798.4 0 520S225.6 16 504 16s504 225.6 504 504-225.6 504-504 504z m0-939.2C264 84.8 68.8 280 68.8 520c0 240.8 195.2 436 436 436s436-195.2 436-436c-0.8-240-196-435.2-436.8-435.2z" ></path><path d="M452 572.8V221.6h71.2v280h237.6v71.2H452z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,i,o,l,a,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4466169,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),c()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(o=c,l=n.document,a=!1,m(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){a||(a=!0,o())}function m(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}s()}}(window); |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 898 B |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,333 @@ |
|||
<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 { 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: { |
|||
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> |
|||
@ -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> |
|||
@ -0,0 +1,478 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" :title="title"> |
|||
<div class="EventAddPlanDialog"> |
|||
<ElForm :model="formData" inline :rules="rules" ref="ruleForm"> |
|||
<div class="first"> |
|||
<el-radio-group v-model="planName"> |
|||
<el-radio-button label="名称1"></el-radio-button> |
|||
<el-radio-button label="名称2"></el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="second"> |
|||
<el-row> |
|||
<el-col :span="2"> |
|||
<div class="text">联动设备:</div> |
|||
</el-col> |
|||
<el-col :span="22"> |
|||
<FormTable ref="secondFormTable" :tableData="secondFormData"></FormTable> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="third"> |
|||
<el-row> |
|||
<el-col :span="2"> |
|||
<div class="text">恢复操作:</div> |
|||
</el-col> |
|||
<el-col :span="22"> |
|||
<FormTable ref="thirdFormTable" :tableData="thirdFormData"></FormTable> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</ElForm> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">强制恢复</Button> |
|||
<Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">确认</Button> |
|||
<Button style="background: #C9C9C9;padding:0 24px;" |
|||
@click.native="modelVisible = false, submitting = false">取消</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import FormTable from '../../../plan/formTable/index.vue'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
import request from '@/utils/request'; |
|||
import { Message } from "element-ui"; |
|||
import { throttle } from "lodash" |
|||
|
|||
|
|||
export default { |
|||
name: 'eventPlanDialog', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
FormTable |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'close' |
|||
}, |
|||
provide() { |
|||
return { |
|||
loadData: throttle(this.loadData, 1000) |
|||
} |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
detail: { |
|||
type: Object, |
|||
default: () => { } |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
title: '事件确认', |
|||
dialogType: 1, |
|||
planId: 0, |
|||
submitting: false, |
|||
formData: { |
|||
eventCategory: 1, |
|||
eventType: 1, |
|||
triggerMechanism: 1 |
|||
}, |
|||
secondFormData: [{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: '' |
|||
}], |
|||
thirdFormData: [{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: '' |
|||
}], |
|||
planName: '', |
|||
deviceData: [], |
|||
eventOptions: [ |
|||
{ |
|||
value: 1, |
|||
label: '异常天气' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '交通事故' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: '非法上路' |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: '车辆故障' |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: '交通拥堵' |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: '交通管制' |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: '服务区异常' |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: '施工建设' |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: '路障清除' |
|||
} |
|||
], |
|||
mechanismOptions: [{ |
|||
value: 1, |
|||
label: '雨' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '雪' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: '雾' |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: '大风' |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: '低温寒潮' |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: '路面积雪' |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: '路面结冰' |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: '路面积水' |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: '其他' |
|||
}], |
|||
conditionOptions: [ |
|||
// { |
|||
// value: 1, |
|||
// label: '大于(>)' |
|||
// }, |
|||
{ |
|||
value: 1, |
|||
label: '小于(<)' |
|||
}, |
|||
], |
|||
rules: { |
|||
planName: [ |
|||
{ required: true, message: '请输入预案名称', trigger: 'blur' }, |
|||
|
|||
], |
|||
eventType: [ |
|||
{ required: true, message: '请选择事件类型', trigger: 'change' } |
|||
], |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('close', val) |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
initData(id = 1) { |
|||
request({ |
|||
url: `/business/plans/list/${id}`, |
|||
method: "get", |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
let data = result.data; |
|||
let dcExecuteAction = result.data.dcExecuteAction; |
|||
|
|||
this.planId = data.id; |
|||
this.formData = { |
|||
eventCategory: data.eventCategory, |
|||
planName: data.planName, |
|||
eventType: data.eventType, |
|||
triggerMechanism: data.triggerMechanism, |
|||
} |
|||
this.secondFormData = []; |
|||
this.thirdFormData = []; |
|||
dcExecuteAction.forEach(it => { |
|||
if (it.deviceList) { |
|||
it.deviceList = it.deviceList.split(','); |
|||
} |
|||
if (it.actionType == 1) { |
|||
this.secondFormData.push(it); |
|||
} else if (it.actionType == 2) { |
|||
this.thirdFormData.push(it); |
|||
} |
|||
}) |
|||
|
|||
}).catch((err) => { |
|||
console.log(err) |
|||
Message.error("查询事件预案列表失败", err); |
|||
}) |
|||
|
|||
}, |
|||
async loadData() { |
|||
if (this.deviceData.length <= 0) { |
|||
let result = await request({ |
|||
url: `business/device/query?deviceType=2`, |
|||
method: "get", |
|||
}) |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
console.log('123'); |
|||
this.deviceData = result.data; |
|||
// return result.data; |
|||
} |
|||
return this.deviceData; |
|||
}, |
|||
changeEventType(value = 1) { |
|||
this.mechanismOptions = optionsMap[this.formData.eventCategory || 1][value]; |
|||
}, |
|||
changeRadio(value = 1) { |
|||
const optionsMap = { |
|||
1: [{ |
|||
value: 1, |
|||
label: '异常天气' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '交通事故' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: '非法上路' |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: '车辆故障' |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: '交通拥堵' |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: '交通管制' |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: '服务区异常' |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: '施工建设' |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: '路障清除' |
|||
}], |
|||
2: [{ |
|||
value: 1, |
|||
label: '异常天气' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '拥堵' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: '非机动车' |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: '行人' |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: '烟火' |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: '抛洒物' |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: '逆行' |
|||
}, |
|||
] |
|||
} |
|||
this.eventOptions = optionsMap[value]; |
|||
this.changeEventType(); |
|||
}, |
|||
handleChange() { |
|||
|
|||
}, |
|||
formatData(it, value = 1) { |
|||
let data = { ...it, actionType: value } |
|||
if (it.deviceList && typeof it.deviceList !== 'string' && it.deviceList.length > 0) { |
|||
data.deviceList = it.deviceList.join(','); |
|||
} else { |
|||
data.deviceList = ''; |
|||
} |
|||
if (it.content) { |
|||
data.otherConfig = JSON.stringify({ content: it.content }) |
|||
} |
|||
if (it.controlModel) { |
|||
let other = { |
|||
controlModel: it.controlModel, |
|||
state: it.state, |
|||
} |
|||
if (it.time && it?.time[0]) { |
|||
other = { |
|||
controlModel: it.controlModel, |
|||
state: it.state, |
|||
startTime: it.time[0], |
|||
endTime: it.time[1] |
|||
} |
|||
} |
|||
data.otherConfig = JSON.stringify(other) |
|||
} |
|||
if (it.gzms) { |
|||
data.otherConfig = JSON.stringify({ |
|||
state: it.gzms, |
|||
operationDuration: it.operationDuration, |
|||
}) |
|||
} |
|||
return data; |
|||
}, |
|||
handleSubmit() { |
|||
this.$refs['ruleForm'].validate((valid) => { |
|||
if (valid) { |
|||
// this.submitting = false; |
|||
let secondFormTable = this.$refs['secondFormTable'].tableData || []; |
|||
let thirdFormTable = this.$refs['thirdFormTable'].tableData || []; |
|||
let dcArr = []; |
|||
secondFormTable.forEach(it => { |
|||
dcArr.push(this.formatData(it, 1)); |
|||
}) |
|||
thirdFormTable.forEach(it => { |
|||
dcArr.push(this.formatData(it, 2)); |
|||
}) |
|||
|
|||
console.log({ |
|||
...this.formData, |
|||
dcExecuteAction: dcArr |
|||
}) |
|||
// return; |
|||
if (this.dialogType == 1) {//新增 |
|||
request({ |
|||
url: `/business/plans`, |
|||
method: "post", |
|||
data: { |
|||
...this.formData, |
|||
dcExecuteAction: dcArr |
|||
} |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
Message.success("提交成功"); |
|||
this.modelVisible = false; |
|||
}).catch(() => { |
|||
Message.error("提交失败"); |
|||
}).finally(() => { |
|||
this.submitting = false; |
|||
this.$emit('reInitData', true); |
|||
}) |
|||
} else if (this.dialogType == 2) {//修改 |
|||
request({ |
|||
url: `/business/plans`, |
|||
method: "put", |
|||
data: { |
|||
...this.formData, |
|||
id: this.planId, |
|||
dcExecuteAction: dcArr |
|||
} |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
Message.success("提交成功"); |
|||
this.modelVisible = false; |
|||
}).catch(() => { |
|||
Message.error("提交失败"); |
|||
}).finally(() => { |
|||
this.submitting = false; |
|||
this.$emit('reInitData', true); |
|||
}) |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
}) |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity .24s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.EventAddPlanDialog { |
|||
gap: 9px; |
|||
width: 1080px; |
|||
height: 310px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.first, |
|||
.second, |
|||
.third { |
|||
padding: 5px 10px 8px; |
|||
background-color: #296887; |
|||
margin-bottom: 15px; |
|||
|
|||
.text { |
|||
margin-top: 12px; |
|||
} |
|||
} |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue