8 changed files with 16435 additions and 64 deletions
@ -1,10 +1,10 @@ |
|||||
VUE_APP_MODE=development |
VUE_APP_MODE=development |
||||
VUE_APP_NODE_ENV=development |
VUE_APP_NODE_ENV=development |
||||
VUE_APP_SCENE=wisdomcar_counter |
VUE_APP_SCENE=wisdomcar_counter |
||||
VUE_APP_BASE_URL=http://test.tall.wiki/ |
VUE_APP_BASE_URL=http://www.tall.wiki/ |
||||
VUE_APP_API_URL=http://test.tall.wiki/gateway |
VUE_APP_API_URL=http://www.tall.wiki/gateway |
||||
VUE_APP_PROXY_URL=/gateway |
VUE_APP_PROXY_URL=/gateway |
||||
VUE_APP_PUBLIC_PATH=/wisdomcar_counter |
VUE_APP_PUBLIC_PATH=/wisdomcar_counter |
||||
VUE_APP_MSG_URL=wss://test.tall.wiki/websocket/message/v4.0/ws |
VUE_APP_MSG_URL=wss://www.tall.wiki/websocket/message/v4.0/ws |
||||
VUE_APP_TITLE=选矿系统 |
VUE_APP_TITLE=选矿系统 |
||||
VUE_APP_DESCRIPTION=选矿系统 |
VUE_APP_DESCRIPTION=选矿系统 |
||||
|
|||||
File diff suppressed because it is too large
@ -0,0 +1,155 @@ |
|||||
|
<template> |
||||
|
<!-- 选矿新版rfid图 --> |
||||
|
<div> |
||||
|
<div id="Weight-box" :style="{ width: '100%', height: '500px' }" class="chart-box"> |
||||
|
<div id="Weight" style="width: 100%; height: 100%"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Weight', |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
width: '', |
||||
|
height: '', |
||||
|
timer: null, |
||||
|
dateTiem: [], |
||||
|
weight1: [], |
||||
|
weight2: [], |
||||
|
weight3: [], |
||||
|
start: 95, |
||||
|
end: 100, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
// 定义option |
||||
|
option() { |
||||
|
return { |
||||
|
color: ['#80FFA5', '#FF0087', '#FFBF00'], |
||||
|
title: { text: '倾角图' }, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
label: { backgroundColor: '#6a7985' }, |
||||
|
}, |
||||
|
}, |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
start: 98, |
||||
|
end: 100, |
||||
|
}, |
||||
|
], |
||||
|
legend: { data: ['称重1', '称重2', '称重3'] }, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: this.dateTiem, // 横坐标 |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [{ type: 'value' }], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '称重1', |
||||
|
type: 'line', |
||||
|
// stack: '总量', |
||||
|
smooth: true, |
||||
|
lineStyle: { width: 2 }, |
||||
|
showSymbol: false, |
||||
|
emphasis: { focus: 'series' }, |
||||
|
data: this.weight1, |
||||
|
}, |
||||
|
{ |
||||
|
name: '称重2', |
||||
|
type: 'line', |
||||
|
// stack: '总量', |
||||
|
smooth: true, |
||||
|
lineStyle: { width: 2 }, |
||||
|
showSymbol: false, |
||||
|
emphasis: { focus: 'series' }, |
||||
|
data: this.weight2, |
||||
|
}, |
||||
|
{ |
||||
|
name: '称重3', |
||||
|
type: 'line', |
||||
|
// stack: '总量', |
||||
|
smooth: true, |
||||
|
lineStyle: { width: 2 }, |
||||
|
showSymbol: false, |
||||
|
emphasis: { focus: 'series' }, |
||||
|
data: this.weight3, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
watch: { |
||||
|
list() { |
||||
|
this.forList(this.list); |
||||
|
this.drawLine(); |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.forList(this.list); |
||||
|
this.drawLine(); |
||||
|
let wh = window.innerWidth; |
||||
|
let hg = window.innerHeight; |
||||
|
this.width = wh + 'px'; |
||||
|
this.height = hg + 'px'; |
||||
|
window.onresize = () => { |
||||
|
return (() => { |
||||
|
wh = window.innerWidth; |
||||
|
hg = window.innerHeight; |
||||
|
this.width = wh + 'px'; |
||||
|
this.height = hg + 'px'; |
||||
|
})(); |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
drawLine() { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
let WeightChart = this.$echarts.init(document.getElementById('Weight')); |
||||
|
// 绘制图表 |
||||
|
WeightChart.setOption(this.option); |
||||
|
}, |
||||
|
getStyle(obj, attr) { |
||||
|
if (obj.currentStyle) { |
||||
|
return obj.currentStyle[attr]; |
||||
|
} else { |
||||
|
return document.defaultView.getComputedStyle(obj, null)[attr]; |
||||
|
} |
||||
|
}, |
||||
|
// 处理数组 |
||||
|
forList(list) { |
||||
|
// 获取横坐标 |
||||
|
for (let i = 0; i < list.length; i++) { |
||||
|
this.dateTiem.push(this.$moment(parseInt(list[i].time)).format('YYYY-MM-DD HH:mm:ss')); |
||||
|
// 获取称重1的数据 |
||||
|
this.weight1.push(list[i].value.split(',')[0]); |
||||
|
// 获取称重2的数据 |
||||
|
this.weight2.push(list[i].value.split(',')[1]); |
||||
|
// 获取称重3的数据 |
||||
|
this.weight3.push(list[i].value.split(',')[2]); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped ></style> |
||||
Loading…
Reference in new issue