diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
index 8146911..5e35283 100644
--- a/src/components/CMap/components/cmapSmart.vue
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -21,13 +21,9 @@
     wellObj: { // 井对象
       type: Object,
       default: function() {
-        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+        return { wellCode: '', id: '', coordinateY: 39.9, coordinateX: 116.4, radius: '0' }
       }
     },
-    valves: { // 阀门
-      type: Array,
-      default: () => []
-    },
     zoom: { // 缩放层级
       type: Number,
       default: 12
@@ -65,22 +61,26 @@
       default: function() {
         return [0, -15]
       }
+    },
+    valves: { // 阀门原始数据
+      type: Array,
+      default: () => []
+    },
+    closeAreas: { // 关阀影响区域原始数据
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
   data() {
     return {
-      // wellObj: null,
       affectCicle: null, // 影响区域
-      affectPipes: null, // 影响管线
-      closeCircle: null, // 关阀影响区域
-      closePipes: null, // 影响管线
       mapLayers: null, // 地图图层
       wellOverlay: null, // 井overlay
-      affectAreaOverlay: null, // 影响区域overlay
-      affectLineOverlays: [], // 影响管线overlay
+      affectAreaOverlay: [], // 影响区域overlay
       valvesOverlays: [], // 阀门overlay列表
-      closeAreaOverlay: null, // 关阀影响区域overlay
-      closeLineOverlays: [] // 关阀影响区域overlay
+      closeAreaOverlays: [] // 关阀影响区域overlay
     }
   },
   watch: {
@@ -114,9 +114,20 @@
       const { mapLayers } = this
       mapLayers.setMaxZoom(val)
     },
-    alarmMarkers(val) {
-      console.log('alarmMarkers')
-      this.renderMarkers()
+    wellObj(val) {
+      if (val == null) {
+        this.removeOverlays()
+      } else {
+        this.renderAffectAP()
+      }
+    },
+    valves(val) {
+      console.log('renderValves')
+      this.renderValves()
+    },
+    closeAreas(val) {
+      console.log('renderValves')
+      this.renderCloseArea()
     }
   },
   mounted() {
@@ -197,8 +208,8 @@
       this.$emit('ready', { mapLayers: this.mapLayers })
       // this.renderMarkers()
     },
-    renderAffectAP(wellObj) {
-      // this.wellObj = wellObj
+    // 渲染影响区域
+    renderAffectAP() {
       const { mapLayers } = this
       if (!mapLayers) {
         return
@@ -207,43 +218,29 @@
       // 渲染井
       if (this.wellObj != null) {
         this.affectCircle = {
-          lat: this.wellObj.lat,
-          lng: this.wellObj.lng,
-          radius: this.wellObj.radius
-        }
-        if (this.wellObj.affectPipes) {
-          this.affectPipes = this.wellObj.affectPipes
+          lat: this.wellObj.coordinateY,
+          lng: this.wellObj.coordinateX,
+          radius: parseFloat(this.wellObj.radius)
         }
         this.renderWell()
-      }
-      // 当影响区域不为空的时候显示影响区域
-      if (this.affectCircle != null) {
-        this.renderAffectArea()
-      }
-      // 渲染管线
-      if (this.affectPipes && this.affectPipes.length > 0) {
-        this.renderAffectPipes()
+        // 当影响区域不为空的时候显示影响区域
+        if (this.affectCircle != null) {
+          this.renderAffectArea()
+        }
       }
     },
+    // 移除影响区域
     removeAffectAP() {
-      // 移除井
-      // if (this.wellObj != null) {
-      //   this.removeWell()
-      // }
       // 移除影响区域
       if (this.affectArea != null) {
         this.removeAffectArea()
       }
-      // 移除管线
-      if (this.affectPipes.length > 0) {
-        this.removeAffectPipes()
-      }
     },
     // 渲染影响区域
     renderAffectArea() {
       const { mapLayers, affectCircle } = this
       // 绘制影响区域
-      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      const opts = { color: '#boacfc', weight: 0, opacity: 0.9, fill: true, fillColor: '#32d3eb', fillOpacity: 0.5 }
       this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
     },
     // 移除影响区域
@@ -260,7 +257,7 @@
       const options = {
         url: './static/images/map_images/alarm-well1.png',
         size: size,
-        anchor: anchor
+        anchor: [15, 30]
       }
       const cmapIcon = createIcon(options)
       const opts = {
@@ -268,10 +265,10 @@
         title: wellObj.wellCode,
         draggable: false
       }
-      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.coordinateY, wellObj.coordinateX), opts)
       mapLayers.addOverlay(this.wellOverlay)
       mapLayers.setZoom(17)
-      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+      mapLayers.setCenter(new CLatLng(wellObj.coordinateY, wellObj.coordinateX))
     },
     // 移除井
     removeWell() {
@@ -281,45 +278,54 @@
         this.wellOverlay = null
       }
     },
-    // 渲染问题影响管线
-    renderAffectPipes() {
-      // TODO: 渲染管线
+    // 渲染阀门
+    renderValves() {
+      const { mapLayers, size, valves } = this
+      for (const valve of valves) {
+        const options = {
+          url: './static/images/map_images/valve1.png',
+          size: [20, 20],
+          anchor: [10, 10]
+        }
+        const cmapIcon = createIcon(options)
+        const opts = {
+          icon: cmapIcon,
+          title: valve.valveCode,
+          draggable: false
+        }
+        const valveOverlay = new CMarker(new CLatLng(valve.coordinateY, valve.coordinateX), opts)
+        mapLayers.addOverlay(valveOverlay)
+        this.valvesOverlays.push(valveOverlay)
+        mapLayers.setZoom(16)
+      }
     },
     // 移除影响管线
-    removeAffectPipes() {
+    removeValves() {
       const { mapLayers } = this
-      for (const overlay of this.affectLineOverlays) {
+      for (const overlay of this.valves) {
         mapLayers.removeOverlay(overlay)
       }
-      this.affectLineOverlays = []
+      this.valves = []
     },
     // 渲染关阀影响区域
     renderCloseArea() {
-      const { mapLayers, closeCircle } = this
+      const { mapLayers, closeAreas } = this
+      this.removeCloseArea()
       // 绘制影响区域
-      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
-      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+      for (const valveArea of closeAreas) {
+        const opts = { color: '#e7944f', weight: 1, opacity: 0.9, fill: true, fillColor: '#e7944f', fillOpacity: 0.4 }
+        const polygon = mapLayers.drawPolygon(valveArea.position, opts)
+        this.closeAreaOverlays.push(polygon)
+      }
     },
     // 移除关阀影响区域
     removeCloseArea() {
       const { mapLayers } = this
-      if (this.closeAreaOverlay) {
-        mapLayers.removeOverlay(this.closeAreaOverlay)
-        this.closeAreaOverlay = null
+      if (this.closeAreaOverlays) {
+        mapLayers.removeOverlay(this.closeAreaOverlays)
+        this.closeAreaOverlays = []
       }
     },
-    // 渲染关阀影响管线
-    renderClosePipes() {
-      // TODO: 渲染管线
-    },
-    // 移除关阀影响管线
-    removeClosePipes() {
-      const { mapLayers } = this
-      for (const overlay of this.closeLineOverlays) {
-        mapLayers.removeOverlay(overlay)
-      }
-      this.closeLineOverlays = []
-    },
     // 清除所有overlay
     removeOverlays() {
       const { mapLayers } = this

diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
index 8146911..5e35283 100644
--- a/src/components/CMap/components/cmapSmart.vue
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -21,13 +21,9 @@
     wellObj: { // 井对象
       type: Object,
       default: function() {
-        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+        return { wellCode: '', id: '', coordinateY: 39.9, coordinateX: 116.4, radius: '0' }
       }
     },
-    valves: { // 阀门
-      type: Array,
-      default: () => []
-    },
     zoom: { // 缩放层级
       type: Number,
       default: 12
@@ -65,22 +61,26 @@
       default: function() {
         return [0, -15]
       }
+    },
+    valves: { // 阀门原始数据
+      type: Array,
+      default: () => []
+    },
+    closeAreas: { // 关阀影响区域原始数据
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
   data() {
     return {
-      // wellObj: null,
       affectCicle: null, // 影响区域
-      affectPipes: null, // 影响管线
-      closeCircle: null, // 关阀影响区域
-      closePipes: null, // 影响管线
       mapLayers: null, // 地图图层
       wellOverlay: null, // 井overlay
-      affectAreaOverlay: null, // 影响区域overlay
-      affectLineOverlays: [], // 影响管线overlay
+      affectAreaOverlay: [], // 影响区域overlay
       valvesOverlays: [], // 阀门overlay列表
-      closeAreaOverlay: null, // 关阀影响区域overlay
-      closeLineOverlays: [] // 关阀影响区域overlay
+      closeAreaOverlays: [] // 关阀影响区域overlay
     }
   },
   watch: {
@@ -114,9 +114,20 @@
       const { mapLayers } = this
       mapLayers.setMaxZoom(val)
     },
-    alarmMarkers(val) {
-      console.log('alarmMarkers')
-      this.renderMarkers()
+    wellObj(val) {
+      if (val == null) {
+        this.removeOverlays()
+      } else {
+        this.renderAffectAP()
+      }
+    },
+    valves(val) {
+      console.log('renderValves')
+      this.renderValves()
+    },
+    closeAreas(val) {
+      console.log('renderValves')
+      this.renderCloseArea()
     }
   },
   mounted() {
@@ -197,8 +208,8 @@
       this.$emit('ready', { mapLayers: this.mapLayers })
       // this.renderMarkers()
     },
-    renderAffectAP(wellObj) {
-      // this.wellObj = wellObj
+    // 渲染影响区域
+    renderAffectAP() {
       const { mapLayers } = this
       if (!mapLayers) {
         return
@@ -207,43 +218,29 @@
       // 渲染井
       if (this.wellObj != null) {
         this.affectCircle = {
-          lat: this.wellObj.lat,
-          lng: this.wellObj.lng,
-          radius: this.wellObj.radius
-        }
-        if (this.wellObj.affectPipes) {
-          this.affectPipes = this.wellObj.affectPipes
+          lat: this.wellObj.coordinateY,
+          lng: this.wellObj.coordinateX,
+          radius: parseFloat(this.wellObj.radius)
         }
         this.renderWell()
-      }
-      // 当影响区域不为空的时候显示影响区域
-      if (this.affectCircle != null) {
-        this.renderAffectArea()
-      }
-      // 渲染管线
-      if (this.affectPipes && this.affectPipes.length > 0) {
-        this.renderAffectPipes()
+        // 当影响区域不为空的时候显示影响区域
+        if (this.affectCircle != null) {
+          this.renderAffectArea()
+        }
       }
     },
+    // 移除影响区域
     removeAffectAP() {
-      // 移除井
-      // if (this.wellObj != null) {
-      //   this.removeWell()
-      // }
       // 移除影响区域
       if (this.affectArea != null) {
         this.removeAffectArea()
       }
-      // 移除管线
-      if (this.affectPipes.length > 0) {
-        this.removeAffectPipes()
-      }
     },
     // 渲染影响区域
     renderAffectArea() {
       const { mapLayers, affectCircle } = this
       // 绘制影响区域
-      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      const opts = { color: '#boacfc', weight: 0, opacity: 0.9, fill: true, fillColor: '#32d3eb', fillOpacity: 0.5 }
       this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
     },
     // 移除影响区域
@@ -260,7 +257,7 @@
       const options = {
         url: './static/images/map_images/alarm-well1.png',
         size: size,
-        anchor: anchor
+        anchor: [15, 30]
       }
       const cmapIcon = createIcon(options)
       const opts = {
@@ -268,10 +265,10 @@
         title: wellObj.wellCode,
         draggable: false
       }
-      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.coordinateY, wellObj.coordinateX), opts)
       mapLayers.addOverlay(this.wellOverlay)
       mapLayers.setZoom(17)
-      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+      mapLayers.setCenter(new CLatLng(wellObj.coordinateY, wellObj.coordinateX))
     },
     // 移除井
     removeWell() {
@@ -281,45 +278,54 @@
         this.wellOverlay = null
       }
     },
-    // 渲染问题影响管线
-    renderAffectPipes() {
-      // TODO: 渲染管线
+    // 渲染阀门
+    renderValves() {
+      const { mapLayers, size, valves } = this
+      for (const valve of valves) {
+        const options = {
+          url: './static/images/map_images/valve1.png',
+          size: [20, 20],
+          anchor: [10, 10]
+        }
+        const cmapIcon = createIcon(options)
+        const opts = {
+          icon: cmapIcon,
+          title: valve.valveCode,
+          draggable: false
+        }
+        const valveOverlay = new CMarker(new CLatLng(valve.coordinateY, valve.coordinateX), opts)
+        mapLayers.addOverlay(valveOverlay)
+        this.valvesOverlays.push(valveOverlay)
+        mapLayers.setZoom(16)
+      }
     },
     // 移除影响管线
-    removeAffectPipes() {
+    removeValves() {
       const { mapLayers } = this
-      for (const overlay of this.affectLineOverlays) {
+      for (const overlay of this.valves) {
         mapLayers.removeOverlay(overlay)
       }
-      this.affectLineOverlays = []
+      this.valves = []
     },
     // 渲染关阀影响区域
     renderCloseArea() {
-      const { mapLayers, closeCircle } = this
+      const { mapLayers, closeAreas } = this
+      this.removeCloseArea()
       // 绘制影响区域
-      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
-      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+      for (const valveArea of closeAreas) {
+        const opts = { color: '#e7944f', weight: 1, opacity: 0.9, fill: true, fillColor: '#e7944f', fillOpacity: 0.4 }
+        const polygon = mapLayers.drawPolygon(valveArea.position, opts)
+        this.closeAreaOverlays.push(polygon)
+      }
     },
     // 移除关阀影响区域
     removeCloseArea() {
       const { mapLayers } = this
-      if (this.closeAreaOverlay) {
-        mapLayers.removeOverlay(this.closeAreaOverlay)
-        this.closeAreaOverlay = null
+      if (this.closeAreaOverlays) {
+        mapLayers.removeOverlay(this.closeAreaOverlays)
+        this.closeAreaOverlays = []
       }
     },
-    // 渲染关阀影响管线
-    renderClosePipes() {
-      // TODO: 渲染管线
-    },
-    // 移除关阀影响管线
-    removeClosePipes() {
-      const { mapLayers } = this
-      for (const overlay of this.closeLineOverlays) {
-        mapLayers.removeOverlay(overlay)
-      }
-      this.closeLineOverlays = []
-    },
     // 清除所有overlay
     removeOverlays() {
       const { mapLayers } = this
diff --git a/src/views/smartAnalysis/smartOverview.vue b/src/views/smartAnalysis/smartOverview.vue
index 06d30b0..7a80cd9 100644
--- a/src/views/smartAnalysis/smartOverview.vue
+++ b/src/views/smartAnalysis/smartOverview.vue
@@ -1,93 +1,132 @@
 <template>
   <div>
-    <el-row>
-      <el-col :span="17">
-        <div v-loading="loading" class="overview-map-container">
-          <!--地图-->
-          <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" class="map-demo" @ready="readyMap"/>
+    <div v-loading="loading" class="overview-map-container">
+      <!--地图-->
+      <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" :valves="valves" :close-areas="closeAreas" class="map-demo" @ready="readyMap"/>
+    </div>
+    <div ref="smartdiv" class="smart-div">
+      <div>
+        <el-radio-group v-model="activeName" @change="handleClick">
+          <el-radio-button label="first">内涝分析</el-radio-button>
+          <el-radio-button label="second">燃气管线泄漏点</el-radio-button>
+          <el-radio-button label="third">热力管线泄漏点</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div ref="smarttab" class="smart-tab">
+        <!--<el-tabs v-model="activeName" @tab-click="handleClick">-->
+        <!--<el-tab-pane label="内涝分析" name="first">-->
+        <div v-show="activeName=='first'">
+          <el-table
+            :data="waterList"
+            :max-height="maxheight"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="waterRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </el-col>
-      <el-col :span="7">
-        <div class="smart-div">
-          <div class="smart-tab">
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-              <el-tab-pane label="内涝分析" name="first">
-                <el-table
-                  :data="waterList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="waterRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="燃气管线泄漏点" name="second">
-                <el-table
-                  :data="gasList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="gasRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="热力管线泄漏点" name="third">
-                <el-table
-                  :data="hotList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="hotRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-          <div v-if="wellObj!=null" class="smart-detail">
-            <div class="detail-header">详情</div>
-            <el-form ref="form" :model="wellObj" label-width="90px">
-              <el-form-item label="井编号">
-                <span class="detail-item">{{ wellObj.wellCode }}</span>
-              </el-form-item>
-              <el-form-item label="位置">
-                <span class="detail-item">{{ wellObj.position }}</span>
-              </el-form-item>
-              <el-form-item v-if="wellObj.liquidData" label="液位值">
-                <span class="detail-item">{{ wellObj.liquidData }}</span>
-              </el-form-item>
-              <el-form-item v-if="wellObj.strength" label="燃气浓度">
-                <span class="detail-item">{{ wellObj.strength }} %LEL </span>
-              </el-form-item>
-              <el-form-item label="影响面积">
-                <span class="detail-item">{{ wellObj.affectArea }} 平方公里</span>
-              </el-form-item>
-              <el-form-item label="创建时间">
-                <span class="detail-item">{{ wellObj.createTime }}</span>
-              </el-form-item>
-            </el-form>
-            <div v-show="activeName!=='first'" class="btn-group">
-              <el-button>查看阀门</el-button>
-              <el-button>查看关阀影响区域</el-button>
-            </div>
-          </div>
+        <!--</el-tab-pane>-->
+        <!--<el-tab-pane label="燃气管线泄漏点" name="second">-->
+        <div v-show="activeName=='second'">
+          <el-table
+            :data="gasList"
+            :max-height="maxheight1"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="gasRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </el-col>
-    </el-row>
+        <!--</el-tab-pane>-->
+        <div v-show="activeName=='third'">
+          <!--<el-tab-pane label="热力管线泄漏点" name="third">-->
+          <el-table
+            :data="hotList"
+            :max-height="maxheight2"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="hotRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--</el-tab-pane>-->
+        </div>
+        <!--</el-tabs>-->
+      </div>
+      <div v-if="wellObj!=null" class="smart-detail">
+        <div class="detail-header">详情</div>
+        <el-form ref="form" :model="wellObj" label-width="100px">
+          <el-form-item label="井编号">
+            <span class="detail-item">{{ wellObj.wellCode }}</span>
+          </el-form-item>
+          <el-form-item label="位置">
+            <span class="detail-item">{{ wellObj.position }}</span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='first'" label="液位值">
+            <span class="detail-item">{{ wellObj.analysisValue }} 米</span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='second'" label="燃气浓度">
+            <span class="detail-item">{{ wellObj.analysisValue }} %LEL </span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='third'" label="噪声值">
+            <span class="detail-item">{{ wellObj.analysisValue }} mg </span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='first'" label="溢流影响面积">
+            <span class="detail-item">{{ parseFloat(wellObj.affectArea).toFixed(3) }} 平方米</span>
+          </el-form-item>
+          <el-form-item v-else label="泄漏影响面积">
+            <span class="detail-item">{{ parseFloat(wellObj.affectArea).toFixed(3) }} 平方米</span>
+          </el-form-item>
+          <el-form-item v-if="valveCodes!=''" label="关阀编号">
+            <span class="detail-item">{{ valveCodes }} </span>
+          </el-form-item>
+          <el-form-item v-if="closeAreaPlus!=0" label="关阀影响面积">
+            <span class="detail-item">{{ closeAreaPlus.toFixed(5) }} 平方公里 </span>
+          </el-form-item>
+          <el-form-item label="报警时间">
+            <span class="detail-item">{{ wellObj.alarmTime }}</span>
+          </el-form-item>
+        </el-form>
+        <div v-show="activeName!=='first'" class="btn-group">
+          <el-button type="primary" @click="showValves">查看阀门</el-button>
+          <el-button type="primary" @click="showCloseArea">查看关阀影响区域</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Cmap from '../../components/CMap/components/cmapSmart'
-import { getAlarmsNow } from '@/api/overview'
+import { getWaterAlarm, getGasAlarm, getHotAlarm } from '@/api/smartAnalysis'
+import { getWaterCompute, getGasCompute, getHotCompute } from '@/api/smartAnalysis'
+import { getValvesByWell, getAffectAreaByWell } from '@/api/smartAnalysis'
 export default {
   name: 'SmartOverview',
   components: { Cmap },
@@ -103,7 +142,14 @@
         {
           text: '井编号',
           value: 'wellCode',
-          align: 'center'
+          align: 'center',
+          width: 130
+        },
+        {
+          text: '井类型',
+          value: 'wellTypeName',
+          align: 'center',
+          width: 70
         },
         {
           text: '位置',
@@ -123,14 +169,46 @@
       waterList: [], // 内涝预警列表
       gasList: [], // 燃气管线泄漏点列表
       hotList: [], // 热力管线泄漏点列表
+      height: 100,
+      maxheight: 0,
+      maxheight1: 0,
+      maxheight2: 0,
       activeName: 'first', // 当前智能分析内容:内涝first，燃气管线泄漏second，热力管线泄漏third
-      wellObj: null,
+      wellObj: null, // 井对象
+      valves: [], // 阀门列表
+      closeAreas: [], // 关阀影响区域列表
       loading: false // 加载图标是否显示
     }
   },
+  computed: {
+    valveCodes() {
+      const valveCodes = []
+      for (const valve of this.valves) {
+        valveCodes.push(valve.valveCode)
+      }
+      return valveCodes.join(',')
+    },
+    closeAreaPlus() {
+      let result = 0
+      for (const area of this.closeAreas) {
+        result += area.area
+      }
+      return result
+    }
+  },
   activated() {
     this.refreshData()
   },
+  mounted() {
+    this.height = this.$refs.smartdiv.clientHeight - 295
+    // this.$refs.smarttab.style.height = this.height + 'px'
+    // const that = this
+    this.$nextTick(function() {
+      this.maxheight = this.$refs.smartdiv.clientHeight - 295
+      this.maxheight1 = this.$refs.smartdiv.clientHeight - 377
+      this.maxheight2 = this.$refs.smartdiv.clientHeight - 377
+    })
+  },
   methods: {
     // 地图准备好后的操作
     readyMap() {
@@ -142,116 +220,121 @@
     refreshData() {
       this.getWaterData()
     },
-    handleClick(tab, event) {
-      debugger
-      if (tab.name === 'first') {
+    handleClick() {
+      const tab = this.activeName
+      if (tab === 'first') {
         this.getWaterData()
-      } else if (tab.name === 'second') {
+      } else if (tab === 'second') {
         this.getGasData()
-      } else if (tab.name === 'third') {
+      } else if (tab === 'third') {
         this.getHotData()
       }
+      this.wellObj = null
     },
     getWaterData() {
-      getAlarmsNow().then(response => {
+      console.log('getWaterData')
+      getWaterAlarm().then(response => {
         if (response.code === 200) {
-          // 获取当前报警列表
-          // this.waterList = response.data
           // 模拟数据
-          this.waterList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.waterList = response.data
         }
       })
     },
     getGasData() {
-      getAlarmsNow().then(response => {
+      console.log('getGasData')
+      // getAlarmsNow().then(response => {
+      getGasAlarm().then(response => {
         if (response.code === 200) {
           // 获取当前报警列表
-          // this.waterList = response.data
-          // 模拟数据
-          this.gasList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.gasList = response.data
         }
       })
     },
     getHotData() {
-      getAlarmsNow().then(response => {
+      console.log('getHotData')
+      getHotAlarm().then(response => {
         if (response.code === 200) {
-          // 获取当前报警列表
-          // this.waterList = response.data
           // 模拟数据
-          this.hotList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.hotList = response.data
         }
       })
     },
     // 点击内涝列表项
     waterRowClick(row, column, event) {
-      console.log('alarmRowClick')
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: 116.4,
-        lat: 39.9,
-        radius: 100,
-        liquidData: '13',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      // 触发计算
+      const params = { wellId: row.wellId }
+      getWaterCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 点击燃气泄漏点列表项
     gasRowClick(row, column, event) {
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: '126.4',
-        lat: '39.9',
-        radius: '24',
-        strength: '3',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      // 触发计算
+      const params = { wellId: row.wellId }
+      getGasCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 点击热力泄漏点列表项
     hotRowClick(row, column, event) {
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: '116.4',
-        lat: '39.9',
-        radius: '24',
-        liquidData: '13',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      // 触发计算
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      const params = { wellId: row.wellId }
+      getHotCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 查看阀门
-    showValves(){
-
+    showValves() {
+      // const params = { wellId: 4474 }
+      const params = { wellId: this.wellObj.wellId }
+      getValvesByWell(params).then(response => {
+        if (response.code === 200) {
+          this.valves = response.data
+        }
+      })
     },
     // 关阀影响区域
-    showCloseArea(){
-
+    showCloseArea() {
+      const params = { wellId: this.wellObj.wellId }
+      getAffectAreaByWell(params).then(response => {
+        if (response.code === 200) {
+          this.closeAreas = response.data
+        }
+      })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+  $sideWidth: 380px;
 // 查询框
 .map-search-div{
   position: absolute;
@@ -264,11 +347,20 @@
   }
 }
 .smart-div{
+  width: $sideWidth;
+  float: left;
+  height: calc(100vh - 144px);
   .smart-tab{
+    margin-top:10px;
+    overflow-y: scroll;
     .el-tabs__content{
       max-height: calc(100vh - 295px - 144px - 60px);
       overflow-y: scroll;
     }
+    .el-tabs__nav-wrap{
+      display:none;
+    }
+
   }
   .smart-detail{
     /*margin-top: 20px;*/
@@ -276,10 +368,12 @@
     min-height:295px;
     .detail-header{
       height: 40px;
-      padding-left: 5px;
-      font-size:14px;
+      padding-left: 10px;
       line-height: 40px;
-      background-color: #f0f0f0;
+      background-color: #e6e6e6;
+      font-size: 14px;
+      color: #606266;
+      font-weight: 700;
     }
     .el-form{
       .el-form-item{
@@ -299,6 +393,9 @@
       text-align: center;
     }
   }
+  .alarm-list-table thead tr th{
+    /*background-color: #8cc5ff;*/
+  }
 }
 // 报警列表
 .map-alarm-div{
@@ -381,8 +478,9 @@
 }
 // 地图
 .overview-map-container{
-  width: 100%;
+  width: calc(100% - 380px);
   padding: 5px;
+  float: left;
   .map-demo{
     width: 100%;
     height: calc(100vh - 144px);

diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
index 8146911..5e35283 100644
--- a/src/components/CMap/components/cmapSmart.vue
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -21,13 +21,9 @@
     wellObj: { // 井对象
       type: Object,
       default: function() {
-        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+        return { wellCode: '', id: '', coordinateY: 39.9, coordinateX: 116.4, radius: '0' }
       }
     },
-    valves: { // 阀门
-      type: Array,
-      default: () => []
-    },
     zoom: { // 缩放层级
       type: Number,
       default: 12
@@ -65,22 +61,26 @@
       default: function() {
         return [0, -15]
       }
+    },
+    valves: { // 阀门原始数据
+      type: Array,
+      default: () => []
+    },
+    closeAreas: { // 关阀影响区域原始数据
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
   data() {
     return {
-      // wellObj: null,
       affectCicle: null, // 影响区域
-      affectPipes: null, // 影响管线
-      closeCircle: null, // 关阀影响区域
-      closePipes: null, // 影响管线
       mapLayers: null, // 地图图层
       wellOverlay: null, // 井overlay
-      affectAreaOverlay: null, // 影响区域overlay
-      affectLineOverlays: [], // 影响管线overlay
+      affectAreaOverlay: [], // 影响区域overlay
       valvesOverlays: [], // 阀门overlay列表
-      closeAreaOverlay: null, // 关阀影响区域overlay
-      closeLineOverlays: [] // 关阀影响区域overlay
+      closeAreaOverlays: [] // 关阀影响区域overlay
     }
   },
   watch: {
@@ -114,9 +114,20 @@
       const { mapLayers } = this
       mapLayers.setMaxZoom(val)
     },
-    alarmMarkers(val) {
-      console.log('alarmMarkers')
-      this.renderMarkers()
+    wellObj(val) {
+      if (val == null) {
+        this.removeOverlays()
+      } else {
+        this.renderAffectAP()
+      }
+    },
+    valves(val) {
+      console.log('renderValves')
+      this.renderValves()
+    },
+    closeAreas(val) {
+      console.log('renderValves')
+      this.renderCloseArea()
     }
   },
   mounted() {
@@ -197,8 +208,8 @@
       this.$emit('ready', { mapLayers: this.mapLayers })
       // this.renderMarkers()
     },
-    renderAffectAP(wellObj) {
-      // this.wellObj = wellObj
+    // 渲染影响区域
+    renderAffectAP() {
       const { mapLayers } = this
       if (!mapLayers) {
         return
@@ -207,43 +218,29 @@
       // 渲染井
       if (this.wellObj != null) {
         this.affectCircle = {
-          lat: this.wellObj.lat,
-          lng: this.wellObj.lng,
-          radius: this.wellObj.radius
-        }
-        if (this.wellObj.affectPipes) {
-          this.affectPipes = this.wellObj.affectPipes
+          lat: this.wellObj.coordinateY,
+          lng: this.wellObj.coordinateX,
+          radius: parseFloat(this.wellObj.radius)
         }
         this.renderWell()
-      }
-      // 当影响区域不为空的时候显示影响区域
-      if (this.affectCircle != null) {
-        this.renderAffectArea()
-      }
-      // 渲染管线
-      if (this.affectPipes && this.affectPipes.length > 0) {
-        this.renderAffectPipes()
+        // 当影响区域不为空的时候显示影响区域
+        if (this.affectCircle != null) {
+          this.renderAffectArea()
+        }
       }
     },
+    // 移除影响区域
     removeAffectAP() {
-      // 移除井
-      // if (this.wellObj != null) {
-      //   this.removeWell()
-      // }
       // 移除影响区域
       if (this.affectArea != null) {
         this.removeAffectArea()
       }
-      // 移除管线
-      if (this.affectPipes.length > 0) {
-        this.removeAffectPipes()
-      }
     },
     // 渲染影响区域
     renderAffectArea() {
       const { mapLayers, affectCircle } = this
       // 绘制影响区域
-      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      const opts = { color: '#boacfc', weight: 0, opacity: 0.9, fill: true, fillColor: '#32d3eb', fillOpacity: 0.5 }
       this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
     },
     // 移除影响区域
@@ -260,7 +257,7 @@
       const options = {
         url: './static/images/map_images/alarm-well1.png',
         size: size,
-        anchor: anchor
+        anchor: [15, 30]
       }
       const cmapIcon = createIcon(options)
       const opts = {
@@ -268,10 +265,10 @@
         title: wellObj.wellCode,
         draggable: false
       }
-      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.coordinateY, wellObj.coordinateX), opts)
       mapLayers.addOverlay(this.wellOverlay)
       mapLayers.setZoom(17)
-      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+      mapLayers.setCenter(new CLatLng(wellObj.coordinateY, wellObj.coordinateX))
     },
     // 移除井
     removeWell() {
@@ -281,45 +278,54 @@
         this.wellOverlay = null
       }
     },
-    // 渲染问题影响管线
-    renderAffectPipes() {
-      // TODO: 渲染管线
+    // 渲染阀门
+    renderValves() {
+      const { mapLayers, size, valves } = this
+      for (const valve of valves) {
+        const options = {
+          url: './static/images/map_images/valve1.png',
+          size: [20, 20],
+          anchor: [10, 10]
+        }
+        const cmapIcon = createIcon(options)
+        const opts = {
+          icon: cmapIcon,
+          title: valve.valveCode,
+          draggable: false
+        }
+        const valveOverlay = new CMarker(new CLatLng(valve.coordinateY, valve.coordinateX), opts)
+        mapLayers.addOverlay(valveOverlay)
+        this.valvesOverlays.push(valveOverlay)
+        mapLayers.setZoom(16)
+      }
     },
     // 移除影响管线
-    removeAffectPipes() {
+    removeValves() {
       const { mapLayers } = this
-      for (const overlay of this.affectLineOverlays) {
+      for (const overlay of this.valves) {
         mapLayers.removeOverlay(overlay)
       }
-      this.affectLineOverlays = []
+      this.valves = []
     },
     // 渲染关阀影响区域
     renderCloseArea() {
-      const { mapLayers, closeCircle } = this
+      const { mapLayers, closeAreas } = this
+      this.removeCloseArea()
       // 绘制影响区域
-      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
-      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+      for (const valveArea of closeAreas) {
+        const opts = { color: '#e7944f', weight: 1, opacity: 0.9, fill: true, fillColor: '#e7944f', fillOpacity: 0.4 }
+        const polygon = mapLayers.drawPolygon(valveArea.position, opts)
+        this.closeAreaOverlays.push(polygon)
+      }
     },
     // 移除关阀影响区域
     removeCloseArea() {
       const { mapLayers } = this
-      if (this.closeAreaOverlay) {
-        mapLayers.removeOverlay(this.closeAreaOverlay)
-        this.closeAreaOverlay = null
+      if (this.closeAreaOverlays) {
+        mapLayers.removeOverlay(this.closeAreaOverlays)
+        this.closeAreaOverlays = []
       }
     },
-    // 渲染关阀影响管线
-    renderClosePipes() {
-      // TODO: 渲染管线
-    },
-    // 移除关阀影响管线
-    removeClosePipes() {
-      const { mapLayers } = this
-      for (const overlay of this.closeLineOverlays) {
-        mapLayers.removeOverlay(overlay)
-      }
-      this.closeLineOverlays = []
-    },
     // 清除所有overlay
     removeOverlays() {
       const { mapLayers } = this
diff --git a/src/views/smartAnalysis/smartOverview.vue b/src/views/smartAnalysis/smartOverview.vue
index 06d30b0..7a80cd9 100644
--- a/src/views/smartAnalysis/smartOverview.vue
+++ b/src/views/smartAnalysis/smartOverview.vue
@@ -1,93 +1,132 @@
 <template>
   <div>
-    <el-row>
-      <el-col :span="17">
-        <div v-loading="loading" class="overview-map-container">
-          <!--地图-->
-          <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" class="map-demo" @ready="readyMap"/>
+    <div v-loading="loading" class="overview-map-container">
+      <!--地图-->
+      <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" :valves="valves" :close-areas="closeAreas" class="map-demo" @ready="readyMap"/>
+    </div>
+    <div ref="smartdiv" class="smart-div">
+      <div>
+        <el-radio-group v-model="activeName" @change="handleClick">
+          <el-radio-button label="first">内涝分析</el-radio-button>
+          <el-radio-button label="second">燃气管线泄漏点</el-radio-button>
+          <el-radio-button label="third">热力管线泄漏点</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div ref="smarttab" class="smart-tab">
+        <!--<el-tabs v-model="activeName" @tab-click="handleClick">-->
+        <!--<el-tab-pane label="内涝分析" name="first">-->
+        <div v-show="activeName=='first'">
+          <el-table
+            :data="waterList"
+            :max-height="maxheight"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="waterRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </el-col>
-      <el-col :span="7">
-        <div class="smart-div">
-          <div class="smart-tab">
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-              <el-tab-pane label="内涝分析" name="first">
-                <el-table
-                  :data="waterList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="waterRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="燃气管线泄漏点" name="second">
-                <el-table
-                  :data="gasList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="gasRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="热力管线泄漏点" name="third">
-                <el-table
-                  :data="hotList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="hotRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-          <div v-if="wellObj!=null" class="smart-detail">
-            <div class="detail-header">详情</div>
-            <el-form ref="form" :model="wellObj" label-width="90px">
-              <el-form-item label="井编号">
-                <span class="detail-item">{{ wellObj.wellCode }}</span>
-              </el-form-item>
-              <el-form-item label="位置">
-                <span class="detail-item">{{ wellObj.position }}</span>
-              </el-form-item>
-              <el-form-item v-if="wellObj.liquidData" label="液位值">
-                <span class="detail-item">{{ wellObj.liquidData }}</span>
-              </el-form-item>
-              <el-form-item v-if="wellObj.strength" label="燃气浓度">
-                <span class="detail-item">{{ wellObj.strength }} %LEL </span>
-              </el-form-item>
-              <el-form-item label="影响面积">
-                <span class="detail-item">{{ wellObj.affectArea }} 平方公里</span>
-              </el-form-item>
-              <el-form-item label="创建时间">
-                <span class="detail-item">{{ wellObj.createTime }}</span>
-              </el-form-item>
-            </el-form>
-            <div v-show="activeName!=='first'" class="btn-group">
-              <el-button>查看阀门</el-button>
-              <el-button>查看关阀影响区域</el-button>
-            </div>
-          </div>
+        <!--</el-tab-pane>-->
+        <!--<el-tab-pane label="燃气管线泄漏点" name="second">-->
+        <div v-show="activeName=='second'">
+          <el-table
+            :data="gasList"
+            :max-height="maxheight1"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="gasRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </el-col>
-    </el-row>
+        <!--</el-tab-pane>-->
+        <div v-show="activeName=='third'">
+          <!--<el-tab-pane label="热力管线泄漏点" name="third">-->
+          <el-table
+            :data="hotList"
+            :max-height="maxheight2"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="hotRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--</el-tab-pane>-->
+        </div>
+        <!--</el-tabs>-->
+      </div>
+      <div v-if="wellObj!=null" class="smart-detail">
+        <div class="detail-header">详情</div>
+        <el-form ref="form" :model="wellObj" label-width="100px">
+          <el-form-item label="井编号">
+            <span class="detail-item">{{ wellObj.wellCode }}</span>
+          </el-form-item>
+          <el-form-item label="位置">
+            <span class="detail-item">{{ wellObj.position }}</span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='first'" label="液位值">
+            <span class="detail-item">{{ wellObj.analysisValue }} 米</span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='second'" label="燃气浓度">
+            <span class="detail-item">{{ wellObj.analysisValue }} %LEL </span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='third'" label="噪声值">
+            <span class="detail-item">{{ wellObj.analysisValue }} mg </span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='first'" label="溢流影响面积">
+            <span class="detail-item">{{ parseFloat(wellObj.affectArea).toFixed(3) }} 平方米</span>
+          </el-form-item>
+          <el-form-item v-else label="泄漏影响面积">
+            <span class="detail-item">{{ parseFloat(wellObj.affectArea).toFixed(3) }} 平方米</span>
+          </el-form-item>
+          <el-form-item v-if="valveCodes!=''" label="关阀编号">
+            <span class="detail-item">{{ valveCodes }} </span>
+          </el-form-item>
+          <el-form-item v-if="closeAreaPlus!=0" label="关阀影响面积">
+            <span class="detail-item">{{ closeAreaPlus.toFixed(5) }} 平方公里 </span>
+          </el-form-item>
+          <el-form-item label="报警时间">
+            <span class="detail-item">{{ wellObj.alarmTime }}</span>
+          </el-form-item>
+        </el-form>
+        <div v-show="activeName!=='first'" class="btn-group">
+          <el-button type="primary" @click="showValves">查看阀门</el-button>
+          <el-button type="primary" @click="showCloseArea">查看关阀影响区域</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Cmap from '../../components/CMap/components/cmapSmart'
-import { getAlarmsNow } from '@/api/overview'
+import { getWaterAlarm, getGasAlarm, getHotAlarm } from '@/api/smartAnalysis'
+import { getWaterCompute, getGasCompute, getHotCompute } from '@/api/smartAnalysis'
+import { getValvesByWell, getAffectAreaByWell } from '@/api/smartAnalysis'
 export default {
   name: 'SmartOverview',
   components: { Cmap },
@@ -103,7 +142,14 @@
         {
           text: '井编号',
           value: 'wellCode',
-          align: 'center'
+          align: 'center',
+          width: 130
+        },
+        {
+          text: '井类型',
+          value: 'wellTypeName',
+          align: 'center',
+          width: 70
         },
         {
           text: '位置',
@@ -123,14 +169,46 @@
       waterList: [], // 内涝预警列表
       gasList: [], // 燃气管线泄漏点列表
       hotList: [], // 热力管线泄漏点列表
+      height: 100,
+      maxheight: 0,
+      maxheight1: 0,
+      maxheight2: 0,
       activeName: 'first', // 当前智能分析内容:内涝first，燃气管线泄漏second，热力管线泄漏third
-      wellObj: null,
+      wellObj: null, // 井对象
+      valves: [], // 阀门列表
+      closeAreas: [], // 关阀影响区域列表
       loading: false // 加载图标是否显示
     }
   },
+  computed: {
+    valveCodes() {
+      const valveCodes = []
+      for (const valve of this.valves) {
+        valveCodes.push(valve.valveCode)
+      }
+      return valveCodes.join(',')
+    },
+    closeAreaPlus() {
+      let result = 0
+      for (const area of this.closeAreas) {
+        result += area.area
+      }
+      return result
+    }
+  },
   activated() {
     this.refreshData()
   },
+  mounted() {
+    this.height = this.$refs.smartdiv.clientHeight - 295
+    // this.$refs.smarttab.style.height = this.height + 'px'
+    // const that = this
+    this.$nextTick(function() {
+      this.maxheight = this.$refs.smartdiv.clientHeight - 295
+      this.maxheight1 = this.$refs.smartdiv.clientHeight - 377
+      this.maxheight2 = this.$refs.smartdiv.clientHeight - 377
+    })
+  },
   methods: {
     // 地图准备好后的操作
     readyMap() {
@@ -142,116 +220,121 @@
     refreshData() {
       this.getWaterData()
     },
-    handleClick(tab, event) {
-      debugger
-      if (tab.name === 'first') {
+    handleClick() {
+      const tab = this.activeName
+      if (tab === 'first') {
         this.getWaterData()
-      } else if (tab.name === 'second') {
+      } else if (tab === 'second') {
         this.getGasData()
-      } else if (tab.name === 'third') {
+      } else if (tab === 'third') {
         this.getHotData()
       }
+      this.wellObj = null
     },
     getWaterData() {
-      getAlarmsNow().then(response => {
+      console.log('getWaterData')
+      getWaterAlarm().then(response => {
         if (response.code === 200) {
-          // 获取当前报警列表
-          // this.waterList = response.data
           // 模拟数据
-          this.waterList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.waterList = response.data
         }
       })
     },
     getGasData() {
-      getAlarmsNow().then(response => {
+      console.log('getGasData')
+      // getAlarmsNow().then(response => {
+      getGasAlarm().then(response => {
         if (response.code === 200) {
           // 获取当前报警列表
-          // this.waterList = response.data
-          // 模拟数据
-          this.gasList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.gasList = response.data
         }
       })
     },
     getHotData() {
-      getAlarmsNow().then(response => {
+      console.log('getHotData')
+      getHotAlarm().then(response => {
         if (response.code === 200) {
-          // 获取当前报警列表
-          // this.waterList = response.data
           // 模拟数据
-          this.hotList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.hotList = response.data
         }
       })
     },
     // 点击内涝列表项
     waterRowClick(row, column, event) {
-      console.log('alarmRowClick')
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: 116.4,
-        lat: 39.9,
-        radius: 100,
-        liquidData: '13',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      // 触发计算
+      const params = { wellId: row.wellId }
+      getWaterCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 点击燃气泄漏点列表项
     gasRowClick(row, column, event) {
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: '126.4',
-        lat: '39.9',
-        radius: '24',
-        strength: '3',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      // 触发计算
+      const params = { wellId: row.wellId }
+      getGasCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 点击热力泄漏点列表项
     hotRowClick(row, column, event) {
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: '116.4',
-        lat: '39.9',
-        radius: '24',
-        liquidData: '13',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      // 触发计算
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      const params = { wellId: row.wellId }
+      getHotCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 查看阀门
-    showValves(){
-
+    showValves() {
+      // const params = { wellId: 4474 }
+      const params = { wellId: this.wellObj.wellId }
+      getValvesByWell(params).then(response => {
+        if (response.code === 200) {
+          this.valves = response.data
+        }
+      })
     },
     // 关阀影响区域
-    showCloseArea(){
-
+    showCloseArea() {
+      const params = { wellId: this.wellObj.wellId }
+      getAffectAreaByWell(params).then(response => {
+        if (response.code === 200) {
+          this.closeAreas = response.data
+        }
+      })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+  $sideWidth: 380px;
 // 查询框
 .map-search-div{
   position: absolute;
@@ -264,11 +347,20 @@
   }
 }
 .smart-div{
+  width: $sideWidth;
+  float: left;
+  height: calc(100vh - 144px);
   .smart-tab{
+    margin-top:10px;
+    overflow-y: scroll;
     .el-tabs__content{
       max-height: calc(100vh - 295px - 144px - 60px);
       overflow-y: scroll;
     }
+    .el-tabs__nav-wrap{
+      display:none;
+    }
+
   }
   .smart-detail{
     /*margin-top: 20px;*/
@@ -276,10 +368,12 @@
     min-height:295px;
     .detail-header{
       height: 40px;
-      padding-left: 5px;
-      font-size:14px;
+      padding-left: 10px;
       line-height: 40px;
-      background-color: #f0f0f0;
+      background-color: #e6e6e6;
+      font-size: 14px;
+      color: #606266;
+      font-weight: 700;
     }
     .el-form{
       .el-form-item{
@@ -299,6 +393,9 @@
       text-align: center;
     }
   }
+  .alarm-list-table thead tr th{
+    /*background-color: #8cc5ff;*/
+  }
 }
 // 报警列表
 .map-alarm-div{
@@ -381,8 +478,9 @@
 }
 // 地图
 .overview-map-container{
-  width: 100%;
+  width: calc(100% - 380px);
   padding: 5px;
+  float: left;
   .map-demo{
     width: 100%;
     height: calc(100vh - 144px);
diff --git a/static/images/map_images/valve.png b/static/images/map_images/valve.png
new file mode 100644
index 0000000..c2cec1b
--- /dev/null
+++ b/static/images/map_images/valve.png
Binary files differ

diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
index 8146911..5e35283 100644
--- a/src/components/CMap/components/cmapSmart.vue
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -21,13 +21,9 @@
     wellObj: { // 井对象
       type: Object,
       default: function() {
-        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+        return { wellCode: '', id: '', coordinateY: 39.9, coordinateX: 116.4, radius: '0' }
       }
     },
-    valves: { // 阀门
-      type: Array,
-      default: () => []
-    },
     zoom: { // 缩放层级
       type: Number,
       default: 12
@@ -65,22 +61,26 @@
       default: function() {
         return [0, -15]
       }
+    },
+    valves: { // 阀门原始数据
+      type: Array,
+      default: () => []
+    },
+    closeAreas: { // 关阀影响区域原始数据
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
   data() {
     return {
-      // wellObj: null,
       affectCicle: null, // 影响区域
-      affectPipes: null, // 影响管线
-      closeCircle: null, // 关阀影响区域
-      closePipes: null, // 影响管线
       mapLayers: null, // 地图图层
       wellOverlay: null, // 井overlay
-      affectAreaOverlay: null, // 影响区域overlay
-      affectLineOverlays: [], // 影响管线overlay
+      affectAreaOverlay: [], // 影响区域overlay
       valvesOverlays: [], // 阀门overlay列表
-      closeAreaOverlay: null, // 关阀影响区域overlay
-      closeLineOverlays: [] // 关阀影响区域overlay
+      closeAreaOverlays: [] // 关阀影响区域overlay
     }
   },
   watch: {
@@ -114,9 +114,20 @@
       const { mapLayers } = this
       mapLayers.setMaxZoom(val)
     },
-    alarmMarkers(val) {
-      console.log('alarmMarkers')
-      this.renderMarkers()
+    wellObj(val) {
+      if (val == null) {
+        this.removeOverlays()
+      } else {
+        this.renderAffectAP()
+      }
+    },
+    valves(val) {
+      console.log('renderValves')
+      this.renderValves()
+    },
+    closeAreas(val) {
+      console.log('renderValves')
+      this.renderCloseArea()
     }
   },
   mounted() {
@@ -197,8 +208,8 @@
       this.$emit('ready', { mapLayers: this.mapLayers })
       // this.renderMarkers()
     },
-    renderAffectAP(wellObj) {
-      // this.wellObj = wellObj
+    // 渲染影响区域
+    renderAffectAP() {
       const { mapLayers } = this
       if (!mapLayers) {
         return
@@ -207,43 +218,29 @@
       // 渲染井
       if (this.wellObj != null) {
         this.affectCircle = {
-          lat: this.wellObj.lat,
-          lng: this.wellObj.lng,
-          radius: this.wellObj.radius
-        }
-        if (this.wellObj.affectPipes) {
-          this.affectPipes = this.wellObj.affectPipes
+          lat: this.wellObj.coordinateY,
+          lng: this.wellObj.coordinateX,
+          radius: parseFloat(this.wellObj.radius)
         }
         this.renderWell()
-      }
-      // 当影响区域不为空的时候显示影响区域
-      if (this.affectCircle != null) {
-        this.renderAffectArea()
-      }
-      // 渲染管线
-      if (this.affectPipes && this.affectPipes.length > 0) {
-        this.renderAffectPipes()
+        // 当影响区域不为空的时候显示影响区域
+        if (this.affectCircle != null) {
+          this.renderAffectArea()
+        }
       }
     },
+    // 移除影响区域
     removeAffectAP() {
-      // 移除井
-      // if (this.wellObj != null) {
-      //   this.removeWell()
-      // }
       // 移除影响区域
       if (this.affectArea != null) {
         this.removeAffectArea()
       }
-      // 移除管线
-      if (this.affectPipes.length > 0) {
-        this.removeAffectPipes()
-      }
     },
     // 渲染影响区域
     renderAffectArea() {
       const { mapLayers, affectCircle } = this
       // 绘制影响区域
-      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      const opts = { color: '#boacfc', weight: 0, opacity: 0.9, fill: true, fillColor: '#32d3eb', fillOpacity: 0.5 }
       this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
     },
     // 移除影响区域
@@ -260,7 +257,7 @@
       const options = {
         url: './static/images/map_images/alarm-well1.png',
         size: size,
-        anchor: anchor
+        anchor: [15, 30]
       }
       const cmapIcon = createIcon(options)
       const opts = {
@@ -268,10 +265,10 @@
         title: wellObj.wellCode,
         draggable: false
       }
-      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.coordinateY, wellObj.coordinateX), opts)
       mapLayers.addOverlay(this.wellOverlay)
       mapLayers.setZoom(17)
-      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+      mapLayers.setCenter(new CLatLng(wellObj.coordinateY, wellObj.coordinateX))
     },
     // 移除井
     removeWell() {
@@ -281,45 +278,54 @@
         this.wellOverlay = null
       }
     },
-    // 渲染问题影响管线
-    renderAffectPipes() {
-      // TODO: 渲染管线
+    // 渲染阀门
+    renderValves() {
+      const { mapLayers, size, valves } = this
+      for (const valve of valves) {
+        const options = {
+          url: './static/images/map_images/valve1.png',
+          size: [20, 20],
+          anchor: [10, 10]
+        }
+        const cmapIcon = createIcon(options)
+        const opts = {
+          icon: cmapIcon,
+          title: valve.valveCode,
+          draggable: false
+        }
+        const valveOverlay = new CMarker(new CLatLng(valve.coordinateY, valve.coordinateX), opts)
+        mapLayers.addOverlay(valveOverlay)
+        this.valvesOverlays.push(valveOverlay)
+        mapLayers.setZoom(16)
+      }
     },
     // 移除影响管线
-    removeAffectPipes() {
+    removeValves() {
       const { mapLayers } = this
-      for (const overlay of this.affectLineOverlays) {
+      for (const overlay of this.valves) {
         mapLayers.removeOverlay(overlay)
       }
-      this.affectLineOverlays = []
+      this.valves = []
     },
     // 渲染关阀影响区域
     renderCloseArea() {
-      const { mapLayers, closeCircle } = this
+      const { mapLayers, closeAreas } = this
+      this.removeCloseArea()
       // 绘制影响区域
-      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
-      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+      for (const valveArea of closeAreas) {
+        const opts = { color: '#e7944f', weight: 1, opacity: 0.9, fill: true, fillColor: '#e7944f', fillOpacity: 0.4 }
+        const polygon = mapLayers.drawPolygon(valveArea.position, opts)
+        this.closeAreaOverlays.push(polygon)
+      }
     },
     // 移除关阀影响区域
     removeCloseArea() {
       const { mapLayers } = this
-      if (this.closeAreaOverlay) {
-        mapLayers.removeOverlay(this.closeAreaOverlay)
-        this.closeAreaOverlay = null
+      if (this.closeAreaOverlays) {
+        mapLayers.removeOverlay(this.closeAreaOverlays)
+        this.closeAreaOverlays = []
       }
     },
-    // 渲染关阀影响管线
-    renderClosePipes() {
-      // TODO: 渲染管线
-    },
-    // 移除关阀影响管线
-    removeClosePipes() {
-      const { mapLayers } = this
-      for (const overlay of this.closeLineOverlays) {
-        mapLayers.removeOverlay(overlay)
-      }
-      this.closeLineOverlays = []
-    },
     // 清除所有overlay
     removeOverlays() {
       const { mapLayers } = this
diff --git a/src/views/smartAnalysis/smartOverview.vue b/src/views/smartAnalysis/smartOverview.vue
index 06d30b0..7a80cd9 100644
--- a/src/views/smartAnalysis/smartOverview.vue
+++ b/src/views/smartAnalysis/smartOverview.vue
@@ -1,93 +1,132 @@
 <template>
   <div>
-    <el-row>
-      <el-col :span="17">
-        <div v-loading="loading" class="overview-map-container">
-          <!--地图-->
-          <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" class="map-demo" @ready="readyMap"/>
+    <div v-loading="loading" class="overview-map-container">
+      <!--地图-->
+      <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" :valves="valves" :close-areas="closeAreas" class="map-demo" @ready="readyMap"/>
+    </div>
+    <div ref="smartdiv" class="smart-div">
+      <div>
+        <el-radio-group v-model="activeName" @change="handleClick">
+          <el-radio-button label="first">内涝分析</el-radio-button>
+          <el-radio-button label="second">燃气管线泄漏点</el-radio-button>
+          <el-radio-button label="third">热力管线泄漏点</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div ref="smarttab" class="smart-tab">
+        <!--<el-tabs v-model="activeName" @tab-click="handleClick">-->
+        <!--<el-tab-pane label="内涝分析" name="first">-->
+        <div v-show="activeName=='first'">
+          <el-table
+            :data="waterList"
+            :max-height="maxheight"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="waterRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </el-col>
-      <el-col :span="7">
-        <div class="smart-div">
-          <div class="smart-tab">
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-              <el-tab-pane label="内涝分析" name="first">
-                <el-table
-                  :data="waterList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="waterRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="燃气管线泄漏点" name="second">
-                <el-table
-                  :data="gasList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="gasRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="热力管线泄漏点" name="third">
-                <el-table
-                  :data="hotList"
-                  class="alarm-list-table"
-                  border
-                  @row-click="hotRowClick()">
-                  <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">
-                      {{ scope.row[column.value] }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-          <div v-if="wellObj!=null" class="smart-detail">
-            <div class="detail-header">详情</div>
-            <el-form ref="form" :model="wellObj" label-width="90px">
-              <el-form-item label="井编号">
-                <span class="detail-item">{{ wellObj.wellCode }}</span>
-              </el-form-item>
-              <el-form-item label="位置">
-                <span class="detail-item">{{ wellObj.position }}</span>
-              </el-form-item>
-              <el-form-item v-if="wellObj.liquidData" label="液位值">
-                <span class="detail-item">{{ wellObj.liquidData }}</span>
-              </el-form-item>
-              <el-form-item v-if="wellObj.strength" label="燃气浓度">
-                <span class="detail-item">{{ wellObj.strength }} %LEL </span>
-              </el-form-item>
-              <el-form-item label="影响面积">
-                <span class="detail-item">{{ wellObj.affectArea }} 平方公里</span>
-              </el-form-item>
-              <el-form-item label="创建时间">
-                <span class="detail-item">{{ wellObj.createTime }}</span>
-              </el-form-item>
-            </el-form>
-            <div v-show="activeName!=='first'" class="btn-group">
-              <el-button>查看阀门</el-button>
-              <el-button>查看关阀影响区域</el-button>
-            </div>
-          </div>
+        <!--</el-tab-pane>-->
+        <!--<el-tab-pane label="燃气管线泄漏点" name="second">-->
+        <div v-show="activeName=='second'">
+          <el-table
+            :data="gasList"
+            :max-height="maxheight1"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="gasRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </el-col>
-    </el-row>
+        <!--</el-tab-pane>-->
+        <div v-show="activeName=='third'">
+          <!--<el-tab-pane label="热力管线泄漏点" name="third">-->
+          <el-table
+            :data="hotList"
+            :max-height="maxheight2"
+            class="alarm-list-table"
+            border
+            stripe
+            @row-click="hotRowClick">
+            <el-table-column
+              type="index"
+              align="center"
+              width="40"/>
+            <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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--</el-tab-pane>-->
+        </div>
+        <!--</el-tabs>-->
+      </div>
+      <div v-if="wellObj!=null" class="smart-detail">
+        <div class="detail-header">详情</div>
+        <el-form ref="form" :model="wellObj" label-width="100px">
+          <el-form-item label="井编号">
+            <span class="detail-item">{{ wellObj.wellCode }}</span>
+          </el-form-item>
+          <el-form-item label="位置">
+            <span class="detail-item">{{ wellObj.position }}</span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='first'" label="液位值">
+            <span class="detail-item">{{ wellObj.analysisValue }} 米</span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='second'" label="燃气浓度">
+            <span class="detail-item">{{ wellObj.analysisValue }} %LEL </span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='third'" label="噪声值">
+            <span class="detail-item">{{ wellObj.analysisValue }} mg </span>
+          </el-form-item>
+          <el-form-item v-if="activeName=='first'" label="溢流影响面积">
+            <span class="detail-item">{{ parseFloat(wellObj.affectArea).toFixed(3) }} 平方米</span>
+          </el-form-item>
+          <el-form-item v-else label="泄漏影响面积">
+            <span class="detail-item">{{ parseFloat(wellObj.affectArea).toFixed(3) }} 平方米</span>
+          </el-form-item>
+          <el-form-item v-if="valveCodes!=''" label="关阀编号">
+            <span class="detail-item">{{ valveCodes }} </span>
+          </el-form-item>
+          <el-form-item v-if="closeAreaPlus!=0" label="关阀影响面积">
+            <span class="detail-item">{{ closeAreaPlus.toFixed(5) }} 平方公里 </span>
+          </el-form-item>
+          <el-form-item label="报警时间">
+            <span class="detail-item">{{ wellObj.alarmTime }}</span>
+          </el-form-item>
+        </el-form>
+        <div v-show="activeName!=='first'" class="btn-group">
+          <el-button type="primary" @click="showValves">查看阀门</el-button>
+          <el-button type="primary" @click="showCloseArea">查看关阀影响区域</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Cmap from '../../components/CMap/components/cmapSmart'
-import { getAlarmsNow } from '@/api/overview'
+import { getWaterAlarm, getGasAlarm, getHotAlarm } from '@/api/smartAnalysis'
+import { getWaterCompute, getGasCompute, getHotCompute } from '@/api/smartAnalysis'
+import { getValvesByWell, getAffectAreaByWell } from '@/api/smartAnalysis'
 export default {
   name: 'SmartOverview',
   components: { Cmap },
@@ -103,7 +142,14 @@
         {
           text: '井编号',
           value: 'wellCode',
-          align: 'center'
+          align: 'center',
+          width: 130
+        },
+        {
+          text: '井类型',
+          value: 'wellTypeName',
+          align: 'center',
+          width: 70
         },
         {
           text: '位置',
@@ -123,14 +169,46 @@
       waterList: [], // 内涝预警列表
       gasList: [], // 燃气管线泄漏点列表
       hotList: [], // 热力管线泄漏点列表
+      height: 100,
+      maxheight: 0,
+      maxheight1: 0,
+      maxheight2: 0,
       activeName: 'first', // 当前智能分析内容:内涝first，燃气管线泄漏second，热力管线泄漏third
-      wellObj: null,
+      wellObj: null, // 井对象
+      valves: [], // 阀门列表
+      closeAreas: [], // 关阀影响区域列表
       loading: false // 加载图标是否显示
     }
   },
+  computed: {
+    valveCodes() {
+      const valveCodes = []
+      for (const valve of this.valves) {
+        valveCodes.push(valve.valveCode)
+      }
+      return valveCodes.join(',')
+    },
+    closeAreaPlus() {
+      let result = 0
+      for (const area of this.closeAreas) {
+        result += area.area
+      }
+      return result
+    }
+  },
   activated() {
     this.refreshData()
   },
+  mounted() {
+    this.height = this.$refs.smartdiv.clientHeight - 295
+    // this.$refs.smarttab.style.height = this.height + 'px'
+    // const that = this
+    this.$nextTick(function() {
+      this.maxheight = this.$refs.smartdiv.clientHeight - 295
+      this.maxheight1 = this.$refs.smartdiv.clientHeight - 377
+      this.maxheight2 = this.$refs.smartdiv.clientHeight - 377
+    })
+  },
   methods: {
     // 地图准备好后的操作
     readyMap() {
@@ -142,116 +220,121 @@
     refreshData() {
       this.getWaterData()
     },
-    handleClick(tab, event) {
-      debugger
-      if (tab.name === 'first') {
+    handleClick() {
+      const tab = this.activeName
+      if (tab === 'first') {
         this.getWaterData()
-      } else if (tab.name === 'second') {
+      } else if (tab === 'second') {
         this.getGasData()
-      } else if (tab.name === 'third') {
+      } else if (tab === 'third') {
         this.getHotData()
       }
+      this.wellObj = null
     },
     getWaterData() {
-      getAlarmsNow().then(response => {
+      console.log('getWaterData')
+      getWaterAlarm().then(response => {
         if (response.code === 200) {
-          // 获取当前报警列表
-          // this.waterList = response.data
           // 模拟数据
-          this.waterList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.waterList = response.data
         }
       })
     },
     getGasData() {
-      getAlarmsNow().then(response => {
+      console.log('getGasData')
+      // getAlarmsNow().then(response => {
+      getGasAlarm().then(response => {
         if (response.code === 200) {
           // 获取当前报警列表
-          // this.waterList = response.data
-          // 模拟数据
-          this.gasList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.gasList = response.data
         }
       })
     },
     getHotData() {
-      getAlarmsNow().then(response => {
+      console.log('getHotData')
+      getHotAlarm().then(response => {
         if (response.code === 200) {
-          // 获取当前报警列表
-          // this.waterList = response.data
           // 模拟数据
-          this.hotList = [
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
-            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
-          ]
+          this.hotList = response.data
         }
       })
     },
     // 点击内涝列表项
     waterRowClick(row, column, event) {
-      console.log('alarmRowClick')
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: 116.4,
-        lat: 39.9,
-        radius: 100,
-        liquidData: '13',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      // 触发计算
+      const params = { wellId: row.wellId }
+      getWaterCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 点击燃气泄漏点列表项
     gasRowClick(row, column, event) {
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: '126.4',
-        lat: '39.9',
-        radius: '24',
-        strength: '3',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      // 触发计算
+      const params = { wellId: row.wellId }
+      getGasCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 点击热力泄漏点列表项
     hotRowClick(row, column, event) {
-      this.wellObj = {
-        wellCode: '11201231',
-        position: '永定路52号院',
-        lng: '116.4',
-        lat: '39.9',
-        radius: '24',
-        liquidData: '13',
-        affectArea: '23',
-        createTime: '2019-11-27 00:00:00'
-      }
-      this.$refs.map.renderAffectAP(this.wellObj)
+      // 触发计算
+      const loading = this.$loading({
+        lock: true,
+        text: '正在飞速计算中...',
+        // spinner: 'el-icon-loading',
+        background: 'hsla(0,0%,100%,.9)'
+      })
+      const params = { wellId: row.wellId }
+      getHotCompute(params).then(response => {
+        if (response.code === 200) {
+          loading.close()
+          this.wellObj = response.data
+        }
+      })
     },
     // 查看阀门
-    showValves(){
-
+    showValves() {
+      // const params = { wellId: 4474 }
+      const params = { wellId: this.wellObj.wellId }
+      getValvesByWell(params).then(response => {
+        if (response.code === 200) {
+          this.valves = response.data
+        }
+      })
     },
     // 关阀影响区域
-    showCloseArea(){
-
+    showCloseArea() {
+      const params = { wellId: this.wellObj.wellId }
+      getAffectAreaByWell(params).then(response => {
+        if (response.code === 200) {
+          this.closeAreas = response.data
+        }
+      })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+  $sideWidth: 380px;
 // 查询框
 .map-search-div{
   position: absolute;
@@ -264,11 +347,20 @@
   }
 }
 .smart-div{
+  width: $sideWidth;
+  float: left;
+  height: calc(100vh - 144px);
   .smart-tab{
+    margin-top:10px;
+    overflow-y: scroll;
     .el-tabs__content{
       max-height: calc(100vh - 295px - 144px - 60px);
       overflow-y: scroll;
     }
+    .el-tabs__nav-wrap{
+      display:none;
+    }
+
   }
   .smart-detail{
     /*margin-top: 20px;*/
@@ -276,10 +368,12 @@
     min-height:295px;
     .detail-header{
       height: 40px;
-      padding-left: 5px;
-      font-size:14px;
+      padding-left: 10px;
       line-height: 40px;
-      background-color: #f0f0f0;
+      background-color: #e6e6e6;
+      font-size: 14px;
+      color: #606266;
+      font-weight: 700;
     }
     .el-form{
       .el-form-item{
@@ -299,6 +393,9 @@
       text-align: center;
     }
   }
+  .alarm-list-table thead tr th{
+    /*background-color: #8cc5ff;*/
+  }
 }
 // 报警列表
 .map-alarm-div{
@@ -381,8 +478,9 @@
 }
 // 地图
 .overview-map-container{
-  width: 100%;
+  width: calc(100% - 380px);
   padding: 5px;
+  float: left;
   .map-demo{
     width: 100%;
     height: calc(100vh - 144px);
diff --git a/static/images/map_images/valve.png b/static/images/map_images/valve.png
new file mode 100644
index 0000000..c2cec1b
--- /dev/null
+++ b/static/images/map_images/valve.png
Binary files differ
diff --git a/static/images/map_images/valve1.png b/static/images/map_images/valve1.png
new file mode 100644
index 0000000..0514a17
--- /dev/null
+++ b/static/images/map_images/valve1.png
Binary files differ