代码提交

src/components/calendar/index.vue

@@ -1,64 +1,173 @@
 <script setup>
-import  {ref} from 'vue'
+import { ref } from "vue";
 // dom
-const calendar = ref()
+const calendar = ref();
-const calenderValue = ref(new Date())
+const calenderValue = ref(new Date());
 // 时间参数
-const calendarDate = ref()
+const calendarDate = ref();
-const toggleClick = () =>{
+const toggleClick = () => {};
-
-}
 const selectDate = (val) => {
-  if (!calendar.value) return
+  if (!calendar.value) return;
-  calendar.value.selectDate(val)
+  calendar.value.selectDate(val);
-}
+};
 </script>
 
 <template>
   <el-calendar ref="calendar" v-model="calendarDate">
-    <template #header="{date}">
+    <template #header="{ date }">
-<!--      <div class="calender-header">-->
+      <div>
-        <p>
+        <img
-<!--          <span @click="selectDate('prev-year')">上一年</span>-->
+          @click="selectDate('prev-month')"
-          <span @click="selectDate('prev-month')">上个月</span>
+          src="../../assets/images/overview/prevMonth.png"
-        </p>
+          style="
-        <span @click="toggleClick">{{date}}</span>
+            width: 16px;
-        <p>
+            height: 16px;
-          <span @click="selectDate('next-month')">下个月</span>
+            cursor: pointer;
-<!--          <span @click="selectDate('next-year')">下一年</span>-->
+            border: 0.5px dashed rgba(255, 255, 255, 0.3);
-        </p>
+          "
-
+        />
-<!--      </div>-->
+        <span @click="toggleClick" style="font-size: 13px">{{ date }}</span>
-
+        <img
+          @click="selectDate('next-month')"
+          src="../../assets/images/overview/nextMonth.png"
+          style="
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            border: 0.5px dashed rgba(255, 255, 255, 0.3);
+          "
+        />
+      </div>
+      <div class="returningToThisMonth" @click="selectDate('today')"></div>
     </template>
     <template #date-cell="{ data }">
-      <p class="day">{{ data.day.split('-').slice(1)[1] }}</p>
+      <p class="day">{{ data.day.split("-").slice(1)[1] }}</p>
+      <p class="value">{{ data.day.split("-").slice(1)[1] }}</p>
     </template>
   </el-calendar>
 </template>
 
 <style scoped lang="less">
-:deep(.el-calendar){
+:deep.el-calendar {
-  font-size: .7rem;
+  font-size: 0.7rem;
   width: 100% !important;
   height: 100% !important;
   background-color: transparent !important;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
-:deep(.el-calendar__header){
+:deep(.el-calendar__header) {
   align-items: center;
-  padding: 0.5rem;
+  padding: 0 0.3rem;
+  border-bottom: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
 }
-:deep(.el-calendar-day){
+:deep(.el-calendar__header > div:nth-child(-n + 1)) {
+  // flex-grow: 1;
+  // text-align: center;
+  display: flex;
+  justify-content: space-evenly;
+  position: relative;
+  left: 13%;
+  width: 56%;
+}
+:deep(.el-calendar-day) {
   //display: none;
-  width: 52px !important;
+  width: 54px !important;
-  padding: 0 !important;
+  padding: 3px !important;
-  height: 30% !important;
+  height: 25px !important;
+  color: #b1fffa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  // border:0.01px solid rgba(177, 255, 250, 0.2)
   //max-height:  1.8rem!important;
+  @media only screen and (min-height: 1000px) {
+    height: 30px !important;
+  }
 }
-:deep(.el-calendar-table thead th){
+:deep(.el-calendar-day .day) {
+  font-size: 12px;
+  height: 60%;
+}
+:deep(.el-calendar-day .value) {
+  color: rgba(91, 250, 241, 1);
+  height: 40%;
+}
+:deep(.el-calendar-table td) {
+  background: url(../../assets/images/overview/thisMonth.png) no-repeat;
+  background-size: 100% 100%;
+}
+:deep(.el-calendar-table thead th) {
   padding: 0;
+  color: #ddfffd;
 }
-:deep(.el-calendar__body){
+:deep(.el-calendar-table td) {
-  padding: 0.5rem;
+  border: none;
+}
+:deep(.el-calendar-table tr td:first-child) {
+  border: none;
+}
+:deep(.el-calendar-table tr:first-child td) {
+  border: none;
+}
+//鼠标悬停
+:deep(.el-calendar-table :hover) {
+  background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
+  background-size: 100% 100%;
+}
+:deep(.el-calendar__body) {
+  padding: 0 0.5rem;
+  height: 79% !important;
+}
+//修改不是本月的字体颜色
+:deep(.el-calendar-table__row) {
+  .prev,
+  .next {
+    // 修改非本月
+    .el-calendar-day {
+      .day {
+        font-size: 12px;
+        color: rgba(177, 255, 250, 0.4);
+      }
+      .value {
+        color: rgba(177, 255, 250, 0.4);
+      }
+    }
+  }
+}
+//修改选中后的颜色
+:deep(.el-calendar-table td.is-selected) {
+  // .el-calendar-day {
+  // p {
+  // 选中日期颜色
+  color: rgba(255, 251, 222, 1);
+  // }
+  // }
+  background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
+  background-size: 100% 100%;
+  border: 0.5px dashed rgba(255, 255, 255, 0.3) !important;
+  .el-calendar-day {
+    .day {
+      color: rgba(255, 251, 222, 1);
+    }
+    .value {
+      color: rgba(1, 246, 139, 1);
+    }
+  }
+}
+.returningToThisMonth {
+  width: 67px;
+  height: 21px;
+  background: url(../../assets/images/overview/returningToThisMonth.png)
+    no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  left: 9%;
+  cursor: pointer;
 }
 </style>

src/views/energyMonitoring/index.vue

@@ -272,6 +272,7 @@ function getDailyElectricityConsumption() {
       name: "单位:kW/h",
       nameTextStyle: {
         color: "#DDFFFD",
+        padding:[0,5,0,0]
       },
       //   minInterval: 1,
       // y轴（竖直线）
@@ -802,8 +803,7 @@ function getLoadClassification() {
       }
     );
   }
-  var img =
+  var img = "/src/assets/images/energyMonitoring/loadClassification.png";
-    "/src/assets/images/energyMonitoring/loadClassification.png";
   let myChart = echarts.init(document.getElementById("loadClassification"));
   let option = {
     graphic: {
@@ -927,8 +927,9 @@ function getLoadClassification() {
               },
             },
             labelLine: {
-              length: 30,
+              length: 60,
-              length2: 50,
+              length: 60,
+              length2: 60,
               show: true,
               color: "#00ffff",
             },

src/views/overview/index.vue

@@ -406,6 +406,7 @@ function getCarbonEmission() {
       name: "单位:kW/h",
       nameTextStyle: {
         color: "#DDFFFD",
+        padding:[0,5,0,0]
       },
       //   minInterval: 1,
       // y轴（竖直线）

src/views/screen/index.vue

@@ -1,30 +1,274 @@
 <script setup>
+import { ref, onMounted } from "vue";
 
+const faultAlarmList = ref([
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED1",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED2",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED3",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+  {
+    location: "1楼中庭",
+    time: "2023-11-28  16:58:02",
+    name: "LED4",
+  },
+]);
+const runTimeList = ref([
+  {
+    name: "西大厅1",
+    value: false,
+  },
+  {
+    name: "西大厅2",
+    value: true,
+  },
+  {
+    name: "西大厅3",
+    value: true,
+  },
+  {
+    name: "西大厅4",
+    value: true,
+  },
+
+]);
 </script>
 
 <template>
   <div class="page m100">
     <div class="page-left-box">
-      <div class="title ">
+      <div class="title">
         <span>故障报警</span>
-
       </div>
-      <div class="page-big-box margin10">
+      <div
-
+        class="page-big-box margin10"
+        style="display: flex; align-items: center"
+      >
+        <div class="alarm">
+          <div
+            class="alarmList"
+            v-for="(item, index) in faultAlarmList"
+            :key="index"
+          >
+            <span class="name">{{ item.name }}</span>
+            <div class="content">
+              <span class="location">地点：{{ item.location }}</span>
+              <span class="time">时间：{{ item.time }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="page-right-box">
-      <div class="title ">
+      <div class="title">
         <span>运行状态</span>
-
       </div>
       <div class="page-big-box margin10">
-
+        <div class="runningState">
+          <div class="tableTitle">
+            <span>区域名称</span>
+            <span>状态</span>
+          </div>
+          <div class="tableContent">
+            <div
+              class="tableBoby"
+              v-for="(item, index) in runTimeList"
+              :key="index"
+            >
+              <span>{{ item.name }}</span>
+              <el-switch v-model="item.value" style="left: 8px" />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+.alarm {
+  width: 100%;
+  height: 94%;
+  padding: 0 3%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  overflow: auto;
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  .alarmList {
+    width: 93.2%;
+    height: 6.2%;
+    margin-top: 2.6%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: url("../../assets/images/overview/alarm.png") no-repeat;
+    background-size: 100% 100%;
+    padding: 0 2%;
+    .content {
+      display: flex;
+      flex-direction: column;
+      .location {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 1);
+      }
+      .time {
+        font-size: 12px;
+        color: rgba(218, 218, 218, 1);
+      }
+    }
+    .name {
+      font-size: 22px;
+      font-weight: 700;
+      color: rgba(91, 250, 241, 1);
+      position: relative;
+      margin-left: 14%;
+    }
+  }
+}
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.runningState {
+  height: 98%;
+  width: 100%;
+  padding: 3% 3%;
+  box-sizing: border-box;
+  .tableTitle {
+    background: url("../../assets/images/overview/runTime.png") no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    height: 4.5%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 16px;
+  }
+  .tableContent {
+    width: 100%;
+    height: calc(100% - 4.5%);
+    overflow: auto;
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    .tableBoby {
+      background: url("../../assets/images/overview/runTime.png") no-repeat;
+      background-size: 100% 100%;
+      width: 100%;
+      height: 3.5%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      font-size: 14px;
+      margin-top: 2%;
+    }
+  }
+  ::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+}
+::v-deep .el-switch__core {
+  border-radius: 0;
+  background: transparent;
+  border: 1px solid rgba(223, 94, 94, 1);
+}
 
+::v-deep .el-switch.is-checked .el-switch__core {
+  background: transparent;
+  border: 1px solid rgba(80, 233, 83, 1);
+}
+::v-deep .el-switch__core .el-switch__action {
+  border-radius: 0;
+  height: 13px;
+  width: 13px;
+  background: rgba(223, 94, 94, 1);
+}
+::v-deep .el-switch.is-checked .el-switch__action {
+  border-radius: 0;
+  height: 13px;
+  width: 13px;
+  background: rgba(80, 233, 83, 1);
+}
 </style>