Forráskód Böngészése

项目概况首页、轮播组件、设备设施编辑图例弹框

guoxiaohuan 4 éve
szülő
commit
cc0ce0a74d

+ 8 - 0
README.md

@@ -27,3 +27,11 @@ npm run lint
 ### Customize configuration
 
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+### 楼层功能-编辑图例备注(弹框)
+
+#### 直接引入<wd-editor></wd-editor> 参数传入宽、高、备注文本
+
+### 轮播组件
+
+#### <rotation :rotationImg='rotationImg'></rotation> rotationImg 为轮播数组

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 11837
package-lock.json


+ 8 - 5
package.json

@@ -8,15 +8,18 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "@saga-web/base": "2.1.9",
+        "@saga-web/cad-engine": "2.0.565",
+        "@saga-web/draw": "2.1.80",
+        "@saga-web/graphy": "2.1.52",
         "ant-design-vue": "^1.4.10",
         "core-js": "^3.4.4",
+        "element-ui": "^2.13.2",
+        "quill": "^1.3.7",
         "vue": "^2.6.10",
+        "vue-quill-editor": "^3.0.6",
         "vue-router": "^3.1.3",
-        "vuex": "^3.1.2",
-        "@saga-web/base": "2.1.9",
-        "@saga-web/cad-engine": "2.0.565",
-        "@saga-web/draw": "2.1.80",
-        "@saga-web/graphy": "2.1.52"
+        "vuex": "^3.1.2"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^4.1.0",

+ 236 - 0
src/assets/css/rotation.css

@@ -0,0 +1,236 @@
+.overview {
+  background: #f2f5f7;
+  padding: 16px 20px 20px 20px;
+  height: 100%;
+  width: 100%;
+}
+.overview .view-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.overview .view-title nav {
+  display: flex;
+  align-items: center;
+}
+.overview .view-title nav span:nth-of-type(1) {
+  width: 3px;
+  height: 16px;
+  background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
+  border-radius: 2px;
+  margin-right: 4px;
+  display: inline-block;
+}
+.overview .view-title nav span:nth-of-type(2) {
+  height: 24px;
+  font-size: 16px;
+  font-family: MicrosoftYaHeiSemibold;
+  color: #1f2429;
+  line-height: 21px;
+}
+.overview .view-title .view-button {
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  line-height: 22px;
+  width: 106px;
+  height: 32px;
+  background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
+  font-size: 14px;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.overview .view-title .view-button img {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  margin-right: 6px;
+}
+.overview .view-box {
+  height: calc(100% - 45px);
+  display: flex;
+  justify-content: space-between;
+}
+.overview .view-box .view-left {
+  width: 58.7%;
+  margin-right: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.overview .view-box .view-left .lb-left {
+  width: 100%;
+  flex: 1;
+  margin-top: 12px;
+  margin-bottom: 10px;
+  position: relative;
+}
+.overview .view-box .view-left .lb-left .lb-icon {
+  z-index: 99999;
+  position: absolute;
+  top: 0;
+  right: 2px;
+  width: 32px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 0px 4px 0px 4px;
+}
+.overview .view-box .view-left .lb-left .lb-img {
+  z-index: 999999;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 8px;
+  right: 10px;
+}
+.overview .view-box .view-left .lb-bottom {
+  height: 34%;
+  background: #ffffff;
+  padding: 16px;
+}
+.overview .view-box .view-left .lb-bottom nav {
+  width: 161px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+  margin-bottom: 12px;
+}
+.overview .view-box .view-left .lb-bottom nav span:nth-of-type(1) {
+  width: 2px;
+  height: 16px;
+  background: #025baa;
+  margin-right: 6px;
+  display: inline-block;
+}
+.overview .view-box .view-left .lb-bottom nav span:nth-of-type(2) {
+  width: 107px;
+  height: 22px;
+  font-size: 14px;
+  font-family: MicrosoftYaHeiSemibold;
+  color: #025baa;
+  line-height: 19px;
+}
+.overview .view-box .view-left .lb-bottom .place-p1 {
+  height: 24px;
+  font-size: 16px;
+  font-family: MicrosoftYaHeiSemibold;
+  color: #1f2429;
+  line-height: 21px;
+  margin-bottom: 8px;
+}
+.overview .view-box .view-left .lb-bottom .place-p2 {
+  margin: 16px 0;
+  height: 22px;
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+  color: #1f2429;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  margin-top: 0px;
+}
+.overview .view-box .view-left .lb-bottom .place-p2 img {
+  margin-right: 3px;
+}
+.overview .view-box .view-left .lb-bottom .place-bottom {
+  display: flex;
+}
+.overview .view-box .view-left .lb-bottom .place-bottom .place-box {
+  width: 50%;
+  display: flex;
+}
+.overview .view-box .view-left .lb-bottom .place-bottom .place-box .place-left {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.overview .view-box .view-left .lb-bottom .place-bottom .place-box .place-left span {
+  display: inline-block;
+  width: 56px;
+  margin-right: 8px;
+  font-size: 12px;
+  font-family: MicrosoftYaHei;
+  color: #646c73;
+  line-height: 22px;
+}
+.overview .view-box .view-left .lb-bottom .place-bottom .place-box .place-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.overview .view-box .view-left .lb-bottom .place-bottom .place-box .place-right span {
+  display: inline-block;
+  font-size: 12px;
+  font-family: MicrosoftYaHei;
+  color: #1f2429;
+  line-height: 22px;
+}
+.overview .view-box .view-right {
+  flex: 1;
+}
+.overview .view-box .view-right .view-right-box {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.overview .view-box .view-right .view-right-box .lb-right {
+  height: 46%;
+  margin-top: 12px;
+  margin-bottom: 10px;
+  position: relative;
+}
+.overview .view-box .view-right .view-right-box .lb-right .lb-icon {
+  z-index: 99999;
+  position: absolute;
+  top: 0;
+  right: 2px;
+  width: 32px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 0px 4px 0px 4px;
+}
+.overview .view-box .view-right .view-right-box .lb-right .lb-img {
+  z-index: 999999;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 8px;
+  right: 10px;
+}
+.overview .view-box .view-right .view-right-box .lb-right-bottom {
+  flex: 1;
+  background: #ffffff;
+  padding: 20px 16px;
+}
+.overview .view-box .view-right .view-right-box .lb-right-bottom nav {
+  width: 161px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+  margin-bottom: 16px;
+}
+.overview .view-box .view-right .view-right-box .lb-right-bottom nav span:nth-of-type(1) {
+  width: 2px;
+  height: 16px;
+  background: #025baa;
+  margin-right: 6px;
+  display: inline-block;
+}
+.overview .view-box .view-right .view-right-box .lb-right-bottom nav span:nth-of-type(2) {
+  width: 107px;
+  height: 22px;
+  font-size: 14px;
+  font-family: MicrosoftYaHeiSemibold;
+  color: #025baa;
+  line-height: 19px;
+}
+.overview .view-box .view-right .view-right-box .lb-right-bottom .view-right-bottom {
+  overflow: auto;
+}
+@media only screen and (min-width: 768px) and (max-width: 1366px) {
+}
+@media only screen and (min-width: 1367px) {
+}

+ 510 - 0
src/assets/css/rotation.less

@@ -0,0 +1,510 @@
+.overview {
+    background: #f2f5f7;
+    padding: 16px 20px 20px 20px;
+    height: 100%;
+    width: 100%;
+    .view-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        nav {
+            display: flex;
+            align-items: center;
+            span:nth-of-type(1) {
+                width: 3px;
+                height: 16px;
+                background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+                border-radius: 2px;
+                margin-right: 4px;
+                display: inline-block;
+            }
+            span:nth-of-type(2) {
+                height: 24px;
+                font-size: 16px;
+                font-family: MicrosoftYaHeiSemibold;
+                color: #1f2429;
+                line-height: 21px;
+            }
+        }
+        .view-button {
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            line-height: 22px;
+            width: 106px;
+            height: 32px;
+            background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+            font-size: 14px;
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                display: inline-block;
+                height: 16px;
+                width: 16px;
+                margin-right: 6px;
+            }
+        }
+    }
+    .view-box {
+        height: calc(100% - 45px);
+        display: flex;
+        justify-content: space-between;
+        .view-left {
+            width: 58.7%;
+            margin-right: 10px;
+            display: flex;
+            flex-direction: column;
+            .lb-left {
+                width: 100%;
+                flex: 1;
+                margin-top: 12px;
+                margin-bottom: 10px;
+                position: relative;
+                .lb-icon {
+                    z-index: 99999;
+                    position: absolute;
+                    top: 0;
+                    right: 2px;
+                    width: 32px;
+                    height: 32px;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 0px 4px 0px 4px;
+                }
+                .lb-img {
+                    z-index: 999999;
+                    width: 16px;
+                    height: 16px;
+                    position: absolute;
+                    top: 8px;
+                    right: 10px;
+                }
+            }
+            .lb-bottom {
+                height: 34%;
+                background: #ffffff;
+                padding: 16px;
+                nav {
+                    width: 161px;
+                    height: 32px;
+                    display: flex;
+                    align-items: center;
+                    background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+                    margin-bottom: 12px;
+                    span:nth-of-type(1) {
+                        width: 2px;
+                        height: 16px;
+                        background: #025baa;
+                        margin-right: 6px;
+                        display: inline-block;
+                    }
+                    span:nth-of-type(2) {
+                        width: 107px;
+                        height: 22px;
+                        font-size: 14px;
+                        font-family: MicrosoftYaHeiSemibold;
+                        color: #025baa;
+                        line-height: 19px;
+                    }
+                }
+                .place-p1 {
+                    height: 24px;
+                    font-size: 16px;
+                    font-family: MicrosoftYaHeiSemibold;
+                    color: rgba(31, 36, 41, 1);
+                    line-height: 21px;
+                    margin-bottom: 8px;
+                }
+                .place-p2 {
+                    margin: 16px 0;
+                    height: 22px;
+                    font-size: 14px;
+                    font-family: MicrosoftYaHei;
+                    color: rgba(31, 36, 41, 1);
+                    line-height: 19px;
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 12px;
+                    margin-top: 0px;
+                    img {
+                        margin-right: 3px;
+                    }
+                }
+                .place-bottom {
+                    display: flex;
+                    .place-box {
+                        width: 50%;
+                        display: flex;
+                        .place-left {
+                            display: flex;
+                            align-items: center;
+                            flex-direction: column;
+                            span {
+                                display: inline-block;
+                                width: 56px;
+                                margin-right: 8px;
+                                font-size: 12px;
+                                font-family: MicrosoftYaHei;
+                                color: rgba(100, 108, 115, 1);
+                                line-height: 22px;
+                            }
+                        }
+                        .place-right {
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: flex-start;
+                            span {
+                                display: inline-block;
+                                font-size: 12px;
+                                font-family: MicrosoftYaHei;
+                                color: rgba(31, 36, 41, 1);
+                                line-height: 22px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .view-right {
+            flex: 1;
+            .view-right-box {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                .lb-right {
+                    height: 46%;
+                    margin-top: 12px;
+                    margin-bottom: 10px;
+                    position: relative;
+                    .lb-icon {
+                        z-index: 99999;
+                        position: absolute;
+                        top: 0;
+                        right: 2px;
+                        width: 32px;
+                        height: 32px;
+                        background: rgba(0, 0, 0, 0.6);
+                        border-radius: 0px 4px 0px 4px;
+                    }
+                    .lb-img {
+                        z-index: 999999;
+                        width: 16px;
+                        height: 16px;
+                        position: absolute;
+                        top: 8px;
+                        right: 10px;
+                    }
+                }
+                .lb-right-bottom {
+                    flex: 1;
+                    background: #ffffff;
+                    padding: 20px 16px;
+                    nav {
+                        width: 161px;
+                        height: 32px;
+                        display: flex;
+                        align-items: center;
+                        background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+                        margin-bottom: 16px;
+                        span:nth-of-type(1) {
+                            width: 2px;
+                            height: 16px;
+                            background: #025baa;
+                            margin-right: 6px;
+                            display: inline-block;
+                        }
+                        span:nth-of-type(2) {
+                            width: 107px;
+                            height: 22px;
+                            font-size: 14px;
+                            font-family: MicrosoftYaHeiSemibold;
+                            color: #025baa;
+                            line-height: 19px;
+                        }
+                    }
+                    .view-right-bottom {
+                        overflow: auto;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 自适应1366*768 和1920*1080 的 暂时不用
+@media only screen and (min-width: 768px) and (max-width: 1366px) {
+    // .view-left {
+    //     flex: 1;
+    //     margin-right: 16px;
+    //     .view-left-box {
+    //         display: flex;
+    //         flex-direction: column;
+    //         .view-left-top {
+    //             height: 336px;
+    //             margin-bottom: 16px;
+    //             display: flex;
+    //             justify-content: space-between;
+    //             .view-top-imgL {
+    //                 margin-right: 16px;
+    //                 width: 504px;
+    //                 height: 336px;
+    //             }
+    //             .view-top-imgR {
+    //                 width: 336px;
+    //                 height: 336px;
+    //             }
+    //         }
+    //         .view-left-bottom {
+    //             background: #ffffff;
+    //             padding: 16px;
+    //             nav {
+    //                 width: 161px;
+    //                 height: 32px;
+    //                 display: flex;
+    //                 align-items: center;
+    //                 background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+    //                 margin-bottom: 16px;
+    //                 span:nth-of-type(1) {
+    //                     width: 2px;
+    //                     height: 16px;
+    //                     background: #025baa;
+    //                     margin-right: 6px;
+    //                     display: inline-block;
+    //                 }
+    //                 span:nth-of-type(2) {
+    //                     width: 107px;
+    //                     height: 22px;
+    //                     font-size: 14px;
+    //                     font-family: MicrosoftYaHeiSemibold;
+    //                     color: #025baa;
+    //                     line-height: 19px;
+    //                 }
+    //             }
+    //             .place-p {
+    //                 margin: 16px 0;
+    //                 height: 22px;
+    //                 font-size: 14px;
+    //                 font-family: MicrosoftYaHei;
+    //                 color: rgba(31, 36, 41, 1);
+    //                 line-height: 19px;
+    //                 display: flex;
+    //                 align-items: center;
+    //                 img {
+    //                     margin-right: 3px;
+    //                 }
+    //             }
+    //             .place-bottom {
+    //                 display: flex;
+    //                 .place-bottom-row {
+    //                     display: flex;
+    //                     justify-content: space-around;
+    //                     div {
+    //                         span {
+    //                             display: block;
+    //                         }
+    //                     }
+    //                     div:nth-of-type(1) {
+    //                         margin-right: 16px;
+    //                         span {
+    //                             width: 56px;
+    //                             font-size: 14px;
+    //                             font-family: MicrosoftYaHei;
+    //                             color: rgba(100, 108, 115, 1);
+    //                             line-height: 32px;
+    //                         }
+    //                     }
+    //                     div:nth-of-type(2) {
+    //                         margin-right: 16px;
+    //                         span {
+    //                             font-size: 14px;
+    //                             font-family: MicrosoftYaHei;
+    //                             color: rgba(31, 36, 41, 1);
+    //                             line-height: 32px;
+    //                         }
+    //                     }
+    //                 }
+    //             }
+    //         }
+    //     }
+    // }
+    // .view-right {
+    //     padding: 16px;
+    //     max-width: 424px;
+    //     nav {
+    //         width: 161px;
+    //         height: 32px;
+    //         display: flex;
+    //         align-items: center;
+    //         background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+    //         margin-bottom: 16px;
+    //         span:nth-of-type(1) {
+    //             width: 2px;
+    //             height: 16px;
+    //             background: #025baa;
+    //             margin-right: 6px;
+    //             display: inline-block;
+    //         }
+    //         span:nth-of-type(2) {
+    //             width: 107px;
+    //             height: 22px;
+    //             font-size: 14px;
+    //             font-family: MicrosoftYaHeiSemibold;
+    //             color: #025baa;
+    //             line-height: 19px;
+    //         }
+    //     }
+    //     .view-right-bottom {
+    //         display: flex;
+    //         font-size: 14px;
+    //         font-family: MicrosoftYaHei;
+    //         line-height: 40px;
+    //         .view-right-bottom-l {
+    //             min-width: 42px;
+    //             margin-right: 16px;
+    //             color: #646c73;
+    //         }
+    //         .view-right-bottom-r {
+    //             color: #1f2429;
+    //         }
+    //     }
+    // }
+}
+@media only screen and (min-width: 1367px) {
+    // .view-left {
+    //     flex: 1;
+    //     margin-right: 20px;
+    //     .view-left-box {
+    //         display: flex;
+    //         flex-direction: column;
+    //         background: #fff2f5f7;
+    //         .view-left-top {
+    //             height: 498px;
+    //             margin-bottom: 20px;
+    //             display: flex;
+    //             justify-content: space-between;
+    //             .view-top-imgL {
+    //                 margin-right: 20px;
+    //                 max-width: 748px;
+    //                 max-height: 498px;
+    //             }
+    //             .view-top-imgR {
+    //                 max-width: 498px;
+    //                 max-height: 498px;
+    //             }
+    //         }
+    //         .view-left-bottom {
+    //             background: #ffffff;
+    //             padding: 20px;
+    //             nav {
+    //                 width: 181px;
+    //                 height: 40px;
+    //                 display: flex;
+    //                 align-items: center;
+    //                 background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+    //                 margin-bottom: 24px;
+    //                 span:nth-of-type(1) {
+    //                     width: 2px;
+    //                     height: 24px;
+    //                     background: #025baa;
+    //                     margin-right: 12px;
+    //                     display: inline-block;
+    //                 }
+    //                 span:nth-of-type(2) {
+    //                     width: 135px;
+    //                     height: 22px;
+    //                     font-size: 18px;
+    //                     font-family: MicrosoftYaHeiSemibold;
+    //                     color: #025baa;
+    //                     line-height: 24px;
+    //                 }
+    //             }
+    //             .place-p {
+    //                 margin: 20px 0;
+    //                 height: 24px;
+    //                 font-size: 16px;
+    //                 font-family: MicrosoftYaHei;
+    //                 color: rgba(31, 36, 41, 1);
+    //                 line-height: 21px;
+    //                 display: flex;
+    //                 align-items: center;
+    //                 img {
+    //                     margin-right: 3px;
+    //                 }
+    //             }
+    //             .place-bottom {
+    //                 display: flex;
+    //                 .place-bottom-row {
+    //                     display: flex;
+    //                     justify-content: space-around;
+    //                     div {
+    //                         span {
+    //                             display: block;
+    //                         }
+    //                     }
+    //                     div:nth-of-type(1) {
+    //                         margin-right: 16px;
+    //                         span {
+    //                             width: 76px;
+    //                             font-size: 16px;
+    //                             font-family: MicrosoftYaHei;
+    //                             color: rgba(100, 108, 115, 1);
+    //                             line-height: 40px;
+    //                         }
+    //                     }
+    //                     div:nth-of-type(2) {
+    //                         margin-right: 20px;
+    //                         span {
+    //                             font-size: 16px;
+    //                             font-family: MicrosoftYaHei;
+    //                             color: rgba(31, 36, 41, 1);
+    //                             line-height: 40px;
+    //                         }
+    //                     }
+    //                 }
+    //             }
+    //         }
+    //     }
+    // }
+    // .view-right {
+    //     padding: 20px;
+    //     min-width: 555px;
+    //     nav {
+    //         width: 181px;
+    //         height: 40px;
+    //         display: flex;
+    //         align-items: center;
+    //         background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+    //         margin-bottom: 24px;
+    //         span:nth-of-type(1) {
+    //             width: 2px;
+    //             height: 24px;
+    //             background: #025baa;
+    //             margin-right: 12px;
+    //             display: inline-block;
+    //         }
+    //         span:nth-of-type(2) {
+    //             width: 135px;
+    //             height: 22px;
+    //             font-size: 18px;
+    //             font-family: MicrosoftYaHeiSemibold;
+    //             color: #025baa;
+    //             line-height: 24px;
+    //         }
+    //     }
+    //     .view-right-bottom {
+    //         display: flex;
+    //         font-size: 16px;
+    //         font-family: MicrosoftYaHei;
+    //         line-height: 40px;
+    //         padding-left: 4px;
+    //         .view-right-bottom-l {
+    //             min-width: 42px;
+    //             margin-right: 30px;
+    //             color: #646c73;
+    //         }
+    //         .view-right-bottom-r {
+    //             color: #1f2429;
+    //         }
+    //     }
+    // }
+}

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 19 - 0
src/assets/imgs/open1.svg


+ 5 - 0
src/components/Editor/index.js

@@ -0,0 +1,5 @@
+import WdEditor from './src/editor.vue'
+WdEditor.install = function(Vue) {
+    Vue.component(WdEditor.name, WdEditor)
+}
+export default WdEditor

+ 89 - 0
src/components/Editor/src/editor.vue

@@ -0,0 +1,89 @@
+/**
+*@author:Guoxiaohuan
+*@date:2020.05.27
+*@info:编辑图例备注
+*/
+<template>
+    <div class='edit_container' :style='`width:${width};height:${height}`'>
+        <quill-editor
+            v-model='content'
+            ref='wdQuillEditor'
+            :options='editorOption'
+            @blur='onEditorBlur($event)'
+            @focus='onEditorFocus($event)'
+            @change='onEditorChange($event)'
+            @ready='onEditorReady($event)'
+        ></quill-editor>
+        <p class='p1'>{{valLen||text.length}}/200</p>
+    </div>
+</template>
+<script>
+export default {
+    name: 'WdEditor',
+    props: {
+        width: {
+            type: [String, Number],
+            default: 500
+        },
+        height: {
+            type: [String, Number],
+            default: 500
+        },
+        text: {
+            type: String
+        }
+    },
+    computed: {},
+    data() {
+        return {
+            valLen: 0,
+            inputVal: this.text.length,
+            content: '注:' + this.text,
+            editorOption: {
+                modules: {
+                    toolbar: [['bold', 'underline'], [{ color: [] }]]
+                },
+                theme: 'snow',
+                placeholder: '请输入内容...'
+            }
+        }
+    },
+    methods: {
+        onEditorReady(editor) {},
+        onEditorBlur(val) {},
+        onEditorFocus(val) {},
+        onEditorChange(val) {
+            val.quill.deleteText(200, 6)
+            if (this.content === '') {
+                this.valLen = 0
+            } else {
+                this.valLen = val.quill.getLength() - 1
+            }
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.edit_container {
+    margin: 10px 0 0;
+    .p1 {
+        position: absolute;
+        bottom: 65px;
+        right: 30px;
+        margin-bottom: 0;
+    }
+}
+.quill-editor {
+    height: 130px;
+}
+</style>
+<style lang="less">
+.edit_container {
+    .ql-editor {
+        padding: 12px 15px 4px;
+    }
+    .ql-toolbar.ql-snow .ql-formats {
+        margin-right: 0px;
+    }
+}
+</style>

+ 6 - 0
src/components/Rotation/index.js

@@ -0,0 +1,6 @@
+import Rotation from './src/rotation.vue'
+Rotation.install = function(Vue) {
+    Vue.component(Rotation.name, Rotation)
+}
+console.log(Rotation)
+export default Rotation

+ 62 - 0
src/components/Rotation/src/rotation.vue

@@ -0,0 +1,62 @@
+/**
+*@author:Guoxiaohuan
+*@date:2020.05.26
+*@info:图片轮播
+*/
+<template>
+    <div class='rotation'>
+        <div v-if='rotationImg.length==1' height='100%'>
+            <img src='../../../assets/imgs/survey_pop1.png' alt />
+        </div>
+        <el-carousel v-else trigger='click' style='height:100%' :interval='5000'>
+            <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
+                <img :src='item' alt />
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+</template>
+<script>
+export default {
+    name: 'Rotation',
+    props: ['rotationImg'],
+    data() {
+        return {}
+    }
+}
+</script>
+<style lang="less" scoped>
+.rotation {
+    height: 100%;
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
+<style lang="less">
+.rotation {
+    .el-carousel__item h3 {
+        color: #475669;
+        font-size: 14px;
+        opacity: 0.75;
+        margin: 0;
+    }
+
+    .el-carousel__item:nth-child(2n) {
+        background-color: #99a9bf;
+    }
+
+    .el-carousel__item:nth-child(2n + 1) {
+        background-color: #d3dce6;
+    }
+    .el-carousel__container {
+        height: 100%;
+    }
+    .el-carousel__button {
+        height: 3px;
+        width: 16px;
+        border-radius: 2px;
+        opacity: 0.5;
+    }
+}
+</style>

+ 0 - 1
src/components/menuList.vue

@@ -67,7 +67,6 @@ export default {
 
 <style scoped lang="less">
 .menu {
-    min-width: 1366px;
     height: 48px;
     color: #1f2429;
     font-size: 16px;

+ 0 - 42
src/components/rotation.vue

@@ -1,42 +0,0 @@
-<template>
-    <div class='rotation'>
-        <a-carousel autoplay>
-            <div v-for='(item,index) in rotationImg' :key='index'>
-                <img :src='item' alt />
-            </div>
-        </a-carousel>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {}
-    },
-    props: ['rotationImg']
-}
-</script>
-<style lang="less" scoped>
-.rotation {
-    width: 100%;
-    height: 100%;
-    img {
-        // width: 100%;
-        // height: 100%;
-    }
-}
-</style>
-<style lang="less">
-.rotation {
-    .ant-carousel .slick-slide {
-        width: 100%;
-        height: 487px;
-        text-align: center;
-        line-height: 487px;
-        overflow: hidden;
-    }
-
-    .ant-carousel .slick-slide h3 {
-        color: #fff;
-    }
-}
-</style>

+ 17 - 0
src/main.js

@@ -8,6 +8,23 @@ import design from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 Vue.use(design)
 
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+
+import VueQuillEditor from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+Vue.use(VueQuillEditor)
+
+import WdEditor from '@/components/Editor'
+Vue.use(WdEditor)
+
+import Rotation from '@/components/Rotation'
+console.log(Rotation)
+Vue.use(Rotation)
+
 new Vue({
     router,
     store,

+ 1 - 0
src/utils/plugins/components.js

@@ -0,0 +1 @@
+

+ 11 - 1
src/views/floorFunc/index.vue

@@ -6,14 +6,21 @@
         <floorMap></floorMap>
         <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
         <bottomLayer></bottomLayer>
+        <div class='floorFunc'>
+            <!-- <floorMap></floorMap>楼层功能 -->
+            <a-button type='primary' @click='legendClik'>点击出现编辑图例备注弹框</a-button>
+            <legend-remarks ref='EditdMarks'></legend-remarks>
+        </div>
     </div>
 </template>
 <script>
 import floorMap from '@/components/floorMap/index.vue'
 import floorList from '@/components/floorList.vue'
 import bottomLayer from '../equipment/bottomLayer'
+import LegendRemarks from './legendremarks' //编辑图例备注
+
 export default {
-    components: { floorMap, floorList, bottomLayer },
+    components: { floorMap, floorList, bottomLayer, LegendRemarks },
     data() {
         return {
             floors: [
@@ -45,6 +52,9 @@ export default {
         }
     },
     methods: {
+        legendClik() {
+            this.$refs.EditdMarks.showModal()
+        },
         emitFloor(item) {
             this.floorInfo = item
         }

+ 40 - 0
src/views/floorFunc/legendremarks.vue

@@ -0,0 +1,40 @@
+/**
+*@author:Guoxiaohuan
+*@date:2020.05.27
+*@info:楼层功能-编辑图例备注
+*/
+<template>
+    <div class='editModel'>
+        <a-modal v-model='visible' :title='title' @ok='handleOk' ok-text='保存' cancel-text='取消' :maskClosable='false' :width='648'>
+            <wd-editor :width='width' :height='height' :text='content'></wd-editor>
+        </a-modal>
+    </div>
+</template>
+<script>
+export default {
+    name: 'EditdMarks',
+    data() {
+        return {
+            title: '编辑图例备注',
+            visible: false,
+            width: '600px',
+            height: '156px',
+            content: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后的数字,代表此位置的数量'
+        }
+    },
+    methods: {
+        showModal() {
+            this.visible = true
+        },
+        handleOk(e) {
+            this.visible = false
+        }
+    }
+}
+</script>
+
+
+<style lang="less" >
+.editModel {
+}
+</style>

+ 74 - 3
src/views/other/index.vue

@@ -1,7 +1,78 @@
 <template>
-    <div id='other_thing'>其他事项</div>
+    <div class='other_thing'>
+        <div class='other-tbs'>
+            <div class='other-box' :class='{"is-ictive":item.view}' v-for='(item,index) in tabsList' :key='index' @click='tabsClick(item,index)'>
+                <i :class='item.icon'></i>
+                <span>{{item.name}}</span>
+            </div>
+        </div>
+    </div>
 </template>
-<style lang="less">
-#other_thing {
+
+<script>
+export default {
+    data() {
+        return {
+            width: '500px',
+            height: '300px',
+            content: '1.导航不放假!2.发大V反馈表',
+            tabsList: [
+                {
+                    name: '综合事项管理',
+                    icon: 'el-icon-menu',
+                    view: false
+                },
+                {
+                    name: '辅助用房管理',
+                    icon: 'el-icon-s-release',
+                    view: false
+                }
+            ]
+        }
+    },
+    components: {},
+    methods: {
+        tabsClick(item, index) {
+            this.tabsList.forEach(el => {
+                el.view = false
+            })
+            item.view = true
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.other_thing {
+    background: #f2f5f7;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    .other-tbs {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .other-box {
+            background: #ffffff;
+            padding: 12px 16px 12px 16px;
+            display: flex;
+            align-items: center;
+            font-size: 16px;
+            // margin-top: 12px;
+            font-family: MicrosoftYaHei;
+            i {
+                display: inline-block;
+                width: 14px;
+                height: 14px;
+                margin-right: 6px;
+            }
+            span {
+                color: rgba(31, 36, 41, 1);
+                line-height: 22px;
+            }
+        }
+        .is-ictive {
+            background: linear-gradient(360deg, rgba(2, 91, 170, 1) 0, rgba(2, 91, 170, 0) 0.1);
+        }
+    }
 }
 </style>

+ 121 - 285
src/views/overview/index.vue

@@ -1,26 +1,103 @@
+/**
+*@author:Guoxiaohuan
+*@date:2020.05.26
+*@info 项目概况主页
+*/
 <template>
-    <div id='overview'>
-        <div class='overview-box'>
-            <div class='view-title'>
-                <nav>
-                    <span></span>
-                    <span>项目基本信息</span>
-                </nav>
-                <div class='view-button'>
-                    <img src='../../assets/imgs/file.svg' alt />
-                    项目资料
+    <div class='overview'>
+        <div class='view-title'>
+            <nav>
+                <span></span>
+                <span>项目基本信息</span>
+            </nav>
+            <div class='view-button'>
+                <img src='../../assets/imgs/file.svg' alt />
+                项目资料
+            </div>
+        </div>
+        <div class='view-box'>
+            <div class='view-left'>
+                <div class='lb-left'>
+                    <rotation :rotationImg='rotationImg'></rotation>
+                    <div class='lb-icon'></div>
+                    <img class='lb-img' src='../../assets/imgs/open1.svg' alt />
+                </div>
+                <div class='lb-bottom'>
+                    <nav>
+                        <span></span>
+                        <span>建筑综合信息</span>
+                    </nav>
+                    <p class='place-p1'>三明万达广场</p>
+                    <p class='place-p2'>
+                        <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
+                    </p>
+                    <div class='place-bottom'>
+                        <div class='place-box'>
+                            <div class='place-left'>
+                                <span>建筑面积</span>
+                                <span>建筑高度</span>
+                                <span>楼层分布</span>
+                                <span>车位信息</span>
+                            </div>
+                            <div class='place-right'>
+                                <span>13.07万㎡(地上9.90万㎡、地下3.55万㎡)</span>
+                                <span>裙房31.22m</span>
+                                <span>地上5层/地下2层</span>
+                                <span>地下832个/地上0个</span>
+                            </div>
+                        </div>
+                        <div class='place-box'>
+                            <div class='place-left'>
+                                <span>租赁面积</span>
+                                <span>竣工日期</span>
+                                <span>开业日期</span>
+                                <span>移交日期</span>
+                            </div>
+                            <div class='place-right'>
+                                <span>6.45㎡(地上5.82万㎡、地下0.63万㎡)</span>
+                                <span>2016年11月21日</span>
+                                <span>2016年11月21日</span>
+                                <span>2016年11月21日</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class='view-box'>
-                <div class='view-left'>
+            <div class='view-right'>
+                <div class='view-right-box'>
+                    <div class='lb-right'>
+                        <rotation :rotationImg='rotationImg'></rotation>
+                        <div class='lb-icon'></div>
+                        <img class='lb-img' src='../../assets/imgs/open1.svg' alt />
+                    </div>
+                    <div class='lb-right-bottom'>
+                        <nav>
+                            <span></span>
+                            <span>施工单位信息</span>
+                        </nav>
+                        <div class='view-right-bottom'>
+                            <el-table :data='msgData' :height='350'>
+                                <el-table-column label='序号' width='150' type='index' align='left'></el-table-column>
+                                <el-table-column label='专业' prop='type' width='150'></el-table-column>
+                                <el-table-column prop='company' label='施工单位'></el-table-column>
+                            </el-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
+                            <div class='view-right-bottom-l'>{{item.type}}</div>
+                            <div class='view-right-bottom-r'>{{item.company}}</div>
+    </div>-->
+    <!-- <div class='view-left-box'>
                     <div class='view-left-top'>
                         <div class='view-top-imgL'>
                             <rotation :rotationImg='rotationImg'></rotation>
                         </div>
                         <div class='view-top-imgR'>
                             <rotation :rotationImg='rotationImg'></rotation>
-                            <!-- <i class='i-r'></i> -->
-                            <!-- <img src='../../assets/imgs/open.svg' alt /> -->
                         </div>
                     </div>
                     <div class='view-left-bottom'>
@@ -77,27 +154,20 @@
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class='view-right'>
-                    <nav>
-                        <span></span>
-                        <span>施工单位信息</span>
-                    </nav>
-                    <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
-                        <div class='view-right-bottom-l'>{{item.type}}</div>
-                        <div class='view-right-bottom-r'>{{item.company}}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    </div>-->
 </template>
 <script>
-import Rotation from '@/components/rotation'
 export default {
     data() {
         return {
-            rightA: [
+            msgData: [
+                { type: '总包', company: '中国建筑第一工程局有限公司' },
+                { type: '弱电', company: '中国建筑第一工程局有限公司' },
+                { type: '消防', company: '中国建筑第一工程局有限公司' },
+                { type: '机电', company: '中国建筑第一工程局有限公司' },
+                { type: '给排水', company: '南京金鸿装饰工程有限公司、深圳建装业集团股份有限公司广西建工集团有限公司' },
+                { type: '精装', company: '中国建筑第一工程局有限公司' },
+                { type: '电梯', company: '中国建筑第一工程局有限公司' },
                 { type: '总包', company: '中国建筑第一工程局有限公司' },
                 { type: '弱电', company: '中国建筑第一工程局有限公司' },
                 { type: '消防', company: '中国建筑第一工程局有限公司' },
@@ -115,264 +185,30 @@ export default {
     },
     methods: {},
     components: {
-        Rotation
+        // Rotation
     }
 }
 </script>
 <style lang="less" scoped>
-#overview {
-    padding: 16px 20px 22px 20px;
-    background: #f2f5f7;
-    height: 100%;
-    .overview-box {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        .view-title {
-            margin-bottom: 16px;
-            display: flex;
-            justify-content: space-between;
-            height: 32px;
-            padding: 5px 0;
-            nav {
-                // padding: 5px 0;
-                display: flex;
-                align-items: center;
-                width: 161px;
-                span:nth-of-type(1) {
-                    width: 2px;
-                    height: 16px;
-                    background: #025baa;
-                    margin-right: 6px;
-                    display: inline-block;
-                }
-                span:nth-of-type(2) {
-                    width: 107px;
-                    height: 22px;
-                    font-size: 14px;
-                    font-family: MicrosoftYaHeiSemibold;
-                    color: #1f2429;
-                    line-height: 19px;
-                }
-            }
-            .view-button {
-                width: 106px;
-                height: 32px;
-                background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-                font-size: 14px;
-                color: #ffffff;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                img {
-                    margin-right: 6px;
-                }
-            }
-        }
-        .view-box {
-            display: flex;
-            height: 100%;
-            // height: 100%;
-            // height: calc(100vh - 45px);
-            .view-left {
-                flex: 1;
-                height: 100%;
-                // min-width: 855px;
-                // max-width: 1285px;
-                margin-right: 15px;
-                .view-left-top {
-                    // min-height: 327px;
-                    display: flex;
-                    margin-bottom: 20px;
-                    // justify-content: space-between;
-                    .view-top-imgL {
-                        height: 487px;
-                        width: 799px;
-                        // height: calc(100vh - 400px);
-                        // height: 100%;
-                        // flex: 1;
-                        // max-width: 540px;
-                        margin-right: 16px;
-                        background: rgba(216, 216, 216, 1);
-                        // position: relative;
-                        .view-top-imgL-auto {
-                            // width: 100%;
-                            // min-width: 540px;
-                            // height: 100%;
-                        }
-                        // .i-r {
-                        //     position: absolute;
-                        //     top: 0;
-                        //     right: 0;
-                        //     width: 32px;
-                        //     height: 32px;
-                        //     background: rgba(0, 0, 0, 0.6);
-                        //     box-shadow: 0px 4px 6px 0px rgba(2, 20, 37, 0.12);
-                        //     border-radius: 0px 4px 0px 4px;
-                        // }
-                        // img {
-                        //     display: inline-block;
-                        //     position: absolute;
-                        //     top: 3px;
-                        //     right: 0;
-                        //     width: 32px;
-                        //     height: 32px;
-                        // }
-                    }
-                    .view-top-imgR {
-                        height: 487px;
-                        // flex: 1;
-                        background: #cccccc;
-                        width: 453px;
-                        // position: relative;
-                        // .i-r {
-                        //     position: absolute;
-                        //     top: 0;
-                        //     right: 0;
-                        //     width: 32px;
-                        //     height: 32px;
-                        //     background: rgba(0, 0, 0, 0.6);
-                        //     box-shadow: 0px 4px 6px 0px rgba(2, 20, 37, 0.12);
-                        //     border-radius: 0px 4px 0px 4px;
-                        // }
-                        // img {
-                        //     display: inline-block;
-                        //     position: absolute;
-                        //     top: 3px;
-                        //     right: 0;
-                        //     width: 32px;
-                        //     height: 32px;
-                        // }
-                    }
-                }
-                .view-left-bottom {
-                    // height: auto;
-                    height: 449px;
-                    background: #ffffff;
-                    padding: 16px 16px 54px 16px;
-                    nav {
-                        padding: 5px 0;
-                        display: flex;
-                        align-items: center;
-                        width: 161px;
-                        background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
-                        span:nth-of-type(1) {
-                            width: 2px;
-                            height: 16px;
-                            background: #025baa;
-                            margin-right: 6px;
-                            display: inline-block;
-                        }
-                        span:nth-of-type(2) {
-                            width: 107px;
-                            height: 22px;
-                            font-size: 14px;
-                            font-family: MicrosoftYaHeiSemibold;
-                            color: #025baa;
-                            line-height: 19px;
-                        }
-                    }
-                    .place-p {
-                        margin: 16px 0;
-                        height: 22px;
-                        font-size: 14px;
-                        font-family: MicrosoftYaHei;
-                        color: rgba(31, 36, 41, 1);
-                        line-height: 19px;
-                        display: flex;
-                        align-items: center;
-                        img {
-                            margin-right: 3px;
-                        }
-                    }
-                    .place-hr {
-                        width: 823px;
-                        height: 1px;
-                        background: #979797;
-                        display: block;
-                        margin-bottom: 16px;
-                    }
-                    .place-bottom {
-                        display: flex;
-                        .place-bottom-row {
-                            display: flex;
-                            justify-content: space-around;
-                            div {
-                                span {
-                                    display: block;
-                                }
-                            }
-                            div:nth-of-type(1) {
-                                margin-right: 16px;
-                                span {
-                                    width: 56px;
-                                    font-size: 14px;
-                                    font-family: MicrosoftYaHei;
-                                    color: rgba(100, 108, 115, 1);
-                                    line-height: 32px;
-                                }
-                            }
-                            div:nth-of-type(2) {
-                                margin-right: 16px;
-                                span {
-                                    font-size: 14px;
-                                    font-family: MicrosoftYaHei;
-                                    color: rgba(31, 36, 41, 1);
-                                    line-height: 32px;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            .view-right {
-                // flex: 1;
-                min-width: 456px;
-                max-width: 595px;
-                padding: 16px;
-                background: #ffffff;
-                nav {
-                    padding: 5px 0;
-                    display: flex;
-                    align-items: center;
-                    width: 161px;
-                    background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
-                    span:nth-of-type(1) {
-                        width: 2px;
-                        height: 16px;
-                        background: #025baa;
-                        margin-right: 6px;
-                        display: inline-block;
-                    }
-                    span:nth-of-type(2) {
-                        width: 107px;
-                        height: 22px;
-                        font-size: 14px;
-                        font-family: MicrosoftYaHeiSemibold;
-                        color: #025baa;
-                        line-height: 19px;
-                    }
-                }
-                .view-right-bottom {
-                    display: flex;
-                    margin-top: 12px;
-                    .view-right-bottom-l {
-                        min-width: 42px;
-                        margin-right: 16px;
-                        font-size: 14px;
-                        font-family: MicrosoftYaHei;
-                        color: #646c73;
-                        line-height: 32px;
-                    }
-                    .view-right-bottom-r {
-                        font-size: 14px;
-                        font-family: MicrosoftYaHei;
-                        color: #1f2429;
-                        line-height: 32px;
-                    }
-                }
-            }
-        }
-    }
+@import '../../assets/css/rotation.css';
+</style>
+<style lang="less">
+.el-table thead {
+    height: 16px;
+    font-size: 12px;
+    font-family: MicrosoftYaHei;
+    color: rgba(100, 108, 115, 1);
+    line-height: 16px;
+    background: rgba(245, 246, 247, 1);
+}
+.el-table td,
+.el-table th {
+    padding: 3px 0;
+}
+.el-table--enable-row-transition .el-table__body td {
+    font-size: 12px;
+    font-family: MicrosoftYaHei;
+    color: rgba(31, 36, 41, 1);
+    line-height: 24px;
 }
 </style>