|
|
@@ -0,0 +1,286 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="serch">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="getdataListParm.date"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月"
|
|
|
+ :clearable="false"
|
|
|
+ format="yyyy-MM"
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-select
|
|
|
+ v-model="getdataListParm.pastureId"
|
|
|
+ placeholder="牧场"
|
|
|
+ class="filter-item"
|
|
|
+ style="width: 120px"
|
|
|
+ @change="chosePasture"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in findAllPasture"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <!-- <el-input
|
|
|
+ v-model="getdataListParm.eqCode"
|
|
|
+ placeholder="车辆编号"
|
|
|
+ clearable
|
|
|
+ style="width: 140px"
|
|
|
+ class="filter-item"
|
|
|
+ ></el-input> -->
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="margin-left: 20px"
|
|
|
+ icon="el-icon-search"
|
|
|
+ @click="handlerSerch"
|
|
|
+ >搜 索</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-button type="success" icon="el-icon-download" @click="handleDownload"
|
|
|
+ >导 出</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 列表table -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ header-align="center"
|
|
|
+ style="width: 99%; margin-top: 30px"
|
|
|
+ max-height="590px"
|
|
|
+ v-loading="loading"
|
|
|
+ element-loading-text="数据正在加载..."
|
|
|
+ ref="table"
|
|
|
+ >
|
|
|
+ <template v-for="(item, index) in tableHeader">
|
|
|
+ <el-table-column
|
|
|
+ v-if="item.prop !== 'spotDetectionRate'"
|
|
|
+ :key="index"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :prop="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ v-else="item.prop == 'spotDetectionRate'"
|
|
|
+ :key="index"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :prop="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ :render-header="renderColumnHeader"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <!-- -->
|
|
|
+ <Pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="getdataListParm.offset"
|
|
|
+ :limit.sync="getdataListParm.pagecount"
|
|
|
+ @pagination="getTableList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Cookies from 'js-cookie'
|
|
|
+import { GetDataByNames, getSpotRate } from '@/api/common'
|
|
|
+import { parseTime, json2excel } from '@/utils/index.js'
|
|
|
+import Pagination from '@/components/Pagination'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { Pagination },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ getdataListParm: {
|
|
|
+ pagecount: 10,
|
|
|
+ offset: 1,
|
|
|
+ pastureId: parseInt(Cookies.get('pastureid')),
|
|
|
+ // pastureName: Cookies.get('pasturename'),
|
|
|
+ date: parseTime(new Date(), '{y}-{m}') // 日期
|
|
|
+ // eqCode: ''
|
|
|
+ },
|
|
|
+ requestParams: [
|
|
|
+ {
|
|
|
+ name: 'findAllPasture',
|
|
|
+ offset: 0,
|
|
|
+ pagecount: 0,
|
|
|
+ returntype: 'Map',
|
|
|
+ parammaps: { id: Cookies.get('pastureid') } // id:18 默认查询所有
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ findAllPasture: [], // 牧场数据
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ pastureName: '圣牧'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableHeader: [],
|
|
|
+ headerArr: [
|
|
|
+ {
|
|
|
+ label: '序号',
|
|
|
+ prop: 'sort',
|
|
|
+ width: '50'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '牧场',
|
|
|
+ prop: 'pastureName',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '部门',
|
|
|
+ prop: 'departmentName',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '设备编号',
|
|
|
+ prop: 'eqCode',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '设备名称',
|
|
|
+ prop: 'eqName',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '点检率',
|
|
|
+ prop: 'spotDetectionRate',
|
|
|
+ width: '100'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+},
|
|
|
+created() {
|
|
|
+ this.getPasture()
|
|
|
+ this.getTableList()
|
|
|
+},
|
|
|
+methods: {
|
|
|
+ // 点击
|
|
|
+ chosePasture(val) {
|
|
|
+ this.getdataListParm.pastureId = this.findAllPasture.find(item => item.id == val).id
|
|
|
+ console.log(val, this.getdataListParm.pastureId, 'hss')
|
|
|
+ },
|
|
|
+ // 点击搜索
|
|
|
+ handlerSerch() {
|
|
|
+ this.getdataListParm.pagecount = 10
|
|
|
+ this.getdataListParm.offset = 1
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+ // 获取当前用户牧场信息
|
|
|
+ async getPasture() {
|
|
|
+ const { data } = await GetDataByNames(this.requestParams)
|
|
|
+ this.findAllPasture = data.findAllPasture.list
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取列表数据
|
|
|
+ async getTableList() {
|
|
|
+ this.loading = true
|
|
|
+ const { data } = await getSpotRate(this.getdataListParm)
|
|
|
+ data.list.length &&
|
|
|
+ data.list.forEach((item, index) => {
|
|
|
+ item.sort = index + 1
|
|
|
+ item.spotDetectionRate = `${item.spotDetectionRate}%`
|
|
|
+ })
|
|
|
+ this.tableData = data.list
|
|
|
+ this.tableHeader = [...this.headerArr, ...this.getMounth()]
|
|
|
+ this.total = data.total
|
|
|
+ this.loading = false
|
|
|
+ console.log(this.tableHeader, 'tableHeader')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取当前月份的天数
|
|
|
+ getMounth() {
|
|
|
+ const arr = []
|
|
|
+ const temp = this.getdataListParm.date.split('-')
|
|
|
+ const year = temp[0]
|
|
|
+ const month = temp[1]
|
|
|
+ const day = new Date(year, month, 0)
|
|
|
+ for (let index = 1; index <= day.getDate(); index++) {
|
|
|
+ index = JSON.stringify(index)
|
|
|
+ const value = { label: index, prop: index, width: '60' }
|
|
|
+ arr.push(value)
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导出功能
|
|
|
+ handleDownload() {
|
|
|
+ this.getdataListParm.pagecount = 9999
|
|
|
+ getSpotRate(this.getdataListParm).then((res) => {
|
|
|
+ const { data } = res
|
|
|
+ this.getdataListParm.pagecount = 10
|
|
|
+ data.list.length &&
|
|
|
+ data.list.forEach((item, index) => {
|
|
|
+ item.sort = index + 1
|
|
|
+ })
|
|
|
+ const table = this.$refs.table
|
|
|
+ const labels = table.columns.map((column) => column.label)
|
|
|
+ const filterVal = this.tableHeader.map((item) => {
|
|
|
+ return item.prop
|
|
|
+ })
|
|
|
+ console.log(labels, filterVal, 'label')
|
|
|
+ const elecExcelDatas = [
|
|
|
+ {
|
|
|
+ tHeader: labels,
|
|
|
+ filterVal: filterVal,
|
|
|
+ tableDatas: data.list,
|
|
|
+ sheetName: 'SheetJS'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ json2excel(elecExcelDatas, '车辆运转率', true, 'xlsx')
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 运转率展示的内容
|
|
|
+ renderColumnHeader(h, { column }) {
|
|
|
+ return h(
|
|
|
+ 'el-tooltip',
|
|
|
+ {
|
|
|
+ effect: 'dark',
|
|
|
+ placement: 'top-start'
|
|
|
+ },
|
|
|
+ [
|
|
|
+ h(
|
|
|
+ 'div',
|
|
|
+ {
|
|
|
+ slot: 'content'
|
|
|
+ },
|
|
|
+ [h('span', {}, '点检天数/总天数（实际天数）')]
|
|
|
+ ),
|
|
|
+ h('div', [
|
|
|
+ h('span', column.label),
|
|
|
+ h('i', {
|
|
|
+ class: 'el-icon-question',
|
|
|
+ style: 'color:#606266;margin-left:5px;vertical-align:middle'
|
|
|
+ })
|
|
|
+ ])
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ .container {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ /deep/ .el-table th div {
|
|
|
+ // white-space: pre;
|
|
|
+ white-space: pre-wrap; // 也行。
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
Shan9312