diff --git a/src/router/index.js b/src/router/index.js
index 1c80473..b700dc8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,7 @@
 import { commenetRouters } from './modules/comment'
 import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
+import { controlRouters } from './modules/control'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)

diff --git a/src/router/index.js b/src/router/index.js
index 1c80473..b700dc8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,7 @@
 import { commenetRouters } from './modules/comment'
 import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
+import { controlRouters } from './modules/control'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
diff --git a/src/router/modules/control.js b/src/router/modules/control.js
new file mode 100644
index 0000000..c39b1cd
--- /dev/null
+++ b/src/router/modules/control.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const controlRouters = [
+  {
+    path: '/control',
+    name: 'control',
+    redirect: '/supControl',
+    hidden: true,
+    meta: {
+      title: '监督指挥子系统',
+      permission: ['/control'],
+      isSys: true
+    }
+  },
+  {
+    path: '/supControl',
+    component: Layout,
+    redirect: '/supControlDetail',
+    name: 'SupControl',
+    alwaysShow: true,
+    meta: {
+      title: '监督指挥',
+      permission: ['/supControl'],
+      sys: '/control'
+    },
+    children: [
+      {
+        path: '/supControlDetail',
+        component: () => import('@/views/supControl/supControl'),
+        name: 'SupControlDetail',
+        meta: { title: '监督指挥', icon: '', belongSys: '', permission: '/supControlDetail' }
+      }
+    ]
+  }
+]

diff --git a/src/router/index.js b/src/router/index.js
index 1c80473..b700dc8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,7 @@
 import { commenetRouters } from './modules/comment'
 import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
+import { controlRouters } from './modules/control'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
diff --git a/src/router/modules/control.js b/src/router/modules/control.js
new file mode 100644
index 0000000..c39b1cd
--- /dev/null
+++ b/src/router/modules/control.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const controlRouters = [
+  {
+    path: '/control',
+    name: 'control',
+    redirect: '/supControl',
+    hidden: true,
+    meta: {
+      title: '监督指挥子系统',
+      permission: ['/control'],
+      isSys: true
+    }
+  },
+  {
+    path: '/supControl',
+    component: Layout,
+    redirect: '/supControlDetail',
+    name: 'SupControl',
+    alwaysShow: true,
+    meta: {
+      title: '监督指挥',
+      permission: ['/supControl'],
+      sys: '/control'
+    },
+    children: [
+      {
+        path: '/supControlDetail',
+        component: () => import('@/views/supControl/supControl'),
+        name: 'SupControlDetail',
+        meta: { title: '监督指挥', icon: '', belongSys: '', permission: '/supControlDetail' }
+      }
+    ]
+  }
+]
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
new file mode 100644
index 0000000..e8c3a09
--- /dev/null
+++ b/src/views/supControl/supControl.vue
@@ -0,0 +1,478 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="6" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
+          <el-radio-button label="0">案卷</el-radio-button>
+          <el-radio-button label="1">人员</el-radio-button>
+          <el-radio-button label="2">部件</el-radio-button>
+        </el-radio-group>
+      </el-col>
+    </el-row>
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
+    <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
+      <el-row :gutter="10">
+        <el-col :span="20">
+          <el-form-item label="部件大类" prop="casetypeCode">
+            <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
+              <el-option
+                v-for="item in caseTypeOpts"
+                :key="item.id"
+                :label="item.typeName"
+                :value="item.typeCode"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="20">
+          <el-form-item label="部件小类" prop="casetypeDetailCode">
+            <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
+              <el-option
+                v-for="item in caseDetailTypeOpts"
+                :key="item.id"
+                :label="item.typeDetailName"
+                :value="item.typeDetailCode"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
+      <el-row :gutter="10">
+        <el-col :span="20">
+          <el-form-item label="人员分类" prop="casepersonCode">
+            <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
+              <el-option
+                v-for="item in casePersonOpts"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
+import { mapConfig, serverConfig } from '@/components/Map/ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const partsResultLayerId = 'partsResultLayer' // 兴趣点查询结果点集的图层id
+// const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'SupControl',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        PictureMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      parts: {
+        eorc: '2', // 类别
+        casetypeCode: '', // 部件大类编码,
+        casetypeDetailCode: '' // 部件小类编码
+      },
+      casepersonCode: '',
+      labelPosition: 'right',
+      caseTypeOpts: [], // 部件大类下拉框
+      casePersonOpts: [{
+        value: '1',
+        label: '监督人员'
+      }, {
+        value: '2',
+        label: '处置人员'
+      }], // 人员分类下拉框
+      caseDetailTypeOpts: [], // 部件小类下拉框
+      caseTypeCodeAuto: '', // 自动生成的案卷大类代码
+      caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
+      mapLoading: false,
+      queryEventSwitch: '0', // 0==查询案件；1==查询人员；2==查询部件
+      showPartsSelect: false,
+      showPersonSelect: false
+    }
+  },
+  computed: {
+    eorc() {
+      return this.parts.eorc
+    },
+    caseType() {
+      return this.parts.casetypeCode
+    },
+    caseTypeDetail() {
+      return this.parts.casetypeDetailCode
+    }
+    // casePerson() {
+    //   return this.casepersonCode
+    // }
+  },
+  watch: {
+    caseType(typeVal) {
+      this.cascaderCaseDetailType(typeVal)
+    },
+    caseTypeDetail(typeVal) {
+      var obj = this.caseDetailTypeOpts.find(function(item) {
+        return item.typeDetailCode === typeVal
+      })
+      this.addPartsPoints(obj.typeDetailName)
+    }
+    // casePerson(typeVal) {
+    // }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    switchContent: function() {
+      // 案卷（0）、人员（1）、部件（2），
+      if (this.queryEventSwitch === '2') {
+        this.showPartsSelect = true
+        this.showPersonSelect = false
+        this.cascaderCaseType('2')
+      } else if (this.queryEventSwitch === '1') {
+        this.showPersonSelect = true
+        this.showPartsSelect = false
+      }
+    },
+    // 级联查询部件大类
+    cascaderCaseType: function(eorc) {
+      // 前两行的作用是清除部件大类的当前值和select中的所有选项
+      this.caseTypeOpts = []
+      this.parts.casetypeCode = ''
+      // 以下两行的作用是清除部件小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.parts.casetypeDetailCode = ''
+      // 部件大类
+      if (eorc !== null && eorc.length > 0) {
+        getCaseType(eorc).then(response => {
+          for (const opt of response.data) {
+            this.caseTypeOpts.push(opt)
+
+            if (opt.typeCode === this.caseTypeCodeAuto) {
+              this.parts.casetypeCode = opt.typeCode
+            }
+          }
+        })
+      }
+    },
+    cascaderCaseDetailType: function(typeCode) {
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.parts.casetypeDetailCode = ''
+
+      // 根据code获取ID，进行级联查询
+      let typeId = 0
+      this.caseTypeOpts.forEach(item => {
+        if (item.typeCode === typeCode) {
+          typeId = item.id
+        }
+      })
+
+      if (typeId > 0) {
+        getCaseDetailType(typeId).then(response => {
+          for (const opt of response.data) {
+            this.caseDetailTypeOpts.push(opt)
+            if (opt.typeDetailCode === this.caseTypeDetailCodeAuto) {
+              this.parts.casetypeDetailCode = opt.typeDetailCode
+            }
+          }
+        })
+      }
+    },
+    clearPartsPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === partsResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
+    addPartsPoints: function(typeCode) {
+      // this.clearPartsPoint()
+      // 部件定位
+      const queryDev = this.layers.dxbjPoint.createQuery()
+      queryDev.returnGeometry = true
+      queryDev.outFields = ['PICTURE']
+      queryDev.where = "OBJNAME = '" + typeCode + "'"
+      const that = this
+      this.layers.dxbjPoint.queryFeatures(queryDev).then(function(response) {
+        if (response.features.length > 0) {
+          const results = response.features
+          const gLayer = new that.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+          results.forEach((item, index) => {
+            const point = new that.esriObj.Point(item.geometry.x, item.geometry.y) // 创建geometry对象
+            const marker = new that.esriObj.SimpleMarkerSymbol() // 创建marker标识
+            // marker属性
+            marker.color = '#35A0E7'
+            marker.style = 'circle'
+            // marker.style = item.attributes.PICTURE
+            marker.size = 10
+            marker.outline = {
+              color: [128, 128, 128, 0.5],
+              width: '1px'
+            }
+            // 创建graphic对象
+            const graphic = new that.esriObj.Graphic({
+              geometry: point,
+              symbol: marker
+            })
+            gLayer.id = partsResultLayerId
+            gLayer.add(graphic) // 图层上添加对象
+          })
+          that.map.add(gLayer) // 地图上添加图层
+        } else {
+          this.$message({
+            message: '查询无该类部件',
+            type: 'warning'
+          })
+        }
+      })
+    },
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/symbols/PictureMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          PictureMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.PictureMarkerSymbol = PictureMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      this.addBjLayers()
+      // this.addCasePointOnMap(this.longitude, this.latitude)
+      const that = this
+      this.view.on('click', function(event) {
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
+        if (that.queryEventSwitch === '2') {
+          // 部件定位
+          const queryDev = that.layers.dxbjPoint.createQuery()
+          // 定义查询的圆形范围，半径5米
+          const circle = new that.esriObj.Circle({
+            center: event.mapPoint,
+            radius: 1,
+            radiusUnit: 'meters'
+          })
+          queryDev.geometry = circle
+          queryDev.returnGeometry = true
+          queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS', 'DEPTNAME1', 'DEPTNAME2', 'DEPTNAME3']
+          that.layers.dxbjPoint.queryFeatures(queryDev)
+            .then(function(response) {
+              if (response.features.length > 0) {
+                const results = response.features
+
+                let content = ''
+                content = '部件编号：' + results[0].attributes.OBJID +
+                  '<p>万米网格：' + results[0].attributes.BGID +
+                  '<p>部件类型：' + results[0].attributes.OBJNAME +
+                  '<p>权属部门：' + results[0].attributes.DEPTNAME1 +
+                  '<p>责任部门：' + results[0].attributes.DEPTNAME2 +
+                  '<p>养护部门：' + results[0].attributes.DEPTNAME3
+
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: results[0].attributes.OBJNAME,
+                  content: content,
+                  location: event.mapPoint
+                })
+
+                // 查询所在社区和单元网格
+                const queryPos = that.layers.dx2wGrid.createQuery()
+                queryPos.geometry = that.view.toMap(event)
+                queryPos.returnGeometry = true
+                queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                that.layers.dx2wGrid.queryFeatures(queryPos)
+                  .then(function(response) {
+                    const result = response.features[0].attributes
+
+                    // 赋值
+                    that.longitude = lon
+                    that.latitude = lat
+                    that.gridId = result.BGID
+                    that.communityId = result.COMMUID
+                    that.communityName = result.COMMUNAME
+                  })
+              } else {
+                that.$message({
+                  message: '没有查询到部件，请重新定位',
+                  type: 'warning'
+                })
+              }
+            })
+        }
+      })
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      this.map.add(this.layers.dx2wGrid)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  /* @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css'; */
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:80vh;
+    width: 100%;
+    margin-top: 0px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+  .form{
+    position: fixed;
+    z-index: 9999;
+    top: 190px;
+  }
+</style>
+