aiot-app/pages/home/components/internetDetail.vue

<template>
  <u-popup
    :show="visible"
    mode="bottom"
    :round="20"
    :closeable="true"
    :close-on-click-overlay="false"
    @close="closePopup"
  >
    <view class="internet-detail-container">
      <!-- 标题栏 -->
      <view class="popup-header">
        <text class="popup-title">设备详情</text>
      </view>

      <scroll-view scroll-y class="popup-body">
        <!-- 仪表盘区域 -->
        <view class="gauge-section">
          <view class="section-title">实时数据</view>
          <view class="gauge-grid">
            <view
              class="gauge-item"
              v-for="(item, index) in getGaugeData"
              :key="index"
            >
              <view
                class="gauge-card"
                v-for="(listItem, j) in item.list"
                :key="j"
              >
                <GaugeChart
                  height="250px"
                  :value="listItem.value"
                  :min="listItem.min"
                  :max="listItem.max"
                  :title="listItem.name"
                  :unit="listItem.unit"
                  :colors="['#5470C6', '#91CC75', '#FAC858', '#EE6666']"
                  :options="{ pointer: { itemStyle: { color: '#5470C6' } } }"
                  :ref="'gaugeChartRef'"
                />
              </view>
            </view>
          </view>
        </view>

        <!-- 实时数据列表 -->
        <view class="data-section">
          <view class="section-title">运行状态</view>
          <view class="data-grid">
            <view class="data-item" v-for="(obj, key) in realData" :key="key">
              <view class="data-label">{{ obj.name }}：</view>
              <view
                class="data-value"
                v-if="
                  obj.dataType &&
                  (obj.dataType.type == 'enum' || obj.dataType.type == 'bool')
                "
              >
                {{ obj.specs[obj.value] }}
              </view>
              <view class="data-value" v-else>
                {{ obj.value }}
                <text v-if="obj.unit" class="data-unit">{{ obj.unit }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 历史折线图 -->
        <view class="history-section">
          <view class="section-title">历史趋势</view>
          <view
            class="chart-card"
            v-for="(item, index) in historyData"
            :key="index"
          >
            <view class="chart-header">
              <text class="chart-name">{{ item.name }}</text>
              <view class="chart-stats">
                <text class="stat-item"
                  >最高值<text class="stat-value"
                    >{{ item.maxValue }} {{ item.unit }}</text
                  ></text
                >
                <text class="stat-item"
                  >最低值<text class="stat-value"
                    >{{ item.minValue }} {{ item.unit }}</text
                  ></text
                >
                <text class="stat-item"
                  >平均值<text class="stat-value avg"
                    >{{ item.avgValue }} {{ item.unit }}</text
                  ></text
                >
              </view>
            </view>
            <view class="chart-tools">
              <dy-date-time-picker
                v-model="item.chartTime"
                :typeEnabled="{
                  date: item.timeType == 'date',
                  month: item.timeType == 'month',
                  year: item.timeType == 'year',
                  week: false,
                }"
                placeholder=""
              />
              <view class="time-type">
                <text
                  :class="{ active: item.timeType === 'date' }"
                  @click="dateClick(item, 'date')"
                  >日</text
                >
                <text
                  :class="{ active: item.timeType === 'month' }"
                  @click="dateClick(item, 'month')"
                  >月</text
                >
                <text
                  :class="{ active: item.timeType === 'year' }"
                  @click="dateClick(item, 'year')"
                  >年</text
                >
              </view>
              <u-button
                type="primary"
                size="mini"
                @click="refreshSingleChart(item)"
                >查询</u-button
              >
            </view>
            <LineChart
              :data="item.trendData"
              title=""
              xAxisName="时间"
              :yAxisName="item.unit"
              height="300px"
              :options="{}"
            />
          </view>
        </view>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script>
import GaugeChart from "./GaugeChart.vue";
import LineChart from "./LineChart.vue";
import {
  getRealData,
  getHistoryData,
  getPhysicalModel,
} from "@/api/ledgerAssets/equipment.js";
import { getMonday } from "@/utils/utils.js";
import { getAssetInfo } from "@/api/repair";
import dayjs from "dayjs";
export default {
  name: "InternetDetail",
  components: {
    GaugeChart,
    LineChart,
  },
  props: {},
  data() {
    return {
      visible: false,
      loading: false,
      realData: [],
      iotDashboardPoint: [],
      info: null,
      dict: {
        chartTime: {
          date: 3,
          month: 2,
          year: 1,
        },
      },
      gaugeData: [],
      historyData: [],
      id: null,
    };
  },
  computed: {
    getGaugeData() {
      let list = [];
      let gaugeData = this.iotDashboardPoint.length
        ? this.gaugeData.filter((item) =>
            this.iotDashboardPoint.find(
              (Point) => Point.identifier == item.identifier && Point.checked,
            ),
          )
        : this.gaugeData.filter((item, index) => index < 6);
      const perRow = 1;
      for (let i = 0; i < gaugeData.length; i += perRow) {
        list.push({
          list: gaugeData.slice(i, i + perRow),
        });
      }
      // this.$nextTick(() => {
      // 	console.log(this.$refs)
      // 	return
      // 	gaugeData.forEach((item, index) => {

      // 		if (this.$refs.gaugeChartRef[index]) {
      // 			this.$refs.gaugeChartRef[index].handleResize();
      // 		}
      // 	});
      // });
      return list;
    },
  },
  methods: {
    closePopup() {
      this.visible = false;
    },
    async open(id) {
      this.id = id;
      const { iotDashboardPoint } = await getAssetInfo(id);
      this.iotDashboardPoint = iotDashboardPoint;
      this.info = await getPhysicalModel(id);
      await this.getRealData();
      this.visible = true;
    },
    async getRealData() {
      this.loading = true;
      try {
        const res = await getRealData(this.id);
        this.realData = res;
        const tempData = this.info.properties || [];
        this.realData.forEach((item) => {
          tempData?.forEach((property) => {
            if (property.identifier == item.identifier) {
              item.max = property.dataType.specs.max;
              item.min = property.dataType.specs.min;
              item.propertyUnit = property.dataType.specs.unit;
              item.unitName = property.dataType.specs.unitName;
              item.specs = property.dataType.specs;
              item.dataType = property.dataType;
              item.propertyName = property.name;
              item.accessMode = property.accessMode;
              item.saveHistory = property.saveHistory;
              item.required = property.required;
              item.chartTime = dayjs(new Date()).format("YYYY-MM");
              // item.chartTime =dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') ;
              item.timeType = "month";
            }
          });
        });
        const gaugeData = this.realData.filter(
          (item) => item.max !== undefined && item.min !== undefined,
        );
        this.gaugeData = gaugeData;
        const historyPromises = this.gaugeData.map((item) =>
          item.saveHistory ? this.getDefaultHistoryData(item) : null,
        );
        this.historyData = await Promise.all(historyPromises);
      } catch (error) {
        console.error("获取数据失败:", error);
      } finally {
        this.loading = false;
      }
    },
    async getDefaultHistoryData(item) {
      const chartTime = item.chartTime;
      const timeType = item.timeType || "month";
      let time = this.getTimeList(chartTime, timeType);
      // if (!time || !time.startTime || !time.endTime) {
      // 	const defaultDate = new Date().toISOString().split('T')[0];
      // 	time = {
      // 		startTime: defaultDate + ' 00:00:00',
      // 		endTime: defaultDate + ' 23:59:59'
      // 	};
      // }
      return {
        identifier: item.identifier || "",
        name: item.name || "",
        unit: item.unit || "",
        unitName: item.unitName || "",
        chartTime,
        timeType,
        trendData: {
          xAxis: [],
          series: [
            {
              name: "",
              data: [],
              color: "#5470C6",
            },
          ],
        },
        timeHistoryList: [],
      };
    },
    async getHistoryDatas(item) {
      try {
        const chartTime = item.chartTime;
        const timeType = item.timeType || "month";
        let time = this.getTimeList(chartTime, timeType);
        // if (!time || !time.startTime || !time.endTime) {
        // 	const defaultDate = new Date().toISOString().split('T')[0];
        // 	time = {
        // 		startTime: defaultDate + ' 00:00:00',
        // 		endTime: defaultDate + ' 23:59:59'
        // 	};
        // }
        // const apiTimeType = this.dict?.chartTime?.[timeType] || 'month';
        const res = await getHistoryData({
          startTime: time.startTime,
          endTime: time.endTime,
          property: item.identifier,
          substanceId: this.id,
          timeType: this.dict.chartTime[timeType],
        });
        const response = res || {};
        const trendData = {
          xAxis: [],
          series: [
            {
              name: response.name || item.name,
              data: [],
              color: "#5470C6",
            },
          ],
        };
        const timeHistoryList = Array.isArray(response.timeHistoryList)
          ? response.timeHistoryList
          : [];
        timeHistoryList.forEach((i) => {
          if (i && i.time !== undefined && i.value !== undefined) {
            trendData.xAxis.push(i.time);
            trendData.series[0].data.push(i.value);
          }
        });
        return {
          ...response,
          identifier: item.identifier || "",
          name: item.name || "",
          unit: item.unit || "",
          unitName: item.unitName || "",
          chartTime,
          timeType,
          trendData,
          timeHistoryList,
        };
      } catch (error) {
        console.error(
          `获取属性 ${item.name || item.identifier} 的历史数据失败:`,
          error,
        );
        return {
          identifier: item.identifier || "",
          name: item.name || "",
          unit: item.unit || "",
          unitName: item.unitName || "",
          chartTime: item.chartTime || new Date(),
          timeType: item.timeType || "month",
          trendData: {
            xAxis: [],
            series: [
              {
                name: item.name || "",
                data: [],
                color: "#5470C6",
              },
            ],
          },
          timeHistoryList: [],
        };
      }
    },
    async refreshSingleChart(item) {
      try {
        const updatedData = await this.getHistoryDatas(item);
        const index = this.historyData.findIndex(
          (d) => d.identifier === item.identifier,
        );
        if (index !== -1) {
          this.$set(this.historyData, index, updatedData);
        }
      } catch (error) {
        console.error(
          `刷新图表 ${item.name || item.identifier} 数据失败:`,
          error,
        );
      }
    },
    dateClick(item, dateType) {
      switch (dateType) {
        case "date":
          item.chartTime = dayjs(new Date()).format("YYYY-MM-DD");
          break;
        case "month":
          item.chartTime = dayjs(new Date()).format("YYYY-MM");
          break;
        case "year":
          item.chartTime = dayjs(new Date()).format("YYYY");
          break;
        default:
          break;
      }

      item.timeType = dateType;
    },
    getTimeList(date, timeType) {
      console.log(date, "date");
      // const fnNum = (num) => num < 10 ? '0' + num : num;
      let startTime, endTime;
      // const ndate = date ? new Date(date) : new Date();
      // const year = ndate.getFullYear();
      // const month = ndate.getMonth() + 1;
      // const day = ndate.getDate();
      switch (timeType) {
        case "date":
          startTime = (date.date || date) + " 00:00:00";
          endTime = (date.date || date) + " 23:59:59";
          break;
        case "month":
          const mon = getMonday(date.month || date);
          startTime = mon[0] + " 00:00:00";
          endTime = mon[1] + " 23:59:59";
          break;
        case "year":
          startTime = (date.year || date) + "-01-01 00:00:00";
          endTime = (date.year || date) + "-12-31 23:59:59";
          break;
        default:
          break;
      }
      return {
        startTime,
        endTime,
      };
    },
  },
};
</script>

<style scoped lang="scss">
.internet-detail-container {
  // display: flex;
  // flex-direction: column;
  height: calc(100vh - 100rpx);
  background: #f5f7fa;
}

.popup-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  background: #fff;
  border-bottom: 1rpx solid #eee;

  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.popup-body {
  flex: 1;
  padding: 20rpx;
  height: 100%;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  border-left: 8rpx solid #1890ff;
}

.gauge-section {
  margin-bottom: 30rpx;
}

.gauge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.gauge-item {
  display: flex;
  gap: 20rpx;
  width: 100%;
}

.gauge-card {
  flex: 1;
  min-width: 200rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.data-section {
  margin-bottom: 30rpx;
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.data-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.data-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.data-value {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
}

.data-unit {
  font-size: 24rpx;
  color: #999;
}

.history-section {
  margin-bottom: 30rpx;
}

.chart-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.chart-header {
  margin-bottom: 20rpx;
}

.chart-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.stat-item {
  font-size: 26rpx;
  color: #666;
}

.stat-value {
  font-weight: bold;
  color: #ff3e52;
  margin-left: 8rpx;

  &.avg {
    color: #0840d5;
  }
}

.chart-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.time-type {
  display: flex;
  gap: 16rpx;

  text {
    font-size: 28rpx;
    color: #666;
    padding: 8rpx 20rpx;
    border-radius: 8rpx;
    background: #f0f0f0;

    &.active {
      background: #1890ff;
      color: #fff;
    }
  }
}
</style>