diff --git a/src/components/Business/Area/AreaLink.vue b/src/components/Business/Area/AreaLink.vue
new file mode 100644
index 0000000..452554d
--- /dev/null
+++ b/src/components/Business/Area/AreaLink.vue
@@ -0,0 +1,32 @@
+<template>
+  <base-link :id="id" :text="text" :size="size" @click="handleClick" :permissions="['bst:area:query']"/>  
+</template>
+
+<script>
+import BaseLink from '@/components/BaseLink/index.vue';
+export default {
+  name: 'AreaLink',
+  components: {BaseLink},
+  props: {
+    id: {
+      type: String,
+      default: null
+    },
+    text: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: "small"
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.id != null && this.checkPermi(['bst:area:query'])) {
+        this.$router.push(`/view/area/${this.id}`);
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/bst/area/view/view.vue b/src/views/bst/area/view/view.vue
new file mode 100644
index 0000000..50714d3
--- /dev/null
+++ b/src/views/bst/area/view/view.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="app-container" v-loading="loading" >
+    <el-card header="基础信息" class="card-box">
+      <el-descriptions :column="4">
+        <el-descriptions-item label="名称">
+          {{ detail.name }}
+          <dict-tag :options="dict.type.area_status" :value="detail.status" size="small" />
+        </el-descriptions-item>
+        <el-descriptions-item label="运营时间">
+          {{ detail.areaTimeStart | dv }} - {{ detail.areaTimeEnd | dv }}
+        </el-descriptions-item>
+        <el-descriptions-item label="运营商">
+          <user-link :id="detail.userId" :text="detail.userName" />
+        </el-descriptions-item>
+        <el-descriptions-item label="创建人">
+          <user-link :id="detail.createId" :text="detail.createName" />
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ detail.createTime | dv }}</el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">{{ detail.remark | dv }}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card v-if="detail.id" class="card-box">
+      <el-tabs>
+        <el-tab-pane label="电子围栏" lazy v-if="checkPermi(['bst:areaSub:list'])">
+          <area-sub :area-id="detail.id"/>
+        </el-tab-pane>
+        <el-tab-pane label="车辆列表" lazy v-if="checkPermi(['bst:device:list'])">
+          <device :query="{areaId: detail.id}" />
+        </el-tab-pane>
+        <el-tab-pane label="订单列表" lazy v-if="checkPermi(['bst:order:list'])">
+          <order :query="{areaId: detail.id}" />
+        </el-tab-pane>
+        <el-tab-pane label="加盟列表" lazy v-if="checkPermi(['bst:areaJoin:list'])">
+          <area-join :query="{areaId: detail.id, types: [AreaJoinType.JOIN, AreaJoinType.COOPERATE]}" />
+        </el-tab-pane>
+        <el-tab-pane label="运维列表" lazy v-if="checkPermi(['bst:areaJoin:list'])">
+          <area-join :query="{areaId: detail.id, types: [AreaJoinType.OPERATION]}" />
+        </el-tab-pane>
+        <el-tab-pane label="客服列表" lazy v-if="checkPermi(['bst:customerService:list'])">
+          <customer-service :query="{areaId: detail.id}"/>
+        </el-tab-pane>
+        <el-tab-pane label="公告协议" lazy v-if="checkPermi(['bst:agreement:list'])">
+          <agreement :query="{areaId: detail.id}"/>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getArea } from '@/api/bst/area';
+import UserLink from '@/components/Business/User/UserLink.vue';
+import AreaSub from '@/views/bst/areaSub/index.vue';
+import Device from '@/views/bst/device/index.vue';
+import Order from '@/views/bst/order/index.vue';
+import AreaJoin from '@/views/bst/areaJoin/index.vue';
+import { AreaJoinType } from '@/utils/enums';
+import CustomerService from '@/views/bst/customerService/index.vue';
+import Agreement from '@/views/bst/agreement/index.vue';
+
+export default {
+  name: 'AreaView',
+  dicts: ['area_status'],
+  components: {
+    UserLink,
+    AreaSub,
+    Device,
+    Order,
+    AreaJoin,
+    CustomerService,
+    Agreement
+  },
+  data() {
+    return {
+      AreaJoinType,
+      detail: {},
+      loading: false,
+      id: null,
+    }
+  },
+  created() {
+    this.id = this.$route.params.id;
+    this.getDetail();
+  },
+  methods: {
+    getDetail() {
+      this.loading = true;
+      getArea(this.id).then(res => {
+        this.detail = res.data;
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+  }
+}
+</script>
\ No newline at end of file