综合姿态页面

src/views/index.vue

@@ -1,75 +1,16 @@
 <template>
   <div class="home">
-    <div class="box_home_left">
-      <div class="flex_home">
-        <HeadlineTag value="建筑概况"></HeadlineTag>
-        <div class="box_arch">
-          <div class="image_architecture">
-            <div class="tect_arch">
-              <svg-icon icon-class="architecture" className="arch_icon" />
-            </div>
-          </div>
-          <div class="right_content">
-            <div class="title_row">
-              <div class="survey_title">建筑面积:</div>
-              <div class="survey_num">20000<span>m²</span></div>
-            </div>
-            <div class="title_row">
-              <div class="survey_title">占地面积:</div>
-              <div class="survey_num">20000<span>m²</span></div>
-            </div>
-            <div class="title_row">
-              <div class="survey_title">建筑高度:</div>
-              <div class="survey_num">30<span>m</span></div>
-            </div>
-            <div class="title_row">
-              <div class="survey_title">建筑层数:</div>
-              <div class="survey_num">10</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="flex_home">
-        <HeadlineTag value="设备监控"></HeadlineTag>
-        <div class="box_arch space_between_in">
-          <div class="box_facility">1</div>
-          <div class="facility_border">
-            <div class="box_bg_facility center_in">
-              <svg class="energy_box_icon" aria-hidden="true">
-                <defs>
-                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
-                    <stop offset="4%" stop-color="rgba(184, 225, 239, 1)" />
-                    <stop offset="100%" stop-color="#ffffff" />
-                  </linearGradient>
-                </defs>
-                <use xlink:href="#icon-emcs" fill="url('#myGradient')" />
-              </svg>
-            </div>
-          </div>
-          <div class="box_facility">2</div>
-        </div>
-      </div>
-      <div class="flex_home">
-        <HeadlineTag value="电能耗(Kw/h)"></HeadlineTag>
-        <div class="loader-container">
-          <div class="loader loader1"><span></span></div>
-          <div class="loader loader2"><span></span></div>
-        </div>
-      </div>
-      <div class="flex_home">
-        <HeadlineTag value="能耗分顶"></HeadlineTag>
-
-      </div>
-    </div>
+    <leftDesk></leftDesk>
+    <reightDesk></reightDesk>
   </div>
 </template>
 
 <script setup>
-import HeadlineTag from '@/components/HeadlineTag'
+import leftDesk from './leftDesk.vue'
+import reightDesk from './reightDesk.vue'
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .home {
   position: relative;
   width: 100%;
@@ -77,164 +18,35 @@ import HeadlineTag from '@/components/HeadlineTag'
   padding-top: 45px;
 }
 
-.box_home_left {
-  position: absolute;
-  width: 25%;
-  height: calc(100% - 45px);
-  display: flex;
-  flex-direction: column;
-}
-
-.flex_home {
-  flex: 1;
-  color: #fff;
-}
-
-.box_arch {
-  display: flex;
-  align-items: center;
-  height: calc(100% - 40px);
-}
-
-.image_architecture {
-  position: relative;
-  flex: none;
-  width: 200px;
-  height: 100%;
-  background: url("@/assets/images/brightbase.png");
-  background-size: 80% 80%;
-  background-position: center center;
-  background-repeat: no-repeat;
-}
-
-.tect_arch {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.arch_icon {
-  width: 90px;
-  height: 90px;
-  margin-bottom: 20px;
-}
-
-.right_content {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-.title_row {
-  display: flex;
-  align-items: center;
-}
-
-.survey_title {
-  font-size: 16px;
-  background-image: -webkit-linear-gradient(bottom, rgb(120, 173, 221), rgb(229, 232, 236));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.survey_num {
-  margin-left: 10px;
-  font-size: 18px;
-  background-image: -webkit-linear-gradient(bottom, rgb(143, 190, 224), rgb(166, 196, 220));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  span {
-    font-size: 14px;
-  }
-}
-
-.box_bg_facility {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  background-color: red;
-}
-
-.facility_border {
-  border: 1px solid red;
-  border-radius: 50%;
-  padding: 10px;
-}
-
-.box_facility {
-  flex: 1;
+.color-cyan {
+  background-color: rgb(88, 240, 222);
 }
 
-.energy_box_icon {
-  width: 60px;
-  height: 60px;
-  position: relative;
-  vertical-align: -2px;
+.color-yellow {
+  background-color: rgb(242, 179, 39);
 }
 
-
-
-
-
-.loader-container {
-  position: relative;
-  width: 100%;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.color-blue {
+  background-color: rgb(76, 155, 255);
 }
 
-.loader {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  animation: animate 2s linear infinite;
+.color-red {
+  background-color: rgb(239, 93, 57);
 }
 
-@keyframes animate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+.text-cyan {
+  color: rgb(88, 240, 222);
 }
 
-.loader1:before,
-.loader2:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50%;
-  height: 100%;
-  background: linear-gradient(to top, transparent, transparent, rgba(33, 90, 151, .4), rgba(33, 90, 151, 1), rgba(255, 255, 255, .8));
-  background-size: 100px 180px;
-  background-repeat: no-repeat;
-  border-top-left-radius: 100px;
-  border-bottom-left-radius: 100px;
+.text-yellow {
+  color: rgb(242, 179, 39);
 }
 
-.loader2,
-.loader4 {
-  animation-delay: -1s;
-  filter: hue-rotate(290deg);
+.text-blue {
+  color: rgb(76, 155, 255);
 }
 
-.loader span {
-  position: absolute;
-  inset: 10px;
-  background: #000;
-  border-radius: 50%;
-  z-index: 1;
+.text-red {
+  color: rgb(239, 93, 57);
 }
 </style>

src/views/leftDesk.vue

@@ -0,0 +1,426 @@
+<template>
+    <div class="box_home_left">
+        <div class="flex_home">
+            <HeadlineTag value="建筑概况"></HeadlineTag>
+            <div class="box_arch">
+                <div class="image_architecture">
+                    <div class="tect_arch">
+                        <svg-icon icon-class="architecture" className="arch_icon" />
+                    </div>
+                </div>
+                <div class="right_content">
+                    <div class="title_row">
+                        <div class="survey_title">建筑面积:</div>
+                        <div class="survey_num">20000<span>m²</span></div>
+                    </div>
+                    <div class="title_row">
+                        <div class="survey_title">占地面积:</div>
+                        <div class="survey_num">20000<span>m²</span></div>
+                    </div>
+                    <div class="title_row">
+                        <div class="survey_title">建筑高度:</div>
+                        <div class="survey_num">30<span>m</span></div>
+                    </div>
+                    <div class="title_row">
+                        <div class="survey_title">建筑层数:</div>
+                        <div class="survey_num">10</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex_home">
+            <HeadlineTag value="设备监控"></HeadlineTag>
+            <div class="box_arch space_between_in">
+                <div class="box_facility">
+                    <div class="left_ity">
+                        <div class="title_ity">设备总数</div>
+                        <div class="num_ity" style="color: rgb(45, 220, 223);">1940</div>
+                    </div>
+                    <div class="facil_line"></div>
+                    <div class="left_ity">
+                        <div class="title_ity">设备故障</div>
+                        <div class="num_ity" style="color: rgb(226, 164, 25);">1940</div>
+                    </div>
+                </div>
+                <div class="box_loader">
+                    <div class="loader-container">
+                        <div class="loader loader1"><span></span></div>
+                        <div class="loader loader2"><span></span></div>
+                    </div>
+                    <div class="facility_border">
+                        <div class="box_bg_facility center_in">
+                            <svg class="energy_box_icon" aria-hidden="true">
+                                <defs>
+                                    <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                                        <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                                        <stop offset="4%" stop-color="rgba(184, 225, 239, 1)" />
+                                        <stop offset="100%" stop-color="#ffffff" />
+                                    </linearGradient>
+                                </defs>
+                                <use xlink:href="#icon-emcs" fill="url('#myGradient')" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div class="box_facility">
+                    <div class="right_ity">
+                        <div class="title_ity">运行总数</div>
+                        <div class="num_ity" style="color: rgb(230, 232, 233);">1940</div>
+                    </div>
+                    <div class="facil_line"></div>
+                    <div class="right_ity">
+                        <div class="title_ity">报警总数</div>
+                        <div class="num_ity" style="color: rgb(232, 64, 66);">1940</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex_home">
+            <HeadlineTag value="电能耗(Kw/h)"></HeadlineTag>
+            <div class="card_energy">
+                <div class="energy_box">
+                    <div><el-icon color="rgb(108, 224, 233)">
+                            <CaretRight />
+                        </el-icon>今日</div>
+                    <span>1940</span>
+                </div>
+                <div class="energy_box">
+                    <div><el-icon color="rgb(108, 224, 233)">
+                            <CaretRight />
+                        </el-icon>本周</div>
+                    <span>1940</span>
+                </div>
+                <div class="energy_box">
+                    <div><el-icon color="rgb(108, 224, 233)">
+                            <CaretRight />
+                        </el-icon>本月</div>
+                    <span>1940</span>
+                </div>
+                <div class="energy_box">
+                    <div><el-icon color="rgb(108, 224, 233)">
+                            <CaretRight />
+                        </el-icon>本年</div>
+                    <span>1940</span>
+                </div>
+            </div>
+        </div>
+        <div class="flex_home">
+            <HeadlineTag value="能耗分顶"></HeadlineTag>
+            <div class="space_between_in card_subentry">
+                <div class="entry_box">
+                    <div class="num_gross">总量</div>
+                    <span>0</span>
+                </div>
+                <div class="box_subentry">
+                    <div class="subentry_item space_between_in">
+                        <div class="same_row_in">
+                            <span class="box_line color-cyan"></span>
+                            <span>动力</span>
+                        </div>
+                        <span class="text-cyan">10%</span>
+                    </div>
+                    <div class="subentry_item space_between_in">
+                        <div class="same_row_in">
+                            <span class="box_line color-yellow"></span>
+                            <span>照明</span>
+                        </div>
+                        <span class="text-yellow">10%</span>
+                    </div>
+                    <div class="subentry_item space_between_in">
+                        <div class="same_row_in">
+                            <span class="box_line color-blue"></span>
+                            <span>特殊用电</span>
+                        </div>
+                        <span class="text-blue">10%</span>
+                    </div>
+                    <div class="subentry_item space_between_in">
+                        <div class="same_row_in">
+                            <span class="box_line color-red"></span>
+                            <span>空调插座</span>
+                        </div>
+                        <span class="text-red">10%</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import HeadlineTag from '@/components/HeadlineTag'
+</script>
+
+<style scoped lang="scss">
+.box_home_left {
+    position: absolute;
+    left: 0;
+    width: 25%;
+    height: calc(100% - 45px);
+    display: flex;
+    flex-direction: column;
+}
+
+.flex_home {
+    flex: 1;
+    color: #fff;
+}
+
+.box_arch {
+    display: flex;
+    align-items: center;
+    height: calc(100% - 40px);
+}
+
+.image_architecture {
+    position: relative;
+    flex: none;
+    width: 200px;
+    height: 100%;
+    background: url("@/assets/images/brightbase.png");
+    background-size: 80% 80%;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
+.tect_arch {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.arch_icon {
+    width: 90px;
+    height: 90px;
+    margin-bottom: 20px;
+}
+
+.right_content {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.title_row {
+    display: flex;
+    align-items: center;
+}
+
+.survey_title {
+    font-size: 16px;
+    background-image: -webkit-linear-gradient(bottom, rgb(120, 173, 221), rgb(229, 232, 236));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.survey_num {
+    margin-left: 10px;
+    font-size: 18px;
+    background-image: -webkit-linear-gradient(bottom, rgb(143, 190, 224), rgb(166, 196, 220));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    span {
+        font-size: 14px;
+    }
+}
+
+.box_bg_facility {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 1px solid rgb(75, 114, 159);
+    box-shadow: inset 0px 0px 10px 10px rgb(41, 100, 162);
+}
+
+.facility_border {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    border: 1px solid rgb(61, 96, 132);
+    border-radius: 50%;
+    padding: 10px;
+    background-color: rgb(5, 26, 54);
+}
+
+.box_facility {
+    height: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.left_ity {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.right_ity {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.title_ity {
+    font-weight: bold;
+    padding-bottom: 5px;
+    font-size: 18px;
+    background-image: -webkit-linear-gradient(bottom, rgb(157, 211, 245), rgb(194, 229, 252));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.num_ity {
+    font-weight: bold;
+    font-size: 22px;
+}
+
+.facil_line {
+    width: 40%;
+    height: 6px;
+    background: linear-gradient(45deg, rgba(0, 0, 0, 0), #fe7b7b, rgba(0, 0, 0, 0), #fe7b7b);
+    background-size: 20px 10px;
+}
+
+.energy_box_icon {
+    width: 55px;
+    height: 55px;
+    position: relative;
+    vertical-align: -2px;
+}
+
+.box_loader {
+    position: relative;
+}
+
+.loader-container {
+    width: 122px;
+    height: 122px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.loader {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    animation: animate 2s linear infinite;
+}
+
+@keyframes animate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.loader1:before,
+.loader2:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(to top, transparent, transparent, rgba(17, 40, 72, .3), rgba(87, 138, 182, 1));
+    background-size: 100px 180px;
+    background-repeat: no-repeat;
+    border-top-left-radius: 100px;
+    border-bottom-left-radius: 100px;
+}
+
+.loader2,
+.loader4 {
+    animation-delay: -1s;
+    filter: hue-rotate(290deg);
+}
+
+.loader span {
+    position: absolute;
+    inset: 10px;
+    background: #000;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+.card_energy {
+    height: calc(100% - 40px);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.energy_box {
+    width: 50%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+
+    span {
+        font-weight: bold;
+        font-size: 26px;
+        padding-left: 10px;
+        background-image: -webkit-linear-gradient(bottom, rgb(149, 199, 233), rgb(188, 220, 243));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
+
+.card_subentry {
+    height: calc(100% - 40px);
+}
+
+.entry_box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .num_gross {
+        font-size: 15px;
+        background-image: -webkit-linear-gradient(bottom, rgb(149, 199, 233), rgb(188, 220, 243));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    span {
+        padding-top: 5px;
+        font-size: 26px;
+    }
+}
+
+.box_subentry {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.subentry_item {
+    width: 200px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgb(46, 58, 80);
+}
+
+.box_line {
+    width: 6px;
+    height: 6px;
+    margin-right: 6px;
+}
+
+</style>

src/views/reightDesk.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="box_home_reight">
+        <div class="flex_home">
+            <HeadlineTag value="工单统计(本周)"></HeadlineTag>
+            <div class="box_arch">
+                <div class="image_tubbiness">
+                    <div class="work_num">3714<span>个</span></div>
+                    <div class="work_title">今日总数</div>
+                </div>
+                <div class="right_content">
+                    <div class="work_week"><span>进行中:</span>765</div>
+                    <div class="work_week"><span>已超时:</span>100</div>
+                </div>
+            </div>
+        </div>
+        <div class="flex_home">
+            <HeadlineTag value="诉求统计"></HeadlineTag>
+            <div class="box_arch card_appeal">
+                <div class="appeal_box">
+                    <div class="image_architecture">
+                        <div class="tect_arch">
+                            <svg-icon icon-class="architecture" className="arch_icon" />
+                        </div>
+                    </div>
+                    <div class="appeal_num">
+                        <span>总数</span>
+                        <span class="amount_num">1940</span>
+                    </div>
+                </div>
+                <div class="appeal_box">
+                    <div class="image_architecture">
+                        <div class="tect_arch">
+                            <svg-icon icon-class="architecture" className="arch_icon" />
+                        </div>
+                    </div>
+                    <div class="appeal_num">
+                        <span>已处理</span>
+                        <span class="amount_num">1940</span>
+                    </div>
+                </div>
+                <div class="appeal_box">
+                    <div class="image_architecture">
+                        <div class="tect_arch">
+                            <svg-icon icon-class="architecture" className="arch_icon" />
+                        </div>
+                    </div>
+                    <div class="appeal_num">
+                        <span>未处理</span>
+                        <span class="amount_num">1940</span>
+                    </div>
+                </div>
+                <div class="appeal_box">
+                    <div class="image_architecture">
+                        <div class="tect_arch">
+                            <svg-icon icon-class="architecture" className="arch_icon" />
+                        </div>
+                    </div>
+                    <div class="appeal_num">
+                        <span>今日新增</span>
+                        <span class="amount_num">+8</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex_home">
+            <HeadlineTag value="停车系统"></HeadlineTag>
+            <div class="box_arch">
+                <div class="box_vehicle">
+                    <div class="color-green-line"></div>
+                    <span>占用</span>
+                    <div class="sum_cle" style="color: rgb(21, 213, 21);">1940</div>
+                </div>
+                <div class="box_vehicle">
+                    <div class="color-orange-line"></div>
+                    <span>空闲</span>
+                    <div class="sum_cle" style="color: rgb(215, 113, 23);">1940</div>
+                </div>
+            </div>
+        </div>
+        <div class="flex_home">
+            <HeadlineTag value="报警统计(本周)"></HeadlineTag>
+            <div class="box_arch">
+                1
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import HeadlineTag from '@/components/HeadlineTag'
+</script>
+
+<style scoped lang="scss">
+.box_home_reight {
+    position: absolute;
+    right: 0;
+    width: 25%;
+    height: calc(100% - 45px);
+    display: flex;
+    flex-direction: column;
+}
+
+.flex_home {
+    flex: 1;
+    color: #fff;
+}
+
+.box_arch {
+    display: flex;
+    align-items: center;
+    height: calc(100% - 40px);
+}
+
+.image_tubbiness {
+    position: relative;
+    flex: none;
+    width: 200px;
+    height: 100%;
+    background: url("@/assets/images/tubbiness.png");
+    background-size: 80% 80%;
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    .work_num {
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+        text-align: center;
+        color: rgb(84, 218, 250);
+        font-size: 20px;
+
+        span {
+            font-size: 14px;
+            color: rgb(158, 174, 195);
+        }
+    }
+
+    .work_title {
+        position: absolute;
+        bottom: 36px;
+        left: 0px;
+        right: 0px;
+        text-align: center;
+    }
+}
+
+.right_content {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+
+    .work_week {
+        font-size: 22px;
+        font-weight: bold;
+        color: #fff;
+
+        span {
+            padding-right: 10px;
+            font-size: 16px;
+            color: rgb(214, 218, 222);
+        }
+    }
+}
+
+.card_appeal {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.appeal_box {
+    width: 50%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+}
+
+.appeal_num {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 15px;
+
+    span {
+        font-size: 17px;
+    }
+
+    .amount_num {
+        padding-top: 5px;
+        font-size: 26px;
+    }
+}
+
+.image_architecture {
+    position: relative;
+    flex: none;
+    width: 60px;
+    height: 100%;
+    background: url("@/assets/images/brightbase.png");
+    background-size: 100% 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
+.tect_arch {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.arch_icon {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 10px;
+}
+
+.box_vehicle {
+    flex: 1;
+    display: flex;
+    align-items: center;
+}
+
+.color-green-line {
+    width: 6px;
+    height: 6px;
+    margin-right: 10px;
+    background-color: rgb(21, 213, 21);
+}
+
+.color-orange-line {
+    width: 6px;
+    height: 6px;
+    margin-right: 10px;
+    background-color: rgb(215, 113, 23);
+}
+
+.sum_cle {
+    font-size: 28px;
+    font-weight: bold;
+    padding-left: 10px;
+}
+</style>