sea-warning-web/src/views/web/config/index.vue

<template>
  <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="__cus-form_map"
        @handleEnter="onSearch()"
      >
        <CusFormColumn
          :span="20"
          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>
      </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">
            <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>
            <SvgIcon name="add" size="12" class="__hover" @click.stop="onAddRule(data)"/>
          </span>
        </span>
          </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, 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,
    left: 70,
    top: 10
  },
  tab: 1,
  loading: false,
  text: '',
  rulesList: [],
  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) {
    initData()
  }
})
const initData = () => {
  state.loading = true
  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 expendRules = () => {
  const flag = JSON.parse(JSON.stringify(rulesExpandAllCpt.value))
  ref_rulesTree.value.root.childNodes.forEach(v => v.expanded = !flag)
}
const rulesExpandAllCpt = computed(() => {
  return ref_rulesTree.value?.root.childNodes.every(v => v.data.children?.length == 0 || v.expanded)
})
const onAddRule = (row) => {
  console.log(row)
  state.ruleDetail.transfer = {
    id: row.id + ''
  }
  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()
})
</script>

<style lang="scss" scoped>
$mapHeight: var(--easy-map-height);
.config {
  height: calc($mapHeight - 40px - 20px);
  padding: 12px 10px;
  .tabs {
    display: flex;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    gap: 15px;
    .active {
      color: #1cfeff;
      border-bottom: 2px solid #1cfeff;
    }
  }
  .__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;
    }
  }
  .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>