diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
new file mode 100644
index 0000000..ff9f9a1
--- /dev/null
+++ b/src/views/overview/overview.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div v-loading="loading" class="overview-map-container">
+      <div id="map"/>
+    </div>
+    <!--<el-amap-info-window-->
+    <!--v-if="bridgeInfo"-->
+    <!--:position="currentWindow.position"-->
+    <!--:visible="currentWindow.visible"-->
+    <!--class="info-Window">-->
+    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
+    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
+    <!--<div class="info-body">-->
+    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
+    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
+    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
+    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
+    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
+    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
+    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</el-amap-info-window>-->
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getDetail } from '@/api/system/bridge'
+// import icon from '/static/images/well/0100.png'
+// import { getAllMarker } from '@/api/overview'
+// import { getMarkerInfo } from '@/api/marker'
+// import { lazyAMapApiLoaderInstance } from 'vue-amap'
+
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      baselayer: [],
+      url: require('../../assets/global_images/location_green.png'),
+      bridgeList: [
+        {id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450},
+        {id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659},
+        {id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659}
+      ],
+      bridgeInfo: {
+        id: '',
+        name: '',
+        typeName: '', // 桥型名称
+        bridgeCode: '', // 柱号
+        roadName: '', // 道路名称
+        height: '', // 高度
+        length: '', // 长度
+        buildTime: '', // 开建时间
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: '',
+        onlineState: ''
+      },
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      loading: false,
+      icon: 'cross',
+      map: null,
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 30,
+        center: [27.76062, 116.05071],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      map.on('click', function(e){
+        console.log(e)
+        // var marker = new L.marker(e.latlng).addTo(map);
+      })
+      var Icon = L.icon({
+        iconUrl: require('../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+
+      for (var i=0; i<3; i++) {
+        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
+          icon: Icon,
+          id: this.bridgeList[i].id
+        }).addTo(this.map)
+        item.on('click', function(e) {
+          if (e.target.dragging._marker._popup) {
+            e.target.dragging._marker.unbindPopup()
+          }
+          getDetail(e.target.options.id).then(response => {
+            var data = response.data
+            console.log(response.data)
+            var photo = data.photo?data.photo:null
+            var str = '<div style="font-size: 14px;padding: 6px"> ' +
+              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">桥梁信息</div>' +
+              '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
+              '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁简介：</label>' + data.description	+ '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥型名称：</label>' + data.typeName	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0,10) + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0,10) + '</div>' +
+              '</div>'
+            var popup = L.popup().setContent(str)
+            e.target.dragging._marker.bindPopup(popup).openPopup()
+            e.target.dragging._marker.openPopup()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #map {
+    width: 100%;
+    height: calc(100vh);
+  }
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+  .infoWindowClass{
+    background-color: pink;
+  }
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !important;
+}
+
+.el-table th{
+/*background-color: rgba(255, 229, 230, 0.8);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  // .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  // }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 78px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width:30px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
new file mode 100644
index 0000000..ff9f9a1
--- /dev/null
+++ b/src/views/overview/overview.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div v-loading="loading" class="overview-map-container">
+      <div id="map"/>
+    </div>
+    <!--<el-amap-info-window-->
+    <!--v-if="bridgeInfo"-->
+    <!--:position="currentWindow.position"-->
+    <!--:visible="currentWindow.visible"-->
+    <!--class="info-Window">-->
+    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
+    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
+    <!--<div class="info-body">-->
+    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
+    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
+    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
+    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
+    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
+    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
+    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</el-amap-info-window>-->
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getDetail } from '@/api/system/bridge'
+// import icon from '/static/images/well/0100.png'
+// import { getAllMarker } from '@/api/overview'
+// import { getMarkerInfo } from '@/api/marker'
+// import { lazyAMapApiLoaderInstance } from 'vue-amap'
+
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      baselayer: [],
+      url: require('../../assets/global_images/location_green.png'),
+      bridgeList: [
+        {id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450},
+        {id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659},
+        {id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659}
+      ],
+      bridgeInfo: {
+        id: '',
+        name: '',
+        typeName: '', // 桥型名称
+        bridgeCode: '', // 柱号
+        roadName: '', // 道路名称
+        height: '', // 高度
+        length: '', // 长度
+        buildTime: '', // 开建时间
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: '',
+        onlineState: ''
+      },
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      loading: false,
+      icon: 'cross',
+      map: null,
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 30,
+        center: [27.76062, 116.05071],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      map.on('click', function(e){
+        console.log(e)
+        // var marker = new L.marker(e.latlng).addTo(map);
+      })
+      var Icon = L.icon({
+        iconUrl: require('../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+
+      for (var i=0; i<3; i++) {
+        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
+          icon: Icon,
+          id: this.bridgeList[i].id
+        }).addTo(this.map)
+        item.on('click', function(e) {
+          if (e.target.dragging._marker._popup) {
+            e.target.dragging._marker.unbindPopup()
+          }
+          getDetail(e.target.options.id).then(response => {
+            var data = response.data
+            console.log(response.data)
+            var photo = data.photo?data.photo:null
+            var str = '<div style="font-size: 14px;padding: 6px"> ' +
+              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">桥梁信息</div>' +
+              '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
+              '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁简介：</label>' + data.description	+ '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥型名称：</label>' + data.typeName	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0,10) + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0,10) + '</div>' +
+              '</div>'
+            var popup = L.popup().setContent(str)
+            e.target.dragging._marker.bindPopup(popup).openPopup()
+            e.target.dragging._marker.openPopup()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #map {
+    width: 100%;
+    height: calc(100vh);
+  }
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+  .infoWindowClass{
+    background-color: pink;
+  }
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !important;
+}
+
+.el-table th{
+/*background-color: rgba(255, 229, 230, 0.8);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  // .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  // }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 78px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width:30px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/rule/components/setThresh.vue b/src/views/rule/components/setThresh.vue
new file mode 100644
index 0000000..a0ee404
--- /dev/null
+++ b/src/views/rule/components/setThresh.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body @close="cancel">
+      <el-form ref="dataForm" :rules="rules" :model="monitorForm" label-well-code="right" label-width="140px">
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="监控点名称" prop="monitorName">
+              <el-input v-model.trim="monitorForm.monitorName" disabled type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="所属场站" prop="stationName">
+              <el-input v-model="monitorForm.stationName" disabled placeholder=""/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="燃气浓度报警阈值" prop="high">
+              <el-input v-model.trim="monitorForm.high" type="number" :min="0" placeholder="燃气浓度报警阈值"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { setThresh } from '@/api/system/alarm'
+
+export default {
+  name: 'SetThresh',
+  data() {
+    const validateHigh = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
+          callback(new Error('请填写大于0的数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('消警持续时间不能为空'))
+      }
+    }
+    return {
+      listLoading: true,
+      dialogFormVisible: false, // 对话框是否显示
+      monitorForm: {
+        stationName: '',
+        monitorId: '',
+        monitorName: '',
+        high: '' // 报警阈值
+      },
+      title: '', // 表头显示标题
+      rules: {
+        high: [{ required: true, validator: validateHigh, trigger: ['change', 'blur'] }]
+      } // 前端校验规则
+    }
+  },
+  watch: { },
+  mounted() { },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, monitorInfo) {
+      debugger
+      this.dialogFormVisible = dialogFormVisible
+      this.title = '设置监控点报警阈值'
+      this.monitorForm.stationName = monitorInfo.stationName
+      this.monitorForm.monitorName = monitorInfo.monitorPointName
+      this.monitorForm.monitorId = monitorInfo.monitorPointId
+      this.monitorForm.high = monitorInfo.high
+    },
+    // 重置表单
+    resetForm() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 保存数据
+    saveData: function() {
+      // 表单校验
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          setThresh(this.monitorForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('设置成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .dialog-footer{
+    text-align: right;
+    margin-top: 10px;
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
new file mode 100644
index 0000000..ff9f9a1
--- /dev/null
+++ b/src/views/overview/overview.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div v-loading="loading" class="overview-map-container">
+      <div id="map"/>
+    </div>
+    <!--<el-amap-info-window-->
+    <!--v-if="bridgeInfo"-->
+    <!--:position="currentWindow.position"-->
+    <!--:visible="currentWindow.visible"-->
+    <!--class="info-Window">-->
+    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
+    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
+    <!--<div class="info-body">-->
+    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
+    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
+    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
+    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
+    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
+    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
+    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</el-amap-info-window>-->
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getDetail } from '@/api/system/bridge'
+// import icon from '/static/images/well/0100.png'
+// import { getAllMarker } from '@/api/overview'
+// import { getMarkerInfo } from '@/api/marker'
+// import { lazyAMapApiLoaderInstance } from 'vue-amap'
+
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      baselayer: [],
+      url: require('../../assets/global_images/location_green.png'),
+      bridgeList: [
+        {id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450},
+        {id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659},
+        {id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659}
+      ],
+      bridgeInfo: {
+        id: '',
+        name: '',
+        typeName: '', // 桥型名称
+        bridgeCode: '', // 柱号
+        roadName: '', // 道路名称
+        height: '', // 高度
+        length: '', // 长度
+        buildTime: '', // 开建时间
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: '',
+        onlineState: ''
+      },
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      loading: false,
+      icon: 'cross',
+      map: null,
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 30,
+        center: [27.76062, 116.05071],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      map.on('click', function(e){
+        console.log(e)
+        // var marker = new L.marker(e.latlng).addTo(map);
+      })
+      var Icon = L.icon({
+        iconUrl: require('../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+
+      for (var i=0; i<3; i++) {
+        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
+          icon: Icon,
+          id: this.bridgeList[i].id
+        }).addTo(this.map)
+        item.on('click', function(e) {
+          if (e.target.dragging._marker._popup) {
+            e.target.dragging._marker.unbindPopup()
+          }
+          getDetail(e.target.options.id).then(response => {
+            var data = response.data
+            console.log(response.data)
+            var photo = data.photo?data.photo:null
+            var str = '<div style="font-size: 14px;padding: 6px"> ' +
+              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">桥梁信息</div>' +
+              '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
+              '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁简介：</label>' + data.description	+ '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥型名称：</label>' + data.typeName	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0,10) + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0,10) + '</div>' +
+              '</div>'
+            var popup = L.popup().setContent(str)
+            e.target.dragging._marker.bindPopup(popup).openPopup()
+            e.target.dragging._marker.openPopup()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #map {
+    width: 100%;
+    height: calc(100vh);
+  }
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+  .infoWindowClass{
+    background-color: pink;
+  }
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !important;
+}
+
+.el-table th{
+/*background-color: rgba(255, 229, 230, 0.8);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  // .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  // }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 78px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width:30px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/rule/components/setThresh.vue b/src/views/rule/components/setThresh.vue
new file mode 100644
index 0000000..a0ee404
--- /dev/null
+++ b/src/views/rule/components/setThresh.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body @close="cancel">
+      <el-form ref="dataForm" :rules="rules" :model="monitorForm" label-well-code="right" label-width="140px">
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="监控点名称" prop="monitorName">
+              <el-input v-model.trim="monitorForm.monitorName" disabled type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="所属场站" prop="stationName">
+              <el-input v-model="monitorForm.stationName" disabled placeholder=""/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="燃气浓度报警阈值" prop="high">
+              <el-input v-model.trim="monitorForm.high" type="number" :min="0" placeholder="燃气浓度报警阈值"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { setThresh } from '@/api/system/alarm'
+
+export default {
+  name: 'SetThresh',
+  data() {
+    const validateHigh = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
+          callback(new Error('请填写大于0的数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('消警持续时间不能为空'))
+      }
+    }
+    return {
+      listLoading: true,
+      dialogFormVisible: false, // 对话框是否显示
+      monitorForm: {
+        stationName: '',
+        monitorId: '',
+        monitorName: '',
+        high: '' // 报警阈值
+      },
+      title: '', // 表头显示标题
+      rules: {
+        high: [{ required: true, validator: validateHigh, trigger: ['change', 'blur'] }]
+      } // 前端校验规则
+    }
+  },
+  watch: { },
+  mounted() { },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, monitorInfo) {
+      debugger
+      this.dialogFormVisible = dialogFormVisible
+      this.title = '设置监控点报警阈值'
+      this.monitorForm.stationName = monitorInfo.stationName
+      this.monitorForm.monitorName = monitorInfo.monitorPointName
+      this.monitorForm.monitorId = monitorInfo.monitorPointId
+      this.monitorForm.high = monitorInfo.high
+    },
+    // 重置表单
+    resetForm() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 保存数据
+    saveData: function() {
+      // 表单校验
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          setThresh(this.monitorForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('设置成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .dialog-footer{
+    text-align: right;
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/rule/listRule.vue b/src/views/rule/listRule.vue
new file mode 100644
index 0000000..a19b9e4
--- /dev/null
+++ b/src/views/rule/listRule.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="app-container">
+    <!--查询结果Table显示-->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+        <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button v-if="column.type=='Button'" type="text" @click="showWellDetail(scope.row)">{{ scope.row[column.value] }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="print(scope.row)">打印</el-button>
+            <el-button type="text" @click="download(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        v-show="total>listQuery.limit"
+        :current-page="listQuery.offset"
+        :page-sizes="[20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRuleList } from '@/api/system/rule'
+// import DownloadTemplate from '@/components/DownloadTemplate'
+
+export default {
+  name: 'ListRule',
+  components: { },
+  data() {
+    return {
+      listQuery: {
+        keywords: '',
+        deviceType: '',
+        isOnline: '',
+        offset: 1,
+        limit: 20,
+        sort: 'id',
+        order: 'asc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '规章制度名称',
+          value: 'filename',
+          align: 'center'
+        },
+        {
+          text: '上传时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      deptTreeList: null, // 组织树列表数据
+      fileList: [],
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false, // 是否显示编辑框
+      detailShow: false, // 是否显示编辑框
+      filename: 'device_template.xlsx',
+      wellShow: false
+    }
+  },
+  mounted() {
+    this.fetchData(false)
+  },
+  methods: {
+    // 编辑设备信息
+    print(row) {
+      this.dialogFormVisible = true
+      this.editShow = true
+      this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row.id)
+    },
+    download(row) {
+      this.$refs.editdevice.initDialog('detail', true, row.id)
+    },
+    // 获取设备数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      getRuleList().then(response => {
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    showWellDetail(row) {
+      this.wellShow = true
+      this.$refs.wellInfo.initDialog(row.wellId)
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
new file mode 100644
index 0000000..ff9f9a1
--- /dev/null
+++ b/src/views/overview/overview.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div v-loading="loading" class="overview-map-container">
+      <div id="map"/>
+    </div>
+    <!--<el-amap-info-window-->
+    <!--v-if="bridgeInfo"-->
+    <!--:position="currentWindow.position"-->
+    <!--:visible="currentWindow.visible"-->
+    <!--class="info-Window">-->
+    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
+    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
+    <!--<div class="info-body">-->
+    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
+    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
+    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
+    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
+    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
+    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
+    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</el-amap-info-window>-->
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getDetail } from '@/api/system/bridge'
+// import icon from '/static/images/well/0100.png'
+// import { getAllMarker } from '@/api/overview'
+// import { getMarkerInfo } from '@/api/marker'
+// import { lazyAMapApiLoaderInstance } from 'vue-amap'
+
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      baselayer: [],
+      url: require('../../assets/global_images/location_green.png'),
+      bridgeList: [
+        {id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450},
+        {id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659},
+        {id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659}
+      ],
+      bridgeInfo: {
+        id: '',
+        name: '',
+        typeName: '', // 桥型名称
+        bridgeCode: '', // 柱号
+        roadName: '', // 道路名称
+        height: '', // 高度
+        length: '', // 长度
+        buildTime: '', // 开建时间
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: '',
+        onlineState: ''
+      },
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      loading: false,
+      icon: 'cross',
+      map: null,
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 30,
+        center: [27.76062, 116.05071],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      map.on('click', function(e){
+        console.log(e)
+        // var marker = new L.marker(e.latlng).addTo(map);
+      })
+      var Icon = L.icon({
+        iconUrl: require('../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+
+      for (var i=0; i<3; i++) {
+        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
+          icon: Icon,
+          id: this.bridgeList[i].id
+        }).addTo(this.map)
+        item.on('click', function(e) {
+          if (e.target.dragging._marker._popup) {
+            e.target.dragging._marker.unbindPopup()
+          }
+          getDetail(e.target.options.id).then(response => {
+            var data = response.data
+            console.log(response.data)
+            var photo = data.photo?data.photo:null
+            var str = '<div style="font-size: 14px;padding: 6px"> ' +
+              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">桥梁信息</div>' +
+              '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
+              '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁简介：</label>' + data.description	+ '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥型名称：</label>' + data.typeName	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0,10) + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0,10) + '</div>' +
+              '</div>'
+            var popup = L.popup().setContent(str)
+            e.target.dragging._marker.bindPopup(popup).openPopup()
+            e.target.dragging._marker.openPopup()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #map {
+    width: 100%;
+    height: calc(100vh);
+  }
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+  .infoWindowClass{
+    background-color: pink;
+  }
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !important;
+}
+
+.el-table th{
+/*background-color: rgba(255, 229, 230, 0.8);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  // .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  // }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 78px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width:30px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/rule/components/setThresh.vue b/src/views/rule/components/setThresh.vue
new file mode 100644
index 0000000..a0ee404
--- /dev/null
+++ b/src/views/rule/components/setThresh.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body @close="cancel">
+      <el-form ref="dataForm" :rules="rules" :model="monitorForm" label-well-code="right" label-width="140px">
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="监控点名称" prop="monitorName">
+              <el-input v-model.trim="monitorForm.monitorName" disabled type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="所属场站" prop="stationName">
+              <el-input v-model="monitorForm.stationName" disabled placeholder=""/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="燃气浓度报警阈值" prop="high">
+              <el-input v-model.trim="monitorForm.high" type="number" :min="0" placeholder="燃气浓度报警阈值"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { setThresh } from '@/api/system/alarm'
+
+export default {
+  name: 'SetThresh',
+  data() {
+    const validateHigh = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
+          callback(new Error('请填写大于0的数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('消警持续时间不能为空'))
+      }
+    }
+    return {
+      listLoading: true,
+      dialogFormVisible: false, // 对话框是否显示
+      monitorForm: {
+        stationName: '',
+        monitorId: '',
+        monitorName: '',
+        high: '' // 报警阈值
+      },
+      title: '', // 表头显示标题
+      rules: {
+        high: [{ required: true, validator: validateHigh, trigger: ['change', 'blur'] }]
+      } // 前端校验规则
+    }
+  },
+  watch: { },
+  mounted() { },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, monitorInfo) {
+      debugger
+      this.dialogFormVisible = dialogFormVisible
+      this.title = '设置监控点报警阈值'
+      this.monitorForm.stationName = monitorInfo.stationName
+      this.monitorForm.monitorName = monitorInfo.monitorPointName
+      this.monitorForm.monitorId = monitorInfo.monitorPointId
+      this.monitorForm.high = monitorInfo.high
+    },
+    // 重置表单
+    resetForm() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 保存数据
+    saveData: function() {
+      // 表单校验
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          setThresh(this.monitorForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('设置成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .dialog-footer{
+    text-align: right;
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/rule/listRule.vue b/src/views/rule/listRule.vue
new file mode 100644
index 0000000..a19b9e4
--- /dev/null
+++ b/src/views/rule/listRule.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="app-container">
+    <!--查询结果Table显示-->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+        <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button v-if="column.type=='Button'" type="text" @click="showWellDetail(scope.row)">{{ scope.row[column.value] }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="print(scope.row)">打印</el-button>
+            <el-button type="text" @click="download(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        v-show="total>listQuery.limit"
+        :current-page="listQuery.offset"
+        :page-sizes="[20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRuleList } from '@/api/system/rule'
+// import DownloadTemplate from '@/components/DownloadTemplate'
+
+export default {
+  name: 'ListRule',
+  components: { },
+  data() {
+    return {
+      listQuery: {
+        keywords: '',
+        deviceType: '',
+        isOnline: '',
+        offset: 1,
+        limit: 20,
+        sort: 'id',
+        order: 'asc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '规章制度名称',
+          value: 'filename',
+          align: 'center'
+        },
+        {
+          text: '上传时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      deptTreeList: null, // 组织树列表数据
+      fileList: [],
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false, // 是否显示编辑框
+      detailShow: false, // 是否显示编辑框
+      filename: 'device_template.xlsx',
+      wellShow: false
+    }
+  },
+  mounted() {
+    this.fetchData(false)
+  },
+  methods: {
+    // 编辑设备信息
+    print(row) {
+      this.dialogFormVisible = true
+      this.editShow = true
+      this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row.id)
+    },
+    download(row) {
+      this.$refs.editdevice.initDialog('detail', true, row.id)
+    },
+    // 获取设备数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      getRuleList().then(response => {
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    showWellDetail(row) {
+      this.wellShow = true
+      this.$refs.wellInfo.initDialog(row.wellId)
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>
diff --git a/src/views/statistics/barChart.vue b/src/views/statistics/barChart.vue
new file mode 100644
index 0000000..34910e2
--- /dev/null
+++ b/src/views/statistics/barChart.vue
@@ -0,0 +1,64 @@
+<template>
+  <ve-histogram
+    :data="data"
+    :settings="chartSettings"
+    :extend="extend"/>
+</template>
+
+<script>
+export default {
+  name: 'BarChart',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          columns: ['typeName', 'count'],
+          rows: []
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      extend: {
+        series: {
+          label: { show: true, position: 'top' },
+          itemStyle: {
+            normal: {
+              barBorderRadius: [3, 3, 0, 0]
+            }
+          },
+          barMaxWidth: 35
+        }
+      },
+      chartSettings: {
+        labelMap: {
+          'inoutType': '进出类型',
+          'num': '进出数量'
+        },
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        demension: 'inoutType',
+        barWidth: 15
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
new file mode 100644
index 0000000..ff9f9a1
--- /dev/null
+++ b/src/views/overview/overview.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div v-loading="loading" class="overview-map-container">
+      <div id="map"/>
+    </div>
+    <!--<el-amap-info-window-->
+    <!--v-if="bridgeInfo"-->
+    <!--:position="currentWindow.position"-->
+    <!--:visible="currentWindow.visible"-->
+    <!--class="info-Window">-->
+    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
+    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
+    <!--<div class="info-body">-->
+    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
+    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
+    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
+    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
+    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
+    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
+    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</el-amap-info-window>-->
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getDetail } from '@/api/system/bridge'
+// import icon from '/static/images/well/0100.png'
+// import { getAllMarker } from '@/api/overview'
+// import { getMarkerInfo } from '@/api/marker'
+// import { lazyAMapApiLoaderInstance } from 'vue-amap'
+
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      baselayer: [],
+      url: require('../../assets/global_images/location_green.png'),
+      bridgeList: [
+        {id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450},
+        {id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659},
+        {id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659}
+      ],
+      bridgeInfo: {
+        id: '',
+        name: '',
+        typeName: '', // 桥型名称
+        bridgeCode: '', // 柱号
+        roadName: '', // 道路名称
+        height: '', // 高度
+        length: '', // 长度
+        buildTime: '', // 开建时间
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: '',
+        onlineState: ''
+      },
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      loading: false,
+      icon: 'cross',
+      map: null,
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 30,
+        center: [27.76062, 116.05071],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      map.on('click', function(e){
+        console.log(e)
+        // var marker = new L.marker(e.latlng).addTo(map);
+      })
+      var Icon = L.icon({
+        iconUrl: require('../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+
+      for (var i=0; i<3; i++) {
+        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
+          icon: Icon,
+          id: this.bridgeList[i].id
+        }).addTo(this.map)
+        item.on('click', function(e) {
+          if (e.target.dragging._marker._popup) {
+            e.target.dragging._marker.unbindPopup()
+          }
+          getDetail(e.target.options.id).then(response => {
+            var data = response.data
+            console.log(response.data)
+            var photo = data.photo?data.photo:null
+            var str = '<div style="font-size: 14px;padding: 6px"> ' +
+              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">桥梁信息</div>' +
+              '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
+              '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁简介：</label>' + data.description	+ '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥型名称：</label>' + data.typeName	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0,10) + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0,10) + '</div>' +
+              '</div>'
+            var popup = L.popup().setContent(str)
+            e.target.dragging._marker.bindPopup(popup).openPopup()
+            e.target.dragging._marker.openPopup()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #map {
+    width: 100%;
+    height: calc(100vh);
+  }
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+  .infoWindowClass{
+    background-color: pink;
+  }
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !important;
+}
+
+.el-table th{
+/*background-color: rgba(255, 229, 230, 0.8);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  // .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  // }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 78px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width:30px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/rule/components/setThresh.vue b/src/views/rule/components/setThresh.vue
new file mode 100644
index 0000000..a0ee404
--- /dev/null
+++ b/src/views/rule/components/setThresh.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body @close="cancel">
+      <el-form ref="dataForm" :rules="rules" :model="monitorForm" label-well-code="right" label-width="140px">
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="监控点名称" prop="monitorName">
+              <el-input v-model.trim="monitorForm.monitorName" disabled type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="所属场站" prop="stationName">
+              <el-input v-model="monitorForm.stationName" disabled placeholder=""/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="燃气浓度报警阈值" prop="high">
+              <el-input v-model.trim="monitorForm.high" type="number" :min="0" placeholder="燃气浓度报警阈值"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { setThresh } from '@/api/system/alarm'
+
+export default {
+  name: 'SetThresh',
+  data() {
+    const validateHigh = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
+          callback(new Error('请填写大于0的数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('消警持续时间不能为空'))
+      }
+    }
+    return {
+      listLoading: true,
+      dialogFormVisible: false, // 对话框是否显示
+      monitorForm: {
+        stationName: '',
+        monitorId: '',
+        monitorName: '',
+        high: '' // 报警阈值
+      },
+      title: '', // 表头显示标题
+      rules: {
+        high: [{ required: true, validator: validateHigh, trigger: ['change', 'blur'] }]
+      } // 前端校验规则
+    }
+  },
+  watch: { },
+  mounted() { },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, monitorInfo) {
+      debugger
+      this.dialogFormVisible = dialogFormVisible
+      this.title = '设置监控点报警阈值'
+      this.monitorForm.stationName = monitorInfo.stationName
+      this.monitorForm.monitorName = monitorInfo.monitorPointName
+      this.monitorForm.monitorId = monitorInfo.monitorPointId
+      this.monitorForm.high = monitorInfo.high
+    },
+    // 重置表单
+    resetForm() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 保存数据
+    saveData: function() {
+      // 表单校验
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          setThresh(this.monitorForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('设置成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .dialog-footer{
+    text-align: right;
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/rule/listRule.vue b/src/views/rule/listRule.vue
new file mode 100644
index 0000000..a19b9e4
--- /dev/null
+++ b/src/views/rule/listRule.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="app-container">
+    <!--查询结果Table显示-->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+        <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button v-if="column.type=='Button'" type="text" @click="showWellDetail(scope.row)">{{ scope.row[column.value] }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="print(scope.row)">打印</el-button>
+            <el-button type="text" @click="download(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        v-show="total>listQuery.limit"
+        :current-page="listQuery.offset"
+        :page-sizes="[20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRuleList } from '@/api/system/rule'
+// import DownloadTemplate from '@/components/DownloadTemplate'
+
+export default {
+  name: 'ListRule',
+  components: { },
+  data() {
+    return {
+      listQuery: {
+        keywords: '',
+        deviceType: '',
+        isOnline: '',
+        offset: 1,
+        limit: 20,
+        sort: 'id',
+        order: 'asc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '规章制度名称',
+          value: 'filename',
+          align: 'center'
+        },
+        {
+          text: '上传时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      deptTreeList: null, // 组织树列表数据
+      fileList: [],
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false, // 是否显示编辑框
+      detailShow: false, // 是否显示编辑框
+      filename: 'device_template.xlsx',
+      wellShow: false
+    }
+  },
+  mounted() {
+    this.fetchData(false)
+  },
+  methods: {
+    // 编辑设备信息
+    print(row) {
+      this.dialogFormVisible = true
+      this.editShow = true
+      this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row.id)
+    },
+    download(row) {
+      this.$refs.editdevice.initDialog('detail', true, row.id)
+    },
+    // 获取设备数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      getRuleList().then(response => {
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    showWellDetail(row) {
+      this.wellShow = true
+      this.$refs.wellInfo.initDialog(row.wellId)
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>
diff --git a/src/views/statistics/barChart.vue b/src/views/statistics/barChart.vue
new file mode 100644
index 0000000..34910e2
--- /dev/null
+++ b/src/views/statistics/barChart.vue
@@ -0,0 +1,64 @@
+<template>
+  <ve-histogram
+    :data="data"
+    :settings="chartSettings"
+    :extend="extend"/>
+</template>
+
+<script>
+export default {
+  name: 'BarChart',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          columns: ['typeName', 'count'],
+          rows: []
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      extend: {
+        series: {
+          label: { show: true, position: 'top' },
+          itemStyle: {
+            normal: {
+              barBorderRadius: [3, 3, 0, 0]
+            }
+          },
+          barMaxWidth: 35
+        }
+      },
+      chartSettings: {
+        labelMap: {
+          'inoutType': '进出类型',
+          'num': '进出数量'
+        },
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        demension: 'inoutType',
+        barWidth: 15
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>
diff --git a/src/views/statistics/maintainStatistics.vue b/src/views/statistics/maintainStatistics.vue
new file mode 100644
index 0000000..a86e235
--- /dev/null
+++ b/src/views/statistics/maintainStatistics.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="app-container">
+    <div class="statistic-container">
+      <el-row class="chart-tools">
+        <el-col :span="5" >
+          <el-date-picker
+            v-model="listQuery.year"
+            type="year"
+            placeholder="请选择统计年份"
+            value-format="yyyy"
+            size="small"
+            @change="fetchData"/>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24" class="chart-body" >
+          <div class="chart-body-title">各类型养护数量统计及占比</div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12" class="chart-body" >
+          <pie-chart :list="chartList"/>
+        </el-col>
+        <el-col :span="12" class="chart-body">
+          <el-table :data="list" class="table" border style="margin-top: 50px">
+            <el-table-column align="center" type="index" label="排序" width="55"/>
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">
+              <template slot-scope="scope">
+                <span>{{ scope.row[column.value] }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { countByYear } from '@/api/system/statistics'
+import { getDayTime } from '@/utils/dateutils'
+import DeptSelect from '@/components/DeptSelect/index'
+import PieChart from './pieChart'
+import BarChart from './barChart'
+
+export default {
+  name: 'MaintainStatistics',
+  components: { BarChart, PieChart, DeptSelect },
+  data() {
+    return {
+      listQuery: {
+        year: '',
+        offset: 1,
+        limit: 20,
+        sort: 'count',
+        order: 'desc'
+      },
+      columns: [
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护数量',
+          value: 'count',
+          align: 'center'
+        },
+        {
+          text: '占比',
+          value: 'percent',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      chartList: [],
+      chartshow: false
+    }
+  },
+  watch: {},
+  mounted() {
+    this.fetchData()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      console.log('this.fetchData')
+      countByYear(this.listQuery).then(response => {
+        // var data = response.data
+        // for (var i = 0; i < data.length; i++) {
+        //   data[i].num = parseInt(data[i].num)
+        // }
+        this.chartList = response.data.rows
+        this.list = response.data.rows
+      })
+    },
+    changeDate(date) {
+      let beginTime, endTime
+      if (date === 'today') {
+        beginTime = getDayTime(new Date().getTime())
+        endTime = new Date()
+        this.timeRange = [beginTime, endTime]
+      } else if (date === 'yesterday') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
+        endTime = getDayTime(new Date().getTime())
+      } else if (date === 'sevendays') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+        endTime = new Date()
+      } else if (date === 'lastmonth') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+        endTime = new Date()
+      }
+      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
+      // this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    .statistic-container{
+      background-color: #fffffb !important;
+      height: auto;
+      min-height: calc(100vh - 158px);
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 40px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-text{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        margin: auto;
+        text-align: center;
+        margin-top: 15px;
+      }
+    }
+    .chart-body{
+      padding:15px;
+      .chart-body-title {
+        font-size:22px;
+        text-align: center;
+        background-color: white;
+        padding-top: 20px;
+      }
+      .chart-body-select{
+        margin-top:20px;
+        text-align: center;
+        .select-label{
+          font-size: 15px;
+          color: #606266;
+          line-height: 40px;
+          font-weight:500;
+          padding: 0 6px 0 0
+        }
+      }
+    }
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
new file mode 100644
index 0000000..ff9f9a1
--- /dev/null
+++ b/src/views/overview/overview.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div v-loading="loading" class="overview-map-container">
+      <div id="map"/>
+    </div>
+    <!--<el-amap-info-window-->
+    <!--v-if="bridgeInfo"-->
+    <!--:position="currentWindow.position"-->
+    <!--:visible="currentWindow.visible"-->
+    <!--class="info-Window">-->
+    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
+    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
+    <!--<div class="info-body">-->
+    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
+    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
+    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
+    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
+    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
+    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
+    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</el-amap-info-window>-->
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getDetail } from '@/api/system/bridge'
+// import icon from '/static/images/well/0100.png'
+// import { getAllMarker } from '@/api/overview'
+// import { getMarkerInfo } from '@/api/marker'
+// import { lazyAMapApiLoaderInstance } from 'vue-amap'
+
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      baselayer: [],
+      url: require('../../assets/global_images/location_green.png'),
+      bridgeList: [
+        {id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450},
+        {id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659},
+        {id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659}
+      ],
+      bridgeInfo: {
+        id: '',
+        name: '',
+        typeName: '', // 桥型名称
+        bridgeCode: '', // 柱号
+        roadName: '', // 道路名称
+        height: '', // 高度
+        length: '', // 长度
+        buildTime: '', // 开建时间
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: '',
+        onlineState: ''
+      },
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      loading: false,
+      icon: 'cross',
+      map: null,
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 30,
+        center: [27.76062, 116.05071],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      map.on('click', function(e){
+        console.log(e)
+        // var marker = new L.marker(e.latlng).addTo(map);
+      })
+      var Icon = L.icon({
+        iconUrl: require('../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+
+      for (var i=0; i<3; i++) {
+        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
+          icon: Icon,
+          id: this.bridgeList[i].id
+        }).addTo(this.map)
+        item.on('click', function(e) {
+          if (e.target.dragging._marker._popup) {
+            e.target.dragging._marker.unbindPopup()
+          }
+          getDetail(e.target.options.id).then(response => {
+            var data = response.data
+            console.log(response.data)
+            var photo = data.photo?data.photo:null
+            var str = '<div style="font-size: 14px;padding: 6px"> ' +
+              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">桥梁信息</div>' +
+              '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
+              '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁简介：</label>' + data.description	+ '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥型名称：</label>' + data.typeName	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0,10) + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0,10) + '</div>' +
+              '</div>'
+            var popup = L.popup().setContent(str)
+            e.target.dragging._marker.bindPopup(popup).openPopup()
+            e.target.dragging._marker.openPopup()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #map {
+    width: 100%;
+    height: calc(100vh);
+  }
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+  .infoWindowClass{
+    background-color: pink;
+  }
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !important;
+}
+
+.el-table th{
+/*background-color: rgba(255, 229, 230, 0.8);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  // .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  // }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 78px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width:30px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/rule/components/setThresh.vue b/src/views/rule/components/setThresh.vue
new file mode 100644
index 0000000..a0ee404
--- /dev/null
+++ b/src/views/rule/components/setThresh.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body @close="cancel">
+      <el-form ref="dataForm" :rules="rules" :model="monitorForm" label-well-code="right" label-width="140px">
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="监控点名称" prop="monitorName">
+              <el-input v-model.trim="monitorForm.monitorName" disabled type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="所属场站" prop="stationName">
+              <el-input v-model="monitorForm.stationName" disabled placeholder=""/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="燃气浓度报警阈值" prop="high">
+              <el-input v-model.trim="monitorForm.high" type="number" :min="0" placeholder="燃气浓度报警阈值"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { setThresh } from '@/api/system/alarm'
+
+export default {
+  name: 'SetThresh',
+  data() {
+    const validateHigh = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
+          callback(new Error('请填写大于0的数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('消警持续时间不能为空'))
+      }
+    }
+    return {
+      listLoading: true,
+      dialogFormVisible: false, // 对话框是否显示
+      monitorForm: {
+        stationName: '',
+        monitorId: '',
+        monitorName: '',
+        high: '' // 报警阈值
+      },
+      title: '', // 表头显示标题
+      rules: {
+        high: [{ required: true, validator: validateHigh, trigger: ['change', 'blur'] }]
+      } // 前端校验规则
+    }
+  },
+  watch: { },
+  mounted() { },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, monitorInfo) {
+      debugger
+      this.dialogFormVisible = dialogFormVisible
+      this.title = '设置监控点报警阈值'
+      this.monitorForm.stationName = monitorInfo.stationName
+      this.monitorForm.monitorName = monitorInfo.monitorPointName
+      this.monitorForm.monitorId = monitorInfo.monitorPointId
+      this.monitorForm.high = monitorInfo.high
+    },
+    // 重置表单
+    resetForm() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 保存数据
+    saveData: function() {
+      // 表单校验
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          setThresh(this.monitorForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('设置成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .dialog-footer{
+    text-align: right;
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/rule/listRule.vue b/src/views/rule/listRule.vue
new file mode 100644
index 0000000..a19b9e4
--- /dev/null
+++ b/src/views/rule/listRule.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="app-container">
+    <!--查询结果Table显示-->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+        <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button v-if="column.type=='Button'" type="text" @click="showWellDetail(scope.row)">{{ scope.row[column.value] }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="print(scope.row)">打印</el-button>
+            <el-button type="text" @click="download(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        v-show="total>listQuery.limit"
+        :current-page="listQuery.offset"
+        :page-sizes="[20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRuleList } from '@/api/system/rule'
+// import DownloadTemplate from '@/components/DownloadTemplate'
+
+export default {
+  name: 'ListRule',
+  components: { },
+  data() {
+    return {
+      listQuery: {
+        keywords: '',
+        deviceType: '',
+        isOnline: '',
+        offset: 1,
+        limit: 20,
+        sort: 'id',
+        order: 'asc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '规章制度名称',
+          value: 'filename',
+          align: 'center'
+        },
+        {
+          text: '上传时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      deptTreeList: null, // 组织树列表数据
+      fileList: [],
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false, // 是否显示编辑框
+      detailShow: false, // 是否显示编辑框
+      filename: 'device_template.xlsx',
+      wellShow: false
+    }
+  },
+  mounted() {
+    this.fetchData(false)
+  },
+  methods: {
+    // 编辑设备信息
+    print(row) {
+      this.dialogFormVisible = true
+      this.editShow = true
+      this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row.id)
+    },
+    download(row) {
+      this.$refs.editdevice.initDialog('detail', true, row.id)
+    },
+    // 获取设备数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      getRuleList().then(response => {
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    showWellDetail(row) {
+      this.wellShow = true
+      this.$refs.wellInfo.initDialog(row.wellId)
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>
diff --git a/src/views/statistics/barChart.vue b/src/views/statistics/barChart.vue
new file mode 100644
index 0000000..34910e2
--- /dev/null
+++ b/src/views/statistics/barChart.vue
@@ -0,0 +1,64 @@
+<template>
+  <ve-histogram
+    :data="data"
+    :settings="chartSettings"
+    :extend="extend"/>
+</template>
+
+<script>
+export default {
+  name: 'BarChart',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          columns: ['typeName', 'count'],
+          rows: []
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      extend: {
+        series: {
+          label: { show: true, position: 'top' },
+          itemStyle: {
+            normal: {
+              barBorderRadius: [3, 3, 0, 0]
+            }
+          },
+          barMaxWidth: 35
+        }
+      },
+      chartSettings: {
+        labelMap: {
+          'inoutType': '进出类型',
+          'num': '进出数量'
+        },
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        demension: 'inoutType',
+        barWidth: 15
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>
diff --git a/src/views/statistics/maintainStatistics.vue b/src/views/statistics/maintainStatistics.vue
new file mode 100644
index 0000000..a86e235
--- /dev/null
+++ b/src/views/statistics/maintainStatistics.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="app-container">
+    <div class="statistic-container">
+      <el-row class="chart-tools">
+        <el-col :span="5" >
+          <el-date-picker
+            v-model="listQuery.year"
+            type="year"
+            placeholder="请选择统计年份"
+            value-format="yyyy"
+            size="small"
+            @change="fetchData"/>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24" class="chart-body" >
+          <div class="chart-body-title">各类型养护数量统计及占比</div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12" class="chart-body" >
+          <pie-chart :list="chartList"/>
+        </el-col>
+        <el-col :span="12" class="chart-body">
+          <el-table :data="list" class="table" border style="margin-top: 50px">
+            <el-table-column align="center" type="index" label="排序" width="55"/>
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">
+              <template slot-scope="scope">
+                <span>{{ scope.row[column.value] }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { countByYear } from '@/api/system/statistics'
+import { getDayTime } from '@/utils/dateutils'
+import DeptSelect from '@/components/DeptSelect/index'
+import PieChart from './pieChart'
+import BarChart from './barChart'
+
+export default {
+  name: 'MaintainStatistics',
+  components: { BarChart, PieChart, DeptSelect },
+  data() {
+    return {
+      listQuery: {
+        year: '',
+        offset: 1,
+        limit: 20,
+        sort: 'count',
+        order: 'desc'
+      },
+      columns: [
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护数量',
+          value: 'count',
+          align: 'center'
+        },
+        {
+          text: '占比',
+          value: 'percent',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      chartList: [],
+      chartshow: false
+    }
+  },
+  watch: {},
+  mounted() {
+    this.fetchData()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      console.log('this.fetchData')
+      countByYear(this.listQuery).then(response => {
+        // var data = response.data
+        // for (var i = 0; i < data.length; i++) {
+        //   data[i].num = parseInt(data[i].num)
+        // }
+        this.chartList = response.data.rows
+        this.list = response.data.rows
+      })
+    },
+    changeDate(date) {
+      let beginTime, endTime
+      if (date === 'today') {
+        beginTime = getDayTime(new Date().getTime())
+        endTime = new Date()
+        this.timeRange = [beginTime, endTime]
+      } else if (date === 'yesterday') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
+        endTime = getDayTime(new Date().getTime())
+      } else if (date === 'sevendays') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+        endTime = new Date()
+      } else if (date === 'lastmonth') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+        endTime = new Date()
+      }
+      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
+      // this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    .statistic-container{
+      background-color: #fffffb !important;
+      height: auto;
+      min-height: calc(100vh - 158px);
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 40px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-text{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        margin: auto;
+        text-align: center;
+        margin-top: 15px;
+      }
+    }
+    .chart-body{
+      padding:15px;
+      .chart-body-title {
+        font-size:22px;
+        text-align: center;
+        background-color: white;
+        padding-top: 20px;
+      }
+      .chart-body-select{
+        margin-top:20px;
+        text-align: center;
+        .select-label{
+          font-size: 15px;
+          color: #606266;
+          line-height: 40px;
+          font-weight:500;
+          padding: 0 6px 0 0
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/statistics/pieChart.vue b/src/views/statistics/pieChart.vue
new file mode 100644
index 0000000..d69f41a
--- /dev/null
+++ b/src/views/statistics/pieChart.vue
@@ -0,0 +1,74 @@
+<template>
+  <ve-pie :data="chartData" :legend="legend" :extend="extend" :tooltip="tooltip" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'PieChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    this.extend = {
+      // series: {
+      //   label: {
+      //     normarl: { show: true, position: 'outside' }
+      //   }
+      //   // label: { show: true, position: 'right' }
+      // }
+    }
+    this.legend = {
+      bottom: '10px',
+      show: this.baseConfig.showLegend
+    }
+    this.tooltip = {
+      show: true
+    }
+    this.chartSettings = {
+      limitShowNum: this.baseConfig.pieChartLimit,
+      label: {
+        normal: {
+          show: true
+        }
+      }
+      // labelMap: {
+      //   'deptName': '单位/部门',
+      //   'num': '记录数'
+      // },
+      // dimension: ['deptName'],
+      // metrics: ['num']
+    }
+    return {
+      chartData: {
+        columns: ['typeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    list(val) {
+      this.chartData.rows = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
new file mode 100644
index 0000000..ff9f9a1
--- /dev/null
+++ b/src/views/overview/overview.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div v-loading="loading" class="overview-map-container">
+      <div id="map"/>
+    </div>
+    <!--<el-amap-info-window-->
+    <!--v-if="bridgeInfo"-->
+    <!--:position="currentWindow.position"-->
+    <!--:visible="currentWindow.visible"-->
+    <!--class="info-Window">-->
+    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
+    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
+    <!--<div class="info-body">-->
+    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
+    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
+    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
+    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
+    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
+    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
+    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</el-amap-info-window>-->
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getDetail } from '@/api/system/bridge'
+// import icon from '/static/images/well/0100.png'
+// import { getAllMarker } from '@/api/overview'
+// import { getMarkerInfo } from '@/api/marker'
+// import { lazyAMapApiLoaderInstance } from 'vue-amap'
+
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      baselayer: [],
+      url: require('../../assets/global_images/location_green.png'),
+      bridgeList: [
+        {id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450},
+        {id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659},
+        {id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659}
+      ],
+      bridgeInfo: {
+        id: '',
+        name: '',
+        typeName: '', // 桥型名称
+        bridgeCode: '', // 柱号
+        roadName: '', // 道路名称
+        height: '', // 高度
+        length: '', // 长度
+        buildTime: '', // 开建时间
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: '',
+        onlineState: ''
+      },
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      loading: false,
+      icon: 'cross',
+      map: null,
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 30,
+        center: [27.76062, 116.05071],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      map.on('click', function(e){
+        console.log(e)
+        // var marker = new L.marker(e.latlng).addTo(map);
+      })
+      var Icon = L.icon({
+        iconUrl: require('../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+
+      for (var i=0; i<3; i++) {
+        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
+          icon: Icon,
+          id: this.bridgeList[i].id
+        }).addTo(this.map)
+        item.on('click', function(e) {
+          if (e.target.dragging._marker._popup) {
+            e.target.dragging._marker.unbindPopup()
+          }
+          getDetail(e.target.options.id).then(response => {
+            var data = response.data
+            console.log(response.data)
+            var photo = data.photo?data.photo:null
+            var str = '<div style="font-size: 14px;padding: 6px"> ' +
+              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">桥梁信息</div>' +
+              '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
+              '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁简介：</label>' + data.description	+ '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥型名称：</label>' + data.typeName	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0,10) + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0,10) + '</div>' +
+              '</div>'
+            var popup = L.popup().setContent(str)
+            e.target.dragging._marker.bindPopup(popup).openPopup()
+            e.target.dragging._marker.openPopup()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #map {
+    width: 100%;
+    height: calc(100vh);
+  }
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+  .infoWindowClass{
+    background-color: pink;
+  }
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !important;
+}
+
+.el-table th{
+/*background-color: rgba(255, 229, 230, 0.8);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  // .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  // }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 78px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width:30px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/rule/components/setThresh.vue b/src/views/rule/components/setThresh.vue
new file mode 100644
index 0000000..a0ee404
--- /dev/null
+++ b/src/views/rule/components/setThresh.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body @close="cancel">
+      <el-form ref="dataForm" :rules="rules" :model="monitorForm" label-well-code="right" label-width="140px">
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="监控点名称" prop="monitorName">
+              <el-input v-model.trim="monitorForm.monitorName" disabled type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="所属场站" prop="stationName">
+              <el-input v-model="monitorForm.stationName" disabled placeholder=""/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="燃气浓度报警阈值" prop="high">
+              <el-input v-model.trim="monitorForm.high" type="number" :min="0" placeholder="燃气浓度报警阈值"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { setThresh } from '@/api/system/alarm'
+
+export default {
+  name: 'SetThresh',
+  data() {
+    const validateHigh = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
+          callback(new Error('请填写大于0的数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('消警持续时间不能为空'))
+      }
+    }
+    return {
+      listLoading: true,
+      dialogFormVisible: false, // 对话框是否显示
+      monitorForm: {
+        stationName: '',
+        monitorId: '',
+        monitorName: '',
+        high: '' // 报警阈值
+      },
+      title: '', // 表头显示标题
+      rules: {
+        high: [{ required: true, validator: validateHigh, trigger: ['change', 'blur'] }]
+      } // 前端校验规则
+    }
+  },
+  watch: { },
+  mounted() { },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, monitorInfo) {
+      debugger
+      this.dialogFormVisible = dialogFormVisible
+      this.title = '设置监控点报警阈值'
+      this.monitorForm.stationName = monitorInfo.stationName
+      this.monitorForm.monitorName = monitorInfo.monitorPointName
+      this.monitorForm.monitorId = monitorInfo.monitorPointId
+      this.monitorForm.high = monitorInfo.high
+    },
+    // 重置表单
+    resetForm() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 保存数据
+    saveData: function() {
+      // 表单校验
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          setThresh(this.monitorForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('设置成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .dialog-footer{
+    text-align: right;
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/rule/listRule.vue b/src/views/rule/listRule.vue
new file mode 100644
index 0000000..a19b9e4
--- /dev/null
+++ b/src/views/rule/listRule.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="app-container">
+    <!--查询结果Table显示-->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+        <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button v-if="column.type=='Button'" type="text" @click="showWellDetail(scope.row)">{{ scope.row[column.value] }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="print(scope.row)">打印</el-button>
+            <el-button type="text" @click="download(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        v-show="total>listQuery.limit"
+        :current-page="listQuery.offset"
+        :page-sizes="[20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRuleList } from '@/api/system/rule'
+// import DownloadTemplate from '@/components/DownloadTemplate'
+
+export default {
+  name: 'ListRule',
+  components: { },
+  data() {
+    return {
+      listQuery: {
+        keywords: '',
+        deviceType: '',
+        isOnline: '',
+        offset: 1,
+        limit: 20,
+        sort: 'id',
+        order: 'asc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '规章制度名称',
+          value: 'filename',
+          align: 'center'
+        },
+        {
+          text: '上传时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      deptTreeList: null, // 组织树列表数据
+      fileList: [],
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false, // 是否显示编辑框
+      detailShow: false, // 是否显示编辑框
+      filename: 'device_template.xlsx',
+      wellShow: false
+    }
+  },
+  mounted() {
+    this.fetchData(false)
+  },
+  methods: {
+    // 编辑设备信息
+    print(row) {
+      this.dialogFormVisible = true
+      this.editShow = true
+      this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row.id)
+    },
+    download(row) {
+      this.$refs.editdevice.initDialog('detail', true, row.id)
+    },
+    // 获取设备数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      getRuleList().then(response => {
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    showWellDetail(row) {
+      this.wellShow = true
+      this.$refs.wellInfo.initDialog(row.wellId)
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>
diff --git a/src/views/statistics/barChart.vue b/src/views/statistics/barChart.vue
new file mode 100644
index 0000000..34910e2
--- /dev/null
+++ b/src/views/statistics/barChart.vue
@@ -0,0 +1,64 @@
+<template>
+  <ve-histogram
+    :data="data"
+    :settings="chartSettings"
+    :extend="extend"/>
+</template>
+
+<script>
+export default {
+  name: 'BarChart',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          columns: ['typeName', 'count'],
+          rows: []
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      extend: {
+        series: {
+          label: { show: true, position: 'top' },
+          itemStyle: {
+            normal: {
+              barBorderRadius: [3, 3, 0, 0]
+            }
+          },
+          barMaxWidth: 35
+        }
+      },
+      chartSettings: {
+        labelMap: {
+          'inoutType': '进出类型',
+          'num': '进出数量'
+        },
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        demension: 'inoutType',
+        barWidth: 15
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>
diff --git a/src/views/statistics/maintainStatistics.vue b/src/views/statistics/maintainStatistics.vue
new file mode 100644
index 0000000..a86e235
--- /dev/null
+++ b/src/views/statistics/maintainStatistics.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="app-container">
+    <div class="statistic-container">
+      <el-row class="chart-tools">
+        <el-col :span="5" >
+          <el-date-picker
+            v-model="listQuery.year"
+            type="year"
+            placeholder="请选择统计年份"
+            value-format="yyyy"
+            size="small"
+            @change="fetchData"/>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24" class="chart-body" >
+          <div class="chart-body-title">各类型养护数量统计及占比</div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12" class="chart-body" >
+          <pie-chart :list="chartList"/>
+        </el-col>
+        <el-col :span="12" class="chart-body">
+          <el-table :data="list" class="table" border style="margin-top: 50px">
+            <el-table-column align="center" type="index" label="排序" width="55"/>
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">
+              <template slot-scope="scope">
+                <span>{{ scope.row[column.value] }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { countByYear } from '@/api/system/statistics'
+import { getDayTime } from '@/utils/dateutils'
+import DeptSelect from '@/components/DeptSelect/index'
+import PieChart from './pieChart'
+import BarChart from './barChart'
+
+export default {
+  name: 'MaintainStatistics',
+  components: { BarChart, PieChart, DeptSelect },
+  data() {
+    return {
+      listQuery: {
+        year: '',
+        offset: 1,
+        limit: 20,
+        sort: 'count',
+        order: 'desc'
+      },
+      columns: [
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护数量',
+          value: 'count',
+          align: 'center'
+        },
+        {
+          text: '占比',
+          value: 'percent',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      chartList: [],
+      chartshow: false
+    }
+  },
+  watch: {},
+  mounted() {
+    this.fetchData()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      console.log('this.fetchData')
+      countByYear(this.listQuery).then(response => {
+        // var data = response.data
+        // for (var i = 0; i < data.length; i++) {
+        //   data[i].num = parseInt(data[i].num)
+        // }
+        this.chartList = response.data.rows
+        this.list = response.data.rows
+      })
+    },
+    changeDate(date) {
+      let beginTime, endTime
+      if (date === 'today') {
+        beginTime = getDayTime(new Date().getTime())
+        endTime = new Date()
+        this.timeRange = [beginTime, endTime]
+      } else if (date === 'yesterday') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
+        endTime = getDayTime(new Date().getTime())
+      } else if (date === 'sevendays') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+        endTime = new Date()
+      } else if (date === 'lastmonth') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+        endTime = new Date()
+      }
+      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
+      // this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    .statistic-container{
+      background-color: #fffffb !important;
+      height: auto;
+      min-height: calc(100vh - 158px);
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 40px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-text{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        margin: auto;
+        text-align: center;
+        margin-top: 15px;
+      }
+    }
+    .chart-body{
+      padding:15px;
+      .chart-body-title {
+        font-size:22px;
+        text-align: center;
+        background-color: white;
+        padding-top: 20px;
+      }
+      .chart-body-select{
+        margin-top:20px;
+        text-align: center;
+        .select-label{
+          font-size: 15px;
+          color: #606266;
+          line-height: 40px;
+          font-weight:500;
+          padding: 0 6px 0 0
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/statistics/pieChart.vue b/src/views/statistics/pieChart.vue
new file mode 100644
index 0000000..d69f41a
--- /dev/null
+++ b/src/views/statistics/pieChart.vue
@@ -0,0 +1,74 @@
+<template>
+  <ve-pie :data="chartData" :legend="legend" :extend="extend" :tooltip="tooltip" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'PieChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    this.extend = {
+      // series: {
+      //   label: {
+      //     normarl: { show: true, position: 'outside' }
+      //   }
+      //   // label: { show: true, position: 'right' }
+      // }
+    }
+    this.legend = {
+      bottom: '10px',
+      show: this.baseConfig.showLegend
+    }
+    this.tooltip = {
+      show: true
+    }
+    this.chartSettings = {
+      limitShowNum: this.baseConfig.pieChartLimit,
+      label: {
+        normal: {
+          show: true
+        }
+      }
+      // labelMap: {
+      //   'deptName': '单位/部门',
+      //   'num': '记录数'
+      // },
+      // dimension: ['deptName'],
+      // metrics: ['num']
+    }
+    return {
+      chartData: {
+        columns: ['typeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    list(val) {
+      this.chartData.rows = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>
diff --git a/src/views/statistics/statisticsChart.vue b/src/views/statistics/statisticsChart.vue
new file mode 100644
index 0000000..2c48fe0
--- /dev/null
+++ b/src/views/statistics/statisticsChart.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'StatisticsChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach((item, index) => {
+        const obj = {}
+        obj.name = item.deptName
+        obj.value = item.num
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        // tooltip: {
+        //   show: true
+        // }
+        // color: [
+        //   '#19d4ae', '#5ab1ef', '#fa6e86',
+        //   '#ffb980', '#0067a6', '#c4b4e4',
+        //   '#d87a80', '#9cbbff', '#d9d0c7',
+        //   '#87a997', '#d49ea2', '#5b4947',
+        //   '#7ba3a8'
+        // ]
+        // legend: {
+        //   orient: 'vertical',
+        //   right: 0,
+        //   data: this.pieData.map(item => item.name)
+        // }
+        // series: [{
+        //   name: '进出记录',
+        //   type: 'pie',
+        //   data: this.pieData,
+        //   label: {
+        //     show: true
+        //     // formatter: '{b}记录数:{c}条'
+        //   },
+        //   tooltip: {
+        //     // formatter: '{b}<br/>记录数: {d}%,{c}条'
+        //   }
+        // }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 60vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/src/api/system/alarm.js b/src/api/system/alarm.js
new file mode 100644
index 0000000..1c3a7ab
--- /dev/null
+++ b/src/api/system/alarm.js
@@ -0,0 +1,62 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getAlarmNowList(params) {
+  return request({
+    url: '/alarm/listNowPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getAlarmHistoryList(params) {
+  return request({
+    url: '/alarm/listHisPage',
+    method: 'get',
+    params
+  })
+}
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/bridge.js b/src/api/system/bridge.js
new file mode 100644
index 0000000..4df107b
--- /dev/null
+++ b/src/api/system/bridge.js
@@ -0,0 +1,81 @@
+/**
+ * 桥梁管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取桥梁详情
+export function getDetail(id) {
+  return request({
+    url: '/bridge/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function updateBridge(params) {
+  return request({
+    url: '/bridge/update',
+    method: 'post',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/data.js b/src/api/system/data.js
new file mode 100644
index 0000000..4c95db5
--- /dev/null
+++ b/src/api/system/data.js
@@ -0,0 +1,63 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 获取当前报警列表
+export function getHistoryList(params) {
+  return request({
+    url: '/data/hisListPage',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前报警列表
+export function getHistory(params) {
+  return request({
+    url: '/data/hisList',
+    method: 'get',
+    params
+  })
+}
+
+
+
+// 批量消警
+export function clearAll(params) {
+  return request({
+    url: '/alarm/allClear',
+    method: 'get',
+    params
+  })
+}
+
+// 消警
+export function clearAlarm(params) {
+  return request({
+    url: '/alarm/cancel',
+    method: 'get',
+    params
+  })
+}
+
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 设置报警阈值
+export function setThresh(params) {
+  return request({
+    url: '/alarm/resetAlarmRule',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/system/order.js b/src/api/system/order.js
new file mode 100644
index 0000000..7007c50
--- /dev/null
+++ b/src/api/system/order.js
@@ -0,0 +1,71 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRecordList(params) {
+  return request({
+    url: '/maintain/listPage',
+    method: 'get',
+    params
+  })
+}
+// 批量导出
+export function exportRecords(params) {
+  return request({
+    url: 'device/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      bridgeMaintenanceId: id
+    }
+  })
+}
diff --git a/src/api/system/rule.js b/src/api/system/rule.js
new file mode 100644
index 0000000..76c6b2d
--- /dev/null
+++ b/src/api/system/rule.js
@@ -0,0 +1,59 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 获取当前报警列表
+export function getRuleList() {
+  return request({
+    url: 'rule/listPage',
+    method: 'get'
+  })
+}
+export function getContentList(params) {
+  return request({
+    url: 'maintain/contentByType',
+    method: 'get',
+    params: {
+      type: params
+    }
+  })
+}
+// 批量导出报警
+export function batchExportAlarm(params) {
+  return request({
+    url: 'person/batchExport',
+    method: 'get',
+    timeout: 120000,
+    params,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 编辑
+export function editRecord(params) {
+  return request({
+    url: 'maintain/update',
+    method: 'post',
+    params
+  })
+}
+// 新增
+export function addRecord(params) {
+  return request({
+    url: 'maintain/add',
+    method: 'post',
+    params
+  })
+}
+// 删除
+export function delRecord(id) {
+  return request({
+    url: 'maintain/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/statistics.js b/src/api/system/statistics.js
new file mode 100644
index 0000000..b8f29db
--- /dev/null
+++ b/src/api/system/statistics.js
@@ -0,0 +1,15 @@
+/**
+ * 人员管理接口
+ */
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 年养护次数统计
+export function countByYear(params) {
+  return request({
+    url: 'maintain/maintainCount',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/assets/global_images/location_green.png b/src/assets/global_images/location_green.png
new file mode 100644
index 0000000..aa8be65
--- /dev/null
+++ b/src/assets/global_images/location_green.png
Binary files differ
diff --git a/src/assets/global_images/location_red.png b/src/assets/global_images/location_red.png
new file mode 100644
index 0000000..2be8c3d
--- /dev/null
+++ b/src/assets/global_images/location_red.png
Binary files differ
diff --git a/src/assets/global_images/location_yellow.png b/src/assets/global_images/location_yellow.png
new file mode 100644
index 0000000..5ab6f4d
--- /dev/null
+++ b/src/assets/global_images/location_yellow.png
Binary files differ
diff --git a/src/icons/svg/bridge.svg b/src/icons/svg/bridge.svg
new file mode 100644
index 0000000..1a0336f
--- /dev/null
+++ b/src/icons/svg/bridge.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616385022329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M987.453793 211.862069 36.581517 211.862069C16.384 211.862069 0 227.645793 0 247.172414l0 494.344828c0 19.526621 16.384 35.310345 36.581517 35.310345 20.197517 0 36.581517-15.783724 36.581517-35.310345L73.163034 282.482759l877.709241 0 0 459.034483c0 19.526621 16.384 35.310345 36.581517 35.310345C1007.616 776.827586 1024 761.043862 1024 741.517241L1024 247.172414C1024 227.645793 1007.616 211.862069 987.453793 211.862069zM512 459.034483c-181.777655 0-329.127724 142.265379-329.127724 317.793103L256 776.827586c0-136.509793 114.617379-247.172414 256-247.172414s256 110.662621 256 247.172414l73.127724 0C841.127724 601.299862 693.777655 459.034483 512 459.034483z" p-id="2176"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2d105d..c400ef4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@
 // echart
 // import echarts from 'echarts'
 // Vue.prototype.$echarts = echarts
+// 引入v-charts
+import VCharts from 'v-charts'
+Vue.use(VCharts)
 
 // 将自动注册所有组件为全局组件
 // import dataV from '@jiaminghi/data-view'
diff --git a/src/router/index.js b/src/router/index.js
index 44cba3b..48cffff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,10 @@
 
 /* Layout */
 import Layout from '@/layout/Layout'
+import { overviewRouters } from './modules/overview'
+import { orderRouters } from './modules/order'
+import { bridgeRouters } from './modules/bridge'
+import { statisticsRouters } from './modules/statistics'
 import { systemRouters } from './modules/system'
 import { exampleRouters } from './modules/example'
 
@@ -70,6 +74,10 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  ...overviewRouters,
+  ...orderRouters,
+  ...bridgeRouters,
+  ...statisticsRouters,
   ...exampleRouters,
   ...systemRouters,
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/router/modules/bridge.js b/src/router/modules/bridge.js
new file mode 100644
index 0000000..05a4748
--- /dev/null
+++ b/src/router/modules/bridge.js
@@ -0,0 +1,36 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const bridgeRouters = [
+  {
+    path: 'bridge',
+    component: Layout,
+    redirect: '/yongSheng',
+    name: 'Bridge',
+    meta: {
+      title: '桥梁管理',
+      icon: 'icon-config', // 图标
+      permission: ['/bridgeManage']// 权限名称
+    },
+    children: [
+      {
+        path: '/yongSheng',
+        name: 'YongSheng',
+        component: () => import('@/views/bridge/yongSheng'),
+        meta: { title: '永胜桥', icon: 'function', permission: ['/yongSheng'] }
+      },
+      {
+        path: '/huangZhou',
+        name: 'HuangZhou',
+        component: () => import('@/views/bridge/huangZhou'),
+        meta: { title: '黄洲桥', icon: 'function', permission: ['/huangZhou'] }
+      },
+      {
+        path: '/guangMing',
+        name: 'GuangMing',
+        component: () => import('@/views/bridge/guangMing'),
+        meta: { title: '光明桥', icon: 'function', permission: ['/guangMing'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
new file mode 100644
index 0000000..fdb43c5
--- /dev/null
+++ b/src/router/modules/order.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const orderRouters = [
+  {
+    path: 'order',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Order',
+    meta: {
+      title: '工单管理',
+      icon: 'icon-config', // 图标
+      permission: ['/order']// 权限名称
+    },
+    children: [
+      {
+        path: '/order',
+        name: 'Order',
+        component: () => import('@/views/order/listMaintainRecords'),
+        meta: { title: '养护记录', icon: 'dashboard', permission: ['/order'] }
+      }
+    ]
+  }]
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..5879990
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const overviewRouters = [
+  {
+    path: 'overviewBridge',
+    component: Layout,
+    redirect: '/overviewBridge',
+    name: 'OverviewBridge',
+    meta: {
+      title: '运行总览',
+      icon: 'icon-overview', // 图标
+      permission: ['/overviewBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/overviewBridge',
+        name: 'OverviewBridge',
+        component: () => import('@/views/overview/overview.vue'),
+        meta: { title: '运行总览', icon: 'function', permission: ['/overviewBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/rule.js b/src/router/modules/rule.js
new file mode 100644
index 0000000..50d0992
--- /dev/null
+++ b/src/router/modules/rule.js
@@ -0,0 +1,23 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const ruleRouters = [
+  {
+    path: 'rule',
+    component: Layout,
+    redirect: '/rule',
+    name: 'Rule',
+    meta: {
+      title: '规章制度',
+      icon: 'icon-config', // 图标
+      permission: ['/rule']// 权限名称
+    },
+    children: [
+      {
+        path: '/rule',
+        name: 'Rule',
+        component: () => import('@/views/rule/listRule'),
+        meta: { title: '规章制度', icon: 'function', permission: ['/rule'] }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/statistics.js b/src/router/modules/statistics.js
new file mode 100644
index 0000000..ce9315a
--- /dev/null
+++ b/src/router/modules/statistics.js
@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+
+export const statisticsRouters = [
+  {
+    path: 'statisticsBridge',
+    component: Layout,
+    redirect: '/statisticsBridge',
+    name: 'StatisticsBridge',
+    meta: {
+      title: '养护统计',
+      icon: 'icon-config', // 图标
+      permission: ['/statisticsBridge']// 权限名称
+    },
+    children: [
+      {
+        path: '/statisticsBridge',
+        name: 'StatisticsBridge',
+        component: () => import('@/views/statistics/maintainStatistics'),
+        meta: { title: '养护统计', icon: 'function', permission: ['/statisticsBridge'] }
+      }
+    ]
+  }
+]
diff --git a/src/utils/request.js b/src/utils/request.js
index c88ea76..dc56e26 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,6 +17,13 @@
       config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
       console.log(config.headers['token'])
     }
+    // 在接口增加时间戳
+    // if (config.method === 'get') {
+    config.params = {
+      _t: Date.parse(new Date()) / 1000,
+      ...config.params
+    }
+    // }
     return config
   },
   error => {
diff --git a/src/views/bridge/components/detail.vue b/src/views/bridge/components/detail.vue
new file mode 100644
index 0000000..96cf9f8
--- /dev/null
+++ b/src/views/bridge/components/detail.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="info-block">
+    <div class="block-body">
+      <el-row class="body-right">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥梁名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.name }}</span>
+              <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">桥型：</span>
+              <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">柱号：</span>
+              <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">道路名称：</span>
+              <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+              <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">高度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.height }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">长度（m）：</span>
+              <span class="item-value-middle">{{ bridgeForm.length }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">开建时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.buildTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">通车时间：</span>
+              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
+              <span v-show="photo===''" class="item-value-middle">无</span>
+              <el-image
+                v-if="photo!==''"
+                :src="photo!==''?photo:null"
+                fit="cover"
+                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
+              <el-upload
+                ref="upload"
+                :before-upload="handleBeforeUpload"
+                :http-request="uploadPhoto"
+                :show-file-list="false"
+                style="display: inline-block;vertical-align: top;"
+                action="string"
+                accept=".jpg,.jpeg,.png">
+                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
+              </el-upload>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="item-div">
+              <span class="item-title">桥梁位置：</span>
+              <span class="item-value-middle">{{ bridgeForm.position }}</span>
+              <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+              <div v-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
+              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
+              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
+          <el-button type="primary" @click="saveData">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-row>
+      </el-row>
+    </div>
+    <div class="clearfloat"/>
+  </div>
+</template>
+<script>
+import { getDetail, updateBridge } from '@/api/system/bridge'
+import L from 'leaflet'
+
+export default {
+  name: 'Detail',
+  data() {
+    return {
+      showMap: false,
+      isEditMode: false,
+      bridgeList: [
+        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
+        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
+        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
+      ],
+      map: null,
+      baselayer: [],
+      icon: 'static/images/well/0100.png',
+      photo: '',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    fetchData(bridgeId) {
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+        this.photo = this.bridgeForm.photo
+        this.listLoading = false
+      })
+    },
+    checkMap() {
+      this.initMap()
+      this.initMap()
+    },
+    initMap() {
+      debugger
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [27.763248, 116.043450],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.invalidateSize(true)
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      var Icon = L.icon({
+        iconUrl: require('../../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+      if (this.bridgeForm.name === '永胜桥') {
+        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
+        L.marker([27.763248, 116.043450], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '黄洲桥') {
+        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
+        L.marker([27.760096, 116.053659], {
+          icon: Icon
+        }).addTo(this.map)
+      } else if (this.bridgeForm.name === '光明桥') {
+        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
+        L.marker([27.767046, 116.058659], {
+          icon: Icon
+        }).addTo(this.map)
+      }
+    },
+    showUploadBut() {
+      this.isEditMode = true
+    },
+    saveData() {
+      // 照片不为空则对照片进行处理
+      if (this.photo !== '') {
+        let index = this.photo.indexOf('/static/')
+        if (index !== -1) {
+          index += 8
+        }
+        this.bridgeForm.photo = this.photo.substring(index)
+      }
+      updateBridge(this.bridgeForm).then(res => {
+        if (res.code === 200) {
+          this.$message.success('编辑成功')
+        }
+      })
+      this.isEditMode = false
+    },
+    // 图片上传
+    uploadPhoto(file) {
+      // console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        console.log(this.photo)
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    // 上传成功后回显
+    handleSuccess(response, file) {
+      console.log('handleSuccess')
+      debugger
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.photo = base_url + response.data
+      } else {
+        this.$message.warning(response.message)
+      }
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    cancel() {
+      this.isEditMode = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    /*overflow-y: scroll;*/
+    /*white-space: nowrap;*/
+    margin: 10px 20px;
+    padding-bottom: 120px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        margin-bottom: 10px;
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      background-color: #fffffb !important;
+      margin-top: 20px;
+      margin-left: 50px;
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 160px );
+        float: left;
+        .item-div{
+          line-height: 55px;
+          font-size:17px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            display: inline-block;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            display: inline-block;
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 680px !important;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 5px;
+    .map-demo{
+      width: 100%;
+      height: calc(100vh - 78px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width:30px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+      .info-window{
+        max-width: 250px;
+        /*background-color: lightcyan;*/
+        .info-header{
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          font-weight: bold;
+          /*background-color: #eaf4ff;*/
+        }
+        .info-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+        }
+      }
+      .alarm-window{
+        max-width: 250px;
+        /*background-color: #ffeaf1;*/
+        .alarm-header {
+          padding: 10px 10px 5px 10px;
+          line-height: 30px;
+          color: red;
+          font-weight: bold;
+          /*background-color: #ffecec;*/
+        }
+        .alarm-body{
+          padding: 5px 10px 10px 10px;
+          line-height: 23px;
+          font-size: 14px;
+          .alarm-red{
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/bridge/components/editBridge.vue b/src/views/bridge/components/editBridge.vue
new file mode 100644
index 0000000..6182fee
--- /dev/null
+++ b/src/views/bridge/components/editBridge.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
+    <div class="info-block">
+      <div class="block-body">
+        <div class="body-right">
+          <el-row>
+            <el-col :span="24">
+              <div class="item-div">
+                <span class="item-title">桥梁名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.name }}</span>
+                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">桥型：</span>
+                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-div">
+                <span class="item-title">柱号：</span>
+                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">道路名称：</span>
+                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
+                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">高度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.height }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">长度（m）：</span>
+                <span class="item-value-middle">{{ bridgeForm.length }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">开建时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="item-div">
+                <span class="item-title">通车时间：</span>
+                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁照片：</span>
+                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
+                <el-image
+                  v-show="bridgeForm.photo!==''"
+                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
+                  fit="cover"
+                  style="width: 130px; height: 175px"/></div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <div class="item-div">
+                <span class="item-title">桥梁位置：</span>
+                <span class="item-value-middle">{{ bridgeForm.position }}</span>
+                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
+                <div v-show="showMap" class="overview-map-container">
+                  <div id="map"/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18">
+              <div class="item-div">
+                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
+                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!--<div class="clearfloat"/>-->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDetail } from '@/api/system/bridge'
+import * as L from 'leaflet'
+
+export default {
+  name: 'EditBridge',
+  data() {
+    return {
+      dialogFormVisible: false,
+      showMap: false,
+      map: null,
+      icon: 'static/images/well/0100.png',
+      bridgeForm: {
+        id: '',
+        name: '',
+        type: '',
+        typeName: '',
+        bridgeCode: '',
+        roadName: '',
+        height: '',
+        length: '',
+        buildTime: '',
+        openTime: '',
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: ''
+      },
+      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
+      // token: '?token=' + this.$store.getters.token, // token,
+      disabled: true,
+      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initDialog: function(dialogFormVisible, bridgeId = '') {
+      this.dialogFormVisible = dialogFormVisible
+      getDetail(bridgeId).then(response => {
+        this.bridgeForm = response.data
+      })
+    },
+    checkMap() {
+      this.showMap = true
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 14,
+        center: [39.550339, 116.114129],
+        zoom: 12,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      L.tileLayer(
+        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
+      ).addTo(map)
+      L.marker([39.550339, 116.114129], {
+        // icon: greenIcon,
+        title: '桥梁信息'
+      }).addTo(map)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $left-width: 160px;
+  .info-block{
+    margin-left: 40px;
+    padding-bottom: 20px;
+    /*overflow: ;*/
+    .block-title-div{
+      font-size: 17px;
+      color: #1f2d3d;
+      font-weight: bold;
+      /*border-bottom: 1px solid #d3dce6;*/
+      .block-title{
+        padding-left: 10px;
+        /*margin-bottom: 10px;*/
+        /*border-left: 5px solid #004493;*/
+      }
+    }
+    .block-body{
+      /*margin-top: 20px;*/
+      /*margin-left: 50px;*/
+      .body-left{
+        width: $left-width;
+        /*float: left;*/
+      }
+      .body-right{
+        width: calc( 100% - 80px );
+        /*float: left;*/
+        .item-div{
+          line-height: 40px;
+          font-size:14px;
+          .item-title{
+            text-align: right;
+            width:120px;
+            color: #909090;
+            font-weight: bold;
+            float:left;
+          }
+          .item-value-middle{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 280px !important;
+            /*float:left;*/
+          }
+          .item-value-long{
+            margin-left: 10px;
+            color: #a5a5a5;
+            width: 790px !important;
+            /*float:left;*/
+          }
+        }
+      }
+    }
+    .person-photo{
+      width: 106px;
+      height: 150px;
+      padding: 1px;
+      border: 1px solid #92dfff;
+    }
+
+  }
+</style>
diff --git a/src/views/bridge/guangMing.vue b/src/views/bridge/guangMing.vue
new file mode 100644
index 0000000..2a50ac4
--- /dev/null
+++ b/src/views/bridge/guangMing.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('3')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/huangzhou.vue b/src/views/bridge/huangzhou.vue
new file mode 100644
index 0000000..311b07b
--- /dev/null
+++ b/src/views/bridge/huangzhou.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <div>
+      <detail ref="detail" @watchChild="fetchData"/>
+    </div>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('2')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/bridge/yongSheng.vue b/src/views/bridge/yongSheng.vue
new file mode 100644
index 0000000..b986dbb
--- /dev/null
+++ b/src/views/bridge/yongSheng.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container-bridge">
+    <el-button type="primary" style="float:right; margin-right: 260px; margin-top: 10px" icon="el-icon-edit" @click="edit">编辑</el-button>
+    <detail ref="detail" @watchChild="fetchData"/>
+    <edit-bridge v-show="editShow" ref="editbridge" @watchChild="fetchData"/>
+  </div>
+</template>
+<script>
+import detail from '@/views/bridge/components/detail'
+import editBridge from '@/views/bridge/components/editBridge'
+export default {
+  name: 'YongSheng',
+  components: { detail, editBridge },
+  data() {
+    return {
+      editShow: false
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$refs.detail.fetchData('1')
+    },
+    edit() {
+      this.$refs.detail.showUploadBut()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container-bridge{
+    background-color: #fffffb !important;
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - 158px);
+    overflow: auto;
+    margin-bottom: 120px;
+    padding-bottom: 20px;
+    margin-top: 0;
+  }
+</style>
diff --git a/src/views/order/editOrder.vue b/src/views/order/editOrder.vue
new file mode 100644
index 0000000..f5e5fd7
--- /dev/null
+++ b/src/views/order/editOrder.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width: 1800px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="orderForm" size="small" label-position="right" label-width="130px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护编号" prop="code">
+            <el-input v-model.trim="orderForm.code" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护名称" prop="name">
+            <el-input v-model.trim="orderForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属类别" prop="category">
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="2">桥梁养护</el-radio>
+            <el-radio v-model="orderForm.category" :disabled="isDetailMode" label="1">道路养护</el-radio>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="orderForm.category === '2'" label="所属桥梁" prop="bridgeId">
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="1">永胜桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="2">黄洲桥</el-radio>
+            <el-radio v-model="orderForm.bridgeId" :disabled="isDetailMode" label="3">光明桥</el-radio>
+          </el-form-item>
+          <el-form-item v-if="orderForm.category === '1'" label="所属道路" prop="roadId">
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="1">备选项</el-radio>
+            <el-radio v-model="orderForm.roadId" :disabled="isDetailMode" label="2">备选项</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="养护类型" prop="type">
+            <el-select v-model="orderForm.type" :disabled="isDetailMode" placeholder="请选择" @change="selectType">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护状态" prop="status">
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="1">未启动</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="2">进行中</el-radio>
+            <el-radio v-model="orderForm.status" :disabled="isDetailMode" label="3">已完成</el-radio>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="责任人" prop="personId">
+            <el-select v-model="orderForm.personId" :disabled="isDetailMode" placeholder="请选择">
+              <el-option
+                v-for="item in personList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="养护日期" prop="maintainTimeStr">
+            <el-input v-model.trim="orderForm.maintainTimeStr" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司" prop="tenderCompany">
+            <el-input v-model.trim="orderForm.tenderCompany" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="承建公司责任人" prop="tender">
+            <el-input v-model.trim="orderForm.tender" :disabled="isDetailMode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="承建公司联系电话" prop="phone">
+            <el-input v-model.trim="orderForm.phone" :disabled="isDetailMode" maxlength="11" type="text" placeholder="必填" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="养护内容" prop="content">
+            <el-input v-model.trim="orderForm.content" aria-multiline="true" disabled type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="description">
+            <el-input v-model.trim="orderForm.description" :disabled="isDetailMode" aria-multiline="true" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="!isDetailMode" type="primary" @click="saveData">保存</el-button>
+      <el-button v-show="!isDetailMode" @click="cancel">取消</el-button>
+      <el-button v-show="isDetailMode" @click="cancel">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRecord, editRecord, getContentList } from '@/api/system/order'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import DeptSelect from '@/components/DeptSelect'
+
+export default {
+  name: 'EditOrder',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      isDetailMode: false,
+      orderForm: {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTimeStr: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }, // 表单
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      personList: [],
+      contentList: [],
+      multiData: false, // 组织树是否为多级列表
+      deptTreeList: [], // 组织树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        code: [{ required: true, message: '养护编号不能为空', trigger: ['blur', 'change'] }],
+        category: [{ required: true, message: '所属类别必选', trigger: ['blur', 'change'] }],
+        type: [{ required: true, message: '养护类型必选', trigger: ['blur', 'change'] }],
+        name: [{ required: true, message: '养护名称不能为空' }],
+        status: [{ required: true, message: '养护状态必选', trigger: ['blur', 'change'] }],
+        bridgeId: [{ required: true, message: '所属桥梁必选', trigger: ['blur', 'change'] }],
+        roadId: [{ required: true, message: '所属道路必选', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '责任人必选', trigger: ['blur', 'change'] }],
+        maintainTimeStr: [{ required: true, message: '养护日期必选', trigger: ['blur', 'change'] }],
+        content: [{ required: true, message: '养护内容必选', trigger: ['blur', 'change'] }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+  },
+  mounted: function() {
+    // this.fetchPcode()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.isDetailMode = false
+      if (row !== null) { // 将row中数据填写到输入框中
+        this.orderForm = {
+          id: row.id,
+          code: row.code,
+          category: row.maintainType,
+          type: row.type,
+          name: row.name,
+          status: row.status,
+          bridgeId: row.bridgeId,
+          roadId: row.roadId,
+          personId: row.personId,
+          maintainTime: row.maintainTime,
+          content: row.content,
+          tenderCompany: row.tenderCompany,
+          tender: row.tender,
+          phone: row.phone,
+          description: row.description
+        }
+      }
+      if (dialogStatus === 'detail') {
+        this.isDetailMode = true
+      }
+      this.selectType()
+      debugger
+    },
+    selectType() {
+      getContentList(this.orderForm.type).then(response => {
+        this.orderForm.content = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.orderForm = {
+        id: '',
+        code: '',
+        category: '',
+        type: '',
+        name: '',
+        status: '',
+        bridgeId: '',
+        roadId: '',
+        personId: '',
+        maintainTime: '',
+        content: '',
+        tenderCompany: '',
+        tender: '',
+        phone: '',
+        description: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.orderForm)
+        if (valid) {
+          addRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editRecord(this.orderForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.isDetailMode = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/order/listMaintainRecords.vue b/src/views/order/listMaintainRecords.vue
new file mode 100644
index 0000000..db090b4
--- /dev/null
+++ b/src/views/order/listMaintainRecords.vue
@@ -0,0 +1,327 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="责任人/养护名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.type" placeholder="养护类型" size="small" clearable>
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="养护状态" size="small" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.bridgeId" placeholder="所属桥梁" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roadId" placeholder="所属道路" size="small" clearable>
+          <el-option
+            v-for="item in bridgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出记录</el-button>
+        <el-button size="small" class="edit_btn" @click="add">添加</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
+          <template slot-scope="scope">
+            <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
+            <span v-else-if="column.text == '开始养护日期'">{{ scope.row[column.value].substr(0,10) }}</span>
+            <span v-else>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-order v-show="editShow" ref="editorder" @watchChild="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import { getRecordList, delRecord } from '@/api/system/order'
+import editOrder from '@/views/order/editOrder'
+
+export default {
+  name: 'ListMaintainRecords',
+  components: { editOrder },
+  data() {
+    return {
+      listQuery: {
+        keyword: '', // 关键字（责任人/养护名称）
+        type: '', // 养护类型，字典值
+        status: '', // 养护状态，字典值
+        bridgeId: '', // 所属桥梁id
+        roadId: '',
+        startDate: '', // 养护开始日期
+        endDate: '', // 养护结束日期
+        offset: 1,
+        limit: 20,
+        sort: 'maintainTime',
+        order: 'desc'
+      }, // 筛选条件
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      timeRange: [],
+      columns: [
+        {
+          text: '养护名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '养护编号',
+          value: 'code',
+          align: 'center'
+        },
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护状态',
+          value: 'statusName',
+          align: 'center'
+        },
+        {
+          text: '所属桥梁/道路',
+          value: 'bridgeName',
+          align: 'center'
+        },
+        {
+          text: '责任人',
+          value: 'personName',
+          align: 'center'
+        },
+        {
+          text: '开始养护日期',
+          value: 'maintainTime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      typeList: [
+        { value: '0', name: '日常养护' },
+        { value: '1', name: '小修保养工程' },
+        { value: '2', name: '中修工程' },
+        { value: '3', name: '大修工程' },
+        { value: '4', name: '改建工程' },
+        { value: '5', name: '专项工程' }
+      ],
+      statusList: [
+        { value: '1', name: '未启动' },
+        { value: '2', name: '进行中' },
+        { value: '3', name: '已结束' }
+      ],
+      bridgeList: [
+        { id: '1', name: '永胜桥' },
+        { id: '2', name: '黄洲桥' },
+        { id: '3', name: '光明桥' }
+      ],
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false // 是否显示编辑框
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.beginTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取列表
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getRecordList(this.listQuery).then(response => {
+        debugger
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    add() {
+      this.editShow = true
+      this.$refs.editorder.initDialog('create', true, null)
+    },
+    detail(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('detail', true, row)
+    },
+    edit(row) {
+      this.editShow = true
+      this.$refs.editorder.initDialog('update', true, row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定删除该养护记录？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delRecord(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '下载中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // exportRecords(this.listQuery).then(res => {
+      //   loading.close() // 关闭加载动画
+      //   downloadFile(res.data, '工单列表')
+      // }).catch((res) => {
+      //   loading.close()
+      // })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.$message.success('clearInput')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .el-table th.gutter{
+    display: table-cell !important;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .form-container {
+    .selectForm-container-item {
+      width: 220px;
+    }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
new file mode 100644
index 0000000..ff9f9a1
--- /dev/null
+++ b/src/views/overview/overview.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div v-loading="loading" class="overview-map-container">
+      <div id="map"/>
+    </div>
+    <!--<el-amap-info-window-->
+    <!--v-if="bridgeInfo"-->
+    <!--:position="currentWindow.position"-->
+    <!--:visible="currentWindow.visible"-->
+    <!--class="info-Window">-->
+    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
+    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
+    <!--<div class="info-body">-->
+    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
+    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
+    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
+    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
+    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
+    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
+    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
+    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
+    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</el-amap-info-window>-->
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getDetail } from '@/api/system/bridge'
+// import icon from '/static/images/well/0100.png'
+// import { getAllMarker } from '@/api/overview'
+// import { getMarkerInfo } from '@/api/marker'
+// import { lazyAMapApiLoaderInstance } from 'vue-amap'
+
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      baselayer: [],
+      url: require('../../assets/global_images/location_green.png'),
+      bridgeList: [
+        {id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450},
+        {id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659},
+        {id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659}
+      ],
+      bridgeInfo: {
+        id: '',
+        name: '',
+        typeName: '', // 桥型名称
+        bridgeCode: '', // 柱号
+        roadName: '', // 道路名称
+        height: '', // 高度
+        length: '', // 长度
+        buildTime: '', // 开建时间
+        position: '',
+        description: '',
+        status: '',
+        statusName: '',
+        photo: '',
+        onlineState: ''
+      },
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      loading: false,
+      icon: 'cross',
+      map: null,
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 2,
+        maxZoom: 30,
+        center: [27.76062, 116.05071],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      map.on('click', function(e){
+        console.log(e)
+        // var marker = new L.marker(e.latlng).addTo(map);
+      })
+      var Icon = L.icon({
+        iconUrl: require('../../assets/global_images/location_green.png'),
+        iconSize: [30, 30]
+      })
+
+      for (var i=0; i<3; i++) {
+        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
+          icon: Icon,
+          id: this.bridgeList[i].id
+        }).addTo(this.map)
+        item.on('click', function(e) {
+          if (e.target.dragging._marker._popup) {
+            e.target.dragging._marker.unbindPopup()
+          }
+          getDetail(e.target.options.id).then(response => {
+            var data = response.data
+            console.log(response.data)
+            var photo = data.photo?data.photo:null
+            var str = '<div style="font-size: 14px;padding: 6px"> ' +
+              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">桥梁信息</div>' +
+              '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
+              '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁简介：</label>' + data.description	+ '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">桥型名称：</label>' + data.typeName	 + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0,10) + '</div>' +
+              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0,10) + '</div>' +
+              '</div>'
+            var popup = L.popup().setContent(str)
+            e.target.dragging._marker.bindPopup(popup).openPopup()
+            e.target.dragging._marker.openPopup()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #map {
+    width: 100%;
+    height: calc(100vh);
+  }
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+  .infoWindowClass{
+    background-color: pink;
+  }
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !important;
+}
+
+.el-table th{
+/*background-color: rgba(255, 229, 230, 0.8);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  // .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  // }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 78px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width:30px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/rule/components/setThresh.vue b/src/views/rule/components/setThresh.vue
new file mode 100644
index 0000000..a0ee404
--- /dev/null
+++ b/src/views/rule/components/setThresh.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body @close="cancel">
+      <el-form ref="dataForm" :rules="rules" :model="monitorForm" label-well-code="right" label-width="140px">
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="监控点名称" prop="monitorName">
+              <el-input v-model.trim="monitorForm.monitorName" disabled type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="所属场站" prop="stationName">
+              <el-input v-model="monitorForm.stationName" disabled placeholder=""/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="燃气浓度报警阈值" prop="high">
+              <el-input v-model.trim="monitorForm.high" type="number" :min="0" placeholder="燃气浓度报警阈值"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { setThresh } from '@/api/system/alarm'
+
+export default {
+  name: 'SetThresh',
+  data() {
+    const validateHigh = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
+          callback(new Error('请填写大于0的数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('消警持续时间不能为空'))
+      }
+    }
+    return {
+      listLoading: true,
+      dialogFormVisible: false, // 对话框是否显示
+      monitorForm: {
+        stationName: '',
+        monitorId: '',
+        monitorName: '',
+        high: '' // 报警阈值
+      },
+      title: '', // 表头显示标题
+      rules: {
+        high: [{ required: true, validator: validateHigh, trigger: ['change', 'blur'] }]
+      } // 前端校验规则
+    }
+  },
+  watch: { },
+  mounted() { },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, monitorInfo) {
+      debugger
+      this.dialogFormVisible = dialogFormVisible
+      this.title = '设置监控点报警阈值'
+      this.monitorForm.stationName = monitorInfo.stationName
+      this.monitorForm.monitorName = monitorInfo.monitorPointName
+      this.monitorForm.monitorId = monitorInfo.monitorPointId
+      this.monitorForm.high = monitorInfo.high
+    },
+    // 重置表单
+    resetForm() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 保存数据
+    saveData: function() {
+      // 表单校验
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          setThresh(this.monitorForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('设置成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .dialog-footer{
+    text-align: right;
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/rule/listRule.vue b/src/views/rule/listRule.vue
new file mode 100644
index 0000000..a19b9e4
--- /dev/null
+++ b/src/views/rule/listRule.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="app-container">
+    <!--查询结果Table显示-->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+        <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button v-if="column.type=='Button'" type="text" @click="showWellDetail(scope.row)">{{ scope.row[column.value] }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="print(scope.row)">打印</el-button>
+            <el-button type="text" @click="download(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        v-show="total>listQuery.limit"
+        :current-page="listQuery.offset"
+        :page-sizes="[20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRuleList } from '@/api/system/rule'
+// import DownloadTemplate from '@/components/DownloadTemplate'
+
+export default {
+  name: 'ListRule',
+  components: { },
+  data() {
+    return {
+      listQuery: {
+        keywords: '',
+        deviceType: '',
+        isOnline: '',
+        offset: 1,
+        limit: 20,
+        sort: 'id',
+        order: 'asc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '规章制度名称',
+          value: 'filename',
+          align: 'center'
+        },
+        {
+          text: '上传时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      deptTreeList: null, // 组织树列表数据
+      fileList: [],
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      editShow: false, // 是否显示编辑框
+      detailShow: false, // 是否显示编辑框
+      filename: 'device_template.xlsx',
+      wellShow: false
+    }
+  },
+  mounted() {
+    this.fetchData(false)
+  },
+  methods: {
+    // 编辑设备信息
+    print(row) {
+      this.dialogFormVisible = true
+      this.editShow = true
+      this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row.id)
+    },
+    download(row) {
+      this.$refs.editdevice.initDialog('detail', true, row.id)
+    },
+    // 获取设备数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      getRuleList().then(response => {
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    showWellDetail(row) {
+      this.wellShow = true
+      this.$refs.wellInfo.initDialog(row.wellId)
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>
diff --git a/src/views/statistics/barChart.vue b/src/views/statistics/barChart.vue
new file mode 100644
index 0000000..34910e2
--- /dev/null
+++ b/src/views/statistics/barChart.vue
@@ -0,0 +1,64 @@
+<template>
+  <ve-histogram
+    :data="data"
+    :settings="chartSettings"
+    :extend="extend"/>
+</template>
+
+<script>
+export default {
+  name: 'BarChart',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          columns: ['typeName', 'count'],
+          rows: []
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      extend: {
+        series: {
+          label: { show: true, position: 'top' },
+          itemStyle: {
+            normal: {
+              barBorderRadius: [3, 3, 0, 0]
+            }
+          },
+          barMaxWidth: 35
+        }
+      },
+      chartSettings: {
+        labelMap: {
+          'inoutType': '进出类型',
+          'num': '进出数量'
+        },
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        demension: 'inoutType',
+        barWidth: 15
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>
diff --git a/src/views/statistics/maintainStatistics.vue b/src/views/statistics/maintainStatistics.vue
new file mode 100644
index 0000000..a86e235
--- /dev/null
+++ b/src/views/statistics/maintainStatistics.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="app-container">
+    <div class="statistic-container">
+      <el-row class="chart-tools">
+        <el-col :span="5" >
+          <el-date-picker
+            v-model="listQuery.year"
+            type="year"
+            placeholder="请选择统计年份"
+            value-format="yyyy"
+            size="small"
+            @change="fetchData"/>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24" class="chart-body" >
+          <div class="chart-body-title">各类型养护数量统计及占比</div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12" class="chart-body" >
+          <pie-chart :list="chartList"/>
+        </el-col>
+        <el-col :span="12" class="chart-body">
+          <el-table :data="list" class="table" border style="margin-top: 50px">
+            <el-table-column align="center" type="index" label="排序" width="55"/>
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">
+              <template slot-scope="scope">
+                <span>{{ scope.row[column.value] }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { countByYear } from '@/api/system/statistics'
+import { getDayTime } from '@/utils/dateutils'
+import DeptSelect from '@/components/DeptSelect/index'
+import PieChart from './pieChart'
+import BarChart from './barChart'
+
+export default {
+  name: 'MaintainStatistics',
+  components: { BarChart, PieChart, DeptSelect },
+  data() {
+    return {
+      listQuery: {
+        year: '',
+        offset: 1,
+        limit: 20,
+        sort: 'count',
+        order: 'desc'
+      },
+      columns: [
+        {
+          text: '养护类型',
+          value: 'typeName',
+          align: 'center'
+        },
+        {
+          text: '养护数量',
+          value: 'count',
+          align: 'center'
+        },
+        {
+          text: '占比',
+          value: 'percent',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      chartList: [],
+      chartshow: false
+    }
+  },
+  watch: {},
+  mounted() {
+    this.fetchData()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      console.log('this.fetchData')
+      countByYear(this.listQuery).then(response => {
+        // var data = response.data
+        // for (var i = 0; i < data.length; i++) {
+        //   data[i].num = parseInt(data[i].num)
+        // }
+        this.chartList = response.data.rows
+        this.list = response.data.rows
+      })
+    },
+    changeDate(date) {
+      let beginTime, endTime
+      if (date === 'today') {
+        beginTime = getDayTime(new Date().getTime())
+        endTime = new Date()
+        this.timeRange = [beginTime, endTime]
+      } else if (date === 'yesterday') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
+        endTime = getDayTime(new Date().getTime())
+      } else if (date === 'sevendays') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+        endTime = new Date()
+      } else if (date === 'lastmonth') {
+        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+        endTime = new Date()
+      }
+      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
+      // this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    .statistic-container{
+      background-color: #fffffb !important;
+      height: auto;
+      min-height: calc(100vh - 158px);
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 40px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-text{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        margin: auto;
+        text-align: center;
+        margin-top: 15px;
+      }
+    }
+    .chart-body{
+      padding:15px;
+      .chart-body-title {
+        font-size:22px;
+        text-align: center;
+        background-color: white;
+        padding-top: 20px;
+      }
+      .chart-body-select{
+        margin-top:20px;
+        text-align: center;
+        .select-label{
+          font-size: 15px;
+          color: #606266;
+          line-height: 40px;
+          font-weight:500;
+          padding: 0 6px 0 0
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/statistics/pieChart.vue b/src/views/statistics/pieChart.vue
new file mode 100644
index 0000000..d69f41a
--- /dev/null
+++ b/src/views/statistics/pieChart.vue
@@ -0,0 +1,74 @@
+<template>
+  <ve-pie :data="chartData" :legend="legend" :extend="extend" :tooltip="tooltip" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'PieChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    this.extend = {
+      // series: {
+      //   label: {
+      //     normarl: { show: true, position: 'outside' }
+      //   }
+      //   // label: { show: true, position: 'right' }
+      // }
+    }
+    this.legend = {
+      bottom: '10px',
+      show: this.baseConfig.showLegend
+    }
+    this.tooltip = {
+      show: true
+    }
+    this.chartSettings = {
+      limitShowNum: this.baseConfig.pieChartLimit,
+      label: {
+        normal: {
+          show: true
+        }
+      }
+      // labelMap: {
+      //   'deptName': '单位/部门',
+      //   'num': '记录数'
+      // },
+      // dimension: ['deptName'],
+      // metrics: ['num']
+    }
+    return {
+      chartData: {
+        columns: ['typeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    list(val) {
+      this.chartData.rows = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>
diff --git a/src/views/statistics/statisticsChart.vue b/src/views/statistics/statisticsChart.vue
new file mode 100644
index 0000000..2c48fe0
--- /dev/null
+++ b/src/views/statistics/statisticsChart.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'StatisticsChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach((item, index) => {
+        const obj = {}
+        obj.name = item.deptName
+        obj.value = item.num
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        // tooltip: {
+        //   show: true
+        // }
+        // color: [
+        //   '#19d4ae', '#5ab1ef', '#fa6e86',
+        //   '#ffb980', '#0067a6', '#c4b4e4',
+        //   '#d87a80', '#9cbbff', '#d9d0c7',
+        //   '#87a997', '#d49ea2', '#5b4947',
+        //   '#7ba3a8'
+        // ]
+        // legend: {
+        //   orient: 'vertical',
+        //   right: 0,
+        //   data: this.pieData.map(item => item.name)
+        // }
+        // series: [{
+        //   name: '进出记录',
+        //   type: 'pie',
+        //   data: this.pieData,
+        //   label: {
+        //     show: true
+        //     // formatter: '{b}记录数:{c}条'
+        //   },
+        //   tooltip: {
+        //     // formatter: '{b}<br/>记录数: {d}%,{c}条'
+        //   }
+        // }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 60vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/static/project.config.json b/static/project.config.json
index cb1eb78..8fddbd3 100644
--- a/static/project.config.json
+++ b/static/project.config.json
@@ -1,11 +1,11 @@
 {
-  "title": "基础资源系统",
-  "baseUrl": "http://111.198.10.15:11409/",
+  "title": "路桥养护子系统",
+  "baseUrl": "http://111.198.10.15:11413/bridge/",
   "mainPage": "http://111.198.10.15:11404/dcms/",
   "singleSys": true,
   "city":"崇仁县",
   "mapUrl":"https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8",
   "labelUrl":"https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8",
   "center":[27.75962, 116.06021],
-  "zoom":13
+  "zoom":15
 }