|
@@ -5,7 +5,13 @@
|
|
|
<i class="icon-search">
|
|
|
<SvgIcon class="icon" size="14" name="toggle" />
|
|
|
</i>
|
|
|
- <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="options1" aria-placeholder="请选择" @change="changeSelect" />
|
|
|
+ <a-select
|
|
|
+ v-model:value="searchValue"
|
|
|
+ style="width: 180px; margin-right: 10px"
|
|
|
+ :options="fanTypeList"
|
|
|
+ aria-placeholder="请选择"
|
|
|
+ @change="changeSelect"
|
|
|
+ />
|
|
|
<div class="status-yx">
|
|
|
<div class="now-name">
|
|
|
<i style="margin: 0px 5px 0px 5px">
|
|
@@ -24,58 +30,50 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, reactive, onMounted, nextTick } from 'vue';
|
|
|
+ import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
|
|
|
import { SvgIcon } from '/@/components/Icon';
|
|
|
import * as echarts from 'echarts';
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ fandata: {
|
|
|
+ type:Array,
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
let searchValue = ref('局扇监测');
|
|
|
- const options1 = reactive<any>([
|
|
|
- {
|
|
|
- value: '局扇监测',
|
|
|
- label: '局扇监测',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '局扇监测1',
|
|
|
- label: '局扇监测1',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '局扇监测2',
|
|
|
- label: '局扇监测2',
|
|
|
- },
|
|
|
- ]);
|
|
|
+ let fanTypeList = reactive<any[]>([]);
|
|
|
|
|
|
//获取dom节点
|
|
|
let fan = ref<any>();
|
|
|
//echart图表数据
|
|
|
- let echartData=reactive<any>({
|
|
|
- xdata:80,
|
|
|
- ydata:60
|
|
|
- })
|
|
|
-//跳转详情
|
|
|
-function getDetail(){
|
|
|
- console.log('跳转详情')
|
|
|
+ let echartData = reactive<any>({
|
|
|
+ xdata: 80,
|
|
|
+ ydata: 60,
|
|
|
+ });
|
|
|
+ //跳转详情
|
|
|
+ function getDetail() {
|
|
|
+ console.log('跳转详情');
|
|
|
}
|
|
|
//选项切换
|
|
|
- function changeSelect(val){
|
|
|
- console.log(val,'val-------')
|
|
|
- switch(val){
|
|
|
- case '局扇监测':
|
|
|
- echartData.xdata=80
|
|
|
- echartData.ydata=60
|
|
|
- getOption()
|
|
|
- break;
|
|
|
- case '局扇监测1':
|
|
|
- echartData.xdata=50
|
|
|
- echartData.ydata=70
|
|
|
- getOption()
|
|
|
- break;
|
|
|
- case '局扇监测2':
|
|
|
- echartData.xdata=40
|
|
|
- echartData.ydata=90
|
|
|
- getOption()
|
|
|
- break;
|
|
|
-
|
|
|
+ function changeSelect(val) {
|
|
|
+ console.log(val, 'val-------');
|
|
|
+ switch (val) {
|
|
|
+ case '局扇监测':
|
|
|
+ echartData.xdata = 80;
|
|
|
+ echartData.ydata = 60;
|
|
|
+ getOption();
|
|
|
+ break;
|
|
|
+ case '局扇监测1':
|
|
|
+ echartData.xdata = 50;
|
|
|
+ echartData.ydata = 70;
|
|
|
+ getOption();
|
|
|
+ break;
|
|
|
+ case '局扇监测2':
|
|
|
+ echartData.xdata = 40;
|
|
|
+ echartData.ydata = 90;
|
|
|
+ getOption();
|
|
|
+ break;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
function getOption() {
|
|
|
nextTick(() => {
|
|
@@ -140,7 +138,7 @@ function getDetail(){
|
|
|
color: 'rgba(62, 103, 164)',
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
@@ -158,7 +156,6 @@ function getDetail(){
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
-
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
@@ -167,7 +164,7 @@ function getDetail(){
|
|
|
type: 'pictorialBar',
|
|
|
symbolSize: [60, 16],
|
|
|
symbolOffset: [0, -10],
|
|
|
- symbolPosition: 'end',
|
|
|
+ symbolPosition: 'end',
|
|
|
z: 12,
|
|
|
//"barWidth": "20",
|
|
|
label: {
|
|
@@ -175,7 +172,7 @@ function getDetail(){
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
formatter: '{c}',
|
|
|
- color:'#fff'
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
},
|
|
|
data: [
|
|
@@ -281,6 +278,20 @@ function getDetail(){
|
|
|
};
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ watch(()=>props.fandata,(val,val1)=>{
|
|
|
+ console.log(val,'局部风机数据')
|
|
|
+ fanTypeList=val[0].map(el=>{
|
|
|
+ return {
|
|
|
+ label:el.strinstallpos,
|
|
|
+ value:el.strinstallpos
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },{
|
|
|
+ deep:true
|
|
|
+ })
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
getOption();
|
|
|
});
|
|
@@ -295,7 +306,7 @@ function getDetail(){
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
-
|
|
|
+
|
|
|
.title-top {
|
|
|
position: absolute;
|
|
|
top: 9px;
|
|
@@ -304,7 +315,7 @@ function getDetail(){
|
|
|
font-size: 16px;
|
|
|
font-family: 'douyuFont';
|
|
|
cursor: pointer;
|
|
|
- &:hover{
|
|
|
+ &:hover {
|
|
|
color: #66ffff;
|
|
|
}
|
|
|
}
|