Browse Source

1.更新2000px以上页面样式变动

2.修改设备定时开关匹配数据逻辑
dev
selia-zx 8 hours ago
parent
commit
45897661c3
  1. 17
      src/api/aircAndWindc/index.js
  2. 9
      src/api/centerairC/temHistory.js
  3. 18
      src/api/hotWater/dataAnalysis.js
  4. 34
      src/api/hotWater/energyAnalysis.js
  5. 10
      src/api/hotWater/energyQuery.js
  6. 18
      src/api/hotWater/overview.js
  7. 1
      src/assets/icons/svg/dataAnalysis.svg
  8. 1
      src/assets/icons/svg/energyQuery.svg
  9. BIN
      src/assets/images/overview1.png
  10. BIN
      src/assets/images/overview2.png
  11. BIN
      src/assets/images/overview3.png
  12. BIN
      src/assets/images/overview4.png
  13. BIN
      src/assets/images/use1.png
  14. BIN
      src/assets/images/use2.png
  15. BIN
      src/assets/images/use3.png
  16. 297
      src/assets/styles/bigScreen.scss
  17. 2
      src/assets/styles/index.scss
  18. 22
      src/components/Crontab/index.vue
  19. 4
      src/views/aircAndWindc/awSysMonitor/index.vue
  20. 37
      src/views/alarm/alarmCode/index.vue
  21. 36
      src/views/alarm/alarmRecord/index.vue
  22. 38
      src/views/alarm/alarmRule/index.vue
  23. 56
      src/views/bigScreen/bigScreen.vue
  24. 12
      src/views/bigScreen/components/allEnergy.vue
  25. 21
      src/views/bigScreen/components/coldSysEnergy.vue
  26. 14
      src/views/bigScreen/components/useElect.vue
  27. 24
      src/views/bigScreen/components/waterSysEnergy.vue
  28. 2
      src/views/centerairC/deviceStrategy/index.vue
  29. 2
      src/views/centerairC/enSourceAnalysis/components/deviceEnergy.vue
  30. 2
      src/views/centerairC/enSourceAnalysis/components/equipment.vue
  31. 2
      src/views/centerairC/enSourceAnalysis/components/machineRoom.vue
  32. 19
      src/views/centerairC/timeSwitch/index.vue
  33. 460
      src/views/components/aircAndWindcMeter.vue
  34. 142
      src/views/components/hotWater.vue
  35. 460
      src/views/components/temMeter.vue
  36. 14
      src/views/components/viewEnergy.vue
  37. 22
      src/views/components/waterTank.vue
  38. 37
      src/views/device/comm/index.vue
  39. 37
      src/views/device/gateway/index.vue
  40. 37
      src/views/device/gather/index.vue
  41. 38
      src/views/device/ledger/index.vue
  42. 36
      src/views/device/maintenance/index.vue
  43. 39
      src/views/device/qrCode/index.vue
  44. 36
      src/views/device/spare/index.vue
  45. 44
      src/views/device/spareInOut/index.vue
  46. 746
      src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
  47. 691
      src/views/hotWater/dataAnalysis/components/analyzeYear.vue
  48. 321
      src/views/hotWater/dataAnalysis/index.vue
  49. 1033
      src/views/hotWater/energyAnalysis/components/energyReport.vue
  50. 711
      src/views/hotWater/energyAnalysis/components/temReport.vue
  51. 711
      src/views/hotWater/energyAnalysis/components/waterReport.vue
  52. 94
      src/views/hotWater/energyAnalysis/index.vue
  53. 483
      src/views/hotWater/energyQuery/components/electReading.vue
  54. 568
      src/views/hotWater/energyQuery/components/energy.vue
  55. 483
      src/views/hotWater/energyQuery/components/waterReading.vue
  56. 94
      src/views/hotWater/energyQuery/index.vue
  57. 827
      src/views/hotWater/overview/index.vue
  58. 105
      src/views/hotWater/waterControl/index.vue
  59. 58
      src/views/login.vue
  60. 14
      src/views/region/index.vue
  61. 2
      src/views/system/user/authRole.vue
  62. 52
      src/views/system/user/index.vue
  63. 42
      src/views/temSys/temHistory/index.vue
  64. 109
      src/views/temSys/temMonitor/index.vue
  65. 473
      src/views/tool/build/index.vue

17
src/api/aircAndWindc/index.js

@ -8,3 +8,20 @@ export function windList(query) {
params: query,
});
}
//查询定时开关列表
export function timeList(query) {
return request({
url: "/device/ahu/monitor/timeList",
method: "get",
params: query,
});
}
//修改定时开关
export function undateTime(query) {
return request({
url: "/device/ahu/monitor/time",
method: "put",
params: query,
});
}

9
src/api/centerairC/temHistory.js

@ -0,0 +1,9 @@
import request from "@/utils/request";
// 历史天气查询
export function weatherTempData(query) {
return request({
url: "/device/cs/getWeatherTemp",
method: "get",
params: query,
});
}

18
src/api/hotWater/dataAnalysis.js

@ -0,0 +1,18 @@
import request from "@/utils/request";
// 数据分析-月
export function queryMonthDatas(query) {
return request({
url: "/hot_energy/analysis/queryMonth",
method: "get",
params: query,
});
}
// 数据分析-年
export function queryYearDatas(query) {
return request({
url: "/hot_energy/analysis/queryYear",
method: "get",
params: query,
});
}

34
src/api/hotWater/energyAnalysis.js

@ -0,0 +1,34 @@
import request from "@/utils/request";
// 楼层
export function hotBuildList(query) {
return request({
url: "/space/building/hot_list",
method: "get",
params: query,
});
}
// 楼栋能耗环比
export function hotEnergySum(query) {
return request({
url: "/hot_energy/energySum",
method: "get",
params: query,
});
}
// 温度变化表
export function hotWaterTemp(query) {
return request({
url: "/hot_energy/waterTemp",
method: "get",
params: query,
});
}
// 温度变化表
export function hotWaterLevel(query) {
return request({
url: "/hot_energy/waterLevel",
method: "get",
params: query,
});
}

10
src/api/hotWater/energyQuery.js

@ -0,0 +1,10 @@
import request from "@/utils/request";
// 水电表读数
export function queryDeviceDatas(query) {
return request({
url: "/hot_energy/queryDeviceDatas",
method: "get",
params: query,
});
}

18
src/api/hotWater/overview.js

@ -0,0 +1,18 @@
import request from "@/utils/request";
// 设备状态
export function deviceState(query) {
return request({
url: "/device/hotWater/deviceState",
method: "get",
params: query,
});
}
// 楼栋能耗
export function hotEnergyQuery(query) {
return request({
url: "/hot_energy/query",
method: "get",
params: query,
});
}

1
src/assets/icons/svg/dataAnalysis.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750837487744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6669" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M930.133333 900.266667H93.866667a8.533333 8.533333 0 0 1-8.533334-8.533334v-25.6a8.533333 8.533333 0 0 1 8.533334-8.533333h836.266666a8.533333 8.533333 0 0 1 8.533334 8.533333v25.6a8.533333 8.533333 0 0 1-8.533334 8.533334zM746.666667 661.333333h-170.666667a8.533333 8.533333 0 0 1-8.533333-8.533333v-25.6a8.533333 8.533333 0 0 1 8.533333-8.533333h170.666667a8.533333 8.533333 0 0 1 8.533333 8.533333v25.6a8.533333 8.533333 0 0 1-8.533333 8.533333z" fill="" p-id="6670"></path><path d="M904.533333 117.333333H119.466667a8.533333 8.533333 0 0 0-8.533334 8.533334v665.6a8.533333 8.533333 0 0 0 8.533334 8.533333h785.066666a8.533333 8.533333 0 0 0 8.533334-8.533333v-665.6a8.533333 8.533333 0 0 0-8.533334-8.533334z m-563.2 149.333334c51.84 0 93.866667 42.026667 93.866667 93.866666s-42.026667 93.866667-93.866667 93.866667-93.866667-42.026667-93.866666-93.866667 42.026667-93.866667 93.866666-93.866666zM247.466667 512a8.533333 8.533333 0 0 1 8.533333-8.533333h170.666667a8.533333 8.533333 0 0 1 8.533333 8.533333v25.6a8.533333 8.533333 0 0 1-8.533333 8.533333H256a8.533333 8.533333 0 0 1-8.533333-8.533333v-25.6z m520.682666-82.709333l-0.149333 0.149333v0.247467l-16.0256 16.0256h-0.247467l-68.053333 68.053333a8.533333 8.533333 0 0 1-12.066133 0l-18.103467-18.103467a8.533333 8.533333 0 0 1 0-12.066133l37.883733-37.883733h-54.135466l-212.241067 212.241066a8.503467 8.503467 0 0 1-6.8736 3.515734H256a8.533333 8.533333 0 0 1-8.533333-8.533334v-25.6a8.533333 8.533333 0 0 1 8.533333-8.533333h147.818667l212.245333-212.245333a8.503467 8.503467 0 0 1 6.8736-3.515734h70.8864l-40.315733-40.315733a8.533333 8.533333 0 0 1 0-12.066133l18.103466-18.103467a8.533333 8.533333 0 0 1 12.066134 0l84.475733 84.475733c1.6896 1.6896 2.513067 3.912533 2.491733 6.126934a8.533333 8.533333 0 0 1-2.496 6.1312z" fill="" p-id="6671"></path></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

1
src/assets/icons/svg/energyQuery.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750837471498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4744" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 64H128c-35.328 0-64 28.672-64 64v768c0 35.328 28.672 64 64 64h592a32 32 0 1 0 0-64H128V128h768v592a32 32 0 1 0 64 0V128c0-35.328-28.672-64-64-64z m-104.256 682.496A206.72 206.72 0 0 0 832 624 208.256 208.256 0 0 0 624 416 208.256 208.256 0 0 0 416 624 208.256 208.256 0 0 0 624 832c44.096 0 87.04-14.08 122.496-40.256l110.848 110.848a31.936 31.936 0 0 0 54.656-22.592 32 32 0 0 0-9.344-22.656l-110.912-110.848zM480 624c0-79.36 64.64-144 144-144S768 544.64 768 624 703.36 768 624 768 480 703.36 480 624z m320-360a32 32 0 0 0-32-32H256a32 32 0 0 0 0 64h512a32 32 0 0 0 32-32zM256 422.656a32 32 0 0 0 0 64h96a32 32 0 0 0 0-64H256z" fill="" p-id="4745"></path></svg>

After

Width:  |  Height:  |  Size: 1000 B

BIN
src/assets/images/overview1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
src/assets/images/overview2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/overview3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/overview4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
src/assets/images/use1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/images/use2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/images/use3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

297
src/assets/styles/bigScreen.scss

@ -1,6 +1,5 @@
// 媒体查询适配大于2000px分辨率的大屏样式
// 媒体查询适配大于2000px分辨率的大屏样式-element样式
@media (min-width: 2000px) {
// element样式
.el-tabs--top .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
@ -144,6 +143,15 @@
.el-range-editor--medium .el-range__close-icon {
line-height: 0.28rem !important;
}
.el-range-editor--small.el-input__inner {
height: 0.32rem !important;
}
.el-range-editor--small .el-range-input {
font-size: 0.13rem !important;
}
.el-tag--mini .el-icon-close {
margin-left: -0.03rem !important;
}
.el-date-editor .el-range__icon {
font-size: 0.14rem !important;
margin-left: -0.05rem !important;
@ -151,7 +159,7 @@
}
.el-input__icon {
width: 0.25rem !important;
line-height: 0.4rem !important;
line-height: 0.32rem !important;
}
.el-range-editor--medium .el-range-input {
font-size: 0.14rem !important;
@ -183,7 +191,10 @@
}
.el-picker-panel,
.el-date-range-picker .el-picker-panel__body {
min-width: 5.13rem !important;
// min-width: 5.13rem !important;
}
.el-date-picker {
width: 3.22rem !important;
}
.el-date-range-picker__time-header {
font-size: 0.12rem !important;
@ -192,6 +203,29 @@
.el-date-range-picker__time-picker-wrap {
padding: 0 0.05rem !important;
}
.el-date-range-picker .el-picker-panel__body {
min-width: 5.13rem !important;
}
.el-date-range-picker {
width: 6.46rem !important;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
width: 3.5rem !important;
}
.el-date-editor--monthrange.el-input,
.el-date-editor--monthrange.el-input__inner {
width: 3rem !important;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 2.2rem !important;
}
.el-year-table td {
padding: 0.2rem 0.03rem !important;
}
.el-input--small {
font-size: 0.13rem !important;
}
@ -224,6 +258,31 @@
height: 0.24rem !important;
line-height: 0.24rem !important;
}
.el-year-table td .cell {
width: 0.48rem !important;
height: 0.32rem !important;
line-height: 0.32rem !important;
}
.el-year-table {
font-size: 0.12rem !important;
margin: -0.01rem !important;
}
.el-select-dropdown {
margin: 0.05rem 0 !important;
border-radius: 0.04rem !important;
}
.el-select-dropdown__wrap,
.el-scrollbar__wrap {
margin-bottom: -0.1rem !important;
margin-right: -0.1rem !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
right: 0.2rem !important;
font-size: 0.12rem !important;
}
.el-select-dropdown__wrap {
max-height: 2.74rem !important;
}
.el-date-table td.start-date div {
margin-left: 0.05rem !important;
border-top-left-radius: 0.15rem !important;
@ -242,6 +301,13 @@
padding: 0.04rem 0 !important;
position: relative;
}
.el-pager li {
padding: 0 0.04rem !important;
font-size: 0.13rem !important;
min-width: 0.355rem !important;
height: 0.28rem !important;
line-height: 0.28rem !important;
}
.el-picker-panel__footer {
padding: 0.04rem !important;
}
@ -273,7 +339,7 @@
line-height: 0.36rem !important;
}
.el-input--suffix .el-input__inner {
padding-right: 0.3rem !important;
padding: 0 0.3rem !important;
}
.el-input--medium {
font-size: 0.14rem !important;
@ -293,6 +359,7 @@
width: 0.16rem !important;
line-height: 0.16rem !important;
right: 0rem !important;
top: -0.01rem !important;
}
.el-tag--small {
height: 0.24rem !important;
@ -320,7 +387,7 @@
font-size: 0.14rem !important;
}
.el-table--medium .el-table__cell {
padding: 10px 0;
padding: 0.01rem 0 !important;
}
.el-table .cell {
line-height: 0.23rem !important;
@ -358,6 +425,9 @@
height: 0.28rem !important;
line-height: 0.28rem !important;
}
.el-tree-node__label {
font-size: 0.14rem !important;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
@ -365,6 +435,12 @@
min-width: 0.3rem !important;
border-radius: 0.02rem !important;
}
.pagination-container {
padding: 0.32rem 0.16rem !important;
height: 0.32rem !important;
margin-bottom: 0.1rem !important;
margin-top: 0.15rem !important;
}
.el-pagination .btn-prev .el-icon,
.el-pagination .btn-next .el-icon {
font-size: 0.12rem !important;
@ -400,7 +476,168 @@
font-size: 0.14rem !important;
padding-right: 0.08rem !important;
}
.el-form-item--small .el-form-item__label {
line-height: 0.4rem !important;
}
.el-form-item__label {
font-size: 0.14rem !important;
}
.el-date-picker__header-label {
font-size: 0.16rem !important;
padding: 0 0.05rem !important;
line-height: 0.22rem !important;
}
.el-month-table td .cell {
width: 0.6rem !important;
height: 0.36rem !important;
line-height: 0.36rem !important;
border-radius: 0.18rem !important;
}
.el-month-table {
font-size: 0.12rem !important;
}
.el-month-table td {
padding: 0.08rem 0px !important;
}
.mb8 {
margin-bottom: 0.08rem !important;
}
.el-month-table td div {
height: 0.48rem !important;
padding: 0.06rem 0 !important;
}
.el-date-picker .el-picker-panel__content {
width: 2.92rem !important;
}
.el-cascader-panel {
border-radius: 0.04rem !important;
font-size: 0.14rem !important;
}
.el-cascader-menu {
min-width: 1.8rem !important;
}
.el-cascader-menu__wrap {
height: 2.04rem !important;
}
.el-cascader-menu__list {
padding: 0.06rem 0 !important;
}
.el-cascader-node {
padding: 0 0.3rem 0 0.2rem !important;
height: 0.34rem !important;
line-height: 0.34rem !important;
}
.el-checkbox {
font-size: 0.14rem !important;
margin-right: 0.03rem !important;
}
.el-cascader-node__label {
padding: 0 0.1rem !important;
}
.el-checkbox__inner {
border-radius: 0.02rem !important;
width: 0.14rem !important;
height: 0.14rem !important;
}
.el-checkbox__inner::after {
height: 0.07rem !important;
left: 0.04rem !important;
top: 0.01rem !important;
}
.el-checkbox__inner::after {
height: 0.07rem !important;
left: 0.04rem !important;
top: 0.01rem !important;
width: 0.03rem !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
height: 0.02rem !important;
top: 0.05rem !important;
}
.el-dialog {
border-radius: 0.1rem !important;
border: 0.02rem solid #005fbf !important;
}
.el-dialog__body {
padding: 0.3rem 0.2rem !important;
font-size: 0.14rem !important;
}
.el-form-item {
margin-bottom: 0.22rem !important;
}
.el-dialog__title {
width: 2.84rem !important;
height: 0.45rem !important;
font-size: 0.2rem !important;
line-height: 0.25rem !important;
}
.el-dialog__footer {
padding: 0.2rem !important;
padding-top: 0.1rem !important;
}
.el-form-item__content {
line-height: 0.4rem !important;
font-size: 0.14rem !important;
}
.el-message-box__message p {
line-height: 0.24rem !important;
}
.el-dialog .el-row {
margin-bottom: 0.1rem !important;
}
.el-dialog__headerbtn {
top: 0.32rem !important;
right: 0.2rem !important;
font-size: 0.16rem !important;
}
.el-dialog__header {
padding: 0.2rem !important;
padding-bottom: 0.1rem !important;
}
.el-dialog__headerbtn .el-dialog__close {
font-size: 0.25rem !important;
}
.el-dropdown-menu--medium .el-dropdown-menu__item {
line-height: 0.3rem !important;
padding: 0 0.17rem !important;
font-size: 0.14rem !important;
}
.vue-treeselect--searchable .vue-treeselect__input-container {
padding-left: 0.05rem !important;
padding-right: 0.05rem !important;
}
.vue-treeselect__x-container,
.vue-treeselect__control-arrow-container {
width: 0.2rem !important;
}
.vue-treeselect__x {
width: 0.08rem !important;
height: 0.08rem !important;
}
.vue-treeselect__control-arrow,
.vue-treeselect__option-arrow {
width: 0.09rem !important;
height: 0.09rem !important;
}
.vue-treeselect__option-arrow-container,
.vue-treeselect__option-arrow-placeholder {
width: 0.2rem !important;
}
.vue-treeselect div,
.vue-treeselect span {
line-height: 0.36rem !important;
}
.el-dropdown-menu--mini .el-dropdown-menu__item {
line-height: 0.24rem !important;
padding: 0 0.1rem !important;
font-size: 0.12rem !important;
}
// 弹框input宽度对齐
.el-form-item--medium .el-form-item__content {
width: 100%;
}
}
@media (min-width: 2000px) {
// 页面公共样式
.analysis-table th {
height: 0.5rem !important;
@ -428,4 +665,50 @@
font-size: 0.24rem !important;
}
}
.choice {
margin-left: 0.42rem !important;
.mr20 {
font-size: 0.16rem !important;
width: 0.48rem !important;
border-radius: 0.14rem !important;
margin-right: 0.1rem !important;
}
}
.timeStyle {
border-radius: 0.14rem !important;
}
.special-div {
.special-top {
padding: 0.04rem 0.26rem 0.04rem 0 !important;
min-height: 0.37rem !important;
}
.special-top::after {
height: 0.01rem !important;
top: -0.03rem !important;
}
.special-top::before {
height: 0.01rem !important;
bottom: -0.03rem !important;
}
.special-title {
padding-left: 0.36rem !important;
font-size: 0.2rem !important;
line-height: 0.23rem !important;
background-size: 1.4rem 0.35rem !important;
background-position: 0px -0.03rem !important;
}
.special-title::before {
width: 0.34rem !important;
height: 0.13rem !important;
}
}
// 首页
.project-data {
margin: 0.16rem 0 !important;
}
.form-header {
font-size: 0.15rem !important;
margin: 0.08rem 0.1rem 0.25rem 0.1rem !important;
padding-bottom: 0.05rem !important;
}
}

2
src/assets/styles/index.scss

@ -380,7 +380,7 @@ table {
border-spacing: 0;
}
table tr {
height: 45px !important;
height: 45px;
color: #ffffff;
}
table th {

22
src/components/Crontab/index.vue

@ -70,33 +70,33 @@
<p class="title">时间表达式</p>
<table>
<thead>
<th v-for="item of tabTitles" width="40" :key="item">{{item}}</th>
<th v-for="item of tabTitles" width="40" :key="item">{{ item }}</th>
<th>Cron 表达式</th>
</thead>
<tbody>
<td>
<span>{{crontabValueObj.second}}</span>
<span>{{ crontabValueObj.second }}</span>
</td>
<td>
<span>{{crontabValueObj.min}}</span>
<span>{{ crontabValueObj.min }}</span>
</td>
<td>
<span>{{crontabValueObj.hour}}</span>
<span>{{ crontabValueObj.hour }}</span>
</td>
<td>
<span>{{crontabValueObj.day}}</span>
<span>{{ crontabValueObj.day }}</span>
</td>
<td>
<span>{{crontabValueObj.month}}</span>
<span>{{ crontabValueObj.month }}</span>
</td>
<td>
<span>{{crontabValueObj.week}}</span>
<span>{{ crontabValueObj.week }}</span>
</td>
<td>
<span>{{crontabValueObj.year}}</span>
<span>{{ crontabValueObj.year }}</span>
</td>
<td>
<span>{{crontabValueString}}</span>
<span>{{ crontabValueString }}</span>
</td>
</tbody>
</table>
@ -329,7 +329,7 @@ export default {
},
},
computed: {
crontabValueString: function() {
crontabValueString: function () {
let obj = this.crontabValueObj;
let str =
obj.second +
@ -363,7 +363,7 @@ export default {
//
},
},
mounted: function() {
mounted: function () {
this.resolveExp();
},
};

4
src/views/aircAndWindc/awSysMonitor/index.vue

@ -984,8 +984,8 @@ export default {
}
)
.then(() => {
console.log("打印id",id)
// this.handleSwitchOperationConrol(id, value);
// console.log("id",id)
this.handleSwitchOperationConrol(id, value);
})
.catch(() => {
//

37
src/views/alarm/alarmCode/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="消息编码" prop="msgCode">
<el-input
@ -213,8 +212,8 @@
/>
<!-- 添加或报警编码对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules" >
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="消息编码" prop="msgCode">
@ -494,3 +493,35 @@ export default {
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 110px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.1rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

36
src/views/alarm/alarmRecord/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="设备名称" prop="deviceName">
<el-input
@ -203,8 +202,8 @@
/>
<!-- 修改报警记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="设备名称" prop="deviceName">
@ -481,3 +480,34 @@ export default {
color: rgb(7, 214, 110);
}
</style>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 140px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.4rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

38
src/views/alarm/alarmRule/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="报警类型" prop="alarmType">
<el-select
@ -243,8 +242,8 @@
/>
<!-- 添加或报警规则对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="设备名称" prop="ledgerId">
@ -670,7 +669,7 @@ export default {
this.getCpmIdList(this.form.ledgerId);
}
//
this.form.cpmId = ""
this.form.cpmId = "";
},
//
getCpmIdList(id) {
@ -819,3 +818,34 @@ export default {
color: red;
}
</style>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 150px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.5rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

56
src/views/bigScreen/bigScreen.vue

@ -395,7 +395,7 @@ export default {
-webkit-background-clip: text;
color: transparent;
}
.day{
.day {
position: absolute;
top: 0.43rem;
left: 5rem;
@ -581,4 +581,58 @@ export default {
}
}
}
// 2000px-element
@media (min-width: 2000px) {
.loginD {
padding-bottom: 0.2rem !important;
.title-left {
width: calc(100% - 0.3rem) !important;
}
.special-div {
margin-bottom: 0.17rem !important;
}
.screen-page {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
width: calc(100% - 1.22rem) !important;
margin-top: 0.86rem !important;
.screen-left {
width: 30% !important;
.left-Indicator {
position: absolute;
right: -0.9rem !important;
width: 0.6rem !important;
height: 0.4rem !important;
}
}
.screen-right {
width: 30% !important;
.message {
margin-top: 0.29rem !important;
font-size: 0.16rem !important;
.message-li {
width: calc(33.33% - 0.32rem) !important;
margin: 0 0.16rem !important;
.message-data {
font-size: 0.2rem !important;
margin-bottom: 0.3rem !important;
}
.message-img {
width: 1rem !important;
height: 0.99rem !important;
}
}
}
.right-Indicator {
position: absolute;
left: -0.9rem !important;
width: 0.6rem !important;
height: 0.4rem !important;
}
}
}
}
}
</style>

12
src/views/bigScreen/components/allEnergy.vue

@ -17,7 +17,7 @@ export default {
return {
chartInstance: null,
option: {},
energyMes:{}
energyMes: {},
};
},
watch: {
@ -29,7 +29,7 @@ export default {
this.energyMes = newVal;
this.$nextTick(() => {
this.echartsData();
})
});
}
},
},
@ -426,4 +426,12 @@ export default {
height: 200px;
margin-top: 20px;
}
// 2000px
@media (min-width: 2000px) {
.charts {
margin-top: 0.3rem !important;
height: 2.4rem !important;
margin-top: 0.2rem !important;
}
}
</style>

21
src/views/bigScreen/components/coldSysEnergy.vue

@ -478,6 +478,7 @@ export default {
this.useForm.useData,
this.useForm.maxData
);
const titleFontSize = this.$refs.sys_charts.offsetWidth / 25;
const adapterOption = {
series: [
{
@ -508,7 +509,7 @@ export default {
label: {
show: true,
position: "center", //
offset: [0, -5], // 10
offset: [0, -titleFontSize * 0.6], // 10
formatter: function () {
// HTML 使 rich
return `{line|${that.useForm.useData}}`;
@ -516,7 +517,7 @@ export default {
rich: {
line: {
color: "#fff", //
fontSize: 20, //
fontSize: titleFontSize, //
lineHeight: 0, //
},
},
@ -589,10 +590,11 @@ export default {
justify-content: center;
width: 100% !important;
height: 100%;
padding: 10px 0;
.sys_charts {
width: 100%;
height: 1.6rem;
height: 160px;
}
.eer {
width: 80%;
@ -605,4 +607,17 @@ export default {
margin: 10px 0;
}
}
// 2000px
@media (min-width: 2000px) {
.energy_content {
padding: 0.1rem 0 !important;
.sys_charts {
height: 1.6rem !important;
}
.eer {
font-size: 0.18rem !important;
margin: 0.2rem 0 !important;
}
}
}
</style>

14
src/views/bigScreen/components/useElect.vue

@ -255,11 +255,23 @@ export default {
.sys_charts {
width: 100%;
height: 2rem;
height: 230px;
}
.eer {
font-size: 18px;
margin-top: 25px;
}
}
// 2000px
@media (min-width: 2000px) {
.energy_content {
.sys_charts {
height: 2.4rem !important;
}
.eer {
font-size: 0.18rem !important;
margin-top: 0.25rem !important;
}
}
}
</style>

24
src/views/bigScreen/components/waterSysEnergy.vue

@ -460,7 +460,7 @@ export default {
console.log("两个系统参数返回", res);
if (res.code == 200) {
this.energyMes = res.rows[0];
this.useForm.maxData = 50; //
this.useForm.maxData = 50; //
const { totalEle, totalWater } = res.rows[0];
if (totalEle === 0 || totalWater === 0) {
this.useForm.useData = 0;
@ -479,6 +479,7 @@ export default {
this.useForm.useData,
this.useForm.maxData
);
const titleFontSize = this.$refs.sys_charts.offsetWidth / 25;
const adapterOption = {
series: [
{
@ -509,7 +510,7 @@ export default {
label: {
show: true,
position: "center", //
offset: [0, -5], // 10
offset: [0, -titleFontSize * 0.6], // 10
formatter: function () {
// HTML 使 rich
return `{line|${that.useForm.useData}}`;
@ -517,7 +518,7 @@ export default {
rich: {
line: {
color: "#fff", //
fontSize: 20, //
fontSize: titleFontSize, //
lineHeight: 0, //
},
},
@ -590,10 +591,10 @@ export default {
justify-content: center;
width: 100% !important;
height: 100%;
padding: 10px 0;
.sys_charts {
width: 100%;
height: 1.6rem;
height: 160px;
}
.eer {
width: 80%;
@ -606,4 +607,17 @@ export default {
margin: 10px 0;
}
}
// 2000px
@media (min-width: 2000px) {
.energy_content {
padding: 0.1rem 0 !important;
.sys_charts {
height: 1.6rem !important;
}
.eer {
font-size: 0.18rem !important;
margin: 0.2rem 0 !important;
}
}
}
</style>

2
src/views/centerairC/deviceStrategy/index.vue

@ -370,7 +370,7 @@ export default {
position: relative;
width: calc(33.33% - 40px);
margin: 0 20px;
min-height: 300px;
min-height: 350px;
background-image: url(../../../assets/images/strategy-border.png);
background-size: 100% 100%;
border-bottom: 1px solid #1587cc;

2
src/views/centerairC/enSourceAnalysis/components/deviceEnergy.vue

@ -60,7 +60,6 @@
v-model="startYear"
type="year"
placeholder="选择开始年份"
style="width: 180px"
value-format="yyyy"
>
</el-date-picker>
@ -69,7 +68,6 @@
v-model="endYear"
type="year"
placeholder="选择结束年份"
style="width: 180px"
value-format="yyyy"
>
</el-date-picker>

2
src/views/centerairC/enSourceAnalysis/components/equipment.vue

@ -59,7 +59,6 @@
v-model="startYear"
type="year"
placeholder="选择开始年份"
style="width: 180px"
value-format="yyyy"
>
</el-date-picker>
@ -68,7 +67,6 @@
v-model="endYear"
type="year"
placeholder="选择结束年份"
style="width: 180px"
value-format="yyyy"
>
</el-date-picker>

2
src/views/centerairC/enSourceAnalysis/components/machineRoom.vue

@ -53,7 +53,6 @@
v-model="startYear"
type="year"
placeholder="选择开始年份"
style="width: 180px"
value-format="yyyy"
>
</el-date-picker>
@ -62,7 +61,6 @@
v-model="endYear"
type="year"
placeholder="选择结束年份"
style="width: 180px"
value-format="yyyy"
>
</el-date-picker>

19
src/views/centerairC/timeSwitch/index.vue

@ -102,28 +102,28 @@ export default {
// console.log("child.pointName", child.pointName);
if (child.pointName) {
// -
if (child.pointName == `定时${index + 1}开_时`) {
if (child.pointName.includes(`开_时`)) {
// console.log("-·························");
delayItem.delayOpenHour = child.curValue;
delayItem.delayOpenHourId = child.cpmId;
}
// -
else if (
child.pointName.includes(`定时${index + 1}开_分`)
child.pointName.includes(`开_分`)
) {
delayItem.delayOpenMinute = child.curValue;
delayItem.delayOpenMinuteId = child.cpmId;
}
// -
else if (
child.pointName.includes(`定时${index + 1}关_时`)
child.pointName.includes(`关_时`)
) {
delayItem.delayCloseHour = child.curValue;
delayItem.delayCloseHourId = child.cpmId;
}
// -
else if (
child.pointName.includes(`定时${index + 1}关_分`)
child.pointName.includes(`关_分`)
) {
delayItem.delayCloseMinute = child.curValue;
delayItem.delayCloseMinuteId = child.cpmId;
@ -419,13 +419,7 @@ export default {
border-radius: 10px;
font-size: 14px;
.device-li {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 0;
color: #abcdfc;
border-bottom: 1px dashed #0349ac;
flex: none !important;
.device-name {
flex: 1;
white-space: nowrap;
@ -441,9 +435,6 @@ export default {
}
}
}
.device-li:nth-child(1) {
color: #9ca3af;
}
}
// 2000px
@media (min-width: 2000px) {

460
src/views/components/aircAndWindcMeter.vue

@ -0,0 +1,460 @@
<template>
<div class="sys_content">
<div class="charts" ref="chart_ref"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: {
subData: {
type: Array,
required: true,
},
},
data() {
return {
chartInstance: null,
option: {},
chartData1: "",
chartData2: "",
allData: "",
};
},
watch: {
subData: {
immediate: true, //
handler(newVal) {
console.log("检测到传功来的数据", this.subData);
if (Object.keys(newVal).length > 0) {
console.log("newval", newVal);
let data = newVal;
this.chartData1 = "";
this.chartData2 = "";
data.forEach((item) => {
if (item.name.includes("运行")) {
this.chartData1 = parseInt(item.value);
}
if (item.name.includes("停止")) {
this.chartData2 = parseInt(item.value);
}
//
this.allData = this.chartData1 + this.chartData2;
});
this.$nextTick(() => {
// // ECharts
// if (this.chartInstance) {
// this.chartInstance.dispose();
// }
// //
// this.initChart();
this.echartsData();
});
}
},
},
},
mounted() {
this.initChart();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
//
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
// 线+ + 线
screenAdapter() {
//,2.6 mes_ref
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
//optionoption
const adapterOption = {};
//.chartInstanceoptiondataoption
this.chartInstance.setOption(adapterOption);
//resize
this.chartInstance.resize();
},
echartsData() {
console.log("父组件传过来的值", this.subData);
if (this.subData) {
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
const colorList = ["#0882ff", "#ffe21e"]; //
const adapterOption = {
//
title: {
subtextStyle: {
fontSize: titleFontSize * 2,
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
itemWidth: titleFontSize,
itemHeight: titleFontSize,
itemGap: titleFontSize * 2,
formatter: function (name) {
var arr = [];
let data = adapterOption.series[0].data;
var index = 0;
var total = 0;
//
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
index = i;
}
}
// 0
var percentage =
data[index].value === 0
? "0.00"
: ((data[index].value / total) * 100).toFixed(2);
arr.push(
"{name|" + name + "}",
"{text|" + " " + ":" + " " + "}",
"{value|" + data[index].value + " " + "}",
"{percentage|" + " " + percentage + "%}"
);
return arr.join("");
},
textStyle: {
color: function (name) {
const dataSeries = adapterOption.series[1].data; // data
const index = dataSeries.findIndex(
(item) => item.name === name
);
const colorList = ["#0882ff", "#ffe21e"]; //
return colorList[index];
},
rich: {
name: {
align: "left",
fontSize: titleFontSize * 2,
},
text: {
align: "left",
fontSize: titleFontSize * 2,
},
value: {
align: "left",
fontSize: titleFontSize * 2,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
percentage: {
align: "left",
fontSize: titleFontSize * 2,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
},
},
},
series: [
{
name: "风柜系统:",
data: [
{ value: this.chartData1, name: "运行数" },
{ value: this.chartData2, name: "停止数" },
],
itemStyle: {
color: function (params) {
var colorList = ["#0882ff", "#ffe21e"];
return colorList[params.dataIndex];
},
// borderWidth: 5,
borderColor: "#002a56",
},
},
{
data: [
{ value: this.chartData1, name: "运行数" },
{ value: this.chartData2, name: "停止数" },
],
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
} else {
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
const adapterOption = {
//
title: {
subtextStyle: {
fontSize: titleFontSize * 2,
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
itemWidth: titleFontSize,
itemHeight: titleFontSize,
itemGap: titleFontSize * 2,
formatter: function (name) {
var arr = [];
let data = adapterOption.series[0].data;
var index = 0;
var total = 0;
//
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
index = i;
}
}
// 0
var percentage =
data[index].value === 0
? "0.00"
: ((data[index].value / total) * 100).toFixed(2);
arr.push(
"{name|" + name + "}",
"{text|" + " " + ":" + " " + "}",
"{value|" + data[index].value + " " + "}",
"{percentage|" + " " + percentage + "%}"
);
return arr.join("");
},
textStyle: {
color: function (name) {
const dataSeries = adapterOption.series[1].data; // data
const index = dataSeries.findIndex(
(item) => item.name === name
);
const colorList = ["#0882ff", "#ffe21e"]; //
return colorList[index];
},
rich: {
name: {
align: "left",
fontSize: titleFontSize * 1.6,
},
text: {
align: "left",
fontSize: titleFontSize * 1.6,
},
value: {
align: "left",
fontSize: titleFontSize * 1.6,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
percentage: {
align: "left",
fontSize: titleFontSize * 1.6,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
},
},
},
series: [
{
name: "风柜系统:",
data: [
{ value: 0, name: "运行数" },
{ value: 0, name: "停止数" },
],
itemStyle: {
color: function (params) {
var colorList = ["#0882ff", "#ffe21e"];
return colorList[params.dataIndex];
},
// borderWidth: 5,
borderColor: "#002a56",
},
},
{
data: [
{ value: 0, name: "运行数" },
{ value: 0, name: "停止数" },
],
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
}
},
//chartInstance
initChart() {
this.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = {
//
title: {
subtext: "运行状态",
textStyle: {
color: "#ffffff",
},
subtextStyle: {
color: "#ffffff",
},
textAlign: "center",
x: "49%",
y: "36%", //
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
//
legend: {
orient: "horizontal", //
bottom: 0, //
left: "center", //
//
textStyle: {
color: "#ffffff",
// fontSize: 18,
},
},
series: [
//
{
name: "风柜系统:",
type: "pie",
radius: ["60%", "72%"],
center: ["50%", "44%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
itemStyle: {
color: function (params) {
var colorList = ["#0882ff", "#ffe21e"];
return colorList[params.dataIndex];
},
borderWidth: 5,
borderColor: "#002a56",
},
z: 10, //,
},
//
{
type: "pie",
radius: ["50%", "62%"],
center: ["50%", "44%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
silent: true,
labelLine: {
show: false,
},
//
itemStyle: {
color: function (colors) {
var colorList = ["#02427f", "#385f5c"];
return colorList[colors.dataIndex];
},
},
z: 15,
},
//
{
//
color: ["#305376"],
type: "pie",
silent: true, //
// hoverAnimation: false, //
// 使emphasis.scale true
// silent: true,
// center
radius: ["38%", "39%"],
center: ["50%", "44%"],
label: {
show: false,
},
data: [
{
value: 0,
name: "",
itemStyle: {},
},
],
},
//
{
//
type: "pie",
silent: true, //
// hoverAnimation: false, //
// 使emphasis.scale true
// silent: true,
// center
radius: ["0%", "38%"],
center: ["50%", "44%"],
label: {
show: false,
},
data: [
{
value: 0,
name: "",
itemStyle: {},
},
],
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: "#002a55" }, // 0%
{ offset: 1, color: "#0a457a" }, // 100%
],
global: false, // false
},
},
},
],
};
//
this.chartInstance.setOption(this.option, true);
},
},
};
</script>
<style lang="scss" scoped>
.sys_content {
padding: 20px;
.charts {
width: 100%;
height: 250px;
}
}
// 2000px
@media (min-width: 2000px) {
.sys_content {
padding: 0.2rem !important;
.charts {
width: 100%;
height: 2.5rem !important;
}
}
}
</style>

142
src/views/components/hotWater.vue

@ -0,0 +1,142 @@
<template>
<div class="card-div">
<div class="card-li room-temp">
<div class="card-header">
<h2 class="card-title">回水平均温度</h2>
<div class="icon">
<i class="fas fa-home"></i>
</div>
</div>
<div class="thermometer">
<div class="temprogress" :style="{ height: temData1 * 2 + '%' }"></div>
</div>
<div class="temperature">{{temData1}}</div>
</div>
<div class="card-li amb-temp">
<div class="card-header">
<h2 class="card-title">供水平均温度</h2>
<div class="icon">
<i class="fas fa-home"></i>
</div>
</div>
<div class="thermometer">
<div class="temprogress" :style="{ height: temData2 * 2 + '%' }"></div>
</div>
<div class="temperature">{{temData2}}</div>
</div>
</div>
</template>
<script>
export default {
props: {
subData: {
type: Array,
required: true,
},
},
data() {
return {
temData1: "",
temData2: "",
};
},
watch: {
subData: {
immediate: true, //
handler(newVal) {
console.log("检测到传功来的数据", this.subData);
if (Object.keys(newVal).length > 0) {
console.log("newval", newVal);
let data = newVal;
this.temData1 = "";
this.temData2 = "";
data.forEach((item) => {
if (item.name.includes("回水")) {
this.temData1 = parseInt(item.value);
}
if (item.name.includes("供水")) {
this.temData2 = parseInt(item.value);
}
});
}
},
},
},
};
</script>
<style lang="scss" scoped>
.card-div {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.card-li {
width: 50%;
padding: 0.2rem 0;
display: flex;
flex-direction: column;
align-items: center;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.1rem;
.card-title {
font-size: 15px;
font-weight: 600;
color: #ffffff;
}
}
.temperature {
font-size: 20px;
font-weight: 700;
position: relative;
display: inline-block;
}
.thermometer {
height: 180px;
width: 40px;
background: #3d5581;
border-radius: 20px;
margin: 0 auto 0.25rem;
overflow: hidden;
box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1);
position: relative;
}
.temprogress {
position: absolute;
bottom: 0;
width: 100%;
border-top-left-radius: 20px;
border-top-right-radius:20px;
background: linear-gradient(to top, #3498db, #2ecc71) !important;
}
}
}
@media (min-width: 2000px) {
.card-div {
.card-li {
.card-header {
.card-title {
font-size: 0.15rem !important;
}
}
.temperature {
font-size: 0.2rem !important;
}
.thermometer {
height: 1.8rem !important;
width: 0.4rem !important;
border-radius: 0.2rem !important;
}
.temprogress {
border-top-left-radius: 0.2rem !important;
border-top-right-radius:0.2rem !important;
}
}
}
}
</style>

460
src/views/components/temMeter.vue

@ -0,0 +1,460 @@
<template>
<div class="sys_content">
<div class="charts" ref="chart_ref"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: {
subData: {
type: Array,
required: true,
},
},
data() {
return {
chartInstance: null,
option: {},
chartData1: "",
chartData2: "",
allData: "",
};
},
watch: {
subData: {
immediate: true, //
handler(newVal) {
console.log("检测到传功来的数据", this.subData);
if (Object.keys(newVal).length > 0) {
console.log("newval", newVal);
let data = newVal;
this.chartData1 = "";
this.chartData2 = "";
data.forEach((item) => {
if (item.name.includes("在线")) {
this.chartData1 = parseInt(item.value);
}
if (item.name.includes("离线")) {
this.chartData2 = parseInt(item.value);
}
//
this.allData = this.chartData1 + this.chartData2;
});
this.$nextTick(() => {
// // ECharts
// if (this.chartInstance) {
// this.chartInstance.dispose();
// }
// //
// this.initChart();
this.echartsData();
});
}
},
},
},
mounted() {
this.initChart();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
//
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
// 线+ + 线
screenAdapter() {
//,2.6 mes_ref
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
//optionoption
const adapterOption = {};
//.chartInstanceoptiondataoption
this.chartInstance.setOption(adapterOption);
//resize
this.chartInstance.resize();
},
echartsData() {
console.log("父组件传过来的值", this.subData);
if (this.subData) {
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
const colorList = ["#ffe21e", "#08c8ff"]; //
const adapterOption = {
//
title: {
subtextStyle: {
fontSize: titleFontSize * 2,
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
itemWidth: titleFontSize,
itemHeight: titleFontSize,
itemGap: titleFontSize * 2,
formatter: function (name) {
var arr = [];
let data = adapterOption.series[0].data;
var index = 0;
var total = 0;
//
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
index = i;
}
}
// 0
var percentage =
data[index].value === 0
? "0.00"
: ((data[index].value / total) * 100).toFixed(2);
arr.push(
"{name|" + name + "}",
"{text|" + " " + ":" + " " + "}",
"{value|" + data[index].value + " " + "}",
"{percentage|" + " " + percentage + "%}"
);
return arr.join("");
},
textStyle: {
color: function (name) {
const dataSeries = adapterOption.series[1].data; // data
const index = dataSeries.findIndex(
(item) => item.name === name
);
const colorList = ["#2df499", "#08c8ff"]; //
return colorList[index];
},
rich: {
name: {
align: "left",
fontSize: titleFontSize * 2,
},
text: {
align: "left",
fontSize: titleFontSize * 2,
},
value: {
align: "left",
fontSize: titleFontSize * 2,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
percentage: {
align: "left",
fontSize: titleFontSize * 2,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
},
},
},
series: [
{
name: "温度监测:",
data: [
{ value: this.chartData1, name: "在线数" },
{ value: this.chartData2, name: "离线数" },
],
itemStyle: {
color: function (params) {
var colorList = ["#2df499", "#08c8ff"];
return colorList[params.dataIndex];
},
// borderWidth: 5,
borderColor: "#002a56",
},
},
{
data: [
{ value: this.chartData1, name: "在线数" },
{ value: this.chartData2, name: "离线数" },
],
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
} else {
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
const adapterOption = {
//
title: {
subtextStyle: {
fontSize: titleFontSize * 2,
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
itemWidth: titleFontSize,
itemHeight: titleFontSize,
itemGap: titleFontSize * 2,
formatter: function (name) {
var arr = [];
let data = adapterOption.series[0].data;
var index = 0;
var total = 0;
//
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
index = i;
}
}
// 0
var percentage =
data[index].value === 0
? "0.00"
: ((data[index].value / total) * 100).toFixed(2);
arr.push(
"{name|" + name + "}",
"{text|" + " " + ":" + " " + "}",
"{value|" + data[index].value + " " + "}",
"{percentage|" + " " + percentage + "%}"
);
return arr.join("");
},
textStyle: {
color: function (name) {
const dataSeries = adapterOption.series[1].data; // data
const index = dataSeries.findIndex(
(item) => item.name === name
);
const colorList = ["#2df499", "#08c8ff"]; //
return colorList[index];
},
rich: {
name: {
align: "left",
fontSize: titleFontSize * 1.6,
},
text: {
align: "left",
fontSize: titleFontSize * 1.6,
},
value: {
align: "left",
fontSize: titleFontSize * 1.6,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
percentage: {
align: "left",
fontSize: titleFontSize * 1.6,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
},
},
},
series: [
{
name: "温度监测:",
data: [
{ value: 0, name: "在线数" },
{ value: 0, name: "离线数" },
],
itemStyle: {
color: function (params) {
var colorList = ["#2df499", "#08c8ff"];
return colorList[params.dataIndex];
},
// borderWidth: 5,
borderColor: "#002a56",
},
},
{
data: [
{ value: 0, name: "在线数" },
{ value: 0, name: "离线数" },
],
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
}
},
//chartInstance
initChart() {
this.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = {
//
title: {
subtext: "在线状态",
textStyle: {
color: "#ffffff",
},
subtextStyle: {
color: "#ffffff",
},
textAlign: "center",
x: "49%",
y: "36%", //
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
//
legend: {
orient: "horizontal", //
bottom: 0, //
left: "center", //
//
textStyle: {
color: "#ffffff",
// fontSize: 18,
},
},
series: [
//
{
name: "温度监测:",
type: "pie",
radius: ["60%", "72%"],
center: ["50%", "44%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
itemStyle: {
color: function (params) {
var colorList = ["#2df499", "#08c8ff"];
return colorList[params.dataIndex];
},
borderWidth: 5,
borderColor: "#002a56",
},
z: 10, //,
},
//
{
type: "pie",
radius: ["50%", "62%"],
center: ["50%", "44%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
silent: true,
labelLine: {
show: false,
},
//
itemStyle: {
color: function (colors) {
var colorList = ["#09596b", "#024e7d"];
return colorList[colors.dataIndex];
},
},
z: 15,
},
//
{
//
color: ["#305376"],
type: "pie",
silent: true, //
// hoverAnimation: false, //
// 使emphasis.scale true
// silent: true,
// center
radius: ["38%", "39%"],
center: ["50%", "44%"],
label: {
show: false,
},
data: [
{
value: 0,
name: "",
itemStyle: {},
},
],
},
//
{
//
type: "pie",
silent: true, //
// hoverAnimation: false, //
// 使emphasis.scale true
// silent: true,
// center
radius: ["0%", "38%"],
center: ["50%", "44%"],
label: {
show: false,
},
data: [
{
value: 0,
name: "",
itemStyle: {},
},
],
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: "#002a55" }, // 0%
{ offset: 1, color: "#0a457a" }, // 100%
],
global: false, // false
},
},
},
],
};
//
this.chartInstance.setOption(this.option, true);
},
},
};
</script>
<style lang="scss" scoped>
.sys_content {
padding: 20px;
.charts {
width: 100%;
height: 250px;
}
}
// 2000px
@media (min-width: 2000px) {
.sys_content {
padding: 0.2rem !important;
.charts {
width: 100%;
height: 2.5rem !important;
}
}
}
</style>

14
src/views/components/viewEnergy.vue

@ -290,4 +290,18 @@ export default {
width: 100%;
height: 300px;
}
// 2000px
@media (min-width: 2000px) {
.right-table {
padding: 0.27rem 0.15rem 0.25rem 0.15rem !important;
}
.mr20 {
width: 0.92rem !important;
padding: 0.02rem !important;
}
.charts {
margin-top: 0.2rem !important;
height: 3rem !important;
}
}
</style>

22
src/views/components/waterTank.vue

@ -46,9 +46,9 @@ export default {
}
.water {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
bottom: 0.05rem;
left: 0.03rem;
width: 1.13rem;
/* 修改颜色表示,添加透明度 */
background-color: rgba(23, 106, 201);
overflow: hidden;
@ -64,7 +64,7 @@ export default {
height: 120px !important;
}
.water {
width: 110px !important;
width: 105px !important;
}
}
@ -78,11 +78,11 @@ export default {
height: 100px !important;
}
.water {
width: 90px !important;
width: 85px !important;
}
}
@media (min-width: 720px) and (max-width: 1240px){
@media (min-width: 720px) and (max-width: 1240px) {
.monitor-container {
width: 100px !important;
height: 100px !important;
@ -92,7 +92,7 @@ export default {
height: 110px !important;
}
.water {
width: 100px !important;
width: 96px !important;
}
}
@ -106,7 +106,13 @@ export default {
height: 90px !important;
}
.water {
width: 80px !important;
width: 76px !important;
}
}
// 2000px-element
@media (min-width: 2000px) {
.water {
bottom: 0rem !important;
}
}
</style>

37
src/views/device/comm/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="仪表类型" prop="mtType">
<el-select
@ -168,8 +167,8 @@
/>
<!-- 添加或修改设备参数对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="仪表类型" prop="mtType">
@ -446,3 +445,35 @@ export default {
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 110px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.1rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

37
src/views/device/gateway/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="网关名称" prop="gwName">
<el-input
@ -194,8 +193,8 @@
/>
<!-- 添加或修改网关对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="网关名称" prop="gwName">
@ -500,3 +499,35 @@ export default {
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 110px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.1rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

37
src/views/device/gather/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="90px"
>
<el-form-item label="仪表类型" prop="mtType">
<el-select
@ -305,8 +304,8 @@
/>
<!-- 添加或修改设备采集参数对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="仪表类型" prop="mtType">
@ -916,3 +915,35 @@ export default {
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 140px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.4rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

38
src/views/device/ledger/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="设备名称" prop="deviceName">
<el-input
@ -216,8 +215,8 @@
/>
<!-- 添加或修改设备台账对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="设备名称" prop="deviceName">
@ -421,7 +420,7 @@ export default {
isCollection: [
{ required: true, message: "请选择是否", trigger: "blur" },
],
modelSpecs:[
modelSpecs: [
{ required: true, message: "规格型号不能为空", trigger: "blur" },
],
isCalcEnergy: [
@ -596,3 +595,34 @@ export default {
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 150px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.5rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

36
src/views/device/maintenance/index.vue

@ -81,7 +81,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="设备类型" prop="deviceType">
<el-select
@ -287,8 +286,8 @@
/>
<!-- 添加或修改维保对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="维保类型" prop="maintainType">
@ -833,3 +832,34 @@ export default {
}
}
</style>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 110px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.1rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

39
src/views/device/qrCode/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="90px"
>
<el-form-item label="二维码状态" prop="status">
<el-select
@ -195,8 +194,8 @@
/>
<!-- 修改二维码对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="24">
<el-form-item label="二维码序列号" prop="serialNum">
@ -259,7 +258,6 @@
<el-dialog
title="二维码预览"
:visible.sync="isCodePreview"
width="500px"
append-to-body
>
<div class="dialog-img">
@ -270,14 +268,12 @@
<el-dialog
title="批量生成二维码"
:visible.sync="isMoreqrCode"
width="500px"
append-to-body
>
<el-form
ref="qrCodeForm"
:model="qrCodeForm"
:rules="qrCodeForms"
label-width="120px"
>
<el-row type="flex" justify="center">
<el-col :span="24">
@ -554,3 +550,34 @@ export default {
color: red;
}
</style>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 500px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 150px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.5rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

36
src/views/device/spare/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="90px"
>
<el-form-item label="备件序列号" prop="serialNum">
<el-input
@ -178,8 +177,8 @@
/>
<!-- 添加或修改备件库存对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="95px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="设备序列号" prop="serialNum">
@ -460,3 +459,34 @@ export default {
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 140px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.4rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

44
src/views/device/spareInOut/index.vue

@ -7,7 +7,6 @@
ref="queryForm"
size="small"
:inline="true"
label-width="90px"
>
<el-form-item label="备件序列号" prop="serialNum">
<el-input
@ -147,10 +146,10 @@
/>
<!-- 出入库对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" label-width="95px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form">
<el-table :data="dialogList">
<el-table-column label="备件名称" prop="spareName" width="200">
<el-table-column label="备件名称" prop="spareName" min-width="200">
<template slot-scope="scope">
<el-select
v-model="scope.row.sparePartsId"
@ -166,7 +165,7 @@
</el-select>
</template>
</el-table-column>
<el-table-column label="数量" width="150">
<el-table-column label="数量" min-width="150">
<template slot-scope="scope">
<el-input
placeholder="请填写"
@ -176,9 +175,9 @@
></el-input>
</template>
</el-table-column>
<el-table-column label="当前库存" width="150" prop="inventoryLevels">
<el-table-column label="当前库存" min-width="150" prop="inventoryLevels">
</el-table-column>
<el-table-column prop="data1" label="操作" width="130">
<el-table-column prop="data1" label="操作" min-width="130">
<template slot-scope="scope">
<div class="table-btn">
<div class="delete-btn">
@ -434,3 +433,34 @@ export default {
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 140px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.4rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

746
src/views/hotWater/dataAnalysis/components/analyzeMonth.vue

@ -0,0 +1,746 @@
<!-- 报表查询-用能查询-年数据 -->
<template>
<div class="analy-table">
<div class="findwatercharts" ref="findwater_ref"></div>
<!-- 表格 -->
<el-table
class="maintable"
header-align="center"
:data="tableData"
style="margin-right: 0.13rem"
:cell-style="tableRowStyle"
>
<el-table-column prop="itemType" label="类别" width="160" fixed="left">
</el-table-column>
<el-table-column align="center" prop="day01" label="1日" width="100">
</el-table-column>
<el-table-column align="center" prop="day02" label="2日" width="100">
</el-table-column>
<el-table-column align="center" prop="day03" label="3日" width="100">
</el-table-column>
<el-table-column align="center" prop="day04" label="4日" width="100">
</el-table-column>
<el-table-column align="center" prop="day05" label="5日" width="100">
</el-table-column>
<el-table-column align="center" prop="day06" label="6日" width="100">
</el-table-column>
<el-table-column align="center" prop="day07" label="7日" width="100">
</el-table-column>
<el-table-column align="center" prop="day08" label="8日" width="100">
</el-table-column>
<el-table-column align="center" prop="day09" label="9日" width="100">
</el-table-column>
<el-table-column align="center" prop="day10" label="10日" width="100">
</el-table-column>
<el-table-column align="center" prop="day11" label="11日" width="100">
</el-table-column>
<el-table-column align="center" prop="day12" label="12日" width="100">
</el-table-column>
<el-table-column align="center" prop="day13" label="13日" width="100">
</el-table-column>
<el-table-column align="center" prop="day14" label="14日" width="100">
</el-table-column>
<el-table-column align="center" prop="day15" label="15日" width="100">
</el-table-column>
<el-table-column align="center" prop="day16" label="16日" width="100">
</el-table-column>
<el-table-column align="center" prop="day17" label="17日" width="100">
</el-table-column>
<el-table-column align="center" prop="day18" label="18日" width="100">
</el-table-column>
<el-table-column align="center" prop="day19" label="19日" width="100">
</el-table-column>
<el-table-column align="center" prop="day20" label="20日" width="100">
</el-table-column>
<el-table-column align="center" prop="day21" label="21日" width="100">
</el-table-column>
<el-table-column align="center" prop="day22" label="22日" width="100">
</el-table-column>
<el-table-column align="center" prop="day23" label="23日" width="100">
</el-table-column>
<el-table-column align="center" prop="day24" label="24日" width="100">
</el-table-column>
<el-table-column align="center" prop="day25" label="25日" width="100">
</el-table-column>
<el-table-column align="center" prop="day26" label="26日" width="100">
</el-table-column>
<el-table-column align="center" prop="day27" label="27日" width="100">
</el-table-column>
<el-table-column align="center" prop="day28" label="28日" width="100">
</el-table-column>
<el-table-column align="center" prop="day29" label="29日" width="100">
</el-table-column>
<el-table-column align="center" prop="day30" label="30日" width="100">
</el-table-column>
<el-table-column align="center" prop="day31" label="31日" width="100">
</el-table-column>
<el-table-column
align="center"
prop="totalValue"
label="合计"
fixed="right"
width="130"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getDay, getMonth, getYear } from "@/utils/datetime";
import { queryMonthDatas } from "@/api/hotWater/dataAnalysis";
import * as echarts from "echarts";
export default {
props: {
chType: {
type: Number,
},
chTime: {
type: String,
},
chBuild: {
type: String,
},
currentIndex: {
type: Number,
},
},
data() {
return {
chartInstance1: null,
option1: {
series: [],
},
//
endTime: "",
//
tableData: [],
// 线
data1: [],
data2: [],
data3: [],
data4: [],
data5: [],
//
data6: [],
// x
data8: [],
};
},
watch: {
currentIndex: {
immediate: true,
deep: true,
handler(newVal, val) {
// console.log("", newVal);
this.$nextTick(function () {
console.log("子组件接受的type类型", this.chType);
console.log("子组件这时候有building吗", this.chBuild);
this.getMothData();
});
},
},
},
mounted() {
// this.getMothData();
this.initChart1();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
//mounted
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
tableRowStyle({ row, column, rowIndex, columnIndex }) {
// 1
if (columnIndex === 0) {
return "background-color:rgb(11 ,100, 201) !important;";
}
},
//
getMothData() {
//
//
// id
// select
if (this.chTime) {
this.endTime = this.chTime;
} else {
this.endTime = getMonth(0);
}
let params = {
curDate: this.endTime,
buildingId: this.chBuild,
type: this.chType,
};
console.log("月参数", params);
queryMonthDatas(params).then((res) => {
// console.log("", res);
if (res.code == 200 && res.rows.length > 0) {
var line1 = [];
var line2 = [];
var line3 = [];
var line4 = [];
this.tableData = res.rows;
// Object.values
line1 = Object.values(this.tableData[0]).slice(3, 35);
line2 = Object.values(this.tableData[1]).slice(3, 35);
line3 = Object.values(this.tableData[2]).slice(3, 35);
line4 = Object.values(this.tableData[3]).slice(3, 35);
// 线 filter
this.data1 = line1.filter(function (s) {
return s && s.trim();
});
this.data2 = line2.filter(function (s) {
return s && s.trim();
});
//
var line5 = line3.filter(function (s) {
return s && s.trim();
});
this.data3 = [];
this.data4 = [];
// %
line5.forEach((item) => {
this.data3.push(item.split("%").join(""));
});
var line6 = line4.filter(function (s) {
return s && s.trim();
});
line6.forEach((item) => {
this.data4.push(item.split("%").join(""));
});
// 线x
// tableData[0] [1] [2] [3],
//
let newObj = {};
for (let key in this.tableData[0]) {
if (this.tableData[0][key]) {
newObj[key] = this.tableData[0][key];
}
}
// console.log("", newObj);
// key
// Object.setPrototypeOf(this.newObj);
let data7 = Object.keys(newObj);
// console.log("x", data7);
//
let allArr = [
"day01",
"day02",
"day03",
"day04",
"day05",
"day06",
"day07",
"day08",
"day09",
"day10",
"day11",
"day12",
"day13",
"day14",
"day15",
"day16",
"day17",
"day18",
"day19",
"day20",
"day21",
"day22",
"day23",
"day24",
"day25",
"day26",
"day27",
"day28",
"day29",
"day30",
"day31",
];
//
function compare(data7, allArr) {
return data7.filter((v) => {
return allArr.includes(v);
});
}
// console.log("x", compare(data7, allArr));
// data7 xx
this.data8 = [];
compare(data7, allArr).forEach((item) => {
if (item) {
this.data8.push(item.split("day").join("") + "日");
}
});
// console.log("x", this.data8);
//
this.data6 = [];
this.data5 = this.tableData.forEach((item) => {
return this.data6.push(item.itemType);
});
// console.log("data1", this.data1);
// console.log("data2", this.data2);
// console.log("data3", this.data3);
// console.log("data4", this.data4);
// console.log("", this.data6);
//
var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
// console.log("Min1", Min1);
// console.log("Min2", Min2);
// console.log("Max1", Max1);
// console.log("Max2", Max2);
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
data: this.data6,
},
xAxis: {
data: this.data8,
},
yAxis: [
//y
{
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
},
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
},
],
series: [
{
name: this.data6[0],
data: this.data1,
},
{
name: this.data6[1],
data: this.data2,
},
{
name: this.data6[2],
data: this.data3,
},
{
name: this.data6[3],
data: this.data4,
},
],
};
//.chartInstanceoptiondataoption
this.chartInstance1.setOption(adapterOption);
//resize
this.chartInstance1.resize();
} else {
this.tableData = [];
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
data: [],
},
xAxis: {
data: [],
},
yAxis: [
//y
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
],
series: [
{
name: "",
data: [],
},
{
name: "",
data: [],
},
{
name: "",
data: [],
},
{
name: "",
data: [],
},
],
};
//.chartInstanceoptiondataoption
this.chartInstance1.setOption(adapterOption);
//resize
this.chartInstance1.resize();
}
});
},
//
outTable() {
// console.log("");
import("@/assets/excel/Export2Excel").then((excel) => {
const tHeader = [
"类别",
"1日",
"2日",
"3日",
"4日",
"5日",
"6日",
"7日",
"8日",
"9日",
"10日",
"11日",
"12日",
"13日",
"14日",
"15日",
"16日",
"17日",
"18日",
"19日",
"20日",
"21日",
"22日",
"23日",
"24日",
"25日",
"26日",
"27日",
"28日",
"29日",
"30日",
"31日",
"合计",
]; // excel
const filterVal = [
"itemType",
"day01",
"day02",
"day03",
"day04",
"day05",
"day06",
"day07",
"day08",
"day09",
"day10",
"day11",
"day12",
"day13",
"day14",
"day15",
"day16",
"day17",
"day18",
"day19",
"day20",
"day21",
"day22",
"day23",
"day24",
"day25",
"day26",
"day27",
"day28",
"day29",
"day30",
"day31",
"totalValue",
]; // excel
// const list = this.tableData;
// console.log(list)
if (this.chTime) {
this.endTime = this.chTime;
} else {
this.endTime = getMonth(0);
}
let params = {
curDate: this.endTime,
buildingId: this.chBuild,
type: this.chType,
};
console.log("月参数", params);
queryMonthDatas(params).then((res) => {
if (res.code == 200 && res.rows.length > 0) {
// console.log(res);
const data = this.formatJson(filterVal, res.rows);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //
data, //
filename: "月数据报表", //
autoWidth: true, //
});
}
});
});
},
//,
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "installDate") {
return format(v[j]);
} else {
return v[j];
}
})
);
},
//chartInstance1
// x 1 2 3
// x 1 2 3
initChart1() {
this.$emit("initChart1");
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
this.option1 = {
tooltip: {
trigger: "axis",
// hover
showDelay: 0, // ms
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(30, 69, 113, 0.15)",
width: "1",
},
},
},
legend: {
// icon
// icon: "cricle",
//
textStyle: {
color: "#ffff",
fontSize: 12, //
},
left: "56%",
top: "5%",
//
itemGap: 5,
itemWidth: 10,
itemHeight: 5,
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
//true
boundaryGap: true,
// x
axisLabel: {
// interval: 0, //x
// rotate: 30, //x30
color: "rgba(255, 255, 255, 1)",
fontSize: 14, //
},
axisTick: {
show: false, // 线
},
// x
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x线
},
yAxis: [
//y
{
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
fontSize: 14, //
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
//y线
splitNumber: 10,
},
{
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
fontSize: 14, //
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
//y线
splitNumber: 10,
},
],
series: [
{
type: "bar",
barWidth: 10, //
// tooltip: {
// valueFormatter: function (value) {
// return value + "";
// },
// },
//线
itemStyle: {
color: "#db9215",
lineStyle: {
color: "#db9215", //线
},
},
},
{
type: "bar",
// tooltip: {
// valueFormatter: function (value) {
// return value + "";
// },
// },
barWidth: 10, //
//线
itemStyle: {
color: "#1ab395",
lineStyle: {
color: "#1ab395", //线
},
},
},
{
type: "line",
tooltip: {
valueFormatter: function (value) {
return value + "%";
},
},
// stack: 'Total',
symbol: "circle",
//
symbolSize: 6,
yAxisIndex: 1,
//
showSymbol: false,
// data: this.data3,
//线
itemStyle: {
color: "#e23131",
lineStyle: {
color: "#e23131", //线
},
},
},
{
type: "line",
tooltip: {
valueFormatter: function (value) {
return value + "%";
},
},
// stack: 'Total',
symbol: "circle",
//
symbolSize: 6,
//y
yAxisIndex: 1,
//
showSymbol: false,
// data: this.data4,
//线
itemStyle: {
color: "#4a98ff",
lineStyle: {
color: "#4a98ff", //线
},
},
},
],
};
//
this.chartInstance1.setOption(this.option1, true);
},
// 线
screenAdapter() {
//,2.6 mes_ref
const titleFontSize = (this.$refs.findwater_ref.offsetWidth / 100) * 1.8;
//optionoption
const adapterOption = {
//fontSize
textStyle: {
fontSize: titleFontSize,
},
};
//.chartInstanceoptiondataoption
this.chartInstance1.setOption(adapterOption);
//resize
this.chartInstance1.resize();
},
},
};
</script>
<style scoped>
.findwatercharts {
margin-bottom: 0.35rem;
width: 100%;
height: 4.5rem;
/* background-color: pink; */
}
.analy-table >>> .el-table th.el-table__cell.is-leaf,
.analy-table >>> .el-table td.el-table__cell {
border-bottom: 1px solid #093769 !important;
border-right: 1px solid #093769 !important;
}
</style>

691
src/views/hotWater/dataAnalysis/components/analyzeYear.vue

@ -0,0 +1,691 @@
<!-- 报表查询-用能查询-年数据 -->
<template>
<div class="analy-table">
<div class="findwatercharts" ref="findwater_ref"></div>
<!-- 表格 -->
<el-table
class="maintable"
header-align="center"
:data="tableData"
style="margin-right: 0.13rem"
:cell-style="tableRowStyle"
>
<el-table-column
align="center"
prop="itemType"
label="类别"
width="160"
fixed="left"
>
</el-table-column>
<el-table-column align="center" prop="month01" label="1月">
</el-table-column>
<el-table-column align="center" prop="month02" label="2月">
</el-table-column>
<el-table-column align="center" prop="month03" label="3月">
</el-table-column>
<el-table-column align="center" prop="month04" label="4月">
</el-table-column>
<el-table-column align="center" prop="month05" label="5月">
</el-table-column>
<el-table-column align="center" prop="month06" label="6月">
</el-table-column>
<el-table-column align="center" prop="month07" label="7月">
</el-table-column>
<el-table-column align="center" prop="month08" label="8月">
</el-table-column>
<el-table-column align="center" prop="month09" label="9月">
</el-table-column>
<el-table-column align="center" prop="month10" label="10月">
</el-table-column>
<el-table-column align="center" prop="month11" label="11月">
</el-table-column>
<el-table-column align="center" prop="month12" label="12月">
</el-table-column>
<el-table-column
align="center"
prop="totalValue"
label="合计"
fixed="right"
width="100"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getYear } from "@/utils/datetime";
import { queryYearDatas } from "@/api/hotWater/dataAnalysis";
import * as echarts from "echarts";
export default {
props: {
chType: {
type: Number,
},
chTime: {
type: String,
},
chBuild: {
type: String,
},
currentIndex: {
type: Number,
},
},
data() {
return {
chartInstance1: null,
option1: {
series: [],
},
//
endTime: "",
//
tableData: [],
// 线
data1: [],
data2: [],
data3: [],
data4: [],
data5: [],
//
data6: [],
// x
data8: [],
};
},
watch: {
currentIndex: {
immediate: true,
deep: true,
handler(newVal, val) {
// console.log("", newVal);
this.$nextTick(function () {
this.getYearData();
});
},
},
},
mounted() {
// this.getYearData();
this.initChart1();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
//mounted
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
tableRowStyle({ row, column, rowIndex, columnIndex }) {
// 1
if (columnIndex === 0) {
return "background-color:rgb(11 ,100, 201) !important;";
}
},
//
getYearData() {
//
//
// id
// select
if (this.chTime) {
this.endTime = this.chTime;
} else {
this.endTime = getYear(0);
}
let params = {
curDate: this.endTime,
buildingId: this.chBuild,
type: this.chType,
};
console.log("年表格参数", params);
queryYearDatas(params).then((res) => {
// console.log("", res);
if (res.code == 200 && res.rows.length > 0) {
var line1 = [];
var line2 = [];
var line3 = [];
var line4 = [];
this.tableData = res.rows;
// Object.values
line1 = Object.values(this.tableData[0]).slice(3, 15);
line2 = Object.values(this.tableData[1]).slice(3, 15);
line3 = Object.values(this.tableData[2]).slice(3, 15);
line4 = Object.values(this.tableData[3]).slice(3, 15);
// 线 filter
this.data1 = line1.filter(function (s) {
return s && s.trim();
});
this.data2 = line2.filter(function (s) {
return s && s.trim();
});
//
var line5 = line3.filter(function (s) {
return s && s.trim();
});
this.data3 = [];
this.data4 = [];
// %
line5.forEach((item) => {
this.data3.push(item.split("%").join(""));
});
var line6 = line4.filter(function (s) {
return s && s.trim();
});
line6.forEach((item) => {
this.data4.push(item.split("%").join(""));
});
// 线x
// tableData[0] [1] [2] [3],
//
let newObj = {};
for (let key in this.tableData[0]) {
if (this.tableData[0][key]) {
newObj[key] = this.tableData[0][key];
}
}
// console.log("", newObj);
// key
// Object.setPrototypeOf(this.newObj);
let data7 = Object.keys(newObj);
// console.log("x", data7);
//
let allArr = [
"month01",
"month02",
"month03",
"month04",
"month05",
"month06",
"month07",
"month08",
"month09",
"month10",
"month11",
"month12",
];
//
function compare(data7, allArr) {
return data7.filter((v) => {
return allArr.includes(v);
});
}
// console.log("x", compare(data7, allArr));
// data7 xx
this.data8 = [];
compare(data7, allArr).forEach((item) => {
if (item) {
this.data8.push(item.split("month").join("") + "月");
}
});
// console.log("x", this.data8);
//
this.data6 = [];
this.data5 = this.tableData.forEach((item) => {
return this.data6.push(item.itemType);
});
// console.log("data1", this.data1);
// console.log("data2", this.data2);
// console.log("data3", this.data3);
// console.log("data4", this.data4);
// console.log("", this.data6);
//
var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
// console.log("Min1", Min1);
// console.log("Min2", Min2);
// console.log("Max1", Max1);
// console.log("Max2", Max2);
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
data: this.data6,
},
xAxis: {
data: this.data8,
},
yAxis: [
//y
{
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
},
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
},
],
series: [
{
name: this.data6[0],
data: this.data1,
},
{
name: this.data6[1],
data: this.data2,
},
{
name: this.data6[2],
data: this.data3,
},
{
name: this.data6[3],
data: this.data4,
},
],
};
//.chartInstanceoptiondataoption
this.chartInstance1.setOption(adapterOption);
//resize
this.chartInstance1.resize();
} else {
this.tableData = [];
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
data: [],
},
xAxis: {
data: [],
},
yAxis: [
//y
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
],
series: [
{
name: "",
data: [],
},
{
name: "",
data: [],
},
{
name: "",
data: [],
},
{
name: "",
data: [],
},
],
};
//.chartInstanceoptiondataoption
this.chartInstance1.setOption(adapterOption);
//resize
this.chartInstance1.resize();
}
});
},
//
outTable() {
// console.log("");
import("@/assets/excel/Export2Excel").then((excel) => {
const tHeader = [
"类别",
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
"合计",
]; // excel
const filterVal = [
"itemType",
"month01",
"month02",
"month03",
"month04",
"month05",
"month06",
"month07",
"month08",
"month09",
"month10",
"month11",
"month12",
"totalValue",
]; // excel
// const list = this.tableData;
// console.log(list)
if (this.chTime) {
this.endTime = this.chTime;
} else {
this.endTime = getYear(0);
}
let params = {
curDate: this.endTime,
buildingId: this.chBuild,
type: this.chType,
};
console.log("年表格参数", params);
queryYearDatas(params).then((res) => {
if (res.code == 200 && res.rows.length > 0) {
// console.log(res);
const data = this.formatJson(filterVal, res.rows);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //
data, //
filename: "年数据报表", //
autoWidth: true, //
});
}
});
});
},
//,
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "installDate") {
return format(v[j]);
} else {
return v[j];
}
})
);
},
//chartInstance1
// x 1 2 3
// x 1 2 3
initChart1() {
this.$emit("initChart1");
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
this.option1 = {
tooltip: {
trigger: "axis",
// hover
showDelay: 0, // ms
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(30, 69, 113, 0.15)",
width: "1",
},
},
},
legend: {
// icon
// icon: "cricle",
//
textStyle: {
color: "#ffff",
fontSize: 12, //
},
left: "56%",
top: "5%",
//
itemGap: 5,
itemWidth: 10,
itemHeight: 5,
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
//true
boundaryGap: true,
// x
axisLabel: {
// interval: 0, //x
// rotate: 30, //x30
color: "rgba(255, 255, 255, 1)",
fontSize: 14, //
},
axisTick: {
show: false, // 线
},
// x
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x线
},
yAxis: [
//y
{
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
fontSize: 14, //
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
//y线
splitNumber: 10,
},
{
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
fontSize: 14, //
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
//y线
splitNumber: 10,
},
],
series: [
{
type: "bar",
barWidth: 10, //
//线
itemStyle: {
color: "#db9215",
lineStyle: {
color: "#db9215", //线
},
},
},
{
type: "bar",
// tooltip: {
// valueFormatter: function (value) {
// return value + "";
// },
// },
tooltip: {
trigger: "axis",
formatter: function (params) {
//
var relVal = params[0].name; //x
if (params[0].seriesName == "2022年用水量") {
relVal =
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value +
" 吨";
} else if (params[0].seriesName == "用电量") {
relVal =
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value +
" 度";
} else if (params[0].seriesName == "耗能") {
relVal =
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value +
" 度/吨";
} else {
relVal =
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value +
" 次";
}
return relVal;
},
},
barWidth: 10, //
//线
itemStyle: {
color: "#1ab395",
lineStyle: {
color: "#1ab395", //线
},
},
},
{
type: "line",
tooltip: {
valueFormatter: function (value) {
return value + "%";
},
},
// stack: 'Total',
symbol: "circle",
//
symbolSize: 6,
yAxisIndex: 1,
//
showSymbol: false,
// data: this.data3,
//线
itemStyle: {
color: "#e23131",
lineStyle: {
color: "#e23131", //线
},
},
},
{
type: "line",
tooltip: {
valueFormatter: function (value) {
return value + "%";
},
},
// stack: 'Total',
symbol: "circle",
//
symbolSize: 6,
//y
yAxisIndex: 1,
//
showSymbol: false,
// data: this.data4,
//线
itemStyle: {
color: "#4a98ff",
lineStyle: {
color: "#4a98ff", //线
},
},
},
],
};
//
this.chartInstance1.setOption(this.option1, true);
},
// 线
screenAdapter() {
//,2.6 mes_ref
const titleFontSize = (this.$refs.findwater_ref.offsetWidth / 100) * 1.8;
//optionoption
const adapterOption = {
//fontSize
textStyle: {
fontSize: titleFontSize,
},
};
//.chartInstanceoptiondataoption
this.chartInstance1.setOption(adapterOption);
//resize
this.chartInstance1.resize();
},
},
};
</script>
<style scoped>
.findwatercharts {
margin-bottom: 0.35rem;
width: 100%;
height: 4.5rem;
/* background-color: pink; */
}
.analy-table >>> .el-table th.el-table__cell.is-leaf,
.analy-table >>> .el-table td.el-table__cell {
border-bottom: 1px solid #093769 !important;
border-right: 1px solid #093769 !important;
}
</style>

321
src/views/hotWater/dataAnalysis/index.vue

@ -0,0 +1,321 @@
<template>
<div class="app-container">
<div class="right-monitor">
<div class="buildingDiv">
<div class="buildingDiv-left">
<img
class="title-bg"
src="../../../assets/images/title-bg.png"
alt=""
/>
<div class="title-word">位置{{ currentName }}</div>
</div>
</div>
<!-- 条件 -->
<div class="condition">
<div class="condition-left">
<el-select
style="margin-right: 0.1rem"
v-model="building"
placeholder="请选择楼栋"
clearable
@change="handleBuildingChange"
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select>
<el-select
style="margin-right: 0.1rem"
v-model="analysisType"
placeholder="请选择"
clearable
>
<el-option
v-for="(item, index) in analysisTypes"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
<div class="choice">
<div
class="mr20"
v-for="(item, index) in timeData2"
:key="index"
@click="handleEnter(index, $event)"
:class="{ timeStyle: currentIndex == index }"
>
{{ item.title }}
</div>
</div>
<el-date-picker
v-model="monthDate"
type="month"
v-if="currentIndex === 0"
placeholder="选择开始月份"
value-format="yyyy-MM"
>
</el-date-picker>
<el-date-picker
v-model="yearDate"
v-if="currentIndex === 1"
type="year"
placeholder="选择开始年份"
style="width: 180px"
value-format="yyyy"
>
</el-date-picker>
<div class="success-btn" style="margin: 0 0.12rem">
<el-button type="success" @click="findData">查询</el-button>
</div>
<div class="warning-btn">
<el-button type="warning" @click="exportData">导出</el-button>
</div>
</div>
</div>
<analyze-month
v-if="currentIndex === 0"
ref="monthRef"
:currentIndex="currentIndex"
:chType="analysisType"
:chTime="monthDate"
:chBuild="building"
></analyze-month>
<analyze-year
v-if="currentIndex === 1"
:currentIndex="currentIndex"
ref="yearRef"
:chType="analysisType"
:chTime="yearDate"
:chBuild="building"
></analyze-year>
</div>
</div>
</template>
<script>
import { hotBuildList } from "@/api/hotWater/energyAnalysis";
import analyzeMonth from "./components/analyzeMonth.vue";
import analyzeYear from "./components/analyzeYear.vue";
export default {
components: { analyzeMonth, analyzeYear },
data() {
return {
loading: false,
currentName: "",
building: "", //
builds: [], //
analysisType: 1,
analysisTypes: [
{
label: "用水量",
value: 1,
},
{
label: "用电量",
value: 2,
},
{
label: "耗能",
value: 3,
},
],
monthDate: "",
yearDate: "",
timeData2: [{ title: "月" }, { title: "年" }],
currentIndex: null, //
};
},
mounted() {
this.getBuildList();
},
methods: {
handleEnter(index) {
this.currentIndex = index;
// this.renderingBroken();
console.log("切换日月");
},
handleBuildingChange(selectedId) {
//
const selectedItem = this.builds.find((item) => item.id === selectedId);
if (selectedItem) {
this.currentName = selectedItem.building_name;
console.log("选中的楼栋 ID:", selectedId);
console.log("选中的楼栋名称:", this.currentName);
//
}
},
/** 查询楼栋 */
getBuildList() {
let data = {
systemType: "1",
};
hotBuildList(data).then((res) => {
if (res.code == 200) {
//
console.log("楼栋返回值", res);
// building_name ""
const filteredRows = res.rows.filter((row, index) => {
if (index === 0 && row.building_name === "所有") {
return false;
}
return true;
});
this.builds = filteredRows;
// console.log("", this.builds);
if (this.builds.length > 0) {
this.building = this.builds[0].id;
this.currentName = this.builds[0].building_name;
console.log("选中的第一个楼栋id-传给子组件", this.building);
this.handleEnter(0); //
}
}
});
},
//
findData() {
if (this.currentIndex == 0) {
//
this.$refs.monthRef.getMothData();
} else {
//
this.$refs.yearRef.getYearData();
}
},
//
exportData() {
if (this.currentIndex == 0) {
//
this.$refs.monthRef.outTable();
} else {
//
this.$refs.yearRef.outTable();
}
},
},
};
</script>
<style lang="scss" scoped>
.condition {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 0.24rem;
.condition-left {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
}
.app-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
align-items: stretch;
height: 100%;
.left-tree {
width: 256px;
padding: 15px 10px 10px 10px;
border: 1px solid #004b8c;
}
.right-monitor {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
.buildingDiv {
padding-left: 54px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
position: relative;
.title-bg {
width: 208px;
height: 38px;
position: absolute;
left: 0;
z-index: 0;
}
.title-word {
z-index: 10;
font-family: YouSheBiaoTiHei;
font-size: 24px;
color: #ffffff;
white-space: nowrap;
}
}
}
}
.choice {
margin-left: 0px;
.mr20 {
padding: 0.05rem 0.3rem;
white-space: nowrap;
width: auto;
}
}
.charts {
width: 870px;
height: 300px;
}
.tree-container {
height: 330px; /* 设置固定高度 */
overflow-y: auto; /* 启用垂直滚动条 */
}
//
:-webkit-scrollbar {
width: 10px; /* 滚动条宽度 */
}
::-webkit-scrollbar-track {
background: transparent !important; /* 滚动条轨道背景色 */
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
.tree-left {
.custom-tree-icon {
margin-right: 5px;
}
}
}
@media (min-width: 1200px) and (max-width: 1540px) {
.tem-li {
width: calc(49% - 20px) !important;
}
}
@media (max-width: 1200px) {
.tem-li {
width: calc(100% - 40px) !important;
}
}
</style>
<style scoped>
/* 自定义高亮颜色 */
.left-tree
>>> .el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #285b9e !important;
/* color: #f56c6c; */
color: #25f1f8;
}
</style>

1033
src/views/hotWater/energyAnalysis/components/energyReport.vue

File diff suppressed because it is too large Load Diff

711
src/views/hotWater/energyAnalysis/components/temReport.vue

@ -0,0 +1,711 @@
<template>
<div class="big-machine" v-loading="listLoading">
<div class="condition">
<div class="condition-left">
<el-select
style="margin-right: 0.1rem"
v-model="building"
placeholder="请选择楼栋"
clearable
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select>
<el-date-picker
v-model="dayDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
>
</el-date-picker>
<div class="success-btn" style="margin: 0 0.12rem">
<el-button type="success" @click="findData">查询</el-button>
</div>
<div class="warning-btn">
<el-button type="warning" @click="goExport">导出</el-button>
</div>
</div>
</div>
<div class="charts" ref="chart_ref"></div>
<el-table
:data="tableData"
@row-click="handlerow"
highlight-current-row
height="500"
ref="maintable"
:cell-style="tableRowStyle"
>
<el-table-column v-if="showBuild" prop="buildingName" label="楼栋名称">
</el-table-column>
<el-table-column v-if="!showBuild" prop="deviceName" label="热泵名称">
</el-table-column>
<el-table-column label="0点" align="center" prop="temp00" />
<el-table-column label="2点" align="center" prop="temp02" />
<el-table-column label="6点" align="center" prop="temp06" />
<el-table-column label="8点" align="center" prop="temp08" />
<el-table-column label="11点" align="center" prop="temp11" />
<el-table-column label="13点" align="center" prop="temp13" />
<el-table-column label="14点" align="center" prop="temp14" />
<el-table-column label="15点" align="center" prop="temp15" />
<el-table-column label="16点" align="center" prop="temp16" />
<el-table-column label="17点" align="center" prop="temp17" />
<el-table-column label="18点" align="center" prop="temp18" />
<el-table-column label="19点" align="center" prop="temp19" />
<el-table-column label="20点" align="center" prop="temp20" />
<el-table-column label="21点" align="center" prop="temp21" />
<el-table-column label="22点" align="center" prop="temp22" />
<el-table-column label="23点" align="center" prop="temp23" />
</el-table>
</div>
</template>
<script>
import { formatDay } from "@/utils/datetime";
import { hotBuildList, hotWaterTemp } from "@/api/hotWater/energyAnalysis";
import * as echarts from "echarts";
export default {
data() {
return {
showBuild: true, //
listLoading: false,
dayDate: [], //
dialogVisible: false,
building: "", //
builds: [], //
//
loading: false,
//
total: 0,
//
tableData: [],
//
queryParams: {
pageNum: 1,
pageSize: 10,
startTime: "",
endTime: "",
},
brokenInstanc: null,
brokenOption: {},
brokenData1: [],
brokenTime: [],
};
},
//
watch: {
//
tableData: function () {
this.$nextTick(function () {
this.$refs.maintable.setCurrentRow(this.tableData[0]);
});
},
},
created() {
//
},
mounted() {
this.initializeTimeDate();
this.getBuildList();
this.getList();
this.initChart();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
//
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
/** 查询楼栋 */
getBuildList() {
let data = {
systemType: "1",
};
hotBuildList(data).then((res) => {
if (res.code == 200) {
//
console.log("楼栋返回值", res);
this.builds = res.rows;
// console.log("", this.builds);
this.building = res.rows[0].id;
this.getList();
}
});
},
//
initializeTimeDate() {
this.dayDate = formatDay(new Date()); //
},
//
findData() {
this.getList();
},
/* 加入小手状态 */
tableRowStyle({ row, column, rowIndex, columnIndex }) {
if (row) {
return "cursor:pointer;text-align:center";
}
},
//
getList() {
if (this.building == "所有") {
this.showBuild = true;
} else {
this.showBuild = false;
}
let data = {
buildingId: this.building,
curDate: this.dayDate,
};
console.log("查询数据参数", data);
this.listLoading = true;
//
hotWaterTemp(data).then((res) => {
if (res.code == 200 && res.rows.length > 0) {
this.tableData = res.rows;
// this.firstRow();
this.handlerow(this.tableData[0]);
} else {
this.tableData = [];
}
});
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false;
}, 1.0 * 1000);
},
//
handlerow(row, event, column) {
console.log("点击的行数据----", row);
if (row) {
const obj = Object.assign({}, row);
//
delete obj.buildingId;
delete obj.curDate;
delete obj.deviceNum;
delete obj.deviceName;
delete obj.buildingName;
//
let newObj = {};
for (let key in obj) {
if (obj[key]) {
newObj[key] = obj[key];
}
}
// console.log("x", data7);
const keysArr = Object.keys(newObj); //
this.brokenTime = [];
keysArr.forEach((item) => {
if (item) {
this.brokenTime.push(item.split("temp").join("") + ":00");
}
});
const valuesArr = keysArr.map((key) => newObj[key]); //
// console.log("", valuesArr);
// console.log("", this.brokenTime);
this.brokenData1 = valuesArr;
} else {
this.brokenTime = [];
this.brokenData1 = [];
}
this.renderingBroken();
},
//
renderingBroken() {
this.brokenOption.series[0].data = this.brokenData1;
this.brokenOption.series[0].itemStyle.color = "#1f8dee";
this.brokenOption.series[0].areaStyle.color.colorStops = [
{
offset: 0,
color: "rgba(31, 141, 238, 0.3)", // 0%
},
{
offset: 0.8,
color: "rgba(31, 141, 238,0)", // 100%
},
];
// tooltip
this.brokenOption.tooltip = {
trigger: "axis",
formatter: function (params) {
//
const data = params[0];
const month = data.name;
const value = data.value;
return `${month}<br/>温度: ${value}`;
},
};
this.brokenOption.xAxis.data = this.brokenTime;
this.brokenInstanc.setOption(this.brokenOption);
},
//
goExport() {
if (this.tableData) {
import("@/assets/excel/Export2Excel").then((excel) => {
//
if (this.showBuild) {
var tHeader = [
"楼栋名称",
"0点",
"02点",
"06点",
"8点",
"11点",
"13点",
"14点",
"15点",
"16点",
"17点",
"18点",
"19点",
"20点",
"21点",
"22点",
"23点",
]; // excel
var filterVal = [
"buildingName",
"temp00",
"temp02",
"temp06",
"temp08",
"temp11",
"temp13",
"temp14",
"temp15",
"temp16",
"temp17",
"temp18",
"temp19",
"temp20",
"temp21",
"temp22",
"temp23",
]; // excel
} else {
var tHeader = [
"热泵名称",
"0点",
"02点",
"06点",
"8点",
"11点",
"13点",
"14点",
"15点",
"16点",
"17点",
"18点",
"19点",
"20点",
"21点",
"22点",
"23点",
]; // excel
var filterVal = [
"deviceName",
"temp00",
"temp02",
"temp06",
"temp08",
"temp11",
"temp13",
"temp14",
"temp15",
"temp16",
"temp17",
"temp18",
"temp19",
"temp20",
"temp21",
"temp22",
"temp23",
]; // excel
}
const data = this.formatJson(filterVal, this.tableData);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //
data, //
filename: "温度变化报表", //
autoWidth: true, //
});
});
this.$message({
type: "success",
message: "导出成功!",
});
} else {
this.$message.error("导出失败!");
}
},
//,
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "installDate") {
return format(v[j]);
} else {
return v[j];
}
})
);
},
// 线+ + 线
screenAdapter() {
//,2.6 mes_ref
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
//optionoption
const adapterOption = {};
//.chartInstanceoptiondataoption
this.brokenInstanc.setOption(adapterOption);
//resize
this.brokenInstanc.resize();
},
//chartInstance
initChart() {
this.brokenInstanc = echarts.init(this.$refs.chart_ref);
this.brokenOption = {
tooltip: {
trigger: "axis",
},
legend: {
show: false,
selectedMode: false, //
icon: "cricle", //
//
textStyle: {
color: "#ffff",
fontSize: 16, //
},
// left: "73%",
left: "66%",
top: "0",
//
itemGap: 5,
itemWidth: 10,
itemHeight: 5,
},
grid: {
top: "4%",
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
//true
boundaryGap: true,
// x
axisLabel: {
// interval: 0, //x
// rotate: 30, //x30
color: "rgba(255, 255, 255, 1)",
fontSize: 14, //
},
axisTick: {
show: false, // 线
},
// x
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x线
data: this.brokenTime,
},
yAxis: {
min: 0,
// max:20,
// // // min:'dataMin',
// // // max:'dataMax',
// name: "kwh", // y
// name
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
fontSize: 14, //
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
},
series: [
{
type: "line",
//
symbolSize: 8,
smooth: true,
showSymbol: false,
data: this.brokenData1,
//线
itemStyle: {
color: "#d48e17", //线
lineStyle: {
color: "#d48e17", //线
},
},
areaStyle: {
color: {
//线
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [],
},
},
},
],
};
//
this.brokenInstanc.setOption(this.brokenOption, true);
},
},
};
</script>
<style lang="scss" scoped>
.condition {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 0.24rem;
.condition-left {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.years-div {
display: flex;
flex-direction: row;
align-items: center;
.years-word {
font-size: 14px;
margin: 0 5px;
color: #388ff3;
}
}
.time-label {
font-size: 16px;
line-height: 7px;
margin-right: 12px;
white-space: nowrap;
}
}
}
.data-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 23px;
.data-li {
background-color: transparent;
border-radius: 8px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.3rem;
width: 31%;
justify-content: space-between;
margin-bottom: 0.24rem;
font-family: SourceHanSansCN-Regular;
font-size: 0.16rem;
position: relative;
overflow: hidden;
.use-icon {
width: 0.6rem;
height: 0.6rem;
}
.use-text {
width: 33%;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #dbdbdb;
.data-text {
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
color: #ffffff;
}
.downText {
color: #ff4027;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom {
margin-right: 0.08rem;
}
}
.upText {
color: #2ff016;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom,
.el-icon-top {
margin-right: 0.08rem;
}
}
}
}
.type-img {
position: absolute;
bottom: 0;
width: 3.17rem;
height: 0.52rem;
z-index: 10;
}
.type1 {
border: 1px solid #e8aa13;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
}
.type1::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type2 {
border: 1px solid #27a0f2;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
}
.type2::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type3 {
border: 1px solid #1ad3ef;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
}
.type3::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type4 {
border: 1px solid #11d47b;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
}
.type4::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
}
.choice {
margin: 20px;
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
.charts {
width: 100%;
height: 300px;
margin-bottom: 0.1rem;
}
// 2000px
@media (min-width: 2000px) {
.condition {
.condition-left {
.years-div {
.years-word {
font-size: 0.14rem !important;
margin: 0 0.05rem !important;
}
}
.time-label {
font-size: 0.16rem !important;
line-height: 0.07rem !important;
margin-right: 0.12rem !important;
}
}
}
}
</style>

711
src/views/hotWater/energyAnalysis/components/waterReport.vue

@ -0,0 +1,711 @@
<template>
<div class="big-machine" v-loading="listLoading">
<div class="condition">
<div class="condition-left">
<el-select
style="margin-right: 0.1rem"
v-model="building"
placeholder="请选择楼栋"
clearable
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select>
<el-date-picker
v-model="dayDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
>
</el-date-picker>
<div class="success-btn" style="margin: 0 0.12rem">
<el-button type="success" @click="findData">查询</el-button>
</div>
<div class="warning-btn">
<el-button type="warning" @click="goExport">导出</el-button>
</div>
</div>
</div>
<div class="charts" ref="chart_ref"></div>
<el-table
:data="tableData"
@row-click="handlerow"
highlight-current-row
height="500"
ref="maintable"
:cell-style="tableRowStyle"
>
<el-table-column prop="buildingName" label="楼栋名称"> </el-table-column>
<el-table-column v-if="showDeviceName" prop="deviceName" label="设备名称">
</el-table-column>
<el-table-column label="0点" align="center" prop="temp00" />
<el-table-column label="2点" align="center" prop="temp02" />
<el-table-column label="6点" align="center" prop="temp06" />
<el-table-column label="8点" align="center" prop="temp08" />
<el-table-column label="11点" align="center" prop="temp11" />
<el-table-column label="13点" align="center" prop="temp13" />
<el-table-column label="14点" align="center" prop="temp14" />
<el-table-column label="15点" align="center" prop="temp15" />
<el-table-column label="16点" align="center" prop="temp16" />
<el-table-column label="17点" align="center" prop="temp17" />
<el-table-column label="18点" align="center" prop="temp18" />
<el-table-column label="19点" align="center" prop="temp19" />
<el-table-column label="20点" align="center" prop="temp20" />
<el-table-column label="21点" align="center" prop="temp21" />
<el-table-column label="22点" align="center" prop="temp22" />
<el-table-column label="23点" align="center" prop="temp23" />
</el-table>
</div>
</template>
<script>
import { formatDay } from "@/utils/datetime";
import { hotBuildList, hotWaterLevel } from "@/api/hotWater/energyAnalysis";
import * as echarts from "echarts";
export default {
data() {
return {
showDeviceName: false, //
listLoading: false,
dayDate: [], //
dialogVisible: false,
building: "", //
builds: [], //
//
loading: false,
//
total: 0,
//
tableData: [],
//
queryParams: {
pageNum: 1,
pageSize: 10,
startTime: "",
endTime: "",
},
brokenInstanc: null,
brokenOption: {},
brokenData1: [],
brokenTime: [],
};
},
//
watch: {
//
tableData: function () {
this.$nextTick(function () {
this.$refs.maintable.setCurrentRow(this.tableData[0]);
});
},
},
created() {
//
},
mounted() {
this.initializeTimeDate();
this.getBuildList();
this.getList();
this.initChart();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
//
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
/** 查询楼栋 */
getBuildList() {
let data = {
systemType: "1",
};
hotBuildList(data).then((res) => {
if (res.code == 200) {
//
console.log("楼栋返回值", res);
this.builds = res.rows;
// console.log("", this.builds);
this.building = res.rows[0].id;
this.getList();
}
});
},
//
initializeTimeDate() {
this.dayDate = formatDay(new Date()); //
},
//
findData() {
this.getList();
},
/* 加入小手状态 */
tableRowStyle({ row, column, rowIndex, columnIndex }) {
if (row) {
return "cursor:pointer;text-align:center";
}
},
//
getList() {
if (this.building == "所有") {
this.showDeviceName = false;
} else {
this.showDeviceName = true;
}
let data = {
buildingId: this.building,
curDate: this.dayDate,
};
console.log("查询数据参数", data);
this.listLoading = true;
//
hotWaterLevel(data).then((res) => {
if (res.code == 200 && res.rows.length > 0) {
this.tableData = res.rows;
// this.firstRow();
this.handlerow(this.tableData[0]);
} else {
this.tableData = [];
}
});
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false;
}, 1.0 * 1000);
},
//
handlerow(row, event, column) {
console.log("点击的行数据----", row);
if (row) {
const obj = Object.assign({}, row);
//
delete obj.buildingId;
delete obj.curDate;
delete obj.deviceNum;
delete obj.deviceName;
delete obj.buildingName;
//
let newObj = {};
for (let key in obj) {
if (obj[key]) {
newObj[key] = obj[key];
}
}
// console.log("x", data7);
const keysArr = Object.keys(newObj); //
this.brokenTime = [];
keysArr.forEach((item) => {
if (item) {
this.brokenTime.push(item.split("temp").join("") + ":00");
}
});
const valuesArr = keysArr.map((key) => newObj[key]); //
// console.log("", valuesArr);
// console.log("", this.brokenTime);
this.brokenData1 = valuesArr;
} else {
this.brokenTime = [];
this.brokenData1 = [];
}
this.renderingBroken();
},
//
renderingBroken() {
this.brokenOption.series[0].data = this.brokenData1;
this.brokenOption.series[0].itemStyle.color = "#1f8dee";
this.brokenOption.series[0].areaStyle.color.colorStops = [
{
offset: 0,
color: "rgba(31, 141, 238, 0.3)", // 0%
},
{
offset: 0.8,
color: "rgba(31, 141, 238,0)", // 100%
},
];
// tooltip
this.brokenOption.tooltip = {
trigger: "axis",
formatter: function (params) {
//
const data = params[0];
const month = data.name;
const value = data.value;
return `${month}<br/>温度: ${value}`;
},
};
this.brokenOption.xAxis.data = this.brokenTime;
this.brokenInstanc.setOption(this.brokenOption);
},
//
goExport() {
if (this.tableData) {
import("@/assets/excel/Export2Excel").then((excel) => {
if (this.showDeviceName) {
var tHeader = [
"楼栋名称",
"设备名称",
"0点",
"02点",
"06点",
"8点",
"11点",
"13点",
"14点",
"15点",
"16点",
"17点",
"18点",
"19点",
"20点",
"21点",
"22点",
"23点",
]; // excel
var filterVal = [
"buildingName",
"deviceName",
"temp00",
"temp02",
"temp06",
"temp08",
"temp11",
"temp13",
"temp14",
"temp15",
"temp16",
"temp17",
"temp18",
"temp19",
"temp20",
"temp21",
"temp22",
"temp23",
]; // excel
} else {
var tHeader = [
"楼栋名称",
"0点",
"02点",
"06点",
"8点",
"11点",
"13点",
"14点",
"15点",
"16点",
"17点",
"18点",
"19点",
"20点",
"21点",
"22点",
"23点",
]; // excel
var filterVal = [
"buildingName",
"temp00",
"temp02",
"temp06",
"temp08",
"temp11",
"temp13",
"temp14",
"temp15",
"temp16",
"temp17",
"temp18",
"temp19",
"temp20",
"temp21",
"temp22",
"temp23",
]; // excel
}
const data = this.formatJson(filterVal, this.tableData);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //
data, //
filename: "温度变化报表", //
autoWidth: true, //
});
});
this.$message({
type: "success",
message: "导出成功!",
});
} else {
this.$message.error("导出失败!");
}
},
//,
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "installDate") {
return format(v[j]);
} else {
return v[j];
}
})
);
},
// 线+ + 线
screenAdapter() {
//,2.6 mes_ref
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
//optionoption
const adapterOption = {};
//.chartInstanceoptiondataoption
this.brokenInstanc.setOption(adapterOption);
//resize
this.brokenInstanc.resize();
},
//chartInstance
initChart() {
this.brokenInstanc = echarts.init(this.$refs.chart_ref);
this.brokenOption = {
tooltip: {
trigger: "axis",
},
legend: {
show: false,
selectedMode: false, //
icon: "cricle", //
//
textStyle: {
color: "#ffff",
fontSize: 16, //
},
// left: "73%",
left: "66%",
top: "0",
//
itemGap: 5,
itemWidth: 10,
itemHeight: 5,
},
grid: {
top: "4%",
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
//true
boundaryGap: true,
// x
axisLabel: {
// interval: 0, //x
// rotate: 30, //x30
color: "rgba(255, 255, 255, 1)",
fontSize: 14, //
},
axisTick: {
show: false, // 线
},
// x
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x线
data: this.brokenTime,
},
yAxis: {
min: 0,
// max:20,
// // // min:'dataMin',
// // // max:'dataMax',
// name: "kwh", // y
// name
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
fontSize: 14, //
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
},
series: [
{
type: "line",
//
symbolSize: 8,
smooth: true,
showSymbol: false,
data: this.brokenData1,
//线
itemStyle: {
color: "#d48e17", //线
lineStyle: {
color: "#d48e17", //线
},
},
areaStyle: {
color: {
//线
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [],
},
},
},
],
};
//
this.brokenInstanc.setOption(this.brokenOption, true);
},
},
};
</script>
<style lang="scss" scoped>
.condition {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 0.24rem;
.condition-left {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.years-div {
display: flex;
flex-direction: row;
align-items: center;
.years-word {
font-size: 14px;
margin: 0 5px;
color: #388ff3;
}
}
.time-label {
font-size: 16px;
line-height: 7px;
margin-right: 12px;
white-space: nowrap;
}
}
}
.data-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 23px;
.data-li {
background-color: transparent;
border-radius: 8px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.3rem;
width: 31%;
justify-content: space-between;
margin-bottom: 0.24rem;
font-family: SourceHanSansCN-Regular;
font-size: 0.16rem;
position: relative;
overflow: hidden;
.use-icon {
width: 0.6rem;
height: 0.6rem;
}
.use-text {
width: 33%;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #dbdbdb;
.data-text {
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
color: #ffffff;
}
.downText {
color: #ff4027;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom {
margin-right: 0.08rem;
}
}
.upText {
color: #2ff016;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom,
.el-icon-top {
margin-right: 0.08rem;
}
}
}
}
.type-img {
position: absolute;
bottom: 0;
width: 3.17rem;
height: 0.52rem;
z-index: 10;
}
.type1 {
border: 1px solid #e8aa13;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
}
.type1::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type2 {
border: 1px solid #27a0f2;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
}
.type2::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type3 {
border: 1px solid #1ad3ef;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
}
.type3::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type4 {
border: 1px solid #11d47b;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
}
.type4::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
}
.choice {
margin: 20px;
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
.charts {
width: 100%;
height: 300px;
margin-bottom: 0.1rem;
}
// 2000px
@media (min-width: 2000px) {
.condition {
.condition-left {
.years-div {
.years-word {
font-size: 0.14rem !important;
margin: 0 0.05rem !important;
}
}
.time-label {
font-size: 0.16rem !important;
line-height: 0.07rem !important;
margin-right: 0.12rem !important;
}
}
}
}
</style>

94
src/views/hotWater/energyAnalysis/index.vue

@ -0,0 +1,94 @@
<template>
<div class="paramsDetails">
<div class="details-content">
<div class="details-header">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="能耗报表" name="first">
<energy-report v-if="activeName === 'first'"></energy-report>
</el-tab-pane>
<el-tab-pane label="温度变化表" name="second">
<tem-report v-if="activeName === 'second'"></tem-report>
</el-tab-pane>
<el-tab-pane label="水位变化表" name="three">
<water-report v-if="activeName === 'three'"></water-report>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<script>
import EnergyReport from "./components/energyReport.vue";
import TemReport from "./components/temReport.vue";
import WaterReport from "./components/waterReport.vue";
export default {
components: { EnergyReport, TemReport, WaterReport },
data() {
return {
activeName: "first", //
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
//switch-tab
// activeName'second'tabtab
switchToEquitesMess() {
this.activeName = "second";
},
switchToPatrolTem() {
// this.activeName = 'fourth';
},
//
},
};
</script>
<style lang="scss" scoped>
.paramsDetails {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
.details-content {
width: 100%;
// height: 0.42rem;
position: relative;
}
}
</style>
<style scoped>
.none-div {
padding-top: 0.31rem;
}
.none-div >>> .el-tree {
background: transparent;
color: #789d9f;
}
.none-div >>> .el-tree-node:focus > .el-tree-node__content {
background-color: #00be97;
color: #fff;
}
.none-div >>> .el-tree-node__content:hover,
.none-div >>> .el-upload-list__item:hover {
background-color: #00be97;
color: #fff;
}
.none-div >>> .el-tree-node__content {
height: 0.48rem;
justify-content: center;
}
.none-div >>> .el-tree-node__expand-icon.is-leaf {
display: none !important;
}
</style>

483
src/views/hotWater/energyQuery/components/electReading.vue

@ -0,0 +1,483 @@
<template>
<div class="big-machine" v-loading="listLoading">
<div class="condition">
<div class="condition-left">
<el-select
style="margin-right: 0.1rem"
v-model="building"
placeholder="请选择楼栋"
clearable
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select>
<el-date-picker
v-model="dayDate"
type="daterange"
range-separator="至"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="dateChange"
>
</el-date-picker>
<div class="success-btn" style="margin: 0 0.12rem">
<el-button type="success" @click="findData">查询</el-button>
</div>
<div class="warning-btn">
<el-button type="warning" @click="exportData">导出</el-button>
</div>
</div>
</div>
<el-table
:data="postList"
stripe
:cell-style="tableRowStyle"
highlight-current-row
height="500"
>
<el-table-column
type="index"
:index="indexAdd"
prop="number"
label="序号"
width="90"
></el-table-column>
<el-table-column label="所属楼栋" align="center" prop="buildingName" />
<el-table-column label="设备编号" align="center" prop="deviceNum" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="抄表时间" align="center" prop="curTime" />
<el-table-column label="采集读数" align="center" prop="curValue" />
<el-table-column label="用量" align="center" prop="usedValue" />
<el-table-column label="倍率" align="center" prop="ratio" />
<el-table-column label="计算量" align="center" prop="calcValue" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { formatDay } from "@/utils/datetime";
import { hotBuildList } from "@/api/hotWater/energyAnalysis";
import { queryDeviceDatas } from "@/api/hotWater/energyQuery";
export default {
data() {
return {
listLoading: false,
dayDate: [], //
dialogVisible: false,
building: "", //
builds: [], //
//
loading: false,
//
total: 0,
//
postList: [],
//
queryParams: {
pageNum: 1,
pageSize: 10,
startTime: "",
endTime: "",
},
};
},
created() {
//
},
mounted() {
this.initializeTimeDate();
this.getBuildList();
this.getList();
},
methods: {
//
dateChange() {
// console.log("", this.timeform.time1);
if (!this.dayDate) {
this.$nextTick(() => {
this.dayDate = [];
});
}
},
/** 查询楼栋 */
getBuildList() {
let data = {
systemType: "1",
};
hotBuildList(data).then((res) => {
if (res.code == 200) {
//
console.log("楼栋返回值", res);
this.builds = res.rows;
// console.log("", this.builds);
this.building = res.rows[0].id;
this.getList();
}
});
},
//
initializeTimeDate() {
let date = new Date(); //
//,
let year = date.getFullYear().toString();
//01
//使10'0'
let month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1).toString()
: (date.getMonth() + 1).toString();
//10'0'
let day =
date.getDate() < 10
? "0" + date.getDate().toString()
: date.getDate().toString();
//
let start1 = year + "-" + month + "-01"; //
let end1 = year + "-" + month + "-" + day; //
this.dayDate = [start1, end1]; //
},
//
findData() {
this.queryParams.pageNum = 1;
this.getList();
},
//
indexAdd(index) {
return (
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
);
},
//
getList() {
if (this.dayDate.length == 0) {
this.initializeTimeDate();
}
let data = {
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
startDate: this.dayDate[0],
endDate: this.dayDate[1],
buildingId: this.building,
deviceType: "16",
};
console.log("查询数据参数", data);
this.listLoading = true;
queryDeviceDatas(data).then((res) => {
console.log("返回", res);
if (res.code == 200) {
this.postList = res.rows;
this.total = res.total;
} else {
this.postList = [];
this.total = 0;
}
});
//
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false;
}, 1.0 * 1000);
},
//
exportData() {
if (this.dayDate.length == 0) {
this.initializeTimeDate();
}
let data = {
pageNum: this.queryParams.pageNum,
pageSize: this.total,
startDate: this.dayDate[0],
endDate: this.dayDate[1],
buildingId: this.building,
deviceType: "16",
};
console.log("查询数据参数", data);
queryDeviceDatas(data).then((res) => {
console.log("返回", res);
if (res.code == 200) {
import("@/assets/excel/Export2Excel").then((excel) => {
var tHeader = [
"所属楼栋",
"设备编号",
"设备名称",
"抄表时间",
"采集读数",
"用量",
"倍率",
"计算量",
]; // excel
var filterVal = [
"buildingName",
"deviceNum",
"deviceName",
"curTime",
"curValue",
"usedValue",
"ratio",
"calcValue",
];
const data = this.formatJson(filterVal, res.rows);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //
data, //
filename: "电表读数报表", //
autoWidth: true, //
});
this.$message({
type: "success",
message: "导出成功!",
});
});
} else {
this.$message.error("导出失败!");
}
});
},
//,
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "installDate") {
return format(v[j]);
} else {
return v[j];
}
})
);
},
tableRowStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 6 || columnIndex === 8) {
return "color: #75d148;!important;text-align:center";
}
// return "text-align:center";
},
},
};
</script>
<style lang="scss" scoped>
.condition {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 0.24rem;
.condition-left {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.years-div {
display: flex;
flex-direction: row;
align-items: center;
.years-word {
font-size: 14px;
margin: 0 5px;
color: #388ff3;
}
}
.time-label {
font-size: 16px;
line-height: 7px;
margin-right: 12px;
white-space: nowrap;
}
}
}
.data-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 23px;
.data-li {
background-color: transparent;
border-radius: 8px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.3rem;
width: 31%;
justify-content: space-between;
margin-bottom: 0.24rem;
font-family: SourceHanSansCN-Regular;
font-size: 0.16rem;
position: relative;
overflow: hidden;
.use-icon {
width: 0.6rem;
height: 0.6rem;
}
.use-text {
width: 33%;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #dbdbdb;
.data-text {
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
color: #ffffff;
}
.downText {
color: #ff4027;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom {
margin-right: 0.08rem;
}
}
.upText {
color: #2ff016;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom,
.el-icon-top {
margin-right: 0.08rem;
}
}
}
}
.type-img {
position: absolute;
bottom: 0;
width: 3.17rem;
height: 0.52rem;
z-index: 10;
}
.type1 {
border: 1px solid #e8aa13;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
}
.type1::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type2 {
border: 1px solid #27a0f2;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
}
.type2::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type3 {
border: 1px solid #1ad3ef;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
}
.type3::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type4 {
border: 1px solid #11d47b;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
}
.type4::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
}
.choice {
margin: 20px;
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
.charts {
width: 100%;
height: 300px;
margin-bottom: 0.1rem;
}
// 2000px
@media (min-width: 2000px) {
.condition {
.condition-left {
.years-div {
.years-word {
font-size: 0.14rem !important;
margin: 0 0.05rem !important;
}
}
.time-label {
font-size: 0.16rem !important;
line-height: 0.07rem !important;
margin-right: 0.12rem !important;
}
}
}
}
</style>

568
src/views/hotWater/energyQuery/components/energy.vue

@ -0,0 +1,568 @@
<template>
<div class="big-machine" v-loading="listLoading">
<div class="condition">
<div class="condition-left">
<el-select
style="margin-right: 0.1rem"
v-model="building"
placeholder="请选择楼栋"
clearable
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select>
<el-date-picker
v-model="dayDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
>
</el-date-picker>
<div class="success-btn" style="margin: 0 0.12rem">
<el-button type="success" @click="findData">查询</el-button>
</div>
</div>
</div>
<div class="choice">
<div
class="mr20"
v-for="(item, index) in timeData2"
:key="index"
@click="handleEnter(index, $event)"
:class="{ timeStyle: currentIndex == index }"
>
{{ item.title }}
</div>
</div>
<div class="charts" ref="chart_ref"></div>
</div>
</template>
<script>
import { formatDay } from "@/utils/datetime";
import { hotBuildList } from "@/api/hotWater/energyAnalysis";
import { hotEnergyQuery } from "@/api/hotWater/overview";
import * as echarts from "echarts";
export default {
data() {
return {
listLoading: false,
dayDate: [], //
dialogVisible: false,
building: "", //
builds: [], //
timeData2: [{ title: "用水量" }, { title: "用电量" }],
currentIndex: 0,
//
loading: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
startTime: "",
endTime: "",
},
brokenInstanc: null,
brokenOption: {},
brokenData1: [],
brokenTime: [],
};
},
created() {
//
},
mounted() {
this.initializeTimeDate();
this.getBuildList();
this.initChart();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
//
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
/** 查询楼栋 */
getBuildList() {
let data = {
systemType: "1",
};
hotBuildList(data).then((res) => {
if (res.code == 200) {
//
console.log("楼栋返回值", res);
this.builds = res.rows;
// console.log("", this.builds);
this.building = res.rows[0].id;
this.getList();
}
});
},
//
initializeTimeDate() {
this.dayDate = formatDay(new Date()); //
},
//
findData() {
this.getList();
},
//
getList() {
let data = {
type: 0,
page: 1,
limit: 31,
// curDate:this.dayDate,
startDate: this.dayDate,
endDate: this.dayDate,
buildingId: this.building,
};
console.log("查询数据参数", data);
this.listLoading = true;
//
hotEnergyQuery(data).then((res) => {
console.log("图表返回的数据", res);
this.brokenData1 = [];
this.brokenData2 = [];
this.brokenTime = [];
if (res.code == 200 && res.rows.length > 0) {
this.exportData = res.rows;
res.rows.forEach((item) => {
this.brokenData1.push(item.useHotWater);
this.brokenData2.push(item.electValue);
if (item.curDate.includes(" ")) {
var oneStr = item.curDate.split(" ");
this.brokenTime.push(oneStr[oneStr.length - 1] + ":00");
}
});
//
this.brokenData1.reverse();
this.brokenData2.reverse();
this.brokenTime.reverse();
} else {
this.brokenData1 = [];
this.brokenData2 = [];
this.brokenTime = [];
}
this.getChartData();
});
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false;
}, 1.0 * 1000);
},
//
getChartData() {
if (this.currentIndex === 0) {
this.brokenOption.series[0].data = this.brokenData1;
this.brokenOption.series[0].itemStyle.color = "#1f8dee";
this.brokenOption.series[0].areaStyle.color.colorStops = [
{
offset: 0,
color: "rgba(31, 141, 238, 0.3)", // 0%
},
{
offset: 0.8,
color: "rgba(31, 141, 238,0)", // 100%
},
];
} else if (this.currentIndex === 1) {
this.brokenOption.series[0].data = this.brokenData2;
this.brokenOption.series[0].itemStyle.color = "#1ab395";
this.brokenOption.series[0].areaStyle.color.colorStops = [
{
offset: 0,
color: "rgba(26, 179, 149, 0.3)", // 0%
},
{
offset: 0.8,
color: "rgba(26, 179, 149,0)", // 100%
},
];
}
//
const currentIndex = this.currentIndex;
// tooltip
this.brokenOption.tooltip = {
trigger: "axis",
formatter: function (params) {
//
const data = params[0];
const month = data.name;
const value = data.value;
//
if (currentIndex === 0) {
return `${month}<br/>用水量: ${value}`;
} else if (currentIndex === 1) {
return `${month}<br/>用电量: ${value}`;
}
},
};
this.brokenOption.xAxis.data = this.brokenTime;
this.brokenInstanc.setOption(this.brokenOption);
},
handleEnter(index) {
this.currentIndex = index;
this.getChartData();
},
// 线+ + 线
screenAdapter() {
//,2.6 mes_ref
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
//optionoption
const adapterOption = {};
//.chartInstanceoptiondataoption
this.brokenInstanc.setOption(adapterOption);
//resize
this.brokenInstanc.resize();
},
//chartInstance
initChart() {
this.brokenInstanc = echarts.init(this.$refs.chart_ref);
this.brokenOption = {
tooltip: {
trigger: "axis",
},
legend: {
show: false,
selectedMode: false, //
icon: "cricle", //
//
textStyle: {
color: "#ffff",
fontSize: 16, //
},
// left: "73%",
left: "66%",
top: "0",
//
itemGap: 5,
itemWidth: 10,
itemHeight: 5,
},
grid: {
top: "4%",
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
//true
boundaryGap: true,
// x
axisLabel: {
// interval: 0, //x
// rotate: 30, //x30
color: "rgba(255, 255, 255, 1)",
fontSize: 14, //
},
axisTick: {
show: false, // 线
},
// x
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x线
data: this.brokenTime,
},
yAxis: {
min: 0,
// max:20,
// // // min:'dataMin',
// // // max:'dataMax',
// name: "kwh", // y
// name
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
fontSize: 14, //
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
},
series: [
{
type: "line",
//
symbolSize: 8,
smooth: true,
showSymbol: false,
data: this.brokenData1,
//线
itemStyle: {
color: "#d48e17", //线
lineStyle: {
color: "#d48e17", //线
},
},
areaStyle: {
color: {
//线
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [],
},
},
},
],
};
//
this.brokenInstanc.setOption(this.brokenOption, true);
},
},
};
</script>
<style lang="scss" scoped>
.condition {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 0.24rem;
.condition-left {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.years-div {
display: flex;
flex-direction: row;
align-items: center;
.years-word {
font-size: 14px;
margin: 0 5px;
color: #388ff3;
}
}
.time-label {
font-size: 16px;
line-height: 7px;
margin-right: 12px;
white-space: nowrap;
}
}
}
.data-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 23px;
.data-li {
background-color: transparent;
border-radius: 8px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.3rem;
width: 31%;
justify-content: space-between;
margin-bottom: 0.24rem;
font-family: SourceHanSansCN-Regular;
font-size: 0.16rem;
position: relative;
overflow: hidden;
.use-icon {
width: 0.6rem;
height: 0.6rem;
}
.use-text {
width: 33%;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #dbdbdb;
.data-text {
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
color: #ffffff;
}
.downText {
color: #ff4027;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom {
margin-right: 0.08rem;
}
}
.upText {
color: #2ff016;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom,
.el-icon-top {
margin-right: 0.08rem;
}
}
}
}
.type-img {
position: absolute;
bottom: 0;
width: 3.17rem;
height: 0.52rem;
z-index: 10;
}
.type1 {
border: 1px solid #e8aa13;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
}
.type1::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type2 {
border: 1px solid #27a0f2;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
}
.type2::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type3 {
border: 1px solid #1ad3ef;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
}
.type3::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type4 {
border: 1px solid #11d47b;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
}
.type4::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
}
.choice {
margin: 20px;
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
.charts {
width: 100%;
height: 700px;
margin-bottom: 0.1rem;
}
// 2000px
@media (min-width: 2000px) {
.condition {
.condition-left {
.years-div {
.years-word {
font-size: 0.14rem !important;
margin: 0 0.05rem !important;
}
}
.time-label {
font-size: 0.16rem !important;
line-height: 0.07rem !important;
margin-right: 0.12rem !important;
}
}
}
}
</style>

483
src/views/hotWater/energyQuery/components/waterReading.vue

@ -0,0 +1,483 @@
<template>
<div class="big-machine" v-loading="listLoading">
<div class="condition">
<div class="condition-left">
<el-select
style="margin-right: 0.1rem"
v-model="building"
placeholder="请选择楼栋"
clearable
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select>
<el-date-picker
v-model="dayDate"
type="daterange"
range-separator="至"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="dateChange"
>
</el-date-picker>
<div class="success-btn" style="margin: 0 0.12rem">
<el-button type="success" @click="findData">查询</el-button>
</div>
<div class="warning-btn">
<el-button type="warning" @click="exportData">导出</el-button>
</div>
</div>
</div>
<el-table
:data="postList"
stripe
:cell-style="tableRowStyle"
highlight-current-row
height="500"
>
<el-table-column
type="index"
:index="indexAdd"
prop="number"
label="序号"
width="90"
></el-table-column>
<el-table-column label="所属楼栋" align="center" prop="buildingName" />
<el-table-column label="设备编号" align="center" prop="deviceNum" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="抄表时间" align="center" prop="curTime" />
<el-table-column label="采集读数" align="center" prop="curValue" />
<el-table-column label="用量" align="center" prop="usedValue" />
<el-table-column label="倍率" align="center" prop="ratio" />
<el-table-column label="计算量" align="center" prop="calcValue" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { formatDay } from "@/utils/datetime";
import { hotBuildList } from "@/api/hotWater/energyAnalysis";
import { queryDeviceDatas } from "@/api/hotWater/energyQuery";
export default {
data() {
return {
listLoading: false,
dayDate: [], //
dialogVisible: false,
building: "", //
builds: [], //
//
loading: false,
//
total: 0,
//
postList: [],
//
queryParams: {
pageNum: 1,
pageSize: 10,
startTime: "",
endTime: "",
},
};
},
created() {
//
},
mounted() {
this.initializeTimeDate();
this.getBuildList();
this.getList();
},
methods: {
//
dateChange() {
// console.log("", this.timeform.time1);
if (!this.dayDate) {
this.$nextTick(() => {
this.dayDate = [];
});
}
},
/** 查询楼栋 */
getBuildList() {
let data = {
systemType: "1",
};
hotBuildList(data).then((res) => {
if (res.code == 200) {
//
console.log("楼栋返回值", res);
this.builds = res.rows;
// console.log("", this.builds);
this.building = res.rows[0].id;
this.getList();
}
});
},
//
initializeTimeDate() {
let date = new Date(); //
//,
let year = date.getFullYear().toString();
//01
//使10'0'
let month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1).toString()
: (date.getMonth() + 1).toString();
//10'0'
let day =
date.getDate() < 10
? "0" + date.getDate().toString()
: date.getDate().toString();
//
let start1 = year + "-" + month + "-01"; //
let end1 = year + "-" + month + "-" + day; //
this.dayDate = [start1, end1]; //
},
//
findData() {
this.queryParams.pageNum = 1;
this.getList();
},
//
indexAdd(index) {
return (
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
);
},
//
getList() {
if (this.dayDate.length == 0) {
this.initializeTimeDate();
}
let data = {
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
startDate: this.dayDate[0],
endDate: this.dayDate[1],
buildingId: this.building,
deviceType: "18",
};
console.log("查询数据参数", data);
this.listLoading = true;
queryDeviceDatas(data).then((res) => {
console.log("返回", res);
if (res.code == 200) {
this.postList = res.rows;
this.total = res.total;
} else {
this.postList = [];
this.total = 0;
}
});
//
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false;
}, 1.0 * 1000);
},
//
exportData() {
if (this.dayDate.length == 0) {
this.initializeTimeDate();
}
let data = {
pageNum: this.queryParams.pageNum,
pageSize: this.total,
startDate: this.dayDate[0],
endDate: this.dayDate[1],
buildingId: this.building,
deviceType: "18",
};
console.log("查询数据参数", data);
queryDeviceDatas(data).then((res) => {
console.log("返回", res);
if (res.code == 200) {
import("@/assets/excel/Export2Excel").then((excel) => {
var tHeader = [
"所属楼栋",
"设备编号",
"设备名称",
"抄表时间",
"采集读数",
"用量",
"倍率",
"计算量",
]; // excel
var filterVal = [
"buildingName",
"deviceNum",
"deviceName",
"curTime",
"curValue",
"usedValue",
"ratio",
"calcValue",
];
const data = this.formatJson(filterVal, res.rows);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //
data, //
filename: "水表读数报表", //
autoWidth: true, //
});
this.$message({
type: "success",
message: "导出成功!",
});
});
} else {
this.$message.error("导出失败!");
}
});
},
//,
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "installDate") {
return format(v[j]);
} else {
return v[j];
}
})
);
},
tableRowStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 6 || columnIndex === 8) {
return "color: #75d148;!important;text-align:center";
}
// return "text-align:center";
},
},
};
</script>
<style lang="scss" scoped>
.condition {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 0.24rem;
.condition-left {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.years-div {
display: flex;
flex-direction: row;
align-items: center;
.years-word {
font-size: 14px;
margin: 0 5px;
color: #388ff3;
}
}
.time-label {
font-size: 16px;
line-height: 7px;
margin-right: 12px;
white-space: nowrap;
}
}
}
.data-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 23px;
.data-li {
background-color: transparent;
border-radius: 8px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.3rem;
width: 31%;
justify-content: space-between;
margin-bottom: 0.24rem;
font-family: SourceHanSansCN-Regular;
font-size: 0.16rem;
position: relative;
overflow: hidden;
.use-icon {
width: 0.6rem;
height: 0.6rem;
}
.use-text {
width: 33%;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #dbdbdb;
.data-text {
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
color: #ffffff;
}
.downText {
color: #ff4027;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom {
margin-right: 0.08rem;
}
}
.upText {
color: #2ff016;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
.el-icon-bottom,
.el-icon-top {
margin-right: 0.08rem;
}
}
}
}
.type-img {
position: absolute;
bottom: 0;
width: 3.17rem;
height: 0.52rem;
z-index: 10;
}
.type1 {
border: 1px solid #e8aa13;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
}
.type1::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type2 {
border: 1px solid #27a0f2;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
}
.type2::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type3 {
border: 1px solid #1ad3ef;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
}
.type3::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
.type4 {
border: 1px solid #11d47b;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
}
.type4::after {
content: "";
width: 100%;
height: 90%;
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: -100% !important;
z-index: 1;
}
}
.choice {
margin: 20px;
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
.charts {
width: 100%;
height: 300px;
margin-bottom: 0.1rem;
}
// 2000px
@media (min-width: 2000px) {
.condition {
.condition-left {
.years-div {
.years-word {
font-size: 0.14rem !important;
margin: 0 0.05rem !important;
}
}
.time-label {
font-size: 0.16rem !important;
line-height: 0.07rem !important;
margin-right: 0.12rem !important;
}
}
}
}
</style>

94
src/views/hotWater/energyQuery/index.vue

@ -0,0 +1,94 @@
<template>
<div class="paramsDetails">
<div class="details-content">
<div class="details-header">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="能耗" name="first">
<energy v-if="activeName === 'first'"></energy>
</el-tab-pane>
<el-tab-pane label="水表读数" name="second">
<water-reading v-if="activeName === 'second'"></water-reading>
</el-tab-pane>
<el-tab-pane label="电表读数" name="three">
<elect-reading v-if="activeName === 'three'"></elect-reading>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<script>
import ElectReading from "./components/electReading.vue";
import WaterReading from "./components/waterReading.vue";
import Energy from "./components/energy.vue";
export default {
components: { Energy, ElectReading, WaterReading },
data() {
return {
activeName: "first", //
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
//switch-tab
// activeName'second'tabtab
switchToEquitesMess() {
this.activeName = "second";
},
switchToPatrolTem() {
// this.activeName = 'fourth';
},
//
},
};
</script>
<style lang="scss" scoped>
.paramsDetails {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
.details-content {
width: 100%;
// height: 0.42rem;
position: relative;
}
}
</style>
<style scoped>
.none-div {
padding-top: 0.31rem;
}
.none-div >>> .el-tree {
background: transparent;
color: #789d9f;
}
.none-div >>> .el-tree-node:focus > .el-tree-node__content {
background-color: #00be97;
color: #fff;
}
.none-div >>> .el-tree-node__content:hover,
.none-div >>> .el-upload-list__item:hover {
background-color: #00be97;
color: #fff;
}
.none-div >>> .el-tree-node__content {
height: 0.48rem;
justify-content: center;
}
.none-div >>> .el-tree-node__expand-icon.is-leaf {
display: none !important;
}
</style>

827
src/views/hotWater/overview/index.vue

@ -0,0 +1,827 @@
<template>
<div class="app-container" v-loading="loading">
<div class="overview-top">
<div class="overview-top-left">
<div class="special-div">
<div class="special-top">
<div class="special-title">项目概况</div>
</div>
<div class="overview-data">
<div class="overview-data-li">
<img
class="overview-img"
src="../../../assets/images/overview1.png"
alt=""
/>
<div class="overview-num">{{ useHotWater }}</div>
<div class="overview-title">昨日用水量()</div>
</div>
<div class="overview-data-li">
<img
class="overview-img"
src="../../../assets/images/overview2.png"
alt=""
/>
<div class="overview-num">{{ electValue }}</div>
<div class="overview-title">昨日用电量()</div>
</div>
<div class="overview-data-li">
<img
class="overview-img"
src="../../../assets/images/overview3.png"
alt=""
/>
<div class="overview-num">{{ electWater }}</div>
<div class="overview-title">昨日单耗(/)</div>
</div>
<div class="overview-data-li">
<img
class="overview-img"
src="../../../assets/images/overview4.png"
alt=""
/>
<div class="overview-num">{{ allData }}</div>
<div class="overview-title">通讯设备设备总数()</div>
</div>
</div>
</div>
</div>
<div class="overview-top-right">
<div class="special-div">
<div class="special-top">
<div class="special-title">热泵运行状态</div>
</div>
<div class="pump-charts" ref="pumpChart_ref"></div>
</div>
</div>
</div>
<div class="overview-bottom">
<div class="overview-top-left">
<div class="special-div">
<div class="special-top">
<div class="special-title">当月数据统计</div>
</div>
<div class="choice">
<div
class="mr20"
v-for="(item, index) in timeData2"
:key="index"
@click="handleEnter(index, $event)"
:class="{ timeStyle: currentIndex == index }"
>
{{ item.title }}
</div>
</div>
<div class="brokenEcharts" ref="analyse_ref"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { getDay } from "@/utils/datetime";
import { deviceState, hotEnergyQuery } from "@/api/hotWater/overview";
export default {
data() {
return {
electWater: "",
electValue: "",
useHotWater: "",
loading: false,
chartInstance: null,
option: {},
chartData1: "",
chartData2: "",
allData: "",
timeData2: [{ title: "用水量" }, { title: "用电量" }, { title: "单耗" }],
currentIndex: 0,
brokenOption: "",
brokenInstanc: null,
brokenData1: [],
brokenData2: [],
brokenData3: [],
brokenTime: [],
};
},
mounted() {
this.initChart();
this.initChart2();
this.getTableData();
window.addEventListener("resize", this.screenAdapter);
window.addEventListener("resize", this.screenAdapter2);
this.screenAdapter();
// this.screenAdapter2();
this.pumpEchartsData();
},
destroyed() {
//
window.removeEventListener("resize", this.screenAdapter);
window.removeEventListener("resize", this.screenAdapter2);
},
methods: {
//
screenAdapter() {
//,2.6 mes_ref
const titleFontSize = this.$refs.pumpChart_ref.offsetWidth / 30;
//optionoption
const adapterOption = {
title: {
subtextStyle: {
fontSize: titleFontSize,
},
},
};
//.chartInstanceoptiondataoption
this.chartInstance.setOption(adapterOption);
//resize
this.chartInstance.resize();
},
//
pumpEchartsData() {
let data = {
systemType: 1,
};
deviceState(data).then((res) => {
if (res.rows) {
console.log("进行赋值", res.rows);
this.chartData1 = res.rows[0].pumpOnline;
this.chartData2 = parseInt(
res.rows[0].pumpNum - res.rows[0].pumpOnline
);
this.allData = res.rows[0].pumpNum;
const titleFontSize =
(this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
const colorList = ["#ffe21e", "#08c8ff"]; //
const adapterOption = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
//
title: {
subtext: this.allData,
},
legend: {
itemWidth: titleFontSize,
itemHeight: titleFontSize,
itemGap: titleFontSize * 2,
formatter: function (name) {
var arr = [];
let data = adapterOption.series[0].data;
var index = 0;
var total = 0;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
index = i;
}
}
arr.push(
"{name|" + name + "}",
"{text|" + " " + ":" + " " + "}",
"{value|" + data[index].value + "}",
"{text|" + " " + "台" + "}"
);
return arr.join("");
},
textStyle: {
color: function (name) {
const dataSeries = adapterOption.series[1].data; // data
const index = dataSeries.findIndex(
(item) => item.name === name
);
const colorList = ["#2df499", "#08c8ff"]; //
return colorList[index];
},
rich: {
name: {
align: "left",
fontSize: titleFontSize * 1.6,
},
text: {
align: "left",
fontSize: titleFontSize * 1.6,
},
value: {
align: "left",
fontSize: titleFontSize * 1.6,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
percentage: {
align: "left",
fontSize: titleFontSize * 2,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
},
},
},
series: [
{
name: "温度监测:",
data: [
{ value: this.chartData1, name: "运行" },
{ value: this.chartData2, name: "不运行" },
],
itemStyle: {
color: function (params) {
var colorList = ["#2df499", "#08c8ff"];
return colorList[params.dataIndex];
},
// borderWidth: 5,
borderColor: "#002a56",
},
},
{
data: [
{ value: this.chartData1, name: "运行" },
{ value: this.chartData2, name: "不运行" },
],
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
} else {
this.allData = 0;
const titleFontSize =
(this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
const adapterOption = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
//
title: {
subtext: 0,
},
legend: {
itemWidth: titleFontSize,
itemHeight: titleFontSize,
itemGap: titleFontSize * 2,
formatter: function (name) {
var arr = [];
let data = adapterOption.series[0].data;
var index = 0;
var total = 0;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
index = i;
}
}
arr.push(
"{name|" + name + "}",
"{text|" + " " + ":" + " " + "}",
"{value|" + data[index].value + "}",
"{text|" + " " + "台" + "}"
);
return arr.join("");
},
textStyle: {
color: function (name) {
const dataSeries = adapterOption.series[1].data; // data
const index = dataSeries.findIndex(
(item) => item.name === name
);
const colorList = ["#2df499", "#08c8ff"]; //
return colorList[index];
},
rich: {
name: {
align: "left",
fontSize: titleFontSize * 1.6,
},
text: {
align: "left",
fontSize: titleFontSize * 1.6,
},
value: {
align: "left",
fontSize: titleFontSize * 1.6,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
percentage: {
align: "left",
fontSize: titleFontSize * 1.6,
// color: function (params) {
// let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex });
// },
},
},
},
},
series: [
{
name: "温度监测:",
data: [
{ value: 0, name: "运行" },
{ value: 0, name: "不运行" },
],
itemStyle: {
color: function (params) {
var colorList = ["#2df499", "#08c8ff"];
return colorList[params.dataIndex];
},
// borderWidth: 5,
borderColor: "#002a56",
},
},
{
data: [
{ value: 0, name: "运行" },
{ value: 0, name: "不运行" },
],
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
}
});
},
//chartInstance-
initChart() {
this.chartInstance = echarts.init(this.$refs.pumpChart_ref);
this.option = {
//
title: {
subtext: this.allData,
textStyle: {
color: "#ffffff",
fontSize: 20,
},
subtextStyle: {
color: "#ffffff",
},
textAlign: "center",
x: "28.5%",
y: "35%", //
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
//
legend: {
orient: "vertical", //
right: "10%", //
top: "center", //
//
textStyle: {
color: "#ffffff",
// fontSize: 18,
},
},
series: [
//
{
name: "温度监测:",
type: "pie",
radius: ["50%", "62%"],
center: ["30%", "44%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
itemStyle: {
color: function (params) {
var colorList = ["#2df499", "#08c8ff"];
return colorList[params.dataIndex];
},
borderWidth: 5,
borderColor: "#002a56",
},
z: 10, //,
},
//
{
type: "pie",
radius: ["40%", "52%"],
center: ["30%", "44%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
silent: true,
labelLine: {
show: false,
},
//
itemStyle: {
color: function (colors) {
var colorList = ["#09596b", "#024e7d"];
return colorList[colors.dataIndex];
},
},
z: 15,
},
//
{
//
color: ["#305376"],
type: "pie",
silent: true, //
// hoverAnimation: false, //
// 使emphasis.scale true
// silent: true,
// center
radius: ["28%", "29%"],
center: ["30%", "44%"],
label: {
show: false,
},
data: [
{
value: 0,
name: "",
itemStyle: {},
},
],
},
//
{
//
type: "pie",
silent: true, //
// hoverAnimation: false, //
// 使emphasis.scale true
// silent: true,
// center
radius: ["0%", "29%"],
center: ["30%", "44%"],
label: {
show: false,
},
data: [
{
value: 0,
name: "",
itemStyle: {},
},
],
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: "#002a55" }, // 0%
{ offset: 1, color: "#0a457a" }, // 100%
],
global: false, // false
},
},
},
],
};
//
this.chartInstance.setOption(this.option, true);
},
handleEnter(index) {
this.currentIndex = index;
this.renderingBroken();
},
//chartInstance2 线
initChart2() {
this.brokenInstanc = echarts.init(this.$refs.analyse_ref);
this.brokenOption = {
tooltip: {
trigger: "axis",
},
legend: {
show: false,
selectedMode: false, //
icon: "cricle", //
//
textStyle: {
color: "#ffff",
fontSize: 16, //
},
// left: "73%",
left: "66%",
top: "0",
//
itemGap: 5,
itemWidth: 10,
itemHeight: 5,
},
grid: {
top: "4%",
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
//true
boundaryGap: true,
// x
axisLabel: {
// interval: 0, //x
// rotate: 30, //x30
color: "rgba(255, 255, 255, 1)",
fontSize: 14, //
},
axisTick: {
show: false, // 线
},
// x
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x线
data: this.brokenTime,
},
yAxis: {
min: 0,
// max:20,
// // // min:'dataMin',
// // // max:'dataMax',
// name: "kwh", // y
// name
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
fontSize: 14, //
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
},
series: [
{
type: "line",
//
symbolSize: 8,
data: this.brokenData1,
//线
itemStyle: {
color: "#d48e17", //线
lineStyle: {
color: "#d48e17", //线
},
},
},
],
};
//
this.brokenInstanc.setOption(this.brokenOption, true);
},
//线
screenAdapter2() {
console.log("没有数据吗", this.brokenData1);
//,2.6 mes_ref
const titleFontSize = this.$refs.analyse_ref.offsetWidth / 130;
const adapterOption = {};
//.chartInstanceoptiondataoption
this.brokenInstanc.setOption(adapterOption);
//resize
this.brokenInstanc.resize();
},
// 线
getTableData() {
let date = new Date();
let year = date.getFullYear().toString();
let month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1).toString()
: (date.getMonth() + 1).toString();
let day =
date.getDate() < 10
? "0" + date.getDate().toString()
: date.getDate().toString();
let start = year + "-" + month + "-01"; //
let end = year + "-" + month + "-" + day; //
const dailyParams = {
type: 1,
buildingId: "所有",
page: 1,
limit: 31,
startDate: getDay(-1),
endDate: getDay(-1),
};
const monthlyParams = {
type: 1,
buildingId: "所有",
page: 1,
limit: 31,
startDate: start,
endDate: end,
};
//
Promise.all([hotEnergyQuery(dailyParams), hotEnergyQuery(monthlyParams)])
.then(([dailyResponse, monthlyResponse]) => {
console.log("昨日数据", dailyResponse);
if (
dailyResponse.code == 200 &&
dailyResponse.rows !== null &&
dailyResponse.rows.length > 0
) {
this.electWater = dailyResponse.rows[0].electWater;
this.electValue = dailyResponse.rows[0].electValue;
this.useHotWater = dailyResponse.rows[0].useHotWater;
} else {
this.electWater = 0;
this.electValue = 0;
this.useHotWater = 0;
}
console.log("当月数据", monthlyResponse);
this.brokenData1 = [];
this.brokenData2 = [];
this.brokenData3 = [];
this.brokenTime = [];
if (monthlyResponse.code == 200) {
monthlyResponse.rows.forEach((item) => {
this.brokenData1.push(item.useHotWater);
this.brokenData2.push(item.electValue);
this.brokenData3.push(item.electWater);
if (item.curDate.includes("-")) {
var oneStr = item.curDate.split("-");
this.brokenTime.push(
oneStr[oneStr.length - 2] + "-" + oneStr[oneStr.length - 1]
);
}
});
//
this.brokenData1.reverse();
this.brokenData2.reverse();
this.brokenData3.reverse();
this.brokenTime.reverse();
this.renderingBroken();
} else {
this.brokenData1 = [];
this.brokenData2 = [];
this.brokenData3 = [];
this.brokenTime = [];
this.renderingBroken();
}
})
.catch((error) => {
console.error("请求数据时出错:", error);
});
},
renderingBroken() {
if (this.currentIndex === 0) {
this.brokenOption.series[0].data = this.brokenData1;
this.brokenOption.series[0].itemStyle.color = "#d48e17";
} else if (this.currentIndex === 1) {
this.brokenOption.series[0].data = this.brokenData2;
this.brokenOption.series[0].itemStyle.color = "#1ab395";
} else if (this.currentIndex === 2) {
this.brokenOption.series[0].data = this.brokenData3;
this.brokenOption.series[0].itemStyle.color = "#1f8dee";
}
//
const currentIndex = this.currentIndex;
// tooltip
this.brokenOption.tooltip = {
trigger: "axis",
formatter: function (params) {
//
const data = params[0];
const month = data.name;
const value = data.value;
//
if (currentIndex === 0) {
return `${month}<br/>用水量: ${value}`;
} else if (currentIndex === 1) {
return `${month}<br/>用电量: ${value}`;
} else if (currentIndex === 2) {
return `${month}<br/>单耗: ${value} 度/吨`;
}
},
};
this.brokenOption.xAxis.data = this.brokenTime;
this.brokenInstanc.setOption(this.brokenOption);
},
},
};
</script>
<style lang="scss" scoped>
.overview-top {
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
margin-bottom: 0.2rem;
.overview-top-left {
width: 65%;
.overview-data {
width: 100%;
padding: 0.5rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.overview-data-li {
width: 1.8rem;
height: 1.65rem;
position: relative;
.overview-img {
width: 1.8rem;
height: 1.65rem;
position: absolute;
top: 0;
}
.overview-num {
font-family: DIN-Bold;
font-size: 0.3rem;
font-weight: bold;
font-stretch: normal;
line-height: 0.5rem;
letter-spacing: 0px;
color: #ffffff;
position: absolute;
top: 0.28rem;
right: 0;
}
.overview-title {
font-family: SourceHanSansCN-Regular;
font-size: 0.18rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.22rem;
letter-spacing: 0px;
color: #ffffff;
position: absolute;
top: 0.77rem;
right: 0;
}
}
}
}
.overview-top-right {
width: 33%;
.pump-charts {
width: 100%;
height: 2.65rem;
}
}
}
.overview-bottom {
.choice {
margin: 20px;
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
.brokenEcharts {
width: 100%;
height: 4rem;
}
}
</style>

105
src/views/hotWater/waterControl/index.vue

@ -67,7 +67,7 @@
/>
<div class="monitor-words">
<div class="words-li">
<div class="ash">开关状态:</div>
<div class="ash">运行状态模式:</div>
<div class="white">
<el-select
v-model="item.hotPumpStatus"
@ -1061,12 +1061,12 @@ export default {
param: param,
};
console.log("操作参数", data);
// loading
this.loading = true;
operationConrol([data])
.then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("指令下发成功!");
// loading
this.loading = true;
// ;
setTimeout(() => {
this.getWaterList().finally(() => {
@ -1437,6 +1437,105 @@ export default {
}
}
}
// 2000px
@media (min-width: 2000px) {
.app-container {
.left-tree {
width: 2.56rem !important;
padding: 0.15rem 0.1rem !important;
min-height: 8rem !important;
.status {
margin-top: 0.2rem !important;
.status-li {
margin-bottom: 0.15rem !important;
}
.status1,
.status2,
.status3,
.status4 {
margin-bottom: 0.05rem !important;
}
.status1::before,
.status2::before,
.status3::before,
.status4::before {
width: 0.1rem !important;
height: 0.1rem !important;
margin-right: 0.05rem !important;
}
}
}
.right-monitor {
width: calc(100% - 2.8rem) !important;
.buildingDiv {
padding-left: 0.54rem !important;
margin-bottom: 0.2rem !important;
.title-bg {
width: 2.08rem !important;
height: 0.38rem !important;
}
.title-word {
font-size: 0.24rem !important;
}
}
.monitor-context {
height: 6.4rem !important;
}
}
.monitor-context {
height: 6.5rem !important;
.monitor-li {
min-height: 1.6rem !important;
width: calc(33.33% - 0.2rem) !important;
margin: 0 0.1rem !important;
padding-bottom: 0.25rem !important;
margin-bottom: 0.16rem !important;
border-radius: 0.1rem !important;
.monitor-title {
height: 0.5rem !important;
font-size: 0.18rem !important;
line-height: 0.4rem !important;
}
.monitor-flex {
margin-top: 0.2rem !important;
.monitor-flex-left {
.control-bottom {
margin-top: 0.2rem !important;
}
.ash {
margin-right: 0.08rem !important;
}
.words-li {
font-size: 0.16rem !important;
line-height: 0.28rem !important;
margin-bottom: 0.1rem !important;
}
.control-bottom {
.words-li4 {
.ash {
width: 1.3rem !important;
}
}
.words-li5 {
.ash2 {
width: 1rem !important;
}
}
.words-li6 {
.ash2 {
width: 1rem !important;
}
}
}
}
}
}
.monitor-li::before {
border-radius: 0.1rem !important;
}
}
}
}
</style>
<style scoped>
/* 自定义高亮颜色 */

58
src/views/login.vue

@ -26,7 +26,7 @@
auto-complete="off"
placeholder="账号"
>
<svg-icon
<svg-icon
slot="prefix"
icon-class="login_icon_user"
class="el-input__icon input-icon"
@ -225,13 +225,13 @@ export default {
color: #fff9f9;
text-shadow: 0rem 0.02rem 0.01rem rgba(0, 0, 0, 0.32);
}
.login_img_top{
.login_img_top {
position: absolute;
top: 0;
width: 18.27rem;
height: 1.13rem;
}
.login_img_down{
.login_img_down {
position: absolute;
bottom: 0;
width: 18.66rem;
@ -256,12 +256,12 @@ export default {
line-height: 25px;
letter-spacing: 0px;
text-shadow: 0px 2px 1px rgba(120, 200, 247, 0.3);
background-image: linear-gradient(to bottom, #FFFFFF,#B0DBFF);
background-image: linear-gradient(to bottom, #ffffff, #b0dbff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.el-input {
height: 56px;
color: #fff;
@ -311,18 +311,62 @@ export default {
right: 0.8rem;
}
}
@media (max-width: 750px){
@media (max-width: 750px) {
.login-form {
transform: scale(0.8); /* 缩小到80%的大小 */
transform-origin: center; /* 确保缩放是以div中心为基准 */
right: auto !important;
}
}
@media (max-width: 450px){
@media (max-width: 450px) {
.login-form {
transform: scale(0.7); /* 缩小到80%的大小 */
transform-origin: center; /* 确保缩放是以div中心为基准 */
right: auto !important;
}
}
// 2000px
@media (min-width: 2000px) {
.login-form {
width: 5.08rem !important;
height: 5.42rem !important;
padding: 1.33rem 0.84rem 0.84rem 0.84rem !important;
.title {
margin: 0px auto 0.48rem auto !important;
font-size: 0.34rem !important;
line-height: 0.25rem !important;
}
.el-input {
height: 0.56rem !important;
input {
height: 0.56rem !important;
}
}
.el-input__inner {
border: solid 0.02rem #0662a4 !important;
font-size: 0.16rem !important;
}
.el-form-item {
margin-bottom: 0.28rem !important;
}
.el-input--prefix .el-input__inner {
padding-left: 0.57rem !important;
padding-top: 0.19rem !important;
padding-bottom: 0.19rem !important;
}
.input-icon {
height: 0.24rem !important;
width: 0.24rem !important;
margin-left: 0.13rem !important;
}
.show-pwd {
margin-right: 0.05rem !important;
font-size: 0.16rem !important;
}
.el-button--medium{
height: 0.53rem !important;
}
}
}
</style>

14
src/views/region/index.vue

@ -587,7 +587,7 @@ export default {
this.getRoomMes();
} else if (this.currentLevel === 4) {
// id
getHouse(th8is.currentId).then((res) => {
getHouse(this.currentId).then((res) => {
console.log("详情返回", res);
if (res.code == 200) {
this.tableData = [res.data];
@ -1343,6 +1343,18 @@ export default {
}
}
}
// 2000px
@media (min-width: 2000px) {
.left-tree {
width: 3.5rem !important;
padding: 0.15rem 0.1em !important;
height: 8rem !important;
}
.treeTable {
margin-left: 0.2rem !important;
width: calc(100% - 3, 7rem) !important;
}
}
</style>
<style scoped>
/* 自定义高亮颜色 */

2
src/views/system/user/authRole.vue

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<h4 class="form-header h4">基本信息</h4>
<el-form ref="form" :model="form" label-width="80px">
<el-form ref="form" :model="form">
<el-row>
<el-col :span="8" :offset="2">
<el-form-item label="用户昵称" prop="nickName">

52
src/views/system/user/index.vue

@ -16,20 +16,20 @@
<!--用户数据-->
<pane size="84">
<el-col>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
<el-form-item label="用户名称" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
<el-select v-model="queryParams.status" placeholder="用户状态" clearable >
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<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>
<div style="margin-bottom: 15px;">
<div class="primary-btn"><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button></div>
@ -79,7 +79,7 @@
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
<el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
</el-dropdown-menu>
@ -95,8 +95,8 @@
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
@ -550,4 +550,38 @@ export default {
}
}
};
</script>
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-form-item--medium .el-form-item__content {
width: 100%;
}
::v-deep .el-dialog .el-form-item__label {
width: 110px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.1rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>

42
src/views/temSys/temHistory/index.vue

@ -321,9 +321,51 @@ export default {
height: 750px !important;
}
}
// 2000px
@media (min-width: 2000px) {
.elCascader {
width: 3.5rem !important;
}
.history {
.history-li {
width: calc(49% - 0.2rem) !important;
height: 3.4rem !important;
margin: 0 0.1rem !important;
padding: 0.2rem !important;
border-radius: 0.2rem !important;
margin-bottom: 0.2rem !important;
.history-top {
.room {
font-size: 0.2rem !important;
}
.change {
width: 0.3rem !important;
height: 0.3rem !important;
}
}
.title {
font-size: 0.15rem !important;
margin: 0.1rem 0 !important;
}
}
.oneClass {
width: 100% !important;
height: 7.5rem !important;
}
.twoClass {
height: 7.5rem !important;
}
}
}
</style>
<style scoped>
.elCascader >>> .el-input__inner::placeholder {
color: transparent !important;
}
/* // 媒体查询,适配大于2000px分辨率的大屏样式 */
@media (min-width: 2000px) {
.condition-left >>> .el-form-item__label {
width: 0.68rem !important;
}
}
</style>

109
src/views/temSys/temMonitor/index.vue

@ -47,7 +47,7 @@
<div class="wanrn-li">
<i class="el-icon-message-solid" style="color: #fa260a"></i>
<span>离线设备:</span>
<span class="gray-text">{{ offlineData/2 }}</span>
<span class="gray-text">{{ offlineData / 2 }}</span>
</div>
</div>
</div>
@ -161,7 +161,7 @@
<script>
import { spaceTree } from "@/api/region";
import { format } from "@/utils/datetime";
import { format } from "@/utils/datetime";
import { temList, temHistory } from "@/api/temSys/temMonitor";
import * as echarts from "echarts";
export default {
@ -212,6 +212,7 @@ export default {
return item.label && item.label.includes("温度监测");
});
}
console.log("newRes.data[0]", newRes.data[0]);
// 1 4
const targetLevel = 4;
// data[0] 1
@ -877,6 +878,110 @@ export default {
width: calc(100% - 40px) !important;
}
}
// 2000px
@media (min-width: 2000px) {
.app-container {
.left-tree {
width: 2.56rem !important;
padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
}
.right-monitor {
width: calc(100% - 2.8rem) !important;
.buildingDiv {
padding-left: 0.54rem !important;
margin-bottom: 0.2rem !important;
.title-bg {
width: 2.08rem !important;
height: 0.38rem !important;
}
.title-word {
font-size: 0.24rem !important;
}
.buildingDiv-right {
margin-right: 0.2rem !important;
font-size: 0.18rem !important;
.wanrn-li {
margin-right: 0.5rem !important;
.el-icon-message-solid {
margin-right: 0.03rem !important;
}
.red-text {
font-size: 0.2rem !important;
margin-left: 0.05rem !important;
}
.gray-text {
font-size: 0.2rem !important;
margin-left: 0.05rem !important;
}
}
}
}
.tem-data {
height: 8rem !important;
.tem-li {
width: calc(33.33% - 0.2rem) !important;
height: 2.55rem !important;
padding: 0.2rem !important;
margin: 0 0.1rem 0.2rem 0.1rem !important;
.temli-top {
font-size: 0.18rem !important;
margin-bottom: 0.15rem !important;
.top-right {
.online {
margin: 0 0.15rem 0 0 !important;
width: 0.25rem !important;
height: 0.18rem !important;
}
}
}
.temli-title {
height: 0.4rem !important;
font-size: 0.2rem !important;
margin-left: 0.07rem !important;
}
.warning-img {
width: 0.35rem !important;
height: 0.35rem !important;
margin-right: 0.1rem !important;
}
.tem {
font-size: 0.18rem !important;
.tem-word {
.tem-img {
width: 0.8rem !important;
height: 0.8rem !important;
margin-right: 0.15rem !important;
}
.tem-middle {
.en-text {
font-size: 0.13rem !important;
margin-top: 0.1rem !important;
}
}
}
.tem-right {
font-size: 0.16rem !important;
margin-top: 0.15rem !important;
.tem-num {
font-size: 0.3rem !important;
margin-right: 0.1rem !important;
}
}
}
.details {
width: 0.4rem !important;
height: 0.4rem !important;
line-height: 0.4rem !important;
}
}
}
}
}
.charts {
width: 870px;
height: 300px;
}
}
</style>
<style scoped>
/* 自定义高亮颜色 */

473
src/views/tool/build/index.vue

@ -2,9 +2,7 @@
<div class="container">
<div class="left-board">
<div class="logo-wrapper">
<div class="logo">
<img :src="logo" alt="logo"> Form Generator
</div>
<div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
</div>
<el-scrollbar class="left-scrollbar">
<div class="components-list">
@ -21,7 +19,9 @@
@end="onEnd"
>
<div
v-for="(element, index) in inputComponents" :key="index" class="components-item"
v-for="(element, index) in inputComponents"
:key="index"
class="components-item"
@click="addComponent(element)"
>
<div class="components-body">
@ -58,12 +58,18 @@
<svg-icon icon-class="component" /> 布局型组件
</div>
<draggable
class="components-draggable" :list="layoutComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
draggable=".components-item" :sort="false" @end="onEnd"
class="components-draggable"
:list="layoutComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
>
<div
v-for="(element, index) in layoutComponents" :key="index" class="components-item"
v-for="(element, index) in layoutComponents"
:key="index"
class="components-item"
@click="addComponent(element)"
>
<div class="components-body">
@ -81,10 +87,20 @@
<el-button icon="el-icon-download" type="text" @click="download">
导出vue文件
</el-button>
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
<el-button
class="copy-btn-main"
icon="el-icon-document-copy"
type="text"
@click="copy"
>
复制代码
</el-button>
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
<el-button
class="delete-btn"
icon="el-icon-delete"
type="text"
@click="empty"
>
清空
</el-button>
</div>
@ -96,7 +112,12 @@
:disabled="formConf.disabled"
:label-width="formConf.labelWidth + 'px'"
>
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
<draggable
class="drawing-board"
:list="drawingList"
:animation="340"
group="componentsGroup"
>
<draggable-item
v-for="(element, index) in drawingList"
:key="element.renderKey"
@ -131,28 +152,38 @@
:show-file-name="showFileName"
@confirm="generate"
/>
<input id="copyNode" type="hidden">
<input id="copyNode" type="hidden" />
</div>
</template>
<script>
import draggable from 'vuedraggable'
import beautifier from 'js-beautify'
import ClipboardJS from 'clipboard'
import render from '@/utils/generator/render'
import RightPanel from './RightPanel'
import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
import { beautifierConf, titleCase } from '@/utils/index'
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
import { makeUpJs } from '@/utils/generator/js'
import { makeUpCss } from '@/utils/generator/css'
import drawingDefault from '@/utils/generator/drawingDefault'
import logo from '@/assets/logo/logo.png'
import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem'
import draggable from "vuedraggable";
import beautifier from "js-beautify";
import ClipboardJS from "clipboard";
import render from "@/utils/generator/render";
import RightPanel from "./RightPanel";
import {
inputComponents,
selectComponents,
layoutComponents,
formConf,
} from "@/utils/generator/config";
import { beautifierConf, titleCase } from "@/utils/index";
import {
makeUpHtml,
vueTemplate,
vueScript,
cssStyle,
} from "@/utils/generator/html";
import { makeUpJs } from "@/utils/generator/js";
import { makeUpCss } from "@/utils/generator/css";
import drawingDefault from "@/utils/generator/drawingDefault";
import logo from "@/assets/logo/logo.png";
import CodeTypeDialog from "./CodeTypeDialog";
import DraggableItem from "./DraggableItem";
let oldActiveId
let tempActiveData
let oldActiveId;
let tempActiveData;
export default {
components: {
@ -160,7 +191,7 @@ export default {
render,
RightPanel,
CodeTypeDialog,
DraggableItem
DraggableItem,
},
data() {
return {
@ -179,208 +210,214 @@ export default {
dialogVisible: false,
generateConf: null,
showFileName: false,
activeData: drawingDefault[0]
}
activeData: drawingDefault[0],
};
},
created() {
// firefox
document.body.ondrop = event => {
event.preventDefault()
event.stopPropagation()
}
document.body.ondrop = (event) => {
event.preventDefault();
event.stopPropagation();
};
},
watch: {
// eslint-disable-next-line func-names
'activeData.label': function (val, oldVal) {
"activeData.label": function (val, oldVal) {
if (
this.activeData.placeholder === undefined
|| !this.activeData.tag
|| oldActiveId !== this.activeId
this.activeData.placeholder === undefined ||
!this.activeData.tag ||
oldActiveId !== this.activeId
) {
return
return;
}
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
this.activeData.placeholder =
this.activeData.placeholder.replace(oldVal, "") + val;
},
activeId: {
handler(val) {
oldActiveId = val
oldActiveId = val;
},
immediate: true
}
immediate: true,
},
},
mounted() {
const clipboard = new ClipboardJS('#copyNode', {
text: trigger => {
const codeStr = this.generateCode()
const clipboard = new ClipboardJS("#copyNode", {
text: (trigger) => {
const codeStr = this.generateCode();
this.$notify({
title: '成功',
message: '代码已复制到剪切板,可粘贴。',
type: 'success'
})
return codeStr
}
})
clipboard.on('error', e => {
this.$message.error('代码复制失败')
})
title: "成功",
message: "代码已复制到剪切板,可粘贴。",
type: "success",
});
return codeStr;
},
});
clipboard.on("error", (e) => {
this.$message.error("代码复制失败");
});
},
methods: {
activeFormItem(element) {
this.activeData = element
this.activeId = element.formId
this.activeData = element;
this.activeId = element.formId;
},
onEnd(obj, a) {
if (obj.from !== obj.to) {
this.activeData = tempActiveData
this.activeId = this.idGlobal
this.activeData = tempActiveData;
this.activeId = this.idGlobal;
}
},
addComponent(item) {
const clone = this.cloneComponent(item)
this.drawingList.push(clone)
this.activeFormItem(clone)
const clone = this.cloneComponent(item);
this.drawingList.push(clone);
this.activeFormItem(clone);
},
cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin))
clone.formId = ++this.idGlobal
clone.span = formConf.span
clone.renderKey = +new Date() // renderKey
if (!clone.layout) clone.layout = 'colFormItem'
if (clone.layout === 'colFormItem') {
clone.vModel = `field${this.idGlobal}`
clone.placeholder !== undefined && (clone.placeholder += clone.label)
tempActiveData = clone
} else if (clone.layout === 'rowFormItem') {
delete clone.label
clone.componentName = `row${this.idGlobal}`
clone.gutter = this.formConf.gutter
tempActiveData = clone
const clone = JSON.parse(JSON.stringify(origin));
clone.formId = ++this.idGlobal;
clone.span = formConf.span;
clone.renderKey = +new Date(); // renderKey
if (!clone.layout) clone.layout = "colFormItem";
if (clone.layout === "colFormItem") {
clone.vModel = `field${this.idGlobal}`;
clone.placeholder !== undefined && (clone.placeholder += clone.label);
tempActiveData = clone;
} else if (clone.layout === "rowFormItem") {
delete clone.label;
clone.componentName = `row${this.idGlobal}`;
clone.gutter = this.formConf.gutter;
tempActiveData = clone;
}
return tempActiveData
return tempActiveData;
},
AssembleFormData() {
this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)),
...this.formConf
}
...this.formConf,
};
},
generate(data) {
const func = this[`exec${titleCase(this.operationType)}`]
this.generateConf = data
func && func(data)
const func = this[`exec${titleCase(this.operationType)}`];
this.generateConf = data;
func && func(data);
},
execRun(data) {
this.AssembleFormData()
this.drawerVisible = true
this.AssembleFormData();
this.drawerVisible = true;
},
execDownload(data) {
const codeStr = this.generateCode()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
this.$download.saveAs(blob, data.fileName)
const codeStr = this.generateCode();
const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
this.$download.saveAs(blob, data.fileName);
},
execCopy(data) {
document.getElementById('copyNode').click()
document.getElementById("copyNode").click();
},
empty() {
this.$confirm('确定要清空所有组件吗?', '提示', { type: 'warning' }).then(
this.$confirm("确定要清空所有组件吗?", "提示", { type: "warning" }).then(
() => {
this.drawingList = []
this.drawingList = [];
}
)
);
},
drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item))
clone = this.createIdAndKey(clone)
parent.push(clone)
this.activeFormItem(clone)
let clone = JSON.parse(JSON.stringify(item));
clone = this.createIdAndKey(clone);
parent.push(clone);
this.activeFormItem(clone);
},
createIdAndKey(item) {
item.formId = ++this.idGlobal
item.renderKey = +new Date()
if (item.layout === 'colFormItem') {
item.vModel = `field${this.idGlobal}`
} else if (item.layout === 'rowFormItem') {
item.componentName = `row${this.idGlobal}`
item.formId = ++this.idGlobal;
item.renderKey = +new Date();
if (item.layout === "colFormItem") {
item.vModel = `field${this.idGlobal}`;
} else if (item.layout === "rowFormItem") {
item.componentName = `row${this.idGlobal}`;
}
if (Array.isArray(item.children)) {
item.children = item.children.map(childItem => this.createIdAndKey(childItem))
item.children = item.children.map((childItem) =>
this.createIdAndKey(childItem)
);
}
return item
return item;
},
drawingItemDelete(index, parent) {
parent.splice(index, 1)
parent.splice(index, 1);
this.$nextTick(() => {
const len = this.drawingList.length
const len = this.drawingList.length;
if (len) {
this.activeFormItem(this.drawingList[len - 1])
this.activeFormItem(this.drawingList[len - 1]);
}
})
});
},
generateCode() {
const { type } = this.generateConf
this.AssembleFormData()
const script = vueScript(makeUpJs(this.formData, type))
const html = vueTemplate(makeUpHtml(this.formData, type))
const css = cssStyle(makeUpCss(this.formData))
return beautifier.html(html + script + css, beautifierConf.html)
const { type } = this.generateConf;
this.AssembleFormData();
const script = vueScript(makeUpJs(this.formData, type));
const html = vueTemplate(makeUpHtml(this.formData, type));
const css = cssStyle(makeUpCss(this.formData));
return beautifier.html(html + script + css, beautifierConf.html);
},
download() {
this.dialogVisible = true
this.showFileName = true
this.operationType = 'download'
this.dialogVisible = true;
this.showFileName = true;
this.operationType = "download";
},
run() {
this.dialogVisible = true
this.showFileName = false
this.operationType = 'run'
this.dialogVisible = true;
this.showFileName = false;
this.operationType = "run";
},
copy() {
this.dialogVisible = true
this.showFileName = false
this.operationType = 'copy'
this.dialogVisible = true;
this.showFileName = false;
this.operationType = "copy";
},
tagChange(newTag) {
newTag = this.cloneComponent(newTag)
newTag.vModel = this.activeData.vModel
newTag.formId = this.activeId
newTag.span = this.activeData.span
delete this.activeData.tag
delete this.activeData.tagIcon
delete this.activeData.document
Object.keys(newTag).forEach(key => {
if (this.activeData[key] !== undefined
&& typeof this.activeData[key] === typeof newTag[key]) {
newTag[key] = this.activeData[key]
newTag = this.cloneComponent(newTag);
newTag.vModel = this.activeData.vModel;
newTag.formId = this.activeId;
newTag.span = this.activeData.span;
delete this.activeData.tag;
delete this.activeData.tagIcon;
delete this.activeData.document;
Object.keys(newTag).forEach((key) => {
if (
this.activeData[key] !== undefined &&
typeof this.activeData[key] === typeof newTag[key]
) {
newTag[key] = this.activeData[key];
}
})
this.activeData = newTag
this.updateDrawingList(newTag, this.drawingList)
});
this.activeData = newTag;
this.updateDrawingList(newTag, this.drawingList);
},
updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.formId === this.activeId)
const index = list.findIndex((item) => item.formId === this.activeId);
if (index > -1) {
list.splice(index, 1, newTag)
list.splice(index, 1, newTag);
} else {
list.forEach(item => {
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
})
list.forEach((item) => {
if (Array.isArray(item.children))
this.updateDrawingList(newTag, item.children);
});
}
}
}
}
},
},
};
</script>
<style lang='scss'>
.editor-tabs{
<style lang="scss">
.editor-tabs {
background: #121315;
.el-tabs__header{
.el-tabs__header {
margin: 0;
border-bottom-color: #121315;
.el-tabs__nav{
.el-tabs__nav {
border-color: #121315;
}
}
.el-tabs__item{
.el-tabs__item {
height: 32px;
line-height: 32px;
color: #888a8e;
@ -389,15 +426,15 @@ export default {
margin-right: 5px;
user-select: none;
}
.el-tabs__item.is-active{
.el-tabs__item.is-active {
background: #1e1e1e;
border-bottom-color: #1e1e1e!important;
border-bottom-color: #1e1e1e !important;
color: #fff;
}
.el-icon-edit{
.el-icon-edit {
color: #f1fa8c;
}
.el-icon-document{
.el-icon-document {
color: #a95812;
}
}
@ -413,24 +450,24 @@ export default {
overflow-x: hidden !important;
margin-bottom: 0 !important;
}
.center-tabs{
.el-tabs__header{
margin-bottom: 0!important;
.center-tabs {
.el-tabs__header {
margin-bottom: 0 !important;
}
.el-tabs__item{
.el-tabs__item {
width: 50%;
text-align: center;
}
.el-tabs__nav{
.el-tabs__nav {
width: 100%;
}
}
.reg-item{
.reg-item {
padding: 12px 6px;
background: #f8f8f8;
position: relative;
border-radius: 4px;
.close-btn{
.close-btn {
position: absolute;
right: -6px;
top: -6px;
@ -445,16 +482,16 @@ export default {
z-index: 1;
cursor: pointer;
font-size: 12px;
&:hover{
background: rgba(210, 23, 23, 0.5)
&:hover {
background: rgba(210, 23, 23, 0.5);
}
}
& + .reg-item{
& + .reg-item {
margin-top: 18px;
}
}
.action-bar{
& .el-button+.el-button {
.action-bar {
& .el-button + .el-button {
margin-left: 15px;
}
& i {
@ -465,37 +502,37 @@ export default {
}
}
.custom-tree-node{
.custom-tree-node {
width: 100%;
font-size: 14px;
.node-operation{
.node-operation {
float: right;
}
i[class*="el-icon"] + i[class*="el-icon"]{
i[class*="el-icon"] + i[class*="el-icon"] {
margin-left: 6px;
}
.el-icon-plus{
color: #409EFF;
.el-icon-plus {
color: #409eff;
}
.el-icon-delete{
.el-icon-delete {
color: #157a0c;
}
}
.left-scrollbar .el-scrollbar__view{
.left-scrollbar .el-scrollbar__view {
overflow-x: hidden;
}
.el-rate{
.el-rate {
display: inline-block;
vertical-align: text-top;
}
.el-upload__tip{
.el-upload__tip {
line-height: 1.2;
}
$selectedColor: #f6f7ff;
$lighterBlue: #409EFF;
$lighterBlue: #409eff;
.container {
position: relative;
@ -514,14 +551,14 @@ $lighterBlue: #409EFF;
transition: transform 0ms !important;
}
}
.components-draggable{
.components-draggable {
padding-bottom: 20px;
}
.components-title{
.components-title {
font-size: 14px;
color: #ffffff;
margin: 6px 2px;
.svg-icon{
.svg-icon {
color: #666;
font-size: 18px;
}
@ -534,7 +571,7 @@ $lighterBlue: #409EFF;
cursor: move;
border: 1px dashed #436efc;
border-radius: 3px;
.svg-icon{
.svg-icon {
color: #777;
font-size: 15px;
}
@ -554,7 +591,7 @@ $lighterBlue: #409EFF;
top: 0;
height: 100vh;
}
.left-scrollbar{
.left-scrollbar {
height: calc(100vh - 42px);
overflow: hidden;
}
@ -571,7 +608,7 @@ $lighterBlue: #409EFF;
margin: 0 350px 0 260px;
box-sizing: border-box;
}
.empty-info{
.empty-info {
position: absolute;
top: 46%;
left: 0;
@ -581,7 +618,7 @@ $lighterBlue: #409EFF;
color: #ccb1ea;
letter-spacing: 4px;
}
.action-bar{
.action-bar {
position: relative;
height: 42px;
text-align: right;
@ -590,18 +627,18 @@ $lighterBlue: #409EFF;
border: 1px solid #0e5191 ;
border-top: none;
border-left: none;
.delete-btn{
color: #F56C6C;
.delete-btn {
color: #f56c6c;
}
}
.logo-wrapper{
.logo-wrapper {
position: relative;
height: 42px;
background: #4b6e91;
border-bottom: 1px solid #0e5191;
box-sizing: border-box;
}
.logo{
.logo {
position: absolute;
left: 12px;
top: 6px;
@ -610,16 +647,16 @@ $lighterBlue: #409EFF;
font-weight: 600;
font-size: 17px;
white-space: nowrap;
> img{
> img {
width: 30px;
height: 30px;
vertical-align: top;
}
.github{
.github {
display: inline-block;
vertical-align: sub;
margin-left: 15px;
> img{
> img {
height: 22px;
}
}
@ -662,32 +699,33 @@ $lighterBlue: #409EFF;
background-color: $selectedColor;
}
.active-from-item {
& > .el-form-item{
& > .el-form-item {
background: #4b6e91;
border-radius: 6px;
}
& > .drawing-item-copy, & > .drawing-item-delete{
& > .drawing-item-copy,
& > .drawing-item-delete {
display: initial;
}
& > .component-name{
& > .component-name {
color: $lighterBlue;
}
}
.el-form-item{
.el-form-item {
margin-bottom: 15px;
}
}
.drawing-item{
.drawing-item {
position: relative;
cursor: move;
&.unfocus-bordered:not(.activeFromItem) > div:first-child {
&.unfocus-bordered:not(.activeFromItem) > div:first-child {
border: 1px dashed #ccc;
}
.el-form-item{
.el-form-item {
padding: 12px 10px;
}
}
.drawing-row-item{
.drawing-row-item {
position: relative;
cursor: move;
box-sizing: border-box;
@ -698,19 +736,19 @@ $lighterBlue: #409EFF;
.drawing-row-item {
margin-bottom: 2px;
}
.el-col{
.el-col {
margin-top: 22px;
}
.el-form-item{
.el-form-item {
margin-bottom: 0;
}
.drag-wrapper{
.drag-wrapper {
min-height: 80px;
}
&.active-from-item{
&.active-from-item {
border: 1px dashed $lighterBlue;
}
.component-name{
.component-name {
position: absolute;
top: 0;
left: 0;
@ -720,17 +758,20 @@ $lighterBlue: #409EFF;
padding: 0 6px;
}
}
.drawing-item, .drawing-row-item{
.drawing-item,
.drawing-row-item {
&:hover {
& > .el-form-item{
& > .el-form-item {
background: $selectedColor;
border-radius: 6px;
}
& > .drawing-item-copy, & > .drawing-item-delete{
& > .drawing-item-copy,
& > .drawing-item-delete {
display: initial;
}
}
& > .drawing-item-copy, & > .drawing-item-delete{
& > .drawing-item-copy,
& > .drawing-item-delete {
display: none;
position: absolute;
top: -10px;
@ -744,29 +785,29 @@ $lighterBlue: #409EFF;
cursor: pointer;
z-index: 1;
}
& > .drawing-item-copy{
& > .drawing-item-copy {
right: 56px;
border-color: $lighterBlue;
color: $lighterBlue;
background: #fff;
&:hover{
&:hover {
background: $lighterBlue;
color: #fff;
}
}
& > .drawing-item-delete{
& > .drawing-item-delete {
right: 24px;
border-color: #F56C6C;
color: #F56C6C;
border-color: #f56c6c;
color: #f56c6c;
background: #fff;
&:hover{
background: #F56C6C;
&:hover {
background: #f56c6c;
color: #fff;
}
}
}
.delete-btn::before,
.delete-btn::after{
.delete-btn::after {
display: none !important;
}
</style>

Loading…
Cancel
Save