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

<template>
  <oa-scroll
    customClass="deviceDetails-container scroll-height"
    :isSticky="false"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="header-area p15">
        <view class="header-area-top flex mb15">
          <view class="title"> {{ commonStore.deviceManageData.deviceName }} </view>
          <view class="status" :style="{ backgroundColor: commonStore.deviceManageData.deviceStatus == 1 ? '#16bf00' : 'red' }">
            {{ commonStore.deviceManageData.deviceStatus == 1 ? "在线" : "离线" }}
          </view>
        </view>

        <u-row class="header-area-center p0">
          <u-col span="9">
            <view class="header-area-center-item" v-for="data in listData" :key="data">
              <span class="title">{{ data.title }}：</span>
              <span class="value">{{ commonStore.deviceManageData[data.prop] ? commonStore.deviceManageData[data.prop] : "-" }}</span>
            </view>
          </u-col>
          <u-col span="3">
            <image style="width: 80px; height: 80px; display: flex; margin: auto 0 auto auto" :src="commonStore.deviceManageData.typeImg" mode="aspectFill"></image>
          </u-col>
        </u-row>
      </view>

      <view class="body-area">
        <!-- 分段器组件 -->
        <view class="subsection">
          <view class="subsection-item" v-for="(li, index) in tabs.list" :key="index" :class="{ active: index == tabs.value }" @click="tabPositionChange(index)">{{ li }}</view>
        </view>

        <view class="realTimeData-area flex plr15" v-if="tabs.value == 0">
          <view class="realTimeData-area-item" v-for="item in realTimeData" :key="item">
            <view class="title">{{ item.attributeName }}</view>
            <view class="value">
              <span v-if="item.attributeDict.length > 0">
                {{ Number.isFinite(item.value) ? proxy.$common.mapping("name", "value", item.value, item.attributeDict) : item.value ? item.value : "-" }}
              </span>
              <span v-else>
                {{ Number.isFinite(item.value) ? (Number.isInteger(item.value) ? item.value : item.value.toFixed(2)) : item.value ? item.value : "-" }}
              </span>
              <span style="color: #333; width: auto; font-size: 14px">{{ item.attributeUnit }} </span>
            </view>
          </view>
        </view>

        <view class="plr15" v-if="tabs.value == 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="ecahrtsDate"></chart>
        </view>

        <view class="cotrol-area plr15" v-if="tabs.value == 2">
          <view class="cotrol-area-item p10 mb15" v-for="(item, index) in deviceCotrolData" :key="index">
            <view class="title flex" v-if="item.commandDict.length > 0 && item.commandName.indexOf('开关') != -1">
              <span style="margin: auto 0">{{ item.commandName }}</span>
              <span style="margin: auto 0 auto auto">
                <u-switch v-model="item.commandValue" :activeValue="1" :inactiveValue="0" size="20" @change="selectItem(item)"></u-switch>
              </span>
            </view>

            <u-select
              v-else-if="item.commandDict.length > 0 && item.commandName.indexOf('开关') == -1"
              v-model:current="item.commandValue"
              :label="item.commandName"
              :options="item.commandDict"
              keyName="value"
              labelName="name"
              @select="selectItem(item)"
            >
              <template #text>
                <view class="title">
                  <span>{{ item.commandName }}</span>
                  <span v-if="item.commandValue">（{{ proxy.$common.mapping("name", "value", item.commandValue, item.commandDict) }}）</span>
                </view>
              </template>
            </u-select>

            <view class="title" v-else>
              <view class="flex mb10">
                <span style="margin: auto 0"> {{ item.commandName }}</span>
                <span style="margin: auto 0 auto auto"> {{ item.commandValue }}</span>
              </view>
              <u-slider v-model="item.commandValue" :min="item.minimum" :max="item.maximum" :step="item.dataType == 4 ? 0.1 : 1" height="5px" @change="selectItem(item)"></u-slider>
            </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="checkbox.value"
            @change="
              (val) => {
                checkboxChange(val);
              }
            "
            :size="14"
            :activeColor="proxy.$settingStore.themeColor.color"
          >
            <u-checkbox class="mb10" v-for="option in checkbox.list" :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" />
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject, watch } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { dmpProductAttribute, historyMetrics, last, getList, control } from "@/api/business/fireIot/deviceManage.js";
/*----------------------------------组件引入-----------------------------------*/
import chart from "./chart.vue";
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const commonStore = commonStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  listData: [
    { title: "设备类型", prop: "productName" },
    { title: "设备编号", prop: "deviceId" },
    { title: "SIM卡号", prop: "simCode" },
    { title: "安装位置", prop: "installAddress" },
    { title: "添加时间", prop: "createdTime" },
  ],

  tabs: {
    list: ["实时数据", "历史数据", "指令操作"],
    value: 0,
  },

  metrics: [], //属性编号数据存储
  metricsValue: {}, //属性编号值数据存储
  realTimeData: [], //实时数据存储
  ecahrtsDate: [], //图表数据存储
  deviceCotrolData: [], //设备调试数据存储
  checkbox: {
    list: [], //复选框渲染数据存储
    value: [], //复选框值数据存储
  },
});
const { listData, tabs, metrics, metricsValue, realTimeData, ecahrtsDate, deviceCotrolData, checkbox } = toRefs(state);

const modalShow = ref(false); //模态框显示隐藏
const calendar = ref(null);
const calendarStartTime = ref(proxy.$dayjs().format("YYYY-MM-DD")); //日历开始时间
const calendarEndTime = ref(proxy.$dayjs().format("YYYY-MM-DD")); //日历结束时间
const productId = ref(0); //产品id
const deviceId = ref(0); //设备id

/**
 * @初始化
 */
function init() {
  state.metrics = [];
  state.realTimeData = [];
  state.checkbox.list = [];

  dmpProductAttribute({
    current: 1,
    size: 100,
    attributeName: "",
    productId: productId.value,
    deviceId: deviceId.value,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      requset.data.records.forEach((item) => {
        item.attributeDict = item.attributeDict ? JSON.parse(item.attributeDict) : [];
        state.metrics.push(item.attributeCode.toLowerCase());
        state.realTimeData.push(item);
        state.checkbox.list.push({
          ...item,
          attributeCode: item.attributeCode.toLowerCase(),
        });
      });

      last({
        metrics: state.metrics,
        deviceuuid: [commonStore.deviceManageData.deviceUuid],
      }).then((requset) => {
        if (requset.status != "SUCCESS") return;
        if (requset.data.length <= 0) return;
        state.metricsValue = requset.data[0].metrics;
        Object.keys(state.metricsValue).forEach((key) => {
          state.realTimeData.forEach((el) => {
            if (el.attributeCode.toLowerCase() === key) {
              el.value = state.metricsValue[key];
            }
          });
        });
      });
    }
  });
}

function deviceControlData() {
  state.deviceCotrolData = [];
  getList({
    current: 1,
    size: 10,
    productCode: commonStore.deviceManageData.productCode,
  }).then((response) => {
    response.data.records.forEach((e) => {
      e.commandDict = e.commandDict ? JSON.parse(e.commandDict) : [];
      e.commandValue = state.metricsValue[e.commandCode.toLowerCase()];
      state.deviceCotrolData.push(e);
    });
  });
}

function selectItem(e) {
  proxy.$modal.loading("加载中");
  var params = {
    commandCode: e.commandCode,
    commandValue: e.commandValue,
    productCode: e.productCode,
    deviceUuid: commonStore.deviceManageData.deviceUuid,
    categoryType: commonStore.deviceManageData.categoryType,
    gatewayUuid: commonStore.deviceManageData.gatewayUuid,
  };
  control(params).then((res) => {
    init();
    proxy.$modal.closeLoading();
    proxy.$modal.msg(res.data.message);
  });
}

/**
 * @tabs切换change事件
 */

function tabPositionChange(index) {
  state.tabs.value = index;
}

/**
 * @checkbox选中change事件
 */
function checkboxChange(value) {
  state.checkbox.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 ? calendarStartTime.value + " 00:00:00" : calendarStartTime.value,
    endTime: calendarEndTime.value ? calendarEndTime.value + " 23:59:59" : calendarEndTime.value,
    deviceuuid: [commonStore.deviceManageData.deviceUuid],
    metrics: state.checkbox.value.length > 0 ? state.checkbox.value : state.metrics,
  }).then((requset) => {
    if (requset.status != "SUCCESS") return;
    if (requset.data.length <= 0) return;

    var metrics = requset.data[0].metrics;
    state.checkbox.list.forEach((el) => {
      metrics.forEach((e) => {
        if (el.attributeCode.toLowerCase() == e.metric) {
          e.attributeName = el.attributeName;
        }
      });
    });

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

    state.ecahrtsDate = metrics;
  });
}

function open() {
  calendar.value.open();
}

onReady(() => {});

onShow(() => {
  //设置导航栏颜色
  uni.setNavigationBarColor({
    frontColor: "#000000", //字体颜色
    backgroundColor: "#ffffff", //背景颜色
  });
  //调用系统主题颜色
  // proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  if ("deviceId" in options) {
    deviceId.value = options.deviceId;
  }
  if ("productId" in options) {
    productId.value = parseInt(options.productId);
    init();
  }
});

watch(
  () => state.tabs.value,
  (val) => {
    if (val == 2) {
      deviceControlData();
    }
  }
);
</script>

<style lang="scss" scoped>
.header-area {
  border-radius: 10px;
  background: linear-gradient(to bottom, #fafbff, #e7f3ff);

  &-top {
    justify-content: space-between;

    .title {
      font-size: 18px;
      color: #000;
      font-weight: 600;
    }
    .status {
      font-size: 15px;
      color: #ffffff;
      padding: 2px 10px;
      border-radius: 20px;
      line-height: 22px;
    }
  }

  &-center {
    width: 100%;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);

    &-item {
      > span {
        display: inline-block;
        line-height: 25px;
      }

      .title,
      .value {
        padding: 0px 5px 0px 5px;
      }
    }
  }
}
.body-area {
  .realTimeData-area {
    flex-wrap: wrap;
    line-height: 30px;
    font-size: 16px;

    &-item {
      width: calc(50% - 7.5px);
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
      background-color: #ffffff;

      &:nth-child(2n -1) {
        margin-right: 15px;
      }
      .title {
        font-size: 14px;
      }
      .value {
        display: inline-block;
        color: #000;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  .cotrol-area {
    &-item {
      border-radius: 5px;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);

      .title {
        color: #000;
        font-weight: 600;
        font-size: 14px;
      }
    }
  }
  .subsection {
    display: flex;
    justify-content: center;
    margin: 15px 0;

    &-item {
      margin-right: 15px;

      &:last-child {
        margin-right: 0;
      }
    }

    .active {
      font-weight: 600;
      animation: colorChange 1s forwards;

      @keyframes colorChange {
        0% {
          color: #666666;
        }
        100% {
          color: #000;
        } /* 深色 */
      }
    }
  }
}

:deep() {
  .u-slider__show-value {
    margin: 10px 0px 10px 18px !important;
  }
}

uni-page-body {
  background-color: #fff;
}
.demo-layout {
  padding: 15px 10px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
</style>