Browse Source

语音广播,情报板。新增全选

develop
王兴琳 3 weeks ago
parent
commit
5667c74ea1
  1. 35
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
  2. 76
      ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue

35
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue

@ -63,6 +63,15 @@
<el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key"> <el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key">
<div v-if="item.list.length > 0"> <div v-if="item.list.length > 0">
<el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices"> <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
<!-- 全选按钮 -->
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>
全选
</el-checkbox>
<el-checkbox v-for="(itm, index) in item.list" :label="itm.iotDeviceId" :key="index" <el-checkbox v-for="(itm, index) in item.list" :label="itm.iotDeviceId" :key="index"
:disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)"> :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)">
<el-tooltip content="设备未接入" placement="top" <el-tooltip content="设备未接入" placement="top"
@ -174,7 +183,7 @@
{{ item.dictLabel }} {{ item.dictLabel }}
<span :class="item.fold?'el-icon-arrow-down':'el-icon-arrow-up'"></span> <span :class="item.fold?'el-icon-arrow-down':'el-icon-arrow-up'"></span>
</div> </div>
<div v-if="item.fold" v-for="(itm, indx) in item.list" :key="indx" class="tplItem"> <div v-if="item.fold" v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
<!-- 模板内容 --> <!-- 模板内容 -->
<BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview> <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
@ -197,7 +206,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
</div> </div>
</draggable> </draggable>
</vuescroll> </vuescroll>
@ -331,6 +340,7 @@ export default {
this.editDialog.tpl = null; this.editDialog.tpl = null;
} }
}, },
// boardSizeDic: function (newVal, oldVal) { // boardSizeDic: function (newVal, oldVal) {
// console.log(newVal, 'selectedSize') // console.log(newVal, 'selectedSize')
// if (newVal.length == 0) { // if (newVal.length == 0) {
@ -398,6 +408,25 @@ export default {
}, },
}, },
methods: { methods: {
handleCheckAllChange(val) {
this.checkedDeviceIds = val ? this.getAllDeviceIds() : [];
this.isIndeterminate = false;
},
getAllDeviceIds() {
// 使 Object.values
return Object.values(this.boardSizeDic).reduce((acc, item) => {
acc.push(...item.list.filter(itm => itm.iotDeviceId && !itm.iotDeviceId.includes('null') && !(itm.deviceState === 0 || itm.deviceState === null)).map(itm => itm.iotDeviceId));
return acc;
}, []);
},
updateCheckAllStatus() {
const allDeviceIds = this.getAllDeviceIds();
const checkedCount = this.checkedDeviceIds.length;
this.checkAll = checkedCount === allDeviceIds.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < allDeviceIds.length;
},
____boardTxtStyle() { ____boardTxtStyle() {
return { return {
color: "#F00", color: "#F00",
@ -1304,7 +1333,7 @@ export default {
// } // }
::v-deep .sortable-chosen:not(th) { ::v-deep .sortable-chosen:not(th) {
//background-color: rgba(5, 175, 227, 0.1) !important; //background-color: rgba(5, 175, 227, 0.1) !important;
} }

76
ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue

@ -60,7 +60,16 @@
<div style="flex:1; height: 0; padding:0 10px 10px"> <div style="flex:1; height: 0; padding:0 10px 10px">
<vuescroll :ops="scrollOptions"> <vuescroll :ops="scrollOptions">
<template v-if="deviceList.length> 0"> <template v-if="deviceList.length> 0">
<el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices"> <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
<!-- 全选按钮 -->
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>
全选
</el-checkbox>
<el-checkbox v-for="(itm, index) in deviceList" :label="itm.iotDeviceId" :key="index" <el-checkbox v-for="(itm, index) in deviceList" :label="itm.iotDeviceId" :key="index"
:disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null"> :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null">
<el-tooltip content="设备未接入" placement="top" <el-tooltip content="设备未接入" placement="top"
@ -261,6 +270,18 @@ export default {
this.editDialog.tpl = null; this.editDialog.tpl = null;
} }
}, },
checkedDeviceIds: {
handler(val) {
const allDeviceIds = this.deviceList
.filter(itm => !(!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null))
.map(itm => itm.iotDeviceId);
const checkedCount = val.length;
this.checkAll = checkedCount === allDeviceIds.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < allDeviceIds.length;
},
deep: true
},
// boardSizeDic: function (newVal, oldVal) { // boardSizeDic: function (newVal, oldVal) {
// console.log(newVal, 'selectedSize') // console.log(newVal, 'selectedSize')
// if (newVal.length == 0) { // if (newVal.length == 0) {
@ -290,6 +311,14 @@ export default {
...mapState(["menu"]), ...mapState(["menu"]),
}, },
methods: { methods: {
handleCheckAllChange(val) {
const allDeviceIds = this.deviceList
.filter(itm => !(!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null))
.map(itm => itm.iotDeviceId);
this.checkedDeviceIds = val ? allDeviceIds : [];
this.isIndeterminate = false;
},
____boardTxtStyle() { ____boardTxtStyle() {
return { return {
color: "#F00", color: "#F00",
@ -372,7 +401,7 @@ export default {
// } // }
}); });
}); });
}, },
____forkDeviceInfo(deviceFrom) { ____forkDeviceInfo(deviceFrom) {
// //
@ -530,7 +559,7 @@ export default {
type: "warning", type: "warning",
}) })
.then(() => { .then(() => {
const param = { const param = {
"devices": deviceList, "devices": deviceList,
"functions": [ "functions": [
@ -614,7 +643,7 @@ export default {
// message: ""+cbMsg[res.retCode], // message: ""+cbMsg[res.retCode],
// }); // });
// } // }
// // !isMultiControl && this.____getDeviceInfo(); // // !isMultiControl && this.____getDeviceInfo();
// }) // })
// .catch((err) => {}) // .catch((err) => {})
@ -635,6 +664,7 @@ export default {
// //
____onSelectDevices(arr) { ____onSelectDevices(arr) {
this.updateCheckAllStatus();
this.selectedDevices = []; this.selectedDevices = [];
if (this.checkedDeviceIds.length == 0) { if (this.checkedDeviceIds.length == 0) {
@ -905,26 +935,26 @@ export default {
transition: all linear 0.3s; transition: all linear 0.3s;
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
&.hide { &.hide {
transform: translateX(20px); transform: translateX(20px);
opacity: 0; opacity: 0;
transition: all linear 0.3s; transition: all linear 0.3s;
} }
.tplItem { .tplItem {
margin-right: 14px; margin-right: 14px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
padding-bottom: 10px; padding-bottom: 10px;
.boardPreview { .boardPreview {
border: 2px solid #004c64; border: 2px solid #004c64;
// width: 560px; // width: 560px;
// height:80px; // height:80px;
flex: 1; flex: 1;
} }
.infoBtnBox { .infoBtnBox {
width: 160px; width: 160px;
height: 50px; height: 50px;
@ -936,26 +966,26 @@ export default {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
.btn { .btn {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 40px; width: 40px;
height: 40px; height: 40px;
&.btnApply { &.btnApply {
background-image: url(~@/assets/jihe/images/button/toLeft.svg); background-image: url(~@/assets/jihe/images/button/toLeft.svg);
} }
&.btnEdit { &.btnEdit {
background-image: url(~@/assets/jihe/images/button/edit.svg); background-image: url(~@/assets/jihe/images/button/edit.svg);
} }
&.btnDelete { &.btnDelete {
background-image: url(~@/assets/jihe/images/button/delete.svg); background-image: url(~@/assets/jihe/images/button/delete.svg);
} }
} }
i { i {
font-size: 24px; font-size: 24px;
color: #666; color: #666;
@ -964,11 +994,11 @@ export default {
caret-color: rgba(0, 0, 0, 0); caret-color: rgba(0, 0, 0, 0);
user-select: none; user-select: none;
} }
i:hover { i:hover {
color: #05afe3; color: #05afe3;
} }
.disabledClass { .disabledClass {
pointer-events: none; pointer-events: none;
cursor: auto !important; cursor: auto !important;
@ -976,31 +1006,31 @@ export default {
} }
} }
} }
.tplItem.ghost_class { .tplItem.ghost_class {
.boardPreview, .boardPreview,
.infoBtnBox { .infoBtnBox {
border-color: #F00; border-color: #F00;
} }
} }
.tplItem.chosen_class { .tplItem.chosen_class {
.boardPreview, .boardPreview,
.infoBtnBox { .infoBtnBox {
border-color: #0A0; border-color: #0A0;
} }
} }
.tplItem.drag_class { .tplItem.drag_class {
.boardPreview, .boardPreview,
.infoBtnBox { .infoBtnBox {
border-color: #FF0; border-color: #FF0;
} }
} }
.el-collapse { .el-collapse {
max-height: 100% !important; max-height: 100% !important;
overflow: auto; overflow: auto;
@ -1015,10 +1045,10 @@ export default {
.tpl_box { .tpl_box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.tpl_title { .tpl_title {
} }
.tpl_list { .tpl_list {
flex: 1; flex: 1;
height: 0; height: 0;

Loading…
Cancel
Save