feat: 设备状态UI修改

Gary Gu

6 days ago d3290cacdae24c00244569de87aa5d7f8cd0c774

feat: 设备状态UI修改

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

@@ -121,3 +121,27 @@
    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/views/EquipmentView.vue

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

  <div class="middle-section mb-[20px]">
   <div class="w-full h-[4vh] mb-[1vh]" :style="{
        <div
          class="w-full h-[4vh] mb-[1vh]"
          :style="{
          backgroundImage: `url(${middleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }">
            backgroundSize: '100% 100%',
          }"
        >
   </div>
   <div class="equipment-status" :style="sectionStyle">
    <div class="w-full h-[30px]" :style="{
          <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]">升降机监控</div>
              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">
@@ -66,18 +77,14 @@
      </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-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 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]">
@@ -91,16 +98,19 @@
  </div>

  <div class="bottom-section">
   <div class="w-full h-[4vh] mb-[1vh]" :style="{
        <div
          class="w-full h-[4vh] mb-[1vh]"
          :style="{
          backgroundImage: `url(${bottomImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }">
            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="">
            <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">
@@ -109,7 +119,7 @@
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqishidu.png" alt="">
            <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">
@@ -118,7 +128,7 @@
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM2.png" alt="">
            <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">
@@ -127,7 +137,7 @@
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM10.png" alt="">
            <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">
@@ -136,7 +146,7 @@
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengli.png" alt="">
            <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">
@@ -145,7 +155,7 @@
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengxiang.png" alt="">
            <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">
@@ -160,50 +170,69 @@
</template>

<script>
import V2Echarts from '@/components/V2Echarts.vue'
  import V2Echarts from "@/components/V2Echarts.vue";
export default {
 name: 'EquipmentView',
    name: "EquipmentView",
 components: {
  V2Echarts
      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,
        equipmentSelected: "",
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            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: '总在线',
        currentTab: "塔吊监控",
        circleItems: [
          {
            id: "zaixianChartBox",
            name: "总在线",
     value: 22,
     percentage: 81.5,
     options: {
      tooltip: {
       trigger: 'item',
       show: false
                trigger: "item",
                show: false,
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
                top: "5%",
                left: "center",
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
              series: [
                {
                  type: "pie",
                  radius: ["70%", "80%"],
                  center: ["50%", "50%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
@@ -217,21 +246,23 @@
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
         },
        },
        data: [{
                  data: [
                    {
         value: 100,
         name: '',
                      name: "",
         itemStyle: {
          color: '#234E84'
         }
        }, ],
                        color: "#234E84",
                      },
                    },
                  ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
                  type: "pie",
                  radius: ["70%", "100%"],
                  center: ["50%", "50%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
@@ -245,50 +276,51 @@
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
         },
        },
        data: [{
                  data: [
                    {
          value: 81.5,
          name: '',
                      name: "",
          itemStyle: {
           color: '#00FFFF'
          }
                        color: "#00FFFF",
                      },
         },
         {
          value: 18.5,
          name: '',
                      name: "",
          itemStyle: {
           color: 'transparent'
          }
                        color: "transparent",
                      },
         },
        ],
       },

      ],
     }
            },
    },
    {
     id: 'lixianChartBox',
     name: '总离线',
            id: "lixianChartBox",
            name: "总离线",
     value: 5,
     percentage: 33,
     options: {
      tooltip: {
       trigger: 'item',
       show: false
                trigger: "item",
                show: false,
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
                top: "5%",
                left: "center",
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
              series: [
                {
                  type: "pie",
                  radius: ["70%", "80%"],
                  center: ["50%", "50%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
@@ -302,21 +334,23 @@
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
         },
        },
        data: [{
                  data: [
                    {
         value: 100,
         name: '',
                      name: "",
         itemStyle: {
          color: '#234E84'
         }
        }, ],
                        color: "#234E84",
                      },
                    },
                  ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
                  type: "pie",
                  radius: ["70%", "100%"],
                  center: ["50%", "50%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
@@ -330,50 +364,51 @@
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
         },
        },
        data: [{
                  data: [
                    {
          value: 33,
          name: '',
                      name: "",
          itemStyle: {
           color: '#00FFFF'
          }
                        color: "#00FFFF",
                      },
         },
         {
          value: 77,
          name: '',
                      name: "",
          itemStyle: {
           color: 'transparent'
          }
                        color: "transparent",
                      },
         },
        ],
       },

      ],
     }
            },
    },
    {
     id: 'baojingChartBox',
     name: '总报警',
            id: "baojingChartBox",
            name: "总报警",
     value: 0,
     percentage: 20,
     options: {
      tooltip: {
       trigger: 'item',
       show: false
                trigger: "item",
                show: false,
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
                top: "5%",
                left: "center",
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
              series: [
                {
                  type: "pie",
                  radius: ["70%", "80%"],
                  center: ["50%", "50%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
@@ -387,21 +422,23 @@
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
         },
        },
        data: [{
                  data: [
                    {
         value: 100,
         name: '',
                      name: "",
         itemStyle: {
          color: '#234E84'
         }
        }, ],
                        color: "#234E84",
                      },
                    },
                  ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
                  type: "pie",
                  radius: ["70%", "100%"],
                  center: ["50%", "50%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
@@ -415,48 +452,49 @@
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                      shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
         },
        },
        data: [{
                  data: [
                    {
          value: 20,
          name: '',
                      name: "",
          itemStyle: {
           color: '#00FFFF'
          }
                        color: "#00FFFF",
                      },
         },
         {
          value: 80,
          name: '',
                      name: "",
          itemStyle: {
           color: 'transparent'
          }
                        color: "transparent",
                      },
         },
        ],
       },
      ],
     }
    }
   ]
  }
            },
          },
        ],
      };
 },
 computed: {
  sectionStyle() {
   return {
    backgroundImage: `url(${this.backgroundImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "100% 100%",
        };
  },
  enviorStyle() {
   return {
    backgroundImage: `url(${this.enviorImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  }
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "100% 100%",
        };
      },
 },
 methods: {
  handleControlBtnClick(tab) {
@@ -464,11 +502,11 @@
  },
  handleResize() {
   if (this.myChart) {
    this.myChart.resize()
          this.myChart.resize();
   }
  },
 }
}
    },
  };
</script>

<style scoped lang="scss">
@@ -523,7 +561,7 @@
 justify-content: space-between;
 padding: 20px 14px;
 height: 52px;
 background: linear-gradient(270deg, rgba(48, 104, 165, 0.1) 2%, #3068A5 100%);
    background: linear-gradient(270deg, rgba(48, 104, 165, 0.1) 2%, #3068a5 100%);
 border-radius: 2px;
}

@@ -542,7 +580,6 @@
}

.env-info {
 
 width: calc( 100% - 88px);
 height: 100%;
}
@@ -559,7 +596,7 @@

.envlabel {
 font-size: 16px;
 color: #C8C8C8;
    color: #c8c8c8;
 display: flex;
 align-items: center;
 justify-content: center;
@@ -584,6 +621,31 @@
.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 {
@@ -601,7 +663,7 @@
 width: 80px;
 height: 80px;
 border-radius: 50%;
 border: 4px solid #3068A5;
    border: 4px solid #3068a5;
 display: flex;
 flex-direction: column;
 align-items: center;
@@ -635,25 +697,23 @@
 background: rgba(112, 119, 140, 0.3);
 border-radius: 2px;
 border: 1px solid rgba(112, 124, 140, 0.6);
 color: #C8C8C8;
    color: #c8c8c8;
 cursor: pointer;
}

.control-btn.active {
 background: rgba(255, 191, 0, 0.2);
 border-radius: 2px;
 border: 1px solid #FFBF00;
    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%);
    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%;
@@ -683,10 +743,11 @@
}

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

.progress-inner {
 display: none;
}

</style>