Home Explore Help
Register Sign In
100ZONE
/
SmartCommunity
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

工作台添加

Shannon_mu 3 years ago
parent
ff86cdd860
commit
84767e7a45
14 changed files with 592 additions and 186 deletions
Split View Show Diff Stats
  1. 2 0
      operationSupport/public/index.html
  2. 1 0
      operationSupport/src/App.vue
  3. 8 0
      operationSupport/src/store/store.js
  4. 2 2
      operationSupport/src/utils/AmapSearch.js
  5. 1 53
      operationSupport/src/views/newWorkBench/components/complaintsAndSuggestions.vue
  6. 17 2
      operationSupport/src/views/newWorkBench/components/index.js
  7. 67 23
      operationSupport/src/views/newWorkBench/components/map.vue
  8. 28 29
      operationSupport/src/views/newWorkBench/components/ownerApproval.vue
  9. 19 11
      operationSupport/src/views/newWorkBench/components/pendingComplaints.vue
  10. 90 27
      operationSupport/src/views/newWorkBench/editWorkbench.vue
  11. 30 11
      operationSupport/src/views/newWorkBench/index.vue
  12. 15 3
      operationSupport/src/views/newWorkBench/template/styleOne.vue
  13. 110 25
      operationSupport/src/views/newWorkBench/template/styleThree.vue
  14. 202 0
      operationSupport/src/views/newWorkBench/workBenchModal.vue

+ 2 - 0
operationSupport/public/index.html
View File 

@@ -25,6 +25,7 @@
 
 
 
   <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
 
+  <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
 
 </head>
 
 
 <body>
 
@@ -42,6 +43,7 @@
 
   <script src="<%= BASE_URL %>loctionJs/vue-router@3.4.3.js"></script>
 
   <script src="<%= BASE_URL %>loctionJs/vuex@3.5.1.js"></script>
 
   <script src="<%= BASE_URL %>loctionJs/axios@0.20.0.js"></script>
 
+
 
 </body>
 
 
 </html>

+ 1 - 0
operationSupport/src/App.vue
View File 

@@ -8,6 +8,7 @@
 
 -->
 
 <template>
 
     <div id="app">
 
+        <div id="container"></div>
 
         <router-view></router-view>
 
     </div>
 
 </template>

+ 8 - 0
operationSupport/src/store/store.js
View File 

@@ -49,6 +49,7 @@ const store = new Vuex.Store({
 
         communityArray: [],
 
         // 当前缩放比
 
         scale: document.body.clientWidth / 1920,
 
+        dragItemData: {}
 
     },
 
     getters: {
 
         getTheme(state) {
 
@@ -112,6 +113,9 @@ const store = new Vuex.Store({
 
         getScale(state) {
 
             return state.scale;
 
         },
 
+        getDragItem(state, data) {
 
+            return state.dragItemData;
 
+        },
 
     },
 
     mutations: {
 
         setSearchPointInfo(state, data) {
 
@@ -177,6 +181,10 @@ const store = new Vuex.Store({
 
         setScale(state, data) {
 
             state.scale = data;
 
         },
 
+        setDragItem(state, data) {
 
+            state.dragItemData = data;
 
+        },
 
+
 
     },
 
     actions: {
 
         tags(ctx, data) {

+ 2 - 2
operationSupport/src/utils/AmapSearch.js
View File 

@@ -1,4 +1,4 @@
 
-var url = 'https://webapi.amap.com/maps?v=1.4.15&key=c2df9f4026e98b41962148c1703d8f33&plugin=AMap.Autocomplete,AMap.PlaceSearch&callback=onLoad';
 
+var url = 'https://webapi.amap.com/maps?v=2.0&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;
 
@@ -18,7 +18,7 @@ let times = setInterval(() => {
 
 }, 1000)
 
 
 window.onLoad = function () {
 
-	// var map = new AMap.Map('container');
 
+	var map = new AMap.Map('container');
 
 }
 
 
 /**

+ 1 - 53
operationSupport/src/views/newWorkBench/components/complaintsAndSuggestions.vue
View File 

@@ -107,57 +107,5 @@ export default {
 
 };
 
 </script>
 
 <style scoped lang="scss">
 
-@import '@assets/css/public-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);
 
-        margin-bottom: rem(15);
 
-        .saveColumn-select {
 
-            width: rem(120);
 
-            margin-left: rem(20);
 
-            /deep/ .el-input__inner {
 
-                background: transparent;
 
-                color: white;
 
-                border-color: rgba(255, 255, 255, 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;
 
-        justify-content: space-between;
 
-        font-size: 12px;
 
-        position: relative;
 
-    }
 
-}
 
+@import './style.scss';
 
 </style>

+ 17 - 2
operationSupport/src/views/newWorkBench/components/index.js
View File 

@@ -45,11 +45,26 @@ export default {
 
     complaintsAndSuggestions,
 
     satisfaction,
 
     collectionRate,
 
-
 
     ownerApproval,
 
     pendingComplaints
 
   },
 
   data() {
 
-    return {}
 
+    return {
 
+      componentsIdArr: {
 
+        1: 'maps',
 
+        2: 'complaintsSuggestions',
 
+        3: 'commonFunctions',
 
+        4: 'satisfaction',
 
+        5: 'discount',
 
+        6: 'rentalAndSaleRate',
 
+        7: 'collectionRate',
 
+        8: '',
 
+        9: '',
 
+        10: '',
 
+        11: '',
 
+        12: '',
 
+
 
+      }
 
+    }
 
   }
 
 };

+ 67 - 23
operationSupport/src/views/newWorkBench/components/map.vue
View File 

@@ -10,6 +10,7 @@
 
             <div></div>
 
         </div>
 
         <div class="mapInit" id="mapInit"></div>
 
+        <div id="container"></div>
 
     </div>
 
 </template>
 
 <script>
 
@@ -17,8 +18,10 @@ export default {
 
     data() {
 
         return {
 
             map: '',
 
+            disCountry: '',
 
             placeSearch: '',
 
-            marker: '',
 
+            district: null,
 
+            polygons: [],
 
             addressName: '', //地址查询名称
 
             poisArray: [],
 
             thisMapPot: {},
 
@@ -31,22 +34,77 @@ export default {
 
         init() {
 
             this.map = new AMap.Map('mapInit', {
 
                 resizeEnable: true, //是否监控地图容器尺寸变化
 
-                zoom: 16, //初始化地图层级
 
-                mapStyle: 'amap://styles/darkblue'
 
+                zoom: 8, //初始化地图层级
 
+                mapStyle: 'amap://styles/darkblue',
 
+                defaultCursor: 'pointer'
 
             });
 
+            //地图加载完成监听点击事件
 
             this.map.on('complete', () => {
 
                 this.loadding = false;
 
+                this.mapClick();
 
+            });
 
+        },
 
+        mapClick() {
 
+            this.map.on('click', (ev) => {
 
+                this.getAddress([ev.lnglat.lng, ev.lnglat.lat]);
 
+            });
 
+        },
 
+        //搜索区域
 
+        districtMask(val) {
 
+            if (!this.district) {
 
+                //实例化DistrictSearch
 
+                var opts = {
 
+                    subdistrict: 0, //获取边界不需要返回下级行政区
 
+                    extensions: 'all', //返回行政区边界坐标组等具体信息
 
+                    level: 'district' //查询行政级别为 市
 
+                };
 
+                this.district = new AMap.DistrictSearch(opts);
 
+            }
 
+            // this.district.setLevel(val);
 
+            this.district.search(val, (status, result) => {
 
+                this.map.remove(this.polygons); //清除上次结果
 
+                this.polygons = [];
 
+                var bounds = result.districtList[0].boundaries;
 
+                if (bounds) {
 
+                    for (var i = 0, l = bounds.length; i < l; i++) {
 
+                        //生成行政区划polygon
 
+                        var polygon = new AMap.Polygon({
 
+                            strokeWeight: 1, //边界宽度
 
+                            path: bounds[i],
 
+                            fillOpacity: 0.3, // 透明度
 
+                            fillColor: '#2887f2',
 
+                            strokeColor: '#2887f2' //边界颜色
 
+                        });
 
+                        this.polygons.push(polygon);
 
+                    }
 
+                }
 
+                this.map.add(this.polygons);
 
+                this.map.setFitView(this.polygons); //视口自适应
 
+            });
 
+        },
 
+        getAddress(points) {
 
+            //获取准确地址
 
+            let geocoder = new AMap.Geocoder({ radius: 1000 });
 
+            geocoder.getAddress(points, (status, result) => {
 
+                if (status === 'complete' && result.regeocode) {
 
+                    this.districtMask(result.regeocode.addressComponent.district);
 
+                } else {
 
+                    this.map.remove(this.polygons);
 
+                }
 
             });
 
         }
 
     },
 
     destroyed() {
 
         this.map && this.map.destroy();
 
-        this.marker = '';
 
     },
 
     created() {
 
-        setTimeout(() => {
 
-            this.init();
 
-        }, 100);
 
+        let _this = this;
 
+        let mapOK = setInterval(() => {
 
+            if (!!AMap) {
 
+                clearInterval(mapOK);
 
+                _this.init();
 
+            }
 
+        }, 1000);
 
     }
 
 };
 
 </script>
 
@@ -84,23 +142,9 @@ export default {
 
         box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
 
         border-radius: 5px;
 
     }
 
-    /deep/ .amap-logo {
 
+    /deep/ .amap-logo,
 
+    /deep/ .amap-copyright {
 
         display: none !important;
 
     }
 
 }
 
-.my-autocomplete {
 
-    li {
 
-        line-height: normal;
 
-        padding: 7px;
 
-
 
-        .name {
 
-            text-overflow: ellipsis;
 
-            overflow: hidden;
 
-            span {
 
-                font-size: 12px;
 
-                color: #b4b4b4;
 
-            }
 
-        }
 
-    }
 
-}
 
 </style>

+ 28 - 29
operationSupport/src/views/newWorkBench/components/ownerApproval.vue
View File 

@@ -6,36 +6,19 @@
 
             <div class="buttons" @click="toPage"><span class="text">查看更多</span> <span class="triangle"></span></div>
 
         </div>
 
         <div class="model-content">
 
-            <div class="listInformation">
 
+            <div class="listInformation" v-for="(item, index) in datas" :key="index">
 
                 <div class="flex">
 
                     <img class="listInformation_img" src="@assets/img/homePage/icon_chuli@2x.png" />
 
                     <div class="listInformation_text">
 
-                        <div>业主名称：</div>
 
-                        <div>房产地址：</div>
 
+                        <div>业主名称：{{ item.name }}</div>
 
+                        <div>房产地址：{{ item.roomNumber }}</div>
 
                     </div>
 
                 </div>
 
-                <div class="listInformation_operation">申请时间： <span class="zoniot_font zoniot-icon-shenhe"></span></div>
 
-            </div>
 
-            <div class="listInformation">
 
-                <div class="flex">
 
-                    <img class="listInformation_img" src="@assets/img/homePage/icon_chuli@2x.png" />
 
-                    <div class="listInformation_text">
 
-                        <div>业主名称：</div>
 
-                        <div>房产地址：</div>
 
-                    </div>
 
+                <div class="listInformation_operation">
 
+                    申请时间： {{ item.checkInDate }}<span @click="toPage" class="zoniot_font zoniot-icon-shenhe"></span>
 
                 </div>
 
-                <div class="listInformation_operation">申请时间： <span class="zoniot_font zoniot-icon-shenhe"></span></div>
 
-            </div>
 
-            <div class="listInformation">
 
-                <div class="flex">
 
-                    <img class="listInformation_img" src="@assets/img/homePage/icon_chuli@2x.png" />
 
-                    <div class="listInformation_text">
 
-                        <div>业主名称：</div>
 
-                        <div>房产地址：</div>
 
-                    </div>
 
-                </div>
 
-                <div class="listInformation_operation">申请时间： <span class="zoniot_font zoniot-icon-shenhe"></span></div>
 
             </div>
 
+            <div v-if="datas.length <= 0" class="noData">暂无数据</div>
 
         </div>
 
     </div>
 
 </template>
 
@@ -44,13 +27,20 @@ export default {
 
     data() {
 
         return {
 
             mixins_query: {
 
-                communityId: '',
 
-                date: ''
 
-            }
 
+                pageNum: 1,
 
+                pageSize: 3
 
+            },
 
+            datas: [
 
+                // {
 
+                //     name: 111,
 
+                //     roomNumber: 5555,
 
+                //     checkInDate: '2020'
 
+                // }
 
+            ]
 
         };
 
     },
 
     created() {
 
-        // this.getData();
 
+        this.getData();
 
     },
 
     computed: {
 
         communityList() {
 
@@ -60,9 +50,10 @@ export default {
 
     methods: {
 
         getData() {
 
             this.$http
 
-                .get('/sc-community/statisticComplaintsTrend', this.mixins_query)
 
+                .get('/sc-community/scResident/audit/page', this.mixins_query)
 
                 .then(({ status, data, msg }) => {
 
                     if (status == 0) {
 
+                        this.datas = data.list;
 
                     }
 
                 })
 
                 .catch((err) => {});
 
@@ -77,15 +68,20 @@ export default {
 
 </script>
 
 <style scoped lang="scss">
 
 @import './style.scss';
 
+.noData {
 
+    text-align: center;
 
+    line-height: rem(100);
 
+}
 
 .modelBlock {
 
     .model-content {
 
-      display: block;
 
+        display: block;
 
         .flex {
 
             display: flex;
 
         }
 
         .listInformation {
 
             display: flex;
 
             justify-content: space-between;
 
+            margin-top: rem(10);
 
             .listInformation_img {
 
                 width: rem(46);
 
                 height: rem(46);
 
@@ -99,6 +95,9 @@ export default {
 
                 display: flex;
 
                 align-items: center;
 
                 opacity: 0.5;
 
+                .zoniot_font {
 
+                    margin-left: rem(20);
 
+                }
 
             }
 
         }
 
     }

+ 19 - 11
operationSupport/src/views/newWorkBench/components/pendingComplaints.vue
View File 

@@ -6,17 +6,18 @@
 
             <div class="buttons" @click="toPage"><span class="text">查看更多</span> <span class="triangle"></span></div>
 
         </div>
 
         <div class="model-content">
 
-            <div class="listInformation">
 
+            <div class="listInformation" v-for="(item, index) in datas" :key="index">
 
                 <div class="listInformation_text">
 
-                    <div>住户姓名：</div>
 
-                    <div>房产地址：</div>
 
+                    <div>住户姓名：{{ item.userName }}</div>
 
+                    <div>房产地址：{{ item.communityName + '-' + item.roomNumber }}</div>
 
                 </div>
 
                 <div class="listInformation_text">
 
-                    <div>投诉内容：</div>
 
-                    <div>投诉时间：</div>
 
+                    <div>投诉内容：{{ item.content }}</div>
 
+                    <div>投诉时间：{{ item.createDate }}</div>
 
                 </div>
 
-                <div class="listInformation_operation"><span class="zoniot_font  zoniot-icon-chuli"></span></div>
 
+                <div class="listInformation_operation"><span @click="toPage" class="zoniot_font zoniot-icon-chuli"></span></div>
 
             </div>
 
+            <div v-if="datas.length <= 0" class="noData">暂无数据</div>
 
         </div>
 
     </div>
 
 </template>
 
@@ -25,13 +26,14 @@ export default {
 
     data() {
 
         return {
 
             mixins_query: {
 
-                communityId: '',
 
-                date: ''
 
-            }
 
+                pageNum: 1,
 
+                pageSize: 3
 
+            },
 
+            datas: []
 
         };
 
     },
 
     created() {
 
-        // this.getData();
 
+        this.getData();
 
     },
 
     computed: {
 
         communityList() {
 
@@ -41,9 +43,10 @@ export default {
 
     methods: {
 
         getData() {
 
             this.$http
 
-                .get('/sc-community/statisticComplaintsTrend', this.mixins_query)
 
+                .post('/sc-community/feedback/page', this.mixins_query)
 
                 .then(({ status, data, msg }) => {
 
                     if (status == 0) {
 
+                        this.datas = data.list;
 
                     }
 
                 })
 
                 .catch((err) => {});
 
@@ -58,6 +61,10 @@ export default {
 
 </script>
 
 <style scoped lang="scss">
 
 @import './style.scss';
 
+.noData {
 
+    text-align: center;
 
+    line-height: rem(100);
 
+}
 
 .modelBlock {
 
     .model-content {
 
         display: block;
 
@@ -67,6 +74,7 @@ export default {
 
         .listInformation {
 
             display: flex;
 
             justify-content: space-between;
 
+            margin-top: rem(10);
 
             .listInformation_img {
 
                 width: rem(46);
 
                 height: rem(46);

+ 90 - 27
operationSupport/src/views/newWorkBench/editWorkbench.vue
View File 

@@ -3,13 +3,13 @@
 
         <div class="ComponentSave">
 
             <div class="saveColumn">
 
                 <span class="title">工作台-自拟定</span>
 
-                <el-select v-model="model"  @change="changeSelect" class="saveColumn-select">
 
+                <el-select v-model="model" @change="changeSelect" class="saveColumn-select">
 
                     <el-option v-for="(item, index) in modelSelect" :key="index" :label="item.lable" :value="item.model_id"></el-option>
 
                 </el-select>
 
             </div>
 
             <div class="saveColumn-buttons">
 
-                <el-button>取消</el-button>
 
-                <el-button type="primary">保存并使用</el-button>
 
+                <el-button @click="close">取消</el-button>
 
+                <el-button type="primary" @click="saveWork">保存并使用</el-button>
 
             </div>
 
         </div>
 
         <div class="operation">
 
@@ -24,7 +24,16 @@
 
                 </el-select>
 
                 <div class="componentsBlock">
 
                     <template v-for="(item, index) in componentsArrar">
 
-                        <div class="moveBlock" :data-id="item.data_id" @mousedown="moveBlock($event, item.data_id)" :key="index">
 
+                        <div
 
+                            class="moveBlock"
 
+                            :data-id="item.data_id"
 
+                            @mousedown="moveBlock($event, 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" />
 
@@ -51,19 +60,20 @@ export default {
 
     data() {
 
         return {
 
             model: 1,
 
+            oldValue: {},
 
             modelSelect: [
 
                 {
 
                     model_id: 1,
 
-                    lable: '模板一'
 
+                    lable: '模板一（默认模块）'
 
                 },
 
                 {
 
                     model_id: 2,
 
-                    lable: '模板二'
 
+                    lable: '模板二（默认模块）'
 
                 },
 
-                // {
 
-                //     model_id: 3,
 
-                //     lable: '模板三'
 
-                // },
 
+                {
 
+                    model_id: 3,
 
+                    lable: '模板三'
 
+                }
 
                 // {
 
                 //     model_id: 4,
 
                 //     lable: '模板四'
 
@@ -84,9 +94,9 @@ export default {
 
                 },
 
                 {
 
                     data_id: 2,
 
-                    title: '社区总体情况统计',
 
-                    imgPng: require('@assets/img/formulation/img_tongji@2x.png'),
 
-                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
 
+                    title: '投诉建议',
 
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
 
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
 
                 },
 
                 {
 
                     data_id: 3,
 
@@ -96,33 +106,28 @@ export default {
 
                 },
 
                 {
 
                     data_id: 4,
 
-                    title: '运维人员评分系统',
 
+                    title: '服务满意度趋势',
 
                     imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
 
                     imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
 
                 },
 
                 {
 
                     data_id: 5,
 
-                    title: '巡更任务完成率',
 
-                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
 
-                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
 
-                },
 
-                {
 
-                    data_id: 6,
 
                     title: '设备告警趋势',
 
                     imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
 
                     imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
 
                 },
 
+                // img_bing+baifenbi@2x
 
                 {
 
-                    data_id: 7,
 
-                    title: '销售漏斗',
 
-                    imgPng: require('@assets/img/formulation/img_loudou@2x.png'),
 
+                    data_id: 6,
 
+                    title: '房屋租售率',
 
+                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
 
                     imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
 
                 },
 
                 {
 
-                    data_id: 8,
 
-                    title: '待收款账户',
 
-                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
 
-                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
 
+                    data_id: 7,
 
+                    title: '收款率分析',
 
+                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
 
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
 
                 }
 
             ],
 
             componentsValue: 0,
 
@@ -147,6 +152,63 @@ export default {
 
                     this.$store.commit('setAreaSelect', data);
 
                 }
 
             });
 
+        },
 
+        dragstart(e, item) {
 
+            //拖拽开始时将item存入vuex
 
+            this.$store.commit('setDragItem', item);
 
+        },
 
+        drag(e) {
 
+            //拖拽中执行的事件
 
+            // console.log('drag',e)s
 
+        },
 
+        dragend(e) {
 
+            //拖拽结束执行的事件
 
+            // console.log('dragend', e);
 
+        },
 
+        close() {
 
+            let tagsList = this.$store.getters['getTagsList'];
 
+            let activeRout = this.$route;
 
+            if (tagsList.length > 1) {
 
+                tagsList.forEach((item, index) => {
 
+                    if (item.title == activeRout.meta.title || item.path == activeRout.path) {
 
+                        tagsList.splice(index, 1);
 
+                        this.$router.push({
 
+                            path: tagsList[index - 1].path
 
+                        });
 
+                    }
 
+                });
 
+            } else {
 
+                this.$router.push({
 
+                    path: '/'
 
+                });
 
+            }
 
+        },
 
+        saveWork() {
 
+            let simeCom = JSON.stringify({ model: this.model, pageLoction: {} });
 
+            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;
 
+            }
 
+            this.$http.post(url, installVal).then(({ data, msg, status }) => {
 
+                if (status == 0) {
 
+                    this.close();
 
+                }
 
+            });
 
+        },
 
+        getData() {
 
+            this.$http.get('/sc-community/workbenchConfig/list').then(({ data, msg, status }) => {
 
+                if (status == 0) {
 
+                    let val = data[0];
 
+                    this.oldValue = val;
 
+                }
 
+            });
 
         }
 
     },
 
     destroyed() {
 
@@ -154,6 +216,7 @@ export default {
 
     },
 
     created() {
 
         this.$store.dispatch('collapse', true);
 
+        this.getData();
 
         this.communityNameList();
 
     }
 
 };

+ 30 - 11
operationSupport/src/views/newWorkBench/index.vue
View File 

@@ -1,33 +1,52 @@
 
 <template>
 
     <div class="indexWorkbench">
 
-        <model-one></model-one>
 
+        <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>
 
 </template>
 
         
 <script>
 
 import workcommonFcuntion from './template/index.js';
 
+import workModal from './workBenchModal.vue';
 
 export default {
 
     mixins: [workcommonFcuntion],
 
+    components: {
 
+        workModal
 
+    },
 
     data() {
 
         return {
 
-            dataWater: {
 
-                type: 1,
 
-                title: '服务满意度趋势',
 
-                block: ['水表总数(个)', '本月用水量(吨)'],
 
-                echartText: {
 
-                    unitName: '(吨)',
 
-                    typeName: '用水量'
 
-                }
 
-            },
 
-            isEdit: false
 
+            isEdit: false,
 
+            isShowModel: null
 
         };
 
     },
 
+    methods: {
 
+        getData() {
 
+            this.$http.get('/sc-community/workbenchConfig/list').then(({ data, msg, status }) => {
 
+                if (status == 0) {
 
+                    let val = JSON.parse(data[0].positionInfo);
 
+                    this.isShowModel = val.model;
 
+                }
 
+            });
 
+        },
 
+        communityNameList() {
 
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
 
+                if (status == 0) {
 
+                    this.$store.commit('setAreaSelect', data);
 
+                }
 
+            });
 
+        }
 
+    },
 
     watch: {
 
         $route(to, from) {
 
             if (to.query.editWorkbench) {
 
                 this.isEdit = true;
 
             }
 
         }
 
+    },
 
+    created() {
 
+        this.communityNameList();
 
+        this.getData();
 
     }
 
 };
 
 </script>

+ 15 - 3
operationSupport/src/views/newWorkBench/template/styleOne.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-    <div class="contentShow">
 
+    <div class="contentShow" @dragover="dragover($event)" @drop="drop()">
 
         <div class="list_1-1 overflowHidden list_border mr10">
 
             <common-functions></common-functions>
 
         </div>
 
@@ -28,12 +28,24 @@ import comp from '@views/newWorkBench/components/index.js';
 
 export default {
 
     mixins: [comp],
 
     data() {
 
-        return {};
 
+        return {
 
+            thisUpper: null
 
+        };
 
     },
 
     created() {},
 
     mounted() {},
 
     computed: {},
 
-    methods: {}
 
+    methods: {
 
+        dragover(e) {
 
+            //拖拽在这个div里面拖拽时执行的事件
 
+            //一定要执行preventDefault(),否则drop事件不会被触发
 
+            e.preventDefault();
 
+        },
 
+        drop() {
 
+            //在div里拖拽停止时执行的事件
 
+            this.$message.error('此模块无法更改');
 
+        }
 
+    }
 
 };
 
 </script>
 
 <style scoped lang="scss">

+ 110 - 25
operationSupport/src/views/newWorkBench/template/styleThree.vue
View File 

@@ -1,27 +1,87 @@
 
 <template>
 
-    <div class="contentShow" @mouseover="mousemove">
 
-        <div class="list_1-1 overflowHidden list_border mr10">
 
-            <common-functions></common-functions>
 
+    <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)"
 
+        >
 
+            <component :is="componentsIdArr[pageLoction[1]]"></component>
 
         </div>
 
-        <div class="list_1_2-2 overflowHidden list_border mr10">
 
-            <maps></maps>
 
+        <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">
 
-            <equipment-statistics></equipment-statistics>
 
+        <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">
 
-            <household-Identity></household-Identity>
 
+
 
+        <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_2-3 overflowHidden list_border mr10">
 
-            <rental-and-sale-rate></rental-and-sale-rate>
 
+        <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-1 overflowHidden list_border mr10">
 
-            <household-gender></household-gender>
 
+        <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-2 overflowHidden list_border mr10">
 
-            <columnar></columnar>
 
+        <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[10]]"></component>
 
         </div>
 
-        <div class="list_3-3 overflowHidden list_border mr10"></div>
 
     </div>
 
 </template>
 
 <script>
 
@@ -29,15 +89,38 @@ import comp from '@views/newWorkBench/components/index.js';
 
 export default {
 
     mixins: [comp],
 
     data() {
 
-        return {};
 
+        return {
 
+            thisUpper: null,
 
+            thisItems: null,
 
+            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,7 +134,7 @@ 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%;
 
@@ -59,17 +142,16 @@ export default {
 
         grid-area: 1 / 1 / 1 / 1;
 
     }
 
     .list_1_2-2 {
 
-        grid-area: 1 / 2 / span 2 / 2;
 
-        // @include moveHover;
 
+        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;
 
+        grid-area: 2 / 4 / 2 / 4;
 
     }
 
     .list_3-1 {
 
         grid-area: 3 / 1 / 3 / 1;
 
@@ -80,5 +162,8 @@ export default {
 
     .list_3-3 {
 
         grid-area: 3 / 3 / 3 / 3;
 
     }
 
+    .list_3-4 {
 
+        grid-area: 3 / 4 / 3 / 4;
 
+    }
 
 }
 
 </style>

+ 202 - 0
operationSupport/src/views/newWorkBench/workBenchModal.vue
View File 

@@ -0,0 +1,202 @@
 
+<template>
 
+    <el-dialog
 
+        v-if="modal.show"
 
+        :visible.sync="modal.show"
 
+        class="alert-modal"
 
+        :width="modal.width"
 
+        :fullscreen="modal.fullscreen"
 
+        :custom-class="modal.customClass || 'alert-el-modal'"
 
+        :class="{ 'is-modal': !modal.fullscreen, newpop: modal.class }"
 
+        :append-to-body="true"
 
+        :lock-scroll="true"
 
+        @closed="close"
 
+        ref="alertModal"
 
+        top="0"
 
+        :close-on-click-modal="false"
 
+        :close-on-press-escape="false"
 
+    >
 
+        <div slot="title">
 
+            <div class="title_row">
 
+                <strong class="title">{{ modal.title }}</strong>
 
+                {{ modal.star }}
 
+                <span v-if="modal.hideStar"></span>
 
+                <span v-else-if="modal.title && !modal.notip"> (<span class="color-danger">*为必填项</span>) </span>
 
+            </div>
 
+        </div>
 
+        <div class="content" v-scroll>
 
+            <component :id="modal.id" :is="modal.component" :params="modal.props" :ref="modal.id" @close="close"></component>
 
+        </div>
 
+        <span slot="footer" class="dialog-footer" v-if="!modal.fullscreen || modal.showFooter">
 
+            <el-button @click="alertReset(modal.id)" class="reset" v-if="modal.showResetButton">重置</el-button>
 
+            <el-button @click="close" class="reset" v-if="!modal.showCancelButton">{{ modal.cancelButtonText || '取消' }}</el-button>
 
+            <el-button type="primary" v-if="!modal.showConfirmButton" @click="submit(modal.id)">{{
 
+                modal.confirmButtonText || '保存'
 
+            }}</el-button>
 
+        </span>
 
+    </el-dialog>
 
+</template>
 
+
 
+<script>
 
+const preventBrowserBack = () => {
 
+    history.pushState(null, null, document.URL);
 
+};
 
+export default {
 
+    name: 'work-modal',
 
+    props: {
 
+        params: {
 
+            type: Object,
 
+            default() {
 
+                return {};
 
+            }
 
+        }
 
+    },
 
+    data() {
 
+        return {
 
+            // modal:{}
 
+        };
 
+    },
 
+    computed: {
 
+        modal() {
 
+            let obj = this.params;
 
+            if (obj && obj.height) {
 
+                this.$nextTick(() => {
 
+                    if (this.$refs.alertModal && this.$refs.alertModal.$el && this.$refs.alertModal.$el.childNodes) {
 
+                        this.$refs.alertModal.$el.childNodes[0].style.height = obj.height;
 
+                    }
 
+                });
 
+            }
 
+            if (obj.show) {
 
+                history.pushState(null, null, document.URL);
 
+                window.addEventListener('popstate', preventBrowserBack, false);
 
+            } else {
 
+                window.removeEventListener('popstate', preventBrowserBack);
 
+            }
 
+            return obj;
 
+        }
 
+    },
 
+    watch: {},
 
+    methods: {
 
+        close() {
 
+            this.$store.dispatch('delPopup', this.modal.id);
 
+        },
 
+        // 弹窗重置，执行弹出组件的reset方法
 
+        alertReset(id) {
 
+            const component = this.$refs[id];
 
+            component.reset && component.reset();
 
+        },
 
+        submit(id) {
 
+            const component = this.$refs[id];
 
+            component.submit && component.submit();
 
+        }
 
+    },
 
+    created() {
 
+        // debugger
 
+        // this.modal=this.params;
 
+    }
 
+};
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+@import '@assets/css/public-style.scss';
 
+.alert-modal {
 
+    overflow: hidden;
 
+    /deep/.el-dialog {
 
+        .el-dialog__header {
 
+            height: 54px;
 
+            border-radius: 6px 6px 0 0;
 
+            background: rgba(248, 252, 255, 1);
 
+            padding: 0 25px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+            font-size: 16px;
 
+        }
 
+        .el-dialog__body {
 
+            padding: 20px;
 
+            overflow: auto;
 
+            .content {
 
+                height: 100%;
 
+            }
 
+            // margin-bottom: 20px;
 
+            .el-form {
 
+                .el-select,
 
+                .el-cascader {
 
+                    width: 100%;
 
+                }
 
+            }
 
+            &::-webkit-scrollbar {
 
+                display: none;
 
+            }
 
+        }
 
+        .el-dialog__footer {
 
+            border-top: none;
 
+            position: relative;
 
+            bottom: 10px;
 
+            margin-top: 10px;
 
+            .dialog-footer .reset {
 
+                border: 1px solid #0eaeff;
 
+                color: #0eaeff;
 
+            }
 
+            .el-button--primary {
 
+                background-color: #0eaeff;
 
+                // border-color: #0eaeff;
 
+            }
 
+        }
 
+        &.is-fullscreen {
 
+            height: 100% !important;
 
+            border-radius: 0;
 
+            .el-dialog__body {
 
+                position: absolute;
 
+                left: 0;
 
+                bottom: 0;
 
+                top: 54px;
 
+                right: 0;
 
+                display: flex;
 
+                justify-content: center;
 
+            }
 
+        }
 
+    }
 
+}
 
+.is-modal {
 
+    .el-dialog {
 
+        border-radius: 8px;
 
+        width: auto;
 
+        max-height: 80%;
 
+        min-height: 210px;
 
+        position: absolute;
 
+        top: 50%;
 
+        left: 50%;
 
+        transform: translate(-50%, -50%);
 
+        background: #fff;
 
+        .el-dialog__body {
 
+            /deep/ .content {
 
+                height: 100% !important;
 
+            }
 
+        }
 
+    }
 
+    //     .el-dialog__body::-webkit-scrollbar {
 
+    // 	display: none;
 
+    // }
 
+}
 
+
 
+.newpop .el-dialog {
 
+    background: transparent;
 
+}
 
+.newpop .el-dialog .el-dialog__header {
 
+    height: 50px;
 
+    background: rgba(13, 21, 41, 0.3);
 
+}
 
+.newpop .el-dialog .el-dialog__body {
 
+    height: 100%;
 
+    padding: 0;
 
+}
 
+.newpop .el-dialog .el-dialog__footer {
 
+    display: none;
 
+}
 
+.newpop .title {
 
+    color: #fff;
 
+}
 
+.color-danger {
 
+    color: red;
 
+}
 
+</style>