|
|
@@ -8,309 +8,314 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
|
|
|
-import * as echarts from 'echarts';
|
|
|
-const emit = defineEmits(['goDetail']);
|
|
|
+ import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ const emit = defineEmits(['goDetail']);
|
|
|
|
|
|
-let props = defineProps({
|
|
|
- flList: Array,
|
|
|
-});
|
|
|
+ let props = defineProps({
|
|
|
+ flList: Array,
|
|
|
+ });
|
|
|
|
|
|
-//获取dom节点
|
|
|
-let windBar = ref<any>();
|
|
|
-//坐标轴最大值
|
|
|
-let maxY = ref<any>(0);
|
|
|
-//echart数据
|
|
|
-let echartData = reactive<any>({ ydata: [], xdata: [] });
|
|
|
-//跳转详情
|
|
|
-function getDetail() {
|
|
|
- emit('goDetail', 'windrect');
|
|
|
-}
|
|
|
-function getOption() {
|
|
|
- nextTick(() => {
|
|
|
- const myChart = echarts.init(windBar.value);
|
|
|
- let option = {
|
|
|
- color: [
|
|
|
- '#63caff',
|
|
|
- '#49beff',
|
|
|
- 'rgba(74, 205, 255,.1)',
|
|
|
- '#03387a',
|
|
|
- '#03387a',
|
|
|
- '#6c93ee',
|
|
|
- '#a9abff',
|
|
|
- '#f7a23f',
|
|
|
- '#27bae7',
|
|
|
- '#ff6d9d',
|
|
|
- '#cb79ff',
|
|
|
- '#f95b5a',
|
|
|
- '#ccaf27',
|
|
|
- '#38b99c',
|
|
|
- '#93d0ff',
|
|
|
- '#bd74e0',
|
|
|
- '#fd77da',
|
|
|
- '#dea700',
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- containLabel: true,
|
|
|
- left: 30,
|
|
|
- right: 30,
|
|
|
- bottom: echartData.xdata.length > 8 ? 30 : 15,
|
|
|
- top: 40,
|
|
|
- },
|
|
|
+ //获取dom节点
|
|
|
+ let windBar = ref<any>();
|
|
|
+ //坐标轴最大值
|
|
|
+ let maxY = ref<any>(0);
|
|
|
+ //echart数据
|
|
|
+ let echartData = reactive<any>({ ydata: [], xdata: [] });
|
|
|
+ //跳转详情
|
|
|
+ function getDetail() {
|
|
|
+ emit('goDetail', 'windrect');
|
|
|
+ }
|
|
|
+ function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ const myChart = echarts.init(windBar.value);
|
|
|
+ let option = {
|
|
|
+ color: [
|
|
|
+ '#63caff',
|
|
|
+ '#49beff',
|
|
|
+ 'rgba(74, 205, 255,.1)',
|
|
|
+ '#03387a',
|
|
|
+ '#03387a',
|
|
|
+ '#6c93ee',
|
|
|
+ '#a9abff',
|
|
|
+ '#f7a23f',
|
|
|
+ '#27bae7',
|
|
|
+ '#ff6d9d',
|
|
|
+ '#cb79ff',
|
|
|
+ '#f95b5a',
|
|
|
+ '#ccaf27',
|
|
|
+ '#38b99c',
|
|
|
+ '#93d0ff',
|
|
|
+ '#bd74e0',
|
|
|
+ '#fd77da',
|
|
|
+ '#dea700',
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ left: 30,
|
|
|
+ right: 30,
|
|
|
+ bottom: echartData.xdata.length > 8 ? 30 : 15,
|
|
|
+ top: 40,
|
|
|
+ },
|
|
|
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: echartData.xdata,
|
|
|
- axisLabel: {
|
|
|
- formatter: function (params) {
|
|
|
- var newParamsName = ''; // 最终拼接成的字符串
|
|
|
- var paramsNameNumber = params.length; // 实际标签的个数
|
|
|
- var provideNumber = 6; // 每行能显示的字的个数
|
|
|
- var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
|
|
|
- /**
|
|
|
- * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
|
|
- */
|
|
|
- // 条件等同于rowNumber>1
|
|
|
- if (paramsNameNumber > provideNumber) {
|
|
|
- /** 循环每一行,p表示行 */
|
|
|
- for (var p = 0; p < rowNumber; p++) {
|
|
|
- var tempStr = ''; // 表示每一次截取的字符串
|
|
|
- var start = p * provideNumber; // 开始截取的位置
|
|
|
- var end = start + provideNumber; // 结束截取的位置
|
|
|
- // 此处特殊处理最后一行的索引值
|
|
|
- if (p == rowNumber - 1) {
|
|
|
- // 最后一次不换行
|
|
|
- tempStr = params.substring(start, paramsNameNumber);
|
|
|
- } else {
|
|
|
- // 每一次拼接字符串并换行
|
|
|
- tempStr = params.substring(start, end) + '\n';
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: echartData.xdata,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (params) {
|
|
|
+ var newParamsName = ''; // 最终拼接成的字符串
|
|
|
+ var paramsNameNumber = params.length; // 实际标签的个数
|
|
|
+ var provideNumber = 6; // 每行能显示的字的个数
|
|
|
+ var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
|
|
|
+ /**
|
|
|
+ * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
|
|
+ */
|
|
|
+ // 条件等同于rowNumber>1
|
|
|
+ if (paramsNameNumber > provideNumber) {
|
|
|
+ /** 循环每一行,p表示行 */
|
|
|
+ for (var p = 0; p < rowNumber; p++) {
|
|
|
+ var tempStr = ''; // 表示每一次截取的字符串
|
|
|
+ var start = p * provideNumber; // 开始截取的位置
|
|
|
+ var end = start + provideNumber; // 结束截取的位置
|
|
|
+ // 此处特殊处理最后一行的索引值
|
|
|
+ if (p == rowNumber - 1) {
|
|
|
+ // 最后一次不换行
|
|
|
+ tempStr = params.substring(start, paramsNameNumber);
|
|
|
+ } else {
|
|
|
+ // 每一次拼接字符串并换行
|
|
|
+ tempStr = params.substring(start, end) + '\n';
|
|
|
+ }
|
|
|
+ newParamsName += tempStr; // 最终拼成的字符串
|
|
|
}
|
|
|
- newParamsName += tempStr; // 最终拼成的字符串
|
|
|
+ } else {
|
|
|
+ // 将旧标签的值赋给新标签
|
|
|
+ newParamsName = params;
|
|
|
}
|
|
|
- } else {
|
|
|
- // 将旧标签的值赋给新标签
|
|
|
- newParamsName = params;
|
|
|
- }
|
|
|
- //将最终的字符串返回
|
|
|
- return newParamsName;
|
|
|
+ //将最终的字符串返回
|
|
|
+ return newParamsName;
|
|
|
+ },
|
|
|
+ fontSize: 14,
|
|
|
+ margin: 15,
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(62, 103, 164)',
|
|
|
+ },
|
|
|
},
|
|
|
- fontSize: 14,
|
|
|
- margin: 15,
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(62, 103, 164)',
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '(m³/min)',
|
|
|
- // max: maxY.value,
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- fontSize: 14,
|
|
|
- color: '#b3b8cc',
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '(m³/min)',
|
|
|
+ // max: maxY.value,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#b3b8cc',
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- nameTextStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 12,
|
|
|
- lineHeight: 10,
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(62, 103, 164,.4)',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 10,
|
|
|
},
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: echartData.ydata,
|
|
|
- type: 'bar',
|
|
|
- barMaxWidth: 'auto',
|
|
|
- barWidth: 25,
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- type: 'linear',
|
|
|
- global: false,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: '#0b9eff',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#63caff',
|
|
|
- },
|
|
|
- ],
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(62, 103, 164,.4)',
|
|
|
},
|
|
|
},
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- distance: 10,
|
|
|
- color: '#fff',
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
},
|
|
|
- {
|
|
|
- data: [1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
- type: 'pictorialBar',
|
|
|
- barMaxWidth: '25',
|
|
|
- symbol: 'diamond',
|
|
|
- symbolOffset: [0, '50%'],
|
|
|
- symbolSize: [25, 15],
|
|
|
- },
|
|
|
- {
|
|
|
- data: echartData.ydata,
|
|
|
- type: 'pictorialBar',
|
|
|
- barMaxWidth: '25',
|
|
|
- symbolPosition: 'end',
|
|
|
- symbol: 'diamond',
|
|
|
- symbolOffset: [0, '-50%'],
|
|
|
- symbolSize: [25, 12],
|
|
|
- zlevel: 2,
|
|
|
- },
|
|
|
- {
|
|
|
- data: [741, 741, 741, 741, 741, 741, 741, 741],
|
|
|
- type: 'bar',
|
|
|
- barMaxWidth: 'auto',
|
|
|
- barWidth: 25,
|
|
|
- barGap: '-100%',
|
|
|
- zlevel: -1,
|
|
|
- },
|
|
|
- {
|
|
|
- data: [1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
- type: 'pictorialBar',
|
|
|
- barMaxWidth: '25',
|
|
|
- symbol: 'diamond',
|
|
|
- symbolOffset: [0, '50%'],
|
|
|
- symbolSize: [25, 15],
|
|
|
- zlevel: -2,
|
|
|
- },
|
|
|
- {
|
|
|
- data: [741, 741, 741, 741, 741, 741, 741, 741],
|
|
|
- type: 'pictorialBar',
|
|
|
- barMaxWidth: '25',
|
|
|
- symbolPosition: 'end',
|
|
|
- symbol: 'diamond',
|
|
|
- symbolOffset: [0, '-50%'],
|
|
|
- symbolSize: [25, 12],
|
|
|
- zlevel: -1,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: echartData.ydata,
|
|
|
+ type: 'bar',
|
|
|
+ barMaxWidth: 'auto',
|
|
|
+ barWidth: 25,
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ type: 'linear',
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#0b9eff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#63caff',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ distance: 10,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: [1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
+ type: 'pictorialBar',
|
|
|
+ barMaxWidth: '25',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '50%'],
|
|
|
+ symbolSize: [25, 15],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: echartData.ydata,
|
|
|
+ type: 'pictorialBar',
|
|
|
+ barMaxWidth: '25',
|
|
|
+ symbolPosition: 'end',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '-50%'],
|
|
|
+ symbolSize: [25, 12],
|
|
|
+ zlevel: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: [741, 741, 741, 741, 741, 741, 741, 741],
|
|
|
+ type: 'bar',
|
|
|
+ barMaxWidth: 'auto',
|
|
|
+ barWidth: 25,
|
|
|
+ barGap: '-100%',
|
|
|
+ zlevel: -1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: [1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
+ type: 'pictorialBar',
|
|
|
+ barMaxWidth: '25',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '50%'],
|
|
|
+ symbolSize: [25, 15],
|
|
|
+ zlevel: -2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: [741, 741, 741, 741, 741, 741, 741, 741],
|
|
|
+ type: 'pictorialBar',
|
|
|
+ barMaxWidth: '25',
|
|
|
+ symbolPosition: 'end',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '-50%'],
|
|
|
+ symbolSize: [25, 12],
|
|
|
+ zlevel: -1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ // 这部分是关键
|
|
|
+ show: echartData.xdata.length > 8 ? true : false,
|
|
|
+ type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
|
|
|
+ start: 0, // 数据窗口范围的起始百分比
|
|
|
+ end: echartData.xdata.length > 8 && echartData.xdata.length < 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
|
|
|
+ height: 10, // 设置缩放条高度
|
|
|
+ left: 'center',
|
|
|
+ bottom: 25,
|
|
|
+ labelPrecision: 0, // 标签精度，默认为auto
|
|
|
+ showDetail: false, // 是否显示详情
|
|
|
+ showDataShadow: false, // 是否显示数据阴影
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ show: false,
|
|
|
},
|
|
|
- ],
|
|
|
- dataZoom: [{
|
|
|
- // 这部分是关键
|
|
|
- show: echartData.xdata.length > 8 ? true : false,
|
|
|
- type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
|
|
|
- start: 0, // 数据窗口范围的起始百分比
|
|
|
- end: echartData.xdata.length > 8 && echartData.xdata.length < 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
|
|
|
- height: 10, // 设置缩放条高度
|
|
|
- left: 'center',
|
|
|
- bottom: 25,
|
|
|
- labelPrecision: 0, // 标签精度，默认为auto
|
|
|
- showDetail: false, // 是否显示详情
|
|
|
- showDataShadow: false, // 是否显示数据阴影
|
|
|
- }],
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- window.onresize = function () {
|
|
|
- myChart.resize();
|
|
|
- };
|
|
|
- });
|
|
|
-}
|
|
|
-watch(
|
|
|
- () => props.flList,
|
|
|
- (val) => {
|
|
|
- echartData.xdata.length = 0;
|
|
|
- echartData.ydata.length = 0;
|
|
|
- val.forEach((el: any) => {
|
|
|
- if (el.readData.m3) {
|
|
|
- echartData.xdata.push(el.strinstallpos);
|
|
|
- echartData.ydata.push(el.readData.m3);
|
|
|
- }
|
|
|
- });
|
|
|
- maxY.value = echartData.ydata.reduce((acr, cur) => {
|
|
|
- return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
});
|
|
|
- maxY.value = maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'))
|
|
|
- if (maxY.value.length < 2) {
|
|
|
- maxY.value = 10
|
|
|
- } else if (maxY.value.length < 3) {
|
|
|
- maxY.value = (Number(maxY.value[0])+1) * 10
|
|
|
- } else if (maxY.value.length < 4) {
|
|
|
- maxY.value = (Number(maxY.value[0])+1) * 100
|
|
|
- } else if (maxY.value.length < 5) {
|
|
|
- maxY.value = (Number(maxY.value[0])+1) * 1000
|
|
|
- } else if (maxY.value.length < 6) {
|
|
|
- maxY.value = (Number(maxY.value[0])+1) * 10000
|
|
|
- }
|
|
|
- getOption();
|
|
|
- },
|
|
|
- {
|
|
|
- deep: true,
|
|
|
}
|
|
|
-);
|
|
|
+ watch(
|
|
|
+ () => props.flList,
|
|
|
+ (val) => {
|
|
|
+ echartData.xdata.length = 0;
|
|
|
+ echartData.ydata.length = 0;
|
|
|
+ val.forEach((el: any) => {
|
|
|
+ if (el.readData.m3) {
|
|
|
+ echartData.xdata.push(el.strinstallpos);
|
|
|
+ echartData.ydata.push(el.readData.m3);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ maxY.value = echartData.ydata.reduce((acr, cur) => {
|
|
|
+ return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
|
|
|
+ });
|
|
|
+ maxY.value =
|
|
|
+ maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
|
|
|
+ if (maxY.value.length < 1) {
|
|
|
+ maxY.value = 1;
|
|
|
+ } else if (maxY.value.length < 2) {
|
|
|
+ maxY.value = 10;
|
|
|
+ } else if (maxY.value.length < 3) {
|
|
|
+ maxY.value = (Number(maxY.value[0]) + 1) * 10;
|
|
|
+ } else if (maxY.value.length < 4) {
|
|
|
+ maxY.value = (Number(maxY.value[0]) + 1) * 100;
|
|
|
+ } else if (maxY.value.length < 5) {
|
|
|
+ maxY.value = (Number(maxY.value[0]) + 1) * 1000;
|
|
|
+ } else if (maxY.value.length < 6) {
|
|
|
+ maxY.value = (Number(maxY.value[0]) + 1) * 10000;
|
|
|
+ }
|
|
|
+ getOption();
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
-onMounted(() => { });
|
|
|
+ onMounted(() => {});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.windMonitor {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
+ .windMonitor {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .title-top {
|
|
|
- position: absolute;
|
|
|
- top: 9px;
|
|
|
- left: 46px;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- cursor: pointer;
|
|
|
+ .title-top {
|
|
|
+ position: absolute;
|
|
|
+ top: 9px;
|
|
|
+ left: 46px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- &:hover {
|
|
|
- color: #66ffff;
|
|
|
+ &:hover {
|
|
|
+ color: #66ffff;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .wind-contents {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 36px;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 36px);
|
|
|
|
|
|
- .wind-bar {
|
|
|
+ .wind-contents {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 36px;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: calc(100% - 36px);
|
|
|
+
|
|
|
+ .wind-bar {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
hongrunxia