|
|
@@ -0,0 +1,327 @@
|
|
|
+<template>
|
|
|
+ <div class="main-contents">
|
|
|
+ <!-- <div class="point-des-box">
|
|
|
+ <div>工况点</div>
|
|
|
+ <div>负压(Pa): {{ selectDataObj.dataH }}</div>
|
|
|
+ <div>风量(m³/min): {{ (selectDataObj.dataQ * 60).toFixed(2) }}</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="main" ref="main"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { ref, reactive, nextTick, defineProps, watch } from 'vue';
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ // import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+ // const { sysOrgCode } = useGlobSetting();
|
|
|
+
|
|
|
+ const props = defineProps<{ mainfan: Record<string, any> }>();
|
|
|
+ const selectDataObj = ref({
|
|
|
+ dataQ: 0,
|
|
|
+ dataH: 0,
|
|
|
+ });
|
|
|
+ //echart图表数据
|
|
|
+ const echartData = reactive<any>({
|
|
|
+ xdata: [],
|
|
|
+ ydata: [],
|
|
|
+ ydata1: [],
|
|
|
+ });
|
|
|
+ const maxM3 = ref(150); // 高家梁是150，其他400
|
|
|
+ const maxMPa = ref(4000);
|
|
|
+ const main = ref();
|
|
|
+
|
|
|
+ function changeSelect(selectData) {
|
|
|
+ let objParam;
|
|
|
+ if (!selectData) return;
|
|
|
+ const fan2Active = selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1';
|
|
|
+ if (fan2Active) {
|
|
|
+ objParam = {
|
|
|
+ dataQ: selectData.readData.Fan2m3 || 0,
|
|
|
+ dataH: Math.abs(Number(selectData.readData.Fan2FanPre || 0)),
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ objParam = {
|
|
|
+ dataQ: selectData.readData.Fan1m3 || 0,
|
|
|
+ dataH: Math.abs(Number(selectData.readData.Fan1FanPre || 0)),
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ setChart(objParam, {
|
|
|
+ dataha0: -0.056,
|
|
|
+ dataha1: 3.6491,
|
|
|
+ dataha2: 434.4,
|
|
|
+ dataha3: 100,
|
|
|
+ dataha4: -1000,
|
|
|
+ });
|
|
|
+ getOption();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置曲线数据
|
|
|
+ function setChart(param, character) {
|
|
|
+ const dataQ = 300;
|
|
|
+ const dataH = character.dataha0 * dataQ * dataQ + character.dataha1 * dataQ + character.dataha2;
|
|
|
+ const Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
|
|
|
+ const H1 = parseFloat(param.dataH);
|
|
|
+
|
|
|
+ selectDataObj.value.dataH = H1;
|
|
|
+ selectDataObj.value.dataQ = Q1;
|
|
|
+
|
|
|
+ const q = Q1 - dataQ;
|
|
|
+ const h = H1 - dataH;
|
|
|
+ // 风压特性曲线1
|
|
|
+ const data: [number, number][] = [];
|
|
|
+ // 风压特性曲线2
|
|
|
+ const data2: [number, number][] = [];
|
|
|
+ const datax: number[] = [];
|
|
|
+ maxM3.value = Q1 < 100 ? 150 : Q1 < 200 ? 250 : Q1 < 300 ? 400 : Q1 < 400 ? 500 : Q1 < 600 ? 800 : 1000;
|
|
|
+ maxMPa.value = H1 < 2000 ? 4000 : H1 < 2500 ? 5000 : 6000;
|
|
|
+
|
|
|
+ for (let i = 30; i <= maxM3.value; i++) {
|
|
|
+ const x = i;
|
|
|
+ const y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
|
|
|
+ data2.push([x, y4]);
|
|
|
+ }
|
|
|
+ for (let i = 0; i <= maxM3.value; i++) {
|
|
|
+ const x = i;
|
|
|
+ const y = (H1 / Q1 / Q1) * x * x;
|
|
|
+ data.push([x, y]);
|
|
|
+ datax.push(x * 60);
|
|
|
+ }
|
|
|
+ echartData.xdata = datax;
|
|
|
+ echartData.ydata = data;
|
|
|
+ echartData.ydata1 = data2;
|
|
|
+ echartData.ydata2 = [[Q1, H1]];
|
|
|
+ }
|
|
|
+
|
|
|
+ function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ const myChart = echarts.init(main.value);
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#3df6ff',
|
|
|
+ fontSize: 14, // 字体颜色
|
|
|
+ },
|
|
|
+ text: '',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '25%',
|
|
|
+ left: '5%',
|
|
|
+ right: '19%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ // x:'right',
|
|
|
+ top: '5%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, // 字体颜色
|
|
|
+ },
|
|
|
+ data: ['风量', '负压'],
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.8)',
|
|
|
+ textStyle: {
|
|
|
+ color: '#3df6ff',
|
|
|
+ fontSize: 14, // 字体颜色
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
|
|
|
+ // res = res + '   ' + params.data[0] + '(m³/s)<br/>'
|
|
|
+ var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
|
|
|
+ res = res + '   ' + params.data[0].toFixed(2) + '(m³/s)<br/>';
|
|
|
+ res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ trigger: 'item',
|
|
|
+ },
|
|
|
+ color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ name: '风量\r\n(m³/min)\r\n',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#3df6ff',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#0092d5',
|
|
|
+ width: 1, // 这里是为了突出显示加上的
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false, // 网格线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#006c9d',
|
|
|
+ type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ position: 'bottom',
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ formatter: function (value) {
|
|
|
+ return value * 60 + '';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ max: maxM3.value, // 高家梁最大9000,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#3df6ff',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#0092d5',
|
|
|
+ width: 1, // 这里是为了突出显示加上的
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false, // 网格线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#006c9d',
|
|
|
+ type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ // max: 400,
|
|
|
+ data: echartData.xdata,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: '负压(Pa)',
|
|
|
+ splitNumber: 5,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#3df6ff',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#0092d5',
|
|
|
+ width: 1, // 这里是为了突出显示加上的
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true, // 网格线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#006c9d',
|
|
|
+ type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ max: maxMPa.value,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'effectScatter',
|
|
|
+ symbolSize: 5,
|
|
|
+ // symbolOffset:[1, 1],
|
|
|
+ showEffectOn: 'render',
|
|
|
+ // 涟漪特效相关配置。
|
|
|
+ rippleEffect: {
|
|
|
+ // 波纹的绘制方式，可选 'stroke' 和 'fill'。
|
|
|
+ brushType: 'stroke',
|
|
|
+ },
|
|
|
+ zlevel: 1,
|
|
|
+ z: 999,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#ff0000',
|
|
|
+ },
|
|
|
+ data: echartData.ydata2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '风量',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ xAxisIndex: 1,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ animationDuration: 1000,
|
|
|
+ showSymbol: false,
|
|
|
+ data: echartData.ydata,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '负压',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ xAxisIndex: 1,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ animationDuration: 1000,
|
|
|
+ showSymbol: false,
|
|
|
+
|
|
|
+ data: echartData.ydata1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.mainfan,
|
|
|
+ (val) => {
|
|
|
+ changeSelect(val);
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .main-contents {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ // .point-des-box {
|
|
|
+ // position: absolute;
|
|
|
+ // background: #0d0d0dbd;
|
|
|
+ // padding: 5px 8px;
|
|
|
+ // border-radius: 10px;
|
|
|
+ // border: 1px solid #ffffff;
|
|
|
+ // z-index: 999;
|
|
|
+ // color: #fff;
|
|
|
+ // right: 20px;
|
|
|
+ // top: 10px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
