111

src/views/tentative/acquisition/humidity.vue

@@ -1,5 +1,5 @@
 <template>
-    <hc-card scrollbar>
+    <hc-card scrollbar :loading="isLoading">
         <template #header>
             <div class="w-40">
                 <el-select v-model="searchForm.status" clearable placeholder="设备状态">
@@ -23,8 +23,8 @@
                             <hc-icon name="restart" />
                         </el-tooltip>
                     </div>
-                    <div class="icon-btn ml-10px text-#f0434c">
-                        <el-tooltip content="关机">
+                    <div class="icon-btn ml-10px text-#f0434c" @click="searchClick">
+                        <el-tooltip :content="item.deviceStatus === 'normal' ? '关机' : '开机'">
                             <hc-icon name="shut-down" />
                         </el-tooltip>
                     </div>
@@ -48,17 +48,17 @@
             </hc-card-item>
         </div>
         <!-- 详情 -->
-        <HcEquipmentData v-model="isEquipmentDataShow" :data="equipmentData" />
+        <HcEquipmentData v-model="isEquipmentDataShow" :data="equipmentData" @close="getDeviceList" />
     </hc-card>
 </template>
 
 <script setup>
 import { nextTick, onActivated, ref } from 'vue'
 import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
-import { useClick } from 'hc-vue3-ui'
-import dayjs from 'dayjs'
 import HcEquipmentData from './model/equipment-data.vue'
 import mainApi from '~api/tentative/acquisition/humidity'
+import { useClick } from 'hc-vue3-ui'
+import dayjs from 'dayjs'
 
 //页面被激活
 onActivated(() => {
@@ -66,6 +66,7 @@ onActivated(() => {
 })
 
 //获取数据
+const isLoading = ref(true)
 const useDataApi = async () => {
     await useClick()
     getToken().then()
@@ -74,6 +75,7 @@ const useDataApi = async () => {
 //获取token
 const yunToken = ref('')
 const getToken = async () => {
+    isLoading.value = true
     const { code, msg, data } = await mainApi.getToken({
         loginName: 'h240816wjbm',
         password: 'h240816wjbm',
@@ -82,7 +84,9 @@ const getToken = async () => {
     if (code === 1000 && !isNullES(token)) {
         yunToken.value = token
         await getDeviceList()
+        isLoading.value = false
     } else {
+        isLoading.value = false
         window.$message.error(msg ?? '获取数据失败，请联系管理员')
     }
 }
@@ -99,6 +103,7 @@ const getDeviceList = async () => {
     await useClick()
     if (isNullES(yunToken.value)) {
         deviceDataList.value = []
+        isLoading.value = false
         return
     }
     const { data } = await mainApi.getRealTimeData(yunToken.value)
@@ -108,6 +113,7 @@ const getDeviceList = async () => {
     const arr = getArrValue(data)
     if (arr.length <= 0) {
         deviceDataList.value = arr
+        isLoading.value = false
         return
     }
     //子级数据是否存在
@@ -120,6 +126,7 @@ const getDeviceList = async () => {
             ],
         }]
         deviceDataList.value = arr
+        isLoading.value = false
         return
     }
     //最子级数据判断
@@ -130,6 +137,7 @@ const getDeviceList = async () => {
             { registerName: '湿度', data: '0', unit: '%', time: dateTime },
         ]
         deviceDataList.value = arr
+        isLoading.value = false
         return
     }
     //最子级数据
@@ -137,6 +145,7 @@ const getDeviceList = async () => {
         arr[0].dataItem[0].registerItem[i].time = dateTime
     }
     deviceDataList.value = arr
+    isLoading.value = false
 }
 
 //查看详情

src/views/tentative/acquisition/model/equipment-data.vue

@@ -23,13 +23,13 @@
                             <div class="time">记录时间：{{ deviceDataInfo.time }}</div>
                         </div>
                     </div>
-                    <div class="equipment-list-data-echart">
+                    <div v-loading="isLoading" class="equipment-list-data-echart">
                         <hc-charts :option="setChartsOption" />
                     </div>
                 </hc-body>
             </div>
             <div class="data-table">
-                <hc-card>
+                <hc-card :loading="isLoading">
                     <template #header>
                         <div class="mr-14px w-410px">
                             <el-date-picker
@@ -38,7 +38,7 @@
                                 range-separator="至" start-placeholder="开始日期时间" end-placeholder="结束日期时间"
                             />
                         </div>
-                        <el-button type="primary" @click="searchClick">搜索</el-button>
+                        <el-button type="primary" @click="getTableData">搜索</el-button>
                     </template>
                     <template #extra>
                         <el-button @click="toBackClick">
@@ -47,9 +47,6 @@
                         </el-button>
                     </template>
                     <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false" :is-current-row="false" />
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
                 </hc-card>
             </div>
         </div>
@@ -58,10 +55,9 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
-import { useClick } from 'hc-vue3-ui'
-import dayjs from 'dayjs'
+import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import mainApi from '~api/tentative/acquisition/humidity'
+import dayjs from 'dayjs'
 
 const props = defineProps({
     data: {
@@ -70,6 +66,9 @@ const props = defineProps({
     },
 })
 
+//事件
+const emit = defineEmits(['close'])
+
 //双向绑定
 const isShow = defineModel('modelValue', {
     default: false,
@@ -87,9 +86,24 @@ watch(isShow, (val) => {
 })
 
 //获取数据详情
+const isLoading = ref(true)
 const getInfoData = async () => {
+    isLoading.value = true
+    getDateTime()
     await getDeviceList()
-    setChartsData()
+    await getTableData()
+    isLoading.value = false
+}
+
+//处理默认的搜索时间
+const getDateTime = () => {
+    const now = dayjs()
+    const hourAgo = now.subtract(1, 'hour')
+    const start = hourAgo.format('YYYY-MM-DD HH:mm:ss')
+    const end = now.format('YYYY-MM-DD HH:mm:ss')
+    dateTimeArr.value = [start, end]
+    searchForm.value.startTime = start
+    searchForm.value.endTime = end
 }
 
 //获取设备列表
@@ -98,6 +112,7 @@ const getDeviceList = async () => {
     const { token, deviceAddr } = getObjValue(dataInfo.value)
     if (isNullES(token) || isNullES(deviceAddr)) {
         deviceDataInfo.value = {}
+        isLoading.value = false
         return
     }
     let temperature = '0℃', humidity = '0%'
@@ -106,18 +121,21 @@ const getDeviceList = async () => {
     const arr = getArrValue(data)
     if (arr.length <= 0) {
         setDeviceData({ temperature, humidity })
+        isLoading.value = false
         return
     }
     //子级数据是否存在
     const dataItem = getArrValue(arr[0].dataItem)
     if (dataItem.length <= 0) {
         setDeviceData({ temperature, humidity })
+        isLoading.value = false
         return
     }
     //最子级数据判断
     const registerItem = getArrValue(dataItem[0].registerItem)
     if (registerItem.length <= 0) {
         setDeviceData({ temperature, humidity })
+        isLoading.value = false
         return
     }
     //最子级数据
@@ -131,6 +149,7 @@ const getDeviceList = async () => {
     }
     //设置数据
     setDeviceData({ temperature, humidity })
+    isLoading.value = false
 }
 
 //设置空数据
@@ -144,32 +163,63 @@ const setDeviceData = ({ temperature, humidity }) => {
 }
 
 //搜索表单
-const searchForm = ref({ nodeId: -1, startTime: '', endTime: '', deviceAddr: null, current: 1, size: 20, total: 0 })
-const searchClick = () => {
-    console.log(searchForm.value)
-    console.log(dateTimeArr.value)
-}
-
-//分页被点击
-const pageChange = ({ current, size }) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
-}
+const searchForm = ref({ nodeId: -1, startTime: '', endTime: '', deviceAddr: null })
 
 //历史记录表格
 const tableColumn = [
-    { key: 'name', name: '设备地址' },
-    { key: 'text', name: '温度' },
-    { key: 'color', name: '湿度' },
-    { key: 'time', name: '记录时间' },
+    { key: 'deviceAddr', name: '设备地址' },
+    { key: 'temperature', name: '温度' },
+    { key: 'humidity', name: '湿度' },
+    { key: 'recordTimeStr', name: '记录时间' },
 ]
 const tableData = ref([])
 
 //获取历史记录数据
 const tableLoading = ref(false)
 const getTableData = async () => {
-
+    const { token, deviceAddr } = getObjValue(dataInfo.value)
+    if (isNullES(token) || isNullES(deviceAddr)) {
+        deviceDataInfo.value = {}
+        isLoading.value = false
+        return
+    }
+    isLoading.value = true
+    const { data } = await mainApi.getHistoryList(token, {
+        ...searchForm.value,
+        deviceAddr: deviceAddr,
+    })
+    //判断数据是否为空
+    const arr = getArrValue(data)
+    if (arr.length <= 0) {
+        tableData.value = arr
+        isLoading.value = false
+        return
+    }
+    //处理数据
+    let newArr = []
+    for (let i = 0; i < arr.length; i++) {
+        let temperature = '0', humidity = '0'
+        const itemData = getArrValue(arr[i].data)
+        if (itemData.length === 2) {
+            if (itemData[0].registerName === '温度') {
+                temperature = itemData[0].value
+            }
+            if (itemData[1].registerName === '湿度') {
+                humidity = itemData[1].value
+            }
+        }
+        const time = new dayjs(arr[i].recordTimeStr).format('HH:mm')
+        newArr.push({
+            temperature,
+            humidity,
+            deviceAddr: arr[i].deviceAddr,
+            recordTimeStr: arr[i].recordTimeStr,
+            time,
+        })
+    }
+    tableData.value = newArr
+    setChartsData(newArr)
+    isLoading.value = false
 }
 
 //日期时间选择
@@ -235,22 +285,11 @@ const shortcuts = [
     },
 ]
 
-
-
 //图表数据
 const setChartsOption = ref({})
-const setChartsData = () => {
-    const data = [
-        { time: '00:00:00', temperature: 27, humidity: 50 },
-        { time: '00:30:00', temperature: 28.5, humidity: 41 },
-        { time: '01:00:00', temperature: 32, humidity: 60 },
-        { time: '01:30:00', temperature: 27, humidity: 48 },
-        { time: '02:00:00', temperature: 28, humidity: 40 },
-        { time: '02:30:00', temperature: 29.5, humidity: 55 },
-        { time: '03:00:00', temperature: 30.5, humidity: 48 },
-        { time: '03:30:00', temperature: 30, humidity: 61 },
-        { time: '04:00:00', temperature: 27.2, humidity: 54 },
-    ]
+const setChartsData = (arr) => {
+    const newArr = deepClone(arr)
+    const data = newArr.slice(0, 10)
     setChartsOption.value = {
         tooltip: {
             trigger: 'axis',
@@ -275,6 +314,10 @@ const setChartsData = () => {
             axisLine: {
                 onZero: false,
             },
+            axisLabel: {
+                rotate: 45, // 旋转45度
+                interval: 0, // 显示所有标签
+            },
         },
         yAxis: [
             {
@@ -343,6 +386,7 @@ const toBackClick = () => {
     tableData.value = []
     dateTimeArr.value = ''
     setChartsOption.value = {}
+    emit('close')
 }
 </script>