优化
This commit is contained in:
白菜
@ -12,7 +12,7 @@
|
|||||||
}, {
|
}, {
|
||||||
"path": "pages/index",
|
"path": "pages/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "移动端框架",
|
"navigationBarTitleText": "工单列表",
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"onReachBottomDistance": 100
|
"onReachBottomDistance": 100
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<view class="status-bar"></view>
|
||||||
<view class="btn-list">
|
<view class="btn-list">
|
||||||
<uni-row>
|
<uni-row>
|
||||||
<uni-col :span="12">
|
<uni-col :span="12">
|
||||||
@ -128,11 +129,11 @@
|
|||||||
|
|
||||||
.btn-list {
|
.btn-list {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: var(--status-bar-height);
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
padding: 30rpx 30rpx;
|
padding: 20rpx 30rpx;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
@ -152,7 +153,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 170rpx 40rpx 120rpx 40rpx;
|
padding: 80px 30rpx 120rpx 30rpx;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
423
pages/login.vue
423
pages/login.vue
@ -1,210 +1,213 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="normal-login-container">
|
<view class="normal-login-container">
|
||||||
<view class="logo-content align-center justify-center flex">
|
<view class="logo-content align-center justify-center flex">
|
||||||
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
||||||
</image>
|
</image>
|
||||||
<text class="title">EMS移动端登录</text>
|
<text class="title">上动EMS登录</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="login-form-content">
|
<view class="login-form-content">
|
||||||
<view class="input-item flex align-center">
|
<view class="input-item flex align-center">
|
||||||
<view class="iconfont icon-user icon"></view>
|
<view class="iconfont icon-user icon"></view>
|
||||||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
||||||
</view>
|
</view>
|
||||||
<view class="input-item flex align-center">
|
<view class="input-item flex align-center">
|
||||||
<view class="iconfont icon-password icon"></view>
|
<view class="iconfont icon-password icon"></view>
|
||||||
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
||||||
</view>
|
</view>
|
||||||
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
||||||
<view class="iconfont icon-code icon"></view>
|
<view class="iconfont icon-code icon"></view>
|
||||||
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
||||||
<view class="login-code">
|
<view class="login-code">
|
||||||
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="action-btn">
|
<view class="action-btn">
|
||||||
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="reg text-center" v-if="register">
|
<view class="reg text-center" v-if="register">
|
||||||
<text class="text-grey1">没有账号？</text>
|
<text class="text-grey1">没有账号？</text>
|
||||||
<text @click="handleUserRegister" class="text-blue">立即注册</text>
|
<text @click="handleUserRegister" class="text-blue">立即注册</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="xieyi text-center">
|
<view class="xieyi text-center">
|
||||||
<text class="text-grey1">登录即代表同意</text>
|
<text class="text-grey1">登录即代表同意</text>
|
||||||
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
|
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
|
||||||
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
|
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getCodeImg } from '@/api/login'
|
import {
|
||||||
import { getToken } from '@/utils/auth'
|
getCodeImg
|
||||||
|
} from '@/api/login'
|
||||||
export default {
|
import {
|
||||||
data() {
|
getToken
|
||||||
return {
|
} from '@/utils/auth'
|
||||||
codeUrl: "",
|
|
||||||
captchaEnabled: true,
|
export default {
|
||||||
// 用户注册开关
|
data() {
|
||||||
register: false,
|
return {
|
||||||
globalConfig: getApp().globalData.config,
|
codeUrl: "",
|
||||||
loginForm: {
|
captchaEnabled: true,
|
||||||
username: "admin",
|
// 用户注册开关
|
||||||
password: "admin123",
|
register: false,
|
||||||
code: "",
|
globalConfig: getApp().globalData.config,
|
||||||
uuid: ""
|
loginForm: {
|
||||||
}
|
username: "admin",
|
||||||
}
|
password: "admin123",
|
||||||
},
|
code: "",
|
||||||
created() {
|
uuid: ""
|
||||||
this.getCode()
|
}
|
||||||
},
|
}
|
||||||
onLoad() {
|
},
|
||||||
//#ifdef H5
|
created() {
|
||||||
if (getToken()) {
|
this.getCode()
|
||||||
this.$tab.reLaunch('/pages/index')
|
},
|
||||||
}
|
onLoad() {
|
||||||
//#endif
|
//#ifdef H5
|
||||||
},
|
if (getToken()) {
|
||||||
methods: {
|
this.$tab.reLaunch('/pages/index')
|
||||||
// 用户注册
|
}
|
||||||
handleUserRegister() {
|
//#endif
|
||||||
this.$tab.redirectTo(`/pages/register`)
|
},
|
||||||
},
|
methods: {
|
||||||
// 隐私协议
|
// 用户注册
|
||||||
handlePrivacy() {
|
handleUserRegister() {
|
||||||
let site = this.globalConfig.appInfo.agreements[0]
|
this.$tab.redirectTo(`/pages/register`)
|
||||||
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
},
|
||||||
},
|
// 隐私协议
|
||||||
// 用户协议
|
handlePrivacy() {
|
||||||
handleUserAgrement() {
|
let site = this.globalConfig.appInfo.agreements[0]
|
||||||
let site = this.globalConfig.appInfo.agreements[1]
|
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
||||||
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
},
|
||||||
},
|
// 用户协议
|
||||||
// 获取图形验证码
|
handleUserAgrement() {
|
||||||
getCode() {
|
let site = this.globalConfig.appInfo.agreements[1]
|
||||||
getCodeImg().then(res => {
|
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
||||||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
},
|
||||||
if (this.captchaEnabled) {
|
// 获取图形验证码
|
||||||
this.codeUrl = 'data:image/gif;base64,' + res.img
|
getCode() {
|
||||||
this.loginForm.uuid = res.uuid
|
getCodeImg().then(res => {
|
||||||
}
|
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||||
})
|
if (this.captchaEnabled) {
|
||||||
},
|
this.codeUrl = 'data:image/gif;base64,' + res.img
|
||||||
// 登录方法
|
this.loginForm.uuid = res.uuid
|
||||||
async handleLogin() {
|
}
|
||||||
if (this.loginForm.username === "") {
|
})
|
||||||
this.$modal.msgError("请输入账号")
|
},
|
||||||
} else if (this.loginForm.password === "") {
|
// 登录方法
|
||||||
this.$modal.msgError("请输入密码")
|
async handleLogin() {
|
||||||
} else if (this.loginForm.code === "" && this.captchaEnabled) {
|
if (this.loginForm.username === "") {
|
||||||
this.$modal.msgError("请输入验证码")
|
this.$modal.msgError("请输入账号")
|
||||||
} else {
|
} else if (this.loginForm.password === "") {
|
||||||
this.$modal.loading("登录中，请耐心等待...")
|
this.$modal.msgError("请输入密码")
|
||||||
this.pwdLogin()
|
} else if (this.loginForm.code === "" && this.captchaEnabled) {
|
||||||
}
|
this.$modal.msgError("请输入验证码")
|
||||||
},
|
} else {
|
||||||
// 密码登录
|
this.$modal.loading("登录中，请耐心等待...")
|
||||||
async pwdLogin() {
|
this.pwdLogin()
|
||||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
}
|
||||||
this.$modal.closeLoading()
|
},
|
||||||
this.loginSuccess()
|
// 密码登录
|
||||||
}).catch(() => {
|
async pwdLogin() {
|
||||||
if (this.captchaEnabled) {
|
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||||
this.getCode()
|
this.$modal.closeLoading()
|
||||||
}
|
this.loginSuccess()
|
||||||
})
|
}).catch(() => {
|
||||||
},
|
if (this.captchaEnabled) {
|
||||||
// 登录成功后，处理函数
|
this.getCode()
|
||||||
loginSuccess(result) {
|
}
|
||||||
// 设置用户信息
|
})
|
||||||
this.$store.dispatch('GetInfo').then(res => {
|
},
|
||||||
this.$tab.reLaunch('/pages/index')
|
// 登录成功后，处理函数
|
||||||
})
|
loginSuccess(result) {
|
||||||
}
|
// 设置用户信息
|
||||||
}
|
this.$store.dispatch('GetInfo').then(res => {
|
||||||
}
|
this.$tab.reLaunch('/pages/index')
|
||||||
</script>
|
})
|
||||||
|
}
|
||||||
<style lang="scss" scoped>
|
}
|
||||||
page {
|
}
|
||||||
background-color: #ffffff;
|
</script>
|
||||||
}
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
.normal-login-container {
|
page {
|
||||||
width: 100%;
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
.logo-content {
|
|
||||||
width: 100%;
|
.normal-login-container {
|
||||||
font-size: 21px;
|
width: 100%;
|
||||||
text-align: center;
|
|
||||||
padding-top: 15%;
|
.logo-content {
|
||||||
|
width: 100%;
|
||||||
image {
|
font-size: 21px;
|
||||||
border-radius: 4px;
|
text-align: center;
|
||||||
}
|
padding-top: 15%;
|
||||||
|
|
||||||
.title {
|
image {
|
||||||
margin-left: 10px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.title {
|
||||||
.login-form-content {
|
margin-left: 10px;
|
||||||
text-align: center;
|
}
|
||||||
margin: 20px auto;
|
}
|
||||||
margin-top: 15%;
|
|
||||||
width: 80%;
|
.login-form-content {
|
||||||
|
text-align: center;
|
||||||
.input-item {
|
margin: 20px auto;
|
||||||
margin: 20px auto;
|
margin-top: 15%;
|
||||||
background-color: #f5f6f7;
|
width: 80%;
|
||||||
height: 45px;
|
|
||||||
border-radius: 20px;
|
.input-item {
|
||||||
|
margin: 20px auto;
|
||||||
.icon {
|
background-color: #f5f6f7;
|
||||||
font-size: 38rpx;
|
height: 45px;
|
||||||
margin-left: 10px;
|
border-radius: 20px;
|
||||||
color: #999;
|
|
||||||
}
|
.icon {
|
||||||
|
font-size: 38rpx;
|
||||||
.input {
|
margin-left: 10px;
|
||||||
width: 100%;
|
color: #999;
|
||||||
font-size: 14px;
|
}
|
||||||
line-height: 20px;
|
|
||||||
text-align: left;
|
.input {
|
||||||
padding-left: 15px;
|
width: 100%;
|
||||||
}
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
}
|
text-align: left;
|
||||||
|
padding-left: 15px;
|
||||||
.login-btn {
|
}
|
||||||
margin-top: 40px;
|
|
||||||
height: 45px;
|
}
|
||||||
}
|
|
||||||
|
.login-btn {
|
||||||
.reg {
|
margin-top: 40px;
|
||||||
margin-top: 15px;
|
height: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xieyi {
|
.reg {
|
||||||
color: #333;
|
margin-top: 15px;
|
||||||
margin-top: 20px;
|
}
|
||||||
}
|
|
||||||
|
.xieyi {
|
||||||
.login-code {
|
color: #333;
|
||||||
height: 38px;
|
margin-top: 20px;
|
||||||
float: right;
|
}
|
||||||
|
|
||||||
.login-code-img {
|
.login-code {
|
||||||
height: 38px;
|
height: 38px;
|
||||||
position: absolute;
|
float: right;
|
||||||
margin-left: 10px;
|
|
||||||
width: 200rpx;
|
.login-code-img {
|
||||||
}
|
height: 38px;
|
||||||
}
|
position: absolute;
|
||||||
}
|
margin-left: 10px;
|
||||||
}
|
width: 200rpx;
|
||||||
|
}
|
||||||
</style>
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -143,9 +143,9 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
onLoad(options) {
|
||||||
uni.showLoading()
|
uni.showLoading()
|
||||||
getTicket(this.$route.query.id).then(response => {
|
getTicket(options.id).then(response => {
|
||||||
this.info = JSON.parse(JSON.stringify(response?.data || {}))
|
this.info = JSON.parse(JSON.stringify(response?.data || {}))
|
||||||
const {
|
const {
|
||||||
images = ''
|
images = ''
|
||||||
@ -164,6 +164,7 @@
|
|||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -92,6 +92,7 @@
|
|||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
@ -103,7 +104,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.large {
|
.large {
|
||||||
width: 180rpx;
|
width: 160rpx;
|
||||||
|
background-color: #547ef4;
|
||||||
|
|
||||||
|
&[disabled][type=primary] {
|
||||||
|
background-color: #89a8ffe6;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,29 +20,29 @@
|
|||||||
<view class='content'>
|
<view class='content'>
|
||||||
<!-- 设备状态栏 -->
|
<!-- 设备状态栏 -->
|
||||||
<uni-group mode="card" class="status-card-group">
|
<uni-group mode="card" class="status-card-group">
|
||||||
<uni-grid :column="3" :showBorder="false">
|
<view class="flex-container">
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">工作状态</view>
|
<view class="title">工作状态</view>
|
||||||
<text
|
<text
|
||||||
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
|
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">与PCS通信</view>
|
<view class="title">与PCS通信</view>
|
||||||
<text
|
<text
|
||||||
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
|
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">与EMS通信</view>
|
<view class="title">与EMS通信</view>
|
||||||
<text
|
<text
|
||||||
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
</uni-grid>
|
</view>
|
||||||
</uni-group>
|
</uni-group>
|
||||||
<!-- 设备数据 -->
|
<!-- 设备数据 -->
|
||||||
<uni-group mode="card" class="data-card-group">
|
<uni-group mode="card" class="data-card-group">
|
||||||
@ -182,9 +182,9 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
onLoad(options) {
|
||||||
uni.showLoading()
|
uni.showLoading()
|
||||||
this.siteId = this.$route.query.siteId || ''
|
this.siteId = options.siteId || ''
|
||||||
getBMSBatteryCluster({
|
getBMSBatteryCluster({
|
||||||
siteId: this.siteId
|
siteId: this.siteId
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
@ -192,7 +192,7 @@
|
|||||||
if (this.list.length > 0) {
|
if (this.list.length > 0) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$refs.collapse.resize()
|
// this.$refs.collapse.resize()
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
}, 100)
|
}, 100)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -19,29 +19,29 @@
|
|||||||
<view class='content'>
|
<view class='content'>
|
||||||
<!-- 设备状态栏 -->
|
<!-- 设备状态栏 -->
|
||||||
<uni-group mode="card" class="status-card-group">
|
<uni-group mode="card" class="status-card-group">
|
||||||
<uni-grid :column="3" :showBorder="false">
|
<view class="flex-container">
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">工作状态</view>
|
<view class="title">工作状态</view>
|
||||||
<text
|
<text
|
||||||
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
|
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">与PCS通信</view>
|
<view class="title">与PCS通信</view>
|
||||||
<text
|
<text
|
||||||
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
|
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">与EMS通信</view>
|
<view class="title">与EMS通信</view>
|
||||||
<text
|
<text
|
||||||
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
</uni-grid>
|
</view>
|
||||||
</uni-group>
|
</uni-group>
|
||||||
<!-- 设备数据 -->
|
<!-- 设备数据 -->
|
||||||
<uni-group mode="card" class="data-card-group">
|
<uni-group mode="card" class="data-card-group">
|
||||||
@ -187,9 +187,9 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
onLoad(options) {
|
||||||
uni.showLoading()
|
uni.showLoading()
|
||||||
this.siteId = this.$route.query.siteId || ''
|
this.siteId = options.siteId || ''
|
||||||
getBMSOverView({
|
getBMSOverView({
|
||||||
siteId: this.siteId
|
siteId: this.siteId
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
|
|||||||
@ -147,19 +147,24 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
onLoad(options) {
|
||||||
uni.showLoading()
|
uni.showLoading()
|
||||||
this.siteId = this.$route.query.siteId || ''
|
this.siteId = options.siteId || ''
|
||||||
getAmmeterDataList({
|
getAmmeterDataList({
|
||||||
siteId: this.siteId
|
siteId: this.siteId
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
this.list = response?.data || []
|
this.list = response?.data || []
|
||||||
this.$nextTick(() => {
|
if (this.list.length > 0) {
|
||||||
setTimeout(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.collapse.resize()
|
setTimeout(() => {
|
||||||
uni.hideLoading()
|
this.$refs.collapse.resize()
|
||||||
}, 100)
|
uni.hideLoading()
|
||||||
})
|
}, 1000)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
})
|
})
|
||||||
|
|||||||
@ -387,9 +387,9 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
onLoad(options) {
|
||||||
// uni.showLoading()
|
// uni.showLoading()
|
||||||
this.siteId = this.$route.query.siteId || ''
|
this.siteId = options.siteId || ''
|
||||||
this.getStackList()
|
this.getStackList()
|
||||||
this.getTableData(true)
|
this.getTableData(true)
|
||||||
}
|
}
|
||||||
@ -455,6 +455,7 @@
|
|||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
padding: 20rpx 30rpx;
|
padding: 20rpx 30rpx;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
font-size: 28rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
||||||
@ -462,6 +463,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 20rpx;
|
right: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
background-color: #4c7af3;
|
background-color: #4c7af3;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,58 +1,67 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="work-container">
|
<view class="work-container">
|
||||||
<!-- 站点选择列表 -->
|
<view class="site-sections-list">
|
||||||
<uni-section title="业态选择" type="line" class="sections-list">
|
<uni-data-picker placeholder="请选择" popup-title="业态选择" :step-searh="true" :value="siteId" :clear-icon="false"
|
||||||
<uni-row>
|
:localdata="siteTypeOptions" :ellipsis="false" @change="selectedSite">
|
||||||
<uni-col :span="10" :offset='1'>
|
</uni-data-picker>
|
||||||
<uni-section title="业态列表">
|
<view class="info">
|
||||||
<uni-data-select :clear="false" :value="siteType" wrap :localdata="siteTypeOptions"
|
<view class="list"> <uni-icons type="location" color="#fff" size="20"></uni-icons>
|
||||||
@change="selectedSiteType"></uni-data-select>
|
{{baseInfo.siteAddress || '-'}}
|
||||||
</uni-section>
|
</view>
|
||||||
</uni-col>
|
<view class="list">
|
||||||
<uni-col :span="10" :offset='2'>
|
<uni-icons type="calendar" color="#fff" size="20"></uni-icons>
|
||||||
<uni-section title="可选清单">
|
{{baseInfo.runningTime || '-'}}
|
||||||
<uni-data-select ref="siteListSelect" :clear="false" :value="siteId" wrap
|
</view>
|
||||||
:localdata="siteType ===1 ? siteList : []" @change="selectedSite"></uni-data-select>
|
|
||||||
</uni-section>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
</uni-section>
|
|
||||||
<!-- 静态信息 -->
|
|
||||||
<uni-section title="静态信息" type="line" class="sections-list">
|
|
||||||
<view class="base-lists" v-for="(item,index) in singleZdInfo" :key="index+'zdBaseInfo'">
|
|
||||||
<text class="left">{{item.title}}：</text>
|
|
||||||
<text class="right">{{baseInfo[item.attr]}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</uni-section>
|
</view>
|
||||||
<!-- 工作台 -->
|
<!-- 静态信息 -->
|
||||||
<uni-section title="工作台" type="line" class="sections-list">
|
<view class="base-info">
|
||||||
<view class="grid-body">
|
<uni-group mode="card" class="install-data">
|
||||||
<uni-grid :column="4" :showBorder="false" @change="toDetail">
|
<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
|
||||||
<uni-grid-item v-for="(item,index) in siteGirdList" :index="index" :key="index+'work'">
|
<uni-grid-item>
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="icon iconfont" :class="item.icon" size="30"></view>
|
<view class="title">装机功率(MW)</view>
|
||||||
<text class="text">{{item.text}}</text>
|
<view class="text">{{baseInfo.installPower}}</view>
|
||||||
|
</view>
|
||||||
|
</uni-grid-item>
|
||||||
|
<uni-grid-item>
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">装机容量(MW)</view>
|
||||||
|
<view class="text">{{baseInfo.installCapacity}}</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</uni-grid-item>
|
||||||
</uni-grid>
|
</uni-grid>
|
||||||
</view>
|
</uni-group>
|
||||||
</uni-section>
|
<!-- 工作台 -->
|
||||||
<!-- 一周充放曲线 uchart的组件最好放在同级-->
|
<uni-section title="工作台" type="line" class="sections-list">
|
||||||
<uni-section title="一周充放曲线" type="line" class="sections-list">
|
<view class="grid-body">
|
||||||
<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
|
<uni-grid :column="4" :showBorder="false" @change="toDetail">
|
||||||
<view style="width:100%;height: 250px;">
|
<uni-grid-item v-for="(item,index) in siteGirdList" :index="index" :key="index+'work'">
|
||||||
<qiun-data-charts type="area" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
|
<view class="grid-item-box work-box">
|
||||||
:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
|
<view class="icon iconfont" :class="item.icon" size="30"></view>
|
||||||
</view>
|
<text class="text">{{item.text}}</text>
|
||||||
</uni-section>
|
</view>
|
||||||
<!-- 当日功率曲线 uchart的组件最好放在同级-->
|
</uni-grid-item>
|
||||||
<uni-section title="当日功率曲线" type="line" class="sections-list">
|
</uni-grid>
|
||||||
<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
|
</view>
|
||||||
<view style="width:100%;height: 250px;">
|
</uni-section>
|
||||||
<qiun-data-charts type="area" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
|
<!-- 一周充放曲线 uchart的组件最好放在同级-->
|
||||||
:pageScrollTop="pageScrollTop" :opts="glqxOptions" :ontouch="true" />
|
<uni-section title="一周充放曲线" type="line" class="sections-list">
|
||||||
</view>
|
<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
|
||||||
</uni-section>
|
<view style="width:100%;height: 250px;">
|
||||||
|
<qiun-data-charts type="area" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
|
||||||
|
:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
|
||||||
|
</view>
|
||||||
|
</uni-section>
|
||||||
|
<!-- 当日功率曲线 uchart的组件最好放在同级-->
|
||||||
|
<uni-section title="当日功率曲线" type="line" class="sections-list">
|
||||||
|
<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
|
||||||
|
<view style="width:100%;height: 250px;">
|
||||||
|
<qiun-data-charts type="area" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
|
||||||
|
:pageScrollTop="pageScrollTop" :opts="glqxOptions" :ontouch="true" />
|
||||||
|
</view>
|
||||||
|
</uni-section>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -129,40 +138,27 @@
|
|||||||
},
|
},
|
||||||
// 图表数据结束
|
// 图表数据结束
|
||||||
deviceCategoryOptions: [], //当前站点包含的设备类别
|
deviceCategoryOptions: [], //当前站点包含的设备类别
|
||||||
siteType: 1,
|
|
||||||
siteTypeOptions: [{
|
siteTypeOptions: [{
|
||||||
text: '储能',
|
text: '储能',
|
||||||
value: 1,
|
value: 'cn',
|
||||||
|
children: []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '光能',
|
text: '光能',
|
||||||
value: 2,
|
value: 'gn',
|
||||||
|
disable: true,
|
||||||
|
children: []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '岸电',
|
text: '岸电',
|
||||||
value: 3,
|
value: 'ad',
|
||||||
|
disable: true,
|
||||||
|
children: []
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
siteList: [],
|
siteList: [],
|
||||||
siteId: '', //选择的站点ID
|
siteId: '', //选择的站点ID
|
||||||
baseInfo: {}, //站点基本信息
|
baseInfo: {}, //站点基本信息
|
||||||
singleZdInfo: [{
|
|
||||||
title: "电站位置",
|
|
||||||
attr: "siteAddress",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "投运时间",
|
|
||||||
attr: "runningTime",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "装机功率(MW)",
|
|
||||||
attr: "installPower",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "装机容量(MW)",
|
|
||||||
attr: "installCapacity",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
gridList: [{
|
gridList: [{
|
||||||
page: 'bmszl',
|
page: 'bmszl',
|
||||||
icon: 'icon-BMS',
|
icon: 'icon-BMS',
|
||||||
@ -222,12 +218,15 @@
|
|||||||
} = e.detail
|
} = e.detail
|
||||||
this.$tab.navigateTo(`/pages/work/${this.gridList[index].page}/index?siteId=${this.siteId}`)
|
this.$tab.navigateTo(`/pages/work/${this.gridList[index].page}/index?siteId=${this.siteId}`)
|
||||||
},
|
},
|
||||||
selectedSite(id) {
|
selectedSite(data) {
|
||||||
if (id === this.siteId) return
|
const [typeObj, siteObj] = data.detail.value
|
||||||
this.siteId = id
|
const {
|
||||||
if (this.siteType === 1) {
|
text,
|
||||||
this.updateSiteInfo()
|
value
|
||||||
}
|
} = siteObj
|
||||||
|
if (value === this.siteId) return
|
||||||
|
this.siteId = value
|
||||||
|
this.updateSiteInfo()
|
||||||
},
|
},
|
||||||
updateSiteInfo() {
|
updateSiteInfo() {
|
||||||
if (!this.siteId) return
|
if (!this.siteId) return
|
||||||
@ -236,18 +235,10 @@
|
|||||||
this.getGVQXData()
|
this.getGVQXData()
|
||||||
this.getSiteDeviceCategory()
|
this.getSiteDeviceCategory()
|
||||||
},
|
},
|
||||||
selectedSiteType(id) {
|
|
||||||
if (id === this.siteType) return
|
|
||||||
this.siteType = id
|
|
||||||
this.siteId = ''
|
|
||||||
this.baseInfo = {}
|
|
||||||
this.weekChartData = {}
|
|
||||||
this.activeChartData = {}
|
|
||||||
},
|
|
||||||
getSiteList() {
|
getSiteList() {
|
||||||
getAllSites().then(response => {
|
getAllSites().then(response => {
|
||||||
const data = response?.data || []
|
const data = response?.data || []
|
||||||
this.siteList = data.map(item => {
|
this.siteTypeOptions.find(i => i.value === 'cn').children = data.map(item => {
|
||||||
return {
|
return {
|
||||||
text: item.siteName,
|
text: item.siteName,
|
||||||
value: item.siteId,
|
value: item.siteId,
|
||||||
@ -374,13 +365,11 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 页面切换不会重新调用，如果希望每次切换页面都重新调接口，使用onShow
|
// 页面切换不会重新调用，如果希望每次切换页面都重新调接口，使用onShow
|
||||||
mounted() {
|
onLoad() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
this.getSiteList()
|
||||||
this.$refs.weekChartDateRangeSelect.init()
|
this.$refs.weekChartDateRangeSelect.init()
|
||||||
this.$refs.activeChartDateRangeSelect.init(true)
|
this.$refs.activeChartDateRangeSelect.init(true)
|
||||||
if (this.siteType === 1) {
|
|
||||||
this.getSiteList()
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 页面滚动 设置pageScrollTop chart显示需要
|
// 页面滚动 设置pageScrollTop chart显示需要
|
||||||
@ -414,80 +403,172 @@
|
|||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sections-list {
|
// 站点选择
|
||||||
margin-bottom: 10rpx;
|
.site-sections-list {
|
||||||
|
background: linear-gradient(to right, #547ef4, #679ff5);
|
||||||
|
padding: 30rpx 30rpx;
|
||||||
|
padding-bottom: 100rpx;
|
||||||
|
|
||||||
::v-deep &>.uni-section-header {
|
.info {
|
||||||
font-weight: 700;
|
color: #fff;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
line-height: 30rpx;
|
line-height: 30rpx;
|
||||||
}
|
vertical-align: middle;
|
||||||
}
|
margin-top: 20rpx;
|
||||||
|
|
||||||
.sections-list:not(:first-child) {
|
>.list {
|
||||||
margin-top: 40rpx;
|
display: flex;
|
||||||
}
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
::v-deep {
|
&:not(:last-child) {
|
||||||
.uni-section__content-title {
|
margin-bottom: 20rpx;
|
||||||
font-size: 26rpx !important;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-box {
|
>.uni-icons {
|
||||||
width: 100%;
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.uni-select__input-text {
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-select__selector-empty,
|
.uni-data-tree {
|
||||||
.uni-select__selector-item {
|
|
||||||
font-size: 24rpx;
|
::v-deep {
|
||||||
line-height: 36rpx;
|
.input-value {
|
||||||
padding-top: 10rpx;
|
border: none;
|
||||||
padding-bottom: 10rpx;
|
padding-left: 0;
|
||||||
text-align: left;
|
|
||||||
|
.selected-area {
|
||||||
|
width: 90%;
|
||||||
|
flex: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
.selected-list {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择中的文字样式
|
||||||
|
.text-color {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧箭头
|
||||||
|
.arrow-area {
|
||||||
|
transform: rotate(-135deg);
|
||||||
|
|
||||||
|
.input-arrow {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-item-box {
|
// 基本信息
|
||||||
flex: 1;
|
.base-info {
|
||||||
/* #ifndef APP-NVUE */
|
margin-top: -80rpx;
|
||||||
display: flex;
|
border-radius: 80rpx 80rpx 0 0;
|
||||||
/* #endif */
|
padding: 30rpx;
|
||||||
flex-direction: column;
|
background-color: #fff;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
// 装机功率
|
||||||
padding: 30rpx 0;
|
.install-data {
|
||||||
|
.grid-item-box {
|
||||||
|
padding-top: 6rpx;
|
||||||
|
padding-bottom: 6rpx;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 52rpx;
|
|
||||||
color: #3a98ff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
|
||||||
|
.sections-list {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
|
::v-deep &>.uni-section-header {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections-list:not(:first-child) {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep {
|
||||||
|
.uni-section__content-title {
|
||||||
|
font-size: 26rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-box {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.uni-select__input-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-empty,
|
||||||
|
.uni-select__selector-item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .uni-date__x-input {
|
||||||
|
// height: 50rpx;
|
||||||
|
// line-height: 50rpx;
|
||||||
|
// font-size: 26rpx;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
.work-box {
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 52rpx;
|
||||||
|
color: #547ef4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.base-lists {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
padding-top: 10rpx;
|
line-height: 40rpx;
|
||||||
}
|
padding: 10rpx 20rpx;
|
||||||
}
|
padding-left: 40rpx;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 220rpx;
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
.base-lists {
|
color: #333;
|
||||||
font-size: 24rpx;
|
}
|
||||||
line-height: 40rpx;
|
|
||||||
padding: 10rpx 20rpx;
|
|
||||||
padding-left: 40rpx;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
width: 220rpx;
|
|
||||||
display: inline-block;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
color: #333;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -4,9 +4,9 @@
|
|||||||
<uni-grid class="info-grid" :square="false" :column="2" :showBorder="false">
|
<uni-grid class="info-grid" :square="false" :column="2" :showBorder="false">
|
||||||
<uni-grid-item v-for="(item,index) in runningHeadData" :key="index+'head'">
|
<uni-grid-item v-for="(item,index) in runningHeadData" :key="index+'head'">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<img :src="require('@/static/images/ems/pcs/'+item.img+'.jpg')" class="icon" alt="">
|
<image :src="require('@/static/images/ems/pcs/'+item.img+'.jpg')" class="icon" alt="">
|
||||||
<view class="title">{{item.title}}</view>
|
<view class="title">{{item.title}}</view>
|
||||||
<view class="text">{{runningHeadInfo[item.attr] | formatNumber}}</view>
|
<view class="text">{{runningHeadInfo[item.attr] | formatNumber}}</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</uni-grid-item>
|
||||||
</uni-grid>
|
</uni-grid>
|
||||||
@ -30,33 +30,33 @@
|
|||||||
<view class='content'>
|
<view class='content'>
|
||||||
<!-- 设备状态栏 -->
|
<!-- 设备状态栏 -->
|
||||||
<uni-group mode="card" class="status-card-group no-wrapper-padding">
|
<uni-group mode="card" class="status-card-group no-wrapper-padding">
|
||||||
<uni-grid :column="4" :showBorder="false">
|
<view class="flex-container">
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">工作状态</view>
|
<view class="title">工作状态</view>
|
||||||
<text
|
<text
|
||||||
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
|
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">并网状态</view>
|
<view class="title">并网状态</view>
|
||||||
<text class="text">{{gridStatusOptions[item.gridStatus] || '-'}}</text>
|
<text class="text">{{gridStatusOptions[item.gridStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">设备状态</view>
|
<view class="title">设备状态</view>
|
||||||
<text class="text">{{deviceStatusOptions[item.deviceStatus] || '-'}}</text>
|
<text class="text">{{deviceStatusOptions[item.deviceStatus] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">控制模式</view>
|
<view class="title">控制模式</view>
|
||||||
<text class="text">{{controlModeOptions[item.controlMode] || '-'}}</text>
|
<text class="text">{{controlModeOptions[item.controlMode] || '-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
</uni-grid>
|
</view>
|
||||||
</uni-group>
|
</uni-group>
|
||||||
<!-- 设备数据 -->
|
<!-- 设备数据 -->
|
||||||
<uni-group mode="card" class="data-card-group"
|
<uni-group mode="card" class="data-card-group"
|
||||||
@ -77,26 +77,26 @@
|
|||||||
<uni-group class="branch-card-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
|
<uni-group class="branch-card-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
|
||||||
v-for="(pcsBranchItem,pcsBranchIndex) in item.pcsBranchInfoList"
|
v-for="(pcsBranchItem,pcsBranchIndex) in item.pcsBranchInfoList"
|
||||||
:key="pcsBranchIndex+'pcsBranchInfoList'">
|
:key="pcsBranchIndex+'pcsBranchInfoList'">
|
||||||
<uni-grid :column="3" :square="false" :showBorder="false">
|
<view class="flex-container">
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">直流功率</view>
|
<view class="title">直流功率</view>
|
||||||
<text class="text">{{pcsBranchItem.dcPower}}kW</text>
|
<text class="text">{{pcsBranchItem.dcPower}}kW</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">直流电压</view>
|
<view class="title">直流电压</view>
|
||||||
<text class="text">{{pcsBranchItem.dcVoltage}}V</text>
|
<text class="text">{{pcsBranchItem.dcVoltage}}V</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
<uni-grid-item>
|
<view class="flex-lists">
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<view class="title">直流电流</view>
|
<view class="title">直流电流</view>
|
||||||
<text class="text">{{pcsBranchItem.dcCurrent}}A</text>
|
<text class="text">{{pcsBranchItem.dcCurrent}}A</text>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</view>
|
||||||
</uni-grid>
|
</view>
|
||||||
</uni-group>
|
</uni-group>
|
||||||
</view>
|
</view>
|
||||||
</uni-collapse-item>
|
</uni-collapse-item>
|
||||||
@ -262,9 +262,9 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
onLoad(options) {
|
||||||
uni.showLoading()
|
uni.showLoading()
|
||||||
this.siteId = this.$route.query.siteId || ''
|
this.siteId = options.siteId || ''
|
||||||
getRunningHeadInfo({
|
getRunningHeadInfo({
|
||||||
siteId: this.siteId
|
siteId: this.siteId
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
|
|||||||
@ -88,7 +88,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.status-bar{
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: var(--status-bar-height);
|
||||||
|
position: fixed;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
z-index:99;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 暂无数据通用样式
|
// 暂无数据通用样式
|
||||||
@ -97,7 +105,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 100px;
|
line-height: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
font-size: 18px;
|
font-size: 30rpx;
|
||||||
}
|
}
|
||||||
// 九宫格
|
// 九宫格
|
||||||
.grid-item-box {
|
.grid-item-box {
|
||||||
@ -126,6 +134,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.flex-container{
|
||||||
|
display: flex;
|
||||||
|
.flex-lists{
|
||||||
|
flex:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
// 设备详情页面 状态公共样式
|
// 设备详情页面 状态公共样式
|
||||||
.common-collapse-item{
|
.common-collapse-item{
|
||||||
.content{
|
.content{
|
||||||
@ -145,9 +159,10 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
padding:4rpx 10rpx;
|
padding:0 10rpx;
|
||||||
margin-right: 10rpx;
|
margin-right: 10rpx;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
|
line-height: 38rpx;
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
}
|
}
|
||||||
.name{
|
.name{
|
||||||
@ -158,11 +173,6 @@
|
|||||||
}
|
}
|
||||||
// 设备状态卡片
|
// 设备状态卡片
|
||||||
.status-card-group{
|
.status-card-group{
|
||||||
&.no-wrapper-padding{
|
|
||||||
.uni-group__content{
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.uni-group__content{
|
.uni-group__content{
|
||||||
padding-top:0;
|
padding-top:0;
|
||||||
padding-bottom:0;
|
padding-bottom:0;
|
||||||
@ -212,9 +222,11 @@
|
|||||||
.child-table{
|
.child-table{
|
||||||
.uni-table-th{
|
.uni-table-th{
|
||||||
color:#333;
|
color:#333;
|
||||||
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
.uni-table-td{
|
.uni-table-td{
|
||||||
color:#000;
|
color:#000;
|
||||||
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
.table--border{
|
.table--border{
|
||||||
border-color:#ebedf0;
|
border-color:#ebedf0;
|
||||||
@ -258,7 +270,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content{
|
.content{
|
||||||
background: linear-gradient(to bottom, #22bb5873, #45db7a26);
|
background-color:rgba(69,219,122,0.15);
|
||||||
}
|
}
|
||||||
// 状态九宫格
|
// 状态九宫格
|
||||||
.status-card-group{
|
.status-card-group{
|
||||||
@ -290,7 +302,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content{
|
.content{
|
||||||
background: linear-gradient(to bottom, #f5604e73, #f5604e26);
|
background: rgba(245,96,78,0.15);
|
||||||
}
|
}
|
||||||
// 状态九宫格
|
// 状态九宫格
|
||||||
.status-card-group{
|
.status-card-group{
|
||||||
@ -322,7 +334,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content{
|
.content{
|
||||||
background: linear-gradient(to bottom, #8c8c8c73, #8c8c8c26);
|
background: rgba(140,140,140,0.15);
|
||||||
}
|
}
|
||||||
// 状态九宫格
|
// 状态九宫格
|
||||||
.status-card-group{
|
.status-card-group{
|
||||||
|
|||||||
Reference in New Issue
Block a user