增加部分新功能

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'
   });
 }

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;

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,
+    url: '/dc/dcBusiAlertJob/list/vo',
-    method: 'get'
+    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'
   });
 }

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';
 

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']>

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']

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;
       }
     }
   }

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: {
+  toolbox: {
-  //   feature: {
+    show: true,
-  //     restore: {}
+    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 = {};
+  const params = deptId.value;
-  getDevices().then((res: any) => {
+  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;

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() {
+function handleCurrentChange(val: any) {
-//     //获取天气
+  //点击分页
-//     getWeather().then((res: any) => {
+  params.pageNum = val;
-//         if (res.code === 200) {
+  getwaringList();
-//             weatherData.value = res.data;
+}
-//         }
-//     });
-// }
 
 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>

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"
+            <n-collapse-item
-              :key="index">
+              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 }}{{
+                <span v-for="(res, index) in item.header_valve" :key="index">
-                  res.paramUnit }}</span>
+                  <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"
+            <n-collapse-item
-              :key="index">
+              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 }}{{
+                <span v-for="(res, index) in item.header_pump" :key="index">
-                  res.paramUnit }}</span>
+                  <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 zoneType = ref(); //1:一个分区,2:2个分区,3:3:个分区,4:别墅区
-const timer = ref()
+const deviceImg = ref();
-const isCurrentRoute = ref(true)
+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 arr = infoData.value[index].header_main;
-  const obj = arr.find((item: any) => item.id === id)
+  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 ? `<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>

src/views/monitoring/devicemanage/index.scss

@@ -17,7 +17,7 @@
       width: 12%;
       height: calc(100vh - 95px - 30px); //屏幕高度-头部header高度-底部高度
       flex-shrink: 0;
-            border: 1px solid #0D55B0;
+      border: 1px solid #0d55b0;
       padding: 10px 0;
       // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 12);
       margin-right: 1vw;
@@ -160,6 +160,12 @@
               }
             }
           }
+          // .switch {
+          //   position: absolute;
+          //   z-index: 99;
+          //   cursor: pointer;
+          //   overflow: hidden;
+          // }
 
           // .dataInfo {
           //     position: absolute;
@@ -196,6 +202,20 @@
             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%;
+          // }
         }
 
         .deviceImgB {
@@ -409,7 +429,7 @@
         // }
 
         .devicInfo {
-                    color: #B1E3FF;
+          color: #b1e3ff;
           padding: 0 3rem;
           font-family: 'AlibabaPuHuiTiRegular';
 
@@ -424,7 +444,7 @@
               display: block;
               width: 6px;
               height: 50px;
-                            background: linear-gradient(270deg, #679FFF 0%, rgba(17, 119, 231, 0.698) 100%);
+              background: linear-gradient(270deg, #679fff 0%, rgba(17, 119, 231, 0.698) 100%);
               border-radius: 0px 0px 0px 0px;
               margin-right: 18px;
             }
@@ -446,7 +466,7 @@
                 .colItem {
                   .n-collapse-item__header-main {
                     font-size: 18px;
-                                        color: #1FB1FF;
+                    color: #1fb1ff;
                     padding: 0 22px;
 
                     .n-collapse-item-arrow {
@@ -472,7 +492,21 @@
                         line-height: 30px;
 
                         span {
-                                                    flex: 0 0 calc(100% / 2)
+                          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;
+                          }
                         }
 
                         span:nth-child(even) {
@@ -480,23 +514,23 @@
                         }
                       }
 
-                                            .content.pump {
+                      // .content.pump {
-                                                span {
+                      //   span {
-                                                    flex: auto;
+                      //     flex: auto;
-                                                }
+                      //   }
-                                            }
+                      // }
                     }
                   }
                 }
 
                 .colItem.n-collapse-item--active {
                   .n-collapse-item-arrow {
-                                        transform: none
+                    transform: none;
                   }
                 }
 
                 .colItem:not(:first-child) {
-                                    border-top: none
+                  border-top: none;
                 }
 
                 .colItem:not(:first-child)::before {
@@ -504,7 +538,12 @@
                   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%);
+                  background: linear-gradient(
+                    90deg,
+                    rgba(31, 225, 255, 0) 0%,
+                    rgba(189, 220, 255, 0.94) 50%,
+                    rgba(31, 225, 255, 0) 97%
+                  );
                 }
               }
             }
@@ -629,7 +668,7 @@
           font-size: 1.6rem;
           font-family: 'AlibabaPuHuiTiRegular';
           text-align: center;
-                    color: #B1E3FF;
+          color: #b1e3ff;
           margin-top: 40vh;
         }
       }
@@ -678,7 +717,6 @@
     background-blend-mode: multiply;
 
     .layout {
-
       .sidebar {
         background-color: rgba(29, 30, 31, 0.8);
       }

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([

vite.config.ts

@@ -44,14 +44,23 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       force: false, //是否强制依赖预构建
       hmr: true, //配置HMR
       proxy: {
-        [env.VITE_APP_BASE_API]: {
+        '/dev-api': {
-          // target: 'http://172.1.2.196:9010/', //本地接口地址
+          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(),