YaolongHan 4 vuotta sitten
vanhempi
commit
aeb53bc7c3
2 muutettua tiedostoa jossa 362 lisäystä ja 25 poistoa
  1. 361 24
      src/views/homepage/darkColor.vue
  2. 1 1
      vue.config.js

+ 361 - 24
src/views/homepage/darkColor.vue

@@ -110,19 +110,168 @@
           </ul>
         </div>
       </div>
-      <div class="center"></div>
-      <div class="right"></div>
+      <div class="center">
+        <div class="update-record">
+          <div class="system-main-title">
+            <h4 class="section-title">说明书更新记录</h4>
+          </div>
+          <!-- 进度调 -->
+          <div class="progress">
+            <div class="number">
+              <div class="nu">19</div>
+              <span>当月更新</span>
+            </div>
+            <div class="progress-box">
+              <div class="progress-list">
+                <div class="progress-item"></div>
+                <div class="progress-item"></div>
+                <div class="progress-item"></div>
+                <div class="progress-item progress-box-bottom"></div>
+              </div>
+              <div class="progress-legend">
+                <div class="legend-item">
+                  <span class="legend-color"></span>
+                  <span class="title">重要维修</span>
+                  <span class="num">1条</span>
+                </div>
+                <div class="legend-item">
+                  <span class="legend-color"></span>
+                  <span class="title">重要维修</span>
+                  <span class="num">5条</span>
+                </div>
+                <div class="legend-item">
+                  <span class="legend-color"></span>
+                  <span class="title">重要维修</span>
+                  <span class="num">3条</span>
+                </div>
+                <div class="legend-item">
+                  <span class="legend-color"></span>
+                  <span class="title">重要维修</span>
+                  <span class="num">5条</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="feng-map" ref="fengmap">
+          <div class="lcgn-title">
+            <span class="span1">{{ floorInfo.code }}</span>
+          </div>
+          <floorMap
+            ref="floorMap"
+            :loadName="loadName"
+            :type="'floor'"
+          ></floorMap>
+          <!-- 图例 -->
+          <div class="legend-boxs">
+            <Legend
+              :floors="floorsArr"
+              type="1"
+              :editTips="`编辑${floorInfo.code}层楼层功能平面图`"
+            ></Legend>
+            <floor-list
+              v-if="floorsArr.length > 0"
+              :floorsArr="floorsArr"
+              :type="1"
+              @emitFloor="emitFloor"
+              :id="'floor'"
+            ></floor-list>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="box">
+          <div class="box-center">
+            <div class="system-main-title">
+              <h4 class="section-title">维保</h4>
+            </div>
+            <div class="select">全部</div>
+          </div>
+          <div class="box-bottom">
+            <div class="circle"></div>
+            <div class="msg">
+              <div class="msg-item item-1">
+                <span class="msg-color"></span>
+                <span class="type">未完成得任务</span>
+                <span class="num">8</span>
+              </div>
+              <div class="msg-item item-1">
+                <span class="msg-color"></span>
+                <span class="type">即将逾期</span>
+                <span class="num">8</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box">
+          <div class="box-center">
+            <div class="system-main-title">
+              <h4 class="section-title">第三方检测</h4>
+            </div>
+            <div class="select">全部</div>
+          </div>
+          <div class="box-bottom">
+            <div class="circle"></div>
+            <div class="msg">
+              <div class="msg-item item-1">
+                <span class="msg-color"></span>
+                <span class="type">未完成得任务</span>
+                <span class="num">8</span>
+              </div>
+              <div class="msg-item item-1">
+                <span class="msg-color"></span>
+                <span class="type">即将逾期</span>
+                <span class="num">8</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box">
+          <div class="box-center">
+            <div class="system-main-title">
+              <h4 class="section-title">专维</h4>
+            </div>
+            <div class="select">全部</div>
+          </div>
+          <div class="box-bottom">
+            <div class="circle"></div>
+            <div class="msg">
+              <div class="msg-item item-1">
+                <span class="msg-color"></span>
+                <span class="type">未完成得任务</span>
+                <span class="num">8</span>
+              </div>
+              <div class="msg-item item-1">
+                <span class="msg-color"></span>
+                <span class="type">即将逾期</span>
+                <span class="num">8</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { getCardList } from "@/api/homePage";
+import floorMap from "@/components/floorMap/index.vue";
+import floorList from "@/components/floorList.vue";
+import { mapGetters } from "vuex";
 export default {
+  components: { floorMap, floorList },
   data() {
     return {
       systemList: [], //系统数据
+      show: true,
+      floorInfo: {},
+      loadName: "",
+      type: "",
     };
   },
+  computed: {
+    ...mapGetters(["floorsArr", "floorObj"]),
+  },
   methods: {
     imgSrc(code) {
       return require("../../assets/images/icons/" + code + ".png");
@@ -213,10 +362,35 @@ export default {
         });
       });
     },
+
+    emitFloor(item) {
+      console.log(item);
+      this.floorInfo = item;
+      this.$refs.floorMap.init(this.floorInfo.gname);
+      this.init();
+    },
+    additionalColl() {
+      this.show = !this.show;
+    },
+    init() {
+      this.loadName = `楼层功能-${this.floorInfo.code}`;
+      console.log(this.floorsArr.length);
+      console.log(this.$cookie.get("currentFloorId"));
+      if (this.floorsArr.length > 0 && this.$cookie.get("currentFloorId")) {
+        this.floorInfo = this.floorsArr.find((item) => {
+          return this.$cookie.get("currentFloorId") == item.seq;
+        });
+      } else {
+      }
+    },
   },
   created() {
     this.getSystemList(103000, 1);
   },
+  mounted() {
+    this.init();
+    this.$refs.floorMap.init(this.floorInfo.gname);
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -231,21 +405,23 @@ export default {
     padding: 56px 16px 40px 16px;
     box-sizing: border-box;
     display: flex;
+    .system-main-title {
+      width: 152px;
+      height: 40px;
+      background: #1649ce;
+      line-height: 40px;
+      margin-bottom: 12px;
+      h4 {
+        color: #fff;
+        margin-left: 18px;
+      }
+    }
     .left {
       width: 30.05%;
       height: 100%;
-      padding: 16px 10px;
+      padding: 16px 0px 16px 10px;
       box-sizing: border-box;
-      .system-main-title {
-        width: 152px;
-        height: 40px;
-        background: #1649ce;
-        line-height: 40px;
-        h4 {
-          color: #fff;
-          margin-left: 18px;
-        }
-      }
+      border-radius: 1px solid #cccccc;
       .system-list {
         height: 100%;
         overflow-y: auto;
@@ -256,11 +432,12 @@ export default {
             justify-content: flex-start;
             align-items: stretch;
             width: 100%;
-            margin-bottom:6px;
+            margin-bottom: 6px;
             box-sizing: border-box;
-            border: 1px solid #eff0f1;
+            border: 1px solid#0C102C;
             border-radius: 4px;
             transition: 0.5s;
+            background: #0d1d42;
             cursor: pointer;
             .system-name {
               position: absolute;
@@ -277,7 +454,7 @@ export default {
               img {
                 width: 32px;
                 height: 32px;
-                margin-bottom:60px;
+                margin-bottom: 6px;
               }
               span {
                 color: white;
@@ -288,7 +465,7 @@ export default {
             .system-equipments-container {
               position: relative;
               width: 88%;
-              padding: 60px;
+              padding: 10px;
               margin-left: 18%;
               .more {
                 position: absolute;
@@ -316,7 +493,7 @@ export default {
                 .number {
                   width: 30%;
                   margin-right: 1%;
-                  background: #eff0f1;
+                  background: #385ecc;
                   border-radius: 2px;
                   padding: 14px 0 10px 4px;
                   .title {
@@ -340,8 +517,8 @@ export default {
                       padding: 2px 4px;
                       border-radius: 9px;
                       font-size: 12px;
-                      color: #f54e45;
-                      background: #fde3e2;
+                      color: #ffffff;
+                      background: #f54e45;
                     }
                   }
                   p {
@@ -359,8 +536,8 @@ export default {
             }
           }
           li.selected {
-            border-color: rgba(0, 118, 197, 0.6);
-            box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
+            border-color: #6883ff;
+            box-shadow: 0 2px 10px 0px #6883ff;
           }
           li:hover {
             border-color: #e4e5e7;
@@ -392,12 +569,172 @@ export default {
     .center {
       flex: 1;
       height: 100%;
-      background: pink;
+      padding: 0 20px;
+      position: relative;
+      .update-record {
+        width: 100%;
+        height: 196px;
+        border: 1px solid #cccccc;
+        padding: 10px;
+        .progress {
+          display: flex;
+          align-items: center;
+          .progress-box {
+            flex: 1;
+            height: 100%;
+            .progress-list {
+              height: 12px;
+              background: #ccc;
+              border-radius: 6px 6px;
+              display: flex;
+              .progress-item {
+                height: 12px;
+                width: 33%;
+                margin-right: 1px;
+                overflow: hidden;
+              }
+              .progress-box-bottom {
+                margin-right: 0px;
+              }
+            }
+            .progress-legend {
+              width: 100%;
+              display: flex;
+              margin-top: 28px;
+              .legend-item {
+                margin-right: 30px;
+                display: flex;
+                align-items: center;
+                .legend-color {
+                  display: block;
+                  width: 10px;
+                  height: 10px;
+                  border-radius: 50% 50%;
+                  background: #fd9039;
+                  margin-right: 10px;
+                }
+                .title {
+                  margin-right: 10px;
+                }
+              }
+            }
+          }
+          .number {
+            width: 140px;
+            height: 100%;
+            color: #c3c7cb;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .nu {
+              font-size: 30px;
+              font-weight: bold;
+              color: #ffffff;
+              margin: 0 auto;
+            }
+            span {
+              font-size: 16px;
+              color: #c3c7cb;
+              margin: 0 auto;
+            }
+          }
+        }
+      }
+
+      .feng-map {
+        width: 100%;
+        height: calc(~"100% - 200px");
+        position: relative;
+        .lcgn-title {
+          position: absolute;
+          z-index: 2;
+          display: block;
+          top: 30px;
+          left: 30px;
+          width: 140px;
+          height: 32px;
+          background: linear-gradient(
+            270deg,
+            rgba(199, 217, 234, 0) 0%,
+            rgba(199, 217, 234, 1) 100%
+          );
+          box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
+          color: #025baa;
+          font-size: 16px;
+          &::before {
+            width: 2px;
+            height: 16px;
+            background: rgba(2, 91, 170, 1);
+            display: inline-block;
+            content: "";
+            margin-right: 10px;
+            margin-top: 8px;
+          }
+          .span1 {
+            position: absolute;
+            top: 3px;
+          }
+        }
+        .legend-boxs {
+          position: absolute;
+          z-index: 9;
+          right: 32px;
+          top: 142px;
+        }
+      }
     }
     .right {
       width: 21.2%;
       height: 100%;
-      background: yellow;
+      padding-left: 10px;
+      box-sizing: border-box;
+      .box {
+        width: 100%;
+        height: ~"calc(33% - 16px)";
+        border: 1px solid #ccc;
+        margin-bottom: 20px;
+        padding: 10px;
+        box-sizing: border-box;
+        .box-center {
+          display: flex;
+          justify-content: space-between;
+          .select {
+            width: 110px;
+            height: 36px;
+            background: #1649ce;
+          }
+        }
+        .box-bottom {
+          margin-top: 36px;
+          display: flex;
+          .circle {
+            margin: 40px;
+            width: 150px;
+            height: 150px;
+          }
+          .msg {
+            flex: 1;
+            margin-top: 10px;
+            .msg-item {
+              display: flex;
+              align-items: center;
+              margin-top: 16px;
+              .msg-color {
+                display: block;
+                width: 10px;
+                height: 10px;
+                border-radius: 10px 10px;
+                background: #ffffff;
+                margin-right: 10px;
+              }
+              .type {
+                margin: 0 6px 0 4px;
+              }
+            }
+          }
+        }
+      }
     }
   }
 }

+ 1 - 1
vue.config.js

@@ -34,7 +34,7 @@ module.exports = {
             // 图例库服务
             "/serve": {
                 // target: 'http://192.168.200.87:8088',
-                target: 'http://60.205.177.43:8080', //阿里云
+                target: 'http://60.205.177.43:28888', //阿里云
             //    target: 'http://10.199.143.129:8080',    //生产环境
                 changeOrigin: true,
                 pathRewrite: {