|
|
@@ -43,10 +43,15 @@
|
|
|
<el-row :gutter="15">
|
|
|
<template v-if="array.length > 0">
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" v-if="windLineArr && windLineArr.length > 0"
|
|
|
- >
|
|
|
+ >
|
|
|
<div class="chart_item zhuti">
|
|
|
<div style="font-weight: bold;" class="item_title">
|
|
|
<span>2分钟平均风向 ( ° )/2分钟平均风速 ( m/s )</span>
|
|
|
+
|
|
|
+ <el-icon style="vertical-align: middle;cursor: pointer;" @click="showBig(1, 0, 0)">
|
|
|
+ <Search />
|
|
|
+ </el-icon>
|
|
|
+
|
|
|
</div>
|
|
|
<div class="mt5">
|
|
|
<div ref="wind" class="ve-ring" style="height: 330px"></div>
|
|
|
@@ -54,8 +59,7 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<template v-for="(item, index) in array" :key="index">
|
|
|
- <el-col :xs="24" :sm="12" :md="8" :lg="8" v-if="item && item.data_id !== 1 && item.data_id !== 2"
|
|
|
- >
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" v-if="item && item.data_id !== 1 && item.data_id !== 2">
|
|
|
<div class="chart_item zhuti">
|
|
|
<div style="font-weight: bold;" class="item_title">
|
|
|
<span>{{ item.data_name }} ( {{ item.data_unit ? item.data_unit : '' }} )</span>
|
|
|
@@ -225,12 +229,12 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
- <el-dialog v-model="dialogVisible" :title="dialogtitle" width="800">
|
|
|
+ <el-dialog v-model="dialogVisible" :title="dialogtitle" width="90%">
|
|
|
<div class="mt5" v-if="showtype == 1">
|
|
|
- <div ref="wind" class="ve-ring" style="height: 430px"></div>
|
|
|
+ <div ref="wind2" class="ve-ring" style="height: 60vh"></div>
|
|
|
</div>
|
|
|
<div class="mt5" v-else>
|
|
|
- <div :id="'Access' + clickIndex" class="ve-ring" style="height: 330px"></div>
|
|
|
+ <div :id="'Access' + clickIndex" class="ve-ring" style="height: 80vh"></div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -268,11 +272,11 @@ const showBig = (type, item, index) => {
|
|
|
dialogtitle.value = '2分钟平均风向 ( ° )/2分钟平均风速 ( m/s )'
|
|
|
dialogVisible.value = true
|
|
|
nextTick(() => {
|
|
|
- showWind()
|
|
|
+ showWind2()
|
|
|
})
|
|
|
} else {
|
|
|
clickIndex.value = index
|
|
|
- dialogtitle.value = item.data_name
|
|
|
+ dialogtitle.value = item.data_name
|
|
|
dialogVisible.value = true
|
|
|
|
|
|
nextTick(() => {
|
|
|
@@ -518,6 +522,7 @@ const cancel = () => {
|
|
|
|
|
|
const formRef = ref()
|
|
|
const wind = ref()
|
|
|
+const wind2 = ref()
|
|
|
const pressureLine = ref()
|
|
|
const radio = ref()
|
|
|
const radio2 = ref()
|
|
|
@@ -848,9 +853,9 @@ function adjustValue(value) {
|
|
|
if (value === 'C') {
|
|
|
return 0
|
|
|
} else if (value <= 180) {
|
|
|
- return '-' + value;
|
|
|
+ return -value-180;
|
|
|
} else {
|
|
|
- return 360 - value;
|
|
|
+ return 180 - value;
|
|
|
}
|
|
|
}
|
|
|
const globalStore = useGlobalStore();
|
|
|
@@ -980,6 +985,137 @@ const showWind = () => {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+const showWind2 = () => {
|
|
|
+
|
|
|
+let mychart = echarts.init(wind2.value);
|
|
|
+let option = {
|
|
|
+ title: {
|
|
|
+ text: '暂无数据',
|
|
|
+ show: !timeArr.value ? true : false,
|
|
|
+ x: 'center',
|
|
|
+ y: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ grid: {
|
|
|
+ left: '10',
|
|
|
+ right: '10',
|
|
|
+ bottom: '90',
|
|
|
+ top: 20,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 50
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+
|
|
|
+ left: '100',
|
|
|
+ right: '100'
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // X轴
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ boundaryGap: true,
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
|
|
|
+ },
|
|
|
+ data: timeArr.value,
|
|
|
+ axisLabel: {
|
|
|
+ // interval: 4,
|
|
|
+ formatter: function (value) {
|
|
|
+ // if (value.index % 4 === 0) {
|
|
|
+ // return value.replace(/ /g, '\n');
|
|
|
+ // } else {
|
|
|
+ // return '';
|
|
|
+ // }
|
|
|
+ return value.replace(/ /g, '\n');
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // Y轴
|
|
|
+ // yAxis: {
|
|
|
+ // type: 'value',
|
|
|
+ // // name: "风速(m/s)",
|
|
|
+ // },
|
|
|
+ yAxis: {
|
|
|
+ boundaryGap: [0, '20%'],
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ // 鼠标悬浮提示
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ formatter(params) {
|
|
|
+ let tip =
|
|
|
+ "时间:" +
|
|
|
+ params[0].axisValue +
|
|
|
+ "<br/>风速:" +
|
|
|
+ (params[0].value ? params[0].value : "--") +
|
|
|
+ "m/s<br/>风向:" +
|
|
|
+ (params[0].data ? params[0].data.symbolRotateStr + '°' : "--")
|
|
|
+ return tip;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 数据
|
|
|
+ series: [{
|
|
|
+ data: windLineArr.value,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true, //这句就是让曲线变平滑的
|
|
|
+ symbol: function (params) {
|
|
|
+ if (Number(params) < 0.3) {
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ return 'path://M4.866,0,0,15.193l4.866-4.449L9.738,15.2Z'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ symbolSize: function (params) {
|
|
|
+ if (Number(params) < 0.3) {
|
|
|
+ return 5
|
|
|
+ } else {
|
|
|
+ return 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //折线样式
|
|
|
+ lineStyle: {
|
|
|
+ color: '#a5cfff',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // formatter: '{c}',
|
|
|
+ // show: false,
|
|
|
+ // position: 'top',
|
|
|
+ // distance: 15
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }]
|
|
|
+};
|
|
|
+
|
|
|
+mychart.setOption(option)
|
|
|
+window.addEventListener("resize", function () {
|
|
|
+ mychart.resize();
|
|
|
+});
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
|
|
|
|
|
|
|
