diff --git a/src/api/device/index.ts b/src/api/device/index.ts
index 27feca4..c82a8a2 100644
--- a/src/api/device/index.ts
+++ b/src/api/device/index.ts
@@ -62,9 +62,9 @@ export function editConfig(data: any) {
 /**
  * 获取图表详情设备筛选项
  */
-export function getDevices(): AxiosPromise<[]> {
+export function getDevices(params: number): AxiosPromise<[]> {
   return request({
-    url: '/dc/dcDeviceEcharts/getDevices',
+    url: '/dc/dcDeviceEcharts/getDevices/' + params,
     method: 'get'
   });
 }
diff --git a/src/api/device/types.ts b/src/api/device/types.ts
index 27f432e..cf441b3 100644
--- a/src/api/device/types.ts
+++ b/src/api/device/types.ts
@@ -37,8 +37,9 @@ export interface headerVo {
   label: string;
   value: string;
   type: string;
-  ctrlFlag: string;
+  ctrlFlag: number;
   paramUnit: string;
+  ctrlpro: any;
 }
 export interface deetsVo {
   centerDeviceCode: string;
diff --git a/src/api/waring/index.ts b/src/api/waring/index.ts
index b6b0ca2..f5a99d2 100644
--- a/src/api/waring/index.ts
+++ b/src/api/waring/index.ts
@@ -7,10 +7,22 @@ import { waringVo } from './types';
  *
  * @param params  status状态
  */
-export function getWarList(params: number): AxiosPromise<waringVo> {
+// export function getWarList(params: number): AxiosPromise<waringVo> {
+//   return request({
+//     url: '/dc/dcBusiAlertJob/list/'+params,
+//     method: 'get'
+//   });
+// }
+/**
+ * 获取报警列表
+ *
+ * @param data
+ */
+export function getWarList(data: any) {
   return request({
-    url: '/dc/dcBusiAlertJob/list/'+params,
-    method: 'get'
+    url: '/dc/dcBusiAlertJob/list/vo',
+    method: 'post',
+    data: data
   });
 }
 
@@ -22,6 +34,6 @@ export function getWarList(params: number): AxiosPromise<waringVo> {
 export function process(id: string) {
   return request({
     url: '/dc/dcBusiAlertJob/process/' + id,
-    method: 'post',
+    method: 'post'
   });
 }
diff --git a/src/assets/images/device/liangfaliangqu.gif b/src/assets/images/device/liangfaliangqu.gif
new file mode 100644
index 0000000..82f7746
Binary files /dev/null and b/src/assets/images/device/liangfaliangqu.gif differ
diff --git a/src/assets/images/device/liangfaliangquyibeng.gif b/src/assets/images/device/liangfaliangquyibeng.gif
new file mode 100644
index 0000000..664ffbf
Binary files /dev/null and b/src/assets/images/device/liangfaliangquyibeng.gif differ
diff --git a/src/assets/images/device/sanfasanqu.gif b/src/assets/images/device/sanfasanqu.gif
new file mode 100644
index 0000000..73d4586
Binary files /dev/null and b/src/assets/images/device/sanfasanqu.gif differ
diff --git a/src/assets/images/device/sanfasanquyibeng.gif b/src/assets/images/device/sanfasanquyibeng.gif
new file mode 100644
index 0000000..46b18e4
Binary files /dev/null and b/src/assets/images/device/sanfasanquyibeng.gif differ
diff --git a/src/assets/images/device/yifaliangqu.gif b/src/assets/images/device/yifaliangqu.gif
new file mode 100644
index 0000000..328519b
Binary files /dev/null and b/src/assets/images/device/yifaliangqu.gif differ
diff --git a/src/assets/images/device/yifaliangquyibeng.gif b/src/assets/images/device/yifaliangquyibeng.gif
new file mode 100644
index 0000000..89c263a
Binary files /dev/null and b/src/assets/images/device/yifaliangquyibeng.gif differ
diff --git a/src/assets/images/device/yifasanqu.gif b/src/assets/images/device/yifasanqu.gif
new file mode 100644
index 0000000..1fb9251
Binary files /dev/null and b/src/assets/images/device/yifasanqu.gif differ
diff --git a/src/assets/images/device/yifayiqu.gif b/src/assets/images/device/yifayiqu.gif
new file mode 100644
index 0000000..9745ad2
Binary files /dev/null and b/src/assets/images/device/yifayiqu.gif differ
diff --git a/src/assets/images/device/yifayiquyibeng.gif b/src/assets/images/device/yifayiquyibeng.gif
new file mode 100644
index 0000000..22c1d9f
Binary files /dev/null and b/src/assets/images/device/yifayiquyibeng.gif differ
diff --git a/src/assets/images/device/yifaysanquyibeng.gif b/src/assets/images/device/yifaysanquyibeng.gif
new file mode 100644
index 0000000..f2b8b71
Binary files /dev/null and b/src/assets/images/device/yifaysanquyibeng.gif differ
diff --git a/src/main.ts b/src/main.ts
index e6f2d51..69e09d7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,7 +12,7 @@ import '@/permission';
 import i18n from '@/lang/index';
 
 //本地模拟数据
-import '@/mock/mockServer'
+import '@/mock/mockServer';
 
 // 本地SVG图标
 import 'virtual:svg-icons-register';
@@ -20,7 +20,7 @@ import 'virtual:svg-icons-register';
 // 样式
 import '@/styles/index.scss';
 import 'element-plus/theme-chalk/dark/css-vars.css';
-import '@/assets/iconfont/iconfont.css'
+import '@/assets/iconfont/iconfont.css';
 import 'vxe-table/lib/style.css';
 import 'animate.css/animate.min.css';
 
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 67e581d..5742656 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -2,6 +2,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const ElNotification: typeof import('element-plus/es')['ElNotification']
@@ -272,6 +273,7 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 83ac5bd..d39bf46 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -25,6 +25,7 @@ declare module '@vue/runtime-core' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -45,10 +46,13 @@ declare module '@vue/runtime-core' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NMenu: typeof import('naive-ui')['NMenu']
     NModal: typeof import('naive-ui')['NModal']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpin: typeof import('naive-ui')['NSpin']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTooltip: typeof import('naive-ui')['NTooltip']
     Pagination: typeof import('./../components/Pagination/index.vue')['default']
     RightPanel: typeof import('./../components/RightPanel/index.vue')['default']
diff --git a/src/views/details/index.scss b/src/views/details/index.scss
index f86e1ef..ffdea77 100644
--- a/src/views/details/index.scss
+++ b/src/views/details/index.scss
@@ -1,10 +1,27 @@
 .details {
   padding: 1.5rem;
+  .header {
+    margin-bottom: 1.5rem;
+  }
   .search {
     margin-bottom: 1.5rem;
+    :deep(.el-card__body) {
+      padding: 20px 20px 0 20px;
+    }
+    .cardHeader {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .tooltips {
+        width: 36px;
+        height: 36px;
+        border-radius: 0px 0px 0px 0px;
+        opacity: 1;
+      }
+    }
     .searchForm {
       .item {
-        margin-bottom: 0;
+        margin-bottom: 20px;
       }
     }
   }
diff --git a/src/views/details/index.vue b/src/views/details/index.vue
index eb73d74..9e8a01a 100644
--- a/src/views/details/index.vue
+++ b/src/views/details/index.vue
@@ -1,6 +1,23 @@
 <template>
   <div class="details">
     <el-card class="search" shadow="always">
+      <template #header>
+        <div class="cardHeader">
+          <span>搜索筛选项</span>
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <n-button class="tooltips" circle quaternary @click="lineClick">
+                <template #icon>
+                  <n-icon>
+                    <ReturnDownBack />
+                  </n-icon>
+                </template>
+              </n-button>
+            </template>
+            返回上一页
+          </n-tooltip>
+        </div>
+      </template>
       <el-form class="searchForm" ref="searchRef" :rules="rules" :inline="true" :model="searchForm" label-width="100px">
         <el-form-item class="item" label="时间" prop="time">
           <el-date-picker
@@ -72,7 +89,7 @@
           </el-select>
         </el-form-item>
         <el-form-item class="item">
-          <el-button type="primary" @click="submitForm(searchRef)">确认</el-button>
+          <el-button type="primary" @click="submitForm(searchRef)">搜索</el-button>
           <el-button @click="resetForm(searchRef)">重置</el-button>
         </el-form-item>
       </el-form>
@@ -87,16 +104,23 @@
 <script lang="ts" setup>
 import * as echarts from 'echarts';
 import { Ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { randomColor } from '@/utils/index';
 const stackedRef: Ref<HTMLElement | any> = ref(null);
 import type { FormInstance, FormRules } from 'element-plus';
+import { ReturnDownBack } from '@vicons/ionicons5';
 
 import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
 import { deetsVo, partitionVo, parameterVo, seriesVo } from '@/api/device/types';
 
+const router = useRouter();
+const route = useRoute();
+
 const searchRef = ref<FormInstance>();
 const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
 const multipleLimit = ref(0);
 const parameterLimit = ref(0);
+const deptId = ref(0);
 // const seriesData = ref<seriesVo[]>();
 const searchForm = reactive({
   time: '',
@@ -177,11 +201,18 @@ const options = {
     bottom: '50',
     containLabel: true
   },
-  // toolbox: {
-  //   feature: {
-  //     restore: {}
-  //   }
-  // },
+  toolbox: {
+    show: true,
+    feature: {
+      dataZoom: {
+        yAxisIndex: 'none'
+      },
+      // dataView: { readOnly: false },
+      magicType: { type: ['line', 'bar'] },
+      restore: {},
+      saveAsImage: {}
+    }
+  },
   dataZoom: [
     {
       type: 'inside',
@@ -1046,6 +1077,7 @@ const options2 = {
 };
 
 onMounted(() => {
+  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
   getDevice();
   getParam();
   getPortion();
@@ -1053,10 +1085,15 @@ onMounted(() => {
   // chart.setOption(options2);
 });
 
+function lineClick() {
+  //返回上一页
+  router.go(-1);
+}
+
 function getDevice() {
   //获取设备
-  const params = {};
-  getDevices().then((res: any) => {
+  const params = deptId.value;
+  getDevices(params).then((res: any) => {
     if (res.code === 200) {
       deviceData.value = res.data;
     }
@@ -1068,6 +1105,10 @@ function getParam() {
   getParams().then((res: any) => {
     if (res.code === 200) {
       parameterData.value = res.data;
+      for (let i = 0; i < res.data.length - 6; i++) {
+        colors.push(randomColor());
+      }
+      console.log('colors--', colors);
     }
   });
 }
@@ -1097,6 +1138,13 @@ function init(data: any) {
   options.series = [];
   if (data.mainInfos.length === 0) {
     options.title.text = '暂无数据';
+    options.title.x = 'center';
+    options.title.y = 'center';
+    const chart = echarts.init(stackedRef.value);
+    chart.clear();
+    chart.resize();
+    console.log('options--', options);
+    chart.setOption(options);
     return;
   }
   options.title.text = data.additionalInfo.name;
diff --git a/src/views/monitoring/components/header.vue b/src/views/monitoring/components/header.vue
index 701d1c2..4db10d8 100644
--- a/src/views/monitoring/components/header.vue
+++ b/src/views/monitoring/components/header.vue
@@ -14,39 +14,39 @@
   <div class="seeting">
     <n-tooltip trigger="hover">
       <template #trigger>
-        <n-button class="tooltips" circle quaternary @click="lineClick">
+        <n-button class="tooltips" circle quaternary @click="returnBack">
           <template #icon>
             <n-icon>
-              <ChartLine />
+              <ReturnDownBack />
             </n-icon>
           </template>
         </n-button>
       </template>
-      图表
+      返回上一页
     </n-tooltip>
-    <n-tooltip trigger="hover" v-if="settingShow">
+    <n-tooltip trigger="hover">
       <template #trigger>
-        <n-button class="tooltips" circle quaternary @click="showClick">
+        <n-button class="tooltips" circle quaternary @click="lineClick">
           <template #icon>
             <n-icon>
-              <Settings />
+              <ChartLine />
             </n-icon>
           </template>
         </n-button>
       </template>
-      显示项
+      图表
     </n-tooltip>
-    <n-tooltip trigger="hover">
+    <n-tooltip trigger="hover" v-if="settingShow">
       <template #trigger>
-        <n-button class="tooltips" circle quaternary @click="returnBack">
+        <n-button class="tooltips" circle quaternary @click="showClick">
           <template #icon>
             <n-icon>
-              <Power />
+              <Settings />
             </n-icon>
           </template>
         </n-button>
       </template>
-      返回上一页
+      显示项
     </n-tooltip>
     <n-tooltip trigger="hover" v-if="warningShow">
       <template #trigger>
@@ -115,6 +115,14 @@
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination
+        class="waringPagination"
+        layout="prev, pager, next"
+        :current-page.sync="params.pageNum"
+        :page-size="params.pageSize"
+        :total="params.total"
+        @current-change="handleCurrentChange"
+      />
       <div class="warClose" @click="warClose">
         <CloseCircleOutline />
       </div>
@@ -127,7 +135,7 @@ import { getWeather } from '@/api/user/index';
 import { getWarList, process } from '@/api/waring/index';
 import { waringVo } from '@/api/waring/types';
 import { Filter, Maximize, Settings, Power, Bell, ChartLine } from '@vicons/tabler';
-import { CloseCircleOutline } from '@vicons/ionicons5';
+import { CloseCircleOutline, ReturnDownBack } from '@vicons/ionicons5';
 import { useDateFormat, useNow } from '@vueuse/core';
 import { uniqueArrayObject } from '@/utils/index';
 import mitt from '@/plugins/bus';
@@ -145,6 +153,12 @@ const waringModal = ref(false);
 const waringData = ref<waringVo[]>([]);
 const waringList = ref<waringVo[]>([]);
 const routerType = ref('');
+const deptId = ref(0);
+const params = reactive({
+  total: 10,
+  pageSize: 10,
+  pageNum: 1
+});
 
 const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' });
 
@@ -169,6 +183,7 @@ const props = defineProps({
 });
 
 onMounted(() => {
+  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
   routerType.value = route.query?.id === undefined ? '0' : '1';
   getWeatherData();
 });
@@ -213,20 +228,17 @@ function waringClick() {
 }
 
 function lineClick() {
-  //图表
+  //跳转图表
   router.push({
     path: '/details'
   });
 }
 
-// function getWeatherData() {
-//     //获取天气
-//     getWeather().then((res: any) => {
-//         if (res.code === 200) {
-//             weatherData.value = res.data;
-//         }
-//     });
-// }
+function handleCurrentChange(val: any) {
+  //点击分页
+  params.pageNum = val;
+  getwaringList();
+}
 
 function getWeatherData() {
   //获取天气
@@ -252,10 +264,19 @@ function waringMore() {
   getwaringList();
 }
 function getwaringList() {
-  const params = 0;
-  getWarList(params).then((res: any) => {
+  //报警列表
+  const paramsr = {
+    beginTime: '',
+    endTime: '',
+    orgCode: deptId.value,
+    params
+  };
+  getWarList(paramsr).then((res: any) => {
     if (res.code === 200) {
       waringList.value = res.rows;
+      params.total = res.total;
+      // page.pageSize = res.size;
+      // page.pageSize = res.current;
     }
   });
 }
@@ -377,4 +398,25 @@ function warClose() {
     margin-left: 10px;
   }
 }
+
+.waringModal {
+  .waringPagination {
+    justify-content: right;
+    margin-top: 5px;
+    :deep(button) {
+      color: #b1e3ff;
+      background: transparent;
+    }
+    :deep(.el-pager) {
+      .number,
+      .more {
+        color: #b1e3ff;
+        background: transparent;
+      }
+      .number.is-active {
+        color: #409eff;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/monitoring/devicemanage/components/main.vue b/src/views/monitoring/devicemanage/components/main.vue
index caf10eb..48d46de 100644
--- a/src/views/monitoring/devicemanage/components/main.vue
+++ b/src/views/monitoring/devicemanage/components/main.vue
@@ -24,7 +24,10 @@
       <div class="card card_f">
         <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
       </div>
-      <img class="deviceImg" src="@/assets/images/device01.gif" />
+      <!-- <div class="switch switch_a" @click="switchClick('001', 0)"></div> -->
+      <!-- <div class="switch switch_b" @click="switchClick('065', 0)"></div> -->
+      <img class="deviceImg" :src="deviceImg" />
+      <!-- <img class="deviceImg" src="@/assets/images/device01.gif" /> -->
     </div>
     <div class="deviceImg deviceImgB" v-if="zoneType === 2">
       <div class="card card_a">
@@ -60,7 +63,8 @@
       <div class="card card_f">
         <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
       </div>
-      <img class="deviceImg" src="@/assets/images/device02.gif" />
+      <img class="deviceImg" :src="deviceImg" />
+      <!-- <img class="deviceImg" src="@/assets/images/device02.gif" /> -->
     </div>
     <div class="deviceImg deviceImgC" v-if="zoneType === 3">
       <div class="card card_a">
@@ -106,47 +110,9 @@
       <div class="card card_f">
         <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
       </div>
-      <img class="deviceImg" src="@/assets/images/device03.gif" />
+      <img class="deviceImg" :src="deviceImg" />
+      <!-- <img class="deviceImg" src="@/assets/images/device03.gif" /> -->
     </div>
-    <!-- <div class="deviceImg deviceImgA" v-if="zoneType===1">
-      <div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
-      <div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
-      <div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
-      <div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
-      <div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
-      <div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
-      <div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
-      <div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
-      <img class="deviceImg" src="@/assets/images/device01.gif" />
-    </div>
-    <div class="deviceImg deviceImgB" v-if="zoneType===2">
-      <div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
-      <div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
-      <div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
-      <div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
-      <div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
-      <div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
-      <div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
-      <div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
-      <div class="dataInfo dataInfo8" v-html="doubleCount('047',1)"></div>
-      <div class="dataInfo dataInfo9" v-html="doubleCount('045',1)"></div>
-      <img class="deviceImg" src="@/assets/images/device02.jpg" />
-    </div>
-    <div class="deviceImg deviceImgC" v-if="zoneType===3">
-      <div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
-      <div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
-      <div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
-      <div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
-      <div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
-      <div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
-      <div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
-      <div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
-      <div class="dataInfo dataInfo8" v-html="doubleCount('047',1)"></div>
-      <div class="dataInfo dataInfo9" v-html="doubleCount('045',1)"></div>
-      <div class="dataInfo dataInfo10" v-html="doubleCount('047',2)"></div>
-      <div class="dataInfo dataInfo11" v-html="doubleCount('045',2)"></div>
-      <img class="deviceImg" src="@/assets/images/device03.jpg" />
-    </div> -->
     <div class="devicInfo" v-if="infoData?.length != 0">
       <div class="title">
         <i />
@@ -158,11 +124,40 @@
             <template #arrow>
               <img src="@/assets/images/col_icon.png" />
             </template>
-            <n-collapse-item class="colItem" :title="item.label" :name="index" v-for="(item, index) in infoData"
-              :key="index">
+            <n-collapse-item
+              class="colItem"
+              :title="item.label"
+              :name="index"
+              v-for="(item, index) in infoData"
+              :key="index"
+            >
               <div class="content">
-                <span v-for="(res, index) in item.header_valve" :key="index">{{ res.label }}: {{ res.value }}{{
-                  res.paramUnit }}</span>
+                <span v-for="(res, index) in item.header_valve" :key="index">
+                  <i>{{ res.label }}： </i>
+                  <i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i>
+                  <i v-if="res.ctrlFlag === 1">
+                    <n-switch
+                      class="switch"
+                      size="small"
+                      v-model:value="res.value"
+                      style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
+                      @update:value="handleBlur(res)"
+                      v-if="res.ctrlpro.valueType === 'bool'"
+                    >
+                      <template #checked>Y</template>
+                      <template #unchecked>N</template>
+                    </n-switch>
+                    <n-input-number
+                      size="tiny"
+                      v-model:value="res.value"
+                      style="width: 100px; opacity: 0.9"
+                      button-placement="both"
+                      placeholder=""
+                      @blur="handleBlur(res)"
+                      v-if="res.ctrlpro.valueType != 'bool'"
+                    />
+                  </i>
+                </span>
               </div>
             </n-collapse-item>
           </n-collapse>
@@ -172,11 +167,39 @@
             <template #arrow>
               <img src="@/assets/images/col_icon.png" />
             </template>
-            <n-collapse-item class="colItem" :title="item.label" :name="index" v-for="(item, index) in infoData"
-              :key="index">
+            <n-collapse-item
+              class="colItem"
+              :title="item.label"
+              :name="index"
+              v-for="(item, index) in infoData"
+              :key="index"
+            >
               <div class="content pump">
-                <span v-for="(res, index) in item.header_pump" :key="index">{{ res.label }}: {{ res.value }}{{
-                  res.paramUnit }}</span>
+                <span v-for="(res, index) in item.header_pump" :key="index">
+                  <i>{{ res.label }}： </i>
+                  <i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i>
+                  <i v-if="res.ctrlFlag === 1">
+                    <n-switch
+                      class="switch"
+                      size="small"
+                      v-model:value="res.value"
+                      style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
+                      @update:value="handleBlur(res)"
+                      v-if="res.ctrlpro.valueType === 'bool'"
+                    >
+                      <template #checked>Y</template>
+                      <template #unchecked>N</template>
+                    </n-switch>
+                    <n-input-number
+                      size="tiny"
+                      v-model:value="res.value"
+                      style="width: 100px; opacity: 0.9"
+                      button-placement="both"
+                      placeholder=""
+                      v-if="res.ctrlpro.valueType != 'bool'"
+                    />
+                  </i>
+                </span>
               </div>
             </n-collapse-item>
           </n-collapse>
@@ -213,23 +236,38 @@
 </template>
 <script lang="ts" setup>
 import { getViewInfo } from '@/api/device/index';
+import { sendCtrl } from '@/api/table/list';
 import { deviceVo } from '@/api/device/types';
 import mitt from '@/plugins/bus';
 
-const value = ref(0)
 // const active = ref(true)
 const deviceMenuKey = ref();
 const infoData = ref<deviceVo[]>();
-const zoneType = ref()//1:一个分区,2:2个分区,3:3:个分区,4:别墅区
-const timer = ref()
-const isCurrentRoute = ref(true)
+const zoneType = ref(); //1:一个分区,2:2个分区,3:3:个分区,4:别墅区
+const deviceImg = ref();
+const timer = ref();
+const isCurrentRoute = ref(true);
+
 // const collapseDefault = ref<any[]>();
 
+interface FormDataVO {
+  //url: string;
+  deviceName: string;
+  paramCode: string;
+  value: string;
+}
+const formData = ref<FormDataVO>({
+  //url: '',
+  deviceName: '',
+  paramCode: '',
+  value: ''
+});
+
 defineProps({
   sidebarHeight: {
     type: Number,
-    default: 0,
-  },
+    default: 0
+  }
 });
 mitt.on('deviceMenuKey', (res: any) => {
   //监听部门点击
@@ -246,10 +284,13 @@ function gitDevice() {
         timer.value = setTimeout(async () => {
           await (timer.value && clearTimeout(timer.value));
           await gitDevice();
-        }, 20000)
+        }, 20000);
       }
       infoData.value = Object.keys(res.data).length === 0 ? [] : res.data.datas;
       zoneType.value = Object.keys(res.data).length === 0 ? 0 : res.data.pCounts;
+      deviceImg.value =
+        Object.keys(res.data).length === 0 ? '' : 'src/assets/images/device/' + res.data.imgIndex + '.gif';
+      console.log(deviceImg.value);
     } else {
       clearTimeout(timer.value);
     }
@@ -261,7 +302,7 @@ onUnmounted(() => {
   if (timer.value !== null || timer.value !== undefined) {
     clearTimeout(timer.value);
   }
-})
+});
 
 // function doubleCount (id:string) {
 //   const arr = infoData.value[0].header_main
@@ -281,12 +322,25 @@ onUnmounted(() => {
 //   };
 // });
 const doubleCount = (id: string, index: number) => {
-  const arr = infoData.value[index].header_main
-  const obj = arr.find((item: any) => item.id === id)
-  const lable = obj != undefined ? `<span>${obj.label}</span><span>${obj.value} ${obj.paramUnit}</span>` : ''
+  const arr = infoData.value[index].header_main;
+  const obj = arr.find((item: any) => item.id === id);
+  const lable = obj != undefined ? `<span>${obj.label}</span><span>${obj.value} ${obj.paramUnit}</span>` : '';
   // const lable = obj != undefined ? `${obj.label}` : ''
   // const value = obj != undefined ? `${obj.value}` : '0.0'
   return lable;
+};
+console.log('doubleCount-', doubleCount);
+
+function handleBlur(data: any) {
+  //点击阀门/泵开关
+  const submitData = data.ctrlpro;
+  submitData.value = data.value;
+  console.log(submitData);
+  sendCtrl(submitData).then((res: any) => {
+    if (res.code === 200) {
+      console.log(res.data);
+      ElMessage(res.data.msg);
+    }
+  });
 }
-console.log("doubleCount-", doubleCount)
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/monitoring/devicemanage/index.scss b/src/views/monitoring/devicemanage/index.scss
index db52f5f..0584cae 100644
--- a/src/views/monitoring/devicemanage/index.scss
+++ b/src/views/monitoring/devicemanage/index.scss
@@ -1,701 +1,739 @@
 .devicemanage {
-    position: relative;
-    width: 100%;
-    height: 100vh;
-    background: url(@/assets/images/screen.png);
-    // background-color: var(--tableBg);
-    background-size: 100% 100%;
-    // background-color: rgba(0, 0, 0, 0.3);
-    // background-blend-mode: multiply;
-    padding: 0 25px;
-    overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background: url(@/assets/images/screen.png);
+  // background-color: var(--tableBg);
+  background-size: 100% 100%;
+  // background-color: rgba(0, 0, 0, 0.3);
+  // background-blend-mode: multiply;
+  padding: 0 25px;
+  overflow: hidden;
+
+  .layout {
+    display: flex;
+
+    .sidebar {
+      width: 12%;
+      height: calc(100vh - 95px - 30px); //屏幕高度-头部header高度-底部高度
+      flex-shrink: 0;
+      border: 1px solid #0d55b0;
+      padding: 10px 0;
+      // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 12);
+      margin-right: 1vw;
+      position: relative;
+      overflow: hidden;
+      transition: width 0.28s;
+      background-color: rgba(2, 8, 46, 0.8);
+
+      // .menu {
+      //     text-align: center;
+
+      //     :deep(.n-submenu) {
+      //         --n-item-color-hover: auto;
+
+      //         .n-menu-item {
+      //             .n-menu-item-content {
+      //                 padding: 0 !important;
+
+      //                 .n-ellipsis {
+      //                     font-family: 'AlibabaPuHuiTiBold';
+      //                     padding: 0 15px;
+      //                 }
+      //             }
+
+      //             .n-menu-item-content-header {
+      //                 font-size: 2.4rem;
+      //                 color: #B1E3FF;
+      //             }
+      //         }
+
+      //         .n-submenu-children {
+      //             .n-menu-item-content-header {
+      //                 font-size: 1.8rem;
+      //             }
+
+      //             .n-menu-item-content--selected {
+      //                 .n-menu-item-content-header {
+      //                     color: #fff;
+
+      //                     .n-ellipsis {
+      //                         position: relative;
+
+      //                         span {
+      //                             padding: 0 10px;
+      //                         }
+
+      //                         span::before {
+      //                             content: '';
+      //                             position: absolute;
+      //                             left: 0;
+      //                             top: 0.7rem;
+      //                             width: 1.8rem;
+      //                             height: 1.8rem;
+      //                             background: url(../../../assets/images/taps.png) no-repeat;
+      //                             background-size: cover;
+      //                         }
+      //                     }
+      //                 }
+      //             }
+
+      //             .n-menu-item-content--selected::before {
+      //                 background: -webkit-linear-gradient(left, #1fc7ff29 0%, #1177e700 100%);
+      //                 left: 0;
+      //                 right: 0;
+      //             }
+
+      //             .n-menu-item-content--selected::after {
+      //                 content: '';
+      //                 position: absolute;
+      //                 bottom: 0;
+      //                 width: 100%;
+      //                 height: 2px;
+      //                 background: -webkit-linear-gradient(left, #1fc7ff29 0%, #1177e700 100%);
+      //             }
+      //         }
+
+      //         .n-base-icon {
+      //             color: #84e0f7;
+      //             right: 10px;
+      //         }
+      //     }
+      // }
+    }
 
-    .layout {
-        display: flex;
-
-        .sidebar {
-            width: 12%;
-            height: calc(100vh - 95px - 30px); //屏幕高度-头部header高度-底部高度
-            flex-shrink: 0;
-            border: 1px solid #0D55B0;
-            padding: 10px 0;
-            // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 12);
-            margin-right: 1vw;
-            position: relative;
-            overflow: hidden;
-            transition: width 0.28s;
-            background-color: rgba(2, 8, 46, 0.8);
-
-            // .menu {
-            //     text-align: center;
-
-            //     :deep(.n-submenu) {
-            //         --n-item-color-hover: auto;
-
-            //         .n-menu-item {
-            //             .n-menu-item-content {
-            //                 padding: 0 !important;
-
-            //                 .n-ellipsis {
-            //                     font-family: 'AlibabaPuHuiTiBold';
-            //                     padding: 0 15px;
-            //                 }
-            //             }
-
-            //             .n-menu-item-content-header {
-            //                 font-size: 2.4rem;
-            //                 color: #B1E3FF;
-            //             }
-            //         }
-
-            //         .n-submenu-children {
-            //             .n-menu-item-content-header {
-            //                 font-size: 1.8rem;
-            //             }
-
-            //             .n-menu-item-content--selected {
-            //                 .n-menu-item-content-header {
-            //                     color: #fff;
-
-            //                     .n-ellipsis {
-            //                         position: relative;
-
-            //                         span {
-            //                             padding: 0 10px;
-            //                         }
-
-            //                         span::before {
-            //                             content: '';
-            //                             position: absolute;
-            //                             left: 0;
-            //                             top: 0.7rem;
-            //                             width: 1.8rem;
-            //                             height: 1.8rem;
-            //                             background: url(../../../assets/images/taps.png) no-repeat;
-            //                             background-size: cover;
-            //                         }
-            //                     }
-            //                 }
-            //             }
-
-            //             .n-menu-item-content--selected::before {
-            //                 background: -webkit-linear-gradient(left, #1fc7ff29 0%, #1177e700 100%);
-            //                 left: 0;
-            //                 right: 0;
-            //             }
-
-            //             .n-menu-item-content--selected::after {
-            //                 content: '';
-            //                 position: absolute;
-            //                 bottom: 0;
-            //                 width: 100%;
-            //                 height: 2px;
-            //                 background: -webkit-linear-gradient(left, #1fc7ff29 0%, #1177e700 100%);
-            //             }
-            //         }
-
-            //         .n-base-icon {
-            //             color: #84e0f7;
-            //             right: 10px;
-            //         }
-            //     }
-            // }
-        }
+    .sidebar::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 18rem;
+      background: url(@/assets/images/menu_bg.png) no-repeat;
+      background-size: 100% 100%;
+    }
 
-        .sidebar::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            width: 100%;
-            height: 18rem;
-            background: url(@/assets/images/menu_bg.png) no-repeat;
-            background-size: 100% 100%;
-        }
+    .main {
+      width: 87%;
+      border: 2px solid #1e60a6;
+      box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 124);
+      background-color: rgba(2, 8, 46, 0.8);
 
-        .main {
-            width: 87%;
-            border: 2px solid #1e60a6;
-            box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 124);
-            background-color: rgba(2, 8, 46, 0.8);
+      :deep(.devicePrt) {
+        .deviceImg {
+          position: relative;
 
-            :deep(.devicePrt) {
-                .deviceImg {
-                    position: relative;
+          .deviceImg {
+            width: 100%;
+          }
 
-                    .deviceImg {
-                        width: 100%;
-                    }
+          .card {
+            position: absolute;
+            display: inline-block;
+            color: #87e8de;
+            font-size: 1.4rem;
+            padding: 10px 20px;
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
+            z-index: 99;
+            overflow: hidden;
 
-                    .card {
-                        position: absolute;
-                        display: inline-block;
-                        color: #87e8de;
-                        font-size: 1.4rem;
-                        padding: 10px 20px;
-                        border-radius: 10px;
-                        background: rgba(255, 255, 255, 0.1);
-                        backdrop-filter: blur(10px);
-                        border: 1px solid rgba(255, 255, 255, 0.1);
-                        box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
-                        z-index: 99;
-                        overflow: hidden;
-
-                        .dataInfo {
-                            padding: 5px 0;
-
-                            span {
-                                display: block;
-                            }
-                        }
+            .dataInfo {
+              padding: 5px 0;
 
-                        .dataFlex {
-                            display: flex;
+              span {
+                display: block;
+              }
+            }
 
-                            .flexItem {
-                                margin-right: 15px;
-                            }
+            .dataFlex {
+              display: flex;
 
-                            .flexItem:last-child {
-                                margin-right: 0;
-                            }
-                        }
-                    }
+              .flexItem {
+                margin-right: 15px;
+              }
 
-                    // .dataInfo {
-                    //     position: absolute;
-                    //     display: inline-block;
-                    //     color: #87e8de;
-                    //     padding: 10px;
-                    //     font-size: 16px;
-                    //     // border: 2px solid #39c33c;
-                    //     z-index: 99;
-
-                    //     span {
-                    //         display: block;
-                    //     }
-                    // }
-                }
+              .flexItem:last-child {
+                margin-right: 0;
+              }
+            }
+          }
+          // .switch {
+          //   position: absolute;
+          //   z-index: 99;
+          //   cursor: pointer;
+          //   overflow: hidden;
+          // }
+
+          // .dataInfo {
+          //     position: absolute;
+          //     display: inline-block;
+          //     color: #87e8de;
+          //     padding: 10px;
+          //     font-size: 16px;
+          //     // border: 2px solid #39c33c;
+          //     z-index: 99;
+
+          //     span {
+          //         display: block;
+          //     }
+          // }
+        }
 
-                .deviceImgA {
-                    .card_a {
-                        top: 40%;
-                        left: 5%;
-                    }
+        .deviceImgA {
+          .card_a {
+            top: 40%;
+            left: 5%;
+          }
+
+          .card_b {
+            top: 5%;
+            left: 5%;
+          }
+
+          .card_c {
+            top: 30%;
+            right: 3%;
+          }
+
+          .card_f {
+            top: 30%;
+            right: 20%;
+          }
+          // .switch_a {
+          //   width: 35px;
+          //   height: 60px;
+          //   background: red;
+          //   top: 23%;
+          //   left: 16.5%;
+          // }
+          // .switch_b {
+          //   width: 40px;
+          //   height: 65px;
+          //   background: red;
+          //   top: 59%;
+          //   left: 15.5%;
+          // }
+        }
 
-                    .card_b {
-                        top: 5%;
-                        left: 5%;
-                    }
+        .deviceImgB {
+          .card_a {
+            top: 42%;
+            left: 5%;
+          }
+
+          .card_b {
+            top: 8%;
+            left: 5%;
+          }
+
+          .card_c {
+            top: 16%;
+            right: 3%;
+          }
+
+          .card_d {
+            top: 52%;
+            right: 3%;
+          }
+
+          .card_f {
+            top: 30%;
+            right: 21%;
+          }
+        }
 
-                    .card_c {
-                        top: 30%;
-                        right: 3%;
-                    }
+        .deviceImgC {
+          .card_a {
+            top: 6%;
+            left: 6%;
+          }
+
+          .card_b {
+            top: 62%;
+            left: 5%;
+          }
+
+          .card_c {
+            top: 2%;
+            right: 2%;
+          }
+
+          .card_d {
+            top: 35%;
+            right: 2%;
+          }
+
+          .card_e {
+            top: 67%;
+            right: 2%;
+          }
+
+          .card_f {
+            top: 30%;
+            right: 21%;
+          }
+        }
 
-                    .card_f {
-                        top: 30%;
-                        right: 20%;
-                    }
-                }
+        // .deviceImgA {
+        //     .dataInfo0 {
+        //         top: 7%;
+        //         left: 6%;
+        //     }
+
+        //     .dataInfo1 {
+        //         top: 35%;
+        //         left: 9%;
+        //     }
+
+        //     .dataInfo2 {
+        //         top: 0%;
+        //         left: 18%;
+        //     }
+
+        //     .dataInfo3 {
+        //         top: 0%;
+        //         left: 25%;
+        //     }
+
+        //     .dataInfo4 {
+        //         top: 15%;
+        //         left: 17.5%;
+        //     }
+
+        //     .dataInfo5 {
+        //         top: 26%;
+        //         left: 17.5%;
+        //     }
+
+        //     .dataInfo6 {
+        //         top: 0%;
+        //         right: 20%;
+        //     }
+
+        //     .dataInfo7 {
+        //         top: 10%;
+        //         right: 20%;
+        //     }
+        // }
+        // .deviceImgB {
+        //     .dataInfo0 {
+        //         top: 23%;
+        //         left: 10.5%;
+        //     }
+
+        //     .dataInfo1 {
+        //         top: 55%;
+        //         left: 12%;
+        //     }
+
+        //     .dataInfo2 {
+        //         top: 0%;
+        //         left: 23%;
+        //     }
+
+        //     .dataInfo3 {
+        //         top: 0%;
+        //         left: 30%;
+        //     }
+
+        //     .dataInfo4 {
+        //         top: 10%;
+        //         left: 23%;
+        //     }
+
+        //     .dataInfo5 {
+        //         top: 20%;
+        //         left: 23%;
+        //     }
+
+        //     .dataInfo6 {
+        //         top: 0%;
+        //         right: 36%;
+        //     }
+
+        //     .dataInfo7 {
+        //         top: 10%;
+        //         right: 36%;
+        //     }
+        //     .dataInfo8 {
+        //         top: 26%;
+        //         right: 31%;
+        //     }
+
+        //     .dataInfo9 {
+        //         top: 36%;
+        //         right: 31%;
+        //     }
+        // }
+        // .deviceImgC {
+        //     .dataInfo0 {
+        //         bottom: 38%;
+        //         left: 8.5%;
+        //     }
+
+        //     .dataInfo1 {
+        //         bottom: 1%;
+        //         left: 11%;
+        //     }
+
+        //     .dataInfo2 {
+        //         top: 0%;
+        //         left: 23%;
+        //     }
+
+        //     .dataInfo3 {
+        //         top: 0%;
+        //         left: 30%;
+        //     }
+
+        //     .dataInfo4 {
+        //         top: 10%;
+        //         left: 23%;
+        //     }
+
+        //     .dataInfo5 {
+        //         top: 20%;
+        //         left: 23%;
+        //     }
+
+        //     .dataInfo6 {
+        //         top: 0%;
+        //         right: 36%;
+        //     }
+
+        //     .dataInfo7 {
+        //         top: 0%;
+        //         right: 29%;
+        //     }
+        //     .dataInfo8 {
+        //         top: 22%;
+        //         right: 36%;
+        //     }
+
+        //     .dataInfo9 {
+        //         top: 22%;
+        //         right: 29%;
+        //     }
+        //     .dataInfo10 {
+        //         top: 47%;
+        //         right: 36%;
+        //     }
+
+        //     .dataInfo11 {
+        //         top: 47%;
+        //         right: 29%;
+        //     }
+        // }
+
+        .devicInfo {
+          color: #b1e3ff;
+          padding: 0 3rem;
+          font-family: 'AlibabaPuHuiTiRegular';
+
+          .title {
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            background: url(@/assets/images/info_bg.png) no-repeat center;
+            background-size: 100% 100%;
 
-                .deviceImgB {
-                    .card_a {
-                        top: 42%;
-                        left: 5%;
+            i {
+              display: block;
+              width: 6px;
+              height: 50px;
+              background: linear-gradient(270deg, #679fff 0%, rgba(17, 119, 231, 0.698) 100%);
+              border-radius: 0px 0px 0px 0px;
+              margin-right: 18px;
+            }
+          }
+
+          .infoPanel {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 15px;
+
+            .item {
+              width: 49%;
+              height: calc(100vh - 150px - 53rem);
+              padding: 15px 0;
+              background: -webkit-linear-gradient(top, #052266 0%, #011341 100%);
+              overflow: auto;
+
+              .collapse {
+                .colItem {
+                  .n-collapse-item__header-main {
+                    font-size: 18px;
+                    color: #1fb1ff;
+                    padding: 0 22px;
+
+                    .n-collapse-item-arrow {
+                      margin-right: 10px;
+
+                      img {
+                        width: 18px;
+                        height: 16px;
+                      }
                     }
+                  }
 
-                    .card_b {
-                        top: 8%;
-                        left: 5%;
-                    }
+                  .n-collapse-item__content-wrapper {
+                    .n-collapse-item__content-inner {
+                      padding-top: 10px;
 
-                    .card_c {
-                        top: 16%;
-                        right: 3%;
-                    }
+                      .content {
+                        display: flex;
+                        flex-wrap: wrap;
+                        padding: 0 15px;
+                        font-size: 16px;
+                        color: #c15757;
+                        line-height: 30px;
+
+                        span {
+                          display: flex;
+                          align-items: center;
+                          flex: 0 0 calc(100% / 2);
+                          i {
+                            font-style: normal;
+                            display: flex;
+                            align-items: center;
+                            .n-input-number {
+                              display: flex;
+                              align-items: center;
+                            }
+                          }
+                          .switch {
+                            font-size: 13px;
+                          }
+                        }
 
-                    .card_d {
-                        top: 52%;
-                        right: 3%;
-                    }
+                        span:nth-child(even) {
+                          color: #41a5d7;
+                        }
+                      }
 
-                    .card_f {
-                        top: 30%;
-                        right: 21%;
+                      // .content.pump {
+                      //   span {
+                      //     flex: auto;
+                      //   }
+                      // }
                     }
+                  }
                 }
 
-                .deviceImgC {
-                    .card_a {
-                        top: 6%;
-                        left: 6%;
-                    }
-
-                    .card_b {
-                        top: 62%;
-                        left: 5%;
-                    }
-
-                    .card_c {
-                        top: 2%;
-                        right: 2%;
-                    }
-
-                    .card_d {
-                        top: 35%;
-                        right: 2%;
-                    }
-
-                    .card_e {
-                        top: 67%;
-                        right: 2%;
-                    }
-
-                    .card_f {
-                        top: 30%;
-                        right: 21%;
-                    }
+                .colItem.n-collapse-item--active {
+                  .n-collapse-item-arrow {
+                    transform: none;
+                  }
                 }
 
-                // .deviceImgA {
-                //     .dataInfo0 {
-                //         top: 7%;
-                //         left: 6%;
-                //     }
-
-                //     .dataInfo1 {
-                //         top: 35%;
-                //         left: 9%;
-                //     }
-
-                //     .dataInfo2 {
-                //         top: 0%;
-                //         left: 18%;
-                //     }
-
-                //     .dataInfo3 {
-                //         top: 0%;
-                //         left: 25%;
-                //     }
-
-                //     .dataInfo4 {
-                //         top: 15%;
-                //         left: 17.5%;
-                //     }
-
-                //     .dataInfo5 {
-                //         top: 26%;
-                //         left: 17.5%;
-                //     }
-
-                //     .dataInfo6 {
-                //         top: 0%;
-                //         right: 20%;
-                //     }
-
-                //     .dataInfo7 {
-                //         top: 10%;
-                //         right: 20%;
-                //     }
-                // }
-                // .deviceImgB {
-                //     .dataInfo0 {
-                //         top: 23%;
-                //         left: 10.5%;
-                //     }
-
-                //     .dataInfo1 {
-                //         top: 55%;
-                //         left: 12%;
-                //     }
-
-                //     .dataInfo2 {
-                //         top: 0%;
-                //         left: 23%;
-                //     }
-
-                //     .dataInfo3 {
-                //         top: 0%;
-                //         left: 30%;
-                //     }
-
-                //     .dataInfo4 {
-                //         top: 10%;
-                //         left: 23%;
-                //     }
-
-                //     .dataInfo5 {
-                //         top: 20%;
-                //         left: 23%;
-                //     }
-
-                //     .dataInfo6 {
-                //         top: 0%;
-                //         right: 36%;
-                //     }
-
-                //     .dataInfo7 {
-                //         top: 10%;
-                //         right: 36%;
-                //     }
-                //     .dataInfo8 {
-                //         top: 26%;
-                //         right: 31%;
-                //     }
-
-                //     .dataInfo9 {
-                //         top: 36%;
-                //         right: 31%;
-                //     }
-                // }
-                // .deviceImgC {
-                //     .dataInfo0 {
-                //         bottom: 38%;
-                //         left: 8.5%;
-                //     }
-
-                //     .dataInfo1 {
-                //         bottom: 1%;
-                //         left: 11%;
-                //     }
-
-                //     .dataInfo2 {
-                //         top: 0%;
-                //         left: 23%;
-                //     }
-
-                //     .dataInfo3 {
-                //         top: 0%;
-                //         left: 30%;
-                //     }
-
-                //     .dataInfo4 {
-                //         top: 10%;
-                //         left: 23%;
-                //     }
-
-                //     .dataInfo5 {
-                //         top: 20%;
-                //         left: 23%;
-                //     }
-
-                //     .dataInfo6 {
-                //         top: 0%;
-                //         right: 36%;
-                //     }
-
-                //     .dataInfo7 {
-                //         top: 0%;
-                //         right: 29%;
-                //     }
-                //     .dataInfo8 {
-                //         top: 22%;
-                //         right: 36%;
-                //     }
-
-                //     .dataInfo9 {
-                //         top: 22%;
-                //         right: 29%;
-                //     }
-                //     .dataInfo10 {
-                //         top: 47%;
-                //         right: 36%;
-                //     }
-
-                //     .dataInfo11 {
-                //         top: 47%;
-                //         right: 29%;
-                //     }
-                // }
-
-                .devicInfo {
-                    color: #B1E3FF;
-                    padding: 0 3rem;
-                    font-family: 'AlibabaPuHuiTiRegular';
-
-                    .title {
-                        display: flex;
-                        align-items: center;
-                        font-size: 20px;
-                        background: url(@/assets/images/info_bg.png) no-repeat center;
-                        background-size: 100% 100%;
-
-                        i {
-                            display: block;
-                            width: 6px;
-                            height: 50px;
-                            background: linear-gradient(270deg, #679FFF 0%, rgba(17, 119, 231, 0.698) 100%);
-                            border-radius: 0px 0px 0px 0px;
-                            margin-right: 18px;
-                        }
-                    }
-
-                    .infoPanel {
-                        display: flex;
-                        justify-content: space-between;
-                        margin-top: 15px;
-
-                        .item {
-                            width: 49%;
-                            height: calc(100vh - 150px - 53rem);
-                            padding: 15px 0;
-                            background: -webkit-linear-gradient(top, #052266 0%, #011341 100%);
-                            overflow: auto;
-
-                            .collapse {
-                                .colItem {
-                                    .n-collapse-item__header-main {
-                                        font-size: 18px;
-                                        color: #1FB1FF;
-                                        padding: 0 22px;
-
-                                        .n-collapse-item-arrow {
-                                            margin-right: 10px;
-
-                                            img {
-                                                width: 18px;
-                                                height: 16px;
-                                            }
-                                        }
-                                    }
-
-                                    .n-collapse-item__content-wrapper {
-                                        .n-collapse-item__content-inner {
-                                            padding-top: 10px;
-
-                                            .content {
-                                                display: flex;
-                                                flex-wrap: wrap;
-                                                padding: 0 15px;
-                                                font-size: 16px;
-                                                color: #c15757;
-                                                line-height: 30px;
-
-                                                span {
-                                                    flex: 0 0 calc(100% / 2)
-                                                }
-
-                                                span:nth-child(even) {
-                                                    color: #41a5d7;
-                                                }
-                                            }
-
-                                            .content.pump {
-                                                span {
-                                                    flex: auto;
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-
-                                .colItem.n-collapse-item--active {
-                                    .n-collapse-item-arrow {
-                                        transform: none
-                                    }
-                                }
-
-                                .colItem:not(:first-child) {
-                                    border-top: none
-                                }
-
-                                .colItem:not(:first-child)::before {
-                                    display: block;
-                                    content: '';
-                                    width: 100%;
-                                    height: 1px;
-                                    background: linear-gradient(90deg, rgba(31, 225, 255, 0) 0%, rgba(189, 220, 255, 0.94) 50%, rgba(31, 225, 255, 0) 97%);
-                                }
-                            }
-                        }
-                    }
-
-                    // .l_green {
-                    //     color: #39c33c;
-                    // }
-
-                    // .l_blue {
-                    //     color: #41a5d7;
-                    // }
-
-                    // .orange {
-                    //     color: #c15757;
-                    // }
-
-                    // .title {
-                    //     font-size: 16px;
-                    // }
-
-                    // .valves {
-                    //     display: flex;
-                    //     align-items: center;
-                    //     flex-shrink: 0;
-                    //     width: 40%;
-
-                    //     .title {
-                    //         writing-mode: vertical-rl;
-                    //         // transform: rotate(180deg);
-                    //     }
-
-                    //     .info {
-                    //         .select {
-                    //             font-weight: 800;
-
-                    //             .n-button {
-                    //                 margin-right: 5px;
-                    //                 background: linear-gradient(#3370cb, #162f68, #162f68);
-                    //             }
-                    //         }
-
-                    //         .table {
-                    //             border: 1px solid #39c33c;
-                    //             border-radius: 3px;
-                    //             margin: 10px 0 10px 20px;
-
-                    //             .item {
-                    //                 display: flex;
-                    //                 align-items: center;
-                    //                 padding: 10px 20px;
-                    //                 line-height: 26px;
-                    //                 border-bottom: 1px solid #39c33c;
-
-                    //                 .lable {
-                    //                     font-size: 16px;
-                    //                     flex-shrink: 0;
-                    //                 }
-
-                    //                 .parameters {
-                    //                     display: flex;
-                    //                     flex-wrap: wrap;
-
-                    //                     .name {
-                    //                         color: #c15757;
-                    //                         margin-left: 15px;
-                    //                     }
-
-                    //                     .name:nth-child(even) {
-                    //                         color: #41a5d7;
-                    //                     }
-
-                    //                     .n-radio__label {
-                    //                         color: #41a5d7;
-                    //                     }
-                    //                 }
-                    //             }
-
-                    //             .item:last-child {
-                    //                 border-bottom: none;
-                    //             }
-                    //         }
-
-                    //         .switch {
-                    //             display: flex;
-
-                    //             span {
-                    //                 display: flex;
-                    //                 align-items: center;
-                    //                 margin-right: 5px;
-                    //             }
-                    //         }
-                    //     }
-                    // }
-
-                    // .pump {
-                    //     width: 55%;
-                    //     padding: 5px 10px;
-                    //     border: 1px solid #39c33c;
-
-                    //     .item {
-                    //         line-height: 28px;
-
-                    //         .info {
-                    //             display: flex;
-                    //             flex-wrap: wrap;
-
-                    //             .name {
-                    //                 color: #c15757;
-                    //                 margin-left: 15px;
-                    //             }
-
-                    //             .name:nth-child(even) {
-                    //                 color: #41a5d7;
-                    //             }
-                    //         }
-                    //     }
-                    // }
+                .colItem:not(:first-child) {
+                  border-top: none;
                 }
 
-                .tips {
-                    font-size: 1.6rem;
-                    font-family: 'AlibabaPuHuiTiRegular';
-                    text-align: center;
-                    color: #B1E3FF;
-                    margin-top: 40vh;
+                .colItem:not(:first-child)::before {
+                  display: block;
+                  content: '';
+                  width: 100%;
+                  height: 1px;
+                  background: linear-gradient(
+                    90deg,
+                    rgba(31, 225, 255, 0) 0%,
+                    rgba(189, 220, 255, 0.94) 50%,
+                    rgba(31, 225, 255, 0) 97%
+                  );
                 }
+              }
             }
+          }
+
+          // .l_green {
+          //     color: #39c33c;
+          // }
+
+          // .l_blue {
+          //     color: #41a5d7;
+          // }
+
+          // .orange {
+          //     color: #c15757;
+          // }
+
+          // .title {
+          //     font-size: 16px;
+          // }
+
+          // .valves {
+          //     display: flex;
+          //     align-items: center;
+          //     flex-shrink: 0;
+          //     width: 40%;
+
+          //     .title {
+          //         writing-mode: vertical-rl;
+          //         // transform: rotate(180deg);
+          //     }
+
+          //     .info {
+          //         .select {
+          //             font-weight: 800;
+
+          //             .n-button {
+          //                 margin-right: 5px;
+          //                 background: linear-gradient(#3370cb, #162f68, #162f68);
+          //             }
+          //         }
+
+          //         .table {
+          //             border: 1px solid #39c33c;
+          //             border-radius: 3px;
+          //             margin: 10px 0 10px 20px;
+
+          //             .item {
+          //                 display: flex;
+          //                 align-items: center;
+          //                 padding: 10px 20px;
+          //                 line-height: 26px;
+          //                 border-bottom: 1px solid #39c33c;
+
+          //                 .lable {
+          //                     font-size: 16px;
+          //                     flex-shrink: 0;
+          //                 }
+
+          //                 .parameters {
+          //                     display: flex;
+          //                     flex-wrap: wrap;
+
+          //                     .name {
+          //                         color: #c15757;
+          //                         margin-left: 15px;
+          //                     }
+
+          //                     .name:nth-child(even) {
+          //                         color: #41a5d7;
+          //                     }
+
+          //                     .n-radio__label {
+          //                         color: #41a5d7;
+          //                     }
+          //                 }
+          //             }
+
+          //             .item:last-child {
+          //                 border-bottom: none;
+          //             }
+          //         }
+
+          //         .switch {
+          //             display: flex;
+
+          //             span {
+          //                 display: flex;
+          //                 align-items: center;
+          //                 margin-right: 5px;
+          //             }
+          //         }
+          //     }
+          // }
+
+          // .pump {
+          //     width: 55%;
+          //     padding: 5px 10px;
+          //     border: 1px solid #39c33c;
+
+          //     .item {
+          //         line-height: 28px;
+
+          //         .info {
+          //             display: flex;
+          //             flex-wrap: wrap;
+
+          //             .name {
+          //                 color: #c15757;
+          //                 margin-left: 15px;
+          //             }
+
+          //             .name:nth-child(even) {
+          //                 color: #41a5d7;
+          //             }
+          //         }
+          //     }
+          // }
         }
 
-        /*滚动条整体部分*/
-        .tableGrid ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
+        .tips {
+          font-size: 1.6rem;
+          font-family: 'AlibabaPuHuiTiRegular';
+          text-align: center;
+          color: #b1e3ff;
+          margin-top: 40vh;
         }
+      }
+    }
 
-        /*滚动条的轨道*/
-        .tableGrid ::-webkit-scrollbar-track {
-            background-color: transparent;
-            -webkit-border-radius: 8px;
-            -moz-border-radius: 8px;
-            border-radius: 8px;
-        }
+    /*滚动条整体部分*/
+    .tableGrid ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
 
-        /*滚动条里面的小方块，能向上向下移动*/
-        .tableGrid ::-webkit-scrollbar-thumb {
-            background-color: rgb(147, 147, 153, 0.5);
-            -webkit-border-radius: 8px;
-            -moz-border-radius: 8px;
-            border-radius: 8px;
-        }
+    /*滚动条的轨道*/
+    .tableGrid ::-webkit-scrollbar-track {
+      background-color: transparent;
+      -webkit-border-radius: 8px;
+      -moz-border-radius: 8px;
+      border-radius: 8px;
+    }
 
-        .tableGrid ::-webkit-scrollbar-thumb:hover {
-            background-color: #a8a8a8;
-        }
+    /*滚动条里面的小方块，能向上向下移动*/
+    .tableGrid ::-webkit-scrollbar-thumb {
+      background-color: rgb(147, 147, 153, 0.5);
+      -webkit-border-radius: 8px;
+      -moz-border-radius: 8px;
+      border-radius: 8px;
+    }
 
-        .tableGrid :-webkit-scrollbar-thumb:active {
-            background-color: #787878;
-        }
+    .tableGrid ::-webkit-scrollbar-thumb:hover {
+      background-color: #a8a8a8;
+    }
 
-        /*边角，即两个滚动条的交汇处*/
-        .tableGrid ::-webkit-scrollbar-corner {
-            background-color: transparent;
-        }
+    .tableGrid :-webkit-scrollbar-thumb:active {
+      background-color: #787878;
     }
+
+    /*边角，即两个滚动条的交汇处*/
+    .tableGrid ::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  }
 }
 
 .dark {
-    .devicemanage {
-        background-color: rgba(29, 30, 31, 0.8);
-        background-blend-mode: multiply;
+  .devicemanage {
+    background-color: rgba(29, 30, 31, 0.8);
+    background-blend-mode: multiply;
 
-        .layout {
-
-            .sidebar {
-                background-color: rgba(29, 30, 31, 0.8);
-            }
+    .layout {
+      .sidebar {
+        background-color: rgba(29, 30, 31, 0.8);
+      }
 
-            .main {
-                background-color: rgba(29, 30, 31, 0.8);
+      .main {
+        background-color: rgba(29, 30, 31, 0.8);
 
-                .devicePrt {
-                    :deep(.devicInfo) {
-                        .infoPanel {
-                            .item {
-                                background: -webkit-linear-gradient(top, rgba(29, 30, 31, 0.8) 0%, rgba(28, 32, 37, 0.8) 100%);
-                            }
-                        }
-                    }
-                }
+        .devicePrt {
+          :deep(.devicInfo) {
+            .infoPanel {
+              .item {
+                background: -webkit-linear-gradient(top, rgba(29, 30, 31, 0.8) 0%, rgba(28, 32, 37, 0.8) 100%);
+              }
             }
+          }
         }
+      }
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/views/monitoring/screen/components/main.vue b/src/views/monitoring/screen/components/main.vue
index 3cce580..f6c4920 100644
--- a/src/views/monitoring/screen/components/main.vue
+++ b/src/views/monitoring/screen/components/main.vue
@@ -162,7 +162,7 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
 //const baseApi = import.meta.env.VITE_APP_BASE_API
 //const apiUrl = baseApi.replace(/https?:/, '');
 const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
-// const wsUrl = `ws://172.1.2.158:9010/websocket/${userInfo.userName}`; //websocket地址
+// const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
 
 const emit = defineEmits(['tableHeaderData']);
 // const listData = ref([
diff --git a/vite.config.ts b/vite.config.ts
index 66dd95b..aa74460 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,14 +44,23 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       force: false, //是否强制依赖预构建
       hmr: true, //配置HMR
       proxy: {
-        [env.VITE_APP_BASE_API]: {
-          // target: 'http://172.1.2.196:9010/', //本地接口地址
+        '/dev-api': {
+          target: 'http://172.1.2.196:9010/', //本地接口地址
           // target: 'http://172.1.2.158:9010/', //本地接口地址
-          target: 'http://10.10.10.56:9010/', //线上测试接口地址
+          // target: 'http://10.10.10.56:9010/', //线上测试接口地址
           changeOrigin: true,
-          rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
+          rewrite: path => path.replace(/^\/dev-api/, '')
         }
       }
+      // proxy: {
+      //   [env.VITE_APP_BASE_API]: {
+      //     // target: 'http://172.1.2.196:9010/', //本地接口地址
+      //     target: 'http://172.1.2.158:9010/', //本地接口地址
+      //     // target: 'http://10.10.10.56:9010/', //线上测试接口地址
+      //     changeOrigin: true,
+      //     rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
+      //   }
+      // }
     },
     plugins: [
       vue(),