diff --git a/src/main.js b/src/main.js
index 75f3fce..ec18500 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,9 @@
-import Vue from 'vue'
+import Vue from "vue";
 
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-import Element from 'element-ui'
-import './assets/styles/element-variables.scss'
+import Element from "element-ui";
+import "./assets/styles/element-variables.scss";
 Element.Dialog.props.closeOnClickModal.default = false; //模态框单击空白处不允许关闭
 // 带有斑马纹
 // Element.Table.props.stripe = {
@@ -18,64 +18,74 @@ Element.Table.props.border = {
 };
 import "@/utils/rem.js"; //计算rem基准
 
-import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
-import App from './App'
-import store from './store'
-import router from './router'
-import directive from './directive' // directive
-import plugins from './plugins' // plugins
-import { download } from '@/utils/request'
+import { filterTown } from "@/utils/myselfFu.js";
+Vue.prototype.$filterTown = filterTown;
 
-import './assets/icons' // icon
-import './permission' // permission control
+import "@/assets/styles/index.scss"; // global css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css
+import App from "./App";
+import store from "./store";
+import router from "./router";
+import directive from "./directive"; // directive
+import plugins from "./plugins"; // plugins
+import { download } from "@/utils/request";
+
+import "./assets/icons"; // icon
+import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  selectDictLabel,
+  selectDictLabels,
+  handleTree,
+} from "@/utils/ruoyi";
 
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";
 // 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from "@/components/DictData";
 
 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
-Vue.prototype.getConfigKey = getConfigKey
-Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
-Vue.prototype.addDateRange = addDateRange
-Vue.prototype.selectDictLabel = selectDictLabel
-Vue.prototype.selectDictLabels = selectDictLabels
-Vue.prototype.download = download
-Vue.prototype.handleTree = handleTree
+Vue.prototype.getDicts = getDicts;
+Vue.prototype.getConfigKey = getConfigKey;
+Vue.prototype.parseTime = parseTime;
+Vue.prototype.resetForm = resetForm;
+Vue.prototype.addDateRange = addDateRange;
+Vue.prototype.selectDictLabel = selectDictLabel;
+Vue.prototype.selectDictLabels = selectDictLabels;
+Vue.prototype.download = download;
+Vue.prototype.handleTree = handleTree;
 
 // 全局组件挂载
-Vue.component('DictTag', DictTag)
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
-Vue.component('Editor', Editor)
-Vue.component('FileUpload', FileUpload)
-Vue.component('ImageUpload', ImageUpload)
-Vue.component('ImagePreview', ImagePreview)
+Vue.component("DictTag", DictTag);
+Vue.component("Pagination", Pagination);
+Vue.component("RightToolbar", RightToolbar);
+Vue.component("Editor", Editor);
+Vue.component("FileUpload", FileUpload);
+Vue.component("ImageUpload", ImageUpload);
+Vue.component("ImagePreview", ImagePreview);
 
-Vue.use(directive)
-Vue.use(plugins)
-Vue.use(VueMeta)
-DictData.install()
+Vue.use(directive);
+Vue.use(plugins);
+Vue.use(VueMeta);
+DictData.install();
 
 /**
  * If you don't want to use mock-server
@@ -87,14 +97,14 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
-})
+  size: Cookies.get("size") || "medium", // set element-ui default size
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  render: h => h(App)
-})
+  render: (h) => h(App),
+});
diff --git a/src/utils/myselfFu.js b/src/utils/myselfFu.js
new file mode 100644
index 0000000..6c7d063
--- /dev/null
+++ b/src/utils/myselfFu.js
@@ -0,0 +1,12 @@
+import store from "@/store";
+
+// 翻译区域id
+export function filterTown(id) {
+  if (id == undefined) return;
+  let name = store.getters.townList.filter((item) => item.value == id);
+  if (name.length > 0) {
+    return name[0].label;
+  } else {
+    return id;
+  }
+}
diff --git a/src/views/netSecurity/DataSource/index.vue b/src/views/netSecurity/DataSource/index.vue
index 457dc81..267f4ce 100644
--- a/src/views/netSecurity/DataSource/index.vue
+++ b/src/views/netSecurity/DataSource/index.vue
@@ -269,8 +269,8 @@
         border
         labelClassName="desLable"
       >
-        <el-descriptions-item label="区域id">{{
-          form.areaId
+        <el-descriptions-item label="区域">{{
+          $filterTown(form.areaId)
         }}</el-descriptions-item>
 
         <el-descriptions-item label="来源类型">
diff --git a/src/views/netSecurity/SecurityCheck/index.vue b/src/views/netSecurity/SecurityCheck/index.vue
index 42d7353..f230362 100644
--- a/src/views/netSecurity/SecurityCheck/index.vue
+++ b/src/views/netSecurity/SecurityCheck/index.vue
@@ -169,8 +169,15 @@
         label-width="auto"
         class="dialog-from"
       >
-        <el-form-item label="区域id" prop="areaId">
-          <el-input v-model="form.areaId" placeholder="请输入区域id" />
+        <el-form-item label="区域" prop="areaId">
+          <el-select v-model="form.areaId" placeholder="请选择区域" filterable>
+            <el-option
+              v-for="dict in townList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="攻击发起时间" prop="attackTime">
           <el-date-picker
@@ -274,8 +281,8 @@
         border
         labelClassName="desLable"
       >
-        <el-descriptions-item label="区域id">{{
-          form.areaId
+        <el-descriptions-item label="区域">{{
+          $filterTown(form.areaId)
         }}</el-descriptions-item>
 
         <el-descriptions-item label="攻击发起时间">{{
@@ -345,6 +352,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import {
   listDetection,
   getDetection,
@@ -355,6 +363,9 @@ import {
 } from "@/api/zongzhi/netSecurity/SecurityCheck/index.js";
 export default {
   name: "Detection",
+  computed: {
+    ...mapGetters(["townList"]),
+  },
   //注释字典
   dicts: ["tc_net_safety_level", "tc_attack_type"],
   data() {
diff --git a/src/views/netSecurity/supervise/DbSteam/index.vue b/src/views/netSecurity/supervise/DbSteam/index.vue
index 4e24d8d..bd1d96a 100644
--- a/src/views/netSecurity/supervise/DbSteam/index.vue
+++ b/src/views/netSecurity/supervise/DbSteam/index.vue
@@ -170,8 +170,15 @@
         label-width="auto"
         class="dialog-from"
       >
-        <el-form-item label="区域id" prop="areaId">
-          <el-input v-model="form.areaId" placeholder="请输入区域id" />
+        <el-form-item label="区域" prop="areaId">
+          <el-select v-model="form.areaId" placeholder="请选择区域" filterable>
+            <el-option
+              v-for="dict in townList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="系统名称" prop="steamName">
           <el-input v-model="form.steamName" placeholder="请输入系统名称" />
@@ -302,8 +309,8 @@
         border
         labelClassName="desLable"
       >
-        <el-descriptions-item label="区域id">{{
-          form.areaId
+        <el-descriptions-item label="区域">{{
+          $filterTown(form.areaId)
         }}</el-descriptions-item>
 
         <el-descriptions-item label="系统名称">{{
@@ -379,6 +386,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import {
   listSystem,
   getSystem,
@@ -387,10 +395,14 @@ import {
   updateSystem,
   exportSystem,
 } from "@/api/zongzhi/netSecurity/supervise/DbSteam/index.js";
+
 export default {
   name: "Detection",
   //注释字典
   dicts: ["tc_yes_no", "tc_net_safety_level", "tc_db_steam_state"],
+  computed: {
+    ...mapGetters(["townList"]),
+  },
   data() {
     return {
       tableHeigth: 0,