|
|
@@ -1,9 +1,11 @@
|
|
|
<script setup lang="ts">
|
|
|
import appStore from "@/stores"
|
|
|
import route from "@/route"
|
|
|
+import apis from "@/api"
|
|
|
|
|
|
const title = ref("餐饮油烟监控平台")
|
|
|
-const showTitle = ref(true)
|
|
|
+const showLogo = ref(true)
|
|
|
+const showCompany = ref(false)
|
|
|
const user = computed(() => {
|
|
|
return appStore.authStore.getUser()
|
|
|
})
|
|
|
@@ -11,39 +13,59 @@ const user = computed(() => {
|
|
|
function jumpMap() {
|
|
|
route.navigate("map")
|
|
|
}
|
|
|
-onLoad(() => {
|
|
|
+const companyInfo = ref<Array<any>>([])
|
|
|
+function getCompany() {
|
|
|
+ apis.mobileApi.getCompanyDevice(user.value.companyId).then((res) => {
|
|
|
+ console.log("RES", res)
|
|
|
+ if (res.data.monitor1 && res.data.monitor1.length) {
|
|
|
+ for (let i = 0; i < res.data.monitor1.length; i++) {
|
|
|
+ const d1 = res.data.monitor1[i]
|
|
|
+ const d2 = res.data.monitor2[i]
|
|
|
+ const d = {
|
|
|
+ type1: d1.status == "运行" ? "success" : "error",
|
|
|
+ name1: d1.name,
|
|
|
+ time1: d1.time,
|
|
|
+ status1: d1.status,
|
|
|
+ image1:
|
|
|
+ d1.status == "运行" ? "/static/images/operation-state/01.gif" : "/static/images/operation-state/01.png",
|
|
|
+ type2: d2.status == "运行" ? "success" : "error",
|
|
|
+ name2: d2.name,
|
|
|
+ time2: d2.time,
|
|
|
+ status2: d2.status,
|
|
|
+ image2:
|
|
|
+ d2.status == "运行" ? "/static/images/operation-state/02.gif" : "/static/images/operation-state/02.png",
|
|
|
+ }
|
|
|
+ companyInfo.value.push(d)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function init() {
|
|
|
if (route.checkAuth()) {
|
|
|
uni.hideTabBar()
|
|
|
setTimeout(() => {
|
|
|
if (user.value.userType == 1) {
|
|
|
- //route.navigate("over")
|
|
|
uni.setTabBarItem({
|
|
|
index: 0,
|
|
|
pagePath: "/pages_overview/over",
|
|
|
})
|
|
|
+ route.switchTab("work")
|
|
|
} else if (user.value.userType == 2) {
|
|
|
- //route.navigate("company_chart")
|
|
|
- uni.setTabBarItem({
|
|
|
- index: 0,
|
|
|
- pagePath: "/pages_company/chart",
|
|
|
- })
|
|
|
+ showLogo.value = false
|
|
|
+ showCompany.value = true
|
|
|
+ getCompany()
|
|
|
}
|
|
|
uni.showTabBar()
|
|
|
-
|
|
|
- route.switchTab("work")
|
|
|
-
|
|
|
- // if (user.value.userType == 1) {
|
|
|
- // //route.navigate("over")
|
|
|
- // } else if (user.value.userType == 2) {
|
|
|
- // //route.navigate("company_chart")
|
|
|
- // }
|
|
|
}, 1000)
|
|
|
}
|
|
|
-})
|
|
|
+}
|
|
|
+
|
|
|
+onLoad(init)
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view v-if="showTitle" class="content">
|
|
|
+ <view v-if="showLogo" class="content">
|
|
|
<image class="logo" src="/static/logos/logo.png" />
|
|
|
<view class="text-area">
|
|
|
<text class="title">{{ title }}</text>
|
|
|
@@ -55,11 +77,44 @@ onLoad(() => {
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view v-else>
|
|
|
+ <view v-else-if="showCompany">
|
|
|
<!-- <web-view src="/pages_overview/over" v-if="user.userType == 1"></web-view>
|
|
|
<web-view src="/pages_company/chart" v-else-if="user.userType == 2"></web-view> -->
|
|
|
+ <view class="devices">
|
|
|
+ <view class="box" v-for="(v, i) in companyInfo" :key="i">
|
|
|
+ <uni-section :title="`净化设施 ${i + 1}`" type="line"></uni-section>
|
|
|
+ <view class="body">
|
|
|
+ <view class="item" :class="v.type1">
|
|
|
+ <view class="img"><image :src="v.image1" mode="scaleToFill" /></view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="name">
|
|
|
+ {{ v.name1 }}
|
|
|
+ <span class="tag-view"><uni-tag :text="v.status1" :type="v.type1" /></span>
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 净化器运行
|
|
|
+ <span>{{ v.time1 }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" :class="v.class1">
|
|
|
+ <view class="img"><image :src="v.image2" mode="scaleToFill" /></view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="name">
|
|
|
+ {{ v.name2 }}
|
|
|
+ <span class="tag-view"><uni-tag :text="v.status2" :type="v.type2" /></span>
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 风机运行
|
|
|
+ <span>{{ v.time2 }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<movable-area class="movableArea">
|
|
|
- <movable-view class="movableView" direction="all" x="680rpx" y="700rpx">
|
|
|
+ <movable-view class="movableView" direction="all" x="680rpx" y="600rpx">
|
|
|
<image src="/static/images/map.png" mode="widthFix" @click="jumpMap"></image>
|
|
|
</movable-view>
|
|
|
</movable-area>
|
|
|
@@ -68,7 +123,7 @@ onLoad(() => {
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
- background-color: #fafafa;
|
|
|
+ background-color: #f5f5f5;
|
|
|
}
|
|
|
.content {
|
|
|
display: flex;
|
|
|
@@ -89,19 +144,91 @@ page {
|
|
|
.text-area {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
-}
|
|
|
+ .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #50cd89;
|
|
|
+ }
|
|
|
|
|
|
-.title {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #50cd89;
|
|
|
+ .name {
|
|
|
+ margin-top: 200px;
|
|
|
+ font-size: 46rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #50cd89;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
}
|
|
|
+.devices {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .body {
|
|
|
+ padding: 10px 5px;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px;
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-bottom: 2px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ padding: 8px;
|
|
|
+ background-color: rgba(80, 205, 137, 0.15);
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 15px;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ padding: 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .tag-view {
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ color: #666;
|
|
|
+ span {
|
|
|
+ padding-left: 3px;
|
|
|
+ color: #3c3c3c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.name {
|
|
|
- margin-top: 200px;
|
|
|
- font-size: 46rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #50cd89;
|
|
|
- opacity: 0.5;
|
|
|
+ &.success {
|
|
|
+ .img {
|
|
|
+ background-color: rgba(80, 205, 137, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.error {
|
|
|
+ .img {
|
|
|
+ background-color: rgba(221, 82, 77, 0.25);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.devices) {
|
|
|
+ .uni-section__content-title {
|
|
|
+ span {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.movableArea {
|
|
|
position: fixed;
|