Compare commits

...

2 Commits

Author SHA1 Message Date
xiaomeng c4ab78acc0 Merge pull request '1' (#158) from pc-master into portal
Reviewed-on: #158
2024-07-18 06:29:40 +00:00
wb-zhuangyuehuang-vjzzZ 8a383c7167 1 2024-07-18 14:29:02 +08:00
5 changed files with 381 additions and 252 deletions

View File

@ -3143,8 +3143,10 @@
.vrcode-model.manage-model .el-dialog__body .vrcode-content {
padding: 10px 22px 0 !important;
display: flex;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 0px;
grid-column-gap: 20px;
}
.vrcode-model.manage-model .el-dialog__footer {

File diff suppressed because one or more lines are too long

View File

@ -302,7 +302,8 @@
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
margin: 0!important;
margin: 0 !important;
>img {
width: 60px;
height: 60px;
@ -768,7 +769,8 @@
}
}
}
.input-main-one{
.input-main-one {
width: 100%;
flex-wrap: wrap;
display: flex;
@ -787,7 +789,7 @@
}
input {
width:300px;
width: 300px;
height: 44px;
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.40);
@ -804,6 +806,7 @@
}
}
}
.outline {
color: red;
font-weight: bold;
@ -1669,6 +1672,7 @@
align-items: flex-start;
padding: 20px 0 0;
justify-content: flex-start;
.btn {
padding: 0 10px;
@ -1677,7 +1681,8 @@
height: 24px;
}
}
.model-left{
.model-left {
display: flex;
align-items: center;
height: 54px;
@ -2233,11 +2238,13 @@
width: calc(100% - 400px);
height: 100%;
}
#video-js{
#video-js {
position: absolute;
left: 0;
top: 0;
}
.video-control {
width: 400px;
display: flex;
@ -3257,9 +3264,11 @@
}
border-radius: 3px;
&.w-100{
&.w-100 {
width: 100px;
}
&.blue-btn {
background: #00A6FF;
@ -3302,98 +3311,116 @@
}
}
}
.manage-input{
.manage-input {
margin-bottom: 15px;
&.w-400{
input{
&.w-400 {
input {
width: 400px;
}
}
&.w-350{
input{
&.w-350 {
input {
width: 350px;
}
}
&.w-160{
input{
&.w-160 {
input {
width: 160px;
}
}
&.w-180{
input{
width:180px;
&.w-180 {
input {
width: 180px;
}
}
.search-input{
.search-input {
margin: 0 10px;
height: 40px;
}
.input-title{
.input-title {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
margin-bottom: 10px;
}
input{
width: 240px;
height: 44px;
background: rgba(0,186,255,0.15);
border: 2px solid rgba(0,186,255,0.4);
padding-left: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
&::placeholder {
color: #92B1D0;
}
}
}
.vrcode-model {
&.manage-model{
.el-dialog{
background: rgba(0,59,114,0.8);
border: 2px solid rgba(0, 186, 255,0.35);
input {
width: 240px;
height: 44px;
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.4);
padding-left: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
&::placeholder {
color: #92B1D0;
}
.el-dialog__body{
.vrcode-content{
padding: 10px 22px 0!important;
display: flex;
// align-items: center;
justify-content: space-between;
}
}
.vrcode-model {
&.manage-model {
.el-dialog {
background: rgba(0, 59, 114, 0.8);
border: 2px solid rgba(0, 186, 255, 0.35);
}
.el-dialog__body {
.vrcode-content {
padding: 10px 22px 0 !important;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 0px; //
grid-column-gap: 20px; //
}
}
.el-dialog__footer{
.el-dialog__footer {
padding: 15px 22px;
border-top: 1px solid rgba(0, 180, 255, 0.35);
}
.dialog-footer{
.dialog-footer {
justify-content: flex-start;
}
.manage-right{
.manage-img{
.manage-right {
.manage-img {
width: 380px;
position: relative;
// height: 290px;
background: rgba(0,132,255,0.15);
border: 2px solid rgba(0,132,255,0.35);
img{
width:360px;
height:auto;
min-height: 200px;
}
padding: 10px;
#sel-img{
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
}
// height: 290px;
background: rgba(0, 132, 255, 0.15);
border: 2px solid rgba(0, 132, 255, 0.35);
img {
width: 360px;
height: auto;
min-height: 200px;
}
padding: 10px;
#sel-img {
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
}
}
}
.manage-text{
.manage-text {
width: 240px;
height: 160px;
text-align: left;
@ -3403,32 +3430,36 @@ top: 0;
flex-direction: column;
font-family: Microsoft YaHei;
line-height: 28px;
font-weight: 400;
font-size: 14px;
color: #00C0F7;
font-weight: 400;
font-size: 14px;
color: #00C0F7;
}
.manage-img-small{
.manage-img-small {
width: 240px;
height: 160px;
background: rgba(0,132,255,0.15);
border: 2px solid rgba(0,132,255,0.35);
padding: 10px;
margin-top: 25px;
position: relative;
#sel-img{
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
}
img{
width: 100%;
height: 100%;
}
height: 160px;
background: rgba(0, 132, 255, 0.15);
border: 2px solid rgba(0, 132, 255, 0.35);
padding: 10px;
margin-top: 25px;
position: relative;
#sel-img {
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
}
img {
width: 100%;
height: 100%;
}
}
}
.model-return-btn {
position: absolute;
right: 30px;
@ -3912,7 +3943,7 @@ img{
.model-sel {
display: flex;
flex-wrap: wrap!important;
flex-wrap: wrap !important;
align-items: center;
min-height: 200px;
max-height: 700px;
@ -4231,7 +4262,7 @@ img{
border-radius: 3px;
border: 2px solid rgba(0, 186, 255, 0.4);
padding: 0 15px;
margin:7.5px 20px 7.5px 0!important;
margin: 7.5px 20px 7.5px 0 !important;
display: flex;
cursor: pointer;
align-items: center;
@ -4255,8 +4286,9 @@ img{
background: rgba(0, 92, 178, 0.15);
padding: 20px 30px;
border: 2px solid rgba(0, 186, 255, 0.2);
.scroll{
flex-wrap: nowrap!important;
.scroll {
flex-wrap: nowrap !important;
}
}
@ -4307,13 +4339,15 @@ img{
// }
}
.el-table{
.el-table {
.el-table__body-wrapper {
@extend .scroll;
&::-webkit-scrollbar {
/*滚动条整体*/
width: 17px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面的滑块*/
width: 4px;
@ -4328,13 +4362,16 @@ img{
display: none;
}
}
.manage-dropdown{
width: 240px!important;
&.w-400{
width: 400px!important;
.manage-dropdown {
width: 240px !important;
&.w-400 {
width: 400px !important;
}
&.w-350{
width: 350px!important;
&.w-350 {
width: 350px !important;
}
}
@ -4342,23 +4379,26 @@ img{
margin-right: 30px;
margin-bottom: 15px;
.input-title{
.input-title {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
margin-bottom: 10px;
}
&.w-400{
.el-dropdown-link{
&.w-400 {
.el-dropdown-link {
width: 400px;
}
}
&.w-350{
.el-dropdown-link{
&.w-350 {
.el-dropdown-link {
width: 350px;
}
}
.el-dropdown-link {
width: 240px;
height: 44px;
@ -4369,8 +4409,8 @@ img{
width: 100%;
height: 100%;
background: rgba(0,186,255,0.15);
border: 2px solid rgba(0,186,255,0.4);
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.4);
font-size: 16px;
padding-left: 15px;
font-family: Microsoft YaHei;

View File

@ -43,7 +43,7 @@ export default {
routerNow: "skylight",
routerIndex: 1,
purview: [], //
loading:null,
loading: null,
};
},
watch: {
@ -53,7 +53,7 @@ export default {
"$store.state.equipmentIndex"(newName, oldName) {
var store = this.$store.state;
var item = store.equipmentList[store.equipmentIndex - 1]
if(item.deviceName == 10 || item.deviceName == 30){
if (item.deviceName == 10 || item.deviceName == 30) {
this.dataInit();
}
@ -80,13 +80,22 @@ export default {
return 0
}
},
toNewList(list, list2) {
let newList = list.map((item, index) => {
// nickName name
const match = list2[index];
return match ? { ...item, name: match.nickName ? match.nickName : item.name } : item;
});
return newList
},
dataInit() {
const that = this
this.loading = this.$loading({
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var store = this.$store.state;
var data = store.equipmentList[store.equipmentIndex - 1].deviceId;
this.api.getcontrol_cpermission(data).then((res) => {
@ -95,16 +104,23 @@ export default {
this.purview = res.data.data;
this.purview.forEach((el, index) => {
if (el.id == 1) {
var list = [
{ name: "目标温度", list: [], router: "targetTemperature", isRouter: true, index: 1 },
{ name: "目标湿度", list: [], router: "targetHumidity", isRouter: true, index: 2 },
{ name: "目标CO3", list: [], router: "targetCo2", isRouter: true, index: 3 }
]
let newList
if (el.child.length) {
newList = that.toNewList(list, el.child)
} else {
newList = list
}
this.routerList.push(
{
id: el.id, sort: el.sort,
name: el.nickName,
router: "targetTemperature",
list: [
{ name: "目标温度", list: [], router: "targetTemperature", isRouter: true, index: 1 },
{ name: "目标湿度", list: [], router: "targetHumidity", isRouter: true, index: 2 },
{ name: "目标CO2", list: [], router: "targetCo2", isRouter: true, index: 3 }
],
list: newList,
},
);
} else if (el.id == 3) {
@ -118,80 +134,139 @@ export default {
},
);
} else if (el.id == 19) {
var list = [
{ name: '通风窗1', status: -1, router: 'sunroofControl', index: 1 },
{ name: '通风窗2', status: -1, router: 'sunroofControl', index: 2 },
{ name: '通风窗3', status: -1, router: 'sunroofControl', index: 3 },
{ name: '通风窗4', status: -1, router: 'sunroofControl', index: 4 },
{ name: '通风窗5', status: -1, router: 'sunroofControl', index: 5 },
{ name: '通风窗6', status: -1, router: 'sunroofControl', index: 6 },
]
let newList
if (el.child.length) {
newList = that.toNewList(list, el.child)
} else {
newList = list
}
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: [
{ name: '通风窗1', status: -1, router: 'sunroofControl', index: 1 },
{ name: '通风窗2', status: -1, router: 'sunroofControl', index: 2 },
{ name: '通风窗3', status: -1, router: 'sunroofControl', index: 3 },
{ name: '通风窗4', status: -1, router: 'sunroofControl', index: 4 },
{ name: '通风窗5', status: -1, router: 'sunroofControl', index: 5 },
{ name: '通风窗6', status: -1, router: 'sunroofControl', index: 6 },
], router: "sunroofControl",
name: el.nickName, list: newList, router: "sunroofControl",
});
} else if (el.id == 25) {
var list = [
{ name: '外遮阳1', status: -1, router: 'outsizeSunshade', index: 1 },
{ name: '外遮阳2', status: -1, router: 'outsizeSunshade', index: 2 },
]
let newList
if (el.child.length) {
newList = that.toNewList(list, el.child)
} else {
newList = list
}
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: [
{ name: '外遮阳1', status: -1, router: 'outsizeSunshade', index: 1 },
{ name: '外遮阳2', status: -1, router: 'outsizeSunshade', index: 2 },
], router: "outsizeSunshade",
name: el.nickName, list: newList, router: "outsizeSunshade",
});
} else if (el.id == 24) {
var list = [
{ name: '内遮阳1', status: -1, router: 'insizeSunshade', index: 1 },
{ name: '内遮阳2', status: -1, router: 'insizeSunshade', index: 2 },
]
let newList
if (el.child.length) {
newList = that.toNewList(list, el.child)
} else {
newList = list
}
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: [
{ name: '内遮阳1', status: -1, router: 'insizeSunshade', index: 1 },
{ name: '内遮阳2', status: -1, router: 'insizeSunshade', index: 2 },
], router: "insizeSunshade",
name: el.nickName, list: newList, router: "insizeSunshade",
});
} else if (el.id == 27) {
var list = [
{ name: '内保温1', status: -1, router: 'internalInsulation', index: 1 },
{ name: '内保温2', status: -1, router: 'internalInsulation', index: 2 },
]
let newList
if (el.child.length) {
newList = that.toNewList(list, el.child)
} else {
newList = list
}
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: [
{ name: '内保温1', status: -1, router: 'internalInsulation', index: 1 },
{ name: '内保温2', status: -1, router: 'internalInsulation', index: 2 },
], router: "internalInsulation",
name: el.nickName, list: newList, router: "internalInsulation",
});
} else if (el.id == 29) {
var list = [
{ name: '立面保温1', status: -1, router: 'facadeInsulation', index: 1 },
{ name: '立面保温2', status: -1, router: 'facadeInsulation', index: 2 },
{ name: '立面保温3', status: -1, router: 'facadeInsulation', index: 3 },
{ name: '立面保温4', status: -1, router: 'facadeInsulation', index: 4 },
]
let newList
if (el.child.length) {
newList = that.toNewList(list, el.child)
} else {
newList = list
}
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: [
{ name: '立面保温1', status: -1, router: 'facadeInsulation', index: 1 },
{ name: '立面保温2', status: -1, router: 'facadeInsulation', index: 2 },
{ name: '立面保温3', status: -1, router: 'facadeInsulation', index: 3 },
{ name: '立面保温4', status: -1, router: 'facadeInsulation', index: 4 },
], router: "facadeInsulation",
name: el.nickName, list: newList, router: "facadeInsulation",
});
} else if (el.id == 26) {
this.routerList.push({
id: el.id, sort: el.sort, name: el.nickName, list: [
} else if (el.id == 26) {
var list = [
{ name: '风机', status: -1, router: 'wetFan', index: 1 },
{ name: '湿帘泵', status: -1, router: 'wetFan', index: 2 },
{ name: '湿帘外翻窗', status: -1, router: 'wetFan', index: 3 },
], router: "wetFan"
]
let newList
if (el.child.length) {
newList=that.toNewList(list,el.child)
} else {
newList = list
}
this.routerList.push({
id: el.id, sort: el.sort, name: el.nickName, list: newList, router: "wetFan"
});
} else if (el.id == 21) {
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: [
var list = [
{ name: '环流风扇1', status: -1, router: 'circulationCan', index: 1 },
{ name: '环流风扇2', status: -1, router: 'circulationCan', index: 2 },
], router: "circulationCan",
]
let newList
if (el.child.length) {
newList=that.toNewList(list,el.child)
} else {
newList = list
}
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: newList, router: "circulationCan",
});
} else if (el.id == 20) {
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: [], router: "LED",
isRouter: true,
});
} else if (el.id == 23) {
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: [
var list = [
{ name: '高压微雾1', status: -1, router: 'coercionMist', index: 1 },
{ name: '高压微雾2', status: -1, router: 'coercionMist', index: 2 },
], router: "coercionMist"
]
let newList
if (el.child.length) {
newList=that.toNewList(list,el.child)
} else {
newList = list
}
this.routerList.push({
id: el.id, sort: el.sort,
name: el.nickName, list: newList, router: "coercionMist"
});
} else if (el.id == 11 || el.id == 12 || el.id == 13 || el.id == 14 || el.id == 15 || el.id == 16 || el.id == 17 || el.id == 18) {
if (!this.routerList.some(item => item.router === "electromagneticControl")) {
@ -251,6 +326,7 @@ export default {
} else if (el.id == 22) {
this.routerList.push({ name: el.nickName, list: [], router: "parameterSet", isRouter: true });
} else if (el.id == 8) {
this.routerList.push(
{ id: el.id, sort: el.sort, name: "加热水泵", list: [], router: "waterPump", isRouter: true },
{
@ -274,11 +350,11 @@ export default {
this.routerNow != "/snowRemoval"
) {
this.loading = this.$loading({
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
//
var store = this.$store.state;
var data = {
@ -351,7 +427,7 @@ export default {
if (router.token && router.userid) {
return
}
if(this.$route.name==this.routerList[0].router){
if (this.$route.name == this.routerList[0].router) {
return
}
this.$router.push({ path: `/${this.routerList[0].router}` });

View File

@ -4,61 +4,72 @@
<img src="../../assets/manageImg/deviceSet.png" alt="">设备状态设备
</div>
<div class="flex-view scroll">
<div class="manage-btn" v-for="item,index in topList" :key="index" @click="topChange(item,index)" :class="active == index ? 'active' : ''">
<div class="manage-btn" v-for="item, index in topList" :key="index" @click="topChange(item, index)"
:class="active == index ? 'active' : ''">
{{item.deviceTypeName}}
{{ item.deviceTypeName }}
</div>
</div>
<div class="table-view">
<el-table :data="tableData" :row-class-name="tableRowClassName" height="580" style="width: 100%">
<el-table-column label="序号" width="120px">
<el-table :data="tableData" :row-class-name="tableRowClassName" height="580" style="width: 100%"
:tree-props="{ children: 'child' }">
<el-table-column label="序号" width="120px">
<template slot-scope="scope">
<div>{{scope.$index+1 }}
</div>
</template>
</el-table-column>
<div>{{ scope.$index + 1 }}
</div>
</template>
</el-table-column>
<el-table-column prop="permissionName" label="设备名称">
<el-table-column prop="name" label="设备名称">
</el-table-column>
<el-table-column prop="nickName" label="设备别名">
</el-table-column>
<el-table-column prop="sort" width="120px" label="排序">
<el-table-column prop="sort" width="120px" label="排序">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<div class="table-flex">
<div class="table-operate blue" @click="openModel(scope.row,scope.$index)">
<img src="../../assets/manageImg/table-edit.png" alt="">编辑
</div>
<template slot-scope="scope">
<div class="table-flex">
<div class="table-operate blue" @click="openModel(scope.row, scope.$index)">
<img src="../../assets/manageImg/table-edit.png" alt="">编辑
</div>
</template>
</el-table-column>
</div>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog title="提示" top="15vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model" :append-to-body="true">
<el-dialog title="提示" top="15vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model"
:append-to-body="true">
<div class="vrcode-model-title">
编辑
</div>
<div class="vrcode-content" v-if="changeData">
<div class="manage-left">
<div class="manage-input">
<div class="input-title">设备别名</div>
<input type="text" v-model="changeData.nickName" placeholder="请输入设备别名">
</div>
</div>
<div class="manage-right">
<div class="manage-input">
<div class="input-title">排序</div>
<input type="number" v-model="changeData.sort" placeholder="请输入新排序">
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<div class="vrcode-btn blue-btn w-100" @click="confirmModel"></div>
<div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
</span>
</el-dialog>
编辑
</div>
<div class="vrcode-content" v-if="changeData">
<div class="">
<div class="manage-input">
<div class="input-title">设备别名</div>
<input type="text" v-model="changeData.nickName" placeholder="请输入设备别名">
</div>
</div>
<div class="">
<div class="manage-input">
<div class="input-title">排序</div>
<input type="number" v-model="changeData.sort" placeholder="请输入新排序">
</div>
</div>
<template v-for="item,index in changeData.child" >
<div class="" >
<div class="manage-input">
<div class="input-title">{{ index==0?'子设备名称':`&nbsp;` }}</div>
<input type="text" v-model="item.nickName" placeholder="请输入设备别名">
</div>
</div>
</template>
</div>
<span slot="footer" class="dialog-footer">
<div class="vrcode-btn blue-btn w-100" @click="confirmModel"></div>
<div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
</span>
</el-dialog>
</div>
</template>
<script>
@ -66,51 +77,51 @@ export default {
data() {
return {
tableData: [],
topList:[],
active:0,
addModel:false,
changeData:null,
modelIndex:0,
topList: [],
active: 0,
addModel: false,
changeData: null,
modelIndex: 0,
}
},
watch:{
active(newVal,oldVal){
watch: {
active(newVal, oldVal) {
this.getData(this.topList[newVal])
},
},
mounted() {this.dataInit() },
mounted() { this.dataInit() },
methods: {
confirmModel(){
confirmModel() {
this.loading = this.$loading({
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.api.putControlpermission(this.changeData).then(res=>{
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.api.putControlpermission(this.changeData).then(res => {
this.loading.close()
if(res.data.code==200){
if (res.data.code == 200) {
this.getData(this.topList[this.active])
this.$message.success(res.data.msg);
this.addModel=false
}else{
this.addModel = false
} else {
this.$message.error(res.data.msg);
this.addModel=false
this.addModel = false
}
})
},
openModel(item,index){
this.changeData=JSON.parse(JSON.stringify(item))
this.addModel=true
this.modelIndex=index
openModel(item, index) {
this.changeData = JSON.parse(JSON.stringify(item))
this.addModel = true
this.modelIndex = index
},
dataInit(){
var user= JSON.parse(localStorage.getItem('userInfo'))
this.api.selUserbyid(user.userid).then(res=>{
this.topList=[]
if(res.data.code==200){
res.data.data.devices.forEach((el,index)=>{
if(el.deviceName==10){
dataInit() {
var user = JSON.parse(localStorage.getItem('userInfo'))
this.api.selUserbyid(user.userid).then(res => {
this.topList = []
if (res.data.code == 200) {
res.data.data.devices.forEach((el, index) => {
if (el.deviceName == 10) {
this.topList.push(el)
}
})
@ -120,15 +131,15 @@ export default {
}
})
},
getData(item){
var data={deviceId:item.deviceId}
this.api.selpermission(data).then(res=>{
if(res.data.code==200){
this.tableData=res.data.data
getData(item) {
// var data={deviceId:item.deviceId}
this.api.getcontrol_cpermission(item.deviceId).then(res => {
if (res.data.code == 200) {
this.tableData = res.data.data
}
})
},
topChange(item,index){
topChange(item, index) {
this.active = index
},