SmartCommunity/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 { columnOptionsChart } from './indexOptionChart';
import permissionComponent from './permissionComponent';
let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
export default {
  mixins: [permissionComponent],
  data () {
    return {
      defaultModel: {
        permissUrl: '19',
        titleName: '安保巡更'
      },
      mixins_query: {
        communityId: '',
        date: '',
      },
      date: '',
      clientOptions: columnOptionsChart('(分)', [], [{ data: dataArr, name: '任务时长' }], [], 10)
    };
  },
  methods: {
    getData () {
      this.$http.get('/sc-community/statisticPatrolPersonnelDuration', this.mixins_query).then(({ data, msg, status }) => {
        if (status == 0 && !!data) {
          let timeDay = [],
            datas = [];
          data.map((item) => {
            timeDay.push(item.date);
            datas.push(item.data);
          });
          this.clientOptions = columnOptionsChart('(分)', timeDay, [{ data: datas, name: '任务时长' }], [], 10);
        }
      });
    },
    changeTime (v) {
      this.mixins_query.date = v;
      this.getData();
    }
  },
  created () {
    this.date = this.$moment().format('YYYY-MM');
    this.mixins_query.date = 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>