Explorar o código

项目概况基本页面、全局自适应高度

guoxiaohuan %!s(int64=4) %!d(string=hai) anos
pai
achega
cf622e1e3f

BIN=BIN
src/assets/imgs/survey_pop1.png


BIN=BIN
src/assets/imgs/survey_pop2.png


+ 32 - 32
src/components/floorMap/floorBase.vue

@@ -1,38 +1,38 @@
 <template>
-  <div id="floor_base">
-    <canvas id="map" :width="initWidth" height="800"></canvas>
-  </div>
+    <div id='floor_base'>
+        <canvas id='map' :width='initWidth' height='800'></canvas>
+    </div>
 </template>
 <script>
-import { ZoneScene } from "@saga-web/cad-engine/lib";
-import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
+import { ZoneScene } from '@saga-web/cad-engine/lib'
+import { FloorView } from '@saga-web/cad-engine/lib/FloorView'
 // import { SPainter, SPoint, SLinearGradient } from "@saga-web/draw/lib";
 export default {
-  data() {
-    return {
-      view: null, //视图
-      ZoneScene: null, //场景类
-      initWidth: null, //初始化得宽度
-      mapUrl: "/api/download/daas//b2b5a2130cf511eabf9667e7f714e00e.jsonz"
-    };
-  },
-  methods: {
-    //     clearImg() {
-    //   if (!this.ZoneScene) {
-    //     this.ZoneScene = new ZoneScene();
-    //   }
-    //   // this.ZoneScene.clearMap();
-    // },
-  },
-  mounted() {
-    //  将场景赋给view对图进行绘制
-    this.initWidth = document.documentElement.clientWidth;
-    this.view = new FloorView(`map`);
-    this.ZoneScene = new ZoneScene();
-    this.ZoneScene.loadUrl(this.mapUrl).then(res => {
-      this.view.scene = this.ZoneScene;
-      this.view.fitSceneToView();
-    });
-  }
-};
+    data() {
+        return {
+            view: null, //视图
+            ZoneScene: null, //场景类
+            initWidth: null, //初始化得宽度
+            mapUrl: '/api/download/daas//b2b5a2130cf511eabf9667e7f714e00e.jsonz'
+        }
+    },
+    methods: {
+        //     clearImg() {
+        //   if (!this.ZoneScene) {
+        //     this.ZoneScene = new ZoneScene();
+        //   }
+        //   // this.ZoneScene.clearMap();
+        // },
+    },
+    mounted() {
+        //  将场景赋给view对图进行绘制
+        this.initWidth = document.documentElement.clientWidth
+        this.view = new FloorView(`map`)
+        this.ZoneScene = new ZoneScene()
+        // this.ZoneScene.loadUrl(this.mapUrl).then(res => {
+        //   this.view.scene = this.ZoneScene;
+        //   this.view.fitSceneToView();
+        // });
+    }
+}
 </script>

+ 42 - 0
src/components/rotation.vue

@@ -0,0 +1,42 @@
+<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>

+ 6 - 2
src/main.js

@@ -4,8 +4,12 @@ import router from './router'
 import store from './store'
 Vue.config.productionTip = false
 
+import design from 'ant-design-vue'
+import 'ant-design-vue/dist/antd.css'
+Vue.use(design)
+
 new Vue({
     router,
     store,
-    render: h => h(App)
-}).$mount('#app')
+    render: (h) => h(App),
+}).$mount('#app')

+ 10 - 16
src/views/floorFunc/index.vue

@@ -1,23 +1,17 @@
 <template>
-<<<<<<< HEAD
-    <div id='floorFunc'>楼层功能</div>
-=======
-  <div id="floorFunc">
-    <floorMap></floorMap>
-  </div>
->>>>>>> 9b5954b77b080456fc7287e250f8c0bf7373a9ae
+    <div id='floorFunc'>
+        <floorMap></floorMap>
+    </div>
 </template>
 <script>
-import floorMap from "@/components/floorMap/index.vue";
+import floorMap from '@/components/floorMap/index.vue'
 export default {
-  components: { floorMap },
-  data() {
-    return {};
-  },
-  mounted() {
-
-  }
-};
+    components: { floorMap },
+    data() {
+        return {}
+    },
+    mounted() {}
+}
 </script>
 <style lang="less">
 #floorFunc {

+ 41 - 42
src/views/index.vue

@@ -1,53 +1,52 @@
 <template>
-  <div class="#home">
-    <menu-list :modelNum.sync="modelNum" @handlerouterName="handlerouterName"></menu-list>
-    <router-view />
-  </div>
+    <div class='home'>
+        <menu-list :modelNum.sync='modelNum' @handlerouterName='handlerouterName'></menu-list>
+        <router-view />
+    </div>
 </template>
 
 <script>
-import menuList from "@/components/menuList.vue";
+import menuList from '@/components/menuList.vue'
 
 export default {
-  props: [],
-  data() {
-    return {
-      modelNum: 0,
-      // shebeisheshiShow: false,
-      routerName: "aa",
-      imgSrcNum: 1,
-      tanchuanShow: false
-    };
-  },
-  computed: {},
-  created() {},
-  mounted() {},
-  watch: {
-    // tanchuanShow(newVal) {
-    //   console.log(newVal)
-    // }
-  },
-  methods: {
-    handlerouterName(val) {
-      // console.log(val);
-      this.routerName = val;
-      if (val == "device") {
-        this.modelNum = 3;
-      } else if (val == "floor") {
-        this.modelNum = 2;
-      }
+    props: [],
+    data() {
+        return {
+            modelNum: 0,
+            // shebeisheshiShow: false,
+            routerName: 'aa',
+            imgSrcNum: 1,
+            tanchuanShow: false
+        }
+    },
+    computed: {},
+    created() {},
+    mounted() {},
+    watch: {
+        // tanchuanShow(newVal) {
+        //   console.log(newVal)
+        // }
+    },
+    methods: {
+        handlerouterName(val) {
+            // console.log(val);
+            this.routerName = val
+            if (val == 'device') {
+                this.modelNum = 3
+            } else if (val == 'floor') {
+                this.modelNum = 2
+            }
+        }
+    },
+    components: {
+        menuList
     }
-  },
-  components: {
-    menuList
-  }
-};
+}
 </script>
 
-<style scoped lang="less">
-#home {
-  width: 100%;
-  height: 100%;
-  position: relative;
+<style lang="less">
+.home {
+    width: 100%;
+    height: calc(100vh - 48px);
 }
 </style>

+ 370 - 5
src/views/overview/index.vue

@@ -1,13 +1,378 @@
 <template>
     <div id='overview'>
-        <p>项目基本参数</p>
+        <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>
+            </div>
+            <div class='view-box'>
+                <div class='view-left'>
+                    <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'>
+                        <nav>
+                            <span></span>
+                            <span>建筑综合信息</span>
+                        </nav>
+                        <p class='place-p'>
+                            <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
+                        </p>
+                        <span class='place-hr'></span>
+                        <div class='place-bottom'>
+                            <div class='place-bottom-row'>
+                                <div>
+                                    <span>项目名称</span>
+                                    <span>建筑高度</span>
+                                    <span>楼层分布</span>
+                                    <span>车位信息</span>
+                                </div>
+                                <div style='min-width:172px;'>
+                                    <span>三明万达广场</span>
+                                    <span>裙房31.22m</span>
+                                    <span>地上5层/地下2层</span>
+                                    <span>地上832个/地下0个</span>
+                                </div>
+                            </div>
+                            <div class='place-bottom-row'>
+                                <div>
+                                    <span>竣工日期</span>
+                                    <span>开业日期</span>
+                                    <span>移交日期</span>
+                                </div>
+                                <div style='min-width:172px;'>
+                                    <span>2016年11月21日</span>
+                                    <span>2016年12月30日</span>
+                                    <span>2017年04月30日</span>
+                                </div>
+                            </div>
+                            <div class='place-bottom-row'>
+                                <div>
+                                    <span style='margin-bottom:32px'>建筑面积</span>
+                                    <span>租赁面积</span>
+                                </div>
+                                <div>
+                                    <span>
+                                        13.07万㎡
+                                        其中地上9.90万㎡、地下3.55万㎡
+                                    </span>
+                                    <span>
+                                        6.45㎡
+                                        其中地上5.82万㎡,地下0.63万㎡
+                                    </span>
+                                </div>
+                            </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>
 </template>
-<style lang="less">
+<script>
+import Rotation from '@/components/rotation'
+export default {
+    data() {
+        return {
+            rightA: [
+                { type: '总包', company: '中国建筑第一工程局有限公司' },
+                { type: '弱电', company: '中国建筑第一工程局有限公司' },
+                { type: '消防', company: '中国建筑第一工程局有限公司' },
+                { type: '机电', company: '中国建筑第一工程局有限公司' },
+                { type: '给排水', company: '南京金鸿装饰工程有限公司、深圳建装业集团股份有限公司广西建工集团有限公司' },
+                { type: '精装', company: '中国建筑第一工程局有限公司' },
+                { type: '电梯', company: '中国建筑第一工程局有限公司' }
+            ],
+            rotationImg: [
+                require('@/assets/imgs/survey_pop1.png'),
+                require('@/assets/imgs/survey_pop2.png'),
+                require('@/assets/imgs/survey_pop1.png')
+            ]
+        }
+    },
+    methods: {},
+    components: {
+        Rotation
+    }
+}
+</script>
+<style lang="less" scoped>
 #overview {
-    color: #1f2429;
-    p {
-        font-size: 16px;
+    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;
+                    }
+                }
+            }
+        }
     }
 }
 </style>