siscode/src/pages/dataAnalysis/lineAnalysis/index.vue

<script setup name="prepare">
import { ElMessage } from "element-plus";
import { onMounted, ref, onActivated, reactive } from "vue";
import request from "@/api/axios.js";

import { baseURL, socketURL } from "@/api/axios.js";
/**配置参数 */
const treeHeight = ref(window.innerHeight - 260 + "px"); //tree高度
const excelHeight = ref(window.innerHeight - 260 + "px"); //excel高度
const tableHeight = ref(window.innerHeight - 260 + "px");

/**created */
const ChangZhan = ref([]);
const value1 = ref();
let val1 = ref();
let value2 = ref();



const BeginChange = (val) => {
//   console.log(`${val} items per page`)
console.log(val);
  val1.value=val
  // console.log(val);
 
}
const EndChange = (val) => {
//   console.log(`${val} items per page`)
console.log(val);
  value2.value=val
 
}
const tableData=ref()

const nbsubmit = async () => {
  const res = await request.get(
    `/meterinfo/equipmentMonth?windId=${value1.value}${lbval.value==='all'?"":"&id="+lbval.value}&startTime=${new Date(val1.value).getTime()}&endTime=${ new Date(value2.value).getTime()}&page=${currentPage4.value}&perPage=${pageSize4.value}`,
  );
  console.log('66',res);
   res.data.calculating.forEach((ele)=>{
    ele.date=ele.date.slice(0, 7)
})
  tableData.value=res.data.calculating
  total.value=res.data.totalItems
  console.log('123',tableData.value);
};

const leibie = ref([]);
const lbval = ref('all');

const ChangZhanChange = async () => {
  console.log('123',value1.value);
  const res = await request.get(`/meter/getEquipmentId?windId=${value1.value}`);
  console.log(res);
  leibie.value=res.data.type 
  lbval.value='all'
};


const total=ref()
let currentPage4 = ref(1)
let pageSize4 = ref(19)

const handleSizeChange = (val) => {
//   console.log(`${val} items per page`)
  pageSize4.value=val
  nbsubmit()
}
const handleCurrentChange = (val) => {
//   console.log(`current page: ${val}`)
  currentPage4.value=val
  nbsubmit()
}

const Change1 = async () => {
  const res = await request.get(`/meter/infoall?stationId=${goodval.value}`);
  console.log(res);
  ChangZhan.value = res.data.fdc;
  fenval.value='all'
   mingval.value='all'
  
};
// 拿场站
const good = ref([]);
const goodval = ref();
const nbhh = async () => {
  const res = await request.get("/meter/allStation");
  console.log(res);
  good.value = res.data
  // console.log('0',ChangZhan.good);
  // value1.value = ChangZhan.value[0].nemCode;
};
   
const getTime1=(val)=> {
      //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
      var date = new Date();
      var year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      var begin = year + "-" + month ;
      var end = year + "-" + month ;
      if (val == 1) {
        return begin;
      } else if (val == 2) {
        return end;
      }
    }
/**mounted */
onMounted(() => {
  tableHeight.value = window.innerHeight - 260 + "px";
  excelHeight.value = window.innerHeight - 260 + "px";
  treeHeight.value = window.innerHeight - 260 + "px";
  window.addEventListener("resize", () => {
    tableHeight.value = window.innerHeight - 260 + "px";
    excelHeight.value = window.innerHeight - 260 + "px";
    treeHeight.value = window.innerHeight - 260 + "px";
  });
  
  nbhh();
   val1.value = getTime1(1);
   value2.value = getTime1(2);
});

</script>
<template>
  <div class="bg-white py-[10px] px-[10px] relative">
    <div
      class="pl-[20px] flex items-center h-[80px] relative mb-[20px] shadow rounded-[6px] shadow-blue-500"
    >
       <el-form-item label="场站类型" class="!mb-0">
        <el-select
          v-model="goodval"
          class="w-[150px]"
          @change="Change1(goodval)"
          placeholder="请选择"
          popper-class="select"
        >
          <el-option
            v-for="item in good"
            :key="item.nemCode"
            :value="item.nemCode"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场站" class="!mb-0 ml-3">
        <el-select
          v-model="value1"
          class="w-[150px]"
          @change="ChangZhanChange(value1)"
          clearable
          placeholder="请选择"
          popper-class="select"
        >
          <el-option
            v-for="item in ChangZhan"
            :key="item.nemCode"
            :value="item.nemCode"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="风机编号" class="!mb-0 ml-2">
        <el-select
          v-model="lbval"
          class="w-[200px]"
          @change="ChangZhanChange1(lbval)"
          placeholder="请选择"
          popper-class="select"
        >
         <el-option
              label="全选"
              value="all"
            />
          <el-option
            v-for="item in leibie"
            :key="item.nemCode"
            :value="item.nemCode"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始" class="!mb-0 ml-2">
            <el-date-picker
              v-model="val1"
              @change="BeginChange(val1)"
              type="month"
              value-format="YYYY-MM"
              placeholder="选择日期"
            >
            </el-date-picker>
             </el-form-item>
           <el-form-item label="结束" class="!mb-0">
            <el-date-picker
              v-model="value2"
              @change="EndChange(value2)"
              type="month"
              value-format="YYYY-MM"
              placeholder="选择日期"
            >
            </el-date-picker>
            </el-form-item>
           
      <el-form-item class="!mb-0 ml-3">
        <el-button type="primary" @click="nbsubmit">查询</el-button>
      </el-form-item>
    </div>
    <div
      class="relative shadow rounded-[6px] shadow-blue-500 px-[10px] pt-[20px] pb-[10px]"
    >
      <div>
        <el-scrollbar max-height="650px">
          <el-table
            :data="tableData"
            height="650"
            style="width: 100% ,height:650px"
            :border="true"
          >
            <el-table-column
              prop="date"
              label="时间"
              align="center"
              width="250"
              resizable
            />
            <el-table-column
              prop="name"
              label="风机编号"
              align="center"
              width="250"
            />
            <!-- <el-table-column
              prop="startCode"
              label="起码"
              align="center"
              width="200"
              resizable
            />
            <el-table-column
              prop="endCode"
              label="止码"
              align="center"
              width="200"
            /> -->
            <el-table-column
              prop="rdl"
              label="月电量（万KWh）"
              align="center"
              width="200"
            />
          </el-table>
        </el-scrollbar>
      </div>
          <div>
		   <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[19,30,50,100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
	  </div>
    </div>
  </div>
</template>