动态首页

operationSupport/src/assets/css/public-style.scss

@@ -49,4 +49,15 @@ $base_fontSize: 100;
 }
 /deep/ label[for="companyOrgId"] + .el-form-item__content {
   line-height: 0;
-}
+}
+
+/deep/ .amap-marker-label {
+  border: 0 none;
+  white-space: nowrap;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+}
+/deep/ .amap-logo,
+/deep/ .amap-copyright {
+  display: none !important;
+}

operationSupport/src/components/common/workBenchModal.vue

@@ -98,11 +98,17 @@ export default {
 
 <style lang="scss" scoped>
 @import '@assets/css/public-style.scss';
-.alert-modalWork{
-    // background: white;
-   /deep/ .el-dialog{
+.alert-modalWork {
+    /deep/ .el-dialog {
         background: #171f32;
         color: white;
+        .el-dialog__body {
+            overflow: auto;
+            height: calc(100% - 110px);
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
     }
 }
 </style>

operationSupport/src/utils/AmapSearch.js

@@ -1,4 +1,7 @@
-var url = 'https://webapi.amap.com/maps?v=2.0&key=c2df9f4026e98b41962148c1703d8f33&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.DistrictSearch&callback=onLoad';
+window.onLoad = function () {
+	var map = new AMap.Map('container');
+}
+var url = 'https://webapi.amap.com/maps?v=1.4.15&key=c2df9f4026e98b41962148c1703d8f33&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.DistrictSearch&callback=onLoad';
 var jsapi = document.createElement('script');
 jsapi.type = "text/javascript";
 jsapi.src = url;
@@ -17,10 +20,6 @@ let times = setInterval(() => {
 
 }, 1000)
 
-window.onLoad = function () {
-	var map = new AMap.Map('container');
-}
-
 /**
  * 调用高德地图执行模糊查询
  * @param {Number} page  当前页

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

@@ -0,0 +1,89 @@
+<template>
+    <div class="commonly">
+        <el-checkbox v-for="item in modelArr" v-model="item.checkbox" :label="item.id" :key="item.id" @change="clickIocn(item)"
+            ><div class="checkImg"><img :src="item.imgPng" /></div>
+            <div class="checkName">{{ item.lableTitle }}</div>
+        </el-checkbox>
+    </div>
+</template>
+<script>
+import modelArrList from './commonModel.js';
+export default {
+    props: ['params'],
+    mixins: [modelArrList],
+    data() {
+        return {
+            valueModel: []
+        };
+    },
+    methods: {
+        clickIocn(item) {
+            let sun = this.testingCheck();
+            if (sun > 4) {
+                item.checkbox = false;
+                this.$message.info('只能选择4项常用模块');
+            }
+        },
+        testingCheck() {
+            let sun = 0;
+            this.modelArr.map((list, index) => {
+                if (list.checkbox == true) {
+                    sun++;
+                }
+            });
+            return sun;
+        },
+        submit() {
+            let sun = this.testingCheck();
+            if (sun < 4) {
+                this.$message.info('请选择4项常用模块');
+            } else {
+                let installVal = {
+                    menuIds: JSON.stringify(this.modelArr.filter((item) => item.checkbox == true))
+                };
+                let url = '/sc-community/workbenchMenuUsed/add';
+                if (!!this.params.thisObj.id) {
+                    url = '/sc-community/workbenchMenuUsed/update';
+                    installVal.id = this.params.thisObj.id;
+                }
+                this.$http.post(url, installVal).then(({ status, msg }) => {
+                    if (status == 0) {
+                        this.params.callback();
+                        this.$emit('close');
+                    }
+                });
+            }
+        }
+    },
+    created() {}
+};
+</script>
+<style lang="scss" scoped>
+@import './style.scss';
+.commonly {
+    display: grid;
+    row-gap: rem(50);
+    column-gap: rem(20);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    /deep/ .el-checkbox {
+        .el-checkbox__label {
+            padding: 0;
+        }
+        .el-checkbox__input {
+            left: rem(15);
+        }
+    }
+    .checkImg {
+        width: rem(70);
+        height: rem(70);
+        margin-bottom: rem(10);
+        img {
+            width: 100%;
+        }
+    }
+    .checkName {
+        font-size: 12px;
+        padding-left: 20px;
+    }
+}
+</style>

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

@@ -5,39 +5,23 @@
             <div class="buttons" @click="getPop"><span class="text">自拟定</span> <span class="triangle"></span></div>
         </div>
         <div class="model-content">
-            <div class="blockItem" v-for="(item, index) in blockArr" :key="index">
-                <img :src="item.imgPng" />
-                <span>{{ item.lableTitle }}</span>
-            </div>
+            <template v-for="(item, index) in modelArrs">
+                <div class="blockItem" v-if="index < 4" :key="index" @click="toPage(item)">
+                    <img :src="item.imgPng" />
+                    <span>{{ item.lableTitle }}</span>
+                </div>
+            </template>
         </div>
     </div>
 </template>
 <script>
+import modelArrList from './commonModel.js';
 export default {
+    mixins: [modelArrList],
     data() {
         return {
-            blockArr: [
-                {
-                    id: 'cheweiguanli',
-                    imgPng: require('@assets/img/homePage/icon_cheweiguanli@2x.png'),
-                    lableTitle: '车位管理'
-                },
-                {
-                    id: 'shequguanli',
-                    imgPng: require('@assets/img/homePage/icon_shequguanli@2x.png'),
-                    lableTitle: '社区管理'
-                },
-                {
-                    id: 'loudongguanli',
-                    imgPng: require('@assets/img/homePage/icon_loudongguanli@2x.png'),
-                    lableTitle: '楼栋管理'
-                },
-                {
-                    id: 'fangwuguanli',
-                    imgPng: require('@assets/img/homePage/icon_fangwuguanli@2x.png'),
-                    lableTitle: '房屋管理'
-                }
-            ]
+            thisObj: {},
+            modelArrs: []
         };
     },
     methods: {
@@ -45,58 +29,41 @@ export default {
             new Promise((resolve) => {
                 this.$store.dispatch('openWorkModel', {
                     url: '/newWorkBench/components/addcommonfuntion.vue',
-                    width: '500px',
+                    width: '700px',
                     height: '500px',
                     props: {
-                        callback: resolve
+                        callback: resolve,
+                        thisObj: this.thisObj
                     },
-                    title: '编辑常用'
+                    notip: true,
+                    title: '常用功能自定义'
                 });
             }).then(() => {
-                this.getUserInfo();
+                this.getData();
+            });
+        },
+        getData() {
+            this.$http.get('/sc-community/workbenchMenuUsed/list').then(({ data, status, msg }) => {
+                if (status == 0 && !!data) {
+                    this.thisObj = data[0];
+                    this.modelArrs = this.modelArr.filter((item) => JSON.parse(data[0].menuIds).some((ele) => ele.id == item.id));
+                } else {
+                    this.modelArrs = this.modelArr;
+                }
             });
+        },
+        toPage(item) {
+            this.$router.push({ path: '/' + item.toPage });
         }
     },
-
-    created() {}
+    created() {
+        this.getData();
+    }
 };
 </script>
 <style lang="scss" scoped>
-@import '@assets/css/public-style.scss';
+@import './style.scss';
 .modelBlock {
-    height: 100%;
-    padding: rem(15) rem(20) rem(20);
-    background: #171f32;
-    .model-title {
-        line-height: rem(30);
-        display: flex;
-        justify-content: space-between;
-        padding-bottom: rem(15);
-        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
-        .model-title-text {
-            color: white;
-        }
-        .buttons {
-            width: rem(120);
-            padding-left: rem(10);
-            box-sizing: border-box;
-            background: rgba(0, 0, 0, 0.1);
-            border-radius: 4px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            cursor: pointer;
-            span.text {
-                // float: left;
-            }
-            span.triangle {
-                margin-top: rem(10);
-                float: right;
-                margin-right: rem(5);
-                display: inline-block;
-                border: 4px solid transparent;
-                border-left: 4px solid rgba(255, 255, 255, 0.5);
-            }
-        }
-    }
     .model-content {
         height: calc(100% - #{rem(45)});
         display: flex;

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

@@ -0,0 +1,298 @@
+export default {
+  data() {
+    return {
+      modelArr: [
+        //资产管理
+        {
+          id: 'shequguanli',
+          imgPng: require('@assets/img/homePage/icon_shequguanli@2x.png'),
+          lableTitle: '社区管理',
+          toPage: 'communityManagement/index',
+          checkbox: false
+        },
+        {
+          id: 'loudongguanli',
+          imgPng: require('@assets/img/homePage/icon_loudongguanli@2x.png'),
+          lableTitle: '楼栋管理',
+          toPage: 'buildingManagement/index',
+          checkbox: false
+        },
+        {
+          id: 'fangwuguanli',
+          imgPng: require('@assets/img/homePage/icon_fangwuguanli@2x.png'),
+          lableTitle: '房屋管理',
+          toPage: 'assetManagement/housingManagement/index',
+          checkbox: false
+        },
+        {
+          id: 'shangpuguanli',
+          imgPng: require('@assets/img/homePage/icon_shangpuguanli@2x.png'),
+          lableTitle: '商铺管理',
+          toPage: 'assetManagement/shopManagement/index',
+          checkbox: false
+        },
+        {
+          id: 'cheweiguanli',
+          imgPng: require('@assets/img/homePage/icon_cheweiguanli@2x.png'),
+          lableTitle: '车位管理',
+          toPage: 'parkingLotAdministration/index',
+          checkbox: false
+        },
+        //住户管理
+        {
+          id: 'zhuhuguanli',
+          imgPng: require('@assets/img/homePage/icon_zhuhuguanli@2x.png'),
+          lableTitle: '住户管理',
+          toPage: 'ownerManagement/index',
+          checkbox: false
+        },
+        {
+          id: 'yezhushenhe',
+          imgPng: require('@assets/img/homePage/icon_yezhushenhe@2x.png'),
+          lableTitle: '业主审核',
+          toPage: 'ownerManagement/ownerReview/index',
+          checkbox: false
+        },
+        //告警管理
+        {
+          id: 'gaojingguanli',
+          imgPng: require('@assets/img/homePage/icon_gaojingguanli@2x.png'),
+          lableTitle: '告警管理',
+          toPage: "alarmManagement/index",
+          checkbox: false
+        },
+        {
+          id: 'gaojingxiangqing',
+          imgPng: require('@assets/img/homePage/icon_gaojingxiangqing@2x.png'),
+          lableTitle: '告警详情',
+          toPage: 'alarmManagement/details',
+          checkbox: false
+        },
+        //收费管理
+        {
+          id: 'feiyongzhangdan',
+          imgPng: require('@assets/img/homePage/icon_feiyongzhangdan@2x.png'),
+          lableTitle: '费用账单',
+          toPage: "payService/propertyFee/index",
+          checkbox: false
+        },
+        {
+          id: 'shuifeiguanli',
+          imgPng: require('@assets/img/homePage/icon_shuifeiguanli@2x.png'),
+          lableTitle: '水费管理',
+          toPage: "payService/waterManagement/index",
+          checkbox: false
+        },
+        {
+          id: 'dianfeiguanli',
+          imgPng: require('@assets/img/homePage/icon_dianfeiguanli@2x.png'),
+          lableTitle: '电费管理',
+          toPage: "payService/electricManagement/index",
+          checkbox: false
+        },
+        {
+          id: 'cuijiao',
+          imgPng: require('@assets/img/homePage/icon_cuijiao@2x.png'),
+          lableTitle: '催缴',
+          toPage: "payService/call/index",
+          checkbox: false
+        },
+        {
+          id: 'jifeiguize',
+          imgPng: require('@assets/img/homePage/icon_jifeiguize@2x.png'),
+          lableTitle: '计费规则',
+          toPage: 'payService/billingRules/index',
+          checkbox: false
+        },
+        {
+          id: 'shoufeishezhi',
+          imgPng: require('@assets/img/homePage/icon_shoufeishezhi@2x.png'),
+          lableTitle: '收费设置',
+          toPage: "payService/chargeSetting/index",
+          checkbox: false
+        },
+        {
+          id: 'shoukuanzhanghao',
+          imgPng: require('@assets/img/homePage/icon_shoukuanzhanghao@2x.png'),
+          lableTitle: '收款账号',
+          toPage: "payService/collection/index",
+          checkbox: false
+        },
+        {
+          id: 'tongjibaobiao',
+          imgPng: require('@assets/img/homePage/icon_tongjibaobiao@2x.png'),
+          lableTitle: '统计报表',
+          toPage: "payService/statisticalReport/chargeStatistics",
+          checkbox: false
+        },
+        {
+          id: 'shuifeimingxi',
+          imgPng: require('@assets/img/homePage/icon_shuifeimingxi@2x.png'),
+          lableTitle: '水费明细',
+          toPage: "payService/statisticalReport/waterChargeDetails",
+          checkbox: false
+        },
+        {
+          id: 'dianfeimingxi',
+          imgPng: require('@assets/img/homePage/icon_dianfeimingxi@2x.png'),
+          lableTitle: '电费明细',
+          toPage: "payService/statisticalReport/electricityBillDetails",
+          checkbox: false
+        },
+        {
+          id: 'xitongshezhi',
+          imgPng: require('@assets/img/homePage/icon_xitongshezhi@2x.png'),
+          lableTitle: '系统设置',
+          toPage: "payService/systemSetup/index",
+          checkbox: false
+        },
+        //设备管理
+        {
+          id: 'shebeiguanli',
+          imgPng: require('@assets/img/homePage/icon_shebeiguanli@2x.png'),
+          lableTitle: '设备管理',
+          toPage: "deviceManagement/index",
+          checkbox: false
+        },
+        {
+          id: 'sheshiguanli',
+          imgPng: require('@assets/img/homePage/icon_sheshiguanli@2x.png'),
+          lableTitle: '设施管理',
+          toPage: "deviceManagement/indexFacilities",
+          checkbox: false
+        },
+        {
+          id: 'sheshileixing',
+          imgPng: require('@assets/img/homePage/icon_sheshileixing@2x.png'),
+          lableTitle: '设施类型',
+          toPage: "deviceManagement/indexType",
+          checkbox: false
+        },
+        //运维管理
+        {
+          id: 'gongdanguanli',
+          imgPng: require('@assets/img/homePage/icon_gongdanguanli@2x.png'),
+          lableTitle: '工单管理',
+          toPage: "workOrders/index",
+          checkbox: false
+        },
+        {
+          id: 'gongdanjilu',
+          imgPng: require('@assets/img/homePage/icon_gongdanjilu@2x.png'),
+          lableTitle: '工单记录',
+          toPage: 'workOrders/records',
+          checkbox: false
+        },
+        //设备设施巡检
+        {
+          id: 'xunjianjihua',
+          imgPng: require('@assets/img/homePage/icon_xunjianjihua@2x.png'),
+          lableTitle: '巡检计划',
+          toPage: "facilityInspections/index",
+          checkbox: false
+        },
+        {
+          id: 'xunjianjilu',
+          imgPng: require('@assets/img/homePage/icon_xunjianjilu@2x.png'),
+          lableTitle: '巡检记录',
+          toPage: 'facilityInspections/inspectionsRecords',
+          checkbox: false
+        },
+        //巡更管理
+        {
+          id: 'xungengdianwei',
+          imgPng: require('@assets/img/homePage/icon_xungengdianwei@2x.png'),
+          lableTitle: '巡更点位',
+          toPage: "patrolManagement/index",
+          checkbox: false
+        },
+        {
+          id: 'xungengluxian',
+          imgPng: require('@assets/img/homePage/icon_xungengluxian@2x.png'),
+          lableTitle: '巡更路线',
+          toPage: "patrolManagement/patrolRoute",
+          checkbox: false
+        },
+        {
+          id: 'xungengjilu',
+          imgPng: require('@assets/img/homePage/icon_xungengjilu@2x.png'),
+          lableTitle: '巡更记录',
+          toPage: 'patrolManagement/patrolRecords',
+          checkbox: false
+        },
+        //物业管理
+
+        {
+          id: 'tongzhigonggao',
+          imgPng: require('@assets/img/homePage/icon_tongzhigonggao@2x.png'),
+          lableTitle: '通知公告',
+          toPage: 'propertyManagement/inform',
+          checkbox: false
+        },
+        {
+          id: 'tousujianyi',
+          imgPng: require('@assets/img/homePage/icon_tousujianyi@2x.png'),
+          lableTitle: '投诉建议',
+          toPage: 'propertyManagement/index',
+          checkbox: false
+        },
+        {
+          id: 'shequlinli',
+          imgPng: require('@assets/img/homePage/icon_shequlinli@2x.png'),
+          toPage: "propertyManagement/neighbor",
+          lableTitle: '社区邻里',
+          checkbox: false
+        },
+        {
+          id: 'wuyedianhua',
+          imgPng: require('@assets/img/homePage/icon_wuyedianhua@2x.png'),
+          lableTitle: '物业电话',
+          toPage: "propertyManagement/phone",
+          checkbox: false
+        },
+
+        // {
+        //   id: 'zongshoufeitongji',
+        //   imgPng: require('@assets/img/homePage/icon_zongshoufeitongji@2x.png'),
+        //   lableTitle: '总收费统计',
+        //   toPage: "patrolManagement/patrolRoute",
+        //   checkbox: false
+        // },
+        // {
+        //   id: 'nianshoufeiqingkuang ',
+        //   imgPng: require('@assets/img/homePage/icon_nianshoufeiqingkuang @2x.png'),
+        //   lableTitle: '年收费情况',
+        //   checkbox: false
+        // },
+
+        // {
+        //   id: 'guanggaoguanli',
+        //   imgPng: require('@assets/img/homePage/icon_guanggaoguanli@2x.png'),
+        //   lableTitle: '广告管理',
+        //   checkbox: false
+        // },
+        // {
+        //   id: 'shuidiangaojingshezhi',
+        //   imgPng: require('@assets/img/homePage/icon_shuidiangaojingshezhi@2x.png'),
+        //   lableTitle: '水电告警设置',
+        //   checkbox: false
+        // },
+        // {
+        //   id: 'shuidiangaojingxiangqing',
+        //   imgPng: require('@assets/img/homePage/icon_shuidiangaojingxiangqing@2x.png'),
+        //   lableTitle: '水电告警详情',
+        //   checkbox: false
+        // },
+        // 流程管理
+        {
+          id: 'liuchengguanli ',
+          imgPng: require('@assets/img/homePage/icon_liuchengguanli @2x.png'),
+          lableTitle: '流程管理',
+          toPage: "flow/index",
+          checkbox: false
+        },
+      ]
+
+    }
+  }
+};

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

@@ -63,8 +63,13 @@ export default {
         10: '',
         11: '',
         12: '',
-
       }
     }
+  },
+  methods: {
+    sumit() {
+      return this.pageLoction
+    }
   }
+
 };

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

@@ -10,7 +10,6 @@
             <div></div>
         </div>
         <div class="mapInit" id="mapInit"></div>
-        <div id="container"></div>
     </div>
 </template>
 <script>
@@ -21,10 +20,10 @@ export default {
             disCountry: '',
             placeSearch: '',
             district: null,
+            marker: '',
             polygons: [],
             addressName: '', //地址查询名称
             poisArray: [],
-            thisMapPot: {},
             loadding: true
         };
     },
@@ -41,6 +40,7 @@ export default {
             //地图加载完成监听点击事件
             this.map.on('complete', () => {
                 this.loadding = false;
+                this.mapMak();
                 this.mapClick();
             });
         },
@@ -49,6 +49,28 @@ export default {
                 this.getAddress([ev.lnglat.lng, ev.lnglat.lat]);
             });
         },
+        mapMak() {
+            if (this.poisArray.length > 0) {
+                this.poisArray.map((item) => {
+                    this.addIcon(item);
+                });
+            }
+        },
+        addIcon(item) {
+            this.marker = new AMap.Marker({
+                icon: new AMap.Icon({
+                    image: require('@assets/img/homePage/icon_point_community@2x.png'),
+                    size: new AMap.Size(40, 50),
+                    imageSize: new AMap.Size(40, 50)
+                }),
+                position: [item.longitude, item.latitude],
+                map: this.map
+            });
+            this.marker.setLabel({
+                offset: new AMap.Pixel(-15, 50),
+                content: `${item.communityName}`
+            });
+        },
         //搜索区域
         districtMask(val) {
             if (!this.district) {
@@ -92,19 +114,27 @@ export default {
                     this.map.remove(this.polygons);
                 }
             });
+        },
+        getPoin() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, status, msg }) => {
+                if (status == 0) {
+                    this.poisArray = data;
+                }
+            });
         }
     },
     destroyed() {
         this.map && this.map.destroy();
     },
     created() {
-        let _this = this;
-        let mapOK = setInterval(() => {
+        this.getPoin();
+        new Promise((resolve) => {
             if (!!AMap) {
-                clearInterval(mapOK);
-                _this.init();
+                resolve(true);
             }
-        }, 1000);
+        }).then(() => {
+            this.init();
+        });
     }
 };
 </script>
@@ -137,14 +167,12 @@ export default {
     width: 100%;
     height: 100%;
     /deep/ .amap-marker-label {
-        border: 0 none;
-        white-space: nowrap;
-        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
-        border-radius: 5px;
-    }
-    /deep/ .amap-logo,
-    /deep/ .amap-copyright {
-        display: none !important;
+        background: rgba(0, 0, 0, 0.5);
+        text-align: center;
+        min-width: rem(80);
+        min-height: rem(20);
+        line-height: rem(20);
+        box-shadow: 0px 2px 10px 0px rgba(66, 70, 86, 0.08);
     }
 }
 </style>

operationSupport/src/views/newWorkBench/editWorkbench.vue

@@ -45,10 +45,10 @@
                     </template>
                 </div>
             </div>
-            <model-one v-if="model == 1"></model-one>
-            <model-two v-if="model == 2"></model-two>
-            <model-three v-if="model == 3"></model-three>
-            <model-four v-if="model == 4"></model-four>
+            <model-one v-if="model == 1" :ref="model + '_model'"></model-one>
+            <model-two v-if="model == 2" :ref="model + '_model'"></model-two>
+            <model-three v-if="model == 3" :ref="model + '_model'"></model-three>
+            <model-four v-if="model == 4" :ref="model + '_model'"></model-four>
         </div>
     </div>
 </template>
@@ -184,14 +184,14 @@ export default {
             }
         },
         saveWork() {
-            let simeCom = JSON.stringify({ model: this.model, pageLoction: {} });
+            let simeCom = JSON.stringify({ model: this.model, pageLoction: this.$refs[this.model + '_model'].sumit() });
             let installVal = {
                 positionInfo: simeCom,
                 urls: '',
                 id: ''
             };
+
             let url = '/sc-community/workbenchConfig/add';
-            debugger;
             if (!!this.oldValue) {
                 url = '/sc-community/workbenchConfig/update';
                 installVal.id = this.oldValue.id;
@@ -206,6 +206,7 @@ export default {
             this.$http.get('/sc-community/workbenchConfig/list').then(({ data, msg, status }) => {
                 if (status == 0) {
                     let val = data[0];
+                    this.model = JSON.parse(val.positionInfo).model;
                     this.oldValue = val;
                 }
             });

operationSupport/src/views/newWorkBench/index.vue

@@ -1,8 +1,14 @@
 <template>
-    <div class="indexWorkbench">
-        <model-one v-if="isShowModel == 1"></model-one>
-        <model-two v-if="isShowModel == 2"></model-two>
-        <model-three v-if="isShowModel == 3"></model-three>
+    <div
+        class="indexWorkbench"
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 1)"
+    >
+        <model-one v-if="isShowModel == 1" :ref="model + '_model'"></model-one>
+        <model-two v-if="isShowModel == 2" :ref="model + '_model'"></model-two>
+        <model-three v-if="isShowModel == 3" :ref="model + '_model'"></model-three>
     </div>
 </template>
         
@@ -13,15 +19,21 @@ export default {
     data() {
         return {
             isEdit: false,
-            isShowModel: null
+            isShowModel:null,
+            oldValue:{
+                positionInfo:{}
+            },
+            loading: true
         };
     },
     methods: {
-        getData() {
+        getData(resolve) {
             this.$http.get('/sc-community/workbenchConfig/list').then(({ data, msg, status }) => {
                 if (status == 0) {
                     let val = JSON.parse(data[0].positionInfo);
+                    this.oldValue.positionInfo = val.pageLoction
                     this.isShowModel = val.model;
+                    resolve && resolve();
                 }
             });
         },
@@ -42,7 +54,13 @@ export default {
     },
     created() {
         this.communityNameList();
-        this.getData();
+        new Promise((resolve) => {
+            this.getData(resolve);
+        }).then(() => {
+            setTimeout(() => {
+               this.loading = false;
+            },1000);
+        });
     }
 };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="contentShow" @dragover="dragover($event)" @drop="drop()">
+    <div class="contentShow" :class="thisUpper ? 'moveHover' : ''" @dragover="dragover($event)" @drop="drop()">
         <div class="list_1-1 overflowHidden list_border mr10">
             <common-functions></common-functions>
         </div>
@@ -29,7 +29,7 @@ export default {
     mixins: [comp],
     data() {
         return {
-            thisUpper: null
+            thisUpper: false
         };
     },
     created() {},
@@ -39,11 +39,13 @@ export default {
         dragover(e) {
             //拖拽在这个div里面拖拽时执行的事件
             //一定要执行preventDefault(),否则drop事件不会被触发
+            this.thisUpper = true;
             e.preventDefault();
         },
         drop() {
             //在div里拖拽停止时执行的事件
-            this.$message.error('此模块无法更改');
+            this.thisUpper = false;
+            this.$message.error('默认模块无法更改');
         }
     }
 };
@@ -59,6 +61,9 @@ export default {
     display: grid;
     grid-template-columns: 2fr 2fr 2fr 2fr;
     grid-template-rows: 1fr 1fr 1fr;
+    &.moveHover {
+        border-color: red;
+    }
     .list_1-1 {
         grid-area: 1 / 1 / 1 / 1;
     }

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

@@ -95,7 +95,13 @@ export default {
             pageLoction: {}
         };
     },
-    created() {},
+    created() {
+        debugger;
+        this.pageLoction =
+            typeof this.$parent.oldValue.positionInfo == 'object'
+                ? this.$parent.oldValue.positionInfo
+                : JSON.parse(this.$parent.oldValue.positionInfo).pageLoction;
+    },
     mounted() {},
     computed: {},
     methods: {

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="contentShow" @mouseover="mousemove">
+    <div class="contentShow" :class="thisUpper ? 'moveHover' : ''" @dragover="dragover($event)" @drop="drop()">
         <div class="list_1-1 overflowHidden list_border mr10">
             <common-functions></common-functions>
         </div>
@@ -31,15 +31,24 @@ import comp from '@views/newWorkBench/components/index.js';
 export default {
     mixins: [comp],
     data() {
-        return {};
+        return {
+            thisUpper: false
+        };
     },
     created() {},
     mounted() {},
     computed: {},
     methods: {
-        mousemove(e) {
-            // console.log(e.target);
-            // console.log(this.dataId);
+        dragover(e) {
+            //拖拽在这个div里面拖拽时执行的事件
+            //一定要执行preventDefault(),否则drop事件不会被触发
+            this.thisUpper = true;
+            e.preventDefault();
+        },
+        drop() {
+            //在div里拖拽停止时执行的事件
+            this.thisUpper = false;
+            this.$message.error('默认模块无法更改');
         }
     }
 };
@@ -57,6 +66,9 @@ export default {
     grid-template-rows: 1fr 1fr 1fr;
     gap: 0px;
     height: 100%;
+    &.moveHover {
+        border-color: red;
+    }
     .list_1-1 {
         grid-area: 1 / 1 / 1 / 1;
     }