feat: 对接接口数据
parent
eaa15cddc5
commit
66da196362
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,5 @@
|
||||
import request from "@/utils/request/instance";
|
||||
import { config } from "@/config";
|
||||
export const getAllDataApi = (params: any) => {
|
||||
return request.get(`/api`, params);
|
||||
};
|
||||
@ -1,149 +0,0 @@
|
||||
.data-overview-wrap {
|
||||
padding-top: 30px;
|
||||
// background: #002a5c;
|
||||
color: white;
|
||||
font-family: "Arial", sans-serif;
|
||||
.grid-container {
|
||||
display: flex;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
.grid-item {
|
||||
// background: rgba(74, 126, 191, 0.1);
|
||||
background-image: url("@/assets/common/gridItemBg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
// border-radius: 8px;
|
||||
width: 50%;
|
||||
|
||||
&>li{
|
||||
width: 50%;
|
||||
}
|
||||
&>li:last-child{
|
||||
margin-left: 12px;
|
||||
}
|
||||
.module-header {
|
||||
color: #4a7ebf;
|
||||
margin-bottom: 15px;
|
||||
.month-btn,
|
||||
.week-btn {
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
color: #FFF;
|
||||
background: #0F2839;
|
||||
border: none;
|
||||
}
|
||||
.week-btn {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.active-btn {
|
||||
background: #0B345E;
|
||||
border: 1px solid #3FDDEB;
|
||||
}
|
||||
}
|
||||
.chart-container {
|
||||
// margin-top: 0px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.chart-container-bar {
|
||||
// margin-top: 0px;
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
}
|
||||
.chart-pie-bg{
|
||||
margin-top: 19px;
|
||||
background-image: url("@/assets/common/gridItemPieBg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
.grid-item-pie {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
.device-info {
|
||||
.total-device {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.device-icon {
|
||||
width: 80px;
|
||||
height: 90px;
|
||||
background: url('@/assets/common/deviceTotal.png')
|
||||
no-repeat center;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.device-count {
|
||||
margin-left: 15px;
|
||||
|
||||
.count-number {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-list {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 0 16px 20px;
|
||||
gap: 10px;
|
||||
|
||||
.device-card {
|
||||
box-sizing: border-box;
|
||||
// background: rgba(74, 126, 191, 0.1);
|
||||
background-image: url("@/assets/common/deviceCardBg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 16px;
|
||||
// border-radius: 4px;
|
||||
|
||||
.status-bar {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.monitor-images {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
gap: 16px;
|
||||
padding: 20px 16px 20px 16px;
|
||||
.monitor-images-left,
|
||||
.monitor-images-right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 256px;
|
||||
}
|
||||
.fault-info {
|
||||
position: absolute;
|
||||
padding: 0 10px;
|
||||
// miomwidth: 80px;
|
||||
height: 28px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 16px 16px 16px 16px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
font-size: 14px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,309 +0,0 @@
|
||||
<template>
|
||||
<div class="data-overview-wrap">
|
||||
<!-- 检测总量汇总 -->
|
||||
<div class="grid-container">
|
||||
<div class="grid-item">
|
||||
<div class="module-header">
|
||||
<ContentHeader bgLayout="918">
|
||||
<template #title>
|
||||
<div class="w-[200px] bg_title bg_title_0"></div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div>
|
||||
<el-button type="primary" class="month-btn" @click="getList('month')"
|
||||
:class="{ 'active-btn': activeBtn === 'month' }">
|
||||
月
|
||||
</el-button>
|
||||
<el-button class="week-btn" @click="getList('week')" :class="{ 'active-btn': activeBtn === 'week' }">
|
||||
周
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</ContentHeader>
|
||||
</div>
|
||||
<div class="chart-container chart-container-bar">
|
||||
<BarChart :xData="xData" :legendArr="legendArr" :datas="datas" :colorArr="colorArr" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备信息 -->
|
||||
<div class="grid-item">
|
||||
<div class="module-header">
|
||||
<ContentHeader bgLayout="918">
|
||||
<template #title>
|
||||
<div class="w-[200px] bg_title bg_title_1"></div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div></div>
|
||||
</template>
|
||||
</ContentHeader>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<div class="total-device">
|
||||
<div class="device-icon"></div>
|
||||
<div class="device-count">
|
||||
<div>设备总数</div>
|
||||
<div class="count-number">{{ deviceTotal }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-list">
|
||||
<div class="device-card">
|
||||
<div class="mb-3">车体检测设备: {{ carDevice?.total || 0 }}</div>
|
||||
<DeviceStatus :deviceStatus="carDevice" />
|
||||
</div>
|
||||
<div class="device-card">
|
||||
<div class="mb-3">撑杆检测设备: {{ poleDevice?.total || 0 }}</div>
|
||||
<DeviceStatus :deviceStatus="poleDevice" />
|
||||
</div>
|
||||
<div class="device-card">
|
||||
<div class="mb-3">钩机检测设备: {{ excavatorDevice?.total || 0 }}</div>
|
||||
<DeviceStatus :deviceStatus="excavatorDevice" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中部检测模块 -->
|
||||
<div class="grid-container">
|
||||
<ul class="flex grid-item grid-item-pie">
|
||||
<li>
|
||||
<div class="module-header">
|
||||
<ContentHeader bgLayout="450">
|
||||
<template #title>
|
||||
<div class="w-[200px] bg_title bg_title_2"></div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-select v-model="searchForm.car" placeholder="时间" class="custom-select" @change="getCarFault()">
|
||||
<el-option label="1月" value="1"></el-option>
|
||||
<el-option label="2月" value="2"></el-option>
|
||||
<el-option label="3月" value="3"></el-option>
|
||||
<el-option label="4月" value="4"></el-option>
|
||||
<el-option label="5月" value="5"></el-option>
|
||||
<el-option label="6月" value="6"></el-option>
|
||||
<el-option label="7月" value="7"></el-option>
|
||||
<el-option label="8月" value="8"></el-option>
|
||||
<el-option label="9月" value="9"></el-option>
|
||||
<el-option label="10月" value="10"></el-option>
|
||||
<el-option label="11月" value="11"></el-option>
|
||||
<el-option label="12月" value="12"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</ContentHeader>
|
||||
</div>
|
||||
<div class="chart-container chart-pie-bg">
|
||||
<PieChart :data="carFaultTotal" :colors="[
|
||||
'#FF7C09',
|
||||
'#0032FF',
|
||||
'#04FFF2',
|
||||
'#D19EFF',
|
||||
'#FF0103',
|
||||
'#9EFFF3',
|
||||
]" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="module-header">
|
||||
<ContentHeader bgLayout="450">
|
||||
<template #title>
|
||||
<div class="w-[200px] bg_title bg_title_3"></div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-select v-model="searchForm.pole" placeholder="时间" class="custom-select" @change="getPoleFault()">
|
||||
<el-option label="1月" value="1"></el-option>
|
||||
<el-option label="2月" value="2"></el-option>
|
||||
<el-option label="3月" value="3"></el-option>
|
||||
<el-option label="4月" value="4"></el-option>
|
||||
<el-option label="5月" value="5"></el-option>
|
||||
<el-option label="6月" value="6"></el-option>
|
||||
<el-option label="7月" value="7"></el-option>
|
||||
<el-option label="8月" value="8"></el-option>
|
||||
<el-option label="9月" value="9"></el-option>
|
||||
<el-option label="10月" value="10"></el-option>
|
||||
<el-option label="11月" value="11"></el-option>
|
||||
<el-option label="12月" value="12"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</ContentHeader>
|
||||
</div>
|
||||
<div class="chart-container chart-pie-bg">
|
||||
<PieChartSmall :data="poleFaultTotal" :colors="['#9DFFF3', '#FFA179']" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="grid-item">
|
||||
<div class="module-header">
|
||||
<ContentHeader bgLayout="918">
|
||||
<template #title>
|
||||
<div class="w-[200px] bg_title bg_title_4"></div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div></div>
|
||||
</template>
|
||||
</ContentHeader>
|
||||
</div>
|
||||
<div class="monitor-images">
|
||||
<div class="monitor-images-left">
|
||||
<img :src="imageFault[0]?.url" />
|
||||
<div class="fault-info">{{ imageFault[0]?.fault_type }}</div>
|
||||
</div>
|
||||
<div class="monitor-images-right">
|
||||
<img :src="imageFault[1]?.url"/>
|
||||
<div class="fault-info">{{ imageFault[1]?.fault_type }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AlarmModal v-model:value="isAlarmOpen" :info="currentRow" :image="currFileList" @close="isAlarmOpen = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import ContentHeader from "@/components/ContentHeader.vue";
|
||||
import BarChart from "./components/BarChart.vue";
|
||||
import PieChart from "./components/PieChart.vue";
|
||||
import PieChartSmall from "./components/PieChartSmall.vue";
|
||||
import DeviceStatus from "./components/DeviceStatus.vue";
|
||||
import { getDataOverviewApi, getDeviceInfowApi, getRecordFaultApi, getRealTimeApi } from '@/api/dashboard';
|
||||
import { isSuccessApi } from "@/utils/forApi";
|
||||
import AlarmModal from './components/AlarmModal.vue'
|
||||
import { useWebSocketStore } from '@/stores/websocketStore';
|
||||
import { onBeforeRouteLeave } from 'vue-router';
|
||||
|
||||
defineOptions({
|
||||
name: "DataOverviewWrap"
|
||||
});
|
||||
const xData = ref(["1月", "2月", "3月", "4月", "5月"]);
|
||||
const legendArr = ["车体检测", "撑杆检测"];
|
||||
const datas = ref([
|
||||
[1528, 1266.02, 2468.39, 2982.67, 3165.91],
|
||||
[2844.44, 6505.07, 8016.12, 6350.87, 1474.61],
|
||||
]);
|
||||
const colorArr = [
|
||||
["#3B9FFE", "#5070F2"],
|
||||
["#FFDA8D", "#FFAC06"],
|
||||
];
|
||||
const deviceStatus = ref({
|
||||
onlineCount: 50,
|
||||
errorCount: 10,
|
||||
outlineCount: 10
|
||||
});
|
||||
const searchForm = reactive({
|
||||
car: "1",
|
||||
pole: "1",
|
||||
});
|
||||
const deviceTotal = ref(0);
|
||||
const carDevice = ref({});
|
||||
const poleDevice = ref({});
|
||||
const excavatorDevice = ref({});
|
||||
const carFaultTotal = ref([]);
|
||||
const poleFaultTotal = ref([]);
|
||||
const imageFault = ref([]);
|
||||
const activeBtn = ref("month");
|
||||
const isAlarmOpen = ref<Boolean>(false); //详情弹窗
|
||||
const currentRow = ref<Record<string, any>>({}); // 当前选中行
|
||||
const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
|
||||
|
||||
const websocketStore = useWebSocketStore();
|
||||
// 监听 messages 的变化
|
||||
watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
|
||||
if(newMessages?.length > 0 && !isAlarmOpen.value) {
|
||||
currentRow.value = newMessages[newMessages?.length - 1];
|
||||
currFileList.value = newMessages[newMessages?.length - 1]?.images;
|
||||
isAlarmOpen.value = true;
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
|
||||
const getList = async (dateType: string = "month") => {
|
||||
activeBtn.value = dateType
|
||||
const res = await getDataOverviewApi({ dateType })
|
||||
if (isSuccessApi(res)) {
|
||||
const { data } = res
|
||||
datas.value[0] = data.appearance
|
||||
datas.value[1] = data.pole
|
||||
if (dateType === "month") {
|
||||
xData.value = data.dateArr.map((item: any) => {
|
||||
if (dateType === 'month') {
|
||||
return item + '月'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
xData.value = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
||||
}
|
||||
// console.log(data, 'getList_data')
|
||||
}
|
||||
|
||||
};
|
||||
const getDeviceInfo = async () => {
|
||||
try {
|
||||
const res = await getDeviceInfowApi();
|
||||
if (isSuccessApi(res)) {
|
||||
const { data } = res;
|
||||
deviceTotal.value = data.deviceTotal;
|
||||
carDevice.value = data.appearance;
|
||||
poleDevice.value = data.pole;
|
||||
excavatorDevice.value = data.excavator;
|
||||
// deviceStatus.value = data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设备信息出错:', error);
|
||||
}
|
||||
}
|
||||
const getPoleFault = async () => {
|
||||
try {
|
||||
const res = await getRecordFaultApi({ dateType: 'month', value: searchForm.pole, type: "pole" });
|
||||
if (isSuccessApi(res)) {
|
||||
const { data } = res;
|
||||
poleFaultTotal.value = data;
|
||||
// deviceStatus.value = data
|
||||
console.log(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设备信息出错:', error);
|
||||
}
|
||||
}
|
||||
const getCarFault = async () => {
|
||||
try {
|
||||
const res = await getRecordFaultApi({ dateType: 'month', value: searchForm.car, type: "appearance" });
|
||||
if (isSuccessApi(res)) {
|
||||
const { data } = res;
|
||||
carFaultTotal.value = data;
|
||||
// deviceStatus.value = data
|
||||
console.log(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设备信息出错:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const getRealTime = async () => {
|
||||
try {
|
||||
const res = await getRealTimeApi({ deviceType: '' });
|
||||
if (isSuccessApi(res)) {
|
||||
const { data } = res;
|
||||
imageFault.value = data;
|
||||
// deviceStatus.value = data
|
||||
console.log(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设备信息出错:', error);
|
||||
}
|
||||
}
|
||||
onBeforeRouteLeave(() => {
|
||||
isAlarmOpen.value = false;
|
||||
currentRow.value = {};
|
||||
currFileList.value = [];
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
getDeviceInfo()
|
||||
getCarFault()
|
||||
getPoleFault()
|
||||
getRealTime()
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import url("./DataOverview.scss");
|
||||
</style>
|
||||
@ -0,0 +1 @@
|
||||
/* 首页 */
|
||||
Loading…
Reference in New Issue