jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue

<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>