Compare commits
44 Commits
f2a1fb263e
...
develop
| Author | SHA1 | Date | |
|---|---|---|---|
| 4caf7ff1ab | |||
| ac7dd9dd30 | |||
| 69e199e9cc | |||
| 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 | |||
| ce189108ed | |||
| bc18edead5 | |||
| 4a2d3de48b | |||
| 2836fe4892 | |||
| 8722d1317f | |||
| dc4140b366 | |||
| ce9b4a4ca4 | |||
| 2b4022d1d0 | |||
| 78334cfa6a | |||
| c3820a5805 | |||
| 55aad68255 | |||
| da8ffab673 | |||
| 5d1878c4f2 | |||
| fb3349cfe9 | |||
| 543b6f10fd | |||
| cbef5afcb8 |
3
App.vue
@ -29,5 +29,6 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '@/static/scss/index.scss'
|
@import '@/static/scss/index.scss';
|
||||||
|
@import '@/uni_modules/uni-scss/index.scss';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
178
api/ems/site.js
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
export function getAllSites() {
|
||||||
|
return request({
|
||||||
|
url: '/ems/homePage/getAllSites',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取BMS总览数据
|
||||||
|
export function getBMSOverView(data) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteMonitor/getBMSOverView`, //?siteId=${siteId}
|
||||||
|
method: 'get',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取BMS电池簇总览数据
|
||||||
|
export function getBMSBatteryCluster(data) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteMonitor/getBMSBatteryCluster`, //?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) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteMonitor/runningHeadInfo`, //?siteId=${siteId}
|
||||||
|
method: 'get',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取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 getAmmeterData(params) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/statsReport/getAmmeterData`,
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 一周冲放曲线
|
||||||
|
export function getSevenChargeData(data) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteMap/getSevenChargeData`, //?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
|
||||||
|
method: 'get',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//单站监控 首页 当日功率曲线
|
||||||
|
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
|
||||||
|
})
|
||||||
|
}
|
||||||
37
api/ems/ticket.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询工单主列表
|
||||||
|
export function listTicket(url) {
|
||||||
|
return request({
|
||||||
|
url,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询工单主详细
|
||||||
|
export function getTicket(id) {
|
||||||
|
return request({
|
||||||
|
url: '/ticket/' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function uploadAvatar(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/user/profile/avatar',
|
||||||
|
// url:'/common/upload',
|
||||||
|
method: 'post',
|
||||||
|
// header: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||||
|
header: { 'Content-Type': 'multipart/form-data' },
|
||||||
|
data: JSON.stringify(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改工单
|
||||||
|
export function updateTicket(data) {
|
||||||
|
return request({
|
||||||
|
url: '/ticket',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
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>
|
||||||
168
components/SiteSwitchHeader/index.vue
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
<template>
|
||||||
|
<view class="site-switch-header">
|
||||||
|
<view class="selector-row">
|
||||||
|
<uni-data-picker
|
||||||
|
placeholder="请选择"
|
||||||
|
popup-title="业态选择"
|
||||||
|
:step-searh="true"
|
||||||
|
:value="siteId"
|
||||||
|
:clear-icon="false"
|
||||||
|
:localdata="siteTypeOptions"
|
||||||
|
:ellipsis="false"
|
||||||
|
@change="handleChange"
|
||||||
|
/>
|
||||||
|
<view class="site-count-badge">{{ displaySiteCount }}</view>
|
||||||
|
</view>
|
||||||
|
<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: '-'
|
||||||
|
},
|
||||||
|
siteCount: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
displaySiteCount() {
|
||||||
|
const count = Number(this.siteCount || 0)
|
||||||
|
if (!Number.isFinite(count) || count <= 0) {
|
||||||
|
return '0'
|
||||||
|
}
|
||||||
|
return count > 99 ? '99+' : String(count)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
|
||||||
|
.selector-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-count-badge {
|
||||||
|
min-width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
background: #ff4d4f;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 6rpx 14rpx rgba(255, 77, 79, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
14
config.js
@ -1,15 +1,21 @@
|
|||||||
// 应用全局配置
|
// 应用全局配置
|
||||||
module.exports = {
|
module.exports = {
|
||||||
baseUrl: 'http://110.40.171.179:8089/dev-api',
|
// todo 打包项目时切换baseUrl
|
||||||
// baseUrl: 'http://localhost:8080',
|
// baseUrl: 'http://localhost:8089',
|
||||||
|
// 测试环境
|
||||||
|
// baseUrl: 'http://110.40.171.179:8089',
|
||||||
|
// 生产环境
|
||||||
|
//baseUrl: 'http://1.15.120.242:8089',
|
||||||
|
baseUrl: 'http://111.229.210.50:8089',
|
||||||
|
|
||||||
// 应用信息
|
// 应用信息
|
||||||
appInfo: {
|
appInfo: {
|
||||||
// 应用名称
|
// 应用名称
|
||||||
name: "xzzn-app",
|
name: "上动EMS",
|
||||||
// 应用版本
|
// 应用版本
|
||||||
version: "1.2.0",
|
version: "1.2.0",
|
||||||
// 应用logo
|
// 应用logo
|
||||||
logo: "/static/logo.png",
|
logo: "/static/logo-trans.png",
|
||||||
// 官方网站
|
// 官方网站
|
||||||
site_url: "http://xzzn.vip",
|
site_url: "http://xzzn.vip",
|
||||||
// 政策协议
|
// 政策协议
|
||||||
|
|||||||
1
data/ems/china.json
Normal file
10
main.js
@ -2,15 +2,19 @@ import Vue from 'vue'
|
|||||||
import App from './App'
|
import App from './App'
|
||||||
import store from './store' // store
|
import store from './store' // store
|
||||||
import plugins from './plugins' // plugins
|
import plugins from './plugins' // plugins
|
||||||
|
import {
|
||||||
|
formatNumber
|
||||||
|
} from './utils/filters.js' //数据过滤
|
||||||
import './permission' // permission
|
import './permission' // permission
|
||||||
import { getDicts } from "@/api/system/dict/data"
|
import {
|
||||||
|
getDicts
|
||||||
|
} from "@/api/system/dict/data"
|
||||||
|
|
||||||
Vue.use(plugins)
|
Vue.use(plugins)
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
Vue.prototype.$store = store
|
Vue.prototype.$store = store
|
||||||
Vue.prototype.getDicts = getDicts
|
Vue.prototype.getDicts = getDicts
|
||||||
|
Vue.filter('formatNumber', formatNumber)
|
||||||
App.mpType = 'app'
|
App.mpType = 'app'
|
||||||
|
|
||||||
const app = new Vue({
|
const app = new Vue({
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name" : "EMS移动端",
|
"name" : "上动EMS",
|
||||||
"appid" : "__UNI__25A9D80",
|
"appid" : "__UNI__5FBB073",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.2.0",
|
"versionName" : "1.2.0",
|
||||||
"versionCode" : "100",
|
"versionCode" : "100",
|
||||||
@ -8,6 +8,12 @@
|
|||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
"usingComponents" : true,
|
"usingComponents" : true,
|
||||||
"nvueCompiler" : "uni-app",
|
"nvueCompiler" : "uni-app",
|
||||||
|
"safearea" : {
|
||||||
|
"background" : "#FFFFFF",
|
||||||
|
"top" : {
|
||||||
|
"offset" : "auto"
|
||||||
|
}
|
||||||
|
},
|
||||||
"splashscreen" : {
|
"splashscreen" : {
|
||||||
"alwaysShowBeforeRender" : true,
|
"alwaysShowBeforeRender" : true,
|
||||||
"waiting" : true,
|
"waiting" : true,
|
||||||
@ -35,8 +41,24 @@
|
|||||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"ios" : {},
|
"ios" : {
|
||||||
"sdkConfigs" : {}
|
"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" : {},
|
"quickapp" : {},
|
||||||
@ -60,10 +82,12 @@
|
|||||||
"port" : 9090,
|
"port" : 9090,
|
||||||
"https" : false
|
"https" : false
|
||||||
},
|
},
|
||||||
"title" : "EMS-App",
|
"title" : "上动EMS",
|
||||||
"router" : {
|
"router" : {
|
||||||
"mode" : "hash",
|
"mode" : "hash",
|
||||||
"base" : "./"
|
"base" : "./"
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
"locale" : "zh-Hans",
|
||||||
|
"fallbackLocale" : "zh-Hans"
|
||||||
}
|
}
|
||||||
|
|||||||
72
pages.json
@ -12,8 +12,7 @@
|
|||||||
}, {
|
}, {
|
||||||
"path": "pages/index",
|
"path": "pages/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "若依移动端框架",
|
"navigationBarTitleText": "首页"
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "pages/work/index",
|
"path": "pages/work/index",
|
||||||
@ -70,7 +69,66 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "浏览文本"
|
"navigationBarTitleText": "浏览文本"
|
||||||
}
|
}
|
||||||
}],
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/ticket/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "工单列表",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"onReachBottomDistance": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/ticket/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "工单详情"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/work/bmszl/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "BMS总览"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/work/bmsdcc/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "BMS电池簇"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/work/db/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "电表"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/work/pcs/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "PCS"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/work/yl/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "冷却"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/work/dtdc/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "单体电池",
|
||||||
|
"onReachBottomDistance": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/work/report/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "报表"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"color": "#000000",
|
"color": "#000000",
|
||||||
"selectedColor": "#000000",
|
"selectedColor": "#000000",
|
||||||
@ -86,13 +144,17 @@
|
|||||||
"iconPath": "static/images/tabbar/work.png",
|
"iconPath": "static/images/tabbar/work.png",
|
||||||
"selectedIconPath": "static/images/tabbar/work_.png",
|
"selectedIconPath": "static/images/tabbar/work_.png",
|
||||||
"text": "工作台"
|
"text": "工作台"
|
||||||
|
}, {
|
||||||
|
"pagePath": "pages/ticket/list",
|
||||||
|
"iconPath": "static/images/tabbar/ticket.png",
|
||||||
|
"selectedIconPath": "static/images/tabbar/ticket_.png",
|
||||||
|
"text": "工单"
|
||||||
}, {
|
}, {
|
||||||
"pagePath": "pages/mine/index",
|
"pagePath": "pages/mine/index",
|
||||||
"iconPath": "static/images/tabbar/mine.png",
|
"iconPath": "static/images/tabbar/mine.png",
|
||||||
"selectedIconPath": "static/images/tabbar/mine_.png",
|
"selectedIconPath": "static/images/tabbar/mine_.png",
|
||||||
"text": "我的"
|
"text": "我的"
|
||||||
}
|
}]
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
|
|||||||
511
pages/index.vue
@ -1,36 +1,509 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="home-container">
|
||||||
<image class="logo" src="@/static/logo.png"></image>
|
<site-switch-header :site-id="siteId" :site-type-options="siteTypeOptions" :site-address="baseInfo.siteAddress"
|
||||||
<view class="text-area">
|
:running-time="baseInfo.runningTime" :site-count="siteOptions.length" @change="selectedSite" />
|
||||||
<text class="title">Hello EMS</text>
|
|
||||||
|
<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>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<script>
|
||||||
.content {
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
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;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
color: #8a8f98;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.total-card {
|
||||||
height: 200rpx;
|
margin-top: 30rpx;
|
||||||
width: 200rpx;
|
border-radius: 16rpx;
|
||||||
margin-top: 200rpx;
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
margin-left: auto;
|
padding: 20rpx;
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-area {
|
.total-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
}
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 36rpx;
|
font-weight: 700;
|
||||||
color: #8f8f94;
|
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>
|
</style>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<view class="logo-content align-center justify-center flex">
|
<view class="logo-content align-center justify-center flex">
|
||||||
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
||||||
</image>
|
</image>
|
||||||
<text class="title">EMS移动端登录</text>
|
<text class="title">上动EMS登录</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="login-form-content">
|
<view class="login-form-content">
|
||||||
<view class="input-item flex align-center">
|
<view class="input-item flex align-center">
|
||||||
@ -39,8 +39,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getCodeImg } from '@/api/login'
|
import {
|
||||||
import { getToken } from '@/utils/auth'
|
getCodeImg
|
||||||
|
} from '@/api/login'
|
||||||
|
import {
|
||||||
|
getToken
|
||||||
|
} from '@/utils/auth'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -51,8 +55,8 @@
|
|||||||
register: false,
|
register: false,
|
||||||
globalConfig: getApp().globalData.config,
|
globalConfig: getApp().globalData.config,
|
||||||
loginForm: {
|
loginForm: {
|
||||||
username: "admin",
|
username: "",
|
||||||
password: "admin123",
|
password: "",
|
||||||
code: "",
|
code: "",
|
||||||
uuid: ""
|
uuid: ""
|
||||||
}
|
}
|
||||||
@ -206,5 +210,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="about-container">
|
<view class="about-container">
|
||||||
<view class="header-section text-center">
|
<view class="header-section text-center">
|
||||||
<image style="width: 150rpx;height: 150rpx;" src="/static/logo200.png" mode="widthFix">
|
<image style="width: 150rpx;height: 150rpx;" src="/static/logo-trans.png" mode="widthFix">
|
||||||
</image>
|
</image>
|
||||||
<uni-title type="h2" title="EMS移动端"></uni-title>
|
<uni-title type="h2" title="EMS移动端"></uni-title>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@ -123,6 +123,9 @@
|
|||||||
},
|
},
|
||||||
loadImage: function () {
|
loadImage: function () {
|
||||||
var _this = this
|
var _this = this
|
||||||
|
uni.showLoading({
|
||||||
|
title: '图片加载中...',
|
||||||
|
})
|
||||||
|
|
||||||
uni.getImageInfo({
|
uni.getImageInfo({
|
||||||
src: _this.imageSrc,
|
src: _this.imageSrc,
|
||||||
@ -188,7 +191,14 @@
|
|||||||
isShowImg: true
|
isShowImg: true
|
||||||
})
|
})
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
}
|
},
|
||||||
|
fail() {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({
|
||||||
|
title: '图片加载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 拖动时候触发的touchStart事件
|
// 拖动时候触发的touchStart事件
|
||||||
|
|||||||
@ -7,7 +7,8 @@
|
|||||||
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
||||||
<view class="iconfont icon-people text-gray icon"></view>
|
<view class="iconfont icon-people text-gray icon"></view>
|
||||||
</view>
|
</view>
|
||||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
|
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
|
||||||
|
mode="widthFix">
|
||||||
</image>
|
</image>
|
||||||
<view v-if="!name" @click="handleToLogin" class="login-tip">
|
<view v-if="!name" @click="handleToLogin" class="login-tip">
|
||||||
点击登录
|
点击登录
|
||||||
@ -27,11 +28,11 @@
|
|||||||
|
|
||||||
<view class="content-section">
|
<view class="content-section">
|
||||||
<view class="mine-actions grid col-4 text-center">
|
<view class="mine-actions grid col-4 text-center">
|
||||||
<view class="action-item" @click="handleJiaoLiuQun">
|
<view class="action-item" @click="handleToEditInfo">
|
||||||
<view class="iconfont icon-friendfill text-pink icon"></view>
|
<view class="iconfont icon-friendfill text-pink icon"></view>
|
||||||
<text class="text">交流群</text>
|
<text class="text">个人信息</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="action-item" @click="handleBuilding">
|
<!-- <view class="action-item" @click="handleBuilding">
|
||||||
<view class="iconfont icon-service text-blue icon"></view>
|
<view class="iconfont icon-service text-blue icon"></view>
|
||||||
<text class="text">在线客服</text>
|
<text class="text">在线客服</text>
|
||||||
</view>
|
</view>
|
||||||
@ -42,7 +43,7 @@
|
|||||||
<view class="action-item" @click="handleBuilding">
|
<view class="action-item" @click="handleBuilding">
|
||||||
<view class="iconfont icon-dianzan text-green icon"></view>
|
<view class="iconfont icon-dianzan text-green icon"></view>
|
||||||
<text class="text">点赞我们</text>
|
<text class="text">点赞我们</text>
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="menu-list">
|
<view class="menu-list">
|
||||||
@ -52,7 +53,7 @@
|
|||||||
<view>编辑资料</view>
|
<view>编辑资料</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="list-cell list-cell-arrow" @click="handleHelp">
|
<!-- <view class="list-cell list-cell-arrow" @click="handleHelp">
|
||||||
<view class="menu-item-box">
|
<view class="menu-item-box">
|
||||||
<view class="iconfont icon-help menu-icon"></view>
|
<view class="iconfont icon-help menu-icon"></view>
|
||||||
<view>常见问题</view>
|
<view>常见问题</view>
|
||||||
@ -63,7 +64,7 @@
|
|||||||
<view class="iconfont icon-aixin menu-icon"></view>
|
<view class="iconfont icon-aixin menu-icon"></view>
|
||||||
<view>关于我们</view>
|
<view>关于我们</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
||||||
<view class="menu-item-box">
|
<view class="menu-item-box">
|
||||||
<view class="iconfont icon-setting menu-icon"></view>
|
<view class="iconfont icon-setting menu-icon"></view>
|
||||||
|
|||||||
214
pages/ticket/index.vue
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">工单号</view>
|
||||||
|
<view class="info">{{info.ticketNo || ''}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">工单标题</view>
|
||||||
|
<view class="info">{{info.title || ''}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">提交用户</view>
|
||||||
|
<view class="info">{{info.userName || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">问题描述</view>
|
||||||
|
<view class="info">{{info.content || ''}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">工单状态</view>
|
||||||
|
<view class="info">{{ticketStatusOptions[info.status] || ''}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">创建时间</view>
|
||||||
|
<view class="info">{{info.createTime || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">预期完成时间</view>
|
||||||
|
<view class="info">{{info.expectedCompleteTime || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">处理人</view>
|
||||||
|
<view class="info">{{info.workName || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-lists">
|
||||||
|
<view class="title">上传图片</view>
|
||||||
|
<view class="info">
|
||||||
|
<uni-file-picker v-model="imgUrl" :auto-upload="false" :limit="1" file-mediatype="image"
|
||||||
|
file-extname="png,jpg" :image-styles="imageStyles" @select="select">
|
||||||
|
</uni-file-picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<button class="submit-button" type="primary" style="margin-top:30px;" :loading="loading"
|
||||||
|
@click="submit">提交</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from '@/utils/request'
|
||||||
|
import {
|
||||||
|
getToken
|
||||||
|
} from '@/utils/auth'
|
||||||
|
import config from '@/config'
|
||||||
|
import {
|
||||||
|
mapState
|
||||||
|
} from 'vuex'
|
||||||
|
import {
|
||||||
|
getTicket,
|
||||||
|
updateTicket
|
||||||
|
} from '@/api/ems/ticket'
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
ticketStatusOptions: (state) => state.ems.ticketStatusOptions
|
||||||
|
})
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imageStyles: {
|
||||||
|
width: 150,
|
||||||
|
height: 100,
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
info: {},
|
||||||
|
imgUrl: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submit() {
|
||||||
|
if (this.imgUrl.length === 0 || this.imgUrl[0].url === '') {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '请上传图片',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
const images = this.imgUrl.map(item => item.url)
|
||||||
|
updateTicket({
|
||||||
|
id: this.info.id,
|
||||||
|
images: JSON.stringify(images)
|
||||||
|
}).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '提交成功',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/ticket/list'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).finally(() => this.loading = false)
|
||||||
|
|
||||||
|
},
|
||||||
|
// 获取上传状态
|
||||||
|
select(e) {
|
||||||
|
uni.uploadFile({
|
||||||
|
url: config.baseUrl + "/common/upload",
|
||||||
|
header: {
|
||||||
|
Authorization: "Bearer " + getToken(),
|
||||||
|
},
|
||||||
|
filePath: e.tempFilePaths[0],
|
||||||
|
name: 'file', //对应接口的名称
|
||||||
|
complete: (res) => {
|
||||||
|
console.log('返回数据', res);
|
||||||
|
if (res?.statusCode === 200 && res?.data) {
|
||||||
|
//图片上传成功
|
||||||
|
if (res?.data) {
|
||||||
|
const data = JSON.parse(res.data)
|
||||||
|
this.imgUrl = [{
|
||||||
|
name: data.newFileName || '',
|
||||||
|
extname: data.originalFilename || '',
|
||||||
|
url: data.url || ''
|
||||||
|
}]
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '图片上传失败',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
this.imgUrl = []
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '图片上传失败',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
uni.showLoading()
|
||||||
|
getTicket(options.id).then(response => {
|
||||||
|
this.info = JSON.parse(JSON.stringify(response?.data || {}))
|
||||||
|
const {
|
||||||
|
images = ''
|
||||||
|
} = this.info
|
||||||
|
this.info.images = JSON.parse(images)
|
||||||
|
const imgList = this.info.images || []
|
||||||
|
if (imgList.length > 0) {
|
||||||
|
this.imgUrl = imgList.map(item => {
|
||||||
|
return {
|
||||||
|
name: item || '',
|
||||||
|
extname: item || '',
|
||||||
|
url: item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
uni.hideLoading()
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 40rpx;
|
||||||
|
color: #19242d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-lists {
|
||||||
|
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 {
|
||||||
|
border-radius: 14rpx 14rpx 0 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
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: 20rpx 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
308
pages/work/bmsdcc/index.vue
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
<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+'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 work-status-color">{{CLUSTERWorkStatusOptions[item.workStatus] || '-'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">与PCS通信</view>
|
||||||
|
<text
|
||||||
|
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">与EMS通信</view>
|
||||||
|
<text
|
||||||
|
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-group>
|
||||||
|
<!-- 设备数据 -->
|
||||||
|
<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-col>
|
||||||
|
</uni-row>
|
||||||
|
</uni-group>
|
||||||
|
</view>
|
||||||
|
</uni-collapse-item>
|
||||||
|
</uni-collapse>
|
||||||
|
<view class="no-data" v-else>
|
||||||
|
暂无数据
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
getProjectDisplayData,
|
||||||
|
getStackNameList,
|
||||||
|
getClusterNameList
|
||||||
|
} from '@/api/ems/site.js'
|
||||||
|
import {
|
||||||
|
mapState
|
||||||
|
} from 'vuex'
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
CLUSTERWorkStatusOptions: (state) =>
|
||||||
|
state.ems.CLUSTERWorkStatusOptions,
|
||||||
|
communicationStatusOptions: (state) =>
|
||||||
|
state.ems.communicationStatusOptions,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
displayData: [],
|
||||||
|
clusterDeviceList: [],
|
||||||
|
list: [],
|
||||||
|
siteId: '',
|
||||||
|
infoData: [{
|
||||||
|
label: '簇电压',
|
||||||
|
attr: 'clusterVoltage',
|
||||||
|
unit: 'V',
|
||||||
|
pointName: '簇电压'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '可充电量',
|
||||||
|
attr: 'chargeableCapacity',
|
||||||
|
unit: 'kWh',
|
||||||
|
pointName: '可充电量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '累计充电量',
|
||||||
|
attr: 'totalChargedCapacity',
|
||||||
|
unit: 'kWh',
|
||||||
|
pointName: '累计充电量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '簇电流',
|
||||||
|
attr: 'clusterCurrent',
|
||||||
|
unit: 'A',
|
||||||
|
pointName: '簇电流'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '可放电量',
|
||||||
|
attr: 'dischargeableCapacity',
|
||||||
|
unit: 'kWh',
|
||||||
|
pointName: '可放电量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '累计放电量',
|
||||||
|
attr: 'totalDischargedCapacity',
|
||||||
|
unit: 'kWh',
|
||||||
|
pointName: '累计放电量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'SOH',
|
||||||
|
attr: 'soh',
|
||||||
|
unit: '%',
|
||||||
|
pointName: 'SOH'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '平均温度',
|
||||||
|
attr: 'averageTemperature',
|
||||||
|
unit: '℃',
|
||||||
|
pointName: '平均温度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '绝缘电阻',
|
||||||
|
attr: 'insulationResistance',
|
||||||
|
unit: 'Ω',
|
||||||
|
pointName: '绝缘电阻'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '当前SOC',
|
||||||
|
attr: 'currentSoc',
|
||||||
|
unit: '%',
|
||||||
|
pointName: '当前SOC'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
258
pages/work/bmszl/index.vue
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
<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+'bmszl'" :open="index===0"
|
||||||
|
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 work-status-color">{{STACKWorkStatusOptions[item.workStatus] || '-'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">与PCS通信</view>
|
||||||
|
<text
|
||||||
|
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">与EMS通信</view>
|
||||||
|
<text
|
||||||
|
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-group>
|
||||||
|
<!-- 设备数据 -->
|
||||||
|
<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-col>
|
||||||
|
</uni-row>
|
||||||
|
</uni-group>
|
||||||
|
</view>
|
||||||
|
</uni-collapse-item>
|
||||||
|
</uni-collapse>
|
||||||
|
<view class="no-data" v-else>
|
||||||
|
暂无数据
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
getProjectDisplayData,
|
||||||
|
getStackNameList
|
||||||
|
} from '@/api/ems/site.js'
|
||||||
|
import {
|
||||||
|
mapState
|
||||||
|
} from 'vuex'
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
STACKWorkStatusOptions: (state) =>
|
||||||
|
state.ems.STACKWorkStatusOptions,
|
||||||
|
communicationStatusOptions: (state) =>
|
||||||
|
state.ems.communicationStatusOptions,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
displayData: [],
|
||||||
|
stackDeviceList: [],
|
||||||
|
list: [],
|
||||||
|
siteId: '',
|
||||||
|
infoData: [{
|
||||||
|
label: '电池堆总电压',
|
||||||
|
attr: 'stackVoltage',
|
||||||
|
unit: 'V',
|
||||||
|
pointName: '电池堆电压'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '可充电量',
|
||||||
|
attr: 'availableChargeCapacity',
|
||||||
|
unit: 'kWh',
|
||||||
|
pointName: '可充电量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '累计充电量',
|
||||||
|
attr: 'totalChargeCapacity',
|
||||||
|
unit: 'kWh',
|
||||||
|
pointName: '累计充电量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '电池堆总电流',
|
||||||
|
attr: 'stackCurrent',
|
||||||
|
unit: 'A',
|
||||||
|
pointName: '电池堆总电流'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '可放电量',
|
||||||
|
attr: 'availableDischargeCapacity',
|
||||||
|
unit: 'kWh',
|
||||||
|
pointName: '可放电量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '累计放电量',
|
||||||
|
attr: 'totalDischargeCapacity',
|
||||||
|
unit: 'kWh',
|
||||||
|
pointName: '累计放电量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'SOH',
|
||||||
|
attr: 'stackSoh',
|
||||||
|
unit: '%',
|
||||||
|
pointName: 'SOH'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '平均温度',
|
||||||
|
attr: 'operatingTemp',
|
||||||
|
unit: '℃',
|
||||||
|
pointName: '平均温度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '绝缘电阻',
|
||||||
|
attr: 'stackInsulationResistance',
|
||||||
|
unit: 'Ω',
|
||||||
|
pointName: '绝缘电阻'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '当前SOC',
|
||||||
|
attr: 'stackSoc',
|
||||||
|
unit: '%',
|
||||||
|
pointName: '当前SOC'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
231
pages/work/db/index.vue
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
<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+'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-wrapper'>
|
||||||
|
<view class="top">
|
||||||
|
<view class="status">{{communicationStatusOptions[item.emsCommunicationStatus] || '暂无数据'}}
|
||||||
|
</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="(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 {
|
||||||
|
getProjectDisplayData,
|
||||||
|
getDeviceList
|
||||||
|
} from '@/api/ems/site.js'
|
||||||
|
import {
|
||||||
|
mapState
|
||||||
|
} from 'vuex'
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
communicationStatusOptions: (state) =>
|
||||||
|
state.ems.communicationStatusOptions,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
.unknow-bd-device {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
517
pages/work/dtdc/index.vue
Normal file
@ -0,0 +1,517 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="search-icon" @click="openSearch">
|
||||||
|
<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>
|
||||||
|
<uni-list v-else>
|
||||||
|
<uni-list-item v-for="(item,index) in list" :key="index+'dtdc'">
|
||||||
|
<template v-slot:header>
|
||||||
|
<view class="list-header">
|
||||||
|
单体编号:{{item.deviceId}}
|
||||||
|
<button type="primary" size="mini" class="charts-btn" @click="toDetail(item)">图表</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body>
|
||||||
|
<view class="list-body">
|
||||||
|
<uni-row>
|
||||||
|
<uni-col :span="8">
|
||||||
|
<view>簇号</view>
|
||||||
|
</uni-col>
|
||||||
|
<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="16">
|
||||||
|
<view class="right color">
|
||||||
|
<text @click="toDetail(item,'voltage')">{{item.voltage | formatNumber}}</text>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
</uni-row>
|
||||||
|
<uni-row>
|
||||||
|
<uni-col :span="8">
|
||||||
|
<view>温度(℃)</view>
|
||||||
|
</uni-col>
|
||||||
|
<uni-col :span="16">
|
||||||
|
<view class="right color">
|
||||||
|
<text
|
||||||
|
@click="toDetail(item,'temperature')">{{item.temperature | formatNumber}}</text>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
</uni-row>
|
||||||
|
<uni-row>
|
||||||
|
<uni-col :span="8">
|
||||||
|
<view>SOC(%)</view>
|
||||||
|
</uni-col>
|
||||||
|
<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="16">
|
||||||
|
<view class="right color">
|
||||||
|
<text @click="toDetail(item,'soh')">{{item.soh | formatNumber}}</text>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
</uni-row>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
</view>
|
||||||
|
<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">
|
||||||
|
<uni-forms-item label="电池堆">
|
||||||
|
<uni-data-select :clear="false" v-model="search.stackId" :localdata="stackOptions"
|
||||||
|
@change="changeStackId"></uni-data-select>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="电池簇">
|
||||||
|
<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>
|
||||||
|
<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DateRangeSelect from './../DateRangeSelect.vue'
|
||||||
|
import {
|
||||||
|
getStackNameList,
|
||||||
|
getClusterNameList,
|
||||||
|
getClusterDataInfoList,
|
||||||
|
getSingleBatteryData
|
||||||
|
} from '@/api/ems/site.js'
|
||||||
|
import {
|
||||||
|
mapState
|
||||||
|
} from 'vuex'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
DateRangeSelect
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 0,
|
||||||
|
stackOptions: [],
|
||||||
|
clusterOptions: [],
|
||||||
|
search: {
|
||||||
|
stackId: '',
|
||||||
|
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() {
|
||||||
|
if (this.list.length >= this.total) {
|
||||||
|
return console.log('数据已经加载完成')
|
||||||
|
}
|
||||||
|
this.pageNum += 1 //每次搜索从1开始搜索
|
||||||
|
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()
|
||||||
|
},
|
||||||
|
closeSearch() {
|
||||||
|
this.$refs.searchPopup.close()
|
||||||
|
},
|
||||||
|
toDetail(item, dataType) {
|
||||||
|
const {
|
||||||
|
clusterDeviceId,
|
||||||
|
deviceId
|
||||||
|
} = item, {
|
||||||
|
siteId
|
||||||
|
} = this
|
||||||
|
// this.$refs.chart.open({
|
||||||
|
this.chartOpen({
|
||||||
|
siteId,
|
||||||
|
clusterDeviceId,
|
||||||
|
deviceId
|
||||||
|
}, dataType)
|
||||||
|
},
|
||||||
|
// 搜索
|
||||||
|
onSearch() {
|
||||||
|
this.pageNum = 1 //每次搜索从1开始搜索
|
||||||
|
this.getTableData(true)
|
||||||
|
this.closeSearch()
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
// 清空搜索栏选中数据
|
||||||
|
// 清空电池簇列表,保留电池堆列表
|
||||||
|
onReset() {
|
||||||
|
this.search = {
|
||||||
|
stackId: '',
|
||||||
|
clusterId: '',
|
||||||
|
batteryId: ''
|
||||||
|
}
|
||||||
|
this.clusterOptions = []
|
||||||
|
this.pageNum = 1
|
||||||
|
this.getTableData(true)
|
||||||
|
this.closeSearch()
|
||||||
|
},
|
||||||
|
changeStackId(val) {
|
||||||
|
if (val) {
|
||||||
|
console.log('选择了电池堆,需要获取对应的电池簇', val, this.search.stackId)
|
||||||
|
this.search.clusterId = ''
|
||||||
|
this.getClusterList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getStackList() {
|
||||||
|
getStackNameList(this.siteId).then(response => {
|
||||||
|
this.stackOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
|
||||||
|
return {
|
||||||
|
text: item.deviceName,
|
||||||
|
value: item.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getClusterList() {
|
||||||
|
getClusterNameList({
|
||||||
|
stackDeviceId: this.search.stackId,
|
||||||
|
siteId: this.siteId
|
||||||
|
}).then(response => {
|
||||||
|
this.clusterOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
|
||||||
|
return {
|
||||||
|
text: item.deviceName,
|
||||||
|
value: item.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).finally(() => {})
|
||||||
|
},
|
||||||
|
//表格数据
|
||||||
|
getTableData(reset = false) {
|
||||||
|
if (!reset && this.list.length === this.total) return
|
||||||
|
uni.showLoading()
|
||||||
|
if (reset) {
|
||||||
|
this.list = []
|
||||||
|
this.total = 0
|
||||||
|
}
|
||||||
|
const {
|
||||||
|
stackId: stackDeviceId,
|
||||||
|
clusterId: clusterDeviceId,
|
||||||
|
batteryId
|
||||||
|
} = this.search
|
||||||
|
const {
|
||||||
|
siteId,
|
||||||
|
pageNum,
|
||||||
|
pageSize
|
||||||
|
} = this
|
||||||
|
getClusterDataInfoList({
|
||||||
|
stackDeviceId,
|
||||||
|
clusterDeviceId,
|
||||||
|
batteryId,
|
||||||
|
siteId,
|
||||||
|
pageNum,
|
||||||
|
pageSize
|
||||||
|
}).then(response => {
|
||||||
|
this.list = this.list.concat(response?.rows?.[0]?.batteryList || []);
|
||||||
|
this.total = response?.total || 0
|
||||||
|
}).finally(() => {
|
||||||
|
uni.hideLoading()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// uni.showLoading()
|
||||||
|
this.siteId = options.siteId || ''
|
||||||
|
this.getStackList()
|
||||||
|
this.getTableData(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
background: #f5f5f5;
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 40rpx;
|
||||||
|
right: 40rpx;
|
||||||
|
z-index: 1;
|
||||||
|
height: 60rpx;
|
||||||
|
width: 60rpx;
|
||||||
|
background-color: #007aff;
|
||||||
|
border-radius: 100%;
|
||||||
|
line-height: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
background: #ffffff;
|
||||||
|
width: 360px;
|
||||||
|
padding: 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-container {
|
||||||
|
padding-top: 40rpx;
|
||||||
|
padding-bottom: 100rpx;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
::v-deep {
|
||||||
|
.uni-list {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item {
|
||||||
|
padding: 10rpx 30rpx;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 1px 16rpx 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border-top,
|
||||||
|
.uni-list--border-bottom,
|
||||||
|
.uni-list--border::after {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-header {
|
||||||
|
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-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background-color: #4c7af3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-body {
|
||||||
|
padding: 10rpx 0;
|
||||||
|
|
||||||
|
>.uni-row {
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
color: #000;
|
||||||
|
padding: 12rpx 30rpx;
|
||||||
|
|
||||||
|
.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>
|
||||||
@ -1,108 +1,490 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="work-container">
|
<view class="work-container">
|
||||||
<!-- 轮播图 -->
|
<site-switch-header :site-id="siteId" :site-type-options="siteTypeOptions" :site-address="baseInfo.siteAddress"
|
||||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
:running-time="baseInfo.runningTime" :site-count="siteCount" @change="selectedSite" />
|
||||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
<!-- 静态信息 -->
|
||||||
<swiper-item v-for="(item, index) in data" :key="index">
|
<view class="base-info">
|
||||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
<uni-group mode="card" class="install-data">
|
||||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</uni-swiper-dot>
|
|
||||||
|
|
||||||
<!-- 宫格组件 -->
|
|
||||||
<uni-section title="系统管理" type="line"></uni-section>
|
|
||||||
<view class="grid-body">
|
|
||||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
|
||||||
<uni-grid-item>
|
<uni-grid-item>
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
<view class="title">装机功率(MWh)</view>
|
||||||
<text class="text">用户管理</text>
|
<view class="text">{{baseInfo.installPower | formatNumber}}</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</uni-grid-item>
|
||||||
<uni-grid-item>
|
<uni-grid-item>
|
||||||
<view class="grid-item-box">
|
<view class="grid-item-box">
|
||||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
<view class="title">装机容量(MWh)</view>
|
||||||
<text class="text">角色管理</text>
|
<view class="text">{{baseInfo.installCapacity | formatNumber}}</view>
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
<uni-grid-item>
|
|
||||||
<view class="grid-item-box">
|
|
||||||
<uni-icons type="color" size="30"></uni-icons>
|
|
||||||
<text class="text">菜单管理</text>
|
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
<uni-grid-item>
|
|
||||||
<view class="grid-item-box">
|
|
||||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
|
||||||
<text class="text">部门管理</text>
|
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
<uni-grid-item>
|
|
||||||
<view class="grid-item-box">
|
|
||||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
|
||||||
<text class="text">岗位管理</text>
|
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
<uni-grid-item>
|
|
||||||
<view class="grid-item-box">
|
|
||||||
<uni-icons type="bars" size="30"></uni-icons>
|
|
||||||
<text class="text">字典管理</text>
|
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
<uni-grid-item>
|
|
||||||
<view class="grid-item-box">
|
|
||||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
|
||||||
<text class="text">参数设置</text>
|
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
<uni-grid-item>
|
|
||||||
<view class="grid-item-box">
|
|
||||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
|
||||||
<text class="text">通知公告</text>
|
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
<uni-grid-item>
|
|
||||||
<view class="grid-item-box">
|
|
||||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
|
||||||
<text class="text">日志管理</text>
|
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</uni-grid-item>
|
||||||
</uni-grid>
|
</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">
|
||||||
|
<image v-if="item.image" :src="item.image" class="icon icon-image" mode="aspectFit" />
|
||||||
|
<view v-else 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>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
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 {
|
export default {
|
||||||
|
components: {
|
||||||
|
DateRangeSelect,
|
||||||
|
SiteSwitchHeader
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
current: 0,
|
// 图表数据
|
||||||
swiperDotIndex: 0,
|
weekChartTimeRange: [],
|
||||||
data: [{
|
activeChartTimeRange: [],
|
||||||
image: '/static/images/banner/banner01.jpg'
|
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: 'icon-BMS',
|
||||||
|
text: 'BMS总览',
|
||||||
|
categoryName: 'STACK'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: '/static/images/banner/banner02.jpg'
|
page: 'bmsdcc',
|
||||||
|
icon: 'icon-a-dianchicunengliangkuai',
|
||||||
|
text: 'BMS电池簇',
|
||||||
|
categoryName: 'CLUSTER'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: '/static/images/banner/banner03.jpg'
|
page: 'pcs',
|
||||||
|
icon: 'icon-PCS',
|
||||||
|
text: 'PCS',
|
||||||
|
categoryName: 'PCS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
page: 'report',
|
||||||
|
icon: 'icon-service',
|
||||||
|
image: '/static/images/work/report.svg',
|
||||||
|
text: '报表',
|
||||||
|
categoryName: ''
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['belongSite', 'currentSiteId']),
|
||||||
|
siteCount() {
|
||||||
|
return (this.siteTypeOptions || []).reduce((count, typeItem) => {
|
||||||
|
return count + ((typeItem.children || []).length)
|
||||||
|
}, 0)
|
||||||
|
},
|
||||||
|
siteGirdList() {
|
||||||
|
return this.gridList.filter(i => !i.categoryName || this.deviceCategoryOptions.includes(i.categoryName))
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clickBannerItem(item) {
|
isAvailableSite(siteId) {
|
||||||
console.info(item)
|
const allSites = this.siteTypeOptions.reduce((result, typeItem) => {
|
||||||
|
return result.concat(typeItem.children || [])
|
||||||
|
}, [])
|
||||||
|
const site = allSites.find(item => item.value === siteId)
|
||||||
|
return !!(site && !site.disable)
|
||||||
},
|
},
|
||||||
changeSwiper(e) {
|
// 更新一周冲放曲线时间范围 重置图表
|
||||||
this.current = e.detail.current
|
updateWeekChartDate(data) {
|
||||||
|
this.weekChartTimeRange = data || []
|
||||||
|
this.siteId && this.getWeekChartData()
|
||||||
},
|
},
|
||||||
changeGrid(e) {
|
// 更新当日功率曲线时间范围 重置图表
|
||||||
this.$modal.showToast('模块建设中~')
|
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.siteGirdList[index].page}/index?siteId=${this.siteId}`)
|
||||||
|
},
|
||||||
|
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 || {}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
@ -115,68 +497,124 @@
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
view {
|
view {
|
||||||
font-size: 14px;
|
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 26rpx;
|
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 基本信息
|
||||||
|
.base-info {
|
||||||
|
margin-top: -80rpx;
|
||||||
|
border-radius: 80rpx 80rpx 0 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
// 装机功率
|
||||||
|
.install-data {
|
||||||
.grid-item-box {
|
.grid-item-box {
|
||||||
flex: 1;
|
padding-top: 6rpx;
|
||||||
/* #ifndef APP-NVUE */
|
padding-bottom: 6rpx;
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
.text {
|
||||||
flex-direction: column;
|
margin-top: 20rpx;
|
||||||
align-items: center;
|
color: #000;
|
||||||
justify-content: center;
|
}
|
||||||
padding: 15px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-margin-wrap {
|
}
|
||||||
width: 690rpx;
|
|
||||||
|
|
||||||
|
.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%;
|
width: 100%;
|
||||||
;
|
|
||||||
|
.uni-select__input-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.uni-select__selector-empty,
|
||||||
height: 300rpx;
|
.uni-select__selector-item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-box {
|
// .uni-date__x-input {
|
||||||
height: 150px;
|
// height: 50rpx;
|
||||||
|
// line-height: 50rpx;
|
||||||
|
// font-size: 26rpx;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-item {
|
.work-box {
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
.icon {
|
||||||
/* #endif */
|
font-size: 52rpx;
|
||||||
flex-direction: column;
|
color: #547ef4;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
|
||||||
height: 300rpx;
|
|
||||||
line-height: 300rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 500px) {
|
.icon-image {
|
||||||
.uni-swiper-dot-box {
|
width: 56rpx;
|
||||||
width: 400px;
|
height: 56rpx;
|
||||||
/* #ifndef APP-NVUE */
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
/* #endif */
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.text {
|
||||||
width: 100%;
|
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>
|
||||||
|
|||||||
493
pages/work/pcs/index.vue
Normal file
@ -0,0 +1,493 @@
|
|||||||
|
<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)">
|
||||||
|
|
||||||
|
<template v-slot:title>
|
||||||
|
<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 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 work-status-color">{{formatDictValue((PCSWorkStatusOptions || {}), item.workStatus)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">并网状态</view>
|
||||||
|
<text class="text">{{formatDictValue((gridStatusOptions || {}), item.gridStatus)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">设备状态</view>
|
||||||
|
<text class="text">{{formatDictValue((deviceStatusOptions || {}), item.deviceStatus)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">控制模式</view>
|
||||||
|
<text class="text">{{formatDictValue((controlModeOptions || {}), item.controlMode)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-group>
|
||||||
|
<!-- 设备数据 -->
|
||||||
|
<uni-group mode="card" class="data-card-group"
|
||||||
|
:style="{marginBottom:!item.pcsBranchInfoList || item.pcsBranchInfoList.length === 0 ?'25px' : ''}">
|
||||||
|
<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-col>
|
||||||
|
</uni-row>
|
||||||
|
</uni-group>
|
||||||
|
<!-- 支路 -->
|
||||||
|
<uni-group class="branch-card-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
|
||||||
|
v-for="(pcsBranchItem,pcsBranchIndex) in item.pcsBranchInfoList"
|
||||||
|
:key="pcsBranchIndex+'pcsBranchInfoList'">
|
||||||
|
<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>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">直流电压</view>
|
||||||
|
<text class="text">{{pcsBranchItem.dcVoltage}}V</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-lists">
|
||||||
|
<view class="grid-item-box">
|
||||||
|
<view class="title">直流电流</view>
|
||||||
|
<text class="text">{{pcsBranchItem.dcCurrent}}A</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-group>
|
||||||
|
</view>
|
||||||
|
</uni-collapse-item>
|
||||||
|
</uni-collapse>
|
||||||
|
<view class="no-data" v-else>
|
||||||
|
暂无数据
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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,
|
||||||
|
}),
|
||||||
|
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",
|
||||||
|
pointName: "总交流有功功率",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "总交流无功功率",
|
||||||
|
attr: "totalReactivePower",
|
||||||
|
unit: "kVar",
|
||||||
|
pointName: "总交流无功功率",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "当天交流充电量",
|
||||||
|
attr: "dailyAcChargeEnergy",
|
||||||
|
unit: "kWh",
|
||||||
|
pointName: "当天交流充电量 (kWh)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "当天交流放电量",
|
||||||
|
attr: "dailyAcDischargeEnergy",
|
||||||
|
unit: "kWh",
|
||||||
|
pointName: "当天交流放电量 (kWh)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "A相电压",
|
||||||
|
attr: "aPhaseVoltage",
|
||||||
|
unit: "V",
|
||||||
|
pointName: ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "A相电流",
|
||||||
|
attr: "aPhaseCurrent",
|
||||||
|
unit: "A",
|
||||||
|
pointName: "A相电流",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: "B相电压",
|
||||||
|
attr: "bPhaseVoltage",
|
||||||
|
unit: "V",
|
||||||
|
pointName: ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "B相电流",
|
||||||
|
attr: "bPhaseCurrent",
|
||||||
|
unit: "A",
|
||||||
|
pointName: "B相电流",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "总交流视在功率",
|
||||||
|
attr: "totalApparentPower",
|
||||||
|
unit: "kVA",
|
||||||
|
pointName: "总交流视在功率",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "总交流功率因数",
|
||||||
|
attr: "totalPowerFactor",
|
||||||
|
unit: "",
|
||||||
|
pointName: "总交流功率因数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "PCS模块温度",
|
||||||
|
attr: "pcsModuleTemperature",
|
||||||
|
unit: "℃",
|
||||||
|
pointName: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "PCS环境温度",
|
||||||
|
attr: "pcsEnvironmentTemperature",
|
||||||
|
unit: "℃",
|
||||||
|
pointName: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "C相电压",
|
||||||
|
attr: "cPhaseVoltage",
|
||||||
|
unit: "V",
|
||||||
|
pointName: ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "C相电流",
|
||||||
|
attr: "cPhaseCurrent",
|
||||||
|
unit: "A",
|
||||||
|
pointName: "C相电流",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: "交流频率",
|
||||||
|
attr: "acFrequency",
|
||||||
|
unit: "Hz",
|
||||||
|
pointName: "交流频率",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
.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>
|
||||||
580
pages/work/report/index.vue
Normal file
@ -0,0 +1,580 @@
|
|||||||
|
<template>
|
||||||
|
<view class="report-page">
|
||||||
|
<view class="toolbar">
|
||||||
|
<uni-datetime-picker v-model="dateRange" type="daterange" :end="defaultDateRange[1]" :clear-icon="false"
|
||||||
|
rangeSeparator="至" @change="changeDateRange" />
|
||||||
|
<view class="button-group">
|
||||||
|
<button size="mini" class="small" :disabled="loading" @click="resetDateRange">重置</button>
|
||||||
|
<button type="primary" size="mini" class="large" :disabled="loading" @click="getReportData">查询</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="loading" class="report-state">报表数据加载中...</view>
|
||||||
|
<view v-else-if="reportList.length === 0" class="report-state">暂无报表数据</view>
|
||||||
|
<view v-else class="report-list">
|
||||||
|
<uni-collapse class="report-collapse">
|
||||||
|
<uni-collapse-item v-for="item in reportList" :key="item.dataTime" class="report-card">
|
||||||
|
<template v-slot:title>
|
||||||
|
<view class="report-card__header">
|
||||||
|
<view class="report-card__title-main">
|
||||||
|
<view class="report-card__date">{{item.dataTime}}</view>
|
||||||
|
<view class="report-card__tags">
|
||||||
|
<text v-if="item.dayType" class="report-tag">{{item.dayType}}</text>
|
||||||
|
<text v-if="item.weatherDesc" class="report-tag weather">{{item.weatherDesc}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="report-summary report-summary--compact">
|
||||||
|
<view class="summary-item emphasis">
|
||||||
|
<text class="label">实际收益</text>
|
||||||
|
<text class="value">{{formatReportValue(item.actualRevenue)}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="summary-item">
|
||||||
|
<text class="label">效率(%)</text>
|
||||||
|
<text class="value">{{formatReportValue(item.effect)}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="summary-item">
|
||||||
|
<text class="label">充电总量(kWh)</text>
|
||||||
|
<text class="value">{{formatReportValue(item.activeTotalKwh)}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="summary-item">
|
||||||
|
<text class="label">放电总量(kWh)</text>
|
||||||
|
<text class="value">{{formatReportValue(item.reActiveTotalKwh)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<view class="report-card__content">
|
||||||
|
<view class="report-group">
|
||||||
|
<view class="report-group__title">电量数据</view>
|
||||||
|
<view class="report-metric-row">
|
||||||
|
<view class="report-metric-row__label">充电量</view>
|
||||||
|
<view class="report-metric-grid">
|
||||||
|
<view v-for="metric in buildMetricItems(item, 'chargeKwh')" :key="item.dataTime + metric.key"
|
||||||
|
class="report-metric">
|
||||||
|
<text class="metric-label">{{metric.label}}</text>
|
||||||
|
<text class="metric-value">{{formatReportValue(metric.value)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="report-metric-row">
|
||||||
|
<view class="report-metric-row__label">放电量</view>
|
||||||
|
<view class="report-metric-grid">
|
||||||
|
<view v-for="metric in buildMetricItems(item, 'dischargeKwh')"
|
||||||
|
:key="item.dataTime + metric.key" class="report-metric">
|
||||||
|
<text class="metric-label">{{metric.label}}</text>
|
||||||
|
<text class="metric-value">{{formatReportValue(metric.value)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="report-group">
|
||||||
|
<view class="report-group__title">收益数据</view>
|
||||||
|
<view class="report-metric-row">
|
||||||
|
<view class="report-metric-row__label">充电价格</view>
|
||||||
|
<view class="report-metric-grid">
|
||||||
|
<view v-for="metric in buildMetricItems(item, 'chargePrice')"
|
||||||
|
:key="item.dataTime + metric.key + 'price'" class="report-metric">
|
||||||
|
<text class="metric-label">{{metric.label}}</text>
|
||||||
|
<text class="metric-value">{{formatReportValue(metric.value)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="report-metric-row">
|
||||||
|
<view class="report-metric-row__label">放电价格</view>
|
||||||
|
<view class="report-metric-grid">
|
||||||
|
<view v-for="metric in buildMetricItems(item, 'dischargePrice')"
|
||||||
|
:key="item.dataTime + metric.key + 'rePrice'" class="report-metric">
|
||||||
|
<text class="metric-label">{{metric.label}}</text>
|
||||||
|
<text class="metric-value">{{formatReportValue(metric.value)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-collapse-item>
|
||||||
|
</uni-collapse>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
formatDate
|
||||||
|
} from '@/utils/filters'
|
||||||
|
import {
|
||||||
|
getAmmeterData,
|
||||||
|
getAmmeterRevenueData
|
||||||
|
} from '@/api/ems/site.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
siteId: '',
|
||||||
|
dateRange: [],
|
||||||
|
defaultDateRange: [],
|
||||||
|
reportList: [],
|
||||||
|
loading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initDateRange() {
|
||||||
|
const now = new Date()
|
||||||
|
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
|
||||||
|
this.defaultDateRange = [formatDate(firstDay), formatDate(now)]
|
||||||
|
this.dateRange = [...this.defaultDateRange]
|
||||||
|
},
|
||||||
|
changeDateRange(value) {
|
||||||
|
this.dateRange = value || []
|
||||||
|
},
|
||||||
|
resetDateRange() {
|
||||||
|
this.dateRange = [...this.defaultDateRange]
|
||||||
|
this.getReportData()
|
||||||
|
},
|
||||||
|
createEmptyReportRow(dataTime) {
|
||||||
|
return {
|
||||||
|
dataTime,
|
||||||
|
dayType: '',
|
||||||
|
weatherDesc: '',
|
||||||
|
activePeakKwh: null,
|
||||||
|
activeHighKwh: null,
|
||||||
|
activeFlatKwh: null,
|
||||||
|
activeValleyKwh: null,
|
||||||
|
activeTotalKwh: null,
|
||||||
|
reActivePeakKwh: null,
|
||||||
|
reActiveHighKwh: null,
|
||||||
|
reActiveFlatKwh: null,
|
||||||
|
reActiveValleyKwh: null,
|
||||||
|
reActiveTotalKwh: null,
|
||||||
|
effect: null,
|
||||||
|
activePeakPrice: null,
|
||||||
|
activeHighPrice: null,
|
||||||
|
activeFlatPrice: null,
|
||||||
|
activeValleyPrice: null,
|
||||||
|
activeTotalPrice: null,
|
||||||
|
reActivePeakPrice: null,
|
||||||
|
reActiveHighPrice: null,
|
||||||
|
reActiveFlatPrice: null,
|
||||||
|
reActiveValleyPrice: null,
|
||||||
|
reActiveTotalPrice: null,
|
||||||
|
actualRevenue: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mergeReportRows(ammeterRows = [], revenueRows = []) {
|
||||||
|
const reportMap = {}
|
||||||
|
const ensureRow = (date) => {
|
||||||
|
const key = String(date || '').trim()
|
||||||
|
if (!key) return null
|
||||||
|
if (!reportMap[key]) {
|
||||||
|
reportMap[key] = this.createEmptyReportRow(key)
|
||||||
|
}
|
||||||
|
return reportMap[key]
|
||||||
|
}
|
||||||
|
;(ammeterRows || []).forEach(item => {
|
||||||
|
const row = ensureRow(item.dataTime)
|
||||||
|
if (!row) return
|
||||||
|
Object.assign(row, {
|
||||||
|
activePeakKwh: item.activePeakKwh,
|
||||||
|
activeHighKwh: item.activeHighKwh,
|
||||||
|
activeFlatKwh: item.activeFlatKwh,
|
||||||
|
activeValleyKwh: item.activeValleyKwh,
|
||||||
|
activeTotalKwh: item.activeTotalKwh,
|
||||||
|
reActivePeakKwh: item.reActivePeakKwh,
|
||||||
|
reActiveHighKwh: item.reActiveHighKwh,
|
||||||
|
reActiveFlatKwh: item.reActiveFlatKwh,
|
||||||
|
reActiveValleyKwh: item.reActiveValleyKwh,
|
||||||
|
reActiveTotalKwh: item.reActiveTotalKwh,
|
||||||
|
effect: item.effect
|
||||||
|
})
|
||||||
|
})
|
||||||
|
;(revenueRows || []).forEach(item => {
|
||||||
|
const row = ensureRow(item.dataTime)
|
||||||
|
if (!row) return
|
||||||
|
Object.assign(row, {
|
||||||
|
dayType: item.dayType,
|
||||||
|
weatherDesc: item.weatherDesc,
|
||||||
|
activePeakPrice: item.activePeakPrice,
|
||||||
|
activeHighPrice: item.activeHighPrice,
|
||||||
|
activeFlatPrice: item.activeFlatPrice,
|
||||||
|
activeValleyPrice: item.activeValleyPrice,
|
||||||
|
activeTotalPrice: item.activeTotalPrice,
|
||||||
|
reActivePeakPrice: item.reActivePeakPrice,
|
||||||
|
reActiveHighPrice: item.reActiveHighPrice,
|
||||||
|
reActiveFlatPrice: item.reActiveFlatPrice,
|
||||||
|
reActiveValleyPrice: item.reActiveValleyPrice,
|
||||||
|
reActiveTotalPrice: item.reActiveTotalPrice,
|
||||||
|
actualRevenue: item.actualRevenue
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return Object.values(reportMap).sort((a, b) => String(b.dataTime).localeCompare(String(a.dataTime)))
|
||||||
|
},
|
||||||
|
buildMetricItems(item, type) {
|
||||||
|
const configMap = {
|
||||||
|
chargeKwh: [{
|
||||||
|
key: 'activePeakKwh',
|
||||||
|
label: '尖',
|
||||||
|
value: item.activePeakKwh
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'activeHighKwh',
|
||||||
|
label: '峰',
|
||||||
|
value: item.activeHighKwh
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'activeFlatKwh',
|
||||||
|
label: '平',
|
||||||
|
value: item.activeFlatKwh
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'activeValleyKwh',
|
||||||
|
label: '谷',
|
||||||
|
value: item.activeValleyKwh
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'activeTotalKwh',
|
||||||
|
label: '总',
|
||||||
|
value: item.activeTotalKwh
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dischargeKwh: [{
|
||||||
|
key: 'reActivePeakKwh',
|
||||||
|
label: '尖',
|
||||||
|
value: item.reActivePeakKwh
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'reActiveHighKwh',
|
||||||
|
label: '峰',
|
||||||
|
value: item.reActiveHighKwh
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'reActiveFlatKwh',
|
||||||
|
label: '平',
|
||||||
|
value: item.reActiveFlatKwh
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'reActiveValleyKwh',
|
||||||
|
label: '谷',
|
||||||
|
value: item.reActiveValleyKwh
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'reActiveTotalKwh',
|
||||||
|
label: '总',
|
||||||
|
value: item.reActiveTotalKwh
|
||||||
|
}
|
||||||
|
],
|
||||||
|
chargePrice: [{
|
||||||
|
key: 'activePeakPrice',
|
||||||
|
label: '尖',
|
||||||
|
value: item.activePeakPrice
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'activeHighPrice',
|
||||||
|
label: '峰',
|
||||||
|
value: item.activeHighPrice
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'activeFlatPrice',
|
||||||
|
label: '平',
|
||||||
|
value: item.activeFlatPrice
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'activeValleyPrice',
|
||||||
|
label: '谷',
|
||||||
|
value: item.activeValleyPrice
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'activeTotalPrice',
|
||||||
|
label: '总',
|
||||||
|
value: item.activeTotalPrice
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dischargePrice: [{
|
||||||
|
key: 'reActivePeakPrice',
|
||||||
|
label: '尖',
|
||||||
|
value: item.reActivePeakPrice
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'reActiveHighPrice',
|
||||||
|
label: '峰',
|
||||||
|
value: item.reActiveHighPrice
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'reActiveFlatPrice',
|
||||||
|
label: '平',
|
||||||
|
value: item.reActiveFlatPrice
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'reActiveValleyPrice',
|
||||||
|
label: '谷',
|
||||||
|
value: item.reActiveValleyPrice
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'reActiveTotalPrice',
|
||||||
|
label: '总',
|
||||||
|
value: item.reActiveTotalPrice
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
return configMap[type] || []
|
||||||
|
},
|
||||||
|
formatReportValue(value) {
|
||||||
|
if (!(value || value === 0 || value === '0')) return '-'
|
||||||
|
const num = Number(value)
|
||||||
|
if (!Number.isFinite(num)) return value
|
||||||
|
return num.toFixed(3).replace(/\.?0+$/, '')
|
||||||
|
},
|
||||||
|
getReportData() {
|
||||||
|
if (!this.siteId || !this.dateRange.length) return
|
||||||
|
const [startTime = '', endTime = ''] = this.dateRange || []
|
||||||
|
this.loading = true
|
||||||
|
Promise.all([
|
||||||
|
getAmmeterData({
|
||||||
|
siteId: this.siteId,
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
|
pageSize: 200,
|
||||||
|
pageNum: 1
|
||||||
|
}),
|
||||||
|
getAmmeterRevenueData({
|
||||||
|
siteId: this.siteId,
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
|
pageSize: 200,
|
||||||
|
pageNum: 1
|
||||||
|
})
|
||||||
|
]).then(([ammeterResponse, revenueResponse]) => {
|
||||||
|
const ammeterRows = ammeterResponse?.rows || []
|
||||||
|
const revenueRows = revenueResponse?.rows || []
|
||||||
|
this.reportList = this.mergeReportRows(ammeterRows, revenueRows)
|
||||||
|
}).catch(() => {
|
||||||
|
this.reportList = []
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.siteId = options.siteId || ''
|
||||||
|
this.initDateRange()
|
||||||
|
this.getReportData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.report-page {
|
||||||
|
min-height: 100%;
|
||||||
|
padding: 24rpx;
|
||||||
|
background: #f5f6f8;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
padding: 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-state {
|
||||||
|
padding: 80rpx 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-card {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-collapse {
|
||||||
|
:deep(.uni-collapse) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.uni-collapse-item) {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.uni-collapse-item__title-wrap) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.uni-collapse-item__title-box) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.uni-collapse-item__content) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-card__header {
|
||||||
|
padding: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-card__title-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-card__date {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2329;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-card__tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-tag {
|
||||||
|
padding: 8rpx 18rpx;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
background: #eef3ff;
|
||||||
|
color: #547ef4;
|
||||||
|
font-size: 22rpx;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
&.weather {
|
||||||
|
background: #f5f7fa;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-summary--compact {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-item {
|
||||||
|
padding: 18rpx 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background: #f7f8fa;
|
||||||
|
|
||||||
|
&.emphasis {
|
||||||
|
background: linear-gradient(135deg, #547ef4, #6ea1ff);
|
||||||
|
|
||||||
|
.label,
|
||||||
|
.value {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #8a919f;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2329;
|
||||||
|
line-height: 1.2;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-group:not(:last-child) {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-card__content {
|
||||||
|
padding: 0 24rpx 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-group__title {
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2329;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-metric-row:not(:last-child) {
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-metric-row__label {
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #8a919f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-metric-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-metric {
|
||||||
|
padding: 14rpx 10rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
background: #f7f8fa;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #8a919f;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
display: block;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2329;
|
||||||
|
line-height: 1.3;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
</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 |
12
static/images/work/report.svg
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="20" y="12" width="88" height="104" rx="16" fill="#EEF4FF"/>
|
||||||
|
<path d="M44 12H88L108 32V40H44V12Z" fill="#DCE8FF"/>
|
||||||
|
<path d="M88 12V28C88 30.2091 89.7909 32 92 32H108" fill="#C8DAFF"/>
|
||||||
|
<rect x="36" y="52" width="56" height="8" rx="4" fill="#9FB9FF"/>
|
||||||
|
<rect x="36" y="68" width="40" height="8" rx="4" fill="#C5D6FF"/>
|
||||||
|
<rect x="38" y="88" width="10" height="16" rx="5" fill="#7AA2FF"/>
|
||||||
|
<rect x="56" y="78" width="10" height="26" rx="5" fill="#5B87F7"/>
|
||||||
|
<rect x="74" y="70" width="10" height="34" rx="5" fill="#2F67E8"/>
|
||||||
|
<rect x="92" y="82" width="10" height="22" rx="5" fill="#89ACFF"/>
|
||||||
|
<rect x="20" y="12" width="88" height="104" rx="16" stroke="#5B87F7" stroke-width="4"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 807 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 |
@ -88,3 +88,272 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.status-bar{
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: var(--status-bar-height);
|
||||||
|
position: fixed;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
z-index:99;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 暂无数据通用样式
|
||||||
|
.no-data{
|
||||||
|
color:#999;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
height: 100px;
|
||||||
|
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
|
// color-ui
|
||||||
@import "@/static/scss/colorui.css";
|
@import "@/static/scss/colorui.css";
|
||||||
// iconfont
|
// iconfont
|
||||||
|
@import "@/static/font_ems/iconfont.css";
|
||||||
@import "@/static/font/iconfont.css";
|
@import "@/static/font/iconfont.css";
|
||||||
@ -4,6 +4,8 @@ const getters = {
|
|||||||
id: state => state.user.id,
|
id: state => state.user.id,
|
||||||
name: state => state.user.name,
|
name: state => state.user.name,
|
||||||
roles: state => state.user.roles,
|
roles: state => state.user.roles,
|
||||||
permissions: state => state.user.permissions
|
permissions: state => state.user.permissions,
|
||||||
|
belongSite: state => state.user.belongSite,
|
||||||
|
currentSiteId: state => state.user.currentSiteId
|
||||||
}
|
}
|
||||||
export default getters
|
export default getters
|
||||||
|
|||||||
@ -1,13 +1,15 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Vuex from 'vuex'
|
import Vuex from 'vuex'
|
||||||
import user from '@/store/modules/user'
|
import user from '@/store/modules/user'
|
||||||
|
import ems from '@/store/modules/ems'
|
||||||
import getters from './getters'
|
import getters from './getters'
|
||||||
|
|
||||||
Vue.use(Vuex)
|
Vue.use(Vuex)
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
modules: {
|
modules: {
|
||||||
user
|
user,
|
||||||
|
ems
|
||||||
},
|
},
|
||||||
getters
|
getters
|
||||||
})
|
})
|
||||||
|
|||||||
90
store/modules/ems.js
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
const ems = {
|
||||||
|
state: {
|
||||||
|
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': '在线'
|
||||||
|
}, //设备状态
|
||||||
|
gridStatusOptions: {
|
||||||
|
'0': '并网',
|
||||||
|
'1': '未并网'
|
||||||
|
}, //并网状态
|
||||||
|
controlModeOptions: {
|
||||||
|
'0': '远程',
|
||||||
|
'1': '本地'
|
||||||
|
}, //控制模式
|
||||||
|
warnOptions: {
|
||||||
|
0: '正常',
|
||||||
|
1: '中断',
|
||||||
|
2: '不在线',
|
||||||
|
3: '异常'
|
||||||
|
}, //告警状态
|
||||||
|
communicationStatusOptions: {
|
||||||
|
'0': '正常',
|
||||||
|
'1': '通讯中断',
|
||||||
|
'2': '异常'
|
||||||
|
}, //通讯状态
|
||||||
|
workModeOptions: {
|
||||||
|
'0': '正常',
|
||||||
|
'1': '停止'
|
||||||
|
}, //工作模式
|
||||||
|
alarmLevelOptions: {
|
||||||
|
'A': '提示',
|
||||||
|
'B': '一般',
|
||||||
|
'C': '严重',
|
||||||
|
'D': '紧急'
|
||||||
|
}, //告警等级
|
||||||
|
alarmStatusOptions: {
|
||||||
|
'0': '待处理',
|
||||||
|
'1': '已处理',
|
||||||
|
'2': '处理中'
|
||||||
|
}, //告警状态
|
||||||
|
deviceTypeOptions: {
|
||||||
|
'TCP': 'TCP',
|
||||||
|
'RTU': 'RTU'
|
||||||
|
}, //设备类型
|
||||||
|
ticketStatusOptions: {
|
||||||
|
1: '待处理',
|
||||||
|
2: '处理中',
|
||||||
|
3: '已处理'
|
||||||
|
}, //工单处理状态
|
||||||
|
strategyStatusOptions: {
|
||||||
|
'0': '未启用',
|
||||||
|
'1': '已运行',
|
||||||
|
'2': '已暂停',
|
||||||
|
'3': '禁用',
|
||||||
|
'4': '删除'
|
||||||
|
}, //策略状态
|
||||||
|
chargeStatusOptions: {
|
||||||
|
'1': '充电',
|
||||||
|
'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,9 +1,20 @@
|
|||||||
import config from '@/config'
|
import config from '@/config'
|
||||||
import storage from '@/utils/storage'
|
import storage from '@/utils/storage'
|
||||||
import constant from '@/utils/constant'
|
import constant from '@/utils/constant'
|
||||||
import { isHttp, isEmpty } from "@/utils/validate"
|
import {
|
||||||
import { login, logout, getInfo } from '@/api/login'
|
isHttp,
|
||||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
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'
|
import defAva from '@/static/images/profile.jpg'
|
||||||
|
|
||||||
const baseUrl = config.baseUrl
|
const baseUrl = config.baseUrl
|
||||||
@ -15,7 +26,9 @@ const user = {
|
|||||||
name: storage.get(constant.name),
|
name: storage.get(constant.name),
|
||||||
avatar: storage.get(constant.avatar),
|
avatar: storage.get(constant.avatar),
|
||||||
roles: storage.get(constant.roles),
|
roles: storage.get(constant.roles),
|
||||||
permissions: storage.get(constant.permissions)
|
permissions: storage.get(constant.permissions),
|
||||||
|
belongSite: storage.get(constant.belongSite),
|
||||||
|
currentSiteId: storage.get(constant.currentSiteId)
|
||||||
},
|
},
|
||||||
|
|
||||||
mutations: {
|
mutations: {
|
||||||
@ -41,12 +54,22 @@ const user = {
|
|||||||
SET_PERMISSIONS: (state, permissions) => {
|
SET_PERMISSIONS: (state, permissions) => {
|
||||||
state.permissions = permissions
|
state.permissions = permissions
|
||||||
storage.set(constant.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: {
|
actions: {
|
||||||
// 登录
|
// 登录
|
||||||
Login({ commit }, userInfo) {
|
Login({
|
||||||
|
commit
|
||||||
|
}, userInfo) {
|
||||||
const username = userInfo.username.trim()
|
const username = userInfo.username.trim()
|
||||||
const password = userInfo.password
|
const password = userInfo.password
|
||||||
const code = userInfo.code
|
const code = userInfo.code
|
||||||
@ -63,10 +86,14 @@ const user = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
GetInfo({ commit, state }) {
|
GetInfo({
|
||||||
|
commit,
|
||||||
|
state
|
||||||
|
}) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
getInfo().then(res => {
|
getInfo().then(res => {
|
||||||
const user = res.user
|
const user = res.user
|
||||||
|
const belongSite = user?.belongSite ? JSON.parse(user?.belongSite) || [] : []
|
||||||
let avatar = user.avatar || ""
|
let avatar = user.avatar || ""
|
||||||
if (!isHttp(avatar)) {
|
if (!isHttp(avatar)) {
|
||||||
avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
|
avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
|
||||||
@ -82,6 +109,7 @@ const user = {
|
|||||||
commit('SET_ID', userid)
|
commit('SET_ID', userid)
|
||||||
commit('SET_NAME', username)
|
commit('SET_NAME', username)
|
||||||
commit('SET_AVATAR', avatar)
|
commit('SET_AVATAR', avatar)
|
||||||
|
commit('SET_BELONGSITE', belongSite)
|
||||||
resolve(res)
|
resolve(res)
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
@ -90,7 +118,10 @@ const user = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// 退出系统
|
// 退出系统
|
||||||
LogOut({ commit, state }) {
|
LogOut({
|
||||||
|
commit,
|
||||||
|
state
|
||||||
|
}) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
logout(state.token).then(() => {
|
logout(state.token).then(() => {
|
||||||
commit('SET_TOKEN', '')
|
commit('SET_TOKEN', '')
|
||||||
|
|||||||
320
uni_modules/qiun-data-charts/changelog.md
Normal file
@ -0,0 +1,320 @@
|
|||||||
|
## 2.5.0-20230101(2023-01-01)
|
||||||
|
- 秋云图表组件 修改条件编译顺序,确保uniapp的cli方式的项目依赖不完整时可以正常显示
|
||||||
|
- 秋云图表组件 恢复props属性directory的使用,以修复vue3项目中,开启echarts后,echarts目录识别错误的bug
|
||||||
|
- uCharts.js 修复区域图、混合图只有一个数据时图表显示不正确的bug
|
||||||
|
- uCharts.js 修复折线图、区域图中时间轴类别图表tooltip指示点显示不正确的bug
|
||||||
|
- uCharts.js 修复x轴使用labelCount时,并且boundaryGap = 'justify' 并且关闭Y轴显示的时候,最后一个坐标值不显示的bug
|
||||||
|
- uCharts.js 修复折线图只有一组数据时 ios16 渲染颜色不正确的bug
|
||||||
|
- uCharts.js 修复玫瑰图半径显示不正确的bug
|
||||||
|
- uCharts.js 柱状图、山峰图增加正负图功能,y轴网格如果需要显示0轴则由 min max 及 splitNumber 确定,后续版本优化自动显示0轴
|
||||||
|
- uCharts.js 柱状图column增加 opts.extra.column.labelPosition,数据标签位置,有效值为 outside外部, insideTop内顶部, center内中间, bottom内底部
|
||||||
|
- uCharts.js 雷达图radar增加 opts.extra.radar.labelShow,否显示各项标识文案是,默认true
|
||||||
|
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.boxPadding,提示窗边框填充距离,默认3px
|
||||||
|
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.fontSize,提示窗字体大小配置,默认13px
|
||||||
|
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.lineHeight,提示窗文字行高,默认20px
|
||||||
|
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShow,是否显示左侧图例,默认true
|
||||||
|
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShape,图例形状,图例标识样式,有效值为 auto自动跟随图例, diamond◆, circle●, triangle▲, square■, rect▬, line-
|
||||||
|
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelFontSize,字体大小配置,默认13px
|
||||||
|
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelPadding,标签边框内填充距离,默认6px
|
||||||
|
- uCharts.js 折线图line增加 opts.extra.line.linearType,渐变色类型,可选值 none关闭渐变色,custom 自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值
|
||||||
|
- uCharts.js 折线图line增加 serie.linearColor,渐变色数组,格式为2维数组[起始位置,颜色值],例如[[0,'#0EE2F8'],[0.3,'#2BDCA8'],[0.6,'#1890FF'],[1,'#9A60B4']]
|
||||||
|
- uCharts.js 折线图line增加 opts.extra.line.onShadow,是否开启折线阴影,开启后请赋值serie.setShadow阴影设置
|
||||||
|
- uCharts.js 折线图line增加 serie.setShadow,阴影配置,格式为4位数组:[offsetX,offsetY,blur,color]
|
||||||
|
- uCharts.js 折线图line增加 opts.extra.line.animation,动画效果方向,可选值为vertical 垂直动画效果,horizontal 水平动画效果
|
||||||
|
- uCharts.js X轴xAxis增加 opts.xAxis.lineHeight,X轴字体行高,默认20px
|
||||||
|
- uCharts.js X轴xAxis增加 opts.xAxis.marginTop,X轴文字距离轴线的距离,默认0px
|
||||||
|
- uCharts.js X轴xAxis增加 opts.xAxis.title,当前X轴标题
|
||||||
|
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontSize,标题字体大小,默认13px
|
||||||
|
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetY,标题纵向偏移距离,负数为向上偏移,正数向下偏移
|
||||||
|
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetX,标题横向偏移距离,负数为向左偏移,正数向右偏移
|
||||||
|
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontColor,标题字体颜色,默认#666666
|
||||||
|
|
||||||
|
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||||
|
- 如果是uni-modules版本组件,请先登录HBuilderX账号;
|
||||||
|
- 在HBuilderX中的manifest.json,点击重新获取uniapp的appid,或者删除appid重新粘贴,重新运行;
|
||||||
|
- 如果是cli项目请使用码云上的非uniCloud版本组件;
|
||||||
|
- 或者添加uniCloud的依赖;
|
||||||
|
- 或者使用原生uCharts;
|
||||||
|
## 2.4.5-20221130(2022-11-30)
|
||||||
|
- uCharts.js 优化tooltip当文字很多变为左侧显示时,如果画布仍显显示不下,提示框错位置变为以左侧0位置起画
|
||||||
|
- uCharts.js 折线图修复特殊情况下只有单点数据,并改变线宽后点变为圆形的bug
|
||||||
|
- uCharts.js 修复Y轴disabled启用后无效并报错的bug
|
||||||
|
- uCharts.js 修复仪表盘起始结束角度特殊情况下显示不正确的bug
|
||||||
|
- uCharts.js 雷达图新增参数 opts.extra.radar.radius , 自定义雷达图半径
|
||||||
|
- uCharts.js 折线图、区域图增加tooltip指示点,opts.extra.line.activeType/opts.extra.area.activeType,可选值"none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
|
||||||
|
## 2.4.4-20221102(2022-11-02)
|
||||||
|
- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40)
|
||||||
|
- 秋云图表组件 修复使用echarts时,初始化时宽高不正确的bug,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42)
|
||||||
|
- 秋云图表组件 修复uniapp的h5使用history模式时,无法加载echarts的bug
|
||||||
|
- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出,方便一些特殊需求的交互获取数据。
|
||||||
|
|
||||||
|
- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43)
|
||||||
|
- uCharts.js 地图新增参数opts.series[i].fillOpacity,以透明度方式来设置颜色过度效果,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38)
|
||||||
|
- uCharts.js 地图新增参数opts.extra.map.active,是否启用点击激活变色
|
||||||
|
- uCharts.js 地图新增参数opts.extra.map.activeTextColor,是否启用点击激活变色
|
||||||
|
- uCharts.js 地图新增渲染完成事件renderComplete
|
||||||
|
- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug
|
||||||
|
- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案
|
||||||
|
- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小,默认opts.fontSize
|
||||||
|
- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色,默认#FFFFFF
|
||||||
|
- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度,默认0
|
||||||
|
- uCharts.js 进度条新增参数opts.extra.arcbar.direction,动画方向,可选值为cw顺时针、ccw逆时针
|
||||||
|
- uCharts.js 混合图新增参数opts.extra.mix.line.width,折线的宽度,默认2
|
||||||
|
- uCharts.js 修复tooltip开启horizentalLine水平横线标注时,图表显示错位的bug
|
||||||
|
- uCharts.js 优化tooltip当文字很多变为左侧显示时,如果画布仍显显示不下,提示框错位置变为以左侧0位置起画
|
||||||
|
- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑
|
||||||
|
- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题
|
||||||
|
- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug
|
||||||
|
|
||||||
|
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||||
|
1. 如果是uni-modules版本组件,请先登录HBuilderX账号;
|
||||||
|
2. 在HBuilderX中的manifest.json,点击重新获取uniapp的appid,或者删除appid重新粘贴,重新运行;
|
||||||
|
3. 如果是cli项目请使用码云上的非uniCloud版本组件;
|
||||||
|
4. 或者添加uniCloud的依赖;
|
||||||
|
5. 或者使用原生uCharts;
|
||||||
|
## 2.4.3-20220505(2022-05-05)
|
||||||
|
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时,再次赋值后画布闪动的bug
|
||||||
|
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
|
||||||
|
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval,数据点位网格抽希,默认1
|
||||||
|
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel, 是否显示刻度点值,默认false
|
||||||
|
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix,刻度点值小数位数,默认0
|
||||||
|
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow,是否显示末端刻度圆点,默认false
|
||||||
|
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius,刻度圆点的半径,默认3
|
||||||
|
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor,刻度圆点的颜色,默认#cccccc
|
||||||
|
- uCharts.js 雷达图新增参数opts.extra.radar.linearType,渐变色类型,可选值"none"关闭渐变,"custom"开启渐变
|
||||||
|
- uCharts.js 雷达图新增参数opts.extra.radar.customColor,自定义渐变颜色,数组类型对应series的数组长度以匹配不同series颜色的不同配色方案,例如["#FA7D8D", "#EB88E2"]
|
||||||
|
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
|
||||||
|
- uCharts.js 柱状图中温度计式图标,优化支持全圆角类型,修复边框有缝隙的bug,详见官网【演示】中的温度计图表
|
||||||
|
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth,当前点击柱状图的背景宽度,默认一个单元格单位
|
||||||
|
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
|
||||||
|
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度,默认0.2
|
||||||
|
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelText,自定义标签文字,避免formatter格式化的繁琐,详见官网【演示】中的饼图
|
||||||
|
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelShow,自定义是否显示某一个指示标签,避免因饼图类别太多导致标签重复或者居多导致图形变形的问题,详见官网【演示】中的饼图
|
||||||
|
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText(与series.name同级)自定义图例显示文字的方法
|
||||||
|
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参,统一为fromatter:function(value,index,opts){}
|
||||||
|
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
|
||||||
|
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
|
||||||
|
- 【官网模板】增加外部自定义图例与图表交互的例子,[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
|
||||||
|
|
||||||
|
## 注意:非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下,请到码云更新非 unimodules 版本组件,[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
|
||||||
|
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
|
||||||
|
## 2.4.2-20220421(2022-04-21)
|
||||||
|
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
|
||||||
|
## 2.4.2-20220420(2022-04-20)
|
||||||
|
## 重要!此版本uCharts新增了很多功能,修复了诸多已知问题
|
||||||
|
- 秋云图表组件 新增onzoom开启双指缩放功能(仅uCharts),前提需要直角坐标系类图表类型,并且ontouch为true、opts.enableScroll为true,详见实例项目K线图
|
||||||
|
- 秋云图表组件 新增optsWatch是否监听opts变化,关闭optsWatch后,动态修改opts不会触发图表重绘
|
||||||
|
- 秋云图表组件 修复开启canvas2d功能后,动态更新数据后画布闪动的bug
|
||||||
|
- 秋云图表组件 去除directory属性,改为自动获取echarts.min.js路径(升级不受影响)
|
||||||
|
- 秋云图表组件 增加getImage()方法及@getImage事件,通过ref调用getImage()方法获,触发@getImage事件获取当前画布的base64图片文件流。
|
||||||
|
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
|
||||||
|
- 秋云图表组件 新增加【非uniCloud】版本组件,避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题,请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6),或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
|
||||||
|
- uCharts.js 新增dobuleZoom双指缩放功能
|
||||||
|
- uCharts.js 新增山峰图type="mount",数据格式为饼图类格式,不需要传入categories,具体详见新版官网在线演示
|
||||||
|
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
|
||||||
|
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
|
||||||
|
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts),方便格式化时有更多参数可用
|
||||||
|
- uCharts.js 标记线功能增加labelText自定义显示文字,增加labelAlign标签显示位置(左侧或右侧),增加标签显示位置微调labelOffsetX、labelOffsetY
|
||||||
|
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
|
||||||
|
- uCharts.js 修复X轴开启disabled后,X轴仍占用空间的bug
|
||||||
|
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后,X轴文字与滚动条重叠的bug
|
||||||
|
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度,取值范围(-90至90)
|
||||||
|
- uCharts.js 修复地图文字标签层级显示不正确的bug
|
||||||
|
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
|
||||||
|
- uCharts.js 修复当opts.padding上边距为0时,Y轴顶部刻度标签位置不正确的bug
|
||||||
|
|
||||||
|
## 另外我们还开发了各大原生小程序组件,已发布至码云和npm
|
||||||
|
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
|
||||||
|
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
|
||||||
|
|
||||||
|
## 对于原生uCharts文档我们已上线新版官方网站,详情点击下面链接进入官网
|
||||||
|
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
|
||||||
|
## 2.3.7-20220122(2022-01-22)
|
||||||
|
## 重要!使用vue3编译,请使用cli模式并升级至最新依赖,HbuilderX编译需要使用3.3.8以上版本
|
||||||
|
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
|
||||||
|
## 2.3.7-20220118(2022-01-18)
|
||||||
|
## 注意,使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder!
|
||||||
|
## 2.3.67-20220118(2022-01-18)
|
||||||
|
- 秋云图表组件 组件初步支持vue3,全端编译会有些问题,具体详见下面修改:
|
||||||
|
1. 小程序端运行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts,将.uCharts去掉。
|
||||||
|
2. 小程序端发行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts,将.uCharts去掉,变为 new e。
|
||||||
|
3. 如果觉得上述步骤比较麻烦,如果您的项目只编译到小程序端,可以修改u-charts.js最后一行导出方式,将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后,H5和App端的renderjs会有问题,请开发者自行选择。(此问题非组件问题,请等待DC官方修复Vue3的小程序端)
|
||||||
|
## 2.3.6-20220111(2022-01-11)
|
||||||
|
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
|
||||||
|
## 2.3.6-20211201(2021-12-01)
|
||||||
|
- uCharts.js 修复bar条状图开启圆角模式时,值很小时圆角渲染错误的bug
|
||||||
|
## 2.3.5-20211014(2021-10-15)
|
||||||
|
- uCharts.js 增加vue3的编译支持(仅原生uCharts,qiun-data-charts组件后续会支持,请关注更新)
|
||||||
|
## 2.3.4-20211012(2021-10-12)
|
||||||
|
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
|
||||||
|
## 2.3.3-20210706(2021-07-06)
|
||||||
|
- uCharts.js 增加雷达图开启数据点值(opts.dataLabel)的显示
|
||||||
|
## 2.3.2-20210627(2021-06-27)
|
||||||
|
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
|
||||||
|
## 2.3.1-20210616(2021-06-16)
|
||||||
|
- uCharts.js 修复圆角柱状图使用4角圆角时,当数值过大时不正确的bug
|
||||||
|
## 2.3.0-20210612(2021-06-12)
|
||||||
|
- uCharts.js 【重要】uCharts增加nvue兼容,可在nvue项目中使用gcanvas组件渲染uCharts,[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
|
||||||
|
- 秋云图表组件 增加tapLegend属性,是否开启图例点击交互事件
|
||||||
|
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数,以便在页面中调用参数
|
||||||
|
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法,详见showOptsTooltip方法
|
||||||
|
## 2.2.1-20210603(2021-06-03)
|
||||||
|
- uCharts.js 修复饼图、圆环图、玫瑰图,当起始角度不为0时,tooltip位置不准确的bug
|
||||||
|
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
|
||||||
|
## 2.2.0-20210529(2021-05-29)
|
||||||
|
- uCharts.js 增加条状图type="bar"
|
||||||
|
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
|
||||||
|
## 2.1.7-20210524(2021-05-24)
|
||||||
|
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
|
||||||
|
## 2.1.6-20210523(2021-05-23)
|
||||||
|
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
|
||||||
|
## 2.1.5-2021051702(2021-05-17)
|
||||||
|
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
|
||||||
|
## 2.1.5-20210517(2021-05-17)
|
||||||
|
- uCharts.js 修复Y轴自定义min和max时,未按指定的最大值最小值显示坐标轴刻度的bug
|
||||||
|
## 2.1.4-20210516(2021-05-16)
|
||||||
|
- 秋云图表组件 优化onWindowResize防抖方法
|
||||||
|
- 秋云图表组件 修复APP端uCharts更新数据时,清空series显示loading图标后再显示图表,图表抖动的bug
|
||||||
|
- uCharts.js 修复开启canvas2d后,x轴、y轴、series自定义字体大小未按比例缩放的bug
|
||||||
|
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
|
||||||
|
## 2.1.3-20210513(2021-05-13)
|
||||||
|
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法,支持带滚动条的数据动态打点
|
||||||
|
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言,如尘般染指流年づ
|
||||||
|
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时,原数据闪现的bug
|
||||||
|
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
|
||||||
|
- uCharts.js 增加tooltip显示category(x轴对应点位)标题的功能,opts.extra.tooltip.showCategory,默认为false
|
||||||
|
- uCharts.js 修复mix混合图只有柱状图时,tooltip的分割线显示位置不正确的bug
|
||||||
|
- uCharts.js 修复开启滚动条,图表在拖动中动态打点,滚动条位置不正确的bug
|
||||||
|
- uCharts.js 修复饼图类数据格式为echarts数据格式,series为空数组报错的bug
|
||||||
|
- 示例项目 修改uCharts.js更新到v2.1.2版本后,@getIndex方法获取索引值变更为e.currentIndex.index
|
||||||
|
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新(数据动态打点)的demo
|
||||||
|
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
|
||||||
|
## 2.1.2-20210509(2021-05-09)
|
||||||
|
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
|
||||||
|
## 2.1.1-20210509(2021-05-09)
|
||||||
|
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行,支持在config-echarts.js配置文件内写function配置。
|
||||||
|
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
|
||||||
|
- 秋云图表组件 修复APP端报错Error: Not Found:Page[6][-1,27] at view.umd.min.js:1的bug。
|
||||||
|
## 2.1.0-20210507(2021-05-07)
|
||||||
|
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
|
||||||
|
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
|
||||||
|
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
|
||||||
|
## 2.1.0-20210506(2021-05-06)
|
||||||
|
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
|
||||||
|
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用,无法显示图表的bug
|
||||||
|
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图(type="tline")、时间轴区域图(type="tarea")、散点图(type="scatter")、气泡图demo(type="bubble")、倒三角形漏斗图(opts.extra.funnel.type="triangle")、金字塔形漏斗图(opts.extra.funnel.type="pyramid")
|
||||||
|
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
|
||||||
|
- uCharts.js 升级至v2.1.0版本
|
||||||
|
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
|
||||||
|
- uCharts.js 修复 玫瑰图点击图例,只剩一个类别显示空白的bug
|
||||||
|
- uCharts.js 修复 饼图类图点击图例,其他图表tooltip位置某些情况下不准的bug
|
||||||
|
- uCharts.js 修复 x轴为矢量轴(时间轴)情况下,点击tooltip位置不正确的bug
|
||||||
|
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
|
||||||
|
- uCharts.js 增加 直角坐标系图表X轴format格式化方法(原生uCharts.js用法请使用formatter)
|
||||||
|
- uCharts.js 增加 漏斗图扩展配置,倒三角形(opts.extra.funnel.type="triangle"),金字塔形(opts.extra.funnel.type="pyramid")
|
||||||
|
- uCharts.js 增加 散点图(opts.type="scatter")、气泡图(opts.type="bubble")
|
||||||
|
- 后期计划 完善散点图、气泡图,增加markPoints标记点,增加横向条状图。
|
||||||
|
## 2.0.0-20210502(2021-05-02)
|
||||||
|
- uCharts.js 修复词云图获取点击索引不正确的bug
|
||||||
|
## 2.0.0-20210501(2021-05-01)
|
||||||
|
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下,v-for循环使用图表,显示不正确的bug
|
||||||
|
## 2.0.0-20210426(2021-04-26)
|
||||||
|
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
|
||||||
|
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
|
||||||
|
- uCharts.js 增加 extra.column.categoryGap 参数,柱状图类每个category点位(X轴点)柱子组之间的间距
|
||||||
|
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数,标题纵向偏移距离,负数为向上偏移,正数向下偏移
|
||||||
|
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数,标题横向偏移距离,负数为向左偏移,正数向右偏移
|
||||||
|
- uCharts.js 增加 extra.gauge.labelOffset 参数,仪表盘标签文字径向便宜距离,默认13px
|
||||||
|
## 2.0.0-20210422-2(2021-04-22)
|
||||||
|
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
|
||||||
|
## 2.0.0-20210422(2021-04-22)
|
||||||
|
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
|
||||||
|
## 2.0.0-20210421(2021-04-21)
|
||||||
|
- uCharts.js 修复多行图例的情况下,图例在上方或者下方时,图例float为左侧或者右侧时,第二行及以后的图例对齐方式不正确的bug
|
||||||
|
## 2.0.0-20210420(2021-04-20)
|
||||||
|
- 秋云图表组件 修复微信小程序开启canvas2d模式后,windows版微信小程序不支持canvas2d模式的bug
|
||||||
|
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
|
||||||
|
## 2.0.0-20210419(2021-04-19)
|
||||||
|
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||||
|
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||||
|
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||||
|
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||||
|
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||||
|
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||||
|
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||||
|
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
|
||||||
|
- uCharts.js 修复多Y轴单独设置fontSize时,开启canvas2d后,未对应放大字体的bug
|
||||||
|
## 2.0.0-20210418(2021-04-18)
|
||||||
|
- 秋云图表组件 增加directory配置,修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
|
||||||
|
## 2.0.0-20210416(2021-04-16)
|
||||||
|
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||||
|
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||||
|
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||||
|
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||||
|
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||||
|
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||||
|
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||||
|
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员
|
||||||
|
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员
|
||||||
|
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
|
||||||
|
## 2.0.0-20210415(2021-04-15)
|
||||||
|
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
|
||||||
|
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
|
||||||
|
## 2.0.0-20210414(2021-04-14)
|
||||||
|
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||||
|
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||||
|
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||||
|
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||||
|
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||||
|
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||||
|
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||||
|
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
|
||||||
|
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
|
||||||
|
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
|
||||||
|
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
|
||||||
|
## 2.0.0-20210413(2021-04-13)
|
||||||
|
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
|
||||||
|
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
|
||||||
|
- 秋云图表组件 修改ontouch时,@getTouchStart@getTouchMove@getTouchEnd的触发条件
|
||||||
|
- uCharts.js 修复饼图类数据格式series属性不生效的bug
|
||||||
|
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
|
||||||
|
## 2.0.0-20210412-2(2021-04-12)
|
||||||
|
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||||
|
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX。如仍不好用,请重启电脑,此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||||
|
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||||
|
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
|
||||||
|
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图(条状图)的示例
|
||||||
|
## 2.0.0-20210412(2021-04-12)
|
||||||
|
- 秋云图表组件 修复created中判断echarts导致APP端无法识别,改回mounted中判断echarts初始化
|
||||||
|
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
|
||||||
|
## 2.0.0-20210411(2021-04-11)
|
||||||
|
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||||
|
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,并清空小程序开发者工具缓存。
|
||||||
|
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||||
|
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
- uCharts.js 折线图区域图增加connectNulls断点续连的功能,详见示例项目中ucharts.vue
|
||||||
|
- 秋云图表组件 变更初始化方法为created,变更type2d默认值为true,优化2d模式下组件初始化后dom获取不到的bug
|
||||||
|
- 秋云图表组件 修复左右布局时,右侧图表点击坐标错误的bug,修复tooltip柱状图自定义颜色显示object的bug
|
||||||
|
## 2.0.0-20210410(2021-04-10)
|
||||||
|
- 修复左右布局时,右侧图表点击坐标错误的bug,修复柱状图自定义颜色tooltip显示object的bug
|
||||||
|
- 增加标记线及柱状图自定义颜色的demo
|
||||||
|
## 2.0.0-20210409(2021-04-08)
|
||||||
|
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||||
|
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug,修复2d模式下饼图类activeRadius为按比例放大的bug
|
||||||
|
- 修复组件在支付宝小程序端点击位置不准确的bug
|
||||||
|
## 2.0.0-20210408(2021-04-07)
|
||||||
|
- 修复组件在支付宝小程序端不能显示的bug(目前支付宝小程不能点击交互,后续修复)
|
||||||
|
- uCharts.js 修复高分屏下柱状图类,圆弧进度条 自定义宽度不能按比例放大的bug
|
||||||
|
## 2.0.0-20210407(2021-04-06)
|
||||||
|
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||||
|
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
|
||||||
|
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
## 2.0.0-20210406(2021-04-05)
|
||||||
|
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页
|
||||||
|
## 2.0.0(2021-04-05)
|
||||||
|
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页
|
||||||
@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container loading1">
|
||||||
|
<view class="shape shape1"></view>
|
||||||
|
<view class="shape shape2"></view>
|
||||||
|
<view class="shape shape3"></view>
|
||||||
|
<view class="shape shape4"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'loading1',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped="true">
|
||||||
|
.container {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.container.loading1 {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .shape {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
.container .shape.shape1 {
|
||||||
|
left: 0;
|
||||||
|
background-color: #1890FF;
|
||||||
|
}
|
||||||
|
.container .shape.shape2 {
|
||||||
|
right: 0;
|
||||||
|
background-color: #91CB74;
|
||||||
|
}
|
||||||
|
.container .shape.shape3 {
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #FAC858;
|
||||||
|
}
|
||||||
|
.container .shape.shape4 {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #EE6666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading1 .shape1 {
|
||||||
|
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation1shape1 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(16px, 16px);
|
||||||
|
transform: translate(16px, 16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation1shape1 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(16px, 16px);
|
||||||
|
transform: translate(16px, 16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading1 .shape2 {
|
||||||
|
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation1shape2 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-16px, 16px);
|
||||||
|
transform: translate(-16px, 16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation1shape2 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-16px, 16px);
|
||||||
|
transform: translate(-16px, 16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading1 .shape3 {
|
||||||
|
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation1shape3 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(16px, -16px);
|
||||||
|
transform: translate(16px, -16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation1shape3 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(16px, -16px);
|
||||||
|
transform: translate(16px, -16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading1 .shape4 {
|
||||||
|
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation1shape4 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-16px, -16px);
|
||||||
|
transform: translate(-16px, -16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation1shape4 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-16px, -16px);
|
||||||
|
transform: translate(-16px, -16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,170 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container loading2">
|
||||||
|
<view class="shape shape1"></view>
|
||||||
|
<view class="shape shape2"></view>
|
||||||
|
<view class="shape shape3"></view>
|
||||||
|
<view class="shape shape4"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'loading2',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped="true">
|
||||||
|
.container {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.loading2 {
|
||||||
|
-webkit-transform: rotate(10deg);
|
||||||
|
transform: rotate(10deg);
|
||||||
|
}
|
||||||
|
.container.loading2 .shape {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.container.loading2{
|
||||||
|
-webkit-animation: rotation 1s infinite;
|
||||||
|
animation: rotation 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .shape {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
.container .shape.shape1 {
|
||||||
|
left: 0;
|
||||||
|
background-color: #1890FF;
|
||||||
|
}
|
||||||
|
.container .shape.shape2 {
|
||||||
|
right: 0;
|
||||||
|
background-color: #91CB74;
|
||||||
|
}
|
||||||
|
.container .shape.shape3 {
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #FAC858;
|
||||||
|
}
|
||||||
|
.container .shape.shape4 {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #EE6666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.loading2 .shape1 {
|
||||||
|
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation2shape1 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(20px, 20px);
|
||||||
|
transform: translate(20px, 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation2shape1 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(20px, 20px);
|
||||||
|
transform: translate(20px, 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading2 .shape2 {
|
||||||
|
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation2shape2 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-20px, 20px);
|
||||||
|
transform: translate(-20px, 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation2shape2 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-20px, 20px);
|
||||||
|
transform: translate(-20px, 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading2 .shape3 {
|
||||||
|
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation2shape3 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(20px, -20px);
|
||||||
|
transform: translate(20px, -20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation2shape3 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(20px, -20px);
|
||||||
|
transform: translate(20px, -20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading2 .shape4 {
|
||||||
|
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation2shape4 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-20px, -20px);
|
||||||
|
transform: translate(-20px, -20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation2shape4 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-20px, -20px);
|
||||||
|
transform: translate(-20px, -20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container loading3">
|
||||||
|
<view class="shape shape1"></view>
|
||||||
|
<view class="shape shape2"></view>
|
||||||
|
<view class="shape shape3"></view>
|
||||||
|
<view class="shape shape4"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'loading3',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped="true">
|
||||||
|
.container {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.loading3 {
|
||||||
|
-webkit-animation: rotation 1s infinite;
|
||||||
|
animation: rotation 1s infinite;
|
||||||
|
}
|
||||||
|
.container.loading3 .shape1 {
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
}
|
||||||
|
.container.loading3 .shape2 {
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
}
|
||||||
|
.container.loading3 .shape3 {
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
}
|
||||||
|
.container.loading3 .shape4 {
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .shape {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
.container .shape.shape1 {
|
||||||
|
left: 0;
|
||||||
|
background-color: #1890FF;
|
||||||
|
}
|
||||||
|
.container .shape.shape2 {
|
||||||
|
right: 0;
|
||||||
|
background-color: #91CB74;
|
||||||
|
}
|
||||||
|
.container .shape.shape3 {
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #FAC858;
|
||||||
|
}
|
||||||
|
.container .shape.shape4 {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #EE6666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading3 .shape1 {
|
||||||
|
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation3shape1 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(5px, 5px);
|
||||||
|
transform: translate(5px, 5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation3shape1 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(5px, 5px);
|
||||||
|
transform: translate(5px, 5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading3 .shape2 {
|
||||||
|
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation3shape2 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-5px, 5px);
|
||||||
|
transform: translate(-5px, 5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation3shape2 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-5px, 5px);
|
||||||
|
transform: translate(-5px, 5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading3 .shape3 {
|
||||||
|
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation3shape3 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(5px, -5px);
|
||||||
|
transform: translate(5px, -5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation3shape3 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(5px, -5px);
|
||||||
|
transform: translate(5px, -5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading3 .shape4 {
|
||||||
|
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||||
|
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation3shape4 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-5px, -5px);
|
||||||
|
transform: translate(-5px, -5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation3shape4 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate(-5px, -5px);
|
||||||
|
transform: translate(-5px, -5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,222 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container loading5">
|
||||||
|
<view class="shape shape1"></view>
|
||||||
|
<view class="shape shape2"></view>
|
||||||
|
<view class="shape shape3"></view>
|
||||||
|
<view class="shape shape4"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'loading5',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped="true">
|
||||||
|
.container {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.loading5 .shape {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .shape {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
.container .shape.shape1 {
|
||||||
|
left: 0;
|
||||||
|
background-color: #1890FF;
|
||||||
|
}
|
||||||
|
.container .shape.shape2 {
|
||||||
|
right: 0;
|
||||||
|
background-color: #91CB74;
|
||||||
|
}
|
||||||
|
.container .shape.shape3 {
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #FAC858;
|
||||||
|
}
|
||||||
|
.container .shape.shape4 {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #EE6666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading5 .shape1 {
|
||||||
|
animation: animation5shape1 2s ease 0s infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation5shape1 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(0, 15px);
|
||||||
|
transform: translate(0, 15px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(15px, 15px);
|
||||||
|
transform: translate(15px, 15px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(15px, 0);
|
||||||
|
transform: translate(15px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation5shape1 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(0, 15px);
|
||||||
|
transform: translate(0, 15px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(15px, 15px);
|
||||||
|
transform: translate(15px, 15px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(15px, 0);
|
||||||
|
transform: translate(15px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading5 .shape2 {
|
||||||
|
animation: animation5shape2 2s ease 0s infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation5shape2 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(-15px, 0);
|
||||||
|
transform: translate(-15px, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(-15px, 15px);
|
||||||
|
transform: translate(-15px, 15px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(0, 15px);
|
||||||
|
transform: translate(0, 15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation5shape2 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(-15px, 0);
|
||||||
|
transform: translate(-15px, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(-15px, 15px);
|
||||||
|
transform: translate(-15px, 15px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(0, 15px);
|
||||||
|
transform: translate(0, 15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading5 .shape3 {
|
||||||
|
animation: animation5shape3 2s ease 0s infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation5shape3 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(15px, 0);
|
||||||
|
transform: translate(15px, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(15px, -15px);
|
||||||
|
transform: translate(15px, -15px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(0, -15px);
|
||||||
|
transform: translate(0, -15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation5shape3 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(15px, 0);
|
||||||
|
transform: translate(15px, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(15px, -15px);
|
||||||
|
transform: translate(15px, -15px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(0, -15px);
|
||||||
|
transform: translate(0, -15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading5 .shape4 {
|
||||||
|
animation: animation5shape4 2s ease 0s infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation5shape4 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(0, -15px);
|
||||||
|
transform: translate(0, -15px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(-15px, -15px);
|
||||||
|
transform: translate(-15px, -15px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(-15px, 0);
|
||||||
|
transform: translate(-15px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation5shape4 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(0, -15px);
|
||||||
|
transform: translate(0, -15px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(-15px, -15px);
|
||||||
|
transform: translate(-15px, -15px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(-15px, 0);
|
||||||
|
transform: translate(-15px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container loading6">
|
||||||
|
<view class="shape shape1"></view>
|
||||||
|
<view class="shape shape2"></view>
|
||||||
|
<view class="shape shape3"></view>
|
||||||
|
<view class="shape shape4"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'loading6',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped="true">
|
||||||
|
.container {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.loading6 {
|
||||||
|
-webkit-animation: rotation 1s infinite;
|
||||||
|
animation: rotation 1s infinite;
|
||||||
|
}
|
||||||
|
.container.loading6 .shape {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.container .shape {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
.container .shape.shape1 {
|
||||||
|
left: 0;
|
||||||
|
background-color: #1890FF;
|
||||||
|
}
|
||||||
|
.container .shape.shape2 {
|
||||||
|
right: 0;
|
||||||
|
background-color: #91CB74;
|
||||||
|
}
|
||||||
|
.container .shape.shape3 {
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #FAC858;
|
||||||
|
}
|
||||||
|
.container .shape.shape4 {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #EE6666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.loading6 .shape1 {
|
||||||
|
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
|
||||||
|
animation: animation6shape1 2s linear 0s infinite normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation6shape1 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(0, 18px);
|
||||||
|
transform: translate(0, 18px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(18px, 18px);
|
||||||
|
transform: translate(18px, 18px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(18px, 0);
|
||||||
|
transform: translate(18px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation6shape1 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(0, 18px);
|
||||||
|
transform: translate(0, 18px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(18px, 18px);
|
||||||
|
transform: translate(18px, 18px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(18px, 0);
|
||||||
|
transform: translate(18px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading6 .shape2 {
|
||||||
|
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
|
||||||
|
animation: animation6shape2 2s linear 0s infinite normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation6shape2 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(-18px, 0);
|
||||||
|
transform: translate(-18px, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(-18px, 18px);
|
||||||
|
transform: translate(-18px, 18px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(0, 18px);
|
||||||
|
transform: translate(0, 18px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation6shape2 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(-18px, 0);
|
||||||
|
transform: translate(-18px, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(-18px, 18px);
|
||||||
|
transform: translate(-18px, 18px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(0, 18px);
|
||||||
|
transform: translate(0, 18px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading6 .shape3 {
|
||||||
|
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
|
||||||
|
animation: animation6shape3 2s linear 0s infinite normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation6shape3 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(18px, 0);
|
||||||
|
transform: translate(18px, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(18px, -18px);
|
||||||
|
transform: translate(18px, -18px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(0, -18px);
|
||||||
|
transform: translate(0, -18px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation6shape3 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(18px, 0);
|
||||||
|
transform: translate(18px, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(18px, -18px);
|
||||||
|
transform: translate(18px, -18px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(0, -18px);
|
||||||
|
transform: translate(0, -18px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading6 .shape4 {
|
||||||
|
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
|
||||||
|
animation: animation6shape4 2s linear 0s infinite normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animation6shape4 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(0, -18px);
|
||||||
|
transform: translate(0, -18px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(-18px, -18px);
|
||||||
|
transform: translate(-18px, -18px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(-18px, 0);
|
||||||
|
transform: translate(-18px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation6shape4 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: translate(0, -18px);
|
||||||
|
transform: translate(0, -18px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translate(-18px, -18px);
|
||||||
|
transform: translate(-18px, -18px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: translate(-18px, 0);
|
||||||
|
transform: translate(-18px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<Loading1 v-if="loadingType==1"/>
|
||||||
|
<Loading2 v-if="loadingType==2"/>
|
||||||
|
<Loading3 v-if="loadingType==3"/>
|
||||||
|
<Loading4 v-if="loadingType==4"/>
|
||||||
|
<Loading5 v-if="loadingType==5"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Loading1 from "./loading1.vue";
|
||||||
|
import Loading2 from "./loading2.vue";
|
||||||
|
import Loading3 from "./loading3.vue";
|
||||||
|
import Loading4 from "./loading4.vue";
|
||||||
|
import Loading5 from "./loading5.vue";
|
||||||
|
export default {
|
||||||
|
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
|
||||||
|
name: 'qiun-loading',
|
||||||
|
props: {
|
||||||
|
loadingType: {
|
||||||
|
type: Number,
|
||||||
|
default: 2
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
422
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js
Normal file
@ -0,0 +1,422 @@
|
|||||||
|
/*
|
||||||
|
* uCharts®
|
||||||
|
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
|
||||||
|
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||||
|
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||||
|
* 复制使用请保留本段注释,感谢支持开源!
|
||||||
|
*
|
||||||
|
* uCharts®官方网站
|
||||||
|
* https://www.uCharts.cn
|
||||||
|
*
|
||||||
|
* 开源地址:
|
||||||
|
* https://gitee.com/uCharts/uCharts
|
||||||
|
*
|
||||||
|
* uni-app插件市场地址:
|
||||||
|
* http://ext.dcloud.net.cn/plugin?id=271
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 通用配置项
|
||||||
|
|
||||||
|
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
|
||||||
|
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||||
|
|
||||||
|
const cfe = {
|
||||||
|
//demotype为自定义图表类型
|
||||||
|
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
|
||||||
|
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型例如最后的"demotype"
|
||||||
|
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
|
||||||
|
//instance为实例变量承载属性,option为eopts承载属性,不要删除
|
||||||
|
"instance": {},
|
||||||
|
"option": {},
|
||||||
|
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
||||||
|
"formatter":{
|
||||||
|
"tooltipDemo1":function(res){
|
||||||
|
let result = ''
|
||||||
|
for (let i in res) {
|
||||||
|
if (i == 0) {
|
||||||
|
result += res[i].axisValueLabel + '年销售额'
|
||||||
|
}
|
||||||
|
let value = '--'
|
||||||
|
if (res[i].data !== null) {
|
||||||
|
value = res[i].data
|
||||||
|
}
|
||||||
|
// #ifdef H5
|
||||||
|
result += '\n' + res[i].seriesName + ':' + value + ' 万元'
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
result += '<br/>' + res[i].marker + res[i].seriesName + ':' + value + ' 万元'
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
legendFormat:function(name){
|
||||||
|
return "自定义图例+"+name;
|
||||||
|
},
|
||||||
|
yAxisFormatDemo:function (value, index) {
|
||||||
|
return value + '元';
|
||||||
|
},
|
||||||
|
seriesFormatDemo:function(res){
|
||||||
|
return res.name + '年' + res.value + '元';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在eopts参数,会将demotype与eopts中option合并后渲染图表。
|
||||||
|
"demotype":{
|
||||||
|
"color": color,
|
||||||
|
//在这里填写echarts的option即可
|
||||||
|
|
||||||
|
},
|
||||||
|
//下面是自定义配置,请添加项目所需的通用配置
|
||||||
|
"column": {
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"text": ''
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"trigger": 'axis'
|
||||||
|
},
|
||||||
|
"grid": {
|
||||||
|
"top": 30,
|
||||||
|
"bottom": 50,
|
||||||
|
"right": 15,
|
||||||
|
"left": 40
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"bottom": 'left',
|
||||||
|
},
|
||||||
|
"toolbox": {
|
||||||
|
"show": false,
|
||||||
|
},
|
||||||
|
"xAxis": {
|
||||||
|
"type": 'category',
|
||||||
|
"axisLabel": {
|
||||||
|
"color": '#666666'
|
||||||
|
},
|
||||||
|
"axisLine": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": '#CCCCCC'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"boundaryGap": true,
|
||||||
|
"data": []
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"type": 'value',
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"color": '#666666'
|
||||||
|
},
|
||||||
|
"axisLine": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": '#CCCCCC'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '',
|
||||||
|
"type": 'bar',
|
||||||
|
"data": [],
|
||||||
|
"barwidth": 20,
|
||||||
|
"label": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#666666",
|
||||||
|
"position": 'top',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"line": {
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"text": ''
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"trigger": 'axis'
|
||||||
|
},
|
||||||
|
"grid": {
|
||||||
|
"top": 30,
|
||||||
|
"bottom": 50,
|
||||||
|
"right": 15,
|
||||||
|
"left": 40
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"bottom": 'left',
|
||||||
|
},
|
||||||
|
"toolbox": {
|
||||||
|
"show": false,
|
||||||
|
},
|
||||||
|
"xAxis": {
|
||||||
|
"type": 'category',
|
||||||
|
"axisLabel": {
|
||||||
|
"color": '#666666'
|
||||||
|
},
|
||||||
|
"axisLine": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": '#CCCCCC'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"boundaryGap": true,
|
||||||
|
"data": []
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"type": 'value',
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"color": '#666666'
|
||||||
|
},
|
||||||
|
"axisLine": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": '#CCCCCC'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '',
|
||||||
|
"type": 'line',
|
||||||
|
"data": [],
|
||||||
|
"barwidth": 20,
|
||||||
|
"label": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#666666",
|
||||||
|
"position": 'top',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"area": {
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"text": ''
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"trigger": 'axis'
|
||||||
|
},
|
||||||
|
"grid": {
|
||||||
|
"top": 30,
|
||||||
|
"bottom": 50,
|
||||||
|
"right": 15,
|
||||||
|
"left": 40
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"bottom": 'left',
|
||||||
|
},
|
||||||
|
"toolbox": {
|
||||||
|
"show": false,
|
||||||
|
},
|
||||||
|
"xAxis": {
|
||||||
|
"type": 'category',
|
||||||
|
"axisLabel": {
|
||||||
|
"color": '#666666'
|
||||||
|
},
|
||||||
|
"axisLine": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": '#CCCCCC'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"boundaryGap": true,
|
||||||
|
"data": []
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"type": 'value',
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"color": '#666666'
|
||||||
|
},
|
||||||
|
"axisLine": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": '#CCCCCC'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '',
|
||||||
|
"type": 'line',
|
||||||
|
"data": [],
|
||||||
|
"areaStyle": {},
|
||||||
|
"label": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#666666",
|
||||||
|
"position": 'top',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"pie": {
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"text": ''
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"trigger": 'item'
|
||||||
|
},
|
||||||
|
"grid": {
|
||||||
|
"top": 40,
|
||||||
|
"bottom": 30,
|
||||||
|
"right": 15,
|
||||||
|
"left": 15
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"bottom": 'left',
|
||||||
|
},
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '',
|
||||||
|
"type": 'pie',
|
||||||
|
"data": [],
|
||||||
|
"radius": '50%',
|
||||||
|
"label": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#666666",
|
||||||
|
"position": 'top',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"ring": {
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"text": ''
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"trigger": 'item'
|
||||||
|
},
|
||||||
|
"grid": {
|
||||||
|
"top": 40,
|
||||||
|
"bottom": 30,
|
||||||
|
"right": 15,
|
||||||
|
"left": 15
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"bottom": 'left',
|
||||||
|
},
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '',
|
||||||
|
"type": 'pie',
|
||||||
|
"data": [],
|
||||||
|
"radius": ['40%', '70%'],
|
||||||
|
"avoidLabelOverlap": false,
|
||||||
|
"label": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#666666",
|
||||||
|
"position": 'top',
|
||||||
|
},
|
||||||
|
"labelLine": {
|
||||||
|
"show": true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"rose": {
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"text": ''
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"trigger": 'item'
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"top": 'bottom'
|
||||||
|
},
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '',
|
||||||
|
"type": 'pie',
|
||||||
|
"data": [],
|
||||||
|
"radius": "55%",
|
||||||
|
"center": ['50%', '50%'],
|
||||||
|
"roseType": 'area',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"funnel": {
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"text": ''
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"trigger": 'item',
|
||||||
|
"formatter": "{b} : {c}%"
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"top": 'bottom'
|
||||||
|
},
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '',
|
||||||
|
"type": 'funnel',
|
||||||
|
"left": '10%',
|
||||||
|
"top": 60,
|
||||||
|
"bottom": 60,
|
||||||
|
"width": '80%',
|
||||||
|
"min": 0,
|
||||||
|
"max": 100,
|
||||||
|
"minSize": '0%',
|
||||||
|
"maxSize": '100%',
|
||||||
|
"sort": 'descending',
|
||||||
|
"gap": 2,
|
||||||
|
"label": {
|
||||||
|
"show": true,
|
||||||
|
"position": 'inside'
|
||||||
|
},
|
||||||
|
"labelLine": {
|
||||||
|
"length": 10,
|
||||||
|
"lineStyle": {
|
||||||
|
"width": 1,
|
||||||
|
"type": 'solid'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"itemStyle": {
|
||||||
|
"bordercolor": '#fff',
|
||||||
|
"borderwidth": 1
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"label": {
|
||||||
|
"fontSize": 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"data": [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"gauge": {
|
||||||
|
"color": color,
|
||||||
|
"tooltip": {
|
||||||
|
"formatter": '{a} <br/>{b} : {c}%'
|
||||||
|
},
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '业务指标',
|
||||||
|
"type": 'gauge',
|
||||||
|
"detail": {"formatter": '{value}%'},
|
||||||
|
"data": [{"value": 50, "name": '完成率'}]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"candle": {
|
||||||
|
"xAxis": {
|
||||||
|
"data": []
|
||||||
|
},
|
||||||
|
"yAxis": {},
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"text": ''
|
||||||
|
},
|
||||||
|
"dataZoom": [{
|
||||||
|
"type": 'inside',
|
||||||
|
"xAxisIndex": [0, 1],
|
||||||
|
"start": 10,
|
||||||
|
"end": 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"show": true,
|
||||||
|
"xAxisIndex": [0, 1],
|
||||||
|
"type": 'slider',
|
||||||
|
"bottom": 10,
|
||||||
|
"start": 10,
|
||||||
|
"end": 100
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"seriesTemplate": {
|
||||||
|
"name": '',
|
||||||
|
"type": 'k',
|
||||||
|
"data": [],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default cfe;
|
||||||
606
uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
Normal file
@ -0,0 +1,606 @@
|
|||||||
|
/*
|
||||||
|
* uCharts®
|
||||||
|
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
|
||||||
|
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||||
|
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||||
|
* 复制使用请保留本段注释,感谢支持开源!
|
||||||
|
*
|
||||||
|
* uCharts®官方网站
|
||||||
|
* https://www.uCharts.cn
|
||||||
|
*
|
||||||
|
* 开源地址:
|
||||||
|
* https://gitee.com/uCharts/uCharts
|
||||||
|
*
|
||||||
|
* uni-app插件市场地址:
|
||||||
|
* http://ext.dcloud.net.cn/plugin?id=271
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
|
||||||
|
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||||
|
|
||||||
|
//事件转换函数,主要用作格式化x轴为时间轴,根据需求自行修改
|
||||||
|
const formatDateTime = (timeStamp, returnType)=>{
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(timeStamp * 1000);
|
||||||
|
var y = date.getFullYear();
|
||||||
|
var m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? ('0' + m) : m;
|
||||||
|
var d = date.getDate();
|
||||||
|
d = d < 10 ? ('0' + d) : d;
|
||||||
|
var h = date.getHours();
|
||||||
|
h = h < 10 ? ('0' + h) : h;
|
||||||
|
var minute = date.getMinutes();
|
||||||
|
var second = date.getSeconds();
|
||||||
|
minute = minute < 10 ? ('0' + minute) : minute;
|
||||||
|
second = second < 10 ? ('0' + second) : second;
|
||||||
|
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
|
||||||
|
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
|
||||||
|
if(returnType == 'h:m'){return h +':' + minute;}
|
||||||
|
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
|
||||||
|
return [y, m, d, h, minute, second];
|
||||||
|
}
|
||||||
|
|
||||||
|
const cfu = {
|
||||||
|
//demotype为自定义图表类型,一般不需要自定义图表类型,只需要改根节点上对应的类型即可
|
||||||
|
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
|
||||||
|
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
|
||||||
|
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype"
|
||||||
|
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories
|
||||||
|
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
|
||||||
|
//instance为实例变量承载属性,不要删除
|
||||||
|
"instance":{},
|
||||||
|
//option为opts及eopts承载属性,不要删除
|
||||||
|
"option":{},
|
||||||
|
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
||||||
|
"formatter":{
|
||||||
|
"yAxisDemo1":function(val, index, opts){return val+'元'},
|
||||||
|
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
|
||||||
|
"xAxisDemo1":function(val, index, opts){return val+'年';},
|
||||||
|
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
|
||||||
|
"seriesDemo1":function(val, index, series, opts){return val+'元'},
|
||||||
|
"tooltipDemo1":function(item, category, index, opts){
|
||||||
|
if(index==0){
|
||||||
|
return '随便用'+item.data+'年'
|
||||||
|
}else{
|
||||||
|
return '其他我没改'+item.data+'天'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pieDemo":function(val, index, series, opts){
|
||||||
|
if(index !== undefined){
|
||||||
|
return series[index].name+':'+series[index].data+'元'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
|
||||||
|
"demotype":{
|
||||||
|
//我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
|
||||||
|
"type": "line",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,10,0,15],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": true,
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"gridType": "dash",
|
||||||
|
"dashLength": 2,
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"line": {
|
||||||
|
"type": "curve",
|
||||||
|
"width": 2
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//下面是自定义配置,请添加项目所需的通用配置
|
||||||
|
"pie":{
|
||||||
|
"type": "pie",
|
||||||
|
"color": color,
|
||||||
|
"padding": [5,5,5,5],
|
||||||
|
"extra": {
|
||||||
|
"pie": {
|
||||||
|
"activeOpacity": 0.5,
|
||||||
|
"activeRadius": 10,
|
||||||
|
"offsetAngle": 0,
|
||||||
|
"labelWidth": 15,
|
||||||
|
"border": true,
|
||||||
|
"borderWidth": 3,
|
||||||
|
"borderColor": "#FFFFFF"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ring":{
|
||||||
|
"type": "ring",
|
||||||
|
"color": color,
|
||||||
|
"padding": [5,5,5,5],
|
||||||
|
"rotate": false,
|
||||||
|
"dataLabel": true,
|
||||||
|
"legend": {
|
||||||
|
"show": true,
|
||||||
|
"position": "right",
|
||||||
|
"lineHeight": 25,
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"name": "收益率",
|
||||||
|
"fontSize": 15,
|
||||||
|
"color": "#666666"
|
||||||
|
},
|
||||||
|
"subtitle": {
|
||||||
|
"name": "70%",
|
||||||
|
"fontSize": 25,
|
||||||
|
"color": "#7cb5ec"
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"ring": {
|
||||||
|
"ringWidth":30,
|
||||||
|
"activeOpacity": 0.5,
|
||||||
|
"activeRadius": 10,
|
||||||
|
"offsetAngle": 0,
|
||||||
|
"labelWidth": 15,
|
||||||
|
"border": true,
|
||||||
|
"borderWidth": 3,
|
||||||
|
"borderColor": "#FFFFFF"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"rose":{
|
||||||
|
"type": "rose",
|
||||||
|
"color": color,
|
||||||
|
"padding": [5,5,5,5],
|
||||||
|
"legend": {
|
||||||
|
"show": true,
|
||||||
|
"position": "left",
|
||||||
|
"lineHeight": 25,
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"rose": {
|
||||||
|
"type": "area",
|
||||||
|
"minRadius": 50,
|
||||||
|
"activeOpacity": 0.5,
|
||||||
|
"activeRadius": 10,
|
||||||
|
"offsetAngle": 0,
|
||||||
|
"labelWidth": 15,
|
||||||
|
"border": false,
|
||||||
|
"borderWidth": 2,
|
||||||
|
"borderColor": "#FFFFFF"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"word":{
|
||||||
|
"type": "word",
|
||||||
|
"color": color,
|
||||||
|
"extra": {
|
||||||
|
"word": {
|
||||||
|
"type": "normal",
|
||||||
|
"autoColors": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"funnel":{
|
||||||
|
"type": "funnel",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,15,0,15],
|
||||||
|
"extra": {
|
||||||
|
"funnel": {
|
||||||
|
"activeOpacity": 0.3,
|
||||||
|
"activeWidth": 10,
|
||||||
|
"border": true,
|
||||||
|
"borderWidth": 2,
|
||||||
|
"borderColor": "#FFFFFF",
|
||||||
|
"fillOpacity": 1,
|
||||||
|
"labelAlign": "right"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"map":{
|
||||||
|
"type": "map",
|
||||||
|
"color": color,
|
||||||
|
"padding": [0,0,0,0],
|
||||||
|
"dataLabel": true,
|
||||||
|
"extra": {
|
||||||
|
"map": {
|
||||||
|
"border": true,
|
||||||
|
"borderWidth": 1,
|
||||||
|
"borderColor": "#666666",
|
||||||
|
"fillOpacity": 0.6,
|
||||||
|
"activeBorderColor": "#F04864",
|
||||||
|
"activeFillColor": "#FACC14",
|
||||||
|
"activeFillOpacity": 1
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"arcbar":{
|
||||||
|
"type": "arcbar",
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"name": "百分比",
|
||||||
|
"fontSize": 25,
|
||||||
|
"color": "#00FF00"
|
||||||
|
},
|
||||||
|
"subtitle": {
|
||||||
|
"name": "默认标题",
|
||||||
|
"fontSize": 15,
|
||||||
|
"color": "#666666"
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"arcbar": {
|
||||||
|
"type": "default",
|
||||||
|
"width": 12,
|
||||||
|
"backgroundColor": "#E9E9E9",
|
||||||
|
"startAngle": 0.75,
|
||||||
|
"endAngle": 0.25,
|
||||||
|
"gap": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line":{
|
||||||
|
"type": "line",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,10,0,15],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": true,
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"gridType": "dash",
|
||||||
|
"dashLength": 2,
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"line": {
|
||||||
|
"type": "straight",
|
||||||
|
"width": 2,
|
||||||
|
"activeType": "hollow"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tline":{
|
||||||
|
"type": "line",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,10,0,15],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": false,
|
||||||
|
"boundaryGap":"justify",
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"gridType": "dash",
|
||||||
|
"dashLength": 2,
|
||||||
|
"data":[
|
||||||
|
{
|
||||||
|
"min":0,
|
||||||
|
"max":80
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"line": {
|
||||||
|
"type": "curve",
|
||||||
|
"width": 2,
|
||||||
|
"activeType": "hollow"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tarea":{
|
||||||
|
"type": "area",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,10,0,15],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": true,
|
||||||
|
"boundaryGap":"justify",
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"gridType": "dash",
|
||||||
|
"dashLength": 2,
|
||||||
|
"data":[
|
||||||
|
{
|
||||||
|
"min":0,
|
||||||
|
"max":80
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"area": {
|
||||||
|
"type": "curve",
|
||||||
|
"opacity": 0.2,
|
||||||
|
"addLine": true,
|
||||||
|
"width": 2,
|
||||||
|
"gradient": true,
|
||||||
|
"activeType": "hollow"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"column":{
|
||||||
|
"type": "column",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,15,0,5],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": true,
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"data":[{"min":0}]
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"column": {
|
||||||
|
"type": "group",
|
||||||
|
"width": 30,
|
||||||
|
"activeBgColor": "#000000",
|
||||||
|
"activeBgOpacity": 0.08
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mount":{
|
||||||
|
"type": "mount",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,15,0,5],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": true,
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"data":[{"min":0}]
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"mount": {
|
||||||
|
"type": "mount",
|
||||||
|
"widthRatio": 1.5,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bar":{
|
||||||
|
"type": "bar",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,30,0,5],
|
||||||
|
"xAxis": {
|
||||||
|
"boundaryGap":"justify",
|
||||||
|
"disableGrid":false,
|
||||||
|
"min":0,
|
||||||
|
"axisLine":false
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"bar": {
|
||||||
|
"type": "group",
|
||||||
|
"width": 30,
|
||||||
|
"meterBorde": 1,
|
||||||
|
"meterFillColor": "#FFFFFF",
|
||||||
|
"activeBgColor": "#000000",
|
||||||
|
"activeBgOpacity": 0.08
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"area":{
|
||||||
|
"type": "area",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,15,0,15],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": true,
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"gridType": "dash",
|
||||||
|
"dashLength": 2,
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"area": {
|
||||||
|
"type": "straight",
|
||||||
|
"opacity": 0.2,
|
||||||
|
"addLine": true,
|
||||||
|
"width": 2,
|
||||||
|
"gradient": false,
|
||||||
|
"activeType": "hollow"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"radar":{
|
||||||
|
"type": "radar",
|
||||||
|
"color": color,
|
||||||
|
"padding": [5,5,5,5],
|
||||||
|
"dataLabel": false,
|
||||||
|
"legend": {
|
||||||
|
"show": true,
|
||||||
|
"position": "right",
|
||||||
|
"lineHeight": 25,
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"radar": {
|
||||||
|
"gridType": "radar",
|
||||||
|
"gridColor": "#CCCCCC",
|
||||||
|
"gridCount": 3,
|
||||||
|
"opacity": 0.2,
|
||||||
|
"max": 200,
|
||||||
|
"labelShow": true
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"gauge":{
|
||||||
|
"type": "gauge",
|
||||||
|
"color": color,
|
||||||
|
"title": {
|
||||||
|
"name": "66Km/H",
|
||||||
|
"fontSize": 25,
|
||||||
|
"color": "#2fc25b",
|
||||||
|
"offsetY": 50
|
||||||
|
},
|
||||||
|
"subtitle": {
|
||||||
|
"name": "实时速度",
|
||||||
|
"fontSize": 15,
|
||||||
|
"color": "#1890ff",
|
||||||
|
"offsetY": -50
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"gauge": {
|
||||||
|
"type": "default",
|
||||||
|
"width": 30,
|
||||||
|
"labelColor": "#666666",
|
||||||
|
"startAngle": 0.75,
|
||||||
|
"endAngle": 0.25,
|
||||||
|
"startNumber": 0,
|
||||||
|
"endNumber": 100,
|
||||||
|
"labelFormat": "",
|
||||||
|
"splitLine": {
|
||||||
|
"fixRadius": 0,
|
||||||
|
"splitNumber": 10,
|
||||||
|
"width": 30,
|
||||||
|
"color": "#FFFFFF",
|
||||||
|
"childNumber": 5,
|
||||||
|
"childWidth": 12
|
||||||
|
},
|
||||||
|
"pointer": {
|
||||||
|
"width": 24,
|
||||||
|
"color": "auto"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"candle":{
|
||||||
|
"type": "candle",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,15,0,15],
|
||||||
|
"enableScroll": true,
|
||||||
|
"enableMarkLine": true,
|
||||||
|
"dataLabel": false,
|
||||||
|
"xAxis": {
|
||||||
|
"labelCount": 4,
|
||||||
|
"itemCount": 40,
|
||||||
|
"disableGrid": true,
|
||||||
|
"gridColor": "#CCCCCC",
|
||||||
|
"gridType": "solid",
|
||||||
|
"dashLength": 4,
|
||||||
|
"scrollShow": true,
|
||||||
|
"scrollAlign": "left",
|
||||||
|
"scrollColor": "#A6A6A6",
|
||||||
|
"scrollBackgroundColor": "#EFEBEF"
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"candle": {
|
||||||
|
"color": {
|
||||||
|
"upLine": "#f04864",
|
||||||
|
"upFill": "#f04864",
|
||||||
|
"downLine": "#2fc25b",
|
||||||
|
"downFill": "#2fc25b"
|
||||||
|
},
|
||||||
|
"average": {
|
||||||
|
"show": true,
|
||||||
|
"name": ["MA5","MA10","MA30"],
|
||||||
|
"day": [5,10,20],
|
||||||
|
"color": ["#1890ff","#2fc25b","#facc14"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"markLine": {
|
||||||
|
"type": "dash",
|
||||||
|
"dashLength": 5,
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"value": 2150,
|
||||||
|
"lineColor": "#f04864",
|
||||||
|
"showLabel": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 2350,
|
||||||
|
"lineColor": "#f04864",
|
||||||
|
"showLabel": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mix":{
|
||||||
|
"type": "mix",
|
||||||
|
"color": color,
|
||||||
|
"padding": [15,15,0,15],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": true,
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"disabled": false,
|
||||||
|
"disableGrid": false,
|
||||||
|
"splitNumber": 5,
|
||||||
|
"gridType": "dash",
|
||||||
|
"dashLength": 4,
|
||||||
|
"gridColor": "#CCCCCC",
|
||||||
|
"padding": 10,
|
||||||
|
"showTitle": true,
|
||||||
|
"data": []
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"mix": {
|
||||||
|
"column": {
|
||||||
|
"width": 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scatter":{
|
||||||
|
"type": "scatter",
|
||||||
|
"color":color,
|
||||||
|
"padding":[15,15,0,15],
|
||||||
|
"dataLabel":false,
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": false,
|
||||||
|
"gridType":"dash",
|
||||||
|
"splitNumber":5,
|
||||||
|
"boundaryGap":"justify",
|
||||||
|
"min":0
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"disableGrid": false,
|
||||||
|
"gridType":"dash",
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"scatter": {
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble":{
|
||||||
|
"type": "bubble",
|
||||||
|
"color":color,
|
||||||
|
"padding":[15,15,0,15],
|
||||||
|
"xAxis": {
|
||||||
|
"disableGrid": false,
|
||||||
|
"gridType":"dash",
|
||||||
|
"splitNumber":5,
|
||||||
|
"boundaryGap":"justify",
|
||||||
|
"min":0,
|
||||||
|
"max":250
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"disableGrid": false,
|
||||||
|
"gridType":"dash",
|
||||||
|
"data":[{
|
||||||
|
"min":0,
|
||||||
|
"max":150
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"bubble": {
|
||||||
|
"border":2,
|
||||||
|
"opacity": 0.5,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default cfu;
|
||||||
5
uni_modules/qiun-data-charts/js_sdk/u-charts/readme.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# uCharts JSSDK说明
|
||||||
|
1、如不使用uCharts组件,可直接引用u-charts.js,打包编译后会`自动压缩`,压缩后体积约为`120kb`。
|
||||||
|
2、如果120kb的体积仍需压缩,请手到uCharts官网通过在线定制选择您需要的图表。
|
||||||
|
3、config-ucharts.js为uCharts组件的用户配置文件,升级前请`自行备份config-ucharts.js`文件,以免被强制覆盖。
|
||||||
|
4、config-echarts.js为ECharts组件的用户配置文件,升级前请`自行备份config-echarts.js`文件,以免被强制覆盖。
|
||||||
7706
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
Normal file
18
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.min.js
vendored
Normal file
201
uni_modules/qiun-data-charts/license.md
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright [yyyy] [name of copyright owner]
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
80
uni_modules/qiun-data-charts/package.json
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
{
|
||||||
|
"id": "qiun-data-charts",
|
||||||
|
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
|
||||||
|
"version": "2.5.0-20230101",
|
||||||
|
"description": "uCharts 新增正负柱状图!支持H5及APP用 ucharts echarts 渲染图表,uniapp可视化首选组件",
|
||||||
|
"keywords": [
|
||||||
|
"ucharts",
|
||||||
|
"echarts",
|
||||||
|
"f2",
|
||||||
|
"图表",
|
||||||
|
"可视化"
|
||||||
|
],
|
||||||
|
"repository": "https://gitee.com/uCharts/uCharts",
|
||||||
|
"engines": {
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": "474119"
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/~qiun",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
84
uni_modules/qiun-data-charts/readme.md
Normal file
@ -0,0 +1,84 @@
|
|||||||
|

|
||||||
|
|
||||||
|
|
||||||
|
[](https://gitee.com/uCharts/uCharts/stargazers)
|
||||||
|
[](https://gitee.com/uCharts/uCharts/members)
|
||||||
|
[](https://www.apache.org/licenses/LICENSE-2.0.html)
|
||||||
|
[](https://www.npmjs.com/~qiun)
|
||||||
|
|
||||||
|
|
||||||
|
## uCharts简介
|
||||||
|
|
||||||
|
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro )、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等更多支持 canvas API 的平台。
|
||||||
|
|
||||||
|
## 官方网站
|
||||||
|
|
||||||
|
## [https://www.ucharts.cn](https://www.ucharts.cn)
|
||||||
|
|
||||||
|
## 快速体验
|
||||||
|
|
||||||
|
一套代码编到多个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!其他平台请自行编译。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## 致开发者
|
||||||
|
|
||||||
|
感谢各位开发者`五年`来对秋云及uCharts的支持,uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具,我们推出了新版官网,增加了在线定制、问答社区、在线配置等一些增值服务,为确保您能更好的应用图表组件,建议您先`仔细阅读官网指南`以及`常见问题`,而不是下载下来`直接使用`。如仍然不能解决,请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
|
||||||
|
|
||||||
|
## 视频教程
|
||||||
|
|
||||||
|
## [uCharts新手入门教程](https://www.bilibili.com/video/BV1qA411Q7se/?share_source=copy_web&vd_source=42a1242f9aaade6427736af69eb2e1d9)
|
||||||
|
|
||||||
|
|
||||||
|
## 社群支持
|
||||||
|
|
||||||
|
uCharts官方拥有5个2000人的QQ群及专属VIP会员群支持,庞大的用户量证明我们一直在努力,请各位放心使用!uCharts的开源图表组件的开发,团队付出了大量的时间与精力,经过四来的考验,不会有比较明显的bug,请各位放心使用。如果您有更好的想法,可以在`码云提交Pull Requests`以帮助更多开发者完成需求,再次感谢各位对uCharts的鼓励与支持!
|
||||||
|
|
||||||
|
#### 官方交流群
|
||||||
|
- 交流群1:371774600(已满)
|
||||||
|
- 交流群2:619841586(已满)
|
||||||
|
- 交流群3:955340127(已满)
|
||||||
|
- 交流群4:641669795(已满)
|
||||||
|
- 交流群5:236294809(只能扫码加入)
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
- 口令`uniapp`
|
||||||
|
|
||||||
|
#### 专属VIP会员群
|
||||||
|
- 开通会员后详见【账号详情】页面中顶部的滚动通知
|
||||||
|
- 口令`您的用户ID`
|
||||||
|
|
||||||
|
## 版权信息
|
||||||
|
|
||||||
|
uCharts始终坚持开源,遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议,意味着您无需支付任何费用,即可将uCharts应用到您的产品中。
|
||||||
|
|
||||||
|
注意:这并不意味着您可以将uCharts应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷或法律问题,uCharts相关方及秋云科技不承担任何责任。
|
||||||
|
|
||||||
|
## 合作伙伴
|
||||||
|
|
||||||
|
[](https://www.diygw.com/)
|
||||||
|
[](https://gitee.com/howcode/has-chat)
|
||||||
|
[](https://www.uviewui.com/)
|
||||||
|
[](https://ext.dcloud.net.cn/plugin?id=7088)
|
||||||
|
[](https://ext.dcloud.net.cn/publisher?id=202)
|
||||||
|
[](https://www.firstui.cn/)
|
||||||
|
[](https://ext.dcloud.net.cn/plugin?id=5169)
|
||||||
|
[](https://www.graceui.com/)
|
||||||
|
|
||||||
|
|
||||||
|
## 更新记录
|
||||||
|
|
||||||
|
详见官网指南中说明,[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
|
||||||
|
|
||||||
|
|
||||||
|
## 相关链接
|
||||||
|
- [uCharts官网](https://www.ucharts.cn)
|
||||||
|
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
|
||||||
|
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers)
|
||||||
|
- [uCharts npm开源地址](https://www.ucharts.cn)
|
||||||
|
- [ECharts官网](https://echarts.apache.org/zh/index.html)
|
||||||
|
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
|
||||||
|
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1)
|
||||||
23
uni_modules/qiun-data-charts/static/app-plus/echarts.min.js
vendored
Normal file
23
uni_modules/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
@ -146,10 +146,13 @@ class Calendar {
|
|||||||
year: dateObj.year,
|
year: dateObj.year,
|
||||||
date: i,
|
date: i,
|
||||||
multiple: this.range ? checked : false,
|
multiple: this.range ? checked : false,
|
||||||
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this
|
||||||
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
.multipleStatus.after),
|
||||||
|
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this
|
||||||
|
.multipleStatus.after),
|
||||||
month: dateObj.month,
|
month: dateObj.month,
|
||||||
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(
|
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !
|
||||||
|
dateCompare(
|
||||||
currentDate, this.endDate)),
|
currentDate, this.endDate)),
|
||||||
isToday,
|
isToday,
|
||||||
userChecked: false,
|
userChecked: false,
|
||||||
@ -389,8 +392,8 @@ function getDefaultSecond(hideSecond) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function dateCompare(startDate, endDate) {
|
function dateCompare(startDate, endDate) {
|
||||||
startDate = new Date(fixIosDateFormat(startDate))
|
startDate = new Date(fixIosDateFormat(startDate && typeof startDate === 'string' ? startDate.trim() : startDate))
|
||||||
endDate = new Date(fixIosDateFormat(endDate))
|
endDate = new Date(fixIosDateFormat(endDate && typeof endDate === 'string' ? endDate.trim() : endDate))
|
||||||
return startDate <= endDate
|
return startDate <= endDate
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,8 @@ const constant = {
|
|||||||
id: 'user_id',
|
id: 'user_id',
|
||||||
name: 'user_name',
|
name: 'user_name',
|
||||||
roles: 'user_roles',
|
roles: 'user_roles',
|
||||||
permissions: 'user_permissions'
|
permissions: 'user_permissions',
|
||||||
|
currentSiteId: 'current_site_id'
|
||||||
}
|
}
|
||||||
|
|
||||||
export default constant
|
export default constant
|
||||||
|
|||||||
27
utils/filters.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
export const formatNumber = (val) => {
|
||||||
|
if (val || [0, '0'].includes(val)) {
|
||||||
|
return val
|
||||||
|
} else {
|
||||||
|
return '-'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const formatDate = (val, toSeconds = false, onlyTime = false) => {
|
||||||
|
if (!val) return ''
|
||||||
|
const date = new Date(val)
|
||||||
|
const month = date.getMonth() + 1,
|
||||||
|
day = date.getDate()
|
||||||
|
const hours = date.getHours(),
|
||||||
|
minuets = date.getMinutes(),
|
||||||
|
seconds = date.getSeconds();
|
||||||
|
const front = `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day}`
|
||||||
|
const back =
|
||||||
|
`${hours<10 ? '0'+hours : hours}:${minuets<10 ? '0'+minuets : minuets}:${seconds<10 ? '0'+seconds : seconds}`
|
||||||
|
if (onlyTime) return back
|
||||||
|
if (!toSeconds) {
|
||||||
|
return front
|
||||||
|
} else {
|
||||||
|
return front + '' + back
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -21,16 +21,25 @@ const request = config => {
|
|||||||
config.url = url
|
config.url = url
|
||||||
}
|
}
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
const requestUrl = config.baseUrl || baseUrl + config.url
|
||||||
|
const requestMethod = (config.method || 'get').toUpperCase()
|
||||||
uni.request({
|
uni.request({
|
||||||
method: config.method || 'get',
|
method: config.method || 'get',
|
||||||
timeout: config.timeout || timeout,
|
timeout: config.timeout || timeout,
|
||||||
url: config.baseUrl || baseUrl + config.url,
|
url: requestUrl,
|
||||||
data: config.data,
|
data: config.data,
|
||||||
header: config.header,
|
header: config.header,
|
||||||
dataType: 'json'
|
dataType: 'json'
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
let [error, res] = response
|
let [error, res] = response
|
||||||
if (error) {
|
if (error) {
|
||||||
|
const errorType = error?.errMsg || error?.message || 'UNKNOWN_ERROR'
|
||||||
|
console.error('[request:error]', {
|
||||||
|
url: requestUrl,
|
||||||
|
method: requestMethod,
|
||||||
|
errorType,
|
||||||
|
rawError: error
|
||||||
|
})
|
||||||
toast('后端接口连接异常')
|
toast('后端接口连接异常')
|
||||||
reject('后端接口连接异常')
|
reject('后端接口连接异常')
|
||||||
return
|
return
|
||||||
@ -57,6 +66,15 @@ const request = config => {
|
|||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
let { message } = 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') {
|
if (message === 'Network Error') {
|
||||||
message = '后端接口连接异常'
|
message = '后端接口连接异常'
|
||||||
} else if (message.includes('timeout')) {
|
} else if (message.includes('timeout')) {
|
||||||
@ -64,6 +82,13 @@ const request = config => {
|
|||||||
} else if (message.includes('Request failed with status code')) {
|
} else if (message.includes('Request failed with status code')) {
|
||||||
message = '系统接口' + message.substr(message.length - 3) + '异常'
|
message = '系统接口' + message.substr(message.length - 3) + '异常'
|
||||||
}
|
}
|
||||||
|
console.error('[request:catch]', {
|
||||||
|
url: requestUrl,
|
||||||
|
method: requestMethod,
|
||||||
|
errorType,
|
||||||
|
message: rawMessage,
|
||||||
|
rawError: error
|
||||||
|
})
|
||||||
toast(message)
|
toast(message)
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
|
|||||||