diff --git a/src/api/dashboard.ts b/src/api/dashboard.ts
index 36105a3..8a5070d 100644
--- a/src/api/dashboard.ts
+++ b/src/api/dashboard.ts
@@ -43,3 +43,8 @@ export const getRecordFaultApi = (params: any) => {
return request.get(`/api/v1/system/get_record_fault_stats/`, params);
};
+// 获取实时监控
+export const getRealTimeApi = () => {
+ return request.get(`/api/v1/record/get_latest_second_records/`);
+};
+
diff --git a/src/views/dashboard/DataOverview.scss b/src/views/dashboard/DataOverview.scss
index 0b60220..e01d55a 100644
--- a/src/views/dashboard/DataOverview.scss
+++ b/src/views/dashboard/DataOverview.scss
@@ -93,10 +93,30 @@
box-sizing: border-box;
gap: 16px;
padding: 20px 16px 20px 16px;
- img {
- width: 100%;
- height: auto;
+ .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;
+ }
}
+
}
}
diff --git a/src/views/dashboard/DataOverview.vue b/src/views/dashboard/DataOverview.vue
index c2459d1..27d989d 100644
--- a/src/views/dashboard/DataOverview.vue
+++ b/src/views/dashboard/DataOverview.vue
@@ -77,7 +77,7 @@
-
+
@@ -115,7 +115,7 @@
-
+
@@ -134,10 +134,7 @@
@@ -156,8 +153,14 @@
-

-

+
+
![监控画面]()
+
{{ imageFault[0].fault_type }}
+
+
+
![监控画面]()
+
{{ imageFault[1].fault_type }}
+
@@ -171,7 +174,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,getRecordFaultApi } from '@/api/dashboard';
+import { getDataOverviewApi,getDeviceInfowApi,getRecordFaultApi,getRealTimeApi } from '@/api/dashboard';
defineOptions({
name: "DataOverviewWrap"
@@ -192,9 +195,8 @@ const deviceStatus = ref({
outlineCount: 10
});
const searchForm = reactive({
- name: "",
- status: "",
- faultType: "",
+ car: "1",
+ pole: "1",
});
const deviceTotal = ref(0);
const carDevice = ref({});
@@ -202,6 +204,7 @@ const poleDevice = ref({});
const excavatorDevice = ref({});
const carFaultTotal = ref([]);
const poleFaultTotal = ref([]);
+const imageFault = ref([]);
const activeBtn = ref("month");
const getList = async (dateType:string = "month") => {
activeBtn.value = dateType
@@ -232,9 +235,20 @@ const getDeviceInfo = async () => {
console.error('获取设备信息出错:', error);
}
}
-const getRecordFault = async () => {
+const getPoleFault = async () => {
+ try {
+ const res = await getRecordFaultApi({dateType: 'month',value: searchForm.pole,type:"pole"});
+ 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: 1,type:"appearance"});
+ const res = await getRecordFaultApi({dateType: 'month',value: searchForm.car,type:"appearance"});
const { data } = res;
carFaultTotal.value = data;
// deviceStatus.value = data
@@ -243,10 +257,24 @@ const getRecordFault = async () => {
console.error('获取设备信息出错:', error);
}
}
+
+const getRealTime = async () => {
+ try {
+ const res = await getRealTimeApi({deviceType: ''});
+ const { data } = res;
+ imageFault.value = data;
+ // deviceStatus.value = data
+ console.log(data);
+ } catch (error) {
+ console.error('获取设备信息出错:', error);
+ }
+}
onMounted(() => {
getList()
getDeviceInfo()
- getRecordFault()
+ getCarFault()
+ getPoleFault()
+ getRealTime()
});