|
@@ -11,98 +11,88 @@
|
|
|
: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 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>
|
|
|
|
|
|
- <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 ? "在线" : "离线" }}
|
|
|
+ <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>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="p15" style="color: rgba(0, 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/device/jg.png'" mode="aspectFill"></image>
|
|
|
- </u-col>
|
|
|
- </u-row>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="3">
|
|
|
+ <image style="width: 80px; height: 80px; display: flex; margin: auto" :src="'/static/images/device/jg.png'" mode="aspectFill"></image>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
</view>
|
|
|
|
|
|
- <view class="bg-white p15 mb15">
|
|
|
+ <view class="body-area">
|
|
|
<!-- 分段器组件 -->
|
|
|
- <view class="app-subsection">
|
|
|
- <u-subsection :list="list" mode="subsection" :current="tabPosition" @change="tabPositionChange" style="width: 100%; font-size: 16px"></u-subsection>
|
|
|
+ <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 v-if="tabPosition == 1">
|
|
|
+ <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="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> -->
|
|
|
+ <chart :currentDateList="ecahrtsDate"></chart>
|
|
|
</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 class="cotrol-area plr15" v-if="tabs.value == 2">
|
|
|
+ <view class="cotrol-area-item p10 mb15" v-for="(item, index) in deviceCotrolData" :key="index">
|
|
|
+ <u-select
|
|
|
+ v-if="item.commandDict.length > 0"
|
|
|
+ v-model:current="item.commandValue"
|
|
|
+ :label="item.commandName"
|
|
|
+ :options="item.commandDict"
|
|
|
+ keyName="value"
|
|
|
+ labelName="name"
|
|
|
+ @select="selectItem(item)"
|
|
|
+ >
|
|
|
+ <template #text>
|
|
|
+ <view class="title"> {{ item.commandName }}({{ proxy.$common.mapping("name", "value", item.commandValue, item.commandDict) }})</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" height="5px" @change="selectItem(item)"></u-slider>
|
|
|
</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"
|
|
|
+ v-model="checkbox.value"
|
|
|
@change="
|
|
|
(val) => {
|
|
|
checkboxChange(val);
|
|
@@ -111,7 +101,7 @@
|
|
|
: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 class="mb10" v-for="option in checkbox.list" :key="option" :label="option.attributeName" :name="option.attributeCode"> </u-checkbox>
|
|
|
</u-checkbox-group>
|
|
|
</view>
|
|
|
</u-modal>
|
|
@@ -126,7 +116,7 @@
|
|
|
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 { dmpProductAttribute, historyMetrics, last, getList, control } from "@/api/business/fireIot/deviceManage.js";
|
|
|
/*----------------------------------组件引入-----------------------------------*/
|
|
|
import chart from "./chart.vue";
|
|
|
/*----------------------------------store引入-----------------------------------*/
|
|
@@ -136,72 +126,47 @@ 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,
|
|
|
+const state = reactive({
|
|
|
+ listData: [
|
|
|
+ { title: "设备类型", prop: "productName" },
|
|
|
+ { title: "设备编号", prop: "deviceId" },
|
|
|
+ { title: "SIM卡号", prop: "simCode" },
|
|
|
+ { title: "安装位置", prop: "installAddress" },
|
|
|
+ { title: "添加时间", prop: "createdTime" },
|
|
|
+ ],
|
|
|
+
|
|
|
+ tabs: {
|
|
|
+ list: ["实时数据", "历史数据", "指令操作"],
|
|
|
+ value: 0,
|
|
|
},
|
|
|
- {
|
|
|
- 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([]); //图表数据存储
|
|
|
+ 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(""); //日历开始时间
|
|
|
-const calendarEndTime = ref(""); //日历结束时间
|
|
|
+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
|
|
|
-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();
|
|
|
+ state.metrics = [];
|
|
|
+ state.realTimeData = [];
|
|
|
+ state.checkbox.list = [];
|
|
|
+
|
|
|
dmpProductAttribute({
|
|
|
current: 1,
|
|
|
size: 100,
|
|
@@ -210,63 +175,74 @@ function init() {
|
|
|
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);
|
|
|
+ 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);
|
|
|
});
|
|
|
|
|
|
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;
|
|
|
- }
|
|
|
- });
|
|
|
+ metrics: state.metrics,
|
|
|
+ deviceuuid: [commonStore.deviceManageData.deviceUuid],
|
|
|
+ }).then((requset) => {
|
|
|
+ if (requset.status != "SUCCESS") 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: detailData.value.productCode,
|
|
|
+ productCode: commonStore.deviceManageData.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;
|
|
|
+ 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) {
|
|
|
+ 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.msg(res.data.message);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* @tabs切换change事件
|
|
|
*/
|
|
|
-const list = ref(["实时数据", "历史数据", "设备调试"]);
|
|
|
-const tabPosition = ref(0);
|
|
|
+
|
|
|
function tabPositionChange(index) {
|
|
|
- tabPosition.value = index;
|
|
|
+ state.tabs.value = index;
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* @checkbox选中change事件
|
|
|
*/
|
|
|
function checkboxChange(value) {
|
|
|
- checkboxValueList.value = value;
|
|
|
-
|
|
|
+ state.checkbox.value = value;
|
|
|
historyMetricsApi();
|
|
|
}
|
|
|
|
|
@@ -287,32 +263,30 @@ 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,
|
|
|
+ deviceuuid: [commonStore.deviceManageData.deviceUuid],
|
|
|
+ metrics: state.checkbox.value.length > 0 ? state.checkbox.value : state.metrics,
|
|
|
}).then((requset) => {
|
|
|
if (requset.status === "SUCCESS") {
|
|
|
- currentDateList.value = requset.data;
|
|
|
+ var metrics = requset.data[0].metrics;
|
|
|
|
|
|
- checkboxDataList.value.forEach((el) => {
|
|
|
- currentDateList.value.forEach((e) => {
|
|
|
- if (el.attributeCode == e.metric) {
|
|
|
+ state.checkbox.list.forEach((el) => {
|
|
|
+ metrics.forEach((e) => {
|
|
|
+ if (el.attributeCode.toLowerCase() == e.metric) {
|
|
|
e.attributeName = el.attributeName;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- currentDateList.value.forEach((el) => {
|
|
|
+ metrics.forEach((el) => {
|
|
|
+ el.data = [];
|
|
|
if (el.metricItems.length > 0) {
|
|
|
- el.data = [];
|
|
|
el.metricItems.forEach((e) => {
|
|
|
el.data.push([e.timestamp, e.value]);
|
|
|
});
|
|
|
- } else {
|
|
|
- el.data = [];
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ state.ecahrtsDate = metrics;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
@@ -321,6 +295,10 @@ function goAction(row) {
|
|
|
proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/goAction?productCode=${row.productCode}&commandCode=${row.commandCode}&deviceId=${deviceId.value}`);
|
|
|
}
|
|
|
|
|
|
+function open() {
|
|
|
+ calendar.value.open();
|
|
|
+}
|
|
|
+
|
|
|
onReady(() => {});
|
|
|
|
|
|
onShow(() => {
|
|
@@ -344,7 +322,7 @@ onLoad((options) => {
|
|
|
});
|
|
|
|
|
|
watch(
|
|
|
- () => tabPosition.value,
|
|
|
+ () => state.tabs.value,
|
|
|
(val) => {
|
|
|
if (val == 2) {
|
|
|
deviceControlData();
|
|
@@ -354,28 +332,128 @@ watch(
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-uni-page-body {
|
|
|
- background-color: #fff;
|
|
|
-}
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.basicBox {
|
|
|
- font-size: 16px;
|
|
|
- .basicLeft view {
|
|
|
- display: inline-block;
|
|
|
+ &-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;
|
|
|
- .subsection__item__text {
|
|
|
- font-size: 16px !important;
|
|
|
+ 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;
|
|
|
+ } /* 深色 */
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.app-subsection {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 10px;
|
|
|
- // padding: 0px 5rem;
|
|
|
+
|
|
|
+:deep() {
|
|
|
+ .u-slider__show-value {
|
|
|
+ margin: 10px 0px 10px 18px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+uni-page-body {
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
.demo-layout {
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
padding: 15px 10px;
|
|
|
- box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
|
|
|
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
</style>
|