Gary Gu
2025-06-30 84201c1e88b65f16b6da2c85ab8eee23f37a3da1
src/views/EquipmentView.vue
@@ -18,21 +18,21 @@
              <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>
@@ -45,8 +45,13 @@
            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">
@@ -105,8 +110,13 @@
            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">
@@ -185,13 +195,25 @@
    },
    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,
@@ -268,14 +290,14 @@
                  },
                  data: [
                    {
                      value: 81.5,
                      value: 0,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 18.5,
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "transparent",
@@ -356,14 +378,14 @@
                  },
                  data: [
                    {
                      value: 33,
                      value: 0,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 77,
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "transparent",
@@ -444,14 +466,14 @@
                  },
                  data: [
                    {
                      value: 20,
                      value: 0,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 80,
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "transparent",
@@ -490,6 +512,7 @@
          // 处理数据变化的逻辑
          this.getDeviceTypes(newVal);
          this.getEnvData(newVal);
          this.getUserData(newVal);
        },
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
@@ -503,7 +526,31 @@
       */
      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,
              };
            }
          }
        });
      },
      /**
       * 获取环境数据
@@ -1092,3 +1139,9 @@
    display: none;
  }
</style>
<style lang="scss">
  .el-scrollbar__wrap {
    overflow-x: hidden;
    overflow-y: scroll;
  }
</style>