新增储罐管理，数据分析新增导出功能

fei.wang

2025-03-17 afedb522ac910d1e5265ad93b9bacb1da41cfefb

 src/views/analysis/index.vue

@@ -19,6 +19,16 @@
          新增
        </el-button> -->
      </el-button-group>

      <span style="margin-left: 100px;">
        <el-date-picker v-model="timeExport" type="daterange" unlink-panels :picker-options="pickerOptions"
          range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" />

        <el-button style="margin-left: 10px;" type="primary" @click="exportExcel">导出EXCEL</el-button>

      </span>


    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit height="100%"
@@ -84,8 +94,8 @@
  </div>
  <div v-else class="app-container">
    <div style="margin-bottom: 30px;">
      <el-date-picker v-model="queryForm.time" type="monthrange"  unlink-panels  :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间"
        end-placeholder="结束时间" value-format="yyyy-MM-dd" />
      <el-date-picker v-model="queryForm.time" type="daterange" unlink-panels :picker-options="pickerOptions"
        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" />
      <el-button style="margin-left: 10px;" type="primary" @click="handlechart">搜索</el-button>
      <el-button style="position: absolute; right: 50px;" type="primary" @click="fanhui">返回</el-button>

@@ -100,7 +110,8 @@
      <el-button v-if="last" style="margin-left: 10px;" :type="lastyearprimary" @click="lastyear">上一年</el-button>
      <el-button v-if="next" style="margin-left: 10px;" :type="nextyearprimary" @click="nextyear">下一年</el-button>
    </div>
    <span style=" display: flex;justify-content: center;align-items: center;font-size: 25px;"> {{ this.anchorname+"-" +this.tagid+"变化趋势图"}}</span>
    <span style=" display: flex;justify-content: center;align-items: center;font-size: 25px;"> {{ this.anchorname + "-"
      + this.tagid +"变化趋势图"}}</span>
    <line-chart :chart-data="lineChartData" />


@@ -108,10 +119,12 @@
</template>

<script>
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import { formatTime1 } from "@/utils/index.js"; //日期格式转换
import LineChart from "./components/LineChart";
import Pagination from '@/components/Pagination'
import { getList, searcheveryday, handlechart2, handlechartupdate3 } from '@/api/analysis'
import { getList, searcheveryday, handlechart2, handlechartupdate3,handlechartupdate2 } from '@/api/analysis'
import { deepClone } from '@/utils'

const lineChartData = {
@@ -169,6 +182,7 @@
        time: '',
        tagid: ''
      },
      timeExport: '',
      lineChartData: lineChartData.newVisitis,
      analy: true,
      total: 0,
@@ -193,6 +207,43 @@
    this.fetchData()
  },
  methods: {
    exportExcel() {
      console.log(this.timeExport);
      // const data = []
const params = { date1: this.timeExport[1], date2: this.timeExport[0], username: localStorage.getItem('username') || '' };
handlechartupdate2(params).then(response => {
  console.log(response);
  const data = response.data
  // 获取要导出的数据
  // const data = this.list; // 假设list是表格的数据
  // 创建一个空的工作簿
  const workbook = XLSX.utils.book_new();
  // 创建一个工作表
  const worksheet = XLSX.utils.json_to_sheet(data);
  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 将工作簿转换为二进制字符串
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  // 将二进制字符串转换为Blob对象
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
  // 创建一个下载链接
  const url = URL.createObjectURL(blob);
  // 创建一个隐藏的链接元素
  const link = document.createElement('a');
  link.href = url;
  link.download = 'export.xlsx'; // 设置下载的文件名
  // 模拟点击下载链接
  link.click();
  // 释放URL对象
  URL.revokeObjectURL(url);
})
// console.log(data);

  
},
    Export() {

    },
    fanhui() {
      this.analy = true
    },
@@ -201,6 +252,8 @@
      this.tagid=scope.row.tagid
      const params = { date1: this.queryForm.time[1], date2: this.queryForm.time[0], username: localStorage.getItem('username') || '' ,tagid:scope.row.tagid};
      handlechart2(params).then(response => {
        console.log(response);
        
        this.lineChartData = response.data
        this.analy = false
      })
@@ -425,8 +478,16 @@
    search() {
      this.listLoading = true
      searcheveryday(this.listQuery).then(response => {
        if (response.data!=null) {
        this.list = response.data.records
        this.total = response.data.total
        }else{
          this.$message({
            message: '未搜索到数据',
            type: 'error'
          })
        }
      
        this.listLoading = false
      })
    },
@@ -499,13 +560,17 @@
    text-align: center;
  }
}

.el-table .el-table__body tr:hover {
  background-color: transparent!important; /* 你想要的背景色 */
  background-color: transparent !important;
  /* 你想要的背景色 */
  color: #000!important;
}

.el-table__body {
  tr:hover > td {
    background-color: transparent!important; /* 你想要的背景色 */
    background-color: transparent !important;
    /* 你想要的背景色 */
    color: #000!important;
  }
}