usky-web-mobile/src/pages/business/fireIot/deviceManage/components/deviceDetails.vue

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view class="deviceDetails-container">
      <view class="flex bg-white p15 mb15">
        <image style="width: 40px; height: 40px; margin: auto 15px auto 0" :src="'/static/images/404.png'" mode="aspectFill"></image>

        <view style="margin: auto auto auto 0">
          <view style="font-size: 15px"> {{ commonStore.$state.deviceDetailsArray.deviceName }} </view>
        </view>

        <view style="margin: auto 0 auto 0">
          <view :style="{ fontSize: '15px', color: commonStore.$state.deviceDetailsArray.deviceStatus == 1 ? '#16bf00' : 'red' }">
            {{ commonStore.$state.deviceDetailsArray.deviceStatus == 1 ? "在线" : "离线" }}
          </view>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="基本信息" type="line"></uni-section>
        <view class="tableType3 p0">
          <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>

          <u-row v-for="po in dataList" :key="po">
            <u-col span="4">
              <view style="text-align: right; padding: 0px 5px 0px 5px">{{ po.title }}</view>
            </u-col>
            <u-col span="8">
              <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
            </u-col>
          </u-row>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <!-- 分段器组件 -->
        <view class="app-subsection">
          <u-subsection :list="list" :current="tabPosition" inactiveColor="#303133" :activeColor="proxy.$settingStore.themeColor.color" @change="tabPositionChange" style="width: 100%"></u-subsection>
        </view>

        <view v-if="tabPosition == 1">
          <view class="flex" :style="{ color: proxy.$settingStore.themeColor.color }">
            <view class="ml10" style="margin-left: auto" @click="open">选择时间</view>
            <view class="ml10" @click="modalShow = true">筛选</view>
          </view>

          <chart :currentDateList="currentDateList"></chart>

          <!-- <view class="tableType1">
            <u-row>
              <u-col span="12">
                <view>指数</view>
              </u-col>
            </u-row>
            <u-row v-for="(co, index) in content4" :key="index">
              <u-col span="12">
                <view>{{ co.name1 }}</view>
              </u-col>
            </u-row>
          </view> -->
        </view>
        <!--  -->
        <view v-else>
          <view class="flex" style="flex-wrap: wrap; line-height: 36px">
            <view style="width: 50%" v-for="realTime in realTimeDataList" :key="realTime">
              {{ realTime.attributeName + "：" }}
              {{ realTime.value }}
              {{ realTime.attributeUnit ? realTime.attributeUnit : "" }}
            </view>
          </view>
        </view>
      </view>

      <u-modal :show="modalShow" @confirm="modalShow = false" @close="modalShow = false" :closeOnClickOverlay="true">
        <view class="slot-content">
          <u-checkbox-group
            v-model="checkboxValueList"
            @change="
              (val) => {
                checkboxChange(val);
              }
            "
            :activeColor="proxy.$settingStore.themeColor.color"
          >
            <u-checkbox class="mb10" v-for="option in checkboxDataList" :key="option" :label="option.attributeName" :name="option.attributeCode"> </u-checkbox>
          </u-checkbox-group>
        </view>
      </u-modal>

      <uni-calendar ref="calendar" class="uni-calendar--hook" :clearDate="false" :insert="false" :lunar="false" :range="true" @confirm="calendarConfirm" />
    </view>
  </scroll-view>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import chart from "./chart.vue";

import { dmpProductAttribute, historyMetrics, last } from "@/api/business/fireIot/deviceManage.js";

const { proxy } = getCurrentInstance();
const commonStore = commonStores();

const dataList = ref([
  {
    title: "设备类型",
    value: commonStore.$state.deviceDetailsArray.productName,
  },
  {
    title: "设备编号",
    value: commonStore.$state.deviceDetailsArray.deviceId,
  },
  {
    title: "物联网卡号",
    value: commonStore.$state.deviceDetailsArray.simCode,
  },
  {
    title: "安装位置",
    value: commonStore.$state.deviceDetailsArray.installAddress,
  },
  {
    title: "添加时间",
    value: commonStore.$state.deviceDetailsArray.createdTime ? commonStore.$state.deviceDetailsArray.createdTime.replace("T", " ") : "",
  },
]);

const checkboxDataList = ref([]); //复选框渲染数据存储
const checkboxValueList = ref([]); //复选框值数据存储

const realTimeDataList = ref([]); //实时数据存储
const tableDataList = ref([]); //表格数据存储
const currentDateList = ref([]); //图表数据存储

const modalShow = ref(false); //模态框显示隐藏

const calendar = ref(null);
const calendarStartTime = ref(""); //日历开始时间
const calendarEndTime = ref(""); //日历结束时间
function open() {
  calendar.value.open();
}

/**
 * @初始化
 */
function init() {
  dmpProductAttribute({
    current: 1,
    size: 100,
    attributeName: "",
    productId: commonStore.$state.deviceDetailsArray.productId,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      checkboxDataList.value = requset.data.records;
      realTimeDataList.value = requset.data.records;

      var array = [];

      requset.data.records.forEach((el) => {
        array.push(el.attributeCode);
      });

      last({
        deviceId: commonStore.$state.deviceDetailsArray.deviceId,
        metrics: array,
      }).then((requsets) => {
        if (requsets.status === "SUCCESS") {
          realTimeDataList.value.forEach((el) => {
            el.value = 0;
            requsets.data.forEach((e) => {
              if (el.attributeCode === e.metric) {
                el.value = e.value;
              }
            });
          });
        }
      });
    }
  });
}

/**
 * @tabs切换change事件
 */
const list = ref(["实时数据", "历史数据"]);
const tabPosition = ref(0);
function tabPositionChange(index) {
  tabPosition.value = index;
}

/**
 * @checkbox选中change事件
 */
function checkboxChange(value) {
  checkboxValueList.value = value;

  historyMetricsApi();
}

/**
 * @日历确认事件
 */
function calendarConfirm(e) {
  calendarStartTime.value = e.range.before;
  calendarEndTime.value = e.range.after ? e.range.after : e.range.before;
  historyMetricsApi();
}

/**
 * @设备多属性历史数据请求
 * @api接口请求
 */
function historyMetricsApi() {
  historyMetrics({
    startTime: calendarStartTime.value,
    endTime: calendarEndTime.value,
    deviceId: commonStore.$state.deviceDetailsArray.deviceId,
    deviceType: commonStore.$state.deviceDetailsArray.deviceType,
    metrics: checkboxValueList.value,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      currentDateList.value = requset.data;

      checkboxDataList.value.forEach((el) => {
        currentDateList.value.forEach((e) => {
          if (el.attributeCode == e.metric) {
            e.attributeName = el.attributeName;
          }
        });
      });

      currentDateList.value.forEach((el) => {
        if (el.metricItems.length > 0) {
          el.data = [];
          el.metricItems.forEach((e) => {
            el.data.push([e.timestamp, e.value]);
          });
        } else {
          el.data = [];
        }
      });
    }
  });
}

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  init();
});
</script>

<style lang="scss" scoped>
.app-subsection {
  display: flex;
  margin-bottom: 10px;
  padding: 0px 5rem;
}
</style>