<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: [],
				partList:[],
				noloading:false,
				// 文字
				textCanvasData: [{
						type: "text",
						coord: [
							[155, 100]
						],
						font: [{
								text: this.$t("homePage.home.allActivePower"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 90
							},
						],
					},
					{
						type: "text",
						coord: [
							[5, 70]
						],
						font: [{
							text: this.$t("homePage.home.grid"),
							size: 12,
							color: "#666666",

						}],
					}, {
						type: "text",
						coord: [
							[258, 65]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#666666",

						}],
					},
					{
						type: "text",
						coord: [
							[0, 340]
						],
						font: [{
							text: "1#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[21, 355]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",
							},
							{
								text: "123",
								size: 12,
								color: "#333333",
								left: 30,
							},
						],
					},
					{
						type: "text",
						coord: [
							[11, 370]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},

					{
						type: "text",
						coord: [
							[1, 385]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[0, 400]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[68, 340]
						],
						font: [{
							text: "2#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[62, 242]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 30
							},
						],
					},

					{
						type: "text",
						coord: [
							[52, 227]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",


							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},

					{
						type: "text",
						coord: [
							[42, 212]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[41, 198]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[137, 340]
						],
						font: [{
							text: "3#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[142, 355]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 30
							},
						],
					},
					{
						type: "text",
						coord: [
							[132, 370]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
					{
						type: "text",
						coord: [
							[122, 385]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[121, 400]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[206, 340]
						],
						font: [{
							text: "4#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[227, 242]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 30
							},
						],
					},
					{
						type: "text",
						coord: [
							[217, 227]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
					{
						type: "text",
						coord: [
							[207, 212]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[206, 198]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[275, 340]
						],
						font: [{
							text: "5#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[264, 355]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 30
							},
						],
					},
					{
						type: "text",
						coord: [
							[254, 370]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},

					{
						type: "text",
						coord: [
							[244, 385]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[243, 400]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",

							},
							{
								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/dianchi.png",
						coord: [
							[5, 283],
							[40, 40],
						],
					},
					{
						type: "image",
						url: "/static/topology/dianchi.png",
						coord: [
							[74, 283],
							[40, 40],
						],
					},
					{
						type: "image",
						url: "/static/topology/dianchi.png",
						coord: [
							[143, 283],
							[40, 40],
						],
					},
					{
						type: "image",
						url: "/static/topology/dianchi.png",
						coord: [
							[212, 283],
							[40, 40],
						],
					},
					{
						type: "image",
						url: "/static/topology/dianchi.png",
						coord: [
							[281, 283],
							[40, 40],
						],
					},
				],
				// 线
				lineCanvasData: [
					{
						type: "line",
						coord: [
							[45, 36],
							[245, 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, 150],
							[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: [
							[22, 251],
							[22, 282],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[22, 251],
							[298, 251],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[95, 251],
							[95, 282],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[161, 251],
							[161, 282],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[229, 251],
							[229, 282],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[298, 251],
							[298, 282],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
				],
				// 点
				circleCanvasData: [
					{
							type: "circle",
							coord: [
								[45, 36]
							],
							color: "#3AECA1",
							isMove: false,
							r: 3,
						},
						{
								type: "circle",
								coord: [
									[245, 36]
								],
								color: "#3AECA1",
								isMove: false,
								r: 3,
							},
					{
						type: "circle",
						coord: [
							[22, 251]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					
					{
						type: "circle",
						coord: [
							[95, 251]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					
					{
						type: "circle",
						coord: [
							[162, 251]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[229, 251]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[298, 251]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
				]
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},

		methods: {
			changeEnglish(){
				this.textCanvasData = [{
						type: "text",
						coord: [
							[155, 100]
						],
						font: [{
								text: this.$t("homePage.home.allActivePower"),
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 90
							},
						],
					},
					{
						type: "text",
						coord: [
							[5, 70]
						],
						font: [{
							text: this.$t("homePage.home.grid"),
							size: 12,
							color: "#666666",
				
						}],
					}, {
						type: "text",
						coord: [
							[258, 65]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#666666",
				
						}],
					},
					{
						type: "text",
						coord: [
							[0, 340]
						],
						font: [{
							text: "1#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[21, 355]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",
							},
							{
								text: "123",
								size: 12,
								color: "#333333",
								left: 30,
							},
						],
					},
					{
						type: "text",
						coord: [
							[11, 370]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
				
					{
						type: "text",
						coord: [
							[1, 385]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[0, 400]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[68, 340]
						],
						font: [{
							text: "2#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[62, 242]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 30
							},
						],
					},
				
					{
						type: "text",
						coord: [
							[52, 227]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
				
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
				
					{
						type: "text",
						coord: [
							[42, 212]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[41, 198]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[137, 340]
						],
						font: [{
							text: "3#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[142, 355]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 30
							},
						],
					},
					{
						type: "text",
						coord: [
							[132, 370]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
					{
						type: "text",
						coord: [
							[122, 385]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[121, 400]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[206, 340]
						],
						font: [{
							text: "4#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[227, 242]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 30
							},
						],
					},
					{
						type: "text",
						coord: [
							[217, 227]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
					{
						type: "text",
						coord: [
							[207, 212]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[206, 198]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[275, 340]
						],
						font: [{
							text: "5#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
						}, ],
					},
					{
						type: "text",
						coord: [
							[264, 355]
						],
						font: [{
								text: this.$t("homePage.home.status"),
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 30
							},
						],
					},
					{
						type: "text",
						coord: [
							[254, 370]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
				
					{
						type: "text",
						coord: [
							[244, 385]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[243, 400]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
				
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					}
				]
			},
			getData(val){
				this.stationId = val
				this.clearData()
				const api = [this.getMiddleData(), this.getDianBiaoStatus()]
				Promise.all(api).finally((result) => {
					this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
						.lineCanvasData, ...this.circleCanvasData
					]
					this.noloading = true
				});
			},
			clearData(){
					this.textCanvasData[4].font[1].text = ''
					this.textCanvasData[5].font[1].text = ''
					this.textCanvasData[6].font[1].text = ''
					this.textCanvasData[7].font[1].text = ''
					
					this.textCanvasData[9].font[1].text = ''
					this.textCanvasData[10].font[1].text = ''
					this.textCanvasData[11].font[1].text = ''
					this.textCanvasData[12].font[1].text = ''
					
					this.textCanvasData[14].font[1].text = ''
					this.textCanvasData[15].font[1].text = ''
					this.textCanvasData[16].font[1].text = ''
					this.textCanvasData[17].font[1].text = ''
					
					this.textCanvasData[19].font[1].text = ''
					this.textCanvasData[20].font[1].text = ''
					this.textCanvasData[21].font[1].text = ''
					this.textCanvasData[22].font[1].text = ''
					
					this.textCanvasData[24].font[1].text = ''
					this.textCanvasData[25].font[1].text = ''
					this.textCanvasData[26].font[1].text = ''
					this.textCanvasData[27].font[1].text = ''
			},
			getMiddleData() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetOpenStationMiddlePart({
							stationId: this.stationId
						})
						.then((res) => {
							this.partList = res.data
							this.textCanvasData[4].font[1].text = this.workStatus(this.partList[0].activePowerPCS,0)
							this.textCanvasData[5].font[1].text = this.partList[0].activePowerPCS !== null ? this.partList[0].activePowerPCS + '' : ''
							this.textCanvasData[6].font[1].text = this.partList[0].soc !== null ? this.partList[0].soc + '' : ''
							this.textCanvasData[7].font[1].text = this.partList[0].soh !== null ? this.partList[0].soh + '' : ''
							
							this.textCanvasData[9].font[1].text = this.workStatus(this.partList[1].activePowerPCS,1)
							this.textCanvasData[10].font[1].text = this.partList[1].activePowerPCS !== null ? this.partList[1].activePowerPCS + '' : ''
							this.textCanvasData[11].font[1].text = this.partList[1].soc !== null ? this.partList[1].soc + '' : ''
							this.textCanvasData[12].font[1].text = this.partList[1].soh !== null ? this.partList[1].soh + '' : ''
							
							this.textCanvasData[14].font[1].text = this.workStatus(this.partList[2].activePowerPCS,2)
							this.textCanvasData[15].font[1].text = this.partList[2].activePowerPCS !== null ? this.partList[2].activePowerPCS + '' : ''
							this.textCanvasData[16].font[1].text = this.partList[2].soc !== null ? this.partList[2].soc + '' : ''
							this.textCanvasData[17].font[1].text = this.partList[2].soh !== null ? this.partList[2].soh + '' : ''
							
							this.textCanvasData[19].font[1].text = this.workStatus(this.partList[3].activePowerPCS,3)
							this.textCanvasData[20].font[1].text = this.partList[3].activePowerPCS !== null ? this.partList[3].activePowerPCS + '' : ''
							this.textCanvasData[21].font[1].text = this.partList[3].soc !== null ? this.partList[3].soc + '' : ''
							this.textCanvasData[22].font[1].text = this.partList[3].soh !== null ? this.partList[3].soh + '' : ''
							
							this.textCanvasData[24].font[1].text = this.workStatus(this.partList[4].activePowerPCS,4)
							this.textCanvasData[25].font[1].text = this.partList[4].activePowerPCS !== null ? this.partList[4].activePowerPCS + '' : ''
							this.textCanvasData[26].font[1].text = this.partList[4].soc !== null ? this.partList[4].soc + '' : ''
							this.textCanvasData[27].font[1].text = this.partList[4].soh !== null ? this.partList[4].soh + '' : ''
						
							resolve()

						})
				})

			},
			workStatus(val, index) {
			  if (this.partList[index].flowDirection === 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")
			    }
			  }
			},
			getDianBiaoStatus() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetMiddlePart({
							stationId: this.stationId,
						})
						.then((res) => {
						this.textCanvasData[0].font[1].text = res.data.activePower
							resolve()
						})
						.catch((err) => {
							reject("错误");
						});
				});
			}
		}



	}
</script>
<style lang="scss" scoped>
	.warp {
		width: 650rpx;
		height: 850rpx;
		position: relative;
	}
</style>