|
@@ -3,34 +3,90 @@
|
|
<div class="select">
|
|
<div class="select">
|
|
<div class="lable">公司:</div>
|
|
<div class="lable">公司:</div>
|
|
<div class="search-input">
|
|
<div class="search-input">
|
|
- <el-select v-model="selectValue" @change="handleChange(selectValue)" placeholder="请选择" popper-class="select">
|
|
|
|
- <el-option v-for="item in gsGroups" :key="item.id" :value="item.id" :label="item.name">
|
|
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="selectVal"
|
|
|
|
+ @change="handleChange(selectValue)"
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ popper-class="select"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in gsGroups"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ :value="item.id"
|
|
|
|
+ :label="item.name"
|
|
|
|
+ >
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="model-switch" v-if="showFlag">
|
|
<div class="model-switch" v-if="showFlag">
|
|
- <div class="model-item" :class="{ active: !switchFlag }" @click="handleClick('风场')">风场</div>
|
|
|
|
- <div class="model-item" :class="{ active: switchFlag }" @click="handleClick('光伏')">光伏</div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="model-item"
|
|
|
|
+ :class="{ active: !switchFlag }"
|
|
|
|
+ @click="handleClick('风场')"
|
|
|
|
+ >
|
|
|
|
+ 风场
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ class="model-item"
|
|
|
|
+ :class="{ active: switchFlag }"
|
|
|
|
+ @click="handleClick('光伏')"
|
|
|
|
+ >
|
|
|
|
+ 光伏
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="btn-group-with-icon-list" v-if="!switchFlag && btnGroups[0].icon">
|
|
|
|
- <i v-if="btnGroups[0].icon != '' && btnGroups[0].icon.indexOf('fa fa') >= 0" :class="btnGroups[0].icon"></i>
|
|
|
|
- <span v-if="btnGroups[0].icon != '' && btnGroups[0].icon.indexOf('svg-') >= 0"
|
|
|
|
- class="svg-icon svg-icon-gray svg-icon-md">
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="btn-group-with-icon-list"
|
|
|
|
+ v-if="!switchFlag && btnGroups[0].icon"
|
|
|
|
+ >
|
|
|
|
+ <i
|
|
|
|
+ v-if="
|
|
|
|
+ btnGroups[0].icon != '' && btnGroups[0].icon.indexOf('fa fa') >= 0
|
|
|
|
+ "
|
|
|
|
+ :class="btnGroups[0].icon"
|
|
|
|
+ ></i>
|
|
|
|
+ <span
|
|
|
|
+ v-if="
|
|
|
|
+ btnGroups[0].icon != '' && btnGroups[0].icon.indexOf('svg-') >= 0
|
|
|
|
+ "
|
|
|
|
+ class="svg-icon svg-icon-gray svg-icon-md"
|
|
|
|
+ >
|
|
<SvgIcon :svgid="btnGroups[0].icon"></SvgIcon>
|
|
<SvgIcon :svgid="btnGroups[0].icon"></SvgIcon>
|
|
</span>
|
|
</span>
|
|
- <a href="javascript:;" v-for="(btn, index) of btnGroups[0].btns" :key="btn" @click="click(0, index)"
|
|
|
|
- :class="{ active: activeIndex == index && activeRow == 0 }">
|
|
|
|
|
|
+ <a
|
|
|
|
+ href="javascript:;"
|
|
|
|
+ v-for="(btn, index) of btnGroups[0].btns"
|
|
|
|
+ :key="btn"
|
|
|
|
+ @click="click(0, index)"
|
|
|
|
+ :class="{ active: activeIndex == index && activeRow == 0 }"
|
|
|
|
+ >
|
|
{{ btn.text }}
|
|
{{ btn.text }}
|
|
</a>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
- <div class="btn-group-with-icon-list" v-if="switchFlag && btnGroups[1].icon">
|
|
|
|
- <i v-if="btnGroups[1].icon != '' && btnGroups[1].icon.indexOf('fa fa') >= 0" :class="btnGroups[1].icon"></i>
|
|
|
|
- <span v-if="btnGroups[1].icon != '' && btnGroups[1].icon.indexOf('svg-') >= 0"
|
|
|
|
- class="svg-icon svg-icon-gray svg-icon-md">
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="btn-group-with-icon-list"
|
|
|
|
+ v-if="switchFlag && btnGroups[1].icon"
|
|
|
|
+ >
|
|
|
|
+ <i
|
|
|
|
+ v-if="
|
|
|
|
+ btnGroups[1].icon != '' && btnGroups[1].icon.indexOf('fa fa') >= 0
|
|
|
|
+ "
|
|
|
|
+ :class="btnGroups[1].icon"
|
|
|
|
+ ></i>
|
|
|
|
+ <span
|
|
|
|
+ v-if="
|
|
|
|
+ btnGroups[1].icon != '' && btnGroups[1].icon.indexOf('svg-') >= 0
|
|
|
|
+ "
|
|
|
|
+ class="svg-icon svg-icon-gray svg-icon-md"
|
|
|
|
+ >
|
|
<SvgIcon :svgid="btnGroups[1].icon"></SvgIcon>
|
|
<SvgIcon :svgid="btnGroups[1].icon"></SvgIcon>
|
|
</span>
|
|
</span>
|
|
- <a href="javascript:;" v-for="(btn, index) of btnGroups[1].btns" :key="btn" @click="click(1, index)"
|
|
|
|
- :class="{ active: activeIndex == index && activeRow == 1 }">
|
|
|
|
|
|
+ <a
|
|
|
|
+ href="javascript:;"
|
|
|
|
+ v-for="(btn, index) of btnGroups[1].btns"
|
|
|
|
+ :key="btn"
|
|
|
|
+ @click="click(1, index)"
|
|
|
|
+ :class="{ active: activeIndex == index && activeRow == 1 }"
|
|
|
|
+ >
|
|
{{ btn.text }}
|
|
{{ btn.text }}
|
|
</a>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@@ -54,7 +110,7 @@ export default {
|
|
gsGroups: Array,
|
|
gsGroups: Array,
|
|
wpId: {
|
|
wpId: {
|
|
type: String,
|
|
type: String,
|
|
- default: '',
|
|
|
|
|
|
+ default: "",
|
|
},
|
|
},
|
|
// 默认选择第几组
|
|
// 默认选择第几组
|
|
rowIndex: {
|
|
rowIndex: {
|
|
@@ -85,6 +141,7 @@ export default {
|
|
activeRow: 0,
|
|
activeRow: 0,
|
|
activeIndex: 0,
|
|
activeIndex: 0,
|
|
switchFlag: false,
|
|
switchFlag: false,
|
|
|
|
+ selectVal: "",
|
|
};
|
|
};
|
|
},
|
|
},
|
|
// 函数
|
|
// 函数
|
|
@@ -95,11 +152,11 @@ export default {
|
|
this.$emit("select", this.btnGroups[i].btns[index]);
|
|
this.$emit("select", this.btnGroups[i].btns[index]);
|
|
},
|
|
},
|
|
handleChange(val) {
|
|
handleChange(val) {
|
|
- this.$emit('selectChange', val);
|
|
|
|
|
|
+ this.$emit("selectChange", val);
|
|
},
|
|
},
|
|
handleClick(data) {
|
|
handleClick(data) {
|
|
- this.$emit('GfFdChange', data);
|
|
|
|
- this.switchFlag = !this.switchFlag
|
|
|
|
|
|
+ this.$emit("GfFdChange", data);
|
|
|
|
+ this.switchFlag = !this.switchFlag;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
// 生命周期钩子
|
|
// 生命周期钩子
|
|
@@ -114,12 +171,13 @@ export default {
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
// 渲染后
|
|
// 渲染后
|
|
|
|
+ this.selectVal = this.selectValue;
|
|
this.activeRow = this.rowIndex;
|
|
this.activeRow = this.rowIndex;
|
|
this.activeIndex = this.index;
|
|
this.activeIndex = this.index;
|
|
- if (this.wpId.includes('GDC')) {
|
|
|
|
- this.switchFlag = true
|
|
|
|
- } else if(this.wpId.includes('FDC')) {
|
|
|
|
- this.switchFlag = false
|
|
|
|
|
|
+ if (this.wpId.includes("GDC")) {
|
|
|
|
+ this.switchFlag = true;
|
|
|
|
+ } else if (this.wpId.includes("FDC")) {
|
|
|
|
+ this.switchFlag = false;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
beforeUpdate() {
|
|
beforeUpdate() {
|