Merge pull request 'dengjie' (#122) from dengjie into dev
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/122
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
<el-dialog v-model="isVisited" title="有害气体监控数据" width="1996px" :modal="false">
|
||||
<div class="left-icon"></div>
|
||||
<div class="right-icon"></div>
|
||||
<div id="container" ref="chart" @click.stop></div>
|
||||
<div id="container" ref="chart"></div>
|
||||
<div class="time-select">
|
||||
|
||||
</div>
|
||||
@@ -25,9 +25,61 @@ const props = defineProps({
|
||||
});
|
||||
const isVisited = ref(false);
|
||||
const badGasList = ref([])
|
||||
const chart = ref(null);
|
||||
const chart = ref();
|
||||
let myEcharts = reactive({});
|
||||
const option = reactive({
|
||||
// const option = reactive()
|
||||
|
||||
watch(() => props.list, (now) => {
|
||||
badGasList.value.forEach(item => {
|
||||
now.forEach(newItem => {
|
||||
if (item.equipmentId === newItem.equipmentId) {
|
||||
item.value = newItem.value
|
||||
}
|
||||
})
|
||||
})
|
||||
}, {deep: true});
|
||||
|
||||
watch(() => props.badGasData, (now) => {
|
||||
getBadGasInfo(now.sensorList)
|
||||
}, {deep: true});
|
||||
|
||||
const getBadGasInfo = (now) => {
|
||||
let windPressureObj = {}
|
||||
let windPressureArr = []
|
||||
now.map(item => {
|
||||
if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
|
||||
windPressureObj = changeData(item)
|
||||
windPressureArr.push(windPressureObj)
|
||||
}
|
||||
})
|
||||
badGasList.value = windPressureArr
|
||||
}
|
||||
const changeData = (item) => {
|
||||
return {
|
||||
equipmentId: item.equipmentId,
|
||||
name: item.equipmentName.slice(0, item.equipmentName.length - 2),
|
||||
max: 120,
|
||||
value: item.value,
|
||||
point: item.valueThreshold,
|
||||
unit: item.unit
|
||||
}
|
||||
}
|
||||
const handleOpenChart = () => {
|
||||
console.log('有害气体弹窗')
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
// initChart()
|
||||
}
|
||||
/**
|
||||
* 初始化echarts实例方法
|
||||
*/
|
||||
const initChart = () => {
|
||||
//3.初始化container容器
|
||||
myEcharts = echarts.init(document.getElementById('container'));
|
||||
//5.传入数据
|
||||
let option={
|
||||
//图例
|
||||
legend: {
|
||||
left: 0,
|
||||
@@ -65,7 +117,6 @@ const option = reactive({
|
||||
//Y轴
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
@@ -126,62 +177,8 @@ const option = reactive({
|
||||
}
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
watch(() => props.list, (now) => {
|
||||
badGasList.value.forEach(item => {
|
||||
now.forEach(newItem => {
|
||||
if (item.equipmentId === newItem.equipmentId) {
|
||||
item.value = newItem.value
|
||||
}
|
||||
})
|
||||
})
|
||||
}, {deep: true});
|
||||
|
||||
watch(() => props.badGasData, (now) => {
|
||||
getBadGasInfo(now.sensorList)
|
||||
}, {deep: true});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
})
|
||||
|
||||
const getBadGasInfo = (now) => {
|
||||
let windPressureObj = {}
|
||||
let windPressureArr = []
|
||||
now.map(item => {
|
||||
if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
|
||||
windPressureObj = changeData(item)
|
||||
windPressureArr.push(windPressureObj)
|
||||
}
|
||||
})
|
||||
badGasList.value = windPressureArr
|
||||
}
|
||||
const changeData = (item) => {
|
||||
return {
|
||||
equipmentId: item.equipmentId,
|
||||
name: item.equipmentName.slice(0, item.equipmentName.length - 2),
|
||||
max: 120,
|
||||
value: item.value,
|
||||
point: item.valueThreshold,
|
||||
unit: item.unit
|
||||
}
|
||||
}
|
||||
const handleOpenChart = () => {
|
||||
console.log('有害气体弹窗')
|
||||
isVisited.value = true
|
||||
initChart()
|
||||
}
|
||||
/**
|
||||
* 初始化echarts实例方法
|
||||
*/
|
||||
const initChart = () => {
|
||||
//3.初始化container容器
|
||||
myEcharts = echarts.init(chart.value);
|
||||
//5.传入数据
|
||||
myEcharts.setOption(option, true);
|
||||
myEcharts.setOption(option);
|
||||
//图表大小自适应窗口大小变化
|
||||
window.onresize = () => {
|
||||
myEcharts.resize();
|
||||
|
||||
Reference in New Issue
Block a user