|
@@ -1,365 +1,447 @@
|
|
<template>
|
|
<template>
|
|
- <view class="container">
|
|
|
|
- <!-- 建议放在外层 -->
|
|
|
|
- <u-navbar title="设备监测" @leftClick="devicemenuShow" :safeAreaInsetTop="false">
|
|
|
|
- <view class="u-nav-slot" slot="left">
|
|
|
|
- <u-icon name="list" size="20"> </u-icon>
|
|
|
|
- </view>
|
|
|
|
- </u-navbar>
|
|
|
|
|
|
+ <view class="container">
|
|
|
|
+ <!-- 建议放在外层 -->
|
|
|
|
+ <u-navbar
|
|
|
|
+ title="设备监测"
|
|
|
|
+ @leftClick="devicemenuShow"
|
|
|
|
+ :safeAreaInsetTop="false"
|
|
|
|
+ >
|
|
|
|
+ <view class="u-nav-slot" slot="left">
|
|
|
|
+ <u-icon name="list" size="20"> </u-icon>
|
|
|
|
+ </view>
|
|
|
|
+ </u-navbar>
|
|
|
|
|
|
- <view v-show="menushow" class="menupage">
|
|
|
|
- <DeviceMenu @menuClick="menuClick"></DeviceMenu>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view v-show="menushow" class="menupage">
|
|
|
|
+ <DeviceMenu @menuClick="menuClick"></DeviceMenu>
|
|
|
|
+ </view>
|
|
|
|
|
|
- <view v-show="!menushow" class="main">
|
|
|
|
- <view class="u-page">
|
|
|
|
- <u-list>
|
|
|
|
- <u-list-item class="itemback" v-for="(item, index) in curlist" :key="index">
|
|
|
|
- <div @tap="openNewPage(item)">
|
|
|
|
- <u-row gutter="5" customStyle="margin-bottom: 10px">
|
|
|
|
- <u-col span="24">
|
|
|
|
|
|
+ <view v-show="!menushow" class="main">
|
|
|
|
+ <view class="u-page">
|
|
|
|
+ <u-list>
|
|
|
|
+ <u-list-item
|
|
|
|
+ class="itemback"
|
|
|
|
+ v-for="(item, index) in curlist"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
|
|
+ <div @tap="openNewPage(item)">
|
|
|
|
+ <u-row gutter="5" customStyle="margin-bottom: 10px">
|
|
|
|
+ <u-col span="24">
|
|
|
|
+ <img
|
|
|
|
+ style="position: absolute; width: 35rpx; height: 35rpx"
|
|
|
|
+ class="icon"
|
|
|
|
+ :src="getIcon(TabCur)"
|
|
|
|
+ alt="Icon"
|
|
|
|
+ />
|
|
|
|
+ <span class="title">{{ item.strinstallpos }}</span>
|
|
|
|
+ </u-col>
|
|
|
|
+ </u-row>
|
|
|
|
+ <u-row gutter="5" customStyle="margin-bottom: 10px">
|
|
|
|
+ <u-col span="3" style="margin-right: 5rpx">
|
|
|
|
+ <div v-if="item.netStatus == 0" class="error-tag1">
|
|
|
|
+ <img
|
|
|
|
+ src="'../../../../static/model/connectFalse.svg "
|
|
|
|
+ alt=""
|
|
|
|
+ class="icon-style"
|
|
|
|
+ />
|
|
|
|
+ <span style="float: right">断开</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="success-tag">
|
|
|
|
+ <img
|
|
|
|
+ src="'../../../../static/model/connectTrue.svg "
|
|
|
|
+ alt=""
|
|
|
|
+ class="icon-style"
|
|
|
|
+ />
|
|
|
|
+ <span style="float: right">连接</span>
|
|
|
|
+ </div>
|
|
|
|
+ </u-col>
|
|
|
|
+ <u-col span="4">
|
|
|
|
+ <div v-if="item.warnFlag == 0" class="success-tag">
|
|
|
|
+ <img
|
|
|
|
+ src="'../../../../static/model/alarmTrue.svg "
|
|
|
|
+ alt=""
|
|
|
|
+ class="icon-style"
|
|
|
|
+ />
|
|
|
|
+ <span style="float: right">{{ item.warnLevel_str }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="error-tag">
|
|
|
|
+ <img
|
|
|
|
+ src="'../../../../static/model/alarmFalse.svg "
|
|
|
|
+ alt=""
|
|
|
|
+ class="icon-style"
|
|
|
|
+ />
|
|
|
|
+ <span style="float: right">{{ item.warnDes }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </u-col>
|
|
|
|
+ <u-col span="5">
|
|
|
|
+ <u--text class="timetext" :text="item.readTime"></u--text>
|
|
|
|
+ </u-col>
|
|
|
|
+ </u-row>
|
|
|
|
+ <view v-if="colums[TabCur + '_monitor'] != null">
|
|
|
|
+ <view
|
|
|
|
+ class="datacard"
|
|
|
|
+ v-for="(showitem, index) in colums[TabCur + '_monitor']"
|
|
|
|
+ :key="index"
|
|
|
|
+ v-show="
|
|
|
|
+ showitem.appShow == 1 &&
|
|
|
|
+ showitem.monitorcode != 'strinstallpos' &&
|
|
|
|
+ showitem.monitorcode != 'netStatus' &&
|
|
|
|
+ showitem.monitorcode != 'warnFlag' &&
|
|
|
|
+ showitem.monitorcode != 'readTime' &&
|
|
|
|
+ showitem.monitorcode != ''
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <view
|
|
|
|
+ :class="TabCur"
|
|
|
|
+ style="padding-top: 10rpx; padding-bottom: 10rpx"
|
|
|
|
+ >
|
|
|
|
+ <view
|
|
|
|
+ v-if="
|
|
|
|
+ showitem.datatype == 1 &&
|
|
|
|
+ showitem.monitorcode == 'doorUse'
|
|
|
|
+ "
|
|
|
|
+ class="demo-layout bg-purple-light"
|
|
|
|
+ style="
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
+ color: #3787fe;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ margin-top: 5rpx;
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ {{
|
|
|
|
+ item[showitem.monitorcode] == "2"
|
|
|
|
+ ? "行人"
|
|
|
|
+ : item[showitem.monitorcode] == "1"
|
|
|
|
+ ? "行车"
|
|
|
|
+ : "-"
|
|
|
|
+ }}
|
|
|
|
+ </view>
|
|
|
|
+ <view
|
|
|
|
+ v-else-if="showitem.datatype == 1"
|
|
|
|
+ class="demo-layout bg-purple-light"
|
|
|
|
+ style="
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
+ color: #3787fe;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ margin-top: 5rpx;
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ {{
|
|
|
|
+ item[showitem.monitorcode] == null ||
|
|
|
|
+ item[showitem.monitorcode] == ""
|
|
|
|
+ ? "-"
|
|
|
|
+ : item[showitem.monitorcode]
|
|
|
|
+ }}
|
|
|
|
+ </view>
|
|
|
|
+ <view
|
|
|
|
+ v-else-if="showitem.datatype == 2"
|
|
|
|
+ class="demo-layout bg-purple-light"
|
|
|
|
+ style="color: #3787fe; font-size: 30rpx; margin-top: 5rpx"
|
|
|
|
+ >
|
|
|
|
+ {{
|
|
|
|
+ item.readData[showitem.monitorcode] == null ||
|
|
|
|
+ item.readData[showitem.monitorcode] == ""
|
|
|
|
+ ? "-"
|
|
|
|
+ : item.readData[showitem.monitorcode]
|
|
|
|
+ }}
|
|
|
|
+ </view>
|
|
|
|
|
|
- <img style="position: absolute;width: 35rpx;height:35rpx;" class="icon"
|
|
|
|
- :src="getIcon(TabCur)" alt="Icon" />
|
|
|
|
- <span class="title">{{item.strinstallpos}}</span>
|
|
|
|
- </u-col>
|
|
|
|
- </u-row>
|
|
|
|
- <u-row gutter="5" customStyle="margin-bottom: 10px">
|
|
|
|
- <u-col span="3" style="margin-right: 5rpx">
|
|
|
|
- <div v-if="item.netStatus == 0" class="error-tag1">
|
|
|
|
- <img src="'../../../../static/model/connectFalse.svg " alt=""
|
|
|
|
- class="icon-style" />
|
|
|
|
- <span style="float: right">断开</span>
|
|
|
|
- </div>
|
|
|
|
- <div v-else class="success-tag">
|
|
|
|
- <img src="'../../../../static/model/connectTrue.svg " alt=""
|
|
|
|
- class="icon-style" />
|
|
|
|
- <span style="float: right">连接</span>
|
|
|
|
- </div>
|
|
|
|
- </u-col>
|
|
|
|
- <u-col span="4">
|
|
|
|
- <div v-if="item.warnFlag == 0" class="success-tag">
|
|
|
|
- <img src="'../../../../static/model/alarmTrue.svg " alt="" class="icon-style" />
|
|
|
|
- <span style="float: right">{{ item.warnLevel_str }}</span>
|
|
|
|
- </div>
|
|
|
|
- <div v-else class="error-tag">
|
|
|
|
- <img src="'../../../../static/model/alarmFalse.svg " alt=""
|
|
|
|
- class="icon-style" />
|
|
|
|
- <span style="float: right">{{ item.warnDes }}</span>
|
|
|
|
- </div>
|
|
|
|
- </u-col>
|
|
|
|
- <u-col span="5">
|
|
|
|
- <u--text class="timetext" :text="item.readTime"></u--text>
|
|
|
|
- </u-col>
|
|
|
|
- </u-row>
|
|
|
|
- <view v-if="colums[TabCur + '_monitor'] != null">
|
|
|
|
- <view class="datacard" v-for="(showitem, index) in colums[TabCur + '_monitor']"
|
|
|
|
- :key="index" v-show="showitem.appShow == 1 &&
|
|
|
|
- showitem.monitorcode != 'strinstallpos' &&
|
|
|
|
- showitem.monitorcode != 'netStatus' &&
|
|
|
|
- showitem.monitorcode != 'warnFlag' &&
|
|
|
|
- showitem.monitorcode != 'readTime' &&
|
|
|
|
- showitem.monitorcode != ''">
|
|
|
|
- <view :class="TabCur" style="padding-top:10rpx;padding-bottom: 10rpx;">
|
|
|
|
- <view v-if="showitem.datatype == 1 && showitem.monitorcode == 'doorUse'"
|
|
|
|
- class="demo-layout bg-purple-light"
|
|
|
|
- style="margin-top: 10rpx; color: #3787fe;font-size: 30rpx;margin-top: 5rpx;">
|
|
|
|
- {{ item[showitem.monitorcode] == '2'?'行人':item[showitem.monitorcode] == '1'?'行车':'-' }}
|
|
|
|
- </view>
|
|
|
|
- <view v-else-if="showitem.datatype == 1"
|
|
|
|
- class="demo-layout bg-purple-light"
|
|
|
|
- style="margin-top: 10rpx; color: #3787fe;font-size: 30rpx;margin-top: 5rpx;">
|
|
|
|
- {{ item[showitem.monitorcode] == null || item[showitem.monitorcode] == ''?'-':item[showitem.monitorcode]}}
|
|
|
|
- </view>
|
|
|
|
- <view v-else-if="
|
|
|
|
- showitem.datatype == 2 " class="demo-layout bg-purple-light"
|
|
|
|
- style="color: #3787fe;font-size: 30rpx;margin-top: 5rpx;">
|
|
|
|
- {{ item.readData[showitem.monitorcode]==null || item.readData[showitem.monitorcode] == ''?'-':item.readData[showitem.monitorcode] }}
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="demo-layout bg-purple-light"
|
|
|
|
- style="margin-top: 6rpx; color: #677799;margin-bottom: 5rpx;">
|
|
|
|
- {{ showitem.des }}
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </div>
|
|
|
|
- </u-list-item>
|
|
|
|
- </u-list>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view
|
|
|
|
+ class="demo-layout bg-purple-light"
|
|
|
|
+ style="
|
|
|
|
+ margin-top: 6rpx;
|
|
|
|
+ color: #677799;
|
|
|
|
+ margin-bottom: 5rpx;
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ {{ showitem.des }}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </div>
|
|
|
|
+ </u-list-item>
|
|
|
|
+ </u-list>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import DeviceMenu from "./devicemenu/devicemenu.vue";
|
|
|
|
- import api from "@/api/api";
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- menushow: false,
|
|
|
|
- TabCur: "gate",
|
|
|
|
- curlist: [],
|
|
|
|
- deviceList: {},
|
|
|
|
- scrollLeft: 0,
|
|
|
|
- currentTab: 0,
|
|
|
|
- colums: {},
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- components: {
|
|
|
|
- DeviceMenu,
|
|
|
|
- },
|
|
|
|
- props: ["showColum"],
|
|
|
|
- watch: {
|
|
|
|
- showColum(data) {
|
|
|
|
- this.colums = data;
|
|
|
|
- console.log(this.colums);
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.colums = this.showColum;
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.startTimer();
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- startTimer() {
|
|
|
|
- // 每隔一段时间执行某个操作
|
|
|
|
- this.timer = setInterval(() => {
|
|
|
|
- // 执行定时任务
|
|
|
|
- this.loadData(this.TabCur);
|
|
|
|
- console.log("定时任务执行中...");
|
|
|
|
- }, 5000);
|
|
|
|
- },
|
|
|
|
- stopTimer() {
|
|
|
|
- // 停止定时器
|
|
|
|
- clearInterval(this.timer);
|
|
|
|
- },
|
|
|
|
- getIcon(itemValue) {
|
|
|
|
- // 根据itemValue获取对应的图标路径,如果找不到对应关系则返回默认图标
|
|
|
|
- return '/static/sidebar/' + itemValue + ".svg";
|
|
|
|
- },
|
|
|
|
- getValueIcon(itemValue) {
|
|
|
|
- // 根据itemValue获取对应的图标路径,如果找不到对应关系则返回默认图标
|
|
|
|
- return '/static/sidebar/' + itemValue + ".svg";
|
|
|
|
- },
|
|
|
|
- loadData(type) {
|
|
|
|
- new Promise((resolve, reject) => {
|
|
|
|
- api
|
|
|
|
- .getDeviceMonitor({
|
|
|
|
- devicetype: type,
|
|
|
|
- pagetype: "normal",
|
|
|
|
- filterParams: {},
|
|
|
|
- })
|
|
|
|
- .then((response) => {
|
|
|
|
- if (response.data.code == 200) {
|
|
|
|
- this.deviceList[type] = response.data.result.msgTxt[0].datalist;
|
|
|
|
- this.curlist = this.deviceList[type];
|
|
|
|
- this.curlist.forEach((item) => {
|
|
|
|
- if (item.readData.frontGateOpen == 1) {
|
|
|
|
- item.readData.frontGateOpen = "打开";
|
|
|
|
- } else {
|
|
|
|
- item.readData.frontGateOpen = "关闭";
|
|
|
|
- }
|
|
|
|
- if (item.readData.midGateOpen == 1) {
|
|
|
|
- item.readData.midGateOpen = "打开";
|
|
|
|
- } else {
|
|
|
|
- item.readData.midGateOpen = "关闭";
|
|
|
|
- }
|
|
|
|
- if (item.readData.rearGateOpen == 1) {
|
|
|
|
- item.readData.rearGateOpen = "打开";
|
|
|
|
- } else {
|
|
|
|
- item.readData.rearGateOpen = "关闭";
|
|
|
|
- }
|
|
|
|
- if (item.readData.midGateOpen == 1) {
|
|
|
|
- item.readData.midGateOpen = "打开";
|
|
|
|
- } else {
|
|
|
|
- item.readData.midGateOpen = "关闭";
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- } else {
|
|
|
|
- resolve(response);
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- .catch((error) => {
|
|
|
|
- console.log("catch===>response", response);
|
|
|
|
- reject(error);
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- tabSelect(e) {
|
|
|
|
- this.currentTab = e.currentTarget.dataset.id;
|
|
|
|
- this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
|
|
|
|
- },
|
|
|
|
- devicemenuShow(e) {
|
|
|
|
- this.menushow = true;
|
|
|
|
- },
|
|
|
|
- menuClick(id) {
|
|
|
|
- this.TabCur = id;
|
|
|
|
- // 显示该分类的数据
|
|
|
|
- this.curlist = this.deviceList[this.TabCur];
|
|
|
|
|
|
+import DeviceMenu from "./devicemenu/devicemenu.vue";
|
|
|
|
+import api from "@/api/api";
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ menushow: false,
|
|
|
|
+ TabCur: "gate",
|
|
|
|
+ curlist: [],
|
|
|
|
+ deviceList: {},
|
|
|
|
+ scrollLeft: 0,
|
|
|
|
+ currentTab: 0,
|
|
|
|
+ colums: {},
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ DeviceMenu,
|
|
|
|
+ },
|
|
|
|
+ props: ["showColum"],
|
|
|
|
+ watch: {
|
|
|
|
+ showColum(data) {
|
|
|
|
+ this.colums = data;
|
|
|
|
+ console.log(this.colums);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.colums = this.showColum;
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.startTimer();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ startTimer() {
|
|
|
|
+ // 每隔一段时间执行某个操作
|
|
|
|
+ this.timer = setInterval(() => {
|
|
|
|
+ // 执行定时任务
|
|
|
|
+ this.loadData(this.TabCur);
|
|
|
|
+ console.log("定时任务执行中...");
|
|
|
|
+ }, 5000);
|
|
|
|
+ },
|
|
|
|
+ stopTimer() {
|
|
|
|
+ // 停止定时器
|
|
|
|
+ clearInterval(this.timer);
|
|
|
|
+ },
|
|
|
|
+ getIcon(itemValue) {
|
|
|
|
+ // 根据itemValue获取对应的图标路径,如果找不到对应关系则返回默认图标
|
|
|
|
+ return "/static/sidebar/" + itemValue + ".svg";
|
|
|
|
+ },
|
|
|
|
+ getValueIcon(itemValue) {
|
|
|
|
+ // 根据itemValue获取对应的图标路径,如果找不到对应关系则返回默认图标
|
|
|
|
+ return "/static/sidebar/" + itemValue + ".svg";
|
|
|
|
+ },
|
|
|
|
+ loadData(type) {
|
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
|
+ api
|
|
|
|
+ .getDeviceMonitor({
|
|
|
|
+ devicetype: type,
|
|
|
|
+ pagetype: "normal",
|
|
|
|
+ filterParams: {},
|
|
|
|
+ })
|
|
|
|
+ .then((response) => {
|
|
|
|
+ if (response.data.code == 200) {
|
|
|
|
+ this.deviceList[type] = response.data.result.msgTxt[0].datalist;
|
|
|
|
+ this.curlist = this.deviceList[type];
|
|
|
|
+ this.curlist.forEach((item) => {
|
|
|
|
+ if (item.readData.frontGateOpen == 1) {
|
|
|
|
+ item.readData.frontGateOpen = "打开";
|
|
|
|
+ } else {
|
|
|
|
+ item.readData.frontGateOpen = "关闭";
|
|
|
|
+ }
|
|
|
|
+ if (item.readData.midGateOpen == 1) {
|
|
|
|
+ item.readData.midGateOpen = "打开";
|
|
|
|
+ } else {
|
|
|
|
+ item.readData.midGateOpen = "关闭";
|
|
|
|
+ }
|
|
|
|
+ if (item.readData.rearGateOpen == 1) {
|
|
|
|
+ item.readData.rearGateOpen = "打开";
|
|
|
|
+ } else {
|
|
|
|
+ item.readData.rearGateOpen = "关闭";
|
|
|
|
+ }
|
|
|
|
+ if (item.readData.midGateOpen == 1) {
|
|
|
|
+ item.readData.midGateOpen = "打开";
|
|
|
|
+ } else {
|
|
|
|
+ item.readData.midGateOpen = "关闭";
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ resolve(response);
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ .catch((error) => {
|
|
|
|
+ console.log("catch===>response", response);
|
|
|
|
+ reject(error);
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ tabSelect(e) {
|
|
|
|
+ this.currentTab = e.currentTarget.dataset.id;
|
|
|
|
+ this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
|
|
|
|
+ },
|
|
|
|
+ devicemenuShow(e) {
|
|
|
|
+ this.menushow = !this.menushow;
|
|
|
|
+ },
|
|
|
|
+ menuClick(id) {
|
|
|
|
+ this.TabCur = id;
|
|
|
|
+ // 显示该分类的数据
|
|
|
|
+ this.curlist = this.deviceList[this.TabCur];
|
|
|
|
|
|
- if (this.curlist == null) {
|
|
|
|
- this.curlist = [];
|
|
|
|
- }
|
|
|
|
- // 选择设备分类,重新获取数据
|
|
|
|
- this.loadData(this.TabCur);
|
|
|
|
- this.menushow = false;
|
|
|
|
- },
|
|
|
|
- openNewPage(params) {
|
|
|
|
- this.$destroy();
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- destroyed() {
|
|
|
|
- // 停止定时器
|
|
|
|
- this.stopTimer();
|
|
|
|
- },
|
|
|
|
- };
|
|
|
|
|
|
+ if (this.curlist == null) {
|
|
|
|
+ this.curlist = [];
|
|
|
|
+ }
|
|
|
|
+ // 选择设备分类,重新获取数据
|
|
|
|
+ this.loadData(this.TabCur);
|
|
|
|
+ this.menushow = false;
|
|
|
|
+ },
|
|
|
|
+ openNewPage(params) {
|
|
|
|
+ this.$destroy();
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ destroyed() {
|
|
|
|
+ // 停止定时器
|
|
|
|
+ this.stopTimer();
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style>
|
|
<style>
|
|
- .top-nav {
|
|
|
|
- height: 100rpx;
|
|
|
|
- line-height: 100rpx;
|
|
|
|
- background-color: #2aa9f3;
|
|
|
|
- color: #daaaa;
|
|
|
|
- }
|
|
|
|
|
|
+.top-nav {
|
|
|
|
+ height: 100rpx;
|
|
|
|
+ line-height: 100rpx;
|
|
|
|
+ background-color: #2aa9f3;
|
|
|
|
+ color: #daaaa;
|
|
|
|
+}
|
|
|
|
|
|
- .top-nav2 {
|
|
|
|
- background-color: #ffffff;
|
|
|
|
- }
|
|
|
|
|
|
+.top-nav2 {
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+}
|
|
|
|
|
|
- .main {
|
|
|
|
- margin-top: 100rpx;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- }
|
|
|
|
|
|
+.main {
|
|
|
|
+ margin-top: 100rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+}
|
|
|
|
|
|
- .card {
|
|
|
|
- background-color: #ffffff;
|
|
|
|
- margin: auto;
|
|
|
|
- margin-top: 20rpx;
|
|
|
|
- width: 10%;
|
|
|
|
- height: 280rpx;
|
|
|
|
- border: 1rpx solid #000000;
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
- }
|
|
|
|
|
|
+.card {
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ margin: auto;
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
+ width: 10%;
|
|
|
|
+ height: 280rpx;
|
|
|
|
+ border: 1rpx solid #000000;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+}
|
|
|
|
|
|
- .menupage {
|
|
|
|
- position: absolute;
|
|
|
|
- z-index: 2;
|
|
|
|
- top: 40rpx;
|
|
|
|
- height: calc(100% - 40rpx);
|
|
|
|
- width: 100%;
|
|
|
|
- }
|
|
|
|
|
|
+.menupage {
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 2;
|
|
|
|
+ top: 40rpx;
|
|
|
|
+ height: calc(100% - 40rpx);
|
|
|
|
+ width: 100%;
|
|
|
|
+}
|
|
|
|
|
|
- .timetext {
|
|
|
|
- text-align: right;
|
|
|
|
- float: right;
|
|
|
|
- }
|
|
|
|
|
|
+.timetext {
|
|
|
|
+ text-align: right;
|
|
|
|
+ float: right;
|
|
|
|
+}
|
|
|
|
|
|
- .itemback {
|
|
|
|
- padding: 20rpx;
|
|
|
|
- background-color: #ffffff;
|
|
|
|
- margin-bottom: 5rpx;
|
|
|
|
- }
|
|
|
|
|
|
+.itemback {
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ margin-bottom: 5rpx;
|
|
|
|
+}
|
|
|
|
|
|
- .datacard .content {
|
|
|
|
- width: 30rpx;
|
|
|
|
- height: 30rpx;
|
|
|
|
- left: 0rpx;
|
|
|
|
- top: 0rpx;
|
|
|
|
- position: absolute;
|
|
|
|
- }
|
|
|
|
|
|
+.datacard .content {
|
|
|
|
+ width: 30rpx;
|
|
|
|
+ height: 30rpx;
|
|
|
|
+ left: 0rpx;
|
|
|
|
+ top: 0rpx;
|
|
|
|
+ position: absolute;
|
|
|
|
+}
|
|
|
|
|
|
- .datacard {
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
- border: rgba(55, 135, 254, 0.28);
|
|
|
|
- width: 30%;
|
|
|
|
- margin: 1%;
|
|
|
|
- float: left;
|
|
|
|
- height: 105rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- background: linear-gradient(to right,
|
|
|
|
- rgba(55, 135, 254, 0.08),
|
|
|
|
- rgba(4, 184, 255, 0.08),
|
|
|
|
- rgba(60, 161, 237, 0.08));
|
|
|
|
- }
|
|
|
|
|
|
+.datacard {
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ border: rgba(55, 135, 254, 0.28);
|
|
|
|
+ width: 30%;
|
|
|
|
+ margin: 1%;
|
|
|
|
+ float: left;
|
|
|
|
+ height: 105rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ to right,
|
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
|
+ );
|
|
|
|
+}
|
|
|
|
|
|
- .datacard .gate {
|
|
|
|
- background: linear-gradient(to right,
|
|
|
|
- rgba(75, 135, 254, 0.08),
|
|
|
|
- rgba(24, 184, 255, 0.08),
|
|
|
|
- rgba(80, 161, 237, 0.08));
|
|
|
|
- }
|
|
|
|
|
|
+.datacard .gate {
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ to right,
|
|
|
|
+ rgba(75, 135, 254, 0.08),
|
|
|
|
+ rgba(24, 184, 255, 0.08),
|
|
|
|
+ rgba(80, 161, 237, 0.08)
|
|
|
|
+ );
|
|
|
|
+}
|
|
|
|
|
|
- .datacard .window {
|
|
|
|
- background: linear-gradient(to right,
|
|
|
|
- rgba(55, 125, 254, 0.08),
|
|
|
|
- rgba(4, 164, 255, 0.08),
|
|
|
|
- rgba(60, 131, 237, 0.08));
|
|
|
|
- }
|
|
|
|
|
|
+.datacard .window {
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ to right,
|
|
|
|
+ rgba(55, 125, 254, 0.08),
|
|
|
|
+ rgba(4, 164, 255, 0.08),
|
|
|
|
+ rgba(60, 131, 237, 0.08)
|
|
|
|
+ );
|
|
|
|
+}
|
|
|
|
|
|
- .datacard .windrect {
|
|
|
|
- background: linear-gradient(to right,
|
|
|
|
- rgba(85, 125, 254, 0.08),
|
|
|
|
- rgba(34, 164, 255, 0.08),
|
|
|
|
- rgba(90, 131, 237, 0.08));
|
|
|
|
- }
|
|
|
|
|
|
+.datacard .windrect {
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ to right,
|
|
|
|
+ rgba(85, 125, 254, 0.08),
|
|
|
|
+ rgba(34, 164, 255, 0.08),
|
|
|
|
+ rgba(90, 131, 237, 0.08)
|
|
|
|
+ );
|
|
|
|
+}
|
|
|
|
|
|
- .error-tag {
|
|
|
|
- border-radius: 10%;
|
|
|
|
- display: inline-block;
|
|
|
|
- color: #e90000;
|
|
|
|
- line-height: 50rpx;
|
|
|
|
- font-size: 14px;
|
|
|
|
- text-align: center;
|
|
|
|
- float: left;
|
|
|
|
- width: 180rpx;
|
|
|
|
- height: 50rpx;
|
|
|
|
- padding-right: 30rpx;
|
|
|
|
- background-color: rgba(233, 0, 0, 0.2);
|
|
|
|
- }
|
|
|
|
|
|
+.error-tag {
|
|
|
|
+ border-radius: 10%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ color: #e90000;
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ float: left;
|
|
|
|
+ width: 180rpx;
|
|
|
|
+ height: 50rpx;
|
|
|
|
+ padding-right: 30rpx;
|
|
|
|
+ background-color: rgba(233, 0, 0, 0.2);
|
|
|
|
+}
|
|
|
|
|
|
- .error-tag1 {
|
|
|
|
- border-radius: 10%;
|
|
|
|
- display: inline-block;
|
|
|
|
- color: #696969;
|
|
|
|
- line-height: 50rpx;
|
|
|
|
- font-size: 14px;
|
|
|
|
- text-align: center;
|
|
|
|
- margin-top: 10rpx;
|
|
|
|
- float: left;
|
|
|
|
- width: 120rpx;
|
|
|
|
- height: 50rpx;
|
|
|
|
- background-color: rgba(105, 105, 105, 0.2);
|
|
|
|
- }
|
|
|
|
|
|
+.error-tag1 {
|
|
|
|
+ border-radius: 10%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ color: #696969;
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ width: 120rpx;
|
|
|
|
+ height: 50rpx;
|
|
|
|
+ background-color: rgba(105, 105, 105, 0.2);
|
|
|
|
+}
|
|
|
|
|
|
- .success-tag {
|
|
|
|
- border-radius: 10%;
|
|
|
|
- color: #42c000;
|
|
|
|
- line-height: 50rpx;
|
|
|
|
- font-size: 14px;
|
|
|
|
- width: 120rpx;
|
|
|
|
- height: 50rpx;
|
|
|
|
- padding-right: 30rpx;
|
|
|
|
- background-color: rgba(226, 250, 214);
|
|
|
|
- }
|
|
|
|
|
|
+.success-tag {
|
|
|
|
+ border-radius: 10%;
|
|
|
|
+ color: #42c000;
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ width: 120rpx;
|
|
|
|
+ height: 50rpx;
|
|
|
|
+ padding-right: 30rpx;
|
|
|
|
+ background-color: rgba(226, 250, 214);
|
|
|
|
+}
|
|
|
|
|
|
- .icon-style {
|
|
|
|
- margin: 15rpx;
|
|
|
|
- width: 14px;
|
|
|
|
- height: 14px;
|
|
|
|
- }
|
|
|
|
|
|
+.icon-style {
|
|
|
|
+ margin: 15rpx;
|
|
|
|
+ width: 14px;
|
|
|
|
+ height: 14px;
|
|
|
|
+}
|
|
|
|
|
|
- .title {
|
|
|
|
- margin-left: 40rpx;
|
|
|
|
- float: left;
|
|
|
|
- font-size: 28rpx;
|
|
|
|
- font-weight: 400;
|
|
|
|
- }
|
|
|
|
|
|
+.title {
|
|
|
|
+ margin-left: 40rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|