18 changed files with 545 additions and 154 deletions
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<div class="box-bg"> |
|||
<img :src="src" :style="{ width: '426rem', height: '200rem',margin: '10rem 35rem' }" v-if="src" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from "vue"; |
|||
import { getHeatImaging } from "api/index"; |
|||
|
|||
export default defineComponent({ |
|||
name: "heatDiagram", |
|||
data() { |
|||
return { |
|||
myCharts: {}, |
|||
src: "", |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
setInterval(() => { |
|||
// 获取数据 |
|||
this.getHeatImaging(); |
|||
}, 5000); |
|||
}, |
|||
|
|||
mounted() { |
|||
// 获取数据 |
|||
this.getHeatImaging(); |
|||
}, |
|||
|
|||
methods: { |
|||
/** 查询温度与湿度 |
|||
* @param {number} id 热成像设备id |
|||
*/ |
|||
async getHeatImaging() { |
|||
try { |
|||
const param = {}; |
|||
const data = await getHeatImaging(param); |
|||
this.src = data.imageData; |
|||
} catch (error) { |
|||
console.log("error: ", error); |
|||
} |
|||
}, |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.box-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.heatDiagram { |
|||
width: 1440rem; |
|||
height: 1110rem; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,99 @@ |
|||
<template> |
|||
<div class="box-bg"> |
|||
<div :style="{ width: '92%', height: '94%',margin: 'auto 3% auto 5%' }" id="statistics"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from "vue"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
export default defineComponent({ |
|||
name: "statistics", |
|||
data() { |
|||
return { |
|||
myCharts: {}, |
|||
carOfInLists: [], |
|||
carOfOutLists: [], |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
// 绘制图表 |
|||
this.getOptions(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 绘制图表 |
|||
getOptions() { |
|||
const statistics = document.getElementById("statistics"); |
|||
this.myCharts = echarts.init(statistics); |
|||
this.myCharts.setOption({ |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "shadow", |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "0", |
|||
right: "6%", |
|||
top: "20%", |
|||
bottom: "0", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
data: ["2016", "2017", "2018", "2019", "2020"], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
show: false, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(255,255,255,0.1)", |
|||
}, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [300, 150, 180, 120, 200], |
|||
type: "bar", |
|||
barCategoryGap: "50%", |
|||
showBackground: true, |
|||
label: { |
|||
show: true, |
|||
position: "top", |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "#83bff6" }, |
|||
{ offset: 0.5, color: "#188df0" }, |
|||
{ offset: 1, color: "#188df0" }, |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}); |
|||
}, |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.box-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.statistics { |
|||
width: 1440rem; |
|||
height: 1110rem; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue