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

<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) {
      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>