add:电力系统

src/api/tyler/screen.js

@@ -70,4 +70,13 @@ export function perOnlineSituation(query) {
     method: "get",
     params: query,
   });
+}
+
+//电力系统大屏
+export function eleAll(query) {
+  return request({
+    url: "/business/screen/ele/all",
+    method: "get",
+    params: query,
+  });
 }
\ No newline at end of file

src/views/Screen/items/dlxt.vue

 <template>
   <div>
-    电力系统
+    <div class="home">
+      <div id="dlxt">
+        <div class="dlxt-change">
+          <span @click="changeBtn(1)" :class="showBtn == 1 ? 'active' : ''">XX变电站</span>
+          <span @click="changeBtn(2)" :class="showBtn == 2 ? 'active' : ''">XX变电站</span>
+        </div>
+        <div class="dlxt-bg dlxt-bg1">
+          <div class="dlxt-val dlxt-val1" :style="{ color: getColor('1') }">●{{getLabel('1')}}</div>
+          <div class="dlxt-val dlxt-val2" :style="{ color: getColor('2') }">●{{getLabel('2')}}</div>
+          <div class="dlxt-val dlxt-val3" :style="{ color: getColor('3') }">●{{getLabel('3')}}</div>
+          <div class="dlxt-val dlxt-val4" :style="{ color: getColor('1') }">●{{getLabel('1')}}</div>
+          <div class="dlxt-val dlxt-val5" :style="{ color: getColor('2') }">●{{getLabel('2')}}</div>
+          <div class="dlxt-val dlxt-val6" :style="{ color: getColor('3') }">●{{getLabel('3')}}</div>
+          <div v-for="(item,index) in eleName" class="dlxt-tit" :class="`dlxt-tit${index+1}`"><p>{{ item }}</p></div>
+        
+          <div v-for="i in 6" class="dlxt-list" :class="`dlxt-list${i}`">
+            <p><span>{{ 'la' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'A' }}</span></p>
+            <p><span>{{ 'lc' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'A' }}</span></p>
+            <p><span>{{ 'P' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'kW' }}</span></p>
+            <p><span>{{ 'Q' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'kVar' }}</span></p>
+            <p><span>{{ 'COS' }}</span>:<span>{{ '6.00' }}</span><span>{{ '' }}</span></p>
+            <p><span>{{ 'Ep' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'kWh' }}</span></p>
+            <p><span>{{ 'Eq' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'kVarh' }}</span></p>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+
   </div>
-</template>
+</template>
\ No newline at end of file
+<script>
+import {
+  eleAll,
+} from "@/api/tyler/screen";
+export default {
+  name: "dlxt",
+  dicts: ['power_val'],
+  data() {
+    return {
+      showBtn:1,
+      eleName:['35KV进线柜','35KVPT柜','35KV主变出线柜','13AH金采柜','14AH金沙柜','15AH金沙柜'],
+      colors: ['#20F09F', '#00FCFF', '#00C6FF'],
+      eleAllData:[], 
+    };
+  },
+  created() {
+    this.eleAllList();
+
+  },
+  methods: {
+    changeBtn(val) {
+      this.showBtn = val;
+      if(val==1){
+        this.eleName = ['35KV进线柜','35KVPT柜','35KV主变出线柜','13AH金采柜','14AH金沙柜','15AH金沙柜']
+      }else if(val == 2){
+        this.eleName = ['35KV进线柜2','35KVPT柜2','35KV主变出线柜','13AH金采柜','14AH金沙柜','15AH金沙柜']
+      }
+    },
+    getLabel(value) {
+      const item = this.dict.type.power_val.find(item => item.value === value);
+      return item ? item.label : '暂无数据';
+    },
+    getColor(value) {
+      const index = this.dict.type.power_val.findIndex(item => item.value === value);
+      return index !== -1 && this.colors[index] ? this.colors[index] : '#fff'; 
+    },
+    //获取
+    eleAllList(){
+      eleAll().then(res => {
+        this.eleAllData = res.data
+        console.log(res.data,'res.data')
+      })
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+p{margin: 0;padding: 0;}
+.home {
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
+  background-size: 100%;
+  padding-top: 160px;
+  overflow: hidden;
+  pointer-events: auto;
+  #dlxt{
+    .dlxt-change{
+      width: 100%;
+      height: 36px;
+      display: flex;
+      justify-content: center;
+      color:#fff;
+      align-items: center;
+      margin-bottom: 32px;
+      span{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 124px;
+        height: 36px;
+        font-size: 20px;
+        font-weight: bold;
+        background-color: rgba(10, 30, 54,.5);
+        border: 1px solid #00FCFF;
+        cursor: pointer;
+        &.active{
+          background: linear-gradient(0deg, #1679B6 0%, #00DEE9 100%);
+          border: 1px solid #00FCFF;
+        }
+        
+      }
+    }
+    .dlxt-bg{
+      width: 1830px;
+      height: 792px;
+      margin: 0 auto;
+      background: url("~@/assets/images/screen/dlxt/bg2.png") no-repeat center;
+      background-size: 100%;
+      color:#fff;
+      position: relative;
+      .dlxt-val{
+        position: absolute;
+        top:100px;
+      }
+      .dlxt-tit{
+        position: absolute;
+        top:270px;
+        width: 230px;
+        height: 38px;
+        background: url("~@/assets/images/screen/dlxt/title.png") no-repeat center;
+        background-size: 100%;
+        p{
+          font-weight: bold;
+          font-size: 20px;
+          color: #FFFFFF;
+          line-height: 38px;
+          text-align: center;
+          background: linear-gradient(180deg, #FFFFFF 0%, #00CBFF 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+      .dlxt-list{
+        width: 180px;
+        border: 2px solid #00CCFF;
+        padding: 13px 20px;
+        box-sizing: border-box;
+        position: absolute;
+        top:340px;
+        display: flex;
+        flex-direction: column;
+        font-weight: 400;
+        font-size: 18px;
+        color: #11E0FF;
+        line-height: 30px;
+      }
+    }
+    .dlxt-bg1{
+      .dlxt-val1{
+        left:190px;
+      }
+      .dlxt-val2{
+        left:490px;
+      }
+      .dlxt-val3{
+        left:790px;
+      }
+      .dlxt-val4{
+        left:970px;
+      }
+      .dlxt-val5{
+        left:1270px;
+      }
+      .dlxt-val6{
+        left:1570px;
+      }
+
+      .dlxt-tit1{
+        left: 6px;
+      }
+      .dlxt-tit2{
+        left: 300px;
+      }
+      .dlxt-tit3{
+        left: 600px;
+      }
+      .dlxt-tit4{
+        left: 1000px;
+      }
+      .dlxt-tit5{
+        left: 1300px;
+      }
+      .dlxt-tit6{
+        left: 1600px;
+      }
+      .dlxt-list1{
+        left: 30px;
+      }
+      .dlxt-list2{
+        left: 330px;
+      }
+      .dlxt-list3{
+        left: 630px;
+      }
+      .dlxt-list4{
+        left: 1030px;
+      }
+      .dlxt-list5{
+        left: 1330px;
+      }
+      .dlxt-list6{
+        left: 1630px;
+      }
+
+
+    }
+  }
+
+}
+
+</style>