Compare commits
29 Commits
ce189108ed
...
waibao
| Author | SHA1 | Date | |
|---|---|---|---|
| 629047fa06 | |||
| ac7dd9dd30 | |||
| 69e199e9cc | |||
| 7191f3cf36 | |||
| 13ee9e66cc | |||
| fb33e5a1f6 | |||
| 3676313439 | |||
| e1eec995ca | |||
| b493e331c6 | |||
| b8898311ae | |||
| 5c78cbf39f | |||
| b24d930f4f | |||
| feaeb0c7d7 | |||
| 3a034b48f1 | |||
| 648f031ebe | |||
| de403e861d | |||
| 2f1e29dccd | |||
| b558282529 | |||
| 5e4636fd7d | |||
| 26a8114840 | |||
| e7bc43008f | |||
| 6149cba24e | |||
| a8c79eef72 | |||
| fb8c8aab28 | |||
| 74b22a2ec6 | |||
| 5ea121abf0 | |||
| ffefc21d96 | |||
| 76065f7287 | |||
| 84e84fca10 |
174
api/ems/site.js
@ -24,14 +24,22 @@ export function getBMSBatteryCluster(data) {
|
||||
})
|
||||
}
|
||||
|
||||
//获取电表数据
|
||||
export function getAmmeterDataList(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getAmmeterDataList`, //?siteId=${siteId}
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
//获取电表数据
|
||||
export function getAmmeterDataList(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getAmmeterDataList`, //?siteId=${siteId}
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//获取所有设备
|
||||
export function getDeviceList(siteId) {
|
||||
return request({
|
||||
url: `/ems/siteConfig/getDeviceList?siteId=${siteId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//获取pcs头部的设备信息
|
||||
export function getRunningHeadInfo(data) {
|
||||
@ -41,49 +49,121 @@ export function getRunningHeadInfo(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
//获取pcs列表
|
||||
export function getPcsDetailInfo(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getPcsDetailInfo`, //?siteId=${siteId}
|
||||
method: 'get',
|
||||
//获取pcs列表
|
||||
export function getPcsDetailInfo(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getPcsDetailInfo`, //?siteId=${siteId}
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//获取pcs名称列表
|
||||
export function getPcsNameList(siteId) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getPcsNameList?siteId=${siteId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//获取单体电池 电池堆列表数据
|
||||
export function getStackNameList(siteId) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getStackNameList?siteId=${siteId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
//获取单体电池 电池簇列表数据
|
||||
export function getClusterNameList({ stackDeviceId, siteId }) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getClusterNameList?stackDeviceId=${stackDeviceId}&siteId=${siteId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
//单体电池表格数据
|
||||
export function getClusterDataInfoList({ siteId, stackDeviceId, clusterDeviceId, batteryId, pageSize, pageNum }) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getClusterDataInfoList?clusterDeviceId=${clusterDeviceId}&siteId=${siteId}&stackDeviceId=${stackDeviceId}&batteryId=${batteryId}&pageSize=${pageSize}&pageNum=${pageNum}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 单体电池图表
|
||||
export function getSingleBatteryData({ siteId, deviceId, clusterDeviceId, startDate, endDate }) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getSingleBatteryData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&clusterDeviceId=${clusterDeviceId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//获取单个站点的基本信息
|
||||
export function getSingleSiteBaseInfo(data) {
|
||||
return request({
|
||||
url: `/ems/siteMap/getSingleSiteBaseInfo`, //?siteId=${siteId}`,
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//单站监控 首页 总累计运行数据(基于日表)
|
||||
export function getDzjkHomeTotalView(siteId) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/homeTotalView?siteId=${siteId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 单站监控项目展示数据(字段配置 + 最新值)
|
||||
export function getProjectDisplayData(siteId) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getProjectDisplayData?siteId=${siteId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 电价报表(收益数据)
|
||||
export function getAmmeterRevenueData(params) {
|
||||
return request({
|
||||
url: `/ems/statsReport/getAmmeterRevenueData`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 一周冲放曲线
|
||||
export function getSevenChargeData(data) {
|
||||
return request({
|
||||
url: `/ems/siteMap/getSevenChargeData`, //?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//获取单体电池 电池堆列表数据
|
||||
export function getStackNameList(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getStackNameList`, //?siteId=${siteId}
|
||||
//单站监控 首页 当日功率曲线
|
||||
export function getPointData(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getPointData`,
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 点位配置-曲线数据(与管理端一致)
|
||||
export function getPointConfigCurve(data) {
|
||||
return request({
|
||||
url: `/ems/pointConfig/curve`,
|
||||
method: 'post',
|
||||
data,
|
||||
headers: {
|
||||
repeatSubmit: false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取站点包含的设备种类 用来判断单站监控设备监控的菜单栏展示
|
||||
export function getSiteAllDeviceCategory(data) {
|
||||
return request({
|
||||
url: `/ems/siteConfig/getSiteAllDeviceCategory`,
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
//获取单体电池 电池簇列表数据
|
||||
export function getClusterNameList(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getClusterNameList`, //?stackDeviceId=${stackDeviceId}&siteId=${siteId}
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
//单体电池表格数据
|
||||
export function getClusterDataInfoList(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getClusterDataInfoList?`, //clusterDeviceId=${clusterDeviceId}&siteId=${siteId}&stackDeviceId=${stackDeviceId}&pageSize=${pageSize}&pageNum=${pageNum}
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 单体电池图表
|
||||
export function getSingleBatteryData({
|
||||
siteId,
|
||||
deviceId,
|
||||
clusterDeviceId,
|
||||
startDate,
|
||||
endDate
|
||||
}) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/getSingleBatteryData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&clusterDeviceId=${clusterDeviceId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
69
components/SiteSelector/index.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="ems-site-selector">
|
||||
<uni-data-picker placeholder="请选择" popup-title="业态选择" :step-searh="true" :value="siteId" :clear-icon="false"
|
||||
:localdata="siteTypeOptions" :ellipsis="false" @change="handleChange">
|
||||
</uni-data-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['siteId', 'siteTypeOptions'])
|
||||
},
|
||||
methods: {
|
||||
handleChange(data) {
|
||||
const valueList = data?.detail?.value || []
|
||||
const siteObj = valueList[1]
|
||||
if (!siteObj || siteObj.value === undefined || siteObj.value === null || siteObj.value === this.siteId) return
|
||||
this.$store.dispatch('SetCurrentSiteId', siteObj.value)
|
||||
this.$emit('change', siteObj.value)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('LoadSites')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ems-site-selector {
|
||||
.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;
|
||||
line-height: 36rpx;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.arrow-area {
|
||||
transform: rotate(-135deg);
|
||||
|
||||
.input-arrow {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
components/SiteSwitchHeader/index.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view class="site-switch-header">
|
||||
<uni-data-picker
|
||||
placeholder="请选择"
|
||||
popup-title="业态选择"
|
||||
:step-searh="true"
|
||||
:value="siteId"
|
||||
:clear-icon="false"
|
||||
:localdata="siteTypeOptions"
|
||||
:ellipsis="false"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<view class="info">
|
||||
<view class="list">
|
||||
<uni-icons type="location" color="#fff" size="20"></uni-icons>
|
||||
{{ siteAddress || '-' }}
|
||||
</view>
|
||||
<view class="list">
|
||||
<uni-icons type="calendar" color="#fff" size="20"></uni-icons>
|
||||
{{ runningTime || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
siteId: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
siteTypeOptions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
siteAddress: {
|
||||
type: String,
|
||||
default: '-'
|
||||
},
|
||||
runningTime: {
|
||||
type: String,
|
||||
default: '-'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(data) {
|
||||
this.$emit('change', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.site-switch-header {
|
||||
background: linear-gradient(to right, #547ef4, #679ff5);
|
||||
padding: 30rpx 30rpx;
|
||||
padding-bottom: 100rpx;
|
||||
color: #fff;
|
||||
|
||||
.info {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
vertical-align: middle;
|
||||
margin-top: 20rpx;
|
||||
|
||||
>.list {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
>.uni-icons {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-data-tree {
|
||||
::v-deep {
|
||||
.uni-data-tree-dialog {
|
||||
color: #333;
|
||||
|
||||
.selected-item,
|
||||
.dialog-title {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
line-height: 36rpx;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.arrow-area {
|
||||
transform: rotate(-135deg);
|
||||
|
||||
.input-arrow {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
config.js
@ -1,26 +1,30 @@
|
||||
// 应用全局配置
|
||||
module.exports = {
|
||||
baseUrl: 'http://110.40.171.179:8089',
|
||||
// baseUrl: 'http://localhost:8089',
|
||||
// 应用信息
|
||||
appInfo: {
|
||||
// 应用名称
|
||||
name: "xzzn-app",
|
||||
// 应用版本
|
||||
version: "1.2.0",
|
||||
// 应用logo
|
||||
logo: "/static/logo.png",
|
||||
// 官方网站
|
||||
site_url: "http://xzzn.vip",
|
||||
// 政策协议
|
||||
agreements: [{
|
||||
title: "隐私政策",
|
||||
url: "https://xzzn.vip/protocol.html"
|
||||
},
|
||||
{
|
||||
title: "用户服务协议",
|
||||
url: "https://xzzn.vip/protocol.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// 应用全局配置
|
||||
module.exports = {
|
||||
// todo 打包项目时切换baseUrl
|
||||
// baseUrl: 'http://localhost:8089',
|
||||
// 测试环境
|
||||
baseUrl: 'http://110.40.171.179:8089',
|
||||
// 生产环境
|
||||
// baseUrl: 'http://1.15.120.242:8089',
|
||||
// 应用信息
|
||||
appInfo: {
|
||||
// 应用名称
|
||||
name: "上动EMS",
|
||||
// 应用版本
|
||||
version: "1.2.0",
|
||||
// 应用logo
|
||||
logo: "/static/logo-trans.png",
|
||||
// 官方网站
|
||||
site_url: "http://xzzn.vip",
|
||||
// 政策协议
|
||||
agreements: [{
|
||||
title: "隐私政策",
|
||||
url: "https://xzzn.vip/protocol.html"
|
||||
},
|
||||
{
|
||||
title: "用户服务协议",
|
||||
url: "https://xzzn.vip/protocol.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
1
data/ems/china.json
Normal file
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name" : "EMS移动端",
|
||||
"appid" : "__UNI__B330617",
|
||||
"name" : "上动EMS",
|
||||
"appid" : "__UNI__5FBB073",
|
||||
"description" : "",
|
||||
"versionName" : "1.2.0",
|
||||
"versionCode" : "100",
|
||||
@ -8,6 +8,12 @@
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
"safearea" : {
|
||||
"background" : "#FFFFFF",
|
||||
"top" : {
|
||||
"offset" : "auto"
|
||||
}
|
||||
},
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
@ -35,8 +41,24 @@
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
"ios" : {},
|
||||
"sdkConfigs" : {}
|
||||
"ios" : {
|
||||
"dSYMs" : false
|
||||
},
|
||||
"sdkConfigs" : {},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "static/logo.png",
|
||||
"xhdpi" : "static/logo.png",
|
||||
"xxhdpi" : "static/logo.png",
|
||||
"xxxhdpi" : "static/logo.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : ""
|
||||
}
|
||||
},
|
||||
"splashscreen" : {
|
||||
"androidStyle" : "common"
|
||||
}
|
||||
}
|
||||
},
|
||||
"quickapp" : {},
|
||||
@ -60,10 +82,12 @@
|
||||
"port" : 9090,
|
||||
"https" : false
|
||||
},
|
||||
"title" : "EMS-App",
|
||||
"title" : "上动EMS",
|
||||
"router" : {
|
||||
"mode" : "hash",
|
||||
"base" : "./"
|
||||
}
|
||||
}
|
||||
},
|
||||
"locale" : "zh-Hans",
|
||||
"fallbackLocale" : "zh-Hans"
|
||||
}
|
||||
|
||||
85
pages.json
@ -9,15 +9,13 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "注册"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "移动端框架",
|
||||
"navigationStyle": "custom",
|
||||
"onReachBottomDistance": 100
|
||||
}
|
||||
}, {
|
||||
"path": "pages/work/index",
|
||||
}, {
|
||||
"path": "pages/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/work/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工作台"
|
||||
}
|
||||
@ -71,11 +69,19 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "浏览文本"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ticket/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工单详情"
|
||||
},
|
||||
{
|
||||
"path": "pages/ticket/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工单列表",
|
||||
"navigationStyle": "custom",
|
||||
"onReachBottomDistance": 100
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ticket/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -96,17 +102,23 @@
|
||||
"navigationBarTitleText": "电表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/work/pcs/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "PCS"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/work/dtdc/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "单体电池",
|
||||
"onReachBottomDistance": 100
|
||||
{
|
||||
"path": "pages/work/pcs/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "PCS"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/work/yl/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "冷却"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/work/dtdc/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "单体电池",
|
||||
"onReachBottomDistance": 100
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,16 +128,21 @@
|
||||
"selectedColor": "#000000",
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [{
|
||||
"pagePath": "pages/index",
|
||||
"iconPath": "static/images/tabbar/home.png",
|
||||
"selectedIconPath": "static/images/tabbar/home_.png",
|
||||
"text": "首页"
|
||||
}, {
|
||||
"pagePath": "pages/work/index",
|
||||
"iconPath": "static/images/tabbar/work.png",
|
||||
"list": [{
|
||||
"pagePath": "pages/index",
|
||||
"iconPath": "static/images/tabbar/home.png",
|
||||
"selectedIconPath": "static/images/tabbar/home_.png",
|
||||
"text": "首页"
|
||||
}, {
|
||||
"pagePath": "pages/work/index",
|
||||
"iconPath": "static/images/tabbar/work.png",
|
||||
"selectedIconPath": "static/images/tabbar/work_.png",
|
||||
"text": "工作台"
|
||||
}, {
|
||||
"pagePath": "pages/ticket/list",
|
||||
"iconPath": "static/images/tabbar/ticket.png",
|
||||
"selectedIconPath": "static/images/tabbar/ticket_.png",
|
||||
"text": "工单"
|
||||
}, {
|
||||
"pagePath": "pages/mine/index",
|
||||
"iconPath": "static/images/tabbar/mine.png",
|
||||
@ -138,4 +155,4 @@
|
||||
"navigationBarTitleText": "EMS",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
693
pages/index.vue
@ -1,184 +1,509 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="btn-list">
|
||||
<uni-row>
|
||||
<uni-col :span="12">
|
||||
<button type="default" class="btns" :class="{'active-btn' : active === 'undone'}"
|
||||
@click="changeTab('undone')">未处理</button>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<button type="default" class="btns" :class="{'active-btn' : active === 'done'}"
|
||||
@click="changeTab('done')">已处理</button>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
<view v-if="list.length===0" class="no-data">暂无数据</view>
|
||||
<view class="content scroll-y" v-else>
|
||||
<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
|
||||
<view class="item-title" :class="item.status === 1 ? 'done' : 'undone'">工单号:{{item.ticketNo}}</view>
|
||||
<view class="item-content">
|
||||
<view class="item-info">工单标题:{{item.title}}</view>
|
||||
<view class="item-info">问题描述:{{item.content}}</view>
|
||||
<view class="item-info">工单状态:{{ticketStatusOptions[item.status]}}</view>
|
||||
<view class="item-info">预期完成时间:{{item.expectedCompleteTime || '-'}}</view>
|
||||
<view class="item-info">处理人:{{item.workName || '-'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import {
|
||||
listTicket
|
||||
} from 'api/ems/ticket'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
ticketStatusOptions: (state) => state.ems.ticketStatusOptions
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 'undone',
|
||||
total: 0,
|
||||
list: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab(active) {
|
||||
if (active === this.active) return
|
||||
this.active = active
|
||||
this.reset()
|
||||
this.init()
|
||||
},
|
||||
init() {
|
||||
//0:'待处理', 1:'已处理', 2:'处理中'
|
||||
let url = `/ticket/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
|
||||
if (this.active === 'done') {
|
||||
url += `&status=1`
|
||||
} else {
|
||||
url += `&status=0&status=2`
|
||||
}
|
||||
uni.showLoading()
|
||||
return listTicket(url).then(response => {
|
||||
const data = JSON.parse(JSON.stringify(response?.rows || []))
|
||||
this.list = this.list.concat(data)
|
||||
this.total = response?.total || 0
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
toDetail(id) {
|
||||
this.$tab.navigateTo(`/pages/ticket/index?id=${id}`)
|
||||
},
|
||||
reset() {
|
||||
this.list = []
|
||||
this.total = 0
|
||||
this.pageNum = 1
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
console.log('触底了')
|
||||
if (this.list.length >= this.total) {
|
||||
return console.log('数据已经加载完成')
|
||||
}
|
||||
this.pageNum += 1;
|
||||
this.init().catch(() => {
|
||||
this.pageNum -= 1
|
||||
})
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.reset()
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
uni-button:after {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-list {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
.btns {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
background-color: #fff;
|
||||
|
||||
&.active-btn {
|
||||
background-color: #3a98ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-y {
|
||||
// height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
padding: 70px 20px 60px 20px;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .1), 0 0 0 rgba(0, 0, 0, .5);
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.item-title {
|
||||
border-radius: 7px 7px 0 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 15px;
|
||||
background-color: #FC6B69;
|
||||
color: #fff;
|
||||
|
||||
&.done {
|
||||
background-color: #05AEA3;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
padding: 15px 15px;
|
||||
|
||||
.item-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content .item-info:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content .item-list:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="home-container">
|
||||
<site-switch-header :site-id="siteId" :site-type-options="siteTypeOptions" :site-address="baseInfo.siteAddress"
|
||||
:running-time="baseInfo.runningTime" @change="selectedSite" />
|
||||
|
||||
<view class="base-info">
|
||||
<view class="map-card">
|
||||
<image v-if="mapUrl" class="site-map" :src="mapUrl" mode="aspectFill"></image>
|
||||
<view v-else class="map-empty">暂无站点位置</view>
|
||||
</view>
|
||||
<view class="total-card">
|
||||
<view class="total-header">
|
||||
<view class="title">总累计运行数据</view>
|
||||
<view class="total-revenue">
|
||||
<text class="label">总收入</text>
|
||||
<text class="value">{{ format2(totalRevenueDisplayValue) }}</text>
|
||||
<text class="unit">元</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
|
||||
<uni-grid-item v-for="(item, index) in runningDataCards" :key="index + 'sjglData'">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">{{ item.title }}</view>
|
||||
<view class="text" :style="{ color: item.color }">
|
||||
{{ format2(item.value) }}
|
||||
</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
|
||||
<uni-section title="收入曲线" type="line" class="sections-list">
|
||||
<view style="width:100%;height: 220px;">
|
||||
<qiun-data-charts type="column" :chartData="revenueChartData" :optsWatch='true'
|
||||
:inScrollView="true" :pageScrollTop="pageScrollTop" :opts="revenueOptions" :ontouch="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
import {
|
||||
formatDate
|
||||
} from '@/utils/filters'
|
||||
import {
|
||||
getAllSites,
|
||||
getSingleSiteBaseInfo,
|
||||
getDzjkHomeTotalView,
|
||||
getProjectDisplayData,
|
||||
getAmmeterRevenueData
|
||||
} from '@/api/ems/site.js'
|
||||
import SiteSwitchHeader from '@/components/SiteSwitchHeader/index.vue'
|
||||
const createSiteTypeOptions = () => ([{
|
||||
text: '储能',
|
||||
value: 'cn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '光能',
|
||||
value: 'gn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '岸电',
|
||||
value: 'ad',
|
||||
children: []
|
||||
}
|
||||
])
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SiteSwitchHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageScrollTop: 0,
|
||||
siteOptions: [],
|
||||
siteTypeOptions: createSiteTypeOptions(),
|
||||
siteId: '',
|
||||
mapUrl: '',
|
||||
baseInfo: {},
|
||||
runningInfo: {},
|
||||
runningDisplayData: [],
|
||||
revenueChartData: {},
|
||||
revenueOptions: {
|
||||
padding: [10, 5, 0, 10],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
xAxis: {
|
||||
scrollShow: false,
|
||||
itemCount: 5,
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
disabled: false,
|
||||
splitNumber: 4
|
||||
},
|
||||
extra: {}
|
||||
},
|
||||
fallbackSjglData: [{
|
||||
title: "今日充电量(kWh)",
|
||||
attr: "dayChargedCap",
|
||||
color: '#4472c4'
|
||||
},
|
||||
{
|
||||
title: "今日放电量(kWh)",
|
||||
attr: "dayDisChargedCap",
|
||||
color: '#70ad47'
|
||||
},
|
||||
{
|
||||
title: "总充电量(kWh)",
|
||||
attr: "totalChargedCap",
|
||||
color: '#4472c4'
|
||||
},
|
||||
{
|
||||
title: "今日实时收入(元)",
|
||||
attr: "dayRevenue",
|
||||
color: '#f67438'
|
||||
},
|
||||
{
|
||||
title: "昨日充电量(kWh)",
|
||||
attr: "yesterdayChargedCap",
|
||||
color: '#4472c4'
|
||||
},
|
||||
{
|
||||
title: "昨日放电量(kWh)",
|
||||
attr: "yesterdayDisChargedCap",
|
||||
color: '#70ad47'
|
||||
},
|
||||
{
|
||||
title: "总放电量(kWh)",
|
||||
attr: "totalDischargedCap",
|
||||
color: '#70ad47'
|
||||
},
|
||||
{
|
||||
title: "昨日实时收入(元)",
|
||||
attr: "yesterdayRevenue",
|
||||
color: '#f67438'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['belongSite', 'currentSiteId']),
|
||||
totalRunningSectionData() {
|
||||
return (this.runningDisplayData || []).filter(item => item.sectionName === '总累计运行数据')
|
||||
},
|
||||
totalRevenueDisplayItem() {
|
||||
const sectionData = this.totalRunningSectionData || []
|
||||
const byFieldCode = sectionData.find(item => item.fieldCode === 'totalRevenue')
|
||||
if (byFieldCode) {
|
||||
return byFieldCode
|
||||
}
|
||||
return sectionData.find(item => item.fieldName === '总收入')
|
||||
},
|
||||
totalRevenueDisplayValue() {
|
||||
return this.totalRevenueDisplayItem ? this.totalRevenueDisplayItem.fieldValue : this.runningInfo.totalRevenue
|
||||
},
|
||||
runningDataCards() {
|
||||
const sectionData = this.totalRunningSectionData || []
|
||||
if (sectionData.length > 0) {
|
||||
const revenueFieldCode = this.totalRevenueDisplayItem ? this.totalRevenueDisplayItem.fieldCode : ''
|
||||
return sectionData
|
||||
.filter(item => item.fieldCode !== revenueFieldCode)
|
||||
.map((item, index) => ({
|
||||
title: item.fieldName,
|
||||
value: item.fieldValue,
|
||||
color: this.getCardColor(index)
|
||||
}))
|
||||
}
|
||||
return this.fallbackSjglData.map(item => ({
|
||||
title: item.title,
|
||||
value: this.runningInfo[item.attr],
|
||||
color: item.color
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isAvailableSite(siteId) {
|
||||
const site = this.siteOptions.find(item => item.value === siteId)
|
||||
return !!(site && !site.disable)
|
||||
},
|
||||
getCardColor(index) {
|
||||
const colors = ['#4472c4', '#70ad47', '#4472c4', '#f67438', '#4472c4', '#70ad47', '#70ad47', '#f67438']
|
||||
return colors[index % colors.length]
|
||||
},
|
||||
format2(value) {
|
||||
const num = Number(value || 0)
|
||||
return Number.isFinite(num) ? num.toFixed(2) : '0.00'
|
||||
},
|
||||
getLastDaysRange(days = 7) {
|
||||
const end = new Date()
|
||||
const start = new Date(end.getTime() - (days - 1) * 24 * 60 * 60 * 1000)
|
||||
return [formatDate(start), formatDate(end)]
|
||||
},
|
||||
buildDateList(start, end) {
|
||||
const list = []
|
||||
const startTime = new Date(start).getTime()
|
||||
const endTime = new Date(end).getTime()
|
||||
const dayMs = 24 * 60 * 60 * 1000
|
||||
for (let t = startTime; t <= endTime; t += dayMs) {
|
||||
list.push(formatDate(t))
|
||||
}
|
||||
return list
|
||||
},
|
||||
selectedSite(data) {
|
||||
const siteObj = (data.detail.value || [])[1]
|
||||
const value = siteObj?.value
|
||||
if (!value) return
|
||||
if (value === this.siteId) return
|
||||
this.siteId = value
|
||||
this.$store.commit('SET_CURRENTSITEID', value)
|
||||
this.updateSiteInfo()
|
||||
},
|
||||
updateSiteInfo() {
|
||||
if (!this.siteId) {
|
||||
this.baseInfo = {}
|
||||
this.runningInfo = {}
|
||||
this.runningDisplayData = []
|
||||
this.revenueChartData = {}
|
||||
this.mapUrl = ''
|
||||
return
|
||||
}
|
||||
this.updateMapCenter()
|
||||
this.getSiteBaseInfo()
|
||||
this.getRunningInfo()
|
||||
this.getRevenueChartData()
|
||||
},
|
||||
getSiteBaseInfo() {
|
||||
return getSingleSiteBaseInfo({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.baseInfo = response?.data || {}
|
||||
})
|
||||
},
|
||||
getSiteList() {
|
||||
getAllSites().then(response => {
|
||||
const data = response?.data || []
|
||||
const canAccessAll = !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all')
|
||||
const siteTypeOptions = createSiteTypeOptions().map(item => ({
|
||||
...item,
|
||||
children: []
|
||||
}))
|
||||
data.forEach(item => {
|
||||
if (!canAccessAll && !this.belongSite.includes(item.siteId)) return
|
||||
const siteType = (item.siteType || item.type || 'cn').toString().toLowerCase()
|
||||
const typeOption = siteTypeOptions.find(i => i.value === siteType) || siteTypeOptions.find(i => i.value === 'cn')
|
||||
if (!typeOption) return
|
||||
typeOption.children.push({
|
||||
text: item.siteName,
|
||||
value: item.siteId,
|
||||
id: item.id,
|
||||
longitude: Number(item.longitude || 0),
|
||||
latitude: Number(item.latitude || 0)
|
||||
})
|
||||
})
|
||||
this.siteTypeOptions = siteTypeOptions.filter(item => (item.children || []).length > 0)
|
||||
this.siteOptions = this.siteTypeOptions.reduce((result, typeItem) => {
|
||||
return result.concat(typeItem.children || [])
|
||||
}, [])
|
||||
const defaultSiteId = this.isAvailableSite(this.currentSiteId) ? this.currentSiteId : (this.siteOptions[0]?.value || '')
|
||||
if (defaultSiteId) {
|
||||
this.siteId = defaultSiteId
|
||||
this.$store.commit('SET_CURRENTSITEID', defaultSiteId)
|
||||
this.updateSiteInfo()
|
||||
}
|
||||
})
|
||||
},
|
||||
updateMapCenter() {
|
||||
const site = this.siteOptions.find(item => item.value === this.siteId)
|
||||
if (!site || !site.latitude || !site.longitude) {
|
||||
this.mapUrl = ''
|
||||
return
|
||||
}
|
||||
const lat = Number(site.latitude)
|
||||
const lon = Number(site.longitude)
|
||||
const zoom = 12
|
||||
const width = 640
|
||||
const height = 360
|
||||
const tk = '01e99ab4472430e1c7dbfe4b5db99787'
|
||||
const layers = 'vec_c,cva_c'
|
||||
this.mapUrl = `https://api.tianditu.gov.cn/staticimage?center=${lon},${lat}&width=${width}&height=${height}&zoom=${zoom}&layers=${layers}&markers=${lon},${lat}&tk=${tk}`
|
||||
},
|
||||
getRunningInfo() {
|
||||
return Promise.all([
|
||||
getDzjkHomeTotalView(this.siteId),
|
||||
getProjectDisplayData(this.siteId)
|
||||
]).then(([homeResponse, displayResponse]) => {
|
||||
this.runningInfo = homeResponse?.data || {}
|
||||
this.runningDisplayData = displayResponse?.data || []
|
||||
})
|
||||
},
|
||||
getRevenueChartData() {
|
||||
const [startTime, endTime] = this.getLastDaysRange(7)
|
||||
const dateList = this.buildDateList(startTime, endTime)
|
||||
const requests = [getAmmeterRevenueData({
|
||||
siteId: this.siteId,
|
||||
startTime,
|
||||
endTime,
|
||||
pageSize: 200,
|
||||
pageNum: 1
|
||||
}).then(response => response?.rows || [])]
|
||||
Promise.all(requests).then(list => {
|
||||
const rows = list[0] || []
|
||||
const categories = dateList.map(day => day.slice(5))
|
||||
const sumMap = {}
|
||||
dateList.forEach(day => {
|
||||
sumMap[day] = 0
|
||||
})
|
||||
rows.forEach(row => {
|
||||
const day = row.dataTime || row.statisDate || row.date
|
||||
if (!day) return
|
||||
if (!Object.prototype.hasOwnProperty.call(sumMap, day)) {
|
||||
sumMap[day] = 0
|
||||
}
|
||||
const value = Number(row.actualRevenue || row.revenue || 0)
|
||||
sumMap[day] += Number.isFinite(value) ? value : 0
|
||||
})
|
||||
const series = [{
|
||||
name: '收入',
|
||||
data: dateList.map(day => Number((sumMap[day] || 0).toFixed(2)))
|
||||
}]
|
||||
const values = series[0].data
|
||||
let minVal = Math.min(...values)
|
||||
let maxVal = Math.max(...values)
|
||||
if (!Number.isFinite(minVal)) minVal = 0
|
||||
if (!Number.isFinite(maxVal)) maxVal = 0
|
||||
if (minVal === maxVal) {
|
||||
minVal -= 1
|
||||
maxVal += 1
|
||||
}
|
||||
const lower = Math.min(minVal, 0)
|
||||
const upper = Math.max(maxVal, 0)
|
||||
const padding = Math.max((upper - lower) * 0.1, 1)
|
||||
this.revenueOptions = {
|
||||
...this.revenueOptions,
|
||||
yAxis: {
|
||||
...(this.revenueOptions.yAxis || {}),
|
||||
data: [{
|
||||
min: lower - padding,
|
||||
max: upper + padding,
|
||||
format: (val) => Number(val).toFixed(2)
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
...(this.revenueOptions.extra || {}),
|
||||
markLine: {
|
||||
type: 'solid',
|
||||
data: [{
|
||||
value: 0,
|
||||
lineColor: '#ff4d4f',
|
||||
showLabel: true,
|
||||
labelText: '0',
|
||||
labelFontColor: '#ff4d4f',
|
||||
labelBgColor: '#fff1f0',
|
||||
labelBgOpacity: 0.9,
|
||||
labelAlign: 'left'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
this.revenueChartData = JSON.parse(JSON.stringify({
|
||||
categories,
|
||||
series
|
||||
}))
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentSiteId(newSiteId) {
|
||||
if (!newSiteId || newSiteId === this.siteId) return
|
||||
if (!this.isAvailableSite(newSiteId)) return
|
||||
this.siteId = newSiteId
|
||||
this.updateSiteInfo()
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.$nextTick(() => {
|
||||
this.getSiteList()
|
||||
})
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.pageScrollTop = e.scrollTop
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.home-container {
|
||||
background-color: #fff;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.base-info {
|
||||
margin-top: -80rpx;
|
||||
border-radius: 80rpx 80rpx 0 0;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.map-card {
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
margin-top: 30rpx;
|
||||
background: #f3f5f8;
|
||||
|
||||
.site-map {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.map-empty {
|
||||
height: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #8a8f98;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.total-card {
|
||||
margin-top: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
padding: 20rpx;
|
||||
|
||||
.total-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.total-revenue {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #19242d;
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #f67438;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
padding-top: 6rpx;
|
||||
padding-bottom: 6rpx;
|
||||
text-align: left;
|
||||
|
||||
.title {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
423
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.normal-login-container {
|
||||
width: 100%;
|
||||
|
||||
.logo-content {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding-top: 15%;
|
||||
|
||||
image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.icon {
|
||||
font-size: 38rpx;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 40px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.reg {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-code {
|
||||
height: 38px;
|
||||
float: right;
|
||||
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.normal-login-container {
|
||||
width: 100%;
|
||||
|
||||
.logo-content {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding-top: 15%;
|
||||
|
||||
image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.icon {
|
||||
font-size: 38rpx;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 40px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.reg {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-code {
|
||||
height: 38px;
|
||||
float: right;
|
||||
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,75 +1,75 @@
|
||||
<template>
|
||||
<view class="about-container">
|
||||
<view class="header-section text-center">
|
||||
<image style="width: 150rpx;height: 150rpx;" src="/static/logo200.png" mode="widthFix">
|
||||
</image>
|
||||
<uni-title type="h2" title="EMS移动端"></uni-title>
|
||||
</view>
|
||||
|
||||
<view class="content-section">
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>版本信息</view>
|
||||
<view class="text-right">v{{version}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>官方邮箱</view>
|
||||
<view class="text-right">ems@xx.com</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>服务热线</view>
|
||||
<view class="text-right">400-999-9999</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>公司网站</view>
|
||||
<view class="text-right">
|
||||
<uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="copyright">
|
||||
<view>Copyright © 2025 上海电动工具研究所(集团)有限公司.</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: getApp().globalData.config.appInfo.site_url,
|
||||
version: getApp().globalData.config.appInfo.version
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
display: flex;
|
||||
padding: 30rpx 0 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="about-container">
|
||||
<view class="header-section text-center">
|
||||
<image style="width: 150rpx;height: 150rpx;" src="/static/logo-trans.png" mode="widthFix">
|
||||
</image>
|
||||
<uni-title type="h2" title="EMS移动端"></uni-title>
|
||||
</view>
|
||||
|
||||
<view class="content-section">
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>版本信息</view>
|
||||
<view class="text-right">v{{version}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>官方邮箱</view>
|
||||
<view class="text-right">ems@xx.com</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>服务热线</view>
|
||||
<view class="text-right">400-999-9999</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>公司网站</view>
|
||||
<view class="text-right">
|
||||
<uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="copyright">
|
||||
<view>Copyright © 2025 上海电动工具研究所(集团)有限公司.</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: getApp().globalData.config.appInfo.site_url,
|
||||
version: getApp().globalData.config.appInfo.version
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
display: flex;
|
||||
padding: 30rpx 0 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -123,6 +123,9 @@
|
||||
},
|
||||
loadImage: function () {
|
||||
var _this = this
|
||||
uni.showLoading({
|
||||
title: '图片加载中...',
|
||||
})
|
||||
|
||||
uni.getImageInfo({
|
||||
src: _this.imageSrc,
|
||||
@ -188,7 +191,14 @@
|
||||
isShowImg: true
|
||||
})
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
fail() {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '图片加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
// 拖动时候触发的touchStart事件
|
||||
|
||||
@ -1,37 +1,38 @@
|
||||
<template>
|
||||
<view class="mine-container" :style="{height: `${windowHeight}px`}">
|
||||
<!--顶部个人信息栏-->
|
||||
<view class="header-section">
|
||||
<view class="flex padding justify-between">
|
||||
<view class="flex align-center">
|
||||
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
||||
<view class="iconfont icon-people text-gray icon"></view>
|
||||
</view>
|
||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
|
||||
</image>
|
||||
<view v-if="!name" @click="handleToLogin" class="login-tip">
|
||||
点击登录
|
||||
</view>
|
||||
<view v-if="name" @click="handleToInfo" class="user-info">
|
||||
<view class="u_title">
|
||||
用户名:{{ name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="handleToInfo" class="flex align-center">
|
||||
<text>个人信息</text>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mine-container" :style="{height: `${windowHeight}px`}">
|
||||
<!--顶部个人信息栏-->
|
||||
<view class="header-section">
|
||||
<view class="flex padding justify-between">
|
||||
<view class="flex align-center">
|
||||
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
||||
<view class="iconfont icon-people text-gray icon"></view>
|
||||
</view>
|
||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
|
||||
mode="widthFix">
|
||||
</image>
|
||||
<view v-if="!name" @click="handleToLogin" class="login-tip">
|
||||
点击登录
|
||||
</view>
|
||||
<view v-if="name" @click="handleToInfo" class="user-info">
|
||||
<view class="u_title">
|
||||
用户名:{{ name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="handleToInfo" class="flex align-center">
|
||||
<text>个人信息</text>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-section">
|
||||
<view class="mine-actions grid col-4 text-center">
|
||||
<view class="action-item" @click="handleJiaoLiuQun">
|
||||
<view class="iconfont icon-friendfill text-pink icon"></view>
|
||||
<text class="text">交流群</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="content-section">
|
||||
<view class="mine-actions grid col-4 text-center">
|
||||
<view class="action-item" @click="handleToEditInfo">
|
||||
<view class="iconfont icon-friendfill text-pink icon"></view>
|
||||
<text class="text">个人信息</text>
|
||||
</view>
|
||||
<!-- <view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-service text-blue icon"></view>
|
||||
<text class="text">在线客服</text>
|
||||
</view>
|
||||
@ -42,17 +43,17 @@
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-dianzan text-green icon"></view>
|
||||
<text class="text">点赞我们</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-user menu-icon"></view>
|
||||
<view>编辑资料</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleHelp">
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-user menu-icon"></view>
|
||||
<view>编辑资料</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="list-cell list-cell-arrow" @click="handleHelp">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-help menu-icon"></view>
|
||||
<view>常见问题</view>
|
||||
@ -63,126 +64,126 @@
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>关于我们</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-setting menu-icon"></view>
|
||||
<view>应用设置</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-setting menu-icon"></view>
|
||||
<view>应用设置</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: this.$store.state.user.name
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatar() {
|
||||
return this.$store.state.user.avatar
|
||||
},
|
||||
windowHeight() {
|
||||
return uni.getSystemInfoSync().windowHeight - 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToInfo() {
|
||||
this.$tab.navigateTo('/pages/mine/info/index')
|
||||
},
|
||||
handleToEditInfo() {
|
||||
this.$tab.navigateTo('/pages/mine/info/edit')
|
||||
},
|
||||
handleToSetting() {
|
||||
this.$tab.navigateTo('/pages/mine/setting/index')
|
||||
},
|
||||
handleToLogin() {
|
||||
this.$tab.reLaunch('/pages/login')
|
||||
},
|
||||
handleToAvatar() {
|
||||
this.$tab.navigateTo('/pages/mine/avatar/index')
|
||||
},
|
||||
handleHelp() {
|
||||
this.$tab.navigateTo('/pages/mine/help/index')
|
||||
},
|
||||
handleAbout() {
|
||||
this.$tab.navigateTo('/pages/mine/about/index')
|
||||
},
|
||||
handleJiaoLiuQun() {
|
||||
this.$modal.showToast('QQ群:①133713780(满)、②146013835(满)、③189091635')
|
||||
},
|
||||
handleBuilding() {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: this.$store.state.user.name
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatar() {
|
||||
return this.$store.state.user.avatar
|
||||
},
|
||||
windowHeight() {
|
||||
return uni.getSystemInfoSync().windowHeight - 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToInfo() {
|
||||
this.$tab.navigateTo('/pages/mine/info/index')
|
||||
},
|
||||
handleToEditInfo() {
|
||||
this.$tab.navigateTo('/pages/mine/info/edit')
|
||||
},
|
||||
handleToSetting() {
|
||||
this.$tab.navigateTo('/pages/mine/setting/index')
|
||||
},
|
||||
handleToLogin() {
|
||||
this.$tab.reLaunch('/pages/login')
|
||||
},
|
||||
handleToAvatar() {
|
||||
this.$tab.navigateTo('/pages/mine/avatar/index')
|
||||
},
|
||||
handleHelp() {
|
||||
this.$tab.navigateTo('/pages/mine/help/index')
|
||||
},
|
||||
handleAbout() {
|
||||
this.$tab.navigateTo('/pages/mine/about/index')
|
||||
},
|
||||
handleJiaoLiuQun() {
|
||||
this.$modal.showToast('QQ群:①133713780(满)、②146013835(满)、③189091635')
|
||||
},
|
||||
handleBuilding() {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
page {
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
|
||||
.mine-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.mine-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
.header-section {
|
||||
padding: 15px 15px 45px 15px;
|
||||
background-color: #3c96f3;
|
||||
color: white;
|
||||
.header-section {
|
||||
padding: 15px 15px 45px 15px;
|
||||
background-color: #3c96f3;
|
||||
color: white;
|
||||
|
||||
.login-tip {
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.cu-avatar {
|
||||
border: 2px solid #eaeaea;
|
||||
.cu-avatar {
|
||||
border: 2px solid #eaeaea;
|
||||
|
||||
.icon {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-left: 15px;
|
||||
.user-info {
|
||||
margin-left: 15px;
|
||||
|
||||
.u_title {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.u_title {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
position: relative;
|
||||
top: -50px;
|
||||
.content-section {
|
||||
position: relative;
|
||||
top: -50px;
|
||||
|
||||
.mine-actions {
|
||||
margin: 15px 15px;
|
||||
padding: 20px 0px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
.mine-actions {
|
||||
margin: 15px 15px;
|
||||
padding: 20px 0px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
|
||||
.action-item {
|
||||
.icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
.action-item {
|
||||
.icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.text {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -40,7 +40,8 @@
|
||||
</uni-file-picker>
|
||||
</view>
|
||||
</view>
|
||||
<button class="button" type="primary" style="margin-top:30px;" :loading="loading" @click="submit">提交</button>
|
||||
<button class="submit-button" type="primary" style="margin-top:30px;" :loading="loading"
|
||||
@click="submit">提交</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -95,11 +96,11 @@
|
||||
title: '提交成功',
|
||||
duration: 2000
|
||||
});
|
||||
uni.switchTab({
|
||||
url: '/pages/index'
|
||||
});
|
||||
}
|
||||
}).finally(() => this.loading = false)
|
||||
uni.switchTab({
|
||||
url: '/pages/ticket/list'
|
||||
});
|
||||
}
|
||||
}).finally(() => this.loading = false)
|
||||
|
||||
},
|
||||
// 获取上传状态
|
||||
@ -142,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 = ''
|
||||
@ -163,6 +164,7 @@
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -170,26 +172,43 @@
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
padding: 20px 20px;
|
||||
padding: 40rpx;
|
||||
color: #19242d;
|
||||
}
|
||||
|
||||
.item-lists {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .1), 0 0 0 rgba(0, 0, 0, .5);
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, .1), 0 0 0 rgba(0, 0, 0, .5);
|
||||
border-radius: 10rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 15px;
|
||||
background-color: #e4e4e4;
|
||||
color: #333;
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: #4c7af3;
|
||||
height: 30rpx;
|
||||
width: 6rpx;
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 15px;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.submit-button {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
244
pages/ticket/list.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="status-bar"></view>
|
||||
<view class="page-title">工单</view>
|
||||
<view class="btn-list">
|
||||
<uni-row>
|
||||
<uni-col :span="12">
|
||||
<button type="default" class="btns" :class="{'active-btn' : active === 'undone'}"
|
||||
@click="changeTab('undone')">待处理</button>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<button type="default" class="btns" :class="{'active-btn' : active === 'done'}"
|
||||
@click="changeTab('done')">已处理</button>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
<view v-if="list.length===0" class="no-data">暂无数据</view>
|
||||
<view class="content scroll-y" v-else>
|
||||
<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
|
||||
<view class="item-title" :class="item.status === 3 ? 'done' : item.status === 2 ? 'doing' : 'undone'">
|
||||
工单号:{{item.ticketNo}}
|
||||
<view class="item-status">{{ticketStatusOptions[item.status]}}</view>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="item-info">工单标题:
|
||||
<text class="info-value">{{item.title}}</text>
|
||||
</view>
|
||||
<view class="item-info">问题描述:
|
||||
<text class="info-value">{{item.content}}</text>
|
||||
</view>
|
||||
<view class="item-info">预期完成时间:
|
||||
<text class="info-value">{{item.expectedCompleteTime || '-'}}</text>
|
||||
</view>
|
||||
<view class="item-info">处理人:
|
||||
<text class="info-value">
|
||||
{{item.workName || '-'}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import {
|
||||
listTicket
|
||||
} from 'api/ems/ticket'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
ticketStatusOptions: (state) => state.ems.ticketStatusOptions
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 'undone',
|
||||
total: 0,
|
||||
list: [],
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab(active) {
|
||||
if (active === this.active) return
|
||||
this.active = active
|
||||
this.reset()
|
||||
this.init()
|
||||
},
|
||||
init() {
|
||||
//1: '待处理', 2: '处理中', 3: '已处理'
|
||||
let url = `/ticket/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
|
||||
if (this.active === 'done') {
|
||||
url += `&status=3`
|
||||
} else {
|
||||
url += `&status=1&status=2`
|
||||
}
|
||||
uni.showLoading()
|
||||
return listTicket(url).then(response => {
|
||||
const data = JSON.parse(JSON.stringify(response?.rows || []))
|
||||
this.list = this.list.concat(data)
|
||||
this.total = response?.total || 0
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
toDetail(id) {
|
||||
this.$tab.navigateTo(`/pages/ticket/index?id=${id}`)
|
||||
},
|
||||
reset() {
|
||||
this.list = []
|
||||
this.total = 0
|
||||
this.pageNum = 1
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.length >= this.total) {
|
||||
return console.log('数据已经加载完成')
|
||||
}
|
||||
this.pageNum += 1;
|
||||
this.init().catch(() => {
|
||||
this.pageNum -= 1
|
||||
})
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.reset()
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: #f5f6f7;
|
||||
|
||||
.no-data {
|
||||
padding-top: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
uni-button:after {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-list {
|
||||
position: fixed;
|
||||
top: calc(var(--status-bar-height) + 56rpx);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
padding: 20rpx 30rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.btns {
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
width: 90%;
|
||||
font-size: 26rpx;
|
||||
line-height: 64rpx;
|
||||
color: #19242d;
|
||||
background: #d9e7fc;
|
||||
|
||||
&.active-btn {
|
||||
background: #4c7af3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 120px 30rpx 120rpx 30rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
position: fixed;
|
||||
top: var(--status-bar-height);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
padding: 16rpx 30rpx 10rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #19242d;
|
||||
background: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 工单列表
|
||||
.item-list {
|
||||
color: #4b4951;
|
||||
border-radius: 14rpx;
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, .1), 0 0 0 rgba(0, 0, 0, .5);
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border: 1px solid #eee;
|
||||
background: #ffffff;
|
||||
|
||||
// 标题
|
||||
.item-title {
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
|
||||
.item-status {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 2rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
&.done {
|
||||
.item-status {
|
||||
background-color: #30be95;
|
||||
}
|
||||
}
|
||||
|
||||
&.doing {
|
||||
.item-status {
|
||||
background-color: #3c68e7;
|
||||
}
|
||||
}
|
||||
|
||||
&.undone {
|
||||
.item-status {
|
||||
background-color: #ed7876;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内容
|
||||
.item-content {
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.item-info {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.info-value {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content .item-info:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content .item-list:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
116
pages/work/DateRangeSelect.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view class="time-range">
|
||||
<uni-datetime-picker v-model="dateRange" type="daterange" :end="defaultDateRange[1]" :clear-icon="false"
|
||||
rangeSeparator="至" @change="changeTime" />
|
||||
<view class="btns-container">
|
||||
<button size="mini" class="small" :disabled="loading" @click="reset">重置</button>
|
||||
<!-- <button type="primary" class="small" size="mini" :disabled="loading" @click="search">搜索</button> -->
|
||||
<button type="primary" class="large" size="mini" :disabled="loading"
|
||||
@click="timeLine('before')">上一时段</button>
|
||||
<button type="primary" class="large" size="mini" @click="timeLine('next')"
|
||||
:disabled="loading || disabledNextBtn">下一时段</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
formatDate
|
||||
} from '@/utils/filters'
|
||||
export default {
|
||||
computed: {
|
||||
disabledNextBtn() {
|
||||
return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dateRange: [],
|
||||
defaultDateRange: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(today = false) {
|
||||
const now = new Date(),
|
||||
formatNow = formatDate(now);
|
||||
const weekAgo = formatDate(today ? new Date(now.getTime()) : new Date(now.getTime() - 7 * 24 * 60 * 60 *
|
||||
1000))
|
||||
this.dateRange = [weekAgo, formatNow];
|
||||
this.defaultDateRange = [weekAgo, formatNow];
|
||||
console.log('初始化完成', this.defaultDateRange)
|
||||
this.$emit('updateDate', this.dateRange)
|
||||
},
|
||||
changeTime(val) {
|
||||
this.dateRange = val || []
|
||||
this.$emit('updateDate', this.dateRange)
|
||||
},
|
||||
showBtnLoading(status) {
|
||||
this.loading = status
|
||||
},
|
||||
resetDate() {
|
||||
this.dateRange = this.defaultDateRange
|
||||
},
|
||||
//重置 设置时间范围为初始化时间段
|
||||
reset() {
|
||||
this.resetDate()
|
||||
this.$emit('reset')
|
||||
this.$emit('updateDate', this.dateRange)
|
||||
},
|
||||
// 搜索
|
||||
search() {
|
||||
this.$emit('updateDate', this.dateRange)
|
||||
},
|
||||
timeLine(type) {
|
||||
if (!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
|
||||
const nowStartTimes = new Date(this.dateRange[0]).getTime(),
|
||||
nowEndTimes = new Date(this.dateRange[1]).getTime(),
|
||||
maxTime = new Date(this.defaultDateRange[1]).getTime()
|
||||
const nowDis = nowEndTimes - nowStartTimes //用户当前选择时间差 可能=0
|
||||
//baseTime,maxTime 毫秒数
|
||||
const baseDis = 24 * 60 * 60 * 1000
|
||||
const calcDis = nowDis === 0 ? baseDis : nowDis
|
||||
let start = type === 'before' ? nowStartTimes - calcDis : nowStartTimes + calcDis
|
||||
if (start > maxTime) start = maxTime
|
||||
let end = type === 'before' ? nowEndTimes - calcDis : nowEndTimes + calcDis
|
||||
if (end > maxTime) end = maxTime
|
||||
this.dateRange = [formatDate(start), formatDate(end)]
|
||||
this.$emit('updateDate', this.dateRange)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.time-range {
|
||||
padding: 10rpx 22rpx;
|
||||
|
||||
.btns-container {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
uni-button {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.large {
|
||||
width: 160rpx;
|
||||
background-color: #547ef4;
|
||||
|
||||
&[disabled][type=primary] {
|
||||
background-color: #89a8ffe6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,73 +1,62 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
|
||||
<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmsdcc'" :open="index===0"
|
||||
:title="`${index+1}#${item.deviceName}`" :class="item.workStatus === '0' ? 'running' :'danger'">
|
||||
<view>
|
||||
<uni-group mode="card" class="work-group">
|
||||
<uni-grid :column="3" :showBorder="false">
|
||||
<uni-grid-item>
|
||||
<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmscc'" :open="index===0"
|
||||
class="common-collapse-item" :class="handleCardClass(item)">
|
||||
|
||||
<template v-slot:title>
|
||||
<view class='title-wrapper'>
|
||||
<view class="top">
|
||||
<view class="status">{{CLUSTERWorkStatusOptions[item.workStatus] || '暂无数据'}}</view>
|
||||
<text
|
||||
class="name">{{`${item.parentDeviceName?`${item.parentDeviceName} -> ` : ''}${item.deviceName}`}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class='content'>
|
||||
<!-- 设备状态栏 -->
|
||||
<uni-group mode="card" class="status-card-group">
|
||||
<view class="flex-container">
|
||||
<view class="flex-lists">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">工作状态</view>
|
||||
<text class="text status">{{workStatusOptions[item.workStatus]}}</text>
|
||||
<text
|
||||
class="text work-status-color">{{CLUSTERWorkStatusOptions[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>
|
||||
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>
|
||||
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</uni-group>
|
||||
<uni-group mode="card">
|
||||
<uni-grid :column="3" :showBorder="false">
|
||||
<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData"
|
||||
:key="infoDataIndex+'infoData'">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">{{infoDataItem.label}}</view>
|
||||
<text class="text">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</text>
|
||||
<!-- 设备数据 -->
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
|
||||
class="data-row">
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{infoDataItem.label}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-group>
|
||||
<uni-group mode="card" style="margin-bottom: 25px;">
|
||||
<uni-table border stripe emptyText="暂无数据">
|
||||
<!-- 表头行 -->
|
||||
<uni-tr>
|
||||
<uni-th align="center">名称</uni-th>
|
||||
<uni-th align="center">单体平均值</uni-th>
|
||||
<uni-th align="center">单体最小值</uni-th>
|
||||
<uni-th align="center">单体最小值ID</uni-th>
|
||||
<uni-th align="center">单体最大值</uni-th>
|
||||
<uni-th align="center">单体最大值ID</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr v-for="(tableItem, tableIndex) in item.batteryDataList"
|
||||
:key="tableIndex+'batteryDataList'">
|
||||
<uni-td align="center"
|
||||
v-html="`${tableItem.dataName}(${unitObj[tableItem.dataName]})`"></uni-td>
|
||||
<uni-td align="center">{{tableItem.avgData}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.minData}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.minDataID}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxData}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxDataID}}</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
@ -75,164 +64,245 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBMSBatteryCluster
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getStackNameList,
|
||||
getClusterNameList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
workStatusOptions: (state) =>
|
||||
state.ems.workStatusOptions,
|
||||
CLUSTERWorkStatusOptions: (state) =>
|
||||
state.ems.CLUSTERWorkStatusOptions,
|
||||
communicationStatusOptions: (state) =>
|
||||
state.ems.communicationStatusOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
unitObj: {
|
||||
'电压': 'V',
|
||||
'温度': '℃',
|
||||
'SOC': '%'
|
||||
},
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
data() {
|
||||
return {
|
||||
displayData: [],
|
||||
clusterDeviceList: [],
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
label: '簇电压',
|
||||
attr: 'clusterVoltage',
|
||||
unit: 'V'
|
||||
unit: 'V',
|
||||
pointName: '簇电压'
|
||||
},
|
||||
{
|
||||
label: '可充电量',
|
||||
attr: 'chargeableCapacity',
|
||||
unit: 'kWh'
|
||||
unit: 'kWh',
|
||||
pointName: '可充电量'
|
||||
},
|
||||
{
|
||||
label: '累计充电量',
|
||||
attr: 'totalChargedCapacity',
|
||||
unit: 'kWh'
|
||||
unit: 'kWh',
|
||||
pointName: '累计充电量'
|
||||
},
|
||||
{
|
||||
label: '簇电流',
|
||||
attr: 'clusterCurrent',
|
||||
unit: 'A'
|
||||
unit: 'A',
|
||||
pointName: '簇电流'
|
||||
},
|
||||
{
|
||||
label: '可放电量',
|
||||
attr: 'dischargeableCapacity',
|
||||
unit: 'kWh'
|
||||
unit: 'kWh',
|
||||
pointName: '可放电量'
|
||||
},
|
||||
{
|
||||
label: '累计放电量',
|
||||
attr: 'totalDischargedCapacity',
|
||||
unit: 'kWh'
|
||||
unit: 'kWh',
|
||||
pointName: '累计放电量'
|
||||
},
|
||||
{
|
||||
label: 'SOH',
|
||||
attr: 'soh',
|
||||
unit: '%'
|
||||
unit: '%',
|
||||
pointName: 'SOH'
|
||||
},
|
||||
{
|
||||
label: '平均温度',
|
||||
attr: 'averageTemperature',
|
||||
unit: '℃'
|
||||
unit: '℃',
|
||||
pointName: '平均温度'
|
||||
},
|
||||
{
|
||||
label: '绝缘电阻',
|
||||
attr: 'insulationResistance',
|
||||
unit: 'Ω'
|
||||
unit: 'Ω',
|
||||
pointName: '绝缘电阻'
|
||||
},
|
||||
{
|
||||
label: '当前SOC',
|
||||
attr: 'currentSoc',
|
||||
unit: '%'
|
||||
unit: '%',
|
||||
pointName: '当前SOC'
|
||||
},
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.showLoading()
|
||||
this.siteId = this.$route.query.siteId || ''
|
||||
getBMSBatteryCluster({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.list = response?.data || []
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
// position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.uni-collapse-item__wrap {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.running {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.danger {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #FC6B69;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #FC6B69;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
methods: {
|
||||
handleCardClass(item) {
|
||||
const {
|
||||
workStatus = ''
|
||||
} = item
|
||||
return !(Object.keys(this.CLUSTERWorkStatusOptions).includes(item.workStatus)) ? "timing-collapse-item" :
|
||||
workStatus === '9' ? 'warning-collapse-item' : 'running-collapse-item'
|
||||
},
|
||||
getModuleRows(menuCode, sectionName) {
|
||||
return (this.displayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName)
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
const raw = String(fieldCode || '').trim()
|
||||
if (!raw) return ''
|
||||
const index = raw.lastIndexOf('__')
|
||||
return index >= 0 ? raw.slice(index + 2) : raw
|
||||
},
|
||||
getFieldRowMap(rows = [], deviceId = '') {
|
||||
const map = {}
|
||||
const targetDeviceId = String(deviceId || '')
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = String(item.deviceId || '')
|
||||
if (itemDeviceId !== targetDeviceId) return
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
map[fieldName] = item
|
||||
const displayName = String(item.fieldName || '').trim()
|
||||
if (displayName && !map[displayName]) {
|
||||
map[displayName] = item
|
||||
}
|
||||
})
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = String(item.deviceId || '')
|
||||
if (itemDeviceId !== '') return
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
if (map[fieldName] === undefined || map[fieldName] === null || map[fieldName] === '') {
|
||||
map[fieldName] = item
|
||||
}
|
||||
const displayName = String(item.fieldName || '').trim()
|
||||
if (displayName && !map[displayName]) {
|
||||
map[displayName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getFieldMap(rows = [], deviceId = '') {
|
||||
const rowMap = this.getFieldRowMap(rows, deviceId)
|
||||
return Object.keys(rowMap).reduce((acc, fieldName) => {
|
||||
const row = rowMap[fieldName]
|
||||
if (acc[fieldName] === undefined) {
|
||||
acc[fieldName] = row?.fieldValue
|
||||
}
|
||||
return acc
|
||||
}, {})
|
||||
},
|
||||
getLatestTime(menuCode) {
|
||||
const times = (this.displayData || [])
|
||||
.filter(item => item.menuCode === menuCode && item.valueTime)
|
||||
.map(item => new Date(item.valueTime).getTime())
|
||||
.filter(ts => !isNaN(ts))
|
||||
if (times.length === 0) {
|
||||
return '-'
|
||||
}
|
||||
const date = new Date(Math.max(...times))
|
||||
const p = (n) => String(n).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`
|
||||
},
|
||||
getClusterDeviceList() {
|
||||
return getStackNameList(this.siteId)
|
||||
.then(response => {
|
||||
const stackList = response?.data || []
|
||||
if (!stackList.length) {
|
||||
this.clusterDeviceList = []
|
||||
return
|
||||
}
|
||||
const requests = stackList.map(stack => {
|
||||
const stackDeviceId = stack.deviceId || stack.id || ''
|
||||
return getClusterNameList({
|
||||
stackDeviceId,
|
||||
siteId: this.siteId
|
||||
})
|
||||
.then(clusterResponse => {
|
||||
const clusterList = clusterResponse?.data || []
|
||||
return clusterList.map(cluster => ({
|
||||
...cluster,
|
||||
parentDeviceName: stack.deviceName || stack.name || stackDeviceId || '',
|
||||
}))
|
||||
})
|
||||
.catch(() => [])
|
||||
})
|
||||
return Promise.all(requests).then(results => {
|
||||
this.clusterDeviceList = results.flat()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.clusterDeviceList = []
|
||||
})
|
||||
},
|
||||
buildList() {
|
||||
const devices = (this.clusterDeviceList && this.clusterDeviceList.length > 0) ? this.clusterDeviceList : [{
|
||||
deviceId: this.siteId,
|
||||
deviceName: 'BMS电池簇',
|
||||
parentDeviceName: ''
|
||||
}]
|
||||
this.list = devices.map(device => {
|
||||
const deviceId = device.deviceId || device.id || this.siteId
|
||||
const infoMap = this.getFieldMap(this.getModuleRows('SBJK_BMSDCC', '簇信息'), deviceId)
|
||||
const statusMap = this.getFieldMap(this.getModuleRows('SBJK_BMSDCC', '状态'), deviceId)
|
||||
return {
|
||||
...infoMap,
|
||||
workStatus: statusMap.workStatus,
|
||||
pcsCommunicationStatus: statusMap.pcsCommunicationStatus,
|
||||
emsCommunicationStatus: statusMap.emsCommunicationStatus,
|
||||
currentSoc: infoMap.currentSoc,
|
||||
siteId: this.siteId,
|
||||
deviceId,
|
||||
parentDeviceName: device.parentDeviceName || '',
|
||||
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'BMS电池簇',
|
||||
dataUpdateTime: this.getLatestTime('SBJK_BMSDCC'),
|
||||
alarmNum: 0,
|
||||
}
|
||||
})
|
||||
},
|
||||
updateData() {
|
||||
return Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
this.getClusterDeviceList()
|
||||
]).then(([displayResponse]) => {
|
||||
this.displayData = displayResponse?.data || []
|
||||
this.buildList()
|
||||
}).catch(() => {
|
||||
this.displayData = []
|
||||
this.list = []
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
this.updateData().finally(() => {
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,75 +2,60 @@
|
||||
<view class="page-container">
|
||||
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
|
||||
<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmszl'" :open="index===0"
|
||||
:title="`${index+1}#${item.deviceName}`" :class="item.workStatus === '0' ? 'running' :'danger'">
|
||||
<view>
|
||||
<uni-group mode="card" class="work-group">
|
||||
<uni-grid :column="3" :showBorder="false">
|
||||
<uni-grid-item>
|
||||
class="common-collapse-item" :class="handleCardClass(item,index)">
|
||||
|
||||
<template v-slot:title>
|
||||
<view class='title-wrapper'>
|
||||
<view class="top">
|
||||
<view class="status">{{STACKWorkStatusOptions[item.workStatus] || '暂无数据'}}</view>
|
||||
<text class="name">{{item.deviceName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class='content'>
|
||||
<!-- 设备状态栏 -->
|
||||
<uni-group mode="card" class="status-card-group">
|
||||
<view class="flex-container">
|
||||
<view class="flex-lists">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">工作状态</view>
|
||||
<text class="text status">{{workStatusOptions[item.workStatus]}}</text>
|
||||
<text
|
||||
class="text work-status-color">{{STACKWorkStatusOptions[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>
|
||||
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>
|
||||
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</uni-group>
|
||||
<uni-group mode="card">
|
||||
<uni-grid :column="3" :showBorder="false">
|
||||
<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData"
|
||||
:key="infoDataIndex+'infoData'">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">{{infoDataItem.label}}</view>
|
||||
<text class="text">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</text>
|
||||
<!-- 设备数据 -->
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
|
||||
class="data-row">
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{infoDataItem.label}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
<uni-group mode="card" style="margin-bottom: 25px;">
|
||||
<uni-table border stripe emptyText="暂无数据">
|
||||
<!-- 表头行 -->
|
||||
<uni-tr>
|
||||
<uni-th align="center">簇号</uni-th>
|
||||
<uni-th align="center">簇电压</uni-th>
|
||||
<uni-th align="center">簇电流</uni-th>
|
||||
<uni-th align="center">簇SOC</uni-th>
|
||||
<uni-th align="center">单体最高电压</uni-th>
|
||||
<uni-th align="center">单体最低电压</uni-th>
|
||||
<uni-th align="center">单体最高温度</uni-th>
|
||||
<uni-th align="center">单体最低温度</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr v-for="(tableItem, tableIndex) in item.batteryDataList"
|
||||
:key="tableIndex+'batteryDataList'">
|
||||
<uni-td align="center">{{tableItem.clusterId}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.clusterVoltage}}V</uni-td>
|
||||
<uni-td align="center">{{tableItem.clusterCurrent}}A</uni-td>
|
||||
<uni-td align="center">{{tableItem.currentSoc}}%</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxCellVoltage}}V</uni-td>
|
||||
<uni-td align="center">{{tableItem.minCellVoltage}}V</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxCellTemp}}℃</uni-td>
|
||||
<uni-td align="center">{{tableItem.minCellTemp}}℃</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
@ -78,157 +63,196 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBMSOverView
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getStackNameList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
workStatusOptions: (state) =>
|
||||
state.ems.workStatusOptions,
|
||||
STACKWorkStatusOptions: (state) =>
|
||||
state.ems.STACKWorkStatusOptions,
|
||||
communicationStatusOptions: (state) =>
|
||||
state.ems.communicationStatusOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
data() {
|
||||
return {
|
||||
displayData: [],
|
||||
stackDeviceList: [],
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
label: '电池堆总电压',
|
||||
attr: 'stackVoltage',
|
||||
unit: 'V'
|
||||
unit: 'V',
|
||||
pointName: '电池堆电压'
|
||||
},
|
||||
{
|
||||
label: '可充电量',
|
||||
attr: 'availableChargeCapacity',
|
||||
unit: 'kWh'
|
||||
unit: 'kWh',
|
||||
pointName: '可充电量'
|
||||
},
|
||||
{
|
||||
label: '累计充电量',
|
||||
attr: 'totalChargeCapacity',
|
||||
unit: 'kWh'
|
||||
unit: 'kWh',
|
||||
pointName: '累计充电量'
|
||||
},
|
||||
{
|
||||
label: '电池堆总电流',
|
||||
attr: 'stackCurrent',
|
||||
unit: 'A'
|
||||
unit: 'A',
|
||||
pointName: '电池堆总电流'
|
||||
},
|
||||
{
|
||||
label: '可放电量',
|
||||
attr: 'availableDischargeCapacity',
|
||||
unit: 'kWh'
|
||||
unit: 'kWh',
|
||||
pointName: '可放电量'
|
||||
},
|
||||
{
|
||||
label: '累计放电量',
|
||||
attr: 'totalDischargeCapacity',
|
||||
unit: 'kWh'
|
||||
unit: 'kWh',
|
||||
pointName: '累计放电量'
|
||||
},
|
||||
{
|
||||
label: 'SOH',
|
||||
attr: 'stackSoh',
|
||||
unit: '%'
|
||||
unit: '%',
|
||||
pointName: 'SOH'
|
||||
},
|
||||
{
|
||||
label: '平均温度',
|
||||
attr: 'operatingTemp',
|
||||
unit: '℃'
|
||||
unit: '℃',
|
||||
pointName: '平均温度'
|
||||
},
|
||||
{
|
||||
label: '绝缘电阻',
|
||||
attr: 'stackInsulationResistance',
|
||||
unit: 'Ω'
|
||||
unit: 'Ω',
|
||||
pointName: '绝缘电阻'
|
||||
},
|
||||
{
|
||||
label: '当前SOC',
|
||||
attr: 'stackSoc',
|
||||
unit: '%'
|
||||
unit: '%',
|
||||
pointName: '当前SOC'
|
||||
},
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.showLoading()
|
||||
this.siteId = this.$route.query.siteId || ''
|
||||
getBMSOverView({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.list = response?.data || []
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
// position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.uni-collapse-item__wrap {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.running {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.danger {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #FC6B69;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #FC6B69;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
},
|
||||
methods: {
|
||||
getModuleRows(menuCode, sectionName) {
|
||||
return (this.displayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName)
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
const raw = String(fieldCode || '').trim()
|
||||
if (!raw) return ''
|
||||
const index = raw.lastIndexOf('__')
|
||||
return index >= 0 ? raw.slice(index + 2) : raw
|
||||
},
|
||||
isEmptyValue(value) {
|
||||
return value === undefined || value === null || value === ''
|
||||
},
|
||||
getFieldRowMap(rows = [], deviceId = '') {
|
||||
const map = {}
|
||||
const targetDeviceId = String(deviceId || '')
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = String(item.deviceId || '')
|
||||
if (itemDeviceId !== targetDeviceId) return
|
||||
map[this.getFieldName(item.fieldCode)] = item
|
||||
})
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = String(item.deviceId || '')
|
||||
if (itemDeviceId !== '') return
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
const existRow = map[fieldName]
|
||||
if (!existRow || this.isEmptyValue(existRow.fieldValue)) {
|
||||
map[fieldName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getFieldMap(rowMap = {}) {
|
||||
const map = {}
|
||||
Object.keys(rowMap || {}).forEach((fieldName) => {
|
||||
map[fieldName] = rowMap[fieldName]?.fieldValue
|
||||
})
|
||||
return map
|
||||
},
|
||||
buildBaseInfoList() {
|
||||
const devices = (this.stackDeviceList && this.stackDeviceList.length > 0) ? this.stackDeviceList : [{
|
||||
deviceId: this.siteId,
|
||||
deviceName: 'BMS总览'
|
||||
}]
|
||||
this.list = devices.map(device => {
|
||||
const id = device.deviceId || device.id || this.siteId
|
||||
const infoRowMap = this.getFieldRowMap(this.getModuleRows('SBJK_BMSZL', '堆信息'), id)
|
||||
const statusRowMap = this.getFieldRowMap(this.getModuleRows('SBJK_BMSZL', '状态'), id)
|
||||
const infoMap = this.getFieldMap(infoRowMap)
|
||||
const statusMap = this.getFieldMap(statusRowMap)
|
||||
return {
|
||||
...infoMap,
|
||||
workStatus: statusMap.workStatus,
|
||||
pcsCommunicationStatus: statusMap.pcsCommunicationStatus,
|
||||
emsCommunicationStatus: statusMap.emsCommunicationStatus,
|
||||
siteId: this.siteId,
|
||||
deviceId: id,
|
||||
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'BMS总览',
|
||||
batteryDataList: []
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCardClass(item) {
|
||||
const {
|
||||
workStatus = ''
|
||||
} = item
|
||||
return !Object.keys(this.STACKWorkStatusOptions).find(i => i === workStatus) ? "timing-collapse-item" :
|
||||
workStatus === '9' ? 'warning-collapse-item' : 'running-collapse-item'
|
||||
},
|
||||
updateData() {
|
||||
return Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
getStackNameList(this.siteId)
|
||||
]).then(([displayResponse, stackResponse]) => {
|
||||
this.displayData = displayResponse?.data || []
|
||||
this.stackDeviceList = stackResponse?.data || []
|
||||
this.buildBaseInfoList()
|
||||
}).catch(() => {
|
||||
this.displayData = []
|
||||
this.stackDeviceList = []
|
||||
this.list = []
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
this.updateData().then(() => {
|
||||
if (this.list.length === 0) {
|
||||
uni.hideLoading()
|
||||
return
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse && this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,219 +1,231 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<uni-collapse ref="collapse">
|
||||
<!-- 总表 -->
|
||||
<uni-collapse-item open :class="zbInfo.emsCommunicationStatus !== '0' ? 'danger' :'running'">
|
||||
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
|
||||
<uni-collapse-item v-for="(item,index) in list" :key="index+'dbList'" :open="index===0"
|
||||
class="common-collapse-item" :class="{
|
||||
'timing-collapse-item':!['0','2'].includes(item.emsCommunicationStatus),
|
||||
'warning-collapse-item':item.emsCommunicationStatus === '2',
|
||||
'running-collapse-item':item.emsCommunicationStatus === '0'
|
||||
}">
|
||||
<template v-slot:title>
|
||||
<view class="title-row">
|
||||
<view class="title">{{`1#${zbInfo.deviceName || ''}`}}</view>
|
||||
<view class="msg">
|
||||
<view>{{communicationStatusOptions[zbInfo.emsCommunicationStatus] || ''}}</view>
|
||||
<view>数据更新时间:{{zbInfo.dataUpdateTime || ''}}</view>
|
||||
<view class='title-wrapper'>
|
||||
<view class="top">
|
||||
<view class="status">{{communicationStatusOptions[item.emsCommunicationStatus] || '暂无数据'}}
|
||||
</view>
|
||||
<text class="name">{{item.deviceName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<uni-group :title=" item.category" mode="card" v-for="(item,index) in zbInfo.loadDataDetailInfo"
|
||||
:key="index+'zbInfo'">
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>总/kWh</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view>{{item.totalKwh}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>尖/kWh</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view>{{item.peakKwh}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>峰/kWh</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view>{{item.highKwh}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>平/kWh</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view>{{item.flatKwh}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>谷/kWh</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view>{{item.valleyKwh}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
</uni-collapse-item>
|
||||
<!-- 储能表 -->
|
||||
<uni-collapse-item open :class="cnbInfo.emsCommunicationStatus !== '0' ? 'danger' :'running'">
|
||||
<template v-slot:title>
|
||||
<view class="title-row">
|
||||
<view class="title">{{`2#${cnbInfo.deviceName || ''}`}}</view>
|
||||
<view class="msg">
|
||||
<view>{{communicationStatusOptions[cnbInfo.emsCommunicationStatus] || ''}}</view>
|
||||
<view>数据更新时间:{{cnbInfo.dataUpdateTime || ''}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<uni-group :title="item.category" mode="card" v-for="(item,index) in cnbInfo.meteDataDetailInfo"
|
||||
:key="index+'cnbInfo'">
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>有功功率</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view>{{item.activePower}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>无功功率</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view>{{item.reactivePower}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
<view class='content'>
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row v-for="(tempDataItem,tempDataIndex) in
|
||||
(item.fieldConfigs || otherTypeMsg)" :key="tempDataIndex+'dbTempData'" class="data-row">
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{tempDataItem.name}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">{{item[tempDataItem.attr] | formatNumber}}
|
||||
<text v-if="tempDataItem.unit" v-html="tempDataItem.unit"></text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAmmeterDataList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getDeviceList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
communicationStatusOptions: (state) =>
|
||||
state.ems.communicationStatusOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
siteId: '',
|
||||
zbInfo: {},
|
||||
cnbInfo: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.showLoading()
|
||||
this.siteId = this.$route.query.siteId || ''
|
||||
getAmmeterDataList({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.zbInfo = JSON.parse(JSON.stringify(response?.data?.ammeterLoadData || {}));
|
||||
this.cnbInfo = JSON.parse(JSON.stringify(response?.data?.ammeterMeteData || {}));
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
data() {
|
||||
return {
|
||||
siteId: '',
|
||||
displayData: [],
|
||||
ammeterDeviceList: [],
|
||||
list: [],
|
||||
otherTypeMsg: [{
|
||||
name: '正向有功电能',
|
||||
attr: 'forwardActive',
|
||||
pointName: '正向有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '反向有功电能',
|
||||
attr: 'reverseActive',
|
||||
pointName: '反向有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '正向无功电能',
|
||||
attr: 'forwardReactive',
|
||||
pointName: '正向无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '反向无功电能',
|
||||
attr: 'reverseReactive',
|
||||
pointName: '反向无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率',
|
||||
unit: 'kW'
|
||||
},
|
||||
{
|
||||
name: '无功功率',
|
||||
attr: 'reactivePower',
|
||||
pointName: '总无功功率',
|
||||
unit: 'kvar'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getModuleRows(menuCode) {
|
||||
return (this.displayData || []).filter(item => item.menuCode === menuCode)
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
const raw = String(fieldCode || '').trim()
|
||||
if (!raw) return ''
|
||||
const index = raw.lastIndexOf('__')
|
||||
return index >= 0 ? raw.slice(index + 2) : raw
|
||||
},
|
||||
isEmptyValue(value) {
|
||||
return value === undefined || value === null || value === ''
|
||||
},
|
||||
getFieldRowMap(rows = [], deviceId = '') {
|
||||
const map = {}
|
||||
const targetDeviceId = String(deviceId || '')
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = String(item.deviceId || '')
|
||||
if (itemDeviceId !== targetDeviceId) return
|
||||
map[this.getFieldName(item.fieldCode)] = item
|
||||
})
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = String(item.deviceId || '')
|
||||
if (itemDeviceId !== '') return
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
const existRow = map[fieldName]
|
||||
if (!existRow || this.isEmptyValue(existRow.fieldValue)) {
|
||||
map[fieldName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getFieldConfigs(rows = []) {
|
||||
const result = []
|
||||
const seen = {}
|
||||
(rows || []).forEach(item => {
|
||||
const attr = this.getFieldName(item?.fieldCode)
|
||||
const name = String(item?.fieldName || '').trim()
|
||||
if (!attr || !name || seen[name]) return
|
||||
const base = this.otherTypeMsg.find(i => i.attr === attr) || {}
|
||||
result.push({
|
||||
name,
|
||||
attr,
|
||||
pointName: base.pointName || name,
|
||||
unit: base.unit || ''
|
||||
})
|
||||
seen[name] = true
|
||||
})
|
||||
return result.length > 0 ? result : this.otherTypeMsg
|
||||
},
|
||||
buildList() {
|
||||
const rows = this.getModuleRows('SBJK_DB')
|
||||
const fieldConfigs = this.getFieldConfigs(rows)
|
||||
let devices = (this.ammeterDeviceList || []).filter(item => item.deviceCategory === 'AMMETER')
|
||||
if (devices.length === 0) {
|
||||
const grouped = {}
|
||||
rows.forEach(item => {
|
||||
const id = String(item?.deviceId || '').trim()
|
||||
if (!id || grouped[id]) return
|
||||
grouped[id] = {
|
||||
deviceId: id,
|
||||
deviceName: id
|
||||
}
|
||||
})
|
||||
devices = Object.values(grouped)
|
||||
}
|
||||
if (devices.length === 0) {
|
||||
devices = [{
|
||||
deviceId: '',
|
||||
deviceName: '电表'
|
||||
}]
|
||||
}
|
||||
this.list = devices.map(device => {
|
||||
const id = String(device.deviceId || device.id || '').trim()
|
||||
const fieldRowMap = this.getFieldRowMap(rows, id)
|
||||
const statusValue = fieldRowMap.communicationStatus?.fieldValue || fieldRowMap.emsCommunicationStatus?.fieldValue || ''
|
||||
const values = {}
|
||||
fieldConfigs.forEach(cfg => {
|
||||
values[cfg.attr] = fieldRowMap[cfg.attr]?.fieldValue
|
||||
})
|
||||
return {
|
||||
...values,
|
||||
deviceId: id,
|
||||
deviceName: device.deviceName || device.name || id || '电表',
|
||||
emsCommunicationStatus: String(statusValue || ''),
|
||||
fieldConfigs
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
getDeviceList(this.siteId)
|
||||
]).then(([displayResponse, deviceResponse]) => {
|
||||
this.displayData = displayResponse?.data || []
|
||||
this.ammeterDeviceList = deviceResponse?.data || []
|
||||
this.buildList()
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-row {
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.msg {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: right;
|
||||
}
|
||||
.unknow-bd-device {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.uni-group__title {
|
||||
background-color: #959595;
|
||||
|
||||
.uni-group__title-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-collapse-item__wrap-content {
|
||||
.uni-group--card:last-child {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
// row-行样式
|
||||
.uni-group__content {
|
||||
padding: 10px 15px;
|
||||
|
||||
.uni-row {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 折叠面板内容区域背景颜色
|
||||
.uni-collapse-item__wrap {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
// 运行状态颜色区分
|
||||
.running {
|
||||
.uni-group__title {
|
||||
background-color: #05AEA3;
|
||||
}
|
||||
|
||||
.uni-collapse-item__title-text {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.danger {
|
||||
.uni-group__title {
|
||||
background-color: #FC6B69;
|
||||
}
|
||||
|
||||
.uni-collapse-item__title-text {
|
||||
color: #FC6B69;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
color: #FC6B69;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<uni-popup ref="popup" type="center" @maskClick="show = false">
|
||||
<view class="chart-popup">
|
||||
<uni-datetime-picker v-model="range" type="daterange" start="2000-01-01" :end="end" rangeSeparator="至"
|
||||
@change="changeTime" />
|
||||
<view class="button-group" style="text-align: center;margin-top:20px;">
|
||||
<button type="default" size="mini" @click="onReset">重置</button>
|
||||
<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
|
||||
</view>
|
||||
<view class="chart-container">
|
||||
<qiun-data-charts type="line" :reload="show" :chartData="chartsData" :canvas2d="true"
|
||||
canvasId="scrollcolumnid" :optsWatch='false' :inScrollView="true" :pageScrollTop="pageScrollTop"
|
||||
:opts="options" :ontouch="true" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getSingleBatteryData
|
||||
} from '@/api/ems/site.js'
|
||||
export default {
|
||||
props: {
|
||||
pageScrollTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
scrollShow: true,
|
||||
itemCount: 3,
|
||||
disableGrid: true
|
||||
},
|
||||
update: true,
|
||||
duration: 0,
|
||||
animation: false,
|
||||
// enableScroll: true,
|
||||
// padding: [10, 15, 10, 15]
|
||||
},
|
||||
show: false,
|
||||
range: [],
|
||||
end: "",
|
||||
siteId: '',
|
||||
deviceId: '',
|
||||
clusterDeviceId: '',
|
||||
dataType: '', //展示的数据类型 空值展示所有数据
|
||||
loading: false,
|
||||
chartsData: {},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open({
|
||||
siteId,
|
||||
clusterDeviceId,
|
||||
deviceId
|
||||
}, dataType) {
|
||||
this.$refs.popup.open()
|
||||
this.loading = false
|
||||
this.siteId = siteId
|
||||
this.clusterDeviceId = clusterDeviceId
|
||||
this.deviceId = deviceId
|
||||
this.dataType = dataType
|
||||
this.range = []
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
this.getData()
|
||||
}, 300)
|
||||
},
|
||||
changeTime(val) {
|
||||
this.range = val || []
|
||||
},
|
||||
onReset() {
|
||||
this.range = []
|
||||
this.getData()
|
||||
},
|
||||
onSearch() {
|
||||
this.getData()
|
||||
},
|
||||
getData() {
|
||||
if (this.loading) return
|
||||
this.loading = true;
|
||||
const {
|
||||
siteId,
|
||||
deviceId,
|
||||
clusterDeviceId,
|
||||
range: [startDate = '', endDate = '']
|
||||
} = this;
|
||||
this.chartsData?.series && (this.chartsData.series = [])
|
||||
return getSingleBatteryData({
|
||||
siteId,
|
||||
deviceId,
|
||||
clusterDeviceId,
|
||||
startDate,
|
||||
endDate
|
||||
}).then(response => {
|
||||
console.log('单体电池图表返回数据', response.data)
|
||||
this.handledata(response?.data || [])
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
handledata(data) {
|
||||
let obj = {
|
||||
voltage: '电压',
|
||||
temperature: '温度',
|
||||
soc: 'SOC',
|
||||
soh: 'SOH',
|
||||
},
|
||||
categories = [],
|
||||
dataTypeList = []
|
||||
if (this.dataType) {
|
||||
dataTypeList = [{
|
||||
attr: this.dataType,
|
||||
title: obj[this.dataType],
|
||||
data: []
|
||||
}]
|
||||
} else {
|
||||
dataTypeList = Object.entries(obj).map(([key, value]) => {
|
||||
return {
|
||||
attr: key,
|
||||
title: value,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
data.forEach(item => {
|
||||
categories.push(item.dataTimestamp)
|
||||
dataTypeList.forEach(i => {
|
||||
i.data.push(item[i.attr] || undefined)
|
||||
})
|
||||
})
|
||||
const series = dataTypeList.map(item => {
|
||||
return {
|
||||
"name": item.title,
|
||||
"data": item.data
|
||||
}
|
||||
})
|
||||
this.chartsData = JSON.parse(JSON.stringify({
|
||||
categories,
|
||||
series
|
||||
}))
|
||||
console.log('this.chartsData', this.chartsData)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const now = new Date(),
|
||||
year = now.getFullYear(),
|
||||
month = now.getMonth() + 1,
|
||||
day = now.getDate()
|
||||
this.end = year + '-' + month + '-' + day
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-popup {
|
||||
width: 360px;
|
||||
background-color: #fff;
|
||||
padding: 10px 15px;
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
uni-canvas {
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-icon" @click="openSearch">
|
||||
<uni-icons type="search" size="40" color="#fff"></uni-icons>
|
||||
<uni-icons type="search" size="25" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="list-container">
|
||||
<view class="no-data" v-if="list.length === 0">暂无数据</view>
|
||||
@ -10,7 +10,7 @@
|
||||
<template v-slot:header>
|
||||
<view class="list-header">
|
||||
单体编号:{{item.deviceId}}
|
||||
<button type="primary" size="mini" class="charts" @click="toDetail(item)">图表</button>
|
||||
<button type="primary" size="mini" class="charts-btn" @click="toDetail(item)">图表</button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
@ -19,16 +19,17 @@
|
||||
<uni-col :span="8">
|
||||
<view>簇号</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right">{{item.clusterDeviceId}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right">{{item.clusterDeviceId || '-'}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>电压(V)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'voltage')">{{item.voltage}}
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'voltage')">{{item.voltage | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
@ -36,9 +37,10 @@
|
||||
<uni-col :span="8">
|
||||
<view>温度(℃)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'temperature')">
|
||||
{{item.temperature}}
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text
|
||||
@click="toDetail(item,'temperature')">{{item.temperature | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
@ -46,16 +48,20 @@
|
||||
<uni-col :span="8">
|
||||
<view>SOC(%)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'soc')">{{item.soc}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'soc')">{{item.soc | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>SOH(%)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'soh')">{{item.soh}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'soh')">{{item.soh | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
@ -63,7 +69,17 @@
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
<chart ref="chart" :pageScrollTop="pageScrollTop" />
|
||||
<uni-popup ref="popup" type="center" :animation="false" :mask-click="false" :is-mask-click="false"
|
||||
@maskClick="maskClick">
|
||||
<view class="chart-popup" v-if="showChart">
|
||||
<date-range-select ref="chartDateRangeSelect" @updateDate="updateChartDate"
|
||||
style="margin-bottom: 10px;" />
|
||||
<view class="chart-container">
|
||||
<qiun-data-charts type="area" :reload="showChart" :optsWatch='false' :opts="options"
|
||||
:chartData="chartsData" :ontouch="true" :inScrollView="true" :pageScrollTop="pageScrollTop" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="searchPopup" type="center">
|
||||
<view class="uni-pa-5 search-container">
|
||||
<uni-forms ref="form">
|
||||
@ -75,6 +91,9 @@
|
||||
<uni-data-select :clear="false" v-model="search.clusterId"
|
||||
:localdata="clusterOptions"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="编号">
|
||||
<uni-easyinput type="text" v-model="search.batteryId" placeholder="请输入编号" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="button-group" style="text-align: center;">
|
||||
<button type="default" size="mini" @click="onReset">重置</button>
|
||||
@ -86,26 +105,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './Chart.vue'
|
||||
import DateRangeSelect from './../DateRangeSelect.vue'
|
||||
import {
|
||||
getStackNameList,
|
||||
getClusterNameList,
|
||||
getClusterDataInfoList,
|
||||
getSingleBatteryData
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
Chart
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
workStatusOptions: (state) =>
|
||||
state.ems.workStatusOptions,
|
||||
communicationStatusOptions: (state) =>
|
||||
state.ems.communicationStatusOptions,
|
||||
})
|
||||
DateRangeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -116,18 +128,51 @@
|
||||
clusterOptions: [],
|
||||
search: {
|
||||
stackId: '',
|
||||
clusterId: ''
|
||||
clusterId: '',
|
||||
batteryId: ''
|
||||
},
|
||||
list: [],
|
||||
siteId: '',
|
||||
pageScrollTop: 0,
|
||||
// ucharts数据
|
||||
showChart: false,
|
||||
chartSearchData: {
|
||||
|
||||
},
|
||||
options: {
|
||||
padding: [10, 5, 0, 10],
|
||||
duration: 0,
|
||||
animation: false,
|
||||
dataLabel: false,
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
scrollShow: true,
|
||||
itemCount: 3,
|
||||
disableGrid: true
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
},
|
||||
range: [],
|
||||
end: Date.now(),
|
||||
loading: false,
|
||||
chartsData: {},
|
||||
// ucharts数据结束
|
||||
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.pageScrollTop = e.scrollTop
|
||||
},
|
||||
onReachBottom() {
|
||||
console.log('触底了')
|
||||
if (this.list.length >= this.total) {
|
||||
return console.log('数据已经加载完成')
|
||||
}
|
||||
@ -135,6 +180,108 @@
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
//ucharts方法
|
||||
maskClick() {
|
||||
this.showChart = false
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
chartOpen({
|
||||
siteId,
|
||||
clusterDeviceId,
|
||||
deviceId
|
||||
}, dataType) {
|
||||
this.loading = false
|
||||
this.chartSearchData = {
|
||||
clusterDeviceId,
|
||||
deviceId,
|
||||
dataType
|
||||
}
|
||||
this.$refs.popup.open()
|
||||
setTimeout(() => {
|
||||
this.showChart = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartDateRangeSelect.init()
|
||||
})
|
||||
}, 500)
|
||||
},
|
||||
updateChartDate(data) {
|
||||
this.range = data || []
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData() {
|
||||
if (this.loading) return
|
||||
this.loading = true;
|
||||
const {
|
||||
siteId,
|
||||
chartSearchData: {
|
||||
deviceId,
|
||||
clusterDeviceId
|
||||
},
|
||||
range: [startDate = '', endDate = '']
|
||||
} = this;
|
||||
this.chartsData = {}
|
||||
return getSingleBatteryData({
|
||||
siteId,
|
||||
deviceId,
|
||||
clusterDeviceId,
|
||||
startDate,
|
||||
endDate
|
||||
}).then(response => {
|
||||
this.handledata(response?.data || [])
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
handledata(data) {
|
||||
let obj = {
|
||||
voltage: '电压',
|
||||
temperature: '温度',
|
||||
soc: 'SOC',
|
||||
soh: 'SOH',
|
||||
},
|
||||
categories = [],
|
||||
dataTypeList = [],
|
||||
{
|
||||
dataType
|
||||
} = this.chartSearchData
|
||||
if (dataType) {
|
||||
dataTypeList = [{
|
||||
attr: dataType,
|
||||
title: obj[dataType],
|
||||
data: []
|
||||
}]
|
||||
} else {
|
||||
dataTypeList = Object.entries(obj).map(([key, value]) => {
|
||||
return {
|
||||
attr: key,
|
||||
title: value,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
data.forEach(item => {
|
||||
categories.push(item.dataTimestamp)
|
||||
dataTypeList.forEach(i => {
|
||||
i.data.push(item[i.attr] || undefined)
|
||||
})
|
||||
})
|
||||
const series = dataTypeList.map(item => {
|
||||
return {
|
||||
"name": item.title,
|
||||
"data": item.data
|
||||
}
|
||||
})
|
||||
this.chartsData = JSON.parse(JSON.stringify({
|
||||
categories,
|
||||
series
|
||||
}))
|
||||
console.log('this.chartsData', this.chartsData)
|
||||
},
|
||||
//ucharts方法结束
|
||||
|
||||
|
||||
|
||||
openSearch() {
|
||||
this.$refs.searchPopup.open()
|
||||
},
|
||||
@ -148,7 +295,8 @@
|
||||
} = item, {
|
||||
siteId
|
||||
} = this
|
||||
this.$refs.chart.open({
|
||||
// this.$refs.chart.open({
|
||||
this.chartOpen({
|
||||
siteId,
|
||||
clusterDeviceId,
|
||||
deviceId
|
||||
@ -166,7 +314,8 @@
|
||||
onReset() {
|
||||
this.search = {
|
||||
stackId: '',
|
||||
clusterId: ''
|
||||
clusterId: '',
|
||||
batteryId: ''
|
||||
}
|
||||
this.clusterOptions = []
|
||||
this.pageNum = 1
|
||||
@ -180,14 +329,12 @@
|
||||
this.getClusterList()
|
||||
}
|
||||
},
|
||||
getStackList() {
|
||||
getStackNameList({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.stackOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
|
||||
return {
|
||||
text: item.deviceName,
|
||||
value: item.id
|
||||
getStackList() {
|
||||
getStackNameList(this.siteId).then(response => {
|
||||
this.stackOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
|
||||
return {
|
||||
text: item.deviceName,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -215,7 +362,8 @@
|
||||
}
|
||||
const {
|
||||
stackId: stackDeviceId,
|
||||
clusterId: clusterDeviceId
|
||||
clusterId: clusterDeviceId,
|
||||
batteryId
|
||||
} = this.search
|
||||
const {
|
||||
siteId,
|
||||
@ -225,20 +373,21 @@
|
||||
getClusterDataInfoList({
|
||||
stackDeviceId,
|
||||
clusterDeviceId,
|
||||
batteryId,
|
||||
siteId,
|
||||
pageNum,
|
||||
pageSize
|
||||
}).then(response => {
|
||||
this.list = this.list.concat(response?.rows || []);
|
||||
this.list = this.list.concat(response?.rows?.[0]?.batteryList || []);
|
||||
this.total = response?.total || 0
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
onLoad(options) {
|
||||
// uni.showLoading()
|
||||
this.siteId = this.$route.query.siteId || ''
|
||||
this.siteId = options.siteId || ''
|
||||
this.getStackList()
|
||||
this.getTableData(true)
|
||||
}
|
||||
@ -248,21 +397,18 @@
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// overflow-y: auto;
|
||||
.search-icon {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
bottom: 40rpx;
|
||||
right: 40rpx;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 60rpx;
|
||||
width: 60rpx;
|
||||
background-color: #007aff;
|
||||
border-radius: 100%;
|
||||
line-height: 50px;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -273,20 +419,26 @@
|
||||
}
|
||||
|
||||
.list-container {
|
||||
// z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 50px;
|
||||
background: #ffffff;
|
||||
padding-top: 40rpx;
|
||||
padding-bottom: 100rpx;
|
||||
background: transparent;
|
||||
|
||||
::v-deep {
|
||||
.uni-list {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.uni-list-item {
|
||||
padding: 12px 15px;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.uni-list-item__container {
|
||||
background-color: #ffffff;
|
||||
padding: 0;
|
||||
display: block;
|
||||
box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 1px 16rpx 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
}
|
||||
|
||||
.uni-list--border-top,
|
||||
@ -297,45 +449,69 @@
|
||||
}
|
||||
|
||||
.list-header {
|
||||
background-color: #05AEA3;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
color: #333;
|
||||
|
||||
.charts {
|
||||
.charts-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
transform: translateY(-50%);
|
||||
// background-color: #ff7300;
|
||||
background-color: #4c7af3;
|
||||
}
|
||||
}
|
||||
|
||||
.list-body {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.right {
|
||||
>.uni-row {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #000;
|
||||
}
|
||||
padding: 12rpx 30rpx;
|
||||
|
||||
.color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.left {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
|
||||
&.color {
|
||||
color: #4c7af3;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.chart-popup {
|
||||
width: 720rpx;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
uni-canvas {
|
||||
height: 500rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,90 +1,477 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 站点选择列表 -->
|
||||
<uni-section title="站点选择" type="line" titleFontSize='16px' class="uni-pa-5">
|
||||
<uni-data-select :clear="false" v-model="siteId" :localdata="siteList"
|
||||
@change="selectedSite"></uni-data-select>
|
||||
</uni-section>
|
||||
<!-- 菜单 -->
|
||||
<!-- <uni-section title="工作台" type="line" titleFontSize='16px'></uni-section> -->
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="toDetail">
|
||||
<uni-grid-item v-for="(item,index) in gridList" :index="index" :key="index+'work'">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{item.text}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
|
||||
</uni-grid>
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<site-switch-header :site-id="siteId" :site-type-options="siteTypeOptions" :site-address="baseInfo.siteAddress"
|
||||
:running-time="baseInfo.runningTime" @change="selectedSite" />
|
||||
<!-- 静态信息 -->
|
||||
<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="title">装机功率(MWh)</view>
|
||||
<view class="text">{{baseInfo.installPower | formatNumber}}</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<view class="title">装机容量(MWh)</view>
|
||||
<view class="text">{{baseInfo.installCapacity | formatNumber}}</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAllSites
|
||||
} from '@/api/ems/site.js'
|
||||
export default {
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
import DateRangeSelect from './DateRangeSelect.vue'
|
||||
import SiteSwitchHeader from '@/components/SiteSwitchHeader/index.vue'
|
||||
import {
|
||||
getAllSites,
|
||||
getSingleSiteBaseInfo,
|
||||
getProjectDisplayData,
|
||||
getPointConfigCurve,
|
||||
getSiteAllDeviceCategory
|
||||
} from '@/api/ems/site.js'
|
||||
const createSiteTypeOptions = () => ([{
|
||||
text: '储能',
|
||||
value: 'cn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '光能',
|
||||
value: 'gn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '岸电',
|
||||
value: 'ad',
|
||||
children: []
|
||||
}
|
||||
])
|
||||
export default {
|
||||
components: {
|
||||
DateRangeSelect,
|
||||
SiteSwitchHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
siteList: [],
|
||||
// 图表数据
|
||||
weekChartTimeRange: [],
|
||||
activeChartTimeRange: [],
|
||||
weekChartData: {},
|
||||
activeChartData: {},
|
||||
curveDisplayData: [],
|
||||
curveDisplayLoadingPromise: null,
|
||||
pageScrollTop: 0,
|
||||
glqxOptions: {
|
||||
padding: [10, 5, 0, 10],
|
||||
dataLabel: false,
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
scrollShow: true,
|
||||
itemCount: 3,
|
||||
disableGrid: true
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
// update: true,
|
||||
// duration: 2,
|
||||
// animation: false,
|
||||
// enableScroll: true,
|
||||
// padding: [10, 15, 10, 15]
|
||||
},
|
||||
options: {
|
||||
padding: [10, 5, 0, 10],
|
||||
dataLabel: false,
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
disableGrid: true
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
// update: true,
|
||||
// duration: 2,
|
||||
// animation: false,
|
||||
// enableScroll: true,
|
||||
// padding: [10, 15, 10, 15]
|
||||
},
|
||||
// 图表数据结束
|
||||
deviceCategoryOptions: [], //当前站点包含的设备类别
|
||||
siteTypeOptions: createSiteTypeOptions(),
|
||||
siteId: '', //选择的站点ID
|
||||
baseInfo: {}, //站点基本信息
|
||||
gridList: [{
|
||||
page: 'bmszl',
|
||||
icon: 'map-filled',
|
||||
icon: 'icon-BMS',
|
||||
text: 'BMS总览',
|
||||
categoryName: 'STACK'
|
||||
},
|
||||
{
|
||||
page: 'bmsdcc',
|
||||
icon: 'map',
|
||||
icon: 'icon-a-dianchicunengliangkuai',
|
||||
text: 'BMS电池簇',
|
||||
categoryName: 'CLUSTER'
|
||||
},
|
||||
{
|
||||
page: 'pcs',
|
||||
icon: 'flag-filled',
|
||||
icon: 'icon-PCS',
|
||||
text: 'PCS',
|
||||
categoryName: 'PCS'
|
||||
},
|
||||
{
|
||||
page: 'db',
|
||||
icon: 'smallcircle',
|
||||
text: '电表',
|
||||
},
|
||||
{
|
||||
page: 'dtdc',
|
||||
icon: 'smallcircle-filled',
|
||||
text: '单体电池',
|
||||
{
|
||||
page: 'db',
|
||||
icon: 'icon-dianbiao4',
|
||||
text: '电表',
|
||||
categoryName: 'AMMETER'
|
||||
},
|
||||
{
|
||||
page: 'yl',
|
||||
icon: 'icon-gongneng-diandongji',
|
||||
text: '冷却',
|
||||
categoryName: 'COOLING'
|
||||
},
|
||||
{
|
||||
page: 'dtdc',
|
||||
icon: 'icon-dantidianchi',
|
||||
text: '单体电池',
|
||||
categoryName: 'BATTERY'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
computed: {
|
||||
...mapGetters(['belongSite', 'currentSiteId']),
|
||||
siteGirdList() {
|
||||
return this.gridList.filter(i => this.deviceCategoryOptions.includes(i.categoryName))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isAvailableSite(siteId) {
|
||||
const allSites = this.siteTypeOptions.reduce((result, typeItem) => {
|
||||
return result.concat(typeItem.children || [])
|
||||
}, [])
|
||||
const site = allSites.find(item => item.value === siteId)
|
||||
return !!(site && !site.disable)
|
||||
},
|
||||
// 更新一周冲放曲线时间范围 重置图表
|
||||
updateWeekChartDate(data) {
|
||||
this.weekChartTimeRange = data || []
|
||||
this.siteId && this.getWeekChartData()
|
||||
},
|
||||
// 更新当日功率曲线时间范围 重置图表
|
||||
updateActiveChartDate(data) {
|
||||
this.activeChartTimeRange = data || []
|
||||
this.siteId && this.getGVQXData()
|
||||
},
|
||||
toDetail(e) {
|
||||
if (!this.siteId) return uni.showToast({
|
||||
title: "请选择清单",
|
||||
icon: 'none'
|
||||
})
|
||||
const {
|
||||
index
|
||||
} = e.detail
|
||||
this.$tab.navigateTo(`/pages/work/${this.gridList[index].page}/index?siteId=${this.siteId}`)
|
||||
this.$tab.navigateTo(`/pages/work/${this.siteGirdList[index].page}/index?siteId=${this.siteId}`)
|
||||
},
|
||||
selectedSite(id) {
|
||||
this.siteId = id
|
||||
}
|
||||
},
|
||||
// 页面切换不会重新调用,如果希望每次切换页面都重新调接口,使用onShow
|
||||
mounted() {
|
||||
getAllSites().then(response => {
|
||||
console.log('返回数据', response)
|
||||
const data = response?.data || []
|
||||
this.siteList = data.map(item => {
|
||||
return {
|
||||
text: item.siteName,
|
||||
value: item.siteId,
|
||||
id: item.id
|
||||
}
|
||||
selectedSite(data) {
|
||||
const siteObj = (data.detail.value || [])[1]
|
||||
const value = siteObj?.value
|
||||
if (!value) return
|
||||
if (value === this.siteId) return
|
||||
this.siteId = value
|
||||
this.$store.commit('SET_CURRENTSITEID', value)
|
||||
this.updateSiteInfo()
|
||||
},
|
||||
updateSiteInfo() {
|
||||
if (!this.siteId) return
|
||||
this.curveDisplayData = []
|
||||
this.curveDisplayLoadingPromise = null
|
||||
this.getSiteBaseInfo()
|
||||
this.getWeekChartData()
|
||||
this.getGVQXData()
|
||||
this.getSiteDeviceCategory()
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
const raw = String(fieldCode || '').trim()
|
||||
if (!raw) return ''
|
||||
const index = raw.lastIndexOf('__')
|
||||
return index >= 0 ? raw.slice(index + 2) : raw
|
||||
},
|
||||
normalizeDateTime(value, endOfDay) {
|
||||
const raw = String(value || '').trim()
|
||||
if (!raw) return ''
|
||||
if (raw.includes(' ')) return raw
|
||||
return `${raw} ${endOfDay ? '23:59:59' : '00:00:00'}`
|
||||
},
|
||||
parseToTimestamp(value) {
|
||||
if (!value) return null
|
||||
const timestamp = new Date(value).getTime()
|
||||
return Number.isNaN(timestamp) ? null : timestamp
|
||||
},
|
||||
ensureCurveDisplayData() {
|
||||
if (!this.siteId) return Promise.resolve([])
|
||||
if (this.curveDisplayData.length > 0) return Promise.resolve(this.curveDisplayData)
|
||||
if (this.curveDisplayLoadingPromise) return this.curveDisplayLoadingPromise
|
||||
this.curveDisplayLoadingPromise = getProjectDisplayData(this.siteId)
|
||||
.then(response => {
|
||||
this.curveDisplayData = response?.data || []
|
||||
return this.curveDisplayData
|
||||
})
|
||||
.catch(() => {
|
||||
this.curveDisplayData = []
|
||||
return []
|
||||
})
|
||||
.finally(() => {
|
||||
this.curveDisplayLoadingPromise = null
|
||||
})
|
||||
return this.curveDisplayLoadingPromise
|
||||
},
|
||||
fetchCurveSeries(pointId, name, startTime, endTime) {
|
||||
if (!pointId) return Promise.resolve(null)
|
||||
return getPointConfigCurve({
|
||||
siteId: this.siteId,
|
||||
pointId,
|
||||
pointType: 'data',
|
||||
rangeType: 'custom',
|
||||
startTime,
|
||||
endTime
|
||||
}).then(response => {
|
||||
const list = response?.data || []
|
||||
const points = list.map(item => {
|
||||
const timestamp = this.parseToTimestamp(item.dataTime)
|
||||
const value = Number(item.pointValue)
|
||||
if (!timestamp || Number.isNaN(value)) return null
|
||||
return {
|
||||
timestamp,
|
||||
label: item.dataTime,
|
||||
value
|
||||
}
|
||||
}).filter(Boolean)
|
||||
return {
|
||||
name,
|
||||
points
|
||||
}
|
||||
}).catch(() => null)
|
||||
},
|
||||
buildLineChartData(seriesList) {
|
||||
const validSeries = (seriesList || []).filter(item => item && (item.points || []).length > 0)
|
||||
if (validSeries.length === 0) {
|
||||
return {
|
||||
categories: [],
|
||||
series: []
|
||||
}
|
||||
}
|
||||
const labelByTimestamp = {}
|
||||
const timestampSet = new Set()
|
||||
validSeries.forEach(item => {
|
||||
item.points.forEach(point => {
|
||||
timestampSet.add(point.timestamp)
|
||||
if (!labelByTimestamp[point.timestamp]) {
|
||||
labelByTimestamp[point.timestamp] = point.label
|
||||
}
|
||||
})
|
||||
})
|
||||
const sortedTimestamps = Array.from(timestampSet).sort((a, b) => a - b)
|
||||
const categories = sortedTimestamps.map(item => labelByTimestamp[item])
|
||||
const series = validSeries.map(item => {
|
||||
const pointMap = {}
|
||||
item.points.forEach(point => {
|
||||
pointMap[point.timestamp] = point.value
|
||||
})
|
||||
return {
|
||||
name: item.name,
|
||||
data: sortedTimestamps.map(timestamp => pointMap[timestamp] ?? null)
|
||||
}
|
||||
})
|
||||
return {
|
||||
categories,
|
||||
series
|
||||
}
|
||||
},
|
||||
findActiveCurveRow(sectionRows, keywords = []) {
|
||||
const keywordSet = new Set((keywords || []).map(item => String(item || '').toLowerCase()))
|
||||
return (sectionRows || []).find(row => {
|
||||
const fieldCode = this.getFieldName(row?.fieldCode).toLowerCase()
|
||||
const fieldName = String(row?.fieldName || '').toLowerCase()
|
||||
if (keywordSet.has(fieldCode) || keywordSet.has(fieldName)) return true
|
||||
return Array.from(keywordSet).some(keyword => fieldCode.includes(keyword) || fieldName.includes(keyword))
|
||||
})
|
||||
},
|
||||
getSiteList() {
|
||||
getAllSites().then(response => {
|
||||
const data = response?.data || []
|
||||
const canAccessAll = !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all')
|
||||
const siteTypeOptions = createSiteTypeOptions().map(item => ({
|
||||
...item,
|
||||
children: []
|
||||
}))
|
||||
data.forEach(item => {
|
||||
if (!canAccessAll && !this.belongSite.includes(item.siteId)) return
|
||||
const siteType = (item.siteType || item.type || 'cn').toString().toLowerCase()
|
||||
const typeOption = siteTypeOptions.find(i => i.value === siteType) || siteTypeOptions.find(i => i.value === 'cn')
|
||||
if (!typeOption) return
|
||||
typeOption.children.push({
|
||||
text: item.siteName,
|
||||
value: item.siteId,
|
||||
id: item.id
|
||||
})
|
||||
})
|
||||
this.siteTypeOptions = siteTypeOptions.filter(item => (item.children || []).length > 0)
|
||||
const siteChildren = this.siteTypeOptions.reduce((result, typeItem) => {
|
||||
return result.concat(typeItem.children || [])
|
||||
}, [])
|
||||
// 设置默认展示的站点
|
||||
const defaultSiteId = this.isAvailableSite(this.currentSiteId) ? this.currentSiteId : (siteChildren[0]?.value || '')
|
||||
if (defaultSiteId) {
|
||||
this.siteId = defaultSiteId
|
||||
this.$store.commit('SET_CURRENTSITEID', defaultSiteId)
|
||||
this.updateSiteInfo()
|
||||
}
|
||||
})
|
||||
},
|
||||
getSiteBaseInfo() {
|
||||
getSingleSiteBaseInfo({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
console.log('获取站点基本信息', response)
|
||||
this.baseInfo = response?.data || {}
|
||||
})
|
||||
// 设置默认展示的站点
|
||||
data.length > 0 && (this.siteId = data[0].siteId)
|
||||
},
|
||||
getSiteDeviceCategory() {
|
||||
getSiteAllDeviceCategory({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.deviceCategoryOptions = response?.data || []
|
||||
})
|
||||
},
|
||||
handleDate(date) {
|
||||
if (!date) return date
|
||||
const time = new Date(date)
|
||||
const month = time.getMonth() + 1,
|
||||
day = time.getDate()
|
||||
return `${month<10?'0'+month : month}/${day<10 ? '0'+day : day}`
|
||||
},
|
||||
getGVQXData() {
|
||||
this.$refs.activeChartDateRangeSelect.showBtnLoading(true)
|
||||
const startTime = this.normalizeDateTime(this.activeChartTimeRange[0], false)
|
||||
const endTime = this.normalizeDateTime(this.activeChartTimeRange[1], true)
|
||||
this.ensureCurveDisplayData().then(displayData => {
|
||||
const sectionRows = (displayData || []).filter(item =>
|
||||
item && item.sectionName === '当日功率曲线' && item.useFixedDisplay !== 1 && item.dataPoint
|
||||
)
|
||||
const targetRows = [{
|
||||
name: '电网功率',
|
||||
row: this.findActiveCurveRow(sectionRows, ['gridpower', '电网功率'])
|
||||
},
|
||||
{
|
||||
name: '负载功率',
|
||||
row: this.findActiveCurveRow(sectionRows, ['loadpower', '负载功率'])
|
||||
},
|
||||
{
|
||||
name: '储能功率',
|
||||
row: this.findActiveCurveRow(sectionRows, ['storagepower', '储能功率'])
|
||||
}
|
||||
].filter(item => item.row && item.row.dataPoint)
|
||||
const tasks = targetRows.map(item => this.fetchCurveSeries(String(item.row.dataPoint).trim(), item.name, startTime,
|
||||
endTime))
|
||||
return Promise.all(tasks).then(series => {
|
||||
this.activeChartData = JSON.parse(JSON.stringify(this.buildLineChartData((series || []).filter(Boolean))))
|
||||
})
|
||||
}).finally(() => this.$refs.activeChartDateRangeSelect.showBtnLoading(false))
|
||||
|
||||
},
|
||||
getWeekChartData() {
|
||||
this.$refs.weekChartDateRangeSelect.showBtnLoading(true)
|
||||
const startTime = this.normalizeDateTime(this.weekChartTimeRange[0], false)
|
||||
const endTime = this.normalizeDateTime(this.weekChartTimeRange[1], true)
|
||||
this.ensureCurveDisplayData().then(displayData => {
|
||||
const sectionRows = (displayData || []).filter(item =>
|
||||
item && item.sectionName === '一周充放曲线' && item.useFixedDisplay !== 1 && item.dataPoint
|
||||
)
|
||||
const tasks = sectionRows.map(row => {
|
||||
const pointId = String(row.dataPoint || '').trim()
|
||||
if (!pointId) return Promise.resolve(null)
|
||||
const name = row.fieldName || this.getFieldName(row.fieldCode) || pointId
|
||||
return this.fetchCurveSeries(pointId, name, startTime, endTime)
|
||||
})
|
||||
return Promise.all(tasks).then(series => {
|
||||
this.weekChartData = JSON.parse(JSON.stringify(this.buildLineChartData((series || []).filter(Boolean))))
|
||||
})
|
||||
}).finally(() => this.$refs.weekChartDateRangeSelect.showBtnLoading(false))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentSiteId(newSiteId) {
|
||||
if (!newSiteId || newSiteId === this.siteId) return
|
||||
if (!this.isAvailableSite(newSiteId)) return
|
||||
this.siteId = newSiteId
|
||||
this.updateSiteInfo()
|
||||
}
|
||||
},
|
||||
// 页面切换不会重新调用,如果希望每次切换页面都重新调接口,使用onShow
|
||||
onLoad() {
|
||||
this.$nextTick(() => {
|
||||
this.getSiteList()
|
||||
this.$refs.weekChartDateRangeSelect.init()
|
||||
this.$refs.activeChartDateRangeSelect.init(true)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 页面滚动 设置pageScrollTop chart显示需要
|
||||
onPageScroll(e) {
|
||||
this.pageScrollTop = e.scrollTop
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -97,10 +484,11 @@
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
@ -108,27 +496,107 @@
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
// 基本信息
|
||||
.base-info {
|
||||
margin-top: -80rpx;
|
||||
border-radius: 80rpx 80rpx 0 0;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
// 装机功率
|
||||
.install-data {
|
||||
.grid-item-box {
|
||||
padding-top: 6rpx;
|
||||
padding-bottom: 6rpx;
|
||||
|
||||
.text {
|
||||
margin-top: 20rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
line-height: 40rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
padding-left: 40rpx;
|
||||
|
||||
.left {
|
||||
width: 220rpx;
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.right {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,390 +1,493 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部6个数据 -->
|
||||
<uni-grid class="info-grid" :column="2" :showBorder="false" style="margin-bottom: 10px;">
|
||||
<uni-grid-item v-for="(item,index) in runningHeadData" :key="index+'head'">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<text class="text">{{runningHeadInfo[item.attr] | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部总览横向展示 -->
|
||||
<scroll-view class="info-overview-scroll" scroll-x>
|
||||
<view class="info-overview-row">
|
||||
<view class="info-overview-card" v-for="(item,index) in runningHeadCards" :key="index+'head'">
|
||||
<view class="grid-item-box">
|
||||
<image :src="require('@/static/images/ems/pcs/'+item.img+'.jpg')" class="icon" alt="" />
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="text">{{item.value | formatNumber}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 设备标签横向展示 -->
|
||||
<scroll-view class="pcs-tags-scroll" scroll-x>
|
||||
<view class="pcs-tags-row">
|
||||
<view
|
||||
class="pcs-tag-item"
|
||||
:class="{ active: !selectedPcsId }"
|
||||
@click="handleTagClick('')"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
v-for="(item, index) in pcsDeviceList"
|
||||
:key="index + 'pcsTag'"
|
||||
class="pcs-tag-item"
|
||||
:class="{ active: selectedPcsId === (item.deviceId || item.id || '') }"
|
||||
@click="handleTagClick(item.deviceId || item.id || '')"
|
||||
>
|
||||
{{ item.deviceName || item.deviceId || item.id || 'PCS' }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<uni-collapse ref="collapse" accordion v-if="filteredList.length > 0">
|
||||
<uni-collapse-item v-for="(item,index) in filteredList" :key="index+'pcs'" :open="index===0"
|
||||
class="common-collapse-item" :class="handleCardClass(item)">
|
||||
|
||||
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
|
||||
<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'pcs'" :open="index===0"
|
||||
:class="item.workStatus === '1' ? 'danger' : item.workStatus === '2' ? 'close' : 'running'">
|
||||
<template v-slot:title>
|
||||
<view class="title-row">
|
||||
<view class="title">{{index+1}}#{{item.deviceName || ''}}</view>
|
||||
<view class="msg">
|
||||
<view>{{communicationStatusOptions[item.communicationStatus] || ''}}</view>
|
||||
<view>数据更新时间:{{item.dataUpdateTime || ''}}</view>
|
||||
<view class='title-wrapper'>
|
||||
<view class="top">
|
||||
<view class="status">{{formatDictValue((PCSWorkStatusOptions || {}), item.workStatus, '暂无数据')}}</view>
|
||||
<text class="name">{{item.deviceName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view>
|
||||
<uni-group mode="card">
|
||||
<uni-grid :column="4" :showBorder="false">
|
||||
<uni-grid-item>
|
||||
<view class='content'>
|
||||
<!-- 设备状态栏 -->
|
||||
<uni-group mode="card" class="status-card-group no-wrapper-padding">
|
||||
<view class="flex-container">
|
||||
<view class="flex-lists">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">工作状态</view>
|
||||
<text class="text"
|
||||
:class="item.workStatus === '0' ? 'status-running' : 'status-danger'">{{workStatusOptions[item.workStatus]}}</text>
|
||||
<text
|
||||
class="text work-status-color">{{formatDictValue((PCSWorkStatusOptions || {}), 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>
|
||||
<text class="text">{{formatDictValue((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"
|
||||
:class="item.deviceStatus === '0' ? 'status-running' : 'status-danger'">{{deviceStatusOptions[item.deviceStatus]}}</text>
|
||||
<text class="text">{{formatDictValue((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>
|
||||
<text class="text">{{formatDictValue((controlModeOptions || {}), item.controlMode)}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</uni-group>
|
||||
<!-- infoData -->
|
||||
<uni-group mode="card"
|
||||
<!-- 设备数据 -->
|
||||
<uni-group mode="card" class="data-card-group"
|
||||
:style="{marginBottom:!item.pcsBranchInfoList || item.pcsBranchInfoList.length === 0 ?'25px' : ''}">
|
||||
<uni-grid :column="2" showBorder class="info-grid">
|
||||
<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData"
|
||||
:key="infoDataIndex+'infoData'">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">{{infoDataItem.label}}</view>
|
||||
<text class="text">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</text>
|
||||
<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
|
||||
class="data-row">
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{infoDataItem.label}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
<!-- 支路 -->
|
||||
<uni-group class="pcs-branch-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
|
||||
<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" :showBorder="false" class="info-grid">
|
||||
<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>
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getRunningHeadInfo,
|
||||
getPcsDetailInfo
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
workStatusOptions: (state) =>
|
||||
state.ems.workStatusOptions,
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getPcsNameList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
PCSWorkStatusOptions: (state) =>
|
||||
state.ems.PCSWorkStatusOptions,
|
||||
communicationStatusOptions: (state) =>
|
||||
state.ems.communicationStatusOptions,
|
||||
deviceStatusOptions: (state) =>
|
||||
state.ems.deviceStatusOptions,
|
||||
gridStatusOptions: (state) =>
|
||||
state.ems.gridStatusOptions,
|
||||
controlModeOptions: (state) =>
|
||||
state.ems.controlModeOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
runningHeadData: [{
|
||||
title: '实时有功功率(kW)',
|
||||
bgColor: '#FFF2CB',
|
||||
attr: 'totalActivePower'
|
||||
}, {
|
||||
title: '实时无功功率(kVar)',
|
||||
bgColor: '#CBD6FF',
|
||||
attr: 'totalReactivePower'
|
||||
}, {
|
||||
title: '电池堆SOC',
|
||||
bgColor: '#DCCBFF',
|
||||
attr: 'soc'
|
||||
}, {
|
||||
title: '电池堆SOH',
|
||||
bgColor: '#FFD4CB',
|
||||
attr: 'soh'
|
||||
}, {
|
||||
title: '今日充电量(kWh)',
|
||||
bgColor: '#FFD6F8',
|
||||
attr: 'dayChargedCap'
|
||||
}, {
|
||||
title: '今日放电量(kWh)',
|
||||
bgColor: '#E1FFCA',
|
||||
attr: 'dayDisChargedCap'
|
||||
}],
|
||||
runningHeadInfo: {},
|
||||
list: [],
|
||||
siteId: '',
|
||||
controlModeOptions: (state) =>
|
||||
state.ems.controlModeOptions,
|
||||
}),
|
||||
runningHeadCards() {
|
||||
const sectionData = (this.runningDisplayData || []).filter(item => item.sectionName === '运行概览')
|
||||
return sectionData.map((item, index) => ({
|
||||
title: item.fieldName,
|
||||
value: item.fieldValue,
|
||||
img: this.getHeadCardImg(item, index)
|
||||
}))
|
||||
},
|
||||
filteredList() {
|
||||
if (!this.selectedPcsId) {
|
||||
return this.list || []
|
||||
}
|
||||
return (this.list || []).filter(item => (item.deviceId || '') === this.selectedPcsId)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
runningDisplayData: [],
|
||||
pcsDeviceList: [],
|
||||
selectedPcsId: '',
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
label: '总交流有功电率',
|
||||
attr: 'totalActivePower',
|
||||
unit: 'kW'
|
||||
label: "总交流有功功率",
|
||||
attr: "totalActivePower",
|
||||
unit: "kW",
|
||||
pointName: "总交流有功功率",
|
||||
},
|
||||
{
|
||||
label: '总交流无功电率',
|
||||
attr: 'totalReactivePower',
|
||||
unit: 'kVar'
|
||||
label: "总交流无功功率",
|
||||
attr: "totalReactivePower",
|
||||
unit: "kVar",
|
||||
pointName: "总交流无功功率",
|
||||
},
|
||||
{
|
||||
label: '当天交流充电量',
|
||||
attr: 'dailyAcChargeEnergy',
|
||||
unit: 'kWh'
|
||||
label: "当天交流充电量",
|
||||
attr: "dailyAcChargeEnergy",
|
||||
unit: "kWh",
|
||||
pointName: "当天交流充电量 (kWh)",
|
||||
},
|
||||
{
|
||||
label: '当天交流放电量',
|
||||
attr: 'dailyAcDischargeEnergy',
|
||||
unit: 'kWh'
|
||||
label: "当天交流放电量",
|
||||
attr: "dailyAcDischargeEnergy",
|
||||
unit: "kWh",
|
||||
pointName: "当天交流放电量 (kWh)",
|
||||
},
|
||||
{
|
||||
label: '总交流视在功率',
|
||||
attr: 'totalApparentPower',
|
||||
unit: 'kVA'
|
||||
label: "A相电压",
|
||||
attr: "aPhaseVoltage",
|
||||
unit: "V",
|
||||
pointName: ""
|
||||
},
|
||||
{
|
||||
label: '总交流功率因数',
|
||||
attr: 'totalPowerFactor',
|
||||
unit: ''
|
||||
label: "A相电流",
|
||||
attr: "aPhaseCurrent",
|
||||
unit: "A",
|
||||
pointName: "A相电流",
|
||||
},
|
||||
|
||||
{
|
||||
label: "B相电压",
|
||||
attr: "bPhaseVoltage",
|
||||
unit: "V",
|
||||
pointName: ""
|
||||
},
|
||||
{
|
||||
label: 'PCS模块温度',
|
||||
attr: 'pcsModuleTemperature',
|
||||
unit: '℃'
|
||||
label: "B相电流",
|
||||
attr: "bPhaseCurrent",
|
||||
unit: "A",
|
||||
pointName: "B相电流",
|
||||
},
|
||||
{
|
||||
label: 'PCS环境温度',
|
||||
attr: 'pcsEnvironmentTemperature',
|
||||
unit: '℃'
|
||||
label: "总交流视在功率",
|
||||
attr: "totalApparentPower",
|
||||
unit: "kVA",
|
||||
pointName: "总交流视在功率",
|
||||
},
|
||||
{
|
||||
label: 'A相电压',
|
||||
attr: 'aPhaseVoltage',
|
||||
unit: 'V'
|
||||
label: "总交流功率因数",
|
||||
attr: "totalPowerFactor",
|
||||
unit: "",
|
||||
pointName: "总交流功率因数",
|
||||
},
|
||||
{
|
||||
label: 'A相电流',
|
||||
attr: 'aPhaseCurrent',
|
||||
unit: 'A'
|
||||
label: "PCS模块温度",
|
||||
attr: "pcsModuleTemperature",
|
||||
unit: "℃",
|
||||
pointName: "",
|
||||
},
|
||||
{
|
||||
label: 'B相电压',
|
||||
attr: 'bPhaseVoltage',
|
||||
unit: 'V'
|
||||
label: "PCS环境温度",
|
||||
attr: "pcsEnvironmentTemperature",
|
||||
unit: "℃",
|
||||
pointName: "",
|
||||
},
|
||||
{
|
||||
label: 'B相电流',
|
||||
attr: 'bPhaseCurrent',
|
||||
unit: 'A'
|
||||
label: "C相电压",
|
||||
attr: "cPhaseVoltage",
|
||||
unit: "V",
|
||||
pointName: ""
|
||||
},
|
||||
{
|
||||
label: 'C相电压',
|
||||
attr: 'cPhaseVoltage',
|
||||
unit: 'V'
|
||||
label: "C相电流",
|
||||
attr: "cPhaseCurrent",
|
||||
unit: "A",
|
||||
pointName: "C相电流",
|
||||
},
|
||||
|
||||
{
|
||||
label: 'C相电流',
|
||||
attr: 'cPhaseCurrent',
|
||||
unit: 'A'
|
||||
label: "交流频率",
|
||||
attr: "acFrequency",
|
||||
unit: "Hz",
|
||||
pointName: "交流频率",
|
||||
},
|
||||
{
|
||||
label: '交流频率',
|
||||
attr: 'acFrequency',
|
||||
unit: 'Hz'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.showLoading()
|
||||
this.siteId = this.$route.query.siteId || ''
|
||||
getRunningHeadInfo({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.runningHeadInfo = response?.data || {}
|
||||
})
|
||||
|
||||
getPcsDetailInfo({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.list = response?.data || []
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
normalizeDictKey(value) {
|
||||
const raw = String(value == null ? '' : value).trim()
|
||||
if (!raw) return ''
|
||||
if (/^-?\d+(\.0+)?$/.test(raw)) {
|
||||
return String(parseInt(raw, 10))
|
||||
}
|
||||
return raw
|
||||
},
|
||||
formatDictValue(options, value, emptyText = '-') {
|
||||
const dict = (options && typeof options === 'object') ? options : {}
|
||||
const key = this.normalizeDictKey(value)
|
||||
if (!key) return emptyText
|
||||
return dict[key] || key
|
||||
},
|
||||
normalizeDeviceId(value) {
|
||||
return String(value == null ? '' : value).trim().toUpperCase()
|
||||
},
|
||||
getModuleRows(menuCode, sectionName) {
|
||||
return (this.runningDisplayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName)
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
if (!fieldCode) {
|
||||
return ''
|
||||
}
|
||||
const index = fieldCode.lastIndexOf('__')
|
||||
return index >= 0 ? fieldCode.slice(index + 2) : fieldCode
|
||||
},
|
||||
getFieldRowMap(rows = [], deviceId = '') {
|
||||
const map = {}
|
||||
const targetDeviceId = this.normalizeDeviceId(deviceId || '')
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) {
|
||||
return
|
||||
}
|
||||
const itemDeviceId = this.normalizeDeviceId(item.deviceId || '')
|
||||
if (itemDeviceId !== targetDeviceId) {
|
||||
return
|
||||
}
|
||||
map[this.getFieldName(item.fieldCode)] = item
|
||||
})
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) {
|
||||
return
|
||||
}
|
||||
const itemDeviceId = this.normalizeDeviceId(item.deviceId || '')
|
||||
if (itemDeviceId !== '') {
|
||||
return
|
||||
}
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
if (map[fieldName] === undefined || map[fieldName] === null || map[fieldName] === '') {
|
||||
map[fieldName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getFieldMap(rows = [], deviceId = '') {
|
||||
const rowMap = this.getFieldRowMap(rows, deviceId)
|
||||
return Object.keys(rowMap).reduce((acc, fieldName) => {
|
||||
const row = rowMap[fieldName] || {}
|
||||
acc[fieldName] = row.fieldValue
|
||||
return acc
|
||||
}, {})
|
||||
},
|
||||
getLatestTime(menuCode) {
|
||||
const times = (this.runningDisplayData || [])
|
||||
.filter(item => item.menuCode === menuCode && item.valueTime)
|
||||
.map(item => new Date(item.valueTime).getTime())
|
||||
.filter(ts => !isNaN(ts))
|
||||
if (times.length === 0) {
|
||||
return '-'
|
||||
}
|
||||
const date = new Date(Math.max(...times))
|
||||
const p = (n) => String(n).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`
|
||||
},
|
||||
getPcsDeviceList() {
|
||||
return getPcsNameList(this.siteId).then((response) => {
|
||||
this.pcsDeviceList = response?.data || []
|
||||
}).catch(() => {
|
||||
this.pcsDeviceList = []
|
||||
})
|
||||
},
|
||||
buildPcsList() {
|
||||
const devices = this.pcsDeviceList || []
|
||||
this.list = devices.map((device) => ({
|
||||
...this.getFieldMap(this.getModuleRows('SBJK_PCS', '电参量'), device.deviceId || device.id || ''),
|
||||
deviceId: device.deviceId || device.id || '',
|
||||
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'PCS',
|
||||
...this.getFieldMap(this.getModuleRows('SBJK_PCS', '状态'), device.deviceId || device.id || ''),
|
||||
dataUpdateTime: this.getLatestTime('SBJK_PCS'),
|
||||
alarmNum: 0,
|
||||
pcsBranchInfoList: [],
|
||||
}))
|
||||
},
|
||||
getHeadCardImg(item, index) {
|
||||
const imgMap = {
|
||||
totalActivePower: 'ssyggl',
|
||||
totalReactivePower: 'sswggl',
|
||||
soc: 'soc',
|
||||
soh: 'soh',
|
||||
dayChargedCap: 'jrcdl',
|
||||
dayChargedCap_rt: 'jrcdl',
|
||||
dayDisChargedCap: 'jrfdl',
|
||||
dayDisChargedCap_rt: 'jrfdl'
|
||||
}
|
||||
const defaultImgs = ['ssyggl', 'sswggl', 'soc', 'soh', 'jrcdl', 'jrfdl']
|
||||
return imgMap[item.fieldCode] || defaultImgs[index % defaultImgs.length]
|
||||
},
|
||||
handleCardClass(item) {
|
||||
const workStatus = this.normalizeDictKey((item && item.workStatus) || '')
|
||||
const statusOptions = (this.PCSWorkStatusOptions && typeof this.PCSWorkStatusOptions === 'object')
|
||||
? this.PCSWorkStatusOptions
|
||||
: {}
|
||||
const hasStatus = Object.prototype.hasOwnProperty.call(statusOptions, workStatus)
|
||||
return workStatus === '1' || !hasStatus
|
||||
? "timing-collapse-item"
|
||||
: workStatus === '2'
|
||||
? 'warning-collapse-item'
|
||||
: 'running-collapse-item'
|
||||
},
|
||||
handleTagClick(deviceId) {
|
||||
this.selectedPcsId = deviceId || ''
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
this.getPcsDeviceList()
|
||||
]).then(([displayResponse]) => {
|
||||
this.runningDisplayData = displayResponse?.data || []
|
||||
this.buildPcsList()
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-row {
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.msg {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
// position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
color: #FC6B69;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.info-grid {
|
||||
.uni-grid-item {
|
||||
height: 80px !important;
|
||||
|
||||
.grid-item-box {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-collapse-item__wrap {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.running {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.danger {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #FC6B69;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
color: #FC6B69;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
// 支路样式
|
||||
.pcs-branch-group {
|
||||
.uni-group__title {
|
||||
background-color: #959595;
|
||||
|
||||
.uni-group__title-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-group__content {
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
&.uni-group--card:last-child {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.info-overview-scroll {
|
||||
background: #fff;
|
||||
padding: 0 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-overview-row {
|
||||
display: inline-flex;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.info-overview-card {
|
||||
width: 280rpx;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.grid-item-box .title {
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box .text {
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.pcs-tags-scroll {
|
||||
background: #fff;
|
||||
padding: 0 20rpx 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pcs-tags-row {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pcs-tag-item {
|
||||
flex: 0 0 auto;
|
||||
padding: 8rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.4;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.pcs-tag-item.active {
|
||||
color: #fff;
|
||||
background: #007aff;
|
||||
border-color: #007aff;
|
||||
}
|
||||
</style>
|
||||
|
||||
242
pages/work/yl/index.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
|
||||
<uni-collapse-item
|
||||
v-for="(item,index) in list"
|
||||
:key="index + 'ylList'"
|
||||
:open="index === 0"
|
||||
class="common-collapse-item"
|
||||
:class="handleCardClass(item)"
|
||||
>
|
||||
<template v-slot:title>
|
||||
<view class="title-wrapper">
|
||||
<view class="top">
|
||||
<view class="status">{{ item.statusText }}</view>
|
||||
<text class="name">{{ item.deviceName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="content">
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row
|
||||
v-for="(field, fieldIndex) in (item.fieldConfigs || fallbackFieldConfigs)"
|
||||
:key="fieldIndex + 'ylField'"
|
||||
class="data-row"
|
||||
>
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{ field.name }}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">
|
||||
{{ item[field.attr] | formatNumber }}
|
||||
<text v-if="field.unit" v-html="field.unit"></text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getDeviceList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
deviceStatusOptions: (state) => state.ems.deviceStatusOptions,
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
siteId: '',
|
||||
displayData: [],
|
||||
coolingDeviceList: [],
|
||||
list: [],
|
||||
fallbackFieldConfigs: [{
|
||||
name: '供水温度',
|
||||
attr: 'gsTemp',
|
||||
unit: '℃'
|
||||
}, {
|
||||
name: '回水温度',
|
||||
attr: 'hsTemp',
|
||||
unit: '℃'
|
||||
}, {
|
||||
name: '供水压力',
|
||||
attr: 'gsPressure',
|
||||
unit: 'MPa'
|
||||
}, {
|
||||
name: '回水压力',
|
||||
attr: 'hsPressure',
|
||||
unit: 'MPa'
|
||||
}, {
|
||||
name: '冷源水温度',
|
||||
attr: 'lysTemp',
|
||||
unit: '℃'
|
||||
}, {
|
||||
name: 'VB01开度',
|
||||
attr: 'vb01Kd',
|
||||
unit: '%'
|
||||
}, {
|
||||
name: 'VB02开度',
|
||||
attr: 'vb02Kd',
|
||||
unit: '%'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
normalizeDeviceId(value) {
|
||||
return String(value == null ? '' : value).trim().toUpperCase()
|
||||
},
|
||||
getModuleRows(menuCode) {
|
||||
return (this.displayData || []).filter((item) => item.menuCode === menuCode)
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
const raw = String(fieldCode || '').trim()
|
||||
if (!raw) return ''
|
||||
const index = raw.lastIndexOf('__')
|
||||
return index >= 0 ? raw.slice(index + 2) : raw
|
||||
},
|
||||
getFieldUnit(attr) {
|
||||
const field = (this.fallbackFieldConfigs || []).find((item) => item.attr === attr)
|
||||
return field ? (field.unit || '') : ''
|
||||
},
|
||||
getFieldConfigs(rows = []) {
|
||||
const result = []
|
||||
const seen = {}
|
||||
;(rows || []).forEach((item) => {
|
||||
const attr = this.getFieldName(item?.fieldCode)
|
||||
const name = String(item?.fieldName || '').trim()
|
||||
if (!attr || !name || seen[name]) return
|
||||
result.push({
|
||||
name,
|
||||
attr,
|
||||
unit: this.getFieldUnit(attr),
|
||||
})
|
||||
seen[name] = true
|
||||
})
|
||||
return result.length > 0 ? result : this.fallbackFieldConfigs
|
||||
},
|
||||
getFieldRowMap(rows = [], deviceId = '') {
|
||||
const map = {}
|
||||
const targetDeviceId = this.normalizeDeviceId(deviceId || '')
|
||||
rows.forEach((item) => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = this.normalizeDeviceId(item.deviceId || '')
|
||||
if (itemDeviceId !== targetDeviceId) return
|
||||
map[this.getFieldName(item.fieldCode)] = item
|
||||
})
|
||||
rows.forEach((item) => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = this.normalizeDeviceId(item.deviceId || '')
|
||||
if (itemDeviceId !== '') return
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
if (!map[fieldName]) {
|
||||
map[fieldName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getLatestUpdateTime(rows = []) {
|
||||
const times = (rows || [])
|
||||
.map((item) => new Date(item?.valueTime).getTime())
|
||||
.filter((ts) => !isNaN(ts))
|
||||
if (times.length === 0) return '-'
|
||||
const date = new Date(Math.max(...times))
|
||||
const p = (n) => String(n).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`
|
||||
},
|
||||
formatStatusText(statusValue) {
|
||||
const key = String(statusValue == null ? '' : statusValue).trim()
|
||||
if (!key) return '暂无数据'
|
||||
return (this.deviceStatusOptions || {})[key] || key
|
||||
},
|
||||
handleCardClass(item) {
|
||||
const key = String(item?.statusValue == null ? '' : item.statusValue).trim()
|
||||
if (key === '1') return 'running-collapse-item'
|
||||
if (key === '2') return 'warning-collapse-item'
|
||||
return 'timing-collapse-item'
|
||||
},
|
||||
buildList() {
|
||||
const rows = this.getModuleRows('SBJK_YL')
|
||||
const fieldConfigs = this.getFieldConfigs(rows)
|
||||
let devices = (this.coolingDeviceList || []).filter((item) => item.deviceCategory === 'COOLING')
|
||||
if (devices.length === 0) {
|
||||
const grouped = {}
|
||||
rows.forEach((item) => {
|
||||
const id = this.normalizeDeviceId(item?.deviceId || '')
|
||||
if (!id || grouped[id]) return
|
||||
grouped[id] = {
|
||||
deviceId: id,
|
||||
deviceName: item?.deviceName || id,
|
||||
deviceStatus: ''
|
||||
}
|
||||
})
|
||||
devices = Object.values(grouped)
|
||||
}
|
||||
if (devices.length === 0) {
|
||||
devices = [{
|
||||
deviceId: '',
|
||||
deviceName: '冷却',
|
||||
deviceStatus: ''
|
||||
}]
|
||||
}
|
||||
|
||||
this.list = devices.map((device) => {
|
||||
const id = this.normalizeDeviceId(device.deviceId || device.id || '')
|
||||
const fieldRowMap = this.getFieldRowMap(rows, id)
|
||||
const values = {}
|
||||
fieldConfigs.forEach((cfg) => {
|
||||
values[cfg.attr] = fieldRowMap[cfg.attr]?.fieldValue
|
||||
})
|
||||
const statusField = Object.values(fieldRowMap).find((row) => String(row?.fieldName || '').includes('状态'))
|
||||
const statusValue = statusField?.fieldValue || device.deviceStatus || ''
|
||||
return {
|
||||
...values,
|
||||
deviceId: id,
|
||||
deviceName: device.deviceName || device.name || id || '冷却',
|
||||
statusValue: String(statusValue || ''),
|
||||
statusText: this.formatStatusText(statusValue),
|
||||
fieldConfigs,
|
||||
dataUpdateTime: this.getLatestUpdateTime(Object.values(fieldRowMap)),
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
getDeviceList(this.siteId)
|
||||
]).then(([displayResponse, deviceResponse]) => {
|
||||
this.displayData = displayResponse?.data || []
|
||||
this.coolingDeviceList = deviceResponse?.data || []
|
||||
this.buildList()
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
87
static/font_ems/iconfont.css
Normal file
@ -0,0 +1,87 @@
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
/* Project id 4993552 */
|
||||
src: url('@/static/font_ems/iconfont.woff2?t=1754546965003') format('woff2'),
|
||||
url('@/static/font_ems/iconfont.woff?t=1754546965003') format('woff'),
|
||||
url('@/static/font_ems/iconfont.ttf?t=1754546965003') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-a-dianchicunengliangkuai:before {
|
||||
content: "\e7a1";
|
||||
}
|
||||
|
||||
.icon-dianbiao:before {
|
||||
content: "\eacb";
|
||||
}
|
||||
|
||||
.icon-batterypx:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-dianbiao_shiti:before {
|
||||
content: "\eca1";
|
||||
}
|
||||
|
||||
.icon-bianyaqiyunhangpingjia:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-dianbiao1:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-pcs:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.icon-dianbiao2:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.icon-ziyuan:before {
|
||||
content: "\e866";
|
||||
}
|
||||
|
||||
.icon-pcs1:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-gongneng-diandongji:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.icon-dianbiao3:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
|
||||
.icon-weibiaoti-1-02-02:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-dianbiao4:before {
|
||||
content: "\e625";
|
||||
}
|
||||
|
||||
.icon-dantidianchi:before {
|
||||
content: "\e76b";
|
||||
}
|
||||
|
||||
.icon-BMS:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-BMStongyong:before {
|
||||
content: "\e80c";
|
||||
}
|
||||
|
||||
.icon-PCS:before {
|
||||
content: "\e603";
|
||||
}
|
||||
1
static/font_ems/iconfont.js
Normal file
135
static/font_ems/iconfont.json
Normal file
@ -0,0 +1,135 @@
|
||||
{
|
||||
"id": "4993552",
|
||||
"name": "EMS",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "43871958",
|
||||
"name": "电池簇、能量块",
|
||||
"font_class": "a-dianchicunengliangkuai",
|
||||
"unicode": "e7a1",
|
||||
"unicode_decimal": 59297
|
||||
},
|
||||
{
|
||||
"icon_id": "5387412",
|
||||
"name": "电表",
|
||||
"font_class": "dianbiao",
|
||||
"unicode": "eacb",
|
||||
"unicode_decimal": 60107
|
||||
},
|
||||
{
|
||||
"icon_id": "6141230",
|
||||
"name": "battery 32 px.1",
|
||||
"font_class": "batterypx",
|
||||
"unicode": "e610",
|
||||
"unicode_decimal": 58896
|
||||
},
|
||||
{
|
||||
"icon_id": "6775643",
|
||||
"name": "电表_实体",
|
||||
"font_class": "dianbiao_shiti",
|
||||
"unicode": "eca1",
|
||||
"unicode_decimal": 60577
|
||||
},
|
||||
{
|
||||
"icon_id": "6826531",
|
||||
"name": "变压器运行评价",
|
||||
"font_class": "bianyaqiyunhangpingjia",
|
||||
"unicode": "e600",
|
||||
"unicode_decimal": 58880
|
||||
},
|
||||
{
|
||||
"icon_id": "7045021",
|
||||
"name": "电表",
|
||||
"font_class": "dianbiao1",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "8057318",
|
||||
"name": "pcs",
|
||||
"font_class": "pcs",
|
||||
"unicode": "e611",
|
||||
"unicode_decimal": 58897
|
||||
},
|
||||
{
|
||||
"icon_id": "8441718",
|
||||
"name": "电表",
|
||||
"font_class": "dianbiao2",
|
||||
"unicode": "e688",
|
||||
"unicode_decimal": 59016
|
||||
},
|
||||
{
|
||||
"icon_id": "12293731",
|
||||
"name": "资源 2",
|
||||
"font_class": "ziyuan",
|
||||
"unicode": "e866",
|
||||
"unicode_decimal": 59494
|
||||
},
|
||||
{
|
||||
"icon_id": "12718310",
|
||||
"name": "pcs",
|
||||
"font_class": "pcs1",
|
||||
"unicode": "e601",
|
||||
"unicode_decimal": 58881
|
||||
},
|
||||
{
|
||||
"icon_id": "22678712",
|
||||
"name": "功能-电动机",
|
||||
"font_class": "gongneng-diandongji",
|
||||
"unicode": "e65a",
|
||||
"unicode_decimal": 58970
|
||||
},
|
||||
{
|
||||
"icon_id": "23420639",
|
||||
"name": "电表",
|
||||
"font_class": "dianbiao3",
|
||||
"unicode": "e6a7",
|
||||
"unicode_decimal": 59047
|
||||
},
|
||||
{
|
||||
"icon_id": "31086873",
|
||||
"name": "PCS",
|
||||
"font_class": "weibiaoti-1-02-02",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "38212288",
|
||||
"name": "电表",
|
||||
"font_class": "dianbiao4",
|
||||
"unicode": "e625",
|
||||
"unicode_decimal": 58917
|
||||
},
|
||||
{
|
||||
"icon_id": "40121596",
|
||||
"name": "单体电池",
|
||||
"font_class": "dantidianchi",
|
||||
"unicode": "e76b",
|
||||
"unicode_decimal": 59243
|
||||
},
|
||||
{
|
||||
"icon_id": "42346006",
|
||||
"name": "BMS-copy",
|
||||
"font_class": "BMS",
|
||||
"unicode": "e63e",
|
||||
"unicode_decimal": 58942
|
||||
},
|
||||
{
|
||||
"icon_id": "43101168",
|
||||
"name": "BMS通用",
|
||||
"font_class": "BMStongyong",
|
||||
"unicode": "e80c",
|
||||
"unicode_decimal": 59404
|
||||
},
|
||||
{
|
||||
"icon_id": "43866831",
|
||||
"name": "PCS-copy",
|
||||
"font_class": "PCS",
|
||||
"unicode": "e603",
|
||||
"unicode_decimal": 58883
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
static/font_ems/iconfont.ttf
Normal file
BIN
static/font_ems/iconfont.woff
Normal file
BIN
static/font_ems/iconfont.woff2
Normal file
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 37 KiB |
BIN
static/images/ems/pcs/jrcdl.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
static/images/ems/pcs/jrfdl.jpg
Normal file
|
After Width: | Height: | Size: 47 KiB |
BIN
static/images/ems/pcs/soc.jpg
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
static/images/ems/pcs/soh.jpg
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
static/images/ems/pcs/sswggl.jpg
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
static/images/ems/pcs/ssyggl.jpg
Normal file
|
After Width: | Height: | Size: 38 KiB |
40
static/images/offline/china-map.svg
Normal file
|
After Width: | Height: | Size: 373 KiB |
BIN
static/images/tabbar/ticket.png
Normal file
|
After Width: | Height: | Size: 166 B |
BIN
static/images/tabbar/ticket_.png
Normal file
|
After Width: | Height: | Size: 169 B |
BIN
static/logo-trans.png
Normal file
|
After Width: | Height: | Size: 121 KiB |
BIN
static/logo.png
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 7.8 KiB |
10288
static/scss/colorui.css
@ -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,6 +105,255 @@
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
font-size: 18px;
|
||||
font-size: 30rpx;
|
||||
background-color: transparent;
|
||||
}
|
||||
// 九宫格
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
// position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
}
|
||||
.flex-container{
|
||||
display: flex;
|
||||
.flex-lists{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
// 设备详情页面 状态公共样式
|
||||
.common-collapse-item{
|
||||
.content{
|
||||
background: linear-gradient(to bottom, #22bb5873, #45db7a26);
|
||||
padding: 1rpx 0 1rpx 0;
|
||||
}
|
||||
// 标题
|
||||
.title-wrapper{
|
||||
// 设备状态栏
|
||||
padding:20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
.top{
|
||||
.status{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color:#fff;
|
||||
padding:0 10rpx;
|
||||
margin-right: 10rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 38rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.name{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 设备状态卡片
|
||||
.status-card-group{
|
||||
.uni-group__content{
|
||||
padding-top:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
// 设备状态九宫格
|
||||
.grid-item-box{
|
||||
background-color: transparent;
|
||||
.title{
|
||||
color:#333;
|
||||
}
|
||||
.text{
|
||||
color:#000;
|
||||
font-weight: bolder;
|
||||
&.work-status-color{
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 设备数据卡片
|
||||
.data-card-group{
|
||||
.uni-group__content{
|
||||
padding-top:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
// 数据列表
|
||||
.data-row{
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #000;
|
||||
padding:24rpx 0;
|
||||
&:not(:last-child){
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
}
|
||||
.title{
|
||||
color:#333;
|
||||
text-align: left;
|
||||
}
|
||||
.value{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 子设备表格卡片
|
||||
.child-card-group{
|
||||
.child-table{
|
||||
.uni-table-th{
|
||||
color:#333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.uni-table-td{
|
||||
color:#000;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.table--border{
|
||||
border-color:#ebedf0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 支路卡片
|
||||
.branch-card-group{
|
||||
.uni-group__title {
|
||||
background-color: #959595;
|
||||
height: 70rpx;
|
||||
.uni-group__title-text {
|
||||
color: #fff;
|
||||
font-size:26rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.uni-group__content {
|
||||
padding: 0;
|
||||
.title{
|
||||
color:#333;
|
||||
}
|
||||
.text{
|
||||
color:#000;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.uni-group--card:last-child {
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
//运行中
|
||||
.running-collapse-item{
|
||||
// 标题
|
||||
.title-wrapper{
|
||||
.top{
|
||||
.status{
|
||||
background-color: #30be95;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background-color:rgba(69,219,122,0.15);
|
||||
}
|
||||
// 状态九宫格
|
||||
.status-card-group{
|
||||
.grid-item-box{
|
||||
.text{
|
||||
&.work-status-color{
|
||||
color:#30be95;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
//支路设备
|
||||
.branch-card-group{
|
||||
.uni-group__title {
|
||||
background-color: #30be95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//故障
|
||||
.warning-collapse-item{
|
||||
// 标题
|
||||
.title-wrapper{
|
||||
.top{
|
||||
.status{
|
||||
background-color: #ed7876;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background: rgba(245,96,78,0.15);
|
||||
}
|
||||
// 状态九宫格
|
||||
.status-card-group{
|
||||
.grid-item-box{
|
||||
.text{
|
||||
&.work-status-color{
|
||||
color:#ed7876;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
//支路设备
|
||||
.branch-card-group{
|
||||
.uni-group__title {
|
||||
background-color: #ed7876;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// 停机
|
||||
.timing-collapse-item{
|
||||
// 标题
|
||||
.title-wrapper{
|
||||
.top{
|
||||
.status{
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background: rgba(140,140,140,0.15);
|
||||
}
|
||||
// 状态九宫格
|
||||
.status-card-group{
|
||||
.grid-item-box{
|
||||
.text{
|
||||
&.work-status-color{
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
//支路设备
|
||||
.branch-card-group{
|
||||
.uni-group__title {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -3,4 +3,5 @@
|
||||
// color-ui
|
||||
@import "@/static/scss/colorui.css";
|
||||
// iconfont
|
||||
@import "@/static/font/iconfont.css";
|
||||
@import "@/static/font_ems/iconfont.css";
|
||||
@import "@/static/font/iconfont.css";
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
const getters = {
|
||||
token: state => state.user.token,
|
||||
avatar: state => state.user.avatar,
|
||||
id: state => state.user.id,
|
||||
name: state => state.user.name,
|
||||
roles: state => state.user.roles,
|
||||
permissions: state => state.user.permissions
|
||||
const getters = {
|
||||
token: state => state.user.token,
|
||||
avatar: state => state.user.avatar,
|
||||
id: state => state.user.id,
|
||||
name: state => state.user.name,
|
||||
roles: state => state.user.roles,
|
||||
permissions: state => state.user.permissions,
|
||||
belongSite: state => state.user.belongSite,
|
||||
currentSiteId: state => state.user.currentSiteId
|
||||
}
|
||||
export default getters
|
||||
|
||||
@ -1,14 +1,33 @@
|
||||
const ems = {
|
||||
state: {
|
||||
workStatusOptions: {
|
||||
'0': '正常',
|
||||
'1': '异常',
|
||||
'2': '停止'
|
||||
}, //工作状态
|
||||
CLUSTERWorkStatusOptions: {
|
||||
'0': '静置',
|
||||
'1': '充电',
|
||||
'2': '放电',
|
||||
'3': '待机',
|
||||
'5': '运行',
|
||||
'9': "故障"
|
||||
}, //电池簇工作状态
|
||||
PCSWorkStatusOptions: {
|
||||
'0': '运行',
|
||||
'1': '停机',
|
||||
'2': '故障',
|
||||
'3': '待机',
|
||||
'4': '充电',
|
||||
'5': '放电'
|
||||
}, //PCS工作状态
|
||||
STACKWorkStatusOptions: {
|
||||
"0": "静置",
|
||||
"1": "充电",
|
||||
"2": "放电",
|
||||
"3": "浮充",
|
||||
'4': '待机',
|
||||
'5': '运行',
|
||||
'9': "故障"
|
||||
}, //STACKBMS总览工作状态
|
||||
deviceStatusOptions: {
|
||||
'0': '在线',
|
||||
'1': '离线',
|
||||
'2': '维修中'
|
||||
'0': '离线',
|
||||
'1': '在线'
|
||||
}, //设备状态
|
||||
gridStatusOptions: {
|
||||
'0': '并网',
|
||||
@ -49,9 +68,9 @@ const ems = {
|
||||
'RTU': 'RTU'
|
||||
}, //设备类型
|
||||
ticketStatusOptions: {
|
||||
0: '待处理',
|
||||
1: '已处理',
|
||||
2: '处理中'
|
||||
1: '待处理',
|
||||
2: '处理中',
|
||||
3: '已处理'
|
||||
}, //工单处理状态
|
||||
strategyStatusOptions: {
|
||||
'0': '未启用',
|
||||
@ -62,8 +81,10 @@ const ems = {
|
||||
}, //策略状态
|
||||
chargeStatusOptions: {
|
||||
'1': '充电',
|
||||
'2': '待机'
|
||||
'2': '待机',
|
||||
'3': '放电'
|
||||
}, //冲放状态
|
||||
|
||||
}
|
||||
}
|
||||
export default ems
|
||||
109
store/modules/site.js
Normal file
@ -0,0 +1,109 @@
|
||||
import { getAllSites } from '@/api/ems/site.js'
|
||||
|
||||
const createSiteTypeOptions = () => ([
|
||||
{
|
||||
text: '储能',
|
||||
value: 'cn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '光能',
|
||||
value: 'gn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '岸电',
|
||||
value: 'ad',
|
||||
children: []
|
||||
}
|
||||
])
|
||||
|
||||
const site = {
|
||||
state: {
|
||||
siteOptions: [],
|
||||
siteTypeOptions: [],
|
||||
currentSiteId: '',
|
||||
loaded: false
|
||||
},
|
||||
mutations: {
|
||||
SET_SITE_OPTIONS: (state, siteOptions) => {
|
||||
state.siteOptions = siteOptions || []
|
||||
},
|
||||
SET_SITE_TYPE_OPTIONS: (state, siteTypeOptions) => {
|
||||
state.siteTypeOptions = siteTypeOptions || createSiteTypeOptions()
|
||||
},
|
||||
SET_CURRENT_SITE_ID: (state, siteId) => {
|
||||
state.currentSiteId = siteId || ''
|
||||
},
|
||||
SET_SITE_LOADED: (state, loaded) => {
|
||||
state.loaded = !!loaded
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
LoadSites({ state, rootState, commit }, payload = {}) {
|
||||
const { force = false } = payload
|
||||
if (state.loaded && !force) {
|
||||
return Promise.resolve({
|
||||
siteOptions: state.siteOptions,
|
||||
siteTypeOptions: state.siteTypeOptions,
|
||||
siteId: state.currentSiteId
|
||||
})
|
||||
}
|
||||
return getAllSites().then(response => {
|
||||
const belongSite = rootState?.user?.belongSite || []
|
||||
const canAccessAll = !belongSite || belongSite.length === 0 || belongSite.includes('all')
|
||||
const siteOptions = (response?.data || []).filter(item => {
|
||||
const siteId = item.siteId || ''
|
||||
return canAccessAll || belongSite.includes(siteId)
|
||||
}).map(item => {
|
||||
const siteId = item.siteId || ''
|
||||
const siteType = (item.siteType || item.type || 'cn').toString().toLowerCase()
|
||||
return {
|
||||
text: item.siteName,
|
||||
value: siteId,
|
||||
id: item.id,
|
||||
longitude: Number(item.longitude || 0),
|
||||
latitude: Number(item.latitude || 0),
|
||||
siteType
|
||||
}
|
||||
})
|
||||
const siteTypeOptions = createSiteTypeOptions().map(typeItem => ({
|
||||
...typeItem,
|
||||
children: []
|
||||
}))
|
||||
siteOptions.forEach(item => {
|
||||
const typeOption = siteTypeOptions.find(i => i.value === item.siteType) || siteTypeOptions.find(i => i.value === 'cn')
|
||||
if (!typeOption) return
|
||||
typeOption.children.push({
|
||||
text: item.text,
|
||||
value: item.value,
|
||||
id: item.id
|
||||
})
|
||||
})
|
||||
const filteredSiteTypeOptions = siteTypeOptions.filter(item => (item.children || []).length > 0)
|
||||
const availableSite = siteOptions[0]
|
||||
const keepCurrent = siteOptions.find(item => item.value === state.currentSiteId)
|
||||
commit('SET_SITE_OPTIONS', siteOptions)
|
||||
commit('SET_SITE_TYPE_OPTIONS', filteredSiteTypeOptions)
|
||||
commit('SET_CURRENT_SITE_ID', keepCurrent ? keepCurrent.value : (availableSite?.value || ''))
|
||||
commit('SET_SITE_LOADED', true)
|
||||
return {
|
||||
siteOptions,
|
||||
siteTypeOptions: filteredSiteTypeOptions,
|
||||
siteId: keepCurrent ? keepCurrent.value : (availableSite?.value || '')
|
||||
}
|
||||
})
|
||||
},
|
||||
SetCurrentSiteId({ commit }, siteId) {
|
||||
commit('SET_CURRENT_SITE_ID', siteId)
|
||||
},
|
||||
ClearSiteState({ commit }) {
|
||||
commit('SET_SITE_OPTIONS', [])
|
||||
commit('SET_SITE_TYPE_OPTIONS', [])
|
||||
commit('SET_CURRENT_SITE_ID', '')
|
||||
commit('SET_SITE_LOADED', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default site
|
||||
@ -1,110 +1,141 @@
|
||||
import config from '@/config'
|
||||
import storage from '@/utils/storage'
|
||||
import constant from '@/utils/constant'
|
||||
import { isHttp, isEmpty } from "@/utils/validate"
|
||||
import { login, logout, getInfo } from '@/api/login'
|
||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
import defAva from '@/static/images/profile.jpg'
|
||||
|
||||
const baseUrl = config.baseUrl
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
token: getToken(),
|
||||
id: storage.get(constant.id),
|
||||
name: storage.get(constant.name),
|
||||
avatar: storage.get(constant.avatar),
|
||||
roles: storage.get(constant.roles),
|
||||
permissions: storage.get(constant.permissions)
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_TOKEN: (state, token) => {
|
||||
state.token = token
|
||||
},
|
||||
SET_ID: (state, id) => {
|
||||
state.id = id
|
||||
storage.set(constant.id, id)
|
||||
},
|
||||
SET_NAME: (state, name) => {
|
||||
state.name = name
|
||||
storage.set(constant.name, name)
|
||||
},
|
||||
SET_AVATAR: (state, avatar) => {
|
||||
state.avatar = avatar
|
||||
storage.set(constant.avatar, avatar)
|
||||
},
|
||||
SET_ROLES: (state, roles) => {
|
||||
state.roles = roles
|
||||
storage.set(constant.roles, roles)
|
||||
},
|
||||
SET_PERMISSIONS: (state, permissions) => {
|
||||
state.permissions = permissions
|
||||
storage.set(constant.permissions, permissions)
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
Login({ commit }, userInfo) {
|
||||
const username = userInfo.username.trim()
|
||||
const password = userInfo.password
|
||||
const code = userInfo.code
|
||||
const uuid = userInfo.uuid
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, password, code, uuid).then(res => {
|
||||
setToken(res.token)
|
||||
commit('SET_TOKEN', res.token)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
GetInfo({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.user
|
||||
let avatar = user.avatar || ""
|
||||
if (!isHttp(avatar)) {
|
||||
avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
|
||||
}
|
||||
const userid = (isEmpty(user) || isEmpty(user.userId)) ? "" : user.userId
|
||||
const username = (isEmpty(user) || isEmpty(user.userName)) ? "" : user.userName
|
||||
if (res.roles && res.roles.length > 0) {
|
||||
commit('SET_ROLES', res.roles)
|
||||
commit('SET_PERMISSIONS', res.permissions)
|
||||
} else {
|
||||
commit('SET_ROLES', ['ROLE_DEFAULT'])
|
||||
}
|
||||
commit('SET_ID', userid)
|
||||
commit('SET_NAME', username)
|
||||
commit('SET_AVATAR', avatar)
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 退出系统
|
||||
LogOut({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
logout(state.token).then(() => {
|
||||
commit('SET_TOKEN', '')
|
||||
commit('SET_ROLES', [])
|
||||
commit('SET_PERMISSIONS', [])
|
||||
removeToken()
|
||||
storage.clean()
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
import config from '@/config'
|
||||
import storage from '@/utils/storage'
|
||||
import constant from '@/utils/constant'
|
||||
import {
|
||||
isHttp,
|
||||
isEmpty
|
||||
} from "@/utils/validate"
|
||||
import {
|
||||
login,
|
||||
logout,
|
||||
getInfo
|
||||
} from '@/api/login'
|
||||
import {
|
||||
getToken,
|
||||
setToken,
|
||||
removeToken
|
||||
} from '@/utils/auth'
|
||||
import defAva from '@/static/images/profile.jpg'
|
||||
|
||||
const baseUrl = config.baseUrl
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
token: getToken(),
|
||||
id: storage.get(constant.id),
|
||||
name: storage.get(constant.name),
|
||||
avatar: storage.get(constant.avatar),
|
||||
roles: storage.get(constant.roles),
|
||||
permissions: storage.get(constant.permissions),
|
||||
belongSite: storage.get(constant.belongSite),
|
||||
currentSiteId: storage.get(constant.currentSiteId)
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_TOKEN: (state, token) => {
|
||||
state.token = token
|
||||
},
|
||||
SET_ID: (state, id) => {
|
||||
state.id = id
|
||||
storage.set(constant.id, id)
|
||||
},
|
||||
SET_NAME: (state, name) => {
|
||||
state.name = name
|
||||
storage.set(constant.name, name)
|
||||
},
|
||||
SET_AVATAR: (state, avatar) => {
|
||||
state.avatar = avatar
|
||||
storage.set(constant.avatar, avatar)
|
||||
},
|
||||
SET_ROLES: (state, roles) => {
|
||||
state.roles = roles
|
||||
storage.set(constant.roles, roles)
|
||||
},
|
||||
SET_PERMISSIONS: (state, permissions) => {
|
||||
state.permissions = permissions
|
||||
storage.set(constant.permissions, permissions)
|
||||
},
|
||||
SET_BELONGSITE: (state, belongSite = []) => {
|
||||
state.belongSite = belongSite || []
|
||||
storage.set(constant.belongSite, belongSite || [])
|
||||
},
|
||||
SET_CURRENTSITEID: (state, currentSiteId = '') => {
|
||||
state.currentSiteId = currentSiteId || ''
|
||||
storage.set(constant.currentSiteId, currentSiteId || '')
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
Login({
|
||||
commit
|
||||
}, userInfo) {
|
||||
const username = userInfo.username.trim()
|
||||
const password = userInfo.password
|
||||
const code = userInfo.code
|
||||
const uuid = userInfo.uuid
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, password, code, uuid).then(res => {
|
||||
setToken(res.token)
|
||||
commit('SET_TOKEN', res.token)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
GetInfo({
|
||||
commit,
|
||||
state
|
||||
}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.user
|
||||
const belongSite = user?.belongSite ? JSON.parse(user?.belongSite) || [] : []
|
||||
let avatar = user.avatar || ""
|
||||
if (!isHttp(avatar)) {
|
||||
avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
|
||||
}
|
||||
const userid = (isEmpty(user) || isEmpty(user.userId)) ? "" : user.userId
|
||||
const username = (isEmpty(user) || isEmpty(user.userName)) ? "" : user.userName
|
||||
if (res.roles && res.roles.length > 0) {
|
||||
commit('SET_ROLES', res.roles)
|
||||
commit('SET_PERMISSIONS', res.permissions)
|
||||
} else {
|
||||
commit('SET_ROLES', ['ROLE_DEFAULT'])
|
||||
}
|
||||
commit('SET_ID', userid)
|
||||
commit('SET_NAME', username)
|
||||
commit('SET_AVATAR', avatar)
|
||||
commit('SET_BELONGSITE', belongSite)
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 退出系统
|
||||
LogOut({
|
||||
commit,
|
||||
state
|
||||
}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
logout(state.token).then(() => {
|
||||
commit('SET_TOKEN', '')
|
||||
commit('SET_ROLES', [])
|
||||
commit('SET_PERMISSIONS', [])
|
||||
removeToken()
|
||||
storage.clean()
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default user
|
||||
|
||||
@ -636,12 +636,20 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
beforeInit(){
|
||||
this.mixinDatacomErrorMessage = null;
|
||||
if (typeof this.chartData === 'object' && this.chartData != null && this.chartData.series !== undefined && this.chartData.series.length > 0) {
|
||||
//拷贝一下chartData,为了opts变更后统一数据来源
|
||||
this.drawData = deepCloneAssign({}, this.chartData);
|
||||
this.mixinDatacomLoading = false;
|
||||
beforeInit(){
|
||||
this.mixinDatacomErrorMessage = null;
|
||||
console.log('[map-debug] beforeInit', {
|
||||
echarts: this.echarts,
|
||||
type: this.type,
|
||||
hasEopts: !!this.eopts,
|
||||
eoptsMapName: this.eopts && this.eopts.mapName,
|
||||
hasGeo: !!(this.eopts && this.eopts.mapGeoJSON),
|
||||
chartSeriesLen: this.chartData && this.chartData.series ? this.chartData.series.length : -1
|
||||
});
|
||||
if (typeof this.chartData === 'object' && this.chartData != null && this.chartData.series !== undefined && this.chartData.series.length > 0) {
|
||||
//拷贝一下chartData,为了opts变更后统一数据来源
|
||||
this.drawData = deepCloneAssign({}, this.chartData);
|
||||
this.mixinDatacomLoading = false;
|
||||
this.showchart = true;
|
||||
this.checkData(this.chartData);
|
||||
}else if(this.localdata.length>0){
|
||||
@ -782,11 +790,19 @@ export default {
|
||||
this.beforeInit();
|
||||
}
|
||||
},
|
||||
checkData(anyData) {
|
||||
let cid = this.cid
|
||||
//复位opts或eopts
|
||||
if(this.echarts === true){
|
||||
cfe.option[cid] = deepCloneAssign({}, this.eopts);
|
||||
checkData(anyData) {
|
||||
let cid = this.cid
|
||||
console.log('[map-debug] checkData', {
|
||||
cid,
|
||||
echarts: this.echarts,
|
||||
type: this.type,
|
||||
eoptsMapName: this.eopts && this.eopts.mapName,
|
||||
hasGeo: !!(this.eopts && this.eopts.mapGeoJSON),
|
||||
dataSeriesLen: anyData && anyData.series ? anyData.series.length : -1
|
||||
});
|
||||
//复位opts或eopts
|
||||
if(this.echarts === true){
|
||||
cfe.option[cid] = deepCloneAssign({}, this.eopts);
|
||||
cfe.option[cid].id = cid;
|
||||
cfe.option[cid].type = this.type;
|
||||
}else{
|
||||
@ -908,16 +924,22 @@ export default {
|
||||
cfu.option[cid].tapLegend = this.tapLegend;
|
||||
}
|
||||
//如果是H5或者App端,采用renderjs渲染图表
|
||||
if (this.inH5 || this.inApp) {
|
||||
if (this.echarts == true) {
|
||||
cfe.option[cid].ontap = this.ontap;
|
||||
cfe.option[cid].onmouse = this.openmouse;
|
||||
cfe.option[cid].tooltipShow = this.tooltipShow;
|
||||
cfe.option[cid].tooltipFormat = this.tooltipFormat;
|
||||
cfe.option[cid].tooltipCustom = this.tooltipCustom;
|
||||
cfe.option[cid].lastDrawTime = this.lastDrawTime;
|
||||
this.echartsOpts = deepCloneAssign({}, cfe.option[cid]);
|
||||
} else {
|
||||
if (this.inH5 || this.inApp) {
|
||||
if (this.echarts == true) {
|
||||
cfe.option[cid].ontap = this.ontap;
|
||||
cfe.option[cid].onmouse = this.openmouse;
|
||||
cfe.option[cid].tooltipShow = this.tooltipShow;
|
||||
cfe.option[cid].tooltipFormat = this.tooltipFormat;
|
||||
cfe.option[cid].tooltipCustom = this.tooltipCustom;
|
||||
cfe.option[cid].lastDrawTime = this.lastDrawTime;
|
||||
console.log('[map-debug] set echartsOpts', {
|
||||
cid,
|
||||
type: cfe.option[cid].type,
|
||||
mapName: cfe.option[cid].mapName,
|
||||
hasGeo: !!cfe.option[cid].mapGeoJSON
|
||||
});
|
||||
this.echartsOpts = deepCloneAssign({}, cfe.option[cid]);
|
||||
} else {
|
||||
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
|
||||
this.uchartsOpts = deepCloneAssign({}, cfu.option[cid]);
|
||||
}
|
||||
@ -1272,24 +1294,25 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
//==============以下是ECharts的方法====================
|
||||
ecinit(newVal, oldVal, owner, instance){
|
||||
let cid = JSON.stringify(newVal.id)
|
||||
this.rid = cid
|
||||
that[cid] = this.$ownerInstance || instance
|
||||
let eopts = JSON.parse(JSON.stringify(newVal))
|
||||
let type = eopts.type;
|
||||
ecinit(newVal, oldVal, owner, instance){
|
||||
let cid = JSON.stringify(newVal.id || newVal.canvasId || (owner && owner.cid) || (instance && instance.cid))
|
||||
console.log('[map-debug] ecinit', { cid, type: newVal.type, hasMapName: !!newVal.mapName, hasGeo: !!newVal.mapGeoJSON });
|
||||
this.rid = cid
|
||||
that[cid] = this.$ownerInstance || instance
|
||||
let eopts = JSON.parse(JSON.stringify(newVal))
|
||||
let type = eopts.type;
|
||||
//载入并覆盖默认配置
|
||||
if (type && cfe.type.includes(type)) {
|
||||
cfe.option[cid] = rddeepCloneAssign({}, cfe[type], eopts);
|
||||
}else{
|
||||
cfe.option[cid] = rddeepCloneAssign({}, eopts);
|
||||
}
|
||||
let newData = eopts.chartData;
|
||||
if(newData){
|
||||
//挂载categories和series
|
||||
if(cfe.option[cid].xAxis && cfe.option[cid].xAxis.type && cfe.option[cid].xAxis.type === 'category'){
|
||||
cfe.option[cid].xAxis.data = newData.categories
|
||||
}
|
||||
let newData = eopts.chartData;
|
||||
if(newData && !eopts.skipChartData){
|
||||
//挂载categories和series
|
||||
if(cfe.option[cid].xAxis && cfe.option[cid].xAxis.type && cfe.option[cid].xAxis.type === 'category'){
|
||||
cfe.option[cid].xAxis.data = newData.categories
|
||||
}
|
||||
if(cfe.option[cid].yAxis && cfe.option[cid].yAxis.type && cfe.option[cid].yAxis.type === 'category'){
|
||||
cfe.option[cid].yAxis.data = newData.categories
|
||||
}
|
||||
@ -1297,14 +1320,26 @@ export default {
|
||||
for (var i = 0; i < newData.series.length; i++) {
|
||||
cfe.option[cid].seriesTemplate = cfe.option[cid].seriesTemplate ? cfe.option[cid].seriesTemplate : {}
|
||||
let Template = rddeepCloneAssign({},cfe.option[cid].seriesTemplate,newData.series[i])
|
||||
cfe.option[cid].series.push(Template)
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window.echarts === 'object') {
|
||||
this.newEChart()
|
||||
}else{
|
||||
const script = document.createElement('script')
|
||||
cfe.option[cid].series.push(Template)
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window.echarts === 'object' && eopts.mapName && eopts.mapGeoJSON) {
|
||||
try {
|
||||
if (!window.echarts.getMap(eopts.mapName)) {
|
||||
window.echarts.registerMap(eopts.mapName, eopts.mapGeoJSON);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('[map-debug] registerMap error', e);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window.echarts === 'object') {
|
||||
console.log('[map-debug] echarts exists, init');
|
||||
this.newEChart()
|
||||
}else{
|
||||
console.log('[map-debug] echarts not found, load script');
|
||||
const script = document.createElement('script')
|
||||
// #ifdef APP-VUE
|
||||
script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js'
|
||||
// #endif
|
||||
@ -1322,10 +1357,21 @@ export default {
|
||||
cfe.instance[this.rid].resize()
|
||||
}
|
||||
},
|
||||
newEChart(){
|
||||
let cid = this.rid
|
||||
if(cfe.instance[cid] === undefined){
|
||||
cfe.instance[cid] = echarts.init(that[cid].$el.children[0])
|
||||
newEChart(){
|
||||
let cid = this.rid
|
||||
console.log('[map-debug] newEChart', { cid });
|
||||
if (cfe.option[cid] && cfe.option[cid].mapName && cfe.option[cid].mapGeoJSON) {
|
||||
try {
|
||||
if (!echarts.getMap(cfe.option[cid].mapName)) {
|
||||
echarts.registerMap(cfe.option[cid].mapName, cfe.option[cid].mapGeoJSON);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('[map-debug] registerMap error in newEChart', e);
|
||||
}
|
||||
}
|
||||
if(cfe.instance[cid] === undefined){
|
||||
cfe.instance[cid] = echarts.init(that[cid].$el.children[0])
|
||||
console.log('[map-debug] echarts init instance created');
|
||||
//ontap开启后才触发click事件
|
||||
if(cfe.option[cid].ontap === true){
|
||||
cfe.instance[cid].on('click', resdata => {
|
||||
@ -1339,14 +1385,15 @@ export default {
|
||||
that[cid].callMethod('emitMsg',{name:"getHighlight", params:{type:"highlight", res:resdata, id:cid}})
|
||||
})
|
||||
}
|
||||
this.updataEChart(cid,cfe.option[cid])
|
||||
}else{
|
||||
this.updataEChart(cid,cfe.option[cid])
|
||||
}
|
||||
},
|
||||
updataEChart(cid,option){
|
||||
//替换option内format属性为formatter的预定义方法
|
||||
option = rdformatterAssign(option,cfe.formatter)
|
||||
this.updataEChart(cid,cfe.option[cid])
|
||||
}else{
|
||||
this.updataEChart(cid,cfe.option[cid])
|
||||
}
|
||||
},
|
||||
updataEChart(cid,option){
|
||||
console.log('[map-debug] updateEChart', { cid, hasSeries: !!option.series, seriesLen: option.series ? option.series.length : 0 });
|
||||
//替换option内format属性为formatter的预定义方法
|
||||
option = rdformatterAssign(option,cfe.formatter)
|
||||
if(option.tooltip){
|
||||
option.tooltip.show = option.tooltipShow?true:false;
|
||||
option.tooltip.position = this.tooltipPosition()
|
||||
|
||||
@ -1,421 +1,424 @@
|
||||
class Calendar {
|
||||
constructor({
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range,
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDateObj(new Date()) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 起始时间
|
||||
this.startDate = startDate
|
||||
// 终止时间
|
||||
this.endDate = endDate
|
||||
// 是否范围选择
|
||||
this.range = range
|
||||
// 多选状态
|
||||
this.cleanMultipleStatus()
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
this.lastHover = false
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
const selectDate = this.getDateObj(date)
|
||||
this.getWeeks(selectDate.fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanMultipleStatus() {
|
||||
this.multipleStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
setStartDate(startDate) {
|
||||
this.startDate = startDate
|
||||
}
|
||||
|
||||
setEndDate(endDate) {
|
||||
this.endDate = endDate
|
||||
}
|
||||
|
||||
getPreMonthObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth - 1)
|
||||
const newMonth = date.getMonth()
|
||||
if (oldMonth !== 0 && newMonth - oldMonth === 0) {
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
getNextMonthObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth + 1)
|
||||
const newMonth = date.getMonth()
|
||||
if (newMonth - oldMonth > 1) {
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定格式Date对象
|
||||
*/
|
||||
getDateObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
return {
|
||||
fullDate: getDate(date),
|
||||
year: date.getFullYear(),
|
||||
month: addZero(date.getMonth() + 1),
|
||||
date: addZero(date.getDate()),
|
||||
day: date.getDay()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取上一个月日期集合
|
||||
*/
|
||||
getPreMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
for (let i = amount - 1; i >= 0; i--) {
|
||||
const month = dateObj.month - 1
|
||||
result.push({
|
||||
date: new Date(dateObj.year, month, -i).getDate(),
|
||||
month,
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取本月日期集合
|
||||
*/
|
||||
getCurrentMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
|
||||
const isToday = fullDate === currentDate
|
||||
// 获取打点信息
|
||||
const info = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(currentDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
disableBefore = dateCompare(this.startDate, currentDate)
|
||||
}
|
||||
|
||||
if (this.endDate) {
|
||||
disableAfter = dateCompare(currentDate, this.endDate)
|
||||
}
|
||||
|
||||
let multiples = this.multipleStatus.data
|
||||
let multiplesStatus = -1
|
||||
if (this.range && multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, currentDate)
|
||||
})
|
||||
}
|
||||
const checked = multiplesStatus !== -1
|
||||
|
||||
result.push({
|
||||
fullDate: currentDate,
|
||||
year: dateObj.year,
|
||||
date: i,
|
||||
multiple: this.range ? checked : false,
|
||||
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
month: dateObj.month,
|
||||
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(
|
||||
currentDate, this.endDate)),
|
||||
isToday,
|
||||
userChecked: false,
|
||||
extraInfo: info
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取下一个月日期集合
|
||||
*/
|
||||
_getNextMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const month = dateObj.month + 1
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
result.push({
|
||||
date: i,
|
||||
month,
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
const res = this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
|
||||
return res ? res : this.getDateObj(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
before = new Date(fixIosDateFormat(before))
|
||||
after = new Date(fixIosDateFormat(after))
|
||||
return before.valueOf() === after.valueOf()
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较真实起始日期
|
||||
*/
|
||||
|
||||
isLogicBefore(currentDate, before, after) {
|
||||
let logicBefore = before
|
||||
if (before && after) {
|
||||
logicBefore = dateCompare(before, after) ? before : after
|
||||
}
|
||||
return this.dateEqual(logicBefore, currentDate)
|
||||
}
|
||||
|
||||
isLogicAfter(currentDate, before, after) {
|
||||
let logicAfter = after
|
||||
if (before && after) {
|
||||
logicAfter = dateCompare(before, after) ? after : before
|
||||
}
|
||||
return this.dateEqual(logicAfter, currentDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
if (!this.range) return
|
||||
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.multipleStatus
|
||||
if (before && after) {
|
||||
if (!this.lastHover) {
|
||||
this.lastHover = true
|
||||
return
|
||||
}
|
||||
this.multipleStatus.before = fullDate
|
||||
this.multipleStatus.after = ''
|
||||
this.multipleStatus.data = []
|
||||
this.multipleStatus.fulldate = ''
|
||||
this.lastHover = false
|
||||
} else {
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
this.multipleStatus.after = undefined;
|
||||
this.lastHover = false
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
||||
.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
|
||||
.before);
|
||||
}
|
||||
this.lastHover = true
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标 hover 更新多选状态
|
||||
*/
|
||||
setHoverMultiple(fullDate) {
|
||||
//抖音小程序点击会触发hover事件,需要避免一下
|
||||
// #ifndef MP-TOUTIAO
|
||||
if (!this.range || this.lastHover) return
|
||||
const {
|
||||
before
|
||||
} = this.multipleStatus
|
||||
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
// #endif
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新默认值多选状态
|
||||
*/
|
||||
setDefaultMultiple(before, after) {
|
||||
this.multipleStatus.before = before
|
||||
this.multipleStatus.after = after
|
||||
if (before && after) {
|
||||
if (dateCompare(before, after)) {
|
||||
this.multipleStatus.data = this.geDateAll(before, after);
|
||||
this.getWeeks(after)
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(after, before);
|
||||
this.getWeeks(before)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
getWeeks(dateData) {
|
||||
const {
|
||||
year,
|
||||
month,
|
||||
} = this.getDateObj(dateData)
|
||||
|
||||
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
|
||||
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const currentMonthDayAmount = new Date(year, month, 0).getDate()
|
||||
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
|
||||
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
|
||||
|
||||
const weeks = new Array(6)
|
||||
for (let i = 0; i < calendarDays.length; i++) {
|
||||
const index = Math.floor(i / 7)
|
||||
if (!weeks[index]) {
|
||||
weeks[index] = new Array(7)
|
||||
}
|
||||
weeks[index][i % 7] = calendarDays[i]
|
||||
}
|
||||
|
||||
this.calendar = calendarDays
|
||||
this.weeks = weeks
|
||||
}
|
||||
}
|
||||
|
||||
function getDateTime(date, hideSecond) {
|
||||
return `${getDate(date)} ${getTime(date, hideSecond)}`
|
||||
}
|
||||
|
||||
function getDate(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
return `${year}-${addZero(month)}-${addZero(day)}`
|
||||
}
|
||||
|
||||
function getTime(date, hideSecond) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
|
||||
}
|
||||
|
||||
function addZero(num) {
|
||||
if (num < 10) {
|
||||
num = `0${num}`
|
||||
}
|
||||
return num
|
||||
}
|
||||
|
||||
function getDefaultSecond(hideSecond) {
|
||||
return hideSecond ? '00:00' : '00:00:00'
|
||||
}
|
||||
|
||||
function dateCompare(startDate, endDate) {
|
||||
startDate = new Date(fixIosDateFormat(startDate))
|
||||
endDate = new Date(fixIosDateFormat(endDate))
|
||||
return startDate <= endDate
|
||||
}
|
||||
|
||||
function checkDate(date) {
|
||||
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
|
||||
return date.match(dateReg)
|
||||
}
|
||||
//ios低版本15及以下,无法匹配 没有 ’秒‘ 时的情况,所以需要在末尾 秒 加上 问号
|
||||
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
|
||||
|
||||
function fixIosDateFormat(value) {
|
||||
if (typeof value === 'string' && dateTimeReg.test(value)) {
|
||||
value = value.replace(/-/g, '/')
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
export {
|
||||
Calendar,
|
||||
getDateTime,
|
||||
getDate,
|
||||
getTime,
|
||||
addZero,
|
||||
getDefaultSecond,
|
||||
dateCompare,
|
||||
checkDate,
|
||||
fixIosDateFormat
|
||||
}
|
||||
class Calendar {
|
||||
constructor({
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range,
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDateObj(new Date()) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 起始时间
|
||||
this.startDate = startDate
|
||||
// 终止时间
|
||||
this.endDate = endDate
|
||||
// 是否范围选择
|
||||
this.range = range
|
||||
// 多选状态
|
||||
this.cleanMultipleStatus()
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
this.lastHover = false
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
const selectDate = this.getDateObj(date)
|
||||
this.getWeeks(selectDate.fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanMultipleStatus() {
|
||||
this.multipleStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
setStartDate(startDate) {
|
||||
this.startDate = startDate
|
||||
}
|
||||
|
||||
setEndDate(endDate) {
|
||||
this.endDate = endDate
|
||||
}
|
||||
|
||||
getPreMonthObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth - 1)
|
||||
const newMonth = date.getMonth()
|
||||
if (oldMonth !== 0 && newMonth - oldMonth === 0) {
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
getNextMonthObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth + 1)
|
||||
const newMonth = date.getMonth()
|
||||
if (newMonth - oldMonth > 1) {
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定格式Date对象
|
||||
*/
|
||||
getDateObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
return {
|
||||
fullDate: getDate(date),
|
||||
year: date.getFullYear(),
|
||||
month: addZero(date.getMonth() + 1),
|
||||
date: addZero(date.getDate()),
|
||||
day: date.getDay()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取上一个月日期集合
|
||||
*/
|
||||
getPreMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
for (let i = amount - 1; i >= 0; i--) {
|
||||
const month = dateObj.month - 1
|
||||
result.push({
|
||||
date: new Date(dateObj.year, month, -i).getDate(),
|
||||
month,
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取本月日期集合
|
||||
*/
|
||||
getCurrentMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
|
||||
const isToday = fullDate === currentDate
|
||||
// 获取打点信息
|
||||
const info = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(currentDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
disableBefore = dateCompare(this.startDate, currentDate)
|
||||
}
|
||||
|
||||
if (this.endDate) {
|
||||
disableAfter = dateCompare(currentDate, this.endDate)
|
||||
}
|
||||
|
||||
let multiples = this.multipleStatus.data
|
||||
let multiplesStatus = -1
|
||||
if (this.range && multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, currentDate)
|
||||
})
|
||||
}
|
||||
const checked = multiplesStatus !== -1
|
||||
|
||||
result.push({
|
||||
fullDate: currentDate,
|
||||
year: dateObj.year,
|
||||
date: i,
|
||||
multiple: this.range ? checked : false,
|
||||
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this
|
||||
.multipleStatus.after),
|
||||
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this
|
||||
.multipleStatus.after),
|
||||
month: dateObj.month,
|
||||
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !
|
||||
dateCompare(
|
||||
currentDate, this.endDate)),
|
||||
isToday,
|
||||
userChecked: false,
|
||||
extraInfo: info
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取下一个月日期集合
|
||||
*/
|
||||
_getNextMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const month = dateObj.month + 1
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
result.push({
|
||||
date: i,
|
||||
month,
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
const res = this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
|
||||
return res ? res : this.getDateObj(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
before = new Date(fixIosDateFormat(before))
|
||||
after = new Date(fixIosDateFormat(after))
|
||||
return before.valueOf() === after.valueOf()
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较真实起始日期
|
||||
*/
|
||||
|
||||
isLogicBefore(currentDate, before, after) {
|
||||
let logicBefore = before
|
||||
if (before && after) {
|
||||
logicBefore = dateCompare(before, after) ? before : after
|
||||
}
|
||||
return this.dateEqual(logicBefore, currentDate)
|
||||
}
|
||||
|
||||
isLogicAfter(currentDate, before, after) {
|
||||
let logicAfter = after
|
||||
if (before && after) {
|
||||
logicAfter = dateCompare(before, after) ? after : before
|
||||
}
|
||||
return this.dateEqual(logicAfter, currentDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
if (!this.range) return
|
||||
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.multipleStatus
|
||||
if (before && after) {
|
||||
if (!this.lastHover) {
|
||||
this.lastHover = true
|
||||
return
|
||||
}
|
||||
this.multipleStatus.before = fullDate
|
||||
this.multipleStatus.after = ''
|
||||
this.multipleStatus.data = []
|
||||
this.multipleStatus.fulldate = ''
|
||||
this.lastHover = false
|
||||
} else {
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
this.multipleStatus.after = undefined;
|
||||
this.lastHover = false
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
||||
.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
|
||||
.before);
|
||||
}
|
||||
this.lastHover = true
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标 hover 更新多选状态
|
||||
*/
|
||||
setHoverMultiple(fullDate) {
|
||||
//抖音小程序点击会触发hover事件,需要避免一下
|
||||
// #ifndef MP-TOUTIAO
|
||||
if (!this.range || this.lastHover) return
|
||||
const {
|
||||
before
|
||||
} = this.multipleStatus
|
||||
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
// #endif
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新默认值多选状态
|
||||
*/
|
||||
setDefaultMultiple(before, after) {
|
||||
this.multipleStatus.before = before
|
||||
this.multipleStatus.after = after
|
||||
if (before && after) {
|
||||
if (dateCompare(before, after)) {
|
||||
this.multipleStatus.data = this.geDateAll(before, after);
|
||||
this.getWeeks(after)
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(after, before);
|
||||
this.getWeeks(before)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
getWeeks(dateData) {
|
||||
const {
|
||||
year,
|
||||
month,
|
||||
} = this.getDateObj(dateData)
|
||||
|
||||
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
|
||||
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const currentMonthDayAmount = new Date(year, month, 0).getDate()
|
||||
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
|
||||
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
|
||||
|
||||
const weeks = new Array(6)
|
||||
for (let i = 0; i < calendarDays.length; i++) {
|
||||
const index = Math.floor(i / 7)
|
||||
if (!weeks[index]) {
|
||||
weeks[index] = new Array(7)
|
||||
}
|
||||
weeks[index][i % 7] = calendarDays[i]
|
||||
}
|
||||
|
||||
this.calendar = calendarDays
|
||||
this.weeks = weeks
|
||||
}
|
||||
}
|
||||
|
||||
function getDateTime(date, hideSecond) {
|
||||
return `${getDate(date)} ${getTime(date, hideSecond)}`
|
||||
}
|
||||
|
||||
function getDate(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
return `${year}-${addZero(month)}-${addZero(day)}`
|
||||
}
|
||||
|
||||
function getTime(date, hideSecond) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
|
||||
}
|
||||
|
||||
function addZero(num) {
|
||||
if (num < 10) {
|
||||
num = `0${num}`
|
||||
}
|
||||
return num
|
||||
}
|
||||
|
||||
function getDefaultSecond(hideSecond) {
|
||||
return hideSecond ? '00:00' : '00:00:00'
|
||||
}
|
||||
|
||||
function dateCompare(startDate, endDate) {
|
||||
startDate = new Date(fixIosDateFormat(startDate && typeof startDate === 'string' ? startDate.trim() : startDate))
|
||||
endDate = new Date(fixIosDateFormat(endDate && typeof endDate === 'string' ? endDate.trim() : endDate))
|
||||
return startDate <= endDate
|
||||
}
|
||||
|
||||
function checkDate(date) {
|
||||
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
|
||||
return date.match(dateReg)
|
||||
}
|
||||
//ios低版本15及以下,无法匹配 没有 ’秒‘ 时的情况,所以需要在末尾 秒 加上 问号
|
||||
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
|
||||
|
||||
function fixIosDateFormat(value) {
|
||||
if (typeof value === 'string' && dateTimeReg.test(value)) {
|
||||
value = value.replace(/-/g, '/')
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
export {
|
||||
Calendar,
|
||||
getDateTime,
|
||||
getDate,
|
||||
getTime,
|
||||
addZero,
|
||||
getDefaultSecond,
|
||||
dateCompare,
|
||||
checkDate,
|
||||
fixIosDateFormat
|
||||
}
|
||||
@ -3,7 +3,8 @@ const constant = {
|
||||
id: 'user_id',
|
||||
name: 'user_name',
|
||||
roles: 'user_roles',
|
||||
permissions: 'user_permissions'
|
||||
permissions: 'user_permissions',
|
||||
currentSiteId: 'current_site_id'
|
||||
}
|
||||
|
||||
export default constant
|
||||
|
||||
@ -21,16 +21,25 @@ const request = config => {
|
||||
config.url = url
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
const requestUrl = config.baseUrl || baseUrl + config.url
|
||||
const requestMethod = (config.method || 'get').toUpperCase()
|
||||
uni.request({
|
||||
method: config.method || 'get',
|
||||
timeout: config.timeout || timeout,
|
||||
url: config.baseUrl || baseUrl + config.url,
|
||||
url: requestUrl,
|
||||
data: config.data,
|
||||
header: config.header,
|
||||
dataType: 'json'
|
||||
}).then(response => {
|
||||
let [error, res] = response
|
||||
if (error) {
|
||||
const errorType = error?.errMsg || error?.message || 'UNKNOWN_ERROR'
|
||||
console.error('[request:error]', {
|
||||
url: requestUrl,
|
||||
method: requestMethod,
|
||||
errorType,
|
||||
rawError: error
|
||||
})
|
||||
toast('后端接口连接异常')
|
||||
reject('后端接口连接异常')
|
||||
return
|
||||
@ -57,6 +66,15 @@ const request = config => {
|
||||
})
|
||||
.catch(error => {
|
||||
let { message } = error
|
||||
const rawMessage = message || ''
|
||||
let errorType = 'UNKNOWN_ERROR'
|
||||
if (rawMessage === 'Network Error') {
|
||||
errorType = 'NETWORK_ERROR'
|
||||
} else if (rawMessage.includes('timeout')) {
|
||||
errorType = 'TIMEOUT'
|
||||
} else if (rawMessage.includes('Request failed with status code')) {
|
||||
errorType = 'HTTP_STATUS_ERROR'
|
||||
}
|
||||
if (message === 'Network Error') {
|
||||
message = '后端接口连接异常'
|
||||
} else if (message.includes('timeout')) {
|
||||
@ -64,6 +82,13 @@ const request = config => {
|
||||
} else if (message.includes('Request failed with status code')) {
|
||||
message = '系统接口' + message.substr(message.length - 3) + '异常'
|
||||
}
|
||||
console.error('[request:catch]', {
|
||||
url: requestUrl,
|
||||
method: requestMethod,
|
||||
errorType,
|
||||
message: rawMessage,
|
||||
rawError: error
|
||||
})
|
||||
toast(message)
|
||||
reject(error)
|
||||
})
|
||||
|
||||