scmy/psdc-ui/src/views/analyse/nhtj/index.vue

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="filterForm" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="能源类型" prop="week">
            <el-select v-model="filterForm.type" placeholder="请选择" style="width: 240px">
              <el-option label="电" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="耗能设备" prop="week">
            <el-select v-model="filterForm.dev" placeholder="请选择" style="width: 240px">
              <el-option label="电热锅炉" value="1" />
              <el-option label="蓄热锅炉" value="2" />
              <el-option label="风机盘管" value="3" />
              <el-option label="空气源热泵" value="4" />
              <el-option label="发热电缆" value="5" />
              <el-option label="水泵" value="6" />
              <el-option label="沙盘" value="7" />
            </el-select>
          </el-form-item>
          <el-form-item label="时段" style="width: 308px;">
            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button class="my-btn btn1" type="primary" :class="{ active: activeIndex === 0 }" @click="handleHour">时</el-button>
            <el-button class="my-btn btn2" type="primary" :class="{ active: activeIndex === 1 }" @click="handleDay">日</el-button>
            <el-button class="my-btn btn3" type="primary" :class="{ active: activeIndex === 2 }" @click="handleMonth">月</el-button>
          </el-col>
        </el-row>
        <div class="dev_control_table">
          <el-table :data="dataTable" height="690px">
            <el-table-column label="序号" align="center" width="50" fixed/>
            <el-table-column label="耗能设备" align="center" prop="dev" width="120" fixed/>
            <el-table-column label="日期" align="center" prop="date" width="150" fixed/>
            <el-table-column v-for="item in theadList" :key="item.prop" :prop="item.prop" :label="item.label" :fixed="item.fixed"/>
            <el-table-column label="操作" fixed="right">
              <template v-slot="scope">
                <el-button type="primary" size="small" :icon="Histogram" @click="handleChart">图表</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTable.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
        </div>
      </el-col>
    </el-row>



    <!-- 生成图表弹出窗 -->
    <el-dialog class="mrt" :title="title" v-model="open" width="1000px" append-to-body>
      <div class="chartBox">
        <div id="chart"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import {Delete,Histogram} from '@element-plus/icons-vue'
import {ref,reactive} from "vue";


/** 筛选处理 */
const dateRange = ref([]);
const data = reactive({
  filterForm: {
    type: '',
    dev: '',
  }
});
//搜索按钮
function handleQuery(){
}
//重置按钮
function resetQuery(){
  dateRange.value = []
}


/** 数据表格处理 */
//公共表头
const theadList = ref([
  {prop:'00:00', label:'00:00'},
  {prop:'01:00', label:'01:00'},
  {prop:'02:00', label:'02:00'},
  {prop:'03:00', label:'03:00'},
  {prop:'04:00', label:'04:00'},
  {prop:'05:00', label:'05:00'},
  {prop:'06:00', label:'06:00'},
  {prop:'07:00', label:'07:00'},
  {prop:'08:00', label:'08:00'},
  {prop:'09:00', label:'09:00'},
  {prop:'10:00', label:'10:00'},
  {prop:'11:00', label:'11:00'},
  {prop:'12:00', label:'12:00'},
  {prop:'13:00', label:'13:00'},
  {prop:'14:00', label:'14:00'},
  {prop:'15:00', label:'15:00'},
  {prop:'16:00', label:'16:00'},
  {prop:'17:00', label:'17:00'},
  {prop:'18:00', label:'18:00'},
  {prop:'19:00', label:'19:00'},
  {prop:'20:00', label:'20:00'},
  {prop:'21:00', label:'21:00'},
  {prop:'22:00', label:'22:00'},
  {prop:'23:00', label:'23:00'},
])
//内容
const dataTable = reactive([
  {
    dev:'蓄热锅炉',
    date: '20230-05-11',
    '00:00':'10',
  }
])
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  console.log(`${val}`)
}
const handleCurrentChange = (val) => {
  console.log(`${val}`)
}


/** 日月年按钮操作 */
const activeIndex = ref(0)
function handleHour() {
  activeIndex.value = 0
  theadList.value = [
    {prop:'00:00', label:'00:00'},
    {prop:'01:00', label:'01:00'},
    {prop:'02:00', label:'02:00'},
    {prop:'03:00', label:'03:00'},
    {prop:'04:00', label:'04:00'},
    {prop:'05:00', label:'05:00'},
    {prop:'06:00', label:'06:00'},
    {prop:'07:00', label:'07:00'},
    {prop:'08:00', label:'08:00'},
    {prop:'09:00', label:'09:00'},
    {prop:'10:00', label:'10:00'},
    {prop:'11:00', label:'11:00'},
    {prop:'12:00', label:'12:00'},
    {prop:'13:00', label:'13:00'},
    {prop:'14:00', label:'14:00'},
    {prop:'15:00', label:'15:00'},
    {prop:'16:00', label:'16:00'},
    {prop:'17:00', label:'17:00'},
    {prop:'18:00', label:'18:00'},
    {prop:'19:00', label:'19:00'},
    {prop:'20:00', label:'20:00'},
    {prop:'21:00', label:'21:00'},
    {prop:'22:00', label:'22:00'},
    {prop:'23:00', label:'23:00'},
  ]
};
function handleDay() {
  activeIndex.value = 1
  theadList.value = [
    {prop:'01', label:'01日'},
    {prop:'02', label:'02日'},
    {prop:'03', label:'03日'},
    {prop:'04', label:'04日'},
    {prop:'05', label:'05日'},
    {prop:'06', label:'06日'},
    {prop:'07', label:'07日'},
    {prop:'08', label:'08日'},
    {prop:'09', label:'09日'},
    {prop:'10', label:'10日'},
    {prop:'11', label:'11日'},
    {prop:'12', label:'12日'},
    {prop:'13', label:'13日'},
    {prop:'14', label:'14日'},
    {prop:'15', label:'15日'},
    {prop:'16', label:'16日'},
    {prop:'17', label:'17日'},
    {prop:'18', label:'18日'},
    {prop:'19', label:'19日'},
    {prop:'20', label:'20日'},
    {prop:'21', label:'21日'},
    {prop:'22', label:'22日'},
    {prop:'23', label:'23日'},
    {prop:'24', label:'24日'},
    {prop:'25', label:'25日'},
    {prop:'26', label:'26日'},
    {prop:'27', label:'27日'},
    {prop:'28', label:'28日'},
    {prop:'29', label:'29日'},
    {prop:'30', label:'30日'},
    {prop:'31', label:'31日'},
  ]
};
function handleMonth() {
  activeIndex.value = 2
  theadList.value = [
    {prop:'01月', label:'01月'},
    {prop:'02月', label:'02月'},
    {prop:'03月', label:'03月'},
    {prop:'04月', label:'04月'},
    {prop:'05月', label:'05月'},
    {prop:'06月', label:'06月'},
    {prop:'07月', label:'07月'},
    {prop:'08月', label:'08月'},
    {prop:'09月', label:'09月'},
    {prop:'10月', label:'10月'},
    {prop:'11月', label:'11月'},
    {prop:'12月', label:'12月'},
  ]
};


/** 生成表格按鈕操作*/
const title = ref()
const open = ref(false)
function handleChart(){
  open.value = true;
  console.log('图表按钮')
};





const { filterForm } = toRefs(data);
</script>

<style scoped lang="scss">
.dev_control_table{
  position: relative;
  width: 100%;
  min-height: 745px;
  background-color: #2F3D8A;
}
.my-btn{
  padding: 0 25px;
  background-color: #2F8EED40;
  border: 1px solid #2F8EED;
}
.btn2,.btn3{
  margin-left: -1px;
}
.btn1{
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.btn2{
  border-radius: 0px !important;
}
.btn3{
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
.active{
  background-color: #409eff !important;
  color: #fff !important;
}
.chartBox{
  width: 100%;
  height: 300px;
  #chart{
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-button{
  border-radius: 2px;
}
::v-deep .el-pagination{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
::v-deep .el-pagination__total{
  color: #f3ffff;
}
::v-deep .el-pagination__jump{
  color: #f3ffff;
}
::v-deep .el-pager{
  margin: 0 5px;
}
::v-deep .el-table .el-table__body-wrapper{
  background-color: #2F3D8A;
}
::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--left{
  background-color: #2F3D8A;
}
::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--right{
  background-color: #2F3D8A;
}
</style>