|
|
|
|
@@ -2,7 +2,7 @@
|
|
|
|
|
<div id="wind-pressure">
|
|
|
|
|
<div class="name">风压</div>
|
|
|
|
|
<div class="list">
|
|
|
|
|
<wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1" @click="handleOpenChart(index+1)"/>
|
|
|
|
|
<wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1" @click="handleOpenChart(item,index+1)"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="digital-tunnel">
|
|
|
|
|
<el-dialog v-model="isVisited" :title="windSort+'号风压监控数据'" width="2175px" :modal="false">
|
|
|
|
|
@@ -30,6 +30,7 @@
|
|
|
|
|
import WindPressureItem from "./childComps/WindPressureItem.vue";
|
|
|
|
|
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import {getEchartsInfo} from "../../../api/largeScreen";
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
list: Array,
|
|
|
|
|
winData: Array
|
|
|
|
|
@@ -40,6 +41,7 @@ const selectTimeButton = ref(2);
|
|
|
|
|
const isVisited = ref(false);
|
|
|
|
|
let myEcharts = reactive({});
|
|
|
|
|
const wpList = ref([]);
|
|
|
|
|
const chartData=ref()
|
|
|
|
|
watch(() => props.list, (now) => {
|
|
|
|
|
wpList.value.forEach(item=>{
|
|
|
|
|
now.forEach(newItem=>{
|
|
|
|
|
@@ -53,14 +55,23 @@ watch(() => props.list, (now) => {
|
|
|
|
|
watch(() => props.winData, (now) => {
|
|
|
|
|
getScreenInfo(now.windPressureSensorList)
|
|
|
|
|
}, {deep: true});
|
|
|
|
|
const handleOpenChart = (index) => {
|
|
|
|
|
console.log('用电量弹窗')
|
|
|
|
|
isVisited.value = true
|
|
|
|
|
windSort.value=index
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
initChart()
|
|
|
|
|
|
|
|
|
|
const getWindInfo=(equipmentId)=>{
|
|
|
|
|
getEchartsInfo(equipmentId).then(res=>{
|
|
|
|
|
console.log('res-wind',res)
|
|
|
|
|
if(res?.code===1000){
|
|
|
|
|
isVisited.value = true
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
initChart(res.data.dates,res.data.values)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleOpenChart = (item,index) => {
|
|
|
|
|
getWindInfo(item.equipmentId)
|
|
|
|
|
windSort.value=index
|
|
|
|
|
}
|
|
|
|
|
const timeSelect = (index) => {
|
|
|
|
|
console.log('选择时间', index)
|
|
|
|
|
if(index===0){
|
|
|
|
|
@@ -89,7 +100,7 @@ const getScreenInfo = (now) => {
|
|
|
|
|
/**
|
|
|
|
|
* 初始化echarts实例方法
|
|
|
|
|
*/
|
|
|
|
|
const initChart = () => {
|
|
|
|
|
const initChart = (type,values) => {
|
|
|
|
|
//3.初始化container容器
|
|
|
|
|
myEcharts = echarts.init(document.getElementById('container'));
|
|
|
|
|
//5.传入数据
|
|
|
|
|
@@ -123,7 +134,8 @@ const initChart = () => {
|
|
|
|
|
//X轴
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
|
|
|
|
|
// data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
|
|
|
|
|
data: type,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 45,
|
|
|
|
|
@@ -144,7 +156,8 @@ const initChart = () => {
|
|
|
|
|
//配置项
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
|
|
|
|
|
// data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
|
|
|
|
|
data: values,
|
|
|
|
|
type: 'line',
|
|
|
|
|
smooth: true,
|
|
|
|
|
symbolSize: 24,
|
|
|
|
|
|