CZC/operationSupport/src/views/newWorkBench/components/patrolDuration.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>
    </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: '',
        date: ''
      },
      date: '',
      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.date = v + '-01';
      this.getData();
    }
  },
  created () {
    debugger
    this.date = this.$moment().format('YYYY-MM');
    this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
    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>