图表信息页修改

src/api/device/types.ts

@@ -42,7 +42,7 @@ export interface headerVo {
   ctrlpro: any;
 }
 export interface deetsVo {
-  centerDeviceCode: string;
+  centerDeviceCode: string | number;
   deviceName: string;
 }
 export interface partitionVo {

src/styles/index.scss

@@ -4,7 +4,6 @@
 @import './dark.scss';
 @import './style.scss';
 
-
 .app-container {
   padding: 20px;
 
@@ -16,7 +15,6 @@
     box-shadow: var(--el-box-shadow-light);
     background-color: var(--el-bg-color-overlay);
   }
-
 }
 
 .n-drawer-container {
@@ -125,7 +123,7 @@
         .headerRowClass {
           .headerCellClass {
             color: #fff;
-            background-color: #001D40;
+            background-color: #001d40;
             border-bottom: none;
           }
         }
@@ -134,9 +132,9 @@
           background-color: transparent;
 
           .cellClass {
-            color: #B1E3FF;
+            color: #b1e3ff;
             border-bottom: none;
-            background-color: #01153A;
+            background-color: #01153a;
 
             .confirm {
               background-color: #022a5a !important;
@@ -147,7 +145,7 @@
 
         .rowClass.el-table__row--striped {
           .cellClass {
-            background-color: #001D40;
+            background-color: #001d40;
           }
         }
       }
@@ -155,13 +153,31 @@
       .warClose {
         width: 50px;
         cursor: pointer;
-        color: #B1E3FF;
+        color: #b1e3ff;
         margin: 100px auto 0 auto;
       }
     }
   }
 }
 
+.n-modal-container {
+  .modalClass {
+    .n-card-header {
+      padding: 1.5rem;
+    }
+    .n-card__content {
+      padding: 0 1.5rem;
+    }
+    .n-card__footer {
+      text-align: right;
+      padding: 1.5rem;
+      button {
+        margin-left: 2rem;
+      }
+    }
+  }
+}
+
 .el-overlay {
   z-index: 99999 !important;
 }

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

@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -47,8 +48,6 @@ declare module '@vue/runtime-core' {
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
-    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NMenu: typeof import('naive-ui')['NMenu']
     NModal: typeof import('naive-ui')['NModal']

src/views/details/index.scss

@@ -23,13 +23,16 @@
       .item {
         margin-bottom: 20px;
       }
+      .formBtn {
+        padding: 0 20px;
+      }
     }
   }
   .echart {
     .comparisonInfo {
       .stackedLine {
         width: 100%;
-        height: 82vh;
+        height: 74vh;
         font-size: 1.4rem;
         text-align: center;
         color: #606266;

src/views/details/index.vue

@@ -19,7 +19,7 @@
         </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-form-item class="item" label="时间:" prop="time">
           <el-date-picker
             v-model="searchForm.time"
             type="datetimerange"
@@ -31,7 +31,7 @@
             @change="timeChange"
           />
         </el-form-item>
-        <el-form-item class="item" label="设备" prop="device">
+        <el-form-item class="item" label="设备:" prop="device">
           <el-select
             v-model="searchForm.device"
             multiple
@@ -50,7 +50,7 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item class="item" label="参数" prop="parameter">
+        <el-form-item class="item" label="参数:" prop="parameter">
           <el-select
             v-model="searchForm.parameter"
             multiple
@@ -70,7 +70,7 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item class="item" label="分区" prop="partition">
+        <el-form-item class="item" label="分区:" prop="partition">
           <el-select
             v-model="searchForm.partition"
             filterable
@@ -88,10 +88,15 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item class="item">
+          <el-checkbox v-model="searchForm.showZero" label="是否显示0值" size="large" />
+        </el-form-item>
+        <div class="formBtn">
           <el-form-item class="item">
             <el-button type="primary" @click="submitForm(searchRef)">搜索</el-button>
             <el-button @click="resetForm(searchRef)">重置</el-button>
           </el-form-item>
+        </div>
       </el-form>
     </el-card>
     <el-card class="echart" shadow="always">
@@ -99,6 +104,7 @@
         <div ref="stackedRef" class="stackedLine">暂无数据</div>
       </div>
     </el-card>
+    <!-- <Test /> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -109,6 +115,7 @@ 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 Test from './test.vue';
 
 import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
 import { deetsVo, partitionVo, parameterVo, seriesVo } from '@/api/device/types';
@@ -126,14 +133,16 @@ const searchForm = reactive({
   time: '',
   device: [],
   parameter: [],
-  partition: ''
+  partition: '',
+  showZero: false
 });
 const filterForm = reactive({
   startTime: '',
   endTime: '',
   deviceUuid: '',
   paramCode: '',
-  partion: ''
+  partion: '',
+  showZero: false
 });
 const rules = reactive<FormRules>({
   time: [
@@ -210,7 +219,26 @@ const options = {
       // dataView: { readOnly: false },
       magicType: { type: ['line', 'bar'] },
       restore: {},
-      saveAsImage: {}
+      saveAsImage: {},
+      // 工具配置
+      myLeft: {
+        show: true,
+        title: '上一个',
+        icon: 'path://M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z',
+        onclick: () => {
+          keyClick('0');
+          // prevClick();
+        }
+      },
+      myRight: {
+        show: true,
+        title: '下一个',
+        icon: 'path://M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z',
+        onclick: () => {
+          keyClick('1');
+          // nextClick();
+        }
+      }
     }
   },
   dataZoom: [
@@ -1085,6 +1113,64 @@ onMounted(() => {
   // chart.setOption(options2);
 });
 
+document.addEventListener('keyup', e => {
+  //监听键盘事件
+  console.log('按键:', e.key);
+  if (e.key === 'ArrowUp') {
+    keyClick('0');
+  } else if (e.key === 'ArrowDown') {
+    keyClick('1');
+  }
+});
+function keyClick(res: string) {
+  //键盘事件
+  if (filterForm.startTime === '' && filterForm.endTime === '') {
+    ElMessage({
+      message: '请选择时间',
+      type: 'warning'
+    });
+    return;
+  }
+  if (filterForm.deviceUuid === '') {
+    ElMessage({
+      message: '请选择设备',
+      type: 'warning'
+    });
+    return;
+  }
+  if (filterForm.paramCode === '') {
+    ElMessage({
+      message: '请选择参数',
+      type: 'warning'
+    });
+    return;
+  }
+  const device = searchForm.device;
+  console.log('已选设备:', searchForm.device);
+  if (device.length === 1 && deviceData.value?.length != 0) {
+    deviceData.value?.map((item: deetsVo, index: number) => {
+      console.log('遍历设备:', item, index);
+      if (res === '0') {
+        //上一个
+        if (device[0] === item.centerDeviceCode && index != 0) {
+          searchForm.device = [deviceData.value[index - 1].centerDeviceCode];
+          filterForm.deviceUuid = searchForm.device.toString();
+          console.log('当前设备:', searchForm.device);
+        }
+      } else if (res === '1') {
+        //下一个
+        if (device[0] === item.centerDeviceCode && index + 1 != deviceData.value?.length) {
+          console.log('当前设备:', item.deviceName, index);
+          searchForm.device = [deviceData.value[index + 1].centerDeviceCode];
+          filterForm.deviceUuid = searchForm.device.toString();
+          console.log('当前设备:', searchForm.device);
+        }
+      }
+    });
+  }
+  getDeviceInfo();
+}
+
 function lineClick() {
   //返回上一页
   router.go(-1);
@@ -1108,7 +1194,7 @@ function getParam() {
       for (let i = 0; i < res.data.length - 6; i++) {
         colors.push(randomColor());
       }
-      console.log('colors--', colors);
+      // console.log('colors--', colors);
     }
   });
 }

src/views/details/test.vue

@@ -0,0 +1,136 @@
+<template>
+  <div id="demo"></div>
+</template>
+
+<script setup lang="ts">
+import * as echart from 'echarts';
+import { onMounted, ref } from 'vue';
+
+const start = ref(7);
+const end = ref(9);
+
+onMounted(() => {
+  const myChart = echart.init(document.getElementById('demo'));
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      top: 50,
+      bottom: 50,
+      right: 30
+    },
+    toolbox: {
+      show: true, // 是否显示
+      orient: 'horizontal', // 方向
+      itemSize: 15, // 图标大小
+      itemGap: 8, // 间隔
+      showTitle: true, // 鼠标悬浮时是否显示标题
+      feature: {
+        // 工具配置
+        myLeft: {
+          show: true,
+          title: '上一个',
+          icon: 'path://M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z',
+          onclick: () => {
+            if (end.value < 9) {
+              start.value += 1;
+              end.value += 1;
+            }
+            myChart.dispatchAction({
+              type: 'dataZoom',
+              // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
+              dataZoomIndex: 0,
+              // 开始位置的数值
+              startValue: start.value,
+              // 结束位置的数值
+              endValue: end.value
+            });
+          }
+        },
+        myRight: {
+          show: true,
+          title: '下一个',
+          icon: 'path://M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z',
+          onclick: () => {
+            if (start.value > 0) {
+              start.value -= 1;
+              end.value -= 1;
+            }
+            myChart.dispatchAction({
+              type: 'dataZoom',
+              // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
+              dataZoomIndex: 0,
+              // 开始位置的数值
+              startValue: start.value,
+              // 结束位置的数值
+              endValue: end.value
+            });
+          }
+        }
+      },
+      iconStyle: {
+        // 图标样式
+        color: '#869AD7'
+      },
+      right: 3
+    },
+    xAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
+    },
+    // 设置滑块
+    dataZoom: [
+      {
+        // 是否显示滑块
+        show: true,
+        // 那一条y轴的滑块
+        yAxisIndex: 0,
+        // 当前数据窗口外的数据，被 设置为空
+        filterMode: 'empty',
+        // 滑块的宽高
+        width: 15,
+        height: '70%',
+        // 滚动条內空白显示
+        showDataShadow: false,
+        // 滑块的位置
+        left: '95%',
+        // 起始位置 类目轴表示下标
+        startValue: 10,
+        // 结束位置
+        endValue: 8,
+        // 锁定选择区域的大小  最多显示3个类目
+        zoomLock: true
+      }
+    ],
+    series: [
+      {
+        name: 'Cost',
+        type: 'bar',
+        data: [12, 23, 34, 56, 43, 67, 89, 90, 76, 29]
+      }
+    ]
+  };
+  myChart.setOption(option);
+});
+</script>
+
+<style lang="scss" scoped>
+#demo {
+  width: 600px;
+  height: 300px;
+  border: 1px solid red;
+  padding-right: 30px;
+}
+</style>

src/views/monitoring/devicemanage/components/main.vue

@@ -141,35 +141,44 @@
                       size="small"
                       v-model:value="res.value"
                       style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
-                      @update:value="handleBlur(res)"
+                      @update:value="submitBlur(res)"
                       v-if="res.ctrlpro.valueType === 'bool'"
                     >
                       <template #checked>Y</template>
                       <template #unchecked>N</template>
                     </n-switch>
-                    <n-input-group v-if="res.ctrlpro.valueType != 'bool'">
+                    <n-input
+                      size="tiny"
+                      v-model:value="res.value"
+                      readonly
+                      placeholder="0"
+                      style="width: 80px; opacity: 0.9; text-align: center"
+                      v-if="res.ctrlpro.valueType != 'bool'"
+                      @click="inputClick(res)"
+                    />
+                    <!-- <n-input-group v-if="res.ctrlpro.valueType != 'bool'">
                       <n-input-number
                         size="tiny"
                         v-model:value="res.value"
                         style="width: 80px; opacity: 0.9; text-align: center"
                         button-placement="both"
                         placeholder=""
-                        @keyup.enter="handleBlur(res)"
+                        @keyup.enter="submitBlur(res)"
                       />
                       <n-input-group-label
                         size="tiny"
                         style="opacity: 0.9; text-align: center; cursor: pointer"
-                        @click="handleBlur(res)"
+                        @click="submitBlur(res)"
                         >确定</n-input-group-label
                       >
-                    </n-input-group>
+                    </n-input-group> -->
                     <!-- <n-input-number
                       size="tiny"
                       v-model:value="res.value"
                       style="width: 100px; opacity: 0.9; text-align: center"
                       button-placement="both"
                       placeholder=""
-                      @blur="handleBlur(res)"
+                      @blur="submitBlur(res)"
                       v-if="res.ctrlpro.valueType != 'bool'"
                     /> -->
                   </i>
@@ -200,28 +209,21 @@
                       size="small"
                       v-model:value="res.value"
                       style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
-                      @update:value="handleBlur(res)"
+                      @update:value="submitBlur(res)"
                       v-if="res.ctrlpro.valueType === 'bool'"
                     >
                       <template #checked>Y</template>
                       <template #unchecked>N</template>
                     </n-switch>
-                    <n-input-group v-if="res.ctrlpro.valueType != 'bool'">
-                      <n-input-number
+                    <n-input
                       size="tiny"
                       v-model:value="res.value"
+                      readonly
+                      placeholder="0"
                       style="width: 80px; opacity: 0.9; text-align: center"
-                        button-placement="both"
-                        placeholder=""
-                        @keyup.enter="handleBlur(res)"
+                      v-if="res.ctrlpro.valueType != 'bool'"
+                      @click="inputClick(res)"
                     />
-                      <n-input-group-label
-                        size="tiny"
-                        style="opacity: 0.9; text-align: center; cursor: pointer"
-                        @click="handleBlur(res)"
-                        >确定</n-input-group-label
-                      >
-                    </n-input-group>
                   </i>
                 </span>
               </div>
@@ -256,6 +258,15 @@
       </div> -->
     </div>
     <div class="tips" v-if="infoData?.length === 0">暂无设备信息！</div>
+    <n-modal class="modalClass" v-model:show="showModal">
+      <n-card :title="labelValue" :bordered="false" size="huge" role="dialog" aria-modal="true" style="width: 40rem">
+        <n-input-number v-model:value="ctrlproValue" clearable placeholder="请输入数值" />
+        <template #footer>
+          <n-button @click="cancelClick">取消</n-button>
+          <n-button type="info" @click="submitClick(submitData)">确认</n-button>
+        </template>
+      </n-card>
+    </n-modal>
   </div>
 </template>
 <script lang="ts" setup>
@@ -271,6 +282,10 @@ const zoneType = ref(); //1:一个分区,2:2个分区,3:3:个分区,4:别墅区
 const deviceImg = ref();
 const timer = ref();
 const isCurrentRoute = ref(true);
+const showModal = ref(false);
+const submitData = ref();
+const labelValue = ref('设备');
+const ctrlproValue = ref(null);
 
 // const collapseDefault = ref<any[]>();
 
@@ -354,7 +369,30 @@ const doubleCount = (id: string, index: number) => {
 };
 console.log('doubleCount-', doubleCount);
 
-function handleBlur(data: any) {
+function inputClick(data: any) {
+  //点击输入框
+  submitData.value = data;
+  labelValue.value = data.label;
+  ctrlproValue.value = data.value;
+  showModal.value = true;
+}
+function cancelClick() {
+  //模态框取消
+  labelValue.value = '设备';
+  ctrlproValue.value = null;
+  showModal.value = false;
+}
+
+function submitClick(data: any) {
+  //点击弹框确认
+  if (ctrlproValue.value === '' || ctrlproValue.value === null) {
+    ElNotification({ message: '请输入数值！' });
+  } else {
+    data.value = ctrlproValue.value;
+    submitBlur(data);
+  }
+}
+function submitBlur(data: any) {
   //点击阀门/泵开关
   const submitData = data.ctrlpro;
   submitData.value = data.value;
@@ -362,6 +400,7 @@ function handleBlur(data: any) {
   sendCtrl(submitData).then((res: any) => {
     if (res.code === 200) {
       console.log(res.data);
+      showModal.value = false;
       ElNotification({ message: res.data.msg });
     }
   });

src/views/monitoring/devicemanage/index.scss

@@ -502,10 +502,6 @@
                             .n-input-number {
                               display: flex;
                               align-items: center;
-                              .n-input__prefix,
-                              .n-input__suffix {
-                                display: none;
-                              }
                             }
                           }
                           .switch {

src/views/monitoring/devicemanage/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div ref="screenRef" class="devicemanage">
-    <secton ref="titleRef" class="header">
+    <section ref="titleRef" class="header">
       <Header :titleData="titleData" :settingShow="false" @returnClick="returnClick" />
-    </secton>
+    </section>
     <section class="layout">
       <div ref="sidebar" class="sidebar">
         <Menu menuType="2" @tableMenuData="tableMenuData" />
@@ -23,27 +23,27 @@ import Main from './components/main.vue';
 const titleRef = ref<HTMLElement>();
 const sidebar = ref<HTMLElement>();
 const screenRef = ref<HTMLElement>();
-const sidebarHeight = ref()
-const titleData = ref('')
+const sidebarHeight = ref();
+const titleData = ref('');
 
 onMounted(() => {
-  console.log(sidebar.value)
+  console.log(sidebar.value);
   sidebarHeight.value = sidebar.value?.offsetHeight; //获取侧边栏菜单高度
-  console.log("sidebar:", sidebar.value?.offsetHeight)
+  console.log('sidebar:', sidebar.value?.offsetHeight);
 });
 
 window.addEventListener('resize', () => {
   // 监听窗口改变，改变后重新获取
   sidebarHeight.value = sidebar.value?.offsetHeight; //获取侧边栏菜单高度
-  console.log("监听sidebar:", sidebar.value?.offsetHeight)
+  console.log('监听sidebar:', sidebar.value?.offsetHeight);
 });
 function tableMenuData(data: any) {
   //获取菜单数据
-  titleData.value = data[0].deptName
+  titleData.value = data[0].deptName;
 }
 function returnClick() {
   //返回首页
-  router.replace("/dashboard")
+  router.replace('/dashboard');
 }
 // function screenClick() {
 //   if (screenfull.isEnabled) {