|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<DragWindow
|
|
|
v-if="show"
|
|
|
- @onClose="map.removeLayer(state.areaLayer), $emit('update:show', false)"
|
|
|
+ @onClose="onClose"
|
|
|
title="预警配置"
|
|
|
v-model:layout="state.layout"
|
|
|
close
|
|
|
@@ -18,25 +18,18 @@
|
|
|
@handleEnter="onSearch()"
|
|
|
>
|
|
|
<CusFormColumn
|
|
|
- :span="20"
|
|
|
+ :span="24"
|
|
|
labelWidth="0px"
|
|
|
v-model:param="state.text"
|
|
|
- />
|
|
|
- <el-col :span="4" style="display: flex;">
|
|
|
- <div class="search-btn" @click="onSearch()" style="margin-left: auto">
|
|
|
- <el-icon color="#FFFFFF">
|
|
|
- <Search />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- <div class="search-btn" @click="state.text = '', onSearch()">
|
|
|
- <el-icon color="#FFFFFF">
|
|
|
- <Refresh />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
+ class="search"
|
|
|
+ >
|
|
|
+ <template #append>
|
|
|
+ <div class="search-btn __hover" @click="onSearch()">搜索</div>
|
|
|
+ </template>
|
|
|
+ </CusFormColumn>
|
|
|
</CusForm>
|
|
|
<template v-if="state.tab == 1">
|
|
|
- <div class="__cus-title_2">
|
|
|
+ <div class="tree-title">
|
|
|
全部规则(0)
|
|
|
<div class="expend-tree __hover" @click="expendRules">{{rulesExpandAllCpt ? '收起' : '展开'}}全部</div>
|
|
|
</div>
|
|
|
@@ -63,9 +56,9 @@
|
|
|
</el-tree>
|
|
|
</template>
|
|
|
<template v-else-if="state.tab == 2">
|
|
|
- <div class="__cus-title_2">
|
|
|
+ <div class="tree-title">
|
|
|
全部区域(0)
|
|
|
- <div class="expend-tree __hover" @click="onAddArea">新增区域</div>
|
|
|
+ <div class="expend-tree __hover" @click="onAddArea"><img src="@/assets/images/web/tree-add.png"/></div>
|
|
|
</div>
|
|
|
<el-tree
|
|
|
ref="ref_areaTree"
|
|
|
@@ -78,10 +71,14 @@
|
|
|
<template #default="{ node, data }">
|
|
|
<span class="custom-tree-node">
|
|
|
<span>{{ data.name }}</span>
|
|
|
- <span>
|
|
|
- <SvgIcon name="edit" size="12" class="__hover" @click.stop="onEditArea(data)"/>
|
|
|
- <SvgIcon name="del" size="12" class="__hover" @click.stop="onDelArea(data)"/>
|
|
|
- <el-switch v-model="data.show"/>
|
|
|
+ <span class="tree-buttons">
|
|
|
+ <div class="tree-button __hover" @click.stop="onEditArea(data)">
|
|
|
+ <img src="@/assets/images/web/tree-edit.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="tree-button __hover" @click.stop="onDelArea(data)">
|
|
|
+ <img src="@/assets/images/web/tree-del.png"/>
|
|
|
+ </div>
|
|
|
+ <el-switch v-model="data.show" @change="drawArea()"/>
|
|
|
</span>
|
|
|
</span>
|
|
|
</template>
|
|
|
@@ -106,6 +103,8 @@ import * as source from "ol/source";
|
|
|
import * as style from "ol/style";
|
|
|
|
|
|
const {proxy} = getCurrentInstance()
|
|
|
+const emit = defineEmits(['update:show'])
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
show: {},
|
|
|
mapFunc: {},
|
|
|
@@ -147,7 +146,25 @@ watch(() => props.show, (n) => {
|
|
|
const initData = () => {
|
|
|
state.loading = true
|
|
|
if (state.tab == 1) {
|
|
|
-
|
|
|
+ setTimeout(() => {
|
|
|
+ const arr = []
|
|
|
+ for (let i = 0; i <= 5; i++) {
|
|
|
+ const obj = {
|
|
|
+ id: i + '',
|
|
|
+ label: '模型' + i,
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+ for (let k = 1; k <= i; k++) {
|
|
|
+ obj.children.push({
|
|
|
+ id: i + '-' + k,
|
|
|
+ label: '规则' + i + '-' + k
|
|
|
+ })
|
|
|
+ }
|
|
|
+ arr.push(obj)
|
|
|
+ }
|
|
|
+ state.rulesList = arr
|
|
|
+ state.loading = false
|
|
|
+ }, 1000)
|
|
|
} else {
|
|
|
warnAreaQueryAll().then(res => {
|
|
|
state.areaList = res.data
|
|
|
@@ -161,25 +178,6 @@ const initData = () => {
|
|
|
drawArea()
|
|
|
})
|
|
|
}
|
|
|
- // setTimeout(() => {
|
|
|
- // const arr = []
|
|
|
- // for (let i = 0; i <= 5; i++) {
|
|
|
- // const obj = {
|
|
|
- // id: i + '',
|
|
|
- // label: '模型' + i,
|
|
|
- // children: []
|
|
|
- // }
|
|
|
- // for (let k = 1; k <= i; k++) {
|
|
|
- // obj.children.push({
|
|
|
- // id: i + '-' + k,
|
|
|
- // label: '规则' + i + '-' + k
|
|
|
- // })
|
|
|
- // }
|
|
|
- // arr.push(obj)
|
|
|
- // }
|
|
|
- // state.rulesList = arr
|
|
|
- // state.loading = false
|
|
|
- // }, 1000)
|
|
|
}
|
|
|
const drawArea = () => {
|
|
|
if (!state.areaLayer) {
|
|
|
@@ -285,6 +283,11 @@ const onSearch = () => {
|
|
|
state.textReal = JSON.parse(JSON.stringify(state.text))
|
|
|
initData()
|
|
|
}
|
|
|
+const onClose = () => {
|
|
|
+ props.map.removeLayer(state.areaLayer)
|
|
|
+ state.areaLayer = null
|
|
|
+ emit('update:show', false)
|
|
|
+}
|
|
|
const areaFilterNode = (value, data) => {
|
|
|
if (!value) return true
|
|
|
return data.name?.includes(value)
|
|
|
@@ -311,43 +314,75 @@ defineExpose({
|
|
|
$mapHeight: var(--easy-map-height);
|
|
|
.config {
|
|
|
height: calc($mapHeight - 250px);
|
|
|
- padding: 12px 10px;
|
|
|
+ padding: 20px 24px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
.tabs {
|
|
|
+ background: rgba(88,148,235,0.2);
|
|
|
+ border-radius: 8px;
|
|
|
+ height: 48px;
|
|
|
display: flex;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- color: #ffffff;
|
|
|
- gap: 15px;
|
|
|
- .active {
|
|
|
- color: #1cfeff;
|
|
|
- border-bottom: 2px solid #1cfeff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ gap: 24px;
|
|
|
+ padding-left: 18px;
|
|
|
+ .tabs-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &.active {
|
|
|
+ color: #ffffff;
|
|
|
+ border-bottom: 4px solid #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.__cus-form_map {
|
|
|
margin-top: 16px;
|
|
|
margin-bottom: 10px;
|
|
|
- .search-btn {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- background: #0062e9;
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
- margin-left: 5px;
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- line-height: 33px;
|
|
|
+ :deep(.search) {
|
|
|
+ .el-input-group__append {
|
|
|
+ padding: 0;
|
|
|
+ .search-btn {
|
|
|
+ width: 80px;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(150deg, #2FBCCD, #2467EB);
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 0px 4px 4px 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .expend-tree {
|
|
|
- padding: 2px 6px;
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 400;
|
|
|
+ .tree-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18px;
|
|
|
color: #FFFFFF;
|
|
|
- border: 1px solid #0062e9;
|
|
|
- border-radius: 4px;
|
|
|
- margin-left: 16px;
|
|
|
+ .expend-tree {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #81AFFF;
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
:deep(.tree) {
|
|
|
+ margin-top: 20px;
|
|
|
background-color: unset;
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ .el-tree-node__content {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
.custom-tree-node {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
@@ -355,11 +390,30 @@ $mapHeight: var(--easy-map-height);
|
|
|
justify-content: space-between;
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ height: 40px;
|
|
|
.svg-icon {
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
+ .tree-buttons {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ .tree-button {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(129,175,255,0.4);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ >img {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-tree-node__content:hover {
|
CzRger
