修复bug

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

@@ -35,7 +35,7 @@
                     :percent="dataObj.receivedAmount"
                 >
                     <span class="ashText" style="font-size: 14px">收款率</span>
-                    <span> {{ parseInt((dataObj.receivedAmount / dataObj.receivableAmount || 0).toFixed(2) * 100) }}%</span>
+                    <span> {{ dataObj.collectionRate }}</span>
                 </process-circle>
                 <div class="textAmount">
                     <div class="listAmount">
@@ -108,28 +108,28 @@ export default {
             dataObj: {
                 receivedAmount: 0,
                 receivableAmount: 0,
-                uncollected: 0
+                uncollected: 0,
+                collectionRate: '0%'
             }
         };
     },
 
     methods: {
         getData() {
-            this.$http.get('/sc-community/statisticsCollectionRate', this.mixins_query).then(({ data, msg, status }) => {
-                let rep = /[\.]/;
+            this.$http.post('/sc-charge/charge/report/statistics/receivable', this.mixins_query).then(({ data, msg, status }) => {
                 if (status == 0 && !!data) {
                     this.dataObj = {
-                        receivableAmount: !!data.receivableAmount && data.receivableAmount !== 0 ? data.receivableAmount.toFixed(2) : 0,
-                        receivedAmount: !!data.receivedAmount && data.receivedAmount !== 0 ? data.receivedAmount.toFixed(2) : 0,
-                        uncollected: rep.test(data.receivableAmount - data.receivedAmount || 0)
-                            ? (data.receivableAmount - data.receivedAmount || 0).toFixed(2)
-                            : 0
+                        receivableAmount: !!data.receivableAmount ? data.receivableAmount : 0,
+                        receivedAmount: !!data.receivedAmount ? data.receivedAmount : 0,
+                        uncollected: !!data.uncollectedAmount ? data.uncollectedAmount : 0,
+                        collectionRate: !!data.collectionRate ? data.collectionRate : '0%'
                     };
                 } else {
                     this.dataObj = {
                         receivableAmount: 0,
                         receivedAmount: 0,
-                        uncollected: 0
+                        uncollected: 0,
+                        collectionRate: '0%'
                     };
                 }
             });

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

@@ -51,7 +51,17 @@ export default {
                 .get('/sc-community/Workbench/getNoticeInfo', this.mixins_query)
                 .then(({ status, data, msg }) => {
                     if (status == 0) {
-                        this.datas = data;
+                        if (data.length > 3) {
+                            let newDa = [];
+                            data.map((item, index) => {
+                                if (index <= 3) {
+                                    newDa.push(item);
+                                }
+                            });
+                            this.datas = newDa;
+                        } else {
+                            this.datas = data;
+                        }
                     }
                 })
                 .catch((err) => {});

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

@@ -68,9 +68,30 @@ export default {
                     let name = [];
                     data.map((item) => {
                         name.push(item.name);
-                        item.data = item.data / 60;
+                        item.data = item.data.toFixed(2);
                     });
                     this.clientOptions = columnOptionsChartName('(小时)', name, data, [], 10);
+                } else {
+                    this.clientOptions = columnOptionsChartName(
+                        '(小时)',
+                        ['name1', 'name2', 'name3'],
+                        [
+                            {
+                                name: 'name1',
+                                data: 0
+                            },
+                            {
+                                name: 'name2',
+                                data: 0
+                            },
+                            {
+                                name: 'name3',
+                                data: 0
+                            }
+                        ],
+                        [],
+                        10
+                    );
                 }
             });
         },

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

@@ -1,384 +1,436 @@
 <template>
-  <div class="leftAssembly">
-    <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">
-      <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 class="leftAssembly">
+        <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">
+            <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>
+                <div class="moveBlock_icon">
+                    <img :src="item.imgIcon" :alt="item.title" />
+                </div>
+            </div>
         </div>
-        <div class="moveBlock_icon">
-          <img
-            :src="item.imgIcon"
-            :alt="item.title"
-          />
-        </div>
-      </div>
     </div>
-  </div>
 </template>
 <script>
 export default {
-  data () {
-    return {
-      componentsSelect: [
-        {
-          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')
-        },
-        {
-          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')
-        },
-        {
-          data_id: 14,
-          title: '巡更人员任务执行时长',
-          type: 8,
-          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 15,
-          title: '社区公告',
-          type: 9,
-          imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 16,
-          title: '运维人员评分',
-          type: 12,
-          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 17,
-          title: '待收款账单',
-          type: 3,
-          imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 18,
-          title: '合同签约',
-          type: 10,
-          imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 19,
-          title: '待分派工单',
-          type: 6,
-          imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 20,
-          title: '巡检任务类型分布',
-          type: 7,
-          imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 21,
-          title: '设备告警信息',
-          type: 5,
-          imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 22,
-          title: '社区总体情况统计',
-          type: 1,
-          imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
-        },
-        {
-          data_id: 23,
-          title: '本月房屋点击排名前十',
-          type: 1,
-          imgPng: require('@assets/img/formulation/img_tongji@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_4x@2x.png')
-        },
-        {
-          data_id: 24,
-          title: '巡更人员任务执行情况',
-          type: 8,
-          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 25,
-          title: '巡更任务完成率',
-          type: 8,
-          imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
-        },
-        {
-          data_id: 26,
-          title: '巡更任务分布',
-          type: 8,
-          imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 27,
-          title: '运维人员任务执行情况',
-          type: 6,
-          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 28,
-          title: '运维工单完成率',
-          type: 6,
-          imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
-        },
-        {
-          data_id: 29,
-          title: '运维工单分类',
-          type: 6,
-          imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
-        },
-        {
-          data_id: 30,
-          title: '巡检人员任务执行情况',
-          type: 7,
-          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 31,
-          title: '巡检人员任务执行情况',
-          type: 7,
-          imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
-        },
-        {
-          data_id: 32,
-          title: '收入方式占比',
-          type: 3,
-          imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
-        },
-        {
-          data_id: 33,
-          title: '实收分析',
-          type: 3,
-          imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
-        {
-          data_id: 34,
-          title: '住户年龄分布',
-          type: 2,
-          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
-          imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
-        },
+    data() {
+        return {
+            componentsSelect: [
+                {
+                    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'),
+                    isPosition: '2x2',
+                    compatible: true
+                },
+                {
+                    data_id: 2,
+                    type: 9,
+                    title: '投诉建议',
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 3,
+                    type: 0,
+                    title: '常用功能',
+                    imgPng: require('@assets/img/formulation/img_changyonggongneng@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: false
+                },
+                {
+                    data_id: 4,
+                    title: '服务满意度趋势',
+                    type: 9,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 5,
+                    title: '设备告警趋势',
+                    type: 5,
+                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    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'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    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'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
 
-      ],
-      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) {
-      //拖拽开始时将item存入vuex
-      this.$store.commit('setDragItem', item);
+                {
+                    data_id: 8,
+                    title: '住户性别占比',
+                    type: 2,
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 9,
+                    title: '住户身份占比',
+                    type: 2,
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 10,
+                    title: '设备设施统计',
+                    type: 4,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 11,
+                    title: '业主审批',
+                    type: 2,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: false
+                },
+                {
+                    data_id: 12,
+                    title: '待处理投诉',
+                    type: 9,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: false
+                },
+                {
+                    data_id: 13,
+                    title: '投诉建议数量趋势',
+                    type: 9,
+                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 14,
+                    title: '巡更人员任务执行时长',
+                    type: 8,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 15,
+                    title: '社区公告',
+                    type: 9,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: false
+                },
+                {
+                    data_id: 16,
+                    title: '运维人员评分',
+                    type: 12,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 17,
+                    title: '待收款账单',
+                    type: 3,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: false
+                },
+                {
+                    data_id: 18,
+                    title: '合同签约',
+                    type: 10,
+                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 19,
+                    title: '待分派工单',
+                    type: 6,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: false
+                },
+                {
+                    data_id: 20,
+                    title: '巡检任务类型分布',
+                    type: 7,
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 21,
+                    title: '设备告警信息',
+                    type: 5,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: false
+                },
+                {
+                    data_id: 22,
+                    title: '社区总体情况统计',
+                    type: 1,
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: false
+                },
+                {
+                    data_id: 23,
+                    title: '本月房屋点击排名前十',
+                    type: 1,
+                    imgPng: require('@assets/img/formulation/img_tongji@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_4x@2x.png'),
+                    isPosition: '2x2',
+                    compatible: false
+                },
+                {
+                    data_id: 24,
+                    title: '巡更人员任务执行情况',
+                    type: 8,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 25,
+                    title: '巡更任务完成率',
+                    type: 8,
+                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 26,
+                    title: '巡更任务分布',
+                    type: 8,
+                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 27,
+                    title: '运维人员任务执行情况',
+                    type: 6,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 28,
+                    title: '运维工单完成率',
+                    type: 6,
+                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 29,
+                    title: '运维工单分类',
+                    type: 6,
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 30,
+                    title: '巡检人员任务执行情况',
+                    type: 7,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 31,
+                    title: '巡检人员任务执行情况',
+                    type: 7,
+                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 32,
+                    title: '收入方式占比',
+                    type: 3,
+                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
+                    isPosition: '1x1',
+                    compatible: true
+                },
+                {
+                    data_id: 33,
+                    title: '实收分析',
+                    type: 3,
+                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                },
+                {
+                    data_id: 34,
+                    title: '住户年龄分布',
+                    type: 2,
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+                    isPosition: '2x1',
+                    compatible: true
+                }
+            ],
+            componentsValue: 0
+        };
     },
-    drag (e) {
-      //拖拽中执行的事件
-      // console.log('drag',e)s
+    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;
+        }
     },
-    dragend (e) {
-      //拖拽结束执行的事件
-      // console.log('dragend', e);
-    }
-  },
-  destroyed () { },
-  created () { }
+    watch: {},
+    methods: {
+        dragstart(e, item) {
+            //拖拽开始时将item存入vuex
+            this.$store.commit('setDragItem', item);
+        },
+        drag(e) {
+            //拖拽中执行的事件
+            // console.log('drag',e)s
+        },
+        dragend(e) {
+            //拖拽结束执行的事件
+            // console.log('dragend', e);
+        }
+    },
+    destroyed() {},
+    created() {}
 };
 </script>
 <style lang="scss" scoped>

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

@@ -5,7 +5,7 @@
             :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)"
+            @drop="drop($event, item)"
             v-for="(item, index) in latticeArr"
             :key="index"
         >
@@ -72,9 +72,30 @@ export default {
             //一定要执行preventDefault(),否则drop事件不会被触发
             e.preventDefault();
         },
-        drop(e, index) {
+        drop(e, item) {
             //在div里拖拽停止时执行的事件
             let itemValue = this.$store.getters['getDragItem'];
+            debugger;
+            if (!itemValue.compatible) {
+                if (
+                    itemValue.isPosition == '1x1' &&
+                    item.className !== 'list_2-2_3-2' &&
+                    item.className !== 'list_3-1x2' &&
+                    item.className !== 'list_3-3x2'
+                ) {
+                    this.setModel(itemValue);
+                } else if (itemValue.isPosition == '2x2' && item.className == 'list_2-2_3-2') {
+                    this.setModel(itemValue);
+                } else if (itemValue.isPosition == '2x1' && (item.className == 'list_3-1x2' || item.className == 'list_3-3x2')) {
+                    this.setModel(itemValue);
+                } else {
+                    this.$message.error(`${itemValue.title}模块需要配置到${itemValue.isPosition}区域`);
+                }
+            } else {
+                this.setModel(itemValue);
+            }
+        },
+        setModel(itemValue) {
             for (let k in this.pageLoction) {
                 if (this.pageLoction[k] == itemValue.data_id) {
                     this.pageLoction[k] = null;
@@ -119,7 +140,7 @@ export default {
         grid-area: 3 / 1 / 3 / span 2;
     }
     .list_3-3x2 {
-        grid-area: 3 / 3 / 3  / span 4;
+        grid-area: 3 / 3 / 3 / span 4;
     }
 }
 </style>

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

@@ -5,7 +5,7 @@
             :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)"
+            @drop="drop($event, item)"
             v-for="(item, index) in latticeArr"
             :key="index"
         >
@@ -86,9 +86,20 @@ export default {
             //一定要执行preventDefault(),否则drop事件不会被触发
             e.preventDefault();
         },
-        drop(e, index) {
+        drop(e, item) {
             //在div里拖拽停止时执行的事件
             let itemValue = this.$store.getters['getDragItem'];
+            if (!itemValue.compatible) {
+                if (itemValue.isPosition == '1x1') {
+                    this.setModel(itemValue);
+                } else {
+                    this.$message.error(`${itemValue.title}模块需要配置到${itemValue.isPosition}区域`);
+                }
+            } else {
+                this.setModel(itemValue);
+            }
+        },
+        setModel(itemValue) {
             for (let k in this.pageLoction) {
                 if (this.pageLoction[k] == itemValue.data_id) {
                     this.pageLoction[k] = null;

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

@@ -5,7 +5,7 @@
             :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)"
+            @drop="drop($event, item)"
             v-for="(item, index) in latticeArr"
             :key="index"
         >
@@ -79,9 +79,22 @@ export default {
             //一定要执行preventDefault(),否则drop事件不会被触发
             e.preventDefault();
         },
-        drop(e, index) {
+        drop(e, item) {
             //在div里拖拽停止时执行的事件
             let itemValue = this.$store.getters['getDragItem'];
+            if (!itemValue.compatible) {
+                if (itemValue.isPosition == '1x1' && item.className !== 'list_2-2_3-2') {
+                    this.setModel(itemValue);
+                } else if (itemValue.isPosition == '2x2' && item.className == 'list_2-2_3-2') {
+                    this.setModel(itemValue);
+                } else {
+                  this.$message.error(`${itemValue.title}模块需要配置到${itemValue.isPosition}区域`);
+                }
+            } else {
+                this.setModel(itemValue);
+            }
+        },
+        setModel(itemValue) {
             for (let k in this.pageLoction) {
                 if (this.pageLoction[k] == itemValue.data_id) {
                     this.pageLoction[k] = null;