|
|
|
@ -3,6 +3,13 @@ import ReCol from "@/components/ReCol";
|
|
|
|
import { barChart, pieChart, pie3DChart } from "./components/chart";
|
|
|
|
import { barChart, pieChart, pie3DChart } from "./components/chart";
|
|
|
|
import DeviceStatus from "./components/DeviceStatus.vue";
|
|
|
|
import DeviceStatus from "./components/DeviceStatus.vue";
|
|
|
|
import Notify from "./components/Notify.vue";
|
|
|
|
import Notify from "./components/Notify.vue";
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
|
|
|
getDataOverviewList,
|
|
|
|
|
|
|
|
getDeviceList,
|
|
|
|
|
|
|
|
getWarningList,
|
|
|
|
|
|
|
|
getMessagesList
|
|
|
|
|
|
|
|
} from "@/api/workbench";
|
|
|
|
|
|
|
|
import { onMounted, ref } from "vue";
|
|
|
|
// import SwiperShow from "./components/SwiperShow.vue";
|
|
|
|
// import SwiperShow from "./components/SwiperShow.vue";
|
|
|
|
// import dataViewIcon1 from "@/assets/svg/icons/dataViewIcon1.svg";
|
|
|
|
// import dataViewIcon1 from "@/assets/svg/icons/dataViewIcon1.svg";
|
|
|
|
// import dataViewIcon2 from "@/assets/svg/icons/dataViewIcon1.svg";
|
|
|
|
// import dataViewIcon2 from "@/assets/svg/icons/dataViewIcon1.svg";
|
|
|
|
@ -25,20 +32,20 @@ const headStyles = "inline-block mb-3 text-base font-bold";
|
|
|
|
// questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
|
|
|
|
// questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// ];
|
|
|
|
// ];
|
|
|
|
const pie3Ddata = {
|
|
|
|
// const pie3Ddata = {
|
|
|
|
data: [
|
|
|
|
// data: [
|
|
|
|
{ name: "紧急", value: 30 },
|
|
|
|
// { name: "紧急", value: 30 },
|
|
|
|
{ name: "较高", value: 10 },
|
|
|
|
// { name: "较高", value: 10 },
|
|
|
|
{ name: "一般", value: 60 }
|
|
|
|
// { name: "一般", value: 60 }
|
|
|
|
]
|
|
|
|
// ]
|
|
|
|
};
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
// 数据预览
|
|
|
|
// 数据预览
|
|
|
|
// TODO 图标需要替换
|
|
|
|
// TODO 图标需要替换
|
|
|
|
const dataViewList = [
|
|
|
|
const dataViewList = ref([
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "异常总量",
|
|
|
|
label: "异常总量",
|
|
|
|
value: "110200",
|
|
|
|
value: 110200,
|
|
|
|
color: "#FF861A",
|
|
|
|
color: "#FF861A",
|
|
|
|
bgColor: "#FFE9D6",
|
|
|
|
bgColor: "#FFE9D6",
|
|
|
|
bigBgColor: "#FFFAF5",
|
|
|
|
bigBgColor: "#FFFAF5",
|
|
|
|
@ -48,7 +55,7 @@ const dataViewList = [
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "设备总量",
|
|
|
|
label: "设备总量",
|
|
|
|
value: "46700",
|
|
|
|
value: 46700,
|
|
|
|
color: "#5786FF",
|
|
|
|
color: "#5786FF",
|
|
|
|
bgColor: "#D6E0FF",
|
|
|
|
bgColor: "#D6E0FF",
|
|
|
|
bigBgColor: "#F5F8FF",
|
|
|
|
bigBgColor: "#F5F8FF",
|
|
|
|
@ -58,7 +65,7 @@ const dataViewList = [
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "覆盖车间",
|
|
|
|
label: "覆盖车间",
|
|
|
|
value: "40",
|
|
|
|
value: 40,
|
|
|
|
color: "#5024FE",
|
|
|
|
color: "#5024FE",
|
|
|
|
bgColor: "#DDD5FD",
|
|
|
|
bgColor: "#DDD5FD",
|
|
|
|
bigBgColor: "#F5F3FD",
|
|
|
|
bigBgColor: "#F5F3FD",
|
|
|
|
@ -77,7 +84,78 @@ const dataViewList = [
|
|
|
|
|
|
|
|
|
|
|
|
icon: "icon-ziyuanshiyong1"
|
|
|
|
icon: "icon-ziyuanshiyong1"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
];
|
|
|
|
]);
|
|
|
|
|
|
|
|
const dataOverView = ref({
|
|
|
|
|
|
|
|
total_device: 1,
|
|
|
|
|
|
|
|
total_node: 3,
|
|
|
|
|
|
|
|
total_resource: "62.201%",
|
|
|
|
|
|
|
|
total_warning: 1
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
const deviceStatus = ref({
|
|
|
|
|
|
|
|
errorCount: 0,
|
|
|
|
|
|
|
|
onlineCount: 1,
|
|
|
|
|
|
|
|
outlineCount: 0,
|
|
|
|
|
|
|
|
processCount: 1
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const deviceWarning = ref([]);
|
|
|
|
|
|
|
|
const computeUsed = ref([]);
|
|
|
|
|
|
|
|
const barData = ref([]);
|
|
|
|
|
|
|
|
const MessageData = ref([]);
|
|
|
|
|
|
|
|
async function getListData() {
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
// const { data } = await getModelList({});
|
|
|
|
|
|
|
|
const { data } = await getDataOverviewList();
|
|
|
|
|
|
|
|
dataOverView.value = data;
|
|
|
|
|
|
|
|
dataViewList.value[0].value = dataOverView.value.total_warning;
|
|
|
|
|
|
|
|
dataViewList.value[1].value = dataOverView.value.total_device;
|
|
|
|
|
|
|
|
dataViewList.value[2].value = dataOverView.value.total_node;
|
|
|
|
|
|
|
|
dataViewList.value[3].value = dataOverView.value.total_resource;
|
|
|
|
|
|
|
|
// console.log(data, "resData", data);
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
|
|
console.log(e);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function getListDevice() {
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
// const { data } = await getModelList({});
|
|
|
|
|
|
|
|
const { data } = await getDeviceList();
|
|
|
|
|
|
|
|
deviceStatus.value = data.device_status;
|
|
|
|
|
|
|
|
deviceWarning.value = data.device_warnings;
|
|
|
|
|
|
|
|
computeUsed.value = data.compute_used;
|
|
|
|
|
|
|
|
console.log(data, "resData");
|
|
|
|
|
|
|
|
console.log(deviceWarning.value, "computeUsed");
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
|
|
console.log(e);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
async function getListWarning() {
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
// const { data } = await getModelList({});
|
|
|
|
|
|
|
|
const { data } = await getWarningList();
|
|
|
|
|
|
|
|
barData.value = data.warnings_list;
|
|
|
|
|
|
|
|
console.log(data, "resData");
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
|
|
console.log(e);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
async function getListMessages() {
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
// const { data } = await getModelList({});
|
|
|
|
|
|
|
|
const { data } = await getMessagesList();
|
|
|
|
|
|
|
|
MessageData.value = data.results;
|
|
|
|
|
|
|
|
console.log(data, "resData");
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
|
|
console.log(e);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
getListData();
|
|
|
|
|
|
|
|
getListDevice();
|
|
|
|
|
|
|
|
getListWarning();
|
|
|
|
|
|
|
|
getListMessages();
|
|
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
@ -201,7 +279,9 @@ const dataViewList = [
|
|
|
|
:body-style="{ padding: '16px' }"
|
|
|
|
:body-style="{ padding: '16px' }"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span :class="headStyles">设备状态</span>
|
|
|
|
<span :class="headStyles">设备状态</span>
|
|
|
|
<div class="flex justify-between h-[210px]"><DeviceStatus /></div>
|
|
|
|
<div class="flex justify-between h-[210px]">
|
|
|
|
|
|
|
|
<DeviceStatus :deviceStatus="deviceStatus" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</re-col>
|
|
|
|
</re-col>
|
|
|
|
<re-col
|
|
|
|
<re-col
|
|
|
|
@ -230,7 +310,7 @@ const dataViewList = [
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span :class="headStyles">设备告警情况</span>
|
|
|
|
<span :class="headStyles">设备告警情况</span>
|
|
|
|
<div class="flex justify-between h-[210px]">
|
|
|
|
<div class="flex justify-between h-[210px]">
|
|
|
|
<pie3DChart :data="pie3Ddata.data" />
|
|
|
|
<pie3DChart :data="deviceWarning" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</re-col>
|
|
|
|
</re-col>
|
|
|
|
@ -260,7 +340,7 @@ const dataViewList = [
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span :class="headStyles">算力占用</span>
|
|
|
|
<span :class="headStyles">算力占用</span>
|
|
|
|
<div class="flex justify-between h-[210px]">
|
|
|
|
<div class="flex justify-between h-[210px]">
|
|
|
|
<pieChart />
|
|
|
|
<pieChart :data="computeUsed" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</re-col>
|
|
|
|
</re-col>
|
|
|
|
@ -291,7 +371,7 @@ const dataViewList = [
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span :class="headStyles">违规总量</span>
|
|
|
|
<span :class="headStyles">违规总量</span>
|
|
|
|
<div class="flex justify-between h-[265px]">
|
|
|
|
<div class="flex justify-between h-[265px]">
|
|
|
|
<barChart />
|
|
|
|
<barChart :requireData="barData" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</re-col>
|
|
|
|
</re-col>
|
|
|
|
@ -317,7 +397,7 @@ const dataViewList = [
|
|
|
|
<el-card class="line-card" shadow="always" :body-style="{ padding: 0 }">
|
|
|
|
<el-card class="line-card" shadow="always" :body-style="{ padding: 0 }">
|
|
|
|
<span :class="headStyles" class="mt-3 ml-4 mb-0">消息通知</span>
|
|
|
|
<span :class="headStyles" class="mt-3 ml-4 mb-0">消息通知</span>
|
|
|
|
<div class="flex justify-between h-[285px]">
|
|
|
|
<div class="flex justify-between h-[285px]">
|
|
|
|
<Notify />
|
|
|
|
<Notify :MessageData="MessageData" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</re-col>
|
|
|
|
</re-col>
|
|
|
|
|
JINGYJ
12 months ago