admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'shenzhen-dev' of http://139.9.66.234:18023/yjlHub/zhgdlarge into dev-cjp

Browse Source 
提交获取设备下拉框接口

   对接配电箱监测五个模块的接口，优化事件总线的使用，避免内存浪费。
This commit is contained in:
严妍 2023-07-14 17:01:04 +08:00
parent 4738525138
commit 7e9264aa01
7 changed files with 382 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/modules/vehicle.ts Normal file
View File

@ -0,0 +1,11 @@
import http from "@/api";
const BASEURL = import.meta.env.VITE_API_URL;
// 获取车辆通过信息
export const getCarPassRecordApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/carPassRecord/list`, params);
};
// 获取出入场记录
export const getEntryAndExitRecordsApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/carPassRecord/getEntryAndExitRecordsToday`, params);
};

135
src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue
View File

@ -3,7 +3,7 @@
<div class="title"><i>近24小时数据</i></div>
<div class="content">
<div class="selectRight">
<el-select v-model="value" class="m-2" placeholder="Select" size="small">
<el-select v-model="value" class="m-2" placeholder="Select" size="small" @change="selectChange">
<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
@ -12,19 +12,79 @@
</div>
</template>
<script>
<script lang="ts" setup>
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
export default {
setup() {
import { getSelectDataListApi } from "@/api/modules/distribution";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
// x轴
let twenty_four_time = ref([] as any);
// Y轴单位
let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([] as any);
// 图表数据项
let option = ref(null as any);
// 下拉框绑定值
const value = ref("电压");
const noiseList = [
{
value: 0,
label: "电压1"
value: 1,
label: "电压"
},
{
value: 2,
label: "电流"
},
{
value: 3,
label: "漏电流"
},
{
value: 4,
label: "线缆温度"
},
{
value: 5,
label: "环境温度"
}
];
const option = reactive({
// 下拉框选中
function selectChange(e: any) {
console.log(e, "下拉框");
if (e == 1) {
console.log("电压");
unit.value = "单位:V";
yData.value = allHourData.value.map((item: any) => item.voltageA);
}
if (e == 2) {
console.log("电流");
unit.value = "单位:A";
yData.value = allHourData.value.map((item: any) => item.phaseCurrentA);
}
if (e == 3) {
console.log("漏电流");
unit.value = "单位:A";
yData.value = allHourData.value.map((item: any) => item.electricLeakage);
}
if (e == 4) {
console.log("线缆温度");
unit.value = "单位:℃";
yData.value = allHourData.value.map((item: any) => item.cableTemperatureA);
}
if (e == 5) {
console.log("环境温度");
unit.value = "单位:℃";
yData.value = allHourData.value.map((item: any) => item.ambientTemperature);
}
drawChart();
}
function initOption() {
option.value = {
// backgroundColor: '#071c3a',
title: {
// text: '日用气量分析',
@ -104,14 +164,14 @@ export default {
show: false
},
boundaryGap: false,
data: ["8：00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00"]
data: twenty_four_time.value
}
],
yAxis: [
{
type: "value",
name: "单位:V",
name: unit.value,
nameTextStyle: {
color: "#fff",
nameLocation: "start"
@ -173,11 +233,6 @@ export default {
shadowColor: "rgba(0, 0, 0, .6)",
shadowBlur: 0
},
lineStyle: {
normal: {
width: 1
}
},
tooltip: {
show: true
},
@ -204,23 +259,55 @@ export default {
shadowBlur: 20
}
},
data: [502.84, 205.97, 332.79, 281.55, 598.35, 214.02, 101.5, 215.5, 602.5, 406.5, 412, 305.6]
data: yData.value
}
]
});
};
}
function drawChart() {
initOption();
console.log("绘制前数据", yData.value)
let EchartsTime = echarts.init(document.getElementById("EchartsTime"));
EchartsTime.setOption(option);
EchartsTime.setOption(option.value);
}
onMounted(async () => {
drawChart();
//获取当前时间-24小时
function generateTimes() {
let timeArrays = new Array(24).fill("");
timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
return timeArrays;
}
let allHourData = ref([] as any);
let devSn = ref(1 as any);
const getSelectDataList = async () => {
const res: any = await getSelectDataListApi({
devSn: devSn.value,
projectSn: store.sn
});
return {
value,
noiseList
};
if (res.result) {
allHourData.value = res.result.slice(0, 24);
yData.value = allHourData.value.map((item: any) => item.voltageA);
drawChart();
// console.log("24小时实时数据", allHourData.value);
}
};
onMounted(async () => {
mitts.on("devSn", e => {
console.log("24小时数据对应的devSn");
devSn.value = e;
getSelectDataList();
});
twenty_four_time.value = generateTimes();
// console.log(twenty_four_time.value, "小时制");
getSelectDataList();
});
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
mitts.off("devSn");
});
</script>
<style lang="scss" scoped>

64
src/views/sevenLargeScreen/distributionMonitoring/bottomRight.vue
View File

@ -2,49 +2,40 @@
<div class="bottomRightBox">
<div class="title"><i>设备监控台</i></div>
<div class="content">
<div class="equipmentMonitoring" v-for="item in deciData.devicList">
<div class="equipmentList" :class="item.status == 0 ? 'online' : 'offline'">
<p>{{ item.status == 0 ? "在线" : "离线" }}</p>
<p class="bottomText">{{ item.decName }}</p>
<div class="equipmentMonitoring" v-for="item in deviceData.list" :key="item.id">
<div class="equipmentList" :class="item.isClosed != 0 ? 'online' : 'offline'">
<p>{{ item.isClosed != 0 ? "在线" : "离线" }}</p>
<p class="bottomText">{{ item.devName }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
let deciData = reactive({
devicList: [
{
decName: "A号电箱",
status: 0
},
{
decName: "B号电箱",
status: 1
},
{
decName: "C号电箱",
status: 0
},
{
decName: "D号电箱",
status: 0
},
{
decName: "E号电箱",
status: 0
}
]
<script lang="ts" setup>
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
// import * as echarts from "echarts";
import { getDevStatisticsApi } from "@/api/modules/distribution";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
// 配电箱设备统计
let deviceData = ref({} as any);
const getDevStatisticsList = async () => {
const res: any = await getDevStatisticsApi({
projectSn: store.sn
});
return {
deciData
};
if (res.result) {
deviceData.value = res.result;
}
console.log("配电箱实时数据", res);
};
onMounted(() => {
getDevStatisticsList();
});
</script>
<style lang="scss" scoped>
@ -74,10 +65,11 @@ export default {
width: 100%;
height: 100%;
display: flex !important;
justify-content: center;
align-items: center;
.equipmentList {
width: 85%;
width: 160px;
height: 50%;
margin: 30% 5%;
text-align: center;
p {
font-size: calc(100vw * 20 / 1920);

38
src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="topCenterBox">
<div class="topCenterBox" v-if="realTimeData">
<div class="title"><i>配电箱实时数据</i></div>
<div class="content">
<div class="selectRight">
<el-select v-model="devValue" class="m-2" placeholder="Select" size="small">
<el-select v-model="devValue" class="m-2" placeholder="Select" size="small" @change="selectChange">
<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
@ -14,35 +14,35 @@
</div>
<div class="menListWd menu">
<span class="text">环境温度</span>
<p class="textColor2">26℃</p>
<p class="textColor2">{{ realTimeData.ambientTemperature || 0 }}℃</p>
</div>
<div class="menListXl menu">
<span class="text">A箱电压</span>
<p class="textColor1">220V</p>
<p class="textColor1">{{ realTimeData.voltageA || 0 }}V</p>
</div>
<div class="menListDl menu">
<span class="text">A箱线缆温度</span>
<p class="textColor2">26℃</p>
<p class="textColor2">{{ realTimeData.cableTemperatureA || 0 }}℃</p>
</div>
<div class="menListLdl menu">
<span class="text">A箱电流</span>
<p class="textColor3">2kA</p>
<p class="textColor3">{{ realTimeData.phaseCurrentA || 0 }}kA</p>
</div>
<div class="menListBdl menu">
<span class="text">漏电流</span>
<p class="textColor3">2mA</p>
<p class="textColor3">{{ realTimeData.electricLeakage || 0 }}mA</p>
</div>
<div class="menListBxl menu">
<span class="text">B箱电流</span>
<p class="textColor3">26kA</p>
<p class="textColor3">{{ realTimeData.phaseCurrentB || 0 }}kA</p>
</div>
<div class="menListBwd menu">
<span class="text">B箱线缆温度</span>
<p class="textColor2">26℃</p>
<p class="textColor2">{{ realTimeData.cableTemperatureB || 0 }}℃</p>
</div>
<div class="menListBdy menu">
<span class="text">B箱电压</span>
<p class="textColor1">220V</p>
<p class="textColor1">{{ realTimeData.voltageB || 0 }}V</p>
</div>
<!-- <div class="menListDy menu"><span>A箱电压</span><span class="textColor">220V</span></div>
<div class="menListXl menu"><span>A箱线缆温度</span><span class="textColor">26℃</span></div>
@ -60,18 +60,26 @@
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
// import * as echarts from "echarts";
import { getRealTimeDataApi, getDevListApi } from "@/api/modules/distribution";
import mitts from "@/utils/bus"; //兄弟组件传值
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
// 下拉框存放的value
let devValue = ref("" as any);
let devValue = ref(1 as any);
let noiseList = ref([
{
value: 0,
value: 1,
label: "电箱1"
},
{
value: 10051,
label: "电箱2"
}
]
);
]);
function selectChange(e: any) {
//发送设备编号
mitts.emit("devSn", e);
}
const getDevOption = async () => {
const res: any = await getDevListApi({
@ -90,12 +98,14 @@ const getDevOption = async () => {
};
// let devSn = ref("" as any);
let realTimeData = ref(null as any)
const getRealTimeList = async () => {
const res: any = await getRealTimeDataApi({
projectSn: store.sn,
devSn: devValue.value
});
if (res.result) {
realTimeData.value = res.result;
console.log("当前电箱实时数据", res.result);
}
};

50
src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue
View File

@ -424,36 +424,36 @@ const option = reactive({
}
]
});
let deciData = reactive({
devicList: [
{
decName: "配电箱设备1",
status: 0
},
{
decName: "配电箱设备2",
status: 1
},
{
decName: "配电箱设备3",
status: 0
},
{
decName: "配电箱设备4",
status: 0
},
{
decName: "配电箱设备5",
status: 0
}
]
});
// let deciData = reactive({
// devicList: [
// {
// decName: "配电箱设备1",
// status: 0
// },
// {
// decName: "配电箱设备2",
// status: 1
// },
// {
// decName: "配电箱设备3",
// status: 0
// },
// {
// decName: "配电箱设备4",
// status: 0
// },
// {
// decName: "配电箱设备5",
// status: 0
// }
// ]
// });
function drawChart() {
let leftTopEcharts = echarts.init(document.getElementById("topLeftEcharts"));
leftTopEcharts.setOption(option);
}
// 配电箱设备统计
let deviceData = ref({} as any)
let deviceData = ref({} as any);
const getDevStatisticsList = async () => {
const res: any = await getDevStatisticsApi({

6
src/views/sevenLargeScreen/headNoise/leftBottom.vue
View File

@ -19,7 +19,7 @@
<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { selectDustNoiseDataApi } from "@/api/modules/headNoise";
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref,onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
import mitts from "@/utils/bus"; //兄弟组件传值
@ -281,6 +281,10 @@ onMounted(async () => {
getList();
});
});
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
mitts.off("currentDevDetail");
});
</script>
<style lang="scss" scoped>

6
src/views/sevenLargeScreen/laborManagement/horizontaL.vue
View File

@ -20,7 +20,7 @@
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import { onMounted, onBeforeUnmount, ref } from "vue";
import mitts from "@/utils/bus"; //兄弟组件传值
import { GlobalStore } from "@/stores";
import { getWorkerInfoApi } from "@/api/modules/labor";
@ -229,6 +229,10 @@ onMounted(async () => {
getList(e);
});
});
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
mitts.off("enterpriseId");
});
</script>
<style lang="scss" scoped>