55555

commandCenter/src/views/industrialInvestment/assembly/salesFunnel.vue

@@ -28,7 +28,6 @@
 
 
 <script>
-import { defaultDay } from '../../smallModule/indexOptionChart';
 import { funnelChart } from './indexOptionChart';
 let dataseries = [{ value: 500, name: '意向' },
 { value: 350, name: '方案' },

commandCenter/src/views/operationalServices/assembly/complaintsAndSuggestions.vue

@@ -78,6 +78,7 @@ export default {
     this.getData();
   },
   methods: {
+
     getData () {
       this.$http
         .get('/sc-community/statisticComplaintsTrend', this.mixins_query)

commandCenter/src/views/operationalServices/assembly/distributionSuggestion.vue

@@ -78,7 +78,6 @@ export default {
       this.getData();
     },
     eachartObj (data) {
-      debugger
       this.total = data.total || 0;
       let newData = [];
       let DataName = {

commandCenter/src/views/operationalServices/assembly/scoringOperationPersonnel.vue

@@ -68,7 +68,6 @@ export default {
         .get('/sc-community-web/statisticWorkOrderEvaluate', this.mixins_query)
         .then(({ status, data, msg }) => {
           if (status == 0) {
-            debugger
             let name = [];
             let Resdate = [];
             for (let i = 0; i < data.length; i++) {

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

@@ -61,7 +61,14 @@ export default {
         patrolInspectionRate: (resolve) => require([`@views/${comUrl}workbenchMent/patrolInspectionRate.vue`], resolve),
         proportionIncomeMode: (resolve) => require([`@views/${comUrl}workbenchMent/proportionIncomeMode.vue`], resolve),
         paidAnalysis: (resolve) => require([`@views/${comUrl}workbenchMent/paidAnalysis.vue`], resolve),
-        householdDistribution: (resolve) => require([`@views/${comUrl}workbenchMent/householdDistribution.vue`], resolve)
+        householdDistribution: (resolve) => require([`@views/${comUrl}workbenchMent/householdDistribution.vue`], resolve),
+        salesFunnel: (resolve) => require([`@views/${comUrl}workbenchMent/salesFunnel.vue`], resolve),
+        BusinessOpportunity: (resolve) => require([`@views/${comUrl}workbenchMent/BusinessOpportunity.vue`], resolve),
+        rentalShops: (resolve) => require([`@views/${comUrl}workbenchMent/rentalShops.vue`], resolve),
+        enterpriseDistribution: (resolve) => require([`@views/${comUrl}workbenchMent/enterpriseDistribution.vue`], resolve),
+        personnelSalesanalysis: (resolve) => require([`@views/${comUrl}workbenchMent/personnelSalesanalysis.vue`], resolve),
+        distributionSuggestion: (resolve) => require([`@views/${comUrl}workbenchMent/distributionSuggestion.vue`], resolve),
+        scoringOperationPersonnel: (resolve) => require([`@views/${comUrl}workbenchMent/scoringOperationPersonnel.vue`], resolve)
     },
     data() {
         return {
@@ -101,7 +108,14 @@ export default {
                 31: 'patrolInspectionRate',
                 32: 'proportionIncomeMode',
                 33: 'paidAnalysis',
-                34: 'householdDistribution'
+                34: 'householdDistribution',
+                35: 'salesFunnel',
+                36: 'BusinessOpportunity',
+                37: 'rentalShops',
+                38: 'enterpriseDistribution',
+                39: 'personnelSalesanalysis',
+                40: 'distributionSuggestion',
+                41: 'scoringOperationPersonnel'
             }
         };
     },

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

@@ -892,3 +892,342 @@ export const discountedChart = (name = '', xAxis = [], series = [], legendShow =
     };
     return option;
 };
+
+// 漏斗图
+export const funnelChart = (dataseries = [], series = []) => {
+    // var colors=[['#22D8FF','#00B2FF']]
+    var colorList = [
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#22D8FF' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#00B2FF' // 100% 处的颜色
+                }
+            ]
+        },
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#5EEDCC' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#24C3F1' // 100% 处的颜色
+                }
+            ]
+        },
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#F0646C' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#F4994E' // 100% 处的颜色
+                }
+            ]
+        },
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#7178FF' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#D2A4FF ' // 100% 处的颜色
+                }
+            ]
+        },
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#884DD2' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#DF63CC' // 100% 处的颜色
+                }
+            ]
+        }
+    ];
+    let option = {
+        title: {
+            text: ''
+        },
+
+        // backgroundColor:'#ffffff',
+        color: colorList,
+        series: [
+            {
+                top: 0,
+                type: 'funnel',
+                left: '15%',
+                top: '15%',
+                width: '50%',
+                height: '85%',
+                gap: 0,
+                minSize: 50,
+                maxSize: 260,
+                label: {
+                    show: true,
+                    position: 'inside',
+                    // formatter: '{d}'
+                    formatter: function (data) {
+                        return data.percent.toFixed(0) + '%';
+                    },
+                    textStyle: {
+                        shadowOffsetX: 0,
+                        fontSize: '14',
+                        shadowColor: 'rgba(0, 0, 0, 0)',
+                        color: '#FFFFFF'
+                    }
+                },
+                data: dataseries
+            },
+
+            {
+                top: 0,
+                type: 'funnel',
+                left: '0',
+                width: '30%',
+                height: '85%',
+                top: '15%',
+                gap: 16,
+                z: 1,
+                // minSize: 50,
+                // maxSize: 50,
+                label: {
+                    normal: {
+                        // padding :[11,25],
+                        formatter: function (params) {
+                            let el = `{a|${params.name}}  {b|${params.value}}`;
+                            return el;
+                        },
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 12,
+                                    color: '#858892',
+                                    padding: [0, 5, 0, 0]
+                                },
+                                b: {
+                                    fontSize: 14,
+                                    color: '#fff',
+                                    padding: [0, 0, 0, 5]
+                                }
+                            }
+                        }
+                    }
+                },
+                //右侧的百分比显示的地方
+                labelLine: {
+                    show: true,
+                    normal: {
+                        show: false,
+                        length: 200,
+                        position: 'center',
+                        lineStyle: {
+                            width: 1,
+                            color: 'red',
+                            type: 'solid'
+                        }
+                    }
+                },
+                // 主体是透明的
+                itemStyle: {
+                    normal: {
+                        color: 'transparent',
+                        borderWidth: 0,
+                        opacity: 1
+                    }
+                },
+                data: series
+            }
+        ]
+    };
+    return option;
+};
+
+// 柱状图  双个柱图
+export const columnOptionsChartss = (name = '', xAxis = [], series = [], dataseries = [], dataName = [], color = [], barWidth = 6) => {
+    let defaultData = [
+        {
+            name: '',
+            type: 'bar',
+            data: []
+        }
+    ];
+    let defaultColor = [
+        ['#0EAEFF', '#85E9FF'],
+        ['#F0646C', '#F4994E']
+    ];
+    let seriesConfiguration = () => {
+        let seriesData = [
+            {
+                name: '',
+                type: 'bar',
+                data: [],
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[0] || defaultColor[0])
+                    }
+                },
+                barGap: '100%'
+            },
+            {
+                name: '',
+                type: 'bar',
+                data: [],
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[1] || defaultColor[1])
+                    }
+                },
+                barGap: '100%'
+            }
+        ];
+        series.map((item, index) => {
+            seriesData[0].data.push(item.data);
+            seriesData[0].name = dataName[0];
+        });
+        dataseries.map((items, indexs) => {
+            seriesData[1].data.push(items.data);
+            seriesData[1].name = dataName[1];
+        });
+
+        return seriesData;
+    };
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                },
+                crossStyle: {
+                    shadowBlur: 30,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            },
+            formatter(param) {
+                let el = ``;
+                param.forEach((item) => {
+                    el += `<p style="text-align: left;">
+        <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+          ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                      <span>${item.seriesName}：${item.value}${name}</span>
+                    </p>`;
+                });
+                el += ``;
+                return el;
+            }
+        },
+        grid: {
+            top: 50,
+            left: 10,
+            bottom: 0,
+            right: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                formatter: function (params, index) {
+                    return params;
+                },
+                color: '#9B9DA5',
+                margin: 15
+            },
+            data: !!xAxis.length ? xAxis : defaultName
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            name: name,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.5
+                }
+            }
+        },
+        legend: {
+            show: true,
+            x: 'right',
+            icon: 'circle',
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20,
+            textStyle: {
+                color: '#FFF'
+            }
+        },
+        series: seriesConfiguration() || defaultData
+    };
+    return option;
+};

operationSupport/src/views/newWorkBench/components/workbenchMent/BusinessOpportunity.vue

@@ -0,0 +1,109 @@
+<!-- 暂无数据 -->
+
+<template>
+  <div class="modelBlock">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">商机来源</div>
+        <div class="model-title-right">
+          <el-date-picker
+            value-format="yyyy-MM"
+            v-model="date"
+            type="month"
+            placeholder="选择月"
+            class="saveColumn-select"
+            @change="changeTime"
+            :clearable="false"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+        ></zz-echart>
+        <div class="totals">
+          <span class="fonst-color">{{ total }}</span>
+          <span class="numbers fonst-color">总人数</span>
+        </div>
+      </div>
+    </template>
+    <no-permission
+      v-else
+      tipsText="商机来源"
+    ></no-permission>
+  </div>
+</template>
+<script>
+import { ringType } from '../indexOptionChart';
+import permissionComponent from '../permissionComponent';
+export default {
+  mixins: [permissionComponent],
+  data () {
+    return {
+      defaultModel: {
+        permissUrl: '21',
+        titleName: '商业管理'
+      },
+      mixins_query: {
+        companyOrgId: '',
+        startDate: ''
+      },
+      date: '',
+      total: 0,
+      clientOptions: ringType(
+        [],
+        [
+          { value: 0, name: '线上预约' },
+          { value: 0, name: '线上电话' },
+          { value: 0, name: '线下访问' },
+        ]
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-community-web/business/statistics/source', this.mixins_query).then(({ data, msg, status }) => {
+
+        if (status == 0) {
+          let newData = [];
+          this.total = 0;
+          for (let i in data) {
+            this.total += data[i].total;
+            newData.push({
+              name: data[i].businessSource == 1 ? '线上预约' : data[i].businessSource == 2 ? '线上电话' : '线下预约',
+              value: data[i].total
+            })
+          }
+          this.clientOptions = ringType([], newData);
+        }
+      });
+    },
+    changeTime (v) {
+      this.mixins_query.startDate = v;
+      this.getData();
+    },
+  },
+  created () {
+    this.mixins_query.startDate = this.$moment().format('YYYY-MM');
+    this.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import '../style.scss';
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: rem(20);
+            }
+        }
+    }
+}
+.fonst-color {
+    color: #fff;
+}
+</style>

operationSupport/src/views/newWorkBench/components/workbenchMent/completionMaintenanceOrder.vue

@@ -69,6 +69,8 @@ export default {
         {},
         { type: 'number', total: 0 }
       )
+
+
     };
   },
   methods: {

operationSupport/src/views/newWorkBench/components/workbenchMent/distributionSuggestion.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="modelBlock">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">投诉建议类型分布</div>
+        <div class="model-title-right">
+          <el-date-picker
+            value-format="yyyy-MM"
+            v-model="date"
+            type="month"
+            placeholder="选择月"
+            class="saveColumn-select"
+            @change="changeTime"
+            :clearable="false"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+        ></zz-echart>
+        <div class="totals">
+          <span class="size-color">{{ total }}</span>
+          <span class="numbers size-color">任务总数</span>
+        </div>
+      </div>
+    </template>
+    <no-permission
+      v-else
+      tipsText="投诉建议类型分布"
+    ></no-permission>
+  </div>
+</template>
+<script>
+import { GradualChange, ringType } from '../indexOptionChart';
+import permissionComponent from '../permissionComponent';
+const colors = [
+  GradualChange('#22D8FF', '#00B2FF'),
+  GradualChange('#F0646C', '#F4994E'),
+  GradualChange('#5EEDCC ', '#24C3F1'),
+  GradualChange('#7178FF', '#D2A4FF'),
+  GradualChange('#884DD2', '#DF63CC')
+];
+export default {
+  mixins: [permissionComponent],
+  data () {
+    return {
+      defaultModel: {
+        permissUrl: '17',
+        titleName: '运维工单'
+      },
+      mixins_query: {
+        communityId: '',
+        date: '',
+      },
+      date: '',
+      total: 0,
+      clientOptions: ringType(
+        colors,
+        [
+          { value: 0, name: '扰民投诉' },
+          { value: 0, name: '物业投诉' },
+          { value: 0, name: '公共卫生' },
+          { value: 0, name: '安全建议' },
+          { value: 0, name: '其他' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-community-web/statisticComplaint', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0 && !!data.datas) {
+          this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+        }
+      })
+    },
+    changeTime (v) {
+      this.mixins_query.date = v + '-01';
+      this.getData();
+    },
+    eachartObj (data) {
+      debugger
+      this.total = data.total || 0;
+      let newData = [];
+      let DataName = {
+        1: '扰民投诉',
+        2: '物业投诉',
+        3: '公共卫生',
+        4: '安全建议',
+        5: '其他'
+      }
+      for (let a in data.datas) {
+        newData.push({
+          value: data.datas[a],
+          name: DataName[a]
+        });
+      }
+
+      return newData;
+    }
+  },
+  created () {
+    this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
+    this.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.size-color {
+    color: #fff;
+}
+.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);
+        .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;
+        }
+    }
+    .model-content {
+        height: calc(100% - #{rem(45)});
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+        .totals {
+            position: absolute;
+            right: rem(10);
+            top: rem(26);
+            width: rem(120);
+            height: rem(40);
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: rem(8) rem(10);
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                line-height: rem(32);
+            }
+        }
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/workbenchMent/enterpriseDistribution.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="modelBlock">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">企业类型分布</div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+        ></zz-echart>
+        <div class="totals">
+          <span class="fonst-color">{{ total }}</span>
+          <span class="numbers fonst-color">企业总数</span>
+        </div>
+      </div>
+    </template>
+    <no-permission
+      v-else
+      tipsText="企业类型分布"
+    ></no-permission>
+  </div>
+</template>
+<script>
+import { ringType } from '../indexOptionChart';
+import permissionComponent from '../permissionComponent';
+export default {
+  mixins: [permissionComponent],
+  data () {
+    return {
+      defaultModel: {
+        permissUrl: '21',
+        titleName: '商业管理'
+      },
+      mixins_query: {
+        communityId: ''
+      },
+      total: 0,
+      clientOptions: ringType(
+        [],
+        [
+          { value: 0, name: '餐饮业' },
+          { value: 0, name: '互联网' },
+          { value: 0, name: '金融业' },
+          { value: 0, name: '服务业' },
+        ],
+        {},
+        { type: '', total: 0 }
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-community-web/statisticEnterpriseType', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0) {
+          this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '', total: data.total });
+        }
+      });
+    },
+    eachartObj (data) {
+      this.total = data.total;
+      let typeName = {
+        1: '互联网',
+        2: '其他',
+        3: '政府/事业单位',
+        4: '服务业',
+        5: '餐饮业'
+      };
+      let newData = [];
+      for (let a in data.datas) {
+        newData.push({
+          value: data.datas[a],
+          name: a
+        });
+      }
+      return newData;
+    }
+  },
+  created () {
+    this.getData();
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import '../style.scss';
+.fonst-color {
+    color: #fff;
+}
+</style>

operationSupport/src/views/newWorkBench/components/workbenchMent/personnelSalesanalysis.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="modelBlock">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">人员销售任务分析</div>
+        <div class="model-title-right">
+          <el-date-picker
+            value-format="yyyy-MM"
+            v-model="date"
+            type="month"
+            placeholder="选择月"
+            class="saveColumn-select"
+            @change="changeTime"
+            :clearable="false"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+        ></zz-echart>
+      </div>
+    </template>
+    <no-permission
+      v-else
+      tipsText="人员销售任务分析"
+    ></no-permission>
+  </div>
+</template>
+<script>
+import { columnOptionsChartss } from '../indexOptionChart.js';
+import permissionComponent from '../permissionComponent';
+
+export default {
+  mixins: [permissionComponent],
+  data () {
+    return {
+      defaultModel: {
+        permissUrl: '21',
+        titleName: '商业管理'
+      },
+      mixins_query: {
+        companyOrgId: '',
+        startDate: ''
+      },
+      date: '',
+      clientOptions: columnOptionsChartss(
+        '(个)',
+        ['name1', 'name2', 'name3'],
+        [
+          {
+            name: '跟进数',
+            data: 0
+          },
+          {
+            name: '跟进数',
+            data: 0
+          },
+          {
+            name: '跟进数',
+            data: 0
+          }
+        ],
+        [
+          {
+            name: '签约数',
+            data: 0
+          },
+          {
+            name: '签约数',
+            data: 0
+          },
+          {
+            name: '签约数',
+            data: 0
+          }
+        ],
+        ['跟进数', '签约数'],
+        [],
+        10
+      )
+    };
+  },
+  created () {
+    this.mixins_query.startDate = this.$moment().format('YYYY-MM');
+    this.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  },
+  mounted () { },
+  computed: {},
+  methods: {
+    getData () {
+      this.$http
+        .get('/sc-community-web/business/statistics/user', this.mixins_query)
+        .then(({ status, data, msg }) => {
+
+          if (status == 0) {
+            let dataList = [];
+            let resList = [];
+            let name = []
+
+            for (let i in data) {
+              name.push(data[i].userName);
+              dataList.push({
+                name: '总数',
+                data: data[i].total
+              })
+              resList.push({
+                name: '签约数',
+                data: data[i].signTotal
+              })
+            }
+            this.clientOptions = columnOptionsChartss('(个)', name, dataList, resList, ['总数', '签约数'], [], 10);
+          }
+        })
+        .catch((err) => { });
+    },
+    changeTime (v) {
+      this.mixins_query.startDate = v;
+      this.getData();
+    },
+  }
+};
+</script>
+<style scoped lang="scss">
+@import '../style.scss';
+</style>

operationSupport/src/views/newWorkBench/components/workbenchMent/rentalShops.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="modelBlock">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">商铺租售情况</div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+        ></zz-echart>
+      </div>
+    </template>
+    <no-permission
+      v-else
+      tipsText="商铺租售情况"
+    ></no-permission>
+  </div>
+</template>
+<script>
+import { columnOptionsChartName } from '../indexOptionChart.js';
+import permissionComponent from '../permissionComponent';
+export default {
+  mixins: [permissionComponent],
+
+  data () {
+    return {
+      defaultModel: {
+        permissUrl: '21',
+        titleName: '商业管理'
+      },
+      mixins_query: {
+        communityId: ''
+      },
+      clientOptions: columnOptionsChartName(
+        '(间)',
+        ['name1', 'name2', 'name3'],
+        [
+          {
+            name: 'name1',
+            data: 0
+          },
+          {
+            name: 'name2',
+            data: 0
+          },
+          {
+            name: 'name3',
+            data: 0
+          }
+        ],
+        [],
+        10
+      )
+    };
+  },
+  created () {
+    this.getData();
+  },
+  mounted () { },
+  computed: {},
+  methods: {
+    getData () {
+      this.$http
+        .get('/sc-community/statisticsaleRate', this.mixins_query)
+        .then(({ status, data, msg }) => {
+          if (status == 0) {
+            let name = ['待租售', '已售', '已租'];
+            let dataList = [];
+            for (let i in data.datas) {
+              dataList.push({
+                name: name[i],
+                data: data.datas[i]
+              })
+            }
+            this.clientOptions = columnOptionsChartName('(间)', name, dataList, [], 10);
+          }
+        })
+        .catch((err) => { });
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+@import '../style.scss';
+</style>

operationSupport/src/views/newWorkBench/components/workbenchMent/salesFunnel.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="modelBlock">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">销售漏斗</div>
+        <div class="model-title-right">
+          <el-date-picker
+            value-format="yyyy-MM"
+            v-model="date"
+            type="month"
+            placeholder="选择月"
+            class="saveColumn-select"
+            @change="changeTime"
+            :clearable="false"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+        ></zz-echart>
+      </div>
+    </template>
+    <no-permission
+      v-else
+      tipsText="销售漏斗"
+    ></no-permission>
+  </div>
+
+</template>
+
+
+
+<script>
+import { funnelChart } from '../indexOptionChart';
+import permissionComponent from '../permissionComponent';
+let dataseries = [{ value: 0, name: '意向' },
+{ value: 0, name: '参观' },
+{ value: 0, name: '商务洽谈' },
+{ value: 0, name: '签订合同' },
+{ value: 0, name: '失败' }];
+let series = [{ value: 0, name: '意向' },
+{ value: 0, name: '参观' },
+{ value: 0, name: '商务洽谈' },
+{ value: 0, name: '签订合同' },
+{ value: 0, name: '失败' }];
+export default {
+  mixins: [permissionComponent],
+  data () {
+    return {
+      defaultModel: {
+        permissUrl: '21',
+        titleName: '商业管理'
+      },
+      mixins_query: {
+        startDate: '',
+        companyOrgId: ''
+      },
+      date: '',
+      clientOptions: funnelChart(dataseries, series)
+    }
+  },
+  created () {
+    this.mixins_query.startDate = this.$moment().format('YYYY-MM');
+    this.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  },
+  methods: {
+    getData () {
+      this.$http
+        .get('/sc-community-web/business/statistics/status', this.mixins_query)
+        .then(({ status, data, msg }) => {
+
+          if (status == 0) {
+            let dataseries = [];
+            let series = [];
+            for (let i in data) {
+              dataseries.push({
+                value: data[i].total,
+                name: data[i].businessStatus == 1 ? '意向' : data[i].businessStatus == 2 ? '参观' : data[i].businessStatus == 3 ? '商务洽谈' : data[i].businessStatus == 4 ? '签订合同' : '失败'
+              })
+              series.push({
+                value: data[i].total,
+                name: data[i].businessStatus == 1 ? '意向' : data[i].businessStatus == 2 ? '参观' : data[i].businessStatus == 3 ? '商务洽谈' : data[i].businessStatus == 4 ? '签订合同' : '失败'
+              })
+            }
+            this.clientOptions = funnelChart(dataseries, series)
+          }
+        })
+    },
+    changeTime (v) {
+      this.mixins_query.startDate = v;
+      this.getData();
+    }
+  }
+}
+
+
+
+</script>
+
+
+<style scoped lang="scss">
+@import '../style.scss';
+</style>

operationSupport/src/views/newWorkBench/components/workbenchMent/scoringOperationPersonnel.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="modelBlock">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">运维人员评分系统</div>
+        <div class="model-title-right">
+          <el-date-picker
+            value-format="yyyy-MM"
+            v-model="date"
+            type="month"
+            placeholder="选择月"
+            class="saveColumn-select"
+            @change="changeTime"
+            :clearable="false"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+        ></zz-echart>
+      </div>
+    </template>
+    <no-permission
+      v-else
+      tipsText="运维人员评分系统"
+    ></no-permission>
+  </div>
+</template>
+<script>
+import { columnOptionsChartName } from '../indexOptionChart.js';
+import permissionComponent from '../permissionComponent';
+export default {
+  mixins: [permissionComponent],
+  data () {
+    return {
+      date: "",
+      defaultModel: {
+        permissUrl: '17',
+        titleName: '运维工单'
+      },
+      mixins_query: {
+        communityId: '',
+        date: ''
+      },
+      clientOptions: columnOptionsChartName(
+        '(个)',
+        ['name1', 'name2', 'name3'],
+        [
+          {
+            name: 'name1',
+            data: 0
+          },
+          {
+            name: 'name2',
+            data: 0
+          },
+          {
+            name: 'name3',
+            data: 0
+          }
+        ],
+        [],
+        10
+      )
+    };
+  },
+  created () {
+    this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
+    this.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  },
+  mounted () { },
+  computed: {},
+  methods: {
+    getData () {
+      this.$http
+        .get('/sc-community-web/statisticWorkOrderEvaluate', this.mixins_query)
+        .then(({ status, data, msg }) => {
+          if (status == 0) {
+            debugger
+            let name = [];
+            let Resdate = [];
+            for (let i = 0; i < data.length; i++) {
+              name.push(data[i].name)
+              Resdate.push({
+                name: data[i].name,
+                data: data[i].evaluation
+              })
+            }
+
+            this.clientOptions = columnOptionsChartName('(个)', name, Resdate, [], 10);
+          }
+        })
+        .catch((err) => { });
+    },
+    changeTime (v) {
+      this.mixins_query.date = v + '-01';
+      this.getData();
+    },
+  }
+};
+</script>
+<style scoped lang="scss">
+@import '../style.scss';
+</style>

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

@@ -1,436 +1,513 @@
 <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>
-                <div class="moveBlock_icon">
-                    <img :src="item.imgIcon" :alt="item.title" />
-                </div>
-            </div>
+  <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>
 </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'),
-                    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
-                },
-
-                {
-                    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
-        };
-    },
-    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;
+  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
+        },
+
+        {
+          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
+        }, {
+          data_id: 35,
+          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: 36,
+          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: 37,
+          title: '商铺租售情况',
+          type: 10,
+          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+          imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+          isPosition: '1x1',
+          compatible: true
+        },
+        {
+          data_id: 38,
+          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: 39,
+          title: '人员销售任务分析',
+          type: 10,
+          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+          imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+          isPosition: '1x1',
+          compatible: true
+        }, {
+          data_id: 40,
+          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: 41,
+          title: '运维人员评分系统',
+          type: 6,
+          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+          imgIcon: require('@assets/img/formulation/tag_2x@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);
     },
-    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);
-        }
+    drag (e) {
+      //拖拽中执行的事件
+      // console.log('drag',e)s
     },
-    destroyed() {},
-    created() {}
+    dragend (e) {
+      //拖拽结束执行的事件
+      // console.log('dragend', e);
+    }
+  },
+  destroyed () { },
+  created () { }
 };
 </script>
 <style lang="scss" scoped>