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

<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>
  </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')
        },

      ],
      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);
    },
    drag (e) {
      //拖拽中执行的事件
      // console.log('drag',e)s
    },
    dragend (e) {
      //拖拽结束执行的事件
      // console.log('dragend', e);
    }
  },
  destroyed () { },
  created () { }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
$BackColor: #171f32;

.leftAssembly {
    width: 174px;
    background: $BackColor;
    border-radius: 4px;
    padding: rem(20) rem(8) rem(20) rem(20);
    .saveColumn-select {
        margin-bottom: rem(30);
        margin-right: rem(12);
        /deep/ .el-input__inner {
            background: transparent;
            color: white;
            border-color: rgba(255, 255, 255, 0.2);
        }
    }
    // 块级模块
    .componentsBlock {
        height: calc(100% - #{rem(62)});
        overflow-y: auto;
        overflow-x: hidden;
        &::-webkit-scrollbar {
            z-index: 11;
            width: rem(4);
        }
        &::-webkit-scrollbar-track,
        &::-webkit-scrollbar-corner {
            background: transparent;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            width: rem(4);
            background: rgba(250, 250, 250, 0.09);
        }
        &::-webkit-scrollbar-track-piece {
            background: transparent;
            width: rem(4);
        }
        .moveBlock {
            font-size: 12px;
            width: rem(132);
            height: rem(132);
            background: rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: rem(10);
            margin-bottom: rem(20);
            text-align: center;
            position: relative;
            cursor: move;
            .moveBlock_titles {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
            }
            .moveBlock_img {
                width: rem(60);
                margin: auto;
                img {
                    width: 100%;
                    margin-top: rem(20);
                }
            }
            .moveBlock_icon {
                position: absolute;
                right: 0;
                bottom: 0;
                height: rem(20);
                img {
                    width: rem(28);
                    height: rem(20);
                }
            }
        }
    }
}
</style>