3 changed files with 291 additions and 1 deletions
			
			
		@ -0,0 +1,73 @@ | 
				
			|||||
 | 
					import moment from "moment"; | 
				
			||||
 | 
					export const searchFormList = [ | 
				
			||||
 | 
					  { | 
				
			||||
 | 
					    label: "时间类型:", | 
				
			||||
 | 
					    key: "type", | 
				
			||||
 | 
					    type: "select", | 
				
			||||
 | 
					    default: "day", | 
				
			||||
 | 
					    options: { | 
				
			||||
 | 
					      clearable: true, | 
				
			||||
 | 
					      options: [ | 
				
			||||
 | 
					        { | 
				
			||||
 | 
					          key: "day", | 
				
			||||
 | 
					          label: "天", | 
				
			||||
 | 
					        }, | 
				
			||||
 | 
					        { | 
				
			||||
 | 
					          key: "month", | 
				
			||||
 | 
					          label: "月", | 
				
			||||
 | 
					        }, | 
				
			||||
 | 
					        { | 
				
			||||
 | 
					          key: "year", | 
				
			||||
 | 
					          label: "年", | 
				
			||||
 | 
					        }, | 
				
			||||
 | 
					      ], | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  { | 
				
			||||
 | 
					    label: "日期:", | 
				
			||||
 | 
					    key: "startTime", | 
				
			||||
 | 
					    required: true, | 
				
			||||
 | 
					    type: "datePicker", | 
				
			||||
 | 
					    options: { | 
				
			||||
 | 
					      valueFormat: "yyyy-MM-dd", | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    default: moment().format("YYYY-MM-DD"), | 
				
			||||
 | 
					    visible: (data) => { | 
				
			||||
 | 
					      if (data.type == "day") { | 
				
			||||
 | 
					        return true; | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  { | 
				
			||||
 | 
					    label: "日期:", | 
				
			||||
 | 
					    key: "startTime", | 
				
			||||
 | 
					    required: true, | 
				
			||||
 | 
					    type: "datePicker", | 
				
			||||
 | 
					    options: { | 
				
			||||
 | 
					      type: "month", | 
				
			||||
 | 
					      valueFormat: "yyyy-MM-dd", | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    default: moment().format("YYYY-MM-DD"), | 
				
			||||
 | 
					    visible: (data) => { | 
				
			||||
 | 
					      if (data.type == "month") { | 
				
			||||
 | 
					        return true; | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  { | 
				
			||||
 | 
					    label: "日期:", | 
				
			||||
 | 
					    key: "startTime", | 
				
			||||
 | 
					    required: true, | 
				
			||||
 | 
					    type: "datePicker", | 
				
			||||
 | 
					    options: { | 
				
			||||
 | 
					      type: "year", | 
				
			||||
 | 
					      valueFormat: "yyyy-MM-dd", | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    default: moment().format("YYYY-MM-DD"), | 
				
			||||
 | 
					    visible: (data) => { | 
				
			||||
 | 
					      if (data.type == "year") { | 
				
			||||
 | 
					        return true; | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					]; | 
				
			||||
@ -0,0 +1,212 @@ | 
				
			|||||
 | 
					<template> | 
				
			||||
 | 
					  <div class='board_record'> | 
				
			||||
 | 
					    <!-- 搜索栏 --> | 
				
			||||
 | 
					    <div class="filter"> | 
				
			||||
 | 
					      <div> | 
				
			||||
 | 
					         <ButtonGradient @click.native="handleExport"> | 
				
			||||
 | 
					          <template #prefix> | 
				
			||||
 | 
					            <img src="@screen/images/export.svg" /> | 
				
			||||
 | 
					          </template> | 
				
			||||
 | 
					          导出 | 
				
			||||
 | 
					        </ButtonGradient> | 
				
			||||
 | 
					        <ButtonGradient @click="onRefreshForm" class="refresh-btn"> | 
				
			||||
 | 
					        <template #prefix> | 
				
			||||
 | 
					          <img src="@screen/images/refresh.svg" /> | 
				
			||||
 | 
					        </template> | 
				
			||||
 | 
					        刷新 | 
				
			||||
 | 
					      </ButtonGradient> | 
				
			||||
 | 
					      </div> | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					      <InputSearch ref="searchComp" style="width: 400px" :formList="searchFormList" @handleSearch="handleSearch" /> | 
				
			||||
 | 
					    </div> | 
				
			||||
 | 
					    <!-- 内容 --> | 
				
			||||
 | 
					    <div class="body"> | 
				
			||||
 | 
					      <Table :data="tableData" :span-method="mergeRow" > | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					        <ElTableColumn label="设备名称" prop="stakeMark" width="200"  align="center" header-align="center" > | 
				
			||||
 | 
					          <template slot-scope="scope"> | 
				
			||||
 | 
					            <span>一类交调站{{scope.row.stakeMark}}</span> | 
				
			||||
 | 
					          </template> | 
				
			||||
 | 
					        </ElTableColumn> | 
				
			||||
 | 
					        <ElTableColumn label="方向" prop="direction"  align="center" header-align="center" width="120"> | 
				
			||||
 | 
					          <template slot-scope="scope"> | 
				
			||||
 | 
					            <span v-if="scope.row.direction == '1'">菏泽</span> | 
				
			||||
 | 
					            <span v-if="scope.row.direction == '3'">济南</span> | 
				
			||||
 | 
					          </template> | 
				
			||||
 | 
					        </ElTableColumn> | 
				
			||||
 | 
					        <ElTableColumn v-for="item in columnList" :label="item.label" :prop="item.key" min-width="80" align="center" header-align="center" /> | 
				
			||||
 | 
					        <ElTableColumn label="合计" prop="total" width="150" align="center" header-align="center" /> | 
				
			||||
 | 
					      </Table> | 
				
			||||
 | 
					    </div> | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					  </div> | 
				
			||||
 | 
					</template> | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					<script> | 
				
			||||
 | 
					import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; | 
				
			||||
 | 
					import Pagination from '@screen/components/Pagination.vue'; | 
				
			||||
 | 
					import Table from '@screen/components/Table.vue'; | 
				
			||||
 | 
					import request from "@/utils/request"; | 
				
			||||
 | 
					import BoardRecordPreview from '@screen/components/infoBoard/BoardRecordPreview.vue' | 
				
			||||
 | 
					import InputSearch from "@screen/components/InputSearch/index.vue"; | 
				
			||||
 | 
					import { searchFormList } from "./data"; | 
				
			||||
 | 
					import { delay, exportFile, confirm } from "@screen/utils/common"; | 
				
			||||
 | 
					import Button from "@screen/components/Buttons/Button.vue"; | 
				
			||||
 | 
					import Form from "@screen/components/FormConfig"; | 
				
			||||
 | 
					import Dialog from "@screen/components/Dialog/index.vue"; | 
				
			||||
 | 
					import {  mapState } from "vuex"; | 
				
			||||
 | 
					import moment from 'moment'; | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					export default { | 
				
			||||
 | 
					  name: 'survey', | 
				
			||||
 | 
					  components: { | 
				
			||||
 | 
					    ButtonGradient, | 
				
			||||
 | 
					    Pagination, | 
				
			||||
 | 
					    Table, | 
				
			||||
 | 
					    Button, | 
				
			||||
 | 
					    Form, | 
				
			||||
 | 
					    Dialog, | 
				
			||||
 | 
					    BoardRecordPreview, | 
				
			||||
 | 
					    InputSearch | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  data() { | 
				
			||||
 | 
					    return { | 
				
			||||
 | 
					      tableData: [], | 
				
			||||
 | 
					      searchFormList, | 
				
			||||
 | 
					      total: 20, | 
				
			||||
 | 
					      searchData: { | 
				
			||||
 | 
					      }, | 
				
			||||
 | 
					      columnList:[], | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  computed: { | 
				
			||||
 | 
					    ...mapState(["menu"]), | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  created() { | 
				
			||||
 | 
					    this.initData(); | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  mounted(){ | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  methods: { | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					    mergeRow({ row, column, rowIndex, columnIndex }) { | 
				
			||||
 | 
					      if (columnIndex === 0) { | 
				
			||||
 | 
					        const start = this.tableData.findIndex(data => data.stakeMark === row.stakeMark); | 
				
			||||
 | 
					        if (start !== -1) { | 
				
			||||
 | 
					          const count = this.tableData.filter((data, index) => index >= start && data.stakeMark === row.stakeMark).length; | 
				
			||||
 | 
					          if (rowIndex === start) { | 
				
			||||
 | 
					            return [count, 1]; // 返回要合并的行数和列数 | 
				
			||||
 | 
					          } else { | 
				
			||||
 | 
					            return [0, 0]; // 不合并 | 
				
			||||
 | 
					          } | 
				
			||||
 | 
					        } | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					      return [1, 1]; | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					    onRefreshForm(){ | 
				
			||||
 | 
					      this.searchData.pageNum = 1; | 
				
			||||
 | 
					      this.$refs.searchComp.handleResetForm(); | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    handleSearch(data) { | 
				
			||||
 | 
					      data.timestamp = data.startTime + " 00:00:01"; | 
				
			||||
 | 
					      this.searchData = { ...data }; | 
				
			||||
 | 
					      this.initData(); | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    indexMethod(index) { | 
				
			||||
 | 
					        return this.searchData.pageSize*(this.searchData.pageNum-1) + index + 1; | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    // | 
				
			||||
 | 
					    /** 导出按钮操作 */ | 
				
			||||
 | 
					    handleExport() { | 
				
			||||
 | 
					      exportFile({ | 
				
			||||
 | 
					        url: "/trafficSurveyData/dcTrafficSurveyData/export", | 
				
			||||
 | 
					        filename: "一类交调站", | 
				
			||||
 | 
					        data: this.searchData, | 
				
			||||
 | 
					      }); | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    initData() { | 
				
			||||
 | 
					      if(!this.searchData.timestamp){ | 
				
			||||
 | 
					        this.searchData.timestamp = moment().format('YYYY-MM-DD') + " 00:00:01" | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					      if(!this.searchData.type){ | 
				
			||||
 | 
					        this.searchData.type = 'day' | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					      request({ | 
				
			||||
 | 
					        url: `/trafficSurveyData/dcTrafficSurveyData/list`, | 
				
			||||
 | 
					        method: "get", | 
				
			||||
 | 
					        params: this.searchData, | 
				
			||||
 | 
					      }).then((result) => { | 
				
			||||
 | 
					        this.columnList = result.data.columnList | 
				
			||||
 | 
					        this.tableData = result.data.rowList | 
				
			||||
 | 
					      }); | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    onSizeChange(pageSize) { | 
				
			||||
 | 
					      this.tableData = []; | 
				
			||||
 | 
					      this.searchData.pageSize = pageSize; | 
				
			||||
 | 
					      this.searchData.pageNum = 1; | 
				
			||||
 | 
					      this.initData(); | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					} | 
				
			||||
 | 
					</script> | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					<style lang='scss' scoped> | 
				
			||||
 | 
					.board_record { | 
				
			||||
 | 
					  width:100%; | 
				
			||||
 | 
					  height: 100%; | 
				
			||||
 | 
					  display: flex; | 
				
			||||
 | 
					  flex-direction: column; | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					  .filter { | 
				
			||||
 | 
					    display: flex; | 
				
			||||
 | 
					    justify-content: space-between; | 
				
			||||
 | 
					    align-items: center; | 
				
			||||
 | 
					    margin-bottom: 20px; | 
				
			||||
 | 
					    >div { | 
				
			||||
 | 
					      display: flex; | 
				
			||||
 | 
					      gap: 6px; | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					  .body { | 
				
			||||
 | 
					    flex: 1; | 
				
			||||
 | 
					    height: 0; | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					  .footer { | 
				
			||||
 | 
					    margin-top: 15px; | 
				
			||||
 | 
					    height: 36px; | 
				
			||||
 | 
					    display: flex; | 
				
			||||
 | 
					    align-items: center; | 
				
			||||
 | 
					    justify-content: center; | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					  .board_shower{ | 
				
			||||
 | 
					    margin: 4px; | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					  ::v-deep .el-carousel__indicators--horizontal{ | 
				
			||||
 | 
					    line-height: 0; height: 16px; | 
				
			||||
 | 
					    .el-carousel__indicator--horizontal{ | 
				
			||||
 | 
					      padding: 7px 4px; | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					  ::v-deep .el-table__cell div.cell { | 
				
			||||
 | 
					    padding: 0 10px !important; | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					} | 
				
			||||
 | 
					.upload-file{ | 
				
			||||
 | 
					  position: absolute; | 
				
			||||
 | 
					  width: 120px; | 
				
			||||
 | 
					  height: 120px; | 
				
			||||
 | 
					  margin-left: 55%; | 
				
			||||
 | 
					  bottom: 210px; | 
				
			||||
 | 
					  z-index: 9999; | 
				
			||||
 | 
					} | 
				
			||||
 | 
					::v-deep .el-upload-dragger{ | 
				
			||||
 | 
					    background-color: #104c66 !important; | 
				
			||||
 | 
					    border: 1px solid #359cbc !important; | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					} | 
				
			||||
 | 
					</style> | 
				
			||||
					Loading…
					
					
				
		Reference in new issue