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

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%"
@@ -70,7 +80,7 @@


      </el-table-column>
      <el-table-column label="添加时间" >
      <el-table-column label="添加时间">
        <template slot-scope="scope">
          {{ scope.row.addtime }}
        </template>
@@ -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 = {
@@ -120,7 +133,7 @@
    nd: [],
    hd: [],
    x: [],
   

  },

};
@@ -132,43 +145,44 @@
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        yearprimary:'success',
        oneprimary:'primary',
        twoprimary:'primary',
        threeprimary:'primary',
        lastyearprimary:'primary',
        nextyearprimary:'primary',
      last:true,
      next:false,
      yeardata:0,
      anchorname:'',
      tagid:'',
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      yearprimary: 'success',
      oneprimary: 'primary',
      twoprimary: 'primary',
      threeprimary: 'primary',
      lastyearprimary: 'primary',
      nextyearprimary: 'primary',
      last: true,
      next: false,
      yeardata: 0,
      anchorname: '',
      tagid: '',
      queryForm: {
        time: '',
        tagid: ''
      },
      timeExport: '',
      lineChartData: lineChartData.newVisitis,
      analy: true,
      total: 0,
@@ -193,25 +207,64 @@
    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
    },
    analyze(scope) {
      this.anchorname=scope.row.anchorname
      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};
      this.anchorname = scope.row.anchorname
      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
      })
    },
    one() {
      this.oneprimary='success'
      this.twoprimary='primary'
      this.threeprimary='primary'
      this.yearprimary='primary'
      this.lastyearprimary='primary'
      this.nextyearprimary='primary'
      this.oneprimary = 'success'
      this.twoprimary = 'primary'
      this.threeprimary = 'primary'
      this.yearprimary = 'primary'
      this.lastyearprimary = 'primary'
      this.nextyearprimary = 'primary'
      // 获取当前日期
      const currentDate = new Date();
      // 获取当前月份
@@ -224,22 +277,22 @@
      var time = []
      time.push(newDate)
      time.push(dateYear)
      this.queryForm.time=time
      const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '' ,tagid:this.tagid};
      this.queryForm.time = time
      const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '', tagid: this.tagid };
      handlechartupdate3(params).then(response => {
        this.lineChartData = response.data
      })

    },
    two() {
      this.oneprimary='primary'
      this.twoprimary='success'
      this.threeprimary='primary'
      this.yearprimary='primary'
      this.lastyearprimary='primary'
      this.nextyearprimary='primary'
        // 获取当前日期
        const currentDate = new Date();
      this.oneprimary = 'primary'
      this.twoprimary = 'success'
      this.threeprimary = 'primary'
      this.yearprimary = 'primary'
      this.lastyearprimary = 'primary'
      this.nextyearprimary = 'primary'
      // 获取当前日期
      const currentDate = new Date();
      // 获取当前月份
      const currentMonth = currentDate.getMonth();
      // 设置日期的月份为当前月份减一
@@ -250,20 +303,20 @@
      var time = []
      time.push(newDate)
      time.push(dateYear)
      this.queryForm.time=time
      const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '' ,tagid:this.tagid};
      this.queryForm.time = time
      const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '', tagid: this.tagid };
      handlechartupdate3(params).then(response => {
        this.lineChartData = response.data
      })

    },
    three() {
      this.oneprimary='primary'
      this.twoprimary='primary'
      this.threeprimary='success'
      this.yearprimary='primary'
      this.lastyearprimary='primary'
      this.nextyearprimary='primary'
      this.oneprimary = 'primary'
      this.twoprimary = 'primary'
      this.threeprimary = 'success'
      this.yearprimary = 'primary'
      this.lastyearprimary = 'primary'
      this.nextyearprimary = 'primary'
      // 获取当前日期
      const currentDate = new Date();
      // 获取当前月份
@@ -277,23 +330,23 @@
      var time = []
      time.push(newDate)
      time.push(dateYear)
      this.queryForm.time=time
      const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '',tagid:this.tagid };
      this.queryForm.time = time
      const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '', tagid: this.tagid };
      handlechartupdate3(params).then(response => {
        

        this.lineChartData = response.data
      })
    },

    year() {
      this.oneprimary='primary'
      this.twoprimary='primary'
      this.threeprimary='primary'
      this.yearprimary='success'
      this.lastyearprimary='primary'
      this.nextyearprimary='primary'
      this.next=false
      this.last=true
      this.oneprimary = 'primary'
      this.twoprimary = 'primary'
      this.threeprimary = 'primary'
      this.yearprimary = 'success'
      this.lastyearprimary = 'primary'
      this.nextyearprimary = 'primary'
      this.next = false
      this.last = true
      // 获取当前日期
      // const currentDate = new Date();
      // 获取当前月份
@@ -303,119 +356,119 @@
      const newDate = formatTime1(new Date(), "yyyy-MM-dd");
      //获取当前年月日
      const dateYear = formatTime1(new Date(), "yyyy");
      console.log(dateYear+'-01-01');
      console.log(dateYear + '-01-01');
      this.yeardata = dateYear
      var time = []
      time.push(newDate+'-01-01')
      time.push(newDate + '-01-01')
      time.push(newDate)
      this.queryForm.time=time
      const params = { date1: newDate, date2: dateYear+'-01-01', username: localStorage.getItem('username') || '',tagid:this.tagid };
      this.queryForm.time = time
      const params = { date1: newDate, date2: dateYear + '-01-01', username: localStorage.getItem('username') || '', tagid: this.tagid };
      handlechartupdate3(params).then(response => {
        console.log(response);
        

        this.lineChartData = response.data
      })
    },

    lastornext(){
    lastornext() {
      const currentDate = new Date();
      const currentMonth = currentDate.getFullYear();
      console.log(currentMonth);
      console.log(this.yeardata);
      
      
      if (this.yeardata<currentMonth) {
        this.next=true
        if (this.yeardata<=2022) {
        this.last=false
      }else{
        this.last=true


      if (this.yeardata < currentMonth) {
        this.next = true
        if (this.yeardata <= 2022) {
          this.last = false
        } else {
          this.last = true
        }
      } else {
        this.next = false
      }
      }else {
        this.next=false
      }
      

    },

    lastyear() {
      this.oneprimary='primary'
      this.twoprimary='primary'
      this.threeprimary='primary'
      this.yearprimary='primary'
      this.lastyearprimary='success'
      this.nextyearprimary='primary'
      this.oneprimary = 'primary'
      this.twoprimary = 'primary'
      this.threeprimary = 'primary'
      this.yearprimary = 'primary'
      this.lastyearprimary = 'success'
      this.nextyearprimary = 'primary'
      // 获取当前日期
      const currentDate = new Date();
      // 获取当前月份
      const currentMonth = currentDate.getFullYear();

      // 设置日期的月份为当前月份减一
      
      if (this.yeardata=="") {

      if (this.yeardata == "") {
        currentDate.setFullYear(currentMonth - 1);
        // this.yeardata=currentMonth - 1;

      }else{
      } else {
        currentDate.setFullYear(this.yeardata - 1);
        // this.yeardata = this.yeardata - 1

      }
      const newDate = formatTime1(currentDate, "yyyy");
      

      this.yeardata = parseInt(newDate)
this.lastornext()
      this.lastornext()
      //获取当前年月日
      const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
      // this.queryForm.time.push(newDate+'-01-01')
      // this.queryForm.time.push(newDate+'-12-31')
      var time = []
      time.push(newDate+'-01-01')
      time.push(newDate+'-12-31')
      this.queryForm.time=time
      const params = { date1: newDate+'-12-31', date2: newDate+'-01-01', username: localStorage.getItem('username') || '',tagid:this.tagid };
      time.push(newDate + '-01-01')
      time.push(newDate + '-12-31')
      this.queryForm.time = time
      const params = { date1: newDate + '-12-31', date2: newDate + '-01-01', username: localStorage.getItem('username') || '', tagid: this.tagid };
      handlechartupdate3(params).then(response => {
        

        this.lineChartData = response.data
      })
    },

    nextyear() {
      this.oneprimary='primary'
      this.twoprimary='primary'
      this.threeprimary='primary'
      this.yearprimary='primary'
      this.lastyearprimary='primary'
      this.nextyearprimary='success'
      this.oneprimary = 'primary'
      this.twoprimary = 'primary'
      this.threeprimary = 'primary'
      this.yearprimary = 'primary'
      this.lastyearprimary = 'primary'
      this.nextyearprimary = 'success'
      // 获取当前日期
      const currentDate = new Date();
      // 获取当前月份
      // const currentMonth = currentDate.getFullYear();
      // 设置日期的月份为当前月份减一
      console.log(this.yeardata);
      
      currentDate.setFullYear( this.yeardata + 1);

      currentDate.setFullYear(this.yeardata + 1);
      const newDate = formatTime1(currentDate, "yyyy");
      console.log(newDate);
      

      this.yeardata = parseInt(newDate)
      //获取当前年月日
      this.lastornext()
      const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
      var time = []
      time.push(newDate+'-01-01')
      time.push(newDate+'-12-31')
      this.queryForm.time=time
      const params = { date1: newDate+'-12-31', date2: newDate+'-01-01', username: localStorage.getItem('username') || '',tagid:this.tagid };
      time.push(newDate + '-01-01')
      time.push(newDate + '-12-31')
      this.queryForm.time = time
      const params = { date1: newDate + '-12-31', date2: newDate + '-01-01', username: localStorage.getItem('username') || '', tagid: this.tagid };
      handlechartupdate3(params).then(response => {
        

        this.lineChartData = response.data
      })
    },
    

    handlechart() {
      console.log(this.queryForm.time);
      
      const params = { date1: this.queryForm.time[1], date2: this.queryForm.time[0], username: localStorage.getItem('username') || '',tagid:this.tagid };

      const params = { date1: this.queryForm.time[1], date2: this.queryForm.time[0], username: localStorage.getItem('username') || '', tagid: this.tagid };
      handlechartupdate3(params).then(response => {
        this.lineChartData = response.data
      })
@@ -425,8 +478,16 @@
    search() {
      this.listLoading = true
      searcheveryday(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        if (response.data!=null) {
          this.list = response.data.records
          this.total = response.data.total
        }else{
          this.$message({
            message: '未搜索到数据',
            type: 'error'
          })
        }
      
        this.listLoading = false
      })
    },
@@ -445,7 +506,7 @@
      this.listLoading = true
      getList(this.listQuery).then(response => {
        console.log(response);
        

        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
@@ -455,21 +516,21 @@


    searchorfetchData() {
console.log(this.listQuery.keyword);
      console.log(this.listQuery.keyword);

      if (this.listQuery.keyword!=undefined) {
      if (this.listQuery.keyword != undefined) {
        console.log(111111);
        

        this.search()
      }else{
      } else {
        console.log(2222);
        

        this.fetchData()
      }
      // this.listLoading = true
      // getList(this.listQuery).then(response => {
      //   console.log(response);
        

      //   this.list = response.data.records
      //   this.total = response.data.total
      //   this.listLoading = false
@@ -499,14 +560,18 @@
    text-align: center;
  }
}

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

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