diff --git a/.env.production b/.env.production
index 5a9ba7d..3a88bb5 100644
--- a/.env.production
+++ b/.env.production
@@ -3,5 +3,6 @@ ENV = 'production'
 
 # base api
 VUE_APP_BASE_API = ''
+VUE_APP_WB_API = 'a.wms.picaiba.com'
 VUE_APP_REPORT_DESIGN_URL = '/ureport/designer'
 VUE_APP_REPORT_VIEW_URL = '/ureport/preview'
diff --git a/src/api/00a-spc.js b/src/api/00a-spc.js
new file mode 100644
index 0000000..bd103ef
--- /dev/null
+++ b/src/api/00a-spc.js
@@ -0,0 +1,230 @@
+import request from '@/utils/request'
+
+export function AlarmCleared() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendAlarmClearedEvent',
+    method: 'post'
+  })
+}
+
+export function AlarmDetected() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendAlarmDetectedEvent',
+    method: 'post'
+  })
+}
+
+export function CompleteProcessFlow() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendCompleteProcessFlowEvent',
+    method: 'post'
+  })
+}
+
+export function ControlStateLocal() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendControlStateLocalEvent',
+    method: 'post'
+  })
+}
+
+export function ControlStateRemote() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendControlStateRemoteEvent',
+    method: 'post'
+  })
+}
+
+export function E10StateChanged() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendE10StateChangedEvent',
+    method: 'post'
+  })
+}
+
+export function EmptyCassettereport() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendEmptyCassettereportEvent',
+    method: 'post'
+  })
+}
+
+export function EquipmentOffline() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendEquipmentOfflineEvent',
+    method: 'post'
+  })
+}
+
+export function MaintenancePlan() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendMaintenancePlanEvent',
+    method: 'post'
+  })
+}
+
+export function MaintenanceRecord() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendMaintenanceRecordEvent',
+    method: 'post'
+  })
+}
+
+export function MaterialReceived() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendMaterialReceivedEvent',
+    method: 'post'
+  })
+}
+
+export function MaterialRemoved() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendMaterialRemovedEvent',
+    method: 'post'
+  })
+}
+
+export function OKsubstratereport() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendOKsubstratereportEvent',
+    method: 'post'
+  })
+}
+
+export function PowerConsumption() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendPowerConsumptionEvent',
+    method: 'post'
+  })
+}
+
+export function ProcessingCompleted() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendProcessingCompletedEvent',
+    method: 'post'
+  })
+}
+
+export function ProcessingStarted() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendProcessingStartedEvent',
+    method: 'post'
+  })
+}
+
+export function ProcessingStopped() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendProcessingStoppedEvent',
+    method: 'post'
+  })
+}
+
+export function QCPChange() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendQCPChangeEvent',
+    method: 'post'
+  })
+}
+
+export function RepairRecord() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendRepairRecordEvent',
+    method: 'post'
+  })
+}
+
+export function Scrapsubstratereport() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendScrapsubstratereportEvent',
+    method: 'post'
+  })
+}
+
+export function ShuttleMovementFinished() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendShuttleMovementFinishedEvent',
+    method: 'post'
+  })
+}
+
+export function ShuttleMovementStart() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendShuttleMovementStartEvent',
+    method: 'post'
+  })
+}
+
+export function SpoolTransmitFailure() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendSpoolTransmitFailureEvent',
+    method: 'post'
+  })
+}
+
+export function SpoolingActivated() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendSpoolingActivatedEvent',
+    method: 'post'
+  })
+}
+
+export function SpoolingDeactivated() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendSpoolingDeactivatedEvent',
+    method: 'post'
+  })
+}
+
+export function DisableEnableCommunication(data) {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendDisableEnableCommunication',
+    method: 'post',
+    headers: {
+      'Content-Type': 'text/plain'
+    },
+    data
+  })
+}
+
+export function getCommunicationState() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/communicationState/get',
+    method: 'post'
+  })
+}
+
+export function getcontrollerState() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/controllerState/get',
+    method: 'post'
+  })
+}
+
+export function sendControllerState(data) {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendControllerState',
+    method: 'post',
+    headers: {
+      'Content-Type': 'text/plain'
+    },
+    data
+  })
+}
+
+export function sendEqpState(data) {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendEqpState',
+    method: 'post',
+    headers: {
+      'Content-Type': 'text/plain'
+    },
+    data
+  })
+}
+
+export function sendReportLinkedEventAndVid() {
+  return request({
+    url: '/cigs-00a/IL1testcontroller/post/sendReportLinkedEventAndVid',
+    method: 'post'
+  })
+}
diff --git a/src/lang/i18n.js b/src/lang/i18n.js
index b21f979..67ed269 100644
--- a/src/lang/i18n.js
+++ b/src/lang/i18n.js
@@ -267,6 +267,14 @@ export default {
       zh: '首页',
       en: 'Home'
     },
+    aSpc: {
+      zh: 'EAP',
+      en: 'EAP'
+    },
+    spcControl: {
+      zh: 'EAP控制',
+      en: 'EAP Control'
+    },
     basic: {
       zh: '系统管理',
       en: 'System Manager',
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 1f5f967..2905417 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -16,6 +16,7 @@
         {{ 'navbar.homepage' | i18nFilter }}
       </div>
       <el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="avatar-container right-menu-item hover-effect" trigger="click">
+        <el-dropdown-menu />
         <el-badge :hidden="alarmNum>0?false:true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm">
           <svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
         </el-badge>
diff --git a/src/router/index.js b/src/router/index.js
index 2a18a46..102892e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -92,6 +92,28 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/spc',
+    component: Layout,
+    redirect: '/spc',
+    name: 'spc',
+    meta: { title: routerTitle.aSpc?.[language] || routerTitle.aSpc.en, icon: 'form', iconPart: 'ArtManager', affix: true, required: true, requireToken: true },
+    children: [
+      {
+        path: 'spc',
+        component: () => import('@/views/00a-spc/index'),
+        name: 'spc',
+        meta: { title: routerTitle.aSpc?.[language] || routerTitle.aSpc.en, icon: 'form', affix: true, required: true, requireToken: true, noCache: true }
+      },
+      {
+        path: 'spcControl',
+        component: () => import('@/views/00a-spc/spcControl'),
+        name: 'spcControl',
+        hidden: true,
+        meta: { title: routerTitle.spcControl?.[language] || routerTitle.spcControl.en, icon: 'form', affix: true, required: true, requireToken: true, noCache: true }
+      }
+    ]
+  },
   {
     path: '/',
     component: Layout,
diff --git a/src/views/00a-spc/index.vue b/src/views/00a-spc/index.vue
new file mode 100644
index 0000000..d2ef6d8
--- /dev/null
+++ b/src/views/00a-spc/index.vue
@@ -0,0 +1,115 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-21 15:07:28
+ * @Description:
+-->
+<template>
+  <div>
+    <div class="btn-container">
+      <div v-for="(item,index) in btnList" :key="index" class="btndiv">
+        <el-card class="box-card" @click.native="sendInfo(item)">{{ item }}</el-card>
+      </div>
+    </div>
+    <spc-control />
+  </div>
+</template>
+
+<script>
+import * as spcApi from '@/api/00a-spc'
+import spcControl from './spcControl'
+// , handleLimit
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+export default {
+  name: 'Aspc',
+  components: { spcControl },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      btnList: [
+        'AlarmCleared',
+        'AlarmDetected',
+        'CompleteProcessFlow',
+        'ControlStateLocal',
+        'ControlStateRemote',
+        'E10StateChanged',
+        'EmptyCassettereport',
+        'EquipmentOffline',
+        'MaintenancePlan',
+        'MaintenanceRecord',
+        'MaterialReceived',
+        'MaterialRemoved',
+        'OKsubstratereport',
+        'PowerConsumption',
+        'ProcessingCompleted',
+        'ProcessingStarted',
+        'ProcessingStopped',
+        'QCPChange',
+        'RepairRecord',
+        'Scrapsubstratereport',
+        'ShuttleMovementFinished',
+        'ShuttleMovementStart',
+        'SpoolTransmitFailure',
+        'SpoolingActivated',
+        'SpoolingDeactivated'
+      ]
+    }
+  },
+  created() {
+  },
+  methods: {
+    sendInfo(name) {
+      spcApi[name]().then(response => {
+        this.$message({
+          message: this.$t('module.basicData.visual.success'),
+          type: 'success',
+          duration: 1500
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.btn-container{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.btndiv{
+  width: 20%;
+  height: 100px;
+  margin: auto;
+}
+.box-card{
+  background-color: #3e8ef7;
+  margin: 10px;
+  color: white;
+}
+</style>
diff --git a/src/views/00a-spc/spcControl.vue b/src/views/00a-spc/spcControl.vue
new file mode 100644
index 0000000..fd0cf8d
--- /dev/null
+++ b/src/views/00a-spc/spcControl.vue
@@ -0,0 +1,274 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-22 16:34:32
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-position="left"
+      >
+        <el-col :span="4">
+          <el-form-item label="communication状态" prop="communicationState" required>
+            <el-switch
+              v-model="dataForm.communicationState"
+              :active-value="1"
+              :inactive-value="0"
+              @change="switchChange()"
+            />
+          </el-form-item>
+          <div v-show="communicationShow">Result ={{ communicationStatus }}</div>
+        </el-col>
+        <el-col :span="6" :offset="1">
+          <el-form-item label="eqpState" prop="eqpState">
+            <el-select v-model="dataForm.eqpState" placeholder="请选择下拉选择" clearable @change="eqpStateChange">
+              <el-option
+                v-for="(item, index) in eqpStateArr"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <div v-show="eqpStatusShow">Result ={{ eqpStatus }}</div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="controllerState" prop="controllerState">
+            <el-select v-model="dataForm.controllerState" placeholder="请选择下拉选择" clearable @change="controllerStateChange">
+              <el-option
+                v-for="(item, index) in controllerStateArr"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <span :class="dataForm.controllerState === 1? 'waring' : 'normal'">{{ controllerInfo }}</span>
+            <div v-show="controllerStatusShow">Result ={{ controllerStatus }}</div>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <el-col :span="3">
+        <el-button type="primary" @click="sendReportLinkedEventAndVid()"> ReportLinkedEventAndVid </el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  DisableEnableCommunication,
+  getCommunicationState,
+  getcontrollerState,
+  sendEqpState,
+  sendControllerState,
+  sendReportLinkedEventAndVid
+} from '@/api/00a-spc'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+export default {
+  name: 'Aspc',
+  components: { },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      dataForm: {
+        communicationState: 0,
+        eqpState: undefined,
+        controllerState: undefined
+      },
+      controllerStatus: '',
+      eqpStatus: '',
+      communicationStatus: '',
+      communicationShow: false,
+      eqpStatusShow: false,
+      controllerStatusShow: false,
+      controllerInfo: '',
+      rules: {
+      },
+      eqpStateArr: [{
+        'label': 'local',
+        'value': 4
+      }, {
+        'label': 'remote',
+        'value': 5
+      }],
+      controllerStateArr: [{
+        'label': 'offline',
+        'value': 1
+      }, {
+        'label': 'online',
+        'value': 2
+      }],
+      websock: '',
+      url: '',
+      wbData: {}
+    }
+  },
+  created() {
+    this.getState()
+    this.url = process.env.VUE_APP_WB_API
+    this.initWebSocket()
+    getCommunicationState().then(res => {
+      this.dataForm.communicationState = res.data.communicationState
+    })
+  },
+  destroyed() {
+    // 页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close() // 关闭websocket
+    }
+  },
+  methods: {
+    switchChange() {
+      this.communicationShow = false
+      DisableEnableCommunication(this.dataForm.communicationState).then(response => {
+        this.$message({
+          message: this.$t('module.basicData.visual.success'),
+          type: 'success',
+          duration: 1500
+        })
+      })
+    },
+    eqpStateChange() {
+      this.eqpStatusShow = false
+      sendEqpState(this.dataForm.eqpState).then(response => {
+        this.$message({
+          message: this.$t('module.basicData.visual.success'),
+          type: 'success',
+          duration: 1500
+        })
+      })
+    },
+    controllerStateChange() {
+      this.controllerStatusShow = false
+      sendControllerState(this.dataForm.controllerState).then(response => {
+        this.$message({
+          message: this.$t('module.basicData. visual.success'),
+          type: 'success',
+          duration: 1500
+        })
+      })
+    },
+    getState() {
+      getcontrollerState().then(res => {
+        if (res.data.controllerState === 1) {
+          this.controllerInfo = 'offline'
+        } else if (res.data.eqpState === 4) {
+          this.controllerInfo = 'local'
+        } else if (res.data.eqpState === 5) {
+          this.controllerInfo = 'remote'
+        }
+        this.dataForm.eqpState = res.data.eqpState
+        this.dataForm.controllerState = res.data.controllerState
+      })
+    },
+    sendReportLinkedEventAndVid() {
+      sendReportLinkedEventAndVid().then(response => {
+        this.$message({
+          message: this.$t('module.basicData.visual.success'),
+          type: 'success',
+          duration: 1500
+        })
+      })
+    },
+    initWebSocket() {
+      // 初始化weosocket
+      const path = `ws://${this.url}/opcua/websocket/1`
+      this.websock = new WebSocket(path)
+      this.websock.onmessage = this.websocketonmessage
+      this.websock.onopen = this.websocketonopen
+      this.websock.onerror = this.websocketonerror
+      this.websock.onclose = this.websocketclose
+    },
+    websocketonopen() {
+      // 连接建立之后执行send方法发送数据
+      // this.websocketsend(JSON.stringify('2'))
+    },
+    websocketonerror() {
+      // 连接建立失败重连
+      this.initWebSocket()
+    },
+    websocketonmessage(e) {
+      // 数据接收
+      this.wbData = JSON.parse(e.data)
+      if (this.wbData.eqpResult) {
+        this.eqpStatus = this.wbData.eqpResult
+        this.dataForm.eqpState = parseInt(this.wbData.eqpState)
+        this.eqpStatusShow = true
+      } else if (this.wbData.vidResult) {
+        this.controllerStatus = this.wbData.vidResult
+        this.dataForm.controllerState = parseInt(this.wbData.controllerState)
+        if (this.wbData.controllerState === '1') {
+          this.controllerInfo = 'offline'
+        } else if (this.wbData.eqpState === '4') {
+          this.controllerInfo = 'local'
+        } else if (this.wbData.eqpState === '5') {
+          this.controllerInfo = 'remote'
+        }
+        this.controllerStatusShow = true
+      } else {
+        this.communicationStatus = this.wbData.communicationResult
+        this.dataForm.communicationState = parseInt(this.wbData.communicationState)
+        this.communicationShow = true
+      }
+    },
+    websocketsend(val) {
+      // 数据发送
+      this.websock.send(val)
+    },
+    websocketclose(e) {
+      // 关闭
+      console.log('断开连接', e)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container{
+  width: 100%;
+  height: 200px;
+}
+.waring{
+  padding: 5px;
+  border-radius: 5px;
+  background-color: #F56C6C;
+  color: white;
+}
+.normal{
+  padding: 5px;
+  border-radius: 5px;
+  background-color: #67C23A;
+  color: white;
+}
+</style>