scmy/psdc-ui/src/views/system/cl/index.vue

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="88px">
          <el-form-item label="策略名称:" prop="name">
            <el-select v-model="queryParams.week" placeholder="请选择" style="width: 240px">
              <el-option label="策略一" value="null" />
              <el-option label="策略二" value="one" />
            </el-select>
          </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 type="primary" icon="Plus" @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>
        <div class="dev_control_table">
          <el-table :data="timingList" height="500px">
            <el-table-column label="序号" align="center" width="50"/>
            <el-table-column label="策略名称" align="center" prop="name" width="200"/>
            <el-table-column label="电磁锅炉进水温度" align="center" prop="DcTemIn"/>
            <el-table-column label="电磁锅炉出水温度" align="center" prop="DcTemOut"/>
            <el-table-column label="空气源热泵进水温度" align="center" prop="KqTemIn"/>
            <el-table-column label="空气源热泵出水温度" align="center" prop="KqTemOut"/>
            <el-table-column label="发热电缆温度" align="center" prop="DlTem"/>
            <el-table-column label="操作" align="center" prop="handle">
              <template v-slot="scope">
                <el-button type="primary" size="small" icon="Edit" v-hasPermi="['system:cl:edit']">修改</el-button>
                <el-button type="danger" size="small" :icon="Delete">删除</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="timingList.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
        </div>
      </el-col>
    </el-row>



    <!-- 新增对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="timingForm"  ref="userRef" label-width="88px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="策略名称:" prop="name">
              <el-input v-model="timingForm.name" placeholder="请输入策略名称" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电磁锅炉:" prop="DcTem" >
              <el-input v-model="timingForm.DcTemIn" placeholder="进水温度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电磁锅炉:" prop="DcTem" >
              <el-input v-model="timingForm.DcTemOut" placeholder="出水温度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="空气源热泵:" prop="KqTem" >
              <el-input v-model="timingForm.KqTemIn" placeholder="进水温度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="空气源热泵:" prop="DcTem" >
              <el-input v-model="timingForm.KqTemOut" placeholder="出水温度" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发热电缆:" prop="DlTem">
              <el-input v-model="timingForm.DlTem" placeholder="温度" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

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


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


/** 数据表格处理 */
const timingList = reactive([
  {
    name:'策略一',
    DlTem:'22',
    DcTemIn:'44',
    DcTemOut:'55',
    KqTemIn:'66',
    KqTemOut:'77'
  },
  {
    name:'策略二',
    DlTem:'33',
    DcTemIn:'55',
    DcTemOut:'66',
    KqTemIn:'77',
    KqTemOut:'88'
  }
])
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 open = ref(false);
const title = ref();
const activeName = ref('1')
const timingForm = reactive({
  name:'',
  DlTem:'',
  DcTemIn:'',
  DcTemOut:'',
  KqTemIn:'',
  KqTemOut:''
})

// const watchTime = watch(()=> timingForm.executeTime, (val) => {
//   // console.log(val.toLocaleString())
//   let date = new Date(val)
//   let hours = date.getHours()
//   let minutes = date.getMinutes()
//   let seconds = date.getSeconds()
//   console.log(`${hours}:${minutes}:${seconds}`)
// })



function handleAdd() {
  open.value = true;
  title.value = "新增策略";
};
function submitForm() {
  open.value = false;
};
function cancel() {
  open.value = false;
};





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

<style scoped lang="scss">
.dev_control_table{
  position: relative;
  width: 100%;
  min-height: 745px;
  background-color: #2F3D8A;
}

::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-form-item__content{
  //display: flex;
}
</style>