上下限阈值

src/api/pms/alarm/index.ts

@@ -15,6 +15,9 @@ export interface IotAlarmSettingVO {
 // 告警设置 API
 export const IotAlarmSettingApi = {
   // 查询告警设置分页
+  getDeviceRange: async (devicecode: any, identifier:string) => {
+    return await request.get({ url: `/rq/iot-alarm-setting/get-device-range?deviceName=` + devicecode+`&identifier=` + identifier })
+  },
   getIotAlarmSettingPage: async (params: any, ifdevice:string) => {
     return await request.get({ url: `/rq/iot-alarm-setting/page/` + ifdevice, params })
   },

src/views/pms/device/monitor/IotAlarmSettingForm.vue

@@ -14,10 +14,18 @@
         <el-input v-model="formData.deviceName" disabled />
       </el-form-item>
       <el-form-item label="告警属性" prop="alarmProperty">
-        <el-input v-model="formData.alarmProperty" placeholder="请输入告警属性" />
+<!--        <el-input v-model="formData.alarmProperty" placeholder="请输入告警属性" />-->
+        <el-select v-model="formData.alarmProperty" placeholder="请选择告警属性" clearable filterable @change="propertyChange">
+          <el-option
+            v-for="dict in specs"
+            :key="dict.identifier"
+            :label="dict.modelName"
+            :value="dict.modelName"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="属性标识" prop="propertyCode">
-        <el-input v-model="formData.propertyCode" placeholder="请输入属性标识" />
+        <el-input v-model="formData.propertyCode" placeholder="请输入属性标识" disabled />
       </el-form-item>
       <el-form-item label="上限值" prop="maxValue">
         <el-input v-model="formData.maxValue" placeholder="请输入上限" />
@@ -34,6 +42,8 @@
 </template>
 <script setup lang="ts">
 import { IotAlarmSettingApi, IotAlarmSettingVO } from '@/api/pms/alarm'
+import {IotDeviceApi} from "@/api/pms/device";
+import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";
 
 /** 告警设置 表单 */
 defineOptions({ name: 'IotAlarmSettingForm' })
@@ -45,6 +55,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const specs = ref([])
 const formData = ref({
   id: undefined,
   classifyId: undefined,
@@ -54,13 +65,14 @@ const formData = ref({
   maxValue: undefined,
   minValue: undefined,
   alarmProperty: undefined,
+  propertyCode: undefined,
 })
 const formRules = reactive({
   classifyName: [{ required: true, message: '分类不能为空', trigger: 'blur' }],
   alarmProperty: [{ required: true, message: '告警属性不能为空', trigger: 'blur' }],
   propertyCode: [{ required: true, message: '属性标识不能为空', trigger: 'blur' }],
-  maxValue: [{ required: true, message: '上限不能为空', trigger: 'blur' }],
-  minValue: [{ required: true, message: '下限不能为空', trigger: 'blur' }],
+  // maxValue: [{ required: true, message: '上限不能为空', trigger: 'blur' }],
+  // minValue: [{ required: true, message: '下限不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
 const ifDevice = ref(false)
@@ -87,6 +99,14 @@ const open = async (type: string, id?: number,classId:any, className:any,deviceI
       formLoading.value = false
     }
   }
+  if (deviceId) {
+    await IotDeviceApi.getIotDeviceTds(deviceId).then(res => {
+      specs.value = res
+      specs.value = specs.value.sort((a, b) => {
+        return b.modelOrder - a.modelOrder
+      })
+    })
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -114,6 +134,12 @@ const submitForm = async () => {
   }
 }
 
+const propertyChange = (value) =>{
+  debugger
+  const model = specs.value.filter((item) => item.modelName === value)
+  formData.value.propertyCode = model[0].identifier
+}
+
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {

src/views/pms/device/monitor/RangeSet.vue

@@ -25,7 +25,7 @@
 <!--                @clear="handleClear"-->
 <!--              />-->
               <el-select style="width: 250px" v-model="selectedDeviceId" v-if="selectedNode&&ifDevice==='2'" :placeholder="t('iotMaintain.deviceHolder')"
-                         @clear="handleClear" @change="handleDeviceSelected" :class="{ 'shake-highlight': isDeviceSelectShake }" >
+                         @clear="handleClear" @change="handleDeviceSelected" :class="{ 'shake-highlight': isDeviceSelectShake }" filterable>
                 <el-option
                   v-for="item in devices"
                   :key="item.id"

src/views/pms/device/monitor/TdDeviceInfo.vue

@@ -92,6 +92,7 @@ import {IotDeviceApi} from "@/api/pms/device";
 import * as echarts from 'echarts'
 import dayjs from 'dayjs'
 import {IotStatApi} from "@/api/pms/stat";
+import {IotAlarmSettingApi} from "@/api/pms/alarm";
 
 const { params, name } = useRoute() // 查询参数
 const info = ref({})
@@ -114,14 +115,16 @@ const endTime = ref('')
 const topicName = ref([])
 const loading = ref(false)
 const topic = ref('')
+// 设置固定阈值
 
 const handleDateChange = async (val) => {
   if (val && val.length === 2) {
     await getChart(val)
     await renderChart()
-
   }
 }
+
+
 const defaultEnd = dayjs()
 const defaultStart = defaultEnd.subtract(1, 'day')
 const dateRange = ref([
@@ -155,16 +158,23 @@ const getChart = async (range) =>{
 // 初始化图表
 const renderChart = async () => {
   if (!chartContainer.value) return
-
+  let upperLimit;
+  let lowerLimit;
+  await IotAlarmSettingApi.getDeviceRange(params.code, topic.value).then(res=>{
+    if (res){
+      if (res.maxValue){
+        upperLimit = res.maxValue
+      }
+      if (res.minValue){
+        lowerLimit = res.minValue
+      }
+    }
+  })
   // 销毁旧实例
   if (chartInstance) chartInstance.dispose()
 
   chartInstance = markRaw(echarts.init(chartContainer.value))
 
-  // 设置固定阈值
-  const upperLimit = 30  // 固定上限阈值
-  const lowerLimit = 12   // 固定下限阈值
-
   const option = {
     title: {
       text: topicName.value + '数据趋势',
@@ -202,7 +212,7 @@ const renderChart = async () => {
       {
         data: result.value.map(() => upperLimit),
         type: 'line',
-        name: '上限阈值(100)',
+        name: '上限阈值',
         lineStyle: {
           color: '#f56c6c',  // 红色虚线
           type: 'dashed'
@@ -214,7 +224,7 @@ const renderChart = async () => {
       {
         data: result.value.map(() => lowerLimit),
         type: 'line',
-        name: '下限阈值(95)',
+        name: '下限阈值',
         lineStyle: {
           color: '#e6a23c',  // 橙色虚线
           type: 'dashed'
@@ -225,7 +235,7 @@ const renderChart = async () => {
     ],
     // 添加图例显示各线条含义
     legend: {
-      data: ['实时数据', '上限阈值(100)', '下限阈值(95)'],
+      data: ['实时数据', '上限阈值', '下限阈值'],
       top: 30
     }
   }