初次提交
This commit is contained in:
244
pages/tabbar/components/dischargeChart/index.vue
Normal file
244
pages/tabbar/components/dischargeChart/index.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<zero-loading v-if="chartLoading" position="absolute"></zero-loading>
|
||||
<charts v-else :id="'pcChart'" :options="charge_option"></charts>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import charts from "@/components/charts/index";
|
||||
export default {
|
||||
components: {
|
||||
charts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
charge_option: {},
|
||||
stationId: null,
|
||||
chartLoading: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
activeTime: {
|
||||
type: String,
|
||||
default: 'day'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.GetChargeChart()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
activeTime: {
|
||||
handler(val) {
|
||||
if (val && this.stationId) {
|
||||
this.GetChargeChart()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getData() {
|
||||
this.GetChargeChart()
|
||||
},
|
||||
async GetChargeChart() {
|
||||
this.chartLoading = true
|
||||
//充放电曲线
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetKJYElecData({
|
||||
stationId: this.stationId,
|
||||
type: this.activeTime,
|
||||
})
|
||||
.then((res) => {
|
||||
self.chartLoading = false
|
||||
self.initChargeChart(res.data);
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
initChargeChart(val) {
|
||||
let x_data = [];
|
||||
let charge_data = [];
|
||||
let discharge_data = [];
|
||||
let pv_data = [];
|
||||
let benefit_data = [];
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((item) => {
|
||||
x_data.push(item.date);
|
||||
charge_data.push(item.chargeElec);
|
||||
discharge_data.push(item.dischargeElec);
|
||||
pv_data.push(item.pvChargeElec);
|
||||
benefit_data.push(item.income);
|
||||
});
|
||||
} else {
|
||||
x_data = [0, 0, 0, 0, 0, 0, 0];
|
||||
charge_data = [0, 0, 0, 0, 0, 0, 0];
|
||||
discharge_data = [0, 0, 0, 0, 0, 0, 0];
|
||||
pv_data = [0, 0, 0, 0, 0, 0, 0];
|
||||
benefit_data = [0, 0, 0, 0, 0, 0, 0];
|
||||
}
|
||||
//充放电图表
|
||||
this.charge_option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
textShadowBlur: 10, // 重点
|
||||
textShadowColor: 'transparent', // 重点
|
||||
},
|
||||
axisPointer: {},
|
||||
confine: true,
|
||||
position: function(point, params, dom, rect, size) {
|
||||
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||||
// 提示框位置
|
||||
var x = 0; // x坐标位置
|
||||
var y = 0; // y坐标位置
|
||||
|
||||
// 当前鼠标位置
|
||||
var pointX = point[0];
|
||||
var pointY = point[1];
|
||||
|
||||
// 外层div大小
|
||||
// var viewWidth = size.viewSize[0];
|
||||
// var viewHeight = size.viewSize[1];
|
||||
|
||||
// 提示框大小
|
||||
var boxWidth = size.contentSize[0];
|
||||
var boxHeight = size.contentSize[1];
|
||||
|
||||
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||||
if (boxWidth > pointX) {
|
||||
x = 5; // 自己定个x坐标值，以防出屏
|
||||
y -= 15; // 防止点被覆盖住，可根据情况自行调节
|
||||
} else {
|
||||
// 左边放的下
|
||||
x = pointX - boxWidth - 15;
|
||||
}
|
||||
|
||||
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||||
if (boxHeight + 20 > pointY) {
|
||||
y = pointY + 15;
|
||||
} else if (boxHeight > pointY) {
|
||||
y = 5;
|
||||
} else {
|
||||
// 上边放得下
|
||||
y += pointY - boxHeight;
|
||||
}
|
||||
return [x, y];
|
||||
},
|
||||
},
|
||||
color: ["#009C77", "#BFE49F", "#3977B1"],
|
||||
legend: {
|
||||
animation: false,
|
||||
right: "0",
|
||||
top: "0",
|
||||
icon: "rect",
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
data: [this.$t('homePage.home.charge'), this.$t('homePage.home.disCharge'), this.$t(
|
||||
'homePage.home.photovoltaicCharge')],
|
||||
},
|
||||
grid: {
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "12%",
|
||||
top: "18%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: x_data,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#A3A3A3",
|
||||
formatter: function(params) {
|
||||
let newParamsName = "";
|
||||
const paramsNameNumber = params.length; // 文字总长度
|
||||
const provideNumber = 11; //一行显示几个字
|
||||
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (let p = 0; p < rowNumber; p++) {
|
||||
const start = p * provideNumber;
|
||||
const end = start + provideNumber;
|
||||
const tempStr =
|
||||
p === rowNumber - 1 ?
|
||||
params.substring(start, paramsNameNumber) :
|
||||
params.substring(start, end) + "\n";
|
||||
newParamsName += tempStr;
|
||||
}
|
||||
} else {
|
||||
newParamsName = params;
|
||||
}
|
||||
return newParamsName;
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: this.$t('homePage.home.chargingandDischarging'),
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 20],
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
data: charge_data,
|
||||
type: "bar",
|
||||
name: this.$t('homePage.home.charge'),
|
||||
},
|
||||
{
|
||||
data: discharge_data,
|
||||
type: "bar",
|
||||
name: this.$t('homePage.home.disCharge'),
|
||||
},
|
||||
{
|
||||
data: pv_data,
|
||||
type: "bar",
|
||||
name: this.$t('homePage.home.photovoltaicCharge'),
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 500rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
186
pages/tabbar/components/environmentalControl/index.vue
Normal file
186
pages/tabbar/components/environmentalControl/index.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view class="warp padding-top-30 padding-bottom-30">
|
||||
<zero-loading v-if="loading" position="absolute"></zero-loading>
|
||||
<template v-if="airData.length && !loading">
|
||||
<view v-for="(item, index) in airData" :key="index" class="group-item" @click="showHistory(item)">
|
||||
<view class="history-icon">
|
||||
<image src="/static/aidex/images/history-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-title">
|
||||
<view class="section"></view>
|
||||
<view class="title">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="item-num">{{ toFix(item.value) }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="!airData.length && !loading">
|
||||
<view class="empty">{{ this.$t('homePage.home.noData') }}</view>
|
||||
</template>
|
||||
<historyModal :is-show.sync="histroyShow" :title="chartTitle" :params="hisParams"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import historyModal from '@/components/history-modal/index.vue'
|
||||
export default {
|
||||
components: { historyModal },
|
||||
data() {
|
||||
return {
|
||||
airData: [],
|
||||
stationId: null,
|
||||
histroyShow: false,
|
||||
chartTitle:'',
|
||||
hisParams:{},
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.getAirData()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showHistory(item){
|
||||
this.histroyShow = true
|
||||
this.hisParams = item
|
||||
this.chartTitle = item.name
|
||||
},
|
||||
toFix(val) {
|
||||
if (val) {
|
||||
const result = Number(val).toFixed(2);
|
||||
return result;
|
||||
} else if (val === 0) {
|
||||
return 0;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
async getAirData() {
|
||||
this.loading = true
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetAirCondition({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
this.airData = res.data
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: center;
|
||||
position: relative;
|
||||
|
||||
|
||||
.group-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 199rpx;
|
||||
height: 110rpx;
|
||||
justify-content: center;
|
||||
padding: 10rpx;
|
||||
background: #d7e9e548;
|
||||
border-radius: 10rpx;
|
||||
margin: 10rpx 10rpx;
|
||||
position: relative;
|
||||
|
||||
|
||||
.item-num {
|
||||
font-size: 36rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
padding-left: 15rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden; //文本超出隐藏
|
||||
text-overflow: ellipsis; //文本超出省略号替
|
||||
// text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.item-title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
padding-top: 10rpx;
|
||||
.section {
|
||||
height: 30rpx;
|
||||
width: 6rpx;
|
||||
background-color: #009c77;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 10rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; //文本超出省略号替
|
||||
color: #2a2a2a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
color: #2a2a2a;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.padding-top-30 {
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.padding-bottom-30 {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.history-icon {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 0rpx;
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
186
pages/tabbar/components/environmentalControl/position.vue
Normal file
186
pages/tabbar/components/environmentalControl/position.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view class="warp padding-top-30 padding-bottom-30">
|
||||
<zero-loading v-if="loading" position="absolute"></zero-loading>
|
||||
<template v-if="airData.length && !loading">
|
||||
<view v-for="(item, index) in airData" :key="index" class="group-item" >
|
||||
|
||||
<view class="item-title">
|
||||
<view class="section"></view>
|
||||
<view class="title">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="item-num">{{ toFix(item.value) }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="!airData.length && !loading">
|
||||
<view class="empty">{{ this.$t('homePage.home.noData') }}</view>
|
||||
</template>
|
||||
<historyModal :is-show.sync="histroyShow" :title="chartTitle" :params="hisParams"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import historyModal from '@/components/history-modal/index.vue'
|
||||
export default {
|
||||
components: { historyModal },
|
||||
data() {
|
||||
return {
|
||||
airData: [],
|
||||
stationId: null,
|
||||
histroyShow: false,
|
||||
chartTitle:'',
|
||||
hisParams:{},
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.getAirData()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showHistory(item){
|
||||
this.histroyShow = true
|
||||
this.hisParams = item
|
||||
this.chartTitle = item.name
|
||||
},
|
||||
toFix(val) {
|
||||
if (val) {
|
||||
const result = Number(val).toFixed(2);
|
||||
return result;
|
||||
} else if (val === 0) {
|
||||
return 0;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
async getAirData() {
|
||||
this.loading = true
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
permissionId: 928,
|
||||
pageLocation:'airData'
|
||||
})
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
this.airData = res.data
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: center;
|
||||
position: relative;
|
||||
|
||||
|
||||
.group-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 199rpx;
|
||||
height: 110rpx;
|
||||
justify-content: center;
|
||||
padding: 10rpx;
|
||||
background: #d7e9e548;
|
||||
border-radius: 10rpx;
|
||||
margin: 10rpx 10rpx;
|
||||
position: relative;
|
||||
|
||||
|
||||
.item-num {
|
||||
font-size: 36rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
padding-left: 15rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden; //文本超出隐藏
|
||||
text-overflow: ellipsis; //文本超出省略号替
|
||||
// text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.item-title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
padding-top: 10rpx;
|
||||
.section {
|
||||
height: 30rpx;
|
||||
width: 6rpx;
|
||||
background-color: #009c77;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 10rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; //文本超出省略号替
|
||||
color: #2a2a2a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
color: #2a2a2a;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.padding-top-30 {
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.padding-bottom-30 {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.history-icon {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 0rpx;
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
351
pages/tabbar/components/runChart/index.vue
Normal file
351
pages/tabbar/components/runChart/index.vue
Normal file
@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<zero-loading v-if="chartLoading" position="absolute"></zero-loading>
|
||||
<charts v-else :id="'pcChart'" :options="curve_option"></charts>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import charts from "@/components/charts/index";
|
||||
import {
|
||||
chartYIndex,
|
||||
beforeDayTime
|
||||
} from '@/common/common.js'
|
||||
export default {
|
||||
components: {
|
||||
charts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curve_option: {},
|
||||
stationId: null,
|
||||
name_data: [],
|
||||
color: ["#2D8CF0", "#19BE6B","#FF9900","#E46CBB"],
|
||||
colorList: [
|
||||
[{
|
||||
offset: 0.0,
|
||||
color: "rgba(45, 140, 240, 0.1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(25, 190, 107, 0.2)",
|
||||
},
|
||||
],
|
||||
[{
|
||||
offset: 0.0,
|
||||
color: "rgba(255, 153, 0, 0.1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(228, 108,187, 0.2)",
|
||||
},
|
||||
],
|
||||
],
|
||||
serviceList: [],
|
||||
time: [],
|
||||
chartLoading: false,
|
||||
nameArr: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
|
||||
},
|
||||
onShow() {
|
||||
console.log(123);
|
||||
this.time = beforeDayTime()
|
||||
this.GetRealtimeCurve()
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.time = beforeDayTime()
|
||||
this.GetRealtimeCurve()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getData(){
|
||||
this.time = beforeDayTime()
|
||||
this.GetRealtimeCurve()
|
||||
},
|
||||
async selectChartApi(val) {
|
||||
if (val && val.length) {
|
||||
this.chartLoading = false
|
||||
this.initCurveChart(val);
|
||||
} else {
|
||||
this.chartLoading = true
|
||||
//运行曲线
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetRealtimeCurve({
|
||||
beginTime: this.time[0],
|
||||
endTime: this.time[1],
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.chartLoading = false
|
||||
this.initCurveChart(res.data);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误:运行曲线");
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
async GetRealtimeCurve() {
|
||||
this.chartLoading = true
|
||||
//运行曲线
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicRealTimeCurve({
|
||||
beginTime: this.time[0],
|
||||
endTime: this.time[1],
|
||||
pageLocation: 'runChart',
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.selectChartApi(res.data);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误:运行曲线");
|
||||
});
|
||||
});
|
||||
},
|
||||
initCurveChart(val) {
|
||||
let x_data = []
|
||||
let valueArr = []
|
||||
this.nameArr = []
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((item, index) => {
|
||||
valueArr.push(item.list)
|
||||
this.nameArr.push(item.name)
|
||||
})
|
||||
val[0].list.forEach((el) => {
|
||||
x_data.push(el.date)
|
||||
})
|
||||
const valueArr2 = []
|
||||
valueArr.forEach((item, index) => {
|
||||
const arr = []
|
||||
item.forEach((item2, index2) => {
|
||||
arr.push(item2.digital)
|
||||
valueArr2[index] = arr
|
||||
})
|
||||
})
|
||||
this.serviceList = []
|
||||
valueArr2.forEach((item, index) => {
|
||||
this.serviceList.push({
|
||||
data: item,
|
||||
type: 'line',
|
||||
name: this.nameArr[index],
|
||||
showSymbol: false,
|
||||
yAxisIndex: chartYIndex(val[index]),
|
||||
color: this.color[index],
|
||||
lineStyle: {
|
||||
color: this.color[index]
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
this.colorList[index]
|
||||
),
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
} else {
|
||||
this.serviceList = [];
|
||||
this.nameArr = [];
|
||||
x_data = []
|
||||
}
|
||||
this.curve_option = {
|
||||
color: ["#2D8CF0", "#19BE6B","#FF9900","#E46CBB"],
|
||||
grid: {
|
||||
left: "17%",
|
||||
right: "13%",
|
||||
top: "15%",
|
||||
bottom: "25%",
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
textShadowBlur: 10, // 重点
|
||||
textShadowColor: 'transparent', // 重点
|
||||
},
|
||||
axisPointer: {},
|
||||
confine: true,
|
||||
position: function(point, params, dom, rect, size) {
|
||||
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||||
// 提示框位置
|
||||
var x = 0; // x坐标位置
|
||||
var y = 0; // y坐标位置
|
||||
|
||||
// 当前鼠标位置
|
||||
var pointX = point[0];
|
||||
var pointY = point[1];
|
||||
|
||||
// 外层div大小
|
||||
// var viewWidth = size.viewSize[0];
|
||||
// var viewHeight = size.viewSize[1];
|
||||
|
||||
// 提示框大小
|
||||
var boxWidth = size.contentSize[0];
|
||||
var boxHeight = size.contentSize[1];
|
||||
|
||||
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||||
if (boxWidth > pointX) {
|
||||
x = 5; // 自己定个x坐标值，以防出屏
|
||||
y -= 15; // 防止点被覆盖住，可根据情况自行调节
|
||||
} else {
|
||||
// 左边放的下
|
||||
x = pointX - boxWidth - 15;
|
||||
}
|
||||
|
||||
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||||
if (boxHeight + 20 > pointY) {
|
||||
y = pointY + 15;
|
||||
} else if (boxHeight > pointY) {
|
||||
y = 5;
|
||||
} else {
|
||||
// 上边放得下
|
||||
y += pointY - boxHeight;
|
||||
}
|
||||
return [x, y];
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'horizontal',
|
||||
icon: "rect",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: x_data,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#A3A3A3",
|
||||
formatter: function(params) {
|
||||
let newParamsName = "";
|
||||
const paramsNameNumber = params.length; // 文字总长度
|
||||
const provideNumber = 11; //一行显示几个字
|
||||
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (let p = 0; p < rowNumber; p++) {
|
||||
const start = p * provideNumber;
|
||||
const end = start + provideNumber;
|
||||
const tempStr =
|
||||
p === rowNumber - 1 ?
|
||||
params.substring(start, paramsNameNumber) :
|
||||
params.substring(start, end) + "\n";
|
||||
newParamsName += tempStr;
|
||||
}
|
||||
} else {
|
||||
newParamsName = params;
|
||||
}
|
||||
return newParamsName;
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [{
|
||||
name: this.$t('homePage.home.power'),
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 20],
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
|
||||
min: function(value) {
|
||||
return Math.floor(
|
||||
(Math.abs(value.min) < value.max ?
|
||||
-value.max * 1.05 :
|
||||
value.min * 1.05
|
||||
).toFixed(2)
|
||||
);
|
||||
},
|
||||
max: function(value) {
|
||||
return Math.ceil(
|
||||
(Math.abs(value.min) < value.max ?
|
||||
value.max * 1.05 :
|
||||
-value.min * 1.05
|
||||
).toFixed(2)
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "SOC(%)",
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 30],
|
||||
},
|
||||
type: "value",
|
||||
max: 100,
|
||||
min: -100,
|
||||
ming: 0,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: this.serviceList,
|
||||
};
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 500rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
211
pages/tabbar/components/stationData/common.vue
Normal file
211
pages/tabbar/components/stationData/common.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<zero-loading position="absolute" v-if="loading"></zero-loading>
|
||||
<template v-else>
|
||||
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/yxts.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.operationDays }}
|
||||
</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.safeDaysUnit') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zjrl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalCapacity | kwhFormat }}
|
||||
|
||||
</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalCapacity') }}({{
|
||||
panelData.totalCapacity | kwhUnitFormat
|
||||
}})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/xtzhl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ (panelData.systemEfficiency * 100).toFixed(2)
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.systemConversionEfficiency') }}(%)</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="postionDataList.length">
|
||||
<view class="group-item " v-for="item in postionDataList">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/dqgl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ item.value }}</view>
|
||||
<view class="item-title">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/dqgl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.currentPower | kWFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.currentPower') }}({{ panelData.currentPower | kwUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item " @click="showHistory($t('homePage.home.totalCharge'), 'totalCharge', 'bms', 'kWh', '')">
|
||||
<view class="history-icon">
|
||||
<image src="/static/aidex/images/history-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zcdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalChargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalCharge') }}({{ panelData.totalChargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item" @click="showHistory($t('homePage.home.totalDischarge'), 'totalDischarge', 'bms', 'kWh', '')">
|
||||
<view class="history-icon">
|
||||
<image src="/static/aidex/images/history-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zfdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalDischargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalDischarge') }}({{ panelData.totalDischargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/rcdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.dailyChargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.dailyCharge') }}({{ panelData.dailyChargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/rfdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.dailyDischargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.dailyDischarge') }}({{ panelData.dailyDischargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<historyModal :is-show.sync="histroyShow" :title="chartTitle" :params="hisParams" />
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import historyModal from '@/components/history-modal/index.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
panelData: {
|
||||
operationDays: 0,
|
||||
totalCapacity: 0,
|
||||
systemEfficiency: 0,
|
||||
currentPower: 0,
|
||||
totalChargeElec: 0,
|
||||
totalDischargeElec: 0,
|
||||
dailyChargeElec: 0,
|
||||
dailyDischargeElec: 0
|
||||
},
|
||||
stationId: null,
|
||||
loading: false,
|
||||
histroyShow: false,
|
||||
chartTitle: '',
|
||||
hisParams: {},
|
||||
postionDataList: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
historyModal
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.GetPcsTotalData()
|
||||
this.GetPositionStationData()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showHistory(name, modelCol, modelType, unit) {
|
||||
this.hisParams = {
|
||||
modelCol: modelCol,
|
||||
modelType: modelType,
|
||||
unit: unit
|
||||
}
|
||||
this.chartTitle = name
|
||||
this.histroyShow = true
|
||||
},
|
||||
GetPositionStationData() {
|
||||
this.loading = true
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.station
|
||||
.getStationPostionData({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'fire-screen-topLeft'
|
||||
})
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
this.postionDataList = res.data
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
async GetPcsTotalData() {
|
||||
this.loading = true
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetPcsTotalData({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
this.panelData = res.data;
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import url(./style/index.css);
|
||||
</style>
|
||||
96
pages/tabbar/components/stationData/style/index.css
Normal file
96
pages/tabbar/components/stationData/style/index.css
Normal file
@ -0,0 +1,96 @@
|
||||
.warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.group-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 199rpx;
|
||||
justify-content: center;
|
||||
padding: 10rpx;
|
||||
background: #d7e9e548;
|
||||
border-radius: 10rpx;
|
||||
margin: 10rpx 10rpx;
|
||||
|
||||
}
|
||||
|
||||
.group-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 199rpx;
|
||||
|
||||
justify-content: center;
|
||||
background: #d7e9e548;
|
||||
border-radius: 10rpx;
|
||||
margin: 10rpx 10rpx;
|
||||
position: relative;
|
||||
padding: 10rpx 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.history-icon {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 0rpx;
|
||||
}
|
||||
|
||||
.item-con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// margin-left: 15rpx;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.item-title {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #2a2a2a;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
/* white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; */
|
||||
}
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.item-num {
|
||||
font-size: 36rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
max-width: 90%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-unit {
|
||||
color: #cccccc;
|
||||
font-size: 16rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.padding-top-30 {
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.padding-bottom-30 {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
205
pages/tabbar/components/stationData/wsh.vue
Normal file
205
pages/tabbar/components/stationData/wsh.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<zero-loading position="absolute" v-if="loading"></zero-loading>
|
||||
<template v-else>
|
||||
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/yxts.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.operationDays }}
|
||||
</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.safeDaysUnit') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zjrl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalCapacity | kwhFormat }}
|
||||
|
||||
</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalCapacity') }}({{
|
||||
panelData.totalCapacity | kwhUnitFormat
|
||||
}})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/xtzhl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ (panelData.systemEfficiency * 100).toFixed(2)
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.systemConversionEfficiency') }}(%)</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/dqgl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.currentPower | kWFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.currentPower') }}({{ panelData.currentPower | kwUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item " @click="showHistory($t('homePage.home.totalCharge'), 'totalCharge', 'bms', 'kWh', '')">
|
||||
<view class="history-icon">
|
||||
<image src="/static/aidex/images/history-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zcdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalChargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalCharge') }}({{ panelData.totalChargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item" @click="showHistory($t('homePage.home.totalDischarge'), 'totalDischarge', 'bms', 'kWh', '')">
|
||||
<view class="history-icon">
|
||||
<image src="/static/aidex/images/history-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zfdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalDischargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalDischarge') }}({{ panelData.totalDischargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/rcdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.dailyChargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.dailyCharge') }}({{ panelData.dailyChargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/rfdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.dailyDischargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.dailyDischarge') }}({{ panelData.dailyDischargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/rfdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.dailyPowerGeneration | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.dayPhotovoltaic') }}({{ panelData.dailyPowerGeneration | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<historyModal :is-show.sync="histroyShow" :title="chartTitle" :params="hisParams" />
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import historyModal from '@/components/history-modal/index.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
panelData: {
|
||||
operationDays: 0,
|
||||
totalCapacity: 0,
|
||||
systemEfficiency: 0,
|
||||
currentPower: 0,
|
||||
totalChargeElec: 0,
|
||||
totalDischargeElec: 0,
|
||||
dailyChargeElec: 0,
|
||||
dailyDischargeElec: 0
|
||||
},
|
||||
stationId: null,
|
||||
loading: false,
|
||||
histroyShow: false,
|
||||
chartTitle: '',
|
||||
hisParams: {}
|
||||
}
|
||||
},
|
||||
components: { historyModal },
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.loading = true
|
||||
Promise.all([this.GetZZHBPowerGeneration(), this.GetPcsTotalData()]).finally((res) => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showHistory(name, modelCol, modelType, unit) {
|
||||
this.hisParams = {
|
||||
modelCol: modelCol,
|
||||
modelType: modelType,
|
||||
unit: unit
|
||||
}
|
||||
this.chartTitle = name
|
||||
this.histroyShow = true
|
||||
},
|
||||
async GetZZHBPowerGeneration() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetWSHPv({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
this.panelData = Object.assign(this.panelData, res.data);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
async GetPcsTotalData() {
|
||||
this.loading = true
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetPcsTotalData({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
this.panelData = Object.assign(this.panelData, res.data);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import url(./style/index.css);
|
||||
</style>
|
||||
206
pages/tabbar/components/stationData/zzhb.vue
Normal file
206
pages/tabbar/components/stationData/zzhb.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<view class="warp" >
|
||||
<zero-loading position="absolute" v-if="loading"></zero-loading>
|
||||
<template v-else>
|
||||
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/yxts.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.operationDays }}
|
||||
</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.safeDaysUnit') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zjrl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalCapacity | kwhFormat }}
|
||||
|
||||
</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalCapacity') }}({{
|
||||
panelData.totalCapacity | kwhUnitFormat
|
||||
}})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/xtzhl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ (panelData.systemEfficiency * 100).toFixed(2)
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.systemConversionEfficiency') }}(%)</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/dqgl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.currentPower | kWFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.currentPower') }}({{ panelData.currentPower | kwUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item " @click="showHistory($t('homePage.home.totalCharge'), 'totalCharge', 'bms', 'kWh', '')">
|
||||
<view class="history-icon">
|
||||
<image src="/static/aidex/images/history-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zcdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalChargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalCharge') }}({{ panelData.totalChargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item" @click="showHistory($t('homePage.home.totalDischarge'), 'totalDischarge', 'bms', 'kWh', '')">
|
||||
<view class="history-icon">
|
||||
<image src="/static/aidex/images/history-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/zfdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.totalDischargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.totalDischarge') }}({{ panelData.totalDischargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/rcdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.dailyChargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.dailyCharge') }}({{ panelData.dailyChargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/rfdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.dailyDischargeElec | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.dailyDischarge') }}({{ panelData.dailyDischargeElec | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item ">
|
||||
<view class="item-icon">
|
||||
<image src="/static/aidex/images/rfdl.png"></image>
|
||||
</view>
|
||||
<view class="item-con">
|
||||
<view class="item-num">{{ panelData.cumulativePowerGeneration | kwhFormat
|
||||
}}</view>
|
||||
<view class="item-title">{{ this.$t('homePage.home.dayPhotovoltaic') }}({{ panelData.cumulativePowerGeneration | kwhUnitFormat }})</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<historyModal :is-show.sync="histroyShow" :title="chartTitle" :params="hisParams" />
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import historyModal from '@/components/history-modal/index.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
panelData: {
|
||||
operationDays: 0,
|
||||
totalCapacity: 0,
|
||||
systemEfficiency: 0,
|
||||
currentPower: 0,
|
||||
totalChargeElec: 0,
|
||||
totalDischargeElec: 0,
|
||||
dailyChargeElec: 0,
|
||||
dailyDischargeElec: 0
|
||||
},
|
||||
stationId: null,
|
||||
loading: false,
|
||||
histroyShow: false,
|
||||
chartTitle: '',
|
||||
hisParams: {}
|
||||
}
|
||||
},
|
||||
components: { historyModal },
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.loading = true
|
||||
Promise.all([this.GetZZHBPowerGeneration(), this.GetPcsTotalData()]).finally((res) => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showHistory(name, modelCol, modelType, unit) {
|
||||
this.hisParams = {
|
||||
modelCol: modelCol,
|
||||
modelType: modelType,
|
||||
unit: unit
|
||||
}
|
||||
this.chartTitle = name
|
||||
this.histroyShow = true
|
||||
},
|
||||
async GetZZHBPowerGeneration(){
|
||||
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetZZHBPv({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
this.panelData = Object.assign(this.panelData, res.data);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
async GetPcsTotalData() {
|
||||
this.loading = true
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetPcsTotalData({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
this.panelData = Object.assign(this.panelData, res.data);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import url(./style/index.css);
|
||||
</style>
|
||||
1071
pages/tabbar/components/topology/cixi.vue
Normal file
1071
pages/tabbar/components/topology/cixi.vue
Normal file
File diff suppressed because it is too large
Load Diff
347
pages/tabbar/components/topology/devicemonitoring.vue
Normal file
347
pages/tabbar/components/topology/devicemonitoring.vue
Normal file
@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="devicecanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" ref="canvas"
|
||||
:noloading="noloading" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
// 文字
|
||||
textCanvasData: [],
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
type: "image",
|
||||
url: "/static/topology/device-monitoring.png",
|
||||
coord: [
|
||||
[0, 120],
|
||||
[320, 340],
|
||||
],
|
||||
}, ],
|
||||
rectCanvasData: [],
|
||||
// 线
|
||||
lineCanvasData: [],
|
||||
// 点
|
||||
circleCanvasData: [],
|
||||
timmer: null,
|
||||
defaultCanvasData: [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[0, 480]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.legend"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
coord: [
|
||||
[0, 490],
|
||||
[10, 10]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#009C77",
|
||||
background: "#009C77"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[20, 500]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.normal"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
coord: [
|
||||
[0, 510],
|
||||
[10, 10]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#E52F1B",
|
||||
background: "#E52F1B"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[20, 520]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.fault"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
coord: [
|
||||
[0, 530],
|
||||
[10, 10]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#FFC900",
|
||||
background: "#FFC900"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[20, 540]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.overhaul"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
coord: [
|
||||
[0, 550],
|
||||
[10, 10]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#15A1E3",
|
||||
background: "#15A1E3"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[20, 560]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.shutStan"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
|
||||
],
|
||||
key: 0,
|
||||
noloading: false
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getData(val) {
|
||||
this.stationId = val
|
||||
const api = [this.getConfigData()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData, ...this.rectCanvasData, ...this
|
||||
.textCanvasData, ...this.defaultCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
|
||||
},
|
||||
statusColor(item, value) {
|
||||
// console.log(123,item,value);
|
||||
let result = null
|
||||
if (!item.color?.length) {
|
||||
return 'transparent'
|
||||
} else {
|
||||
for (let i = 0; i < item.color.length; i++) {
|
||||
if (isNaN(+item.color[i].max) && isNaN(+item.color[i].min)) {
|
||||
if (item.color[i].max === item.color[i].min) {
|
||||
if (item.color[i].max === value) {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
if (!result) {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
} else {
|
||||
result = item.errorColor
|
||||
}
|
||||
} else {
|
||||
if (+item.color[i].max === +item.color[i].min) {
|
||||
if (+item.color[i].min === +value && value !== '') {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
if (!result) {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (+item.color[i].min <= +value && +item.color[i].max > +value && value !== '') {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
},
|
||||
getConfigData() {
|
||||
this.key++
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetFireConfig({
|
||||
stationId: this.stationId,
|
||||
pageNumber: 2,
|
||||
pageLocation: 'fire',
|
||||
isWeb: 2
|
||||
})
|
||||
.then((res) => {
|
||||
if (this.canvasData.length) {
|
||||
// this.$refs.canvas.clear()
|
||||
this.$refs.canvas.getSystemInfo()
|
||||
}
|
||||
this.textCanvasData = []
|
||||
this.rectCanvasData = []
|
||||
this.circleCanvasData = []
|
||||
res.data.forEach((item) => {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
if (item.type === 'text') {
|
||||
const obj = {
|
||||
type: "text",
|
||||
coord: [
|
||||
[arr[0], arr[1]]
|
||||
],
|
||||
font: [{
|
||||
text: item.value ? item.value ? item.value :
|
||||
'' : item.dataValue ? item.dataValue : '',
|
||||
size: 12,
|
||||
color: item.borderColor ? item.borderColor :
|
||||
this.statusColor(item.lightColorObject,
|
||||
item.dataValue)
|
||||
}]
|
||||
}
|
||||
this.textCanvasData.push(obj)
|
||||
|
||||
}
|
||||
if (item.type === 'battery') {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
const objFill = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0] + 10, arr[1] - 8],
|
||||
[14, 6]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: item.borderColor,
|
||||
background: item.borderColor
|
||||
}
|
||||
const valueObj = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], this.getY(arr[1] - 1, +item.dataValue ? +
|
||||
item.dataValue : 0)],
|
||||
[35, this.getHeight(+item.dataValue)]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#009C77",
|
||||
background: "#009C77"
|
||||
}
|
||||
const textObj = {
|
||||
type: "text",
|
||||
coord: [
|
||||
[arr[0] + 5, arr[1] + 30]
|
||||
],
|
||||
font: [{
|
||||
text: item.dataValue ? +item.dataValue + '%' :
|
||||
'0%',
|
||||
size: 12,
|
||||
color: '#000000'
|
||||
}]
|
||||
}
|
||||
const strokeFill = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], arr[1]],
|
||||
[35, 40]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'stroke',
|
||||
borderColor: item.borderColor,
|
||||
background: "transparent"
|
||||
}
|
||||
this.rectCanvasData.push(textObj)
|
||||
this.rectCanvasData.push(objFill)
|
||||
this.rectCanvasData.push(valueObj)
|
||||
this.rectCanvasData.push(strokeFill)
|
||||
}
|
||||
if (item.type === 'break') {
|
||||
|
||||
const obj = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], arr[1]],
|
||||
JSON.parse(item.size),
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: item.borderColor,
|
||||
background: this.statusColor(item.lightColorObject, item
|
||||
.dataValue)
|
||||
}
|
||||
this.rectCanvasData.push(obj)
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
getY(height, val) {
|
||||
if (+val > 0 && +val <= 100) {
|
||||
return height + (43 - this.getHeight(val))
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
|
||||
},
|
||||
getHeight(value) {
|
||||
return (value / 100) * 53
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 1160rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
253
pages/tabbar/components/topology/fire.vue
Normal file
253
pages/tabbar/components/topology/fire.vue
Normal file
@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="firecanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" ref="canvas" :noloading="noloading" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
// 文字
|
||||
textCanvasData: [],
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
type: "image",
|
||||
url: "/static/topology/fire.png",
|
||||
coord: [
|
||||
[20, 140],
|
||||
[280, 340],
|
||||
],
|
||||
}, ],
|
||||
rectCanvasData: [
|
||||
|
||||
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [],
|
||||
// 点
|
||||
circleCanvasData: [],
|
||||
timmer: null,
|
||||
key: 1,
|
||||
noloading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getData(val) {
|
||||
this.stationId = val
|
||||
const api = [this.getConfigData()]
|
||||
|
||||
this.key++
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData, ...this.rectCanvasData, ...this
|
||||
.textCanvasData,
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
|
||||
},
|
||||
statusColor(item, value) {
|
||||
// console.log(123,item,value);
|
||||
let result = null
|
||||
if (!item.color?.length) {
|
||||
return 'transparent'
|
||||
} else {
|
||||
for (let i = 0; i < item.color.length; i++) {
|
||||
if (isNaN(+item.color[i].max) && isNaN(+item.color[i].min)) {
|
||||
if (item.color[i].max === item.color[i].min) {
|
||||
if (item.color[i].max === value) {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
if (!result) {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
} else {
|
||||
result = item.errorColor
|
||||
}
|
||||
} else {
|
||||
if (+item.color[i].max === +item.color[i].min) {
|
||||
if (+item.color[i].min === +value && value !== '') {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
if (!result) {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (+item.color[i].min <= +value && +item.color[i].max > +value && value !== '') {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
},
|
||||
getConfigData() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetFireConfig({
|
||||
stationId: this.stationId,
|
||||
pageNumber: 1,
|
||||
pageLocation: 'fire',
|
||||
isWeb: 2
|
||||
})
|
||||
.then((res) => {
|
||||
this.textCanvasData = []
|
||||
this.rectCanvasData = []
|
||||
this.circleCanvasData = []
|
||||
res.data.forEach((item) => {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
if (item.type === 'text') {
|
||||
const obj = {
|
||||
type: "text",
|
||||
coord: [
|
||||
[arr[0], arr[1]]
|
||||
],
|
||||
font: [{
|
||||
text: item.value ? item.value ? item.value :
|
||||
'' : item.dataValue ? item.dataValue : '',
|
||||
size: JSON.parse(item.size),
|
||||
color: item.borderColor ? item.borderColor :
|
||||
this.statusColor(item.lightColorObject,
|
||||
item.dataValue)
|
||||
}]
|
||||
}
|
||||
this.textCanvasData.push(obj)
|
||||
|
||||
}
|
||||
if (item.type === 'battery') {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
const objFill = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0] + 10, arr[1] - 8],
|
||||
[20, 8]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: item.borderColor,
|
||||
background: item.borderColor
|
||||
}
|
||||
const valueObj = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], this.getY(arr[1] - 1, +item.dataValue ? +
|
||||
item.dataValue : 0)],
|
||||
[40, this.getHeight(+item.dataValue)]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#009C77",
|
||||
background: "#009C77"
|
||||
}
|
||||
const textObj = {
|
||||
type: "text",
|
||||
coord: [
|
||||
[arr[0] + 5, arr[1] + 30]
|
||||
],
|
||||
font: [{
|
||||
text: item.dataValue ? +item.dataValue + '%' :
|
||||
'0%',
|
||||
size: 12,
|
||||
color: '#000000'
|
||||
}]
|
||||
}
|
||||
const strokeFill = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], arr[1]],
|
||||
[40, 50]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'stroke',
|
||||
borderColor: item.borderColor,
|
||||
background: "transparent"
|
||||
}
|
||||
this.rectCanvasData.push(textObj)
|
||||
this.rectCanvasData.push(objFill)
|
||||
this.rectCanvasData.push(valueObj)
|
||||
this.rectCanvasData.push(strokeFill)
|
||||
}
|
||||
if (item.type === 'break') {
|
||||
|
||||
const obj = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], arr[1]],
|
||||
JSON.parse(item.size),
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: item.borderColor,
|
||||
background: this.statusColor(item.lightColorObject, item
|
||||
.dataValue)
|
||||
}
|
||||
this.rectCanvasData.push(obj)
|
||||
}
|
||||
if (item.type === 'light') {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
const obj = {
|
||||
type: "circle",
|
||||
coord: [
|
||||
[arr[0], arr[1]]
|
||||
],
|
||||
color: this.statusColor(item.lightColorObject, item
|
||||
.dataValue),
|
||||
isMove: false,
|
||||
r: 3,
|
||||
}
|
||||
this.circleCanvasData.push(obj)
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
getY(height, val) {
|
||||
if (+val > 0 && +val <= 100) {
|
||||
return height + (53 - this.getHeight(val))
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
|
||||
},
|
||||
getHeight(value) {
|
||||
return (value / 100) * 53
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 1260rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
406
pages/tabbar/components/topology/jingke.vue
Normal file
406
pages/tabbar/components/topology/jingke.vue
Normal file
@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<view class="station-box">
|
||||
<u-tabs
|
||||
ref="uTabs"
|
||||
name="name"
|
||||
:list="tabList"
|
||||
:is-scroll="false"
|
||||
:current="currentTab"
|
||||
@change="changeTab"
|
||||
active-color="#009C77"
|
||||
></u-tabs>
|
||||
|
||||
<swiper
|
||||
style="height: 340px"
|
||||
:current="swiperCurrent"
|
||||
@animationfinish="swiperAnimationfinish"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in tabList" :key="index">
|
||||
<div :id="'wrap' + index">
|
||||
<view class="detail-box">
|
||||
<div class="detail-data-box">
|
||||
<div class="detail-title">
|
||||
<image :src="gui" />
|
||||
<div>{{ index * 2 + 1 }}#PCS</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.workStatus" )}}</span>
|
||||
<span
|
||||
v-if="statusList[index * 2].workStatus === 0"
|
||||
class="error-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="statusList[index * 2].workStatus === 1"
|
||||
class="warning-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="statusList[index * 2].workStatus === 2"
|
||||
class="error-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
statusList[index * 2].workStatus === 3 ||
|
||||
statusList[index * 2].workStatus === 4 ||
|
||||
statusList[index * 2].workStatus === 5 ||
|
||||
statusList[index * 2].workStatus === 6
|
||||
"
|
||||
class="run-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2].workStatus)
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.activePower" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].activePowerPCS
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.reactivePower" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].reactivePowerPCS
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-data-box">
|
||||
<div class="detail-title margin-top-10">
|
||||
<image :src="battery" />
|
||||
<div>
|
||||
<span>SOC：</span>
|
||||
<span class="value"
|
||||
>{{ statusList[index * 2].soc }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name"> {{ $t("homePage.home.totalV" )}} </span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].bmsTotalVol
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.current" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].bmsTotalCurrent
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.maxCellVol" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].bmsMaxVol
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.minCellVol" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].bmsMinVol
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="detail-box">
|
||||
<div class="detail-data-box">
|
||||
<div class="detail-title">
|
||||
<image :src="gui" />
|
||||
<div>{{ (index + 1) * 2 }}#PCS</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.workStatus" )}}</span>
|
||||
<span
|
||||
v-if="statusList[index * 2 + 1].workStatus === 0"
|
||||
class="error-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2 + 1].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="statusList[index * 2 + 1].workStatus === 1"
|
||||
class="warning-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2 + 1].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="statusList[index * 2 + 1].workStatus === 2"
|
||||
class="error-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2 + 1].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
statusList[index * 2 + 1].workStatus === 3 ||
|
||||
statusList[index * 2 + 1].workStatus === 4 ||
|
||||
statusList[index * 2 + 1].workStatus === 5 ||
|
||||
statusList[index * 2 + 1].workStatus === 6
|
||||
"
|
||||
class="run-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2 + 1].workStatus)
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.activePower" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].activePowerPCS
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.reactivePower" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].reactivePowerPCS
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-data-box">
|
||||
<div class="detail-title margin-top-10">
|
||||
<image :src="battery" />
|
||||
<div>
|
||||
<span>SOC：</span
|
||||
><span class="value"
|
||||
>{{ statusList[index * 2 + 1].soc }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.totalV" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].bmsTotalVol
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.current" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].bmsTotalCurrent
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.maxCellVol" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].bmsMaxVol
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.minCellVol" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].bmsMinVol
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</div>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import battery from "static/aidex/device/battery.png";
|
||||
import gui from "static/aidex/device/gui.png";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
statusList: [{}, {}, {}, {}, {}, {}, {}, {}],
|
||||
tabList: [
|
||||
{ name: "1#箱变", value: 1 },
|
||||
{ name: "2#箱变", value: 2 },
|
||||
{ name: "3#箱变", value: 3 },
|
||||
{ name: "4#箱变", value: 4 },
|
||||
],
|
||||
currentTab: 0,
|
||||
swiperCurrent: 0,
|
||||
swiperHeight: 290,
|
||||
battery,
|
||||
gui,
|
||||
stationId:null
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight(); // 动态设置 swiper 的高度
|
||||
});
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight(); // 动态设置 swiper 的高度
|
||||
});
|
||||
this.getJingKeData()
|
||||
},
|
||||
workStatus(val) {
|
||||
if (val === 0) {
|
||||
return this.$t("homePage.home.shutdown");
|
||||
} else if (val === 1) {
|
||||
return this.$t("homePage.home.standby");
|
||||
} else if (val === 2) {
|
||||
return this.$t("homePage.home.fault");
|
||||
} else if (val === 3 || val === 4 || val === 5 || val === 6) {
|
||||
return this.$t("homePage.home.run");
|
||||
}
|
||||
},
|
||||
async getJingKeData() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetJingKeData({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.statusList = res.data;
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
toFix(val) {
|
||||
if (val) {
|
||||
const result = Number(val).toFixed(2);
|
||||
return result;
|
||||
} else if (val === 0) {
|
||||
return 0;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
changeTab(index) {
|
||||
this.currentTab = index;
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
swiperAnimationfinish(e) {
|
||||
let current = e.detail.current;
|
||||
this.swiperCurrent = current;
|
||||
this.currentTab = current;
|
||||
},
|
||||
/* 动态设置 swiper 的高度 */
|
||||
setSwiperHeight() {
|
||||
const element = "#wrap" + this.swiperCurrent;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select(element).boundingClientRect();
|
||||
query.exec((res) => {
|
||||
if (res && res[0]) this.swiperHeight = res[0].height;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.station-box {
|
||||
width: 100%;
|
||||
|
||||
.swiper-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
width: 100%;
|
||||
border-top: 1px solid #93d5c5;
|
||||
margin-top: 30rpx;
|
||||
background: linear-gradient(
|
||||
rgba(0, 156, 119, 0.05),
|
||||
rgba(0, 156, 119, 0)
|
||||
);
|
||||
margin-bottom: 34rpx;
|
||||
padding-top: 12rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.detail-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #ffb800;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-data-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.data-item {
|
||||
width: 50%;
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.name {
|
||||
width: 210rpx;
|
||||
text-align: end;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #ffb800;
|
||||
}
|
||||
.run-value {
|
||||
color: green;
|
||||
}
|
||||
.error-value {
|
||||
color: red;
|
||||
}
|
||||
.warning-value {
|
||||
color: #ffb800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
418
pages/tabbar/components/topology/kejiyuan.vue
Normal file
418
pages/tabbar/components/topology/kejiyuan.vue
Normal file
@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="canvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData:[],
|
||||
noloading:false,
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
// 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[145, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[15, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[265, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.esiCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//---3
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 155]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.workStatus"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:55
|
||||
}
|
||||
]
|
||||
},
|
||||
//---4
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[194, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.activePower"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:80
|
||||
}
|
||||
]
|
||||
},
|
||||
//---5
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:50
|
||||
}
|
||||
]
|
||||
},
|
||||
//---6
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 200]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:50
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
],
|
||||
// 图片
|
||||
imageCanvasData: [
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[10, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
{
|
||||
//一体柜
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[140, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[270, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
// 电网---并网柜
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[50, 110],
|
||||
[140, 110]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5]
|
||||
},
|
||||
// 1直流舱--并网柜
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[260, 110],
|
||||
[185, 110]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5]
|
||||
},
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[50, 110]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
r: 3
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[260, 110]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
r: 3
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
changeEnglish() {
|
||||
this.textCanvasData = [
|
||||
// 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[145, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[15, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[265, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.esiCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//---3
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 155]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.workStatus"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:55
|
||||
}
|
||||
]
|
||||
},
|
||||
//---4
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[194, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.activePower"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:80
|
||||
}
|
||||
]
|
||||
},
|
||||
//---5
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:50
|
||||
}
|
||||
]
|
||||
},
|
||||
//---6
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 200]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:50
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.clearData()
|
||||
const api = [
|
||||
this.getMiddleData()
|
||||
];
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
clearData(){
|
||||
this.textCanvasData[3].font[1].text = ''
|
||||
this.textCanvasData[4].font[1].text = ''
|
||||
this.textCanvasData[5].font[1].text = ''
|
||||
this.textCanvasData[6].font[1].text = ''
|
||||
},
|
||||
workStatus(val, data) {
|
||||
if (data === 1) {
|
||||
if (+val > +1) {
|
||||
return this.$t("homePage.home.charge")
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t("homePage.home.disCharge")
|
||||
}
|
||||
if (val < 1 || +val.abs < 1) {
|
||||
return this.$t("homePage.home.standing")
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t("homePage.home.disCharge")
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t("homePage.home.charge")
|
||||
}
|
||||
if (val < 1 || +val.abs < 1) {
|
||||
return this.$t("homePage.home.standing")
|
||||
}
|
||||
}
|
||||
},
|
||||
getMiddleData(){
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetbozhouTuopuStatus({
|
||||
stationId: this.stationId
|
||||
})
|
||||
.then(res => {
|
||||
this.textCanvasData[3].font[1].text = this.workStatus(res.data.activePowerPCS,res.data.flowDirection)
|
||||
this.textCanvasData[4].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
|
||||
this.textCanvasData[5].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
|
||||
this.textCanvasData[6].font[1].text = res.data.soh !== null ? res.data.soh + '' : ''
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 550rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
1094
pages/tabbar/components/topology/lingchao.vue
Normal file
1094
pages/tabbar/components/topology/lingchao.vue
Normal file
File diff suppressed because it is too large
Load Diff
771
pages/tabbar/components/topology/mdPvdieseTopCenter.vue
Normal file
771
pages/tabbar/components/topology/mdPvdieseTopCenter.vue
Normal file
@ -0,0 +1,771 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="canvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
noloading: false,
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
// // 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[280, 65]
|
||||
],
|
||||
font: [{
|
||||
text: "负载",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
// //1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[5, 60]
|
||||
],
|
||||
font: [{
|
||||
text: "用户配电",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
// //1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[200, 85]
|
||||
],
|
||||
font: [{
|
||||
text: "负载电表",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[50, 195]
|
||||
],
|
||||
font: [{
|
||||
text: "柴发电表",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[230, 225]
|
||||
],
|
||||
font: [{
|
||||
text: "储能电表",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[210, 280]
|
||||
],
|
||||
font: [{
|
||||
text: "储能柜",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[70, 280]
|
||||
],
|
||||
font: [{
|
||||
text: "柴油发电机",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[215, 170]
|
||||
],
|
||||
font: [{
|
||||
text: "PCS",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[155, 95]
|
||||
],
|
||||
font: [{
|
||||
text: "ATS",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[155, 45]
|
||||
],
|
||||
font: [{
|
||||
text: "ATS",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
}
|
||||
|
||||
],
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[10, 5],
|
||||
[30, 40]
|
||||
]
|
||||
},
|
||||
{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/fuzai.png",
|
||||
coord: [
|
||||
[270, 5],
|
||||
[45, 40]
|
||||
]
|
||||
},
|
||||
{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/none.png",
|
||||
coord: [
|
||||
[150, 15],
|
||||
[30, 25]
|
||||
]
|
||||
},
|
||||
{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/none.png",
|
||||
coord: [
|
||||
[150, 65],
|
||||
[30, 25]
|
||||
]
|
||||
},
|
||||
{
|
||||
//柴发
|
||||
type: "image",
|
||||
url: "/static/topology/electric.png",
|
||||
coord: [
|
||||
[80, 230],
|
||||
[35, 35]
|
||||
]
|
||||
},
|
||||
{
|
||||
//柴发
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[210, 230],
|
||||
[35, 35]
|
||||
]
|
||||
},
|
||||
{
|
||||
//柴发电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[55, 150],
|
||||
[30, 30]
|
||||
]
|
||||
},
|
||||
{
|
||||
//储能电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[240, 180],
|
||||
[30, 30]
|
||||
]
|
||||
},
|
||||
{
|
||||
//负载电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[210, 40],
|
||||
[30, 30]
|
||||
]
|
||||
},
|
||||
{
|
||||
//PCS
|
||||
type: "image",
|
||||
url: "/static/topology/STS.png",
|
||||
coord: [
|
||||
[215, 120],
|
||||
[20, 40]
|
||||
]
|
||||
}
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
// 顶部
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[40, 27],
|
||||
[159, 27]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[225, 27],
|
||||
[225, 40]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[180, 27],
|
||||
[270, 27]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
|
||||
// 1中部
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[164, 30],
|
||||
[164, 70]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[164, 80],
|
||||
[164, 100],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[162, 100],
|
||||
[97, 100],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[85, 165],
|
||||
[97, 165]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[162, 100],
|
||||
[227, 100],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[97, 100],
|
||||
[97, 230],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[227, 100],
|
||||
[227, 120],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[227, 195],
|
||||
[240, 195],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[227, 160],
|
||||
[227, 230],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: 1
|
||||
},
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeEnglish() {
|
||||
this.textCanvasData = [
|
||||
// // 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[280, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
// //1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[5, 60]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
// //1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[200, 85]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.loadAmmeter"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[50, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.dieselGeneratorMeter"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[230, 225]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.energyStorageMeter"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[210, 280]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[70, 280]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.dieselGenerator"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[215, 170]
|
||||
],
|
||||
font: [{
|
||||
text: "PCS",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[155, 95]
|
||||
],
|
||||
font: [{
|
||||
text: "ATS",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[155, 45]
|
||||
],
|
||||
font: [{
|
||||
text: "ATS",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
getData(val) {
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(10)
|
||||
const api = [this.getAmmeter1(),this.getAmmeter2(),this.getAmmeter3(),this.getCf(),this.getPcs()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
clearData() {
|
||||
// this.textCanvasData[3].font[1].text = ''
|
||||
// this.textCanvasData[4].font[1].text = ''
|
||||
// this.textCanvasData[5].font[1].text = ''
|
||||
// this.textCanvasData[6].font[1].text = ''
|
||||
},
|
||||
workStatus(val, data) {
|
||||
if (data === 1) {
|
||||
if (+val > +1) {
|
||||
return '充电'
|
||||
}
|
||||
if (+val < -1) {
|
||||
return '放电'
|
||||
}
|
||||
if (val < 1 || +val.abs < 1) {
|
||||
return '静置'
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return '放电'
|
||||
}
|
||||
if (+val < -1) {
|
||||
return '充电'
|
||||
}
|
||||
if (val < 1 || +val.abs < 1) {
|
||||
return '静置'
|
||||
}
|
||||
}
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 4) + (obj.chineseCount * 11 ) + (obj.otherCount * 9) + x
|
||||
},
|
||||
getAmmeter1() {
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'md-ammeter-1'
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,250), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},)
|
||||
|
||||
})
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getAmmeter2() {
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'md-ammeter-2'
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[30, 210 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,30), 210 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},)
|
||||
|
||||
})
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getAmmeter3() {
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'md-ammeter-3'
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[150, 200 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,150), 200 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},)
|
||||
|
||||
})
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getCf() {
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'md-pcs'
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 250 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,250), 250 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},)
|
||||
|
||||
})
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getPcs() {
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'md-dynamo'
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[130, 250 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,130), 250 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},)
|
||||
|
||||
})
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 580rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
616
pages/tabbar/components/topology/runda100.vue
Normal file
616
pages/tabbar/components/topology/runda100.vue
Normal file
@ -0,0 +1,616 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="runda" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
stationId:null,
|
||||
noloading:false,
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[270, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.standing"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[75, 120]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridMeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[78, 285]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 300]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
],
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[260, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[15, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[85, 80],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//ACDC
|
||||
type: "image",
|
||||
url: "/static/topology/DC.png",
|
||||
coord: [
|
||||
[145, 140],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//MPPT
|
||||
type: "image",
|
||||
url: "/static/topology/MPPT.png",
|
||||
coord: [
|
||||
[75, 200],
|
||||
[30, 15],
|
||||
],
|
||||
},
|
||||
{
|
||||
//DCDC
|
||||
type: "image",
|
||||
url: "/static/topology/DCDC.png",
|
||||
coord: [
|
||||
[215, 200],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//光伏
|
||||
type: "image",
|
||||
url: "/static/topology/pv.png",
|
||||
coord: [
|
||||
[72, 235],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电池
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[210, 250],
|
||||
[40, 40],
|
||||
],
|
||||
}
|
||||
|
||||
],
|
||||
lineCanvasData: [{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 30],
|
||||
[255, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 3,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[100, 30],
|
||||
[100, 80],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[160, 30],
|
||||
[160, 140],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[152, 170],
|
||||
[152, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[152, 190],
|
||||
[92, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[92, 190],
|
||||
[92, 210],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[92, 215],
|
||||
[92, 240],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[168, 170],
|
||||
[168, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[168, 190],
|
||||
[230, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[230, 190],
|
||||
[230, 200],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[230, 230],
|
||||
[230, 250],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
}
|
||||
|
||||
],
|
||||
circleCanvasData: [{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[255, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[270, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.standing"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[75, 120]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridMeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[78, 285]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 300]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
]
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(4)
|
||||
const api = [this.getAmmeter(), this.getAcdc(), this.getGf(), this.getFz(), this.getBattery()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.$nextTick(() =>{
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
})
|
||||
this.noloading = true
|
||||
});
|
||||
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = {
|
||||
otherCount: otherCount,
|
||||
chineseCount: chineseCount,
|
||||
englishCount: englishCount
|
||||
}
|
||||
return (obj.englishCount * 4) + (obj.chineseCount * 10) + (obj.otherCount * 8) + x
|
||||
},
|
||||
getAmmeter() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: self.stationId,
|
||||
pageLocation: 'runda100-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
if (res.data && res.data.length) {
|
||||
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[60, 135 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.countChineseAndEnglishCharacters(item
|
||||
.name, 70), 135 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getAcdc() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: self.stationId,
|
||||
pageLocation: 'runda100-acdc'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[180, 160 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.countChineseAndEnglishCharacters(item
|
||||
.name, 190), 160 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getGf() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: self.stationId,
|
||||
pageLocation: 'runda100-gf'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[48, 300 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.countChineseAndEnglishCharacters(item
|
||||
.name, 58), 300 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getFz() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: self.stationId,
|
||||
pageLocation: 'runda100-fz'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[200, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.countChineseAndEnglishCharacters(item
|
||||
.name, 210), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getBattery() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: self.stationId,
|
||||
pageLocation: 'runda100-battery'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[190, 320 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.countChineseAndEnglishCharacters(item
|
||||
.name, 200), 320 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 750rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
597
pages/tabbar/components/topology/runda215.vue
Normal file
597
pages/tabbar/components/topology/runda215.vue
Normal file
@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="runda215" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
// 文字
|
||||
textCanvasData: [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[270, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[75, 120]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridMeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[78, 285]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 300]
|
||||
],
|
||||
font: [{
|
||||
text: "电池",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[260, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[15, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[85, 80],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//ACDC
|
||||
type: "image",
|
||||
url: "/static/topology/DC.png",
|
||||
coord: [
|
||||
[145, 140],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//MPPT
|
||||
type: "image",
|
||||
url: "/static/topology/MPPT.png",
|
||||
coord: [
|
||||
[75, 200],
|
||||
[30, 15],
|
||||
],
|
||||
},
|
||||
{
|
||||
//光伏
|
||||
type: "image",
|
||||
url: "/static/topology/pv.png",
|
||||
coord: [
|
||||
[72, 235],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电池
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[210, 250],
|
||||
[40, 40],
|
||||
],
|
||||
}
|
||||
|
||||
],
|
||||
lineCanvasData: [{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 30],
|
||||
[255, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 3,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[100, 30],
|
||||
[100, 80],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[160, 30],
|
||||
[160, 140],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[152, 170],
|
||||
[152, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[152, 190],
|
||||
[92, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[92, 190],
|
||||
[92, 210],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[92, 215],
|
||||
[92, 240],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[168, 170],
|
||||
[168, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[168, 190],
|
||||
[230, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[230, 190],
|
||||
[230, 250],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
circleCanvasData: [{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[255, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
],
|
||||
noloading:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[270, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[75, 120]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridMeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[78, 285]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 300]
|
||||
],
|
||||
font: [{
|
||||
text: "电池",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
]
|
||||
|
||||
},
|
||||
getData(val) {
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(4)
|
||||
const api = [this.getAmmeter(), this.getAcdc(), this.getGf(), this.getFz(), this.getBattery()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.$nextTick(() => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
})
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = {
|
||||
otherCount: otherCount,
|
||||
chineseCount: chineseCount,
|
||||
englishCount: englishCount
|
||||
}
|
||||
return (obj.englishCount * 4) + (obj.chineseCount * 10) + (obj.otherCount * 8) + x
|
||||
},
|
||||
getAmmeter() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda215-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
if (res.data && res.data.length) {
|
||||
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[40, 135 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 50), 135 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getAcdc() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda215-acdc'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[180, 160 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 190), 160 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getGf() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda215-gf'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[48, 300 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 58), 300 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getFz() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda215-fz'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[200, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 210), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getBattery() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda215-battery'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[190, 320 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 200), 320 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 750rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
448
pages/tabbar/components/topology/runda230.vue
Normal file
448
pages/tabbar/components/topology/runda230.vue
Normal file
@ -0,0 +1,448 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="runda230" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
noloading:false,
|
||||
// 文字
|
||||
textCanvasData: [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[270, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[75, 120]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridMeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[150, 270]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[260, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[15, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[85, 80],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//ACDC
|
||||
type: "image",
|
||||
url: "/static/topology/DC.png",
|
||||
coord: [
|
||||
[145, 140],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电池
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[140, 212],
|
||||
[40, 40],
|
||||
],
|
||||
}
|
||||
|
||||
],
|
||||
lineCanvasData: [{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 30],
|
||||
[255, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 3,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[100, 30],
|
||||
[100, 80],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[160, 30],
|
||||
[160, 140],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[160, 170],
|
||||
[160, 210],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
],
|
||||
circleCanvasData: [{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[255, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[270, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[75, 120]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridMeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[150, 270]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
]
|
||||
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(3)
|
||||
const api = [this.getAmmeter(), this.getAcdc(), this.getFz(), this.getBattery()]
|
||||
Promise.all(api).finally((result) => {
|
||||
|
||||
this.$nextTick(() =>{
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
})
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = {
|
||||
otherCount: otherCount,
|
||||
chineseCount: chineseCount,
|
||||
englishCount: englishCount
|
||||
}
|
||||
return (obj.englishCount * 4) + (obj.chineseCount * 10) + (obj.otherCount * 8) + x
|
||||
},
|
||||
getAmmeter() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda230-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[60, 135 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 70), 135 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getAcdc() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda230-acdc'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[180, 160 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 190), 160 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getFz() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda230-fz'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[200, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 210), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value > 0 ? item.value : 0}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getBattery() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda230-battery'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[130, 290 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 140), 290 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 700rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
1371
pages/tabbar/components/topology/sanmenxia.vue
Normal file
1371
pages/tabbar/components/topology/sanmenxia.vue
Normal file
File diff suppressed because it is too large
Load Diff
502
pages/tabbar/components/topology/second.vue
Normal file
502
pages/tabbar/components/topology/second.vue
Normal file
@ -0,0 +1,502 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="secondcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
noloading:false,
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[30, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[240, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [
|
||||
{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[250, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[15, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[45, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[255, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[170, 35],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//sts
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[95, 85],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 30],
|
||||
[240, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 30],
|
||||
[110, 85],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 125],
|
||||
[110, 150],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 150],
|
||||
[60, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 150],
|
||||
[270, 150],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[270, 150],
|
||||
[270, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 55],
|
||||
[160, 55],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
}
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[110, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[240, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[110, 150]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[270, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[160, 55]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[30, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[240, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(3)
|
||||
const api = [this.getLeftPcs(),this.getRightPcs(),this.getAmmeter()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 4) + (obj.chineseCount * 10 ) + (obj.otherCount * 8) + x
|
||||
},
|
||||
getAmmeter(){
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'second-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[120, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,130), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getLeftPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'second-pcs-left'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[30, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,30), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getRightPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'second-pcs-right'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[200, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,200), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 650rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
426
pages/tabbar/components/topology/standard.vue
Normal file
426
pages/tabbar/components/topology/standard.vue
Normal file
@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas :cId="canvasId" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
noloading: false,
|
||||
canvasData: [],
|
||||
canvasId:'canvas',
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
// 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[145, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[15, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
// //1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.esiCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//---3
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[190, 155]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.workStatus"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 55
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
//---4
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[187, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.activePower"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 80
|
||||
}
|
||||
]
|
||||
},
|
||||
//---5
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
// //---6
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 200]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
],
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[10, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
{
|
||||
//一体柜
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[140, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[270, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
// 电网---并网柜
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[50, 110],
|
||||
[140, 110]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5]
|
||||
},
|
||||
// 1直流舱--并网柜
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[260, 110],
|
||||
[185, 110]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5]
|
||||
},
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[50, 110]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
r: 3
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[260, 110]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
r: 3
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish() {
|
||||
this.textCanvasData = [
|
||||
// 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[145, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[15, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
// //1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.esiCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//---3
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[190, 155]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.workStatus"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 55
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
//---4
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[187, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.activePower"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 80
|
||||
}
|
||||
]
|
||||
},
|
||||
//---5
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
// //---6
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 200]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
getData(val) {
|
||||
|
||||
this.stationId = val
|
||||
this.clearData()
|
||||
const api = [
|
||||
this.getMiddleData()
|
||||
];
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
workStatus(val, data) {
|
||||
if (data === 1) {
|
||||
if (+val > +1) {
|
||||
return this.$t("homePage.home.charge")
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t("homePage.home.disCharge")
|
||||
}
|
||||
if (val < 1 || +val.abs < 1) {
|
||||
return this.$t("homePage.home.standing")
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t("homePage.home.disCharge")
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t("homePage.home.charge")
|
||||
}
|
||||
if (val < 1 || +val.abs < 1) {
|
||||
return this.$t("homePage.home.standing")
|
||||
}
|
||||
}
|
||||
},
|
||||
clearData() {
|
||||
this.textCanvasData[3].font[1].text = ''
|
||||
this.textCanvasData[4].font[1].text = ''
|
||||
this.textCanvasData[5].font[1].text = ''
|
||||
this.textCanvasData[6].font[1].text = ''
|
||||
},
|
||||
getMiddleData() {
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetbozhouTuopuStatus({
|
||||
stationId: this.stationId
|
||||
})
|
||||
.then(res => {
|
||||
this.textCanvasData[3].font[1].text = this.workStatus(res.data.activePowerPCS, res
|
||||
.data.flowDirection)
|
||||
this.textCanvasData[4].font[1].text = res.data.activePowerPCS !== null ? res.data
|
||||
.activePowerPCS + '' : ''
|
||||
this.textCanvasData[5].font[1].text = res.data.soc !== null ? res.data.soc + '' :
|
||||
''
|
||||
this.textCanvasData[6].font[1].text = res.data.soh !== null ? res.data.soh + '' :
|
||||
''
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 550rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
601
pages/tabbar/components/topology/third.vue
Normal file
601
pages/tabbar/components/topology/third.vue
Normal file
@ -0,0 +1,601 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="thirdcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
noloading:false,
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[30, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[140, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[240, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "3#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [
|
||||
{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[250, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[15, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[45, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[145, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[255, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[170, 35],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//sts
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[95, 85],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 30],
|
||||
[240, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 30],
|
||||
[110, 85],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 125],
|
||||
[110, 150],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 150],
|
||||
[60, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[160, 150],
|
||||
[160, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 150],
|
||||
[270, 150],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[270, 150],
|
||||
[270, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 55],
|
||||
[160, 55],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
}
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[110, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[240, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[160, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[110, 150]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[270, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[160, 55]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[10, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[30, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[140, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[240, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "3#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(5)
|
||||
const api = [this.getLeftPcs(),this.getRightPcs(),this.getCenterPcs(),this.getAmmeter()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 4) + (obj.chineseCount * 10 ) + (obj.otherCount * 8) + x
|
||||
},
|
||||
getAmmeter(){
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[120, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,130), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getLeftPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-pcs-left'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[0, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,0), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getCenterPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-pcs-center'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[110, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,110), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getRightPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-pcs-right'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,220), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 650rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
599
pages/tabbar/components/topology/weishanhu.vue
Normal file
599
pages/tabbar/components/topology/weishanhu.vue
Normal file
@ -0,0 +1,599 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="wshcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
noloading:false,
|
||||
partList: {},
|
||||
// 文字
|
||||
textCanvasData: [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[8, 25]
|
||||
],
|
||||
font: [{
|
||||
text: "380" + this.$t("homePage.home.busbar"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[28, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[12, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[155, 80]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[99, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.dieselGenerator"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[100, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[196, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[170, 210]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[288, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 210]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 225]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
},
|
||||
],
|
||||
}
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[18, 111],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
//ACDC
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/DC.png",
|
||||
coord: [
|
||||
[229, 54],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
//发电机
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/electric.png",
|
||||
coord: [
|
||||
[104, 111],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//光伏
|
||||
type: "image",
|
||||
url: "/static/topology/pv.png",
|
||||
coord: [
|
||||
[186, 135],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[279, 135],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [{
|
||||
type: "line",
|
||||
coord: [
|
||||
[8, 30],
|
||||
[318, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[38, 30],
|
||||
[38, 110],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[124, 30],
|
||||
[124, 110],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[250, 30],
|
||||
[250, 55],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[250, 96],
|
||||
[250, 104],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[204, 132],
|
||||
[204, 104],
|
||||
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[204, 104],
|
||||
[298, 104],
|
||||
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[298, 132],
|
||||
[298, 104],
|
||||
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
}
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[38, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[124, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[250, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[8, 25]
|
||||
],
|
||||
font: [{
|
||||
text: "380" + this.$t("homePage.home.busbar"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[28, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[12, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[155, 80]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[99, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.dieselGenerator"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[100, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[196, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[170, 210]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[288, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 210]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 225]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.clearData()
|
||||
const api = [this.getMiddleData()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
clearData(){
|
||||
this.textCanvasData[2].font[1].text = ''
|
||||
//ACDC
|
||||
this.textCanvasData[3].font[1].text = ''
|
||||
//柴油发电机
|
||||
this.textCanvasData[5].font[1].text = ''
|
||||
//光伏
|
||||
this.textCanvasData[7].font[1].text = ''
|
||||
// 电池
|
||||
this.textCanvasData[9].font[1].text = ''
|
||||
this.textCanvasData[10].font[1].text = ''
|
||||
},
|
||||
getMiddleData() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetWSHStatus({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
//负载
|
||||
this.textCanvasData[2].font[1].text = res.data.epsActivePower !== null ? res.data.epsActivePower + '': ''
|
||||
//ACDC
|
||||
this.textCanvasData[3].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
|
||||
//柴油发电机
|
||||
this.textCanvasData[5].font[1].text = res.data.cfActivePower !== null ? res.data.cfActivePower + '' : ''
|
||||
//光伏
|
||||
this.textCanvasData[7].font[1].text = res.data.acActivePower !== null ? res.data.acActivePower + '' : ''
|
||||
// 电池
|
||||
this.textCanvasData[9].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
|
||||
this.textCanvasData[10].font[1].text = res.data.soc !== null ? res.data.soh + '' : ''
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 500rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
589
pages/tabbar/components/topology/zhongzihuanbao.vue
Normal file
589
pages/tabbar/components/topology/zhongzihuanbao.vue
Normal file
@ -0,0 +1,589 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="canvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData:[],
|
||||
noloading:false,
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
{
|
||||
type: "text",
|
||||
coord: [[80, 128]],
|
||||
font: [
|
||||
{
|
||||
text: "STS",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[172, 100]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.ammeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[155, 115]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[258, 65]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[149, 215]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[35, 325]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[30, 340]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[281, 325]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[245, 340]],
|
||||
font: [
|
||||
{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[245, 355]],
|
||||
font: [
|
||||
{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[4, 15],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
//STS
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/STS.png",
|
||||
coord: [
|
||||
[115, 108],
|
||||
[23, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[164, 48],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[250, 15],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/DC.png",
|
||||
coord: [
|
||||
[106, 188],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/pv.png",
|
||||
coord: [
|
||||
[27, 274],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[273, 274],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[38, 36],
|
||||
[274, 36],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[125, 36],
|
||||
[125, 119],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[125, 156],
|
||||
[125, 186],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[125, 225],
|
||||
[125, 250],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[125, 68],
|
||||
[173, 68],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[47, 251],
|
||||
[47, 271],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[47, 251],
|
||||
[292, 251],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[292, 251],
|
||||
[292, 271],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[250, 15],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/DC.png",
|
||||
coord: [
|
||||
[106, 188],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/pv.png",
|
||||
coord: [
|
||||
[27, 274],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[273, 274],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods:{
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
type: "text",
|
||||
coord: [[80, 128]],
|
||||
font: [
|
||||
{
|
||||
text: "STS",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[172, 100]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.ammeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[155, 115]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[258, 65]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[149, 215]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[35, 325]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[30, 340]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[281, 325]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[245, 340]],
|
||||
font: [
|
||||
{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[245, 355]],
|
||||
font: [
|
||||
{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
},
|
||||
clearData(){
|
||||
this.textCanvasData[2].font[1].text = ''
|
||||
|
||||
//ACDC
|
||||
this.textCanvasData[4].font[1].text = ''
|
||||
|
||||
//光伏
|
||||
this.textCanvasData[6].font[1].text = ''
|
||||
|
||||
//电池
|
||||
this.textCanvasData[8].font[1].text = ''
|
||||
this.textCanvasData[9].font[1].text = ''
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val.id
|
||||
this.clearData()
|
||||
const api = [this.getMiddleData()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
getMiddleData(){
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetZzhbtatus({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
|
||||
//电表
|
||||
this.textCanvasData[2].font[1].text = res.data.activePower !== null ? res.data.activePower + '' : ''
|
||||
|
||||
//ACDC
|
||||
this.textCanvasData[4].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
|
||||
|
||||
//光伏
|
||||
this.textCanvasData[6].font[1].text = res.data.acActivePower !== null ? res.data.acActivePower + '' : ''
|
||||
|
||||
//电池
|
||||
this.textCanvasData[8].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
|
||||
this.textCanvasData[9].font[1].text = res.data.soh !== null ? res.data.soh + '' : ''
|
||||
|
||||
// this.textCanvasData[3].font[1].text = this.partList.acActivePower !== null ? this.partList.acActivePower + '' : ''
|
||||
// //ACDC
|
||||
// this.textCanvasData[1].font[1].text = this.partList.activePowerPCS !== null ? this.partList.activePowerPCS + '' : ''
|
||||
// //电池
|
||||
// this.batteryData[2].font[1].text = this.partList.soc !== null ? this.partList.soc + '' : ''
|
||||
// this.batteryData[3].font[1].text = this.partList.soh !== null ? this.partList.soh + '' : ''
|
||||
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 770rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
472
pages/tabbar/dashboard.vue
Normal file
472
pages/tabbar/dashboard.vue
Normal file
@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<!-- <zero-loading v-if="loading"></zero-loading> -->
|
||||
<!-- 顶部电站 -->
|
||||
<view class="new-nav">
|
||||
<image type="image" src="../../static/aidex/images/nav-bg.png"
|
||||
style="width: 100%; height: 100%; z-index: 0" />
|
||||
<view class="station-box">
|
||||
<stationDropdow style="width: 100%" ref="dropdow" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 菜单 -->
|
||||
<u-notice-bar mode="horizontal" type="primary" :list="list" style="margin-bottom: 20rpx;"
|
||||
@click="toMsg"></u-notice-bar>
|
||||
<view class="menu-box">
|
||||
<view class="box" @click="changeMenu('device-list')">
|
||||
<view class="icon device" />
|
||||
<view class="title"> {{ this.$t("homePage.home.device") }} </view>
|
||||
</view>
|
||||
<view class="box" @click="changeMenu('earnings')">
|
||||
<view class="icon earning" />
|
||||
<view class="title"> {{ this.$t("homePage.home.earning") }} </view>
|
||||
</view>
|
||||
<view class="box" @click="changeMenu('alarm')">
|
||||
<view class="icon alarm" />
|
||||
<view class="title"> {{ this.$t("homePage.home.alarm") }} </view>
|
||||
</view>
|
||||
<view class="box" @click="changeMenu('policy-management')">
|
||||
<view class="icon policy" />
|
||||
<view class="title"> {{ this.$t("homePage.home.policy") }} </view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="content-box">
|
||||
<view class="box">
|
||||
<Section :title="$t('homePage.home.stationTopo')" />
|
||||
<cixi v-if="topologyType === 0" ref="tuopu" />
|
||||
<kejiyuan v-else-if="topologyType === 2" ref="tuopu" />
|
||||
<lingchao v-else-if="topologyType === 3" ref="tuopu" />
|
||||
<jingke v-else-if="topologyType === 4" ref="tuopu" />
|
||||
<weishanhu v-else-if="topologyType === 5" ref="tuopu" />
|
||||
<zhongzihuanbao v-else-if="topologyType === 6" ref="tuopu" />
|
||||
<sanmenxia v-else-if="topologyType === 7" ref="tuopu" />
|
||||
<second v-else-if="topologyType === 8" ref="tuopu" />
|
||||
<fire v-else-if="topologyType === 9" ref="tuopu" />
|
||||
<runda100 v-else-if="topologyType === 10" ref="tuopu" />
|
||||
<runda230 v-else-if="topologyType === 11" ref="tuopu" />
|
||||
<runda215 v-else-if="topologyType === 12" ref="tuopu" />
|
||||
<third v-else-if="topologyType === 13" ref="tuopu" />
|
||||
<mdPviese v-else-if="topologyType === 14" ref="tuopu" />
|
||||
<standard v-else ref="tuopu" />
|
||||
|
||||
</view>
|
||||
|
||||
<view v-if="topologyType === 9" class="box">
|
||||
<Section :title="$t('homePage.home.deviceMonitor')" />
|
||||
<devicemonitoring ref="deviceFire" />
|
||||
</view>
|
||||
|
||||
<view class="box">
|
||||
<Section :title="$t('homePage.home.runCurve')" />
|
||||
<runChart ref="runChart" />
|
||||
</view>
|
||||
|
||||
<view class="box">
|
||||
<Section :title="$t('homePage.home.chargeDisData')">
|
||||
<view slot="right" style="flex: 1">
|
||||
<view class="top-right-box">
|
||||
<view class="top-right-item" :class="{ active: activeTime === 'day' }"
|
||||
@click="changeTime('day')">{{this.$t('homePage.home.sevenDay')}}
|
||||
</view>
|
||||
<view class="top-right-item" :class="{ active: activeTime === 'month' }"
|
||||
@click="changeTime('month')">{{this.$t('homePage.home.monthDay')}}
|
||||
</view>
|
||||
<view class="top-right-item" :class="{ active: activeTime === 'year' }"
|
||||
@click="changeTime('year')">{{this.$t('homePage.home.yearDay')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Section>
|
||||
<dischargeChart ref="dischargeChart" :activeTime="activeTime" />
|
||||
</view>
|
||||
|
||||
<view class="box">
|
||||
<Section :title="$t('homePage.home.stationData')" />
|
||||
<wshStationData v-if="topologyType === 5" />
|
||||
<zzhbStationData v-else-if="topologyType === 6" />
|
||||
<commonStationData v-else />
|
||||
</view>
|
||||
|
||||
<view class="box" v-if="topologyType !== 9">
|
||||
<Section :title="$t('homePage.home.environmentalData')" />
|
||||
<environmentalControlPosition v-if="rightCenter === 'dispositionRightCenter'" />
|
||||
<environmentalControl v-else />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import stationDropdow from '@/components/station-dropdow/index'
|
||||
import Section from "@/components/section/index";
|
||||
import charts from "@/components/charts/index";
|
||||
import cixi from './components/topology/cixi'
|
||||
import weishanhu from './components/topology/weishanhu.vue'
|
||||
import sanmenxia from './components/topology/sanmenxia.vue'
|
||||
import lingchao from './components/topology/lingchao.vue'
|
||||
import zhongzihuanbao from './components/topology/zhongzihuanbao.vue'
|
||||
import kejiyuan from './components/topology/kejiyuan.vue'
|
||||
import standard from './components/topology/standard.vue'
|
||||
import jingke from './components/topology/jingke.vue'
|
||||
import second from './components/topology/second.vue'
|
||||
import third from './components/topology/third.vue'
|
||||
import fire from './components/topology/fire.vue'
|
||||
import runda100 from './components/topology/runda100.vue'
|
||||
import runda215 from './components/topology/runda215.vue'
|
||||
import runda230 from './components/topology/runda230.vue'
|
||||
import runChart from './components/runChart/index'
|
||||
import dischargeChart from './components/dischargeChart/index'
|
||||
import environmentalControl from './components/environmentalControl/index'
|
||||
import environmentalControlPosition from './components/environmentalControl/position.vue'
|
||||
import commonStationData from './components/stationData/common'
|
||||
import zzhbStationData from './components/stationData/zzhb'
|
||||
import wshStationData from './components/stationData/wsh'
|
||||
import devicemonitoring from './components/topology/devicemonitoring.vue'
|
||||
import mdPviese from './components/topology/mdPvdieseTopCenter.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
stationDropdow,
|
||||
Section,
|
||||
environmentalControlPosition,
|
||||
charts,
|
||||
runda100,
|
||||
runda215,
|
||||
runda230,
|
||||
second,
|
||||
cixi,
|
||||
fire,
|
||||
third,
|
||||
weishanhu,
|
||||
sanmenxia,
|
||||
mdPviese,
|
||||
lingchao,
|
||||
zhongzihuanbao,
|
||||
kejiyuan,
|
||||
standard,
|
||||
jingke,
|
||||
runChart,
|
||||
dischargeChart,
|
||||
environmentalControl,
|
||||
commonStationData,
|
||||
zzhbStationData,
|
||||
wshStationData,
|
||||
devicemonitoring
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
curve_option: {},
|
||||
charge_option: {},
|
||||
activeTime: 'day',
|
||||
topologyType: 0,
|
||||
list: [],
|
||||
messageList: [],
|
||||
timer: null,
|
||||
tuopuTimer: null,
|
||||
rightCenter: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
userData() {
|
||||
return this.vuex_user
|
||||
},
|
||||
language() {
|
||||
return this.vuex_language
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
if (this.tuopuTimer) {
|
||||
clearInterval(this.tuopuTimer)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
|
||||
this.stationId = val.id
|
||||
this.userId = this.userData.userId
|
||||
this.topologyType = val.topologyType
|
||||
this.getComponents()
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.tuopu) {
|
||||
this.$refs.tuopu.getData(val.id)
|
||||
}
|
||||
|
||||
if (this.$refs.deviceFire) {
|
||||
this.$refs.deviceFire.getData(this.stationId)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
uni.setTabBarItem({
|
||||
index: 0,
|
||||
text: this.$t('homePage.home.station'),
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 1,
|
||||
text: this.$t('homePage.home.electricityPrice'),
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
text: this.$t('homePage.home.mine'),
|
||||
})
|
||||
uni.showLoading({
|
||||
title: this.$t('homePage.home.loading')
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
this.getComponents()
|
||||
this.getMessage()
|
||||
if (this.$refs.runChart && this.stationId) {
|
||||
this.$refs.runChart.getData()
|
||||
}
|
||||
if (this.$refs.dischargeChart && this.stationId) {
|
||||
this.$refs.dischargeChart.getData()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
|
||||
if (this.$refs.tuopu) {
|
||||
this.$refs.tuopu.changeEnglish()
|
||||
this.$refs.tuopu.getData(this.stationId)
|
||||
}
|
||||
|
||||
if (this.$refs.deviceFire) {
|
||||
this.$refs.deviceFire.getData(this.stationId)
|
||||
}
|
||||
})
|
||||
this.timer = setInterval(() => {
|
||||
this.getMessage()
|
||||
}, 5000)
|
||||
this.$nextTick(() => {
|
||||
this.tuopuTimer = setInterval(() => {
|
||||
if (this.$refs.tuopu) {
|
||||
this.$refs.tuopu.getData(this.stationId)
|
||||
}
|
||||
if (this.$refs.deviceFire) {
|
||||
this.$refs.deviceFire.getData(this.stationId)
|
||||
}
|
||||
}, 1000 * 10 * 60)
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
async getComponents() {
|
||||
const {
|
||||
data
|
||||
} = await this.$u.api.homePageData.GetHomePageComponents(this.stationId)
|
||||
this.rightCenter = data[0].rightCenter
|
||||
},
|
||||
openTimer() {
|
||||
|
||||
},
|
||||
closeTimer() {
|
||||
|
||||
},
|
||||
toMsg() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/sys/user/message`,
|
||||
});
|
||||
},
|
||||
tagVal(val) {
|
||||
if (+val === 1) {
|
||||
return `[${this.$t('homePage.home.environmentalData')}]:`
|
||||
} else if (+val === 2) {
|
||||
return `[${this.$t('homePage.home.fault')}]:`
|
||||
} else if (+val === 3) {
|
||||
return `[${this.$t('homePage.home.alarm')}]:`
|
||||
}
|
||||
},
|
||||
getMessage() {
|
||||
this.$u.api.GetMessage({
|
||||
receivingUser: this.userId,
|
||||
stationId: this.stationId,
|
||||
createstatus: 3,
|
||||
readStatus: 0
|
||||
}).then((res) => {
|
||||
this.messageList = res.data
|
||||
this.list = []
|
||||
this.messageList.forEach((item, index) => {
|
||||
this.list.push(this.tagVal(item.messageType) + item.messageContent)
|
||||
})
|
||||
})
|
||||
},
|
||||
changeTime(val) {
|
||||
if (this.activeTime !== val) {
|
||||
this.activeTime = val;
|
||||
}
|
||||
},
|
||||
changeMenu(url) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/home-page/${url}/index`,
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.u-page {
|
||||
|
||||
height: 100% !important;
|
||||
background-color: #f5f5f5;
|
||||
overflow: hidden;
|
||||
|
||||
.new-nav {
|
||||
width: 100%;
|
||||
height: 440rpx;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: -15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.station-box {
|
||||
width: 580rpx;
|
||||
margin-top: -160rpx;
|
||||
// border: 1px solid #fff;
|
||||
margin-left: 85rpx;
|
||||
border-radius: 44rpx;
|
||||
z-index: 1;
|
||||
|
||||
::v-deep .u-input__input {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
::v-deep .uicon-arrow-down-fill {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
// backdrop-filter: blur(4rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
width: 100%;
|
||||
height: 140rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.box {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 2rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
|
||||
.icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.device {
|
||||
background-image: url(/static/aidex/images/menu-device.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.earning {
|
||||
background-image: url(/static/aidex/images/menu-earnings.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.alarm {
|
||||
background-image: url(/static/aidex/images/menu-alarm.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.policy {
|
||||
background-image: url(/static/aidex/images/menu-policy.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-box {
|
||||
height: calc(100% - 640rpx);
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
.box {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
width: 710rpx;
|
||||
border: 16rpx;
|
||||
margin: 20rpx;
|
||||
margin-top: 30rpx;
|
||||
box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.top-right-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
.top-right-item {
|
||||
padding: 5rpx 10rpx;
|
||||
border: 1rpx solid #009c77;
|
||||
font-size: 24rpx;
|
||||
color: #009c77;
|
||||
cursor: pointer;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.active {
|
||||
background: #009c77;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
1248
pages/tabbar/electricityPrice.vue
Normal file
1248
pages/tabbar/electricityPrice.vue
Normal file
File diff suppressed because it is too large
Load Diff
494
pages/tabbar/mine.vue
Normal file
494
pages/tabbar/mine.vue
Normal file
@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
|
||||
<view class="user-header">
|
||||
<!-- <image
|
||||
src="/static/aidex/login/login-bg.png"
|
||||
class="logo"
|
||||
></image> -->
|
||||
<view class="logo">
|
||||
|
||||
</view>
|
||||
<view class="bg-box">
|
||||
<view class="userinfo">
|
||||
<view class="image" @click="navTo('info')">
|
||||
<image style="width: 100%" src="/static/aidex/images/user07.png"></image>
|
||||
</view>
|
||||
<view class="info" style="display: flex; justify-content: space-between">
|
||||
<view>
|
||||
|
||||
<!-- <view class="username">
|
||||
<view class="username-department">
|
||||
{{ userData.deptName }}
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="join-day">已加入通联新合新能源集团 1005天</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view>
|
||||
<view class="top-list">
|
||||
<!-- 账号安全 -->
|
||||
<view class="personal-list shadow">
|
||||
<view class="account-security" @click="navTo('pwd')">
|
||||
<u-icon name="bell" size="40" color="#63D9B0" style="margin-right: 20rpx;"></u-icon>
|
||||
<view class="account-contect"> {{ $t('homePage.mine.accountSec') }} </view>
|
||||
<image src="/static/aidex/images/next.png" class="next"></image>
|
||||
|
||||
</view>
|
||||
<!-- <u-cell-item icon="map" :iconStyle="{ color: '#316ede' }" title="账号安全" @click="navTo('pwd')"></u-cell-item> -->
|
||||
<view class="u-line"></view>
|
||||
<!-- 关于我们 -->
|
||||
<view class="account-security" @click="navTo('about')">
|
||||
<u-icon name="info-circle" size="40" color="#889cf6" style="margin-right: 20rpx;"></u-icon>
|
||||
<view class="account-contect"> {{ $t('homePage.mine.aboutUs')}} </view>
|
||||
<image src="/static/aidex/images/next.png" class="next"></image>
|
||||
</view>
|
||||
|
||||
<view class="u-line"></view>
|
||||
<!-- 关于我们 -->
|
||||
<view class="account-security" @click="navTo('message')">
|
||||
<u-icon name="email" size="40" color="#ffaa00" style="margin-right: 20rpx;"></u-icon>
|
||||
<view class="account-contect"> {{ $t('homePage.mine.message')}} </view>
|
||||
<image src="/static/aidex/images/next.png" class="next"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 系统设置 -->
|
||||
<view class="personal-list shadow margin-top">
|
||||
|
||||
<!-- 关于我们 -->
|
||||
<view class="account-security" @click="show = true">
|
||||
<u-icon name="/static/aidex/images/language.png" size="40" color="#ffaa00"
|
||||
style="margin-right: 20rpx;"></u-icon>
|
||||
<view class="account-contect"> {{ $t('homePage.mine.changeLanguage')}} </view>
|
||||
<image src="/static/aidex/images/next.png" class="next"></image>
|
||||
</view>
|
||||
|
||||
<view class="u-line"></view>
|
||||
|
||||
<view class="account-security" @click="navTo('setting')">
|
||||
|
||||
<u-icon name="setting" size="40" color="#59a4e8" style="margin-right: 20rpx;"></u-icon>
|
||||
<view class="account-contect"> {{ $t('homePage.mine.sysSetting') }} </view>
|
||||
<image src="/static/aidex/images/next.png" class="next"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<u-select v-model="show" :list="list" @confirm="changeLanguage"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
iconSize: 38,
|
||||
background: {
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
show: false,
|
||||
list: [{
|
||||
value: 'zh_CN',
|
||||
label: '中文'
|
||||
},
|
||||
{
|
||||
value: 'en_US',
|
||||
label: 'English'
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
userData() {
|
||||
return this.vuex_user;
|
||||
},
|
||||
avatarUrl() {
|
||||
// let url = this.vuex_user.avatarUrl || '/ctxPath/static/images/user1.jpg';
|
||||
// url = url.replace('/ctxPath/', this.vuex_config.baseUrl + '/');
|
||||
let url =
|
||||
this.vuex_config.baseUrl + this.vuex_user.avatar ||
|
||||
"/static/aidex/tabbar/my_2.png";
|
||||
url = this.replaceAll(url, "\\", "/");
|
||||
return url + "?t=" + new Date().getTime();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeLanguage(val){
|
||||
this.$u.vuex("vuex_language", val[0].value);
|
||||
this.$i18n.locale = val[0].value
|
||||
this.getAllDict()
|
||||
this.getStationByUser()
|
||||
this.getProvinceStation()
|
||||
uni.setTabBarItem({
|
||||
index: 0,
|
||||
text: this.$t('homePage.home.station'),
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 1,
|
||||
text: this.$t('homePage.home.electricityPrice'),
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
text: this.$t('homePage.home.mine'),
|
||||
})
|
||||
},
|
||||
getStationByUser() {
|
||||
this.$u.api.getStationByUser().then((res) => {
|
||||
this.$u.vuex("vuex_station", res.data)
|
||||
})
|
||||
},
|
||||
getProvinceStation() {
|
||||
this.$u.api.alarm.GetNewStationlist().then((res) => {
|
||||
this.$u.vuex("vuex_provinceStation", res.data.list)
|
||||
this.$u.vuex("vuex_currentStation", res.data.list[0].list[0].list[0])
|
||||
})
|
||||
},
|
||||
getAllDict() {
|
||||
this.$u.api.getAllDict().then((res) => {
|
||||
const {
|
||||
data
|
||||
} = res
|
||||
const dicts = {}
|
||||
data.forEach((element) => {
|
||||
dicts[element.type] = element.list
|
||||
})
|
||||
this.$u.vuex("vuex_dicts", dicts)
|
||||
})
|
||||
},
|
||||
to(url) {
|
||||
uni.redirectTo({
|
||||
url: url,
|
||||
});
|
||||
},
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/sys/user/${url}`,
|
||||
});
|
||||
},
|
||||
logout() {
|
||||
this.$u.api.logout().then((res) => {
|
||||
this.$u.toast(res.msg);
|
||||
if (res.code == "200" || res.code == "401") {
|
||||
let self = this;
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/sys/login/index",
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
},
|
||||
upgrade() {
|
||||
// #ifdef APP-PLUS
|
||||
this.$u.api.upgradeCheck().then((res) => {
|
||||
if (res.result == "true") {
|
||||
uni.showModal({
|
||||
title: this.$t('homePage.mine.tip'),
|
||||
content: res.message + this.$t('homePage.mine.downUpdate'),
|
||||
showCancel: true,
|
||||
success: function(res2) {
|
||||
if (res2.confirm) {
|
||||
plus.runtime.openURL(res.data.apkUrl);
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$u.toast(res.message);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.$u.toast(this.$t('homePage.mine.noUpdate'));
|
||||
// #endif
|
||||
},
|
||||
logout() {
|
||||
this.$u.api.logout().then((res) => {
|
||||
if (res.code == 200) {
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/sys/login/index",
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.wrap .u-cell-box .u-cell_title {
|
||||
color: #202328;
|
||||
}
|
||||
|
||||
.sign-in-images {
|
||||
width: 125rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
|
||||
uni-image {
|
||||
width: 125rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.out-box {
|
||||
width: 670rpx;
|
||||
position: absolute;
|
||||
bottom: 140rpx;
|
||||
}
|
||||
|
||||
.user-header {
|
||||
width: 100%;
|
||||
height: 450rpx;
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
border-radius: 0 0 50% 50%;
|
||||
background-color: #069E7A;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bg-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 450rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.image {
|
||||
flex-shrink: 0;
|
||||
width: 60%;
|
||||
height: 270rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
padding-left: 30rpx;
|
||||
color: #fff;
|
||||
height: 106rpx;
|
||||
|
||||
.username {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.username-name {
|
||||
display: inline;
|
||||
font-size: 30rpx;
|
||||
color: #2a2a2a;
|
||||
margin-right: 33rpx;
|
||||
}
|
||||
|
||||
.username-department {
|
||||
z-index: 9999999;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
border-radius: 5rpx;
|
||||
margin-right: 45rpx;
|
||||
}
|
||||
|
||||
.username-edit {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.join-day {
|
||||
display: inline;
|
||||
font-size: 22rpx;
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
right: 70rpx;
|
||||
top: 65rpx;
|
||||
|
||||
.u-btn {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 120rpx;
|
||||
margin-left: 40rpx;
|
||||
width: 670rpx;
|
||||
height: 200rpx;
|
||||
|
||||
.u-line {
|
||||
width: 630rpx;
|
||||
height: 1rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.personal-list {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.account-security {
|
||||
width: 670rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
padding-left: 35rpx;
|
||||
padding-right: 35rpx;
|
||||
display: flex;
|
||||
border-radius: 10rpx;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.account-icon {
|
||||
width: 33rpx;
|
||||
height: 33rpx;
|
||||
margin-right: 33rpx;
|
||||
}
|
||||
|
||||
.account-context {
|
||||
// width: 33rpx;
|
||||
font-size: 24rpx;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
.next {
|
||||
position: absolute;
|
||||
right: 38rpx;
|
||||
width: 12rpx;
|
||||
height: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding: 0 4%;
|
||||
margin-bottom: 5rpx;
|
||||
border-radius: 0 0 100% 100%;
|
||||
background-color: #4094ff;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 10rpx;
|
||||
border-radius: 15rpx;
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
|
||||
background-color: #fefefe;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// flex-flow: wrap;
|
||||
height: 120rpx;
|
||||
color: #666666;
|
||||
font-size: 30rpx;
|
||||
padding: 10rpx 10rpx;
|
||||
|
||||
.icon {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hover {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-input-input {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.userinfo-topbox {
|
||||
padding: 10px 15px;
|
||||
color: #ffffff;
|
||||
|
||||
.number {
|
||||
font-size: 20px;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-order-top {
|
||||
padding: 10px 15px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.user-order-box {
|
||||
padding: 10px 15px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #ededed;
|
||||
|
||||
.u-col {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-badge {
|
||||
top: -8px !important;
|
||||
right: 5px !important;
|
||||
background: #ff7001;
|
||||
border: 1px solid #ffffff;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user