Pārlūkot izejas kodu

概况、事项、icon

guoxiaohuan 4 gadi atpakaļ
vecāks
revīzija
15792ac178
76 mainītis faili ar 1163 papildinājumiem un 1531 dzēšanām
  1. 6 2
      src/api/login.js
  2. BIN
      src/assets/imgs/cddt.png
  3. 0 22
      src/assets/imgs/cddt.svg
  4. BIN
      src/assets/imgs/cddt2.png
  5. 0 22
      src/assets/imgs/cddt2.svg
  6. BIN
      src/assets/imgs/cdgd.png
  7. 0 23
      src/assets/imgs/cdgd.svg
  8. BIN
      src/assets/imgs/cdgd2.png
  9. 0 23
      src/assets/imgs/cdgd2.svg
  10. BIN
      src/assets/imgs/cdgps.png
  11. 0 22
      src/assets/imgs/cdgps.svg
  12. BIN
      src/assets/imgs/cdgps2.png
  13. 0 22
      src/assets/imgs/cdgps2.svg
  14. BIN
      src/assets/imgs/cdnt.png
  15. 0 23
      src/assets/imgs/cdnt1.svg
  16. BIN
      src/assets/imgs/cdnt2.png
  17. 0 23
      src/assets/imgs/cdnt2.svg
  18. BIN
      src/assets/imgs/cdrd.png
  19. 0 22
      src/assets/imgs/cdrd.svg
  20. BIN
      src/assets/imgs/cdrd2.png
  21. 0 22
      src/assets/imgs/cdrd2.svg
  22. BIN
      src/assets/imgs/cdrq.png
  23. 0 22
      src/assets/imgs/cdrq.svg
  24. BIN
      src/assets/imgs/cdrq2.png
  25. 0 22
      src/assets/imgs/cdrq2.svg
  26. BIN
      src/assets/imgs/cdtj.png
  27. 0 22
      src/assets/imgs/cdtj.svg
  28. BIN
      src/assets/imgs/cdtj2.png
  29. 0 22
      src/assets/imgs/cdtj2.svg
  30. BIN
      src/assets/imgs/cdxf.png
  31. 0 23
      src/assets/imgs/cdxf.svg
  32. BIN
      src/assets/imgs/cdxf2.png
  33. 0 23
      src/assets/imgs/cdxf2.svg
  34. BIN
      src/assets/imgs/cgx.png
  35. BIN
      src/assets/imgs/clock.png
  36. 0 18
      src/assets/imgs/clock.svg
  37. BIN
      src/assets/imgs/dd.png
  38. 0 16
      src/assets/imgs/drafts.svg
  39. 0 17
      src/assets/imgs/favorites.svg
  40. 0 19
      src/assets/imgs/file.svg
  41. BIN
      src/assets/imgs/fuyfgl.png
  42. BIN
      src/assets/imgs/fuyfgl2.png
  43. 0 17
      src/assets/imgs/fzyf.svg
  44. 0 17
      src/assets/imgs/fzyf2.svg
  45. BIN
      src/assets/imgs/logo.png
  46. 0 30
      src/assets/imgs/open.svg
  47. 0 19
      src/assets/imgs/open1.svg
  48. 0 22
      src/assets/imgs/place.svg
  49. BIN
      src/assets/imgs/scj.png
  50. 0 17
      src/assets/imgs/swzxgyf.svg
  51. 0 17
      src/assets/imgs/swzxgyf2.svg
  52. BIN
      src/assets/imgs/wd.png
  53. 0 16
      src/assets/imgs/zhkzt.svg
  54. 0 16
      src/assets/imgs/zhkzt2.svg
  55. BIN
      src/assets/imgs/zhsx.png
  56. 0 16
      src/assets/imgs/zhsx.svg
  57. BIN
      src/assets/imgs/zhsx2.png
  58. 0 16
      src/assets/imgs/zhsx2.svg
  59. BIN
      src/assets/imgs/zk.png
  60. 0 14
      src/assets/imgs/zy.svg
  61. BIN
      src/assets/imgs/zy1.png
  62. 5 14
      src/components/Legend/src/legend.vue
  63. 5 0
      src/components/PicLarge/src/picLarge.vue
  64. 5 0
      src/components/editLengend.vue
  65. 102 177
      src/components/floorList.vue
  66. 33 8
      src/components/menuList.vue
  67. 5 0
      src/components/viewLengend.vue
  68. 5 4
      src/main.js
  69. 28 13
      src/store/index.js
  70. 410 0
      src/utils/animate.js
  71. 339 335
      src/utils/plugins/components.js
  72. 1 1
      src/views/equipment/index.vue
  73. 0 271
      src/views/other/floorList.vue
  74. 7 4
      src/views/other/index.vue
  75. 186 38
      src/views/other/zhsxOther.vue
  76. 26 19
      src/views/overview/index.vue

+ 6 - 2
src/api/login.js

@@ -1,6 +1,10 @@
 // 登录校验接口
-import httputils from "@/api/httputils"
+import httputils from '@/api/httputils'
 
 export function login(params) {
     return httputils.getJson(`/api/auth/check`, params)
-}
+}
+// 楼层
+export function queryFloor(params) {
+    return httputils.getJson(`/api/plaza/floor`, params)
+}

BIN
src/assets/imgs/cddt.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cddt.svg


BIN
src/assets/imgs/cddt2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cddt2.svg


BIN
src/assets/imgs/cdgd.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 23
src/assets/imgs/cdgd.svg


BIN
src/assets/imgs/cdgd2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 23
src/assets/imgs/cdgd2.svg


BIN
src/assets/imgs/cdgps.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cdgps.svg


BIN
src/assets/imgs/cdgps2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cdgps2.svg


BIN
src/assets/imgs/cdnt.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 23
src/assets/imgs/cdnt1.svg


BIN
src/assets/imgs/cdnt2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 23
src/assets/imgs/cdnt2.svg


BIN
src/assets/imgs/cdrd.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cdrd.svg


BIN
src/assets/imgs/cdrd2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cdrd2.svg


BIN
src/assets/imgs/cdrq.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cdrq.svg


BIN
src/assets/imgs/cdrq2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cdrq2.svg


BIN
src/assets/imgs/cdtj.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cdtj.svg


BIN
src/assets/imgs/cdtj2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/cdtj2.svg


BIN
src/assets/imgs/cdxf.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 23
src/assets/imgs/cdxf.svg


BIN
src/assets/imgs/cdxf2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 23
src/assets/imgs/cdxf2.svg


BIN
src/assets/imgs/cgx.png


BIN
src/assets/imgs/clock.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 18
src/assets/imgs/clock.svg


BIN
src/assets/imgs/dd.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 16
src/assets/imgs/drafts.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 17
src/assets/imgs/favorites.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 19
src/assets/imgs/file.svg


BIN
src/assets/imgs/fuyfgl.png


BIN
src/assets/imgs/fuyfgl2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 17
src/assets/imgs/fzyf.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 17
src/assets/imgs/fzyf2.svg


BIN
src/assets/imgs/logo.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 30
src/assets/imgs/open.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 19
src/assets/imgs/open1.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 22
src/assets/imgs/place.svg


BIN
src/assets/imgs/scj.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 17
src/assets/imgs/swzxgyf.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 17
src/assets/imgs/swzxgyf2.svg


BIN
src/assets/imgs/wd.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 16
src/assets/imgs/zhkzt.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 16
src/assets/imgs/zhkzt2.svg


BIN
src/assets/imgs/zhsx.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 16
src/assets/imgs/zhsx.svg


BIN
src/assets/imgs/zhsx2.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 16
src/assets/imgs/zhsx2.svg


BIN
src/assets/imgs/zk.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 14
src/assets/imgs/zy.svg


BIN
src/assets/imgs/zy1.png


+ 5 - 14
src/components/Legend/src/legend.vue

@@ -1,3 +1,8 @@
+/**
+*@author:Guoxiaohuan zhulizhen
+*@date:2020.05.27
+*@info:图例
+*/
 <template>
     <div>
         <div class='legend-container'>
@@ -16,9 +21,6 @@
             </el-collapse-transition>
             <edit-list></edit-list>
         </div>
-        <!-- <div class='legend2'>
-            <i class='el-icon-s-grid'></i>
-        </div>-->
         <div class='edit_map'>
             <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
                 <span class='edit-icon'>
@@ -227,17 +229,6 @@ export default {
         }
     }
 }
-.legend2 {
-    width: 44px;
-    height: 44px;
-    font-size: 18px;
-    cursor: pointer;
-    background: #ffffff;
-    text-align: center;
-    line-height: 44px;
-    position: relative;
-    top: 218px;
-}
 .edit_map {
     position: fixed;
     bottom: 28px;

+ 5 - 0
src/components/PicLarge/src/picLarge.vue

@@ -1,3 +1,8 @@
+/**
+*@author:Guoxiaohuan
+*@date:2020.05.28
+*@info:大图预览
+*/
 <template>
     <el-dialog title='图片预览' width='1080px' :visible.sync='dialogVisible' :close-on-click-modal='false'>
         <div class='pic-list'>

+ 5 - 0
src/components/editLengend.vue

@@ -1,3 +1,8 @@
+/**
+*@author:Guoxiaohuan
+*@date:2020.05.27
+*@info:图例编辑状态
+*/
 <template>
     <div class='view'>
         <div class='legend-tab2' v-if='tableData.length>0'>

+ 102 - 177
src/components/floorList.vue

@@ -1,38 +1,39 @@
-<!--  楼层按钮点击和上下活动效果-->
+/**
+*@author:Guoxiaohuan
+*@date:2020.06.02
+*@info:楼层列表
+*/
 <template>
     <div class='floor-box'>
-        <span class='box-style1' @click='showLegend'>图例</span>
         <div class='floor-list'>
-            <a-icon class='i-style1' v-if='showTopButton' type='caret-up' @click='removeTop' />
-            <a-icon class='i-style1' v-if='!showTopButton' type='caret-up' style='color:#ccc' />
-            <span class='floors'>
-                <span class='font-group'>
-                    <span
-                        class='eq-floor'
-                        v-for='(item,index) in floors'
-                        :class='item.id==floorId?"isActive":""'
-                        :key='index'
+            <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop'></i>
+            <i class='el-icon-caret-top icon-top' v-else style='color:#ccc'></i>
+            <div class='floor-out'>
+                <div class='floor-center'>
+                    <div
+                        class='floor-item'
+                        :class='item==floorId?"isActive":""'
                         @click='tabFloor(item)'
-                    >{{item.floorName}}</span>
-                </span>
-            </span>
-            <a-icon class='i-style2' v-if='showBottomButton' type='caret-down' @click='removeBottom' />
-            <a-icon class='i-style2' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />
+                        v-for='(item,index) in floorsArr'
+                        :key='index'
+                    >{{item}}</div>
+                </div>
+            </div>
+            <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom'></i>
+            <i class='el-icon-caret-bottom icon-bottom' v-else style='color:#ccc'></i>
         </div>
-        <a-icon class='box-style2' type='unordered-list' @click='showPic' />
-        <legendBox ref='legend'></legendBox>
     </div>
 </template>
-
 <script>
-import legendBox from '@/views/equipment/legendBox'
+import { animate } from '@/utils/animate.js'
+import { mapGetters } from 'vuex'
 export default {
     data() {
         return {
-            floorId: 'f1',
-            floorName: 'F3',
-            showTopButton: true,
-            showBottomButton: true
+            floorId: '1F',
+            showT: true,
+            showB: true,
+            num: 0
         }
     },
     props: {
@@ -40,187 +41,111 @@ export default {
             default: []
         }
     },
-    components: { legendBox },
+    mounted() {},
+    computed: {
+        ...mapGetters(['floorsArr'])
+    },
     methods: {
         tabFloor(item) {
-            this.showTopButton = true
-            this.showBottomButton = true
-            this.floorId = item.id
-            this.floorName = item.floorName
-            this.$emit('emitFloor', item)
-            let tempFloorIdList = []
-            this.floors.map(el => {
-                tempFloorIdList.push(el.id)
-            })
-            tempFloorIdList.forEach((el, index) => {
-                if (item.id == el) {
-                    if (index == 0) {
-                        this.showTopButton = false
-                    }
-                    if (index == this.floors.length - 1) {
-                        this.showBottomButton = false
-                    }
-                }
-            })
+            this.showT = true
+            this.showB = true
+            this.floorId = item
         },
         removeTop() {
-            let tempFloorIdList = []
-            let tempFloorIndex = 0
-            let clickCount = 0
-            this.floors.map(el => {
-                tempFloorIdList.push(el.id)
-            })
-            tempFloorIdList.forEach((el, index) => {
-                if (el == this.floorId) {
-                    tempFloorIndex = index
-                    if (tempFloorIndex == 1) {
-                        this.showTopButton = false
-                    }
-                    if (tempFloorIndex != 0) {
-                        tempFloorIndex--
-                        clickCount += 1
-                        let fontGroup = document.querySelector('.font-group')
-                        fontGroup.style.top = 254 - clickCount * 40 + 'px'
-                        this.showBottomButton = true
-                    }
-                    console.log(tempFloorIndex)
-                }
-            })
-            this.floorId = tempFloorIdList[tempFloorIndex]
+            var inner = document.querySelectorAll('.floor-item')
+            var innerbox = document.querySelector('.floor-center')
+            if (this.num < 0) {
+                this.num++
+            } else {
+                this.num = 0
+                this.showT = false
+            }
+            if (this.num <= 0) {
+                animate(innerbox, { marginTop: 28 * this.num }, 500, function() {})
+            }
         },
         removeBottom() {
-            let tempFloorIdList = []
-            let tempFloorIndex = 0
-            let clickCount = 0
-            this.floors.map(el => {
-                tempFloorIdList.push(el.id)
-            })
-            console.log(tempFloorIdList)
-            tempFloorIdList.forEach((el, index) => {
-                if (el == this.floorId) {
-                    tempFloorIndex = index
-                    if (tempFloorIndex == tempFloorIdList.length - 2) {
-                        this.showBottomButton = false
-                    }
-                    if (tempFloorIndex != tempFloorIdList.length - 1) {
-                        tempFloorIndex++
-                        clickCount += 1
-                        let fontGroup = document.querySelector('.font-group')
-                        fontGroup.style.top += clickCount * 40 + 'px'
-                        this.showTopButton = true
-                    }
-                }
-            })
-            this.floorId = tempFloorIdList[tempFloorIndex]
-        },
-        showLegend() {
-            this.$refs.legend.open()
-        },
-        showPic() {
-            this.$refs.legend.openPic()
+            var inner = document.querySelectorAll('.floor-item')
+            var innerbox = document.querySelector('.floor-center')
+            if (this.num > -(inner.length - 4)) {
+                this.num--
+            } else {
+                this.num = -(inner.length - 4)
+                this.showB = false
+            }
+            if (this.num > -(inner.length - 4)) {
+                animate(innerbox, { marginTop: 28 * this.num }, 500, function() {})
+            }
         }
     }
 }
 </script>
-
 <style lang="less" scoped>
 .floor-box {
     position: fixed;
-    top: 154px;
     right: 32px;
-
+    top: 196px;
     .floor-list {
-        position: fixed;
-        right: 32px;
-        top: 208px;
-        width: 40px;
-        background: #ffffff;
+        width: 44px;
+        height: 212px;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
+        border-radius: 2px;
+        position: relative;
+        padding: 28px 4px;
         text-align: center;
-        .floors {
-            position: fixed;
-            right: 32px;
-            top: 234px;
-            width: 40px;
-            height: 140px;
-            background: #ffffff;
-            text-align: center;
+        .floor-out {
+            height: 160px;
             overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            .font-group {
-                position: fixed;
-                right: 36px;
-                top: 234px;
-                width: 36px;
-                background: #ffffff;
-                text-align: center;
-                display: flex;
-                flex-direction: column;
-                .eq-floor {
+            overflow-y: auto;
+            position: relative;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .floor-center {
+                .floor-item {
                     width: 36px;
                     height: 28px;
-                    line-height: 28px;
-                    text-align: center;
-                    background: #fff;
-                    display: block;
+                    margin: 3px 0;
                     cursor: pointer;
-                    font-size: 14px;
-                    margin-left: 2px;
-                    border-radius: 4px;
-                }
-                .isActive {
-                    color: #025baa;
-                    background: #e1f2ff;
                 }
             }
         }
-        .i-style1 {
-            right: 32px;
-            position: fixed;
-            top: 210px;
-            width: 40px;
-            height: 28px;
-            background: #fff;
+
+        .icon-top {
             text-align: center;
-            line-height: 28px;
+            font-size: 18px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            cursor: pointer;
+            margin-top: 5px;
         }
-        .i-style2 {
-            right: 32px;
-            position: fixed;
-            top: 374px;
-            width: 40px;
-            height: 28px;
-            background: #fff;
+        .icon-bottom {
             text-align: center;
+            font-size: 18px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            margin-bottom: 5px;
+            cursor: pointer;
+            line-height: 28px;
+        }
+        .isActive {
+            border-radius: 4px;
+            color: #025baa;
+            background: #e1f2ff;
             line-height: 28px;
         }
-    }
-    .box-style1 {
-        position: fixed;
-        cursor: pointer;
-        right: 32px;
-        width: 40px;
-        height: 40px;
-        background: #fff;
-        display: block;
-        line-height: 40px;
-        text-align: center;
-        margin: 8px 0;
-        color: #025baa;
-    }
-    .box-style2 {
-        position: fixed;
-        top: 400px;
-        right: 32px;
-        width: 40px;
-        height: 40px;
-        background: #fff;
-        display: block;
-        line-height: 40px;
-        text-align: center;
-        margin: 8px 0;
-        color: #025baa;
-        cursor: pointer;
     }
 }
 </style>

+ 33 - 8
src/components/menuList.vue

@@ -12,17 +12,20 @@
         </div>
         <div class='home-right'>
             <span @click='dumpLegend'>
-                <img class='img1' src='../assets/imgs/favorites.svg' alt />
+                <img class='img1' src='../assets/imgs/scj.png' alt />
                 <span class='span1'>图例库</span>
             </span>
-            <img class='img2' src='../assets/imgs/file.svg' alt />
 
-            <span class='span2'>
-                <el-badge :value='3' class='item'>草稿箱</el-badge>
+            <span class='span-out'>
+                <img class='img2' src='../assets/imgs/cgx.png' alt />
+                <span class='span2'>草稿箱</span>
+                <span class='span2-num' v-if='value<=99'>{{value}}</span>
+                <span class='span2-num' style='line-height:10px' v-else>...</span>
+            </span>
+            <span>
+                <img class='img3' src='../assets/imgs/clock.png' alt />
+                <span class='span3'>{{times}}</span>
             </span>
-
-            <img class='img3' src='../assets/imgs/clock.svg' alt />
-            <span class='span3'>{{times}}</span>
         </div>
     </div>
 </template>
@@ -43,7 +46,8 @@ export default {
             ],
             times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
                 new Date().getHours()
-            )}:${formatTime(new Date().getMinutes())}`
+            )}:${formatTime(new Date().getMinutes())}`,
+            value: 190
         }
     },
     computed: {},
@@ -122,14 +126,35 @@ export default {
         color: #646c73;
         font-size: 14px;
         cursor: pointer;
+        display: flex;
+        align-content: center;
         img {
             margin-top: -2px;
         }
+        .span-out {
+            position: relative;
+            margin: 0 16px;
+            .span2-num {
+                position: absolute;
+                right: -5px;
+                top: 5px;
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                background: red;
+                border-radius: 90px;
+                font-size: 12px;
+                text-align: center;
+                line-height: 18px;
+                color: #ffffff;
+            }
+        }
     }
     .span1,
     .span2 {
         padding: 0 6px 0 3px;
     }
+
     .span3 {
         padding-left: 3px;
     }

+ 5 - 0
src/components/viewLengend.vue

@@ -1,3 +1,8 @@
+/**
+*@author:Guoxiaohuan
+*@date:2020.05.29
+*@info:图例展示状态
+*/
 <template>
     <div class='view'>
         <el-table

+ 5 - 4
src/main.js

@@ -31,17 +31,18 @@ import Legend from '@/components/Legend'
 Vue.use(Legend)
 
 //////////模拟传入参数
-const username = 'aiyu6';
+const username = 'aiyu6'
 /////////////////
 // 在跳入路由之前要请求获取权限信息
 router.beforeEach(async (to, from, next) => {
     if (!store.state.isrequestAuth) {
-        await store.dispatch('getUserInfo',username);
+        await store.dispatch('getUserInfo', username)
+        await store.dispatch('getFloors')
     }
-    next();
+    next()
 })
 new Vue({
     router,
     store,
     render: (h) => h(App),
-}).$mount('#app')
+}).$mount('#app')

+ 28 - 13
src/store/index.js

@@ -1,6 +1,6 @@
-import Vue from "vue"
-import Vuex from "vuex"
-import { login } from "@/api/login.js"
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { login, queryFloor } from '@/api/login.js'
 Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
@@ -8,13 +8,16 @@ export default new Vuex.Store({
         permissions: [], //权限信息 "GLSMS_VIEW":"说明书查看"、"GLSMS_SYMBOL_MANAGE": "图例库管理"、 "GLSMS_PLANARGRAPH_MANAGE":"平面图维护"
         plazas: [], //项目列表
         userInfo: {
-            employeename: "", //用户名称:艾宇;
-            orgCode: "",
-            username: "aiyu6", //账户名称
+            employeename: '', //用户名称:艾宇;
+            orgCode: '',
+            username: 'aiyu6', //账户名称
         },
-        plazaId: "1001145",
+        plazaId: '1001145',
+        floorsArr: [], //楼层数组
+    },
+    getters: {
+        floorsArr: (state) => state.floorsArr,
     },
-
     mutations: {
         // 设置是否登陆校验
         SETISREQUESTtAUTH(state, palyload) {
@@ -28,6 +31,9 @@ export default new Vuex.Store({
             state.userInfo.orgCode = palyload.orgCode
             state.userInfo.username = palyload.username
         },
+        SETFLOORS(state, data) {
+            state.floorsArr = data
+        },
     },
     //   const params = {
     //     username: 'aiyu6'
@@ -39,12 +45,21 @@ export default new Vuex.Store({
             await login({
                 username: palyload,
             }).then((res) => {
-                if (res.result == "success") {
-                    commit("SETISREQUESTtAUTH", true)
-                    commit("SETAUTHMSG", res)
+                if (res.result == 'success') {
+                    commit('SETISREQUESTtAUTH', true)
+                    commit('SETAUTHMSG', res)
                 } else {
-                    console.log("接口报错!!")
-                    commit("SETISREQUESTtAUTH", false)
+                    console.log('接口报错!!')
+                    commit('SETISREQUESTtAUTH', false)
+                }
+            })
+        },
+        getFloors(context) {
+            console.log(context)
+            queryFloor({ plazaId: context.state.plazaId }).then((res) => {
+                if (res.result == 'success') {
+                    context.commit('SETFLOORS', res.data)
+                    console.log(res.data)
                 }
             })
         },

+ 410 - 0
src/utils/animate.js

@@ -0,0 +1,410 @@
+/*
+   动画函数 animate (obj,attrObj,dur,fun,callback)
+   obj   要动画的对象
+   attrobj   要动画的属性对象{width:xxxx,height:xxx,left:xxxx,top:xxxx,opacity:xxx}
+   dur   持续时间
+   fun   动画方式
+   callback 变化完成之后要处理的内容
+*/
+/*
+  函数 colorAnimate (obj,attr,val,dur,fn,callback)
+  obj   要处理的对象
+  attr  要处理的属性  background   color
+  val   最终颜色 rbg    #
+  fn    动画的方式
+  callback  变化完成之后要处理的内容
+*/
+//动画算法
+/*
+		  Linear:无缓动效果(匀速运动);
+			Quad:二次方的缓动;
+			Cubic:三次方的缓动
+			Quartic:四次方的缓动;
+			Quintic:五次方的缓动;
+			Sinusoidal:正弦曲线的缓动;
+			Exponential:指数曲线的缓动;
+			Circular:圆形曲线的缓动;
+			Elastic:指数衰减的正弦曲线缓动;
+			Back:超过范围的三次方缓动);
+			Bounce:指数衰减的反弹缓动。
+			
+			每个效果都分三个缓动方式(方法),分别是:
+			easeIn:从0开始加速的运动;
+			easeOut:减速到0的运动;
+			easeInOut:前半段从0开始加速,后半段减速到0的运动。
+			
+			函数的四个参数分别代表:
+				t--- current time(当前时间);0 +=60   
+				b--- beginning value(初始值);100  
+				c--- change in value(变化量);500-100
+				d---duration(持续时间)  5000
+			Tween.Quad.easeInt()
+	     	运算的结果就是当前的运动路程。
+		   整理翻译:Code宝宝
+		   翻译或解释不对的地方希望各位修正、批评。
+		   50
+    Tween.Linear     
+	Tween.Quad.easeIn
+*/
+const Tween = {
+    Linear: function(t, b, c, d) {
+        return (c * t) / d + b
+    },
+    Quad: {
+        easeIn: function(t, b, c, d) {
+            return c * (t /= d) * t + b
+        },
+        easeOut: function(t, b, c, d) {
+            return -c * (t /= d) * (t - 2) + b
+        },
+        easeInOut: function(t, b, c, d) {
+            if ((t /= d / 2) < 1) return (c / 2) * t * t + b
+            return (-c / 2) * (--t * (t - 2) - 1) + b
+        },
+    },
+    Cubic: {
+        easeIn: function(t, b, c, d) {
+            return c * (t /= d) * t * t + b
+        },
+        easeOut: function(t, b, c, d) {
+            return c * ((t = t / d - 1) * t * t + 1) + b
+        },
+        easeInOut: function(t, b, c, d) {
+            if ((t /= d / 2) < 1) return (c / 2) * t * t * t + b
+            return (c / 2) * ((t -= 2) * t * t + 2) + b
+        },
+    },
+    Quart: {
+        easeIn: function(t, b, c, d) {
+            return c * (t /= d) * t * t * t + b
+        },
+        easeOut: function(t, b, c, d) {
+            return -c * ((t = t / d - 1) * t * t * t - 1) + b
+        },
+        easeInOut: function(t, b, c, d) {
+            if ((t /= d / 2) < 1) return (c / 2) * t * t * t * t + b
+            return (-c / 2) * ((t -= 2) * t * t * t - 2) + b
+        },
+    },
+    Quint: {
+        easeIn: function(t, b, c, d) {
+            return c * (t /= d) * t * t * t * t + b
+        },
+        easeOut: function(t, b, c, d) {
+            return c * ((t = t / d - 1) * t * t * t * t + 1) + b
+        },
+        easeInOut: function(t, b, c, d) {
+            if ((t /= d / 2) < 1) return (c / 2) * t * t * t * t * t + b
+            return (c / 2) * ((t -= 2) * t * t * t * t + 2) + b
+        },
+    },
+    Sine: {
+        easeIn: function(t, b, c, d) {
+            return -c * Math.cos((t / d) * (Math.PI / 2)) + c + b
+        },
+        easeOut: function(t, b, c, d) {
+            return c * Math.sin((t / d) * (Math.PI / 2)) + b
+        },
+        easeInOut: function(t, b, c, d) {
+            return (-c / 2) * (Math.cos((Math.PI * t) / d) - 1) + b
+        },
+    },
+    Expo: {
+        easeIn: function(t, b, c, d) {
+            return t == 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
+        },
+        easeOut: function(t, b, c, d) {
+            return t == d ? b + c : c * (-Math.pow(2, (-10 * t) / d) + 1) + b
+        },
+        easeInOut: function(t, b, c, d) {
+            if (t == 0) return b
+            if (t == d) return b + c
+            if ((t /= d / 2) < 1) return (c / 2) * Math.pow(2, 10 * (t - 1)) + b
+            return (c / 2) * (-Math.pow(2, -10 * --t) + 2) + b
+        },
+    },
+    Circ: {
+        easeIn: function(t, b, c, d) {
+            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
+        },
+        easeOut: function(t, b, c, d) {
+            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
+        },
+        easeInOut: function(t, b, c, d) {
+            if ((t /= d / 2) < 1) return (-c / 2) * (Math.sqrt(1 - t * t) - 1) + b
+            return (c / 2) * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
+        },
+    },
+    Elastic: {
+        easeIn: function(t, b, c, d, a, p) {
+            if (t == 0) return b
+            if ((t /= d) == 1) return b + c
+            if (!p) p = d * 0.3
+            if (!a || a < Math.abs(c)) {
+                a = c
+                var s = p / 4
+            } else var s = (p / (2 * Math.PI)) * Math.asin(c / a)
+            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin(((t * d - s) * (2 * Math.PI)) / p)) + b
+        },
+        easeOut: function(t, b, c, d, a, p) {
+            if (t == 0) return b
+            if ((t /= d) == 1) return b + c
+            if (!p) p = d * 0.3
+            if (!a || a < Math.abs(c)) {
+                a = c
+                var s = p / 4
+            } else var s = (p / (2 * Math.PI)) * Math.asin(c / a)
+            return a * Math.pow(2, -10 * t) * Math.sin(((t * d - s) * (2 * Math.PI)) / p) + c + b
+        },
+        easeInOut: function(t, b, c, d, a, p) {
+            if (t == 0) return b
+            if ((t /= d / 2) == 2) return b + c
+            if (!p) p = d * (0.3 * 1.5)
+            if (!a || a < Math.abs(c)) {
+                a = c
+                var s = p / 4
+            } else var s = (p / (2 * Math.PI)) * Math.asin(c / a)
+            if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin(((t * d - s) * (2 * Math.PI)) / p)) + b
+            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin(((t * d - s) * (2 * Math.PI)) / p) * 0.5 + c + b
+        },
+    },
+    Back: {
+        easeIn: function(t, b, c, d, s) {
+            if (s == undefined) s = 1.70158
+            return c * (t /= d) * t * ((s + 1) * t - s) + b
+        },
+        easeOut: function(t, b, c, d, s) {
+            if (s == undefined) s = 1.70158
+            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
+        },
+        easeInOut: function(t, b, c, d, s) {
+            if (s == undefined) s = 1.70158
+            if ((t /= d / 2) < 1) return (c / 2) * (t * t * (((s *= 1.525) + 1) * t - s)) + b
+            return (c / 2) * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b
+        },
+    },
+    Bounce: {
+        easeIn: function(t, b, c, d) {
+            return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b
+        },
+        easeOut: function(t, b, c, d) {
+            if ((t /= d) < 1 / 2.75) {
+                return c * (7.5625 * t * t) + b
+            } else if (t < 2 / 2.75) {
+                return c * (7.5625 * (t -= 1.5 / 2.75) * t + 0.75) + b
+            } else if (t < 2.5 / 2.75) {
+                return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b
+            } else {
+                return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b
+            }
+        },
+        easeInOut: function(t, b, c, d) {
+            if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * 0.5 + b
+            else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
+        },
+    },
+}
+/*
+   动画函数 animate (obj,attrObj,dur,fun,callback)
+   obj   要动画的对象
+   attrobj   要动画的属性对象{width:xxxx,height:xxx,left:xxxx,top:xxxx,opacity:xxx}
+   dur   持续时间
+   fun   动画方式
+   callback 回调函数 
+   */
+
+export function animate(obj, attrObj, dur, fun, callback) {
+    clearInterval(obj.t)
+    if (arguments.length == 2) {
+        dur = 500
+        fun = Tween.Linear
+        callback = null
+    }
+    if (arguments.length == 3) {
+        if (typeof dur == 'number') {
+            dur = dur
+            fun = Tween.Linear
+            callback = null
+        }
+        if (typeof dur == 'function') {
+            if (dur.length >= 4) {
+                fun = dur
+                callback = null
+                dur = 500
+            } else {
+                fun = Tween.Linear
+                callback = dur
+                dur = 500
+            }
+        }
+    }
+    if (arguments.length == 4) {
+        if (typeof dur == 'number') {
+            dur = dur
+            if (fun.length >= 4) {
+                fun = fun
+                callback = null
+            } else {
+                callback = fun
+                fun = Tween.Linear
+            }
+        } else {
+            callback = fun
+            fun = dur
+            dur = 500
+        }
+    }
+    var time = 0
+    var start = {}
+    var change = {}
+    for (var i in attrObj) {
+        start[i] = setCss(obj, i)
+        change[i] = attrObj[i] - start[i]
+    }
+
+    obj.t = setInterval(function() {
+        if (time >= dur) {
+            clearInterval(obj.t)
+            for (var i in attrObj) {
+                setCss(obj, i, attrObj[i])
+            }
+            if (callback) {
+                callback.call(obj)
+            }
+        } else {
+            for (var i in attrObj) {
+                setCss(obj, i, fun(time, start[i], change[i], dur))
+            }
+            time += 60
+        }
+    }, 60)
+}
+
+function setCss(obj, attr, val) {
+    if (obj.nodeType !== 1) {
+        return
+    }
+    //初始化参数
+    var attr = attr.replace(/^\s*|\s*$/g, '')
+    //获取值
+    if (arguments.length == 2) {
+        //位置和尺寸
+        if (attr == 'height' || attr == 'width' || attr == 'top' || attr == 'left' || attr == 'right' || attr == 'bottom') {
+            var val = obj.currentStyle ? parseInt(obj.currentStyle[attr]) : parseInt(getComputedStyle(obj, null)[attr])
+            if (!val) {
+                var str = 'offset' + attr.replace(attr.charAt(0), attr.charAt(0).toUpperCase())
+                val = obj[str]
+            }
+            return val
+        }
+
+        if (
+            attr == 'padding' ||
+            attr == 'margin' ||
+            attr == 'paddingTop' ||
+            attr == 'paddingLeft' ||
+            attr == 'paddingRight' ||
+            attr == 'paddingBottom' ||
+            attr == 'marginTop' ||
+            attr == 'marginLeft' ||
+            attr == 'marginRight' ||
+            attr == 'marginBottom'
+        ) {
+            var cc = parseInt(
+                obj.currentStyle
+                    ? obj.currentStyle[attr] == undefined || obj.currentStyle[attr] == 'auto'
+                        ? 0
+                        : obj.currentStyle[attr]
+                    : getComputedStyle(obj, null)[attr] == undefined
+                    ? 0
+                    : getComputedStyle(obj, null)[attr]
+            )
+            return cc
+        }
+        //透明度
+        if (attr == 'opacity') {
+            return obj.currentStyle ? parseFloat(obj.currentStyle[attr] || 1) : parseFloat(getComputedStyle(obj, null)[attr] || 1)
+        }
+        //颜色
+        if (
+            attr == 'color' ||
+            attr == 'background' ||
+            attr == 'backgroundColor' ||
+            attr == 'borderBottomColor' ||
+            attr == 'borderLeftColor' ||
+            attr == 'borderRightColor' ||
+            attr == 'borderTopColor'
+        ) {
+            var colors = obj.currentStyle ? obj.currentStyle[attr] || '#000000' : getComputedStyle(obj, null)[attr] || '#000000'
+            //获取对象
+            return getColor(colors)
+        }
+        if (attr == 'scrollTop') {
+            return obj.scrollTop
+        }
+
+        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
+    } else if (arguments.length == 3) {
+        switch (attr) {
+            case 'width':
+            case 'height':
+            case 'top':
+            case 'left':
+            case 'bottom':
+            case 'right':
+            case 'padding':
+            case 'margin':
+            case 'paddingLeft':
+            case 'paddingRight':
+            case 'paddingTop':
+            case 'paddingBottom':
+            case 'marginLeft':
+            case 'marginRight':
+            case 'marginTop':
+            case 'marginBottom':
+                obj.style[attr] = val + 'px'
+                break
+            case 'opacity':
+                obj.style[attr] = val
+                obj.style.filter = 'alpha(opacity=' + val * 100 + ')'
+                break
+            case 'scrollTop':
+                obj.scrollTop = val
+                break
+            case 'color':
+            case 'background':
+            case 'backgroundColor':
+            case 'borderBottomColor':
+            case 'borderLeftColor':
+            case 'borderRightColor':
+            case 'borderTopColor':
+                obj.style[attr] = val
+                break
+            default:
+                obj.style[attr] = val
+        }
+    }
+}
+
+//颜色渐变动画
+//获得颜色
+function getColor(color) {
+    var str, r, g, b, arr
+    if (typeof color == 'string') {
+        //16 进制
+        if (color.charAt(0) === '#') {
+            str = color.substring(1)
+            r = parseInt(str.substr(0, 2), 16)
+            g = parseInt(str.substr(2, 2), 16)
+            b = parseInt(str.substr(4, 2), 16)
+            arr = [r, g, b]
+            return arr
+        } else {
+            str = color.substring(4, color.length - 1)
+            return str.split(',')
+        }
+    }
+    if (color instanceof Array) {
+        return color
+    }
+}

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 339 - 335
src/utils/plugins/components.js


+ 1 - 1
src/views/equipment/index.vue

@@ -117,7 +117,7 @@ export default {
         .eq-left {
             position: fixed;
             z-index: 2;
-            width: 196px;
+            // width: 196px;
             padding-top: 100px;
             color: #646c73;
             font-size: 14px;

+ 0 - 271
src/views/other/floorList.vue

@@ -1,271 +0,0 @@
-<template>
-    <div class='floor-box'>
-        <div class='floor-list'>
-            <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop'></i>
-            <i class='el-icon-caret-top icon-top' v-else style='color:#ccc'></i>
-            <div class='floor-out'>
-                <div class='floor-center'>
-                    <div
-                        class='floor-item'
-                        :class='item.id==floorId?"isActive":""'
-                        @click='tabFloor(item)'
-                        v-for='(item,index) in floors'
-                        :key='index'
-                    >{{item.floorName}}</div>
-                </div>
-            </div>
-            <!-- 611 299 607 329 609 360 -->
-            <!-- <a-icon class='i-style1' v-if='showTopButton' type='caret-up' @click='removeTop' />
-            <a-icon class='i-style1' v-if='!showTopButton' type='caret-up' style='color:#ccc' />
-            <span class='floors'>
-                <span class='font-group'>
-                    <span
-                        class='eq-floor'
-                        v-for='(item,index) in floors'
-                        :class='item.id==floorId?"isActive":""'
-                        :key='index'
-                        @click='tabFloor(item)'
-                    >{{item.floorName}}</span>
-                </span>
-            </span>
-            <a-icon class='i-style2' v-if='showBottomButton' type='caret-down' @click='removeBottom' />
-            <a-icon class='i-style2' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />-->
-            <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom'></i>
-            <i class='el-icon-caret-bottom icon-bottom' v-else style='color:#ccc'></i>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            floorId: 'f1',
-            floorName: 'F3',
-            showT: true,
-            showB: true,
-            showTopButton: true,
-            showBottomButton: true
-        }
-    },
-    props: {
-        floors: {
-            default: []
-        }
-    },
-    methods: {
-        tabFloor(item) {
-            this.showTopButton = true
-            this.showBottomButton = true
-            this.floorId = item.id
-            this.floorName = item.floorName
-            this.$emit('emitFloor', item)
-            let tempFloorIdList = []
-            this.floors.map(el => {
-                tempFloorIdList.push(el.id)
-            })
-            tempFloorIdList.forEach((el, index) => {
-                if (item.id == el) {
-                    if (index == 0) {
-                        this.showTopButton = false
-                    }
-                    if (index == this.floors.length - 1) {
-                        this.showBottomButton = false
-                    }
-                }
-            })
-        },
-        removeTop() {
-            // let tempFloorIdList = []
-            // let tempFloorIndex = 0
-            // let clickCount = 0
-            // this.floors.map(el => {
-            //     tempFloorIdList.push(el.id)
-            // })
-            // tempFloorIdList.forEach((el, index) => {
-            //     if (el == this.floorId) {
-            //         tempFloorIndex = index
-            //         if (tempFloorIndex == 1) {
-            //             this.showT = false
-            //         }
-            //         console.log(tempFloorIndex)
-            //         if (tempFloorIndex != 0) {
-            //             tempFloorIndex--
-            //             clickCount++
-            //             console.log(clickCount)
-            //             let fontGroup = document.querySelector('.floor-center')
-            //             fontGroup.style.top = clickCount * -28 + 'px'
-            //             console.log(fontGroup.style.top)
-            //             this.showB = true
-            //         }
-            //         console.log(tempFloorIndex)
-            //     }
-            // })
-            // this.floorId = tempFloorIdList[tempFloorIndex]
-            // let map = document.querySelector('.floor-center')
-            // console.log(map.style.height)
-            // let floor = document.querySelector('.floor-item')
-            // map.style.bottom = -28 + 'px'
-            // console.log(map.style.bottom)
-        },
-        removeBottom() {
-            let tempFloorIdList = []
-            let tempFloorIndex = 0
-            let clickCount = 0
-            this.floors.map(el => {
-                tempFloorIdList.push(el.id)
-            })
-            console.log(tempFloorIdList)
-            tempFloorIdList.forEach((el, index) => {
-                if (el == this.floorId) {
-                    tempFloorIndex = index
-                    if (tempFloorIndex == tempFloorIdList.length - 2) {
-                        this.showBottomButton = false
-                    }
-                    if (tempFloorIndex != tempFloorIdList.length - 1) {
-                        tempFloorIndex++
-                        clickCount += 1
-                        let fontGroup = document.querySelector('.floor-center')
-                        fontGroup.style.top += clickCount + 28 + 'px'
-                        this.showB = true
-                    }
-                }
-            })
-            this.floorId = tempFloorIdList[tempFloorIndex]
-        }
-    }
-}
-</script>
-<style lang="less" scoped>
-.floor-box {
-    position: fixed;
-    right: 32px;
-    top: 196px;
-    .floor-list {
-        width: 44px;
-        height: 212px;
-        background: rgba(255, 255, 255, 1);
-        box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
-        border-radius: 2px;
-        position: relative;
-        padding: 28px 4px;
-        text-align: center;
-        .floor-out {
-            height: 160px;
-            overflow: hidden;
-            // overflow-y: auto;
-            position: relative;
-            // &::-webkit-scrollbar {
-            //     display: none;
-            // }
-
-            .floor-center {
-                position: absolute;
-                bottom: 0;
-                .floor-item {
-                    width: 36px;
-                    height: 28px;
-                    margin: 3px 0;
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .icon-top {
-            text-align: center;
-            font-size: 18px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 100%;
-            cursor: pointer;
-            margin-top: 5px;
-        }
-        .icon-bottom {
-            text-align: center;
-            font-size: 18px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 100%;
-            margin-bottom: 5px;
-            cursor: pointer;
-            line-height: 28px;
-        }
-        .isActive {
-            border-radius: 4px;
-            color: #025baa;
-            background: #e1f2ff;
-            line-height: 28px;
-        }
-        // background: #ffffff;
-        // text-align: center;
-        // .floors {
-        //     position: fixed;
-        //     right: 32px;
-        //     top: 234px;
-        //     width: 40px;
-        //     height: 140px;
-        //     background: #ffffff;
-        //     text-align: center;
-        //     overflow: hidden;
-        //     display: flex;
-        //     flex-direction: column;
-        //     .font-group {
-        //         position: fixed;
-        //         right: 36px;
-        //         top: 234px;
-        //         width: 36px;
-        //         background: #ffffff;
-        //         text-align: center;
-        //         display: flex;
-        //         flex-direction: column;
-        //         border: 2px solid green;
-        //         .eq-floor {
-        //             width: 36px;
-        //             height: 28px;
-        //             line-height: 28px;
-        //             text-align: center;
-        //             background: #fff;
-        //             display: block;
-        //             cursor: pointer;
-        //             font-size: 14px;
-        //             margin-left: 2px;
-        //             border-radius: 4px;
-        //             border: 1px solid red;
-        //         }
-        //         .isActive {
-        //             border-radius: 4px;
-        //             color: #025baa;
-        //             background: #e1f2ff;
-        //         }
-        //     }
-        // }
-        // .i-style1 {
-        //     right: 32px;
-        //     position: fixed;
-        //     top: 210px;
-        //     width: 40px;
-        //     height: 28px;
-        //     background: #fff;
-        //     text-align: center;
-        //     line-height: 28px;
-        // }
-        // .i-style2 {
-        //     right: 32px;
-        //     position: fixed;
-        //     top: 374px;
-        //     width: 40px;
-        //     height: 28px;
-        //     background: #fff;
-        //     text-align: center;
-        //     line-height: 28px;
-        // }
-    }
-}
-</style>

+ 7 - 4
src/views/other/index.vue

@@ -6,7 +6,7 @@
                 {{item.name}}
             </span>
         </div>
-        <div class='other-bottom'>
+        <div class='other-bottom' v-if='matterId!=1'>
             <div class='other-left'>
                 <ul>
                     <li class='li-style' v-for='(item,index) in everySystem' :key='"o"+index' @click='dialogVisible(item)'>
@@ -25,7 +25,7 @@
             </div>
         </div>
         <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
-        <zhsx-other v-if='matterId==1'></zhsx-other>
+        <zhsx-other v-if='matterId==1&&everySystem.length>0' :everySystem='everySystem'></zhsx-other>
         <div class='qtfugl' v-if='matterId==2'>
             <img src='../../assets/imgs/matter_floorB2.png' alt />
         </div>
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import floorList from './floorList'
+import floorList from '@/components/floorList.vue'
 import OtherDialog from './otherDialog'
 import { matter, floors } from '@/utils/plugins/components.js'
 import ZhsxOther from './zhsxOther'
@@ -45,7 +45,7 @@ export default {
             matter,
             floors,
             everySystem: [],
-            matterId: 2,
+            matterId: 1,
             systemName: '供电系统',
             floorInfo: {
                 floorName: 'F1',
@@ -59,17 +59,20 @@ export default {
         tabSyatem(item) {
             this.matterId = item.id
             this.everySystem = item.children
+            console.log(this.everySystem)
             this.systemName = item.name
         },
         emitFloor(item) {
             this.floorInfo = item
         },
         dialogVisible(item) {
+            console.log(item)
             this.$refs.gcfzDialog.showModal(item)
         }
     },
     mounted() {
         this.everySystem = this.matter[0].children
+        console.log(this.everySystem)
     }
 }
 </script>

+ 186 - 38
src/views/other/zhsxOther.vue

@@ -1,7 +1,77 @@
 <template>
     <div class='zhsx-box'>
         <div class='zhsx-top'>
-            <div class='zhsx-top-left'>
+            <div>
+                <el-tabs v-model='activeName' @tab-click='handleClick'>
+                    <el-tab-pane v-for='(item,index) in everySystem' :key='index' :label='`${item.label}`' :name='`${item.type}`'>
+                        <div v-if='item.type==1'>
+                            <el-date-picker
+                                v-model='value1'
+                                type='daterange'
+                                size='small'
+                                style='margin-right:12px'
+                                range-separator='至'
+                                start-placeholder='开始日期'
+                                end-placeholder='结束日期'
+                            ></el-date-picker>
+                            <Select
+                                width='224'
+                                tipPlace='top'
+                                caption='政府部门'
+                                size='small'
+                                style='margin-right:12px'
+                                :selectdata='dataSelect2'
+                                :placeholder='"请选择"'
+                            ></Select>
+                            <el-input placeholder='请按照记录事项搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
+                            <el-table :data='tableData' style='width: 100%;margin-top:12px'>
+                                <el-table-column label='序号' type='index' width='50'></el-table-column>
+                                <el-table-column prop='name' sortable label='日期'></el-table-column>
+                                <el-table-column prop='type' label='政府部门'></el-table-column>
+                                <el-table-column prop='thing' label='记录事项' :show-overflow-tooltip='true'></el-table-column>
+                                <el-table-column prop='name' label='工作要求'></el-table-column>
+                                <el-table-column prop='type' label='整改要求'></el-table-column>
+                                <el-table-column prop='name' label='附件'></el-table-column>
+                            </el-table>
+                        </div>
+                        <div v-if='item.type==2'>
+                            <Select
+                                width='224'
+                                tipPlace='top'
+                                caption='状态'
+                                size='small'
+                                style='margin-right:12px'
+                                :selectdata='dataSelect2'
+                                :placeholder='"请选择"'
+                            ></Select>
+                            <Select
+                                width='224'
+                                tipPlace='top'
+                                caption='部门'
+                                size='small'
+                                style='margin-right:12px'
+                                :selectdata='dataSelect2'
+                                :placeholder='"请选择"'
+                            ></Select>
+                            <el-input placeholder='请按照任务名称搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
+                            <el-table :data='tableData' style='width: 100%;margin-top:12px'>
+                                <el-table-column label='序号' type='index' width='50'></el-table-column>
+                                <el-table-column prop='name' sortable label='任务名称'></el-table-column>
+                                <el-table-column prop='type' label='状态'></el-table-column>
+                                <el-table-column prop='thing' label='部门' :show-overflow-tooltip='true'></el-table-column>
+                                <el-table-column prop='name' label='检测结论'></el-table-column>
+                            </el-table>
+                        </div>
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
+            <div class='zhsx-img' @click='zhsxLog'>
+                <img src='../../assets/imgs/zy1.png' alt />
+            </div>
+        </div>
+        <!-- <div class='zhsx-top'> -->
+        <!-- 第一版 暂时不要动 -->
+        <!-- <div class='zhsx-top-left'>
                 <span></span>
                 <span>综合事项记录</span>
                 <img src='../../assets/imgs/zy.svg' alt @click='zhsxLog()' />
@@ -26,9 +96,9 @@
                     :placeholder='"请选择"'
                 ></Select>
                 <el-input placeholder='请按照记录事项搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
-            </div>
-        </div>
-        <div class='zhsx-bottom'>
+        </div>-->
+        <!-- </div> -->
+        <!-- <div class='zhsx-bottom'>
             <el-table :data='tableData' style='width: 100%'>
                 <el-table-column label='序号' type='index' width='50'></el-table-column>
                 <el-table-column prop='date' sortable label='日期' width='130'></el-table-column>
@@ -41,7 +111,7 @@
             <div class='footer'>
                 <el-pagination background layout='prev, pager, next' :total='100'></el-pagination>
             </div>
-        </div>
+        </div>-->
         <zhsx-dialog ref='Dialog'></zhsx-dialog>
     </div>
 </template>
@@ -51,6 +121,7 @@ import ZhsxDialog from './zhsxDialog'
 export default {
     data() {
         return {
+            activeName: '1',
             input: '',
             tableData: [
                 {
@@ -133,11 +204,19 @@ export default {
             ]
         }
     },
+    props: ['everySystem'],
     components: { ZhsxDialog, Select },
     methods: {
         zhsxLog() {
             this.$refs.Dialog.open()
+        },
+        handleClick(tab) {
+            // this.param = tab.name
+            console.log(tab)
         }
+    },
+    mounted() {
+        console.log(this.everySystem)
     }
 }
 </script>
@@ -146,42 +225,55 @@ export default {
     height: 100%;
     padding: 66px 50px 38px 50px;
     .zhsx-top {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .zhsx-top-left {
-            display: flex;
-            align-items: center;
-            padding: 5px 0;
-            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);
-            span:nth-of-type(1) {
-                display: inline-block;
-                width: 2px;
-                height: 16px;
-                background: rgba(2, 91, 170, 1);
-                margin-right: 8px;
-            }
-            span:nth-of-type(2) {
-                display: inline-block;
-                width: 107px;
-                height: 22px;
-                font-size: 16px;
-                font-family: MicrosoftYaHeiSemibold;
-                color: rgba(2, 91, 170, 1);
-                line-height: 21px;
-                font-weight: bold;
-            }
+        position: relative;
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        // border: 1px solid greenyellow;
+        // .zhsx-top-left {
+        //     display: flex;
+        //     align-items: center;
+        //     padding: 5px 0;
+        //     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);
+        //     span:nth-of-type(1) {
+        //         display: inline-block;
+        //         width: 2px;
+        //         height: 16px;
+        //         background: rgba(2, 91, 170, 1);
+        //         margin-right: 8px;
+        //     }
+        //     span:nth-of-type(2) {
+        //         display: inline-block;
+        //         width: 107px;
+        //         height: 22px;
+        //         font-size: 16px;
+        //         font-family: MicrosoftYaHeiSemibold;
+        //         color: rgba(2, 91, 170, 1);
+        //         line-height: 21px;
+        //         font-weight: bold;
+        //     }
+        //     img {
+        //         width: 16px;
+        //         height: 16px;
+        //         margin-right: 10px;
+        //         cursor: pointer;
+        //     }
+        // }
+        // .zhsx-top-right {
+        //     display: flex;
+        // }
+        .zhsx-img {
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            left: 274px;
+            top: 3px;
             img {
-                width: 16px;
-                height: 16px;
-                margin-right: 10px;
-                cursor: pointer;
+                width: 100%;
+                height: 100%;
             }
         }
-        .zhsx-top-right {
-            display: flex;
-        }
     }
     .zhsx-bottom {
         margin-top: 12px;
@@ -196,4 +288,60 @@ export default {
         }
     }
 }
+</style>
+<style lang="less">
+.zhsx-box {
+    .el-dialog__header {
+        padding: 16px 24px;
+    }
+    .el-dialog__title {
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.85);
+        line-height: 24px;
+    }
+    .el-dialog__body {
+        padding: 0 24px;
+        height: 90%;
+    }
+    .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
+    .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
+    .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
+    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+        padding-left: 16px;
+    }
+    .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
+    .el-tabs--bottom .el-tabs__item.is-top:last-child,
+    .el-tabs--top .el-tabs__item.is-bottom:last-child,
+    .el-tabs--top .el-tabs__item.is-top:last-child {
+        padding-right: 16px;
+    }
+    .el-tabs__nav-wrap::after {
+        height: 0;
+    }
+    .el-tabs__item {
+        padding: 5px 16px;
+        height: 30px;
+        line-height: 22px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        border: 1px solid rgba(195, 199, 203, 1);
+    }
+    .el-tabs,
+    .el-tabs__content {
+        height: 94%;
+    }
+    .el-tabs__active-bar {
+        background-color: transparent !important;
+    }
+    .is-active {
+        color: #025baa;
+        border-color: #025baa;
+    }
+    .el-tabs__header {
+        margin: 0 0 12px;
+    }
+}
 </style>

+ 26 - 19
src/views/overview/index.vue

@@ -11,7 +11,7 @@
                 <span>项目基本信息</span>
             </nav>
             <div class='view-button'>
-                <img src='../../assets/imgs/file.svg' alt />
+                <img src='../../assets/imgs/wd.png' alt />
                 项目资料
             </div>
         </div>
@@ -20,7 +20,7 @@
                 <div class='lb-left'>
                     <rotation :rotationImg='rotationImg'></rotation>
                     <div class='lb-icon' @click='picClick'></div>
-                    <img class='lb-img' @click='picClick' src='../../assets/imgs/open1.svg' alt />
+                    <img class='lb-img' @click='picClick' src='../../assets/imgs/zk.png' alt />
                 </div>
                 <div class='lb-bottom'>
                     <nav>
@@ -68,7 +68,7 @@
                     <div class='lb-right'>
                         <rotation :rotationImg='rotationImg'></rotation>
                         <div class='lb-icon' @click='picClick'></div>
-                        <img class='lb-img' @click='picClick' src='../../assets/imgs/open1.svg' alt />
+                        <img class='lb-img' @click='picClick' src='../../assets/imgs/zk.png' alt />
                     </div>
                     <div class='lb-right-bottom'>
                         <nav>
@@ -77,9 +77,11 @@
                         </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-column label='序号' width='50' type='index' align='left'></el-table-column>
+                                <el-table-column label='专业' width='70' prop='type'></el-table-column>
+                                <el-table-column prop='company' label='施工单位' width='150'></el-table-column>
+                                <el-table-column label='联系人' prop='people' width='70'></el-table-column>
+                                <el-table-column prop='phone' label='联系电话' width='100'></el-table-column>
                             </el-table>
                         </div>
                     </div>
@@ -164,20 +166,25 @@ export default {
     data() {
         return {
             msgData: [
-                { type: '总包', company: '中国建筑第一工程局有限公司' },
-                { type: '弱电', company: '中国建筑第一工程局有限公司' },
-                { type: '消防', company: '中国建筑第一工程局有限公司' },
-                { type: '机电', company: '中国建筑第一工程局有限公司' },
+                { type: '总包', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '弱电', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '消防', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '机电', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
                 { type: '给排水', company: '南京金鸿装饰工程有限公司、深圳建装业集团股份有限公司广西建工集团有限公司' },
-                { type: '精装', company: '中国建筑第一工程局有限公司' },
-                { type: '电梯', company: '中国建筑第一工程局有限公司' },
-                { type: '总包', company: '中国建筑第一工程局有限公司' },
-                { type: '弱电', company: '中国建筑第一工程局有限公司' },
-                { type: '消防', company: '中国建筑第一工程局有限公司' },
-                { type: '机电', company: '中国建筑第一工程局有限公司' },
-                { type: '给排水', company: '南京金鸿装饰工程有限公司、深圳建装业集团股份有限公司广西建工集团有限公司' },
-                { type: '精装', company: '中国建筑第一工程局有限公司' },
-                { type: '电梯', company: '中国建筑第一工程局有限公司' }
+                { type: '精装', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '电梯', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '总包', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '弱电', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '消防', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '机电', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                {
+                    type: '给排水',
+                    company: '南京金鸿装饰工程有限公司、深圳建装业集团股份有限公司广西建工集团有限公司',
+                    people: '李海涛',
+                    phone: 12546548854
+                },
+                { type: '精装', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 },
+                { type: '电梯', company: '中国建筑第一工程局有限公司', people: '李海涛', phone: 12546548854 }
             ],
             rotationImg: [
                 require('@/assets/imgs/survey_pop1.png'),