From 63e1df822c19f8b6c5807e148b6919b8ae63f268 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com>
Date: Mon, 18 Dec 2023 08:57:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/overview/alarm.png          | Bin 0 -> 4395 bytes
 .../overview/{下月.png => nextMonth.png}      | Bin
 .../overview/{上月.png => prevMonth.png}      | Bin
 ...{回到本月.png => returningToThisMonth.png} | Bin
 src/assets/images/overview/runTime.png        | Bin 0 -> 2597 bytes
 .../{本月-未选中.png => thisMonth.png}        | Bin
 .../{本月-选中.png => thisMonthAc.png}        | Bin
 src/components/calendar/index.vue             | 185 ++++++++++---
 src/views/energyMonitoring/index.vue          |   9 +-
 src/views/overview/index.vue                  |   1 +
 src/views/screen/index.vue                    | 260 +++++++++++++++++-
 11 files changed, 405 insertions(+), 50 deletions(-)
 create mode 100644 src/assets/images/overview/alarm.png
 rename src/assets/images/overview/{下月.png => nextMonth.png} (100%)
 rename src/assets/images/overview/{上月.png => prevMonth.png} (100%)
 rename src/assets/images/overview/{回到本月.png => returningToThisMonth.png} (100%)
 create mode 100644 src/assets/images/overview/runTime.png
 rename src/assets/images/overview/{本月-未选中.png => thisMonth.png} (100%)
 rename src/assets/images/overview/{本月-选中.png => thisMonthAc.png} (100%)

diff --git a/src/assets/images/overview/alarm.png b/src/assets/images/overview/alarm.png
new file mode 100644
index 0000000000000000000000000000000000000000..12c5ebf4f47c177ac9d5ac13b2349426aec4df69
GIT binary patch
literal 4395
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/overview/下月.png b/src/assets/images/overview/nextMonth.png
similarity index 100%
rename from src/assets/images/overview/下月.png
rename to src/assets/images/overview/nextMonth.png
diff --git a/src/assets/images/overview/上月.png b/src/assets/images/overview/prevMonth.png
similarity index 100%
rename from src/assets/images/overview/上月.png
rename to src/assets/images/overview/prevMonth.png
diff --git a/src/assets/images/overview/回到本月.png b/src/assets/images/overview/returningToThisMonth.png
similarity index 100%
rename from src/assets/images/overview/回到本月.png
rename to src/assets/images/overview/returningToThisMonth.png
diff --git a/src/assets/images/overview/runTime.png b/src/assets/images/overview/runTime.png
new file mode 100644
index 0000000000000000000000000000000000000000..087799f49b084f514076d8cf6664e3de030aa353
GIT binary patch
literal 2597
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
CG}Md$

literal 0
HcmV?d00001

diff --git a/src/assets/images/overview/本月-未选中.png b/src/assets/images/overview/thisMonth.png
similarity index 100%
rename from src/assets/images/overview/本月-未选中.png
rename to src/assets/images/overview/thisMonth.png
diff --git a/src/assets/images/overview/本月-选中.png b/src/assets/images/overview/thisMonthAc.png
similarity index 100%
rename from src/assets/images/overview/本月-选中.png
rename to src/assets/images/overview/thisMonthAc.png
diff --git a/src/components/calendar/index.vue b/src/components/calendar/index.vue
index f937b7b..e9717f7 100644
--- a/src/components/calendar/index.vue
+++ b/src/components/calendar/index.vue
@@ -1,64 +1,173 @@
 <script setup>
-import  {ref} from 'vue'
+import { ref } from "vue";
 // dom
-const calendar = ref()
-const calenderValue = ref(new Date())
+const calendar = ref();
+const calenderValue = ref(new Date());
 // 时间参数
-const calendarDate = ref()
-const toggleClick = () =>{
-
-}
+const calendarDate = ref();
+const toggleClick = () => {};
 const selectDate = (val) => {
-  if (!calendar.value) return
-  calendar.value.selectDate(val)
-}
+  if (!calendar.value) return;
+  calendar.value.selectDate(val);
+};
 </script>
 
 <template>
-  <el-calendar ref="calendar"  v-model="calendarDate">
-    <template #header="{date}">
-<!--      <div class="calender-header">-->
-        <p>
-<!--          <span @click="selectDate('prev-year')">上一年</span>-->
-          <span @click="selectDate('prev-month')">上个月</span>
-        </p>
-        <span @click="toggleClick">{{date}}</span>
-        <p>
-          <span @click="selectDate('next-month')">下个月</span>
-<!--          <span @click="selectDate('next-year')">下一年</span>-->
-        </p>
-
-<!--      </div>-->
-
+  <el-calendar ref="calendar" v-model="calendarDate">
+    <template #header="{ date }">
+      <div>
+        <img
+          @click="selectDate('prev-month')"
+          src="../../assets/images/overview/prevMonth.png"
+          style="
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            border: 0.5px dashed rgba(255, 255, 255, 0.3);
+          "
+        />
+        <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){
-  font-size: .7rem;
+:deep.el-calendar {
+  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;
-  padding: 0 !important;
-  height: 30% !important;
+  width: 54px !important;
+  padding: 3px !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){
-  padding: 0.5rem;
+:deep(.el-calendar-table td) {
+  border: none;
 }
-</style>
\ No newline at end of file
+: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>
diff --git a/src/views/energyMonitoring/index.vue b/src/views/energyMonitoring/index.vue
index 06e74b2..c551a49 100644
--- a/src/views/energyMonitoring/index.vue
+++ b/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 =
-    "/src/assets/images/energyMonitoring/loadClassification.png";
+  var img = "/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,
-              length2: 50,
+              length: 60,
+              length: 60,
+              length2: 60,
               show: true,
               color: "#00ffff",
             },
diff --git a/src/views/overview/index.vue b/src/views/overview/index.vue
index 18dfb6f..9bdf13c 100644
--- a/src/views/overview/index.vue
+++ b/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轴（竖直线）
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index c836184..ebe4212 100644
--- a/src/views/screen/index.vue
+++ b/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);
+}
 
-</style>
\ No newline at end of file
+::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>