提交：监控大屏 代码
This commit is contained in:
23688nl
parent
6210e1c8ba
commit
03ee1d17f7
|
|
@ -42,7 +42,7 @@
|
|||
"core-js": "3.8.1",
|
||||
"cron-parser": "^3.3.0",
|
||||
"debounce": "^1.2.1",
|
||||
"echarts": "5.0.2",
|
||||
"echarts": "^5.3.3",
|
||||
"element-ui": "2.14.1",
|
||||
"file-saver": "2.0.4",
|
||||
"fuse.js": "6.4.3",
|
||||
|
|
@ -68,6 +68,7 @@
|
|||
"vue-cron-editor-buefy": "^0.2.17",
|
||||
"vue-cropper": "0.5.5",
|
||||
"vue-router": "3.4.9",
|
||||
"vue-seamless-scroll": "^1.1.23",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.6.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,5 +3,6 @@ window.dasConfig = {
|
|||
ip: '192.168.10.241',
|
||||
port: 30646,
|
||||
prodApi: '/prod-api',
|
||||
protocol: 'http://'
|
||||
protocol: 'http://',
|
||||
wsProtocol: 'ws://'
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -10,7 +10,7 @@
|
|||
<img :src="icon" />
|
||||
</div>
|
||||
<div class="bit-right">
|
||||
<div
|
||||
<!-- <div
|
||||
class="b_list"
|
||||
:id="'publishMain' + elementId"
|
||||
v-show="activityList && activityList.length > 0"
|
||||
|
|
@ -26,7 +26,63 @@
|
|||
</div>
|
||||
</div>
|
||||
<div :id="'publishMain2' + elementId"></div>
|
||||
</div> -->
|
||||
|
||||
<vue-seamless-scroll
|
||||
:data="activityList"
|
||||
class="b_list"
|
||||
:class-option="classOption"
|
||||
v-show="activityList && activityList.length > 0"
|
||||
:id="'publishMain' + elementId"
|
||||
style="overflow: hidden"
|
||||
>
|
||||
<div style="width: 100%">
|
||||
<div
|
||||
v-for="(item, index) in activityList"
|
||||
:key="index"
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
font-size: 14px;
|
||||
font-family: 'Source Han Sans CN';
|
||||
font-weight: 400;
|
||||
color: #89ffff;
|
||||
line-height: 37px;
|
||||
"
|
||||
>
|
||||
<span
|
||||
class="b-label"
|
||||
style="
|
||||
display: block;
|
||||
width: calc(100% - 85px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
:title="item[props['label']]"
|
||||
>{{ item[props["label"]] }}</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
display: block;
|
||||
width: 80px;
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
color: #00feff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
"
|
||||
:title="item[props['value']]"
|
||||
>{{ item[props["value"]] }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
<!-- <el-empty v-else :image-size="200"></el-empty> -->
|
||||
<div
|
||||
style="
|
||||
|
|
@ -45,8 +101,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
name: "CensusCard",
|
||||
components: {
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
|
|
@ -83,34 +143,48 @@ export default {
|
|||
elementId: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classOption() {
|
||||
return {
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: this.activityList.length < 4 ? 4 : this.activityList.length, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 100, // 单步运动停止的时间(默认值1000ms)
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.rollUp();
|
||||
});
|
||||
// this.$nextTick(() => {
|
||||
// this.rollUp();
|
||||
// });
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.timer = null;
|
||||
clearInterval(this.timer);
|
||||
// clearInterval(this.timer);
|
||||
},
|
||||
created() {
|
||||
this.elementId = new Date().getTime();
|
||||
},
|
||||
methods: {
|
||||
rollUp() {
|
||||
let ul1 = document.getElementById("publishMain1" + this.elementId);
|
||||
let ul2 = document.getElementById("publishMain2" + this.elementId);
|
||||
let box = document.getElementById("publishMain" + this.elementId);
|
||||
ul2.innerHTML = ul1.innerHTML;
|
||||
box.scrollTop = 0;
|
||||
function rollStart() {
|
||||
if (box.scrollTop >= ul1.scrollHeight) {
|
||||
box.scrollTop = 0;
|
||||
} else {
|
||||
box.scrollTop++;
|
||||
}
|
||||
}
|
||||
this.timer = setInterval(rollStart, 100);
|
||||
},
|
||||
// rollUp() {
|
||||
// let ul1 = document.getElementById("publishMain1" + this.elementId);
|
||||
// let ul2 = document.getElementById("publishMain2" + this.elementId);
|
||||
// let box = document.getElementById("publishMain" + this.elementId);
|
||||
// ul2.innerHTML = ul1.innerHTML;
|
||||
// box.scrollTop = 0;
|
||||
// function rollStart() {
|
||||
// if (box.scrollTop >= ul1.scrollHeight) {
|
||||
// box.scrollTop = 0;
|
||||
// } else {
|
||||
// box.scrollTop++;
|
||||
// }
|
||||
// }
|
||||
// this.timer = setInterval(rollStart, 100);
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -212,11 +286,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b_scroll {
|
||||
-webkit-animation: 10s scrollTop linear infinite normal;
|
||||
animation: 10s scrollTop linear infinite normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<div class="e-nav-big-card" :style="htmlType === 't2' ? 'margin-top: 10px;' : ''">
|
||||
<div :class="htmlTop">{{ title }}</div>
|
||||
<div :class="htmlCenter">
|
||||
<slot name="mk-center"></slot>
|
||||
</div>
|
||||
<div :class="htmlBottom"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "ENavCardBigScreen",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
defautl: "",
|
||||
},
|
||||
htmlType: {
|
||||
type: String,
|
||||
default: "t1",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
htmlTop: "",
|
||||
htmlCenter: "",
|
||||
htmlBottom: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.returnType();
|
||||
},
|
||||
methods: {
|
||||
returnType() {
|
||||
switch (this.htmlType) {
|
||||
case "t1":
|
||||
this.htmlTop = "mk-top mk-top-t1";
|
||||
this.htmlCenter = "mk-center-t1";
|
||||
this.htmlBottom = "mk-bottom-t1";
|
||||
break;
|
||||
|
||||
case "t2":
|
||||
this.htmlTop = "mk-top mk-top-t2";
|
||||
this.htmlCenter = "mk-center-t2";
|
||||
this.htmlBottom = "mk-bottom-t2";
|
||||
break;
|
||||
|
||||
case "t3":
|
||||
this.htmlTop = "mk-top mk-top-t3";
|
||||
this.htmlCenter = "mk-center-t3";
|
||||
this.htmlBottom = "mk-bottom-t3";
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.e-nav-big-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
.mk-top {
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
font-family: "Source Han Sans CN";
|
||||
font-weight: 600;
|
||||
color: #02d9fd;
|
||||
padding-left: 0;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
padding-bottom: 0px;
|
||||
letter-spacing: 1px;
|
||||
background-size: cover;
|
||||
padding-top: 0px;
|
||||
align-items: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.mk-top-t1 {
|
||||
background-image: url("../../../../assets/images/big/v3/boxleft-top.png");
|
||||
}
|
||||
.mk-top-t2 {
|
||||
background-image: url("../../../../assets/images/big/v3/boxbottom-top.png");
|
||||
}
|
||||
.mk-top-t3 {
|
||||
height: 28px;
|
||||
background-image: url("../../../../assets/images/big/v3/boxcenter-top.png");
|
||||
}
|
||||
.mk-center-t1 {
|
||||
width: 100%;
|
||||
background-image: url("../../../../assets/images/big/v3/boxleft-center.png");
|
||||
background-size: contain;
|
||||
padding-top: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.mk-center-t2 {
|
||||
width: 100%;
|
||||
background-image: url("../../../../assets/images/big/v3/boxbottom-center.png");
|
||||
background-size: contain;
|
||||
padding-top: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mk-center-t3 {
|
||||
width: 100%;
|
||||
background-image: url("../../../../assets/images/big/v3/boxcenter-center.png");
|
||||
background-size: contain;
|
||||
padding-top: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
padding: 0;
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
.mk-bottom-t1 {
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
background-image: url("../../../../assets/images/big/v3/boxleft-bottom.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.mk-bottom-t2 {
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
background-image: url("../../../../assets/images/big/v3/boxbottom-bottom.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.mk-bottom-t3 {
|
||||
height: 35px;
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
background-image: url("../../../../assets/images/big/v3/boxcenter-bottom.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="bigscreen-echarts-pie-t">
|
||||
<div class="e-echarts-line">
|
||||
<div :id="eId" :style="styles"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "echartsRadarWrap",
|
||||
name: "EEchartsLine",
|
||||
props: {
|
||||
eId: {
|
||||
type: String
|
||||
|
|
@ -57,10 +57,10 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bigscreen-echarts-pie-t {
|
||||
.e-echarts-line {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
width: 95%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,6 +9,8 @@ let sysWebSocket = 'ws://'
|
|||
let prodApi = window.dasConfig.ip || '/prod-api';
|
||||
let wsProtocol = 'ws://';
|
||||
let iotWebSocketAlarmBaseUrl = ''
|
||||
let bigWebSocketUrl = ''
|
||||
let port = '8899'
|
||||
|
||||
window.dasConfig = {
|
||||
ip: 'http://192.168.10.241:32024'
|
||||
|
|
@ -24,7 +26,7 @@ let httpProtocol = 'http';
|
|||
|
||||
if (env.NODE_ENV == 'development') {
|
||||
flowIotUrl = 'http://127.0.0.1:1880/#flow/'
|
||||
hrefHost = "192.168.18.139"
|
||||
hrefHost = "192.168.18.140"
|
||||
} else if(env.NODE_ENV == 'production') {
|
||||
// if (hrefHost.indexOf('.gkiiot.com') >= 0) {
|
||||
// iotHost = 'iot.gkiiot.com'
|
||||
|
|
@ -35,9 +37,11 @@ if (env.NODE_ENV == 'development') {
|
|||
if (window.dasConfig.ip) {
|
||||
hrefHost = window.dasConfig.ip
|
||||
}
|
||||
port = window.dasConfig.port
|
||||
} else if(env.NODE_ENV == 'test') {
|
||||
}
|
||||
iotWebSocketAlarmBaseUrl = sysWebSocket + hrefHost + ':8899/ws/alarm/live'
|
||||
bigWebSocketUrl = sysWebSocket + hrefHost + ( port ? ':'+ port :'') + '/ws/dev/readData'
|
||||
sysWebSocket = sysWebSocket + hrefHost + prodApi;
|
||||
iotWebSocketBaseUrl = sysWebSocket + '/ws/dev/up/'
|
||||
devLiveWebSocketBaseUrl = sysWebSocket + '/ws/dev/live/'
|
||||
|
|
@ -49,5 +53,6 @@ export {
|
|||
iotWebSocketBaseUrl,
|
||||
iotWebSocketAlarmBaseUrl,
|
||||
devLiveWebSocketBaseUrl,
|
||||
prodApi
|
||||
prodApi,
|
||||
bigWebSocketUrl
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
|||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
// axios中请求配置有baseURL选项，表示请求URL公共部分
|
||||
baseURL: process.env.NODE_ENV === "production" ? `${window.dasConfig.protocol}${window.dasConfig.ip}:${window.dasConfig.port}` : process.env.VUE_APP_BASE_API,
|
||||
baseURL: process.env.NODE_ENV === "production" ? `${window.dasConfig.protocol}${window.dasConfig.ip}${window.dasConfig.port ? ':'+window.dasConfig.port : ''}` : process.env.VUE_APP_BASE_API,
|
||||
// 超时
|
||||
timeout: 10000
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,18 +11,18 @@
|
|||
}"
|
||||
>
|
||||
<div class="main-block">
|
||||
<head-wrap
|
||||
<e-head
|
||||
ref="mainHead"
|
||||
:handelTile="title"
|
||||
:projectList="projectList"
|
||||
@eventFullscreen="eventFullscreen"
|
||||
@eventProjectId="eventProjectId"
|
||||
@eventRegionalismId="eventRegionalismId"
|
||||
></head-wrap>
|
||||
/>
|
||||
<div class="count-wrap">
|
||||
<div class="count-left">
|
||||
<div class="left-block-1">
|
||||
<project-count-temp
|
||||
<e-project-census-temp
|
||||
:props="{
|
||||
label: 'spaceName',
|
||||
key: 'spaceId',
|
||||
|
|
@ -32,10 +32,10 @@
|
|||
icon="/images/icon01.png"
|
||||
unit="（吨标准煤）"
|
||||
:tableList="projectSpaceCensusList"
|
||||
:countNum="projectStatInfo['coal']"
|
||||
></project-count-temp>
|
||||
:countNum="(projectStatInfo['coal'] / 1000).toFixed(2) || 0"
|
||||
></e-project-census-temp>
|
||||
|
||||
<project-count-temp
|
||||
<e-project-census-temp
|
||||
:props="{
|
||||
label: 'spaceName',
|
||||
key: 'spaceId',
|
||||
|
|
@ -45,10 +45,12 @@
|
|||
icon="/images/icon02.png"
|
||||
unit="（万kwh）"
|
||||
:tableList="projectSpaceCensusList"
|
||||
:countNum="projectStatInfo['ELECTRICITY_METER']"
|
||||
></project-count-temp>
|
||||
:countNum="
|
||||
(projectStatInfo['ELECTRICITY_METER'] / 10000).toFixed(2) || 0
|
||||
"
|
||||
></e-project-census-temp>
|
||||
|
||||
<trend-wrap :result="resultInfo.alarmChartDataVo || []"></trend-wrap>
|
||||
<e-trend-census :result="actualEnergyCensus" />
|
||||
</div>
|
||||
<div
|
||||
class="map-block-1"
|
||||
|
|
@ -74,7 +76,7 @@
|
|||
></map-wrap-personal>
|
||||
|
||||
<div
|
||||
style="width: 100%; display: flex; justify-content: space-between;"
|
||||
style="width: 100%; display: flex; justify-content: space-between"
|
||||
>
|
||||
<wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>
|
||||
|
||||
|
|
@ -83,17 +85,9 @@
|
|||
></device-proportion-wrap>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="bottom-block-1">
|
||||
<alarm-table-list-wrap
|
||||
:result="alarmInfoResult"
|
||||
style="margin-top: -5px"
|
||||
:projectId="projectId"
|
||||
></alarm-table-list-wrap>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="right-block-1">
|
||||
<!-- <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap> -->
|
||||
<project-count-temp
|
||||
<e-project-census-temp
|
||||
:props="{
|
||||
label: 'spaceName',
|
||||
key: 'spaceId',
|
||||
|
|
@ -103,10 +97,10 @@
|
|||
icon="/images/icon03.png"
|
||||
unit="（万吨）"
|
||||
:tableList="projectSpaceCensusList"
|
||||
:countNum="projectStatInfo['WATER_METER']"
|
||||
></project-count-temp>
|
||||
:countNum="(projectStatInfo['WATER_METER'] / 10000).toFixed(2) || 0"
|
||||
></e-project-census-temp>
|
||||
|
||||
<project-count-temp
|
||||
<e-project-census-temp
|
||||
:props="{
|
||||
label: 'spaceName',
|
||||
key: 'spaceId',
|
||||
|
|
@ -116,8 +110,8 @@
|
|||
icon="/images/icon04.png"
|
||||
unit="（万m³）"
|
||||
:tableList="projectSpaceCensusList"
|
||||
:countNum="projectStatInfo['GAS_METER']"
|
||||
></project-count-temp>
|
||||
:countNum="(projectStatInfo['GAS_METER'] / 10000).toFixed(2) || 0"
|
||||
></e-project-census-temp>
|
||||
|
||||
<type-distribution-wrap
|
||||
style="margin-top: -5px"
|
||||
|
|
@ -130,35 +124,37 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import HeadWrap from "./profile/head";
|
||||
import EHead from "./profile/EHead";
|
||||
import DeviceProportionWrap from "./profile/deviceProportion";
|
||||
import WraringInfoWrap from "./profile/wraringInfo";
|
||||
import AlarmTableListWrap from "./profile/alarmTableList";
|
||||
import TodayRatioWrap from "./profile/todayRatio";
|
||||
// import ETodayRatio from "./profile/ETodayRatio";
|
||||
import TypeDistributionWrap from "./profile/typeDistribution";
|
||||
import trendWrap from "./profile/trend";
|
||||
import ETrendCensus from "./profile/ETrendCensus";
|
||||
import MapWrap from "./profile/mapWrap";
|
||||
import MapWrapPersonal from "./profile/personalCenter";
|
||||
import { iotWebSocketAlarmBaseUrl } from "@/config/env";
|
||||
import { bigWebSocketUrl } from "@/config/env";
|
||||
import Cookies from "js-cookie";
|
||||
import { NextLoading } from "@/utils/loading";
|
||||
import ProjectCountTemp from "./profile/projectCountTemp"
|
||||
import EProjectCensusTemp from "./profile/EProjectCensusTemp";
|
||||
|
||||
import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
|
||||
import { getEnergySpaceCensusList, getEnergyCensusList } from '@/api/bigScreen/index'
|
||||
import {
|
||||
getEnergySpaceCensusList,
|
||||
getEnergyCensusList,
|
||||
} from "@/api/bigScreen/index";
|
||||
export default {
|
||||
name: "Device_oneself",
|
||||
components: {
|
||||
HeadWrap,
|
||||
EHead,
|
||||
DeviceProportionWrap,
|
||||
WraringInfoWrap,
|
||||
AlarmTableListWrap,
|
||||
TodayRatioWrap,
|
||||
// ETodayRatio,
|
||||
TypeDistributionWrap,
|
||||
trendWrap,
|
||||
ETrendCensus,
|
||||
MapWrap,
|
||||
MapWrapPersonal,
|
||||
ProjectCountTemp
|
||||
EProjectCensusTemp,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -177,7 +173,9 @@ export default {
|
|||
socket_flag: true,
|
||||
setIntervalGetCountOpt: null,
|
||||
projectStatInfo: {},
|
||||
projectSpaceCensusList: []
|
||||
projectSpaceCensusList: [],
|
||||
actualEnergyCensus: [],
|
||||
setTimeOut_flag: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -218,56 +216,69 @@ export default {
|
|||
this.getProjectList();
|
||||
this.warningAnalysisList();
|
||||
this.homeCount();
|
||||
this.getEnergyCensus()
|
||||
this.getEnergySpaceCensus()
|
||||
// this.connection();
|
||||
this.getEnergyCensus();
|
||||
this.getEnergySpaceCensus();
|
||||
this.connection();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 查询 能源数据状态情况
|
||||
getEnergyCensus() {
|
||||
getEnergyCensusList({
|
||||
projectId: this.projectId
|
||||
}).then(res => {
|
||||
this.projectStatInfo = res.data || {}
|
||||
})
|
||||
projectId: this.projectId,
|
||||
}).then((res) => {
|
||||
this.projectStatInfo = res.data || {};
|
||||
});
|
||||
},
|
||||
// 查询 能源数据 空间统计
|
||||
getEnergySpaceCensus() {
|
||||
this.projectSpaceCensusList = []
|
||||
this.projectSpaceCensusList = [];
|
||||
getEnergySpaceCensusList({
|
||||
projectId: this.projectId
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
this.projectSpaceCensusList = res.data || []
|
||||
})
|
||||
projectId: this.projectId,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.projectSpaceCensusList = res.data || [];
|
||||
});
|
||||
},
|
||||
// 创建一个ws 监听获取报警实时数据
|
||||
connection() {
|
||||
if (this.stompClient) {
|
||||
return;
|
||||
}
|
||||
if (!iotWebSocketAlarmBaseUrl) {
|
||||
if (!bigWebSocketUrl) {
|
||||
return;
|
||||
}
|
||||
this.stompClient = new WebSocket(`${iotWebSocketAlarmBaseUrl}`);
|
||||
this.stompClient = new WebSocket(
|
||||
`${bigWebSocketUrl}/${this.projectId || -1}`
|
||||
);
|
||||
this.stompClient.onmessage = this.socket_onmsg;
|
||||
this.stompClient.onclose = this.socket_onclose;
|
||||
},
|
||||
socket_onmsg(evt) {
|
||||
console.log("wsljcg:=", evt);
|
||||
const data = JSON.parse(evt.data);
|
||||
this.actualEnergyCensus = data.params || {};
|
||||
this.$forceUpdate();
|
||||
},
|
||||
socket_onclose(e) {
|
||||
this.stompClient = null;
|
||||
if (this.socket_flag) {
|
||||
this.socket_flag = false;
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
this.setTimeOut_flag = setTimeout(function () {
|
||||
_this.socket_flag = true;
|
||||
_this.connection();
|
||||
}, 10000);
|
||||
}
|
||||
},
|
||||
closeWebscoket() {
|
||||
if (this.stompClient) {
|
||||
this.stompClient.close();
|
||||
}
|
||||
this.socket_flag = false;
|
||||
this.stompClient = null;
|
||||
clearTimeout(this.setTimeOut_flag);
|
||||
},
|
||||
// 跳转路由是关闭全屏状态
|
||||
eventFullscreenMap(data) {
|
||||
this.fullscreen = data.value;
|
||||
|
|
@ -281,8 +292,10 @@ export default {
|
|||
this.projectId = data;
|
||||
this.homeCount();
|
||||
this.warningAnalysisList();
|
||||
this.getEnergyCensus()
|
||||
this.getEnergySpaceCensus()
|
||||
this.getEnergyCensus();
|
||||
this.getEnergySpaceCensus();
|
||||
this.closeWebscoket();
|
||||
this.connection();
|
||||
},
|
||||
eventRegionalismId(data) {
|
||||
this.regionalismId = data;
|
||||
|
|
@ -347,6 +360,7 @@ export default {
|
|||
},
|
||||
},
|
||||
destroyed() {
|
||||
this.closeWebscoket()
|
||||
document.getElementById("app").style.background = "#fff";
|
||||
document.getElementById("con_lf_top_div").style.background = "#fff";
|
||||
document.getElementById("con_lf_top_div").style.overflow = "auto";
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ import { treeListRegionalism } from "@/api/system/regionalism";
|
|||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
export default {
|
||||
name: "bigHeadWrap",
|
||||
name: "EHead",
|
||||
props: ["handelTile", "projectList"],
|
||||
components: {
|
||||
Treeselect
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
import CensusCard from "@/components/Cards/CensusCard";
|
||||
import NavTemp from "./navTemp";
|
||||
export default {
|
||||
name: "ProjectCountTemp",
|
||||
name: "EProjectCensusTemp",
|
||||
components: {
|
||||
NavTemp,
|
||||
CensusCard,
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
import EchartsGaugeWrap from "./echartsGauge";
|
||||
import NavTemp from "./navTemp";
|
||||
export default {
|
||||
name: "todayRatio",
|
||||
name: "ETodayRatio",
|
||||
components: {
|
||||
EchartsGaugeWrap,
|
||||
NavTemp,
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
<template>
|
||||
<div class="big-trend-wrap-v3">
|
||||
<div class="big-e-trend-census">
|
||||
<nav-temp htmlType="t1" :title="title">
|
||||
<div class="trend-conter" slot="mk-center">
|
||||
<echarts-line-wrap
|
||||
<e-echarts-line
|
||||
ref="echartsLineTrend"
|
||||
:styles="echartsOption.styles"
|
||||
:colorList="echartsOption.colorList"
|
||||
:eId="echartsOption.eId"
|
||||
:option="resultOption"
|
||||
></echarts-line-wrap>
|
||||
/>
|
||||
</div>
|
||||
</nav-temp>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echartsLineWrap from "./echartsLineT";
|
||||
import EEchartsLine from "@/components/Echarts/EEchartsLine";
|
||||
import * as echarts from "echarts";
|
||||
import NavTemp from "./navTemp";
|
||||
export default {
|
||||
name: "typeDistribution",
|
||||
name: "ETrendCensus",
|
||||
components: {
|
||||
echartsLineWrap,
|
||||
EEchartsLine,
|
||||
NavTemp,
|
||||
},
|
||||
props: ["result"],
|
||||
|
|
@ -28,13 +28,13 @@ export default {
|
|||
return {
|
||||
echartsOption: {
|
||||
styles: "width: 100%; height: 100%;",
|
||||
colorList: ["#FC6A16", "#1EEEFF"],
|
||||
colorList: ["#1890FF", "#EE6666", "#FFCC00"],
|
||||
eId: "trendEchartsLine",
|
||||
},
|
||||
title: "实时用能分析",
|
||||
typeName: "alarm",
|
||||
resultOption: {
|
||||
color: ["#FC6A16", "#1EEEFF"],
|
||||
color: ["#1890FF", "#EE6666", "#FFCC00"],
|
||||
title: {
|
||||
text: "",
|
||||
show: false,
|
||||
|
|
@ -45,11 +45,12 @@ export default {
|
|||
legend: {
|
||||
top: 5,
|
||||
right: 5,
|
||||
data: ["报警", "预警"],
|
||||
icon: "circle",
|
||||
data: ["用水", "用电", "用气"],
|
||||
// icon: "circle",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontSize: 12,
|
||||
fontWeight: 400
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -88,21 +89,28 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: "报警",
|
||||
name: "用水",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 12,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(252,106,22,0.8)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(252,106,22,0.1)",
|
||||
},
|
||||
]),
|
||||
smooth: false,
|
||||
symbolSize: 2,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(252,106,22,0.8)",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(252,106,22,0.1)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
markPoint: {
|
||||
symbolSize: 35,
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
|
|
@ -114,10 +122,38 @@ export default {
|
|||
data: [],
|
||||
},
|
||||
{
|
||||
name: "预警",
|
||||
name: "用电",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbolSize: 12,
|
||||
symbolSize: 2,
|
||||
label: {
|
||||
show: false,
|
||||
formatter: function (params) {
|
||||
return echarts.format.formatTime("yyyy-MM-dd", params.value);
|
||||
},
|
||||
backgroundColor: "#7581BD",
|
||||
},
|
||||
markPoint: {
|
||||
symbolSize: 35,
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "用气",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 2,
|
||||
markPoint: {
|
||||
symbolSize: 35,
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
|
|
@ -127,9 +163,11 @@ export default {
|
|||
watch: {
|
||||
result: {
|
||||
handler: function (val, oldVal) {
|
||||
console.log('result---:', val)
|
||||
this.resultOption.xAxis.data = val["name"];
|
||||
this.resultOption.series[0].data = val["alarm"];
|
||||
this.resultOption.series[1].data = val["warning"];
|
||||
this.resultOption.series[0].data = val["ELECTRICITY_METER"];
|
||||
this.resultOption.series[1].data = val["WATER_METER"];
|
||||
this.resultOption.series[2].data = val["GAS_METER"];
|
||||
this.updateEcharts();
|
||||
},
|
||||
deep: true,
|
||||
|
|
@ -145,7 +183,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.big-trend-wrap-v3 {
|
||||
.big-e-trend-census {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -158,7 +196,7 @@ export default {
|
|||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
background-size: contain;
|
||||
padding: 25px 0;
|
||||
// padding: 25px 0;
|
||||
.tabs-block {
|
||||
width: 305px;
|
||||
height: 38px;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="app-container iot-project">
|
||||
<component :is="componectVal" :sourceId="sourceId"></component>
|
||||
<component :is="componectVal" :sourceId="sourceId" @linkToTable="linkToTable"></component>
|
||||
|
||||
<div v-show="componectVal === ''">
|
||||
<el-form
|
||||
|
|
@ -274,9 +274,9 @@
|
|||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<div class="to-home-wrap2" @click="toTableClick" v-show="componectVal !== ''">
|
||||
<!-- <div class="to-home-wrap2" @click="toTableClick" v-show="componectVal !== ''">
|
||||
<el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -303,13 +303,17 @@ import Treeselect from "@riophae/vue-treeselect";
|
|||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import SelectTableWrap from "@/components/SelectTable/index";
|
||||
|
||||
/////、、、、、、、、、、、、、、、、、、、、
|
||||
import DetailsWrapNew from './profileV2/details'
|
||||
|
||||
export default {
|
||||
name: "Project",
|
||||
components: {
|
||||
ShopLocation,
|
||||
Treeselect,
|
||||
DetailsWrap,
|
||||
SelectTableWrap
|
||||
SelectTableWrap,
|
||||
DetailsWrapNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -643,10 +647,10 @@ export default {
|
|||
},
|
||||
handleDetails(row) {
|
||||
this.sourceId = row.projectId;
|
||||
this.componectVal = "DetailsWrap";
|
||||
this.componectVal = "DetailsWrapNew";
|
||||
},
|
||||
// 跳转详情页
|
||||
toTableClick() {
|
||||
linkToTable() {
|
||||
if (this.$route.query['projectId']) {
|
||||
this.$router.push('/project/project')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,12 +26,11 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="建筑类型" prop="buildingType">
|
||||
<el-select v-model="queryParams.buildingType" placeholder="建筑类型" clearable>
|
||||
<!-- <el-option label="请选择字典生成" value="" /> -->
|
||||
<el-option
|
||||
v-for="dict in spaceTypeOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
v-for="dict in buildingTypeList"
|
||||
:key="dict.buildingTypeCode"
|
||||
:label="dict.buildingTypeName"
|
||||
:value="dict.buildingTypeCode"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -89,14 +88,13 @@
|
|||
<el-form-item label="建筑编码:" prop="buildingCode">
|
||||
<el-input v-model="form.buildingCode" placeholder="请输入建筑编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型:" prop="buildingType">
|
||||
<el-select v-model="form.buildingType" style="width: 100%;" placeholder="请选择建筑类型">
|
||||
<!-- <el-option label="请选择字典生成" value="" /> -->
|
||||
<el-form-item label="建筑类型:" prop="buildingType">
|
||||
<el-select v-model="form.buildingType" filterable style="width: 100%;" placeholder="请选择建筑类型">
|
||||
<el-option
|
||||
v-for="dict in spaceTypeOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
v-for="dict in buildingTypeList"
|
||||
:key="dict.buildingTypeCode"
|
||||
:label="dict.buildingTypeName"
|
||||
:value="dict.buildingTypeCode"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -115,11 +113,10 @@
|
|||
top="10vh"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- <space-device-wrap
|
||||
<building-device
|
||||
v-if="selectTableShow"
|
||||
:sourceId="sourceId"
|
||||
:buildingCode="infoData.buildingCode"
|
||||
></space-device-wrap> -->
|
||||
:buildingCode="buildingInfo.buildingCode"
|
||||
></building-device>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" type="primary" @click="() =>{selectTableShow = false}">确 定</el-button>
|
||||
|
|
@ -138,7 +135,10 @@ import {
|
|||
updateBuildings,
|
||||
listRegionSpaceTree
|
||||
} from "@/api/iot/regionSpace";
|
||||
// import SpaceDeviceWrap from "./spaceDevice";
|
||||
import {
|
||||
listType
|
||||
} from "@/api/iot/buildingType";
|
||||
import BuildingDevice from "./BuildingDevice";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
|
|
@ -146,7 +146,7 @@ export default {
|
|||
name: "Space",
|
||||
components: {
|
||||
Treeselect,
|
||||
// SpaceDeviceWrap
|
||||
BuildingDevice
|
||||
},
|
||||
props: ["infoData"],
|
||||
data() {
|
||||
|
|
@ -178,23 +178,31 @@ export default {
|
|||
spaceTypeOptions: [],
|
||||
querySpaceOptions: [],
|
||||
sourceId: "",
|
||||
spaceDeviceTitle: ""
|
||||
spaceDeviceTitle: "",
|
||||
buildingTypeList: [],
|
||||
buildingInfo: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDicts("space_type").then(response => {
|
||||
this.spaceTypeOptions = response.data;
|
||||
});
|
||||
this.getQueryTreeselect();
|
||||
this.getBuildingTypeList();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
indexFormatter(val) {
|
||||
return val + 1;
|
||||
},
|
||||
getBuildingTypeList() {
|
||||
listType({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}).then(res => {
|
||||
this.buildingTypeList = res.rows
|
||||
})
|
||||
},
|
||||
// 打开厂商选择窗口 ——表格
|
||||
handleDetails(row) {
|
||||
this.sourceId = row.spaceId;
|
||||
this.buildingInfo = row
|
||||
this.spaceDeviceTitle = `[ ${row.buildingName} ] 建筑--设备管理`;
|
||||
this.selectTableShow = true;
|
||||
},
|
||||
|
|
@ -208,7 +216,6 @@ export default {
|
|||
this.queryParams.regionCode = this.infoData.regionCode;
|
||||
listBuildings(this.queryParams).then(response => {
|
||||
this.spaceList = this.handleTree(response.rows, "buildingCode", "parentCode");
|
||||
console.log('----', this.spaceList)
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
|
@ -276,6 +283,7 @@ export default {
|
|||
regionCode: this.infoData.regionCode
|
||||
};
|
||||
this.getTreeselect(param);
|
||||
this.getBuildingTypeList();
|
||||
this.open = true;
|
||||
this.title = "添加建筑";
|
||||
},
|
||||
|
|
@ -287,6 +295,7 @@ export default {
|
|||
buildingCode: row.buildingCode
|
||||
};
|
||||
this.getTreeselect(param);
|
||||
this.getBuildingTypeList();
|
||||
if (row != null) {
|
||||
this.form.regionCode = row.regionCode;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,23 +8,29 @@
|
|||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="区域空间" name="space">
|
||||
<el-tab-pane label="区域建筑" name="space">
|
||||
<div class="tabs-body">
|
||||
<building-space v-if="activeName === 'space' && infoData" :infoData="infoData"></building-space>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- <el-tab-pane label="设备管理" name="type">
|
||||
<div class="tabs-body">
|
||||
<building-type v-if="activeName === 'type' && infoData" :infoData="infoData" />
|
||||
</div>
|
||||
</el-tab-pane> -->
|
||||
|
||||
<!-- <el-tab-pane label="项目租户" name="tenant">
|
||||
<div class="tabs-body">
|
||||
<tenant-wrap v-if="activeName === 'tenant'" :infoData="infoData" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tab-pane> -->
|
||||
|
||||
<el-tab-pane label="设备列表" name="allDevice">
|
||||
<div class="tabs-body">
|
||||
<device-list-wrap v-if="activeName === 'allDevice'" :sourceId="infoData.projectId" />
|
||||
</div>
|
||||
</el-tab-pane> -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,12 +41,14 @@ import {
|
|||
} from "@/api/iot/region";
|
||||
import Info from './Info'
|
||||
import BuildingSpace from './BuildingSpace'
|
||||
import BuildingType from './BuildingType'
|
||||
export default {
|
||||
name: 'DetailsWrap',
|
||||
props: ['sourceKey'],
|
||||
components: {
|
||||
Info,
|
||||
BuildingSpace
|
||||
BuildingSpace,
|
||||
BuildingType
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -50,7 +58,7 @@ export default {
|
|||
},
|
||||
created() {
|
||||
this.getInfoByProjectId()
|
||||
this.activeName = 'space'
|
||||
this.activeName = 'info'
|
||||
},
|
||||
methods: {
|
||||
getInfoByProjectId() {
|
||||
|
|
|
|||
|
|
@ -268,14 +268,6 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <el-form-item label="总路设备:">
|
||||
<el-input
|
||||
v-model="form.projectDeviceName"
|
||||
suffix-icon="el-icon-caret-bottom"
|
||||
@focus="openTableSelectDialog()"
|
||||
placeholder="请输入总路设备"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" type="primary" @click="submitForm"
|
||||
|
|
|
|||
Loading…
Reference in New Issue