Vue3 响应式全局对象json 动态绑定界面二 （方块矩阵样式）
效果
main.js
//全局对象 const globalData=reactive({ extTelMonitorData: [ { title: '用户组一', list: [ { groupID: "0", groupName: "All Users", userDomain: "equiinet.cn", userExten: "1000", userID: "1", userName: "刘亦菲", isRegister: false, callStatus:"" }, { groupID: "0", groupName: "All Users", userDomain: "equiinet.cn", userExten: "1001", userID: "2", userName: "娜然", isRegister: false, callStatus:"" }, { groupID: "0", groupName: "All Users", userDomain: "equiinet.cn", userExten: "1002", userID: "3", userName: "佟丽娅", isRegister: false, callStatus:"" }, { groupID: "0", groupName: "All Users", userDomain: "equiinet.cn", userExten: "1003", userID: "3", userName: "迪丽热巴", isRegister: false, callStatus:"" } ] }, { title: '用户组二', list: [ { userName: '张三', number: 1003, isRegister: false }, { userName: '王一', number: 1005, isRegister: false } ] }, { title: '用户组三', list: [ { userName: '刘中', number: 1006, isRegister: false }, { userName: '李毅', number: 1007, isRegister: false } ] }, { title: '全部分机', list: [ { userName: '李安', number: 1008, isRegister: false }, { userName: '李毅', number: 1009, isRegister: false } ] } ] , missedCallData:"", currentUserTel:"", }) app.provide('globalData', globalData);
在main.js的函数中 改变 extTelMonitorData 的值 从而改变界面
//分机状态 function websocket_resMsg_extTelStatus(msg){ let length = msg.length; if(length>12){ var msgExtTelStatusData= msg.substr(12); //globalExtTelMonitorData=msgExtTelStatus; //globalData.extTelMonitorData=JSON.parse(msgExtTelStatus); //将字符串转为json对象 globalData.extTelMonitorData=eval('('+msgExtTelStatusData+')'); console.log('收到分机状态 '+ msgExtTelStatusData); } }
子组件ExtTelStatusComponent.vue 中
html部分
v-for 遍历 Json数组，赋值显示
<template> <div class="IndConB flex" id="divExtTelStatus"> <el-row :gutter="74" v-for="(dataItem, index) in globalData.extTelMonitorData[0].list" :key="index"> <el-col :span="8"> <div style="width:190px;"> <a href="javascript:;" class="IndCona" > <div class="IndConaH flexC Huans" style="width:95%;"><img src="../assets/images/pic/phone01.png"> <p > {{dataItem.userExten}}</p></div> <div class="IndConaP" style="width:95%;"> <div class="IndConaPz Huans">名称: {{dataItem.userName}}</div> <div class="IndConaPz Huans">状态: {{dataItem.callStatus}}</div> </div> <div class="IndConaF flexC fl-cen" style="width:95%;"><img src="../assets/images/pic/tanhao.png"> <p>{{dataItem.isRegister}}</p></div> <div class="IndConaD Huans"> <p>名称 : 调度电话</p> <p>号码 : {{dataItem.userExten}}</p> <p>状态 : {{dataItem.isRegister}}</p> <p>分区 : {{dataItem.groupID}}</p> <p>终端 : {{dataItem.userDomain}}</p> </div> </a> </div> </el-col> </el-row> </div> </template>
javascript部分
<script> // 在子组件中注入全局对象 import { inject, watch } from 'vue' export default { // 组件名称 name: 'ExtTelStatusComponent', data() { return { selected_index:0, pageContentData: [], activeIndex: '0', currentPage4: 1, total: 20, }; }, setup() { // 注入全局对象 const globalData = inject('globalData'); watch(() => globalData.extTelMonitorData, (newValue) => { // 更新 globalData.extTelMonitorData=newValue; console.log("ExtTelStatusComponent watch "+globalData.extTelMonitorData[0].list); }) return { globalData }; }, mounted() { }, methods: { } } </script>
css样式
<style scoped> *{ margin:0; padding:0;} html,body{width: 100%; height:100%;} /**/ body{margin:0;color:#FFF; position: relative;font-size:12px;font-family:"microsoft yahei", Arial, Helvetica, sans-serif;background-color:#000;} ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {margin:0px;padding:0px;border:none;list-style:none; font-weight: normal;} a{text-decoration:none; text-shadow:none;font-weight:normal;} ul{list-style:none;} textarea,input,button,select{outline:none;-webkit-appearance:none; font-family:Arial, Helvetica, sans-serif;} a{color:#6c6c6c;text-decoration:none;} img{border:none; display: block;} span{margin:0; padding:0; cursor: auto;} span:focus,div:focus {outline: none;} .Huans{-webkit-box-sizing: border-box;box-sizing: border-box;} .flex{display:-webkit-box;display: -ms-flexbox;display:flex;flex-wrap:wrap;align-items:flex-start;} .flexC{display:-webkit-box;display: -ms-flexbox;display:flex;align-items:center; flex-wrap:wrap;} .flexE{display:-webkit-box;display: -ms-flexbox;display:flex;align-items:flex-end; flex-wrap:wrap;} .fl-bet{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content:space-between;} .fl-cen{-webkit-box-pack: center;-ms-flex-pack: center;justify-content:center;} .fl-end{-webkit-box-pack:right;-ms-flex-pack:right;justify-content:flex-end;} .main {width: 100%;height:100%;padding:87px 0 0;z-index:1; position: relative;} .IndDK{width: 100%;height:100%;padding: 0;z-index:1; position: relative;} .menu{width:200px; height:100%; border-right:2px solid #000; background:#454648; padding-bottom: 87px; position: relative;} .menuU{ font-size:14px; padding:15px 5px 10px; width:100%; height:100%;} .menuU li{} .menuUa{padding-left:19px; position: relative; height:32px; line-height:32px; color:#FFF;} .menuUa:before{display:block;content:'';position: absolute; width:14px; height:14px; background-image: url("..//assets/images/icon/navJ01.png");left:0;top:9px;transition:0.5s;} .menuU li .on:before{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform: rotate(-90deg);transition:0.5s;} .menuUa p{} .menuUa span{} .menuUn{ padding-left: 7px; padding-top:15px; padding-bottom:5px;} .menuUna{ line-height:28px;height:28px; padding-left:25px; width:100%;position: relative;color:#FFF;} .menuUna:before{display:block;content:'';position: absolute; width:9px; height:25px; background-image: url("..//assets/images/icon/navJ02.png");left:0;top:-12px;} .menunm{ background:#454648; border:2px solid #d3a306;width:100%; height:75px; padding-left: 4px; padding-right: 2px;left:0; bottom:87px; position: absolute;} .menunmI{width:150px; height:46px; line-height:46px; padding:0 15px; background:#848484; border:none; color:#FFF; font-size:22px;font-family: "shuzhi";} .menunma{opacity:0.3;width:35px;} .menunmJ{width:35px; height: 35px;background-position: 0 0; background-repeat: no-repeat; background-size:100%; display: block;background-image: url("..//assets/images/pic/conI08.png");} .menunma p{width:100%; display: block; text-align: center; font-size:12px; line-height:16px; color:#FFF;} .menunma:hover .menunmJ{background-position: 0 -35px;} .menunmD{width:20px; height:20px;transform: translate(0,-50%);left:50%;top:-20px; position: absolute;} .menunmC{width:90%;right:0;left:0; margin:0 auto;bottom:80px; position: absolute; padding:4px 3px 1px; background:#2f3032; border-radius:3px; box-shadow:0 0 4px rgba(255,255,255,0.6); z-index:3; display: none;} .menunmC a{width:32.5%; height:28px; line-height:28px; color:#FFF; font-weight:700; border-radius:3px; text-align: center; font-size:18px; background:linear-gradient(to bottom,#b3caf5,#47494b); margin-bottom:3px;} .IndRe{width:200px; height:100%; border-left:2px solid #000; background:#454648; padding-bottom: 87px; position: relative;} .IndPhone{width:100%; height: 87px; position: absolute; bottom:0; left:0;} .IndPhone img{width:85px; display:block} .IndPhone p{color:#FFF; font-size: 12px; line-height:18px;} .IndCon{width:100%; flex:1;height:100%; background:#353535; border-left:5px solid #f5f5f5;padding-bottom: 87px;position: relative; z-index:5} .IndConH{background-color: #272727; height: 32px; color:#FFF; font-size: 12px;} .IndConHp{padding:0 15px;} .IndConHX{height:32px; border-left:1px solid #666;padding:0 15px;} .IndConHa{ color:#FFF; position: relative;} .IndConHlab{} .IndConHlab input[type="checkbox"]{-webkit-appearance:none;vertical-align:middle;display:block;outline:none; background-position: center; background-repeat: no-repeat; background-size:100%; background-color:rgba(255,255,255,0);width:14px;height:14px;border:1px solid #999; border-radius:2px; margin-left:8px;} .IndConHlab input[type="checkbox"]:checked{background-color:#999; background-image: url("..//assets/images/icon/check1.png")} .IndCongB{z-index:5; padding:5px 0; position: absolute;left:30px; top:30px; font-size:14px; background:#848484; border-radius:5px; display: none;} .IndcHa{padding:0 15px; line-height:32px; color:#FFF; width:120px;} .IndcHa img{margin-right:5px; display: block;} .IndcHa:hover{ background:#333;} .IndFeNL li{position:relative;} .IndFeNLB{z-index:5; padding:5px 0; position: absolute;left:0; top:30px;font-size:14px; background:#848484; border-radius:5px; display: none;} .IndFeNLB input[type="checkbox"]{-webkit-appearance:none;vertical-align:middle;display:block;outline:none; background-position: center; background-repeat: no-repeat; background-size:100%; background-color:rgba(255,255,255,0);width:14px;height:14px;border:1px solid #999; border-radius:2px; margin-left:auto;} .IndFeNLB input[type="checkbox"]:checked{background-color:#999; background-image: url("..//assets/images/icon/check1.png")} .IndConK{width:100%; height: 100%; padding:15px 2.6%;} .IndConB{width:100%;} .IndCona{width:19.2%; margin-left: 1%; margin-bottom:14px; border-radius:6px; color:#FFF;transition:0.5s; position: relative;} .IndCona:nth-child(5n+1){margin-left:0;} .IndConaH{height:36px; padding:0 15px; background:linear-gradient(to bottom,#828282,#443e3d);border-top-left-radius:6px;border-top-right-radius:6px} .IndConaH img{width:20px; display: block; margin-right:6px;} .IndConaH p{ font-size:14px; line-height:20px;} .IndConaP{} .IndConaPz{ line-height:36px; border-bottom: 1px solid #353535; padding:0 20px; font-size:12px; width:100%; background:#6c6c6c;} .IndConaF{ background:#575353; line-height:36px;height:36px;border-bottom-left-radius:6px;border-bottom-right-radius:6px} .IndConaF img{ width: 16px; display: block; margin-right:15px;} .IndConaF p{ font-size:14px; line-height:24px;} .IndCona:hover{-ms-transform:scale(1.01);-moz-transform:scale(1.01);-webkit-transform:scale(1.01);-o-transform:scale(1.01);transform:scale(1.01); transition:0.5s; box-shadow:0 0 10px rgba(255,255,255,0.8);} .IndConaD{max-width:250px;font-size:14px;line-height:24px;position:absolute;top:0;left:95%;z-index:2;min-height:34px;padding:8px 15px;color: #fff;text-align:left;text-decoration:none;background-color:rgba(70,76,91,.9);border-radius:4px; -webkit-box-shadow:0 1px 6px rgba(0,0,0,.2);box-shadow: 0 1px 6px rgba(0,0,0,.2);white-space: nowrap; display: none; z-index:5} .IndCona:hover{ z-index:1;} .IndCona:hover .IndConaD{display:block;} .IndConF{ background:#424345; position: absolute;width:100%; height: 87px; bottom:0; left:0;} .IndConFa{width:14.2857%; opacity:0.3;} .IndConFI{ width: 40px; height: 40px;background-position: 0 0; background-repeat: no-repeat; background-size:100%; display: block; margin:0 auto;} .IndConFI1{background-image: url("..//assets/images/pic/conI01.png");} .IndConFI2{background-image: url("..//assets/images/pic/conI02.png");} .IndConFI3{background-image: url("..//assets/images/pic/conI03.png");} .IndConFI4{background-image: url("..//assets/images/pic/conI04.png");} .IndConFI5{background-image: url("..//assets/images/pic/conI05.png");} .IndConFI6{background-image: url("..//assets/images/pic/conI06.png");} .IndConFI7{background-image: url("..//assets/images/pic/conI07.png");} .IndConFa p{width:100%; display: block; text-align: center; font-size:12px; line-height:20px; color:#FFF;} .IndConFa:hover .IndConFI{background-position: 0 -40px;} .IndReK{width:100%; height:100%; border-bottom:2px solid #000;/*align-content:stretch;align-items:stretch;*/align-content:flex-start} .IndReK li{ background:#666; height: 33.333%; width:100%;/*align-items:stretch;align-content:stretch;*/} .IndRea{background-image: linear-gradient(#272727,#2a2c2d,grey); color:#FFF; height: 38px; font-size: 12px; padding:0 16px; width:100%;} .IndRea i{ width:8px; height:8px; background-image: url("..//assets/images/icon/jiao01.png"); background-position: center; background-repeat: no-repeat; background-size: 100%; display: block;transition:0.5s;} .IndRea p{line-height:20px; margin-left:11px;} .IndReK li.on{ height: 38px;} .IndReK li.on .IndRea i{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform: rotate(-90deg);transition:0.5s;} .IndReN{width:100%;} @-webkit-keyframes enlarge{ 0%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);} 50% {-ms-transform:scale(1.05);-moz-transform:scale(1.05);-webkit-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);} 100%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);} } @-moz-keyframes enlarge{ 0%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);} 50% {-ms-transform:scale(1.05);-moz-transform:scale(1.05);-webkit-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);} 100%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);} } @keyframes enlarge{ 0%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);} 50% {-ms-transform:scale(1.05);-moz-transform:scale(1.05);-webkit-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);} 100%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);} } .overH{overflow:auto;} .overH::-webkit-scrollbar{width:4px;height:0;}/*滚动条整体样式*/ .overH::-webkit-scrollbar-thumb{background:#00e8e6; border-radius:4px}/*滚动条里面小方块*/ .overH::-webkit-scrollbar-track{background:rgba(255,255,255,0.2);} </style>
