fix: 优化横向滑动条显示

Gary Gu

5 days ago c9df8dbde2884e04c18189ead5763385c1214e85

 src/views/EquipmentView.vue

@@ -1,157 +1,167 @@
<template>
  <div class="equipment-container">
    <div class="top-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
          backgroundImage: `url(${titleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
      </div>
      <div class="stats-grid"  :style="sectionStyle">
        <div class="stat-item mb-[10px]">
          <div class="stat-info">
            <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>
        <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>
        <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>
      </div>
    <div
      class="top-nav w-full mb-[1vh]"
      :style="{
        backgroundImage: `url(${titleImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%',
      }"
    >
    </div>

    <div class="middle-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
          backgroundImage: `url(${middleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
    <div class="bottom-nav">
      <div class="top-section mb-[20px]">
        <div class="stats-grid" :style="sectionStyle">
          <div class="stat-item mb-[10px]">
            <div class="stat-info">
              <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">{{ 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">{{ 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">{{ userData.DutyUserTotle }}</div>
          </div>
        </div>
      </div>
      <div class="equipment-status"  :style="sectionStyle">
        <div 
          class="w-full h-[30px] mb-[10px]" 

      <div class="middle-section mb-[20px]">
        <div
          class="w-full h-[4vh] mb-[1vh]"
          :style="{
            backgroundImage: `url(${bgImage})`,
            backgroundImage: `url(${middleImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: '100% 100%'
            backgroundSize: '100% 100%',
          }"
        >
          <div class="text-white text-[14px] ml-[40px] leading-[35px]">升降机监控</div>
        </div>
        <div class="status-circles">
          <template v-for="item in circleItems">
            <div class="circle-item flex flex-col items-center justify-center" :key="item.id">
              <div class="progress-circle">
                <V2Echarts :idName="item.id" :options="item.options" />
                <div class="percentage">{{item.percentage}}%</div>
            </div>
            <div class="label mt-[5px] flex flex-row items-center justify-center">
              <div class="text-[12px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
              <div class="text-[24px] text-[#FFD500]">{{item.value}}</div>
            </div>
            </div>
          </template>
        </div>
        <div class="control-buttons mt-[30px]">
          <button class="control-btn" :class="{ 'active': currentTab === '塔吊监控' }" @click="handleControlBtnClick('塔吊监控')">塔吊监控</button>
          <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
        </div>
        <div class="divider"></div>
        <div class="progress-bar">
          <div class="label">运行设备总数</div>
          <div class="bar flex items-center">
            <div class="progress relative w-[80%] h-[24px]">
              <div class="progress-inner" :style="{ width: `${deviceOnline / deviceTotal * 100}%` }"></div>
              <div class="progress-blocks">
                <div v-for="n in 28" :key="n" 
                  class="block"
                  :class="{ 'active': (n-1)/28 * 100 <= (deviceOnline / deviceTotal * 100) }"
                ></div>
        <div class="equipment-status" :style="sectionStyle">
          <el-select v-model="deviceSelected" placeholder="请选择" @change="handleSelectChange">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <div
            class="w-full h-[30px]"
            :style="{
              backgroundImage: `url(${bgImage})`,
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center center',
              backgroundSize: '100% 100%',
            }"
          >
            <div class="text-white text-[14px] ml-[40px] leading-[35px] mt-[10px]">升降机监控</div>
          </div>
          <div class="status-circles">
            <template v-for="item in circleItems">
              <div class="circle-item flex flex-col items-center justify-center" :key="item.id">
                <div class="progress-circle">
                  <V2Echarts :idName="item.id" :options="item.options" />
                  <div class="percentage">{{ item.percentage }}%</div>
                </div>
                <div class="label mt-[5px] flex flex-row items-center justify-center">
                  <div class="text-[16px] text-[#FFFFFF] mr-[12px]">{{ item.name }}</div>
                  <div class="text-[24px] text-[#FFD500]">{{ item.value }}</div>
                </div>
              </div>
            </template>
          </div>
          <div class="divider"></div>
          <div class="progress-bar px-[10px]">
            <div class="label">运行设备总数</div>
            <div class="bar flex items-center">
              <div class="progress relative w-[90%] h-[24px]">
                <div class="progress-inner" :style="{ width: `${(deviceOnline / deviceTotal) * 100}%` }"></div>
                <div class="progress-blocks">
                  <div v-for="n in 28" :key="n" class="block" :class="{ active: ((n - 1) / 28) * 100 <= (deviceOnline / deviceTotal) * 100 }"></div>
                </div>
              </div>
              <div class="count-container ml-[25px]">
                <span class="text-[#FFBF00] text-[24px]">{{ deviceOnline }}</span>
                <span class="text-white text-[24px]">/</span>
                <span class="text-white text-[24px]">{{ deviceTotal }}</span>
              </div>
            </div>
            <div class="count-container ml-[25px]">
              <span class="text-[#FFBF00] text-[24px]">{{deviceOnline}}</span>
              <span class="text-white text-[24px]">/</span>
              <span class="text-white text-[24px]">{{deviceTotal}}</span>
          </div>
        </div>
      </div>

      <div class="bottom-section">
        <div
          class="w-full h-[4vh] mb-[1vh]"
          :style="{
            backgroundImage: `url(${bottomImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: '100% 100%',
          }"
        >
        </div>
        <div class="environment-grid" :style="sectionStyle">
          <div class="env-item">
            <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqiwendu.png" alt="" />
            <div class="env-info">
              <span class="envlabel">大气温度</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">{{ evnData.Tmp + "°C" }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom-section">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
          backgroundImage: `url(${bottomImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
      </div>
      <div class="environment-grid"  :style="sectionStyle">
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqiwendu.png" alt="">
          <div class="env-info">
            <span class="envlabel">大气温度</span>
            <span class="envvalue" :style="enviorStyle">5°C</span>
          <div class="env-item">
            <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqishidu.png" alt="" />
            <div class="env-info">
              <span class="envlabel">大气湿度</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">{{ evnData.Rh + "%" }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqishidu.png" alt="">
          <div class="env-info">
            <span class="envlabel">大气湿度</span>
            <span class="envvalue" :style="enviorStyle">22.9%</span>
          <div class="env-item">
            <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM2.png" alt="" />
            <div class="env-info">
              <span class="envlabel">PM2.5</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">{{ evnData.Pm25 + "μg/m³" }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM2.png" alt="">
          <div class="env-info">
            <span class="envlabel">PM2.5</span>
            <span class="envvalue" :style="enviorStyle">10 μg/m³</span>
          <div class="env-item">
            <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM10.png" alt="" />
            <div class="env-info">
              <span class="envlabel">PM10</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">{{ evnData.Pm10 + "μg/m³" }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM10.png" alt="">
          <div class="env-info">
            <span class="envlabel">PM10</span>
            <span class="envvalue" :style="enviorStyle">13 μg/m³</span>
          <div class="env-item">
            <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengli.png" alt="" />
            <div class="env-info">
              <span class="envlabel">风力</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">{{ evnData.Ws }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengli.png" alt="">
          <div class="env-info">
            <span class="envlabel">风力</span>
            <span class="envvalue" :style="enviorStyle">3级</span>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengxiang.png" alt="">
          <div class="env-info">
            <span class="envlabel">风向</span>
            <span class="envvalue" :style="enviorStyle">北风</span>
          <div class="env-item">
            <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengxiang.png" alt="" />
            <div class="env-info">
              <span class="envlabel">风向</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">{{ evnData.Wd }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
@@ -160,459 +170,968 @@
</template>

<script>
import V2Echarts from '@/components/V2Echarts.vue'
export default {
  name: 'EquipmentView',
  components: {
    V2Echarts
  },
  data() {
    return {
      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,
      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: 1,
      deviceTotal: 27,
      currentTab: '塔吊监控',
      circleItems: [
        {
          id: 'zaixianChartBox',
          name: '总在线',
          value: 22,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
                ],
              },
              
            ],
          }
  import V2Echarts from "@/components/V2Echarts.vue";
  import { HomeAPI } from "@/api/home";
  export default {
    name: "EquipmentView",
    components: {
      V2Echarts,
    },
    props: {
      selectedId: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        evnData: {
          Tmp: "0",
          Rh: "0",
          Pm25: "0",
          Pm10: "0",
          Ws: "0",
          Wd: "无",
        },
        {
          id: 'lixianChartBox',
          name: '总离线',
          value: 5,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
                ],
              },
              
            ],
          }
        userData: {
          RealtimeUserNumber: 0,
          TodayUserNumber: 0,
          DutyUserTotle: 0,
        },
        {
          id: 'baojingChartBox',
          name: '总报警',
          value: 0,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
        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,
        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,
        deviceTotal: 0,
        currentTab: "塔吊监控",
        circleItems: [
          {
            id: "zaixianChartBox",
            name: "总在线",
            value: 0,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
                show: false,
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
                ],
              legend: {
                itemWidth: 8,
                itemHeight: 8,
                top: "5%",
                left: "center",
                show: false,
              },
            ],
              series: [
                {
                  type: "pie",
                  radius: ["70%", "80%"],
                  center: ["50%", "50%"],
                  avoidLabelOverlap: false,
                  hoverAnimation: false,
                  startAngle: 90,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                      shadowBlur: 40,
                      borderWidth: 5,
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                    },
                  },
                  data: [
                    {
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "#234E84",
                      },
                    },
                  ],
                },
                {
                  type: "pie",
                  radius: ["70%", "100%"],
                  center: ["50%", "50%"],
                  avoidLabelOverlap: false,
                  hoverAnimation: false,
                  startAngle: 90,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                      shadowBlur: 40,
                      borderWidth: 10,
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                    },
                  },
                  data: [
                    {
                      value: 0,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "transparent",
                      },
                    },
                  ],
                },
              ],
            },
          },
          {
            id: "lixianChartBox",
            name: "总离线",
            value: 0,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
                show: false,
              },
              legend: {
                itemWidth: 8,
                itemHeight: 8,
                top: "5%",
                left: "center",
                show: false,
              },
              series: [
                {
                  type: "pie",
                  radius: ["70%", "80%"],
                  center: ["50%", "50%"],
                  avoidLabelOverlap: false,
                  hoverAnimation: false,
                  startAngle: 90,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                      shadowBlur: 40,
                      borderWidth: 5,
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                    },
                  },
                  data: [
                    {
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "#234E84",
                      },
                    },
                  ],
                },
                {
                  type: "pie",
                  radius: ["70%", "100%"],
                  center: ["50%", "50%"],
                  avoidLabelOverlap: false,
                  hoverAnimation: false,
                  startAngle: 90,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                      shadowBlur: 40,
                      borderWidth: 10,
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                    },
                  },
                  data: [
                    {
                      value: 0,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "transparent",
                      },
                    },
                  ],
                },
              ],
            },
          },
          {
            id: "baojingChartBox",
            name: "总报警",
            value: 0,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
                show: false,
              },
              legend: {
                itemWidth: 8,
                itemHeight: 8,
                top: "5%",
                left: "center",
                show: false,
              },
              series: [
                {
                  type: "pie",
                  radius: ["70%", "80%"],
                  center: ["50%", "50%"],
                  avoidLabelOverlap: false,
                  hoverAnimation: false,
                  startAngle: 90,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                      shadowBlur: 40,
                      borderWidth: 5,
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                    },
                  },
                  data: [
                    {
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "#234E84",
                      },
                    },
                  ],
                },
                {
                  type: "pie",
                  radius: ["70%", "100%"],
                  center: ["50%", "50%"],
                  avoidLabelOverlap: false,
                  hoverAnimation: false,
                  startAngle: 90,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                      shadowBlur: 40,
                      borderWidth: 10,
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                    },
                  },
                  data: [
                    {
                      value: 0,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 100,
                      name: "",
                      itemStyle: {
                        color: "transparent",
                      },
                    },
                  ],
                },
              ],
            },
          },
        ],
      };
    },
    computed: {
      sectionStyle() {
        return {
          backgroundImage: `url(${this.backgroundImage})`,
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "100% 100%",
        };
      },
      enviorStyle() {
        return {
          backgroundImage: `url(${this.enviorImage})`,
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "100% 100%",
        };
      },
    },
    watch: {
      selectedId: {
        handler(newVal) {
          console.log("设备界面接收到的数据:", newVal);
          // 处理数据变化的逻辑
          this.getDeviceTypes(newVal);
          this.getEnvData(newVal);
          this.getUserData(newVal);
        },
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
      },
    },
    mounted() {},
    methods: {
      /**
       * 处理设备选择变化
       * @param val
       */
      handleSelectChange(val) {
        this.getDeviceState(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,
              };
            }
          }
        });
      },
      /**
       * 获取环境数据
       */
      getEnvData(bindId) {
        const params = {
          bindId,
        };
        HomeAPI.GetJSCEnvMonitor(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result) {
              this.evnData = result;
            } else {
              this.evnData = {
                Tmp: "0",
                Rh: "0",
                Pm25: "0",
                Pm10: "0",
                Ws: "0",
                Wd: "无",
              };
            }
          }
        });
      },
      /**
       * 获取设备类型
       * @param bindId
       */
      getDeviceTypes(bindId) {
        const params = {
          bindId,
        };
        HomeAPI.GetDeviceType(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result.length > 0) {
              this.options = result.map((item) => ({
                value: item.Id,
                label: item.Name,
              }));
              this.deviceSelected = this.options[0].value; // 默认选中第一个项目
              this.getDeviceState(this.deviceSelected);
            } else {
              this.options = [];
            }
          }
        });
      },
      /**
       * 获取设备状态
       * @param deviceTypeId
       */
      getDeviceState(deviceTypeId) {
        const params = {
          bindId: this.selectedId || "",
          deviceTypeId,
        };
        HomeAPI.GetJSCDeviceState(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result) {
              this.deviceOnline = result.TotalOnlineNumber;
              this.deviceTotal = result.TotalOnlineNumber + result.TotalOfflineNumber;
              this.circleItems = [
                {
                  id: "zaixianChartBox",
                  name: "总在线",
                  value: result.TotalOnlineNumber,
                  percentage: result.TotalOnlineRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalOnlineRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalOnlineRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
                {
                  id: "lixianChartBox",
                  name: "总离线",
                  value: result.TotalOfflineNumber,
                  percentage: result.TotalOfflineRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalOfflineRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalOfflineRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
                {
                  id: "baojingChartBox",
                  name: "总报警",
                  value: result.TotalAlarmsNumber,
                  percentage: result.TotalAlarmsRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalAlarmsRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalAlarmsRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
              ];
            }
          }
        });
      },
      handleControlBtnClick(tab) {
        this.currentTab = tab;
      },
      handleResize() {
        if (this.myChart) {
          this.myChart.resize();
        }
      ]
    }
  },
  computed: {
    sectionStyle() {
      return {
        backgroundImage: `url(${this.backgroundImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%'
      }
      },
    },
    enviorStyle() {
      return {
        backgroundImage: `url(${this.enviorImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%'
      }
    }
  },
  methods: {
    handleControlBtnClick(tab) {
      this.currentTab = tab;
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
  }
}
  };
</script>

<style scoped>
.equipment-container {
  width: 100%;
  height: calc(100vh - 100px);
  color: white;
}
<style scoped lang="scss">
  .equipment-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    overflow: hidden;
  }
  .top-nav {
    height: 4vh;
  }
  .bottom-nav {
    flex: 1;
  }
  .section-title {
    font-size: 18px;
    margin-bottom: 20px;
    color: #fff;
  }

.section-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #fff;
}
  .top-section {
    width: 100%;
    height: calc(100% - 80%);
  }

.top-section {
  width: 100%;
}
  .middle-section {
    width: 100%;
    height: 40%;
  }

.middle-section {
  width: 100%;
}
  .bottom-section {
    width: 100%;
    height: calc(100% - 20% - 43%);
  }

.bottom-section {
  width: 100%;
}
  .stats-grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
  }

.stats-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
}
  .stat-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 14px;
    height: 52px;
    background: linear-gradient(270deg, rgba(48, 104, 165, 0.1) 2%, #3068a5 100%);
    border-radius: 2px;
  }

.stat-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 14px;
  height: 52px;
  background: linear-gradient( 270deg, rgba(48,104,165,0.1) 2%, #3068A5 100%);
  border-radius: 2px;
} 
.env-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
}
  .env-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
  }

.stat-info {
  display: flex;
  flex-direction: row;
  align-items: left;
}
.env-info {
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
}
.satalabel{
  font-size: 16px;
  color: #fff;
}
.label {
  font-size: 12px;
  color: #fff;
}
.envlabel {
  font-size: 14px;
  color: #C8C8C8;
  margin-left: 20px;
}
  .stat-info {
    display: flex;
    flex-direction: row;
    align-items: left;
  }

.envvalue {
  font-size: 16px;
  color: #fff;
  margin-top: 4px;
  width: 100%;
  height: 100%;
  padding-left: 20px;
}
  .env-info {
    width: calc(100% - 88px);
    height: 100%;
  }

.equipment-status {
  padding: 20px 10px;
}
  .satalabel {
    font-size: 16px;
    color: #fff;
  }

.status-title {
  font-size: 16px;
  margin-bottom: 20px;
}
  .label {
    font-size: 12px;
    color: #fff;
  }

.status-circles {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
  .envlabel {
    font-size: 16px;
    color: #c8c8c8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.progress-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #3068A5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
  .envvalue {
    text-align: center;
    font-size: 18px;
    color: #fff;
    margin-top: 4px;
    width: 100%;
    height: calc(100% - 28px);
    position: relative;
    .envvalue-text {
      position: absolute;
      top: 33%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

.percentage {
  font-size: 12px;
  color: #00ffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  .equipment-status {
    padding: 10px 10px;
    height: calc(100% - 5vh);
    ::v-deep(.el-select) {
      height: 28px;
      background: linear-gradient(224deg, #3068a5 0%, #5daeff 100%);
      border-radius: 2px;
      width: 100%;
      .el-input {
        align-items: center;
        display: flex;
        height: 28px;
        .el-input__inner {
          height: 28px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #dddddd;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
        .el-input__suffix {
          align-items: center;
          display: flex;
        }
      }
    }
  }

.environment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
  .status-title {
    font-size: 16px;
    margin-bottom: 20px;
  }

.control-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
  .status-circles {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
  }

.control-btn {
  padding: 8px 16px;
  background: rgba(112,119,140,0.3);
  border-radius: 2px;
  border: 1px solid rgba(112,124,140,0.6);
  color: #C8C8C8;
  cursor: pointer;
}
  .progress-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #3068a5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

.control-btn.active {
  background: rgba(255,191,0,0.2);
  border-radius: 2px;
  border: 1px solid #FFBF00;
  color: #fff;
}
  .percentage {
    font-size: 12px;
    color: #00ffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient( 270deg, rgba(94,161,209,0.1) 0%, #4886BC 49%, rgba(48,104,165,0.1) 100%);
  margin: 20px 0;
}
  .environment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: calc(100% - 5vh);
  }

.progress-bar {
  margin-top: 20px;
}
  .control-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

.bar {
  width: 100%;
}
  .control-btn {
    padding: 8px 16px;
    background: rgba(112, 119, 140, 0.3);
    border-radius: 2px;
    border: 1px solid rgba(112, 124, 140, 0.6);
    color: #c8c8c8;
    cursor: pointer;
  }

.progress {
  background: rgba(216,216,216,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
}
  .control-btn.active {
    background: rgba(255, 191, 0, 0.2);
    border-radius: 2px;
    border: 1px solid #ffbf00;
    color: #fff;
  }

.progress-blocks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 4px;
  padding: 2px 4px;
}
  .divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(270deg, rgba(94, 161, 209, 0.1) 0%, #4886bc 49%, rgba(48, 104, 165, 0.1) 100%);
    margin: 15px 0;
  }

.block {
  flex: 1;
  height: 100%;
  background: rgba(216,216,216,0.1);
}
  .bar {
    width: 100%;
  }

.block.active {
  background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
}
  .progress {
    background: rgba(216, 216, 216, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
  }

.progress-inner {
  display: none;
}
  .progress-blocks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 4px;
    padding: 2px 4px;
  }

  .block {
    flex: 1;
    height: 100%;
    background: rgba(216, 216, 216, 0.1);
  }

  .block.active {
    background: linear-gradient(180deg, #ffd500 0%, #ff9b00 100%);
  }

  .progress-inner {
    display: none;
  }
</style>
<style lang="scss">
  .el-scrollbar__wrap {
    overflow-x: hidden;
    overflow-y: scroll;
  }
</style>