8 changed files with 16435 additions and 64 deletions
@ -1,10 +1,10 @@ |
|||
VUE_APP_MODE=development |
|||
VUE_APP_NODE_ENV=development |
|||
VUE_APP_SCENE=wisdomcar_counter |
|||
VUE_APP_BASE_URL=http://test.tall.wiki/ |
|||
VUE_APP_API_URL=http://test.tall.wiki/gateway |
|||
VUE_APP_BASE_URL=http://www.tall.wiki/ |
|||
VUE_APP_API_URL=http://www.tall.wiki/gateway |
|||
VUE_APP_PROXY_URL=/gateway |
|||
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_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