首页组件

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

@@ -1,52 +1,50 @@
 // map中间地图data_id:1,
-// commonFunctions常用功能data_id:1,
 // complaintsSuggestions投诉建议类型分布data_id:1,  OK
-// complaintsAndSuggestions投诉建议数量趋势data_id:1,  OK
-
+// commonFunctions常用功能data_id:1,
+// satisfaction 服务满意度趋势 data_id:1 OK
 // discount设备告警趋势data_id:1,OK
+// rentalAndSaleRate房屋租售率data_id:1, OK
+// collectionRate 收款率分析 data_id:1 OK
 // householdGender住户性别占比data_id:1, OK
 // householdIdentity住户身份占比data_id:1, OK
 // equipmentStatistics设备设施统计data_id:1,
-// rentalAndSaleRate房屋租售率data_id:1, OK
-// satisfaction 服务满意度趋势 data_id:1 OK
-// collectionRate 收款率分析 data_id:1 OK
 // ownerApproval 业主审批 data_id:1
 // pendingComplaints 待处理投诉 data_id:1
+// complaintsAndSuggestions投诉建议数量趋势data_id:1,  OK
 
 
 
 import maps from '@views/newWorkBench/components/map.vue';
-import commonFunctions from '@views/newWorkBench/components/commonFunctions.vue';
-import householdIdentity from '@views/newWorkBench/components/householdIdentity.vue';
-import householdGender from '@views/newWorkBench/components/householdGender.vue';
-import equipmentStatistics from '@views/newWorkBench/components/equipmentStatistics.vue';
-import rentalAndSaleRate from '@views/newWorkBench/components/rentalAndSaleRate.vue';
-import discount from '@views/newWorkBench/components/discount.vue';
 import complaintsSuggestions from '@views/newWorkBench/components/complaintsSuggestions.vue';
-import complaintsAndSuggestions from '@views/newWorkBench/components/complaintsAndSuggestions.vue';
+import commonFunctions from '@views/newWorkBench/components/commonFunctions.vue';
 import satisfaction from '@views/newWorkBench/components/satisfaction.vue';
+import discount from '@views/newWorkBench/components/discount.vue';
+import rentalAndSaleRate from '@views/newWorkBench/components/rentalAndSaleRate.vue';
 import collectionRate from '@views/newWorkBench/components/collectionRate.vue';
-
+import householdGender from '@views/newWorkBench/components/householdGender.vue';
+import householdIdentity from '@views/newWorkBench/components/householdIdentity.vue';
+import equipmentStatistics from '@views/newWorkBench/components/equipmentStatistics.vue';
 import ownerApproval from '@views/newWorkBench/components/ownerApproval.vue';
 import pendingComplaints from '@views/newWorkBench/components/pendingComplaints.vue';
+import complaintsAndSuggestions from '@views/newWorkBench/components/complaintsAndSuggestions.vue';
 
 
 export default {
   components: {
     //小组件模块
     maps,
-    commonFunctions,
-    householdIdentity,
-    householdGender,
-    equipmentStatistics,
-    rentalAndSaleRate,
-    discount,
     complaintsSuggestions,
-    complaintsAndSuggestions,
+    commonFunctions,
     satisfaction,
+    discount,
+    rentalAndSaleRate,
     collectionRate,
+    householdGender,
+    householdIdentity,
+    equipmentStatistics,
     ownerApproval,
-    pendingComplaints
+    pendingComplaints,
+    complaintsAndSuggestions,
   },
   data() {
     return {
@@ -59,6 +57,12 @@ export default {
         5: 'discount',
         6: 'rentalAndSaleRate',
         7: 'collectionRate',
+        8: "householdGender",
+        9: 'householdIdentity',
+        10: 'equipmentStatistics',
+        11: "ownerApproval",
+        12: "pendingComplaints",
+        13: "complaintsAndSuggestions"
       }
     }
   },

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

@@ -8,9 +8,7 @@
     </div>
 </template>
 <script>
-import permissionComponent from './permissionComponent';
 export default {
-    mixins: [permissionComponent],
     data() {
         return {
             map: '',

operationSupport/src/views/newWorkBench/editWorkbench.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="operation">
             <left-assembly></left-assembly>
-            <component :is="modelArr[model]" ></component>
+            <component :is="modelArr[model]"></component>
         </div>
     </div>
 </template>
@@ -40,6 +40,10 @@ export default {
                 {
                     model_id: 3,
                     lable: '模板三'
+                },
+                {
+                    model_id: 4,
+                    lable: '模板四'
                 }
             ]
         };

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

@@ -1,28 +1,27 @@
 <template>
     <div class="leftAssembly">
-        <el-select v-model="componentsValue" clearable @change="changeSelect" class="saveColumn-select">
+        <el-select v-model="componentsValue" @change="changeSelect" class="saveColumn-select">
             <el-option v-for="(item, index) in componentsSelect" :key="index" :label="item.lable" :value="item.model_id"></el-option>
         </el-select>
         <div class="componentsBlock">
-            <template v-for="(item, index) in componentsArrar">
-                <div
-                    class="moveBlock"
-                    :data-id="item.data_id"
-                    :key="index"
-                    draggable
-                    @dragstart="dragstart($event, item)"
-                    @dragend="dragend($event)"
-                    @drag="drag($event)"
-                >
-                    <div class="moveBlock_titles">{{ item.title }}</div>
-                    <div class="moveBlock_img">
-                        <img :src="item.imgPng" :alt="item.title" />
-                    </div>
-                    <div class="moveBlock_icon">
-                        <img :src="item.imgIcon" :alt="item.title" />
-                    </div>
+            <div
+                class="moveBlock"
+                :data-id="item.data_id"
+                v-for="(item, index) in putCompArr"
+                :key="index"
+                draggable
+                @dragstart="dragstart($event, item)"
+                @dragend="dragend($event)"
+                @drag="drag($event)"
+            >
+                <div class="moveBlock_titles">{{ item.title }}</div>
+                <div class="moveBlock_img">
+                    <img :src="item.imgPng" :alt="item.title" />
                 </div>
-            </template>
+                <div class="moveBlock_icon">
+                    <img :src="item.imgIcon" :alt="item.title" />
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -34,23 +33,78 @@ export default {
                 {
                     model_id: 0,
                     lable: '全部'
+                },
+                {
+                    model_id: 1,
+                    lable: '房产管理'
+                },
+                {
+                    model_id: 2,
+                    lable: '住户管理'
+                },
+                {
+                    model_id: 3,
+                    lable: '收费管理'
+                },
+                {
+                    model_id: 4,
+                    lable: '设备管理'
+                },
+                {
+                    model_id: 5,
+                    lable: '告警管理'
+                },
+                {
+                    model_id: 6,
+                    lable: '运维工单'
+                },
+                {
+                    model_id: 7,
+                    lable: '设备巡检'
+                },
+                {
+                    model_id: 8,
+                    lable: '安保巡更'
+                },
+                {
+                    model_id: 9,
+                    lable: '客服服务'
+                },
+                {
+                    model_id: 10,
+                    lable: '商业管理'
+                },
+                {
+                    model_id: 11,
+                    lable: '社区运营'
+                },
+                {
+                    model_id: 12,
+                    lable: '绩效管理'
+                },
+                {
+                    model_id: 13,
+                    lable: '流程管理'
                 }
             ],
             componentsArrar: [
                 {
                     data_id: 1,
                     title: '高德地图',
+                    type: 0,
                     imgPng: require('@assets/img/formulation/img_ditu@2x.png'),
                     imgIcon: require('@assets/img/formulation/tag_4x@2x.png')
                 },
                 {
                     data_id: 2,
+                    type: 9,
                     title: '投诉建议',
                     imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
                     imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                 },
                 {
                     data_id: 3,
+                    type: 0,
                     title: '常用功能',
                     imgPng: require('@assets/img/formulation/img_changyonggongneng@2x.png'),
                     imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
@@ -58,31 +112,93 @@ export default {
                 {
                     data_id: 4,
                     title: '服务满意度趋势',
+                    type: 9,
                     imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
                     imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                 },
                 {
                     data_id: 5,
                     title: '设备告警趋势',
+                    type: 5,
                     imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
                     imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                 },
                 {
                     data_id: 6,
                     title: '房屋租售率',
+                    type: 10,
                     imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
                     imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                 },
                 {
                     data_id: 7,
                     title: '收款率分析',
+                    type: 3,
                     imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
                     imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
+                },
+
+                {
+                    data_id: 8,
+                    title: '住户性别占比',
+                    type: 2,
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
+                },
+                {
+                    data_id: 9,
+                    title: '住户身份占比',
+                    type: 2,
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
+                },
+                {
+                    data_id: 10,
+                    title: '设备设施统计',
+                    type: 4,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
+                },
+                {
+                    data_id: 11,
+                    title: '业主审批',
+                    type: 2,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
+                },
+                {
+                    data_id: 12,
+                    title: '待处理投诉',
+                    type: 9,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
+                },
+                {
+                    data_id: 13,
+                    title: '投诉建议数量趋势',
+                    type: 9,
+                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                 }
             ],
             componentsValue: 0
         };
     },
+    computed: {
+        putCompArr() {
+            let newArr = [];
+            if (this.componentsValue == 0) {
+                return this.componentsArrar;
+            } else {
+                this.componentsArrar.map((item) => {
+                    if (this.componentsValue == item.type) {
+                        newArr.push(item);
+                    }
+                });
+            }
+            return newArr;
+        }
+    },
     watch: {},
     methods: {
         dragstart(e, item) {

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

@@ -1,27 +1,16 @@
 <template>
-    <div class="contentShow" @mouseover="mousemove">
-        <div class="list_1-1 overflowHidden list_border mr10">
-            <common-functions></common-functions>
+    <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 class="list_1_2-2 overflowHidden list_border mr10">
-            <maps></maps>
-        </div>
-        <div class="list_1-3 overflowHidden list_border mr10">
-            <equipment-statistics></equipment-statistics>
-        </div>
-        <div class="list_2-1 overflowHidden list_border mr10">
-            <household-Identity></household-Identity>
-        </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">
-            <household-gender></household-gender>
-        </div>
-        <div class="list_3-2 overflowHidden list_border mr10">
-            <columnar></columnar>
-        </div>
-        <div class="list_3-3 overflowHidden list_border mr10"></div>
     </div>
 </template>
 <script>
@@ -29,15 +18,81 @@ import comp from '@views/newWorkBench/components/index.js';
 export default {
     mixins: [comp],
     data() {
-        return {};
+        return {
+            thisUpper: null,
+            thisItems: null,
+            pageLoction: {},
+            latticeArr: [
+                {
+                    className: 'list_1-1'
+                },
+                {
+                    className: 'list_1-2'
+                },
+                {
+                    className: 'list_1-3'
+                },
+                {
+                    className: 'list_1-4'
+                },
+                {
+                    className: 'list_2-1'
+                },
+                {
+                    className: 'list_2-2'
+                },
+                {
+                    className: 'list_2-3'
+                },
+                {
+                    className: 'list_2-4'
+                },
+                {
+                    className: 'list_3-1'
+                },
+                {
+                    className: 'list_3-2'
+                },
+                {
+                    className: 'list_3-3'
+                },
+                {
+                    className: 'list_3-4'
+                }
+            ]
+        };
+    },
+    created() {
+        this.pageLoction =
+            typeof this.$parent.oldValue.positionInfo == 'object'
+                ? this.$parent.oldValue.positionInfo
+                : JSON.parse(this.$parent.oldValue.positionInfo).pageLoction || {};
     },
-    created() {},
     mounted() {},
     computed: {},
     methods: {
-        mousemove(e) {
-            // console.log(e.target);
-            // console.log(this.dataId);
+        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();
         }
     }
 };
@@ -51,26 +106,34 @@ export default {
     border-radius: 4px;
     padding: rem(10);
     display: grid;
-    grid-template-columns: 2fr 4fr 2fr;
+    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_1_2-2 {
-        grid-area: 1 / 2 / span 2 / 2;
-        // @include moveHover;
+    .list_1-2 {
+        grid-area: 1 / 2 / 1 / 2;
     }
     .list_1-3 {
         grid-area: 1 / 3 / 1 / 3;
     }
+    .list_1-4 {
+        grid-area: 1 / 4 / 1 / 4;
+    }
     .list_2-1 {
         grid-area: 2 / 1 / 2 / 1;
     }
+    .list_2-2 {
+        grid-area: 2 / 2 / 2 / 2;
+    }
     .list_2-3 {
         grid-area: 2 / 3 / 2 / 3;
     }
+    .list_2-4 {
+        grid-area: 2 / 4 / 2 / 4;
+    }
     .list_3-1 {
         grid-area: 3 / 1 / 3 / 1;
     }
@@ -80,5 +143,8 @@ export default {
     .list_3-3 {
         grid-area: 3 / 3 / 3 / 3;
     }
+    .list_3-4 {
+        grid-area: 3 / 4 / 3 / 4;
+    }
 }
 </style>

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

@@ -1,86 +1,15 @@
 <template>
     <div class="contentShow">
         <div
-            class="list_1-1 overflowHidden list_border mr10"
-            :class="thisUpper == 1 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 1)"
-            @dragover="dragover($event, 1)"
-            @drop="drop($event, 1)"
+            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[1]]"></component>
-        </div>
-        <div
-            class="list_1_2-2 overflowHidden list_border mr10"
-            :class="thisUpper == 2 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 2)"
-            @dragover="dragover($event, 2)"
-            @drop="drop($event, 2)"
-        >
-            <component :is="componentsIdArr[pageLoction[2]]"></component>
-        </div>
-        <div
-            class="list_1-3 overflowHidden list_border mr10"
-            :class="thisUpper == 3 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 3)"
-            @dragover="dragover($event, 3)"
-            @drop="drop($event, 3)"
-        >
-            <component :is="componentsIdArr[pageLoction[3]]"></component>
-        </div>
-
-        <div
-            class="list_2-1 overflowHidden list_border mr10"
-            :class="thisUpper == 4 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 4)"
-            @dragover="dragover($event, 4)"
-            @drop="drop($event, 4)"
-        >
-            <component :is="componentsIdArr[pageLoction[4]]"></component>
-        </div>
-        <div
-            class="list_2-3 overflowHidden list_border mr10"
-            :class="thisUpper == 5 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 5)"
-            @dragover="dragover($event, 5)"
-            @drop="drop($event, 5)"
-        >
-            <component :is="componentsIdArr[pageLoction[5]]"></component>
-        </div>
-        <div
-            class="list_3-1 overflowHidden list_border mr10"
-            :class="thisUpper == 6 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 6)"
-            @dragover="dragover($event, 6)"
-            @drop="drop($event, 6)"
-        >
-            <component :is="componentsIdArr[pageLoction[6]]"></component>
-        </div>
-        <div
-            class="list_3-2 overflowHidden list_border mr10"
-            :class="thisUpper == 7 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 7)"
-            @dragover="dragover($event, 7)"
-            @drop="drop($event, 7)"
-        >
-            <component :is="componentsIdArr[pageLoction[7]]"></component>
-        </div>
-        <div
-            class="list_3-3 overflowHidden list_border mr10"
-            :class="thisUpper == 8 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 8)"
-            @dragover="dragover($event, 8)"
-            @drop="drop($event, 8)"
-        >
-            <component :is="componentsIdArr[pageLoction[8]]"></component>
-        </div>
-        <div
-            class="list_3-4 overflowHidden list_border mr10"
-            :class="thisUpper == 9 && !!thisItems ? 'moveHover' : ''"
-            @dragleave="dragleave($event, 9)"
-            @dragover="dragover($event, 9)"
-            @drop="drop($event, 9)"
-        >
-            <component :is="componentsIdArr[pageLoction[9]]"></component>
+            <component :is="componentsIdArr[pageLoction[index + 1]]"></component>
         </div>
     </div>
 </template>
@@ -92,7 +21,38 @@ export default {
         return {
             thisUpper: null,
             thisItems: null,
-            pageLoction: {}
+            pageLoction: {},
+            latticeArr: [
+                {
+                    className: 'list_1-1'
+                },
+                {
+                    className: 'list_2-2_3-2'
+                },
+                {
+                    className: 'list_1-4'
+                },
+                {
+                    className: 'list_2-1'
+                },
+                {
+                    className: 'list_2-4'
+                },
+
+                {
+                    className: 'list_3-1'
+                },
+                {
+                    className: 'list_3-2'
+                },
+
+                {
+                    className: 'list_3-3'
+                },
+                {
+                    className: 'list_3-4'
+                }
+            ]
         };
     },
     created() {
@@ -146,16 +106,16 @@ export default {
     .list_1-1 {
         grid-area: 1 / 1 / 1 / 1;
     }
-    .list_1_2-2 {
+    .list_2-2_3-2 {
         grid-area: 2 span/ 2 / 3 / span 2;
     }
-    .list_1-3 {
+    .list_1-4 {
         grid-area: 1 / 4 / 1 / 4;
     }
     .list_2-1 {
         grid-area: 2 / 1 / 2 / 1;
     }
-    .list_2-3 {
+    .list_2-4 {
         grid-area: 2 / 4 / 2 / 4;
     }
     .list_3-1 {