|
|
@@ -1,51 +1,114 @@
|
|
|
<template>
|
|
|
- <div class="config" v-if="show" v-loading="state.loading">
|
|
|
- <el-button @click="$emit('update:show', false)">关闭</el-button>
|
|
|
- <div style="display: flex">
|
|
|
- <div style="width: 60px">过滤</div><el-input v-model="state.text"/>
|
|
|
- </div>
|
|
|
- <div class="tabs" style="display: flex;gap: 20px;">
|
|
|
- <el-button @click="state.tab = 1">规则</el-button>
|
|
|
- <el-button @click="state.tab = 2">区域</el-button>
|
|
|
- </div>
|
|
|
- <template v-if="state.tab == 1">
|
|
|
- <el-button @click="expendRules">{{rulesExpandAllCpt ? '收起' : '展开'}}全部</el-button>
|
|
|
- <el-tree
|
|
|
- ref="ref_rulesTree"
|
|
|
- :data="state.rulesList"
|
|
|
- :props="ruleProps"
|
|
|
- node-key="id"
|
|
|
+ <DragWindow
|
|
|
+ v-if="show"
|
|
|
+ @onClose="$emit('update:show', false)"
|
|
|
+ title="预警配置"
|
|
|
+ v-model:layout="state.layout"
|
|
|
+ close
|
|
|
+ expend
|
|
|
+ >
|
|
|
+ <div class="config" v-if="show" v-loading="state.loading">
|
|
|
+ <div class="tabs">
|
|
|
+ <div class="tabs-item __hover" :class="{active: state.tab == 1}" @click="state.tab = 1">预警规则</div>
|
|
|
+ <div class="tabs-item __hover" :class="{active: state.tab == 2}" @click="state.tab = 2">预警区域</div>
|
|
|
+ </div>
|
|
|
+ <CusForm
|
|
|
+ labelWidth="60px"
|
|
|
+ class="search-form"
|
|
|
+ @handleEnter="onSearch()"
|
|
|
>
|
|
|
- <template #default="{ node, data }">
|
|
|
+ <CusFormColumn
|
|
|
+ :span="20"
|
|
|
+ labelWidth="0px"
|
|
|
+ v-model:param="state.text"
|
|
|
+ />
|
|
|
+ <el-col :span="2">
|
|
|
+ <div class="search-btn" @click="onSearch()">
|
|
|
+ <el-icon color="#FFFFFF">
|
|
|
+ <Search />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <div class="search-btn" @click="state.text = '', onSearch()">
|
|
|
+ <el-icon color="#FFFFFF">
|
|
|
+ <Refresh />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </CusForm>
|
|
|
+ <template v-if="state.tab == 1">
|
|
|
+ <div class="__cus-title_2">
|
|
|
+ 全部规则(0)
|
|
|
+ <div class="expend-tree __hover" @click="expendRules">{{rulesExpandAllCpt ? '收起' : '展开'}}全部</div>
|
|
|
+ </div>
|
|
|
+ <el-tree
|
|
|
+ class="tree"
|
|
|
+ ref="ref_rulesTree"
|
|
|
+ :data="state.rulesList"
|
|
|
+ :props="ruleProps"
|
|
|
+ node-key="id"
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
<span class="custom-tree-node">
|
|
|
<span>{{ node.label }}</span>
|
|
|
<span v-if="node.level > 1">
|
|
|
- <el-button @click.stop="$util._console(node)">编辑</el-button>
|
|
|
- <el-button @click.stop="$util._console(node)">查看</el-button>
|
|
|
+ <SvgIcon name="edit" size="12" class="__hover" @click.stop="onAddRule(data)"/>
|
|
|
+ <SvgIcon name="detail_1" size="12" class="__hover" @click.stop="onAddRule(data)"/>
|
|
|
+ <el-switch v-model="data.active" size="small"/>
|
|
|
</span>
|
|
|
<span v-else>
|
|
|
- <el-button @click.stop="onAddRule(data)">新增</el-button>
|
|
|
+ <SvgIcon name="add" size="12" class="__hover" @click.stop="onAddRule(data)"/>
|
|
|
</span>
|
|
|
</span>
|
|
|
- </template>
|
|
|
- </el-tree>
|
|
|
- </template>
|
|
|
- <template v-else-if="state.tab == 2">
|
|
|
-
|
|
|
- </template>
|
|
|
- <ruleDetail v-model:show="state.ruleDetail.show" :transfer="state.ruleDetail.transfer"/>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="state.tab == 2">
|
|
|
+ <div class="__cus-title_2">
|
|
|
+ 全部区域(0)
|
|
|
+ <div class="expend-tree __hover" @click="onAddArea">新增区域</div>
|
|
|
+ </div>
|
|
|
+ <el-tree
|
|
|
+ class="tree"
|
|
|
+ :data="state.areaList"
|
|
|
+ :props="areaProps"
|
|
|
+ node-key="id"
|
|
|
+ >
|
|
|
+ <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)"/>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </template>
|
|
|
+ <ruleDetail v-model:show="state.ruleDetail.show" :transfer="state.ruleDetail.transfer"/>
|
|
|
+ </div>
|
|
|
+ </DragWindow>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import {computed, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
|
|
|
+import {computed, getCurrentInstance, markRaw, onMounted, reactive, ref, watch} from "vue";
|
|
|
import ruleDetail from "./rule-detail.vue";
|
|
|
+import areaForm from "./area-form.vue";
|
|
|
+import DragWindow from '../components/drag-window.vue'
|
|
|
+import { Search, Refresh } from "@element-plus/icons-vue";
|
|
|
|
|
|
const {proxy} = getCurrentInstance()
|
|
|
const props = defineProps({
|
|
|
show: {},
|
|
|
+ mapFunc: {}
|
|
|
})
|
|
|
const state: any = reactive({
|
|
|
+ layout: {
|
|
|
+ width: 400,
|
|
|
+ height: '90%',
|
|
|
+ left: 70,
|
|
|
+ top: 10
|
|
|
+ },
|
|
|
tab: 1,
|
|
|
loading: false,
|
|
|
text: '',
|
|
|
@@ -53,11 +116,20 @@ const state: any = reactive({
|
|
|
ruleDetail: {
|
|
|
transfer: {},
|
|
|
show: false
|
|
|
- }
|
|
|
+ },
|
|
|
+ areaList: [
|
|
|
+ {
|
|
|
+ id: 'area-1',
|
|
|
+ name: '区域-1',
|
|
|
+ }
|
|
|
+ ]
|
|
|
})
|
|
|
const ruleProps = {
|
|
|
children: 'children'
|
|
|
}
|
|
|
+const areaProps = {
|
|
|
+ children: 'children'
|
|
|
+}
|
|
|
const ref_rulesTree = ref()
|
|
|
watch(() => props.show, (n) => {
|
|
|
if (n) {
|
|
|
@@ -100,6 +172,45 @@ const onAddRule = (row) => {
|
|
|
}
|
|
|
state.ruleDetail.show = true
|
|
|
}
|
|
|
+const onAddArea = (row) => {
|
|
|
+ const config = {
|
|
|
+ featureType: 'Polygon',
|
|
|
+ wkt: '',
|
|
|
+ polyColor: 'rgba(231,18,18,0.53)', // Polygon的填充色，默认蓝色
|
|
|
+ polyBorderColor: 'rgba(231,18,18,0.53)', // Polygon的边框颜色，默认蓝色
|
|
|
+ polyBorderWidth: 2, // Polygon的边框宽度，默认1
|
|
|
+ }
|
|
|
+ props.mapFunc.formDrawEdit({
|
|
|
+ config: config,
|
|
|
+ form: {
|
|
|
+ com: markRaw(areaForm),
|
|
|
+ detail: config
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const onEditArea = (row) => {
|
|
|
+ const config = {
|
|
|
+ featureType: 'Polygon',
|
|
|
+ wkt: 'POLYGON((110.10212241843107 19.31790648240469,111.12312792246837 18.750781049337483,110.25884201127086 17.952069610196993,110.10212241843107 19.31790648240469))',
|
|
|
+ polyColor: 'rgba(231,18,18,0.53)', // Polygon的填充色，默认蓝色
|
|
|
+ polyBorderColor: 'rgba(231,18,18,0.53)', // Polygon的边框颜色，默认蓝色
|
|
|
+ polyBorderWidth: 2, // Polygon的边框宽度，默认1
|
|
|
+ }
|
|
|
+ props.mapFunc.formDrawEdit({
|
|
|
+ config: config,
|
|
|
+ form: {
|
|
|
+ com: markRaw(areaForm),
|
|
|
+ detail: config
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const onSearch = () => {
|
|
|
+ if (state.tab == 1) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
onMounted(() => {
|
|
|
initData()
|
|
|
})
|
|
|
@@ -107,6 +218,91 @@ onMounted(() => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.config {
|
|
|
- width: 300px;
|
|
|
+ height: 790px;
|
|
|
+ padding: 12px 10px;
|
|
|
+ .tabs {
|
|
|
+ display: flex;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ gap: 15px;
|
|
|
+ .active {
|
|
|
+ color: #1cfeff;
|
|
|
+ border-bottom: 2px solid #1cfeff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.search-form) {
|
|
|
+ margin-top: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .el-col {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ flex: 1;
|
|
|
+ .el-form-item__label {
|
|
|
+ padding: unset;
|
|
|
+ margin: 0 5px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ height: 28px;
|
|
|
+ background-color: unset;
|
|
|
+ box-shadow: unset;
|
|
|
+ border: 1px solid #1a56d4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-btn {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ background: #0062e9;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-top: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 33px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .expend-tree {
|
|
|
+ padding: 2px 6px;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border: 1px solid #0062e9;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ :deep(.tree) {
|
|
|
+ background-color: unset;
|
|
|
+ .custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ .svg-icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__content:hover {
|
|
|
+ background-color: #044fb787;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node:focus > .el-tree-node__content {
|
|
|
+ background-color: #044fb787;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox__inner {
|
|
|
+ background-color: unset;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
CzRger
