|
|
|
@ -55,12 +55,12 @@
|
|
|
|
|
<DeviceStatus :deviceStatus="carDevice" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="device-card">
|
|
|
|
|
<div class="mb-3">撑杆检测设备: 10</div>
|
|
|
|
|
<DeviceStatus :deviceStatus="deviceStatus" />
|
|
|
|
|
<div class="mb-3">撑杆检测设备: {{ poleDevice.total }}</div>
|
|
|
|
|
<DeviceStatus :deviceStatus="poleDevice" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="device-card">
|
|
|
|
|
<div class="mb-3">钩机检测设备: 15</div>
|
|
|
|
|
<DeviceStatus :deviceStatus="deviceStatus" />
|
|
|
|
|
<div class="mb-3">钩机检测设备: {{ excavatorDevice.total }}</div>
|
|
|
|
|
<DeviceStatus :deviceStatus="excavatorDevice" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -96,14 +96,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
<PieChart
|
|
|
|
|
:data="[
|
|
|
|
|
{ value: 26, name: '搭扣未搭' },
|
|
|
|
|
{ value: 35, name: '下侧门缺失' },
|
|
|
|
|
{ value: 15, name: '小门搭扣丢失' },
|
|
|
|
|
{ value: 15, name: '门折页脱落' },
|
|
|
|
|
{ value: 10, name: '小门外翘' },
|
|
|
|
|
{ value: 5, name: '小窗裂纹' },
|
|
|
|
|
]"
|
|
|
|
|
:data="carFaultTotal"
|
|
|
|
|
:colors="[
|
|
|
|
|
'#FF7C09',
|
|
|
|
|
'#0032FF',
|
|
|
|
@ -178,7 +171,7 @@ 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 } from '@/api/dashboard';
|
|
|
|
|
import { getDataOverviewApi,getDeviceInfowApi,getRecordFaultApi } from '@/api/dashboard';
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "DataOverviewWrap"
|
|
|
|
@ -205,6 +198,10 @@ const searchForm = reactive({
|
|
|
|
|
});
|
|
|
|
|
const deviceTotal = ref(0);
|
|
|
|
|
const carDevice = ref({});
|
|
|
|
|
const poleDevice = ref({});
|
|
|
|
|
const excavatorDevice = ref({});
|
|
|
|
|
const carFaultTotal = ref([]);
|
|
|
|
|
const poleFaultTotal = ref([]);
|
|
|
|
|
const activeBtn = ref("month");
|
|
|
|
|
const getList = async (dateType:string = "month") => {
|
|
|
|
|
activeBtn.value = dateType
|
|
|
|
@ -228,7 +225,20 @@ const getDeviceInfo = async () => {
|
|
|
|
|
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 getRecordFault = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const res = await getRecordFaultApi({dateType: 'month',value: 1,type:"appearance"});
|
|
|
|
|
const { data } = res;
|
|
|
|
|
carFaultTotal.value = data;
|
|
|
|
|
// deviceStatus.value = data
|
|
|
|
|
console.log(data);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取设备信息出错:', error);
|
|
|
|
|
}
|
|
|
|
@ -236,6 +246,7 @@ const getDeviceInfo = async () => {
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getList()
|
|
|
|
|
getDeviceInfo()
|
|
|
|
|
getRecordFault()
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|