|
|
@@ -0,0 +1,257 @@
|
|
|
+<template>
|
|
|
+ <hc-drawer v-model="isShow" to-id="hc-main-box">
|
|
|
+ <div class="hc-tentative-acquisition-humidity-equipment-info">
|
|
|
+ <div class="data-statistics">
|
|
|
+ <hc-body>
|
|
|
+ <div class="equipment-list-data-item temperature hc-flex">
|
|
|
+ <div class="icon-box">
|
|
|
+ <hc-icon name="temp-hot" />
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="name">温度</div>
|
|
|
+ <div class="num">24.1℃</div>
|
|
|
+ <div class="time">记录时间：2024年8月19日 13:55:24</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-list-data-item humidity hc-flex">
|
|
|
+ <div class="icon-box">
|
|
|
+ <hc-icon name="water-percent" />
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="name">湿度</div>
|
|
|
+ <div class="num">24.1%</div>
|
|
|
+ <div class="time">记录时间：2024年8月19日 13:55:24</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-list-data-echart">
|
|
|
+ <hc-charts :option="setChartsOption" />
|
|
|
+ </div>
|
|
|
+ </hc-body>
|
|
|
+ </div>
|
|
|
+ <div class="data-table">
|
|
|
+ <hc-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="mr-14px w-410px">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateTimeArr" type="datetimerange" :shortcuts="shortcuts" class="w-full!"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ range-separator="至" start-placeholder="开始日期时间" end-placeholder="结束日期时间"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="searchClick">搜索</el-button>
|
|
|
+ </template>
|
|
|
+ 还在开发中...
|
|
|
+ </hc-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </hc-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, watch } from 'vue'
|
|
|
+import { getObjValue } from 'js-fast-way'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+//双向绑定
|
|
|
+const isShow = defineModel('modelValue', {
|
|
|
+ default: false,
|
|
|
+})
|
|
|
+
|
|
|
+//监听可否编辑
|
|
|
+const dataInfo = ref(props.data)
|
|
|
+watch(() => props.data, (data) => {
|
|
|
+ dataInfo.value = getObjValue(data)
|
|
|
+}, { immediate: true, deep: true })
|
|
|
+
|
|
|
+//监听显示
|
|
|
+watch(isShow, (val) => {
|
|
|
+ if (val) getInfoData()
|
|
|
+})
|
|
|
+
|
|
|
+//获取数据详情
|
|
|
+const getInfoData = () => {
|
|
|
+ setChartsData()
|
|
|
+}
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({ nodeId: -1, startTime: '', endTime: '', deviceAddr: null })
|
|
|
+const searchClick = () => {
|
|
|
+ console.log(searchForm.value)
|
|
|
+ console.log(dateTimeArr.value)
|
|
|
+}
|
|
|
+
|
|
|
+//日期时间选择
|
|
|
+const dateTimeArr = ref('')
|
|
|
+const shortcuts = [
|
|
|
+ {
|
|
|
+ text: '最近1小时',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date(end - 3600 * 1000) // 1小时前
|
|
|
+ return [start, end]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '今天',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date(end.setHours(0, 0, 0, 0))
|
|
|
+ return [start, new Date()]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '昨天',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ end.setDate(end.getDate() - 1)
|
|
|
+ const start = new Date(end.setHours(0, 0, 0, 0))
|
|
|
+ return [start, new Date(start.getTime() + 24 * 3600 * 1000 - 1)]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近7天',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date(end - 7 * 24 * 3600 * 1000)
|
|
|
+ return [start, end]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近30天',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date(end - 30 * 24 * 3600 * 1000)
|
|
|
+ return [start, end]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '本月',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date(end.getFullYear(), end.getMonth(), 1)
|
|
|
+ return [start, end]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '上个月',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date(end.getFullYear(), end.getMonth() - 1, 1)
|
|
|
+ const lastDayOfLastMonth = new Date(end.getFullYear(), end.getMonth(), 0)
|
|
|
+ return [start, lastDayOfLastMonth]
|
|
|
+ },
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//图表数据
|
|
|
+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 },
|
|
|
+ ]
|
|
|
+ setChartsOption.value = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ let result = params[0].axisValue + '<br/>'
|
|
|
+ params.forEach(function (item) {
|
|
|
+ let unit = item.seriesName === '温度' ? '°C' : '%'
|
|
|
+ result += item.marker + ' ' + item.seriesName + ': ' + item.value + unit + '<br/>'
|
|
|
+ })
|
|
|
+ return result
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['温度', '湿度'],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data.map(item => item.time),
|
|
|
+ axisLine: {
|
|
|
+ onZero: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '温度(°C)',
|
|
|
+ min: 23,
|
|
|
+ max: 33,
|
|
|
+ interval: 2,
|
|
|
+ position: 'left',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}°C',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '湿度(%)',
|
|
|
+ min: 20,
|
|
|
+ max: 70,
|
|
|
+ interval: 10,
|
|
|
+ position: 'right',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}%',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '温度',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: data.map(item => item.temperature),
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#1D4590',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#1D4590',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '湿度',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: data.map(item => item.humidity),
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#91CC75',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#91CC75',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import "~src/styles/tentative/acquisition/equipment";
|
|
|
+</style>
|
