11

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

@@ -1,16 +1,230 @@
 <template>
   <div class="app-container home">
-    <h1>策略管理</h1>
+    <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>