<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:[],
				stationId:null,
				noloading:false,
				// 文字
				textCanvasData: [
					{
					  type: "text",
					  coord: [[185, 115]],
					  font: [
					    {
					      text: this.$t("homePage.home.allActivePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						    left:90
					    },
					  ],
					},
					{
						  //1# 直流舱--1
					  type: "text",
					  coord: [[10, 75]],
					  font: [
					    {
					      text: this.$t("homePage.home.grid"),
					      size: 12,
					      color: "#333333",
					      width: 50,
					    },
					  ],
					},
					//1#PCS升压一体舱--2
					{
					  type: "text",
					  coord: [[285, 65]],
					  font: [
					    {
					      text: this.$t("homePage.home.load"),
					      size: 12,
					      color: "#333333",
					      width: 50,
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[10, 305]],
					  font: [
					    {
					      text: "1#" + this.$t("homePage.home.cabinet"),
					      size: 12,
					      color: "#333333",
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[10, 175]],
					  font: [
					    {
					      text: this.$t("homePage.home.activePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:85
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[10, 190]],
					  font: [
					    {
					      text: this.$t("homePage.home.workStatus"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:60
					    },
					  ],
					},
					
					{
					  type: "text",
					  coord: [[10, 205]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						   left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[10, 220]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						   left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[95, 305]],
					  font: [
					    {
					      text: "2#" + this.$t("homePage.home.cabinet"),
					      size: 12,
					      color: "#333333",
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[65, 320]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[65, 335]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[65, 350]],
					  font: [
					    {
					      text: this.$t("homePage.home.workStatus"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:60
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[65, 365]],
					  font: [
					    {
					      text: this.$t("homePage.home.activePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:85
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[183, 305]],
					  font: [
					    {
					      text: "3#" + this.$t("homePage.home.cabinet"),
					      size: 12,
					      color: "#333333",
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[180, 320]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[180, 335]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[180, 350]],
					  font: [
					    {
					      text: this.$t("homePage.home.workStatus"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:60
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[180, 365]],
					  font: [
					    {
					      text: this.$t("homePage.home.activePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:85
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[272, 305]],
					  font: [
					    {
					      text: "4#" + this.$t("homePage.home.cabinet"),
					      size: 12,
					      color: "#333333",
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[214, 175]],
					  font: [
					    {
					      text: this.$t("homePage.home.activePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:85
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[240, 190]],
					  font: [
					    {
					      text: this.$t("homePage.home.workStatus"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:60
					    },
					  ],
					},
					
					{
					  type: "text",
					  coord: [[245, 205]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[245, 220]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
				],
				// 图片
				imageCanvasData: [
					{
					  //电网
					  type: "image",
					  url: "/static/topology/dianwang.png",
					  coord: [
					    [10, 10],
					    [40, 50],
					  ],
					},
					
					{
					  //负载
					  type: "image",
					  url: "/static/topology/fuzai.png",
					  coord: [
					    [280, 10],
					    [40, 40],
					  ],
					},
					{
					  //一体柜
					  type: "image",
					  url: "/static/topology/yitigui.png",
					  coord: [
					    [145, 135],
					    [40, 60],
					  ],
					},
					{
					  //一体舱
					  type: "image",
					  url: "/static/topology/yiticang.png",
					  coord: [
					    [10, 240],
					    [40, 50],
					  ],
					},
					{
					  //一体舱
					  type: "image",
					  url: "/static/topology/yiticang.png",
					  coord: [
					    [98, 240],
					    [40, 50],
					  ],
					},
					{
					  //一体舱
					  type: "image",
					  url: "/static/topology/yiticang.png",
					  coord: [
					    [186, 240],
					    [40, 50],
					  ],
					},
					{
					  //一体舱
					  type: "image",
					  url: "/static/topology/yiticang.png",
					  coord: [
					    [274, 240],
					    [40, 50],
					  ],
					},
					
					{
					  //电表
					  type: "image",
					  url: "/static/topology/ammeter.png",
					  coord: [
					    [205, 60],
					    [40, 40],
					  ],
					},
				],
				// 线
				lineCanvasData: [
					{
					  type: "line",
					  coord: [
					    [55, 40],
					    [275, 40],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					
					
					//center
					{
					  type: "line",
					  coord: [
					    [165, 40],
					    [165, 135],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [165, 80],
					    [200, 80],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [165, 195],
					    [165, 230],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					
					//bottom
					{
					  type: "line",
					  coord: [
					    [35, 230],
					    [295, 230],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					
				],
				// 点
				circleCanvasData: [
					{
					  type: "circle",
					  coord: [[55,40]],
					  color: "#3AECA1",
					  isMove: false,
					  r: 3,
					},
					{
					  type: "circle",
					  coord: [[275, 40]],
					  color: "#3AECA1",
					  isMove: false,
					  r: 3,
					},
					{
					  type: "circle",
					  coord: [[35, 230]],
					  color: "#3AECA1",
					  isMove: false,
					  r: 3,
					},
					{
					  type: "circle",
					  coord: [[123, 230]],
					  color: "#3AECA1",
					  isMove: false,
					  r: 3,
					},
					{
					  type: "circle",
					  coord: [[211, 230]],
					  color: "#3AECA1",
					  isMove: false,
					  r: 3,
					},
					{
					  type: "circle",
					  coord: [[295, 230]],
					  color: "#3AECA1",
					  isMove: false,
					  r: 3,
					},
					
					{
					  type: "circle",
					  coord: [[200, 80]],
					  color: "#3AECA1",
					  isMove: false,
					  r: 3,
					},
					
				]
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},
		methods:{
			changeEnglish() {
				this.textCanvasData = [
					{
					  type: "text",
					  coord: [[185, 115]],
					  font: [
					    {
					      text: this.$t("homePage.home.allActivePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						    left:90
					    },
					  ],
					},
					{
						  //1# 直流舱--1
					  type: "text",
					  coord: [[10, 75]],
					  font: [
					    {
					      text: this.$t("homePage.home.grid"),
					      size: 12,
					      color: "#333333",
					      width: 50,
					    },
					  ],
					},
					//1#PCS升压一体舱--2
					{
					  type: "text",
					  coord: [[285, 65]],
					  font: [
					    {
					      text: this.$t("homePage.home.load"),
					      size: 12,
					      color: "#333333",
					      width: 50,
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[10, 305]],
					  font: [
					    {
					      text: "1#" + this.$t("homePage.home.cabinet"),
					      size: 12,
					      color: "#333333",
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[10, 175]],
					  font: [
					    {
					      text: this.$t("homePage.home.activePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:85
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[10, 190]],
					  font: [
					    {
					      text: this.$t("homePage.home.workStatus"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:60
					    },
					  ],
					},
					
					{
					  type: "text",
					  coord: [[10, 205]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						   left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[10, 220]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						   left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[95, 305]],
					  font: [
					    {
					      text: "2#" + this.$t("homePage.home.cabinet"),
					      size: 12,
					      color: "#333333",
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[65, 320]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[65, 335]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[65, 350]],
					  font: [
					    {
					      text: this.$t("homePage.home.workStatus"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:60
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[65, 365]],
					  font: [
					    {
					      text: this.$t("homePage.home.activePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:85
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[183, 305]],
					  font: [
					    {
					      text: "3#" + this.$t("homePage.home.cabinet"),
					      size: 12,
					      color: "#333333",
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[180, 320]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[180, 335]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[180, 350]],
					  font: [
					    {
					      text: this.$t("homePage.home.workStatus"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:60
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[180, 365]],
					  font: [
					    {
					      text: this.$t("homePage.home.activePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:85
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[272, 305]],
					  font: [
					    {
					      text: "4#" + this.$t("homePage.home.cabinet"),
					      size: 12,
					      color: "#333333",
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[214, 175]],
					  font: [
					    {
					      text: this.$t("homePage.home.activePower"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:85
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[240, 190]],
					  font: [
					    {
					      text: this.$t("homePage.home.workStatus"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:60
					    },
					  ],
					},
					
					{
					  type: "text",
					  coord: [[245, 205]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:50
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[245, 220]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      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[12].font[1].text =''
				this.textCanvasData[11].font[1].text =''
				this.textCanvasData[10].font[1].text =''
				this.textCanvasData[9].font[1].text =''
				
				this.textCanvasData[17].font[1].text =''
				this.textCanvasData[16].font[1].text =''
				this.textCanvasData[15].font[1].text =''
				this.textCanvasData[14].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 = ''
			},
			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.partList.length ?   this.partList[0].activePowerPCS + '' : '' 
					    this.textCanvasData[5].font[1].text =  this.partList.length ?  this.workStatus(this.partList[0].activePowerPCS, 0) : '' 
					    this.textCanvasData[6].font[1].text =  this.partList.length ?  this.partList[0].soc + '' : '' 
					    this.textCanvasData[7].font[1].text =  this.partList.length ?  this.partList[0].soh + '' : '' 
						
						this.textCanvasData[12].font[1].text =  this.partList.length ?   this.partList[1].activePowerPCS + '' : ''
						this.textCanvasData[11].font[1].text =  this.partList.length ?  this.workStatus(this.partList[1].activePowerPCS, 1) : '' 
						this.textCanvasData[10].font[1].text =  this.partList.length ?  this.partList[1].soc + '' : '' 
						this.textCanvasData[9].font[1].text =  this.partList.length ?  this.partList[1].soh + '' : '' 
						
						this.textCanvasData[17].font[1].text =  this.partList.length ?   this.partList[1].activePowerPCS + '' : ''
						this.textCanvasData[16].font[1].text =  this.partList.length ?  this.workStatus(this.partList[1].activePowerPCS, 1) : '' 
						this.textCanvasData[15].font[1].text =  this.partList.length ?  this.partList[1].soc + '' : '' 
						this.textCanvasData[14].font[1].text =  this.partList.length ?  this.partList[1].soh + '' : '' 
						
						this.textCanvasData[19].font[1].text =  this.partList.length ?   this.partList[1].activePowerPCS + '' : ''
						this.textCanvasData[20].font[1].text =  this.partList.length ?  this.workStatus(this.partList[1].activePowerPCS, 1) : '' 
						this.textCanvasData[21].font[1].text =  this.partList.length ?  this.partList[1].soc + '' : '' 
						this.textCanvasData[22].font[1].text =  this.partList.length ?  this.partList[1].soh + '' : '' 
					  resolve()
					  })
				})
			},
			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 !== null ? res.data.activePower + '' : ''
				      // this.rightDianBiao[3].font[1].text = res.data.activePower !== null ? res.data.activePower : ''
				      resolve()
				    })
				    .catch((err) => {
				      reject("错误");
				    });
				});
			},
			workStatus(val, index) {
			  if (this.partList[index].flowDirection === 1) {
			    if (+val > +0.1) {
			      return this.$t("homePage.home.charge")
			    }
			    if (+val < -0.1) {
			      return this.$t("homePage.home.disCharge")
			    }
			    if (val < 0.1 || +val.abs < 0.1) {
			      return this.$t("homePage.home.standing")
			    }
			  } else {
			    if (+val > +0.1) {
			      return this.$t("homePage.home.disCharge")
			    }
			    if (+val < -0.1) {
			      return this.$t("homePage.home.charge")
			    }
			    if (val < 0.1 || +val.abs < 0.1) {
			      return this.$t("homePage.home.standing")
			    }
			  }
			},
		}
		
	}
</script>
<style lang="scss" scoped>
	.warp {
		width: 650rpx;
		height: 750rpx;
		position: relative;
	}
</style>