CZC/operationSupport/src/views/facilityInspections/inspectionsRecordsStatistics.vue

<template>
  <div class="main">
    <div class="search">
      <el-input
        placeholder="巡检设备编号/名称"
        class="search-input"
        clearable
        v-model="mixins_query.no"
      ></el-input>
      <el-select
        v-model="mixins_query.communityId"
        placeholder="请选择所属社区"
      >
        <el-option
          v-for="(item, index) in communityArr"
          :key="index"
          :label="item.communityName"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-cascader
        v-model="typeValueW"
        :props="defaultProps"
        ref="typeValue"
        placeholder="请选择"
        :options="productOptions"
        @change="deviceArrToggle"
      ></el-cascader>
      <el-date-picker
        v-model="times"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="effectiveDateToggle"
      ></el-date-picker>
      <el-button
        type="primary"
        class="search-btn"
        @click="mixins_search"
        icon="el-icon-search"
      >查询 </el-button>
      <div class="search-icon">
        <el-tooltip
          class="item"
          effect="light"
          placement="bottom"
          content="导出"
        >
          <i
            class="zoniot_font zoniot-icon-daochu2"
            @click="exportExcel()"
          ></i>
        </el-tooltip>
      </div>
    </div>
    <div class="zz-table">
      <el-table
        :data="mixins_list"
        stripe
      >
        <el-table-column
          type="index"
          label="No."
        > </el-table-column>
        <el-table-column
          prop="communityName"
          label="所属社区"
        > </el-table-column>
        <el-table-column label="设备设施类型">
          <template slot-scope="scope">
            {{ scope.row.typeValue || '--' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="no"
          label="设备编号"
        > </el-table-column>
        <el-table-column
          prop="name"
          label="设备名称"
        > </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        > </el-table-column>
        <el-table-column
          prop="checkTime"
          label="巡检时间"
        > </el-table-column>
        <el-table-column
          prop="result"
          label="巡检结果"
        > </el-table-column>
        <el-table-column label="图片/视频">
          <template slot-scope="scope">
            <div v-if="!!scope.row.picturePath">
              <div
                class="imgVdio"
                v-for="item in scope.row.picturePath.split(',')"
                :key="item"
              >
                <video
                  v-if="typeVideo(item)"
                  :src="item"
                  @click="lookVideos(item)"
                ></video>
                <el-image
                  class="imgs"
                  v-else
                  :src="item"
                  :preview-src-list="[item]"
                ></el-image>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          :label="item"
          v-for="(item, index) in headArr"
          :key="index"
        >
          <template slot-scope="scope">
            {{ scope.row.options[item] || '--' }}
          </template>
        </el-table-column>
      </el-table>
      <div class="foot">
        <el-pagination
          class="pagination"
          background
          @size-change="pageSize"
          @current-change="pageChange"
          :current-page="mixins_pageset.currentPage"
          :page-sizes="mixins_pageset.pageSizes || [15, 30, 60, 120]"
          :page-size="mixins_pageset.pageSize || 15"
          :total="mixins_pageset.total || 0"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import list from '@utils/list.js';
export default {
  mixins: [list],
  name: 'workOrdersRecords',
  data () {
    return {
      communityArr: [],
      productOptions: [],
      typeValueW: [],
      defaultProps: {
        value: 'id', // 唯一标识
        label: 'label', // 标签显示
        children: 'children'
      },
      mixins_query: {
        communityId: '',
        type: '',
        typeId: '',
        no: ''
      },
      times: [],
      headArr: [],
      mixins_post: 'post'
    };
  },
  created () {
    let p1 = new Promise((resolve) => {
      this.getorgTree(resolve);
    });
    let p2 = new Promise((resolve) => {
      this.getProductOptions(resolve);
    });
    this.getTable(p1, p2);
  },
  mounted () { },
  methods: {
    typeVideo (str) {
      let type = str.slice(str.lastIndexOf('.') + 1, str.length);
      let videoType = ['mp4'];
      return videoType.includes(type);
    },
    lookVideos (src) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/lookVideo.vue',
          width: '600px',
          height: '500px',
          props: {
            src: src,
            callback: resolve
          },
          showConfirmButton: true,
          showCancelButton: true,
          hideStar: true,
          title: '查看视频'
        });
      }).then(() => {
        this.mixins_search();
      });
    },
    exportExcel () {
      this.__exportExcel('/czc-community/inspectionRecord/getInspectionOptionExcel', this.mixins_query);
    },
    pageChange (obj) {
      this.mixins_pageset.pageNum = obj;
      this.getList();
    },
    pageSize (obj) {
      this.mixins_pageset.pageSize = obj;
      this.getList();
    },
    getTable (p1, p2) {
      Promise.all([p1, p2])
        .then((results) => {
          new Promise((resolve) => {
            this.getHetailHead(resolve);
          }).then((res) => {
            this.mixins_dataUrl = '/czc-community/inspectionRecord/statisticsDetail';
            this.mixins_search();
          });
        })
        .catch((e) => { });
    },
    effectiveDateToggle (va) {
      if (va != null && va.length != 0) {
        let arr = va;
        if (!arr) {
          arr = ['', ''];
        }
        this.mixins_query.startTime = arr[0] + ' 00:00:00';
        this.mixins_query.endTime = arr[1] + ' 23:59:59';
      } else {
        this.mixins_query.startTime = null;
        this.mixins_query.endTime = null;
      }

    },
    getHetailHead (resolve) {
      this.$http
        .post('/czc-community/inspectionRecord/getstatisticsDetailHead', this.mixins_query)
        .then(({ status, data, msg }) => {
          if (status == 0) {
            this.headArr = data;
            resolve && resolve(true);
          }
        })
        .catch((err) => { });
    },
    getorgTree (resolve) {
      this.$http
        .get('/czc-community/assets/community/list')
        .then((data) => {
          this.communityArr = data.data;
          this.mixins_query.communityId = data.data[0].id;
          this.$store.commit('setAreaSelect', data.data);
          resolve && resolve(true);
        })
        .catch(function () { });
    },
    getProductOptions (resolve) {
      this.$http.postForm('/czc-community/devicetype/getTypeTree', { name: '' }).then((data) => {
        this.productOptions = data;
        if (data.length !== 0) {
          if (!!data[0].children && !!data[0].children[0].children) {
            this.mixins_query.type = data[0].children[0].children[0].type;
            this.mixins_query.typeId = data[0].children[0].children[0].id;
            this.typeValueW = [null, null, data[0].children[0].children[0].id];
          }
        }
        resolve && resolve(true);
      });
    },
    deviceArrToggle (e) {
      this.mixins_query.typeId = e[e.length - 1];
      if (!!this.mixins_query.typeId) {
        this.mixins_query.type = this.$refs.typeValue.getCheckedNodes()[0].data.type;
      }
      this.getTable();
    }
  }
};
</script>
<style scoped lang='scss'>
.imgVdio {
    display: inline-block;
    margin-right: 10px;
    .imgs,
    video {
        width: 64px;
        cursor: pointer;
    }
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td,
/deep/ .el-table__row--striped {
    background: #f8fcff;
}
</style>