diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts
new file mode 100644
index 0000000..6143365
--- /dev/null
+++ b/src/api/api/electricity.ts
@@ -0,0 +1,32 @@
+import request from '@/api/index'
+// 变压器列表
+export function getTransformerList(params: any) {
+  return request({
+    url: '/sgPwrtransfmB/listPage',
+    method: 'get',
+    params,
+  })
+}
+// 添加变压器
+export function addTransformerList(data: any) {
+  return request({
+    url: '/sgPwrtransfmB/add',
+    method: 'post',
+    data,
+  })
+}
+// 修改变压器
+export function updateTransformerList(data: any) {
+  return request({
+    url: '/sgPwrtransfmB/update',
+    method: 'post',
+    data,
+  })
+}
+// 删除变压器
+export function deleteTransformerList(id: any) {
+  return request({
+    url: `/sgPwrtransfmB/delete?id=${id}`,
+    method: 'post',
+  })
+}

diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts
new file mode 100644
index 0000000..6143365
--- /dev/null
+++ b/src/api/api/electricity.ts
@@ -0,0 +1,32 @@
+import request from '@/api/index'
+// 变压器列表
+export function getTransformerList(params: any) {
+  return request({
+    url: '/sgPwrtransfmB/listPage',
+    method: 'get',
+    params,
+  })
+}
+// 添加变压器
+export function addTransformerList(data: any) {
+  return request({
+    url: '/sgPwrtransfmB/add',
+    method: 'post',
+    data,
+  })
+}
+// 修改变压器
+export function updateTransformerList(data: any) {
+  return request({
+    url: '/sgPwrtransfmB/update',
+    method: 'post',
+    data,
+  })
+}
+// 删除变压器
+export function deleteTransformerList(id: any) {
+  return request({
+    url: `/sgPwrtransfmB/delete?id=${id}`,
+    method: 'post',
+  })
+}
diff --git a/src/views/electricity/1 b/src/views/electricity/1
deleted file mode 100644
index e69de29..0000000
--- a/src/views/electricity/1
+++ /dev/null

diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts
new file mode 100644
index 0000000..6143365
--- /dev/null
+++ b/src/api/api/electricity.ts
@@ -0,0 +1,32 @@
+import request from '@/api/index'
+// 变压器列表
+export function getTransformerList(params: any) {
+  return request({
+    url: '/sgPwrtransfmB/listPage',
+    method: 'get',
+    params,
+  })
+}
+// 添加变压器
+export function addTransformerList(data: any) {
+  return request({
+    url: '/sgPwrtransfmB/add',
+    method: 'post',
+    data,
+  })
+}
+// 修改变压器
+export function updateTransformerList(data: any) {
+  return request({
+    url: '/sgPwrtransfmB/update',
+    method: 'post',
+    data,
+  })
+}
+// 删除变压器
+export function deleteTransformerList(id: any) {
+  return request({
+    url: `/sgPwrtransfmB/delete?id=${id}`,
+    method: 'post',
+  })
+}
diff --git a/src/views/electricity/1 b/src/views/electricity/1
deleted file mode 100644
index e69de29..0000000
--- a/src/views/electricity/1
+++ /dev/null
diff --git a/src/views/electricity/transformer/index.vue b/src/views/electricity/transformer/index.vue
index e014c98..0cadc87 100644
--- a/src/views/electricity/transformer/index.vue
+++ b/src/views/electricity/transformer/index.vue
@@ -1,3 +1,182 @@
+<!--
+  Description: 变压器管理页面列表
+  Author: 李亚光
+  Date: 2023-05-29
+ -->
+<script lang="ts" setup name="network">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editList from './pageAdd.vue'
+import { deleteTransformerList, getTransformerList } from '@/api/api/electricity'
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  name: '',
+})
+// // 查询时间段范围
+// const TimeRanges = ref()
+// // 监听时间段范围
+// watch(() => TimeRanges.value, (newVal: string[]) => {
+//   if (newVal && newVal.length) {
+//     searchQuery.startTime = newVal[0]
+//     searchQuery.endTime = newVal[1]
+//   }
+// }, { deep: true })
+// table表格loading
+const loadingTable = ref(true)
+// table列表
+const columns = ref([
+  { text: '名称', value: 'name', align: 'center' },
+  { text: '型号', value: 'model', align: 'center' },
+  { text: '安装位置', value: 'installPosition', align: 'center' },
+  { text: '运行状态', value: 'runningState', align: 'center' },
+  { text: '额定容量', value: 'mvaRate', align: 'center' },
+  { text: '最高电压等级', value: 'voltageType', align: 'center' },
+  { text: '	投运日期', value: 'operateDate', align: 'center' },
+  { text: '	退役日期', value: 'expiryDate', align: 'center' },
+])
+const total = ref<number>(0)
+// table列表数据
+const list = ref<any[]>([])
+// 获取数据列表
+const fetchDataList = () => {
+  loadingTable.value = true
+  getTransformerList(searchQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  })
+}
+// 搜索
+const search = () => {
+  fetchDataList()
+}
+// 新增或编辑组件
+const editRef = ref()
+// 新增
+const add = () => {
+  editRef.value.initDialog('create')
+}
+// 编辑
+const edit = (row: any) => {
+  console.log(row, 'row')
+  editRef.value.initDialog('update', row)
+}
+// 删除
+const del = (row: any) => {
+  console.log(row, 'row')
+  ElMessageBox.confirm(
+    '确认删除选中的数据吗?',
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      deleteTransformerList(row.id).then((res) => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+        search()
+      })
+    })
+    .catch(() => {
+    })
+}
+// 重置
+const reset = () => {
+  searchQuery.name = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  search()
+}
+const detailRef = ref()
+// 查看详情
+const detail = (row: any) => {
+  // if (row.electricityDetail) {
+  //   detailRef.value.initDialog(row)
+  // }
+  // else {
+  //   ElMessage({
+  //     type: 'info',
+  //     message: '暂无内容',
+  //   })
+  // }
+  editRef.value.initDialog('detail', row)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+</script>
+
 <template>
-  变压器管理
+  <div>
+    <div>
+      <edit-list ref="editRef" @refresh="search" />
+      <detail-dialog ref="detailRef" />
+      <!-- 筛选条件 -->
+      <search-area :need-clear="true" @search="search" @clear="reset">
+        <search-item>
+          <el-input v-model="searchQuery.name" placeholder="名称" clearable class="w-50 m-2 normal-input" />
+        </search-item>
+        <!-- <search-item>
+          <el-date-picker
+            v-model="TimeRanges" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="上传开始时间" end-placeholder="上传结束时间"
+            clearable
+          />
+        </search-item> -->
+      </search-area>
+      <table-container>
+        <template #btns-right>
+          <icon-button icon="icon-add" title="新增" @click="add" />
+        </template>
+        <!-- 表格区域 -->
+        <normal-table
+          :data="list" :total="total" :columns="columns as any"
+          :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+          :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+        >
+          <template #preColumns>
+            <el-table-column label="序号" width="55" align="center">
+              <template #default="scope">
+                {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+          </template>
+          <template #columns>
+            <el-table-column label="操作" align="center" width="120">
+              <template #default="{ row }">
+                <el-button type="primary" link size="small" @click="edit(row)">
+                  修改
+                </el-button>
+                <el-button type="primary" link size="small" @click="del(row)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </normal-table>
+      </table-container>
+    </div>
+  </div>
 </template>

diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts
new file mode 100644
index 0000000..6143365
--- /dev/null
+++ b/src/api/api/electricity.ts
@@ -0,0 +1,32 @@
+import request from '@/api/index'
+// 变压器列表
+export function getTransformerList(params: any) {
+  return request({
+    url: '/sgPwrtransfmB/listPage',
+    method: 'get',
+    params,
+  })
+}
+// 添加变压器
+export function addTransformerList(data: any) {
+  return request({
+    url: '/sgPwrtransfmB/add',
+    method: 'post',
+    data,
+  })
+}
+// 修改变压器
+export function updateTransformerList(data: any) {
+  return request({
+    url: '/sgPwrtransfmB/update',
+    method: 'post',
+    data,
+  })
+}
+// 删除变压器
+export function deleteTransformerList(id: any) {
+  return request({
+    url: `/sgPwrtransfmB/delete?id=${id}`,
+    method: 'post',
+  })
+}
diff --git a/src/views/electricity/1 b/src/views/electricity/1
deleted file mode 100644
index e69de29..0000000
--- a/src/views/electricity/1
+++ /dev/null
diff --git a/src/views/electricity/transformer/index.vue b/src/views/electricity/transformer/index.vue
index e014c98..0cadc87 100644
--- a/src/views/electricity/transformer/index.vue
+++ b/src/views/electricity/transformer/index.vue
@@ -1,3 +1,182 @@
+<!--
+  Description: 变压器管理页面列表
+  Author: 李亚光
+  Date: 2023-05-29
+ -->
+<script lang="ts" setup name="network">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editList from './pageAdd.vue'
+import { deleteTransformerList, getTransformerList } from '@/api/api/electricity'
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  name: '',
+})
+// // 查询时间段范围
+// const TimeRanges = ref()
+// // 监听时间段范围
+// watch(() => TimeRanges.value, (newVal: string[]) => {
+//   if (newVal && newVal.length) {
+//     searchQuery.startTime = newVal[0]
+//     searchQuery.endTime = newVal[1]
+//   }
+// }, { deep: true })
+// table表格loading
+const loadingTable = ref(true)
+// table列表
+const columns = ref([
+  { text: '名称', value: 'name', align: 'center' },
+  { text: '型号', value: 'model', align: 'center' },
+  { text: '安装位置', value: 'installPosition', align: 'center' },
+  { text: '运行状态', value: 'runningState', align: 'center' },
+  { text: '额定容量', value: 'mvaRate', align: 'center' },
+  { text: '最高电压等级', value: 'voltageType', align: 'center' },
+  { text: '	投运日期', value: 'operateDate', align: 'center' },
+  { text: '	退役日期', value: 'expiryDate', align: 'center' },
+])
+const total = ref<number>(0)
+// table列表数据
+const list = ref<any[]>([])
+// 获取数据列表
+const fetchDataList = () => {
+  loadingTable.value = true
+  getTransformerList(searchQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  })
+}
+// 搜索
+const search = () => {
+  fetchDataList()
+}
+// 新增或编辑组件
+const editRef = ref()
+// 新增
+const add = () => {
+  editRef.value.initDialog('create')
+}
+// 编辑
+const edit = (row: any) => {
+  console.log(row, 'row')
+  editRef.value.initDialog('update', row)
+}
+// 删除
+const del = (row: any) => {
+  console.log(row, 'row')
+  ElMessageBox.confirm(
+    '确认删除选中的数据吗?',
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      deleteTransformerList(row.id).then((res) => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+        search()
+      })
+    })
+    .catch(() => {
+    })
+}
+// 重置
+const reset = () => {
+  searchQuery.name = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  search()
+}
+const detailRef = ref()
+// 查看详情
+const detail = (row: any) => {
+  // if (row.electricityDetail) {
+  //   detailRef.value.initDialog(row)
+  // }
+  // else {
+  //   ElMessage({
+  //     type: 'info',
+  //     message: '暂无内容',
+  //   })
+  // }
+  editRef.value.initDialog('detail', row)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+</script>
+
 <template>
-  变压器管理
+  <div>
+    <div>
+      <edit-list ref="editRef" @refresh="search" />
+      <detail-dialog ref="detailRef" />
+      <!-- 筛选条件 -->
+      <search-area :need-clear="true" @search="search" @clear="reset">
+        <search-item>
+          <el-input v-model="searchQuery.name" placeholder="名称" clearable class="w-50 m-2 normal-input" />
+        </search-item>
+        <!-- <search-item>
+          <el-date-picker
+            v-model="TimeRanges" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="上传开始时间" end-placeholder="上传结束时间"
+            clearable
+          />
+        </search-item> -->
+      </search-area>
+      <table-container>
+        <template #btns-right>
+          <icon-button icon="icon-add" title="新增" @click="add" />
+        </template>
+        <!-- 表格区域 -->
+        <normal-table
+          :data="list" :total="total" :columns="columns as any"
+          :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+          :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+        >
+          <template #preColumns>
+            <el-table-column label="序号" width="55" align="center">
+              <template #default="scope">
+                {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+          </template>
+          <template #columns>
+            <el-table-column label="操作" align="center" width="120">
+              <template #default="{ row }">
+                <el-button type="primary" link size="small" @click="edit(row)">
+                  修改
+                </el-button>
+                <el-button type="primary" link size="small" @click="del(row)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </normal-table>
+      </table-container>
+    </div>
+  </div>
 </template>
diff --git a/src/views/electricity/transformer/pageAdd.vue b/src/views/electricity/transformer/pageAdd.vue
new file mode 100644
index 0000000..70fbe6e
--- /dev/null
+++ b/src/views/electricity/transformer/pageAdd.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup name="EditTransformer">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { addTransformerList, updateTransformerList } from '@/api/api/electricity'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const isEditMode = ref(true)
+const areaForm = ref({
+  name: '', // 变压器名称
+  model: '', // 型号
+  installPosition: '', // 安装位置
+  lat: '', // 纬度
+  lng: '', // 经度
+  mvaRate: '', // 额定容量
+  volRegulatingMode: '', // 调压方式
+  voltageType: '', // 最高电压等级
+  runningState: '', // 运行状态
+  operateDate: '', // 投运日期
+  expiryDate: '', // 停运日期
+}) // 表单
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+  detail: '详情',
+} // 表头显示标题
+const btnLoading = ref(false) // 保存按钮的加载中状态
+const rules: FormRules = {
+  name: [{ required: true, message: '请输入变压器名称', trigger: ['blur', 'change'] }],
+  model: [{ required: true, message: '请输入变压器型号', trigger: ['blur', 'change'] }],
+  installPosition: [{ required: true, message: '请输入安装位置', trigger: ['blur', 'change'] }],
+  lat: [{ required: true, message: '请选择经纬度坐标', trigger: ['blur', 'change'] }],
+  mvaRate: [{ required: true, message: '请输入额定容量', trigger: ['blur', 'change'] }],
+  volRegulatingMode: [{ required: true, message: '请选择调压方式', trigger: ['blur', 'change'] }],
+  voltageType: [{ required: true, message: '请输入最高电压等级', trigger: ['blur', 'change'] }],
+  runningState: [{ required: true, message: '请选择运行状态', trigger: ['blur', 'change'] }],
+  operateDate: [{ required: true, message: '请选择投运日期', trigger: ['blur', 'change'] }],
+  expiryDate: [{ required: true, message: '请选择停运日期', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+// 重置表单
+const resetForm = () => {
+  areaForm.value = {
+    name: '', // 变压器名称
+    model: '', // 型号
+    installPosition: '', // 安装位置
+    lat: '', // 纬度
+    lng: '', // 经度
+    mvaRate: '', // 额定容量
+    volRegulatingMode: '', // 调压方式
+    voltageType: '', // 最高电压等级
+    runningState: '', // 运行状态
+    operateDate: '', // 投运日期
+    expiryDate: '', // 停运日期
+  }
+}
+const locationData = ref<number[]>([]) // 经纬度 - 展示用
+const locationDataStr = computed(() => locationData.value.join())
+watch(() => locationData.value, (newVal: number[]) => {
+  if (newVal.length) {
+    areaForm.value.lng = newVal[0].toString()
+    areaForm.value.lat = newVal[1].toString()
+  }
+}, { deep: true })
+const selectRef = ref()
+// 选择经纬度
+const selectLocation = () => {
+  selectRef.value.initDialog(locationData.value)
+}
+// 确定经纬度
+const confirm = (data: number[]) => {
+  locationData.value = data
+}
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  btnLoading.value = false
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    isEditMode.value = false
+    nextTick(() => {
+      dataFormRef.value.clearValidate()
+    })
+  }
+  else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
+    areaForm.value = row
+    isEditMode.value = true
+  }
+  else if (dialogStatus.value === 'detail') {
+    areaForm.value = row
+    isEditMode.value = false
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      // areaForm.value.uploadTime = dayjs().format('YYYY-MM-DD')
+      btnLoading.value = true
+      addTransformerList(areaForm.value).then((response) => {
+        if (response.code === 200) {
+          btnLoading.value = false
+          // 通知父组件刷新状态
+          setTimeout(() => {
+            emits('refresh')
+          })
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      btnLoading.value = true
+      updateTransformerList(areaForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          dataFormRef.value.clearValidate()
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'update') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body>
+    <select-location-map ref="selectRef" @confirm="confirm" />
+    <el-form ref="dataFormRef" :rules="rules" :model="areaForm" label-position="right" label-width="140px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="名称:" prop="name">
+            <el-input v-model="areaForm.name" :disabled="dialogStatus === 'detail'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="型号:" prop="model">
+            <el-input v-model="areaForm.model" :disabled="dialogStatus === 'detail'" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="安装位置:" prop="installPosition">
+            <el-input v-model="areaForm.installPosition" :disabled="dialogStatus === 'detail'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="经纬度坐标:" prop="lat">
+            <el-input v-model="locationDataStr" :disabled="dialogStatus === 'detail'" @focus="selectLocation" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="额定容量(MVA):" prop="mvaRate">
+            <el-input v-model="areaForm.mvaRate" :disabled="dialogStatus === 'detail'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="调压方式:" prop="volRegulatingMode">
+            <el-input v-model="areaForm.volRegulatingMode" :disabled="dialogStatus === 'detail'" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="最高电压等级:" prop="voltageType">
+            <el-input v-model="areaForm.voltageType" :disabled="dialogStatus === 'detail'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="运行状态:" prop="runningState">
+            <el-input v-model="areaForm.runningState" :disabled="dialogStatus === 'detail'" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="投运日期:" prop="operateDate">
+            <el-date-picker v-model="areaForm.operateDate" type="datetime" :disabled="dialogStatus === 'detail'" placeholder="投运日期" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="停运日期:" prop="expiryDate">
+            <el-date-picker v-model="areaForm.expiryDate" type="datetime" :disabled="dialogStatus === 'detail'" placeholder="停运日期" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-if="dialogStatus !== 'detail'" #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+    <template v-else #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="dialogFormVisible = false">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>