|
|
|
@ -10,7 +10,8 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #extra>
|
|
|
|
<template #extra>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<el-button type="primary" class="month-btn" @click="getList('month')" :class="{ 'active-btn': activeBtn === 'month' }">
|
|
|
|
<el-button type="primary" class="month-btn" @click="getList('month')"
|
|
|
|
|
|
|
|
:class="{ 'active-btn': activeBtn === 'month' }">
|
|
|
|
月
|
|
|
|
月
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
|
<el-button class="week-btn" @click="getList('week')" :class="{ 'active-btn': activeBtn === 'week' }">
|
|
|
|
<el-button class="week-btn" @click="getList('week')" :class="{ 'active-btn': activeBtn === 'week' }">
|
|
|
|
@ -21,12 +22,7 @@
|
|
|
|
</ContentHeader>
|
|
|
|
</ContentHeader>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="chart-container chart-container-bar">
|
|
|
|
<div class="chart-container chart-container-bar">
|
|
|
|
<BarChart
|
|
|
|
<BarChart :xData="xData" :legendArr="legendArr" :datas="datas" :colorArr="colorArr" />
|
|
|
|
:xData="xData"
|
|
|
|
|
|
|
|
:legendArr="legendArr"
|
|
|
|
|
|
|
|
:datas="datas"
|
|
|
|
|
|
|
|
:colorArr="colorArr"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 设备信息 -->
|
|
|
|
<!-- 设备信息 -->
|
|
|
|
@ -51,15 +47,15 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="device-list">
|
|
|
|
<div class="device-list">
|
|
|
|
<div class="device-card">
|
|
|
|
<div class="device-card">
|
|
|
|
<div class="mb-3">车体检测设备: {{ carDevice.total }}</div>
|
|
|
|
<div class="mb-3">车体检测设备: {{ carDevice?.total || 0 }}</div>
|
|
|
|
<DeviceStatus :deviceStatus="carDevice" />
|
|
|
|
<DeviceStatus :deviceStatus="carDevice" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="device-card">
|
|
|
|
<div class="device-card">
|
|
|
|
<div class="mb-3">撑杆检测设备: {{ poleDevice.total }}</div>
|
|
|
|
<div class="mb-3">撑杆检测设备: {{ poleDevice?.total || 0 }}</div>
|
|
|
|
<DeviceStatus :deviceStatus="poleDevice" />
|
|
|
|
<DeviceStatus :deviceStatus="poleDevice" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="device-card">
|
|
|
|
<div class="device-card">
|
|
|
|
<div class="mb-3">钩机检测设备: {{ excavatorDevice.total }}</div>
|
|
|
|
<div class="mb-3">钩机检测设备: {{ excavatorDevice?.total || 0 }}</div>
|
|
|
|
<DeviceStatus :deviceStatus="excavatorDevice" />
|
|
|
|
<DeviceStatus :deviceStatus="excavatorDevice" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -95,17 +91,14 @@
|
|
|
|
</ContentHeader>
|
|
|
|
</ContentHeader>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="chart-container chart-pie-bg">
|
|
|
|
<div class="chart-container chart-pie-bg">
|
|
|
|
<PieChart
|
|
|
|
<PieChart :data="carFaultTotal" :colors="[
|
|
|
|
:data="carFaultTotal"
|
|
|
|
|
|
|
|
:colors="[
|
|
|
|
|
|
|
|
'#FF7C09',
|
|
|
|
'#FF7C09',
|
|
|
|
'#0032FF',
|
|
|
|
'#0032FF',
|
|
|
|
'#04FFF2',
|
|
|
|
'#04FFF2',
|
|
|
|
'#D19EFF',
|
|
|
|
'#D19EFF',
|
|
|
|
'#FF0103',
|
|
|
|
'#FF0103',
|
|
|
|
'#9EFFF3',
|
|
|
|
'#9EFFF3',
|
|
|
|
]"
|
|
|
|
]" />
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<li>
|
|
|
|
@ -133,10 +126,7 @@
|
|
|
|
</ContentHeader>
|
|
|
|
</ContentHeader>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="chart-container chart-pie-bg">
|
|
|
|
<div class="chart-container chart-pie-bg">
|
|
|
|
<PieChartSmall
|
|
|
|
<PieChartSmall :data="poleFaultTotal" :colors="['#9DFFF3', '#FFA179']" />
|
|
|
|
:data="poleFaultTotal"
|
|
|
|
|
|
|
|
:colors="['#9DFFF3', '#FFA179']"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
@ -154,11 +144,11 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="monitor-images">
|
|
|
|
<div class="monitor-images">
|
|
|
|
<div class="monitor-images-left">
|
|
|
|
<div class="monitor-images-left">
|
|
|
|
<img :src="imageFault[0]?.url" alt="监控画面" />
|
|
|
|
<img :src="imageFault[0]?.url" />
|
|
|
|
<div class="fault-info">{{ imageFault[0]?.fault_type }}</div>
|
|
|
|
<div class="fault-info">{{ imageFault[0]?.fault_type }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="monitor-images-right">
|
|
|
|
<div class="monitor-images-right">
|
|
|
|
<img :src="imageFault[1]?.url" alt="监控画面" />
|
|
|
|
<img :src="imageFault[1]?.url"/>
|
|
|
|
<div class="fault-info">{{ imageFault[1]?.fault_type }}</div>
|
|
|
|
<div class="fault-info">{{ imageFault[1]?.fault_type }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -174,7 +164,8 @@ import BarChart from "./components/BarChart.vue";
|
|
|
|
import PieChart from "./components/PieChart.vue";
|
|
|
|
import PieChart from "./components/PieChart.vue";
|
|
|
|
import PieChartSmall from "./components/PieChartSmall.vue";
|
|
|
|
import PieChartSmall from "./components/PieChartSmall.vue";
|
|
|
|
import DeviceStatus from "./components/DeviceStatus.vue";
|
|
|
|
import DeviceStatus from "./components/DeviceStatus.vue";
|
|
|
|
import { getDataOverviewApi,getDeviceInfowApi,getRecordFaultApi,getRealTimeApi } from '@/api/dashboard';
|
|
|
|
import { getDataOverviewApi, getDeviceInfowApi, getRecordFaultApi, getRealTimeApi } from '@/api/dashboard';
|
|
|
|
|
|
|
|
import { isSuccessApi } from "@/utils/forApi";
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
defineOptions({
|
|
|
|
name: "DataOverviewWrap"
|
|
|
|
name: "DataOverviewWrap"
|
|
|
|
@ -206,53 +197,63 @@ const carFaultTotal = ref([]);
|
|
|
|
const poleFaultTotal = ref([]);
|
|
|
|
const poleFaultTotal = ref([]);
|
|
|
|
const imageFault = ref([]);
|
|
|
|
const imageFault = ref([]);
|
|
|
|
const activeBtn = ref("month");
|
|
|
|
const activeBtn = ref("month");
|
|
|
|
const getList = async (dateType:string = "month") => {
|
|
|
|
const getList = async (dateType: string = "month") => {
|
|
|
|
activeBtn.value = dateType
|
|
|
|
activeBtn.value = dateType
|
|
|
|
const res = await getDataOverviewApi({ dateType })
|
|
|
|
const res = await getDataOverviewApi({ dateType })
|
|
|
|
const { data } = await res
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
|
|
|
|
const { data } = res
|
|
|
|
datas.value[0] = data.appearance
|
|
|
|
datas.value[0] = data.appearance
|
|
|
|
datas.value[1] = data.pole
|
|
|
|
datas.value[1] = data.pole
|
|
|
|
if(dateType === "month") {
|
|
|
|
if (dateType === "month") {
|
|
|
|
xData.value = data.dateArr.map((item:any) => {if(dateType === 'month') {
|
|
|
|
xData.value = data.dateArr.map((item: any) => {
|
|
|
|
return item+'月'
|
|
|
|
if (dateType === 'month') {
|
|
|
|
|
|
|
|
return item + '月'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}else {
|
|
|
|
} else {
|
|
|
|
xData.value = ["周一","周二","周三","周四","周五","周六","周日"]
|
|
|
|
xData.value = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// console.log(data, 'getList_data')
|
|
|
|
// console.log(data, 'getList_data')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const getDeviceInfo = async () => {
|
|
|
|
const getDeviceInfo = async () => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const res = await getDeviceInfowApi();
|
|
|
|
const res = await getDeviceInfowApi();
|
|
|
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
const { data } = res;
|
|
|
|
const { data } = res;
|
|
|
|
deviceTotal.value = data.deviceTotal;
|
|
|
|
deviceTotal.value = data.deviceTotal;
|
|
|
|
carDevice.value = data.appearance;
|
|
|
|
carDevice.value = data.appearance;
|
|
|
|
poleDevice.value = data.pole;
|
|
|
|
poleDevice.value = data.pole;
|
|
|
|
excavatorDevice.value = data.excavator;
|
|
|
|
excavatorDevice.value = data.excavator;
|
|
|
|
// deviceStatus.value = data
|
|
|
|
// deviceStatus.value = data
|
|
|
|
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const getPoleFault = async () => {
|
|
|
|
const getPoleFault = async () => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const res = await getRecordFaultApi({dateType: 'month',value: searchForm.pole,type:"pole"});
|
|
|
|
const res = await getRecordFaultApi({ dateType: 'month', value: searchForm.pole, type: "pole" });
|
|
|
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
const { data } = res;
|
|
|
|
const { data } = res;
|
|
|
|
poleFaultTotal.value = data;
|
|
|
|
poleFaultTotal.value = data;
|
|
|
|
// deviceStatus.value = data
|
|
|
|
// deviceStatus.value = data
|
|
|
|
console.log(data);
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const getCarFault = async () => {
|
|
|
|
const getCarFault = async () => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const res = await getRecordFaultApi({dateType: 'month',value: searchForm.car,type:"appearance"});
|
|
|
|
const res = await getRecordFaultApi({ dateType: 'month', value: searchForm.car, type: "appearance" });
|
|
|
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
const { data } = res;
|
|
|
|
const { data } = res;
|
|
|
|
carFaultTotal.value = data;
|
|
|
|
carFaultTotal.value = data;
|
|
|
|
// deviceStatus.value = data
|
|
|
|
// deviceStatus.value = data
|
|
|
|
console.log(data);
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -260,11 +261,13 @@ const getCarFault = async () => {
|
|
|
|
|
|
|
|
|
|
|
|
const getRealTime = async () => {
|
|
|
|
const getRealTime = async () => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const res = await getRealTimeApi({deviceType: ''});
|
|
|
|
const res = await getRealTimeApi({ deviceType: '' });
|
|
|
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
const { data } = res;
|
|
|
|
const { data } = res;
|
|
|
|
imageFault.value = data;
|
|
|
|
imageFault.value = data;
|
|
|
|
// deviceStatus.value = data
|
|
|
|
// deviceStatus.value = data
|
|
|
|
console.log(data);
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
