siscode/src/pages/dataAnalysis/rateAnalysis/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/bottomMonth?windId=${value1.value}${lbval.value==='all'?'':'&meterType='+lbval.value}${fenval.value==='all'?'':'&meterClass='+fenval.value}${mingval.value==='all'?'':'&name='+mingval.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.bottom.forEach((ele)=>{
    ele.date=ele.date.slice(0, 7)
     ele.startCode=ele.startCode.toFixed(4)
     ele.endCode=ele.endCode.toFixed(4)
     ele.rdl=ele.rdl.toFixed(4)
})
  tableData.value=res.data.bottom
  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/getMeterTypeBottom?windId=${value1.value}`);
  console.log(res);
  leibie.value=res.data.type 
  lbval.value='all'
  fenval.value='all'
  mingval.value='all'
};

const fenlei = ref([]);
const fenval = ref('all');
const ChangZhanChange1 = async () => {
  const res = await request.get(`/meter/getMeterTypeBottom?windId=${value1.value}&type=${lbval.value}`);
  console.log(res);
  fenlei.value=res.data.type
  fenval.value='all'
  mingval.value='all'
  
};

const mingcheng = ref([]);
const mingval = ref('all');
const ChangZhanChange2 = async () => {
  const res = await request.get(`/meter/getMeterTypeBottom?windId=${value1.value}&type=${lbval.value}&meterClass=${fenval.value}`);
  console.log('555',res);
  mingcheng.value=res.data.type
  mingval.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-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]"
    >
    <el-row :gutter="10">
     <el-col :span="4">
     <div>
        <el-form-item label="类型" class="!mb-0 ml-2">
        <el-select
          v-model="lbval"
          class="w-[150px]"
          @change="ChangZhanChange1(lbval)"
          placeholder="请选择"
          popper-class="select"
        >
         <el-option label="全部" value="all" />
          <el-option
            v-for="item in leibie"
            :key="item.index"
            :value="item.name"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="分类" class="mt-5 ml-2">
        <el-select
          v-model="fenval"
          class="w-[150px]"
          @change="ChangZhanChange2(fenval)"
          placeholder="请选择"
          popper-class="select"
        >
         <el-option label="全部" value="all" />
          <el-option
            v-for="item in fenlei"
            :key="item.index"
            :value="item.name"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="名称" class="mt-5 ml-2">
        <el-select
          v-model="mingval"
          class="w-[150px]"
          @change="ChangZhanChange3(mingval)"
          placeholder="请选择"
          popper-class="select"
        >
         <el-option label="全部" value="all" />
          <el-option
            v-for="item in mingcheng"
            :key="item.index"
            :value="item.name"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
       <!-- <el-form-item class="!mb-0 ml-5">
        <el-button type="primary" @click="nbsubmit">确认</el-button>
      </el-form-item> -->
     </div>
      </el-col>
				<el-col :span="20">
      <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="right"
              width="200"
              resizable
            />
            <el-table-column
              prop="endCode"
              label="止码"
              align="right"
              width="200"
            />
            <el-table-column
              prop="rdl"
              label="月电量（万KW/h）"
              align="right"
              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>
    	</el-col>
     
			</el-row>
    </div>
  </div>
</template>