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 style="  background: linear-gradient(to bottom, #FAFBFF, #E7F3FF);">
        <view class="flex"  style="padding: 15px 15px  0"> 
          <view style="margin: auto auto auto 0">
            <view style="font-size: 16px;color:#000"> {{ detailData.deviceName }} </view>
          </view>

          <view style="margin: auto 0 auto 0">
            <view style="margin-left: 20px; font-size: 12px;color: #ffffff;padding: 2px 10px; border-radius: 20px; line-height: 20px;" 
              :style="{ fontSize: '15px', backgroundColor: detailData.deviceStatus == 1 ? '#16bf00' : 'red' }  ">
              {{ detailData.deviceStatus == 1 ? "在线" : "离线" }}
            </view>
          </view>
        </view>
        <view class=" p15" style="color:rgba(0,0,0,.7)" >
          <!-- <uni-section class="block mb10" title="基本信息" type="line"></uni-section> -->
          <view class=" basicBox p0">
            <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>

            <u-row>
                <u-col span="9" class="basicLeft">
                  <view v-for="po in dataList" :key="po">
                    <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.title }}:</view>
                    <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
                </view>
                </u-col>
                <u-col span="3">
                  <image style="width: 80px; height: 80px; margin: auto 15px auto 0" :src="'/static/images/jg.png'" mode="aspectFill"></image>
                </u-col>
              </u-row>


            
          </view>
        </view>
      </view>
      

      <view class="bg-white p15 mb15">
        <!-- 分段器组件 -->
        <view class="app-subsection"> 
          <u-subsection :list="list" mode="subsection" :current="tabPosition" @change="tabPositionChange" style="width: 100%;font-size:16px"></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-if="tabPosition == 0">
          <u-empty v-if="realTimeDataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
          <view v-else class="flex" style="flex-wrap: wrap; line-height: 36px;font-size:16px">
            <view style="width: 100%;border-bottom:1px solid #F3F3F3" v-for="realTime in realTimeDataList" :key="realTime">
              {{ realTime.attributeName + "：" }}
              <view style="color:#000;display:inline-block;">{{ realTime.value }}</view>
              {{ realTime.attributeUnit ? realTime.attributeUnit : "" }}
            </view>
          </view>
        </view>

        <view v-if="tabPosition == 2">
          <br/>
          <u-row
            gutter="10"
            style="justify-content:center"
          >
              <u-empty v-if="deviceCotrolList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>

              <u-col v-else span="3" v-for="(item, index) in deviceCotrolList" :key="index">
                  <view class="demo-layout" @click="goAction(item)">{{ item.commandName }}</view>
              </u-col>
              
          </u-row>
          <br/>
          <br/>
          <br/>
        </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);
              }
            "
            :size="14"
            :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" />
    </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 { dmpDeviceInfo,dmpProductAttribute, historyMetrics, last,getList } 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 dataList = ref([
  {
    title: "设备类型",
    value: commonStore.deviceDetailsArray.productName,
  },
  {
    title: "设备编号",
    value: commonStore.deviceDetailsArray.deviceId,
  },
  {
    title: "物联网卡号",
    value: commonStore.deviceDetailsArray.simCode,
  },
  {
    title: "安装位置",
    value: commonStore.deviceDetailsArray.installAddress,
  },
  {
    title: "添加时间",
    value: commonStore.deviceDetailsArray.createdTime ? commonStore.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(""); //日历结束时间
const productId = ref(0); //产品id
const deviceId = ref(0); //设备id
const detailData = ref({}) //设备详情数据存储
const deviceCotrolList = ref([]) //设备调试数据存储
function open() {
  calendar.value.open();
}

/**
 * @初始化
 */


 /**
 * @详情查询
 * @api接口查询
 */
function dmpDeviceInfoApi() {
  dmpDeviceInfo({ productId: productId.value, deviceId:deviceId.value,current: 1, size: 10 }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList.value[0].value = requset.data.records[0].deviceName;
      dataList.value[1].value = requset.data.records[0].deviceId;
      dataList.value[2].value = requset.data.records[0].simCode ;
      dataList.value[3].value = requset.data.records[0].installAddress
      dataList.value[4].value = requset.data.records[0].createdTime ? requset.data.records[0].createdTime.replace("T", " ") : requset.data.records[0].createdTime;
      detailData.value=requset.data.records[0]
    }
  });
}


function init() {
  dmpDeviceInfoApi();
  dmpProductAttribute({
    current: 1,
    size: 100,
    attributeName: "",
    productId: productId.value,
    deviceId:deviceId.value,
  }).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({
        deviceUUId: detailData.value.deviceUuid,
        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;
              }
            });
          });
        }
      });
    }
  });
}


function deviceControlData(){
  getList({
    current: 1,
    size: 10,
    productCode:detailData.value.productCode,
  }).then((response) => {
    deviceCotrolList.value=response.data.records
    // console.log(response.data.records)
    // dataList.value = response.data.records;
    // state.total = response.data.total;
    // state.loading = false;
  });
}

/**
 * @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?calendarStartTime.value+' 00:00:00':calendarStartTime.value,
    endTime: calendarEndTime.value?calendarEndTime.value+' 23:59:59':calendarEndTime.value,
    deviceUUId: detailData.value.deviceUuid,
    // deviceId: commonStore.deviceDetailsArray.deviceId,
    // deviceType: commonStore.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 = [];
        }
      });
    }
  });
}

function goAction(row) {
  proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/goAction?productCode=${row.productCode}&commandCode=${row.commandCode}&deviceId=${deviceId.value}`);
}

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(
  () => tabPosition.value,
  (val) => {
    if(val==2){
      deviceControlData()
    }
   
  }
);
</script>

<style lang="scss" scoped>
uni-page-body{
  background-color: #fff;
}

.basicBox{
  font-size:16px;
  .basicLeft view{
    display:inline-block;
    line-height:30px;
    .subsection__item__text{
      font-size:16px!important
    }

  }
}
.app-subsection {
  display: flex;
  margin-bottom: 10px;
  // padding: 0px 5rem;
}
.demo-layout{
  border:1px solid #e0e0e0;
  padding:15px 10px;
  box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12);
}
</style>