src/assets/css/element-ui-override.scss

@@ -120,4 +120,28 @@
    color: #fff;
    border: none;
    outline: none;
}
/* 修改下拉面板背景色 */
.el-select-dropdown {
    background: rgb(33,72,115);
    border-radius: 2px;
    border: 1px solid #3068A5;
    .el-select-dropdown__item{
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        background-color: rgb(33,72,115);
        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        &.selected {
            background-color: rgba(255, 255, 255, 0.2);
        }
    }
}

 src/components/Header.vue

@@ -8,40 +8,50 @@
-->
<template>
  <header class="headerWrapper">
    <div class="relative z-[100] w-full h-[80px]" :style="{
      backgroundImage: `url(${backgroundImage})`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center center',
      backgroundSize: '100% 100%'
    }">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 h-full px-[16px] flex items-center justify-between tabWrapper" >
    <div
      class="relative z-[100] w-full h-[80px]"
      :style="{
        backgroundImage: `url(${backgroundImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%',
      }"
    >
      <div class="absolute top-0 left-1/2 -translate-x-1/2 h-full px-[16px] flex items-center justify-between tabWrapper">
        <div class="flex flex-col items-center cursor-pointer relative" @click="onHomeClick('home')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'home' ? 'home_active.png' : 'home.png')" alt="">
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{'text-[#FFBF00]': activeTab === 'home'}">项目首页</div>
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'home' ? 'home_active.png' : 'home.png')" alt="" />
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'home' }">项目首页</div>
          </div>
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'home'">
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'home'" />
        </div>
        <div class="flex flex-col items-center ml-[78px] cursor-pointer relative" @click="onHomeClick('xietong')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'xietong' ? 'xietong_active.png' : 'xietong.png')" alt="">
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{'text-[#FFBF00]': activeTab === 'xietong'}">协同平台</div>
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'xietong' ? 'xietong_active.png' : 'xietong.png')" alt="" />
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'xietong' }">协同平台</div>
          </div>
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'xietong'">
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'xietong'" />
        </div>

        <div class="flex flex-col items-center ml-[78px] cursor-pointer relative" @click="onHomeClick('zhihui')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'zhihui' ? 'zhihui_active.png' : 'zhihui.png')" alt="">
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{'text-[#FFBF00]': activeTab === 'zhihui'}">智慧工地</div>
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'zhihui' ? 'zhihui_active.png' : 'zhihui.png')" alt="" />
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'zhihui' }">智慧工地</div>
          </div>
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'zhihui'">
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'zhihui'" />
        </div>
      </div>
      <div class="absolute top-0 right-0">
        <div class="flex items-center h-[80px] mr-[20px]">
          <i class="el-icon-full-screen cursor-pointer text-[#00FFFF] text-[24px]" @click="handleFullscreen" :title="$fullscreen.isFullscreen ? '退出全屏' : '全屏'"></i>
          <img class="w-[20px] h-[20px] ml-[8px]" :src="getImageUrl('time.png')" alt="">
          <el-select v-model="projectSelected" placeholder="请选择" class="mr-[24px]">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <i
            class="el-icon-full-screen cursor-pointer text-[#00FFFF] text-[24px]"
            @click="handleFullscreen"
            :title="$fullscreen.isFullscreen ? '退出全屏' : '全屏'"
          ></i>
          <img class="w-[20px] h-[20px] ml-[8px]" :src="getImageUrl('time.png')" alt="" />
          <div class="text-[24px] text-[#FFBF00] ml-[8px]">{{ currentTime }}</div>
          <div class="text-[16px] text-[#C8C8C8] ml-[20px]">{{ currentDate }}</div>
        </div>
@@ -51,20 +61,9 @@
</template>

<script>

  export default {
    name: "AppHeader",
    components: {
    },
    data() {
      return {
        activeTab: 'home',
        currentTime: '',
        currentDate: '',
        timer: null,
        backgroundImage: new URL('@/assets/images/backgrounds/logo.png', import.meta.url).href
      }
    },
    components: {},
    props: {
      selectedId: {
        type: String,
@@ -75,35 +74,20 @@
        default: () => [],
      },
    },
    methods: {
      handleFullscreen() {
        if (this.$fullscreen.isFullscreen) {
          this.$fullscreen.exit()
        } else {
          this.$fullscreen.request()
        }
      },
      getImageUrl(name) {
        return new URL(`../assets/images/backgrounds/${name}`, import.meta.url).href
      },
      onHomeClick(tab) {
        this.activeTab = tab;
        this.$emit("onHomeClick", tab);
      },
      updateTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        this.currentTime = `${hours}:${minutes}:${seconds}`;

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
        const weekDay = weekDays[now.getDay()];
        this.currentDate = `${year}.${month}.${day} 星期${weekDay}`;
      }
    data() {
      return {
        projectSelected: "",
        options: [
          { value: "project1", label: "项目1" },
          { value: "project2", label: "项目2" },
          { value: "project3", label: "项目3" },
        ],
        activeTab: "home",
        currentTime: "",
        currentDate: "",
        timer: null,
        backgroundImage: new URL("@/assets/images/backgrounds/logo.png", import.meta.url).href,
      };
    },
    mounted() {
      this.updateTime();
@@ -113,11 +97,66 @@
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
    },
    methods: {
      handleFullscreen() {
        if (this.$fullscreen.isFullscreen) {
          this.$fullscreen.exit();
        } else {
          this.$fullscreen.request();
        }
      },
      getImageUrl(name) {
        return new URL(`../assets/images/backgrounds/${name}`, import.meta.url).href;
      },
      onHomeClick(tab) {
        this.activeTab = tab;
        this.$emit("onHomeClick", tab);
      },
      updateTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, "0");
        const minutes = String(now.getMinutes()).padStart(2, "0");
        const seconds = String(now.getSeconds()).padStart(2, "0");
        this.currentTime = `${hours}:${minutes}:${seconds}`;

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, "0");
        const day = String(now.getDate()).padStart(2, "0");
        const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
        const weekDay = weekDays[now.getDay()];
        this.currentDate = `${year}.${month}.${day} 星期${weekDay}`;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .tabWrapper {
    margin-left: 150px;
  }
  </style>
  ::v-deep(.el-select) {
    width: 160px;
    height: 28px;
    background: rgba(33,72,115,0.9);
    border-radius: 2px;
    .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: #ffffff;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
      .el-input__suffix {
        align-items: center;
        display: flex;
      }
    }
  }
</style>

 src/views/EquipmentView.vue

@@ -1,692 +1,753 @@
<template>
<div class="equipment-container">
 <div class="top-nav w-full mb-[1vh]" :style="{
          backgroundImage: `url(${titleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }">
 </div>
 <div class="bottom-nav">
  <div class="top-section mb-[20px]">
  <div class="equipment-container">
    <div
      class="top-nav w-full mb-[1vh]"
      :style="{
        backgroundImage: `url(${titleImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%',
      }"
    >
    </div>
    <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">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>

   <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>

  <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>
   <div class="equipment-status" :style="sectionStyle">
    <div class="w-full h-[30px]" :style="{
            backgroundImage: `url(${bgImage})`,
      <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="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-[16px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
        <div class="text-[24px] text-[#FFD500]">{{item.value}}</div>
       </div>
            backgroundSize: '100% 100%',
          }"
        >
        </div>
        <div class="equipment-status" :style="sectionStyle">
          <el-select v-model="equipmentSelected" placeholder="请选择">
            <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>
        </div>
      </div>
     </template>
    </div>
    <div class="control-buttons">
     <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 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>
   </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">5°C</span>
      <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">5°C</span>
              </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>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">22.9%</span>
              </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>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">10 μg/m³</span>
              </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>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">13 μg/m³</span>
              </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>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">3级</span>
              </div>
            </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>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">北风</span>
              </div>
            </div>
          </div>
        </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>
      <div class="envvalue" :style="enviorStyle">
        <span class="envvalue-text">22.9%</span>
      </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>
      <div class="envvalue" :style="enviorStyle">
        <span class="envvalue-text">10 μg/m³</span>
      </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>
      <div class="envvalue" :style="enviorStyle">
        <span class="envvalue-text">13 μg/m³</span>
      </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>
      <div class="envvalue" :style="enviorStyle">
        <span class="envvalue-text">3级</span>
      </div>
     </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>
      <div class="envvalue" :style="enviorStyle">
        <span class="envvalue-text">北风</span>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
</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',
       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: 81.5,
          name: '',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 18.5,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
        ],
       },

      ],
     }
  import V2Echarts from "@/components/V2Echarts.vue";
  export default {
    name: "EquipmentView",
    components: {
      V2Echarts,
    },
    {
     id: 'lixianChartBox',
     name: '总离线',
     value: 5,
     percentage: 33,
     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,
    data() {
      return {
        equipmentSelected: "",
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          labelLine: {
           show: false,
          {
            value: "选项2",
            label: "双皮奶",
          },
          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,
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          labelLine: {
           show: false,
          {
            value: "选项4",
            label: "龙须面",
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
          value: 33,
          name: '',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 77,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
       },

      ],
     }
        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",
                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: 81.5,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 18.5,
                      name: "",
                      itemStyle: {
                        color: "transparent",
                      },
                    },
                  ],
                },
              ],
            },
          },
          {
            id: "lixianChartBox",
            name: "总离线",
            value: 5,
            percentage: 33,
            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: 33,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 77,
                      name: "",
                      itemStyle: {
                        color: "transparent",
                      },
                    },
                  ],
                },
              ],
            },
          },
          {
            id: "baojingChartBox",
            name: "总报警",
            value: 0,
            percentage: 20,
            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: 20,
                      name: "",
                      itemStyle: {
                        color: "#00FFFF",
                      },
                    },
                    {
                      value: 80,
                      name: "",
                      itemStyle: {
                        color: "transparent",
                      },
                    },
                  ],
                },
              ],
            },
          },
        ],
      };
    },
    {
     id: 'baojingChartBox',
     name: '总报警',
     value: 0,
     percentage: 20,
     options: {
      tooltip: {
       trigger: 'item',
       show: false
    computed: {
      sectionStyle() {
        return {
          backgroundImage: `url(${this.backgroundImage})`,
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "100% 100%",
        };
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
       show: false,
      enviorStyle() {
        return {
          backgroundImage: `url(${this.enviorImage})`,
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "100% 100%",
        };
      },
      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'
          }
         },
        ],
       },
      ],
     }
    }
   ]
  }
 },
 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()
   }
  },
 }
}
    },
    methods: {
      handleControlBtnClick(tab) {
        this.currentTab = tab;
      },
      handleResize() {
        if (this.myChart) {
          this.myChart.resize();
        }
      },
    },
  };
</script>

<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;
}
  .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;
  }

.top-section {
 width: 100%;
 height: calc(100% - 80%);
}
  .top-section {
    width: 100%;
    height: calc(100% - 80%);
  }

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

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

.stats-grid {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 20px 10px;
}
  .stats-grid {
    width: 100%;
    height: 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;
}
  .stat-info {
    display: flex;
    flex-direction: row;
    align-items: left;
  }

.env-info {
 
 width: calc( 100% - 88px);
 height: 100%;
}
  .env-info {
    width: calc(100% - 88px);
    height: 100%;
  }

.satalabel {
 font-size: 16px;
 color: #fff;
}
  .satalabel {
    font-size: 16px;
    color: #fff;
  }

.label {
 font-size: 12px;
 color: #fff;
}
  .label {
    font-size: 12px;
    color: #fff;
  }

.envlabel {
 font-size: 16px;
 color: #C8C8C8;
 display: flex;
 align-items: center;
 justify-content: center;
}
  .envlabel {
    font-size: 16px;
    color: #c8c8c8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.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%);
 }
}
  .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%);
    }
  }

.equipment-status {
 padding: 10px 10px;
 height: calc(100% - 5vh);
}
  .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;
        }
      }
    }
  }

.status-title {
 font-size: 16px;
 margin-bottom: 20px;
}
  .status-title {
    font-size: 16px;
    margin-bottom: 20px;
  }

.status-circles {
 display: flex;
 justify-content: space-around;
 margin: 15px 0;
}
  .status-circles {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
  }

.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;
}
  .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;
  }

.percentage {
 font-size: 12px;
 color: #00ffff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
  .percentage {
    font-size: 12px;
    color: #00ffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.environment-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 height: calc(100% - 5vh);
}
  .environment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: calc(100% - 5vh);
  }

.control-buttons {
 display: flex;
 gap: 10px;
 justify-content: center;
}
  .control-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

.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;
}
  .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;
  }

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

.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;
}
  .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;
  }

  .bar {
    width: 100%;
  }

  .progress {
    background: rgba(216, 216, 216, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
  }

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

.progress {
 background: rgba(216, 216, 216, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 overflow: hidden;
}
  .block {
    flex: 1;
    height: 100%;
    background: rgba(216, 216, 216, 0.1);
  }

.progress-blocks {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 gap: 4px;
 padding: 2px 4px;
}
  .block.active {
    background: linear-gradient(180deg, #ffd500 0%, #ff9b00 100%);
  }

.block {
 flex: 1;
 height: 100%;
 background: rgba(216, 216, 216, 0.1);
}
  .progress-inner {
    display: none;
  }

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

.progress-inner {
 display: none;
}
</style>