xzzn/emsapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
白菜
2026-01-19 17:30:03 +08:00
parent de403e861d
commit 648f031ebe
12 changed files with 536 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages.json
View File

@ -12,7 +12,7 @@
}, { }, {
"path": "pages/index", "path": "pages/index",
"style": { "style": {
"navigationBarTitleText": "移动端框架", "navigationBarTitleText": "工单列表",
"navigationStyle": "custom", "navigationStyle": "custom",
"onReachBottomDistance": 100 "onReachBottomDistance": 100
} }

7
pages/index.vue
View File

@ -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;
} }

375
pages/login.vue
View File

@ -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'
import {
getToken
} from '@/utils/auth'
export default { export default {
data() { data() {
return { return {
codeUrl: "", codeUrl: "",
captchaEnabled: true, captchaEnabled: true,
// 用户注册开关 // 用户注册开关
register: false, register: false,
globalConfig: getApp().globalData.config, globalConfig: getApp().globalData.config,
loginForm: { loginForm: {
username: "admin", username: "admin",
password: "admin123", password: "admin123",
code: "", code: "",
uuid: "" uuid: ""
} }
} }
}, },
created() { created() {
this.getCode() this.getCode()
}, },
onLoad() { onLoad() {
//#ifdef H5 //#ifdef H5
if (getToken()) { if (getToken()) {
this.$tab.reLaunch('/pages/index') this.$tab.reLaunch('/pages/index')
} }
//#endif //#endif
}, },
methods: { methods: {
// 用户注册 // 用户注册
handleUserRegister() { handleUserRegister() {
this.$tab.redirectTo(`/pages/register`) this.$tab.redirectTo(`/pages/register`)
}, },
// 隐私协议 // 隐私协议
handlePrivacy() { handlePrivacy() {
let site = this.globalConfig.appInfo.agreements[0] let site = this.globalConfig.appInfo.agreements[0]
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() { handleUserAgrement() {
let site = this.globalConfig.appInfo.agreements[1] 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}`)
}, },
// 获取图形验证码 // 获取图形验证码
getCode() { getCode() {
getCodeImg().then(res => { getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.codeUrl = 'data:image/gif;base64,' + res.img this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid this.loginForm.uuid = res.uuid
} }
}) })
}, },
// 登录方法 // 登录方法
async handleLogin() { async handleLogin() {
if (this.loginForm.username === "") { if (this.loginForm.username === "") {
this.$modal.msgError("请输入账号") this.$modal.msgError("请输入账号")
} else if (this.loginForm.password === "") { } else if (this.loginForm.password === "") {
this.$modal.msgError("请输入密码") this.$modal.msgError("请输入密码")
} else if (this.loginForm.code === "" && this.captchaEnabled) { } else if (this.loginForm.code === "" && this.captchaEnabled) {
this.$modal.msgError("请输入验证码") this.$modal.msgError("请输入验证码")
} else { } else {
this.$modal.loading("登录中，请耐心等待...") this.$modal.loading("登录中，请耐心等待...")
this.pwdLogin() this.pwdLogin()
} }
}, },
// 密码登录 // 密码登录
async pwdLogin() { async pwdLogin() {
this.$store.dispatch('Login', this.loginForm).then(() => { this.$store.dispatch('Login', this.loginForm).then(() => {
this.$modal.closeLoading() this.$modal.closeLoading()
this.loginSuccess() this.loginSuccess()
}).catch(() => { }).catch(() => {
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.getCode() this.getCode()
} }
}) })
}, },
// 登录成功后，处理函数 // 登录成功后，处理函数
loginSuccess(result) { loginSuccess(result) {
// 设置用户信息 // 设置用户信息
this.$store.dispatch('GetInfo').then(res => { this.$store.dispatch('GetInfo').then(res => {
this.$tab.reLaunch('/pages/index') this.$tab.reLaunch('/pages/index')
}) })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page { page {
background-color: #ffffff; background-color: #ffffff;
} }
.normal-login-container { .normal-login-container {
width: 100%; width: 100%;
.logo-content { .logo-content {
width: 100%; width: 100%;
font-size: 21px; font-size: 21px;
text-align: center; text-align: center;
padding-top: 15%; padding-top: 15%;
image { image {
border-radius: 4px; border-radius: 4px;
} }
.title { .title {
margin-left: 10px; margin-left: 10px;
} }
} }
.login-form-content { .login-form-content {
text-align: center; text-align: center;
margin: 20px auto; margin: 20px auto;
margin-top: 15%; margin-top: 15%;
width: 80%; width: 80%;
.input-item { .input-item {
margin: 20px auto; margin: 20px auto;
background-color: #f5f6f7; background-color: #f5f6f7;
height: 45px; height: 45px;
border-radius: 20px; border-radius: 20px;
.icon { .icon {
font-size: 38rpx; font-size: 38rpx;
margin-left: 10px; margin-left: 10px;
color: #999; color: #999;
} }
.input { .input {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
text-align: left; text-align: left;
padding-left: 15px; padding-left: 15px;
} }
} }
.login-btn { .login-btn {
margin-top: 40px; margin-top: 40px;
height: 45px; height: 45px;
} }
.reg { .reg {
margin-top: 15px; margin-top: 15px;
} }
.xieyi { .xieyi {
color: #333; color: #333;
margin-top: 20px; margin-top: 20px;
} }
.login-code { .login-code {
height: 38px; height: 38px;
float: right; float: right;
.login-code-img {
height: 38px;
position: absolute;
margin-left: 10px;
width: 200rpx;
}
}
}
}
.login-code-img {
height: 38px;
position: absolute;
margin-left: 10px;
width: 200rpx;
}
}
}
}
</style> </style>

5
pages/ticket/index.vue
View File

@ -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>

8
pages/work/DateRangeSelect.vue
View File

@ -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;
}
} }
} }
} }

22
pages/work/bmsdcc/index.vue
View File

@ -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)
}) })

20
pages/work/bmszl/index.vue
View File

@ -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 => {

21
pages/work/db/index.vue
View File

@ -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()
}) })

6
pages/work/dtdc/index.vue
View File

@ -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;
} }

367
pages/work/index.vue
View File

@ -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;
} }
} }

46
pages/work/pcs/index.vue
View File

@ -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 => {

34
static/scss/global.scss
View File

@ -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{