diff --git a/package-lock.json b/package-lock.json
index eab9a6fa..cf49f747 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2423,8 +2423,9 @@
     },
     "async-validator": {
       "version": "1.8.5",
-      "resolved": "http://r.cnpmjs.org/async-validator/download/async-validator-1.8.5.tgz",
-      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "dev": true,
       "requires": {
         "babel-runtime": "6.x"
       }
@@ -2649,7 +2650,8 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "http://r.cnpmjs.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=",
+      "dev": true
     },
     "babel-loader": {
       "version": "8.0.2",
@@ -2698,8 +2700,9 @@
     },
     "babel-runtime": {
       "version": "6.26.0",
-      "resolved": "http://r.cnpmjs.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -3815,7 +3818,8 @@
     "core-js": {
       "version": "2.5.7",
       "resolved": "http://r.cnpmjs.org/core-js/download/core-js-2.5.7.tgz",
-      "integrity": "sha1-+XJgj/DOrWi4QaFqky0LGDeRgU4="
+      "integrity": "sha1-+XJgj/DOrWi4QaFqky0LGDeRgU4=",
+      "dev": true
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -4359,7 +4363,8 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "http://r.cnpmjs.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
+      "dev": true
     },
     "default-gateway": {
       "version": "2.7.2",
@@ -4788,9 +4793,10 @@
       "integrity": "sha1-pjT7BMJtZItEyYlzmLkK2Ctl+JM="
     },
     "element-ui": {
-      "version": "2.4.7",
-      "resolved": "http://r.cnpmjs.org/element-ui/download/element-ui-2.4.7.tgz",
-      "integrity": "sha1-BztAQiKBXAi6Lmiznsjm/3t7E+A=",
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.12.0.tgz",
+      "integrity": "sha512-DapyT0PW4i/1ETPHk8K8Qbe8B6hj10+dXsRTrOTFryV9wAs6e9mCxbV65awokyR2/v/KuIHJmqX+mH3wUa4rOQ==",
+      "dev": true,
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -10372,8 +10378,9 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "http://r.cnpmjs.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
-      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=",
+      "dev": true
     },
     "npm-run-path": {
       "version": "2.0.2",
@@ -13425,7 +13432,8 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "http://r.cnpmjs.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+      "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.12.4",
@@ -13635,9 +13643,10 @@
       "dev": true
     },
     "resize-observer-polyfill": {
-      "version": "1.5.0",
-      "resolved": "http://r.cnpmjs.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.0.tgz",
-      "integrity": "sha1-Zg/x2XEqI4K6osrUUKRxYgn5ymk="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
     },
     "resolve": {
       "version": "1.8.1",
@@ -15265,8 +15274,9 @@
     },
     "throttle-debounce": {
       "version": "1.1.0",
-      "resolved": "http://r.cnpmjs.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
-      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
+      "dev": true
     },
     "through": {
       "version": "2.3.8",
diff --git a/package.json b/package.json
index a43b88e1..466688ab 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "babel-plugin-component": "^1.1.1",
     "element-theme": "^2.0.1",
     "element-theme-chalk": "^2.4.7",
-    "element-ui": "^2.4.7",
     "gulp-autoprefixer": "^6.0.0",
     "gulp-clean-css": "^3.10.0",
     "gulp-load-plugins": "^1.5.0",
@@ -42,6 +41,7 @@
     "@vue/cli-plugin-eslint": "^3.0.4",
     "@vue/cli-service": "^3.0.4",
     "@vue/eslint-config-standard": "^3.0.4",
+    "element-ui": "^2.12.0",
     "sockjs-client": "^1.4.0",
     "stompjs": "^2.3.3",
     "vue-template-compiler": "^2.5.17"
diff --git a/public/index.html b/public/index.html
index e0e58edf..65c8b7bb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
+  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=Q6OHwjpraQLhQt1u0WG6mkSysBlajDlV"></script>
   <!-- 站点配置 -->
   <script>
     window.SITE_CONFIG = {}
@@ -32,7 +33,7 @@
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
   <script>
-    window.SITE_CONFIG['apiURL'] = 'http://localhost:9094'
+    window.SITE_CONFIG['apiURL'] = 'https://epdc-api.elinkchina.com.cn'
   </script>
   <% } %>
   <!-- 集成测试环境 -->
@@ -59,4 +60,4 @@
   <div id="app"></div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/router/index.js b/src/router/index.js
index 797267a3..11d657a8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,7 +21,14 @@ export const pageRoutes = [
       next()
     }
   },
-  { path: '/login', component: () => import('@/views/pages/login'), name: 'login', meta: { title: '登录' } }
+  { path: '/login',
+    component: () => import('@/views/pages/login'),
+    name: 'login',
+    meta: { title: '登录' } },
+  { path: '/project-handle',
+    name: 'projectHandle',
+    component: () => import('@/views/pages/projectHandle')
+  }
 ]
 
 // 模块路由(基于主入口布局页面)
diff --git a/src/views/pages/projectHandle.vue b/src/views/pages/projectHandle.vue
new file mode 100644
index 00000000..16cc4418
--- /dev/null
+++ b/src/views/pages/projectHandle.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="project-handle">
+
+    <div class="project-detail">
+      <el-form label-position="right" label-width="120px">
+        <el-form-item label="议题内容：">
+
+        </el-form-item>
+        <el-form-item label="议题图片：">
+
+        </el-form-item>
+        <el-form-item label="上报时间：">
+
+        </el-form-item>
+        <el-form-item label="上报人：">
+
+        </el-form-item>
+        <el-form-item label="电话：">
+
+        </el-form-item>
+        <el-form-item label="所属类别：">
+
+        </el-form-item>
+        <el-form-item label="项目态度:">
+
+        </el-form-item>
+        <el-form-item label="项目评论：">
+          <el-button type="text">查看评论</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="container">
+        <div class="location">上报位置: 山东省青岛市市北区南宁路138号</div>
+        <div id="map"></div>
+      </div>
+    </div>
+
+    <div class="project-progress">
+      <el-timeline>
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          :icon="activity.icon"
+          :type="activity.type"
+          :color="activity.color"
+          :size="activity.size">
+          <div v-html="activity.content"></div>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+
+    <div class="handle-operation">
+      <el-form label-position="right" label-width="120px">
+        <el-form-item label="处理:">
+
+        </el-form-item>
+        <el-form-item label="吹哨部门:">
+
+        </el-form-item>
+        <el-form-item label="回复居民意见">
+
+        </el-form-item>
+        <el-form-item label="项目处理意见">
+
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import BMap from 'BMap'
+import 'element-ui/lib/theme-chalk/timeline.css'
+import 'element-ui/lib/theme-chalk/timeline-item.css'
+export default {
+  name: 'projectHandle',
+  data () {
+    return {
+      map: '',
+      activities: [{
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#0980ff'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
+        color: '#FF4C52'
+      },
+      {
+        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>'
+      }]
+    }
+  },
+  mounted () {
+    this.initBmap()
+  },
+  methods: {
+    initBmap () {
+      this.map = new BMap.Map('map')
+      const point = new BMap.Point(120.38821849395045, 36.120219258412966)
+      var marker = new BMap.Marker(point)
+      this.map.addOverlay(marker)
+      this.map.centerAndZoom(point, 13)
+      this.map.enableScrollWheelZoom(true)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.project-handle {
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  padding: 10px;
+  .project-detail {
+    width: 79%;
+    height: 49%;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    padding: 10px;
+    float:left;
+    margin-bottom: 1%;
+    .el-form {
+      width: 58%;
+      height: 100%;
+      float:left;
+      overflow-y:auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #fff;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #fff;
+      }
+    }
+    .container {
+      width: 40%;
+      height: 100%;
+      float: right;
+      .location {
+        height: 30px;
+        line-height: 30px;
+      }
+      #map {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
+    }
+  }
+  .project-progress {
+    width: 20%;
+    height: 100%;
+    float: right;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    margin-left: 1%;
+    padding-top: 20px;
+    overflow-y:auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+  }
+  .handle-operation {
+    width: 79%;
+    height: 49%;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    float:left;
+  }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 7cbe6049..8fd0e44a 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,5 +13,10 @@ module.exports = {
       errors: true,
       warnings: true
     }
+  },
+  chainWebpack: config => {
+    config.externals({
+      'BMap': 'BMap'
+    })
   }
 }