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

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