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