组件

operationSupport/src/views/newWorkBench/components/communityManagement/overallCommunity.vue

@@ -1,76 +1,68 @@
 <template>
-    <ul>
-        <li style="background: linear-gradient(135deg, #488fff 0%, #65dcff 100%)" @click="goPath('/communityManagement/index')">
-            <div class="header-left">
-                <div class="header-left-top">
-                    <div class="header-icon"></div>
-                    <div>社区</div>
-                </div>
-            </div>
-            <div class="header-number">{{ houseData.communityTotal }}</div>
-            <div class="header-right">
-                <img src="@assets/img/img_shequ.png" alt="" />
-            </div>
-            <!-- </router-link> -->
-        </li>
-        <li style="background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%)" @click="goPath('/buildingManagement/index')">
-            <div class="header-left">
-                <div class="header-left-top">
-                    <div class="header-icon"></div>
-                    <div>楼栋</div>
-                </div>
-            </div>
-            <div class="header-number">{{ houseData.buildingTotal }}</div>
-            <div class="header-right">
-                <img src="@assets/img/img_loudong.png" alt="" />
-            </div>
-        </li>
-        <li
-            style="background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%)"
-            @click="goPath('/assetManagement/housingManagement/index')"
-        >
-            <div class="header-left">
-                <div class="header-left-top">
-                    <div class="header-icon"></div>
-                    <div>房屋</div>
-                </div>
-            </div>
-            <div class="header-number">{{ houseData.houseTotal }}</div>
-            <div class="header-right">
-                <img src="@assets/img/img_fangwu.png" alt="" />
+    <div class="modelBlock">
+        <template v-if="permissionFiltering">
+            <div class="model-title">
+                <div class="model-title-text">社区总体情况统计</div>
             </div>
-        </li>
-        <li style="background: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%)" @click="goPath('/assetManagement/shopManagement/index')">
-            <div class="header-left">
-                <div class="header-left-top">
-                    <div class="header-icon"></div>
-                    <div>商铺</div>
+            <div class="model-contents">
+                <div
+                    class="blockmuen"
+                    :style="item.style"
+                    v-for="(item, index) in blockArr"
+                    :key="index"
+                    @click="$router.push({ path: item.path })"
+                >
+                    <div class="number">{{ houseData[item.fontObj] }}</div>
+                    <div class="text">{{ item.name }}</div>
                 </div>
             </div>
-            <div class="header-number">{{ houseData.shopsTotal }}</div>
-            <div class="header-right">
-                <img src="@assets/img/img_shangpu.png" alt="" />
-            </div>
-        </li>
-        <li style="background: linear-gradient(135deg, #884dd2 0%, #df63cc 100%)" @click="goPath('/ownerManagement/index')">
-            <div class="header-left">
-                <div class="header-left-top">
-                    <div class="header-icon"></div>
-                    <div>住户</div>
-                </div>
-            </div>
-            <div class="header-number">{{ houseData.residentTotal }}</div>
-            <div class="header-right">
-                <img src="@assets/img/img_zhuhu.png" alt="" />
-            </div>
-        </li>
-    </ul>
+        </template>
+        <no-permission v-else tipsText="社区总体情况统计"></no-permission>
+    </div>
 </template>
 <script>
+import permissionComponent from '../permissionComponent';
 export default {
+    mixins: [permissionComponent],
     data() {
         return {
-            houseData: {}
+            defaultModel: {
+                permissUrl: '11',
+                titleName: '房产管理'
+            },
+            houseData: {},
+            blockArr: [
+                {
+                    style: 'background: linear-gradient(135deg, #488fff 0%, #65dcff 100%)',
+                    name: '社区',
+                    fontObj: 'communityTotal',
+                    path: '/communityManagement/index'
+                },
+                {
+                    style: 'background: linear-gradient(315deg, #5EEDCC 0%, #24C3F1 100%);',
+                    name: '楼栋',
+                    fontObj: 'buildingTotal',
+                    path: '/buildingManagement/index'
+                },
+                {
+                    style: 'background: linear-gradient(135deg, #F0646C 0%, #F4994E 100%);',
+                    name: '房屋',
+                    fontObj: 'houseTotal',
+                    path: '/assetManagement/housingManagement/index'
+                },
+                {
+                    style: 'background: linear-gradient(135deg, #7178FF 0%, #D2A4FF 100%);',
+                    name: '商铺',
+                    fontObj: 'shopsTotal',
+                    path: '/assetManagement/shopManagement/index'
+                },
+                {
+                    style: 'background: linear-gradient(135deg, #884DD2 0%, #DF63CC 100%);',
+                    name: '住户',
+                    fontObj: 'residentTotal',
+                    path: '/ownerManagement/index'
+                }
+            ]
         };
     },
     methods: {
@@ -89,4 +81,27 @@ export default {
         this.getHouseData();
     }
 };
-</script>
+</script>
+<style lang="scss" scoped>
+@import '../style.scss';
+.modelBlock {
+    .model-contents {
+        height: 50%;
+        margin: 5% 0;
+        display: grid;
+        row-gap: rem(20);
+        column-gap: rem(20);
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        .blockmuen {
+            border-radius: rem(10);
+            box-sizing: border-box;
+            padding-left: rem(20);
+            padding-top: rem(20);
+            cursor: pointer;
+            .number {
+                font-size: rem(30);
+            }
+        }
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/index.js

@@ -20,7 +20,7 @@
 // dispatchWorkOrder 待分派工单 OK
 // taskType 巡检任务类型分布 数据格式待调试
 // alarmInformation 设备告警信息  单条没有跳转
-// overallCommunity 社区总体情况统计 style
+// overallCommunity 社区总体情况统计 OK
 const comUrl = 'newWorkBench/components/'
 export default {
   components: {

operationSupport/src/views/newWorkBench/components/permissionComponent.js

@@ -37,8 +37,13 @@ export default {
   watch: {
     //全局社区接口调用
     homeCommunityAll(val) {
-      this.mixins_query.communityId = val;
-      this.getData();
+      try {
+        this.mixins_query.communityId = val;
+        this.getData();
+      } catch {
+
+      }
+
     }
   },
   methods: {

operationSupport/src/views/newWorkBench/editWorkbench.vue

@@ -44,6 +44,10 @@ export default {
                 {
                     model_id: 4,
                     lable: '模板四'
+                },
+                {
+                    model_id: 5,
+                    lable: '模板五'
                 }
             ]
         };

operationSupport/src/views/newWorkBench/template/index.js

@@ -1,19 +1,14 @@
 
-import modularLoading from '@views/newWorkBench/template/modularLoading.vue';
-import leftAssembly from '@views/newWorkBench/template/leftAssembly.vue';
-import modelOne from '@views/newWorkBench/template/styleOne.vue';
-import modelTwo from '@views/newWorkBench/template/styleTwo.vue';
-import modelThree from '@views/newWorkBench/template/styleThree.vue';
-import modelFour from '@views/newWorkBench/template/styleFour.vue';
-
+const comUrl = `newWorkBench/template/`
 export default {
   components: {
-    modularLoading,
-    leftAssembly,
-    modelOne,
-    modelTwo,
-    modelThree,
-    modelFour
+    modularLoading: resolve => require([`@views/${comUrl}modularLoading.vue`], resolve),
+    leftAssembly: resolve => require([`@views/${comUrl}leftAssembly.vue`], resolve),
+    modelOne: resolve => require([`@views/${comUrl}styleOne.vue`], resolve),
+    modelTwo: resolve => require([`@views/${comUrl}styleTwo.vue`], resolve),
+    modelThree: resolve => require([`@views/${comUrl}styleThree.vue`], resolve),
+    modelFour: resolve => require([`@views/${comUrl}styleFour.vue`], resolve),
+    modelFive: resolve => require([`@views/${comUrl}styleFive.vue`], resolve),
   },
   data() {
     return {
@@ -22,6 +17,7 @@ export default {
         2: 'modelTwo',
         3: 'modelThree',
         4: 'modelFour',
+        5: "modelFive"
       }
     }
   }

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

@@ -0,0 +1,125 @@
+<template>
+    <div class="contentShow">
+        <div
+            class="overflowHidden list_border mr10"
+            :class="thisUpper == index + 1 && !!thisItems ? `moveHover ${item.className}` : item.className"
+            @dragleave="dragleave($event, index + 1)"
+            @dragover="dragover($event, index + 1)"
+            @drop="drop($event, index + 1)"
+            v-for="(item, index) in latticeArr"
+            :key="index"
+        >
+            <component :is="componentsIdArr[pageLoction[index + 1]]"></component>
+        </div>
+    </div>
+</template>
+<script>
+import comp from '@views/newWorkBench/components/index.js';
+export default {
+    mixins: [comp],
+    data() {
+        return {
+            thisUpper: null,
+            thisItems: null,
+            pageLoction: {},
+            latticeArr: [
+                {
+                    className: 'list_1-2'
+                },
+                {
+                    className: 'list_2-2_3-2'
+                },
+                {
+                    className: 'list_1-4'
+                },
+                {
+                    className: 'list_2-1'
+                },
+                {
+                    className: 'list_2-4'
+                },
+
+                {
+                    className: 'list_3-1x2'
+                },
+                {
+                    className: 'list_3-3x2'
+                }
+            ]
+        };
+    },
+    created() {
+        if (!!this.$parent.oldValue.positionInfo) {
+            this.pageLoction =
+                typeof this.$parent.oldValue.positionInfo == 'object'
+                    ? this.$parent.oldValue.positionInfo
+                    : JSON.parse(this.$parent.oldValue.positionInfo).model == 5
+                    ? JSON.parse(this.$parent.oldValue.positionInfo).pageLoction
+                    : {};
+        }
+    },
+    mounted() {},
+    computed: {},
+    methods: {
+        dragleave(e, index) {
+            //当拖拽离开这个div时执行的事件
+            this.thisItems = null;
+        },
+        dragover(e, index) {
+            this.thisUpper = index;
+            this.thisItems = index;
+            //拖拽在这个div里面拖拽时执行的事件
+            //一定要执行preventDefault(),否则drop事件不会被触发
+            e.preventDefault();
+        },
+        drop(e, index) {
+            //在div里拖拽停止时执行的事件
+            let itemValue = this.$store.getters['getDragItem'];
+            for (let k in this.pageLoction) {
+                if (this.pageLoction[k] == itemValue.data_id) {
+                    this.pageLoction[k] = null;
+                }
+            }
+            this.pageLoction[this.thisUpper] = itemValue.data_id;
+            this.thisItems = null;
+            this._watcher.run();
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+
+.contentShow {
+    border: 1px solid $BackColor;
+    width: calc(100% - 194px);
+    border-radius: 4px;
+    padding: rem(10);
+    display: grid;
+    grid-template-columns: 2fr 2fr 2fr 2fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    gap: 0px;
+    height: 100%;
+    .list_1-1 {
+        grid-area: 1 / 1 / 1 / 1;
+    }
+    .list_2-2_3-2 {
+        grid-area: 2 span/ 2 / 3 / span 2;
+    }
+    .list_1-4 {
+        grid-area: 1 / 4 / 1 / 4;
+    }
+    .list_2-1 {
+        grid-area: 2 / 1 / 2 / 1;
+    }
+    .list_2-4 {
+        grid-area: 2 / 4 / 2 / 4;
+    }
+    .list_3-1x2 {
+        grid-area: 3 / 1 / 3 / span 2;
+    }
+    .list_3-3x2 {
+        grid-area: 3 / 3 / 3  / span 4;
+    }
+}
+</style>