新增能耗对比页

psdc-ui/src/views/analyse/nhdb/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="app-container home">
+    <el-card class="box-card" v-for="item in data.celueInfoList">
+      <template #header>
+        <div class="card-header">
+          <img :src="imgSrc" alt="">
+          <span>{{item.sceneName}}</span>
+        </div>
+      </template>
+      <div class="text item">
+        <el-form :inline="true" :model="item.data" label-width="110px">
+          <el-form-item v-for="items in item.data" :key="items.key" :label="items.label">
+            <el-input v-model="items.startTime" readonly/>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script  name="Index" setup>
+import {ref,reactive} from 'vue'
+
+const imgSrc = ref('../src/assets/images/策略icon.png')
+const data = reactive({
+  celueInfoList:[
+    {
+      sceneName:'策略一',
+      data:[
+        {
+          key: 1,
+          label:'开始执行时间',
+          startTime:'2023-06-08 15:00:00'
+        },
+        {
+          key: 2,
+          label:'结束执行时间',
+          startTime:'2023-06-08 18:00:00'
+        },
+        {
+          key: 3,
+          label:'执行时长',
+          startTime:'3h'
+        },
+        {
+          key: 4,
+          label:'单位时间能耗',
+          startTime:'5kWh'
+        },
+        {
+          key: 5,
+          label:'执行前室内温度',
+          startTime:'15℃'
+        },
+        {
+          key: 6,
+          label:'执行前室外温度',
+          startTime:'14℃'
+        },
+        {
+          key: 7,
+          label:'执行后室内温度',
+          startTime:'19℃'
+        },
+        {
+          key: 8,
+          label:'执行后室外温度',
+          startTime:'15℃'
+        },
+        {
+          key: 9,
+          label:'总能耗',
+          startTime:'16kWh'
+        }
+      ]
+    },
+    {
+      sceneName:'策略二',
+      data:[
+        {
+          key: 1,
+          label:'开始执行时间',
+          startTime:'2023-06-08 15:00:00'
+        },
+        {
+          key: 2,
+          label:'结束执行时间',
+          startTime:'2023-06-08 18:00:00'
+        },
+        {
+          key: 3,
+          label:'执行时长',
+          startTime:'3h'
+        },
+        {
+          key: 4,
+          label:'单位时间能耗',
+          startTime:'5kWh'
+        },
+        {
+          key: 5,
+          label:'执行前室内温度',
+          startTime:'15℃'
+        },
+        {
+          key: 6,
+          label:'执行前室外温度',
+          startTime:'14℃'
+        },
+        {
+          key: 7,
+          label:'执行后室内温度',
+          startTime:'19℃'
+        },
+        {
+          key: 8,
+          label:'执行后室外温度',
+          startTime:'15℃'
+        },
+        {
+          key: 9,
+          label:'总能耗',
+          startTime:'16kWh'
+        }
+      ]
+    },
+  ]
+})
+
+</script>
+
+<style scoped lang="scss">
+.home{
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.box-card {
+  width: 720px;
+  color: #fff;
+  border: none;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  .card-header{
+    display: flex;
+    align-items: center;
+    img{
+      width: 15px;
+      height: 15px;
+      margin-right: 3px;
+    }
+  }
+  .text {
+    font-size: 14px;
+  }
+  .item {
+    margin-bottom: 18px;
+  }
+}
+::v-deep .el-card__header{
+  padding: 0px 0px 0px 10px !important;
+  background-color: #374590;
+  border-bottom: none;
+  line-height: 40px;
+}
+::v-deep .el-card__body{
+  background-color: #2F3D8A;
+}
+::v-deep .el-input__wrapper{
+  background-color: #ffffff00 !important;
+  border: none !important;
+  padding: 1px 11px 1px 0px;
+}
+::v-deep .el-input__inner{
+  color: #1fc7c7;
+}
+::v-deep .el-form .el-form-item__label{
+  color: #d3d3d3 !important;
+}
+</style>
+