对接配电箱监测大屏，左上实时数据，右上报警列表，中间配电箱实时数据接口，计算右上角实时时间。
This commit is contained in:
严妍
parent
eaaf9cdd86
commit
1ff0303729
27
src/api/modules/distribution.ts
Normal file
27
src/api/modules/distribution.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import http from "@/api";
|
||||||
|
const BASEURL = import.meta.env.VITE_API_URL;
|
||||||
|
|
||||||
|
// 配电箱设备统计
|
||||||
|
export const getDevStatisticsApi = (params: {}) => {
|
||||||
|
return http.post(BASEURL + `/xmgl/electricalDev/selectElectricalDevStatistics`, params);
|
||||||
|
};
|
||||||
|
// 获取设备--实时数据
|
||||||
|
export const getRealTimeDataApi = (params: {}) => {
|
||||||
|
return http.post(BASEURL + `/xmgl/electricalData/getRealTimeDustNoiseData`, params);
|
||||||
|
};
|
||||||
|
// 配电箱报警统计
|
||||||
|
export const getBoxAlarmStatisticsApi = (params: {}) => {
|
||||||
|
return http.post(BASEURL + `/xmgl/electricAlarm/selectElectricAlarmStatistics`, params);
|
||||||
|
};
|
||||||
|
//获取 配电箱24小时实时数据
|
||||||
|
export const getSelectDataListApi = (params: {}) => {
|
||||||
|
return http.post(BASEURL + `/xmgl/electricalData/selectElectricalDataList`, params);
|
||||||
|
};
|
||||||
|
//获取设备--下拉列表
|
||||||
|
export const getDevListApi = (params: {}) => {
|
||||||
|
return http.post(BASEURL + `/xmgl/electricalDev/list`, params);
|
||||||
|
};
|
||||||
|
|
||||||
|
// export const getDevListApi = data => post('xmgl/electricalDev/list', data); //获取设备--下拉列表
|
||||||
|
// export const getAlarmInfoListApi = data => post('xmgl/electricAlarm/list', data); //获取设备--报警信息
|
||||||
|
// export const getHistoryApi = data => post('xmgl/electricalData/selectElectricalDataPage', data); //获取 配电箱 历史数据
|
||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<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="devValue" class="m-2" placeholder="Select" size="small">
|
||||||
<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>
|
||||||
@ -56,24 +56,54 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts" setup>
|
||||||
import { ref } from "vue";
|
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||||
|
// import * as echarts from "echarts";
|
||||||
|
import { getRealTimeDataApi, getDevListApi } from "@/api/modules/distribution";
|
||||||
|
// import Card from "@/components/card.vue";
|
||||||
|
import { GlobalStore } from "@/stores";
|
||||||
|
const store = GlobalStore();
|
||||||
|
// 下拉框存放的value
|
||||||
|
let devValue = ref("" as any);
|
||||||
|
let noiseList = ref([
|
||||||
|
{
|
||||||
|
value: 0,
|
||||||
|
label: "电箱2"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
export default {
|
const getDevOption = async () => {
|
||||||
setup() {
|
const res: any = await getDevListApi({
|
||||||
const value = ref("电箱1");
|
projectSn: store.sn
|
||||||
const noiseList = [
|
});
|
||||||
{
|
if (res.result) {
|
||||||
value: 0,
|
devValue.value = res.result[0].devSn;
|
||||||
label: "电箱2"
|
noiseList.value = res.result.map(item => {
|
||||||
}
|
return {
|
||||||
];
|
value: item.devSn,
|
||||||
return {
|
label: item.devName
|
||||||
value,
|
};
|
||||||
noiseList
|
});
|
||||||
};
|
console.log("电箱option", noiseList.value);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// let devSn = ref("" as any);
|
||||||
|
const getRealTimeList = async () => {
|
||||||
|
const res: any = await getRealTimeDataApi({
|
||||||
|
projectSn: store.sn,
|
||||||
|
devSn: devValue.value
|
||||||
|
});
|
||||||
|
if (res.result) {
|
||||||
|
console.log("当前电箱实时数据", res.result);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getDevOption();
|
||||||
|
await getRealTimeList();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -9,21 +9,21 @@
|
|||||||
<div class="deviceData">
|
<div class="deviceData">
|
||||||
<div class="onlineDev">
|
<div class="onlineDev">
|
||||||
<div class="dev">在线设备</div>
|
<div class="dev">在线设备</div>
|
||||||
<div class="num">12</div>
|
<div class="num">{{ deviceData.onlineNum }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="lineDev">
|
<div class="lineDev">
|
||||||
<div class="dev">离线设备</div>
|
<div class="dev">离线设备</div>
|
||||||
<div class="num">6</div>
|
<div class="num">{{ deviceData.offlineNum }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="decivList">
|
<div class="decivList">
|
||||||
<div class="menuDev" v-for="item in deciData.devicList" :class="item.status == 0 ? 'online' : 'offline'">
|
<div class="menuDev" v-for="item in deviceData.list" :key="item.id" :class="item.isClosed != 0 ? 'online' : 'offline'">
|
||||||
<div class="decName">
|
<div class="decName">
|
||||||
<span v-show="item.status == 0"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
|
<span v-show="item.isClosed != 0"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
|
||||||
<span v-show="item.status == 1"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
|
<span v-show="item.isClosed != 1"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
|
||||||
<span> {{ item.decName }}</span>
|
<span> {{ item.devName }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="status">{{ item.status == 0 ? "在线" : "离线" }}</div>
|
<div class="status">{{ item.isClosed != 0 ? "在线" : "离线" }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -31,434 +31,445 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts" setup>
|
||||||
import { reactive, ref, onMounted } from "vue";
|
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
export default {
|
import { getDevStatisticsApi } from "@/api/modules/distribution";
|
||||||
setup() {
|
import Card from "@/components/card.vue";
|
||||||
const data = reactive({
|
import { GlobalStore } from "@/stores";
|
||||||
name: "应用",
|
const store = GlobalStore();
|
||||||
value: 66
|
|
||||||
});
|
const data = ref({
|
||||||
const posCenter = reactive(["50%", "64%"]);
|
name: "应用",
|
||||||
const option = reactive({
|
value: 66
|
||||||
series: [
|
});
|
||||||
|
const posCenter = reactive(["50%", "64%"]);
|
||||||
|
const option = reactive({
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// 外围刻度
|
||||||
|
type: "gauge",
|
||||||
|
radius: "100%",
|
||||||
|
center: posCenter,
|
||||||
|
splitNumber: 10,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 18,
|
||||||
|
shadowBlur: 0,
|
||||||
|
color: [
|
||||||
|
[
|
||||||
|
1,
|
||||||
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(151, 12, 12, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.2,
|
||||||
|
color: "rgba(137, 14, 161, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.4,
|
||||||
|
color: "rgba(119, 24, 254, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(254, 122, 24, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.8,
|
||||||
|
color: "rgba(255, 187, 56, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(101, 215, 249, 1)"
|
||||||
|
}
|
||||||
|
])
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 10,
|
||||||
|
distance: -40
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 内侧指针、数值显示
|
||||||
|
name: "",
|
||||||
|
type: "gauge",
|
||||||
|
radius: "95%",
|
||||||
|
center: posCenter,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0, //最小刻度
|
||||||
|
max: 100, //最大刻度
|
||||||
|
splitNumber: 20, //刻度数量
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}, //刻度标签。
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}, //刻度样式
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
length: 5,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#87E0FB",
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
{
|
{
|
||||||
// 外围刻度
|
value: data.value.value
|
||||||
type: "gauge",
|
}
|
||||||
radius: "100%",
|
],
|
||||||
center: posCenter,
|
z: 9
|
||||||
splitNumber: 10,
|
},
|
||||||
min: 0,
|
// 第三个圆
|
||||||
max: 100,
|
{
|
||||||
startAngle: 180,
|
type: "gauge",
|
||||||
endAngle: 0,
|
radius: "70%",
|
||||||
axisLine: {
|
center: posCenter,
|
||||||
show: true,
|
splitNumber: 4,
|
||||||
lineStyle: {
|
min: 0,
|
||||||
width: 18,
|
max: 100,
|
||||||
shadowBlur: 0,
|
startAngle: 180,
|
||||||
color: [
|
endAngle: 0,
|
||||||
[
|
axisLine: {
|
||||||
1,
|
show: true,
|
||||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
lineStyle: {
|
||||||
{
|
width: 2,
|
||||||
offset: 0,
|
shadowBlur: 0,
|
||||||
color: "rgba(151, 12, 12, 1)"
|
color: [
|
||||||
},
|
[
|
||||||
{
|
1,
|
||||||
offset: 0.2,
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
color: "rgba(137, 14, 161, 1)"
|
{
|
||||||
},
|
offset: 0,
|
||||||
{
|
color: "rgb(1,192,229)"
|
||||||
offset: 0.4,
|
},
|
||||||
color: "rgba(119, 24, 254, 1)"
|
{
|
||||||
},
|
offset: 1,
|
||||||
{
|
color: "#87E0FB "
|
||||||
offset: 0.5,
|
}
|
||||||
color: "rgba(254, 122, 24, 1)"
|
])
|
||||||
},
|
]
|
||||||
{
|
]
|
||||||
offset: 0.8,
|
}
|
||||||
color: "rgba(255, 187, 56, 1)"
|
},
|
||||||
},
|
axisTick: {
|
||||||
{
|
show: false
|
||||||
offset: 1,
|
},
|
||||||
color: "rgba(101, 215, 249, 1)"
|
splitLine: {
|
||||||
}
|
show: false
|
||||||
])
|
},
|
||||||
]
|
axisLabel: {
|
||||||
]
|
show: false
|
||||||
}
|
},
|
||||||
},
|
pointer: {
|
||||||
axisTick: {
|
show: 0
|
||||||
show: false
|
},
|
||||||
},
|
detail: {
|
||||||
splitLine: {
|
show: 0
|
||||||
show: false
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
// 第二个圆
|
||||||
show: true,
|
{
|
||||||
color: "#fff",
|
type: "gauge",
|
||||||
fontSize: 10,
|
radius: "45%",
|
||||||
distance: -40
|
center: posCenter,
|
||||||
},
|
splitNumber: 4,
|
||||||
pointer: {
|
min: 0,
|
||||||
show: 0
|
max: 100,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
shadowBlur: 0,
|
||||||
|
color: [
|
||||||
|
[
|
||||||
|
1,
|
||||||
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgb(1,192,229)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#87E0FB "
|
||||||
|
}
|
||||||
|
])
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: 0
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 第一个圆
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
radius: "25%",
|
||||||
|
center: posCenter,
|
||||||
|
splitNumber: 4,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 200,
|
||||||
|
shadowBlur: 0,
|
||||||
|
color: [
|
||||||
|
[
|
||||||
|
1,
|
||||||
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(135, 224, 251, 0.2)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.2,
|
||||||
|
color: "rgba(135, 224, 251, 0.7)"
|
||||||
|
}
|
||||||
|
])
|
||||||
|
],
|
||||||
|
[1, "transparent"]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: 0
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
radius: "70%",
|
||||||
|
center: posCenter,
|
||||||
|
splitNumber: 0, //刻度数量
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 26,
|
||||||
|
color: [
|
||||||
|
[
|
||||||
|
data.value.value / 100,
|
||||||
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(135, 224, 251, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
])
|
||||||
|
],
|
||||||
|
[1, "transparent"]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//分隔线样式。
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
//仪表盘详情，用于显示数据。
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: data.value.value,
|
||||||
|
itemStyle: {
|
||||||
|
color: "red"
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
//指针外环
|
||||||
|
type: "pie",
|
||||||
|
hoverAnimation: false,
|
||||||
|
legendHoverLink: false,
|
||||||
|
center: posCenter,
|
||||||
|
radius: ["8%", "6%"],
|
||||||
|
// width:5,
|
||||||
|
z: 10,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
{
|
{
|
||||||
// 内侧指针、数值显示
|
value: 100,
|
||||||
name: "",
|
|
||||||
type: "gauge",
|
|
||||||
radius: "95%",
|
|
||||||
center: posCenter,
|
|
||||||
startAngle: 180,
|
|
||||||
endAngle: 0,
|
|
||||||
min: 0, //最小刻度
|
|
||||||
max: 100, //最大刻度
|
|
||||||
splitNumber: 20, //刻度数量
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false
|
|
||||||
}, //刻度标签。
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
}, //刻度样式
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
length: 5,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#87E0FB",
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "#fff"
|
color: "#87E0FB"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: data.value
|
|
||||||
}
|
|
||||||
],
|
|
||||||
z: 9
|
|
||||||
},
|
|
||||||
// 第三个圆
|
|
||||||
{
|
|
||||||
type: "gauge",
|
|
||||||
radius: "70%",
|
|
||||||
center: posCenter,
|
|
||||||
splitNumber: 4,
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
startAngle: 180,
|
|
||||||
endAngle: 0,
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 2,
|
|
||||||
shadowBlur: 0,
|
|
||||||
color: [
|
|
||||||
[
|
|
||||||
1,
|
|
||||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgb(1,192,229)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "#87E0FB "
|
|
||||||
}
|
|
||||||
])
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
pointer: {
|
|
||||||
show: 0
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
show: 0
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
// 第二个圆
|
|
||||||
{
|
|
||||||
type: "gauge",
|
|
||||||
radius: "45%",
|
|
||||||
center: posCenter,
|
|
||||||
splitNumber: 4,
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
startAngle: 180,
|
|
||||||
endAngle: 0,
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 2,
|
|
||||||
shadowBlur: 0,
|
|
||||||
color: [
|
|
||||||
[
|
|
||||||
1,
|
|
||||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgb(1,192,229)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "#87E0FB "
|
|
||||||
}
|
|
||||||
])
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
pointer: {
|
|
||||||
show: 0
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
show: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 第一个圆
|
|
||||||
{
|
|
||||||
type: "gauge",
|
|
||||||
radius: "25%",
|
|
||||||
center: posCenter,
|
|
||||||
splitNumber: 4,
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
startAngle: 180,
|
|
||||||
endAngle: 0,
|
|
||||||
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 200,
|
|
||||||
shadowBlur: 0,
|
|
||||||
color: [
|
|
||||||
[
|
|
||||||
1,
|
|
||||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(135, 224, 251, 0.2)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.2,
|
|
||||||
color: "rgba(135, 224, 251, 0.7)"
|
|
||||||
}
|
|
||||||
])
|
|
||||||
],
|
|
||||||
[1, "transparent"]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
pointer: {
|
|
||||||
show: 0
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
show: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "gauge",
|
|
||||||
radius: "70%",
|
|
||||||
center: posCenter,
|
|
||||||
splitNumber: 0, //刻度数量
|
|
||||||
startAngle: 180,
|
|
||||||
endAngle: 0,
|
|
||||||
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 26,
|
|
||||||
color: [
|
|
||||||
[
|
|
||||||
data.value / 100,
|
|
||||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 0.5,
|
|
||||||
color: "rgba(135, 224, 251, 1)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "#fff"
|
|
||||||
}
|
|
||||||
])
|
|
||||||
],
|
|
||||||
[1, "transparent"]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//分隔线样式。
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
pointer: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
//仪表盘详情，用于显示数据。
|
|
||||||
detail: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: data.value,
|
|
||||||
itemStyle: {
|
|
||||||
color: "red"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
//指针外环
|
|
||||||
type: "pie",
|
|
||||||
hoverAnimation: false,
|
|
||||||
legendHoverLink: false,
|
|
||||||
center: posCenter,
|
|
||||||
radius: ["8%", "6%"],
|
|
||||||
// width:5,
|
|
||||||
z: 10,
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
normal: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#87E0FB"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
//指针内环
|
|
||||||
type: "pie",
|
|
||||||
hoverAnimation: false,
|
|
||||||
legendHoverLink: false,
|
|
||||||
center: posCenter,
|
|
||||||
radius: ["-2%", "4%"],
|
|
||||||
z: 10,
|
|
||||||
|
|
||||||
axisLine: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
normal: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgba(7, 31, 60) "
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
},
|
||||||
let deciData = reactive({
|
{
|
||||||
devicList: [
|
//指针内环
|
||||||
|
type: "pie",
|
||||||
|
hoverAnimation: false,
|
||||||
|
legendHoverLink: false,
|
||||||
|
center: posCenter,
|
||||||
|
radius: ["-2%", "4%"],
|
||||||
|
z: 10,
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: [
|
||||||
{
|
{
|
||||||
decName: "配电箱设备1",
|
value: 100,
|
||||||
status: 0
|
itemStyle: {
|
||||||
},
|
normal: {
|
||||||
{
|
color: "rgba(7, 31, 60) "
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
]
|
||||||
drawChart();
|
});
|
||||||
});
|
let deciData = reactive({
|
||||||
return {
|
devicList: [
|
||||||
deciData,
|
{
|
||||||
data,
|
decName: "配电箱设备1",
|
||||||
posCenter
|
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)
|
||||||
|
|
||||||
|
const getDevStatisticsList = async () => {
|
||||||
|
const res: any = await getDevStatisticsApi({
|
||||||
|
projectSn: store.sn
|
||||||
|
});
|
||||||
|
if (res.result) {
|
||||||
|
deviceData.value = res.result;
|
||||||
|
data.value.value = res.result.grade;
|
||||||
|
drawChart();
|
||||||
}
|
}
|
||||||
|
console.log("配电箱实时数据", res);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDevStatisticsList();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -1,19 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="topRightBox">
|
<div class="topRightBox" v-if="boxAlarmData">
|
||||||
<div class="title"><i>报警列表</i></div>
|
<div class="title"><i>报警列表</i></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="titleData">
|
<div class="titleData">
|
||||||
<div class="numPolice police">
|
<div class="numPolice police">
|
||||||
<div class="numText">总报警次数</div>
|
<div class="numText">总报警次数</div>
|
||||||
<div class="num">307</div>
|
<div class="num">{{ boxAlarmData.alarmNum.totalAlarmNum }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="monthPolice police2">
|
<div class="monthPolice police2">
|
||||||
<div class="numText2">本月报警次数</div>
|
<div class="numText2">本月报警次数</div>
|
||||||
<div class="num2">102</div>
|
<div class="num2">{{ boxAlarmData.alarmNum.monthAlarmNum }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dayPolice police">
|
<div class="dayPolice police">
|
||||||
<div class="numText">今日报警次数</div>
|
<div class="numText">今日报警次数</div>
|
||||||
<div class="num">34</div>
|
<div class="num">{{ boxAlarmData.alarmNum.dayAlarmNum }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tableBox">
|
<div class="tableBox">
|
||||||
@ -23,10 +23,10 @@
|
|||||||
<div class="tabThree">报警类型</div>
|
<div class="tabThree">报警类型</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="listBox" ref="scrollRef">
|
<div class="listBox" ref="scrollRef">
|
||||||
<div v-for="item in list" class="listStyle">
|
<div v-for="item in boxAlarmData.list" class="listStyle" :key="item.id">
|
||||||
<div class="dev" style="margin-left: 5%">{{ item.dev }}</div>
|
<div class="dev" style="margin-left: 5%">{{ item.devName }}</div>
|
||||||
<div class="time">{{ item.time }}</div>
|
<div class="time">{{ item.creatTime }}</div>
|
||||||
<div class="type" style="margin-right: 5%">{{ item.type }}</div>
|
<div class="type" style="margin-right: 5%">{{ item.alarmType }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -34,61 +34,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts" setup>
|
||||||
import { reactive, ref } from "vue";
|
import { onMounted, ref } from "vue";
|
||||||
import Card from "@/components/card.vue";
|
// import * as echarts from "echarts";
|
||||||
export default {
|
import { getBoxAlarmStatisticsApi } from "@/api/modules/distribution";
|
||||||
components: {
|
// import Card from "@/components/card.vue";
|
||||||
Card
|
import { GlobalStore } from "@/stores";
|
||||||
},
|
const store = GlobalStore();
|
||||||
setup() {
|
let boxAlarmData = ref(null as any);
|
||||||
const list = reactive([
|
const getBoxAlarmList = async () => {
|
||||||
{
|
const res: any = await getBoxAlarmStatisticsApi({
|
||||||
dev: "配电箱1",
|
projectSn: store.sn
|
||||||
time: "2023-01-01 12:00:00",
|
});
|
||||||
type: "室内水浸"
|
if (res.result) {
|
||||||
},
|
boxAlarmData.value = res.result;
|
||||||
{
|
console.log("右中报警数据", res.result);
|
||||||
dev: "配电箱1",
|
|
||||||
time: "2023-01-01 12:00:00",
|
|
||||||
type: "室内水浸"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dev: "配电箱1",
|
|
||||||
time: "2023-01-01 12:00:00",
|
|
||||||
type: "室内水浸"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dev: "配电箱1",
|
|
||||||
time: "2023-01-01 12:00:00",
|
|
||||||
type: "室内水浸"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dev: "配电箱1",
|
|
||||||
time: "2023-01-01 12:00:00",
|
|
||||||
type: "室内水浸"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dev: "配电箱1",
|
|
||||||
time: "2023-01-01 12:00:00",
|
|
||||||
type: "室内水浸"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dev: "配电箱1",
|
|
||||||
time: "2023-01-01 12:00:00",
|
|
||||||
type: "室内水浸"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dev: "配电箱1",
|
|
||||||
time: "2023-01-01 12:00:00",
|
|
||||||
type: "室内水浸"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
return {
|
|
||||||
list
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getBoxAlarmList();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<p>数字化项目监管平台</p>
|
<p>数字化项目监管平台</p>
|
||||||
</span>
|
</span>
|
||||||
<div class="rightIcon">
|
<div class="rightIcon">
|
||||||
<div class="time">2023-04-16 09:22:12</div>
|
<div class="time">{{ nowTime }}</div>
|
||||||
<div class="Icon">
|
<div class="Icon">
|
||||||
<img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
|
<img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
@ -45,45 +45,61 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts" setup>
|
||||||
import { reactive, onMounted } from "vue";
|
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
let nowTime = ref("2023-04-16 09:22:12" as any);
|
||||||
|
|
||||||
export default {
|
let menuData = reactive({
|
||||||
setup() {
|
menuList: [
|
||||||
let menuData = reactive({
|
{ moduleName: "扬尘噪声", modulePath: "/headNoise" },
|
||||||
menuList: [
|
{ moduleName: "劳务管理", modulePath: "/laborManagement" },
|
||||||
{ moduleName: "扬尘噪声", modulePath: "/headNoise" },
|
{ moduleName: "视频管理", modulePath: "/videoManagement" },
|
||||||
{ moduleName: "劳务管理", modulePath: "/laborManagement" },
|
{ moduleName: "配电箱监测", modulePath: "/distributionMonitoring" },
|
||||||
{ moduleName: "视频管理", modulePath: "/videoManagement" },
|
{ moduleName: "车辆管理", modulePath: "/vehicleManagement" },
|
||||||
{ moduleName: "配电箱监测", modulePath: "/distributionMonitoring" },
|
{ moduleName: "塔吊监测", modulePath: "/towerCraneMonitoring" },
|
||||||
{ moduleName: "车辆管理", modulePath: "/vehicleManagement" },
|
{ moduleName: "升降机监测", modulePath: "/elevatorMonitoring" },
|
||||||
{ moduleName: "塔吊监测", modulePath: "/towerCraneMonitoring" },
|
{ moduleName: "BIM模型", modulePath: "/bImModel" }
|
||||||
{ moduleName: "升降机监测", modulePath: "/elevatorMonitoring" },
|
],
|
||||||
{ moduleName: "BIM模型", modulePath: "/bImModel" }
|
activeIndex: 0
|
||||||
],
|
});
|
||||||
activeIndex: 0
|
const router = useRouter();
|
||||||
});
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const menuClick = (item, index) => {
|
const menuClick = (item, index) => {
|
||||||
menuData.activeIndex = index;
|
menuData.activeIndex = index;
|
||||||
console.log("点击了tab", item);
|
console.log("点击了tab", item);
|
||||||
if (item.modulePath.includes("/")) {
|
if (item.modulePath.includes("/")) {
|
||||||
router.push(item.modulePath);
|
router.push(item.modulePath);
|
||||||
}
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
console.log("进入页面， ");
|
|
||||||
|
|
||||||
menuClick(menuData.menuList[0], menuData.activeIndex);
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
menuData,
|
|
||||||
menuClick
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
console.log("进入页面， ");
|
||||||
|
menuClick(menuData.menuList[0], menuData.activeIndex);
|
||||||
|
getNowTime();
|
||||||
|
});
|
||||||
|
|
||||||
|
let timer = ref(null as any);
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
});
|
||||||
|
|
||||||
|
function getNowTime() {
|
||||||
|
let speed = 1000;
|
||||||
|
let theNowTime = function () {
|
||||||
|
nowTime.value = timeNumber();
|
||||||
|
};
|
||||||
|
timer.value = setInterval(theNowTime, speed);
|
||||||
|
}
|
||||||
|
function timeNumber() {
|
||||||
|
let today = new Date();
|
||||||
|
let date = today.getFullYear() + "-" + twoDigits(today.getMonth() + 1) + "-" + twoDigits(today.getDate());
|
||||||
|
let time = twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes()) + ":" + twoDigits(today.getSeconds());
|
||||||
|
return date + " " + time;
|
||||||
|
}
|
||||||
|
function twoDigits(val: any) {
|
||||||
|
if (val < 10) return "0" + val;
|
||||||
|
return val;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user