工作台模块一二

operationSupport/src/main.js

@@ -45,6 +45,7 @@ Vue.use(directived);
 Vue.use(ElementUI, {
     size: 'small'
 });
+
 window.onresize = () => {
     let size = document.body.clientWidth / 1920;
     store.commit("setScale", size);

operationSupport/src/views/newWorkBench/components/map.vue

@@ -1,5 +1,11 @@
 <template>
     <div class="mapItems">
+        <div class="mapMasp" v-if="loadding">
+            <div class="el-loading-spinner">
+                <i class="el-icon-loading"></i>
+                <div class="el-loading-text">地图加载中</div>
+            </div>
+        </div>
         <div class="topSelect">
             <div></div>
         </div>
@@ -15,56 +21,22 @@ export default {
             marker: '',
             addressName: '', //地址查询名称
             poisArray: [],
-            thisMapPot: {}
+            thisMapPot: {},
+            loadding: true
         };
     },
     mounted() {},
     computed: {},
     methods: {
         init() {
-            let _this = this;
             this.map = new AMap.Map('mapInit', {
-                // center: this.params.communityLoc.length == 2 ? this.params.communityLoc : '',
                 resizeEnable: true, //是否监控地图容器尺寸变化
                 zoom: 16, //初始化地图层级
                 mapStyle: 'amap://styles/darkblue'
             });
-            // this.map.on('complete', () => {
-            //     if (!!_this.params.location) {
-            //         let arr = this.params.location.split(',');
-            //         this.addIcon({ lng: arr[0], lat: arr[1] });
-            //     }
-            // });
-
-            // this.map.on('click', this.mapClick);
-            // this.placeSearch = new AMap.PlaceSearch({
-            //     map: _this.map,
-            //     city: '广东', //020
-            //     citylimit: true, //定点范围
-            //     autoFitView: true
-            // });
-            // AMap.event.addListener(this.placeSearch, 'markerClick', (e) => {
-            //     this.thisMapPot = e.event.lnglat;
-            //     this.$message.success('选择成功');
-            // });
-        },
-        addIcon(e) {
-            if (!!this.marker) {
-                this.map.remove(this.marker);
-                this.marker = '';
-            }
-            this.thisMapPot = e;
-            let loc = [e.lng, e.lat];
-            this.marker = new AMap.Marker({
-                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
-                position: loc,
-                map: this.map
+            this.map.on('complete', () => {
+                this.loadding = false;
             });
-            this.marker.setLabel({
-                offset: new AMap.Pixel(-50, 35),
-                content: !!this.params.data.pointName ? `巡更名称：${this.params.data.pointName}` : `巡更经纬度：${e.lng}，${e.lat}`
-            });
-            this.map.setFitView();
         }
     },
     destroyed() {
@@ -72,14 +44,26 @@ export default {
         this.marker = '';
     },
     created() {
-        this.$nextTick(() => {
+        setTimeout(() => {
             this.init();
-        });
+        }, 100);
     }
 };
 </script>
 <style scoped lang="scss">
 @import '@assets/css/public-style.scss';
+.mapMasp {
+    position: absolute;
+    z-index: 2000;
+    background-color: rgba(0, 0, 0, 1);
+    margin: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    -webkit-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+}
 .mapItems {
     height: 100%;
     position: relative;
@@ -96,7 +80,6 @@ export default {
     height: 100%;
     /deep/ .amap-marker-label {
         border: 0 none;
-        background-color: #fff;
         white-space: nowrap;
         box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
         border-radius: 5px;

operationSupport/src/views/newWorkBench/components/ownerApproval.vue

@@ -14,7 +14,7 @@
                         <div>房产地址：</div>
                     </div>
                 </div>
-                <div class="listInformation_operation">申请时间： <span></span></div>
+                <div class="listInformation_operation">申请时间： <span class="zoniot_font zoniot-icon-shenhe"></span></div>
             </div>
             <div class="listInformation">
                 <div class="flex">
@@ -24,7 +24,7 @@
                         <div>房产地址：</div>
                     </div>
                 </div>
-                <div class="listInformation_operation">申请时间： <span></span></div>
+                <div class="listInformation_operation">申请时间： <span class="zoniot_font zoniot-icon-shenhe"></span></div>
             </div>
             <div class="listInformation">
                 <div class="flex">
@@ -34,7 +34,7 @@
                         <div>房产地址：</div>
                     </div>
                 </div>
-                <div class="listInformation_operation">申请时间： <span></span></div>
+                <div class="listInformation_operation">申请时间： <span class="zoniot_font zoniot-icon-shenhe"></span></div>
             </div>
         </div>
     </div>

operationSupport/src/views/newWorkBench/components/pendingComplaints.vue

@@ -15,7 +15,7 @@
                     <div>投诉内容：</div>
                     <div>投诉时间：</div>
                 </div>
-                <div class="listInformation_operation"><span></span></div>
+                <div class="listInformation_operation"><span class="zoniot_font  zoniot-icon-chuli"></span></div>
             </div>
         </div>
     </div>
@@ -50,7 +50,7 @@ export default {
         },
         toPage() {
             this.$router.push({
-                path: '/ownerManagement/ownerReview/index'
+                path: '/alarmManagement/details'
             });
         }
     }

operationSupport/src/views/newWorkBench/editWorkbench.vue

@@ -60,14 +60,14 @@ export default {
                     model_id: 2,
                     lable: '模板二'
                 },
-                {
-                    model_id: 3,
-                    lable: '模板三'
-                },
-                {
-                    model_id: 4,
-                    lable: '模板四'
-                }
+                // {
+                //     model_id: 3,
+                //     lable: '模板三'
+                // },
+                // {
+                //     model_id: 4,
+                //     lable: '模板四'
+                // }
             ],
             componentsSelect: [
                 {
@@ -149,6 +149,9 @@ export default {
             });
         }
     },
+    destroyed() {
+        this.$store.dispatch('collapse', false);
+    },
     created() {
         this.$store.dispatch('collapse', true);
         this.communityNameList();

operationSupport/src/views/newWorkBench/index.vue

@@ -1,17 +1,13 @@
 <template>
-    <div class="workbench">
-        <div class="list_1x1"></div>
-        <div class="list_2x2"></div>
-        <div class="list_1x1"></div>
-        <div class="list_1x1"></div>
-        <div class="list_1x1"></div>
-        <div class="list_1x2"></div>
+    <div class="indexWorkbench">
+        <model-one></model-one>
     </div>
 </template>
         
 <script>
+import workcommonFcuntion from './template/index.js';
 export default {
-    components: {},
+    mixins: [workcommonFcuntion],
     data() {
         return {
             dataWater: {
@@ -37,41 +33,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '@assets/css/public-style.scss';
-@mixin inline_block {
-    display: inline-block;
-    background: #171f32;
-    border-radius: rem(4);
-}
-//宽度 间距 $mr 平均分布 $speed倍速
-@mixin average($mr: 20, $speed: 2) {
-    width: calc((100% - #{rem($mr)}) / #{$speed});
-}
-.workbench {
-    background: #2c354a;
+.indexWorkbench {
+    color: white;
     height: 100%;
-    height: rem(874);
-    display: flex;
-    flex-flow: wrap;
-    align-content: flex-start;
-    column-gap: rem(20);
-    row-gap: rem(20);
-    .list_1x1 {
-        @include average(60, 4);
-        max-height: rem(278);
-        @include inline_block;
-        height: calc((100% - #{rem(40)}) / 3);
-    }
-    .list_1x2 {
-        @include average(20, 2);
-        max-height: rem(278);
-        @include inline_block;
-        height: calc((100% - #{rem(40)}) / 3);
-    }
-    .list_2x2 {
-        @include average(20, 2);
-        max-height: rem(576);
-        @include inline_block;
-        height: calc((100% - #{rem(40)}) / 3 * 2);
+    min-height: rem(700);
+    .contentShow {
+        width: 100%;
+        border: none;
+        padding: 0;
     }
 }
 </style>

operationSupport/src/views/newWorkBench/template/styleOne.vue

@@ -1,29 +1,25 @@
 <template>
     <div class="contentShow">
-        <div class="twoBottoms">
-            <div class="list_1-1 overflowHidden list_border mr10">
-                <common-functions></common-functions>
-            </div>
-            <div class="list_2-1 overflowHidden list_border mr10">
-                <complaints-suggestions></complaints-suggestions>
-            </div>
-            <div class="list_1_2-2 overflowHidden list_border mr10">
-                <maps></maps>
-            </div>
-            <div class="list_1-3 overflowHidden list_border mr10">
-                <collection-rate></collection-rate>
-            </div>
-            <div class="list_2-3 overflowHidden list_border mr10">
-                <rental-and-sale-rate></rental-and-sale-rate>
-            </div>
+        <div class="list_1-1 overflowHidden list_border mr10">
+            <common-functions></common-functions>
         </div>
-        <div class="bottoms" style="display: flex">
-            <div class="list_3-1 overflowHidden list_border mr10">
-                <satisfaction></satisfaction>
-            </div>
-            <div class="list_3-2 overflowHidden list_border mr10">
-                <discount></discount>
-            </div>
+        <div class="list_1_2-2 overflowHidden list_border mr10">
+            <maps></maps>
+        </div>
+        <div class="list_1-3 overflowHidden list_border mr10">
+            <collection-rate></collection-rate>
+        </div>
+        <div class="list_2-1 overflowHidden list_border mr10">
+            <complaints-suggestions></complaints-suggestions>
+        </div>
+        <div class="list_2-3 overflowHidden list_border mr10">
+            <rental-and-sale-rate></rental-and-sale-rate>
+        </div>
+        <div class="list_3-1 overflowHidden list_border mr10">
+            <satisfaction></satisfaction>
+        </div>
+        <div class="list_3-2 overflowHidden list_border mr10">
+            <discount></discount>
         </div>
     </div>
 </template>
@@ -48,37 +44,29 @@ export default {
     border-radius: 4px;
     padding: rem(10);
     height: 100%;
-    .twoBottoms {
-        height: calc(calc(100% / 3) * 2);
-        display: grid;
-        grid-template-columns: 2fr 4fr 2fr;
-        grid-template-rows: 1fr 1fr;
-    }
+    display: grid;
+    grid-template-columns: 2fr 2fr 2fr 2fr;
+    grid-template-rows: 1fr 1fr 1fr;
     .list_1-1 {
         grid-area: 1 / 1 / 1 / 1;
     }
     .list_1_2-2 {
-        grid-area: 1 / 2 / span 2 / 2;
+        grid-area: 2 span/ 2 / 3 / span 2;
     }
     .list_1-3 {
-        grid-area: 1 / 3 / 1 / 3;
+        grid-area: 1 / 4 / 1 / 4;
     }
     .list_2-1 {
         grid-area: 2 / 1 / 2 / 1;
     }
     .list_2-3 {
-        grid-area: 2 / 3 / 2 / 3;
-    }
-    .bottoms {
-        height: calc(calc(100% / 3) * 1 - 20px);
+        grid-area: 2 / 4 / 2 / 4;
     }
     .list_3-1 {
-        width: calc(50% - #{rem(20)});
-        height: 100%;
+        grid-area: 3 / 1 / 3 / span 2;
     }
     .list_3-2 {
-        width: calc(50% - #{rem(20)});
-        height: 100%;
+        grid-area: 3 / 3 / 3 / span 4;
     }
 }
 </style>