|
|
@@ -0,0 +1,205 @@
|
|
|
+<template>
|
|
|
+ <CusDialog
|
|
|
+ :show="show"
|
|
|
+ :title="titleCpt"
|
|
|
+ @onClose="$emit('update:show', false)"
|
|
|
+ width="90%"
|
|
|
+ height="90%"
|
|
|
+ @onSubmit="onSubmit"
|
|
|
+ :loading="state.loading"
|
|
|
+ >
|
|
|
+ <div class="__cus-dialog-form">
|
|
|
+ <CusForm ref="ref_form" label-width="100px">
|
|
|
+ <div class="__cus-title_1">场景设定</div>
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ required
|
|
|
+ label="预警名称"
|
|
|
+ v-model:param="state.form.serviceName"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ required
|
|
|
+ label="预警级别"
|
|
|
+ v-model:param="state.form.serviceName"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ required
|
|
|
+ label="预警模型"
|
|
|
+ v-model:param="state.form.serviceName"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="24"
|
|
|
+ label="场景描述"
|
|
|
+ v-model:param="state.form.serviceName"
|
|
|
+ type="textarea"
|
|
|
+ :rows="5"
|
|
|
+ />
|
|
|
+ <div class="__cus-title_1">参数配置</div>
|
|
|
+ <div class="params-table" style="width: 100%">
|
|
|
+ <CusTable
|
|
|
+ :data="state.form.paramsTable"
|
|
|
+ :table-head="[
|
|
|
+ {value: 'key', label: '参数'},
|
|
|
+ {value: 'value', label: '值'},
|
|
|
+ {value: 'unit', label: '单位'},
|
|
|
+ ]"
|
|
|
+ :no-page="true"
|
|
|
+ >
|
|
|
+ <template #value-column-value="{scope}">
|
|
|
+ <CusFormColumn
|
|
|
+ required
|
|
|
+ class="__cus-table-form-column"
|
|
|
+ :span="24"
|
|
|
+ v-model:param="scope.row.value"
|
|
|
+ link="number"
|
|
|
+ :placeholder="'推荐值：' + scope.row.default"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </CusTable>
|
|
|
+ </div>
|
|
|
+ <div class="__cus-title_1">区域配置</div>
|
|
|
+ <el-col :span="12">
|
|
|
+ <CusFormColumn
|
|
|
+ required
|
|
|
+ :span="24"
|
|
|
+ label="预警区域"
|
|
|
+ v-model:param="state.areaIds.warning"
|
|
|
+ link="select"
|
|
|
+ multiple
|
|
|
+ :options="state.areaList.filter(v => !state.areaIds.white.includes(v.id))"
|
|
|
+ label-key="name"
|
|
|
+ value-key="id"
|
|
|
+ />
|
|
|
+ <el-button @click="onAreaMap">查看区域</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <CusFormColumn
|
|
|
+ required
|
|
|
+ :span="24"
|
|
|
+ label="白名单"
|
|
|
+ v-model:param="state.areaIds.white"
|
|
|
+ link="select"
|
|
|
+ multiple
|
|
|
+ :options="state.areaList.filter(v => !state.areaIds.warning.includes(v.id))"
|
|
|
+ label-key="name"
|
|
|
+ value-key="id"
|
|
|
+ />
|
|
|
+ <el-button @click="onAreaMap">查看区域</el-button>
|
|
|
+ </el-col>
|
|
|
+ </CusForm>
|
|
|
+ <areaMap v-model:show="state.areaMap.show" :transfer="state.areaMap.transfer"/>
|
|
|
+ </div>
|
|
|
+ </CusDialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from "vue";
|
|
|
+import {useDictionaryStore} from "@/stores";
|
|
|
+import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
+import areaMap from './area-map.vue'
|
|
|
+
|
|
|
+const emit = defineEmits(['update:show', 'refresh'])
|
|
|
+const {proxy} = getCurrentInstance()
|
|
|
+const DictionaryStore = useDictionaryStore()
|
|
|
+const props = defineProps({
|
|
|
+ show: {default: false},
|
|
|
+ transfer: {}
|
|
|
+ })
|
|
|
+const state: any = reactive({
|
|
|
+ form: {},
|
|
|
+ loading: false,
|
|
|
+ areaList: [],
|
|
|
+ areaIds: {
|
|
|
+ warning: [],
|
|
|
+ white: [],
|
|
|
+ },
|
|
|
+ areaMap: {
|
|
|
+ show: false,
|
|
|
+ transfer: {}
|
|
|
+ }
|
|
|
+})
|
|
|
+const ref_form = ref()
|
|
|
+const titleCpt = computed(() => {
|
|
|
+ let t = '查看预警模型'
|
|
|
+ switch (props.transfer.mode) {
|
|
|
+ case 'add': t = '新增预警规则'
|
|
|
+ break
|
|
|
+ case 'edit': t = '编辑预警规则'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ return t
|
|
|
+})
|
|
|
+const onSubmit = () => {
|
|
|
+ ref_form.value.submit().then(() => {
|
|
|
+ ElMessageBox.confirm("是否提交?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ } as any).then(() => {
|
|
|
+ state.loading = true
|
|
|
+ }).catch(() => {})
|
|
|
+ }).catch((e) => {
|
|
|
+ ElMessage({
|
|
|
+ message: e[0].message,
|
|
|
+ grouping: true,
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+const initDetail = () => {
|
|
|
+ state.loading = false
|
|
|
+}
|
|
|
+const initArea = () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ const arr = []
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ arr.push({id: i, name: '区域_' + i})
|
|
|
+ }
|
|
|
+ state.areaList = arr
|
|
|
+ }, 1000)
|
|
|
+}
|
|
|
+watch(() => props.show, (n) => {
|
|
|
+ if (n) {
|
|
|
+ state.loading = false
|
|
|
+ initDictionary()
|
|
|
+ state.form = {
|
|
|
+ paramsTable: [
|
|
|
+ {key: '统计时长', value: '', unit: '秒', default: '200'}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ if (props.transfer.mode !== 'add') {
|
|
|
+ initDetail()
|
|
|
+ }
|
|
|
+ nextTick(() => {
|
|
|
+ ref_form.value.reset()
|
|
|
+ })
|
|
|
+ }
|
|
|
+})
|
|
|
+const onAreaMap = () => {
|
|
|
+ state.areaMap.transfer = {
|
|
|
+
|
|
|
+ }
|
|
|
+ state.areaMap.show = true
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ state.form = {
|
|
|
+ paramsTable: [
|
|
|
+ {key: '统计时长', value: '', unit: '秒', default: '200'}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ initArea()
|
|
|
+})
|
|
|
+const initDictionary = () => {
|
|
|
+ // DictionaryStore.initDict('format_type')
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.__cus-dialog-form {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+</style>
|
CzRger