|
|
@@ -5,18 +5,18 @@
|
|
|
<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"> 火警设备1 </view>
|
|
|
+ <view style="font-size: 15px"> {{ publicStore.$state.deviceDetailsArray.deviceName }} </view>
|
|
|
</view>
|
|
|
|
|
|
<view style="margin: auto 0 auto 0">
|
|
|
- <!-- {{ siteList.siteStatus == null }} -->
|
|
|
- <view style="font-size: 15px; color: #30bb00">在线</view>
|
|
|
- <!-- #f07d28 -->
|
|
|
+ <view :style="{ fontSize: '15px', color: publicStore.$state.deviceDetailsArray.deviceStatus == 1 ? '#30bb00' : '#ff6000' }">
|
|
|
+ {{ publicStore.$state.deviceDetailsArray.deviceStatus == 1 ? "在线" : "离线" }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="bg-white padding-15 margin-b-15">
|
|
|
- <uni-section class="margin-bottom-10" title="基本信息" type="line"></uni-section>
|
|
|
+ <uni-section class="margin-b-10" title="基本信息" type="line"></uni-section>
|
|
|
|
|
|
<view class="tableType3 padding-0">
|
|
|
<u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
|
|
|
@@ -33,16 +33,61 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="bg-white padding-15 margin-b-15">
|
|
|
- <uni-section class="margin-bottom-10" title="地址信息" type="line"></uni-section>
|
|
|
+ <!-- 分段器组件 -->
|
|
|
+ <view class="app-subsection">
|
|
|
+ <u-subsection :list="list" :current="tabPosition" inactiveColor="#303133" :activeColor="proxy.$settingStore.themeColor.color" @change="tabPositionChange"></u-subsection>
|
|
|
+ </view>
|
|
|
|
|
|
- <view> 徐乐路208号C幢 </view>
|
|
|
- </view>
|
|
|
+ <view v-if="tabPosition == 1">
|
|
|
+ <view class="flex" :style="{ color: proxy.$settingStore.themeColor.color }">
|
|
|
+ <view class="margin-l-10" style="margin-left: auto" @click="open">选择时间</view>
|
|
|
+ <view class="margin-l-10" @click="modalShow = true">筛选</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="bg-white padding-15 margin-b-15" style="height: 170px; max-height: 170px">
|
|
|
- <uni-section class="margin-bottom-10" title="图表" type="line"></uni-section>
|
|
|
+ <chart :currentDateList="currentDateList"></chart>
|
|
|
|
|
|
- <view style="height: calc(100% - 25px)"> </view>
|
|
|
+ <!-- <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="margin-b-10" 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>
|
|
|
@@ -52,31 +97,155 @@ import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, on
|
|
|
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
|
|
|
import { publicStores, useStores } from "@/store/modules/index";
|
|
|
|
|
|
+import chart from "./chart.vue";
|
|
|
+
|
|
|
+import { dmpProductAttribute, historyMetrics, last } from "@/api/business/fireIot/deviceSelect/index";
|
|
|
+
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
+const publicStore = publicStores();
|
|
|
|
|
|
const dataList = ref([
|
|
|
{
|
|
|
title: "设备类型",
|
|
|
- value: "烟感",
|
|
|
+ value: publicStore.$state.deviceDetailsArray.productName,
|
|
|
},
|
|
|
{
|
|
|
title: "设备编号",
|
|
|
- value: "32942389473274923",
|
|
|
+ value: publicStore.$state.deviceDetailsArray.deviceId,
|
|
|
},
|
|
|
{
|
|
|
title: "物联网卡号",
|
|
|
- value: "3489494234564",
|
|
|
+ value: publicStore.$state.deviceDetailsArray.simCode,
|
|
|
},
|
|
|
{
|
|
|
title: "安装位置",
|
|
|
- value: "上海市青浦区徐泾镇徐乐路208号",
|
|
|
+ value: publicStore.$state.deviceDetailsArray.installAddress,
|
|
|
},
|
|
|
{
|
|
|
title: "添加时间",
|
|
|
- value: "2020-06-01 13:06:20",
|
|
|
+ value: publicStore.$state.deviceDetailsArray.createdTime ? publicStore.$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: publicStore.$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: publicStore.$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: publicStore.$state.deviceDetailsArray.deviceId,
|
|
|
+ deviceType: publicStore.$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(() => {
|
|
|
@@ -85,8 +254,14 @@ onShow(() => {
|
|
|
});
|
|
|
|
|
|
onLoad((options) => {
|
|
|
- console.log(options.type);
|
|
|
+ init();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-subsection {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 0px 5rem;
|
|
|
+}
|
|
|
+</style>
|
fanghuisheng