Merge branch 'shenzhen-dev' of http://139.9.66.234:18023/yjlHub/zhgdlarge into dev-cjp
提交获取设备下拉框接口 对接配电箱监测五个模块的接口，优化事件总线的使用，避免内存浪费。
This commit is contained in:
严妍
parent
4738525138
commit
7e9264aa01
11
src/api/modules/vehicle.ts
Normal file
11
src/api/modules/vehicle.ts
Normal 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);
|
||||||
|
};
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<div class="title"><i>近24小时数据</i></div>
|
<div class="title"><i>近24小时数据</i></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="selectRight">
|
<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-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
@ -12,215 +12,302 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { onMounted, reactive, ref } from "vue";
|
import { getSelectDataListApi } from "@/api/modules/distribution";
|
||||||
export default {
|
// import Card from "@/components/card.vue";
|
||||||
setup() {
|
import { GlobalStore } from "@/stores";
|
||||||
const value = ref("电压");
|
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||||
const noiseList = [
|
const store = GlobalStore();
|
||||||
{
|
// x轴
|
||||||
value: 0,
|
let twenty_four_time = ref([] as any);
|
||||||
label: "电压1"
|
// Y轴单位
|
||||||
}
|
let unit = ref("单位:V" as any);
|
||||||
];
|
// Y轴数据
|
||||||
const option = reactive({
|
let yData = ref([] as any);
|
||||||
// backgroundColor: '#071c3a',
|
// 图表数据项
|
||||||
title: {
|
let option = ref(null as any);
|
||||||
// text: '日用气量分析',
|
// 下拉框绑定值
|
||||||
textStyle: {
|
const value = ref("电压");
|
||||||
align: "center",
|
const noiseList = [
|
||||||
color: "#fff",
|
{
|
||||||
fontSize: 20
|
value: 1,
|
||||||
},
|
label: "电压"
|
||||||
top: "2%",
|
},
|
||||||
left: "center"
|
{
|
||||||
|
value: 2,
|
||||||
|
label: "电流"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: "漏电流"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 4,
|
||||||
|
label: "线缆温度"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 5,
|
||||||
|
label: "环境温度"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
// 下拉框选中
|
||||||
|
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: '日用气量分析',
|
||||||
|
textStyle: {
|
||||||
|
align: "center",
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20
|
||||||
},
|
},
|
||||||
// legend: {
|
top: "2%",
|
||||||
// color: ["#17B4FA", "#47D8BE", "#F9A589"],
|
left: "center"
|
||||||
// // data: ['日用气量分析'],
|
},
|
||||||
// left: 'center',
|
// legend: {
|
||||||
// top: "8%",
|
// color: ["#17B4FA", "#47D8BE", "#F9A589"],
|
||||||
// textStyle: {
|
// // data: ['日用气量分析'],
|
||||||
// color: "#ffffff"
|
// left: 'center',
|
||||||
// }
|
// top: "8%",
|
||||||
// },
|
// textStyle: {
|
||||||
tooltip: {
|
// color: "#ffffff"
|
||||||
trigger: "axis",
|
// }
|
||||||
axisPointer: {
|
// },
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(0, 255, 233,0)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(255, 255, 255,1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(0, 255, 233,0)"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "20%",
|
||||||
|
left: "5%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "12%"
|
||||||
|
// containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: {
|
color: "#14346C"
|
||||||
type: "linear",
|
}
|
||||||
x: 0,
|
},
|
||||||
y: 0,
|
splitArea: {
|
||||||
x2: 0,
|
// show: true,
|
||||||
y2: 1,
|
color: "#f00",
|
||||||
colorStops: [
|
lineStyle: {
|
||||||
|
color: "#f00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff"
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
data: twenty_four_time.value
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: unit.value,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
nameLocation: "start"
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
// max: 140,
|
||||||
|
splitNumber: 3,
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#14346C"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#14346C"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
margin: 20,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "扬尘",
|
||||||
|
type: "line",
|
||||||
|
// smooth: true, //是否平滑
|
||||||
|
showAllSymbol: true,
|
||||||
|
// symbol: 'image://./static/images/guang-circle.png',
|
||||||
|
symbol: "circle",
|
||||||
|
smooth: 0.5,
|
||||||
|
symbolSize: 10,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#fff",
|
||||||
|
shadowBlur: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "top",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "#4AC0F3",
|
||||||
|
borderColor: "#4AC0F3",
|
||||||
|
borderWidth: 5,
|
||||||
|
shadowColor: "rgba(0, 0, 0, .6)",
|
||||||
|
shadowBlur: 0
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "rgba(0, 255, 233,0)"
|
color: "rgba(74, 192, 243,0.5)"
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.5,
|
|
||||||
color: "rgba(255, 255, 255,1)"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "rgba(0, 255, 233,0)"
|
color: "rgba(74, 192, 243, 0.1)"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
global: false
|
false
|
||||||
}
|
),
|
||||||
|
shadowColor: "rgba(74, 192, 243, 1)",
|
||||||
|
shadowBlur: 20
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
data: yData.value
|
||||||
grid: {
|
}
|
||||||
top: "20%",
|
]
|
||||||
left: "5%",
|
};
|
||||||
right: "4%",
|
}
|
||||||
bottom: "12%"
|
|
||||||
// containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#14346C"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitArea: {
|
|
||||||
// show: true,
|
|
||||||
color: "#f00",
|
|
||||||
lineStyle: {
|
|
||||||
color: "#f00"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
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"]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
yAxis: [
|
function drawChart() {
|
||||||
{
|
initOption();
|
||||||
type: "value",
|
console.log("绘制前数据", yData.value)
|
||||||
name: "单位:V",
|
let EchartsTime = echarts.init(document.getElementById("EchartsTime"));
|
||||||
nameTextStyle: {
|
EchartsTime.setOption(option.value);
|
||||||
color: "#fff",
|
}
|
||||||
nameLocation: "start"
|
|
||||||
},
|
//获取当前时间-24小时
|
||||||
min: 0,
|
function generateTimes() {
|
||||||
// max: 140,
|
let timeArrays = new Array(24).fill("");
|
||||||
splitNumber: 3,
|
timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
|
||||||
splitLine: {
|
return timeArrays;
|
||||||
show: true,
|
}
|
||||||
lineStyle: {
|
let allHourData = ref([] as any);
|
||||||
color: "#14346C"
|
let devSn = ref(1 as any);
|
||||||
}
|
const getSelectDataList = async () => {
|
||||||
},
|
const res: any = await getSelectDataListApi({
|
||||||
axisLine: {
|
devSn: devSn.value,
|
||||||
show: true,
|
projectSn: store.sn
|
||||||
lineStyle: {
|
});
|
||||||
color: "#14346C"
|
if (res.result) {
|
||||||
}
|
allHourData.value = res.result.slice(0, 24);
|
||||||
},
|
yData.value = allHourData.value.map((item: any) => item.voltageA);
|
||||||
axisLabel: {
|
drawChart();
|
||||||
show: true,
|
// console.log("24小时实时数据", allHourData.value);
|
||||||
margin: 20,
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "扬尘",
|
|
||||||
type: "line",
|
|
||||||
// smooth: true, //是否平滑
|
|
||||||
showAllSymbol: true,
|
|
||||||
// symbol: 'image://./static/images/guang-circle.png',
|
|
||||||
symbol: "circle",
|
|
||||||
smooth: 0.5,
|
|
||||||
symbolSize: 10,
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#fff",
|
|
||||||
shadowBlur: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: "top",
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: "#4AC0F3",
|
|
||||||
borderColor: "#4AC0F3",
|
|
||||||
borderWidth: 5,
|
|
||||||
shadowColor: "rgba(0, 0, 0, .6)",
|
|
||||||
shadowBlur: 0
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(74, 192, 243,0.5)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(74, 192, 243, 0.1)"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
shadowColor: "rgba(74, 192, 243, 1)",
|
|
||||||
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]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
function drawChart() {
|
|
||||||
let EchartsTime = echarts.init(document.getElementById("EchartsTime"));
|
|
||||||
EchartsTime.setOption(option);
|
|
||||||
}
|
|
||||||
onMounted(async () => {
|
|
||||||
drawChart();
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
value,
|
|
||||||
noiseList
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -2,49 +2,40 @@
|
|||||||
<div class="bottomRightBox">
|
<div class="bottomRightBox">
|
||||||
<div class="title"><i>设备监控台</i></div>
|
<div class="title"><i>设备监控台</i></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="equipmentMonitoring" v-for="item in deciData.devicList">
|
<div class="equipmentMonitoring" v-for="item in deviceData.list" :key="item.id">
|
||||||
<div class="equipmentList" :class="item.status == 0 ? 'online' : 'offline'">
|
<div class="equipmentList" :class="item.isClosed != 0 ? 'online' : 'offline'">
|
||||||
<p>{{ item.status == 0 ? "在线" : "离线" }}</p>
|
<p>{{ item.isClosed != 0 ? "在线" : "离线" }}</p>
|
||||||
<p class="bottomText">{{ item.decName }}</p>
|
<p class="bottomText">{{ item.devName }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts" setup>
|
||||||
import { reactive } from "vue";
|
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||||
export default {
|
// import * as echarts from "echarts";
|
||||||
setup() {
|
import { getDevStatisticsApi } from "@/api/modules/distribution";
|
||||||
let deciData = reactive({
|
// import Card from "@/components/card.vue";
|
||||||
devicList: [
|
import { GlobalStore } from "@/stores";
|
||||||
{
|
const store = GlobalStore();
|
||||||
decName: "A号电箱",
|
|
||||||
status: 0
|
// 配电箱设备统计
|
||||||
},
|
let deviceData = ref({} as any);
|
||||||
{
|
|
||||||
decName: "B号电箱",
|
const getDevStatisticsList = async () => {
|
||||||
status: 1
|
const res: any = await getDevStatisticsApi({
|
||||||
},
|
projectSn: store.sn
|
||||||
{
|
});
|
||||||
decName: "C号电箱",
|
if (res.result) {
|
||||||
status: 0
|
deviceData.value = res.result;
|
||||||
},
|
|
||||||
{
|
|
||||||
decName: "D号电箱",
|
|
||||||
status: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
decName: "E号电箱",
|
|
||||||
status: 0
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
deciData
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
console.log("配电箱实时数据", res);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDevStatisticsList();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -74,10 +65,11 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
.equipmentList {
|
.equipmentList {
|
||||||
width: 85%;
|
width: 160px;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
margin: 30% 5%;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
p {
|
p {
|
||||||
font-size: calc(100vw * 20 / 1920);
|
font-size: calc(100vw * 20 / 1920);
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="topCenterBox">
|
<div class="topCenterBox" v-if="realTimeData">
|
||||||
<div class="title"><i>配电箱实时数据</i></div>
|
<div class="title"><i>配电箱实时数据</i></div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="selectRight">
|
<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-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
@ -14,35 +14,35 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="menListWd menu">
|
<div class="menListWd menu">
|
||||||
<span class="text">环境温度</span>
|
<span class="text">环境温度</span>
|
||||||
<p class="textColor2">26℃</p>
|
<p class="textColor2">{{ realTimeData.ambientTemperature || 0 }}℃</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="menListXl menu">
|
<div class="menListXl menu">
|
||||||
<span class="text">A箱电压</span>
|
<span class="text">A箱电压</span>
|
||||||
<p class="textColor1">220V</p>
|
<p class="textColor1">{{ realTimeData.voltageA || 0 }}V</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="menListDl menu">
|
<div class="menListDl menu">
|
||||||
<span class="text">A箱线缆温度</span>
|
<span class="text">A箱线缆温度</span>
|
||||||
<p class="textColor2">26℃</p>
|
<p class="textColor2">{{ realTimeData.cableTemperatureA || 0 }}℃</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="menListLdl menu">
|
<div class="menListLdl menu">
|
||||||
<span class="text">A箱电流</span>
|
<span class="text">A箱电流</span>
|
||||||
<p class="textColor3">2kA</p>
|
<p class="textColor3">{{ realTimeData.phaseCurrentA || 0 }}kA</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="menListBdl menu">
|
<div class="menListBdl menu">
|
||||||
<span class="text">漏电流</span>
|
<span class="text">漏电流</span>
|
||||||
<p class="textColor3">2mA</p>
|
<p class="textColor3">{{ realTimeData.electricLeakage || 0 }}mA</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="menListBxl menu">
|
<div class="menListBxl menu">
|
||||||
<span class="text">B箱电流</span>
|
<span class="text">B箱电流</span>
|
||||||
<p class="textColor3">26kA</p>
|
<p class="textColor3">{{ realTimeData.phaseCurrentB || 0 }}kA</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="menListBwd menu">
|
<div class="menListBwd menu">
|
||||||
<span class="text">B箱线缆温度</span>
|
<span class="text">B箱线缆温度</span>
|
||||||
<p class="textColor2">26℃</p>
|
<p class="textColor2">{{ realTimeData.cableTemperatureB || 0 }}℃</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="menListBdy menu">
|
<div class="menListBdy menu">
|
||||||
<span class="text">B箱电压</span>
|
<span class="text">B箱电压</span>
|
||||||
<p class="textColor1">220V</p>
|
<p class="textColor1">{{ realTimeData.voltageB || 0 }}V</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="menListDy menu"><span>A箱电压</span><span class="textColor">220V</span></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>
|
<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 { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||||
// import * as echarts from "echarts";
|
// import * as echarts from "echarts";
|
||||||
import { getRealTimeDataApi, getDevListApi } from "@/api/modules/distribution";
|
import { getRealTimeDataApi, getDevListApi } from "@/api/modules/distribution";
|
||||||
|
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||||
// import Card from "@/components/card.vue";
|
// import Card from "@/components/card.vue";
|
||||||
import { GlobalStore } from "@/stores";
|
import { GlobalStore } from "@/stores";
|
||||||
const store = GlobalStore();
|
const store = GlobalStore();
|
||||||
// 下拉框存放的value
|
// 下拉框存放的value
|
||||||
let devValue = ref("" as any);
|
let devValue = ref(1 as any);
|
||||||
let noiseList = ref([
|
let noiseList = ref([
|
||||||
{
|
{
|
||||||
value: 0,
|
value: 1,
|
||||||
|
label: "电箱1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 10051,
|
||||||
label: "电箱2"
|
label: "电箱2"
|
||||||
}
|
}
|
||||||
]
|
]);
|
||||||
);
|
function selectChange(e: any) {
|
||||||
|
//发送设备编号
|
||||||
|
mitts.emit("devSn", e);
|
||||||
|
}
|
||||||
|
|
||||||
const getDevOption = async () => {
|
const getDevOption = async () => {
|
||||||
const res: any = await getDevListApi({
|
const res: any = await getDevListApi({
|
||||||
@ -90,12 +98,14 @@ const getDevOption = async () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// let devSn = ref("" as any);
|
// let devSn = ref("" as any);
|
||||||
|
let realTimeData = ref(null as any)
|
||||||
const getRealTimeList = async () => {
|
const getRealTimeList = async () => {
|
||||||
const res: any = await getRealTimeDataApi({
|
const res: any = await getRealTimeDataApi({
|
||||||
projectSn: store.sn,
|
projectSn: store.sn,
|
||||||
devSn: devValue.value
|
devSn: devValue.value
|
||||||
});
|
});
|
||||||
if (res.result) {
|
if (res.result) {
|
||||||
|
realTimeData.value = res.result;
|
||||||
console.log("当前电箱实时数据", res.result);
|
console.log("当前电箱实时数据", res.result);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -424,36 +424,36 @@ const option = reactive({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
let deciData = reactive({
|
// let deciData = reactive({
|
||||||
devicList: [
|
// devicList: [
|
||||||
{
|
// {
|
||||||
decName: "配电箱设备1",
|
// decName: "配电箱设备1",
|
||||||
status: 0
|
// status: 0
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
decName: "配电箱设备2",
|
// decName: "配电箱设备2",
|
||||||
status: 1
|
// status: 1
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
decName: "配电箱设备3",
|
// decName: "配电箱设备3",
|
||||||
status: 0
|
// status: 0
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
decName: "配电箱设备4",
|
// decName: "配电箱设备4",
|
||||||
status: 0
|
// status: 0
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
decName: "配电箱设备5",
|
// decName: "配电箱设备5",
|
||||||
status: 0
|
// status: 0
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
});
|
// });
|
||||||
function drawChart() {
|
function drawChart() {
|
||||||
let leftTopEcharts = echarts.init(document.getElementById("topLeftEcharts"));
|
let leftTopEcharts = echarts.init(document.getElementById("topLeftEcharts"));
|
||||||
leftTopEcharts.setOption(option);
|
leftTopEcharts.setOption(option);
|
||||||
}
|
}
|
||||||
// 配电箱设备统计
|
// 配电箱设备统计
|
||||||
let deviceData = ref({} as any)
|
let deviceData = ref({} as any);
|
||||||
|
|
||||||
const getDevStatisticsList = async () => {
|
const getDevStatisticsList = async () => {
|
||||||
const res: any = await getDevStatisticsApi({
|
const res: any = await getDevStatisticsApi({
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { GlobalStore } from "@/stores";
|
import { GlobalStore } from "@/stores";
|
||||||
import { selectDustNoiseDataApi } from "@/api/modules/headNoise";
|
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 * as echarts from "echarts";
|
||||||
import Card from "@/components/card.vue";
|
import Card from "@/components/card.vue";
|
||||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||||
@ -281,6 +281,10 @@ onMounted(async () => {
|
|||||||
getList();
|
getList();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||||
|
onBeforeUnmount(async () => {
|
||||||
|
mitts.off("currentDevDetail");
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { onMounted, reactive, ref } from "vue";
|
import { onMounted, onBeforeUnmount, ref } from "vue";
|
||||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||||
import { GlobalStore } from "@/stores";
|
import { GlobalStore } from "@/stores";
|
||||||
import { getWorkerInfoApi } from "@/api/modules/labor";
|
import { getWorkerInfoApi } from "@/api/modules/labor";
|
||||||
@ -229,6 +229,10 @@ onMounted(async () => {
|
|||||||
getList(e);
|
getList(e);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||||
|
onBeforeUnmount(async () => {
|
||||||
|
mitts.off("enterpriseId");
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user