smart_storage_app/pages/tabbar/components/topology/kejiyuan.vue

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