林颖晨 2 years ago
commit 1294a2cd98
  1. 24
      psdc-business/src/main/java/com/psdc/entity/res/PsdcDevicePowerRes.java
  2. 27
      psdc-business/src/main/java/com/psdc/entity/res/TodayThisHourUseElectricInfoRes.java
  3. 10
      psdc-business/src/main/java/com/psdc/mapper/PsdcElectricHtdataMapper.java
  4. 8
      psdc-business/src/main/java/com/psdc/mapper/PsdcElectricRtdataMapper.java
  5. 8
      psdc-business/src/main/java/com/psdc/mapper/PsdcThermometerHtdataMapper.java
  6. 24
      psdc-business/src/main/java/com/psdc/service/IPsdcElectricHtdataService.java
  7. 17
      psdc-business/src/main/java/com/psdc/service/IPsdcElectricRtdataService.java
  8. 7
      psdc-business/src/main/java/com/psdc/service/IPsdcThermometerHtdataService.java
  9. 90
      psdc-business/src/main/java/com/psdc/service/impl/PsdcElectricHtdataServiceImpl.java
  10. 47
      psdc-business/src/main/java/com/psdc/service/impl/PsdcElectricRtdataServiceImpl.java
  11. 68
      psdc-business/src/main/java/com/psdc/service/impl/PsdcThermometerHtdataServiceImpl.java
  12. 41
      psdc-business/src/main/resources/mapper/business/PsdcElectricHtdataMapper.xml
  13. 19
      psdc-business/src/main/resources/mapper/business/PsdcElectricRtdataMapper.xml
  14. 23
      psdc-business/src/main/resources/mapper/business/PsdcThermometerHtdataMapper.xml
  15. 6
      psdc-ui/src/api/bigview/bigview.js
  16. BIN
      psdc-ui/src/assets/images/3Dimg.png
  17. 0
      psdc-ui/src/assets/images/dcgl.png
  18. BIN
      psdc-ui/src/assets/images/footer.png
  19. 230
      psdc-ui/src/views/bigview/index.vue
  20. 296
      psdc-ui/src/views/control/manual/index.vue
  21. 125
      psdc-ui/src/views/emonitor/db/index.vue
  22. 154
      psdc-ui/src/views/emonitor/drgl/index.vue
  23. 107
      psdc-ui/src/views/emonitor/frdl/index.vue
  24. 111
      psdc-ui/src/views/emonitor/kqyrb/index.vue
  25. 105
      psdc-ui/src/views/emonitor/wdcgq/index.vue
  26. 111
      psdc-ui/src/views/emonitor/xrgl/index.vue
  27. 31
      psdc-ui/src/views/login.vue
  28. 2
      psdc-ui/vite.config.js
  29. 4
      psdc-web/src/main/java/com/psdc/controller/index/Index.java
  30. 46
      psdc-web/src/main/java/com/psdc/controller/monitor/ElectromagneticBoilerController.java
  31. 52
      psdc-web/src/main/java/com/psdc/controller/monitor/TotalElectricMeterController.java

@ -21,6 +21,30 @@ public class PsdcDevicePowerRes {
* 总有功功率
*/
private Double totp;
/**
* 今日用电量
*/
private Double eDay;
/**
* 本月用电量
*/
private Double eMonth;
/**
* 当前温度
*/
private Double temp;
/**
* 目前实时进水温度
*/
private Double tempIn;
/**
* 目前实时出水温度
*/
private Double tempOut;
/**
* 设备目前是否运行
*/
private Integer runStatus;
/**
* 当前总有功电能
*/

@ -0,0 +1,27 @@
package com.psdc.entity.res;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* @Author戴仕崑
* @Projectpsdc
* @FilenameTodayThisHourUseElectricInfoRes
* @Date2023/5/10 15:20
* @Version 1.0
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class TodayThisHourUseElectricInfoRes {
Integer id; // 序号
String hour; // 当前小时间段
Integer deviceId; // 设备Id
String simDate; // 更新日期
String upDateTime; // 更新时间
Double useElectric; // 该小时间段用电量
}

@ -3,6 +3,7 @@ package com.psdc.mapper;
import java.util.List;
import com.psdc.entity.PsdcElectricHtdata;
import com.psdc.entity.res.TodayThisHourUseElectricInfoRes;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.data.domain.Pageable;
@ -23,8 +24,15 @@ public interface PsdcElectricHtdataMapper{
*/
PsdcElectricHtdata queryById(Integer electricHtdataId);
List<TodayThisHourUseElectricInfoRes> selThisHourUseElectric(@Param(value = "deviceId") Integer deviceId,
@Param(value = "upDate") String upDate);
List<TodayThisHourUseElectricInfoRes> selThisDayUseElectric(@Param(value = "deviceId") Integer deviceId,
@Param(value = "upDate") String upDate);
Double selTodayUseEnergy(@Param(value = "deviceId") Integer deviceId,
@Param(value = "updateTime") String updateTime);
@Param(value = "beginTime") String begin_time,
@Param(value = "endTime") String end_time);
/**

@ -17,12 +17,12 @@ import org.springframework.data.domain.Pageable;
@Mapper
public interface PsdcElectricRtdataMapper{
/**
* 通过ID查询单条数据
*
* @param electricRtdataId 主键
* 通过ID查询单条数据
* @param electricId 主键
* @return 实例对象
*/
PsdcDevicePowerRes queryById(@Param("electricRtdataId") Integer electricRtdataId);
PsdcDevicePowerRes queryById(@Param("electricId") Integer electricId,
@Param("upDate") String upDate);
/**
* 分页查询指定行数据
*

@ -34,12 +34,10 @@ public interface PsdcThermometerHtdataMapper{
List<PsdcThermometerHtdata> queryAllByLimit(PsdcThermometerHtdata psdcThermometerHtdata, @Param("pageable") Pageable pageable);
List<Double> selTodayThermometer(@Param(value = "temp") String temp,
@Param(value = "deviceId") Integer deviceId,
@Param(value = "updateTime") String updateTime);
List<PsdcThermometerHtdata> selTodayThermometer(@Param(value = "deviceId") Integer deviceId,
@Param(value = "beginTime") String begin_time,
@Param(value = "endTime") String end_time);
List<String> selTodayThermometer2(@Param(value = "deviceId") Integer deviceId,
@Param(value = "updateTime") String updateTime);
/**
* 统计总行数

@ -0,0 +1,24 @@
package com.psdc.service;
import java.util.List;
import java.util.Map;
/**
* @Author戴仕崑
* @Projectpsdc
* @FilenameIPsdcElectricHtdata
* @Date2023/5/10 9:00
* @Version 1.0
*/
public interface IPsdcElectricHtdataService {
Map selTotalElectricityInfo();
List selThisHourUseElectric();
List selDcglThisHourUseElectric();
List selDcglThisDayUseElectric();
}

@ -0,0 +1,17 @@
package com.psdc.service;
import com.psdc.entity.res.PsdcDevicePowerRes;
/**
* @Author戴仕崑
* @Projectpsdc
* @FilenameIPsdcElectricRtdata
* @Date2023/5/10 9:00
* @Version 1.0
*/
public interface IPsdcElectricRtdataService {
PsdcDevicePowerRes queryById();
}

@ -1,8 +1,9 @@
package com.psdc.service;
import com.psdc.core.domain.AjaxResult;
import com.psdc.entity.PsdcDevicePowerHdata96;
import com.psdc.entity.res.PsdcDevicePowerRes;
import java.util.List;
/**
* @Author戴仕崑
@ -18,6 +19,8 @@ public interface IPsdcThermometerHtdataService {
AjaxResult sel8WnDu();
AjaxResult selTotalElectricityInfo();
PsdcDevicePowerRes selTotalElectricityInfo();
AjaxResult selDzglWenDu();
}

@ -0,0 +1,90 @@
package com.psdc.service.impl;
import com.psdc.mapper.PsdcElectricHtdataMapper;
import com.psdc.service.IPsdcElectricHtdataService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.*;
/**
* @Author戴仕崑
* @Projectpsdc
* @FilenamePsdcElectricRtdataServiceImpl
* @Date2023/5/10 9:01
* @Version 1.0
*/
@Service
public class PsdcElectricHtdataServiceImpl implements IPsdcElectricHtdataService {
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
@Resource
PsdcElectricHtdataMapper electricHtdataMapper;
/**
* 总电表查询
* @return
*/
@Override
public Map selTotalElectricityInfo() {
Date date = new Date();
Map<String, Double> map = new HashMap<>();
String tb = df.format(date) + " 00:00:00"; // 今天开始检索时间
String te = df.format(date) + " 23:59:59"; // 今天结束检索时间
String mb = benYue()[0] + " 00:00:00"; // 本月开始检索时间
String me = benYue()[1] + " 23:59:59"; // 本月结束检索时间
Double todayUseElectric = electricHtdataMapper.selTodayUseEnergy(13, tb, te);// 总电表今日用电量
Double toMonthUseElectric = electricHtdataMapper.selTodayUseEnergy(13, mb, me);// 总电表本月用电量
map.put("eday", todayUseElectric);
map.put("emonth", toMonthUseElectric);
return map;
}
/**
* 总电表查询日用电量集合
* @return
*/
@Override
public List selThisHourUseElectric() {
return electricHtdataMapper.selThisHourUseElectric(13, df.format(new Date()));
}
/**
* 电磁锅炉查询日用电量
* @return
*/
@Override
public List selDcglThisHourUseElectric() {
return electricHtdataMapper.selThisHourUseElectric(1, df.format(new Date()));
}
/**
* 电磁锅炉查询月用电量
* @return
*/
@Override
public List selDcglThisDayUseElectric() {
return electricHtdataMapper.selThisDayUseElectric(1, df.format(new Date()).substring(0,7));
}
private String[] benYue(){
String startDay = df.format(new Date());
String[] s1 = new String[2];
Calendar calendar = Calendar.getInstance();
calendar.set(Integer.parseInt(startDay.substring(0,4)), Integer.parseInt(startDay.substring(5,7)) - 1, 1);
String firstDayOfMonth = df.format(calendar.getTime());
s1[0] = firstDayOfMonth;
// 这里先设置要获取月份的下月的第一天
calendar.set(Integer.parseInt(startDay.substring(0,4)), Integer.parseInt(startDay.substring(5,7)), 1);
// 这里将日期值减去一天,从而获取到要求的月份最后一天
calendar.add(Calendar.DATE, -1);
String lastDayOfMonth = df.format(calendar.getTime());
s1[1] = lastDayOfMonth;
return s1;
}
}

@ -0,0 +1,47 @@
package com.psdc.service.impl;
import com.psdc.entity.PsdcDevicePowerHdata96;
import com.psdc.entity.res.PsdcDevicePowerRes;
import com.psdc.mapper.PsdcDevicePowerHdata96Mapper;
import com.psdc.mapper.PsdcElectricRtdataMapper;
import com.psdc.service.IPsdcElectricRtdataService;
import com.psdc.utils.SecurityUtils;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
* @Author戴仕崑
* @Projectpsdc
* @FilenamePsdcElectricRtdataServiceImpl
* @Date2023/5/10 16:08
* @Version 1.0
*/
@Service
public class PsdcElectricRtdataServiceImpl implements IPsdcElectricRtdataService {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
SimpleDateFormat sdf2 = new SimpleDateFormat("yyyyMMdd");
@Resource
PsdcElectricRtdataMapper electricRtdataMapper;
@Resource
PsdcDevicePowerHdata96Mapper devicePowerHdata96Mapper;
/**
* 电磁锅炉查询
* @return
*/
@Override
public PsdcDevicePowerRes queryById() {
long userId = SecurityUtils.getUserId();
Date date = new Date();
PsdcDevicePowerRes devicePowerRes = electricRtdataMapper.queryById(1, sdf.format(date));
PsdcDevicePowerHdata96 hdata96 = devicePowerHdata96Mapper.queryById(userId, 13, sdf2.format(date));
devicePowerRes.setTodayUsePowers(hdata96);
return devicePowerRes;
}
}

@ -2,7 +2,7 @@ package com.psdc.service.impl;
import com.psdc.core.domain.AjaxResult;
import com.psdc.entity.PsdcDevicePowerHdata96;
import com.psdc.entity.PsdcElectricRtdata;
import com.psdc.entity.PsdcThermometerHtdata;
import com.psdc.entity.res.PsdcDevicePowerRes;
import com.psdc.entity.res.PsdcThermometerDataRes;
import com.psdc.mapper.*;
@ -49,13 +49,33 @@ public class PsdcThermometerHtdataServiceImpl implements IPsdcThermometerHtdataS
List<PsdcThermometerDataRes> ary = new ArrayList();
for (Integer d : devList) {
// 查询今日实时温度数据
PsdcThermometerDataRes dataRes = psdcThermometerRtdataMapper.queryById(d);
List<Double> listIn = psdcThermometerHtdataMapper.selTodayThermometer("thermometer_value_in", d, sdf.format(date));
List<Double> listOut = psdcThermometerHtdataMapper.selTodayThermometer("thermometer_value_out", d, sdf.format(date));
List<Double> listTemp = psdcThermometerHtdataMapper.selTodayThermometer("thermometer_value", d, sdf.format(date));
List<String> times = psdcThermometerHtdataMapper.selTodayThermometer2(d, sdf.format(date));
Double useEnergy = psdcElectricHtdataMapper.selTodayUseEnergy(d, sdf.format(date));
String tb = sdf.format(date) + " 00:00:00"; // 今天开始检索时间
String te = sdf.format(date) + " 23:59:59"; // 今天结束检索时间
List<Double> listIn = new ArrayList(); // 今天历史进水温度集合
List<Double> listOut = new ArrayList(); // 今天历史出水温度集合
List<Double> listTemp = new ArrayList(); // 今天历史温度集合
List<String> times = new ArrayList(); // 时间轴
// 循环遍历今天历史数据对象集合
List<PsdcThermometerHtdata> htdata = psdcThermometerHtdataMapper.selTodayThermometer(d, tb, te);
for (PsdcThermometerHtdata h : htdata){
listTemp.add(h.getThermometerValue());
if (null != h.getThermometerValueIn()){
listIn.add(h.getThermometerValueIn());
}
if (null != h.getThermometerValueOut()){
listOut.add(h.getThermometerValueOut());
}
String t = h.getUpdateTime().split(" ")[1].substring(0,5);
times.add(t);
}
Double useEnergy = psdcElectricHtdataMapper.selTodayUseEnergy(d, tb, te);
dataRes.setTimeList(times);
dataRes.setTempTodayList(listTemp);
dataRes.setTempInTodayList(listIn);
@ -75,12 +95,40 @@ public class PsdcThermometerHtdataServiceImpl implements IPsdcThermometerHtdataS
}
@Override
public AjaxResult selTotalElectricityInfo() {
public PsdcDevicePowerRes selTotalElectricityInfo() {
long userId = SecurityUtils.getUserId();
PsdcDevicePowerHdata96 hdata96 = psdcDevicePowerHdata96Mapper.queryById(userId, 13, sdf2.format(new Date()));
PsdcDevicePowerRes rtdata = psdcElectricRtdataMapper.queryById(13);
PsdcDevicePowerRes rtdata = psdcElectricRtdataMapper.queryById(13, sdf.format(new Date()));
rtdata.setTodayUsePowers(hdata96);
return AjaxResult.success(rtdata);
return rtdata;
}
/**
* 查询电磁锅炉进水出水温度
* @return
*/
@Override
public AjaxResult selDzglWenDu() {
Date date = new Date();
String tb = sdf.format(date) + " 00:00:00"; // 今天开始检索时间
String te = sdf.format(date) + " 23:59:59"; // 今天结束检索时间
List<Double> listIn = new ArrayList(); // 今天历史进水温度集合
List<Double> listOut = new ArrayList(); // 今天历史出水温度集合
List<String> times = new ArrayList(); // 时间轴
// 循环遍历今天历史数据对象集合
List<PsdcThermometerHtdata> htdata = psdcThermometerHtdataMapper.selTodayThermometer(1, tb, te);
for (PsdcThermometerHtdata h : htdata){
if (null != h.getThermometerValueIn()){
listIn.add(h.getThermometerValueIn());
}
if (null != h.getThermometerValueOut()){
listOut.add(h.getThermometerValueOut());
}
String t = h.getUpdateTime().split(" ")[1].substring(0,5);
times.add(t);
}
AjaxResult ajax = AjaxResult.success().put("tempIn", listIn).put("tempOut", listOut).put("times", times);
return ajax;
}

@ -45,6 +45,15 @@
<result property="combqh" column="CombQh" />
</resultMap>
<resultMap id="PsdcElectricHtdataMap2" type="com.psdc.entity.res.TodayThisHourUseElectricInfoRes">
<result property="id" column="electric_htdata_id" />
<result property="hour" column="hour" />
<result property="deviceId" column="device_id" />
<result property="simDate" column="data" />
<result property="upDateTime" column="update_time" />
<result property="useElectric" column="use_deiffen" />
</resultMap>
<!-- 通过ID查询单条数据 -->
<select id="queryById" resultMap="PsdcElectricHtdataMap">
select
@ -54,18 +63,46 @@
where electric_htdata_id = #{electricHtdataId}
</select>
<select id="selThisHourUseElectric" resultMap="PsdcElectricHtdataMap2">
Select electric_htdata_id ,dt.time As `hour`,device_id,DATE_FORMAT(update_time,'%H:%i:%S') As `update_time`,
IFNULL(SUM(use_deiffen),0) As use_deiffen
From psdc_datetime dt
Left Join psdc_electric_htdata peht On dt.time = DATE_FORMAT(update_time,'%H')
And device_id = ${deviceId} And DATE_FORMAT(update_time,'%Y-%m-%d') = #{upDate}
Where dt.time is Not Null
Group By dt.time
Order By dt.time
</select>
<select id="selThisDayUseElectric" resultMap="PsdcElectricHtdataMap2">
Select electric_htdata_id ,dt.`data`, device_id, IFNULL(SUM(use_deiffen),0.0) as use_deiffen
From psdc_datetime dt
Left Join psdc_electric_htdata peht On dt.data = DATE_FORMAT(peht.update_time,'%Y-%m-%d')
And peht.device_id = ${deviceId}
Where dt.data is Not null
And date_format(dt.`data`,'%Y-%m') = #{upDate}
GROUP By dt.data
ORDER By dt.data
</select>
<select id="selTodayUseEnergy" resultType="java.lang.Double">
Select SUM(use_deiffen) From psdc_electric_htdata
<where>
<if test="deviceId != null and deviceId != ''">
device_id = #{deviceId}
</if>
<if test="updateTime != null and updateTime != ''">
And update_time Like concat('%',#{updateTime},'%')
<if test="beginTime != null and beginTime != ''"><!-- 开始时间检索 -->
And date_format(update_time,'%Y-%m-%d %H:%i:%S') &gt;= date_format(#{beginTime},'%Y-%m-%d %H:%i:%S')
</if>
<if test="endTime != null and endTime != ''"><!-- 结束时间检索 -->
And date_format(update_time,'%Y-%m-%d %H:%i:%S') &lt;= date_format(#{endTime},'%Y-%m-%d %H:%i:%S')
</if>
</where>
</select>
<!--分页查询指定行数据-->
<select id="queryAllByLimit" resultMap="PsdcElectricHtdataMap">
select

@ -47,12 +47,27 @@
<resultMap id="PsdcElectricRtdataMap2" type="com.psdc.entity.res.PsdcDevicePowerRes">
<result property="totp" column="TotP" />
<result property="totwh" column="TotWh" />
<result property="temp" column="thermometer_value" />
<result property="tempIn" column="thermometer_value_in" />
<result property="tempOut" column="thermometer_value_out" />
<result property="runStatus" column="device_runstatus" />
</resultMap>
<!-- 通过ID查询单条数据 -->
<select id="queryById" resultMap="PsdcElectricRtdataMap2">
Select TotP, TotWh From psdc_electric_rtdata
Where device_id = #{electricRtdataId}
Select TotP, TotWh, ptr.thermometer_value, ptr.thermometer_value_in, ptr.thermometer_value_out, pd.device_runstatus
From psdc_device pd
Left Join psdc_electric_rtdata per On per.device_id = pd.device_id
Left Join psdc_thermometer_rtdata ptr On ptr.device_id = pd.device_id
<where>
pd.device_id = #{electricId}
</where>
<if test="upDate != null and upDate != ''">
And DATE_FORMAT(per.update_time,'%Y-%m-%d') = #{upDate}
</if>
<if test="upDate != null and upDate != ''">
And DATE_FORMAT(per.update_time,'%Y-%m-%d') = #{upDate}
</if>
</select>
<!--分页查询指定行数据-->

@ -18,30 +18,23 @@
where thermometer_htdata_id = #{thermometerHtdataId}
</select>
<select id="selTodayThermometer" resultType="java.lang.Double">
Select ${temp} From psdc_thermometer_htdata
<select id="selTodayThermometer" resultMap="PsdcThermometerHtdataMap">
Select thermometer_htdata_id,device_id,thermometer_value,thermometer_value_in,thermometer_value_out,update_time From psdc_thermometer_htdata
<where>
<if test="deviceId != null and deviceId != ''">
device_id = #{deviceId}
</if>
<if test="updateTime != null and updateTime != ''">
And update_time Like concat('%',#{updateTime},'%')
</if>
</where>
</select>
<select id="selTodayThermometer2" resultType="java.lang.String">
Select update_time From psdc_thermometer_htdata
<where>
<if test="deviceId != null and deviceId != ''">
device_id = #{deviceId}
<if test="beginTime != null and beginTime != ''"><!-- 开始时间检索 -->
And date_format(update_time,'%Y-%m-%d %H:%i:%S') &gt;= date_format(#{beginTime},'%Y-%m-%d %H:%i:%S')
</if>
<if test="updateTime != null and updateTime != ''">
And update_time Like concat('%',#{updateTime},'%')
<if test="endTime != null and endTime != ''"><!-- 结束时间检索 -->
And date_format(update_time,'%Y-%m-%d %H:%i:%S') &lt;= date_format(#{endTime},'%Y-%m-%d %H:%i:%S')
</if>
</where>
ORDER BY update_time
</select>
<!--分页查询指定行数据-->
<select id="queryAllByLimit" resultMap="PsdcThermometerHtdataMap">
Select

@ -0,0 +1,6 @@
import request from '@/utils/request'
//8个温度传感器接口
export function getTemperature() {
return request.get('/indexLook/8wd')
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 697 KiB

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

@ -10,9 +10,14 @@
<div class="title">电磁锅炉</div>
<div class="info_box">
<div class="dev_img">
<img src="../../assets/images/电磁锅炉.png" alt="">
<img src="../../assets/images/dcgl.png" alt="">
</div>
<div class="dev_data">
<p>当前状态<span class="now_tatus">开启</span></p>
<p>进水温度<span class="enter_t"><span>25</span></span></p>
<p>出水温度<span class="leave_t"><span>85</span></span></p>
<p>今日能耗<span class="today_tce"><span>23</span>kWh</span></p>
</div>
<div class="dev_data"></div>
</div>
<div class="chart_box">
<div class="dev_chart"></div>
@ -24,7 +29,12 @@
<div class="dev_img">
<img src="../../assets/images/蓄热锅炉.png" alt="">
</div>
<div class="dev_data"></div>
<div class="dev_data">
<p>当前状态<span class="now_tatus">开启</span></p>
<p>进水温度<span class="enter_t"><span>25</span></span></p>
<p>出水温度<span class="leave_t"><span>85</span></span></p>
<p>今日能耗<span class="today_tce"><span>23</span>kWh</span></p>
</div>
</div>
<div class="chart_box">
<div class="dev_chart"></div>
@ -33,21 +43,66 @@
</div>
<div class="middle">
<div class="middle_top">
<div class="important_data"></div>
<div class="my3D_img"></div>
<div class="important_data"></div>
<div class="now_power">
<div class="data">35kW</div>
<div class="bg_img"></div>
<div class="txt">当前功率</div>
</div>
<div class="my3D_img">
<img src="../../assets/images/3Dimg.png" alt="">
</div>
<div class="now_ele">
<div class="data">16446kWh</div>
<div class="bg_img"></div>
<div class="txt">总用电量</div>
</div>
</div>
<div class="middle_bottom">
<div class="chart_box bgimg"></div>
<div class="chart_box bgimg">
<div class="title">当前功率</div>
<div class="nowPower_chart"></div>
</div>
<div class="wendu_box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item">
<div class="dev_name">温度传感器1</div>
<div class="line"></div>
<div class="data">26</div>
</div>
<div class="item">
<div class="dev_name">温度传感器2</div>
<div class="line"></div>
<div class="data">26</div>
</div>
<div class="item">
<div class="dev_name">温度传感器3</div>
<div class="line"></div>
<div class="data">26</div>
</div>
<div class="item">
<div class="dev_name">温度传感器4</div>
<div class="line"></div>
<div class="data">26</div>
</div>
<div class="item">
<div class="dev_name">温度传感器5</div>
<div class="line"></div>
<div class="data">26</div>
</div>
<div class="item">
<div class="dev_name">温度传感器6</div>
<div class="line"></div>
<div class="data">26</div>
</div>
<div class="item">
<div class="dev_name">温度传感器7</div>
<div class="line"></div>
<div class="data">26</div>
</div>
<div class="item">
<div class="dev_name">温度传感器8</div>
<div class="line"></div>
<div class="data">26</div>
</div>
</div>
</div>
</div>
@ -58,7 +113,12 @@
<div class="dev_img">
<img src="../../assets/images/空气源热泵.png" alt="">
</div>
<div class="dev_data"></div>
<div class="dev_data">
<p>当前状态<span class="now_tatus">开启</span></p>
<p>进水温度<span class="enter_t"><span>25</span></span></p>
<p>出水温度<span class="leave_t"><span>85</span></span></p>
<p>今日能耗<span class="today_tce"><span>23</span>kWh</span></p>
</div>
</div>
<div class="chart_box">
<div class="dev_chart"></div>
@ -70,7 +130,11 @@
<div class="dev_img">
<img src="../../assets/images/发热电缆.png" alt="">
</div>
<div class="dev_data"></div>
<div class="dev_data">
<p>当前状态<span class="now_tatus">开启</span></p>
<p>当前温度<span class="now_t"><span>25</span></span></p>
<p>今日能耗<span class="today_tce"><span>23</span>kWh</span></p>
</div>
</div>
<div class="chart_box">
<div class="dev_chart"></div>
@ -82,6 +146,17 @@
</template>
<script setup name="Index">
// import {ref,reactive} from 'vue'
import {getTemperature} from '../../api/bigview/bigview'
// getWendu();
// const wendi1 = ref(0)
// function getWendu(){
// getTemperature().then((res)=>{
// console.log(res.data.data)
// })
// }
@ -141,32 +216,93 @@
width: 50.5%;
height: 100%;
.middle_top{
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
flex: 2;
width: 100%;
height: 67%;
padding-bottom: 20px;
.important_data{
width: 14%;
height: 100%;
border: 1px solid #fff;
.now_power{
position: absolute;
bottom: 20px;
left: 20px;
width: 112px;
height: 110px;
.data{
color: #F5901A;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.bg_img{
width: 112px;
height: 62px;
background-image: url("../../assets/images/footer.png");
background-size: 100% 100%;
margin-top: -10px;
}
.txt{
color: #1AC4F5;
font-size: 15px;
font-weight: bold;
line-height: 30px;
text-align: center;
}
}
.now_ele{
position: absolute;
bottom: 20px;
right: 20px;
width: 112px;
height: 110px;
.data{
color: #128DFF;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.bg_img{
width: 112px;
height: 62px;
background-image: url("../../assets/images/footer.png");
background-size: 100% 100%;
margin-top: -10px;
}
.txt{
color: #1AC4F5;
font-size: 15px;
font-weight: bold;
line-height: 30px;
text-align: center;
}
}
.my3D_img{
width: 72%;
width: 100%;
height: 100%;
border: 1px solid #fff;
padding: 20px 60px 0 60px;
img{
width: 100%;
height: 100%;
opacity: .85;
}
}
}
.middle_bottom{
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
flex: 1;
height: 33%;
width: 100%;
.chart_box{
width: 49.5%;
height: 100%;
.nowPower_chart{
width: 100%;
height: 81%;
border: 1px solid #fff;
}
}
.wendu_box{
display: flex;
@ -177,10 +313,30 @@
.item{
width: 24%;
height: 48.5%;
background-color: #1ab394;
padding: 0 10px;
border: 1px solid #1085B6;
&:first-child{
margin-bottom: 8px;
}
.dev_name{
color: #19C3F4;
font-size: 14px;
text-align: center;
line-height: 50px;
}
.line{
width: 100%;
height: 1px;
background-image: url("../../assets/images/line.png");
background-size: 100% 100%;
}
.data{
color: #F5901A;
font-size: 26px;
font-weight: bold;
line-height: 80px;
text-align: center;
}
}
}
}
@ -222,7 +378,7 @@
.dev_img{
width: 50%;
height: 100%;
border: 1px solid #fff;
//border: 1px solid #fff;
img{
width: 100%;
height: 100%;
@ -231,7 +387,27 @@
.dev_data{
width: 50%;
height: 100%;
border: 1px solid #fff;
//border: 1px solid #fff;
margin-left: 10px;
p{
font-size: 16px;
line-height: 40px;
}
.now_tatus{
color: #14FF00;
}
.enter_t{
color: #F5901A;
}
.leave_t{
color: #F5901A;
}
.today_tce{
color: #128DFF;
}
.now_t{
color: #F5901A;
}
}
}
.chart_box{

@ -1,16 +1,310 @@
<template>
<div class="app-container home">
<h1>手动控制</h1>
<el-button type="primary" :icon="Download">策略导入</el-button>
<div class="dev_control_wrapper">
<div class="dev_control_item">
<div class="item_header">
<span>电热锅炉</span>
<el-switch v-model="value1" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
</div>
<div class="item_bottom">
<div class="item_bottom_img">
<img src="./src/assets/images/dcgl.png" alt="">
</div>
<div class="item_bottom_form">
<el-form :model="form1">
<el-form-item label="当前状态:"><span class="green">开启</span></el-form-item>
<el-form-item label="进水温度:"><el-input v-model="form1.enter" /></el-form-item>
<el-form-item label="出水温度:"><el-input v-model="form1.leave" /></el-form-item>
<div class="submit" @click="onSubmit1">确定</div>
</el-form>
</div>
</div>
</div>
<div class="dev_control_item">
<div class="item_header">
<span>空气源热泵</span>
<el-switch v-model="value2" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
</div>
<div class="item_bottom">
<div class="item_bottom_img">
<img src="./src/assets/images/空气源热泵.png" alt="">
</div>
<div class="item_bottom_form">
<el-form :model="form2">
<el-form-item label="当前状态:"><span class="red">关闭</span></el-form-item>
<el-form-item label="进水温度:"><el-input v-model="form2.enter" /></el-form-item>
<el-form-item label="出水温度:"><el-input v-model="form2.leave" /></el-form-item>
<div class="submit" @click="onSubmit2">确定</div>
</el-form>
</div>
</div>
</div>
<div class="dev_control_item">
<div class="item_header">
<span>发热电缆</span>
<el-switch v-model="value3" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
</div>
<div class="item_bottom">
<div class="item_bottom_img">
<img src="./src/assets/images/发热电缆.png" alt="">
</div>
<div class="item_bottom_form">
<el-form :model="form3">
<el-form-item label="当前状态:"><span class="red">关闭</span></el-form-item>
<el-form-item label="当前温度:"><el-input v-model="form3.now" /></el-form-item>
<div class="submit" @click="onSubmit3">确定</div>
</el-form>
</div>
</div>
</div>
<div class="dev_control_item">
<div class="item_header">
<span>风机盘管</span>
<el-switch v-model="value4" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
</div>
<div class="item_bottom">
<div class="item_bottom_img">
<img src="./src/assets/images/风机盘管.png" alt="">
</div>
<div class="item_bottom_form">
<el-form>
<el-form-item label="当前状态:"><span class="red">关闭</span></el-form-item>
</el-form>
</div>
</div>
</div>
<div class="dev_control_item">
<div class="item_header">
<span>水泵</span>
<el-switch v-model="value5" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
</div>
<div class="item_bottom">
<div class="item_bottom_img">
<img src="./src/assets/images/水泵.png" alt="">
</div>
<div class="item_bottom_form">
<el-form>
<el-form-item label="当前状态:"><span class="red">关闭</span></el-form-item>
</el-form>
</div>
</div>
</div>
<div class="dev_control_item">
<div class="item_header">
<span>蓄热锅炉</span>
<el-switch v-model="value6" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
</div>
<div class="item_bottom">
<div class="item_bottom_img">
<img src="./src/assets/images/蓄热锅炉.png" alt="">
</div>
<div class="item_bottom_form">
<el-form>
<el-form-item label="当前状态:"><span class="red">关闭</span></el-form-item>
</el-form>
</div>
</div>
</div>
<div class="dev_control_item">
<div class="item_header">
<span>沙盘</span>
<el-switch v-model="value7" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
</div>
<div class="item_bottom">
<div class="item_bottom_img">
<img src="./src/assets/images/沙盘.png" alt="">
</div>
<div class="item_bottom_form">
<el-form>
<el-form-item label="当前状态:"><span class="red">关闭</span></el-form-item>
</el-form>
</div>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
</template>
<script setup name="Index">
import { Share,Download } from '@element-plus/icons-vue' //element
import { ref,reactive } from 'vue'
const value1 = ref(true)
const value2 = ref(false)
const value3 = ref(false)
const value4 = ref(false)
const value5 = ref(false)
const value6 = ref(false)
const value7 = ref(false)
const form1 = reactive({
enter:'',
leave:'',
})
const form2 = reactive({
enter:'',
leave:'',
})
const form3 = reactive({
now:'',
})
const onSubmit1 = () => {
console.log('确定')
}
const onSubmit2 = () => {
console.log('确定')
}
const onSubmit3 = () => {
console.log('确定')
}
</script>
<style scoped lang="scss">
.home {
height: calc(100vh - 118px);
.dev_control_wrapper{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
height: 50%;
overflow-y: auto;
.dev_control_item{
width: 24.46%;
height: 47%;
margin-right: 12px;
margin-bottom: 12px;
background-color: #2F3D8A;
overflow: hidden;
&:nth-child(4n){
margin-right: 0px;
}
.item_header{
width: 100%;
height: 20%;
background-color: #374590;
padding: 0 10px;
span{
font-size: 16px;
font-weight: bold;
line-height: 37px;
}
.switch{
float: right;
line-height: 37px;
height: 37px;
}
}
.item_bottom{
display: flex;
width: 100%;
height: 80%;
.item_bottom_img{
width: 40%;
height: 100%;
//border: 1px solid red;
padding: 10px;
img{
width: 100%;
height: 100%;
}
}
.item_bottom_form{
width: 60%;
height: 100%;
//border: 1px solid red;
padding: 0 10px 0 0;
.green{
color: #00ff07;
}
.red{
color: #ff0000;
}
.submit{
padding: 3px 15px;
border-radius: 2px;
background-color: #2F8EED;
float: right;
margin-top: 8px;
cursor: pointer;
&:hover{
background-color: #5ba2f3;
}
}
}
}
}
}
.dev_control_table{
width: 100%;
height: 50%;
background-color: #2F3D8A;
.control_header{
width: 100%;
height: 10%;
background-color: #374590;
padding: 0 10px;
span{
font-size: 16px;
font-weight: bold;
line-height: 37px;
}
}
.control_table{
width: 100%;
height: 90%;
border: 1px solid red;
}
}
}
::v-deep .el-button{
border-radius: 2px;
margin-bottom: 12px;
}
::v-deep .el-switch__core .el-switch__action{
top: 1px;
width: 17px;
height: 17px;
}
::v-deep .el-form-item--default{
margin-bottom: 3px;
}
::v-deep .el-input__inner{
color: #f3ffff;
}
</style>

@ -1,6 +1,63 @@
<template>
<div class="app-container home">
<h1>电表</h1>
<div class="top">
<div class="card">
<div>pic</div>
<div>
<p>当前功率</p>
<h2>0kW</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>日用电量</p>
<h2>11kWh</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>月用电量</p>
<h2>141kWh</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>累计用电量</p>
<h2>1641kWh</h2>
</div>
</div>
</div>
<div class="mid">
<div class="mid1">
<div class="mid1-1">
当前功率
</div>
<div>
pic
</div>
</div>
<div class="mid2">
<div class="mid2-1">
当前功率总览
</div>
<div>
pic
</div>
</div>
</div>
<div class="bottom">
<div class="bottom1">
<div class="bottom1-1">
今日用电量总览
</div>
<div>
pic
</div>
</div>
</div>
</div>
</template>
@ -11,6 +68,70 @@
</script>
<style scoped lang="scss">
p{
margin-bottom: 10px;
}
.top{
width: 100%;
height: 110px;
display: flex;
justify-content: space-between;
}
.card{
width: 24%;
height: 100%;
background-color: #2F3D8A;
display: flex;
justify-content: space-around;
align-items: center;
}
.mid{
width: 100%;
height: 350px;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
.mid1{
width: 24%;
height: 100%;
background-color: #2F3D8A;
}
.mid1-1{
width: 100%;
height: 40px;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
.mid2{
width: 74.67%;
height: 100%;
background-color: #2F3D8A;
}
.mid2-1{
width: 100%;
height: 40px;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
.bottom{
width: 100%;
height: 350px;
}
.bottom1{
width: 100%;
height: 100%;
background-color: #2F3D8A;
}
.bottom1-1{
width: 100%;
height: 40px;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
</style>

@ -1,16 +1,164 @@
<template>
<div class="app-container home">
<h1>电热锅炉</h1>
<div class="top">
<div class="card">
<div>pic</div>
<div>
<p>总用电量</p>
<h2>1641kWh</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>当前功率</p>
<h2>11kW</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<div style="display: flex; margin-bottom: 5px">
<p>进水温度:</p>
<h2>25</h2>
</div>
<div style="display: flex">
<p>出水温度:</p>
<h2>85</h2>
</div>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>运行状态</p>
<h2 style="color: #1ab394">开启</h2>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom1">
<div class="bottom1-1">
日用电量
</div>
<div id="myEcharts" style="width: 100%; height: 86.7%">
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
月用电量
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前功率
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前温度
</div>
<div>
pic
</div>
</div>
</div>
</div>
</template>
<script setup name="Index">
<script name="Index">
import { onMounted } from "vue";
import * as echarts from 'echarts';
export default {
name: "drgl",
setup() {
onMounted(() => {//element,onMountedHook
let myChart = echarts.init(document.getElementById("myEcharts"));
//
myChart.setOption({
title: {},
tooltip: {},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
},
yAxis: {
nameTextStyle: {
color: 'white'
},
show: true,
type: 'value',
axisLine: {
show: true,
}
},
series: [
{
name: "用户量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
window.onresize = function () {//
myChart.resize();
};
});
},
components: {},
mounted() {},
};
</script>
<style scoped lang="scss">
.top{
width: 100%;
height: 110px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.card{
width: 24%;
height: 110px;
background-color: #2F3D8A;
display: flex;
justify-content: space-around;
align-items: center;
}
.bottom{
width: 100%;
height: 640px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bottom1{
width: 49.35%;
height: 300px;
background-color: #2F3D8A;
margin-bottom: 20px;
}
p{
margin-bottom: 10px;
}
.bottom1-1{
width: 100%;
height: 13.3%;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
</style>

@ -1,6 +1,72 @@
<template>
<div class="app-container home">
<h1>发热电缆</h1>
<div class="top">
<div class="card">
<div>pic</div>
<div>
<p>总用电量</p>
<h2>1641kWh</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>当前功率</p>
<h2>11kW</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<div>
<p>当前温度</p>
<h2>25</h2>
</div>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>运行状态</p>
<h2 style="color: #1ab394">开启</h2>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom1">
<div class="bottom1-1">
日用电量
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
月用电量
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前功率
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前温度
</div>
<div>
pic
</div>
</div>
</div>
</div>
</template>
@ -11,6 +77,45 @@
</script>
<style scoped lang="scss">
.top{
width: 100%;
height: 110px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.card{
width: 24%;
height: 110px;
background-color: #2F3D8A;
display: flex;
justify-content: space-around;
align-items: center;
}
.bottom{
width: 100%;
height: 640px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bottom1{
width: 49.35%;
height: 300px;
background-color: #2F3D8A;
margin-bottom: 20px;
}
p{
margin-bottom: 10px;
}
.bottom1-1{
width: 100%;
height: 40px;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
</style>

@ -1,6 +1,76 @@
<template>
<div class="app-container home">
<h1>空气源热泵</h1>
<div class="top">
<div class="card">
<div>pic</div>
<div>
<p>总用电量</p>
<h2>1641kWh</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>当前功率</p>
<h2>11kW</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<div style="display: flex; margin-bottom: 5px">
<p>进水温度:</p>
<h2>25</h2>
</div>
<div style="display: flex">
<p>出水温度:</p>
<h2>85</h2>
</div>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>运行状态</p>
<h2 style="color: #1ab394">开启</h2>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom1">
<div class="bottom1-1">
日用电量
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
月用电量
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前功率
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前温度
</div>
<div>
pic
</div>
</div>
</div>
</div>
</template>
@ -11,6 +81,45 @@
</script>
<style scoped lang="scss">
.top{
width: 100%;
height: 110px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.card{
width: 24%;
height: 110px;
background-color: #2F3D8A;
display: flex;
justify-content: space-around;
align-items: center;
}
.bottom{
width: 100%;
height: 640px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bottom1{
width: 49.35%;
height: 300px;
background-color: #2F3D8A;
margin-bottom: 20px;
}
p{
margin-bottom: 10px;
}
.bottom1-1{
width: 100%;
height: 40px;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
</style>

@ -1,6 +1,74 @@
<template>
<div class="app-container home">
<h1>温度传感器</h1>
<div class="top">
<div class="card">
<div>pic</div>
<div>
<p>温度传感器1</p>
<h2>40</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>温度传感器2</p>
<h2>41</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>温度传感器3</p>
<h2>33</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>温度传感器4</p>
<h2>36</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>温度传感器5</p>
<h2>35</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>温度传感器6</p>
<h2>37</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>温度传感器7</p>
<h2>38</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>温度传感器8</p>
<h2>32</h2>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom1">
<div class="bottom1-1">
实时温度总览
</div>
<div>
pic
</div>
</div>
</div>
</div>
</template>
@ -11,6 +79,41 @@
</script>
<style scoped lang="scss">
p{
margin-bottom: 10px;
}
.top{
width: 100%;
height: 260px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card{
width: 24%;
height: 110px;
background-color: #2F3D8A;
margin-bottom: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
.bottom{
width: 100%;
height: 350px;
}
.bottom1{
width: 100%;
height: 350px;
background-color: #2F3D8A;
}
.bottom1-1{
width: 100%;
height: 40px;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
</style>

@ -1,6 +1,76 @@
<template>
<div class="app-container home">
<h1>蓄热锅炉</h1>
<div class="top">
<div class="card">
<div>pic</div>
<div>
<p>总用电量</p>
<h2>1641kWh</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>当前功率</p>
<h2>11kW</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<div style="display: flex; margin-bottom: 5px">
<p>进水温度:</p>
<h2>25</h2>
</div>
<div style="display: flex">
<p>出水温度:</p>
<h2>85</h2>
</div>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>运行状态</p>
<h2 style="color: #1ab394">开启</h2>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom1">
<div class="bottom1-1">
日用电量
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
月用电量
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前功率
</div>
<div>
pic
</div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前温度
</div>
<div>
pic
</div>
</div>
</div>
</div>
</template>
@ -11,6 +81,45 @@
</script>
<style scoped lang="scss">
.top{
width: 100%;
height: 110px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.card{
width: 24%;
height: 110px;
background-color: #2F3D8A;
display: flex;
justify-content: space-around;
align-items: center;
}
.bottom{
width: 100%;
height: 640px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bottom1{
width: 49.35%;
height: 300px;
background-color: #2F3D8A;
margin-bottom: 20px;
}
p{
margin-bottom: 10px;
}
.bottom1-1{
width: 100%;
height: 40px;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
</style>

@ -28,21 +28,21 @@
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
size="large"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<!-- <el-form-item prop="code" v-if="captchaEnabled">-->
<!-- <el-input-->
<!-- v-model="loginForm.code"-->
<!-- size="large"-->
<!-- auto-complete="off"-->
<!-- placeholder="验证码"-->
<!-- style="width: 63%"-->
<!-- @keyup.enter="handleLogin"-->
<!-- >-->
<!-- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>-->
<!-- </el-input>-->
<!-- <div class="login-code">-->
<!-- <img :src="codeUrl" @click="getCode" class="login-code-img"/>-->
<!-- </div>-->
<!-- </el-form-item>-->
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
@ -75,6 +75,7 @@ import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
import {ref} from "vue";
const userStore = useUserStore()
const router = useRouter();

@ -56,3 +56,5 @@ export default defineConfig(({ mode, command }) => {
}
}
})

@ -7,7 +7,6 @@ import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/api/indexLook")
@ -28,7 +27,8 @@ public class Index {
@RequestMapping(value = "/zdb", method = RequestMethod.GET)
public AjaxResult selzdb() {
return psdcThermometerHtdataService.selTotalElectricityInfo();
AjaxResult ajax = AjaxResult.success(psdcThermometerHtdataService.selTotalElectricityInfo());
return ajax;
}
}

@ -0,0 +1,46 @@
package com.psdc.controller.monitor;
import com.psdc.core.domain.AjaxResult;
import com.psdc.service.IPsdcElectricHtdataService;
import com.psdc.service.IPsdcElectricRtdataService;
import com.psdc.service.IPsdcThermometerHtdataService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
/**
* @Author戴仕崑
* @Projectpsdc
* @FilenameElectromagneticBoilerController
* @Date2023/5/10 16:12
* @Version 1.0
*/
@RestController
@RequestMapping("/api/monitor/drgl/index")
public class ElectromagneticBoilerController {
@Autowired
IPsdcElectricRtdataService psdcElectricRtdataService;
@Autowired
IPsdcThermometerHtdataService psdcThermometerHtdataService;
@Autowired
IPsdcElectricHtdataService psdcElectricHtdataService;
@PreAuthorize("@ss.hasPermi('emonitor:drgl')")
@RequestMapping(value = "/sel1", method = RequestMethod.GET)
public AjaxResult seldrgl1() {
AjaxResult ajax = AjaxResult.success(psdcElectricRtdataService.queryById());
return ajax;
}
@PreAuthorize("@ss.hasPermi('emonitor:drgl')")
@RequestMapping(value = "/sel2", method = RequestMethod.GET)
public AjaxResult seldrgl2() {
AjaxResult ajax = psdcThermometerHtdataService.selDzglWenDu();
ajax.put("dcglqhour", psdcElectricHtdataService.selDcglThisHourUseElectric());
ajax.put("dcglqday", psdcElectricHtdataService.selDcglThisDayUseElectric());
return ajax;
}
}

@ -0,0 +1,52 @@
package com.psdc.controller.monitor;
import com.psdc.core.domain.AjaxResult;
import com.psdc.entity.res.PsdcDevicePowerRes;
import com.psdc.service.IPsdcElectricHtdataService;
import com.psdc.service.IPsdcThermometerHtdataService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
import java.util.Map;
/**
* @Author戴仕崑
* @Projectpsdc
* @FilenameTotalElectricMeterController
* @Date2023/5/10 10:59
* @Version 1.0
*/
@RestController
@RequestMapping("/api/monitor/db/index")
public class TotalElectricMeterController {
@Autowired
IPsdcThermometerHtdataService psdcThermometerHtdataService;
@Autowired
IPsdcElectricHtdataService psdcElectricHtdataService;
@PreAuthorize("@ss.hasPermi('emonitor:db')")
@RequestMapping(value = "/sel1", method = RequestMethod.GET)
public AjaxResult selzdb1() {
PsdcDevicePowerRes devicePowerRes = psdcThermometerHtdataService.selTotalElectricityInfo();
Map map = psdcElectricHtdataService.selTotalElectricityInfo();
devicePowerRes.setEDay((Double) map.get("eday"));
devicePowerRes.setEMonth((Double) map.get("emonth"));
AjaxResult ajax = AjaxResult.success(devicePowerRes);
return ajax;
}
@PreAuthorize("@ss.hasPermi('emonitor:db')")
@RequestMapping(value = "/sel2", method = RequestMethod.GET)
public AjaxResult selzdb2() {
List list = psdcElectricHtdataService.selThisHourUseElectric();
AjaxResult ajax = AjaxResult.success(list);
return ajax;
}
}
Loading…
Cancel
Save