From 655e7960bc6ceeea9f9252becb7e0cc5fd267c40 Mon Sep 17 00:00:00 2001
From: wj <347312259@qq.com>
Date: Thu, 11 May 2023 16:31:12 +0800
Subject: [PATCH 1/2] 11

---
 psdc-ui/src/views/analyse/nhfx/index.vue   |  10 +-
 psdc-ui/src/views/analyse/nhtj/index.vue   | 300 ++++++++++++++++++++-
 psdc-ui/src/views/bigview/index.vue        |  19 +-
 psdc-ui/src/views/control/manual/index.vue | 123 +++++++--
 psdc-ui/src/views/control/timer/index.vue  | 226 +++++++++++++++-
 5 files changed, 643 insertions(+), 35 deletions(-)

diff --git a/psdc-ui/src/views/analyse/nhfx/index.vue b/psdc-ui/src/views/analyse/nhfx/index.vue
index a89cb93..8e60d74 100644
--- a/psdc-ui/src/views/analyse/nhfx/index.vue
+++ b/psdc-ui/src/views/analyse/nhfx/index.vue
@@ -1,10 +1,18 @@
 <template>
   <div class="app-container home">
-    <h1>能耗分析</h1>
+    <div class="btnBox">
+
+    </div>
+
+
+
   </div>
 </template>
 
 <script setup name="Index">
+import {ref,reactive} from "vue";
+
+
 
 
 
diff --git a/psdc-ui/src/views/analyse/nhtj/index.vue b/psdc-ui/src/views/analyse/nhtj/index.vue
index e2ec839..acd80fc 100644
--- a/psdc-ui/src/views/analyse/nhtj/index.vue
+++ b/psdc-ui/src/views/analyse/nhtj/index.vue
@@ -1,16 +1,314 @@
 <template>
   <div class="app-container home">
-    <h1>能耗统计</h1>
+    <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>
 
diff --git a/psdc-ui/src/views/bigview/index.vue b/psdc-ui/src/views/bigview/index.vue
index 4036821..43cd513 100644
--- a/psdc-ui/src/views/bigview/index.vue
+++ b/psdc-ui/src/views/bigview/index.vue
@@ -2,7 +2,7 @@
   <div class="home">
     <div class="header">
       <h2>电能替代分布式控制试验平台</h2>
-      <router-link :to="{path:'control/manual'}" tag="div" class="back">返回后台</router-link>
+      <router-link :to="{path:'/control/manual'}" tag="div" class="back">返回后台</router-link>
     </div>
     <div class="main">
       <div class="left">
@@ -149,14 +149,15 @@
 // import {ref,reactive} from 'vue'
 import {getTemperature} from '../../api/bigview/bigview'
 
-// getWendu();
+getWendu();
 
-// const wendi1 = ref(0)
-// function getWendu(){
-//   getTemperature().then((res)=>{
-//     console.log(res.data.data)
-//   })
-// }
+const wendi1 = ref(0)
+function getWendu(){
+  console.log('请求接口')
+  getTemperature().then((res)=>{
+    console.log(res.data)
+  })
+}
 
 
 
@@ -281,7 +282,7 @@ import {getTemperature} from '../../api/bigview/bigview'
         .my3D_img{
           width: 100%;
           height: 100%;
-          padding: 20px 60px 0 60px;
+          padding: 20px 70px 0 70px;
           img{
             width: 100%;
             height: 100%;
diff --git a/psdc-ui/src/views/control/manual/index.vue b/psdc-ui/src/views/control/manual/index.vue
index 45619ba..d00109d 100644
--- a/psdc-ui/src/views/control/manual/index.vue
+++ b/psdc-ui/src/views/control/manual/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container home">
-    <el-button type="primary" :icon="Download">策略导入</el-button>
+    <el-button type="primary" :icon="Download" @click="drawerIshow = true">策略导入</el-button>
     <div class="dev_control_wrapper">
       <div class="dev_control_item">
         <div class="item_header">
@@ -126,37 +126,50 @@
     <div class="dev_control_table">
       <div class="control_header"><span>调控日志</span></div>
       <div class="control_table">
-        <el-table v-loading="loading" :data="controlList" @selection-change="handleSelectionChange">
-          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[3].visible" width="120" />
-          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
-            <template #default="scope">
-              <el-switch
-                  v-model="scope.row.status"
-                  active-value="0"
-                  inactive-value="1"
-                  @change="handleStatusChange(scope.row)"
-              ></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[4].visible" width="160">
-            <template #default="scope">
-              <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
+        <el-table :data="controlList">
+          <el-table-column label="序号" align="center" width="50"/>
+          <el-table-column label="设备名称" align="center" prop="devName"/>
+          <el-table-column label="操作内容" align="center" prop="content" width="700"/>
+          <el-table-column label="操作时间" align="center" prop="time"/>
+          <el-table-column label="操作人员" align="center" prop="person"/>
+          <el-table-column label="操作结果" align="center" prop="result"></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="controlList.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"/>
       </div>
     </div>
+
+    <el-drawer v-model="drawerIshow">
+      <template #header><h4>策略导入</h4></template>
+      <template #default>
+        <el-radio v-model="radio" label="策略1" size="large">策略1</el-radio>
+        <el-radio v-model="radio" label="策略2" size="large">策略2</el-radio>
+      </template>
+      <template #footer>
+        <div style="flex: auto">
+          <el-button type="primary" @click="confirmClick">执行</el-button>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
 <script setup name="Index">
 import { Share,Download } from '@element-plus/icons-vue'  //element字体图标
 import { ref,reactive } from 'vue'
+import { ElMessageBox } from 'element-plus'
 
 
+//设备控制处理
 const value1 = ref(true)
 const value2 = ref(false)
 const value3 = ref(false)
@@ -175,7 +188,6 @@ const form2 = reactive({
 const form3 = reactive({
   now:'',
 })
-
 const onSubmit1 = () => {
   console.log('确定')
 }
@@ -186,7 +198,57 @@ const onSubmit3 = () => {
   console.log('确定')
 }
 
+//数据表格处理
+const controlList = reactive([
+    {
+      devName:'11',
+      content:'22',
+      time:'33',
+      person:'44',
+      result:'55',
+    },
+  {
+    devName:'11',
+    content:'22',
+    time:'33',
+    person:'44',
+    result:'55',
+  },
+  {
+    devName:'11',
+    content:'22',
+    time:'33',
+    person:'44',
+    result:'55',
+  },
+  {
+    devName:'11',
+    content:'22',
+    time:'33',
+    person:'44',
+    result:'55',
+  }
+])
+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} items per page`)
+}
+const handleCurrentChange = (val) => {
+  console.log(`current page: ${val}`)
+}
 
+//策略导入处理
+const drawerIshow = ref(false)
+const radio = ref()
+function confirmClick() {
+  ElMessageBox.confirm(`确定执行 ${radio.value} ?`).then(() => {
+    drawerIshow.value = false;
+      })
+}
 
 
 </script>
@@ -284,9 +346,9 @@ const onSubmit3 = () => {
       }
     }
     .control_table{
+      position: relative;
       width: 100%;
       height: 90%;
-      border: 1px solid red;
     }
   }
 }
@@ -306,5 +368,20 @@ const onSubmit3 = () => {
 ::v-deep .el-input__inner{
   color: #f3ffff;
 }
+::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;
+}
 </style>
 
diff --git a/psdc-ui/src/views/control/timer/index.vue b/psdc-ui/src/views/control/timer/index.vue
index 1db90ce..916a378 100644
--- a/psdc-ui/src/views/control/timer/index.vue
+++ b/psdc-ui/src/views/control/timer/index.vue
@@ -1,16 +1,240 @@
 <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="68px">
+          <el-form-item label="有效星期" prop="week">
+            <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 label="执行时间" prop="time">
+            <el-select v-model="queryParams.time" placeholder="请选择" style="width: 240px">
+              <el-option label="00:00-02:00" value="1" />
+              <el-option label="02:00-03:00" value="2" />
+            </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 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="content" width="700"/>
+              <el-table-column label="执行时间" align="center" prop="time"/>
+              <el-table-column label="有效日期" align="center" prop="dateRange"/>
+              <el-table-column label="有效星期" align="center" prop="week"/>
+              <el-table-column label="操作" align="center" prop="handle">
+                <template v-slot="scope">
+                  <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="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="指令内容" prop="content">
+              <el-input v-model="timingForm.content" placeholder="请输入指令内容" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="执行星期">
+              <el-radio-group v-model="timingForm.day">
+                <el-radio style='width:90px' label="每天" @change="handleEveryday"/>
+              </el-radio-group>
+              <el-collapse v-model="activeName" accordion>
+                <el-collapse-item title="星期几" name="1">
+                  <el-checkbox-group v-model="timingForm.week">
+                    <el-checkbox style='width:90px' label="1" key="1">星期一</el-checkbox>
+                    <el-checkbox style='width:90px' label="2" key="2">星期二</el-checkbox>
+                    <el-checkbox style='width:90px' label="3" key="3">星期三</el-checkbox>
+                    <el-checkbox style='width:90px' label="4" key="4">星期四</el-checkbox>
+                    <el-checkbox style='width:90px' label="5" key="5">星期五</el-checkbox>
+                    <el-checkbox style='width:90px' label="6" key="6">星期六</el-checkbox>
+                    <el-checkbox style='width:90px' label="7" key="7">星期日</el-checkbox>
+                  </el-checkbox-group>
+                </el-collapse-item>
+              </el-collapse>
+
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="执行时间" prop="executeTime">
+              <el-time-picker v-model="timingForm.executeTime" placeholder="请选择执行时间" />
+            </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: {
+    week: '',
+    time: '',
+  }
+});
+//搜索按钮
+function handleQuery(){
+}
+//重置按钮
+function resetQuery(){
+  dateRange.value = []
+}
+
+
+/** 数据表格处理 */
+const timingList = reactive([
+  {
+    content:'11',
+    time:'22',
+    dateRange:'44',
+    week:'55',
+  },
+  {
+    content:'11',
+    time:'22',
+    dateRange:'44',
+    week:'55',
+  }
+])
+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({
+  content:'',
+  day:'',
+  week:[],
+  executeTime:'',
+})
+const watchWeek = watch(()=> timingForm.week,(val) => {
+  console.log('监听勾选的星期',val)
+  if(timingForm.week.length === 7){
+    timingForm.day = '每天'
+  }else{
+    timingForm.day = ''
+  }
+})
+// 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 handleEveryday(){
+  console.log('点击每天')
+}
+
+
+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>
 

From b3f86390d4bfad2cb5ad00dc179533f773ba5bb0 Mon Sep 17 00:00:00 2001
From: jiminglei <836545853@qq.com>
Date: Thu, 11 May 2023 16:39:40 +0800
Subject: [PATCH 2/2] 11

---
 psdc-ui/src/views/emonitor/db/index.vue    | 180 +++++++++++++++-
 psdc-ui/src/views/emonitor/drgl/index.vue  |  32 ++-
 psdc-ui/src/views/emonitor/frdl/index.vue  | 224 +++++++++++++++++--
 psdc-ui/src/views/emonitor/kqyrb/index.vue | 239 +++++++++++++++++++--
 psdc-ui/src/views/emonitor/wdcgq/index.vue |  73 ++++++-
 psdc-ui/src/views/emonitor/xrgl/index.vue  | 239 +++++++++++++++++++--
 6 files changed, 923 insertions(+), 64 deletions(-)

diff --git a/psdc-ui/src/views/emonitor/db/index.vue b/psdc-ui/src/views/emonitor/db/index.vue
index f49338e..f48ef9e 100644
--- a/psdc-ui/src/views/emonitor/db/index.vue
+++ b/psdc-ui/src/views/emonitor/db/index.vue
@@ -35,17 +35,13 @@
         <div class="mid1-1">
           当前功率
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 88.6%"></div>
       </div>
       <div class="mid2">
         <div class="mid2-1">
           当前功率总览
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts2" style="width: 100%; height: 88.6%"></div>
       </div>
     </div>
     <div class="bottom">
@@ -53,16 +49,178 @@
         <div class="bottom1-1">
           今日用电量总览
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts3" style="width: 100%; height: 88.6%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script  name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "db",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      // 绘制图表
+      myChart.setOption({
+        series: [
+          {
+            type: 'gauge',
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [0.3, '#67e0e3'],
+                  [0.7, '#37a2da'],
+                  [1, '#fd666d']
+                ]
+              }
+            },
+            pointer: {
+              itemStyle: {
+                color: 'inherit'
+              }
+            },
+            // axisTick: {
+            //   distance: -30,
+            //   length: 8,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 2
+            //   }
+            // },
+            // splitLine: {
+            //   distance: -30,
+            //   length: 30,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 4
+            //   }
+            // },
+            axisLabel: {
+              color: 'inherit',
+              distance: 10,
+              fontSize: 10
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} kW',
+              color: 'inherit'
+            },
+            data: [
+              {
+                value: 70
+              }
+            ]
+          }
+        ]
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+      myChart3.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "今日用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart3.resize();
+      };
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kW",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "当前功率",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart2.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
diff --git a/psdc-ui/src/views/emonitor/drgl/index.vue b/psdc-ui/src/views/emonitor/drgl/index.vue
index a660c78..9a84059 100644
--- a/psdc-ui/src/views/emonitor/drgl/index.vue
+++ b/psdc-ui/src/views/emonitor/drgl/index.vue
@@ -95,6 +95,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: "kWh",
           splitLine:{
             show:true,
             lineStyle:{
@@ -112,7 +113,7 @@ export default {
           },
         series: [
           {
-            name: "用户量",
+            name: "日用电量",
             type: "bar",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
@@ -141,6 +142,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: "kWh",
           splitLine:{
             show:true,
             lineStyle:{
@@ -158,7 +160,7 @@ export default {
         },
         series: [
           {
-            name: "用户量",
+            name: "月用电量",
             type: "bar",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
@@ -187,6 +189,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: "kW",
           splitLine:{
             show:true,
             lineStyle:{
@@ -204,7 +207,7 @@ export default {
         },
         series: [
           {
-            name: "用户量",
+            name: "当前功率",
             type: "line",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
@@ -219,6 +222,12 @@ export default {
       myChart4.setOption({
         title: {},
         tooltip: {},
+        legend: {
+          data: ['进水', '出水'],
+          textStyle:{
+            color:'#BEC3DA'
+          }
+        },
         textStyle:{
           color:'#BEC3DA'
         },
@@ -233,6 +242,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: "℃",
           splitLine:{
             show:true,
             lineStyle:{
@@ -250,12 +260,22 @@ export default {
         },
         series: [
           {
-            name: "用户量",
-            type: "line",
-            data: [5, 20, 36, 10, 10, 20],
+            name: '进水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '出水',
+            type: 'line',
+            stack: 'Total',
             itemStyle:{
               color:'#2F8EE0'
             },
+            data: [220, 182, 191, 234, 290, 330, 310]
           },
         ],
       });
diff --git a/psdc-ui/src/views/emonitor/frdl/index.vue b/psdc-ui/src/views/emonitor/frdl/index.vue
index b76f813..a14818e 100644
--- a/psdc-ui/src/views/emonitor/frdl/index.vue
+++ b/psdc-ui/src/views/emonitor/frdl/index.vue
@@ -38,40 +38,236 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           月用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前功率
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前温度
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "frdl",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "日用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "月用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart2.resize();
+      };
+      myChart3.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kW",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "当前功率",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart3.resize();
+      };
+      myChart4.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "℃",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: '当前温度',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart4.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
diff --git a/psdc-ui/src/views/emonitor/kqyrb/index.vue b/psdc-ui/src/views/emonitor/kqyrb/index.vue
index d6f00b6..3dcb56c 100644
--- a/psdc-ui/src/views/emonitor/kqyrb/index.vue
+++ b/psdc-ui/src/views/emonitor/kqyrb/index.vue
@@ -42,40 +42,251 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           月用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前功率
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前温度
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script  name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "kqyrb",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "日用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "月用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart2.resize();
+      };
+      myChart3.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kW",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "当前功率",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart3.resize();
+      };
+      myChart4.setOption({
+        title: {},
+        tooltip: {},
+        legend: {
+          data: ['进水', '出水'],
+          textStyle:{
+            color:'#BEC3DA'
+          }
+        },
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "℃",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: '进水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '出水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart4.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
diff --git a/psdc-ui/src/views/emonitor/wdcgq/index.vue b/psdc-ui/src/views/emonitor/wdcgq/index.vue
index e6a39cb..289628b 100644
--- a/psdc-ui/src/views/emonitor/wdcgq/index.vue
+++ b/psdc-ui/src/views/emonitor/wdcgq/index.vue
@@ -64,16 +64,79 @@
         <div class="bottom1-1">
           实时温度总览
         </div>
-        <div>
-         pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 91%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script  name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "wdcgq",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        legend: {
+          data: ['温度传感器1','温度传感器2'],
+          textStyle:{
+            color:'#BEC3DA'
+          }
+        },
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "℃",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "温度传感器1",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
diff --git a/psdc-ui/src/views/emonitor/xrgl/index.vue b/psdc-ui/src/views/emonitor/xrgl/index.vue
index d6f00b6..b9f77d5 100644
--- a/psdc-ui/src/views/emonitor/xrgl/index.vue
+++ b/psdc-ui/src/views/emonitor/xrgl/index.vue
@@ -42,40 +42,251 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           月用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前功率
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前温度
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "xrgl",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "日用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "月用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart2.resize();
+      };
+      myChart3.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kW",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "当前功率",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart3.resize();
+      };
+      myChart4.setOption({
+        title: {},
+        tooltip: {},
+        legend: {
+          data: ['进水', '出水'],
+          textStyle:{
+            color:'#BEC3DA'
+          }
+        },
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "℃",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: '进水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '出水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart4.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>