134 lines
3.2 KiB
Vue
134 lines
3.2 KiB
Vue
<template>
|
|
<view class="home-navbar-warp" :class="disabled ? 'nocolor' : 'color'">
|
|
<view class="search">
|
|
<u-input v-model="stationName" :disabled='disabled' :type="disabled? 'text' : 'select'" :select-open="selectStaion" input-align="center" @click="openSelectStation" class="input-box" color="#fff" />
|
|
</view>
|
|
|
|
<u-select v-model="selectStaion" mode="mutil-column-auto" :key="selectKey" :list="stationList" :value-name="'id'" :label-name="'name'" :child-name="'list'" @confirm="confirmStation" @cancel="cancelSelect" :mask-close-able="false" :default-value="StationShow" confirm-color="#009458"></u-select>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
stationName: '',
|
|
selectStaion: false,
|
|
StationShow: [],
|
|
defaultArr: [],
|
|
selectKey:0
|
|
// stationList: []
|
|
// activeSelectLabel:'所有电站',
|
|
}
|
|
},
|
|
computed: {
|
|
stationList () {
|
|
return this.vuex_provinceStation
|
|
},
|
|
currentStation () {
|
|
return this.vuex_currentStation
|
|
}
|
|
},
|
|
props: {
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
watch: {
|
|
currentStation: {
|
|
handler (val) {
|
|
this.stationName = val.name
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
},
|
|
stationList:{
|
|
handler (val) {
|
|
this.selectKey++
|
|
// setTimeout(() =>{
|
|
this.StationShow = [0,0,0]
|
|
// },2000)
|
|
// this.StationShow = this.vuex_StationShow
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
mounted () {
|
|
// this.StationShow = this.vuex_StationShow
|
|
|
|
},
|
|
created () {
|
|
|
|
},
|
|
methods: {
|
|
openSelectStation () {
|
|
if (!this.disabled) {
|
|
this.$emit('openPop', true)
|
|
this.selectStaion = true
|
|
}
|
|
|
|
},
|
|
cancelSelect () {
|
|
this.$emit('openPop', false)
|
|
this.selectStaion = false
|
|
},
|
|
confirmStation (val) {
|
|
val[2].name = val[2].label
|
|
val[2].id = val[2].value
|
|
this.stationName = val[2].label
|
|
|
|
const cityIndex = this.stationList.findIndex((item) => {
|
|
return item.name === val[0].label
|
|
})
|
|
|
|
|
|
const value = this.stationList.find((item) => {
|
|
return item.name === val[0].label
|
|
})
|
|
|
|
const valIndex = value.list.findIndex((item) => {
|
|
return item.name === val[1].label
|
|
})
|
|
|
|
const newValIndex = value.list[valIndex].list.findIndex((item) => {
|
|
return +item.id === +val[2].value
|
|
})
|
|
this.StationShow = [cityIndex, valIndex, newValIndex]
|
|
val[2].topologyType = value.list[valIndex].list[newValIndex].topologyType
|
|
// val[2].StationShow = this.StationShow
|
|
this.$u.vuex("vuex_currentStation", val[2])
|
|
this.$u.vuex("vuex_StationShow", this.StationShow)
|
|
this.$u.vuex("vuex_inverterFlag", value.list[valIndex].list[newValIndex].inverterFlag)
|
|
this.$emit('openPop', false)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.color {
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
.nocolor {
|
|
background-color: transparent;
|
|
}
|
|
.home-navbar-warp {
|
|
display: flex;
|
|
justify-content: left;
|
|
border-radius: 8rpx;
|
|
// background-color: rgba(255, 255, 255, 0.7);
|
|
.search {
|
|
width: 95%;
|
|
}
|
|
|
|
/deep/ .input-box {
|
|
color: #fff !important;
|
|
.uicon-arrow-down-fill {
|
|
color: #fff !important;
|
|
}
|
|
.u-input__input {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
</style> |