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