| | |
| | | <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="" /> |
| | | <span class="satalabel ml-[8px]">实时人数</span> |
| | | </div> |
| | | <div class="value text-[#00FFFF] text-[28px] font-bold">62</div> |
| | | <div class="value text-[#00FFFF] text-[28px] font-bold">{{ userData.RealtimeUserNumber }}</div> |
| | | </div> |
| | | <div class="stat-item mb-[10px]"> |
| | | <div class="stat-info"> |
| | | <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="" /> |
| | | <span class="satalabel ml-[8px]">今日累计/人次</span> |
| | | </div> |
| | | <div class="value text-[#FFD500] text-[28px] font-bold">62</div> |
| | | <div class="value text-[#FFD500] text-[28px] font-bold">{{ userData.TodayUserNumber }}</div> |
| | | </div> |
| | | <div class="stat-item"> |
| | | <div class="stat-info"> |
| | | <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="" /> |
| | | <span class="satalabel ml-[8px]">在岗总数</span> |
| | | </div> |
| | | <div class="value text-[#FFD500] text-[28px] font-bold">62</div> |
| | | <div class="value text-[#FFD500] text-[28px] font-bold">{{ userData.DutyUserTotle }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | backgroundRepeat: 'no-repeat', |
| | | backgroundPosition: 'center center', |
| | | backgroundSize: '100% 100%', |
| | | display: 'flex', |
| | | alignItems: 'center', |
| | | }" |
| | | > |
| | | <span style="font-family: PangMenZhengDaoBiaoTiTi !important; font-size: 24px; letter-spacing: 2px; white-space: nowrap; margin-left: 30px" |
| | | >重要设备状态</span |
| | | > |
| | | </div> |
| | | <div class="equipment-status" :style="sectionStyle"> |
| | | <el-select v-model="deviceSelected" placeholder="请选择" @change="handleSelectChange"> |
| | |
| | | backgroundRepeat: 'no-repeat', |
| | | backgroundPosition: 'center center', |
| | | backgroundSize: '100% 100%', |
| | | display: 'flex', |
| | | alignItems: 'center', |
| | | }" |
| | | > |
| | | <span style="font-family: PangMenZhengDaoBiaoTiTi !important; font-size: 24px; letter-spacing: 2px; white-space: nowrap; margin-left: 30px" |
| | | >环境监测</span |
| | | > |
| | | </div> |
| | | <div class="environment-grid" :style="sectionStyle"> |
| | | <div class="env-item"> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | evnData: {}, |
| | | evnData: { |
| | | Tmp: "0", |
| | | Rh: "0", |
| | | Pm25: "0", |
| | | Pm10: "0", |
| | | Ws: "0", |
| | | Wd: "无", |
| | | }, |
| | | userData: { |
| | | RealtimeUserNumber: 0, |
| | | TodayUserNumber: 0, |
| | | DutyUserTotle: 0, |
| | | }, |
| | | deviceSelected: "", |
| | | options: [], |
| | | backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href, |
| | | titleImage: new URL("@/assets/images/titles/renyuan.png", import.meta.url).href, |
| | | middleImage: new URL("@/assets/images/titles/shebei.png", import.meta.url).href, |
| | | bottomImage: new URL("@/assets/images/titles/huanjing.png", import.meta.url).href, |
| | | middleImage: new URL("@/assets/images/titles/xiangmu.png", import.meta.url).href, |
| | | bottomImage: new URL("@/assets/images/titles/xiangmu.png", import.meta.url).href, |
| | | bgImage: new URL("@/assets/images/titles/title_second.png", import.meta.url).href, |
| | | enviorImage: new URL("@/assets/images/titles/wendu_bg.png", import.meta.url).href, |
| | | deviceOnline: 0, |
| | |
| | | }, |
| | | data: [ |
| | | { |
| | | value: 81.5, |
| | | value: 0, |
| | | name: "", |
| | | itemStyle: { |
| | | color: "#00FFFF", |
| | | }, |
| | | }, |
| | | { |
| | | value: 18.5, |
| | | value: 100, |
| | | name: "", |
| | | itemStyle: { |
| | | color: "transparent", |
| | |
| | | }, |
| | | data: [ |
| | | { |
| | | value: 33, |
| | | value: 0, |
| | | name: "", |
| | | itemStyle: { |
| | | color: "#00FFFF", |
| | | }, |
| | | }, |
| | | { |
| | | value: 77, |
| | | value: 100, |
| | | name: "", |
| | | itemStyle: { |
| | | color: "transparent", |
| | |
| | | }, |
| | | data: [ |
| | | { |
| | | value: 20, |
| | | value: 0, |
| | | name: "", |
| | | itemStyle: { |
| | | color: "#00FFFF", |
| | | }, |
| | | }, |
| | | { |
| | | value: 80, |
| | | value: 100, |
| | | name: "", |
| | | itemStyle: { |
| | | color: "transparent", |
| | |
| | | // 处理数据变化的逻辑 |
| | | this.getDeviceTypes(newVal); |
| | | this.getEnvData(newVal); |
| | | this.getUserData(newVal); |
| | | }, |
| | | deep: true, // 深度监听对象内部变化 |
| | | immediate: true, // 立即执行一次 |
| | |
| | | */ |
| | | handleSelectChange(val) { |
| | | this.getDeviceState(val); |
| | | this.getEnvData(val); |
| | | // this.getEnvData(val); |
| | | // this.getUserData(val); |
| | | }, |
| | | /** |
| | | * 获取人员数据 |
| | | * @param bindId |
| | | */ |
| | | getUserData(bindId) { |
| | | const params = { |
| | | bindId, |
| | | }; |
| | | HomeAPI.GetJSCUserManage(params).then((res) => { |
| | | if (res.Ret === 1) { |
| | | const result = res.Data; |
| | | if (result) { |
| | | this.userData = result; |
| | | } else { |
| | | this.userData = { |
| | | RealtimeUserNumber: 0, |
| | | TodayUserNumber: 0, |
| | | DutyUserTotle: 0, |
| | | }; |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | /** |
| | | * 获取环境数据 |
| | |
| | | display: none; |
| | | } |
| | | </style> |
| | | <style lang="scss"> |
| | | .el-scrollbar__wrap { |
| | | overflow-x: hidden; |
| | | overflow-y: scroll; |
| | | } |
| | | </style> |