初次提交
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user