pull/158/head
wb-zhuangyuehuang-vjzzZ 2024-07-18 14:29:02 +08:00
parent 88057ae2ae
commit 8a383c7167
5 changed files with 381 additions and 252 deletions

View File

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

View File

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

View File

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