CZC/operationSupport/src/views/newWorkBench/components/PatrolProblem.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="queryDate"
            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';
import permissionComponent from './permissionComponent';
export default {
  mixins: [permissionComponent],
  data () {
    return {
      defaultModel: {
        permissUrl: '19',
        titleName: '安保巡更'
      },
      mixins_query: {
        communityId: '',
        queryDate: ''
      },
      queryDate: '',
      clientOptions: columnOptionsChartName(
        '(个)',
        ['name1', 'name2', 'name3'],
        [
          {
            name: 'name1',
            data: 0
          },
          {
            name: 'name2',
            data: 0
          },
          {
            name: 'name3',
            data: 0
          }
        ],
        [],
        10
      )
    };
  },
  methods: {
    // getData () {
    //   this.$http.get('/czc-community/statisticPatrolPersonnelDuration', this.mixins_query).then(({ data, msg, status }) => {
    //     if (status == 0 && !!data.length) {
    //       let name = [];
    //       data.map((item) => {
    //         name.push(item.name);
    //         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
    //       );
    //     }
    //   });
    // },
    changeTime (v) {
      this.mixins_query.queryDate = v;
      this.getData();
    },
    getData () {
      this.$http.get('/czc-community/patrol/record/standard/top', this.mixins_query).then(({ data, msg, status }) => {
        if (status == 0) {
          let name = [];
          let resDate = [];
          data.map((item, index) => {
            name.push(item.content)
            resDate.push({
              name: item.content,
              data: item.count
            })
          })
          this.clientOptions = columnOptionsChartName('(个)', name, resDate, [], 10);
        }
      })
    }
  },
  created () {
    this.queryDate = this.$moment().format('YYYY-MM');
    this.mixins_query.queryDate = this.$moment().format('YYYY-MM');
    this.getData();
  }
};
</script>
<style scoped lang="scss">
@import './style.scss';
.model-title {
    .model-title-right {
        .saveColumn-select {
            &:not(:first-child) {
                margin-left: rem(20);
            }
        }
    }
}
</style>